From 19b57fa4f760e22d73fb701f8468ef1e023bc56a Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Sat, 6 Jul 2024 14:55:51 +0800 Subject: [PATCH] refactor: remove 'affixTabs' from state (#25) --- .../forward/stores/src/modules/tabbar.ts | 87 +++++++------------ 1 file changed, 33 insertions(+), 54 deletions(-) diff --git a/packages/@core/forward/stores/src/modules/tabbar.ts b/packages/@core/forward/stores/src/modules/tabbar.ts index 04928af9..dec3b99d 100644 --- a/packages/@core/forward/stores/src/modules/tabbar.ts +++ b/packages/@core/forward/stores/src/modules/tabbar.ts @@ -28,6 +28,22 @@ function cloneTab(route: TabItem): TabItem { }; } +/** + * @zh_CN 是否是固定标签页 + * @param tab + */ +function isAffixTab(tab: TabItem) { + return tab.meta?.affixTab ?? false; +} + +/** + * @zh_CN 是否显示标签 + * @param tab + */ +function isTabShow(tab: TabItem) { + return !tab.meta.hideInTab; +} + function routeToTab(route: RouteRecordNormalized) { return { meta: route.meta, @@ -37,10 +53,6 @@ function routeToTab(route: RouteRecordNormalized) { } interface TabsState { - /** - * @zh_CN 固定的标签页列表 - */ - affixTabs: RouteRecordNormalized[]; /** * @zh_CN 当前打开的标签页列表缓存 */ @@ -80,7 +92,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', { */ _close(tab: TabItem) { const { fullPath } = tab; - if (this._isAffixTab(tab)) { + if (isAffixTab(tab)) { return; } const index = this.tabs.findIndex((item) => item.fullPath === fullPath); @@ -110,21 +122,13 @@ const useCoreTabbarStore = defineStore('core-tabbar', { }; await router.replace(toParams); }, - /** - * @zh_CN 是否是固定标签页 - * @param tab - */ - _isAffixTab(tab: TabItem) { - return tab?.meta?.affixTab ?? false; - }, /** * @zh_CN 添加标签页 * @param routeTab */ addTab(routeTab: TabItem) { const tab = cloneTab(routeTab); - const { fullPath, meta, params, query } = tab; - if (meta?.hideInTab) { + if (!isTabShow(tab)) { return; } @@ -137,14 +141,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', { } else { // 页面已经存在，不重复添加选项卡，只更新选项卡参数 const currentTab = toRaw(this.tabs)[tabIndex]; - if (!currentTab) { - return; - } - currentTab.params = params || currentTab.params; - currentTab.query = query || currentTab.query; - currentTab.fullPath = fullPath || currentTab.fullPath; - currentTab.meta = meta || currentTab.meta; - this.tabs.splice(tabIndex, 1, currentTab); + this.tabs.splice(tabIndex, 1, { ...currentTab, ...tab }); } this.updateCacheTab(); }, @@ -152,7 +149,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', { * @zh_CN 关闭所有标签页 */ async closeAllTabs(router: Router) { - this.tabs = this.tabs.filter((tab) => this._isAffixTab(tab)); + this.tabs = this.tabs.filter((tab) => isAffixTab(tab)); await this._goToDefaultTab(router); this.updateCacheTab(); }, @@ -169,7 +166,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', { const leftTabs = this.tabs.slice(0, index); const paths: string[] = []; for (const item of leftTabs) { - if (!this._isAffixTab(tab)) { + if (!isAffixTab(tab)) { paths.push(this.getTabPath(item)); } } @@ -194,7 +191,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', { if (!closeTab) { continue; } - if (!this._isAffixTab(tab)) { + if (!isAffixTab(tab)) { paths.push(this.getTabPath(closeTab)); } } @@ -216,7 +213,7 @@ const useCoreTabbarStore = defineStore('core-tabbar', { const paths: string[] = []; for (const item of rightTabs) { - if (!this._isAffixTab(tab)) { + if (!isAffixTab(tab)) { paths.push(this.getTabPath(item)); } } @@ -283,15 +280,8 @@ const useCoreTabbarStore = defineStore('core-tabbar', { (item) => this.getTabPath(item) === this.getTabPath(tab), ); if (index !== -1) { - this.tabs[index].meta.affixTab = true; - } - // TODO: 这里应该把tab从tbs中移除 - const affixIndex = this.affixTabs.findIndex( - (item) => this.getTabPath(item) === this.getTabPath(tab), - ); - if (affixIndex === -1) { tab.meta.affixTab = true; - this.affixTabs.push(tab as unknown as RouteRecordNormalized); + this.addTab(tab); } }, /** @@ -317,23 +307,21 @@ const useCoreTabbarStore = defineStore('core-tabbar', { */ setAffixTabs(tabs: RouteRecordNormalized[]) { for (const tab of tabs) { + tab.meta.affixTab = true; this.addTab(routeToTab(tab)); } - this.affixTabs = tabs; }, /** * @zh_CN 取消固定标签页 * @param tab */ async unPushPinTab(tab: TabItem) { - const index = this.affixTabs.findIndex( + const index = this.tabs.findIndex( (item) => this.getTabPath(item) === this.getTabPath(tab), ); if (index !== -1) { tab.meta.affixTab = false; - this.affixTabs[index].meta.affixTab = false; - this.affixTabs.splice(index, 1); this.addTab(tab); } }, @@ -363,28 +351,20 @@ const useCoreTabbarStore = defineStore('core-tabbar', { }, }, getters: { + affixTabs(): TabItem[] { + return this.tabs.filter((tab) => isAffixTab(tab)); + }, getCacheTabs(): string[] { return [...this.cacheTabs]; }, getExcludeTabs(): string[] { return [...this.excludeCacheTabs]; }, - getTabs(): TabItem[] { - const tabs: TabItem[] = []; - const affixTabPaths = new Set(); - for (const tab of this.affixTabs) { - if (!tab.meta.hideInTab) { - tabs.push(routeToTab(tab)); - affixTabPaths.add(tab.path); - } - } - for (const tab of this.tabs) { - if (!affixTabPaths.has(tab.path) && !tab.meta.hideInTab) { - tabs.push(tab); - } - } - return tabs; + const affixTabs = this.tabs.filter((tab) => isAffixTab(tab)); + const normalTabs = this.tabs.filter((tab) => !isAffixTab(tab)); + + return [...affixTabs, ...normalTabs]; }, }, persist: { @@ -392,7 +372,6 @@ const useCoreTabbarStore = defineStore('core-tabbar', { paths: [], }, state: (): TabsState => ({ - affixTabs: [], cacheTabs: new Set(), excludeCacheTabs: new Set(), renderRouteView: true,