From 80c7aa1c7398ad4d1a1e6fc40fb0cd892be200f1 Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Thu, 16 Sep 2021 11:17:55 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=B0=8F=E5=B7=A5=E5=85=B7=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/taskbar.js | 10 +++++-
 src/styles/index.scss        | 17 ++++++++-
 src/utils/index.js           |  0
 src/views/desktop/Home.vue   | 67 ++++++++++++++++++++++++++++++++++--
 src/views/taskbar/index.vue  | 29 ++++++++++++----
 5 files changed, 112 insertions(+), 11 deletions(-)
 create mode 100644 src/utils/index.js

diff --git a/src/store/modules/taskbar.js b/src/store/modules/taskbar.js
index 36daf83..a8d36c1 100644
--- a/src/store/modules/taskbar.js
+++ b/src/store/modules/taskbar.js
@@ -1,6 +1,7 @@
 const state = {
 	startMapShow: false,
-	currentPag: 'start'
+	currentPag: 'start',
+	widgetShow: false
 }
 
 const mutations = {
@@ -23,12 +24,19 @@ const mutations = {
 		}
 		if (val === 'taskbar') return
 		state.startMapShow = false
+	},
+	// 小工具显示/隐藏
+	WIDGET_SHOW(state,val){
+		state.widgetShow = val
 	}
 }
 
 const actions = {
 	changeStartMapShow({ commit }, val) {
 		commit('STARTMAP_SHOW', val)
+	},
+	changeWidgetShow({commit},val){
+		commit('WIDGET_SHOW',val)
 	}
 }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 00290ce..355798d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1 +1,16 @@
-@import './animation.scss'
\ No newline at end of file
+@import './animation.scss';
+
+// 小工具遮罩层背景色
+.widget{
+  width: 610px;
+  height: 94%;
+  top: calc( calc( 6% - 40px) / 2) !important;
+  left: 5px !important;
+  .el-drawer{
+    width: 100% !important;
+    background-color: rgba(255, 255, 255, 0.25);
+    backdrop-filter:blur(40px);
+    box-shadow: none;
+    border-radius: 8px;
+  }
+}
\ No newline at end of file
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index f3f1b84..43aa6b2 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -1,17 +1,42 @@
 <template>
-  <div class="home">
+  <div class="home" @click="closeWidget">
     <div class="itemTag" v-for="(item, index) in dataList" :key="index">
       <img @click="scale(item)" :class="{scale: item.isScale}" :src="item.url" alt />
       <p>{{item.name}}</p>
     </div>
   </div>
+  <el-drawer modal-class="widget" v-model="drawer" :before-close='drawBeforeClose' :modal='false' :with-header="false" direction="ltr">
+    <div class="drawerTitle">
+      <i class="el-icon-more"></i>
+    </div>
+    <div class="drawerTime">
+      <strong>{{drawerTime}}</strong>
+    </div>
+    <div class="drawerContent">
+      123456
+    </div>
+  </el-drawer>
 </template>
 
 <script>
-import { reactive } from 'vue';
+import { reactive, ref, watch } from 'vue';
+import { useStore } from 'vuex';
 export default {
   name: 'Home',
   setup() {
+    const store = useStore()
+    const drawer = ref(false)
+    watch(()=>store.state.taskbar.widgetShow,()=>{
+      if(store.state.taskbar.widgetShow){
+        currentTime = new Date().getTime()
+        let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
+        drawerTime.value = `${hours} : ${minutes} : ${seconds}`
+        timer = setInterval(timing,1000)
+      }else{
+        clearInterval(timer)
+      }
+      drawer.value = store.state.taskbar.widgetShow
+    })
     const dataList = reactive([
       {
         name: 'Blue',
@@ -60,9 +85,31 @@ export default {
         }
       });
     };
+    const drawBeforeClose= ()=>{
+      store.dispatch('taskbar/changeWidgetShow',false)
+    }
+    // 点击桌面空白处关闭小工具
+    const closeWidget = () =>{
+      if(store.state.taskbar.widgetShow){
+        store.dispatch('taskbar/changeWidgetShow',false)
+      }
+    }
+    let drawerTime = ref(0)
+    // 小工具时间处理
+    let currentTime = null
+    const timing=()=>{
+      currentTime+=1000
+      let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
+      drawerTime.value = `${hours} : ${minutes} : ${seconds}`
+    }
+    let timer = null
     return {
       dataList,
       scale,
+      drawer,
+      drawBeforeClose,
+      closeWidget,
+      drawerTime
     };
   },
 };
