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

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

---

## 📋 文档目录

1. [设计总览](#1-设计总览)
2. [视觉设计规范](#2-视觉设计规范)
3. [页面结构与路由](#3-页面结构与路由)
4. [页面详细设计](#4-页面详细设计)
5. [交互流程](#5-交互流程)
6. [组件设计](#6-组件设计)
7. [响应式布局](#7-响应式布局)
8. [状态与微交互](#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)

```css
.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设计。