这次改了什么

v0.11.0 是一次系统性的前端架构重构。核心思路来自对原 UI 的全面审计——30 个组件、12 层 z-index、金色被 12 个 UI 角色共用的语义稀释。

从单体到组件

v0.10.0 的 app.js 是一个 1290 行的单体文件，render() 函数在每次行动后重建所有 DOM。v0.11.0 将其拆分为 12 个独立组件 + GameShell 编排器（622 行）：

  • StatusBar：轮次/时间/AP 增量更新，AP ≤ 3 红色高亮
  • TimelineMiniBar：14:00 → 14:15 迷你时间线进度条
  • ObjectiveCard：结构化目标进展 ✓/□
  • SceneStateCard：位置 + 描述 + NPC 状态摘要（替代场景卡内的行动 chips）
  • EventFeed：行动反馈流容器，替代聊天流
  • ActionResultCard：核心组件——统一所有行动的结构化结果（时间/AP 消耗/叙述/新线索/状态变化/解锁行动）
  • ActionDock：底部行动区，默认 2-3 推荐行动（拇指可达）
  • MoreActionsSheet：按类型分组的更多行动抽屉（观察/对话/移动/高风险）
  • FocusWatchBar：持续观察状态栏
  • ArchiveSheet：档案抽屉（线索/人物/时间线/记忆 4 Tab）
  • DialogueFocusSheet：全屏对话聚焦模式 + 对话摘要卡
  • CommandInput：对话/行动双模式输入区

每个组件有独立的 update(state) 方法，采用 dirty check 增量更新。

从 absolute 堆叠到 flex 流式

v0.10.0 使用 12 层 z-index 堆叠 7 个 absolute 定位的区域。v0.11.0 改为 flex column 流式布局，仅 overlay 类元素使用 absolute。

ActionResultCard — 最大的体验提升

所有行动结果不再追加为普通聊天消息，而是生成结构化卡片：

14:01 · 观察结果
消耗：1 AP / 1 分钟
你仔细观察周围，没有发现异常。

14:02 · 对话摘要：小宁
消耗：2 AP / 2 分钟
解锁行动：[检查座位下方] [找赵乘警] …

视觉规范

固定颜色语义：金=主线目标，蓝=观察，绿=线索，红=危险，紫=推理。字号：22px/16px/15px/13px/11px。

怎么改的

整个重设计基于一份完整的 audit + spec + plan 流程：

  1. 全面摸排：分析 DOM 结构、渲染逻辑、视觉系统、引擎数据契约
  2. 诊断 8 个核心问题：信息层级混乱 / 行动按钮位置 / 行动反馈 / 按钮分类 / 持续观察 / 时间线 / 颜色语义 / 渲染模式
  3. 12 个组件设计：每个组件有明确的 DOM 结构 + 数据映射 + 样式规格
  4. 不修改 engine.js / server.js：所有改造仅限于前端层

数据

  • app.js：1290→622 行（-52%）
  • style.css：651→277 行（-57%）
  • 新增 5 个组件文件：636 行
  • 组件数量：12 个独立组件 + GameShell