feat: ✨ 所有菜单页面样式优化~

web/src/views/system/areas/crud.tsx

@@ -40,6 +40,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			pagination: {
 				show: false,
 			},

web/src/views/system/dept/crud.tsx

@@ -64,11 +64,23 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 			},
 			rowHandle: {
 				fiexd: 'right',
-				width: 310,
+				fixed: 'right',
+				width: 200,
 				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
 					addChildren: {
 						text: '添加子级',
-						type: 'warning',
+						type: 'text',
 						click(context) {
 							const rowId = context.row.id;
 							crudExpose.openAdd({ row: { parent: rowId } });

web/src/views/system/dept/index.vue

@@ -1,13 +1,126 @@
 <template>
 	<fs-page>
-		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+		<el-row class="mx-2">
+			<el-col :span="4" class="p-1">
+				<el-card :body-style="{ height: '100%' }">
+					<p class="font-mono font-black text-center text-xl pb-5">
+						部门列表
+						<el-tooltip effect="dark" :content="content" placement="right">
+							<el-icon> <QuestionFilled /> </el-icon>
+						</el-tooltip>
+					</p>
+					<el-input v-model="filterText" :placeholder="placeholder" />
+					<el-tree
+						ref="treeRef"
+						class="font-mono font-bold leading-6 text-7xl"
+						:data="data"
+						:props="treeProps"
+						:filter-node-method="filterNode"
+						:load="loadNode"
+						lazy
+						icon="ArrowRightBold"
+						:indent="12"
+					>
+						<template #default="{ node, data }">
+							<span class="text-center font-black text-xl">{{ node.label }}</span>
+						</template>
+					</el-tree>
+				</el-card>
+			</el-col>
+			<el-col :span="20" class="p-1">
+				<el-card :body-style="{ height: '100%' }">
+					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+				</el-card>
+			</el-col>
+		</el-row>
 	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
 import { useExpose, useCrud } 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;
+	name: string;
+	status: boolean;
+	children?: Tree[];
+}
+
+interface APIResponseData {
+	code?: number;
+	data: [];
+	msg?: string;
+}
+
+// 引入组件
+const placeholder = ref('请输入部门名称');
+const filterText = ref('');
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+const treeProps = {
+	children: 'children',
+	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: Tree[], node: Node) => {
+		// @ts-ignore
+		if (node.data.hasChild) {
+			return false;
+		} else {
+			return true;
+		}
+	},
+};
+
+watch(filterText, (val) => {
+	treeRef.value!.filter(val);
+});
+
+const filterNode = (value: string, data: Tree) => {
+	if (!value) return true;
+	return toRaw(data).name.indexOf(value) !== -1;
+};
+
+// 懒加载
+const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+	// @ts-ignore
+	if (node.level !== 0) {
+		// @ts-ignore
+		api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+			console.log(res.data);
+		});
+	}
+};
+
+let data = ref([]);
+
+const content = `
+1.部门数据支持懒加载;
+`;
+
+const getData = () => {
+	api.GetList({}).then((ret: APIResponseData) => {
+		const responseData = ret.data;
+		const result = XEUtils.toArrayTree(responseData, {
+			parentKey: 'parent',
+			children: 'children',
+			strict: true,
+		});
+		data.value = result;
+	});
+};
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	getData();
+});
+
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
@@ -24,3 +137,17 @@ onMounted(() => {
 	crudExpose.doRefresh();
 });
 </script>
+
+<style lang="scss" scoped>
+.el-row {
+	height: 100%;
+
+	.el-col {
+		height: 100%;
+	}
+}
+
+.el-card {
+	height: 100%;
+}
+</style>

web/src/views/system/dictionary/crud.tsx

@@ -1,7 +1,7 @@
 import * as api from './api';
 import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
 import { dictionary } from '/@/utils/dictionary';
-import {nextTick, ref} from 'vue';
+import { nextTick, ref } from 'vue';
 
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
@@ -30,25 +30,34 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
 				delRequest,
 			},
 			rowHandle: {
-				width: 360,
+				width: 200,
 				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
 					custom: {
 						text: '字典配置',
-						type: 'success',
+						type: 'text',
 						tooltip: {
 							placement: 'top',
 							content: '字典配置',
 						},
 						//@ts-ignore
 						click: (context: any) => {
-							const {row} = context
+							const { row } = context;
 							subDictRef.value.drawer = true;
-							nextTick(()=>{
+							nextTick(() => {
 								subDictRef.value.setSearchFormData({ form: { parent: row.id } });
 								subDictRef.value.doRefresh();
-							})
+							});
-
-
 						},
 					},
 				},

