feat: SPA 外壳——菜单切换零刷新，对齐 Ant Design Pro 体验（issue #131）
- web/index.html 重写为 SPA 外壳：Sider/顶栏常驻，模块页在 #module-frame iframe 内容区加载，点菜单只换 iframe 地址， 彻底消灭整页刷新与白闪（此前只是铺底色缓解） - 新增 shared/shell.js：IAOP_SHELL.navigate() 导航、外壳 hash (#/admin/#models) 与 iframe 地址双向同步、登录守卫、移动端 模块新标签打开；iframe 地址用 location.replace 避免污染 joint history；250ms 轮询回同步（replace 不触发 load 事件）； 导航时乐观高亮（后台标签轮询被节流不能作为唯一途径）； 前进/后退若恢复了 iframe 旧地址则以外壳 hash 为准强制对齐 - pro-header.js 三模式：外壳(菜单点击走 IAOP_SHELL、导出 IAOP_PRO.setActive)/被嵌(iframe 内，隐藏页内跨页链接与重复 用户标识、保留 Tab-hash 联动)/独立(原行为)；菜单渲染后派发 pro:menu-rendered 事件消除导航先于渲染的高亮竞态 - session.js：logout/守卫重定向作用于顶层窗口（iframe 内不再 只跳 iframe 自己） - 修复 iframe 替换元素宽高 bug：fixed 时左右定位不拉伸（回退 固有 300x150），改显式 calc 宽高 - 登录页 next 默认回外壳 ../index.html 实测（本地 http.server + WebBridge 真实浏览器）：菜单切换/ 子菜单切换/前进/后退/直达链接(#/admin/#models) URL、iframe、 菜单高亮、子菜单高亮全链路一致，Sider 节点全程不重建； 登录守卫 logout→顶层跳登录、登录后回外壳默认驾驶舱。
This commit is contained in:
+29
-12
@@ -4,20 +4,37 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>iAOP 云美工业AI优化平台</title>
|
||||
<meta http-equiv="refresh" content="0; url=cockpit/">
|
||||
<link rel="stylesheet" href="shared/pro.css">
|
||||
<style>
|
||||
/* 根路径仅做跳转（2026-08 起门户页移除，登录后默认进驾驶舱）：
|
||||
* / → cockpit/（驾驶舱自带登录守卫，未登录会再跳登录页并回跳）。 */
|
||||
body { margin: 0; min-height: 100vh; display: flex; align-items: center;
|
||||
justify-content: center; background: #f0f2f5;
|
||||
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
color: rgba(0,0,0,.45); font-size: 14px; }
|
||||
a { color: #1677ff; text-decoration: none; }
|
||||
/* iAOP SPA 外壳（2026-08，对齐 Ant Design Pro 体验）：
|
||||
* Sider/顶栏常驻不刷新，模块页在 iframe 内容区加载，
|
||||
* 左侧菜单切换 = 换 iframe src，无整页刷新、无白闪。
|
||||
* URL 形如 /index.html#/admin/#models，可分享直达子页。 */
|
||||
html, body { height: 100%; margin: 0; }
|
||||
body.has-pro-sider { padding-left: 0 !important; } /* 外壳自控布局 */
|
||||
/* 注意：iframe 是替换元素，fixed 时左右同时定位不会拉伸（回退到
|
||||
* 固有尺寸 300x150），必须显式 calc 宽高。 */
|
||||
#module-frame {
|
||||
position: fixed;
|
||||
top: 48px;
|
||||
left: 208px;
|
||||
width: calc(100% - 208px);
|
||||
height: calc(100% - 48px);
|
||||
border: 0;
|
||||
background: #f0f2f5;
|
||||
transition: left 0.2s, width 0.2s;
|
||||
}
|
||||
body.pro-sider-collapsed #module-frame { left: 48px; width: calc(100% - 48px); }
|
||||
@media (max-width: 720px) { #module-frame { left: 0; width: 100%; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- iAOP 平台入口（无门户页）：直接重定向到配置化驾驶舱。 -->
|
||||
<p>正在进入驾驶舱… <a href="cockpit/">立即进入</a></p>
|
||||
<script>location.replace("cockpit/");</script>
|
||||
<body data-pro-shell data-pro-title="iAOP 平台">
|
||||
<!-- SPA 外壳：pro-header.js 注入 Sider/顶栏；shell.js 负责菜单导航、
|
||||
iframe 加载、URL hash 同步（#/模块/#子页）与登录守卫。 -->
|
||||
<iframe id="module-frame" title="模块内容"></iframe>
|
||||
<script src="auth/user_store.js"></script>
|
||||
<script src="shared/session.js"></script>
|
||||
<script src="shared/pro-header.js"></script>
|
||||
<script src="shared/shell.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user