refactor: 拆分ServerManager.tsx(645→462行)提取ServerTableRow+serverHelpers子模块

frontend/src/components/server/ServerManager.tsx

@@ -31,13 +31,9 @@ import {
 import {
   Search,
   Plus,
-  MoreHorizontal,
-  Terminal,
   Trash2,
-  Edit,
   Download,
   Upload,
-  Server as ServerIcon,
   Cloud,
   FileSpreadsheet,
   RefreshCw,
@@ -46,11 +42,12 @@ import { serverApi } from '@/services/api';
 import { ServerStatsCards } from './ServerStatsCards';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
-import type { Server as ServerType } from '@/types';
 import { CloudServerImport } from './CloudServerImport';
 import { TerminalDialog } from './TerminalDialog';
 import { ExcelServerImport } from './ExcelServerImport';
 import { ServerForm, EMPTY_FORM, type ServerFormData } from './ServerForm';
+import { getTags } from './serverHelpers';
+import { ServerTableRow } from './ServerTableRow';
 
 export function ServerManager() {
   const confirm = useConfirm();
@@ -95,27 +92,6 @@ export function ServerManager() {
     loadData();
   }, []);
 
-  // 解析标签：后端 tags 可能是 JSON 字符串(JSON数组/对象)、逗号分隔字符串或数组 // Logan.Li
-  const getTags = (server: any): string[] => {
-    const tags = server.tags;
-    if (!tags) return [];
-    if (Array.isArray(tags)) return tags;
-    try {
-      const parsed = JSON.parse(tags);
-      if (Array.isArray(parsed)) return parsed;
-      // JSON 对象 → key:value 格式展示（如 project:prod） // Logan.Li
-      if (typeof parsed === 'object' && parsed !== null) {
-        return Object.entries(parsed).map(([k, v]) => `${k}:${String(v)}`);
-      }
-      return [String(parsed)];
-    } catch {
-      return String(tags)
-        .split(',')
-        .map((t: string) => t.trim())
-        .filter(Boolean);
-    }
-  };
-
   const filteredServers = servers.filter((server) => {
     const matchesSearch =
       (server.hostname || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -276,39 +252,6 @@ export function ServerManager() {
     toast.success(`已导出 ${filteredServers.length} 台服务器`);
   };
 
-  const getStatusBadge = (status: ServerType['status']) => {
-    switch (status) {
-      case 'running':
-        return (
-          <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
-            <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5 animate-pulse" />
-            运行中
-          </Badge>
-        );
-      case 'stopped':
-        return (
-          <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-muted)] bg-[var(--dg-bg-tertiary)]">
-            已停止
-          </Badge>
-        );
-      case 'maintenance':
-        return (
-          <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
-            <div className="w-1.5 h-1.5 rounded-full bg-amber-400 mr-1.5" />
-            维护中
-          </Badge>
-        );
-      case 'offline':
-        return (
-          <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
-            离线
-          </Badge>
-        );
-      default:
-        return null;
-    }
-  };
-
   const colSpanCount = 8;
 
   return (
@@ -459,143 +402,17 @@ export function ServerManager() {
                     </TableCell>
                   </TableRow>
                 ) : (
-                  filteredServers.map((server) => {
+                  filteredServers.map((server) => (
-                    const cpuUsage = Number(server.cpu_usage || 0);
+                    <ServerTableRow
-                    const memoryUsage = Number(server.memory_usage || 0);
+                      key={server.id}
-                    const tags = getTags(server);
+                      server={server}
-                    const memGB = server.memory ? Math.round(server.memory / 1024) : 0;
+                      selected={selectedServers.includes(server.id)}
-                    return (
+                      onToggleSelect={toggleSelect}
-                      <TableRow key={server.id} className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
+                      onOpenTerminal={openTerminal}
-                        <TableCell>
+                      onOpenEdit={openEditForm}
-                          <Checkbox
+                      onDelete={handleDelete}
-                            checked={selectedServers.includes(server.id)}
-                            onCheckedChange={() => toggleSelect(server.id)}
-                            className="border-[var(--dg-border)]"
                     />
-                        </TableCell>
+                  ))
-                        <TableCell>
-                          <div className="flex items-center gap-2">
-                            <ServerIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
-                            <div>
-                              <p className="font-medium text-[var(--dg-text-primary)]">{server.hostname}</p>
-                              <p className="text-xs text-[var(--dg-text-muted)]">{server.os}</p>
-                            </div>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <code className="text-sm text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
-                            {server.ip}
-                          </code>
-                        </TableCell>
-                        <TableCell>
-                          {server.public_ip ? (
-                            <code className="text-sm text-[var(--dg-cyan)] bg-[var(--dg-cyan)]/10 px-2 py-0.5 rounded">
-                              {server.public_ip}
-                            </code>
-                          ) : (
-                            <span className="text-sm text-[var(--dg-text-muted)]">-</span>
-                          )}
-                        </TableCell>
-                        <TableCell>{getStatusBadge(server.status)}</TableCell>
-                        <TableCell>
-                          <div className="text-sm text-[var(--dg-text-secondary)]">
-                            <span className="text-[var(--dg-text-muted)]">{server.cpu}核</span>
-                            <span className="mx-1 text-[var(--dg-text-muted)] opacity-50">/</span>
-                            <span className="text-[var(--dg-text-muted)]">{memGB}GB</span>
-                            <span className="mx-1 text-[var(--dg-text-muted)] opacity-50">/</span>
-                            <span className="text-[var(--dg-text-muted)]">{server.disk}GB</span>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <div className="space-y-1">
-                            <div className="flex items-center gap-2">
-                              <span className="text-xs text-[var(--dg-text-muted)] w-8">CPU</span>
-                              <div className="w-16 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
-                                <div
-                                  className={cn(
-                                    'h-full rounded-full',
-                                    cpuUsage > 80 ? 'bg-red-400' : cpuUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
-                                  )}
-                                  style={{ width: `${cpuUsage}%` }}
-                                />
-                              </div>
-                              <span className="text-xs text-[var(--dg-text-secondary)]">{cpuUsage.toFixed(1)}%</span>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <span className="text-xs text-[var(--dg-text-muted)] w-8">内存</span>
-                              <div className="w-16 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
-                                <div
-                                  className={cn(
-                                    'h-full rounded-full',
-                                    memoryUsage > 80 ? 'bg-red-400' : memoryUsage > 60 ? 'bg-amber-400' : 'bg-emerald-400'
-                                  )}
-                                  style={{ width: `${memoryUsage}%` }}
-                                />
-                              </div>
-                              <span className="text-xs text-[var(--dg-text-secondary)]">{memoryUsage.toFixed(1)}%</span>
-                            </div>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex flex-wrap gap-1">
-                            {tags.slice(0, 3).map((tag) => (
-                              <Badge
-                                key={tag}
-                                variant="outline"
-                                className="text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)]/50"
-                              >
-                                {tag}
-                              </Badge>
-                            ))}
-                            {tags.length > 3 && (
-                              <Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
-                                +{tags.length - 3}
-                              </Badge>
-                            )}
-                          </div>
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <div className="flex items-center justify-end gap-1">
-                            <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" onClick={() => openTerminal(server)}>
-                              <Terminal className="h-4 w-4" />
-                            </Button>
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]">
-                                  <MoreHorizontal className="h-4 w-4" />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end" className="w-48 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-                                <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">操作</DropdownMenuLabel>
-                                <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
-                                <DropdownMenuItem
-                                  className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
-                                  onClick={() => openEditForm(server)}
-                                >
-                                  <Edit className="h-4 w-4 mr-2" />
-                                  编辑
-                                </DropdownMenuItem>
-                                <DropdownMenuItem className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
-                                  onClick={() => openTerminal(server)}
-                                >
-                                  <Terminal className="h-4 w-4 mr-2" />
-                                  终端
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
-                                <DropdownMenuItem
-                                  className="text-red-400 focus:bg-[var(--dg-bg-hover)] focus:text-red-400 cursor-pointer"
-                                  onClick={() => handleDelete(server.id)}
-                                >
-                                  <Trash2 className="h-4 w-4 mr-2" />
-                                  删除
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    );
-                  })
                 )}
               </TableBody>
             </Table>

frontend/src/components/server/ServerTableRow.tsx

@@ -0,0 +1,166 @@
+// 服务器表格行 — 纯展示子组件（接收 props，不直接调 API） // Logan.Li
+import { cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TableCell, TableRow } from '@/components/ui/table';
+import { Edit, MoreHorizontal, Server as ServerIcon, Terminal, Trash2 } from 'lucide-react';
+import { getStatusBadge, getTags, getUsageColor } from './serverHelpers';
+
+interface ServerTableRowProps {
+  server: any;
+  selected: boolean;
+  onToggleSelect: (id: string) => void;
+  onOpenTerminal: (server: any) => void;
+  onOpenEdit: (server: any) => void;
+  onDelete: (id: string) => void;
+}
+
+export function ServerTableRow({
+  server,
+  selected,
+  onToggleSelect,
+  onOpenTerminal,
+  onOpenEdit,
+  onDelete,
+}: ServerTableRowProps) {
+  const cpuUsage = Number(server.cpu_usage || 0);
+  const memoryUsage = Number(server.memory_usage || 0);
+  const tags = getTags(server);
+  const memGB = server.memory ? Math.round(server.memory / 1024) : 0;
+
+  return (
+    <TableRow className="border-[var(--dg-border)] hover:bg-[var(--dg-bg-tertiary)]/50">
+      <TableCell>
+        <Checkbox
+          checked={selected}
+          onCheckedChange={() => onToggleSelect(server.id)}
+          className="border-[var(--dg-border)]"
+        />
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center gap-2">
+          <ServerIcon className="h-4 w-4 text-[var(--dg-text-muted)]" />
+          <div>
+            <p className="font-medium text-[var(--dg-text-primary)]">{server.hostname}</p>
+            <p className="text-xs text-[var(--dg-text-muted)]">{server.os}</p>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        <code className="text-sm text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)] px-2 py-0.5 rounded">
+          {server.ip}
+        </code>
+      </TableCell>
+      <TableCell>
+        {server.public_ip ? (
+          <code className="text-sm text-[var(--dg-cyan)] bg-[var(--dg-cyan)]/10 px-2 py-0.5 rounded">
+            {server.public_ip}
+          </code>
+        ) : (
+          <span className="text-sm text-[var(--dg-text-muted)]">-</span>
+        )}
+      </TableCell>
+      <TableCell>{getStatusBadge(server.status)}</TableCell>
+      <TableCell>
+        <div className="text-sm text-[var(--dg-text-secondary)]">
+          <span className="text-[var(--dg-text-muted)]">{server.cpu}核</span>
+          <span className="mx-1 text-[var(--dg-text-muted)] opacity-50">/</span>
+          <span className="text-[var(--dg-text-muted)]">{memGB}GB</span>
+          <span className="mx-1 text-[var(--dg-text-muted)] opacity-50">/</span>
+          <span className="text-[var(--dg-text-muted)]">{server.disk}GB</span>
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="space-y-1">
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-[var(--dg-text-muted)] w-8">CPU</span>
+            <div className="w-16 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
+              <div
+                className={cn('h-full rounded-full', getUsageColor(cpuUsage))}
+                style={{ width: `${cpuUsage}%` }}
+              />
+            </div>
+            <span className="text-xs text-[var(--dg-text-secondary)]">{cpuUsage.toFixed(1)}%</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-[var(--dg-text-muted)] w-8">内存</span>
+            <div className="w-16 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
+              <div
+                className={cn('h-full rounded-full', getUsageColor(memoryUsage))}
+                style={{ width: `${memoryUsage}%` }}
+              />
+            </div>
+            <span className="text-xs text-[var(--dg-text-secondary)]">{memoryUsage.toFixed(1)}%</span>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="flex flex-wrap gap-1">
+          {tags.slice(0, 3).map((tag) => (
+            <Badge
+              key={tag}
+              variant="outline"
+              className="text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)] bg-[var(--dg-bg-tertiary)]/50"
+            >
+              {tag}
+            </Badge>
+          ))}
+          {tags.length > 3 && (
+            <Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
+              +{tags.length - 3}
+            </Badge>
+          )}
+        </div>
+      </TableCell>
+      <TableCell className="text-right">
+        <div className="flex items-center justify-end gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-blue)]" onClick={() => onOpenTerminal(server)}>
+            <Terminal className="h-4 w-4" />
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
+              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">操作</DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
+              <DropdownMenuItem
+                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
+                onClick={() => onOpenEdit(server)}
+              >
+                <Edit className="h-4 w-4 mr-2" />
+                编辑
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
+                onClick={() => onOpenTerminal(server)}
+              >
+                <Terminal className="h-4 w-4 mr-2" />
+                终端
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
+              <DropdownMenuItem
+                className="text-red-400 focus:bg-[var(--dg-bg-hover)] focus:text-red-400 cursor-pointer"
+                onClick={() => onDelete(server.id)}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                删除
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+}

frontend/src/components/server/serverHelpers.tsx

@@ -0,0 +1,63 @@
+// 服务器管理共享纯函数/常量 // Logan.Li
+import { Badge } from '@/components/ui/badge';
+import type { Server as ServerType } from '@/types';
+
+// 解析标签：后端 tags 可能是 JSON 字符串(JSON数组/对象)、逗号分隔字符串或数组 // Logan.Li
+export function getTags(server: any): string[] {
+  const tags = server.tags;
+  if (!tags) return [];
+  if (Array.isArray(tags)) return tags;
+  try {
+    const parsed = JSON.parse(tags);
+    if (Array.isArray(parsed)) return parsed;
+    // JSON 对象 → key:value 格式展示（如 project:prod） // Logan.Li
+    if (typeof parsed === 'object' && parsed !== null) {
+      return Object.entries(parsed).map(([k, v]) => `${k}:${String(v)}`);
+    }
+    return [String(parsed)];
+  } catch {
+    return String(tags)
+      .split(',')
+      .map((t: string) => t.trim())
+      .filter(Boolean);
+  }
+}
+
+// 服务器状态徽章 // Logan.Li
+export function getStatusBadge(status: ServerType['status']) {
+  switch (status) {
+    case 'running':
+      return (
+        <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+          <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 mr-1.5 animate-pulse" />
+          运行中
+        </Badge>
+      );
+    case 'stopped':
+      return (
+        <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-muted)] bg-[var(--dg-bg-tertiary)]">
+          已停止
+        </Badge>
+      );
+    case 'maintenance':
+      return (
+        <Badge variant="outline" className="border-amber-500/30 text-amber-400 bg-amber-500/10">
+          <div className="w-1.5 h-1.5 rounded-full bg-amber-400 mr-1.5" />
+          维护中
+        </Badge>
+      );
+    case 'offline':
+      return (
+        <Badge variant="outline" className="border-red-500/30 text-red-400 bg-red-500/10">
+          离线
+        </Badge>
+      );
+    default:
+      return null;
+  }
+}
+
+// 使用率进度条颜色（CPU/内存通用）— 绿色<60% 黄色60-80% 红色>80% // Logan.Li
+export function getUsageColor(usage: number): string {
+  return usage > 80 ? 'bg-red-400' : usage > 60 ? 'bg-amber-400' : 'bg-emerald-400';
+}