feat(HEL-540): 数据中枢后台升级为「第八版·星港中枢」全动效单页

- 用 Canvas 2D 自写透视投影重写 Stage 引擎:中央自转星体 + 4 颗来源卫星
  (tushare/东方财富/腾讯/iFinD)沿 2 层完整椭圆轨道环绕,4 条入向线 +
  2 条去向线(发布/审计),卫星名称与 LINK/ACT 双灯始终最上层、常显不隐
- 落地 HEL-538 安全盒硬公式:x0=cabinW+24,x1=W-24,y0=64,y1=H-118,
  世界坐标统一钳制在 ±1.28(横)×±0.6656(纵),去向端半径 1.25
- 全屏无卡片舞台:#stageWrap 去边框/圆角/阴影,改为通栏
- LINK=稳态常亮,ACT=事件驱动短闪(tushare recent_calls / 健康探测 /
  批次与发布状态变化),全局令牌桶 ≤3 簇/秒,四源独立队列
- 页面隐藏暂停 rAF + 清空未播闪簇、恢复不补播;prefers-reduced-motion
  运行时 change 监听(非只读一次);静态版同步换成星体+双轨道示意图
- 识别色只复用既有设计 Token --chan1..4,未新增配色系统
- 修正审计尾迹角度/半径范围使其构造性落在安全盒硬包络内
- 修正 drawAuditTrail 误将完整 hex 色值当 rgba 前缀拼接导致
  addColorStop 抛错的运行时 bug(day 主题下必现)

自测:node --check 通过;三档(1440x900/1280x800/1024x768)×日夜安全盒
数学自测脚本全通过(S 命中 427/380/291);Playwright 真浏览器起本地
测试服务端验证:六幕滚动、详情开合、隐藏/恢复暂停与续播、
prefers-reduced-motion 运行时切换、真实 probe 事件驱动 ACT、
60 秒连续运行无 DOM 增长/无 console 报错;xiaobai-datahub/tests/
133 个后端测试全绿;git diff --check 无空白问题。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
2026-09-13 11:56:54 +08:00
co-authored by Cursor multica-agent
parent be647bbaba
commit 475ed4a872
2 changed files with 522 additions and 401 deletions
File diff suppressed because it is too large Load Diff
+9 -8
View File
@@ -1,4 +1,5 @@
/* xiaobai-datahub 数据中枢后台 —— 第版「轨道机芯
/* xiaobai-datahub 数据中枢后台 —— 第版「星港中枢
整页星空舞台 + 中央自转星体 + 4 颗来源卫星,六幕连续滚动换场(详见 app.js Stage 引擎)。
统一动效 Token:进入/退出用强 ease-out,屏内移动用强 ease-in-out,持续流动用 linear。
禁止 ease-in、禁止 transition:all —— 全文件遵守。 */
:root {
@@ -137,14 +138,15 @@ h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
#topbar .spacer { flex: 1; }
#topbar .who { font-size: 12px; }
/* ---------- 固定空间舞台(76vh,六幕连续场景) ----------
/* ---------- 全幅星空舞台(第八版「星港中枢」,calc(100vh - 52px) 高,六幕连续场景) ----------
#track 的六段高幕(每段 130vh)在它身后正常参与文档流把页面撑高,
#stageWrap 用 sticky 钉在视口里,滚动时只有 #track 的高度被“划过”,
舞台本体在这段距离内始终可见、位置不变,直到 #track 撑出的空间耗尽才随之离场。 */
舞台本体在这段距离内始终可见、位置不变,直到 #track 撑出的空间耗尽才随之离场。
整个舞台是同构的日/夜全幅星空:无卡片边框、无圆角大框、无 overflow 裁切——
星系(轨道/卫星/线路/去向端)改由 app.js 的响应式安全盒公式钳制,构造性不出屏。 */
#stageWrap {
flex: none; height: 76vh; min-height: 480px; margin: 0 18px; border-radius: 18px;
overflow: hidden; border: 1px solid var(--stage-edge);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45), inset 0 0 120px rgba(0, 0, 0, .08);
flex: none; height: calc(100vh - var(--bar-h)); min-height: 480px; margin: 0; border-radius: 0;
border: 0; box-shadow: none;
position: sticky; top: var(--bar-h); z-index: 2;
}
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
@@ -192,7 +194,7 @@ h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px;
backdrop-filter: blur(14px); line-height: 1.9;
}
#legend .lampico { display: inline-block; width: 14px; height: 5px; border-radius: 99px; vertical-align: middle; margin-right: 6px; }
#legend .lampico { display: inline-block; width: 16px; height: 6px; border-radius: 99px; vertical-align: middle; margin-right: 6px; }
#legend .li-link { background: rgba(47, 216, 206, .5); box-shadow: 0 0 6px rgba(47, 216, 206, .6); }
#legend .li-act { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
@@ -273,7 +275,6 @@ main#page { padding: var(--pad); min-height: calc(100vh - 96px); background: var
#detail { width: 320px; }
}
@media (max-width: 1100px) {
#stageWrap { margin: 0 10px; }
#cabin { width: 230px; padding: 13px 14px; }
#legend { display: none; }
}