云原生管理平台

项目简介

云原生管理平台(CNMP - Cloud Native Management Platform)是一个基于React的Kubernetes资源管理系统。该项目作为微前端架构的一部分，使用Qiankun实现模块联邦。主要功能包括Kubernetes集群资源管理、容器编排、服务配置和监控等。

目录结构

• config/ - 项目配置文件

  • routes.ts - 应用路由配置
  • proxy.ts - API代理配置（支持多个代理）
  • config.ts - 主应用配置
  • defaultSettings.ts - 默认UI设置
  • oneapi.json - API接口定义

• src/ - 源代码

  • api/ - API接口定义
  • components/ - 可复用UI组件
  • constants/ - 常量定义
  • hooks/ - 自定义React钩子
  • layouts/ - 布局组件
  • locales/ - 国际化文件
  • models/ - 数据模型
  • pages/ - 功能页面
    • cluster/ - Kubernetes集群资源管理
      • deployment/ - 部署管理
      • pod/ - Pod管理
      • service/ - 服务管理
      • namespace/ - 命名空间管理
      • node/ - 节点管理
      • ingress/ - 入口管理
      • config-map/ - 配置管理
      • secret/ - 密钥管理
      • persistent-volume/ - 持久卷管理
      • persistent-volume-claim/ - 持久卷声明
      • storage-class/ - 存储类管理
      • stateful-set/ - 有状态集管理
      • daemon-set/ - 守护进程集管理
      • clone-set/ - 克隆集管理
      • crd/ - 自定义资源定义
      • hpa/ - 水平Pod自动扩缩容
    • dashboard/ - 系统仪表盘
    • user/ - 用户管理
  • service-components/ - 服务相关组件
  • services/ - 服务层
  • styles/ - 样式文件
  • utils/ - 工具函数
  • works/ - 工作流相关内容

• public/ - 静态资源

• mock/ - 开发用模拟数据

• tests/ - 测试文件

• types/ - 类型定义

技术栈

• 框架: React 18（函数式组件 + Hooks）
• UI库: Ant Design 和 Ant Design Pro Components
• 构建工具: UmiJS Max（UmiJS的增强版）
• 状态管理: React Query
• API请求: Axios 与 UmiJS request
• 样式: Less 和 CSS-in-JS
• 可视化: Ant Design Plots, ECharts
• 终端模拟: XTerm
• 代码编辑: Monaco Editor
• 微前端: Qiankun
• 容器化: Docker (Nginx部署)

环境准备

安装依赖:

pnpm install

本地开发

启动开发服务器

pnpm start

或使用开发环境配置:

pnpm run start:dev

这将在默认端口（通常是8000）启动开发服务器。

构建生产版本

pnpm run build

将应用构建到dist文件夹。

预览生产构建

pnpm run preview

在8000端口预览构建后的应用。

代码检查与修复

pnpm run lint

自动修复问题:

pnpm run lint:fix

测试代码

pnpm test

开发指南

• 在package.json的name字段修改为子应用名称
• 在proxy.ts中写入接口代理配置，可以支持多个代理
• 每个子应用的路由配置在config/routes.ts中配置
• 每个页面写在pages文件夹下，services.ts文件定义接口请求，data.d.ts定义类型
• utils文件夹下放置工具函数和常量