221 lines
9.3 KiB
Markdown
221 lines
9.3 KiB
Markdown
# 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 |
|