aiagent/docs/UI_UX_Design_Document.md

🎨 天工智能体平台 - UI/UX 设计文档

文档版本: v1.0
项目名称: 天工智能体平台 (Tiangong AI Agent Platform)
技术栈: Vue 3 + TypeScript + Element Plus + Vue Flow / FastAPI + Celery
目标用户: AI应用开发者、运维人员、业务管理人员

---

📋 文档目录

1. 设计总览
2. 视觉设计规范
3. 页面结构与路由
4. 页面详细设计
5. 交互流程
6. 组件设计
7. 响应式布局
8. 状态与微交互

---

1. 设计总览

1.1 设计目标

目标	描述
高效	AI Agent 的创建、配置、编排应清晰直观，减少操作步骤
可视	工作流编排、Agent 调用链等抽象流程应可视化呈现
实时	执行状态、对话响应、监控数据需实时反馈给用户
一致	全局 UI 风格统一，交互模式可预测
可扩展	支持插件、工具市场、模板市场等扩展能力

1.2 产品架构图

┌──────────────────────────────────────────────────────────┐
│                    天工智能体平台                          │
├──────────────────────────────────────────────────────────┤
│  ┌─────────┐ ┌──────────┐ ┌──────────┐ ┌────────────┐  │
│  │ 主控台    │ │ 工作流管理 │ │ Agent管理 │ │ 数字员工工厂 │  │
│  │ (模板市场)│ │ (可视化编排)│ │ (能力配置) │ │ (目标驱动)  │  │
│  └─────────┘ └──────────┘ └──────────┘ └────────────┘  │
│  ┌─────────┐ ┌──────────┐ ┌──────────┐ ┌────────────┐  │
│  │ Agent对话 │ │ 执行历史   │ │ 系统监控   │ │ 工具/插件   │  │
│  │ (流式响应)│ │ (状态追踪) │ │ (性能指标) │ │  市场      │  │
│  └─────────┘ └──────────┘ └──────────┘ └────────────┘  │
├──────────────────────────────────────────────────────────┤
│        认证模块 · 权限管理 · 模型配置 · 数据源管理        │
└──────────────────────────────────────────────────────────┘

---

2. 视觉设计规范

2.1 品牌色彩

主色调    ● #409EFF    (Element Plus 品牌蓝)        — 导航、主按钮、链接
辅助色 1  ● #67C23A    (成功/运行绿)                — 运行中、成功状态
辅助色 2  ● #E6A23C    (警告/待处理橙)              — 警告、暂停状态
辅助色 3  ● #F56C6C    (危险/失败红)                — 错误、删除操作
辅助色 4  ● #909399    (中性/禁用灰)                — 禁用、次要信息
渐变      ● #667EEA → #764BA2                     — 登录页背景

2.2 字体规范

层级	字号	字重	使用场景
H1	24px	600	页面大标题
H2	20px	600	区块标题
H3	16px	600	卡片标题
Body	14px	400	正文内容
Small	12px	400	辅助文字、时间戳
Caption	11px	400	标签、元信息

2.3 间距系统

采用 4px 为基底的间距体系：

Token	值	使用场景
space-xs	4px	内联元素间距
space-sm	8px	表单字段间距
space-md	12px	组件内间距
space-lg	16px	卡片内间距、网格间距
space-xl	20px	区块间距、页面边距
space-2xl	24px	大区块间距

2.4 圆角与阴影

圆角: 4px (按钮/输入框) · 8px (卡片/对话框) · 12px (气泡)
阴影: hover 时轻微上移 (translateY(-2px)) + box-shadow 增强
阶梯: Steps 组件使用标准 Element Plus 阶梯样式

---

3. 页面结构与路由

3.1 整体布局

┌──────────────────────────────────────────────┐
│ Header: 平台名称 + 用户信息 + 退出按钮        │
├──────────────────────────────────────────────┤
│ 水平导航菜单 (el-menu mode="horizontal")      │
├──────────────────────────────────────────────┤
│                                              │
│             页面内容区域 (router-view)         │
│                                              │
└──────────────────────────────────────────────┘

