# Fischer AgentKit GUI 重构需求文档

**日期：** 2026-06-13
**状态：** Active
**范围：** Deep — Feature

---

## 1. 问题陈述

当前 Fischer AgentKit GUI 处于"功能可用但视觉粗糙"状态，存在以下核心问题：

1. **布局范式落后** — SideNav 多页面布局无法同时展示 Agent 的对话、代码修改、终端执行和预览结果，用户需要频繁切换页面才能理解 Agent 在做什么
2. **设计系统缺失** — 无 Design Token，颜色（`#1677ff`/`#1890ff` 混用）、间距、圆角、字体大小全部硬编码散落在 30+ 组件中
3. **视觉质量低** — 无过渡动画、空状态单调、加载态粗糙、信息层级平铺
4. **响应式完全缺失** — 所有面板宽度固定，小屏幕下内容被严重挤压

竞品（Devin、Cursor、Trae、v0.dev）已普遍采用 Agent-First 全屏布局 + 统一设计系统，Fischer AgentKit 需要对齐这一标准。

## 2. 目标用户

**主要用户：** 使用 Fischer AgentKit 执行自动化任务的开发者和运维工程师。他们提交任务后需要实时观察 Agent 执行过程，并在必要时干预。

**核心场景：** 用户提交一个多步任务（如"部署新版本到测试环境"），Agent 自主执行，用户在四象限界面中实时观察对话推理、代码修改、终端执行和结果预览，随时可以点击干预。

## 3. 设计方向

### 3.1 布局范式：Agent-First 全屏

采用类似 Devin 的四象限布局，Agent 执行过程全屏实时展示：

```
┌──────────────────────────────────────────────────────┐
│  顶部导航栏 (48px) — Logo / 任务选择 / 状态 / 设置    │
├──────────────────────┬───────────────────────────────┤
│                      │                               │
│   对话面板           │   代码/预览面板                │
│   (Chat + Agent      │   (代码 Diff / 文件树 /        │
│    推理过程)          │    工作流画布 / 知识库)         │
│                      │                               │
│                      │                               │
├──────────────────────┼───────────────────────────────┤
│                      │                               │
│   终端面板           │   状态/监控面板                 │
│   (实时终端输出       │   (执行进度 / 节点状态 /        │
│    + 命令确认)        │    指标图表 / 日志)             │
│                      │                               │
└──────────────────────┴───────────────────────────────┘
```

**四象限可独立缩放和折叠**，象限之间的分隔线可拖拽调整比例。

### 3.2 视觉风格：浅色极简

- **主背景：** 白色 / 极浅灰（`#fafafa`）
- **强调色：** 紫黑渐变（类似 v0.dev 的 Vercel 品牌色）
- **代码/终端区域：** 深色背景（One Dark Pro 配色），与浅色主界面形成对比
- **设计语言：** 大量留白、细线条、柔和阴影、圆角 8px
- **字体：** 系统字体栈（UI）+ 等宽字体栈（代码/终端）

### 3.3 交互模式

- **任务提交：** 顶部输入栏或对话面板底部输入
- **实时观察：** 四象限同步更新，WebSocket 推送
- **干预机制：** 每个象限内的操作可暂停/审批/接管
- **模式切换：** 对话模式（Chat-First）↔ 代理模式（Agent-First）一键切换

## 4. 功能需求

### R1: Design Token 体系

建立统一的设计令牌系统，替代当前硬编码散落的样式值。

**完成标准：**
- 创建 `src/styles/tokens.css`，定义所有 Design Token（颜色、间距、圆角、字体、阴影）
- Ant Design Vue 主题通过 ConfigProvider 注入 Token 值
- 所有组件引用 Token 变量，不再硬编码颜色/间距值
- 主色统一为一种（消除 `#1677ff`/`#1890ff` 混用）

### R2: Agent-First 全屏布局

将 SideNav 多页面布局重构为四象限全屏布局。

**完成标准：**
- 顶部导航栏（48px）：Logo、任务选择器、Agent 状态指示、模式切换、设置入口
- 四象限可拖拽调整比例，每个象限可折叠
- 象限内容根据当前任务动态切换（对话/代码/终端/状态）
- 保留 Vue Router，但页面切换变为象限内容切换而非整页跳转
- 侧边导航改为顶部极简导航 + 下拉菜单

### R3: 对话面板重构

将 ChatView 重构为对话面板，作为四象限的左上象限。

**完成标准：**
- 支持 Markdown 渲染（替代当前 `v-html`）
- 流式输出 + 打字机效果
- 工具调用指示器（类似 Claude Code 的 `[Read]`/`[Edit]`/`[Bash]` 彩色标签）
- 上下文胶囊（Context Pills）：显示当前关联的文件、技能
- 对话历史侧栏可折叠

