diff --git a/src/components/Shell.tsx b/src/components/Shell.tsx index 09d5dc1..8d952df 100644 --- a/src/components/Shell.tsx +++ b/src/components/Shell.tsx @@ -7,25 +7,47 @@ export interface ModuleConfig { component: ComponentType; } +/** path 到模块 id 的映射 */ +const PATH_MAP: Record = { + '/vehicle': 'assets', + '/assets': 'assets', + '/mileage': 'mileage', +}; + +function getInitialModule(modules: ModuleConfig[]): string { + // 优先看 hash + const hash = window.location.hash.slice(1); + if (modules.some((m) => m.id === hash)) return hash; + // 再看 pathname + const pathModule = PATH_MAP[window.location.pathname]; + if (pathModule && modules.some((m) => m.id === pathModule)) return pathModule; + // 默认第一个 + return modules[0]?.id ?? ''; +} + function getHashModule(modules: ModuleConfig[]): string { const hash = window.location.hash.slice(1); - return modules.some((m) => m.id === hash) ? hash : modules[0]?.id ?? ''; + return modules.some((m) => m.id === hash) ? hash : ''; } export function Shell({ modules }: { modules: ModuleConfig[] }) { - const [activeModule, setActiveModule] = useState(() => getHashModule(modules)); + const [activeModule, setActiveModule] = useState(() => getInitialModule(modules)); useEffect(() => { - const onHashChange = () => setActiveModule(getHashModule(modules)); + const onHashChange = () => { + const h = getHashModule(modules); + if (h) setActiveModule(h); + }; window.addEventListener('hashchange', onHashChange); return () => window.removeEventListener('hashchange', onHashChange); }, [modules]); useEffect(() => { - if (!window.location.hash) { - window.location.hash = modules[0]?.id ?? ''; + // 同步 hash 到当前模块 + if (window.location.hash.slice(1) !== activeModule) { + window.location.hash = activeModule; } - }, [modules]); + }, [activeModule]); const switchModule = (id: string) => { window.location.hash = id;