feat(HEL-546): 数据中枢 A/B/C 三方向落地为可用页面
- 基于第七版稳定基线(be647bb)重构 admin 前端为模块化架构：
tokens.css(设计token唯一来源) + shared.css(公共组件) + core.js(状态/API/事件总线/轮询/路由)
+ main.js(入口) + layouts/{flowline,ledger,strata}.{css,js}(三方向独立布局)
+ layouts/shared.js(三方向共用数据视图与操作绑定)
- 三个页面(A装配线/B值班台账/C地层剖面)通过 ?layout= 查询参数独立可达、可刷新、可前进后退导航，
共享登录态、真实后端数据(overview/sources/jobs/batches/datasets/audit)、错误处理与主题
- 六大板块(总览/数据源/调度任务/盘后发布/数据集/审计)在三个方向均可查看与操作(探测/触发/回滚/补数)
- 修正健康状态语义：CircuitBreaker closed/half_open/open 与适配器 ok/error/empty/unconfigured/unknown
统一归一化为 ok/warn/error/unconfigured/unknown 供三方向一致展示
- 事件驱动动效：A 水平接力光梭、B 行级高亮+实时调用跑马灯、C 纵向贯穿光点+分层标记；
统一使用 transform/opacity/WAAPI，避免 transition:all，支持 prefers-reduced-motion 静态降级
- 修复响应式布局在 1024/1280 断点因 CSS Grid 默认 min-width:auto 被内部宽表格撑爆轨道的问题
- 修复布局切换/前进后退时残留 setTimeout 回调在 unmount 后访问 null root 导致的报错(mounted 标志位+
safeTimeout+统一清理定时器)
- 自测：Playwright 全断点(1440/1280/1024)x 双主题矩阵截图、90 次连续布局切换+前进后退压力测试无报错、
探测/触发/回滚danger操作流程验证、reduced-motion 验证；后端 pytest 全量 133 用例通过，无回归
- 未改动:登录/鉴权契约、后端 API、'问天'冻结区、生产数据/权限
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
be647bbaba
commit
011ecc0d1a
@@ -4,7 +4,11 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xiaobai-datahub 管理后台 · 数据中枢</title>
|
||||
<link rel="stylesheet" href="/admin/styles.css" />
|
||||
<link rel="stylesheet" href="/admin/tokens.css" />
|
||||
<link rel="stylesheet" href="/admin/shared.css" />
|
||||
<link rel="stylesheet" href="/admin/layouts/flowline.css" />
|
||||
<link rel="stylesheet" href="/admin/layouts/ledger.css" />
|
||||
<link rel="stylesheet" href="/admin/layouts/strata.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
@@ -30,49 +34,31 @@
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="shell" hidden>
|
||||
<section id="shell" hidden style="display:flex; flex-direction:column; min-height:100vh;">
|
||||
<header id="topbar">
|
||||
<div class="logo">小白复盘 <em>·</em> 数据中枢</div>
|
||||
<span class="crumb" id="crumb">8766 · 四源汇流 · 持续运转</span>
|
||||
<span id="phase" class="pill"></span>
|
||||
<div class="title">小白复盘 <em>·</em> 数据中枢</div>
|
||||
<span class="vdiv"></span>
|
||||
<span class="tdate mono" id="crumb">8766 · 四源汇流 · 持续运转</span>
|
||||
<span class="spacer"></span>
|
||||
<span id="who" class="muted who"></span>
|
||||
<button type="button" id="theme-btn" class="ghost">夜间</button>
|
||||
<button type="button" id="logout-btn" class="ghost">退出</button>
|
||||
<nav id="layoutSwitch" aria-label="页面切换">
|
||||
<button type="button" data-layout="flowline"><span class="k">A</span>装配线</button>
|
||||
<button type="button" data-layout="ledger"><span class="k">B</span>值班台账</button>
|
||||
<button type="button" data-layout="strata"><span class="k">C</span>地层剖面</button>
|
||||
</nav>
|
||||
<span class="who muted" id="who"></span>
|
||||
<button type="button" id="theme-btn" class="btn ghost">夜间</button>
|
||||
<button type="button" id="logout-btn" class="btn ghost">退出</button>
|
||||
</header>
|
||||
|
||||
<!-- 动效版：一台连续空间舞台，六幕滚动切换，同一核心与流道贯穿始终 -->
|
||||
<div id="stageWrap">
|
||||
<canvas id="scene"></canvas>
|
||||
<div id="cabin"></div>
|
||||
<div id="legend">
|
||||
<span class="lampico li-link"></span>LINK 链路常亮（低亮）<br>
|
||||
<span class="lampico li-act"></span>ACT 活动灯 · 事件成簇短闪
|
||||
</div>
|
||||
<div id="rail"></div>
|
||||
<div id="hint">滚 动 推 进 镜 头</div>
|
||||
<div id="detail" class="closed">
|
||||
<div class="dtag"></div>
|
||||
<button id="detailClose" type="button" aria-label="关闭详情">×</button>
|
||||
<div id="detailBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="track" aria-hidden="true">
|
||||
<section data-scene="0"></section>
|
||||
<section data-scene="1"></section>
|
||||
<section data-scene="2"></section>
|
||||
<section data-scene="3"></section>
|
||||
<section data-scene="4"></section>
|
||||
<section data-scene="5"></section>
|
||||
</div>
|
||||
|
||||
<!-- 减少动态效果版：六幕静态空间图 + 固定文字状态，信息与功能完全等价 -->
|
||||
<main id="staticShell" hidden>
|
||||
<nav id="staticNav"></nav>
|
||||
<div id="staticScenes"></div>
|
||||
</main>
|
||||
<main id="page-root" style="flex:1;"></main>
|
||||
</section>
|
||||
</div>
|
||||
<script src="/admin/app.js"></script>
|
||||
|
||||
<script src="/admin/core.js"></script>
|
||||
<script src="/admin/layouts/shared.js"></script>
|
||||
<script src="/admin/layouts/flowline.js"></script>
|
||||
<script src="/admin/layouts/ledger.js"></script>
|
||||
<script src="/admin/layouts/strata.js"></script>
|
||||
<script src="/admin/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user