diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..d6471a3
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,2 @@
+> 1%
+last 2 versions
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..0d0f62a
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,8 @@
+/public/
+/dist/
+/node_modules/
+/src/icons/svg/
+/mock/
+/cool/
+/src/cool/
+vue.config.js
\ No newline at end of file
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..39bd413
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+	root: true,
+	env: {
+		node: true
+	},
+	extends: ["plugin:vue/essential", "@vue/prettier"],
+	rules: {
+		"no-console": "off",
+		"comma-dangle": [2, "never"]
+	},
+	parserOptions: {
+		parser: "@typescript-eslint/parser"
+	}
+};
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..27ef30a
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..b82b0c6
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,9 @@
+{
+	"tabWidth": 4,
+	"useTabs": true,
+	"semi": true,
+	"jsxBracketSameLine": true,
+	"singleQuote": false,
+	"printWidth": 100,
+	"trailingComma": "none"
+}
diff --git a/.vscode/crud.code-snippets b/.vscode/crud.code-snippets
new file mode 100644
index 0000000..a86c776
--- /dev/null
+++ b/.vscode/crud.code-snippets
@@ -0,0 +1,61 @@
+{
+	"cl-crud": {
+		"prefix": "cl-crud",
+		"body": [
+			"<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 }) {",
+			"            ctx.service(${1}).done();",
+			"            app.refresh();",
+			"        }",
+			"    }",
+			"};",
+			"</script>",
+			""
+		],
+		"description": "cl-crud snippets"
+	}
+}
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..83140ce
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 cool-team-official
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
index f1ae8d2..1eadaef 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,57 @@
-#cool-admin
+#### 介绍
+
+配置化编码，单表 CRUD 只需少量配置;写更少的代码，实现更多的功能;简洁、高效、可扩展、高度解耦
+
+#### 浏览器兼容性
+
+支持所有符合 ES5 标准的浏览器(不支持 IE8 及以下版本）.
+
+#### 在线社区
+
+[传送门](https://bbs.cool-js.com/)
+
+## 先决条件
+
+请确保您的操作系统上安装了 Node.js（> = 8.9.0）、@vue/cli。
+
+## 安装项目依赖
+
+推荐使用 `yarn`：
+
+```shell
+yarn
+```
+
+解决 `node-sass` 网络慢的方法：
+
+```shell
+yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
+```
+
+## 安装扩展组件的依赖
+
+安装 `cl-admin-cli` 脚手架：
+
+```shell
+npm install cl-admin-cli -g
+```
+
+安装扩展组件依赖：
+
+```shell
+cl install
+```
+
+## 运行应用程序
+
+安装过程完成后，运行以下命令启动服务。您可以在浏览器中预览网站 [http://localhost:9000](http://localhost:9000)
+
+```shell
+yarn serve
+```
+
+## 分析包内容
+
+```shell
+yarn report
+```
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..32df09b
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+	presets: ["@vue/app"],
+	plugins: [
+		["jsx-v-model"],
+		[
+			"component",
+			{
+				libraryName: "element-ui",
+				styleLibraryName: "theme-chalk"
+			}
+		]
+	]
+};
diff --git a/cool/components/base/common/index.js b/cool/components/base/common/index.js
new file mode 100644
index 0000000..cfee74b
--- /dev/null
+++ b/cool/components/base/common/index.js
@@ -0,0 +1,22 @@
+import { iconfontUrl } from "@/config/env";
+
+if (iconfontUrl) {
+	const link = document.createElement("link");
+	link.type = "text/css";
+	link.rel = "stylesheet";
+	link.href = iconfontUrl;
+	document.getElementsByTagName("head")[0].appendChild(link);
+}
+
+const requireAll = (requireContext) => requireContext.keys().map(requireContext);
+const req = require.context("@/icons/svg/", false, /\.svg$/);
+requireAll(req);
+
+export function iconList() {
+	return req
+		.keys()
+		.map(req)
+		.map((e) => e.default.id)
+		.filter((e) => e.includes("icon"))
+		.sort();
+}
diff --git a/cool/components/base/components/avatar/index.vue b/cool/components/base/components/avatar/index.vue
new file mode 100644
index 0000000..77bb3a6
--- /dev/null
+++ b/cool/components/base/components/avatar/index.vue
@@ -0,0 +1,98 @@
+<template>
+	<div class="cl-avatar" :class="[size, shape]" :style="[style2]">
+		<el-image :src="src" alt="">
+			<div slot="error" class="image-slot">
+				<i class="el-icon-picture-outline"></i>
+			</div>
+		</el-image>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "cl-avatar",
+
+	props: {
+		src: String,
+		size: {
+			type: String,
+			default: "large"
+		},
+		shape: {
+			type: String,
+			default: "circle"
+		}
+	},
+
+	data() {
+		return {
+			style2: {}
+		};
+	},
+
+	mounted() {
+		if (typeof this.size == "number") {
+			this.style2 = {
+				height: this.size + "px",
+				width: this.size + "px"
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-avatar {
+	overflow: hidden;
+	background-color: #f7f7f7;
+
+	&.large {
+		height: 50px;
+		width: 50px;
+	}
+
+	&.medium {
+		height: 40px;
+		width: 40px;
+	}
+
+	&.small {
+		height: 30px;
+		width: 30px;
+	}
+
+	&.circle {
+		border-radius: 100%;
+	}
+
+	&.square {
+		border-radius: 10%;
+	}
+
+	img {
+		height: 100%;
+		width: 100%;
+	}
+
+	.el-image {
+		height: 100%;
+		width: 100%;
+
+		/deep/.image-slot {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			width: 100%;
+
+			i {
+				font-size: 20px;
+			}
+		}
+	}
+
+	.el-icon-picture-outline {
+		color: #ccc;
+	}
+}
+</style>
diff --git a/cool/components/base/components/dept/check.vue b/cool/components/base/components/dept/check.vue
new file mode 100644
index 0000000..5c67d97
--- /dev/null
+++ b/cool/components/base/components/dept/check.vue
@@ -0,0 +1,138 @@
+<template>
+	<div class="cl-dept-check" v-loading="loading">
+		<p v-if="title">{{ title }}</p>
+
+		<div class="cl-dept-check__search">
+			<el-input placeholder="输入关键字进行过滤" v-model="keyword" size="small"> </el-input>
+			<el-switch
+				:active-value="1"
+				:inactive-value="0"
+				v-model="form.relevance"
+				@change="onCheckStrictlyChange"
+			></el-switch
+			>是否关联上下级
+		</div>
+
+		<div class="cl-dept-check__tree" v-if="visible">
+			<el-tree
+				:data="list"
+				:props="props"
+				:default-checked-keys="checked"
+				:filter-node-method="filterNode"
+				:check-strictly="!form.relevance"
+				highlight-current
+				node-key="id"
+				show-checkbox
+				ref="tree"
+				@check-change="onCheckChange"
+			>
+			</el-tree>
+		</div>
+	</div>
+</template>
+
+<script>
+import { deepTree } from "cl-admin/utils";
+
+export default {
+	name: "cl-dept-check",
+
+	props: {
+		value: Array,
+		title: String
+	},
+
+	inject: ["form"],
+
+	data() {
+		return {
+			list: [],
+			checked: [],
+			keyword: "",
+			props: {
+				label: "name",
+				children: "children"
+			},
+			loading: false,
+			visible: true
+		};
+	},
+
+	watch: {
+		keyword(val) {
+			this.$refs["tree"].filter(val);
+		},
+
+		value(val) {
+			this.refreshTree(val);
+		}
+	},
+
+	mounted() {
+		this.refresh();
+	},
+
+	methods: {
+		refreshTree(val) {
+			this.checked = val || [];
+		},
+
+		refresh() {
+			this.$service.system.dept
+				.list()
+				.then((res) => {
+					this.list = deepTree(res);
+					this.refreshTree(this.value);
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				});
+		},
+
+		filterNode(val, data) {
+			if (!val) return true;
+			return data.name.includes(val);
+		},
+
+		onCheckStrictlyChange() {
+			this.visible = false;
+
+			this.$nextTick(() => {
+				this.visible = true;
+			});
+		},
+
+		onCheckChange() {
+			this.$emit("input", this.$refs["tree"].getCheckedKeys());
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-dept-check {
+	&__search {
+		display: flex;
+		align-items: center;
+
+		.el-input {
+			flex: 1;
+			margin-right: 10px;
+		}
+
+		.el-switch {
+			margin-right: 5px;
+		}
+	}
+
+	&__tree {
+		border: 1px solid #dcdfe6;
+		margin-top: 5px;
+		border-radius: 3px;
+		max-height: 200px;
+		box-sizing: border-box;
+		overflow-x: hidden;
+		padding: 5px 0;
+	}
+}
+</style>
diff --git a/cool/components/base/components/dept/move.vue b/cool/components/base/components/dept/move.vue
new file mode 100644
index 0000000..8b5f72c
--- /dev/null
+++ b/cool/components/base/components/dept/move.vue
@@ -0,0 +1,100 @@
+<template>
+	<div class="cl-dept-move"></div>
+</template>
+
+<script>
+import { deepTree } from "cl-admin/utils";
+
+export default {
+	name: "cl-dept-move",
+
+	methods: {
+		async getDeptList() {
+			return await this.$service.system.dept.list().then(deepTree);
+		},
+
+		async toMove(ids) {
+			let list = await this.getDeptList();
+
+			this.$crud.openForm({
+				title: "部门转移",
+				width: "600px",
+				props: {
+					"label-width": "80px"
+				},
+				items: [
+					{
+						label: "选择部门",
+						prop: "dept",
+						component: {
+							name: "system-user__dept-move",
+
+							methods: {
+								selectRow(e) {
+									this.$emit("input", e);
+								}
+							},
+
+							render() {
+								return (
+									<div
+										style={{
+											border: "1px solid #eee",
+											"border-radius": "3px",
+											padding: "2px"
+										}}>
+										<el-tree
+											data={list}
+											{...{
+												props: {
+													props: {
+														label: "name"
+													}
+												}
+											}}
+											node-key="id"
+											highlight-current
+											on-node-click={this.selectRow}></el-tree>
+									</div>
+								);
+							}
+						}
+					}
+				],
+				on: {
+					submit: (data, { done, close }) => {
+						if (!data.dept) {
+							this.$message.warning("请选择部门");
+							return done();
+						}
+
+						const { name, id } = data.dept;
+
+						this.$confirm(`是否将用户转移到部门 ${name} 下`, "提示", {
+							type: "warning"
+						})
+							.then(() => {
+								this.$service.system.user
+									.move({
+										departmentId: id,
+										userIds: ids
+									})
+									.then((res) => {
+										this.$message.success("转移成功");
+										this.$emit("success", res);
+										close();
+									})
+									.catch((err) => {
+										this.$message.error(err);
+										this.$emit("error", err);
+										done();
+									});
+							})
+							.catch(() => {});
+					}
+				}
+			});
+		}
+	}
+};
+</script>
diff --git a/cool/components/base/components/dept/tree.vue b/cool/components/base/components/dept/tree.vue
new file mode 100644
index 0000000..574f597
--- /dev/null
+++ b/cool/components/base/components/dept/tree.vue
@@ -0,0 +1,422 @@
+<template>
+	<div class="cl-dept-tree">
+		<div class="cl-dept-tree__header">
+			<div>组织架构</div>
+
+			<ul class="cl-dept-tree__op">
+				<li>
+					<el-tooltip content="刷新">
+						<i class="el-icon-refresh" @click="refresh()"></i>
+					</el-tooltip>
+				</li>
+
+				<li v-if="drag && isPc">
+					<el-tooltip content="拖动排序">
+						<i class="el-icon-s-operation" @click="isDrag = true"></i>
+					</el-tooltip>
+				</li>
+
+				<li class="no" v-show="isDrag">
+					<el-button type="text" size="mini" @click="treeOrder(true)">保存</el-button>
+					<el-button type="text" size="mini" @click="treeOrder(false)">取消</el-button>
+				</li>
+			</ul>
+		</div>
+
+		<div class="cl-dept-tree__container" @contextmenu.prevent="openCM">
+			<el-tree
+				node-key="id"
+				highlight-current
+				default-expand-all
+				:data="list"
+				:props="{
+					label: 'name'
+				}"
+				:draggable="isDrag"
+				:allow-drag="allowDrag"
+				:allow-drop="allowDrop"
+				:expand-on-click-node="false"
+				v-loading="loading"
+				@node-contextmenu="openCM"
+			>
+				<template slot-scope="{ node, data }">
+					<div class="cl-dept-tree__node">
+						<span class="cl-dept-tree__node-label" @click="rowClick(data)">{{
+							node.label
+						}}</span>
+						<span
+							class="cl-dept-tree__node-icon"
+							v-if="!isPc"
+							@click="openCM($event, data, node)"
+						>
+							<i class="el-icon-more"></i>
+						</span>
+					</div>
+				</template>
+			</el-tree>
+		</div>
+	</div>
+</template>
+
+<script>
+import { deepTree, isArray, revDeepTree, isPc } from "cl-admin/utils";
+import { ContextMenu, Form } from "cl-admin-crud";
+
+export default {
+	name: "cl-dept-tree",
+
+	props: {
+		drag: {
+			type: Boolean,
+			default: true
+		},
+		level: {
+			type: Number,
+			default: 99
+		}
+	},
+
+	data() {
+		return {
+			list: [],
+			loading: false,
+			isDrag: false,
+			isPc: isPc()
+		};
+	},
+
+	created() {
+		this.refresh();
+	},
+
+	methods: {
+		openCM(e, d, n) {
+			let list = [
+				{
+					label: "新增",
+					"suffix-icon": "el-icon-plus",
+					hidden: n && n.level >= this.level,
+					callback: (item, done) => {
+						this.rowEdit({
+							name: "",
+							parentName: d.name,
+							parentId: d.id
+						});
+						done();
+					}
+				},
+				{
+					label: "编辑",
+					"suffix-icon": "el-icon-edit",
+					callback: (item, done) => {
+						this.rowEdit(d);
+						done();
+					}
+				}
+			];
+
+			if (!d) {
+				d = this.list[0];
+			}
+
+			if (d.parentId) {
+				list.push({
+					label: "删除",
+					"suffix-icon": "el-icon-delete",
+					callback: (item, done) => {
+						this.rowDel(d);
+						done();
+					}
+				});
+			}
+
+			list.push({
+				label: "新增成员",
+				"suffix-icon": "el-icon-user",
+				callback: (item, done) => {
+					this.$emit("user-add", d);
+					done();
+				}
+			});
+
+			ContextMenu.open(e, {
+				list
+			});
+		},
+
+		allowDrag({ data }) {
+			return data.parentId;
+		},
+
+		allowDrop(draggingNode, dropNode) {
+			return dropNode.data.parentId;
+		},
+
+		refresh() {
+			this.isDrag = false;
+			this.loading = true;
+
+			this.$service.system.dept
+				.list()
+				.then((res) => {
+					this.list = deepTree(res);
+					this.$emit("list-change", this.list);
+				})
+				.done(() => {
+					this.loading = false;
+				});
+		},
+
+		rowClick(e) {
+			ContextMenu.close();
+			let ids = e.children ? revDeepTree(e.children).map((e) => e.id) : [];
+			ids.unshift(e.id);
+			this.$emit("row-click", { item: e, ids });
+		},
+
+		rowEdit(e) {
+			const method = e.id ? "update" : "add";
+
+			Form.open({
+				title: "编辑部门",
+				width: "550px",
+				props: {
+					"label-width": "100px"
+				},
+				items: [
+					{
+						label: "部门名称",
+						prop: "name",
+						value: e.name,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写部门名称"
+							}
+						},
+						rules: {
+							required: true,
+							message: "部门名称不能为空"
+						}
+					},
+					{
+						label: "上级部门",
+						prop: "parentId",
+						value: e.parentName || "...",
+						component: {
+							name: "el-input",
+							attrs: {
+								disabled: true
+							}
+						}
+					},
+					{
+						label: "排序",
+						prop: "orderNum",
+						value: e.orderNum || 0,
+						component: {
+							name: "el-input-number",
+							props: {
+								"controls-position": "right",
+								min: 0,
+								max: 100
+							}
+						}
+					}
+				],
+				on: {
+					submit: (data, { done, close }) => {
+						this.$service.system.dept[method]({
+							id: e.id,
+							parentId: e.parentId,
+							name: data.name,
+							orderNum: data.orderNum
+						})
+							.then(() => {
+								this.$message.success(`新增部门${data.name}成功`);
+								close();
+								this.refresh();
+							})
+							.catch((err) => {
+								this.$message.error(err);
+								done();
+							});
+					}
+				}
+			});
+		},
+
+		rowDel(e) {
+			const del = (f) => {
+				this.$service.system.dept
+					.delete({
+						ids: e.id,
+						deleteUser: f
+					})
+					.then(() => {
+						if (f) {
+							this.$message.success("删除成功");
+						} else {
+							this.$confirm("该部门用户已移动到部门顶级", "删除成功");
+						}
+					})
+					.done(() => {
+						this.refresh();
+					});
+			};
+
+			this.$confirm("该操作会删除部门下的所有用户，是否确认？", "提示", {
+				type: "warning",
+				confirmButtonText: "直接删除",
+				cancelButtonText: "保留用户",
+				distinguishCancelAndClose: true
+			})
+				.then(() => {
+					del(true);
+				})
+				.catch((action) => {
+					if (action == "cancel") {
+						del(false);
+					}
+				});
+		},
+
+		treeOrder(f) {
+			if (f) {
+				this.$confirm("部门架构已发生改变，是否保存？", "提示", {
+					type: "warning"
+				})
+					.then(() => {
+						const deep = (list, pid) => {
+							list.forEach((e) => {
+								e.parentId = pid;
+								ids.push(e);
+
+								if (e.children && isArray(e.children)) {
+									deep(e.children, e.id);
+								}
+							});
+						};
+
+						let ids = [];
+
+						deep(this.list, null);
+
+						this.$service.system.dept
+							.order(
+								ids.map((e, i) => {
+									return {
+										id: e.id,
+										parentId: e.parentId,
+										orderNum: i
+									};
+								})
+							)
+							.then(() => {
+								this.$message.success("更新排序成功");
+							})
+							.catch((err) => {
+								this.$message.error(err);
+							})
+							.done(() => {
+								this.refresh();
+								this.isDrag = false;
+							});
+					})
+					.catch(() => {});
+			} else {
+				this.refresh();
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-dept-tree {
+	height: 100%;
+	width: 100%;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		height: 40px;
+		padding: 0 10px;
+		background-color: #fff;
+		letter-spacing: 1px;
+		position: relative;
+
+		div {
+			font-size: 14px;
+			color: $color-main;
+			flex: 1;
+			white-space: nowrap;
+		}
+
+		i {
+			font-size: 18px;
+			color: $color-main;
+			cursor: pointer;
+		}
+	}
+
+	/deep/.el-tree-node__content {
+		height: 36px;
+	}
+
+	&__op {
+		display: flex;
+
+		li {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			list-style: none;
+			margin-left: 5px;
+			padding: 5px;
+			cursor: pointer;
+
+			&:not(.no):hover {
+				background-color: #eee;
+			}
+		}
+	}
+
+	&__container {
+		height: calc(100% - 40px);
+		overflow-y: auto;
+		overflow-x: hidden;
+
+		/deep/.el-tree-node__content {
+			margin: 0 5px;
+		}
+	}
+
+	&__node {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+
+		&-label {
+			display: flex;
+			align-items: center;
+			flex: 1;
+			height: 100%;
+			font-size: 14px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		&-icon {
+			height: 28px;
+			width: 28px;
+			line-height: 28px;
+			text-align: center;
+			margin-right: 5px;
+		}
+	}
+}
+</style>
diff --git a/cool/components/base/components/icon-svg/index.vue b/cool/components/base/components/icon-svg/index.vue
new file mode 100644
index 0000000..ae4ebdb
--- /dev/null
+++ b/cool/components/base/components/icon-svg/index.vue
@@ -0,0 +1,56 @@
+<template>
+	<svg :class="svgClass" :style="style2" aria-hidden="true">
+		<use :xlink:href="iconName"></use>
+	</svg>
+</template>
+
+<script>
+import { isNumber } from "cl-admin/utils";
+
+export default {
+	name: "icon-svg",
+
+	props: {
+		name: {
+			type: String
+		},
+		className: {
+			type: String
+		},
+		size: {
+			type: [String, Number]
+		}
+	},
+
+	data() {
+		return {
+			style2: {}
+		};
+	},
+
+	computed: {
+		iconName() {
+			return `#${this.name}`;
+		},
+		svgClass() {
+			return ["icon-svg", `icon-svg__${this.name}`, this.className];
+		}
+	},
+
+	mounted() {
+		this.style2 = {
+			fontSize: isNumber(this.size) ? this.size + "px" : this.size
+		};
+	}
+};
+</script>
+
+<style>
+.icon-svg {
+	width: 1em;
+	height: 1em;
+	vertical-align: -0.15em;
+	fill: currentColor;
+	overflow: hidden;
+}
+</style>
diff --git a/cool/components/base/components/index.js b/cool/components/base/components/index.js
new file mode 100644
index 0000000..1172189
--- /dev/null
+++ b/cool/components/base/components/index.js
@@ -0,0 +1,35 @@
+import Avatar from "./avatar";
+import Scrollbar from "./scrollbar";
+import RouteNav from "./route-nav";
+import Process from "./process";
+import IconSvg from "./icon-svg";
+import DeptCheck from "./dept/check";
+import DeptMove from "./dept/move";
+import DeptTree from "./dept/tree";
+import MenuSlider from "./menu/slider";
+import MenuTopbar from "./menu/topbar";
+import MenuFile from "./menu/file";
+import MenuIcons from "./menu/icons";
+import MenuPerms from "./menu/perms";
+import MenuTree from "./menu/tree";
+import RoleSelect from "./role/select";
+import RolePerms from "./role/perms";
+
+export default {
+	Avatar,
+	Scrollbar,
+	RouteNav,
+	Process,
+	IconSvg,
+	DeptCheck,
+	DeptMove,
+	DeptTree,
+	MenuSlider,
+	MenuTopbar,
+	MenuFile,
+	MenuIcons,
+	MenuPerms,
+	MenuTree,
+	RoleSelect,
+	RolePerms
+};
diff --git a/cool/components/base/components/menu/file.vue b/cool/components/base/components/menu/file.vue
new file mode 100644
index 0000000..197adc8
--- /dev/null
+++ b/cool/components/base/components/menu/file.vue
@@ -0,0 +1,139 @@
+<template>
+	<div class="cl-menu-file">
+		<el-row :gutter="10">
+			<el-col :span="16">
+				<el-select v-model="newValue" filterable clearable placeholder="请选择">
+					<el-option
+						v-for="(item, index) in list"
+						:key="index"
+						:label="item.value"
+						:value="item.value"
+					>
+					</el-option>
+				</el-select>
+			</el-col>
+
+			<el-col :span="8">
+				<div class="cl-menu-file__module">
+					<span class="label">模块</span>
+
+					<el-select
+						v-model="form.moduleName"
+						placeholder="选择模块"
+						clearable
+						filterable
+						@change="onModuleChange"
+					>
+						<el-option
+							v-for="(item, index) in componentModules"
+							:key="index"
+							:label="item.label"
+							:value="item.moduleName"
+						>
+						</el-option>
+					</el-select>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { isEmpty } from "cl-admin/utils";
+
+const files = require.context("@/", true, /^.\/views.*(vue|js)/).keys();
+
+export default {
+	name: "cl-menu-file",
+
+	props: {
+		value: [String]
+	},
+
+	inject: ["form"],
+
+	data() {
+		return {
+			newValue: "",
+			list: []
+		};
+	},
+
+	computed: {
+		...mapGetters(["componentModules"])
+	},
+
+	watch: {
+		value: {
+			immediate: true,
+			handler(val) {
+				this.newValue = val || "";
+			}
+		},
+
+		newValue(val) {
+			this.$emit("input", val);
+		}
+	},
+
+	created() {
+		this.list = files
+			.filter((e) => {
+				return !e.includes("components");
+			})
+			.map((e) => {
+				return {
+					value: e.substr(2)
+				};
+			});
+	},
+
+	methods: {
+		async onModuleChange(val) {
+			const { label, keepAlive, icon, path, component } = this.componentModules.find(
+				(e) => e.moduleName == val
+			);
+
+			if (label) {
+				this.form.name = label;
+			}
+
+			if (path) {
+				this.form.router = path;
+			}
+
+			if (icon) {
+				this.form.icon = icon;
+			}
+
+			if (component) {
+				let c = await component();
+				this.form.viewPath = c.default.__file;
+			}
+
+			this.form.keepAlive = isEmpty(keepAlive) ? true : keepAlive;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-menu-file {
+	width: 100%;
+
+	/deep/ .el-select {
+		width: 100%;
+	}
+
+	&__module {
+		display: inline-flex;
+
+		.label {
+			width: 40px;
+			text-align: right;
+			margin-right: 10px;
+		}
+	}
+}
+</style>
diff --git a/cool/components/base/components/menu/icons.vue b/cool/components/base/components/menu/icons.vue
new file mode 100644
index 0000000..af0820e
--- /dev/null
+++ b/cool/components/base/components/menu/icons.vue
@@ -0,0 +1,95 @@
+<template>
+	<div class="cl-menu-icons">
+		<el-popover
+			ref="iconPopover"
+			placement="bottom-start"
+			trigger="click"
+			popper-class="popper-menu-icon"
+		>
+			<el-row :gutter="10" class="list">
+				<el-col :span="3" :xs="4" v-for="(item, index) in list" :key="index">
+					<el-button
+						size="mini"
+						:class="{ 'is-active': item === value }"
+						@click="onUpdate(item)"
+					>
+						<icon-svg :name="item"></icon-svg>
+					</el-button>
+				</el-col>
+			</el-row>
+		</el-popover>
+
+		<el-input
+			v-model="name"
+			v-popover:iconPopover
+			placeholder="请选择"
+			@input="onUpdate"
+		></el-input>
+	</div>
+</template>
+
+<script>
+import { iconList } from "cool/components/base";
+
+export default {
+	name: "cl-menu-icons",
+
+	props: {
+		value: String
+	},
+
+	data() {
+		return {
+			list: [],
+			name: ""
+		};
+	},
+
+	watch: {
+		value: {
+			immediate: true,
+			handler(val) {
+				this.name = val;
+			}
+		}
+	},
+
+	mounted() {
+		this.list = iconList();
+	},
+
+	methods: {
+		onUpdate(icon) {
+			this.$emit("input", icon);
+		}
+	}
+};
+</script>
+
+.
+<style lang="scss">
+.popper-menu-icon {
+	width: 480px;
+	max-width: 90%;
+	box-sizing: border-box;
+
+	.list {
+		height: 250px;
+		overflow-y: auto;
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	.el-button {
+		margin-bottom: 10px;
+		height: 40px;
+		width: 100%;
+		padding: 0;
+
+		.icon-svg {
+			font-size: 18px;
+			color: #444;
+		}
+	}
+}
+</style>
diff --git a/cool/components/base/components/menu/perms.vue b/cool/components/base/components/menu/perms.vue
new file mode 100644
index 0000000..25b63a2
--- /dev/null
+++ b/cool/components/base/components/menu/perms.vue
@@ -0,0 +1,97 @@
+<template>
+	<el-cascader
+		:options="options"
+		:props="{ multiple: true }"
+		separator=":"
+		clearable
+		filterable
+		v-model="newValue"
+		@change="onChange"
+	></el-cascader>
+</template>
+
+<script>
+export default {
+	name: "cl-menu-perms",
+
+	props: {
+		value: [String, Number, Array]
+	},
+
+	data() {
+		return {
+			options: [],
+			newValue: []
+		};
+	},
+
+	watch: {
+		value() {
+			this.parse();
+		}
+	},
+
+	created() {
+		let options = [];
+		let list = [];
+
+		const flat = (obj) => {
+			for (let i in obj) {
+				let { permission } = obj[i];
+
+				if (permission) {
+					list = [...list, Object.values(permission)].flat();
+				} else {
+					flat(obj[i]);
+				}
+			}
+		};
+
+		flat(this.$service);
+
+		list.filter((e) => e.includes(":"))
+			.map((e) => e.split(":"))
+			.forEach((arr) => {
+				const col = (i, d) => {
+					let key = arr[i];
+
+					let index = d.findIndex((e) => e.label == key);
+
+					if (index >= 0) {
+						col(i + 1, d[index].children);
+					} else {
+						let isLast = i == arr.length - 1;
+
+						d.push({
+							label: key,
+							value: key,
+							children: isLast ? null : []
+						});
+
+						if (!isLast) {
+							col(i + 1, d[d.length - 1].children || []);
+						}
+					}
+				};
+
+				col(0, options);
+			});
+
+		this.options = options;
+	},
+
+	mounted() {
+		this.parse();
+	},
+
+	methods: {
+		parse() {
+			this.newValue = this.value ? this.value.split(",").map((e) => e.split(":")) : [];
+		},
+
+		onChange(row) {
+			this.$emit("input", row.map((e) => e.join(":")).join(","));
+		}
+	}
+};
+</script>
diff --git a/cool/components/base/components/menu/slider/index.js b/cool/components/base/components/menu/slider/index.js
new file mode 100644
index 0000000..a645698
--- /dev/null
+++ b/cool/components/base/components/menu/slider/index.js
@@ -0,0 +1,81 @@
+import { mapGetters } from "vuex";
+import "./index.scss";
+
+export default {
+	name: "cl-menu-slider",
+
+	data() {
+		return {
+			visible: true
+		};
+	},
+
+	computed: {
+		...mapGetters(["menuList", "menuCollapse", "browser"])
+	},
+
+	watch: {
+		menuList() {
+			this.visible = false;
+
+			setTimeout(() => {
+				this.visible = true;
+			}, 0);
+		}
+	},
+
+	methods: {
+		toView(url) {
+			if (url != this.$route.path) {
+				this.$router.push(url);
+			}
+		}
+	},
+
+	render() {
+		const fn = (list) => {
+			return list
+				.filter((e) => e.isShow)
+				.map((e) => {
+					let html = null;
+
+					if (e.type == 0) {
+						html = (
+							<el-submenu index={String(e.id)} key={e.id}>
+								<template slot="title">
+									<icon-svg name={e.icon}></icon-svg>
+									<span slot="title">{e.name}</span>
+								</template>
+								{fn(e.children)}
+							</el-submenu>
+						);
+					} else {
+						html = (
+							<el-menu-item index={e.path} key={e.path}>
+								<icon-svg name={e.icon}></icon-svg>
+								<span slot="title">{e.name}</span>
+							</el-menu-item>
+						);
+					}
+
+					return html;
+				});
+		};
+
+		let el = fn(this.menuList);
+
+		return (
+			this.visible && (
+				<div class="cl-slider-menu">
+					<el-menu
+						default-active={this.$route.path}
+						collapse-transition={false}
+						collapse={this.browser.isMobile ? false : this.menuCollapse}
+						on-select={this.toView}>
+						{el}
+					</el-menu>
+				</div>
+			)
+		);
+	}
+};
diff --git a/cool/components/base/components/menu/slider/index.scss b/cool/components/base/components/menu/slider/index.scss
new file mode 100644
index 0000000..2fda6ae
--- /dev/null
+++ b/cool/components/base/components/menu/slider/index.scss
@@ -0,0 +1,94 @@
+.cl-slider-menu {
+	height: 100%;
+	overflow-y: auto;
+
+	&::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+	}
+
+	.el-menu {
+		border-right: 0;
+		background-color: $color-main;
+
+		&-item {
+			&.is-active {
+				background-color: $color-primary;
+				color: #fff;
+			}
+		}
+
+		.el-submenu__title,
+		.el-menu-item {
+			&:hover {
+				background-color: $color-primary;
+			}
+		}
+
+		.el-submenu {
+			&.is-opened {
+				background-color: #2b3043;
+
+				.el-menu {
+					background-color: #2b3043;
+				}
+			}
+		}
+
+		.el-submenu__title,
+		&-item,
+		&__title {
+			color: #eee;
+			letter-spacing: 0.5px;
+			height: 50px;
+			line-height: 50px;
+
+			.icon-svg {
+				font-size: 16px;
+				margin: 0 15px 0 5px;
+				position: relative;
+			}
+
+			span {
+				font-size: 12px;
+				letter-spacing: 1px;
+				display: inline-block;
+			}
+		}
+
+		&--collapse {
+			.el-submenu__title {
+				.icon-svg {
+					margin-left: 2px;
+					font-size: 19px;
+				}
+			}
+		}
+	}
+}
+
+.el-menu {
+	&--vertical {
+		.el-submenu {
+			&__title {
+				display: flex;
+				align-items: center;
+
+				.icon-svg {
+					font-size: 18px;
+					margin-right: 10px;
+				}
+			}
+		}
+
+		.el-menu-item {
+			display: flex;
+			align-items: center;
+
+			.icon-svg {
+				font-size: 18px;
+				margin-right: 10px;
+			}
+		}
+	}
+}
diff --git a/cool/components/base/components/menu/topbar.vue b/cool/components/base/components/menu/topbar.vue
new file mode 100644
index 0000000..e8e5ea9
--- /dev/null
+++ b/cool/components/base/components/menu/topbar.vue
@@ -0,0 +1,85 @@
+<template>
+	<div class="app-topbar-menu">
+		<el-menu :default-active="index" mode="horizontal" @select="onSelect">
+			<el-menu-item v-for="(item, index) in menuGroup" :index="`${index}`" :key="index">
+				<icon-svg v-if="item.icon" :name="item.icon"></icon-svg>
+				<span>{{ item.name }}</span>
+			</el-menu-item>
+		</el-menu>
+	</div>
+</template>
+
+<script>
+import { mapMutations, mapGetters } from "vuex";
+import { firstMenu } from "cool/components/base/utils";
+
+export default {
+	name: "cl-menu-topbar",
+
+	data() {
+		return {
+			index: "0"
+		};
+	},
+
+	computed: {
+		...mapGetters(["menuGroup"])
+	},
+
+	mounted() {
+		this.menuGroup.forEach((e, i) => {
+			if (this.$route.path.includes(e.path) && e.path != "/") {
+				this.index = String(i);
+				this.SET_MENU_LIST(i);
+			}
+		});
+	},
+
+	methods: {
+		...mapMutations(["SET_MENU_LIST"]),
+
+		onSelect(index) {
+			this.SET_MENU_LIST(index);
+
+			const url = firstMenu(this.menuGroup[index].children);
+			this.$router.push(url);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.app-topbar-menu {
+	/deep/.el-menu {
+		height: 50px;
+		background: transparent;
+		border-bottom: 0;
+		overflow: hidden;
+
+		.el-menu-item {
+			height: 50px;
+			display: flex;
+			align-items: center;
+			background: transparent;
+			border-bottom: 0;
+			padding: 0 30px;
+
+			span {
+				font-size: 12px;
+				margin-left: 3px;
+				line-height: normal;
+			}
+
+			&.is-active {
+				background: rgba(255, 255, 255, 0.13);
+			}
+
+			/deep/.icon-svg {
+				height: 18px;
+				width: 18px;
+				margin-right: 5px;
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/base/components/menu/tree.vue b/cool/components/base/components/menu/tree.vue
new file mode 100644
index 0000000..176d0db
--- /dev/null
+++ b/cool/components/base/components/menu/tree.vue
@@ -0,0 +1,108 @@
+<template>
+	<div class="cl-menu-tree">
+		<el-popover
+			ref="popover"
+			placement="bottom-start"
+			trigger="click"
+			popper-class="popper-menu-tree"
+		>
+			<el-input size="small" v-model="filterValue">
+				<i slot="prefix" class="el-input__icon el-icon-search"></i>
+			</el-input>
+
+			<el-tree
+				ref="tree"
+				node-key="menuId"
+				:data="treeList"
+				:props="props"
+				:highlight-current="true"
+				:expand-on-click-node="false"
+				:default-expanded-keys="expandedKeys"
+				:filter-node-method="filterNode"
+				@current-change="currentChange"
+			>
+			</el-tree>
+		</el-popover>
+		<el-input v-model="name" v-popover:popover readonly placeholder="请选择"></el-input>
+	</div>
+</template>
+
+<script>
+import { deepTree } from "cl-admin/utils";
+
+export default {
+	name: "cl-menu-tree",
+
+	props: {
+		value: [Number, String]
+	},
+
+	data() {
+		return {
+			filterValue: "",
+			list: [],
+			props: {
+				label: "name",
+				children: "children"
+			},
+			expandedKeys: []
+		};
+	},
+
+	watch: {
+		filterValue(val) {
+			this.$refs.tree.filter(val);
+		}
+	},
+
+	computed: {
+		name() {
+			const item = this.list.find((e) => e.id == this.value);
+			return item ? item.name : "一级菜单";
+		},
+
+		treeList() {
+			return deepTree(this.list);
+		}
+	},
+
+	mounted() {
+		this.menuList();
+	},
+
+	methods: {
+		currentChange({ id }) {
+			this.$emit("input", id);
+		},
+
+		menuList() {
+			this.$service.system.menu.list().then((res) => {
+				let list = res.filter((e) => e.type != 2);
+
+				list.unshift({
+					name: "一级菜单",
+					id: null
+				});
+
+				this.list = list;
+			});
+		},
+
+		filterNode(value, data) {
+			if (!value) return true;
+			return data.name.indexOf(value) !== -1;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.popper-menu-tree {
+	width: 480px;
+	box-sizing: border-box;
+
+	.el-input {
+		margin-bottom: 10px;
+	}
+}
+</style>
diff --git a/cool/components/base/components/process/index.vue b/cool/components/base/components/process/index.vue
new file mode 100644
index 0000000..673e96a
--- /dev/null
+++ b/cool/components/base/components/process/index.vue
@@ -0,0 +1,267 @@
+<template>
+	<div class="app-process">
+		<div class="app-process__left hidden-xs-only" @click="toLeft">
+			<i class="el-icon-arrow-left"></i>
+		</div>
+
+		<div class="app-process__scroller">
+			<div
+				class="block"
+				v-for="(item, index) in processList"
+				:key="index"
+				:class="{ active: item.active }"
+				:data-index="index"
+				@mousedown="
+					(e) => {
+						onTap(e, item);
+					}
+				"
+			>
+				<span>{{ item.label }}</span>
+
+				<i
+					class="el-icon-close"
+					v-if="index > 0"
+					:class="{ active: index > 0 }"
+					@mousedown.stop="onDel(index)"
+				></i>
+			</div>
+		</div>
+
+		<div class="app-process__right hidden-xs-only" @click="toRight">
+			<i class="el-icon-arrow-right"></i>
+		</div>
+
+		<ul class="context-menu" v-show="menu.visible" :style="menu.style">
+			<li @click="onClose('current')" v-if="isHit">关闭当前</li>
+			<li @click="onClose('other')">关闭其他</li>
+			<li @click="onClose('all')">关闭所有</li>
+		</ul>
+	</div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+	name: "cl-process",
+
+	data() {
+		return {
+			menu: {
+				visible: false,
+				current: {},
+				style: {
+					left: 0,
+					top: 0
+				}
+			},
+
+			isHit: false
+		};
+	},
+
+	computed: {
+		...mapGetters(["processList"])
+	},
+
+	mounted() {
+		this.$el.oncontextmenu = (e) => {
+			e.returnValue = false;
+		};
+
+		document.body.addEventListener("click", () => {
+			if (this.menu.visible) {
+				this.menu.visible = false;
+			}
+		});
+	},
+
+	methods: {
+		...mapMutations(["ADD_PROCESS", "DEL_PROCESS", "SET_PROCESS"]),
+
+		onTap(e, item) {
+			this.isHit = item.active;
+
+			if (e.button == 0) {
+				this.$router.push(item.value);
+			} else {
+				this.menu = {
+					current: item,
+					visible: true,
+					style: {
+						left: e.layerX + "px",
+						top: e.layerY + "px"
+					}
+				};
+			}
+		},
+
+		onDel(index) {
+			this.DEL_PROCESS(index);
+
+			this.toPath();
+		},
+
+		onClose(cmd) {
+			const { current } = this.menu;
+
+			switch (cmd) {
+				case "current":
+					this.onDel(this.processList.findIndex((e) => e.value == current.value));
+					break;
+
+				case "other":
+					this.SET_PROCESS(
+						this.processList.filter((e) => e.value == current.value || e.value == "/")
+					);
+					break;
+
+				case "all":
+					this.SET_PROCESS(this.processList.filter((e) => e.value == "/"));
+					break;
+			}
+
+			this.toPath();
+		},
+
+		toPath() {
+			const active = this.processList.find((e) => e.active);
+
+			if (!active) {
+				const next = this.processList[this.processList.length - 1];
+				this.$router.push(next ? next.value : "/");
+			}
+		},
+
+		toLeft() {
+			let scroller = this.$el.querySelector(".app-process__scroller");
+			scroller.scrollTo(scroller.scrollLeft - 100, 0);
+		},
+
+		toRight() {
+			let scroller = this.$el.querySelector(".app-process__scroller");
+			scroller.scrollTo(scroller.scrollLeft + 100, 0);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.app-process {
+	display: flex;
+	align-items: center;
+	height: 30px;
+	position: relative;
+
+	&__left,
+	&__right {
+		background-color: #fff;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 2px;
+		border-radius: 3px;
+		cursor: pointer;
+
+		&:hover {
+			background-color: #eee;
+		}
+	}
+
+	&__left {
+		margin-right: 10px;
+	}
+
+	&__right {
+		margin-left: 10px;
+	}
+
+	&__scroller {
+		width: 100%;
+		flex: 1;
+		overflow-x: auto;
+		overflow-y: hidden;
+		white-space: nowrap;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
+	.block {
+		display: inline-flex;
+		align-items: center;
+		border-radius: 3px;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+		background-color: #fff;
+		font-size: 12px;
+		margin-right: 10px;
+		color: #909399;
+		cursor: pointer;
+
+		&:last-child {
+			margin-right: 0;
+		}
+
+		i {
+			font-size: 14px;
+			width: 0;
+			overflow: hidden;
+			transition: all 0.3s;
+
+			&:hover {
+				color: #fff;
+				background-color: $color-main;
+			}
+		}
+
+		&:hover {
+			.el-icon-close {
+				width: auto;
+				margin-left: 5px;
+			}
+		}
+
+		&.active {
+			span {
+				color: $color-main;
+			}
+
+			i {
+				width: auto;
+				margin-left: 5px;
+			}
+
+			&:before {
+				background-color: $color-main;
+			}
+		}
+	}
+
+	.context-menu {
+		margin: 0;
+		background: #fff;
+		z-index: 100;
+		position: absolute;
+		list-style-type: none;
+		padding: 5px 0;
+		border-radius: 4px;
+		font-size: 12px;
+		font-weight: 400;
+		color: #333;
+		box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
+
+		li {
+			margin: 0;
+			padding: 7px 16px;
+			cursor: pointer;
+
+			&:hover {
+				background: #eee;
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/base/components/role/perms.vue b/cool/components/base/components/role/perms.vue
new file mode 100644
index 0000000..541c025
--- /dev/null
+++ b/cool/components/base/components/role/perms.vue
@@ -0,0 +1,128 @@
+<template>
+	<div class="cl-role-perms" v-loading="loading">
+		<p v-if="title">{{ title }}</p>
+
+		<el-input placeholder="输入关键字进行过滤" v-model="keyword" size="small"> </el-input>
+
+		<div class="scroller">
+			<el-tree
+				:data="list"
+				:props="props"
+				:default-checked-keys="checked"
+				:filter-node-method="filterNode"
+				highlight-current
+				node-key="id"
+				show-checkbox
+				ref="tree"
+				@check-change="save"
+			>
+			</el-tree>
+		</div>
+	</div>
+</template>
+
+<script>
+import { deepTree } from "cl-admin/utils";
+
+export default {
+	name: "cl-role-perms",
+
+	props: {
+		value: Array,
+		title: String
+	},
+
+	data() {
+		return {
+			list: [],
+			checked: [],
+			keyword: "",
+			props: {
+				label: "name",
+				children: "children"
+			},
+			loading: false
+		};
+	},
+
+	watch: {
+		keyword(val) {
+			this.$refs["tree"].filter(val);
+		},
+
+		value(val) {
+			this.refreshTree(val);
+		}
+	},
+
+	mounted() {
+		this.refresh();
+	},
+
+	methods: {
+		refreshTree(val) {
+			if (!val) {
+				this.checked = [];
+			}
+
+			let ids = [];
+
+			// 处理半选状态
+			let fn = (list) => {
+				list.forEach((e) => {
+					if (e.children) {
+						fn(e.children);
+					} else {
+						ids.push(Number(e.id));
+					}
+				});
+			};
+
+			fn(this.list);
+
+			this.checked = ids.filter((id) => (val || []).includes(id));
+		},
+
+		refresh() {
+			this.$service.system.menu
+				.list()
+				.then((res) => {
+					this.list = deepTree(res);
+
+					this.refreshTree(this.value);
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				});
+		},
+
+		filterNode(val, data) {
+			if (!val) return true;
+			return data.name.includes(val);
+		},
+
+		save() {
+			const tree = this.$refs["tree"];
+
+			// 选中的节点
+			const checked = tree.getCheckedKeys();
+			// 半选中的节点
+			const halfChecked = tree.getHalfCheckedKeys();
+
+			this.$emit("input", [...checked, ...halfChecked]);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.scroller {
+	border: 1px solid #dcdfe6;
+	margin-top: 5px;
+	border-radius: 3px;
+	max-height: 200px;
+	box-sizing: border-box;
+	overflow-x: hidden;
+	padding: 5px 0;
+}
+</style>
diff --git a/cool/components/base/components/role/select.vue b/cool/components/base/components/role/select.vue
new file mode 100644
index 0000000..59f0bd0
--- /dev/null
+++ b/cool/components/base/components/role/select.vue
@@ -0,0 +1,55 @@
+<template>
+	<el-select v-model="newValue" v-bind="props" multiple @change="onChange">
+		<el-option
+			v-for="(item, index) in list"
+			:value="item.id"
+			:label="item.name"
+			:key="index"
+		></el-option>
+	</el-select>
+</template>
+
+<script>
+export default {
+	name: "cl-role-select",
+
+	props: {
+		value: [String, Number, Array],
+		props: Object
+	},
+
+	data() {
+		return {
+			list: [],
+			newValue: undefined
+		};
+	},
+
+	watch: {
+		value: {
+			immediate: true,
+			handler(val) {
+				let arr = [];
+
+				if (!(val instanceof Array)) {
+					arr = [val];
+				} else {
+					arr = val;
+				}
+
+				this.newValue = arr.filter(Boolean);
+			}
+		}
+	},
+
+	async created() {
+		this.list = await this.$service.system.role.list();
+	},
+
+	methods: {
+		onChange(val) {
+			this.$emit("input", val);
+		}
+	}
+};
+</script>
diff --git a/cool/components/base/components/route-nav/index.vue b/cool/components/base/components/route-nav/index.vue
new file mode 100644
index 0000000..1d6ace8
--- /dev/null
+++ b/cool/components/base/components/route-nav/index.vue
@@ -0,0 +1,104 @@
+<template>
+	<div class="cl-route-nav">
+		<p class="title">
+			{{ lastName }}
+		</p>
+
+		<el-breadcrumb>
+			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+			<el-breadcrumb-item v-for="(item, index) in list" :key="index">{{
+				(item.meta && item.meta.label) || item.name
+			}}</el-breadcrumb-item>
+		</el-breadcrumb>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import _ from "lodash";
+
+export default {
+	name: "cl-route-nav",
+
+	data() {
+		return {
+			list: []
+		};
+	},
+
+	watch: {
+		$route: {
+			immediate: true,
+			handler(route) {
+				const deep = (item) => {
+					if (route.path === "/") {
+						return false;
+					}
+
+					if (item.path == route.path) {
+						return item;
+					} else {
+						if (item.children) {
+							const ret = item.children.map(deep).find(Boolean);
+
+							if (ret) {
+								return [item, ret];
+							} else {
+								return false;
+							}
+						} else {
+							return false;
+						}
+					}
+				};
+
+				this.list = _(this.menuGroup).map(deep).filter(Boolean).flattenDeep().value();
+
+				if (this.list.length === 0) {
+					this.list.push(route);
+				}
+			}
+		}
+	},
+
+	computed: {
+		...mapGetters(["conf", "menuGroup"]),
+
+		lastName() {
+			return _.last(this.list).name;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-route-nav {
+	/deep/.el-breadcrumb {
+		margin: 0 10px;
+
+		&__inner {
+			font-size: 12px;
+			padding: 0 10px;
+			font-weight: normal;
+			letter-spacing: 1px;
+		}
+	}
+
+	.title {
+		display: none;
+		font-size: 15px;
+		font-weight: 500;
+		margin-left: 5px;
+	}
+
+	@media only screen and (max-width: 768px) {
+		.title {
+			display: block;
+		}
+
+		/deep/.el-breadcrumb {
+			display: none;
+		}
+	}
+}
+</style>
diff --git a/cool/components/base/components/scrollbar/index.vue b/cool/components/base/components/scrollbar/index.vue
new file mode 100644
index 0000000..bb3035f
--- /dev/null
+++ b/cool/components/base/components/scrollbar/index.vue
@@ -0,0 +1,53 @@
+<template>
+	<el-scrollbar
+		class="cl-scrollbar"
+		:view-style="[
+			{
+				'overflow-x': 'hidden',
+				width
+			},
+			viewStyle
+		]"
+		:native="native"
+		:wrap-style="wrapStyle"
+		:wrap-class="wrapClass"
+		:view-class="viewClass"
+		:noresize="noresize"
+		:tag="tag"
+	>
+		<slot></slot>
+	</el-scrollbar>
+</template>
+
+<script>
+import { getBrowser } from "cl-admin/utils";
+
+const { plat } = getBrowser();
+
+export default {
+	name: "cl-scrollbar",
+
+	props: {
+		native: Boolean,
+		wrapStyle: Object,
+		wrapClass: Object,
+		viewClass: Object,
+		viewStyle: Object,
+		noresize: Boolean,
+		tag: {
+			type: String,
+			default: "div"
+		},
+		direction: {
+			type: String,
+			default: "vertical" // auto, vertical, horizontal
+		}
+	},
+
+	computed: {
+		width() {
+			return `calc(100% - ${plat == "iphone" ? "10px" : "0px"})`;
+		}
+	}
+};
+</script>
diff --git a/cool/components/base/directives/index.js b/cool/components/base/directives/index.js
new file mode 100644
index 0000000..97eac95
--- /dev/null
+++ b/cool/components/base/directives/index.js
@@ -0,0 +1,7 @@
+import permission, { checkPerm } from "./permission";
+
+export { checkPerm };
+
+export default {
+	permission
+};
diff --git a/cool/components/base/directives/permission.js b/cool/components/base/directives/permission.js
new file mode 100644
index 0000000..ad7c274
--- /dev/null
+++ b/cool/components/base/directives/permission.js
@@ -0,0 +1,42 @@
+import store from "@/store";
+
+function change(el, binding) {
+	el.style.display = checkPerm(binding.value) ? el.getAttribute("_display") : "none";
+}
+
+function parse(value) {
+	const permission = store.getters.permission;
+
+	if (typeof value == "string") {
+		return value ? permission.some((e) => e.includes(value.replace(/\s/g, ""))) : false;
+	} else {
+		return Boolean(value);
+	}
+}
+
+export default {
+	inserted(el, binding) {
+		el.setAttribute("_display", el.style.display || "");
+
+		change(el, binding);
+	},
+	update: change
+};
+
+export const checkPerm = (value) => {
+	if (!value) {
+		return false;
+	}
+
+	if (Object.prototype.toString.call(value) === "[object Object]") {
+		if (value.or) {
+			return value.or.some(parse);
+		}
+
+		if (value.and) {
+			return value.and.some((e) => !parse(e)) ? false : true;
+		}
+	}
+
+	return parse(value);
+};
diff --git a/cool/components/base/filters/index.js b/cool/components/base/filters/index.js
new file mode 100644
index 0000000..dcbd3d3
--- /dev/null
+++ b/cool/components/base/filters/index.js
@@ -0,0 +1,17 @@
+export default {
+	default_avatar(url) {
+		if (!url) {
+			return require("../static/images/default-avatar.png");
+		}
+
+		return url;
+	},
+
+	default_name(name) {
+		if (!name) {
+			return "未命名";
+		}
+
+		return name;
+	}
+};
diff --git a/cool/components/base/index.js b/cool/components/base/index.js
new file mode 100644
index 0000000..0ab89dc
--- /dev/null
+++ b/cool/components/base/index.js
@@ -0,0 +1,12 @@
+import components from "./components";
+import filters from "./filters";
+import pages from "./pages";
+import views from "./views";
+import store from "./store";
+import service from "./service";
+import directives, { checkPerm } from "./directives";
+import { iconList } from "./common";
+import "./static/css/index.scss";
+
+export { iconList, checkPerm };
+export default { components, filters, pages, views, store, service, directives };
diff --git a/cool/components/base/package.json b/cool/components/base/package.json
new file mode 100644
index 0000000..5999d0b
--- /dev/null
+++ b/cool/components/base/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "base",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "uuid": "^8.3.2"
+  }
+}
diff --git a/cool/components/base/pages/error-page/403.vue b/cool/components/base/pages/error-page/403.vue
new file mode 100644
index 0000000..4efc96d
--- /dev/null
+++ b/cool/components/base/pages/error-page/403.vue
@@ -0,0 +1,13 @@
+<template>
+	<error-page :code="403" desc="您无权访问此页面" />
+</template>
+
+<script>
+import ErrorPage from "./components/error-page";
+
+export default {
+	components: {
+		ErrorPage
+	}
+};
+</script>
diff --git a/cool/components/base/pages/error-page/404.vue b/cool/components/base/pages/error-page/404.vue
new file mode 100644
index 0000000..4822d17
--- /dev/null
+++ b/cool/components/base/pages/error-page/404.vue
@@ -0,0 +1,13 @@
+<template>
+	<error-page :code="404" desc="找不到您要查找的页面"></error-page>
+</template>
+
+<script>
+import ErrorPage from "./components/error-page";
+
+export default {
+	components: {
+		ErrorPage
+	}
+};
+</script>
diff --git a/cool/components/base/pages/error-page/500.vue b/cool/components/base/pages/error-page/500.vue
new file mode 100644
index 0000000..6b98d87
--- /dev/null
+++ b/cool/components/base/pages/error-page/500.vue
@@ -0,0 +1,13 @@
+<template>
+	<error-page :code="500" desc="糟糕，出了点问题"></error-page>
+</template>
+
+<script>
+import ErrorPage from "./components/error-page";
+
+export default {
+	components: {
+		ErrorPage
+	}
+};
+</script>
diff --git a/cool/components/base/pages/error-page/502.vue b/cool/components/base/pages/error-page/502.vue
new file mode 100644
index 0000000..479cfe6
--- /dev/null
+++ b/cool/components/base/pages/error-page/502.vue
@@ -0,0 +1,13 @@
+<template>
+	<error-page :code="502" desc="马上回来"></error-page>
+</template>
+
+<script>
+import ErrorPage from "./components/error-page";
+
+export default {
+	components: {
+		ErrorPage
+	}
+};
+</script>
diff --git a/cool/components/base/pages/error-page/components/error-page.vue b/cool/components/base/pages/error-page/components/error-page.vue
new file mode 100644
index 0000000..7f86d5b
--- /dev/null
+++ b/cool/components/base/pages/error-page/components/error-page.vue
@@ -0,0 +1,160 @@
+<template>
+	<div class="error-page">
+		<h1 class="code">{{ code }}</h1>
+		<p class="desc">{{ desc }}</p>
+
+		<template v-if="token">
+			<div class="router">
+				<el-select size="medium" filterable prefix-icon="el-icon-search" v-model="url">
+					<el-option v-for="(item, index) in routes" :key="index" :value="item.path">
+						<span style="float: left">{{ item.name }}</span>
+						<span style="float: right">{{ item.path }}</span>
+					</el-option>
+				</el-select>
+
+				<el-button round @click="navTo">跳转</el-button>
+			</div>
+
+			<div class="link">
+				<el-link class="to-home" @click="home">回到首页</el-link>
+				<el-link class="to-back" @click="back">返回上一页</el-link>
+				<el-link class="to-login" @click="login">重新登录</el-link>
+			</div>
+		</template>
+
+		<template v-else>
+			<div class="router">
+				<el-button round @click="toLogin">返回登录页</el-button>
+			</div>
+		</template>
+
+		<p class="copyright">Copyright © cool-admin-pro 2020</p>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+	props: {
+		code: Number,
+		desc: String
+	},
+
+	data() {
+		return {
+			url: ""
+		};
+	},
+
+	computed: {
+		...mapGetters(["routes", "token"])
+	},
+
+	methods: {
+		navTo() {
+			this.$router.push(this.url);
+		},
+
+		toLogin() {
+			this.$router.push("/login");
+		},
+
+		back() {
+			history.back();
+		},
+
+		home() {
+			this.$router.push("/");
+		},
+
+		login() {
+			this.$store.dispatch("userLogout");
+
+			setTimeout(() => {
+				this.$router.push("/login");
+			}, 30);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.error-page {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	overflow-y: auto;
+
+	.code {
+		font-size: 120px;
+		font-weight: normal;
+		color: #6c757d;
+		font-family: "Segoe UI";
+	}
+
+	.desc {
+		font-size: 16px;
+		font-weight: 400;
+		color: #34395e;
+		margin-top: 30px;
+	}
+
+	.router {
+		display: flex;
+		justify-content: center;
+		margin-top: 50px;
+		max-width: 450px;
+		width: 90%;
+
+		.el-select {
+			font-size: 14px;
+			flex: 1;
+		}
+
+		.el-button {
+			margin-left: 15px;
+			background-color: $color-main;
+			border-color: $color-main;
+			color: #fff;
+			padding: 0 30px;
+			letter-spacing: 1px;
+			height: 36px;
+			line-height: 36px;
+		}
+	}
+
+	.link {
+		margin-top: 40px;
+
+		a {
+			color: $color-main;
+			font-weight: 500;
+			transition: all 0.5s;
+			-webkit-transition: all 0.5s;
+			cursor: pointer;
+			font-size: 14px;
+			margin: 0 15px;
+			padding-bottom: 2px;
+
+			&::after {
+				border-color: $color-main;
+			}
+		}
+	}
+
+	.copyright {
+		color: #6c757d;
+		font-size: 14px;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		height: 50px;
+		line-height: 50px;
+		width: 100%;
+		text-align: center;
+	}
+}
+</style>
diff --git a/cool/components/base/pages/iframe/index.vue b/cool/components/base/pages/iframe/index.vue
new file mode 100644
index 0000000..28faf0d
--- /dev/null
+++ b/cool/components/base/pages/iframe/index.vue
@@ -0,0 +1,43 @@
+<template>
+	<div class="page-iframe" v-loading="loading" element-loading-text="拼命加载中">
+		<iframe :src="url" frameborder="0"></iframe>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			loading: false,
+			url: ""
+		};
+	},
+
+	watch: {
+		$route: {
+			handler({ meta }) {
+				this.url = meta.iframeUrl;
+			},
+			immediate: true
+		}
+	},
+
+	mounted() {
+		const iframe = this.$el.querySelector("iframe");
+		this.loading = true;
+
+		iframe.onload = () => {
+			this.loading = false;
+		};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-iframe {
+	iframe {
+		height: 100%;
+		width: 100%;
+	}
+}
+</style>
diff --git a/cool/components/base/pages/index.js b/cool/components/base/pages/index.js
new file mode 100644
index 0000000..38070f4
--- /dev/null
+++ b/cool/components/base/pages/index.js
@@ -0,0 +1,22 @@
+export default [
+	{
+		path: '/403',
+		component: () => import("./error-page/403")
+	},
+	{
+		path: '/404',
+		component: () => import("./error-page/404")
+	},
+	{
+		path: '/500',
+		component: () => import("./error-page/500")
+	},
+	{
+		path: '/502',
+		component: () => import("./error-page/502")
+	},
+	{
+		path: '/login',
+		component: () => import("./login")
+	}
+]
diff --git a/cool/components/base/pages/login/components/captcha.vue b/cool/components/base/pages/login/components/captcha.vue
new file mode 100644
index 0000000..a1b6af5
--- /dev/null
+++ b/cool/components/base/pages/login/components/captcha.vue
@@ -0,0 +1,64 @@
+<template>
+	<div class="common-captcha" @click="refresh">
+		<div class="svg" v-html="svg" v-if="svg"></div>
+
+		<img class="base64" :src="base64" alt="" v-else />
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			svg: "",
+			base64: ""
+		};
+	},
+
+	mounted() {
+		this.refresh();
+	},
+
+	methods: {
+		refresh() {
+			this.$service.open
+				.captcha({
+					height: 36,
+					width: 110
+				})
+				.then(({ captchaId, data }) => {
+					if (data.includes(";base64,")) {
+						this.base64 = data;
+					} else {
+						this.svg = data;
+					}
+
+					this.$emit("input", captchaId);
+					this.$emit("change", {
+						base64: this.base64,
+						svg: this.svg,
+						captchaId
+					});
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.common-captcha {
+	height: 36px;
+	cursor: pointer;
+
+	.svg {
+		height: 100%;
+	}
+
+	.base64 {
+		height: 100%;
+	}
+}
+</style>
diff --git a/cool/components/base/pages/login/index.vue b/cool/components/base/pages/login/index.vue
new file mode 100644
index 0000000..ed0e2aa
--- /dev/null
+++ b/cool/components/base/pages/login/index.vue
@@ -0,0 +1,205 @@
+<template>
+	<div class="page-login">
+		<div class="box">
+			<img class="logo" src="../../static/images/logo.png" alt="" />
+			<p class="desc">COOL ADMIN是一款快速开发后台权限管理系统</p>
+
+			<el-form ref="form" class="form" size="medium" :disabled="saving">
+				<el-form-item label="用户名">
+					<el-input
+						placeholder="请输入用户名"
+						v-model="form.username"
+						maxlength="20"
+						auto-complete="off"
+					></el-input>
+				</el-form-item>
+
+				<el-form-item label="密码">
+					<el-input
+						type="password"
+						placeholder="请输入密码"
+						v-model="form.password"
+						maxlength="20"
+						auto-complete="off"
+					></el-input>
+				</el-form-item>
+
+				<el-form-item label="验证码" class="captcha">
+					<el-input
+						placeholder="请输入图片验证码"
+						maxlength="4"
+						v-model="form.verifyCode"
+						auto-complete="off"
+						@keyup.enter.native="next"
+					></el-input>
+
+					<captcha
+						ref="captcha"
+						class="value"
+						v-model="form.captchaId"
+						@change="captchaChange"
+					></captcha>
+				</el-form-item>
+			</el-form>
+
+			<el-button round size="mini" class="submit-btn" @click="next" :loading="saving"
+				>登录</el-button
+			>
+		</div>
+	</div>
+</template>
+
+<script>
+import Captcha from "./components/captcha";
+
+export default {
+	components: {
+		Captcha
+	},
+
+	data() {
+		return {
+			form: {
+				username: "admin",
+				password: "123456",
+				captchaId: "",
+				verifyCode: ""
+			},
+			saving: false
+		};
+	},
+
+	methods: {
+		captchaChange() {
+			this.form.verifyCode = "";
+		},
+
+		async next() {
+			const { username, password, verifyCode } = this.form;
+
+			if (!username) {
+				return this.$message.warning("用户名不能为空");
+			}
+
+			if (!password) {
+				return this.$message.warning("密码不能为空");
+			}
+
+			if (!verifyCode) {
+				return this.$message.warning("图片验证码不能为空");
+			}
+
+			this.saving = true;
+
+			try {
+				// 登录
+				await this.$store.dispatch("userLogin", this.form);
+
+				// 用户信息
+				await this.$store.dispatch("userInfo");
+
+				// 权限菜单
+				let [first] = await this.$store.dispatch("permMenu");
+
+				if (!first) {
+					this.$message.error("该账号没有权限");
+				} else {
+					this.$router.push("/");
+				}
+			} catch (err) {
+				this.$message.error(err);
+				this.$refs.captcha.refresh();
+			}
+
+			this.saving = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-login {
+	height: 100vh;
+	width: 100vw;
+	position: relative;
+	background-color: $color-main;
+
+	.box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		height: 500px;
+		width: 500px;
+		position: absolute;
+		left: calc(50% - 250px);
+		top: calc(50% - 250px);
+
+		.logo {
+			height: 50px;
+			margin-bottom: 20px;
+		}
+
+		.desc {
+			color: #ccc;
+			font-size: 12px;
+			margin-bottom: 60px;
+			letter-spacing: 1px;
+		}
+
+		/deep/.el-form {
+			width: 300px;
+			border-radius: 3px;
+
+			.el-form-item {
+				margin-bottom: 20px;
+
+				&__label {
+					color: #ccc;
+				}
+			}
+
+			.el-input {
+				.el-input__inner {
+					border: 0;
+					border-bottom: 0.5px solid #999;
+					border-radius: 0;
+					padding: 0;
+					background-color: transparent;
+					color: #ccc;
+					transition: border-color 0.3s;
+					position: relative;
+
+					&:focus {
+						border-color: #fff;
+						color: #fff;
+					}
+
+					&:-webkit-autofill {
+						-webkit-text-fill-color: #fff !important;
+						-webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
+						transition: background-color 50000s ease-in-out 0s;
+					}
+				}
+			}
+
+			.captcha {
+				position: relative;
+
+				.value {
+					position: absolute;
+					bottom: 1px;
+					right: 0;
+				}
+			}
+		}
+
+		.submit-btn {
+			margin-top: 40px;
+			border-radius: 30px;
+			padding: 10px 40px;
+			color: #000;
+		}
+	}
+}
+</style>
diff --git a/cool/components/base/service/common.js b/cool/components/base/service/common.js
new file mode 100644
index 0000000..ce733a7
--- /dev/null
+++ b/cool/components/base/service/common.js
@@ -0,0 +1,80 @@
+import { BaseService, Service } from "cl-admin";
+
+@Service("comm")
+class Common extends BaseService {
+	/**
+	 * 文件上传模式
+	 */
+	uploadMode() {
+		return this.request({
+			url: "/uploadMode"
+		});
+	}
+
+	/**
+	 * 文件上传，如果模式是 cloud，返回对应参数
+	 *
+	 * @returns
+	 * @memberof CommonService
+	 */
+	upload(params) {
+		return this.request({
+			url: "/upload",
+			method: "POST",
+			params
+		});
+	}
+
+	/**
+	 * 用户退出
+	 */
+	userLogout() {
+		return this.request({
+			url: "/logout",
+			method: "POST"
+		});
+	}
+
+	/**
+	 * 用户信息
+	 *
+	 * @returns
+	 * @memberof CommonService
+	 */
+	userInfo() {
+		return this.request({
+			url: "/person"
+		});
+	}
+
+	/**
+	 * 用户信息修改
+	 *
+	 * @param {*} params
+	 * @returns
+	 * @memberof CommonService
+	 */
+	userUpdate(params) {
+		return this.request({
+			url: "/personUpdate",
+			method: "POST",
+			data: {
+				...params
+			}
+		});
+	}
+
+	/**
+	 * 权限信息
+	 *
+	 * @returns
+	 * @memberof CommonService
+	 */
+	permMenu() {
+		return this.request({
+			url: "/permmenu"
+		});
+	}
+}
+
+export default Common;
diff --git a/cool/components/base/service/dept.js b/cool/components/base/service/dept.js
new file mode 100644
index 0000000..fb77c36
--- /dev/null
+++ b/cool/components/base/service/dept.js
@@ -0,0 +1,15 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("sys/department")
+class SysDepartment extends BaseService {
+	@Permission("order")
+	order(data) {
+		return this.request({
+			url: "/order",
+			method: "POST",
+			data
+		});
+	}
+}
+
+export default SysDepartment;
diff --git a/cool/components/base/service/index.js b/cool/components/base/service/index.js
new file mode 100644
index 0000000..b076d8f
--- /dev/null
+++ b/cool/components/base/service/index.js
@@ -0,0 +1,21 @@
+import Common from "./common";
+import Open from "./open";
+import SysUser from "./user";
+import SysMenu from "./menu";
+import SysRole from "./role";
+import SysDept from "./dept";
+import PluginInfo from "./plugin";
+
+export default {
+	common: new Common(),
+	open: new Open(),
+	system: {
+		user: new SysUser(),
+		menu: new SysMenu(),
+		role: new SysRole(),
+		dept: new SysDept()
+	},
+	plugin: {
+		info: new PluginInfo()
+	}
+};
diff --git a/cool/components/base/service/menu.js b/cool/components/base/service/menu.js
new file mode 100644
index 0000000..e866c19
--- /dev/null
+++ b/cool/components/base/service/menu.js
@@ -0,0 +1,6 @@
+import { BaseService, Service } from "cl-admin";
+
+@Service("sys/menu")
+class SysMenu extends BaseService {}
+
+export default SysMenu;
diff --git a/cool/components/base/service/open.js b/cool/components/base/service/open.js
new file mode 100644
index 0000000..4dddacb
--- /dev/null
+++ b/cool/components/base/service/open.js
@@ -0,0 +1,56 @@
+import { BaseService, Service } from "cl-admin";
+
+@Service("open")
+class Open extends BaseService {
+	/**
+	 * 用户登录
+	 *
+	 * @param {*} { username, password, captchaId, verifyCode }
+	 * @returns
+	 * @memberof CommonService
+	 */
+	userLogin({ username, password, captchaId, verifyCode }) {
+		return this.request({
+			url: "/login",
+			method: "POST",
+			data: {
+				username,
+				password,
+				captchaId,
+				verifyCode
+			}
+		});
+	}
+
+	/**
+	 * 图片验证码 svg
+	 *
+	 * @param {*} { height, width }
+	 * @returns
+	 * @memberof CommonService
+	 */
+	captcha({ height, width }) {
+		return this.request({
+			url: "/captcha",
+			params: {
+				height,
+				width
+			}
+		});
+	}
+
+	/**
+	 * 刷新 token
+	 * @param {string} token
+	 */
+	refreshToken(token) {
+		return this.request({
+			url: "/refreshToken",
+			params: {
+				refreshToken: token
+			}
+		});
+	}
+}
+
+export default Open;
diff --git a/cool/components/base/service/plugin.js b/cool/components/base/service/plugin.js
new file mode 100644
index 0000000..d3bef7d
--- /dev/null
+++ b/cool/components/base/service/plugin.js
@@ -0,0 +1,32 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("plugin/info")
+class PluginInfo extends BaseService {
+	@Permission("config")
+	config(data) {
+		return this.request({
+			url: "/config",
+			method: "POST",
+			data
+		});
+	}
+
+	@Permission("getConfig")
+	getConfig(params) {
+		return this.request({
+			url: "/getConfig",
+			params
+		});
+	}
+
+	@Permission("enable")
+	enable(data) {
+		return this.request({
+			url: "/enable",
+			method: "POST",
+			data
+		});
+	}
+}
+
+export default PluginInfo;
diff --git a/cool/components/base/service/role.js b/cool/components/base/service/role.js
new file mode 100644
index 0000000..05d8de0
--- /dev/null
+++ b/cool/components/base/service/role.js
@@ -0,0 +1,6 @@
+import { BaseService, Service } from "cl-admin";
+
+@Service("sys/role")
+class SysRole extends BaseService {}
+
+export default SysRole;
diff --git a/cool/components/base/service/user.js b/cool/components/base/service/user.js
new file mode 100644
index 0000000..9819a95
--- /dev/null
+++ b/cool/components/base/service/user.js
@@ -0,0 +1,15 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("sys/user")
+class SysUser extends BaseService {
+	@Permission("move")
+	move(data) {
+		return this.request({
+			url: "/move",
+			method: "POST",
+			data
+		});
+	}
+}
+
+export default SysUser;
diff --git a/cool/components/base/static/css/index.scss b/cool/components/base/static/css/index.scss
new file mode 100644
index 0000000..1dd00b9
--- /dev/null
+++ b/cool/components/base/static/css/index.scss
@@ -0,0 +1 @@
+@import "./theme.scss";
diff --git a/cool/components/base/static/css/theme.scss b/cool/components/base/static/css/theme.scss
new file mode 100644
index 0000000..4ab24dc
--- /dev/null
+++ b/cool/components/base/static/css/theme.scss
@@ -0,0 +1,126 @@
+// customize style
+.scroller1 {
+	overflow: hidden auto;
+	position: relative;
+	z-index: 9;
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: rgba(144, 147, 153, 0.3);
+		border-radius: 6px;
+	}
+
+	&::-webkit-scrollbar {
+		height: 6px;
+		width: 6px;
+	}
+}
+
+// Element-ui theme
+.el-input-number {
+	.el-input-number__decrease,
+	.el-input-number__increase {
+		border: 0 !important;
+		background-color: transparent;
+	}
+}
+
+.el-dialog {
+	.el-dialog__header {
+		padding: 10px;
+		text-align: center;
+		border-bottom: 1px solid #f7f7f7;
+
+		.el-dialog__title {
+			font-size: 15px;
+			letter-spacing: 0.5px;
+		}
+
+		.el-dialog__headerbtn {
+			top: 13px;
+
+			.el-dialog__close {
+				font-size: 18px;
+			}
+		}
+	}
+
+	.el-dialog__body {
+		padding: 20px;
+	}
+
+	.el-dialog__footer {
+		padding-bottom: 15px;
+	}
+}
+
+.el-message {
+	&.el-message--success,
+	&.el-message--error,
+	&.el-message--info,
+	&.el-message--warning {
+		min-width: auto;
+		background-color: #fff;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		border: 0;
+		padding: 12px 20px 12px 15px;
+
+		.el-message__icon {
+			font-size: 16px;
+		}
+
+		.el-message__content {
+			color: #999;
+		}
+	}
+}
+
+.el-table {
+	&__header {
+		th {
+			padding: 0 !important;
+			background-color: #ebeef5 !important;
+			height: 36px;
+			line-height: 36px;
+		}
+
+		.cell {
+			color: $color-main;
+			font-weight: normal;
+		}
+	}
+
+	&__body {
+		&-wrapper {
+			@media only screen and (max-width: 768px) {
+				&::-webkit-scrollbar {
+					height: 6px;
+					width: 6px;
+				}
+			}
+		}
+	}
+
+	&__column {
+		&-filter-trigger {
+			margin-left: 5px;
+		}
+	}
+
+	&-column--selection {
+		.cell {
+			padding: 0 14px !important;
+		}
+	}
+}
+
+.el-table-filter {
+	margin-top: 5px !important;
+
+	.el-checkbox__label {
+		font-size: 12px;
+	}
+}
diff --git a/cool/components/base/static/images/default-avatar.png b/cool/components/base/static/images/default-avatar.png
new file mode 100644
index 0000000..1ede40f
Binary files /dev/null and b/cool/components/base/static/images/default-avatar.png differ
diff --git a/cool/components/base/static/images/logo.png b/cool/components/base/static/images/logo.png
new file mode 100644
index 0000000..035b79c
Binary files /dev/null and b/cool/components/base/static/images/logo.png differ
diff --git a/cool/components/base/store/app.js b/cool/components/base/store/app.js
new file mode 100644
index 0000000..defa36f
--- /dev/null
+++ b/cool/components/base/store/app.js
@@ -0,0 +1,58 @@
+import { app } from "@/config/env";
+import { getBrowser } from "cl-admin/utils";
+
+export default {
+	state: {
+		info: {
+			name: app.name
+		},
+		conf: {
+			...app.conf
+		},
+		browser: {
+			isMobile: false
+		},
+		collapse: false,
+		upload: {
+			mode: "local"
+		}
+	},
+	getters: {
+		// 应用信息
+		appInfo: (state) => state.info,
+		// 应用配置
+		conf: (state) => state.conf,
+		// 浏览器信息
+		browser: (state) => state.browser,
+		// 左侧菜单是否收起
+		menuCollapse: (state) => state.collapse,
+		// 上传配置
+		upload: (state) => state.upload
+	},
+	actions: {
+		appLoad({ getters, dispatch }) {
+			if (getters.token) {
+				// 读取菜单权限
+				dispatch("permMenu");
+				// 获取用户信息
+				dispatch("userInfo");
+				// 设置上传配置
+				dispatch("setUpload");
+			}
+		},
+		setUpload({ state }) {
+			this.$service.common.uploadMode().then((res) => {
+				state.upload = res;
+			});
+		}
+	},
+	mutations: {
+		SET_BROWSER(state) {
+			state.browser = getBrowser();
+		},
+
+		COLLAPSE_MENU(state, val = false) {
+			state.collapse = val;
+		}
+	}
+};
diff --git a/cool/components/base/store/component.js b/cool/components/base/store/component.js
new file mode 100644
index 0000000..59d8f72
--- /dev/null
+++ b/cool/components/base/store/component.js
@@ -0,0 +1,33 @@
+export default {
+	state: {
+		info: {},
+		list: [],
+		modules: []
+	},
+
+	getters: {
+		// 组件信息
+		components: (state) => state.info,
+		// 组件列表
+		componentList: (state) => state.list,
+		// 组件模块
+		componentModules: (state) => state.modules
+	},
+
+	mutations: {
+		SET_COMPONENT(state, list) {
+			let d = {};
+
+			list.forEach((e) => {
+				d[e.name] = e;
+			});
+
+			state.list = list;
+			state.info = d;
+		},
+
+		SET_COMPONENT_MODULES(state, list) {
+			state.modules = list;
+		}
+	}
+};
diff --git a/cool/components/base/store/index.js b/cool/components/base/store/index.js
new file mode 100644
index 0000000..ab8c304
--- /dev/null
+++ b/cool/components/base/store/index.js
@@ -0,0 +1,7 @@
+import user from "./user";
+import app from "./app";
+import process from "./process";
+import component from "./component";
+import menu from "./menu";
+
+export default { user, app, process, component, menu };
diff --git a/cool/components/base/store/menu.js b/cool/components/base/store/menu.js
new file mode 100644
index 0000000..0279aed
--- /dev/null
+++ b/cool/components/base/store/menu.js
@@ -0,0 +1,152 @@
+import store from "store";
+import { Message } from "element-ui";
+import { deepTree, revDeepTree, isArray, isEmpty } from "cl-admin/utils";
+import { revisePath } from "cool/components/base/utils";
+import router from "@/router";
+import { menuList } from "@/config/env";
+
+export default {
+	state: {
+		// 视图路由，type=1
+		routes: store.get("viewRoutes") || [],
+		// 树形菜单
+		group: store.get("menuGroup") || [],
+		// showAMenu 模式下，顶级菜单的序号
+		index: 0,
+		// 左侧菜单
+		menu: [],
+		// 权限列表
+		permission: []
+	},
+	getters: {
+		// 树形菜单列表
+		menuGroup: (state) => state.group,
+		// 左侧菜单
+		menuList: (state) => state.menu,
+		// 视图路由
+		routes: (state) => state.routes,
+		// 权限列表
+		permission: (state) => state.permission
+	},
+	actions: {
+		// 设置菜单、权限
+		permMenu({ commit, state, getters }) {
+			return new Promise((resolve, reject) => {
+				const next = (res) => {
+					if (!isArray(res.menus)) {
+						res.menus = [];
+					}
+
+					if (!isArray(res.perms)) {
+						res.perms = [];
+					}
+
+					const routes = res.menus
+						.filter((e) => e.type != 2)
+						.map((e) => {
+							let r = {
+								moduleName:
+									e.moduleName || (e.router || "").substr(1).replace(/\//g, "-"),
+								id: e.id,
+								parentId: e.parentId,
+								path: revisePath(e.router || e.id),
+								viewPath: e.viewPath,
+								type: e.type,
+								name: e.name,
+								icon: e.icon,
+								orderNum: e.orderNum,
+								isShow: isEmpty(e.isShow) ? true : e.isShow,
+								meta: {
+									label: e.name,
+									keepAlive: e.keepAlive
+								},
+								children: []
+							};
+
+							// 匹配存储的组件模块
+							let m = getters.componentModules.find(
+								(m) => m.moduleName === r.moduleName
+							);
+
+							if (m) {
+								// 注册组件实例
+								r.component = m.component;
+							}
+
+							return r;
+						});
+
+					// 转成树形菜单
+					const menuGroup = deepTree(routes);
+
+					// 设置权限
+					commit("SET_PERMIESSION", res.perms);
+					// 设置菜单组
+					commit("SET_MENU_GROUP", menuGroup);
+					// 设置视图路由
+					commit(
+						"SET_VIEW_ROUTES",
+						routes.filter((e) => e.type == 1)
+					);
+					// 设置菜单
+					commit("SET_MENU_LIST", state.index);
+
+					resolve(menuGroup);
+				};
+
+				// 监测自定义菜单
+				if (!getters.conf.customMenu) {
+					this.$service.common
+						.permMenu()
+						.then((res) => {
+							next(res);
+						})
+						.catch((err) => {
+							Message.error("菜单加载异常");
+							console.error(err);
+							reject(err);
+						});
+				} else {
+					next({
+						menus: revDeepTree(menuList)
+					});
+				}
+			});
+		}
+	},
+	mutations: {
+		// 设置树形菜单列表
+		SET_MENU_GROUP(state, list) {
+			state.group = list;
+			store.set("menuGroup", list);
+		},
+
+		// 设置视图路由
+		SET_VIEW_ROUTES(state, list) {
+			router.$plugin.addViews(list);
+
+			state.routes = list;
+			store.set("viewRoutes", list);
+		},
+
+		// 设置左侧菜单
+		SET_MENU_LIST(state, index) {
+			const { showAMenu } = this.getters.conf;
+
+			if (showAMenu) {
+				const { children = [] } = state.group[index] || {};
+
+				state.index = index;
+				state.menu = children;
+			} else {
+				state.menu = state.group;
+			}
+		},
+
+		// 设置权限
+		SET_PERMIESSION(state, list) {
+			state.permission = list;
+			store.set("permission", list);
+		}
+	}
+};
diff --git a/cool/components/base/store/process.js b/cool/components/base/store/process.js
new file mode 100644
index 0000000..d6f163c
--- /dev/null
+++ b/cool/components/base/store/process.js
@@ -0,0 +1,57 @@
+const fMenu = {
+	label: "首页",
+	value: "/",
+	active: true
+};
+
+export default {
+	state: {
+		list: [fMenu]
+	},
+	getters: {
+		// 窗口列表
+		processList: (state) => state.list
+	},
+	mutations: {
+		ADD_PROCESS(state, item) {
+			const index = state.list.findIndex(
+				(e) => e.value.split("?")[0] === item.value.split("?")[0]
+			);
+
+			state.list.map((e) => {
+				e.active = e.value == item.value;
+			});
+
+			if (index < 0) {
+				if (item.value == "/") {
+					item.label = fMenu.label;
+				}
+
+				if (item.label) {
+					state.list.push({
+						...item,
+						active: true
+					});
+				}
+			} else {
+				state.list[index].active = true;
+				state.list[index].label = item.label;
+				state.list[index].value = item.value;
+			}
+		},
+
+		DEL_PROCESS(state, index) {
+			if (index != 0) {
+				state.list.splice(index, 1);
+			}
+		},
+
+		SET_PROCESS(state, list) {
+			state.list = list;
+		},
+
+		RESET_PROCESS(state) {
+			state.list = [fMenu];
+		}
+	}
+};
diff --git a/cool/components/base/store/user.js b/cool/components/base/store/user.js
new file mode 100644
index 0000000..0f05e3a
--- /dev/null
+++ b/cool/components/base/store/user.js
@@ -0,0 +1,103 @@
+import { storage, href } from "cl-admin/utils";
+
+// 用户信息
+let info = storage.get("userInfo") || {};
+// 授权标识
+let token = storage.get("token") || null;
+
+export default {
+	state: {
+		token,
+		info
+	},
+	getters: {
+		userInfo: (state) => state.info,
+		token: (state) => state.token
+	},
+	actions: {
+		// 用户登录
+		userLogin({ commit }, form) {
+			return this.$service.open.userLogin(form).then((res) => {
+				commit("SET_TOKEN", res);
+				return res;
+			});
+		},
+
+		// 用户退出
+		userLogout({ dispatch }) {
+			return new Promise((resolve) => {
+				this.$service.common.userLogout().done(() => {
+					dispatch("userRemove").then(() => {
+						resolve();
+					});
+				});
+			});
+		},
+
+		// 用户信息
+		userInfo({ commit }) {
+			return this.$service.common.userInfo().then((res) => {
+				commit("SET_USERINFO", res);
+				return res;
+			});
+		},
+
+		// 用户移除
+		userRemove({ commit }) {
+			console.log(222);
+			commit("CLEAR_USER");
+			commit("CLEAR_TOKEN");
+			commit("RESET_PROCESS");
+			commit("SET_MENU_GROUP", []);
+			commit("SET_VIEW_ROUTES", []);
+			commit("SET_MENU_LIST", 0);
+		},
+
+		// 刷新token
+		refreshToken({ commit, dispatch }) {
+			return new Promise((resolve, reject) => {
+				this.$service.open
+					.refreshToken(storage.get("refreshToken"))
+					.then((res) => {
+						commit("SET_TOKEN", res);
+						resolve(res.token);
+					})
+					.catch((err) => {
+						dispatch("userRemove");
+						href("/login");
+						reject(err);
+					});
+			});
+		}
+	},
+	mutations: {
+		// 设置用户信息
+		SET_USERINFO(state, val) {
+			state.info = val;
+			storage.set("userInfo", val);
+		},
+
+		// 设置授权标识
+		SET_TOKEN(state, { token, expire, refreshToken, refreshExpire }) {
+			// 请求的唯一标识
+			state.token = token;
+			storage.set("token", token, expire);
+
+			// 刷新 token 的唯一标识
+			storage.set("refreshToken", refreshToken, refreshExpire);
+		},
+
+		// 移除授权标识
+		CLEAR_TOKEN(state) {
+			state.token = null;
+			storage.remove("token");
+			storage.remove("refreshToken");
+		},
+
+		// 移除用户信息
+		CLEAR_USER(state) {
+			state.info = {};
+			storage.remove("userInfo");
+		}
+	}
+};
diff --git a/cool/components/base/utils/index.js b/cool/components/base/utils/index.js
new file mode 100644
index 0000000..2f50527
--- /dev/null
+++ b/cool/components/base/utils/index.js
@@ -0,0 +1,31 @@
+export const revisePath = (path) => {
+    if (!path) {
+        return "";
+    }
+
+    if (path[0] == "/") {
+        return path;
+    } else {
+        return `/${path}`;
+    }
+};
+
+export function firstMenu(list) {
+    let path = "";
+
+    const fn = (arr) => {
+        arr.forEach((e) => {
+            if (e.type == 1) {
+                if (!path) {
+                    path = e.path;
+                }
+            } else {
+                fn(e.children);
+            }
+        });
+    };
+
+    fn(list);
+
+    return path || "/404";
+}
diff --git a/cool/components/base/views/index.js b/cool/components/base/views/index.js
new file mode 100644
index 0000000..5c92f33
--- /dev/null
+++ b/cool/components/base/views/index.js
@@ -0,0 +1,35 @@
+export default [
+	{
+		label: "个人中心",
+		path: "/my/info",
+		component: () => import("./info")
+	},
+	{
+		moduleName: "sys-user",
+		label: "用户列表",
+		path: "/sys/user",
+		icon: "icon-user",
+		component: () => import("./user")
+	},
+	{
+		moduleName: "sys-menu",
+		label: "菜单列表",
+		path: "/sys/menu",
+		icon: "icon-menu",
+		component: () => import("./menu")
+	},
+	{
+		moduleName: "sys-role",
+		label: "角色列表",
+		path: "/sys/role",
+		icon: "icon-common",
+		component: () => import("./role")
+	},
+	{
+		moduleName: "plugin",
+		label: "插件列表",
+		path: "/plugin",
+		icon: "icon-menu",
+		component: () => import("./plugin")
+	}
+];
diff --git a/cool/components/base/views/info.vue b/cool/components/base/views/info.vue
new file mode 100644
index 0000000..32a3eda
--- /dev/null
+++ b/cool/components/base/views/info.vue
@@ -0,0 +1,90 @@
+<template>
+	<div class="page-my-info">
+		<div class="title">基本信息</div>
+
+		<el-form size="small" label-width="100px" :model="form" :disabled="saving">
+			<el-form-item label="头像">
+				<cl-upload v-model="form.headImg"></cl-upload>
+			</el-form-item>
+
+			<el-form-item label="昵称">
+				<el-input v-model="form.nickName" placeholder="请填写昵称"></el-input>
+			</el-form-item>
+
+			<el-form-item label="密码">
+				<el-input type="password" v-model="form.password"></el-input>
+			</el-form-item>
+
+			<el-form-item label="">
+				<el-button type="primary" @click="save" :disabled="saving">保存修改</el-button>
+			</el-form-item>
+		</el-form>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+	data() {
+		return {
+			form: {},
+			saving: false
+		};
+	},
+
+	computed: {
+		...mapGetters(["userInfo"])
+	},
+
+	mounted() {
+		this.form = this.userInfo;
+	},
+
+	methods: {
+		save() {
+			this.saving = true;
+
+			const { headImg, nickName, password } = this.form;
+
+			this.$service.common
+				.userUpdate({
+					headImg,
+					nickName,
+					password
+				})
+				.then(() => {
+					this.form.password = "";
+					this.$message.success("修改成功");
+					this.$store.dispatch("userInfo");
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				})
+				.done(() => {
+					this.saving = false;
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.page-my-info {
+	background-color: #fff;
+	height: 100%;
+	padding: 20px;
+	box-sizing: border-box;
+
+	.el-form {
+		width: 400px;
+		max-width: 100%;
+	}
+
+	.title {
+		color: #000;
+		margin-bottom: 30px;
+		font-size: 15px;
+	}
+}
+</style>
diff --git a/cool/components/base/views/menu.vue b/cool/components/base/views/menu.vue
new file mode 100644
index 0000000..d643ac4
--- /dev/null
+++ b/cool/components/base/views/menu.vue
@@ -0,0 +1,391 @@
+<template>
+	<div>
+		<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
+			<el-row type="flex">
+				<cl-refresh-btn />
+				<cl-add-btn />
+			</el-row>
+
+			<cl-table ref="table" v-bind="table" @row-click="onRowClick">
+				<!-- 名称 -->
+				<template #column-name="{ scope }">
+					<span>{{ scope.row.name }}</span>
+					<el-tag
+						size="mini"
+						effect="dark"
+						type="danger"
+						v-if="!scope.row.isShow"
+						style="margin-left: 10px"
+						>隐藏</el-tag
+					>
+				</template>
+
+				<!-- 图标 -->
+				<template #column-icon="{ scope }">
+					<icon-svg :name="scope.row.icon" size="16px" style="margin-top: 5px"></icon-svg>
+				</template>
+
+				<!-- 权限 -->
+				<template #column-perms="{ scope }">
+					<el-tag
+						v-for="(item, index) in scope.row.permList"
+						:key="index"
+						size="mini"
+						effect="dark"
+						style="margin: 2px; letter-spacing: 0.5px"
+						>{{ item }}</el-tag
+					>
+				</template>
+
+				<!-- 路由 -->
+				<template #column-router="{ scope }">
+					<el-link type="primary" :href="scope.row.router" v-if="scope.row.type == 1">{{
+						scope.row.router
+					}}</el-link>
+					<span v-else>{{ scope.row.router }}</span>
+				</template>
+
+				<!-- 路由缓存 -->
+				<template #column-keepAlive="{ scope }">
+					<template v-if="scope.row.type == 1">
+						<i class="el-icon-check" v-if="scope.row.keepAlive"></i>
+						<i class="el-icon-close" v-else></i>
+					</template>
+				</template>
+
+				<!-- 行新增 -->
+				<template #slot-add="{ scope }">
+					<el-button
+						type="text"
+						size="mini"
+						@click="upsertAppend(scope.row)"
+						v-if="scope.row.type != 2"
+						>新增</el-button
+					>
+				</template>
+			</cl-table>
+
+			<!-- 编辑 -->
+			<cl-upsert ref="upsert" v-bind="upsert" @open="onUpsertOpen"></cl-upsert>
+		</cl-crud>
+	</div>
+</template>
+
+<script>
+import { deepTree } from "cl-admin/utils";
+
+export default {
+	data() {
+		return {
+			table: {
+				props: {
+					"row-key": "id"
+				},
+				"context-menu": [
+					(row) => {
+						return {
+							label: "新增",
+							hidden: row.type == 2,
+							callback: (item, done) => {
+								this.upsertAppend(row);
+								done();
+							}
+						};
+					},
+					"update",
+					"delete",
+					(row) => {
+						return {
+							label: "权限",
+							hidden: row.type != 1,
+							callback: (item, done) => {
+								this.setPermission(row);
+								done();
+							}
+						};
+					}
+				],
+				columns: [
+					{
+						prop: "name",
+						label: "名称",
+						align: "left",
+						width: 200
+					},
+					{
+						prop: "icon",
+						label: "图标",
+						align: "center",
+						width: 80
+					},
+					{
+						prop: "type",
+						label: "类型",
+						align: "center",
+						width: 100,
+						dict: [
+							{
+								label: "目录",
+								value: 0
+							},
+							{
+								label: "菜单",
+								value: 1
+							},
+							{
+								label: "权限",
+								value: 2
+							}
+						]
+					},
+					{
+						prop: "router",
+						label: "节点路由",
+						align: "center",
+						"min-width": 160
+					},
+					{
+						prop: "keepAlive",
+						label: "路由缓存",
+						align: "center",
+						width: 100
+					},
+					{
+						prop: "viewPath",
+						label: "文件路径",
+						align: "center",
+						"min-width": 200,
+						"show-overflow-tooltip": true
+					},
+					{
+						prop: "perms",
+						label: "权限",
+						"header-align": "center",
+						"min-width": 300
+					},
+					{
+						prop: "orderNum",
+						label: "排序号",
+						align: "center",
+						width: 90
+					},
+					{
+						prop: "updateTime",
+						label: "更新时间",
+						align: "center",
+						sortable: "custom",
+						width: 150
+					},
+					{
+						label: "操作",
+						align: "center",
+						type: "op",
+						buttons: ["slot-add", "edit", "delete"]
+					}
+				]
+			},
+
+			upsert: {
+				props: {
+					width: "800px"
+				},
+				items: [
+					{
+						prop: "type",
+						value: 0,
+						label: "节点类型",
+						span: 24,
+						component: {
+							name: "el-radio-group",
+							options: [
+								{
+									label: "目录",
+									value: 0
+								},
+								{
+									label: "菜单",
+									value: 1
+								},
+								{
+									label: "权限",
+									value: 2
+								}
+							],
+							on: {
+								change: (index) => {
+									this.changeType(index);
+								}
+							}
+						}
+					},
+					{
+						prop: "name",
+						label: "节点名称",
+						span: 24,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请输入节点名称"
+							}
+						},
+
+						rules: {
+							required: true,
+							message: "名称不能为空"
+						}
+					},
+					{
+						prop: "parentId",
+						label: "上级节点",
+						span: 24,
+						component: {
+							name: "cl-menu-tree"
+						}
+					},
+					{
+						prop: "router",
+						label: "节点路由",
+						span: 24,
+						hidden: true,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请输入节点路由"
+							}
+						}
+					},
+					{
+						prop: "keepAlive",
+						value: true,
+						label: "路由缓存",
+						span: 24,
+						component: {
+							name: "el-radio-group",
+							options: [
+								{
+									label: "开启",
+									value: true
+								},
+								{
+									label: "关闭",
+									value: false
+								}
+							]
+						}
+					},
+					{
+						prop: "isShow",
+						label: "是否显示",
+						span: 24,
+						value: true,
+						hidden: false,
+						flex: false,
+						component: {
+							name: "el-switch"
+						}
+					},
+					{
+						prop: "viewPath",
+						label: "文件路径",
+						span: 24,
+						hidden: true,
+						component: {
+							name: "cl-menu-file"
+						}
+					},
+					{
+						prop: "icon",
+						label: "节点图标",
+						span: 24,
+						component: {
+							name: "cl-menu-icons"
+						}
+					},
+
+					{
+						prop: "orderNum",
+						label: "排序号",
+						span: 24,
+						component: {
+							name: "el-input-number",
+							props: {
+								placeholder: "请填写排序号",
+								min: 0,
+								max: 99,
+								"controls-position": "right"
+							}
+						}
+					},
+					{
+						prop: "perms",
+						label: "权限",
+						span: 24,
+						hidden: true,
+						component: {
+							name: "cl-menu-perms"
+						}
+					}
+				]
+			}
+		};
+	},
+
+	methods: {
+		onLoad({ ctx, app }) {
+			ctx.service(this.$service.system.menu)
+				.set("dict", { api: { page: "list" } })
+				.done();
+
+			app.refresh();
+		},
+
+		onRefresh(params, { render }) {
+			this.$service.system.menu.list().then((list) => {
+				list.map((e) => {
+					e.permList = e.perms ? e.perms.split(",") : [];
+				});
+
+				render(deepTree(list));
+			});
+		},
+
+		onRowClick(row, column) {
+			if (column.property && row.children) {
+				this.$refs["table"].toggleRowExpansion(row);
+			}
+		},
+
+		onUpsertOpen(isEdit, data) {
+			this.changeType(data ? data.type : 0);
+		},
+
+		upsertAppend({ type, id }) {
+			this.$refs["crud"].rowAppend({
+				parentId: id,
+				type: type + 1
+			});
+		},
+
+		changeType(index) {
+			const { toggleItem } = this.$refs["upsert"];
+			toggleItem("router", index == 1);
+			toggleItem("viewPath", index == 1);
+			toggleItem("keepAlive", index == 1);
+			toggleItem("icon", index != 2);
+			toggleItem("perms", index == 2);
+			toggleItem("isShow", index != 2);
+		},
+
+		setPermission({ id }) {
+			this.$refs["crud"].rowAppend({
+				parentId: id,
+				type: 2
+			});
+		},
+
+		toUrl(url) {
+			this.$router.push(url);
+		}
+	}
+};
+</script>
diff --git a/cool/components/base/views/plugin.vue b/cool/components/base/views/plugin.vue
new file mode 100644
index 0000000..0120af9
--- /dev/null
+++ b/cool/components/base/views/plugin.vue
@@ -0,0 +1,238 @@
+<template>
+	<cl-crud ref="crud" :on-refresh="onRefresh" @load="onLoad">
+		<el-row type="flex" align="middle">
+			<!-- 刷新按钮 -->
+			<cl-refresh-btn />
+			<cl-flex1 />
+			<!-- 关键字搜索 -->
+			<cl-search-key />
+		</el-row>
+
+		<el-row>
+			<!-- 数据表格 -->
+			<cl-table v-bind="table">
+				<template #column-enable="{ scope }">
+					<el-switch
+						v-model="scope.row.enable"
+						size="mini"
+						:inactive-value="0"
+						:active-value="1"
+						:disabled="!perms.enable"
+						@change="onEnableChange($event, scope.row)"
+					></el-switch>
+				</template>
+			</cl-table>
+		</el-row>
+
+		<el-row type="flex">
+			<cl-flex1 />
+			<!-- 分页控件 -->
+			<cl-pagination layout="total" />
+		</el-row>
+	</cl-crud>
+</template>
+
+<script>
+import { checkPerm } from "cool/components/base";
+
+export default {
+	data() {
+		// 编辑权限
+		const { config, getConfig, enable } = this.$service.plugin.info.permission;
+
+		const perms = {
+			edit: checkPerm({
+				and: [config, getConfig]
+			}),
+			enable: checkPerm(enable)
+		};
+
+		return {
+			// 权限配置
+			perms,
+			// 表格配置
+			table: {
+				props: {
+					"default-sort": {
+						prop: "createTime",
+						order: "descending"
+					}
+				},
+				"context-menu": [
+					(scope) => {
+						return {
+							label: "配置",
+							hidden: !perms.edit,
+							callback: (item, done) => {
+								this.openConf(scope);
+								done();
+							}
+						};
+					}
+				],
+				columns: [
+					{
+						label: "名称",
+						prop: "name",
+						align: "center"
+					},
+					{
+						label: "作者",
+						prop: "author",
+						align: "center"
+					},
+					{
+						label: "联系方式",
+						prop: "contact",
+						align: "center"
+					},
+					{
+						label: "功能描述",
+						prop: "description",
+						align: "center"
+					},
+					{
+						label: "版本号",
+						prop: "version",
+						align: "center"
+					},
+					{
+						label: "是否启用",
+						prop: "enable",
+						align: "center"
+					},
+					{
+						label: "命名空间",
+						prop: "namespace",
+						align: "center"
+					},
+					{
+						label: "状态",
+						prop: "status",
+						align: "center",
+						dict: [
+							{
+								label: "缺少配置",
+								value: 0,
+								type: "warning"
+							},
+							{
+								label: "可用",
+								value: 1,
+								type: "success"
+							},
+							{
+								label: "配置错误",
+								value: 2,
+								type: "danger"
+							},
+							{
+								label: "未知错误",
+								value: 3,
+								type: "danger"
+							}
+						]
+					},
+					{
+						label: "创建时间",
+						prop: "createTime",
+						align: "center",
+						width: 150,
+						sortable: "custom"
+					},
+					{
+						type: "op",
+						align: "center",
+						buttons: [
+							({ scope }) => {
+								return (
+									scope.row.view &&
+									perms.edit && (
+										<el-button
+											type="text"
+											size="mini"
+											onclick={() => {
+												this.openConf(scope.row);
+											}}>
+											配置
+										</el-button>
+									)
+								);
+							}
+						]
+					}
+				]
+			}
+		};
+	},
+	methods: {
+		onLoad({ ctx, app }) {
+			ctx.service(this.$service.plugin.info)
+				.set("dict", {
+					api: {
+						page: "list"
+					}
+				})
+				.done();
+			app.refresh();
+		},
+		onRefresh(params, { next, render }) {
+			next(params).then((res) => {
+				render(res, {
+					total: res.length
+				});
+			});
+		},
+		onEnableChange(val, item) {
+			this.$service.plugin.info
+				.enable({
+					namespace: item.namespace,
+					enable: val
+				})
+				.then(() => {
+					this.$message.success(val ? "开启成功" : "关闭成功");
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				});
+		},
+		async openConf(item) {
+			let form = await this.$service.plugin.info.getConfig({
+				namespace: item.namespace
+			});
+
+			let items = [];
+
+			try {
+				items = JSON.parse(item.view);
+			} catch (e) {
+				items = [];
+				console.error(e);
+			}
+
+			this.$crud.openForm({
+				title: `${item.name}配置`,
+				items,
+				form,
+				on: {
+					submit: (data, { close, done }) => {
+						this.$service.plugin.info
+							.config({
+								namespace: item.namespace,
+								config: data
+							})
+							.then(() => {
+								this.$message.success("保存成功");
+								close();
+							})
+							.catch((err) => {
+								this.$message.error(err);
+								done();
+							});
+					}
+				}
+			});
+		}
+	}
+};
+</script>
diff --git a/cool/components/base/views/role.vue b/cool/components/base/views/role.vue
new file mode 100644
index 0000000..28a1ec9
--- /dev/null
+++ b/cool/components/base/views/role.vue
@@ -0,0 +1,163 @@
+<template>
+	<cl-crud @load="onLoad">
+		<el-row type="flex">
+			<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 v-model="form" v-bind="upsert"></cl-upsert>
+	</cl-crud>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			form: {
+				relevance: 1
+			},
+			upsert: {
+				props: {
+					width: "800px"
+				},
+				items: [
+					{
+						prop: "name",
+						label: "名称",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写名称"
+							}
+						},
+						rules: {
+							required: true,
+							message: "名称不能为空"
+						}
+					},
+					{
+						prop: "label",
+						label: "标识",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写标识"
+							}
+						},
+						rules: {
+							required: true,
+							message: "标识不能为空"
+						}
+					},
+					{
+						prop: "remark",
+						label: "备注",
+						span: 24,
+						component: {
+							name: "el-input",
+							props: {
+								type: "textarea",
+								rows: 4
+							},
+							attrs: {
+								placeholder: "请填写备注"
+							}
+						}
+					},
+					{
+						label: "功能权限",
+						prop: "menuIdList",
+						value: [],
+						component: {
+							name: "cl-role-perms"
+						}
+					},
+					{
+						label: "数据权限",
+						prop: "departmentIdList",
+						value: [],
+						component: {
+							name: "cl-dept-check"
+						}
+					}
+				]
+			},
+			table: {
+				props: {
+					"default-sort": {
+						prop: "createTime",
+						order: "descending"
+					}
+				},
+				columns: [
+					{
+						type: "selection",
+						align: "center",
+						width: "60"
+					},
+					{
+						prop: "name",
+						label: "名称",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						prop: "label",
+						label: "标识",
+						align: "center",
+						"min-width": 120
+					},
+					{
+						prop: "remark",
+						label: "备注",
+						align: "center",
+						"show-overflow-tooltips": true,
+						"min-width": 150
+					},
+					{
+						prop: "createTime",
+						label: "创建时间",
+						align: "center",
+						sortable: "custom",
+						"min-width": 150
+					},
+					{
+						prop: "updateTime",
+						label: "更新时间",
+						align: "center",
+						sortable: "custom",
+						"min-width": 150
+					},
+					{
+						label: "操作",
+						align: "center",
+						type: "op"
+					}
+				]
+			}
+		};
+	},
+
+	methods: {
+		onLoad({ ctx, app }) {
+			ctx.service(this.$service.system.role).done();
+
+			app.refresh();
+		}
+	}
+};
+</script>
diff --git a/cool/components/base/views/user.vue b/cool/components/base/views/user.vue
new file mode 100644
index 0000000..81d06ea
--- /dev/null
+++ b/cool/components/base/views/user.vue
@@ -0,0 +1,544 @@
+<template>
+	<div class="system-user">
+		<div class="pane">
+			<!-- 组织架构 -->
+			<div class="dept" :class="[isExpand ? '_expand' : '_collapse']">
+				<cl-dept-tree
+					@row-click="onDeptRowClick"
+					@user-add="onDeptUserAdd"
+					@list-change="onDeptListChange"
+				></cl-dept-tree>
+			</div>
+
+			<!-- 成员列表 -->
+			<div class="user">
+				<div class="header">
+					<div class="icon" @click="deptExpand">
+						<i class="el-icon-arrow-left" v-if="isExpand"></i>
+						<i class="el-icon-arrow-right" v-else></i>
+					</div>
+
+					<span>成员列表</span>
+				</div>
+
+				<div class="container">
+					<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
+						<el-row type="flex">
+							<cl-refresh-btn></cl-refresh-btn>
+							<cl-add-btn></cl-add-btn>
+							<cl-multi-delete-btn></cl-multi-delete-btn>
+							<el-button
+								v-permission="$service.system.user.permission.move"
+								size="mini"
+								type="success"
+								:disabled="selects.ids.length == 0"
+								@click="toMove()"
+								>转移</el-button
+							>
+							<cl-flex1></cl-flex1>
+							<cl-search-key></cl-search-key>
+						</el-row>
+
+						<el-row>
+							<cl-table
+								ref="table"
+								v-bind="table"
+								@selection-change="onSelectionChange"
+							>
+								<!-- 头像 -->
+								<template #column-headImg="{ scope }">
+									<cl-avatar
+										shape="square"
+										size="medium"
+										:src="scope.row.headImg | default_avatar"
+										:style="{ margin: 'auto' }"
+									>
+									</cl-avatar>
+								</template>
+
+								<!-- 权限 -->
+								<template #column-roleName="{ scope }">
+									<el-tag
+										v-for="(item, index) in scope.row.roleNameList"
+										:key="index"
+										disable-transitions
+										size="small"
+										effect="dark"
+										style="margin: 2px"
+										>{{ item }}</el-tag
+									>
+								</template>
+
+								<!-- 单个转移 -->
+								<template #slot-move-btn="{ scope }">
+									<el-button
+										v-permission="$service.system.user.permission.move"
+										type="text"
+										size="mini"
+										@click="toMove(scope.row)"
+										>转移</el-button
+									>
+								</template>
+							</cl-table>
+						</el-row>
+
+						<el-row type="flex">
+							<cl-flex1></cl-flex1>
+							<cl-pagination></cl-pagination>
+						</el-row>
+
+						<cl-upsert
+							ref="upsert"
+							:items="upsert.items"
+							:on-submit="onUpsertSubmit"
+							@open="onUpsertOpen"
+						></cl-upsert>
+					</cl-crud>
+				</div>
+			</div>
+		</div>
+
+		<!-- 部门移动 -->
+		<cl-dept-move ref="dept-move" @success="refresh({ page: 1 })"></cl-dept-move>
+	</div>
+</template>
+
+<script>
+import { isPc } from "cl-admin/utils";
+
+export default {
+	data() {
+		return {
+			isExpand: isPc(),
+			selects: {
+				dept: {},
+				ids: []
+			},
+			dept: [],
+			table: {
+				props: {
+					"default-sort": {
+						prop: "createTime",
+						order: "descending"
+					}
+				},
+				columns: [
+					{
+						type: "selection",
+						align: "center",
+						width: "60"
+					},
+					{
+						prop: "headImg",
+						label: "头像",
+						align: "center"
+					},
+					{
+						prop: "name",
+						label: "姓名",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						prop: "username",
+						label: "用户名",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						prop: "nickName",
+						label: "昵称",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						prop: "departmentName",
+						label: "部门名称",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						prop: "roleName",
+						label: "角色",
+						"header-align": "center",
+						"min-width": 200
+					},
+					{
+						prop: "phone",
+						label: "手机号码",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						prop: "remark",
+						label: "备注",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						prop: "status",
+						label: "状态",
+						align: "center",
+						"min-width": 120,
+						dict: [
+							{
+								label: "启用",
+								value: 1,
+								type: "success"
+							},
+							{
+								label: "禁用",
+								value: 0,
+								type: "danger"
+							}
+						]
+					},
+					{
+						prop: "createTime",
+						label: "创建时间",
+						align: "center",
+						sortable: "custom",
+						"min-width": 150
+					},
+					{
+						align: "center",
+						type: "op",
+						buttons: ["slot-move-btn", "edit", "delete"],
+						width: "160px"
+					}
+				]
+			},
+			upsert: {
+				items: [
+					{
+						prop: "headImg",
+						label: "头像",
+						span: 24,
+						component: {
+							name: "cl-upload",
+							props: {
+								text: "选择头像",
+								icon: "el-icon-picture"
+							}
+						}
+					},
+					{
+						prop: "name",
+						label: "姓名",
+						span: 24,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写姓名"
+							}
+						},
+						rules: {
+							required: true,
+							message: "姓名不能为空"
+						}
+					},
+					{
+						prop: "nickName",
+						label: "昵称",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写昵称"
+							}
+						},
+						rules: {
+							required: true,
+							message: "昵称不能为空"
+						}
+					},
+					{
+						prop: "username",
+						label: "用户名",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写用户名"
+							}
+						},
+						rules: [
+							{
+								required: true,
+								message: "用户名不能为空"
+							}
+						]
+					},
+					{
+						prop: "password",
+						label: "密码",
+						span: 12,
+						hidden: true,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写密码",
+								type: "password"
+							}
+						},
+						rules: [
+							{
+								min: 6,
+								max: 16,
+								message: "密码长度在 6 到 16 个字符"
+							}
+						]
+					},
+					{
+						prop: "roleIdList",
+						label: "角色",
+						span: 24,
+						value: [],
+						component: {
+							name: "cl-role-select",
+							props: {
+								props: {
+									"multiple-limit": 3
+								}
+							}
+						},
+						rules: {
+							required: true,
+							message: "角色不能为空"
+						}
+					},
+					{
+						prop: "phone",
+						label: "手机号码",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写手机号码"
+							}
+						}
+					},
+					{
+						prop: "email",
+						label: "邮箱",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写邮箱"
+							}
+						}
+					},
+					{
+						prop: "remark",
+						label: "备注",
+						span: 24,
+						component: {
+							name: "el-input",
+							props: {
+								type: "textarea",
+								rows: 4
+							},
+							attrs: {
+								placeholder: "请填写备注"
+							}
+						}
+					},
+					{
+						prop: "status",
+						label: "状态",
+						value: 1,
+						component: {
+							name: "el-radio-group",
+							options: [
+								{
+									label: "开启",
+									value: 1
+								},
+								{
+									label: "关闭",
+									value: 0
+								}
+							]
+						}
+					},
+					{
+						prop: "tips",
+						hidden: true,
+						component: (
+							<div>
+								<i class="el-icon-warning"></i>
+								<span style="margin-left: 6px">新增用户默认密码为：123456</span>
+							</div>
+						)
+					}
+				]
+			}
+		};
+	},
+
+	methods: {
+		refresh(params) {
+			this.$refs["crud"].refresh(params);
+		},
+
+		onLoad({ ctx, app }) {
+			ctx.service(this.$service.system.user).done();
+			app.refresh();
+		},
+
+		async onRefresh(params, { next, render }) {
+			let { list } = await next(params);
+
+			list.map((e) => {
+				if (e.roleName) {
+					this.$set(e, "roleNameList", e.roleName.split(","));
+				}
+
+				e.status = Boolean(e.status);
+			});
+
+			render(list);
+		},
+
+		onUpsertOpen(isEdit) {
+			this.$refs["upsert"].toggleItem("password", isEdit);
+			this.$refs["upsert"].toggleItem("tips", !isEdit);
+		},
+
+		onUpsertSubmit(isEdit, data, { next }) {
+			let departmentId = data.departmentId;
+
+			if (!departmentId) {
+				departmentId = this.selects.dept.id;
+
+				if (!departmentId) {
+					departmentId = this.dept[0].id;
+				}
+			}
+
+			next({
+				...data,
+				departmentId
+			});
+		},
+
+		onSelectionChange(selection) {
+			this.selects.ids = selection.map((e) => e.id);
+		},
+
+		onDeptRowClick({ item, ids }) {
+			this.selects.dept = item;
+
+			this.refresh({
+				page: 1,
+				departmentIds: ids
+			});
+
+			if (!isPc()) {
+				this.isExpand = false;
+			}
+		},
+
+		onDeptUserAdd(item) {
+			this.$refs["crud"].rowAppend({
+				departmentId: item.id
+			});
+		},
+
+		onDeptListChange(list) {
+			this.dept = list;
+		},
+
+		deptExpand() {
+			this.isExpand = !this.isExpand;
+		},
+
+		async toMove(e) {
+			let ids = [];
+
+			if (!e) {
+				ids = this.selects.ids;
+			} else {
+				ids = [e.id];
+			}
+
+			this.$refs["dept-move"].toMove(ids);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.system-user {
+	.pane {
+		display: flex;
+		height: 100%;
+		width: 100%;
+		position: relative;
+	}
+
+	.dept {
+		height: 100%;
+		width: 300px;
+		max-width: calc(100% - 50px);
+		background-color: #fff;
+		transition: width 0.3s;
+		margin-right: 10px;
+		flex-shrink: 0;
+
+		&._collapse {
+			margin-right: 0;
+			width: 0;
+		}
+	}
+
+	.user {
+		width: calc(100% - 310px);
+		flex: 1;
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 40px;
+			position: relative;
+			background-color: #fff;
+
+			span {
+				font-size: 14px;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+
+			.icon {
+				position: absolute;
+				left: 0;
+				top: 0;
+				font-size: 18px;
+				color: $color-main;
+				cursor: pointer;
+				background-color: #fff;
+				height: 40px;
+				width: 80px;
+				line-height: 40px;
+				padding-left: 10px;
+			}
+		}
+	}
+
+	.dept,
+	.user {
+		overflow: hidden;
+		.container {
+			height: calc(100% - 40px);
+		}
+	}
+
+	@media only screen and (max-width: 768px) {
+		.dept {
+			width: calc(100% - 100px);
+		}
+	}
+}
+</style>
diff --git a/cool/components/chat/components/box.vue b/cool/components/chat/components/box.vue
new file mode 100644
index 0000000..62f7eb4
--- /dev/null
+++ b/cool/components/chat/components/box.vue
@@ -0,0 +1,807 @@
+<template>
+	<div class="chat-wrap">
+		<!-- 聊天窗口 -->
+		<cl-dialog :visible.sync="visible" v-bind="conf">
+			<div class="chat-box">
+				<!-- 会话区域 -->
+				<div class="chat-box__session">
+					<div class="chat-box__session-search">
+						<el-input
+							v-model="session.keyWord"
+							placeholder="搜索"
+							prefix-icon="el-icon-search"
+							size="small"
+							clearable
+							@clear="onSearch"
+							@keyup.enter.native="onSearch"
+						></el-input>
+					</div>
+
+					<!-- 会话列表 -->
+					<ul class="chat-box__session-list scroller1">
+						<li
+							class="chat-box__session-item"
+							v-for="(item, index) in sessionList"
+							:key="index"
+							:class="{
+								'is-active': session.current ? item.id == session.current.id : false
+							}"
+							@click="sessionDetail(item)"
+							@contextmenu.stop.prevent="openSessionCM($event, item.id, index)"
+						>
+							<!-- 头像 -->
+							<div class="avatar">
+								<el-badge
+									:value="item.serviceUnreadCount"
+									:hidden="item.serviceUnreadCount === 0"
+									:max="99"
+								>
+									<img :src="item.headimgurl" alt="" />
+								</el-badge>
+							</div>
+
+							<!-- 昵称，内容 -->
+							<div class="det">
+								<p class="name">{{ item.nickname }}</p>
+								<p class="content">{{ item.lastMessage }}</p>
+							</div>
+						</li>
+					</ul>
+				</div>
+
+				<!-- 会话详情 -->
+				<div class="chat-box__detail">
+					<template v-if="session.current">
+						<div
+							class="chat-box__detail-container scroller1"
+							ref="scroller"
+							v-loading="message.loading"
+						>
+							<!-- 加载更多 -->
+							<div class="chat-box__detail-more" v-if="message.list.length > 0">
+								<el-button
+									round
+									size="mini"
+									:loading="message.loading"
+									@click="onLoadmore"
+									>加载更多</el-button
+								>
+							</div>
+
+							<!-- 消息列表 -->
+							<message :list="message.list" />
+						</div>
+
+						<div class="chat-box__detail-footer">
+							<!-- 工具栏 -->
+							<div class="chat-box__opbar">
+								<ul>
+									<!-- 表情 -->
+									<li>
+										<el-popover
+											v-model="emoji.visible"
+											placement="top-start"
+											width="470"
+											trigger="click"
+										>
+											<emoji @select="onEmojiSelect" />
+											<img
+												slot="reference"
+												src="../static/images/emoji.png"
+												alt=""
+											/>
+										</el-popover>
+									</li>
+									<!-- 图片上传 -->
+									<li>
+										<cl-upload
+											accept="image/*"
+											list-type
+											:on-success="onImageSelect"
+										>
+											<img src="../static/images/image.png" alt="" />
+										</cl-upload>
+									</li>
+									<!-- 视频上传 -->
+									<li>
+										<cl-upload
+											accept="video/*"
+											list-type
+											:before-upload="
+												(f) => {
+													onBeforeUpload(f, 'video');
+												}
+											"
+											:on-progress="onUploadProgress"
+											:on-success="
+												(r, f) => {
+													onUploadSuccess(r, f, 'video');
+												}
+											"
+										>
+											<img src="../static/images/video.png" alt="" />
+										</cl-upload>
+									</li>
+								</ul>
+							</div>
+
+							<!-- 输入框，发送按钮 -->
+							<div class="chat-box__input">
+								<el-input
+									v-model="message.value"
+									placeholder="请描述您想咨询的问题"
+									type="textarea"
+									:rows="5"
+									@keyup.enter.native="onTextSend"
+								></el-input>
+
+								<el-button
+									type="primary"
+									size="mini"
+									:disabled="!message.value"
+									@click="onTextSend"
+									>发送</el-button
+								>
+							</div>
+						</div>
+					</template>
+				</div>
+			</div>
+		</cl-dialog>
+
+		<!-- MP3 -->
+		<div class="mp3">
+			<audio style="display: none" ref="sound" src="../static/notify.mp3" controls></audio>
+		</div>
+	</div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import io from "socket.io-client";
+import { isString, debounce } from "cl-admin/utils";
+import { mapGetters } from "vuex";
+import { socketUrl } from "@/config/env";
+import Emoji from "./emoji";
+import Message from "./message";
+import { parseContent } from "../utils";
+
+// 消息模式
+const MODES = ["text", "image", "emoji", "voice", "video"];
+
+export default {
+	name: "cl-chat",
+
+	components: {
+		Message,
+		Emoji
+	},
+
+	data() {
+		return {
+			visible: false,
+			conf: {
+				title: "聊天对话框",
+				props: {
+					modal: true,
+					"custom-class": "chat-box__wrap",
+					"append-to-body": true,
+					"close-on-click-modal": false,
+					width: "1000px"
+				}
+			},
+			message: {
+				list: [],
+				pagination: {
+					page: 1,
+					size: 20,
+					total: 0
+				},
+				loading: false,
+				value: ""
+			},
+			session: {
+				list: [],
+				pagination: {
+					page: 1,
+					size: 100,
+					total: 0
+				},
+				current: null,
+				keyWord: ""
+			},
+			emoji: {
+				visible: false
+			},
+			socket: null
+		};
+	},
+
+	computed: {
+		...mapGetters(["userInfo", "token"]),
+
+		sessionList() {
+			return this.session.list
+				.map((e) => {
+					let { _text } = parseContent(e);
+					e.lastMessage = _text;
+					return e;
+				})
+				.sort((a, b) => {
+					return a.updateTime < b.updateTime ? 1 : -1;
+				});
+		}
+	},
+
+	mounted() {
+		this.socket = io(`${socketUrl}?isAdmin=true&token=${this.token}`);
+
+		this.socket.on("connect", () => {
+			console.log("socket connect");
+		});
+
+		this.socket.on("admin", (msg) => {
+			this.onMessage(msg);
+		});
+
+		this.socket.on("error", (err) => {
+			console.log(err);
+		});
+
+		this.socket.on("disconnect", () => {
+			console.log("disconnect connect");
+		});
+	},
+
+	destroyed() {
+		this.socket.close();
+	},
+
+	methods: {
+		open() {
+			this.visible = true;
+
+			this.refreshSession().then((res) => {
+				this.sessionDetail(res.list[0]);
+			});
+		},
+
+		close() {
+			this.visible = false;
+		},
+
+		// 上传前
+		onBeforeUpload(file, key) {
+			const data = {
+				content: {
+					[`${key}Url`]: ""
+				},
+				type: 0,
+				contentType: MODES.indexOf(key),
+				uid: file.uid,
+				loading: true,
+				progress: "0%"
+			};
+
+			this.append(data);
+		},
+
+		// 上传中
+		onUploadProgress(e, file) {
+			let item = this.message.list.find((e) => e.uid == file.uid);
+
+			if (item) {
+				item.progress = e.percent + "%";
+			}
+		},
+
+		// 上传成功
+		onUploadSuccess(res, file, key) {
+			let item = this.message.list.find((e) => e.uid == file.uid);
+
+			if (item) {
+				item.loading = false;
+				item.content[`${key}Url`] = res.data;
+
+				this.sendMessage(item);
+			}
+		},
+
+		// 打开会话列表右键菜单
+		openSessionCM(e, id, index) {
+			this.$crud.openContextMenu(e, {
+				list: [
+					{
+						label: "删除",
+						icon: "el-icon-delete",
+						callback: (item, done) => {
+							this.$service.im.session.delete({
+								ids: id
+							});
+
+							this.session.list.splice(index, 1);
+
+							if (id == this.session.current.id) {
+								this.sessionDetail();
+							}
+
+							done();
+						}
+					}
+				]
+			});
+		},
+
+		// 刷新会话列表
+		refreshSession(params) {
+			return this.$service.im.session
+				.page({
+					...this.session.pagination,
+					keyWord: this.session.keyWord,
+					params,
+					order: "updateTime",
+					sort: "desc"
+				})
+				.then(async (res) => {
+					this.session.list = res.list;
+					this.session.pagination = res.pagination;
+
+					return res;
+				});
+		},
+
+		// 刷新详情
+		async sessionDetail(item) {
+			if (item) {
+				let { id } = this.session.current || {};
+
+				if (id != item.id) {
+					item.serviceUnreadCount = 0;
+
+					this.conf.title = `与${item.nickname}聊天中`;
+					this.message.loading = true;
+					this.message.list = [];
+					this.session.current = item;
+
+					await this.refreshMessage({ page: 1 });
+
+					this.message.loading = false;
+				}
+
+				this.scrollToBottom();
+			} else {
+				this.conf.title = "聊天对话框";
+				this.message.list = [];
+				this.session.current = null;
+			}
+		},
+
+		// 刷新消息列表
+		refreshMessage(params) {
+			return this.$service.im.message
+				.page({
+					...this.message.pagination,
+					...params,
+					sessionId: this.session.current.id,
+					order: "createTime",
+					sort: "desc"
+				})
+				.then((res) => {
+					this.message.pagination = res.pagination;
+					this.prepend.apply(this, res.list);
+				});
+		},
+
+		// 更新会话消息
+		updateSession(data) {
+			Object.assign(this.session.current, data);
+		},
+
+		// 搜索关键字
+		onSearch() {
+			this.refreshSession({ page: 1 });
+		},
+
+		// 加载更多
+		onLoadmore() {
+			this.refreshMessage({ page: this.message.pagination.page + 1 });
+		},
+
+		// 滚动到底部
+		scrollToBottom: debounce(function () {
+			this.$nextTick(() => {
+				if (this.$refs["scroller"]) {
+					this.$refs["scroller"].scrollTo(0, 999999);
+				}
+			});
+		}, 300),
+
+		// 发送文本内容
+		onTextSend() {
+			if (this.message.value) {
+				if (this.message.value.replace(/\n/g, "") !== "") {
+					const data = {
+						type: 0,
+						contentType: 0,
+						content: {
+							text: this.message.value
+						}
+					};
+
+					this.append(data);
+					this.sendMessage(data);
+
+					this.$nextTick(() => {
+						this.message.value = "";
+					});
+				}
+			}
+		},
+
+		// 图片选择
+		onImageSelect(res) {
+			const data = {
+				content: {
+					imageUrl: res.data
+				},
+				type: 0,
+				contentType: 1
+			};
+			this.append(data);
+			this.sendMessage(data);
+		},
+
+		// 表情选择
+		onEmojiSelect(url) {
+			this.emoji.visible = false;
+			const data = {
+				content: {
+					imageUrl: url
+				},
+				type: 0,
+				contentType: 2
+			};
+			this.append(data);
+			this.sendMessage(data);
+		},
+
+		// 视频选择
+		onVideoSelect(url) {
+			const data = {
+				content: {
+					videoUrl: url
+				},
+				type: 0,
+				contentType: 4
+			};
+			this.append(data);
+			this.sendMessage(data);
+		},
+
+		// 监听消息
+		onMessage(msg) {
+			// 回调
+			this.$emit("message", this.visible);
+
+			// 消息通知
+			this.notification(msg);
+
+			try {
+				const { contentType, fromId, content, msgId } = JSON.parse(msg);
+
+				// 是否当前
+				const same = this.session.current && this.session.current.userId == fromId;
+
+				if (same) {
+					// 更新消息
+					this.updateSession({
+						contentType,
+						content
+					});
+
+					// 追加消息
+					this.append({
+						contentType,
+						content: JSON.parse(content),
+						type: 1
+					});
+
+					// 读消息
+					this.$service.im.message.read({
+						ids: [msgId],
+						session: this.session.current.id
+					});
+				}
+
+				// 查找会话
+				let item = this.session.list.find((e) => e.userId == fromId);
+
+				if (item) {
+					if (!same) {
+						item.serviceUnreadCount += 1;
+					}
+					// 更新消息
+					Object.assign(item, {
+						updateTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+						contentType,
+						content
+					});
+				} else {
+					// 刷新会话列表
+					this.refreshSession();
+				}
+			} catch (e) {
+				console.error("消息格式异常", e);
+			}
+		},
+
+		// 消息通知
+		notification(msg) {
+			const { _text } = parseContent(JSON.parse(msg));
+
+			// 播放音乐
+			if (this.$refs.sound) {
+				this.$refs.sound.play();
+			}
+
+			if (!this.visible) {
+				// 页面消息提示
+				this.$notify({
+					title: "提示",
+					message: this.$createElement("span", _text)
+				});
+
+				// 浏览器消息通知
+				const NotificationInstance = Notification || window.Notification;
+				if (!!NotificationInstance) {
+					if (NotificationInstance.permission !== "denied") {
+						NotificationInstance.requestPermission((status) => {
+							let n = new Notification("COOL-MALL", {
+								body: _text,
+								icon: "/favicon.ico"
+							});
+
+							setTimeout(() => {
+								n.close();
+							}, 2000);
+						});
+					}
+				}
+			}
+		},
+
+		// 发送消息
+		sendMessage({ contentType, content }) {
+			const { id, userId } = this.session.current;
+
+			// 更新消息
+			this.updateSession({
+				contentType,
+				content
+			});
+
+			this.socket.emit(`user@${userId}`, {
+				contentType,
+				type: 0,
+				content: JSON.stringify(content),
+				sessionId: id
+			});
+		},
+
+		/**
+		 * 处理消息数据
+		 * mode: 消息模式
+		 * type: 消息类型 0-回复，1-反馈
+		 * duration: 时常
+		 * videoUrl: 视频地址
+		 * videoCoverUrl: 视频封面
+		 * imageUrl: 图片地址
+		 * avatarUrl: 头像地址
+		 * nickName: 昵称
+		 */
+		handleMessage(e) {
+			if (isString(e)) {
+				e = JSON.parse(e);
+			}
+
+			if (isString(e.content)) {
+				e.content = JSON.parse(e.content);
+			}
+
+			// 昵称
+			const nickName = e.type == 0 ? this.userInfo.nickName : this.session.current.nickname;
+			// 头像
+			const avatarUrl =
+				e.type == 0
+					? this.userInfo.avatarUrl || require("../static/images/custom-avatar.png")
+					: this.session.current.headimgurl;
+
+			return {
+				...e,
+				avatarUrl,
+				nickName,
+				mode: MODES[e.contentType],
+				date: dayjs().format("YYYY-MM-DD HH:mm:ss")
+			};
+		},
+
+		// 追加数据到开头
+		prepend(...data) {
+			data.map(this.handleMessage).forEach((e) => {
+				this.message.list.unshift(e);
+			});
+		},
+
+		// 追加数据到结尾
+		append(...data) {
+			this.message.list.push(...data.map(this.handleMessage));
+			this.scrollToBottom();
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.chat-box__wrap {
+	height: 650px;
+	min-width: 1000px;
+	margin-bottom: 0 !important;
+
+	.el-dialog__body {
+		height: calc(100% - 46px);
+		padding: 0;
+
+		.cl-dialog__container {
+			height: 100%;
+		}
+	}
+}
+
+.chat-box {
+	display: flex;
+	height: 100%;
+	background-color: #f7f7f7;
+
+	&__session {
+		height: calc(100% - 10px);
+		width: 250px;
+		margin: 5px 0 5px 5px;
+		border-radius: 5px;
+		background-color: #fff;
+
+		&-search {
+			padding: 10px;
+		}
+
+		ul {
+			height: calc(100% - 52px);
+			overflow: auto;
+
+			li {
+				display: flex;
+				list-style: none;
+				padding: 10px;
+				border-left: 5px solid #fff;
+
+				.avatar {
+					height: 40px;
+					width: 40px;
+					margin-right: 12px;
+
+					img {
+						display: block;
+						height: 100%;
+						width: 100%;
+						border-radius: 3px;
+						background-color: #eee;
+					}
+
+					.el-badge {
+						&__content {
+							height: 14px;
+							line-height: 14px;
+							padding: 0 4px;
+							background-color: #fa5151;
+							border: 0;
+						}
+					}
+				}
+
+				.det {
+					flex: 1;
+					.name {
+						font-size: 13px;
+						margin-top: 1px;
+					}
+
+					.content {
+						font-size: 12px;
+						margin-top: 5px;
+						color: #666;
+					}
+
+					.name,
+					.content {
+						@include text_ellipsis(1);
+					}
+				}
+
+				&.is-active {
+					background-color: #eee;
+					border-color: $color-main;
+				}
+
+				&:hover {
+					background-color: #eee;
+					cursor: pointer;
+				}
+			}
+		}
+	}
+
+	&__detail {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		height: 100%;
+		padding: 5px;
+		box-sizing: border-box;
+
+		&-container {
+			flex: 1;
+			border-radius: 5px;
+			padding: 10px;
+			overflow: auto;
+			margin-bottom: 5px;
+		}
+
+		&-more {
+			display: flex;
+			justify-content: center;
+			margin-bottom: 20px;
+		}
+
+		&-footer {
+			background-color: #fff;
+			padding: 10px;
+			border-radius: 5px;
+		}
+	}
+
+	&__message {
+		flex: 1;
+		border-radius: 5px;
+	}
+
+	&__opbar {
+		margin-bottom: 5px;
+		ul {
+			display: flex;
+			li {
+				list-style: none;
+				margin-right: 10px;
+				cursor: pointer;
+
+				&:hover {
+					opacity: 0.7;
+				}
+
+				img {
+					height: 26px;
+					width: 26px;
+				}
+			}
+		}
+	}
+
+	&__input {
+		position: relative;
+
+		.el-button {
+			position: absolute;
+			right: 10px;
+			bottom: 10px;
+		}
+	}
+}
+</style>
diff --git a/cool/components/chat/components/emoji.vue b/cool/components/chat/components/emoji.vue
new file mode 100644
index 0000000..6e9ace2
--- /dev/null
+++ b/cool/components/chat/components/emoji.vue
@@ -0,0 +1,157 @@
+<template>
+	<div class="chat-emoji">
+		<div class="scroller">
+			<div class="block" v-for="(item, index) in list" :key="index" @click="select(item)">
+				<img :src="item" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+let emoji = {
+	url: "https://cool-comm.oss-cn-shenzhen.aliyuncs.com/show/imgs/chat/",
+	list: [
+		"angry-face.png",
+		"anguished-face.png",
+		"astonished-face.png",
+		"confounded-face.png",
+		"confused-face.png",
+		"crying-face.png",
+		"disappointed-but-relieved-face.png",
+		"disappointed-face.png",
+		"dizzy-face.png",
+		"drooling-face.png",
+		"expressionless-face.png",
+		"face-savouring-delicious-food.png",
+		"face-screaming-in-fear.png",
+		"face-throwing-a-kiss.png",
+		"face-with-cold-sweat.png",
+		"face-with-cowboy-hat.png",
+		"face-with-finger-covering-closed-lips.png",
+		"face-with-head-bandage.png",
+		"face-with-look-of-triumph.png",
+		"face-with-medical-mask.png",
+		"face-with-monocle.png",
+		"face-with-one-eyebrow-raised.png",
+		"face-with-open-mouth-and-cold-sweat.png",
+		"face-with-open-mouth-vomiting.png",
+		"face-with-open-mouth.png",
+		"face-with-party-horn-and-party-hat.png",
+		"face-with-pleading-eyes.png",
+		"face-with-rolling-eyes.png",
+		"face-with-stuck-out-tongue-and-tightly-closed-eyes.png",
+		"face-with-stuck-out-tongue-and-winking-eye.png",
+		"face-with-stuck-out-tongue.png",
+		"face-with-thermometer.png",
+		"face-with-uneven-eyes-and-wavy-mouth.png",
+		"face-without-mouth.png",
+		"fearful-face.png",
+		"flushed-face.png",
+		"freezing-face.png",
+		"frowning-face-with-open-mouth.png",
+		"grimacing-face.png",
+		"grinning-face-with-one-large-and-one-small-eye.png",
+		"grinning-face-with-smiling-eyes.png",
+		"grinning-face-with-star-eyes.png",
+		"grinning-face.png",
+		"hugging-face.png",
+		"hushed-face.png",
+		"imp.png",
+		"kissing-face-with-closed-eyes.png",
+		"kissing-face-with-smiling-eyes.png",
+		"kissing-face.png",
+		"loudly-crying-face.png",
+		"lying-face.png",
+		"money-mouth-face.png",
+		"nauseated-face.png",
+		"nerd-face.png",
+		"neutral-face.png",
+		"overheated-face.png",
+		"pensive-face.png",
+		"persevering-face.png",
+		"pouting-face.png",
+		"relieved-face.png",
+		"rolling-on-the-floor-laughing.png",
+		"serious-face-with-symbols-covering-mouth.png",
+		"shocked-face-with-exploding-head.png",
+		"sleeping-face.png",
+		"sleepy-face.png",
+		"slightly-frowning-face.png",
+		"slightly-smiling-face.png",
+		"smiling-face-with-halo.png",
+		"smiling-face-with-heart-shaped-eyes.png",
+		"smiling-face-with-horns.png",
+		"smiling-face-with-open-mouth-and-smiling-eyes.png",
+		"smiling-face-with-open-mouth-and-tightly-closed-eyes.png",
+		"smiling-face-with-open-mouth.png",
+		"smiling-face-with-smiling-eyes-and-hand-covering-mouth.png",
+		"smiling-face-with-smiling-eyes-and-three-hearts.png",
+		"smiling-face-with-smiling-eyes.png",
+		"smiling-face-with-sunglasses.png",
+		"smirking-face.png",
+		"sneezing-face.png",
+		"thinking-face.png",
+		"tired-face.png",
+		"upside-down-face.png",
+		"weary-face.png",
+		"white-frowning-face.png",
+		"white-smiling-face.png",
+		"winking-face.png",
+		"worried-face.png",
+		"zipper-mouth-face.png"
+	]
+};
+
+emoji.list = emoji.list.map((e) => emoji.url + e);
+
+export default {
+	data() {
+		return {
+			list: emoji.list
+		};
+	},
+
+	methods: {
+		close() {},
+
+		select(e) {
+			this.$emit("select", e);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.chat-emoji {
+	height: 250px;
+	box-sizing: border-box;
+
+	.scroller {
+		display: flex;
+		flex-wrap: wrap;
+		height: 100%;
+		overflow: auto;
+
+		.block {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 50px;
+			width: 50px;
+			cursor: pointer;
+
+			&:hover,
+			&:active {
+				background-color: #f7f7f7;
+			}
+
+			img {
+				display: inline-block;
+				height: 25px;
+				width: 25px;
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/chat/components/icon-voice.vue b/cool/components/chat/components/icon-voice.vue
new file mode 100644
index 0000000..f08a09d
--- /dev/null
+++ b/cool/components/chat/components/icon-voice.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="icon-voice">
+		<icon-svg :name="`voice${index}`"></icon-svg>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		play: Boolean
+	},
+
+	data() {
+		return {
+			timer: null,
+			index: ""
+		};
+	},
+
+	watch: {
+		play(val) {
+			clearInterval(this.timer);
+
+			if (val) {
+				this.index = 1;
+
+				this.timer = setInterval(() => {
+					if (this.index == 1) {
+						this.index = "";
+					} else {
+						this.index += 1;
+					}
+				}, 500);
+			} else {
+				this.index = "";
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.icon-voice {
+	display: inline-block;
+	margin-right: 5px;
+}
+</style>
diff --git a/cool/components/chat/components/index.js b/cool/components/chat/components/index.js
new file mode 100644
index 0000000..1fb09af
--- /dev/null
+++ b/cool/components/chat/components/index.js
@@ -0,0 +1,4 @@
+import ChatBox from "./box";
+import Notice from "./notice";
+
+export default { ChatBox, Notice };
diff --git a/cool/components/chat/components/message.vue b/cool/components/chat/components/message.vue
new file mode 100644
index 0000000..450dc4b
--- /dev/null
+++ b/cool/components/chat/components/message.vue
@@ -0,0 +1,345 @@
+<template>
+	<div class="chat-box-message">
+		<div
+			class="chat-box-message__item"
+			v-for="item in flist"
+			:key="item.id || item.uid"
+			:class="[item.type == 0 ? `is-right` : `is-left`, `is-${item.mode}`]"
+		>
+			<div class="date" v-if="item._date">
+				<span>{{ item._date }}</span>
+			</div>
+
+			<div class="main">
+				<div class="avatar" @tap="toUserDetail(item)">
+					<el-image :src="item.avatarUrl"></el-image>
+				</div>
+
+				<div class="det">
+					<span class="name">{{ item.nickName }}</span>
+
+					<div
+						class="content"
+						v-loading="item.loading"
+						:element-loading-text="item.progress"
+						@click="tapItem(item)"
+					>
+						<!-- 文本 -->
+						<template v-if="item.mode === 'text'">{{ item.content.text }}</template>
+
+						<!-- 图片 -->
+						<template v-else-if="item.mode === 'image'">
+							<el-image
+								:key="item.uid"
+								:src="item.content.imageUrl"
+								:preview-src-list="[item.content.imageUrl]"
+							></el-image>
+						</template>
+
+						<!-- 表情 -->
+						<template v-else-if="item.mode === 'emoji'">
+							<img :src="item.content.imageUrl" />
+						</template>
+
+						<!-- 语音 -->
+						<template v-else-if="item.mode === 'voice'">
+							<icon-voice :play="item.isPlay"></icon-voice>
+							<span class="duration">{{ item.content.duration | duration }}"</span>
+						</template>
+
+						<!-- 视频 -->
+						<template v-else-if="item.mode === 'video'">
+							<div class="item">
+								<video
+									:poster="item.content.videoUrl | video_poster"
+									:src="item.content.videoUrl"
+									controls
+								></video>
+							</div>
+						</template>
+
+						<!-- 未知 -->
+						<template v-else>
+							<span>待扩展消息类型</span>
+							<i class="el-icon-warning-outline"></i>
+						</template>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- voice -->
+		<div class="voice">
+			<audio style="display: none" ref="voice" :src="voice.url" controls></audio>
+		</div>
+	</div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import IconVoice from "./icon-voice";
+
+export default {
+	components: {
+		IconVoice
+	},
+
+	props: {
+		list: Array
+	},
+
+	data() {
+		return {
+			player: {},
+			voice: {
+				url: "",
+				timer: null
+			}
+		};
+	},
+
+	filters: {
+		duration(val) {
+			return Math.ceil((val || 1) / 1000);
+		}
+	},
+
+	destroyed() {
+		clearTimeout(this.voice.timer);
+
+		this.list.map((e) => {
+			e.isPlay = false;
+		});
+	},
+
+	computed: {
+		flist() {
+			let date = "";
+
+			return this.list.map((e) => {
+				e._date = date
+					? dayjs(e.createTime).isBefore(dayjs(date).add(1, "minute"))
+						? ""
+						: e.createTime
+					: e.createTime;
+
+				date = e.createTime;
+
+				return e;
+			});
+		}
+	},
+
+	methods: {
+		tapItem(item) {
+			if (item.mode == "voice") {
+				this.list.map((e) => {
+					this.$set(e, "isPlay", e.id == item.id ? e.isPlay : false);
+				});
+
+				item.isPlay = !item.isPlay;
+
+				if (item.isPlay) {
+					this.voice.url = item.content.voiceUrl;
+
+					this.$nextTick(() => {
+						this.$refs["voice"].play();
+					});
+				} else {
+					this.$refs["voice"].pause();
+					item.isPlay = false;
+				}
+
+				clearTimeout(this.voice.timer);
+
+				this.voice.timer = setTimeout(() => {
+					item.isPlay = false;
+				}, item.content.duration);
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.chat-box-message {
+	&__item {
+		margin-bottom: 20px;
+
+		.date {
+			text-align: center;
+			margin: 10px 0;
+
+			span {
+				background-color: #dadada;
+				font-size: 12px;
+				color: #fff;
+				border-radius: 3px;
+				padding: 2px 5px;
+				letter-spacing: 1px;
+			}
+		}
+
+		.main {
+			display: flex;
+
+			.avatar {
+				flex-shrink: 0;
+				height: 40px;
+				width: 40px;
+
+				.el-image {
+					border-radius: 3px;
+				}
+			}
+
+			.det {
+				display: flex;
+				flex-direction: column;
+				max-width: 60%;
+
+				.name {
+					margin-bottom: 5px;
+				}
+
+				.content {
+					display: inline-block;
+					border-radius: 8px;
+					box-sizing: border-box;
+					font-size: 12px;
+				}
+			}
+		}
+
+		&.is-left {
+			.main {
+				.det {
+					margin-left: 10px;
+					align-items: flex-start;
+
+					.content {
+						border-top-left-radius: 0;
+						background-color: #fff;
+					}
+				}
+			}
+
+			&.is-voice {
+				.content {
+					justify-content: flex-start;
+				}
+			}
+		}
+
+		&.is-right {
+			.main {
+				flex-direction: row-reverse;
+
+				.det {
+					margin-right: 10px;
+					align-items: flex-end;
+
+					.content {
+						border-top-right-radius: 0;
+						background-color: $color-main;
+						color: #fff;
+					}
+				}
+			}
+
+			&.is-voice {
+				.content {
+					justify-content: flex-end;
+				}
+			}
+		}
+
+		&.is-text {
+			.content {
+				max-width: 100%;
+				min-width: 40px;
+				word-wrap: break-word;
+			}
+		}
+
+		&.is-text,
+		&.is-voice {
+			.content {
+				padding: 10px;
+				line-height: 20px;
+				letter-spacing: 1px;
+			}
+		}
+
+		&.is-emoji {
+			.content {
+				padding: 10px;
+
+				img {
+					height: 20px;
+					width: 20px;
+				}
+			}
+		}
+
+		&.is-voice {
+			.content {
+				display: flex;
+				align-items: center;
+				width: 65px;
+				cursor: pointer;
+
+				&:hover {
+					opacity: 0.8;
+				}
+			}
+		}
+
+		&.is-video {
+			.item {
+				video {
+					max-width: 300px;
+					max-height: 300px;
+				}
+			}
+		}
+
+		&.is-image {
+			.main {
+				.det {
+					.content {
+						background-color: #fff;
+
+						/deep/.el-image {
+							display: block;
+							border-radius: 6px;
+							max-width: 200px;
+							min-width: 80px;
+						}
+					}
+				}
+			}
+		}
+
+		&.is-undefined {
+			.main {
+				.det {
+					.content {
+						display: flex;
+						align-items: center;
+						padding: 10px;
+						letter-spacing: 1px;
+						background-color: #f56c6c;
+						color: #fff;
+
+						.el-icon-warning-outline {
+							font-size: 15px;
+							margin-left: 4px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/chat/components/notice.vue b/cool/components/chat/components/notice.vue
new file mode 100644
index 0000000..df0b6dc
--- /dev/null
+++ b/cool/components/chat/components/notice.vue
@@ -0,0 +1,58 @@
+<template>
+	<li class="app-tools-notice" @click="openChatBox">
+		<el-badge :value="number" :hidden="number === 0">
+			<i class="el-icon-message-solid"></i>
+		</el-badge>
+
+		<!-- 聊天盒子 -->
+		<cl-chat ref="chat" @message="updateNum"></cl-chat>
+	</li>
+</template>
+
+<script>
+export default {
+	name: "cl-chat-notice",
+
+	data() {
+		return {
+			visible: false,
+			number: 0
+		};
+	},
+
+	created() {
+		this.refresh();
+	},
+
+	methods: {
+		refresh() {
+			this.$service.im.session.unreadCount().then((res) => {
+				this.number = Number(res);
+			});
+		},
+
+		updateNum(isOpen) {
+			this.number += isOpen ? 0 : 1;
+		},
+
+		openChatBox() {
+			this.$refs["chat"].open();
+			this.number = 0;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.app-tools-notice {
+	position: relative;
+
+	.el-icon-message-solid {
+		font-size: 20px;
+	}
+
+	/deep/.el-badge {
+		transform: scale(0.8);
+	}
+}
+</style>
diff --git a/cool/components/chat/index.js b/cool/components/chat/index.js
new file mode 100644
index 0000000..532ee77
--- /dev/null
+++ b/cool/components/chat/index.js
@@ -0,0 +1,4 @@
+import components from "./components";
+import service from "./service";
+
+export default { components, service };
diff --git a/cool/components/chat/package.json b/cool/components/chat/package.json
new file mode 100644
index 0000000..3b674eb
--- /dev/null
+++ b/cool/components/chat/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "chat",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "dayjs": "^1.10.4",
+    "socket.io-client": "^3.1.1"
+  }
+}
diff --git a/cool/components/chat/service/index.js b/cool/components/chat/service/index.js
new file mode 100644
index 0000000..5764dc9
--- /dev/null
+++ b/cool/components/chat/service/index.js
@@ -0,0 +1,9 @@
+import ImMessage from "./message";
+import ImSession from "./session";
+
+export default {
+	im: {
+		message: new ImMessage(),
+		session: new ImSession()
+	}
+};
diff --git a/cool/components/chat/service/message.js b/cool/components/chat/service/message.js
new file mode 100644
index 0000000..6e0185d
--- /dev/null
+++ b/cool/components/chat/service/message.js
@@ -0,0 +1,15 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("app/im/message")
+class ImMessage extends BaseService {
+	@Permission("read")
+	read(data) {
+		return this.request({
+			url: "/read",
+			method: "POST",
+			data
+		});
+	}
+}
+
+export default ImMessage;
diff --git a/cool/components/chat/service/session.js b/cool/components/chat/service/session.js
new file mode 100644
index 0000000..ce436a7
--- /dev/null
+++ b/cool/components/chat/service/session.js
@@ -0,0 +1,13 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("app/im/session")
+class ImSession extends BaseService {
+	@Permission("unreadCount")
+	unreadCount() {
+		return this.request({
+			url: "/unreadCount"
+		});
+	}
+}
+
+export default ImSession;
diff --git a/cool/components/chat/static/images/custom-avatar.png b/cool/components/chat/static/images/custom-avatar.png
new file mode 100644
index 0000000..d69c80f
Binary files /dev/null and b/cool/components/chat/static/images/custom-avatar.png differ
diff --git a/cool/components/chat/static/images/emoji.png b/cool/components/chat/static/images/emoji.png
new file mode 100644
index 0000000..b233094
Binary files /dev/null and b/cool/components/chat/static/images/emoji.png differ
diff --git a/cool/components/chat/static/images/image.png b/cool/components/chat/static/images/image.png
new file mode 100644
index 0000000..e119fa2
Binary files /dev/null and b/cool/components/chat/static/images/image.png differ
diff --git a/cool/components/chat/static/images/video.png b/cool/components/chat/static/images/video.png
new file mode 100644
index 0000000..80dd1be
Binary files /dev/null and b/cool/components/chat/static/images/video.png differ
diff --git a/cool/components/chat/static/notify.mp3 b/cool/components/chat/static/notify.mp3
new file mode 100644
index 0000000..594a32b
Binary files /dev/null and b/cool/components/chat/static/notify.mp3 differ
diff --git a/cool/components/chat/utils/index.js b/cool/components/chat/utils/index.js
new file mode 100644
index 0000000..0a7140b
--- /dev/null
+++ b/cool/components/chat/utils/index.js
@@ -0,0 +1,31 @@
+import { isObject } from "cl-admin/utils";
+
+export function parseContent({ content, contentType }) {
+	let data = isObject(content) ? content : JSON.parse(content);
+	let text = "";
+
+	switch (contentType) {
+		case 0:
+			text = data.text;
+			break;
+		case 1:
+			text = "[图片]";
+			break;
+		case 2:
+			text = "[表情]";
+			break;
+		case 3:
+			text = "[语音]";
+			break;
+		case 4:
+			text = "[视频]";
+			break;
+		case 5:
+			text = "[商品信息]";
+			break;
+	}
+
+	data._text = text;
+
+	return data;
+}
diff --git a/cool/components/codemirror/components/index.vue b/cool/components/codemirror/components/index.vue
new file mode 100644
index 0000000..6e97848
--- /dev/null
+++ b/cool/components/codemirror/components/index.vue
@@ -0,0 +1,268 @@
+<template>
+	<div class="cl-code">
+		<codemirror
+			ref="code"
+			v-model="value2"
+			:options="options2"
+			:style="{
+				height,
+				width
+			}"
+		/>
+	</div>
+</template>
+
+<script>
+import { codemirror } from "vue-codemirror";
+import beautifyJs from "js-beautify";
+
+import "codemirror/theme/cobalt.css";
+import "codemirror/lib/codemirror.css";
+import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/hint/javascript-hint";
+import "codemirror/mode/javascript/javascript";
+
+export default {
+	name: "cl-codemirror",
+
+	components: {
+		codemirror
+	},
+
+	props: {
+		value: String,
+		height: String,
+		width: String,
+		options: Object
+	},
+
+	data() {
+		return {
+			value2: ""
+		};
+	},
+
+	watch: {
+		value: {
+			immediate: true,
+			handler(val) {
+				this.value2 = val || "";
+			}
+		},
+		value2(val) {
+			this.$emit("input", val);
+		}
+	},
+
+	computed: {
+		options2() {
+			return {
+				mode: "javascript",
+				theme: "ambiance",
+				styleActiveLine: true,
+				lineNumbers: true,
+				lineWrapping: true,
+				indentUnit: 4,
+				...this.options
+			};
+		}
+	},
+
+	mounted() {
+		this.$el.onkeydown = (e) => {
+			let keyCode = e.keyCode || e.which || e.charCode;
+			let altKey = e.altKey || e.metaKey;
+			let shiftKey = e.shiftKey || e.metaKey;
+
+			if (altKey && shiftKey && keyCode == 70) {
+				this.setValue();
+			}
+		};
+
+		this.setValue(this.value2);
+	},
+
+	methods: {
+		setValue(val) {
+			this.value2 = beautifyJs(val || this.value2);
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.cl-code {
+	border-radius: 3px;
+	border: 1px solid #dcdfe6;
+	box-sizing: border-box;
+	border-radius: 3px;
+}
+
+.CodeMirror {
+	height: 100%;
+}
+
+.cm-s-ambiance * {
+	font-family: "Consolas";
+	font-size: 13px;
+}
+
+.cm-s-ambiance .cm-header {
+	color: blue;
+}
+
+.cm-s-ambiance .cm-quote {
+	color: #24c2c7;
+}
+
+.cm-s-ambiance .cm-keyword {
+	color: #a626a4;
+}
+
+.cm-s-ambiance .cm-atom {
+	color: #986801;
+}
+
+.cm-s-ambiance .cm-number {
+	color: #986801;
+}
+
+.cm-s-ambiance .cm-def {
+	color: #383a42;
+}
+
+.cm-s-ambiance .cm-variable {
+	color: #4078f2;
+}
+
+.cm-s-ambiance .cm-variable-2 {
+	color: #eed1b3;
+}
+
+.cm-s-ambiance .cm-variable-3,
+.cm-s-ambiance .cm-type {
+	color: #faded3;
+}
+
+.cm-s-ambiance .cm-property {
+	color: #333333;
+}
+
+.cm-s-ambiance .cm-operator {
+	color: #0184bc;
+}
+
+.cm-s-ambiance .cm-comment {
+	color: #555;
+	font-style: italic;
+}
+
+.cm-s-ambiance .cm-string {
+	color: #50a14f;
+}
+
+.cm-s-ambiance .cm-string-2 {
+	color: #9d937c;
+}
+
+.cm-s-ambiance .cm-meta {
+	color: #d2a8a1;
+}
+
+.cm-s-ambiance .cm-qualifier {
+	color: yellow;
+}
+
+.cm-s-ambiance .cm-builtin {
+	color: #9999cc;
+}
+
+.cm-s-ambiance .cm-bracket {
+	color: #24c2c7;
+}
+
+.cm-s-ambiance .cm-tag {
+	color: #fee4ff;
+}
+
+.cm-s-ambiance .cm-attribute {
+	color: #9b859d;
+}
+
+.cm-s-ambiance .cm-hr {
+	color: pink;
+}
+
+.cm-s-ambiance .cm-link {
+	color: #f4c20b;
+}
+
+.cm-s-ambiance .cm-special {
+	color: #ff9d00;
+}
+
+.cm-s-ambiance .cm-error {
+	color: #af2018;
+}
+
+.cm-s-ambiance .CodeMirror-matchingbracket {
+	color: #0f0;
+}
+
+.cm-s-ambiance .CodeMirror-nonmatchingbracket {
+	color: #f22;
+}
+
+.cm-s-ambiance div.CodeMirror-selected {
+	background: rgba(0, 0, 0, 0.15);
+}
+
+.cm-s-ambiance.CodeMirror-focused div.CodeMirror-selected {
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.cm-s-ambiance .CodeMirror-line::selection,
+.cm-s-ambiance .CodeMirror-line > span::selection,
+.cm-s-ambiance .CodeMirror-line > span > span::selection {
+	background: rgba(0, 0, 0, 0.1);
+}
+
+.cm-s-ambiance .CodeMirror-line::-moz-selection,
+.cm-s-ambiance .CodeMirror-line > span::-moz-selection,
+.cm-s-ambiance .CodeMirror-line > span > span::-moz-selection {
+	background: rgba(0, 0, 0, 0.1);
+}
+
+/* Editor styling */
+.cm-s-ambiance.CodeMirror {
+	line-height: 1.4em;
+	color: #383a42;
+	background-color: #f7f7f7;
+}
+
+.cm-s-ambiance .CodeMirror-gutters {
+	background: #f7f7f7;
+}
+
+.cm-s-ambiance .CodeMirror-linenumber {
+	color: #666;
+	padding: 0 5px;
+}
+
+.cm-s-ambiance .CodeMirror-guttermarker {
+	color: #aaa;
+}
+
+.cm-s-ambiance .CodeMirror-guttermarker-subtle {
+	color: #666;
+}
+
+.cm-s-ambiance .CodeMirror-cursor {
+	border-left: 1px solid #999;
+	margin-left: 2px;
+}
+
+.cm-s-ambiance .CodeMirror-activeline-background {
+	background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.031);
+}
+</style>
diff --git a/cool/components/codemirror/index.js b/cool/components/codemirror/index.js
new file mode 100644
index 0000000..0878c4e
--- /dev/null
+++ b/cool/components/codemirror/index.js
@@ -0,0 +1,7 @@
+import Codemirror from "./components";
+
+export default {
+	components: {
+		Codemirror
+	}
+};
diff --git a/cool/components/codemirror/package.json b/cool/components/codemirror/package.json
new file mode 100644
index 0000000..7cb4639
--- /dev/null
+++ b/cool/components/codemirror/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "codemirror",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "codemirror": "^5.59.2",
+    "js-beautify": "^1.13.5",
+    "vue-codemirror": "^4.0.6"
+  }
+}
diff --git a/cool/components/copy/directives/index.js b/cool/components/copy/directives/index.js
new file mode 100644
index 0000000..a51d939
--- /dev/null
+++ b/cool/components/copy/directives/index.js
@@ -0,0 +1,28 @@
+import { Message } from "element-ui";
+import Clipboard from "clipboard";
+
+function copyboard() {
+	const clipboard = new Clipboard("._copy-btn");
+
+	clipboard.on("success", (e) => {
+		Message.success("复制成功");
+		e.clearSelection();
+	});
+
+	clipboard.on("error", (err) => {
+		console.error(err);
+		Message.success("复制失败");
+	});
+}
+
+copyboard();
+
+export default {
+	inserted: (el, binding) => {
+		el.className = el.className + " _copy-btn";
+		el.setAttribute("data-clipboard-text", binding.value);
+	},
+	update: (el, binding) => {
+		el.setAttribute("data-clipboard-text", binding.value);
+	}
+};
diff --git a/cool/components/copy/index.js b/cool/components/copy/index.js
new file mode 100644
index 0000000..c93b2bd
--- /dev/null
+++ b/cool/components/copy/index.js
@@ -0,0 +1,7 @@
+import copy from "./directives";
+
+export default {
+	directives: {
+		copy
+	}
+};
diff --git a/cool/components/copy/package.json b/cool/components/copy/package.json
new file mode 100644
index 0000000..818daa5
--- /dev/null
+++ b/cool/components/copy/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "copy",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "clipboard": "^2.0.6",
+    "tape": "^5.1.1"
+  }
+}
diff --git a/cool/components/demo/index.js b/cool/components/demo/index.js
new file mode 100644
index 0000000..3c5dcb8
--- /dev/null
+++ b/cool/components/demo/index.js
@@ -0,0 +1,5 @@
+import views from './views'
+
+export default {
+	views
+};
diff --git a/cool/components/demo/package.json b/cool/components/demo/package.json
new file mode 100644
index 0000000..7859683
--- /dev/null
+++ b/cool/components/demo/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "demo",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "dayjs": "^1.10.4"
+  }
+}
diff --git a/cool/components/demo/utils/service.js b/cool/components/demo/utils/service.js
new file mode 100644
index 0000000..4ad2503
--- /dev/null
+++ b/cool/components/demo/utils/service.js
@@ -0,0 +1,107 @@
+import dayjs from 'dayjs'
+
+let id = 10
+
+export const UserList = [
+    {
+        id: 1,
+        name: "刘一",
+        createTime: "2019年09月02日",
+        price: 75.99,
+        status: 1
+    },
+    {
+        id: 2,
+        name: "陈二",
+        createTime: "2019年09月05日",
+        price: 242.1,
+        status: 1
+    },
+    {
+        id: 3,
+        name: "张三",
+        createTime: "2019年09月12日",
+        price: 74.11,
+        status: 0
+    },
+    {
+        id: 4,
+        name: "李四",
+        createTime: "2019年09月13日",
+        price: 276.64,
+        status: 0
+    },
+    {
+        id: 5,
+        name: "王五",
+        createTime: "2019年09月18日",
+        price: 160.23,
+        status: 1
+    }
+];
+
+export const TestService = {
+    page: (p) => {
+        console.log("GET[page]", p);
+        console.log(p)
+
+        let total = 0
+
+        let list = UserList.filter((e, i) => {
+            if (p.name) {
+                return e.name.includes(p.name)
+            }
+
+            if (![undefined, null, ''].includes(p.status)) {
+                return e.status === p.status
+            }
+
+            total++
+
+            if (i >= (p.page - 1) * p.size && i < p.page * p.size) {
+                return true
+            } else {
+                return false
+            }
+        })
+
+        return Promise.resolve({
+            list,
+            pagination: {
+                page: p.page,
+                size: p.size,
+                total
+            }
+        });
+    },
+    info: (d) => {
+        console.log("GET[info]", d);
+        return new Promise((resolve) => {
+            resolve(UserList.find(e.id == d.id));
+        });
+    },
+    add: (d) => {
+        console.log("POST[add]", d);
+        UserList.push({
+            ...d,
+            id: id++,
+            createTime: dayjs().format('YYYY年MM月DD日')
+        })
+        return Promise.resolve();
+    },
+    delete: (d) => {
+        console.log("POST[delete]", d);
+        let ids = d.ids.split(',')
+        ids.forEach(id => {
+            const index = UserList.findIndex(e => e.id == id)
+            UserList.splice(index, 1)
+        })
+        return Promise.resolve();
+    },
+    update: (d) => {
+        console.log("POST[update]", d);
+        let item = UserList.find(e => e.id == d.id)
+        Object.assign(item, d)
+        return Promise.resolve();
+    }
+};
diff --git a/cool/components/demo/views/components/b-cl-context-menu.vue b/cool/components/demo/views/components/b-cl-context-menu.vue
new file mode 100644
index 0000000..d5e031c
--- /dev/null
+++ b/cool/components/demo/views/components/b-cl-context-menu.vue
@@ -0,0 +1,80 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>cl-context-menu</span>
+			右键菜单
+		</div>
+		<div class="c">
+			<p class="btn" @contextmenu.stop.prevent="open">右键点击</p>
+		</div>
+		<div class="f">
+			<span class="date">2019/10/23</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	methods: {
+		open(e) {
+			this.$crud.openContextMenu(e, {
+				list: [
+					{
+						label: "新增",
+						"suffix-icon": "el-icon-plus",
+						callback: () => {
+							this.$message.info("点击了新增");
+						}
+					},
+					{
+						label: "编辑",
+						"suffix-icon": "el-icon-edit",
+						callback: (item, done) => {
+							this.$message.info("点击了编辑");
+							done();
+						}
+					},
+					{
+						label: "删除",
+						"suffix-icon": "el-icon-delete"
+					},
+					{
+						label: "二级",
+						"suffix-icon": "el-icon-right",
+						children: [
+							{
+								label: "文本超出隐藏，有一天晚上",
+								ellipsis: true
+							},
+							{
+								label: "禁用",
+								disabled: true
+							},
+							{
+								label: "更多",
+								callback: (item, done) => {
+									this.$message.warning("开发中");
+									done();
+								}
+							}
+						]
+					}
+				]
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.scope {
+	.btn {
+		border: 1px solid #dcdfe6;
+		font-size: 13px;
+		display: inline-block;
+		padding: 5px 10px;
+		cursor: pointer;
+		border-radius: 3px;
+	}
+}
+</style>
diff --git a/cool/components/demo/views/components/b-cl-crud.vue b/cool/components/demo/views/components/b-cl-crud.vue
new file mode 100644
index 0000000..fcc1352
--- /dev/null
+++ b/cool/components/demo/views/components/b-cl-crud.vue
@@ -0,0 +1,14 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>cl-crud</span>
+			增删改查，加强
+		</div>
+		<div class="c">
+			<router-link to="/crud">传送门</router-link>
+		</div>
+		<div class="f">
+			<span class="date">2019/09/25</span>
+		</div>
+	</div>
+</template>
diff --git a/cool/components/demo/views/components/b-cl-editor-quill.vue b/cool/components/demo/views/components/b-cl-editor-quill.vue
new file mode 100644
index 0000000..36f7166
--- /dev/null
+++ b/cool/components/demo/views/components/b-cl-editor-quill.vue
@@ -0,0 +1,14 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>cl-editor-quill</span>
+			Quill 富文本编辑器
+		</div>
+		<div class="c">
+			<router-link to="/editor-quill">传送门</router-link>
+		</div>
+		<div class="f">
+			<span class="date">2019/11/07</span>
+		</div>
+	</div>
+</template>
diff --git a/cool/components/demo/views/components/b-cl-form.vue b/cool/components/demo/views/components/b-cl-form.vue
new file mode 100644
index 0000000..3b047aa
--- /dev/null
+++ b/cool/components/demo/views/components/b-cl-form.vue
@@ -0,0 +1,140 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>cl-form</span>
+			自定义表单
+		</div>
+
+		<div class="c">
+			<el-button size="small" @click="openForm">填写邀请码</el-button>
+		</div>
+
+		<div class="f">
+			<span class="date">2019/10/11</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	methods: {
+		openForm() {
+			this.$crud.openForm({
+				title: "填写邀请码",
+				width: "450px",
+				dialog: {
+					controls: ["close"]
+				},
+				items: [
+					{
+						props: {
+							"label-width": "0px"
+						},
+
+						component: (
+							<div>
+								<i></i>
+								<span>如无邀请码，请联系客服：icssoa</span>
+							</div>
+						)
+					},
+					{
+						props: {
+							"label-width": "0px"
+						},
+						prop: "code",
+						component: {
+							name: "login-invite-code",
+
+							data() {
+								return {
+									list: ["", "", "", ""]
+								};
+							},
+
+							methods: {
+								onInput(i) {
+									if (this.list[i] && i <= 4 - i) {
+										this.$refs[`input-${i + 1}`].focus();
+									}
+
+									this.$emit("input", this.list.join(""));
+								},
+
+								nativeOnInput(e, i) {
+									if (e.code == "Backspace") {
+										if (!this.list[i]) {
+											if (i - 1 >= 0) {
+												this.$refs[`input-${i - 1}`].focus();
+											}
+										}
+									}
+
+									this.$emit("input", this.list.join(""));
+								}
+							},
+
+							mounted() {
+								this.$refs[`input-0`].focus();
+							},
+
+							render() {
+								return (
+									<div class="invite-code">
+										{this.list.map((e, i) => {
+											return (
+												<el-input
+													maxlength="1"
+													ref={`input-${i}`}
+													{...{
+														on: {
+															input: () => {
+																this.onInput(i);
+															}
+														},
+														nativeOn: {
+															keydown: (e) => {
+																this.nativeOnInput(e, i);
+															}
+														}
+													}}
+													v-model={this.list[i]}></el-input>
+											);
+										})}
+									</div>
+								);
+							}
+						}
+					}
+				],
+
+				on: {
+					submit: (data, done) => {
+						this.$message.success(data.code);
+						done();
+					}
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.invite-code {
+	display: flex;
+
+	.el-input {
+		flex: 1;
+		margin: 0 15px;
+
+		input {
+			border: 0;
+			border-radius: 0;
+			border-bottom: 1px solid #000;
+			text-align: center;
+			font-size: 18px;
+		}
+	}
+}
+</style>
diff --git a/cool/components/demo/views/components/b-cl-upload.vue b/cool/components/demo/views/components/b-cl-upload.vue
new file mode 100644
index 0000000..502efbb
--- /dev/null
+++ b/cool/components/demo/views/components/b-cl-upload.vue
@@ -0,0 +1,41 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>cl-upload</span>
+			图片上传
+		</div>
+		<div class="c">
+			<router-link to="/upload">传送门</router-link>
+		</div>
+		<div class="f">
+			<span class="date">2019/09/25</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			avatar: "",
+			avatar2: ""
+		};
+	},
+
+	methods: {
+		onSuccess() {
+			this.$message.success("上传成功");
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.scope {
+	.label {
+		display: inline-block;
+		font-size: 12px;
+		padding-bottom: 10px;
+	}
+}
+</style>
diff --git a/cool/components/demo/views/components/b-error-page.vue b/cool/components/demo/views/components/b-error-page.vue
new file mode 100644
index 0000000..86ce9ac
--- /dev/null
+++ b/cool/components/demo/views/components/b-error-page.vue
@@ -0,0 +1,29 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>error-page</span>
+			错误页
+		</div>
+
+		<div class="c">
+			<router-link to="/403">403</router-link>
+			<router-link to="/404">404</router-link>
+			<router-link to="/500">500</router-link>
+			<router-link to="/502">502</router-link>
+		</div>
+
+		<div class="f">
+			<span class="date">2019/10/25</span>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.scope {
+	.c {
+		a {
+			margin-right: 20px;
+		}
+	}
+}
+</style>
diff --git a/cool/components/demo/views/components/b-icon-svg.vue b/cool/components/demo/views/components/b-icon-svg.vue
new file mode 100644
index 0000000..2bd9d41
--- /dev/null
+++ b/cool/components/demo/views/components/b-icon-svg.vue
@@ -0,0 +1,26 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>icon-svg</span>
+			svg图片库
+		</div>
+		<div class="c _svg">
+			<el-tooltip content="icon-like" v-for="(item, index) in list" :key="index">
+				<icon-svg :size="18" :name="`icon-${item}`"></icon-svg>
+			</el-tooltip>
+		</div>
+		<div class="f">
+			<span class="date">2019/09/25</span>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			list: ["like", "video", "rank", "menu", "favor"]
+		};
+	}
+};
+</script>
diff --git a/cool/components/demo/views/components/b-v-copy.vue b/cool/components/demo/views/components/b-v-copy.vue
new file mode 100644
index 0000000..5c73373
--- /dev/null
+++ b/cool/components/demo/views/components/b-v-copy.vue
@@ -0,0 +1,18 @@
+<template>
+	<div class="scope">
+		<div class="h">
+			<span>v-copy</span>
+			复制到剪贴板
+		</div>
+
+		<div class="c">
+			<el-button size="small" v-copy="'https://www.cool-admin.com/'">
+				https://www.cool-admin.com
+			</el-button>
+		</div>
+
+		<div class="f">
+			<span class="date">2019/09/25</span>
+		</div>
+	</div>
+</template>
diff --git a/cool/components/demo/views/crud.vue b/cool/components/demo/views/crud.vue
new file mode 100644
index 0000000..9b3b257
--- /dev/null
+++ b/cool/components/demo/views/crud.vue
@@ -0,0 +1,613 @@
+<template>
+	<cl-crud ref="crud" @load="onLoad">
+		<el-row type="flex" align="middle">
+			<cl-refresh-btn></cl-refresh-btn>
+			<cl-add-btn></cl-add-btn>
+			<cl-multi-delete-btn></cl-multi-delete-btn>
+			<cl-query
+				field="status"
+				:list="[
+					{
+						label: '启用',
+						value: 1
+					},
+					{
+						label: '禁用',
+						value: 0
+					}
+				]"
+			></cl-query>
+			<cl-filter label="状态">
+				<el-select
+					size="mini"
+					v-model="selects.status"
+					@change="
+						(val) => {
+							refresh({
+								status: val,
+								page: 1
+							});
+						}
+					"
+				>
+					<el-option value="" label="全部"></el-option>
+					<el-option :value="0" label="禁用"></el-option>
+					<el-option :value="1" label="启用"></el-option>
+				</el-select>
+			</cl-filter>
+			<el-button size="mini" @click="openForm">自定义测试表单</el-button>
+			<cl-flex1></cl-flex1>
+			<cl-search-key
+				field="name"
+				:field-list="[
+					{
+						label: '姓名',
+						value: 'name'
+					},
+					{
+						label: '身份证',
+						value: 'idCard'
+					}
+				]"
+			></cl-search-key>
+			<cl-adv-btn></cl-adv-btn>
+		</el-row>
+
+		<el-row>
+			<cl-table ref="table" v-bind="table.props" v-on="table.on"> </cl-table>
+		</el-row>
+
+		<el-row>
+			<cl-pagination></cl-pagination>
+		</el-row>
+
+		<!-- 高级搜索 -->
+		<cl-adv-search ref="adv-search" v-bind="advSearch.props" v-on="advSearch.on">
+		</cl-adv-search>
+
+		<!-- 编辑、新增 -->
+		<cl-upsert ref="upsert" v-bind="upsert.props" v-on="upsert.on"> </cl-upsert>
+
+		<!-- 自定义表单 -->
+		<cl-form ref="form">
+			<!-- 动态增减表单验证 -->
+			<template #slot-validate="{ scope }">
+				<el-form-item
+					v-for="(item, index) in scope.vads"
+					:key="index"
+					:prop="'vads.' + index + '.val'"
+					:rules="{ required: true, message: '请输入' }"
+				>
+					<el-input v-model="item.val"></el-input>
+				</el-form-item>
+
+				<el-button @click="addVad(scope.vads)">添加行</el-button>
+			</template>
+
+			<!-- 内嵌crud -->
+			<template #slot-crud>
+				<cl-crud @load="onUpsertCrudLoad">
+					<cl-table
+						:props="{
+							'max-height': '300px'
+						}"
+						:columns="[
+							{
+								label: '姓名',
+								prop: 'name'
+							},
+							{
+								label: '存款',
+								prop: 'price'
+							},
+							{
+								label: '创建时间',
+								prop: 'createTime'
+							}
+						]"
+					></cl-table>
+				</cl-crud>
+			</template>
+		</cl-form>
+	</cl-crud>
+</template>
+
+<script>
+import { TestService } from "../utils/service";
+
+export default {
+	name: "crud-demo",
+
+	data() {
+		return {
+			selects: {
+				status: ""
+			},
+			table: {
+				on: {
+					"row-click": (row) => {
+						console.log("行点击", row);
+					}
+				},
+
+				props: {
+					columns: [
+						{
+							type: "selection",
+							align: "center",
+							width: 60
+						},
+						{
+							label: "姓名",
+							prop: "name",
+							align: "center",
+							"min-width": 120
+						},
+						{
+							label: "存款",
+							prop: "price",
+							sortable: true,
+							align: "center",
+							"min-width": 120
+						},
+						{
+							label: "状态",
+							prop: "status",
+							align: "center",
+							"min-width": 120,
+							dict: [
+								{
+									label: "启用",
+									value: 1,
+									type: "primary"
+								},
+								{
+									label: "禁用",
+									value: 0,
+									type: "danger"
+								}
+							]
+						},
+						{
+							label: "创建时间",
+							prop: "createTime",
+							align: "center",
+							"min-width": 150
+						},
+						{
+							label: "操作",
+							type: "op",
+							align: "center",
+							buttons: [
+								"edit",
+								"delete",
+								({ h, scope }) => {
+									return h(
+										"el-button",
+										{
+											props: {
+												type: "text",
+												size: "mini"
+											},
+											on: {
+												click: () => {
+													this.$refs["crud"].rowAppend({
+														name: scope.row.name
+													});
+												}
+											}
+										},
+										"追加"
+									);
+								}
+							]
+						}
+					]
+				}
+			},
+			upsert: {
+				on: {
+					open() {
+						console.log("cl-upsert 打开");
+					},
+
+					close() {
+						console.log("cl-upsert 关闭");
+					}
+				},
+				props: {
+					onOpen: (isEdit, data, { done, submit, close }) => {
+						console.log("cl-upsert 打开钩子", isEdit, data);
+					},
+
+					onClose(done) {
+						console.log("cl-upsert 关闭钩子");
+						done();
+					},
+
+					onInfo(data, { next, done, close }) {
+						console.log("cl-upsert 详情钩子", data);
+						done(data);
+					},
+
+					onSubmit(isEdit, data, { next, close, done }) {
+						console.log("cl-upsert 提交钩子", `是否编辑 ${isEdit}`, data);
+						next(data);
+					},
+
+					items: [
+						{
+							label: "姓名",
+							prop: "name",
+							component: {
+								name: "el-input"
+							},
+							rules: {
+								required: true,
+								message: "姓名不能为空"
+							}
+						},
+						{
+							label: "存款",
+							prop: "price",
+							value: 0,
+							component: {
+								name: "el-input-number"
+							}
+						},
+						{
+							label: "状态",
+							prop: "status",
+							value: 1,
+							component: {
+								name: "el-radio-group",
+								options: [
+									{
+										label: "启用",
+										value: 1
+									},
+									{
+										label: "禁用",
+										value: 0
+									}
+								]
+							},
+							rules: {
+								required: true,
+								message: "状态不能为空"
+							}
+						}
+					]
+				}
+			},
+			advSearch: {
+				on: {
+					open(data) {
+						console.log("adv-search 打开", data);
+					},
+					close() {
+						console.log("adv-search 关闭");
+					},
+					reset() {
+						console.log("adv-search 重置");
+					},
+					clear() {
+						console.log("adv-search 清空");
+					}
+				},
+				props: {
+					onOpen(data, { next }) {
+						console.log("adv-search 打开钩子", data);
+						next();
+					},
+					onClose(done) {
+						console.log("adv-search 关闭钩子");
+						done();
+					},
+					onSearch(data, { next, close }) {
+						console.log("adv-search 搜索钩子", data);
+						next(data);
+					},
+					opList: ["search", "reset", "clear", "close"],
+					items: [
+						{
+							label: "昵称",
+							prop: "name",
+							component: {
+								name: "el-input",
+								attrs: {
+									placeholder: "搜索昵称"
+								}
+							}
+						},
+						{
+							label: "状态",
+							prop: "status",
+							component: {
+								name: "el-radio-group",
+								options: [
+									{
+										label: "启用",
+										value: 1
+									},
+									{
+										label: "禁用",
+										value: 0
+									}
+								]
+							}
+						}
+					]
+				}
+			}
+		};
+	},
+
+	methods: {
+		openForm() {
+			this.$refs["form"].open({
+				title: "自定义表单",
+				width: "1000px",
+				props: {
+					"label-width": "150px"
+				},
+				on: {
+					open(data, { close, submit, done }) {
+						console.log("cl-form 打开钩子", data);
+					},
+
+					close(done) {
+						console.log("cl-form 关闭钩子");
+						done();
+					},
+
+					submit: (data, { close, done, next }) => {
+						console.log("cl-form 提交钩子", data);
+
+						setTimeout(() => {
+							done();
+							this.$message.success("提交成功");
+						}, 1500);
+					}
+				},
+				form: {
+					qs: [1]
+				},
+				items: [
+					{
+						props: {
+							"label-width": "0px"
+						},
+						component: ({ h }) => {
+							return h(
+								"el-divider",
+								{
+									props: {
+										"content-position": "left"
+									}
+								},
+								"测试内嵌CRUD"
+							);
+						}
+					},
+					{
+						props: {
+							"label-width": "0px"
+						},
+						component: {
+							name: "slot-crud"
+						}
+					},
+					{
+						props: {
+							"label-width": "0px"
+						},
+						component: ({ h }) => {
+							return h(
+								"el-divider",
+								{
+									props: {
+										"content-position": "left"
+									}
+								},
+								"测试验证规则"
+							);
+						}
+					},
+					{
+						prop: "vads",
+						value: [],
+						label: "动态增减表单验证",
+						component: {
+							name: "slot-validate"
+						}
+					},
+					{
+						props: {
+							"label-width": "0px"
+						},
+						component: ({ h }) => {
+							return h(
+								"el-divider",
+								{
+									props: {
+										"content-position": "left"
+									}
+								},
+								"测试显隐"
+							);
+						}
+					},
+					{
+						label: "奇术",
+						prop: "qs",
+						value: [],
+						component: {
+							name: "el-select",
+							attrs: {
+								placeholder: "请选择奇术"
+							},
+							props: {
+								multiple: true
+							},
+							options: [
+								{
+									label: "烟水还魂",
+									value: 1
+								},
+								{
+									label: "雨恨云愁",
+									value: 2
+								}
+							]
+						}
+					},
+					{
+						label: "技能",
+						prop: "jn",
+						value: 1,
+						component: {
+							name: "el-select",
+							attrs: {
+								placeholder: "请选择技能"
+							},
+							options: [
+								{
+									label: "飞羽箭",
+									value: 1
+								},
+								{
+									label: "落星式",
+									value: 2
+								}
+							]
+						}
+					},
+					{
+						label: "五行",
+						prop: "wx",
+						value: 0,
+						hidden: ({ scope }) => {
+							return scope.jn == 1;
+						},
+						component: {
+							name: "el-radio-group",
+							options: [
+								{
+									label: "水",
+									value: 0
+								},
+								{
+									label: "火",
+									value: 1
+								},
+								{
+									label: "雷",
+									value: 2
+								},
+								{
+									label: "风",
+									value: 3
+								},
+								{
+									label: "土",
+									value: 4
+								}
+							]
+						}
+					},
+					{
+						label: "雨润",
+						prop: "s1",
+						hidden: ({ scope }) => {
+							return scope.wx != 0;
+						},
+						component: ({ h }) => {
+							return h("p", "以甘甜雨露的滋润使人精力充沛");
+						}
+					},
+					{
+						label: "风雪冰天",
+						prop: "s2",
+						hidden: ({ scope }) => {
+							return scope.wx != 0;
+						},
+						component: ({ h }) => {
+							return h("p", "召唤漫天风雪，对敌方造成巨大的杀伤力");
+						}
+					},
+					{
+						label: "三昧真火",
+						prop: "h",
+						hidden: ({ scope }) => {
+							return scope.wx != 1;
+						},
+						component: ({ h }) => {
+							return h("p", "召唤三昧真火焚烧敌方的仙术");
+						}
+					},
+					{
+						label: "惊雷闪",
+						prop: "l",
+						hidden: ({ scope }) => {
+							return scope.wx != 2;
+						},
+						component: ({ h }) => {
+							return h("p", "召唤惊雷无数，对敌方全体进行攻击，是十分强力的仙术");
+						}
+					},
+					{
+						label: "如沐春风",
+						prop: "f",
+						hidden: ({ scope }) => {
+							return scope.wx != 3;
+						},
+						component: ({ h }) => {
+							return h("p", "温暖柔和的复苏春风，使人回复活力");
+						}
+					},
+					{
+						label: "艮山壁障",
+						prop: "t",
+						hidden: ({ scope }) => {
+							return scope.wx != 4;
+						},
+						component: ({ h }) => {
+							return h("p", "以艮山之灵形成一道壁障，受此壁障守护者刀枪不入");
+						}
+					}
+				]
+			});
+		},
+
+		onLoad({ ctx, app }) {
+			ctx.service(TestService)
+				.permission(() => {
+					return {
+						add: true,
+						update: true,
+						delete: true
+					};
+				})
+				.done();
+
+			app.refresh();
+		},
+
+		refresh(params) {
+			this.$refs["crud"].refresh(params);
+		},
+
+		onUpsertCrudLoad({ ctx, app }) {
+			ctx.service(TestService).done();
+			app.refresh();
+		},
+
+		addVad(list) {
+			list.push({
+				val: ""
+			});
+		}
+	}
+};
+</script>
diff --git a/cool/components/demo/views/demo.vue b/cool/components/demo/views/demo.vue
new file mode 100644
index 0000000..f5cfcba
--- /dev/null
+++ b/cool/components/demo/views/demo.vue
@@ -0,0 +1,215 @@
+<template>
+	<el-scrollbar>
+		<div class="demo">
+			<div class="list">
+				<div
+					class="item"
+					:style="{
+						width: `calc(${100 / cols}% - 10px)`
+					}"
+					:ref="`col-${index + 1}`"
+					v-for="(item, index) in layout"
+					:key="index"
+				>
+					<transition-group name="fade">
+						<component
+							:ref="item2"
+							:is="item2"
+							:key="item2 + index2"
+							v-for="(item2, index2) in item"
+						></component>
+					</transition-group>
+				</div>
+			</div>
+		</div>
+	</el-scrollbar>
+</template>
+
+<script>
+import BClUpload from "./components/b-cl-upload";
+import BVCopy from "./components/b-v-copy";
+import BIconSvg from "./components/b-icon-svg";
+import BClCrud from "./components/b-cl-crud";
+import BClForm from "./components/b-cl-form";
+import BClContextMenu from "./components/b-cl-context-menu";
+import BErrorPage from "./components/b-error-page";
+import BClEditorQuill from "./components/b-cl-editor-quill";
+
+export default {
+	components: {
+		BClUpload,
+		BVCopy,
+		BIconSvg,
+		BClCrud,
+		BClForm,
+		BClContextMenu,
+		BErrorPage,
+		BClEditorQuill
+	},
+
+	data() {
+		return {
+			list: [
+				"b-cl-upload",
+				"b-cl-crud",
+				"b-icon-svg",
+				"b-v-copy",
+				"b-cl-form",
+				"b-cl-context-menu",
+				"b-error-page",
+				"b-cl-editor-quill"
+			],
+			cols: 4,
+			layout: [[], [], [], []]
+		};
+	},
+
+	mounted() {
+		const width = document.body.clientWidth;
+
+		if (width < 768) {
+			this.cols = 1;
+		} else if (width < 1000) {
+			this.cols = 2;
+		} else if (width < 1500) {
+			this.cols = 3;
+		} else {
+			this.cols = 4;
+		}
+
+		this.append();
+	},
+
+	methods: {
+		getHeight(name) {
+			return this.$refs[name][0].offsetHeight;
+		},
+
+		selectCol() {
+			let arr = new Array(this.cols).fill(1);
+
+			for (let i = 0; i < this.cols; i++) {
+				arr[i] = this.getHeight(`col-${i + 1}`);
+			}
+
+			let min = Math.min.apply(this, arr);
+
+			return arr.indexOf(min);
+		},
+
+		append(index = 0) {
+			const i = this.selectCol();
+			const item = this.list[index];
+
+			if (!item) {
+				return false;
+			}
+
+			this.layout[i].push(item);
+
+			this.$nextTick(() => {
+				setTimeout(() => {
+					this.append(index + 1);
+				}, 100);
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.fade-enter-active,
+.fade-leave-active {
+	transition: all 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-active {
+	opacity: 0;
+}
+
+.demo {
+	overflow: hidden;
+
+	.list {
+		margin: 0 -5px;
+	}
+
+	.item {
+		width: calc(25% - 10px);
+		margin: 0 5px;
+		float: left;
+
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+
+	.scope {
+		background-color: #fff;
+		border-radius: 3px;
+		margin-bottom: 10px;
+
+		.h {
+			height: 30px;
+			display: flex;
+			align-items: center;
+			padding: 10px;
+			font-size: 12px;
+
+			span {
+				background-color: $color-main;
+				color: #fff;
+				border-radius: 3px;
+				padding: 2px 5px;
+				margin-right: 10px;
+				font-size: 14px;
+				letter-spacing: 1px;
+			}
+		}
+
+		.c {
+			padding: 10px;
+
+			&._svg {
+				.icon-svg {
+					margin-right: 15px;
+				}
+			}
+
+			a {
+				font-size: 13px;
+				color: #666;
+				position: relative;
+
+				&:hover {
+					color: $color-main;
+
+					&:after {
+						content: "";
+						width: 100%;
+						height: 1px;
+						position: absolute;
+						bottom: -2px;
+						left: 0;
+						background-color: $color-main;
+					}
+				}
+			}
+		}
+
+		.f {
+			height: 30px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 10px;
+			font-size: 12px;
+
+			.date {
+				color: #999;
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/demo/views/editor-quill.vue b/cool/components/demo/views/editor-quill.vue
new file mode 100644
index 0000000..b662b95
--- /dev/null
+++ b/cool/components/demo/views/editor-quill.vue
@@ -0,0 +1,31 @@
+<template>
+	<div class="page-editor-quill">
+		<cl-editor-quill v-model="content" @load="onLoad" :height="400"></cl-editor-quill>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			content: "",
+			options: {
+				placeholder: "输入内容"
+			}
+		};
+	},
+
+	methods: {
+		onLoad(ref) {
+			console.log(ref);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-editor-quill {
+	background-color: #fff;
+	padding: 10px;
+}
+</style>
diff --git a/cool/components/demo/views/index.js b/cool/components/demo/views/index.js
new file mode 100644
index 0000000..97e2dbf
--- /dev/null
+++ b/cool/components/demo/views/index.js
@@ -0,0 +1,26 @@
+export default [
+	{
+		moduleName: "crud",
+		label: "crud 示例",
+		path: "/crud",
+		component: () => import("./crud")
+	},
+	{
+		moduleName: "editor-quill",
+		label: "quill 富文本编辑器",
+		path: "/editor-quill",
+		component: () => import("./editor-quill")
+	},
+	{
+		moduleName: "upload",
+		label: "文件上传",
+		path: "/upload",
+		component: () => import("./upload")
+	},
+	{
+		moduleName: "demo",
+		label: "组件预览",
+		path: "/demo",
+		component: () => import("./demo")
+	}
+];
diff --git a/cool/components/demo/views/upload.vue b/cool/components/demo/views/upload.vue
new file mode 100644
index 0000000..e62d159
--- /dev/null
+++ b/cool/components/demo/views/upload.vue
@@ -0,0 +1,80 @@
+<template>
+	<div class="demo-upload">
+		<div class="demo-upload__item">
+			<p>普通上传</p>
+			<cl-upload :before-upload="onBeforeUpload"></cl-upload>
+		</div>
+
+		<div class="demo-upload__item">
+			<p>指定类型上传 accept=.jpg,.png</p>
+			<cl-upload accept=".jpg,.png" :before-upload="onBeforeUpload"></cl-upload>
+		</div>
+
+		<div class="demo-upload__item">
+			<p>多图上传 picture-card</p>
+
+			<cl-upload multiple :limit="3" listType="picture-card"></cl-upload>
+		</div>
+
+		<div class="demo-upload__item">
+			<p>文件上传 text</p>
+			<cl-upload v-model="urls" multiple :limit="5" accept="*" list-type="text"></cl-upload>
+		</div>
+
+		<div class="demo-upload__item">
+			<p>自定义</p>
+			<cl-upload icon="el-icon-picture" text="选择图片" :size="[120, 200]"></cl-upload>
+		</div>
+
+		<div class="demo-upload__item">
+			<p>拖拽上传</p>
+			<cl-upload drag>
+				<i class="el-icon-upload"></i>
+				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+			</cl-upload>
+		</div>
+
+		<div class="demo-upload__item">
+			<p>文件空间</p>
+			<cl-upload-space v-model="urls"></cl-upload-space>
+
+			<p style="margin-top: 10px">选择的文件：{{ urls }}</p>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			urls:
+				"https://cool-admin.cn.utools.club/uploads//20210226/7102eec0-7787-11eb-9231-515715ba55d0.jpg"
+		};
+	},
+
+	methods: {
+		onBeforeUpload(file, { done }) {
+			done();
+
+			return true;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-upload {
+	overflow: hidden auto;
+
+	.demo-upload__item {
+		margin-bottom: 10px;
+		background-color: #fff;
+		padding: 10px;
+
+		& > p {
+			margin-bottom: 10px;
+			font-size: 14px;
+		}
+	}
+}
+</style>
diff --git a/cool/components/distpicker/components/data.json b/cool/components/distpicker/components/data.json
new file mode 100644
index 0000000..4d5647f
--- /dev/null
+++ b/cool/components/distpicker/components/data.json
@@ -0,0 +1,5312 @@
+[
+	{
+		"code": "11",
+		"name": "北京市",
+		"children": [
+			{
+				"code": "1101",
+				"name": "市辖区",
+				"children": [
+					{ "code": "110101", "name": "东城区" },
+					{ "code": "110102", "name": "西城区" },
+					{ "code": "110105", "name": "朝阳区" },
+					{ "code": "110106", "name": "丰台区" },
+					{ "code": "110107", "name": "石景山区" },
+					{ "code": "110108", "name": "海淀区" },
+					{ "code": "110109", "name": "门头沟区" },
+					{ "code": "110111", "name": "房山区" },
+					{ "code": "110112", "name": "通州区" },
+					{ "code": "110113", "name": "顺义区" },
+					{ "code": "110114", "name": "昌平区" },
+					{ "code": "110115", "name": "大兴区" },
+					{ "code": "110116", "name": "怀柔区" },
+					{ "code": "110117", "name": "平谷区" },
+					{ "code": "110118", "name": "密云区" },
+					{ "code": "110119", "name": "延庆区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "12",
+		"name": "天津市",
+		"children": [
+			{
+				"code": "1201",
+				"name": "市辖区",
+				"children": [
+					{ "code": "120101", "name": "和平区" },
+					{ "code": "120102", "name": "河东区" },
+					{ "code": "120103", "name": "河西区" },
+					{ "code": "120104", "name": "南开区" },
+					{ "code": "120105", "name": "河北区" },
+					{ "code": "120106", "name": "红桥区" },
+					{ "code": "120110", "name": "东丽区" },
+					{ "code": "120111", "name": "西青区" },
+					{ "code": "120112", "name": "津南区" },
+					{ "code": "120113", "name": "北辰区" },
+					{ "code": "120114", "name": "武清区" },
+					{ "code": "120115", "name": "宝坻区" },
+					{ "code": "120116", "name": "滨海新区" },
+					{ "code": "120117", "name": "宁河区" },
+					{ "code": "120118", "name": "静海区" },
+					{ "code": "120119", "name": "蓟州区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "13",
+		"name": "河北省",
+		"children": [
+			{
+				"code": "1301",
+				"name": "石家庄市",
+				"children": [
+					{ "code": "130102", "name": "长安区" },
+					{ "code": "130104", "name": "桥西区" },
+					{ "code": "130105", "name": "新华区" },
+					{ "code": "130107", "name": "井陉矿区" },
+					{ "code": "130108", "name": "裕华区" },
+					{ "code": "130109", "name": "藁城区" },
+					{ "code": "130110", "name": "鹿泉区" },
+					{ "code": "130111", "name": "栾城区" },
+					{ "code": "130121", "name": "井陉县" },
+					{ "code": "130123", "name": "正定县" },
+					{ "code": "130125", "name": "行唐县" },
+					{ "code": "130126", "name": "灵寿县" },
+					{ "code": "130127", "name": "高邑县" },
+					{ "code": "130128", "name": "深泽县" },
+					{ "code": "130129", "name": "赞皇县" },
+					{ "code": "130130", "name": "无极县" },
+					{ "code": "130131", "name": "平山县" },
+					{ "code": "130132", "name": "元氏县" },
+					{ "code": "130133", "name": "赵县" },
+					{ "code": "130171", "name": "石家庄高新技术产业开发区" },
+					{ "code": "130172", "name": "石家庄循环化工园区" },
+					{ "code": "130181", "name": "辛集市" },
+					{ "code": "130183", "name": "晋州市" },
+					{ "code": "130184", "name": "新乐市" }
+				]
+			},
+			{
+				"code": "1302",
+				"name": "唐山市",
+				"children": [
+					{ "code": "130202", "name": "路南区" },
+					{ "code": "130203", "name": "路北区" },
+					{ "code": "130204", "name": "古冶区" },
+					{ "code": "130205", "name": "开平区" },
+					{ "code": "130207", "name": "丰南区" },
+					{ "code": "130208", "name": "丰润区" },
+					{ "code": "130209", "name": "曹妃甸区" },
+					{ "code": "130224", "name": "滦南县" },
+					{ "code": "130225", "name": "乐亭县" },
+					{ "code": "130227", "name": "迁西县" },
+					{ "code": "130229", "name": "玉田县" },
+					{ "code": "130271", "name": "河北唐山芦台经济开发区" },
+					{ "code": "130272", "name": "唐山市汉沽管理区" },
+					{ "code": "130273", "name": "唐山高新技术产业开发区" },
+					{ "code": "130274", "name": "河北唐山海港经济开发区" },
+					{ "code": "130281", "name": "遵化市" },
+					{ "code": "130283", "name": "迁安市" },
+					{ "code": "130284", "name": "滦州市" }
+				]
+			},
+			{
+				"code": "1303",
+				"name": "秦皇岛市",
+				"children": [
+					{ "code": "130302", "name": "海港区" },
+					{ "code": "130303", "name": "山海关区" },
+					{ "code": "130304", "name": "北戴河区" },
+					{ "code": "130306", "name": "抚宁区" },
+					{ "code": "130321", "name": "青龙满族自治县" },
+					{ "code": "130322", "name": "昌黎县" },
+					{ "code": "130324", "name": "卢龙县" },
+					{ "code": "130371", "name": "秦皇岛市经济技术开发区" },
+					{ "code": "130372", "name": "北戴河新区" }
+				]
+			},
+			{
+				"code": "1304",
+				"name": "邯郸市",
+				"children": [
+					{ "code": "130402", "name": "邯山区" },
+					{ "code": "130403", "name": "丛台区" },
+					{ "code": "130404", "name": "复兴区" },
+					{ "code": "130406", "name": "峰峰矿区" },
+					{ "code": "130407", "name": "肥乡区" },
+					{ "code": "130408", "name": "永年区" },
+					{ "code": "130423", "name": "临漳县" },
+					{ "code": "130424", "name": "成安县" },
+					{ "code": "130425", "name": "大名县" },
+					{ "code": "130426", "name": "涉县" },
+					{ "code": "130427", "name": "磁县" },
+					{ "code": "130430", "name": "邱县" },
+					{ "code": "130431", "name": "鸡泽县" },
+					{ "code": "130432", "name": "广平县" },
+					{ "code": "130433", "name": "馆陶县" },
+					{ "code": "130434", "name": "魏县" },
+					{ "code": "130435", "name": "曲周县" },
+					{ "code": "130471", "name": "邯郸经济技术开发区" },
+					{ "code": "130473", "name": "邯郸冀南新区" },
+					{ "code": "130481", "name": "武安市" }
+				]
+			},
+			{
+				"code": "1305",
+				"name": "邢台市",
+				"children": [
+					{ "code": "130502", "name": "桥东区" },
+					{ "code": "130503", "name": "桥西区" },
+					{ "code": "130521", "name": "邢台县" },
+					{ "code": "130522", "name": "临城县" },
+					{ "code": "130523", "name": "内丘县" },
+					{ "code": "130524", "name": "柏乡县" },
+					{ "code": "130525", "name": "隆尧县" },
+					{ "code": "130526", "name": "任县" },
+					{ "code": "130527", "name": "南和县" },
+					{ "code": "130528", "name": "宁晋县" },
+					{ "code": "130529", "name": "巨鹿县" },
+					{ "code": "130530", "name": "新河县" },
+					{ "code": "130531", "name": "广宗县" },
+					{ "code": "130532", "name": "平乡县" },
+					{ "code": "130533", "name": "威县" },
+					{ "code": "130534", "name": "清河县" },
+					{ "code": "130535", "name": "临西县" },
+					{ "code": "130571", "name": "河北邢台经济开发区" },
+					{ "code": "130581", "name": "南宫市" },
+					{ "code": "130582", "name": "沙河市" }
+				]
+			},
+			{
+				"code": "1306",
+				"name": "保定市",
+				"children": [
+					{ "code": "130602", "name": "竞秀区" },
+					{ "code": "130606", "name": "莲池区" },
+					{ "code": "130607", "name": "满城区" },
+					{ "code": "130608", "name": "清苑区" },
+					{ "code": "130609", "name": "徐水区" },
+					{ "code": "130623", "name": "涞水县" },
+					{ "code": "130624", "name": "阜平县" },
+					{ "code": "130626", "name": "定兴县" },
+					{ "code": "130627", "name": "唐县" },
+					{ "code": "130628", "name": "高阳县" },
+					{ "code": "130629", "name": "容城县" },
+					{ "code": "130630", "name": "涞源县" },
+					{ "code": "130631", "name": "望都县" },
+					{ "code": "130632", "name": "安新县" },
+					{ "code": "130633", "name": "易县" },
+					{ "code": "130634", "name": "曲阳县" },
+					{ "code": "130635", "name": "蠡县" },
+					{ "code": "130636", "name": "顺平县" },
+					{ "code": "130637", "name": "博野县" },
+					{ "code": "130638", "name": "雄县" },
+					{ "code": "130671", "name": "保定高新技术产业开发区" },
+					{ "code": "130672", "name": "保定白沟新城" },
+					{ "code": "130681", "name": "涿州市" },
+					{ "code": "130682", "name": "定州市" },
+					{ "code": "130683", "name": "安国市" },
+					{ "code": "130684", "name": "高碑店市" }
+				]
+			},
+			{
+				"code": "1307",
+				"name": "张家口市",
+				"children": [
+					{ "code": "130702", "name": "桥东区" },
+					{ "code": "130703", "name": "桥西区" },
+					{ "code": "130705", "name": "宣化区" },
+					{ "code": "130706", "name": "下花园区" },
+					{ "code": "130708", "name": "万全区" },
+					{ "code": "130709", "name": "崇礼区" },
+					{ "code": "130722", "name": "张北县" },
+					{ "code": "130723", "name": "康保县" },
+					{ "code": "130724", "name": "沽源县" },
+					{ "code": "130725", "name": "尚义县" },
+					{ "code": "130726", "name": "蔚县" },
+					{ "code": "130727", "name": "阳原县" },
+					{ "code": "130728", "name": "怀安县" },
+					{ "code": "130730", "name": "怀来县" },
+					{ "code": "130731", "name": "涿鹿县" },
+					{ "code": "130732", "name": "赤城县" },
+					{ "code": "130771", "name": "张家口经济开发区" },
+					{ "code": "130772", "name": "张家口市察北管理区" },
+					{ "code": "130773", "name": "张家口市塞北管理区" }
+				]
+			},
+			{
+				"code": "1308",
+				"name": "承德市",
+				"children": [
+					{ "code": "130802", "name": "双桥区" },
+					{ "code": "130803", "name": "双滦区" },
+					{ "code": "130804", "name": "鹰手营子矿区" },
+					{ "code": "130821", "name": "承德县" },
+					{ "code": "130822", "name": "兴隆县" },
+					{ "code": "130824", "name": "滦平县" },
+					{ "code": "130825", "name": "隆化县" },
+					{ "code": "130826", "name": "丰宁满族自治县" },
+					{ "code": "130827", "name": "宽城满族自治县" },
+					{ "code": "130828", "name": "围场满族蒙古族自治县" },
+					{ "code": "130871", "name": "承德高新技术产业开发区" },
+					{ "code": "130881", "name": "平泉市" }
+				]
+			},
+			{
+				"code": "1309",
+				"name": "沧州市",
+				"children": [
+					{ "code": "130902", "name": "新华区" },
+					{ "code": "130903", "name": "运河区" },
+					{ "code": "130921", "name": "沧县" },
+					{ "code": "130922", "name": "青县" },
+					{ "code": "130923", "name": "东光县" },
+					{ "code": "130924", "name": "海兴县" },
+					{ "code": "130925", "name": "盐山县" },
+					{ "code": "130926", "name": "肃宁县" },
+					{ "code": "130927", "name": "南皮县" },
+					{ "code": "130928", "name": "吴桥县" },
+					{ "code": "130929", "name": "献县" },
+					{ "code": "130930", "name": "孟村回族自治县" },
+					{ "code": "130971", "name": "河北沧州经济开发区" },
+					{ "code": "130972", "name": "沧州高新技术产业开发区" },
+					{ "code": "130973", "name": "沧州渤海新区" },
+					{ "code": "130981", "name": "泊头市" },
+					{ "code": "130982", "name": "任丘市" },
+					{ "code": "130983", "name": "黄骅市" },
+					{ "code": "130984", "name": "河间市" }
+				]
+			},
+			{
+				"code": "1310",
+				"name": "廊坊市",
+				"children": [
+					{ "code": "131002", "name": "安次区" },
+					{ "code": "131003", "name": "广阳区" },
+					{ "code": "131022", "name": "固安县" },
+					{ "code": "131023", "name": "永清县" },
+					{ "code": "131024", "name": "香河县" },
+					{ "code": "131025", "name": "大城县" },
+					{ "code": "131026", "name": "文安县" },
+					{ "code": "131028", "name": "大厂回族自治县" },
+					{ "code": "131071", "name": "廊坊经济技术开发区" },
+					{ "code": "131081", "name": "霸州市" },
+					{ "code": "131082", "name": "三河市" }
+				]
+			},
+			{
+				"code": "1311",
+				"name": "衡水市",
+				"children": [
+					{ "code": "131102", "name": "桃城区" },
+					{ "code": "131103", "name": "冀州区" },
+					{ "code": "131121", "name": "枣强县" },
+					{ "code": "131122", "name": "武邑县" },
+					{ "code": "131123", "name": "武强县" },
+					{ "code": "131124", "name": "饶阳县" },
+					{ "code": "131125", "name": "安平县" },
+					{ "code": "131126", "name": "故城县" },
+					{ "code": "131127", "name": "景县" },
+					{ "code": "131128", "name": "阜城县" },
+					{ "code": "131171", "name": "河北衡水高新技术产业开发区" },
+					{ "code": "131172", "name": "衡水滨湖新区" },
+					{ "code": "131182", "name": "深州市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "14",
+		"name": "山西省",
+		"children": [
+			{
+				"code": "1401",
+				"name": "太原市",
+				"children": [
+					{ "code": "140105", "name": "小店区" },
+					{ "code": "140106", "name": "迎泽区" },
+					{ "code": "140107", "name": "杏花岭区" },
+					{ "code": "140108", "name": "尖草坪区" },
+					{ "code": "140109", "name": "万柏林区" },
+					{ "code": "140110", "name": "晋源区" },
+					{ "code": "140121", "name": "清徐县" },
+					{ "code": "140122", "name": "阳曲县" },
+					{ "code": "140123", "name": "娄烦县" },
+					{ "code": "140171", "name": "山西转型综合改革示范区" },
+					{ "code": "140181", "name": "古交市" }
+				]
+			},
+			{
+				"code": "1402",
+				"name": "大同市",
+				"children": [
+					{ "code": "140212", "name": "新荣区" },
+					{ "code": "140213", "name": "平城区" },
+					{ "code": "140214", "name": "云冈区" },
+					{ "code": "140215", "name": "云州区" },
+					{ "code": "140221", "name": "阳高县" },
+					{ "code": "140222", "name": "天镇县" },
+					{ "code": "140223", "name": "广灵县" },
+					{ "code": "140224", "name": "灵丘县" },
+					{ "code": "140225", "name": "浑源县" },
+					{ "code": "140226", "name": "左云县" },
+					{ "code": "140271", "name": "山西大同经济开发区" }
+				]
+			},
+			{
+				"code": "1403",
+				"name": "阳泉市",
+				"children": [
+					{ "code": "140302", "name": "城区" },
+					{ "code": "140303", "name": "矿区" },
+					{ "code": "140311", "name": "郊区" },
+					{ "code": "140321", "name": "平定县" },
+					{ "code": "140322", "name": "盂县" }
+				]
+			},
+			{
+				"code": "1404",
+				"name": "长治市",
+				"children": [
+					{ "code": "140403", "name": "潞州区" },
+					{ "code": "140404", "name": "上党区" },
+					{ "code": "140405", "name": "屯留区" },
+					{ "code": "140406", "name": "潞城区" },
+					{ "code": "140423", "name": "襄垣县" },
+					{ "code": "140425", "name": "平顺县" },
+					{ "code": "140426", "name": "黎城县" },
+					{ "code": "140427", "name": "壶关县" },
+					{ "code": "140428", "name": "长子县" },
+					{ "code": "140429", "name": "武乡县" },
+					{ "code": "140430", "name": "沁县" },
+					{ "code": "140431", "name": "沁源县" },
+					{ "code": "140471", "name": "山西长治高新技术产业园区" }
+				]
+			},
+			{
+				"code": "1405",
+				"name": "晋城市",
+				"children": [
+					{ "code": "140502", "name": "城区" },
+					{ "code": "140521", "name": "沁水县" },
+					{ "code": "140522", "name": "阳城县" },
+					{ "code": "140524", "name": "陵川县" },
+					{ "code": "140525", "name": "泽州县" },
+					{ "code": "140581", "name": "高平市" }
+				]
+			},
+			{
+				"code": "1406",
+				"name": "朔州市",
+				"children": [
+					{ "code": "140602", "name": "朔城区" },
+					{ "code": "140603", "name": "平鲁区" },
+					{ "code": "140621", "name": "山阴县" },
+					{ "code": "140622", "name": "应县" },
+					{ "code": "140623", "name": "右玉县" },
+					{ "code": "140671", "name": "山西朔州经济开发区" },
+					{ "code": "140681", "name": "怀仁市" }
+				]
+			},
+			{
+				"code": "1407",
+				"name": "晋中市",
+				"children": [
+					{ "code": "140702", "name": "榆次区" },
+					{ "code": "140721", "name": "榆社县" },
+					{ "code": "140722", "name": "左权县" },
+					{ "code": "140723", "name": "和顺县" },
+					{ "code": "140724", "name": "昔阳县" },
+					{ "code": "140725", "name": "寿阳县" },
+					{ "code": "140726", "name": "太谷县" },
+					{ "code": "140727", "name": "祁县" },
+					{ "code": "140728", "name": "平遥县" },
+					{ "code": "140729", "name": "灵石县" },
+					{ "code": "140781", "name": "介休市" }
+				]
+			},
+			{
+				"code": "1408",
+				"name": "运城市",
+				"children": [
+					{ "code": "140802", "name": "盐湖区" },
+					{ "code": "140821", "name": "临猗县" },
+					{ "code": "140822", "name": "万荣县" },
+					{ "code": "140823", "name": "闻喜县" },
+					{ "code": "140824", "name": "稷山县" },
+					{ "code": "140825", "name": "新绛县" },
+					{ "code": "140826", "name": "绛县" },
+					{ "code": "140827", "name": "垣曲县" },
+					{ "code": "140828", "name": "夏县" },
+					{ "code": "140829", "name": "平陆县" },
+					{ "code": "140830", "name": "芮城县" },
+					{ "code": "140881", "name": "永济市" },
+					{ "code": "140882", "name": "河津市" }
+				]
+			},
+			{
+				"code": "1409",
+				"name": "忻州市",
+				"children": [
+					{ "code": "140902", "name": "忻府区" },
+					{ "code": "140921", "name": "定襄县" },
+					{ "code": "140922", "name": "五台县" },
+					{ "code": "140923", "name": "代县" },
+					{ "code": "140924", "name": "繁峙县" },
+					{ "code": "140925", "name": "宁武县" },
+					{ "code": "140926", "name": "静乐县" },
+					{ "code": "140927", "name": "神池县" },
+					{ "code": "140928", "name": "五寨县" },
+					{ "code": "140929", "name": "岢岚县" },
+					{ "code": "140930", "name": "河曲县" },
+					{ "code": "140931", "name": "保德县" },
+					{ "code": "140932", "name": "偏关县" },
+					{ "code": "140971", "name": "五台山风景名胜区" },
+					{ "code": "140981", "name": "原平市" }
+				]
+			},
+			{
+				"code": "1410",
+				"name": "临汾市",
+				"children": [
+					{ "code": "141002", "name": "尧都区" },
+					{ "code": "141021", "name": "曲沃县" },
+					{ "code": "141022", "name": "翼城县" },
+					{ "code": "141023", "name": "襄汾县" },
+					{ "code": "141024", "name": "洪洞县" },
+					{ "code": "141025", "name": "古县" },
+					{ "code": "141026", "name": "安泽县" },
+					{ "code": "141027", "name": "浮山县" },
+					{ "code": "141028", "name": "吉县" },
+					{ "code": "141029", "name": "乡宁县" },
+					{ "code": "141030", "name": "大宁县" },
+					{ "code": "141031", "name": "隰县" },
+					{ "code": "141032", "name": "永和县" },
+					{ "code": "141033", "name": "蒲县" },
+					{ "code": "141034", "name": "汾西县" },
+					{ "code": "141081", "name": "侯马市" },
+					{ "code": "141082", "name": "霍州市" }
+				]
+			},
+			{
+				"code": "1411",
+				"name": "吕梁市",
+				"children": [
+					{ "code": "141102", "name": "离石区" },
+					{ "code": "141121", "name": "文水县" },
+					{ "code": "141122", "name": "交城县" },
+					{ "code": "141123", "name": "兴县" },
+					{ "code": "141124", "name": "临县" },
+					{ "code": "141125", "name": "柳林县" },
+					{ "code": "141126", "name": "石楼县" },
+					{ "code": "141127", "name": "岚县" },
+					{ "code": "141128", "name": "方山县" },
+					{ "code": "141129", "name": "中阳县" },
+					{ "code": "141130", "name": "交口县" },
+					{ "code": "141181", "name": "孝义市" },
+					{ "code": "141182", "name": "汾阳市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "15",
+		"name": "内蒙古自治区",
+		"children": [
+			{
+				"code": "1501",
+				"name": "呼和浩特市",
+				"children": [
+					{ "code": "150102", "name": "新城区" },
+					{ "code": "150103", "name": "回民区" },
+					{ "code": "150104", "name": "玉泉区" },
+					{ "code": "150105", "name": "赛罕区" },
+					{ "code": "150121", "name": "土默特左旗" },
+					{ "code": "150122", "name": "托克托县" },
+					{ "code": "150123", "name": "和林格尔县" },
+					{ "code": "150124", "name": "清水河县" },
+					{ "code": "150125", "name": "武川县" },
+					{ "code": "150171", "name": "呼和浩特金海工业园区" },
+					{ "code": "150172", "name": "呼和浩特经济技术开发区" }
+				]
+			},
+			{
+				"code": "1502",
+				"name": "包头市",
+				"children": [
+					{ "code": "150202", "name": "东河区" },
+					{ "code": "150203", "name": "昆都仑区" },
+					{ "code": "150204", "name": "青山区" },
+					{ "code": "150205", "name": "石拐区" },
+					{ "code": "150206", "name": "白云鄂博矿区" },
+					{ "code": "150207", "name": "九原区" },
+					{ "code": "150221", "name": "土默特右旗" },
+					{ "code": "150222", "name": "固阳县" },
+					{ "code": "150223", "name": "达尔罕茂明安联合旗" },
+					{ "code": "150271", "name": "包头稀土高新技术产业开发区" }
+				]
+			},
+			{
+				"code": "1503",
+				"name": "乌海市",
+				"children": [
+					{ "code": "150302", "name": "海勃湾区" },
+					{ "code": "150303", "name": "海南区" },
+					{ "code": "150304", "name": "乌达区" }
+				]
+			},
+			{
+				"code": "1504",
+				"name": "赤峰市",
+				"children": [
+					{ "code": "150402", "name": "红山区" },
+					{ "code": "150403", "name": "元宝山区" },
+					{ "code": "150404", "name": "松山区" },
+					{ "code": "150421", "name": "阿鲁科尔沁旗" },
+					{ "code": "150422", "name": "巴林左旗" },
+					{ "code": "150423", "name": "巴林右旗" },
+					{ "code": "150424", "name": "林西县" },
+					{ "code": "150425", "name": "克什克腾旗" },
+					{ "code": "150426", "name": "翁牛特旗" },
+					{ "code": "150428", "name": "喀喇沁旗" },
+					{ "code": "150429", "name": "宁城县" },
+					{ "code": "150430", "name": "敖汉旗" }
+				]
+			},
+			{
+				"code": "1505",
+				"name": "通辽市",
+				"children": [
+					{ "code": "150502", "name": "科尔沁区" },
+					{ "code": "150521", "name": "科尔沁左翼中旗" },
+					{ "code": "150522", "name": "科尔沁左翼后旗" },
+					{ "code": "150523", "name": "开鲁县" },
+					{ "code": "150524", "name": "库伦旗" },
+					{ "code": "150525", "name": "奈曼旗" },
+					{ "code": "150526", "name": "扎鲁特旗" },
+					{ "code": "150571", "name": "通辽经济技术开发区" },
+					{ "code": "150581", "name": "霍林郭勒市" }
+				]
+			},
+			{
+				"code": "1506",
+				"name": "鄂尔多斯市",
+				"children": [
+					{ "code": "150602", "name": "东胜区" },
+					{ "code": "150603", "name": "康巴什区" },
+					{ "code": "150621", "name": "达拉特旗" },
+					{ "code": "150622", "name": "准格尔旗" },
+					{ "code": "150623", "name": "鄂托克前旗" },
+					{ "code": "150624", "name": "鄂托克旗" },
+					{ "code": "150625", "name": "杭锦旗" },
+					{ "code": "150626", "name": "乌审旗" },
+					{ "code": "150627", "name": "伊金霍洛旗" }
+				]
+			},
+			{
+				"code": "1507",
+				"name": "呼伦贝尔市",
+				"children": [
+					{ "code": "150702", "name": "海拉尔区" },
+					{ "code": "150703", "name": "扎赉诺尔区" },
+					{ "code": "150721", "name": "阿荣旗" },
+					{ "code": "150722", "name": "莫力达瓦达斡尔族自治旗" },
+					{ "code": "150723", "name": "鄂伦春自治旗" },
+					{ "code": "150724", "name": "鄂温克族自治旗" },
+					{ "code": "150725", "name": "陈巴尔虎旗" },
+					{ "code": "150726", "name": "新巴尔虎左旗" },
+					{ "code": "150727", "name": "新巴尔虎右旗" },
+					{ "code": "150781", "name": "满洲里市" },
+					{ "code": "150782", "name": "牙克石市" },
+					{ "code": "150783", "name": "扎兰屯市" },
+					{ "code": "150784", "name": "额尔古纳市" },
+					{ "code": "150785", "name": "根河市" }
+				]
+			},
+			{
+				"code": "1508",
+				"name": "巴彦淖尔市",
+				"children": [
+					{ "code": "150802", "name": "临河区" },
+					{ "code": "150821", "name": "五原县" },
+					{ "code": "150822", "name": "磴口县" },
+					{ "code": "150823", "name": "乌拉特前旗" },
+					{ "code": "150824", "name": "乌拉特中旗" },
+					{ "code": "150825", "name": "乌拉特后旗" },
+					{ "code": "150826", "name": "杭锦后旗" }
+				]
+			},
+			{
+				"code": "1509",
+				"name": "乌兰察布市",
+				"children": [
+					{ "code": "150902", "name": "集宁区" },
+					{ "code": "150921", "name": "卓资县" },
+					{ "code": "150922", "name": "化德县" },
+					{ "code": "150923", "name": "商都县" },
+					{ "code": "150924", "name": "兴和县" },
+					{ "code": "150925", "name": "凉城县" },
+					{ "code": "150926", "name": "察哈尔右翼前旗" },
+					{ "code": "150927", "name": "察哈尔右翼中旗" },
+					{ "code": "150928", "name": "察哈尔右翼后旗" },
+					{ "code": "150929", "name": "四子王旗" },
+					{ "code": "150981", "name": "丰镇市" }
+				]
+			},
+			{
+				"code": "1522",
+				"name": "兴安盟",
+				"children": [
+					{ "code": "152201", "name": "乌兰浩特市" },
+					{ "code": "152202", "name": "阿尔山市" },
+					{ "code": "152221", "name": "科尔沁右翼前旗" },
+					{ "code": "152222", "name": "科尔沁右翼中旗" },
+					{ "code": "152223", "name": "扎赉特旗" },
+					{ "code": "152224", "name": "突泉县" }
+				]
+			},
+			{
+				"code": "1525",
+				"name": "锡林郭勒盟",
+				"children": [
+					{ "code": "152501", "name": "二连浩特市" },
+					{ "code": "152502", "name": "锡林浩特市" },
+					{ "code": "152522", "name": "阿巴嘎旗" },
+					{ "code": "152523", "name": "苏尼特左旗" },
+					{ "code": "152524", "name": "苏尼特右旗" },
+					{ "code": "152525", "name": "东乌珠穆沁旗" },
+					{ "code": "152526", "name": "西乌珠穆沁旗" },
+					{ "code": "152527", "name": "太仆寺旗" },
+					{ "code": "152528", "name": "镶黄旗" },
+					{ "code": "152529", "name": "正镶白旗" },
+					{ "code": "152530", "name": "正蓝旗" },
+					{ "code": "152531", "name": "多伦县" },
+					{ "code": "152571", "name": "乌拉盖管委会" }
+				]
+			},
+			{
+				"code": "1529",
+				"name": "阿拉善盟",
+				"children": [
+					{ "code": "152921", "name": "阿拉善左旗" },
+					{ "code": "152922", "name": "阿拉善右旗" },
+					{ "code": "152923", "name": "额济纳旗" },
+					{ "code": "152971", "name": "内蒙古阿拉善经济开发区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "21",
+		"name": "辽宁省",
+		"children": [
+			{
+				"code": "2101",
+				"name": "沈阳市",
+				"children": [
+					{ "code": "210102", "name": "和平区" },
+					{ "code": "210103", "name": "沈河区" },
+					{ "code": "210104", "name": "大东区" },
+					{ "code": "210105", "name": "皇姑区" },
+					{ "code": "210106", "name": "铁西区" },
+					{ "code": "210111", "name": "苏家屯区" },
+					{ "code": "210112", "name": "浑南区" },
+					{ "code": "210113", "name": "沈北新区" },
+					{ "code": "210114", "name": "于洪区" },
+					{ "code": "210115", "name": "辽中区" },
+					{ "code": "210123", "name": "康平县" },
+					{ "code": "210124", "name": "法库县" },
+					{ "code": "210181", "name": "新民市" }
+				]
+			},
+			{
+				"code": "2102",
+				"name": "大连市",
+				"children": [
+					{ "code": "210202", "name": "中山区" },
+					{ "code": "210203", "name": "西岗区" },
+					{ "code": "210204", "name": "沙河口区" },
+					{ "code": "210211", "name": "甘井子区" },
+					{ "code": "210212", "name": "旅顺口区" },
+					{ "code": "210213", "name": "金州区" },
+					{ "code": "210214", "name": "普兰店区" },
+					{ "code": "210224", "name": "长海县" },
+					{ "code": "210281", "name": "瓦房店市" },
+					{ "code": "210283", "name": "庄河市" }
+				]
+			},
+			{
+				"code": "2103",
+				"name": "鞍山市",
+				"children": [
+					{ "code": "210302", "name": "铁东区" },
+					{ "code": "210303", "name": "铁西区" },
+					{ "code": "210304", "name": "立山区" },
+					{ "code": "210311", "name": "千山区" },
+					{ "code": "210321", "name": "台安县" },
+					{ "code": "210323", "name": "岫岩满族自治县" },
+					{ "code": "210381", "name": "海城市" }
+				]
+			},
+			{
+				"code": "2104",
+				"name": "抚顺市",
+				"children": [
+					{ "code": "210402", "name": "新抚区" },
+					{ "code": "210403", "name": "东洲区" },
+					{ "code": "210404", "name": "望花区" },
+					{ "code": "210411", "name": "顺城区" },
+					{ "code": "210421", "name": "抚顺县" },
+					{ "code": "210422", "name": "新宾满族自治县" },
+					{ "code": "210423", "name": "清原满族自治县" }
+				]
+			},
+			{
+				"code": "2105",
+				"name": "本溪市",
+				"children": [
+					{ "code": "210502", "name": "平山区" },
+					{ "code": "210503", "name": "溪湖区" },
+					{ "code": "210504", "name": "明山区" },
+					{ "code": "210505", "name": "南芬区" },
+					{ "code": "210521", "name": "本溪满族自治县" },
+					{ "code": "210522", "name": "桓仁满族自治县" }
+				]
+			},
+			{
+				"code": "2106",
+				"name": "丹东市",
+				"children": [
+					{ "code": "210602", "name": "元宝区" },
+					{ "code": "210603", "name": "振兴区" },
+					{ "code": "210604", "name": "振安区" },
+					{ "code": "210624", "name": "宽甸满族自治县" },
+					{ "code": "210681", "name": "东港市" },
+					{ "code": "210682", "name": "凤城市" }
+				]
+			},
+			{
+				"code": "2107",
+				"name": "锦州市",
+				"children": [
+					{ "code": "210702", "name": "古塔区" },
+					{ "code": "210703", "name": "凌河区" },
+					{ "code": "210711", "name": "太和区" },
+					{ "code": "210726", "name": "黑山县" },
+					{ "code": "210727", "name": "义县" },
+					{ "code": "210781", "name": "凌海市" },
+					{ "code": "210782", "name": "北镇市" }
+				]
+			},
+			{
+				"code": "2108",
+				"name": "营口市",
+				"children": [
+					{ "code": "210802", "name": "站前区" },
+					{ "code": "210803", "name": "西市区" },
+					{ "code": "210804", "name": "鲅鱼圈区" },
+					{ "code": "210811", "name": "老边区" },
+					{ "code": "210881", "name": "盖州市" },
+					{ "code": "210882", "name": "大石桥市" }
+				]
+			},
+			{
+				"code": "2109",
+				"name": "阜新市",
+				"children": [
+					{ "code": "210902", "name": "海州区" },
+					{ "code": "210903", "name": "新邱区" },
+					{ "code": "210904", "name": "太平区" },
+					{ "code": "210905", "name": "清河门区" },
+					{ "code": "210911", "name": "细河区" },
+					{ "code": "210921", "name": "阜新蒙古族自治县" },
+					{ "code": "210922", "name": "彰武县" }
+				]
+			},
+			{
+				"code": "2110",
+				"name": "辽阳市",
+				"children": [
+					{ "code": "211002", "name": "白塔区" },
+					{ "code": "211003", "name": "文圣区" },
+					{ "code": "211004", "name": "宏伟区" },
+					{ "code": "211005", "name": "弓长岭区" },
+					{ "code": "211011", "name": "太子河区" },
+					{ "code": "211021", "name": "辽阳县" },
+					{ "code": "211081", "name": "灯塔市" }
+				]
+			},
+			{
+				"code": "2111",
+				"name": "盘锦市",
+				"children": [
+					{ "code": "211102", "name": "双台子区" },
+					{ "code": "211103", "name": "兴隆台区" },
+					{ "code": "211104", "name": "大洼区" },
+					{ "code": "211122", "name": "盘山县" }
+				]
+			},
+			{
+				"code": "2112",
+				"name": "铁岭市",
+				"children": [
+					{ "code": "211202", "name": "银州区" },
+					{ "code": "211204", "name": "清河区" },
+					{ "code": "211221", "name": "铁岭县" },
+					{ "code": "211223", "name": "西丰县" },
+					{ "code": "211224", "name": "昌图县" },
+					{ "code": "211281", "name": "调兵山市" },
+					{ "code": "211282", "name": "开原市" }
+				]
+			},
+			{
+				"code": "2113",
+				"name": "朝阳市",
+				"children": [
+					{ "code": "211302", "name": "双塔区" },
+					{ "code": "211303", "name": "龙城区" },
+					{ "code": "211321", "name": "朝阳县" },
+					{ "code": "211322", "name": "建平县" },
+					{ "code": "211324", "name": "喀喇沁左翼蒙古族自治县" },
+					{ "code": "211381", "name": "北票市" },
+					{ "code": "211382", "name": "凌源市" }
+				]
+			},
+			{
+				"code": "2114",
+				"name": "葫芦岛市",
+				"children": [
+					{ "code": "211402", "name": "连山区" },
+					{ "code": "211403", "name": "龙港区" },
+					{ "code": "211404", "name": "南票区" },
+					{ "code": "211421", "name": "绥中县" },
+					{ "code": "211422", "name": "建昌县" },
+					{ "code": "211481", "name": "兴城市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "22",
+		"name": "吉林省",
+		"children": [
+			{
+				"code": "2201",
+				"name": "长春市",
+				"children": [
+					{ "code": "220102", "name": "南关区" },
+					{ "code": "220103", "name": "宽城区" },
+					{ "code": "220104", "name": "朝阳区" },
+					{ "code": "220105", "name": "二道区" },
+					{ "code": "220106", "name": "绿园区" },
+					{ "code": "220112", "name": "双阳区" },
+					{ "code": "220113", "name": "九台区" },
+					{ "code": "220122", "name": "农安县" },
+					{ "code": "220171", "name": "长春经济技术开发区" },
+					{ "code": "220172", "name": "长春净月高新技术产业开发区" },
+					{ "code": "220173", "name": "长春高新技术产业开发区" },
+					{ "code": "220174", "name": "长春汽车经济技术开发区" },
+					{ "code": "220182", "name": "榆树市" },
+					{ "code": "220183", "name": "德惠市" }
+				]
+			},
+			{
+				"code": "2202",
+				"name": "吉林市",
+				"children": [
+					{ "code": "220202", "name": "昌邑区" },
+					{ "code": "220203", "name": "龙潭区" },
+					{ "code": "220204", "name": "船营区" },
+					{ "code": "220211", "name": "丰满区" },
+					{ "code": "220221", "name": "永吉县" },
+					{ "code": "220271", "name": "吉林经济开发区" },
+					{ "code": "220272", "name": "吉林高新技术产业开发区" },
+					{ "code": "220273", "name": "吉林中国新加坡食品区" },
+					{ "code": "220281", "name": "蛟河市" },
+					{ "code": "220282", "name": "桦甸市" },
+					{ "code": "220283", "name": "舒兰市" },
+					{ "code": "220284", "name": "磐石市" }
+				]
+			},
+			{
+				"code": "2203",
+				"name": "四平市",
+				"children": [
+					{ "code": "220302", "name": "铁西区" },
+					{ "code": "220303", "name": "铁东区" },
+					{ "code": "220322", "name": "梨树县" },
+					{ "code": "220323", "name": "伊通满族自治县" },
+					{ "code": "220381", "name": "公主岭市" },
+					{ "code": "220382", "name": "双辽市" }
+				]
+			},
+			{
+				"code": "2204",
+				"name": "辽源市",
+				"children": [
+					{ "code": "220402", "name": "龙山区" },
+					{ "code": "220403", "name": "西安区" },
+					{ "code": "220421", "name": "东丰县" },
+					{ "code": "220422", "name": "东辽县" }
+				]
+			},
+			{
+				"code": "2205",
+				"name": "通化市",
+				"children": [
+					{ "code": "220502", "name": "东昌区" },
+					{ "code": "220503", "name": "二道江区" },
+					{ "code": "220521", "name": "通化县" },
+					{ "code": "220523", "name": "辉南县" },
+					{ "code": "220524", "name": "柳河县" },
+					{ "code": "220581", "name": "梅河口市" },
+					{ "code": "220582", "name": "集安市" }
+				]
+			},
+			{
+				"code": "2206",
+				"name": "白山市",
+				"children": [
+					{ "code": "220602", "name": "浑江区" },
+					{ "code": "220605", "name": "江源区" },
+					{ "code": "220621", "name": "抚松县" },
+					{ "code": "220622", "name": "靖宇县" },
+					{ "code": "220623", "name": "长白朝鲜族自治县" },
+					{ "code": "220681", "name": "临江市" }
+				]
+			},
+			{
+				"code": "2207",
+				"name": "松原市",
+				"children": [
+					{ "code": "220702", "name": "宁江区" },
+					{ "code": "220721", "name": "前郭尔罗斯蒙古族自治县" },
+					{ "code": "220722", "name": "长岭县" },
+					{ "code": "220723", "name": "乾安县" },
+					{ "code": "220771", "name": "吉林松原经济开发区" },
+					{ "code": "220781", "name": "扶余市" }
+				]
+			},
+			{
+				"code": "2208",
+				"name": "白城市",
+				"children": [
+					{ "code": "220802", "name": "洮北区" },
+					{ "code": "220821", "name": "镇赉县" },
+					{ "code": "220822", "name": "通榆县" },
+					{ "code": "220871", "name": "吉林白城经济开发区" },
+					{ "code": "220881", "name": "洮南市" },
+					{ "code": "220882", "name": "大安市" }
+				]
+			},
+			{
+				"code": "2224",
+				"name": "延边朝鲜族自治州",
+				"children": [
+					{ "code": "222401", "name": "延吉市" },
+					{ "code": "222402", "name": "图们市" },
+					{ "code": "222403", "name": "敦化市" },
+					{ "code": "222404", "name": "珲春市" },
+					{ "code": "222405", "name": "龙井市" },
+					{ "code": "222406", "name": "和龙市" },
+					{ "code": "222424", "name": "汪清县" },
+					{ "code": "222426", "name": "安图县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "23",
+		"name": "黑龙江省",
+		"children": [
+			{
+				"code": "2301",
+				"name": "哈尔滨市",
+				"children": [
+					{ "code": "230102", "name": "道里区" },
+					{ "code": "230103", "name": "南岗区" },
+					{ "code": "230104", "name": "道外区" },
+					{ "code": "230108", "name": "平房区" },
+					{ "code": "230109", "name": "松北区" },
+					{ "code": "230110", "name": "香坊区" },
+					{ "code": "230111", "name": "呼兰区" },
+					{ "code": "230112", "name": "阿城区" },
+					{ "code": "230113", "name": "双城区" },
+					{ "code": "230123", "name": "依兰县" },
+					{ "code": "230124", "name": "方正县" },
+					{ "code": "230125", "name": "宾县" },
+					{ "code": "230126", "name": "巴彦县" },
+					{ "code": "230127", "name": "木兰县" },
+					{ "code": "230128", "name": "通河县" },
+					{ "code": "230129", "name": "延寿县" },
+					{ "code": "230183", "name": "尚志市" },
+					{ "code": "230184", "name": "五常市" }
+				]
+			},
+			{
+				"code": "2302",
+				"name": "齐齐哈尔市",
+				"children": [
+					{ "code": "230202", "name": "龙沙区" },
+					{ "code": "230203", "name": "建华区" },
+					{ "code": "230204", "name": "铁锋区" },
+					{ "code": "230205", "name": "昂昂溪区" },
+					{ "code": "230206", "name": "富拉尔基区" },
+					{ "code": "230207", "name": "碾子山区" },
+					{ "code": "230208", "name": "梅里斯达斡尔族区" },
+					{ "code": "230221", "name": "龙江县" },
+					{ "code": "230223", "name": "依安县" },
+					{ "code": "230224", "name": "泰来县" },
+					{ "code": "230225", "name": "甘南县" },
+					{ "code": "230227", "name": "富裕县" },
+					{ "code": "230229", "name": "克山县" },
+					{ "code": "230230", "name": "克东县" },
+					{ "code": "230231", "name": "拜泉县" },
+					{ "code": "230281", "name": "讷河市" }
+				]
+			},
+			{
+				"code": "2303",
+				"name": "鸡西市",
+				"children": [
+					{ "code": "230302", "name": "鸡冠区" },
+					{ "code": "230303", "name": "恒山区" },
+					{ "code": "230304", "name": "滴道区" },
+					{ "code": "230305", "name": "梨树区" },
+					{ "code": "230306", "name": "城子河区" },
+					{ "code": "230307", "name": "麻山区" },
+					{ "code": "230321", "name": "鸡东县" },
+					{ "code": "230381", "name": "虎林市" },
+					{ "code": "230382", "name": "密山市" }
+				]
+			},
+			{
+				"code": "2304",
+				"name": "鹤岗市",
+				"children": [
+					{ "code": "230402", "name": "向阳区" },
+					{ "code": "230403", "name": "工农区" },
+					{ "code": "230404", "name": "南山区" },
+					{ "code": "230405", "name": "兴安区" },
+					{ "code": "230406", "name": "东山区" },
+					{ "code": "230407", "name": "兴山区" },
+					{ "code": "230421", "name": "萝北县" },
+					{ "code": "230422", "name": "绥滨县" }
+				]
+			},
+			{
+				"code": "2305",
+				"name": "双鸭山市",
+				"children": [
+					{ "code": "230502", "name": "尖山区" },
+					{ "code": "230503", "name": "岭东区" },
+					{ "code": "230505", "name": "四方台区" },
+					{ "code": "230506", "name": "宝山区" },
+					{ "code": "230521", "name": "集贤县" },
+					{ "code": "230522", "name": "友谊县" },
+					{ "code": "230523", "name": "宝清县" },
+					{ "code": "230524", "name": "饶河县" }
+				]
+			},
+			{
+				"code": "2306",
+				"name": "大庆市",
+				"children": [
+					{ "code": "230602", "name": "萨尔图区" },
+					{ "code": "230603", "name": "龙凤区" },
+					{ "code": "230604", "name": "让胡路区" },
+					{ "code": "230605", "name": "红岗区" },
+					{ "code": "230606", "name": "大同区" },
+					{ "code": "230621", "name": "肇州县" },
+					{ "code": "230622", "name": "肇源县" },
+					{ "code": "230623", "name": "林甸县" },
+					{ "code": "230624", "name": "杜尔伯特蒙古族自治县" },
+					{ "code": "230671", "name": "大庆高新技术产业开发区" }
+				]
+			},
+			{
+				"code": "2307",
+				"name": "伊春市",
+				"children": [
+					{ "code": "230717", "name": "伊美区" },
+					{ "code": "230718", "name": "乌翠区" },
+					{ "code": "230719", "name": "友好区" },
+					{ "code": "230722", "name": "嘉荫县" },
+					{ "code": "230723", "name": "汤旺县" },
+					{ "code": "230724", "name": "丰林县" },
+					{ "code": "230725", "name": "大箐山县" },
+					{ "code": "230726", "name": "南岔县" },
+					{ "code": "230751", "name": "金林区" },
+					{ "code": "230781", "name": "铁力市" }
+				]
+			},
+			{
+				"code": "2308",
+				"name": "佳木斯市",
+				"children": [
+					{ "code": "230803", "name": "向阳区" },
+					{ "code": "230804", "name": "前进区" },
+					{ "code": "230805", "name": "东风区" },
+					{ "code": "230811", "name": "郊区" },
+					{ "code": "230822", "name": "桦南县" },
+					{ "code": "230826", "name": "桦川县" },
+					{ "code": "230828", "name": "汤原县" },
+					{ "code": "230881", "name": "同江市" },
+					{ "code": "230882", "name": "富锦市" },
+					{ "code": "230883", "name": "抚远市" }
+				]
+			},
+			{
+				"code": "2309",
+				"name": "七台河市",
+				"children": [
+					{ "code": "230902", "name": "新兴区" },
+					{ "code": "230903", "name": "桃山区" },
+					{ "code": "230904", "name": "茄子河区" },
+					{ "code": "230921", "name": "勃利县" }
+				]
+			},
+			{
+				"code": "2310",
+				"name": "牡丹江市",
+				"children": [
+					{ "code": "231002", "name": "东安区" },
+					{ "code": "231003", "name": "阳明区" },
+					{ "code": "231004", "name": "爱民区" },
+					{ "code": "231005", "name": "西安区" },
+					{ "code": "231025", "name": "林口县" },
+					{ "code": "231071", "name": "牡丹江经济技术开发区" },
+					{ "code": "231081", "name": "绥芬河市" },
+					{ "code": "231083", "name": "海林市" },
+					{ "code": "231084", "name": "宁安市" },
+					{ "code": "231085", "name": "穆棱市" },
+					{ "code": "231086", "name": "东宁市" }
+				]
+			},
+			{
+				"code": "2311",
+				"name": "黑河市",
+				"children": [
+					{ "code": "231102", "name": "爱辉区" },
+					{ "code": "231123", "name": "逊克县" },
+					{ "code": "231124", "name": "孙吴县" },
+					{ "code": "231181", "name": "北安市" },
+					{ "code": "231182", "name": "五大连池市" },
+					{ "code": "231183", "name": "嫩江市" }
+				]
+			},
+			{
+				"code": "2312",
+				"name": "绥化市",
+				"children": [
+					{ "code": "231202", "name": "北林区" },
+					{ "code": "231221", "name": "望奎县" },
+					{ "code": "231222", "name": "兰西县" },
+					{ "code": "231223", "name": "青冈县" },
+					{ "code": "231224", "name": "庆安县" },
+					{ "code": "231225", "name": "明水县" },
+					{ "code": "231226", "name": "绥棱县" },
+					{ "code": "231281", "name": "安达市" },
+					{ "code": "231282", "name": "肇东市" },
+					{ "code": "231283", "name": "海伦市" }
+				]
+			},
+			{
+				"code": "2327",
+				"name": "大兴安岭地区",
+				"children": [
+					{ "code": "232701", "name": "漠河市" },
+					{ "code": "232721", "name": "呼玛县" },
+					{ "code": "232722", "name": "塔河县" },
+					{ "code": "232761", "name": "加格达奇区" },
+					{ "code": "232762", "name": "松岭区" },
+					{ "code": "232763", "name": "新林区" },
+					{ "code": "232764", "name": "呼中区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "31",
+		"name": "上海市",
+		"children": [
+			{
+				"code": "3101",
+				"name": "市辖区",
+				"children": [
+					{ "code": "310101", "name": "黄浦区" },
+					{ "code": "310104", "name": "徐汇区" },
+					{ "code": "310105", "name": "长宁区" },
+					{ "code": "310106", "name": "静安区" },
+					{ "code": "310107", "name": "普陀区" },
+					{ "code": "310109", "name": "虹口区" },
+					{ "code": "310110", "name": "杨浦区" },
+					{ "code": "310112", "name": "闵行区" },
+					{ "code": "310113", "name": "宝山区" },
+					{ "code": "310114", "name": "嘉定区" },
+					{ "code": "310115", "name": "浦东新区" },
+					{ "code": "310116", "name": "金山区" },
+					{ "code": "310117", "name": "松江区" },
+					{ "code": "310118", "name": "青浦区" },
+					{ "code": "310120", "name": "奉贤区" },
+					{ "code": "310151", "name": "崇明区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "32",
+		"name": "江苏省",
+		"children": [
+			{
+				"code": "3201",
+				"name": "南京市",
+				"children": [
+					{ "code": "320102", "name": "玄武区" },
+					{ "code": "320104", "name": "秦淮区" },
+					{ "code": "320105", "name": "建邺区" },
+					{ "code": "320106", "name": "鼓楼区" },
+					{ "code": "320111", "name": "浦口区" },
+					{ "code": "320113", "name": "栖霞区" },
+					{ "code": "320114", "name": "雨花台区" },
+					{ "code": "320115", "name": "江宁区" },
+					{ "code": "320116", "name": "六合区" },
+					{ "code": "320117", "name": "溧水区" },
+					{ "code": "320118", "name": "高淳区" }
+				]
+			},
+			{
+				"code": "3202",
+				"name": "无锡市",
+				"children": [
+					{ "code": "320205", "name": "锡山区" },
+					{ "code": "320206", "name": "惠山区" },
+					{ "code": "320211", "name": "滨湖区" },
+					{ "code": "320213", "name": "梁溪区" },
+					{ "code": "320214", "name": "新吴区" },
+					{ "code": "320281", "name": "江阴市" },
+					{ "code": "320282", "name": "宜兴市" }
+				]
+			},
+			{
+				"code": "3203",
+				"name": "徐州市",
+				"children": [
+					{ "code": "320302", "name": "鼓楼区" },
+					{ "code": "320303", "name": "云龙区" },
+					{ "code": "320305", "name": "贾汪区" },
+					{ "code": "320311", "name": "泉山区" },
+					{ "code": "320312", "name": "铜山区" },
+					{ "code": "320321", "name": "丰县" },
+					{ "code": "320322", "name": "沛县" },
+					{ "code": "320324", "name": "睢宁县" },
+					{ "code": "320371", "name": "徐州经济技术开发区" },
+					{ "code": "320381", "name": "新沂市" },
+					{ "code": "320382", "name": "邳州市" }
+				]
+			},
+			{
+				"code": "3204",
+				"name": "常州市",
+				"children": [
+					{ "code": "320402", "name": "天宁区" },
+					{ "code": "320404", "name": "钟楼区" },
+					{ "code": "320411", "name": "新北区" },
+					{ "code": "320412", "name": "武进区" },
+					{ "code": "320413", "name": "金坛区" },
+					{ "code": "320481", "name": "溧阳市" }
+				]
+			},
+			{
+				"code": "3205",
+				"name": "苏州市",
+				"children": [
+					{ "code": "320505", "name": "虎丘区" },
+					{ "code": "320506", "name": "吴中区" },
+					{ "code": "320507", "name": "相城区" },
+					{ "code": "320508", "name": "姑苏区" },
+					{ "code": "320509", "name": "吴江区" },
+					{ "code": "320571", "name": "苏州工业园区" },
+					{ "code": "320581", "name": "常熟市" },
+					{ "code": "320582", "name": "张家港市" },
+					{ "code": "320583", "name": "昆山市" },
+					{ "code": "320585", "name": "太仓市" }
+				]
+			},
+			{
+				"code": "3206",
+				"name": "南通市",
+				"children": [
+					{ "code": "320602", "name": "崇川区" },
+					{ "code": "320611", "name": "港闸区" },
+					{ "code": "320612", "name": "通州区" },
+					{ "code": "320623", "name": "如东县" },
+					{ "code": "320671", "name": "南通经济技术开发区" },
+					{ "code": "320681", "name": "启东市" },
+					{ "code": "320682", "name": "如皋市" },
+					{ "code": "320684", "name": "海门市" },
+					{ "code": "320685", "name": "海安市" }
+				]
+			},
+			{
+				"code": "3207",
+				"name": "连云港市",
+				"children": [
+					{ "code": "320703", "name": "连云区" },
+					{ "code": "320706", "name": "海州区" },
+					{ "code": "320707", "name": "赣榆区" },
+					{ "code": "320722", "name": "东海县" },
+					{ "code": "320723", "name": "灌云县" },
+					{ "code": "320724", "name": "灌南县" },
+					{ "code": "320771", "name": "连云港经济技术开发区" },
+					{ "code": "320772", "name": "连云港高新技术产业开发区" }
+				]
+			},
+			{
+				"code": "3208",
+				"name": "淮安市",
+				"children": [
+					{ "code": "320803", "name": "淮安区" },
+					{ "code": "320804", "name": "淮阴区" },
+					{ "code": "320812", "name": "清江浦区" },
+					{ "code": "320813", "name": "洪泽区" },
+					{ "code": "320826", "name": "涟水县" },
+					{ "code": "320830", "name": "盱眙县" },
+					{ "code": "320831", "name": "金湖县" },
+					{ "code": "320871", "name": "淮安经济技术开发区" }
+				]
+			},
+			{
+				"code": "3209",
+				"name": "盐城市",
+				"children": [
+					{ "code": "320902", "name": "亭湖区" },
+					{ "code": "320903", "name": "盐都区" },
+					{ "code": "320904", "name": "大丰区" },
+					{ "code": "320921", "name": "响水县" },
+					{ "code": "320922", "name": "滨海县" },
+					{ "code": "320923", "name": "阜宁县" },
+					{ "code": "320924", "name": "射阳县" },
+					{ "code": "320925", "name": "建湖县" },
+					{ "code": "320971", "name": "盐城经济技术开发区" },
+					{ "code": "320981", "name": "东台市" }
+				]
+			},
+			{
+				"code": "3210",
+				"name": "扬州市",
+				"children": [
+					{ "code": "321002", "name": "广陵区" },
+					{ "code": "321003", "name": "邗江区" },
+					{ "code": "321012", "name": "江都区" },
+					{ "code": "321023", "name": "宝应县" },
+					{ "code": "321071", "name": "扬州经济技术开发区" },
+					{ "code": "321081", "name": "仪征市" },
+					{ "code": "321084", "name": "高邮市" }
+				]
+			},
+			{
+				"code": "3211",
+				"name": "镇江市",
+				"children": [
+					{ "code": "321102", "name": "京口区" },
+					{ "code": "321111", "name": "润州区" },
+					{ "code": "321112", "name": "丹徒区" },
+					{ "code": "321171", "name": "镇江新区" },
+					{ "code": "321181", "name": "丹阳市" },
+					{ "code": "321182", "name": "扬中市" },
+					{ "code": "321183", "name": "句容市" }
+				]
+			},
+			{
+				"code": "3212",
+				"name": "泰州市",
+				"children": [
+					{ "code": "321202", "name": "海陵区" },
+					{ "code": "321203", "name": "高港区" },
+					{ "code": "321204", "name": "姜堰区" },
+					{ "code": "321271", "name": "泰州医药高新技术产业开发区" },
+					{ "code": "321281", "name": "兴化市" },
+					{ "code": "321282", "name": "靖江市" },
+					{ "code": "321283", "name": "泰兴市" }
+				]
+			},
+			{
+				"code": "3213",
+				"name": "宿迁市",
+				"children": [
+					{ "code": "321302", "name": "宿城区" },
+					{ "code": "321311", "name": "宿豫区" },
+					{ "code": "321322", "name": "沭阳县" },
+					{ "code": "321323", "name": "泗阳县" },
+					{ "code": "321324", "name": "泗洪县" },
+					{ "code": "321371", "name": "宿迁经济技术开发区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "33",
+		"name": "浙江省",
+		"children": [
+			{
+				"code": "3301",
+				"name": "杭州市",
+				"children": [
+					{ "code": "330102", "name": "上城区" },
+					{ "code": "330103", "name": "下城区" },
+					{ "code": "330104", "name": "江干区" },
+					{ "code": "330105", "name": "拱墅区" },
+					{ "code": "330106", "name": "西湖区" },
+					{ "code": "330108", "name": "滨江区" },
+					{ "code": "330109", "name": "萧山区" },
+					{ "code": "330110", "name": "余杭区" },
+					{ "code": "330111", "name": "富阳区" },
+					{ "code": "330112", "name": "临安区" },
+					{ "code": "330122", "name": "桐庐县" },
+					{ "code": "330127", "name": "淳安县" },
+					{ "code": "330182", "name": "建德市" }
+				]
+			},
+			{
+				"code": "3302",
+				"name": "宁波市",
+				"children": [
+					{ "code": "330203", "name": "海曙区" },
+					{ "code": "330205", "name": "江北区" },
+					{ "code": "330206", "name": "北仑区" },
+					{ "code": "330211", "name": "镇海区" },
+					{ "code": "330212", "name": "鄞州区" },
+					{ "code": "330213", "name": "奉化区" },
+					{ "code": "330225", "name": "象山县" },
+					{ "code": "330226", "name": "宁海县" },
+					{ "code": "330281", "name": "余姚市" },
+					{ "code": "330282", "name": "慈溪市" }
+				]
+			},
+			{
+				"code": "3303",
+				"name": "温州市",
+				"children": [
+					{ "code": "330302", "name": "鹿城区" },
+					{ "code": "330303", "name": "龙湾区" },
+					{ "code": "330304", "name": "瓯海区" },
+					{ "code": "330305", "name": "洞头区" },
+					{ "code": "330324", "name": "永嘉县" },
+					{ "code": "330326", "name": "平阳县" },
+					{ "code": "330327", "name": "苍南县" },
+					{ "code": "330328", "name": "文成县" },
+					{ "code": "330329", "name": "泰顺县" },
+					{ "code": "330371", "name": "温州经济技术开发区" },
+					{ "code": "330381", "name": "瑞安市" },
+					{ "code": "330382", "name": "乐清市" },
+					{ "code": "330383", "name": "龙港市" }
+				]
+			},
+			{
+				"code": "3304",
+				"name": "嘉兴市",
+				"children": [
+					{ "code": "330402", "name": "南湖区" },
+					{ "code": "330411", "name": "秀洲区" },
+					{ "code": "330421", "name": "嘉善县" },
+					{ "code": "330424", "name": "海盐县" },
+					{ "code": "330481", "name": "海宁市" },
+					{ "code": "330482", "name": "平湖市" },
+					{ "code": "330483", "name": "桐乡市" }
+				]
+			},
+			{
+				"code": "3305",
+				"name": "湖州市",
+				"children": [
+					{ "code": "330502", "name": "吴兴区" },
+					{ "code": "330503", "name": "南浔区" },
+					{ "code": "330521", "name": "德清县" },
+					{ "code": "330522", "name": "长兴县" },
+					{ "code": "330523", "name": "安吉县" }
+				]
+			},
+			{
+				"code": "3306",
+				"name": "绍兴市",
+				"children": [
+					{ "code": "330602", "name": "越城区" },
+					{ "code": "330603", "name": "柯桥区" },
+					{ "code": "330604", "name": "上虞区" },
+					{ "code": "330624", "name": "新昌县" },
+					{ "code": "330681", "name": "诸暨市" },
+					{ "code": "330683", "name": "嵊州市" }
+				]
+			},
+			{
+				"code": "3307",
+				"name": "金华市",
+				"children": [
+					{ "code": "330702", "name": "婺城区" },
+					{ "code": "330703", "name": "金东区" },
+					{ "code": "330723", "name": "武义县" },
+					{ "code": "330726", "name": "浦江县" },
+					{ "code": "330727", "name": "磐安县" },
+					{ "code": "330781", "name": "兰溪市" },
+					{ "code": "330782", "name": "义乌市" },
+					{ "code": "330783", "name": "东阳市" },
+					{ "code": "330784", "name": "永康市" }
+				]
+			},
+			{
+				"code": "3308",
+				"name": "衢州市",
+				"children": [
+					{ "code": "330802", "name": "柯城区" },
+					{ "code": "330803", "name": "衢江区" },
+					{ "code": "330822", "name": "常山县" },
+					{ "code": "330824", "name": "开化县" },
+					{ "code": "330825", "name": "龙游县" },
+					{ "code": "330881", "name": "江山市" }
+				]
+			},
+			{
+				"code": "3309",
+				"name": "舟山市",
+				"children": [
+					{ "code": "330902", "name": "定海区" },
+					{ "code": "330903", "name": "普陀区" },
+					{ "code": "330921", "name": "岱山县" },
+					{ "code": "330922", "name": "嵊泗县" }
+				]
+			},
+			{
+				"code": "3310",
+				"name": "台州市",
+				"children": [
+					{ "code": "331002", "name": "椒江区" },
+					{ "code": "331003", "name": "黄岩区" },
+					{ "code": "331004", "name": "路桥区" },
+					{ "code": "331022", "name": "三门县" },
+					{ "code": "331023", "name": "天台县" },
+					{ "code": "331024", "name": "仙居县" },
+					{ "code": "331081", "name": "温岭市" },
+					{ "code": "331082", "name": "临海市" },
+					{ "code": "331083", "name": "玉环市" }
+				]
+			},
+			{
+				"code": "3311",
+				"name": "丽水市",
+				"children": [
+					{ "code": "331102", "name": "莲都区" },
+					{ "code": "331121", "name": "青田县" },
+					{ "code": "331122", "name": "缙云县" },
+					{ "code": "331123", "name": "遂昌县" },
+					{ "code": "331124", "name": "松阳县" },
+					{ "code": "331125", "name": "云和县" },
+					{ "code": "331126", "name": "庆元县" },
+					{ "code": "331127", "name": "景宁畲族自治县" },
+					{ "code": "331181", "name": "龙泉市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "34",
+		"name": "安徽省",
+		"children": [
+			{
+				"code": "3401",
+				"name": "合肥市",
+				"children": [
+					{ "code": "340102", "name": "瑶海区" },
+					{ "code": "340103", "name": "庐阳区" },
+					{ "code": "340104", "name": "蜀山区" },
+					{ "code": "340111", "name": "包河区" },
+					{ "code": "340121", "name": "长丰县" },
+					{ "code": "340122", "name": "肥东县" },
+					{ "code": "340123", "name": "肥西县" },
+					{ "code": "340124", "name": "庐江县" },
+					{ "code": "340171", "name": "合肥高新技术产业开发区" },
+					{ "code": "340172", "name": "合肥经济技术开发区" },
+					{ "code": "340173", "name": "合肥新站高新技术产业开发区" },
+					{ "code": "340181", "name": "巢湖市" }
+				]
+			},
+			{
+				"code": "3402",
+				"name": "芜湖市",
+				"children": [
+					{ "code": "340202", "name": "镜湖区" },
+					{ "code": "340203", "name": "弋江区" },
+					{ "code": "340207", "name": "鸠江区" },
+					{ "code": "340208", "name": "三山区" },
+					{ "code": "340221", "name": "芜湖县" },
+					{ "code": "340222", "name": "繁昌县" },
+					{ "code": "340223", "name": "南陵县" },
+					{ "code": "340225", "name": "无为县" },
+					{ "code": "340271", "name": "芜湖经济技术开发区" },
+					{ "code": "340272", "name": "安徽芜湖长江大桥经济开发区" }
+				]
+			},
+			{
+				"code": "3403",
+				"name": "蚌埠市",
+				"children": [
+					{ "code": "340302", "name": "龙子湖区" },
+					{ "code": "340303", "name": "蚌山区" },
+					{ "code": "340304", "name": "禹会区" },
+					{ "code": "340311", "name": "淮上区" },
+					{ "code": "340321", "name": "怀远县" },
+					{ "code": "340322", "name": "五河县" },
+					{ "code": "340323", "name": "固镇县" },
+					{ "code": "340371", "name": "蚌埠市高新技术开发区" },
+					{ "code": "340372", "name": "蚌埠市经济开发区" }
+				]
+			},
+			{
+				"code": "3404",
+				"name": "淮南市",
+				"children": [
+					{ "code": "340402", "name": "大通区" },
+					{ "code": "340403", "name": "田家庵区" },
+					{ "code": "340404", "name": "谢家集区" },
+					{ "code": "340405", "name": "八公山区" },
+					{ "code": "340406", "name": "潘集区" },
+					{ "code": "340421", "name": "凤台县" },
+					{ "code": "340422", "name": "寿县" }
+				]
+			},
+			{
+				"code": "3405",
+				"name": "马鞍山市",
+				"children": [
+					{ "code": "340503", "name": "花山区" },
+					{ "code": "340504", "name": "雨山区" },
+					{ "code": "340506", "name": "博望区" },
+					{ "code": "340521", "name": "当涂县" },
+					{ "code": "340522", "name": "含山县" },
+					{ "code": "340523", "name": "和县" }
+				]
+			},
+			{
+				"code": "3406",
+				"name": "淮北市",
+				"children": [
+					{ "code": "340602", "name": "杜集区" },
+					{ "code": "340603", "name": "相山区" },
+					{ "code": "340604", "name": "烈山区" },
+					{ "code": "340621", "name": "濉溪县" }
+				]
+			},
+			{
+				"code": "3407",
+				"name": "铜陵市",
+				"children": [
+					{ "code": "340705", "name": "铜官区" },
+					{ "code": "340706", "name": "义安区" },
+					{ "code": "340711", "name": "郊区" },
+					{ "code": "340722", "name": "枞阳县" }
+				]
+			},
+			{
+				"code": "3408",
+				"name": "安庆市",
+				"children": [
+					{ "code": "340802", "name": "迎江区" },
+					{ "code": "340803", "name": "大观区" },
+					{ "code": "340811", "name": "宜秀区" },
+					{ "code": "340822", "name": "怀宁县" },
+					{ "code": "340825", "name": "太湖县" },
+					{ "code": "340826", "name": "宿松县" },
+					{ "code": "340827", "name": "望江县" },
+					{ "code": "340828", "name": "岳西县" },
+					{ "code": "340871", "name": "安徽安庆经济开发区" },
+					{ "code": "340881", "name": "桐城市" },
+					{ "code": "340882", "name": "潜山市" }
+				]
+			},
+			{
+				"code": "3410",
+				"name": "黄山市",
+				"children": [
+					{ "code": "341002", "name": "屯溪区" },
+					{ "code": "341003", "name": "黄山区" },
+					{ "code": "341004", "name": "徽州区" },
+					{ "code": "341021", "name": "歙县" },
+					{ "code": "341022", "name": "休宁县" },
+					{ "code": "341023", "name": "黟县" },
+					{ "code": "341024", "name": "祁门县" }
+				]
+			},
+			{
+				"code": "3411",
+				"name": "滁州市",
+				"children": [
+					{ "code": "341102", "name": "琅琊区" },
+					{ "code": "341103", "name": "南谯区" },
+					{ "code": "341122", "name": "来安县" },
+					{ "code": "341124", "name": "全椒县" },
+					{ "code": "341125", "name": "定远县" },
+					{ "code": "341126", "name": "凤阳县" },
+					{ "code": "341171", "name": "苏滁现代产业园" },
+					{ "code": "341172", "name": "滁州经济技术开发区" },
+					{ "code": "341181", "name": "天长市" },
+					{ "code": "341182", "name": "明光市" }
+				]
+			},
+			{
+				"code": "3412",
+				"name": "阜阳市",
+				"children": [
+					{ "code": "341202", "name": "颍州区" },
+					{ "code": "341203", "name": "颍东区" },
+					{ "code": "341204", "name": "颍泉区" },
+					{ "code": "341221", "name": "临泉县" },
+					{ "code": "341222", "name": "太和县" },
+					{ "code": "341225", "name": "阜南县" },
+					{ "code": "341226", "name": "颍上县" },
+					{ "code": "341271", "name": "阜阳合肥现代产业园区" },
+					{ "code": "341272", "name": "阜阳经济技术开发区" },
+					{ "code": "341282", "name": "界首市" }
+				]
+			},
+			{
+				"code": "3413",
+				"name": "宿州市",
+				"children": [
+					{ "code": "341302", "name": "埇桥区" },
+					{ "code": "341321", "name": "砀山县" },
+					{ "code": "341322", "name": "萧县" },
+					{ "code": "341323", "name": "灵璧县" },
+					{ "code": "341324", "name": "泗县" },
+					{ "code": "341371", "name": "宿州马鞍山现代产业园区" },
+					{ "code": "341372", "name": "宿州经济技术开发区" }
+				]
+			},
+			{
+				"code": "3415",
+				"name": "六安市",
+				"children": [
+					{ "code": "341502", "name": "金安区" },
+					{ "code": "341503", "name": "裕安区" },
+					{ "code": "341504", "name": "叶集区" },
+					{ "code": "341522", "name": "霍邱县" },
+					{ "code": "341523", "name": "舒城县" },
+					{ "code": "341524", "name": "金寨县" },
+					{ "code": "341525", "name": "霍山县" }
+				]
+			},
+			{
+				"code": "3416",
+				"name": "亳州市",
+				"children": [
+					{ "code": "341602", "name": "谯城区" },
+					{ "code": "341621", "name": "涡阳县" },
+					{ "code": "341622", "name": "蒙城县" },
+					{ "code": "341623", "name": "利辛县" }
+				]
+			},
+			{
+				"code": "3417",
+				"name": "池州市",
+				"children": [
+					{ "code": "341702", "name": "贵池区" },
+					{ "code": "341721", "name": "东至县" },
+					{ "code": "341722", "name": "石台县" },
+					{ "code": "341723", "name": "青阳县" }
+				]
+			},
+			{
+				"code": "3418",
+				"name": "宣城市",
+				"children": [
+					{ "code": "341802", "name": "宣州区" },
+					{ "code": "341821", "name": "郎溪县" },
+					{ "code": "341823", "name": "泾县" },
+					{ "code": "341824", "name": "绩溪县" },
+					{ "code": "341825", "name": "旌德县" },
+					{ "code": "341871", "name": "宣城市经济开发区" },
+					{ "code": "341881", "name": "宁国市" },
+					{ "code": "341882", "name": "广德市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "35",
+		"name": "福建省",
+		"children": [
+			{
+				"code": "3501",
+				"name": "福州市",
+				"children": [
+					{ "code": "350102", "name": "鼓楼区" },
+					{ "code": "350103", "name": "台江区" },
+					{ "code": "350104", "name": "仓山区" },
+					{ "code": "350105", "name": "马尾区" },
+					{ "code": "350111", "name": "晋安区" },
+					{ "code": "350112", "name": "长乐区" },
+					{ "code": "350121", "name": "闽侯县" },
+					{ "code": "350122", "name": "连江县" },
+					{ "code": "350123", "name": "罗源县" },
+					{ "code": "350124", "name": "闽清县" },
+					{ "code": "350125", "name": "永泰县" },
+					{ "code": "350128", "name": "平潭县" },
+					{ "code": "350181", "name": "福清市" }
+				]
+			},
+			{
+				"code": "3502",
+				"name": "厦门市",
+				"children": [
+					{ "code": "350203", "name": "思明区" },
+					{ "code": "350205", "name": "海沧区" },
+					{ "code": "350206", "name": "湖里区" },
+					{ "code": "350211", "name": "集美区" },
+					{ "code": "350212", "name": "同安区" },
+					{ "code": "350213", "name": "翔安区" }
+				]
+			},
+			{
+				"code": "3503",
+				"name": "莆田市",
+				"children": [
+					{ "code": "350302", "name": "城厢区" },
+					{ "code": "350303", "name": "涵江区" },
+					{ "code": "350304", "name": "荔城区" },
+					{ "code": "350305", "name": "秀屿区" },
+					{ "code": "350322", "name": "仙游县" }
+				]
+			},
+			{
+				"code": "3504",
+				"name": "三明市",
+				"children": [
+					{ "code": "350402", "name": "梅列区" },
+					{ "code": "350403", "name": "三元区" },
+					{ "code": "350421", "name": "明溪县" },
+					{ "code": "350423", "name": "清流县" },
+					{ "code": "350424", "name": "宁化县" },
+					{ "code": "350425", "name": "大田县" },
+					{ "code": "350426", "name": "尤溪县" },
+					{ "code": "350427", "name": "沙县" },
+					{ "code": "350428", "name": "将乐县" },
+					{ "code": "350429", "name": "泰宁县" },
+					{ "code": "350430", "name": "建宁县" },
+					{ "code": "350481", "name": "永安市" }
+				]
+			},
+			{
+				"code": "3505",
+				"name": "泉州市",
+				"children": [
+					{ "code": "350502", "name": "鲤城区" },
+					{ "code": "350503", "name": "丰泽区" },
+					{ "code": "350504", "name": "洛江区" },
+					{ "code": "350505", "name": "泉港区" },
+					{ "code": "350521", "name": "惠安县" },
+					{ "code": "350524", "name": "安溪县" },
+					{ "code": "350525", "name": "永春县" },
+					{ "code": "350526", "name": "德化县" },
+					{ "code": "350527", "name": "金门县" },
+					{ "code": "350581", "name": "石狮市" },
+					{ "code": "350582", "name": "晋江市" },
+					{ "code": "350583", "name": "南安市" }
+				]
+			},
+			{
+				"code": "3506",
+				"name": "漳州市",
+				"children": [
+					{ "code": "350602", "name": "芗城区" },
+					{ "code": "350603", "name": "龙文区" },
+					{ "code": "350622", "name": "云霄县" },
+					{ "code": "350623", "name": "漳浦县" },
+					{ "code": "350624", "name": "诏安县" },
+					{ "code": "350625", "name": "长泰县" },
+					{ "code": "350626", "name": "东山县" },
+					{ "code": "350627", "name": "南靖县" },
+					{ "code": "350628", "name": "平和县" },
+					{ "code": "350629", "name": "华安县" },
+					{ "code": "350681", "name": "龙海市" }
+				]
+			},
+			{
+				"code": "3507",
+				"name": "南平市",
+				"children": [
+					{ "code": "350702", "name": "延平区" },
+					{ "code": "350703", "name": "建阳区" },
+					{ "code": "350721", "name": "顺昌县" },
+					{ "code": "350722", "name": "浦城县" },
+					{ "code": "350723", "name": "光泽县" },
+					{ "code": "350724", "name": "松溪县" },
+					{ "code": "350725", "name": "政和县" },
+					{ "code": "350781", "name": "邵武市" },
+					{ "code": "350782", "name": "武夷山市" },
+					{ "code": "350783", "name": "建瓯市" }
+				]
+			},
+			{
+				"code": "3508",
+				"name": "龙岩市",
+				"children": [
+					{ "code": "350802", "name": "新罗区" },
+					{ "code": "350803", "name": "永定区" },
+					{ "code": "350821", "name": "长汀县" },
+					{ "code": "350823", "name": "上杭县" },
+					{ "code": "350824", "name": "武平县" },
+					{ "code": "350825", "name": "连城县" },
+					{ "code": "350881", "name": "漳平市" }
+				]
+			},
+			{
+				"code": "3509",
+				"name": "宁德市",
+				"children": [
+					{ "code": "350902", "name": "蕉城区" },
+					{ "code": "350921", "name": "霞浦县" },
+					{ "code": "350922", "name": "古田县" },
+					{ "code": "350923", "name": "屏南县" },
+					{ "code": "350924", "name": "寿宁县" },
+					{ "code": "350925", "name": "周宁县" },
+					{ "code": "350926", "name": "柘荣县" },
+					{ "code": "350981", "name": "福安市" },
+					{ "code": "350982", "name": "福鼎市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "36",
+		"name": "江西省",
+		"children": [
+			{
+				"code": "3601",
+				"name": "南昌市",
+				"children": [
+					{ "code": "360102", "name": "东湖区" },
+					{ "code": "360103", "name": "西湖区" },
+					{ "code": "360104", "name": "青云谱区" },
+					{ "code": "360105", "name": "湾里区" },
+					{ "code": "360111", "name": "青山湖区" },
+					{ "code": "360112", "name": "新建区" },
+					{ "code": "360121", "name": "南昌县" },
+					{ "code": "360123", "name": "安义县" },
+					{ "code": "360124", "name": "进贤县" }
+				]
+			},
+			{
+				"code": "3602",
+				"name": "景德镇市",
+				"children": [
+					{ "code": "360202", "name": "昌江区" },
+					{ "code": "360203", "name": "珠山区" },
+					{ "code": "360222", "name": "浮梁县" },
+					{ "code": "360281", "name": "乐平市" }
+				]
+			},
+			{
+				"code": "3603",
+				"name": "萍乡市",
+				"children": [
+					{ "code": "360302", "name": "安源区" },
+					{ "code": "360313", "name": "湘东区" },
+					{ "code": "360321", "name": "莲花县" },
+					{ "code": "360322", "name": "上栗县" },
+					{ "code": "360323", "name": "芦溪县" }
+				]
+			},
+			{
+				"code": "3604",
+				"name": "九江市",
+				"children": [
+					{ "code": "360402", "name": "濂溪区" },
+					{ "code": "360403", "name": "浔阳区" },
+					{ "code": "360404", "name": "柴桑区" },
+					{ "code": "360423", "name": "武宁县" },
+					{ "code": "360424", "name": "修水县" },
+					{ "code": "360425", "name": "永修县" },
+					{ "code": "360426", "name": "德安县" },
+					{ "code": "360428", "name": "都昌县" },
+					{ "code": "360429", "name": "湖口县" },
+					{ "code": "360430", "name": "彭泽县" },
+					{ "code": "360481", "name": "瑞昌市" },
+					{ "code": "360482", "name": "共青城市" },
+					{ "code": "360483", "name": "庐山市" }
+				]
+			},
+			{
+				"code": "3605",
+				"name": "新余市",
+				"children": [
+					{ "code": "360502", "name": "渝水区" },
+					{ "code": "360521", "name": "分宜县" }
+				]
+			},
+			{
+				"code": "3606",
+				"name": "鹰潭市",
+				"children": [
+					{ "code": "360602", "name": "月湖区" },
+					{ "code": "360603", "name": "余江区" },
+					{ "code": "360681", "name": "贵溪市" }
+				]
+			},
+			{
+				"code": "3607",
+				"name": "赣州市",
+				"children": [
+					{ "code": "360702", "name": "章贡区" },
+					{ "code": "360703", "name": "南康区" },
+					{ "code": "360704", "name": "赣县区" },
+					{ "code": "360722", "name": "信丰县" },
+					{ "code": "360723", "name": "大余县" },
+					{ "code": "360724", "name": "上犹县" },
+					{ "code": "360725", "name": "崇义县" },
+					{ "code": "360726", "name": "安远县" },
+					{ "code": "360727", "name": "龙南县" },
+					{ "code": "360728", "name": "定南县" },
+					{ "code": "360729", "name": "全南县" },
+					{ "code": "360730", "name": "宁都县" },
+					{ "code": "360731", "name": "于都县" },
+					{ "code": "360732", "name": "兴国县" },
+					{ "code": "360733", "name": "会昌县" },
+					{ "code": "360734", "name": "寻乌县" },
+					{ "code": "360735", "name": "石城县" },
+					{ "code": "360781", "name": "瑞金市" }
+				]
+			},
+			{
+				"code": "3608",
+				"name": "吉安市",
+				"children": [
+					{ "code": "360802", "name": "吉州区" },
+					{ "code": "360803", "name": "青原区" },
+					{ "code": "360821", "name": "吉安县" },
+					{ "code": "360822", "name": "吉水县" },
+					{ "code": "360823", "name": "峡江县" },
+					{ "code": "360824", "name": "新干县" },
+					{ "code": "360825", "name": "永丰县" },
+					{ "code": "360826", "name": "泰和县" },
+					{ "code": "360827", "name": "遂川县" },
+					{ "code": "360828", "name": "万安县" },
+					{ "code": "360829", "name": "安福县" },
+					{ "code": "360830", "name": "永新县" },
+					{ "code": "360881", "name": "井冈山市" }
+				]
+			},
+			{
+				"code": "3609",
+				"name": "宜春市",
+				"children": [
+					{ "code": "360902", "name": "袁州区" },
+					{ "code": "360921", "name": "奉新县" },
+					{ "code": "360922", "name": "万载县" },
+					{ "code": "360923", "name": "上高县" },
+					{ "code": "360924", "name": "宜丰县" },
+					{ "code": "360925", "name": "靖安县" },
+					{ "code": "360926", "name": "铜鼓县" },
+					{ "code": "360981", "name": "丰城市" },
+					{ "code": "360982", "name": "樟树市" },
+					{ "code": "360983", "name": "高安市" }
+				]
+			},
+			{
+				"code": "3610",
+				"name": "抚州市",
+				"children": [
+					{ "code": "361002", "name": "临川区" },
+					{ "code": "361003", "name": "东乡区" },
+					{ "code": "361021", "name": "南城县" },
+					{ "code": "361022", "name": "黎川县" },
+					{ "code": "361023", "name": "南丰县" },
+					{ "code": "361024", "name": "崇仁县" },
+					{ "code": "361025", "name": "乐安县" },
+					{ "code": "361026", "name": "宜黄县" },
+					{ "code": "361027", "name": "金溪县" },
+					{ "code": "361028", "name": "资溪县" },
+					{ "code": "361030", "name": "广昌县" }
+				]
+			},
+			{
+				"code": "3611",
+				"name": "上饶市",
+				"children": [
+					{ "code": "361102", "name": "信州区" },
+					{ "code": "361103", "name": "广丰区" },
+					{ "code": "361104", "name": "广信区" },
+					{ "code": "361123", "name": "玉山县" },
+					{ "code": "361124", "name": "铅山县" },
+					{ "code": "361125", "name": "横峰县" },
+					{ "code": "361126", "name": "弋阳县" },
+					{ "code": "361127", "name": "余干县" },
+					{ "code": "361128", "name": "鄱阳县" },
+					{ "code": "361129", "name": "万年县" },
+					{ "code": "361130", "name": "婺源县" },
+					{ "code": "361181", "name": "德兴市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "37",
+		"name": "山东省",
+		"children": [
+			{
+				"code": "3701",
+				"name": "济南市",
+				"children": [
+					{ "code": "370102", "name": "历下区" },
+					{ "code": "370103", "name": "市中区" },
+					{ "code": "370104", "name": "槐荫区" },
+					{ "code": "370105", "name": "天桥区" },
+					{ "code": "370112", "name": "历城区" },
+					{ "code": "370113", "name": "长清区" },
+					{ "code": "370114", "name": "章丘区" },
+					{ "code": "370115", "name": "济阳区" },
+					{ "code": "370116", "name": "莱芜区" },
+					{ "code": "370117", "name": "钢城区" },
+					{ "code": "370124", "name": "平阴县" },
+					{ "code": "370126", "name": "商河县" },
+					{ "code": "370171", "name": "济南高新技术产业开发区" }
+				]
+			},
+			{
+				"code": "3702",
+				"name": "青岛市",
+				"children": [
+					{ "code": "370202", "name": "市南区" },
+					{ "code": "370203", "name": "市北区" },
+					{ "code": "370211", "name": "黄岛区" },
+					{ "code": "370212", "name": "崂山区" },
+					{ "code": "370213", "name": "李沧区" },
+					{ "code": "370214", "name": "城阳区" },
+					{ "code": "370215", "name": "即墨区" },
+					{ "code": "370271", "name": "青岛高新技术产业开发区" },
+					{ "code": "370281", "name": "胶州市" },
+					{ "code": "370283", "name": "平度市" },
+					{ "code": "370285", "name": "莱西市" }
+				]
+			},
+			{
+				"code": "3703",
+				"name": "淄博市",
+				"children": [
+					{ "code": "370302", "name": "淄川区" },
+					{ "code": "370303", "name": "张店区" },
+					{ "code": "370304", "name": "博山区" },
+					{ "code": "370305", "name": "临淄区" },
+					{ "code": "370306", "name": "周村区" },
+					{ "code": "370321", "name": "桓台县" },
+					{ "code": "370322", "name": "高青县" },
+					{ "code": "370323", "name": "沂源县" }
+				]
+			},
+			{
+				"code": "3704",
+				"name": "枣庄市",
+				"children": [
+					{ "code": "370402", "name": "市中区" },
+					{ "code": "370403", "name": "薛城区" },
+					{ "code": "370404", "name": "峄城区" },
+					{ "code": "370405", "name": "台儿庄区" },
+					{ "code": "370406", "name": "山亭区" },
+					{ "code": "370481", "name": "滕州市" }
+				]
+			},
+			{
+				"code": "3705",
+				"name": "东营市",
+				"children": [
+					{ "code": "370502", "name": "东营区" },
+					{ "code": "370503", "name": "河口区" },
+					{ "code": "370505", "name": "垦利区" },
+					{ "code": "370522", "name": "利津县" },
+					{ "code": "370523", "name": "广饶县" },
+					{ "code": "370571", "name": "东营经济技术开发区" },
+					{ "code": "370572", "name": "东营港经济开发区" }
+				]
+			},
+			{
+				"code": "3706",
+				"name": "烟台市",
+				"children": [
+					{ "code": "370602", "name": "芝罘区" },
+					{ "code": "370611", "name": "福山区" },
+					{ "code": "370612", "name": "牟平区" },
+					{ "code": "370613", "name": "莱山区" },
+					{ "code": "370634", "name": "长岛县" },
+					{ "code": "370671", "name": "烟台高新技术产业开发区" },
+					{ "code": "370672", "name": "烟台经济技术开发区" },
+					{ "code": "370681", "name": "龙口市" },
+					{ "code": "370682", "name": "莱阳市" },
+					{ "code": "370683", "name": "莱州市" },
+					{ "code": "370684", "name": "蓬莱市" },
+					{ "code": "370685", "name": "招远市" },
+					{ "code": "370686", "name": "栖霞市" },
+					{ "code": "370687", "name": "海阳市" }
+				]
+			},
+			{
+				"code": "3707",
+				"name": "潍坊市",
+				"children": [
+					{ "code": "370702", "name": "潍城区" },
+					{ "code": "370703", "name": "寒亭区" },
+					{ "code": "370704", "name": "坊子区" },
+					{ "code": "370705", "name": "奎文区" },
+					{ "code": "370724", "name": "临朐县" },
+					{ "code": "370725", "name": "昌乐县" },
+					{ "code": "370772", "name": "潍坊滨海经济技术开发区" },
+					{ "code": "370781", "name": "青州市" },
+					{ "code": "370782", "name": "诸城市" },
+					{ "code": "370783", "name": "寿光市" },
+					{ "code": "370784", "name": "安丘市" },
+					{ "code": "370785", "name": "高密市" },
+					{ "code": "370786", "name": "昌邑市" }
+				]
+			},
+			{
+				"code": "3708",
+				"name": "济宁市",
+				"children": [
+					{ "code": "370811", "name": "任城区" },
+					{ "code": "370812", "name": "兖州区" },
+					{ "code": "370826", "name": "微山县" },
+					{ "code": "370827", "name": "鱼台县" },
+					{ "code": "370828", "name": "金乡县" },
+					{ "code": "370829", "name": "嘉祥县" },
+					{ "code": "370830", "name": "汶上县" },
+					{ "code": "370831", "name": "泗水县" },
+					{ "code": "370832", "name": "梁山县" },
+					{ "code": "370871", "name": "济宁高新技术产业开发区" },
+					{ "code": "370881", "name": "曲阜市" },
+					{ "code": "370883", "name": "邹城市" }
+				]
+			},
+			{
+				"code": "3709",
+				"name": "泰安市",
+				"children": [
+					{ "code": "370902", "name": "泰山区" },
+					{ "code": "370911", "name": "岱岳区" },
+					{ "code": "370921", "name": "宁阳县" },
+					{ "code": "370923", "name": "东平县" },
+					{ "code": "370982", "name": "新泰市" },
+					{ "code": "370983", "name": "肥城市" }
+				]
+			},
+			{
+				"code": "3710",
+				"name": "威海市",
+				"children": [
+					{ "code": "371002", "name": "环翠区" },
+					{ "code": "371003", "name": "文登区" },
+					{ "code": "371071", "name": "威海火炬高技术产业开发区" },
+					{ "code": "371072", "name": "威海经济技术开发区" },
+					{ "code": "371073", "name": "威海临港经济技术开发区" },
+					{ "code": "371082", "name": "荣成市" },
+					{ "code": "371083", "name": "乳山市" }
+				]
+			},
+			{
+				"code": "3711",
+				"name": "日照市",
+				"children": [
+					{ "code": "371102", "name": "东港区" },
+					{ "code": "371103", "name": "岚山区" },
+					{ "code": "371121", "name": "五莲县" },
+					{ "code": "371122", "name": "莒县" },
+					{ "code": "371171", "name": "日照经济技术开发区" }
+				]
+			},
+			{
+				"code": "3713",
+				"name": "临沂市",
+				"children": [
+					{ "code": "371302", "name": "兰山区" },
+					{ "code": "371311", "name": "罗庄区" },
+					{ "code": "371312", "name": "河东区" },
+					{ "code": "371321", "name": "沂南县" },
+					{ "code": "371322", "name": "郯城县" },
+					{ "code": "371323", "name": "沂水县" },
+					{ "code": "371324", "name": "兰陵县" },
+					{ "code": "371325", "name": "费县" },
+					{ "code": "371326", "name": "平邑县" },
+					{ "code": "371327", "name": "莒南县" },
+					{ "code": "371328", "name": "蒙阴县" },
+					{ "code": "371329", "name": "临沭县" },
+					{ "code": "371371", "name": "临沂高新技术产业开发区" },
+					{ "code": "371372", "name": "临沂经济技术开发区" },
+					{ "code": "371373", "name": "临沂临港经济开发区" }
+				]
+			},
+			{
+				"code": "3714",
+				"name": "德州市",
+				"children": [
+					{ "code": "371402", "name": "德城区" },
+					{ "code": "371403", "name": "陵城区" },
+					{ "code": "371422", "name": "宁津县" },
+					{ "code": "371423", "name": "庆云县" },
+					{ "code": "371424", "name": "临邑县" },
+					{ "code": "371425", "name": "齐河县" },
+					{ "code": "371426", "name": "平原县" },
+					{ "code": "371427", "name": "夏津县" },
+					{ "code": "371428", "name": "武城县" },
+					{ "code": "371471", "name": "德州经济技术开发区" },
+					{ "code": "371472", "name": "德州运河经济开发区" },
+					{ "code": "371481", "name": "乐陵市" },
+					{ "code": "371482", "name": "禹城市" }
+				]
+			},
+			{
+				"code": "3715",
+				"name": "聊城市",
+				"children": [
+					{ "code": "371502", "name": "东昌府区" },
+					{ "code": "371503", "name": "茌平区" },
+					{ "code": "371521", "name": "阳谷县" },
+					{ "code": "371522", "name": "莘县" },
+					{ "code": "371524", "name": "东阿县" },
+					{ "code": "371525", "name": "冠县" },
+					{ "code": "371526", "name": "高唐县" },
+					{ "code": "371581", "name": "临清市" }
+				]
+			},
+			{
+				"code": "3716",
+				"name": "滨州市",
+				"children": [
+					{ "code": "371602", "name": "滨城区" },
+					{ "code": "371603", "name": "沾化区" },
+					{ "code": "371621", "name": "惠民县" },
+					{ "code": "371622", "name": "阳信县" },
+					{ "code": "371623", "name": "无棣县" },
+					{ "code": "371625", "name": "博兴县" },
+					{ "code": "371681", "name": "邹平市" }
+				]
+			},
+			{
+				"code": "3717",
+				"name": "菏泽市",
+				"children": [
+					{ "code": "371702", "name": "牡丹区" },
+					{ "code": "371703", "name": "定陶区" },
+					{ "code": "371721", "name": "曹县" },
+					{ "code": "371722", "name": "单县" },
+					{ "code": "371723", "name": "成武县" },
+					{ "code": "371724", "name": "巨野县" },
+					{ "code": "371725", "name": "郓城县" },
+					{ "code": "371726", "name": "鄄城县" },
+					{ "code": "371728", "name": "东明县" },
+					{ "code": "371771", "name": "菏泽经济技术开发区" },
+					{ "code": "371772", "name": "菏泽高新技术开发区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "41",
+		"name": "河南省",
+		"children": [
+			{
+				"code": "4101",
+				"name": "郑州市",
+				"children": [
+					{ "code": "410102", "name": "中原区" },
+					{ "code": "410103", "name": "二七区" },
+					{ "code": "410104", "name": "管城回族区" },
+					{ "code": "410105", "name": "金水区" },
+					{ "code": "410106", "name": "上街区" },
+					{ "code": "410108", "name": "惠济区" },
+					{ "code": "410122", "name": "中牟县" },
+					{ "code": "410171", "name": "郑州经济技术开发区" },
+					{ "code": "410172", "name": "郑州高新技术产业开发区" },
+					{ "code": "410173", "name": "郑州航空港经济综合实验区" },
+					{ "code": "410181", "name": "巩义市" },
+					{ "code": "410182", "name": "荥阳市" },
+					{ "code": "410183", "name": "新密市" },
+					{ "code": "410184", "name": "新郑市" },
+					{ "code": "410185", "name": "登封市" }
+				]
+			},
+			{
+				"code": "4102",
+				"name": "开封市",
+				"children": [
+					{ "code": "410202", "name": "龙亭区" },
+					{ "code": "410203", "name": "顺河回族区" },
+					{ "code": "410204", "name": "鼓楼区" },
+					{ "code": "410205", "name": "禹王台区" },
+					{ "code": "410212", "name": "祥符区" },
+					{ "code": "410221", "name": "杞县" },
+					{ "code": "410222", "name": "通许县" },
+					{ "code": "410223", "name": "尉氏县" },
+					{ "code": "410225", "name": "兰考县" }
+				]
+			},
+			{
+				"code": "4103",
+				"name": "洛阳市",
+				"children": [
+					{ "code": "410302", "name": "老城区" },
+					{ "code": "410303", "name": "西工区" },
+					{ "code": "410304", "name": "瀍河回族区" },
+					{ "code": "410305", "name": "涧西区" },
+					{ "code": "410306", "name": "吉利区" },
+					{ "code": "410311", "name": "洛龙区" },
+					{ "code": "410322", "name": "孟津县" },
+					{ "code": "410323", "name": "新安县" },
+					{ "code": "410324", "name": "栾川县" },
+					{ "code": "410325", "name": "嵩县" },
+					{ "code": "410326", "name": "汝阳县" },
+					{ "code": "410327", "name": "宜阳县" },
+					{ "code": "410328", "name": "洛宁县" },
+					{ "code": "410329", "name": "伊川县" },
+					{ "code": "410371", "name": "洛阳高新技术产业开发区" },
+					{ "code": "410381", "name": "偃师市" }
+				]
+			},
+			{
+				"code": "4104",
+				"name": "平顶山市",
+				"children": [
+					{ "code": "410402", "name": "新华区" },
+					{ "code": "410403", "name": "卫东区" },
+					{ "code": "410404", "name": "石龙区" },
+					{ "code": "410411", "name": "湛河区" },
+					{ "code": "410421", "name": "宝丰县" },
+					{ "code": "410422", "name": "叶县" },
+					{ "code": "410423", "name": "鲁山县" },
+					{ "code": "410425", "name": "郏县" },
+					{ "code": "410471", "name": "平顶山高新技术产业开发区" },
+					{ "code": "410472", "name": "平顶山市城乡一体化示范区" },
+					{ "code": "410481", "name": "舞钢市" },
+					{ "code": "410482", "name": "汝州市" }
+				]
+			},
+			{
+				"code": "4105",
+				"name": "安阳市",
+				"children": [
+					{ "code": "410502", "name": "文峰区" },
+					{ "code": "410503", "name": "北关区" },
+					{ "code": "410505", "name": "殷都区" },
+					{ "code": "410506", "name": "龙安区" },
+					{ "code": "410522", "name": "安阳县" },
+					{ "code": "410523", "name": "汤阴县" },
+					{ "code": "410526", "name": "滑县" },
+					{ "code": "410527", "name": "内黄县" },
+					{ "code": "410571", "name": "安阳高新技术产业开发区" },
+					{ "code": "410581", "name": "林州市" }
+				]
+			},
+			{
+				"code": "4106",
+				"name": "鹤壁市",
+				"children": [
+					{ "code": "410602", "name": "鹤山区" },
+					{ "code": "410603", "name": "山城区" },
+					{ "code": "410611", "name": "淇滨区" },
+					{ "code": "410621", "name": "浚县" },
+					{ "code": "410622", "name": "淇县" },
+					{ "code": "410671", "name": "鹤壁经济技术开发区" }
+				]
+			},
+			{
+				"code": "4107",
+				"name": "新乡市",
+				"children": [
+					{ "code": "410702", "name": "红旗区" },
+					{ "code": "410703", "name": "卫滨区" },
+					{ "code": "410704", "name": "凤泉区" },
+					{ "code": "410711", "name": "牧野区" },
+					{ "code": "410721", "name": "新乡县" },
+					{ "code": "410724", "name": "获嘉县" },
+					{ "code": "410725", "name": "原阳县" },
+					{ "code": "410726", "name": "延津县" },
+					{ "code": "410727", "name": "封丘县" },
+					{ "code": "410771", "name": "新乡高新技术产业开发区" },
+					{ "code": "410772", "name": "新乡经济技术开发区" },
+					{ "code": "410773", "name": "新乡市平原城乡一体化示范区" },
+					{ "code": "410781", "name": "卫辉市" },
+					{ "code": "410782", "name": "辉县市" },
+					{ "code": "410783", "name": "长垣市" }
+				]
+			},
+			{
+				"code": "4108",
+				"name": "焦作市",
+				"children": [
+					{ "code": "410802", "name": "解放区" },
+					{ "code": "410803", "name": "中站区" },
+					{ "code": "410804", "name": "马村区" },
+					{ "code": "410811", "name": "山阳区" },
+					{ "code": "410821", "name": "修武县" },
+					{ "code": "410822", "name": "博爱县" },
+					{ "code": "410823", "name": "武陟县" },
+					{ "code": "410825", "name": "温县" },
+					{ "code": "410871", "name": "焦作城乡一体化示范区" },
+					{ "code": "410882", "name": "沁阳市" },
+					{ "code": "410883", "name": "孟州市" }
+				]
+			},
+			{
+				"code": "4109",
+				"name": "濮阳市",
+				"children": [
+					{ "code": "410902", "name": "华龙区" },
+					{ "code": "410922", "name": "清丰县" },
+					{ "code": "410923", "name": "南乐县" },
+					{ "code": "410926", "name": "范县" },
+					{ "code": "410927", "name": "台前县" },
+					{ "code": "410928", "name": "濮阳县" },
+					{ "code": "410971", "name": "河南濮阳工业园区" },
+					{ "code": "410972", "name": "濮阳经济技术开发区" }
+				]
+			},
+			{
+				"code": "4110",
+				"name": "许昌市",
+				"children": [
+					{ "code": "411002", "name": "魏都区" },
+					{ "code": "411003", "name": "建安区" },
+					{ "code": "411024", "name": "鄢陵县" },
+					{ "code": "411025", "name": "襄城县" },
+					{ "code": "411071", "name": "许昌经济技术开发区" },
+					{ "code": "411081", "name": "禹州市" },
+					{ "code": "411082", "name": "长葛市" }
+				]
+			},
+			{
+				"code": "4111",
+				"name": "漯河市",
+				"children": [
+					{ "code": "411102", "name": "源汇区" },
+					{ "code": "411103", "name": "郾城区" },
+					{ "code": "411104", "name": "召陵区" },
+					{ "code": "411121", "name": "舞阳县" },
+					{ "code": "411122", "name": "临颍县" },
+					{ "code": "411171", "name": "漯河经济技术开发区" }
+				]
+			},
+			{
+				"code": "4112",
+				"name": "三门峡市",
+				"children": [
+					{ "code": "411202", "name": "湖滨区" },
+					{ "code": "411203", "name": "陕州区" },
+					{ "code": "411221", "name": "渑池县" },
+					{ "code": "411224", "name": "卢氏县" },
+					{ "code": "411271", "name": "河南三门峡经济开发区" },
+					{ "code": "411281", "name": "义马市" },
+					{ "code": "411282", "name": "灵宝市" }
+				]
+			},
+			{
+				"code": "4113",
+				"name": "南阳市",
+				"children": [
+					{ "code": "411302", "name": "宛城区" },
+					{ "code": "411303", "name": "卧龙区" },
+					{ "code": "411321", "name": "南召县" },
+					{ "code": "411322", "name": "方城县" },
+					{ "code": "411323", "name": "西峡县" },
+					{ "code": "411324", "name": "镇平县" },
+					{ "code": "411325", "name": "内乡县" },
+					{ "code": "411326", "name": "淅川县" },
+					{ "code": "411327", "name": "社旗县" },
+					{ "code": "411328", "name": "唐河县" },
+					{ "code": "411329", "name": "新野县" },
+					{ "code": "411330", "name": "桐柏县" },
+					{ "code": "411371", "name": "南阳高新技术产业开发区" },
+					{ "code": "411372", "name": "南阳市城乡一体化示范区" },
+					{ "code": "411381", "name": "邓州市" }
+				]
+			},
+			{
+				"code": "4114",
+				"name": "商丘市",
+				"children": [
+					{ "code": "411402", "name": "梁园区" },
+					{ "code": "411403", "name": "睢阳区" },
+					{ "code": "411421", "name": "民权县" },
+					{ "code": "411422", "name": "睢县" },
+					{ "code": "411423", "name": "宁陵县" },
+					{ "code": "411424", "name": "柘城县" },
+					{ "code": "411425", "name": "虞城县" },
+					{ "code": "411426", "name": "夏邑县" },
+					{ "code": "411471", "name": "豫东综合物流产业聚集区" },
+					{ "code": "411472", "name": "河南商丘经济开发区" },
+					{ "code": "411481", "name": "永城市" }
+				]
+			},
+			{
+				"code": "4115",
+				"name": "信阳市",
+				"children": [
+					{ "code": "411502", "name": "浉河区" },
+					{ "code": "411503", "name": "平桥区" },
+					{ "code": "411521", "name": "罗山县" },
+					{ "code": "411522", "name": "光山县" },
+					{ "code": "411523", "name": "新县" },
+					{ "code": "411524", "name": "商城县" },
+					{ "code": "411525", "name": "固始县" },
+					{ "code": "411526", "name": "潢川县" },
+					{ "code": "411527", "name": "淮滨县" },
+					{ "code": "411528", "name": "息县" },
+					{ "code": "411571", "name": "信阳高新技术产业开发区" }
+				]
+			},
+			{
+				"code": "4116",
+				"name": "周口市",
+				"children": [
+					{ "code": "411602", "name": "川汇区" },
+					{ "code": "411603", "name": "淮阳区" },
+					{ "code": "411621", "name": "扶沟县" },
+					{ "code": "411622", "name": "西华县" },
+					{ "code": "411623", "name": "商水县" },
+					{ "code": "411624", "name": "沈丘县" },
+					{ "code": "411625", "name": "郸城县" },
+					{ "code": "411627", "name": "太康县" },
+					{ "code": "411628", "name": "鹿邑县" },
+					{ "code": "411671", "name": "河南周口经济开发区" },
+					{ "code": "411681", "name": "项城市" }
+				]
+			},
+			{
+				"code": "4117",
+				"name": "驻马店市",
+				"children": [
+					{ "code": "411702", "name": "驿城区" },
+					{ "code": "411721", "name": "西平县" },
+					{ "code": "411722", "name": "上蔡县" },
+					{ "code": "411723", "name": "平舆县" },
+					{ "code": "411724", "name": "正阳县" },
+					{ "code": "411725", "name": "确山县" },
+					{ "code": "411726", "name": "泌阳县" },
+					{ "code": "411727", "name": "汝南县" },
+					{ "code": "411728", "name": "遂平县" },
+					{ "code": "411729", "name": "新蔡县" },
+					{ "code": "411771", "name": "河南驻马店经济开发区" }
+				]
+			},
+			{
+				"code": "4190",
+				"name": "省直辖县级行政区划",
+				"children": [{ "code": "419001", "name": "济源市" }]
+			}
+		]
+	},
+	{
+		"code": "42",
+		"name": "湖北省",
+		"children": [
+			{
+				"code": "4201",
+				"name": "武汉市",
+				"children": [
+					{ "code": "420102", "name": "江岸区" },
+					{ "code": "420103", "name": "江汉区" },
+					{ "code": "420104", "name": "硚口区" },
+					{ "code": "420105", "name": "汉阳区" },
+					{ "code": "420106", "name": "武昌区" },
+					{ "code": "420107", "name": "青山区" },
+					{ "code": "420111", "name": "洪山区" },
+					{ "code": "420112", "name": "东西湖区" },
+					{ "code": "420113", "name": "汉南区" },
+					{ "code": "420114", "name": "蔡甸区" },
+					{ "code": "420115", "name": "江夏区" },
+					{ "code": "420116", "name": "黄陂区" },
+					{ "code": "420117", "name": "新洲区" }
+				]
+			},
+			{
+				"code": "4202",
+				"name": "黄石市",
+				"children": [
+					{ "code": "420202", "name": "黄石港区" },
+					{ "code": "420203", "name": "西塞山区" },
+					{ "code": "420204", "name": "下陆区" },
+					{ "code": "420205", "name": "铁山区" },
+					{ "code": "420222", "name": "阳新县" },
+					{ "code": "420281", "name": "大冶市" }
+				]
+			},
+			{
+				"code": "4203",
+				"name": "十堰市",
+				"children": [
+					{ "code": "420302", "name": "茅箭区" },
+					{ "code": "420303", "name": "张湾区" },
+					{ "code": "420304", "name": "郧阳区" },
+					{ "code": "420322", "name": "郧西县" },
+					{ "code": "420323", "name": "竹山县" },
+					{ "code": "420324", "name": "竹溪县" },
+					{ "code": "420325", "name": "房县" },
+					{ "code": "420381", "name": "丹江口市" }
+				]
+			},
+			{
+				"code": "4205",
+				"name": "宜昌市",
+				"children": [
+					{ "code": "420502", "name": "西陵区" },
+					{ "code": "420503", "name": "伍家岗区" },
+					{ "code": "420504", "name": "点军区" },
+					{ "code": "420505", "name": "猇亭区" },
+					{ "code": "420506", "name": "夷陵区" },
+					{ "code": "420525", "name": "远安县" },
+					{ "code": "420526", "name": "兴山县" },
+					{ "code": "420527", "name": "秭归县" },
+					{ "code": "420528", "name": "长阳土家族自治县" },
+					{ "code": "420529", "name": "五峰土家族自治县" },
+					{ "code": "420581", "name": "宜都市" },
+					{ "code": "420582", "name": "当阳市" },
+					{ "code": "420583", "name": "枝江市" }
+				]
+			},
+			{
+				"code": "4206",
+				"name": "襄阳市",
+				"children": [
+					{ "code": "420602", "name": "襄城区" },
+					{ "code": "420606", "name": "樊城区" },
+					{ "code": "420607", "name": "襄州区" },
+					{ "code": "420624", "name": "南漳县" },
+					{ "code": "420625", "name": "谷城县" },
+					{ "code": "420626", "name": "保康县" },
+					{ "code": "420682", "name": "老河口市" },
+					{ "code": "420683", "name": "枣阳市" },
+					{ "code": "420684", "name": "宜城市" }
+				]
+			},
+			{
+				"code": "4207",
+				"name": "鄂州市",
+				"children": [
+					{ "code": "420702", "name": "梁子湖区" },
+					{ "code": "420703", "name": "华容区" },
+					{ "code": "420704", "name": "鄂城区" }
+				]
+			},
+			{
+				"code": "4208",
+				"name": "荆门市",
+				"children": [
+					{ "code": "420802", "name": "东宝区" },
+					{ "code": "420804", "name": "掇刀区" },
+					{ "code": "420822", "name": "沙洋县" },
+					{ "code": "420881", "name": "钟祥市" },
+					{ "code": "420882", "name": "京山市" }
+				]
+			},
+			{
+				"code": "4209",
+				"name": "孝感市",
+				"children": [
+					{ "code": "420902", "name": "孝南区" },
+					{ "code": "420921", "name": "孝昌县" },
+					{ "code": "420922", "name": "大悟县" },
+					{ "code": "420923", "name": "云梦县" },
+					{ "code": "420981", "name": "应城市" },
+					{ "code": "420982", "name": "安陆市" },
+					{ "code": "420984", "name": "汉川市" }
+				]
+			},
+			{
+				"code": "4210",
+				"name": "荆州市",
+				"children": [
+					{ "code": "421002", "name": "沙市区" },
+					{ "code": "421003", "name": "荆州区" },
+					{ "code": "421022", "name": "公安县" },
+					{ "code": "421023", "name": "监利县" },
+					{ "code": "421024", "name": "江陵县" },
+					{ "code": "421071", "name": "荆州经济技术开发区" },
+					{ "code": "421081", "name": "石首市" },
+					{ "code": "421083", "name": "洪湖市" },
+					{ "code": "421087", "name": "松滋市" }
+				]
+			},
+			{
+				"code": "4211",
+				"name": "黄冈市",
+				"children": [
+					{ "code": "421102", "name": "黄州区" },
+					{ "code": "421121", "name": "团风县" },
+					{ "code": "421122", "name": "红安县" },
+					{ "code": "421123", "name": "罗田县" },
+					{ "code": "421124", "name": "英山县" },
+					{ "code": "421125", "name": "浠水县" },
+					{ "code": "421126", "name": "蕲春县" },
+					{ "code": "421127", "name": "黄梅县" },
+					{ "code": "421171", "name": "龙感湖管理区" },
+					{ "code": "421181", "name": "麻城市" },
+					{ "code": "421182", "name": "武穴市" }
+				]
+			},
+			{
+				"code": "4212",
+				"name": "咸宁市",
+				"children": [
+					{ "code": "421202", "name": "咸安区" },
+					{ "code": "421221", "name": "嘉鱼县" },
+					{ "code": "421222", "name": "通城县" },
+					{ "code": "421223", "name": "崇阳县" },
+					{ "code": "421224", "name": "通山县" },
+					{ "code": "421281", "name": "赤壁市" }
+				]
+			},
+			{
+				"code": "4213",
+				"name": "随州市",
+				"children": [
+					{ "code": "421303", "name": "曾都区" },
+					{ "code": "421321", "name": "随县" },
+					{ "code": "421381", "name": "广水市" }
+				]
+			},
+			{
+				"code": "4228",
+				"name": "恩施土家族苗族自治州",
+				"children": [
+					{ "code": "422801", "name": "恩施市" },
+					{ "code": "422802", "name": "利川市" },
+					{ "code": "422822", "name": "建始县" },
+					{ "code": "422823", "name": "巴东县" },
+					{ "code": "422825", "name": "宣恩县" },
+					{ "code": "422826", "name": "咸丰县" },
+					{ "code": "422827", "name": "来凤县" },
+					{ "code": "422828", "name": "鹤峰县" }
+				]
+			},
+			{
+				"code": "4290",
+				"name": "省直辖县级行政区划",
+				"children": [
+					{ "code": "429004", "name": "仙桃市" },
+					{ "code": "429005", "name": "潜江市" },
+					{ "code": "429006", "name": "天门市" },
+					{ "code": "429021", "name": "神农架林区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "43",
+		"name": "湖南省",
+		"children": [
+			{
+				"code": "4301",
+				"name": "长沙市",
+				"children": [
+					{ "code": "430102", "name": "芙蓉区" },
+					{ "code": "430103", "name": "天心区" },
+					{ "code": "430104", "name": "岳麓区" },
+					{ "code": "430105", "name": "开福区" },
+					{ "code": "430111", "name": "雨花区" },
+					{ "code": "430112", "name": "望城区" },
+					{ "code": "430121", "name": "长沙县" },
+					{ "code": "430181", "name": "浏阳市" },
+					{ "code": "430182", "name": "宁乡市" }
+				]
+			},
+			{
+				"code": "4302",
+				"name": "株洲市",
+				"children": [
+					{ "code": "430202", "name": "荷塘区" },
+					{ "code": "430203", "name": "芦淞区" },
+					{ "code": "430204", "name": "石峰区" },
+					{ "code": "430211", "name": "天元区" },
+					{ "code": "430212", "name": "渌口区" },
+					{ "code": "430223", "name": "攸县" },
+					{ "code": "430224", "name": "茶陵县" },
+					{ "code": "430225", "name": "炎陵县" },
+					{ "code": "430271", "name": "云龙示范区" },
+					{ "code": "430281", "name": "醴陵市" }
+				]
+			},
+			{
+				"code": "4303",
+				"name": "湘潭市",
+				"children": [
+					{ "code": "430302", "name": "雨湖区" },
+					{ "code": "430304", "name": "岳塘区" },
+					{ "code": "430321", "name": "湘潭县" },
+					{ "code": "430371", "name": "湖南湘潭高新技术产业园区" },
+					{ "code": "430372", "name": "湘潭昭山示范区" },
+					{ "code": "430373", "name": "湘潭九华示范区" },
+					{ "code": "430381", "name": "湘乡市" },
+					{ "code": "430382", "name": "韶山市" }
+				]
+			},
+			{
+				"code": "4304",
+				"name": "衡阳市",
+				"children": [
+					{ "code": "430405", "name": "珠晖区" },
+					{ "code": "430406", "name": "雁峰区" },
+					{ "code": "430407", "name": "石鼓区" },
+					{ "code": "430408", "name": "蒸湘区" },
+					{ "code": "430412", "name": "南岳区" },
+					{ "code": "430421", "name": "衡阳县" },
+					{ "code": "430422", "name": "衡南县" },
+					{ "code": "430423", "name": "衡山县" },
+					{ "code": "430424", "name": "衡东县" },
+					{ "code": "430426", "name": "祁东县" },
+					{ "code": "430471", "name": "衡阳综合保税区" },
+					{ "code": "430472", "name": "湖南衡阳高新技术产业园区" },
+					{ "code": "430473", "name": "湖南衡阳松木经济开发区" },
+					{ "code": "430481", "name": "耒阳市" },
+					{ "code": "430482", "name": "常宁市" }
+				]
+			},
+			{
+				"code": "4305",
+				"name": "邵阳市",
+				"children": [
+					{ "code": "430502", "name": "双清区" },
+					{ "code": "430503", "name": "大祥区" },
+					{ "code": "430511", "name": "北塔区" },
+					{ "code": "430522", "name": "新邵县" },
+					{ "code": "430523", "name": "邵阳县" },
+					{ "code": "430524", "name": "隆回县" },
+					{ "code": "430525", "name": "洞口县" },
+					{ "code": "430527", "name": "绥宁县" },
+					{ "code": "430528", "name": "新宁县" },
+					{ "code": "430529", "name": "城步苗族自治县" },
+					{ "code": "430581", "name": "武冈市" },
+					{ "code": "430582", "name": "邵东市" }
+				]
+			},
+			{
+				"code": "4306",
+				"name": "岳阳市",
+				"children": [
+					{ "code": "430602", "name": "岳阳楼区" },
+					{ "code": "430603", "name": "云溪区" },
+					{ "code": "430611", "name": "君山区" },
+					{ "code": "430621", "name": "岳阳县" },
+					{ "code": "430623", "name": "华容县" },
+					{ "code": "430624", "name": "湘阴县" },
+					{ "code": "430626", "name": "平江县" },
+					{ "code": "430671", "name": "岳阳市屈原管理区" },
+					{ "code": "430681", "name": "汨罗市" },
+					{ "code": "430682", "name": "临湘市" }
+				]
+			},
+			{
+				"code": "4307",
+				"name": "常德市",
+				"children": [
+					{ "code": "430702", "name": "武陵区" },
+					{ "code": "430703", "name": "鼎城区" },
+					{ "code": "430721", "name": "安乡县" },
+					{ "code": "430722", "name": "汉寿县" },
+					{ "code": "430723", "name": "澧县" },
+					{ "code": "430724", "name": "临澧县" },
+					{ "code": "430725", "name": "桃源县" },
+					{ "code": "430726", "name": "石门县" },
+					{ "code": "430771", "name": "常德市西洞庭管理区" },
+					{ "code": "430781", "name": "津市市" }
+				]
+			},
+			{
+				"code": "4308",
+				"name": "张家界市",
+				"children": [
+					{ "code": "430802", "name": "永定区" },
+					{ "code": "430811", "name": "武陵源区" },
+					{ "code": "430821", "name": "慈利县" },
+					{ "code": "430822", "name": "桑植县" }
+				]
+			},
+			{
+				"code": "4309",
+				"name": "益阳市",
+				"children": [
+					{ "code": "430902", "name": "资阳区" },
+					{ "code": "430903", "name": "赫山区" },
+					{ "code": "430921", "name": "南县" },
+					{ "code": "430922", "name": "桃江县" },
+					{ "code": "430923", "name": "安化县" },
+					{ "code": "430971", "name": "益阳市大通湖管理区" },
+					{ "code": "430972", "name": "湖南益阳高新技术产业园区" },
+					{ "code": "430981", "name": "沅江市" }
+				]
+			},
+			{
+				"code": "4310",
+				"name": "郴州市",
+				"children": [
+					{ "code": "431002", "name": "北湖区" },
+					{ "code": "431003", "name": "苏仙区" },
+					{ "code": "431021", "name": "桂阳县" },
+					{ "code": "431022", "name": "宜章县" },
+					{ "code": "431023", "name": "永兴县" },
+					{ "code": "431024", "name": "嘉禾县" },
+					{ "code": "431025", "name": "临武县" },
+					{ "code": "431026", "name": "汝城县" },
+					{ "code": "431027", "name": "桂东县" },
+					{ "code": "431028", "name": "安仁县" },
+					{ "code": "431081", "name": "资兴市" }
+				]
+			},
+			{
+				"code": "4311",
+				"name": "永州市",
+				"children": [
+					{ "code": "431102", "name": "零陵区" },
+					{ "code": "431103", "name": "冷水滩区" },
+					{ "code": "431121", "name": "祁阳县" },
+					{ "code": "431122", "name": "东安县" },
+					{ "code": "431123", "name": "双牌县" },
+					{ "code": "431124", "name": "道县" },
+					{ "code": "431125", "name": "江永县" },
+					{ "code": "431126", "name": "宁远县" },
+					{ "code": "431127", "name": "蓝山县" },
+					{ "code": "431128", "name": "新田县" },
+					{ "code": "431129", "name": "江华瑶族自治县" },
+					{ "code": "431171", "name": "永州经济技术开发区" },
+					{ "code": "431172", "name": "永州市金洞管理区" },
+					{ "code": "431173", "name": "永州市回龙圩管理区" }
+				]
+			},
+			{
+				"code": "4312",
+				"name": "怀化市",
+				"children": [
+					{ "code": "431202", "name": "鹤城区" },
+					{ "code": "431221", "name": "中方县" },
+					{ "code": "431222", "name": "沅陵县" },
+					{ "code": "431223", "name": "辰溪县" },
+					{ "code": "431224", "name": "溆浦县" },
+					{ "code": "431225", "name": "会同县" },
+					{ "code": "431226", "name": "麻阳苗族自治县" },
+					{ "code": "431227", "name": "新晃侗族自治县" },
+					{ "code": "431228", "name": "芷江侗族自治县" },
+					{ "code": "431229", "name": "靖州苗族侗族自治县" },
+					{ "code": "431230", "name": "通道侗族自治县" },
+					{ "code": "431271", "name": "怀化市洪江管理区" },
+					{ "code": "431281", "name": "洪江市" }
+				]
+			},
+			{
+				"code": "4313",
+				"name": "娄底市",
+				"children": [
+					{ "code": "431302", "name": "娄星区" },
+					{ "code": "431321", "name": "双峰县" },
+					{ "code": "431322", "name": "新化县" },
+					{ "code": "431381", "name": "冷水江市" },
+					{ "code": "431382", "name": "涟源市" }
+				]
+			},
+			{
+				"code": "4331",
+				"name": "湘西土家族苗族自治州",
+				"children": [
+					{ "code": "433101", "name": "吉首市" },
+					{ "code": "433122", "name": "泸溪县" },
+					{ "code": "433123", "name": "凤凰县" },
+					{ "code": "433124", "name": "花垣县" },
+					{ "code": "433125", "name": "保靖县" },
+					{ "code": "433126", "name": "古丈县" },
+					{ "code": "433127", "name": "永顺县" },
+					{ "code": "433130", "name": "龙山县" },
+					{ "code": "433173", "name": "湖南永顺经济开发区" }
+				]
+			}
+		]
+	},
+	{
+		"code": "44",
+		"name": "广东省",
+		"children": [
+			{
+				"code": "4401",
+				"name": "广州市",
+				"children": [
+					{ "code": "440103", "name": "荔湾区" },
+					{ "code": "440104", "name": "越秀区" },
+					{ "code": "440105", "name": "海珠区" },
+					{ "code": "440106", "name": "天河区" },
+					{ "code": "440111", "name": "白云区" },
+					{ "code": "440112", "name": "黄埔区" },
+					{ "code": "440113", "name": "番禺区" },
+					{ "code": "440114", "name": "花都区" },
+					{ "code": "440115", "name": "南沙区" },
+					{ "code": "440117", "name": "从化区" },
+					{ "code": "440118", "name": "增城区" }
+				]
+			},
+			{
+				"code": "4402",
+				"name": "韶关市",
+				"children": [
+					{ "code": "440203", "name": "武江区" },
+					{ "code": "440204", "name": "浈江区" },
+					{ "code": "440205", "name": "曲江区" },
+					{ "code": "440222", "name": "始兴县" },
+					{ "code": "440224", "name": "仁化县" },
+					{ "code": "440229", "name": "翁源县" },
+					{ "code": "440232", "name": "乳源瑶族自治县" },
+					{ "code": "440233", "name": "新丰县" },
+					{ "code": "440281", "name": "乐昌市" },
+					{ "code": "440282", "name": "南雄市" }
+				]
+			},
+			{
+				"code": "4403",
+				"name": "深圳市",
+				"children": [
+					{ "code": "440303", "name": "罗湖区" },
+					{ "code": "440304", "name": "福田区" },
+					{ "code": "440305", "name": "南山区" },
+					{ "code": "440306", "name": "宝安区" },
+					{ "code": "440307", "name": "龙岗区" },
+					{ "code": "440308", "name": "盐田区" },
+					{ "code": "440309", "name": "龙华区" },
+					{ "code": "440310", "name": "坪山区" },
+					{ "code": "440311", "name": "光明区" }
+				]
+			},
+			{
+				"code": "4404",
+				"name": "珠海市",
+				"children": [
+					{ "code": "440402", "name": "香洲区" },
+					{ "code": "440403", "name": "斗门区" },
+					{ "code": "440404", "name": "金湾区" }
+				]
+			},
+			{
+				"code": "4405",
+				"name": "汕头市",
+				"children": [
+					{ "code": "440507", "name": "龙湖区" },
+					{ "code": "440511", "name": "金平区" },
+					{ "code": "440512", "name": "濠江区" },
+					{ "code": "440513", "name": "潮阳区" },
+					{ "code": "440514", "name": "潮南区" },
+					{ "code": "440515", "name": "澄海区" },
+					{ "code": "440523", "name": "南澳县" }
+				]
+			},
+			{
+				"code": "4406",
+				"name": "佛山市",
+				"children": [
+					{ "code": "440604", "name": "禅城区" },
+					{ "code": "440605", "name": "南海区" },
+					{ "code": "440606", "name": "顺德区" },
+					{ "code": "440607", "name": "三水区" },
+					{ "code": "440608", "name": "高明区" }
+				]
+			},
+			{
+				"code": "4407",
+				"name": "江门市",
+				"children": [
+					{ "code": "440703", "name": "蓬江区" },
+					{ "code": "440704", "name": "江海区" },
+					{ "code": "440705", "name": "新会区" },
+					{ "code": "440781", "name": "台山市" },
+					{ "code": "440783", "name": "开平市" },
+					{ "code": "440784", "name": "鹤山市" },
+					{ "code": "440785", "name": "恩平市" }
+				]
+			},
+			{
+				"code": "4408",
+				"name": "湛江市",
+				"children": [
+					{ "code": "440802", "name": "赤坎区" },
+					{ "code": "440803", "name": "霞山区" },
+					{ "code": "440804", "name": "坡头区" },
+					{ "code": "440811", "name": "麻章区" },
+					{ "code": "440823", "name": "遂溪县" },
+					{ "code": "440825", "name": "徐闻县" },
+					{ "code": "440881", "name": "廉江市" },
+					{ "code": "440882", "name": "雷州市" },
+					{ "code": "440883", "name": "吴川市" }
+				]
+			},
+			{
+				"code": "4409",
+				"name": "茂名市",
+				"children": [
+					{ "code": "440902", "name": "茂南区" },
+					{ "code": "440904", "name": "电白区" },
+					{ "code": "440981", "name": "高州市" },
+					{ "code": "440982", "name": "化州市" },
+					{ "code": "440983", "name": "信宜市" }
+				]
+			},
+			{
+				"code": "4412",
+				"name": "肇庆市",
+				"children": [
+					{ "code": "441202", "name": "端州区" },
+					{ "code": "441203", "name": "鼎湖区" },
+					{ "code": "441204", "name": "高要区" },
+					{ "code": "441223", "name": "广宁县" },
+					{ "code": "441224", "name": "怀集县" },
+					{ "code": "441225", "name": "封开县" },
+					{ "code": "441226", "name": "德庆县" },
+					{ "code": "441284", "name": "四会市" }
+				]
+			},
+			{
+				"code": "4413",
+				"name": "惠州市",
+				"children": [
+					{ "code": "441302", "name": "惠城区" },
+					{ "code": "441303", "name": "惠阳区" },
+					{ "code": "441322", "name": "博罗县" },
+					{ "code": "441323", "name": "惠东县" },
+					{ "code": "441324", "name": "龙门县" }
+				]
+			},
+			{
+				"code": "4414",
+				"name": "梅州市",
+				"children": [
+					{ "code": "441402", "name": "梅江区" },
+					{ "code": "441403", "name": "梅县区" },
+					{ "code": "441422", "name": "大埔县" },
+					{ "code": "441423", "name": "丰顺县" },
+					{ "code": "441424", "name": "五华县" },
+					{ "code": "441426", "name": "平远县" },
+					{ "code": "441427", "name": "蕉岭县" },
+					{ "code": "441481", "name": "兴宁市" }
+				]
+			},
+			{
+				"code": "4415",
+				"name": "汕尾市",
+				"children": [
+					{ "code": "441502", "name": "城区" },
+					{ "code": "441521", "name": "海丰县" },
+					{ "code": "441523", "name": "陆河县" },
+					{ "code": "441581", "name": "陆丰市" }
+				]
+			},
+			{
+				"code": "4416",
+				"name": "河源市",
+				"children": [
+					{ "code": "441602", "name": "源城区" },
+					{ "code": "441621", "name": "紫金县" },
+					{ "code": "441622", "name": "龙川县" },
+					{ "code": "441623", "name": "连平县" },
+					{ "code": "441624", "name": "和平县" },
+					{ "code": "441625", "name": "东源县" }
+				]
+			},
+			{
+				"code": "4417",
+				"name": "阳江市",
+				"children": [
+					{ "code": "441702", "name": "江城区" },
+					{ "code": "441704", "name": "阳东区" },
+					{ "code": "441721", "name": "阳西县" },
+					{ "code": "441781", "name": "阳春市" }
+				]
+			},
+			{
+				"code": "4418",
+				"name": "清远市",
+				"children": [
+					{ "code": "441802", "name": "清城区" },
+					{ "code": "441803", "name": "清新区" },
+					{ "code": "441821", "name": "佛冈县" },
+					{ "code": "441823", "name": "阳山县" },
+					{ "code": "441825", "name": "连山壮族瑶族自治县" },
+					{ "code": "441826", "name": "连南瑶族自治县" },
+					{ "code": "441881", "name": "英德市" },
+					{ "code": "441882", "name": "连州市" }
+				]
+			},
+			{
+				"code": "4419",
+				"name": "东莞市",
+				"children": [
+					{ "code": "441900003", "name": "东城街道" },
+					{ "code": "441900004", "name": "南城街道" },
+					{ "code": "441900005", "name": "万江街道" },
+					{ "code": "441900006", "name": "莞城街道" },
+					{ "code": "441900101", "name": "石碣镇" },
+					{ "code": "441900102", "name": "石龙镇" },
+					{ "code": "441900103", "name": "茶山镇" },
+					{ "code": "441900104", "name": "石排镇" },
+					{ "code": "441900105", "name": "企石镇" },
+					{ "code": "441900106", "name": "横沥镇" },
+					{ "code": "441900107", "name": "桥头镇" },
+					{ "code": "441900108", "name": "谢岗镇" },
+					{ "code": "441900109", "name": "东坑镇" },
+					{ "code": "441900110", "name": "常平镇" },
+					{ "code": "441900111", "name": "寮步镇" },
+					{ "code": "441900112", "name": "樟木头镇" },
+					{ "code": "441900113", "name": "大朗镇" },
+					{ "code": "441900114", "name": "黄江镇" },
+					{ "code": "441900115", "name": "清溪镇" },
+					{ "code": "441900116", "name": "塘厦镇" },
+					{ "code": "441900117", "name": "凤岗镇" },
+					{ "code": "441900118", "name": "大岭山镇" },
+					{ "code": "441900119", "name": "长安镇" },
+					{ "code": "441900121", "name": "虎门镇" },
+					{ "code": "441900122", "name": "厚街镇" },
+					{ "code": "441900123", "name": "沙田镇" },
+					{ "code": "441900124", "name": "道滘镇" },
+					{ "code": "441900125", "name": "洪梅镇" },
+					{ "code": "441900126", "name": "麻涌镇" },
+					{ "code": "441900127", "name": "望牛墩镇" },
+					{ "code": "441900128", "name": "中堂镇" },
+					{ "code": "441900129", "name": "高埗镇" },
+					{ "code": "441900401", "name": "松山湖" },
+					{ "code": "441900402", "name": "东莞港" },
+					{ "code": "441900403", "name": "东莞生态园" }
+				]
+			},
+			{
+				"code": "4420",
+				"name": "中山市",
+				"children": [
+					{ "code": "442000001", "name": "石岐街道" },
+					{ "code": "442000002", "name": "东区街道" },
+					{ "code": "442000003", "name": "中山港街道" },
+					{ "code": "442000004", "name": "西区街道" },
+					{ "code": "442000005", "name": "南区街道" },
+					{ "code": "442000006", "name": "五桂山街道" },
+					{ "code": "442000100", "name": "小榄镇" },
+					{ "code": "442000101", "name": "黄圃镇" },
+					{ "code": "442000102", "name": "民众镇" },
+					{ "code": "442000103", "name": "东凤镇" },
+					{ "code": "442000104", "name": "东升镇" },
+					{ "code": "442000105", "name": "古镇镇" },
+					{ "code": "442000106", "name": "沙溪镇" },
+					{ "code": "442000107", "name": "坦洲镇" },
+					{ "code": "442000108", "name": "港口镇" },
+					{ "code": "442000109", "name": "三角镇" },
+					{ "code": "442000110", "name": "横栏镇" },
+					{ "code": "442000111", "name": "南头镇" },
+					{ "code": "442000112", "name": "阜沙镇" },
+					{ "code": "442000113", "name": "南朗镇" },
+					{ "code": "442000114", "name": "三乡镇" },
+					{ "code": "442000115", "name": "板芙镇" },
+					{ "code": "442000116", "name": "大涌镇" },
+					{ "code": "442000117", "name": "神湾镇" }
+				]
+			},
+			{
+				"code": "4451",
+				"name": "潮州市",
+				"children": [
+					{ "code": "445102", "name": "湘桥区" },
+					{ "code": "445103", "name": "潮安区" },
+					{ "code": "445122", "name": "饶平县" }
+				]
+			},
+			{
+				"code": "4452",
+				"name": "揭阳市",
+				"children": [
+					{ "code": "445202", "name": "榕城区" },
+					{ "code": "445203", "name": "揭东区" },
+					{ "code": "445222", "name": "揭西县" },
+					{ "code": "445224", "name": "惠来县" },
+					{ "code": "445281", "name": "普宁市" }
+				]
+			},
+			{
+				"code": "4453",
+				"name": "云浮市",
+				"children": [
+					{ "code": "445302", "name": "云城区" },
+					{ "code": "445303", "name": "云安区" },
+					{ "code": "445321", "name": "新兴县" },
+					{ "code": "445322", "name": "郁南县" },
+					{ "code": "445381", "name": "罗定市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "45",
+		"name": "广西壮族自治区",
+		"children": [
+			{
+				"code": "4501",
+				"name": "南宁市",
+				"children": [
+					{ "code": "450102", "name": "兴宁区" },
+					{ "code": "450103", "name": "青秀区" },
+					{ "code": "450105", "name": "江南区" },
+					{ "code": "450107", "name": "西乡塘区" },
+					{ "code": "450108", "name": "良庆区" },
+					{ "code": "450109", "name": "邕宁区" },
+					{ "code": "450110", "name": "武鸣区" },
+					{ "code": "450123", "name": "隆安县" },
+					{ "code": "450124", "name": "马山县" },
+					{ "code": "450125", "name": "上林县" },
+					{ "code": "450126", "name": "宾阳县" },
+					{ "code": "450127", "name": "横县" }
+				]
+			},
+			{
+				"code": "4502",
+				"name": "柳州市",
+				"children": [
+					{ "code": "450202", "name": "城中区" },
+					{ "code": "450203", "name": "鱼峰区" },
+					{ "code": "450204", "name": "柳南区" },
+					{ "code": "450205", "name": "柳北区" },
+					{ "code": "450206", "name": "柳江区" },
+					{ "code": "450222", "name": "柳城县" },
+					{ "code": "450223", "name": "鹿寨县" },
+					{ "code": "450224", "name": "融安县" },
+					{ "code": "450225", "name": "融水苗族自治县" },
+					{ "code": "450226", "name": "三江侗族自治县" }
+				]
+			},
+			{
+				"code": "4503",
+				"name": "桂林市",
+				"children": [
+					{ "code": "450302", "name": "秀峰区" },
+					{ "code": "450303", "name": "叠彩区" },
+					{ "code": "450304", "name": "象山区" },
+					{ "code": "450305", "name": "七星区" },
+					{ "code": "450311", "name": "雁山区" },
+					{ "code": "450312", "name": "临桂区" },
+					{ "code": "450321", "name": "阳朔县" },
+					{ "code": "450323", "name": "灵川县" },
+					{ "code": "450324", "name": "全州县" },
+					{ "code": "450325", "name": "兴安县" },
+					{ "code": "450326", "name": "永福县" },
+					{ "code": "450327", "name": "灌阳县" },
+					{ "code": "450328", "name": "龙胜各族自治县" },
+					{ "code": "450329", "name": "资源县" },
+					{ "code": "450330", "name": "平乐县" },
+					{ "code": "450332", "name": "恭城瑶族自治县" },
+					{ "code": "450381", "name": "荔浦市" }
+				]
+			},
+			{
+				"code": "4504",
+				"name": "梧州市",
+				"children": [
+					{ "code": "450403", "name": "万秀区" },
+					{ "code": "450405", "name": "长洲区" },
+					{ "code": "450406", "name": "龙圩区" },
+					{ "code": "450421", "name": "苍梧县" },
+					{ "code": "450422", "name": "藤县" },
+					{ "code": "450423", "name": "蒙山县" },
+					{ "code": "450481", "name": "岑溪市" }
+				]
+			},
+			{
+				"code": "4505",
+				"name": "北海市",
+				"children": [
+					{ "code": "450502", "name": "海城区" },
+					{ "code": "450503", "name": "银海区" },
+					{ "code": "450512", "name": "铁山港区" },
+					{ "code": "450521", "name": "合浦县" }
+				]
+			},
+			{
+				"code": "4506",
+				"name": "防城港市",
+				"children": [
+					{ "code": "450602", "name": "港口区" },
+					{ "code": "450603", "name": "防城区" },
+					{ "code": "450621", "name": "上思县" },
+					{ "code": "450681", "name": "东兴市" }
+				]
+			},
+			{
+				"code": "4507",
+				"name": "钦州市",
+				"children": [
+					{ "code": "450702", "name": "钦南区" },
+					{ "code": "450703", "name": "钦北区" },
+					{ "code": "450721", "name": "灵山县" },
+					{ "code": "450722", "name": "浦北县" }
+				]
+			},
+			{
+				"code": "4508",
+				"name": "贵港市",
+				"children": [
+					{ "code": "450802", "name": "港北区" },
+					{ "code": "450803", "name": "港南区" },
+					{ "code": "450804", "name": "覃塘区" },
+					{ "code": "450821", "name": "平南县" },
+					{ "code": "450881", "name": "桂平市" }
+				]
+			},
+			{
+				"code": "4509",
+				"name": "玉林市",
+				"children": [
+					{ "code": "450902", "name": "玉州区" },
+					{ "code": "450903", "name": "福绵区" },
+					{ "code": "450921", "name": "容县" },
+					{ "code": "450922", "name": "陆川县" },
+					{ "code": "450923", "name": "博白县" },
+					{ "code": "450924", "name": "兴业县" },
+					{ "code": "450981", "name": "北流市" }
+				]
+			},
+			{
+				"code": "4510",
+				"name": "百色市",
+				"children": [
+					{ "code": "451002", "name": "右江区" },
+					{ "code": "451003", "name": "田阳区" },
+					{ "code": "451022", "name": "田东县" },
+					{ "code": "451023", "name": "平果县" },
+					{ "code": "451024", "name": "德保县" },
+					{ "code": "451026", "name": "那坡县" },
+					{ "code": "451027", "name": "凌云县" },
+					{ "code": "451028", "name": "乐业县" },
+					{ "code": "451029", "name": "田林县" },
+					{ "code": "451030", "name": "西林县" },
+					{ "code": "451031", "name": "隆林各族自治县" },
+					{ "code": "451081", "name": "靖西市" }
+				]
+			},
+			{
+				"code": "4511",
+				"name": "贺州市",
+				"children": [
+					{ "code": "451102", "name": "八步区" },
+					{ "code": "451103", "name": "平桂区" },
+					{ "code": "451121", "name": "昭平县" },
+					{ "code": "451122", "name": "钟山县" },
+					{ "code": "451123", "name": "富川瑶族自治县" }
+				]
+			},
+			{
+				"code": "4512",
+				"name": "河池市",
+				"children": [
+					{ "code": "451202", "name": "金城江区" },
+					{ "code": "451203", "name": "宜州区" },
+					{ "code": "451221", "name": "南丹县" },
+					{ "code": "451222", "name": "天峨县" },
+					{ "code": "451223", "name": "凤山县" },
+					{ "code": "451224", "name": "东兰县" },
+					{ "code": "451225", "name": "罗城仫佬族自治县" },
+					{ "code": "451226", "name": "环江毛南族自治县" },
+					{ "code": "451227", "name": "巴马瑶族自治县" },
+					{ "code": "451228", "name": "都安瑶族自治县" },
+					{ "code": "451229", "name": "大化瑶族自治县" }
+				]
+			},
+			{
+				"code": "4513",
+				"name": "来宾市",
+				"children": [
+					{ "code": "451302", "name": "兴宾区" },
+					{ "code": "451321", "name": "忻城县" },
+					{ "code": "451322", "name": "象州县" },
+					{ "code": "451323", "name": "武宣县" },
+					{ "code": "451324", "name": "金秀瑶族自治县" },
+					{ "code": "451381", "name": "合山市" }
+				]
+			},
+			{
+				"code": "4514",
+				"name": "崇左市",
+				"children": [
+					{ "code": "451402", "name": "江州区" },
+					{ "code": "451421", "name": "扶绥县" },
+					{ "code": "451422", "name": "宁明县" },
+					{ "code": "451423", "name": "龙州县" },
+					{ "code": "451424", "name": "大新县" },
+					{ "code": "451425", "name": "天等县" },
+					{ "code": "451481", "name": "凭祥市" }
+				]
+			}
+		]
+	},
+	{
+		"code": "46",
+		"name": "海南省",
+		"children": [
+			{
+				"code": "4601",
+				"name": "海口市",
+				"children": [
+					{ "code": "460105", "name": "秀英区" },
+					{ "code": "460106", "name": "龙华区" },
+					{ "code": "460107", "name": "琼山区" },
+					{ "code": "460108", "name": "美兰区" }
+				]
+			},
+			{
+				"code": "4602",
+				"name": "三亚市",
+				"children": [
+					{ "code": "460202", "name": "海棠区" },
+					{ "code": "460203", "name": "吉阳区" },
+					{ "code": "460204", "name": "天涯区" },
+					{ "code": "460205", "name": "崖州区" }
+				]
+			},
+			{
+				"code": "4603",
+				"name": "三沙市",
+				"children": [
+					{ "code": "460321", "name": "西沙群岛" },
+					{ "code": "460322", "name": "南沙群岛" },
+					{ "code": "460323", "name": "中沙群岛的岛礁及其海域" }
+				]
+			},
+			{
+				"code": "4604",
+				"name": "儋州市",
+				"children": [
+					{ "code": "460400100", "name": "那大镇" },
+					{ "code": "460400101", "name": "和庆镇" },
+					{ "code": "460400102", "name": "南丰镇" },
+					{ "code": "460400103", "name": "大成镇" },
+					{ "code": "460400104", "name": "雅星镇" },
+					{ "code": "460400105", "name": "兰洋镇" },
+					{ "code": "460400106", "name": "光村镇" },
+					{ "code": "460400107", "name": "木棠镇" },
+					{ "code": "460400108", "name": "海头镇" },
+					{ "code": "460400109", "name": "峨蔓镇" },
+					{ "code": "460400111", "name": "王五镇" },
+					{ "code": "460400112", "name": "白马井镇" },
+					{ "code": "460400113", "name": "中和镇" },
+					{ "code": "460400114", "name": "排浦镇" },
+					{ "code": "460400115", "name": "东成镇" },
+					{ "code": "460400116", "name": "新州镇" },
+					{ "code": "460400499", "name": "洋浦经济开发区" },
+					{ "code": "460400500", "name": "华南热作学院" }
+				]
+			},
+			{
+				"code": "4690",
+				"name": "省直辖县级行政区划",
+				"children": [
+					{ "code": "469001", "name": "五指山市" },
+					{ "code": "469002", "name": "琼海市" },
+					{ "code": "469005", "name": "文昌市" },
+					{ "code": "469006", "name": "万宁市" },
+					{ "code": "469007", "name": "东方市" },
+					{ "code": "469021", "name": "定安县" },
+					{ "code": "469022", "name": "屯昌县" },
+					{ "code": "469023", "name": "澄迈县" },
+					{ "code": "469024", "name": "临高县" },
+					{ "code": "469025", "name": "白沙黎族自治县" },
+					{ "code": "469026", "name": "昌江黎族自治县" },
+					{ "code": "469027", "name": "乐东黎族自治县" },
+					{ "code": "469028", "name": "陵水黎族自治县" },
+					{ "code": "469029", "name": "保亭黎族苗族自治县" },
+					{ "code": "469030", "name": "琼中黎族苗族自治县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "50",
+		"name": "重庆市",
+		"children": [
+			{
+				"code": "5001",
+				"name": "市辖区",
+				"children": [
+					{ "code": "500101", "name": "万州区" },
+					{ "code": "500102", "name": "涪陵区" },
+					{ "code": "500103", "name": "渝中区" },
+					{ "code": "500104", "name": "大渡口区" },
+					{ "code": "500105", "name": "江北区" },
+					{ "code": "500106", "name": "沙坪坝区" },
+					{ "code": "500107", "name": "九龙坡区" },
+					{ "code": "500108", "name": "南岸区" },
+					{ "code": "500109", "name": "北碚区" },
+					{ "code": "500110", "name": "綦江区" },
+					{ "code": "500111", "name": "大足区" },
+					{ "code": "500112", "name": "渝北区" },
+					{ "code": "500113", "name": "巴南区" },
+					{ "code": "500114", "name": "黔江区" },
+					{ "code": "500115", "name": "长寿区" },
+					{ "code": "500116", "name": "江津区" },
+					{ "code": "500117", "name": "合川区" },
+					{ "code": "500118", "name": "永川区" },
+					{ "code": "500119", "name": "南川区" },
+					{ "code": "500120", "name": "璧山区" },
+					{ "code": "500151", "name": "铜梁区" },
+					{ "code": "500152", "name": "潼南区" },
+					{ "code": "500153", "name": "荣昌区" },
+					{ "code": "500154", "name": "开州区" },
+					{ "code": "500155", "name": "梁平区" },
+					{ "code": "500156", "name": "武隆区" }
+				]
+			},
+			{
+				"code": "5002",
+				"name": "县",
+				"children": [
+					{ "code": "500229", "name": "城口县" },
+					{ "code": "500230", "name": "丰都县" },
+					{ "code": "500231", "name": "垫江县" },
+					{ "code": "500233", "name": "忠县" },
+					{ "code": "500235", "name": "云阳县" },
+					{ "code": "500236", "name": "奉节县" },
+					{ "code": "500237", "name": "巫山县" },
+					{ "code": "500238", "name": "巫溪县" },
+					{ "code": "500240", "name": "石柱土家族自治县" },
+					{ "code": "500241", "name": "秀山土家族苗族自治县" },
+					{ "code": "500242", "name": "酉阳土家族苗族自治县" },
+					{ "code": "500243", "name": "彭水苗族土家族自治县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "51",
+		"name": "四川省",
+		"children": [
+			{
+				"code": "5101",
+				"name": "成都市",
+				"children": [
+					{ "code": "510104", "name": "锦江区" },
+					{ "code": "510105", "name": "青羊区" },
+					{ "code": "510106", "name": "金牛区" },
+					{ "code": "510107", "name": "武侯区" },
+					{ "code": "510108", "name": "成华区" },
+					{ "code": "510112", "name": "龙泉驿区" },
+					{ "code": "510113", "name": "青白江区" },
+					{ "code": "510114", "name": "新都区" },
+					{ "code": "510115", "name": "温江区" },
+					{ "code": "510116", "name": "双流区" },
+					{ "code": "510117", "name": "郫都区" },
+					{ "code": "510121", "name": "金堂县" },
+					{ "code": "510129", "name": "大邑县" },
+					{ "code": "510131", "name": "蒲江县" },
+					{ "code": "510132", "name": "新津县" },
+					{ "code": "510181", "name": "都江堰市" },
+					{ "code": "510182", "name": "彭州市" },
+					{ "code": "510183", "name": "邛崃市" },
+					{ "code": "510184", "name": "崇州市" },
+					{ "code": "510185", "name": "简阳市" }
+				]
+			},
+			{
+				"code": "5103",
+				"name": "自贡市",
+				"children": [
+					{ "code": "510302", "name": "自流井区" },
+					{ "code": "510303", "name": "贡井区" },
+					{ "code": "510304", "name": "大安区" },
+					{ "code": "510311", "name": "沿滩区" },
+					{ "code": "510321", "name": "荣县" },
+					{ "code": "510322", "name": "富顺县" }
+				]
+			},
+			{
+				"code": "5104",
+				"name": "攀枝花市",
+				"children": [
+					{ "code": "510402", "name": "东区" },
+					{ "code": "510403", "name": "西区" },
+					{ "code": "510411", "name": "仁和区" },
+					{ "code": "510421", "name": "米易县" },
+					{ "code": "510422", "name": "盐边县" }
+				]
+			},
+			{
+				"code": "5105",
+				"name": "泸州市",
+				"children": [
+					{ "code": "510502", "name": "江阳区" },
+					{ "code": "510503", "name": "纳溪区" },
+					{ "code": "510504", "name": "龙马潭区" },
+					{ "code": "510521", "name": "泸县" },
+					{ "code": "510522", "name": "合江县" },
+					{ "code": "510524", "name": "叙永县" },
+					{ "code": "510525", "name": "古蔺县" }
+				]
+			},
+			{
+				"code": "5106",
+				"name": "德阳市",
+				"children": [
+					{ "code": "510603", "name": "旌阳区" },
+					{ "code": "510604", "name": "罗江区" },
+					{ "code": "510623", "name": "中江县" },
+					{ "code": "510681", "name": "广汉市" },
+					{ "code": "510682", "name": "什邡市" },
+					{ "code": "510683", "name": "绵竹市" }
+				]
+			},
+			{
+				"code": "5107",
+				"name": "绵阳市",
+				"children": [
+					{ "code": "510703", "name": "涪城区" },
+					{ "code": "510704", "name": "游仙区" },
+					{ "code": "510705", "name": "安州区" },
+					{ "code": "510722", "name": "三台县" },
+					{ "code": "510723", "name": "盐亭县" },
+					{ "code": "510725", "name": "梓潼县" },
+					{ "code": "510726", "name": "北川羌族自治县" },
+					{ "code": "510727", "name": "平武县" },
+					{ "code": "510781", "name": "江油市" }
+				]
+			},
+			{
+				"code": "5108",
+				"name": "广元市",
+				"children": [
+					{ "code": "510802", "name": "利州区" },
+					{ "code": "510811", "name": "昭化区" },
+					{ "code": "510812", "name": "朝天区" },
+					{ "code": "510821", "name": "旺苍县" },
+					{ "code": "510822", "name": "青川县" },
+					{ "code": "510823", "name": "剑阁县" },
+					{ "code": "510824", "name": "苍溪县" }
+				]
+			},
+			{
+				"code": "5109",
+				"name": "遂宁市",
+				"children": [
+					{ "code": "510903", "name": "船山区" },
+					{ "code": "510904", "name": "安居区" },
+					{ "code": "510921", "name": "蓬溪县" },
+					{ "code": "510923", "name": "大英县" },
+					{ "code": "510981", "name": "射洪市" }
+				]
+			},
+			{
+				"code": "5110",
+				"name": "内江市",
+				"children": [
+					{ "code": "511002", "name": "市中区" },
+					{ "code": "511011", "name": "东兴区" },
+					{ "code": "511024", "name": "威远县" },
+					{ "code": "511025", "name": "资中县" },
+					{ "code": "511071", "name": "内江经济开发区" },
+					{ "code": "511083", "name": "隆昌市" }
+				]
+			},
+			{
+				"code": "5111",
+				"name": "乐山市",
+				"children": [
+					{ "code": "511102", "name": "市中区" },
+					{ "code": "511111", "name": "沙湾区" },
+					{ "code": "511112", "name": "五通桥区" },
+					{ "code": "511113", "name": "金口河区" },
+					{ "code": "511123", "name": "犍为县" },
+					{ "code": "511124", "name": "井研县" },
+					{ "code": "511126", "name": "夹江县" },
+					{ "code": "511129", "name": "沐川县" },
+					{ "code": "511132", "name": "峨边彝族自治县" },
+					{ "code": "511133", "name": "马边彝族自治县" },
+					{ "code": "511181", "name": "峨眉山市" }
+				]
+			},
+			{
+				"code": "5113",
+				"name": "南充市",
+				"children": [
+					{ "code": "511302", "name": "顺庆区" },
+					{ "code": "511303", "name": "高坪区" },
+					{ "code": "511304", "name": "嘉陵区" },
+					{ "code": "511321", "name": "南部县" },
+					{ "code": "511322", "name": "营山县" },
+					{ "code": "511323", "name": "蓬安县" },
+					{ "code": "511324", "name": "仪陇县" },
+					{ "code": "511325", "name": "西充县" },
+					{ "code": "511381", "name": "阆中市" }
+				]
+			},
+			{
+				"code": "5114",
+				"name": "眉山市",
+				"children": [
+					{ "code": "511402", "name": "东坡区" },
+					{ "code": "511403", "name": "彭山区" },
+					{ "code": "511421", "name": "仁寿县" },
+					{ "code": "511423", "name": "洪雅县" },
+					{ "code": "511424", "name": "丹棱县" },
+					{ "code": "511425", "name": "青神县" }
+				]
+			},
+			{
+				"code": "5115",
+				"name": "宜宾市",
+				"children": [
+					{ "code": "511502", "name": "翠屏区" },
+					{ "code": "511503", "name": "南溪区" },
+					{ "code": "511504", "name": "叙州区" },
+					{ "code": "511523", "name": "江安县" },
+					{ "code": "511524", "name": "长宁县" },
+					{ "code": "511525", "name": "高县" },
+					{ "code": "511526", "name": "珙县" },
+					{ "code": "511527", "name": "筠连县" },
+					{ "code": "511528", "name": "兴文县" },
+					{ "code": "511529", "name": "屏山县" }
+				]
+			},
+			{
+				"code": "5116",
+				"name": "广安市",
+				"children": [
+					{ "code": "511602", "name": "广安区" },
+					{ "code": "511603", "name": "前锋区" },
+					{ "code": "511621", "name": "岳池县" },
+					{ "code": "511622", "name": "武胜县" },
+					{ "code": "511623", "name": "邻水县" },
+					{ "code": "511681", "name": "华蓥市" }
+				]
+			},
+			{
+				"code": "5117",
+				"name": "达州市",
+				"children": [
+					{ "code": "511702", "name": "通川区" },
+					{ "code": "511703", "name": "达川区" },
+					{ "code": "511722", "name": "宣汉县" },
+					{ "code": "511723", "name": "开江县" },
+					{ "code": "511724", "name": "大竹县" },
+					{ "code": "511725", "name": "渠县" },
+					{ "code": "511771", "name": "达州经济开发区" },
+					{ "code": "511781", "name": "万源市" }
+				]
+			},
+			{
+				"code": "5118",
+				"name": "雅安市",
+				"children": [
+					{ "code": "511802", "name": "雨城区" },
+					{ "code": "511803", "name": "名山区" },
+					{ "code": "511822", "name": "荥经县" },
+					{ "code": "511823", "name": "汉源县" },
+					{ "code": "511824", "name": "石棉县" },
+					{ "code": "511825", "name": "天全县" },
+					{ "code": "511826", "name": "芦山县" },
+					{ "code": "511827", "name": "宝兴县" }
+				]
+			},
+			{
+				"code": "5119",
+				"name": "巴中市",
+				"children": [
+					{ "code": "511902", "name": "巴州区" },
+					{ "code": "511903", "name": "恩阳区" },
+					{ "code": "511921", "name": "通江县" },
+					{ "code": "511922", "name": "南江县" },
+					{ "code": "511923", "name": "平昌县" },
+					{ "code": "511971", "name": "巴中经济开发区" }
+				]
+			},
+			{
+				"code": "5120",
+				"name": "资阳市",
+				"children": [
+					{ "code": "512002", "name": "雁江区" },
+					{ "code": "512021", "name": "安岳县" },
+					{ "code": "512022", "name": "乐至县" }
+				]
+			},
+			{
+				"code": "5132",
+				"name": "阿坝藏族羌族自治州",
+				"children": [
+					{ "code": "513201", "name": "马尔康市" },
+					{ "code": "513221", "name": "汶川县" },
+					{ "code": "513222", "name": "理县" },
+					{ "code": "513223", "name": "茂县" },
+					{ "code": "513224", "name": "松潘县" },
+					{ "code": "513225", "name": "九寨沟县" },
+					{ "code": "513226", "name": "金川县" },
+					{ "code": "513227", "name": "小金县" },
+					{ "code": "513228", "name": "黑水县" },
+					{ "code": "513230", "name": "壤塘县" },
+					{ "code": "513231", "name": "阿坝县" },
+					{ "code": "513232", "name": "若尔盖县" },
+					{ "code": "513233", "name": "红原县" }
+				]
+			},
+			{
+				"code": "5133",
+				"name": "甘孜藏族自治州",
+				"children": [
+					{ "code": "513301", "name": "康定市" },
+					{ "code": "513322", "name": "泸定县" },
+					{ "code": "513323", "name": "丹巴县" },
+					{ "code": "513324", "name": "九龙县" },
+					{ "code": "513325", "name": "雅江县" },
+					{ "code": "513326", "name": "道孚县" },
+					{ "code": "513327", "name": "炉霍县" },
+					{ "code": "513328", "name": "甘孜县" },
+					{ "code": "513329", "name": "新龙县" },
+					{ "code": "513330", "name": "德格县" },
+					{ "code": "513331", "name": "白玉县" },
+					{ "code": "513332", "name": "石渠县" },
+					{ "code": "513333", "name": "色达县" },
+					{ "code": "513334", "name": "理塘县" },
+					{ "code": "513335", "name": "巴塘县" },
+					{ "code": "513336", "name": "乡城县" },
+					{ "code": "513337", "name": "稻城县" },
+					{ "code": "513338", "name": "得荣县" }
+				]
+			},
+			{
+				"code": "5134",
+				"name": "凉山彝族自治州",
+				"children": [
+					{ "code": "513401", "name": "西昌市" },
+					{ "code": "513422", "name": "木里藏族自治县" },
+					{ "code": "513423", "name": "盐源县" },
+					{ "code": "513424", "name": "德昌县" },
+					{ "code": "513425", "name": "会理县" },
+					{ "code": "513426", "name": "会东县" },
+					{ "code": "513427", "name": "宁南县" },
+					{ "code": "513428", "name": "普格县" },
+					{ "code": "513429", "name": "布拖县" },
+					{ "code": "513430", "name": "金阳县" },
+					{ "code": "513431", "name": "昭觉县" },
+					{ "code": "513432", "name": "喜德县" },
+					{ "code": "513433", "name": "冕宁县" },
+					{ "code": "513434", "name": "越西县" },
+					{ "code": "513435", "name": "甘洛县" },
+					{ "code": "513436", "name": "美姑县" },
+					{ "code": "513437", "name": "雷波县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "52",
+		"name": "贵州省",
+		"children": [
+			{
+				"code": "5201",
+				"name": "贵阳市",
+				"children": [
+					{ "code": "520102", "name": "南明区" },
+					{ "code": "520103", "name": "云岩区" },
+					{ "code": "520111", "name": "花溪区" },
+					{ "code": "520112", "name": "乌当区" },
+					{ "code": "520113", "name": "白云区" },
+					{ "code": "520115", "name": "观山湖区" },
+					{ "code": "520121", "name": "开阳县" },
+					{ "code": "520122", "name": "息烽县" },
+					{ "code": "520123", "name": "修文县" },
+					{ "code": "520181", "name": "清镇市" }
+				]
+			},
+			{
+				"code": "5202",
+				"name": "六盘水市",
+				"children": [
+					{ "code": "520201", "name": "钟山区" },
+					{ "code": "520203", "name": "六枝特区" },
+					{ "code": "520221", "name": "水城县" },
+					{ "code": "520281", "name": "盘州市" }
+				]
+			},
+			{
+				"code": "5203",
+				"name": "遵义市",
+				"children": [
+					{ "code": "520302", "name": "红花岗区" },
+					{ "code": "520303", "name": "汇川区" },
+					{ "code": "520304", "name": "播州区" },
+					{ "code": "520322", "name": "桐梓县" },
+					{ "code": "520323", "name": "绥阳县" },
+					{ "code": "520324", "name": "正安县" },
+					{ "code": "520325", "name": "道真仡佬族苗族自治县" },
+					{ "code": "520326", "name": "务川仡佬族苗族自治县" },
+					{ "code": "520327", "name": "凤冈县" },
+					{ "code": "520328", "name": "湄潭县" },
+					{ "code": "520329", "name": "余庆县" },
+					{ "code": "520330", "name": "习水县" },
+					{ "code": "520381", "name": "赤水市" },
+					{ "code": "520382", "name": "仁怀市" }
+				]
+			},
+			{
+				"code": "5204",
+				"name": "安顺市",
+				"children": [
+					{ "code": "520402", "name": "西秀区" },
+					{ "code": "520403", "name": "平坝区" },
+					{ "code": "520422", "name": "普定县" },
+					{ "code": "520423", "name": "镇宁布依族苗族自治县" },
+					{ "code": "520424", "name": "关岭布依族苗族自治县" },
+					{ "code": "520425", "name": "紫云苗族布依族自治县" }
+				]
+			},
+			{
+				"code": "5205",
+				"name": "毕节市",
+				"children": [
+					{ "code": "520502", "name": "七星关区" },
+					{ "code": "520521", "name": "大方县" },
+					{ "code": "520522", "name": "黔西县" },
+					{ "code": "520523", "name": "金沙县" },
+					{ "code": "520524", "name": "织金县" },
+					{ "code": "520525", "name": "纳雍县" },
+					{ "code": "520526", "name": "威宁彝族回族苗族自治县" },
+					{ "code": "520527", "name": "赫章县" }
+				]
+			},
+			{
+				"code": "5206",
+				"name": "铜仁市",
+				"children": [
+					{ "code": "520602", "name": "碧江区" },
+					{ "code": "520603", "name": "万山区" },
+					{ "code": "520621", "name": "江口县" },
+					{ "code": "520622", "name": "玉屏侗族自治县" },
+					{ "code": "520623", "name": "石阡县" },
+					{ "code": "520624", "name": "思南县" },
+					{ "code": "520625", "name": "印江土家族苗族自治县" },
+					{ "code": "520626", "name": "德江县" },
+					{ "code": "520627", "name": "沿河土家族自治县" },
+					{ "code": "520628", "name": "松桃苗族自治县" }
+				]
+			},
+			{
+				"code": "5223",
+				"name": "黔西南布依族苗族自治州",
+				"children": [
+					{ "code": "522301", "name": "兴义市" },
+					{ "code": "522302", "name": "兴仁市" },
+					{ "code": "522323", "name": "普安县" },
+					{ "code": "522324", "name": "晴隆县" },
+					{ "code": "522325", "name": "贞丰县" },
+					{ "code": "522326", "name": "望谟县" },
+					{ "code": "522327", "name": "册亨县" },
+					{ "code": "522328", "name": "安龙县" }
+				]
+			},
+			{
+				"code": "5226",
+				"name": "黔东南苗族侗族自治州",
+				"children": [
+					{ "code": "522601", "name": "凯里市" },
+					{ "code": "522622", "name": "黄平县" },
+					{ "code": "522623", "name": "施秉县" },
+					{ "code": "522624", "name": "三穗县" },
+					{ "code": "522625", "name": "镇远县" },
+					{ "code": "522626", "name": "岑巩县" },
+					{ "code": "522627", "name": "天柱县" },
+					{ "code": "522628", "name": "锦屏县" },
+					{ "code": "522629", "name": "剑河县" },
+					{ "code": "522630", "name": "台江县" },
+					{ "code": "522631", "name": "黎平县" },
+					{ "code": "522632", "name": "榕江县" },
+					{ "code": "522633", "name": "从江县" },
+					{ "code": "522634", "name": "雷山县" },
+					{ "code": "522635", "name": "麻江县" },
+					{ "code": "522636", "name": "丹寨县" }
+				]
+			},
+			{
+				"code": "5227",
+				"name": "黔南布依族苗族自治州",
+				"children": [
+					{ "code": "522701", "name": "都匀市" },
+					{ "code": "522702", "name": "福泉市" },
+					{ "code": "522722", "name": "荔波县" },
+					{ "code": "522723", "name": "贵定县" },
+					{ "code": "522725", "name": "瓮安县" },
+					{ "code": "522726", "name": "独山县" },
+					{ "code": "522727", "name": "平塘县" },
+					{ "code": "522728", "name": "罗甸县" },
+					{ "code": "522729", "name": "长顺县" },
+					{ "code": "522730", "name": "龙里县" },
+					{ "code": "522731", "name": "惠水县" },
+					{ "code": "522732", "name": "三都水族自治县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "53",
+		"name": "云南省",
+		"children": [
+			{
+				"code": "5301",
+				"name": "昆明市",
+				"children": [
+					{ "code": "530102", "name": "五华区" },
+					{ "code": "530103", "name": "盘龙区" },
+					{ "code": "530111", "name": "官渡区" },
+					{ "code": "530112", "name": "西山区" },
+					{ "code": "530113", "name": "东川区" },
+					{ "code": "530114", "name": "呈贡区" },
+					{ "code": "530115", "name": "晋宁区" },
+					{ "code": "530124", "name": "富民县" },
+					{ "code": "530125", "name": "宜良县" },
+					{ "code": "530126", "name": "石林彝族自治县" },
+					{ "code": "530127", "name": "嵩明县" },
+					{ "code": "530128", "name": "禄劝彝族苗族自治县" },
+					{ "code": "530129", "name": "寻甸回族彝族自治县" },
+					{ "code": "530181", "name": "安宁市" }
+				]
+			},
+			{
+				"code": "5303",
+				"name": "曲靖市",
+				"children": [
+					{ "code": "530302", "name": "麒麟区" },
+					{ "code": "530303", "name": "沾益区" },
+					{ "code": "530304", "name": "马龙区" },
+					{ "code": "530322", "name": "陆良县" },
+					{ "code": "530323", "name": "师宗县" },
+					{ "code": "530324", "name": "罗平县" },
+					{ "code": "530325", "name": "富源县" },
+					{ "code": "530326", "name": "会泽县" },
+					{ "code": "530381", "name": "宣威市" }
+				]
+			},
+			{
+				"code": "5304",
+				"name": "玉溪市",
+				"children": [
+					{ "code": "530402", "name": "红塔区" },
+					{ "code": "530403", "name": "江川区" },
+					{ "code": "530422", "name": "澄江县" },
+					{ "code": "530423", "name": "通海县" },
+					{ "code": "530424", "name": "华宁县" },
+					{ "code": "530425", "name": "易门县" },
+					{ "code": "530426", "name": "峨山彝族自治县" },
+					{ "code": "530427", "name": "新平彝族傣族自治县" },
+					{ "code": "530428", "name": "元江哈尼族彝族傣族自治县" }
+				]
+			},
+			{
+				"code": "5305",
+				"name": "保山市",
+				"children": [
+					{ "code": "530502", "name": "隆阳区" },
+					{ "code": "530521", "name": "施甸县" },
+					{ "code": "530523", "name": "龙陵县" },
+					{ "code": "530524", "name": "昌宁县" },
+					{ "code": "530581", "name": "腾冲市" }
+				]
+			},
+			{
+				"code": "5306",
+				"name": "昭通市",
+				"children": [
+					{ "code": "530602", "name": "昭阳区" },
+					{ "code": "530621", "name": "鲁甸县" },
+					{ "code": "530622", "name": "巧家县" },
+					{ "code": "530623", "name": "盐津县" },
+					{ "code": "530624", "name": "大关县" },
+					{ "code": "530625", "name": "永善县" },
+					{ "code": "530626", "name": "绥江县" },
+					{ "code": "530627", "name": "镇雄县" },
+					{ "code": "530628", "name": "彝良县" },
+					{ "code": "530629", "name": "威信县" },
+					{ "code": "530681", "name": "水富市" }
+				]
+			},
+			{
+				"code": "5307",
+				"name": "丽江市",
+				"children": [
+					{ "code": "530702", "name": "古城区" },
+					{ "code": "530721", "name": "玉龙纳西族自治县" },
+					{ "code": "530722", "name": "永胜县" },
+					{ "code": "530723", "name": "华坪县" },
+					{ "code": "530724", "name": "宁蒗彝族自治县" }
+				]
+			},
+			{
+				"code": "5308",
+				"name": "普洱市",
+				"children": [
+					{ "code": "530802", "name": "思茅区" },
+					{ "code": "530821", "name": "宁洱哈尼族彝族自治县" },
+					{ "code": "530822", "name": "墨江哈尼族自治县" },
+					{ "code": "530823", "name": "景东彝族自治县" },
+					{ "code": "530824", "name": "景谷傣族彝族自治县" },
+					{ "code": "530825", "name": "镇沅彝族哈尼族拉祜族自治县" },
+					{ "code": "530826", "name": "江城哈尼族彝族自治县" },
+					{ "code": "530827", "name": "孟连傣族拉祜族佤族自治县" },
+					{ "code": "530828", "name": "澜沧拉祜族自治县" },
+					{ "code": "530829", "name": "西盟佤族自治县" }
+				]
+			},
+			{
+				"code": "5309",
+				"name": "临沧市",
+				"children": [
+					{ "code": "530902", "name": "临翔区" },
+					{ "code": "530921", "name": "凤庆县" },
+					{ "code": "530922", "name": "云县" },
+					{ "code": "530923", "name": "永德县" },
+					{ "code": "530924", "name": "镇康县" },
+					{ "code": "530925", "name": "双江拉祜族佤族布朗族傣族自治县" },
+					{ "code": "530926", "name": "耿马傣族佤族自治县" },
+					{ "code": "530927", "name": "沧源佤族自治县" }
+				]
+			},
+			{
+				"code": "5323",
+				"name": "楚雄彝族自治州",
+				"children": [
+					{ "code": "532301", "name": "楚雄市" },
+					{ "code": "532322", "name": "双柏县" },
+					{ "code": "532323", "name": "牟定县" },
+					{ "code": "532324", "name": "南华县" },
+					{ "code": "532325", "name": "姚安县" },
+					{ "code": "532326", "name": "大姚县" },
+					{ "code": "532327", "name": "永仁县" },
+					{ "code": "532328", "name": "元谋县" },
+					{ "code": "532329", "name": "武定县" },
+					{ "code": "532331", "name": "禄丰县" }
+				]
+			},
+			{
+				"code": "5325",
+				"name": "红河哈尼族彝族自治州",
+				"children": [
+					{ "code": "532501", "name": "个旧市" },
+					{ "code": "532502", "name": "开远市" },
+					{ "code": "532503", "name": "蒙自市" },
+					{ "code": "532504", "name": "弥勒市" },
+					{ "code": "532523", "name": "屏边苗族自治县" },
+					{ "code": "532524", "name": "建水县" },
+					{ "code": "532525", "name": "石屏县" },
+					{ "code": "532527", "name": "泸西县" },
+					{ "code": "532528", "name": "元阳县" },
+					{ "code": "532529", "name": "红河县" },
+					{ "code": "532530", "name": "金平苗族瑶族傣族自治县" },
+					{ "code": "532531", "name": "绿春县" },
+					{ "code": "532532", "name": "河口瑶族自治县" }
+				]
+			},
+			{
+				"code": "5326",
+				"name": "文山壮族苗族自治州",
+				"children": [
+					{ "code": "532601", "name": "文山市" },
+					{ "code": "532622", "name": "砚山县" },
+					{ "code": "532623", "name": "西畴县" },
+					{ "code": "532624", "name": "麻栗坡县" },
+					{ "code": "532625", "name": "马关县" },
+					{ "code": "532626", "name": "丘北县" },
+					{ "code": "532627", "name": "广南县" },
+					{ "code": "532628", "name": "富宁县" }
+				]
+			},
+			{
+				"code": "5328",
+				"name": "西双版纳傣族自治州",
+				"children": [
+					{ "code": "532801", "name": "景洪市" },
+					{ "code": "532822", "name": "勐海县" },
+					{ "code": "532823", "name": "勐腊县" }
+				]
+			},
+			{
+				"code": "5329",
+				"name": "大理白族自治州",
+				"children": [
+					{ "code": "532901", "name": "大理市" },
+					{ "code": "532922", "name": "漾濞彝族自治县" },
+					{ "code": "532923", "name": "祥云县" },
+					{ "code": "532924", "name": "宾川县" },
+					{ "code": "532925", "name": "弥渡县" },
+					{ "code": "532926", "name": "南涧彝族自治县" },
+					{ "code": "532927", "name": "巍山彝族回族自治县" },
+					{ "code": "532928", "name": "永平县" },
+					{ "code": "532929", "name": "云龙县" },
+					{ "code": "532930", "name": "洱源县" },
+					{ "code": "532931", "name": "剑川县" },
+					{ "code": "532932", "name": "鹤庆县" }
+				]
+			},
+			{
+				"code": "5331",
+				"name": "德宏傣族景颇族自治州",
+				"children": [
+					{ "code": "533102", "name": "瑞丽市" },
+					{ "code": "533103", "name": "芒市" },
+					{ "code": "533122", "name": "梁河县" },
+					{ "code": "533123", "name": "盈江县" },
+					{ "code": "533124", "name": "陇川县" }
+				]
+			},
+			{
+				"code": "5333",
+				"name": "怒江傈僳族自治州",
+				"children": [
+					{ "code": "533301", "name": "泸水市" },
+					{ "code": "533323", "name": "福贡县" },
+					{ "code": "533324", "name": "贡山独龙族怒族自治县" },
+					{ "code": "533325", "name": "兰坪白族普米族自治县" }
+				]
+			},
+			{
+				"code": "5334",
+				"name": "迪庆藏族自治州",
+				"children": [
+					{ "code": "533401", "name": "香格里拉市" },
+					{ "code": "533422", "name": "德钦县" },
+					{ "code": "533423", "name": "维西傈僳族自治县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "54",
+		"name": "西藏自治区",
+		"children": [
+			{
+				"code": "5401",
+				"name": "拉萨市",
+				"children": [
+					{ "code": "540102", "name": "城关区" },
+					{ "code": "540103", "name": "堆龙德庆区" },
+					{ "code": "540104", "name": "达孜区" },
+					{ "code": "540121", "name": "林周县" },
+					{ "code": "540122", "name": "当雄县" },
+					{ "code": "540123", "name": "尼木县" },
+					{ "code": "540124", "name": "曲水县" },
+					{ "code": "540127", "name": "墨竹工卡县" },
+					{ "code": "540171", "name": "格尔木藏青工业园区" },
+					{ "code": "540172", "name": "拉萨经济技术开发区" },
+					{ "code": "540173", "name": "西藏文化旅游创意园区" },
+					{ "code": "540174", "name": "达孜工业园区" }
+				]
+			},
+			{
+				"code": "5402",
+				"name": "日喀则市",
+				"children": [
+					{ "code": "540202", "name": "桑珠孜区" },
+					{ "code": "540221", "name": "南木林县" },
+					{ "code": "540222", "name": "江孜县" },
+					{ "code": "540223", "name": "定日县" },
+					{ "code": "540224", "name": "萨迦县" },
+					{ "code": "540225", "name": "拉孜县" },
+					{ "code": "540226", "name": "昂仁县" },
+					{ "code": "540227", "name": "谢通门县" },
+					{ "code": "540228", "name": "白朗县" },
+					{ "code": "540229", "name": "仁布县" },
+					{ "code": "540230", "name": "康马县" },
+					{ "code": "540231", "name": "定结县" },
+					{ "code": "540232", "name": "仲巴县" },
+					{ "code": "540233", "name": "亚东县" },
+					{ "code": "540234", "name": "吉隆县" },
+					{ "code": "540235", "name": "聂拉木县" },
+					{ "code": "540236", "name": "萨嘎县" },
+					{ "code": "540237", "name": "岗巴县" }
+				]
+			},
+			{
+				"code": "5403",
+				"name": "昌都市",
+				"children": [
+					{ "code": "540302", "name": "卡若区" },
+					{ "code": "540321", "name": "江达县" },
+					{ "code": "540322", "name": "贡觉县" },
+					{ "code": "540323", "name": "类乌齐县" },
+					{ "code": "540324", "name": "丁青县" },
+					{ "code": "540325", "name": "察雅县" },
+					{ "code": "540326", "name": "八宿县" },
+					{ "code": "540327", "name": "左贡县" },
+					{ "code": "540328", "name": "芒康县" },
+					{ "code": "540329", "name": "洛隆县" },
+					{ "code": "540330", "name": "边坝县" }
+				]
+			},
+			{
+				"code": "5404",
+				"name": "林芝市",
+				"children": [
+					{ "code": "540402", "name": "巴宜区" },
+					{ "code": "540421", "name": "工布江达县" },
+					{ "code": "540422", "name": "米林县" },
+					{ "code": "540423", "name": "墨脱县" },
+					{ "code": "540424", "name": "波密县" },
+					{ "code": "540425", "name": "察隅县" },
+					{ "code": "540426", "name": "朗县" }
+				]
+			},
+			{
+				"code": "5405",
+				"name": "山南市",
+				"children": [
+					{ "code": "540502", "name": "乃东区" },
+					{ "code": "540521", "name": "扎囊县" },
+					{ "code": "540522", "name": "贡嘎县" },
+					{ "code": "540523", "name": "桑日县" },
+					{ "code": "540524", "name": "琼结县" },
+					{ "code": "540525", "name": "曲松县" },
+					{ "code": "540526", "name": "措美县" },
+					{ "code": "540527", "name": "洛扎县" },
+					{ "code": "540528", "name": "加查县" },
+					{ "code": "540529", "name": "隆子县" },
+					{ "code": "540530", "name": "错那县" },
+					{ "code": "540531", "name": "浪卡子县" }
+				]
+			},
+			{
+				"code": "5406",
+				"name": "那曲市",
+				"children": [
+					{ "code": "540602", "name": "色尼区" },
+					{ "code": "540621", "name": "嘉黎县" },
+					{ "code": "540622", "name": "比如县" },
+					{ "code": "540623", "name": "聂荣县" },
+					{ "code": "540624", "name": "安多县" },
+					{ "code": "540625", "name": "申扎县" },
+					{ "code": "540626", "name": "索县" },
+					{ "code": "540627", "name": "班戈县" },
+					{ "code": "540628", "name": "巴青县" },
+					{ "code": "540629", "name": "尼玛县" },
+					{ "code": "540630", "name": "双湖县" }
+				]
+			},
+			{
+				"code": "5425",
+				"name": "阿里地区",
+				"children": [
+					{ "code": "542521", "name": "普兰县" },
+					{ "code": "542522", "name": "札达县" },
+					{ "code": "542523", "name": "噶尔县" },
+					{ "code": "542524", "name": "日土县" },
+					{ "code": "542525", "name": "革吉县" },
+					{ "code": "542526", "name": "改则县" },
+					{ "code": "542527", "name": "措勤县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "61",
+		"name": "陕西省",
+		"children": [
+			{
+				"code": "6101",
+				"name": "西安市",
+				"children": [
+					{ "code": "610102", "name": "新城区" },
+					{ "code": "610103", "name": "碑林区" },
+					{ "code": "610104", "name": "莲湖区" },
+					{ "code": "610111", "name": "灞桥区" },
+					{ "code": "610112", "name": "未央区" },
+					{ "code": "610113", "name": "雁塔区" },
+					{ "code": "610114", "name": "阎良区" },
+					{ "code": "610115", "name": "临潼区" },
+					{ "code": "610116", "name": "长安区" },
+					{ "code": "610117", "name": "高陵区" },
+					{ "code": "610118", "name": "鄠邑区" },
+					{ "code": "610122", "name": "蓝田县" },
+					{ "code": "610124", "name": "周至县" }
+				]
+			},
+			{
+				"code": "6102",
+				"name": "铜川市",
+				"children": [
+					{ "code": "610202", "name": "王益区" },
+					{ "code": "610203", "name": "印台区" },
+					{ "code": "610204", "name": "耀州区" },
+					{ "code": "610222", "name": "宜君县" }
+				]
+			},
+			{
+				"code": "6103",
+				"name": "宝鸡市",
+				"children": [
+					{ "code": "610302", "name": "渭滨区" },
+					{ "code": "610303", "name": "金台区" },
+					{ "code": "610304", "name": "陈仓区" },
+					{ "code": "610322", "name": "凤翔县" },
+					{ "code": "610323", "name": "岐山县" },
+					{ "code": "610324", "name": "扶风县" },
+					{ "code": "610326", "name": "眉县" },
+					{ "code": "610327", "name": "陇县" },
+					{ "code": "610328", "name": "千阳县" },
+					{ "code": "610329", "name": "麟游县" },
+					{ "code": "610330", "name": "凤县" },
+					{ "code": "610331", "name": "太白县" }
+				]
+			},
+			{
+				"code": "6104",
+				"name": "咸阳市",
+				"children": [
+					{ "code": "610402", "name": "秦都区" },
+					{ "code": "610403", "name": "杨陵区" },
+					{ "code": "610404", "name": "渭城区" },
+					{ "code": "610422", "name": "三原县" },
+					{ "code": "610423", "name": "泾阳县" },
+					{ "code": "610424", "name": "乾县" },
+					{ "code": "610425", "name": "礼泉县" },
+					{ "code": "610426", "name": "永寿县" },
+					{ "code": "610428", "name": "长武县" },
+					{ "code": "610429", "name": "旬邑县" },
+					{ "code": "610430", "name": "淳化县" },
+					{ "code": "610431", "name": "武功县" },
+					{ "code": "610481", "name": "兴平市" },
+					{ "code": "610482", "name": "彬州市" }
+				]
+			},
+			{
+				"code": "6105",
+				"name": "渭南市",
+				"children": [
+					{ "code": "610502", "name": "临渭区" },
+					{ "code": "610503", "name": "华州区" },
+					{ "code": "610522", "name": "潼关县" },
+					{ "code": "610523", "name": "大荔县" },
+					{ "code": "610524", "name": "合阳县" },
+					{ "code": "610525", "name": "澄城县" },
+					{ "code": "610526", "name": "蒲城县" },
+					{ "code": "610527", "name": "白水县" },
+					{ "code": "610528", "name": "富平县" },
+					{ "code": "610581", "name": "韩城市" },
+					{ "code": "610582", "name": "华阴市" }
+				]
+			},
+			{
+				"code": "6106",
+				"name": "延安市",
+				"children": [
+					{ "code": "610602", "name": "宝塔区" },
+					{ "code": "610603", "name": "安塞区" },
+					{ "code": "610621", "name": "延长县" },
+					{ "code": "610622", "name": "延川县" },
+					{ "code": "610625", "name": "志丹县" },
+					{ "code": "610626", "name": "吴起县" },
+					{ "code": "610627", "name": "甘泉县" },
+					{ "code": "610628", "name": "富县" },
+					{ "code": "610629", "name": "洛川县" },
+					{ "code": "610630", "name": "宜川县" },
+					{ "code": "610631", "name": "黄龙县" },
+					{ "code": "610632", "name": "黄陵县" },
+					{ "code": "610681", "name": "子长市" }
+				]
+			},
+			{
+				"code": "6107",
+				"name": "汉中市",
+				"children": [
+					{ "code": "610702", "name": "汉台区" },
+					{ "code": "610703", "name": "南郑区" },
+					{ "code": "610722", "name": "城固县" },
+					{ "code": "610723", "name": "洋县" },
+					{ "code": "610724", "name": "西乡县" },
+					{ "code": "610725", "name": "勉县" },
+					{ "code": "610726", "name": "宁强县" },
+					{ "code": "610727", "name": "略阳县" },
+					{ "code": "610728", "name": "镇巴县" },
+					{ "code": "610729", "name": "留坝县" },
+					{ "code": "610730", "name": "佛坪县" }
+				]
+			},
+			{
+				"code": "6108",
+				"name": "榆林市",
+				"children": [
+					{ "code": "610802", "name": "榆阳区" },
+					{ "code": "610803", "name": "横山区" },
+					{ "code": "610822", "name": "府谷县" },
+					{ "code": "610824", "name": "靖边县" },
+					{ "code": "610825", "name": "定边县" },
+					{ "code": "610826", "name": "绥德县" },
+					{ "code": "610827", "name": "米脂县" },
+					{ "code": "610828", "name": "佳县" },
+					{ "code": "610829", "name": "吴堡县" },
+					{ "code": "610830", "name": "清涧县" },
+					{ "code": "610831", "name": "子洲县" },
+					{ "code": "610881", "name": "神木市" }
+				]
+			},
+			{
+				"code": "6109",
+				"name": "安康市",
+				"children": [
+					{ "code": "610902", "name": "汉滨区" },
+					{ "code": "610921", "name": "汉阴县" },
+					{ "code": "610922", "name": "石泉县" },
+					{ "code": "610923", "name": "宁陕县" },
+					{ "code": "610924", "name": "紫阳县" },
+					{ "code": "610925", "name": "岚皋县" },
+					{ "code": "610926", "name": "平利县" },
+					{ "code": "610927", "name": "镇坪县" },
+					{ "code": "610928", "name": "旬阳县" },
+					{ "code": "610929", "name": "白河县" }
+				]
+			},
+			{
+				"code": "6110",
+				"name": "商洛市",
+				"children": [
+					{ "code": "611002", "name": "商州区" },
+					{ "code": "611021", "name": "洛南县" },
+					{ "code": "611022", "name": "丹凤县" },
+					{ "code": "611023", "name": "商南县" },
+					{ "code": "611024", "name": "山阳县" },
+					{ "code": "611025", "name": "镇安县" },
+					{ "code": "611026", "name": "柞水县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "62",
+		"name": "甘肃省",
+		"children": [
+			{
+				"code": "6201",
+				"name": "兰州市",
+				"children": [
+					{ "code": "620102", "name": "城关区" },
+					{ "code": "620103", "name": "七里河区" },
+					{ "code": "620104", "name": "西固区" },
+					{ "code": "620105", "name": "安宁区" },
+					{ "code": "620111", "name": "红古区" },
+					{ "code": "620121", "name": "永登县" },
+					{ "code": "620122", "name": "皋兰县" },
+					{ "code": "620123", "name": "榆中县" },
+					{ "code": "620171", "name": "兰州新区" }
+				]
+			},
+			{
+				"code": "6202",
+				"name": "嘉峪关市",
+				"children": [
+					{ "code": "620201100", "name": "新城镇" },
+					{ "code": "620201101", "name": "峪泉镇" },
+					{ "code": "620201102", "name": "文殊镇" },
+					{ "code": "620201401", "name": "雄关区" },
+					{ "code": "620201402", "name": "镜铁区" },
+					{ "code": "620201403", "name": "长城区" }
+				]
+			},
+			{
+				"code": "6203",
+				"name": "金昌市",
+				"children": [
+					{ "code": "620302", "name": "金川区" },
+					{ "code": "620321", "name": "永昌县" }
+				]
+			},
+			{
+				"code": "6204",
+				"name": "白银市",
+				"children": [
+					{ "code": "620402", "name": "白银区" },
+					{ "code": "620403", "name": "平川区" },
+					{ "code": "620421", "name": "靖远县" },
+					{ "code": "620422", "name": "会宁县" },
+					{ "code": "620423", "name": "景泰县" }
+				]
+			},
+			{
+				"code": "6205",
+				"name": "天水市",
+				"children": [
+					{ "code": "620502", "name": "秦州区" },
+					{ "code": "620503", "name": "麦积区" },
+					{ "code": "620521", "name": "清水县" },
+					{ "code": "620522", "name": "秦安县" },
+					{ "code": "620523", "name": "甘谷县" },
+					{ "code": "620524", "name": "武山县" },
+					{ "code": "620525", "name": "张家川回族自治县" }
+				]
+			},
+			{
+				"code": "6206",
+				"name": "武威市",
+				"children": [
+					{ "code": "620602", "name": "凉州区" },
+					{ "code": "620621", "name": "民勤县" },
+					{ "code": "620622", "name": "古浪县" },
+					{ "code": "620623", "name": "天祝藏族自治县" }
+				]
+			},
+			{
+				"code": "6207",
+				"name": "张掖市",
+				"children": [
+					{ "code": "620702", "name": "甘州区" },
+					{ "code": "620721", "name": "肃南裕固族自治县" },
+					{ "code": "620722", "name": "民乐县" },
+					{ "code": "620723", "name": "临泽县" },
+					{ "code": "620724", "name": "高台县" },
+					{ "code": "620725", "name": "山丹县" }
+				]
+			},
+			{
+				"code": "6208",
+				"name": "平凉市",
+				"children": [
+					{ "code": "620802", "name": "崆峒区" },
+					{ "code": "620821", "name": "泾川县" },
+					{ "code": "620822", "name": "灵台县" },
+					{ "code": "620823", "name": "崇信县" },
+					{ "code": "620825", "name": "庄浪县" },
+					{ "code": "620826", "name": "静宁县" },
+					{ "code": "620881", "name": "华亭市" }
+				]
+			},
+			{
+				"code": "6209",
+				"name": "酒泉市",
+				"children": [
+					{ "code": "620902", "name": "肃州区" },
+					{ "code": "620921", "name": "金塔县" },
+					{ "code": "620922", "name": "瓜州县" },
+					{ "code": "620923", "name": "肃北蒙古族自治县" },
+					{ "code": "620924", "name": "阿克塞哈萨克族自治县" },
+					{ "code": "620981", "name": "玉门市" },
+					{ "code": "620982", "name": "敦煌市" }
+				]
+			},
+			{
+				"code": "6210",
+				"name": "庆阳市",
+				"children": [
+					{ "code": "621002", "name": "西峰区" },
+					{ "code": "621021", "name": "庆城县" },
+					{ "code": "621022", "name": "环县" },
+					{ "code": "621023", "name": "华池县" },
+					{ "code": "621024", "name": "合水县" },
+					{ "code": "621025", "name": "正宁县" },
+					{ "code": "621026", "name": "宁县" },
+					{ "code": "621027", "name": "镇原县" }
+				]
+			},
+			{
+				"code": "6211",
+				"name": "定西市",
+				"children": [
+					{ "code": "621102", "name": "安定区" },
+					{ "code": "621121", "name": "通渭县" },
+					{ "code": "621122", "name": "陇西县" },
+					{ "code": "621123", "name": "渭源县" },
+					{ "code": "621124", "name": "临洮县" },
+					{ "code": "621125", "name": "漳县" },
+					{ "code": "621126", "name": "岷县" }
+				]
+			},
+			{
+				"code": "6212",
+				"name": "陇南市",
+				"children": [
+					{ "code": "621202", "name": "武都区" },
+					{ "code": "621221", "name": "成县" },
+					{ "code": "621222", "name": "文县" },
+					{ "code": "621223", "name": "宕昌县" },
+					{ "code": "621224", "name": "康县" },
+					{ "code": "621225", "name": "西和县" },
+					{ "code": "621226", "name": "礼县" },
+					{ "code": "621227", "name": "徽县" },
+					{ "code": "621228", "name": "两当县" }
+				]
+			},
+			{
+				"code": "6229",
+				"name": "临夏回族自治州",
+				"children": [
+					{ "code": "622901", "name": "临夏市" },
+					{ "code": "622921", "name": "临夏县" },
+					{ "code": "622922", "name": "康乐县" },
+					{ "code": "622923", "name": "永靖县" },
+					{ "code": "622924", "name": "广河县" },
+					{ "code": "622925", "name": "和政县" },
+					{ "code": "622926", "name": "东乡族自治县" },
+					{ "code": "622927", "name": "积石山保安族东乡族撒拉族自治县" }
+				]
+			},
+			{
+				"code": "6230",
+				"name": "甘南藏族自治州",
+				"children": [
+					{ "code": "623001", "name": "合作市" },
+					{ "code": "623021", "name": "临潭县" },
+					{ "code": "623022", "name": "卓尼县" },
+					{ "code": "623023", "name": "舟曲县" },
+					{ "code": "623024", "name": "迭部县" },
+					{ "code": "623025", "name": "玛曲县" },
+					{ "code": "623026", "name": "碌曲县" },
+					{ "code": "623027", "name": "夏河县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "63",
+		"name": "青海省",
+		"children": [
+			{
+				"code": "6301",
+				"name": "西宁市",
+				"children": [
+					{ "code": "630102", "name": "城东区" },
+					{ "code": "630103", "name": "城中区" },
+					{ "code": "630104", "name": "城西区" },
+					{ "code": "630105", "name": "城北区" },
+					{ "code": "630121", "name": "大通回族土族自治县" },
+					{ "code": "630122", "name": "湟中县" },
+					{ "code": "630123", "name": "湟源县" }
+				]
+			},
+			{
+				"code": "6302",
+				"name": "海东市",
+				"children": [
+					{ "code": "630202", "name": "乐都区" },
+					{ "code": "630203", "name": "平安区" },
+					{ "code": "630222", "name": "民和回族土族自治县" },
+					{ "code": "630223", "name": "互助土族自治县" },
+					{ "code": "630224", "name": "化隆回族自治县" },
+					{ "code": "630225", "name": "循化撒拉族自治县" }
+				]
+			},
+			{
+				"code": "6322",
+				"name": "海北藏族自治州",
+				"children": [
+					{ "code": "632221", "name": "门源回族自治县" },
+					{ "code": "632222", "name": "祁连县" },
+					{ "code": "632223", "name": "海晏县" },
+					{ "code": "632224", "name": "刚察县" }
+				]
+			},
+			{
+				"code": "6323",
+				"name": "黄南藏族自治州",
+				"children": [
+					{ "code": "632321", "name": "同仁县" },
+					{ "code": "632322", "name": "尖扎县" },
+					{ "code": "632323", "name": "泽库县" },
+					{ "code": "632324", "name": "河南蒙古族自治县" }
+				]
+			},
+			{
+				"code": "6325",
+				"name": "海南藏族自治州",
+				"children": [
+					{ "code": "632521", "name": "共和县" },
+					{ "code": "632522", "name": "同德县" },
+					{ "code": "632523", "name": "贵德县" },
+					{ "code": "632524", "name": "兴海县" },
+					{ "code": "632525", "name": "贵南县" }
+				]
+			},
+			{
+				"code": "6326",
+				"name": "果洛藏族自治州",
+				"children": [
+					{ "code": "632621", "name": "玛沁县" },
+					{ "code": "632622", "name": "班玛县" },
+					{ "code": "632623", "name": "甘德县" },
+					{ "code": "632624", "name": "达日县" },
+					{ "code": "632625", "name": "久治县" },
+					{ "code": "632626", "name": "玛多县" }
+				]
+			},
+			{
+				"code": "6327",
+				"name": "玉树藏族自治州",
+				"children": [
+					{ "code": "632701", "name": "玉树市" },
+					{ "code": "632722", "name": "杂多县" },
+					{ "code": "632723", "name": "称多县" },
+					{ "code": "632724", "name": "治多县" },
+					{ "code": "632725", "name": "囊谦县" },
+					{ "code": "632726", "name": "曲麻莱县" }
+				]
+			},
+			{
+				"code": "6328",
+				"name": "海西蒙古族藏族自治州",
+				"children": [
+					{ "code": "632801", "name": "格尔木市" },
+					{ "code": "632802", "name": "德令哈市" },
+					{ "code": "632803", "name": "茫崖市" },
+					{ "code": "632821", "name": "乌兰县" },
+					{ "code": "632822", "name": "都兰县" },
+					{ "code": "632823", "name": "天峻县" },
+					{ "code": "632857", "name": "大柴旦行政委员会" }
+				]
+			}
+		]
+	},
+	{
+		"code": "64",
+		"name": "宁夏回族自治区",
+		"children": [
+			{
+				"code": "6401",
+				"name": "银川市",
+				"children": [
+					{ "code": "640104", "name": "兴庆区" },
+					{ "code": "640105", "name": "西夏区" },
+					{ "code": "640106", "name": "金凤区" },
+					{ "code": "640121", "name": "永宁县" },
+					{ "code": "640122", "name": "贺兰县" },
+					{ "code": "640181", "name": "灵武市" }
+				]
+			},
+			{
+				"code": "6402",
+				"name": "石嘴山市",
+				"children": [
+					{ "code": "640202", "name": "大武口区" },
+					{ "code": "640205", "name": "惠农区" },
+					{ "code": "640221", "name": "平罗县" }
+				]
+			},
+			{
+				"code": "6403",
+				"name": "吴忠市",
+				"children": [
+					{ "code": "640302", "name": "利通区" },
+					{ "code": "640303", "name": "红寺堡区" },
+					{ "code": "640323", "name": "盐池县" },
+					{ "code": "640324", "name": "同心县" },
+					{ "code": "640381", "name": "青铜峡市" }
+				]
+			},
+			{
+				"code": "6404",
+				"name": "固原市",
+				"children": [
+					{ "code": "640402", "name": "原州区" },
+					{ "code": "640422", "name": "西吉县" },
+					{ "code": "640423", "name": "隆德县" },
+					{ "code": "640424", "name": "泾源县" },
+					{ "code": "640425", "name": "彭阳县" }
+				]
+			},
+			{
+				"code": "6405",
+				"name": "中卫市",
+				"children": [
+					{ "code": "640502", "name": "沙坡头区" },
+					{ "code": "640521", "name": "中宁县" },
+					{ "code": "640522", "name": "海原县" }
+				]
+			}
+		]
+	},
+	{
+		"code": "65",
+		"name": "新疆维吾尔自治区",
+		"children": [
+			{
+				"code": "6501",
+				"name": "乌鲁木齐市",
+				"children": [
+					{ "code": "650102", "name": "天山区" },
+					{ "code": "650103", "name": "沙依巴克区" },
+					{ "code": "650104", "name": "新市区" },
+					{ "code": "650105", "name": "水磨沟区" },
+					{ "code": "650106", "name": "头屯河区" },
+					{ "code": "650107", "name": "达坂城区" },
+					{ "code": "650109", "name": "米东区" },
+					{ "code": "650121", "name": "乌鲁木齐县" }
+				]
+			},
+			{
+				"code": "6502",
+				"name": "克拉玛依市",
+				"children": [
+					{ "code": "650202", "name": "独山子区" },
+					{ "code": "650203", "name": "克拉玛依区" },
+					{ "code": "650204", "name": "白碱滩区" },
+					{ "code": "650205", "name": "乌尔禾区" }
+				]
+			},
+			{
+				"code": "6504",
+				"name": "吐鲁番市",
+				"children": [
+					{ "code": "650402", "name": "高昌区" },
+					{ "code": "650421", "name": "鄯善县" },
+					{ "code": "650422", "name": "托克逊县" }
+				]
+			},
+			{
+				"code": "6505",
+				"name": "哈密市",
+				"children": [
+					{ "code": "650502", "name": "伊州区" },
+					{ "code": "650521", "name": "巴里坤哈萨克自治县" },
+					{ "code": "650522", "name": "伊吾县" }
+				]
+			},
+			{
+				"code": "6523",
+				"name": "昌吉回族自治州",
+				"children": [
+					{ "code": "652301", "name": "昌吉市" },
+					{ "code": "652302", "name": "阜康市" },
+					{ "code": "652323", "name": "呼图壁县" },
+					{ "code": "652324", "name": "玛纳斯县" },
+					{ "code": "652325", "name": "奇台县" },
+					{ "code": "652327", "name": "吉木萨尔县" },
+					{ "code": "652328", "name": "木垒哈萨克自治县" }
+				]
+			},
+			{
+				"code": "6527",
+				"name": "博尔塔拉蒙古自治州",
+				"children": [
+					{ "code": "652701", "name": "博乐市" },
+					{ "code": "652702", "name": "阿拉山口市" },
+					{ "code": "652722", "name": "精河县" },
+					{ "code": "652723", "name": "温泉县" }
+				]
+			},
+			{
+				"code": "6528",
+				"name": "巴音郭楞蒙古自治州",
+				"children": [
+					{ "code": "652801", "name": "库尔勒市" },
+					{ "code": "652822", "name": "轮台县" },
+					{ "code": "652823", "name": "尉犁县" },
+					{ "code": "652824", "name": "若羌县" },
+					{ "code": "652825", "name": "且末县" },
+					{ "code": "652826", "name": "焉耆回族自治县" },
+					{ "code": "652827", "name": "和静县" },
+					{ "code": "652828", "name": "和硕县" },
+					{ "code": "652829", "name": "博湖县" },
+					{ "code": "652871", "name": "库尔勒经济技术开发区" }
+				]
+			},
+			{
+				"code": "6529",
+				"name": "阿克苏地区",
+				"children": [
+					{ "code": "652901", "name": "阿克苏市" },
+					{ "code": "652922", "name": "温宿县" },
+					{ "code": "652923", "name": "库车县" },
+					{ "code": "652924", "name": "沙雅县" },
+					{ "code": "652925", "name": "新和县" },
+					{ "code": "652926", "name": "拜城县" },
+					{ "code": "652927", "name": "乌什县" },
+					{ "code": "652928", "name": "阿瓦提县" },
+					{ "code": "652929", "name": "柯坪县" }
+				]
+			},
+			{
+				"code": "6530",
+				"name": "克孜勒苏柯尔克孜自治州",
+				"children": [
+					{ "code": "653001", "name": "阿图什市" },
+					{ "code": "653022", "name": "阿克陶县" },
+					{ "code": "653023", "name": "阿合奇县" },
+					{ "code": "653024", "name": "乌恰县" }
+				]
+			},
+			{
+				"code": "6531",
+				"name": "喀什地区",
+				"children": [
+					{ "code": "653101", "name": "喀什市" },
+					{ "code": "653121", "name": "疏附县" },
+					{ "code": "653122", "name": "疏勒县" },
+					{ "code": "653123", "name": "英吉沙县" },
+					{ "code": "653124", "name": "泽普县" },
+					{ "code": "653125", "name": "莎车县" },
+					{ "code": "653126", "name": "叶城县" },
+					{ "code": "653127", "name": "麦盖提县" },
+					{ "code": "653128", "name": "岳普湖县" },
+					{ "code": "653129", "name": "伽师县" },
+					{ "code": "653130", "name": "巴楚县" },
+					{ "code": "653131", "name": "塔什库尔干塔吉克自治县" }
+				]
+			},
+			{
+				"code": "6532",
+				"name": "和田地区",
+				"children": [
+					{ "code": "653201", "name": "和田市" },
+					{ "code": "653221", "name": "和田县" },
+					{ "code": "653222", "name": "墨玉县" },
+					{ "code": "653223", "name": "皮山县" },
+					{ "code": "653224", "name": "洛浦县" },
+					{ "code": "653225", "name": "策勒县" },
+					{ "code": "653226", "name": "于田县" },
+					{ "code": "653227", "name": "民丰县" }
+				]
+			},
+			{
+				"code": "6540",
+				"name": "伊犁哈萨克自治州",
+				"children": [
+					{ "code": "654002", "name": "伊宁市" },
+					{ "code": "654003", "name": "奎屯市" },
+					{ "code": "654004", "name": "霍尔果斯市" },
+					{ "code": "654021", "name": "伊宁县" },
+					{ "code": "654022", "name": "察布查尔锡伯自治县" },
+					{ "code": "654023", "name": "霍城县" },
+					{ "code": "654024", "name": "巩留县" },
+					{ "code": "654025", "name": "新源县" },
+					{ "code": "654026", "name": "昭苏县" },
+					{ "code": "654027", "name": "特克斯县" },
+					{ "code": "654028", "name": "尼勒克县" }
+				]
+			},
+			{
+				"code": "6542",
+				"name": "塔城地区",
+				"children": [
+					{ "code": "654201", "name": "塔城市" },
+					{ "code": "654202", "name": "乌苏市" },
+					{ "code": "654221", "name": "额敏县" },
+					{ "code": "654223", "name": "沙湾县" },
+					{ "code": "654224", "name": "托里县" },
+					{ "code": "654225", "name": "裕民县" },
+					{ "code": "654226", "name": "和布克赛尔蒙古自治县" }
+				]
+			},
+			{
+				"code": "6543",
+				"name": "阿勒泰地区",
+				"children": [
+					{ "code": "654301", "name": "阿勒泰市" },
+					{ "code": "654321", "name": "布尔津县" },
+					{ "code": "654322", "name": "富蕴县" },
+					{ "code": "654323", "name": "福海县" },
+					{ "code": "654324", "name": "哈巴河县" },
+					{ "code": "654325", "name": "青河县" },
+					{ "code": "654326", "name": "吉木乃县" }
+				]
+			},
+			{
+				"code": "6590",
+				"name": "自治区直辖县级行政区划",
+				"children": [
+					{ "code": "659001", "name": "石河子市" },
+					{ "code": "659002", "name": "阿拉尔市" },
+					{ "code": "659003", "name": "图木舒克市" },
+					{ "code": "659004", "name": "五家渠市" },
+					{ "code": "659006", "name": "铁门关市" }
+				]
+			}
+		]
+	}
+]
diff --git a/cool/components/distpicker/components/index.vue b/cool/components/distpicker/components/index.vue
new file mode 100644
index 0000000..12ab7be
--- /dev/null
+++ b/cool/components/distpicker/components/index.vue
@@ -0,0 +1,66 @@
+<template>
+	<div class="cl-distpicker">
+		<el-cascader
+			v-model="value2"
+			:options="data"
+			:filterable="filterable"
+			:size="size"
+			clearable
+			:props="{
+				label: 'name',
+				value: 'code',
+				multiple,
+				...props
+			}"
+			@change="onChange"
+		>
+		</el-cascader>
+	</div>
+</template>
+
+<script>
+import DataList from "./data";
+
+export default {
+	name: "cl-distpicker",
+
+	props: {
+		value: [String, Array],
+		filterable: Boolean,
+		multiple: Boolean,
+		size: String,
+		props: Object
+	},
+
+	data() {
+		return {
+			value2: undefined,
+			data: DataList
+		};
+	},
+
+	watch: {
+		value: {
+			immediate: true,
+			handler(val) {
+				this.value2 = val;
+			}
+		}
+	},
+
+	methods: {
+		onChange(arr) {
+			this.$emit("input", arr);
+			this.$emit("change", arr);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-distpicker {
+	/deep/.el-cascader {
+		width: 100%;
+	}
+}
+</style>
diff --git a/cool/components/distpicker/index.js b/cool/components/distpicker/index.js
new file mode 100644
index 0000000..20b96b7
--- /dev/null
+++ b/cool/components/distpicker/index.js
@@ -0,0 +1,7 @@
+import Distpicker from "./components";
+
+export default {
+	components: {
+		Distpicker
+	}
+};
diff --git a/cool/components/editor-quill/components/index.vue b/cool/components/editor-quill/components/index.vue
new file mode 100644
index 0000000..0966f9d
--- /dev/null
+++ b/cool/components/editor-quill/components/index.vue
@@ -0,0 +1,243 @@
+<template>
+	<div class="cl-editor-quill">
+		<div class="editor" :style="style"></div>
+
+		<cl-upload-space
+			ref="upload-space"
+			detail-data
+			:show-button="false"
+			@confirm="onUploadSpaceConfirm"
+		>
+		</cl-upload-space>
+	</div>
+</template>
+
+<script>
+import Quill from "quill";
+import "quill/dist/quill.snow.css";
+
+export default {
+	name: "cl-editor-quill",
+
+	props: {
+		value: null,
+		height: [String, Number],
+		width: [String, Number],
+		options: Object
+	},
+
+	data() {
+		return {
+			uploadURL: "",
+			content: "",
+			quill: null,
+			cursorIndex: 0
+		};
+	},
+
+	computed: {
+		style() {
+			let h = this.height;
+			let w = this.width;
+
+			if (!isNaN(Number(h))) {
+				h += "px";
+			}
+
+			if (!isNaN(Number(w))) {
+				h += "px";
+			}
+
+			return {
+				height: h,
+				width: w
+			};
+		}
+	},
+
+	watch: {
+		value(val) {
+			if (val) {
+				if (val !== this.content) {
+					this.setContent(val);
+				}
+			} else {
+				this.setContent("");
+			}
+		},
+
+		content(val) {
+			this.$emit("input", val);
+		}
+	},
+
+	mounted() {
+		this.quill = new Quill(this.$el.querySelector(".editor"), {
+			theme: "snow",
+			placeholder: "输入内容",
+			modules: {
+				toolbar: [
+					["bold", "italic", "underline", "strike"],
+					["blockquote", "code-block"],
+					[{ header: 1 }, { header: 2 }],
+					[{ list: "ordered" }, { list: "bullet" }],
+					[{ script: "sub" }, { script: "super" }],
+					[{ indent: "-1" }, { indent: "+1" }],
+					[{ direction: "rtl" }],
+					[{ size: ["small", false, "large", "huge"] }],
+					[{ header: [1, 2, 3, 4, 5, 6, false] }],
+					[{ color: [] }, { background: [] }],
+					[{ font: [] }],
+					[{ align: [] }],
+					["clean"],
+					["link", "image"]
+				]
+			},
+			...this.options
+		});
+
+		this.quill.getModule("toolbar").addHandler("image", this.uploadFileHandler);
+
+		this.quill.on("text-change", () => {
+			this.content = this.quill.root.innerHTML;
+		});
+
+		this.setContent(this.value);
+		this.$emit("load", this.quill);
+	},
+
+	methods: {
+		uploadFileHandler() {
+			const selection = this.quill.getSelection();
+
+			if (selection) {
+				this.cursorIndex = selection.index;
+			}
+
+			this.$refs["upload-space"].open();
+		},
+
+		onUploadSpaceConfirm(files) {
+			if (files.length > 0) {
+				files.forEach((file, i) => {
+					let [type] = file.type.split("/");
+
+					this.quill.insertEmbed(
+						this.cursorIndex + i,
+						type,
+						file.url,
+						Quill.sources.USER
+					);
+				});
+			}
+		},
+
+		setContent(val) {
+			this.quill.root.innerHTML = val || "";
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.cl-editor-quill {
+	background-color: #fff;
+
+	.ql-snow {
+		line-height: 22px !important;
+	}
+
+	.el-upload,
+	#quill-upload-btn {
+		display: none;
+	}
+
+	.ql-snow {
+		border: 1px solid #dcdfe6;
+	}
+
+	.ql-snow .ql-tooltip[data-mode="link"]::before {
+		content: "请输入链接地址:";
+	}
+
+	.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+		border-right: 0px;
+		content: "保存";
+		padding-right: 0px;
+	}
+
+	.ql-snow .ql-tooltip[data-mode="video"]::before {
+		content: "请输入视频地址:";
+	}
+
+	.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+	.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+		content: "14px";
+	}
+
+	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+		content: "10px";
+	}
+
+	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+		content: "18px";
+	}
+
+	.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+	.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+		content: "32px";
+	}
+
+	.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+	.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+		content: "文本";
+	}
+
+	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+		content: "标题1";
+	}
+
+	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+		content: "标题2";
+	}
+
+	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+		content: "标题3";
+	}
+
+	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+		content: "标题4";
+	}
+
+	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+		content: "标题5";
+	}
+
+	.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+	.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+		content: "标题6";
+	}
+
+	.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+	.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+		content: "标准字体";
+	}
+
+	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+		content: "衬线字体";
+	}
+
+	.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+	.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+		content: "等宽字体";
+	}
+}
+</style>
diff --git a/cool/components/editor-quill/index.js b/cool/components/editor-quill/index.js
new file mode 100644
index 0000000..90bbfd1
--- /dev/null
+++ b/cool/components/editor-quill/index.js
@@ -0,0 +1,7 @@
+import EditorQuill from "./components";
+
+export default {
+	components: {
+		EditorQuill
+	}
+};
diff --git a/cool/components/editor-quill/package.json b/cool/components/editor-quill/package.json
new file mode 100644
index 0000000..30b5cc1
--- /dev/null
+++ b/cool/components/editor-quill/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "editor-quill",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "quill": "^1.3.7"
+  }
+}
diff --git a/cool/components/log/index.js b/cool/components/log/index.js
new file mode 100644
index 0000000..ae50073
--- /dev/null
+++ b/cool/components/log/index.js
@@ -0,0 +1,4 @@
+import service from "./service";
+import views from "./views";
+
+export default { service, views };
diff --git a/cool/components/log/service/index.js b/cool/components/log/service/index.js
new file mode 100644
index 0000000..afe78ea
--- /dev/null
+++ b/cool/components/log/service/index.js
@@ -0,0 +1,7 @@
+import SysLog from "./log";
+
+export default {
+	system: {
+		log: new SysLog()
+	}
+};
diff --git a/cool/components/log/service/log.js b/cool/components/log/service/log.js
new file mode 100644
index 0000000..03b3776
--- /dev/null
+++ b/cool/components/log/service/log.js
@@ -0,0 +1,32 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("sys/log")
+class SysLog extends BaseService {
+	@Permission("clear")
+	clear() {
+		return this.request({
+			url: "/clear",
+			method: "POST"
+		});
+	}
+
+	@Permission("getKeep")
+	getKeep() {
+		return this.request({
+			url: "/getKeep"
+		});
+	}
+
+	@Permission("setKeep")
+	setKeep(value) {
+		return this.request({
+			url: "/setKeep",
+			method: "POST",
+			data: {
+				value
+			}
+		});
+	}
+}
+
+export default SysLog;
diff --git a/cool/components/log/views/index.js b/cool/components/log/views/index.js
new file mode 100644
index 0000000..b84bd84
--- /dev/null
+++ b/cool/components/log/views/index.js
@@ -0,0 +1,8 @@
+export default [
+	{
+		moduleName: "sys.log",
+		label: "请求日志",
+		path: "/sys/log",
+		component: () => import("./log")
+	}
+];
diff --git a/cool/components/log/views/log.vue b/cool/components/log/views/log.vue
new file mode 100644
index 0000000..3504640
--- /dev/null
+++ b/cool/components/log/views/log.vue
@@ -0,0 +1,151 @@
+<template>
+	<cl-crud ref="crud" @load="onLoad">
+		<el-row type="flex">
+			<cl-refresh-btn></cl-refresh-btn>
+
+			<el-button
+				v-permission="$service.system.log.permission.clear"
+				size="mini"
+				type="danger"
+				@click="clear"
+			>
+				清空
+			</el-button>
+
+			<cl-filter label="日志保存天数">
+				<el-input-number
+					controls-position="right"
+					size="mini"
+					:max="10000"
+					:min="1"
+					v-model="day"
+					@blur="saveDay"
+				></el-input-number>
+			</cl-filter>
+
+			<cl-flex1 />
+			<cl-search-key placeholder="请输入请求地址, 参数，ip地址"></cl-search-key>
+		</el-row>
+
+		<el-row>
+			<cl-table v-bind="table"></cl-table>
+		</el-row>
+
+		<el-row type="flex">
+			<cl-pagination></cl-pagination>
+		</el-row>
+	</cl-crud>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+	data() {
+		return {
+			day: 1,
+			table: {
+				props: {
+					"default-sort": {
+						prop: "createTime",
+						order: "descending"
+					}
+				},
+				columns: [
+					{
+						type: "index",
+						label: "#",
+						align: "center",
+						width: 60
+					},
+					{
+						prop: "userId",
+						label: "用户ID",
+						align: "center"
+					},
+					{
+						prop: "name",
+						label: "昵称",
+						align: "center",
+						minWidth: "150"
+					},
+					{
+						prop: "action",
+						label: "请求地址",
+						align: "center",
+						minWidth: "200",
+						"show-overflow-tooltip": true
+					},
+					{
+						prop: "params",
+						label: "参数",
+						align: "center",
+						minWidth: "200",
+						"show-overflow-tooltip": true
+					},
+					{
+						prop: "ip",
+						label: "ip",
+						minWidth: "180",
+						align: "center"
+					},
+					{
+						prop: "ipAddr",
+						label: "ip地址",
+						minWidth: "150",
+						align: "center"
+					},
+					{
+						prop: "createTime",
+						label: "创建时间",
+						minWidth: "150",
+						align: "center",
+						sortable: true
+					}
+				]
+			}
+		};
+	},
+
+	computed: {
+		...mapGetters(["permission"])
+	},
+
+	created() {
+		this.$service.system.log.getKeep().then((res) => {
+			this.day = res;
+		});
+	},
+
+	methods: {
+		onLoad({ ctx, app }) {
+			ctx.service(this.$service.system.log).done();
+			app.refresh();
+		},
+
+		saveDay() {
+			this.$service.system.log.setKeep(this.day).then(() => {
+				this.$message.success("保存成功");
+			});
+		},
+
+		clear() {
+			this.$confirm("是否要清空日志", "提示", {
+				type: "warning"
+			})
+				.then(() => {
+					this.$service.system.log
+						.clear()
+						.then(() => {
+							this.$message.success("清空成功");
+							this.$refs["crud"].refresh();
+						})
+						.catch((err) => {
+							this.$message.error(err);
+						});
+				})
+				.catch(() => {});
+		}
+	}
+};
+</script>
diff --git a/cool/components/param/index.js b/cool/components/param/index.js
new file mode 100644
index 0000000..743cb9d
--- /dev/null
+++ b/cool/components/param/index.js
@@ -0,0 +1,4 @@
+import service from "./service";
+import views from './views'
+
+export default { service, views };
diff --git a/cool/components/param/service/index.js b/cool/components/param/service/index.js
new file mode 100644
index 0000000..8c27eca
--- /dev/null
+++ b/cool/components/param/service/index.js
@@ -0,0 +1,7 @@
+import SysParam from "./param";
+
+export default {
+	system: {
+		param: new SysParam()
+	}
+};
diff --git a/cool/components/param/service/param.js b/cool/components/param/service/param.js
new file mode 100644
index 0000000..bc0be39
--- /dev/null
+++ b/cool/components/param/service/param.js
@@ -0,0 +1,6 @@
+import { BaseService, Service } from "cl-admin";
+
+@Service("sys/param")
+class SysParam extends BaseService {}
+
+export default SysParam;
diff --git a/cool/components/param/views/index.js b/cool/components/param/views/index.js
new file mode 100644
index 0000000..ecdaa4c
--- /dev/null
+++ b/cool/components/param/views/index.js
@@ -0,0 +1,8 @@
+export default [
+	{
+		moduleName: "sys.param",
+		label: "参数列表",
+		path: "/sys/param",
+		component: () => import("./param")
+	}
+];
diff --git a/cool/components/param/views/param.vue b/cool/components/param/views/param.vue
new file mode 100644
index 0000000..ba135f8
--- /dev/null
+++ b/cool/components/param/views/param.vue
@@ -0,0 +1,216 @@
+<template>
+	<cl-crud @load="onLoad">
+		<template #slot-content="{ scope }">
+			<div class="editor" v-for="(item, index) in tab.list" :key="index">
+				<template v-if="tab.index === index">
+					<el-button class="change-btn" size="mini" @click="changeTab(item.to)">{{
+						item.label
+					}}</el-button>
+					<component :is="item.component" height="300px" v-model="scope.data"></component>
+				</template>
+			</div>
+		</template>
+
+		<el-row type="flex">
+			<cl-refresh-btn></cl-refresh-btn>
+			<cl-add-btn></cl-add-btn>
+			<cl-multi-delete-btn></cl-multi-delete-btn>
+			<cl-flex1></cl-flex1>
+			<cl-search-key></cl-search-key>
+		</el-row>
+
+		<el-row>
+			<cl-table v-bind="table"></cl-table>
+		</el-row>
+
+		<el-row type="flex">
+			<cl-flex1></cl-flex1>
+			<cl-pagination></cl-pagination>
+		</el-row>
+
+		<cl-upsert ref="upsert" v-bind="upsert" @open="onUpsertOpen">
+			<template #slot-content="{ scope }">
+				<div class="editor" v-for="(item, index) in tab.list" :key="index">
+					<template v-if="tab.index === index">
+						<el-button class="change-btn" size="mini" @click="changeTab(item.to)">{{
+							item.label
+						}}</el-button>
+						<component
+							:is="item.component"
+							height="300px"
+							v-model="scope.data"
+						></component>
+					</template>
+				</div>
+			</template>
+		</cl-upsert>
+	</cl-crud>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			tab: {
+				index: null,
+
+				list: [
+					{
+						label: "切换富文本编辑器",
+						to: 1,
+						component: "cl-codemirror"
+					},
+					{
+						label: "切换代码编辑器",
+						to: 0,
+						component: "cl-editor-quill"
+					}
+				]
+			},
+			table: {
+				columns: [
+					{
+						type: "selection",
+						align: "center",
+						width: 60
+					},
+					{
+						label: "名称",
+						prop: "name",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						label: "keyName",
+						prop: "keyName",
+						align: "center",
+						"min-width": 150
+					},
+					{
+						label: "数据",
+						prop: "data",
+						align: "center",
+						"min-width": 150,
+						"show-overflow-tooltip": true
+					},
+					{
+						label: "备注",
+						prop: "remark",
+						align: "center",
+						"min-width": 200,
+						"show-overflow-tooltip": true
+					},
+					{
+						label: "操作",
+						align: "center",
+						type: "op"
+					}
+				]
+			},
+			upsert: {
+				props: {
+					width: "1000px"
+				},
+
+				items: [
+					{
+						prop: "name",
+						label: "名称",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请输入名称"
+							}
+						},
+						rules: {
+							required: true,
+							message: "名称不能为空"
+						}
+					},
+					{
+						prop: "keyName",
+						label: "keyName",
+						span: 12,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请输入Key"
+							}
+						},
+						rules: {
+							required: true,
+							message: "Key不能为空"
+						}
+					},
+					{
+						prop: "data",
+						label: "数据",
+						component: {
+							name: "slot-content"
+						}
+					},
+					{
+						prop: "remark",
+						label: "备注",
+						component: {
+							name: "el-input",
+							props: {
+								type: "textarea"
+							},
+							attrs: {
+								placeholder: "请输入备注",
+								rows: 3
+							}
+						}
+					}
+				]
+			}
+		};
+	},
+
+	methods: {
+		onLoad({ ctx, app }) {
+			ctx.service(this.$service.system.param).done();
+			app.refresh();
+		},
+
+		changeTab(i) {
+			this.$confirm("切换编辑器会清空输入内容，是否继续？", "提示", {
+				type: "warning"
+			})
+				.then(() => {
+					this.tab.index = i;
+					this.$refs["upsert"].setForm("data", "");
+				})
+				.catch(() => {});
+		},
+
+		onUpsertOpen(isEdit, data) {
+			this.tab.index = null;
+
+			this.$nextTick(() => {
+				if (isEdit) {
+					this.tab.index = /<*>/g.test(data.data) ? 1 : 0;
+				} else {
+					this.tab.index = 1;
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.change-btn {
+	display: flex;
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	z-index: 9;
+}
+
+.editor {
+	transition: all 0.3s;
+}
+</style>
diff --git a/cool/components/perf/index.js b/cool/components/perf/index.js
new file mode 100644
index 0000000..743cb9d
--- /dev/null
+++ b/cool/components/perf/index.js
@@ -0,0 +1,4 @@
+import service from "./service";
+import views from './views'
+
+export default { service, views };
diff --git a/cool/components/perf/service/index.js b/cool/components/perf/service/index.js
new file mode 100644
index 0000000..d2fef22
--- /dev/null
+++ b/cool/components/perf/service/index.js
@@ -0,0 +1,7 @@
+import SysInfo from "./info";
+
+export default {
+	system: {
+		info: new SysInfo()
+	}
+};
diff --git a/cool/components/perf/service/info.js b/cool/components/perf/service/info.js
new file mode 100644
index 0000000..06f5aa1
--- /dev/null
+++ b/cool/components/perf/service/info.js
@@ -0,0 +1,13 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("sys/info")
+class SysInfo extends BaseService {
+	@Permission("record")
+	record() {
+		return this.request({
+			url: "/record"
+		});
+	}
+}
+
+export default SysInfo;
diff --git a/cool/components/perf/views/components/common.js b/cool/components/perf/views/components/common.js
new file mode 100644
index 0000000..2f8b7ba
--- /dev/null
+++ b/cool/components/perf/views/components/common.js
@@ -0,0 +1,28 @@
+import VueEcharts from "vue-echarts";
+
+function unit_size(v) {
+	if (v === 0) return "0 B";
+	let k = 1024;
+	let sizes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+	let i = Math.floor(Math.log(v) / Math.log(k));
+
+	return (v / Math.pow(k, i)).toPrecision(3) + " " + sizes[i];
+}
+
+export default {
+	components: {
+		VueEcharts
+	},
+
+	filters: {
+		unit_size,
+
+		fixed2(v) {
+			return v ? parseFloat(parseFloat(v).toFixed(2)) : 0;
+		}
+	},
+
+	methods: {
+		conByte: unit_size
+	}
+};
diff --git a/cool/components/perf/views/components/ct.vue b/cool/components/perf/views/components/ct.vue
new file mode 100644
index 0000000..1a69a0f
--- /dev/null
+++ b/cool/components/perf/views/components/ct.vue
@@ -0,0 +1,253 @@
+<template>
+	<div class="ct">
+		<el-row :gutter="20">
+			<el-col :lg="6" :md="12" :xs="24">
+				<div class="block">
+					<p class="label">负载状态</p>
+
+					<el-popover width="100" trigger="hover">
+						<div class="system-perf-progress-popover">
+							<ul>
+								<li>CPU：{{ cpu.perc | fixed2 }} %</li>
+								<li>内存：{{ mem.perc | fixed2 }} %</li>
+							</ul>
+						</div>
+
+						<el-progress
+							slot="reference"
+							type="circle"
+							:percentage="lb.perc | fixed2"
+							:color="lb.perc | status_color"
+						></el-progress>
+					</el-popover>
+				</div>
+			</el-col>
+
+			<el-col :lg="6" :md="12" :xs="24">
+				<div class="block">
+					<p class="label">CPU存使用率</p>
+
+					<el-progress
+						type="circle"
+						:percentage="cpu.perc | fixed2"
+						:color="cpu.perc | status_color"
+					></el-progress>
+				</div>
+			</el-col>
+
+			<el-col :lg="6" :md="12" :xs="24">
+				<div class="block">
+					<p class="label">内存使用率</p>
+
+					<el-popover width="100" trigger="hover">
+						<div class="system-perf-progress-popover">
+							<ul>
+								<li>总数：{{ mem.total | unit_size }}</li>
+								<li>已使用：{{ mem.used | unit_size }}</li>
+							</ul>
+						</div>
+
+						<el-progress
+							slot="reference"
+							type="circle"
+							:percentage="mem.perc | fixed2"
+							:color="mem.perc | status_color"
+						></el-progress>
+					</el-popover>
+				</div>
+			</el-col>
+
+			<el-col :lg="6" :md="12" :xs="24" v-for="(item, index) in disk.list" :key="index">
+				<div class="block">
+					<p class="label">{{ item.mount }}</p>
+
+					<el-popover width="100" trigger="hover">
+						<div class="system-perf-progress-popover">
+							<ul>
+								<li>总数：{{ item.size | unit_size }}</li>
+								<li>已使用：{{ item.used | unit_size }}</li>
+							</ul>
+						</div>
+
+						<el-progress
+							slot="reference"
+							type="circle"
+							:percentage="item.use | fixed2"
+							:color="item.use | status_color"
+						></el-progress>
+					</el-popover>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import Common from "./common";
+
+export default {
+	filters: {
+		status_color(v) {
+			if (v < 50) {
+				return "#67C23A";
+			}
+
+			if (v < 70) {
+				return "#E6A23C";
+			}
+
+			if (v < 100) {
+				return "#F56C6C";
+			}
+		}
+	},
+
+	mixins: [Common],
+
+	data() {
+		return {
+			lb: {
+				perc: 0
+			},
+			redis: {
+				options: {},
+				perc: 0
+			},
+			mysql: {
+				options: {},
+				number: 0,
+				perc: 0
+			},
+			cpu: {
+				options: {},
+				perc: 0
+			},
+			mem: {
+				perc: 0,
+				total: 0,
+				used: 0
+			},
+			disk: {
+				list: [],
+				all: 0
+			}
+		};
+	},
+
+	methods: {
+		refresh(res) {
+			const { data } = res;
+			const item = data[data.length - 1];
+
+			this.toMysql(res, item.mysql);
+			this.toRedis(res, item.redis);
+			this.toCPU(res, item.server.cpu);
+			this.toDisk(item.server.disk.filter((e) => e.size));
+			this.toMem(item.server.mem);
+			this.toLB();
+		},
+
+		toLB() {
+			let mem = this.mem.perc;
+			let cpu = this.cpu.perc;
+
+			if (mem >= 90) {
+				this.lb.perc = mem;
+			} else if (cpu >= 80) {
+				this.lb.perc = cpu;
+			} else {
+				this.lb.perc = mem * 0.4 + cpu * 0.6;
+			}
+		},
+
+		toCPU(undefined, cpu) {
+			this.cpu.perc = cpu.currentload;
+		},
+
+		toMem(mem) {
+			this.mem.perc = (mem.buffcache / mem.total) * 100;
+			this.mem.total = mem.total;
+			this.mem.used = mem.buffcache;
+		},
+
+		toDisk(disk) {
+			this.disk.all = disk.reduce((a, b) => a + b.size, 0);
+
+			this.disk.list = disk.map((e) => {
+				e.use = e.use.toFixed(2);
+
+				return e;
+			});
+		},
+
+		toRedis(undefined, item) {
+			this.redis.perc = parseFloat(item.Memory.used_memory_dataset_perc);
+		},
+
+		toMysql(undefined, item) {
+			let free = 0;
+			let used = 0;
+
+			item.mysqlSize.forEach((e) => {
+				free += parseFloat(e.data_free);
+				used += parseFloat(e.data_size);
+			});
+
+			this.mysql.number = item.mysqlSize.length;
+			this.mysql.perc = (used / (free + used)).toFixed(2);
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.system-perf-progress-popover {
+	ul {
+		li {
+			list-style: none;
+			line-height: 30px;
+		}
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.ct {
+	background-color: #fff;
+
+	.block {
+		background-color: #fff;
+		width: 100%;
+		border-radius: 3px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+		padding: 20px;
+		box-sizing: border-box;
+		position: relative;
+		height: 220px;
+		cursor: pointer;
+
+		.label {
+			font-size: 16px;
+			height: 40px;
+		}
+
+		.perc {
+			position: absolute;
+			padding: 5px 10px;
+			background-color: #fff;
+		}
+
+		.c {
+			height: 50px;
+
+			.echarts {
+				height: 100%;
+				width: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/perf/views/components/mysql.vue b/cool/components/perf/views/components/mysql.vue
new file mode 100644
index 0000000..a5ac86d
--- /dev/null
+++ b/cool/components/perf/views/components/mysql.vue
@@ -0,0 +1,275 @@
+<template>
+	<div class="perf-mysql">
+		<p class="title">Mysql</p>
+
+		<el-row class="fn">
+			<el-col :span="8">
+				<div class="block">
+					<div class="icon _disk">
+						<icon-svg name="perf-disk"></icon-svg>
+					</div>
+
+					<ul class="b">
+						<li>
+							<p>已使用</p>
+							<p>{{ data_size }}</p>
+						</li>
+					</ul>
+				</div>
+			</el-col>
+
+			<el-col :span="8">
+				<div class="block">
+					<div class="icon _cache">
+						<icon-svg name="perf-cache"></icon-svg>
+					</div>
+
+					<ul class="b">
+						<li>
+							<p>缓存数</p>
+							<p>{{ Threads_cached }}</p>
+						</li>
+					</ul>
+				</div>
+			</el-col>
+
+			<el-col :span="8">
+				<div class="block">
+					<div class="icon _connect">
+						<icon-svg name="perf-connect"></icon-svg>
+					</div>
+
+					<ul class="b">
+						<li>
+							<p>连接数</p>
+							<p>{{ Threads_connected }}</p>
+						</li>
+					</ul>
+				</div>
+			</el-col>
+		</el-row>
+
+		<vue-echarts ref="chart" :options="chartOptions" autoresize></vue-echarts>
+	</div>
+</template>
+
+<script>
+import echarts from "echarts";
+import Common from "./common";
+
+export default {
+	mixins: [Common],
+
+	data() {
+		return {
+			chartOptions: {},
+			Threads_connected: 0,
+			Threads_cached: 0,
+			data_size: 0
+		};
+	},
+
+	methods: {
+		refresh({ data, time }) {
+			const item = data[data.length - 1];
+			const { mysqlConn, mysqlSize } = item.mysql;
+
+			this.Threads_cached = mysqlConn[0].Threads_cached;
+			this.Threads_connected = mysqlConn[1].Threads_connected;
+			this.data_size = mysqlSize.reduce((a, b) => a + parseFloat(b.data_size), 0) + "mb";
+
+			this.chartOptions = this.onChart(
+				time,
+				data.map((e) => e.mysql.mysqlConn[3].Threads_running)
+			);
+		},
+
+		onChart(x, y) {
+			return {
+				tooltip: {
+					trigger: "axis",
+					axisPointer: {
+						lineStyle: {
+							color: "rgb(15, 75, 111)"
+						}
+					},
+					backgroundColor: "rgb(255,255,255)",
+					padding: [5, 10],
+					textStyle: {
+						color: "rgb(15, 75, 111)"
+					},
+					extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)",
+					formatter: (arr) => {
+						return `线程数：${arr[0].data}`;
+					}
+				},
+				grid: {
+					left: "10px",
+					right: "10px",
+					bottom: "10px",
+					top: "30px"
+				},
+				xAxis: {
+					type: "category",
+					show: false,
+					boundaryGap: false,
+					splitLine: {
+						interval: "auto"
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false
+					},
+					axisLabel: {
+						margin: 10,
+						textStyle: {
+							fontSize: 12
+						}
+					},
+					data: x
+				},
+				yAxis: {
+					type: "value",
+					show: false,
+					splitLine: {
+						show: true
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: true
+					}
+				},
+				series: [
+					{
+						type: "line",
+						smooth: true,
+						showSymbol: false,
+						symbol: "circle",
+						symbolSize: 6,
+						data: y,
+						markPoint: {
+							symbolSize: 30,
+							data: [
+								{ type: "max", name: "最大值" },
+								{ type: "min", name: "最小值" }
+							]
+						},
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "rgba(15, 75, 111, 0.5)"
+										},
+										{
+											offset: 1,
+											color: "rgba(15, 75, 111, 0.1)"
+										}
+									],
+									false
+								)
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: "rgb(15, 75, 111)"
+							}
+						},
+						lineStyle: {
+							normal: {
+								width: 1
+							}
+						}
+					}
+				]
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.perf-mysql {
+	background-color: #fff;
+
+	.title {
+		font-size: 16px;
+		padding: 15px;
+		border-bottom: 1px solid #f7f7f7;
+	}
+
+	.block {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: 160px;
+		font-size: 13px;
+
+		.icon {
+			height: 60px;
+			width: 60px;
+			margin-bottom: 10px;
+			border: 1px dashed #eee;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 3px;
+			margin-top: 25px;
+
+			.icon-svg {
+				font-size: 40px;
+			}
+
+			&._disk {
+				color: #67c23a;
+			}
+
+			&._cache {
+				color: #409eff;
+			}
+
+			&._connect {
+				color: #e6a23c;
+			}
+		}
+
+		.a {
+			font-size: 13px;
+		}
+
+		.b {
+			display: flex;
+			text-align: center;
+			width: 150px;
+
+			li {
+				list-style: none;
+				flex: 1;
+
+				p {
+					&:first-child {
+						margin-bottom: 5px;
+						font-size: 12px;
+						color: #999;
+					}
+				}
+			}
+		}
+	}
+
+	.echarts {
+		height: 150px;
+		width: 100%;
+		margin-top: 10px;
+	}
+}
+</style>
diff --git a/cool/components/perf/views/components/network.vue b/cool/components/perf/views/components/network.vue
new file mode 100644
index 0000000..6633ecc
--- /dev/null
+++ b/cool/components/perf/views/components/network.vue
@@ -0,0 +1,345 @@
+<template>
+	<div class="network">
+		<p class="title">流量</p>
+
+		<ul>
+			<li
+				class="rx"
+				@click="change('上行')"
+				:class="[chartOptions.legend.selected['上行'] ? 'on' : 'off']"
+			>
+				<p>上行</p>
+				<p>{{ tx_sec | unit_size }}</p>
+			</li>
+
+			<li
+				class="tx"
+				@click="change('下载')"
+				:class="[chartOptions.legend.selected['下载'] ? 'on' : 'off']"
+			>
+				<p>下载</p>
+				<p>{{ rx_sec | unit_size }}</p>
+			</li>
+
+			<li class="send">
+				<p>总发送</p>
+				<p>{{ tx_bytes | unit_size }}</p>
+			</li>
+
+			<li class="receive">
+				<p>总接收</p>
+				<p>{{ rx_bytes | unit_size }}</p>
+			</li>
+		</ul>
+
+		<vue-echarts v-if="visible" autoresize :options="chartOptions"></vue-echarts>
+	</div>
+</template>
+
+<script>
+import echarts from "echarts";
+import Common from "./common";
+
+export default {
+	mixins: [Common],
+
+	props: {
+		data: null
+	},
+
+	data() {
+		return {
+			visible: true,
+			chartOptions: {
+				tooltip: {
+					trigger: "axis",
+					axisPointer: {
+						lineStyle: {
+							color: "#ddd"
+						}
+					},
+					backgroundColor: "rgba(255,255,255,1)",
+					padding: [5, 10],
+					textStyle: {
+						color: "#7588E4"
+					},
+					extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)",
+					formatter: (arr) => {
+						return arr
+							.map((e, i) => (i == 0 ? "上行：" : "下载：") + this.conByte(e.value))
+							.join("<br>");
+					}
+				},
+				legend: {
+					data: ["上行", "下载"],
+					selected: {
+						上行: true,
+						下载: true
+					},
+					left: "1000%"
+				},
+				grid: {
+					bottom: "5%",
+					top: "10%",
+					left: "10px",
+					right: "10px",
+					containLabel: true
+				},
+				xAxis: {
+					type: "category",
+					data: [],
+					boundaryGap: false,
+					splitLine: {
+						show: true,
+						interval: "auto",
+						lineStyle: {
+							color: ["#D4DFF5"]
+						}
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: "#609ee9"
+						}
+					},
+					axisLabel: {
+						margin: 10,
+						textStyle: {
+							fontSize: 14
+						}
+					}
+				},
+				yAxis: {
+					type: "value",
+					splitLine: {
+						show: true,
+						lineStyle: {
+							color: ["#D4DFF5"]
+						}
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: "#609ee9"
+						}
+					},
+					axisLabel: {
+						margin: 10,
+						textStyle: {
+							fontSize: 14
+						},
+						formatter: (value) => {
+							return this.conByte(value);
+						}
+					}
+				},
+				series: [
+					{
+						type: "line",
+						showSymbol: false,
+						symbol: "circle",
+						symbolSize: 6,
+						data: [],
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "rgba(255, 202, 89, 0.5)"
+										},
+										{
+											offset: 1,
+											color: "rgba(255, 202, 89, 0.2)"
+										}
+									],
+									false
+								)
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: "#f7b851"
+							}
+						},
+						lineStyle: {
+							normal: {
+								width: 1
+							}
+						}
+					},
+					{
+						type: "line",
+						showSymbol: false,
+						symbol: "circle",
+						symbolSize: 6,
+						data: [],
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "rgba(216, 244, 247, 1)"
+										},
+										{
+											offset: 1,
+											color: "rgba(216, 244, 247, 1)"
+										}
+									],
+									false
+								)
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: "#58c8da"
+							}
+						},
+						lineStyle: {
+							normal: {
+								width: 1
+							}
+						}
+					}
+				]
+			},
+			rx_bytes: 0,
+			tx_bytes: 0,
+			rx_sec: 0,
+			tx_sec: 0
+		};
+	},
+
+	methods: {
+		change(n) {
+			this.chartOptions.legend.selected[n] = !this.chartOptions.legend.selected[n];
+			this.visible = false;
+
+			this.$nextTick(() => {
+				this.visible = true;
+			});
+		},
+
+		refresh(res) {
+			let { data = [], time } = res;
+
+			let network = data[data.length - 1].server.network;
+
+			this.rx_bytes = 0;
+			this.tx_bytes = 0;
+
+			network.forEach((e) => {
+				this.rx_bytes += e.rx_bytes;
+				this.tx_bytes += e.tx_bytes;
+			});
+
+			this.rx_sec = network.reduce((a, b) => a + b.rx_sec, 0);
+			this.tx_sec = network.reduce((a, b) => a + b.tx_sec, 0);
+			this.chartOptions.xAxis.data = time;
+
+			this.chartOptions.series[0].name = "上行";
+			this.chartOptions.series[0].data = data.map((e) =>
+				e.server.network.reduce((a, b) => a + b.tx_sec, 0)
+			);
+
+			this.chartOptions.series[1].name = "下载";
+			this.chartOptions.series[1].data = data.map((e) =>
+				e.server.network.reduce((a, b) => a + b.rx_sec, 0)
+			);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.network {
+	background-color: #fff;
+	padding: 15px;
+
+	.title {
+		font-size: 16px;
+		border-bottom: 1px solid #eee;
+		padding-bottom: 15px;
+	}
+
+	ul {
+		display: flex;
+		margin-top: 30px;
+		text-align: center;
+
+		li {
+			list-style: none;
+			flex: 1;
+
+			&.rx {
+				color: #f7b851;
+			}
+
+			&.tx {
+				color: #58c8da;
+			}
+
+			p {
+				&:first-child {
+					font-size: 12px;
+					color: #999;
+				}
+
+				&:last-child {
+					font-size: 15px;
+					margin-top: 10px;
+				}
+			}
+		}
+
+		li:nth-last-child(n + 3) p {
+			cursor: pointer;
+			position: relative;
+
+			&:hover {
+				opacity: 0.8;
+			}
+		}
+
+		li:nth-last-child(n + 3) p:first-child::before {
+			display: block;
+			content: "";
+			height: 8px;
+			width: 8px;
+			border-radius: 8px;
+			position: absolute;
+			left: calc(50% - 26px);
+			top: calc(50% - 4px);
+			background-color: #eee;
+		}
+
+		li:nth-child(1).on p:first-child::before {
+			background-color: #f7b851;
+		}
+
+		li:nth-child(2).on p:first-child::before {
+			background-color: #58c8da;
+		}
+	}
+
+	.echarts {
+		height: 350px;
+		width: 100%;
+	}
+}
+</style>
diff --git a/cool/components/perf/views/components/redis.vue b/cool/components/perf/views/components/redis.vue
new file mode 100644
index 0000000..64c5e33
--- /dev/null
+++ b/cool/components/perf/views/components/redis.vue
@@ -0,0 +1,324 @@
+<template>
+	<div class="perf-redis">
+		<p class="title">Redis</p>
+
+		<el-row class="fn">
+			<el-col :span="8">
+				<div class="block">
+					<div class="icon _disk">
+						<icon-svg name="perf-disk"></icon-svg>
+					</div>
+
+					<ul class="b">
+						<li>
+							<p>已使用</p>
+							<p>{{ used_memory | unit_size }}</p>
+						</li>
+					</ul>
+				</div>
+			</el-col>
+
+			<el-col :span="8">
+				<div class="block">
+					<div class="icon _network">
+						<icon-svg name="perf-network"></icon-svg>
+					</div>
+
+					<ul class="b scroller1">
+						<li>
+							<p>输入</p>
+							<p>{{ total_net_input_bytes | unit_size }}</p>
+						</li>
+						<li>
+							<p>输出</p>
+							<p>{{ total_net_output_bytes | unit_size }}</p>
+						</li>
+					</ul>
+				</div>
+			</el-col>
+
+			<el-col :span="8">
+				<div class="block">
+					<div class="icon _db">
+						<icon-svg name="perf-db"></icon-svg>
+					</div>
+
+					<ul class="b scroller1">
+						<li v-for="(item, index) in dbList" :key="index">
+							<p>{{ item.label }}</p>
+							<p>{{ item.value }} key</p>
+						</li>
+					</ul>
+				</div>
+			</el-col>
+		</el-row>
+
+		<vue-echarts ref="chart" :options="chartOptions" autoresize></vue-echarts>
+	</div>
+</template>
+
+<script>
+import echarts from "echarts";
+import Common from "./common";
+
+export default {
+	mixins: [Common],
+
+	data() {
+		return {
+			dbList: [],
+			chartOptions: {},
+			total_net_input_bytes: 0,
+			total_net_output_bytes: 0,
+			used_memory: 0
+		};
+	},
+
+	methods: {
+		refresh({ data, time }) {
+			const item = data[data.length - 1];
+			const { Keyspace, Stats, Memory } = item.redis;
+
+			let list = [];
+
+			for (let i in Keyspace) {
+				list.push({
+					label: i,
+					value: Keyspace[i].split(",")[0].split("=")[1]
+				});
+			}
+
+			this.total_net_input_bytes = Stats.total_net_input_bytes;
+			this.total_net_output_bytes = Stats.total_net_output_bytes;
+			this.used_memory = Memory.used_memory;
+
+			this.chartOptions = this.onChart(
+				time,
+				data.map((e) => e.redis.Stats.instantaneous_ops_per_sec),
+				{
+					color: "204, 32, 20",
+					smooth: false
+				}
+			);
+
+			this.dbList = list;
+		},
+
+		onChart(x, y) {
+			return {
+				tooltip: {
+					trigger: "axis",
+					axisPointer: {
+						lineStyle: {
+							color: "#F56C6C"
+						}
+					},
+					backgroundColor: "rgb(255,255,255)",
+					padding: [5, 10],
+					textStyle: {
+						color: "#F56C6C"
+					},
+					extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3)",
+					formatter: (arr) => {
+						return `${arr[0].data} / S（每秒操作数）`;
+					}
+				},
+				grid: {
+					left: "10px",
+					right: "10px",
+					bottom: "10px",
+					top: "30px"
+				},
+				xAxis: {
+					type: "category",
+					show: false,
+					boundaryGap: false,
+					splitLine: {
+						interval: "auto",
+						lineStyle: {
+							color: ["#D4DFF5"]
+						}
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: "#609ee9"
+						}
+					},
+					axisLabel: {
+						margin: 10,
+						textStyle: {
+							fontSize: 12
+						}
+					},
+					data: x
+				},
+				yAxis: {
+					type: "value",
+					show: false,
+					splitLine: {
+						show: true,
+						lineStyle: {
+							color: ["#D4DFF5"]
+						}
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: ["#609ee9"]
+						}
+					},
+					axisLabel: {
+						margin: 10,
+						textStyle: {
+							fontSize: 12
+						}
+					}
+				},
+				series: [
+					{
+						type: "line",
+						smooth: true,
+						showSymbol: false,
+						symbol: "circle",
+						symbolSize: 6,
+						data: y,
+						markPoint: {
+							symbolSize: 30,
+							data: [
+								{ type: "max", name: "最大值" },
+								{ type: "min", name: "最小值" }
+							]
+						},
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "rgba(245, 108, 108, 0.5)"
+										},
+										{
+											offset: 1,
+											color: "rgba(245, 108, 108, 0.1)"
+										}
+									],
+									false
+								)
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: "#F56C6C"
+							}
+						},
+						lineStyle: {
+							normal: {
+								width: 1
+							}
+						}
+					}
+				]
+			};
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.perf-redis {
+	background-color: #fff;
+
+	.title {
+		font-size: 16px;
+		padding: 15px;
+		border-bottom: 1px solid #f7f7f7;
+	}
+
+	.block {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: 160px;
+		font-size: 13px;
+		margin: 0 10px;
+
+		.icon {
+			height: 60px;
+			width: 60px;
+			margin-bottom: 10px;
+			border: 1px dashed #eee;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 3px;
+			margin-top: 25px;
+
+			.icon-svg {
+				font-size: 40px;
+			}
+
+			&._disk {
+				color: #67c23a;
+			}
+
+			&._network {
+				color: #409eff;
+			}
+
+			&._db {
+				color: #e6a23c;
+			}
+		}
+
+		.a {
+			font-size: 13px;
+		}
+
+		.b {
+			display: flex;
+			text-align: center;
+			width: 100%;
+			overflow: auto hidden;
+
+			li {
+				list-style: none;
+				flex: 1;
+				margin: 0 8px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+
+				&:last-child {
+					margin-right: 0;
+				}
+
+				p {
+					&:first-child {
+						margin-bottom: 5px;
+						font-size: 12px;
+						color: #999;
+					}
+				}
+			}
+		}
+	}
+
+	.echarts {
+		height: 150px;
+		width: 100%;
+		margin-top: 10px;
+	}
+}
+</style>
diff --git a/cool/components/perf/views/index.js b/cool/components/perf/views/index.js
new file mode 100644
index 0000000..7bb72a8
--- /dev/null
+++ b/cool/components/perf/views/index.js
@@ -0,0 +1,8 @@
+export default [
+	{
+		moduleName: "sys.perf",
+		label: "状态监控",
+		path: "/sys/perf",
+		component: () => import("./perf")
+	}
+];
diff --git a/cool/components/perf/views/perf.vue b/cool/components/perf/views/perf.vue
new file mode 100644
index 0000000..5efc1f1
--- /dev/null
+++ b/cool/components/perf/views/perf.vue
@@ -0,0 +1,82 @@
+<template>
+	<cl-scrollbar>
+		<div class="system-perf">
+			<ct ref="ct"></ct>
+
+			<network ref="network"></network>
+
+			<el-row :gutter="20">
+				<el-col :lg="12" :xs="24" style="margin-top: 15px">
+					<redis ref="redis"></redis>
+				</el-col>
+
+				<el-col :lg="12" :xs="24" style="margin-top: 15px">
+					<mysql ref="mysql"></mysql>
+				</el-col>
+			</el-row>
+		</div>
+	</cl-scrollbar>
+</template>
+
+<script>
+import Ct from "./components/ct";
+import Network from "./components/network";
+import Redis from "./components/redis";
+import Mysql from "./components/mysql";
+
+export default {
+	components: {
+		Network,
+		Ct,
+		Redis,
+		Mysql
+	},
+
+	beforeRouteLeave(to, from, next) {
+		clearTimeout(this.tiemr);
+		next();
+	},
+
+	data() {
+		return {
+			list: {},
+			tiemr: null
+		};
+	},
+
+	mounted() {
+		this.refresh();
+
+		this.tiemr = setInterval(this.refresh, 3000);
+	},
+
+	methods: {
+		refresh() {
+			this.$service.system.info.record().then((res) => {
+				const { network, ct, redis, mysql } = this.$refs;
+
+				if (network) {
+					network.refresh(res);
+				}
+
+				if (ct) {
+					ct.refresh(res);
+				}
+
+				if (redis) {
+					redis.refresh(res);
+				}
+
+				if (mysql) {
+					mysql.refresh(res);
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.system-perf {
+}
+</style>
diff --git a/cool/components/task/index.js b/cool/components/task/index.js
new file mode 100644
index 0000000..0683c4e
--- /dev/null
+++ b/cool/components/task/index.js
@@ -0,0 +1,7 @@
+import service from "./service";
+import views from './views'
+
+export default {
+	service,
+	views
+};
diff --git a/cool/components/task/package.json b/cool/components/task/package.json
new file mode 100644
index 0000000..50af67e
--- /dev/null
+++ b/cool/components/task/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "task",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "vuedraggable": "^2.24.3"
+  }
+}
diff --git a/cool/components/task/service/index.js b/cool/components/task/service/index.js
new file mode 100644
index 0000000..e256a3d
--- /dev/null
+++ b/cool/components/task/service/index.js
@@ -0,0 +1,7 @@
+import SysTask from "./task";
+
+export default {
+	system: {
+		task: new SysTask()
+	}
+};
diff --git a/cool/components/task/service/task.js b/cool/components/task/service/task.js
new file mode 100644
index 0000000..2126402
--- /dev/null
+++ b/cool/components/task/service/task.js
@@ -0,0 +1,41 @@
+import { BaseService, Service, Permission } from "cl-admin";
+
+@Service("sys/task")
+class SysTask extends BaseService {
+	@Permission("stop")
+	stop(data) {
+		return this.request({
+			url: "/stop",
+			method: "POST",
+			data
+		});
+	}
+
+	@Permission("start")
+	start(data) {
+		return this.request({
+			url: "/start",
+			method: "POST",
+			data
+		});
+	}
+
+	@Permission("once")
+	once(data) {
+		return this.request({
+			url: "/once",
+			method: "POST",
+			data
+		});
+	}
+
+	@Permission("log")
+	log(params) {
+		return this.request({
+			url: "/log",
+			params
+		});
+	}
+}
+
+export default SysTask;
diff --git a/cool/components/task/views/index.js b/cool/components/task/views/index.js
new file mode 100644
index 0000000..c4f4ad4
--- /dev/null
+++ b/cool/components/task/views/index.js
@@ -0,0 +1,8 @@
+export default [
+	{
+		moduleName: "sys.task",
+		label: "任务列表",
+		path: "/sys/task",
+		component: () => import("./task")
+	}
+];
diff --git a/cool/components/task/views/task.vue b/cool/components/task/views/task.vue
new file mode 100644
index 0000000..308e528
--- /dev/null
+++ b/cool/components/task/views/task.vue
@@ -0,0 +1,1133 @@
+<template>
+	<div class="system-task">
+		<el-row class="box scroller1" type="flex" :gutter="10">
+			<!-- 系统，用户自定义，已停止 -->
+			<el-col v-for="(item, index) in list" :key="index">
+				<div class="block" :class="[`_${item.key}`]">
+					<div class="header">
+						<!-- 图标 -->
+						<i class="icon" :class="item.icon"></i>
+						<!-- 标题 -->
+						<span class="label">{{ item.label }}</span>
+						<!-- 数量 -->
+						<span class="num">({{ item.pagination.total }})</span>
+						<span class="flex1"></span>
+						<!-- 操作按钮 -->
+						<ul class="op-btn">
+							<li v-if="item.loading">
+								<i class="el-icon-loading"></i>
+							</li>
+
+							<li
+								v-else
+								@click="refreshTask({ page: 1 })"
+								class="refresh-btn"
+								v-permission="perm.delete"
+							>
+								<i class="el-icon-refresh"></i>
+								<span>刷新</span>
+							</li>
+
+							<li @click="edit(item.params)" class="add-btn" v-permission="perm.add">
+								<i class="el-icon-plus"></i>
+								<span>添加</span>
+							</li>
+						</ul>
+					</div>
+
+					<div class="container scroller1">
+						<draggable
+							v-model="list[index].list"
+							v-bind="drag.options"
+							tag="ul"
+							:data-type="item.params.type"
+							:data-status="item.params.status"
+							@end="(e) => onDragEnd(e, item)"
+						>
+							<li
+								v-for="item2 in list[index].list"
+								:key="item2.id"
+								:data-id="item2.id"
+								@contextmenu.stop.prevent="openCM($event, item2)"
+								class="_drag"
+							>
+								<div class="h">
+									<span class="type _warning" v-show="item2.status === 0">
+										{{ item2.type | task_type }}
+									</span>
+									<span class="name">{{ item2.name }}</span>
+								</div>
+
+								<div class="remark">{{ item2.remark }}</div>
+
+								<div class="f">
+									<template v-if="item2.status">
+										<span class="date">{{ item2.nextRunTime || "..." }}</span>
+										<span class="start">进行中</span>
+									</template>
+
+									<template v-else>
+										<span>...</span>
+										<span class="stop">已停止</span>
+									</template>
+								</div>
+
+								<el-row type="flex" class="op">
+									<el-col v-if="item2.status === 0" @click.native="start(item2)">
+										<i class="el-icon-video-play"></i>
+										<span>开始</span>
+									</el-col>
+
+									<el-col
+										v-else
+										@click.native="stop(item2)"
+										v-permission="perm.stop"
+									>
+										<i class="el-icon-video-pause"></i>
+										<span>暂停</span>
+									</el-col>
+
+									<el-col
+										@click.native="edit(item2)"
+										v-permission="{
+											and: [perm.update, perm.info]
+										}"
+									>
+										<i class="el-icon-edit"></i>
+										<span>编辑</span>
+									</el-col>
+
+									<el-col @click.native="findLog(item2)" v-permission="perm.log">
+										<i class="el-icon-tickets"></i>
+										<span>查看日志</span>
+									</el-col>
+								</el-row>
+							</li>
+
+							<li v-if="list[index].list.length == 0">
+								<div class="empty">暂无数据</div>
+							</li>
+						</draggable>
+
+						<el-button
+							class="more"
+							type="text"
+							size="mini"
+							@click="moreTask(index, item)"
+							v-if="item.pagination.total >= item.pagination.size"
+							>查看更多</el-button
+						>
+					</div>
+
+					<div class="footer">
+						<button class="btn-add" @click="edit(item.params)" v-permission="perm.add">
+							<i class="el-icon-plus"></i>
+						</button>
+					</div>
+				</div>
+			</el-col>
+
+			<!-- 日志 -->
+			<el-col v-permission="perm.log">
+				<div class="block _log">
+					<div class="header">
+						<!-- 标题 -->
+						<span class="label">日志</span>
+						<!-- 数量 -->
+						<span class="num">({{ logs.pagination.total }})</span>
+						<span class="flex1"></span>
+
+						<!-- 是否异常 -->
+						<el-checkbox-group
+							class="status"
+							v-model="logs.filters.status"
+							@change="filterLog"
+						>
+							<el-checkbox :label="0">异常</el-checkbox>
+						</el-checkbox-group>
+
+						<!-- 操作按钮 -->
+						<ul class="op-btn">
+							<li @click="refreshLog({ page: 1 })">
+								<i class="el-icon-refresh"></i>
+								<span>刷新</span>
+							</li>
+
+							<li v-if="logs.current" class="_current-log" @click="allLog">
+								<span>{{ logs.current.name }}</span>
+								<i class="el-icon-close"></i>
+							</li>
+						</ul>
+					</div>
+
+					<div
+						class="container"
+						v-loading="logs.loading"
+						element-loading-text="拼命加载中"
+					>
+						<ul class="scroller1" v-infinite-scroll="moreLog">
+							<li
+								v-for="(item, index) in logs.list"
+								:key="index"
+								:class="{ _error: item.status == 0 }"
+								@click="expandLog(item)"
+							>
+								<div class="h">
+									<span class="name">{{ index + 1 }} · {{ item.taskName }}</span>
+								</div>
+
+								<div class="remark" :class="{ _ellipsis: !item._expand }">
+									{{ item.detail || "..." }}
+								</div>
+
+								<div class="f">
+									<span>执行时间：{{ item.createTime }}</span>
+								</div>
+							</li>
+
+							<li v-if="logs.list.length == 0">
+								<div class="empty">暂无数据</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import { checkPerm } from "cool/components/base";
+import { Form, ContextMenu } from "cl-admin-crud";
+
+export default {
+	name: "system-task",
+
+	components: {
+		draggable
+	},
+
+	data() {
+		return {
+			list: [
+				{
+					key: "sys",
+					label: "系统任务",
+					icon: "el-icon-s-tools",
+					list: [],
+					loading: false,
+					params: {
+						type: 0,
+						status: 1
+					},
+					pagination: {
+						size: 10,
+						page: 1,
+						total: 0
+					}
+				},
+				{
+					key: "user",
+					label: "用户自定义任务",
+					icon: "el-icon-user-solid",
+					list: [],
+					loading: false,
+					params: {
+						type: 1,
+						status: 1
+					},
+					pagination: {
+						size: 10,
+						page: 1,
+						total: 0
+					}
+				},
+				{
+					key: "stop",
+					label: "已停止任务",
+					list: [],
+					loading: false,
+					params: {
+						type: null,
+						status: 0
+					},
+					pagination: {
+						size: 10,
+						page: 1,
+						total: 0
+					}
+				}
+			],
+			logs: {
+				loading: false,
+				list: [],
+				pagination: {
+					size: 10,
+					page: 1
+				},
+				params: {},
+				filters: {
+					status: []
+				},
+				current: null
+			},
+			drag: {
+				options: {
+					group: "Task",
+					animation: 300,
+					ghostClass: "Ghost",
+					dragClass: "Drag",
+					draggable: "._drag"
+				}
+			}
+		};
+	},
+
+	filters: {
+		task_type(i) {
+			return i === 0 ? "系统" : "用户";
+		}
+	},
+
+	mounted() {
+		this.refreshTask({ page: 1 });
+	},
+
+	computed: {
+		perm() {
+			return this.$service.system.task.permission;
+		}
+	},
+
+	methods: {
+		// 任务拖动
+		onDragEnd({ to, item }) {
+			const status = to.getAttribute("data-status");
+			const type = to.getAttribute("data-type");
+			const id = item.getAttribute("data-id");
+
+			if (status == 0) {
+				this.stop({ id });
+			}
+
+			if (status == 1) {
+				this.start({ id, type });
+			}
+		},
+
+		// 右键菜单
+		openCM(e, { id, status, type, name }) {
+			let menus = [
+				{
+					label: "立即执行",
+					perm: ["once"],
+					"suffix-icon": "el-icon-video-play",
+					callback: (e, close) => {
+						this.once({ id });
+						close();
+					}
+				},
+				{
+					label: "编辑",
+					perm: ["update", "info"],
+					"suffix-icon": "el-icon-edit",
+					callback: (e, close) => {
+						this.edit({ id, type });
+						close();
+					}
+				},
+				{
+					label: "删除",
+					perm: ["delete"],
+					"suffix-icon": "el-icon-delete",
+					callback: (e, close) => {
+						this.delete({ id });
+						close();
+					}
+				},
+				{
+					label: "查看日志",
+					perm: ["log"],
+					"suffix-icon": "el-icon-tickets",
+					callback: (e, close) => {
+						this.findLog({ id, name });
+						close();
+					}
+				}
+			];
+
+			if (status == 1) {
+				menus.splice(1, 0, {
+					label: "暂停",
+					perm: ["stop"],
+					"suffix-icon": "el-icon-video-pause",
+					callback: (e, close) => {
+						this.stop({ id, type });
+						close();
+					}
+				});
+			} else {
+				menus.splice(1, 0, {
+					label: "开始",
+					perm: ["start"],
+					"suffix-icon": "el-icon-video-play",
+					callback: (e, close) => {
+						this.start({ id, type });
+						close();
+					}
+				});
+			}
+
+			ContextMenu.open(e, {
+				list: menus.filter((e) => {
+					return checkPerm({
+						and: e.perm.map((a) => this.perm[a])
+					});
+				})
+			});
+
+			return false;
+		},
+
+		// 编辑任务
+		async edit(params) {
+			const { id, type } = params || {};
+
+			let info = {
+				type
+			};
+
+			if (id) {
+				info = await this.$service.system.task.info({ id });
+			}
+
+			if (info.every) {
+				info.every /= 1000;
+			}
+
+			if (!info.limit) {
+				info.limit = undefined;
+			}
+
+			const { setForm } = Form.open({
+				title: `编辑任务`,
+				width: "600px",
+				props: {
+					"label-width": "80px"
+				},
+				items: [
+					{
+						label: "名称",
+						prop: "name",
+						value: info.name,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请输入名称"
+							}
+						},
+						rules: {
+							required: true,
+							message: "名称不能为空"
+						}
+					},
+					{
+						label: "类型",
+						prop: "taskType",
+						value: info.taskType || 0,
+						component: {
+							name: "el-select",
+							options: [
+								{
+									label: "cron",
+									value: 0
+								},
+								{
+									label: "时间间隔",
+									value: 1
+								}
+							],
+							on: {
+								change: (v) => {
+									if (v == 0) {
+										setForm("limit", undefined);
+										setForm("every", undefined);
+									} else {
+										setForm("cron", undefined);
+									}
+								}
+							}
+						}
+					},
+					{
+						label: "cron",
+						prop: "cron",
+						hidden: ({ scope }) => {
+							return scope.taskType == 1;
+						},
+						value: info.cron,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "* * * * * *"
+							}
+						},
+						rules: {
+							required: true,
+							message: "cron不能为空"
+						}
+					},
+					{
+						label: "次数",
+						prop: "limit",
+						value: info.limit,
+						hidden: ({ scope }) => {
+							return scope.taskType == 0;
+						},
+						component: {
+							name: "el-input-number",
+							props: {
+								min: 1,
+								max: 10000
+							}
+						}
+					},
+					{
+						label: "间隔(秒)",
+						prop: "every",
+						value: info.every,
+						hidden: ({ scope }) => {
+							return scope.taskType == 0;
+						},
+						component: {
+							name: "el-input-number",
+							props: {
+								min: 1,
+								max: 100000000
+							}
+						},
+						rules: {
+							required: true,
+							message: "执行间隔不能为空"
+						}
+					},
+					{
+						label: "service",
+						prop: "service",
+						value: info.service,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "sys.test.add(params)"
+							}
+						}
+					},
+					{
+						label: "开始时间",
+						prop: "startDate",
+						value: info.startDate,
+						component: {
+							name: "el-date-picker",
+							props: {
+								type: "datetime"
+							}
+						}
+					},
+					{
+						label: "结束时间",
+						prop: "endDate",
+						value: info.endDate,
+						component: {
+							name: "el-date-picker",
+							props: {
+								type: "datetime"
+							}
+						}
+					},
+					{
+						label: "备注",
+						prop: "remark",
+						value: info.remark,
+						component: {
+							name: "el-input",
+							props: {
+								type: "textarea"
+							}
+						}
+					},
+					{
+						label: "状态",
+						prop: "status",
+						value: info.status === 0 ? 0 : 1,
+						component: {
+							name: "el-radio-group",
+							options: [
+								{
+									label: "停止",
+									value: 0
+								},
+								{
+									label: "运行",
+									value: 1
+								}
+							]
+						}
+					}
+				],
+				on: {
+					submit: (data, { close, done }) => {
+						if (!data.limit) {
+							data.limit = null;
+						}
+
+						this.$service.system.task[id ? "update" : "add"]({
+							...info,
+							...data,
+							every: data.every * 1000
+						})
+							.then(() => {
+								this.refreshTask();
+
+								this.$message.success("保存成功");
+								close();
+							})
+							.catch((err) => {
+								this.$message.error(err);
+								done();
+							});
+					}
+				}
+			});
+		},
+
+		// 删除任务
+		delete({ id }) {
+			this.$confirm("此操作将永久删除该任务，是否继续？", "提示", {
+				type: "warning"
+			})
+				.then(() => {
+					this.$service.system.task.delete({ ids: id }).then(() => {
+						this.refreshTask();
+					});
+				})
+				.catch(() => {});
+		},
+
+		// 开始任务
+		start({ id, type }) {
+			this.$service.system.task
+				.start({ id, type })
+				.then(() => {
+					this.refreshTask();
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				});
+		},
+
+		// 停止任务
+		stop({ id }) {
+			this.$service.system.task
+				.stop({ id })
+				.then(() => {
+					this.refreshTask();
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				});
+		},
+
+		// 任务执行一次
+		once({ id }) {
+			this.$service.system.task
+				.once({ id })
+				.then(() => {
+					this.refreshTask();
+				})
+				.catch((err) => {
+					this.$message.error(err);
+				});
+		},
+
+		expandLog(e) {
+			this.$set(e, "_expand", !e._expand);
+		},
+
+		// 刷新任务
+		refreshTask(params, options) {
+			const { index, more } = options || {};
+			const arr =
+				index === undefined || index === null ? this.list.map((e, i) => i) : [index];
+
+			arr.forEach(async (k) => {
+				let item = this.list[k];
+
+				Object.assign(item.params, {
+					...item.pagination,
+					...params
+				});
+
+				this.$set(item, "loading", true);
+
+				let res = await this.$service.system.task.page(item.params);
+
+				this.moreList(res, item);
+
+				if (!more) {
+					this.$el.querySelector(`.block._${item.key} .container`).scroll(0, 0);
+				}
+
+				item.loading = false;
+			});
+		},
+
+		// 更多任务
+		moreTask(index) {
+			this.refreshTask(null, { index, more: true });
+		},
+
+		// 刷新日志
+		async refreshLog(newParams, options) {
+			if (this.logs.loading) {
+				return false;
+			}
+
+			if (!checkPerm(this.perm.log)) {
+				return false;
+			}
+
+			const { params, pagination } = this.logs;
+			const { more } = options || {};
+
+			Object.assign(params, {
+				...pagination,
+				...newParams
+			});
+
+			this.logs.loading = true;
+
+			let res = await this.$service.system.task.log(params);
+
+			this.moreList(res, this.logs);
+
+			if (!more) {
+				this.$el.querySelector(".block._log .container ul").scroll(0, 0);
+			}
+
+			this.logs.loading = false;
+		},
+
+		// 更多日志
+		moreLog() {
+			this.refreshLog(null, { more: true });
+		},
+
+		// 查看任务对应的日志
+		findLog(e) {
+			this.logs.current = e;
+			this.refreshLog({ page: 1, id: e.id });
+		},
+
+		// 所有日志
+		allLog() {
+			this.logs.current = null;
+			this.refreshLog({ page: 1, id: null });
+		},
+
+		// 过滤日志
+		filterLog([v]) {
+			this.refreshLog({ page: 1, status: v === undefined ? 1 : 0 });
+		},
+
+		moreList(res, { list, pagination }) {
+			const { page, size } = res.pagination;
+			const len = res.list.length;
+			const max = list.length;
+
+			if (page == 1) {
+				list.splice(0, max, ...res.list);
+			} else {
+				let start = max - (max % size);
+				let end = start + len;
+
+				list.splice(start, end, ...res.list);
+			}
+
+			if (len == size) {
+				res.pagination.page += 1;
+			}
+
+			Object.assign(pagination, res.pagination);
+
+			return page != 1;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.Ghost {
+	opacity: 0.7;
+}
+
+.Drag {
+	border: 1px dashed #000 !important;
+	background: #fff !important;
+}
+
+.system-task {
+	.box {
+		height: 100%;
+		overflow-x: auto;
+
+		.el-col {
+			height: 100%;
+			width: 413px;
+		}
+	}
+
+	.block {
+		height: 100%;
+		width: 400px;
+
+		.header {
+			display: flex;
+			align-items: center;
+			height: 40px;
+			background-color: #f0f0f0;
+			border-top-left-radius: 10px;
+			border-top-right-radius: 10px;
+			position: relative;
+			top: 5px;
+			z-index: 1;
+			padding: 0 10px 5px 10px;
+
+			i {
+				font-size: 18px;
+			}
+
+			.label {
+				font-size: 12px;
+				margin: 0 5px;
+				letter-spacing: 0.5px;
+			}
+
+			.num {
+				font-size: 12px;
+			}
+
+			.flex1 {
+				flex: 1;
+			}
+
+			.op-btn {
+				display: flex;
+
+				li {
+					display: flex;
+					align-items: center;
+					list-style: none;
+					cursor: pointer;
+					padding: 2px 10px;
+					background-color: #fff;
+					border-radius: 3px;
+					margin-left: 5px;
+
+					&:hover {
+						background-color: #dedede;
+						color: #444;
+					}
+
+					i {
+						font-size: 13px;
+						margin-right: 2px;
+					}
+
+					span {
+						font-size: 12px;
+					}
+				}
+			}
+		}
+
+		.container {
+			max-height: calc(100% - 90px);
+			overflow-y: auto;
+			margin-bottom: 5px;
+			z-index: 2;
+			position: relative;
+			background-color: #f7f7f7;
+
+			ul {
+				li {
+					list-style: none;
+					background-color: #fff;
+					border-radius: 5px;
+					margin-bottom: 5px;
+					padding: 10px 15px;
+					font-size: 14px;
+					letter-spacing: 0.5px;
+					border: 1px solid #f7f7f7;
+
+					&:last-child {
+						margin-bottom: 0;
+					}
+
+					&._drag {
+						cursor: pointer;
+					}
+
+					&:hover {
+						.op {
+							height: 30px;
+						}
+					}
+
+					.h {
+						display: flex;
+						align-items: center;
+						font-size: 14px;
+						margin-bottom: 10px;
+
+						.type {
+							font-size: 12px;
+							border-radius: 3px;
+							padding: 1px 2px;
+							margin-right: 5px;
+
+							&._warning {
+								background-color: $color-warning;
+								color: #fff;
+							}
+						}
+					}
+
+					.remark {
+						font-size: 12px;
+						color: #666;
+						margin-bottom: 20px;
+					}
+
+					.empty {
+						text-align: center;
+						font-size: 13px;
+						color: #666;
+						margin: 10px 0;
+					}
+
+					.f {
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						position: relative;
+
+						.date {
+							font-size: 12px;
+							color: #fff;
+							background-color: $color-primary;
+							border-radius: 2px;
+							margin-left: 40px;
+							padding: 1px 3px;
+
+							&::before {
+								content: "NEXT";
+								position: absolute;
+								left: 0;
+								top: 1px;
+								color: #222;
+							}
+						}
+
+						.start,
+						.stop {
+							display: flex;
+							align-items: center;
+							font-size: 12px;
+							margin-left: 30px;
+							position: relative;
+
+							&::before {
+								content: "";
+								display: block;
+								height: 6px;
+								width: 6px;
+								border-radius: 6px;
+								position: absolute;
+								left: -15px;
+							}
+						}
+
+						.start {
+							color: #67c23a;
+
+							&::before {
+								background-color: #67c23a;
+							}
+						}
+
+						.stop {
+							color: #f56c6c;
+
+							&::before {
+								background-color: #f56c6c;
+							}
+						}
+					}
+
+					.op {
+						height: 0;
+						margin-top: 15px;
+						transition: height 0.3s;
+						overflow: hidden;
+
+						.el-col {
+							height: 30px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+
+							&:hover {
+								background-color: #f7f7f7;
+							}
+
+							span {
+								font-size: 12px;
+								color: #666;
+							}
+
+							i {
+								font-size: 16px;
+								margin-right: 5px;
+							}
+						}
+					}
+
+					&._error {
+						background-color: $color-danger;
+						color: #fff;
+
+						.remark {
+							color: #fff !important;
+						}
+					}
+				}
+			}
+
+			.more {
+				display: block;
+				margin: 10px auto;
+			}
+		}
+
+		.footer {
+			height: 36px;
+
+			.btn-add {
+				height: 34px;
+				width: 100%;
+				border-radius: 3px;
+				border: 0;
+				background-color: #fff;
+				cursor: pointer;
+
+				i {
+					font-size: 16px;
+					color: #999;
+				}
+
+				&:hover {
+					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+				}
+			}
+		}
+	}
+
+	.block._stop {
+		.header {
+			.add-btn {
+				display: none;
+			}
+		}
+
+		.container {
+			max-height: calc(100% - 50px);
+		}
+
+		.footer {
+			display: none;
+		}
+	}
+
+	.block._log {
+		.header {
+			.status {
+				.el-checkbox {
+					margin-right: 10px;
+				}
+			}
+
+			.op-btn {
+				li {
+					display: flex;
+					align-items: center;
+					height: 20px;
+
+					&._current-log {
+						span {
+							display: block;
+							max-width: 100px;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
+						i {
+							margin-left: 2px;
+						}
+
+						&:hover {
+							i {
+								color: $color-danger;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.container {
+			height: calc(100% - 50px);
+			max-height: calc(100% - 50px);
+
+			ul {
+				height: 100%;
+
+				li {
+					.remark {
+						color: #999;
+
+						&._ellipsis {
+							overflow: hidden;
+							text-overflow: ellipsis;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 2;
+						}
+					}
+
+					.f {
+						font-size: 12px;
+					}
+
+					&:hover {
+						.remark {
+							color: #444;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/upload/components/index.js b/cool/components/upload/components/index.js
new file mode 100644
index 0000000..a0568ea
--- /dev/null
+++ b/cool/components/upload/components/index.js
@@ -0,0 +1,7 @@
+import Upload from "./index.vue";
+import UploadSpace from "./space";
+
+export default {
+	Upload,
+	UploadSpace
+};
diff --git a/cool/components/upload/components/index.vue b/cool/components/upload/components/index.vue
new file mode 100644
index 0000000..d9a4166
--- /dev/null
+++ b/cool/components/upload/components/index.vue
@@ -0,0 +1,583 @@
+<template>
+	<div class="cl-upload__wrap">
+		<div
+			class="cl-upload"
+			:class="[
+				`cl-upload--${listType}`,
+				{
+					'is-multiple': multiple,
+					'is-drag': drag
+				}
+			]"
+		>
+			<el-input class="cl-upload__hidden" type="hidden" v-model="value"></el-input>
+
+			<el-upload
+				:action="action"
+				:accept="_accept"
+				:multiple="multiple"
+				:limit="limit"
+				:data="data"
+				:name="_name"
+				:drag="drag"
+				:list-type="listType"
+				:file-list="fileList"
+				:show-file-list="_showFileList"
+				:auto-upload="autoUpload"
+				:disabled="disabled"
+				:headers="{
+					Authorization: token,
+					...headers
+				}"
+				:http-request="action ? undefined : httpRequest"
+				:on-remove="_onRemove"
+				:on-preview="_onPreview"
+				:on-success="_onSuccess"
+				:on-error="onError"
+				:on-progress="onProgress"
+				:on-change="onChange"
+				:on-exceed="onExceed"
+				:before-upload="_beforeUpload"
+				:before-remove="beforeRemove"
+				:style="_style"
+				v-loading="_loading"
+			>
+				<slot>
+					<!-- picture-card -->
+					<template v-if="listType == 'picture-card'">
+						<i :class="['cl-upload__icon', _icon]"></i>
+						<span class="cl-upload__text" v-if="_text">{{ _text }}</span>
+					</template>
+
+					<!-- text -->
+					<template v-else-if="listType == 'text'">
+						<el-button size="mini" type="primary" :loading="loading"
+							>点击上传</el-button
+						>
+					</template>
+
+					<template v-else>
+						<div class="cl-upload__cover" v-if="_urls[0]">
+							<img v-if="_urls[0].type == 'image'" :src="_urls[0].url" />
+
+							<span v-else>{{ _urls[0].name }}</span>
+						</div>
+
+						<template v-else>
+							<i :class="['cl-upload__icon', _icon]"></i>
+							<span class="cl-upload__text" v-if="_text">{{ _text }}</span>
+						</template>
+					</template>
+				</slot>
+			</el-upload>
+		</div>
+
+		<cl-dialog
+			title="图片预览"
+			:visible.sync="preview.visible"
+			:props="{
+				width: previewWidth
+			}"
+		>
+			<img width="100%" :src="preview.url" alt="" />
+		</cl-dialog>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import path from "path";
+import { cloneDeep, last, isArray, isNumber, isEmpty } from "cl-admin/utils";
+import { v4 as uuidv4 } from "uuid";
+import { isDev } from "@/config/env";
+
+export default {
+	name: "cl-upload",
+
+	props: {
+		value: [Array, String],
+		// 尺寸
+		size: [Array, String, Number],
+		// 显示图标
+		icon: String,
+		// 显示文案
+		text: String,
+		// 是否以 uuid 重命名
+		rename: {
+			type: Boolean,
+			default: true
+		},
+		// 最大允许上传文件大小(MB)
+		limitSize: {
+			type: Number,
+			default: 2
+		},
+		// 预览图片的宽度
+		previewWidth: {
+			type: String,
+			default: "500px"
+		},
+		// 上传的地址
+		action: {
+			type: String,
+			default: ""
+		},
+		// 设置上传的请求头部
+		headers: Object,
+		// 是否多选
+		multiple: Boolean,
+		// 上传时附带的额外参数
+		data: Object,
+		// 上传的文件字段名
+		name: String,
+		// 支持发送 cookie 凭证信息
+		withCredentials: Boolean,
+		// 是否显示已上传文件列表
+		showFileList: {
+			type: Boolean,
+			default: undefined
+		},
+		// 是否拖拽
+		drag: Boolean,
+		// 上传的文件类型
+		accept: String,
+		// 文件列表的类型
+		listType: {
+			type: String,
+			default: "default"
+		},
+		// 是否自带上传
+		autoUpload: {
+			type: Boolean,
+			default: true
+		},
+		// 是否禁用
+		disabled: Boolean,
+		// 最大允许上传个数
+		limit: Number,
+		// 文件列表移除文件时的钩子
+		onRemove: Function,
+		// 点击文件列表中已上传的文件时的钩子
+		onPreview: Function,
+		// 文件上传成功时的钩子
+		onSuccess: Function,
+		// 文件上传失败时的钩子
+		onError: Function,
+		// 文件上传时的钩子
+		onProgress: Function,
+		// 文件状态改变时的钩子
+		onChange: Function,
+		// 文件超出个数限制时的钩子
+		onExceed: Function,
+		// 上传文件之前的钩子
+		beforeUpload: Function,
+		// 删除文件之前的钩子
+		beforeRemove: Function
+	},
+
+	data() {
+		return {
+			fileList: [],
+			urls: [],
+			loading: false,
+			preview: {
+				visible: false,
+				url: null
+			}
+		};
+	},
+
+	computed: {
+		...mapGetters(["token", "components", "upload"]),
+
+		conf() {
+			return this.components.upload.options;
+		},
+
+		_size() {
+			return this.size || this.conf.size || "128px";
+		},
+
+		_icon() {
+			return this.icon || this.conf.icon || "el-icon-upload";
+		},
+
+		_text() {
+			return this.text || this.conf.text || "选择文件";
+		},
+
+		_accept() {
+			let d = this.accept || this.conf.accept;
+
+			switch (this.listType) {
+				case "picture-card":
+					return d || "image/*";
+				default:
+					return d;
+			}
+		},
+
+		_name() {
+			return this.name || this.conf.name || "file";
+		},
+
+		_limitSize() {
+			return this.limitSize || this.conf.limitSize || 2;
+		},
+
+		_showFileList() {
+			let f = null;
+
+			switch (this.listType) {
+				case "picture-card":
+				case "text":
+					f = true;
+					break;
+				default:
+					f = false;
+					break;
+			}
+
+			return this.showFileList === undefined ? f : this.showFileList;
+		},
+
+		_loading() {
+			return this.listType == "default" ? this.loading : false;
+		},
+
+		_urls() {
+			const format = {
+				image: ["bmp", "jpg", "jpeg", "png", "tif", "gif", "svg"]
+			};
+
+			return this.urls
+				.filter((e) => Boolean(e.url))
+				.map((e) => {
+					let arr = e.url.split(".");
+					let suf = last(arr);
+					e.type = format.image.includes(suf) ? "image" : null;
+					return e;
+				});
+		},
+
+		_style() {
+			let arr = [];
+
+			if (isArray(this._size)) {
+				arr = this._size;
+			} else {
+				arr = [this._size, this._size];
+			}
+
+			const [height, width] = arr.map((e) => (isNumber(e) ? `${e}px` : e));
+
+			if (this.listType == "default" && !this.drag) {
+				return {
+					height,
+					width
+				};
+			} else {
+				return {};
+			}
+		}
+	},
+
+	watch: {
+		value: {
+			immediate: true,
+			handler: "parseValue"
+		}
+	},
+
+	methods: {
+		// 解析参数
+		parseValue(value) {
+			let list = [];
+
+			if (this.multiple) {
+				if (value instanceof Array) {
+					list = value;
+				} else {
+					list = (value || "").split(",");
+				}
+			} else {
+				if (value) {
+					list = [value];
+				}
+			}
+
+			// 比较数据，避免重复动画
+			if (
+				!this.urls.some((e) => {
+					return list.includes(e.url);
+				})
+			) {
+				this.fileList = list.filter(Boolean).map((url) => {
+					return {
+						url,
+						name: path.basename(url),
+						uid: url
+					};
+				});
+
+				// 设置 URLS
+				this.urls = cloneDeep(this.fileList);
+			}
+		},
+
+		// 更新值
+		update() {
+			const urls = this.urls
+				.filter((e) => Boolean(e.url))
+				.map((e) => e.url)
+				.join(",");
+
+			this.$emit("input", urls);
+			this.$emit("change", urls);
+		},
+
+		// 追加文件
+		append(data) {
+			if (this.multiple) {
+				this.urls.push(data);
+			} else {
+				this.urls = [data];
+			}
+
+			this.update();
+		},
+
+		// 关闭上传加载中
+		done() {
+			this.loading = false;
+		},
+
+		// 删除文件
+		_onRemove(file) {
+			this.urls.splice(
+				this.urls.findIndex((e) => e.uid === file.uid),
+				1
+			);
+			this.update();
+
+			// 删除文件之前的钩子
+			if (this.onRemove) {
+				this.onRemove(file, this.urls);
+			}
+		},
+
+		// 预览图片
+		_onPreview(file) {
+			this.preview.visible = true;
+			this.preview.url = file.url;
+
+			if (!file.url) {
+				let item = this.urls.find((e) => e.uid == file.uid);
+
+				if (item) {
+					this.preview.url = item.url;
+				}
+			}
+		},
+
+		// 上传前
+		_beforeUpload(file) {
+			this.loading = true;
+
+			if (this._limitSize) {
+				if (file.size / 1024 / 1024 >= this._limitSize) {
+					this.$message.error(`上传文件大小不能超过 ${this._limitSize}MB!`);
+					this.done();
+					return false;
+				}
+			}
+
+			if (this.beforeUpload) {
+				return this.beforeUpload(file, {
+					done: this.done
+				});
+			}
+
+			return true;
+		},
+
+		// 上传成功
+		_onSuccess(res, file) {
+			this.loading = false;
+
+			this.append({
+				url: res.data,
+				name: file.raw.name,
+				uid: file.raw.uid
+			});
+
+			// 文件上传成功时的钩子
+			if (this.onSuccess) {
+				this.onSuccess(res, file.raw, this.urls);
+			}
+		},
+
+		// 重设上传请求
+		httpRequest(req) {
+			const isRename = isEmpty(this.rename) ? this.components.upload.rename : this.rename;
+			const { mode } = this.upload;
+
+			// 多种上传请求
+			const upload = (file) => {
+				return new Promise((resolve, reject) => {
+					const next = (res) => {
+						let data = new FormData();
+
+						for (let i in res) {
+							if (i != "host") {
+								data.append(i, res[i]);
+							}
+						}
+
+						let fileName = file.name;
+
+						// 是否以 uuid 重新命名
+						if (isRename) {
+							fileName = uuidv4() + "." + last((file.name || "").split("."));
+						}
+
+						data.append("key", `app/${fileName}`);
+						data.append("file", file);
+
+						// 上传
+						this.$service.common
+							.request({
+								url: res.host,
+								method: "POST",
+								headers: {
+									"Content-Type": "multipart/form-data"
+								},
+								data,
+								onUploadProgress: (e) => {
+									if (this.onProgress) {
+										e.percent = parseInt((e.loaded / e.total) * 100);
+										this.onProgress(e, req.file);
+									}
+								}
+							})
+							.then((res) => {
+								if (mode === "local") {
+									resolve(res);
+								} else {
+									resolve(`${res.host}/app/${fileName}`);
+								}
+							})
+							.catch((err) => {
+								reject(err);
+							});
+					};
+
+					if (mode == "local") {
+						next({
+							host: "/upload"
+						});
+					} else {
+						this.$service.common
+							.upload()
+							.then((res) => {
+								if (isDev) {
+									res.host = "@/oss-upload";
+								}
+
+								next(res);
+							})
+							.catch(reject);
+					}
+				});
+			};
+
+			this.loading = true;
+
+			upload(req.file)
+				.then((url) => {
+					this._onSuccess({ data: url }, { raw: req.file });
+				})
+				.catch((err) => {
+					console.error("upload error", err);
+					this.$message.error(err);
+
+					// 	文件上传失败时的钩子
+					if (this.onError) {
+						this.onError(err, req.file);
+					}
+				})
+				.done(() => {
+					this.loading = false;
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-upload {
+	display: flex;
+	flex-wrap: wrap;
+
+	&__hidden {
+		height: 0;
+		width: 0;
+	}
+
+	&.is-multiple {
+		.cl-upload__wrap {
+			margin-right: 10px;
+		}
+	}
+
+	&--default {
+		&:not(.is-drag) {
+			/deep/.el-upload {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border: 1px dashed #d9d9d9;
+				border-radius: 6px;
+				cursor: pointer;
+				position: relative;
+				overflow: hidden;
+				height: 100%;
+
+				&:hover {
+					border-color: #409eff;
+				}
+
+				.cl-upload__cover {
+					img {
+						display: block;
+						height: 100%;
+						width: 100%;
+					}
+				}
+
+				i {
+					font-size: 28px;
+					color: #8c939d;
+				}
+			}
+		}
+	}
+
+	&--picture-card {
+		/deep/.el-upload {
+			.cl-upload__icon {
+				position: relative;
+				top: 4px;
+			}
+		}
+	}
+
+	&__icon + span {
+		margin-left: 5px;
+	}
+
+	&__text {
+		font-size: 14px;
+	}
+}
+</style>
diff --git a/cool/components/upload/components/space.vue b/cool/components/upload/components/space.vue
new file mode 100644
index 0000000..a87eacb
--- /dev/null
+++ b/cool/components/upload/components/space.vue
@@ -0,0 +1,721 @@
+<template>
+	<div class="cl-upload-space__wrap">
+		<slot>
+			<el-button v-if="showButton" size="mini" @click="open">点击上传</el-button>
+		</slot>
+
+		<!-- 弹框 -->
+		<cl-dialog :visible.sync="visible" v-bind="props" :op-list="['close']">
+			<div class="cl-upload-space">
+				<!-- 类目 -->
+				<div class="cl-upload-space__category">
+					<div class="cl-upload-space__category-search">
+						<el-button type="primary" size="mini" @click="editCategory()"
+							>添加分类</el-button
+						>
+
+						<el-input
+							v-model="category.keyword"
+							placeholder="输入关键字过滤"
+							size="mini"
+						></el-input>
+					</div>
+
+					<div class="cl-upload-space__category-list">
+						<ul>
+							<li
+								v-for="(item, index) in categoryList"
+								:key="index"
+								:class="{
+									'is-active': item.id == category.current.id
+								}"
+								@click="selectCategory(item)"
+								@contextmenu.stop.prevent="openCategoryContextMenu($event, item)"
+							>
+								{{ item.name }}
+							</li>
+						</ul>
+					</div>
+				</div>
+
+				<!-- 内容 -->
+				<div class="cl-upload-space__content">
+					<!-- 操作栏 -->
+					<div class="cl-upload-space__opbar">
+						<el-button
+							type="success"
+							size="mini"
+							:disabled="selection.length === 0"
+							@click="confirmFile()"
+							>使用选中文件</el-button
+						>
+
+						<el-button
+							type="danger"
+							size="mini"
+							:disabled="selection.length === 0"
+							@click="deleteFile()"
+							>删除选中文件</el-button
+						>
+
+						<cl-upload
+							style="margin-left: 10px"
+							list-type="slot"
+							:action="action"
+							:accept="accept"
+							:limit-size="limitSize"
+							:show-file-list="false"
+							:headers="headers"
+							:data="data"
+							:disabled="disabled"
+							:rename="rename"
+							:on-success="onSuccess"
+							:on-progress="onProgress"
+							:before-upload="beforeUpload"
+						>
+							<el-button size="mini" type="primary">点击上传</el-button>
+						</cl-upload>
+					</div>
+
+					<!-- 文件区域 -->
+					<div
+						class="cl-upload-space__file"
+						v-loading="file.loading"
+						element-loading-text="拼命加载中"
+					>
+						<!-- 文件列表 -->
+						<el-row v-if="file.list.length > 0">
+							<el-col :span="6" v-for="item in file.list" :key="item.id">
+								<file-item
+									:value="item"
+									:element-loading-text="item.progress"
+									v-loading="item.loading"
+								></file-item>
+							</el-col>
+						</el-row>
+
+						<!-- 空态 -->
+						<div class="cl-upload-space__file-empty" v-else>
+							<cl-upload
+								drag
+								:action="action"
+								:accept="accept"
+								:limit-size="limitSize"
+								:headers="headers"
+								:data="data"
+								:disabled="disabled"
+								:rename="rename"
+								:on-success="onSuccess"
+								:on-progress="onProgress"
+								:before-upload="beforeUpload"
+							>
+								<i class="el-icon-upload"></i>
+								<div class="el-upload__text">
+									将文件拖到此处，或<em>点击上传</em>
+								</div>
+							</cl-upload>
+						</div>
+					</div>
+
+					<!-- 分页 -->
+					<el-pagination
+						background
+						:page-size="file.pagination.size"
+						:current-page="file.pagination.page"
+						:total="file.pagination.total"
+						@current-change="onCurrentChange"
+					></el-pagination>
+				</div>
+			</div>
+		</cl-dialog>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { last, isEmpty } from "cl-admin/utils";
+
+export default {
+	name: "cl-upload-space",
+
+	componentName: "UploadSpace",
+
+	props: {
+		// 上传的地址
+		action: String,
+		// 选择图片的长度
+		limit: {
+			type: Number,
+			default: 8
+		},
+		// 最大允许上传文件大小(MB)
+		limitSize: {
+			type: Number,
+			default: 10
+		},
+		// 是否禁用
+		disabled: Boolean,
+		// 是否以 uuid 重命名
+		rename: Boolean,
+		// 设置上传的请求头部
+		headers: Object,
+		// 上传时附带的额外参数
+		data: Object,
+		// 上传的文件类型
+		accept: String,
+		// 是否返回详细数据
+		detailData: Boolean,
+		// 是否显示按钮
+		showButton: {
+			type: Boolean,
+			default: true
+		}
+	},
+
+	components: {
+		fileItem: {
+			props: {
+				value: Object
+			},
+
+			computed: {
+				parent() {
+					let parent = this;
+
+					while (parent.$options.componentName != "UploadSpace") {
+						parent = parent.$parent;
+					}
+
+					return parent;
+				}
+			},
+
+			methods: {
+				onSelect() {
+					this.parent.selectFile(this.value);
+				},
+
+				onContextMenu(e) {
+					this.parent.openFileContextMenu(e, this.value);
+					e.stopPropagation();
+					e.preventDefault();
+				}
+			},
+
+			render() {
+				if (!this.value) {
+					return null;
+				}
+
+				let itemEl = null;
+
+				const { url, type, selected, id } = this.value;
+				const fileType = (type || "").split("/")[0];
+
+				switch (fileType) {
+					case "image":
+						itemEl = <el-image fit="cover" src={url} lazy></el-image>;
+						break;
+
+					case "video":
+						itemEl = (
+							<video
+								controls
+								src={url}
+								style={{
+									"max-height": "100%",
+									"max-width": "100%"
+								}}></video>
+						);
+						break;
+
+					default:
+						itemEl = <span>{url}</span>;
+						break;
+				}
+
+				return (
+					<div
+						class={["cl-upload-space__file-item", `is-${fileType}`]}
+						on-click={this.onSelect}
+						on-contextmenu={this.onContextMenu}>
+						{itemEl}
+
+						<div class="cl-upload-space__file-size"></div>
+
+						{selected && (
+							<div class="cl-upload-space__file-mask">
+								<i class="el-icon-success"></i>
+							</div>
+						)}
+					</div>
+				);
+			}
+		}
+	},
+
+	data() {
+		return {
+			visible: false,
+			props: {
+				title: "文件空间",
+				props: {
+					"close-on-click-modal": false,
+					"append-to-body": true,
+					width: "1000px"
+				}
+			},
+			category: {
+				list: [],
+				current: {},
+				keyword: ""
+			},
+			file: {
+				list: [],
+				pagination: {
+					page: 1,
+					size: 12,
+					total: 0
+				},
+				loading: false
+			}
+		};
+	},
+
+	computed: {
+		...mapGetters(["token"]),
+
+		categoryList() {
+			return this.category.list.filter((e) => e.name.includes(this.category.keyword));
+		},
+
+		selection() {
+			return this.file.list.filter((e) => e.selected);
+		}
+	},
+
+	filters: {
+		file_name(url) {
+			return last(url.split("."));
+		}
+	},
+
+	created() {
+		this.refreshCategory().then(() => {
+			this.category.current = this.category.list[0];
+			this.refreshFile();
+		});
+	},
+
+	methods: {
+		open(key) {
+			this.visible = true;
+		},
+
+		close() {
+			this.visible = false;
+
+			this.$nextTick(() => {
+				this.file.list.map((e) => {
+					this.$set(e, "selected", false);
+				});
+			});
+		},
+
+		// 上传成功
+		onSuccess(res, file) {
+			let item = this.file.list.find((e) => file.uid == e.uid);
+
+			if (item) {
+				item.url = res.data;
+
+				this.$service.space.info
+					.add({
+						url: res.data,
+						type: item.type,
+						classifyId: item.classifyId
+					})
+					.then((res) => {
+						item.loading = false;
+						item.id = res.id;
+					})
+					.catch((err) => {
+						this.$message.error(err);
+					});
+			}
+		},
+
+		// 上传前，添加文件
+		beforeUpload({ tempFilePath, type, uid }) {
+			this.file.list.unshift({
+				url: tempFilePath,
+				type,
+				uid,
+				classifyId: this.category.current.id,
+				loading: true,
+				progress: "0%"
+			});
+		},
+
+		// 上传进度
+		onProgress({ percent }, file) {
+			let item = this.file.list.find(({ uid }) => uid == file.uid);
+
+			if (item) {
+				item.progress = percent + "%";
+			}
+		},
+
+		// 刷新资源文件
+		refreshFile(params) {
+			this.file.loading = true;
+
+			this.$service.space.info
+				.page({
+					...this.file.pagination,
+					...params,
+					classifyId: this.category.current.id,
+					type: this.accept
+				})
+				.then((res) => {
+					this.file.pagination = res.pagination;
+					this.file.list = res.list;
+				})
+				.done(() => {
+					this.file.loading = false;
+				});
+		},
+
+		// 刷新分类
+		refreshCategory() {
+			return this.$service.space.type.list().then((res) => {
+				res.unshift({
+					name: "全部文件",
+					id: null
+				});
+				this.category.list = res;
+			});
+		},
+
+		// 编辑分类
+		editCategory(item = {}) {
+			this.$crud.openForm({
+				title: "添加分类",
+				width: "400px",
+				items: [
+					{
+						label: "分类名称",
+						prop: "name",
+						value: item.name,
+						component: {
+							name: "el-input",
+							attrs: {
+								placeholder: "请填写分类名称"
+							}
+						},
+						rules: {
+							required: true,
+							message: "分类名称不能为空"
+						}
+					}
+				],
+				on: {
+					submit: (data, { done, close }) => {
+						let next = null;
+
+						if (!item.id) {
+							next = this.$service.space.type.add(data);
+						} else {
+							next = this.$service.space.type.update({
+								...data,
+								id: item.id
+							});
+						}
+
+						next.then(() => {
+							this.refreshCategory();
+							close();
+						}).catch((err) => {
+							this.$message.error(err);
+							done();
+						});
+					}
+				}
+			});
+		},
+
+		// 选择类目
+		selectCategory(item) {
+			this.category.current = item;
+			this.file.pagination = {
+				page: 1,
+				size: 12,
+				total: 0
+			};
+			this.refreshFile({
+				classifyId: item.id
+			});
+		},
+
+		// 打开类目列表右键菜单
+		openCategoryContextMenu(e, { id, name }) {
+			if (!id) {
+				return false;
+			}
+			this.$crud.openContextMenu(e, {
+				list: [
+					{
+						label: "编辑",
+						"suffix-icon": "el-icon-edit",
+						callback: (item, done) => {
+							done();
+							this.editCategory({ id, name });
+						}
+					},
+					{
+						label: "删除",
+						"suffix-icon": "el-icon-delete",
+						callback: (item, done) => {
+							done();
+
+							this.$confirm(`此操作将删除【${name}】下的文件, 是否继续?`, "提示", {
+								type: "warning"
+							})
+								.then(() => {
+									this.$service.space.type
+										.delete({
+											ids: id
+										})
+										.then(() => {
+											this.$message.success("删除成功");
+											this.refreshCategory();
+
+											// 删除当前类目时，重置选择
+											if (id == this.category.current.id) {
+												this.category.current = this.category.list[0];
+												this.refreshFile();
+											}
+										})
+										.catch((err) => {
+											console.error(err);
+											this.$message.error(err);
+										});
+								})
+								.catch(() => {});
+						}
+					}
+				]
+			});
+		},
+
+		// 打开文件列表右键菜单
+		openFileContextMenu(e, data) {
+			this.$crud.openContextMenu(e, {
+				list: [
+					{
+						label: data.selected ? "取消选中" : "选中",
+						"suffix-icon": data.selected ? "el-icon-close" : "el-icon-check",
+						callback: (item, done) => {
+							this.selectFile(data);
+							done();
+						}
+					},
+					{
+						label: "删除",
+						"suffix-icon": "el-icon-delete",
+						callback: (item, done) => {
+							this.deleteFile(data);
+							done();
+						}
+					}
+				]
+			});
+		},
+
+		// 确认选中文件
+		confirmFile() {
+			const selection = this.selection.filter((e, i) => i < this.limit);
+			const urls = selection.map((e) => e.url).join(",");
+
+			this.$emit("input", urls);
+			this.$emit("confirm", this.detailData ? selection : urls);
+
+			this.close();
+		},
+
+		// 选择文件
+		selectFile(item) {
+			this.$set(item, "selected", !item.selected);
+		},
+
+		// 删除选中文件
+		deleteFile(...selection) {
+			if (isEmpty(selection)) {
+				selection = this.selection;
+			}
+
+			this.$confirm("此操作将删除文件, 是否继续?", "提示", {
+				type: "warning"
+			})
+				.then(() => {
+					this.$message.success("删除成功");
+
+					this.file.list = this.file.list.filter(
+						(e) => !selection.map((e) => e.id).includes(e.id)
+					);
+
+					this.$service.space.info
+						.delete({
+							ids: selection.map((e) => e.id).join(",")
+						})
+						.catch((err) => {
+							this.$message.error(err);
+						});
+				})
+				.catch(() => {});
+		},
+
+		// 选择页
+		onCurrentChange(i) {
+			this.refreshFile({
+				page: i
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.cl-upload-space {
+	display: flex;
+	min-height: 520px;
+
+	&__category {
+		width: 250px;
+		margin-right: 20px;
+
+		&-search {
+			display: flex;
+			align-items: center;
+			margin-bottom: 5px;
+
+			.el-button {
+				margin-right: 10px;
+			}
+		}
+
+		&-list {
+			overflow: hidden auto;
+
+			ul {
+				li {
+					list-style: none;
+					font-size: 14px;
+					height: 40px;
+					line-height: 40px;
+					border-bottom: 1px dashed #eee;
+					padding: 0 5px;
+					cursor: pointer;
+
+					&.is-active {
+						color: #409eff;
+					}
+				}
+			}
+		}
+	}
+
+	&__content {
+		flex: 1;
+	}
+
+	&__opbar {
+		display: flex;
+		align-items: center;
+		margin-bottom: 10px;
+	}
+
+	&__file {
+		height: calc(100% - 80px);
+		overflow: hidden auto;
+		margin-bottom: 10px;
+
+		/deep/.cl-upload-space__file-item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 160px;
+			width: 160px;
+			cursor: pointer;
+			position: relative;
+			border-radius: 3px;
+			box-sizing: border-box;
+			border: 1px solid #eee;
+			margin: 5px 0;
+
+			&.is-image {
+				overflow: hidden;
+
+				img {
+					height: 100%;
+					width: 100%;
+				}
+			}
+
+			&.is-video {
+				video {
+					max-height: 100%;
+					width: 100%;
+				}
+			}
+
+			.cl-upload-space__file-size {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				background-color: rgba(0, 0, 0, 0.5);
+			}
+
+			.cl-upload-space__file-mask {
+				position: absolute;
+				left: 0;
+				top: 0;
+				height: 100%;
+				width: 100%;
+				background-color: rgba(0, 0, 0, 0.5);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				i {
+					font-size: 30px;
+					color: #67c23a;
+				}
+			}
+		}
+
+		&-empty {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-top: 100px;
+
+			& > div {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				border-radius: 6px;
+				cursor: pointer;
+				height: 180px;
+				width: 360px;
+
+				i {
+					font-size: 67px;
+					color: #c0c4cc;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/cool/components/upload/index.js b/cool/components/upload/index.js
new file mode 100644
index 0000000..21a489c
--- /dev/null
+++ b/cool/components/upload/index.js
@@ -0,0 +1,4 @@
+import service from "./service";
+import components from "./components";
+
+export default { components, service };
diff --git a/cool/components/upload/service/index.js b/cool/components/upload/service/index.js
new file mode 100644
index 0000000..010e0f9
--- /dev/null
+++ b/cool/components/upload/service/index.js
@@ -0,0 +1,9 @@
+import SpaceInfo from "./info";
+import SpaceType from "./type";
+
+export default {
+	space: {
+		info: new SpaceInfo(),
+		type: new SpaceType()
+	}
+};
diff --git a/cool/components/upload/service/info.js b/cool/components/upload/service/info.js
new file mode 100644
index 0000000..a83958b
--- /dev/null
+++ b/cool/components/upload/service/info.js
@@ -0,0 +1,6 @@
+import { BaseService, Service } from "cl-admin";
+
+@Service("app/space/info")
+class SpaceInfo extends BaseService {}
+
+export default SpaceInfo;
diff --git a/cool/components/upload/service/type.js b/cool/components/upload/service/type.js
new file mode 100644
index 0000000..5e17bc4
--- /dev/null
+++ b/cool/components/upload/service/type.js
@@ -0,0 +1,6 @@
+import { BaseService, Service } from "cl-admin";
+
+@Service("app/space/type")
+class SpaceType extends BaseService { }
+
+export default SpaceType;
diff --git a/cool/core/common/index.js b/cool/core/common/index.js
new file mode 100644
index 0000000..fc56843
--- /dev/null
+++ b/cool/core/common/index.js
@@ -0,0 +1,11 @@
+Promise.prototype.done = function (cb) {
+	let P = this.constructor;
+
+	return this.then(
+		(value) => P.resolve(cb()).then(() => value),
+		(reason) =>
+			P.resolve(cb()).then(() => {
+				throw reason;
+			})
+	);
+};
diff --git a/cool/core/index.js b/cool/core/index.js
new file mode 100644
index 0000000..9a476e7
--- /dev/null
+++ b/cool/core/index.js
@@ -0,0 +1,12 @@
+import { BaseService, Service, Permission } from "./service";
+import { SET_SERVICE, SET_ROUTER, SET_COMPONENT } from "./set";
+import "./common";
+
+async function bootstrap(options = {}) {
+	const { components } = options;
+
+	SET_ROUTER();
+	SET_SERVICE();
+	SET_COMPONENT({ events: components });
+}
+export { Service, Permission, BaseService, bootstrap };
diff --git a/cool/core/service/base.js b/cool/core/service/base.js
new file mode 100644
index 0000000..cb47aeb
--- /dev/null
+++ b/cool/core/service/base.js
@@ -0,0 +1,118 @@
+import request from "@/service/request";
+import { baseUrl } from "@/config/env";
+
+export default class BaseService {
+	constructor() {
+		const crud = {
+			page: "page",
+			list: "list",
+			info: "info",
+			add: "add",
+			delete: "delete",
+			update: "update"
+		};
+
+		if (!this.permission) {
+			this.permission = {};
+		}
+
+		for (let i in crud) {
+			if (this.namespace) {
+				this.permission[i] = this.namespace.replace(/\//g, ":") + ":" + crud[i];
+			} else {
+				this.permission[i] = crud[i];
+			}
+		}
+	}
+
+	request(options = {}) {
+		if (!options.params) {
+			options.params = {};
+		}
+
+		let path = "";
+
+		if (process.env.NODE_ENV == "development") {
+			path = this.proxy || baseUrl;
+		} else {
+			if (this.proxy) {
+				path = this.url;
+			} else {
+				path = baseUrl;
+			}
+		}
+
+		if (this.namespace) {
+			path += "/" + this.namespace;
+		}
+
+		if (options.url.indexOf("http") !== 0) {
+			if (options.url[0] === "@") {
+				options.url = options.url.replace("@", "");
+			} else {
+				options.url = path + options.url;
+			}
+		}
+
+		return request(options);
+	}
+
+	list(params) {
+		return this.request({
+			url: "/list",
+			method: "POST",
+			data: {
+				...params
+			}
+		});
+	}
+
+	page(params) {
+		return this.request({
+			url: "/page",
+			method: "POST",
+			data: {
+				...params
+			}
+		});
+	}
+
+	info(params) {
+		return this.request({
+			url: "/info",
+			params: {
+				...params
+			}
+		});
+	}
+
+	update(params) {
+		return this.request({
+			url: "/update",
+			method: "POST",
+			data: {
+				...params
+			}
+		});
+	}
+
+	delete(params) {
+		return this.request({
+			url: "/delete",
+			method: "POST",
+			data: {
+				...params
+			}
+		});
+	}
+
+	add(params) {
+		return this.request({
+			url: "/add",
+			method: "POST",
+			data: {
+				...params
+			}
+		});
+	}
+}
diff --git a/cool/core/service/desorator.js b/cool/core/service/desorator.js
new file mode 100644
index 0000000..4d60563
--- /dev/null
+++ b/cool/core/service/desorator.js
@@ -0,0 +1,40 @@
+import { isObject } from "../utils";
+
+export function Permission(value) {
+	return function (target, key, descriptor) {
+		if (!target.permission) {
+			target.permission = {};
+		}
+
+		setTimeout(() => {
+			target.permission[key] = (
+				(target.namespace ? target.namespace + "/" : "") + value
+			).replace(/\//g, ":");
+		}, 0);
+
+		return descriptor;
+	};
+}
+
+export function Service(value) {
+	const { devServer } = require("@/../vue.config.js");
+
+	return function (target) {
+		// 命名
+		if (typeof value == "string") {
+			target.prototype.namespace = value;
+		}
+
+		// 复杂项
+		if (isObject(value)) {
+			let { proxy, namespace, url } = value;
+
+			target.prototype.namespace = namespace;
+
+			if (proxy) {
+				target.prototype.proxy = proxy;
+				target.prototype.url = url || devServer.proxy[proxy].target;
+			}
+		}
+	};
+}
diff --git a/cool/core/service/index.js b/cool/core/service/index.js
new file mode 100644
index 0000000..f96b8cd
--- /dev/null
+++ b/cool/core/service/index.js
@@ -0,0 +1,4 @@
+import BaseService from "./base";
+import { Service, Permission } from "./desorator";
+
+export { BaseService, Service, Permission };
diff --git a/cool/core/set/component.js b/cool/core/set/component.js
new file mode 100644
index 0000000..a9139be
--- /dev/null
+++ b/cool/core/set/component.js
@@ -0,0 +1,150 @@
+import Vue from "vue";
+import Cool from "cool";
+import store from '@/store'
+import router from '@/router'
+import { deepMerge, isFunction, isObject } from "../utils";
+
+export default function (options = {}) {
+	if (!options.events) {
+		options.events = {};
+	}
+
+	// 组件模块
+	let componentModules = [];
+
+	// 组件列表
+	let components = [];
+
+	// 安装组件
+	function install(comp) {
+		let { store: _store, components, service, directives, filters, pages, views, name } = comp;
+		let { onInstall, onSuccess, onFail } = options.events[name] || {};
+
+		try {
+			const next = () => {
+				// 注册vuex模块
+				if (_store) {
+					for (let i in _store) {
+						store.registerModule(`${name}-${i}`, _store[i]);
+					}
+				}
+
+				// 注册组件
+				if (components) {
+					for (let i in components) {
+						Vue.component(components[i].name, components[i]);
+					}
+				}
+
+				// 注册请求服务
+				if (service) {
+					deepMerge(store.$service, service);
+				}
+
+				// 注册指令
+				if (directives) {
+					for (let i in directives) {
+						Vue.directive(i, directives[i]);
+					}
+				}
+
+				// 注册过滤器
+				if (filters) {
+					for (let i in filters) {
+						Vue.filter(i, filters[i]);
+					}
+				}
+
+				// 注册页面
+				if (pages) {
+					pages.forEach((e) => {
+						router.addRoute(e);
+					});
+				}
+
+				// 注册视图
+				if (views) {
+					views.forEach((e) => {
+						if (!e.meta) {
+							e.meta = {};
+						}
+
+						if (e.moduleName) {
+							componentModules.push(e);
+						} else {
+							e.meta.label = e.label;
+
+							if (e.path) {
+								router.$plugin.addViews([e], {
+									ignore404: true
+								});
+							} else {
+								console.error(`[${name}-views]：path in null`);
+							}
+						}
+					});
+				}
+
+				// 包安装成功
+				if (onSuccess) onSuccess(comp);
+			};
+
+			// 安装前
+			if (onInstall) {
+				onInstall(comp, { next });
+			} else {
+				next();
+			}
+		} catch (e) {
+			console.error(e);
+
+			// 安装失败
+			if (onFail) onFail(comp, e);
+		}
+	}
+
+	// 解析组件
+	Cool.components.map((e) => {
+		if (!e) {
+			return null;
+		}
+
+		let comp = null;
+
+		if (isObject(e)) {
+			comp = e;
+		} else {
+			comp = {
+				name: e[0],
+				value: e[1],
+				options: e[2]
+			};
+		}
+
+		if (comp.value) {
+			if (isFunction(comp.value.install)) {
+				comp.value = comp.value.install(Vue, comp.options);
+			}
+		}
+
+		// 是否开启
+		if (comp.options && comp.options.enable === false) {
+			return null;
+		}
+
+		if (comp) {
+			comp = {
+				name: comp.name,
+				options: comp.options,
+				...comp.value
+			};
+
+			components.push(comp);
+			install(comp);
+		}
+	});
+
+	// 设置缓存
+	store.commit("SET_COMPONENT_MODULES", componentModules);
+	store.commit("SET_COMPONENT", components);
+}
diff --git a/cool/core/set/index.js b/cool/core/set/index.js
new file mode 100644
index 0000000..6029c5d
--- /dev/null
+++ b/cool/core/set/index.js
@@ -0,0 +1,5 @@
+import SET_SERVICE from "./service";
+import SET_ROUTER from "./router";
+import SET_COMPONENT from "./component";
+
+export { SET_SERVICE, SET_ROUTER, SET_COMPONENT };
diff --git a/cool/core/set/router.js b/cool/core/set/router.js
new file mode 100644
index 0000000..4d10f12
--- /dev/null
+++ b/cool/core/set/router.js
@@ -0,0 +1,116 @@
+import VueRouter from 'vue-router'
+import { Message } from "element-ui";
+import store from "@/store";
+import router, { ignore } from '@/router'
+import storage from '../utils/storage'
+
+// Remove Navigating to current location (XXX) is not allowed
+const routerPush = VueRouter.prototype.push;
+VueRouter.prototype.push = function push(location) {
+	return routerPush.call(this, location).catch((error) => error);
+};
+
+export default function () {
+	router.$plugin = {
+		addViews: (list, options) => {
+			if (!options) {
+				options = {};
+			}
+
+			// Parse route config
+			list.map((e) => {
+				if (!e.component) {
+					let url = e.viewPath;
+
+					if (url) {
+						if (
+							/^(http[s]?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i.test(
+								url
+							)
+						) {
+							e.meta.iframeUrl = url;
+							e.component = () => import(`cool/components/base/pages/iframe/index.vue`);
+						} else {
+							if (url.indexOf("views/") === 0) {
+								e.component = () => import(`@/${url}`);
+							} else {
+								console.error(url, "异常");
+							}
+						}
+					} else {
+						e.redirect = "/404";
+					}
+				}
+			});
+
+			// Batch add route
+			list.forEach((e) => {
+				router.addRoute("index", e);
+			});
+
+			// Add 404 rule
+			if (!options.ignore404) {
+				router.addRoute({
+					path: "*",
+					redirect: "/404"
+				});
+			}
+		},
+
+		to: (url) => {
+			if (router.path != url) {
+				router.push(url);
+			}
+		}
+	};
+
+	router.beforeEach((to, from, next) => {
+		const { token, browser } = store.getters
+
+		if (token) {
+			if (to.path.indexOf('/login') === 0) {
+				// 登录成功且 token 未过期，回到首页
+				if (!storage.isExpired('token')) {
+					return next('/')
+				}
+			} else {
+				// 添加路由进程
+				store.commit("ADD_PROCESS", {
+					label: (to.meta && to.meta.label) || to.name,
+					value: to.fullPath
+				});
+			}
+		} else {
+			if (!ignore.token.some((e) => to.path.indexOf(e) === 0)) {
+				return next("/login");
+			}
+		}
+
+		// H5 下关闭左侧菜单
+		if (browser.isMobile) {
+			store.commit("COLLAPSE_MENU", true);
+		}
+
+		next()
+	})
+
+	let lock = false;
+
+	router.onError((err) => {
+		if (!lock) {
+			lock = true;
+
+			if (err.code == "MODULE_NOT_FOUND") {
+				console.error(err.message.replace("Cannot find module ", ""), "路由组件不存在");
+
+				Message.error(`路由组件路径错误`);
+			} else {
+				console.error(err);
+			}
+
+			setTimeout(() => {
+				lock = false;
+			}, 0);
+		}
+	});
+}
diff --git a/cool/core/set/service.js b/cool/core/set/service.js
new file mode 100644
index 0000000..c91bac0
--- /dev/null
+++ b/cool/core/set/service.js
@@ -0,0 +1,53 @@
+import Vue from "vue";
+import path from "path";
+import store from '@/store'
+
+export default function () {
+	const files = require.context("@/service/", true, /\.js$/);
+	const ignore = ["./request.js"];
+
+	let modules = {};
+
+	files
+		.keys()
+		.filter((e) => !ignore.includes(e))
+		.map((e) => {
+			if (e.includes("--ignore")) {
+				return false;
+			}
+
+			let list = e.substr(2).split("/");
+			let parents = list.slice(0, list.length - 1);
+			let name = path.basename(e, ".js");
+
+			let curr = modules;
+			let prev = null;
+			let key = null;
+
+			parents.forEach((k) => {
+				if (!curr[k]) {
+					curr[k] = {};
+				}
+
+				prev = curr;
+				curr = curr[k];
+				key = k;
+			});
+
+			let ep = files(e);
+
+			if (ep.default) {
+				let service = new ep.default();
+
+				if (name == "index") {
+					prev[key] = service;
+				} else {
+					curr[name] = service;
+				}
+			} else {
+				console.error(`Service must export default [${e}]`);
+			}
+		});
+
+	Vue.prototype.$service = store.$service = modules;
+}
diff --git a/cool/core/utils/index.js b/cool/core/utils/index.js
new file mode 100644
index 0000000..8d5553b
--- /dev/null
+++ b/cool/core/utils/index.js
@@ -0,0 +1,256 @@
+import { routerMode } from "@/config/env";
+
+export function getUrlParam(name) {
+	let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+	let r = window.location.search.substr(1).match(reg);
+	if (r != null) return decodeURIComponent(r[2]);
+	return null;
+}
+
+export function isPc() {
+	const userAgentInfo = navigator.userAgent;
+	const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
+	let flag = true;
+	for (let v = 0; v < Agents.length; v++) {
+		if (userAgentInfo.indexOf(Agents[v]) > 0) {
+			flag = false;
+			break;
+		}
+	}
+	return flag;
+}
+
+export const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+
+export function getBrowser() {
+	let ua = navigator.userAgent.toLowerCase();
+	let btypeInfo = (ua.match(/firefox|chrome|safari|opera/g) || "other")[0];
+	if ((ua.match(/msie|trident/g) || [])[0]) {
+		btypeInfo = "msie";
+	}
+	let pc = "";
+	let prefix = "";
+	let plat = "";
+
+	let isTocuh =
+		"ontouchstart" in window || ua.indexOf("touch") !== -1 || ua.indexOf("mobile") !== -1;
+	if (isTocuh) {
+		if (ua.indexOf("ipad") !== -1) {
+			pc = "pad";
+		} else if (ua.indexOf("mobile") !== -1) {
+			pc = "mobile";
+		} else if (ua.indexOf("android") !== -1) {
+			pc = "androidPad";
+		} else {
+			pc = "pc";
+		}
+	} else {
+		pc = "pc";
+	}
+	switch (btypeInfo) {
+		case "chrome":
+		case "safari":
+		case "mobile":
+			prefix = "webkit";
+			break;
+		case "msie":
+			prefix = "ms";
+			break;
+		case "firefox":
+			prefix = "Moz";
+			break;
+		case "opera":
+			prefix = "O";
+			break;
+		default:
+			prefix = "webkit";
+			break;
+	}
+	plat = ua.indexOf("android") > 0 ? "android" : navigator.platform.toLowerCase();
+	return {
+		version: (ua.match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
+		plat: plat,
+		type: btypeInfo,
+		pc: pc,
+		prefix: prefix,
+		isMobile: pc == "pc" ? false : true
+	};
+}
+
+export function href(path, newWindow) {
+	let { search, origin } = window.location;
+
+	let url = "";
+
+	if (routerMode == "history") {
+		url = origin + path;
+	} else {
+		url = origin + search + "#" + path;
+	}
+
+	if (newWindow) {
+		window.open(url);
+	} else {
+		window.location.href = url;
+	}
+}
+
+export function orderBy(list, key) {
+	return list.sort((a, b) => a[key] - b[key]);
+}
+
+export function deepTree(list) {
+	let newList = [];
+	let map = {};
+
+	list.forEach((e) => (map[e.id] = e));
+
+	list.forEach((e) => {
+		let parent = map[e.parentId];
+
+		if (parent) {
+			(parent.children || (parent.children = [])).push(e);
+		} else {
+			newList.push(e);
+		}
+	});
+
+	const fn = (list) => {
+		list.map((e) => {
+			if (e.children instanceof Array) {
+				e.children = orderBy(e.children, "orderNum");
+
+				fn(e.children);
+			}
+		});
+	};
+
+	fn(newList);
+
+	return orderBy(newList, "orderNum");
+}
+
+export function revDeepTree(list = []) {
+	let d = [];
+	let id = 0;
+
+	const deep = (list, parentId) => {
+		list.forEach((e) => {
+			e.id = id++;
+			e.parentId = parentId;
+
+			d.push(e);
+
+			if (e.children && isArray(e.children)) {
+				deep(e.children, e.id);
+			}
+		});
+	};
+
+	deep(list || [], null);
+
+	return d;
+}
+
+export function debounce(fn, delay) {
+	let timer = null;
+
+	return function () {
+		let args = arguments;
+		let context = this;
+
+		if (timer) {
+			clearTimeout(timer);
+
+			timer = setTimeout(function () {
+				fn.apply(context, args);
+			}, delay);
+		} else {
+			timer = setTimeout(function () {
+				fn.apply(context, args);
+			}, delay);
+		}
+	};
+}
+
+export function isArray(value) {
+	if (typeof Array.isArray === "function") {
+		return Array.isArray(value);
+	} else {
+		return Object.prototype.toString.call(value) === "[object Array]";
+	}
+}
+
+export function isObject(value) {
+	return Object.prototype.toString.call(value) === "[object Object]";
+}
+
+export function isNumber(value) {
+	return !isNaN(Number(value));
+}
+
+export function isFunction(value) {
+	return typeof value == "function";
+}
+
+export function isString(value) {
+	return typeof value == "string";
+}
+
+export function isEmpty(value) {
+	if (isArray(value)) {
+		return value.length === 0;
+	}
+
+	if (isObject(value)) {
+		return Object.keys(value).length === 0;
+	}
+
+	return value === "" || value === undefined || value === null;
+}
+
+export function last(data) {
+	if (isArray(data) || isString(data)) {
+		return data[data.length - 1];
+	}
+}
+
+export function cloneDeep(obj) {
+	let d = isArray(obj) ? obj : {};
+
+	if (isObject(obj)) {
+		for (let key in obj) {
+			if (obj.hasOwnProperty && obj.hasOwnProperty(key)) {
+				if (obj[key] && typeof obj[key] === "object") {
+					d[key] = cloneDeep(obj[key]);
+				} else {
+					d[key] = obj[key];
+				}
+			}
+		}
+	}
+
+	return d;
+}
+
+export function clone(obj) {
+	return Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
+}
+
+export function deepMerge(a, b) {
+	let k;
+	for (k in b) {
+		a[k] =
+			a[k] && a[k].toString() === "[object Object]" ? deepMerge(a[k], b[k]) : (a[k] = b[k]);
+	}
+	return a;
+}
+
+export function contains(parent, node) {
+	if (document.documentElement.contains) {
+		return parent !== node && parent.contains(node);
+	} else {
+		while (node && (node = node.parentNode)) if (node === parent) return true;
+		return false;
+	}
+}
diff --git a/cool/core/utils/storage.js b/cool/core/utils/storage.js
new file mode 100644
index 0000000..e350abb
--- /dev/null
+++ b/cool/core/utils/storage.js
@@ -0,0 +1,81 @@
+import store from 'store'
+
+export default {
+    // 后缀标识
+    suffix: "_deadtime",
+
+    /**
+     * 获取
+     * @param {string} key 关键字
+     */
+    get(key) {
+        return store.get(key)
+    },
+
+    /**
+     * 获取全部
+     */
+    info() {
+        let d = {}
+
+        store.each(function (value, key) {
+            d[key] = value
+        })
+
+        return d
+    },
+
+    /**
+     * 设置
+     * @param {string} key 关键字
+     * @param {*} value 值
+     * @param {number} expires 过期时间
+     */
+    set(key, value, expires) {
+        store.set(key, value);
+
+        if (expires) {
+            store.set(`${key}${this.suffix}`, Date.parse(new Date()) + expires * 1000);
+        }
+    },
+
+    /**
+     * 是否过期
+     * @param {string} key 关键字
+     */
+    isExpired(key) {
+        return (this.getExpiration(key) || 0) - Date.parse(new Date()) <= 2000;
+    },
+
+    /**
+     * 获取到期时间
+     * @param {string} key 关键字
+     */
+    getExpiration(key) {
+        return this.get(key + this.suffix)
+    },
+
+    /**
+     * 移除
+     * @param {string} key 关键字
+     */
+    remove(key) {
+        store.remove(key)
+        this.removeExpiration(key)
+    },
+
+    /**
+     * 移除到期时间
+     * @param {string} key 关键字
+     */
+    removeExpiration(key) {
+        store.remove(key + this.suffix)
+    },
+
+    /**
+     * 清理
+     */
+    clearAll() {
+        store.clearAll()
+    }
+};
diff --git a/cool/index.js b/cool/index.js
new file mode 100644
index 0000000..e4ea4c8
--- /dev/null
+++ b/cool/index.js
@@ -0,0 +1,55 @@
+import Base from "./components/base";
+import Upload from "./components/upload";
+import Chat from "./components/chat";
+import Codemirror from "./components/codemirror";
+import Copy from "./components/copy";
+import Demo from "./components/demo";
+import Distpicker from "./components/distpicker";
+import EditorQuill from "./components/editor-quill";
+import Log from "./components/log";
+import Param from "./components/param";
+import Perf from "./components/perf";
+import Task from "./components/task";
+import Crud from "cl-admin-crud";
+import Export from "cl-admin-export";
+
+export default {
+	components: [
+		["base", Base],
+		[
+			"upload",
+			Upload,
+			{
+				icon: "el-icon-picture",
+				text: "选择图片",
+				limitSize: 1,
+				rename: true
+			}
+		],
+		[
+			"crud",
+			Crud,
+			{
+				crud: {
+					dict: {
+						sort: {
+							prop: "order",
+							order: "sort"
+						}
+					}
+				}
+			}
+		],
+		["export", Export],
+		// ["chat", Chat],
+		["codemirror", Codemirror],
+		["copy", Copy],
+		["demo", Demo],
+		["distpicker", Distpicker],
+		["editor-quill", EditorQuill],
+		["log", Log],
+		["param", Param],
+		["perf", Perf],
+		["task", Task]
+	]
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e91c1e1
--- /dev/null
+++ b/package.json
@@ -0,0 +1,53 @@
+{
+	"name": "cool-admin-vue",
+	"version": "3.0.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build",
+		"report": "vue-cli-service build --report",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"axios": "^0.21.1",
+		"cl-admin": "^1.1.13",
+		"cl-admin-crud": "^1.2.7",
+		"cl-admin-export": "^1.0.5",
+		"core-js": "^3.9.0",
+		"dayjs": "^1.10.3",
+		"echarts": "^4.5.0",
+		"element-ui": "^2.13.0",
+		"nprogress": "^0.2.0",
+		"qs": "^6.9.1",
+		"store": "^2.0.12",
+		"vue": "^2.6.10",
+		"vue-echarts": "^5.0.0-beta.0",
+		"vue-router": "^3.5.1",
+		"vuex": "^3.6.2"
+	},
+	"devDependencies": {
+		"@typescript-eslint/parser": "^3.0.0",
+		"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+		"@vue/babel-preset-jsx": "^1.1.2",
+		"@vue/cli-plugin-babel": "^4.1.0",
+		"@vue/cli-plugin-eslint": "^4.1.0",
+		"@vue/cli-plugin-router": "^4.1.0",
+		"@vue/cli-plugin-vuex": "^4.1.0",
+		"@vue/cli-service": "^4.1.0",
+		"@vue/eslint-config-prettier": "^6.0.0",
+		"babel-eslint": "^10.0.3",
+		"babel-plugin-component": "^1.1.1",
+		"babel-plugin-jsx-v-model": "^2.0.3",
+		"clean-webpack-plugin": "^3.0.0",
+		"eslint": "^7.0.0",
+		"eslint-plugin-prettier": "^3.1.1",
+		"eslint-plugin-vue": "^6.2.2",
+		"node-sass": "^4.13.0",
+		"prettier": "^2.0.5",
+		"sass-loader": "^8.0.0",
+		"svg-sprite-loader": "^5.0.0",
+		"typescript": "^3.9.3",
+		"vue-template-compiler": "^2.6.10",
+		"webpack-cli": "^3.3.12"
+	}
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..3080304
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+	plugins: {
+		autoprefixer: {}
+	}
+};
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..0b823a3
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..340e6c7
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="referer" content="never" />
+		<meta name="renderer" content="webkit" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
+		/>
+		<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+		<title>COOL-ADMIN</title>
+		<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
+		<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
+		<% } %>
+		<style>
+			html,
+			body,
+			#app {
+				height: 100%;
+				margin: 0;
+				padding: 0;
+			}
+
+			.preload {
+				display: flex;
+				flex-direction: column;
+				height: 100%;
+				letter-spacing: 1px;
+				background-color: #2f3447;
+			}
+
+			.preload .container {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				width: 100%;
+				user-select: none;
+				flex-grow: 1;
+			}
+
+			.preload .name {
+				font-size: 30px;
+				color: #fff;
+				letter-spacing: 5px;
+				font-weight: bold;
+			}
+
+			.preload .title {
+				color: #fff;
+				font-size: 14px;
+				margin-bottom: 10px;
+			}
+
+			.preload .sub-title {
+				color: #ababab;
+				font-size: 12px;
+			}
+
+			.preload .footer {
+				text-align: center;
+				padding: 10px 0 20px 0;
+			}
+
+			.preload .footer a {
+				font-size: 12px;
+				color: #ababab;
+				text-decoration: none;
+			}
+		</style>
+	</head>
+	<body>
+		<noscript>
+			<strong
+				>We're sorry but cool-admin doesn't work properly without JavaScript enabled. Please
+				enable it to continue.</strong
+			>
+		</noscript>
+		<div id="app">
+			<div class="preload">
+				<div class="container">
+					<p class="name">COOL-ADMIN</p>
+					<p class="title">正在加载资源...</p>
+					<p class="sub-title">初次加载资源可能需要较多时间 请耐心等待</p>
+				</div>
+
+				<div class="footer">
+					<a href="https://cool-js.com/" target="_blank"> https://cool-js.com </a>
+				</div>
+			</div>
+		</div>
+
+		<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
+		<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
+		<% } %>
+	</body>
+</html>
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..fca4b9f
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+	<div id="app">
+		<router-view />
+	</div>
+</template>
+
+<style lang="scss" src="./assets/css/index.scss"></style>
diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
new file mode 100644
index 0000000..b82fc7b
--- /dev/null
+++ b/src/assets/css/common.scss
@@ -0,0 +1,14 @@
+$color-main: #2f3447;
+$color-danger: #f56c6c;
+$color-primary: #4165d7;
+$color-success: #67c23a;
+$color-info: #909399;
+$color-warning: #e6a23c;
+
+@mixin text_ellipsis($line: 1) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: $line;
+}
diff --git a/src/assets/css/element-variables.scss b/src/assets/css/element-variables.scss
new file mode 100644
index 0000000..28b86c4
--- /dev/null
+++ b/src/assets/css/element-variables.scss
@@ -0,0 +1,9 @@
+$--color-primary: $color-primary;
+$--color-success: $color-success;
+$--color-danger: $color-danger;
+$--color-warning: $color-warning;
+$--color-info: $color-info;
+
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/index";
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
new file mode 100644
index 0000000..1619837
--- /dev/null
+++ b/src/assets/css/index.scss
@@ -0,0 +1,40 @@
+* {
+	padding: 0;
+	margin: 0;
+	font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+		"微软雅黑", Arial, sans-serif;
+}
+
+*::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+*::-webkit-scrollbar-thumb {
+	background-color: rgba(144, 147, 153, 0.3);
+}
+
+*::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+#app {
+	height: 100vh;
+	width: 100vw;
+	overflow: hidden;
+}
+
+a {
+	text-decoration: none;
+}
+
+input,
+button {
+	outline: none;
+}
+
+input {
+	&:-webkit-autofill {
+		box-shadow: 0 0 0px 1000px white inset;
+	}
+}
diff --git a/src/assets/icon/logo/silder-simple.png b/src/assets/icon/logo/silder-simple.png
new file mode 100644
index 0000000..a75c618
Binary files /dev/null and b/src/assets/icon/logo/silder-simple.png differ
diff --git a/src/assets/icon/logo/silder.png b/src/assets/icon/logo/silder.png
new file mode 100644
index 0000000..ebf6856
Binary files /dev/null and b/src/assets/icon/logo/silder.png differ
diff --git a/src/config/env.js b/src/config/env.js
new file mode 100644
index 0000000..4f30a2a
--- /dev/null
+++ b/src/config/env.js
@@ -0,0 +1,58 @@
+import store from "store";
+import { getUrlParam } from "cl-admin/utils";
+
+// 路由模式
+const routerMode = "history";
+
+// 开发模式
+const isDev = process.env.NODE_ENV == "development";
+
+// Host
+const host = "https://show.cool-admin.com";
+
+// 请求地址
+const baseUrl = (function () {
+	let proxy = getUrlParam("proxy");
+
+	if (proxy) {
+		store.set("proxy", proxy);
+	} else {
+		proxy = store.get("proxy") || "dev";
+	}
+
+	switch (process.env.NODE_ENV) {
+		case "development":
+			return `/${proxy}/admin`;
+		case "production":
+			return `/api/admin`;
+		default:
+			return "";
+	}
+})();
+
+// Socket
+const socketUrl = (isDev ? `${host}` : "") + "/socket";
+
+// 阿里字体图标库 https://at.alicdn.com/t/**.css
+const iconfontUrl = ``;
+
+// 程序配置参数
+const app = {
+	name: "cool-admin",
+
+	conf: {
+		// 是否显示一级菜单栏
+		showAMenu: false,
+		// 是否显示路由导航栏
+		showRouteNav: true,
+		// 是否显示页面进程栏
+		showProcess: true,
+		// 自定义菜单
+		customMenu: false
+	}
+};
+
+// 自定义菜单列表
+const menuList = [];
+
+export { routerMode, baseUrl, socketUrl, iconfontUrl, app, isDev, menuList };
diff --git a/src/element.js b/src/element.js
new file mode 100644
index 0000000..ed190b9
--- /dev/null
+++ b/src/element.js
@@ -0,0 +1,172 @@
+import Vue from "vue";
+import {
+	Pagination,
+	Dialog,
+	Autocomplete,
+	Dropdown,
+	DropdownMenu,
+	DropdownItem,
+	Menu,
+	Submenu,
+	MenuItem,
+	MenuItemGroup,
+	Input,
+	InputNumber,
+	Radio,
+	RadioGroup,
+	RadioButton,
+	Checkbox,
+	CheckboxButton,
+	CheckboxGroup,
+	Switch,
+	Select,
+	Option,
+	OptionGroup,
+	Button,
+	ButtonGroup,
+	Table,
+	TableColumn,
+	DatePicker,
+	TimeSelect,
+	TimePicker,
+	Popover,
+	Tooltip,
+	Breadcrumb,
+	BreadcrumbItem,
+	Form,
+	FormItem,
+	Tabs,
+	TabPane,
+	Tag,
+	Tree,
+	Alert,
+	Slider,
+	Icon,
+	Row,
+	Col,
+	Upload,
+	Progress,
+	Spinner,
+	Badge,
+	Card,
+	Rate,
+	Steps,
+	Step,
+	Carousel,
+	CarouselItem,
+	Collapse,
+	CollapseItem,
+	Cascader,
+	ColorPicker,
+	Transfer,
+	Container,
+	Header,
+	Aside,
+	Main,
+	Footer,
+	Timeline,
+	TimelineItem,
+	Link,
+	Divider,
+	Image,
+	Calendar,
+	Backtop,
+	PageHeader,
+	CascaderPanel,
+	Loading,
+	MessageBox,
+	Message,
+	Notification,
+	Drawer,
+	Scrollbar,
+	InfiniteScroll
+} from "element-ui";
+
+import "@/assets/css/element-variables.scss";
+
+Vue.use(Pagination);
+Vue.use(Dialog);
+Vue.use(Autocomplete);
+Vue.use(Dropdown);
+Vue.use(DropdownMenu);
+Vue.use(DropdownItem);
+Vue.use(Menu);
+Vue.use(Submenu);
+Vue.use(MenuItem);
+Vue.use(MenuItemGroup);
+Vue.use(Input);
+Vue.use(InputNumber);
+Vue.use(Radio);
+Vue.use(RadioGroup);
+Vue.use(RadioButton);
+Vue.use(Checkbox);
+Vue.use(CheckboxButton);
+Vue.use(CheckboxGroup);
+Vue.use(Switch);
+Vue.use(Select);
+Vue.use(Option);
+Vue.use(OptionGroup);
+Vue.use(Button);
+Vue.use(ButtonGroup);
+Vue.use(Table);
+Vue.use(TableColumn);
+Vue.use(DatePicker);
+Vue.use(TimeSelect);
+Vue.use(TimePicker);
+Vue.use(Popover);
+Vue.use(Tooltip);
+Vue.use(Breadcrumb);
+Vue.use(BreadcrumbItem);
+Vue.use(Form);
+Vue.use(FormItem);
+Vue.use(Tabs);
+Vue.use(TabPane);
+Vue.use(Tag);
+Vue.use(Tree);
+Vue.use(Alert);
+Vue.use(Slider);
+Vue.use(Icon);
+Vue.use(Row);
+Vue.use(Col);
+Vue.use(Upload);
+Vue.use(Progress);
+Vue.use(Spinner);
+Vue.use(Badge);
+Vue.use(Card);
+Vue.use(Rate);
+Vue.use(Steps);
+Vue.use(Step);
+Vue.use(Carousel);
+Vue.use(CarouselItem);
+Vue.use(Collapse);
+Vue.use(CollapseItem);
+Vue.use(Cascader);
+// Vue.use(ColorPicker);
+// Vue.use(Transfer);
+// Vue.use(Container);
+// Vue.use(Header);
+// Vue.use(Aside);
+// Vue.use(Main);
+// Vue.use(Footer);
+// Vue.use(Timeline);
+// Vue.use(TimelineItem);
+Vue.use(Link);
+Vue.use(Divider);
+Vue.use(Image);
+Vue.use(Calendar);
+Vue.use(Backtop);
+// Vue.use(PageHeader);
+Vue.use(CascaderPanel);
+Vue.use(Drawer);
+Vue.use(Scrollbar);
+Vue.use(InfiniteScroll);
+
+Vue.use(Loading.directive);
+
+Vue.prototype.$loading = Loading.service;
+Vue.prototype.$msgbox = MessageBox;
+Vue.prototype.$alert = MessageBox.alert;
+Vue.prototype.$confirm = MessageBox.confirm;
+Vue.prototype.$prompt = MessageBox.prompt;
+Vue.prototype.$notify = Notification;
+Vue.prototype.$message = Message;
diff --git a/src/icons/svg/icon-activity.svg b/src/icons/svg/icon-activity.svg
new file mode 100644
index 0000000..be00ee9
--- /dev/null
+++ b/src/icons/svg/icon-activity.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441341007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11418" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M848.896 132.192c-10.048-5.664-22.4-5.408-32.352 0.544-0.448 0.288-45.664 27.328-98.688 27.328-53.184 0-99.776-27.232-100.16-27.424a29.488 29.488 0 0 0-3.456-1.792c-3.2-1.408-79.008-34.752-149.696-34.752-70.08 0-151.936 32.96-155.36 34.368-12.032 4.896-19.936 16.64-19.936 29.632v416a32.041 32.041 0 0 0 14.24 26.624c8.928 5.984 20.192 7.04 30.08 2.912 19.68-8.224 80.992-29.536 127.68-29.536 51.52 0 115.776 24.768 126.208 28.928 11.712 6.304 68.544 35.072 133.088 35.072 72.032 0 127.776-35.616 130.08-37.152 9.088-5.92 14.592-16 14.592-26.848v-416c0.032-11.584-6.24-22.208-16.32-27.904z m-271.68 763.744H224.768V128.064c0-17.664-14.336-32-32-32s-32 14.336-32 32v768c0 0.064 0.032 0.096 0.032 0.16-16.96 0.8-30.56 14.528-30.56 31.712 0 17.696 14.336 32 32 32h414.976c17.696 0 32-14.304 32-32s-14.304-32-32-32z" p-id="11419"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-app.svg b/src/icons/svg/icon-app.svg
new file mode 100644
index 0000000..1d82a1c
--- /dev/null
+++ b/src/icons/svg/icon-app.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441249036" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4552" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M364.8 590.62857143H182.85714286c-60.34285714 0-109.71428571-49.37142857-109.71428572-109.71428572V182.85714286c0-60.34285714 49.37142857-109.71428571 109.71428572-109.71428572h181.94285714c60.34285714 0 109.71428571 49.37142857 109.71428571 109.71428572v298.05714285c0 60.34285714-49.37142857 109.71428571-109.71428571 109.71428572zM841.14285714 358.4H659.2c-60.34285714 0-109.71428571-49.37142857-109.71428571-109.71428571V182.85714286c0-60.34285714 49.37142857-109.71428571 109.71428571-109.71428572H841.14285714c60.34285714 0 109.71428571 49.37142857 109.71428572 109.71428572v65.82857143c0 60.34285714-49.37142857 109.71428571-109.71428572 109.71428571zM364.8 950.85714286H182.85714286c-60.34285714 0-109.71428571-49.37142857-109.71428572-109.71428572v-65.82857143c0-60.34285714 49.37142857-109.71428571 109.71428572-109.71428571h181.94285714c60.34285714 0 109.71428571 49.37142857 109.71428571 109.71428571v65.82857143c0 60.34285714-49.37142857 109.71428571-109.71428571 109.71428572z m476.34285714 0H659.2c-60.34285714 0-109.71428571-49.37142857-109.71428571-109.71428572V543.08571429c0-60.34285714 49.37142857-109.71428571 109.71428571-109.71428572H841.14285714c60.34285714 0 109.71428571 49.37142857 109.71428572 109.71428572V841.14285714c0 60.34285714-49.37142857 109.71428571-109.71428572 109.71428572z" p-id="4553"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-approve.svg b/src/icons/svg/icon-approve.svg
new file mode 100644
index 0000000..e77593c
--- /dev/null
+++ b/src/icons/svg/icon-approve.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441250987" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4692" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M825.42250667 584.80298667H628.39239111l-29.53557333-99.30865778c74.05568-33.86026667 125.62545778-108.54172445 125.62545777-195.44291556 0-118.69297778-95.98862222-214.90005333-214.37553777-214.90005333-118.40170667 0-214.37553778 96.22186667-214.37553778 214.90005333 0 86.91484445 51.56977778 161.59744 125.62545778 195.44291556l-29.53557333 99.30865778h-197.02897778a70.59000889 70.59000889 0 0 0-70.59000889 70.59000888v131.0572089c0 17.31697778 14.03904 31.34122667 31.34008889 31.34122666h709.05628444a31.36967111 31.36967111 0 0 0 31.36967111-31.37080889V655.36341333a70.54563555 70.54563555 0 0 0-70.54563555-70.56042666z m48.71509333 291.24266666h-728.07537778a21.84533333 21.84533333 0 0 0-21.84533333 21.84533334v29.12711111a21.84533333 21.84533333 0 0 0 21.84533333 21.84533333h728.09016889a21.84533333 21.84533333 0 0 0 21.84533334-21.84533333v-29.12711111a21.84533333 21.84533333 0 0 0-21.86012445-21.84533334z" p-id="4693"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-auth.svg b/src/icons/svg/icon-auth.svg
new file mode 100644
index 0000000..b299f59
--- /dev/null
+++ b/src/icons/svg/icon-auth.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441301181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8337" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M864.35351563 176.78515625c-22.93945313 3.95507813-46.40625 6.06445313-70.48828126 6.06445313-101.42578125 0-194.32617188-36.82617188-265.95703124-97.73437501-9.31640625-7.91015625-23.02734375-7.91015625-32.34375001 0-71.63085938 60.99609375-164.53125 97.734375-265.95703124 97.734375-23.73046875 0-47.02148438-2.02148438-69.60937501-5.88867187-15.1171875-2.54882813-28.91601563 9.140625-29.00390625 24.52148437-0.17578125 95.88867188-0.3515625 209.26757813-0.3515625 213.13476563 0 413.96484375 346.72851563 520.92773438 378.80859376 529.98046875 1.58203125 0.43945313 3.1640625 0.43945313 4.74609374 0C546.18945313 935.6328125 890.80859375 829.28515625 893.00585938 418.57226562l0.35156249-217.08984374c0-15.46875-13.88671875-27.33398438-29.00390625-24.69726563zM541.8828125 562.00976563v135.79101562c0 16.5234375-13.359375 29.8828125-29.8828125 29.8828125s-29.8828125-13.359375-29.8828125-29.8828125V562.00976563c-59.94140625-13.62304688-104.67773438-67.1484375-104.67773438-131.22070313 0-74.26757813 60.20507813-134.56054688 134.56054688-134.56054688S646.56054688 356.43359375 646.56054688 430.7890625c0 64.07226563-44.73632813 117.68554688-104.67773438 131.22070313z" p-id="8338"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-ban.svg b/src/icons/svg/icon-ban.svg
new file mode 100644
index 0000000..0376a77
--- /dev/null
+++ b/src/icons/svg/icon-ban.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441322440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10017" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M509.27 62.598c-248.668 0-450.254 199.753-450.254 446.161s201.586 446.162 450.255 446.162 450.255-199.754 450.255-446.162S757.939 62.598 509.27 62.598z m0 148.72c55.666 0 107.78 15.033 152.468 41.2L250.676 659.842c-26.404-44.281-41.575-95.922-41.575-151.084 0-164.27 134.386-297.441 300.17-297.441z m0 594.883c-55.666 0-107.78-15.033-152.469-41.198l411.062-407.326C794.27 401.96 809.44 453.6 809.44 508.76c0 164.277-134.394 297.442-300.17 297.442z" p-id="10018"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-camera.svg b/src/icons/svg/icon-camera.svg
new file mode 100644
index 0000000..c277464
--- /dev/null
+++ b/src/icons/svg/icon-camera.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441302655" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8477" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M284.22599111 249.97250845c11.41782755-31.32742163 22.64147437-62.24099555 33.94279348-93.11573334 5.90309452-16.13035141 16.45317689-23.63907792 33.554432-23.65121422 106.48871822-0.05218608 212.97743645-0.05218608 319.46615466 0 17.70928355 0.0121363 28.54456889 7.85703822 34.61635793 24.69979022 10.16172089 28.2338797 20.42781392 56.42892325 30.26549571 84.76596148 1.99399348 5.76109985 4.88121837 7.46989037 10.84863526 7.43105423 45.03779555-0.25971675 90.06102755-0.1432083 135.09760948-0.1432083 46.33152475 0 84.05477452 36.93317689 84.11909689 83.25256533 0.19418075 158.4126483 0.44054755 316.81194667-0.12864474 475.22459497-0.19418075 53.15333689-45.21862637 83.49771852-83.951616 83.43339615-247.67025303-0.46603378-495.35506963-0.23301689-743.02532267-0.23301689-43.83387497 0-81.34959408-37.54241897-81.36173036-81.46610253-0.02669985-159.4612243-0.01334992-318.93458489 0-478.39580918 0-44.29990875 37.55455525-81.7767917 81.90543643-81.80227792 47.92380682-0.0121363 95.85974992 0 144.65130193 0z m395.04129897 308.73524147c0.75123675-92.05502103-75.58849422-164.60094578-163.6555283-166.58280295-93.00043852-2.09593837-171.21522725 72.74131911-171.65577481 165.14465185-0.42719763 88.27456475 69.05067141 167.64351525 167.87531851 167.43598459 100.13293985-0.21966697 167.90201837-80.54617125 167.4359846-165.99904711z" p-id="8478"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-card.svg b/src/icons/svg/icon-card.svg
new file mode 100644
index 0000000..f6ae0e8
--- /dev/null
+++ b/src/icons/svg/icon-card.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441255776" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4972" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M891.733 170.667H132.267c-38.4 0-68.267 29.866-68.267 68.266v102.4h896v-102.4c0-38.4-29.867-68.266-68.267-68.266z m0 704c38.4 0 68.267-29.867 68.267-68.267V426.667H64V806.4c0 38.4 29.867 68.267 68.267 68.267h759.466zM192 554.667h253.867c19.2 0 32 12.8 32 32s-12.8 32-32 32H187.733c-17.066-2.134-27.733-14.934-27.733-32 0-19.2 12.8-32 32-32z m0 128h128c19.2 0 32 12.8 32 32s-12.8 32-32 32H187.733c-17.066-2.134-27.733-14.934-27.733-32 0-19.2 12.8-32 32-32z" p-id="4973"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-cart.svg b/src/icons/svg/icon-cart.svg
new file mode 100644
index 0000000..f6833eb
--- /dev/null
+++ b/src/icons/svg/icon-cart.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441257585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5112" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M259.2 896a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM768 896a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM940.8 284.8c-16-19.2-38.4-28.8-64-28.8H249.6l-22.4-112c-6.4-44.8-44.8-80-92.8-80H96c-19.2 0-32 16-32 32s12.8 32 32 32h38.4c12.8 0 25.6 9.6 28.8 25.6L192 310.4l51.2 371.2c6.4 48 44.8 86.4 89.6 86.4h486.4c44.8 0 83.2-32 89.6-73.6L960 355.2c3.2-25.6-3.2-51.2-19.2-70.4z" p-id="5113"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-command.svg b/src/icons/svg/icon-command.svg
new file mode 100644
index 0000000..172c809
--- /dev/null
+++ b/src/icons/svg/icon-command.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441314533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9317" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M478.176 454.848c-17.12 0-33.184 6.656-45.248 18.72-24.928 24.96-24.928 65.568 0 90.592 24.128 24.096 66.304 24.064 90.496-0.032 12.096-12.096 18.752-28.16 18.752-45.28s-6.656-33.184-18.752-45.28c-12.064-12.096-28.096-18.72-45.248-18.72zM512 63.968c-247.04 0-448 172.256-448 384 0 116.48 63.008 226.048 170.592 298.944l87.328 71.52c-3.904 19.328-17.408 60.096-32.64 97.536-4.928 12.096-1.984 25.984 7.36 35.072a32.049 32.049 0 0 0 22.272 8.992c4.384 0 8.8-0.896 12.992-2.752 36.416-16.224 147.488-68.96 187.584-125.376C763.104 828.448 960 657.568 960 447.968c0-211.744-200.96-384-448-384z m214.624 334.656c12.512 12.512 12.512 32.736 0 45.248-6.24 6.24-14.432 9.376-22.624 9.376s-16.384-3.136-22.624-9.376l-39.84-39.84-52.288 52.288c10.688 18.944 16.896 40.128 16.928 62.496 0.032 34.24-13.312 66.4-37.504 90.592-24.16 24.16-56.288 37.472-90.496 37.472-34.176 0-66.336-13.312-90.496-37.472-49.888-49.984-49.888-131.2 0-181.056 24.16-24.16 56.288-37.472 90.496-37.472 24.032 0 46.912 6.912 66.848 19.2l136.352-136.352c12.512-12.512 32.736-12.512 45.248 0s12.512 32.736 0 45.248l-39.84 39.84 39.84 39.808z" p-id="9318"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-common.svg b/src/icons/svg/icon-common.svg
new file mode 100644
index 0000000..7fe6060
--- /dev/null
+++ b/src/icons/svg/icon-common.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441297938" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8056" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 65.984C266.08 65.984 65.984 266.08 65.984 512c0 245.952 200.064 446.016 446.016 446.016 245.952 0 446.016-200.064 446.016-446.016 0-245.92-200.064-446.016-446.016-446.016zM512 672c-88.224 0-160-71.776-160-160s71.776-160 160-160 160 71.776 160 160-71.776 160-160 160z" p-id="8057"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-count.svg b/src/icons/svg/icon-count.svg
new file mode 100644
index 0000000..daf26ba
--- /dev/null
+++ b/src/icons/svg/icon-count.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441329307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10578" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M517.46416016 442.25V126.28583984A64.28583984 64.28583984 0 0 1 592.35839844 62.96416016a450 450 0 0 1 368.67832031 368.67832031 64.28583984 64.28583984 0 0 1-63.32167969 74.89335937H581.75a64.28583984 64.28583984 0 0 1-64.28583984-64.28583984z m-21.53583985 117.96416016h299.08916016a64.28583984 64.28583984 0 0 1 64.28583984 75.21416015A401.78583984 401.78583984 0 1 1 388.57167969 165.5a64.28583984 64.28583984 0 0 1 75.21416015 64.28583984v298.28583985a32.14248047 32.14248047 0 0 0 32.14248047 32.14248047z" p-id="10579"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-crown.svg b/src/icons/svg/icon-crown.svg
new file mode 100644
index 0000000..71429de
--- /dev/null
+++ b/src/icons/svg/icon-crown.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441339081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11278" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M960.14 330.74c0-57.69-46.92-104.61-104.64-104.61S750.86 273.05 750.86 330.74c0 49.41 34.5 90.69 80.64 101.61-41.46 82.65-96.24 159.48-125.58 159.48-28.56 0-86.13-83.31-144.36-242.94 41.88-18.42 70.41-59.97 70.41-107.94 0-65.28-53.13-118.38-118.41-118.38-65.31 0-118.44 53.13-118.44 118.38 0 48.09 28.65 89.7 70.65 108.03C403.79 520.7 349.85 583.97 327.71 583.97c-41.13 0-98.25-79.98-135.42-151.65 46.17-10.89 80.73-52.2 80.73-101.64 0-57.69-46.95-104.61-104.64-104.61S63.74 273.05 63.74 330.74c0 39.54 22.32 73.62 54.78 91.41L139.25 839.81a29.955 29.955 0 0 0 13.86 23.82c4.35 2.79 109.41 67.65 360.45 67.65s356.1-65.1 360.45-67.86a30.1209375 30.1209375 0 0 0 13.86-24l18.48-417.81c31.92-17.88 53.79-51.69 53.79-90.87z" p-id="11279"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-dept.svg b/src/icons/svg/icon-dept.svg
new file mode 100644
index 0000000..1182824
--- /dev/null
+++ b/src/icons/svg/icon-dept.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441317794" class="icon" viewBox="0 0 1096 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9597" xmlns:xlink="http://www.w3.org/1999/xlink" width="137" height="128"><defs><style type="text/css"></style></defs><path d="M415.24 190.419A128.774 128.774 0 1 0 544.014 62 128.774 128.774 0 0 0 415.24 190.419zM254.806 544.014h578.417a32.016 32.016 0 0 1 32.016 32.016v32.015a32.016 32.016 0 0 0 32.015 32.372 32.016 32.016 0 0 0 32.016-32.372v-96.402a32.016 32.016 0 0 0-32.016-32.016H608.046a32.016 32.016 0 0 1-32.016-32.016V415.24a32.016 32.016 0 0 0-32.016-32.016 32.371 32.371 0 0 0-32.371 32.016v32.371a32.016 32.016 0 0 1-32.016 32.016H190.42a32.016 32.016 0 0 0-32.016 32.016v96.402a32.016 32.016 0 0 0 32.016 32.372 32.371 32.371 0 0 0 32.371-32.372V576.03a32.016 32.016 0 0 1 32.016-32.016zM62 833.223A128.774 128.774 0 1 0 190.42 704.448 128.419 128.419 0 0 0 62 833.223z m706.836 0a128.419 128.419 0 1 0 128.418-128.775 128.419 128.419 0 0 0-128.418 128.775z m-353.596 0a128.774 128.774 0 1 0 128.774-128.775A128.774 128.774 0 0 0 415.24 833.223z" p-id="9598"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-discover.svg b/src/icons/svg/icon-discover.svg
new file mode 100644
index 0000000..3747d7e
--- /dev/null
+++ b/src/icons/svg/icon-discover.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441331528" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10718" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M928.768 87.232c-0.032-7.456-1.216-13.696-2.848-19.328-31.328-8.288-72.128 1.248-106.624 17.984-7.072 3.424-23.84 13.632-48.672 28.736-10.272 6.272-19.328 11.776-23.328 14.048-0.384 0.224-0.608 0.64-0.96 0.864C678.56 88.256 599.296 64 514.272 64c-247.04 0-448 200.96-448 448 0 82.816 22.976 160.192 62.304 226.784C82.112 810.4 59.072 862.112 65.088 897.152c1.248 7.168 13.6 8.32 20.384 8.32 138.432 0 454.848-303.776 494.208-342.496C753.504 392 928.864 182.976 928.768 87.232zM306.272 610.688c-44.096 0-80-35.872-80-80 0-44.096 35.904-80 80-80s80 35.904 80 80c0 44.128-35.904 80-80 80z m140.8-224c-52.928 0-96-43.072-96-96s43.072-96 96-96 96 43.072 96 96-43.072 96-96 96zM895.904 278.56C828.8 378.208 723.296 497.856 618.048 601.344c-28.64 28.192-202.272 196.448-348.096 286.112 0.128-0.096 0.224-0.16 0.352-0.224C340.576 933.088 424.288 960 514.272 960c247.04 0 448-200.96 448-448-0.032-85.6-24.544-165.344-66.368-233.44zM640.032 800c-35.296 0-64-28.704-64-64s28.704-64 64-64 64 28.704 64 64-28.704 64-64 64z" p-id="10719"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-emoji.svg b/src/icons/svg/icon-emoji.svg
new file mode 100644
index 0000000..2809858
--- /dev/null
+++ b/src/icons/svg/icon-emoji.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441239241" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 960.00035C264.5696 960.00035 63.99965 759.4304 63.99965 512S264.5696 63.99965 512 63.99965 960.00035 264.5696 960.00035 512 759.4304 960.00035 512 960.00035z m-179.20035-403.2a179.20035 179.20035 0 1 0 358.4007 0H332.79965z m0-89.6007a67.2 67.2 0 1 0 0-134.4 67.2 67.2 0 0 0 0 134.4z m358.4007 0a67.2 67.2 0 1 0 0-134.4 67.2 67.2 0 0 0 0 134.4z" p-id="4413"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-favor.svg b/src/icons/svg/icon-favor.svg
new file mode 100644
index 0000000..98ad58e
--- /dev/null
+++ b/src/icons/svg/icon-favor.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441342980" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11558" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M957.216 404.32c-3.808-11.36-13.632-19.68-25.504-21.504l-270.336-41.728-120.8-258.624C535.328 71.232 524.032 64.032 511.648 64h-0.064a31.968 31.968 0 0 0-28.928 18.336L360.8 340.352l-270.72 40.8a32.014 32.014 0 0 0-25.568 21.408c-3.84 11.36-0.992 23.936 7.36 32.512l196.448 202.08-46.88 284.8a31.997 31.997 0 0 0 13.12 31.328c9.984 7.072 23.168 7.808 33.888 1.92l241.824-133.024 241.312 133.856a32.547 32.547 0 0 0 15.52 3.968h0.64c17.696 0 32-14.304 32-32 0-3.968-0.704-7.776-2.016-11.296l-44.896-278.688L949.76 436.768c8.32-8.544 11.232-21.088 7.456-32.448z" p-id="11559"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-goods.svg b/src/icons/svg/icon-goods.svg
new file mode 100644
index 0000000..391d0ea
--- /dev/null
+++ b/src/icons/svg/icon-goods.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441261013" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5392" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M898.133 341.333c0-10.666-10.666-21.333-21.333-21.333h-128v-8.533C746.667 185.6 646.4 85.333 520.533 85.333h-17.066c-123.734 0-226.134 100.267-226.134 226.134V320h-128C138.667 320 128 328.533 128 341.333l-17.067 518.4v2.134C115.2 917.333 162.133 960 217.6 960h595.2c55.467 0 102.4-42.667 106.667-98.133v-2.134l-21.334-518.4zM320 311.467C320 209.067 403.2 128 503.467 128h17.066C620.8 128 704 211.2 704 311.467V320H320v-8.533z m-21.333 243.2C275.2 554.667 256 535.467 256 512c0-14.933 8.533-29.867 21.333-36.267V384c0-12.8 8.534-21.333 21.334-21.333S320 371.2 320 384v91.733c12.8 6.4 21.333 21.334 21.333 36.267 0 23.467-19.2 42.667-42.666 42.667z m426.666 0c-23.466 0-42.666-19.2-42.666-42.667 0-14.933 8.533-29.867 21.333-36.267V384c0-12.8 8.533-21.333 21.333-21.333S746.667 371.2 746.667 384v91.733C759.467 482.133 768 497.067 768 512c0 23.467-19.2 42.667-42.667 42.667z" p-id="5393"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-home.svg b/src/icons/svg/icon-home.svg
new file mode 100644
index 0000000..94cf445
--- /dev/null
+++ b/src/icons/svg/icon-home.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441323970" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10157" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M947.2 422.4L572.8 115.2c-32-25.6-86.4-25.6-118.4 0L76.8 425.6c-12.8 6.4-16 22.4-9.6 35.2 3.2 12.8 16 19.2 28.8 19.2h32v364.8c0 48 35.2 83.2 83.2 83.2H416c19.2 0 32-12.8 32-32V748.8c0-22.4 35.2-44.8 64-44.8 28.8 0 67.2 22.4 67.2 44.8V896c0 19.2 12.8 32 32 32h208c48 0 80-32 80-83.2V480h32c12.8 0 25.6-9.6 28.8-22.4 3.2-12.8 0-25.6-12.8-35.2z" p-id="10158"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-hot.svg b/src/icons/svg/icon-hot.svg
new file mode 100644
index 0000000..b907eeb
--- /dev/null
+++ b/src/icons/svg/icon-hot.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441312875" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9177" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M713 221c-12-9-27-6-36 0-9 9-15 24-9 36 6 12 9 27 12 42C599 110 464 68 458 65c-9-3-21 0-27 6-9 6-12 18-9 27 12 81-24 177-108 291-6-24-15-48-30-75-9-9-21-15-33-12-15 3-24 12-24 27-3 45-24 87-48 132C158 500 137 542 128 587c-30 141 93 309 219 357 9 3 18 6 30 9-24-18-39-48-45-90C308 680 506 632 515 464c144 99 210 315 129 474 3 0 6-3 9-3 0 0 3 0 3-3 153-84 237-195 243-324 15-198-153-366-186-387z" p-id="9178"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-info.svg b/src/icons/svg/icon-info.svg
new file mode 100644
index 0000000..797ed3a
--- /dev/null
+++ b/src/icons/svg/icon-info.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441311089" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9037" xmlns:xlink="http://www.w3.org/1999/xlink" width="128.125" height="128"><defs><style type="text/css"></style></defs><path d="M512.26455078 82.10585938C263.58681641 82.10585938 62.52910156 258.29667969 62.52910156 475.22744141c0 11.11113281 0.52910156 22.22226562 1.58730469 33.33339843C74.6984375 619.14306641 137.66152344 716.49775391 231.3125 782.10546875v147.61933594c0 22.75136719 24.86777344 36.50800781 43.91542969 24.86777343l152.90947265-92.59277343c27.51328125 4.2328125 55.55566406 6.87832031 84.12714844 6.87832031 235.45019531 0 428.57138672-158.20048828 448.14814453-359.78818359 1.05820312-11.11113281 2.11640625-22.22226562 2.11640625-33.33339844C962 258.29667969 760.41230469 82.10585938 512.26455078 82.10585938zM286.86728516 458.29619141c0-15.34394531 12.6984375-28.04238281 28.04238281-28.04238282h41.26992187c15.34394531 0 28.04238281 12.6984375 28.04238282 28.04238282s-12.6984375 28.04238281-28.04238282 28.04238281h-41.26992187c-15.34394531 0.52910156-28.04150391-12.16933594-28.04150391-28.04238281z m365.60917968 157.67226562H371.52353516c-15.34394531 0-28.04238281-12.6984375-28.04238282-28.04238281s12.6984375-28.04238281 28.04238282-28.04238281h281.48203125c15.34394531 0 28.04238281 12.6984375 28.04238281 28.04238281-0.52910156 15.34394531-12.6984375 28.04238281-28.57148438 28.04238281z m56.61386719-129.10078125H462.52900391c-15.34394531 0-28.04238281-12.6984375-28.04238282-28.04238281s12.6984375-28.04238281 28.04238282-28.04238281h246.03222656c15.34394531 0 28.04238281 12.6984375 28.04238281 28.04238281 0.52822266 15.34394531-12.16933594 28.04238281-27.51328125 28.04238281z" p-id="9038"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-like.svg b/src/icons/svg/icon-like.svg
new file mode 100644
index 0000000..c49af81
--- /dev/null
+++ b/src/icons/svg/icon-like.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441333584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10858" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M722 136c-61.83 0-120.54 23.46-165.36 66.06-4.29 4.05-26.88 26.94-44.37 44.7L467.9 202.6C423.05 159.64 364.13 136 302 136 169.67 136 62 243.67 62 376c0 77.28 38.61 135.27 71.7 171.09l297.09 300.12C454.31 870.7 480.41 886 512 886s57.72-15.3 81.33-38.91l296.94-300 2.07-2.31C928.16 500.11 962 457.93 962 376c0-132.33-107.67-240-240-240z" p-id="10859"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-living.svg b/src/icons/svg/icon-living.svg
new file mode 100644
index 0000000..47fd717
--- /dev/null
+++ b/src/icons/svg/icon-living.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441325978" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10297" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M407.467 488.533a106.667 106.667 0 1 0 213.333 0 106.667 106.667 0 1 0-213.333 0z" p-id="10298"></path><path d="M512 64C264.533 64 64 264.533 64 512c0 236.8 183.467 428.8 416 445.867v-134.4c-53.333-59.734-200.533-230.4-200.533-334.934 0-130.133 104.533-234.666 234.666-234.666S748.8 358.4 748.8 488.533c0 61.867-49.067 153.6-145.067 270.934L544 827.733V960c232.533-17.067 416-211.2 416-448 0-247.467-200.533-448-448-448z" p-id="10299"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-log.svg b/src/icons/svg/icon-log.svg
new file mode 100644
index 0000000..190b185
--- /dev/null
+++ b/src/icons/svg/icon-log.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441337115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11138" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M871.616 64H152.384c-31.488 0-60.416 25.28-60.416 58.24v779.52c0 32.896 26.24 58.24 60.352 58.24h719.232c34.112 0 60.352-25.344 60.352-58.24V122.24c0.128-32.96-28.8-58.24-60.288-58.24zM286.272 512c-23.616 0-44.672-20.224-44.672-43.008 0-22.784 20.992-43.008 44.608-43.008 23.616 0 44.608 20.224 44.608 43.008A43.328 43.328 0 0 1 286.272 512z m0-202.496c-23.616 0-44.608-20.224-44.608-43.008 0-22.784 20.992-43.008 44.608-43.008 23.616 0 44.608 20.224 44.608 43.008a43.456 43.456 0 0 1-44.608 43.008zM737.728 512H435.904c-23.68 0-44.672-20.224-44.672-43.008 0-22.784 20.992-43.008 44.608-43.008h299.264c23.616 0 44.608 20.224 44.608 43.008A42.752 42.752 0 0 1 737.728 512z m0-202.496H435.904c-23.616 0-44.608-20.224-44.608-43.008 0-22.784 20.992-43.008 44.608-43.008h299.264c23.616 0 44.608 20.224 44.608 43.008a42.88 42.88 0 0 1-42.048 43.008z" p-id="11139"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-menu.svg b/src/icons/svg/icon-menu.svg
new file mode 100644
index 0000000..7b16097
--- /dev/null
+++ b/src/icons/svg/icon-menu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441316068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9457" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M910.93333334 214.1088H116.55786667a37.23733333 37.23733333 0 0 1 0-74.47253333H910.93333334a37.23733333 37.23733333 0 0 1 0 74.47253333z m0 695.07946667H116.55786667a37.23733333 37.23733333 0 0 1 0-74.4736H910.93333334a37.23733333 37.23733333 0 0 1 0 74.4736zM712.33920001 561.648H116.55786667a37.23733333 37.23733333 0 0 1 0-74.47253333h595.78133334a37.23733333 37.23733333 0 0 1 0 74.47253333z" p-id="9458"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-message.svg b/src/icons/svg/icon-message.svg
new file mode 100644
index 0000000..0110fc8
--- /dev/null
+++ b/src/icons/svg/icon-message.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441267509" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5815" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 67.168c-247.04 0-448 172.256-448 384 0 116.512 63.04 226.048 174.048 301.408l84.16 52.032c-3.68 23.552-18.752 74.496-33.44 115.936-4.256 12.064-0.928 25.504 8.448 34.176a32.006 32.006 0 0 0 21.728 8.512c4.416 0 8.832-0.896 13.024-2.752 36.416-16.224 147.456-68.96 187.584-125.376C763.136 831.616 960 660.704 960 451.168c0-211.744-200.96-384-448-384z m68.224 476.8H384.96c-17.664 0-32-14.336-32-32s14.336-32 32-32h195.264c17.696 0 32 14.336 32 32s-14.304 32-32 32z m60.704-128H384.96c-17.664 0-32-14.336-32-32s14.336-32 32-32h255.968c17.696 0 32 14.336 32 32s-14.304 32-32 32z" p-id="5816"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-monitor.svg b/src/icons/svg/icon-monitor.svg
new file mode 100644
index 0000000..29f7eee
--- /dev/null
+++ b/src/icons/svg/icon-monitor.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441278876" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6655" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 133.12c208.896 0 378.88 169.984 378.88 378.88S720.896 890.88 512 890.88 133.12 720.896 133.12 512 303.104 133.12 512 133.12m0-71.68C262.144 61.44 61.44 262.144 61.44 512S264.192 962.56 512 962.56 962.56 759.808 962.56 512 761.856 61.44 512 61.44z" p-id="6656"></path><path d="M602.112 784.384h-2.048c-14.336-2.048-24.576-12.288-28.672-24.576l-67.584-356.352-36.864 129.024c-4.096 12.288-16.384 20.48-28.672 20.48h-36.864l-36.864 92.16c-4.096 12.288-16.384 20.48-28.672 20.48s-24.576-8.192-28.672-20.48l-45.056-135.168-14.336 28.672c-4.096 10.24-16.384 18.432-28.672 18.432H184.32c-16.384 0-30.72-14.336-30.72-30.72s14.336-34.816 30.72-34.816h16.384l38.912-81.92c6.144-12.288 16.384-18.432 30.72-18.432 12.288 0 22.528 8.192 26.624 20.48l40.96 126.976 12.288-30.72c4.096-12.288 16.384-20.48 28.672-20.48h34.816l67.584-229.376c4.096-14.336 16.384-22.528 30.72-22.528s26.624 10.24 28.672 24.576l71.68 374.784 92.16-260.096c4.096-12.288 16.384-20.48 28.672-20.48s24.576 8.192 28.672 20.48l40.96 116.736h36.864c16.384 0 30.72 12.288 30.72 30.72 0 16.384-12.288 30.72-30.72 30.72h-59.392c-14.336 0-24.576-8.192-28.672-20.48l-20.48-55.296-100.352 286.72c-4.096 12.288-16.384 20.48-28.672 20.48z" p-id="6657"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-new.svg b/src/icons/svg/icon-new.svg
new file mode 100644
index 0000000..3ebc4bf
--- /dev/null
+++ b/src/icons/svg/icon-new.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441271889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6095" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 63.68c-247.04 0-448 172.256-448 384 0 116.48 63.008 226.048 170.592 298.944l87.328 71.52c-3.904 19.328-17.408 60.096-32.64 97.536-4.928 12.096-1.984 25.984 7.36 35.072a32.049 32.049 0 0 0 22.272 8.992c4.384 0 8.8-0.896 12.992-2.752 36.416-16.224 147.488-68.96 187.616-125.376C763.136 828.16 960 657.248 960 447.68c0-211.712-200.96-384-448-384z m219.136 342.88l-128.8 188.864c-5.984 8.736-15.872 13.984-26.432 13.984h-0.448c-10.72-0.16-20.672-5.664-26.464-14.688l-91.584-142.208L385.824 592c-5.664 11.072-16.864 17.408-28.512 17.408-4.896 0-9.92-1.12-14.592-3.52-15.712-8.064-21.92-27.328-13.856-43.072L425.76 373.92a31.925 31.925 0 0 1 26.912-17.344c11.52-0.416 22.272 5.024 28.48 14.656l95.456 148.288L678.24 370.528c9.984-14.592 29.856-18.336 44.48-8.416 14.592 9.92 18.368 29.856 8.416 44.448z" p-id="6096"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-news.svg b/src/icons/svg/icon-news.svg
new file mode 100644
index 0000000..5cec609
--- /dev/null
+++ b/src/icons/svg/icon-news.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441270012" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5955" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M867.2 160H160c-54.4 0-96 44.8-96 96v512c0 54.4 41.6 96 96 96h707.2c54.4 0 96-41.6 96-96V256c0-51.2-41.6-96-96-96z m-672 163.2c0-19.2 12.8-32 32-32H416c19.2 0 32 12.8 32 32V512c0 19.2-12.8 32-32 32H227.2c-19.2 0-32-12.8-32-32V323.2zM800 736H224c-19.2 0-32-12.8-32-32s12.8-32 32-32h576c19.2 0 32 12.8 32 32s-12.8 32-32 32zM512 448c0-19.2 12.8-32 32-32h128c19.2 0 32 12.8 32 32s-12.8 32-32 32H544c-19.2 0-32-12.8-32-32z m288-96H544c-19.2 0-32-12.8-32-32s12.8-32 32-32h256c19.2 0 32 12.8 32 32s-12.8 32-32 32z" p-id="5956"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-pending.svg b/src/icons/svg/icon-pending.svg
new file mode 100644
index 0000000..90be6b0
--- /dev/null
+++ b/src/icons/svg/icon-pending.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441252941" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4832" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M736 96c31.04 0 51.712 25.856 51.712 62.08v304.96c-129.28 0-232.64 103.36-227.456 232.576 0 113.728 77.504 206.784 180.928 227.456H115.712c-31.04 0-51.712-25.856-51.712-67.2V158.08c0-36.16 20.672-62.016 51.712-62.016z m43.072 413.568l10.88 0.32C883.328 515.392 960 591.872 960 687.808c0 99.648-82.688 183.552-180.928 183.552h-5.12a179.2 179.2 0 0 1-124.16-52.416c-10.24-10.496-15.424-15.744-20.608-26.24a5.888 5.888 0 0 0-0.832-3.072l-3.52-4.288-0.832-3.136a16 16 0 0 1-3.072-4.736l-4.224-11.52-3.072-4.672c0-5.248-5.12-10.496-5.12-15.744l-1.344-5.248c-1.536-3.52-3.84-7.04-3.84-10.496-5.12-10.496-5.12-26.24-5.12-36.736 0-26.24 5.12-47.168 15.424-68.16v-5.248c0-5.248 5.184-15.744 10.368-20.928 0-1.344 0.32-2.304 0.832-3.2l3.52-4.224 0.832-3.072c30.976-47.232 82.688-78.72 149.888-78.72z m0 52.416c-15.488 0-25.856 10.496-25.856 26.24v125.824c0 15.744 10.368 26.24 25.856 26.24H892.8c10.368 0 25.856-10.496 25.856-26.24 0-15.744-10.368-26.24-25.856-26.24h-87.872v-99.584c0-15.744-10.368-26.24-25.856-26.24zM394.88 468.16H198.4a40.768 40.768 0 0 0-41.344 41.408c0 20.672 15.488 41.344 36.16 41.344h196.48c25.792 0 46.464-15.552 46.464-41.344a40.768 40.768 0 0 0-41.344-41.408z m165.44-206.72H198.4a40.768 40.768 0 0 0-41.344 41.344c0 20.672 15.488 41.344 36.16 41.344h361.856a40.768 40.768 0 0 0 41.344-41.344c0-25.856-15.488-41.344-36.16-41.344z" p-id="4833"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-pic.svg b/src/icons/svg/icon-pic.svg
new file mode 100644
index 0000000..0c68a0d
--- /dev/null
+++ b/src/icons/svg/icon-pic.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441277399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6515" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M842.688 128H181.312C116.64 128 64 180.64 64 245.312v533.376C64 843.36 116.64 896 181.312 896h661.376C907.36 896 960 843.36 960 778.688V245.312C960 180.64 907.36 128 842.688 128zM288 288c35.36 0 64 28.64 64 64s-28.64 64-64 64c-35.328 0-64-28.64-64-64s28.672-64 64-64z m544 448c0 17.696-14.304 31.488-32 31.488L225.92 768h-0.352c-10.08 0-19.616-4.288-25.664-12.384-6.112-8.192-7.936-18.56-4.896-28.352 2.304-7.488 58.272-183.552 180.064-183.552 38.08 0.896 67.424 9.824 95.776 18.336 35.712 10.72 70.528 19.936 109.664 13.76 20.448-3.296 28.896-23.808 43.328-69.952 19.04-60.8 47.808-152.736 174.656-152.736 17.536 0 31.776 14.08 32 31.616L832 511.616V736z" p-id="6516"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-question.svg b/src/icons/svg/icon-question.svg
new file mode 100644
index 0000000..8fbe696
--- /dev/null
+++ b/src/icons/svg/icon-question.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441273689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6235" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m0 768.352c-26.496 0-48-21.504-48-48s21.504-48 48-48 48 21.504 48 48-21.504 48-48 48z m88.576-327.168C572.736 532.992 544 561.728 544 587.552v54.112c0 17.664-14.336 32-32 32s-32-14.336-32-32v-54.112c0-52.352 40-92.352 75.328-127.648C581.216 434.016 608 407.264 608 385.92c0-53.344-43.072-96.736-96-96.736-53.824 0-96 41.536-96 94.56 0 17.664-14.336 32-32 32s-32-14.336-32-32c0-87.424 71.776-158.56 160-158.56S672 297.28 672 385.92c0 47.872-36.32 84.16-71.424 119.264z" p-id="6236"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-rank.svg b/src/icons/svg/icon-rank.svg
new file mode 100644
index 0000000..60916c5
--- /dev/null
+++ b/src/icons/svg/icon-rank.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441308883" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8897" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M228.255 913.307H66.103V672.523h162.152v240.784z m243.21 0H309.319V351.483h162.146v561.824z m243.216 0h-162.14v-321.04h162.14v321.04z m243.215 0H795.744V110.693h162.152v802.614z" p-id="8898"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-scan.svg b/src/icons/svg/icon-scan.svg
new file mode 100644
index 0000000..6e1e2c7
--- /dev/null
+++ b/src/icons/svg/icon-scan.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441290031" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7496" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M878.05658706 550.17593363c-3.09394647 0.78966835-6.93872514 0.86734064-10.61521382 0.86734064-101.25878361 0.05178153-202.53051259 0.05178153-303.78929621 0.03883615l-146.10158933 0.01294539c-87.48489639-0.01294539-174.95684741 0-262.45468918-0.01294539-20.49254083 0-38.5772405-14.52471941-41.15337166-33.07545284-3.21045491-22.9262728 8.15559111-41.71002311 28.94587575-47.82024375 3.90950558-1.15213906 8.78991486-1.70879052 14.90013552-1.70879052 90.61767902-0.03883615 181.23535803-0.03883615 271.85303704-0.05178153 142.81346213 0 290.48144276-0.01294539 435.74158222-0.16828997h0.06472691c29.29540109 0 42.3184561 20.02650706 44.55800731 37.16619377 2.64085808 20.1430155-11.10713837 39.37985422-31.94920455 44.75218805z m85.53014361 185.79213274c0 32.86832672-0.9061768 89.06423309-4.00012326 107.73147496-4.50499318 27.25003061-19.10738489 54.20231743-41.11453551 75.89877886-22.0977683 21.77413373-49.30896276 35.89754627-76.61077492 39.75527033-22.90038203 3.24929106-46.97879387 3.46936257-70.26753737 3.67648868-8.33682647 0.06472691-16.97139675 0.1423992-25.4635678 0.36247072-11.72851675 0.28479842-24.20786569 0.29774381-36.0399455-1.59228207-21.82591525-3.49525333-33.70977659-24.98458864-32.22105756-42.90099832 1.82529897-21.90358755 19.39218331-38.53840435 40.88151861-38.69374894 5.57945995-0.03883615 11.14597452-0.09061769 16.72543447-0.1423992 11.36604603-0.10356306 22.90038203-0.2200715 34.49944493-0.22007152 12.09098747 0 24.23375645 0.11650845 36.23412622 0.47897916 19.98767091 0.60843298 38.86203891-7.21057817 53.28319527-22.00715061 14.17519408-14.5376648 22.020096-34.27937343 20.98446538-52.81716148-1.17802983-21.15275536-0.86734064-42.95277985-0.55665146-64.02786291 0.11650845-7.2623597 0.2200715-14.78362706 0.27185303-22.18838598 0.1423992-23.18518045 13.32079882-39.74232494 35.23733177-44.28615427 10.7058315-2.22660583 22.74503743 0.93206755 32.23400295 8.44038953 9.83849086 7.78017502 15.43089619 19.10738489 15.76747616 31.88447763 0.09061769 4.22019476 0.15534459 11.54728139 0.15534459 20.64788543zM344.74565531 920.68573235c0.02589076 25.56713086-17.19146825 42.78448987-42.81038064 42.82332602-28.41511506 0.05178153-56.57132247 0.03883615-87.79558558 0.01294538-36.41536158-0.02589076-71.96338252-13.38552573-100.08075378-37.5933914-28.22093431-24.29848336-46.47392395-57.4516085-51.40611478-93.36210016-2.62791269-19.04265797-2.33016889-85.91850509-2.21366043-111.08432908 0.01294539-3.10689185 0.02589076-5.67007763 0.02589076-7.50832197 0.03883615-21.08802845 16.12994686-37.748736 38.27949669-39.63876189 1.00973985-0.09061769 2.04537047-0.12945383 3.0680557-0.12945382 15.34027852 0 33.10134361 9.50191091 38.56429512 31.52200692 1.52755517 6.13611141 1.56639131 13.08778192 1.61817283 20.4407593l0.01294539 1.69584515c0.11650845 14.21403022 0.10356306 28.6869681 0.0776723 42.69387218-0.01294539 12.582912-0.03883615 25.60596702 0.05178153 38.44778667 0.24596227 39.45752652 31.26309925 70.68178963 70.59117195 71.0830965 20.0653432 0.19418075 40.44137561 0.15534459 60.1442481 0.11650844 9.59252859-0.02589076 19.15916642-0.03883615 28.73874963-0.02589076 24.97164325 0 43.12106983 17.04906903 43.13401521 40.50610252z m0-818.14818766c-0.01294539 22.65441975-16.95845136 39.75527031-39.405745 39.75527033-9.45012939 0.01294539-18.874368 0-28.311552-0.01294539-18.58956958-0.03883615-37.80051753-0.06472691-56.73961244 0.0647269-37.95586213 0.25890765-67.22537245 22.12365906-76.3907034 57.07619241-1.50166439 5.70891378-1.7217359 11.3919368-1.73468129 16.71248909-0.05178153 11.18481067-0.01294539 22.53791131 0.01294539 33.51559584 0.05178153 18.70607803 0.11650845 38.07237057-0.20712612 57.03735626-0.33657995 18.9520403-7.87079269 31.35371694-23.068672 37.91702597-17.35975822 7.4824312-31.97509531 6.00665758-44.66157037-4.54382934-8.95820483-7.45654045-13.57970647-17.12674133-13.7091603-28.75169501-0.33657995-29.01060267-0.23301689-109.2719755 4.09074094-132.00406756 5.41116997-28.47984197 21.12686459-55.96288948 44.20848197-77.40044325 22.95216355-21.30809995 51.74269472-35.35384019 81.07693195-39.57403497 7.68955733-1.10035753 15.17198853-1.68289975 22.24016751-1.72173589 24.80335328-0.16828997 50.03390419-0.12945383 74.448896-0.10356306l19.04265798 0.02589076c10.88706686 0 20.80323003 4.14252247 27.89729974 11.66378983 7.23646894 7.65072118 11.22364682 18.43422498 11.21070144 30.34397708z m618.80223921 184.04450607c-0.02589076 6.58919981-0.06472691 13.16545422-0.0776723 19.74170865-0.05178153 21.02330153-15.19787931 39.58698035-34.51239032 42.24078379-21.73529758 3.0033288-40.77795555-10.14918005-46.30563398-31.93625915-0.64726914-2.57613117-0.73788682-5.74774992-0.75083219-8.77696948-0.03883615-13.42436187-0.02589076-26.83577837-0.01294538-40.26014026 0-17.1526321 0.01294539-34.90075181-0.06472692-52.33818231-0.16828997-32.53174676-20.1430155-60.31253808-49.69732425-69.10245294-7.83195653-2.33016889-16.67365294-3.57292563-26.25323615-3.68943408-13.02305502-0.15534459-26.14967309-0.19418075-39.14683733-0.19418073-6.92577975 0-13.81272336 0.01294539-20.62199467 0.02589077-10.01972622 0.01294539-20.05239783 0.02589076-30.07212405 0.01294537-20.2983601-0.03883615-38.24066053-19.04265797-38.39600513-40.67439249-0.09061769-10.73172227 4.42732089-21.50228069 12.38873126-29.56725412 7.28825047-7.37886815 16.36296375-11.46960909 25.61891239-11.52139061 7.02934282-0.03883615 13.82566875-0.05178153 20.3760324-0.05178154 56.58426785 0 94.87670992 1.38515595 108.76710558 4.00012326 56.22179714 10.55048691 104.55985619 59.85944969 114.95499852 117.20749511 2.12304276 11.68968059 3.2881272 24.44088257 3.57292563 38.96560197 0.42719763 21.90358755 0.33657995 44.28615427 0.23301689 65.91788879z" p-id="7497"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-search.svg b/src/icons/svg/icon-search.svg
new file mode 100644
index 0000000..166aebf
--- /dev/null
+++ b/src/icons/svg/icon-search.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441284945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7076" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M699.498496 793.02322252c-102.60024889 65.24472889-212.6764563 85.28175408-330.3135763 55.12305778-99.9424-25.61972148-178.67055408-82.76954075-236.59709629-167.90565927-113.18309925-166.34007703-85.29389037-393.90776889 64.40732444-529.93137778 150.44152889-136.70324148 376.79559111-142.24952889 534.40967112-13.84751407 156.78881185 127.72238222 206.19567408 369.53808592 71.21578666 557.56572445 2.20880592 2.34230518 4.50256592 4.86665482 6.90555259 7.26964148 42.9382163 42.96248889 85.96138667 85.8400237 128.81464889 128.87533037 26.06876445 26.19012741 31.72427852 59.41930667 15.44950519 88.61923555-22.9497363 41.19058963-78.49756445 49.23695408-112.20005927 15.83786667-45.21984-44.79506963-90.06345482-89.96636445-135.08911406-134.96775111-2.24521482-2.23307852-4.5996563-4.35693037-7.00264297-6.63855407z m-227.22787555-639.58281482c-165.40558222 0-300.19128889 134.48229925-300.02138075 299.34174815 0.16990815 164.58031408 134.87066075 299.30533925 299.32961185 299.41456593 165.33276445 0.10922667 300.08206222-134.16675555 300.21556148-299.1597037 0.15777185-165.29635555-134.11821037-299.59661037-299.52379258-299.59661038z" p-id="7077"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-system.svg b/src/icons/svg/icon-system.svg
new file mode 100644
index 0000000..a370d13
--- /dev/null
+++ b/src/icons/svg/icon-system.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441320870" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9877" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M956.17988281 446.79003906c-3.50683594-19.66376953-22.35234375-39.46289063-41.85175781-43.92597656l-14.45800781-3.34248047c-34.29140625-10.35351563-64.74550781-33.27539063-84.08232422-66.74589844-19.49941406-33.71132813-23.93789063-72-15.49863281-107.05693359l4.27148437-13.72060547c5.86230469-19.08984375-1.75253906-45.38144531-16.92421875-58.31103515 0 0-13.74873047-11.61035156-52.47949219-34.01367188-38.72460938-22.37519531-55.53896484-28.48535156-55.53896484-28.48535156-18.78925781-6.79130859-45.30146484-0.32607422-58.88408203 14.35253906l-10.19003906 10.95380859c-26.07363281 24.64892578-61.21142578 39.740625-99.83056641 39.740625-38.80546875 0-74.05488281-15.20068359-100.15488281-40.01396484l-9.83320313-10.62773437C387.1953125 90.94199219 360.65498047 84.44951172 341.86748047 91.24433594c0 0-16.81523438 6.07851562-55.62597656 28.48095703-38.66923828 22.40419922-52.33623047 33.9609375-52.33623047 33.9609375-15.22792969 12.92871094-22.86914063 39.11132813-16.95410156 58.28291016l4.24423828 13.85947265c8.32763672 35.02792969 3.83554687 73.23574219-15.49863282 106.92246094-19.39130859 33.60585937-50.146875 56.58398438-84.57539062 66.82324219l-14.1328125 3.23261718c-19.41503906 4.43847656-38.28955078 24.26572266-41.79550781 43.90136719 0 0-3.17548828 17.66601563-3.17548829 62.49902344 0 44.83564453 3.17548828 62.41992188 3.17548829 62.41992187 3.53320313 19.71826172 22.37871094 39.49189453 41.7946289 44.03759766l13.80761719 3.06914063c34.56298828 10.29550781 65.39941406 33.35712891 84.90234375 67.09921875 19.41503906 33.68671875 23.85351563 71.97539063 15.44414062 107.03320312l-4.18974609 13.69335938c-5.91503906 19.06083984 1.72529297 45.3515625 17.00683594 58.27939453 0 0 13.66699219 11.61298828 52.42148437 34.01542968 38.75361328 22.4578125 55.51611328 28.48623047 55.51611328 28.48623047 18.815625 6.79130859 45.27158203 0.27421875 58.85771485-14.29980468l9.72246094-10.45986329c26.10087891-24.92226562 61.37402344-40.09394531 100.23662109-40.09394531 38.83886719 0 74.16914062 15.28154297 100.37988281 40.09394531h0.02460938l9.61523437 10.46074219c13.58261719 14.57226563 39.98408203 21.09023438 58.82519531 14.29980469 0 0 16.7625-6.13476563 55.65410157-28.48710938 38.67363281-22.40332031 52.36523438-34.01542969 52.36523437-34.01542968 15.2296875-12.92695313 22.78828125-39.10869141 16.98310547-58.28027344l-4.27236328-14.1328125c-8.21777344-34.94619141-3.7265625-73.07226563 15.49863281-106.59287109 19.55566406-33.79658203 50.34111328-56.75097656 84.84785156-67.09921875v-0.05712891l13.80410157-3.17460938c19.50029297-4.43935547 38.34580078-24.21035156 41.84912109-43.93125 0 0 3.17636719-17.63789062 3.17636719-62.49902343-0.10898438-44.64316406-3.28447266-62.28105469-3.28447266-62.28105469z m-445.49121093 207.05449219c-79.61923828 0-144.20039063-64.74462891-144.20039063-144.60820312 0-79.75371094 64.58027344-144.44208984 144.20039063-144.44208985 79.61484375 0 144.11425781 64.71650391 144.11425781 144.55195313 0 79.86357422-64.49941406 144.49833984-144.11425781 144.49833984z" p-id="9878"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-tag (1).svg b/src/icons/svg/icon-tag (1).svg
new file mode 100644
index 0000000..4079665
--- /dev/null
+++ b/src/icons/svg/icon-tag (1).svg	
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441275424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6375" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M900.64 379.808L637.568 123.776c-36.448-35.328-105.76-35.392-142.304 0.096l-327.04 319.904c-56.416 54.72-70.72 76.704-70.72 150.976v143.936c0 132.768 26.976 192 186.912 192h131.872c81.12 0 128.448-46.656 193.952-111.264l290.016-297.696c18.592-17.984 29.248-43.968 29.248-71.264 0-27.104-10.528-52.864-28.864-70.656zM323.008 786.752c-52.928 0-96-43.072-96-96s43.072-96 96-96 96 43.072 96 96-43.072 96-96 96z" p-id="6376"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-tag.svg b/src/icons/svg/icon-tag.svg
new file mode 100644
index 0000000..84adbce
--- /dev/null
+++ b/src/icons/svg/icon-tag.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441259332" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5252" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M926.54933333 370.9952L645.9392 97.8944c-38.87786667-37.6832-112.81066667-37.75146667-151.79093333 0.1024l-348.84266667 341.23093333c-60.17706667 58.368-75.43466667 81.8176-75.43466667 161.04106667v153.53173333c0 141.6192 28.7744 204.8 199.3728 204.8h140.66346667c86.528 0 137.0112-49.7664 206.88213333-118.6816l309.3504-317.5424c19.83146667-19.18293333 31.19786667-46.8992 31.19786667-76.01493333 0-28.91093333-11.22986667-56.38826667-30.78826667-75.3664zM310.40853333 805.0688c-56.45653333 0-102.4-45.94346667-102.4-102.4s45.94346667-102.4 102.4-102.4 102.4 45.94346667 102.4 102.4-45.94346667 102.4-102.4 102.4z" p-id="5253"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-task.svg b/src/icons/svg/icon-task.svg
new file mode 100644
index 0000000..1a3ff3b
--- /dev/null
+++ b/src/icons/svg/icon-task.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441304345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8617" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M672 491.968c-83.648 68.288-160 142.208-160 142.208L373.504 467.2l-67.2 67.2s59.392 68.352 112 134.4C471.104 735.104 512 797.12 512 797.12s108.416-123.968 216.448-224.448c60.736-56.448 135.104-121.728 190.784-169.984v458.88c0 54.336-44.096 98.432-98.432 98.432H203.136c-54.336 0-98.432-44.096-98.432-98.432V310.144c0-12.352 4.8-24.256 13.44-33.088l193.92-198.784C321.024 69.184 333.248 64 345.984 64H820.8c54.336 0 98.432 44.096 98.432 98.432V312.64C861.056 352.128 746.176 431.36 672 491.968z" p-id="8618"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-time.svg b/src/icons/svg/icon-time.svg
new file mode 100644
index 0000000..7ac6296
--- /dev/null
+++ b/src/icons/svg/icon-time.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441281314" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6796" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 64C264.96 64 64 264.96 64 512s200.96 448 448 448 448-200.96 448-448S759.04 64 512 64z m159.264 512H480.16c-17.664 0-32.16-14.464-32.16-32.16V289.088c0-17.664 14.336-32 32-32s32 14.336 32 32V512h159.264c17.696 0 32 14.336 32 32 0 17.696-14.336 32-32 32z" p-id="6797"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-user.svg b/src/icons/svg/icon-user.svg
new file mode 100644
index 0000000..66d8df7
--- /dev/null
+++ b/src/icons/svg/icon-user.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441265116" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5675" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512.13653333 899.75239111H98.48604445c-17.72657778 0-23.19928889-5.24515555-22.96035556-22.8352 0.32995555-25.14488889-0.9216-50.49457778 1.8432-75.38915556 9.92142222-89.15626667 78.21084445-161.57582222 164.27235556-174.54648888 11.42328889-1.71804445 23.08551111-2.63964445 34.64533333-2.65102222 157.16124445-0.17066667 314.31111111-0.11377778 471.47235555-0.11377778 100.16995555 0 183.10257778 69.95057778 197.56373334 169.19893333 4.33493333 29.7984 2.62826667 60.49564445 3.16302222 90.79466667 0.14791111 8.23751111-6.98595555 14.57493333-15.29173334 15.37137778-2.93546667 0.28444445-5.92782222 0.17066667-8.88604444 0.17066666H512.13653333z m201.18186667-560.44657778c0 121.05955555-97.60995555 218.30542222-219.63662222 217.69102222-123.0848-0.6144-218.16888889-102.33173333-216.73528889-220.88817777 1.39946667-115.87128889 97.05244445-217.30417778 222.50382222-215.08551111 121.32124445 2.1504 215.26755555 102.68444445 213.86808889 218.28266666z" p-id="5676"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-video.svg b/src/icons/svg/icon-video.svg
new file mode 100644
index 0000000..1eee5b9
--- /dev/null
+++ b/src/icons/svg/icon-video.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441283344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6936" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M512 64C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z m179.2 480l-256 156.8c-6.4 3.2-12.8 3.2-19.2 3.2-6.4 0-9.6 0-16-3.2-9.6-6.4-16-16-16-28.8V352c0-12.8 6.4-22.4 16-28.8 9.6-6.4 22.4-6.4 32 0l256 166.4c9.6 6.4 16 16 16 28.8 0 9.6-3.2 22.4-12.8 25.6z" p-id="6937"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-wallet.svg b/src/icons/svg/icon-wallet.svg
new file mode 100644
index 0000000..d9a1412
--- /dev/null
+++ b/src/icons/svg/icon-wallet.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441288344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7356" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M677 339.66666667c36-36 75-90 75-147 0-33-9-60-30-81C683 72.66666667 614 72.66666667 536 72.66666667h-57c-75 0-135 0-174 36-21 21-30 48-30 84 0 60 39 111 72 147C215 408.66666667 125 546.66666667 125 687.66666667c0 261 264 261 390 261s390 0 390-261c0-144-93-279-228-348z m-72 246c18 0 30 12 30 30s-12 30-30 30h-60v30h60c18 0 30 12 30 30s-12 30-30 30h-60v63c0 18-12 30-30 30s-30-12-30-30v-63h-60c-18 0-30-12-30-30s12-30 30-30h60v-30h-60c-18 0-30-12-30-30s12-30 30-30h60V567.66666667l-84-81c-12-12-12-30 0-42 12-12 30-12 42 0l75 72 75-72c12-12 30-12 42 0 12 12 12 30 0 42l-90 87v12h60z" p-id="7357"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-warn.svg b/src/icons/svg/icon-warn.svg
new file mode 100644
index 0000000..3eab18d
--- /dev/null
+++ b/src/icons/svg/icon-warn.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441293293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7776" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M942.656 769.376L602.112 159.584c-22.144-39.712-55.104-62.496-90.304-62.496-35.232 0-68.16 22.784-90.368 62.528L81.312 769.344C59.296 808.8 57.056 848.8 75.2 879.744 93.344 910.624 129.664 928 174.88 928h674.24c45.184 0 81.536-17.376 99.648-48.256 18.176-30.944 15.904-70.912-6.112-110.368zM480 320c0-17.664 14.336-32 32-32s32 14.336 32 32v288c0 17.696-14.336 32-32 32s-32-14.304-32-32V320z m32 512.128c-26.528 0-48-21.504-48-48s21.472-48 48-48 48 21.504 48 48-21.472 48-48 48z" p-id="7777"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/icon-workbench.svg b/src/icons/svg/icon-workbench.svg
new file mode 100644
index 0000000..e67c8ed
--- /dev/null
+++ b/src/icons/svg/icon-workbench.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441286553" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7216" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M897.8 93.32H126.26c-35.52 0-64.26 28.8-64.26 64.32v548.1c0 35.52 28.74 64.2 64.26 64.2h321.42v96.42H287a32.1 32.1 0 0 0-32.1 32.1v32.1h514.2v-32.1a32.04 32.04 0 0 0-32.1-32.1H576.26V770h321.36c35.52 0 64.32-28.74 64.32-64.2V157.7a64.2 64.2 0 0 0-64.14-64.38zM512 737.9a32.1 32.1 0 1 1 0-64.2 32.1 32.1 0 0 1 0 64.2z m360-95.88H152V180.74h720v461.28z" p-id="7217"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/perf-cache.svg b/src/icons/svg/perf-cache.svg
new file mode 100644
index 0000000..5212052
--- /dev/null
+++ b/src/icons/svg/perf-cache.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441306173" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8757" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M739.50933333 332.1632v-105.92746667L512 102.4 284.49066667 226.23573333l-1.5712 105.92746667 229.1488 106.1088 227.44213333-105.92746667v106.10986667L512 544.08533333l-0.52266667 0.18133334-226.98666666-105.83466667v-106.10986667L56.88746667 438.272v269.0848L285.01333333 813.19253333 512 925.4688v-0.34133333l227.41866667-111.84426667 227.6928-105.9264V438.272z" p-id="8758"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/perf-connect.svg b/src/icons/svg/perf-connect.svg
new file mode 100644
index 0000000..3e37961
--- /dev/null
+++ b/src/icons/svg/perf-connect.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441295630" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7916" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M336.11889778 554.09208889h348.41941333v-87.09233778H336.11889778v87.09233778zM157.53671111 510.51178667c0-100.16768 78.34851555-178.57763555 178.58104889-178.57763556h130.66467555v-82.75057778H336.11889778c-143.74456889 0-261.32707555 117.58478222-261.32707556 261.32821334 0 143.74229333 117.58250667 261.32821333 261.32707556 261.32821333h130.66467555v-82.74830222H336.11889778c-100.23253333 0-178.58104889-78.47139555-178.58104889-178.57991111M684.53831111 249.18471111H553.87363555v82.75057778h130.66467556c100.16312889 0 178.51619555 78.40995555 178.51619556 178.57763556 0 100.10737778-78.35192889 178.57991111-178.51619556 178.5799111H553.87363555v82.74830223h130.66467556c143.74343111 0 261.32821333-117.58592 261.32821334-261.32821333 0-143.74343111-117.58478222-261.32821333-261.32821334-261.32821334" p-id="7917"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/perf-cpu.svg b/src/icons/svg/perf-cpu.svg
new file mode 100644
index 0000000..9a9cc0c
--- /dev/null
+++ b/src/icons/svg/perf-cpu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441291674" class="icon" viewBox="0 0 1099 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7636" xmlns:xlink="http://www.w3.org/1999/xlink" width="137.375" height="128"><defs><style type="text/css"></style></defs><path d="M1011.81895111 373.64622222v-73.78868147l-87.5026963 0.24272592v-114.44527408c0-29.00574815-14.92764445-45.26838518-43.93339259-45.26838518h-105.46441481V50.82074075h-74.63822223v89.56586666h-112.13937777V50.82074075h-74.63822223l-0.12136296 89.56586666h-112.13937778l0.24272592-89.56586666h-75.00231111l0.12136297 89.56586666h-98.18263704c-36.0448 0-50.85108148 16.26263703-50.60835555 53.88515556l-0.72817778 105.8285037h-89.08041482V373.64622222h89.08041482v103.03715556l-89.08041482-0.12136296v74.63822221l89.08041482 0.24272594v104.61487406h-89.08041482v73.30322964h89.08041482v100.00308148c0 41.26340741 16.62672592 58.37558518 58.0114963 58.37558518h91.50767407l-0.12136297 85.92497778h74.51685926l0.3640889-85.92497778h112.13937777v85.92497778h74.88094815l-0.12136297-85.92497778h112.13937779l-0.24272593 85.92497778h74.88094814l0.12136297-85.92497778h99.88171852c33.49617778 0 49.51608889-29.4912 49.51608889-58.37558518v-100.00308148h87.50269629v-73.30322964h-87.74542222v-104.61487406h87.5026963v-74.51685927l-87.5026963-0.24272592V373.64622222h87.5026963z m-162.26228148 439.33392593h-597.7125926V215.14619259h597.83395555V812.98014815z m-472.83010371-94.29902223h358.99164444c14.32082963 0 19.53943703-9.8304 19.53943705-22.81623703V336.0237037c0-15.29173333-10.43721482-23.78714075-22.81623705-23.78714073h-359.47709628c-18.6898963 0-24.15122963 6.91768889-24.15122964 25.72894814v352.68077037c0 18.6898963 9.22358518 28.03484445 27.91348148 28.03484444z" p-id="7637"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/perf-db.svg b/src/icons/svg/perf-db.svg
new file mode 100644
index 0000000..2b8ca77
--- /dev/null
+++ b/src/icons/svg/perf-db.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441335315" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10998" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M884.56851911 177.49090608C828.90296889 115.61278578 634.72222815 97.74815763 512 97.74815763s-316.90296889 17.86462815-372.56851911 79.74274845C130.11080533 181.37452089 123.63851852 190.43669333 123.63851852 201.31081482v647.26873126c0 10.87412148 6.47228682 19.93629392 15.79296237 23.81990874C195.09703111 934.27878875 389.27777185 952.14341689 512 952.14341689s316.90296889-17.86462815 372.56851911-79.74396207c9.32067555-3.88361482 15.79296237-12.94578725 15.79296237-23.81990874V201.31081482c0-10.87412148-6.47228682-19.93629392-15.79296237-23.81990874z m-35.98897303 450.49931851c-7.50751289 22.78468267-129.19451497 65.24472889-336.57954608 65.24472889-207.90325097 0-329.58903941-42.46004622-336.57954608-64.72650903V484.29647645C254.90469925 525.20429037 408.69584592 537.89036089 512 537.89036089s257.09530075-12.68607052 336.57954608-53.59388444v143.69374814z m0-207.12531437c-7.50751289 22.78346903-129.19451497 65.24472889-336.57954608 65.24472889-207.90325097 0-329.58903941-42.46125985-336.57954608-64.72772266V277.17116208c79.48424533 40.9066003 233.275392 53.59388445 336.57954608 53.59388444s257.09530075-12.68728415 336.57954608-53.59388444v143.69374814zM512 149.52887941c206.0900883 0 327.51858725 41.94304 336.57954608 64.72772267C839.77709037 237.04007111 718.34980503 278.98311111 512 278.98311111c-207.38503111 0-329.07203318-42.46125985-336.57954608-63.94978608v-0.25971673c7.50751289-22.78346903 129.19451497-65.24472889 336.57954608-65.24472889zM512 900.36148148c-207.90325097 0-329.58903941-42.46125985-336.57954608-64.72650903V691.42300445C254.90469925 732.33081837 408.69584592 745.01688889 512 745.01688889s257.09530075-12.68607052 336.57954608-53.59388444v143.69374814C841.07203318 857.90022163 719.38503111 900.36148148 512 900.36148148z" p-id="10999"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/perf-disk.svg b/src/icons/svg/perf-disk.svg
new file mode 100644
index 0000000..8fcd4a6
--- /dev/null
+++ b/src/icons/svg/perf-disk.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441319409" class="icon" viewBox="0 0 1099 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9737" xmlns:xlink="http://www.w3.org/1999/xlink" width="137.375" height="128"><defs><style type="text/css"></style></defs><path d="M427.85156025 795.07105396h113.36703157c13.53224006 0 23.33620992-7.87079269 23.3362099-21.1268646v-50.40069005c0-12.15139925-8.69929718-19.05560336-24.30279849-19.05560335h-113.22894749c-14.7749968 0-22.23153725 10.49439025-22.23153724 21.81728501v46.67241982c-0.13808409 10.63247434 11.46097883 22.09345317 23.06004175 22.09345317z m222.72962475 0h161.00603997c14.49882864 0 23.88854624-8.00887677 23.88854623-19.60793969v-50.40069004c0-12.01331517-8.28504494-20.57452827-24.30279849-20.57452827h-161.42029221c-14.36074457 0-23.47429398 8.28504494-23.47429398 20.43644418v44.32499042c0 14.08457639 8.42312903 25.8217234 24.30279848 25.8217234z m-342.17235594-746.20638078l-255.04130003 469.07162758v393.53963458c0 37.97312263 22.64578949 58.40956682 62.96634153 58.40956681h864.82060749c35.07335691 0 56.33830558-21.26494868 56.33830557-55.92405334V512.9652738l-255.86980452-464.10060062h-473.21415004z m424.05621675 77.18900201l214.72074799 384.14991696h-796.88323898l210.99247775-384.14991696h371.17001324z m222.17728843 765.95240454h-820.63370114V596.78231176h820.63370114v295.22376797z" p-id="9738"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/perf-lb.svg b/src/icons/svg/perf-lb.svg
new file mode 100644
index 0000000..ff0c36b
--- /dev/null
+++ b/src/icons/svg/perf-lb.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441299581" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8196" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M316.2048 750.35093333h398.3808v74.66666667H316.2048z m286.86506667-441.66933333l208.5632 361.23093333-64.66133334 37.33333334-208.5632-361.232z m-183.13173334 1.72906667l64.66133334 37.33333333-210.06186667 363.8272-64.66133333-37.33333333z" p-id="8197"></path><path d="M512 377.04746667c-79.4016 0-144-64.5984-144-144s64.5984-144 144-144 144 64.5984 144 144-64.5984 144-144 144z m0-213.33333334c-38.2304 0-69.33333333 31.10293333-69.33333333 69.33333334s31.10293333 69.33333333 69.33333333 69.33333333 69.33333333-31.10293333 69.33333333-69.33333333-31.10293333-69.33333333-69.33333333-69.33333334zM211.6832 922.66666667c-79.4016 0-144-64.5984-144-144s64.5984-144 144-144 144 64.5984 144 144-64.5984 144-144 144z m0-213.33333334c-38.2304 0-69.33333333 31.10293333-69.33333333 69.33333334s31.10293333 69.33333333 69.33333333 69.33333333 69.33333333-31.10293333 69.33333333-69.33333333-31.10293333-69.33333333-69.33333333-69.33333334z m604.22293333 213.33333334c-79.4016 0-144-64.5984-144-144s64.5984-144 144-144 144 64.5984 144 144-64.59733333 144-144 144z m0-213.33333334c-38.2304 0-69.33333333 31.10293333-69.33333333 69.33333334s31.10293333 69.33333333 69.33333333 69.33333333 69.33333333-31.10293333 69.33333334-69.33333333-31.10293333-69.33333333-69.33333334-69.33333334z" p-id="8198"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/perf-network.svg b/src/icons/svg/perf-network.svg
new file mode 100644
index 0000000..38176a8
--- /dev/null
+++ b/src/icons/svg/perf-network.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1614441327777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10438" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M511.05215525 64.30416592c-247.06950637 0-448.32692148 200.94187141-448.32692147 448.32692149 0 247.07072 200.94065778 448.32692148 448.32692147 448.32692148s448.32692148-200.94065778 448.3269215-448.32692148c0-247.38505008-201.25741511-448.32692148-448.3269215-448.32692149z m0 817.35164208c-36.01810015 0-83.40912355-71.71944297-108.36984414-193.67465718l216.42293097 0.3155437c-24.64396325 121.63967052-72.03498667 193.35911348-108.05308683 193.35911348z m-120.05952473-272.66010075c-3.15907792-30.3310317-4.7392237-62.55775289-4.7392237-96.68016355 0-35.70134282 1.89568948-69.50699615 5.37152473-101.10262992l239.48553482 0.3155437c3.47583525 31.28009008 5.05598103 65.08574341 5.05598104 100.78708622 0 34.43795437-1.58014578 66.66467555-4.73922371 96.99570727l-240.43459318-0.31554372z m120.05952473-465.7036705c35.70134282 0 82.46127882 70.45605452 107.42199942 189.56652088l-214.84399882-0.31554371c24.96072059-119.11168 72.0362003-189.25097718 107.4219994-189.25097717z m199.04618193 268.55317807l156.39195497 0.3155437c9.1629037 31.91117748 13.90212741 65.71804445 13.9021274 100.47154251 0 33.80565333-4.42368 66.34913185-12.95428266 97.31125097l-156.7087123-0.3155437c2.84353422-31.59563378 4.42368-64.13789867 4.42368-96.99570727 0-34.43795437-1.89568948-68.24482133-5.05476741-100.78708621z m123.53414637-78.66989985l-134.59273955-0.31554372c-8.53060267-45.49654755-20.22028325-87.51725985-35.07025541-124.1664474-5.68706845-14.53442845-12.0052243-27.80425482-18.64135111-40.12623644 80.25125925 31.27887645 146.91593482 90.04525037 188.30434607 164.60822756zM376.77495941 168.56708741c-6.63491318 12.32198163-12.63752533 25.9073517-18.64135111 40.12502281-14.84875852 36.65040118-26.53843911 78.35435615-35.06904178 123.8509037l-134.27598222-0.3155437c41.70395497-73.93188978 108.05308682-132.38272 187.98637511-163.66038281zM155.92956208 411.21291378l156.07641125 0.3155437c-3.15907792 32.85902222-4.7392237 66.66467555-4.7392237 101.10384355 0 32.85780859 1.58014578 65.08452978 4.42368 96.67894994l-154.81302281-0.31554372v7.58275793c-9.79399111-32.85902222-14.84997215-67.92927763-14.84997215-103.94737777-0.3155437-35.38458548 4.7392237-69.19145245 13.90212741-101.41817363z m30.3310317 276.45269333l136.1716717 0.31554371c8.5318163 47.07669333 20.53704059 90.36079408 35.70255644 128.2745837 5.68706845 14.53321482 12.0052243 27.80304118 18.64135111 40.12502281-81.5146477-31.91117748-149.127168-92.25648355-190.51557925-168.71515022z m459.0675437 168.71515022c6.63612682-12.32198163 12.63873897-25.9073517 18.64135111-40.12502281 15.16551585-37.59824592 27.17195378-80.88234667 35.70255644-127.64228267l135.856128 0.3155437c-41.38841125 75.82757925-108.68538785 135.5405843-190.20003555 167.45176178z" p-id="10439"></path></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..6baca22
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,29 @@
+import Vue from "vue";
+import App from "./App.vue";
+import { bootstrap } from "cool/core";
+// import { bootstrap } from "cl-admin";
+import "./element";
+
+// 路由
+import router from "@/router";
+
+// 缓存
+import store from "@/store";
+
+// 阻止显示生产模式的消息
+Vue.config.productionTip = false;
+
+// 配置
+bootstrap()
+	.then(() => {
+		store.dispatch("appLoad");
+
+		new Vue({
+			router,
+			store,
+			render: (h) => h(App)
+		}).$mount("#app");
+	})
+	.catch((err) => {
+		console.error("COOL-ADMIN 启动失败", err);
+	});
diff --git a/src/pages/home/components/category-ratio.vue b/src/pages/home/components/category-ratio.vue
new file mode 100644
index 0000000..c35af69
--- /dev/null
+++ b/src/pages/home/components/category-ratio.vue
@@ -0,0 +1,101 @@
+<template>
+	<div class="category-ratio">
+		<div class="category-ratio__header">
+			<span>销售额类别占比</span>
+		</div>
+
+		<div class="category-ratio__container">
+			<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+		</div>
+	</div>
+</template>
+
+<script>
+import VueEcharts from "vue-echarts";
+import "echarts";
+
+export default {
+	components: {
+		VueEcharts
+	},
+
+	data() {
+		return {
+			chartOptions: {
+				tooltip: {
+					trigger: "item",
+					formatter: "{a} <br/>{b}: {c} ({d}%)"
+				},
+				legend: {
+					bottom: 30,
+					left: "center",
+					data: ["手机", "相机", "耳机", "音箱", "手表"]
+				},
+				color: ["#3AA1FF", "#36CBCB", "#F2637B", "#975FE5", "#FBD437"],
+				series: [
+					{
+						name: "访问来源",
+						type: "pie",
+						radius: ["50%", "60%"],
+						center: ["50%", "40%"],
+						avoidLabelOverlap: false,
+						hoverAnimation: false,
+						label: {
+							show: false,
+							position: "center"
+						},
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: "30",
+								fontWeight: "bold"
+							}
+						},
+						labelLine: {
+							show: false
+						},
+						data: [
+							{ value: 335, name: "手机" },
+							{ value: 310, name: "相机" },
+							{ value: 234, name: "耳机" },
+							{ value: 135, name: "音箱" },
+							{ value: 500, name: "手表" }
+						],
+						itemStyle: {
+							normal: {
+								borderColor: "#fff",
+								borderWidth: 4
+							}
+						},
+						roundCap: 1
+					}
+				]
+			}
+		};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.category-ratio {
+	&__header {
+		display: flex;
+		align-items: center;
+		height: 50px;
+		font-size: 15px;
+		font-weight: bold;
+		color: $color-main;
+		padding: 0 20px;
+	}
+
+	&__container {
+		height: 415px;
+		padding: 0 20px;
+		box-sizing: border-box;
+
+		.echarts {
+			width: 100%;
+		}
+	}
+}
+</style>
diff --git a/src/pages/home/components/count-effect.vue b/src/pages/home/components/count-effect.vue
new file mode 100644
index 0000000..65f6e27
--- /dev/null
+++ b/src/pages/home/components/count-effect.vue
@@ -0,0 +1,79 @@
+<template>
+	<div class="count-effect">
+		<div class="card">
+			<div class="card__header">
+				<span class="label">总销售额</span>
+				<span class="value">￥15920</span>
+			</div>
+
+			<div class="card__container">
+				<el-progress :percentage="50" :stroke-width="8"></el-progress>
+			</div>
+
+			<div class="card__footer">
+				<ul class="count-effect__cop">
+					<li>
+						<span>周同比</span>
+
+						<div class="fall">
+							<i class="el-icon-bottom-right"></i>
+							<span>-4%</span>
+						</div>
+					</li>
+
+					<li>
+						<span>日同比</span>
+
+						<div class="rise">
+							<i class="el-icon-top-right"></i>
+							<span>+7%</span>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.count-effect {
+	&__cop {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+
+		li {
+			display: flex;
+			list-style: none;
+			flex: 1;
+			color: #d8d8d8;
+
+			.fall,
+			.rise {
+				display: flex;
+				align-items: center;
+				margin-left: 10px;
+			}
+
+			.fall {
+				color: #13ae7c;
+			}
+
+			.rise {
+				color: #f21e37;
+			}
+		}
+	}
+
+	.card__container {
+		padding-top: 15px;
+		padding-right: 10px;
+		box-sizing: border-box;
+	}
+}
+</style>
diff --git a/src/pages/home/components/count-paid.vue b/src/pages/home/components/count-paid.vue
new file mode 100644
index 0000000..bcd92fa
--- /dev/null
+++ b/src/pages/home/components/count-paid.vue
@@ -0,0 +1,103 @@
+<template>
+	<div class="count-paid">
+		<div class="card">
+			<div class="card__header">
+				<span class="label">支付笔数</span>
+				<span class="value">6560</span>
+			</div>
+
+			<div class="card__container">
+				<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+			</div>
+
+			<div class="card__footer">
+				<span class="label">转化率</span>
+				<span class="value">60%</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import VueEcharts from "vue-echarts";
+
+export default {
+	components: {
+		VueEcharts
+	},
+
+	data() {
+		return {
+			chartOptions: {
+				grid: {
+					left: "10%",
+					top: 0,
+					right: "10%",
+					bottom: 0
+				},
+				xAxis: {
+					type: "category",
+					data: ["00:00", "2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00"],
+					boundaryGap: false
+				},
+				yAxis: {
+					type: "value",
+					splitLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false
+					},
+					axisLabel: {
+						show: false
+					}
+				},
+				series: [
+					{
+						barWidth: 18,
+						name: "付款笔数",
+						type: "bar",
+						data: [81, 24, 77, 13, 87, 92, 68, 55],
+						itemStyle: {
+							normal: {
+								color: "#4165d7"
+							}
+						}
+					},
+					{
+						type: "bar",
+						barWidth: 18,
+						xAxisIndex: 0,
+						barGap: "-100%",
+						data: [100, 100, 100, 100, 100, 100, 100, 100],
+						itemStyle: {
+							normal: {
+								color: "#f1f1f9"
+							}
+						},
+						zlevel: -1
+					}
+				]
+			}
+		};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.count-paid {
+	.card {
+		.echarts {
+			height: 50px;
+			width: 100%;
+		}
+
+		&__container {
+			padding: 0;
+		}
+	}
+}
+</style>
diff --git a/src/pages/home/components/count-sales.vue b/src/pages/home/components/count-sales.vue
new file mode 100644
index 0000000..c0649b8
--- /dev/null
+++ b/src/pages/home/components/count-sales.vue
@@ -0,0 +1,74 @@
+<template>
+	<div class="count-sales">
+		<div class="card">
+			<div class="card__header">
+				<span class="label">总销售额</span>
+				<span class="value">￥15920</span>
+			</div>
+
+			<div class="card__container">
+				<ul class="count-sales__cop">
+					<li>
+						<span>周同比</span>
+
+						<div class="fall">
+							<i class="el-icon-bottom-right"></i>
+							<span>-4%</span>
+						</div>
+					</li>
+
+					<li>
+						<span>日同比</span>
+
+						<div class="rise">
+							<i class="el-icon-top-right"></i>
+							<span>+7%</span>
+						</div>
+					</li>
+				</ul>
+			</div>
+
+			<div class="card__footer">
+				<span class="label">日销售额</span>
+				<span class="value">￥1298.01</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.count-sales {
+	&__cop {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 50px;
+
+		li {
+			display: flex;
+			list-style: none;
+			flex: 1;
+			color: #d8d8d8;
+
+			.fall,
+			.rise {
+				display: flex;
+				align-items: center;
+				margin-left: 10px;
+			}
+
+			.fall {
+				color: #13ae7c;
+			}
+
+			.rise {
+				color: #f21e37;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/home/components/count-views.vue b/src/pages/home/components/count-views.vue
new file mode 100644
index 0000000..58af33d
--- /dev/null
+++ b/src/pages/home/components/count-views.vue
@@ -0,0 +1,150 @@
+<template>
+	<div class="count-views">
+		<div class="card">
+			<div class="card__header">
+				<span class="label">总访问量</span>
+				<span class="value">8846</span>
+			</div>
+
+			<div class="card__container">
+				<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+			</div>
+
+			<div class="card__footer">
+				<span class="label">日访问量</span>
+				<span class="value">1351</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import VueEcharts from "vue-echarts";
+import echarts from "echarts";
+
+export default {
+	components: {
+		VueEcharts
+	},
+
+	data() {
+		return {
+			chartOptions: {
+				grid: {
+					left: 0,
+					top: 0,
+					right: 0,
+					bottom: 0
+				},
+				xAxis: {
+					type: "category",
+					data: [
+						"00:00",
+						"2:00",
+						"4:00",
+						"6:00",
+						"8:00",
+						"10:00",
+						"12:00",
+						"14:00",
+						"16:00",
+						"18:00",
+						"20:00",
+						"22:00"
+					],
+					boundaryGap: false
+				},
+				yAxis: {
+					type: "value",
+					splitLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false
+					},
+					axisLabel: {
+						show: false
+					}
+				},
+				series: [
+					{
+						name: "总访问量",
+						type: "line",
+						smooth: true,
+						showSymbol: false,
+						symbol: "circle",
+						symbolSize: 6,
+						data: [
+							"1200",
+							"1400",
+							"1008",
+							"1411",
+							"1026",
+							"1288",
+							"1300",
+							"800",
+							"1100",
+							"1000",
+							"1118",
+							"1322"
+						],
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "#D1E5FF"
+										},
+										{
+											offset: 1,
+											color: "#FFFFFF"
+										}
+									],
+									false
+								)
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: "#4165d7"
+							}
+						},
+						lineStyle: {
+							normal: {
+								width: 2
+							}
+						}
+					}
+				]
+			}
+		};
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.count-views {
+	.card {
+		.echarts {
+			height: 50px;
+			width: 100%;
+		}
+
+		&__container {
+			padding: 0;
+		}
+
+		&__footer {
+			border-top: 0;
+		}
+	}
+}
+</style>
diff --git a/src/pages/home/components/hot-search.vue b/src/pages/home/components/hot-search.vue
new file mode 100644
index 0000000..de7b54b
--- /dev/null
+++ b/src/pages/home/components/hot-search.vue
@@ -0,0 +1,323 @@
+<template>
+	<div class="hot-search">
+		<div class="hot-search__header">
+			<span>线上热门搜索</span>
+		</div>
+
+		<div class="hot-search__container">
+			<el-row class="hot-search__chart" :gutter="100">
+				<el-col :md="12" :xs="24">
+					<div class="block">
+						<div class="count">
+							<div class="number">
+								<span>搜索用户数</span>
+								<span>1242</span>
+							</div>
+							<div class="rise">
+								<i class="el-icon-top-right"></i>
+								<span>+7%</span>
+							</div>
+						</div>
+
+						<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+					</div>
+				</el-col>
+
+				<el-col :md="12" :xs="24">
+					<div class="block">
+						<div class="count">
+							<div class="number">
+								<span>搜索用户数</span>
+								<span>1242</span>
+							</div>
+							<div class="rise">
+								<i class="el-icon-top-right"></i>
+								<span>+7%</span>
+							</div>
+						</div>
+
+						<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+					</div>
+				</el-col>
+			</el-row>
+
+			<div class="hot-search__table">
+				<cl-crud @load="onLoad">
+					<el-row>
+						<cl-table
+							:props="{
+								border: false,
+								'max-height': '300px',
+								'default-sort': {
+									prop: 'ud',
+									order: 'descending'
+								}
+							}"
+							:columns="[
+								{
+									label: '排名',
+									prop: 'index',
+									align: 'center',
+									width: 60
+								},
+								{
+									label: '搜索关键词',
+									prop: 'keyWord',
+									align: 'center',
+									'min-width': 100
+								},
+								{
+									label: '用户数',
+									prop: 'users',
+									align: 'center',
+									'min-width': 100
+								},
+								{
+									label: '周涨幅',
+									prop: 'ud',
+									align: 'center',
+									sortable: 'custom',
+									'min-width': 100
+								}
+							]"
+						></cl-table>
+					</el-row>
+				</cl-crud>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import VueEcharts from "vue-echarts";
+import echarts from "echarts";
+
+export default {
+	components: {
+		VueEcharts
+	},
+
+	data() {
+		return {
+			chartOptions: {
+				grid: {
+					left: 0,
+					top: 0,
+					right: 0,
+					bottom: 0
+				},
+				xAxis: {
+					type: "category",
+					data: [
+						"00:00",
+						"2:00",
+						"4:00",
+						"6:00",
+						"8:00",
+						"10:00",
+						"12:00",
+						"14:00",
+						"16:00",
+						"18:00",
+						"20:00",
+						"22:00"
+					],
+					boundaryGap: false
+				},
+				yAxis: {
+					type: "value",
+					splitLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false
+					},
+					axisLabel: {
+						show: false
+					}
+				},
+				series: [
+					{
+						name: "总访问量",
+						type: "line",
+						smooth: true,
+						showSymbol: false,
+						symbol: "circle",
+						symbolSize: 6,
+						data: [
+							"1200",
+							"1400",
+							"1008",
+							"1411",
+							"1026",
+							"1288",
+							"1300",
+							"800",
+							"1100",
+							"1000",
+							"1118",
+							"1322"
+						],
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[
+										{
+											offset: 0,
+											color: "#D1E5FF"
+										},
+										{
+											offset: 1,
+											color: "#FFFFFF"
+										}
+									],
+									false
+								)
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: "#4165d7"
+							}
+						},
+						lineStyle: {
+							normal: {
+								width: 2
+							}
+						}
+					}
+				]
+			}
+		};
+	},
+
+	methods: {
+		onLoad({ ctx, app }) {
+			ctx.service({
+				page() {
+					return Promise.resolve({
+						list: [
+							{
+								index: 1,
+								keyWord: "无线耳机",
+								users: 983,
+								ud: 5
+							},
+							{
+								index: 1,
+								keyWord: "运动耳机",
+								users: 763,
+								ud: -3
+							},
+							{
+								index: 1,
+								keyWord: "蓝牙音箱",
+								users: 328,
+								ud: 7
+							},
+							{
+								index: 1,
+								keyWord: "4k显示屏",
+								users: 144,
+								ud: 4
+							},
+							{
+								index: 1,
+								keyWord: "罗技 G530",
+								users: 121,
+								ud: -1
+							}
+						]
+					});
+				}
+			}).done();
+			app.refresh();
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.hot-search {
+	&__header {
+		display: flex;
+		align-items: center;
+		height: 50px;
+		font-size: 15px;
+		font-weight: bold;
+		color: $color-main;
+		padding: 0 20px;
+	}
+
+	&__chart {
+		padding: 0 20px;
+
+		.block {
+			margin: 10px 0;
+
+			.count {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-bottom: 10px;
+				height: 40px;
+
+				.fall,
+				.rise {
+					display: flex;
+					align-items: center;
+					margin-left: 10px;
+					font-size: 15px;
+				}
+
+				.fall {
+					color: #13ae7c;
+				}
+
+				.rise {
+					color: #f21e37;
+				}
+
+				.number {
+					display: flex;
+					align-items: center;
+
+					span {
+						font-size: 13px;
+
+						&:last-child {
+							margin-left: 10px;
+							font-size: 15px;
+							font-weight: bold;
+						}
+					}
+				}
+			}
+
+			.echarts {
+				height: 50px;
+				width: 100%;
+			}
+		}
+	}
+
+	&__table {
+		padding: 10px;
+
+		/deep/.el-table {
+			&__header {
+				th {
+					background-color: #fff !important;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/home/components/sales-rank.vue b/src/pages/home/components/sales-rank.vue
new file mode 100644
index 0000000..11eab08
--- /dev/null
+++ b/src/pages/home/components/sales-rank.vue
@@ -0,0 +1,198 @@
+<template>
+	<div class="sales-rank">
+		<div class="sales-rank__header">
+			<span>门店销售额排名</span>
+		</div>
+
+		<div class="sales-rank__container">
+			<div class="sales-rank__filter">
+				<ul>
+					<li
+						v-for="(item, index) in options.date"
+						:key="index"
+						:class="{
+							active: item.value == selects.date
+						}"
+						@click="changeDate(item)"
+					>
+						{{ item.label }}
+					</li>
+				</ul>
+
+				<el-date-picker
+					v-model="selects.date"
+					class="hidden-xs-only"
+					type="datetimerange"
+					size="mini"
+					range-separator="至"
+					start-placeholder="开始日期"
+					end-placeholder="结束日期"
+				>
+				</el-date-picker>
+			</div>
+
+			<ul class="sales-rank__list">
+				<li>
+					<span>1</span>
+					<span>北京市朝阳区三里屯路</span>
+					<span>323201</span>
+				</li>
+				<li>
+					<span>2</span>
+					<span>北京市朝阳区建国路-华贸购物中心</span>
+					<span>278442</span>
+				</li>
+				<li>
+					<span>3</span>
+					<span>北京市朝阳区朝阳北路</span>
+					<span>202368</span>
+				</li>
+				<li>
+					<span>4</span>
+					<span>北京市东城区王府井大街</span>
+					<span>156320</span>
+				</li>
+				<li>
+					<span>5</span>
+					<span>北京市西城区西单北大街-大悦城</span>
+					<span>98852</span>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			selects: {
+				date: "day"
+			},
+			options: {
+				date: [
+					{
+						label: "今日",
+						value: "day"
+					},
+					{
+						label: "本周",
+						value: "week"
+					},
+					{
+						label: "本月",
+						value: "month"
+					},
+					{
+						label: "全年",
+						value: "year"
+					}
+				]
+			}
+		};
+	},
+
+	methods: {
+		changeDate(item) {
+			this.selects.date = item.value;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.sales-rank {
+	&__header {
+		display: flex;
+		align-items: center;
+		height: 50px;
+		font-size: 15px;
+		font-weight: bold;
+		color: $color-main;
+		padding: 0 20px;
+	}
+
+	&__container {
+		padding: 0 20px;
+	}
+
+	&__filter {
+		display: flex;
+		align-items: center;
+		height: 40px;
+
+		ul {
+			display: flex;
+			justify-content: space-between;
+			width: 200px;
+
+			li {
+				list-style: none;
+				font-size: 14px;
+				cursor: pointer;
+				color: #d8d8d8;
+
+				&.active {
+					color: $color-main;
+				}
+
+				&:not(.active):hover {
+					color: #999;
+				}
+			}
+		}
+
+		.el-date-editor {
+			margin-left: 40px;
+		}
+	}
+
+	&__list {
+		height: 260px;
+
+		li {
+			display: flex;
+			align-items: center;
+			height: 52px;
+			list-style: none;
+			font-size: 13px;
+			cursor: pointer;
+
+			span {
+				&:first-child {
+					display: inline-block;
+					height: 14px;
+					width: 14px;
+					border-radius: 14px;
+					text-align: center;
+					line-height: 14px;
+					font-size: 12px;
+				}
+
+				&:nth-child(2) {
+					flex: 1;
+					margin: 0 10px;
+					letter-spacing: 0.5px;
+					color: #222;
+					@include text_ellipsis();
+				}
+			}
+
+			&:nth-last-child(n + 3) {
+				span {
+					&:first-child {
+						background-color: $color-main;
+						color: #fff;
+					}
+				}
+			}
+
+			&:hover {
+				span:nth-child(2) {
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/home/components/tab-chart.vue b/src/pages/home/components/tab-chart.vue
new file mode 100644
index 0000000..5df0e56
--- /dev/null
+++ b/src/pages/home/components/tab-chart.vue
@@ -0,0 +1,171 @@
+<template>
+	<div class="tab-chart">
+		<div class="tab-chart__header">
+			<ul class="tab-chart__tab">
+				<li class="active">销售额</li>
+				<li>访问量</li>
+			</ul>
+
+			<span class="tab-chart__year">2020</span>
+		</div>
+
+		<div class="tab-chart__container">
+			<vue-echarts :options="chartOptions" autoresize></vue-echarts>
+		</div>
+	</div>
+</template>
+
+<script>
+import VueEcharts from "vue-echarts";
+import { isPc } from "cl-admin/utils";
+
+const barWidth = isPc() ? 25 : 15;
+
+export default {
+	components: {
+		VueEcharts
+	},
+	data() {
+		return {
+			chartOptions: {
+				grid: {
+					top: "20px",
+					bottom: "30px",
+					right: "10px",
+					containLabel: true
+				},
+				xAxis: {
+					type: "category",
+					data: [],
+					offset: 5,
+					axisLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					}
+				},
+				yAxis: {
+					type: "value",
+					offset: 20,
+					splitLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false
+					}
+				},
+				tooltip: {
+					trigger: "axis",
+					formatter: (comp, value) => {
+						const [serie] = comp;
+
+						return `${serie.seriesName}：${serie.value}`;
+					},
+					axisPointer: {
+						show: true,
+						status: "shadow",
+						z: -1,
+						shadowStyle: {
+							color: "#E6F7FF"
+						},
+						type: "shadow"
+					},
+					extraCssText: "width:120px; white-space:pre-wrap"
+				},
+				series: [
+					{
+						barWidth,
+						name: "付款笔数",
+						type: "bar",
+						data: [],
+						itemStyle: {
+							normal: {
+								color: "#4165d7"
+							}
+						}
+					},
+					{
+						type: "bar",
+						barWidth,
+						xAxisIndex: 0,
+						barGap: "-100%",
+						data: [],
+						itemStyle: {
+							normal: {
+								color: "#f1f1f9"
+							}
+						},
+						zlevel: -1
+					}
+				]
+			}
+		};
+	},
+	created() {
+		this.chartOptions.xAxis.data = new Array(12).fill(1).map((e, i) => i + 1 + "月");
+		this.chartOptions.series[0].data = new Array(12)
+			.fill(1)
+			.map(() => parseInt(Math.random() * 100));
+		this.chartOptions.series[1].data = new Array(12).fill(100);
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.tab-chart {
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 50px;
+		padding: 0 20px;
+
+		ul {
+			li {
+				list-style: none;
+				float: left;
+				margin-right: 20px;
+				font-size: 15px;
+				color: #dbdbdb;
+				cursor: pointer;
+
+				&.active {
+					color: $color-main;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+
+	&__year {
+		font-size: 14px;
+		position: relative;
+
+		&::before {
+			display: block;
+			content: "";
+			height: 8px;
+			width: 8px;
+			border-radius: 8px;
+			background-color: $color-main;
+			position: absolute;
+			left: -15px;
+			top: 4px;
+		}
+	}
+
+	&__container {
+		height: 300px;
+		padding: 0 15px;
+
+		.echarts {
+			height: 100%;
+			width: 100%;
+		}
+	}
+}
+</style>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
new file mode 100644
index 0000000..37ce7ad
--- /dev/null
+++ b/src/pages/home/index.vue
@@ -0,0 +1,131 @@
+<template>
+	<cl-scrollbar>
+		<div class="home">
+			<el-row :gutter="15">
+				<el-col :lg="6" :md="12" :xs="24">
+					<div class="card">
+						<count-sales></count-sales>
+					</div>
+				</el-col>
+				<el-col :lg="6" :md="12" :xs="24">
+					<div class="card">
+						<count-views></count-views>
+					</div>
+				</el-col>
+				<el-col :lg="6" :md="12" :xs="24">
+					<div class="card">
+						<count-paid></count-paid>
+					</div>
+				</el-col>
+				<el-col :lg="6" :md="12" :xs="24">
+					<div class="card">
+						<count-effect></count-effect>
+					</div>
+				</el-col>
+			</el-row>
+
+			<el-row :gutter="15">
+				<el-col :lg="14" :xs="24">
+					<div class="card">
+						<tab-chart></tab-chart>
+					</div>
+				</el-col>
+				<el-col :lg="10" :xs="24">
+					<div class="card">
+						<sales-rank></sales-rank>
+					</div>
+				</el-col>
+			</el-row>
+
+			<el-row :gutter="15">
+				<el-col :lg="14" :sm="24">
+					<div class="card card--last">
+						<hot-search></hot-search>
+					</div>
+				</el-col>
+				<el-col :lg="10" :sm="24">
+					<div class="card card--last">
+						<category-ratio></category-ratio>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+	</cl-scrollbar>
+</template>
+
+<script>
+import CategoryRatio from "./components/category-ratio";
+import CountSales from "./components/count-sales";
+import CountViews from "./components/count-views";
+import CountPaid from "./components/count-paid";
+import CountEffect from "./components/count-effect";
+import TabChart from "./components/tab-chart";
+import SalesRank from "./components/sales-rank";
+import HotSearch from "./components/hot-search";
+
+export default {
+	components: {
+		CategoryRatio,
+		CountSales,
+		CountViews,
+		CountPaid,
+		CountEffect,
+		TabChart,
+		SalesRank,
+		HotSearch
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+	/deep/.card {
+		background-color: #fff;
+		border-radius: 5px;
+		margin-bottom: 15px;
+		font-size: 12px;
+		letter-spacing: 0.5px;
+
+		&__header {
+			display: flex;
+			align-items: center;
+			height: 50px;
+			padding: 0 20px;
+
+			.label {
+				font-size: 12px;
+			}
+
+			.value {
+				font-size: 18px;
+				font-weight: bold;
+				margin-left: 10px;
+			}
+		}
+
+		&__container {
+			padding: 0 20px;
+			height: 50px;
+		}
+
+		&__footer {
+			display: flex;
+			align-items: center;
+			height: 50px;
+			border-top: 1px solid #f7f7f7;
+			font-size: 12px;
+			margin: 0 5px;
+			padding: 0 15px;
+			box-sizing: border-box;
+
+			.label {
+				margin-right: 10px;
+			}
+
+			.value {
+				font-size: 13px;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/layout/index.vue b/src/pages/layout/index.vue
new file mode 100644
index 0000000..de9d715
--- /dev/null
+++ b/src/pages/layout/index.vue
@@ -0,0 +1,176 @@
+<template>
+	<div class="page-layout" :class="{ collapse: menuCollapse }">
+		<div class="page-layout__mask" @click="COLLAPSE_MENU(true)"></div>
+
+		<div class="page-layout__left">
+			<slider></slider>
+		</div>
+
+		<div class="page-layout__right">
+			<div class="page-layout__topbar">
+				<topbar></topbar>
+			</div>
+
+			<div class="page-layout__process" v-if="conf.showProcess">
+				<cl-process />
+			</div>
+
+			<div class="page-layout__container">
+				<div class="page-layout__view">
+					<keep-alive>
+						<router-view v-if="isKeepAlive"></router-view>
+					</keep-alive>
+
+					<router-view v-if="!isKeepAlive"></router-view>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import Topbar from "./topbar";
+import Slider from "./slider";
+import { isEmpty } from "cl-admin/utils";
+
+export default {
+	components: {
+		Topbar,
+		Slider
+	},
+
+	computed: {
+		...mapGetters(["menuCollapse", "conf", "browser"]),
+
+		isKeepAlive() {
+			return isEmpty(this.$route.meta.keepAlive) ? true : this.$route.meta.keepAlive;
+		}
+	},
+
+	created() {
+		const resize = () => {
+			if (document.body.clientWidth < 1000) {
+				this.COLLAPSE_MENU(true);
+			}
+			this.SET_BROWSER();
+		};
+
+		window.addEventListener("resize", resize);
+		resize();
+	},
+
+	methods: {
+		...mapMutations(["COLLAPSE_MENU", "SET_BROWSER"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.page-layout {
+	display: flex;
+	background-color: #f7f7f7;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+
+	&__left {
+		background-color: $color-main;
+		overflow: hidden;
+		height: 100%;
+		width: 255px;
+		transition: left 0.2s;
+	}
+
+	&__right {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		width: calc(100% - 255px);
+	}
+
+	&__topbar {
+		margin-bottom: 10px;
+	}
+
+	&__process {
+		margin-bottom: 10px;
+		padding: 0 10px;
+	}
+
+	&__container {
+		width: 100%;
+		box-sizing: border-box;
+		flex: 1;
+		overflow: hidden;
+		margin-bottom: 10px;
+	}
+
+	&__mask {
+		position: fixed;
+		left: 0;
+		top: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		height: 100%;
+		width: 100%;
+		z-index: 999;
+	}
+
+	&__view {
+		height: 100%;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0 10px;
+		border-radius: 3px;
+
+		& > div {
+			height: 100%;
+		}
+	}
+
+	@media only screen and (max-width: 768px) {
+		.page-layout__left {
+			position: absolute;
+			left: 0;
+			z-index: 9999;
+			transition: transform 0.3s cubic-bezier(0.7, 0.3, 0.1, 1),
+				box-shadow 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
+		}
+
+		.page-layout__right {
+			width: 100%;
+		}
+
+		&.collapse {
+			.page-layout__left {
+				transform: translateX(-100%);
+			}
+
+			.page-layout__mask {
+				display: none;
+			}
+		}
+	}
+
+	@media only screen and (min-width: 768px) {
+		.page-layout__left,
+		.page-layout__right {
+			transition: width 0.2s;
+		}
+
+		.page-layout__mask {
+			display: none;
+		}
+
+		&.collapse {
+			.page-layout__left {
+				width: 64px;
+			}
+
+			.page-layout__right {
+				width: calc(100% - 64px);
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/layout/slider.vue b/src/pages/layout/slider.vue
new file mode 100644
index 0000000..8f23396
--- /dev/null
+++ b/src/pages/layout/slider.vue
@@ -0,0 +1,57 @@
+<template>
+	<div class="app-slider">
+		<div class="app-slider__logo">
+			<a href="https://cool-admin.com/">
+				<img
+					class="c"
+					src="@/assets/icon/logo/silder.png"
+					v-if="!menuCollapse || browser.isMobile"
+				/>
+				<img class="z" src="@/assets/icon/logo/silder-simple.png" v-else />
+			</a>
+		</div>
+
+		<div class="app-slider__menu">
+			<cl-menu-slider></cl-menu-slider>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+	computed: {
+		...mapGetters(["menuCollapse", "browser"])
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.app-slider {
+	height: 100%;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+	background-color: $color-main;
+
+	&__logo {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 80px;
+
+		.c {
+			height: 30px;
+			width: 193px;
+		}
+
+		.z {
+			height: 30px;
+			width: 30px;
+		}
+	}
+
+	&__menu {
+		height: calc(100% - 80px);
+	}
+}
+</style>
diff --git a/src/pages/layout/topbar.vue b/src/pages/layout/topbar.vue
new file mode 100644
index 0000000..66a6f7b
--- /dev/null
+++ b/src/pages/layout/topbar.vue
@@ -0,0 +1,148 @@
+<template>
+	<div class="app-topbar">
+		<div class="app-topbar__collapse" @click="collapse">
+			<icon-svg name="icon-menu"></icon-svg>
+		</div>
+
+		<!-- 路由导航 -->
+		<div class="app-topbar__route-nav" v-if="conf.showRouteNav">
+			<cl-route-nav />
+		</div>
+
+		<!-- 一级菜单 -->
+		<div class="app-topbar__menu" v-if="conf.showAMenu">
+			<cl-menu-topbar />
+		</div>
+
+		<div class="flex1"></div>
+
+		<!-- 工具栏 -->
+		<ul class="app-topbar__tools">
+			<cl-chat-notice v-if="components.chat" />
+		</ul>
+
+		<!-- 用户信息 -->
+		<div class="app-topbar__user" v-if="userInfo">
+			<el-dropdown trigger="click" @command="onCommand">
+				<span class="el-dropdown-link">
+					<span class="name">{{ userInfo.nickName | default_name }}</span>
+					<img class="avatar" :src="userInfo.headImg | default_avatar" alt />
+				</span>
+
+				<el-dropdown-menu slot="dropdown" class="popper-dropdown-menu-user">
+					<el-dropdown-item command="my">个人中心</el-dropdown-item>
+					<el-dropdown-item command="exit">退出</el-dropdown-item>
+				</el-dropdown-menu>
+			</el-dropdown>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { href } from "cl-admin/utils";
+
+export default {
+	computed: {
+		...mapGetters(["userInfo", "menuCollapse", "conf", "components"])
+	},
+
+	methods: {
+		onCommand(name) {
+			switch (name) {
+				case "my":
+					this.$router.push("/my/info");
+					break;
+				case "exit":
+					this.$store.dispatch("userLogout").done(() => {
+						href("/login");
+					});
+					break;
+			}
+		},
+
+		collapse() {
+			this.$store.commit("COLLAPSE_MENU", !this.menuCollapse);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.popper-dropdown-menu-user {
+	width: 120px;
+}
+
+.app-topbar {
+	display: flex;
+	align-items: center;
+	height: 50px;
+	padding: 0 10px;
+	background-color: #fff;
+
+	&__collapse {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 40px;
+		width: 40px;
+		cursor: pointer;
+
+		.icon-svg {
+			height: 22px;
+			width: 22px;
+		}
+	}
+
+	.flex1 {
+		flex: 1;
+	}
+
+	&__tools {
+		margin-right: 20px;
+
+		/deep/li {
+			list-style: none;
+			height: 45px;
+			width: 45px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			cursor: pointer;
+
+			i {
+				font-size: 16px;
+
+				&:hover {
+					opacity: 0.8;
+				}
+			}
+		}
+	}
+
+	&__user {
+		margin-right: 10px;
+		cursor: pointer;
+
+		.el-dropdown-link {
+			display: flex;
+			align-items: center;
+		}
+
+		.avatar {
+			height: 32px;
+			width: 32px;
+			border-radius: 32px;
+		}
+
+		.name {
+			white-space: nowrap;
+			margin-right: 15px;
+		}
+
+		.el-icon-arrow-down {
+			margin-left: 10px;
+		}
+	}
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..ade11be
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,42 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import { routerMode } from "@/config/env";
+
+Vue.use(VueRouter);
+
+// 忽略规则
+const ignore = {
+	token: ["/login", "/403", "/404", "/500", "/502"]
+};
+
+// 路由列表
+const routes = [
+	{
+		path: "/",
+		name: "index",
+		component: () => import(`@/pages/layout/index.vue`),
+		children: [
+			{
+				path: "/",
+				name: "数据统计",
+				component: () => import("@/pages/home/index.vue")
+			}
+		]
+	}
+];
+
+const Router = new VueRouter({
+	mode: routerMode || "history",
+	base: process.env.BASE_URL,
+	routes,
+	scrollBehavior(to, from, savedPosition) {
+		if (savedPosition) {
+			return savedPosition;
+		} else {
+			return { x: 0, y: 0 };
+		}
+	}
+});
+
+export { ignore, routes };
+export default Router;
diff --git a/src/service/request.js b/src/service/request.js
new file mode 100644
index 0000000..eaf5dc6
--- /dev/null
+++ b/src/service/request.js
@@ -0,0 +1,149 @@
+import axios from "axios";
+import store from "@/store";
+import { isDev } from "@/config/env";
+import { href, storage } from "cl-admin/utils";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+axios.defaults.timeout = 30000;
+axios.defaults.withCredentials = true;
+
+NProgress.configure({
+	showSpinner: false
+});
+
+// 请求队列
+let requests = [];
+
+// Token 是否刷新中
+let isRefreshing = false;
+
+// 忽略规则
+const ignore = {
+	NProgress: ["/sys/info/record"],
+	token: ["/login", "/captcha"]
+};
+
+// Request
+axios.interceptors.request.use(
+	(config) => {
+		const token = store.getters.token || "";
+
+		if (config.url) {
+			if (!ignore.token.some((e) => config.url.includes(e))) {
+				config.headers["Authorization"] = token;
+			}
+
+			if (!ignore.NProgress.some((e) => config.url.includes(e))) {
+				NProgress.start();
+			}
+		}
+
+		// 请求信息
+		if (isDev) {
+			console.group(config.url);
+			console.log("method:", config.method);
+			console.table("data:", config.method == "get" ? config.params : config.data);
+			console.groupEnd();
+		}
+
+		// 验证 token
+		if (token) {
+			if (config.url.includes("refreshToken")) {
+				return config;
+			}
+
+			// 判断 token 是否过期
+			if (storage.isExpired("token")) {
+				// 判断 refreshToken 是否过期
+				if (storage.isExpired("refreshToken")) {
+					store.dispatch("userRemove");
+					return href("/login");
+				}
+
+				// 是否在刷新中
+				if (!isRefreshing) {
+					isRefreshing = true;
+
+					store.dispatch("refreshToken").then((token) => {
+						requests.forEach((cb) => cb(token));
+						requests = [];
+						isRefreshing = false;
+					});
+				}
+
+				return new Promise((resolve) => {
+					// 继续请求
+					requests.push((token) => {
+						// 重新设置 token
+						config.headers["Authorization"] = token;
+						resolve(config);
+					});
+				});
+			}
+		}
+
+		return config;
+	},
+	(error) => {
+		return Promise.reject(error);
+	}
+);
+
+// Response
+axios.interceptors.response.use(
+	(res) => {
+		NProgress.done();
+		const { code, data, message } = res.data;
+
+		if (!res.data) {
+			return res;
+		}
+
+		switch (code) {
+			case 1000:
+				return data;
+			default:
+				return Promise.reject(message);
+		}
+	},
+	async (error) => {
+		NProgress.done();
+
+		if (error.response) {
+			const { status, config } = error.response;
+
+			switch (status) {
+				case 401:
+					await store.dispatch("userRemove");
+					href("/login");
+					break;
+
+				case 403:
+					console.error(`${config.url} 无权限访问！！`);
+					href("/403");
+					break;
+
+				case 404:
+					break;
+
+				case 500:
+					if (!isDev) {
+						href("/500");
+					}
+					break;
+
+				case 502:
+					href("/502");
+					break;
+
+				default:
+					console.error(status, config.url);
+			}
+		}
+
+		return Promise.reject(error.message);
+	}
+);
+
+export default axios;
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..383da6e
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,8 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+	modules: {}
+});
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..c1beab9
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,121 @@
+const path = require("path");
+
+const isProduction = process.env.NODE_ENV === "production";
+
+function resolve(dir) {
+	return path.join(__dirname, dir);
+}
+
+module.exports = {
+	publicPath: "/",
+	lintOnSave: true,
+	productionSourceMap: false,
+	parallel: require("os").cpus().length > 1,
+
+	css: {
+		extract: isProduction,
+		sourceMap: false,
+		loaderOptions: {
+			sass: {
+				prependData: `@import "@/assets/css/common.scss";`
+			}
+		}
+	},
+
+	devServer: {
+		port: 9000,
+		open: false,
+		compress: false,
+		overlay: {
+			warnings: false,
+			errors: true
+		},
+		disableHostCheck: true,
+		proxy: {
+			"/dev": {
+				target: "https://admin.cn.utools.club",
+				changeOrigin: true,
+				pathRewrite: {
+					"^/dev": ""
+				}
+			},
+
+			"/oss-upload": {
+				target: "https://cool-admin-pro.oss-cn-shanghai.aliyuncs.com",
+				changeOrigin: true,
+				pathRewrite: {
+					"^/oss-upload": ""
+				}
+			},
+
+			"/pro": {
+				target: "https://show.cool-admin.com",
+				changeOrigin: true,
+				pathRewrite: {
+					"^/pro": "/api"
+				}
+			}
+		}
+	},
+
+	chainWebpack: (config) => {
+		// svg
+		config.module.rule("svg").uses.clear();
+
+		config.module
+			.rule("svg-sprite-loader")
+			.test(/.svg$/)
+			.exclude.add(/node_modules/)
+			.end()
+			.use("svg-sprite-loader")
+			.loader("svg-sprite-loader")
+			.options({
+				symbolId: "[name]"
+			});
+
+		// 去掉元素之间空格
+		config.module
+			.rule("vue")
+			.use("vue-loader")
+			.loader("vue-loader")
+			.tap((options) => {
+				options.compilerOptions.preserveWhitespace = true;
+				return options;
+			})
+			.end();
+
+		// 移除 prefetch 插件
+		config.plugins.delete("prefetch-index");
+
+		// 移除 preload 插件，避免加载多余的资源
+		config.plugins.delete("preload-index");
+
+		// 设置别名
+		config.resolve.alias.set("cool", resolve("cool"));
+
+		// 生产模式下
+		if (isProduction) {
+			config.performance.set("hints", false);
+
+			config.optimization.splitChunks({
+				chunks: "all",
+				cacheGroups: {
+					// 公用模块抽离
+					common: {
+						chunks: "initial",
+						minSize: 0,
+						minChunks: 2
+					},
+					// 第三方库抽离
+					vendor: {
+						priority: 1,
+						test: /node_modules/,
+						chunks: "initial",
+						minSize: 0,
+						minChunks: 2
+					}
+				}
+			});
+		}
+	}
+};