bot_dev1
cfa976cac3
- 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→顶层跳登录、登录后回外壳默认驾驶舱。
41 lines
1.6 KiB
HTML
41 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>iAOP 云美工业AI优化平台</title>
|
|
<link rel="stylesheet" href="shared/pro.css">
|
|
<style>
|
|
/* 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 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>
|