refactor(quality): Q20 前端巨型组件拆分 — TopologyView 596L→472L (-21%), 提取 types + TopologyCanvas + NodeDetailDialog + EditNodeDialog 4 个独立文件, 移除文件级 eslint-disable + any→ClusterInfo 具体接口类型, 零逻辑变更, ESLint errors=0/warnings=65/any=0, tsc -b=0, npm build✓, 17/17 测试通过

ROADMAP.md

@@ -491,6 +491,43 @@ services/api.ts (1324L)
 | Q17 | 前端巨型组件拆分（DeploymentEditService 627L→394L，提取 types + ServiceCreateForm + IngressCreateForm + ServiceListItem + IngressListItem） | P0 | **done** |
 | 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** |
+
+---
+
+## Q20: 前端巨型组件拆分 — TopologyView [done]
+
+**问题**: `TopologyView.tsx`（596 行）是 Q19 拆分后项目最大的 K8s 业务组件之一（排除 UI 库 sidebar/data-table），包含架构拓扑页面的全部逻辑：集群加载、拓扑数据构建（Promise.all 拉取 5 种资源 + buildTopology）、已保存布局合并、节点过滤、SVG 画布渲染（defs/marker/edges/nodes 绘制 + 拖拽 + 连线模式）、编辑模式操作（新增/编辑/删除节点 + 创建/删除连线）、保存/重置布局、节点详情弹窗（基本信息网格 + 关联连线列表）、新增/编辑节点弹窗。文件顶部有 `eslint-disable @typescript-eslint/no-explicit-any`，多处 `any` 类型（clusters/c/cluster/v/node.data）。单文件过大导致维护困难。
+
+**已完成 (2026-07-08)**:
+
+将类型定义、SVG 画布渲染、节点详情弹窗、新增/编辑节点弹窗提取为 `topology-view/` 子目录下的独立文件:
+
+| 新文件 | 行数 | 职责 |
+|--------|------|------|
+| `types.ts` | 33 | ClusterInfo/EditFormState/DragOffset/SvgPoint 接口（替代 clusters: any[] 等 any 类型） |
+| `TopologyCanvas.tsx` | 94 | SVG 拓扑画布渲染（defs pattern/marker + 层级行标签 + edges 连线 + nodes 节点圆+图标+名称），受控组件接收 18 个 props（svgRef/canvasW/canvasH/nodes/edges/filteredNodes/visibleIds/editMode/connectMode/connectSource/selectedNode/draggingId + 6 回调） |
+| `NodeDetailDialog.tsx` | 93 | 节点详情弹窗（renderNodeDetailFields 基本信息 grid-cols-2 + 关联连线列表 →/← + 编辑模式操作按钮），接收 node/edges/nodes/editMode + 3 回调 |
+| `EditNodeDialog.tsx` | 65 | 新增/编辑节点弹窗（名称 Input + 类型 Select + 备注 Textarea），接收 open/editingNode/editForm/setEditForm/onSave |
+
+主文件 `TopologyView.tsx` 从 **596 行降至 472 行**（-21%），仅保留：状态管理（clusters/topology/editMode/connectMode/editForm 等 20+ 个 useState）、数据加载（loadClusters/loadSavedLayout/loadTopology + Promise.all 5 资源拉取 + 布局合并）、拖拽处理（getSvgPoint/handleNodeMouseDown/handleMouseMove/handleMouseUp）、节点点击（区分普通/编辑/连线模式）、编辑操作（handleAddNode/handleEditNode/handleSaveNode/handleDeleteNode/handleDeleteEdge）、布局保存/重置、画布尺寸计算、filterToolbar、编辑模式工具栏、Canvas+NodeList 双栏布局、以及 3 个子组件编排。
+
+**关键改进**:
+- **移除文件级 `eslint-disable`**: `clusters: any[]` → `ClusterInfo[]`；`(cluster as any).code` → `cluster.code`（ClusterInfo 接口含 code 字段）；`v: any` → `v: unknown` + toArray 返回 `unknown[]`；`(node.data as Record<string, any>)` → `Record<string, unknown>`。全局 ESLint any 保持 **0**。
+- **SVG 渲染提取**: 原 `renderTopology()` 内联函数（60 行）提取为 `TopologyCanvas` 独立组件，消除内联函数每次 render 重建的性能隐患。
+
+**验收标准**:
+- [x] TopologyView.tsx 从 596 行降至 **472 行**（-21%）
+- [x] 4 个提取的文件全部 < 95 行（最大 TopologyCanvas 94 行）
+- [x] `tsc -b` 零错误
+- [x] `npm run build` 零错误（✓ built in 17.89s）
+- [x] ESLint errors 保持 **0**（topology-view/ 目录零 warnings）
+- [x] ESLint warnings 保持 **65**（无新增）
+- [x] 全局 ESLint any 保持 **0**（移除文件级 eslint-disable）
+- [x] `go build` 零错误
+- [x] 17/17 集成回归测试通过（零回归）
+- [x] Docker 部署 healthy，前端页面正常加载（HTTP 200）
+- [x] 架构拓扑页功能不变（SVG 画布/节点拖拽/编辑模式/连线/保存布局/节点列表/详情弹窗全部正常）
 
 ---