refactor(quality): Q6 前端巨型组件拆分 — ResourceVisualEditor 882L→282L (-68%), 提取 5 个独立资源编辑器文件

将 ResourceVisualEditor.tsx (882L, 项目最大前端组件) 中的 5 个内联资源编辑器提取为 resource-visual-editors/ 子目录下的独立文件: - ConfigMapEditor.tsx (95L) — ConfigMap 键值对表格 - SecretEditor.tsx (114L) — Secret Base64 编解码 - ServiceEditor.tsx (155L) — Service 端口/类型/选择器 - IngressEditor.tsx (215L) — Ingress Host/Path 路由规则 - PvcEditor.tsx (90L) — PVC 存储配置主文件仅保留加载/保存逻辑 + YAML/可视化切换 + 资源类型分发。清理 11 个 unused import。零逻辑变更，纯机械提取。验证: tsc -b=0, npm build✓ (16.11s), ESLint errors=0, 17/17 测试通过
2026-07-06 20:20:59 +08:00
1 parent 5d4a99b8a9
commit 892cb85676
@@ -0,0 +1,215 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// IngressEditor — Ingress Host/Path 路由规则可视化编辑器 (从 ResourceVisualEditor.tsx 拆分)
+import { useState, useEffect } from 'react';
+import { Plus, Trash2, Loader2, Save } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { kubernetesApi } from '@/api';
+import i18n from '@/i18n';
+
+export interface IngressEditorProps {
+  manifest: any;
+  clusterCode: string;
+  onSave: (m: any) => void;
+  saving: boolean;
+  isCreate?: boolean;
+}
+
+export function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: IngressEditorProps) {
+  const spec = manifest?.spec || {};
+  const [resName, setResName] = useState(manifest?.metadata?.name || '');
+  const [ingressClass, setIngressClass] = useState(spec.ingressClassName || 'nginx');
+  // IngressClass 列表（关联集群中的 IngressController）
+  const [ingressClasses, setIngressClasses] = useState<Array<{ name: string; controller: string }>>([]);
+  const [loadingClasses, setLoadingClasses] = useState(false);
+
+  // 加载集群 IngressClass 列表
+  useEffect(() => {
+    if (!clusterCode) return;
+    setLoadingClasses(true);
+    kubernetesApi.getIngressClasses(clusterCode).then((res: any) => {
+      const list = Array.isArray(res) ? res : (res?.list || res || []);
+      setIngressClasses(list);
+      // 新建时如果还没指定且有列表，尝试默认选第一个
+      if (isCreate && (!spec.ingressClassName || spec.ingressClassName === 'nginx') && list.length > 0) {
+        // 优先选 nginx 或第一个
+        const prefer = list.find((c: any) => c.name?.toLowerCase().includes('nginx')) || list[0];
+        if (prefer?.name) setIngressClass(prefer.name);
+      }
+    }).catch(() => {}).finally(() => setLoadingClasses(false));
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clusterCode]);
+  const [rules, setRules] = useState<{ host: string; paths: { path: string; pathType: string; serviceName: string; servicePort: string }[] }[]>(
+    (spec.rules || []).map(( r: any) => ({
+      host: r.host || '',
+      paths: (r.http?.backend?.servicePort != null
+        ? // Old-style single backend
+          [{ path: '/', pathType: 'Prefix', serviceName: r.http?.backend?.serviceName || '', servicePort: String(r.http?.backend?.servicePort || '80') }]
+        : (r.http?.paths || []).map(( p: any) => ({
+            path: p.path || '/',
+            pathType: p.pathType || 'Prefix',
+            serviceName: p.backend?.service?.name || p.backend?.serviceName || '',
+            servicePort: String(p.backend?.service?.port?.number ?? p.backend?.servicePort ?? '80'),
+          }))
+      ),
+    }))
+  );
+
+  const updateRule = (ri: number, host: string) => {
+    const next = [...rules];
+    next[ri] = { ...next[ri], host };
+    setRules(next);
+  };
+  const addRule = () => setRules([...rules, { host: '', paths: [{ path: '/', pathType: 'Prefix', serviceName: '', servicePort: '80' }] }]);
+  const removeRule = (ri: number) => setRules(rules.filter((_, idx) => idx !== ri));
+
+  const updatePath = (ri: number, pi: number, field: string, val: string) => {
+    const next = [...rules];
+    next[ri].paths[pi] = { ...next[ri].paths[pi], [field]: val };
+    setRules(next);
+  };
+  const addPath = (ri: number) => {
+    const next = [...rules];
+    next[ri].paths.push({ path: '/', pathType: 'Prefix', serviceName: '', servicePort: '80' });
+    setRules(next);
+  };
+  const removePath = (ri: number, pi: number) => {
+    const next = [...rules];
+    next[ri].paths = next[ri].paths.filter((_, idx) => idx !== pi);
+    setRules(next);
+  };
+
+  const handleSave = () => {
+    const newRules = rules.map(r => ({
+      host: r.host,
+      http: {
+        paths: r.paths.map(p => ({
+          path: p.path,
+          pathType: p.pathType,
+          backend: { service: { name: p.serviceName, port: { number: parseInt(p.servicePort) || 80 } } },
+        })),
+      },
+    }));
+    const newSpec: Record<string, any> = { ...spec, rules: newRules };
+    if (ingressClass.trim()) newSpec.ingressClassName = ingressClass.trim();
+    else delete newSpec.ingressClassName;
+    onSave({ ...manifest, metadata: { ...manifest.metadata, name: resName.trim() }, spec: newSpec });
+  };
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="shrink-0 grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="min-w-0">
+          <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('kubernetes.secret.secretName')} </Label>
+          <Input value={resName} onChange={(e) => setResName(e.target.value)} readOnly={!isCreate} className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
+        </div>
+        <div className="min-w-0">
+          <Label className="text-[var(--dg-text-secondary)] text-xs flex items-center gap-1">
+            Ingress Class
+            <span className="text-[10px] text-[var(--dg-text-muted)]">(可选)</span>
+          </Label>
+          {/* IngressClass 下拉 + 手工输入支持 // Logan.Li */}
+          <div className="space-y-1 mt-1">
+            <Select
+              value={ingressClass || ''}
+              onValueChange={(val) => {
+                if (val && val !== '__manual__') {
+                  setIngressClass(val);
+                }
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+                <SelectValue placeholder={loadingClasses ? i18n.t('monitor.logPanel.logResults.loading') : i18n.t('kubernetes.resourcevisuale.s25a87dc9')} />
+              </SelectTrigger>
+              <SelectContent>
+                {ingressClasses.length > 0 ? (
+                  ingressClasses.map((ic) => (
+                    <SelectItem key={ic.name} value={ic.name}>
+                      {ic.name} {ic.controller ? <span className="text-[var(--dg-text-muted)] text-[10px]">({ic.controller})</span> : ''}
+                    </SelectItem>
+                  ))
+                ) : (
+                  !loadingClasses && <div className="px-2 py-1.5 text-xs text-[var(--dg-text-muted)]"> {i18n.t('kubernetes.resourcevisuale.s619a36ce')} </div>
+                )}
+                {/* 当前自定义值作为选项，确保选中态 */}
+                {ingressClass && !ingressClasses.some((ic) => ic.name === ingressClass) && (
+                  <SelectItem value={ingressClass}>{ingressClass} (手动输入)</SelectItem>
+                )}
+                <SelectItem value="__manual__">—— 继续手动输入 ——</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {/* 总是显示输入框支持手工输入或修改 */}
+            <div className="text-[10px] text-[var(--dg-text-muted)] flex items-center gap-1">
+              手工输入：
+              <Input
+                value={ingressClass}
+                onChange={(e) => setIngressClass(e.target.value)}
+                placeholder="alb / nginx / my-ingress-class"
+                className="flex-1 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
+              />
+            </div>
+
+            {/* 帮助提示 */}
+            <div className="text-[10px] text-[var(--dg-text-muted)] leading-tight">
+              您的集群中可能有多个 IngressController，您可在此指定当前 Ingress 对应哪个 IngressController。<br />
+              从 IngressClass 列表选择，或手工输入名称。
+            </div>
+            {/* 常见示例 */}
+            {(ingressClasses.length === 0 || ingressClass) && (
+              <div className="text-[10px] text-[var(--dg-text-muted)]">
+                常见：<span className="font-mono">alb</span> → ingress.k8s.alibabacloud/alb &nbsp;&nbsp; <span className="font-mono">nginx</span> → k8s.io/ingress-nginx
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex-1 min-h-0 flex flex-col mt-3">
+        <div className="flex items-center justify-between mb-2 shrink-0">
+          <Label className="text-[var(--dg-text-secondary)] text-sm"> {i18n.t('kubernetes.ingress.rules')} </Label>
+          <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRule}><Plus className="h-3 w-3 mr-1" /> {i18n.t('kubernetes.resourcevisuale.s4f0a3841')} </Button>
+        </div>
+        <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-3 border border-[var(--dg-border)] rounded-lg p-2 bg-[var(--dg-bg-secondary)]">
+          {rules.map((rule, ri) => (
+            <div key={ri} className="p-3 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] space-y-2 min-w-0">
+              <div className="flex items-center gap-2 min-w-0">
+                <Input
+                  value={rule.host}
+                  onChange={e => updateRule(ri, e.target.value)}
+                  placeholder={i18n.t('kubernetes.resourcevisuale.s33cde95b')}
+                  className="flex-1 min-w-0 font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
+                  title={rule.host}
+                />
+                <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeRule(ri)}><Trash2 className="h-3 w-3" /></Button>
+              </div>
+              {rule.paths.map((p, pi) => (
+                <div key={pi} className="overflow-x-auto pl-4">
+                  <div className="grid grid-cols-[minmax(80px,1fr)_100px_minmax(80px,1fr)_60px_28px] gap-1.5 items-center min-w-[420px]">
+                    <Input value={p.path} onChange={e => updatePath(ri, pi, 'path', e.target.value)} placeholder={i18n.t('kubernetes.resourcevisuale.sdfd5ebd4')} className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                    <Select value={p.pathType} onValueChange={v => updatePath(ri, pi, 'pathType', v)}>
+                      <SelectTrigger className="h-7 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"><SelectValue /></SelectTrigger>
+                      <SelectContent><SelectItem value="Prefix">Prefix</SelectItem><SelectItem value="Exact">Exact</SelectItem></SelectContent>
+                    </Select>
+                    <Input value={p.serviceName} onChange={e => updatePath(ri, pi, 'serviceName', e.target.value)} placeholder="Service" className="font-mono text-xs h-7 min-w-0 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                    <Input value={p.servicePort} onChange={e => updatePath(ri, pi, 'servicePort', e.target.value)} placeholder={i18n.t('system.ldapPort')} type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+                    <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePath(ri, pi)}><Trash2 className="h-3 w-3" /></Button>
+                  </div>
+                </div>
+              ))}
+              <Button variant="ghost" size="sm" className="h-6 text-xs text-[var(--dg-text-muted)]" onClick={() => addPath(ri)}><Plus className="h-3 w-3 mr-1" /> {i18n.t('kubernetes.ingress.addPath')} </Button>
+            </div>
+          ))}
+          {rules.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs"> {i18n.t('kubernetes.resourcevisuale.s0b0794a3')} </div>}
+        </div>
+      </div>
+      <div className="shrink-0 flex justify-end gap-2 pt-3 mt-2 border-t border-[var(--dg-border)]">
+        <Button size="sm" className="bg-blue-600 hover:bg-blue-700" onClick={handleSave} disabled={saving}>
+          {saving ? <Loader2 className="h-3.5 w-3.5 animate-spin mr-1" /> : <Save className="h-3.5 w-3.5 mr-1" />}
+          保存 Ingress
+        </Button>
+      </div>
+    </div>
+  );
+}