Home Explore Help
Sign In
kejuyun
/
yvan-window
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

首页桌面

liupeng 3 years ago
parent
269f2b11b1
commit
7dcdde04a4
9 changed files with 1163 additions and 168 deletions
Split View Show Diff Stats
  1. 1 0
      index.html
  2. 382 0
      public/static/css/style/style.css
  3. 572 62
      public/static/css/syno/syno-vue.css
  4. 18 17
      src/App.vue
  5. 13 18
      src/component/Desktop/FixWindow/index.vue
  6. 0 9
      src/component/Desktop/Shortcut/ResizablePinned/index.vue
  7. 23 2
      src/component/Desktop/index.vue
  8. 120 53
      src/component/DesktopAppView/index.vue
  9. 34 7
      src/component/Header/index.vue

+ 1 - 0
index.html
View File 

@@ -9,6 +9,7 @@
 
   <link rel="stylesheet" href="./public/static/css/ux/ux-all.css">
 
   <link rel="stylesheet" href="./public/static/css/sds/sds.css">
 
   <link rel="stylesheet" href="./public/static/css/syno/syno-vue.css">
 
+  <link rel="stylesheet" href="./public/static/css/fixcroll/fixcroll.css">
 
   <link rel="stylesheet" href="./public/static/css/style/style.css">
 
 </head>
 
 <body>

+ 382 - 0
public/static/css/style/style.css
View File 

@@ -171,10 +171,12 @@ body,
 
     border: none;
 
 }
 
 
+.start-button:hover .start-button-img,
 
 .start-button .start-button-img:hover {
 
     background-position: 0 -24px;
 
 }
 
 
+.start-button:active .start-button-img,
 
 .start-button .start-button-img:active,
 
 .start-button .start-button-img.pressed {
 
     background-position: 0 -48px;
 
@@ -282,6 +284,21 @@ body,
 
     background-size: 24px 72px;
 
 }
 
 
+.tray-notify-badge {
 
+    width: 10px;
 
+    height: 10px;
 
+    bottom: 0;
 
+    right: 0;
 
+    overflow: hidden;
 
+    cursor: pointer;
 
+    display: inline-block;
 
+    position: absolute;
 
+    pointer-events: none;
 
+    background: #FF3737;
 
+    box-shadow: 0 1px 4px 0 rgba(46,48,50,0.6);
 
+    border-radius: 5px;
 
+}
 
+
 
 /* 桌面 */
 
 #sds-desktop {
 
     opacity: 1;
 
@@ -1626,6 +1643,10 @@ ul.sds-desktop-shortcut {
 
     vertical-align: top;
 
 }
 
 
+.search-field:hover {
 
+    border: 1px solid #8A949E;
 
+}
 
