diff --git a/.vscode/crud.code-snippets b/.vscode/crud.code-snippets
index e085492..360a9f8 100644
--- a/.vscode/crud.code-snippets
+++ b/.vscode/crud.code-snippets
@@ -18,7 +18,7 @@
 			"",
 			"        <el-row>",
 			"            <!-- 数据表格 -->",
-			"            <cl-table :ref=\"setRefs('table')\" v-bind=\"table\"></cl-table>",
+			"            <cl-table :ref=\"setRefs('table')\" v-bind=\"table\" />",
 			"        </el-row>",
 			"",
 			"        <el-row type=\"flex\">",
@@ -28,13 +28,13 @@
 			"        </el-row>",
 			"",
 			"        <!-- 新增、编辑 -->",
-			"        <cl-upsert :ref=\"setRefs('upsert')\" v-bind=\"upsert\"></cl-upsert>",
+			"        <cl-upsert :ref=\"setRefs('upsert')\" v-bind=\"upsert\" />",
 			"    </cl-crud>",
 			"</template>",
 			"",
 			"<script lang=\"ts\">",
 			"import { defineComponent, inject, reactive } from \"vue\";",
-			"import { CrudLoad, Upsert, Table } from \"/@/crud/types\";",
+			"import { CrudLoad, Upsert, Table } from \"/$/crud/types\";",
 			"import { useRefs } from \"/@/core\";",
 			"",
 			"export default defineComponent({",