3.2 路由列表（共 27 个页面）

路由路径	页面名称	页面类型	说明
/login	登录页	公开	登录 / 注册
/	工作流管理	需认证	工作流列表、搜索、批量操作
/console	主控台	需认证	应用商店、场景模板、一键执行
/execution-board	执行看板	需认证	执行状态概览
/workflow/:id?	工作流设计器	需认证	可视化节点编排
/executions	执行历史	需认证	执行记录列表
/executions/:id	执行详情	需认证	单次执行详细信息
/agents	Agent管理	需认证	Agent CRUD、能力配置
/agents/:id/design	Agent编排设计器	需认证	Agent工作流编排+实时预览
/agents/:id/config	Agent配置	需认证	Agent参数详细配置
/agent-chat	Agent对话	需认证	单Agent/多Agent编排对话
/agent-chat/:id	指定Agent对话	需认证	指定Agent的对话界面
/data-sources	数据源管理	需认证	数据源CRUD
/model-configs	模型配置管理	需认证	LLM模型配置
/template-market	模板市场	需认证	工作流模板浏览
/node-templates	节点模板	需认证	节点模板管理
/tools	工具市场	需认证	工具查看与配置
/plugins	插件市场	需认证	插件浏览与安装
/agent-market	Agent技能商店	需认证	预置Agent技能
/agent-orchestration	Agent协作	需认证	多Agent编排配置
/agent-schedules	定时任务	需认证	Agent定时调度
/digital-employees	数字员工工厂	需认证	目标创建与管理
/goals/:id	目标详情	需认证	目标分解、任务树追踪
/monitoring	系统监控	需认证	系统性能指标
/agent-monitoring	Agent监控看板	需认证	Agent运行指标
/alert-rules	告警规则	需认证	告警配置
/permissions	权限管理	需认证+管理员	用户角色权限

---

4. 页面详细设计

4.1 🔐 登录页 (/login)

设计要点

