ab1589921a
## 安全修复 (12项) - Webhook接口添加全局Token认证，过滤敏感请求头 - 修复JWT Base64 padding公式，防止签名验证绕过 - 数据库密码/飞书Token从源码移除，改为环境变量 - 工作流引擎添加路径遍历防护 (_resolve_safe_path) - eval()添加模板长度上限检查 - 审批API添加认证依赖 - 前端v-html增强XSS转义，console.log仅开发模式输出 - 500错误不再暴露内部异常详情 ## Agent运行时修复 (7项) - 删除_inject_knowledge_context中未定义db变量的finally块 - 工具执行添加try/except保护，异常不崩溃Agent - LLM重试计入budget计数器 - self_review异常时passed=False - max_iterations截断标记success=False - 工具参数JSON解析失败时记录警告日志 - run()开始时重置_llm_invocations计数器 ## 配置与基础设施 - DEBUG默认False，SQL_ECHO独立配置项 - init_db()补全13个缺失模型导入 - 新增WEBHOOK_AUTH_TOKEN/SQL_ECHO配置项 - 新增.env.example模板文件 ## 前端修复 (12项) - 登录改用URLSearchParams替代FormData - 401拦截器通过Pinia store统一清理状态 - SSE流超时从60s延长至300s - final/error事件时清除streamTimeout - localStorage聊天记录添加24h TTL - safeParseArgCount替代模板中裸JSON.parse - fetchUser 401时同时清除user对象 ## 新增模块 - 知识进化: knowledge_extractor/retriever/tasks - 数字孪生: shadow_executor/comparison模型 - 行为采集: behavior_middleware/collector/fingerprint_engine - 代码审查: code_review_agent/document_review_agent - 反馈学习: feedback_learner - 瓶颈检测/优化引擎/成本估算/需求估算 - 速率限制器 (rate_limiter) - Alembic迁移 015-020 ## 文档 - 商业化落地计划 - 8篇docs文档 (架构/API/部署/开发/贡献等) - Docker Compose生产配置 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
670 lines
28 KiB
Markdown
670 lines
28 KiB
Markdown
# 🎨 天工智能体平台 - 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设计。
|