逻辑完善

public/static/css/style/style1.css

@@ -1,474 +1,59 @@
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-theme .sds-window-v5 .x-tool-close:hover .button-icon {
-      background-position: 0 -24px;
-    }
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .synofoto-indicator-button:hover .button-icon {
-        background-position: 0 -24px;
-    }
+  .synofoto-theme .sds-window-v5 .x-tool-close:hover .button-icon {
+    background-position: 0 -24px;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-icon-button:hover .button-icon {
+  .synofoto-indicator-button:hover .button-icon {
       background-position: 0 -24px;
-    }
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-icon-button-confirm:hover .button-icon {
-      background-position: 0 -32px;
-    }
+  .synofoto-icon-button:hover .button-icon {
+    background-position: 0 -24px;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-icon-button-confirm:hover {
-      background-color: #e86052;
-    }
+  .synofoto-icon-button-confirm:hover .button-icon {
+    background-position: 0 -32px;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-icon-button-space-selector:hover .button-icon {
-      background-position: 0 -20px;
-    }
+  .synofoto-icon-button-confirm:hover {
+    background-color: #e86052;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-text-icon-button:hover .button-icon {
-      background-position: 0 -24px;
-    }
+  .synofoto-icon-button-space-selector:hover .button-icon {
+    background-position: 0 -20px;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-select-button:hover .button-icon {
-      background-position: 0 -24px;
-    }
+  .synofoto-text-icon-button:hover .button-icon {
+    background-position: 0 -24px;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-icon-button-expand:hover .button-icon {
-      background-position: 0 -24px;
-    }
-}
-
-  @media (hover: hover) and (pointer: fine) {
-    .synofoto-see-more-button:hover .button-icon {
-      background-position: 0 -20px;
-    }
-}
-
-@-webkit-keyframes synofoto-tips-dialog-overlay-open {
-    to {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-    0% {
-      background-color: transparent;
-    }
-}
-
-@keyframes synofoto-tips-dialog-overlay-open {
-    to {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-    0% {
-      background-color: transparent;
-    }
-}
-
-@-webkit-keyframes synofoto-tips-dialog-overlay-close {
-    to {
-      background-color: transparent;
-    }
-    0% {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-}
-
-@keyframes synofoto-tips-dialog-overlay-close {
-    to {
-      background-color: transparent;
-    }
-    0% {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-}
-
-@-webkit-keyframes synofoto-shared-space-keyframes {
-    0% {
-      opacity: 0;
-      top: 58px;
-    }
-    to {
-      opacity: 1;
-      top: 98px;
-    }
-  }
-  @keyframes synofoto-shared-space-keyframes {
-    0% {
-      opacity: 0;
-      top: 58px;
-    }
-    to {
-      opacity: 1;
-      top: 98px;
-    }
-  }
-  @-webkit-keyframes synofoto-change-view-keyframes {
-    0% {
-      opacity: 0;
-      top: 68px;
-    }
-    to {
-      opacity: 1;
-      top: 108px;
-    }
-  }
-  @keyframes synofoto-change-view-keyframes {
-    0% {
-      opacity: 0;
-      top: 68px;
-    }
-    to {
-      opacity: 1;
-      top: 108px;
-    }
-  }
-  @-webkit-keyframes synofoto-switch-space-keyframes {
-    0% {
-      opacity: 0;
-      top: 58px;
-    }
-    to {
-      opacity: 1;
-      top: 98px;
-    }
-  }
-  @keyframes synofoto-switch-space-keyframes {
-    0% {
-      opacity: 0;
-      top: 58px;
-    }
-    to {
-      opacity: 1;
-      top: 98px;
-    }
-  }
-  @-webkit-keyframes synofoto-add-to-album-keyframes {
-    0% {
-      bottom: 94px;
-      opacity: 0;
-    }
-    to {
-      bottom: 134px;
-      opacity: 1;
-    }
-  }
-  @keyframes synofoto-add-to-album-keyframes {
-    0% {
-      bottom: 94px;
-      opacity: 0;
-    }
-    to {
-      bottom: 134px;
-      opacity: 1;
-    }
+  .synofoto-select-button:hover .button-icon {
+    background-position: 0 -24px;
   }
-  @-webkit-keyframes synofoto-search-keyframes {
-    0% {
-      opacity: 0;
-      top: 16px;
-    }
-    to {
-      opacity: 1;
-      top: 56px;
-    }
-  }
-  @keyframes synofoto-search-keyframes {
-    0% {
-      opacity: 0;
-      top: 16px;
-    }
-    to {
-      opacity: 1;
-      top: 56px;
-    }
-  }
-
-@media (hover: hover) and (pointer: fine) {
-    .synofoto-selected-single-condition
-      .synofoto-icon-button-remove-condition:hover
-      .button-icon,
-    .synofoto-selected-single-source-folder
-      .synofoto-icon-button-remove-condition:hover
-      .button-icon {
-      background-position: 0 -20px;
-    }
-}
-
-@-webkit-keyframes synofoto-album-owner-change-dialog-overlay-open {
-    to {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-    0% {
-      background-color: transparent;
-    }
-}
-
-@keyframes synofoto-album-owner-change-dialog-overlay-open {
-    to {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-    0% {
-      background-color: transparent;
-    }
-}
-
-@-webkit-keyframes synofoto-album-owner-change-dialog-overlay-close {
-    to {
-      background-color: transparent;
-    }
-    0% {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-}
-
-@keyframes synofoto-album-owner-change-dialog-overlay-close {
-    to {
-      background-color: transparent;
-    }
-    0% {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-general-tag.synofoto-react-select
-      .synofoto__multi-value
-      .Select-value-icon:hover
-      .button-icon {
-      background-position: 0 -20px;
-    }
+  .synofoto-icon-button-expand:hover .button-icon {
+    background-position: 0 -24px;
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {
-    .synofoto-lightbox-nav-icon-button:hover .button-icon {
-      background-position: 0 -48px;
-    }
-}
-
-@-webkit-keyframes synofoto-lightbox-tap-hint-animation {
-    0% {
-      bottom: 0;
-      opacity: 0;
-    }
-    12.5% {
-      bottom: 36px;
-      opacity: 1;
-    }
-    87.5% {
-      bottom: 36px;
-      opacity: 1;
-    }
-    to {
-      bottom: 0;
-      opacity: 0;
-    }
-}
-
-@keyframes synofoto-lightbox-tap-hint-animation {
-    0% {
-      bottom: 0;
-      opacity: 0;
-    }
-    12.5% {
-      bottom: 36px;
-      opacity: 1;
-    }
-    87.5% {
-      bottom: 36px;
-      opacity: 1;
-    }
-    to {
-      bottom: 0;
-      opacity: 0;
-    }
-}
-
-@-webkit-keyframes synofoto-progress-bar-striped {
-    0% {
-      background-position-x: 19.1px;
-    }
-}
-  
-@keyframes synofoto-progress-bar-striped {
-    0% {
-      background-position-x: 19.1px;
-    }
-}
-
-@media (pointer: fine) {
-    .synofoto-selectable-overlay:hover .synofoto-selectable-checkbox {
-      opacity: 1;
-    }
-    .synofoto-selectable-overlay:hover .synofoto-selectable-color-banner {
-      opacity: 1;
-      visibility: visible;
-    }
-}
-
-@-webkit-keyframes synofoto-selected-bar-open {
-    to {
-      bottom: 60px;
-      opacity: 1;
-    }
-    0% {
-      bottom: 0;
-      opacity: 0;
-    }
-}
-
-@keyframes synofoto-selected-bar-open {
-    to {
-      bottom: 60px;
-      opacity: 1;
-    }
-    0% {
-      bottom: 0;
-      opacity: 0;
-    }
-}
-
-@-webkit-keyframes synofoto-selected-bar-open-mobile {
-    to {
-      bottom: 24px;
-      opacity: 1;
-    }
-    0% {
-      bottom: 0;
-      opacity: 0;
-    }
-}
-
-@keyframes synofoto-selected-bar-open-mobile {
-    to {
-      bottom: 24px;
-      opacity: 1;
-    }
-    0% {
-      bottom: 0;
-      opacity: 0;
-    }
-}
-
-@-webkit-keyframes synofoto-top-toast-drop {
-    to {
-      top: 75px;
-    }
-    0% {
-      top: 50px;
-    }
-}
-
-@keyframes synofoto-top-toast-drop {
-    to {
-      top: 75px;
-    }
-    0% {
-      top: 50px;
-    }
-}
-
-@-webkit-keyframes synofoto-task-queue-open {
-    to {
-      opacity: 1;
-      top: 50px;
-    }
-    0% {
-      opacity: 0;
-      top: 0;
-    }
-}
-
-@keyframes synofoto-task-queue-open {
-    to {
-      opacity: 1;
-      top: 50px;
-    }
-    0% {
-      opacity: 0;
-      top: 0;
-    }
-}
-
-@-webkit-keyframes synofoto-waiting-rotate-left {
-    to {
-      -webkit-transform: rotate(30deg);
-      transform: rotate(30deg);
-    }
-    0% {
-      -webkit-transform: rotate(175deg);
-      transform: rotate(175deg);
-    }
-}
-
-@keyframes synofoto-waiting-rotate-left {
-    to {
-      -webkit-transform: rotate(30deg);
-      transform: rotate(30deg);
-    }
-    0% {
-      -webkit-transform: rotate(175deg);
-      transform: rotate(175deg);
-    }
-}
-
-@-webkit-keyframes synofoto-waiting-rotate-right {
-    0% {
-      -webkit-transform: rotate(-175deg);
-      transform: rotate(-175deg);
-    }
-    to {
-      -webkit-transform: rotate(-30deg);
-      transform: rotate(-30deg);
-    }
-}
-
-@keyframes synofoto-waiting-rotate-right {
-    0% {
-      -webkit-transform: rotate(-175deg);
-      transform: rotate(-175deg);
-    }
-    to {
-      -webkit-transform: rotate(-30deg);
-      transform: rotate(-30deg);
-    }
-}
-
-@-webkit-keyframes synofoto-waiting-rotate-all {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    to {
-      -webkit-transform: rotate(-1turn);
-      transform: rotate(-1turn);
-    }
-}
-
-@keyframes synofoto-waiting-rotate-all {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-    to {
-      -webkit-transform: rotate(-1turn);
-      transform: rotate(-1turn);
-    }
+  .synofoto-see-more-button:hover .button-icon {
+    background-position: 0 -20px;
+  }
 }
-
-@media (hover: hover) and (pointer: fine) {
-    .synofoto-wizard-nav-icon-button:hover .button-icon {
-      background-position: 0 -84px;
-    }
-}

src/App.vue

@@ -20,52 +20,7 @@ export default {
     const ins = getCurrentInstance();
     ins.appContext.config.globalProperties.$bus = mitt();
   },
-  // mounted() {
-  //   this.$bus.on("changeDefaultZIndex", this.changeDefaultZIndex);
-  // },
-  // methods: {
-  //   // 改变公共zIndex
-  //   changeDefaultZIndex(zIndex) {
-  //     if (this.defaultZIndex > 999999990) {
-  //       this.defaultZIndex = 999999990;
-  //     }
-  //     this.defaultZIndex = zIndex;
-  //   },
-  // },
-  // watch: {
-  //   defaultZIndex() {
-  //     console.log(
-  //       this.fixWindowData,
-  //       this.appViewData,
-  //       this.userSettingData,
-  //     );
-  //     let appViewIndex =  this.appViewData.findIndex(item=>{
-  //       return item.zIndex >= this.defaultZIndex && item.display === 'block'
-  //     })
-  //     console.log(appViewIndex)
-  //     if(appViewIndex !== -1){
-  //       this.appViewData[appViewIndex].cls = 'active-win'
-  //     }else if(this.fixWindowData.zIndex >= this.defaultZIndex && this.fixWindowData.display === 'block'){
-  //       this.fixWindowData.cls = 'active-win'
-  //       this.userSettingData.cls = 'deactive-win'
-  //       this.appViewData.forEach(item=>{
-  //         if(item.cls === 'active-win'){
-  //           item.cls = 'deactive-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'){
-  //           item.cls = 'deactive-win'
-  //         }
-  //       })
-  //     }
   components: {
-    // Header,
-    // Desktop,
-    // DesktopAppView,
     Container
   },
 };

src/component/Container/Desktop/FixWindow/Changelog/index.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- 文件更改日志 -->
-    <div class="v-widget-item sds-window-v5 syno-sds-widget-item">
+    <div class="v-widget-item sds-window-v5 syno-sds-widget-item" >
         <div class="v-widget-item-header"><img
                 :src="ChangeLog.titleImgUrl"
                 class="v-widget-item-header-icon">

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

@@ -17,7 +17,7 @@
       right: right ? right : '',
     }"
     :class="fixWindowMessage.cls"
-    @click="clickFixWindow"
+    @click.capture="clickFixWindow"
   >
     <div
       class="v-window-header-wrapper draggable"
@@ -32,7 +32,7 @@
             <span>
               <div
                 class="v-widget-header-tool-icon add"
-                @click.stop="selectWidgetItem"
+                @click.capture="selectWidgetItem"
               ></div>
             </span>
           </button>
@@ -40,11 +40,11 @@
         <div class="v-widget-header-right">
           <div
             class="v-widget-header-tool-icon minimize"
-            @click.stop="minimizeFixWndow"
+            @click.capture="minimizeFixWndow"
           ></div>
           <div
             class="v-widget-header-tool-icon pin"
-            @click.stop="pinFixWndow"
+            @click.capture="pinFixWndow"
           ></div>
           <button
             type="button"
@@ -53,7 +53,7 @@
             <span>
               <div
                 class="v-widget-header-tool-icon dock"
-                @click.stop="selectWidgetPosition"
+                @click.capture="selectWidgetPosition"
               ></div>
             </span>
           </button>
@@ -289,10 +289,7 @@ export default {
     this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
     this.$bus.on("changeThumbHeight", this.changeThumbHeight);
     this.$bus.on("showOrHiddenWidget", this.showOrHiddenWidget);
-    this.$bus.on(
-      "changeOrHiddenWidgetPosition",
-      this.changeOrHiddenWidgetPosition
-    );
+    this.$bus.on("changeWidgetPosition", this.changeWidgetPosition);
     // this.$bus.on('dialogWindowZIndexIsMax',this.dialogWindowZIndexIsMax)
     this.fixWindowMessage = this.fixWindowData;
     let el = document.querySelector(".v-widget-window .ps__thumb-y");
@@ -321,7 +318,6 @@ export default {
   methods: {
     //点击固定窗口
     clickFixWindow() {
-      console.log(this.fixWindowMessage.cls)
       if (this.fixWindowMessage.cls !== "active-win") {
         this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
@@ -407,17 +403,11 @@ export default {
       );
       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(" move")) {
-          item.cls = item.cls.replace(" move", "");
-        } else if (item.cls && item.cls.includes("move")) {
-          item.cls = item.cls.replace("move", "");
+      this.portalDetail.detailMessageList.forEach((item, index) => {
+        if (item.cls && item.cls.includes("active") && index !== 0) {
+          item.cls = item.cls.replace("active", "");
         }
       });
-      let cls = this.portalDetail.detailMessageList[0].cls;
-      if (cls && !cls.includes("move")) {
-        this.portalDetail.detailMessageList[0].cls = cls + " move";
-      }
     },
     // 跟随可视小窗口的个数改变进度条高度
     changeThumbHeight(selectedNum) {
@@ -493,7 +483,7 @@ export default {
       let el2 = document.querySelector(".v-widget-window");
       el.removeEventListener("mousemove", this.mousemoveWidgetHeader);
       el1.style.display = "flex";
-      el2.className = el2.className.replace('move','');
+      el2.className = el2.className.replace("move", "");
     },
     //显示或隐藏固定窗口
     showOrHiddenWidget(e) {
@@ -539,11 +529,15 @@ export default {
       this.$bus.emit("showOrHiddenSelectWidgetPosition", this.portalDetail1);
     },
     //改变固定弹出框的位置
-    changeOrHiddenWidgetPosition(obj) {
+    changeWidgetPosition(obj) {
       this.portalDetail1.detailMessageList = obj.detailMessageList;
-      this.portalDetail1.detailMessageList.forEach((item) => {
-        if (item.cls && item.cls.includes(" active")) {
-          item.cls = item.cls.replace(" active", "");
+      this.portalDetail1.detailMessageList.forEach((item, index) => {
+        if (item.cls && index !== 0) {
+          if (item.cls.includes(" active")) {
+            item.cls = item.cls.replace(" active", "");
+          } else if (item.cls.includes("active")) {
+            item.cls = item.cls.replace("active", "");
+          }
         }
       });
       let detailMessageItem = this.portalDetail1.detailMessageList[obj.index];
@@ -555,17 +549,14 @@ export default {
         ".v-widget-window .v-widget-header-tool-icon.dock"
       );
       el.className = el.className + " active";
-      let cls = this.portalDetail1.detailMessageList[0].cls;
-      if (cls && !cls.includes(" active")) {
-        this.portalDetail1.detailMessageList[0].cls = cls + " active";
-      }
-      if (obj.index == 0) {
-        let el1 = document.querySelector(".v-widget-window");
-        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";
+      if (!this.portalDetail1.detailMessageList[0].cls) {
+        this.portalDetail1.detailMessageList[0].cls =
+          this.portalDetail1.detailMessageList[0].cls + "active";
+      } else if (
+        !this.portalDetail1.detailMessageList[0].cls.includes(" active")
+      ) {
+        this.portalDetail1.detailMessageList[0].cls =
+          this.portalDetail1.detailMessageList[0].cls + " active";
       }
     },
     //点击小钉子
@@ -597,24 +588,6 @@ 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:{
-  //     handler(newVal){
-  //       console.log(this.fixWindowData,newVal)
-  //       this.fixWindowMessage = this.fixWindowData;
-  //     },
-  //     deep:true
-
-  //   }
-  // },
   beforeDestroy() {},
   name: "FixWindow",
 };

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

@@ -452,7 +452,7 @@
                                     >
                                       <tbody>
                                         <tr
-                                          @click.stop="
+                                          @click.capture="
                                             clickTr(tableBodyContantIndex)
                                           "
                                           @mouseenter="

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

@@ -12,7 +12,7 @@
         top: top,
         zIndex: notifyShowAllContant.zIndex,
       }"
-      @click.stop="clickNotifyShowall"
+      @click.capture="clickNotifyShowall"
     >
       <div class="v-window-header-wrapper draggable">
         <div class="app-icon"></div>
@@ -59,7 +59,7 @@
                   <button
                     type="button"
                     class="v-btn v-btn-grey"
-                    @click.stop="showClearAllNotifyMessage"
+                    @click.capture="showClearAllNotifyMessage"
                   >
                     <span> 清除全部 </span>
                   </button>
@@ -322,7 +322,7 @@
             notifyShowAllContant.clearAllNotifyData
               .clearAllNotifyMessageDisplay,
         }"
-        @click.stop="maskClick()"
+        @click.capture="maskClick()"
       >
         <div
           class="v-window v-message-box-window auto-height"
@@ -346,7 +346,7 @@
           :class="
             notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls
           "
-          @click.self="clickClearAllNotifyMessage"
+          @click="clickClearAllNotifyMessage"
         >
           <div>
             <div class="v-trap-focus-indicator"></div>
@@ -498,7 +498,7 @@ export default {
     },
     // 点击本页面
     clickNotifyShowall() {
-      if (this.notifyShowAllContant.cls === "deactive-win") {
+      if (this.notifyShowAllContant.cls === "deactive-win" || this.notifyShowAllContant.zIndex < this.defaultZIndex) {
         this.notifyShowAllContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
@@ -588,15 +588,11 @@ export default {
     },
     // 点击清除全部信息弹出框
     clickClearAllNotifyMessage() {
-      if (
-        this.notifyShowAllContant.clearAllNotifyData
-          .clearAllNotifyMessageCls === "deactive-win"
-      ) {
-        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =
-          this.defaultZIndex + 10;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-        // this.$bus.emit("maskShowOrHidden", true);
-        this.$bus.emit("showOrHiddenNotifyShowallClearAll", true);
+      let el = document.querySelector(
+        ".notify-showall-window .v-message-box-window"
+      );
+      if(el.className && el.className.includes(' no-shadow')){
+        el.className = el.className.replace(" no-shadow", "");
       }
     },
     //没关闭清除全部信息弹出框时点击遮罩层
@@ -610,9 +606,10 @@ export default {
           el.className = el.className.replace(" no-shadow", "");
         }, 500);
       }
+      console.log( this.notifyShowAllContant.clearAllNotifyData
+          .clearAllNotifyMessageZIndex,this.defaultZIndex)
       if (
-        this.notifyShowAllContant.clearAllNotifyData
-          .clearAllNotifyMessageZIndex < this.defaultZIndex
+        this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls < this.defaultZIndex
       ) {
         this.notifyShowAllContant.zIndex = this.defaultZIndex + 10;
         this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageZIndex =

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

@@ -10,7 +10,7 @@
       top: 41px;
     "
     :style="{ display: display }"
-    @click.capture="clickNotifyTrayPanel"
+    @click.stop="clickNotifyTrayPanel"
   >
     <div class="x-panel-header">
       <span class="x-panel-header-text"
@@ -470,13 +470,11 @@ export default {
           item.time1 = timestampToTime(item.date);
         });
         this.display = "block";
-        e.srcElement.className = e.srcElement.className + " pressed";
+        if (!e.srcElement.className.includes(" pressed")) {
+          e.srcElement.className = e.srcElement.className + " pressed";
+        }
         this.$bus.emit("notifyMessageRead");
-        window.addEventListener(
-          "click",
-          this.hiddenNotifyAndchangeIconColor,
-          true
-        );
+        window.addEventListener("click", this.hiddenNotifyAndchangeIconColor);
       } else {
         this.display = "none";
         if (e.srcElement.className.includes(" pressed")) {
@@ -488,30 +486,23 @@ export default {
       }
     },
     // 点击本页面
-    clickNotifyTrayPanel(){
-      this.display = 'block';
-      window.addEventListener(
-        'click',
-        this.hiddenNotifyAndchangeIconColor,
-        true
-      );
-      let el = document.querySelector(".tray-item.notify-button");
-      el.className = el.className + " pressed";
+    clickNotifyTrayPanel() {
     },
     // 隐藏本页面并更新页面对应的图标颜色
     hiddenNotifyAndchangeIconColor(e) {
       let el = document.querySelector(".tray-item.notify-button");
-      if (e.srcElement !== el) {
+      if (e.srcElement === el) {
+        window.addEventListener("click", this.hiddenNotifyAndchangeIconColor);
+      } else {
         this.display = "none";
+        if (el.className && el.className.includes(" pressed")) {
+          el.className = el.className.replace(" pressed", "");
+        }
+        window.removeEventListener(
+          "click",
+          this.hiddenNotifyAndchangeIconColor
+        );
       }
-      if (el.className && el.className.includes(" pressed")) {
-        el.className = el.className.replace(" pressed", "");
-      }
-      window.removeEventListener(
-        "click",
-        this.hiddenNotifyAndchangeIconColor,
-        true
-      );
     },
     //打开详情页面
     openNotifyDetail(detailMessage, detailMessageIndex, e) {
@@ -531,44 +522,44 @@ export default {
     // 打开清除全部页面
     clearAll(e) {
       this.hiddenNotifyAndchangeIconColor(e);
-      if(!this.notifyTrayPanelDetail.detailMessageList.length){
-        return
+      if (!this.notifyTrayPanelDetail.detailMessageList.length) {
+        return;
       }
       let obj = {
         cls: "confirm-delete-icon",
-        icon:'confirm-delete-icon',
+        icon: "confirm-delete-icon",
         title: "",
         text: "所有桌面通知都会被清除。是否确定要继续？",
-        buttonList:[
+        buttonList: [
           {
-            id:0,
-            text:'取消',
-            cls:'v-btn-cancel',
-            event:this.cancelDeleteAll
+            id: 0,
+            text: "取消",
+            cls: "v-btn-cancel",
+            event: this.cancelDeleteAll,
           },
           {
-            id:1,
-            text:'清除全部',
-            cls:'v-btn-danger',
-            event:this.confirmDeleteAll
-          }
-        ]
+            id: 1,
+            text: "清除全部",
+            cls: "v-btn-danger",
+            event: this.confirmDeleteAll,
+          },
+        ],
       };
       this.$bus.emit("openMessage", obj);
       this.$bus.emit("openMask");
     },
     // 取消清除所有信息
-    cancelDeleteAll(){
+    cancelDeleteAll() {
       this.$bus.emit("closeMessage");
-      this.$bus.emit("closeMask")
+      this.$bus.emit("closeMask");
     },
     // 确定清除所有信息
-    confirmDeleteAll(){
-      this.$bus.emit("clearAllNotifyMessage")
-      this.cancelDeleteAll()
+    confirmDeleteAll() {
+      this.$bus.emit("clearAllNotifyMessage");
+      this.cancelDeleteAll();
     },
     // 清除所有信息
-    clearAllNotifyMessage(){
+    clearAllNotifyMessage() {
       this.notifyTrayPanelDetail.detailMessageList = [];
     },
     // 打开设置页面
@@ -576,7 +567,6 @@ export default {
       this.hiddenNotifyAndchangeIconColor(e);
       this.$bus.emit("openNotifySetting");
     },
-    
   },
   name: "NotifyTrayPanel",
 };

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

@@ -11,7 +11,7 @@
     "
     :style="{ display: notifyTrayPanelDetailContant.display, zIndex: notifyTrayPanelDetailContant.zIndex }"
     :class="notifyTrayPanelDetailContant.cls"
-    @click="openNotifyDetail"
+    @click.capture="openNotifyDetail"
   >
     <div class="v-window-header-wrapper draggable">
       <div class="app-icon"></div>
@@ -20,7 +20,7 @@
       </div>
 
       <div class="window-header-tool-wrapper light">
-        <div class="tool close" @click.stop="closeNotifyDetail"></div>
+        <div class="tool close" @click.capture="closeNotifyDetail"></div>
       </div>
     </div>
     <div
@@ -131,7 +131,7 @@
                 <button
                   type="button"
                   class="v-btn v-btn-footbar v-btn-grey"
-                  @click.stop="closeNotifyDetail"
+                  @click.capture="closeNotifyDetail"
                 >
                   <span> 关闭 </span>
                 </button>

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

@@ -115,7 +115,6 @@ export default {
     // 鼠标移入选择框的每一项
     mouseenterMenuItem(detailMessageIndex) {
       let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
-      this.clearOtherPositionClassA();
       if (cls && cls.includes("v-menu-item-select-selected selected")) {
         this.portalDetail.detailMessageList[detailMessageIndex].cls =
           "v-menu-item-select-selected selected active";
@@ -127,13 +126,15 @@ export default {
     mouseleaveMenuItem(detailMessageIndex) {
       let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
       if (cls && cls.includes("active")) {
-        this.portalDetail.detailMessageList[detailMessageIndex].cls =
-          cls.replace("active", "");
+        if(cls.includes(" active")){
+          this.portalDetail.detailMessageList[detailMessageIndex].cls  = cls.replace(" active", "");
+        }else if(cls.includes("active")){
+          this.portalDetail.detailMessageList[detailMessageIndex].cls  = cls.replace("active", "");
+        }
       }
     },
     // 点击选择框的每一项
     clickPosition(detailMessageIndex) {
-      this.clearOtherPositionClassA();
       let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
       if (cls && cls.includes("v-menu-item-select-selected selected")) {
       } else {
@@ -153,14 +154,14 @@ export default {
             }
           });
         }
-        this.portalDetail.detailMessageList[detailMessageIndex].cls =
-          "v-menu-item-select-selected selected active";
-        let obj = {
-          detailMessageList: this.portalDetail.detailMessageList,
-          index: detailMessageIndex,
-        };
-        this.$bus.emit("changeOrHiddenWidgetPosition", obj);
       }
+      this.portalDetail.detailMessageList[detailMessageIndex].cls =
+        "v-menu-item-select-selected selected active";
+      let obj = {
+        detailMessageList: this.portalDetail.detailMessageList,
+        index: detailMessageIndex,
+      };
+      this.$bus.emit("changeWidgetPosition", obj);
       this.portalDetail.display = "none";
       this.countSelectedMenuItem();
     },
@@ -199,14 +200,6 @@ export default {
         this.portalDetail.display = "none";
       }
     },
-    //清空其他的选择项active类名
-    clearOtherPositionClassA() {
-      this.portalDetail.detailMessageList.forEach((item) => {
-        if (item.cls && item.cls.includes("active")) {
-          item.cls = item.cls.replace("active", "");
-        }
-      });
-    },
   },
   mounted() {
     this.$bus.on(

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

@@ -1,189 +1,185 @@
 <template>
-    <div class="vue-portal-target" style="top: 30px; left: 10px;">
-        <div class="v-btn-dropdown">
-            <div tabindex="-1" role="listbox" class="v-menu v-menu-icon-menu" style="height: auto; width: auto; left: 0px; top: 0px; z-index: 15000;"
-                :style="{display:portalDetail.display}">
-                <div tabindex="0" class="v-trap-focus-indicator"></div>
-                <div class="v-trap-focus-body">
-                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select"
-                        v-for="(detailMessage,detailMessageIndex) in portalDetail.detailMessageList" :key="detailMessage.id"
-                        :class="detailMessage.cls"
-                        @mouseenter.stop="mouseenterMenuItem(detailMessageIndex)"
-                        @mouseleave.stop="mouseleaveMenuItem(detailMessageIndex)"
-                        @click.stop="clickMenuItem(detailMessageIndex)">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">{{detailMessage.title}}</span> <!---->
-                    </div>
-                    <!--
-                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">资源监控</span>
-                    </div>
-                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">存储</span>
-                    </div>
-                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">已连接用户</span>
-                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">计划的任务</span>
-                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">文件更改日志</span>
-                    </div><div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">最新日志</span>
-                        </div>
-                    <div role="option" tabindex="0" class="v-menu-item v-menu-item-select">
-                        <i class="v-icon v-icon--select"></i>
-                        <span class="title">备份</span>>
-                    </div>
-                    -->
-                    </div>
-                <div tabindex="0" class="v-trap-focus-indicator"></div>
-            </div>
+  <div class="vue-portal-target" style="top: 30px; left: 10px">
+    <div class="v-btn-dropdown">
+      <div
+        tabindex="-1"
+        role="listbox"
+        class="v-menu v-menu-icon-menu"
+        style="height: auto; width: auto; left: 0px; top: 0px; z-index: 15000"
+        :style="{ display: portalDetail.display }"
+      >
+        <div tabindex="0" class="v-trap-focus-indicator"></div>
+        <div class="v-trap-focus-body">
+          <div
+            role="option"
+            tabindex="0"
+            class="v-menu-item v-menu-item-select"
+            v-for="(
+              detailMessage, detailMessageIndex
+            ) in portalDetail.detailMessageList"
+            :key="detailMessage.id"
+            :class="detailMessage.cls"
+            @mouseenter.stop="mouseenterMenuItem(detailMessageIndex)"
+            @mouseleave.stop="mouseleaveMenuItem(detailMessageIndex)"
+            @click.capture="clickMenuItem(detailMessageIndex)"
+          >
+            <i class="v-icon v-icon--select"></i>
+            <span class="title">{{ detailMessage.title }}</span>
+            
+          </div>
         </div>
+        <div tabindex="0" class="v-trap-focus-indicator"></div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-
-    export default {
-        data() {
-            return {
-                portalDetail:{
-                    display: 'none',
-                    selectedNum: 0,
-                    detailMessageList:[
-                        {
-                            id:0,
-                            title:'系统状况',
-                            cls:'v-menu-item-select-selected selected active',
-                        },
-                        {
-                            id:1,
-                            title:'资源监控',
-                            cls:'v-menu-item-select-selected selected',
-                        },
-                        {
-                            id:2,
-                            title:'存储',
-                            cls:'',
-                        },
-                        {
-                            id:3,
-                            title:'已连接用户',
-                            cls:'',
-                        },
-                        {
-                            id:4,
-                            title:'计划的任务',
-                            cls:'',
-                        },
-                        {
-                            id:5,
-                            title:'文件更改日志',
-                            cls:'',
-                        },
-                        {
-                            id:6,
-                            title:'最新日志',
-                            cls:'',
-                        },{
-                            id:7,
-                            title:'备份',
-                            cls:'',
-                        }
-
-                    ]
-                }
-            }
-        },
-        methods: {
-            // 点击选择框的每一项
-            clickMenuItem(detailMessageIndex){
-                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls
-                if (cls.includes("v-menu-item-select-selected selected")) {
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'active'
-                    let obj = {
-                        index: detailMessageIndex,
-                        cls: 'v-widget-item sds-window-v5 syno-sds-widget-item',
-                        cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls,
-                    }
-                    this.$bus.emit("showOrHiddenWidgetItem",obj)
-                }else{
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = 'v-menu-item-select-selected selected active'
-                    let obj = {
-                        index: detailMessageIndex,
-                        cls:'v-widget-item sds-window-v5 syno-sds-widget-item active',
-                        cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls
-                    }
-                    this.$bus.emit("showOrHiddenWidgetItem",obj)
-                }
-                this.countSelectedMenuItem()
-                this.$bus.emit("changeThumbHeight",this.portalDetail.selectedNum)
-
-            },
-            // 鼠标移入选择框的每一项
-            mouseenterMenuItem(detailMessageIndex){
-                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
-                if (cls.includes("v-menu-item-select-selected selected")) {
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls =
-                    "v-menu-item-select-selected selected active";
-                } else if (cls === "") {
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
-                }
-                if(detailMessageIndex && this.portalDetail.detailMessageList[0].cls.includes('active')){
-                    this.portalDetail.detailMessageList[0].cls = this.portalDetail.detailMessageList[0].cls.replace('active','')
-                }
-            },
-            // 鼠标移出选择框的每一项
-            mouseleaveMenuItem(detailMessageIndex){
-                let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
-                if (cls && cls.includes('active')){
-                    this.portalDetail.detailMessageList[detailMessageIndex].cls = cls.replace('active','')
-                }
-            },
-            // 显示或隐藏选择框
-            showOrHiddenSelectWidgetItem(obj){
-                if(obj.detailMessageList){
-                    this.portalDetail.detailMessageList = JSON.parse(JSON.stringify(obj.detailMessageList))
-                    if(this.portalDetail.display === 'none'){
-                        this.portalDetail.display = 'block'
-                        this.$bus.emit(
-                        "showOrHiddenSelectWidgetPosition",'none'
-                        );
-                        let fn = (e)=>{
-                            let el = document.querySelector('.v-widget-header-tool-icon.add')
-                            if(e.srcElement !== el){
-                                this.portalDetail.display = 'none'
-                            }
-                            window.removeEventListener('click',fn,true)
-                        }
-                        window.addEventListener('click',fn,true)
-
-                    }else if(this.portalDetail.display === 'block'){
-                        this.portalDetail.display = 'none'
-                    }
-                }
-            },
-            //统计已选择的个数
-            countSelectedMenuItem(){
-                this.portalDetail.selectedNum = 0
-                this.portalDetail.detailMessageList.forEach(item=>{
-                    if(item.cls && item.cls.includes('v-menu-item-select-selected selected')){
-                        this.portalDetail.selectedNum ++
-                    }
-                })
-            }
-        },
-        mounted(){
-            this.$bus.on('showOrHiddenSelectWidgetItem',this.showOrHiddenSelectWidgetItem)
-        },
-        components:{
+export default {
+  data() {
+    return {
+      portalDetail: {
+        display: "none",
+        selectedNum: 0,
+        detailMessageList: [
+          {
+            id: 0,
+            title: "系统状况",
+            cls: "v-menu-item-select-selected selected active",
+          },
+          {
+            id: 1,
+            title: "资源监控",
+            cls: "v-menu-item-select-selected selected",
+          },
+          {
+            id: 2,
+            title: "存储",
+            cls: "",
+          },
+          {
+            id: 3,
+            title: "已连接用户",
+            cls: "",
+          },
+          {
+            id: 4,
+            title: "计划的任务",
+            cls: "",
+          },
+          {
+            id: 5,
+            title: "文件更改日志",
+            cls: "",
+          },
+          {
+            id: 6,
+            title: "最新日志",
+            cls: "",
+          },
+          {
+            id: 7,
+            title: "备份",
+            cls: "",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    // 点击选择框的每一项
+    clickMenuItem(detailMessageIndex) {
+      window.addEventListener("click", this.hiddenSelectWidgetItem,true);
+      this.display = "block";
+      let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
+      if (cls.includes("v-menu-item-select-selected selected")) {
+        this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
+        let obj = {
+          index: detailMessageIndex,
+          cls: "v-widget-item sds-window-v5 syno-sds-widget-item",
+          cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls,
+        };
+        this.$bus.emit("showOrHiddenWidgetItem", obj);
+      } else {
+        this.portalDetail.detailMessageList[detailMessageIndex].cls =
+          "v-menu-item-select-selected selected active";
+        let obj = {
+          index: detailMessageIndex,
+          cls: "v-widget-item sds-window-v5 syno-sds-widget-item active",
+          cls1: this.portalDetail.detailMessageList[detailMessageIndex].cls,
+        };
+        this.$bus.emit("showOrHiddenWidgetItem", obj);
+      }
+      this.countSelectedMenuItem();
+      this.$bus.emit("changeThumbHeight", this.portalDetail.selectedNum);
+    },
+    // 鼠标移入选择框的每一项
+    mouseenterMenuItem(detailMessageIndex) {
+      let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
+      if (cls.includes("v-menu-item-select-selected selected")) {
+        this.portalDetail.detailMessageList[detailMessageIndex].cls =
+          "v-menu-item-select-selected selected active";
+      } else if (cls === "") {
+        this.portalDetail.detailMessageList[detailMessageIndex].cls = "active";
+      }
+      if (
+        detailMessageIndex &&
+        this.portalDetail.detailMessageList[0].cls.includes("active")
+      ) {
+        this.portalDetail.detailMessageList[0].cls =
+          this.portalDetail.detailMessageList[0].cls.replace("active", "");
+      }
+    },
+    // 鼠标移出选择框的每一项
+    mouseleaveMenuItem(detailMessageIndex) {
+      let cls = this.portalDetail.detailMessageList[detailMessageIndex].cls;
+      if (cls && cls.includes("active")) {
+        this.portalDetail.detailMessageList[detailMessageIndex].cls =
+          cls.replace("active", "");
+      }
+    },
+    // 显示或隐藏选择框
+    showOrHiddenSelectWidgetItem(obj) {
+      if (obj.detailMessageList) {
+        this.portalDetail.detailMessageList = JSON.parse(
+          JSON.stringify(obj.detailMessageList)
+        );
+        if (this.portalDetail.display === "none") {
+          this.portalDetail.display = "block";
+          this.$bus.emit("showOrHiddenSelectWidgetPosition", "none");
+          window.addEventListener("click", this.hiddenSelectWidgetItem,true);
+        } else if (this.portalDetail.display === "block") {
+          this.portalDetail.display = "none";
         }
-
-    }
+      }
+    },
+    // 隐藏选择框
+    hiddenSelectWidgetItem(e){
+        let el = document.querySelector(".v-widget-header-tool-icon.add");
+        if (e.srcElement !== el) {
+            this.portalDetail.display = "none";
+        }
+        window.removeEventListener("click", this.hiddenSelectWidgetItem,true);
+    },
+    //统计已选择的个数
+    countSelectedMenuItem() {
+      this.portalDetail.selectedNum = 0;
+      this.portalDetail.detailMessageList.forEach((item) => {
+        if (
+          item.cls &&
+          item.cls.includes("v-menu-item-select-selected selected")
+        ) {
+          this.portalDetail.selectedNum++;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.$bus.on(
+      "showOrHiddenSelectWidgetItem",
+      this.showOrHiddenSelectWidgetItem
+    );
+  },
+  components: {},
+};
 </script>

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

@@ -1,162 +1,156 @@
 <template>
   <!-- 搜索框 -->
-  <div>
-    <div
-      class="
-        x-window
-        syno-finder
-        spotlight-main-window
-        sds-window-v5
-        active-win
-        spotlight-init
-      "
-      style="
-        position: relative;
-        left: 50%;
-        transform: translateX(-50%);
-        top: 39px;
-        width: 638px;
-      "
-      :style="{
-        display: searchInputContant.display,
-        zIndex: searchInputContant.zIndex,
-      }"
-      :class="searchCls"
-      @click.stop="clickSearchInput"
-    >
-      <div class="x-dlg-focus"></div>
-      <div class="x-window-tl">
-        <div class="x-window-tr">
-          <div class="x-window-tc">
-            <div class="x-window-header x-panel-icon x-window-draggable">
-              <div class="x-window-toolCt">
-                <div class="x-tool x-tool-close">&nbsp;</div>
-                <div class="x-tool x-tool-restore" style="display: none">
-                  &nbsp;
-                </div>
-                <div class="x-tool x-tool-maximize">&nbsp;</div>
-                <div class="x-tool x-tool-minimize">&nbsp;</div>
-                <div class="x-tool x-tool-help">&nbsp;</div>
+  <div
+    class="
+      x-window
+      syno-finder
+      spotlight-main-window
+      sds-window-v5
+      spotlight-init
+    "
+    style="
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 39px;
+      width: 638px;
+    "
+    :style="{
+      display: searchInputContant.display,
+      zIndex: searchInputContant.zIndex,
+    }"
+    :class="searchInputContant.cls"
+    @click.stop="clickSearchInput"
+  >
+    <div class="x-dlg-focus"></div>
+    <div class="x-window-tl">
+      <div class="x-window-tr">
+        <div class="x-window-tc">
+          <div class="x-window-header x-panel-icon x-window-draggable">
+            <div class="x-window-toolCt">
+              <div class="x-tool x-tool-close">&nbsp;</div>
+              <div class="x-tool x-tool-restore" style="display: none">
+                &nbsp;
               </div>
-              <span class="x-window-header-text">Spotlight</span>
+              <div class="x-tool x-tool-maximize">&nbsp;</div>
+              <div class="x-tool x-tool-minimize">&nbsp;</div>
+              <div class="x-tool x-tool-help">&nbsp;</div>
             </div>
+            <span class="x-window-header-text">Spotlight</span>
           </div>
         </div>
       </div>
-      <div class="x-window-bwrap" :class="searchCls">
-        <div class="x-window-ml">
-          <div class="x-window-mr">
-            <div class="x-window-mc">
-              <div class="x-window-body" style="width: 638px; height: 48px">
-                <div
-                  class="x-panel syno-ux-panel x-panel-noborder"
-                  style="width: 638px"
-                >
-                  <div class="x-panel-bwrap">
-                    <div
-                      class="
-                        x-panel-body
-                        x-panel-body-noheader
-                        x-panel-body-noborder
-                        x-box-layout-ct
-                      "
-                      style="width: 638px; height: 48px"
-                    >
+    </div>
+    <div class="x-window-bwrap" :class="searchCls">
+      <div class="x-window-ml">
+        <div class="x-window-mr">
+          <div class="x-window-mc">
+            <div class="x-window-body" style="width: 638px; height: 48px">
+              <div
+                class="x-panel syno-ux-panel x-panel-noborder"
+                style="width: 638px"
+              >
+                <div class="x-panel-bwrap">
+                  <div
+                    class="
+                      x-panel-body
+                      x-panel-body-noheader
+                      x-panel-body-noborder
+                      x-box-layout-ct
+                    "
+                    style="width: 638px; height: 48px"
+                  >
+                    <div class="x-box-inner" style="width: 638px; height: 48px">
                       <div
-                        class="x-box-inner"
-                        style="width: 638px; height: 48px"
+                        class="
+                          x-panel
+                          search-bar
+                          syno-ux-panel
+                          x-panel-noborder x-box-item
+                          search-now-placeholder
+                        "
+                        style="
+                          position: absolute;
+                          z-index: 11000;
+                          visibility: visible;
+                          left: 0px;
+                          top: 0px;
+                          width: 638px;
+                        "
                       >
-                        <div
-                          class="
-                            x-panel
-                            search-bar
-                            syno-ux-panel
-                            x-panel-noborder x-box-item
-                            search-now-placeholder
-                          "
-                          style="
-                            position: absolute;
-                            z-index: 11000;
-                            visibility: visible;
-                            left: 0px;
-                            top: 0px;
-                            width: 638px;
-                          "
-                        >
-                          <div class="x-panel-bwrap">
+                        <div class="x-panel-bwrap">
+                          <div
+                            class="
+                              x-panel-body
+                              x-panel-body-noheader
+                              x-panel-body-noborder
+                              x-box-layout-ct
+                            "
+                            style="height: 46px; width: 638px"
+                          >
                             <div
-                              class="
-                                x-panel-body
-                                x-panel-body-noheader
-                                x-panel-body-noborder
-                                x-box-layout-ct
-                              "
-                              style="height: 46px; width: 638px"
+                              class="x-box-inner"
+                              style="width: 638px; height: 46px"
                             >
                               <div
-                                class="x-box-inner"
-                                style="width: 638px; height: 46px"
+                                class="magnifier x-box-item"
+                                :class="searchIconCls"
+                                @click.capture="showOrHiddenSelect"
+                                style="
+                                  width: 70px;
+                                  height: 22px;
+                                  left: 0px;
+                                  top: 0px;
+                                "
+                              ></div>
+                              <input
+                                type="text"
+                                size="20"
+                                autocomplete="off"
+                                class="
+                                  x-form-text x-form-field
+                                  text-field
+                                  syno-ux-textfield
+                                  x-box-item
+                                "
+                                style="
+                                  margin-left: 0px;
+                                  height: 46px;
+                                  width: 512px;
+                                  left: 70px;
+                                  top: 0px;
+                                "
+                                v-model="keyword"
+                                @input="searchKeyword"
+                                @focus="searchInputFocus"
+                              />
+                              <div
+                                class="loading-icon x-box-item"
+                                style="
+                                  width: 24px;
+                                  height: 46px;
+                                  left: 598px;
+                                  top: 0px;
+                                "
+                              ></div>
+                              <div class="x-form-hidden-error-msg"></div>
+                              <div
+                                class="dummy-searchfield"
+                                style="
+                                  width: 512px;
+                                  height: 46px;
+                                  left: 70px;
+                                  top: 0px;
+                                "
+                                :style="{ display: searchFieldDisplay }"
                               >
                                 <div
-                                  class="magnifier x-box-item"
-                                  :class="searchIconCls"
-                                  @click.stop="showOrHiddenSelect"
-                                  style="
-                                    width: 70px;
-                                    height: 22px;
-                                    left: 0px;
-                                    top: 0px;
-                                  "
-                                ></div>
-                                <input
-                                  type="text"
-                                  size="20"
-                                  autocomplete="off"
-                                  class="
-                                    x-form-text x-form-field
-                                    text-field
-                                    syno-ux-textfield
-                                    x-box-item
-                                  "
-                                  style="
-                                    margin-left: 0px;
-                                    height: 46px;
-                                    width: 512px;
-                                    left: 70px;
-                                    top: 0px;
-                                  "
-                                  v-model="keyword"
-                                  @input="searchKeyword"
-                                  @focus="searchInputFocus"
-                                />
-                                <div
-                                  class="loading-icon x-box-item"
-                                  style="
-                                    width: 24px;
-                                    height: 46px;
-                                    left: 598px;
-                                    top: 0px;
-                                  "
-                                ></div>
-                                <div class="x-form-hidden-error-msg"></div>
-                                <div
-                                  class="dummy-searchfield"
-                                  style="
-                                    width: 512px;
-                                    height: 46px;
-                                    left: 70px;
-                                    top: 0px;
-                                  "
-                                  :style="{ display: searchFieldDisplay }"
+                                  class="suggestion"
+                                  style="width: 512px; height: 46px"
                                 >
-                                  <div
-                                    class="suggestion"
-                                    style="width: 512px; height: 46px"
-                                  >
-                                    <span class="dummy"></span>立即搜索{{
-                                      searchText
-                                    }}
-                                  </div>
+                                  <span class="dummy"></span>立即搜索{{
+                                    searchText
+                                  }}
                                 </div>
                               </div>
                             </div>
@@ -170,57 +164,52 @@
             </div>
           </div>
         </div>
-        <div class="x-window-bl x-panel-nofooter">
-          <div class="x-window-br"><div class="x-window-bc"></div></div>
-        </div>
       </div>
-      <div
-        class="x-panel x-panel-noborder x-box-item"
-        style="width: 638px; left: 0px; top: 48px"
-      >
-        <div class="x-panel-bwrap" :style="{ display: panelBwrapDisplay }">
+      <div class="x-window-bl x-panel-nofooter">
+        <div class="x-window-br"><div class="x-window-bc"></div></div>
+      </div>
+    </div>
+    <div
+      class="x-panel x-panel-noborder x-box-item"
+      style="width: 638px; left: 0px; top: 48px"
+    >
+      <div class="x-panel-bwrap" :style="{ display: panelBwrapDisplay }">
+        <div
+          class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+          style="width: 638px; height: 370px"
+        >
           <div
-            class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+            class="x-panel main-panel syno-ux-panel x-panel-noborder"
             style="width: 638px; height: 370px"
-          >
-            <div
-              class="x-panel main-panel syno-ux-panel x-panel-noborder"
-              style="width: 638px; height: 370px"
-            ></div>
-          </div>
+          ></div>
         </div>
       </div>
-      <div
-        class="
-          x-panel
-          syno-finder-spotlight-menu
-          x-panel-noborder
-          syno-ux-panel
-        "
-        style="
-          position: absolute;
-          z-index: 11000;
-          left: 10px;
-          top: 45px;
-          width: 184px;
-        "
-        :style="{ display: selectDisplay }"
-      >
-        <div class="x-panel-bwrap">
-          <div
-            class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
-            style="width: 184px"
-          >
-            <div style="width: 184px; height: 200px">
-              <div
-                class="cat-wrapper"
-                :class="select.cls"
-                v-for="(select, selectIndex) in searchInputDetail.selectList"
-                :key="select.id"
-                @click.stop="changeSearchMethod(selectIndex, select.cls1)"
-              >
-                <span class="icon" :class="select.cls1"></span>{{ select.text }}
-              </div>
+    </div>
+    <div
+      class="x-panel syno-finder-spotlight-menu x-panel-noborder syno-ux-panel"
+      style="
+        position: absolute;
+        z-index: 11000;
+        left: 10px;
+        top: 45px;
+        width: 184px;
+      "
+      :style="{ display: selectDisplay }"
+    >
+      <div class="x-panel-bwrap">
+        <div
+          class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
+          style="width: 184px"
+        >
+          <div style="width: 184px; height: 200px">
+            <div
+              class="cat-wrapper"
+              :class="select.cls"
+              v-for="(select, selectIndex) in searchInputDetail.selectList"
+              :key="select.id"
+              @click="changeSearchMethod(selectIndex, select.cls1)"
+            >
+              <span class="icon" :class="select.cls1"></span>{{ select.text }}
             </div>
           </div>
         </div>
@@ -230,14 +219,17 @@
 </template>
 <script>
 export default {
+  props: ["searchInputData", "defaultZIndex"],
   mounted() {
-      this.$bus.on('openSearchInput',this.openSearchInput)
+    this.$bus.on("openSearchInput", this.openSearchInput);
+    this.searchInputContant = this.searchInputData;
   },
   data() {
     return {
       searchInputContant: {
         display: "none",
-        zIndex: "9050",
+        zIndex: 9050,
+        cls: "deactive-win",
       },
       searchText: "",
       keyword: "",
@@ -285,42 +277,71 @@ export default {
   methods: {
     // 显示或隐藏本页面
     openSearchInput(e) {
-      if (this.searchInputContant.display === "none") {
+      if (
+        this.searchInputContant.display === "none" ||
+        this.searchInputContant.zIndex < this.defaultZIndex
+      ) {
         this.searchInputContant.display = "block";
-        e.srcElement.className = e.srcElement.className + " pressed";
-        window.addEventListener('click',this.hiddenSearchInput,false)
+        this.searchInputContant.cls = "active-win";
+        this.searchInputContant.zIndex = this.defaultZIndex + 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+        if (!e.srcElement.className.includes(" pressed")) {
+          e.srcElement.className = e.srcElement.className + " pressed";
+        }
+        window.addEventListener("click", this.hiddenSearchInput);
       } else {
         this.searchInputContant.display = "none";
-        if (e.srcElement.className.includes(" pressed")) {
+        this.searchInputContant.zIndex = this.defaultZIndex - 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        this.searchInputContant.cls = "deactive-win";
+        // this.searchInputContant.zIndex = this.defaultZIndex - 10;
+        // this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        if (
+          e.srcElement.className &&
+          e.srcElement.className.includes(" pressed")
+        ) {
           e.srcElement.className = e.srcElement.className.replace(
             " pressed",
             ""
           );
         }
+        window.removeEventListener("click", this.hiddenSearchInput);
       }
     },
     // 隐藏本页面
-    hiddenSearchInput(e){
-        console.log(e)
-        let el = document.querySelector(".tray-item.search-button");
-      if(e.srcElement !== el){
+    hiddenSearchInput(e) {
+      let el = document.querySelector(".tray-item.search-button");
+      let el1 = document.querySelector(".syno-finder.spotlight-main-window");
+      if (e.srcElement === el) {
+        window.addEventListener("click", this.hiddenSearchInput);
+      } else {
         this.searchInputContant.display = "none";
+        window.removeEventListener("click", this.hiddenSearchInput);
+        this.panelBwrapDisplay = "none";
+        if (el.className && el.className.includes(" pressed")) {
+          el.className = el.className.replace(" pressed", "");
+        }
+        this.searchFieldDisplay = "block";
+        this.selectDisplay = "none";
+        this.searchCls = "";
+        if (el1.className.includes(" merge")) {
+          el1.className = el1.className.replace(" merge");
+        }
+        this.keyword = "";
+        if (this.searchInputContant.zIndex >= this.defaultZIndex) {
+          this.searchInputContant.cls = "deactive-win";
+          this.searchInputContant.zIndex = this.defaultZIndex - 10;
+          this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        }
       }
-      if (el.className && el.className.includes(" pressed")) {
-        el.className = el.className.replace(" pressed", "");
-      }
-      this.panelBwrapDisplay = "none";
-      this.searchFieldDisplay = "block";
-      this.selectDisplay = "none";
-      this.searchCls = "";
-      this.keyword = ''
-      window.removeEventListener('click',this.hiddenSearchInput,false)
     },
     // 点击本页面
-    clickSearchInput(){
-        
-        let el = document.querySelector(".tray-item.search-button");
-        el.className = el.className + " pressed";
+    clickSearchInput(e) {
+      if (this.searchInputContant.display === "deactive-win") {
+        this.searchInputContant.cls = "active-win";
+        this.searchInputContant.zIndex = this.defaultZIndex + 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      }
     },
     // 显示或隐藏选择框
     showOrHiddenSelect() {
@@ -328,7 +349,6 @@ export default {
         this.selectDisplay = "block";
       } else {
         this.selectDisplay = "none";
-        
       }
     },
     // 切换搜索方式
@@ -354,23 +374,29 @@ export default {
     },
     // 输入搜索
     searchKeyword() {
-      console.log(this.keyword.trim());
+      let el = document.querySelector(".syno-finder.spotlight-main-window");
       if (!this.keyword.trim()) {
         this.panelBwrapDisplay = "none";
         this.searchFieldDisplay = "block";
         this.searchCls = "";
+        if (el.className.includes(" merge")) {
+          el.className = el.className.replace(" merge");
+        }
       } else {
         this.panelBwrapDisplay = "block";
         this.searchFieldDisplay = "none";
         this.searchCls = "merge";
+        if (!el.className.includes(" merge")) {
+          el.className = el.className + " merge";
+        }
       }
     },
     // 输入框聚焦
-    searchInputFocus(){
-       this.selectDisplay = "none";
-    }
+    searchInputFocus() {
+      this.selectDisplay = "none";
+    },
   },
   components: {},
   name: "SearchInput",
 };
-</script>
+</script>

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

@@ -23,7 +23,7 @@
         detailMessage, detailMessageIndex
       ) in resizablePinnedDetail.detailMessageList"
       :key="detailMessage.id"
-      @click="changeDialogMenuWindow(detailMessage.title)"
+      @click.capture="changeDialogMenuWindow(detailMessage.title)"
     >
       <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
       <div class="x-window-tl" @click="moveWindowPosition">
@@ -37,7 +37,7 @@
                 <div
                   class="x-tool x-tool-close"
                   role="option"
-                  @click.stop="closeWindow(detailMessageIndex)"
+                  @click.capture="closeWindow(detailMessageIndex)"
                 >
                   &nbsp;
                 </div>
@@ -45,14 +45,14 @@
                   class="x-tool x-tool-restore"
                   role="option"
                   :style="{ display: `${detailMessage.iconRestore}` }"
-                  @click.stop="restoreMizeWindow(detailMessageIndex)"
+                  @click.capture="restoreMizeWindow(detailMessageIndex)"
                 >
                   &nbsp;
                 </div>
                 <div
                   class="x-tool x-tool-maximize"
                   role="option"
-                  @click.stop="maxiSizeWindow(detailMessageIndex)"
+                  @click.capture="maxiSizeWindow(detailMessageIndex)"
                   :style="{ display: `${detailMessage.iconMaximize}` }"
                 >
                   &nbsp;
@@ -60,14 +60,14 @@
                 <div
                   class="x-tool x-tool-minimize"
                   role="option"
-                  @click.stop="miniMizeWindow(detailMessageIndex)"
+                  @click.capture="miniMizeWindow(detailMessageIndex)"
                 >
                   &nbsp;
                 </div>
                 <div
                   class="x-tool x-tool-help"
                   role="option"
-                  @click.stop="openDSMWindow()"
+                  @click.capture="openDSMWindow()"
                 >
                   &nbsp;
                 </div>

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

@@ -14,7 +14,7 @@
       width: openUserSettingDetail.width,
     }"
     :class="openUserSettingDetail.cls"
-    @click="clickUserSetting"
+    @click.capture="clickUserSetting"
     v-if="openUserSettingDetail.display === 'block'"
   >
     <div class="v-window-header-wrapper draggable">
@@ -30,19 +30,19 @@
         </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 help" @click.capture="openDSMWindow"></div>
+        <div class="tool minimize" @click.capture="minUserSetting"></div>
         <div
           class="tool maximize"
           :style="{ display: openUserSettingDetail.iconMaximize }"
-          @click="maxiMizeUserSetting"
+          @click.capture="maxiMizeUserSetting"
         ></div>
         <div
           class="tool restore"
           :style="{ display: openUserSettingDetail.iconRestore }"
-          @click="RestoreUserSetting"
+          @click.capture="RestoreUserSetting"
         ></div>
-        <div class="tool close" @click.stop="closeUserSetting"></div>
+        <div class="tool close" @click.capture="closeUserSetting"></div>
       </div>
     </div>
   </div>
@@ -56,13 +56,20 @@ export default {
   },
   data() {
     return {
-      openUserSettingDetail: {},
+      openUserSettingDetail: {
+        display:'none',
+        zIndex:9050,
+        iconRestore:'',
+        iconMaximize:'',
+        width:'',
+        restoreWidth:''
+      },
     };
   },
   methods: {
     // 打开本页面
     openUserSetting() {
-      if (this.openUserSettingDetail.display) {
+      if (this.openUserSettingDetail.display === 'none' || this.openUserSettingDetail.zIndex < this.defaultZIndex) {
         this.openUserSettingDetail.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
         this.openUserSettingDetail.display = "block";

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

@@ -5,7 +5,7 @@
     class="taskbar-menu user-menu v-menu"
     style="height: auto; width: 200px; right: 20px; top: 41px; z-index: 15000"
     :style="{display: display}"
-    @click="clickUserTrayPanel"
+    @click.stop="clickUserTrayPanel"
   >
     <div class="v-trap-focus-indicator"></div>
     <div class="v-trap-focus-body">
@@ -57,8 +57,10 @@ export default {
     openUserTrayPanel(e){
       if(this.display === 'none'){
         this.display = "block";
-        e.srcElement.className = e.srcElement.className + " pressed";
-        window.addEventListener('click',this.hiddenUserAndchangeIconColor,true)
+       if(! e.srcElement.className.includes(' pressed')){
+         e.srcElement.className = e.srcElement.className + " pressed"
+       }
+        window.addEventListener('click',this.hiddenUserAndchangeIconColor)
       }else {
         this.display = "none";
         if (e.srcElement.className.includes(" pressed")) {
@@ -70,22 +72,21 @@ export default {
       }
     },
     // 点击本页面
-    clickUserTrayPanel(){
-       this.display = "block";
-       let el = document.querySelector(".tray-item.user-button");
-       el.className = el.className + " pressed"
-       window.addEventListener('click',this.hiddenUserAndchangeIconColor,true)
+    clickUserTrayPanel(e){
     },
     // 隐藏本页面并更新页面对应的图标颜色
     hiddenUserAndchangeIconColor(e){
       let el = document.querySelector(".tray-item.user-button");
-      if(e.srcElement !== el){
+      if(e.srcElement === el){
+        window.addEventListener("click", this.hiddenUserAndchangeIconColor);
+      }else{
         this.display = "none";
+        if (el.className && el.className.includes(" pressed")) {
+          el.className = el.className.replace(" pressed", "");
+        }
+        window.removeEventListener('click',this.hiddenUserAndchangeIconColor)
       }
-      if (el.className && el.className.includes(" pressed")) {
-        el.className = el.className.replace(" pressed", "");
-      }
-      window.removeEventListener('click',this.hiddenUserAndchangeIconColor,true)
+      
     },
     // 打开个人设置页面
     openUserSetting(e){

src/component/Container/Desktop/index.vue

@@ -29,7 +29,7 @@
       :userSettingData="userSettingData"
     ></UserSetting>
     <UserAbout :defaultZIndex="defaultZIndex"></UserAbout>
-    <SearchInput></SearchInput>
+    <SearchInput :searchInputData="searchInputData"  :defaultZIndex="defaultZIndex"></SearchInput>
     <!-- <Message></Message> -->
     <!-- <Mask></Mask> -->
   </div>
@@ -58,6 +58,7 @@ export default {
     "notifyTrayPanelDetailData",
     "notifySettingData",
     "notifyShowAllData",
+    "searchInputData"
   ],
   data() {
     return {
@@ -77,14 +78,7 @@ export default {
       }
     },
   },
-  watch: {
-    userSettingData() {
-      this.userSettingData = this.userSettingData;
-    },
-    fixWindowZIndex() {
-      this.fixWindowZIndex = this.fixWindowZIndex;
-    },
-  },
+  watch: {},
   components: {
     Menu,
     Shortcut,

src/component/Container/DesktopAppView/AppViewItem/index.vue

@@ -21,10 +21,10 @@
       :class="detailMessage.cls"
       v-for="detailMessage in resizablePinnedDetail.detailMessageList"
       :key="detailMessage.id"
-      @click="changeDialogMenuWindow(detailMessage.id)"
+      @click.capture="changeDialogMenuWindow(detailMessage.id)"
     >
       <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
-      <div class="x-window-tl" @click="moveWindowPosition">
+      <div class="x-window-tl" @click.capture="moveWindowPosition">
         <div class="x-window-tr">
           <div class="x-window-tc">
             <div
@@ -35,7 +35,7 @@
                 <div
                   class="x-tool x-tool-close"
                   role="option"
-                  @click.stop="closeWindow(detailMessage.id)"
+                  @click.capture="closeWindow(detailMessage.id)"
                 >
                   &nbsp;
                 </div>
@@ -43,14 +43,14 @@
                   class="x-tool x-tool-restore"
                   role="option"
                   :style="{ display: `${detailMessage.iconRestore}` }"
-                  @click.stop="restoreMizeWindow(detailMessage.id)"
+                  @click.capture="restoreMizeWindow(detailMessage.id)"
                 >
                   &nbsp;
                 </div>
                 <div
                   class="x-tool x-tool-maximize"
                   role="option"
-                  @click.stop="maxiSizeWindow(detailMessage.id)"
+                  @click.capture="maxiSizeWindow(detailMessage.id)"
                   :style="{ display: `${detailMessage.iconMaximize}` }"
                 >
                   &nbsp;
@@ -58,14 +58,14 @@
                 <div
                   class="x-tool x-tool-minimize"
                   role="option"
-                  @click.stop="miniMizeWindow(detailMessage.id)"
+                  @click.capture="miniMizeWindow(detailMessage.id)"
                 >
                   &nbsp;
                 </div>
                 <div
                   class="x-tool x-tool-help"
                   role="option"
-                  @click.stop="openDSMWindow()"
+                  @click.capture="openDSMWindow()"
                 >
                   &nbsp;
                 </div>

src/component/Container/DesktopAppView/index.vue

@@ -95,7 +95,7 @@ export default {
     showAppView() {
       this.display = "block";
       this.$bus.emit("hiddenOrShowOtherWindow", true);
-      window.addEventListener("click", this.WindowClick, false);
+      window.addEventListener("click", this.WindowClick);
       // this.$bus.emit("hiddenDialogWindow");
       // this.$bus.emit("closeUserAbout");
 
@@ -110,7 +110,6 @@ export default {
     },
     // 搜索
     searchAppView(){
-      console.log(this)
     },
     // 点击页面关闭本页面
     WindowClick() {
@@ -120,7 +119,7 @@ export default {
       }
       this.display = "none";
       this.$bus.emit("hiddenOrShowOtherWindow", false);
-      window.removeEventListener("click", this.WindowClick, false);
+      window.removeEventListener("click", this.WindowClick);
       this.$bus.emit("showDialogWindow");
     },
     // 点击appViewItem

src/component/Container/index.vue

@@ -9,6 +9,7 @@
       :notifyTrayPanelDetailData="notifyTrayPanelDetailData"
       :notifySettingData="notifySettingData"
       :notifyShowAllData="notifyShowAllData"
+      :searchInputData="searchInputData"
     ></Desktop>
     <DesktopAppView
       :defaultZIndex="defaultZIndex"
@@ -526,6 +527,11 @@ export default {
           clearAllNotifyMessageZIndex: 9050,
         },
       },
+      searchInputData: {
+        display: "none",
+        zIndex: 9050,
+        cls: "deactive-win",
+      },
     };
   },
   mounted() {
@@ -581,6 +587,9 @@ export default {
       let notifyShowAllZIndexMax =
         this.notifyShowAllData.zIndex >= this.defaultZIndex &&
         this.notifyShowAllData.display === "block";
+      let searchInputZIndexMax =
+        this.searchInputData.zIndex >= this.defaultZIndex &&
+        this.searchInputData.display === "block";
       let clearAllNotifyMessageZIndexMax =
         this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageZIndex >=
           this.defaultZIndex &&
@@ -593,6 +602,7 @@ export default {
         notifyTrayPanelDetailZIndexMax,
         notifySettingZIndexMax,
         notifyShowAllZIndexMax,
+        searchInputZIndexMax,
         clearAllNotifyMessageZIndexMax
       );
       console.log(
@@ -602,6 +612,7 @@ export default {
         this.notifyTrayPanelDetailData.zIndex,
         this.notifySettingData.zIndex,
         this.notifyShowAllData.zIndex,
+        this.searchInputData.zIndex,
         this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageZIndex
       );
       if ((appViewIndex || appViewIndex === 0) && appViewIndex !== -1) {
@@ -624,6 +635,7 @@ export default {
         this.fixWindowData.cls = "deactive-win";
         this.notifyShowAllData.cls = "deactive-win";
         this.notifySettingData.cls = "deactive-win";
+        this.searchInputData.cls = "deactive-win";
         this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageCls =
           "deactive-win";
       } else if (fixWindowZIndexIsMax) {
@@ -632,6 +644,7 @@ export default {
         this.notifyTrayPanelDetailData.cls = "deactive-win";
         this.notifyShowAllData.cls = "deactive-win";
         this.notifySettingData.cls = "deactive-win";
+        this.searchInputData.cls = "deactive-win";
         this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageCls =
           "deactive-win";
         this.appViewData.forEach((item) => {
@@ -653,6 +666,7 @@ export default {
         this.notifyTrayPanelDetailData.cls = "deactive-win";
         this.notifyShowAllData.cls = "deactive-win";
         this.notifySettingData.cls = "deactive-win";
+        this.searchInputData.cls = "deactive-win";
         this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageCls =
           "deactive-win";
         this.appViewData.forEach((item) => {
@@ -666,6 +680,7 @@ export default {
         this.fixWindowData.cls = "deactive-win";
         this.notifyShowAllData.cls = "deactive-win";
         this.notifySettingData.cls = "deactive-win";
+        this.searchInputData.cls = "deactive-win";
         this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageCls =
           "deactive-win";
         this.appViewData.forEach((item) => {
@@ -679,6 +694,7 @@ export default {
         this.userSettingData.cls = "deactive-win";
         this.fixWindowData.cls = "deactive-win";
         this.notifyShowAllData.cls = "deactive-win";
+        this.searchInputData.cls = "deactive-win";
         this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageCls =
           "deactive-win";
         this.appViewData.forEach((item) => {
@@ -692,6 +708,21 @@ export default {
         this.userSettingData.cls = "deactive-win";
         this.fixWindowData.cls = "deactive-win";
         this.notifySettingData.cls = "deactive-win";
+        this.searchInputData.cls = "deactive-win";
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+      } else if (searchInputZIndexMax) {
+        this.searchInputData.cls = "active-win";
+        this.notifySettingData.cls = "deactive-win";
+        this.notifyTrayPanelDetailData.cls = "deactive-win";
+        this.userSettingData.cls = "deactive-win";
+        this.fixWindowData.cls = "deactive-win";
+        this.notifyShowAllData.cls = "deactive-win";
+        this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageCls =
+          "deactive-win";
         this.appViewData.forEach((item) => {
           if (item.cls === "active-win") {
             item.cls = "deactive-win";
@@ -705,6 +736,7 @@ export default {
         this.userSettingData.cls = "deactive-win";
         this.fixWindowData.cls = "deactive-win";
         this.notifySettingData.cls = "deactive-win";
+        this.searchInputData.cls = "deactive-win";
         this.appViewData.forEach((item) => {
           if (item.cls === "active-win") {
             item.cls = "deactive-win";
@@ -718,6 +750,7 @@ export default {
         !notifyTrayPanelDetailZIndexMax &&
         !notifySettingZIndexMax &&
         !notifyShowAllZIndexMax &&
+        !searchInputZIndexMax &&
         !clearAllNotifyMessageZIndexMax
       ) {
         let appViewData = this.appViewData.filter((item) => {
@@ -741,6 +774,8 @@ export default {
               .clearAllNotifyMessageDisplay === "none") &&
           (this.fixWindowData.zIndex >= this.notifySettingData.zIndex ||
             this.notifySettingData.display === "none") &&
+          (this.fixWindowData.zIndex >= this.searchInputData.zIndex ||
+            this.searchInputData.display === "none") &&
           (appViewData.length
             ? this.fixWindowData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
@@ -761,6 +796,8 @@ export default {
               .clearAllNotifyMessageDisplay === "none") &&
           (this.userSettingData.zIndex >= this.notifySettingData.zIndex ||
             this.notifySettingData.display === "none") &&
+          (this.userSettingData.zIndex >= this.searchInputData.zIndex ||
+            this.searchInputData.display === "none") &&
           (appViewData.length
             ? this.userSettingData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
@@ -783,6 +820,9 @@ export default {
           (this.notifyTrayPanelDetailData.zIndex >=
             this.notifySettingData.zIndex ||
             this.notifySettingData.display === "none") &&
+          (this.notifyTrayPanelDetailData.zIndex >=
+            this.searchInputData.zIndex ||
+            this.searchInputData.display === "none") &&
           (appViewData.length
             ? this.notifyTrayPanelDetailData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
@@ -803,6 +843,8 @@ export default {
               .clearAllNotifyMessageZIndex ||
             this.notifyShowAllData.clearAllNotifyData
               .clearAllNotifyMessageDisplay === "none") &&
+          (this.notifySettingData.zIndex >= this.searchInputData.zIndex ||
+            this.searchInputData.display === "none") &&
           (appViewData.length
             ? this.notifySettingData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
@@ -823,11 +865,35 @@ export default {
               .clearAllNotifyMessageZIndex ||
             this.notifyShowAllData.clearAllNotifyData
               .clearAllNotifyMessageZIndexDisplay === "none") &&
+          (this.notifyShowAllData.zIndex >= this.searchInputData.zIndex ||
+            this.searchInputData.display === "none") &&
           (appViewData.length
             ? this.notifyShowAllData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
             : true);
 
+        let searchInputZIndexMax1 =
+          this.searchInputData.display === "block" &&
+          (this.searchInputData.zIndex >= this.fixWindowData.zIndex ||
+            this.fixWindowData.display === "none") &&
+          (this.searchInputData.zIndex >= this.notifyShowAllData.zIndex ||
+            this.notifyShowAllData.display === "none") &&
+          (this.searchInputData.zIndex >= this.notifyTrayPanelDetailData.zIndex ||
+            this.notifyTrayPanelDetailData.display === "none") &&
+          (this.searchInputData.zIndex >= this.userSettingData.zIndex ||
+            this.userSettingData.display === "none") &&
+          (this.searchInputData.zIndex >=
+            this.notifyShowAllData.clearAllNotifyData
+              .clearAllNotifyMessageZIndex ||
+            this.notifyShowAllData.clearAllNotifyData
+              .clearAllNotifyMessageDisplay === "none") &&
+          (this.searchInputData.zIndex >= this.notifySettingData.zIndex ||
+            this.notifySettingData.display === "none") &&
+          (appViewData.length
+            ? this.searchInputData.zIndex >=
+              appViewData[appViewData.length - 1].zIndex
+            : true);
+
         let clearAllNotifyMessageZIndexMax1 =
           this.notifyShowAllData.clearAllNotifyData
             .clearAllNotifyMessageDisplay === "block" &&
@@ -847,6 +913,9 @@ export default {
           (this.notifyShowAllData.clearAllNotifyData
             .clearAllNotifyMessageZIndex >= this.notifySettingData.zIndex ||
             this.notifySettingData.display === "none") &&
+          (this.notifyShowAllData.clearAllNotifyData
+            .clearAllNotifyMessageZIndex >= this.searchInputData.zIndex ||
+            this.searchInputData.display === "none") &&
           (appViewData.length
             ? this.notifyShowAllData.clearAllNotifyData
                 .clearAllNotifyMessageZIndex >=
@@ -870,16 +939,18 @@ export default {
             this.notifyShowAllData.zIndex ||
             this.notifyShowAllData.display === "none") &&
           (appViewData[appViewData.length - 1].zIndex >
-            this.notifyShowAllData.clearAllNotifyData
-              .clearAllNotifyMessageZIndex ||
-            this.notifyShowAllData.clearAllNotifyData
-              .clearAllNotifyMessageDisplay === "none");
+            this.notifySettingData.zIndex ||
+            this.notifySettingData.display === "none") &&
+          (appViewData[appViewData.length - 1].zIndex >
+            this.searchInputData.zIndex ||
+            this.searchInputData === "none");
         console.log(
           fixWindowZIndexIsMax1,
           userSettingZIndexMax1,
           notifyTrayPanelDetailZIndexMax1,
           notifySettingZIndexMax1,
           notifyShowAllZIndexMax1,
+          searchInputZIndexMax1,
           clearAllNotifyMessageZIndexMax1,
           appViewIsMax
         );
@@ -901,6 +972,8 @@ export default {
           this.notifySettingData.cls = "active-win";
         } else if (notifyShowAllZIndexMax1) {
           this.notifyShowAllData.cls = "active-win";
+        } else if (searchInputZIndexMax1) {
+          this.searchInputData.cls = "active-win";
         } else if (clearAllNotifyMessageZIndexMax1) {
           this.notifyShowAllData.clearAllNotifyData.clearAllNotifyMessageCls =
             "active-win";