quick-crud
基于选中的 TypeScript 类型定义,一键生成完整的可运行、可调试的前端页面代码(CRUD 表单、表格、查询页等)
功能
- 内置三种常用页面模板(表单、表格、表格+搜索)
- 支持用户自定义模板
- 可生成表格的 Mock 数据
- 一键生成可运行、可调试页面
- 支持右键菜单 / 快捷键 触发
使用
直接使用内置模板
PS: 内置模板目前只支持 react + antd
- 在生成 table 和 table-with-search 模板时,会让用户选择需要展示的 columns
- 在生成 table-with-search 模板时,会让用户选择需要展示的「搜索参数」

生成的文件包括:
- columns.ts
- mockData.ts
- 模板文件(.tsx or .vue)
自定义模板
需要在项目的 .vscode 文件夹下,声明一个 crud-templates 文件夹进行配置。
文件夹中需要配置一个 config.json 文件,自定义的 ejs 模板与 config.json 文件同级。

config.json 的格式如下:
[
{
"type": "table-with-search",
"name": "ERP-搜索表格模板",
"path": "table-with-search.ejs",
"ext": ".tsx"
}
]
- type: 模板类型,目前支持三种模板类型(form, table, table-with-search)
- name: 模板名称
- path: 模板所在路径,模板和 config.json 同级
- ext: 模板后缀类型(
ext: '.tsx' | '.vue'
)
关于自定义模板的说明
- 该插件会自动生成 columns.ts 和 mockData.ts 文件,所以需要在模板中顶部引入
// table
import { columns } from './columns';
import { mockData } from './mockData';
<Table rowKey="id" columns={columns} dataSource={dataSource} />
- 关于 form 模板的字段和 table-with-search 模板的搜索字段
(这里的设计并不好,这个插件几乎只有自己用,所以改进还排不上)
在自定义 ejs 模板时,可能需要关注的就是如何动态选择代码中的 form 表单展示哪些字段, table-with-search 展示哪些搜索字段。
这里给两个模板示例,自定义时直接复制 ejs 部分即可,该插件内部会处理。
// form
import { Form, Input, InputNumber, Switch, Select, Button } from 'antd';
export const CRUDPage = () => {
const [form] = Form.useForm();
return (
<Form form={form} layout="vertical">
<% fields.forEach(field=> { %>
<Form.Item label="<%= field.name %>" name="<%= field.name %>">
<%- field.component %>
</Form.Item>
<% }); %>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
);
};
// table-with-search
import { Table, Form, Input, InputNumber, Switch, Select, Button } from 'antd';
import { useState } from 'react';
import { columns } from './columns';
import { mockData } from './mockData';
export const CRUDPage = () => {
const [form] = Form.useForm();
const [dataSource, setDataSource] = useState(mockData);
const onSearch = () => {
const values = form.getFieldsValue();
console.log('搜索参数:', values);
};
return (
<>
<Form form={form} layout="inline" onFinish={onSearch} style={{ marginBottom: 16 }}>
<% searchFields.forEach(field=> { %>
<Form.Item label="<%= field.name %>" name="<%= field.name %>">
<%- field.component %>
</Form.Item>
<% }); %>
<Form.Item>
<Button type="primary" htmlType="submit">搜索</Button>
<Button size="small" htmlType="submit">重置</Button>
</Form.Item>
</Form>
<Table rowKey="id" columns={columns} dataSource={dataSource} />
</>
);
};
fields 和 searchFields 说明
这两个字段类型均为:
export interface Field {
name: string; // 根据 ts 类型的 key 生成
type: string; // 根据 ts 类型的 value 生成
component?: string; // 根据 ts 类型的 value,自动匹配对应的组件
}
- string:
<Input/>
- number:
<InputNumber/>
- enum:
<Select />
- boolean:
<Switch />
TODO
- [ ] 支持代码模板保存在 Github 等远程仓库
- [ ] 支持团队和使用
- [ ] 改进用户模板声明方式,目前使用 ejs 模板用户定义有些成本
Enjoy!