From 963b30dd85353ca2febcf743f83115919c31b596 Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Thu, 23 Sep 2021 09:16:09 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E6=A1=8C=E9=9D=A2=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/animation.scss  | 12 ++++----
 src/views/desktop/Home.vue | 59 +++++++++++++++++---------------------
 2 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/src/styles/animation.scss b/src/styles/animation.scss
index 6e05cf2..1f724fc 100644
--- a/src/styles/animation.scss
+++ b/src/styles/animation.scss
@@ -13,12 +13,12 @@
   0%{
     transform: scale(0.8);
   }
-  40%{
-    transform: scale(1.1);
-  }
-  70%{
-    transform: scale(0.725);
-  }
+  // 50%{
+  //   transform: scale(0.9);
+  // }
+  // 70%{
+  //   transform: scale(0.725);
+  // }
   100%{
     transform: scale(1);
   }
diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index 78ed237..9c4cd9a 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <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 />
+      <img @click="scale(item)" :src="item.url" alt v-ClickAnimation />
       <p>{{item.name}}</p>
     </div>
   </div>
@@ -78,53 +78,46 @@ export default {
       drawerData.position = 'rtl'
       drawerData.componentTag = 'Notice'
     })
-    const dataList = reactive([
+    const dataList = [
       {
         name: 'Blue',
-        url: require('@/assets/img/icon/win/userDir.png'),
-        isScale: false,
+        url: require('@/assets/img/icon/win/userDir.png')
       },
       {
         name: 'Recycle Bin',
-        url: require('@/assets/img/icon/bin0.png'),
-        isScale: false,
+        url: require('@/assets/img/icon/bin0.png')
       },
       {
         name: 'File Explorer',
-        url: require('@/assets/img/icon/explorer.png'),
-        isScale: false,
+        url: require('@/assets/img/icon/explorer.png')
       },
       {
         name: 'Store',
-        url: require('@/assets/img/icon/store.png'),
-        isScale: false,
+        url: require('@/assets/img/icon/store.png')
       },
       {
         name: 'Edge',
-        url: require('@/assets/img/icon/edge.png'),
-        isScale: false,
+        url: require('@/assets/img/icon/edge.png')
       },
       {
         name: 'Github',
-        url: require('@/assets/img/icon/github.png'),
-        isScale: false,
+        url: require('@/assets/img/icon/github.png')
       },
       {
         name: 'Unescape',
-        url: require('@/assets/img/icon/unescape.png'),
-        isScale: false,
+        url: require('@/assets/img/icon/unescape.png')
       },
-    ]);
-    const scale = (item) => {
-      console.log(item);
-      dataList.forEach((cont) => {
-        if (item === cont) {
-          cont.isScale = !cont.isScale;
-          setTimeout(() => {
-            cont.isScale = !cont.isScale;
-          }, 300);
-        }
-      });
+    ];
+    const scale = item => {
+      // console.log(item);
+      // dataList.forEach((cont) => {
+      //   if (item === cont) {
+      //     cont.isScale = !cont.isScale;
+      //     setTimeout(() => {
+      //       cont.isScale = !cont.isScale;
+      //     }, 300);
+      //   }
+      // });
       if(item.name.toLowerCase()==='edge'){
         store.dispatch('desktop/changeEdge')
       }
@@ -168,7 +161,7 @@ export default {
     // 关闭窗口
     const closeWindow = val =>{
       if(val === 'edge'){
-        store.dispatch('changeEdge')
+        store.dispatch('desktop/changeEdge')
       }
     }
     // 前进 后退 刷新
@@ -230,12 +223,12 @@ export default {
     img {
       width: 35px;
       height: 35px;
-      transform: scale(1);
-      transition: all ease-in 0.2s;
-    }
-    img.scale {
-      transform: scale(0.5);
+      // transform: scale(1);
+      // transition: all ease-in 0.2s;
     }
+    // img.scale {
+    //   transform: scale(0.5);
+    // }
     p {
       color: #fafafa;
       text-shadow: 0 0 4px rgb(0 0 0 / 60%);
-- 
Gitee


From 58922533baaf5608a5f5737ab228fe36c2573758 Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Sun, 26 Sep 2021 08:50:34 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E6=A0=8F=E5=92=8C?=
 =?UTF-8?q?=E6=A1=8C=E9=9D=A2=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/animation.scss  | 2 +-
 src/views/desktop/Home.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/animation.scss b/src/styles/animation.scss
index 1f724fc..703ff4d 100644
--- a/src/styles/animation.scss
+++ b/src/styles/animation.scss
@@ -19,7 +19,7 @@
   // 70%{
   //   transform: scale(0.725);
   // }
-  100%{
+  50%{
     transform: scale(1);
   }
 }
\ No newline at end of file
diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index 9c4cd9a..8a7976a 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -134,6 +134,7 @@ export default {
         store.dispatch('taskbar/changeDateBoxShow',false)
       }
     }
+    
     // 浏览器链接
     const tempData = ['https://www.bing.com']   // 浏览器历史记录
     let currentPosition = 0 // 当前在哪一步
-- 
Gitee


From c78ab9c76e99ba233ce7da987130dbcb61ff721b Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Sun, 26 Sep 2021 09:00:15 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E5=8E=BB=E6=8E=89=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/desktop/Home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index 8a7976a..792202c 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -10,7 +10,7 @@
   </el-drawer>
   <!-- edge -->
   <div class="appWindow" v-show="edge">
-    <div class="titleBar" v-Dragg>
+    <div class="titleBar">
       <div class="titleBarLeft">
         <div>
           <span>New Tab</span>
-- 
Gitee


From a063ce3fcdf35994667e62596bd20e41b9278144 Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Sun, 26 Sep 2021 15:43:48 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E7=AA=97=E5=8F=A3=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavBarRight/index.vue | 138 +++++++++++++++++++++++++--
 src/utils/index.js                   |   7 ++
 src/views/desktop/Home.vue           |  19 ++--
 3 files changed, 144 insertions(+), 20 deletions(-)

diff --git a/src/components/NavBarRight/index.vue b/src/components/NavBarRight/index.vue
index b15a80d..902ea16 100644
--- a/src/components/NavBarRight/index.vue
+++ b/src/components/NavBarRight/index.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="navBarRight">
-    <div class="mini" @click="minmax"></div>
-    <div class="windows" @click="windowChange">
-      <div class="winBox" @click.stop="windowsPosition">
+    <!-- <div class="mini" @click="minmax"></div> -->
+    <div class="mini" @click="closeWindow"></div>
+    <div class="windows" id='reduction' @click.stop="windowsPosition">
+      <div class="winBox">
         <div class="item1">
           <div id="halfOnLeft"></div>
           <div id="halfOnRight"></div>
@@ -17,15 +18,15 @@
           <div id="thirdOnRight"></div>
         </div>
         <div class="item4">
-          <div id="thirdHalfOnLeft" class="item4A"></div>
+          <div id="halfOnLeft" class="item4A"></div>
           <div id="thirdOnTop"></div>
           <div id="thirdOnBottom"></div>
         </div>
         <div class="item5">
           <div id="quarterOnLeftTop"></div>
-          <div id="quarterOnRightTop"></div>
+          <div id="thirdOnTop"></div>
           <div id="quarterOnLeftBottom"></div>
-          <div id="quarterOnRightBottom"></div>
+          <div id="thirdOnBottom"></div>
         </div>
         <div class="item6">
           <div id="moreThirdLeft"></div>
@@ -40,6 +41,7 @@
 
 <script>
 import {useStore} from 'vuex'
+import {getParentNode} from '@/utils'
 export default {
   props:{
     close:{
@@ -52,7 +54,125 @@ export default {
     const store = useStore()
     const windowsPosition = e =>{
       if(!e.target.id) return
-      console.log(e.target.id);
+      let a=getParentNode(e.target,'appWindow')
+      switch(e.target.id){
+        case 'halfOnLeft':
+          a.style.width='50%'
+          a.style.height='100%'
+          a.style.right='auto'
+          a.style.left = 0
+          break
+        case 'halfOnRight':
+          a.style.width='50%'
+          a.style.height='100%'
+          a.style.left = 'auto'
+          a.style.right = 0
+          break
+        case 'moreOnLeft':
+          a.style.width='60%'
+          a.style.height='100%'
+          a.style.right='auto'
+          a.style.left = 0
+          break
+        case 'moreOnRight':
+          a.style.width='40%'
+          a.style.height='100%'
+          a.style.left = 'auto'
+          a.style.right = 0
+          break
+        case 'thirdOnLeft':
+          a.style.width='33%'
+          a.style.height='100%'
+          a.style.left = 0
+          a.style.right = 'auto'
+          a.style.margin = 'auto'
+          break
+        case 'thirdOnCenter':
+          a.style.width='33%'
+          a.style.height='100%'
+          a.style.right=0
+          a.style.left = 0
+          a.style.margin = 'auto'
+          break
+        case 'thirdOnRight':
+          a.style.width='33%'
+          a.style.height='100%'
+          a.style.left = 'auto'
+          a.style.right = 0
+          a.style.margin = 'auto'
+          break
+        case 'thirdOnTop':
+          a.style.width='50%'
+          a.style.height = '50%'
+          a.style.right=0
+          a.style.top=0
+          a.style.bottom = 'auto'
+          a.style.left = 'auto'
+          a.style.margin = 'auto'
+          break
+        case 'thirdOnBottom':
+          a.style.width='50%'
+          a.style.height = '50%'
+          a.style.left = 'auto'
+          a.style.right = 0
+          a.style.top='auto'
+          a.style.bottom=0
+          a.style.margin = 'auto'
+          break
+        case 'quarterOnLeftTop':
+          a.style.width='50%'
+          a.style.height = '50%'
+          a.style.right='auto'
+          a.style.top=0
+          a.style.bottom = 'auto'
+          a.style.left = 'auto'
+          a.style.margin = 'auto'
+          break
+        case 'quarterOnLeftBottom':
+          a.style.width='50%'
+          a.style.height = '50%'
+          a.style.left = 0
+          a.style.right = 'auto'
+          a.style.top='auto'
+          a.style.bottom=0
+          a.style.margin = 'auto'
+          break
+        case 'moreThirdLeft':
+          a.style.width='25%'
+          a.style.height = '100%'
+          a.style.left = 0
+          a.style.right = 'auto'
+          a.style.top=0
+          a.style.bottom=0
+          a.style.margin = 'auto'
+          break
+        case 'moreThirdCenter':
+          a.style.width='50%'
+          a.style.height = '100%'
+          a.style.right=0
+          a.style.top=0
+          a.style.bottom = 0
+          a.style.left = 0
+          a.style.margin = 'auto'
+          break
+        case 'moreThirdRight':
+          a.style.width='25%'
+          a.style.height = '100%'
+          a.style.left = 'auto'
+          a.style.right = 0
+          a.style.top=0
+          a.style.bottom=0
+          a.style.margin = 'auto'
+          break
+        default:
+          a.style.width='100%'
+          a.style.height = '100%'
+          a.style.left = 0
+          a.style.right = 0
+          a.style.top=0
+          a.style.bottom=0
+          a.style.margin = 'auto'
+      }
     }
     const minmax = ()=>{
       console.log('minmax');
@@ -122,6 +242,7 @@ export default {
   width: 200px;
   height: 100px;
   display: none;
+  z-index: 99;
   grid-template-columns: repeat(3,3.3fr);
   grid-template-rows: repeat(2,5fr);
   grid-gap: 8px;
@@ -136,8 +257,7 @@ export default {
     div{
       background: #E6E6E6;
       &:hover{
-        transform: scale(1.1);
-        border: 1px solid lightgreen;
+        background: #d6d6d6;
       }
     }
   }
diff --git a/src/utils/index.js b/src/utils/index.js
index e69de29..83f4869 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -0,0 +1,7 @@
+// 获取元素 class 为 appWindow 的父节点
+export function getParentNode(e,className){
+  if(e.parentNode.className===className){
+    return e.parentNode
+  }
+  return getParentNode(e.parentNode,className)
+}
\ No newline at end of file
diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index 792202c..47e545a 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -9,7 +9,7 @@
     <component :is='drawerData.componentTag'></component>
   </el-drawer>
   <!-- edge -->
-  <div class="appWindow" v-show="edge">
+  <div class="appWindow" ref="appWindow" v-show="edge">
     <div class="titleBar">
       <div class="titleBarLeft">
         <div>
@@ -109,15 +109,6 @@ export default {
       },
     ];
     const scale = item => {
-      // console.log(item);
-      // dataList.forEach((cont) => {
-      //   if (item === cont) {
-      //     cont.isScale = !cont.isScale;
-      //     setTimeout(() => {
-      //       cont.isScale = !cont.isScale;
-      //     }, 300);
-      //   }
-      // });
       if(item.name.toLowerCase()==='edge'){
         store.dispatch('desktop/changeEdge')
       }
@@ -185,6 +176,9 @@ export default {
       }
       router.go(0)
     }
+    // 获取DOM节点
+    const appWindow = ref(null)
+   
     return {
       dataList,
       scale,
@@ -197,7 +191,8 @@ export default {
       edgeLinkChange,
       edge,
       closeWindow,
-      urlLeft
+      urlLeft,
+      appWindow
     };
   },
 };
@@ -253,11 +248,13 @@ export default {
   position: absolute;
   width: 100%;
   height: 100%;
+  overflow: hidden;
   top: 0;
   left: 0;
   display: grid;
   grid-template-rows: 0.35fr 0.35fr 9.3fr;
   .titleBar{
+    min-height: 32px;
     background-color: #E7EAEC;
   }
   .draggBox{
-- 
Gitee


From a3facc7711dc9ee85a53b8c3d01d34cafbcb0800 Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Sun, 26 Sep 2021 16:03:40 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E5=90=91=E4=B8=8B=E8=BF=98=E5=8E=9F?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/NavBarRight/index.vue | 37 +++++++++++++++++++---------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/NavBarRight/index.vue b/src/components/NavBarRight/index.vue
index 902ea16..9bc369a 100644
--- a/src/components/NavBarRight/index.vue
+++ b/src/components/NavBarRight/index.vue
@@ -2,8 +2,8 @@
   <div class="navBarRight">
     <!-- <div class="mini" @click="minmax"></div> -->
     <div class="mini" @click="closeWindow"></div>
-    <div class="windows" id='reduction' @click.stop="windowsPosition">
-      <div class="winBox">
+    <div class="windows" @click="windowChange">
+      <div class="winBox" @click.stop="windowsPosition">
         <div class="item1">
           <div id="halfOnLeft"></div>
           <div id="halfOnRight"></div>
@@ -52,8 +52,10 @@ export default {
   },
   setup(props){
     const store = useStore()
+    let flag = true // 程序窗口化/最大化 标识 true->窗口 false->最大
     const windowsPosition = e =>{
       if(!e.target.id) return
+      flag = false
       let a=getParentNode(e.target,'appWindow')
       switch(e.target.id){
         case 'halfOnLeft':
@@ -164,21 +166,32 @@ export default {
           a.style.bottom=0
           a.style.margin = 'auto'
           break
-        default:
-          a.style.width='100%'
-          a.style.height = '100%'
-          a.style.left = 0
-          a.style.right = 0
-          a.style.top=0
-          a.style.bottom=0
-          a.style.margin = 'auto'
       }
     }
     const minmax = ()=>{
       console.log('minmax');
     }
-    const windowChange=()=>{
-      console.log('windowchange');
+    const windowChange=e=>{
+      let a=getParentNode(e.target,'appWindow')
+      if(flag){
+        a.style.width='60%'
+        a.style.height = '70%'
+        a.style.left = 0
+        a.style.right = 0
+        a.style.top=0
+        a.style.bottom=0
+        a.style.margin = 'auto'
+        flag=false
+        return
+      }
+      a.style.width='100%'
+      a.style.height = '100%'
+      a.style.left = 0
+      a.style.right = 0
+      a.style.top=0
+      a.style.bottom=0
+      a.style.margin = 'auto'
+      flag=true
     }
     const closeWindow=()=>{
       if(props.close==='edge'){
-- 
Gitee


From 47559c1fff3eecfad64094764422885175eca04a Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Sun, 26 Sep 2021 16:13:12 +0800
Subject: [PATCH 6/7] =?UTF-8?q?::v-deep=E6=94=B9=E4=B8=BA:v-deep()?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/desktop/Home.vue                    | 2 +-
 src/views/taskbar/components/search/index.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/desktop/Home.vue b/src/views/desktop/Home.vue
index 47e545a..2839016 100644
--- a/src/views/desktop/Home.vue
+++ b/src/views/desktop/Home.vue
@@ -284,7 +284,7 @@ export default {
     }
   }
 }
-::v-deep .el-input{
+:v-deep(.el-input){
   width: 70%;
   .el-input__inner{
     height: 32px;
diff --git a/src/views/taskbar/components/search/index.vue b/src/views/taskbar/components/search/index.vue
index 7747f9a..ad8fddd 100644
--- a/src/views/taskbar/components/search/index.vue
+++ b/src/views/taskbar/components/search/index.vue
@@ -53,7 +53,7 @@ export default {
   text-align: left;
 }
 .el-input {
-  ::v-deep .el-input__inner {
+  :v-deep(.el-input__inner) {
     height: 34px;
     line-height: 34px;
     border: solid 2px #0e60e4;
@@ -65,7 +65,7 @@ export default {
     padding-left: 35px;
   }
 }
-::v-deep .el-tabs{
+:v-deep(.el-tabs){
   border-bottom: none;
   .el-tabs__item{
     font-size: 13px;
-- 
Gitee


From 5eaf78b64967de61987c9b5a4a47cf80b443e4cb Mon Sep 17 00:00:00 2001
From: "weijie.g@qq.com" <weijie.g@qq.com>
Date: Sun, 26 Sep 2021 17:19:57 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=E5=BC=80=E5=A7=8B=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=89=93=E5=BC=80edge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../taskbar/components/startMap/components/pinned.vue  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/views/taskbar/components/startMap/components/pinned.vue b/src/views/taskbar/components/startMap/components/pinned.vue
index 0a9a108..08e33df 100644
--- a/src/views/taskbar/components/startMap/components/pinned.vue
+++ b/src/views/taskbar/components/startMap/components/pinned.vue
@@ -6,7 +6,7 @@
     </div>
     <!-- pinned 列表 -->
     <div class="pinnedList">
-      <div v-for="(item,index) in pinnedData" :key="index">
+      <div v-for="(item,index) in pinnedData" :key="index" @click.stop='openApp(item.name)'>
         <img :src="item.url" alt="">
         <p>{{item.name}}</p>
       </div>
@@ -29,8 +29,10 @@
 
 <script>
 import { reactive } from '@vue/reactivity'
+import {useStore} from 'vuex'
 export default {
   setup(props,{emit}){
+    const store = useStore()
     const pinnedData = [{
       url: require('@/assets/img/icon/edge.png'),
       name: 'Edge'
@@ -118,11 +120,15 @@ export default {
     const toAllApps = () => {
       emit('changeTag')
     }
+    const openApp = val => {
+      store.dispatch(`desktop/change${val}`)
+    }
     return {
       pinnedData,
       recommendData,
       myStyle,
-      toAllApps
+      toAllApps,
+      openApp
     }
   }
 }
-- 
Gitee