web/src/views/system/dictionary/subDict/crud.tsx

@@ -2,7 +2,7 @@ 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';
-import {watch} from "vue";
+import { watch } from 'vue';
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -30,6 +30,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			columns: {
 				_index: {
 					title: '序号',

web/src/views/system/fileList/crud.tsx

@@ -35,6 +35,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			columns: {
 				_index: {
 					title: '序号',

web/src/views/system/log/loginLog/crud.tsx

@@ -36,7 +36,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 			},
 			rowHandle: {
+				width: 100,
 				buttons: {
+					view: {
+						type: 'text',
+					},
 					edit: {
 						show: false,
 					},

web/src/views/system/log/operationLog/crud.tsx

@@ -36,7 +36,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 			},
 			rowHandle: {
+				width: 100,
 				buttons: {
+					view: {
+						type: 'text',
+					},
 					edit: {
 						show: false,
 					},

web/src/views/system/role/curd.tsx

@@ -1,227 +1,237 @@
-import {CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose} from '@fast-crud/fast-crud';
+import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose } from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
-import * as api from "./api";
+import * as api from './api';
 interface CreateCrudOptionsTypes {
-    crudOptions: CrudOptions;
+	crudOptions: CrudOptions;
 }
 
 //此处为crudOptions配置
-export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExpose: CrudExpose,rolePermission:any}): CreateCrudOptionsTypes {
+export const createCrudOptions = function ({ crudExpose, rolePermission }: { crudExpose: CrudExpose; rolePermission: any }): CreateCrudOptionsTypes {
+	const pageRequest = async (query: any) => {
+		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 pageRequest = async (query: any) => {
+	return {
-        return await api.GetList(query);
+		crudOptions: {
-    };
+			request: {
-    const editRequest = async ({ form, row }: EditReq) => {
+				pageRequest,
-        form.id = row.id;
+				addRequest,
-        return await api.UpdateObj(form);
+				editRequest,
-    };
+				delRequest,
-    const delRequest = async ({ row }: DelReq) => {
+			},
-        return await api.DelObj(row.id);
+			rowHandle: {
-    };
+				//固定右侧
-    const addRequest = async ({ form }: AddReq) => {
+				fixed: 'right',
-        return await api.AddObj(form);
+				width: 200,
-    };
+				buttons: {
-
+					view: {
-    return {
+						show: false,
-        crudOptions: {
+					},
-            request: {
+					edit: {
-                pageRequest,
+						iconRight: 'Edit',
-                addRequest,
+						type: 'text',
-                editRequest,
+					},
-                delRequest,
+					remove: {
-            },
+						iconRight: 'Delete',
-            rowHandle: {
+						type: 'text',
-                //固定右侧
+					},
-                fixed: "right",
+					custom: {
-                width:310,
+						text: '权限配置',
-                buttons: {
+						type: 'text',
-                    custom: {
+						tooltip: {
-                        text: "权限配置",
+							placement: 'top',
-						type:'warning',
+							content: '删除',
-                        tooltip: {
+						},
-                            placement: "top",
+						click: (context: any): void => {
-                            content: "删除"
+							const { row } = context;
-                        },
+							// eslint-disable-next-line no-mixed-spaces-and-tabs
-                        click: (context:any):void => {
+							rolePermission.value.drawer = true;
-                            const {row} = context
+							rolePermission.value.editedRoleInfo = row;
-                            // eslint-disable-next-line no-mixed-spaces-and-tabs
+							rolePermission.value.initGet();
-                        	rolePermission.value.drawer=true
+						},
-                            rolePermission.value.editedRoleInfo = row
+					},
-                            rolePermission.value.initGet()
+				},
-                        }
+			},
-                    }
+			form: {
-                },
+				col: { span: 24 },
-            },
+				labelWidth: '100px',
-            form: {
+				wrapper: {
-                col: {span: 24},
+					is: 'el-dialog',
-                labelWidth: '100px',
+					width: '600px',
-                wrapper: {
+				},
-                    is: 'el-dialog',
+			},
-                    width: '600px',
+			columns: {
-                },
+				_index: {
-            },
+					title: '序号',
-            columns: {
+					form: { show: false },
-                _index: {
+					column: {
-                    title: '序号',
+						//type: 'index',
-                    form: {show: false},
+						align: 'center',
-                    column: {
+						width: '70px',
-                        //type: 'index',
+						columnSetDisabled: true, //禁止在列设置中选择
-                        align: 'center',
+						formatter: (context) => {
-                        width: '70px',
+							//计算序号,你可以自定义计算规则，此处为翻页累加
-                        columnSetDisabled: true, //禁止在列设置中选择
+							let index = context.index ?? 1;
-                        formatter: (context) => {
+							let pagination = crudExpose.crudBinding.value.pagination;
-                            //计算序号,你可以自定义计算规则，此处为翻页累加
+							// @ts-ignore
-                            let index = context.index ?? 1;
+							return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
-                            let pagination = crudExpose.crudBinding.value.pagination;
+						},
-                            // @ts-ignore
+					},
-                            return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+				},
-                        },
+				id: {
-                    },
+					title: 'ID',
-                },
+					type: 'text',
-                id: {
+					column: { show: false },
-                    title: 'ID',
+					search: { show: false },
-                    type: 'text',
+					form: { show: false },
-                    column: {show: false},
+				},
-                    search: {show: false},
+				name: {
-                    form: {show: false},
+					title: '角色名称',
-                },
+					type: 'text',
-                name: {
+					search: { show: true },
-                    title: '角色名称',
+					column: {
-                    type: 'text',
+						minWidth: 120,
-                    search: {show: true},
+						sortable: 'custom',
-                    column: {
+					},
-                        minWidth: 120,
+					form: {
-                        sortable: "custom",
+						rules: [{ required: true, message: '角色名称必填' }],
-                    },
+						component: {
-                    form: {
+							placeholder: '输入角色名称搜索',
-                        rules: [{required: true, message: '角色名称必填'}],
+						},
-                        component: {
+					},
-                            placeholder: '输入角色名称搜索',
+				},
-                        },
+				key: {
-                    },
+					title: '权限标识',
-                },
+					type: 'text',
-                key: {
+					search: { show: false },
-                    title: '权限标识',
+					column: {
-                    type: 'text',
+						width: 120,
-                    search: {show: false},
+						sortable: 'custom',
-                    column: {
+					},
-                        width: 120,
+					form: {
-                        sortable: "custom",
+						rules: [{ required: true, message: '权限标识必填' }],
-                    },
+						placeholder: '输入权限标识',
-                    form: {
+					},
-                        rules: [{required: true, message: '权限标识必填'}],
+				},
-                        placeholder: '输入权限标识',
+				sort: {
-                    },
+					title: '排序',
-                },
+					search: { show: false },
-                sort: {
+					type: 'number',
-                    title: '排序',
+					column: {
-                    search: {show: false},
+						width: 90,
-                    type: 'number',
+						sortable: 'custom',
-                    column: {
+					},
-                        width: 90,
+					form: {
-                        sortable: "custom",
+						rules: [{ required: true, message: '排序必填' }],
-                    },
+						value: 1,
-                    form: {
+					},
-                        rules: [{required: true, message: '排序必填'}],
+				},
-                        value: 1,
+				admin: {
-                    },
+					title: '是否管理员',
-                },
+					search: { show: false },
-                admin: {
+					type: 'dict-radio',
-                    title: '是否管理员',
+					dict: dict({
-                    search: {show: false},
+						data: [
-                    type: 'dict-radio',
+							{
-                    dict: dict({
+								label: '是',
-                        data: [
+								value: true,
-                            {
+								color: 'success',
-                                label: '是',
+							},
-                                value: true,
+							{
-                                color: 'success',
+								label: '否',
-                            },
+								value: false,
-                            {
+								color: 'danger',
-                                label: '否',
+							},
-                                value: false,
+						],
-                                color: 'danger',
+					}),
-                            },
+					column: {
-                        ],
+						width: 130,
-                    }),
+						sortable: 'custom',
-                    column: {
+					},
-                        width: 130,
+					form: {
-                        sortable: "custom",
+						rules: [{ required: true, message: '是否管理员必填' }],
-                    },
+						value: false,
-                    form: {
+					},
-                        rules: [{required: true, message: '是否管理员必填'}],
+				},
-                        value: false,
+				status: {
-                    },
+					title: '状态',
-                },
+					search: { show: true },
-                status: {
+					type: 'dict-radio',
-                    title: '状态',
+					dict: dict({
-                    search: {show: true},
+						data: [
-                    type: 'dict-radio',
+							{
-                    dict: dict({
+								label: '启用',
-                        data: [
+								value: true,
-                            {
+								color: 'success',
-                                label: '启用',
+							},
-                                value: true,
+							{
-                                color: 'success',
+								label: '禁用',
-                            },
+								value: false,
-                            {
+								color: 'danger',
-                                label: '禁用',
+							},
-                                value: false,
+						],
-                                color: 'danger',
+					}),
-                            },
+					column: {
-                        ],
+						width: 90,
-                    }),
+						sortable: 'custom',
-                    column: {
+					},
-                        width: 90,
+					form: {
-                        sortable: "custom",
+						rules: [{ required: true, message: '状态必填' }],
-                    },
+						value: true,
-                    form: {
+					},
-                        rules: [{required: true, message: '状态必填'}],
+				},
-                        value: true,
+				update_datetime: {
-                    },
+					title: '更新时间',
-                },
+					type: 'text',
-                update_datetime: {
+					search: { show: false },
-                    title: '更新时间',
+					column: {
-                    type: 'text',
+						width: 170,
-                    search: {show: false},
+						sortable: 'custom',
-                    column: {
+					},
-                        width: 170,
+					form: {
-                        sortable: "custom",
+						show: false,
-                    },
+						component: {
-                    form: {
+							placeholder: '输入关键词搜索',
-                        show: false,
+						},
-                        component: {
+					},
-                            placeholder: '输入关键词搜索',
+				},
-                        },
+				create_datetime: {
-                    },
+					title: '创建时间',
-                },
+					type: 'text',
-                create_datetime: {
+					search: { show: false },
-                    title: '创建时间',
+					column: {
-                    type: 'text',
+						sortable: 'custom',
-                    search: {show: false},
+						width: 170,
-                    column: {
+					},
-                        sortable: "custom",
+					form: {
-                        width: 170,
+						show: false,
-                    },
+						component: {
-                    form: {
+							placeholder: '输入关键词搜索',
-                        show: false,
+						},
-                        component: {
+					},
-                            placeholder: '输入关键词搜索',
+				},
-                        },
+				// description: {
-                    },
+				//     title: '备注',
-                },
+				//     type: 'textarea',
-                // description: {
+				//     search: {show: false},
-                //     title: '备注',
+				//     form: {
-                //     type: 'textarea',
+				//         component: {
-                //     search: {show: false},
+				//             maxlength: 200,
-                //     form: {
+				//             placeholder: '输入备注',
-                //         component: {
+				//         },
-                //             maxlength: 200,
+				//     },
-                //             placeholder: '输入备注',
+				// },
-                //         },
+			},
-                //     },
+		},
-                // },
+	};
-            },
-        },
-    };
 };

web/src/views/system/user/crud.tsx

@@ -31,7 +31,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
-				width: 200,
+				width: 140,
 				buttons: {
 					view: {
 						show: false,

web/src/views/system/user/index.vue

@@ -3,14 +3,33 @@
 		<el-row class="mx-2">
 			<el-col :span="4" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
+					<p class="font-mono font-black text-center text-xl pb-5">
+						用户列表
+						<el-tooltip effect="dark" :content="content" placement="right">
+							<el-icon> <QuestionFilled /> </el-icon>
+						</el-tooltip>
+					</p>
 					<el-input v-model="filterText" :placeholder="placeholder" />
-
+					<el-tree
-					<el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" />
+						ref="treeRef"
+						class="font-mono font-bold leading-6 text-7xl"
+						:data="data"
+						:props="treeProps"
+						:filter-node-method="filterNode"
+						:load="loadNode"
+						lazy
+						icon="ArrowRightBold"
+						:indent="12"
+					>
+						<template #default="{ node, data }">
+							<span class="text-center font-black text-xl">{{ node.label }}</span>
+						</template>
+					</el-tree>
 				</el-card>
 			</el-col>
-			<el-col :span="20" :offset="0" class="p-1">
+			<el-col :span="20" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
-					<fs-crud class="h-full w-full" ref="crudRef" v-bind="crudBinding"> </fs-crud>
+					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
 				</el-card>
 			</el-col>
 		</el-row>
@@ -18,38 +37,44 @@
 </template>
 
 <script lang="ts" setup>
-import * as api from './api';
-import { ElTree } from 'element-plus';
-import { ref, onMounted, computed, watch } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
-import MenuButton from './components/menuButton/index.vue';
+import * as api from './api';
+import { ElTree } from 'element-plus';
+import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
 import XEUtils from 'xe-utils';
-const menuButtonRef = ref();
+import { errorMessage, successMessage } from '../../../utils/message';
-defineExpose(menuButtonRef);
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose, menuButtonRef });
-// 初始化crud配置
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 
 interface Tree {
 	id: number;
-	label: string;
+	name: string;
+	status: boolean;
 	children?: Tree[];
 }
-const placeholder = ref('请输入用户');
+
+interface APIResponseData {
+	code?: number;
+	data: [];
+	msg?: string;
+}
+
+// 引入组件
+const placeholder = ref('请输入用户名称');
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
 
-const defaultProps = {
+const treeProps = {
 	children: 'children',
 	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: Tree[], node: Node) => {
+		// @ts-ignore
+		if (node.data.hasChild) {
+			return false;
+		} else {
+			return true;
+		}
+	},
 };
 
 watch(filterText, (val) => {
@@ -58,22 +83,32 @@ watch(filterText, (val) => {
 
 const filterNode = (value: string, data: Tree) => {
 	if (!value) return true;
-	return data.label.includes(value);
+	return toRaw(data).name.indexOf(value) !== -1;
+};
+
+// 懒加载
+const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+	// @ts-ignore
+	if (node.level !== 0) {
+		// @ts-ignore
+		api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+			console.log(res.data);
+		});
+	}
 };
 
 let data = ref([]);
 
-interface APIResponseData {
+const content = `
-	code?: number;
+1.用户数据支持懒加载;
-	data: [];
+`;
-	msg?: string;
-}
 
 const getData = () => {
 	api.GetList({}).then((ret: APIResponseData) => {
 		const responseData = ret.data;
 		const result = XEUtils.toArrayTree(responseData, {
-			parentKey: 'parent_id',
+			parentKey: 'parent',
 			children: 'children',
 			strict: true,
 		});
@@ -83,9 +118,24 @@ const getData = () => {
 
 // 页面打开后获取列表数据
 onMounted(() => {
-	crudExpose.doRefresh();
 	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>
 
 <style lang="scss" scoped>

web/src/views/system/whiteList/crud.tsx

@@ -28,13 +28,31 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				editRequest,
 				delRequest,
 			},
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
 			form: {
-				col: {span: 24},
+				col: { span: 24 },
-                labelWidth: '110px',
+				labelWidth: '110px',
-                wrapper: {
+				wrapper: {
-                    is: 'el-dialog',
+					is: 'el-dialog',
-                    width: '600px',
+					width: '600px',
-                },
+				},
 			},
 			columns: {
 				_index: {
@@ -78,7 +96,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 				method: {
 					title: '请求方式',
-					sortable: "custom",
+					sortable: 'custom',
 					search: {
 						disabled: false,
 					},
@@ -104,7 +122,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 							{
 								label: 'PATCH',
 								value: 4,
-							}
+							},
 						],
 					}),
 					form: {
@@ -125,7 +143,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 				},
 				url: {
 					title: '接口地址',
-					sortable: "custom",
+					sortable: 'custom',
 					search: {
 						disabled: true,
 					},
@@ -167,11 +185,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
 							class: { yxtInput: true },
 						},
 						helper: {
-							position: "label",
+							position: 'label',
 							tooltip: {
-								placement: "top-start"
+								placement: 'top-start',
 							},
-							text: "请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/"
+							text: '请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/',
 						},
 					},
 				},