逻辑完善及页面动态效果

public/static/css/style/style.css

@@ -316,9 +316,11 @@ body,
 .menu.sds-desktop{
     position: absolute;
     width: 100px;
+    height: 100%;
     z-index: 6;
     margin: auto 0;
-    display: flex;
+    /* display: flex; */
+    position: relative;
     align-items: center;
 }
 
@@ -328,9 +330,13 @@ body,
 
 .menu.sds-desktop ul{
     /* height: 100vh; */
+    position: absolute;
     overflow: scroll;
     text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
 }
+
 .menu.sds-desktop ul::-webkit-scrollbar{
     display: none;
 }
@@ -503,9 +509,10 @@ ul.sds-desktop-shortcut {
 }
 
 .v-widget-window {
+    opacity: 0;
     background: rgba(40, 50, 60, 0.85);
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
-    transition: top ease-in 0.2s, bottom ease-in 0.2s, left ease-in 0.2s, left ease-in 0.2s;
+    transition: top ease-in 0.2s, bottom ease-in 0.2s, left ease-in 0.2s, right ease-in 0.2s, opacity ease-in 0.2s;
 }
 
 .v-widget-window.move{
@@ -2376,7 +2383,6 @@ ul.sds-desktop-shortcut {
     height: 48px;
     box-shadow: 0px 2px 20px rgba(0,0,0,0.4);
     border-radius: 7px;
-    border: 1px solid #BCC4CC;
     overflow: visible;
 }
 
@@ -2586,6 +2592,15 @@ ul.sds-desktop-shortcut {
     box-sizing: border-box;
 }
 
+.x-window-maximized .x-window-draggable,.x-window-maximized .x-window-draggable .x-window-header-text {
+    cursor: default;
+}
+
+.x-window-maximized .v-window-draggable .draggable.v-window-header-wrapper,
+.x-window-maximized.v-window .draggable.v-window-header-wrapper{
+    cursor: default;
+}
+
 /* 遮罩层 */
 .ext-el-mask-msg{
     width: calc(100vw);
@@ -2655,13 +2670,10 @@ ul.sds-desktop-shortcut {
 
 }
 
-.notify-showall-window .v-message-box-window.no-shadow{
+.notifyShowall .v-message-box-window.no-shadow{
     animation: notifyShowAllClearAllAnimate .35s linear;
 }
 
-/* .notify-showall-window .no-shadow{
-    box-shadow: none ;
-}  */
 /* userAbout消息弹出框 */
 .sds-user-about-mask {
     background-color: #000000;

src/App.vue

@@ -13,21 +13,23 @@ import { getCurrentInstance } from "vue";
 import mitt from "mitt";
 export default {
   data() {
-    return {}
+    return {};
   },
-    
+
   beforeCreate() {
     const ins = getCurrentInstance();
     ins.appContext.config.globalProperties.$bus = mitt();
   },
   components: {
-    Container
+    Container,
   },
 };
 </script>
 
 <style lang="css">
-  .contain{
-    height:100%
-  }
+.contain {
+  height: 100%;
+}
+
+
 </style>

src/common/common.js

@@ -1,3 +1,21 @@
-export function moveWindow(e,el) {
-    
+// 移动窗口位置
+export function moveWindow(e,el,firstLayerX,firstLayerY,firstScrollX,firstScrollY) {
+    // X轴
+    let moveX = e.pageX - firstLayerX;
+    if (moveX > firstScrollX - el.offsetWidth) {
+      moveX = firstScrollX - el.offsetWidth;
+    }
+    // Y轴
+    if (moveX < 0) {
+      moveX = 0;
+    }
+    let moveY = e.pageY - firstLayerY;
+    if (moveY > firstScrollY - el.offsetHeight) {
+      moveY = firstScrollY - el.offsetHeight;
+    }
+    if (moveY < 0) {
+      moveY = 0;
+    }
+    let obj = {moveX,moveY}
+    return obj
 }

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

@@ -21,7 +21,7 @@
   >
     <div
       class="v-window-header-wrapper draggable"
-      @mousedown="mousedownWidgetHeader"
+      @mousedown.stop="mousedownWidgetHeader"
     >
       <div class="v-widget-header">
         <div class="v-widget-header-left">
@@ -70,12 +70,7 @@
           class="v-trap-focus-indicator"
         ></div>
         <div class="v-widget-items-wrapper">
-          <div
-            class="v-ps show ps--active-y"
-            @scroll="scrollList"
-            style="overflow: scroll"
-          >
-            <!--  <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
+          <div class="v-ps show ps--active-y">
             <div class="v-widget-list">
               <RunningState></RunningState>
               <ResourceMonitor></ResourceMonitor>
@@ -87,7 +82,6 @@
               <Copy></Copy>
 
               <!-- 当打开窗口个数为零时显示 -->
-              <!-- <div class="v-widget-list-empty" :style="{display: selectedNum ? 'none':'flex'}"> -->
               <div class="v-widget-list-empty" v-show="!selectedNum">
                 <div class="v-widget-list-empty-img"></div>
                 <div class="v-widget-list-empty-content">
@@ -102,15 +96,6 @@
                 style="left: 0px; width: 0px"
               ></div>
             </div>
-            <div class="ps__rail-y" style="top: 0px; right: 0px; height: 424px">
-              <div
-                class="ps__thumb-y"
-                tabindex="0"
-                style="top: 0px"
-                :style="{ height: thumbYHeight, display: thumbYDisplay }"
-                @mousedown="mousedownProgress"
-              ></div>
-            </div>
           </div>
         </div>
       </div>
@@ -142,7 +127,7 @@ import PortalSelectDialogWindow from "../PortalSelectDialogWindow";
 // 弹出位置选择框
 import PortaSelectPosition from "../PortaSelectPosition";
 export default {
-  props: ["defaultZIndex", "fixWindowData"],
+  props: ["defaultZIndex", "fixWindowData", "maskIsShow"],
   data() {
     return {
       fixWindowMessage: {
@@ -153,26 +138,16 @@ export default {
       selectedNum: 2,
       display: "block",
       top: 0,
-      bottom: '10px',
+      bottom: "10px",
       right: 0,
-      left: '220px',
-      // widgetZindexIsMax: false,
-      progrecssFirstClick: {
-        lastY: 0,
-        clickY: 0,
-        clientY: 0,
-        moveY: 0,
-        thumbStyletop: 0,
-      },
+      left: "220px",
+      fixWindowisMaxZindex: false,
       widgetFirstClick: {
         layerX: 0,
         layerY: 0,
         screenX: 0,
         screenY: 0,
       },
-      widgetListIsBottom: false,
-      thumbYHeight: "424px",
-      thumbYDisplay: "none",
       portalDetail: {
         display: "none",
         detailMessageList: [
@@ -278,120 +253,40 @@ export default {
   },
   mounted() {
     this.$bus.on("showOrHiddenWidgetItem", this.showOrHiddenWidgetItem);
-    this.$bus.on("changeThumbHeight", this.changeThumbHeight);
     this.$bus.on("showOrHiddenWidget", this.showOrHiddenWidget);
     this.$bus.on("changeWidgetPosition", this.changeWidgetPosition);
-    this.$bus.on('closeWidgetItem',this.closeWidgetItem)
+    this.$bus.on("closeWidgetItem", this.closeWidgetItem);
+    this.$bus.on("countSelectedMenuItemNum",this.countSelectedMenuItemNum)
     this.fixWindowMessage = this.fixWindowData;
-    let el = document.querySelector(".v-widget-window .ps__thumb-y");
     let el1 = document.querySelector(
       ".v-widget-window .v-window-header-wrapper"
     );
-    el.addEventListener("mouseup", this.mouseupProgress);
     el1.addEventListener("mouseup", this.mouseupWidgetHeader);
-    let el2 = document.querySelector(".v-widget-window .v-widget-list");
-    let el3 = document.querySelector(".v-widget-window .ps__rail-y");
     let el4 = document.querySelector(".v-widget-window");
-    if (el2.offsetHeight > el3.offsetHeight) {
-      this.top = 0;
-      this.bottom = 0;
-      this.thumbYDisplay = "block";
-      this.thumbYHeight = "calc((100vh - 52px) / 2)";
-    }
-    setTimeout(()=>{
-      this.left = 0 
-      this.right = '10px'
-    },400)
+    setTimeout(() => {
+      this.left = 0;
+      this.right = "10px";
+      el4.style.opacity = 1;
+    }, 400);
     window.addEventListener("resize", (e) => {
-      if (el2.offsetHeight > el3.offsetHeight) {
-        this.thumbYDisplay = "block";
-        this.thumbYHeight = "calc((100vh - 52px) / 2)";
-      } else {
-        this.thumbYDisplay = "none";
-      }
-      let left = document.documentElement.clientWidth - el4.offsetWidth
-      if(left >= 0 && left < el4.offsetWidth){
-        this.left = left + 'px'
-      }else if(left < 0) {
-        this.left = 0
+      let left = document.documentElement.clientWidth - el4.offsetWidth;
+      if (left >= 0 && left < el4.offsetWidth) {
+        this.left = left + "px";
+      } else if (left < 0) {
+        this.left = 0;
       }
     });
   },
   methods: {
     //点击固定窗口
     clickFixWindow() {
-      if (this.fixWindowMessage.cls !== "active-win") {
+      if (
+        this.fixWindowMessage.cls !== "active-win" &&
+        ! this.fixWindowisMaxZindex
+      ) {
         this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-        this.$bus.emit("fixWindowZIndexMax", true);
-      }
-    },
-    //点击进度条
-    mousedownProgress(e) {
-      let el = document.querySelector(".v-widget-window .ps__thumb-y");
-      let el1 = document.querySelector(".v-widget-window");
-      el.addEventListener("mousemove", this.moveProgress);
-      if (el.style.top && el.style.top.includes("px")) {
-        let top = parseInt(el.style.top.replace("px", ""));
-        this.progrecssFirstClick.thumbStyletop = top;
-      }
-      this.progrecssFirstClick.lastY = el1.offsetTop + 31;
-      this.progrecssFirstClick.clickY = e.offsetY;
-    },
-    //移动进度条
-    moveProgress(e) {
-      let el = document.querySelector(".v-widget-window .ps__thumb-y");
-      let el1 = document.querySelector(".v-widget-window .ps__rail-y");
-      let el2 = document.querySelector(".v-widget-window .v-widget-list");
-      let moveY;
-      if (e.clientY >= this.progrecssFirstClick.clientY) {
-        moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
-        if (this.progrecssFirstClick.thumbStyletop) {
-          moveY = this.progrecssFirstClick.thumbStyletop + 1;
-          this.progrecssFirstClick.thumbStyletop = 0;
-        }
-      } else {
-        moveY = this.moveY + (e.clientY - this.progrecssFirstClick.clientY);
-        if (this.progrecssFirstClick.thumbStyletop) {
-          moveY = this.progrecssFirstClick.thumbStyletop + 1;
-          this.progrecssFirstClick.thumbStyletop = 0;
-        }
-      }
-      if (moveY < 0) {
-        moveY = 0;
-      } else if (moveY > el1.offsetHeight - el.offsetHeight) {
-        moveY = el1.offsetHeight - el.offsetHeight;
-        this.widgetListIsBottom = true;
       }
-      let moveY2 =
-        -(
-          (el2.offsetHeight - el1.offsetHeight) /
-          (el1.offsetHeight - el.offsetHeight)
-        ) * moveY;
-      console.log(moveY)
-      el.style.top = moveY + "px";
-      el2.style.top = moveY2 + "px";
-      el.addEventListener("mouseup", this.mouseupProgress);
-      el1.addEventListener("mouseleave", this.mouseupProgress);
-      this.progrecssFirstClick.clientY = e.clientY;
-      this.moveY = moveY;
-    },
-    // 进度条鼠标抬起/离开
-    mouseupProgress() {
-      let el = document.querySelector(".v-widget-window .ps__thumb-y");
-      el.removeEventListener("mousemove", this.moveProgress);
-    },
-    // 滚动窗口列表
-    scrollList(e) {
-      let el = document.querySelector(".v-widget-window .ps__thumb-y");
-      let el1 = document.querySelector(".v-widget-window .ps__rail-y");
-      let el2 = document.querySelector(".v-widget-window .ps--active-y");
-      let moveY =
-        ((el1.offsetHeight - el.offsetHeight) /
-          (e.target.scrollHeight - el2.offsetHeight)) *
-        e.target.scrollTop;
-      el.style.top = moveY + e.target.scrollTop + "px";
-      console.log(moveY,el.style.top)
     },
     // 点击勾选小窗口的加号
     selectWidgetItem() {
@@ -406,32 +301,10 @@ export default {
         }
       });
     },
-    // 跟随可视小窗口的个数改变进度条高度
-    changeThumbHeight(selectedNum) {
-      let el1 = document.querySelector(".v-widget-window .v-widget-list");
-      let el2 = document.querySelector(".v-widget-window .ps__rail-y");
-      this.$nextTick(()=>{
-        this.$nextTick(()=>{
-        if (el1.offsetHeight > el2.offsetHeight) {
-        if (selectedNum >= 6) {
-          selectedNum = 6;
-        }
-        this.thumbYDisplay = "block";
-        if(el2.offsetHeight > (7 - selectedNum) * 70){
-          this.thumbYHeight = (7 - selectedNum) * 70 + "px";
-        }else{
-          this.thumbYHeight = "calc((100vh - 52px) / 2)";
-        }
-      } else {
-        this.thumbYDisplay = "none";
-      }
-        this.selectedNum = selectedNum;
-        })
-      })
-      
-    },
     //点击固定窗口头部
     mousedownWidgetHeader(e) {
+      document.documentElement.click();
+      this.clickFixWindow();
       let el = document.querySelector(
         ".v-widget-window .v-window-header-wrapper"
       );
@@ -466,15 +339,21 @@ export default {
       if (moveY < 0) {
         moveY = 0;
       }
-
       this.left = moveX + "px";
       this.top = moveY + "px";
       if (!el1.className.includes(" move")) {
         el1.className = el1.className + " move";
-      } 
+      }
       if (!el1.className.includes(" ghost")) {
         el1.className = el1.className + " ghost";
       }
+      this.portalDetail1.detailMessageList.forEach(item=>{
+        if(item.cls.includes(' v-menu-item-select-selected selected')){
+          item.cls = item.cls.replace(' v-menu-item-select-selected selected')
+        }else if (item.cls.includes('v-menu-item-select-selected selected')){
+          item.cls = item.cls.replace('v-menu-item-select-selected selected')
+        }
+      })
     },
     //鼠标抬起固定窗口头部停止移动
     mouseupWidgetHeader() {
@@ -485,7 +364,6 @@ export default {
       let el2 = document.querySelector(".v-widget-window");
       document.removeEventListener("mousemove", this.mousemoveWidgetHeader);
       document.removeEventListener("mouseup", this.mouseupWidgetHeader);
-      // document.addEventListener("mouseleave", this.mouseupWidgetHeader);
       el1.style.display = "flex";
       el2.className = el2.className.replace(" move", "");
       el2.className = el2.className.replace(" ghost", "");
@@ -502,20 +380,24 @@ export default {
             ""
           );
         }
-        if (
-          this.fixWindowMessage.zIndex >= this.defaultZIndex &&
-          this.fixWindowMessage.cls === "active-win"
-        ) {
-          this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
-          this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-          this.$bus.emit("fixWindowZIndexMax", false);
+        console.log(this.fixWindowisMaxZindex,111)
+        if (this.fixWindowMessage.zIndex >= this.defaultZIndex) {
+          if (
+            this.fixWindowMessage.zIndex > 9050 && this.fixWindowMessage.cls === 'active-win'
+          ) {
+            this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
+            this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+          }
         }
         this.fixWindowMessage.display = "none";
       } else {
         this.fixWindowMessage.display = "block";
-        this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-        this.$bus.emit("fixWindowZIndexMax", true);
+        if (
+          this.fixWindowMessage.cls === "deactive-win" && ! this.fixWindowisMaxZindex
+        ) {
+          this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
+          this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
+        }
         if (!e.srcElement.className.includes(" pressed")) {
           e.srcElement.className = e.srcElement.className + " pressed";
         }
@@ -526,7 +408,6 @@ export default {
       this.fixWindowMessage.display = "none";
       this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-      this.$bus.emit("fixWindowZIndexMax", false);
       let el = document.querySelector(".tray-item.widget-button");
       if (el.className && el.className.includes(" pressed")) {
         el.className = el.className.replace(" pressed", "");
@@ -536,6 +417,10 @@ export default {
     selectWidgetPosition() {
       this.$bus.emit("showOrHiddenSelectWidgetPosition", this.portalDetail1);
     },
+    // 统计固定弹窗子项的显示个数
+    countSelectedMenuItemNum(num){
+      this.selectedNum = num
+    },
     //改变固定弹出框的位置
     changeWidgetPosition(obj) {
       this.portalDetail1.detailMessageList = obj.detailMessageList;
@@ -556,23 +441,28 @@ export default {
       );
       if (el.className.includes("active")) {
         el.className = el.className.replace(" active", "");
-        this.$bus.emit("fixWindowZIndexMax", false);
-        this.fixWindowMessage.zIndex = this.defaultZIndex - 10;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+        this.fixWindowisMaxZindex = false;
+        this.$bus.emit("fixWindowZIndexFix",false)
       } else {
         el.className = el.className + " active";
-        this.fixWindowMessage.zIndex = 999999999;
+        this.fixWindowisMaxZindex = true;
+        this.$bus.emit("fixWindowZIndexFix",true)
+      }
+      if (this.fixWindowMessage.cls === "deactive-win") {
+        this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-        this.$bus.emit("fixWindowZIndexMax", true);
       }
     },
-     // 关闭widgetItem
-    closeWidgetItem(title){
-      this.portalDetail.detailMessageList.forEach(item=>{
-        if(item.title === title){
-          item.cls = item.cls.replace('v-menu-item-select-selected selected','')
+    // 关闭widgetItem
+    closeWidgetItem(title) {
+      this.portalDetail.detailMessageList.forEach((item) => {
+        if (item.title === title) {
+          item.cls = item.cls.replace(
+            "v-menu-item-select-selected selected",
+            ""
+          );
         }
-      })
+      });
     },
     //节流函数
     throttle(fn, time, e) {
@@ -586,13 +476,41 @@ export default {
       };
     },
   },
+  watch: {
+    defaultZIndex() {
+      console.log(this.fixWindowisMaxZindex,this.maskIsShow)
+      if (this.fixWindowisMaxZindex && !this.maskIsShow) {
+        this.fixWindowMessage.zIndex = this.defaultZIndex + 10;
+        console.log(this.fixWindowMessage.zIndex)
+      }
+    },
+  },
   beforeDestroy() {},
   name: "FixWindow",
 };
 </script>
 <style scoped lang="css">
-.v-widget-window .v-ps.show::-webkit-scrollbar {
-  display: none;
+.v-widget-window .v-ps {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.v-widget-window .v-ps::-webkit-scrollbar {
+  width: 9px;
+}
+
+.v-widget-window .v-ps::-webkit-scrollbar-track {
+  border-radius: 3px;
+  background-color: rgba(40, 50, 60, 0.85);
+}
+
+.v-widget-window .v-ps::-webkit-scrollbar-thumb {
+  border-radius: 0.625rem;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.v-widget-window .v-ps:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.7);
 }
 .v-ps {
   height: 424px;

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

@@ -1,7 +1,7 @@
 <template>
   <!-- 打开的菜单图标显示区 -->
   <div class="menu sds-desktop">
-    <ul class="menushow" v-if="menuList.length" :style="{height:height + 'px',marginTop:marginTop + 'px'}">
+    <ul class="menushow" v-if="menuList.length" :style="{height:height + 'px'}">
       <li :class="menu.spacialCls" v-for="(menu,menuIndex) in menuList" :key="menu.index" :style="{background:menu.backgroundColor}"
       @click="clickMenuItem(menu.id,menuIndex)">
         <div :class="menu.spacialCls" :style="{backgroundImage:`url(${menu.imgUrl})`}"></div>
@@ -26,6 +26,10 @@ export default {
     this.$bus.on("changeDialogWindow",this.changeDialogWindow)
     this.$bus.on('closeDialogWindow',this.closeDialogWindow)
     this.$bus.on('showZindexMaxMenuItem',this.showZindexMaxMenuItem)
+    window.addEventListener('resize',()=>{
+      this.height = document.documentElement.scrollHeight - (document.documentElement.scrollHeight % 70)
+      this.marginTop = ((document.documentElement.scrollHeight - this.height) / 2 )
+    })
   },
   methods:{
     // 点击大图标打开小图标
@@ -121,9 +125,6 @@ export default {
         return item.id === id
       })
     },
-    // 显示zindex最大的menuItem
-    showZindexMaxMenuItem(){
-    }
   },
   beforeDestroy() {
     this.$bus.off('clickShortcutItem',this.clickShortcutItem)

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

@@ -9,17 +9,18 @@
       "
       style="
         position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 626px;
       "
-      :style="{ display: notifySettingContant.display,zIndex:notifySettingContant.zIndex}"
+      :style="{ display: notifySettingContant.display,zIndex:notifySettingContant.zIndex,
+      left:notifySettingContant.left,
+      top:notifySettingContant.top,
+      width:notifySettingContant.width
+      }"
       :class="notifySettingContant.cls"
       @click="clickNotifySetting"
     >
       <div class="x-dlg-focus"></div>
-      <div class="x-window-tl">
+      <div class="x-window-tl"
+      @mousedown.stop="mousedownNotifyTrayPanelDetail">
         <div class="x-window-tr">
           <div class="x-window-tc">
             <div class="x-window-header x-panel-icon x-window-draggable">
@@ -837,6 +838,7 @@
 </template>
 
 <script>
+import {moveWindow} from '../../../../common/common'
 export default {
   props: ["defaultZIndex","notifySettingData"],
   mounted() {
@@ -845,10 +847,19 @@ export default {
   },
   data() {
     return {
+      windowFirstClick:{
+        layerX:0,
+        layerY:0,
+        screenX:0,
+        screenY:0,
+      },
       notifySettingContant:{
         display: "none",
         zIndex: 9050,
         cls: 'active-win',
+        top: 0,
+        left: 0,
+        width:'626px'
       },
       notifySettingDetail: {
         tableHeaderContant1: {
@@ -999,6 +1010,8 @@ export default {
         this.notifySettingContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
+      let left = (document.documentElement.clientWidth - parseInt(this.notifySettingContant.width.replace('px',''))) / 2
+      this.notifySettingContant.left = left + 'px'
     },
     // 关闭本页面
     closeNotifySetting() {
@@ -1102,11 +1115,42 @@ export default {
         this.notifySettingDetail.tableHeaderContant2.cls = "syno-ux-cb-checked";
       }
     },
-  },
-  watch:{
-    notifySettingData(){
-      this.notifySettingContant = this.notifySettingData
-    }
+    // 鼠标按下该页面头部
+    mousedownNotifyTrayPanelDetail(e){
+      document.documentElement.click()
+      this.clickNotifySetting()
+      this.windowFirstClick.layerX = e.layerX;
+      this.windowFirstClick.screenX = document.documentElement.clientWidth;
+      this.windowFirstClick.layerY = e.layerY;
+      this.windowFirstClick.screenY = document.documentElement.clientHeight;
+      document.addEventListener(
+        "mousemove",
+        this.moveWindowPosition
+      );
+      document.addEventListener(
+        "mouseup",
+        this.upWindowPosition
+      );
+    },
+    // 移动弹出框窗口位置
+    moveWindowPosition(e) {
+      let window = document.querySelector('.sds-notify-setting-dialog.sds-window-v5')
+      let obj = moveWindow(e,window,this.windowFirstClick.layerX,this.windowFirstClick.layerY,this.windowFirstClick.screenX,this.windowFirstClick.screenY)
+      this.notifySettingContant.left = obj.moveX +'px'
+      this.notifySettingContant.top = obj.moveY +'px'
+      if (!window.className.includes(' x-panel-ghost')){
+        window.className = window.className + ' x-panel-ghost'
+      }
+    },
+    // 鼠标松开
+    upWindowPosition(e){
+      let window = document.querySelector('.sds-notify-setting-dialog.sds-window-v5')
+      if (window.className.includes(' x-panel-ghost')){
+        window.className = window.className.replace(' x-panel-ghost','')
+      }
+      document.removeEventListener("mousemove", this.moveWindowPosition);
+      document.removeEventListener("mouseup", this.upWindowPosition);
+    },
   },
   components: {},
   name: "NotifySetting",

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

@@ -1,20 +1,22 @@
 <template>
   <!-- notifyShowAll -->
-  <div class="notify-showall-window">
+  <div class="notifyShowall">
     <div
       class="v-layout sds-notify-showall-dialog layout-window-app v-window"
       :class="notifyShowAllContant.cls"
-      style="position: absolute; left: 10px"
+      style="position: absolute;"
       :style="{
         display: notifyShowAllContant.display,
         width: width,
         height: height,
-        top: top,
+        top: notifyShowAllContant.top,
+        left: notifyShowAllContant.left,
         zIndex: notifyShowAllContant.zIndex,
       }"
       @click.capture="clickNotifyShowall"
     >
-      <div class="v-window-header-wrapper draggable">
+      <div class="v-window-header-wrapper draggable"
+      @mousedown.stop="mousedownNotifyTrayPanelDetail">
         <div class="app-icon"></div>
         <div class="v-window-header-text">
           <div class="v-window-header-title">消息</div>
@@ -417,14 +419,23 @@
 </template>
 
 <script>
+import {moveWindow} from '../../../../common/common'
 export default {
   props: ["defaultZIndex", "notifyShowAllData"],
   data() {
     return {
+      windowFirstClick:{
+        layerX:0,
+        layerY:0,
+        screenX:0,
+        screenY:0,
+      },
       notifyShowAllContant: {
         display: "none",
         zIndex: 9050,
         cls: "active-win",
+        left:0,
+        top:0,
         clearAllNotifyData: {
           clearAllNotifyMessageDisplay: "none",
           clearAllNotifyMessageCls: "deactive-win",
@@ -435,7 +446,6 @@ export default {
       maskDisplay: "none",
       width: "840px",
       height: "480px",
-      top: "50px",
       thContantArray: [
         {
           id: 0,
@@ -572,18 +582,26 @@ export default {
     },
     // 页面最大化
     maxWindow() {
-      this.top = "40px";
+      this.notifyShowAllContant.top = '40px';
+      this.notifyShowAllContant.left = 0;
       this.width = "100%";
-      this.height = "calc(100vh - 40px)";
       this.windowIsMax = true;
+      let el = document.querySelector('.v-layout.sds-notify-showall-dialog')
+      if(! el.className.includes(' x-window-maximized')){
+        el.className = el.className + ' x-window-maximized'
+      }
     },
     // 恢复页面宽度
     restoreWindow() {
-      this.top = "10px";
+      this.notifyShowAllContant.top = 0;
+      this.notifyShowAllContant.left= '10px';
       this.width = "840px";
-      this.height = "480px";
       this.windowIsMax = false;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+      let el = document.querySelector('.v-layout.sds-notify-showall-dialog')
+      if(el.className.includes(' x-window-maximized')){
+        el.className = el.className.replace(' x-window-maximized','')
+      }
     },
     // 显示清除全部信息弹出框
     showClearAllNotifyMessage() {
@@ -604,7 +622,7 @@ export default {
     // 点击清除全部信息弹出框
     clickClearAllNotifyMessage() {
       let el = document.querySelector(
-        ".notify-showall-window .v-message-box-window"
+        ".notifyShowall .v-message-box-window"
       );
       if (el.className && el.className.includes(" no-shadow")) {
         el.className = el.className.replace(" no-shadow", "");
@@ -612,15 +630,6 @@ export default {
     },
     //没关闭清除全部信息弹出框时点击遮罩层
     maskClick() {
-      let el = document.querySelector(
-        ".notify-showall-window .v-message-box-window"
-      );
-      if (!el.className.includes(" no-shadow")) {
-        el.className = el.className + " no-shadow";
-        setTimeout(() => {
-          el.className = el.className.replace(" no-shadow", "");
-        }, 500);
-      }
       if (
         this.notifyShowAllContant.clearAllNotifyData
           .clearAllNotifyMessageZIndex < this.defaultZIndex &&
@@ -640,6 +649,17 @@ export default {
           this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
+      let el = document.querySelector(
+        ".notifyShowall .v-message-box-window"
+      );
+      if (!el.className.includes(" no-shadow")) {
+        this.$nextTick(()=>{
+          el.className = el.className + " no-shadow";
+        })
+        setTimeout(() => {
+          el.className = el.className.replace(" no-shadow", "");
+        }, 500);
+      }
     },
     // 取消删除
     cancelDeleteAllNotifyMessage(e) {
@@ -657,23 +677,43 @@ export default {
       this.notifyShowallDetail.detailMessageList = [];
       this.cancelDeleteAllNotifyMessage(e);
     },
-  },
-  watch: {
-    defaultZIndex() {
-      // if (
-      //   this.notifyShowAllContant.clearAllNotifyData
-      //     .clearAllNotifyMessageZIndex < this.defaultZIndex
-      // ) {
-      //   this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls =
-      //     "deactive-win";
-      //   this.$bus.emit("showOrHiddenNotifyShowallClearAll", false);
-      // } else {
-      //   this.notifyShowAllContant.clearAllNotifyData.clearAllNotifyMessageCls =
-      //     "active-win";
-      // }
+    // 鼠标按下该页面头部
+    mousedownNotifyTrayPanelDetail(e){
+      document.documentElement.click()
+      this.clickNotifyShowall()
+      if(!this.windowIsMax){
+        this.windowFirstClick.layerX = e.layerX;
+        this.windowFirstClick.screenX = document.documentElement.clientWidth;
+        this.windowFirstClick.layerY = e.layerY;
+        this.windowFirstClick.screenY = document.documentElement.clientHeight;
+        document.addEventListener(
+          "mousemove",
+          this.moveWindowPosition
+        );
+        document.addEventListener(
+          "mouseup",
+          this.upWindowPosition
+        );
+      }
     },
-    notifyShowAllData() {
-      this.notifyShowAllContant = this.notifyShowAllData;
+    // 移动弹出框窗口位置
+    moveWindowPosition(e) {
+      let window = document.querySelector('.v-layout.sds-notify-showall-dialog')
+      let obj = moveWindow(e,window,this.windowFirstClick.layerX,this.windowFirstClick.layerY,this.windowFirstClick.screenX,this.windowFirstClick.screenY)
+      this.notifyShowAllContant.left = obj.moveX +'px'
+      this.notifyShowAllContant.top = obj.moveY +'px'
+      if (!window.className.includes(' x-panel-ghost')){
+        window.className = window.className + ' x-panel-ghost'
+      }
+    },
+    // 鼠标松开
+    upWindowPosition(e){
+      let window = document.querySelector('.v-layout.sds-notify-showall-dialog')
+      if (window.className.includes(' x-panel-ghost')){
+        window.className = window.className.replace(' x-panel-ghost','')
+      }
+      document.removeEventListener("mousemove", this.moveWindowPosition);
+      document.removeEventListener("mouseup", this.upWindowPosition);
     },
   },
   components: {},

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

@@ -6,17 +6,18 @@
       position: absolute;
       width: 680px;
       height: 420px;
-      top: 10px;
-      left: 10px;
     "
     :style="{
       display: notifyTrayPanelDetailContant.display,
       zIndex: notifyTrayPanelDetailContant.zIndex,
+      left:notifyTrayPanelDetailContant.left,
+      top:notifyTrayPanelDetailContant.top
     }"
     :class="notifyTrayPanelDetailContant.cls"
     @click.capture="openNotifyDetail"
   >
-    <div class="v-window-header-wrapper draggable">
+    <div class="v-window-header-wrapper draggable"
+      @mousedown.stop="mousedownNotifyTrayPanelDetail">
       <div class="app-icon"></div>
       <div class="v-window-header-text">
         <div class="v-window-header-title">事件详情</div>
@@ -28,7 +29,7 @@
     </div>
     <div
       class="v-window-body"
-      v-if="notifyTrayPanelDetail.detailMessage.length"
+      v-if="notifyTrayPanelDetail.detailMessage.title"
     >
       <div class="v-trap-focus-indicator"></div>
       <div class="v-trap-focus-body">
@@ -60,7 +61,7 @@
                       <div class="v-form-item-input">
                         <div class="v-form-item-control v-form-displayfield">
                           <div>
-                            {{ notifyTrayPanelDetail.detailMessage[0].title }}
+                            {{ notifyTrayPanelDetail.detailMessage.title }}
                           </div>
                         </div>
                       </div>
@@ -74,7 +75,7 @@
                           <div>
                             <div
                               v-html="
-                                notifyTrayPanelDetail.detailMessage[0].text
+                                notifyTrayPanelDetail.detailMessage.text
                               "
                             ></div>
                           </div>
@@ -88,7 +89,7 @@
                       <div class="v-form-item-input">
                         <div class="v-form-item-control v-form-displayfield">
                           <div>
-                            {{ notifyTrayPanelDetail.detailMessage[0].time1 }}
+                            {{ notifyTrayPanelDetail.detailMessage.time1 }}
                           </div>
                         </div>
                       </div>
@@ -100,7 +101,7 @@
                             <div
                               class="detail-mail-content"
                               v-html="
-                                notifyTrayPanelDetail.detailMessage[0].message
+                                notifyTrayPanelDetail.detailMessage.message
                               "
                             ></div>
                           </div>
@@ -159,15 +160,24 @@
 </template>
 
 <script>
+import {moveWindow} from '../../../../common/common'
 export default {
   props: ["defaultZIndex", "notifyTrayPanelDetailData"],
   mounted() {
     this.$bus.on("openNotifyDetail", this.openNotifyDetail);
     this.$bus.on("closeNotifyDetail", this.closeNotifyDetail);
     this.notifyTrayPanelDetailContant = this.notifyTrayPanelDetailData;
+    this.notifyTrayPanelDetailContant.top = '10px'
+    this.notifyTrayPanelDetailContant.left = '10px'
   },
   data() {
     return {
+      windowFirstClick:{
+        layerX:0,
+        layerY:0,
+        screenX:0,
+        screenY:0,
+      },
       notifyTrayPanelDetail: {
         detailMessage: [],
       },
@@ -175,6 +185,8 @@ export default {
         zIndex: 9050,
         cls: "deactive-win",
         display: "none",
+        top:0,
+        left:0
       },
     };
   },
@@ -189,8 +201,8 @@ export default {
         this.notifyTrayPanelDetailContant.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
       }
-      if (detailMessage.title) {
-        this.notifyTrayPanelDetail.detailMessage[0] = detailMessage;
+      if (detailMessage && detailMessage.title) {
+        this.notifyTrayPanelDetail.detailMessage = detailMessage;
       }
     },
     // 关闭本页面
@@ -199,17 +211,41 @@ export default {
       this.notifyTrayPanelDetailContant.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
-  },
-  watch: {
-    // defaultZIndex(newVal) {
-    //   if (this.notifyTrayPanelDetailContant.zIndex < newVal) {
-    //     this.notifyTrayPanelDetailContant.cls = "deactive-win";
-    //   } else {
-    //     this.notifyTrayPanelDetailContant.cls = "active-win";
-    //   }
-    // },
-    notifyTrayPanelDetailData() {
-      this.notifyTrayPanelDetailContant = this.notifyTrayPanelDetailData;
+    // 鼠标按下该页面头部
+    mousedownNotifyTrayPanelDetail(e){
+      document.documentElement.click()
+      this.openNotifyDetail()
+      this.windowFirstClick.layerX = e.layerX;
+      this.windowFirstClick.screenX = document.documentElement.clientWidth;
+      this.windowFirstClick.layerY = e.layerY;
+      this.windowFirstClick.screenY = document.documentElement.clientHeight;
+      document.addEventListener(
+        "mousemove",
+        this.moveWindowPosition
+      );
+      document.addEventListener(
+        "mouseup",
+        this.upWindowPosition
+      );
+    },
+    // 移动弹出框窗口位置
+    moveWindowPosition(e) {
+      let window = document.querySelector('.v-layout.sds-notify-detail-dialog')
+      let obj = moveWindow(e,window,this.windowFirstClick.layerX,this.windowFirstClick.layerY,this.windowFirstClick.screenX,this.windowFirstClick.screenY)
+      this.notifyTrayPanelDetailContant.left = obj.moveX +'px'
+      this.notifyTrayPanelDetailContant.top = obj.moveY +'px'
+      if (!window.className.includes(' x-panel-ghost')){
+        window.className = window.className + ' x-panel-ghost'
+      }
+    },
+    // 鼠标松开
+    upWindowPosition(e){
+      let window = document.querySelector('.v-layout.sds-notify-detail-dialog')
+      if (window.className.includes(' x-panel-ghost')){
+        window.className = window.className.replace(' x-panel-ghost','')
+      }
+      document.removeEventListener("mousemove", this.moveWindowPosition);
+      document.removeEventListener("mouseup", this.upWindowPosition);
     },
   },
 };

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

@@ -123,7 +123,8 @@ export default {
         this.$bus.emit("showOrHiddenWidgetItem", obj);
       }
       this.countSelectedMenuItem();
-      this.$bus.emit("changeThumbHeight", this.portalDetail.selectedNum);
+      this.$bus.emit('countSelectedMenuItemNum',this.portalDetail.selectedNum)
+
     },
     // 鼠标移入选择框的每一项
     mouseenterMenuItem(detailMessageIndex) {
@@ -205,7 +206,7 @@ export default {
   components: {},
 };
 </script>
-<style lang="css" scroped>
+<style lang="css" scoped>
 .v-menu {
   min-height: 124px;
 }

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

@@ -1,156 +1,163 @@
 <template>
   <!-- 搜索框 -->
   <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;
+      style="
+        position: absolute;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        top: 50%;
+        width: 638px;
+        height:418px;
+        border-radius:7px;
+      "
+      :style="{
+        display: searchInputContant.display,
+        zIndex: searchInputContant.zIndex,
+      }"
+      :class="searchInputContant.cls"
+      @click.stop="clickSearchInput">
+    <div
+      class="
+        x-window
+        syno-finder
+        spotlight-main-window
+        sds-window-v5
+        spotlight-init
+      "
+    >
+      <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>
-              <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>
+              <span class="x-window-header-text">Spotlight</span>
             </div>
-            <span class="x-window-header-text">Spotlight</span>
           </div>
         </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 class="x-box-inner" style="width: 638px; height: 48px">
+      <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-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;
-                        "
+                        class="x-box-inner"
+                        style="width: 638px; height: 48px"
                       >
-                        <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
+                            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-box-inner"
-                              style="width: 638px; height: 46px"
+                              class="
+                                x-panel-body
+                                x-panel-body-noheader
+                                x-panel-body-noborder
+                                x-box-layout-ct
+                              "
+                              style="height: 46px; width: 638px"
                             >
                               <div
-                                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 }"
+                                class="x-box-inner"
+                                style="width: 638px; height: 46px"
                               >
                                 <div
-                                  class="suggestion"
-                                  style="width: 512px; 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 }"
                                 >
-                                  <span class="dummy"></span>立即搜索{{
-                                    searchText
-                                  }}
+                                  <div
+                                    class="suggestion"
+                                    style="width: 512px; height: 46px"
+                                  >
+                                    <span class="dummy"></span>立即搜索{{
+                                      searchText
+                                    }}
+                                  </div>
                                 </div>
                               </div>
                             </div>
@@ -164,52 +171,57 @@
             </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-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 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 main-panel syno-ux-panel x-panel-noborder"
+            class="x-panel-body x-panel-body-noheader x-panel-body-noborder"
             style="width: 638px; height: 370px"
-          ></div>
+          >
+            <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="changeSearchMethod(selectIndex, select.cls1)"
-            >
-              <span class="icon" :class="select.cls1"></span>{{ select.text }}
+      <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>
         </div>
@@ -279,7 +291,7 @@ export default {
     openSearchInput(e) {
       if (
         this.searchInputContant.display === "none" ||
-        this.searchInputContant.zIndex < this.defaultZIndex
+        this.searchInputContant.cls === "deactive-win"
       ) {
         this.searchInputContant.display = "block";
         this.searchInputContant.cls = "active-win";
@@ -294,8 +306,6 @@ export default {
         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")
@@ -325,7 +335,7 @@ export default {
         this.selectDisplay = "none";
         this.searchCls = "";
         if (el1.className.includes(" merge")) {
-          el1.className = el1.className.replace(" merge");
+          el1.className = el1.className.replace(" merge",'');
         }
         this.keyword = "";
         if (this.searchInputContant.zIndex >= this.defaultZIndex) {

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

@@ -1,535 +0,0 @@
-<template>
-  <!-- 菜单弹窗 -->
-  <div v-if="resizablePinnedDetail.detailMessageList.length">
-    <div
-      class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
-      style="
-        position: absolute;
-        visibility: visible;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        background: #fff;
-      "
-      :style="{
-        width: detailMessage.width,
-        height: detailMessage.height,
-        minHeight: detailMessage.minHeight,
-        display: detailMessage.display,
-        zIndex: detailMessage.zIndex,
-      }"
-      :class="detailMessage.cls"
-      v-for="(
-        detailMessage, detailMessageIndex
-      ) in resizablePinnedDetail.detailMessageList"
-      :key="detailMessage.id"
-      @click.capture="changeDialogMenuWindow(detailMessage.title)"
-    >
-      <div class="x-dlg-focus tjCenter" tabindex="0" role="application"></div>
-      <div class="x-window-tl" @click="moveWindowPosition">
-        <div class="x-window-tr">
-          <div class="x-window-tc">
-            <div
-              class="x-window-header x-panel-icon x-window-draggable"
-              :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
-            >
-              <div class="x-window-toolCt" role="listbox">
-                <div
-                  class="x-tool x-tool-close"
-                  role="option"
-                  @click.capture="closeWindow(detailMessageIndex)"
-                >
-                  &nbsp;
-                </div>
-                <div
-                  class="x-tool x-tool-restore"
-                  role="option"
-                  :style="{ display: `${detailMessage.iconRestore}` }"
-                  @click.capture="restoreMizeWindow(detailMessageIndex)"
-                >
-                  &nbsp;
-                </div>
-                <div
-                  class="x-tool x-tool-maximize"
-                  role="option"
-                  @click.capture="maxiSizeWindow(detailMessageIndex)"
-                  :style="{ display: `${detailMessage.iconMaximize}` }"
-                >
-                  &nbsp;
-                </div>
-                <div
-                  class="x-tool x-tool-minimize"
-                  role="option"
-                  @click.capture="miniMizeWindow(detailMessageIndex)"
-                >
-                  &nbsp;
-                </div>
-                <div
-                  class="x-tool x-tool-help"
-                  role="option"
-                  @click.capture="openDSMWindow()"
-                >
-                  &nbsp;
-                </div>
-              </div>
-              <span class="x-window-header-text">{{
-                detailMessage.title
-              }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="x-window-bwrap">
-        <div class="x-window-ml">
-          <div class="x-window-mr">
-            <div class="x-window-mc">
-              <div class="x-window-tbar" style="width: 100%">
-                <div
-                  class="
-                    x-toolbar x-small-editor
-                    synopkg-toolbar
-                    syno-ux-toolbar
-                    x-toolbar-layout-ct
-                  "
-                  style="height: 40px; width: 1230px"
-                >
-                  <table cellspacing="0" class="x-toolbar-ct">
-                    <tbody>
-                      <tr>
-                        <td class="x-toolbar-left" align="left">
-                          <!-- 
-                                                    <table cellspacing="0">
-                                                        <tbody>
-                                                            <tr class="x-toolbar-left-row">
-                                                                <td class="x-toolbar-cell"><span cellspacing="0"
-                                                                        class="x-btn synopkg-toolbar-back-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
-                                                                        style="margin-left: 0px; height: 28px;"><em
-                                                                            class=" x-unselectable"><button
-                                                                                type="button"
-                                                                                class=" x-btn-text synopkg-toolbar-back-icon synopkg-btn-icon"
-                                                                                ></button></em></span>
-                                                                </td>
-                                                                <td class="x-toolbar-cell"><span cellspacing="0"
-                                                                        class="x-btn synopkg-toolbar-next-btn synopkg-icon-btn syno-ux-button syno-ux-button-default x-btn-icon x-item-disabled"
-                                                                        style="margin-left: 0px; height: 28px;"><em
-                                                                            class=" x-unselectable"><button
-                                                                                type="button"
-                                                                                class=" x-btn-text synopkg-toolbar-next-icon synopkg-btn-icon"
-                                                                                ></button></em></span>
-                                                                </td>
-                                                                <td class="x-toolbar-cell"><span cellspacing="0"
-                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-icon"
-                                                                        style="margin-left: 0px; height: 26px;"><em
-                                                                            class=" x-unselectable"><button
-                                                                                type="button"
-                                                                                class=" x-btn-text synopkg-toolbar-refresh-icon synopkg-btn-icon"
-                                                                                ></button></em></span>
-                                                                </td>
-                                                                <td class="x-toolbar-cell syno-ux-textfilter">
-                                                                    <div class="x-form-field-wrap x-form-field-trigger-wrap"
-                                                                        style="width: 100%;">
-                                                                        <input type="text" size="16"
-                                                                            autocomplete="off"
-                                                                            class="x-form-text x-form-field syno-ux-textfilter-text x-form-empty-field"
-                                                                            placeholder="搜索"
-                                                                            style="width: calc((100% - 30px) - 3px);"><button
-                                                                            type="button"
-                                                                            class="x-form-trigger syno-ux-textfilter-trigger"
-                                                                            style="visibility: hidden;"></button>
-                                                                    </div>
-                                                                    <div role="presentation"
-                                                                        class="x-form-hidden-error-msg"></div>
-                                                                </td>
-                                                                <td class="x-toolbar-cell">
-                                                                    <div class="x-form-display-field"
-                                                                        style="width: 16px;">
-                                                                    </div>
-                                                                    <div role="presentation"
-                                                                        class="x-form-hidden-error-msg"></div>
-                                                                </td>
-                                                                <td class="x-toolbar-cell"><span cellspacing="0"
-                                                                        class="x-btn syno-ux-button syno-ux-button-default x-btn-noicon"
-                                                                        style="width: auto; margin-left: 0px; height: 26px;"><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 syno-ux-button-default x-btn-noicon"
-                                                                        style="width: auto; margin-left: 0px; height: 26px;"><em
-                                                                            class=" x-unselectable"><button
-                                                                                type="button" 
-                                                                                class=" x-btn-text">设置</button></em></span>
-                                                                </td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                    -->
-                        </td>
-                        <td class="x-toolbar-right" align="right">
-                          <!-- 
-                                                    <table cellspacing="0" class="x-toolbar-right-ct">
-                                                        <tbody>
-                                                            <tr>
-                                                                <td>
-                                                                    <table cellspacing="0">
-                                                                        <tbody>
-                                                                            <tr class="x-toolbar-right-row">
-                                                                            </tr>
-                                                                        </tbody>
-                                                                    </table>
-                                                                </td>
-                                                                <td>
-                                                                    <table cellspacing="0">
-                                                                        <tbody>
-                                                                            <tr class="x-toolbar-extras-row">
-                                                                            </tr>
-                                                                        </tbody>
-                                                                    </table>
-                                                                </td>
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                    -->
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div
-                class="x-window-body x-border-layout-ct"
-                style="width: 100%; height: 484px"
-              ></div>
-            </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>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["defaultZIndex",'detailMessageList'],
-  data() {
-    return {
-      resizablePinnedDetail: {
-        detailMessageList: [
-          // {
-          //   id: "0",
-          //   width: "1254px",
-          //   height: "calc(100vh - 80px)",
-          //   minHeight: "560px",
-          //   title: "套件中心",
-          //   spacialCls: "tjCenter",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/tjCenter.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: "1",
-          //   width: "1150px",
-          //   height: "calc(100vh - 120px)",
-          //   minHeight: "520px",
-          //   title: "控制中心",
-          //   spacialCls: "controlCenter",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/controlCenter.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: "2",
-          //   width: "1010px",
-          //   height: "calc(100vh - 200px)",
-          //   minHeight: "440px",
-          //   title: "File Station",
-          //   spacialCls: "file",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/file.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-          // {
-          //   id: "3",
-          //   width: "1010px",
-          //   height: "calc(100vh - 220px)",
-          //   minHeight: "420px",
-          //   title: "DSM 说明",
-          //   spacialCls: "question",
-          //   cls: "deactive-win",
-          //   titleImgUrl: "../../../../public/image/index/question.png",
-          //   display: "none",
-          //   zIndex: 9050,
-          //   iconRestore: "none",
-          //   iconMaximize: "block",
-          // },
-        ],
-      },
-      lastCheckIndex: -1,
-      openWindowNum: 0,
-      detailMessageWidthList: [
-        // {
-        //   width: "1254px",
-        // },
-        // {
-        //   width: "1150px",
-        // },
-        // {
-        //   width: "1010px",
-        // },
-        // {
-        //   width: "1010px",
-        // },
-      ],
-      fixWindowZIndedxIsMax: false,
-    };
-  },
-  mounted() {
-    this.$bus.on("clickShortcutItem", this.clickShortcutItem);
-    this.$bus.on("clickMenuItem", this.clickMenuItem);
-    this.$bus.on("openDSMWindow", this.openDSMWindow);
-    this.$bus.on("changeDialogMenuWindow", this.changeDialogMenuWindow);
-    this.$bus.on("fixWindowZIndexMax", this.fixWindowZIndexMax);
-    this.resizablePinnedDetail.detailMessageList = JSON.parse(JSON.stringify(this.detailMessageList))
-     JSON.parse(JSON.stringify(this.detailMessageList)).forEach((item,index)=>{
-      this.detailMessageWidthList[index] = item.width
-    })
-  },
-  methods: {
-    // 点击大菜单图标
-    clickShortcutItem(obj) {
-      let { detailMessageIndex } = obj;
-      this.openDialogWindow(detailMessageIndex);
-    },
-    // 点击小菜单图标
-    clickMenuItem(imgUrl) {
-      let detailMessageIndex =
-        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
-          return item.titleImgUrl == imgUrl;
-        });
-      if (detailMessageIndex != -1) {
-        this.openDialogWindow(detailMessageIndex);
-      }
-    },
-    // 打开弹出窗口
-    openDialogWindow(detailMessageIndex) {
-      if (
-        (!detailMessageIndex && detailMessageIndex != 0) ||
-        detailMessageIndex == -1
-      ) {
-        return;
-      }
-      if (
-        this.lastCheckIndex == detailMessageIndex ||
-        this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls === 'active-win'
-      ) {
-        return;
-      }
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
-        "block";
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
-        "active-win";
-      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-        item.cls = "deactive-win";
-      });
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
-        "active-win";
-      let defaultZIndex = this.defaultZIndex + 10;
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
-        defaultZIndex;
-      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
-        defaultZIndex;
-      this.lastCheckIndex = detailMessageIndex;
-    },
-    // 切换弹出的menu窗口
-    changeDialogMenuWindow(title) {
-      let menuIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
-        return item.title === title
-      })
-      if((menuIndex || menuIndex == 0) && menuIndex != -1){
-      }
-    },
-    // 打开DSM 说明
-    openDSMWindow() {
-      let detailMessageIndex = this.resizablePinnedDetail.detailMessageList.findIndex(item =>{
-        return item.title === 'DSM 说明'
-      })
-      if(detailMessageIndex && detailMessageIndex != -1){
-        this.openDialogWindow(detailMessageIndex);
-      }
-      let obj={
-        imgUrl:
-        this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
-          .titleImgUrl,
-        spacialCls: this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
-          .spacialCls,
-        title: this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
-        .title,
-        zIndex: this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
-          .zIndex
-      } 
-      this.$bus.emit(
-          "changeDialogWindow",obj
-        );
-    },
-    // 最小化弹出框口
-    miniMizeWindow(detailMessageIndex) {
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
-        "none";
-      this.countOpenWindowNum();
-      let detailMessageList =
-        this.resizablePinnedDetail.detailMessageList.filter((item) => {
-          return item.display == "block";
-        });
-      if (detailMessageList.length) {
-        detailMessageList = JSON.parse(
-          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
-        );
-        this.resizablePinnedDetail.detailMessageList[
-          detailMessageIndex
-        ].zIndex = this.defaultZIndex - 10;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-      }
-    },
-    //最大化弹出窗口
-    maxiSizeWindow(detailMessageIndex) {
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
-        "100%";
-      this.resizablePinnedDetail.detailMessageList[
-        detailMessageIndex
-      ].iconRestore = "block";
-      this.resizablePinnedDetail.detailMessageList[
-        detailMessageIndex
-      ].iconMaximize = "none";
-      this.openDialogWindow(detailMessageIndex);
-    },
-    //恢复弹出窗口宽度
-    restoreMizeWindow(detailMessageIndex) {
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
-        this.detailMessageWidthList[detailMessageIndex].width;
-      this.resizablePinnedDetail.detailMessageList[
-        detailMessageIndex
-      ].iconRestore = "none";
-      this.resizablePinnedDetail.detailMessageList[
-        detailMessageIndex
-      ].iconMaximize = "block";
-      this.countOpenWindowNum();
-      this.openDialogWindow(detailMessageIndex);
-    },
-    //关闭弹出窗口
-    closeWindow(detailMessageIndex) {
-      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].display =
-        "none";
-      let imgUrl =
-        this.resizablePinnedDetail.detailMessageList[detailMessageIndex]
-          .titleImgUrl;
-      this.$bus.emit("closeDialogWindow", imgUrl);
-      let detailMessageList =
-        this.resizablePinnedDetail.detailMessageList.filter((item) => {
-          return item.display === "block";
-        });
-      if (detailMessageList.length) {
-        detailMessageList = JSON.parse(
-          JSON.stringify(this.arraySort(detailMessageList, "zIndex"))
-        );
-        this.resizablePinnedDetail.detailMessageList[
-          detailMessageIndex
-        ].zIndex = this.defaultZIndex - 10;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-      }
-      this.countOpenWindowNum();
-    },
-    //统计打开的弹出窗口
-    countOpenWindowNum() {
-      this.openWindowNum = 0;
-      this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-        if (item.display === "block") {
-          this.openWindowNum++;
-        }
-      });
-      if (this.openWindowNum == 0) {
-        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-          item.zIndex = 9050;
-        });
-      }
-    },
-    // 按z-index 给menuItem排序
-    arraySort(array, key) {
-      return array.sort(function (a, b) {
-        var x = a[key]; //如果要从大到小,把x,y互换就好
-        var y = b[key];
-        return x < y ? -1 : x > y ? 1 : 0;
-      });
-    },
-    // 移动弹出框窗口位置
-    moveWindowPosition(e) {
-    },
-  },
-
-  watch: {
-    defaultZIndex() {
-      this.dialogZIndexMaxIndex =
-        this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
-          return item.zIndex >= this.defaultZIndex && item.display === "block";
-        });
-      if (
-        this.dialogZIndexMaxIndex != -1 &&
-        this.dialogZIndexMaxIndex != undefined
-      ) {
-        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-          if (item.cls === "active-win") {
-            item.cls = "deactive-win";
-          }
-        });
-        this.resizablePinnedDetail.detailMessageList[
-          this.dialogZIndexMaxIndex
-        ].cls = "active-win";
-        let obj = {
-          imgUrl: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].titleImgUrl,
-          zIndex: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].zIndex,
-          spacialCls: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].spacialCls,
-          title: this.resizablePinnedDetail.detailMessageList[this.dialogZIndexMaxIndex].title,
-        }
-        this.$bus.emit(
-          "changeDialogWindow",obj
-        );
-      } else {
-        this.resizablePinnedDetail.detailMessageList.forEach((item) => {
-          if (item.cls === "active-win") {
-            item.cls = "deactive-win";
-          }
-        });
-      }
-    },
-  },
-  beforeDestroy() {
-    this.$bus.off("clickShortcutItem", this.clickShortcutItem);
-    this.$bus.off("clickMenuItem", this.clickMenuItem);
-  },
-  components: {},
-  name: "ResizablePinned",
-};
-</script>
-<style scoped lang="css">
-@media screen and (max-height: 600px){
-  .x-window.synopkg-window{
-    top:0 !important;
-    transform: translate(-50%,0px) !important;
-  }
-}
-</style>  

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

@@ -1,7 +1,11 @@
 <template>
   <!-- 菜单区-->
   <div>
-    <ul id="sds-desktop-shortcut" class="sds-desktop-shortcut">
+    <ul
+      id="sds-desktop-shortcut"
+      class="sds-desktop-shortcut"
+      @contextmenu.prevent=""
+    >
       <div class="sds-desktop-layout">
         <li
           class="launch-icon icon-item"
@@ -12,6 +16,13 @@
           ) in shortcutDetail.detailMessageList"
           :key="detailMessage.id"
           @click="clickShortcutItem(detailMessage.id, detailMessageIndex)"
+          @contextmenu.prevent="
+            contextmenuAppViewItem(
+              $event,
+              detailMessage,
+              detailMessage.selectList
+            )
+          "
         >
           <div
             class="image"
@@ -19,23 +30,22 @@
           >
             <div class="sds-application-notify-badge-num-wrap">
               <div
-                id="ext-gen50"
                 class="sds-application-notify-badge-num"
                 :class="detailMessage.unReadyMessageCls"
-                v-if="detailMessage.unReadyMessage.length"
+                v-if="detailMessage.unReadyMessage.length && dataLoaded"
               ></div>
             </div>
           </div>
           <div class="text">{{ detailMessage.title }}</div>
         </li>
       </div>
+      <PortalTarget></PortalTarget>
     </ul>
-    <!-- <ResizablePinned :defaultZIndex="defaultZIndex" :detailMessageList = shortcutDetail.detailMessageList></ResizablePinned> -->
   </div>
 </template>
 
 <script>
-import ResizablePinned from "./ResizablePinned";
+import PortalTarget from "../../DesktopAppView/PortalTarget";
 export default {
   props: ["defaultZIndex"],
   mounted() {
@@ -43,24 +53,29 @@ export default {
       "clickAppViewItemClearUnReady",
       this.clickAppViewItemClearUnReady
     );
+    this.$bus.on("pushShortcutList", this.pushShortcutList);
+    this.$bus.on("spliceShortcutList", this.spliceShortcutList);
+
     setTimeout(() => {
       this.shortcutDetail.detailMessageList.forEach((item) => {
         if (item.unReadyMessage.length) {
           item.unReadyMessageCls = "bounce-effect";
         }
       });
-    },800);
-    
+      this.dataLoaded = true;
+    }, 800);
+
     setTimeout(() => {
       this.shortcutDetail.detailMessageList.forEach((item) => {
         if (item.unReadyMessageCls === "bounce-effect") {
           item.unReadyMessageCls = "";
         }
       });
-    },1800);
+    }, 1400);
   },
   data() {
     return {
+      dataLoaded: false,
       shortcutDetail: {
         detailMessageList: [
           {
@@ -78,6 +93,16 @@ export default {
             iconMaximize: "block",
             unReadyMessage: [],
             unReadyMessageCls: "",
+            selectList: [
+              {
+                id: 10,
+                text: "删除快捷方式",
+              },
+              {
+                id: 11,
+                text: "111",
+              },
+            ],
           },
           {
             id: 0,
@@ -94,6 +119,16 @@ export default {
             iconMaximize: "block",
             unReadyMessage: [1],
             unReadyMessageCls: "",
+            selectList: [
+              {
+                id: 10,
+                text: "删除快捷方式",
+              },
+              {
+                id: 11,
+                text: "222",
+              },
+            ],
           },
           {
             id: 12,
@@ -110,6 +145,16 @@ export default {
             iconMaximize: "block",
             unReadyMessage: [],
             unReadyMessageCls: "",
+            selectList: [
+              {
+                id: 10,
+                text: "删除快捷方式",
+              },
+              {
+                id: 11,
+                text: "333",
+              },
+            ],
           },
           {
             id: 1,
@@ -126,6 +171,20 @@ export default {
             iconMaximize: "block",
             unReadyMessage: [1],
             unReadyMessageCls: "",
+            selectList: [
+              {
+                id: 10,
+                text: "删除快捷方式",
+              },
+              {
+                id: 11,
+                text: "444",
+              },
+              {
+                id: 11,
+                text: "555",
+              },
+            ],
           },
         ],
       },
@@ -146,9 +205,63 @@ export default {
         }
       });
     },
+    // 新添加的快捷方式
+    pushShortcutList(selectedItem) {
+      console.log(selectedItem);
+      let bol = this.shortcutDetail.detailMessageList.some((item) => {
+        return item.id === selectedItem.id;
+      });
+      if (!bol) {
+        this.shortcutDetail.detailMessageList.push(selectedItem);
+        console.log(this.shortcutDetail.detailMessageList);
+      } else {
+        let obj = {
+          cls: "",
+          icon: "",
+          title: "",
+          text: "该页面已存在!",
+          buttonList: [
+            {
+              id: 0,
+              text: "确认",
+              cls:'v-btn-main',
+              event: () => {
+                this.$bus.emit("closeMessage");
+                this.$bus.emit("closeMask");
+              },
+            },
+          ],
+        };
+        this.$bus.emit("openMessage", obj);
+        this.$bus.emit("openMask");
+      }
+    },
+    // 鼠标点击右键
+    contextmenuAppViewItem(e, item, selectList) {
+      console.log(
+        e,
+        item,
+        selectList,
+        e.target.offsetLeft,
+        e.target.offsetHeight
+      );
+      let obj = { left: e.pageX - 120, top: e.pageY - 40, item, selectList };
+      this.$bus.emit("showPortalTarget", obj);
+    },
+    // 删除快捷方式
+    spliceShortcutList(selectedItem) {
+      let index = this.shortcutDetail.detailMessageList.findIndex((item) => {
+        return item.id === selectedItem.id;
+      });
+      if (index !== -1) {
+        this.shortcutDetail.detailMessageList.splice(index, 1);
+        console.log(this.shortcutDetail.detailMessageList);
+      }
+      this.$bus.emit("hiddenPortalTarget");
+    },
   },
   components: {
-    ResizablePinned,
+    PortalTarget,
   },
   name: "Shortcut",
 };

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

@@ -2,31 +2,28 @@
   <!-- userSetting -->
   <div
     class="v-layout sds-personal-settings-window layout-window-app v-window"
-    style="
-      position: absolute;
-      height: 574px;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    "
+    style="position: absolute; height: 574px;"
     :style="{
-      zIndex: openUserSettingDetail.zIndex,
-      width: openUserSettingDetail.width,
+      zIndex: userSettingDetail.zIndex,
+      width: userSettingDetail.width,
+      top: userSettingDetail.top,
+      left: userSettingDetail.left,
     }"
-    :class="openUserSettingDetail.cls"
+    :class="userSettingDetail.cls"
     @click.capture="clickUserSetting"
-    v-if="openUserSettingDetail.display === 'block'"
+    v-if="userSettingDetail.display === 'block'"
   >
-    <div class="v-window-header-wrapper draggable">
+    <div class="v-window-header-wrapper draggable"
+      @mousedown.stop="mousedownUserSetting">
       <div
         class="app-icon"
-        :style="{backgroundImage: `url(${openUserSettingDetail.titleImgUrl})`}
-          
-        "
+        :style="{
+          backgroundImage: `url(${userSettingDetail.titleImgUrl})`,
+        }"
       ></div>
       <div class="v-window-header-text">
         <div class="v-window-header-title">
-          {{ openUserSettingDetail.title }}
+          {{ userSettingDetail.title }}
         </div>
       </div>
       <div class="window-header-tool-wrapper light">
@@ -34,51 +31,68 @@
         <div class="tool minimize" @click.capture="minUserSetting"></div>
         <div
           class="tool maximize"
-          :style="{ display: openUserSettingDetail.iconMaximize }"
+          :style="{ display: userSettingDetail.iconMaximize }"
           @click.capture="maxiMizeUserSetting"
         ></div>
         <div
           class="tool restore"
-          :style="{ display: openUserSettingDetail.iconRestore }"
+          :style="{ display: userSettingDetail.iconRestore }"
           @click.capture="RestoreUserSetting"
         ></div>
         <div class="tool close" @click.capture="closeUserSetting"></div>
       </div>
     </div>
+    <div class="v-window-body"></div>
   </div>
 </template>
 <script>
+import {moveWindow} from '../../../../common/common'
 export default {
   props: ["defaultZIndex", "userSettingData"],
   mounted() {
     this.$bus.on("openUserSetting", this.openUserSetting);
-    this.openUserSettingDetail = this.userSettingData;
+    this.userSettingDetail = this.userSettingData;
   },
   data() {
     return {
-      openUserSettingDetail: {
-        display:'none',
-        zIndex:9050,
-        iconRestore:'',
-        iconMaximize:'',
-        width:'',
-        restoreWidth:''
+      windowFirstClick:{
+        layerX:0,
+        layerY:0,
+        screenX:0,
+        screenY:0,
+      },
+      userSettingDetail: {
+        display: "none",
+        zIndex: 9050,
+        iconRestore: "",
+        iconMaximize: "",
+        width: "",
+        restoreWidth: "",
+        top: 0,
+        left: 0,
       },
     };
   },
   methods: {
     // 打开本页面
     openUserSetting() {
-      if (this.openUserSettingDetail.display === 'none' || this.openUserSettingDetail.zIndex < this.defaultZIndex) {
-        this.openUserSettingDetail.zIndex = this.defaultZIndex + 10;
+      if (
+        this.userSettingDetail.display === "none" ||
+        this.userSettingDetail.zIndex < this.defaultZIndex
+      ) {
+        this.userSettingDetail.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-        this.openUserSettingDetail.display = "block";
+        this.userSettingDetail.display = "block";
+      }
+      if(this.userSettingDetail.width !== '100%'){
+        let left = (document.documentElement.clientWidth - parseInt(this.userSettingDetail.width.replace('px',''))) / 2
+        this.userSettingDetail.left = left + 'px'
       }
     },
     // 关闭本页面
     closeUserSetting() {
-      this.openUserSettingDetail.display = "none";
-      this.openUserSettingDetail.zIndex = this.defaultZIndex - 10;
+      this.userSettingDetail.display = "none";
+      this.userSettingDetail.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
       this.$bus.emit(
         "closeDialogWindow",
@@ -87,8 +101,8 @@ export default {
     },
     // 点击本页面
     clickUserSetting() {
-      if (this.openUserSettingDetail.zIndex < this.defaultZIndex) {
-        this.openUserSettingDetail.zIndex = this.defaultZIndex + 10;
+      if (this.userSettingDetail.zIndex < this.defaultZIndex) {
+        this.userSettingDetail.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
         this.$bus.emit(
           "changeDialogWindow",
@@ -102,36 +116,77 @@ export default {
     },
     // 最小化本页面
     minUserSetting() {
-      this.openUserSettingDetail.display = "none";
-      this.openUserSettingDetail.zIndex = this.defaultZIndex - 10;
+      this.userSettingDetail.display = "none";
+      this.userSettingDetail.zIndex = this.defaultZIndex - 10;
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
     },
     // 最大化本页面
     maxiMizeUserSetting() {
-      this.openUserSettingDetail.iconRestore = "block";
-      this.openUserSettingDetail.iconMaximize = "none";
-      this.openUserSettingDetail.width = "100%";
+      this.userSettingDetail.iconRestore = "block";
+      this.userSettingDetail.iconMaximize = "none";
+      this.userSettingDetail.width = "100%";
+      this.userSettingDetail.left = 0
+      this.userSettingDetail.top = '40px'
+      let el = document.querySelector('.v-layout.sds-personal-settings-window')
+      if(! el.className.includes(' x-window-maximized')){
+        el.className = el.className + ' x-window-maximized'
+      }
     },
     // 重置本页面的宽度
     RestoreUserSetting() {
-      this.openUserSettingDetail.iconRestore = "none";
-      this.openUserSettingDetail.iconMaximize = "block";
-      this.openUserSettingDetail.width =
-        this.openUserSettingDetail.restoreWidth;
+      this.userSettingDetail.iconRestore = "none";
+      this.userSettingDetail.iconMaximize = "block";
+      this.userSettingDetail.width =
+        this.userSettingDetail.restoreWidth;
+      let left = (document.documentElement.clientWidth - parseInt(this.userSettingDetail.width.replace('px',''))) / 2
+      this.userSettingDetail.left = left + 'px'
+      this.userSettingDetail.top = 0
+      let el = document.querySelector('.v-layout.sds-personal-settings-window')
+      if(el.className.includes(' x-window-maximized')){
+        el.className = el.className.replace(' x-window-maximized','')
+      }
     },
-  },
-  watch: {
-    userSettingData() {
-      this.openUserSettingDetail = userSettingData;
+    // 鼠标按下该页面头部
+    mousedownUserSetting(e){
+      document.documentElement.click()
+      this.clickUserSetting()
+      if(this.userSettingDetail.iconMaximize === "block"){
+        this.windowFirstClick.layerX = e.layerX;
+        this.windowFirstClick.screenX = document.documentElement.clientWidth;
+        this.windowFirstClick.layerY = e.layerY;
+        this.windowFirstClick.screenY = document.documentElement.clientHeight;
+        document.addEventListener(
+          "mousemove",
+          this.moveWindowPosition
+        );
+        document.addEventListener(
+          "mouseup",
+          this.upWindowPosition
+        );
+      }
+      
+    },
+    // 移动弹出框窗口位置
+    moveWindowPosition(e) {
+      let window = document.querySelector('.v-layout.sds-personal-settings-window')
+      let obj = moveWindow(e,window,this.windowFirstClick.layerX,this.windowFirstClick.layerY,this.windowFirstClick.screenX,this.windowFirstClick.screenY)
+      this.userSettingDetail.left = obj.moveX +'px'
+      this.userSettingDetail.top = obj.moveY +'px'
+      if (!window.className.includes(' x-panel-ghost')){
+        window.className = window.className + ' x-panel-ghost'
+      }
+    },
+    // 鼠标松开
+    upWindowPosition(e){
+      let window = document.querySelector('.v-layout.sds-personal-settings-window')
+      if (window.className.includes(' x-panel-ghost')){
+        window.className = window.className.replace(' x-panel-ghost','')
+      }
+      document.removeEventListener("mousemove", this.moveWindowPosition);
+      document.removeEventListener("mouseup", this.upWindowPosition);
     },
   },
 };
 </script>
 <style lang="css" scoped>
-@media screen and (max-height: 600px) {
-  .sds-personal-settings-window {
-    top: 0 !important;
-    transform: translate(-50%, 0px) !important;
-  }
-}
 </style>

src/component/Container/Desktop/index.vue

@@ -9,6 +9,7 @@
     <FixWindow
       :defaultZIndex="defaultZIndex"
       :fixWindowData="fixWindowData"
+      :maskIsShow="maskIsShow"
     ></FixWindow>
     <NotifyTrayPanel></NotifyTrayPanel>
     <NotifyTrayPanelDetail
@@ -58,13 +59,17 @@ export default {
     "notifyTrayPanelDetailData",
     "notifySettingData",
     "notifyShowAllData",
-    "searchInputData"
+    "searchInputData",
+    "maskIsShow"
   ],
   data() {
     return {
       display: "block",
     };
   },
+  created(){
+
+  },
   mounted() {
     this.$bus.on("hiddenOrShowOtherWindow", this.hiddenOrShowThisWindow);
   },

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

@@ -4,14 +4,12 @@
     v-if="resizablePinnedDetail.detailMessageList.length"
     :style="{ display: display, height: '100vh' }"
     class="menuWindow"
-    data-id="1111"
   >
     <div
       class="x-window synopkg-window sds-window-v5 x-resizable-pinned"
       style="
         position: absolute;
         visibility: visible;
-        transform: translate(-50%, -50%);
       "
       :style="{
         width: detailMessage.width,
@@ -30,13 +28,13 @@
       @click.capture="changeDialogMenuWindow(detailMessage.id)"
     >
       <div></div>
-      <div class="x-window-tl" @click.capture="moveWindowPosition">
+      <div class="x-window-tl"
+              @mousedown.stop="mousedownWindowHeader($event, detailMessageIndex)">
         <div class="x-window-tr">
           <div class="x-window-tc">
             <div
               class="x-window-header x-panel-icon x-window-draggable"
               :style="{ backgroundImage: `url(${detailMessage.titleImgUrl})` }"
-              @mousedown="mousedownWindowHeader($event, detailMessageIndex)"
             >
               <div class="x-window-toolCt">
                 <div
@@ -279,11 +277,18 @@
 </template>
 
 <script>
+import {moveWindow} from '../../../../common/common'
 export default {
   props: ["defaultZIndex", "detailMessageList"],
   data() {
     return {
       display: "block",
+      windowFirstClick:{
+        layerX:0,
+        layerY:0,
+        screenX:0,
+        screenY:0,
+      },
       resizablePinnedDetail: {
         detailMessageList: [],
       },
@@ -303,10 +308,8 @@ export default {
     this.$bus.on("menuItemChanged", this.menuItemChanged);
     this.$bus.on("clickMenuItem", this.clickMenuItem);
     this.$bus.on("hiddenOrShowOtherWindow", this.hiddenDialogWindow);
-    this.resizablePinnedDetail.detailMessageList = JSON.parse(
-      JSON.stringify(this.detailMessageList)
-    );
-    JSON.parse(JSON.stringify(this.detailMessageList)).forEach(
+    this.resizablePinnedDetail.detailMessageList = this.detailMessageList;
+    this.resizablePinnedDetail.detailMessageList.forEach(
       (item, index) => {
         this.detailMessageWidthList[index] = item.width;
       }
@@ -370,6 +373,10 @@ export default {
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
         defaultZIndex;
       this.lastCheckIndex = detailMessageIndex;
+      if(this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width !== '100%'){
+        let left = (document.documentElement.clientWidth - parseInt(this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width.replace('px',''))) / 2
+        this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left = left + 'px'
+      }
     },
     // 切换弹出的menu窗口
     changeDialogMenuWindow(id) {
@@ -430,6 +437,7 @@ export default {
         this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
           return item.id === id;
         });
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top = '40px'
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
         "100%";
       this.resizablePinnedDetail.detailMessageList[
@@ -438,11 +446,11 @@ export default {
       this.resizablePinnedDetail.detailMessageList[
         detailMessageIndex
       ].iconMaximize = "none";
-      if (
-        detailMessageIndex ||
-        (detailMessageIndex === 0 && detailMessageIndex !== -1)
-      ) {
-        this.openDialogWindow(detailMessageIndex);
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left = 0
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top = '40px'
+      let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
+      if(! window.className.includes(' x-window-maximized')){
+        window.className = window.className + ' x-window-maximized'
       }
     },
     //恢复弹出窗口宽度
@@ -451,6 +459,7 @@ export default {
         this.resizablePinnedDetail.detailMessageList.findIndex((item) => {
           return item.id === id;
         });
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].top = 0
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width =
         this.detailMessageWidthList[detailMessageIndex];
       this.resizablePinnedDetail.detailMessageList[
@@ -459,6 +468,12 @@ export default {
       this.resizablePinnedDetail.detailMessageList[
         detailMessageIndex
       ].iconMaximize = "block";
+      let left = (document.documentElement.clientWidth - parseInt(this.resizablePinnedDetail.detailMessageList[detailMessageIndex].width.replace('px',''))) / 2
+      this.resizablePinnedDetail.detailMessageList[detailMessageIndex].left = left + 'px'
+      let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
+      if(window.className.includes(' x-window-maximized')){
+        window.className = window.className.replace(' x-window-maximized','')
+      }
     },
     //关闭弹出窗口
     closeWindow(id) {
@@ -498,28 +513,47 @@ export default {
         return x < y ? -1 : x > y ? 1 : 0;
       });
     },
-
     // 鼠标按下弹出框窗口头部
     mousedownWindowHeader(e, index) {
-      document.addEventListener(
-        "mousemove",
-        this.moveWindowPosition
-      );
-      document.addEventListener(
-        "mouseup",
-        this.upWindowPosition
-      );
-      
+      document.documentElement.click()
+      this.openDialogWindow(index)
+      if(this.resizablePinnedDetail.detailMessageList[
+        index
+      ].iconMaximize === "block"){
+        this.windowFirstClick.layerX = e.layerX;
+        this.windowFirstClick.screenX = document.documentElement.clientWidth;
+        this.windowFirstClick.layerY = e.layerY;
+        this.windowFirstClick.screenY = document.documentElement.clientHeight;
+        document.addEventListener(
+          "mousemove",
+          this.moveWindowPosition
+        );
+        document.addEventListener(
+          "mouseup",
+          this.upWindowPosition
+        );
+      }
     },
     // 移动弹出框窗口位置
     moveWindowPosition(e) {
+      let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
+      let obj = moveWindow(e,window,this.windowFirstClick.layerX,this.windowFirstClick.layerY,this.windowFirstClick.screenX,this.windowFirstClick.screenY)
+      window.style.left = obj.moveX +'px'
+      window.style.top = obj.moveY +'px'
+      if (!window.className.includes(' x-panel-ghost')){
+        window.className = window.className + ' x-panel-ghost'
+      }
     },
     // 鼠标松开
     upWindowPosition(e){
-      document.removeEventListener(
-          "mousemove",
-          this.moveWindowPosition
-        );
+      let window = document.querySelector('.sds-window-v5.x-resizable-pinned.active-win')
+      if (window.className.includes(' x-panel-ghost')){
+        window.className = window.className.replace(' x-panel-ghost','')
+      }
+      let index = -1
+      // document.removeEventListener("mousemove", this.moveWindowPosition.bind(this,e,index));
+      document.removeEventListener("mousemove", this.moveWindowPosition);
+      document.removeEventListener("mouseup", this.upWindowPosition);
     },
     // 小图标被改变了
     menuItemChanged(menuList) {
@@ -540,10 +574,4 @@ export default {
 };
 </script>
 <style scoped lang="css">
-@media screen and (max-height: 600px) {
-  .x-window.synopkg-window {
-    top: 0 !important;
-    transform: translate(-50%, 0px) !important;
-  }
-}
 </style>  

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

@@ -0,0 +1,102 @@
+<template>
+  <div
+    class="vue-portal-target"
+    :style="{ left: left, top: top, display: display }"
+  >
+    <div
+      class="v-menu"
+      style="height: auto; width: auto; z-index: 15000"
+      v-if="selectList.length"
+    >
+      <div class="v-trap-focus-indicator"></div>
+      <div class="v-trap-focus-body">
+        <div
+          class="v-menu-item"
+          :class="select.cls"
+          v-for="(select, selectIndex) in selectList"
+          :key="select.id"
+          @mouseenter="mouseenterSelect(selectIndex)"
+          @mouseleave="mouseleaveSelect(selectIndex)"
+          @click="clickSelect(select)"
+        >
+          {{ select.text }}
+        </div>
+      </div>
+      <div class="v-trap-focus-indicator"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    this.$bus.on("showPortalTarget", this.showPortalTarget);
+    this.$bus.on("hiddenPortalTarget", this.hiddenPortalTarget);
+  },
+  data() {
+    return {
+      left: "457px",
+      top: "184px",
+      display: "none",
+      selectList: [],
+      selectedItem: {},
+    };
+  },
+  methods: {
+    //   显示本页面
+    showPortalTarget(obj) {
+      this.left = obj.left + "px";
+      this.top = obj.top + "px";
+      this.selectList = obj.selectList;
+      this.selectedItem = JSON.parse(JSON.stringify(obj.item));
+      console.log(this.selectedItem);
+      this.selectList.forEach((item, index) => {
+        if (index === 0) {
+          item.cls = "active";
+        } else {
+          item.cls = "";
+        }
+      });
+      if (this.display === "none") {
+        this.display = "block";
+      }
+    },
+    // 隐藏本页面
+    hiddenPortalTarget() {
+      if (this.display === "block") {
+        this.display = "none";
+      }
+    },
+    // 移入选择项改变背景颜色
+    mouseenterSelect(selectIndex) {
+      this.selectList.forEach((item, index) => {
+        if (index === selectIndex) {
+          item.cls = "active";
+        } else {
+          item.cls = "";
+        }
+      });
+    },
+    // 移出选择项改变背景颜色
+    mouseleaveSelect(selectIndex) {
+      this.selectList[selectIndex].cls = "";
+    },
+    // 点击选择项
+    clickSelect(select) {
+      this.selectedItem.selectList.forEach((item) => {
+        if ((item.text = "添加到桌面")) {
+          item.text = "删除快捷方式";
+        }
+      });
+      if (select.text === "添加到桌面") {
+        this.$bus.emit("pushShortcutList", this.selectedItem);
+      }
+      if (select.text === "删除快捷方式") {
+        this.$bus.emit("spliceShortcutList", this.selectedItem);
+      }
+    },
+  },
+  components: {},
+  name: "PortalTarget",
+};
+</script>

src/component/Container/DesktopAppView/index.vue

@@ -6,7 +6,8 @@
         class="syno-sds-appview"
         :class="cls"
         style="width: 100%; height: 100%"
-        :style="{ display: display}"
+        :style="{ display: display }"
+        @contextmenu.prevent=""
       >
         <div class="syno-sds-appview-container">
           <div class="search-field" style="width: 278px">
@@ -46,6 +47,13 @@
                   v-for="detailMessage in desktopAppViewDetail.detailMessageList"
                   :key="detailMessage.id"
                   @click.stop="clickAppViewItem(detailMessage.id)"
+                  @contextmenu.prevent="
+                    contextmenuAppViewItem(
+                      $event,
+                      detailMessage,
+                      detailMessage.selectList
+                    )
+                  "
                 >
                   <div
                     class="image"
@@ -67,6 +75,7 @@
           </div>
           <div class="sds-desktop-no-result" v-else>找不到符合的项目。</div>
         </div>
+        <PortalTarget></PortalTarget>
       </div>
     </div>
     <AppViewItem
@@ -78,6 +87,7 @@
 
 <script>
 import AppViewItem from "./AppViewItem";
+import PortalTarget from "./PortalTarget";
 export default {
   props: ["defaultZIndex", "appViewData"],
   data() {
@@ -91,15 +101,18 @@ export default {
       firstOpen: true,
     };
   },
+  created() {
+    this.desktopAppViewDetail.detailMessageList = this.appViewData;
+  },
   mounted() {
     this.$bus.on("showAppView", this.showAppView);
-    this.desktopAppViewDetail.detailMessageList = this.appViewData;
   },
   methods: {
     // 显示appView页面
     showAppView() {
       this.display = "block";
       this.$bus.emit("hiddenOrShowOtherWindow", true);
+      this.$bus.emit("hiddenPortalTarget");
       window.addEventListener("click", this.WindowClick);
       if (this.firstOpen) {
         this.desktopAppViewDetail.detailMessageList.forEach((item) => {
@@ -115,14 +128,13 @@ export default {
           });
         }, 800);
       }
-      setTimeout(()=>{
+      setTimeout(() => {
         this.cls = "syno-sds-appview-animate";
-      },0)
+      }, 0);
       this.firstOpen = false;
     },
     // 搜索框聚焦
     searchInputFocus(e) {
-      
       if (
         !e.srcElement.parentElement.className.includes(" search-field-focused")
       ) {
@@ -152,15 +164,24 @@ export default {
       this.$bus.emit("hiddenOrShowOtherWindow", false);
       window.removeEventListener("click", this.WindowClick);
       this.$bus.emit("showDialogWindow");
+      this.$bus.emit("hiddenPortalTarget");
     },
     // 点击appViewItem
     clickAppViewItem(id) {
       this.$bus.emit("clickAppViewItem", id);
       this.WindowClick();
     },
+    // 鼠标点击右键
+    contextmenuAppViewItem(e, item, selectList) {
+      e.preventDefault();
+      console.log(e, item, selectList);
+      let obj = { left: e.clientX, top: e.clientY, item, selectList };
+      this.$bus.emit("showPortalTarget", obj);
+    },
   },
   components: {
     AppViewItem,
+    PortalTarget,
   },
   name: "DesktopAppView",
 };
@@ -183,11 +204,13 @@ export default {
 }
 
 .syno-sds-appview .sds-app-panel .sds-desktop-layout {
-  justify-content: space-around;
+  justify-content: center;
 }
 
 .syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon {
-  align-self: flex-start;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
 }
 
 .search-field input::-webkit-input-placeholder {

src/component/Container/Mask/index.vue

@@ -34,7 +34,6 @@ export default {
       }
       this.zIndex = this.defaultZIndex + 10
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
-      // this.maskShowOrHidden(true)
       this.$bus.emit('maskShowOrHidden',true)
     },
     // 关闭弹出层
@@ -42,7 +41,6 @@ export default {
       this.visibility = "hidden";
       this.zIndex = this.defaultZIndex - 10
       this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-      // this.maskShowOrHidden(false)
       this.$bus.emit('maskShowOrHidden',false)
     },
   },

src/main.js

@@ -1,6 +1,4 @@
 import { createApp } from 'vue';
 import App from './App.vue'
 const app = createApp(App);
-app.mount("#root");
-// import mitt from "mitt"
-// app.config.globalProperties.$bus = mitt();
+app.mount("#root");