# WR-2 STUDIO 模式基础能力

## 目标

把 STUDIO 从静态示意画布升级为“可编辑的最小编排画布”。

## 范围

1. NodePalette 节点面板
2. FlowCanvas 本地状态
3. 节点选中、拖拽、删除
4. SVG 连线
5. Inspector 与节点配置联动

## 具体任务

### 1. 节点模型落地

建立前端类型：
- `FlowNode`
- `FlowEdge`
- `FlowHandle`
- `OrchestrationDraft`

补充最小字段：
- `id`
- `type`
- `label`
- `role`
- `position`
- `config`
- `status`

### 2. NodePalette

按 spec 至少支持：
- Trigger
- Agent
- Tool
- Condition
- Memory

第一版可先做“点击添加到画布”，第二版再补完整拖拽源体验。

### 3. 画布交互

最小要求：
1. 新增节点
2. 选择节点
3. 移动节点
4. 删除节点
5. 建立连接
6. 画布缩放和平移

### 4. Inspector 联动

选中节点后展示：
- 节点类型
- 角色/标签
- 配置摘要
- 删除/复制/断开操作

### 5. FIXED 到 STUDIO 的桥接

WR-1 里 `INSTANTIATE` 生成的草稿，必须能在 STUDIO 中打开并编辑。

## 建议文件变更

### Frontend

- 新增 `frontend/src/pages/war-room/components/stage-studio/StageStudio.vue`
- 新增 `frontend/src/pages/war-room/components/stage-studio/NodePalette.vue`
- 新增 `frontend/src/pages/war-room/components/stage-studio/FlowCanvas.vue`
- 新增 `frontend/src/pages/war-room/components/stage-studio/StudioNode.vue`
- 新增 `frontend/src/pages/war-room/components/stage-studio/FlowEdges.vue`
- 扩展 `useWarRoomPage.ts`

## 验收标准

1. STUDIO 中至少能完成一个最小链路：
   - Trigger -> Agent -> Condition -> Output
2. Inspector 会随着选中节点切换。
3. 删除节点后相关连线同步清理。
4. 从 FIXED 实例化进入 STUDIO 不丢节点数据。

## 风险与约束

1. 默认不引入新依赖，画布能力优先原生实现。
2. 若原生方案复杂度失控，再单独评估依赖引入，不在本阶段默认实施。

## 验证建议

1. 交互测试：
   - 节点新增
   - 节点删除
   - 连线创建
   - Inspector 更新
2. 手测：
   - 缩放和平移
   - 复杂布局下的线条表现