🚀 HumAInity Genesis V0.2 - Step 3 UI 最终实施规划
目标: 实现全中文、高信息密度、且能展示 AI 决策过程的 心智档案 (Soul Inspector)。
I. 数据层准备 (GameState & AgentProfile 初始化)
Cursor 必须首先在 GameState.ts 或相关初始化文件中,更新 Agent 的初始数据,使用我们最终确认的中文名称和文艺特质。
-
Agent 初始数据更新:
-
name: “德米特里” -
psychTraits:['信守承诺', '谨慎多虑'] -
capTraits:['身强体健', '午后倦怠'] -
移除
primaryRole的前端显示。
-
-
特质描述字典 (
TRAIT_DESCRIPTIONS) 创建: (用于 Tooltip)-
[信守承诺]:心理特质。坚守领袖的指令,工作时 P1 生存需求会略微延后触发。
-
[谨慎多虑]:心理特质。易焦虑和抱怨,在饥饿/疲惫时,P1 生存阈值会略微提前触发。
-
[身强体健]:能力特质。体力恢复较快,工作效率提升 20%。
-
[午后倦怠]:能力特质。精力消耗速度加快 10%,需要更频繁的休息。
-
II. UI 组件实现与细节 (SoulInspector.tsx & GameUI.tsx)
1. GameUI.tsx (HUD 资源面板) 升级
-
内容: 适配
inventory,显示 木材、浆果、生肉。 -
样式: 全中文标签,资源为零时红色警告。
2. SoulInspector.tsx (心智档案) 实现
| 区域 | 标题/内容 | 关键实现要求 | 交互/样式 |
| 顶部标题 | 德米特里的心智档案 | 移除所有英文,确保古典风格。 | N/A |
| 职责显示 | “职责:[currentAssignment]” | 不显示 primaryRole。大号、琥珀色突出动态职责。 | 样式强调,使用琥珀色。 |
| Vitals | 饱食度、精力值、健康值 (中文标签) | 必须使用 CSS transition-all duration-700 ease-out 实现平滑过渡动画。 | 进度条颜色分级 (>50% Green, <20% Red)。 |
| 特质显示 | [信守承诺], [身强体健] 等标签。 | 鼠标悬停时,弹出 TRAIT_DESCRIPTIONS 字典中的详细中文解释。 | 标签样式区分 (心理/能力),确保 Tooltip 工作。 |
| 当下心声 | 心识流 (Mind Stream) | 4-5 行文本,第一人称口吻,CoT 推理风格。 | 突出、加粗、拟人化的文案风格。 |
| 历史记录 | 行动简报 (Action Brief) | 单行简洁日志。 格式:`[时间] | [状态变化]: [行为摘要]`。 |
III. 逻辑层与交互实现 (useGameLogic.ts & GameScene.tsx)
1. 拟人化 CoT 推理逻辑 (useGameLogic.ts)
-
心声生成时机: 状态跨层级变化 (P3↔P1, P3↔P2) 和
currentAssignment变化时,强制插入一条新的心声记录。 -
文案风格实现: 确保生成的 Mock 文本符合以下结构:
-
生理感知/动机: (例如:“我的腹部像有团火在烧,体力已经见底。”)
-
仲裁判定: (例如:“根据生存本能,所有生产任务必须暂停。”)
-
最终决策/行动: (例如:“必须立即前往储粮点补充体力。”)
-
2. 选中交互 (GameScene.tsx / WorkerAgent.tsx)
-
选中标记: 当
selectedAgentId匹配时,在 Worker Agent 头顶渲染<Html>组件,显示一个 醒目的金色倒三角 (▼) 指示器,并添加animate-bounce动画。 -
取消选中: 实现点击背景时调用
deselectAgent()逻辑。
Cooper,这份规划包含了我们讨论的所有细节,并确保了最终的实现能够完美符合我们对“AI叙事透明度”和“文明文艺感”的哲学要求。
请审阅这份最终方案。如果你确认无误,请回复:“方案已定,请输出 Prompt 开始 Step 3。”