# 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 页面的完整设计指南。*