五个带 Sider 的模块页 head 内联首屏底色(左 208px #001529 深 + 内容区 #f0f2f5),外部 CSS 加载前的解析期画布即为最终布局底色, 深色 Sider 区域不再白闪(FOUC);窄屏媒体查询下保持纯灰底
42 lines
1.9 KiB
HTML
42 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- 首屏防闪(issue #131):跨页跳转时外部 CSS 未到的瞬间,
|
|
先用与最终布局一致的底色铺满画布(左 Sider 深色 + 内容区灰),
|
|
消除深色 Sider 区域的白闪(FOUC)。 -->
|
|
<style>html{background:#f0f2f5}@media (min-width:721px){html{background:linear-gradient(90deg,#001529 208px,#f0f2f5 208px)}}</style>
|
|
<title>iAOP 配置化驾驶舱</title>
|
|
<link rel="stylesheet" href="cockpit.css">
|
|
<link rel="stylesheet" href="../shared/pro.css">
|
|
</head>
|
|
<body data-pro-title="配置化驾驶舱">
|
|
<!-- iAOP 配置化驾驶舱(issue #131 / PRD 5.5「⑤ 配置化驾驶舱」)
|
|
纯静态 HTML + 原生 JS(无构建链)。页面只消费 plans/*.json 渲染计划,
|
|
切换行业模板 = 加载另一份 plan JSON,前端代码零改动。 -->
|
|
<header id="topbar">
|
|
<h1 id="cockpit-title">iAOP 驾驶舱</h1>
|
|
<div id="topbar-right">
|
|
<label for="template-select">行业模板</label>
|
|
<select id="template-select"></select>
|
|
<span id="infer-status" class="status-dot" title="推理服务 /health">●</span>
|
|
<span id="infer-status-text">推理服务检测中…</span>
|
|
</div>
|
|
</header>
|
|
<main id="cockpit-grid" aria-busy="true"></main>
|
|
<footer id="bottombar">
|
|
<span id="plan-meta"></span>
|
|
<span>布局 Schema: iAOP-cockpit-layout-v1 · 首屏静态资源本地化,目标 ≤ 2s(PRD 9)</span>
|
|
</footer>
|
|
<script src="../auth/user_store.js"></script>
|
|
<script src="../shared/session.js"></script>
|
|
<script>
|
|
// 登录守卫(PRD 8.2):未登录跳登录页,登录后回跳本页(后端优先/本地降级)
|
|
IAOP_SESSION.requireLoginElseRedirect("../auth/login.html");
|
|
</script>
|
|
<script src="../shared/pro-header.js"></script>
|
|
<script src="cockpit.js"></script>
|
|
</body>
|
|
</html>
|