public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-08 07:31:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabbar): visitHistory field (#7543)

Browse Source 
High Severity

The visitHistory field is a Stack<string> class instance persisted to sessionStorage via pinia-plugin-persistedstate. There's no custom serializer or hydration hook. When the page reloads, JSON.parse(JSON.stringify(stack)) produces a plain object {dedup, items, maxSize} that lacks all Stack methods (push, pop, remove, retain, etc.) and the size getter. Pinia's $patch replaces the Stack instance with this plain object, so subsequent calls like this.visitHistory.push(...) will throw a TypeError.
This commit is contained in:
AxiosLeo
2026-02-11 16:09:37 +08:00
committed by GitHub
parent 32379ba4b7
commit aa74a2535b
1 changed files with 32 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/stores/src/modules/tabbar.ts
View File

@@ -1,9 +1,5 @@
import type { ComputedRef } from 'vue';
import type {
RouteLocationNormalized,
Router,
RouteRecordNormalized,
} from 'vue-router';
import type { RouteLocationNormalized, Router, RouteRecordNormalized } from 'vue-router';
import type { TabDefinition } from '@vben-core/typings';
@@ -70,9 +66,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
*/
async _bulkCloseByKeys(keys: string[]) {
const keySet = new Set(keys);
this.tabs = this.tabs.filter(
(item) => !keySet.has(getTabKeyFromTab(item)),
);
this.tabs = this.tabs.filter((item) => !keySet.has(getTabKeyFromTab(item)));
if (isVisitHistory()) {
this.visitHistory.remove(...keys);
}
@@ -136,25 +130,20 @@ export const useTabbarStore = defineStore('core-tabbar', {
if (tabIndex === -1) {
const maxCount = preferences.tabbar.maxCount;
// 获取动态路由打开数，超过 0 即代表需要控制打开数
const maxNumOfOpenTab = (routeTab?.meta?.maxNumOfOpenTab ??
-1) as number;
const maxNumOfOpenTab = (routeTab?.meta?.maxNumOfOpenTab ?? -1) as number;
// 如果动态路由层级大于 0 了，那么就要限制该路由的打开数限制了
// 获取到已经打开的动态路由数, 判断是否大于某一个值
if (
maxNumOfOpenTab > 0 &&
this.tabs.filter((tab) => tab.name === routeTab.name).length >=
maxNumOfOpenTab
this.tabs.filter((tab) => tab.name === routeTab.name).length >= maxNumOfOpenTab
) {
// 关闭第一个
const index = this.tabs.findIndex(
(item) => item.name === routeTab.name,
);
const index = this.tabs.findIndex((item) => item.name === routeTab.name);
index !== -1 && this.tabs.splice(index, 1);
} else if (maxCount > 0 && this.tabs.length >= maxCount) {
// 关闭第一个
const index = this.tabs.findIndex(
(item) =>
!Reflect.has(item.meta, 'affixTab') || !item.meta.affixTab,
(item) => !Reflect.has(item.meta, 'affixTab') || !item.meta.affixTab
);
index !== -1 && this.tabs.splice(index, 1);
}
@@ -194,9 +183,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
this.tabs = newTabs.length > 0 ? newTabs : [...this.tabs].splice(0, 1);
// 设置访问历史记录
if (isVisitHistory()) {
this.visitHistory.retain(
this.tabs.map((item) => getTabKeyFromTab(item)),
);
this.visitHistory.retain(this.tabs.map((item) => getTabKeyFromTab(item)));
}
await this._goToDefaultTab(router);
this.updateCacheTabs();
@@ -233,9 +220,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
for (const key of closeKeys) {
if (key !== getTabKeyFromTab(tab)) {
const closeTab = this.tabs.find(
(item) => getTabKeyFromTab(item) === key,
);
const closeTab = this.tabs.find((item) => getTabKeyFromTab(item) === key);
if (!closeTab) {
continue;
}
@@ -305,14 +290,12 @@ export const useTabbarStore = defineStore('core-tabbar', {
break;
}
}
await (previousTab
? this._goToTab(previousTab, router)
: this._goToDefaultTab(router));
await (previousTab ? this._goToTab(previousTab, router) : this._goToDefaultTab(router));
return;
}
// 未开启访问历史记录，直接跳转下一个或上一个tab
const index = this.getTabs.findIndex(
(item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
(item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value)
);
const before = this.getTabs[index - 1];
@@ -336,9 +319,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
*/
async closeTabByKey(key: string, router: Router) {
const originKey = decodeURIComponent(key);
const index = this.tabs.findIndex(
(item) => getTabKeyFromTab(item) === originKey,
);
const index = this.tabs.findIndex((item) => getTabKeyFromTab(item) === originKey);
if (index === -1) {
return;
}
@@ -354,9 +335,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
* @param key
*/
getTabByKey(key: string) {
return this.getTabs.find(
(item) => getTabKeyFromTab(item) === key,
) as TabDefinition;
return this.getTabs.find((item) => getTabKeyFromTab(item) === key) as TabDefinition;
},
/**
* @zh_CN 新窗口打开标签页
@@ -583,6 +562,23 @@ export const useTabbarStore = defineStore('core-tabbar', {
{
pick: ['tabs', 'visitHistory'],
storage: sessionStorage,
serializer: {
serialize: JSON.stringify,
deserialize(value: string) {
const parsed = JSON.parse(value);
// Stack 类实例经 JSON 序列化后会变成普通对象 {dedup, items, maxSize}，
// 丢失所有方法和 getter，需要重新构建 Stack 实例
if (parsed.visitHistory && !(parsed.visitHistory instanceof Stack)) {
const raw = parsed.visitHistory;
const stack = createStack<string>(true, MAX_VISIT_HISTORY);
if (Array.isArray(raw.items)) {
stack.push(...raw.items);
}
parsed.visitHistory = stack;
}
return parsed;
},
},
},
],
state: (): TabbarState => ({
@@ -660,21 +656,14 @@ function isTabShown(tab: TabDefinition) {
* @param tab
*/
function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
const {
fullPath,
path,
meta: { fullPathKey } = {},
query = {},
} = tab as RouteLocationNormalized;
const { fullPath, path, meta: { fullPathKey } = {}, query = {} } = tab as RouteLocationNormalized;
// pageKey可能是数组（查询参数重复时可能出现）
const pageKey = Array.isArray(query.pageKey)
? query.pageKey[0]
: query.pageKey;
const pageKey = Array.isArray(query.pageKey) ? query.pageKey[0] : query.pageKey;
let rawKey;
if (pageKey) {
rawKey = pageKey;
} else {
rawKey = fullPathKey === false ? path : (fullPath ?? path);
rawKey = fullPathKey === false ? path : fullPath ?? path;
}
try {
return decodeURIComponent(rawKey);