refactor(quality): Q14 前端巨型组件拆分 — ServerManager 652L→442L (-32%), 提取 ServerTableSection (265L, 表格+工具栏+分页受控展示组件) + server-export-utils (57L, CSV 导出纯函数), 移除 12 个不再使用的 import, 零逻辑变更

This commit is contained in:
attacker committed 2026-07-07 22:38:49 +08:00
1 parent 8a11acd086
commit 02f3d75f56
6 files changed
+441 -244

No files matched your search

+34
View File
@@ -485,6 +485,7 @@ services/api.ts (1324L)
| Q11 | 前端巨型组件拆分(PipelineRunDetail 678L→273L,提取 types + StageProgressBar + RunsTable + LogConsole) | P0 | **done** |
| Q12 | 前端巨型组件拆分(CloudServerImport 699L→404L,提取 StepIndicator + 4 个向导步骤组件 + types,any[]→具体接口) | P0 | **done** |
| Q13 | 前端巨型组件拆分(UnifiedQueryPanel 682L→529L,提取 constants + entry-mappers + 5 个 UI 子组件) | P0 | **done** |
| Q14 | 前端巨型组件拆分(ServerManager 652L→442L,提取 ServerTableSection + server-export-utils) | P0 | **done** |
---
@@ -886,3 +887,36 @@ pending → in_progress → done / blocked
- [x] 17/17 集成回归测试通过(零回归)
- [x] Docker 部署 healthy,前端页面正常加载(HTTP 200)
- [x] 日志中心查询面板功能不变(Loki/ES 双引擎查询/直方图/标签过滤/Live Tail/分享链接/保存查询/告警创建全部正常)
---
## Q14: 前端巨型组件拆分 — ServerManager [done]
**问题**: `ServerManager.tsx`(652 行)是 Q13 拆分后项目最大的核心业务组件之一(排除 UI 库 sidebar/data-table),包含服务器管理页面的全部逻辑:17+ 个状态声明、CSV 导出业务逻辑(50 行内联)、表格工具栏+表格+分页的完整 JSX(~240 行)、以及 6 个弹窗组件的挂载。单文件过大导致维护困难。
**已完成 (2026-07-07)**:
将 CSV 导出逻辑和表格+分页 JSX 提取为独立文件:
| 新文件 | 行数 | 职责 |
|--------|------|------|
| `server-export-utils.ts` | 57 | `buildServersCsv(servers, t)` 纯函数(CSV 表头构建+行映射+BOM)+ `downloadCsv(filename, content)` 浏览器下载触发 |
| `ServerTableSection.tsx` | 265 | 表格工具栏(搜索+状态筛选+批量删除栏)+ 服务器表格(表头+表体+加载/空状态)+ 分页控件,接收 21 个 props 的受控展示组件 |
主文件 `ServerManager.tsx` 从 **652 行降至 442 行**(-32%),仅保留:状态管理(选择/搜索/筛选/分页/6 个弹窗状态)、数据获取(useServers/useServerMutations)、CRUD 操作(handleDelete/handleBatchDelete/openCreateForm/openEditForm/handleSave)、CSV 导出调用(buildServersCsv+downloadCsv 一行)、PageShell 布局 + actions 按钮组 + ServerTableSection + 弹窗组件挂载。
**提取原则**: server-export-utils 为纯函数(接收 TFunction 参数,零 React 依赖);ServerTableSection 为受控展示组件(接收 servers/loading/pagination/selection 共 21 个 props + 行操作回调,内部用 useTranslation 获取翻译),零逻辑变更。移除了 ServerManager 中不再使用的 12 个 import(Table/TableBody/TableHead/TableHeader/TableRow/Checkbox/Select*/Search/Trash2/ChevronLeft/ChevronRight/Input)。
**验收标准**:
- [x] ServerManager.tsx 从 652 行降至 **442 行**(-32%)
- [x] 2 个提取的文件全部 < 270 行(最大 ServerTableSection 265 行)
- [x] `tsc -b` 零错误
- [x] `npm run build` 零错误(✓ built in 16.40s)
- [x] ESLint errors 保持 **0**(3 个文件零 errors/warnings)
- [x] ESLint warnings 保持 **64**(无新增)
- [x] 全局 ESLint any 保持 **0**
- [x] `go build` 零错误
- [x] 17/17 集成回归测试通过(零回归)
- [x] Docker 部署 healthy,前端页面正常加载(HTTP 200)
- [x] 服务器管理页功能不变(列表/搜索/筛选/分页/选择/批量删除/CSV 导出/创建编辑/终端/RDP/文件浏览全部正常)