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 切换
|
|||
|
|
|