refactor(k8s): 统一 YAML 精简视图与工具栏（复制/编辑/保存）

- 精简管道：对象剥离 + cleanYAML 默认值清理，查看/编辑默认精简
- 排除 status/managedFields/uid/ownerReferences 等主流噪音字段
- 移除「清理并编辑」「精简」按钮，改为「编辑」+ 文字链「原始 YAML」
- 保存走 prepareYamlForSave，ResourceVisualEditor YAML 模式同步

frontend/src/components/kubernetes/YamlViewer.tsx

@@ -1,14 +1,11 @@
-// YamlViewer.tsx — YAML 查看/编辑器（CodeMirror 6 语法高亮）
-// 支持：语法高亮 + 行号 + 基本校验 + 编辑/保存 + 只读字段清理
-// 作者: Logan <admin@attacker.club>
-import { useState, useEffect, useMemo} from 'react';
-import { X, Copy, Check, Save, Loader2, Sparkles} from 'lucide-react';
+// YamlViewer — YAML 查看/编辑（默认精简视图，工具栏：复制 / 编辑 / 保存）// Logan.Li
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { X, Copy, Check, Save, Loader2, Pencil } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ModalOverlay } from '@/components/ui/modal-overlay';
 import { useToast } from '@/hooks/use-toast';
 import { kubernetesApi } from '@/api';
-import { cleanYAML } from './k8s-yaml-utils';
-import { parseEditableManifest } from './k8s-manifest-utils';
+import { parseEditableManifest, prepareYamlForSave } from './k8s-manifest-utils';
 import CodeMirror from '@uiw/react-codemirror';
 import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
@@ -17,41 +14,76 @@ import { EditorView } from '@codemirror/view';
 interface YamlViewerProps {
   clusterCode: string;
   namespace: string;
-  resource: string;    // e.g. "deployments", "services"
+  resource: string;
   name: string;
   onClose: () => void;
   onSaved?: () => void;
-  /** 进入编辑模式前是否清理只读/噪音字段（managedFields/uid/status 等） */
+  /** @deprecated 始终默认精简，保留兼容 */
   cleanBeforeEdit?: boolean;
-  /** 打开即自动进入编辑模式（编辑按钮专用入口） */
   autoEdit?: boolean;
-  /** 内联模式（非弹窗）— 用于 YAML 编辑模式 Tab */
   inline?: boolean;
-  /** 内联模式下 YAML 内容直接传入 */
   initialYaml?: string;
 }
 
