重构 K8s 资源管理页面

1. 拆分原有的巨型 K8sResourceList.tsx 文件（1001行）为多个独立页面组件 2. 为每种 K8s 资源类型创建专门的页面： - Namespace: 简单名称输入创建 - Deployment/StatefulSet: YAML 文件上传创建 - Service: 显示"功能开发中"提示 - ConfigMap: Key-Value 编辑器创建（支持文件上传） - Pod: 无创建功能 - PV/PVC: YAML 文件上传创建 3. 创建共享组件和 Hooks 提高代码复用 4. 更新路由配置使用嵌套路由结构 5. 修复 PV/PVC 页面缺少组件导入的问题优化了代码结构，使每个文件控制在合理大小范围内，便于维护和扩展。
2025-12-08 19:06:40 +08:00
parent 8b655d3496
commit c22845f83d
24 changed files with 3378 additions and 973 deletions
--- a/frontend/src/components/k8s/CreateYamlDialog.tsx
+++ b/frontend/src/components/k8s/CreateYamlDialog.tsx
@@ -0,0 +1,101 @@
+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>
+  )
+}