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

2026-07-07 22:38:49 +08:00
1 parent 8a11acd086
commit 02f3d75f56
@@ -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 🟡 中优先级

@@ -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/文件浏览全部正常）
+
@@ -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/文件浏览全部正常）
+
@@ -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 = (
-    <>
-      <div className="flex items-center gap-3 flex-wrap">
-        <div className="relative w-64">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
-          <Input
-            placeholder={t("server.searchPlaceholder")}
-            value={searchQuery}
-            onChange={(e) => handleSearch(e.target.value)}
-            className="pl-9 h-9 dg-input"
-          />
-        </div>
-        <Select value={statusFilter} onValueChange={handleStatusFilter}>
-          <SelectTrigger className="w-32 h-9 dg-input">
-            <SelectValue placeholder={t("common.status")} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">{t("server.allStatus")}</SelectItem>
-            <SelectItem value="running">{t("common.running")}</SelectItem>
-            <SelectItem value="stopped">{t("common.stopped")}</SelectItem>
-            <SelectItem value="maintenance">
-              {t("common.maintenance")}
-            </SelectItem>
-            <SelectItem value="offline">{t("common.offline")}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-      {selectedServers.length > 0 && (
-        <div className="flex items-center gap-2">
-          <span className="text-sm dg-text-secondary">
-            {t("server.selected", { count: selectedServers.length })}
-          </span>
-          {hasPermission("server:delete") && (
-            <Button
-              variant="outline"
-              size="sm"
-              className="dg-btn-danger dg-btn-sm"
-              onClick={handleBatchDelete}
-            >
-              <Trash2 className="h-4 w-4 mr-2" />
-              {t("server.batchDelete")}
-            </Button>
-          )}
-        </div>
-      )}
-    </>
-  );
-
  return (
    <PageShell
      variant="list"
@@ -467,132 +357,32 @@ export function ServerManager() {
        </>
      }
    >
-      <ContentPanel toolbar={tableToolbar}>
-        <div>
-          <Table>
-            <TableHeader>
-              <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
-                <TableHead className="w-12">
-                  <Checkbox
-                    checked={
-                      selectedServers.length === servers.length &&
-                      servers.length > 0
-                    }
-                    onCheckedChange={toggleSelectAll}
-                  />
-                </TableHead>
-                <TableHead className="text-[var(--dg-text-secondary)]">
-                  {t("server.hostname")}
-                </TableHead>
-                <TableHead className="text-[var(--dg-text-secondary)]">
-                  {t("server.ipAddress")}
-                </TableHead>
-                <TableHead className="text-[var(--dg-text-secondary)]">
-                  {t("server.publicIp")}
-                </TableHead>
-                <TableHead className="text-[var(--dg-text-secondary)]">
-                  {t("common.status")}
-                </TableHead>
-                <TableHead className="text-[var(--dg-text-secondary)]">
-                  {t("server.config")}
-                </TableHead>
-                <TableHead className="text-[var(--dg-text-secondary)]">
-                  {t("server.tags")}
-                </TableHead>
-                <TableHead className="text-[var(--dg-text-secondary)] text-right">
-                  {t("common.actions")}
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {loading ? (
-                <TableRow className="border-[var(--dg-border)]">
-                  <TableCell
-                    colSpan={colSpanCount}
-                    className="text-center text-[var(--dg-text-muted)] py-12"
-                  >
-                    <RefreshCw className="h-5 w-5 animate-spin mx-auto mb-2" />
-                    {t("common.loading")}
-                  </TableCell>
-                </TableRow>
-              ) : servers.length === 0 ? (
-                <TableRow className="border-[var(--dg-border)]">
-                  <TableCell
-                    colSpan={colSpanCount}
-                    className="text-center text-[var(--dg-text-muted)] py-12"
-                  >
-                    {t("server.noData")}
-                  </TableCell>
-                </TableRow>
-              ) : (
-                servers.map((server) => (
-                  <ServerTableRow
-                    key={server.id}
-                    server={server}
-                    selected={selectedServers.includes(String(server.id))}
+      <ServerTableSection
+        servers={servers}
+        loading={loading}
+        total={total}
+        page={page}
+        pageSize={pageSize}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          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}
      />
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </div>
-
-        {/* 分页 */}
-        <div className="flex items-center justify-between px-4 py-3 border-t border-[var(--dg-border)]">
-          <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-            <span>{t("server.perPage")}</span>
-            <Select
-              value={String(pageSize)}
-              onValueChange={(v) => {
-                setPageSize(Number(v));
-                setPage(1);
-              }}
-            >
-              <SelectTrigger className="w-16 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-                <SelectItem value="10">10</SelectItem>
-                <SelectItem value="20">20</SelectItem>
-                <SelectItem value="30">30</SelectItem>
-              </SelectContent>
-            </Select>
-            <span>{t("server.items")}</span>
-            <span className="ml-4">
-              {t("server.totalItems", { count: total })}
-            </span>
-          </div>
-          <div className="flex items-center gap-1">
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-              disabled={page <= 1}
-              onClick={() => setPage((p) => Math.max(1, p - 1))}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <span className="text-sm text-[var(--dg-text-secondary)] px-2">
-              {page} / {Math.max(1, Math.ceil(total / pageSize))}
-            </span>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
-              disabled={page >= Math.ceil(total / pageSize)}
-              onClick={() => setPage((p) => p + 1)}
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-      </ContentPanel>

      {/* 创建/编辑服务器 Dialog */}
      <ServerForm
@@ -0,0 +1,265 @@
+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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Search,
+  Trash2,
+  RefreshCw,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { ContentPanel } from "@/components/layout/ContentPanel";
+import { ServerTableRow } from "./ServerTableRow";
+import type { JsonData } from "@/types/common";
+
+export interface ServerTableSectionProps {
+  /** 服务器列表数据 */
+  servers: JsonData[];
+  /** 加载中 */
+  loading: boolean;
+  /** 总数 */
+  total: number;
+  /** 分页 */
+  page: number;
+  pageSize: number;
+  onPageChange: (page: number) => 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 = (
+    <>
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative w-64">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+          <Input
+            placeholder={t("server.searchPlaceholder")}
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9 h-9 dg-input"
+          />
+        </div>
+        <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+          <SelectTrigger className="w-32 h-9 dg-input">
+            <SelectValue placeholder={t("common.status")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{t("server.allStatus")}</SelectItem>
+            <SelectItem value="running">{t("common.running")}</SelectItem>
+            <SelectItem value="stopped">{t("common.stopped")}</SelectItem>
+            <SelectItem value="maintenance">
+              {t("common.maintenance")}
+            </SelectItem>
+            <SelectItem value="offline">{t("common.offline")}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+      {selectedServers.length > 0 && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm dg-text-secondary">
+            {t("server.selected", { count: selectedServers.length })}
+          </span>
+          {canDelete && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="dg-btn-danger dg-btn-sm"
+              onClick={onBatchDelete}
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              {t("server.batchDelete")}
+            </Button>
+          )}
+        </div>
+      )}
+    </>
+  );
+
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
+  return (
+    <ContentPanel toolbar={tableToolbar}>
+      <div>
+        <Table>
+          <TableHeader>
+            <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
+              <TableHead className="w-12">
+                <Checkbox
+                  checked={
+                    selectedServers.length === servers.length &&
+                    servers.length > 0
+                  }
+                  onCheckedChange={onToggleSelectAll}
+                />
+              </TableHead>
+              <TableHead className="text-[var(--dg-text-secondary)]">
+                {t("server.hostname")}
+              </TableHead>
+              <TableHead className="text-[var(--dg-text-secondary)]">
+                {t("server.ipAddress")}
+              </TableHead>
+              <TableHead className="text-[var(--dg-text-secondary)]">
+                {t("server.publicIp")}
+              </TableHead>
+              <TableHead className="text-[var(--dg-text-secondary)]">
+                {t("common.status")}
+              </TableHead>
+              <TableHead className="text-[var(--dg-text-secondary)]">
+                {t("server.config")}
+              </TableHead>
+              <TableHead className="text-[var(--dg-text-secondary)]">
+                {t("server.tags")}
+              </TableHead>
+              <TableHead className="text-[var(--dg-text-secondary)] text-right">
+                {t("common.actions")}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow className="border-[var(--dg-border)]">
+                <TableCell
+                  colSpan={COL_SPAN}
+                  className="text-center text-[var(--dg-text-muted)] py-12"
+                >
+                  <RefreshCw className="h-5 w-5 animate-spin mx-auto mb-2" />
+                  {t("common.loading")}
+                </TableCell>
+              </TableRow>
+            ) : servers.length === 0 ? (
+              <TableRow className="border-[var(--dg-border)]">
+                <TableCell
+                  colSpan={COL_SPAN}
+                  className="text-center text-[var(--dg-text-muted)] py-12"
+                >
+                  {t("server.noData")}
+                </TableCell>
+              </TableRow>
+            ) : (
+              servers.map((server) => (
+                <ServerTableRow
+                  key={server.id}
+                  server={server}
+                  selected={selectedServers.includes(String(server.id))}
+                  onToggleSelect={onToggleSelect}
+                  onOpenTerminal={onOpenTerminal}
+                  onOpenRdp={onOpenRdp}
+                  onOpenFiles={onOpenFiles}
+                  onOpenEdit={onOpenEdit}
+                  onDelete={onDelete}
+                />
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* 分页 */}
+      <div className="flex items-center justify-between px-4 py-3 border-t border-[var(--dg-border)]">
+        <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
+          <span>{t("server.perPage")}</span>
+          <Select
+            value={String(pageSize)}
+            onValueChange={(v) => onPageSizeChange(Number(v))}
+          >
+            <SelectTrigger className="w-16 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
+              <SelectItem value="10">10</SelectItem>
+              <SelectItem value="20">20</SelectItem>
+              <SelectItem value="30">30</SelectItem>
+            </SelectContent>
+          </Select>
+          <span>{t("server.items")}</span>
+          <span className="ml-4">
+            {t("server.totalItems", { count: total })}
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
+            disabled={page <= 1}
+            onClick={() => onPageChange(Math.max(1, page - 1))}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <span className="text-sm text-[var(--dg-text-secondary)] px-2">
+            {page} / {totalPages}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-8 border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
+            disabled={page >= totalPages}
+            onClick={() => onPageChange(page + 1)}
+          >
+            <ChevronRight className={cn("h-4 w-4")} />
+          </Button>
+        </div>
+      </div>
+    </ContentPanel>
+  );
+}
@@ -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);
+}