Pārlūkot izejas kodu

新增首页桌面用户设置页面

liupeng 3 gadi atpakaļ
vecāks
revīzija
a47328f9ac

BIN
public/image/index/inputArrowDown.png


BIN
public/image/index/personalSetting.png


BIN
public/image/index/personalSettingInfo.png


BIN
public/image/index/userAbout.png


BIN
public/image/index/userLogout.png


BIN
public/image/index/userPoweroff.png


BIN
public/image/index/userReboot.png


BIN
public/image/index/userSetting.png


+ 56 - 0
public/static/css/style/style.css

@@ -2276,6 +2276,62 @@ ul.sds-desktop-shortcut {
     margin: 8px 0 8px 0;
 }
 
+/* userSetting */
+.window-header-tool-wrapper .tool.help{
+    background-image: url(../../../image/index/wdheader_bt_help.png);
+}
+
+.window-header-tool-wrapper .tool.minimize{
+    background-image: url(../../../image/index/wdheader_bt_minimize.png);
+}
+
+.syno-sds-personal .account-page {
+    height: 100%;
+}
+
+.syno-sds-personal .account-page .v-ps {
+    padding-right: 0;
+}
+
+.fieldset-body[data-v-38230d33] {
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-bottom: 8px;
+}
+
+.account-name[data-v-38230d33] {
+    height: 20px;
+    display: inline-block;
+    line-height: 20px;
+    padding: 4px 0;
+    vertical-align: top;
+}
+
+.syno-sds-personal .account-page .v-textfield-wrapper {
+    width: 270px;
+}
+
+.v-whitetip-icon{
+    background-image: url(../../../image/index/personalSettingInfo.png);
+}
+
+.v-select-wrapper .v-select-dropdown-icon{
+    background-image: url(../../../image/index/inputArrowDown.png);
+}
+
+.sds-personal-settings-window .introduceText {
+    font-size: 13px;
+    padding-top: 4px;
+    padding-bottom: 10px;
+    line-height: 20px;
+}
+
+.syno-sds-personal .v-fieldset-title-wrapper {
+    z-index: 0;
+}
+
+
+
 /* 清除弹出窗 */
 .sds-window-v5.x-window-dlg.confirm-delete-icon:before {
     content: '';

+ 1 - 1
src/component/Desktop/FixWindow/ConnectedUser/index.vue

@@ -24,7 +24,7 @@
                             <div class="x-grid3-viewport">
                                 <div class="x-grid3-scroller"
                                     style="overflow: hidden; width: 318px; height: 168px;">
-                                    <div class="x-grid3-body" style="width:294px;" v-for="detailMessage in connectedUserDetail.detailMessageList">
+                                    <div class="x-grid3-body" style="width:294px;" v-for="detailMessage in connectedUserDetail.detailMessageList" :key="detailMessage.id">
                                         <div class="x-grid3-row  x-grid3-row-first x-grid3-row-last"
                                             style="width:294px;">
                                             <table class="x-grid3-row-table"

+ 1 - 1
src/component/Desktop/FixWindow/Copy/index.vue

@@ -27,7 +27,7 @@
                                     style="overflow: hidden; width: 318px; height: 168px;">
                                     <div class="x-grid3-body" style="width:290px;">
                                         <div class="x-grid3-row  x-grid3-row-first"
-                                            style="width:290px;" v-for="detailMessageList in copyDetail.detailMessageList" key="detailMessageList.id">
+                                            style="width:290px;" v-for="detailMessageList in copyDetail.detailMessageList" :key="detailMessageList.id">
                                             <table class="x-grid3-row-table"
                                                 border="0" cellspacing="0"
                                                 cellpadding="0"

+ 20 - 49
src/component/Desktop/FixWindow/index.vue

@@ -177,7 +177,7 @@ export default {
         moveY: 0,
       },
       widgetListIsBottom: false,
-      thumbYHeight: '104px',
+      thumbYHeight: '424px',
       thumbYDisplay: 'none',
       portalDetail: {
         display: "none",
@@ -290,8 +290,7 @@ export default {
     this.$bus.on(
       "changeOrHiddenWidgetPosition",
       this.changeOrHiddenWidgetPosition
-    );
-    // this.$bus.on("dialogWindowZIndexIsMax", this.dialogWindowZIndexIsMax);
+    )
     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);
@@ -299,13 +298,17 @@ export default {
     let el2 = document.querySelector(".v-widget-window .v-widget-list");
     let el3 = document.querySelector(".v-widget-window .ps__rail-y");
     if(el2.offsetHeight > el3.offsetHeight){
+        this.bottom = '0'
         this.thumbYDisplay = 'block'
         this.thumbYHeight = 'calc((100vh - 52px) / 2)'
     }
-    window.onresize = ()=>{
+    window.onresize = (e)=>{
       if(el2.offsetHeight > el3.offsetHeight){
+        this.bottom = '0'
         this.thumbYDisplay = 'block'
         this.thumbYHeight = 'calc((100vh - 52px) / 2)'
+      }else{
+        this.thumbYDisplay = 'none'
       }
     }
   },
@@ -318,7 +321,6 @@ export default {
         this.$bus.emit("changeMinDefaultZindexWindowCls");
         this.$bus.emit("fixWindowZIndexMax", true);
       }
-      // this.dialogWindowZIndexIsMax(false);
     },
     // 修改changeFixWindow
     changeFixWindowZIndex() {
@@ -326,7 +328,6 @@ export default {
         this.zIndex = 9040;
       }
       if (this.cls != "deactve-win") this.cls = "deactve-win";
-      // this.dialogWindowZIndexIsMax(true);
     },
     //点击进度条
     mousedownProgress(e) {
@@ -366,8 +367,6 @@ export default {
       } else if (moveY > el1.offsetHeight - el.offsetHeight) {
         moveY = el1.offsetHeight - el.offsetHeight;
         this.widgetListIsBottom = true
-
-
       }
       let moveY2 =
         -(
@@ -387,11 +386,6 @@ export default {
       let el1 = document.querySelector(".v-widget-window .ps__rail-y");
       let el2 = document.querySelector(".v-widget-window .v-widget-list");
       el.removeEventListener("mousemove", this.moveProgress);
-      if(el2.offsetHeight > el1.offsetHeight){
-        this.thumbYDisplay = 'block'
-        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
-      }
-      // this.clearProgressMArk();
     },
     // 滚动窗口列表
     scrollList(e) {
@@ -407,10 +401,6 @@ export default {
     // 点击勾选小窗口的加号
     selectWidgetItem() {
       this.$bus.emit("showOrHiddenSelectWidgetItem", this.portalDetail);
-      window.onclick = (e) => {
-        e.stopPropagation();
-        this.$bus.emit("showOrHiddenSelectWidgetItem", "none");
-      };
     },
     // 点击小窗口选择框的每一项
     showOrHiddenWidgetItem(obj) {
@@ -419,9 +409,9 @@ export default {
       this.portalDetail.detailMessageList[obj.index].cls = obj.cls1;
       this.portalDetail.detailMessageList.forEach((item) => {
         if (item.cls && item.cls.includes(" active")) {
-          item.cls = item.cls.replace(" active");
+          item.cls = item.cls.replace(" active",'');
         } else if (item.cls && item.cls.includes("active")) {
-          item.cls = item.cls.replace("active");
+          item.cls = item.cls.replace("active",'');
         }
       });
       let cls = this.portalDetail.detailMessageList[0].cls;
@@ -431,35 +421,31 @@ export default {
     },
     // 跟随可视小窗口的个数改变进度条高度
     changeThumbHeight(selectedNum) {
+      let el1= document.querySelector(".v-widget-window .v-widget-list");
+      let el2 = document.querySelector(".v-widget-window .ps__rail-y");
       if (selectedNum > 2) {
         if (selectedNum >= 6) {
           selectedNum = 6;
         }
         this.thumbYDisplay = "block";
         this.thumbYHeight = (7 - selectedNum) * 70 + "px";
-      } else {
-        this.thumbYDisplay = "none";
+      }else{
+        this.thumbYDisplay = "none";      
       }
-      if(window.screenY <= 250){
-        this.bottom = '0'
-        this.thumbYDisplay = 'block'
+       if(el2.offsetHeight < 424 && el1.offsetHeight > el2.offsetHeight){
+        this.thumbYDisplay = "block";
         this.thumbYHeight = 'calc((100vh - 52px) / 2)'
       }
+      // if(this.thumbYHeight >= el.offsetHeight){
+      //   this.bottom = '0'
+      //   this.thumbYDisplay = 'block'
+      //   this.thumbYHeight = 'calc((100vh - 52px) / 2)'
+      // }
       this.selectedNum = selectedNum;
     },
-    // 将记住的进度条坐标重置
-    // clearProgressMArk() {
-    //   this.progrecssFirstClick.clientY = 0
-    //   this.moveY = 0
-    //     this.progrecssFirstClick = {
-    //       lastY: 0,
-    //       clickY: 0,
-    //     };
-    // },
     //点击固定窗口头部
     mousedownWidgetHeader(e) {
       let el = document.querySelector(".v-widget-window .v-window-header-wrapper");
-      let el1 = document.querySelector(".v-widget-window");
       this.widgetFirstClick.clientX = e.clientX;
       this.widgetFirstClick.offsetX = e.offsetX;
       this.widgetFirstClick.screenX = document.documentElement.clientWidth;
@@ -483,7 +469,6 @@ export default {
       if (moveX > this.widgetFirstClick.screenX - el1.offsetWidth) {
         moveX = this.widgetFirstClick.screenX - el1.offsetWidth;
       }
-
       // Y轴
       let moveY = 0;
       moveY = e.clientY - this.widgetFirstClick.offsetY;
@@ -545,10 +530,6 @@ export default {
     // 显示或隐藏位置选择框
     selectWidgetPosition() {
       this.$bus.emit("showOrHiddenSelectWidgetPosition", this.portalDetail1);
-      window.onclick = (e) => {
-        e.stopPropagation();
-        this.$bus.emit("showOrHiddenSelectWidgetPosition", "none");
-      };
     },
     //改变固定弹出框的位置
     changeOrHiddenWidgetPosition(obj) {
@@ -569,12 +550,6 @@ export default {
       if (cls && !cls.includes("active")) {
         this.portalDetail1.detailMessageList[0].cls = cls + " active";
       }
-      // sds-desktop .v-widget-window  .v-widget-window .v-widget-items-wrapper{
-      //   height: calc(100vh - 42px) !important;
-      // }
-      // #sds-desktop .v-widget-window{
-      //     height: calc(100vh - 10px) !important;
-      // }
       if (obj.index == 0) {
         let el1 = document.querySelector(".v-widget-window");
         let el2 = document.querySelector(".v-widget-window  .v-widget-items-wrapper");
@@ -656,8 +631,4 @@ input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
     color: #fff!important;
 }
-
-/* 
-
-*/
 </style>

+ 0 - 1
src/component/Desktop/Mask/index.vue

@@ -25,7 +25,6 @@ export default {
     },
     // 关闭弹出层
     closeMask(){
-        console.log(1111)
         this.display = 'none'
     }
   },

+ 0 - 1
src/component/Desktop/Menu/index.vue

@@ -55,7 +55,6 @@ export default {
     },
     // 点击小图标打开大图标
     clickMenuItem(imgUrl,menuIndex){
-      console.log('click')
       this.$bus.emit('clickMenuItem',imgUrl)
       this.menuList.forEach(menu => {
         menu.backgroundColor = 'rgba(50,60,70,0.9)'

+ 0 - 1
src/component/Desktop/NotifySetting/index.vue

@@ -1054,7 +1054,6 @@ export default {
     },
     // 点击全选全不选
     clickCheckAll() {
-      console.log(this.notifySettingDetail.tableHeaderContant2.cls);
       if (
         this.notifySettingDetail.tableHeaderContant2.cls ===
         "syno-ux-cb-checked"

+ 0 - 2
src/component/Desktop/NotifyShowall/index.vue

@@ -447,11 +447,9 @@ export default {
       this.thContantArray.forEach(item=>{
         item.cls = ''
       })
-      console.log(thContantIndex);
       if(this.thContantArray[thContantIndex].cls === ''){
         this.thContantArray[thContantIndex].cls = 'sorting'
       }
-      console.log(this.thContantArray[thContantIndex].cls1)
       if(this.thContantArray[thContantIndex].cls1 === 'down'){
         this.thContantArray[thContantIndex].cls1 = 'up'
       }else{

+ 19 - 48
src/component/Desktop/NotifyTrayPanel/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- notifyTrayPanel -->
   <div
     class="x-panel sds-notify-tray-panel sds-tray-panel"
     style="
@@ -399,15 +400,14 @@ export default {
   },
   created() {},
   mounted() {
-    this.$bus.on("openOrHiddenNotify", this.openOrHiddenNotify);
-    // this.$bus.on("windowMaxChange",this.windowMaxChange)
+    this.$bus.on("openNotifyTrayPanel", this.openNotifyTrayPanel);
       this.$bus.on("clearAllNotifyMessage",this.clearAllNotifyMessage)
 
   },
   components: {},
   methods: {
-    //显示或隐藏本页面
-    openOrHiddenNotify(e) {
+    //显示本页面
+    openNotifyTrayPanel(e) {
       if (this.display === "none") {
         let date = new Date().getTime();
         this.notifyTrayPanelDetail.detailMessageList.forEach((item) => {
@@ -440,11 +440,6 @@ export default {
                 : timestamp.getSeconds();
             return Y + M + D + h + m + s;
           }
-          console.log(
-            timestampToTime(item.date),
-            timestampToTime(date),
-            item.id
-          );
           if (item.date.length == 10) {
             var itemDate = item.date * 1000;
           } else {
@@ -472,16 +467,7 @@ export default {
         this.display = "block";
         e.srcElement.className = e.srcElement.className + " pressed";
         this.$bus.emit("notifyMessageRead");
-        // this.$bus.emit("windowMaxChange",'notifyTray')
-        window.onclick = () => {
-          this.display = "none";
-          if (e.srcElement.className.includes(" pressed")) {
-            e.srcElement.className = e.srcElement.className.replace(
-              " pressed",
-              ""
-            );
-          }
-        };
+        window.addEventListener('click',this.hiddenNotifyAndchangeIconColor,true)
       } else {
         this.display = "none";
         if (e.srcElement.className.includes(" pressed")) {
@@ -492,27 +478,30 @@ export default {
         }
       }
     },
-    //打开详情页面
-    openNotifyDetail(detailMessage, detailMessageIndex) {
-      this.display = "none";
-      this.$bus.emit("openNotifyDetail", detailMessage);
-      this.notifyTrayPanelDetail.detailMessageList[detailMessageIndex].cls = "";
+    // 隐藏本页面并更新页面对应的图标颜色
+    hiddenNotifyAndchangeIconColor(e){
       let el = document.querySelector(".tray-item.notify-button");
+      if(e.srcElement !== el){
+        this.display = "none";
+      }
       if (el.className && el.className.includes(" pressed")) {
         el.className = el.className.replace(" pressed", "");
       }
+      window.removeEventListener('click',this.hiddenNotifyAndchangeIconColor,true)
+    },
+    //打开详情页面
+    openNotifyDetail(detailMessage, detailMessageIndex) {
+      this.hiddenNotifyAndchangeIconColor()
+      this.$bus.emit("openNotifyDetail", detailMessage);
+      this.notifyTrayPanelDetail.detailMessageList[detailMessageIndex].cls = "";
     },
     // 打开显示全部页面
     openNotifyShowall() {
-      this.display = "none";
+      this.hiddenNotifyAndchangeIconColor()
       this.$bus.emit(
         "openNotifyShowall",
         this.notifyTrayPanelDetail.detailMessageList
       );
-      let el = document.querySelector(".tray-item.notify-button");
-      if (el.className && el.className.includes(" pressed")) {
-        el.className = el.className.replace(" pressed", "");
-      }
     },
     // 清除全部
     clearAll() {
@@ -520,35 +509,17 @@ export default {
         cls: "confirm-delete-icon",
         title: "",
         text: "所有桌面通知都会被清除。是否确定要继续?",
-        // buttonList:[
-        //   {
-        //     id:0,
-        //     html:'<span cellspacing="0" class="x-btn syno-ux-button x-btn-noicon syno-ux-button-grey" style="width: auto; margin-left: 0px;"><em class=" x-unselectable"><button type="button"class=" x-btn-text">取消</button></em></span>'
-        //   },
-        //   {
-        //     id:1,
-        //     html:'<span cellspacing="0" class="x-btn syno-ux-button x-btn-noicon syno-ux-button-red syno-ux-button-blue" style="width: auto; margin-left: 0px;"><em class=" x-unselectable"><button type="button" class=" x-btn-text">清除全部</button></em></span>'
-        //   }
-        // ]
       };
       this.$bus.emit("openDeleteNotifyMessage", obj);
       this.$bus.emit("openMask");
     },
-    // 切换页面窗口的层级
-    // windowMaxChange(str){
-    //   if(str === 'notifyTray' ){
-    //     this.display = 'block'
-    //   }else{
-    //     this.display = 'none'
-    //   }
-    // }
     // 清除所有信息
     clearAllNotifyMessage() {
       this.notifyTrayPanelDetail.detailMessageList = [];
     },
     // 打开设置页面
     openNotifySetting(){
-      this.display = "none";
+      this.hiddenNotifyAndchangeIconColor()
       this.$bus.emit('openNotifySetting')
     }
   },

+ 8 - 2
src/component/Desktop/PortaSelectPosition/index.vue

@@ -182,10 +182,16 @@ export default {
         this.portalDetail.detailMessageList = JSON.parse(
           JSON.stringify(obj.detailMessageList)
         );
-
         if (this.portalDetail.display === "none") {
           this.portalDetail.display = "block";
-          this.$bus.emit("showOrHiddenSelectWidgetItem", "none");
+          let fn = (e)=>{
+              let el = document.querySelector('.v-widget-header-tool-icon.dock')
+              if(e.srcElement !== el){
+                  this.portalDetail.display = 'none'
+              }
+              window.removeEventListener('click',fn,true)
+          }
+          window.addEventListener('click',fn,true)
         } else if (this.portalDetail.display === "block") {
           this.portalDetail.display = "none";
         }

+ 9 - 2
src/component/Desktop/PortalSelectDialogWindow/index.vue

@@ -155,11 +155,18 @@
                         this.$bus.emit(
                         "showOrHiddenSelectWidgetPosition",'none'
                         );
+                        let fn = (e)=>{
+                            let el = document.querySelector('.v-widget-header-tool-icon.add')
+                            if(e.srcElement !== el){
+                                this.portalDetail.display = 'none'
+                            }
+                            window.removeEventListener('click',fn,true)
+                        }
+                        window.addEventListener('click',fn,true)
+
                     }else if(this.portalDetail.display === 'block'){
                         this.portalDetail.display = 'none'
                     }
-                }else{
-                    this.portalDetail.display = 'none'
                 }
             },
             //统计已选择的个数

+ 0 - 2
src/component/Desktop/Shortcut/ResizablePinned/index.vue

@@ -403,7 +403,6 @@ export default {
         this.resizablePinnedDetail.detailMessageList[
           detailMessageIndex
         ].zIndex = this.defaultZIndex - 10;
-        console.log(detailMessageList[detailMessageList.length - 1].title)
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
         let index = this.resizablePinnedDetail.detailMessageList.findIndex(item=>{
           return item.title === detailMessageList[detailMessageList.length - 1].title
@@ -463,7 +462,6 @@ export default {
       this.$bus.emit("closeDialogWindow", imgUrl);
       let detailMessageList =
         this.resizablePinnedDetail.detailMessageList.filter((item) => {
-          console.log(item.display)
           return item.display === "block";
         });
       if (detailMessageList.length) {

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 1782 - 0
src/component/Desktop/UserSetting/index.vue


+ 86 - 0
src/component/Desktop/UserTrayPanel/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <!-- userTrayPanel -->
+  <div
+    tabindex="-1"
+    class="taskbar-menu user-menu v-menu"
+    style="height: auto; width: 200px; right: 20px; top: 41px; z-index: 15000"
+    :style="{display: display}"
+  >
+    <div class="v-trap-focus-indicator"></div>
+    <div class="v-trap-focus-body">
+      <div class="taskbar-title">{{userTrayPanelDetail.title}}</div>
+      <div class="v-menu-item">
+        <span class="menu-icon setting"></span>
+        个人设置
+      </div>
+      <div class="v-menu-item-divider"></div>
+      <div class="v-menu-item">
+        <span class="menu-icon reboot"></span>
+        重新启动
+      </div>
+      <div class="v-menu-item">
+        <span class="menu-icon poweroff"></span>
+        关机
+      </div>
+      <div class="v-menu-item-divider"></div>
+      <div class="v-menu-item">
+        <span class="menu-icon about"></span>
+        关于
+      </div>
+      <div class="v-menu-item-divider"></div>
+      <div class="v-menu-item">
+        <span class="menu-icon logout"></span>
+        退出
+      </div>
+    </div>
+    <div class="v-trap-focus-indicator"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted(){
+    this.$bus.on('openUserTrayPanel',this.openUserTrayPanel)
+  },
+  data() {
+    return {
+      display: 'none',
+      userTrayPanelDetail: {
+        title:'synology',
+        detailMessage: [],
+      },
+    };
+  },
+  methods:{
+    openUserTrayPanel(e){
+      if(this.display === 'none'){
+        this.display = "block";
+        e.srcElement.className = e.srcElement.className + " pressed";
+        window.addEventListener('click',this.hiddenUserAndchangeIconColor,true)
+      }else {
+        this.display = "none";
+        if (e.srcElement.className.includes(" pressed")) {
+          e.srcElement.className = e.srcElement.className.replace(
+            " pressed",
+            ""
+          );
+        }
+      }
+    },
+    // closeU
+    // 隐藏本页面并更新页面对应的图标颜色
+    hiddenUserAndchangeIconColor(e){
+      let el = document.querySelector(".tray-item.user-button");
+      if(e.srcElement !== el){
+        this.display = "none";
+      }
+      if (el.className && el.className.includes(" pressed")) {
+        el.className = el.className.replace(" pressed", "");
+      }
+      window.removeEventListener('click',this.hiddenUserAndchangeIconColor,true)
+    }
+  },
+  components: {},
+  name: "User",
+};
+</script>

+ 5 - 1
src/component/Desktop/index.vue

@@ -9,6 +9,7 @@
         <NotifyShowall :defaultZIndex='defaultZIndex'></NotifyShowall>
         <NotifySetting :defaultZIndex='defaultZIndex'></NotifySetting>
         <UserTrayPanel></UserTrayPanel>
+        <UserSetting></UserSetting>
         <DeleteNotifyMessage></DeleteNotifyMessage>
         <Mask></Mask>
     </div>
@@ -22,6 +23,7 @@ import NotifyTrayPanel from './NotifyTrayPanel'
 import NotifyTrayPanelDetail from './NotifyTrayPanelDetail'
 import NotifyShowall from './NotifyShowall'
 import NotifySetting from './NotifySetting'
+import UserSetting from './UserSetting'
 import DeleteNotifyMessage from './DeleteNotifyMessage'
 import Mask from './Mask'
 import UserTrayPanel from './UserTrayPanel'
@@ -44,6 +46,7 @@ export default {
         this.display = 'none'
       }else{
         this.display = 'block'
+
       }
     }
   },
@@ -55,9 +58,10 @@ export default {
     NotifyTrayPanelDetail,
     NotifyShowall,
     NotifySetting,
+    UserTrayPanel,
+    UserSetting,
     DeleteNotifyMessage,
     Mask,
-    UserTrayPanel
   },
   name:'Desktop',
 }

+ 10 - 7
src/component/DesktopAppView/index.vue

@@ -833,17 +833,20 @@ export default {
     showAppView(){
       this.display = 'block'
       this.$bus.emit('appViewIsOpen',true)
-      window.onclick = ()=>{
-        this.display = 'none'
-        this.$bus.emit('appViewIsOpen',false)
-      }
+      window.addEventListener('click',this.WindowClick,true)
     },
     // 搜索框聚焦
     searchInputFocus(e){
-      if(! e.srcElement.parentElement.className.includes('search-field-focused'))
-      console.log(e.srcElement.parentElement.className += ' search-field-focused')
+      if(! e.srcElement.parentElement.className.includes('search-field-focused')){
+
+      }
+    },
+    // 点击页面关闭本页面
+    WindowClick(){
+      this.display = 'none'
+      this.$bus.emit('appViewIsOpen',false)
+      window.removeEventListener('click',this.WindowClick,true)
     }
-    // 
   },
   components: {},
   name: "DesktopAppView",

+ 9 - 6
src/component/Header/index.vue

@@ -14,10 +14,10 @@
     </div>
     <div class="tray-container">
       <span class="system-tray-wrapper">
-        <button class="tray-item notify-button system" @click.stop="openOrHiddenNotify">
+        <button class="tray-item notify-button system" @click.capture="openNotifyTrayPanel">
           <div :class="notifyMessaggeCls"></div>
         </button>
-        <button class="tray-item user-button system">
+        <button class="tray-item user-button system" @click.capture="openUserTrayPanel">
           <div></div>
         </button>
         <button
@@ -55,20 +55,23 @@ export default {
     },
     //appView是否打开
     appViewIsOpen(bol){
-      console.log(bol)
       if(bol){
         this.display = 'none'
       }else{
         this.display = 'flex'
       }
     },
-    //打开或者关闭信息页面
-    openOrHiddenNotify(e){
-      this.$bus.emit('openOrHiddenNotify',e)
+    //打开信息页面
+    openNotifyTrayPanel(e){
+      this.$bus.emit('openNotifyTrayPanel',e)
     },
     // 笔记消息已读
     notifyMessageRead(){
       this.notifyMessaggeCls = ''
+    },
+    // 打开用户页面
+    openUserTrayPanel(e){
+      this.$bus.emit('openUserTrayPanel',e)
     }
   },
   name: "Header",