From 12e869ddeb513a99a1a4964ed6da528b6a405903 Mon Sep 17 00:00:00 2001
From: paopao <zhangpaopao0609@gmail.com>
Date: Wed, 14 Sep 2022 12:27:02 +0800
Subject: [PATCH] feat: multiple tabs support action (#297)

* feat: multiple tabs support action

* refactor: tap change to tab

* feat(tab-router): handle operation effect

Co-authored-by: Uyarn <uyarnchen@gmail.com>
---
 src/layouts/components/LayoutContent.vue | 47 +++++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/layouts/components/LayoutContent.vue b/src/layouts/components/LayoutContent.vue
index fe730df..58cbfe6 100644
--- a/src/layouts/components/LayoutContent.vue
+++ b/src/layouts/components/LayoutContent.vue
@@ -19,19 +19,23 @@
           <t-dropdown
             trigger="context-menu"
             :min-column-width="128"
-            :popup-props="{ overlayClassName: 'route-tabs-dropdown' }"
+            :popup-props="{
+              overlayClassName: 'route-tabs-dropdown',
+              onVisibleChange: (visible: boolean, ctx) => handleTabMenuClick(visible, ctx, routeItem.path),
+              visible: activeTabPath === routeItem.path,
+            }"
           >
             <template v-if="!routeItem.isHome">
               {{ routeItem.title }}
             </template>
             <t-icon v-else name="home" />
             <template #dropdown>
-              <t-dropdown-menu v-if="$route.path === routeItem.path">
+              <t-dropdown-menu>
                 <t-dropdown-item @click="() => handleRefresh(routeItem, index)">
                   <t-icon name="refresh" />
                   刷新
                 </t-dropdown-item>
-                <t-dropdown-item v-if="index > 0" @click="() => handleCloseAhead(routeItem.path, index)">
+                <t-dropdown-item v-if="index > 1" @click="() => handleCloseAhead(routeItem.path, index)">
                   <t-icon name="arrow-left" />
                   关闭左侧
                 </t-dropdown-item>
@@ -42,7 +46,7 @@
                   <t-icon name="arrow-right" />
                   关闭右侧
                 </t-dropdown-item>
-                <t-dropdown-item @click="() => handleCloseOther(routeItem.path, index)">
+                <t-dropdown-item v-if="tabRouters.length > 2" @click="() => handleCloseOther(routeItem.path, index)">
                   <t-icon name="close-circle" />
                   关闭其它
                 </t-dropdown-item>
@@ -63,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, computed } from 'vue';
+import { nextTick, ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useSettingStore, useTabsRouterStore } from '@/store';
 import { prefix } from '@/config/global';
@@ -79,6 +83,7 @@ const router = useRouter();
 const settingStore = useSettingStore();
 const tabsRouterStore = useTabsRouterStore();
 const tabRouters = computed(() => tabsRouterStore.tabRouters.filter((route) => route.isAlive || route.isHome));
+const activeTabPath = ref('');
 
 const handleChangeCurrentTab = (path: string) => {
   const { tabRouters } = tabsRouterStore;
@@ -100,14 +105,46 @@ const handleRefresh = (route: TRouterInfo, routeIdx: number) => {
     tabsRouterStore.toggleTabRouterAlive(routeIdx);
     router.replace({ path: route.path, query: route.query });
   });
+  activeTabPath.value = null;
 };
 const handleCloseAhead = (path: string, routeIdx: number) => {
   tabsRouterStore.subtractTabRouterAhead({ path, routeIdx });
+
+  handleOperationEffect('ahead', routeIdx);
 };
 const handleCloseBehind = (path: string, routeIdx: number) => {
   tabsRouterStore.subtractTabRouterBehind({ path, routeIdx });
+
+  handleOperationEffect('behind', routeIdx);
 };
 const handleCloseOther = (path: string, routeIdx: number) => {
   tabsRouterStore.subtractTabRouterOther({ path, routeIdx });
+
+  handleOperationEffect('other', routeIdx);
+};
+
+// 处理非当前路由操作的副作用
+const handleOperationEffect = (type: 'other' | 'ahead' | 'behind', routeIndex: number) => {
+  const currentPath = router.currentRoute.value.path;
+  const { tabRouters } = tabsRouterStore;
+
+  const currentIdx = tabRouters.findIndex((i) => i.path === currentPath);
+  // 存在三种情况需要刷新当前路由
+  // 点击非当前路由的关闭其他、点击非当前路由的关闭左侧且当前路由小于触发路由、点击非当前路由的关闭右侧且当前路由大于触发路由
+  const needRefreshRouter =
+    (type === 'other' && currentIdx !== routeIndex) ||
+    (type === 'ahead' && currentIdx < routeIndex) ||
+    (type === 'behind' && currentIdx === -1);
+  if (needRefreshRouter) {
+    const nextRouteIdx = type === 'behind' ? tabRouters.length - 1 : 1;
+    const nextRouter = tabRouters[nextRouteIdx];
+    router.push({ path: nextRouter.path, query: nextRouter.query });
+  }
+
+  activeTabPath.value = null;
+};
+const handleTabMenuClick = (visible: boolean, ctx, path: string) => {
+  if (ctx.trigger === 'document') activeTabPath.value = null;
+  if (visible) activeTabPath.value = path;
 };
 </script>