c22845f83d
1. 拆分原有的巨型 K8sResourceList.tsx 文件（1001行）为多个独立页面组件 2. 为每种 K8s 资源类型创建专门的页面： - Namespace: 简单名称输入创建 - Deployment/StatefulSet: YAML 文件上传创建 - Service: 显示"功能开发中"提示 - ConfigMap: Key-Value 编辑器创建（支持文件上传） - Pod: 无创建功能 - PV/PVC: YAML 文件上传创建 3. 创建共享组件和 Hooks 提高代码复用 4. 更新路由配置使用嵌套路由结构 5. 修复 PV/PVC 页面缺少组件导入的问题 优化了代码结构，使每个文件控制在合理大小范围内，便于维护和扩展。
102 lines
2.6 KiB
TypeScript
102 lines
2.6 KiB
TypeScript
import { useRef } from 'react'
|
|
import {
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogActions,
|
|
Button,
|
|
Stack,
|
|
Box,
|
|
Typography,
|
|
IconButton,
|
|
TextField,
|
|
CircularProgress,
|
|
} from '@mui/material'
|
|
import CloseIcon from '@mui/icons-material/Close'
|
|
import UploadFileIcon from '@mui/icons-material/UploadFile'
|
|
|
|
interface CreateYamlDialogProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
onApply: (yaml: string) => void
|
|
yamlContent: string
|
|
onYamlChange: (value: string) => void
|
|
loading: boolean
|
|
}
|
|
|
|
export default function CreateYamlDialog({
|
|
open,
|
|
onClose,
|
|
onApply,
|
|
yamlContent,
|
|
onYamlChange,
|
|
loading,
|
|
}: CreateYamlDialogProps) {
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
|
|
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0]
|
|
if (file) {
|
|
const reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
const content = e.target?.result as string
|
|
onYamlChange(content)
|
|
}
|
|
reader.readAsText(file)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
|
<DialogTitle>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
|
<Typography variant="h6">创建资源</Typography>
|
|
<IconButton onClick={onClose}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</Box>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<Stack spacing={2} sx={{ mt: 1 }}>
|
|
<Box>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept=".yaml,.yml"
|
|
style={{ display: 'none' }}
|
|
onChange={handleFileUpload}
|
|
/>
|
|
<Button
|
|
variant="outlined"
|
|
startIcon={<UploadFileIcon />}
|
|
onClick={() => fileInputRef.current?.click()}
|
|
>
|
|
上传 YAML 文件
|
|
</Button>
|
|
</Box>
|
|
<TextField
|
|
label="YAML 内容"
|
|
multiline
|
|
rows={20}
|
|
value={yamlContent}
|
|
onChange={(e) => onYamlChange(e.target.value)}
|
|
placeholder="粘贴或编辑 YAML 内容..."
|
|
fullWidth
|
|
variant="outlined"
|
|
/>
|
|
</Stack>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={onClose}>取消</Button>
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => onApply(yamlContent)}
|
|
disabled={loading}
|
|
>
|
|
{loading ? <CircularProgress size={24} /> : '应用'}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
)
|
|
}
|