桌面逻辑

public/static/css/style/style.css

@@ -2277,28 +2277,6 @@ ul.sds-desktop-shortcut {
 
 
 
-/* 清除全部notify */
-.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;
-}
-
-.sds-window-v5.confirm-delete-icon .x-window-body{
-    padding: 24px 30px 0px;
-    width: 420px;
-    height: auto;
-}
 
 /* userSetting */
 .window-header-tool-wrapper .tool.help{
@@ -2389,15 +2367,58 @@ ul.sds-desktop-shortcut {
     height: calc(100vh); 
 }
 
+/* 消息弹出框 */
+.x-window.sds-window-v5 .body-wrapper {
+    padding: 24px 30px 0 30px;
+}
+/* 清除全部notify消息弹出框 */
+.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-btn-danger{
+    color:#fff;
+    background-color: #E64040;
+    border: 1px solid #E64040;
+}
+
+.sds-window-v5.confirm-delete-icon .x-window-body{
+    padding: 24px 30px 0px;
+    width: 420px;
+    height: auto;
+}
+
+.v-window.v-message-box-window .message-box .body-wrapper .dialog-icon-wrapper .dialog-icon.alarm {
+    width: 32px;
+    height: 32px;
+    background-image: url("../../../image/index/dialog_alarm.png");
+    background-size: 32px 32px;
+}
+
+.v-window .v-window-mask {
+    top: 0;
+}
 
-/* userAbout遮罩层 */
+/* userAbout消息弹出框 */
 .sds-user-about-mask {
     background-color: #000000;
     /* z-index: 90000 !important; */
     opacity: 0.2;
 }
 
-/* 用户关机遮罩层 */
+/* 用户关机消息弹出框 */
 .v-window-container-mask{
     background-color: rgba(0, 0, 0, 0.5);
 }

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

@@ -148,7 +148,7 @@ export default {
       fixWindowMessage: {
         zIndex: 9050,
         display: "block",
-        cls: "deactve-win",
+        cls: "deactive-win",
       },
       selectedNum: 2,
       display: "block",
@@ -611,17 +611,22 @@ 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;
-    },
+    // 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(){
+        console.log(this.fixWindowData)
+        this.fixWindowMessage = this.fixWindowData;
+      },
+      deep:true
+
+    }
   },
   beforeDestroy() {},
   name: "FixWindow",

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

@@ -1,7 +1,7 @@
 <template>
-  <!-- 清除全部弹出框 -->
+  <!-- 消息弹出框 -->
   <div
-    class="x-window x-window-dlg sds-window-v5 active-win"
+    class="x-window x-window-dlg sds-window-v5"
     style="
       position: absolute;
       z-index: 11004;
@@ -11,24 +11,23 @@
       width: 480px;
     "
     :style="{ display: display }"
-    :class="confirmDeleteDetail ? confirmDeleteDetail.cls : ''"
+    :class="messageContant.cls ? messageContant.cls : ''"
   >
     <div class="x-dlg-focus"></div>
     <div class="x-window-tl">
       <div class="x-window-tr"><div class="x-window-tc"></div></div>
     </div>
-    <div class="x-window-bwrap" v-if="confirmDeleteDetail">
+    <div class="x-window-bwrap" v-if="messageContant">
       <div class="x-window-ml">
         <div class="x-window-mr">
           <div class="x-window-mc">
             <div
               class="x-window-body"
-              style="padding: 24px 30px 0px; width: 420px; height: auto"
             >
               <div class="x-dlg-icon">
                 <div class="ext-mb-content">
                   <div class="ext-mb-title" style="display: none"></div>
-                  <span class="ext-mb-text">{{ confirmDeleteDetail.text }}</span
+                  <span class="ext-mb-text">{{ messageContant.text }}</span
                   ><br class="ext-mb-br" />
                   <div class="ext-mb-fix-cursor"></div>
                 </div>
@@ -98,7 +97,110 @@
                               <td>
                                 <table cellspacing="0">
                                   <tbody>
-                                    <tr class="x-toolbar-right-row">
+                                    <tr class="x-toolbar-right-row" v-if='messageContant.buttonList.length'>
+                                      <td class="x-toolbar-cell" v-for="button in messageContant.buttonList" :key="button.id">
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="v-btn v-btn-footbar"
+                                              :class="button.cls"
+                                              @click="button.event"
+                                            >
+                                              {{button.text}}
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <!-- <td class="x-toolbar-cell x-hide-display">
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button syno-ux-button-grey
+                                            x-btn-noicon
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em
+                                            class="x-unselectable"
+                                            unselectable="on"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                            >
+                                              取消
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <td class="x-toolbar-cell">
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button
+                                            x-btn-noicon
+                                            syno-ux-button-grey
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                              @click="cancleClear"
+                                            >
+                                              取消
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <td class="x-toolbar-cell x-hide-display">
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button syno-ux-button-blue
+                                            x-btn-noicon
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                            >
+                                              确定
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td>
+                                      <td class="x-toolbar-cell">
+                                        <span
+                                          cellspacing="0"
+                                          class="
+                                            x-btn
+                                            syno-ux-button
+                                            x-btn-noicon
+                                            syno-ux-button-red
+                                            syno-ux-button-blue
+                                          "
+                                          style="width: auto; margin-left: 0px"
+                                          ><em class="x-unselectable"
+                                            ><button
+                                              type="button"
+                                              class="x-btn-text"
+                                              @click="confirmClear"
+                                            >
+                                              清除全部
+                                            </button></em
+                                          ></span
+                                        >
+                                      </td> -->
+                                    </tr>
+                                    <!-- <tr class="x-toolbar-right-row">
                                       <td class="x-toolbar-cell x-hide-display">
                                         <span
                                           cellspacing="0"
@@ -201,7 +303,7 @@
                                           ></span
                                         >
                                       </td>
-                                    </tr>
+                                    </tr> -->
                                   </tbody>
                                 </table>
                               </td>
