diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..69326fb
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,120 @@
+gitCommand.txt
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+ossConfig.js
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+dist/
+other/
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+/node_modules
+coverage
+*.log
+npm-debug.log
+.logs
+logs
+*.swp
+run
+*-run
+.idea
+.DS_Store
+.tmp
+docs/CONTRIBUTING.md
+docs/node_modules
+docs/README.md
+docs/db.json
+docs/source/release/index.md
+docs/source/member_guide.md
+docs/source/_data/versions.yml
+docs/**/contributing.md
+docs/public
+docs/plugins.png
+
+package-lock.json
+yarn.lock
+!test/fixtures/apps/loader-plugin/node_modules
+.editorconfig
+*clinic-flame*
+*clinic-doctor*
+.nyc_output/
+test/fixtures/apps/app-ts/**/*.js
+!test/fixtures/apps/app-ts/node_modules
+!test/fixtures/apps/app-ts/node_modules/**/*.js
+test/fixtures/apps/app-ts-esm/**/*.js
+test/fixtures/apps/app-ts-type-check/**/*.js
diff --git "a/cool-admin \345\211\215\345\220\216\347\253\257\351\205\215\345\220\210\344\275\277\347\224\250.md" "b/cool-admin \345\211\215\345\220\216\347\253\257\351\205\215\345\220\210\344\275\277\347\224\250.md"
new file mode 100644
index 0000000..0078fc5
--- /dev/null
+++ "b/cool-admin \345\211\215\345\220\216\347\253\257\351\205\215\345\220\210\344\275\277\347\224\250.md"	
@@ -0,0 +1,376 @@
+# cool-admin 前后端配合使用
+
+作者: gifted
+
+QQ: 203118908
+
+视频: https://www.bilibili.com/video/BV1N7411w7dj?from=search&seid=11800671574855141738
+
+(备注: 代码中某行高亮使用一对单个反引号)
+
+## 后端
+
+
+
+1. 编写表信息, 文件路径`app\entity\app\bannertest.ts`
+
+   文件内容
+
+   ```typescript
+   import { Entity, Column } from 'typeorm';
+   import { BaseEntity } from 'egg-cool-entity';
+   
+   /**
+   * 数据模型描述
+   */
+   @Entity({ name: 'app_banner_test' })
+   export default class AppBannerTest extends BaseEntity {
+     // 标题
+     @Column({length:20})
+     title: string;
+     // 链接
+     @Column({length:20, nullable:true})
+     link: string;
+     // 图片
+     @Column({length:20})
+     pics: string;
+   }
+   ```
+
+   
+
+2. 编写控制器, 文件路径`app\controller\admin\app\bannertest.ts`
+
+   文件内容: 
+
+   ```typescript
+   import { BaseController } from 'egg-cool-controller';
+   import router from 'egg-cool-router';
+   
+   /**
+   * 控制器功能描述
+   */
+   @router.prefix('/admin/app/bannertest', ['add', 'delete', 'update', 'info', 'list', 'page'])
+   export default class AppBannerTestController extends BaseController {
+     init() {
+       this.setEntity(this.ctx.repo.app.Bannertest);
+     }
+   }
+   ```
+
+   
+
+## 前端
+
+1. 编写测试页面, 文件路径 `app\bannertest\bannertest.vue`, 代码片段`cl-curd`
+
+2. 在测试页面的`onLoad`方法中, 设置服务
+
+   ```typescript
+   	methods: {
+   		onLoad({ ctx, app }) {
+   			this.crud = app;
+   
+   			`ctx.service(this.$service.app.bannertest)`
+   			
+   				.set('upsert', {
+   					items: [
+   						{
+   							prop: '',
+   							label: '',
+   							component: {
+   								name: ''
+   							}
+   						}
+   					]
+   				})
+   				.set('table', {
+   					columns: [
+   						{
+   							label: '',
+   							prop: '',
+   							align: ''
+   						}
+   					]
+   				})
+   				.done();
+   	
+   			app.refresh();
+   		}
+   	}
+   ```
+
+3. 编写服务, 文件路径: `src\service\app\bannertest.js`
+
+   ```typescript
+   import { BaseService, Service, Permission } from '@/cool';
+   
+   @Service('app/bannertest')
+   export default class extends BaseService {}
+   
+   ```
+
+4. 在`http://localhost:9000/sys/menu`中添加测试菜单, 
+
+   名称: `测试轮播`
+
+   节点路由: `/app/bannertest`
+
+   文件路径: `views/app/bannertest/bannertest.vue`
+
+5. 给该测试菜单添加权限, `app/bannertest`
+
+   增: `add`
+
+   删: `delete`
+
+   改: `update info`
+
+   查: `page info`
+
+6. 查看页面效果`http://localhost:9000/app/bannertest`
+
+7. 开始写组件, 主要是表单类组件: table和form, 
+
+    饿了吗`elementUI`, 网址: `https://element.eleme.cn/#/zh-CN/component/installation`
+
+8. 添加列名后, 查看效果`http://localhost:9000/app/bannertest`
+
+   ```typescript
+   				.set('table', {
+   					columns: [
+   						{
+   							label: '图片',
+   							prop: 'pics',
+   							align: 'center'
+   						},
+   						{
+   							label: '标题',
+   							prop: 'title',
+   							align: 'center'
+   						},
+   						{
+   							label: '链接',
+   							prop: 'link',
+   							align: 'center'
+   						}
+   					]
+   				})
+   ```
+
+9. 添加按钮的表单组件
+
+   表单中包含三个组件: 图片, 标题, 链接
+
+   ```typescript
+   			ctx.service(this.$service.app.bannertest)
+   				.set('upsert', {
+   					items: [
+   						{
+   							prop: 'pics',
+   							label: '图片',
+   							component: {
+   								name: 'cl-upload'
+   							}
+   						},
+   						{
+   							prop: 'title',
+   							label: '标题',
+   							component: {
+   								name: 'el-input'
+   							}
+   						},
+   						{
+   							prop: 'link',
+   							label: '链接',
+   							component: {
+   								name: 'el-input'
+   							}
+   						}
+   					]
+   				})
+   ```
+
+   
+
+10. 图片列现在是文字, 改为使用插槽, 插槽中是cl自定义组件`<cl-viewer>`, 该组件所在文件: `src\cool\components\viewer\index.vue`
+
+    然后点击刷新按钮,  是***浏览器的刷新按钮***
+    
+    
+    
+    ```vue
+    <template>
+    	<cl-crud @load="onLoad"> 
+            <!-- 插槽内容 -->
+    		<template #table-column-pics="{scope}">
+    			<cl-viewer :urls="[scope.row.pics]" :current="scope.row.pics"></cl-viewer>
+    		</template>
+    	</cl-crud>
+    </template>
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			this.crud = app;
+    	
+    			ctx.service(this.$service.app.bannertest)
+    				.set('upsert', {
+    					items: [
+    						{
+    							prop: 'pics',
+    							label: '图片',
+    							component: {
+    								name: 'cl-upload'
+    							}
+    						},
+    						{
+    							prop: 'title',
+    							label: '标题',
+    							component: {
+    								name: 'el-input'
+    							}
+    						},
+    						{
+    							prop: 'link',
+    							label: '链接',
+    							component: {
+    								name: 'el-input'
+    							}
+    						}
+    					]
+    				})
+    				.set('table', {
+    					columns: [
+    						{
+    							label: '图片',
+    							prop: 'pics',
+    							align: 'center',
+                                // 使用插槽
+    							slot: true
+    						},
+    						{
+    							label: '标题',
+    							prop: 'title',
+    							align: 'center'
+    						},
+    						{
+    							label: '链接',
+    							prop: 'link',
+    							align: 'center'
+    						}
+    					]
+    				})
+    				.done();
+    	
+    			app.refresh();
+    		}
+    	}
+};
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+    
+11. 图片太大了, 给图片设定高度 height
+
+```vue
+    <cl-viewer height="80px" :urls="[scope.row.pics]" :current="scope.row.pics"></cl-viewer>
+```
+
+12. 图片缩放, 阿里云文档
+
+     ```
+     https://help.aliyun.com/document_detail/44688.html?spm=a2c4g.11174283.6.1367.727d7da2H8ebDp
+     ```
+
+13. 图片预览的时候是小图片, 点击后才是大图片
+
+     ```vue
+     <cl-viewer
+     	height="80px"
+     	:urls="[scope.row.pics]"
+     	:current="scope.row.pics + '?x-oss-process=image/resize,h_100'"
+     ></cl-viewer>
+     ```
+
+14. 表单校验, 请关注字段 `rules`
+
+     ```vue
+     				.set('upsert', {
+     					items: [
+     						{
+     							prop: 'pics',
+     							label: '图片',
+     							component: {
+     								name: 'cl-upload'
+     							},
+     							rules: [{ required: true, message: '请上传图片', trigger: 'change' }]
+     						},
+     						{
+     							prop: 'title',
+     							label: '标题',
+     							component: {
+     								name: 'el-input'
+     							},
+     							rules: [
+     								{ required: true, message: '请输入标题', trigger: 'blur' },
+     								{
+     									min: 3,
+     									max: 20,
+     									message: '长度在 3 到 20 个字符',
+     									trigger: 'blur'
+     								}
+     							]
+     						},
+     						{
+     							prop: 'link',
+     							label: '链接',
+     							component: {
+     								name: 'el-input'
+     							},
+     							rules: [
+     								{
+     									pattern: '[a-zA-Z]+://[^s]*',
+     									message: '请输入正确的链接地址',
+     									trigger: 'blur'
+     								}
+     							]
+     						}
+     					]
+     				})
+     ```
+
+     
+    
+15. 设置关键词搜索, 这是个**后端**的内容
+
+    文件路径: `app\controller\admin\app\bannertest.ts`
+
+    ```typescript
+    import { BaseController } from 'egg-cool-controller';
+    import router from 'egg-cool-router';
+    
+    /**
+    * 控制器功能描述
+    */
+    @router.prefix('/admin/app/bannertest', ['add', 'delete', 'update', 'info', 'list', 'page'])
+    export default class AppBannerTestController extends BaseController {
+      init() {
+        this.setEntity(this.ctx.repo.app.Bannertest);
+        this.setPageOption({
+          keyWordLikeFields:['title']
+        })
+      }
+    }
+    ```
+
+    
diff --git "a/cool-admin \345\211\215\347\253\257crud\346\225\231\347\250\213.md" "b/cool-admin \345\211\215\347\253\257crud\346\225\231\347\250\213.md"
new file mode 100644
index 0000000..b5015f7
--- /dev/null
+++ "b/cool-admin \345\211\215\347\253\257crud\346\225\231\347\250\213.md"	
@@ -0,0 +1,1606 @@
+# cool-admin 前端crud教程
+
+作者: gifted
+
+QQ: 203118908
+
+## 正文
+
+1. 创建一个vue测试页面 
+
+   文件路径: `src\views\test\curd-test.vue`
+
+   代码片段: `cl-crud`
+
+   @load ({ ctx, app }): `ctx 配置参数、事件` `app 处理参数、事件`
+
+2. 进入后台  `http://localhost:9000/` , 在`系统/权限管理/菜单列表`, 添加我们的测试页面
+
+   1. 节点名称: `前端crud测试`
+   2. 节点路由: `/crud-test`
+   3. 文件路径: `views/test/crud-test.vue`
+   4. 保存  
+
+3. 打开`http://localhost:9000/crud-test`, 查看效果
+
+4. 打开饿了么elementUI  `https://element.eleme.cn/#/zh-CN/component/table`
+
+5. 设置几个字段, 此时`src\views\test\crud-test.vue`文件内容如下
+
+   ```vue
+   <template>
+   	<cl-crud @load="onLoad"></cl-crud>
+   </template>
+   
+   <script>
+   export default {
+   	data() {
+   		return {
+   			crud: null
+   		};
+   	},
+   
+   	methods: {
+   		onLoad({ ctx }) {
+   			ctx.set('table', {
+   				columns: [
+   					{
+   						prop: 'name',
+   						label: '名字',
+   						width: 200,
+   						align: 'center'
+   					},
+   					{
+   						prop: 'date',
+   						label: '日期',
+   						align: 'left'
+   					}
+   				]
+   			}).done();
+   		}
+   	}
+   };
+   </script>
+   
+   <style lang="stylus" scoped></style>
+   
+   ```
+
+6. 增加序号和多选框, 也就是`index`和`selection`
+
+   ```vue
+   			ctx.set('table', {
+   				columns: [
+   					{
+   						type: 'index',
+   						width: '60'
+   					},
+   					{
+   						type: 'selection',
+   						width: '60'
+   					},
+   					{
+   						prop: 'name',
+   						label: '名字',
+   						width: 200,
+   						align: 'center'
+   					},
+   					{
+   						prop: 'date',
+   						label: '日期',
+   						align: 'left'
+   					}
+   				]
+   			}).done();
+   ```
+
+7. 数据操作, 主要由service控制, 
+
+   添加一些测试数据, 并且加上`app.refresh();`
+
+   数据在`ctx.service page()`中
+
+   ```vue
+   <template>
+   	<cl-crud @load="onLoad"></cl-crud>
+   </template>
+   
+   <script>
+   export default {
+   	data() {
+   		return {
+   			crud: null
+   		};
+   	},
+   
+   	methods: {
+   		onLoad({ ctx, app }) {
+   			ctx.service({
+   				page() {
+   					return Promise.resolve({
+   						list: [
+   							{
+   								id: 1,
+   								name: '张三',
+   								date: '20200323'
+   							},
+   							{
+   								id: 2,
+   								name: '李四',
+   								date: '20200324'
+   							}
+   						],
+   						pagination: {
+   							page: 1,
+   							total: 2,
+   							size: 20
+   						}
+   					});
+   				}
+   			})
+   
+   				.set('table', {
+   					columns: [
+   						{
+   							type: 'index',
+   							width: '60'
+   						},
+   						{
+   							type: 'selection',
+   							width: '60'
+   						},
+   						{
+   							prop: 'name',
+   							label: '名字',
+   							width: 200,
+   							align: 'center'
+   						},
+   						{
+   							prop: 'date',
+   							label: '日期',
+   							align: 'left'
+   						}
+   					]
+   				})
+   				.done();
+   
+   			app.refresh();
+   		}
+   	}
+   };
+   </script>
+   
+   <style lang="stylus" scoped></style>
+   
+   ```
+
+8. 使用服务service: 
+
+   `http://localhost:9000/crud-test` 中会显示系统用户
+
+   
+
+   ```vue
+   <template>
+   	<cl-crud @load="onLoad"></cl-crud>
+   </template>
+   
+   <script>
+   export default {
+   	data() {
+   		return {
+   			crud: null
+   		};
+   	},
+   
+   	methods: {
+   		onLoad({ ctx, app }) {
+   			ctx.service(this.$service.system.user)
+   
+   				.set('table', {
+   					columns: [
+   						{
+   							type: 'index',
+   							width: '60'
+   						},
+   						{
+   							type: 'selection',
+   							width: '60'
+   						},
+   						{
+   							prop: 'name',
+   							label: '名字',
+   							width: 200,
+   							align: 'center'
+   						},
+   						{
+   							prop: 'createTime',
+   							label: '创建时间',
+   							align: 'left'
+   						}
+   					]
+   				})
+   				.done();
+   
+   			app.refresh();
+   		}
+   	}
+   };
+   </script>
+   
+   <style lang="stylus" scoped></style>
+   
+   ```
+
+9. options, 在table后面加一个op字段
+
+   option默认显示`编辑` `删除` 两个选项
+
+   ```vue
+   <template>
+   	<cl-crud @load="onLoad"></cl-crud>
+   </template>
+   
+   <script>
+   export default {
+   	data() {
+   		return {
+   			crud: null
+   		};
+   	},
+   
+   	methods: {
+   		onLoad({ ctx, app }) {
+   			ctx.service(this.$service.system.user)
+   
+   				.set('table', {
+   					columns: [
+   						{
+   							type: 'index',
+   							width: '60'
+   						},
+   						{
+   							type: 'selection',
+   							width: '60'
+   						},
+   						{
+   							prop: 'name',
+   							label: '名字',
+   							width: 200,
+   							align: 'center'
+   						},
+   						{
+   							prop: 'createTime',
+   							label: '创建时间',
+   							align: 'left'
+   						}
+   					],
+   					op: { visible: true }
+   				})
+   				.done();
+   
+   			app.refresh();
+   		}
+   	}
+   };
+   </script>
+   
+   <style lang="stylus" scoped></style>
+   
+   ```
+
+10. 编辑table的option字段, 比如只显示一个编辑选项
+
+    ```
+    		op: { visible: true, layout: ['edit'] }
+    ```
+
+11. options使用插槽slot, 插槽在`<template>` 中定义
+
+    ```vue
+    <template>
+    	<cl-crud @load="onLoad">
+    		<template #slot-btn>
+    			<el-button size="mini" type="text">自定义按钮</el-button>
+    		</template>
+    	</cl-crud>
+    </template>
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			ctx.service(this.$service.system.user)
+    
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center'
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: { visible: true, layout: ['edit', 'delete', 'slot-btn'] }
+    				})
+    				.done();
+    
+    			app.refresh();
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+
+    
+
+12. 修改 options 的宽度
+
+    ```vue
+    					op: {
+    						visible: true,
+    						layout: ['edit', 'delete', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    ```
+
+13. 调换 options 的顺序
+
+    ```vue
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    ```
+
+14. 令插槽按钮不显示
+
+    ```vue
+    <template>
+    	<cl-crud @load="onLoad">
+    		<template #slot-btn>
+    			<el-button size="mini" type="text" v-permission="false">自定义按钮</el-button>
+    		</template>
+    	</cl-crud>
+    </template>
+    ```
+
+15. 配置service中的权限
+
+    ```vue
+    <template>
+    	<cl-crud @load="onLoad">
+    		<template #slot-btn>
+    			<el-button size="mini" type="text" v-permission="$service.system.user.permission.move"
+    				>自定义按钮</el-button
+    			>
+    		</template>
+    	</cl-crud>
+    </template>
+    ```
+
+16. 顶部按钮修改
+
+    在ctx.service中加了一个set layout, 这个就是配置顶部按钮的
+
+    比如: `'refresh-btn'` `'add-btn'` , 分别对应 刷新 和添加  按钮,
+
+    如果删掉这两个, 那么对应的按钮也就消失了
+
+     `flex1'` 是填充空白, 防止两个按钮太挤
+
+    ```vue
+    <template>
+    	<cl-crud @load="onLoad">
+    		<template #slot-btn>
+    			<el-button size="mini" type="text" v-permission="$service.system.user.permission.move"
+    				>自定义按钮</el-button
+    			>
+    		</template>
+    	</cl-crud>
+    </template>
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			ctx.service(this.$service.system.user)
+    
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center'
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    				})
+    				.set('layout', [
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    					['data-table'],
+    					['flex1', 'pagination']
+    				])
+    				.done();
+    
+    			app.refresh();
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+
+17. 顶部按钮添加, 同样是使用插槽 `slot-btn`
+
+    要以 `slot-` 开头
+
+    ```vue
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'slot-btn',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    ```
+
+18. 动态控制列
+
+    1. 在插槽中添加一个click属性, 值是onTest
+
+    2. 在methods中定义这个onTest
+
+    3. 在data中添加一个canShowName, 用来控制是否显示name字段
+
+    4. 在name这个字段中, 添加一个hidden属性
+
+    5. 打开 `http://localhost:9000/crud-test`
+
+    6. 点击自定义按钮, 名字就会隐藏或者显示
+
+    7. 注意格式 `this.crud.setData('table.columns[prop:name].hidden', this.canShowName);`
+
+       这个表示设置`table/columns/name/hidden` 的属性
+
+    ```vue
+    <template>
+    	<cl-crud @load="onLoad">
+    		<template #slot-btn>
+    			<el-button
+    				size="mini"
+    				type="text"
+    				@click="onTest"
+    				v-permission="$service.system.user.permission.move"
+    				>自定义按钮</el-button
+    			>
+    		</template>
+    	</cl-crud>
+    </template>
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null,
+    			canShowName: false
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			this.crud = app;
+    			ctx.service(this.$service.system.user)
+    
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center',
+    							hidden: this.canShowName
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    				})
+    				.set('layout', [
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'slot-btn',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    					['data-table'],
+    					['flex1', 'pagination']
+    				])
+    				.done();
+    
+    			app.refresh();
+    		},
+    		onTest() {
+    			this.canShowName = !this.canShowName;
+    			this.crud.setData('table.columns[prop:name].hidden', this.canShowName);
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+
+19. 添加表单
+
+    1. 添加了set upsert
+    2. span控制宽度比值
+
+```vue
+<template>
+	<cl-crud @load="onLoad">
+		<template #slot-btn>
+			<el-button
+				size="mini"
+				type="text"
+				@click="onTest"
+				v-permission="$service.system.user.permission.move"
+				>自定义按钮</el-button
+			>
+		</template>
+	</cl-crud>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			crud: null,
+			canShowName: false
+		};
+	},
+
+	methods: {
+		onLoad({ ctx, app }) {
+			this.crud = app;
+			ctx.service(this.$service.system.user)
+
+				.set('table', {
+					columns: [
+						{
+							type: 'index',
+							width: '60'
+						},
+						{
+							type: 'selection',
+							width: '60'
+						},
+						{
+							prop: 'name',
+							label: '名字',
+							width: 200,
+							align: 'center',
+							hidden: this.canShowName
+						},
+						{
+							prop: 'createTime',
+							label: '创建时间',
+							align: 'left'
+						}
+					],
+					op: {
+						visible: true,
+						layout: ['delete', 'edit', 'slot-btn'],
+						props: { width: '300px' }
+					}
+				})
+				.set('upsert', {
+					props: {
+						width: '700px'
+					},
+					items: [
+						{
+							label: '姓名',
+							prop: 'name',
+							span: 12,
+							component: {
+								name: 'el-input'
+							}
+						},
+						{
+							label: '创建时间',
+							prop: 'createTime',
+							span: 12,
+							component: {
+								name: 'el-date-picker'
+							}
+						}
+					]
+				})
+				.set('layout', [
+					[
+						'refresh-btn',
+						'add-btn',
+						'multi-delete-btn',
+						'query',
+						'slot-btn',
+						'flex1',
+						'search-key',
+						'adv-btn'
+					],
+					['data-table'],
+					['flex1', 'pagination']
+				])
+				.done();
+
+			app.refresh();
+		},
+		onTest() {
+			this.canShowName = !this.canShowName;
+			this.crud.setData('table.columns[prop:name].hidden', this.canShowName);
+		}
+	}
+};
+</script>
+
+<style lang="stylus" scoped></style>
+
+```
+
+20. 数据校验
+
+    饿了么element表单校验 `https://element.eleme.cn/#/zh-CN/component/form`
+
+    主要是`rules` 字段
+
+    ```vue
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							},
+    							rules: [
+    								{ required: true, message: '请输入活动名称', trigger: 'blur' },
+    								{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+    							]
+    						},
+    ```
+
+21. 自定义表单
+
+    1. 在div中新建一个el-dialog弹窗
+2. 在data()中添加一个visible属性 值为false
+    3. 在onTest中, 将visible设置为true
+4. 点击自定义按钮, 就能看见自定义表单了
+    
+```vue
+    <template>
+	<div>
+    		<cl-crud @load="onLoad">
+    			<template #slot-btn>
+    				<el-button
+					size="mini"
+    					type="text"
+    					@click="onTest"
+    					v-permission="$service.system.user.permission.move"
+    					>自定义按钮</el-button
+    				>
+    			</template>
+    		</cl-crud>
+    
+    		<el-dialog :visible.sync="visible">
+    			<el-form>
+    				<el-form-item label="请输入您的姓名">
+    					<el-input></el-input>
+    				</el-form-item>
+    			</el-form>
+    		</el-dialog>
+    	</div>
+    </template>
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null,
+    			canShowName: false,
+    			visible: false
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			this.crud = app;
+    			ctx.service(this.$service.system.user)
+    
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center',
+    							hidden: this.canShowName
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    				})
+    				.set('upsert', {
+    					props: {
+    						width: '700px'
+    					},
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							},
+    							rules: [
+    								{ required: true, message: '请输入活动名称', trigger: 'blur' },
+    								{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+    							]
+    						},
+    
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						}
+    					]
+    				})
+    				.set('layout', [
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'slot-btn',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    					['data-table'],
+    					['flex1', 'pagination']
+    				])
+    				.done();
+    
+    			app.refresh();
+    		},
+    		onTest() {
+    			// this.canShowName = !this.canShowName;
+    			// this.crud.setData('table.columns[prop:name].hidden', this.canShowName);
+    			this.visible = true;
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+    
+22. 图片上传
+
+    1. 在 set upsert items 中, 添加一个头像对象
+
+       ```vue
+       						{
+       							prop: 'avatar',
+       							label: '头像',
+       							component: {
+       								name: 'cl-upload',
+       								props: {
+       									props: {
+       										multiple: true,
+       										'multiple-limit': 2
+       									}
+       								}
+       							}
+       						}
+       ```
+
+
+    这个步骤的完整代码如下: 
+
+    ```vue
+    <template>
+    	<div>
+    		<cl-crud @load="onLoad">
+    			<template #slot-btn>
+    				<el-button
+    					size="mini"
+    					type="text"
+    					@click="onTest"
+    					v-permission="$service.system.user.permission.move"
+    				>自定义按钮</el-button>
+    			</template>
+    		</cl-crud>
+    
+    		<el-dialog :visible.sync="visible">
+    			<el-form>
+    				<el-form-item label="请输入您的姓名">
+    					<el-input></el-input>
+    				</el-form-item>
+    			</el-form>
+    		</el-dialog>
+    	</div>
+    </template>
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null,
+    			canShowName: false,
+    			visible: false
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			this.crud = app;
+    			ctx.service(this.$service.system.user)
+    
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center',
+    							hidden: this.canShowName
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    				})
+    				.set('upsert', {
+    					props: {
+    						width: '700px'
+    					},
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							},
+    							rules: [
+    								{ required: true, message: '请输入活动名称', trigger: 'blur' },
+    								{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+    							]
+    						},
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						},
+    						{
+    							prop: 'avatar',
+    							label: '头像',
+    							component: {
+    								name: 'cl-upload',
+    								props: {
+    									props: {
+    										multiple: true,
+    										'multiple-limit': 2
+    									}
+    								}
+    							}
+    						}
+    					]
+    				})
+    				.set('layout', [
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'slot-btn',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    					['data-table'],
+    					['flex1', 'pagination']
+    				])
+    				.done();
+    
+    			app.refresh();
+    		},
+    		onTest() {
+    			// this.canShowName = !this.canShowName;
+    			// this.crud.setData('table.columns[prop:name].hidden', this.canShowName);
+    			this.visible = true;
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+
+23. 高级搜索
+
+    1. 添加set adv
+    2. adv和upsert写法一样
+    3. 也可以使用插槽
+    4. 在cl-curd中, 添加一个插槽slot-cs
+
+    ```vue
+    <template>
+    	<div>
+    		<cl-crud @load="onLoad">
+    			<template #slot-btn>
+    				<el-button
+    					size="mini"
+    					type="text"
+    					@click="onTest"
+    					v-permission="$service.system.user.permission.move"
+    				>自定义按钮</el-button>
+    			</template>
+    			<template #slot-cs>
+    				<el-input></el-input>
+    			</template>
+    		</cl-crud>
+    
+    		<el-dialog :visible.sync="visible">
+    			<el-form>
+    				<el-form-item label="姓名">
+    					<el-input></el-input>
+    				</el-form-item>
+    			</el-form>
+    		</el-dialog>
+    	</div>
+    </template>
+    
+    
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null,
+    			canShowName: false,
+    			visible: false
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			this.crud = app;
+    			ctx.service(this.$service.system.user)
+    
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center',
+    							hidden: this.canShowName
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    				})
+    				.set('upsert', {
+    					props: {
+    						width: '700px'
+    					},
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							},
+    							rules: [
+    								{ required: true, message: '请输入活动名称', trigger: 'blur' },
+    								{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+    							]
+    						},
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						},
+    						{
+    							prop: 'avatar',
+    							label: '头像',
+    							component: {
+    								name: 'cl-upload',
+    								props: {
+    									props: {
+    										multiple: true,
+    										'multiple-limit': 2
+    									}
+    								}
+    							}
+    						}
+    					]
+    				})
+    
+    				.set('adv', {
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							}
+    						},
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						},
+    						{
+    							label: '自定义插槽',
+    							prop: 'cs',
+    							span: 12,
+    							component: {
+    								name: 'slot-cs'
+    							}
+    						}
+    					]
+    				})
+    				.set('layout', [
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'slot-btn',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    					['data-table'],
+    					['flex1', 'pagination']
+    				])
+    				.done();
+    
+    			app.refresh();
+    		},
+    		onTest() {
+    			// this.canShowName = !this.canShowName;
+    			// this.crud.setData('table.columns[prop:name].hidden', this.canShowName);
+    			this.visible = true;
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+
+24. 设置字典, 也就是按钮的名字, 比如添加改为加加
+
+    文档: `https://docs.cool-admin.com/#/front/crud?id=dict`
+
+    ```vue
+    <template>
+    	<div>
+    		<cl-crud @load="onLoad">
+    			<template #slot-btn>
+    				<el-button
+    					size="mini"
+    					type="text"
+    					@click="onTest"
+    					v-permission="$service.system.user.permission.move"
+    				>自定义按钮</el-button>
+    			</template>
+    			<template #slot-cs>
+    				<el-input></el-input>
+    			</template>
+    		</cl-crud>
+    
+    		<el-dialog :visible.sync="visible">
+    			<el-form>
+    				<el-form-item label="姓名">
+    					<el-input></el-input>
+    				</el-form-item>
+    			</el-form>
+    		</el-dialog>
+    	</div>
+    </template>
+    
+    
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null,
+    			canShowName: false,
+    			visible: false
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			this.crud = app;
+    			ctx.service(this.$service.system.user)
+    				.set('dict', {
+    					label: {
+    						add: '加加',
+    						delete: '减减',
+    						update: '编编',
+    						refresh: '刷刷',
+    						advSearch: '高级搜素'
+    					}
+    				})
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center',
+    							hidden: this.canShowName
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    				})
+    				.set('upsert', {
+    					props: {
+    						width: '700px'
+    					},
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							},
+    							rules: [
+    								{ required: true, message: '请输入活动名称', trigger: 'blur' },
+    								{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+    							]
+    						},
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						},
+    						{
+    							prop: 'avatar',
+    							label: '头像',
+    							component: {
+    								name: 'cl-upload',
+    								props: {
+    									props: {
+    										multiple: true,
+    										'multiple-limit': 2
+    									}
+    								}
+    							}
+    						}
+    					]
+    				})
+    
+    				.set('adv', {
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							}
+    						},
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						},
+    						{
+    							label: '自定义插槽',
+    							prop: 'cs',
+    							span: 12,
+    							component: {
+    								name: 'slot-cs'
+    							}
+    						}
+    					]
+    				})
+    				.set('layout', [
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'slot-btn',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    					['data-table'],
+    					['flex1', 'pagination']
+    				])
+    				.done();
+    
+    			app.refresh();
+    		},
+    		onTest() {
+    			// this.canShowName = !this.canShowName;
+    			// this.crud.setData('table.columns[prop:name].hidden', this.canShowName);
+    			this.visible = true;
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+
+25. 刷新事件on,  就是增加一个监听 on refresh
+
+    文档: https://docs.cool-admin.com/#/front/crud?id=load-ctx-app-
+
+    ```vue
+    <template>
+    	<div>
+    		<cl-crud @load="onLoad">
+    			<template #slot-btn>
+    				<el-button
+    					size="mini"
+    					type="text"
+    					@click="onTest"
+    					v-permission="$service.system.user.permission.move"
+    				>自定义按钮</el-button>
+    			</template>
+    			<template #slot-cs>
+    				<el-input></el-input>
+    			</template>
+    		</cl-crud>
+    
+    		<el-dialog :visible.sync="visible">
+    			<el-form>
+    				<el-form-item label="姓名">
+    					<el-input></el-input>
+    				</el-form-item>
+    			</el-form>
+    		</el-dialog>
+    	</div>
+    </template>
+    
+    
+    
+    <script>
+    export default {
+    	data() {
+    		return {
+    			crud: null,
+    			canShowName: false,
+    			visible: false
+    		};
+    	},
+    
+    	methods: {
+    		onLoad({ ctx, app }) {
+    			this.crud = app;
+    			ctx.service(this.$service.system.user)
+    				.set('dict', {
+    					label: {
+    						add: '加加',
+    						delete: '减减',
+    						update: '编编',
+    						refresh: '刷刷',
+    						advSearch: '高级搜素'
+    					}
+    				})
+    				.set('table', {
+    					columns: [
+    						{
+    							type: 'index',
+    							width: '60'
+    						},
+    						{
+    							type: 'selection',
+    							width: '60'
+    						},
+    						{
+    							prop: 'name',
+    							label: '名字',
+    							width: 200,
+    							align: 'center',
+    							hidden: this.canShowName
+    						},
+    						{
+    							prop: 'createTime',
+    							label: '创建时间',
+    							align: 'left'
+    						}
+    					],
+    					op: {
+    						visible: true,
+    						layout: ['delete', 'edit', 'slot-btn'],
+    						props: { width: '300px' }
+    					}
+    				})
+    				.set('upsert', {
+    					props: {
+    						width: '700px'
+    					},
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							},
+    							rules: [
+    								{ required: true, message: '请输入活动名称', trigger: 'blur' },
+    								{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+    							]
+    						},
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						},
+    						{
+    							prop: 'avatar',
+    							label: '头像',
+    							component: {
+    								name: 'cl-upload',
+    								props: {
+    									props: {
+    										multiple: true,
+    										'multiple-limit': 2
+    									}
+    								}
+    							}
+    						}
+    					]
+    				})
+    
+    				.set('adv', {
+    					items: [
+    						{
+    							label: '姓名',
+    							prop: 'name',
+    							span: 12,
+    							component: {
+    								name: 'el-input'
+    							}
+    						},
+    						{
+    							label: '创建时间',
+    							prop: 'createTime',
+    							span: 12,
+    							component: {
+    								name: 'el-date-picker'
+    							}
+    						},
+    						{
+    							label: '自定义插槽',
+    							prop: 'cs',
+    							span: 12,
+    							component: {
+    								name: 'slot-cs'
+    							}
+    						}
+    					]
+    				})
+    				.set('layout', [
+    					[
+    						'refresh-btn',
+    						'add-btn',
+    						'multi-delete-btn',
+    						'query',
+    						'slot-btn',
+    						'flex1',
+    						'search-key',
+    						'adv-btn'
+    					],
+    					['data-table'],
+    					['flex1', 'pagination']
+    				])
+    				.on('refresh', async (params, { next }) => {
+    					console.log('params =');
+    					console.log(params);
+    					// 此处 await  then 两种都可以
+    					next(params);
+    				})
+    				.done();
+    
+    			app.refresh();
+    		},
+    		onTest() {
+    			// this.canShowName = !this.canShowName;
+    			// this.crud.setData('table.columns[prop:name].hidden', this.canShowName);
+			this.visible = true;
+    		}
+    	}
+    };
+    </script>
+    
+    <style lang="stylus" scoped></style>
+    
+    ```
+    
+    # OVER!
+    
+    
diff --git "a/cool-admin \345\277\253\351\200\237\347\274\226\345\206\231\351\200\232\347\224\250\345\217\212\350\207\252\345\256\232\344\271\211API\346\216\245\345\217\243.md" "b/cool-admin \345\277\253\351\200\237\347\274\226\345\206\231\351\200\232\347\224\250\345\217\212\350\207\252\345\256\232\344\271\211API\346\216\245\345\217\243.md"
new file mode 100644
index 0000000..c787e01
--- /dev/null
+++ "b/cool-admin \345\277\253\351\200\237\347\274\226\345\206\231\351\200\232\347\224\250\345\217\212\350\207\252\345\256\232\344\271\211API\346\216\245\345\217\243.md"	
@@ -0,0 +1,74 @@
+# cool-admin 快速编写通用及自定义API接口
+作者: gifted
+
+QQ: 203118908
+
+视频: https://www.bilibili.com/video/bv1VE411c7he
+
+## 正文
+
+1. 在`app\entity\test\test.ts`中填写数据库信息. (代码片段: entity)
+
+2. yarn dev  (一定是先填写数据库信息, 再开启服务, 否则typings\typeorm.d.ts中没有test表信息)
+
+3. 在`app\controller\test.ts`中新建控制器. (代码片段: controller)
+
+4. postman中测试接口. (raw json)  
+
+   ```json
+   {
+     "name":"小蓝",
+     "age":15
+   }
+   ```
+
+   
+
+## 增删改查
+
+- 增
+
+  ```json
+  {
+      "name": "小东",
+      "age": 18
+  }
+  ```
+
+  
+
+- 删
+
+  ```json
+  {
+      "ids":[2]
+  }
+  ```
+
+  
+
+- 改
+
+  ```json
+  {
+      "id":2
+  }
+  ```
+
+  
+
+- 查
+
+  ```
+  method: get
+  url: http://localhost:7001/test/list
+  ```
+
+  
+
+## 关键词查询
+
+```json
+http://localhost:7001/test/page?keyWord=二
+```
+