🍾️ feat: update tab item icon

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'

src/widgets/WorkTabs/Tabs.vue

@@ -33,15 +33,15 @@
           class="tab-item-icon flex items-center"
           @click.stop="handleCloseTab(tabItem)"
         >
-          <n-icon :component="IosCloseCircleOutline" />
+          <n-icon :component="CloseOutline" />
         </div>
       </li>
     </ul>
   </div>
 </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;
           }
         }
       }

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;
     }
   }