feat(k8s): 事件页简化、可视化编辑 P0、Deployment 五 Tab 修复

- 事件中心：去彩虹图表，改专业排名列表 + 主题变量 - 网络/配置/存储：ResourceVisualEditor 双向 YAML 同步、导入 YAML、新建 - vite manualChunks 减小 embed 主包体积 - run.sh：多副本强制 MODE=release + MySQL/Redis - Deployment 编辑：共享 manifest、统一 saveDeploymentManifest - 修复存储挂载 initContainers 混入 bug、补 Tolerations UI - 服务 Tab：applyYAML 创建 + ResourceVisualEditor 编辑 - 基本信息：Pod 模板标签 + Selector 同步
2026-06-26 13:52:32 +08:00
1 parent 339b24a579
commit d0cf71b05a
@@ -0,0 +1,76 @@
+// YAML 导入对话框 — 粘贴/应用多文档 manifest // Logan.Li
+import { useState } from 'react';
+import { X, Upload, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/hooks/use-toast';
+import { kubernetesApi } from '@/api';
+import CodeMirror from '@uiw/react-codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+interface YamlImportDialogProps {
+  clusterCode: string;
+  onClose: () => void;
+  onApplied?: () => void;
+}
+
+export function YamlImportDialog({ clusterCode, onClose, onApplied }: YamlImportDialogProps) {
+  const { toast } = useToast();
+  const [content, setContent] = useState('');
+  const [applying, setApplying] = useState(false);
+
+  const apply = async () => {
+    if (!content.trim()) {
+      toast({ title: '请输入 YAML', variant: 'destructive' });
+      return;
+    }
+    setApplying(true);
+    try {
+      await kubernetesApi.applyYAML(clusterCode, content);
+      toast({ title: '导入成功', description: 'YAML 已应用到集群' });
+      onApplied?.();
+      onClose();
+    } catch (e) {
+      toast({ title: '导入失败', description: (e as Record<string, any>).message, variant: 'destructive' });
+    } finally { setApplying(false); }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" onClick={onClose}>
+      <div
+        className="bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-xl w-[92vw] max-w-4xl max-h-[85vh] flex flex-col shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-[var(--dg-border)]">
+          <div className="flex items-center gap-2">
+            <Upload className="h-5 w-5 text-[var(--dg-text-muted)]" />
+            <div>
+              <h2 className="text-lg font-bold text-[var(--dg-text-primary)]">导入 YAML</h2>
+              <p className="text-xs text-[var(--dg-text-muted)]">支持多文档（--- 分隔），适用于新建或更新资源</p>
+            </div>
+          </div>
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose}><X className="h-4 w-4" /></Button>
+        </div>
+        <div className="flex-1 overflow-auto p-4">
+          <CodeMirror
+            value={content}
+            height="420px"
+            theme={oneDark}
+            extensions={[yaml()]}
+            onChange={setContent}
+            placeholder="粘贴 YAML 内容..."
+            basicSetup={{ lineNumbers: true, foldGutter: true, highlightActiveLine: true }}
+            style={{ fontSize: '12px' }}
+          />
+        </div>
+        <div className="flex justify-end gap-2 p-4 border-t border-[var(--dg-border)]">
+          <Button variant="outline" onClick={onClose}>取消</Button>
+          <Button className="bg-blue-600 hover:bg-blue-700" onClick={apply} disabled={applying}>
+            {applying ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Upload className="h-4 w-4 mr-1" />}
+            应用
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}