refactor(quality): Q21 前端巨型组件拆分 — DeploymentEditAdvanced 590L→289L (-51%), 提取 types(parseAdvancedManifest+buildAdvancedManifest 纯函数) + UpdateStrategyCard/TolerationsCard/PodMiscCard/PodSecurityCard/HostSettingsCard 5 个受控 Card 组件, manifest 解析(106L)和序列化(121L)提取为纯函数, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓, 17/17 测试通过
This commit is contained in:
attacker committed
1 parent
a530d3898c
commit
b4591de97c
10 files changed
+833
-430
No files matched your search
+40
@@ -492,6 +492,46 @@ services/api.ts (1324L)
|
||||
| Q18 | 前端巨型组件拆分（TraceManager 605L→331L，提取 types + trace-helpers + SpanTreeNode + TraceDetailDialog + SpanDetailDialog，修复 SpanTreeNode 内联定义反模式） | P0 | **done** |
|
||||
| Q19 | 前端巨型组件拆分（GrafanaDashboard 624L→78L，提取 types + datasource-toolbar + BatchDeployDialog + AgentTab + ExternalDatasourceTab，DRY 合并 Zabbix/Prometheus Tab，移除文件级 eslint-disable，类型安全升级 any→具体接口） | P0 | **done** |
|
||||
| Q20 | 前端巨型组件拆分（TopologyView 596L→472L，提取 types + TopologyCanvas + NodeDetailDialog + EditNodeDialog，移除文件级 eslint-disable，any→具体接口类型） | P0 | **done** |
|
||||
| Q21 | 前端巨型组件拆分（DeploymentEditAdvanced 590L→289L，提取 types(parser+builder 纯函数) + UpdateStrategyCard + TolerationsCard + PodMiscCard + PodSecurityCard + HostSettingsCard） | P0 | **done** |
|
||||
|
||||
---
|
||||
|
||||
## Q21: 前端巨型组件拆分 — DeploymentEditAdvanced [done]
|
||||
|
||||
**问题**: `DeploymentEditAdvanced.tsx`（590 行）是 Q20 拆分后项目最大的 K8s 业务组件之一（排除 UI 库 sidebar/data-table），包含 Deployment 编辑器「高级设置」Tab 的全部逻辑：~30 个 useState、大段 useEffect manifest 解析（106 行）、大段 save 序列化函数（121 行）、以及 5 个内联 Card JSX 区块（更新策略/历史版本、容忍 Tolerations、Pod 级别杂项、Pod 安全上下文、主机命名空间设置）。单文件过大导致维护困难、代码导航低效。
|
||||
|
||||
**已完成 (2026-07-08)**:
|
||||
|
||||
将类型/parser/builder 纯函数和 5 个内联 Card 提取为 `deployment-edit-advanced/` 子目录下的独立文件（该目录此前已有 SchedulingSection + DnsHostSection 两个组件）:
|
||||
|
||||
| 新文件 | 行数 | 职责 |
|
||||
|--------|------|------|
|
||||
| `types.ts` | 279 | Toleration/HostAlias/DnsOption/NodeInfo/AdvancedState 接口 + `parseAdvancedManifest()`（manifest→state 纯函数）+ `buildAdvancedManifest()`（state→manifest 纯函数） |
|
||||
| `UpdateStrategyCard.tsx` | 90 | 更新策略 + 历史版本/进度卡片（RollingUpdate/Recreate 单选 + maxSurge/maxUnavailable + revisionHistoryLimit/progressDeadlineSeconds），受控组件接收 9 个 props |
|
||||
| `TolerationsCard.tsx` | 61 | 容忍 (Tolerations) CRUD 卡片（key/operator/value/effect/tolerationSeconds 表格行 + 增删改），受控组件接收 4 个 props |
|
||||
| `PodMiscCard.tsx` | 73 | Pod 级别杂项卡片（dnsPolicy/restartPolicy/schedulerName/terminationGracePeriodSeconds/serviceAccountName），受控组件接收 10 个 props |
|
||||
| `PodSecurityCard.tsx` | 57 | Pod 安全上下文卡片（fsGroup/runAsUser/runAsGroup/runAsNonRoot），受控组件接收 8 个 props |
|
||||
| `HostSettingsCard.tsx` | 54 | 主机命名空间设置卡片（hostNetwork/hostIPC/hostPID/shareProcessNamespace），受控组件接收 8 个 props |
|
||||
|
||||
主文件 `DeploymentEditAdvanced.tsx` 从 **590 行降至 289 行**（-51%），仅保留：~30 个 useState 声明、useEffect（调用 `parseAdvancedManifest()` 解析 manifest + 加载集群节点列表 API）、labelSelector/toleration CRUD 辅助函数、save 函数（构建 AdvancedState 对象 → 调用 `buildAdvancedManifest()` → API 提交 + toast）、loading/empty 状态、以及 8 个子组件编排（UpdateStrategyCard + TolerationsCard + SchedulingSection + PodMiscCard + PodSecurityCard + HostSettingsCard + DnsHostSection + 操作栏）。
|
||||
|
||||
**关键改进**:
|
||||
- **纯函数提取**: 原 useEffect 中的 106 行 manifest 解析逻辑和 save 函数中的 121 行 manifest 序列化逻辑，提取为 `parseAdvancedManifest(manifest): AdvancedState` 和 `buildAdvancedManifest(rawManifest, state): object` 两个纯函数。主组件的 useEffect 从 ~106 行降至 ~40 行（调用纯函数 + 逐字段 setState + 节点加载副作用），save 函数从 ~121 行降至 ~15 行（构建 state 对象 + 调用纯函数 + API 提交）。
|
||||
- **类型安全**: Toleration/HostAlias/DnsOption/NodeInfo 接口替代了之前分散的内联类型，AdvancedState 聚合接口使 parser/builder 函数签名清晰。catch 块从 `e?.message` 改为 `e instanceof Error ? e.message : String(e)` 类型安全访问。
|
||||
- **SchedulingSection 类型复用**: types.ts 从 SchedulingSection re-export `ScheduleMode`/`LabelSelectorEntry`/`ClusterNodeOption`，保持单一来源。
|
||||
|
||||
**验收标准**:
|
||||
- [x] DeploymentEditAdvanced.tsx 从 590 行降至 **289 行**（-51%）
|
||||
- [x] 6 个提取的文件全部 < 280 行（最大 types.ts 279 行含纯函数，Card 组件全部 < 91 行）
|
||||
- [x] `tsc -b` 零错误
|
||||
- [x] `npm run build` 零错误（✓ built in 17.36s）
|
||||
- [x] ESLint errors 保持 **0**（DeploymentEditAdvanced + deployment-edit-advanced/ 目录零 errors/warnings）
|
||||
- [x] ESLint warnings 保持 **65**（无新增）
|
||||
- [x] 全局 ESLint any 保持 **0**
|
||||
- [x] `go build` 零错误
|
||||
- [x] 17/17 集成回归测试通过（零回归）
|
||||
- [x] Docker 部署 healthy，前端页面正常加载（HTTP 200）
|
||||
- [x] Deployment 高级设置 Tab 功能不变（更新策略/历史版本/容忍/调度/Pod 杂项/安全上下文/主机设置/DNS+hostAliases 全部正常）
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in new issue
Block a user