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 测试通过

frontend/src/components/kubernetes/deployment-edit-service/IngressCreateForm.tsx

@@ -0,0 +1,61 @@
+// deployment-edit-service/IngressCreateForm.tsx — 创建 Ingress 表单
+// 受控组件：接收 ingForm + setIngForm，纯表单输入。
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Plus } from 'lucide-react';
+import i18n from '@/i18n';
+import type { IngFormState } from './types';
+
+interface Props {
+  ingForm: IngFormState;
+  setIngForm: React.Dispatch<React.SetStateAction<IngFormState>>;
+  deploymentName: string;
+  onCancel: () => void;
+  onCreate: () => void;
+}
+
+export function IngressCreateForm({ ingForm, setIngForm, deploymentName, onCancel, onCreate }: Props) {
+  return (
+    <div className="mt-3 border border-purple-800/50 rounded-lg p-3 bg-purple-950/20 space-y-2">
+      <div className="text-xs font-semibold text-purple-300 flex items-center gap-1.5">
+        <Plus className="h-3 w-3" />创建新 Ingress
+      </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={ingForm.name} onChange={e => setIngForm(s => ({ ...s, name: e.target.value }))}
+            placeholder={`${deploymentName}-ingress`}
+            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]">ingressClassName</Label>
+          <Input value={ingForm.className} onChange={e => setIngForm(s => ({ ...s, className: e.target.value }))}
+            placeholder="nginx"
+            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]">host (域名)</Label>
+          <Input value={ingForm.host} onChange={e => setIngForm(s => ({ ...s, host: e.target.value }))}
+            placeholder="app.example.com"
+            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]">path</Label>
+          <Input value={ingForm.path} onChange={e => setIngForm(s => ({ ...s, path: e.target.value }))}
+            placeholder="/"
+            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]">Service 端口</Label>
+          <Input type="number" value={ingForm.svcPort} onChange={e => setIngForm(s => ({ ...s, svcPort: e.target.value }))}
+            className="h-7 mt-0.5 dg-input text-[var(--dg-text-secondary)] text-xs font-mono" />
+        </div>
+      </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-purple-600 hover:bg-purple-700 text-xs" onClick={onCreate}> {i18n.t('rbac.jobRole.create')} </Button>
+      </div>
+    </div>
+  );
+}

frontend/src/components/kubernetes/deployment-edit-service/IngressListItem.tsx

@@ -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>
+  );
+}

frontend/src/components/kubernetes/deployment-edit-service/ServiceCreateForm.tsx

@@ -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>
+  );
+}

frontend/src/components/kubernetes/deployment-edit-service/ServiceListItem.tsx

@@ -0,0 +1,52 @@
+// deployment-edit-service/ServiceListItem.tsx — 单个 Service 卡片（关联高亮 + 端口 + selector）
+// 纯展示组件：接收 svc + matched 状态 + 编辑/删除回调。
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { CheckCircle, Network, Pencil, Trash2 } from 'lucide-react';
+import i18n from '@/i18n';
+import type { SvcSummary } from './types';
+
+interface Props {
+  svc: SvcSummary;
+  matched: boolean;
+  onEdit: () => void;
+  onDelete: () => void;
+}
+
+export function ServiceListItem({ svc, matched, onEdit, onDelete }: Props) {
+  return (
+    <div className={`rounded-lg border p-3 ${matched ? 'border-blue-700/50 bg-blue-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-blue" /> : <Network className="h-4 w-4 dg-text-muted" />}
+        <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{svc.name}</span>
+        <Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px]">{svc.type}</Badge>
+        {matched && <Badge className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-[10px]"> {i18n.t('kubernetes.deploymentedits.s1c3cf7f5')} </Badge>}
+        <code className="text-[11px] dg-text-muted ml-auto">{svc.clusterIP}</code>
+        <Button size="sm" variant="ghost" className="h-6 text-xs dg-text-green"
+          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.service.deleteService')} onClick={onDelete}>
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      </div>
+      {/* Ports */}
+      <div className="mt-2 flex flex-wrap gap-1.5 text-[11px]">
+        {svc.ports.map((p, i) => (
+          <code key={i} className="bg-[var(--dg-bg-tertiary)]/60 px-1.5 py-0.5 rounded text-[var(--dg-text-secondary)]">
+            {p.name && <span className="dg-text-muted">{p.name}: </span>}
+            {p.port}→{String(p.targetPort)}{p.nodePort ? `/NodePort:${p.nodePort}` : ''}/{p.protocol}
+          </code>
+        ))}
+      </div>
+      {/* Selector */}
+      <div className="mt-1 flex flex-wrap gap-1 text-[10px]">
+        <span className="dg-text-muted">selector:</span>
+        {Object.entries(svc.selector).map(([k, v]) => (
+          <code key={k} className="dg-text-muted">{k}={v}</code>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/components/kubernetes/deployment-edit-service/types.ts

@@ -0,0 +1,78 @@
+// deployment-edit-service/types.ts — Deployment 关联 Service/Ingress 编辑器的类型与常量
+// 纯数据/类型定义，零 React 依赖。
+
+export interface SvcPort {
+  port: number;
+  targetPort: unknown;
+  protocol: string;
+  nodePort?: number;
+  name?: string;
+}
+
+export interface SvcSummary {
+  name: string;
+  type: string;
+  clusterIP: string;
+  externalIP: string;
+  ports: SvcPort[];
+  selector: Record<string, string>;
+  age: string;
+  raw: unknown;
+}
+
+export interface IngBackend {
+  service: string;
+  port: unknown;
+}
+
+export interface IngPath {
+  path: string;
+  backend: IngBackend;
+}
+
+export interface IngRule {
+  host: string;
+  paths: IngPath[];
+}
+
+export interface IngSummary {
+  name: string;
+  className: string;
+  hosts: string[];
+  rules: IngRule[];
+  raw: unknown;
+}
+
+export interface SvcPortFormItem {
+  name: string;
+  port: string;
+  targetPort: string;
+  protocol: 'TCP' | 'UDP';
+  nodePort: string;
+}
+
+export interface SvcFormState {
+  name: string;
+  type: string;
+  ports: SvcPortFormItem[];
+}
+
+export interface IngFormState {
+  name: string;
+  className: string;
+  host: string;
+  path: string;
+  pathType: string;
+  svcPort: string;
+}
+
+// 3 种常用端口预设
+export const PORT_PRESETS = [
+  { label: 'HTTP', protocol: 'TCP' as const, port: 8080, targetPort: 8080, name: 'http' },
+  { label: 'WebSocket', protocol: 'TCP' as const, port: 8001, targetPort: 8002, name: 'ws' },
+  { label: 'gRPC', protocol: 'TCP' as const, port: 8002, targetPort: 8002, name: 'grpc' },
+];
+
+// 将后端返回的多种形态统一为数组
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const toArray = (v: any) => (Array.isArray(v) ? v : (v?.list || v?.items || v?.data || []));