From 0b2fa1e92cf35203299571557465948f4c3090f6 Mon Sep 17 00:00:00 2001
From: H0nGzA1 <2505811377@qq.com>
Date: Thu, 30 Mar 2023 21:42:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E4=BC=98=E5=8C=96=E7=B2=BE=E7=AE=80fast-crud=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/areas/api.ts             |  52 +-
 web/src/views/system/areas/crud.tsx           |  14 +-
 web/src/views/system/areas/index.vue          |  14 +-
 web/src/views/system/config/api.ts            |  10 +-
 web/src/views/system/dept/api.ts              |  52 +-
 web/src/views/system/dept/crud.tsx            |  14 +-
 web/src/views/system/dept/index.vue           |  22 +-
 web/src/views/system/dictionary/crud.tsx      |  22 +-
 web/src/views/system/dictionary/index.vue     |  21 +-
 .../views/system/dictionary/subDict/api.ts    |  52 +-
 .../views/system/dictionary/subDict/crud.tsx  |  13 +-
 .../views/system/dictionary/subDict/index.vue |  26 +-
 web/src/views/system/fileList/api.ts          |  52 +-
 web/src/views/system/fileList/crud.tsx        |  15 +-
 web/src/views/system/fileList/index.vue       |  14 +-
 web/src/views/system/log/loginLog/api.ts      |  52 +-
 web/src/views/system/log/loginLog/crud.tsx    |  24 +-
 web/src/views/system/log/loginLog/index.vue   |  14 +-
 web/src/views/system/log/operationLog/api.ts  |  52 +-
 .../views/system/log/operationLog/crud.tsx    |  15 +-
 .../views/system/log/operationLog/index.vue   |  14 +-
 web/src/views/system/menu/api.ts              |   8 +-
 web/src/views/system/menu/crud.tsx            | 459 +-----------
 web/src/views/system/messageCenter/crud.tsx   | 660 +++++++++---------
 .../views/system/role/{curd.tsx => crud.tsx}  |   0
 web/src/views/system/role/index.vue           |   8 +-
 web/src/views/system/whiteList/api.ts         |   4 +-
 web/src/views/system/whiteList/crud.tsx       |  11 +-
 web/src/views/system/whiteList/index.vue      |  14 +-
 29 files changed, 596 insertions(+), 1132 deletions(-)
 rename web/src/views/system/role/{curd.tsx => crud.tsx} (100%)

diff --git a/web/src/views/system/areas/api.ts b/web/src/views/system/areas/api.ts
index be49d95..bad818b 100644
--- a/web/src/views/system/areas/api.ts
+++ b/web/src/views/system/areas/api.ts
@@ -1,41 +1,41 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/area/';
-export function GetList(query: PageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    });
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
 }
 export function GetObj(id: InfoReq) {
-    return request({
-        url: apiPrefix + id,
-        method: 'get',
-    });
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
 }
diff --git a/web/src/views/system/areas/crud.tsx b/web/src/views/system/areas/crud.tsx
index d5a07f3..286eea5 100644
--- a/web/src/views/system/areas/crud.tsx
+++ b/web/src/views/system/areas/crud.tsx
@@ -1,14 +1,10 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
-import { request } from '/@/utils/service';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { dictionary } from '/@/utils/dictionary';
 import { successMessage } from '/@/utils/message';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -27,8 +23,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 	 * @param row
 	 * @returns {Promise<unknown>}
 	 */
-	const loadContentMethod = (tree: any, treeNode: any, resolve: any) => {
-		api.GetList({ pcode: tree.code }).then((res: any) => {
+	const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => {
+		pageRequest({ pcode: tree.code }).then((res: APIResponseData) => {
 			resolve(res.data);
 		});
 	};
diff --git a/web/src/views/system/areas/index.vue b/web/src/views/system/areas/index.vue
index 1fa8634..58c0331 100644
--- a/web/src/views/system/areas/index.vue
+++ b/web/src/views/system/areas/index.vue
@@ -6,18 +6,10 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
 // 页面打开后获取列表数据
 onMounted(() => {
diff --git a/web/src/views/system/config/api.ts b/web/src/views/system/config/api.ts
index b4da050..feb8059 100644
--- a/web/src/views/system/config/api.ts
+++ b/web/src/views/system/config/api.ts
@@ -1,9 +1,9 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 import XEUtils from 'xe-utils';
 
 export const apiPrefix = '/api/system/system_config/';
-export function GetList(query: PageQuery) {
+export function GetList(query: UserPageQuery) {
 	return request({
 		url: apiPrefix,
 		method: 'get',
@@ -52,10 +52,10 @@ export function GetAssociationTable() {
 	});
 }
 
-export function saveContent (data:any) {
+export function saveContent(data: any) {
 	return request({
 		url: apiPrefix + 'save_content/',
 		method: 'put',
-		data: data
-	})
+		data: data,
+	});
 }
diff --git a/web/src/views/system/dept/api.ts b/web/src/views/system/dept/api.ts
index 18bd97e..b60b107 100644
--- a/web/src/views/system/dept/api.ts
+++ b/web/src/views/system/dept/api.ts
@@ -1,41 +1,41 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/dept/';
-export function GetList(query: PageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    });
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
 }
 export function GetObj(id: InfoReq) {
-    return request({
-        url: apiPrefix + id,
-        method: 'get',
-    });
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
 }
diff --git a/web/src/views/system/dept/crud.tsx b/web/src/views/system/dept/crud.tsx
index 1fddba4..089d6fa 100644
--- a/web/src/views/system/dept/crud.tsx
+++ b/web/src/views/system/dept/crud.tsx
@@ -1,16 +1,11 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { verifyPhone } from '/@/utils/toolsValidate';
-import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
 import { successMessage } from '/@/utils/message';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const { getFormRef, getFormData } = crudExpose;
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -84,7 +79,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						type: 'text',
 						click(context) {
 							const rowId = context.row.id;
-							crudExpose.openAdd({ row: { parent: rowId } });
+							crudExpose!.openAdd({ row: { parent: rowId } });
 						},
 					},
 				},
@@ -205,6 +200,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 							{
 								type: 'email',
 								message: '请输入正确的邮箱地址',
+								// @ts-ignore
 								trigger: ['blur', 'change'],
 							},
 						],
diff --git a/web/src/views/system/dept/index.vue b/web/src/views/system/dept/index.vue
index f3165f0..0f80d1b 100644
--- a/web/src/views/system/dept/index.vue
+++ b/web/src/views/system/dept/index.vue
@@ -37,13 +37,12 @@
 </template>
 
 <script lang="ts" setup>
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { ref, onMounted, watch, toRaw } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import * as api from './api';
 import { ElTree } from 'element-plus';
-import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
 import XEUtils from 'xe-utils';
-import { errorMessage, successMessage } from '../../../utils/message';
 
 interface Tree {
 	id: number;
@@ -116,24 +115,11 @@ const getData = () => {
 	});
 };
 
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+
 // 页面打开后获取列表数据
 onMounted(() => {
 	getData();
-});
-
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
-
-// 页面打开后获取列表数据
-onMounted(() => {
 	crudExpose.doRefresh();
 });
 </script>
