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,147 @@
+// deployment-edit-service/ServiceCreateForm.tsx — 创建 Service 表单（多端口 + 快速预设）
+// 受控组件：接收 svcForm + setSvcForm + selectorLabels，内部管理端口增删改。
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Minus, Plus, Zap } from 'lucide-react';
+import i18n from '@/i18n';
+import type { SvcFormState } from './types';
+import { PORT_PRESETS } from './types';
+
+interface Props {
+  svcForm: SvcFormState;
+  setSvcForm: React.Dispatch<React.SetStateAction<SvcFormState>>;
+  selectorLabels: Record<string, string>;
+  deploymentName: string;
+  onCancel: () => void;
+  onCreate: () => void;
+}
+
+export function ServiceCreateForm({ svcForm, setSvcForm, selectorLabels, deploymentName, onCancel, onCreate }: Props) {
+  // ──── 端口操作 ────
+  const addPort = (preset?: typeof PORT_PRESETS[number]) => {
+    setSvcForm(s => ({
+      ...s,
+      ports: [...s.ports, preset
+        ? { name: preset.name, port: String(preset.port), targetPort: String(preset.targetPort), protocol: preset.protocol as 'TCP' | 'UDP', nodePort: '' }
+        : { name: '', port: '', targetPort: '', protocol: 'TCP' as const, nodePort: '' }
+      ],
+    }));
+  };
+
+  const updatePort = (i: number, field: string, value: string) => {
+    setSvcForm(s => ({
+      ...s,
+      ports: s.ports.map((p, idx) => idx === i ? { ...p, [field]: value } : p),
+    }));
+  };
+
+  const removePort = (i: number) => {
+    if (svcForm.ports.length <= 1) return;
+    setSvcForm(s => ({ ...s, ports: s.ports.filter((_, idx) => idx !== i) }));
+  };
+
+  return (
+    <div className="mt-3 border border-blue-800/50 rounded-lg p-3 bg-blue-950/20 space-y-3">
+      <div className="text-xs font-semibold text-blue-300 flex items-center gap-1.5">
+        <Plus className="h-3 w-3" />创建新 Service
+      </div>
+
+      {/* 基本信息 */}
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <Label className="dg-text-muted text-[11px]"> {i18n.t('kubernetes.secret.secretName')} </Label>
+          <Input value={svcForm.name} onChange={e => setSvcForm(s => ({ ...s, name: e.target.value }))}
+            placeholder={`${deploymentName}-svc`}
+            className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
+        </div>
+        <div>
+          <Label className="dg-text-muted text-[11px]"> {i18n.t('system.credentialType')} </Label>
+          <select value={svcForm.type} onChange={e => setSvcForm(s => ({ ...s, type: e.target.value }))}
+            className="h-7 mt-0.5 w-full bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2">
+            <option value="ClusterIP">ClusterIP</option>
+            <option value="NodePort">NodePort</option>
+          </select>
+        </div>
+      </div>
+
+      {/* 快速预设 */}
+      <div>
+        <Label className="dg-text-muted text-[11px] mb-1 block"> {i18n.t('kubernetes.deploymentedits.s83907cde')} </Label>
+        <div className="flex gap-1.5">
+          {PORT_PRESETS.map(p => (
+            <button key={p.name} onClick={() => addPort(p)}
+              className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium
+                bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:border-blue-500/50 hover:text-blue-300 transition-colors">
+              <Zap className="h-2.5 w-2.5" />
+              {p.label}
+              <span className="dg-text-muted text-[9px]">{p.protocol} {p.port}:{p.targetPort}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 端口列表 */}
+      <div className="space-y-2">
+        <Label className="dg-text-muted text-[11px]">
+          端口配置 <span className="dg-text-muted">({svcForm.ports.length} 个端口)</span>
+        </Label>
+        {svcForm.ports.map((p, i) => (
+          <div key={i} className="flex items-center gap-1.5 p-2 rounded bg-[var(--dg-bg-tertiary)]/50 border border-[var(--dg-border)]/50">
+            {/* 名称 */}
+            <Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)}
+              placeholder="http"
+              className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
+            {/* 协议 */}
+            <select value={p.protocol} onChange={e => updatePort(i, 'protocol', e.target.value)}
+              className="h-7 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-1.5 w-16">
+              <option value="TCP">TCP</option>
+              <option value="UDP">UDP</option>
+            </select>
+            {/* port → targetPort */}
+            <Input value={p.port} onChange={e => updatePort(i, 'port', e.target.value)}
+              type="number" placeholder="port"
+              className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
+            <span className="dg-text-muted text-[10px]">→</span>
+            <Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)}
+              type="number" placeholder="targetPort"
+              className="h-7 w-[72px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
+            {/* NodePort (仅 NodePort 类型) */}
+            {svcForm.type === 'NodePort' && (
+              <Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)}
+                type="number" placeholder="30000-32767"
+                className="h-7 w-[80px] dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
+            )}
+            {/* 删除 */}
+            <Button size="icon" variant="ghost" className="h-6 w-6 dg-text-muted hover:dg-text-red"
+              onClick={() => removePort(i)} disabled={svcForm.ports.length <= 1}>
+              <Minus className="h-3 w-3" />
+            </Button>
+          </div>
+        ))}
+        {/* 添加自定义端口 */}
+        <Button size="sm" variant="outline" className="h-7 w-full border-dashed border-[var(--dg-border)] dg-text-secondary text-xs"
+          onClick={() => addPort()}>
+          <Plus className="h-3 w-3 mr-1" />添加自定义端口
+        </Button>
+      </div>
+
+      {/* Selector 预览 */}
+      <div className="text-[10px] dg-text-muted border-t border-[var(--dg-border)]/50 pt-2">
+        <span className="dg-text-muted">selector (自动检测): </span>
+        {Object.keys(selectorLabels).length > 0 ? (
+          Object.entries(selectorLabels).map(([k, v]) => (
+            <code key={k} className="bg-[var(--dg-bg-tertiary)] px-1 py-0.5 rounded dg-text-secondary ml-1">{k}={v}</code>
+          ))
+        ) : (
+          <span className="dg-text-muted italic"> {i18n.t('kubernetes.deploymentedits.s5847b0f9')} </span>
+        )}
+      </div>
+
+      <div className="flex justify-end gap-2 pt-1">
+        <Button size="sm" variant="ghost" className="h-7 text-xs dg-text-secondary" onClick={onCancel}> {i18n.t('rbac.jobRole.cancel')} </Button>
+        <Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={onCreate}> {i18n.t('rbac.jobRole.create')} </Button>
+      </div>
+    </div>
+  );
+}