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

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 ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" />
+					<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" :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();
-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 });
+import { errorMessage, successMessage } from '../../../utils/message';
 
 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 {
-	code?: number;
-	data: [];
-	msg?: string;
-}
+const content = `
+1.用户数据支持懒加载;
+`;
 
 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>