页面路由跳转返回后数据回显,记住原先的状态

This commit is contained in:
2026-05-12 08:57:26 +08:00
parent c2b64d5e22
commit ad1cbee74a
164 changed files with 5150 additions and 2246 deletions

View File

@@ -0,0 +1,169 @@
/**
* 驾驶舱导航状态管理
* 核心逻辑:
* - 菜单进入:清空导航栈
* - 页面跳转 push当前页面状态入栈
* - 返回 go(-1):出栈,恢复前一个页面状态
* - 返回按钮:栈长度 > 0 时显示
*/
const STACK_KEY = 'cockpit_nav_stack';
const STATE_PREFIX = 'cockpit_nav_state_';
/**
* 获取导航栈
* @returns {Array<{ path: string, state: object }>}
*/
export function getNavStack() {
try {
const raw = sessionStorage.getItem(STACK_KEY);
if (!raw) return [];
return JSON.parse(raw);
} catch (e) {
return [];
}
}
/**
* 获取导航栈长度
* @returns {number}
*/
export function getNavStackLength() {
return getNavStack().length;
}
/**
* 页面跳转时调用:将当前页面状态入栈
* @param {string} fromPath - 来源页面路径
* @param {object} state - 来源页面的业务状态(如 dateData
*/
export function pushNavigation(fromPath, state = {}) {
if (!fromPath) return;
try {
const stack = getNavStack();
stack.push({
path: fromPath,
state,
timestamp: Date.now()
});
sessionStorage.setItem(STACK_KEY, JSON.stringify(stack));
console.log('[navigation] push', fromPath, 'stack length:', stack.length);
} catch (e) {
console.warn('[navigation] push failed', e);
}
}
/**
* 返回时调用:出栈,返回前一个页面信息
* @returns {{ path: string, state: object } | null}
*/
export function popNavigation() {
try {
const stack = getNavStack();
if (stack.length === 0) return null;
const prev = stack.pop();
sessionStorage.setItem(STACK_KEY, JSON.stringify(stack));
console.log('[navigation] pop', prev.path, 'stack length:', stack.length);
return prev;
} catch (e) {
console.warn('[navigation] pop failed', e);
return null;
}
}
/**
* 清空导航栈和所有页面状态
*/
export function clearNavigation() {
try {
// 清空栈
sessionStorage.removeItem(STACK_KEY);
// 清空所有页面状态
Object.keys(sessionStorage)
.filter(k => k.startsWith(STATE_PREFIX))
.forEach(k => sessionStorage.removeItem(k));
console.log('[navigation] cleared');
// 通知所有监听器
window.dispatchEvent(new Event('navigation-cleared'));
} catch (e) {
console.warn('[navigation] clear failed', e);
}
}
/**
* 获取指定页面的状态
* @param {string} path - 页面路径
* @returns {object | null}
*/
export function getNavigationState(path) {
if (!path) return null;
try {
const key = STATE_PREFIX + path;
const raw = sessionStorage.getItem(key);
if (!raw) return null;
return JSON.parse(raw);
} catch (e) {
return null;
}
}
/**
* 消费(读取并删除)指定页面的状态
* @param {string} path - 页面路径
* @returns {object | null}
*/
export function consumeNavigationState(path) {
if (!path) return null;
try {
const key = STATE_PREFIX + path;
const raw = sessionStorage.getItem(key);
if (!raw) return null;
sessionStorage.removeItem(key);
return JSON.parse(raw);
} catch (e) {
try {
sessionStorage.removeItem(STATE_PREFIX + path);
} catch (e2) { /* ignore */ }
return null;
}
}
/**
* 保存指定页面的状态
* @param {string} path - 页面路径
* @param {object} state - 业务状态
*/
export function saveNavigationState(path, state) {
if (!path) return;
try {
const key = STATE_PREFIX + path;
sessionStorage.setItem(key, JSON.stringify(state));
} catch (e) {
console.warn('[navigation] save state failed', e);
}
}
// ============ 兼容旧 API后续可逐步移除===========
/**
* @deprecated 使用 pushNavigation 代替
*/
export function saveNavigationReturnState(scope, state) {
console.warn('[navigation] saveNavigationReturnState 已废弃,请使用 pushNavigation + saveNavigationState');
}
/**
* @deprecated 使用 consumeNavigationState 代替
*/
export function consumeNavigationReturnState(scope) {
console.warn('[navigation] consumeNavigationReturnState 已废弃,请使用 popNavigation + consumeNavigationState');
return null;
}
/**
* @deprecated
*/
export function getNavScope(moduleName) {
console.warn('[navigation] getNavScope 已废弃,请直接使用路径作为 key');
return `nav:${moduleName}`;
}