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>
+		<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

@@ -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(() => {
 								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,13 +1,12 @@
 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配置
-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);
 	};
@@ -32,24 +31,35 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 			},
 			rowHandle: {
 				//固定右侧
-                fixed: "right",
+				fixed: 'right',
-                width:310,
+				width: 200,
 				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
 					custom: {
-                        text: "权限配置",
+						text: '权限配置',
-						type:'warning',
+						type: 'text',
 						tooltip: {
-                            placement: "top",
+							placement: 'top',
-                            content: "删除"
+							content: '删除',
 						},
 						click: (context: any): void => {
-                            const {row} = context
+							const { row } = context;
 							// eslint-disable-next-line no-mixed-spaces-and-tabs
-                        	rolePermission.value.drawer=true
+							rolePermission.value.drawer = true;
-                            rolePermission.value.editedRoleInfo = row
+							rolePermission.value.editedRoleInfo = row;
-                            rolePermission.value.initGet()
+							rolePermission.value.initGet();
-                        }
+						},
-                    }
+					},
 				},
 			},
 			form: {
@@ -91,7 +101,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 					search: { show: true },
 					column: {
 						minWidth: 120,
-                        sortable: "custom",
+						sortable: 'custom',
 					},
 					form: {
 						rules: [{ required: true, message: '角色名称必填' }],
@@ -106,7 +116,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 					search: { show: false },
 					column: {
 						width: 120,
-                        sortable: "custom",
+						sortable: 'custom',
 					},
 					form: {
 						rules: [{ required: true, message: '权限标识必填' }],
@@ -119,7 +129,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 					type: 'number',
 					column: {
 						width: 90,
-                        sortable: "custom",
+						sortable: 'custom',
 					},
 					form: {
 						rules: [{ required: true, message: '排序必填' }],
@@ -146,7 +156,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 					}),
 					column: {
 						width: 130,
-                        sortable: "custom",
+						sortable: 'custom',
 					},
 					form: {
 						rules: [{ required: true, message: '是否管理员必填' }],
@@ -173,7 +183,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 					}),
 					column: {
 						width: 90,
-                        sortable: "custom",
+						sortable: 'custom',
 					},
 					form: {
 						rules: [{ required: true, message: '状态必填' }],
@@ -186,7 +196,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 					search: { show: false },
 					column: {
 						width: 170,
-                        sortable: "custom",
+						sortable: 'custom',
 					},
 					form: {
 						show: false,
@@ -200,7 +210,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
 					type: 'text',
 					search: { show: false },
 					column: {
-                        sortable: "custom",
+						sortable: 'custom',
 						width: 170,
 					},
 					form: {

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,6 +28,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',
+					},
+				},
+			},
 			form: {
 				col: { span: 24 },
 				labelWidth: '110px',
@@ -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/.*?/',
 						},
 					},
 				},