From b030921189e9093f07369cebebdfa8b12b3fb153 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sat, 23 Nov 2024 21:17:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(tabs):=20=E6=A0=87=E7=AD=BE=E9=A1=B5?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=87=8D=E6=96=B0=E5=8A=A0=E8=BD=BD=E3=80=81?=
 =?UTF-8?q?=E5=85=B3=E9=97=AD=E5=B7=A6=E4=BE=A7=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Main.vue       |  2 +-
 src/layout/components/Tabs/index.vue | 55 +++++++++++++++++++++++++---
 src/stores/modules/tabs.ts           | 26 +++++++++++++
 3 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/src/layout/components/Main.vue b/src/layout/components/Main.vue
index 4ff584d..6376755 100644
--- a/src/layout/components/Main.vue
+++ b/src/layout/components/Main.vue
@@ -3,7 +3,7 @@
     <router-view v-slot="{ Component, route }">
       <transition :name="appStore.transitionName" mode="out-in" appear>
         <keep-alive :include="(tabsStore.cacheList as string[])">
-          <component :is="Component" :key="route.path" />
+          <component :is="Component" :key="route.path + String(tabsStore.reloadFlag)" />
         </keep-alive>
       </transition>
     </router-view>
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index de1278c..6b9ce67 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -20,23 +20,34 @@
             <span @contextmenu="(e) => handleContextMenu(e, item.path)">
               {{ item.meta?.title }}
             </span>
-
             <template #content>
+              <a-doption @click="reload">
+                <template #icon>
+                  <icon-refresh class="reload-icon" :class="{ 'reload-icon--spin': loading }" />
+                </template>
+                <template #default>重新加载</template>
+              </a-doption>
               <a-doption @click="tabsStore.closeCurrent(currentContextPath)">
                 <template #icon>
                   <icon-close />
                 </template>
                 <template #default>关闭当前</template>
               </a-doption>
+              <a-doption @click="tabsStore.closeLeft(currentContextPath)">
+                <template #icon>
+                  <icon-to-left />
+                </template>
+                <template #default>关闭左侧</template>
+              </a-doption>
               <a-doption @click="tabsStore.closeRight(currentContextPath)">
                 <template #icon>
-                  <icon-close />
+                  <icon-to-right />
                 </template>
                 <template #default>关闭右侧</template>
               </a-doption>
               <a-doption @click="tabsStore.closeOther(currentContextPath)">
                 <template #icon>
-                  <icon-eraser />
+                  <icon-close />
                 </template>
                 <template #default>关闭其他</template>
               </a-doption>
@@ -58,21 +69,33 @@
             </template>
           </a-button>
           <template #content>
+            <a-doption @click="reload">
+              <template #icon>
+                <icon-refresh class="reload-icon" :class="{ 'reload-icon--spin': loading }" />
+              </template>
+              <template #default>重新加载</template>
+            </a-doption>
             <a-doption @click="tabsStore.closeCurrent(route.path)">
               <template #icon>
                 <icon-close />
               </template>
               <template #default>关闭当前</template>
             </a-doption>
-            <a-doption @click="tabsStore.closeRight(route.path)">
+            <a-doption @click="tabsStore.closeLeft(currentContextPath)">
               <template #icon>
-                <icon-close />
+                <icon-to-left />
+              </template>
+              <template #default>关闭左侧</template>
+            </a-doption>
+            <a-doption @click="tabsStore.closeRight(currentContextPath)">
+              <template #icon>
+                <icon-to-right />
               </template>
               <template #default>关闭右侧</template>
             </a-doption>
             <a-doption @click="tabsStore.closeOther(route.path)">
               <template #icon>
-                <icon-eraser />
+                <icon-close />
               </template>
               <template #default>关闭其他</template>
             </a-doption>
@@ -131,6 +154,17 @@ const handleContextMenu = (e: MouseEvent, path: string) => {
   e.preventDefault()
   currentContextPath.value = path
 }
+
+const loading = ref(false)
+// 重新加载
+const reload = () => {
+  if (loading.value) return
+  loading.value = true
+  tabsStore.reloadPage()
+  setTimeout(() => {
+    loading.value = false
+  }, 600)
+}
 </script>
 
 <style scoped lang="scss">
@@ -164,4 +198,13 @@ const handleContextMenu = (e: MouseEvent, path: string) => {
   background-color: var(--color-bg-1);
   position: relative;
 }
+
+.reload-icon {
+  cursor: pointer;
+
+  &--spin {
+    animation-name: arco-loading-circle;
+    animation-duration: 0.6s;
+  }
+}
 </style>
diff --git a/src/stores/modules/tabs.ts b/src/stores/modules/tabs.ts
index 0ae9f05..ef076af 100644
--- a/src/stores/modules/tabs.ts
+++ b/src/stores/modules/tabs.ts
@@ -83,6 +83,17 @@ const storeSetup = () => {
     })
   }
 
+  // 关闭左侧
+  const closeLeft = (path: string) => {
+    const index = tabList.value.findIndex((i) => i.path === path)
+    if (index < 0) return
+    const arr = tabList.value.filter((i, n) => n < index)
+    arr.forEach((item) => {
+      deleteTabItem(item.path)
+      item?.name && deleteCacheItem(item.name)
+    })
+  }
+
   // 关闭右侧
   const closeRight = (path: string) => {
     const index = tabList.value.findIndex((i) => i.path === path)
@@ -113,6 +124,18 @@ const storeSetup = () => {
     reset()
   }
 
+  // Tabs页签右侧刷新按钮-页面重新加载
+  const reloadFlag = ref(true)
+  const reloadPage = () => {
+    const route = router.currentRoute.value
+    deleteCacheItem(route.name as string) // 修复点击刷新图标，无法重新触发生命周期钩子函数问题
+    reloadFlag.value = false
+    nextTick(() => {
+      reloadFlag.value = true
+      addCacheItem(route)
+    })
+  }
+
   return {
     tabList,
     cacheList,
@@ -124,10 +147,13 @@ const storeSetup = () => {
     clearCacheList,
     closeCurrent,
     closeOther,
+    closeLeft,
     closeRight,
     closeAll,
     reset,
     init,
+    reloadFlag,
+    reloadPage,
   }
 }