From df5383e86f69ee3b7698f6c0a3806e92e8cfd4a9 Mon Sep 17 00:00:00 2001 From: liuweiguo <1159428886@qq.com> Date: Fri, 22 Apr 2022 11:12:36 +0800 Subject: [PATCH] =?UTF-8?q?fix(projects):=20fix:tab=E5=88=87=E6=8D=A2?= =?UTF-8?q?=E8=B7=AF=E7=94=B1fullpath?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 支持tab页切换路由参数保留 ISSUES CLOSED: #64 --- components.d.ts | 25 ------------------- .../GlobalTab/components/TabDetail/index.vue | 2 +- src/store/modules/tab/helpers.ts | 1 + src/store/modules/tab/index.ts | 12 ++++----- src/typings/system.d.ts | 3 ++- 5 files changed, 10 insertions(+), 33 deletions(-) diff --git a/components.d.ts b/components.d.ts index 01abe218..1d299c76 100644 --- 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 index 99ae562e..483f72f2 100644 --- 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 index 5d2f8a2f..00001c7b 100644 --- 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: (route).fullPath, scrollPosition: { left: 0, top: 0 diff --git a/src/store/modules/tab/index.ts b/src/store/modules/tab/index.ts index 6872ca9b..912a84a8 100644 --- 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 index 64d65837..f049498c 100644 --- 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 { +interface GlobalTabRoute + extends Pick { /** 滚动的位置 */ scrollPosition: { left: number;