antd-pro-crud

基于 Ant Design Pro Components 的 CRUD 组件库，支持 Swagger 自动生成页面代码。

特性

• 基于 Swagger/OpenAPI 自动生成 CRUD 页面代码
• 支持 ProTable、Modal 弹窗等组件
• 提供 Web UI 可视化界面和 CLI 命令行两种使用方式
• 支持简单模式（Schema 表单）和复杂模式（独立编辑/详情页面）
• 支持本地封装 ProTable 和直接引入两种方式

安装

# 全局安装
npm install -g antd-pro-crud

# 或者作为项目依赖安装
npm install antd-pro-crud

代码生成器

方式一：Web UI 可视化界面（推荐）

启动 Web UI 服务：

# 全局安装后
antd-pro-crud ui

# 或使用 npx（无需安装）
npx antd-pro-crud ui

# 指定端口
antd-pro-crud ui --port 8080

启动后访问 http://localhost:3456 即可使用可视化界面：

1. 输入 Swagger 地址 - 输入后端 Swagger JSON 地址（如 http://localhost:8080/v2/api-docs）
2. 选择模块 - 勾选需要生成代码的模块
3. 配置选项：
   • 代码模式：简单模式（Schema 表单，单文件）或复杂模式（独立编辑/详情页面）
   • ProTable 引入方式：直接从 antd-pro-crud 引入，或使用本地封装的 @/components/ProTable
   • 命名空间：API 命名空间
   • 输出目录：生成代码的目标目录
4. 预览并复制代码 - 查看生成的代码，支持语法高亮，一键复制

方式二：CLI 命令行

# 交互式生成
antd-pro-crud generate

# 或简写
antd-pro-crud g

按照提示依次输入：

• Swagger JSON 地址
• 选择要生成的模块
• 选择代码模式（简单/复杂）
• 选择 ProTable 引入方式
• 配置命名空间和输出目录

代码模式说明

简单模式（推荐）

使用 Schema 表单，单文件 CRUD，适合快速开发：

// 生成单个 index.tsx 文件
// 使用 columns 配置同时定义表格列和表单字段
// 编辑和详情通过 Schema 弹窗实现

复杂模式

独立编辑/详情页面，使用 launch 弹窗，适合复杂业务：

// 生成多个文件：
// - index.tsx      主页面
// - EditForm.tsx   编辑表单组件
// - DetailPage.tsx 详情页面组件

// 使用 launch 函数创建弹窗
const alert_edit = launch(EditForm);
const alert_detail = launch(DetailPage);

ProTable 引入方式

直接引入（默认）

从 antd-pro-crud 直接引入，需要传入 access 和 umiRequest：

import ProTable from 'antd-pro-crud/ProTable';
import { useAccess } from '@umijs/max';
import { request as umiRequest } from '@umijs/max';

<ProTable
  access={useAccess()}
  umiRequest={umiRequest}
  // ...
/>

本地封装

使用项目本地封装的 ProTable（已注入 access 和 request）：

import ProTable from '@/components/ProTable';

<ProTable
  // 无需传入 access 和 umiRequest
  // ...
/>

组件使用

ProTable

增强的 ProTable 组件，支持 CRUD 操作：

import ProTable from 'antd-pro-crud/ProTable';

Modal

弹窗组件，支持 launch 函数式调用：

import { launch } from 'antd-pro-crud/Modal';

// 创建弹窗启动器
const alert_edit = launch(EditForm);

// 打开弹窗
alert_edit({ id: 1 });

其他命令

# 查看帮助
antd-pro-crud --help

# 查看版本
antd-pro-crud --version

依赖要求

• React >= 16.9.0
• Ant Design >= 5.0.0
• @ant-design/pro-components >= 2.0.0

License

MIT