refactor(quality): Q6 前端巨型组件拆分 — ResourceVisualEditor 882L→282L (-68%), 提取 5 个独立资源编辑器文件
将 ResourceVisualEditor.tsx (882L, 项目最大前端组件) 中的 5 个内联资源编辑器 提取为 resource-visual-editors/ 子目录下的独立文件: - ConfigMapEditor.tsx (95L) — ConfigMap 键值对表格 - SecretEditor.tsx (114L) — Secret Base64 编解码 - ServiceEditor.tsx (155L) — Service 端口/类型/选择器 - IngressEditor.tsx (215L) — Ingress Host/Path 路由规则 - PvcEditor.tsx (90L) — PVC 存储配置 主文件仅保留加载/保存逻辑 + YAML/可视化切换 + 资源类型分发。 清理 11 个 unused import。零逻辑变更,纯机械提取。 验证: tsc -b=0, npm build✓ (16.11s), ESLint errors=0, 17/17 测试通过
This commit is contained in:
1 parent
5d4a99b8a9
commit
892cb85676
8 files changed
+711
-607
No files matched your search
+35
@@ -477,6 +477,7 @@ services/api.ts (1324L)
|
||||
| Q4+ | 后端错误处理治理扩展(Q5: RDP/API Token/AIOps 模块 `_ =` DB 写入) | P0 | **done** |
|
||||
| U13 | 主机监控大屏挂载(HostMonitorDashboard 死代码复活) | P3 | **done** |
|
||||
| U14 | ESLint 冗余 disable 指令清理(unused eslint-disable 6→0) | P3 | **done** |
|
||||
| Q6 | 前端巨型组件拆分(ResourceVisualEditor 882L→282L,提取 5 个独立编辑器) | P0 | **done** |
|
||||
|
||||
---
|
||||
|
||||
@@ -610,3 +611,37 @@ pending → in_progress → done / blocked
|
||||
- [x] `npm run build` 零错误(✓ built in 16.93s)
|
||||
- [x] 17/17 集成回归测试通过(零回归)
|
||||
- [x] Docker 部署 healthy(改动不影响运行时)
|
||||
|
||||
---
|
||||
|
||||
## Q6: 前端巨型组件拆分 — ResourceVisualEditor [done]
|
||||
|
||||
**问题**: `ResourceVisualEditor.tsx`(882 行)是项目最大的前端组件,包含 5 个内联资源编辑器(ConfigMap/Secret/Service/Ingress/PVC),是 PROJECT_EVALUATION.md 3.1 🔴 高优先级技术债"25 个 ≥500 行巨型组件"中最大的一个。单文件过大导致维护困难、代码导航低效。
|
||||
|
||||
**已完成 (2026-07-06)**:
|
||||
|
||||
将 5 个内联资源编辑器提取为 `resource-visual-editors/` 子目录下的独立文件:
|
||||
|
||||
| 新文件 | 行数 | 职责 |
|
||||
|--------|------|------|
|
||||
| `ConfigMapEditor.tsx` | 95 | ConfigMap 键值对表格编辑器 |
|
||||
| `SecretEditor.tsx` | 114 | Secret 键值对表格 (Base64 编码/解码) |
|
||||
| `ServiceEditor.tsx` | 155 | Service 端口/类型/选择器编辑器 |
|
||||
| `IngressEditor.tsx` | 215 | Ingress Host/Path 路由规则编辑器 |
|
||||
| `PvcEditor.tsx` | 90 | PVC 存储大小/访问模式/StorageClass 编辑器 |
|
||||
|
||||
主文件 `ResourceVisualEditor.tsx` 从 **882 行降至 282 行**(-68%),仅保留:加载/保存逻辑、YAML/可视化模式切换、资源类型分发(dispatch)。
|
||||
|
||||
**提取原则**: 每个子编辑器是自包含的函数组件,接收 `{manifest, onSave, saving, isCreate}` props(IngressEditor 额外接收 `clusterCode`),无共享状态。提取为纯机械操作(移动函数 + 添加 import/export),零逻辑变更。
|
||||
|
||||
**验收标准**:
|
||||
- [x] ResourceVisualEditor.tsx 从 882 行降至 **282 行**(-68%)
|
||||
- [x] 5 个提取的编辑器文件全部 < 220 行
|
||||
- [x] `tsc -b` 零错误
|
||||
- [x] `npm run build` 零错误(✓ built in 16.11s)
|
||||
- [x] ESLint errors 保持 **0**(清理 11 个 unused import)
|
||||
- [x] ESLint warnings 保持 **59**(无新增)
|
||||
- [x] `go build` 零错误
|
||||
- [x] 17/17 集成回归测试通过(零回归)
|
||||
- [x] Docker 部署 healthy
|
||||
- [x] K8s 资源 YAML API 链路验证通过(visual editor dispatch 正常)
|
||||
Reference in new issue
Block a user