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

// 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>
  );
}