页面路由跳转返回后数据回显,记住原先的状态
This commit is contained in:
169
src/utils/navigationReturnState.js
Normal file
169
src/utils/navigationReturnState.js
Normal 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}`;
|
||||
}
|
||||
Reference in New Issue
Block a user