From 892cb85676201fe3ecec4db86e71fc91346b8332 Mon Sep 17 00:00:00 2001
From: attacker <attacker@gitee.com>
Date: Mon, 6 Jul 2026 20:20:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor(quality):=20Q6=20=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=B7=A8=E5=9E=8B=E7=BB=84=E4=BB=B6=E6=8B=86=E5=88=86=20?=
 =?UTF-8?q?=E2=80=94=20ResourceVisualEditor=20882L=E2=86=92282L=20(-68%),?=
 =?UTF-8?q?=20=E6=8F=90=E5=8F=96=205=20=E4=B8=AA=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?=E8=B5=84=E6=BA=90=E7=BC=96=E8=BE=91=E5=99=A8=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 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 测试通过
---
 PROJECT_EVALUATION.md                         |   2 +-
 ROADMAP.md                                    |  35 +
 .../kubernetes/ResourceVisualEditor.tsx       | 612 +-----------------
 .../ConfigMapEditor.tsx                       |  95 +++
 .../resource-visual-editors/IngressEditor.tsx | 215 ++++++
 .../resource-visual-editors/PvcEditor.tsx     |  90 +++
 .../resource-visual-editors/SecretEditor.tsx  | 114 ++++
 .../resource-visual-editors/ServiceEditor.tsx | 155 +++++
 8 files changed, 711 insertions(+), 607 deletions(-)
 create mode 100644 frontend/src/components/kubernetes/resource-visual-editors/ConfigMapEditor.tsx
 create mode 100644 frontend/src/components/kubernetes/resource-visual-editors/IngressEditor.tsx
 create mode 100644 frontend/src/components/kubernetes/resource-visual-editors/PvcEditor.tsx
 create mode 100644 frontend/src/components/kubernetes/resource-visual-editors/SecretEditor.tsx
 create mode 100644 frontend/src/components/kubernetes/resource-visual-editors/ServiceEditor.tsx

diff --git a/PROJECT_EVALUATION.md b/PROJECT_EVALUATION.md
index b8c891f..2279a48 100644
--- a/PROJECT_EVALUATION.md
+++ b/PROJECT_EVALUATION.md
@@ -129,7 +129,7 @@
 | ~~`api.ts` 1324 行/352 方法~~ → 已拆分为 12 个域文件 (api/kubernetes.ts, deploy.ts, monitor.ts 等) | ✅ 已解决 | 前端 | ~~P0~~ done |
 | 前端 **1026 处** `any` 类型 | 类型安全缺失，重构风险高 | 前端全局 | ~~P0~~ **done** (any 1076→40, unused 25→6, console 93→1, tsc --noEmit=0) |
 | ~~K8s 双路由体系（集群域+Kuboard 域）~~ → code 路由统一为主，ID 路由标记 deprecated 向后兼容 | ✅ 已解决 | 后端 | ~~P1~~ done |
-| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 |
+| 25 个 ≥500 行巨型组件 | 拆分困难 | 前端 | P1 → **Q6 done: 最大组件 ResourceVisualEditor 882L→282L (-68%)，提取 5 个独立编辑器文件** |
 
 ### 3.2 🟡 中优先级
 
diff --git a/ROADMAP.md b/ROADMAP.md
index 0538e5e..177d68b 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -477,6 +477,7 @@ services/api.ts (1324L)
 | Q4+ | 后端错误处理治理扩展（Q5: RDP/API Token/AIOps 模块 `_ =` DB 写入） | P0 | **done** |
 | U13 | 主机监控大屏挂载（HostMonitorDashboard 死代码复活） | P3 | **done** |
 | U14 | ESLint 冗余 disable 指令清理（unused eslint-disable 6→0） | P3 | **done** |
+| Q6 | 前端巨型组件拆分（ResourceVisualEditor 882L→282L，提取 5 个独立编辑器） | P0 | **done** |
 
 ---
 
@@ -610,3 +611,37 @@ pending → in_progress → done / blocked
 - [x] `npm run build` 零错误（✓ built in 16.93s）
 - [x] 17/17 集成回归测试通过（零回归）
 - [x] Docker 部署 healthy（改动不影响运行时）
