diff --git a/PROJECT_EVALUATION.md b/PROJECT_EVALUATION.md index 94516be..ff8220e 100644 --- a/PROJECT_EVALUATION.md +++ b/PROJECT_EVALUATION.md @@ -129,7 +129,7 @@ | ~~`api.ts` 1324 行/352 方法~~ → 已拆分为 12 个域文件 (api/kubernetes.ts, deploy.ts, monitor.ts 等) | ✅ 已解决 | 前端 | ~~P0~~ done | | 前端 **1026 处** `any` 类型 | 类型安全缺失，重构风险高 | 前端全局 | ~~P0~~ **done** (any 1076→40, unused 25→6, console 93→1, tsc --noEmit=0) | | ~~K8s 双路由体系（集群域+Kuboard 域）~~ → code 路由统一为主，ID 路由标记 deprecated 向后兼容 | ✅ 已解决 | 后端 | ~~P1~~ done | -| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 → **Q6+Q7+Q8+Q9+Q10+Q11+Q12+Q13 done: 最大组件 ResourceVisualEditor 882L→282L (-68%) + AgentCLI 814L→521L (-36%) + SystemSettingsTab 754L→173L (-77%) + NamespaceResourcePage 719L→300L (-58%) + ApprovalWorkflowPage 705L→167L (-76%) + PipelineRunDetail 678L→273L (-60%) + CloudServerImport 699L→404L (-42%，any[]→具体接口) + UnifiedQueryPanel 682L→529L (-22%)，累计提取 37 个独立组件文件** | +| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 → **Q6+Q7+Q8+Q9+Q10+Q11+Q12+Q13+Q14 done: 最大组件 ResourceVisualEditor 882L→282L (-68%) + AgentCLI 814L→521L (-36%) + SystemSettingsTab 754L→173L (-77%) + NamespaceResourcePage 719L→300L (-58%) + ApprovalWorkflowPage 705L→167L (-76%) + PipelineRunDetail 678L→273L (-60%) + CloudServerImport 699L→404L (-42%，any[]→具体接口) + UnifiedQueryPanel 682L→529L (-22%) + ServerManager 652L→442L (-32%)，累计提取 39 个独立组件文件** | ### 3.2 🟡 中优先级 diff --git a/ROADMAP.md b/ROADMAP.md index 22aebff..71074a1 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -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/文件浏览全部正常） + diff --git a/TDD_PLAN.md b/TDD_PLAN.md index 1d9db23..d25ae74 100644 --- a/TDD_PLAN.md +++ b/TDD_PLAN.md @@ -1329,3 +1329,54 @@ python3 /srv/aiops/tests/integration_test.py --host 127.0.0.1 --port 8080 | tail - [x] 17/17 集成回归测试通过（零回归） - [x] Docker 部署 healthy，前端页面正常加载（HTTP 200） - [x] 日志中心查询面板功能不变（Loki/ES 双引擎查询/直方图/标签过滤/Live Tail/分享链接/保存查询/告警创建全部正常） + +--- + +## Q14: 前端巨型组件拆分 — ServerManager + +### 验证用例 + +```bash +# U1: Go 编译 +cd /srv/aiops/backend && go build ./... +# 期望: 零错误 + +# U2: TypeScript 编译 +cd /srv/aiops/frontend && npx tsc -b +# 期望: 零错误 + +# U3: Vite 构建 +npm run build 2>&1 | tail -3 +# 期望: built in Ns + +# U4: 拆分后文件行数 +wc -l src/components/server/ServerManager.tsx src/components/server/ServerTableSection.tsx src/components/server/server-export-utils.ts +# 期望: ServerManager < 500L, 其余 < 270L + +# U5: ESLint 全局指标 +npx eslint src/ --format json | python3 -c " +import json, sys +d = json.load(sys.stdin) +print(f'errors={sum(1 for r in d for m in r[\"messages\"] if m[\"severity\"]==2)}') +print(f'any={sum(1 for r in d for m in r[\"messages\"] if m.get(\"ruleId\")==\"@typescript-eslint/no-explicit-any\")}') +" +# 期望: errors=0, any=0 + +# U6: 集成测试 +python3 tests/integration_test.py --host 127.0.0.1 --port 8080 +# 期望: 17/17 passed +``` + +### 通过标准 +- [x] ServerManager.tsx 从 652 行降至 **442 行**（< 500 ✅，-32%） +- [x] 2 个提取文件全部 < 270 行（server-export-utils 57L + ServerTableSection 265L） +- [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/文件浏览全部正常） + diff --git a/frontend/src/components/server/ServerManager.tsx b/frontend/src/components/server/ServerManager.tsx index 052ce59..b3985c5 100644 --- a/frontend/src/components/server/ServerManager.tsx +++ b/frontend/src/components/server/ServerManager.tsx @@ -2,8 +2,6 @@ import { useState, useMemo } from "react"; import { useTranslation } from "react-i18next"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Checkbox } from "@/components/ui/checkbox"; import { DropdownMenu, DropdownMenuContent, @@ -13,31 +11,12 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; -import { - Search, Plus, - Trash2, Download, Upload, Cloud, FileSpreadsheet, RefreshCw, - ChevronLeft, - ChevronRight, } from "lucide-react"; import { useServers, useServerMutations } from "@/hooks/api"; import { ServerStatsStrip } from "./ServerStatsStrip"; @@ -50,11 +29,10 @@ import { ServerFileBrowser } from "./ServerFileBrowser"; import type { JsonData } from "@/types/common"; import { ExcelServerImport } from "./ExcelServerImport"; import { ServerForm, EMPTY_FORM, type ServerFormData } from "./ServerForm"; -import { getTags } from "./serverHelpers"; -import { ServerTableRow } from "./ServerTableRow"; +import { ServerTableSection } from "./ServerTableSection"; +import { buildServersCsv, downloadCsv } from "./server-export-utils"; import { usePermission } from "@/hooks/usePermission"; import { PageShell } from "@/components/layout/PageShell"; -import { ContentPanel } from "@/components/layout/ContentPanel"; import { Server } from "lucide-react"; export function ServerManager() { @@ -152,7 +130,6 @@ export function ServerManager() { setPage(1); }; - // 导出 CSV const toggleSelectAll = () => { if (selectedServers.length === servers.length) { setSelectedServers([]); @@ -305,101 +282,14 @@ export function ServerManager() { toast.error(t("server.noExportData")); return; } - const headers = [ - t("server.csv.hostname"), - t("server.csv.ip"), - t("server.csv.publicIp"), - t("server.csv.port"), - t("server.csv.os"), - t("server.csv.cpu"), - t("server.csv.memory"), - t("server.csv.disk"), - t("server.csv.status"), - t("server.csv.tags"), - ]; - const rows = servers.map((s) => { - const memGB = s.memory ? Math.round(Number(s.memory) / 1024) : 0; - const tags = getTags(s).join(";"); - return [ - s.hostname || "", - s.ip || "", - s.public_ip || "", - s.port || 22, - s.os || "", - s.cpu || 0, - memGB, - s.disk || 0, - s.status || "", - tags, - ]; - }); - const csv = [headers, ...rows] - .map((row) => - row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(","), - ) - .join("\n"); - const blob = new Blob(["\ufeff" + csv], { - type: "text/csv;charset=utf-8;", - }); - const url = URL.createObjectURL(blob); - const a = document.createElement("a"); - a.href = url; - a.download = `servers_${new Date().toISOString().slice(0, 10)}.csv`; - a.click(); - URL.revokeObjectURL(url); + const csv = buildServersCsv(servers, t); + downloadCsv( + `servers_${new Date().toISOString().slice(0, 10)}.csv`, + csv, + ); toast.success(t("server.exported", { count: servers.length })); }; - const colSpanCount = 8; - - const tableToolbar = ( - <> -
-
- - handleSearch(e.target.value)} - className="pl-9 h-9 dg-input" - /> -
- -
- {selectedServers.length > 0 && ( -
- - {t("server.selected", { count: selectedServers.length })} - - {hasPermission("server:delete") && ( - - )} -
- )} - - ); - return ( } > - -
- - - - - 0 - } - onCheckedChange={toggleSelectAll} - /> - - - {t("server.hostname")} - - - {t("server.ipAddress")} - - - {t("server.publicIp")} - - - {t("common.status")} - - - {t("server.config")} - - - {t("server.tags")} - - - {t("common.actions")} - - - - - {loading ? ( - - - - {t("common.loading")} - - - ) : servers.length === 0 ? ( - - - {t("server.noData")} - - - ) : ( - servers.map((server) => ( - - )) - )} - -
-
- - {/* 分页 */} -
-
- {t("server.perPage")} - - {t("server.items")} - - {t("server.totalItems", { count: total })} - -
-
- - - {page} / {Math.max(1, Math.ceil(total / pageSize))} - - -
-
- + { + setPageSize(size); + setPage(1); + }} + searchQuery={searchQuery} + statusFilter={statusFilter} + onSearchChange={handleSearch} + onStatusFilterChange={handleStatusFilter} + selectedServers={selectedServers} + onToggleSelectAll={toggleSelectAll} + onToggleSelect={toggleSelect} + onBatchDelete={handleBatchDelete} + canDelete={hasPermission("server:delete")} + onOpenTerminal={openTerminal} + onOpenRdp={openRdp} + onOpenFiles={openFileBrowser} + onOpenEdit={openEditForm} + onDelete={handleDelete} + /> {/* 创建/编辑服务器 Dialog */} void; + onPageSizeChange: (size: number) => void; + /** 搜索/筛选 */ + searchQuery: string; + statusFilter: string; + onSearchChange: (val: string) => void; + onStatusFilterChange: (val: string) => void; + /** 选择 */ + selectedServers: string[]; + onToggleSelectAll: () => void; + onToggleSelect: (id: string) => void; + onBatchDelete: () => void; + canDelete: boolean; + /** 行操作回调 */ + onOpenTerminal: (server: JsonData) => void; + onOpenRdp: (server: JsonData) => void; + onOpenFiles: (server: JsonData) => void; + onOpenEdit: (server: JsonData) => void; + onDelete: (id: string) => void; +} + +const COL_SPAN = 8; + +export function ServerTableSection({ + servers, + loading, + total, + page, + pageSize, + onPageChange, + onPageSizeChange, + searchQuery, + statusFilter, + onSearchChange, + onStatusFilterChange, + selectedServers, + onToggleSelectAll, + onToggleSelect, + onBatchDelete, + canDelete, + onOpenTerminal, + onOpenRdp, + onOpenFiles, + onOpenEdit, + onDelete, +}: ServerTableSectionProps) { + const { t } = useTranslation(); + + const tableToolbar = ( + <> +
+
+ + onSearchChange(e.target.value)} + className="pl-9 h-9 dg-input" + /> +
+ +
+ {selectedServers.length > 0 && ( +
+ + {t("server.selected", { count: selectedServers.length })} + + {canDelete && ( + + )} +
+ )} + + ); + + const totalPages = Math.max(1, Math.ceil(total / pageSize)); + + return ( + +
+ + + + + 0 + } + onCheckedChange={onToggleSelectAll} + /> + + + {t("server.hostname")} + + + {t("server.ipAddress")} + + + {t("server.publicIp")} + + + {t("common.status")} + + + {t("server.config")} + + + {t("server.tags")} + + + {t("common.actions")} + + + + + {loading ? ( + + + + {t("common.loading")} + + + ) : servers.length === 0 ? ( + + + {t("server.noData")} + + + ) : ( + servers.map((server) => ( + + )) + )} + +
+
+ + {/* 分页 */} +
+
+ {t("server.perPage")} + + {t("server.items")} + + {t("server.totalItems", { count: total })} + +
+
+ + + {page} / {totalPages} + + +
+
+ + ); +} diff --git a/frontend/src/components/server/server-export-utils.ts b/frontend/src/components/server/server-export-utils.ts new file mode 100644 index 0000000..5c82c7d --- /dev/null +++ b/frontend/src/components/server/server-export-utils.ts @@ -0,0 +1,57 @@ +import type { TFunction } from "i18next"; +import type { JsonData } from "@/types/common"; +import { getTags } from "./serverHelpers"; + +/** + * 将服务器列表构建为 CSV 字符串（含 UTF-8 BOM）。 + * 纯函数，无副作用 — 调用方负责触发下载。 + */ +export function buildServersCsv(servers: JsonData[], t: TFunction): string { + const headers = [ + t("server.csv.hostname"), + t("server.csv.ip"), + t("server.csv.publicIp"), + t("server.csv.port"), + t("server.csv.os"), + t("server.csv.cpu"), + t("server.csv.memory"), + t("server.csv.disk"), + t("server.csv.status"), + t("server.csv.tags"), + ]; + const rows = servers.map((s) => { + const memGB = s.memory ? Math.round(Number(s.memory) / 1024) : 0; + const tags = getTags(s).join(";"); + return [ + s.hostname || "", + s.ip || "", + s.public_ip || "", + s.port || 22, + s.os || "", + s.cpu || 0, + memGB, + s.disk || 0, + s.status || "", + tags, + ]; + }); + const csv = [headers, ...rows] + .map((row) => + row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(","), + ) + .join("\n"); + return "\ufeff" + csv; +} + +/** + * 触发浏览器下载 CSV 文件。 + */ +export function downloadCsv(filename: string, content: string): void { + const blob = new Blob([content], { type: "text/csv;charset=utf-8;" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = filename; + a.click(); + URL.revokeObjectURL(url); +}