diff --git a/web/src/views/system/dictionary/crud.tsx b/web/src/views/system/dictionary/crud.tsx
index 796dad5..4ec048b 100644
--- a/web/src/views/system/dictionary/crud.tsx
+++ b/web/src/views/system/dictionary/crud.tsx
@@ -1,15 +1,11 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { dictionary } from '/@/utils/dictionary';
 import { nextTick, ref } from 'vue';
 import { successMessage } from '/@/utils/message';
 
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
-
-export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExpose: CrudExpose; subDictRef: any }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -52,12 +48,12 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
 							content: '字典配置',
 						},
 						//@ts-ignore
-						click: (context: any) => {
-							const { row } = context;
-							subDictRef.value.drawer = true;
+						click: (ctx: any) => {
+							const { row } = ctx;
+							context!.subDictRef.value.drawer = true;
 							nextTick(() => {
-								subDictRef.value.setSearchFormData({ form: { parent: row.id } });
-								subDictRef.value.doRefresh();
+								context!.subDictRef.value.setSearchFormData({ form: { parent: row.id } });
+								context!.subDictRef.value.doRefresh();
 							});
 						},
 					},
@@ -75,7 +71,7 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
-							let pagination = crudExpose.crudBinding.value.pagination;
+							let pagination = crudExpose!.crudBinding.value.pagination;
 							// @ts-ignore
 							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
 						},
diff --git a/web/src/views/system/dictionary/index.vue b/web/src/views/system/dictionary/index.vue
index 715bf35..b62a48c 100644
--- a/web/src/views/system/dictionary/index.vue
+++ b/web/src/views/system/dictionary/index.vue
@@ -6,24 +6,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, watch } from 'vue';
-import type { Ref } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { ref, onMounted, defineAsyncComponent } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-import subDict from './subDict/index.vue';
-
-//字典配置ref
+const subDict = defineAsyncComponent(() => import('./subDict/index.vue'));
 const subDictRef = ref();
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose, subDictRef });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { subDictRef } });
 
 // 页面打开后获取列表数据
 onMounted(() => {
diff --git a/web/src/views/system/dictionary/subDict/api.ts b/web/src/views/system/dictionary/subDict/api.ts
index 83e18a4..d6adcbd 100644
--- a/web/src/views/system/dictionary/subDict/api.ts
+++ b/web/src/views/system/dictionary/subDict/api.ts
@@ -1,41 +1,41 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/dictionary/';
-export function GetList(query: PageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    });
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
 }
 export function GetObj(id: InfoReq) {
-    return request({
-        url: apiPrefix + id,
-        method: 'get',
-    });
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
 }
diff --git a/web/src/views/system/dictionary/subDict/crud.tsx b/web/src/views/system/dictionary/subDict/crud.tsx
index 7626d89..80e1911 100644
--- a/web/src/views/system/dictionary/subDict/crud.tsx
+++ b/web/src/views/system/dictionary/subDict/crud.tsx
@@ -1,14 +1,9 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
-import { request } from '/@/utils/service';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { dictionary } from '/@/utils/dictionary';
-import { watch } from 'vue';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -60,7 +55,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
-							let pagination = crudExpose.crudBinding.value.pagination;
+							let pagination = crudExpose!.crudBinding.value.pagination;
 							// @ts-ignore
 							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
 						},
diff --git a/web/src/views/system/dictionary/subDict/index.vue b/web/src/views/system/dictionary/subDict/index.vue
index 94bbeab..65dd400 100644
--- a/web/src/views/system/dictionary/subDict/index.vue
+++ b/web/src/views/system/dictionary/subDict/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-drawer size="70%"   v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
+	<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
 		<fs-page>
 			<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
 		</fs-page>
@@ -7,27 +7,17 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted, defineProps, computed, watch} from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { ref, onMounted, defineAsyncComponent } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { ElMessageBox } from 'element-plus';
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 
 //抽屉是否显示
 const drawer = ref(false);
 
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
-
 	ElMessageBox.confirm('您确定要关闭?', {
 		confirmButtonText: '确定',
 		cancelButtonText: '取消',
@@ -40,11 +30,13 @@ const handleClose = (done: () => void) => {
 			// catch error
 		});
 };
-const {setSearchFormData,doRefresh} = crudExpose
-defineExpose({ drawer,setSearchFormData,doRefresh });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
+const { setSearchFormData, doRefresh } = crudExpose;
+
+defineExpose({ drawer, setSearchFormData, doRefresh });
 // 页面打开后获取列表数据
 onMounted(() => {
-  // console.log(48,currentRow)
 	crudExpose.doRefresh();
 });
 </script>
