feat(k8s): M6 编辑器基础设施 + 基本信息 Tab + YAML编辑器

- DeploymentWorkload: 三模式切换(查看/编辑/YAML编辑)+ EditModeContainer Tab 导航系统
- DeploymentEditBasic: 新增基本信息 Tab — replicas/labels/annotations/selector 编辑
- YamlViewer: 升级为 CodeMirror 6(语法高亮+行号+折叠+括号匹配),新增 inline 内联模式
- DeploymentDetailPage: mode 类型扩展为 view|edit|yaml
- 路由 :mode 参数自动支持 yaml 值
- M7-M9 Tab 预留占位(容器信息/存储/高级/服务)
This commit is contained in:
attacker committed 2026-06-23 05:15:42 +08:00
1 parent 2e66908e20
commit 68a954c1c5
9 files changed
+855 -42

No files matched your search

+12 -7
View File
@@ -88,19 +88,24 @@
## 当前冲刺:P1 — Deployment 可视化编辑器(Kuboard 风格)
### M6: 编辑器基础设施 + 基本信息 Tab + YAML编辑器 [pending]
### M6: 编辑器基础设施 + 基本信息 Tab + YAML编辑器 [done]
**目标**: 三模式切换(查看/可视化编辑/YAML编辑)+ 基本信息 Tab
**改动**:
- `DeploymentWorkload.tsx`: 模式切换从 2 tab → 3 tab(查看模式 / 编辑模式 / YAML编辑)
- 新增 `DeploymentEditBasic.tsx`: 基本信息 Tab — name/namespace/labels/annotations/replicas
- `YamlViewer.tsx` 升级: 引入 Monaco Editor(或 CodeMirror),支持 YAML 语法高亮 + 行号 + 基本校验
- 路由扩展: `:mode` 增加 `yaml` 值
- 新增 `DeploymentEditBasic.tsx`: 基本信息 Tab — name/namespace(只读) + replicas/labels/annotations/selector(可编辑)
- `YamlViewer.tsx` 升级: 引入 CodeMirror 6(`@uiw/react-codemirror` + `@codemirror/lang-yaml`),支持 YAML 语法高亮 + 行号 + 折叠 + 括号匹配
- `YamlViewer.tsx` 新增 `inline` 模式 — 非弹窗内联展示,适合 YAML 编辑 Tab
- `DeploymentDetailPage.tsx`: `mode` 类型扩展为 `'view' | 'edit' | 'yaml'`
- `DeploymentWorkload.tsx` 新增 `EditModeContainer` — 编辑模式 Tab 导航(基本信息✅ / 容器信息M7 / 存储M8 / 高级M8 / 服务M9)
- 路由 `:mode` 参数自动支持 `yaml` 值(无需改 App.tsx 路由表)
**验收标准**:
- [ ] 三模式 tab 切换正常,YAML 模式打开 Monaco 编辑器
- [ ] 基本信息 Tab 可编辑 labels/annotations/replicas 并保存
- [ ] YAML 编辑器有语法高亮和行号
- [x] 三模式 tab 切换正常,YAML 模式打开 CodeMirror 编辑器
- [x] 基本信息 Tab 可编辑 labels/annotations/replicas 并保存
- [x] YAML 编辑器有语法高亮和行号
- [x] YAML 编辑器支持内联模式(inline prop)
- [x] 编辑模式 Tab 导航系统就绪(M7-M9 预留占位)
---