@@ -234,39 +336,47 @@ export default {
   data() {
     return {
       display: "none",
-      confirmDeleteDetail: "",
-      cls: "",
+      messageContant: "",
       zIndex: 0,
     };
   },
   mounted() {
     this.$bus.on("openMessage", this.openMessage);
+    this.$bus.on("closeMessage", this.closeMessage);
   },
   methods: {
     // 打开本页面
     openMessage(obj) {
       this.display = "block";
-      this.confirmDeleteDetail = obj;
+      this.messageContant = obj;
+      console.log(this.messageContant.cls)
+      if(! this.messageContant.cls.includes(' active-win')){
+        this.messageContant.cls = this.messageContant.cls + ' active-win'
+      }
     },
     // 关闭本页面
     closeMessage() {
-      console.log("none");
       this.display = "none";
-      this.confirmDeleteDetail = "";
-    },
-    // 点击取消
-    cancleClear() {
-      this.closeMessage();
-      this.$bus.emit("closeMask");
-    },
-    // 清除
-    confirmClear() {
-      this.closeMessage();
-      this.$bus.emit("closeMask");
-      this.$bus.emit("clearAllNotifyMessage");
-      this.$bus.emit("closeNotifyDetail");
-      this.$bus.emit("closeNotifyShowall");
+      this.messageContant = "";
+      if(this.messageContant.cls && ! this.messageContant.cls.includes(' active-win')){
+        this.messageContant.cls = this.messageContant.cls .replace( ' active-win','')
+      }else if(this.messageContant.cls && this.messageContant.cls.includes('active-win')){
+        this.messageContant.cls = this.messageContant.cls .replace( 'active-win','')
+      }
     },
+    // // 点击取消
+    // cancleClear() {
+    //   this.closeMessage();
+    //   this.$bus.emit("closeMask");
+    // },
+    // // 清除
+    // confirmClear() {
+    //   this.closeMessage();
+    //   this.$bus.emit("closeMask");
+    //   this.$bus.emit("clearAllNotifyMessage");
+    //   this.$bus.emit("closeNotifyDetail");
+    //   this.$bus.emit("closeNotifyShowall");
+    // },
   },
   components: {},
   name: "Message",

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

@@ -995,7 +995,7 @@ export default {
     // 打开本页面
     openNotifySetting() {
       this.notifySettingContant.display = "block";
-      if(this.notifySettingContant.zIndex < this.defaultZIndex){
+      if(this.notifySettingContant.cls === 'deactive-win'){
         this.notifySettingContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }

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

@@ -1,123 +1,141 @@
 <template>
   <!-- notifyShowAll -->
-  <div
-    class="
-      v-layout
-      sds-notify-showall-dialog
-      layout-window-app
-      v-window
-    "
-    :class="notifyShowAllContant.cls"
-    style="position: absolute; left: 10px;"
-    :style="{ display: notifyShowAllContant.display, width: width, height: height, top: top ,zIndex: notifyShowAllContant.zIndex}"
-    @click="clickNotifyShowall"
-  >
-    <div class="v-window-header-wrapper draggable">
-      <div class="app-icon"></div>
-      <div class="v-window-header-text">
-        <div class="v-window-header-title">消息</div>
-      </div>
+  <div class="notify-showall-window">
+    <div
+      class="v-layout sds-notify-showall-dialog layout-window-app v-window"
+      :class="notifyShowAllContant.cls"
+      style="position: absolute; left: 10px"
+      :style="{
+        display: notifyShowAllContant.display,
+        width: width,
+        height: height,
+        top: top,
+        zIndex: notifyShowAllContant.zIndex,
+      }"
+      @click.stop="clickNotifyShowall"
+    >
+      <div class="v-window-header-wrapper draggable">
+        <div class="app-icon"></div>
+        <div class="v-window-header-text">
+          <div class="v-window-header-title">消息</div>
+        </div>
 
-      <div class="window-header-tool-wrapper light">
-        <div class="tool maximize" @click.stop="maxWindow" v-if="!windowIsMax"></div>
-        <div class="tool restore" @click.stop="minWindow" v-else></div>
-        <div class="tool close" @click.stop="closeNotifyShowall"></div>
+        <div class="window-header-tool-wrapper light">
+          <div
+            class="tool maximize"
+            @click.stop="maxWindow"
+            v-if="!windowIsMax"
+          ></div>
+          <div class="tool restore" @click.stop="minWindow" v-else></div>
+          <div class="tool close" @click.stop="closeNotifyShowall"></div>
+        </div>
       </div>
-    </div>
-    <div class="v-window-body">
-      <div class="v-trap-focus-indicator"></div>
-      <div class="v-trap-focus-body">
+      <div class="v-window-body">
         <div class="v-trap-focus-indicator"></div>
-        <div
-          class="v-layout show-all-panel layout-panel-content v-panel"
-          style="--svc-layout-height: 100%"
-        >
-          <div class="v-spin-wrapper circle v-panel-wrapper">
-            <div class="v-spin-wrapper-masking" style="display: none"></div>
-            <div
-              class="v-layout layout-body-wrapper layout-panel-body"
-              style="
-                --panel-in-tabs-padding-top: 8px;
-                --svc-layout-padding: 16px 20px 6px 20px;
-                --svc-layout-margin: 0 0 0 0;
-              "
-            >
-              <div class="v-toolbar tbar-wrapper default-tbar">
-                <button type="button" class="v-btn v-btn-grey" @click.stop="reload">
-                  <span> 刷新 </span>
-                </button>
-                <button type="button" class="v-btn v-btn-grey">
-                  <span> 清除全部 </span>
-                </button>
-                <button type="button" class="v-btn v-btn-grey v-btn-disabled">
-                  <span> 查看 </span>
-                </button>
-                <button
-                  type="button"
-                  class="i-filter v-btn v-btn-grey v-btn-dropdown"
-                >
-                  <div class="v-btn-dropdown-btn"></div>
-                </button>
-                <div class="right-wrapper"></div>
-              </div>
-              <div class="body-wrapper">
-                <div class="all-notification-table-wrapper">
-                  <div
-                    class="
-                      all-notification-table
-                      v-spin-wrapper
-                      circle
-                      v-table-wrapper
-                    "
+        <div class="v-trap-focus-body">
+          <div class="v-trap-focus-indicator"></div>
+          <div
+            class="v-layout show-all-panel layout-panel-content v-panel"
+            style="--svc-layout-height: 100%"
+          >
+            <div class="v-spin-wrapper circle v-panel-wrapper">
+              <div class="v-spin-wrapper-masking" style="display: none"></div>
+              <div
+                class="v-layout layout-body-wrapper layout-panel-body"
+                style="
+                  --panel-in-tabs-padding-top: 8px;
+                  --svc-layout-padding: 16px 20px 6px 20px;
+                  --svc-layout-margin: 0 0 0 0;
+                "
+              >
+                <div class="v-toolbar tbar-wrapper default-tbar">
+                  <button
+                    type="button"
+                    class="v-btn v-btn-grey"
+                    @click.stop="reload"
+                  >
+                    <span> 刷新 </span>
+                  </button>
+                  <button
+                    type="button"
+                    class="v-btn v-btn-grey"
+                    @click.stop="showClearAllNotifyMessage"
+                  >
+                    <span> 清除全部 </span>
+                  </button>
+                  <button type="button" class="v-btn v-btn-grey v-btn-disabled">
+                    <span> 查看 </span>
+                  </button>
+                  <button
+                    type="button"
+                    class="i-filter v-btn v-btn-grey v-btn-dropdown"
                   >
+                    <div class="v-btn-dropdown-btn"></div>
+                  </button>
+                  <div class="right-wrapper"></div>
+                </div>
+                <div class="body-wrapper">
+                  <div class="all-notification-table-wrapper">
                     <div
-                      class="v-spin-wrapper-masking"
-                      :style="{ display: maskDisplay }"
-                    ></div>
+                      class="
+                        all-notification-table
+                        v-spin-wrapper
+                        circle
+                        v-table-wrapper
+                      "
+                    >
+                      <div
+                        class="v-spin-wrapper-masking"
+                        :style="{ display: maskDisplay }"
+                      ></div>
 
-                    <div class="v-table">
-                      <div class="v-table-header">
-                        <table>
-                          <colgroup>
-                            <col
-                              name="51d8198d-fd9d-4986-9532-b8a0a3962c1f"
-                              width="100"
-                            />
-                            <col
-                              name="5b742784-0a51-436e-89d0-1a0b2f31fed0"
-                              width="160"
-                            />
-                            <col
-                              name="e034d4a6-59d9-4fda-b9d6-e7cbd2293991"
-                              width="380"
-                            />
-                            <col
-                              name="3b0b169b-2410-4f64-b3f9-790f94f9c6db"
-                              width="160"
-                            />
-                          </colgroup>
-                          <thead class="v-table-thead">
-                            <tr class="row">
-                              <th
-                                colspan="1"
-                                rowspan="1"
-                                class="cell-first"
-                                :class="thContant.cls"
-                                v-for="(thContant,thContantIndex) in thContantArray"
-                                :key="thContant.id"
-                                @click.stop="sort(thContantIndex)"
-                              >
-                                <div class="inner-cell">
-                                  <div class="head-cell cell">
-                                    <span class="cell-title">{{thContant.text}}</span>
-                                    <span
-                                      class="v-table-column-sorter"
-                                      :class="thContant.cls1"
-                                    ></span>
+                      <div class="v-table">
+                        <div class="v-table-header">
+                          <table>
+                            <colgroup>
+                              <col
+                                name="51d8198d-fd9d-4986-9532-b8a0a3962c1f"
+                                width="100"
+                              />
+                              <col
+                                name="5b742784-0a51-436e-89d0-1a0b2f31fed0"
+                                width="160"
+                              />
+                              <col
+                                name="e034d4a6-59d9-4fda-b9d6-e7cbd2293991"
+                                width="380"
+                              />
+                              <col
+                                name="3b0b169b-2410-4f64-b3f9-790f94f9c6db"
+                                width="160"
+                              />
+                            </colgroup>
+                            <thead class="v-table-thead">
+                              <tr class="row">
+                                <th
+                                  colspan="1"
+                                  rowspan="1"
+                                  class="cell-first"
+                                  :class="thContant.cls"
+                                  v-for="(
+                                    thContant, thContantIndex
+                                  ) in thContantArray"
+                                  :key="thContant.id"
+                                  @click.stop="sort(thContantIndex)"
+                                >
+                                  <div class="inner-cell">
+                                    <div class="head-cell cell">
+                                      <span class="cell-title">{{
+                                        thContant.text
+                                      }}</span>
+                                      <span
+                                        class="v-table-column-sorter"
+                                        :class="thContant.cls1"
+                                      ></span>
+                                    </div>
                                   </div>
-                                </div>
-                              </th>
-                              <!-- <th
+                                </th>
+                                <!-- <th
                                 colspan="1"
                                 rowspan="1"
                                 class=""
@@ -162,249 +180,356 @@
                                   </div>
                                 </div>
                               </th> -->
-                            </tr>
-                          </thead>
-                        </table>
-                        <div class="hd-menu-btn-wrapper"></div>
-                      </div>
-                      <div class="v-ps ps">
-                        <div class="v-table-content">
-                          <div class="v-table-body">
-                            <table role="none">
-                              <colgroup>
-                                <col width="100" />
-                                <col width="160" />
-                                <col width="380" />
-                                <col width="160" />
-                              </colgroup>
-                              <tbody role="none" class="v-table-tbody">
-                                <tr
-                                  class="row"
-                                  @click.stop="clickTr(detailMessageIndex)"
-                                  @mouseenter="mouseenterTr(detailMessageIndex)"
-                                  @mouseleave="mouseleaveTr(detailMessageIndex)"
-                                  v-for="(
-                                    detailMessage, detailMessageIndex
-                                  ) in notifyShowallDetail.detailMessageList"
-                                  :key="detailMessage.id"
-                                  :class="detailMessage.cls1"
-                                >
-                                  <td class="cell-first">
-                                    <div class="inner-cell">
-                                      <div class="cell content-cell">
-                                        <div class="level-info">信息</div>
+                              </tr>
+                            </thead>
+                          </table>
+                          <div class="hd-menu-btn-wrapper"></div>
+                        </div>
+                        <div class="v-ps ps">
+                          <div class="v-table-content">
+                            <div class="v-table-body">
+                              <table>
+                                <colgroup>
+                                  <col width="100" />
+                                  <col width="160" />
+                                  <col width="380" />
+                                  <col width="160" />
+                                </colgroup>
+                                <tbody class="v-table-tbody">
+                                  <tr
+                                    class="row"
+                                    @click.stop="clickTr(detailMessageIndex)"
+                                    @mouseenter="
+                                      mouseenterTr(detailMessageIndex)
+                                    "
+                                    @mouseleave="
+                                      mouseleaveTr(detailMessageIndex)
+                                    "
+                                    v-for="(
+                                      detailMessage, detailMessageIndex
+                                    ) in notifyShowallDetail.detailMessageList"
+                                    :key="detailMessage.id"
+                                    :class="detailMessage.cls1"
+                                  >
+                                    <td class="cell-first">
+                                      <div class="inner-cell">
+                                        <div class="cell content-cell">
+                                          <div class="level-info">信息</div>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </td>
-                                  <td class="">
-                                    <div class="inner-cell">
-                                      <div class="cell content-cell">
-                                        <div>{{ detailMessage.title }}</div>
+                                    </td>
+                                    <td class="">
+                                      <div class="inner-cell">
+                                        <div class="cell content-cell">
+                                          <div>{{ detailMessage.title }}</div>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </td>
-                                  <td class="">
-                                    <div class="inner-cell">
-                                      <div class="cell content-cell">
-                                        <div>
-                                          {{ detailMessage.showMessage }}
+                                    </td>
+                                    <td class="">
+                                      <div class="inner-cell">
+                                        <div class="cell content-cell">
+                                          <div>
+                                            {{ detailMessage.showMessage }}
+                                          </div>
                                         </div>
                                       </div>
