文件创建人： 北辰 (AI 设计搭档)
目标周期： 1-2 天 (Focus on Core Loop Validation)
核心技术栈： Next.js / React Three Fiber (R3F) / Tailwind CSS / Claude 3.5 Sonnet
1. 核心目标与哲学 (The Goal & Philosophy)
核心验证： 验证 Low-Poly 视觉风格在 Web 3D 中的表现力，以及**“具身领袖近场沟通”**的核心交互流畅性。
开发原则：
-
MOCK AI 优先： (核心原则不变) 暂不接入真实 LLM API，指令执行逻辑全部在前端代码中模拟 (Mock) 完成。
-
视觉至上： 重点投入在光影和色彩上，确保画面具有“高级手办感”。
-
影响力优先： 交互模式为 “靠近 → 说话 → 影响”，彻底废弃“点击选择”的操作模式。
2. 视觉目标 (Visual Target: Stylized Low-Poly)
我们旨在实现风格化 Low-Poly 的高级感，而非简陋的方块堆砌。
| 元素 | 材质 / 特点 |
| 视角 | 45 度等轴测俯视 (Isometric)，通过正交相机 (OrthographicCamera) 实现。 |
| 光影 | 必须配置 <directionalLight> 投射柔和阴影 (Soft Shadows)，让物体具有立体感。 |
| 地面 | 浅绿色/棕色大平面，具有接收阴影属性。 |
| 植被/资源 | 几何体拼凑：树 = 棕色圆柱 (Cylinder) + 绿色圆锥 (Cone)。 |
| UI | 采用 Glassmorphism（玻璃拟态）+ 清晰几何风格。 |
3. 功能清单 (Feature Breakdown)
| 阶段 | 模块 | 详细功能描述 | 依赖技术 |
| A. 启动仪式 | 登录/加载 | 实现 gameStarted 状态切换。启动页使用 ‘刻下文明的代号’ 输入框和 ‘执行启动协议’ 按钮。 | useState, Tailwind CSS |
| B. 场景构建 | 游戏地图 | 80x80 宏大网格。配置正交相机和暖色调光影。 | R3F, @react-three/drei |
| C. 世界填充 | 资源点 | 核心区 20x20 生成树木/石头。外围生成山脉/水体占位符。 | R3F, Math.random |
| D. 角色与移动 | 玩家化身 | 1 个白色几何人偶 (执政官)。实现 WASD 平滑移动。 | R3F, Keyboard Controls |
| E. 智能体 (NPC) | 智能体化身 | 1 个土黄色几何人偶 (德米特里)。拥有头顶状态气泡。实现随机漫步和近场感知逻辑。 | R3F, <Html>, Distance Check |
| F. 核心循环 | 近场沟通 | 交互逻辑：玩家移动到 NPC 3米内 → NPC 气泡显示👂 → 玩家在底部输入指令 → NPC 气泡显示🧠 → 执行 Mock 动作 (🪓)。 | Raycasting, Proximity Check |
| G. UI 界面 | 双层 UI | 1. 对话面板 (常驻底部): 显示玩家和 NPC 的对话历史。 2. 系统日志 (右侧): 双态设计 (Mini/Expanded)，显示资源获取等系统事件。 | Tailwind, Shadcn UI |
4. 执行步骤拆解 (4-Step Prompt Flow)
我们将按以下顺序逐一生成代码：
阶段 1：舞台搭建 (Canvas & Lighting Setup)
-
Prompt 目标： 建立 R3F 画布、配置相机、暖色灯光和阴影。
-
代码目标：
app/page.tsx引入<Canvas>，设置shadows，配置OrthographicCamera。
阶段 2：世界生成 (Grid & Resources)
-
Prompt 目标： 实现 80x80 地图网格。拆分
ResourceTile组件。生成核心区森林和外围山水。 -
代码目标：
/components/World/ResourceTile.tsx,/components/Game/GameScene.tsx。
阶段 3：角色与移动 (Player & Movement)
-
Prompt 目标： 创造
PlayerLeader(WASD控制) 和WorkerAgent(随机漫步)。 -
代码目标：
/components/Character/PlayerLeader.tsx,/components/Character/WorkerAgent.tsx。
阶段 4：UI与模拟 (UI & Mock Command) [重点更新]
-
Prompt 目标：
-
实现近场感知逻辑 (Proximity Check)。
-
实现对话面板和双态系统日志。
-
实现 Mock AI 行为链：听到指令 → 思考 → 砍树 → 产出资源。
-
-
代码目标：
/components/Game/GameUI.tsx, 整合逻辑到GameScene.tsx。
当前进度： 阶段 1, 2, 3 已完成 (需确认是否需要微调)。
下一步： 执行 阶段 4。