Mujoco_WASM/web_platform/UI_CYBER_HUD.md

Cyber HUD 界面样式

本次直接升级现有 React 界面的 JSX/CSS，不增加静态演示入口、外部字体或依赖，保留亮色主题和所有仿真业务行为。

源码

• src/styles.css：蓝黑/电光青语义色、紫色装饰、玻璃材质、交互微光、状态呼吸和可访问性降级。
• src/components/ui/{Button,IconButton,Tabs,CollapsibleSection,Dialog,Popover}.tsx：共享视觉挂点，保留原有键盘交互与 Portal。
• src/app/App.tsx 及 src/app/components/{WorkbenchHeader,SidebarPanel,ViewportHUD,WorkspaceOverlays,SourceEditorDialog}.tsx：工作台外壳、欢迎卡片、HUD 和编辑窗口。
• src/tuning/{TuningApp,TuningConsole,TuningSessionRail,MetricsComparisonBoard}.tsx：调参页、导航、指标卡片；Monaco 原生亮/暗代码主题不变。
• e2e/ui-cyber-hud.spec.ts：新增 5 个材质、主题持久化、动效及回退测试。

v0.9.4 调参布局

自调参会话页恢复三栏：左侧会话与 Trial、中间指标与排行、右侧决策与审批。宽度达到 1280px 时三栏同时显示并分别滚动，更窄窗口按上述顺序纵向排列。原有主题、审批与 Diff 编辑行为保持不变。

材质与性能约束

• 暗色基底 #060914 / #0B1224，强调 #36E4F2，装饰 #A78BFA；亮色强调 #087887。
• 毛玻璃仅用于顶栏、欢迎卡片、小型 HUD 和浮层；侧栏使用静态渐变质感，避免长列表滚动时大面积背景模糊。
• 3.6 秒呼吸动效仅绑定真实仿真运行状态；装饰层不拦截指针。
• 减少动态效果偏好禁用动画；无背景模糊支持时使用实色表面；强制色彩模式保留清晰边框。

验证记录

• npm run typecheck、npm run lint、npm run build 通过。
• npm run test：97 个测试文件、408 项测试通过。
• 工作台布局、共享浮层、领域面板、调参系统及新增 HUD 测试：59 项端到端测试通过。
• 双主题覆盖 1920×1080、1440×900、1366×768、1024×768、768×800；检查了源码/Diff、弹层、主题同步和视口避让。
• 变更源码的 Prettier 检查与 git diff --check 通过。
• 构建仍提示部分包超过 500kB；本次未改变加载架构。

性能取证：Headless Chromium、1440×900、24 刚体场景下按“关闭特效→开启→开启→关闭”采样，每段 2.5 秒并滚动侧栏。初版全侧栏模糊约 54 FPS，取消侧栏实时模糊后开/关特效均约 60 FPS，P95 帧间隔约 16.7ms。

限制：这是短时特效开关对照，不是完整重构前后的严格基准，也不代表真实桌面 GPU 或重型模型表现；未执行 Firefox/Safari 实机验证。无模糊回退测试通过修改 CSS 能力分支来模拟，不等同于旧浏览器实测。

本地证据

• ../test-results/cyber-hud-delivery/workbench-dark.png
• ../test-results/cyber-hud-delivery/workbench-light.png
• ../test-results/cyber-hud-delivery/tuning-dark.png
• ../test-results/cyber-hud-delivery/tuning-light.png
• ../test-results/cyber-hud-delivery/before-dark.png
• ../test-results/cyber-hud-delivery/performance-final.json

截图与性能证据为本地生成产物，不纳入源码提交；再次运行 Playwright 可能清理 test-results/。详细命令日志保存在 /tmp/cyber-hud-evidence/。

预览：npm run dev，主入口 /，独立调参入口 /tuning.html。