perf: optimize the closing jump logic of tabs

* 依据tab访问历史回退上一个tab,原逻辑是返回一下个 或 上一个
 * 支持在配置中开启或关闭
This commit is contained in:
zhongming4762
2026-02-08 20:36:16 +08:00
parent 331da3c8c7
commit 7a2b916387
7 changed files with 73 additions and 12 deletions

View File

@@ -73,7 +73,9 @@ export const useTabbarStore = defineStore('core-tabbar', {
this.tabs = this.tabs.filter(
(item) => !keySet.has(getTabKeyFromTab(item)),
);
this.visitHistory.remove(...keys);
if (isVisitHistory()) {
this.visitHistory.remove(...keys);
}
await this.updateCacheTabs();
},
@@ -179,7 +181,9 @@ export const useTabbarStore = defineStore('core-tabbar', {
}
this.updateCacheTabs();
// 添加访问历史记录
this.visitHistory.push(tab.key as string);
if (isVisitHistory()) {
this.visitHistory.push(tab.key as string);
}
return tab;
},
/**
@@ -188,8 +192,12 @@ export const useTabbarStore = defineStore('core-tabbar', {
async closeAllTabs(router: Router) {
const newTabs = this.tabs.filter((tab) => isAffixTab(tab));
this.tabs = newTabs.length > 0 ? newTabs : [...this.tabs].splice(0, 1);
// 设置访问历史
this.visitHistory.retain(this.tabs.map((item) => getTabKeyFromTab(item)));
// 设置访问历史记录
if (isVisitHistory()) {
this.visitHistory.retain(
this.tabs.map((item) => getTabKeyFromTab(item)),
);
}
await this._goToDefaultTab(router);
this.updateCacheTabs();
},
@@ -270,8 +278,10 @@ export const useTabbarStore = defineStore('core-tabbar', {
if (currentTabKey !== getTabKeyFromTab(tab)) {
this._close(tab);
this.updateCacheTabs();
// 移除访问历史
this.visitHistory.remove(getTabKeyFromTab(tab));
// 移除访问历史记录
if (isVisitHistory()) {
this.visitHistory.remove(getTabKeyFromTab(tab));
}
return;
}
if (this.getTabs.length <= 1) {
@@ -279,12 +289,43 @@ export const useTabbarStore = defineStore('core-tabbar', {
return;
}
// 从访问历史记录中移除当前关闭的tab
this.visitHistory.remove(currentTabKey);
this._close(tab);
const previousTabKey = this.visitHistory.pop();
if (previousTabKey) {
// 跳转到上一个tab
await this._goToTab(this.getTabByKey(previousTabKey), router);
if (isVisitHistory()) {
this.visitHistory.remove(currentTabKey);
this._close(tab);
let previousTab: TabDefinition | undefined;
let previousTabKey: string | undefined;
while (true) {
previousTabKey = this.visitHistory.pop();
if (!previousTabKey) {
break;
}
previousTab = this.getTabByKey(previousTabKey);
if (previousTab) {
break;
}
}
await (previousTab
? this._goToTab(previousTab, router)
: this._goToDefaultTab(router));
return;
}
// 未开启访问历史记录直接跳转下一个或上一个tab
const index = this.getTabs.findIndex(
(item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
);
const before = this.getTabs[index - 1];
const after = this.getTabs[index + 1];
// 下一个tab存在跳转到下一个
if (after) {
this._close(tab);
await this._goToTab(after, router);
// 上一个tab存在跳转到上一个
} else if (before) {
this._close(tab);
await this._goToTab(before, router);
}
},
@@ -642,6 +683,13 @@ function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
}
}
/**
* @zh_CN 是否开启访问历史记录
*/
function isVisitHistory() {
return preferences.tabbar.visitHistory;
}
/**
* 从tab获取tab页的key
* 如果tab没有key,那么就从route获取key