首页桌面

public/static/css/fixcroll/fixcroll.css

@@ -0,0 +1,82 @@
+.scrollgeneric {
+    line-height: 1px;
+    font-size: 1px;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .vscrollerbase,
+  .hscrollerbase {
+    width: 0px;
+    height: 0px;
+  }
+
+  .vscrollerbar {
+    width: 8px;
+    margin-left: -10px;
+  }
+
+  .hscrollerbar {
+    height: 8px;
+    margin-top: -10px;
+  }
+
+  .vscrollerbar,
+  .hscrollerbar {
+    background-color: rgba(0, 0, 0, 0.12);
+    border-radius: 100px;
+    -moz-transition-property: background-color;
+    -o-transition-property: background-color;
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
+    -moz-transition-timing-function: ease-in;
+    -o-transition-timing-function: ease-in;
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+    -moz-transition-duration: 0.3s;
+    -o-transition-duration: 0.3s;
+    -webkit-transition-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+
+  .vscrollerbar:hover,
+  .hscrollerbar:hover {
+    background-color: rgba(0, 0, 0, 0.42);
+  }
+
+  .vscrollerbar:active,
+  .hscrollerbar:active {
+    background-color: rgba(0, 0, 0, 0.42);
+  }
+
+  .white-scrollerbar .vscrollerbar,
+  .white-scrollerbar .hscrollerbar {
+    background: rgba(255, 255, 255, 0.3);
+    -moz-transition-property: background-color;
+    -o-transition-property: background-color;
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
+    -moz-transition-timing-function: ease-in;
+    -o-transition-timing-function: ease-in;
+    -webkit-transition-timing-function: ease-in;
+    transition-timing-function: ease-in;
+    -moz-transition-duration: 0.3s;
+    -o-transition-duration: 0.3s;
+    -webkit-transition-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+
+  .white-scrollerbar .vscrollerbar:hover,
+  .white-scrollerbar .hscrollerbar:hover {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+
+  .white-scrollerbar .vscrollerbar:active,
+  .white-scrollerbar .hscrollerbar:active {
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+  
+  .flexcrollactive {
+    outline: none;
+  }

public/static/css/style/style.css

@@ -2062,6 +2062,16 @@ ul.sds-desktop-shortcut {
     padding-top: 16px;
 }
 
+/* notiify 设置 */
+.syno-ux-gridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-desc .x-grid3-hd-inner .x-grid3-sort-icon, .syno-ux-gridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon, .syno-ux-editorgridpanel .x-grid3-hd.sort-asc .x-grid3-hd-inner .x-grid3-sort-icon {
+    background-image: url("../../../image/index/arrowTable.png");
+}
+
+.syno-ux-checkbox-icon, .syno-ux-radio-icon {
+    background-image: url("../../../image/index/checkbox.svg");
+}
+
+
 /* notiify 查看全部 */
 .sds-notify-showall-dialog.v-window .v-window-header-wrapper .app-icon {
     display: none;
@@ -2111,6 +2121,18 @@ ul.sds-desktop-shortcut {
     background-image: url(../../../image/index/arrowTable.png);
 }
 
+.v-table th.sorting .v-table-column-sorter {
+    display: inline-block;
+}
+
+.v-table th .v-table-column-sorter.up {
+    background-position: 0px -20px;
+}
+
+.v-table th .v-table-column-sorter.down {
+    background-position: 0px -20px;
+}
+
 .window-header-tool-wrapper .tool.restore {
     background-image: url(../../../image/index/windowRestore.png);
 }
@@ -2133,4 +2155,29 @@ ul.sds-desktop-shortcut {
 
 .v-pagination .v-pagination-right .v-pagination-refresh{
     background-image: url(../../../image/index/reset.png);
+}
+
+/* 清除弹出窗 */
+.sds-window-v5.x-window-dlg.confirm-delete-icon:before {
+    content: '';
+    position: absolute;
+    top: -14px;
+    left: 30px;
+    width: 48px;
+    height: 48px;
+    border-radius: 24px;
+    background-color: #E64040;
+    background-image: url("../../../image/index/dialog_alarm.png");
+    box-shadow: 0 6px 12px 0 rgba(230,64,64,0.15);
+    z-index: 10;
+    background-position: 8px 8px;
+    background-repeat: no-repeat;
+}
+
+.x-clear {
+    clear: both;
+    font-size: 0;
+    height: 0;
+    line-height: 0;
+    overflow: hidden;
 }

src/App.vue

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="contain">
       <Header></Header>
-      <Desktop></Desktop>
+      <Desktop :defaultZIndex="defaultZIndex"></Desktop>
       <DesktopAppView></DesktopAppView>
     </div>
   </div>
@@ -17,12 +17,26 @@ import { getCurrentInstance } from "vue";
 import mitt from "mitt";
 export default {
   data() {
-    return {};
+    return {
+      defaultZIndex: 9053,
+    };
   },
   beforeCreate() {
     const ins = getCurrentInstance();
     ins.appContext.config.globalProperties.$bus = mitt();
   },
+  mounted(){
+    this.$bus.on('changeDefaultZIndex',this.changeDefaultZIndex)
+  },
+  methods:{
+    // 改变公共zIndex
+    changeDefaultZIndex(zIndex){
+      if(this.defaultZIndex > 999999990){
+        this.defaultZIndex = 999999990
+      }
+      this.defaultZIndex = zIndex
+    },
+  },
   components: {
     Header,
     Desktop,

src/component/Desktop/DeleteNotifyMessage/index.vue

@@ -0,0 +1,310 @@
+<template>
+  <!-- 清除全部弹出框 -->
+  <div
+    class="x-window x-window-dlg sds-window-v5 active-win"
+    style="
+      position: absolute;
+      z-index: 11004;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 480px;
+    "
+    :style="{display: display}"
+    :class="confirmDeleteDetail ? confirmDeleteDetail.cls : ''"
+  >
+    <div
+      class="x-dlg-focus"
+    ></div>
+    <div class="x-window-tl">
+      <div class="x-window-tr"><div class="x-window-tc"></div></div>
+    </div>
+    <div class="x-window-bwrap" v-if="confirmDeleteDetail">
+      <div class="x-window-ml">
+        <div class="x-window-mr">
+          <div class="x-window-mc">
+            <div
+              class="x-window-body"
+              style="padding: 24px 30px 0px; width: 420px; height: auto"
+            >
+              <div class="x-dlg-icon">
+                <div class="ext-mb-content">
+                  <div
+                    class="ext-mb-title"
+                    style="display: none"
+                  ></div>
+                  <span class="ext-mb-text"
+                    >{{confirmDeleteDetail.text}}</span
+                  ><br class="ext-mb-br" />
+                  <div class="ext-mb-fix-cursor"></div>
+                </div>
+                <div
+                  class="ext-mb-grid"
+                  style="display: none"
+                ></div>
+                <div
+                  class="x-progress-wrap syno-mb-progress x-hide-display"
+                >
+                  <div class="x-progress-inner">
+                    <div
+                      class="x-progress-bar"
+                      style="height: 6px; width: 0px"
+                    >
+                      <div
+                        class="x-progress-text"
+                        style="z-index: 99; width: 0px"
+                      >
+                        <div style="width: 6px; height: 6px">
+                          &nbsp;
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="x-progress-text x-progress-text-back"
+                    >
+                      <div style="width: 6px; height: 6px">
+                        &nbsp;
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="x-clear"></div>
+                <span class="syno-mb-progress-status"></span>
+                <div class="syno-mb-progress-info"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="x-window-bl">
+        <div class="x-window-br">
+          <div class="x-window-bc">
+            <div
+              class="x-window-footer x-panel-btns"
+              style="width: 428px"
+            >
+              <div
+                class="x-panel-fbar x-small-editor x-toolbar-layout-ct"
+                style="width: auto"
+              >
+                <table cellspacing="0" class="x-toolbar-ct">
+                  <tbody>
+                    <tr>
+                      <td class="x-toolbar-left" align="left">
+                        <table cellspacing="0">
+                          <tbody>
+                            <tr class="x-toolbar-left-row">
+                              <td
+                                class="x-toolbar-cell x-hide-display"
+                              >
+                                <span
+                                  cellspacing="0"
+                                  class="
+                                    x-btn
+                                    syno-ux-button syno-ux-button-grey
+                                    x-btn-noicon
+                                  "
+                                  style="margin-left: 0px"
+                                  ><em class="x-unselectable" unselectable="on"
+                                    ><button
+                                      type="button"
+                                      class="x-btn-text"
+                                    ></button></em
+                                ></span>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                      <td class="x-toolbar-right" align="right">
+                        <table cellspacing="0" class="x-toolbar-right-ct">
+                          <tbody>
+                            <tr>
+                              <td>
+                                <table cellspacing="0">
+                                  <tbody>
+                                    <tr class="x-toolbar-right-row">
+                                      <td
+                                        class="x-toolbar-cell x-hide-display"
+                                      >
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button syno-ux-button-grey
+                                            x-btn-noicon
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em
+                                            class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                            >
+                                              否
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <td
+                                        class="x-toolbar-cell x-hide-display"
+                                      >
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button syno-ux-button-grey
+                                            x-btn-noicon
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em
+                                            class="x-unselectable"
+                                            unselectable="on"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                            >
+                                              取消
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <td
+                                        class="x-toolbar-cell"
+                                      >
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button
+                                            x-btn-noicon
+                                            syno-ux-button-grey
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em
+                                            class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                              @click="cancleClear"
+                                            >
+                                              取消
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <td
+                                        class="x-toolbar-cell x-hide-display"
+                                      >
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button syno-ux-button-blue
+                                            x-btn-noicon
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em
+                                            class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                            >
+                                              确定
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <td
+                                        class="x-toolbar-cell"
+                                      >
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button
+                                            x-btn-noicon
+                                            syno-ux-button-red
+                                            syno-ux-button-blue
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em
+                                            class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                              @click="confirmClear"
+                                            >
+                                              清除全部
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                              <td>
+                                <table cellspacing="0">
+                                  <tbody>
+                                    <tr class="x-toolbar-extras-row"></tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="x-clear"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      display:'none', 
+      confirmDeleteDetail:''
+    };
+  },
+  mounted(){
+    this.$bus.on("openDeleteNotifyMessage",this.openDeleteNotifyMessage)
+  },
+  methods:{
+    // 打开本页面
+    openDeleteNotifyMessage(obj){
+      this.display = 'block'
+      this.confirmDeleteDetail = obj
+    },
+    // 关闭本页面
+    closeDeleteNotifyMessage(){
+      this.display = 'none'
+      this.confirmDeleteDetail = ''
+    },
+    // 点击取消
+    cancleClear(){
+      this.closeDeleteNotifyMessage()
+      this.$bus.emit("closeMask")
+    },
+    // 清除 
+    confirmClear(){
+      this.closeDeleteNotifyMessage()
+      this.$bus.emit("closeMask")
+      this.$bus.emit("clearAllNotifyMessage")
+      this.$bus.emit("closeNotifyDetail")
+      this.$bus.emit("closeNotifyShowall");
+    }
+  },
+  components: {},
+  name: "DeleteNotifyMessage",
+};
+</script>

src/component/Desktop/FixWindow/index.vue

@@ -292,12 +292,12 @@ export default {
       this.changeOrHiddenWidgetPosition
     );
     this.$bus.on("dialogWindowZIndexIsMax", this.dialogWindowZIndexIsMax);
-    let el = document.querySelector(".ps__thumb-y");
-    let el1 = document.querySelector(".v-window-header-wrapper");
+    let el = document.querySelector(".v-widget-window .ps__thumb-y");
+    let el1 = document.querySelector(".v-widget-window .v-window-header-wrapper");
     el.addEventListener("mouseup", this.mouseupProgress);
     el1.addEventListener("mouseup", this.mouseupWidgetHeader);
-    let el2 = document.querySelector(".v-widget-list");
-    let el3 = document.querySelector(".ps__rail-y");
+    let el2 = document.querySelector(".v-widget-window .v-widget-list");
+    let el3 = document.querySelector(".v-widget-window .ps__rail-y");
     if(el2.offsetHeight > el3.offsetHeight){
         this.thumbYDisplay = 'block'
         this.thumbYHeight = 'calc((100vh - 52px) / 2)'
@@ -330,7 +330,7 @@ export default {
     },
     //点击进度条
     mousedownProgress(e) {
-      let el = document.querySelector(".ps__thumb-y");
+      let el = document.querySelector(".v-widget-window .ps__thumb-y");
       let el1 = document.querySelector(".v-widget-window");
       el.addEventListener("mousemove", this.moveProgress);
 
@@ -343,9 +343,9 @@ export default {
     },
     //移动进度条
     moveProgress(e) {
-      let el = document.querySelector(".ps__thumb-y");
-      let el1 = document.querySelector(".ps__rail-y");
-      let el2 = document.querySelector(".v-widget-list");
+      let el = document.querySelector(".v-widget-window .ps__thumb-y");
+      let el1 = document.querySelector(".v-widget-window .ps__rail-y");
+      let el2 = document.querySelector(".v-widget-window .v-widget-list");
       let moveY;
       if (e.clientY >= this.progrecssFirstClick.clientY) {
         moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
@@ -383,9 +383,9 @@ export default {
     },
     // 进度条鼠标抬起/离开
     mouseupProgress() {
-      let el = document.querySelector(".ps__thumb-y");
-      let el1 = document.querySelector(".ps__rail-y");
-      let el2 = document.querySelector(".v-widget-list");
+      let el = document.querySelector(".v-widget-window .ps__thumb-y");
+      let el1 = document.querySelector(".v-widget-window .ps__rail-y");
+      let el2 = document.querySelector(".v-widget-window .v-widget-list");
       el.removeEventListener("mousemove", this.moveProgress);
       if(el2.offsetHeight > el1.offsetHeight){
         this.thumbYDisplay = 'block'
@@ -395,9 +395,9 @@ export default {
     },
     // 滚动窗口列表
     scrollList(e) {
-      let el = document.querySelector(".ps__thumb-y");
-      let el1 = document.querySelector(".ps__rail-y");
-      let el2 = document.querySelector(".ps--active-y");
+      let el = document.querySelector(".v-widget-window .ps__thumb-y");
+      let el1 = document.querySelector(".v-widget-window .ps__rail-y");
+      let el2 = document.querySelector(".v-widget-window .ps--active-y");
       // if(! this.widgetListIsBottom){
         let moveY =
           ((el1.offsetHeight - el.offsetHeight)/(e.target.scrollHeight - el2.offsetHeight)) * e.target.scrollTop
@@ -414,7 +414,7 @@ export default {
     },
     // 点击小窗口选择框的每一项
     showOrHiddenWidgetItem(obj) {
-      let widgetItemArray = document.querySelectorAll(".v-widget-item");
+      let widgetItemArray = document.querySelectorAll(".v-widget-window .v-widget-item");
       Array.from(widgetItemArray)[obj.index].className = obj.cls;
       this.portalDetail.detailMessageList[obj.index].cls = obj.cls1;
       this.portalDetail.detailMessageList.forEach((item) => {
@@ -458,7 +458,7 @@ export default {
     // },
     //点击固定窗口头部
     mousedownWidgetHeader(e) {
-      let el = document.querySelector(".v-window-header-wrapper");
+      let el = document.querySelector(".v-widget-window .v-window-header-wrapper");
       let el1 = document.querySelector(".v-widget-window");
       this.widgetFirstClick.clientX = e.clientX;
       this.widgetFirstClick.offsetX = e.offsetX;
@@ -467,13 +467,12 @@ export default {
       this.widgetFirstClick.offsetY = e.offsetY;
       this.widgetFirstClick.screenY = document.documentElement.clientHeight;
       el.addEventListener("mousemove", this.mousemoveWidgetHeader);
-      console.dir(el1);
     },
     //移动固定窗口头部
     mousemoveWidgetHeader(e) {
-      let el = document.querySelector(".v-window-header-wrapper");
+      let el = document.querySelector(".v-widget-window .v-window-header-wrapper");
       let el1 = document.querySelector(".v-widget-window");
-      let el2 = document.querySelector(".v-widget-list");
+      let el2 = document.querySelector(".v-widget-window .v-widget-list");
       el2.style.display = "none";
       // X轴
       let moveX = 0;
@@ -503,8 +502,8 @@ export default {
     },
     //鼠标抬起固定窗口头部
     mouseupWidgetHeader() {
-      let el = document.querySelector(".v-window-header-wrapper");
-      let el1 = document.querySelector(".v-widget-list");
+      let el = document.querySelector(".v-widget-window .v-window-header-wrapper");
+      let el1 = document.querySelector(".v-widget-window .v-widget-list");
       let el2 = document.querySelector(".v-widget-window");
       el.removeEventListener("mousemove", this.mousemoveWidgetHeader);
       el1.style.display = "flex";
@@ -512,7 +511,7 @@ export default {
     },
     //显示或隐藏固定窗口
     showOrHiddenWidget(e) {
-      let el = document.querySelector(".v-widget-header-tool-icon.pin");
+      let el = document.querySelector(".v-widget-window .v-widget-header-tool-icon.pin");
       if (this.display === "block") {
         if(e.srcElement.className.includes(' pressed')){
           e.srcElement.className = e.srcElement.className.replace(' pressed','')
@@ -539,9 +538,9 @@ export default {
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
       this.$bus.emit("fixWindowZIndexMax", false);
       let el = document.querySelector('.tray-item.widget-button')
-      if(el.className.includes(' pressed')){
-          el.className = el.className.replace(' pressed','')
-        }
+      if(el.className && el.className.includes(' pressed')){
+        el.className = el.className.replace(' pressed','')
+      }
     },
     // 显示或隐藏位置选择框
     selectWidgetPosition() {
@@ -564,13 +563,13 @@ export default {
       this.bottom = detailMessageItem.bottom;
       this.left = detailMessageItem.left;
       this.right = detailMessageItem.right;
-      let el = document.querySelector(".v-widget-header-tool-icon.dock");
+      let el = document.querySelector(".v-widget-window .v-widget-header-tool-icon.dock");
       el.className = el.className + " active";
       let cls = this.portalDetail1.detailMessageList[0].cls;
       if (cls && !cls.includes("active")) {
         this.portalDetail1.detailMessageList[0].cls = cls + " active";
       }
-      // sds-desktop .v-widget-window .v-widget-items-wrapper{
+      // sds-desktop .v-widget-window  .v-widget-window .v-widget-items-wrapper{
       //   height: calc(100vh - 42px) !important;
       // }
       // #sds-desktop .v-widget-window{
@@ -578,14 +577,14 @@ export default {
       // }
       if (obj.index == 0) {
         let el1 = document.querySelector(".v-widget-window");
-        let el2 = document.querySelector(".v-widget-items-wrapper");
+        let el2 = document.querySelector(".v-widget-window  .v-widget-items-wrapper");
         el1.style.height = "calc(100vh - 47px) !important";
         el2.style.height = "calc(100vh - 120px) !important";
       }
     },
     //点击小钉子
     pinFixWndow() {
-      let el = document.querySelector(".v-widget-header-tool-icon.pin");
+      let el = document.querySelector(".v-widget-window .v-widget-header-tool-icon.pin");
       if (el.className.includes("active")) {
         el.className = el.className.replace(" active", "");
         this.$bus.emit("fixWindowZIndexMax", false);
@@ -648,4 +647,8 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
     color: #fff!important;
 }
+
+/* 
+
+*/
 </style>

src/component/Desktop/Mask/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <!-- 弹出层 -->
+  <div
+    class="ext-el-mask"
+    style="width: calc(100vw); height: calc(100vh); z-index: 11001"
+    :style="{display:display}"
+  ></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+        display:'none'
+    };
+  },
+  mounted(){
+    this.$bus.on("openMask",this.openMask)
+    this.$bus.on("closeMask",this.closeMask)
+  },
+  methods:{
+    // 打开弹出层
+    openMask(){
+        this.display = 'block'
+    },
+    // 关闭弹出层
+    closeMask(){
+        console.log(1111)
+        this.display = 'none'
+    }
+  },
+  components: {},
+  name: "Mask",
+};
+</script>

src/component/Desktop/NotifyShowall/index.vue

@@ -7,12 +7,8 @@
       v-window
       active-win
     "
-    style="
-      position: absolute;
-      left: 10px;
-      z-index: 9050;
-    "
-    :style="{ display: display, width: width, height: height, top: top}"
+    style="position: absolute; left: 10px; z-index: 9050"
+    :style="{ display: display, width: width, height: height, top: top }"
   >
     <div class="v-window-header-wrapper draggable">
       <div class="app-icon"></div>
@@ -21,7 +17,8 @@
       </div>
 
       <div class="window-header-tool-wrapper light">
-        <div class="tool maximize" @click="maxWindow"></div>
+        <div class="tool maximize" @click="maxWindow" v-if="!windowIsMax"></div>
+        <div class="tool restore" @click="minWindow" v-else></div>
         <div class="tool close" @click="closeNotifyShowall"></div>
       </div>
     </div>
@@ -76,7 +73,7 @@
                       :style="{ display: maskDisplay }"
                     ></div>
 
-                    <div style="width: 800px" class="v-table">
+                    <div class="v-table">
                       <div class="v-table-header">
                         <table>
                           <colgroup>
@@ -103,19 +100,27 @@
                                 colspan="1"
                                 rowspan="1"
                                 class="cell-first"
-                                @click.stop="sort"
+                                :class="thContant.cls"
+                                v-for="(thContant,thContantIndex) in thContantArray"
+                                :key="thContant.id"
+                                @click.stop="sort(thContantIndex)"
                               >
                                 <div class="inner-cell">
                                   <div class="head-cell cell">
-                                    <span class="cell-title">层级</span>
+                                    <span class="cell-title">{{thContant.text}}</span>
                                     <span
-                                      class="v-table-column-sorter down"
+                                      class="v-table-column-sorter"
+                                      :class="thContant.cls1"
                                     ></span>
                                   </div>
                                 </div>
                               </th>
-                              <th colspan="1" rowspan="1" class=""
-                                @click.stop="sort">
+                              <!-- <th
+                                colspan="1"
+                                rowspan="1"
+                                class=""
+                                @click.stop="sort"
+                              >
                                 <div class="inner-cell">
                                   <div class="head-cell cell">
                                     <span class="cell-title">类别</span>
@@ -125,8 +130,12 @@
                                   </div>
                                 </div>
                               </th>
-                              <th colspan="1" rowspan="1" class=""
-                                @click.stop="sort">
+                              <th
+                                colspan="1"
+                                rowspan="1"
+                                class=""
+                                @click.stop="sort"
+                              >
                                 <div class="inner-cell">
                                   <div class="head-cell cell">
                                     <span class="cell-title">主题</span>
@@ -136,8 +145,12 @@
                                   </div>
                                 </div>
                               </th>
-                              <th colspan="1" rowspan="1" class="last-th-cell"
-                                @click.stop="sort">
+                              <th
+                                colspan="1"
+                                rowspan="1"
+                                class="last-th-cell"
+                                @click.stop="sort"
+                              >
                                 <div class="inner-cell">
                                   <div class="head-cell cell">
                                     <span class="cell-title">时间</span>
@@ -146,7 +159,7 @@
                                     ></span>
                                   </div>
                                 </div>
-                              </th>
+                              </th> -->
                             </tr>
                           </thead>
                         </table>
@@ -157,18 +170,10 @@
                           <div class="v-table-body">
                             <table role="none">
                               <colgroup>
-                                <col
-                                  width="100"
-                                />
-                                <col
-                                  width="160"
-                                />
-                                <col
-                                  width="380"
-                                />
-                                <col
-                                  width="160"
-                                />
+                                <col width="100" />
+                                <col width="160" />
+                                <col width="380" />
+                                <col width="160" />
                               </colgroup>
                               <tbody role="none" class="v-table-tbody">
                                 <tr
@@ -333,16 +338,44 @@ export default {
       display: "none",
       loading: false,
       maskDisplay: "none",
-      width: '840px',
-      height: '480px',
-      top: '10px',
+      width: "840px",
+      height: "480px",
+      top: "10px",
+      thContantArray: [
+        {
+          id: 0,
+          text:'层级',
+          cls:'',
+          cls1:'down',
+        },
+        {
+          id: 1,
+          text:'类别',
+          cls:'',
+          cls1:'down',
+        },
+        {
+          id: 1,
+          text:'主题',
+          cls:'',
+          cls1:'down',
+        },
+        {
+          id: 1,
+          text:'时间',
+          cls:'',
+          cls1:'down',
+        },
+      ],
       notifyShowallDetail: {
         detailMessageList: [],
       },
+      windowIsMax: false
     };
   },
   mounted() {
     this.$bus.on("openNotifyShowall", this.openNotifyShowall);
+    this.$bus.on("closeNotifyShowall", this.closeNotifyShowall);
   },
   methods: {
     // 打开本页面
@@ -395,20 +428,41 @@ export default {
       }
     },
     // 排序
-    sort(e) {
-      console.log(e.srcElement);
-      this.maskDisplay = 'block'
-      this.loading = true
+    sort(thContantIndex) {
+      this.thContantArray.forEach(item=>{
+        item.cls = ''
+      })
+      console.log(thContantIndex);
+      if(this.thContantArray[thContantIndex].cls === ''){
+        this.thContantArray[thContantIndex].cls = 'sorting'
+      }
+      console.log(this.thContantArray[thContantIndex].cls1)
+      if(this.thContantArray[thContantIndex].cls1 === 'down'){
+        this.thContantArray[thContantIndex].cls1 = 'up'
+      }else{
+        this.thContantArray[thContantIndex].cls1 = 'down'
+      }
+      this.maskDisplay = "block";
+      this.loading = true;
+
       setTimeout(() => {
-        this.maskDisplay = 'none'
+        this.maskDisplay = "none";
         this.loading = false;
       }, 1000);
     },
     // 页面最大化
-    maxWindow(){
-        this.top = '40px'
-        this.width = '100%'
-        this.height = 'calc(100%vh - 40px)'
+    maxWindow() {
+      this.top = "40px";
+      this.width = "100%";
+      this.height = "calc(100vh - 40px)";
+      this.windowIsMax = true
+    },
+    // 页面最小化
+    minWindow(){
+      this.top = "10px";
+      this.width = "840px";
+      this.height = "480px";
+      this.windowIsMax = false
     }
   },
   components: {},

src/component/Desktop/NotifyTrayPanel/index.vue

@@ -252,10 +252,18 @@
                               syno-ux-button syno-ux-button-grey
                               x-btn-noicon
                             "
-                            :class="notifyTrayPanelDetail.detailMessageList.length ? '' : 'x-item-disabled'"
+                            :class="
+                              notifyTrayPanelDetail.detailMessageList.length
+                                ? ''
+                                : 'x-item-disabled'
+                            "
                             style="width: auto; margin-left: 0px"
                             ><em class="x-unselectable" unselectable="on"
-                              ><button type="button" class="x-btn-text">
+                              ><button
+                                type="button"
+                                class="x-btn-text"
+                                @click="clearAll"
+                              >
                                 清除全部
                               </button></em
                             ></span
@@ -283,7 +291,11 @@
                                     "
                                     style="width: auto; margin-left: 0px"
                                     ><em class="x-unselectable"
-                                      ><button type="button" class="x-btn-text" @click="openNotifyShowall">
+                                      ><button
+                                        type="button"
+                                        class="x-btn-text"
+                                        @click="openNotifyShowall"
+                                      >
                                         显示全部
                                       </button></em
                                     ></span
@@ -331,7 +343,7 @@ export default {
             text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
             message:
               '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
-            showMessage: ' 我们的服务数据收集披露已更新。 '
+            showMessage: " 我们的服务数据收集披露已更新。 ",
           },
           {
             id: 1,
@@ -343,7 +355,7 @@ export default {
             text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
             message:
               '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
-            showMessage: ' 我们的服务数据收集披露已更新。 '
+            showMessage: " 我们的服务数据收集披露已更新。 ",
           },
           {
             id: 2,
@@ -355,7 +367,7 @@ export default {
             text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
             message:
               '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
-            showMessage: ' 我们的服务数据收集披露已更新。 '
+            showMessage: " 我们的服务数据收集披露已更新。 ",
           },
           {
             id: 3,
@@ -367,7 +379,7 @@ export default {
             text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
             message:
               '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
-            showMessage: ' 我们的服务数据收集披露已更新。 '
+            showMessage: " 我们的服务数据收集披露已更新。 ",
           },
           {
             id: 4,
@@ -379,7 +391,7 @@ export default {
             text: '我们的<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>已更新。',
             message:
               '我们已更新<a href="https://sy.to/zvgxb" target="_blank">服务数据收集披露</a>，使它更容易理解并反映我们最近的政策更改。建议您通过单击上面的链接来阅读我们的服务数据收集披露，并定期检查是否有任何更改。',
-            showMessage: ' 我们的服务数据收集披露已更新。 '
+            showMessage: " 我们的服务数据收集披露已更新。 ",
           },
         ],
       },
@@ -388,15 +400,15 @@ export default {
   created() {},
   mounted() {
     this.$bus.on("openOrHiddenNotify", this.openOrHiddenNotify);
+    // this.$bus.on("windowMaxChange",this.windowMaxChange)
+      this.$bus.on("clearAllNotifyMessage",this.clearAllNotifyMessage)
+
   },
   components: {},
   methods: {
     //显示或隐藏本页面
     openOrHiddenNotify(e) {
       if (this.display === "none") {
-        this.display = "block";
-        e.srcElement.className = e.srcElement.className + " pressed";
-        this.$bus.emit("notifyMessageRead");
         let date = new Date().getTime();
         this.notifyTrayPanelDetail.detailMessageList.forEach((item) => {
           function timestampToTime(timestamp) {
@@ -457,6 +469,10 @@ export default {
           }
           item.time1 = timestampToTime(item.date);
         });
+        this.display = "block";
+        e.srcElement.className = e.srcElement.className + " pressed";
+        this.$bus.emit("notifyMessageRead");
+        // this.$bus.emit("windowMaxChange",'notifyTray')
         window.onclick = () => {
           this.display = "none";
           if (e.srcElement.className.includes(" pressed")) {
@@ -481,11 +497,55 @@ export default {
       this.display = "none";
       this.$bus.emit("openNotifyDetail", detailMessage);
       this.notifyTrayPanelDetail.detailMessageList[detailMessageIndex].cls = "";
+      let el = document.querySelector(".tray-item.notify-button");
+      if (el.className && el.className.includes(" pressed")) {
+        el.className = el.className.replace(" pressed", "");
+      }
     },
     // 打开显示全部页面
-    openNotifyShowall(){
-      this.$bus.emit("openNotifyShowall",this.notifyTrayPanelDetail.detailMessageList)
-    }
+    openNotifyShowall() {
+      this.display = "none";
+      this.$bus.emit(
+        "openNotifyShowall",
+        this.notifyTrayPanelDetail.detailMessageList
+      );
+      let el = document.querySelector(".tray-item.notify-button");
+      if (el.className && el.className.includes(" pressed")) {
+        el.className = el.className.replace(" pressed", "");
+      }
+    },
+    // 清除全部
+    clearAll() {
+      let obj = {
+        cls: "confirm-delete-icon",
+        title: "",
+        text: "所有桌面通知都会被清除。是否确定要继续？",
+        // buttonList:[
+        //   {
+        //     id:0,
+        //     html:'<span cellspacing="0" class="x-btn syno-ux-button x-btn-noicon syno-ux-button-grey" style="width: auto; margin-left: 0px;"><em class=" x-unselectable"><button type="button"class=" x-btn-text">取消</button></em></span>'
+        //   },
+        //   {
+        //     id:1,
+        //     html:'<span cellspacing="0" class="x-btn syno-ux-button x-btn-noicon syno-ux-button-red syno-ux-button-blue" style="width: auto; margin-left: 0px;"><em class=" x-unselectable"><button type="button" class=" x-btn-text">清除全部</button></em></span>'
+        //   }
+        // ]
+      };
+      this.$bus.emit("openDeleteNotifyMessage", obj);
+      this.$bus.emit("openMask");
+    },
+    // 切换页面窗口的层级
+    // windowMaxChange(str){
+    //   if(str === 'notifyTray' ){
+    //     this.display = 'block'
+    //   }else{
+    //     this.display = 'none'
+    //   }
+    // }
+    // 清除所有信息
+    clearAllNotifyMessage() {
+      this.notifyTrayPanelDetail.detailMessageList = [];
+    },
   },
   name: "NotifyTrayPanel",
 };

src/component/Desktop/NotifyTrayPanelDetail/index.vue

@@ -5,7 +5,6 @@
       sds-notify-detail-dialog
       layout-window-app
       v-window
-      active-win
     "
     style="
       position: absolute;
@@ -13,9 +12,10 @@
       height: 420px;
       top: 10px;
       left: 10px;
-      z-index: 9050;
     "
-    :style="{display:display}"
+    :style="{ display: display, zIndex: zIndex }"
+    :class="cls"
+    @click="openNotifyDetail"
   >
     <div class="v-window-header-wrapper draggable">
       <div class="app-icon"></div>
@@ -24,16 +24,16 @@
       </div>
 
       <div class="window-header-tool-wrapper light">
-        <div class="tool close" @click="closeNotifyDetail"></div>
+        <div class="tool close" @click.stop="closeNotifyDetail"></div>
       </div>
     </div>
-    <div class="v-window-body" v-if="notifyTrayPanelDetail.detailMessage.length">
+    <div
+      class="v-window-body"
+      v-if="notifyTrayPanelDetail.detailMessage.length"
+    >
       <div class="v-trap-focus-indicator"></div>
       <div class="v-trap-focus-body">
-        <div
-          role="application"
-          class="v-trap-focus-indicator"
-        ></div>
+        <div role="application" class="v-trap-focus-indicator"></div>
         <div
           class="v-layout detail-panel layout-panel-content v-panel"
           style="--svc-layout-height: 100%"
@@ -60,7 +60,9 @@
                       </div>
                       <div class="v-form-item-input">
                         <div class="v-form-item-control v-form-displayfield">
-                          <div>{{notifyTrayPanelDetail.detailMessage[0].title}}</div>
+                          <div>
+                            {{ notifyTrayPanelDetail.detailMessage[0].title }}
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -71,7 +73,11 @@
                       <div class="v-form-item-input">
                         <div class="v-form-item-control v-form-displayfield">
                           <div>
-                            <div v-html="notifyTrayPanelDetail.detailMessage[0].text"></div>
+                            <div
+                              v-html="
+                                notifyTrayPanelDetail.detailMessage[0].text
+                              "
+                            ></div>
                           </div>
                         </div>
                       </div>
@@ -82,7 +88,9 @@
                       </div>
                       <div class="v-form-item-input">
                         <div class="v-form-item-control v-form-displayfield">
-                          <div>{{notifyTrayPanelDetail.detailMessage[0].time1}}</div>
+                          <div>
+                            {{ notifyTrayPanelDetail.detailMessage[0].time1 }}
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -90,7 +98,12 @@
                       <div class="v-form-item-input">
                         <div class="v-form-item-control v-form-displayfield">
                           <div>
-                            <div class="detail-mail-content" v-html="notifyTrayPanelDetail.detailMessage[0].message"></div>
+                            <div
+                              class="detail-mail-content"
+                              v-html="
+                                notifyTrayPanelDetail.detailMessage[0].message
+                              "
+                            ></div>
                           </div>
                         </div>
                       </div>
@@ -122,7 +135,7 @@
                 <button
                   type="button"
                   class="v-btn v-btn-footbar v-btn-grey"
-                  @click="closeNotifyDetail"
+                  @click.stop="closeNotifyDetail"
                 >
                   <span> 关闭 </span>
                 </button>
@@ -138,34 +151,53 @@
 
 <script>
 export default {
-  mounted(){
-    this.$bus.on("openNotifyDetail",this.openNotifyDetail);
+  props: ["defaultZIndex"],
+  mounted() {
+    this.$bus.on("openNotifyDetail", this.openNotifyDetail);
+    this.$bus.on("closeNotifyDetail", this.closeNotifyDetail);
   },
   data() {
     return {
-      display: 'none',
-      notifyTrayPanelDetail:{
-        detailMessage: []
-      }
+      display: "none",
+      notifyTrayPanelDetail: {
+        detailMessage: [],
+      },
+      zIndex: 9050,
+      cls:'active-win',
     };
   },
   components: {},
-  methods:{
-    // 打开本页面
-    openNotifyDetail(detailMessage){
-      this.display = 'block'
-      console.log(detailMessage)
-      this.notifyTrayPanelDetail.detailMessage[0] = detailMessage
+  methods: {
+    // 打开/点击本页面
+    openNotifyDetail(detailMessage) {
+      if(this.display === 'none'){
+        this.display = "block";
+      }
+      if(this.zIndex < this.defaultZIndex){
+        this.notifyTrayPanelDetail.detailMessage[0] = detailMessage;
+        this.zIndex = this.defaultZIndex + 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      }
     },
     // 关闭本页面
-    closeNotifyDetail(){
-      this.display = 'none'
+    closeNotifyDetail() {
+      console.log(111)
+      this.display = "none";
     },
-  }
+  },
+  watch:{
+    defaultZIndex(newVal){
+      if(this.zIndex < newVal){
+        this.cls = 'deactive-win'
+      }else{
+        this.cls = 'active-win'
+      }
+    }
+  },
 };
 </script>
 <style lang="css" scoped>
-  .v-window .v-window-body{
-    height: 380px;
-  }
+.v-window .v-window-body {
+  height: 380px;
+}
 </style>

src/component/Desktop/Shortcut/ResizablePinned/index.vue

@@ -7,12 +7,14 @@
         position: absolute;
         visibility: visible;
         left: 50%;
-        top: 0px;
-        transform: translateX(-50%);
+        top: 50%;
+        transform: translate(-50%,-50%);
         background: #fff;
       "
       :style="{
-        width: `${detailMessage.width}`,
+        width: detailMessage.width,
+        height:detailMessage.height,
+        minHeight: detailMessage.minHeight,
         display: detailMessage.display,
         zIndex: detailMessage.zIndex,
       }"
@@ -224,6 +226,8 @@ export default {
           {
             id: "0",
             width: "1254px",
+            height: "calc(100vh - 80px)",
+            minHeight: "560px",
             title: "套件中心",
             spacialCls: "tjCenter",
             cls: "",
@@ -236,6 +240,8 @@ export default {
           {
             id: "1",
             width: "1150px",
+            height: "calc(100vh - 120px)",
+            minHeight: "520px",
             title: "控制中心",
             spacialCls: "controlCenter",
             cls: "11111111",
@@ -248,6 +254,8 @@ export default {
           {
             id: "2",
             width: "1010px",
+            height: "calc(100vh - 200px)",
+            minHeight: "440px",
             title: "File Station",
             spacialCls: "file",
             cls: "",
@@ -260,6 +268,8 @@ export default {
           {
             id: "3",
             width: "1010px",
+            height: "calc(100vh - 220px)",
+            minHeight: "420px",
             title: "DSM 说明",
             spacialCls: "question",
             cls: "",

src/component/Desktop/index.vue

@@ -5,8 +5,11 @@
         <Shortcut :defaultZIndex='defaultZIndex'></Shortcut>
         <FixWindow :defaultZIndex='defaultZIndex'></FixWindow>
         <NotifyTrayPanel></NotifyTrayPanel>
-        <NotifyTrayPanelDetail></NotifyTrayPanelDetail>
+        <NotifyTrayPanelDetail :defaultZIndex='defaultZIndex'></NotifyTrayPanelDetail>
         <NotifyShowall></NotifyShowall>
+        <NotifySetting></NotifySetting>
+        <DeleteNotifyMessage></DeleteNotifyMessage>
+        <Mask></Mask>
     </div>
 </template>
 
@@ -17,26 +20,22 @@ import FixWindow from './FixWindow'
 import NotifyTrayPanel from './NotifyTrayPanel'
 import NotifyTrayPanelDetail from './NotifyTrayPanelDetail'
 import NotifyShowall from './NotifyShowall'
+import NotifySetting from './NotifySetting'
+import DeleteNotifyMessage from './DeleteNotifyMessage'
+import Mask from './Mask'
+
 
 export default {
+  props: ["defaultZIndex"],
   data() {
     return {
-      defaultZIndex: 9053,
       display: 'block',
     }
   },
   mounted(){
-    this.$bus.on('changeDefaultZIndex',this.changeDefaultZIndex)
     this.$bus.on('appViewIsOpen',this.appViewIsOpen)
   },
   methods:{
-    // 改变公共zIndex
-    changeDefaultZIndex(zIndex){
-      if(this.defaultZIndex > 999999990){
-        this.defaultZIndex = 999999990
-      }
-      this.defaultZIndex = zIndex
-    },
     //appView是否打开
     appViewIsOpen(bol){
       if(bol){
@@ -45,15 +44,17 @@ export default {
         this.display = 'block'
       }
     }
-
   },
   components:{
-      Menu,
-      Shortcut,
-      FixWindow,
-      NotifyTrayPanel,
-      NotifyTrayPanelDetail,
-      NotifyShowall
+    Menu,
+    Shortcut,
+    FixWindow,
+    NotifyTrayPanel,
+    NotifyTrayPanelDetail,
+    NotifyShowall,
+    NotifySetting,
+    DeleteNotifyMessage,
+    Mask
   },
   name:'Desktop',
 }