yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: remove 'affixTabs' from state (#25)

pull/48/MERGE
Li Kui 2024-07-06 14:55:51 +08:00 committed by GitHub
parent 478bbe17ee
commit 19b57fa4f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
packages/@core/forward/stores/src/modules/tabbar.ts
View File

@ -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<string>();
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,