> 🌐 Language: [English](Town-View) | **中文**

# 小镇视图

小镇视图(Town View)是游戏风格的等距(isometric)可视化,把项目和 agent 展示为小镇:项目=**房子**,每个 agent 会话=住在房子里的**村民**。

## 如何打开

- 侧栏 **⋯** 菜单 → **小镇**
- 顶部栏切换按钮可在小镇和工作台之间切换。

## 视觉设计

| 元素 | 含义 |
|---|---|
| **房子** | 一个项目。按项目名 hash 着色。窗户=agent,亮灯=running,烟囱冒烟=有 agent 运行中。 |
| **村民** | 一个 agent 会话。按引擎着色:Kaios 金(`#e8b339`)、Claude Code 橙(`#d97757`)、Codex 绿(`#10a37f`)。 |
| **状态动画** | `idle`(浮动,闭眼)、`working`(弹跳+气泡)、`error`(抖动+红色叹号)、`done`(星星弹出)。 |

### 风格

小镇视图支持两种视觉风格,在设置中切换(`townStyle`):

| 风格 | 说明 |
|---|---|
| `classic` | 经典等距小屋,低饱和度+多层光影 |
| `minecraft` | 我的世界方块像素风:橡木板/红砖/圆石纹理,村民为 Steve 风格。 |

### 主题装饰

根据当前主题,小镇视图显示不同的背景装饰:

- **SEED 主题**:高达 SEED 风格——机甲格纳库 + 驾驶员 + 通讯卫星
- **Craft 主题**:12 种 Minecraft 实体作为背景装饰
- **其他主题**:干净的等距小镇

## 交互

- **点击村民** → 侧滑面板显示:prompt、工具步骤、输出。可发送新 prompt、停止 agent、跳转完整对话。
- **增量更新**:agent 事件只刷新单个村民——不重建全图。
- **远程节点**:远程 MCP server 节点显示为天空中的云房子。

## 架构

- **零依赖**:纯 SVG + CSS + DOM,无框架。
- **渲染层**:`src/renderer/town.ts` — 构建 SVG 房子、村民、动画。
- **CSS**:`src/renderer/town.css` — 等距布局、动画、面板样式。
- **数据源**:与工作台相同的 `getConversations()`——同一数据两种视图。

## 源文件

| 文件 | 作用 |
|---|---|
| `src/renderer/town.ts` | 小镇视图渲染、村民状态、面板逻辑 |
| `src/renderer/town.css` | 等距布局、动画、面板、遮罩 |
| `src/shared/i18n.ts` | `town.*` 键(19 个键 × 4 语言) |

另见:[[Workbench]](卡片总览)、[[Engines]](引擎颜色)。