refactor(frontend): P1-P2 续 — API 子模块化、大组件拆分、Query 铺开

- api/server/ 与 api/cloud/ 子目录拆分，保持 @/api 导入不变 - hooks/api 新增 useCredentials、usePromDatasources，增强 useServers - 拆分 CredentialManager、DeploymentWorkload、PrometheusDatasourceManager - ServerManager、CredentialManager、PromDs 接入 TanStack Query
2026-06-26 00:22:50 +08:00
1 parent f45e203e21
commit 480e677042
@@ -0,0 +1,117 @@
+// EditModeContainer.tsx — 编辑模式 Tab 容器（M6: 基本信息Tab + 容器编辑预留）
+// 作者: Logan.Li
+import { useState } from 'react';
+import { Container, Settings, Database, Network } from 'lucide-react';
+import { DeploymentEditBasic } from '../DeploymentEditBasic';
+import { DeploymentEditContainers } from '../DeploymentEditContainers';
+import { DeploymentEditStorage } from '../DeploymentEditStorage';
+import { DeploymentEditAdvanced } from '../DeploymentEditAdvanced';
+import { DeploymentEditService } from '../DeploymentEditService';
+
+export interface EditModeContainerProps {
+  clusterCode: string;
+  namespace: string;
+  deploymentName: string;
+  manifest: any | null;
+  onSaved: () => void;
+  onCancel: () => void;
+}
+
+export function EditModeContainer({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel }: EditModeContainerProps) {
+  type EditTab = 'basic' | 'containers' | 'storage' | 'advanced' | 'service';
+  const [activeTab, setActiveTab] = useState<EditTab>('basic');
+
+  const tabs: Array<{ key: EditTab; label: string; icon: typeof Settings; available: boolean; badge?: string }> = [
+    { key: 'basic', label: '基本信息', icon: Settings, available: true },
+    { key: 'containers', label: '容器信息', icon: Container, available: true },
+    { key: 'storage', label: '存储挂载', icon: Database, available: true },
+    { key: 'advanced', label: '高级设置', icon: Settings, available: true },
+    { key: 'service', label: '服务/应用路由', icon: Network, available: true },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {/* Tab 导航 */}
+      <div className="flex items-center gap-1 border-b border-slate-800 pb-px overflow-x-auto">
+        {tabs.map(tab => {
+          const active = activeTab === tab.key;
+          const Icon = tab.icon;
+          return (
+            <button
+              key={tab.key}
+              disabled={!tab.available}
+              onClick={() => tab.available && setActiveTab(tab.key)}
+              className={`flex items-center gap-1.5 px-3 py-2 text-xs font-medium border-b-2 transition-colors whitespace-nowrap
+                ${active
+                  ? 'border-blue-500 text-blue-400'
+                  : tab.available
+                    ? 'border-transparent text-slate-400 hover:text-slate-200'
+                    : 'border-transparent text-slate-600 cursor-not-allowed'
+                }`}
+            >
+              <Icon className="h-3.5 w-3.5" />
+              {tab.label}
+              {tab.badge && (
+                <span className={`text-[9px] px-1 py-0.5 rounded ${active ? 'bg-blue-500/20 text-blue-300' : 'bg-slate-800 text-slate-600'}`}>
+                  {tab.badge}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Tab 内容 */}
+      {activeTab === 'basic' ? (
+        <DeploymentEditBasic
+          clusterCode={clusterCode}
+          namespace={namespace}
+          deploymentName={deploymentName}
+          manifest={manifest}
+          onSaved={onSaved}
+          onCancel={onCancel}
+        />
+      ) : activeTab === 'containers' ? (
+        /* M7: 完整容器编辑器 — 工作容器 + 初始化容器 */
+        <DeploymentEditContainers
+          clusterCode={clusterCode}
+          namespace={namespace}
+          deploymentName={deploymentName}
+          manifest={manifest}
+          onSaved={onSaved}
+          onCancel={onCancel}
+        />
+      ) : activeTab === 'storage' ? (
+        /* M8: 存储挂载 — volumes + volumeMounts 汇总 */
+        <DeploymentEditStorage
+          clusterCode={clusterCode}
+          namespace={namespace}
+          deploymentName={deploymentName}
+          manifest={manifest}
+          onSaved={onSaved}
+          onCancel={onCancel}
+        />
+      ) : activeTab === 'advanced' ? (
+        /* M8: 高级设置 — 更新策略/调度/DNS/安全上下文/终止宽限期 */
+        <DeploymentEditAdvanced
+          clusterCode={clusterCode}
+          namespace={namespace}
+          deploymentName={deploymentName}
+          manifest={manifest}
+          onSaved={onSaved}
+          onCancel={onCancel}
+        />
+      ) : activeTab === 'service' ? (
+        /* M9: 服务/应用路由 — 关联 Service + Ingress，可创建 */
+        <DeploymentEditService
+          clusterCode={clusterCode}
+          namespace={namespace}
+          deploymentName={deploymentName}
+          manifest={manifest}
+          onSaved={onSaved}
+          onCancel={onCancel}
+        />
+      ) : null}
+    </div>
+  );
+}