WIN-JHFT4D3SIVT\caoxiaozhu
21c869db62
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
373 lines
10 KiB
Markdown
373 lines
10 KiB
Markdown
# War Room 智能体控制中心 - 设计规范
|
||
|
||
> 日期：2026-04-09
|
||
> 状态：已批准
|
||
|
||
## 1. 概述
|
||
|
||
### 1.1 页面定位
|
||
**智能体控制中心** - JARVIS 的全局智能体管理界面，一目了然展示所有智能体，支持快速创建、编排、群组协作。
|
||
|
||
### 1.2 核心价值
|
||
- **可视化** - 所有智能体和流程一目了然
|
||
- **可编排** - 拖拽创建智能体工作流
|
||
- **可协作** - 多智能体群组分工配合
|
||
- **可扩展** - 用户可自定义节点和智能体
|
||
|
||
### 1.3 与 /agents 关系
|
||
- `/agents` 是**单会话级别**的智能体视图（当前会话的 Agent 拓扑）
|
||
- `/war-room` 是**全局级别**的智能体控制中心（全部 Agent 模板和编排）
|
||
- 两者风格统一，war-room 可跳转去 /agents 编辑特定智能体
|
||
|
||
---
|
||
|
||
## 2. 技术栈
|
||
|
||
- **框架**：Vue 3 + TypeScript
|
||
- **状态管理**：Pinia
|
||
- **UI 库**：Element Plus + Lucide Icons
|
||
- **动画**：Vue Motion
|
||
- **样式**：Scoped CSS + CSS Variables
|
||
|
||
---
|
||
|
||
## 3. 布局结构
|
||
|
||
### 3.1 整体布局（三栏式）
|
||
```
|
||
┌──────────────────────────────────────────────────────────────┐
|
||
│ WAR ROOM - 智能体控制中心 [+ 新建] [▶ 运行]│
|
||
├────────────┬───────────────────────────────┬─────────────────┤
|
||
│ │ │ │
|
||
│ 资源面板 │ 画布区域 │ 详情面板 │
|
||
│ MODES │ │ INSPECTOR │
|
||
│ │ [根据模式切换视图] │ │
|
||
│ • 固定模板 │ │ [选中项详情] │
|
||
│ • 编排画布 │ │ │
|
||
│ • 群组协作 │ │ [操作按钮] │
|
||
│ │ │ │
|
||
├────────────┴───────────────────────────────┴─────────────────┤
|
||
│ RUNTIME FEED - 实时状态滚动 │
|
||
└──────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.2 顶部栏（Top Bar）
|
||
- 标题：WAR ROOM - 智能体控制中心
|
||
- 右侧按钮：
|
||
- `+ 新建` - 新建智能体/编排/群组
|
||
- `▶ 运行` - 启动当前编排（跳转到 /chat 执行）
|
||
|
||
### 3.3 左侧资源面板（Resource Bay）
|
||
- **模式切换**：FIXED | STUDIO | TEAMS
|
||
- **快速创建**：
|
||
- CREATE AGENT
|
||
- CREATE FLOW
|
||
- CREATE TEAM
|
||
- **资源列表**（根据模式动态切换）
|
||
|
||
### 3.4 中央画布（Command Stage）
|
||
根据活跃模式显示不同内容
|
||
|
||
### 3.5 右侧详情面板（Inspector Bay）
|
||
显示选中项详情和操作按钮
|
||
|
||
### 3.6 底部运行时面板（Runtime Strip）
|
||
实时事件滚动
|
||
|
||
---
|
||
|
||
## 4. 模式详细设计
|
||
|
||
### 4.1 FIXED 模式 - 固定智能体模板
|
||
|
||
#### 4.1.1 模板矩阵（2x2 卡片网格）
|
||
| 类型 | 图标 | 颜色 | 描述 |
|
||
|------|------|------|------|
|
||
| 时间管理 | CalendarClock | cyan | 读取日历、任务与提醒，输出全天日程 |
|
||
| 知识管理 | Brain | amber | 聚合知识库、上下文，生成检索与摘要 |
|
||
| 记账财务 | ReceiptText | green | 记录账目、消费分类、生成日报月报 |
|
||
| 任务分发 | CircuitBoard | violet | 待办路由到 Planner/Executor/Researcher |
|
||
|
||
#### 4.1.2 每个卡片内容
|
||
- **Kicker**：类型标签（TIME / MEMORY / FINANCE / COMMAND）
|
||
- **标题**：智能体名称
|
||
- **摘要**：功能描述
|
||
- **统计**：Agent数量 / 工具数量 / 特性标签
|
||
- **操作**：OPEN（查看详情）| INSTANTIATE（添加到编排画布）
|
||
|
||
#### 4.1.3 流程示意 Lane
|
||
固定模板下方显示流程链：
|
||
```
|
||
TEMPLATE CORE → PLANNER → KNOWLEDGE → HUMAN GATE → OUTPUT
|
||
```
|
||
|
||
### 4.2 STUDIO 模式 - 拖拽编排画布
|
||
|
||
#### 4.2.1 节点类型
|
||
| 类型 | 说明 | 颜色 |
|
||
|------|------|------|
|
||
| Trigger | 触发器（定时/手动/文件）| cyan |
|
||
| Agent | 智能体节点 | amber |
|
||
| Tool | 工具节点 | green |
|
||
| Condition | 条件分支 | violet |
|
||
| Memory | 记忆节点 | cyan |
|
||
|
||
#### 4.2.2 节点面板（左侧，可折叠）
|
||
```
|
||
├── TRIGGERS
|
||
│ ├── ⏰ 定时触发
|
||
│ ├── 🎯 手动触发
|
||
│ └── 📁 文件触发
|
||
├── AGENTS
|
||
│ ├── 🤖 预置智能体（从固定模板加载）
|
||
│ └── ➕ 自定义智能体
|
||
├── TOOLS
|
||
│ ├── 📅 日历工具
|
||
│ ├── 💰 记账工具
|
||
│ └── 📚 知识库工具
|
||
├── CONDITIONS
|
||
│ ├── 🔀 条件分支
|
||
│ └── ⏳ 延时节点
|
||
└── MEMORY
|
||
├── 🧠 共享记忆
|
||
└── 📝 上下文
|
||
```
|
||
|
||
#### 4.2.3 画布交互
|
||
- **拖拽**：从面板拖拽节点到画布
|
||
- **连接**：点击节点边缘锚点，拖拽到另一节点建立连线
|
||
- **选择**：点击节点打开右侧 Inspector
|
||
- **删除**：选中节点按 Delete 或右键菜单
|
||
- **缩放**：滚轮缩放画布
|
||
- **平移**：空白区域拖拽平移
|
||
|
||
#### 4.2.4 节点样式（沿用 /agents 风格）
|
||
- 四角装饰线
|
||
- 状态指示灯（active/idle/disabled）
|
||
- 节点标签、名称、角色
|
||
- 描述文字
|
||
- 任务标签（当前执行中任务）
|
||
|
||
#### 4.2.5 SVG 连接线
|
||
- 贝塞尔曲线连接
|
||
- 虚线流动动画
|
||
- 高亮激活状态
|
||
|
||
### 4.3 TEAMS 模式 - 多智能体群组
|
||
|
||
#### 4.3.1 群组卡片
|
||
每个群组显示：
|
||
- **群组名称**：如 OPS-ALPHA、LEDGER-NET
|
||
- **协作协议**：Leader-led / Pipeline / Roundtable
|
||
- **成员数**：N members
|
||
- **专注领域**：时间与任务编排 / 账目录入与日报 / 知识聚合与检索
|
||
|
||
#### 4.3.2 成员拓扑图
|
||
群组卡片内显示成员节点网络：
|
||
```
|
||
LEADER
|
||
/ \
|
||
AGENT AGENT
|
||
\ /
|
||
GATE(人机确认)
|
||
```
|
||
|
||
#### 4.3.3 协作协议
|
||
| 协议 | 说明 |
|
||
|------|------|
|
||
| Leader-led | 一个领导 Agent 协调，其他执行 |
|
||
| Pipeline | 按顺序处理，上游输出下游输入 |
|
||
| Roundtable | 平等协作，投票或共识决策 |
|
||
|
||
---
|
||
|
||
## 5. 组件清单
|
||
|
||
### 5.1 WarRoomPage（主页面）
|
||
- 整体布局管理
|
||
- 模式状态
|
||
- 主题样式（沿用 /agents 科幻风格）
|
||
|
||
### 5.2 ModeStrip（模式切换条）
|
||
- 三个模式按钮：FIXED | STUDIO | TEAMS
|
||
- 当前模式高亮
|
||
|
||
### 5.3 ResourceBay（资源面板）
|
||
- 快速创建按钮组
|
||
- 资源列表（动态）
|
||
- 底部统计
|
||
|
||
### 5.4 CommandStage（中央画布）
|
||
- 动态组件切换
|
||
- StageFixed / StageStudio / StageTeams
|
||
|
||
### 5.5 StageFixed（固定模板视图）
|
||
- OpsGrid（2x2 卡片网格）
|
||
- OpsLane（流程示意）
|
||
|
||
### 5.6 StageStudio（编排画布）
|
||
- NodePalette（节点面板）
|
||
- FlowCanvas（拖拽画布）
|
||
- StudioNodes（节点组件）
|
||
- SVG 连接线
|
||
|
||
### 5.7 StageTeams（群组视图）
|
||
- TeamsGrid（群组卡片网格）
|
||
- TeamNetwork（群组拓扑）
|
||
|
||
### 5.8 InspectorBay（详情面板）
|
||
- 动态详情显示
|
||
- 操作按钮组
|
||
|
||
### 5.9 RuntimeStrip（运行时面板）
|
||
- 事件滚动列表
|
||
|
||
---
|
||
|
||
## 6. 数据结构
|
||
|
||
### 6.1 智能体模板
|
||
```typescript
|
||
interface AgentTemplate {
|
||
id: string
|
||
name: string
|
||
type: 'schedule' | 'knowledge' | 'bookkeeping' | 'dispatch'
|
||
kicker: string
|
||
icon: string
|
||
tone: 'cyan' | 'amber' | 'green' | 'violet'
|
||
summary: string
|
||
stats: string[]
|
||
flow: string[] // 流程节点
|
||
}
|
||
```
|
||
|
||
### 6.2 编排节点
|
||
```typescript
|
||
interface FlowNode {
|
||
id: string
|
||
type: 'trigger' | 'agent' | 'tool' | 'condition' | 'memory'
|
||
label: string
|
||
role: string
|
||
position: { x: number, y: number }
|
||
config: Record<string, any>
|
||
}
|
||
```
|
||
|
||
### 6.3 连接线
|
||
```typescript
|
||
interface FlowEdge {
|
||
id: string
|
||
source: string
|
||
target: string
|
||
sourceHandle?: string
|
||
targetHandle?: string
|
||
}
|
||
```
|
||
|
||
### 6.4 群组
|
||
```typescript
|
||
interface Team {
|
||
id: string
|
||
name: string
|
||
protocol: 'leader-led' | 'pipeline' | 'roundtable'
|
||
members: TeamMember[]
|
||
focus: string
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 7. 样式规范
|
||
|
||
### 7.1 色彩系统（沿用 /agents）
|
||
```css
|
||
--accent-cyan: #00f5d4;
|
||
--accent-amber: #f9a825;
|
||
--accent-green: #00c853;
|
||
--accent-violet: #be9fff;
|
||
--bg-void: #050810;
|
||
--bg-card: #0d1525;
|
||
--border-mid: rgba(0, 245, 212, 0.15);
|
||
--text-primary: #e8ffff;
|
||
--text-secondary: #8fe4ff;
|
||
--text-dim: #4a6670;
|
||
```
|
||
|
||
### 7.2 字体
|
||
```css
|
||
--font-display: 'Orbitron', monospace;
|
||
--font-mono: 'JetBrains Mono', 'Share Tech Mono', monospace;
|
||
```
|
||
|
||
### 7.3 节点样式
|
||
- 四角装饰线（10px 角落）
|
||
- 状态环动画（active 时脉冲）
|
||
- 悬浮高亮效果
|
||
- 选中态边框发光
|
||
|
||
### 7.4 背景效果
|
||
- 网格背景（40px 间隔）
|
||
- 扫描线效果
|
||
- 粒子漂浮动画
|
||
|
||
---
|
||
|
||
## 8. API 接口
|
||
|
||
### 8.1 智能体模板
|
||
- `GET /api/agents/templates` - 获取预置模板列表
|
||
- `GET /api/agents/templates/:id` - 获取模板详情
|
||
|
||
### 8.2 编排
|
||
- `GET /api/orchestrations` - 获取编排列表
|
||
- `POST /api/orchestrations` - 创建编排
|
||
- `PUT /api/orchestrations/:id` - 更新编排
|
||
- `DELETE /api/orchestrations/:id` - 删除编排
|
||
|
||
### 8.3 群组
|
||
- `GET /api/teams` - 获取群组列表
|
||
- `POST /api/teams` - 创建群组
|
||
- `PUT /api/teams/:id` - 更新群组
|
||
- `DELETE /api/teams/:id` - 删除群组
|
||
|
||
---
|
||
|
||
## 9. 实现优先级
|
||
|
||
### Phase 1 - 基础框架
|
||
1. WarRoomPage 主布局
|
||
2. ModeStrip 模式切换
|
||
3. ResourceBay 资源面板（基础）
|
||
4. RuntimeStrip 运行时面板（基础）
|
||
|
||
### Phase 2 - FIXED 模式
|
||
5. StageFixed 固定模板视图
|
||
6. OpsGrid 卡片组件
|
||
7. InspectorBay 详情面板
|
||
8. 模板数据 + API 集成
|
||
|
||
### Phase 3 - STUDIO 模式
|
||
9. NodePalette 节点面板
|
||
10. FlowCanvas 拖拽画布
|
||
11. SVG 连接线
|
||
12. 节点配置抽屉
|
||
13. 编排 API 集成
|
||
|
||
### Phase 4 - TEAMS 模式
|
||
14. StageTeams 群组视图
|
||
15. TeamCard 群组卡片
|
||
16. 群组 API 集成
|
||
|
||
---
|
||
|
||
## 10. 待确认事项
|
||
|
||
- [ ] 节点面板的具体节点列表
|
||
- [ ] 智能体模板的详细配置项
|
||
- [ ] 群组成员的角色定义
|
||
- [ ] 编排的执行逻辑（如何传递给 /chat 执行）
|
||
|
||
---
|
||
|
||
*本设计规范为 JARVIS War Room 页面的完整设计指南。*
|