项	说明
布局	居中卡片布局，背景为蓝色渐变 (#667EEA → #764BA2)
卡片	白色圆角卡片 (.login-card)，宽度 400px
Tabs	登录/注册两个 Tab 切换，默认显示登录
表单	用户名 + 密码（登录）；用户名 + 邮箱 + 密码（注册）
交互	Enter 键提交；登录成功跳转到 /；表单校验（必填、邮箱格式）

线框示意

┌──────────────────────────────────┐
│      🌟 天工智能体平台            │
│  ┌────────────────────────┐      │
│  │  登录  |  注册          │      │
│  │  ─────────────────────  │      │
│  │  用户名: [___________]  │      │
│  │  密码:   [___________]  │      │
│  │                        │      │
│  │  [    登录    ]         │      │
│  └────────────────────────┘      │
└──────────────────────────────────┘

---

4.2 🏠 工作流管理 (/)

设计要点

项	说明
布局	MainLayout 包裹，顶部水平导航菜单
操作栏	"从模板创建"、"导入工作流"、"创建工作流"
筛选栏	搜索框 + 状态筛选 + 排序字段 + 排序方式 + 按钮组
批量操作	选中后显示批量执行、批量导出、批量删除
表格	选择列 + 名称/描述/状态(标签)/创建时间/更新时间/操作列
操作按钮	编辑、版本、导出、执行历史、删除
对话框	模板选择对话框、版本管理对话框、导入对话框、批量执行对话框

交互流程

用户进入首页
  ↓
加载工作流列表 (fetchWorkflows)
  ↓
用户操作:
  ├─ 搜索/筛选 → 重新加载列表
  ├─ 创建工作流 → 跳转 /workflow (设计器)
  ├─ 从模板创建 → 弹出模板选择 → 输入名称 → 创建并跳转
  ├─ 导入工作流 → 上传 JSON → 确认导入 → 跳转设计器
  ├─ 编辑 → 跳转 /workflow/:id
  ├─ 批量操作 → 选中 → 执行/导出/删除
  ├─ 版本管理 → 查看版本列表 → 回滚/查看
  └─ 删除 → 确认对话框 → 删除

---

4.3 🎨 工作流设计器 (/workflow/:id?)

设计要点

项	说明
核心组件	Vue Flow (@vue-flow/core) 可视化画布
头部	标题 + "测试运行" + "发布" + "返回" 按钮
画布	拖拽式节点编辑，支持 Start/End/LLM/Template/Code 等多种节点类型
节点面板	左侧或顶部可拖拽的节点工具箱
Agent模式	左右分栏：左侧编排 + 右侧实时对话预览 (400px)
执行状态	节点边框颜色变化指示执行进度 (绿色=成功, 红色=失败)

节点类型

节点类型	图标色	说明
Start	🟢 绿色	工作流入口节点
End	🔴 红色	工作流出口节点
LLM	🔵 蓝色	大模型调用节点
Template	🟠 橙色	模板节点
Code	🟣 紫色	代码执行节点
Condition	⚪ 灰色	条件分支节点
Tool	🟡 黄色	工具调用节点
Agent	🟢 青色	Agent 子流程节点

---

4.4 🎮 主控台 / 应用商店 (/console)

设计要点

项	说明
页面布局	居中内容区 (max-width: 1200px)
顶部	标题"应用商店" + 副标题 + "浏览模板市场"、"执行历史"按钮
分类 Tabs	全部 / 客服场景 / 研发辅助 / 运维分析 / 学习教育
模板网格	响应式网格 (xs:24 sm:12 md:8 lg:6)
模板卡片	分类标签 + 标题 + 描述(3行截断) + "立即执行"按钮
快捷入口	三个跳转卡片：AI对话 / 我的Agent / 运行看板
执行对话框	任务描述 (必填) + 高级参数 (动态表单) + 一键执行
进度对话框	三步阶梯 (提交→执行中→完成) + 进度条 + 结果展示

交互流程

1. 浏览模板 → 点击卡片 → 弹出执行对话框
2. 填写任务描述 → 调整参数 → 点击"一键执行"
3. 关闭执行对话框 → 打开进度对话框
4. 轮询执行进度 (2s间隔) → 阶梯更新 → 展示结果
5. 可复制/下载结果，或点击"查看详情"跳转执行详情页

---

4.5 🤖 Agent 管理 (/agents)

设计要点

项	说明
操作栏	导入Agent / 从场景模板创建 / 从Prompt模板创建 / 创建Agent
搜索筛选	搜索框 + 状态筛选 + 搜索/刷新按钮
表格	名称 / 描述 / 技能标签 / 状态 / 版本 / 创建时间 / 操作
操作列 (密集)	编辑 / 能力配置 / 使用 / 设计 / 配置 / 复制 / 导出 / 部署/停止 / 删除
创建对话框	名称 + 描述 + 工作流配置提示
能力配置对话框	内置工具勾选 (Checkbox group) + 其他工具标签
场景模板创建	选模板 + 名称 + 描述 + 执行预算参数
Prompt模板创建	两阶段：选模板 → 填写Agent名称/描述

能力配置交互

1. 点击"能力配置" → 加载Agent工作流中的现有工具列表
2. 勾选内置工具 (file_read/file_write/system_info 等)
3. 可删除额外的自定义工具标签
4. 保存 → 自动写入工作流主LLM节点的 tools/selected_tools 字段
5. 刷新列表，技能标签列同步更新

---

4.6 💬 Agent 对话 (/agent-chat)

这是平台最核心、交互最复杂的页面之一。

设计要点

项	说明
模式切换	单Agent / 多Agent编排 (Switch 组件)
Agent选择	下拉选择已部署的Agent
编排模式	辩论 / 路由 / 顺序 / 流水线 四种模式
消息列表	用户消息 (右对齐) / Agent消息 (左对齐)
SSE 流式响应	事件类型: think / tool_call / tool_result / final / error / approval_required
思考链 (Trace)	可展开的逐步推理过程，含迭代次数、工具调用
编排结果	多Agent输出 + 最终回答 + 各Agent展开详情
工具审批	需要人工审批的工具调用弹出确认对话框
输入区	多行文本输入 + 发送按钮 (支持 Enter 发送)

思考链 (Thinking Trace) UI

┌──────────────────────────────────────────┐
│  ▸ 思考链 (3 步)                        │  ← 点击展开
├──────────────────────────────────────────┤
│  ┌────────────────────────────────────┐  │
│  │ 💭 思考  #1                       │  │
│  │ 我正在分析用户的问题...             │  │
│  └────────────────────────────────────┘  │
│  ┌────────────────────────────────────┐  │
│  │ 🔧 工具结果  #2    file_read      │  │
│  │ ┌ 参数 ─────────────────────────┐  │  │
│  │ │ {"path": "README.md"}         │  │  │
│  │ └───────────────────────────────┘  │  │
│  │ ┌ 结果 ─────────────────────────┐  │  │
│  │ │ # Project README...           │  │  │
│  │ └───────────────────────────────┘  │  │
│  └────────────────────────────────────┘  │
│  ┌────────────────────────────────────┐  │
│  │ ✅ 最终回答  #3                   │  │
│  │ 根据分析，建议您...                │  │
│  └────────────────────────────────────┘  │
└──────────────────────────────────────────┘

状态管理

• 消息持久化到 localStorage (key: agent_chat_state)
• 支持不同Agent/Session的消息隔离
• 支持重试失败消息 (找到最后一条用户消息重新发送)
• 支持复制消息内容

---

4.7 🏭 数字员工工厂 (/digital-employees)

设计要点

项	说明
布局	网格卡片布局 (grid, minmax 320px)
页面标题	"数字员工工厂" + 副标题 + "创建目标"按钮
目标卡片	状态标签 / 优先级P标记 / 标题 / 描述 / 进度条 / 截止日期
状态标签	进行中(绿) / 已暂停(橙) / 已完成(蓝) / 失败(红) / 已取消(灰)
创建对话框	标题 + 描述 + 优先级选择 + 截止日期 + Main Agent选择
交互	点击卡片 → 跳转目标详情 (/goals/:id)

---

4.8 📊 执行历史 (/executions) & 执行详情 (/executions/:id)

设计要点

项	说明
执行列表	表格展示：工作流名称 / 状态 / 创建时间 / 耗时 / 操作
状态标签	pending(灰) / running(蓝) / completed(绿) / failed(红)
执行详情	节点级执行状态、输入输出数据、日志查看
实时更新	WebSocket 推送执行状态变化
筛选	按状态、时间范围、工作流筛选

---

4.9 📡 系统监控 (/monitoring) & Agent监控 (/agent-monitoring)

设计要点

项	说明
系统监控	CPU/内存/磁盘使用率图表、API请求量、错误率
Agent监控	每个Agent的执行次数、成功率、平均耗时、工具调用分布
图表类型	折线图（趋势）、柱状图（对比）、饼图（分布）
时间范围	最近1小时/24小时/7天/30天切换

---

4.10 🛠️ 其他管理页面

页面	核心功能
数据源管理	添加/测试/删除 MySQL、PostgreSQL、MongoDB 等数据源连接
模型配置管理	配置 OpenAI、DeepSeek、SiliconFlow、Anthropic 模型参数
工具市场	查看内置工具、自定义工具、工具测试
模板市场	浏览和下载社区工作流模板
节点模板	管理可复用的节点预设
插件市场	浏览和安装第三方插件
Agent技能商店	浏览预置Agent技能配置
权限管理	用户管理、角色配置、权限分配（仅管理员）
告警规则	设置执行失败/超时等告警条件和通知方式
定时任务	配置Agent定时执行计划 (Cron表达式)

---

5. 交互流程

5.1 核心用户旅程

旅程A：新手快速体验

登录 → 主控台 → 选择一个场景模板 → 输入任务描述 → 一键执行 → 查看结果

旅程B：创建工作流

登录 → 工作流管理 → 创建工作流 → 设计器拖拽编排 → 保存 → 执行 → 查看执行历史

旅程C：创建并对话Agent

登录 → Agent管理 → 创建Agent → 设计器配置工作流 → 部署 → 进入对话 → 发送消息 → 查看思考链

旅程D：数字员工目标驱动

登录 → 数字员工工厂 → 创建目标 → Main Agent自动分解任务 → 执行子任务 → 追踪进度

5.2 关键交互细节

加载状态

场景	加载指示器	说明
页面初始化	v-loading 全屏遮罩	路由切换、数据加载
表格加载	v-loading 表格区域	列表数据请求
按钮操作	:loading 按钮状态	提交/保存/执行等操作
SSE流式	动态加载动画 (...)	Agent对话等待响应
轮询进度	进度条 + 阶梯步骤	模板执行进度追踪

错误处理

错误类型	展示方式	用户操作
表单校验	字段下方红色提示	修正输入
API错误	ElMessage.error 顶部提示	根据提示操作
网络错误	ElMessage.error + 控制台日志	检查网络/重试
执行失败	执行详情页红色状态 + 节点错误信息	查看日志/重新执行
超时	对话框提示"执行超时"	检查配置/增加超时时间

空状态

场景	展示内容	引导操作
工作流列表为空	el-empty + 描述	"创建工作流"按钮
Agent列表为空	空表格	"创建Agent"按钮
目标列表为空	el-empty + 描述	"创建第一个目标"按钮
搜索结果为空	空表格	"重置"按钮
对话历史为空	图标 + 引导文字	"选择一个Agent开始对话"

---

6. 组件设计

6.1 公共组件

组件名	文件位置	功能描述
MainLayout	components/MainLayout.vue	全局布局：Header + 水平菜单 + 内容区
WorkflowEditor	components/WorkflowEditor/	Vue Flow 封装的工作流编辑器核心
AgentChatPreview	components/AgentChatPreview.vue	Agent对话预览面板 (设计器右侧)
PromptTemplatePicker	components/PromptTemplatePicker.vue	Prompt模板选择器

6.2 WorkflowEditor 组件设计

┌──────────────────────────────────────────────┐
│  [节点工具箱]                                  │
│  ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│  │ 开始   │ │  LLM   │ │  代码   │ │  结束  │ │
│  └────────┘ └────────┘ └────────┘ └────────┘ │
├──────────────────────────────────────────────┤
│                                              │
│    [Start] ──→ [LLM] ──→ [Code] ──→ [End]    │
│                                              │
│  ┌──────────────────────────────────────┐    │
│  │ 选中节点属性面板                       │    │
│  │ 名称: [________________]             │    │
│  │ 模型: [▼ DeepSeek V4 Flash]         │    │
│  │ 温度: [===●==========] 0.7          │    │
│  │ System Prompt:                       │    │
│  │ [ 你是一个有用的AI助手...     ]       │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

6.3 AgentChatPreview 组件

属性	类型	说明
agent-id	string	Agent ID
agent-name	string	Agent 名称
opening-message	string	开场白
preset-questions	string[]	预设问题列表
node-test-result	any	节点测试结果

---

7. 响应式布局

7.1 断点设计

断点	宽度	适配目标
xs	< 768px	手机端（最小功能集）
sm	≥ 768px	平板
md	≥ 992px	小桌面
lg	≥ 1200px	大桌面（主力）
xl	≥ 1920px	超大屏

7.2 响应式策略

组件	xs	sm	md	lg+
顶部菜单	汉堡菜单	折叠菜单	完整菜单	完整菜单
模板网格	1列	2列	3列	4列
目标卡片	1列	2列	3列	4列
Agent设计器	单栏	单栏	左右分栏	左右分栏
对话界面	全宽	全宽	最大960px	最大960px

7.3 特殊布局

Agent编排设计器 — 左右分栏（仅在 ≥1200px 生效）：

┌───────────────────┬────────────────────┐
│                   │                    │
│   工作流编辑器     │   Agent对话预览    │
│   (flex: 1)       │   (width: 400px)   │
│                   │                    │
└───────────────────┴────────────────────┘

---

8. 状态与微交互

8.1 状态体系

状态类型	视觉表现	示例
loading	旋转图标 / 骨架屏 / 进度条	数据加载、执行中
empty	插画 + 描述文字 + 引导按钮	无数据时
error	红色边框 / 错误图标 + 错误信息	校验失败、请求失败
success	绿色标签 / 成功提示	操作成功、执行完成
disabled	灰色不可点击	按钮禁用状态
hover	轻微上移 + 阴影增强	卡片悬停
active	颜色变化 + 底部指示线	菜单选中
transition	过渡动画 (0.2-0.3s)	页面切换、弹窗

8.2 微交互设计

交互	动画	时长	缓动函数
卡片hover	translateY(-2px) + shadow	0.2s	ease
消息出现	fadeIn + slideUp	0.3s	ease-out
思考链展开	内容 slideDown	0.25s	ease-in-out
步骤切换	内容渐变过渡	0.3s	ease
按钮点击	scale(0.97) 按下效果	0.1s	ease
对话框	fadeIn + scale(0.95→1)	0.25s	ease-out
进度条更新	width 过渡	0.5s	ease
输入框聚焦	边框颜色过渡	0.2s	ease

8.3 思考中动画 (Thinking Dots)

.dot {
  width: 8px; height: 8px;
  background: #909399;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}
.dot:nth-child(2) { animation-delay: 0.16s; }
.dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

---

附录

A. 图标清单

图标名	用途	引入方式
Search	搜索按钮	@element-plus/icons-vue
Document	工作流管理菜单	同上
User / UserFilled	Agent管理/数字员工	同上
ChatLineSquare	Agent对话	同上
Connection	数据源管理	同上
Setting	模型配置管理	同上
Tools	工具市场	同上
Shop	Agent技能商店	同上
Monitor	系统监控	同上
Bell	告警规则	同上
Clock	定时任务	同上
Share	Agent协作	同上
Star	模板市场	同上
Lock	权限管理	同上
Grid	主控台	同上
DataAnalysis	Agent监控	同上
VideoPlay	执行/测试	同上
VideoPause	停止	同上
Plus	创建	同上
Delete	删除	同上
Edit	编辑	同上
CopyDocument	复制	同上
Download	导出	同上
Upload / UploadFilled	导入/上传	同上
Refresh	刷新	同上
DocumentCopy	复制消息	同上
CaretRight	展开/折叠	同上
ChatDotSquare	思考步骤	同上
Select	选择	同上
Promotion	Agent头像	同上

B. 存储键

Key	用途	存储方式
token	JWT认证令牌	localStorage
agent_chat_state	对话历史+状态持久化	localStorage
user	用户信息	Pinia (userStore)

C. API端点前缀

前缀	说明
/api/v1/auth/*	认证相关
/api/v1/workflows/*	工作流CRUD
/api/v1/executions/*	执行管理
/api/v1/agents/*	Agent管理
/api/v1/agent-chat/*	Agent对话 (含SSE流式)
/api/v1/platform/*	平台模板/主控台
/api/v1/tools/*	工具配置
/api/v1/monitoring/*	监控数据
/api/v1/goals/*	目标管理
/api/v1/tasks/*	任务管理
/ws/*	WebSocket实时推送

---

文档结束 — 本设计文档基于项目源码分析编写，涵盖 27+ 个页面的UI/UX设计。