Town View.zh CN

🌐 Language: English | 中文

小镇视图

小镇视图(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]。