82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
// EditModeContainer.tsx — 编辑模式 Tab 容器，共享 manifest 状态 // Logan.Li
|
|
import { useState, useEffect } 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: (updated?: any) => void;
|
|
onCancel: () => void;
|
|
/** 新建模式：名称可编辑，保存走 apply // Logan.Li */
|
|
isCreate?: boolean;
|
|
}
|
|
|
|
export function EditModeContainer({ clusterCode, namespace, deploymentName, manifest, onSaved, onCancel, isCreate = false }: EditModeContainerProps) {
|
|
type EditTab = 'basic' | 'containers' | 'storage' | 'advanced' | 'service';
|
|
const [activeTab, setActiveTab] = useState<EditTab>('basic');
|
|
const [editManifest, setEditManifest] = useState<any>(manifest);
|
|
|
|
useEffect(() => {
|
|
if (manifest) setEditManifest(manifest);
|
|
}, [manifest]);
|
|
|
|
const handleSaved = (updated?: any) => {
|
|
if (updated) setEditManifest(updated);
|
|
onSaved(updated);
|
|
};
|
|
|
|
const tabs: Array<{ key: EditTab; label: string; icon: typeof Settings }> = [
|
|
{ key: 'basic', label: '基本信息', icon: Settings },
|
|
{ key: 'containers', label: '容器信息', icon: Container },
|
|
{ key: 'storage', label: '存储挂载', icon: Database },
|
|
{ key: 'advanced', label: '高级设置', icon: Settings },
|
|
{ key: 'service', label: '服务/应用路由', icon: Network },
|
|
];
|
|
|
|
const commonProps = {
|
|
clusterCode,
|
|
namespace,
|
|
deploymentName,
|
|
manifest: editManifest,
|
|
onSaved: handleSaved,
|
|
onCancel,
|
|
isCreate,
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<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}
|
|
onClick={() => 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' : 'border-transparent text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
<Icon className="h-3.5 w-3.5" />
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{activeTab === 'basic' && <DeploymentEditBasic {...commonProps} />}
|
|
{activeTab === 'containers' && <DeploymentEditContainers {...commonProps} />}
|
|
{activeTab === 'storage' && <DeploymentEditStorage {...commonProps} />}
|
|
{activeTab === 'advanced' && <DeploymentEditAdvanced {...commonProps} />}
|
|
{activeTab === 'service' && <DeploymentEditService {...commonProps} />}
|
|
</div>
|
|
);
|
|
} |