-export function YamlViewer({ clusterCode, namespace, resource, name, onClose, onSaved, cleanBeforeEdit = false, autoEdit = false, inline = false, initialYaml }: YamlViewerProps) {
+function YamlToolbar({
+  editing, saving, copied, showRaw, inline,
+  onCopy, onEdit, onCancel, onSave, onToggleRaw,
+}: {
+  editing: boolean; saving: boolean; copied: boolean; showRaw: boolean; inline?: boolean;
+  onCopy: () => void; onEdit: () => void; onCancel: () => void; onSave: () => void; onToggleRaw: () => void;
+}) {
+  const sz = inline ? 'h-7 text-xs' : 'h-8';
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      <Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onCopy}>
+        {copied ? <Check className="h-3 w-3 mr-1 text-emerald-400" /> : <Copy className="h-3 w-3 mr-1" />}
+        {copied ? '已复制' : '复制'}
+      </Button>
+      {!editing ? (
+        <Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onEdit}>
+          <Pencil className="h-3 w-3 mr-1" />编辑
+        </Button>
+      ) : (
+        <>
+          <Button variant="outline" size="sm" className={`${sz} border-slate-700 text-slate-300`} onClick={onCancel}>取消</Button>
+          <Button size="sm" className={`${sz} bg-blue-600 hover:bg-blue-700`} onClick={onSave} disabled={saving}>
+            {saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
+            保存
+          </Button>
+        </>
+      )}
+      <button type="button" onClick={onToggleRaw} className="text-[11px] text-slate-500 hover:text-slate-300 underline-offset-2 hover:underline">
+        {showRaw ? '精简视图' : '原始 YAML'}
+      </button>
+    </div>
+  );
+}
+
+export function YamlViewer({
+  clusterCode, namespace, resource, name, onClose, onSaved,
+  autoEdit = false, inline = false, initialYaml,
+}: YamlViewerProps) {
   const { toast } = useToast();
-  const [rawYaml, setRawYaml] = useState(initialYaml || '');      // 原始（只读展示用）
-  const [editYaml, setEditYaml] = useState('');    // 编辑态（可能被清理过）
+  const [rawYaml, setRawYaml] = useState(initialYaml || '');
+  const [displayYaml, setDisplayYaml] = useState('');
+  const [editYaml, setEditYaml] = useState('');
   const [loading, setLoading] = useState(!initialYaml);
   const [saving, setSaving] = useState(false);
-  const [editing, setEditing] = useState(autoEdit);   // autoEdit → 初始即编辑态
+  const [editing, setEditing] = useState(autoEdit);
   const [copied, setCopied] = useState(false);
-  // autoEdit 时隐式启用清理（编辑入口必须有清理，否则 status/managedFields 会被 K8s 拒绝）
-  const effectiveClean = cleanBeforeEdit || autoEdit;
+  const [showRaw, setShowRaw] = useState(false);
 
-  const toEditableYaml = async (text: string) => {
-    if (!effectiveClean) return text;
-    const { yaml } = await parseEditableManifest(text);
-    return yaml;
-  };
+  const applyStripped = useCallback(async (text: string) => {
+    const { yaml: stripped } = await parseEditableManifest(text);
+    setDisplayYaml(stripped);
+    setEditYaml(stripped);
+    return stripped;
+  }, []);
 
-  const loadYaml = async () => {
+  const loadYaml = useCallback(async () => {
     if (initialYaml) {
       setRawYaml(initialYaml);
-      setEditYaml(await toEditableYaml(initialYaml));
+      await applyStripped(initialYaml);
       setLoading(false);
       return;
     }
@@ -59,211 +91,132 @@ export function YamlViewer({ clusterCode, namespace, resource, name, onClose, on
     try {
       const text = await kubernetesApi.getResourceYaml(clusterCode, namespace, resource, name);
       setRawYaml(text);
-      setEditYaml(await toEditableYaml(text));
+      await applyStripped(text);
     } catch (e) {
       toast({ title: '获取YAML失败', description: (e as Record<string, any>).message, variant: 'destructive' });
-      const err = `# Error: ${e.message}`;
+      const err = `# Error: ${(e as Error).message}`;
       setRawYaml(err);
+      setDisplayYaml(err);
       setEditYaml(err);
     } finally { setLoading(false); }
-  };
+  }, [clusterCode, namespace, resource, name, initialYaml, applyStripped, toast]);
 
-  const enterEdit = async () => {
-    setEditYaml(await toEditableYaml(rawYaml));
+  useEffect(() => { loadYaml(); }, [loadYaml]);
+
+  const enterEdit = () => {
+    setEditYaml(displayYaml);
     setEditing(true);
-    if (effectiveClean) {
-      toast({ title: '已清理只读字段', description: '已剥离 status / managedFields / uid 等' });
-    }
+    setShowRaw(false);
   };
 
-  // 视图模式：当 cleanBeforeEdit 时，只读视图也默认展示精简版（剥离 status/managedFields/uid/resourceVersion）
-  // 用户可点击「原始」按钮切换回未处理的完整服务端输出
-  const [showRaw, setShowRaw] = useState(false);
+  const cancelEdit = async () => {
+    setEditing(false);
+    await loadYaml();
+  };
 
   const saveYaml = async () => {
     setSaving(true);
     try {
-      await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, editYaml);
-      toast({ title: 'YAML已应用', description: `${resource}/${name} 更新成功` });
+      const yamlStr = await prepareYamlForSave(editYaml);
+      await kubernetesApi.updateResourceYaml(clusterCode, namespace, resource, name, yamlStr);
+      toast({ title: '保存成功', description: `${resource}/${name} 已更新` });
       setEditing(false);
-      setRawYaml(editYaml);
+      setRawYaml(yamlStr);
+      setDisplayYaml(yamlStr);
+      setEditYaml(yamlStr);
       onSaved?.();
     } catch (e) {
-      toast({ title: '保存失败', description: (e as Record<string, any>).message, variant: 'destructive' });
+      toast({ title: '保存失败', description: (e as Error)?.message || String(e), variant: 'destructive' });
     } finally { setSaving(false); }
   };
 
   const copyYaml = async () => {
-    const content = editing ? editYaml : rawYaml;
+    const content = editing ? editYaml : (showRaw ? rawYaml : displayYaml);
     await navigator.clipboard.writeText(content);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
 
-  useEffect(() => { loadYaml(); }, []);
+  const display = editing ? editYaml : (showRaw ? rawYaml : displayYaml);
 
-  // 编辑态用 editYaml；只读态根据 effectiveClean + showRaw 决定是否清理
-  const display = editing
-    ? editYaml
-    : (effectiveClean && !showRaw ? cleanYAML(rawYaml) : rawYaml);
-
-  // CodeMirror 主题扩展
   const extensions = useMemo(() => [
     yaml(),
     EditorView.lineWrapping,
     ...(editing ? [] : [EditorView.editable.of(false)]),
   ], [editing]);
 
-  // 内联模式 — 不显示外层弹窗，适合嵌入 Tab 页面
+  const toolbar = (
+    <YamlToolbar
+      editing={editing}
+      saving={saving}
+      copied={copied}
+      showRaw={showRaw}
+      inline={inline}
+      onCopy={copyYaml}
+      onEdit={enterEdit}
+      onCancel={cancelEdit}
+      onSave={saveYaml}
+      onToggleRaw={() => setShowRaw((v) => !v)}
+    />
+  );
+
+  const editor = loading ? (
+    <div className={`flex items-center justify-center ${inline ? 'h-96' : 'h-full'}`}>
+      <Loader2 className="h-6 w-6 animate-spin text-slate-500" />
+    </div>
+  ) : (
+    <CodeMirror
+      value={display}
+      height={inline ? '600px' : '100%'}
+      theme={oneDark}
+      extensions={extensions}
+      onChange={(val) => editing && setEditYaml(val)}
+      basicSetup={{
+        lineNumbers: true,
+        foldGutter: true,
+        highlightActiveLine: editing,
+        highlightActiveLineGutter: editing,
+        autocompletion: editing,
+        bracketMatching: true,
+        closeBrackets: editing,
+        indentOnInput: editing,
+      }}
+      style={{ fontSize: inline ? '12px' : '13px', height: inline ? undefined : '100%' }}
+    />
+  );
+
   if (inline) {
     return (
       <div className="space-y-3">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between gap-3 flex-wrap">
           <p className="text-xs text-slate-500">
-            <code className="text-slate-400">{resource}/{name}</code> · {namespace} · {clusterCode}
+            <code className="text-slate-400">{resource}/{name}</code> · {namespace}
           </p>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={copyYaml}>
-              {copied ? <Check className="h-3 w-3 mr-1 text-emerald-400" /> : <Copy className="h-3 w-3 mr-1" />}
-              {copied ? '已复制' : '复制'}
-            </Button>
-            {effectiveClean && !editing && (
-              <Button variant="outline" size="sm" className={`h-7 text-xs ${showRaw ? 'border-slate-700 text-slate-500' : 'border-emerald-700/50 text-emerald-400'}`}
-                onClick={() => setShowRaw(v => !v)} title="切换 精简/原始 视图">
-                <Sparkles className="h-3 w-3 mr-1" />{showRaw ? '原始' : '精简'}
-              </Button>
-            )}
-            {!editing ? (
-              <>
-                {effectiveClean && (
-                  <Button variant="outline" size="sm" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={enterEdit} title="清理 status / managedFields 等只读字段后编辑">
-                  <Sparkles className="h-3 w-3 mr-1 text-amber-400" />编辑
-                  </Button>
-                )}
-                {!effectiveClean && (
-                  <Button variant="outline" size="sm" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => setEditing(true)}>
-                    编辑
-                  </Button>
-                )}
-              </>
-            ) : (
-              <>
-                <Button variant="outline" size="sm" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => { setEditing(false); loadYaml(); }}>
-                  取消
-                </Button>
-                <Button size="sm" className="h-7 bg-blue-600 hover:bg-blue-700 text-xs" onClick={saveYaml} disabled={saving}>
-                  {saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
-                  保存
-                </Button>
-              </>
-            )}
-          </div>
-        </div>
-        <div className="border border-slate-700 rounded-lg overflow-hidden">
-          {loading ? (
-            <div className="flex items-center justify-center h-96"><Loader2 className="h-6 w-6 animate-spin text-slate-500" /></div>
-          ) : (
-            <CodeMirror
-              value={display}
-              height="600px"
-              theme={oneDark}
-              extensions={extensions}
-              onChange={(val) => editing && setEditYaml(val)}
-              basicSetup={{
-                lineNumbers: true,
-                foldGutter: true,
-                highlightActiveLine: editing,
-                highlightActiveLineGutter: editing,
-                autocompletion: true,
-                bracketMatching: true,
-                closeBrackets: true,
-                indentOnInput: true,
-              }}
-              style={{ fontSize: '12px' }}
-            />
-          )}
+          {toolbar}
         </div>
+        <div className="border border-slate-700 rounded-lg overflow-hidden">{editor}</div>
       </div>
     );
   }
 
-  // 弹窗模式 — Portal 到 body，避免 PageTransition transform 导致偏移 // Logan.Li
   return (
     <ModalOverlay onClose={onClose}>
       <div
         className="bg-slate-900 border border-slate-700 rounded-xl w-[92vw] max-w-5xl max-h-[85vh] flex flex-col shadow-2xl"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-slate-700">
-          <div>
-            <h2 className="text-lg font-bold text-slate-100">{editing ? 'YAML 编辑' : 'YAML 查看'} — {resource}/{name}</h2>
-            <p className="text-xs text-slate-500">{namespace} · {clusterCode}{editing ? ' · 已清理只读字段' : ''}</p>
+        <div className="flex items-center justify-between p-4 border-b border-slate-700 gap-3">
+          <div className="min-w-0">
+            <h2 className="text-lg font-bold text-slate-100 truncate">YAML — {resource}/{name}</h2>
+            <p className="text-xs text-slate-500">{namespace} · {clusterCode}</p>
           </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={copyYaml}>
-              {copied ? <Check className="h-3 w-3 mr-1 text-emerald-400" /> : <Copy className="h-3 w-3 mr-1" />}
-              {copied ? '已复制' : '复制'}
-            </Button>
-            {effectiveClean && !editing && (
-              <Button variant="outline" size="sm" className={`h-8 text-xs ${showRaw ? 'border-slate-700 text-slate-500' : 'border-emerald-700/50 text-emerald-400'}`}
-                onClick={() => setShowRaw(v => !v)} title="切换 精简/原始 视图">
-                <Sparkles className="h-3 w-3 mr-1" />{showRaw ? '原始' : '精简'}
-              </Button>
-            )}
-            {!editing ? (
-              <>
-                {effectiveClean && (
-                  <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={enterEdit} title="清理 status / managedFields 等只读字段后编辑">
-                    <Sparkles className="h-3 w-3 mr-1 text-amber-400" />清理并编辑
-                  </Button>
-                )}
-                {!effectiveClean && (
-                  <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={() => setEditing(true)}>
-                    编辑
-                  </Button>
-                )}
-              </>
-            ) : (
-              <>
-                <Button variant="outline" size="sm" className="h-8 border-slate-700 text-slate-300" onClick={() => { setEditing(false); loadYaml(); }}>
-                  取消
-                </Button>
-                <Button size="sm" className="h-8 bg-blue-600 hover:bg-blue-700" onClick={saveYaml} disabled={saving}>
-                  {saving ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Save className="h-3 w-3 mr-1" />}
-                  保存
-                </Button>
-              </>
-            )}
+          <div className="flex items-center gap-2 shrink-0">
+            {toolbar}
             <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400" onClick={onClose}><X className="h-4 w-4" /></Button>
           </div>
         </div>
-        {/* Body */}
-        <div className="flex-1 min-h-0 overflow-hidden p-4">
-          {loading ? (
-            <div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin text-slate-500" /></div>
-          ) : (
-            <CodeMirror
-              value={display}
-              height="100%"
-              theme={oneDark}
-              extensions={extensions}
-              onChange={(val) => editing && setEditYaml(val)}
-              basicSetup={{
-                lineNumbers: true,
-                foldGutter: true,
-                highlightActiveLine: editing,
-                highlightActiveLineGutter: editing,
-                autocompletion: true,
-                bracketMatching: true,
-                closeBrackets: true,
-                indentOnInput: true,
-              }}
-              style={{ fontSize: '13px', height: '100%' }}
-            />
-          )}
-        </div>
+        <div className="flex-1 min-h-0 overflow-hidden p-4">{editor}</div>
       </div>
     </ModalOverlay>
   );
-}
+}