diff --git a/web/src/views/system/fileList/api.ts b/web/src/views/system/fileList/api.ts
index 14a9386..06c6499 100644
--- a/web/src/views/system/fileList/api.ts
+++ b/web/src/views/system/fileList/api.ts
@@ -1,41 +1,41 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/file/';
-export function GetList(query: PageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        data: query,
-    });
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		data: query,
+	});
 }
 export function GetObj(id: InfoReq) {
-    return request({
-        url: apiPrefix + id,
-        method: 'get',
-    });
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
 }
diff --git a/web/src/views/system/fileList/crud.tsx b/web/src/views/system/fileList/crud.tsx
index 60ef81b..448d322 100644
--- a/web/src/views/system/fileList/crud.tsx
+++ b/web/src/views/system/fileList/crud.tsx
@@ -1,13 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
-import { request } from '/@/utils/service';
-import { dictionary } from '/@/utils/dictionary';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
+import { UserPageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -65,8 +60,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
-							let pagination = crudExpose.crudBinding.value.pagination;
-							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+							let pagination = crudExpose!.crudBinding.value.pagination;
+							return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
 						},
 					},
 				},
diff --git a/web/src/views/system/fileList/index.vue b/web/src/views/system/fileList/index.vue
index 1fa8634..58c0331 100644
--- a/web/src/views/system/fileList/index.vue
+++ b/web/src/views/system/fileList/index.vue
@@ -6,18 +6,10 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
 // 页面打开后获取列表数据
 onMounted(() => {
diff --git a/web/src/views/system/log/loginLog/api.ts b/web/src/views/system/log/loginLog/api.ts
index fe32b22..71575dd 100644
--- a/web/src/views/system/log/loginLog/api.ts
+++ b/web/src/views/system/log/loginLog/api.ts
@@ -1,41 +1,41 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/login_log/';
-export function GetList(query: PageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        data: query,
-    });
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		data: query,
+	});
 }
 export function GetObj(id: InfoReq) {
-    return request({
-        url: apiPrefix + id,
-        method: 'get',
-    });
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
 }
