WIN-JHFT4D3SIVT\caoxiaozhu
21c869db62
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
83 lines
2.2 KiB
Markdown
83 lines
2.2 KiB
Markdown
# WR-1 页面骨架与 FIXED 模式
|
||
|
||
## 目标
|
||
|
||
把当前 `frontend/src/pages/war-room/index.vue` 从静态单文件样机收敛成可扩展页面骨架，并完成 FIXED 模式的真实结构化落地。
|
||
|
||
## 范围
|
||
|
||
1. 页面组件化拆分。
|
||
2. 状态从本地散落常量迁移到 composable 或 store。
|
||
3. 统一模式定义，只保留 `fixed / studio / teams`。
|
||
4. FIXED 模式完成模板浏览、选中、详情展示和“实例化到编排”入口。
|
||
5. 清理乱码文案。
|
||
|
||
## 具体任务
|
||
|
||
### 1. 拆页面骨架
|
||
|
||
建议拆分：
|
||
- `index.vue` 只保留页面装配
|
||
- `ModeStrip.vue`
|
||
- `ResourceBay.vue`
|
||
- `InspectorBay.vue`
|
||
- `RuntimeStrip.vue`
|
||
- `StageFixed.vue`
|
||
|
||
### 2. 抽页面状态
|
||
|
||
新增 `useWarRoomPage.ts`，集中管理：
|
||
- `activeMode`
|
||
- `selectedResourceId`
|
||
- `selectedEntity`
|
||
- `templateList`
|
||
- `runtimeFeed`
|
||
- 页面级动作方法
|
||
|
||
### 3. FIXED 模式最小闭环
|
||
|
||
FIXED 要先支持：
|
||
1. 展示模板列表
|
||
2. 点击模板卡片后 Inspector 更新
|
||
3. `OPEN` 打开详情态
|
||
4. `INSTANTIATE` 将模板转成一份本地 orchestration 草稿
|
||
|
||
### 4. 样式收敛
|
||
|
||
1. 保留现有视觉方向，不做大规模重设计。
|
||
2. 把 stage 内部样式拆到子组件可维护范围。
|
||
3. 校正文案乱码，统一中英文策略。
|
||
|
||
## 建议文件变更
|
||
|
||
### Frontend
|
||
|
||
- 新增 `frontend/src/pages/war-room/composables/useWarRoomPage.ts`
|
||
- 新增 `frontend/src/pages/war-room/components/ModeStrip.vue`
|
||
- 新增 `frontend/src/pages/war-room/components/ResourceBay.vue`
|
||
- 新增 `frontend/src/pages/war-room/components/InspectorBay.vue`
|
||
- 新增 `frontend/src/pages/war-room/components/RuntimeStrip.vue`
|
||
- 新增 `frontend/src/pages/war-room/components/stage-fixed/StageFixed.vue`
|
||
- 视情况新增 `frontend/src/pages/war-room/types.ts`
|
||
- 重写 `frontend/src/pages/war-room/index.vue`
|
||
|
||
## 验收标准
|
||
|
||
1. `war-room` 页面不再依赖单个超大 SFC。
|
||
2. 页面模式与 spec 对齐，没有额外 `RUNS` 一级模式。
|
||
3. 选中 FIXED 卡片时，Inspector 正确更新。
|
||
4. `INSTANTIATE` 能产生本地 orchestration 草稿状态。
|
||
5. 页面中文文案不再乱码。
|
||
|
||
## 验证建议
|
||
|
||
1. 前端单测：
|
||
- 模式切换
|
||
- FIXED 卡片选中
|
||
- instantiate 行为
|
||
2. 页面手测：
|
||
- `/war-room`
|
||
- 窄屏布局
|
||
- Inspector 切换
|
||
|