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:
co-authored by
Cursor
multica-agent
parent
be647bbaba
commit
475ed4a872
+513
-393
File diff suppressed because it is too large
Load Diff
@@ -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; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user