### R4: 代码/预览面板

新增代码 Diff 查看和文件预览能力，作为右上象限。

**完成标准：**
- 代码 Diff 查看器：逐行 diff 高亮，支持 Accept/Reject
- 文件树浏览器：展示 Agent 修改的文件列表
- 工作流画布：当前 FlowCanvas 集成为此象限的一个 Tab
- 知识库管理：当前 KnowledgeBaseView 集成为此象限的一个 Tab
- Tab 切换：代码 / 工作流 / 知识库

### R5: 终端面板重构

将 TerminalView 重构为终端面板，作为左下象限。

**完成标准：**
- 暗色背景终端（One Dark Pro 配色）
- 命令确认弹窗使用 Ant Design Modal（替代当前原生 HTML）
- 命令历史可折叠侧栏
- ANSI 颜色完整支持

### R6: 状态/监控面板

将 EvolutionView 精简后集成为右下象限。

**完成标准：**
- 进化面板从 6 个精简为 2-3 个核心面板：概览+指标、经验+坑点、用量
- 执行进度条：顶部显示当前任务完成度估算
- 节点状态动画：运行中节点脉冲动画
- 技能卡片网格：当前 SkillsView 集成为此象限的一个 Tab
- 设置页：当前 SettingsView 集成为此象限的一个 Tab（分组化）
- Tab 切换：监控 / 技能 / 设置

### R7: 工作流单页化

将工作流列表和编辑合并为单页 Tab 切换。

**完成标准：**
- 列表和编辑在同一象限内通过 Tab 切换，无需整页跳转
- 编辑模式：NodePalette + FlowCanvas + PropertyPanel 保留
- 执行历史面板可折叠

### R8: 设置分组化

将设置页从平铺长表单拆分为 Tab 分组。

**完成标准：**
- 4 个分组 Tab：LLM 配置、技能管理、知识库设置、系统设置
- 每组最大宽度 600px，居中布局
- 保存按钮每组独立

### R9: 过渡动画与微交互

为所有交互添加过渡动画。

**完成标准：**
- 象限折叠/展开：平滑过渡（200ms ease）
- Tab 切换：淡入淡出（150ms）
- 列表项加载：交错渐入（stagger 50ms）
- 空状态：品牌化插图 + 引导文案
- 加载态：骨架屏替代 `<a-spin>`

### R10: 响应式断点

支持 1280px+ 桌面端断点。

**完成标准：**
- ≥1440px：四象限完整展示
- 1280-1440px：右下象限自动折叠为 Tab 栏
- <1280px：显示提示"请使用更大屏幕"
- 象限比例记忆：localStorage 保存用户调整的比例

## 5. 范围边界

### 在范围内
- Design Token 体系建立
- 四象限全屏布局重构
- 所有现有功能的迁移（对话、工作流、知识库、技能、终端、进化、设置）
- 浅色极简视觉风格实现
- 过渡动画和微交互
- 1280px+ 响应式断点

### 延迟到后续迭代
- 暗色模式（需 Design Token 暗色变体）
- 移动端适配
- Computer Use 功能实现（保留路由，显示"即将推出"）
- Cmd+K 内联编辑（类似 Cursor）
- @-mention 上下文引用
- 代码 Diff 的 Accept/Reject 实际回滚功能

### 不在本产品身份内
- 多用户协作/实时协同编辑
- 插件市场
- 代码编辑器（只读预览，不提供编辑能力）

## 6. 成功标准

1. **视觉一致性** — 零硬编码颜色值，所有样式通过 Design Token 引用
2. **信息密度** — 四象限同时展示 Agent 全部活动，无需切换页面
3. **交互流畅度** — 所有过渡动画 ≤200ms，无卡顿
4. **响应式** — 1280px+ 屏幕正常使用，象限比例可调
5. **渐进式交付** — 分 2-3 个迭代完成，每个迭代可独立部署

## 7. 依赖与假设

- **假设** Vue Flow 和 ECharts 可在象限内正常渲染（需验证尺寸变化时的 resize）
- **假设** Ant Design Vue 4.x 的 ConfigProvider 主题注入满足 Design Token 需求
- **依赖** 后端 WebSocket 推送已就绪（上一轮已实现）
- **依赖** 后端 API 路径不变，前端仅重构 UI 层

## 8. 竞品参考

| 参考工具 | 借鉴要素 |
|----------|----------|
| Devin | 四象限布局、Action Timeline、Intervention Button |
| v0.dev | 浅色极简风格、紫黑渐变强调色、Preview-First |
| Cursor | Cmd+K 交互理念（后续迭代）、Chat Panel 设计 |
| Claude Code | Tool Use Indicators、Permission Prompts |
| Trae Solo | Chat-First 全屏布局、Agent Mode Toggle |
