格式化代码

README.md

@@ -1,24 +1,290 @@
-# front-next-vue3
+<p align="center">
+  <a href="https://show.cool-admin.com/" target="blank"><img src="https://admin.cool-js.com/logo.png" width="200" alt="cool-admin Logo" /></a>
+</p>
 
-## Project setup
+<p align="center">cool-admin 一个很酷的后台权限管理系统，开源免费，模块化、插件化、极速开发 CRUD，方便快速构建迭代后台管理系统， 到论坛 进一步了解</p>
-```
+
-yarn install
+<p align="center">
+    <a href="https://github.com/cool-team-official/cool-admin-vue/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="GitHub license" />
+    <a href=""><img src="https://img.shields.io/github/package-json/v/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
+    <img src="https://img.shields.io/github/last-commit/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
+</p>
+
+## 演示
+
+[https://show.cool-admin.com](https://show.cool-admin.com)
+
+-   账户：admin
+-   密码：123456
+
+<img src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/home-mini.png" alt="Admin Home"></a>
+
+## 项目后端
+
+[https://github.com/cool-team-official/cool-admin-midway](https://github.com/cool-team-official/cool-admin-midway)
+
+## 微信群
+
+<img width="260" src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/wechat.jpeg" alt="Admin Wechat"></a>
+
+## 微信公众号
+
+<img width="260" src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/mp.jpg" alt="Admin Wechat"></a>
+
+## 在线社区
+
+[https://bbs.cool-js.com/](https://bbs.cool-js.com/)
+
+## 使用条件
+
+请确保您的操作系统上安装了 Node.js（> = 8.9.0）、@vue/cli （> 3.0.0）。
+
+## 安装项目依赖
+
+推荐使用 `yarn`：
+
+```shell
+yarn
 ```
 
-### Compiles and hot-reloads for development
+解决 `node-sass` 网络慢的方法：
+
+```shell
+yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
 ```
+
+## 运行应用程序
+
+安装过程完成后，运行以下命令启动服务。您可以在浏览器中预览网站 [http://localhost:9000](http://localhost:9000)
+
+```shell
 yarn serve
 ```
 
-### Compiles and minifies for production
+## 极速 CRUD
-```
+
-yarn build
+1. `vscode` 编辑器下输入关键字 `cl-crud`，会生成对应的模板代码：
+
+```html
+<template>
+	<cl-crud ref="crud" @load="onLoad">
+		<el-row type="flex" align="middle">
+			<!-- 刷新按钮 -->
+			<cl-refresh-btn />
+			<!-- 新增按钮 -->
+			<cl-add-btn />
+			<!-- 删除按钮 -->
+			<cl-multi-delete-btn />
+			<cl-flex1 />
+			<!-- 关键字搜索 -->
+			<cl-search-key />
+		</el-row>
+
+		<el-row>
+			<!-- 数据表格 -->
+			<cl-table v-bind="table"></cl-table>
+		</el-row>
+
+		<el-row type="flex">
+			<cl-flex1 />
+			<!-- 分页控件 -->
+			<cl-pagination />
+		</el-row>
+
+		<!-- 新增、编辑 -->
+		<cl-upsert ref="upsert" v-bind="upsert"></cl-upsert>
+	</cl-crud>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 新增、编辑配置
+				upsert: {
+					items: []
+				},
+				// 表格配置
+				table: {
+					columns: []
+				}
+			};
+		},
+		methods: {
+			onLoad({ ctx, app }) {
+				// crud 配置
+				ctx.service().done();
+				// 发送 page 接口请求
+				app.refresh();
+			}
+		}
+	};
+</script>
 ```
 
-### Lints and fixes files
+2. 编辑数据表格 `cl-table`：
-```
+
-yarn lint
+```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"
+			}
+		];
+	}
+}
 ```
 
-### Customize configuration
+3. 编辑新增、编辑表单 `cl-upsert`：
-See [Configuration Reference](https://cli.vuejs.org/config/).
+
+```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)

src/crud/types/adv-search.d.ts

@@ -1,3 +1,3 @@
 import { FormItem } from "./form";
 
-export interface AdvSearchItem extends FormItem {}
+export type AdvSearchItem = FormItem;

src/crud/types/upsert.d.ts

@@ -1,7 +1,7 @@
 import { Form, FormItem, FormRef } from "./form";
 
-export interface UpsertItem extends FormItem {}
+export type UpsertItem = FormItem;
 
-export interface UpsertRef extends FormRef {}
+export type UpsertRef = FormRef;
 
-export interface Upsert extends Form {}
+export type Upsert = Form;