layui原生不支持跨子系统顶部菜单联动，需将菜单抽离为公共模块，通过URL参数或localStorage+事件广播实现轻量协同；各子系统根据路径前缀或query参数主动匹配并高亮对应菜单项，跳转前写入localStorage.setItem('activeTopMenu', 'code')，监听storage事件实时更新样式，登录后按后端返回的权限列表动态渲染菜单，统一约定sys参数或Hash结构同步上下文。
layui 原生不支持跨子系统的顶部菜单联动，因为每个子系统通常独立部署、路由隔离、状态不共享。要实现「多个子系统间顶部菜单统一高亮+点击跳转+状态同步」，核心思路是：**把顶部菜单抽离为公共模块，用 URL 参数或 localStorage + 事件广播做轻量协同，而非强依赖同一套 JS 上下文**。
顶部菜单统一托管 + 子系统识别当前项
所有子系统共用同一套顶部导航 HTML 片段（如通过 iframe 嵌入、或构建时注入、或动态 fetch 加载），每个菜单项带唯一标识（如 data-code="system-a"）和目标地址（href="/system-a/home"）。关键点：
- 各子系统在初始化时，解析当前完整 URL（
location.href），匹配路径前缀（如/system-a/）或 query 参数（如?sys=system-a），主动给对应菜单项添加layui-this类 - 不依赖 layui 的
element.tabChange，因为那是针对 Tab 内部切换的；顶部菜单属于全局导航，应由各子系统“自我声明”当前归属 - 推荐用
data-code而非文字内容匹配，避免中英文/空格/换行导致误判
子系统切换时保持菜单状态一致
用户从「系统A」点击跳转到「系统B」，顶部菜单需立刻高亮「系统B」项。不能只靠页面刷新后重新匹配，否则有闪烁或延迟。可行方案：
- 跳转前，将目标系统编码写入
localStorage.setItem('activeTopMenu', 'system-b') - 各子系统入口 JS 中监听
storage事件，检测到变更就立即更新菜单样式：$('.top-nav li').removeClass('layui-this').filter('[data-code="' + code + '"]').addClass('layui-this') - 若使用 iframe 嵌入顶部菜单，父页可直接调用子 iframe 的方法（同源前提下）：
iframe.contentWindow.updateActive('system-b')
登录态与权限驱动菜单显隐
不同账号在不同子系统可见的顶部菜单项不同。不要在前端硬编码全部菜单再 show/hide，而应：
- 登录成功后，后端返回该用户有权限访问的子系统列表（如
["system-a", "system-b"]） - 前端根据该列表动态渲染顶部菜单，缺失项不生成 DOM，彻底规避越权显示
- 每次切换子系统前，校验权限：若无权访问，提示并阻止跳转，而不是跳过去再报 403
URL Hash 或 query 同步当前子系统上下文
便于分享链接、浏览器前进后退、SEO 友好。例如访问 https://admin.com/#/system-b/user/list，顶部菜单自动激活 system-b；返回 https://admin.com/?sys=system-c&tab=report，同样生效。
- 统一约定参数名（如
sys）或 Hash 结构（如#system-c/report） - 各子系统在
layui.use初始化完成后，立即解析并激活对应菜单项 - 菜单点击事件中，用
location.assign()或history.pushState()更新地址栏，不直接window.open或location.href =，确保单页体验连贯