@@ -114,4 +161,20 @@ export default {
     background: rgba(255, 255, 255, 0.5);
   }
 }
+.drawerTitle{
+  width: 96%;
+  padding-top: 18px;
+  text-align: right;
+}
+.drawerTime{
+  margin-bottom: 24px;
+  strong{
+    color: #222;
+    font-size: 24px;
+  }
+}
+.drawerContent{
+  width: 80%;
+  margin: auto;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/taskbar/index.vue b/src/views/taskbar/index.vue
index 0972e9f..4768178 100644
--- a/src/views/taskbar/index.vue
+++ b/src/views/taskbar/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="taskbar">
     <!-- 任务栏中间部分 -->
-    <div class="taskbarCenter flex" id="taskbar">
+    <div class="taskbarCenter flex" id="taskbar" @click="taskbarBtn">
       <!-- 开始按钮 -->
-      <div class="startMenu flex" id="startMenu" @click="searchBtn">
+      <div class="startMenu flex" id="startMenu">
         <img :src="windowsImg" v-ClickAnimation alt="" id="startMenuImg" />
       </div>
       <!-- 搜索按钮 -->
-      <div class="startMenu flex" id="search" @click="searchBtn">
+      <div class="startMenu flex" id="search">
         <img :src="searchImg" v-ClickAnimation alt="" id="searchImg" />
       </div>
 			<!-- 小工具 -->
@@ -69,8 +69,23 @@ export default {
     const store = useStore();
     const componentTag = ref('search')
     const isShow = computed(() => store.state.taskbar.startMapShow);
-    const searchBtn = (e) => {
-      componentTag.value=e.target.id.indexOf('search')>-1?'Search':'StartMap'
+    // 任务栏中间部分点击事件监听
+    const taskbarBtn = e=>{
+      if(e.target.id.indexOf('widget')>=0){
+        store.dispatch('taskbar/changeWidgetShow',!store.state.taskbar.widgetShow)
+        return
+      }
+      if(store.state.taskbar.widgetShow){
+        store.dispatch('taskbar/changeWidgetShow',false)
+      }
+      switch(0){
+        case e.target.id.indexOf('startMenu'):
+          componentTag.value = 'StartMap'
+          break
+        case e.target.id.indexOf('search'):
+          componentTag.value = 'Search'
+          break
+      }
     }
 		// 处理亮/暗主题
     let imgUrl = reactive({
@@ -105,8 +120,8 @@ export default {
       isShow,
       ...imgUrl,
       componentTag,
-      searchBtn,
-      aaa
+      aaa,
+      taskbarBtn
     };
   },
 };
-- 
Gitee


From 59bf51de84c4f787edc4d6882ce73018b25623c5 Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Thu, 16 Sep 2021 16:28:40 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=B0=8F=E5=B7=A5=E5=85=B7=EF=BC=8C?=
 =?UTF-8?q?=E9=80=9A=E7=9F=A5=E4=B8=AD=E5=BF=83=EF=BC=8C=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E6=A0=8F=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Notice/index.vue | 11 +++++
 src/components/Widget/index.vue | 61 ++++++++++++++++++++++++++
 src/store/modules/taskbar.js    | 10 ++++-
 src/styles/index.scss           | 19 +++++++-
 src/views/desktop/Home.vue      | 77 ++++++++++++++-------------------
 src/views/taskbar/index.vue     | 51 +++++++++++++++++-----
 6 files changed, 172 insertions(+), 57 deletions(-)
 create mode 100644 src/components/Notice/index.vue
 create mode 100644 src/components/Widget/index.vue

diff --git a/src/components/Notice/index.vue b/src/components/Notice/index.vue
new file mode 100644
index 0000000..fd7c637
--- /dev/null
+++ b/src/components/Notice/index.vue
@@ -0,0 +1,11 @@
+<template>
+  12345
+</template>
+<script>
+export default {
+  
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Widget/index.vue b/src/components/Widget/index.vue
new file mode 100644
index 0000000..49d6f53
--- /dev/null
+++ b/src/components/Widget/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="drawerTitle">
+      <i class="el-icon-more"></i>
+    </div>
+    <div class="drawerTime">
+      <strong>{{drawerTime}}</strong>
+    </div>
+    <div class="drawerContent">
+      123456
+    </div>
+</template>
+<script>
+import { watch, ref } from 'vue'
+import {useStore} from 'vuex'
+export default {
+  setup(){
+    const store = useStore()
+    let drawerTime = ref(0)
+    // 小工具时间处理
+    let currentTime = null
+    const timing=()=>{
+      currentTime+=1000
+      let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
+      drawerTime.value = `${hours} : ${minutes} : ${seconds}`
+    }
+    let timer = null
+    // 小工具显示 / 隐藏 及时间处理
+    watch(()=>store.state.taskbar.widgetShow,()=>{
+      if(store.state.taskbar.widgetShow&&store.state.taskbar.widgetOrNotice){
+        currentTime = new Date().getTime()
+        let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
+        drawerTime.value = `${hours} : ${minutes} : ${seconds}`
+        timer = setInterval(timing,1000)
+      }else{
+        clearInterval(timer)
+      }
+    })
+    return{
+      drawerTime
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.drawerTitle{
+  width: 96%;
+  padding-top: 18px;
+  text-align: right;
+}
+.drawerTime{
+  margin-bottom: 24px;
+  strong{
+    color: #222;
+    font-size: 24px;
+  }
+}
+.drawerContent{
+  width: 80%;
+  margin: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/store/modules/taskbar.js b/src/store/modules/taskbar.js
index a8d36c1..b0eadf4 100644
--- a/src/store/modules/taskbar.js
+++ b/src/store/modules/taskbar.js
@@ -1,7 +1,8 @@
 const state = {
 	startMapShow: false,
 	currentPag: 'start',
-	widgetShow: false
+	widgetShow: false,
+	widgetOrNotice: true  // true -> widget   false -> notice
 }
 
 const mutations = {
@@ -28,6 +29,10 @@ const mutations = {
 	// 小工具显示/隐藏
 	WIDGET_SHOW(state,val){
 		state.widgetShow = val
+	},
+	// 小工具 还是 通知中心
+	WIDGETORNOTICE(state,val){
+		state.widgetOrNotice = val
 	}
 }
 
@@ -37,6 +42,9 @@ const actions = {
 	},
 	changeWidgetShow({commit},val){
 		commit('WIDGET_SHOW',val)
+	},
+	changeWidgetOrNotice({commit},val){
+		commit('WIDGETORNOTICE',val)
 	}
 }
 
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 355798d..79f8bc5 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,6 @@
 @import './animation.scss';
 
-// 小工具遮罩层背景色
+// 小工具样式
 .widget{
   width: 610px;
   height: 94%;
@@ -13,4 +13,21 @@
     box-shadow: none;
     border-radius: 8px;
   }
+}
+// 通知样式
+.notice{
+  width: 320px;
+  height: calc(100% - 40px);
+  left: auto;
+  right: 0 !important;
+  background: transparent;
+  .el-drawer{
+    width: 100% !important;
+    box-shadow: none;
+    background-color: rgba(255, 255, 255, 0.88);
+    backdrop-filter: blur(20px);
+  }
+  .el-drawer__close-btn{
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index 43aa6b2..9f1eb18 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -5,38 +5,52 @@
       <p>{{item.name}}</p>
     </div>
   </div>
-  <el-drawer modal-class="widget" v-model="drawer" :before-close='drawBeforeClose' :modal='false' :with-header="false" direction="ltr">
-    <div class="drawerTitle">
-      <i class="el-icon-more"></i>
-    </div>
-    <div class="drawerTime">
-      <strong>{{drawerTime}}</strong>
-    </div>
-    <div class="drawerContent">
-      123456
-    </div>
+  <el-drawer :modal-class="drawerData.className" v-model="drawer" :before-close='drawBeforeClose' :modal='drawerData.modal' :with-header="drawerData.withHeader" :direction="drawerData.position" :title="drawerData.title">
+    <component :is='drawerData.componentTag'></component>
   </el-drawer>
 </template>
 
 <script>
 import { reactive, ref, watch } from 'vue';
 import { useStore } from 'vuex';
+import Widget from '@/components/Widget'
+import Notice from '@/components/Notice'
 export default {
   name: 'Home',
+  components:{
+    Widget,
+    Notice
+  },
   setup() {
     const store = useStore()
     const drawer = ref(false)
+    // 小工具 还是 通知中心
+    const drawerData = reactive({
+      className: 'widget',
+      modal: false,
+      withHeader: false,
+      position: 'ltr',
+      title: '通知管理',
+      componentTag: 'Widget'
+    })
     watch(()=>store.state.taskbar.widgetShow,()=>{
-      if(store.state.taskbar.widgetShow){
-        currentTime = new Date().getTime()
-        let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
-        drawerTime.value = `${hours} : ${minutes} : ${seconds}`
-        timer = setInterval(timing,1000)
-      }else{
-        clearInterval(timer)
-      }
       drawer.value = store.state.taskbar.widgetShow
     })
+    watch(()=>store.state.taskbar.widgetOrNotice,()=>{
+      if(store.state.taskbar.widgetOrNotice){
+        drawerData.className = 'widget'
+        drawerData.modal = false
+        drawerData.withHeader = false
+        drawerData.position = 'ltr'
+        drawerData.componentTag = 'Widget'
+        return
+      }
+      drawerData.className = 'notice'
+      drawerData.modal = true
+      drawerData.withHeader = true
+      drawerData.position = 'rtl'
+      drawerData.componentTag = 'Notice'
+    })
     const dataList = reactive([
       {
         name: 'Blue',
@@ -94,22 +108,13 @@ export default {
         store.dispatch('taskbar/changeWidgetShow',false)
       }
     }
-    let drawerTime = ref(0)
-    // 小工具时间处理
-    let currentTime = null
-    const timing=()=>{
-      currentTime+=1000
-      let hours = new Date(currentTime).getHours(),minutes = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`,seconds = new Date(currentTime).getSeconds()>9?new Date(currentTime).getSeconds():`0${new Date(currentTime).getSeconds()}`
-      drawerTime.value = `${hours} : ${minutes} : ${seconds}`
-    }
-    let timer = null
     return {
       dataList,
       scale,
       drawer,
       drawBeforeClose,
       closeWidget,
-      drawerTime
+      drawerData
     };
   },
 };
@@ -161,20 +166,4 @@ export default {
     background: rgba(255, 255, 255, 0.5);
   }
 }
-.drawerTitle{
-  width: 96%;
-  padding-top: 18px;
-  text-align: right;
-}
-.drawerTime{
-  margin-bottom: 24px;
-  strong{
-    color: #222;
-    font-size: 24px;
-  }
-}
-.drawerContent{
-  width: 80%;
-  margin: auto;
-}
 </style>
\ No newline at end of file
diff --git a/src/views/taskbar/index.vue b/src/views/taskbar/index.vue
index 4768178..1b9dc76 100644
--- a/src/views/taskbar/index.vue
+++ b/src/views/taskbar/index.vue
@@ -40,10 +40,10 @@
       <div class="startMenu rightMenu"><img class="rightImg" :src="batteryImg" alt="battery"></div>
       <div class="startMenu rightMenu"><img class="audoiImg" :src="audioImg" alt="audio"></div>
       <div class="rightTime">
-        <span>15:18</span>
-        <span>2021/9/10</span>
+        <span>{{time}}</span>
+        <span>{{date}}</span>
       </div>
-      <div class="startMenu rightMenu"><img class="rightImg sidebar" :src="sidebarImg" alt="sidebar"></div>
+      <div class="startMenu rightMenu" @click="showNotice"><img class="rightImg sidebar" :src="sidebarImg" alt="sidebar"></div>
     </div>
     <!-- 开始按钮和搜索按钮弹框 -->
     <transition name="el-zoom-in-bottom">
@@ -55,7 +55,7 @@
 </template>
 
 <script>
-import { computed, reactive, watch, ref } from "vue";
+import { computed, reactive, watch, ref, nextTick } from "vue";
 import { useStore } from "vuex";
 import StartMap from './components/startMap/index.vue'
 import Search from './components/search/index.vue'
@@ -70,13 +70,16 @@ export default {
     const componentTag = ref('search')
     const isShow = computed(() => store.state.taskbar.startMapShow);
     // 任务栏中间部分点击事件监听
-    const taskbarBtn = e=>{
+    const taskbarBtn = async e=>{
       if(e.target.id.indexOf('widget')>=0){
-        store.dispatch('taskbar/changeWidgetShow',!store.state.taskbar.widgetShow)
-        return
-      }
-      if(store.state.taskbar.widgetShow){
+        if(store.state.taskbar.widgetShow&&store.state.taskbar.widgetOrNotice){
+          store.dispatch('taskbar/changeWidgetShow',false)
+          return
+        }
         store.dispatch('taskbar/changeWidgetShow',false)
+        store.dispatch('taskbar/changeWidgetOrNotice',true)
+        await nextTick()
+        store.dispatch('taskbar/changeWidgetShow',true)
       }
       switch(0){
         case e.target.id.indexOf('startMenu'):
@@ -114,6 +117,29 @@ export default {
         ("aaa"); // -> 此处设置暗主题图标
       }
     });
+    // 显示 / 隐藏 通知中心
+    const showNotice = async () =>{
+      if(store.state.taskbar.widgetShow && !store.state.taskbar.widgetOrNotice){
+        store.dispatch('taskbar/changeWidgetShow',false)
+        return
+      }
+      store.dispatch('taskbar/changeWidgetShow',false)
+      store.dispatch('taskbar/changeWidgetOrNotice',false)
+      await nextTick()
+      store.dispatch('taskbar/changeWidgetShow',true)
+    }
+    // 时间数据
+    let currentTime = new Date().getTime()
+    const time = ref(0)
+    const date = ref(0)
+    const fn = () =>{
+      currentTime+=1000
+      const minus = new Date(currentTime).getMinutes()>9?new Date(currentTime).getMinutes():`0${new Date(currentTime).getMinutes()}`
+      const hours = new Date(currentTime).getHours()>9?new Date(currentTime).getHours():`0${new Date(currentTime).getHours()}`
+      time.value = `${hours}:${minus}`
+      date.value = `${new Date(currentTime).getFullYear()}/${new Date(currentTime).getMonth()+1}/${new Date(currentTime).getDate()}`
+    }
+    setInterval(fn,1000)
     // 阻止事件冒泡，防止关闭弹窗
     const aaa=()=>{}
     return {
@@ -121,7 +147,10 @@ export default {
       ...imgUrl,
       componentTag,
       aaa,
-      taskbarBtn
+      taskbarBtn,
+      showNotice,
+      time,
+      date
     };
   },
 };
@@ -169,7 +198,7 @@ export default {
     width: auto;
     padding: 0 5px;
     &:nth-last-of-type(1){
-      border-right: 1px solid lightgray;
+      border-right: 1px solid #aaa;
     }
     .rightImg{
       height: 40%;
-- 
Gitee