+
+---
+
+## Q6: 前端巨型组件拆分 — ResourceVisualEditor [done]
+
+**问题**: `ResourceVisualEditor.tsx`（882 行）是项目最大的前端组件，包含 5 个内联资源编辑器（ConfigMap/Secret/Service/Ingress/PVC），是 PROJECT_EVALUATION.md 3.1 🔴 高优先级技术债"25 个 ≥500 行巨型组件"中最大的一个。单文件过大导致维护困难、代码导航低效。
+
+**已完成 (2026-07-06)**:
+
+将 5 个内联资源编辑器提取为 `resource-visual-editors/` 子目录下的独立文件:
+
+| 新文件 | 行数 | 职责 |
+|--------|------|------|
+| `ConfigMapEditor.tsx` | 95 | ConfigMap 键值对表格编辑器 |
+| `SecretEditor.tsx` | 114 | Secret 键值对表格 (Base64 编码/解码) |
+| `ServiceEditor.tsx` | 155 | Service 端口/类型/选择器编辑器 |
+| `IngressEditor.tsx` | 215 | Ingress Host/Path 路由规则编辑器 |
+| `PvcEditor.tsx` | 90 | PVC 存储大小/访问模式/StorageClass 编辑器 |
+
+主文件 `ResourceVisualEditor.tsx` 从 **882 行降至 282 行**（-68%），仅保留：加载/保存逻辑、YAML/可视化模式切换、资源类型分发（dispatch）。
+
+**提取原则**: 每个子编辑器是自包含的函数组件，接收 `{manifest, onSave, saving, isCreate}` props（IngressEditor 额外接收 `clusterCode`），无共享状态。提取为纯机械操作（移动函数 + 添加 import/export），零逻辑变更。
+
+**验收标准**:
+- [x] ResourceVisualEditor.tsx 从 882 行降至 **282 行**（-68%）
+- [x] 5 个提取的编辑器文件全部 < 220 行
+- [x] `tsc -b` 零错误
+- [x] `npm run build` 零错误（✓ built in 16.11s）
+- [x] ESLint errors 保持 **0**（清理 11 个 unused import）
+- [x] ESLint warnings 保持 **59**（无新增）
+- [x] `go build` 零错误
+- [x] 17/17 集成回归测试通过（零回归）
+- [x] Docker 部署 healthy
+- [x] K8s 资源 YAML API 链路验证通过（visual editor dispatch 正常）
diff --git a/frontend/src/components/kubernetes/ResourceVisualEditor.tsx b/frontend/src/components/kubernetes/ResourceVisualEditor.tsx
index f3bd060..dff1f79 100644
--- a/frontend/src/components/kubernetes/ResourceVisualEditor.tsx
+++ b/frontend/src/components/kubernetes/ResourceVisualEditor.tsx
@@ -2,13 +2,9 @@
 // ResourceVisualEditor — ConfigMap/Secret/Service/Ingress/PVC 可视化编辑 // Logan.Li
 import { useState, useEffect, useCallback } from 'react';
 import type { ComponentType } from 'react';
-import { X, Save, Loader2, Plus, Trash2, FileText, Network, Shield, Database, ChevronRight} from 'lucide-react';
+import { X, Loader2, FileText, Network, Shield, Database, ChevronRight} from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ModalOverlay } from '@/components/ui/modal-overlay';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Textarea } from '@/components/ui/textarea';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { useToast } from '@/hooks/use-toast';
 import { kubernetesApi } from '@/api';
 import { createEmptyManifest } from './resource-create-templates';
@@ -18,6 +14,11 @@ import { YamlCodeMirror } from './YamlCodeMirror';
 import { getYamlResourceConfig, yamlDownloadFilename } from './k8s-yaml-resource-config';
 import { downloadYamlFile } from '@/utils/export';
 import i18n from '@/i18n';