-                                    </div>
-                                  </td>
-                                  <td class="last-td-cell">
-                                    <div class="inner-cell">
-                                      <div class="cell content-cell">
-                                        <div>{{ detailMessage.time1 }}</div>
+                                    </td>
+                                    <td class="last-td-cell">
+                                      <div class="inner-cell">
+                                        <div class="cell content-cell">
+                                          <div>{{ detailMessage.time1 }}</div>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </tbody>
-                            </table>
+                                    </td>
+                                  </tr>
+                                </tbody>
+                              </table>
+                            </div>
                           </div>
-                        </div>
-                        <div class="ps__rail-x" style="left: 0px; bottom: 0px">
                           <div
-                            class="ps__thumb-x"
-                            style="left: 0px; width: 0px"
-                          ></div>
+                            class="ps__rail-x"
+                            style="left: 0px; bottom: 0px"
+                          >
+                            <div
+                              class="ps__thumb-x"
+                              style="left: 0px; width: 0px"
+                            ></div>
+                          </div>
+                          <div class="ps__rail-y" style="top: 0px; right: 0px">
+                            <div
+                              class="ps__thumb-y"
+                              style="top: 0px; height: 0px"
+                            ></div>
+                          </div>
                         </div>
-                        <div class="ps__rail-y" style="top: 0px; right: 0px">
+                        <div
+                          class="
+                            col-resizable-indicator
+                            col-resizable-indicator--hidden
+                          "
+                        ></div>
+                        <div
+                          class="
+                            col-resizable-indicator
+                            col-resizable-indicator--hidden
+                          "
+                        ></div>
+                        <div
+                          class="
+                            col-resizable-indicator
+                            col-resizable-indicator--hidden
+                          "
+                        ></div>
+                      </div>
+                      <div class="v-pagination">
+                        <div class="v-pagination-left">
+                          <ul class="left-paging">
+                            <li class="v-pagination-first disabled"></li>
+                            <li class="v-pagination-prev disabled"></li>
+                            <li
+                              class="
+                                v-pagination-item
+                                v-pagination-item-1
+                                v-pagination-item-active
+                              "
+                              v-if="
+                                notifyShowallDetail.detailMessageList.length
+                              "
+                            >
+                              1
+                            </li>
+                            <li class="v-pagination-next disabled"></li>
+                            <li class="v-pagination-last disabled"></li>
+                          </ul>
+                        </div>
+                        <div class="v-pagination-right">
+                          <div class="v-pagination-total">
+                            {{ notifyShowallDetail.detailMessageList.length }}
+                            个项目
+                          </div>
                           <div
