fischer
/
fischer-agentkit
1
0
Fork 0
Code Issues Pull Requests Actions 87 Packages Projects Releases Wiki Activity
fischer-agentkit/docs/brainstorms/2026-06-13-gui-redesign-req...

9.3 KiB
Raw Permalink Blame History

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