From 0187673aed8ba72058ee74fbb7538cf040a43606 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 23 七月 2020 20:09:07 +0800
Subject: [PATCH] 桌面添加交互(打开/最小化应用,显示桌面最小化已打开的应用,显示隐藏通知)

---
 src/pages/desktop/index/components/Tools.vue |  115 +++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 86 insertions(+), 29 deletions(-)

diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index 385e1d2..a874279 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -3,44 +3,52 @@
     <div class="center">
       <div class="tools-left">
         <div
-          :class="['tools-icon', {clicked:this.$store.state.desktop.preferenceVisiable}]"
+          :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
           @click="togglePreference()"
         >
           <img class="system" :src="`${publicPath}images/header-icon/system.png`" />
           <!-- <span class="fa fa-apple"></span> -->
         </div>
-        <div class="tools-icon" @click="openSafari()">
+        <div class="tools-icon" >
           <!-- <span class="fa fa-safari"></span> -->
-          <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt="">
+          <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt />
         </div>
       </div>
-      <div class="tools-middle"></div>
+      <div class="tools-middle">
+        <div
+          v-for="dock in this.$store.state.desktop.minDocks"
+          :key="dock.id"
+          class="dock-item-wrap"
+          
+        >
+          <a @click="dockClick(dock)">
+            <img class="dock-item" :src="dock.src" :alt="dock.alt" />
+          </a>
+        </div>
+      </div>
       <div class="tools-right">
         <div class="tools-icon">
           <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/search.png`" alt="">
+          <img :src="`${publicPath}images/header-icon/search.png`" alt />
         </div>
         <div class="tools-icon">
           <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/help.png`" alt="">
+          <img :src="`${publicPath}images/header-icon/help.png`" alt />
+        </div>
+        <div class="tools-icon" @click="notificationCenterClick()">
+          <!-- <span class="fa fa-battery-full"></span> -->
+          <img :src="`${publicPath}images/header-icon/notice.png`" alt />
         </div>
         <div class="tools-icon">
           <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/notice.png`" alt="">
-        </div>
-        <div class="tools-icon">
-          <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/user.png`" alt="">
+          <img :src="`${publicPath}images/header-icon/user.png`" alt />
         </div>
         <!-- <timer></timer> -->
-        <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
+        <!-- <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
           <span
             :class="['fa', {'fa-list-ul':notificationCenterNoMessage()}, {'fa-comment-o on-new-msg':!notificationCenterNoMessage()},{'fa-commenting-o':notificationCenterMessageFlicker()}]"
           ></span>
-        </div>
-        <div class="tools-icon tools-show-desktop">
-          <span>&nbsp;</span>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -89,11 +97,33 @@
         !this.notificationCenterNoMessage()
       );
     },
-    openSafari: function() {
-      this.$store.commit("desktop/openSafari");
+
+    togglePreference() {
+      //this.$store.commit("desktop/togglePreference");
+      //鏄剧ず妗岄潰,鏈�灏忓寲宸叉墦寮�鐨勫簲鐢�
+      debugger;
+      this.$store.state.desktop.frames.forEach(frame=>{
+        this.$store.commit('desktop/addMinDock', {
+          id: frame.id,
+          src: frame.icon,
+          alt: frame.title,
+          type: "3"
+        });
+      })
     },
-    togglePreference: function() {
-      this.$store.commit("desktop/togglePreference");
+    dockClick(dock) {
+      if (dock.type === "1") {
+        window.open(dock.url);
+      } else if (dock.type === "2") {
+        this.$store.dispatch("desktop/addFrame", {
+          id: dock.id,
+          icon: dock.src,
+          title: dock.name,
+          url: dock.url
+        });
+      } else if (dock.type === "3") {
+        this.$store.commit("desktop/resetMinFrame", dock.id);
+      }
     }
   }
 };
@@ -121,16 +151,49 @@
   height: 100%;
   float: left;
   margin-left: 8px;
-
 }
-
+.tools .tools-middle{
+  float: left;
+  position: relative;
+}
+.tools .tools-middle::before{
+  width: 1px;
+  height: 20px;
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: 0;
+  background: rgba(0, 0, 0, 0.2);
+}
+.tools .tools-middle .dock-item-wrap {
+  display: inline-block;
+  padding: 0 10px;
+  height: 38px;
+  line-height: 54px;
+  margin-right: 1px;
+  border-bottom: 2px solid transparent;
+}
+.tools .tools-middle .dock-item-wrap:hover,
+.tools .tools-middle .dock-item-wrap.clicked{
+  color: white;
+  background-color: #98aabe;
+  border-color: #40C3FF;
+  cursor: pointer;
+}
+.dock-item-wrap a {
+  height: 100%;
+}
+.dock-item-wrap img {
+  width: auto;
+  height: 70%;
+}
 .tools-icon {
   text-align: center;
   height: 100%;
   display: inline-block;
   vertical-align: top;
   line-height: 56px;
-  margin-right: 28px;
+  padding: 0 15px;
 }
 
 .tools .tools-icon:hover,
@@ -143,11 +206,5 @@
 .tools .tools-right {
   float: right;
   height: 100%;
-}
-
-.tools .tools-right .tools-show-desktop {
-  border-left: grey 1px solid;
-  width: 5px;
-  margin-left: 3px;
 }
 </style>
\ No newline at end of file

--
Gitblit v1.8.0