From 169a3049c479bd001e5cb5cff4eb20010e3c66ad Mon Sep 17 00:00:00 2001
From: KAI <1373639299@qq.com>
Date: Wed, 6 Nov 2024 14:41:10 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20tab=E6=A0=8F=E5=A2=9E=E5=8A=A0=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=20Closes=20#IA5RD4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Tabs/index.vue | 84 ++++++++++++++++++++++------
 1 file changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 92786f5..d410d99 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -15,25 +15,71 @@
         :title="(item.meta?.title as string)"
         :closable="Boolean(!item.meta?.affix)"
       >
+        <template #title>
+          <a-dropdown trigger="contextMenu">
+            <span @contextmenu="(e) => handleContextMenu(e, item.path)">
+              {{ item.meta?.title }}
+            </span>
+
+            <template #content>
+              <a-doption @click="tabsStore.closeCurrent(currentContextPath)">
+                <template #icon>
+                  <icon-close />
+                </template>
+                <template #default>关闭当前</template>
+              </a-doption>
+              <a-doption @click="tabsStore.closeRight(currentContextPath)">
+                <template #icon>
+                  <icon-close />
+                </template>
+                <template #default>关闭右侧</template>
+              </a-doption>
+              <a-doption @click="tabsStore.closeOther(currentContextPath)">
+                <template #icon>
+                  <icon-eraser />
+                </template>
+                <template #default>关闭其他</template>
+              </a-doption>
+              <a-doption @click="tabsStore.closeAll">
+                <template #icon>
+                  <icon-minus />
+                </template>
+                <template #default>关闭全部</template>
+              </a-doption>
+            </template>
+          </a-dropdown>
+        </template>
       </a-tab-pane>
       <template #extra>
         <a-dropdown trigger="hover">
-          <MagicIcon class="gi_mr"></MagicIcon>
+          <a-button type="text">
+            <template #icon>
+              <icon-more-vertical />
+            </template>
+          </a-button>
           <template #content>
             <a-doption @click="tabsStore.closeCurrent(route.path)">
-              <template #icon><icon-close /></template>
+              <template #icon>
+                <icon-close />
+              </template>
               <template #default>关闭当前</template>
             </a-doption>
             <a-doption @click="tabsStore.closeRight(route.path)">
-              <template #icon><icon-close /></template>
+              <template #icon>
+                <icon-close />
+              </template>
               <template #default>关闭右侧</template>
             </a-doption>
             <a-doption @click="tabsStore.closeOther(route.path)">
-              <template #icon><icon-eraser /></template>
+              <template #icon>
+                <icon-eraser />
+              </template>
               <template #default>关闭其他</template>
             </a-doption>
             <a-doption @click="tabsStore.closeAll">
-              <template #icon><icon-minus /></template>
+              <template #icon>
+                <icon-minus />
+              </template>
               <template #default>关闭全部</template>
             </a-doption>
           </template>
@@ -45,30 +91,29 @@
 
 <script setup lang="ts">
 import type { RouteLocationNormalized } from 'vue-router'
-import MagicIcon from './MagicIcon.vue'
 import { useAppStore, useTabsStore } from '@/stores'
 
 defineOptions({ name: 'Tabs' })
+
 const route = useRoute()
 const router = useRouter()
 const appStore = useAppStore()
 const tabsStore = useTabsStore()
 
-// 重置, 同时把 affix: true 的路由筛选出来
+// 菜单获取的路径
+const currentContextPath = ref('')
+
+// Initialize tabs
 tabsStore.init()
 
-// 路由发生改变触发
 const handleRouteChange = () => {
   const item = { ...route } as unknown as RouteLocationNormalized
   tabsStore.addTabItem(toRaw(item))
   tabsStore.addCacheItem(toRaw(item))
-  // console.log('路由对象', toRaw(item))
-  // console.log('tagList', toRaw(tabsStore.tabList))
-  // console.log('cacheList', toRaw(tabsStore.cacheList))
 }
+
 handleRouteChange()
 
-// 监听路由变化
 watch(
   () => route.fullPath,
   () => {
@@ -76,27 +121,33 @@ watch(
   },
 )
 
-// 点击页签
-const handleTabClick = (key: string) => {
+const handleTabClick = (key: string | number) => {
   const obj = tabsStore.tabList.find((i) => i.path === key)
-  obj ? router.push(obj.fullPath || obj.path) : router.push(key)
+  obj ? router.push(obj.fullPath || obj.path) : router.push(String(key))
+}
+
+const handleContextMenu = (e: MouseEvent, path: string) => {
+  if (!path) return
+  e.preventDefault()
+  currentContextPath.value = path
 }
 </script>
 
 <style lang="scss" scoped>
 :deep(.arco-tabs-nav-tab) {
   .arco-tabs-tab {
-    border-bottom-color: transparent !important;
     svg {
       width: 0;
       transition: all 0.15s;
     }
+
     &:hover {
       svg {
         width: 1em;
       }
     }
   }
+
   &:not(.arco-tabs-nav-tab-scroll) {
     .arco-tabs-tab:first-child {
       border-left: 0;
@@ -111,5 +162,6 @@ const handleTabClick = (key: string) => {
 .tabs {
   padding-top: 5px;
   background-color: var(--color-bg-1);
+  position: relative;
 }
 </style>