1. 拆分原有的巨型 K8sResourceList.tsx 文件(1001行)为多个独立页面组件 2. 为每种 K8s 资源类型创建专门的页面: - Namespace: 简单名称输入创建 - Deployment/StatefulSet: YAML 文件上传创建 - Service: 显示"功能开发中"提示 - ConfigMap: Key-Value 编辑器创建(支持文件上传) - Pod: 无创建功能 - PV/PVC: YAML 文件上传创建 3. 创建共享组件和 Hooks 提高代码复用 4. 更新路由配置使用嵌套路由结构 5. 修复 PV/PVC 页面缺少组件导入的问题 优化了代码结构,使每个文件控制在合理大小范围内,便于维护和扩展。
Cluster Frontend
基于 React + TypeScript + Zustand + MUI 的前端项目。
技术栈
- React 18 - UI 框架
- TypeScript - 类型系统
- Vite - 构建工具
- Zustand - 状态管理
- Material-UI (MUI) - UI 组件库
开发
安装依赖
npm install
# 或
yarn install
# 或
pnpm install
启动开发服务器
npm run dev
# 或
yarn dev
# 或
pnpm dev
开发服务器将在 http://localhost:3000 启动。
构建生产版本
npm run build
# 或
yarn build
# 或
pnpm build
预览生产构建
npm run preview
# 或
yarn preview
# 或
pnpm preview
项目结构
frontend/
├── src/
│ ├── stores/ # Zustand 状态管理
│ ├── components/ # React 组件
│ ├── theme.ts # MUI 主题配置
│ ├── App.tsx # 主应用组件
│ └── main.tsx # 应用入口
├── public/ # 静态资源
├── index.html # HTML 模板
├── vite.config.ts # Vite 配置
└── tsconfig.json # TypeScript 配置
API 代理
开发环境已配置 API 代理,所有 /api/* 请求会被代理到 http://localhost:8080(Go 后端服务)。
配置位置:vite.config.ts