fix(projects): fix:tab切换路由fullpath

支持tab页切换路由参数保留 ISSUES CLOSED: soybeanjs#64
baiye0 · Apr 22, 2022 · df5383e · df5383e
1 parent 219f87f
commit df5383e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 33 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -13,17 +13,9 @@ declare module 'vue' {
     IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
-    IconCustomActivity: typeof import('~icons/custom/activity')['default']
     IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
-    IconCustomBanner: typeof import('~icons/custom/banner')['default']
-    IconCustomCast: typeof import('~icons/custom/cast')['default']
-    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default']
     IconCustomLogo: typeof import('~icons/custom/logo')['default']
     IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
-    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default']
-    IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
-    IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
-    IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
     IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
@@ -37,7 +29,6 @@ declare module 'vue' {
     IconMdiPin: typeof import('~icons/mdi/pin')['default']
     IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
-    IconMdiWechat: typeof import('~icons/mdi/wechat')['default']
     IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
     IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
     IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
@@ -51,46 +42,30 @@ declare module 'vue' {
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDataTable: typeof import('naive-ui')['NDataTable']
-    NDescriptions: typeof import('naive-ui')['NDescriptions']
-    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NGradientText: typeof import('naive-ui')['NGradientText']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NInput: typeof import('naive-ui')['NInput']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    NPopover: typeof import('naive-ui')['NPopover']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
-    NSpin: typeof import('naive-ui')['NSpin']
-    NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
-    NTag: typeof import('naive-ui')['NTag']
-    NThing: typeof import('naive-ui')['NThing']
-    NTimeline: typeof import('naive-ui')['NTimeline']
-    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
     NTooltip: typeof import('naive-ui')['NTooltip']
     SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default']
     WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default']

diff --git a/src/layouts/common/GlobalTab/components/TabDetail/index.vue b/src/layouts/common/GlobalTab/components/TabDetail/index.vue
@@ -9,7 +9,7 @@
       :closable="item.path !== tab.homeTab.path"
       :dark-mode="theme.darkMode"
       :class="{ '!mr-0': isChromeMode && index === tab.tabs.length - 1, 'mr-10px': !isChromeMode }"
-      @click="tab.handleClickTab(item.path)"
+      @click="tab.handleClickTab(item)"
       @close="tab.removeTab(item.path)"
       @contextmenu="handleContextMenu($event, item.path)"
     >

diff --git a/src/store/modules/tab/helpers.ts b/src/store/modules/tab/helpers.ts
@@ -9,6 +9,7 @@ export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocati
     name: route.name,
     path: route.path,
     meta: route.meta,
+    fullPath: (<RouteLocationNormalizedLoaded>route).fullPath,
     scrollPosition: {
       left: 0,
       top: 0

diff --git a/src/store/modules/tab/index.ts b/src/store/modules/tab/index.ts
@@ -20,6 +20,7 @@ export const useTabStore = defineStore('tab-store', {
     homeTab: {
       name: 'root',
       path: '/',
+      fullPath: '/',
       meta: {
         title: 'root'
       },
@@ -124,15 +125,15 @@ export const useTabStore = defineStore('tab-store', {
     },
     /**
      * 点击单个tab
-     * @param path - 路由path
+     * @param route - 路由route
      */
-    handleClickTab(path: string) {
+    handleClickTab(route: GlobalTabRoute) {
       const { routerPush } = useRouterPush(false);
 
-      const isActive = this.activeTab === path;
+      const isActive = this.activeTab === route.path;
       if (!isActive) {
-        this.setActiveTab(path);
-        routerPush(path);
+        this.setActiveTab(route.path);
+        routerPush(route.fullPath || route.path);
       }
     },
     /**
@@ -164,7 +165,6 @@ export const useTabStore = defineStore('tab-store', {
     /** 初始化Tab状态 */
     iniTabStore(currentRoute: RouteLocationNormalizedLoaded) {
       const theme = useThemeStore();
-
       const isHome = currentRoute.path === this.homeTab.path;
       const tabs: GlobalTabRoute[] = theme.tab.isCache ? getTabRoutes() : [];
       const hasHome = isInTabRoutes(tabs, this.homeTab.path);

diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts
@@ -262,7 +262,8 @@ type GlobalBreadcrumb = import('naive-ui').DropdownOption & {
 };
 
 /** 多页签Tab的路由 */
-interface GlobalTabRoute extends Pick<import('vue-router').RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta'> {
+interface GlobalTabRoute
+  extends Pick<import('vue-router').RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta' | 'fullPath'> {
   /** 滚动的位置 */
   scrollPosition: {
     left: number;