-                            class="ps__thumb-y"
-                            style="top: 0px; height: 0px"
+                            class="v-pagination-refresh"
+                            @click.stop="reload"
                           ></div>
                         </div>
                       </div>
                       <div
-                        class="
-                          col-resizable-indicator
-                          col-resizable-indicator--hidden
-                        "
-                      ></div>
-                      <div
-                        class="
-                          col-resizable-indicator
-                          col-resizable-indicator--hidden
-                        "
-                      ></div>
-                      <div
-                        class="
-                          col-resizable-indicator
-                          col-resizable-indicator--hidden
-                        "
-                      ></div>
-                    </div>
-                    <div class="v-pagination">
-                      <div class="v-pagination-left">
-                        <ul class="left-paging">
-                          <li class="v-pagination-first disabled"></li>
-                          <li class="v-pagination-prev disabled"></li>
-                          <li
-                            class="
-                              v-pagination-item
-                              v-pagination-item-1
-                              v-pagination-item-active
-                            "
-                            v-if="notifyShowallDetail.detailMessageList.length"
-                          >
-                            1
-                          </li>
-                          <li class="v-pagination-next disabled"></li>
-                          <li class="v-pagination-last disabled"></li>
-                        </ul>
-                      </div>
-                      <div class="v-pagination-right">
-                        <div class="v-pagination-total">
-                          {{ notifyShowallDetail.detailMessageList.length }}
-                          个项目
+                        class="v-spin"
+                        :style="{ display: loading ? 'block' : 'none' }"
+                      >
+                        <div class="v-spin-text has-icon">加载中...</div>
+                        <div class="v-spin-icon">
+                          <i>
+                            <i></i>
+                          </i>
                         </div>
-                        <div class="v-pagination-refresh" @click.stop="reload"></div>
-                      </div>
-                    </div>
-                    <div
-                      class="v-spin"
-                      :style="{ display: loading ? 'block' : 'none' }"
-                    >
-                      <div class="v-spin-text has-icon">加载中...</div>
-                      <div class="v-spin-icon">
-                        <i>
-                          <i></i>
-                        </i>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="
-                v-layout
-                layout-panel-fbar
-                fbar-wrapper fbar-wrapper--fluid
-              "
-            >
-              <div class="pull-right">
-                <button
-                  type="button"
-                  class="v-btn v-btn-footbar v-btn-grey"
-                  @click.stop="closeNotifyShowall"
-                >
-                  <span> 关闭 </span>
-                </button>
+              <div
+                class="
+                  v-layout
+                  layout-panel-fbar
+                  fbar-wrapper fbar-wrapper--fluid
+                "
+              >
+                <div class="pull-right">
+                  <button
+                    type="button"
+                    class="v-btn v-btn-footbar v-btn-grey"
+                    @click.stop="closeNotifyShowall"
+                  >
+                    <span> 关闭 </span>
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
+        <div class="v-trap-focus-indicator"></div>
+      </div>
+      <div class="v-window-resizable">
+        <div class="handler v-window-resizable-nw"></div>
+        <div class="handler v-window-resizable-ne"></div>
+        <div class="handler v-window-resizable-sw"></div>
+        <div class="handler v-window-resizable-se"></div>
+        <div class="handler v-window-resizable-n"></div>
+        <div class="handler v-window-resizable-s"></div>
+        <div class="handler v-window-resizable-w"></div>
+        <div class="handler v-window-resizable-e"></div>
       </div>
-      <div tabindex="0" class="v-trap-focus-indicator"></div>
+      <div
+      class="v-window-mask"
+      :style="{ display: clearAllNotifyMessage.clearAllNotifyMessageDisplay}"
+      @click.stop="WindowClick()"
+    ></div>
     </div>
