refactor(quality): Q17 前端巨型组件拆分 — DeploymentEditService 627L→394L (-37%), 提取 types + ServiceCreateForm + IngressCreateForm + ServiceListItem + IngressListItem 5 个独立文件, 端口增删改逻辑下沉到 ServiceCreateForm, 移除文件级 eslint-disable, 零逻辑变更, ESLint errors=0/warnings=64/any=0, tsc -b=0, npm build✓, 17/17 测试通过

2026-07-08 05:15:39 +08:00
1 parent 4905724338
commit 6f1c79fd51
@@ -0,0 +1,49 @@
+// deployment-edit-service/IngressListItem.tsx — 单个 Ingress 卡片（关联高亮 + 路由规则）
+// 纯展示组件：接收 ing + matched 状态 + 编辑/删除回调。
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle, GitBranch, Pencil, Server, Trash2 } from 'lucide-react';
+import i18n from '@/i18n';
+import type { IngSummary } from './types';
+
+interface Props {
+  ing: IngSummary;
+  matched: boolean;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function IngressListItem({ ing, matched, onEdit, onDelete }: Props) {
+  return (
+    <div className={`rounded-lg border p-3 ${matched ? 'border-purple-700/50 bg-purple-950/20' : 'border-[var(--dg-border)] bg-[var(--dg-bg-primary)]/30'}`}>
+      <div className="flex items-center gap-2 flex-wrap">
+        {matched ? <CheckCircle className="h-4 w-4 dg-text-purple" /> : <GitBranch className="h-4 w-4 dg-text-muted" />}
+        <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{ing.name}</span>
+        <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{ing.className}</Badge>
+        {matched && <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-[10px]"> {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} </Badge>}
+        <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green ml-auto"
+          onClick={onEdit}>
+          <Pencil className="h-3 w-3 mr-1" />编辑
+        </Button>
+        <Button size="sm" variant="ghost" className="h-6 w-6 p-0 dg-text-red hover:dg-text-red"
+          title={i18n.t('kubernetes.ingress.deleteIngress')} onClick={onDelete}>
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      </div>
+      {/* Rules */}
+      <div className="mt-2 space-y-1 text-[11px]">
+        {ing.rules.map((r, i) => (
+          <div key={i} className="flex items-start gap-1.5">
+            <Server className="h-3 w-3 dg-text-muted mt-0.5" />
+            <code className="text-[var(--dg-text-secondary)]">{r.host || '*'}</code>
+            {r.paths.map((p, j) => (
+              <code key={j} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded dg-text-secondary">
+                {p.path} → {p.backend.service}:{String(p.backend.port)}
+              </code>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}