diff --git a/web/src/views/system/log/loginLog/crud.tsx b/web/src/views/system/log/loginLog/crud.tsx
index 5e11903..4de311a 100644
--- a/web/src/views/system/log/loginLog/crud.tsx
+++ b/web/src/views/system/log/loginLog/crud.tsx
@@ -1,13 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
-import { request } from '/@/utils/service';
-import { dictionary } from '/@/utils/dictionary';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
+import { UserPageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from '@fast-crud/fast-crud';
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -58,6 +53,12 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						align: 'center',
 						width: '70px',
 						columnSetDisabled: true, //禁止在列设置中选择
+						formatter: (context) => {
+							//计算序号,你可以自定义计算规则，此处为翻页累加
+							let index = context.index ?? 1;
+							let pagination = crudExpose!.crudBinding.value.pagination;
+							return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
+						},
 					},
 				},
 				search: {
@@ -237,22 +238,21 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 				login_type: {
 					title: '登录类型',
-					type: 'select',
+					type: 'dict-select',
 					search: {
 						disabled: false,
 					},
-					dict: {
+					dict: dict({
 						data: [
 							{ label: '普通登录', value: 1 },
 							{ label: '微信扫码登录', value: 2 },
 						],
-					},
+					}),
 					form: {
 						component: {
 							placeholder: '请选择登录类型',
 						},
 					},
-					component: { props: { color: 'auto' } }, // 自动染色
 				},
 				os: {
 					title: '操作系统',
diff --git a/web/src/views/system/log/loginLog/index.vue b/web/src/views/system/log/loginLog/index.vue
index 1fa8634..58c0331 100644
--- a/web/src/views/system/log/loginLog/index.vue
+++ b/web/src/views/system/log/loginLog/index.vue
@@ -6,18 +6,10 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
 // 页面打开后获取列表数据
 onMounted(() => {
diff --git a/web/src/views/system/log/operationLog/api.ts b/web/src/views/system/log/operationLog/api.ts
index e61c7c8..fc58c5a 100644
--- a/web/src/views/system/log/operationLog/api.ts
+++ b/web/src/views/system/log/operationLog/api.ts
@@ -1,41 +1,41 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/operation_log/';
-export function GetList(query: PageQuery) {
-    return request({
-        url: apiPrefix,
-        method: 'get',
-        params: query,
-    });
+export function GetList(query: UserPageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
 }
 export function GetObj(id: InfoReq) {
-    return request({
-        url: apiPrefix + id,
-        method: 'get',
-    });
+	return request({
+		url: apiPrefix + id,
+		method: 'get',
+	});
 }
 
 export function AddObj(obj: AddReq) {
-    return request({
-        url: apiPrefix,
-        method: 'post',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix,
+		method: 'post',
+		data: obj,
+	});
 }
 
 export function UpdateObj(obj: EditReq) {
-    return request({
-        url: apiPrefix + obj.id + '/',
-        method: 'put',
-        data: obj,
-    });
+	return request({
+		url: apiPrefix + obj.id + '/',
+		method: 'put',
+		data: obj,
+	});
 }
 
 export function DelObj(id: DelReq) {
-    return request({
-        url: apiPrefix + id + '/',
-        method: 'delete',
-        data: { id },
-    });
+	return request({
+		url: apiPrefix + id + '/',
+		method: 'delete',
+		data: { id },
+	});
 }
diff --git a/web/src/views/system/log/operationLog/crud.tsx b/web/src/views/system/log/operationLog/crud.tsx
index 11daf67..4d1ace9 100644
--- a/web/src/views/system/log/operationLog/crud.tsx
+++ b/web/src/views/system/log/operationLog/crud.tsx
@@ -1,13 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
-import { request } from '/@/utils/service';
-import { dictionary } from '/@/utils/dictionary';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
+import { UserPageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -61,8 +56,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
-							let pagination = crudExpose.crudBinding.value.pagination;
-							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+							let pagination = crudExpose!.crudBinding.value.pagination;
+							return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
 						},
 					},
 				},
diff --git a/web/src/views/system/log/operationLog/index.vue b/web/src/views/system/log/operationLog/index.vue
index 1fa8634..58c0331 100644
--- a/web/src/views/system/log/operationLog/index.vue
+++ b/web/src/views/system/log/operationLog/index.vue
@@ -6,18 +6,10 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
 // 页面打开后获取列表数据
 onMounted(() => {
diff --git a/web/src/views/system/menu/api.ts b/web/src/views/system/menu/api.ts
index 08d08ee..56cee71 100644
--- a/web/src/views/system/menu/api.ts
+++ b/web/src/views/system/menu/api.ts
@@ -1,8 +1,8 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/menu/';
-export function GetList(query: PageQuery) {
+export function GetList(query: UserPageQuery) {
 	return request({
 		url: apiPrefix,
 		method: 'get',
@@ -40,7 +40,7 @@ export function DelObj(obj: DelReq) {
 	});
 }
 
-export function GetAllMenu(query: PageQuery) {
+export function GetAllMenu(query: UserPageQuery) {
 	return request({
 		url: apiPrefix + 'get_all_menu/',
 		method: 'get',
@@ -48,7 +48,7 @@ export function GetAllMenu(query: PageQuery) {
 	});
 }
 
-export function lazyLoadMenu(query: PageQuery) {
+export function lazyLoadMenu(query: UserPageQuery) {
 	return request({
 		url: apiPrefix,
 		method: 'get',
diff --git a/web/src/views/system/menu/crud.tsx b/web/src/views/system/menu/crud.tsx
index 659698d..551353d 100644
--- a/web/src/views/system/menu/crud.tsx
+++ b/web/src/views/system/menu/crud.tsx
@@ -1,37 +1,8 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
-import { dictionary } from '/@/utils/dictionary';
-import { eIconPicker, eIcon } from 'e-icon-picker';
-import { useCompute } from '@fast-crud/fast-crud';
-import { inject, computed } from 'vue';
-import { apiPrefix as menuPrefix } from './api';
-import XEUtils from 'xe-utils';
-import { request } from '/@/utils/service';
-const { compute } = useCompute();
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from '@fast-crud/fast-crud';
 
-export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crudExpose: CrudExpose; menuButtonRef: any }): CreateCrudOptionsTypes {
-	const hasPermissions: any = inject('$hasPermissions');
-	//验证路由地址
-	const validateWebPath = (rule: string, value: string, callback: Function) => {
-		const isLink = JSON.parse(crudExpose.getFormData().is_link);
-		let pattern = /^\/.*?/;
-		if (isLink) {
-			pattern = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/g;
-		} else {
-			pattern = /^\/.*?/;
-		}
-		// console.log('isLink', isLink, 'pattern', pattern, pattern.test(value));
-		if (!pattern.test(value)) {
-			callback(new Error('请正确的地址'));
-		} else {
-			callback();
-		}
-	};
-
-	const pageRequest = async (query: PageQuery) => {
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -41,21 +12,11 @@ export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crud
 	const delRequest = async ({ row }: DelReq) => {
 		return await api.DelObj(row.id);
 	};
+
 	const addRequest = async ({ form }: AddReq) => {
 		return await api.AddObj(form);
 	};
 
-	/**
-	 * 懒加载
-	 * @param row
-	 * @returns {Promise<unknown>}
-	 */
-	const loadContentMethod = (tree: any, treeNode: any, resolve: any) => {
-		api.GetList({ parent: tree.id }).then((res: any) => {
-			resolve(res.data);
-		});
-	};
-
 	return {
 		crudOptions: {
 			request: {
@@ -64,415 +25,7 @@ export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crud
 				editRequest,
 				delRequest,
 			},
-			pagination: {
-				show: false,
-			},
-			table: {
-				rowKey: 'id',
-				lazy: true,
-				load: loadContentMethod,
-				treeProps: { children: 'children', hasChildren: 'hasChild' },
-			},
-			actionbar: {
-				buttons: {
-					add: {
-						show: hasPermissions('menu:Create'),
-					},
-				},
-			},
-			rowHandle: {
-				fixed: 'right',
-				width: 200,
-				buttons: {
-					view: {
-						show: false,
-					},
-					edit: {
-						iconRight: 'Edit',
-						type: 'text',
-					},
-					remove: {
-						iconRight: 'Delete',
-						type: 'text',
-					},
-					custom: {
-						text: '按钮配置',
-						type: 'warning',
-						tooltip: {
-							placement: 'top',
-							content: '按钮配置',
-						},
-						show: compute(({ row }: any) => {
-							if (row.is_catalog) {
-								return false;
-							}
-							return true;
-						}),
-						click: (context: any): void => {
-							const { row } = context;
-							menuButtonRef.value.drawer = true;
-							menuButtonRef.value.selectOptions = row;
-							menuButtonRef.value.initGet();
-						},
-					},
-					addChildren: {
-						text: '添加子级',
-						type: 'text',
-						click(context) {
-							const rowId = context.row.id;
-							crudExpose.openAdd({ row: { parent: rowId } });
-						},
-					},
-				},
-			},
-			columns: {
-				_index: {
-					title: '序号',
-					form: { show: false },
-					column: {
-						type: 'index',
-						align: 'center',
-						width: '80px',
-						columnSetDisabled: true, //禁止在列设置中选择
-						formatter: (context) => {
-							//计算序号,你可以自定义计算规则，此处为翻页累加
-							let index = context.index ?? 1;
-							let pagination: any = crudExpose.crudBinding.value.pagination;
-							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
-						},
-					},
-				},
-				search: {
-					title: '关键词',
-					column: {
-						show: false,
-					},
-					search: {
-						show: true,
-						component: {
-							props: {
-								clearable: true,
-							},
-							placeholder: '请输入关键词',
-						},
-					},
-					form: {
-						show: false,
-						component: {
-							props: {
-								clearable: true,
-							},
-						},
-					},
-				},
-				name: {
-					title: '菜单名称',
-					search: {
-						show: true,
-						component: {
-							props: {
-								clearable: true,
-							},
-						},
-					},
-					type: 'input',
-					form: {
-						rules: [
-							// 表单校验规则
-							{ required: true, message: '菜单名称必填项' },
-						],
-						component: {
-							props: {
-								clearable: true,
-							},
-							placeholder: '请输入菜单名称',
-						},
-					},
-					column: {
-						width: 180,
-					},
-				},
-				icon: {
-					title: '图标',
-					form: {
-						component: {
-							name: eIconPicker,
-							vModel: 'modelValue',
-						},
-					},
-					column: {
-						component: {
-							name: eIcon,
-							vModel: 'modelValue',
-							style: 'font-size:18px',
-						},
-					},
-				},
-				sort: {
-					title: '排序',
-					column: {
-						width: 60,
-					},
-					type: 'number',
-					form: {
-						value: 1,
-						component: {
-							placeholder: '请输入排序',
-						},
-					},
-				},
-				is_catalog: {
-					title: '是否目录',
-					column: {
-						width: 100,
-					},
-					type: 'dict-switch',
-					dict: dict({
-						data: dictionary('button_whether_bool'),
-					}),
-					form: {
-						component: {
-							placeholder: '请选择是否目录',
-						},
-						// valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
-						//     if (!value) {
-						//         form.web_path = undefined
-						//         form.component = undefined
-						//         form.component_name = undefined
-						//         form.cache = false
-						//         form.is_link = false
-						//     }
-						// }
-					},
-				},
-				is_link: {
-					title: '外链接',
-					type: 'dict-switch',
-					dict: dict({
-						data: dictionary('button_whether_bool'),
-					}),
-					form: {
-						value: false,
-						component: {
-							/* show(context) {
-                                const { form } = context
-                                return !form.is_catalog
-                            }, */
-							placeholder: '请选择是否外链接',
-						},
-						/*  valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
-                             form.web_path = undefined
-                             form.component = undefined
-                             form.component_name = undefined
-                             if (value) {
-                                 getColumn('web_path').title = '外链接地址'
-                                 getColumn('web_path').component.placeholder = '请输入外链接地址'
-                                 getColumn('web_path').helper = {
-                                     render(h) {
-                                         return (< el-alert title="外链接地址,请以https|http|ftp|rtsp|mms开头" type="warning" />
-                                         )
-                                     }
-                                 }
-                             } else {
-                                 getColumn('web_path').title = '路由地址'
-                                 getColumn('web_path').component.placeholder = '请输入路由地址'
-                                 getColumn('web_path').helper = {
-                                     render(h) {
-                                         return (< el-alert title="浏览器中url的地址,请以/开头" type="warning" />
-                                         )
-                                     }
-                                 }
-                             }
-                         } */
-					},
-				},
-				web_path: {
-					title: '路由地址',
-					width: 150,
-					column: {
-						show: false,
-					},
-					form: {
-						rules: [
-							{ required: true, message: '请输入正确的路由地址' },
-							{ validator: validateWebPath, trigger: 'change' },
-						],
-						component: {
-							show(context: any) {
-								const { form } = context;
-								return !form.is_catalog;
-							},
-							props: {
-								clearable: true,
-							},
-							placeholder: '请输入路由地址',
-						},
-						helper: {
-							render(h) {
-								return <el-alert title="浏览器中url的地址,请以/开头" type="warning" />;
-							},
-						},
-					},
-				},
-				component: {
-					title: '组件地址',
-					type: 'dict-select',
-					show: false,
-					dict: dict({
-						getData: () => {
-							const files: any = import.meta.globEager('@views/**/*.vue');
-							let result: Array<any> = [];
-							Object.keys(files).forEach((key: string) => {
-								result.push({
-									label: key.replace(/(\.\/|\.vue)/g, ''),
-									value: key.replace(/(\.\/|\.vue)/g, ''),
-								});
-							});
-							return result;
-						},
-					}),
-					column: {
-						show: false,
-					},
-					form: {
-						rules: [{ required: true, message: '请选择组件地址' }],
-						component: {
-							props: {
-								clearable: true,
-								filterable: true, // 可过滤选择项
-							},
-							placeholder: '请输入组件地址',
-						},
-						helper: {
-							render(h) {
-								return <el-alert title="src/views下的文件夹地址" type="warning" />;
-							},
-						},
-					},
-				},
-				component_name: {
-					title: '组件名称',
-					column: {
-						width: 140,
-					},
-					form: {
-						rules: [{ required: true, message: '请输入组件名称' }],
-						component: {
-							show(context: any) {
-								const { form } = context;
-								return !form.is_catalog && !form.is_link;
-							},
-							props: {
-								clearable: true,
-							},
-							placeholder: '请输入组件名称',
-						},
-						helper: {
-							render(h) {
-								return <el-alert title="xx.vue文件中的name" type="warning" />;
-							},
-						},
-					},
-				},
-				menuPermission: {
-					title: '拥有权限',
-					type: 'dict-select',
-					form: {
-						show: false,
-						component: {
-							elProps: {
-								// el-select的配置项，https://element.eleme.cn/#/zh-CN/component/select
-								filterable: true,
-								multiple: true,
-								clearable: true,
-							},
-						},
-					},
-					column: {
-						width: 260,
-					},
-				},
-				cache: {
-					title: '缓存',
-					column: {
-						width: 60,
-					},
-					search: {
-						show: true,
-					},
-					type: 'dict-switch',
-					dict: dict({
-						data: dictionary('button_whether_bool'),
-					}),
-					form: {
-						value: false,
-						component: {
-							// show(context) {
-							//     const { form } = context
-							//     return !form.is_catalog
-							// },
-							placeholder: '请选择是否缓存',
-						},
-						helper: {
-							render(h) {
-								return <el-alert title="是否开启页面缓存,需要组件名称和xx.vue页面的name一致" type="warning" />;
-							},
-						},
-					},
-				},
-				visible: {
-					title: '侧边可见',
-					column: {
-						width: 100,
-					},
-					search: {
-						show: true,
-					},
-					type: 'dict-switch',
-					dict: dict({
-						data: dictionary('button_whether_bool'),
-					}),
-					form: {
-						value: true,
-						component: {
-							placeholder: '请选择侧边可见',
-						},
-						rules: [
-							// 表单校验规则
-							{ required: true, message: '侧边可见必填项' },
-						],
-						helper: {
-							render(h) {
-								return <el-alert title="是否显示在侧边菜单中" type="warning" />;
-							},
-						},
-					},
-				},
-				status: {
-					title: '状态',
-					sortable: true,
-					search: {
-						show: true,
-					},
-					column: {
-						width: 80,
-					},
-					type: 'dict-switch',
-					dict: dict({
-						data: dictionary('button_status_bool'),
-					}),
-					form: {
-						value: true,
-						component: {
-							placeholder: '请选择状态',
-						},
-						rules: [
-							// 表单校验规则
-							{ required: true, message: '状态必填项' },
-						],
-					},
-				},
-			},
+			columns: {},
 		},
 	};
-};
+}
diff --git a/web/src/views/system/messageCenter/crud.tsx b/web/src/views/system/messageCenter/crud.tsx
index 67250c2..0ddd727 100644
--- a/web/src/views/system/messageCenter/crud.tsx
+++ b/web/src/views/system/messageCenter/crud.tsx
@@ -1,331 +1,345 @@
-import * as api from "./api";
-import {dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
-import tableSelector from "/@/components/tableSelector/index.vue"
-import {shallowRef, computed, ref} from "vue";
-import manyToMany from "/@/components/manyToMany/index.vue"
+import * as api from './api';
+import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
+import tableSelector from '/@/components/tableSelector/index.vue';
+import { shallowRef, computed, ref } from 'vue';
+import manyToMany from '/@/components/manyToMany/index.vue';
 
-const {compute} = useCompute()
+const { compute } = useCompute();
 
 interface CreateCrudOptionsTypes {
-    crudOptions: CrudOptions;
+	crudOptions: CrudOptions;
 }
 
+export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudExpose: CrudExpose; tabActivted: any }): CreateCrudOptionsTypes {
+	const pageRequest = async (query: PageQuery) => {
+		if (tabActivted.value === 'receive') {
+			return await api.GetSelfReceive(query);
+		}
+		return await api.GetList(query);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
 
-export const createCrudOptions = function ({
-                                               crudExpose,
-                                               tabActivted
-                                           }: { crudExpose: CrudExpose, tabActivted: any }): CreateCrudOptionsTypes {
-    const pageRequest = async (query: PageQuery) => {
-        if (tabActivted.value === 'receive') {
-            return await api.GetSelfReceive(query);
-        }
-        return await api.GetList(query);
-    };
-    const editRequest = async ({form, row}: EditReq) => {
-        form.id = row.id;
-        return await api.UpdateObj(form);
-    };
-    const delRequest = async ({row}: DelReq) => {
-        return await api.DelObj(row.id);
-    };
-    const addRequest = async ({form}: AddReq) => {
-        return await api.AddObj(form);
-    };
+	const viewRequest = async ({ row }: { row: any }) => {
+		return await api.GetObj(row.id);
+	};
 
-    const viewRequest = async ({row}: { row: any }) => {
-        return await api.GetObj(row.id);
-    }
+	const IsReadFunc = computed(() => {
+		return tabActivted.value === 'receive';
+	});
 
-    const IsReadFunc = computed(() => {
-        return tabActivted.value === 'receive'
-    })
-
-    return {
-        crudOptions: {
-            request: {
-                pageRequest,
-                addRequest,
-                editRequest,
-                delRequest
-            },
-            rowHandle: {
-                buttons: {
-                    edit: {
-                        show: false
-                    },
-                    view: {
-                        click({index,row}) {
-                            crudExpose.openView({index,row})
-                            if(tabActivted.value === 'receive'){
-                                viewRequest({row})
-                                crudExpose.doRefresh()
-                            }
-                        }
-                    }
-                }
-            },
-            columns: {
-                id: {
-                    title: 'id',
-                    form: {
-                        show: false,
-                    }
-                },
-                title: {
-                    title: '标题',
-                    search: {
-                        show: true,
-                    },
-                    type: ["text", "colspan"],
-                    form: {
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '必填项'
-                            }
-                        ],
-                        component: {span: 24, placeholder: '请输入标题'}
-                    }
-                },
-                is_read: {
-                    title: '是否已读',
-                    type: 'dict-select',
-                    column: {
-                        show: IsReadFunc,
-                    },
-                    dict: dict({
-                        data: [
-                            {label: '已读', value: true, color: 'success'},
-                            {label: '未读', value: false, color: 'danger'}
-                        ]
-                    }),
-                    form: {
-                        show: false
-                    }
-                },
-                target_type: {
-                    title: '目标类型',
-                    type: ['dict-radio', 'colspan'],
-                    width: 120,
-                    dict: dict({
-                        data: [{value: 0, label: '按用户'}, {value: 1, label: '按角色'}, {
-                            value: 2,
-                            label: '按部门'
-                        }, {value: 3, label: '通知公告'}]
-                    }),
-                    form: {
-                        component: {
-                            optionName: "el-radio-button"
-                        },
-                        rules: [
-                            {
-                                required: true,
-                                message: '必选项',
-                                trigger: ['blur', 'change']
-                            }
-                        ]
-                    }
-                },
-                target_user: {
-                    title: '目标用户',
-                    search: {
-                        disabled: true
-                    },
-                    width: 130,
-                    form: {
-                        component: {
-                            name: shallowRef(tableSelector),
-                            vModel: "modelValue",
-                            displayLabel: compute(({row}) => {
-                                if (row) {
-                                    return row.user_info;
-                                }
-                                return null
-                            }),
-                            tableConfig: {
-                                url: '/api/system/user/',
-                                label: 'name',
-                                value: 'id',
-                                isMultiple: true,
-                                columns: [{
-                                    prop: 'name',
-                                    label: '用户名称',
-                                    width: 120
-                                }, {
-                                    prop: 'phone',
-                                    label: '用户电话',
-                                    width: 120
-                                }]
-                            }
-                        },
-                        show: compute(({form}) => {
-                            return form.target_type === 0
-                        }),
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '必填项'
-                            }
-                        ]
-                    },
-                    column: {
-                        show: false,
-                        component: {
-                            name: shallowRef(manyToMany),
-                            vModel: "modelValue",
-                            bindValue: compute(({row}) => {
-                                return row.user_info
-                            }),
-                            displayLabel: 'name'
-                        }
-                    }
-                },
-                target_role: {
-                    title: '目标角色',
-                    search: {
-                        disabled: true
-                    },
-                    width: 130,
-                    form: {
-                        component: {
-                            name: shallowRef(tableSelector),
-                            vModel: "modelValue",
-                            displayLabel: compute(({row}) => {
-                                if (row) {
-                                    return row.role_info;
-                                }
-                                return null
-                            }),
-                            tableConfig: {
-                                url: '/api/system/role/',
-                                label: 'name',
-                                value: 'id',
-                                isMultiple: true,
-                                columns: [{
-                                    prop: 'name',
-                                    label: '角色名称'
-                                },
-                                    {
-                                        prop: 'key',
-                                        label: '权限标识'
-                                    }]
-                            }
-                        },
-                        show: compute(({form}) => {
-                            return form.target_type === 1
-                        }),
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '必填项'
-                            }
-                        ]
-                    },
-                    column: {
-                        show: false,
-                        component: {
-                            name: shallowRef(manyToMany),
-                            vModel: "modelValue",
-                            bindValue: compute(({row}) => {
-                                return row.role_info
-                            }),
-                            displayLabel: 'name'
-                        }
-                    }
-                },
-                target_dept: {
-                    title: '目标部门',
-                    search: {
-                        disabled: true
-                    },
-                    width: 130,
-                    type: 'table-selector',
-                    form: {
-                        component: {
-                            name: shallowRef(tableSelector),
-                            vModel: "modelValue",
-                            displayLabel: compute(({form}) => {
-                                return form.target_dept_name;
-                            }),
-                            tableConfig: {
-                                url: '/api/system/dept/all_dept/',
-                                label: 'name',
-                                value: 'id',
-                                isTree: true,
-                                isMultiple: true,
-                                columns: [{
-                                    prop: 'name',
-                                    label: '部门名称'
-                                },
-                                    {
-                                        prop: 'status_label',
-                                        label: '状态'
-                                    },
-                                    {
-                                        prop: 'parent_name',
-                                        label: '父级部门'
-                                    }]
-                            }
-                        },
-                        show: compute(({form}) => {
-                            return form.target_type === 2
-                        }),
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '必填项'
-                            }
-                        ]
-                    },
-                    column: {
-                        show: false,
-                        component: {
-                            name: shallowRef(manyToMany),
-                            vModel: "modelValue",
-                            bindValue: compute(({row}) => {
-                                return row.dept_info
-                            }),
-                            displayLabel: 'name'
-                        }
-                    }
-                },
-                content: {
-                    title: '内容',
-                    column: {
-                        width: 300,
-                        show: false
-                    },
-                    type: ["editor-wang5", "colspan"],
-                    form: {
-                        rules: [ // 表单校验规则
-                            {
-                                required: true,
-                                message: '必填项'
-                            }
-                        ],
-                        component: {
-                            disabled: true,
-                            id: "1", // 当同一个页面有多个editor时，需要配置不同的id
-                            editorConfig: {
-                                // 是否只读
-                                readOnly: compute((context) => {
-                                    const {mode} = context
-                                    if (mode === 'add') {
-                                        return false
-                                    }
-                                    return true;
-                                }),
-                            },
-                            uploader: {
-                                type: "form",
-                                buildUrl(res: any) {
-                                    return res.url;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			rowHandle: {
+				buttons: {
+					edit: {
+						show: false,
+					},
+					view: {
+						click({ index, row }) {
+							crudExpose.openView({ index, row });
+							if (tabActivted.value === 'receive') {
+								viewRequest({ row });
+								crudExpose.doRefresh();
+							}
+						},
+					},
+				},
+			},
+			columns: {
+				id: {
+					title: 'id',
+					form: {
+						show: false,
+					},
+				},
+				title: {
+					title: '标题',
+					search: {
+						show: true,
+					},
+					type: ['text', 'colspan'],
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: { span: 24, placeholder: '请输入标题' },
+					},
+				},
+				is_read: {
+					title: '是否已读',
+					type: 'dict-select',
+					column: {
+						show: IsReadFunc.value,
+					},
+					dict: dict({
+						data: [
+							{ label: '已读', value: true, color: 'success' },
+							{ label: '未读', value: false, color: 'danger' },
+						],
+					}),
+					form: {
+						show: false,
+					},
+				},
+				target_type: {
+					title: '目标类型',
+					type: ['dict-radio', 'colspan'],
+					width: 120,
+					dict: dict({
+						data: [
+							{ value: 0, label: '按用户' },
+							{ value: 1, label: '按角色' },
+							{
+								value: 2,
+								label: '按部门',
+							},
+							{ value: 3, label: '通知公告' },
+						],
+					}),
+					form: {
+						component: {
+							optionName: 'el-radio-button',
+						},
+						rules: [
+							{
+								required: true,
+								message: '必选项',
+								// @ts-ignore
+								trigger: ['blur', 'change'],
+							},
+						],
+					},
+				},
+				target_user: {
+					title: '目标用户',
+					search: {
+						disabled: true,
+					},
+					width: 130,
+					form: {
+						component: {
+							name: shallowRef(tableSelector),
+							vModel: 'modelValue',
+							displayLabel: compute(({ row }) => {
+								if (row) {
+									return row.user_info;
+								}
+								return null;
+							}),
+							tableConfig: {
+								url: '/api/system/user/',
+								label: 'name',
+								value: 'id',
+								isMultiple: true,
+								columns: [
+									{
+										prop: 'name',
+										label: '用户名称',
+										width: 120,
+									},
+									{
+										prop: 'phone',
+										label: '用户电话',
+										width: 120,
+									},
+								],
+							},
+						},
+						show: compute(({ form }) => {
+							return form.target_type === 0;
+						}),
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+					},
+					column: {
+						show: false,
+						component: {
+							name: shallowRef(manyToMany),
+							vModel: 'modelValue',
+							bindValue: compute(({ row }) => {
+								return row.user_info;
+							}),
+							displayLabel: 'name',
+						},
+					},
+				},
+				target_role: {
+					title: '目标角色',
+					search: {
+						disabled: true,
+					},
+					width: 130,
+					form: {
+						component: {
+							name: shallowRef(tableSelector),
+							vModel: 'modelValue',
+							displayLabel: compute(({ row }) => {
+								if (row) {
+									return row.role_info;
+								}
+								return null;
+							}),
+							tableConfig: {
+								url: '/api/system/role/',
+								label: 'name',
+								value: 'id',
+								isMultiple: true,
+								columns: [
+									{
+										prop: 'name',
+										label: '角色名称',
+									},
+									{
+										prop: 'key',
+										label: '权限标识',
+									},
+								],
+							},
+						},
+						show: compute(({ form }) => {
+							return form.target_type === 1;
+						}),
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+					},
+					column: {
+						show: false,
+						component: {
+							name: shallowRef(manyToMany),
+							vModel: 'modelValue',
+							bindValue: compute(({ row }) => {
+								return row.role_info;
+							}),
+							displayLabel: 'name',
+						},
+					},
+				},
+				target_dept: {
+					title: '目标部门',
+					search: {
+						disabled: true,
+					},
+					width: 130,
+					type: 'table-selector',
+					form: {
+						component: {
+							name: shallowRef(tableSelector),
+							vModel: 'modelValue',
+							displayLabel: compute(({ form }) => {
+								return form.target_dept_name;
+							}),
+							tableConfig: {
+								url: '/api/system/dept/all_dept/',
+								label: 'name',
+								value: 'id',
+								isTree: true,
+								isMultiple: true,
+								columns: [
+									{
+										prop: 'name',
+										label: '部门名称',
+									},
+									{
+										prop: 'status_label',
+										label: '状态',
+									},
+									{
+										prop: 'parent_name',
+										label: '父级部门',
+									},
+								],
+							},
+						},
+						show: compute(({ form }) => {
+							return form.target_type === 2;
+						}),
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+					},
+					column: {
+						show: false,
+						component: {
+							name: shallowRef(manyToMany),
+							vModel: 'modelValue',
+							bindValue: compute(({ row }) => {
+								return row.dept_info;
+							}),
+							displayLabel: 'name',
+						},
+					},
+				},
+				content: {
+					title: '内容',
+					column: {
+						width: 300,
+						show: false,
+					},
+					type: ['editor-wang5', 'colspan'],
+					form: {
+						rules: [
+							// 表单校验规则
+							{
+								required: true,
+								message: '必填项',
+							},
+						],
+						component: {
+							disabled: true,
+							id: '1', // 当同一个页面有多个editor时，需要配置不同的id
+							editorConfig: {
+								// 是否只读
+								readOnly: compute((context) => {
+									const { mode } = context;
+									if (mode === 'add') {
+										return false;
+									}
+									return true;
+								}),
+							},
+							uploader: {
+								type: 'form',
+								buildUrl(res: any) {
+									return res.url;
+								},
+							},
+						},
+					},
+				},
+			},
+		},
+	};
+};
diff --git a/web/src/views/system/role/curd.tsx b/web/src/views/system/role/crud.tsx
similarity index 100%
rename from web/src/views/system/role/curd.tsx
rename to web/src/views/system/role/crud.tsx
diff --git a/web/src/views/system/role/index.vue b/web/src/views/system/role/index.vue
index c82a9f6..12c06d7 100644
--- a/web/src/views/system/role/index.vue
+++ b/web/src/views/system/role/index.vue
@@ -11,11 +11,11 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { useExpose, useCrud,dict } from '@fast-crud/fast-crud';
-import { createCrudOptions } from './curd';
+import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
 import RolePermission from '/@/views/system/rolePermission/index.vue';
-import * as api from './api'
-import _ from "lodash-es";
+import * as api from './api';
+import _ from 'lodash-es';
 const rolePermission = ref();
 defineExpose(rolePermission);
 // crud组件的ref
diff --git a/web/src/views/system/whiteList/api.ts b/web/src/views/system/whiteList/api.ts
index f4653df..3be27db 100644
--- a/web/src/views/system/whiteList/api.ts
+++ b/web/src/views/system/whiteList/api.ts
@@ -1,8 +1,8 @@
 import { request } from '/@/utils/service';
-import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/api_white_list/';
-export function GetList(query: PageQuery) {
+export function GetList(query: UserPageQuery) {
 	return request({
 		url: apiPrefix,
 		method: 'get',
diff --git a/web/src/views/system/whiteList/crud.tsx b/web/src/views/system/whiteList/crud.tsx
index a97f060..41b2d3f 100644
--- a/web/src/views/system/whiteList/crud.tsx
+++ b/web/src/views/system/whiteList/crud.tsx
@@ -1,14 +1,11 @@
 import * as api from './api';
-import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
+import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
 import { successMessage } from '/@/utils/message';
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
 
-export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: PageQuery) => {
+export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
@@ -68,7 +65,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 						formatter: (context) => {
 							//计算序号,你可以自定义计算规则，此处为翻页累加
 							let index = context.index ?? 1;
-							let pagination: any = crudExpose.crudBinding.value.pagination;
+							let pagination: any = crudExpose!.crudBinding.value.pagination;
 							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
 						},
 					},
diff --git a/web/src/views/system/whiteList/index.vue b/web/src/views/system/whiteList/index.vue
index 1fa8634..58c0331 100644
--- a/web/src/views/system/whiteList/index.vue
+++ b/web/src/views/system/whiteList/index.vue
@@ -6,18 +6,10 @@
 
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
 
 // 页面打开后获取列表数据
 onMounted(() => {