桌面逻辑

public/static/css/style/style.css

@@ -2041,6 +2041,105 @@ ul.sds-desktop-shortcut {
     text-align: center;
 }
 
+/* userTrayPanel */
+.taskbar-menu.user-menu.v-menu {
+    padding: 0 0 8px 0;
+}
+
+.taskbar-menu.v-menu {
+    padding: 0;
+    box-sizing: border-box;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
+    border-radius: 3px;
+    user-select: none;
+    border: none;
+}
+
+.taskbar-menu.v-menu::before {
+    background: #fff;
+    content: '';
+    position: absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: -4px;
+    width: 14px;
+    height: 14px;
+    transform: rotate(45deg);
+}
+
+.taskbar-menu.user-menu.v-menu .taskbar-title {
+    margin-bottom: 8px;
+}
+
+.taskbar-menu.v-menu .taskbar-title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 12px;
+    color: #414B55;
+    text-align: center;
+    line-height: 24px;
+    padding: 6px 0 5px 0;
+    border-bottom: 1px solid rgba(198,212,224,0.7);
+    border-radius: 3px 3px 0 0;
+}
+
+.taskbar-menu.v-menu .taskbar-title {
+    font-weight: 700;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item {
+    display: flex;
+    align-items: center;
+    margin: 0px 8px;
+    padding: 0;
+    height: 32px;
+    border-radius: 4px;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item:hover {
+    background-color: rgba(198,212,224,0.4);
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.setting {
+    background-image: url(../../../image/index/userSetting.png);
+    background-size: 24px 24px;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.reboot {
+    background-image: url(../../../image/index/userReboot.png);
+    background-size: 24px 24px;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.poweroff {
+    background-image: url(../../../image/index/userPoweroff.png);
+    background-size: 24px 24px;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.about {
+    background-image: url(../../../image/index/userAbout.png);
+    background-size: 24px 24px;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.logout {
+    background-image: url(../../../image/index/userLogout.png);
+    background-size: 24px 24px;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    background-position: 0 0;
+    flex: 0 0 auto;
+    margin: 0 6px;
+}
+
+.taskbar-menu.user-menu.v-menu .v-menu-item-divider {
+    margin: 8px 0 8px 0;
+}
+
 /* notifyTrayPanelDetail */
 .sds-notify-detail-dialog.v-window .v-window-header-wrapper .app-icon {
     display: none;
@@ -2091,7 +2190,6 @@ ul.sds-desktop-shortcut {
     display: none;
   }
 
-
 /* notifyShowAll */
 .sds-notify-showall-dialog.v-window .v-window-header-wrapper .app-icon {
     display: none;
@@ -2177,176 +2275,131 @@ ul.sds-desktop-shortcut {
     background-image: url(../../../image/index/reset.png);
 }
 
-/* userTrayPanel */
-.taskbar-menu.user-menu.v-menu {
-    padding: 0 0 8px 0;
-}
 
-.taskbar-menu.v-menu {
-    padding: 0;
-    box-sizing: border-box;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
-    border-radius: 3px;
-    user-select: none;
-    border: none;
-}
 
-.taskbar-menu.v-menu::before {
-    background: #fff;
+/* 清除全部notify */
+.sds-window-v5.x-window-dlg.confirm-delete-icon:before {
     content: '';
     position: absolute;
-    margin: 0 auto;
-    left: 0;
-    right: 0;
-    top: -4px;
-    width: 14px;
-    height: 14px;
-    transform: rotate(45deg);
+    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;
 }
 
-.taskbar-menu.user-menu.v-menu .taskbar-title {
-    margin-bottom: 8px;
+.sds-window-v5.confirm-delete-icon .x-window-body{
+    padding: 24px 30px 0px;
+    width: 420px;
+    height: auto;
 }
 
-.taskbar-menu.v-menu .taskbar-title {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    font-size: 12px;
-    color: #414B55;
-    text-align: center;
-    line-height: 24px;
-    padding: 6px 0 5px 0;
-    border-bottom: 1px solid rgba(198,212,224,0.7);
-    border-radius: 3px 3px 0 0;
+/* userSetting */
+.window-header-tool-wrapper .tool.help{
+    background-image: url(../../../image/index/wdheader_bt_help.png);
 }
 
-.taskbar-menu.v-menu .taskbar-title {
-    font-weight: 700;
+.window-header-tool-wrapper .tool.minimize{
+    background-image: url(../../../image/index/wdheader_bt_minimize.png);
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item {
-    display: flex;
-    align-items: center;
-    margin: 0px 8px;
-    padding: 0;
-    height: 32px;
-    border-radius: 4px;
+/* userAbout */
+.sds-user-about-window .v-trap-focus-body {
+    padding: 24px 30px 24px 30px;
+    box-sizing: border-box;
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item:hover {
-    background-color: rgba(198,212,224,0.4);
+.sds-user-about-window .v-trap-focus-body .title {
+    line-height: 32px;
+    font-size: 22px;
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.setting {
-    background-image: url(../../../image/index/userSetting.png);
-    background-size: 24px 24px;
+.sds-user-about-window .v-trap-focus-body .version {
+    line-height: 20px;
+    font-size: 13px;
+    margin-top: 6px;
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.reboot {
-    background-image: url(../../../image/index/userReboot.png);
-    background-size: 24px 24px;
+.sds-user-about-window .v-trap-focus-body .links-info {
+    margin-top: 88px;
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.poweroff {
-    background-image: url(../../../image/index/userPoweroff.png);
-    background-size: 24px 24px;
+.sds-user-about-window .v-trap-focus-body .links-info .link-block {
+    margin-bottom: 6px;
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.about {
-    background-image: url(../../../image/index/userAbout.png);
-    background-size: 24px 24px;
+.sds-user-about-window .v-trap-focus-body .links-info .link {
+    line-height: 20px;
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon.logout {
-    background-image: url(../../../image/index/userLogout.png);
-    background-size: 24px 24px;
+.sds-user-about-window .v-trap-focus-body .footer-info {
+    position: absolute;
+    width: 100%;
+    bottom: 24px;
+    left: 0;
+    display: flex;
+    flex-direction: row;
+    padding: 0 30px;
+    box-sizing: border-box;
 }
 
-.taskbar-menu.user-menu.v-menu .v-menu-item .menu-icon {
+.sds-user-about-window .v-trap-focus-body .footer-info .copyright {
+    color: rgba(65,75,85,0.6);
+    font-size: 12px;
     display: inline-block;
-    width: 24px;
-    height: 24px;
-    background-position: 0 0;
-    flex: 0 0 auto;
-    margin: 0 6px;
-}
-
-.taskbar-menu.user-menu.v-menu .v-menu-item-divider {
-    margin: 8px 0 8px 0;
-}
-
-/* userSetting */
-.window-header-tool-wrapper .tool.help{
-    background-image: url(../../../image/index/wdheader_bt_help.png);
-}
-
-.window-header-tool-wrapper .tool.minimize{
-    background-image: url(../../../image/index/wdheader_bt_minimize.png);
-}
-
-.syno-sds-personal .account-page {
-    height: 100%;
-}
-
-.syno-sds-personal .account-page .v-ps {
-    padding-right: 0;
-}
-
-.fieldset-body[data-v-38230d33] {
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-bottom: 8px;
+    vertical-align: top;
+    line-height: 20px;
+    padding: 2px 0;
+    flex: 1 1 auto;
 }
 
-.account-name[data-v-38230d33] {
-    height: 20px;
+.sds-user-about-window .v-trap-focus-body .footer-info .logo {
     display: inline-block;
-    line-height: 20px;
-    padding: 4px 0;
     vertical-align: top;
+    width: 78px;
+    height: 24px;
+    flex: 0 0 auto;
+    background-image: url(../../../image/index/userAboutLogo.png);
+    background-size: 78px 24px;
 }
 
-.syno-sds-personal .account-page .v-textfield-wrapper {
-    width: 270px;
-}
-
-.v-whitetip-icon{
-    background-image: url(../../../image/index/personalSettingInfo.png);
-}
 
-.v-select-wrapper .v-select-dropdown-icon{
-    background-image: url(../../../image/index/inputArrowDown.png);
+.sds-user-about-window .window-header-tool-wrapper {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    margin-right: 0;
 }
 
-.sds-personal-settings-window .introduceText {
-    font-size: 13px;
-    padding-top: 4px;
-    padding-bottom: 10px;
-    line-height: 20px;
+.window-header-tool-wrapper .tool.close {
+    background-image: url(../../../image/index/windowClose.png);
+    background-size: 24px 72px;
+    background-position: 0 0;
 }
 
-.syno-sds-personal .v-fieldset-title-wrapper {
-    z-index: 0;
+/* 遮罩层 */
+.ext-el-mask-msg{
+    width: calc(100vw); 
+    height: calc(100vh); 
 }
 
 
+/* userAbout遮罩层 */
+.sds-user-about-mask {
+    background-color: #000000;
+    /* z-index: 90000 !important; */
+    opacity: 0.2;
+}
 
-/* 清除弹出窗 */
-.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;
+/* 用户关机遮罩层 */
+.v-window-container-mask{
+    background-color: rgba(0, 0, 0, 0.5);
 }
 
 .x-clear {

src/App.vue

@@ -37,7 +37,7 @@ export default {
   //     console.log(
   //       this.fixWindowData,
   //       this.appViewData,
-  //       this.openUserSettingData,
+  //       this.userSettingData,
   //     );
   //     let appViewIndex =  this.appViewData.findIndex(item=>{
   //       return item.zIndex >= this.defaultZIndex && item.display === 'block'
@@ -47,14 +47,14 @@ export default {
   //       this.appViewData[appViewIndex].cls = 'active-win'
   //     }else if(this.fixWindowData.zIndex >= this.defaultZIndex && this.fixWindowData.display === 'block'){
   //       this.fixWindowData.cls = 'active-win'
-  //       this.openUserSettingData.cls = 'deactive-win'
+  //       this.userSettingData.cls = 'deactive-win'
   //       this.appViewData.forEach(item=>{
   //         if(item.cls === 'active-win'){
   //           item.cls = 'deactive-win'
   //         }
   //       })
-  //     }else if(this.openUserSettingData.zIndex >= this.defaultZIndex && this.openUserSettingData.display === 'block'){
-  //       this.openUserSettingData.cls = 'active-win'
+  //     }else if(this.userSettingData.zIndex >= this.defaultZIndex && this.userSettingData.display === 'block'){
+  //       this.userSettingData.cls = 'active-win'
   //       this.fixWindowData.cls = 'deactive-win'
   //       this.appViewData.forEach(item=>{
   //         if(item.cls === 'active-win'){

src/component/Desktop/FixWindow/index.vue

@@ -75,7 +75,6 @@
             @scroll="scrollList"
             style="overflow: scroll"
           >
-
             <!--  <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
             <div class="v-widget-list">
               <RunningState></RunningState>
@@ -107,12 +106,11 @@
               <div
                 class="ps__thumb-y"
                 tabindex="0"
-                style="top: 0px;"
-                :style="{height:thumbYHeight,display:thumbYDisplay}"
+                style="top: 0px"
+                :style="{ height: thumbYHeight, display: thumbYDisplay }"
                 @mousedown="mousedownProgress"
               ></div>
             </div>
-
           </div>
         </div>
       </div>
@@ -144,12 +142,12 @@ import PortalSelectDialogWindow from "../PortalSelectDialogWindow";
 // 弹出位置选择框
 import PortaSelectPosition from "../PortaSelectPosition";
 export default {
-  props: ["defaultZIndex","fixWindowData"],
+  props: ["defaultZIndex", "fixWindowData"],
   data() {
     return {
-      fixWindowMessage:{
-        zIndex:9050,
-        display:'block',
+      fixWindowMessage: {
+        zIndex: 9050,
+        display: "block",
         cls: "deactve-win",
       },
       selectedNum: 2,
@@ -158,7 +156,7 @@ export default {
       bottom: "10px",
       right: "10px",
       left: 0,
-      widgetZindexIsMax: false,
+      // widgetZindexIsMax: false,
       progrecssFirstClick: {
         lastY: 0,
         clickY: 0,
@@ -181,8 +179,8 @@ export default {
         moveY: 0,
       },
       widgetListIsBottom: false,
-      thumbYHeight: '424px',
-      thumbYDisplay: 'none',
+      thumbYHeight: "424px",
+      thumbYDisplay: "none",
       portalDetail: {
         display: "none",
         detailMessageList: [
@@ -294,40 +292,42 @@ export default {
     this.$bus.on(
       "changeOrHiddenWidgetPosition",
       this.changeOrHiddenWidgetPosition
-    )
-    this.$bus.on('dialogWindowZIndexIsMax',this.dialogWindowZIndexIsMax) 
-    this.fixWindowMessage = this.fixWindowData
+    );
+    // this.$bus.on('dialogWindowZIndexIsMax',this.dialogWindowZIndexIsMax)
+    this.fixWindowMessage = this.fixWindowData;
     let el = document.querySelector(".v-widget-window .ps__thumb-y");
-    let el1 = document.querySelector(".v-widget-window .v-window-header-wrapper");
+    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-window .v-widget-list");
     let el3 = document.querySelector(".v-widget-window .ps__rail-y");
-    if(el2.offsetHeight > el3.offsetHeight){
-        this.bottom = '0'
-        this.thumbYDisplay = 'block'
-        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
+    if (el2.offsetHeight > el3.offsetHeight) {
+      this.bottom = "0";
+      this.thumbYDisplay = "block";
+      this.thumbYHeight = "calc((100vh - 52px) / 2)";
     }
-    window.onresize = (e)=>{
-      if(el2.offsetHeight > el3.offsetHeight){
-        this.bottom = '0'
-        this.thumbYDisplay = 'block'
-        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
-      }else{
-        this.thumbYDisplay = 'none'
+    window.onresize = (e) => {
+      if (el2.offsetHeight > el3.offsetHeight) {
+        this.bottom = "0";
+        this.thumbYDisplay = "block";
+        this.thumbYHeight = "calc((100vh - 52px) / 2)";
+      } else {
+        this.thumbYDisplay = "none";
       }
-    }
+    };
   },
   methods: {
     //点击固定窗口
     clickFixWindow() {
-      if(! this.widgetZindexIsMax  && this.fixWindowMessage.cls === 'deactive-win'){
+      if (this.fixWindowMessage.cls === "deactive-win") {
         this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
         this.$bus.emit("fixWindowZIndexMax", true);
-        this.widgetZindexIsMax = true
+        // this.widgetZindexIsMax = true
       }
-      console.log(this.fixWindowMessage.zIndex)
+      console.log(this.fixWindowMessage.zIndex);
     },
     //点击进度条
     mousedownProgress(e) {
@@ -335,12 +335,12 @@ export default {
       let el1 = document.querySelector(".v-widget-window");
       el.addEventListener("mousemove", this.moveProgress);
 
-      if(el.style.top && el.style.top.includes('px')){
-        let top = parseInt(el.style.top.replace('px',''))
-        this.progrecssFirstClick.thumbStyletop = top
+      if (el.style.top && el.style.top.includes("px")) {
+        let top = parseInt(el.style.top.replace("px", ""));
+        this.progrecssFirstClick.thumbStyletop = top;
       }
-        this.progrecssFirstClick.lastY = el1.offsetTop + 31;
-        this.progrecssFirstClick.clickY = e.offsetY;
+      this.progrecssFirstClick.lastY = el1.offsetTop + 31;
+      this.progrecssFirstClick.clickY = e.offsetY;
     },
     //移动进度条
     moveProgress(e) {
@@ -350,23 +350,22 @@ export default {
       let moveY;
       if (e.clientY >= this.progrecssFirstClick.clientY) {
         moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
-        if(this.progrecssFirstClick.thumbStyletop){
-          moveY = this.progrecssFirstClick.thumbStyletop + 1
-          this.progrecssFirstClick.thumbStyletop = 0
-
+        if (this.progrecssFirstClick.thumbStyletop) {
+          moveY = this.progrecssFirstClick.thumbStyletop + 1;
+          this.progrecssFirstClick.thumbStyletop = 0;
         }
       } else {
         moveY = this.moveY + (e.clientY - this.progrecssFirstClick.clientY);
-        if(this.progrecssFirstClick.thumbStyletop){
-          moveY = this.progrecssFirstClick.thumbStyletop + 1
-          this.progrecssFirstClick.thumbStyletop = 0
+        if (this.progrecssFirstClick.thumbStyletop) {
+          moveY = this.progrecssFirstClick.thumbStyletop + 1;
+          this.progrecssFirstClick.thumbStyletop = 0;
         }
       }
       if (moveY < 0) {
         moveY = 0;
       } else if (moveY > el1.offsetHeight - el.offsetHeight) {
         moveY = el1.offsetHeight - el.offsetHeight;
-        this.widgetListIsBottom = true
+        this.widgetListIsBottom = true;
       }
       let moveY2 =
         -(
@@ -391,9 +390,11 @@ export default {
       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
-        el.style.top = moveY + e.target.scrollTop + 'px'
+      let moveY =
+        ((el1.offsetHeight - el.offsetHeight) /
+          (e.target.scrollHeight - el2.offsetHeight)) *
+        e.target.scrollTop;
+      el.style.top = moveY + e.target.scrollTop + "px";
       // }
     },
     // 点击勾选小窗口的加号
@@ -402,14 +403,16 @@ export default {
     },
     // 点击小窗口选择框的每一项
     showOrHiddenWidgetItem(obj) {
-      let widgetItemArray = document.querySelectorAll(".v-widget-window .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) => {
         if (item.cls && item.cls.includes(" active")) {
-          item.cls = item.cls.replace(" active",'');
+          item.cls = item.cls.replace(" active", "");
         } else if (item.cls && item.cls.includes("active")) {
-          item.cls = item.cls.replace("active",'');
+          item.cls = item.cls.replace("active", "");
         }
       });
       let cls = this.portalDetail.detailMessageList[0].cls;
@@ -419,7 +422,7 @@ export default {
     },
     // 跟随可视小窗口的个数改变进度条高度
     changeThumbHeight(selectedNum) {
-      let el1= document.querySelector(".v-widget-window .v-widget-list");
+      let el1 = document.querySelector(".v-widget-window .v-widget-list");
       let el2 = document.querySelector(".v-widget-window .ps__rail-y");
       if (selectedNum > 2) {
         if (selectedNum >= 6) {
@@ -427,18 +430,20 @@ export default {
         }
         this.thumbYDisplay = "block";
         this.thumbYHeight = (7 - selectedNum) * 70 + "px";
-      }else{
-        this.thumbYDisplay = "none";      
+      } else {
+        this.thumbYDisplay = "none";
       }
-       if(el2.offsetHeight < 424 &&　el1.offsetHeight > el2.offsetHeight){
+      if (el2.offsetHeight < 424 && el1.offsetHeight > el2.offsetHeight) {
         this.thumbYDisplay = "block";
-        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
+        this.thumbYHeight = "calc((100vh - 52px) / 2)";
       }
       this.selectedNum = selectedNum;
     },
     //点击固定窗口头部
     mousedownWidgetHeader(e) {
-      let el = document.querySelector(".v-widget-window .v-window-header-wrapper");
+      let el = document.querySelector(
+        ".v-widget-window .v-window-header-wrapper"
+      );
       this.widgetFirstClick.clientX = e.clientX;
       this.widgetFirstClick.offsetX = e.offsetX;
       this.widgetFirstClick.screenX = document.documentElement.clientWidth;
@@ -449,7 +454,9 @@ export default {
     },
     //移动固定窗口头部
     mousemoveWidgetHeader(e) {
-      let el = document.querySelector(".v-widget-window .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-window .v-widget-list");
       el2.style.display = "none";
@@ -473,14 +480,16 @@ export default {
       }
       el1.style.left = moveX + "px";
       el1.style.top = moveY + "px";
-      if(!el1.className.includes(' active')){
+      if (!el1.className.includes(" active")) {
         el1.className = el1.className + " active";
       }
       el.addEventListener("mouseleave", this.mouseupWidgetHeader);
     },
     //鼠标抬起固定窗口头部
     mouseupWidgetHeader() {
-      let el = document.querySelector(".v-widget-window .v-window-header-wrapper");
+      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);
@@ -489,39 +498,41 @@ export default {
     },
     //显示或隐藏固定窗口
     showOrHiddenWidget(e) {
-      let el = document.querySelector(".v-widget-window .v-widget-header-tool-icon.pin");
+      let el = document.querySelector(
+        ".v-widget-window .v-widget-header-tool-icon.pin"
+      );
       if (this.fixWindowMessage.display === "block") {
-        if(e.srcElement.className.includes(' pressed')){
-          e.srcElement.className = e.srcElement.className.replace(' pressed','')
+        if (e.srcElement.className.includes(" pressed")) {
+          e.srcElement.className = e.srcElement.className.replace(
+            " pressed",
+            ""
+          );
         }
         this.fixWindowMessage.display = "none";
-        if(this.fixWindowMessage.zIndex >= this.defaultZIndex){
-           this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
+        if (this.fixWindowMessage.zIndex >= this.defaultZIndex) {
+          this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
           this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
           this.$bus.emit("fixWindowZIndexMax", false);
         }
-        
       } else {
         this.fixWindowMessage.display = "block";
         this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
         this.$bus.emit("fixWindowZIndexMax", true);
-        if(! e.srcElement.className.includes(' pressed')){
-          e.srcElement.className = e.srcElement.className + ' pressed'
+        if (!e.srcElement.className.includes(" pressed")) {
+          e.srcElement.className = e.srcElement.className + " pressed";
         }
       }
     },
     //最小化固定窗口
     minimizeFixWndow() {
       this.fixWindowMessage.display = "none";
-      if(this.fixWindowMessage.zIndex >= this.defaultZIndex){
-        this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
+      this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
       this.$bus.emit("fixWindowZIndexMax", false);
-      }
-      let el = document.querySelector('.tray-item.widget-button')
-      if(el.className && el.className.includes(' pressed')){
-        el.className = el.className.replace(' pressed','')
+      let el = document.querySelector(".tray-item.widget-button");
+      if (el.className && el.className.includes(" pressed")) {
+        el.className = el.className.replace(" pressed", "");
       }
     },
     // 显示或隐藏位置选择框
@@ -541,7 +552,9 @@ export default {
       this.bottom = detailMessageItem.bottom;
       this.left = detailMessageItem.left;
       this.right = detailMessageItem.right;
-      let el = document.querySelector(".v-widget-window .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")) {
@@ -549,19 +562,23 @@ export default {
       }
       if (obj.index == 0) {
         let el1 = document.querySelector(".v-widget-window");
-        let el2 = document.querySelector(".v-widget-window  .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-window .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);
         this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex -10);
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
       } else {
         el.className = el.className + " active";
         this.fixWindowMessage.zIndex = 999999999;
@@ -570,17 +587,17 @@ export default {
       }
     },
     // 弹出窗的zIndex是最大的
-    dialogWindowZIndexIsMax(bol){
-      // if(bol){
-      //   if(this.fixWindowMessage.zIndex >= this.defaultZIndex){
-      //     this.fixWindowMessage.zIndex = this.defaultZIndex - 10
-          this.widgetZindexIsMax = false
-      //   }
-      // }else{
-      //   this.fixWindowMessage.zIndex = this.defaultZIndex + 10
-      //   this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-      // }
-    },
+    // dialogWindowZIndexIsMax(bol){
+    // if(bol){
+    //   if(this.fixWindowMessage.zIndex >= this.defaultZIndex){
+    //     this.fixWindowMessage.zIndex = this.defaultZIndex - 10
+    // this.widgetZindexIsMax = false
+    //   }
+    // }else{
+    //   this.fixWindowMessage.zIndex = this.defaultZIndex + 10
+    //   this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+    // }
+    // },
     //节流函数
     throttle(fn, time, e) {
       var lastTime = 0;
@@ -593,21 +610,20 @@ export default {
       };
     },
   },
-  watch:{
-    // defaultZIndex(){
-    //   console.log(this.fixWindowMessage.zIndex,this.defaultZIndex,this.fixWindowData.zIndex)
-    //   if(this.fixWindowMessage.zIndex < this.defaultZIndex){
-    //     this.fixWindowMessage.cls = 'deactive-win'
-    //   }else{
-    //     this.fixWindowMessage.cls = 'active-win'
-    //   }
-    // },
-    fixWindowData(){  
-      this.fixWindowMessage = this.fixWindowData
-    }
-  },
-  beforeDestroy() {
+  watch: {
+    defaultZIndex() {
+      //   console.log(this.fixWindowMessage.zIndex,this.defaultZIndex,this.fixWindowData.zIndex)
+      //   if(this.fixWindowMessage.zIndex < this.defaultZIndex){
+      //     this.fixWindowMessage.cls = 'deactive-win'
+      //   }else{
+      //     this.fixWindowMessage.cls = 'active-win'
+      //   }
+    },
+    fixWindowData() {
+      this.fixWindowMessage = this.fixWindowData;
+    },
   },
+  beforeDestroy() {},
   name: "FixWindow",
 };
 </script>
@@ -615,22 +631,22 @@ export default {
 .v-widget-window .v-ps.show::-webkit-scrollbar {
   display: none;
 }
-.v-ps{
+.v-ps {
   height: 424px;
 }
 
 input:-moz-placeholder,
 textarea:-moz-placeholder {
-    color: #fff!important;
+  color: #fff !important;
 }
 
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
-    color: #fff!important;
+  color: #fff !important;
 }
 
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
-    color: #fff!important;
+  color: #fff !important;
 }
 </style>

src/component/Desktop/Menu/index.vue

@@ -28,10 +28,10 @@ export default {
   methods:{
     // 点击大图标打开小图标
     clickShortcutItem(obj){
-      let spacialCls  = obj.spacialCls 
+      let id = obj.id 
       if(this.menuList.length  > 0){
         this.menuList.forEach(menu => {
-          if (menu.spacialCls === spacialCls) {
+          if (menu.id === id) {
               menu.backgroundColor = 'rgba(225,225,225,0.5)'
           } else {
               menu.backgroundColor = 'rgba(50,60,70,0.9)'
@@ -39,14 +39,14 @@ export default {
         })
         if(this.menuList.length){
           this.isHaveMenuItem = this.menuList.some(menu => {
-            return menu.spacialCls === spacialCls
+            return menu.id === id
           })
         }
       }
       if(!this.isHaveMenuItem){
         let menuItem = {
           id:new Date().getTime(),
-          spacialCls:spacialCls,
+          spacialCls:obj.spacialCls,
           imgUrl:obj.imgUrl,
           zIndex:obj.zIndex,
           title:obj.title,
@@ -54,8 +54,9 @@ export default {
           backgroundColor:'rgba(225,225,225,0.5)'
         }
         this.menuList.push(menuItem)
-        this.$bus.emit('menuItemChanged',this.menuList)
       }
+      this.$bus.emit('menuItemChanged',this.menuList)
+
     },
     // 点击小图标切换弹出窗口
     clickMenuItem(id,menuIndex){

src/component/Desktop/DeleteNotifyMessage/index.vue

@@ -10,12 +10,10 @@
       transform: translate(-50%, -50%);
       width: 480px;
     "
-    :style="{display: display}"
+    :style="{ display: display }"
     :class="confirmDeleteDetail ? confirmDeleteDetail.cls : ''"
   >
-    <div
-      class="x-dlg-focus"
-    ></div>
+    <div class="x-dlg-focus"></div>
     <div class="x-window-tl">
       <div class="x-window-tr"><div class="x-window-tc"></div></div>
     </div>
@@ -29,42 +27,24 @@
             >
               <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
+                  <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="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-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 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 class="x-progress-text x-progress-text-back">
+                      <div style="width: 6px; height: 6px">&nbsp;</div>
                     </div>
                   </div>
                 </div>
@@ -79,10 +59,7 @@
       <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-window-footer x-panel-btns" style="width: 428px">
               <div
                 class="x-panel-fbar x-small-editor x-toolbar-layout-ct"
                 style="width: auto"
@@ -94,9 +71,7 @@
                         <table cellspacing="0">
                           <tbody>
                             <tr class="x-toolbar-left-row">
-                              <td
-                                class="x-toolbar-cell x-hide-display"
-                              >
+                              <td class="x-toolbar-cell x-hide-display">
                                 <span
                                   cellspacing="0"
                                   class="
@@ -124,9 +99,7 @@
                                 <table cellspacing="0">
                                   <tbody>
                                     <tr class="x-toolbar-right-row">
-                                      <td
-                                        class="x-toolbar-cell x-hide-display"
-                                      >
+                                      <td class="x-toolbar-cell x-hide-display">
                                         <span
                                           cellspacing="0"
                                           class="
@@ -135,8 +108,7 @@
                                             x-btn-noicon
                                           "
                                           style="width: auto; margin-left: 0px"
-                                          ><em
-                                            class="x-unselectable"
+                                          ><em class="x-unselectable"
                                             ><button
                                               type="button"
                                               class="x-btn-text"
@@ -146,9 +118,7 @@
                                           ></span
                                         >
                                       </td>
-                                      <td
-                                        class="x-toolbar-cell x-hide-display"
-                                      >
+                                      <td class="x-toolbar-cell x-hide-display">
                                         <span
                                           cellspacing="0"
                                           class="
@@ -169,9 +139,7 @@
                                           ></span
                                         >
                                       </td>
-                                      <td
-                                        class="x-toolbar-cell"
-                                      >
+                                      <td class="x-toolbar-cell">
                                         <span
                                           cellspacing="0"
                                           class="
@@ -181,8 +149,7 @@
                                             syno-ux-button-grey
                                           "
                                           style="width: auto; margin-left: 0px"
-                                          ><em
-                                            class="x-unselectable"
+                                          ><em class="x-unselectable"
                                             ><button
                                               type="button"
                                               class="x-btn-text"
@@ -193,9 +160,7 @@
                                           ></span
                                         >
                                       </td>
-                                      <td
-                                        class="x-toolbar-cell x-hide-display"
-                                      >
+                                      <td class="x-toolbar-cell x-hide-display">
                                         <span
                                           cellspacing="0"
                                           class="
@@ -204,8 +169,7 @@
                                             x-btn-noicon
                                           "
                                           style="width: auto; margin-left: 0px"
-                                          ><em
-                                            class="x-unselectable"
+                                          ><em class="x-unselectable"
                                             ><button
                                               type="button"
                                               class="x-btn-text"
@@ -215,9 +179,7 @@
                                           ></span
                                         >
                                       </td>
-                                      <td
-                                        class="x-toolbar-cell"
-                                      >
+                                      <td class="x-toolbar-cell">
                                         <span
                                           cellspacing="0"
                                           class="
@@ -228,8 +190,7 @@
                                             syno-ux-button-blue
                                           "
                                           style="width: auto; margin-left: 0px"
-                                          ><em
-                                            class="x-unselectable"
+                                          ><em class="x-unselectable"
                                             ><button
                                               type="button"
                                               class="x-btn-text"
@@ -272,39 +233,42 @@
 export default {
   data() {
     return {
-      display:'none', 
-      confirmDeleteDetail:''
+      display: "none",
+      confirmDeleteDetail: "",
+      cls: "",
+      zIndex: 0,
     };
   },
-  mounted(){
-    this.$bus.on("openDeleteNotifyMessage",this.openDeleteNotifyMessage)
+  mounted() {
+    this.$bus.on("openMessage", this.openMessage);
   },
-  methods:{
+  methods: {
     // 打开本页面
-    openDeleteNotifyMessage(obj){
-      this.display = 'block'
-      this.confirmDeleteDetail = obj
+    openMessage(obj) {
+      this.display = "block";
+      this.confirmDeleteDetail = obj;
     },
     // 关闭本页面
-    closeDeleteNotifyMessage(){
-      this.display = 'none'
-      this.confirmDeleteDetail = ''
+    closeMessage() {
+      console.log("none");
+      this.display = "none";
+      this.confirmDeleteDetail = "";
     },
     // 点击取消
-    cancleClear(){
-      this.closeDeleteNotifyMessage()
-      this.$bus.emit("closeMask")
+    cancleClear() {
+      this.closeMessage();
+      this.$bus.emit("closeMask");
     },
-    // 清除 
-    confirmClear(){
-      this.closeDeleteNotifyMessage()
-      this.$bus.emit("closeMask")
-      this.$bus.emit("clearAllNotifyMessage")
-      this.$bus.emit("closeNotifyDetail")
+    // 清除
+    confirmClear() {
+      this.closeMessage();
+      this.$bus.emit("closeMask");
+      this.$bus.emit("clearAllNotifyMessage");
+      this.$bus.emit("closeNotifyDetail");
       this.$bus.emit("closeNotifyShowall");
-    }
+    },
   },
   components: {},
-  name: "DeleteNotifyMessage",
+  name: "Message",
 };
 </script>

src/component/Desktop/NotifySetting/index.vue

@@ -14,8 +14,8 @@
         transform: translate(-50%, -50%);
         width: 626px;
       "
-      :style="{ display: display,zIndex:zIndex}"
-      :class="cls"
+      :style="{ display: notifySettingContant.display,zIndex:notifySettingContant.zIndex}"
+      :class="notifySettingContant.cls"
       @click="clickNotifySetting"
     >
       <div class="x-dlg-focus"></div>
@@ -300,7 +300,7 @@
                                           }}<img
                                             alt=""
                                             class="x-grid3-sort-icon"
-                                            src="../../../../public/image/index/s.gif"
+                                            src="../../../../../public/image/index/s.gif"
                                           />
                                         </div>
                                       </td>
@@ -336,7 +336,7 @@
                                           }}<img
                                             alt=""
                                             class="x-grid3-sort-icon"
-                                            src="../../../../public/image/index/s.gif"
+                                            src="../../../../../public/image/index/s.gif"
                                           />
                                         </div>
                                       </td>
@@ -367,7 +367,7 @@
                                           />Badge<img
                                             alt=""
                                             class="x-grid3-sort-icon"
-                                            src="../../../../public/image/index/s.gif"
+                                            src="../../../../../image/index/s.gif"
                                           />
                                         </div>
                                       </td>
@@ -838,15 +838,18 @@
 
 <script>
 export default {
-  props: ["defaultZIndex"],
+  props: ["defaultZIndex","notifySettingData"],
   mounted() {
     this.$bus.on("openNotifySetting", this.openNotifySetting);
+    this.notifySettingContant = this.notifySettingData
   },
   data() {
     return {
-      display: "none",
-      zIndex: 9050,
-      cls: 'active-win',
+      notifySettingContant:{
+        display: "none",
+        zIndex: 9050,
+        cls: 'active-win',
+      },
       notifySettingDetail: {
         tableHeaderContant1: {
           title: "服务",
@@ -991,21 +994,21 @@ export default {
   methods: {
     // 打开本页面
     openNotifySetting() {
-      this.display = "block";
-      if(this.zIndex < this.defaultZIndex){
-        this.zIndex = this.defaultZIndex + 10;
+      this.notifySettingContant.display = "block";
+      if(this.notifySettingContant.zIndex < this.defaultZIndex){
+        this.notifySettingContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
     },
     // 关闭本页面
     closeNotifySetting() {
-      this.display = "none";
+      this.notifySettingContant.display = "none";
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
     // 点击本页面
     clickNotifySetting(){
-      if(this.zIndex < this.defaultZIndex){
-        this.zIndex = this.defaultZIndex + 10;
+      if(this.notifySettingContant.zIndex < this.defaultZIndex){
+        this.notifySettingContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
     },
@@ -1101,12 +1104,15 @@ export default {
     },
   },
   watch:{
-    defaultZIndex(newVal){
-      if(this.zIndex < newVal){
-        this.cls = 'deactive-win'
-      }else{
-        this.cls = 'active-win'
-      }
+    // defaultZIndex(newVal){
+    //   if(this.notifySettingContant.zIndex < newVal){
+    //     this.notifySettingContant.cls = 'deactive-win'
+    //   }else{
+    //     this.notifySettingContant.cls = 'active-win'
+    //   }
+    // }
+    notifySettingData(){
+      this.notifySettingContant = this.notifySettingData
     }
   },
   components: {},

src/component/Desktop/NotifyShowall/index.vue

@@ -7,9 +7,9 @@
       layout-window-app
       v-window
     "
-    :class="cls"
+    :class="notifyShowAllContant.cls"
     style="position: absolute; left: 10px;"
-    :style="{ display: display, width: width, height: height, top: top ,zIndex: zIndex}"
+    :style="{ display: notifyShowAllContant.display, width: width, height: height, top: top ,zIndex: notifyShowAllContant.zIndex}"
     @click="clickNotifyShowall"
   >
     <div class="v-window-header-wrapper draggable">
@@ -335,17 +335,19 @@
 
 <script>
 export default {
-  props: ["defaultZIndex"],
+  props: ["defaultZIndex","notifyShowAllData"],
   data() {
     return {
-      display: "none",
+      notifyShowAllContant:{
+        display: "none",
+        zIndex: 9050,
+        cls:'active-win',
+      },
       loading: false,
       maskDisplay: "none",
       width: "840px",
       height: "480px",
       top: "10px",
-      zIndex: 9050,
-      cls:'active-win',
       thContantArray: [
         {
           id: 0,
@@ -381,11 +383,12 @@ export default {
   mounted() {
     this.$bus.on("openNotifyShowall", this.openNotifyShowall);
     this.$bus.on("closeNotifyShowall", this.closeNotifyShowall);
+    this.notifyShowAllContant = this.notifyShowAllData
   },
   methods: {
     // 打开本页面
     openNotifyShowall(detailMessageList) {
-      this.display = "block";
+      this.notifyShowAllContant.display = "block";
       let detailMessageList1 = JSON.parse(JSON.stringify(detailMessageList));
       detailMessageList1.forEach((item) => {
         item.cls1 = "";
@@ -395,14 +398,14 @@ export default {
     },
     // 关闭本页面
     closeNotifyShowall() {
-      this.display = "none";
-        this.zIndex = this.defaultZIndex - 10;
+      this.notifyShowAllContant.display = "none";
+        this.notifyShowAllContant.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
     // 点击本页面
     clickNotifyShowall(){
-      if(this.zIndex < this.defaultZIndex){
-        this.zIndex = this.defaultZIndex + 10;
+      if(this.notifyShowAllContant.cls ===  "deactive-win"){
+        this.notifyShowAllContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
     },
@@ -480,12 +483,15 @@ export default {
     }
   },
   watch:{
-    defaultZIndex(newVal){
-      if(this.zIndex < newVal){
-        this.cls = 'deactive-win'
-      }else{
-        this.cls = 'active-win'
-      }
+    // defaultZIndex(newVal){
+    //   if(this.notifyShowAllContant.zIndex < newVal){
+    //     this.notifyShowAllContant.cls = 'deactive-win'
+    //   }else{
+    //     this.notifyShowAllContant.cls = 'active-win'
+    //   }
+    // }
+    notifyShowAllData(){
+      this.notifyShowAllContant = this.notifyShowAllData
     }
   },
   components: {},

src/component/Desktop/NotifyTrayPanel/index.vue

@@ -504,14 +504,14 @@ export default {
         this.notifyTrayPanelDetail.detailMessageList
       );
     },
-    // 清除全部
+    // 打开清除全部页面
     clearAll() {
       let obj = {
         cls: "confirm-delete-icon",
         title: "",
         text: "所有桌面通知都会被清除。是否确定要继续？",
       };
-      this.$bus.emit("openDeleteNotifyMessage", obj);
+      this.$bus.emit("openMessage", obj);
       this.$bus.emit("openMask");
     },
     // 清除所有信息

src/component/Desktop/NotifyTrayPanelDetail/index.vue

@@ -1,12 +1,7 @@
 <template>
   <!-- notifyTrayPanelDetail -->
   <div
-    class="
-      v-layout
-      sds-notify-detail-dialog
-      layout-window-app
-      v-window
-    "
+    class="v-layout sds-notify-detail-dialog layout-window-app v-window"
     style="
       position: absolute;
       width: 680px;
@@ -14,8 +9,8 @@
       top: 10px;
       left: 10px;
     "
-    :style="{ display: display, zIndex: zIndex }"
-    :class="cls"
+    :style="{ display: notifyTrayPanelDetailContant.display, zIndex: notifyTrayPanelDetailContant.zIndex }"
+    :class="notifyTrayPanelDetailContant.cls"
     @click="openNotifyDetail"
   >
     <div class="v-window-header-wrapper draggable">
@@ -152,50 +147,56 @@
 
 <script>
 export default {
-  props: ["defaultZIndex"],
+  props: ["defaultZIndex", "notifyTrayPanelDetailData"],
   mounted() {
     this.$bus.on("openNotifyDetail", this.openNotifyDetail);
     this.$bus.on("closeNotifyDetail", this.closeNotifyDetail);
+    this.notifyTrayPanelDetailContant = this.notifyTrayPanelDetailData
   },
   data() {
     return {
-      display: "none",
       notifyTrayPanelDetail: {
         detailMessage: [],
       },
-      zIndex: 9050,
-      cls:'active-win',
+      notifyTrayPanelDetailContant: {
+        zIndex: 9050,
+        cls: "deactive-win",
+        display: "none",
+      },
     };
   },
   components: {},
   methods: {
     // 打开/点击本页面
     openNotifyDetail(detailMessage) {
-      if(this.display === 'none'){
-        this.display = "block";
+      if (this.notifyTrayPanelDetailContant.display === "none") {
+        this.notifyTrayPanelDetailContant.display = "block";
       }
-      if(this.zIndex < this.defaultZIndex){
-        this.zIndex = this.defaultZIndex + 10;
+      if (this.notifyTrayPanelDetailContant.cls === "deactive-win") {
+        this.notifyTrayPanelDetailContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
-      if(detailMessage.title){
+      if (detailMessage.title) {
         this.notifyTrayPanelDetail.detailMessage[0] = detailMessage;
       }
     },
     // 关闭本页面
     closeNotifyDetail() {
-      this.display = "none";
-      this.zIndex = this.defaultZIndex - 10;
+      this.notifyTrayPanelDetailContant.display = "none";
+      this.notifyTrayPanelDetailContant.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
   },
-  watch:{
-    defaultZIndex(newVal){
-      if(this.zIndex < newVal){
-        this.cls = 'deactive-win'
-      }else{
-        this.cls = 'active-win'
-      }
+  watch: {
+    // defaultZIndex(newVal) {
+    //   if (this.notifyTrayPanelDetailContant.zIndex < newVal) {
+    //     this.notifyTrayPanelDetailContant.cls = "deactive-win";
+    //   } else {
+    //     this.notifyTrayPanelDetailContant.cls = "active-win";
+    //   }
+    // },
+    notifyTrayPanelDetailData(){
+      this.notifyTrayPanelDetailContant = this.notifyTrayPanelDetailData
     }
   },
 };

src/component/Container/Desktop/UserAbout/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <!-- userAbout -->
+  <div
+    class="
+      v-layout
+      sds-user-about-window
+      layout-window-modal
+      v-window
+      active-win
+    "
+    syno-id="about-window"
+    style="
+      position: absolute;
+      width: 520px;
+      height: 288px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    "
+    :style="{ visibility: visibility ,zIndex:zIndex}"
+  >
+    <div class="v-window-body">
+      <div class="v-trap-focus-indicator"></div>
+      <div class="v-trap-focus-body">
+        <div role="dialog" class="v-trap-focus-indicator"></div>
+        <div class="title">DiskStation Manager</div>
+        <div class="version">版本 7.1-42661</div>
+        <div class="links-info">
+          <div class="link-block">
+            <a
+              href="https://sy.to/dsm7legal"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link link-font"
+              >法律条款</a
+            >
+          </div>
+          <div class="link-block">
+            <a
+              href="https://www.synology.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="link link-font"
+              >www.synology.com</a
+            >
+          </div>
+        </div>
+        <div class="footer-info">
+          <div class="copyright">
+            版权所有 © 2022 Synology Inc. 保留一切权利。
+          </div>
+          <div class="logo"></div>
+        </div>
+        <div class="window-header-tool-wrapper light">
+          <div class="tool close" @click.stop="closeUserAbout"></div>
+        </div>
+      </div>
+      <div class="v-trap-focus-indicator"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['defaultZIndex'],
+  mounted() {
+    this.$bus.on("openUserAbout", this.openUserAbout);
+    this.zIndex = this.defaultZIndex + 2
+  },
+  data() {
+    return {
+      visibility: "hidden",
+      zIndex:0,
+    };
+  },
+  methods: {
+    //   打开本页面
+    openUserAbout() {
+      this.zIndex = this.defaultZIndex + 2
+      this.visibility = "visible";
+      this.$bus.emit("openMask",'sds-user-about-mask')
+    },
+    //   关闭本页面
+    closeUserAbout() {
+      this.visibility = "hidden";
+      this.$bus.emit("closeMask")
+    },
+  },
+  components: {},
+  name: "UserAbout",
+};
+</script>

src/component/Container/Desktop/UserSetting/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <!-- userSetting -->
+  <div
+    class="v-layout sds-personal-settings-window layout-window-app v-window"
+    style="
+      position: absolute;
+      height: 574px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    "
+    :style="{
+      zIndex: openUserSettingDetail.zIndex,
+      width: openUserSettingDetail.width,
+    }"
+    :class="openUserSettingDetail.cls"
+    @click="clickUserSetting"
+    v-if="openUserSettingDetail.display === 'block'"
+  >
+    <div class="v-window-header-wrapper draggable">
+      <div
+        class="app-icon"
+        :style="{backgroundImage: `url(${openUserSettingDetail.titleImgUrl})`}
+          
+        "
+      ></div>
+      <div class="v-window-header-text">
+        <div class="v-window-header-title">
+          {{ openUserSettingDetail.title }}
+        </div>
+      </div>
+      <div class="window-header-tool-wrapper light">
+        <div class="tool help" @click.stop="openDSMWindow"></div>
+        <div class="tool minimize" @click.stop="minUserSetting"></div>
+        <div
+          class="tool maximize"
+          :style="{ display: openUserSettingDetail.iconMaximize }"
+          @click="maxiMizeUserSetting"
+        ></div>
+        <div
+          class="tool restore"
+          :style="{ display: openUserSettingDetail.iconRestore }"
+          @click="RestoreUserSetting"
+        ></div>
+        <div class="tool close" @click.stop="closeUserSetting"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["defaultZIndex", "userSettingData"],
+  mounted() {
+    this.$bus.on("openUserSetting", this.openUserSetting);
+    this.openUserSettingDetail = this.userSettingData;
+    console.log(this.openUserSettingDetail)
+  },
+  data() {
+    return {
+      openUserSettingDetail: {},
+    };
+  },
+  methods: {
+    // 打开本页面
+    openUserSetting() {
+      if (this.openUserSettingDetail.display) {
+        this.openUserSettingDetail.zIndex = this.defaultZIndex + 10;
+        console.log(this.openUserSettingDetail.zIndex, this.defaultZIndex);
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+        this.openUserSettingDetail.display = "block";
+      }
+    },
+    // 关闭本页面
+    closeUserSetting() {
+      this.openUserSettingDetail.display = "none";
+      this.openUserSettingDetail.zIndex = this.defaultZIndex - 10;
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+      this.$bus.emit(
+        "closeDialogWindow",
+        "../../../public/image/index/personalSetting.png"
+      );
+    },
+    // 点击本页面
+    clickUserSetting() {
+      if (this.openUserSettingDetail.zIndex < this.defaultZIndex) {
+        this.openUserSettingDetail.zIndex = this.defaultZIndex + 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+        this.$bus.emit(
+          "changeDialogWindow",
+          "../../../public/image/index/personalSetting.png"
+        );
+      }
+    },
+    // 打开DSM 说明
+    openDSMWindow() {
+      this.$bus.emit("openDSMWindow");
+    },
+    // 最小化本页面
+    minUserSetting() {
+      this.openUserSettingDetail.display = "none";
+      this.openUserSettingDetail.zIndex = this.defaultZIndex - 10;
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+    },
+    // 最大化本页面
+    maxiMizeUserSetting() {
+      this.openUserSettingDetail.iconRestore = "block";
+      this.openUserSettingDetail.iconMaximize = "none";
+      this.openUserSettingDetail.width = "100%";
+    },
+    // 重置本页面的宽度
+    RestoreUserSetting() {
+      this.openUserSettingDetail.iconRestore = "none";
+      this.openUserSettingDetail.iconMaximize = "block";
+      this.openUserSettingDetail.width =
+        this.openUserSettingDetail.restoreWidth;
+    },
+  },
+  watch: {
+    userSettingData() {
+      this.openUserSettingDetail = userSettingData;
+    },
+  },
+};
+</script>
+<style lang="css" scoped>
+@media screen and (max-height: 600px) {
+  .sds-personal-settings-window {
+    top: 0 !important;
+    transform: translate(-50%, 0px) !important;
+  }
+}
+</style>

src/component/Desktop/UserTrayPanel/index.vue

@@ -23,7 +23,7 @@
         关机
       </div>
       <div class="v-menu-item-divider"></div>
-      <div class="v-menu-item">
+      <div class="v-menu-item" @click="openUserAbout">
         <span class="menu-icon about"></span>
         关于
       </div>
@@ -52,6 +52,7 @@ export default {
     };
   },
   methods:{
+    // 打开本页面
     openUserTrayPanel(e){
       if(this.display === 'none'){
         this.display = "block";
@@ -67,7 +68,6 @@ export default {
         }
       }
     },
-    // closeU
     // 隐藏本页面并更新页面对应的图标颜色
     hiddenUserAndchangeIconColor(e){
       let el = document.querySelector(".tray-item.user-button");
@@ -82,6 +82,10 @@ export default {
     // 打开个人设置页面
     openUserSetting(){
       this.$bus.emit('openUserSetting')
+    },
+    // 打开关于页面
+    openUserAbout(){
+      this.$bus.emit('openUserAbout')
     }
   },
   components: {},

src/component/Container/Desktop/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <!-- 桌面 -->
+  <div id="sds-desktop" :style="{ display: display }">
+    <Menu></Menu>
+    <Shortcut :defaultZIndex="defaultZIndex"></Shortcut>
+    <FixWindow
+      :defaultZIndex="defaultZIndex"
+      :fixWindowData="fixWindowData"
+    ></FixWindow>
+    <NotifyTrayPanel></NotifyTrayPanel>
+    <NotifyTrayPanelDetail
+      :defaultZIndex="defaultZIndex"
+      :notifyTrayPanelDetailData="notifyTrayPanelDetailData"
+    ></NotifyTrayPanelDetail>
+    <NotifyShowall
+      :defaultZIndex="defaultZIndex"
+      :notifyShowAllData="notifyShowAllData"
+    ></NotifyShowall>
+    <NotifySetting
+      :defaultZIndex="defaultZIndex"
+      :notifySettingData="notifySettingData"
+    ></NotifySetting>
+    <UserTrayPanel></UserTrayPanel>
+    <UserSetting
+      :defaultZIndex="defaultZIndex"
+      :userSettingData="userSettingData"
+    ></UserSetting>
+    <UserAbout :defaultZIndex="defaultZIndex"></UserAbout>
+    <Message></Message>
+    <!-- <Mask></Mask> -->
+  </div>
+</template>
+
+<script>
+import Menu from "./Menu";
+import Shortcut from "./Shortcut";
+import FixWindow from "./FixWindow";
+import NotifyTrayPanel from "./NotifyTrayPanel";
+import NotifyTrayPanelDetail from "./NotifyTrayPanelDetail";
+import NotifyShowall from "./NotifyShowall";
+import NotifySetting from "./NotifySetting";
+import UserTrayPanel from "./UserTrayPanel";
+import UserSetting from "./UserSetting";
+import UserAbout from "./UserAbout";
+import Message from "./Message";
+// import Mask from './Mask'
+
+export default {
+  props: [
+    "defaultZIndex",
+    "userSettingData",
+    "fixWindowData",
+    "notifyTrayPanelDetailData",
+    "notifySettingData",
+    "notifyShowAllData",
+  ],
+  data() {
+    return {
+      display: "block",
+    };
+  },
+  mounted() {
+    this.$bus.on("hiddenOrShowOtherWindow", this.hiddenOrShowThisWindow);
+  },
+  methods: {
+    //是否隐藏本页面
+    hiddenOrShowThisWindow(bol) {
+      console.log(bol);
+      if (bol) {
+        this.display = "none";
+      } else {
+        this.display = "block";
+      }
+    },
+  },
+  watch: {
+    userSettingData() {
+      this.userSettingData = this.userSettingData;
+    },
+    fixWindowZIndex() {
+      this.fixWindowZIndex = this.fixWindowZIndex;
+    },
+  },
+  components: {
+    Menu,
+    Shortcut,
+    FixWindow,
+    NotifyTrayPanel,
+    NotifyTrayPanelDetail,
+    NotifyShowall,
+    NotifySetting,
+    UserTrayPanel,
+    UserSetting,
+    UserAbout,
+    Message,
+    // Mask,
+  },
+  name: "Desktop",
+};
+</script>

src/component/DesktopAppView/AppViewItem/index.vue

@@ -236,6 +236,7 @@ export default {
     this.$bus.on("changeDialogMenuWindow", this.changeDialogMenuWindow);
     this.$bus.on("menuItemChanged", this.menuItemChanged);
     this.$bus.on("clickMenuItem", this.clickMenuItem);
+    this.$bus.on('hiddenOrShowOtherWindow',this.hiddenDialogWindow)
     // this.$bus.on("fixWindowZIndexchange", this.fixWindowZIndexchange);
     this.resizablePinnedDetail.detailMessageList = JSON.parse(
       JSON.stringify(this.detailMessageList)
@@ -278,6 +279,7 @@ export default {
     openDialogWindow(detailMessageIndex) {
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
         "block";
+        console.log(detailMessageIndex,this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls)
       if (
         (!detailMessageIndex && detailMessageIndex != 0) ||
         detailMessageIndex == -1 ||
@@ -312,7 +314,7 @@ export default {
       if ((menuIndex || menuIndex == 0) && menuIndex != -1) {
         this.openDialogWindow(menuIndex);
       }
-      this.$bus.emit('dialogWindowZIndexIsMax',true)  
+      // this.$bus.emit('dialogWindowZIndexIsMax',true)  
     },
     // 打开DSM 说明
     openDSMWindow() {
@@ -321,7 +323,7 @@ export default {
           return item.id === 1;
         });
         console.log(this.resizablePinnedDetail.detailMessageList[detailMessageIndex])
-      if (detailMessageIndex && detailMessageIndex != -1) {
+      if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
         this.openDialogWindow(detailMessageIndex);
       }
       let obj = {
@@ -349,20 +351,21 @@ export default {
       })
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
         "none";
-      this.countOpenWindowNum();
-      let detailMessageList =
-        this.resizablePinnedDetail.detailMessageList.filter((item) => {
-          return item.display == "block";
-        });
-      if (detailMessageList.length) {
-        detailMessageList = JSON.parse(
-          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
-        );
+      // let detailMessageList =
+      //   this.resizablePinnedDetail.detailMessageList.filter((item) => {
+      //     return item.display == "block";
+      //   });
+      // if (detailMessageList.length) {
+      //   detailMessageList = JSON.parse(
+      //     JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
+      //   );
         this.resizablePinnedDetail.detailMessageList[
           detailMessageIndex
         ].zIndex = this.defaultZIndex - 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-      }
+
+      // }
+      this.countOpenWindowNum();
     },
     //最大化弹出窗口
     maxiSizeWindow(id) {
@@ -377,7 +380,8 @@ export default {
       this.resizablePinnedDetail.detailMessageList[
         detailMessageIndex
       ].iconMaximize = "none";
-      if (detailMessageIndex && detailMessageIndex != -1) {
+      console.log(detailMessageIndex)
+      if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
         this.openDialogWindow(detailMessageIndex);
       }
     },
@@ -394,10 +398,10 @@ export default {
       this.resizablePinnedDetail.detailMessageList[
         detailMessageIndex
       ].iconMaximize = "block";
-      this.countOpenWindowNum();
-      if (detailMessageIndex && detailMessageIndex != -1) {
-        this.openDialogWindow(detailMessageIndex);
-      }
+      // this.countOpenWindowNum();
+      // if (detailMessageIndex || detailMessageIndex === 0 && detailMessageIndex !== -1) {
+      //   this.openDialogWindow(detailMessageIndex);
+      // }
     },
     //关闭弹出窗口
     closeWindow(id) {
@@ -407,19 +411,19 @@ export default {
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
         "none";
       this.$bus.emit("closeDialogWindow", id);
-      let detailMessageList =
-        this.resizablePinnedDetail.detailMessageList.filter((item) => {
-          return item.display === "block";
-        });
-      if (detailMessageList.length) {
-        detailMessageList = JSON.parse(
-          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
-        );
+      // let detailMessageList =
+      //   this.resizablePinnedDetail.detailMessageList.filter((item) => {
+      //     return item.display === "block";
+      //   });
+      // if (detailMessageList.length) {
+      //   detailMessageList = JSON.parse(
+      //     JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
+      //   );
         this.resizablePinnedDetail.detailMessageList[
           detailMessageIndex
         ].zIndex = this.defaultZIndex - 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-      }
+      // }
       this.countOpenWindowNum();
     },
     //统计打开的弹出窗口
@@ -433,8 +437,9 @@ export default {
       if (! this.openWindowNum) {
         this.resizablePinnedDetail.detailMessageList.forEach((item) => {
           item.zIndex = 9050;
+          item.cls = 'deactive-win'
         });
-        this.$bus.emit("changeDefaultZIndex", 9050);
+        // this.$bus.emit("changeDefaultZIndex", 9050);
       }
     },
     // 按z-index 给menuItem排序
@@ -456,39 +461,40 @@ export default {
   },
 
   watch: {
+    
     defaultZIndex() {
-      this.dialogZIndexMaxIndex =
-        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
-          return item.zIndex >= this.defaultZIndex && item.display === "block";
-        });
-      if (
-        this.dialogZIndexMaxIndex != -1 &&
-        this.dialogZIndexMaxIndex != undefined
-      ) {
-        let obj = {
-          imgUrl:
-            this.resizablePinnedDetail.detailMessageList[
-              this.dialogZIndexMaxIndex
-            ].titleImgUrl,
-          zIndex:
-            this.resizablePinnedDetail.detailMessageList[
-              this.dialogZIndexMaxIndex
-            ].zIndex,
-          spacialCls:
-            this.resizablePinnedDetail.detailMessageList[
-              this.dialogZIndexMaxIndex
-            ].spacialCls,
-          title:
-            this.resizablePinnedDetail.detailMessageList[
-              this.dialogZIndexMaxIndex
-            ].title,
-          id:
-            this.resizablePinnedDetail.detailMessageList[
-              this.dialogZIndexMaxIndex
-            ].id,
-        };
-        this.$bus.emit("changeDialogWindow", obj);
-      }
+      // this.dialogZIndexMaxIndex =
+      //   this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
+      //     return item.zIndex >= this.defaultZIndex && item.display === "block";
+      //   });
+      // if (
+      //   this.dialogZIndexMaxIndex != -1 &&
+      //   this.dialogZIndexMaxIndex != undefined
+      // ) {
+      //   let obj = {
+      //     imgUrl:
+      //       this.resizablePinnedDetail.detailMessageList[
+      //         this.dialogZIndexMaxIndex
+      //       ].titleImgUrl,
+      //     zIndex:
+      //       this.resizablePinnedDetail.detailMessageList[
+      //         this.dialogZIndexMaxIndex
+      //       ].zIndex,
+      //     spacialCls:
+      //       this.resizablePinnedDetail.detailMessageList[
+      //         this.dialogZIndexMaxIndex
+      //       ].spacialCls,
+      //     title:
+      //       this.resizablePinnedDetail.detailMessageList[
+      //         this.dialogZIndexMaxIndex
+      //       ].title,
+      //     id:
+      //       this.resizablePinnedDetail.detailMessageList[
+      //         this.dialogZIndexMaxIndex
+      //       ].id,
+      //   };
+      //   this.$bus.emit("changeDialogWindow", obj);
+      // }
     },
     detailMessageList(){
      this.resizablePinnedDetail.detailMessageList =this.detailMessageList

src/component/Container/DesktopAppView/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <div>
+      <!-- 主菜单界面 -->
+      <div
+        class="syno-sds-appview syno-sds-appview-animate"
+        style="width: 100%; height: 100%"
+        :style="{ display: display }"
+      >
+        <div class="syno-sds-appview-container">
+          <div class="search-field" style="width: 278px">
+            <input
+              type="text"
+              size="16"
+              placeholder="搜索"
+              class="search-field-input"
+              @click.stop="searchInputFocus"
+            />
+            <button
+              type="button"
+              class="search-field-clear-btn"
+              style="display: none"
+            ></button>
+          </div>
+        </div>
+        <div class="sds-shortcut-wrapper">
+          <div class="shortcut-zone" style="width: 13%"></div>
+          <div class="shortcut-zone right-zone" style="width: 13%"></div>
+        </div>
+        <div class="sds-app-panel">
+          <div
+            class="v-ps ps ps--active-y"
+            v-if="desktopAppViewDetail.detailMessageList"
+          >
+            <div class="app-layout-wrapper" style="width: 74%; height: 100%">
+              <div
+                class="sds-desktop-layout search-layout"
+                style="display: none"
+              ></div>
+              <div class="sds-desktop-layout">
+                <li
+                  class="launch-icon app-item-icon"
+                  v-for="detailMessage in desktopAppViewDetail.detailMessageList"
+                  :key="detailMessage.id"
+                  @click.stop="
+                    clickAppViewItem(detailMessage.id)
+                  "
+                >
+                  <div
+                    class="image"
+                    :style="{
+                      backgroundImage: `url(${detailMessage.titleImgUrl})`,
+                    }"
+                  >
+                    <div
+                      class="sds-application-notify-badge-num"
+                      style="opacity: 0"
+                    ></div>
+                  </div>
+                  <div class="text">{{ detailMessage.title }}</div>
+                </li>
+              </div>
+            </div>
+          </div>
+          <div class="sds-desktop-no-result" v-else>找不到符合的项目。</div>
+        </div>
+      </div>
+    </div>
+    <AppViewItem
+      :defaultZIndex="defaultZIndex"
+      :detailMessageList="desktopAppViewDetail.detailMessageList"
+    ></AppViewItem>
+  </div>
+</template>
+
+<script>
+import AppViewItem from "./AppViewItem";
+export default {
+  props: ["defaultZIndex","appViewData"],
+  data() {
+    return {
+      desktopAppViewDetail: {
+        detailMessageList: [],
+      },
+      display: "none",
+    };
+  },
+  mounted() {
+    this.$bus.on("showAppView", this.showAppView);
+    this.desktopAppViewDetail.detailMessageList = this.appViewData
+  },
+  methods: {
+    // 显示appView页面
+    showAppView() {
+      this.display = "block";
+      this.$bus.emit("hiddenOrShowOtherWindow", true);
+      window.addEventListener("click", this.WindowClick, true);
+      // this.$bus.emit("hiddenDialogWindow");
+      // this.$bus.emit("closeUserAbout");
+
+    },
+    // 搜索框聚焦
+    searchInputFocus(e) {
+      if (
+        !e.srcElement.parentElement.className.includes("search-field-focused")
+      ) {
+      }
+    },
+    // 点击页面关闭本页面
+    WindowClick() {
+      console.log('false')
+      this.display = "none";
+      this.$bus.emit("hiddenOrShowOtherWindow", false);
+      window.removeEventListener("click", this.WindowClick, true);
+      this.$bus.emit("showDialogWindow");
+    },
+    // 点击appViewItem
+    clickAppViewItem(id) {
+      console.log(id)
+      this.$bus.emit("clickAppViewItem", id);
+      this.WindowClick()
+    },
+  },
+  watch:{
+    appViewData(){
+     this.desktopAppViewDetail.detailMessageList = this.appViewData
+     console.log(appViewData)
+    }
+  },
+  components: {
+    AppViewItem,
+  },
+  name: "DesktopAppView",
+};
+</script>
+
+<style lang="css" scoped>
+.sds-desktop-layout {
+  display: grid;
+  flex-direction: row;
+  justify-content: space-between;
+  grid-template-columns: repeat(auto-fill, 172px);
+  overflow: -moz-scrollbars-none;
+}
+.app-layout-wrapper::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.app-layout-wrapper {
+  overflow: scroll;
+}
+
+.syno-sds-appview .sds-app-panel .sds-desktop-layout {
+  justify-content: space-around;
+}
+
+.syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon {
+  align-self: flex-start;
+}
+
+.search-field input::-webkit-input-placeholder {
+  color: rgb(102 111 122);
+}
+
+.search-field input:-moz-placeholder {
+  color: rgb(102 111 122);
+}
+
+.search-field input:-ms-input-placeholder {
+  color: rgb(102 111 122);
+}
+</style>

src/component/Header/index.vue

@@ -43,7 +43,7 @@ export default {
     };
   },
   mounted(){
-    this.$bus.on('appViewIsOpen',this.appViewIsOpen)
+    this.$bus.on('hiddenOrShowOtherWindow',this.hiddenOrShowThisWindow)
     this.$bus.on('notifyMessageRead',this.notifyMessageRead)
   },
   methods: {
@@ -53,8 +53,8 @@ export default {
     openAppView(){
       this.$bus.emit("showAppView")
     },
-    //appView是否打开
-    appViewIsOpen(bol){
+    //是否隐藏本页面
+    hiddenOrShowThisWindow(bol){
       if(bol){
         this.display = 'none'
       }else{

src/component/Container/Mask/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- 弹出层 -->
+  <div
+    class="ext-el-mask"
+    style="z-index: 1"
+    :style="{ visibility: visibility, zIndex: zIndex }"
+    :class="cls"
+  ></div>
+</template>
+
+<script>
+export default {
+  props:['defaultZIndex'],
+  data() {
+    return {
+      visibility: "hidden",
+      cls: "",
+      zIndex: 0,
+    };
+  },
+  mounted() {
+    this.$bus.on("openMask", this.openMask);
+    this.$bus.on("closeMask", this.closeMask);
+    this.zIndex = this.defaultZIndex + 1
+  },
+  methods: {
+    // 打开弹出层
+    openMask(cls) {
+      this.visibility = "visible";
+      if (cls) {
+        this.cls = cls;
+      } else {
+        this.cls = "";
+      }
+      this.zIndex = this.defaultZIndex + 1
+    },
+    // 关闭弹出层
+    closeMask() {
+      this.visibility = "hidden";
+    },
+  },
+  components: {},
+  name: "Mask",
+};
+</script>

src/component/Container/index.vue

@@ -1,23 +1,31 @@
 <template>
-    <!-- 容器 -->
-    <div>
-      <Header></Header>
-      <Desktop
-        :defaultZIndex="defaultZIndex"
-        :openUserSettingData="openUserSettingData"
-        :fixWindowData="fixWindowData"
-      ></Desktop>
-      <DesktopAppView
-        :defaultZIndex="defaultZIndex"
-        :appViewData="appViewData"
-      ></DesktopAppView>
-    </div>
+  <!-- 容器 -->
+  <div>
+    <Header></Header>
+    <Desktop
+      :defaultZIndex="defaultZIndex"
+      :userSettingData="userSettingData"
+      :fixWindowData="fixWindowData"
+      :notifyTrayPanelDetailData="notifyTrayPanelDetailData"
+      :notifySettingData="notifySettingData"
+      :notifyShowAllData="notifyShowAllData"
+    ></Desktop>
+    <DesktopAppView
+      :defaultZIndex="defaultZIndex"
+      :appViewData="appViewData"
+    ></DesktopAppView>
+    <!-- <UserAbout :defaultZIndex="defaultZIndex"></UserAbout> -->
+    <Mask :defaultZIndex="defaultZIndex"></Mask>
+  </div>
 </template>
 
 <script>
-import Header from "../Header";
-import Desktop from "../Desktop";
-import DesktopAppView from "../DesktopAppView";
+import Header from "./Header";
+import Desktop from "./Desktop";
+import DesktopAppView from "./DesktopAppView";
+import UserAbout from "./Desktop/UserAbout";
+import Mask from "./Mask";
+
 export default {
   data() {
     return {
@@ -477,21 +485,38 @@ export default {
           iconMaximize: "block",
         },
       ],
-      openUserSettingData: {
+      userSettingData: {
+        spacialCls: "openUserSetting",
         id: 1111,
         display: "none",
         width: "850px",
         zIndex: 9040,
-        cls: "active-win",
+        cls: "deactive-win",
         title: "个人设置",
+        titleImgUrl: "../../../../public/image/index/personalSetting.png",
         iconRestore: "none",
         iconMaximize: "block",
         restoreWidth: "850px",
       },
-      fixWindowData: { 
-        zIndex: 9050, 
-        display: "block" ,
-        cls: "deactve-win"
+      fixWindowData: {
+        zIndex: 9050,
+        display: "block",
+        cls: "deactive-win",
+      },
+      notifyTrayPanelDetailData: {
+        zIndex: 9050,
+        display: "none",
+        cls: "deactive-win",
+      },
+      notifySettingData: {
+        zIndex: 9050,
+        display: "none",
+        cls: "deactive-win",
+      },
+      notifyShowAllData: {
+        zIndex: 9050,
+        display: "none",
+        cls: "deactive-win",
       },
     };
   },
@@ -517,71 +542,252 @@ export default {
   },
   watch: {
     defaultZIndex() {
+      let appViewIndex = this.appViewData.findIndex((item) => {
+        return item.zIndex >= this.defaultZIndex && item.display === "block";
+      });
+      let fixWindowZIndexIsMax =
+        this.fixWindowData.zIndex >= this.defaultZIndex &&
+        this.fixWindowData.display === "block";
+      let openUserSettingZIndexMax =
+        this.userSettingData.zIndex >= this.defaultZIndex &&
+        this.userSettingData.display === "block";
+      let notifyTrayPanelDetailZIndexMax =
+        this.notifyTrayPanelDetailData.zIndex >= this.defaultZIndex &&
+        this.notifyTrayPanelDetailData.display === "block";
+      let notifySettingZIndexMax =
+        this.notifySettingData.zIndex >= this.defaultZIndex &&
+        this.notifySettingData.display === "block";
+      let notifyShowAllZIndexMax =
+        this.notifyShowAllData.zIndex >= this.defaultZIndex &&
+        this.notifyShowAllData.display === "block";
+      console.log(
+        appViewIndex,
+        fixWindowZIndexIsMax,
+        openUserSettingZIndexMax,
+        notifyTrayPanelDetailZIndexMax,
+        notifySettingZIndexMax,
+        notifyShowAllZIndexMax
+      );
       console.log(
-        this.fixWindowData,
-        this.appViewData,
-        this.openUserSettingData,
+        this.defaultZIndex,
+        this.fixWindowData.zIndex,
+        this.userSettingData.zIndex,
+        this.notifyTrayPanelDetailData.zIndex,
+        this.notifySettingData.zIndex,
+        this.notifyShowAllData.zIndex
       );
-      let appViewIndex =  this.appViewData.findIndex(item=>{
-        return item.zIndex >= this.defaultZIndex && item.display === 'block'
-      })
-      let fixWindowZIndexIsMax = this.fixWindowData.zIndex >= this.defaultZIndex && this.fixWindowData.display === 'block'
-      let openUserSettingZIndexMax = this.openUserSettingData.zIndex >= this.defaultZIndex && this.openUserSettingData.display === 'block'
-      if(appViewIndex !== -1){
-        this.appViewData[appViewIndex].cls = 'active-win'
-         this.openUserSettingData.cls = 'deactive-win'
-        this.fixWindowData.cls = 'deactive-win'
-      }else if(fixWindowZIndexIsMax){
-        this.fixWindowData.cls = 'active-win'
-        this.openUserSettingData.cls = 'deactive-win'
-        this.appViewData.forEach(item=>{
-          if(item.cls === 'active-win'){
-            item.cls = 'deactive-win'
+      if ((appViewIndex || appViewIndex === 0) && appViewIndex !== -1) {
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+        this.appViewData[appViewIndex].cls = "active-win";
+        let obj = {
+          imgUrl: this.appViewData[appViewIndex].titleImgUrl,
+          zIndex: this.appViewData[appViewIndex].zIndex,
+          spacialCls: this.appViewData[appViewIndex].spacialCls,
+          title: this.appViewData[appViewIndex].title,
+          id: this.appViewData[appViewIndex].id,
+        };
+        this.$bus.emit("changeDialogWindow", obj);
+        this.userSettingData.cls = "deactive-win";
+        this.notifyTrayPanelDetailData.cls = "deactive-win";
+        this.fixWindowData.cls = "deactive-win";
+        this.notifyShowAllData.cls = "deactive-win";
+        this.notifySettingData.cls = "deactive-win";
+      } else if (fixWindowZIndexIsMax) {
+        this.fixWindowData.cls = "active-win";
+        this.userSettingData.cls = "deactive-win";
+        this.notifyTrayPanelDetailData.cls = "deactive-win";
+        this.notifyShowAllData.cls = "deactive-win";
+        this.notifySettingData.cls = "deactive-win";
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+      } else if (openUserSettingZIndexMax) {
+        this.userSettingData.cls = "active-win";
+        let obj = {
+          spacialCls: this.userSettingData.spacialCls,
+          imgUrl: this.userSettingData.titleImgUrl,
+          zIndex: this.userSettingData.zIndex,
+          title: this.userSettingData.title,
+          id: this.userSettingData.id,
+        };
+        this.$bus.emit("clickShortcutItem", obj);
+        this.notifyTrayPanelDetailData.cls = "deactive-win";
+        this.fixWindowData.cls = "deactive-win";
+        this.notifyShowAllData.cls = "deactive-win";
+        this.notifySettingData.cls = "deactive-win";
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+      } else if (notifyTrayPanelDetailZIndexMax) {
+        this.notifyTrayPanelDetailData.cls = "active-win";
+        this.userSettingData.cls = "deactive-win";
+        this.fixWindowData.cls = "deactive-win";
+        this.notifyShowAllData.cls = "deactive-win";
+        this.notifySettingData.cls = "deactive-win";
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+      } else if (notifySettingZIndexMax) {
+        this.notifySettingData.cls = "active-win";
+        this.notifyTrayPanelDetailData.cls = "deactive-win";
+        this.userSettingData.cls = "deactive-win";
+        this.fixWindowData.cls = "deactive-win";
+        this.notifyShowAllData.cls = "deactive-win";
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
           }
-        })
-      }else if(openUserSettingZIndexMax){
-        this.openUserSettingData.cls = 'active-win'
-        this.fixWindowData.cls = 'deactive-win'
-        this.appViewData.forEach(item=>{
-          if(item.cls === 'active-win'){
-            item.cls = 'deactive-win'
+        });
+      } else if (notifyShowAllZIndexMax) {
+        this.notifyShowAllData.cls = "active-win";
+        this.notifyTrayPanelDetailData.cls = "deactive-win";
+        this.userSettingData.cls = "deactive-win";
+        this.fixWindowData.cls = "deactive-win";
+        this.notifySettingData.cls = "deactive-win";
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
           }
-        })
+        });
       }
-      if(appViewIndex === -1 && ! fixWindowZIndexIsMax && ! openUserSettingZIndexMax){
-          let appViewData = this.appViewData.filter(item=>{
-              return item.display === 'block'
-          })
-          appViewData = this.arraySort(appViewData, 'zIndex')
-          if(this.openUserSettingData.display === 'block'){
-              console.log(appViewData.length)
-              if(appViewData.length && appViewData[appViewData.length - 1].zIndex >= this.openUserSettingData.zIndex){
-              let index = this.appViewData.findIndex(item=>{
-                  return item.id ===  appViewData[appViewData.length - 1].id
-              })
-              this.appViewData[index].cls = 'active-win'
-            }else{
-                this.openUserSettingData.cls = 'active-win'
-            }
-          }else{
-              if(appViewData.length){
-                let index = this.appViewData.findIndex(item=>{
-                    return item.id ===  appViewData[appViewData.length - 1].id
-                })
-                this.appViewData[index].cls = 'active-win'
+      if (
+        appViewIndex === -1 &&
+        !fixWindowZIndexIsMax &&
+        !openUserSettingZIndexMax &&
+        !notifyTrayPanelDetailZIndexMax &&
+        !notifySettingZIndexMax &&
+        !notifyShowAllZIndexMax
+      ) {
+        let appViewData = this.appViewData.filter((item) => {
+          console.log(item.display);
+          return item.display === "block";
+        });
+        if (appViewData.length) {
+          appViewData = this.arraySort(appViewData, "zIndex");
+        }
+        console.log(appViewData.length, appViewData);
+        let fixWindowZIndexIsMax1 =
+          this.fixWindowData.display === "block" &&
+          (this.fixWindowData.zIndex >= this.userSettingData.zIndex ||
+            this.userSettingData.display === "none") &&
+          (this.fixWindowData.zIndex >= this.notifyTrayPanelDetailData.zIndex ||
+            this.notifyTrayPanelDetailData.display === "none") &&
+          (appViewData.length
+            ? this.fixWindowData.zIndex >=
+              appViewData[appViewData.length - 1].zIndex
+            : true);
+        let openUserSettingZIndexMax1 =
+          this.userSettingData.display === "block" &&
+          (this.userSettingData.zIndex >= this.fixWindowData.zIndex ||
+            this.fixWindowData.display === "none") &&
+          (this.userSettingData.zIndex >=
+            this.notifyTrayPanelDetailData.zIndex ||
+            this.notifyTrayPanelDetailData.display === "none") &&
+          (appViewData.length
+            ? this.userSettingData.zIndex >=
+              appViewData[appViewData.length - 1].zIndex
+            : true);
+        let notifyTrayPanelDetailZIndexMax1 =
+          this.notifyTrayPanelDetailData.display === "block" &&
+          (this.notifyTrayPanelDetailData.zIndex >=
+            this.userSettingData.zIndex ||
+            this.userSettingData.display === "none") &&
+          (this.notifyTrayPanelDetailData.zIndex >= this.fixWindowData.zIndex ||
+            this.fixWindowData.display === "none") &&
+          (appViewData.length
+            ? this.notifyTrayPanelDetailData.zIndex >=
+              appViewData[appViewData.length - 1].zIndex
+            : true);
+        let notifySettingZIndexMax1 = 
+        this.notifySettingData.display === "block" &&
+          (this.notifySettingData.zIndex >=
+            this.userSettingData.zIndex ||
+            this.userSettingData.display === "none") &&
+          (this.notifySettingData.zIndex >= this.fixWindowData.zIndex ||
+            this.fixWindowData.display === "none") &&
+          (this.notifySettingData.zIndex >=
+            this.notifyTrayPanelDetailData.zIndex ||
+            this.notifyTrayPanelDetailData.display === "none") &&
+          (appViewData.length
+            ? this.notifySettingData.zIndex >=
+              appViewData[appViewData.length - 1].zIndex
+            : true);    
+        let appViewIsMax =
+          appViewData.length &&
+          (appViewData[appViewData.length - 1].zIndex >
+            this.fixWindowData.zIndex ||
+            this.fixWindowData.display === "none") &&
+          (appViewData[appViewData.length - 1].zIndex >
+            this.userSettingData.zIndex ||
+            this.userSettingData.display === "none") &&
+          (appViewData[appViewData.length - 1].zIndex >
+            this.notifyTrayPanelDetailData.zIndex ||
+            this.notifyTrayPanelDetailData.display === "none");
+        console.log(
+          fixWindowZIndexIsMax1,
+          openUserSettingZIndexMax1,
+          notifyTrayPanelDetailZIndexMax1,
+          appViewIsMax
+        );
+        if (fixWindowZIndexIsMax1) {
+          console.log("1111w");
+          this.fixWindowData.cls = "active-win";
+        } else if (openUserSettingZIndexMax1) {
+          this.userSettingData.cls = "active-win";
+          let obj = {
+            spacialCls: this.userSettingData.spacialCls,
+            imgUrl: this.userSettingData.titleImgUrl,
+            zIndex: this.userSettingData.zIndex,
+            title: this.userSettingData.title,
+            id: this.userSettingData.id,
+          };
+          this.$bus.emit("clickShortcutItem", obj);
+        } else if (notifyTrayPanelDetailZIndexMax1) {
+          this.notifyTrayPanelDetailData.cls = "active-win";
+        }else if(notifySettingZIndexMax1){
+          this.notifyShowAllData.cls = "active-win";
+        } else if (appViewIsMax) {
+          let index = this.appViewData.findIndex((item) => {
+            return item.id === appViewData[appViewData.length - 1].id;
+          });
+          if ((index || index === 0) && index !== -1) {
+            this.appViewData.forEach((item) => {
+              if (item.cls === "active-win") {
+                item.cls = "deactive-win";
               }
+            });
+            this.appViewData[index].cls = "active-win";
+            let obj = {
+              imgUrl: this.appViewData[index].titleImgUrl,
+              zIndex: this.appViewData[index].zIndex,
+              spacialCls: this.appViewData[index].spacialCls,
+              title: this.appViewData[index].title,
+              id: this.appViewData[index].id,
+            };
+            this.$bus.emit("changeDialogWindow", obj);
           }
-          
+        }
       }
-      
     },
   },
   components: {
     Header,
     Desktop,
     DesktopAppView,
+    UserAbout,
+    Mask,
   },
-  name:'Container'
+  name: "Container",
 };
 </script>
 

src/component/Desktop/Mask/index.vue

@@ -1,34 +0,0 @@
-<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(){
-        this.display = 'none'
-    }
-  },
-  components: {},
-  name: "Mask",
-};
-</script>

src/component/Desktop/index.vue

@@ -1,76 +0,0 @@
-<template>
-    <!-- 桌面 -->
-    <div id="sds-desktop" :style="{display:display}">
-        <Menu></Menu>
-        <Shortcut :defaultZIndex='defaultZIndex'></Shortcut>
-        <FixWindow :defaultZIndex='defaultZIndex' :fixWindowData="fixWindowData"></FixWindow>
-        <NotifyTrayPanel></NotifyTrayPanel>
-        <NotifyTrayPanelDetail :defaultZIndex='defaultZIndex'></NotifyTrayPanelDetail>
-        <NotifyShowall :defaultZIndex='defaultZIndex'></NotifyShowall>
-        <NotifySetting :defaultZIndex='defaultZIndex'></NotifySetting>
-        <UserTrayPanel></UserTrayPanel>
-        <UserSetting :defaultZIndex='defaultZIndex' :openUserSettingData="openUserSettingData"></UserSetting>
-        <DeleteNotifyMessage></DeleteNotifyMessage>
-        <Mask></Mask>
-    </div>
-</template>
-
-<script>
-import Menu from './Menu'
-import Shortcut from './Shortcut'
-import FixWindow from './FixWindow'
-import NotifyTrayPanel from './NotifyTrayPanel'
-import NotifyTrayPanelDetail from './NotifyTrayPanelDetail'
-import NotifyShowall from './NotifyShowall'
-import NotifySetting from './NotifySetting'
-import UserSetting from './UserSetting'
-import DeleteNotifyMessage from './DeleteNotifyMessage'
-import Mask from './Mask'
-import UserTrayPanel from './UserTrayPanel'
-
-
-export default {
-  props: ["defaultZIndex","openUserSettingData","fixWindowData"],
-  data() {
-    return {
-      display: 'block',
-    }
-  },
-  mounted(){
-    this.$bus.on('appViewIsOpen',this.appViewIsOpen)
-  },
-  methods:{
-    //appView是否打开
-    appViewIsOpen(bol){
-      if(bol){
-        this.display = 'none'
-      }else{
-        this.display = 'block'
-
-      }
-    }
-  },
-  watch:{
-    openUserSettingData(){
-      this.openUserSettingData = this.openUserSettingData
-    },
-    fixWindowZIndex(){
-      this.fixWindowZIndex = this.fixWindowZIndex
-    }
-  },
-  components:{
-    Menu,
-    Shortcut,
-    FixWindow,
-    NotifyTrayPanel,
-    NotifyTrayPanelDetail,
-    NotifyShowall,
-    NotifySetting,
-    UserTrayPanel,
-    UserSetting,
-    DeleteNotifyMessage,
-    Mask,
-  },
-  name:'Desktop',
-}
-</script>

src/component/DesktopAppView/index.vue

@@ -1,627 +0,0 @@
-<template>
-  <div>
-    <div>
-      <!-- 主菜单界面 -->
-      <div
-        class="syno-sds-appview syno-sds-appview-animate"
-        style="width: 100%; height: 100%"
-        :style="{ display: display }"
-      >
-        <div class="syno-sds-appview-container">
-          <div class="search-field" style="width: 278px">
-            <input
-              type="text"
-              size="16"
-              placeholder="搜索"
-              class="search-field-input"
-              @click.stop="searchInputFocus"
-            />
-            <button
-              type="button"
-              class="search-field-clear-btn"
-              style="display: none"
-            ></button>
-          </div>
-        </div>
-        <div class="sds-shortcut-wrapper">
-          <div class="shortcut-zone" style="width: 13%"></div>
-          <div class="shortcut-zone right-zone" style="width: 13%"></div>
-        </div>
-        <div class="sds-app-panel">
-          <div
-            class="v-ps ps ps--active-y"
-            v-if="desktopAppViewDetail.detailMessageList"
-          >
-            <div class="app-layout-wrapper" style="width: 74%; height: 100%">
-              <div
-                class="sds-desktop-layout search-layout"
-                style="display: none"
-              ></div>
-              <div class="sds-desktop-layout">
-                <li
-                  class="launch-icon app-item-icon"
-                  v-for="detailMessage in desktopAppViewDetail.detailMessageList"
-                  :key="detailMessage.id"
-                  @click.stop="
-                    clickAppViewItem(detailMessage.id)
-                  "
-                >
-                  <div
-                    class="image"
-                    :style="{
-                      backgroundImage: `url(${detailMessage.titleImgUrl})`,
-                    }"
-                  >
-                    <div
-                      class="sds-application-notify-badge-num"
-                      style="opacity: 0"
-                    ></div>
-                  </div>
-                  <div class="text">{{ detailMessage.title }}</div>
-                </li>
-              </div>
-            </div>
-          </div>
-          <div class="sds-desktop-no-result" v-else>找不到符合的项目。</div>
-        </div>
-      </div>
-    </div>
-    <AppViewItem
-      :defaultZIndex="defaultZIndex"
-      :detailMessageList="desktopAppViewDetail.detailMessageList"
-    ></AppViewItem>
-  </div>
-</template>
-
-<script>
-import AppViewItem from "./AppViewItem";
-export default {
-  props: ["defaultZIndex","appViewData"],
-  data() {
-    return {
-      desktopAppViewDetail: {
-        detailMessageList: [
-          // {
-          //   id: 0,
-          //   width: "1150px",
-          //   height: "calc(100vh - 120px)",
-          //   minHeight: "520px",
-          //   title: "控制中心",
-          //   spacialCls: "controlCenter",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/controlCenter.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 1,
-          //   width: "1010px",
-          //   height: "calc(100vh - 220px)",
-          //   minHeight: "420px",
-          //   title: "DSM 说明",
-          //   spacialCls: "question",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/question.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 2,
-          //   width: "1254px",
-          //   height: "calc(100vh - 80px)",
-          //   minHeight: "560px",
-          //   title: "套件中心",
-          //   spacialCls: "tjCenter",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/tjCenter.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 3,
-          //   width: "1230px",
-          //   height: "calc(100vh - 200px)",
-          //   minHeight: "560px",
-          //   title: "资源监控",
-          //   spacialCls: "resourceMonitor",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/resourceMonitor.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 4,
-          //   width: "1220px",
-          //   height: "calc(100vh - 210px)",
-          //   minHeight: "560px",
-          //   title: "存储管理器",
-          //   spacialCls: "storageManager",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/storageManager.png",
-
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 5,
-          //   width: "1210px",
-          //   height: "calc(100vh - 190px)",
-          //   minHeight: "560px",
-          //   title: "logCenter",
-          //   spacialCls: "controlCenter",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/logCenter.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 6,
-          //   width: "1200px",
-          //   height: "calc(100vh - 180px)",
-          //   minHeight: "560px",
-          //   title: "安全顾问",
-          //   spacialCls: "securityScan",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/securityScan.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 7,
-          //   width: "1190px",
-          //   height: "calc(100vh - 170px)",
-          //   minHeight: "560px",
-          //   title: "技术支持中心",
-          //   spacialCls: "supportCenter",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/supportCenter.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 8,
-          //   width: "1170px",
-          //   height: "calc(100vh - 160px)",
-          //   minHeight: "560px",
-          //   title: "Storage Manager",
-          //   spacialCls: "storageManager",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/storageManager.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 9,
-          //   width: "1160px",
-          //   height: "calc(100vh - 150px)",
-          //   minHeight: "560px",
-          //   title: "Synology MailPlus Server",
-          //   spacialCls: "mailPlusServer",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/mailPlusServer.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 10,
-          //   width: "1150px",
-          //   height: "calc(100vh - 140px)",
-          //   minHeight: "560px",
-          //   title: "Synology Chat 管理控制台",
-          //   spacialCls: "chatAdminpng",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/chatAdminpng.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 11,
-          //   width: "1140px",
-          //   height: "calc(100vh - 130px)",
-          //   minHeight: "560px",
-          //   title: "Synology Chat",
-          //   spacialCls: "chat",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/DesktopAppView/chat.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 12,
-          //   width: "1010px",
-          //   height: "calc(100vh - 200px)",
-          //   minHeight: "440px",
-          //   title: "File Station",
-          //   spacialCls: "file",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/file.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 13,
-          //   width: "1120px",
-          //   height: "calc(100vh - 110px)",
-          //   minHeight: "560px",
-          //   title: "Hyper Backup",
-          //   spacialCls: "hyperBackup",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/hyperBackup.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 14,
-          //   width: "1110px",
-          //   height: "calc(100vh - 100px)",
-          //   minHeight: "560px",
-          //   title: "Advanced Media Extensions",
-          //   spacialCls: "aME",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/DesktopAppView/aME.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 15,
-          //   width: "1100px",
-          //   height: "calc(100vh - 90px)",
-          //   minHeight: "560px",
-          //   title: "Synology Calendar",
-          //   spacialCls: "synologyCalendar",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/synologyCalendar.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 16,
-          //   width: "1090px",
-          //   height: "calc(100vh - 80px)",
-          //   minHeight: "560px",
-          //   title: "Synology Contacts",
-          //   spacialCls: "contacts",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/DesktopAppView/contacts.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 17,
-          //   width: "1070px",
-          //   height: "calc(100vh - 70px)",
-          //   minHeight: "560px",
-          //   title: "Universal Search",
-          //   spacialCls: "universalSearch",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/universalSearch.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 18,
-          //   width: "1060px",
-          //   height: "calc(100vh - 60px)",
-          //   minHeight: "560px",
-          //   title: "Synology Photos",
-          //   spacialCls: "photos",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/DesktopAppView/photos.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 19,
-          //   width: "1260px",
-          //   height: "calc(100vh - 210px)",
-          //   minHeight: "560px",
-          //   title: "Audio Station",
-          //   spacialCls: "audioStation",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/audioStation.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 20,
-          //   width: "1050px",
-          //   height: "calc(100vh - 30px)",
-          //   minHeight: "560px",
-          //   title: "Synology Drive 管理控制台",
-          //   spacialCls: "driveAdminConsole",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/driveAdminConsole.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 21,
-          //   width: "1060px",
-          //   height: "calc(100vh - 60px)",
-          //   minHeight: "560px",
-          //   title: "Download Station",
-          //   spacialCls: "downloadStation",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/downloadStation.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 22,
-          //   width: "1240px",
-          //   height: "calc(100vh - 170px)",
-          //   minHeight: "560px",
-          //   title: "Synology Drive",
-          //   spacialCls: "synologyDrive",
-          //   display: "none",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/synologyDrive.png",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 23,
-          //   width: "1130px",
-          //   height: "calc(100vh - 50px)",
-          //   minHeight: "560px",
-          //   title: "Synology MailPlus",
-          //   spacialCls: "mailPlus",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/DesktopAppView/mailPlus.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 24,
-          //   width: "1050px",
-          //   height: "calc(100vh - 90px)",
-          //   minHeight: "560px",
-          //   title: "媒体服务器",
-          //   spacialCls: "mediaServer",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/mediaServer.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 25,
-          //   width: "1120px",
-          //   height: "calc(100vh - 100px)",
-          //   minHeight: "560px",
-          //   title: "Note Station",
-          //   spacialCls: "noteStation",
-          //   display: "none",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/noteStation.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 26,
-          //   width: "1130px",
-          //   height: "calc(100vh - 80px)",
-          //   minHeight: "560px",
-          //   title: "OAuth Service",
-          //   spacialCls: "authenticator",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/authenticator.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 27,
-          //   width: "1070px",
-          //   height: "calc(100vh - 180px)",
-          //   minHeight: "560px",
-          //   title: "PDF 查看器",
-          //   spacialCls: "documentViewer",
-          //   display: "none",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/documentViewer.png",
-          //   zIndex: "9050",
-          // },
-          // {
-          //   id: 28,
-          //   width: "1030px",
-          //   height: "calc(100vh - 200px)",
-          //   minHeight: "560px",
-          //   title: "Synology Drive ShareSync",
-          //   spacialCls: "package",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/DesktopAppView/package.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 29,
-          //   width: "1110px",
-          //   height: "calc(100vh - 110px)",
-          //   minHeight: "560px",
-          //   title: "Video Station",
-          //   spacialCls: "videoStation",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/videoStation.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: 30,
-          //   width: "1120px",
-          //   height: "calc(100vh - 120px)",
-          //   minHeight: "560px",
-          //   title: "文本编辑器",
-          //   spacialCls: "textEditor",
-          //   cls: "deactive-win",
-          //   titleImgUrl:
-          //     "../../../../public/image/DesktopAppView/textEditor.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-        ],
-      },
-      display: "none",
-    };
-  },
-  mounted() {
-    this.$bus.on("showAppView", this.showAppView);
-    console.log(this.appViewData)
-    this.desktopAppViewDetail.detailMessageList = this.appViewData
-    console.log(this.desktopAppViewDetail.detailMessageList)
-  },
-  methods: {
-    // 显示appView页面
-    showAppView() {
-      this.display = "block";
-      this.$bus.emit("appViewIsOpen", true);
-      window.addEventListener("click", this.WindowClick, false);
-      this.$bus.emit("hiddenDialogWindow");
-    },
-    // 搜索框聚焦
-    searchInputFocus(e) {
-      if (
-        !e.srcElement.parentElement.className.includes("search-field-focused")
-      ) {
-      }
-    },
-    // 点击页面关闭本页面
-    WindowClick() {
-      this.display = "none";
-      this.$bus.emit("appViewIsOpen", false);
-      window.removeEventListener("click", this.WindowClick, false);
-      this.$bus.emit("showDialogWindow");
-    },
-    // 点击appViewItem
-    clickAppViewItem(id) {
-      console.log(id)
-      this.$bus.emit("clickAppViewItem", id);
-      this.WindowClick()
-    },
-  },
-  watch:{
-    appViewData(){
-     this.desktopAppViewDetail.detailMessageList = this.appViewData
-     console.log(appViewData)
-    }
-  },
-  components: {
-    AppViewItem,
-  },
-  name: "DesktopAppView",
-};
-</script>
-
-<style lang="css" scoped>
-.sds-desktop-layout {
-  display: grid;
-  flex-direction: row;
-  justify-content: space-between;
-  grid-template-columns: repeat(auto-fill, 172px);
-  overflow: -moz-scrollbars-none;
-}
-.app-layout-wrapper::-webkit-scrollbar {
-  width: 0 !important;
-}
-
-.app-layout-wrapper {
-  overflow: scroll;
-}
-
-.syno-sds-appview .sds-app-panel .sds-desktop-layout {
-  justify-content: space-around;
-}
-
-.syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon {
-  align-self: flex-start;
-}
-
-.search-field input::-webkit-input-placeholder {
-  color: rgb(102 111 122);
-}
-
-.search-field input:-moz-placeholder {
-  color: rgb(102 111 122);
-}
-
-.search-field input:-ms-input-placeholder {
-  color: rgb(102 111 122);
-}
-</style>