+import { ConfigMapEditor } from './resource-visual-editors/ConfigMapEditor';
+import { SecretEditor } from './resource-visual-editors/SecretEditor';
+import { ServiceEditor } from './resource-visual-editors/ServiceEditor';
+import { IngressEditor } from './resource-visual-editors/IngressEditor';
+import { PvcEditor } from './resource-visual-editors/PvcEditor';
 
 interface ResourceVisualEditorProps {
   clusterCode: string;
@@ -279,604 +280,3 @@ export function ResourceVisualEditor({ clusterCode, namespace, resource, name, o
   );
 }
 
-// ══════════════════════════════════════════════
-// ConfigMap 编辑器 — 键值对表格
-// ══════════════════════════════════════════════
-function ConfigMapEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
-  const data = manifest?.data || {};
-  const [resName, setResName] = useState(manifest?.metadata?.name || '');
-  const [entries, setEntries] = useState<{ key: string; value: string }[]>(
-    Object.entries(data).map(([key, value]) => ({ key, value: String(value) }))
-  );
-  const [expandAll, setExpandAll] = useState(false);
-
-  const update = (i: number, field: 'key' | 'value', val: string) => {
-    const next = [...entries];
-    next[i] = { ...next[i], [field]: val };
-    setEntries(next);
-  };
-
-  const addRow = () => setEntries([...entries, { key: '', value: '' }]);
-  const removeRow = (i: number) => setEntries(entries.filter((_, idx) => idx !== i));
-
-  const handleSave = () => {
-    const newData: Record<string, string> = {};
-    entries.forEach(e => {
-      if (e.key.trim()) newData[e.key.trim()] = e.value;
-    });
-    onSave({ ...manifest, metadata: { ...manifest.metadata, name: resName.trim() }, data: newData });
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="shrink-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="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.resourcevisuale.s6bd91c09')} </Label>
-          <div className="flex gap-1">
-            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}>
-              {expandAll ? i18n.t('kubernetes.resourcevisuale.s880e849b') : i18n.t('system.expandAll')}
-            </Button>
-            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" /> {i18n.t('monitor.dashboard.custom.addBtn')} </Button>
-          </div>
-        </div>
-        <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2">
-          {entries.map((entry, i) => (
-            <div key={i} className="flex items-start gap-2 p-2 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
-              <Input
-                value={entry.key}
-                onChange={e => update(i, 'key', e.target.value)}
-                placeholder={i18n.t('kubernetes.resourcevisuale.s65017dab')}
-                className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
-              />
-              <Textarea
-                value={entry.value}
-                onChange={e => update(i, 'value', e.target.value)}
-                placeholder={i18n.t('k8s.resourceEditor.sfe7509e0')}
-                rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
-                className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
-              />
-              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
-                <Trash2 className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          ))}
-          {entries.length === 0 && (
-            <div className="text-center py-8 text-[var(--dg-text-muted)] text-xs"> {i18n.t('kubernetes.resourcevisuale.saf7696c3')} </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" />}
-          保存配置
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// ══════════════════════════════════════════════
-// Secret 编辑器 — 键值对表格 (Base64 编码/解码)
-// ══════════════════════════════════════════════
-function SecretEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
-  const rawData = manifest?.data || {};
-  const [resName, setResName] = useState(manifest?.metadata?.name || '');
-  const [expandAll, setExpandAll] = useState(false);
-  // Decode base64 values for editing
-  const [entries, setEntries] = useState<{ key: string; value: string; encoded: boolean }[]>(
-    Object.entries(rawData).map(([key, value]) => {
-      const v = String(value);
-      try {
-        // Try to decode — if it's valid base64
-        const decoded = atob(v);
-        return { key, value: decoded, encoded: true };
-      } catch {
-        return { key, value: v, encoded: false };
-      }
-    })
-  );
-
-  const update = (i: number, field: 'key' | 'value', val: string) => {
-    const next = [...entries];
-    next[i] = { ...next[i], [field]: val };
-    setEntries(next);
-  };
-
-  const addRow = () => setEntries([...entries, { key: '', value: '', encoded: true }]);
-  const removeRow = (i: number) => setEntries(entries.filter((_, idx) => idx !== i));
-
-  const handleSave = () => {
-    const newData: Record<string, string> = {};
-    entries.forEach(e => {
-      if (e.key.trim()) {
-        // Re-encode if originally base64
-        newData[e.key.trim()] = e.encoded ? btoa(e.value) : e.value;
-      }
-    });
-    onSave({ ...manifest, metadata: { ...manifest.metadata, name: resName.trim() }, data: newData });
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="shrink-0 grid grid-cols-2 gap-4">
-        <div>
-          <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>
-          <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('system.credentialType')} </Label>
-          <Input value={manifest?.type || 'Opaque'} readOnly className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
-        </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.resourcevisuale.se1937033')} </Label>
-          <div className="flex gap-1">
-            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}>
-              {expandAll ? i18n.t('kubernetes.resourcevisuale.s880e849b') : i18n.t('system.expandAll')}
-            </Button>
-            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" /> {i18n.t('monitor.dashboard.custom.addBtn')} </Button>
-          </div>
-        </div>
-        <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2">
-          {entries.map((entry, i) => (
-            <div key={i} className="flex items-start gap-2 p-2 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
-              <Input
-                value={entry.key}
-                onChange={e => update(i, 'key', e.target.value)}
-                placeholder={i18n.t('kubernetes.resourcevisuale.scdecc460')}
-                className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
-              />
-              <Textarea
-                value={entry.value}
-                onChange={e => update(i, 'value', e.target.value)}
-                placeholder={i18n.t('kubernetes.resourcevisuale.s7f123dd4')}
-                rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
-                className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
-              />
-              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
-                <Trash2 className="h-3.5 w-3.5" />
-              </Button>
-            </div>
-          ))}
-          {entries.length === 0 && (
-            <div className="text-center py-8 text-[var(--dg-text-muted)] text-xs"> {i18n.t('kubernetes.resourcevisuale.s47ff6900')} </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" />}
-          保存密钥
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// ══════════════════════════════════════════════
-// Service 编辑器 — 端口配置 + 类型 + 选择器
-// ══════════════════════════════════════════════
-function ServiceEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
-  const spec = manifest?.spec || {};
-  const [resName, setResName] = useState(manifest?.metadata?.name || '');
-  const [svcType, setSvcType] = useState(spec.type || 'ClusterIP');
-  const [ports, setPorts] = useState<any[]>(
-    (spec.ports || []).map(( p: any) => ({
-      name: p.name || '',
-      port: String(p.port || ''),
-      targetPort: String(p.targetPort || ''),
-      protocol: p.protocol || 'TCP',
-      nodePort: p.nodePort ? String(p.nodePort) : '',
-    }))
-  );
-  const [selector, setSelector] = useState<{ key: string; value: string }[]>(
-    Object.entries(spec.selector || {}).map(([key, value]) => ({ key, value: String(value) }))
-  );
-
-  const updatePort = (i: number, field: string, val: string) => {
-    const next = [...ports];
-    next[i] = { ...next[i], [field]: val };
-    setPorts(next);
-  };
-  const addPort = () => setPorts([...ports, { name: '', port: '', targetPort: '', protocol: 'TCP', nodePort: '' }]);
-  const removePort = (i: number) => setPorts(ports.filter((_, idx) => idx !== i));
-
-  const updateSelector = (i: number, field: 'key' | 'value', val: string) => {
-    const next = [...selector];
-    next[i] = { ...next[i], [field]: val };
-    setSelector(next);
-  };
-  const addSelector = () => setSelector([...selector, { key: '', value: '' }]);
-  const removeSelector = (i: number) => setSelector(selector.filter((_, idx) => idx !== i));
-
-  const handleSave = () => {
-    const newSpec: Record<string, any> = { ...spec };
-    newSpec.type = svcType;
-    newSpec.ports = ports.map(p => {
-      const port: Record<string, any> = {
-        port: parseInt(p.port) || 80,
-        targetPort: parseInt(p.targetPort) || parseInt(p.port) || 80,
-        protocol: p.protocol,
-      };
-      if (p.name) port.name = p.name;
-      if (p.nodePort && svcType === 'NodePort') port.nodePort = parseInt(p.nodePort);
-      return port;
-    });
-    const selObj: Record<string, string> = {};
-    selector.forEach(s => { if (s.key.trim()) selObj[s.key.trim()] = s.value; });
-    newSpec.selector = selObj;
-    onSave({ ...manifest, metadata: { ...manifest.metadata, name: resName.trim() }, spec: newSpec });
-  };
-
-  const svcTypes = [
-    { value: 'ClusterIP', label: 'ClusterIP' },
-    { value: 'NodePort', label: 'NodePort' },
-    { value: 'LoadBalancer', label: 'LoadBalancer' },
-  ];
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="shrink-0">
-        <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('agent.agentServiceName')} </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="shrink-0 mt-3">
-        <Label className="text-[var(--dg-text-secondary)] text-xs mb-2 block"> {i18n.t('kubernetes.service.serviceType')} </Label>
-        <div className="flex rounded-lg border border-[var(--dg-border)] overflow-hidden w-fit">
-          {svcTypes.map((t) => (
-            <button
-              key={t.value}
-              type="button"
-              className={`px-3 py-1.5 text-xs transition-colors ${svcType === t.value ? 'bg-blue-600 text-white' : 'text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`}
-              onClick={() => setSvcType(t.value)}
-            >
-              {t.label}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* 端口 + 选择器：统一滚动，避免条目过多时底部被裁切 // Logan.Li */}
-      <div className="flex-1 min-h-0 overflow-y-auto mt-3 pr-1 space-y-3">
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <Label className="text-[var(--dg-text-secondary)] text-sm"> {i18n.t('kubernetes.resourcevisuale.s736788dc')} </Label>
-            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addPort}><Plus className="h-3 w-3 mr-1" /> {i18n.t('agent.addPort')} </Button>
-          </div>
-          <div className="space-y-2 border border-[var(--dg-border)] rounded-lg p-2 bg-[var(--dg-bg-secondary)]">
-          {ports.map((p, i) => (
-            <div key={i} className="overflow-x-auto">
-            <div className="grid grid-cols-[minmax(80px,1fr)_80px_80px_80px_80px_32px] gap-2 items-center min-w-[480px]">
-              <Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)} placeholder={i18n.t('kubernetes.secret.secretName')} className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-              <Input value={p.port} onChange={e => updatePort(i, 'port', 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)]" />
-              <Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)} placeholder={i18n.t('monitor.alertEvents.col.target')} type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-              <Select value={p.protocol} onValueChange={v => updatePort(i, 'protocol', 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="TCP">TCP</SelectItem><SelectItem value="UDP">UDP</SelectItem></SelectContent>
-              </Select>
-              {svcType === 'NodePort' ? (
-                <Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)} placeholder="NodePort" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-              ) : <div />}
-              <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePort(i)}><Trash2 className="h-3 w-3" /></Button>
-            </div>
-            </div>
-          ))}
-          {ports.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs"> {i18n.t('kubernetes.resourcevisuale.sf3ba5e52')} </div>}
-          </div>
-        </div>
-
-        {/* Selector */}
-        <div>
-          <div className="flex items-center justify-between mb-2">
-            <Label className="text-[var(--dg-text-secondary)] text-sm"> {i18n.t('kubernetes.resourcevisuale.scecdd712')} </Label>
-            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addSelector}><Plus className="h-3 w-3 mr-1" /> {i18n.t('kubernetes.resourcevisuale.s736eaaae')} </Button>
-          </div>
-          <div className="space-y-2">
-            {selector.map((s, i) => (
-              <div key={i} className="flex items-center gap-2 min-w-0">
-                <Input value={s.key} onChange={e => updateSelector(i, 'key', e.target.value)} placeholder={i18n.t('kubernetes.resourcevisuale.s450c9957')} 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)]" />
-                <span className="text-[var(--dg-text-muted)] text-xs shrink-0">=</span>
-                <Input value={s.value} onChange={e => updateSelector(i, 'value', e.target.value)} placeholder={i18n.t('kubernetes.resourcevisuale.sb873e454')} 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)]" />
-                <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button>
-              </div>
-            ))}
-            {selector.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs"> {i18n.t('k8s.resource.noSelectors')} </div>}
-          </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" />}
-          保存 Service
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// ══════════════════════════════════════════════
-// Ingress 编辑器 — Host/Path 路由规则
-// ══════════════════════════════════════════════
-function IngressEditor({ manifest, clusterCode, onSave, saving, isCreate }: { manifest: any; clusterCode: string; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
-  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>
-  );
-}
-
-// ══════════════════════════════════════════════
-// PVC 编辑器 — 存储大小/访问模式/StorageClass
-// ══════════════════════════════════════════════
-function PvcEditor({ manifest, onSave, saving, isCreate }: { manifest: any; onSave: (m: any) => void; saving: boolean; isCreate?: boolean }) {
-  const spec = manifest?.spec || {};
-  const resources = spec.resources?.requests || {};
-  const [resName, setResName] = useState(manifest?.metadata?.name || '');
-  const [size, setSize] = useState(resources.storage || '1Gi');
-  const [accessMode, setAccessMode] = useState(spec.accessModes?.[0] || 'ReadWriteOnce');
-  const [storageClass, setStorageClass] = useState(spec.storageClassName || '');
-
-  const handleSave = () => {
-    onSave({
-      ...manifest,
-      metadata: { ...manifest.metadata, name: resName.trim() },
-      spec: {
-        ...spec,
-        accessModes: [accessMode],
-        storageClassName: storageClass || undefined,
-        resources: { requests: { storage: size } },
-      },
-    });
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="shrink-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="grid grid-cols-2 gap-4 mt-3 shrink-0">
-        <div>
-          <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('kubernetes.resourcevisuale.s61aa8291')} </Label>
-          <Input
-            value={size}
-            onChange={e => setSize(e.target.value)}
-            placeholder={i18n.t('kubernetes.resourcevisuale.s1b915a5e')}
-            className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
-          />
-          <p className="text-[10px] text-[var(--dg-text-muted)] mt-1"> {i18n.t('kubernetes.resourcevisuale.s6a1c7a2c')} </p>
-        </div>
-        <div>
-          <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('kubernetes.storage.accessModes')} </Label>
-          <Select value={accessMode} onValueChange={setAccessMode}>
-            <SelectTrigger className="mt-1 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] text-xs">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="ReadWriteOnce">ReadWriteOnce (单节点读写)</SelectItem>
-              <SelectItem value="ReadOnlyMany">ReadOnlyMany (多节点只读)</SelectItem>
-              <SelectItem value="ReadWriteMany">ReadWriteMany (多节点读写)</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="shrink-0 mt-1">
-        <Label className="text-[var(--dg-text-secondary)] text-xs">StorageClass</Label>
-        <Input
-          value={storageClass}
-          onChange={e => setStorageClass(e.target.value)}
-          placeholder={i18n.t('kubernetes.resourcevisuale.s06195f6c')}
-          className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
-        />
-      </div>
-
-      <div className="flex-1" />
-
-      <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" />}
-          保存 PVC
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/kubernetes/resource-visual-editors/ConfigMapEditor.tsx b/frontend/src/components/kubernetes/resource-visual-editors/ConfigMapEditor.tsx
new file mode 100644
index 0000000..83f4c84
--- /dev/null
+++ b/frontend/src/components/kubernetes/resource-visual-editors/ConfigMapEditor.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// ConfigMapEditor — ConfigMap 键值对表格可视化编辑器 (从 ResourceVisualEditor.tsx 拆分)
+import { useState } 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 { Textarea } from '@/components/ui/textarea';
+import i18n from '@/i18n';
+
+export interface ConfigMapEditorProps {
+  manifest: any;
+  onSave: (m: any) => void;
+  saving: boolean;
+  isCreate?: boolean;
+}
+
+export function ConfigMapEditor({ manifest, onSave, saving, isCreate }: ConfigMapEditorProps) {
+  const data = manifest?.data || {};
+  const [resName, setResName] = useState(manifest?.metadata?.name || '');
+  const [entries, setEntries] = useState<{ key: string; value: string }[]>(
+    Object.entries(data).map(([key, value]) => ({ key, value: String(value) }))
+  );
+  const [expandAll, setExpandAll] = useState(false);
+
+  const update = (i: number, field: 'key' | 'value', val: string) => {
+    const next = [...entries];
+    next[i] = { ...next[i], [field]: val };
+    setEntries(next);
+  };
+
+  const addRow = () => setEntries([...entries, { key: '', value: '' }]);
+  const removeRow = (i: number) => setEntries(entries.filter((_, idx) => idx !== i));
+
+  const handleSave = () => {
+    const newData: Record<string, string> = {};
+    entries.forEach(e => {
+      if (e.key.trim()) newData[e.key.trim()] = e.value;
+    });
+    onSave({ ...manifest, metadata: { ...manifest.metadata, name: resName.trim() }, data: newData });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="shrink-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="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.resourcevisuale.s6bd91c09')} </Label>
+          <div className="flex gap-1">
+            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}>
+              {expandAll ? i18n.t('kubernetes.resourcevisuale.s880e849b') : i18n.t('system.expandAll')}
+            </Button>
+            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" /> {i18n.t('monitor.dashboard.custom.addBtn')} </Button>
+          </div>
+        </div>
+        <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2">
+          {entries.map((entry, i) => (
+            <div key={i} className="flex items-start gap-2 p-2 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
+              <Input
+                value={entry.key}
+                onChange={e => update(i, 'key', e.target.value)}
+                placeholder={i18n.t('kubernetes.resourcevisuale.s65017dab')}
+                className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
+              />
+              <Textarea
+                value={entry.value}
+                onChange={e => update(i, 'value', e.target.value)}
+                placeholder={i18n.t('k8s.resourceEditor.sfe7509e0')}
+                rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
+                className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
+              />
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          ))}
+          {entries.length === 0 && (
+            <div className="text-center py-8 text-[var(--dg-text-muted)] text-xs"> {i18n.t('kubernetes.resourcevisuale.saf7696c3')} </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" />}
+          保存配置
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/kubernetes/resource-visual-editors/IngressEditor.tsx b/frontend/src/components/kubernetes/resource-visual-editors/IngressEditor.tsx
new file mode 100644
index 0000000..0c5e9be
--- /dev/null
+++ b/frontend/src/components/kubernetes/resource-visual-editors/IngressEditor.tsx
@@ -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>
+  );
+}
diff --git a/frontend/src/components/kubernetes/resource-visual-editors/PvcEditor.tsx b/frontend/src/components/kubernetes/resource-visual-editors/PvcEditor.tsx
new file mode 100644
index 0000000..fb43e3f
--- /dev/null
+++ b/frontend/src/components/kubernetes/resource-visual-editors/PvcEditor.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// PvcEditor — PVC 存储大小/访问模式/StorageClass 可视化编辑器 (从 ResourceVisualEditor.tsx 拆分)
+import { useState } from 'react';
+import { 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 i18n from '@/i18n';
+
+export interface PvcEditorProps {
+  manifest: any;
+  onSave: (m: any) => void;
+  saving: boolean;
+  isCreate?: boolean;
+}
+
+export function PvcEditor({ manifest, onSave, saving, isCreate }: PvcEditorProps) {
+  const spec = manifest?.spec || {};
+  const resources = spec.resources?.requests || {};
+  const [resName, setResName] = useState(manifest?.metadata?.name || '');
+  const [size, setSize] = useState(resources.storage || '1Gi');
+  const [accessMode, setAccessMode] = useState(spec.accessModes?.[0] || 'ReadWriteOnce');
+  const [storageClass, setStorageClass] = useState(spec.storageClassName || '');
+
+  const handleSave = () => {
+    onSave({
+      ...manifest,
+      metadata: { ...manifest.metadata, name: resName.trim() },
+      spec: {
+        ...spec,
+        accessModes: [accessMode],
+        storageClassName: storageClass || undefined,
+        resources: { requests: { storage: size } },
+      },
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="shrink-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="grid grid-cols-2 gap-4 mt-3 shrink-0">
+        <div>
+          <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('kubernetes.resourcevisuale.s61aa8291')} </Label>
+          <Input
+            value={size}
+            onChange={e => setSize(e.target.value)}
+            placeholder={i18n.t('kubernetes.resourcevisuale.s1b915a5e')}
+            className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
+          />
+          <p className="text-[10px] text-[var(--dg-text-muted)] mt-1"> {i18n.t('kubernetes.resourcevisuale.s6a1c7a2c')} </p>
+        </div>
+        <div>
+          <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('kubernetes.storage.accessModes')} </Label>
+          <Select value={accessMode} onValueChange={setAccessMode}>
+            <SelectTrigger className="mt-1 h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="ReadWriteOnce">ReadWriteOnce (单节点读写)</SelectItem>
+              <SelectItem value="ReadOnlyMany">ReadOnlyMany (多节点只读)</SelectItem>
+              <SelectItem value="ReadWriteMany">ReadWriteMany (多节点读写)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <div className="shrink-0 mt-1">
+        <Label className="text-[var(--dg-text-secondary)] text-xs">StorageClass</Label>
+        <Input
+          value={storageClass}
+          onChange={e => setStorageClass(e.target.value)}
+          placeholder={i18n.t('kubernetes.resourcevisuale.s06195f6c')}
+          className="mt-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
+        />
+      </div>
+
+      <div className="flex-1" />
+
+      <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" />}
+          保存 PVC
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/kubernetes/resource-visual-editors/SecretEditor.tsx b/frontend/src/components/kubernetes/resource-visual-editors/SecretEditor.tsx
new file mode 100644
index 0000000..904b8c5
--- /dev/null
+++ b/frontend/src/components/kubernetes/resource-visual-editors/SecretEditor.tsx
@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// SecretEditor — Secret 键值对表格可视化编辑器 (Base64 编码/解码, 从 ResourceVisualEditor.tsx 拆分)
+import { useState } 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 { Textarea } from '@/components/ui/textarea';
+import i18n from '@/i18n';
+
+export interface SecretEditorProps {
+  manifest: any;
+  onSave: (m: any) => void;
+  saving: boolean;
+  isCreate?: boolean;
+}
+
+export function SecretEditor({ manifest, onSave, saving, isCreate }: SecretEditorProps) {
+  const rawData = manifest?.data || {};
+  const [resName, setResName] = useState(manifest?.metadata?.name || '');
+  const [expandAll, setExpandAll] = useState(false);
+  // Decode base64 values for editing
+  const [entries, setEntries] = useState<{ key: string; value: string; encoded: boolean }[]>(
+    Object.entries(rawData).map(([key, value]) => {
+      const v = String(value);
+      try {
+        // Try to decode — if it's valid base64
+        const decoded = atob(v);
+        return { key, value: decoded, encoded: true };
+      } catch {
+        return { key, value: v, encoded: false };
+      }
+    })
+  );
+
+  const update = (i: number, field: 'key' | 'value', val: string) => {
+    const next = [...entries];
+    next[i] = { ...next[i], [field]: val };
+    setEntries(next);
+  };
+
+  const addRow = () => setEntries([...entries, { key: '', value: '', encoded: true }]);
+  const removeRow = (i: number) => setEntries(entries.filter((_, idx) => idx !== i));
+
+  const handleSave = () => {
+    const newData: Record<string, string> = {};
+    entries.forEach(e => {
+      if (e.key.trim()) {
+        // Re-encode if originally base64
+        newData[e.key.trim()] = e.encoded ? btoa(e.value) : e.value;
+      }
+    });
+    onSave({ ...manifest, metadata: { ...manifest.metadata, name: resName.trim() }, data: newData });
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="shrink-0 grid grid-cols-2 gap-4">
+        <div>
+          <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>
+          <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('system.credentialType')} </Label>
+          <Input value={manifest?.type || 'Opaque'} readOnly className="mt-1 font-mono text-xs bg-[var(--dg-bg-tertiary)]" />
+        </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.resourcevisuale.se1937033')} </Label>
+          <div className="flex gap-1">
+            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={() => setExpandAll(!expandAll)}>
+              {expandAll ? i18n.t('kubernetes.resourcevisuale.s880e849b') : i18n.t('system.expandAll')}
+            </Button>
+            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addRow}><Plus className="h-3 w-3 mr-1" /> {i18n.t('monitor.dashboard.custom.addBtn')} </Button>
+          </div>
+        </div>
+        <div className="flex-1 min-h-0 overflow-y-auto pr-1 space-y-2 border border-[var(--dg-border)] rounded-lg bg-[var(--dg-bg-secondary)] p-2">
+          {entries.map((entry, i) => (
+            <div key={i} className="flex items-start gap-2 p-2 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
+              <Input
+                value={entry.key}
+                onChange={e => update(i, 'key', e.target.value)}
+                placeholder={i18n.t('kubernetes.resourcevisuale.scdecc460')}
+                className="flex-1 font-mono text-xs h-8 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]"
+              />
+              <Textarea
+                value={entry.value}
+                onChange={e => update(i, 'value', e.target.value)}
+                placeholder={i18n.t('kubernetes.resourcevisuale.s7f123dd4')}
+                rows={expandAll || entry.value.length > 300 ? 10 : (entry.value.length > 100 ? 6 : 3)}
+                className="flex-[2] font-mono text-xs min-h-[70px] max-h-[420px] resize-y bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] leading-relaxed"
+              />
+              <Button variant="ghost" size="icon" className="h-8 w-8 dg-text-red hover:dg-text-red shrink-0" onClick={() => removeRow(i)}>
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          ))}
+          {entries.length === 0 && (
+            <div className="text-center py-8 text-[var(--dg-text-muted)] text-xs"> {i18n.t('kubernetes.resourcevisuale.s47ff6900')} </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" />}
+          保存密钥
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/kubernetes/resource-visual-editors/ServiceEditor.tsx b/frontend/src/components/kubernetes/resource-visual-editors/ServiceEditor.tsx
new file mode 100644
index 0000000..24c4598
--- /dev/null
+++ b/frontend/src/components/kubernetes/resource-visual-editors/ServiceEditor.tsx
@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// ServiceEditor — Service 端口配置 + 类型 + 选择器可视化编辑器 (从 ResourceVisualEditor.tsx 拆分)
+import { useState } 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 i18n from '@/i18n';
+
+export interface ServiceEditorProps {
+  manifest: any;
+  onSave: (m: any) => void;
+  saving: boolean;
+  isCreate?: boolean;
+}
+
+export function ServiceEditor({ manifest, onSave, saving, isCreate }: ServiceEditorProps) {
+  const spec = manifest?.spec || {};
+  const [resName, setResName] = useState(manifest?.metadata?.name || '');
+  const [svcType, setSvcType] = useState(spec.type || 'ClusterIP');
+  const [ports, setPorts] = useState<any[]>(
+    (spec.ports || []).map(( p: any) => ({
+      name: p.name || '',
+      port: String(p.port || ''),
+      targetPort: String(p.targetPort || ''),
+      protocol: p.protocol || 'TCP',
+      nodePort: p.nodePort ? String(p.nodePort) : '',
+    }))
+  );
+  const [selector, setSelector] = useState<{ key: string; value: string }[]>(
+    Object.entries(spec.selector || {}).map(([key, value]) => ({ key, value: String(value) }))
+  );
+
+  const updatePort = (i: number, field: string, val: string) => {
+    const next = [...ports];
+    next[i] = { ...next[i], [field]: val };
+    setPorts(next);
+  };
+  const addPort = () => setPorts([...ports, { name: '', port: '', targetPort: '', protocol: 'TCP', nodePort: '' }]);
+  const removePort = (i: number) => setPorts(ports.filter((_, idx) => idx !== i));
+
+  const updateSelector = (i: number, field: 'key' | 'value', val: string) => {
+    const next = [...selector];
+    next[i] = { ...next[i], [field]: val };
+    setSelector(next);
+  };
+  const addSelector = () => setSelector([...selector, { key: '', value: '' }]);
+  const removeSelector = (i: number) => setSelector(selector.filter((_, idx) => idx !== i));
+
+  const handleSave = () => {
+    const newSpec: Record<string, any> = { ...spec };
+    newSpec.type = svcType;
+    newSpec.ports = ports.map(p => {
+      const port: Record<string, any> = {
+        port: parseInt(p.port) || 80,
+        targetPort: parseInt(p.targetPort) || parseInt(p.port) || 80,
+        protocol: p.protocol,
+      };
+      if (p.name) port.name = p.name;
+      if (p.nodePort && svcType === 'NodePort') port.nodePort = parseInt(p.nodePort);
+      return port;
+    });
+    const selObj: Record<string, string> = {};
+    selector.forEach(s => { if (s.key.trim()) selObj[s.key.trim()] = s.value; });
+    newSpec.selector = selObj;
+    onSave({ ...manifest, metadata: { ...manifest.metadata, name: resName.trim() }, spec: newSpec });
+  };
+
+  const svcTypes = [
+    { value: 'ClusterIP', label: 'ClusterIP' },
+    { value: 'NodePort', label: 'NodePort' },
+    { value: 'LoadBalancer', label: 'LoadBalancer' },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="shrink-0">
+        <Label className="text-[var(--dg-text-secondary)] text-xs"> {i18n.t('agent.agentServiceName')} </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="shrink-0 mt-3">
+        <Label className="text-[var(--dg-text-secondary)] text-xs mb-2 block"> {i18n.t('kubernetes.service.serviceType')} </Label>
+        <div className="flex rounded-lg border border-[var(--dg-border)] overflow-hidden w-fit">
+          {svcTypes.map((t) => (
+            <button
+              key={t.value}
+              type="button"
+              className={`px-3 py-1.5 text-xs transition-colors ${svcType === t.value ? 'bg-blue-600 text-white' : 'text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-tertiary)]'}`}
+              onClick={() => setSvcType(t.value)}
+            >
+              {t.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 端口 + 选择器：统一滚动，避免条目过多时底部被裁切 // Logan.Li */}
+      <div className="flex-1 min-h-0 overflow-y-auto mt-3 pr-1 space-y-3">
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <Label className="text-[var(--dg-text-secondary)] text-sm"> {i18n.t('kubernetes.resourcevisuale.s736788dc')} </Label>
+            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addPort}><Plus className="h-3 w-3 mr-1" /> {i18n.t('agent.addPort')} </Button>
+          </div>
+          <div className="space-y-2 border border-[var(--dg-border)] rounded-lg p-2 bg-[var(--dg-bg-secondary)]">
+          {ports.map((p, i) => (
+            <div key={i} className="overflow-x-auto">
+            <div className="grid grid-cols-[minmax(80px,1fr)_80px_80px_80px_80px_32px] gap-2 items-center min-w-[480px]">
+              <Input value={p.name} onChange={e => updatePort(i, 'name', e.target.value)} placeholder={i18n.t('kubernetes.secret.secretName')} className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+              <Input value={p.port} onChange={e => updatePort(i, 'port', 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)]" />
+              <Input value={p.targetPort} onChange={e => updatePort(i, 'targetPort', e.target.value)} placeholder={i18n.t('monitor.alertEvents.col.target')} type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+              <Select value={p.protocol} onValueChange={v => updatePort(i, 'protocol', 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="TCP">TCP</SelectItem><SelectItem value="UDP">UDP</SelectItem></SelectContent>
+              </Select>
+              {svcType === 'NodePort' ? (
+                <Input value={p.nodePort} onChange={e => updatePort(i, 'nodePort', e.target.value)} placeholder="NodePort" type="number" className="font-mono text-xs h-7 bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
+              ) : <div />}
+              <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => removePort(i)}><Trash2 className="h-3 w-3" /></Button>
+            </div>
+            </div>
+          ))}
+          {ports.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs"> {i18n.t('kubernetes.resourcevisuale.sf3ba5e52')} </div>}
+          </div>
+        </div>
+
+        {/* Selector */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <Label className="text-[var(--dg-text-secondary)] text-sm"> {i18n.t('kubernetes.resourcevisuale.scecdd712')} </Label>
+            <Button variant="outline" size="sm" className="h-7 text-xs" onClick={addSelector}><Plus className="h-3 w-3 mr-1" /> {i18n.t('kubernetes.resourcevisuale.s736eaaae')} </Button>
+          </div>
+          <div className="space-y-2">
+            {selector.map((s, i) => (
+              <div key={i} className="flex items-center gap-2 min-w-0">
+                <Input value={s.key} onChange={e => updateSelector(i, 'key', e.target.value)} placeholder={i18n.t('kubernetes.resourcevisuale.s450c9957')} 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)]" />
+                <span className="text-[var(--dg-text-muted)] text-xs shrink-0">=</span>
+                <Input value={s.value} onChange={e => updateSelector(i, 'value', e.target.value)} placeholder={i18n.t('kubernetes.resourcevisuale.sb873e454')} 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)]" />
+                <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0 dg-text-red hover:dg-text-red" onClick={() => removeSelector(i)}><Trash2 className="h-3 w-3" /></Button>
+              </div>
+            ))}
+            {selector.length === 0 && <div className="text-center py-4 text-[var(--dg-text-muted)] text-xs"> {i18n.t('k8s.resource.noSelectors')} </div>}
+          </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" />}
+          保存 Service
+        </Button>
+      </div>
+    </div>
+  );
+}