+
 
 .search-field .search-field-clear-btn {
 
     position: absolute;
 
     width: 24px;
 
@@ -1751,4 +1772,365 @@ ul.sds-desktop-shortcut {
 
     text-align: center;
 
     text-shadow: 0 1px 3px rgba(0,0,0,0.75);
 
     color: #fff;
 
+}
 
+
 
+.search-field.search-field-focused {
 
+    border: 1px solid #2396FA;
 
+}
 
+
 
+.syno-sds-appview .sds-app-panel .sds-desktop-no-result {
 
+    opacity: 0.6;
 
+    font-size: 20px;
 
+    color: #E0EAF4;
 
+    text-align: center;
 
+    line-height: 28px;
 
+    width: 100%;
 
+    height: 100%;
 
+    position: absolute;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+/* 消息弹出框 */
 
+.sds-tray-panel {
 
+    box-shadow: 0px 2px 6px rgba(0,0,0,0.5);
 
+    background-color: #fff;
 
+    border: 0px none;
 
+    border-radius: 3px;
 
+    padding: 8px 8px;
 
+    color: #414b55;
 
+}
 
+
 
+.sds-tray-panel .x-panel-header {
 
+    background: transparent;
 
+    border: 0;
 
+    border-bottom: solid 1px rgba(198,212,224,0.4);
 
+    text-align: center;
 
+}
 
+
 
+.sds-notify-tray-panel {
 
+    padding: 0;
 
+    color: #414b55;
 
+    width: 340px;
 
+    height: calc(100vh - 51px);
 
+    min-height: 164px;
 
+}
 
+
 
+
 
+.sds-notify-tray-panel .x-panel-header {
 
+    border: 0;
 
+    box-shadow: inset 0 -1px 0 0 rgba(198,212,224,0.7);
 
+    border-radius: 3px 3px 0 0;
 
+    text-align: center;
 
+    padding: 6px 0px 6px 0px;
 
+    background: none;
 
+}
 
+
 
+.sds-notify-tray-panel .item .title, .sds-notify-tray-panel .x-panel-header-text {
 
+    font-weight: 700;
 
+}
 
+
 
+.sds-notify-tray-panel .x-panel-header-text {
 
+    font-size: 12px;
 
+    color: #414b55;
 
+    line-height: 24px;
 
+}
 
+
 
+.sds-tray-panel .x-panel-header .x-panel-header-text, .sds-user-menu .sds-user-menu-username, .sds-tray-msg-window .x-plain-body {
 
+    color: #414b55;
 
+}
 
+
 
+.sds-tray-panel .x-panel-header .x-panel-header-text {
 
+    font-size: 12px;
 
+    line-height: 23px;
 
+}
 
+
 
+.sds-tray-panel .x-panel-header .x-panel-header-text, .sds-user-menu .sds-user-menu-username {
 
+    font-weight: 700;
 
+}
 
+
 
+.sds-notify-tray-panel .sds-notify-setting-btn {
 
+    position: absolute;
 
+    right: 10px;
 
+    width: 24px;
 
+    height: 24px;
 
+    background-image: url("../../../image/index/tbar_bt_setting.png");
 
+    cursor: pointer;
 
+}
 
+
 
+.sds-tray-panel .x-panel-body {
 
+    background-color: #fff;
 
+    border: none;
 
+}
 
+
 
+.sds-notify-tray-panel .x-panel-body {
 
+    border: none;
 
+    height: calc(100vh - 135px);
 
+    min-height: 164px;
 
+}
 
+
 
+.sds-notify-tray-panel .sds-notify-tray-panel-dataview-wrapper {
 
+    padding-top: 12px;
 
+}
 
+
 
+.sds-notify-tray-panel-dataview-wrapper {
 
+    padding: 0;
 
+    height: 100%;
 
+}
 
+
 
+.sds-notify-tray-panel .item {
 
+    margin: 0px 12px 8px 12px;
 
+    border-radius: 3px;
 
+    padding: 12px;
 
+    background-color: rgba(198,212,224,0.2);
 
+}
 
+
 
+.sds-notify-tray-panel .item.unread {
 
+    background-color: rgba(5,127,235,0.1);
 
+}
 
+
 
+.sds-notify-tray-panel .item.unread:hover {
 
+    background-color: rgba(5,127,235,0.15);
 
+}
 
+
 
+.sds-notify-tray-panel .item .title, .sds-notify-tray-panel .x-panel-header-text {
 
+    font-weight: 700;
 
+}
 
+
 
+.sds-notify-tray-panel .item .title {
 
+    position: relative;
 
+    box-sizing: border-box;
 
+    font-size: 13px;
 
+    background-repeat: no-repeat;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    white-space: nowrap;
 
+    display: inline-block;
 
+    vertical-align: top;
 
+    width: 100%;
 
+    color: #057FEB;
 
+}
 
+
 
+.sds-notify-tray-panel .item .title .notification-level {
 
+    position: absolute;
 
+    top: 0;
 
+    left: 0;
 
+    width: 24px;
 
+    height: 24px;
 
+    background-image: url("../../../image/index/tbar_icn_status.png");
 
+}
 
+
 
+.sds-notify-tray-panel .item .title .notification-level.info {
 
+    background-position: 0 0;
 
+}
 
+
 
+.sds-notify-tray-panel .item .title .content {
 
+    cursor: pointer;
 
+    width: 228px;
 
+    height: 24px;
 
+    padding-left: 28px;
 
+    line-height: 24px;
 
+    display: inline-block;
 
+    vertical-align: top;
 
+    text-overflow: ellipsis;
 
+    white-space: nowrap;
 
+    overflow: hidden;
 
+}
 
+
 
+.sds-notify-tray-panel .item .title .content.cursor-no-pointer {
 
+    cursor: default;
 
+}
 
+
 
+.sds-notify-tray-panel .item .time {
 
+    font-size: 13px;
 
+    color: rgba(65,75,85,0.6);
 
+    padding-top: 4px;
 
+    height: 20px;
 
+    line-height: 20px;
 
+}
 
+
 
+.sds-notify-tray-panel .msg {
 
+    font-size: 13px;
 
+    line-height: 20px;
 
+    overflow: hidden;
 
+    text-align: left;
 
+    color: #414b55;
 
+}
 
+
 
+.sds-notify-tray-panel .msg .detail{
 
+    display: inline-block;
 
+    margin-right: 5px;
 
+}
 
+
 
+.sds-notify-tray-panel .msg a {
 
+    cursor: pointer;
 
+}
 
+
 
+.sds-notify-tray-panel .item .remain-items {
 
+    display: none;
 
+}
 
+
 
+.sds-notify-tray-panel .x-panel-bbar {
 
+    background-color: white;
 
+    border-top: solid rgba(198,212,224,0.5) 1px;
 
+    border-radius: 3px;
 
+}
 
+
 
+.sds-notify-tray-panel .x-toolbar {
 
+    background: none;
 
+    padding: 0px 6px 0px 6px;
 
+    border: none;
 
+    height: 48px;
 
+}
 
+
 
+.sds-notify-tray-panel .x-toolbar .x-toolbar-ct {
 
+    background-repeat: repeat-x;
 
+    background-color: #fff;
 
+    padding-top: 12px;
 
+}
 
+
 
+.sds-notify-tray-panel .x-toolbar .x-toolbar-left {
 
+    padding-left: 6px;
 
+}
 
+
 
+.sds-notify-tray-panel .x-toolbar .x-toolbar-cell .syno-ux-button {
 
+    border-radius: 100px;
 
+}
 
+
 
+.sds-notify-tray-panel .x-toolbar .x-toolbar-cell .syno-ux-button {
 
+    border-radius: 100px;
 
+}
 
+
 
+.sds-notify-tray-panel .x-toolbar .x-toolbar-cell .syno-ux-button.syno-ux-button-blue {
 
+    padding: 0 13px 0 13px;
 
+    min-width: 92px;
 
+}
 
+
 
+.sds-notify-tray-panel .sds-notify-panel-arrow {
 
+    position: absolute;
 
+    top: -17px;
 
+    left: 158px;
 
+    width: 24px;
 
+    height: 18px;
 
+    overflow: hidden;
 
+}
 
+
 
+.sds-notify-tray-panel .sds-notify-panel-arrow::after {
 
+    background: #fff;
 
+    background: #fff;
 
+    content: '';
 
+    position: absolute;
 
+    bottom: -3px;
 
+    left: 2px;
 
+    width: 14px;
 
+    height: 14px;
 
+    -moz-transform-origin: left bottom;
 
+    -ms-transform-origin: left bottom;
 
+    -webkit-transform-origin: left bottom;
 
+    transform-origin: left bottom;
 
+    -moz-transform: rotate(45deg);
 
+    -ms-transform: rotate(45deg);
 
+    -webkit-transform: rotate(45deg);
 
+    transform: rotate(45deg);
 
+}
 
+
 
+.sds-notify-tray-panel .sds-notify-empty-text {
 
+    color: rgba(65,75,85,0.6);
 
+    vertical-align: middle;
 
+    text-align: center;
 
+}
 
+
 
+/* notiify详情页面 */
 
+.sds-notify-detail-dialog.v-window .v-window-header-wrapper .app-icon {
 
+    display: none;
 
+}
 
+
 
+.sds-notify-detail-dialog.v-window .v-window-header-wrapper .v-window-header-text {
 
+    padding-left: 0px;
 
+}
 
+
 
+.window-header-tool-wrapper .tool.close {
 
+    background-image: url(../../../image/index/windowClose.png);
 
+}
 
+
 
+.sds-notify-detail-dialog .detail-panel .detail-mail-content {
 
+    border: 0;
 
+    border-top: 1px dashed rgba(198,212,224,0.7);
 
+    width: 640px;
 
+    height: 150px;
 
+    padding-top: 16px;
 
+}
 
+
 
+/* notiify 查看全部 */
 
+.sds-notify-showall-dialog.v-window .v-window-header-wrapper .app-icon {
 
+    display: none;
 
+}
 
+
 
+.sds-notify-showall-dialog.v-window .v-window-header-wrapper .v-window-header-text {
 
+    padding-left: 0px;
 
+}
 
+
 
+.window-header-tool-wrapper .tool.maximize {
 
+    background-image: url(../../../image/index/windowMaximize.png);
 
+}
 
+
 
+.sds-notify-showall-dialog .show-all-panel .tbar-wrapper {
 
+    padding-bottom: 8px;
 
+}
 
+
 
+.v-panel .default-tbar .v-btn {
 
+    margin-right: 6px;
 
+}
 
+
 
+.sds-notify-showall-dialog .show-all-panel button.i-filter {
 
+    background-image: url(../../../image/index/sort.png);
 
+    background-size: 24px 24px;
 
+    background-position: 2px 2px;
 
+    order: 2;
 
+    margin-left: auto;
 
+    margin-right: 0;
 
+}
 
+
 
+.sds-notify-showall-dialog .show-all-panel button.i-filter .v-btn-dropdown-btn {
 
+    background-image: none;
 
+}
 
+
 
+.sds-notify-showall-dialog .show-all-panel .all-notification-table-wrapper {
 
+    display: flex;
 
+    flex-direction: column;
 
+    height: 100%;
 
+}
 
+
 
+.sds-notify-showall-dialog .show-all-panel .all-notification-table {
 
+    flex: 1 1 auto;
 
+    overflow: hidden;
 
+}
 
+
 
+.v-table th .v-table-column-sorter {
 
+    background-image: url(../../../image/index/arrowTable.png);
 
+}
 
+
 
+.window-header-tool-wrapper .tool.restore {
 
+    background-image: url(../../../image/index/windowRestore.png);
 
+}
 
+
 
+.v-pagination .left-paging .v-pagination-first {
 
+    background-image: url(../../../image/index/notifyShowAllPagination.png);
 
+}
 
+
 
+.v-pagination .left-paging .v-pagination-prev {
 
+    background-image: url(../../../image/index/notifyShowAllPagination1.png);
 
+}
 
+
 
+.v-pagination .left-paging .v-pagination-next {
 
+    background-image: url(../../../image/index/notifyShowAllPagination1.png);
 
+}
 
+
 
+.v-pagination .left-paging .v-pagination-last {
 
+    background-image: url(../../../image/index/notifyShowAllPagination.png);
 
+}
 
+
 
+.v-pagination .v-pagination-right .v-pagination-refresh{
 
+    background-image: url(../../../image/index/reset.png);
 
 }

File diff suppressed because it is too large
+ 572 - 62
public/static/css/syno/syno-vue.css


+ 18 - 17
src/App.vue
View File 

@@ -1,35 +1,36 @@
 
 <template>
 
   <div class="container">
 
     <div class="contain">
 
-      <!-- <Header></Header> -->
 
-      <!-- <Desktop></Desktop> -->
 
-       <DesktopAppView></DesktopAppView>
 
+      <Header></Header>
 
+      <Desktop></Desktop>
 
+      <DesktopAppView></DesktopAppView>
 
     </div>
 
   </div>
 
 </template>
 
 
 <script>
 
-import Header from './component/Header'
 
-import Desktop from './component/Desktop'
 
-import DesktopAppView from './component/DesktopAppView'
 
+import Header from "./component/Header";
 
+import Desktop from "./component/Desktop";
 
+import DesktopAppView from "./component/DesktopAppView";
 
 
-import {getCurrentInstance} from 'vue';
 
-import mitt from "mitt"
 
+import { getCurrentInstance } from "vue";
 
+import mitt from "mitt";
 
 export default {
 
   data() {
 
-    return {
 
-    }
 
+    return {};
 
   },
 
   beforeCreate() {
 
-    const ins = getCurrentInstance()
 
+    const ins = getCurrentInstance();
 
     ins.appContext.config.globalProperties.$bus = mitt();
 
   },
 
-  components:{
 
+  components: {
 
     Header,
 
     Desktop,
 
-    DesktopAppView
 
-    
-  }
 
-
 
-}
 
+    DesktopAppView,
 
+  },
 
+};
 
 </script>
 
+
 
+<style lang="">
 
+
 
+</style>

+ 13 - 18
src/component/Desktop/FixWindow/index.vue
View File 

@@ -340,7 +340,6 @@ export default {
 
       }
 
         this.progrecssFirstClick.lastY = el1.offsetTop + 31;
 
         this.progrecssFirstClick.clickY = e.offsetY;
 
-      console.log(el.style.top,e.offsetY,this.progrecssFirstClick.lastY,e.clientY)
 
     },
 
     //移动进度条
 
     moveProgress(e) {
 
@@ -348,11 +347,9 @@ export default {
 
       let el1 = document.querySelector(".ps__rail-y");
 
       let el2 = document.querySelector(".v-widget-list");
 
       let moveY;
 
-      console.log(this.progrecssFirstClick.clientY)
 
       if (e.clientY >= this.progrecssFirstClick.clientY) {
 
         moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
 
         if(this.progrecssFirstClick.thumbStyletop){
 
-          console.log(moveY)
 
           moveY = this.progrecssFirstClick.thumbStyletop + 1
 
           this.progrecssFirstClick.thumbStyletop = 0
 
 
@@ -383,7 +380,6 @@ export default {
 
       el1.addEventListener("mouseleave", this.mouseupProgress);
 
       this.progrecssFirstClick.clientY = e.clientY;
 
       this.moveY = moveY;
 
-      console.log('moveY',moveY)
 
     },
 
     // 进度条鼠标抬起/离开
 
     mouseupProgress() {
 
@@ -392,7 +388,6 @@ export default {
 
       let el2 = document.querySelector(".v-widget-list");
 
       el.removeEventListener("mousemove", this.moveProgress);
 
       if(el2.offsetHeight > el1.offsetHeight){
 
-        console.log('')
 
         this.thumbYDisplay = 'block'
 
         this.thumbYHeight = 'calc((100vh - 52px) / 2)'
 
       }
 
@@ -400,17 +395,12 @@ export default {
 
     },
 
     // 滚动窗口列表
 
     scrollList(e) {
 
-      console.log(e, e.target.scrollTop);
 
       let el = document.querySelector(".ps__thumb-y");
 
       let el1 = document.querySelector(".ps__rail-y");
 
       let el2 = document.querySelector(".ps--active-y");
 
-      console.log(e.target.scrollTop)
 
       // if(! this.widgetListIsBottom){
 
         let moveY =
 
           ((el1.offsetHeight - el.offsetHeight)/(e.target.scrollHeight - el2.offsetHeight)) * e.target.scrollTop
 
-
 
-        console.log( ((el1.offsetHeight - el.offsetHeight)/(e.target.scrollHeight - el2.offsetHeight)) * e.target.scrollTop
 
-        );
 
         el.style.top = moveY + e.target.scrollTop + 'px'
 
       // }
 
     },
 
@@ -448,7 +438,6 @@ export default {
 
         this.thumbYDisplay = "block";
 
         this.thumbYHeight = (7 - selectedNum) * 70 + "px";
 
       } else {
 
-        console.log('none')
 
         this.thumbYDisplay = "none";
 
       }
 
       if(window.screenY <= 250){
 
@@ -522,27 +511,37 @@ export default {
 
       el2.className = "v-widget-window syno-sds-widget v-window";
 
     },
 
     //显示或隐藏固定窗口
 
-    showOrHiddenWidget() {
 
+    showOrHiddenWidget(e) {
 
       let el = document.querySelector(".v-widget-header-tool-icon.pin");
 
       if (this.display === "block") {
 
+        if(e.srcElement.className.includes(' pressed')){
 
+          e.srcElement.className = e.srcElement.className.replace(' pressed','')
 
+        }
 
         this.display = "none";
 
         this.zIndex = this.defaultZIndex - 10;
 
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
 
         this.$bus.emit("fixWindowZIndexMax", false);
 
+        
       } else {
 
         this.display = "block";
 
         this.zIndex = this.defaultZIndex + 10;
 
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
 
         this.$bus.emit("fixWindowZIndexMax", true);
 
+        if(! e.srcElement.className.includes(' pressed')){
 
+          e.srcElement.className = e.srcElement.className + ' pressed'
 
+        }
 
       }
 
     },
 
     //最小化固定窗口
 
     minimizeFixWndow() {
 
       this.display = "none";
 
-      console.log("this.defaultZIndex", this.defaultZIndex);
 
       this.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.includes(' pressed')){
 
+          el.className = el.className.replace(' pressed','')
 
+        }
 
     },
 
     // 显示或隐藏位置选择框
 
     selectWidgetPosition() {
 
@@ -557,7 +556,7 @@ export default {
 
       this.portalDetail1.detailMessageList = obj.detailMessageList;
 
       this.portalDetail1.detailMessageList.forEach((item) => {
 
         if (item.cls && item.cls.includes("active")) {
 
-          item.cls.replace("active", "");
 
+          item.cls = item.cls.replace("active", "");
 
         }
 
       });
 
       let detailMessageItem = this.portalDetail1.detailMessageList[obj.index];
 
@@ -567,7 +566,6 @@ export default {
 
       this.right = detailMessageItem.right;
 
       let el = document.querySelector(".v-widget-header-tool-icon.dock");
 
       el.className = el.className + " active";
 
-      console.log(el.className);
 
       let cls = this.portalDetail1.detailMessageList[0].cls;
 
       if (cls && !cls.includes("active")) {
 
         this.portalDetail1.detailMessageList[0].cls = cls + " active";
 
@@ -578,7 +576,6 @@ export default {
 
       // #sds-desktop .v-widget-window{
 
       //     height: calc(100vh - 10px) !important;
 
       // }
 
-      console.log(obj.index);
 
       if (obj.index == 0) {
 
         let el1 = document.querySelector(".v-widget-window");
 
         let el2 = document.querySelector(".v-widget-items-wrapper");
 
@@ -604,7 +601,6 @@ export default {
 
     },
 
     //判断弹出窗ZIndex是不是比较大
 
     dialogWindowZIndexIsMax(bol) {
 
-      console.log(bol);
 
       if (bol) {
 
         this.cls = "deactive-win";
 
       } else {
 
@@ -615,7 +611,6 @@ export default {
 
     //节流函数
 
     throttle(fn, time, e) {
 
       var lastTime = 0;
 
-      console.log("throttle");
 
       return function () {
 
         var nowTime = Date.now();
 
         if (nowTime - lastTime > time) {

+ 0 - 9
src/component/Desktop/Shortcut/ResizablePinned/index.vue
View File 

@@ -327,7 +327,6 @@ export default {
 
       this.resizablePinnedDetail.detailMessageList.forEach((item) => {
 
         item.cls = "";
 
       });
 
-      console.log(this.defaultZIndex);
 
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].cls =
 
         "active-win";
 
       let defaultZIndex = this.defaultZIndex + 10;
 
@@ -336,7 +335,6 @@ export default {
 
       this.resizablePinnedDetail.detailMessageList[detailMessageIndex].zIndex =
 
         defaultZIndex;
 
       this.lastCheckIndex = detailMessageIndex;
 
-      console.log(this.defaultZIndex);
 
       this.changeZIndexMaxMenuItemCls()
 
       this.$bus.emit('dialogWindowZIndexIsMax',true)
 
       this.$bus.emit("fixWindowZIndexMax", false);
 
@@ -393,7 +391,6 @@ export default {
 
           detailMessageList[detailMessageList.length - 1].titleImgUrl
 
         );
 
       }
 
-      console.log(detailMessageList.length - 1);
 
     },
 
     //最大化弹出窗口
 
     maxMizeWindow(detailMessageIndex) {
 
@@ -471,14 +468,11 @@ export default {
 
     },
 
     // 移动弹出框窗口位置
 
     moveWindowPosition(e) {
 
-      // console.log(e.target,e)
 
       // var x = e.pageX;
 
       // var y = e.pageY;
 
-      // console.log(x,y)
 
     },
 
     //如果固定窗口的zindex是最大的
 
     fixWindowZIndexMax(bol) {
 
-        console.log(bol)
 
       this.fixWindowZIndedxIsMax = bol;
 
     },
 
     //修改zIndex小于defaultZindex(公共z-index)窗口的类名使其变淡
 
@@ -519,7 +513,6 @@ export default {
 
     },
 
     // 修改对应标题的menuItem的类名
 
     changeFoundMenuItemCls(title) {
 
-      console.log(title);
 
       this.resizablePinnedDetail.detailMessageList.forEach((item) => {
 
         if (item.title === title) {
 
           item.cls = "active-win";
 
@@ -530,7 +523,6 @@ export default {
 
     },
 
     //修改zIndex最大的menuItem的类名
 
     changeZIndexMaxMenuItemCls() {
 
-        console.log(this.fixWindowZIndedxIsMax)
 
       if (this.fixWindowZIndedxIsMax) {
 
         this.resizablePinnedDetail.detailMessageList.forEach((item) => {
 
           item.cls = "deactive-win";
 
@@ -561,7 +553,6 @@ export default {
 
   watch: {
 
     defaultZIndex() {
 
       this.changeMinDefaultZindexWindowCls();
 
-      // console.log(Date.now())
 
     },
 
   },
 
   beforeDestroy() {

+ 23 - 2
src/component/Desktop/index.vue
View File 

@@ -1,9 +1,12 @@
 
 <template>
 
     <!-- 桌面 -->
 
-    <div id="sds-desktop">
 
+    <div id="sds-desktop" :style="{display:display}">
 
         <Menu></Menu>
 
         <Shortcut :defaultZIndex='defaultZIndex'></Shortcut>
 
         <FixWindow :defaultZIndex='defaultZIndex'></FixWindow>
 
+        <NotifyTrayPanel></NotifyTrayPanel>
 
+        <NotifyTrayPanelDetail></NotifyTrayPanelDetail>
 
+        <NotifyShowall></NotifyShowall>
 
     </div>
 
 </template>
 
 
@@ -11,28 +14,46 @@
 
 import Menu from './Menu'
 
 import Shortcut from './Shortcut'
 
 import FixWindow from './FixWindow'
 
+import NotifyTrayPanel from './NotifyTrayPanel'
 
+import NotifyTrayPanelDetail from './NotifyTrayPanelDetail'
 
+import NotifyShowall from './NotifyShowall'
 
+
 
 export default {
 
   data() {
 
     return {
 
       defaultZIndex: 9053,
 
+      display: 'block',
 
     }
 
   },
 
   mounted(){
 
     this.$bus.on('changeDefaultZIndex',this.changeDefaultZIndex)
 
+    this.$bus.on('appViewIsOpen',this.appViewIsOpen)
 
   },
 
   methods:{
 
+    // 改变公共zIndex
 
     changeDefaultZIndex(zIndex){
 
       if(this.defaultZIndex > 999999990){
 
         this.defaultZIndex = 999999990
 
       }
 
       this.defaultZIndex = zIndex
 
-      console.log(this.defaultZIndex)
 
+    },
 
+    //appView是否打开
 
+    appViewIsOpen(bol){
 
+      if(bol){
 
+        this.display = 'none'
 
+      }else{
 
+        this.display = 'block'
 
+      }
 
     }
 
+
 
   },
 
   components:{
 
       Menu,
 
       Shortcut,
 
       FixWindow,
 
+      NotifyTrayPanel,
 
+      NotifyTrayPanelDetail,
 
+      NotifyShowall
 
   },
 
   name:'Desktop',
 
 }

+ 120 - 53
src/component/DesktopAppView/index.vue
View File 

@@ -4,6 +4,7 @@
 
     <div
 
       class="syno-sds-appview syno-sds-appview-animate"
 
       style="width: 100%; height: 100%"
 
+      :style="{display:display}"
 
     >
 
       <div class="syno-sds-appview-container">
 
         <div class="search-field" style="width: 278px">
 
@@ -12,6 +13,7 @@
 
             size="16"
 
             placeholder="搜索"
 
             class="search-field-input"
 
+            @click.stop="searchInputFocus"
 
           />
 
           <button
 
             type="button"
 
@@ -25,7 +27,7 @@
 
         <div class="shortcut-zone right-zone" style="width: 13%"></div>
 
       </div>
 
       <div class="sds-app-panel">
 
-        <div class="v-ps ps ps--active-y">
 
+        <div class="v-ps ps ps--active-y" v-if="DesktopAppViewDetail.detailMessageList.length">
 
           <div class="app-layout-wrapper" style="width: 74%; height: 100%">
 
             <div
 
               class="sds-desktop-layout search-layout"
 
@@ -34,12 +36,15 @@
 
             <div class="sds-desktop-layout">
 
               <li
 
                 class="launch-icon app-item-icon"
 
-                v-for="(detailMessage,detailMessageIndex) in DesktopAppViewDetail.detailMessageList"
 
+                v-for="
 
+                  detailMessage in DesktopAppViewDetail.detailMessageList"
 
                 :key="detailMessage.id"
 
               >
 
                 <div
 
                   class="image"
 
-                  :style="{backgroundImage: `url(${detailMessage.titleImgUrl})`}"
 
+                  :style="{
 
+                    backgroundImage: `url(${detailMessage.titleImgUrl})`,
 
+                  }"
 
                 >
 
                   <div
 
                     class="sds-application-notify-badge-num"
 
@@ -47,7 +52,7 @@
 
                   ></div>
 
                 </div>
 
 
-                <div class="text">{{detailMessage.title}}</div>
 
+                <div class="text">{{ detailMessage.title }}</div>
 
               </li>
 
               <!-- <li
 
                 class="launch-icon app-item-icon"
 
@@ -592,6 +597,9 @@
 
             </div>
 
           </div>
 
         </div>
 
+        <div class="sds-desktop-no-result" v-else>
 
+          找不到符合的项目。
 
+        </div>
 
       </div>
 
     </div>
 
   </div>
 
@@ -607,8 +615,8 @@ export default {
 
             id: 0,
 
             title: "控制中心",
 
             spacialCls: "controlCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
 
-            
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/controlCenter.png",
 
           },
 
           {
 
             id: 1,
 
@@ -626,49 +634,57 @@ export default {
 
             id: 3,
 
             title: "资源监控",
 
             spacialCls: "tjCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/resourceMonitor.png",
 
-          }, 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/resourceMonitor.png",
 
+          },
 
           {
 
             id: 4,
 
             title: "存储管理器",
 
             spacialCls: "tjCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/storageManager.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/storageManager.png",
 
           },
 
           {
 
             id: 5,
 
             title: "日志中心",
 
             spacialCls: "controlCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/logCenter.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/logCenter.png",
 
           },
 
           {
 
             id: 6,
 
             title: "安全顾问",
 
             spacialCls: "file",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/securityScan.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/securityScan.png",
 
           },
 
           {
 
             id: 7,
 
             title: "技术支持中心",
 
             spacialCls: "question",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/supportCenter.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/supportCenter.png",
 
           },
 
-           {
 
+          {
 
             id: 8,
 
             title: "Storage Manager",
 
             spacialCls: "tjCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/storageManager.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/storageManager.png",
 
           },
 
           {
 
             id: 9,
 
             title: "Synology MailPlus Server",
 
             spacialCls: "controlCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/mailPlusServer.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/mailPlusServer.png",
 
           },
 
           {
 
             id: 10,
 
             title: "Synology Chat 管理控制台",
 
             spacialCls: "file",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/chatAdminpng.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/chatAdminpng.png",
 
           },
 
           {
 
             id: 11,
 
@@ -676,7 +692,7 @@ export default {
 
             spacialCls: "question",
 
             titleImgUrl: "../../../../public/image/DesktopAppView/chat.png",
 
           },
 
-           {
 
+          {
 
             id: 12,
 
             title: "File Station",
 
             spacialCls: "file",
 
@@ -686,7 +702,8 @@ export default {
 
             id: 13,
 
             title: "Hyper Backup",
 
             spacialCls: "controlCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/hyperBackup.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/hyperBackup.png",
 
           },
 
           {
 
             id: 14,
 
@@ -698,9 +715,10 @@ export default {
 
             id: 15,
 
             title: "Synology Calendar",
 
             spacialCls: "question",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/synologyCalendar.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/synologyCalendar.png",
 
           },
 
-           {
 
+          {
 
             id: 16,
 
             title: "Synology Contacts",
 
             spacialCls: "tjCenter",
 
@@ -710,7 +728,8 @@ export default {
 
             id: 17,
 
             title: "Universal Search",
 
             spacialCls: "controlCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/universalSearch.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/universalSearch.png",
 
           },
 
           {
 
             id: 18,
 
@@ -722,25 +741,29 @@ export default {
 
             id: 19,
 
             title: "Audio Station",
 
             spacialCls: "question",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/audioStation.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/audioStation.png",
 
           },
 
-           {
 
+          {
 
             id: 20,
 
             title: "Synology Drive 管理控制台",
 
             spacialCls: "tjCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/driveAdminConsole.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/driveAdminConsole.png",
 
           },
 
           {
 
             id: 21,
 
             title: "Download Station",
 
             spacialCls: "controlCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/downloadStation.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/downloadStation.png",
 
           },
 
           {
 
             id: 22,
 
             title: "Synology Drive",
 
             spacialCls: "file",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/synologyDrive.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/synologyDrive.png",
 
           },
 
           {
 
             id: 23,
 
@@ -748,32 +771,36 @@ export default {
 
             spacialCls: "question",
 
             titleImgUrl: "../../../../public/image/DesktopAppView/mailPlus.png",
 
           },
 
-           {
 
+          {
 
             id: 24,
 
             title: "媒体服务器",
 
             spacialCls: "tjCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/mediaServer.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/mediaServer.png",
 
           },
 
           {
 
             id: 25,
 
-            
+
 
             title: "Note Station",
 
             spacialCls: "question",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/noteStation.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/noteStation.png",
 
           },
 
           {
 
             id: 26,
 
             title: "OAuth Service",
 
             spacialCls: "controlCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/authenticator.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/authenticator.png",
 
           },
 
           {
 
             id: 27,
 
             title: "PDF 查看器",
 
             spacialCls: "tjCenter",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/documentViewer.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/documentViewer.png",
 
           },
 
-           {
 
+          {
 
             id: 28,
 
             title: "Synology Drive ShareSync",
 
             spacialCls: "file",
 
@@ -783,39 +810,79 @@ export default {
 
             id: 29,
 
             title: "Video Station",
 
             spacialCls: "file",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/videoStation.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/videoStation.png",
 
           },
 
           {
 
             id: 30,
 
             title: "文本编辑器",
 
             spacialCls: "file",
 
-            titleImgUrl: "../../../../public/image/DesktopAppView/textEditor.png",
 
+            titleImgUrl:
 
+              "../../../../public/image/DesktopAppView/textEditor.png",
 
           },
 
         ],
 
       },
 
+      display: 'none',
 
     };
 
   },
 
+  mounted(){
 
+    this.$bus.on("showAppView",this.showAppView)
 
+  },
 
+  methods:{
 
+    // 显示appView页面
 
+    showAppView(){
 
+      this.display = 'block'
 
+      this.$bus.emit('appViewIsOpen',true)
 
+      window.onclick = ()=>{
 
+        this.display = 'none'
 
+        this.$bus.emit('appViewIsOpen',false)
 
+      }
 
+    },
 
+    // 搜索框聚焦
 
+    searchInputFocus(e){
 
+      if(! e.srcElement.parentElement.className.includes('search-field-focused'))
 
+      console.log(e.srcElement.parentElement.className += ' search-field-focused')
 
+    }
 
+    // 
+  },
 
   components: {},
 
-  name:'DesktopAppView',
 
+  name: "DesktopAppView",
 
 };
 
 </script>
 
 
 <style lang="css" scoped>
 
-    .sds-desktop-layout {
 
-        flex-direction: row;
 
-        overflow:-moz-scrollbars-none; 
-    }
 
-    .app-layout-wrapper::-webkit-scrollbar { width: 0 !important }
 
-
 
-    .app-layout-wrapper{
 
-      overflow: scroll;
 
-    }
 
-
 
-    .syno-sds-appview .sds-app-panel .sds-desktop-layout{
 
-      justify-content: space-around;
 
-    }
 
-
 
-    .syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon{
 
-      align-self: flex-start;
 
-    }
 
+.sds-desktop-layout {
 
+  display: grid;
 
+  flex-direction: row;
 
+  justify-content: space-between;
 
+  grid-template-columns: repeat(auto-fill, 172px);
 
+  overflow: -moz-scrollbars-none;
 
+}
 
+.app-layout-wrapper::-webkit-scrollbar {
 
+  width: 0 !important;
 
+}
 
+
 
+.app-layout-wrapper {
 
+  overflow: scroll;
 
+}
 
+
 
+.syno-sds-appview .sds-app-panel .sds-desktop-layout {
 
+  justify-content: space-around;
 
+}
 
+
 
+.syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon {
 
+  align-self: flex-start;
 
+}
 
+
 
+.search-field input::-webkit-input-placeholder {
 
+  color: rgb(102 111 122);
 
+}
 
+
 
+.search-field input:-moz-placeholder {
 
+  color: rgb(102 111 122);
 
+}
 
+
 
+.search-field input:-ms-input-placeholder {
 
+  color: rgb(102 111 122);
 
+}
 
 </style>

+ 34 - 7
src/component/Header/index.vue
View File 

@@ -1,9 +1,9 @@
 
 <template>
 
   <!-- 头部 -->
 
-  <div class="taskbar-wrapper">
 
+  <div class="taskbar-wrapper" :style="{display:display}">
 
     <div class="taskbar-left-wrapper">
 
       <div class="show-all-button"></div>
 
-      <div class="start-button">
 
+      <div class="start-button" @click.stop="openAppView">
 
         <button class="start-button-img">
 
           <div class="sds-notify-badge-num"></div>
 
         </button>
 
@@ -14,8 +14,8 @@
 
     </div>
 
     <div class="tray-container">
 
       <span class="system-tray-wrapper">
 
-        <button class="tray-item notify-button system">
 
-          <div></div>
 
+        <button class="tray-item notify-button system" @click.stop="openOrHiddenNotify">
 
+          <div :class="notifyMessaggeCls"></div>
 
         </button>
 
         <button class="tray-item user-button system">
 
           <div></div>
 
@@ -37,12 +37,39 @@
 
 <script>
 
 export default {
 
   data() {
 
-    return {};
 
+    return {
 
+      display: 'flex',
 
+      notifyMessaggeCls: 'tray-notify-badge',
 
+    };
 
+  },
 
+  mounted(){
 
+    this.$bus.on('appViewIsOpen',this.appViewIsOpen)
 
+    this.$bus.on('notifyMessageRead',this.notifyMessageRead)
 
   },
 
   methods: {
 
-    showOrHiddenWidget() {
 
-      this.$bus.emit("showOrHiddenWidget");
 
+    showOrHiddenWidget(e) {
 
+      this.$bus.emit("showOrHiddenWidget",e);
 
+    },
 
+    openAppView(){
 
+      this.$bus.emit("showAppView")
 
+    },
 
+    //appView是否打开
 
+    appViewIsOpen(bol){
 
+      console.log(bol)
 
+      if(bol){
 
+        this.display = 'none'
 
+      }else{
 
+        this.display = 'flex'
 
+      }
 
+    },
 
+    //打开或者关闭信息页面
 
+    openOrHiddenNotify(e){
 
+      this.$bus.emit('openOrHiddenNotify',e)
 
     },
 
+    // 笔记消息已读
 
+    notifyMessageRead(){
 
+      this.notifyMessaggeCls = ''
 
+    }
 
   },
 
   name: "Header",
 
 };