CoDo K2 配置中心子应用

项目简介

CoDo K2 配置中心是一个基于React的配置管理系统的子应用。该项目作为微前端架构的一部分，使用Qiankun实现模块联邦。主要功能包括项目配置管理、环境隔离、配置历史记录、ETCD集成和权限与审批流程等。

目录结构

• config/ - 项目配置文件

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

• src/ - 源代码

  • pages/ - 按功能组织的UI页面
    • config-project/ - 项目配置管理
      • list/ - 项目列表页面
      • detail/ - 项目配置详情页面
      • components/ - 项目相关组件
    • config-archive/ - 配置归档管理
  • components/ - 可复用UI组件
  • utils/ - 工具函数和常量
  • services/ - 服务层
  • hooks/ - 自定义React钩子
  • layouts/ - 布局组件
  • locales/ - 国际化文件

• public/ - 静态资源

• mock/ - 开发用模拟数据

• tests/ - 测试文件

技术栈

• 框架: React 18（函数式组件 + Hooks）
• UI库: Ant Design 和 Ant Design Pro Components
• 构建工具: UmiJS Max（UmiJS的增强版）
• 状态管理: React Query和Hooks
• API请求: Axios 与 UmiJS request
• 样式: Less 和 CSS-in-JS
• 代码质量: ESLint, Prettier, TypeScript
• 编辑器: Monaco Editor (用于配置编辑)

核心功能

• 项目配置管理（创建、查看、编辑、删除）
• 多环境配置支持（开发、测试、生产等）
• 配置文件树形展示
• 配置历史记录和版本对比
• ETCD集成和同步
• 用户权限管理和审批流程
• 配置归档功能

环境准备

安装依赖:

pnpm install

本地开发

启动开发服务器

pnpm start

或使用开发环境配置:

pnpm run start:dev

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

构建生产版本

pnpm run build

将应用构建到dist文件夹。

预览生产构建

pnpm run preview

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

代码检查与修复

pnpm run lint

自动修复问题:

pnpm run lint:fix

开发指南

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

其他功能

• 基于Qiankun的微前端架构
• 多环境API代理配置
• 国际化支持
• 主题自定义
• Monaco代码编辑器集成（用于配置编辑）

测试

pnpm test