-    <div class="v-window-resizable">
-      <div class="handler v-window-resizable-nw"></div>
-      <div class="handler v-window-resizable-ne"></div>
-      <div class="handler v-window-resizable-sw"></div>
-      <div class="handler v-window-resizable-se"></div>
-      <div class="handler v-window-resizable-n"></div>
-      <div class="handler v-window-resizable-s"></div>
-      <div class="handler v-window-resizable-w"></div>
-      <div class="handler v-window-resizable-e"></div>
+    
+    <div
+      class="v-window v-message-box-window auto-height"
+      syno-id="SYNO.SDS.DSMNotify.ShowAll.Window-msgbox"
+      style="
+        position: absolute;
+        width: 480px;
+        height: auto;
+        top: 180px;
+        left: 190px;
+      "
+      :style="{
+        display: clearAllNotifyMessage.clearAllNotifyMessageDisplay,
+        zIndex: clearAllNotifyMessage.clearAllNotifyMessageZIndex,
+      }"
+      :class="clearAllNotifyMessage.clearAllNotifyMessageCls"
+      @click.stop="clickClearAllNotifyMessage"
+    >
+      <div>
+        <div class="v-trap-focus-indicator"></div>
+        <div class="v-trap-focus-body">
+          <div class="v-trap-focus-indicator"></div>
+          <div class="v-layout layout-panel-content v-panel message-box">
+            <div class="v-spin-wrapper circle v-panel-wrapper">
+              <div class="v-spin-wrapper-masking" style="display: none"></div>
+              <div
+                class="v-layout layout-body-wrapper layout-panel-body"
+                style="--panel-in-tabs-padding-top: 0"
+              >
+                <div class="body-wrapper">
+                  <div class="message-box-body has-icon">
+                    <div class="dialog-icon-wrapper alarm">
+                      <div class="dialog-icon alarm"></div>
+                    </div>
+                    <div class="dialog-content">
+                      所有桌面通知都会被清除。是否确定要继续？
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="
+                  v-layout
+                  layout-panel-fbar
+                  fbar-wrapper fbar-wrapper--fluid
+                "
+              >
+                <div class="v-status-bar loading" style="display: none">
+                  <div class="status-text">
+                    <div class="v-spin-icon">
+                      <i><i></i></i>
+                    </div>
+                    加载中...
+                  </div>
+                </div>
+                <div class="default pull-right">
+                  <button
+                    type="button"
+                    class="v-btn v-btn-footbar v-btn-cancel"
+                    @click.stop="cancelDeleteAllNotifyMessage"
+                  >
+                    <span>取消</span>
+                  </button>
+                  <button
+                    type="button"
+                    class="v-btn v-btn-footbar v-btn-red"
+                    @click.stop="confirmDeleteAllNotifyMessage"
+                  >
+                    <span>删除</span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="v-trap-focus-indicator"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["defaultZIndex","notifyShowAllData"],
+  props: ["defaultZIndex", "notifyShowAllData"],
   data() {
     return {
-      notifyShowAllContant:{
+      notifyShowAllContant: {
         display: "none",
         zIndex: 9050,
-        cls:'active-win',
+        cls: "active-win",
       },
       loading: false,
       maskDisplay: "none",
       width: "840px",
       height: "480px",
       top: "10px",
+      clearAllNotifyMessage: {
+        clearAllNotifyMessageDisplay: "none",
+        clearAllNotifyMessageCls: "",
+        clearAllNotifyMessageZIndex: 905,
+      },
       thContantArray: [
         {
           id: 0,
-          text:'层级',
-          cls:'',
-          cls1:'down',
+          text: "层级",
+          cls: "",
+          cls1: "down",
         },
         {
           id: 1,
-          text:'类别',
-          cls:'',
-          cls1:'down',
+          text: "类别",
+          cls: "",
+          cls1: "down",
         },
         {
           id: 1,
-          text:'主题',
-          cls:'',
-          cls1:'down',
+          text: "主题",
+          cls: "",
+          cls1: "down",
         },
         {
           id: 1,
-          text:'时间',
-          cls:'',
-          cls1:'down',
+          text: "时间",
+          cls: "",
+          cls1: "down",
         },
       ],
       notifyShowallDetail: {
         detailMessageList: [],
       },
-      windowIsMax: false
+      windowIsMax: false,
     };
   },
   mounted() {
     this.$bus.on("openNotifyShowall", this.openNotifyShowall);
     this.$bus.on("closeNotifyShowall", this.closeNotifyShowall);
-    this.notifyShowAllContant = this.notifyShowAllData
+    this.notifyShowAllContant = this.notifyShowAllData;
   },
   methods: {
     // 打开本页面
     openNotifyShowall(detailMessageList) {
+      this.maskDisplay = "block";
+      this.loading = true;
       this.notifyShowAllContant.display = "block";
-      let detailMessageList1 = JSON.parse(JSON.stringify(detailMessageList));
-      detailMessageList1.forEach((item) => {
-        item.cls1 = "";
-      });
-      this.notifyShowallDetail.detailMessageList = detailMessageList1;
-      this.clickNotifyShowall()
+      setTimeout(() => {
+        this.maskDisplay = "none";
+        this.loading = false;
+        let detailMessageList1 = JSON.parse(JSON.stringify(detailMessageList));
+        detailMessageList1.forEach((item) => {
+          item.cls1 = "";
+        });
+        this.notifyShowallDetail.detailMessageList = detailMessageList1;
+        this.clickNotifyShowall();
+      }, 1000);
     },
     // 关闭本页面
     closeNotifyShowall() {
       this.notifyShowAllContant.display = "none";
-        this.notifyShowAllContant.zIndex = this.defaultZIndex - 10;
+      this.notifyShowAllContant.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
     // 点击本页面
-    clickNotifyShowall(){
-      if(this.notifyShowAllContant.cls ===  "deactive-win"){
+    clickNotifyShowall() {
+      if (this.notifyShowAllContant.cls === "deactive-win") {
         this.notifyShowAllContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
@@ -448,16 +573,16 @@ export default {
     },
     // 排序
     sort(thContantIndex) {
-      this.thContantArray.forEach(item=>{
-        item.cls = ''
-      })
-      if(this.thContantArray[thContantIndex].cls === ''){
-        this.thContantArray[thContantIndex].cls = 'sorting'
+      this.thContantArray.forEach((item) => {
+        item.cls = "";
+      });
+      if (this.thContantArray[thContantIndex].cls === "") {
+        this.thContantArray[thContantIndex].cls = "sorting";
       }
-      if(this.thContantArray[thContantIndex].cls1 === 'down'){
-        this.thContantArray[thContantIndex].cls1 = 'up'
-      }else{
-        this.thContantArray[thContantIndex].cls1 = 'down'
+      if (this.thContantArray[thContantIndex].cls1 === "down") {
+        this.thContantArray[thContantIndex].cls1 = "up";
+      } else {
+        this.thContantArray[thContantIndex].cls1 = "down";
       }
       this.maskDisplay = "block";
       this.loading = true;
@@ -471,28 +596,90 @@ export default {
       this.top = "40px";
       this.width = "100%";
       this.height = "calc(100vh - 40px)";
-      this.windowIsMax = true
+      this.windowIsMax = true;
     },
     // 页面最小化
-    minWindow(){
+    minWindow() {
       this.top = "10px";
       this.width = "840px";
       this.height = "480px";
-      this.windowIsMax = false
+      this.windowIsMax = false;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-    }
+    },
+    // 显示清除全部信息弹出框
+    showClearAllNotifyMessage() {
+      console.log(111);
+      // this.$bus.emit("clearAllNotifyMessage")
+      this.clearAllNotifyMessage.clearAllNotifyMessageDisplay = "block";
+      console.log(
+        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex,
+        this.defaultZIndex
+      );
+      if (
+        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
+        this.defaultZIndex
+      ) {
+        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex =
+          this.defaultZIndex + 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      }
+      this.$bus.emit("maskShowOrHidden", true);
+      window.addEventListener("click", this.WindowClick, false);
+    },
+    // 点击清除全部信息弹出框
+    clickClearAllNotifyMessage() {
+      console.log(
+        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex,
+        this.defaultZIndex
+      );
+      if (
+        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
+        this.defaultZIndex
+      ) {
+        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex =
+          this.defaultZIndex + 10;
+        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      }
+      this.$bus.emit("maskShowOrHidden", true);
+    },
+    // 没关闭清除全部信息弹出框时点击页面
+    WindowClick() {
+      let el = document.querySelector(
+        ".notify-showall-window .v-message-box-window active-win"
+      );
+      window.removeEventListener("click", this.WindowClick, false);
+    },
+    // 取消删除
+    cancelDeleteAllNotifyMessage(e) {
+      e.stopPropagation();
+      console.log("cancel");
+      this.clearAllNotifyMessage.clearAllNotifyMessageDisplay = "none";
+      this.clearAllNotifyMessage.clearAllNotifyMessageZIndex = 9050;
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+      this.$bus.emit("maskShowOrHidden", false);
+    },
+    // 确认删除
+    confirmDeleteAllNotifyMessage(e) {
+      e.stopPropagation();
+      this.$bus.emit("clearAllNotifyMessage")
+      this.notifyShowallDetail.detailMessageList = [];
+      this.cancelDeleteAllNotifyMessage(e);
+    },
   },
-  watch:{
-    // defaultZIndex(newVal){
-    //   if(this.notifyShowAllContant.zIndex < newVal){
-    //     this.notifyShowAllContant.cls = 'deactive-win'
-    //   }else{
-    //     this.notifyShowAllContant.cls = 'active-win'
-    //   }
-    // }
-    notifyShowAllData(){
-      this.notifyShowAllContant = this.notifyShowAllData
-    }
+  watch: {
+    defaultZIndex() {
+      if (
+        this.clearAllNotifyMessage.clearAllNotifyMessageZIndex <
+        this.defaultZIndex
+      ) {
+        this.clearAllNotifyMessage.clearAllNotifyMessageCls = "deactive-win";
+      } else {
+        this.clearAllNotifyMessage.clearAllNotifyMessageCls = "active-win";
+      }
+    },
+    notifyShowAllData() {
+      this.notifyShowAllContant = this.notifyShowAllData;
+    },
   },
   components: {},
   name: "NotifyShowall",

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

@@ -10,11 +10,13 @@
       top: 41px;
     "
     :style="{ display: display }"
-    @click.stop=""
+    @click.capture="clickNotifyTrayPanel"
   >
     <div class="x-panel-header">
       <span class="x-panel-header-text"
-        ><div class="sds-notify-setting-btn" @click.stop="openNotifySetting">&nbsp;</div>
+        ><div class="sds-notify-setting-btn" @click.stop="openNotifySetting">
+          &nbsp;
+        </div>
         <span class="x-panel-header-text">消息</span></span
       >
     </div>
@@ -90,7 +92,11 @@
                       <a
                         class="link-font"
                         @click.stop="
-                          openNotifyDetail(detailMessage, detailMessageIndex,$event)
+                          openNotifyDetail(
+                            detailMessage,
+                            detailMessageIndex,
+                            $event
+                          )
                         "
                         >详情</a
                       >
@@ -401,8 +407,7 @@ export default {
   created() {},
   mounted() {
     this.$bus.on("openNotifyTrayPanel", this.openNotifyTrayPanel);
-      this.$bus.on("clearAllNotifyMessage",this.clearAllNotifyMessage)
-
+    this.$bus.on("clearAllNotifyMessage", this.clearAllNotifyMessage);
   },
   components: {},
   methods: {
@@ -467,7 +472,11 @@ export default {
         this.display = "block";
         e.srcElement.className = e.srcElement.className + " pressed";
         this.$bus.emit("notifyMessageRead");
-        window.addEventListener('click',this.hiddenNotifyAndchangeIconColor,true)
+        window.addEventListener(
+          "click",
+          this.hiddenNotifyAndchangeIconColor,
+          true
+        );
       } else {
         this.display = "none";
         if (e.srcElement.className.includes(" pressed")) {
@@ -478,51 +487,94 @@ 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";
+    },
     // 隐藏本页面并更新页面对应的图标颜色
-    hiddenNotifyAndchangeIconColor(e){
+    hiddenNotifyAndchangeIconColor(e) {
       let el = document.querySelector(".tray-item.notify-button");
-      if(e.srcElement !== el){
+      if (e.srcElement !== el) {
         this.display = "none";
       }
       if (el.className && el.className.includes(" pressed")) {
         el.className = el.className.replace(" pressed", "");
       }
-      window.removeEventListener('click',this.hiddenNotifyAndchangeIconColor,true)
+      window.removeEventListener(
+        "click",
+        this.hiddenNotifyAndchangeIconColor,
+        true
+      );
     },
     //打开详情页面
-    openNotifyDetail(detailMessage, detailMessageIndex,e) {
-      this.hiddenNotifyAndchangeIconColor(e)
-      // openNotifyDetail(detailMessage, detailMessageIndex,e) 
+    openNotifyDetail(detailMessage, detailMessageIndex, e) {
+      this.hiddenNotifyAndchangeIconColor(e);
+      // openNotifyDetail(detailMessage, detailMessageIndex,e)
       this.$bus.emit("openNotifyDetail", detailMessage);
       this.notifyTrayPanelDetail.detailMessageList[detailMessageIndex].cls = "";
     },
     // 打开显示全部页面
     openNotifyShowall(e) {
-      this.hiddenNotifyAndchangeIconColor(e)
+      this.hiddenNotifyAndchangeIconColor(e);
       this.$bus.emit(
         "openNotifyShowall",
         this.notifyTrayPanelDetail.detailMessageList
       );
     },
     // 打开清除全部页面
-    clearAll() {
+    clearAll(e) {
+      if(!this.notifyTrayPanelDetail.detailMessageList.length){
+        return
+      }
       let obj = {
         cls: "confirm-delete-icon",
         title: "",
         text: "所有桌面通知都会被清除。是否确定要继续？",
+        buttonList:[
+          {
+            id:0,
+            text:'取消',
+            cls:'v-btn-cancel',
+            event:this.cancelDeleteAll
+          },
+          {
+            id:1,
+            text:'清除全部',
+            cls:'v-btn-danger',
+            event:this.confirmDeleteAll
+          }
+        ]
       };
       this.$bus.emit("openMessage", obj);
       this.$bus.emit("openMask");
     },
+    // 取消清除所有信息
+    cancelDeleteAll(){
+      this.$bus.emit("closeMessage");
+      this.$bus.emit("closeMask")
+    },
+    // 确定清除所有信息
+    confirmDeleteAll(){
+      this.$bus.emit("clearAllNotifyMessage")
+      this.cancelDeleteAll()
+    },
     // 清除所有信息
-    clearAllNotifyMessage() {
+    clearAllNotifyMessage(){
       this.notifyTrayPanelDetail.detailMessageList = [];
     },
     // 打开设置页面
-    openNotifySetting(e){
-      this.hiddenNotifyAndchangeIconColor(e)
-      this.$bus.emit('openNotifySetting')
-    }
+    openNotifySetting(e) {
+      this.hiddenNotifyAndchangeIconColor(e);
+      this.$bus.emit("openNotifySetting");
+    },
+    
   },
   name: "NotifyTrayPanel",
 };

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

@@ -6,7 +6,6 @@
       sds-user-about-window
       layout-window-modal
       v-window
-      active-win
     "
     syno-id="about-window"
     style="
@@ -18,6 +17,7 @@
       transform: translate(-50%, -50%);
     "
     :style="{ visibility: visibility ,zIndex:zIndex}"
+    :class="cls"
   >
     <div class="v-window-body">
       <div class="v-trap-focus-indicator"></div>
@@ -65,24 +65,27 @@ export default {
   props:['defaultZIndex'],
   mounted() {
     this.$bus.on("openUserAbout", this.openUserAbout);
-    this.zIndex = this.defaultZIndex + 2
+    this.zIndex = this.defaultZIndex + 11
   },
   data() {
     return {
       visibility: "hidden",
       zIndex:0,
+      cls:''
     };
   },
   methods: {
     //   打开本页面
     openUserAbout() {
-      this.zIndex = this.defaultZIndex + 2
+      this.zIndex = this.defaultZIndex + 11
       this.visibility = "visible";
+      this.cls = 'active-win'
       this.$bus.emit("openMask",'sds-user-about-mask')
     },
     //   关闭本页面
     closeUserAbout() {
       this.visibility = "hidden";
+      this.cls = 'deactive-win'
       this.$bus.emit("closeMask")
     },
   },

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

@@ -5,11 +5,12 @@
     class="taskbar-menu user-menu v-menu"
     style="height: auto; width: 200px; right: 20px; top: 41px; z-index: 15000"
     :style="{display: display}"
+    @click="clickUserTrayPanel"
   >
     <div class="v-trap-focus-indicator"></div>
     <div class="v-trap-focus-body">
       <div class="taskbar-title">{{userTrayPanelDetail.title}}</div>
-      <div class="v-menu-item" @click="openUserSetting">
+      <div class="v-menu-item" @click.stop="openUserSetting">
         <span class="menu-icon setting"></span>
         个人设置
       </div>
@@ -18,12 +19,12 @@
         <span class="menu-icon reboot"></span>
         重新启动
       </div>
-      <div class="v-menu-item">
+      <div class="v-menu-item" @click.stop="openUserPoweroff">
         <span class="menu-icon poweroff"></span>
         关机
       </div>
       <div class="v-menu-item-divider"></div>
-      <div class="v-menu-item" @click="openUserAbout">
+      <div class="v-menu-item" @click.stop="openUserAbout">
         <span class="menu-icon about"></span>
         关于
       </div>
@@ -68,6 +69,13 @@ 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)
+    },
     // 隐藏本页面并更新页面对应的图标颜色
     hiddenUserAndchangeIconColor(e){
       let el = document.querySelector(".tray-item.user-button");
@@ -80,12 +88,50 @@ export default {
       window.removeEventListener('click',this.hiddenUserAndchangeIconColor,true)
     },
     // 打开个人设置页面
-    openUserSetting(){
+    openUserSetting(e){
+      this.hiddenUserAndchangeIconColor(e)
       this.$bus.emit('openUserSetting')
     },
+    // 打开关机页面
+    openUserPoweroff(e){
+      this.hiddenUserAndchangeIconColor(e)
+      let obj = {
+        cls: "",
+        title: "",
+        text: "您确定要关机吗？",
+        buttonList:[
+          {
+            id:0,
+            text:'取消',
+            cls:'v-btn-cancel',
+            event:this.cancelPoweroff
+          },
+          {
+            id:1,
+            text:'确定',
+            cls:'v-btn-main',
+            event:this.confirmPoweroff
+          }
+        ]
+      };
+      this.$bus.emit("openMessage", obj);
+      this.$bus.emit("openMask");
+
+    },
     // 打开关于页面
-    openUserAbout(){
+    openUserAbout(e){
+      this.hiddenUserAndchangeIconColor(e)
       this.$bus.emit('openUserAbout')
+    },
+    // 取消关机
+    cancelPoweroff(){
+      this.$bus.emit("closeMessage");
+      this.$bus.emit("closeMask")
+    },
+    // 确认关机
+    confirmPoweroff(){
+      this.$bus.emit("closeMessage");
+      this.$bus.emit("closeMask")
     }
   },
   components: {},

src/component/Container/Desktop/index.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- 桌面 -->
-  <div id="sds-desktop" :style="{ display: display }">
+  <div
+    id="sds-desktop"
+    :style="{ display: display }"
+  >
     <Menu></Menu>
     <Shortcut :defaultZIndex="defaultZIndex"></Shortcut>
     <FixWindow

src/component/Container/DesktopAppView/index.vue

@@ -93,14 +93,15 @@ export default {
     // 显示appView页面
     showAppView() {
       this.display = "block";
-      this.$bus.emit("hiddenOrShowOtherWindow", true);
-      window.addEventListener("click", this.WindowClick, true);
+      this.$bus.emit("hiddenOrShowOtherWindow", false);
+      window.addEventListener("click", this.WindowClick, false);
       // this.$bus.emit("hiddenDialogWindow");
       // this.$bus.emit("closeUserAbout");
 
     },
     // 搜索框聚焦
     searchInputFocus(e) {
+      console.log(e.srcElement.parentElement.className)
       if (
         !e.srcElement.parentElement.className.includes("search-field-focused")
       ) {

src/component/Container/Mask/index.vue

@@ -10,7 +10,7 @@
 
 <script>
 export default {
-  props:['defaultZIndex'],
+  props:['defaultZIndex','maskIsShow','maskShowOrHidden'],
   data() {
     return {
       visibility: "hidden",
@@ -21,7 +21,7 @@ export default {
   mounted() {
     this.$bus.on("openMask", this.openMask);
     this.$bus.on("closeMask", this.closeMask);
-    this.zIndex = this.defaultZIndex + 1
+    this.zIndex = this.defaultZIndex + 10
   },
   methods: {
     // 打开弹出层
@@ -32,11 +32,18 @@ export default {
       } else {
         this.cls = "";
       }
-      this.zIndex = this.defaultZIndex + 1
+      this.zIndex = this.defaultZIndex + 10
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+      // this.maskShowOrHidden(true)
+      this.$bus.emit('maskShowOrHidden',true)
     },
     // 关闭弹出层
     closeMask() {
       this.visibility = "hidden";
+      this.zIndex = this.defaultZIndex - 10
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+      // this.maskShowOrHidden(false)
+      this.$bus.emit('maskShowOrHidden',false)
     },
   },
   components: {},

src/component/Container/index.vue

@@ -15,7 +15,7 @@
       :appViewData="appViewData"
     ></DesktopAppView>
     <!-- <UserAbout :defaultZIndex="defaultZIndex"></UserAbout> -->
-    <Mask :defaultZIndex="defaultZIndex"></Mask>
+    <Mask :defaultZIndex="defaultZIndex" :maskIsShow="maskIsShow"></Mask>
   </div>
 </template>
 
@@ -30,6 +30,7 @@ export default {
   data() {
     return {
       defaultZIndex: 9050,
+      maskIsShow:false,
       appViewData: [
         {
           id: 0,
@@ -486,7 +487,7 @@ export default {
         },
       ],
       userSettingData: {
-        spacialCls: "openUserSetting",
+        spacialCls: "UserSetting",
         id: 1111,
         display: "none",
         width: "850px",
@@ -501,7 +502,7 @@ export default {
       fixWindowData: {
         zIndex: 9050,
         display: "block",
-        cls: "deactive-win",
+        cls: "active-win",
       },
       notifyTrayPanelDetailData: {
         zIndex: 9050,
@@ -522,6 +523,7 @@ export default {
   },
   mounted() {
     this.$bus.on("changeDefaultZIndex", this.changeDefaultZIndex);
+    this.$bus.on('maskShowOrHidden',this.maskShowOrHidden)
   },
   methods: {
     // 改变公共zIndex
@@ -539,16 +541,21 @@ export default {
         return x < y ? -1 : x > y ? 1 : 0;
       });
     },
+    // 遮罩层的显示与隐藏
+    maskShowOrHidden(bol){
+      this.maskIsShow = bol
+    }
   },
   watch: {
     defaultZIndex() {
+      console.log(this.maskIsShow)
       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 =
+      let userSettingZIndexMax =
         this.userSettingData.zIndex >= this.defaultZIndex &&
         this.userSettingData.display === "block";
       let notifyTrayPanelDetailZIndexMax =
@@ -563,7 +570,7 @@ export default {
       console.log(
         appViewIndex,
         fixWindowZIndexIsMax,
-        openUserSettingZIndexMax,
+        userSettingZIndexMax,
         notifyTrayPanelDetailZIndexMax,
         notifySettingZIndexMax,
         notifyShowAllZIndexMax
@@ -607,7 +614,7 @@ export default {
             item.cls = "deactive-win";
           }
         });
-      } else if (openUserSettingZIndexMax) {
+      } else if (userSettingZIndexMax) {
         this.userSettingData.cls = "active-win";
         let obj = {
           spacialCls: this.userSettingData.spacialCls,
@@ -649,6 +656,7 @@ export default {
           }
         });
       } else if (notifyShowAllZIndexMax) {
+        console.log(1121)
         this.notifyShowAllData.cls = "active-win";
         this.notifyTrayPanelDetailData.cls = "deactive-win";
         this.userSettingData.cls = "deactive-win";
@@ -663,7 +671,7 @@ export default {
       if (
         appViewIndex === -1 &&
         !fixWindowZIndexIsMax &&
-        !openUserSettingZIndexMax &&
+        !userSettingZIndexMax &&
         !notifyTrayPanelDetailZIndexMax &&
         !notifySettingZIndexMax &&
         !notifyShowAllZIndexMax
@@ -686,7 +694,7 @@ export default {
             ? this.fixWindowData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
             : true);
-        let openUserSettingZIndexMax1 =
+        let userSettingZIndexMax1 =
           this.userSettingData.display === "block" &&
           (this.userSettingData.zIndex >= this.fixWindowData.zIndex ||
             this.fixWindowData.display === "none") &&
@@ -708,20 +716,35 @@ export default {
             ? this.notifyTrayPanelDetailData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
             : true);
-        let notifySettingZIndexMax1 = 
-        this.notifySettingData.display === "block" &&
-          (this.notifySettingData.zIndex >=
-            this.userSettingData.zIndex ||
+
+        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") &&
+          (this.notifySettingData.zIndex >= this.notifyShowAllData.zIndex ||
+            this.notifyShowAllData.display === "none") &&
           (appViewData.length
             ? this.notifySettingData.zIndex >=
               appViewData[appViewData.length - 1].zIndex
-            : true);    
+            : true);
+        let notifyShowAllZIndexMax1 =
+          this.notifyShowAllData.display === "block" &&
+          (this.notifyShowAllData.zIndex >= this.userSettingData.zIndex ||
+            this.userSettingData.display === "none") &&
+          (this.notifyShowAllData.zIndex >= this.fixWindowData.zIndex ||
+            this.fixWindowData.display === "none") &&
+          (this.notifyShowAllData.zIndex >=
+            this.notifyTrayPanelDetailData.zIndex ||
+            this.notifyTrayPanelDetailData.display === "none") &&
+          (appViewData.length
+            ? this.notifyShowAllData.zIndex >=
+              appViewData[appViewData.length - 1].zIndex
+            : true);
         let appViewIsMax =
           appViewData.length &&
           (appViewData[appViewData.length - 1].zIndex >
@@ -735,14 +758,16 @@ export default {
             this.notifyTrayPanelDetailData.display === "none");
         console.log(
           fixWindowZIndexIsMax1,
-          openUserSettingZIndexMax1,
+          userSettingZIndexMax1,
           notifyTrayPanelDetailZIndexMax1,
+          notifySettingZIndexMax1,
+          notifyShowAllZIndexMax1,
           appViewIsMax
         );
         if (fixWindowZIndexIsMax1) {
           console.log("1111w");
           this.fixWindowData.cls = "active-win";
-        } else if (openUserSettingZIndexMax1) {
+        } else if (userSettingZIndexMax1) {
           this.userSettingData.cls = "active-win";
           let obj = {
             spacialCls: this.userSettingData.spacialCls,
@@ -754,7 +779,9 @@ export default {
           this.$bus.emit("clickShortcutItem", obj);
         } else if (notifyTrayPanelDetailZIndexMax1) {
           this.notifyTrayPanelDetailData.cls = "active-win";
-        }else if(notifySettingZIndexMax1){
+        } else if (notifySettingZIndexMax1) {
+          this.notifySettingData.cls = "active-win";
+        } else if (notifyShowAllZIndexMax1) {
           this.notifyShowAllData.cls = "active-win";
         } else if (appViewIsMax) {
           let index = this.appViewData.findIndex((item) => {
@@ -778,6 +805,20 @@ export default {
           }
         }
       }
+      if(this.maskIsShow){
+        console.log(111)
+        this.appViewData.forEach((item) => {
+          if (item.cls === "active-win") {
+            item.cls = "deactive-win";
+          }
+        });
+        this.fixWindowData.cls = "deactive-win";
+        this.notifySettingData.cls = "deactive-win";
+        this.notifyTrayPanelDetailData.cls = "deactive-win";
+        this.notifyShowAllData.cls = "deactive-win";
+        this.userSettingData.cls = "deactive-win";
+        console.log(this.fixWindowData)
+      }
     },
   },
   components: {