feat(layout):增加关闭掉全部或者指定 tab 的方法、重整 tab 相关方法

web/src/layouts/backend/components/navBar/tabs.vue

@@ -103,12 +103,12 @@ const toLastTab = () => {
 }
 
 const closeTab = (route: RouteLocationNormalized) => {
-    navTabs.closeTab(route)
+    navTabs._closeTab(route)
     proxy.eventBus.emit('onTabViewClose', route)
     if (navTabs.state.activeRoute?.path === route.path) {
         toLastTab()
     } else {
-        navTabs.setActiveRoute(navTabs.state.activeRoute!)
+        navTabs._setActiveRoute(navTabs.state.activeRoute!)
         nextTick(() => {
             selectNavTab(tabsRefs.value[navTabs.state.activeIndex])
         })
@@ -118,22 +118,26 @@ const closeTab = (route: RouteLocationNormalized) => {
 }
 
 const closeOtherTab = (menu: RouteLocationNormalized) => {
-    navTabs.closeTabs(menu)
-    navTabs.setActiveRoute(menu)
+    navTabs._closeTabs(menu)
+    navTabs._setActiveRoute(menu)
     if (navTabs.state.activeRoute?.path !== route.path) {
         router.push(menu!.path)
     }
 }
 
-const closeAllTab = (menu: RouteLocationNormalized) => {
+/**
+ * 关闭所有tab（等同于 navTabs.closeAllTab）
+ * @param menu 需要保留的标签，否则关闭全部标签
+ */
+const closeAllTab = (menu?: RouteLocationNormalized) => {
     let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
-    if (firstRoute && firstRoute.path == menu.path) {
+    if (menu && firstRoute && firstRoute.path == menu.path) {
         return closeOtherTab(menu)
     }
     if (firstRoute && firstRoute.path == navTabs.state.activeRoute?.path) {
         return closeOtherTab(navTabs.state.activeRoute)
     }
-    navTabs.closeTabs(false)
+    navTabs._closeTabs(false)
     if (firstRoute) routePush(firstRoute.path)
 }
 
@@ -164,9 +168,9 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
 
 const updateTab = function (newRoute: RouteLocationNormalized) {
     // 添加tab
-    navTabs.addTab(newRoute)
+    navTabs._addTab(newRoute)
     // 激活当前tab
-    navTabs.setActiveRoute(newRoute)
+    navTabs._setActiveRoute(newRoute)
 
     nextTick(() => {
         selectNavTab(tabsRefs.value[navTabs.state.activeIndex])
@@ -181,6 +185,24 @@ onMounted(() => {
     updateTab(router.currentRoute.value)
     new horizontalScroll(tabScrollbarRef.value)
 })
+
+/**
+ * 通过路由路径关闭tab（等同于 navTabs.closeTabByPath）
+ * @param path 需要关闭的 tab 的路径
+ */
+const closeTabByPath = (path: string) => {
+    for (const key in navTabs.state.tabsView) {
+        if (navTabs.state.tabsView[key].path == path) {
+            closeTab(navTabs.state.tabsView[key])
+            break
+        }
+    }
+}
+
+defineExpose({
+    closeAllTab,
+    closeTabByPath,
+})
 </script>
 
 <style scoped lang="scss">

web/src/stores/navTabs.ts

@@ -6,6 +6,7 @@ import { STORE_TAB_VIEW_CONFIG } from '/@/stores/constant/cacheKey'
 import type { NavTabs } from '/@/stores/interface/index'
 import type { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
 import { adminBaseRoutePath } from '/@/router/static/adminBase'
+import { layoutNavTabsRef } from '/@/stores/refs'
 
 export const useNavTabs = defineStore(
     'navTabs',
@@ -25,7 +26,27 @@ export const useNavTabs = defineStore(
             authNode: new Map(),
         })
 
-        function addTab(route: RouteLocationNormalized) {
+        /**
+         * 通过路由路径关闭tab
+         * @param path 需要关闭的 tab 的路径
+         */
+        const closeTabByPath = (path: string) => {
+            layoutNavTabsRef.value?.closeTabByPath(path)
+        }
+
+        /**
+         * 关闭所有tab
+         * @param menu 需要保留的标签，否则关闭全部标签并打开第一个路由
+         */
+        const closeAllTab = (menu?: RouteLocationNormalized) => {
+            layoutNavTabsRef.value?.closeAllTab(menu)
+        }
+
+        /**
+         * 添加 tab（内部）
+         * router.push 时可自动完成 tab 添加，无需调用此方法
+         */
+        function _addTab(route: RouteLocationNormalized) {
             if (!route.meta.addtab) return
             for (const key in state.tabsView) {
                 if (state.tabsView[key].path === route.path) {
@@ -40,7 +61,23 @@ export const useNavTabs = defineStore(
             state.tabsView.push(route)
         }
 
-        function closeTab(route: RouteLocationNormalized) {
+        /**
+         * 设置激活 tab（内部）
+         * router.push 时可自动完成 tab 激活，无需调用此方法
+         */
+        const _setActiveRoute = (route: RouteLocationNormalized): void => {
+            const currentRouteIndex: number = state.tabsView.findIndex((item: RouteLocationNormalized) => {
+                return item.path === route.path
+            })
+            if (currentRouteIndex === -1) return
+            state.activeRoute = route
+            state.activeIndex = currentRouteIndex
+        }
+
+        /**
+         * 关闭 tab（内部）
+         */
+        function _closeTab(route: RouteLocationNormalized) {
             state.tabsView.map((v, k) => {
                 if (v.path == route.path) {
                     state.tabsView.splice(k, 1)
@@ -50,10 +87,9 @@ export const useNavTabs = defineStore(
         }
 
         /**
-         * 关闭多个标签
-         * @param retainMenu 需要保留的标签，否则关闭全部标签
+         * 关闭多个标签（内部）
          */
-        const closeTabs = (retainMenu: RouteLocationNormalized | false = false) => {
+        const _closeTabs = (retainMenu: RouteLocationNormalized | false = false) => {
             if (retainMenu) {
                 state.tabsView = [retainMenu]
             } else {
@@ -61,32 +97,48 @@ export const useNavTabs = defineStore(
             }
         }
 
-        const setActiveRoute = (route: RouteLocationNormalized): void => {
-            const currentRouteIndex: number = state.tabsView.findIndex((item: RouteLocationNormalized) => {
-                return item.path === route.path
-            })
-            if (currentRouteIndex === -1) return
-            state.activeRoute = route
-            state.activeIndex = currentRouteIndex
-        }
-
+        /**
+         * 设置从后台加载到的菜单路由列表
+         */
         const setTabsViewRoutes = (data: RouteRecordRaw[]): void => {
             state.tabsViewRoutes = encodeRoutesURI(data)
         }
 
+        /**
+         * 以key设置权限节点
+         */
         const setAuthNode = (key: string, data: string[]) => {
             state.authNode.set(key, data)
         }
 
+        /**
+         * 覆盖设置权限节点
+         */
         const fillAuthNode = (data: Map<string, string[]>) => {
             state.authNode = data
         }
 
-        const setFullScreen = (fullScreen: boolean): void => {
-            state.tabFullScreen = fullScreen
+        /**
+         * 设置当前 tab 是否全屏
+         * @param status 全屏状态
+         */
+        const setFullScreen = (status: boolean): void => {
+            state.tabFullScreen = status
         }
 
-        return { state, addTab, closeTab, closeTabs, setActiveRoute, setTabsViewRoutes, setAuthNode, fillAuthNode, setFullScreen }
+        return {
+            state,
+            closeAllTab,
+            closeTabByPath,
+            setTabsViewRoutes,
+            setAuthNode,
+            fillAuthNode,
+            setFullScreen,
+            _addTab,
+            _closeTab,
+            _closeTabs,
+            _setActiveRoute,
+        }
     },
     {
         persist: {