chenlin
cb3fb47561
web-platform-ci / TypeScript, lint, unit, build (push) Has been cancelled
web-platform-ci / Playwright E2E (push) Has been cancelled
web-platform-ci / TypeScript, lint, unit, build (pull_request) Has been cancelled
web-platform-ci / Playwright E2E (pull_request) Has been cancelled
49 lines
3.3 KiB
Markdown
49 lines
3.3 KiB
Markdown
# 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`。
|