diff --git a/README.md b/README.md
index 7a26beb..4e6fa74 100644
--- a/README.md
+++ b/README.md
@@ -75,8 +75,230 @@ cl install
yarn serve
```
-## 分析包内容
+## 极速 CRUD
-```shell
-yarn report
+1. `vscode` 编辑器下输入关键字 `cl-crud`,会生成对应的模板代码:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
+
+2. 编辑数据表格 `cl-table`:
+
+```js
+{
+ table: {
+ // 参数与 el-table-column 一致,并支持许多骚操作
+ columns: [
+ // 多选列
+ {
+ type: "selection",
+ width: 60
+ },
+ // 自定义列
+ {
+ label: "昵称",
+ prop: "name"
+ },
+ {
+ label: "账户",
+ prop: "price",
+ sortable: "custom" // 是否添加排序
+ },
+ {
+ label: "状态",
+ prop: "status",
+ // 字典匹配,使用 el-tag 展示
+ dict: [
+ {
+ label: "启用",
+ value: 1,
+ type: "primary"
+ },
+ {
+ label: "禁用",
+ value: 0,
+ type: "danger"
+ }
+ ]
+ },
+ {
+ label: "创建时间",
+ prop: "createTime"
+ },
+ // 操作按钮列,默认包含:编辑、删除
+ {
+ type: "op"
+ }
+ ];
+ }
+}
+```
+
+3. 编辑新增、编辑表单 `cl-upsert`:
+
+```js
+{
+ upsert: {
+ items: [
+ {
+ label: "昵称",
+ prop: "name",
+ // 参数与 el-form-item 一致
+ props: {},
+ value: "神仙都没用", // 昵称默认值
+ // 渲染参数,支持 slot, 组件实例,jsx
+ component: {
+ name: "el-input", // 可以是任意已注册的组件名
+ props: {}, // 组件的参数
+ on: {} // 组件的回调事件
+ },
+ // 验证规则,与 el-form 一致
+ rules: {
+ required: true,
+ message: "昵称不呢为空"
+ }
+ },
+ {
+ label: "存款",
+ prop: "price",
+ component: {
+ name: "el-input-number",
+ props: {
+ min: 0,
+ max: 10000
+ }
+ }
+ },
+ {
+ label: "状态",
+ prop: "status",
+ value: 1,
+ component: {
+ name: "el-radio-group",
+ options: [
+ {
+ label: "启用",
+ value: 1
+ },
+ {
+ label: "禁用",
+ value: 0
+ }
+ ]
+ }
+ }
+ ];
+ }
+}
+```
+
+4. 绑定 `service`。在 `src/service/` 下新建文件 `test.js`,并编辑:
+
+```js
+// src/service/test.js
+import { BaseService, Service, Permission } from "cl-admin";
+
+// 请求接口的路径
+@Service("test")
+class Test extends BaseService {
+ // 继承 BaseService 后,拥有 page, list, add, delete, update, info 6个基本接口
+
+ // 自定义其他接口
+ @Permission("product") // 权限装饰器,可选
+ product(id) {
+ // this.request() 参数与 axios 一致
+ return this.request({
+ url: "/product",
+ method: "POST",
+ data: {
+ id
+ }
+ });
+ }
+}
+
+export default Test;
+```
+
+在 `src/service/` 下的文件,框架会自动根据 `目录结构` 和 `文件名称` 格式化成对应的 `$service` 对象。你现在可以这么使用它:
+
+```js
+this.$service.test.page({ page: 1 });
+this.$service.test.product(1);
+```
+
+`service` 编写好后,我们把它绑定在 `crud` 上:
+
+```js
+export default {
+ methods: {
+ onLoad({ ctx, app }) {
+ // 绑定 service,这边指定到 test 即可
+ ctx.service(this.$service.test).done();
+
+ // 发起 page 请求
+ app.refresh({
+ // 请求默认参数
+ });
+ }
+ }
+};
+```
+
+5. 效果预览
+
+![](https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/crud.png)