diff --git a/package.json b/package.json
index 1fb35ec..5001ea1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "front-next",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"scripts": {
 		"dev": "vite",
 		"build": "vue-tsc --noEmit --skipLibCheck && vite build",
@@ -42,6 +42,7 @@
 		"@vitejs/plugin-vue": "^1.1.5",
 		"@vitejs/plugin-vue-jsx": "^1.1.3",
 		"@vue/compiler-sfc": "^3.0.5",
+		"@vue/composition-api": "^1.0.0-rc.6",
 		"eslint": "^7.23.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-prettier": "^3.3.1",
diff --git a/src/config/env.ts b/src/config/env.ts
index 737c78d..a6a8186 100644
--- a/src/config/env.ts
+++ b/src/config/env.ts
@@ -1,6 +1,6 @@
 import store from "store";
 import { getUrlParam } from "/@/core/utils";
-import { MenuItem } from "/@/cool/modules/base/types";
+import { MenuItem } from "/$/base/types";
 
 // 路由模式
 const routerMode = "history";
diff --git a/src/cool/modules/base/components/dept/tree.vue b/src/cool/modules/base/components/dept/tree.vue
index 9caad45..9a6f712 100644
--- a/src/cool/modules/base/components/dept/tree.vue
+++ b/src/cool/modules/base/components/dept/tree.vue
@@ -63,7 +63,7 @@
 <script lang="ts">
 import { defineComponent, inject, onMounted, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { ContextMenu } from "/@/cool/modules/crud";
+import { ContextMenu } from "/$/crud";
 import { useRefs } from "/@/core";
 import { deepTree, isArray, revDeepTree, isPc } from "/@/core/utils";
 
diff --git a/src/cool/modules/base/components/menu/icons.vue b/src/cool/modules/base/components/menu/icons.vue
index 6885e7b..fadaa19 100644
--- a/src/cool/modules/base/components/menu/icons.vue
+++ b/src/cool/modules/base/components/menu/icons.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from "vue";
-import { iconList } from "/@/cool/modules/base";
+import { iconList } from "/$/base";
 
 export default defineComponent({
 	name: "cl-menu-icons",
diff --git a/src/cool/modules/base/components/process/index.vue b/src/cool/modules/base/components/process/index.vue
index 1bcf20e..50ba28c 100644
--- a/src/cool/modules/base/components/process/index.vue
+++ b/src/cool/modules/base/components/process/index.vue
@@ -36,7 +36,7 @@ import { useStore } from "vuex";
 import { useRoute, useRouter } from "vue-router";
 import { last } from "/@/core/utils";
 import { useRefs } from "/@/core";
-import { ContextMenu } from "/@/cool/modules/crud";
+import { ContextMenu } from "/$/crud";
 
 export default {
 	name: "cl-process",
diff --git a/src/cool/modules/base/views/log.vue b/src/cool/modules/base/views/log.vue
index 0464076..6230126 100644
--- a/src/cool/modules/base/views/log.vue
+++ b/src/cool/modules/base/views/log.vue
@@ -42,7 +42,7 @@
 import { defineComponent, inject, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useRefs } from "/@/core";
-import { CrudLoad, Table } from "/@/cool/modules/crud/types";
+import { CrudLoad, Table } from "/$/crud/types";
 
 export default defineComponent({
 	name: "sys-log",
diff --git a/src/cool/modules/base/views/menu.vue b/src/cool/modules/base/views/menu.vue
index e31143c..2d01fa0 100644
--- a/src/cool/modules/base/views/menu.vue
+++ b/src/cool/modules/base/views/menu.vue
@@ -81,7 +81,7 @@ import { useRefs } from "/@/core";
 import { deepTree } from "/@/core/utils";
 import { useRouter } from "vue-router";
 import { defineComponent, inject, reactive } from "vue";
-import { CrudLoad, Table, Upsert, RefreshOp } from "/@/cool/modules/crud/types";
+import { CrudLoad, Table, Upsert, RefreshOp } from "/$/crud/types";
 
 export default defineComponent({
 	name: "sys-menu",
diff --git a/src/cool/modules/base/views/param.vue b/src/cool/modules/base/views/param.vue
index 2c8de8f..d5bcb27 100644
--- a/src/cool/modules/base/views/param.vue
+++ b/src/cool/modules/base/views/param.vue
@@ -37,7 +37,7 @@
 import { ElMessageBox } from "element-plus";
 import { defineComponent, inject, nextTick, reactive } from "vue";
 import { useRefs } from "/@/core";
-import { CrudLoad, Table, Upsert } from "/@/cool/modules/crud/types";
+import { CrudLoad, Table, Upsert } from "/$/crud/types";
 
 export default defineComponent({
 	name: "sys-param",
diff --git a/src/cool/modules/base/views/plugin.vue b/src/cool/modules/base/views/plugin.vue
index e17e8bf..4fa6b2a 100644
--- a/src/cool/modules/base/views/plugin.vue
+++ b/src/cool/modules/base/views/plugin.vue
@@ -49,9 +49,9 @@
 <script lang="ts">
 import { ElMessage } from "element-plus";
 import { defineComponent, inject, reactive } from "vue";
-import { checkPerm } from "/@/cool/modules/base";
+import { checkPerm } from "/$/base";
 import { useRefs } from "/@/core";
-import { CrudLoad, RefreshOp, Table } from "/@/cool/modules/crud/types";
+import { CrudLoad, RefreshOp, Table } from "/$/crud/types";
 
 export default defineComponent({
 	name: "plugin",
diff --git a/src/cool/modules/base/views/role.vue b/src/cool/modules/base/views/role.vue
index 7afc435..4685c61 100644
--- a/src/cool/modules/base/views/role.vue
+++ b/src/cool/modules/base/views/role.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts">
-import { CrudLoad, Table, Upsert } from "/@/cool/modules/crud/types";
+import { CrudLoad, Table, Upsert } from "/$/crud/types";
 import { defineComponent, inject, reactive } from "vue";
 
 export default defineComponent({
diff --git a/src/cool/modules/base/views/user.vue b/src/cool/modules/base/views/user.vue
index 22881d3..a5c50c0 100644
--- a/src/cool/modules/base/views/user.vue
+++ b/src/cool/modules/base/views/user.vue
@@ -112,7 +112,7 @@
 import { computed, defineComponent, inject, reactive, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { useRefs } from "/@/core";
-import { Table, Upsert } from "/@/cool/modules/crud/types";
+import { Table, Upsert } from "/$/crud/types";
 
 export default defineComponent({
 	name: "sys-user",
diff --git a/src/cool/modules/chat/components/session.vue b/src/cool/modules/chat/components/session.vue
index f4262e5..2bc0b59 100644
--- a/src/cool/modules/chat/components/session.vue
+++ b/src/cool/modules/chat/components/session.vue
@@ -57,7 +57,7 @@ import { computed, defineComponent, inject, onUnmounted, reactive, ref } from "v
 import { useStore } from "vuex";
 import { ElMessage } from "element-plus";
 import { isEmpty } from "/@/core/utils";
-import { ContextMenu } from "/@/cool/modules/crud";
+import { ContextMenu } from "/$/crud";
 import { parseContent } from "../utils";
 
 export default defineComponent({
diff --git a/src/cool/modules/crud/common/index.ts b/src/cool/modules/crud/common/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/cool/modules/crud/components/add-btn.tsx b/src/cool/modules/crud/components/add-btn.tsx
index f48e59c..18c4234 100644
--- a/src/cool/modules/crud/components/add-btn.tsx
+++ b/src/cool/modules/crud/components/add-btn.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, inject } from "vue";
-import { Crud } from "/@/cool/modules/crud/types";
+import { Crud } from "../types";
 
 export default defineComponent({
 	name: "cl-add-btn",
diff --git a/src/cool/modules/crud/components/adv-btn.tsx b/src/cool/modules/crud/components/adv-btn.tsx
index 1bd97ba..7e10428 100644
--- a/src/cool/modules/crud/components/adv-btn.tsx
+++ b/src/cool/modules/crud/components/adv-btn.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, inject } from "vue";
-import { Crud } from "/@/cool/modules/crud/types";
+import { Crud } from "../types";
 
 export default defineComponent({
 	name: "cl-adv-btn",
diff --git a/src/cool/modules/crud/components/adv-search.tsx b/src/cool/modules/crud/components/adv-search.tsx
index 40238d4..e785e35 100644
--- a/src/cool/modules/crud/components/adv-search.tsx
+++ b/src/cool/modules/crud/components/adv-search.tsx
@@ -1,10 +1,10 @@
+import { defineComponent, inject, reactive, ref } from "vue";
+import { useAction } from "./form/helper";
 import { useForm, useRefs } from "../hooks/core";
 import { cloneDeep, deepMerge } from "../utils";
 import Parse from "../utils/parse";
 import { renderNode } from "../utils/vnode";
-import { Browser, Crud, Mitt } from "/@/cool/modules/crud/types";
-import { defineComponent, inject, reactive, ref } from "vue";
-import { useAction } from "./form/helper";
+import { Browser, Crud, Mitt } from "../types";
 
 export default defineComponent({
 	name: "cl-adv-search",
diff --git a/src/cool/modules/crud/components/context-menu/context-menu.tsx b/src/cool/modules/crud/components/context-menu/context-menu.tsx
index 3cf381a..8b7b9d8 100644
--- a/src/cool/modules/crud/components/context-menu/context-menu.tsx
+++ b/src/cool/modules/crud/components/context-menu/context-menu.tsx
@@ -1,16 +1,16 @@
-import { nextTick, onMounted, reactive, ref } from "vue";
+import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
 import { useRefs } from "../../hooks/core";
 import { contains } from "../../utils";
-import { ContextMenuItem, ContextMenuOptions } from "/@/cool/modules/crud/types";
+import { ContextMenuItem, ContextMenuOptions } from "../../types";
 
-export default {
+export default defineComponent({
 	name: "cl-context-menu",
 
 	props: {
 		visible: Boolean
 	},
 
-	setup(props: any) {
+	setup(props) {
 		const { refs, setRefs }: any = useRefs();
 
 		// 菜单是否可见
@@ -204,4 +204,4 @@ export default {
 			)
 		);
 	}
-};
+});
diff --git a/src/cool/modules/crud/components/crud/helper.ts b/src/cool/modules/crud/components/crud/helper.ts
index c4b6743..cfac0ab 100644
--- a/src/cool/modules/crud/components/crud/helper.ts
+++ b/src/cool/modules/crud/components/crud/helper.ts
@@ -1,6 +1,6 @@
 import { ElMessageBox, ElMessage } from "element-plus";
 import { isArray, isObject, isString } from "../../utils";
-import { ServiceName } from "/@/cool/modules/crud/types";
+import { ServiceName } from "../../types";
 
 export function useRequest({ mitt, props, crud }: any) {
 	// 刷新随机值，避免脏数据
diff --git a/src/cool/modules/crud/components/crud/index.tsx b/src/cool/modules/crud/components/crud/index.tsx
index ebaa76a..184dbc8 100644
--- a/src/cool/modules/crud/components/crud/index.tsx
+++ b/src/cool/modules/crud/components/crud/index.tsx
@@ -7,10 +7,10 @@ import {
 	reactive,
 	ref
 } from "vue";
-import Mitt from "../../utils/mitt";
 import { useMitt, useRequest } from "./helper";
 import { bootstap } from "./app";
-import { deepMerge } from "/@/core/utils";
+import Mitt from "../../utils/mitt";
+import { deepMerge } from "../../utils";
 
 export default defineComponent({
 	name: "cl-crud",
diff --git a/src/cool/modules/crud/components/dialog/index.tsx b/src/cool/modules/crud/components/dialog/index.tsx
index ffabec8..8422a0a 100644
--- a/src/cool/modules/crud/components/dialog/index.tsx
+++ b/src/cool/modules/crud/components/dialog/index.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, h, inject, onMounted, ref, watch, computed } from "vue";
-import { Browser } from "/@/cool/modules/crud/types";
 import { useDialog } from "./helper";
+import { Browser } from "../../types";
 import { isArray, isBoolean } from "../../utils";
 import { renderNode } from "../../utils/vnode";
 
diff --git a/src/cool/modules/crud/components/multi-delete-btn.tsx b/src/cool/modules/crud/components/multi-delete-btn.tsx
index d2bcc0a..2d1c305 100644
--- a/src/cool/modules/crud/components/multi-delete-btn.tsx
+++ b/src/cool/modules/crud/components/multi-delete-btn.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, inject } from "vue";
-import { Crud } from "/@/cool/modules/crud/types";
+import { Crud } from "../types";
 
 export default defineComponent({
 	name: "cl-multi-delete-btn",
diff --git a/src/cool/modules/crud/components/pagination.tsx b/src/cool/modules/crud/components/pagination.tsx
index 04e2326..ae0a2eb 100644
--- a/src/cool/modules/crud/components/pagination.tsx
+++ b/src/cool/modules/crud/components/pagination.tsx
@@ -1,7 +1,7 @@
-import { h, inject, ref, watch } from "vue";
-import { Crud, Mitt } from "/@/cool/modules/crud/types";
+import { defineComponent, h, inject, ref, watch } from "vue";
+import { Crud, Mitt } from "../types";
 
-export default {
+export default defineComponent({
 	name: "cl-pagination",
 
 	props: {
@@ -13,7 +13,7 @@ export default {
 		}
 	},
 
-	setup(props: any) {
+	setup(props) {
 		const crud = inject("crud") as Crud;
 		const mitt = inject("mitt") as Mitt;
 
@@ -81,4 +81,4 @@ export default {
 			"page-size": ctx.pageSize
 		});
 	}
-};
+});
diff --git a/src/cool/modules/crud/components/query.tsx b/src/cool/modules/crud/components/query.tsx
index f013813..6920fdd 100644
--- a/src/cool/modules/crud/components/query.tsx
+++ b/src/cool/modules/crud/components/query.tsx
@@ -1,8 +1,8 @@
-import { inject, ref, watch } from "vue";
-import { Crud } from "/@/cool/modules/crud/types";
+import { defineComponent, inject, ref, watch } from "vue";
+import { Crud } from "../types";
 import { isArray } from "../utils";
 
-export default {
+export default defineComponent({
 	name: "cl-query",
 
 	props: {
@@ -21,7 +21,7 @@ export default {
 
 	emits: ["update:modelValue", "change"],
 
-	setup(props: any, { emit }: any) {
+	setup(props, { emit }) {
 		const crud = inject("crud") as Crud;
 
 		const list = ref<Array<any>>([]);
@@ -115,4 +115,4 @@ export default {
 			</div>
 		);
 	}
-};
+});
diff --git a/src/cool/modules/crud/components/refresh-btn.tsx b/src/cool/modules/crud/components/refresh-btn.tsx
index 7dab82d..ed8dfb4 100644
--- a/src/cool/modules/crud/components/refresh-btn.tsx
+++ b/src/cool/modules/crud/components/refresh-btn.tsx
@@ -1,10 +1,10 @@
-import { Crud } from "/@/cool/modules/crud/types";
 import { defineComponent, inject } from "vue";
+import { Crud } from "../types";
 
 export default defineComponent({
 	name: "cl-refresh-btn",
 
-	setup(props: any, { slots }: any) {
+	setup(props, { slots }) {
 		const crud = inject("crud") as Crud;
 
 		return () => {
diff --git a/src/cool/modules/crud/components/search-key.tsx b/src/cool/modules/crud/components/search-key.tsx
index c933887..5a02517 100644
--- a/src/cool/modules/crud/components/search-key.tsx
+++ b/src/cool/modules/crud/components/search-key.tsx
@@ -1,5 +1,5 @@
-import { Crud } from "/@/cool/modules/crud/types";
 import { defineComponent, inject, ref } from "vue";
+import { Crud } from "../types";
 
 export default defineComponent({
 	name: "cl-search-key",
diff --git a/src/cool/modules/crud/components/table/index.tsx b/src/cool/modules/crud/components/table/index.tsx
index 207e22f..d6176fa 100644
--- a/src/cool/modules/crud/components/table/index.tsx
+++ b/src/cool/modules/crud/components/table/index.tsx
@@ -1,11 +1,10 @@
 import { defineComponent, h, inject, nextTick, onMounted, ref } from "vue";
-import { Crud, Mitt } from "/@/cool/modules/crud/types";
-import { useRefs } from "../../hooks/core";
-import { cloneDeep, isArray, isEmpty, isFunction, isNull } from "../../utils";
-import { renderNode } from "../../utils/vnode";
 import ContextMenu from "../context-menu/index";
 import { useElTableApi } from "./helper";
-import { Browser } from "/@/cool/modules/crud/types";
+import { cloneDeep, isArray, isEmpty, isFunction, isNull } from "../../utils";
+import { renderNode } from "../../utils/vnode";
+import { useRefs } from "../../hooks/core";
+import { Crud, Mitt, Browser } from "../../types";
 
 export default defineComponent({
 	name: "cl-table",
diff --git a/src/cool/modules/crud/components/upsert/index.tsx b/src/cool/modules/crud/components/upsert/index.tsx
index 9a01fa4..5262f8d 100644
--- a/src/cool/modules/crud/components/upsert/index.tsx
+++ b/src/cool/modules/crud/components/upsert/index.tsx
@@ -1,8 +1,8 @@
 import { ElMessage } from "element-plus";
 import { defineComponent, h, inject, ref } from "vue";
-import { Crud } from "/@/cool/modules/crud/types";
 import { useFormApi } from "./helper";
 import { useForm, useRefs } from "../../hooks/core";
+import { Crud } from "../../types";
 
 export default defineComponent({
 	name: "cl-upsert",
diff --git a/src/cool/modules/crud/index.ts b/src/cool/modules/crud/index.ts
index 7271ade..6489f20 100644
--- a/src/cool/modules/crud/index.ts
+++ b/src/cool/modules/crud/index.ts
@@ -2,8 +2,7 @@ import { reactive } from "vue";
 import * as components from "./components";
 import ContextMenu from "./components/context-menu/index";
 
-import "./common";
-import "./assets/index.scss";
+import "./static/index.scss";
 
 const CRUD = {
 	install(app: any, options: any = {}) {
diff --git a/src/cool/modules/crud/assets/index.scss b/src/cool/modules/crud/static/index.scss
similarity index 100%
rename from src/cool/modules/crud/assets/index.scss
rename to src/cool/modules/crud/static/index.scss
diff --git a/src/cool/modules/demo/components/crud/adv-search.vue b/src/cool/modules/demo/components/crud/adv-search.vue
index 3b44cb2..62bc3f8 100644
--- a/src/cool/modules/demo/components/crud/adv-search.vue
+++ b/src/cool/modules/demo/components/crud/adv-search.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { AdvSearchItem } from "/@/cool/modules/crud/types";
+import { AdvSearchItem } from "/$/crud/types";
 import { defineComponent, ref } from "vue";
 
 export default defineComponent({
diff --git a/src/cool/modules/demo/components/crud/context-menu.vue b/src/cool/modules/demo/components/crud/context-menu.vue
index 3141e6e..c0d3119 100644
--- a/src/cool/modules/demo/components/crud/context-menu.vue
+++ b/src/cool/modules/demo/components/crud/context-menu.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { ContextMenu } from "/@/cool/modules/crud";
+import { ContextMenu } from "/$/crud";
 import { ElMessage } from "element-plus";
 import { defineComponent } from "vue";
 
diff --git a/src/cool/modules/demo/components/crud/form.vue b/src/cool/modules/demo/components/crud/form.vue
index 98e1f92..a15aa86 100644
--- a/src/cool/modules/demo/components/crud/form.vue
+++ b/src/cool/modules/demo/components/crud/form.vue
@@ -52,7 +52,7 @@
 import { defineComponent, ref, resolveComponent, h } from "vue";
 import Test from "./test.vue";
 import { TestService } from "../../utils/service";
-import { CrudLoad, FormItem, FormRef } from "/@/cool/modules/crud/types";
+import { CrudLoad, FormItem, FormRef } from "/$/crud/types";
 
 export default defineComponent({
 	setup() {
diff --git a/src/cool/modules/demo/components/crud/query.vue b/src/cool/modules/demo/components/crud/query.vue
index 70bbf48..83d0048 100644
--- a/src/cool/modules/demo/components/crud/query.vue
+++ b/src/cool/modules/demo/components/crud/query.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { QueryList } from "/@/cool/modules/crud/types";
+import { QueryList } from "/$/crud/types";
 import { defineComponent, ref } from "vue";
 
 export default defineComponent({
diff --git a/src/cool/modules/demo/components/crud/table.vue b/src/cool/modules/demo/components/crud/table.vue
index d24de1d..afbd34a 100644
--- a/src/cool/modules/demo/components/crud/table.vue
+++ b/src/cool/modules/demo/components/crud/table.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { TableColumn } from "/@/cool/modules/crud/types";
+import { TableColumn } from "/$/crud/types";
 import { defineComponent, ref } from "vue";
 
 export default defineComponent({
diff --git a/src/cool/modules/demo/components/crud/upsert.vue b/src/cool/modules/demo/components/crud/upsert.vue
index b9318fd..59f0d4a 100644
--- a/src/cool/modules/demo/components/crud/upsert.vue
+++ b/src/cool/modules/demo/components/crud/upsert.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { UpsertItem, UpsertRef } from "/@/cool/modules/crud/types";
+import { UpsertItem, UpsertRef } from "/$/crud/types";
 import { defineComponent, ref } from "vue";
 
 export default defineComponent({
diff --git a/src/cool/modules/demo/views/crud.vue b/src/cool/modules/demo/views/crud.vue
index 0fe5fac..c3f81d6 100644
--- a/src/cool/modules/demo/views/crud.vue
+++ b/src/cool/modules/demo/views/crud.vue
@@ -36,7 +36,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { CrudLoad } from "/@/cool/modules/crud/types";
+import { CrudLoad } from "/$/crud/types";
 import { TestService } from "../utils/service";
 import Dialog from "../components/crud/dialog.vue";
 import ContextMenu from "../components/crud/context-menu.vue";
diff --git a/src/cool/modules/task/views/task.vue b/src/cool/modules/task/views/task.vue
index c672bf3..06a8c62 100644
--- a/src/cool/modules/task/views/task.vue
+++ b/src/cool/modules/task/views/task.vue
@@ -217,8 +217,8 @@
 import { computed, defineComponent, inject, onMounted, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import Draggable from "vuedraggable";
-import { checkPerm } from "/@/cool/modules/base";
-import { ContextMenu } from "/@/cool/modules/crud";
+import { checkPerm } from "/$/base";
+import { ContextMenu } from "/$/crud";
 import Cron from "../components/cron";
 import { useRefs } from "/@/core";
 
diff --git a/src/cool/modules/upload/components/space/category.vue b/src/cool/modules/upload/components/space/category.vue
index 852a827..cd2a29a 100644
--- a/src/cool/modules/upload/components/space/category.vue
+++ b/src/cool/modules/upload/components/space/category.vue
@@ -37,8 +37,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
 import { computed, defineComponent, inject, ref, watch } from "vue";
 import { useStore } from "vuex";
 import { isEmpty } from "/@/core/utils";
-import { ContextMenu } from "/@/cool/modules/crud";
-import { useRefs } from "/@/cool/modules/crud/hooks/core";
+import { ContextMenu } from "/$/crud";
+import { useRefs } from "/$/crud/hooks/core";
 
 export default defineComponent({
 	name: "cl-upload-space-category",
diff --git a/src/cool/modules/upload/components/space/file-item.vue b/src/cool/modules/upload/components/space/file-item.vue
index ec90c22..0de87de 100644
--- a/src/cool/modules/upload/components/space/file-item.vue
+++ b/src/cool/modules/upload/components/space/file-item.vue
@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject } from "vue";
-import { ContextMenu } from "/@/cool/modules/crud";
+import { ContextMenu } from "/$/crud";
 
 export default defineComponent({
 	name: "cl-upload-space-item",
diff --git a/src/core/set/router.ts b/src/core/set/router.ts
index d106fef..6744fc9 100644
--- a/src/core/set/router.ts
+++ b/src/core/set/router.ts
@@ -27,7 +27,7 @@ export default function () {
 						) {
 							d.meta.iframeUrl = url;
 							d.component = () =>
-								import(`/@/cool/modules/base/pages/iframe/index.vue`);
+								import(`/$/base/pages/iframe/index.vue`);
 						} else {
 							d.component = () => import(/* @vite-ignore */ `/@/${url}`);
 						}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 8b9d8d1..121a462 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,130 +1,67 @@
 <template>
-	<div class="view-home scroller1">
-		<el-row :gutter="15">
-			<el-col :lg="6" :md="12" :xs="24">
-				<div class="card">
-					<count-sales />
-				</div>
-			</el-col>
-			<el-col :lg="6" :md="12" :xs="24">
-				<div class="card">
-					<count-views />
-				</div>
-			</el-col>
-			<el-col :lg="6" :md="12" :xs="24">
-				<div class="card">
-					<count-paid />
-				</div>
-			</el-col>
-			<el-col :lg="6" :md="12" :xs="24">
-				<div class="card">
-					<count-effect />
-				</div>
-			</el-col>
+	<cl-crud :ref="setRefs('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 :gutter="15">
-			<el-col :lg="14" :xs="24">
-				<div class="card">
-					<tab-chart />
-				</div>
-			</el-col>
-			<el-col :lg="10" :xs="24">
-				<div class="card">
-					<sales-rank />
-				</div>
-			</el-col>
+		<el-row>
+			<!-- 数据表格 -->
+			<cl-table :ref="setRefs('table')" v-bind="table" />
 		</el-row>
 
-		<el-row :gutter="15">
-			<el-col :lg="14" :sm="24">
-				<div class="card card--last">
-					<hot-search />
-				</div>
-			</el-col>
-			<el-col :lg="10" :sm="24">
-				<div class="card card--last">
-					<category-ratio />
-				</div>
-			</el-col>
+		<el-row type="flex">
+			<cl-flex1 />
+			<!-- 分页控件 -->
+			<cl-pagination />
 		</el-row>
-	</div>
+
+		<!-- 新增、编辑 -->
+		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
+	</cl-crud>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
-import CategoryRatio from "./components/category-ratio.vue";
-import CountSales from "./components/count-sales.vue";
-import CountViews from "./components/count-views.vue";
-import CountPaid from "./components/count-paid.vue";
-import CountEffect from "./components/count-effect.vue";
-import TabChart from "./components/tab-chart.vue";
-import SalesRank from "./components/sales-rank.vue";
-import HotSearch from "./components/hot-search.vue";
+import { defineComponent, inject, reactive } from "vue";
+import { CrudLoad, Upsert, Table } from "/$/crud/types";
+import { useRefs } from "/@/core";
 
 export default defineComponent({
-	components: {
-		CategoryRatio,
-		CountSales,
-		CountViews,
-		CountPaid,
-		CountEffect,
-		TabChart,
-		SalesRank,
-		HotSearch
+	setup() {
+		const service = inject<any>("service");
+		const { refs, setRefs } = useRefs();
+
+		// 新增、编辑配置
+		const upsert = reactive<Upsert>({
+			items: []
+		});
+
+		// 表格配置
+		const table = reactive<Table>({
+			columns: []
+		});
+
+		// crud 加载
+		function onLoad({ ctx, app }: CrudLoad) {
+			// 绑定 service
+			ctx.service(service.xx).done();
+			app.refresh();
+		}
+
+		return {
+			refs,
+			setRefs,
+			upsert,
+			table,
+			onLoad
+		};
 	}
 });
 </script>
-
-<style lang="scss">
-.view-home {
-	.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/tsconfig.json b/tsconfig.json
index b37f618..1f326aa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,6 +12,7 @@
 		"lib": ["esnext", "dom"],
 		"types": ["vite/client", "vite-svg-loader"],
 		"paths": {
+			"/$/*": ["./src/cool/modules/*"],
 			"/@/*": ["./src/*"],
 			"/#/*": ["./types/*"]
 		}
diff --git a/vite.config.ts b/vite.config.ts
index cde2c01..72c9737 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,7 +17,8 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 		resolve: {
 			alias: {
 				"/@": resolve("src"),
-				"/#": resolve("types")
+				"/#": resolve("types"),
+				"/$": resolve("src/cool/modules")
 			}
 		},
 		css: {
@@ -48,7 +49,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 		},
 		build: {
 			sourcemap: false,
-			polyfillDynamicImport: false
+			polyfillDynamicImport: false // 必须为false
 		},
 		optimizeDeps: {
 			exclude: ["vue-demi"]
diff --git a/yarn.lock b/yarn.lock
index db1981d..6812a79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -491,6 +491,13 @@
     "@vue/compiler-dom" "3.0.9"
     "@vue/shared" "3.0.9"
 
+"@vue/composition-api@^1.0.0-rc.6":
+  version "1.0.0-rc.6"
+  resolved "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.6.tgz#21ce2c169dd4ff17a5bf60c6e98863dff1a36540"
+  integrity sha512-M3jsyDBozQFqAPYdM4GCoVZEljIHsTVdcq5fZx9axpKz9ChIlQngxNf1ziLVaJvWX7T+MO1rVTEx6Xjgg/gUcQ==
+  dependencies:
+    tslib "^2.1.0"
+
 "@vue/reactivity@3.0.11":
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.11.tgz#07b588349fd05626b17f3500cbef7d4bdb4dbd0b"
@@ -3470,7 +3477,7 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
   integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==