feat(tabs): 标签页新增重新加载、关闭左侧操作

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>

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>

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