🛠 react-admin-generator

Declarative CRUD code generator for React admin panels — config-driven, templates-based

---

基于配置驱动 + Handlebars 模板的 React 中后台 CRUD 代码生成器。提供一个 JSON 配置文件描述数据模型，即可自动生成完整的 API Service、MobX Store、React 页面组件（列表/新增/编辑）和路由配置。

Why react-admin-generator?

• ⚡ 声明式配置 — 一个 JS 配置文件描述模型，剩下交给生成器
• 🧩 完整 CRUD — 列表、新增、编辑、表单验证、分页、删除，一次性生成
• 📦 独立项目 — 生成的是完整可运行的 React + TypeScript 项目
• 🪄 模板驱动 — 基于 Handlebars 模板，可自定义生成内容
• 🔌 与 boilerplate 配合 — 专为 parcel-typescript-react-boilerplate 设计

Features

生成内容	说明
API Service	Axios REST 请求封装，继承 BaseService
MobX Store	响应式状态管理，注入 Service
List Page	Ant Design Table + 分页 + 操作列（编辑/删除）
Add Page	新增表单，含字段验证
Edit Page	编辑表单，回填已有数据
Form Component	可复用的表单组件，antd Form 验证
Table Component	表格组件，分页/排序/操作按钮
Routes	自动生成 React Router 路由配置
Pages Container	布局 + 菜单配置

Quick Start

安装

npm install -g react-admin-generator
# 或
yarn global add react-admin-generator

1. 创建模型配置文件

创建 example.js：

module.exports = [
  {
    displayName: '品种管理',
    key: 'varietyId',
    modelName: 'Variety',
    modelPluralName: 'Varieties',
    properties: [
      { type: 'String', displayName: '名称', name: 'name' },
      { type: 'String', displayName: '数量', name: 'qty' },
    ]
  },
  {
    displayName: '订单管理',
    key: 'orderId',
    modelName: 'Order',
    modelPluralName: 'Orders',
    properties: [
      { type: 'String', displayName: '订单号', name: 'orderNo' },
      { type: 'Number', displayName: '金额', name: 'amount' },
      { type: 'String', displayName: '状态', name: 'status' },
    ]
  },
]

2. 生成代码

create-react-admin -c example.js -d ./my-admin

3. 启动项目

cd ./my-admin
yarn install
yarn start

Configuration Reference

每个模型配置支持以下字段：

字段	类型	必填	说明
displayName	string	✅	页面显示名称，支持中文
key	string	✅	主键字段名
modelName	string	✅	模型类名（PascalCase）
modelPluralName	string	✅	模型名复数形式
properties	array	✅	字段定义列表

Property 字段

字段	类型	必填	说明
type	string	✅	字段类型：String / Number / Boolean / Date
displayName	string	✅	字段显示名称
name	string	✅	字段名（camelCase）

How It Works

flowchart LR
    Config["model.js<br/>声明式配置"]
    Templates["Handlebars Templates<br/>(10+个 .hbs)"]
    CLI["create-react-admin CLI"]
    Output["生成项目<br/>src/service/ + stores/ + views/ + routes"]

    Config --> CLI
    Templates --> CLI
    CLI --> Output
    Output --> Deploy["yarn start<br/>直接运行"]

Loading

生成器基于 commander 解析命令行参数，使用 kopy 拷贝模板目录，通过 Handlebars 将模型数据注入 10+ 个模板文件，输出完整的 TypeScript + React 项目。

Generated File Structure

src/
├── app.tsx              # 入口（ReactDOM.render）
├── app.scss             # 全局样式
├── pages.tsx            # 页面容器（Layout + 菜单）
├── routes.ts            # 路由配置
├── service/
│   ├── index.ts         # Service 入口
│   └── {Model}/
│       └── index.ts     # API 类（CRUD 方法）
├── stores/
│   ├── index.ts         # Store 入口
│   └── {Model}/
│       └── index.ts     # MobX Store
└── views/
    ├── index.ts         # 视图入口
    └── {Model}/
        ├── index.tsx    # 视图容器
        ├── list.tsx     # 列表页面
        ├── add.tsx      # 新增页面
        ├── edit.tsx     # 编辑页面
        ├── form.tsx     # 表单组件
        └── table.tsx    # 表格组件

Local Development

git clone https://github.com/catwenlabs/react-admin-generator.git
cd react-admin-generator
npm install
npm link     # 本地链接 CLI 命令

License

MIT

---

Built with TypeScript, Node.js and Handlebars.