From ec8dc3c6969736bef4a6d960ea1b0e908abd0f87 Mon Sep 17 00:00:00 2001
From: pdsuwwz <pdsu.wwz@foxmail.com>
Date: Mon, 24 Jul 2023 00:18:22 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=BE=EF=B8=8F=20feat:=20update=20tab=20?=
 =?UTF-8?q?item=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/WorkMenu/hooks.ts        |  3 +++
 src/widgets/WorkTabs/Tabs.vue        | 21 +++++++++++++------
 src/widgets/WorkTabs/TabsOptions.vue | 30 +++++++++++++++++++---------
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/widgets/WorkMenu/hooks.ts b/src/widgets/WorkMenu/hooks.ts
index 2e07bee..d036923 100644
--- a/src/widgets/WorkMenu/hooks.ts
+++ b/src/widgets/WorkMenu/hooks.ts
@@ -65,8 +65,10 @@ export const useMenuHook = () => {
   )
 
   let lockPush = false
+  let isMounted = false
   const handleSelect = (key: string) => {
     lockPush = true
+    isMounted = true
     router.push({
       name: key
     }).finally(() => {
@@ -77,6 +79,7 @@ export const useMenuHook = () => {
 
   const setActiveKey = async (key: string) => {
     activeKey.value = key
+    if (isMounted) return
     await nextTick()
 
     const selectedClassName = '.n-menu-item-content--selected'
diff --git a/src/widgets/WorkTabs/Tabs.vue b/src/widgets/WorkTabs/Tabs.vue
index 4731375..e48a351 100644
--- a/src/widgets/WorkTabs/Tabs.vue
+++ b/src/widgets/WorkTabs/Tabs.vue
@@ -33,7 +33,7 @@
           class="tab-item-icon flex items-center"
           @click.stop="handleCloseTab(tabItem)"
         >
-          <n-icon :component="IosCloseCircleOutline" />
+          <n-icon :component="CloseOutline" />
         </div>
       </li>
     </ul>
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { IosCloseCircleOutline } from '@vicons/ionicons4'
+import { CloseOutline } from '@vicons/ionicons5'
 import useWorkTabsStore from './store'
 import type { WorkTab } from './types'
 
@@ -223,7 +223,16 @@ onUnmounted(async() => {
       .tab-item-icon {
         margin-left: 14px;
         border-radius: 50%;
-        color: #b6b9c1;
+
+        --at-apply: c-#5a5a5a dark:c-#e6e6e6;
+
+        padding: 2px;
+        font-weight: bolder;
+        transition: background .3s;
+
+        &:hover {
+          --at-apply: bg-#e6e6e6 dark:bg-#302f2f;
+        }
       }
 
       .tab-item-label {
@@ -243,7 +252,7 @@ onUnmounted(async() => {
         --at-apply: bg-#f5f7f9 dark:bg-#3e3e3e;
 
         & > .tab-item-icon {
-          color: #909399;
+          // color: #909399;
         }
       }
 
@@ -255,14 +264,14 @@ onUnmounted(async() => {
         }
 
         & > .tab-item-icon {
-          color: transparent;
+          // color: transparent;
         }
 
         &:hover {
           --at-apply: dark:bg-#1e1e20;
 
           & > .tab-item-icon {
-            --at-apply: c-#909399 dark:c-#b6b9c1;
+            // --at-apply: c-#909399 dark:c-#b6b9c1;
           }
         }
       }
diff --git a/src/widgets/WorkTabs/TabsOptions.vue b/src/widgets/WorkTabs/TabsOptions.vue
index 4fcc15e..e766693 100644
--- a/src/widgets/WorkTabs/TabsOptions.vue
+++ b/src/widgets/WorkTabs/TabsOptions.vue
@@ -27,9 +27,11 @@
         }"
         @click="handleCloseOtherTabs()"
       >
-        <n-icon
-          :component="IosCloseCircleOutline"
-        />
+        <span class="close-icon focus">
+          <n-icon
+            :component="CloseOutline"
+          />
+        </span>
         <span class="close-other-text">关闭其他标签</span>
       </div>
       <ul class="tabs-options-body">
@@ -48,11 +50,11 @@
           >{{ tabItem.customLabel || tabItem.label }}</span>
           <div
             v-if="workTabsStore.currentTabsInCacheSpace.length !== 1"
-            class="close-icon"
+            class="close-icon right"
             @click.stop="handleCloseTab(tabItem)"
           >
             <n-icon
-              :component="IosCloseCircleOutline"
+              :component="CloseOutline"
             />
           </div>
         </li>
@@ -63,7 +65,7 @@
 
 <script lang="ts" setup>
 
-import { IosCloseCircleOutline } from '@vicons/ionicons4'
+import { CloseOutline } from '@vicons/ionicons5'
 import { KeyboardDoubleArrowDownFilled } from '@vicons/material'
 import useWorkTabsStore from './store'
 import type { WorkTab } from './types'
@@ -128,12 +130,22 @@ const isKeepHover = ref(false)
     display: flex;
     align-items: center;
     font-size: 14px;
+    border-radius: 50%;
+    padding: 2px;
+    font-weight: bolder;
+    transition: background .3s;
     cursor: pointer;
 
-    --at-apply: c-#bbb dark:c-#aaa;
 
-    &:hover {
-      --at-apply: c-#909399 dark:c-#ddd;
+
+    --at-apply: c-#5a5a5a dark:c-#e6e6e6;
+
+    &.right:hover {
+      --at-apply: bg-#fff dark:bg-#302f2f;
+    }
+
+    &.focus {
+      --at-apply: bg-#e6e6e6 dark:bg-#666;
     }
   }