页面美化：菜单管理树的美化

web/.env.development

@@ -2,7 +2,7 @@
 ENV = 'development'
 
 # 本地环境接口地址
-VITE_API_URL = 'http://192.168.1.160:9000'
+VITE_API_URL = 'https://demo.dvadmin.com/api'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED = true

web/package.json

@@ -26,6 +26,7 @@
 		"echarts-gl": "^2.0.9",
 		"echarts-wordcloud": "^2.1.0",
 		"element-plus": "^2.2.26",
+		"element-tree-line": "^0.2.1",
 		"font-awesome": "^4.7.0",
 		"js-cookie": "^3.0.1",
 		"js-table2excel": "^1.0.3",

web/src/layout/component/main.vue

@@ -1,13 +1,10 @@
 <template>
-	<el-main class="layout-main" :style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
+	<el-main class="layout-main"
-		<el-scrollbar
+		:style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
-			ref="layoutMainScrollbarRef"
+		<el-scrollbar ref="layoutMainScrollbarRef" class="layout-main-scroll layout-backtop-header-fixed"
-			class="layout-main-scroll layout-backtop-header-fixed"
+			wrap-class="layout-main-scroll" view-class="layout-main-scroll">
-			wrap-class="layout-main-scroll"
-			view-class="layout-main-scroll"
-		>
 			<LayoutParentView />
-			<LayoutFooter v-if="isFooter" />
+			<!-- <LayoutFooter v-if="isFooter" /> -->
 		</el-scrollbar>
 		<el-backtop :target="setBacktopClass" />
 	</el-main>

web/src/main.ts

@@ -29,6 +29,8 @@ import '/@/assets/iconfont/iconfont.css'; //引入css
 import { scanAndInstallPlugins } from '/@/views/plugins/index';
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
+
+import 'element-tree-line/dist/style.css'
 let forIconfont = analyzingIconForIconfont(iconfont); //解析class
 iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
 iconList.addIcon(elementPlus); // 添加element plus的图标

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

@@ -92,11 +92,13 @@ onMounted(() => {
 .login-container {
 	height: 100%;
 	background: var(--el-color-white);
+
 	.login-left {
 		flex: 1;
 		position: relative;
 		background-color: rgba(211, 239, 255, 1);
 		margin-right: 100px;
+
 		.login-left-logo {
 			display: flex;
 			align-items: center;
@@ -105,24 +107,29 @@ onMounted(() => {
 			left: 80px;
 			z-index: 1;
 			animation: logoAnimation 0.3s ease;
+
 			img {
 				width: 52px;
 				height: 52px;
 			}
+
 			.login-left-logo-text {
 				display: flex;
 				flex-direction: column;
+
 				span {
 					margin-left: 10px;
-					font-size: 20px;
+					font-size: 16px;
-					color: #26a59a;
+					color: var(--el-color-primary);
 				}
+
 				.login-left-logo-text-msg {
 					font-size: 12px;
-					color: #32a99e;
+					color: var(--el-color-primary);
 				}
 			}
 		}
+
 		.login-left-img {
 			position: absolute;
 			top: 50%;
@@ -130,20 +137,24 @@ onMounted(() => {
 			transform: translate(-50%, -50%);
 			width: 100%;
 			height: 52%;
+
 			img {
 				width: 100%;
 				height: 100%;
 				animation: error-num 0.6s ease;
 			}
 		}
+
 		.login-left-waves {
 			position: absolute;
 			top: 0;
 			right: -100px;
 		}
 	}
+
 	.login-right {
 		width: 700px;
+
 		.login-right-warp {
 			border: 1px solid var(--el-color-primary-light-3);
 			border-radius: 3px;
@@ -152,12 +163,14 @@ onMounted(() => {
 			position: relative;
 			overflow: hidden;
 			background-color: var(--el-color-white);
+
 			.login-right-warp-one,
 			.login-right-warp-two {
 				position: absolute;
 				display: block;
 				width: inherit;
 				height: inherit;
+
 				&::before,
 				&::after {
 					content: '';
@@ -165,6 +178,7 @@ onMounted(() => {
 					z-index: 1;
 				}
 			}
+
 			.login-right-warp-one {
 				&::before {
 					filter: hue-rotate(0deg);
@@ -175,6 +189,7 @@ onMounted(() => {
 					background: linear-gradient(90deg, transparent, var(--el-color-primary));
 					animation: loginLeft 3s linear infinite;
 				}
+
 				&::after {
 					filter: hue-rotate(60deg);
 					top: -100%;
@@ -186,6 +201,7 @@ onMounted(() => {
 					animation-delay: 0.7s;
 				}
 			}
+
 			.login-right-warp-two {
 				&::before {
 					filter: hue-rotate(120deg);
@@ -197,6 +213,7 @@ onMounted(() => {
 					animation: loginRight 3s linear infinite;
 					animation-delay: 1.4s;
 				}
+
 				&::after {
 					filter: hue-rotate(300deg);
 					bottom: -100%;
@@ -208,10 +225,12 @@ onMounted(() => {
 					animation-delay: 2.1s;
 				}
 			}
+
 			.login-right-warp-mian {
 				display: flex;
 				flex-direction: column;
 				height: 100%;
+
 				.login-right-warp-main-title {
 					height: 130px;
 					line-height: 130px;
@@ -222,9 +241,11 @@ onMounted(() => {
 					animation-delay: 0.3s;
 					color: var(--el-text-color-primary);
 				}
+
 				.login-right-warp-main-form {
 					flex: 1;
 					padding: 0 50px 50px;
+
 					.login-content-main-sacn {
 						position: absolute;
 						top: 0;
@@ -235,6 +256,7 @@ onMounted(() => {
 						cursor: pointer;
 						transition: all ease 0.3s;
 						color: var(--el-color-primary);
+
 						&-delta {
 							position: absolute;
 							width: 35px;
@@ -245,11 +267,13 @@ onMounted(() => {
 							background: var(--el-color-white);
 							transform: rotate(-45deg);
 						}
+
 						&:hover {
 							opacity: 1;
 							transition: all ease 0.3s;
 							color: var(--el-color-primary) !important;
 						}
+
 						i {
 							width: 47px;
 							height: 50px;
@@ -267,15 +291,18 @@ onMounted(() => {
 
 	.login-authorization {
 		position: fixed;
-		bottom: 50px;
+		bottom: 30px;
 		left: 0;
 		right: 0;
 		text-align: center;
+
 		p {
 			font-size: 14px;
+			color: rgba(0, 0, 0, 0.5);
 		}
+
 		a {
-			color: #409eff;
+			color: var(--el-color-primary);
 			margin: 0 5px;
 		}
 	}

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

@@ -1,35 +1,48 @@
 <template>
 	<fs-page>
 		<el-row class="s-el-row">
-			<el-col :span="5">
+			<el-col :span="6">
 				<div class="menu-box menu-left-box">
-					<p class="font-mono font-black text-center text-xl pb-5">
+					<el-input v-model="filterText" :placeholder="placeholder" />
+					<div class="menu-left-tree">
+						<div class="mlt-head">
+							<img src="../../../assets/img/menu-tree-head-icon.png" alt="" />
 							菜单列表
-						<el-tooltip effect="dark" :content="content" placement="right">
+							<el-tooltip effect="dark" placement="right"
-							<el-icon>
+								content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;">
+								<el-icon size="16" class="mlt-tooltip">
 									<QuestionFilled />
 								</el-icon>
 							</el-tooltip>
-					</p>
+						</div>
-					<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" :allow-drag="allowDrag" :allow-drop="allowDrop"
-						@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
+							@node-drop="nodeDrop" lazy :indent="45" draggable @node-click="handleNodeClick" default-expand-all>
 							<template #default="{ node, data }">
+								<element-tree-line :node="node" :showLabelLine="false" :indent="32">
 									<span v-if="data.status" class="text-center font-black font-normal">
-								<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
+										<SvgIcon :name="node.data.icon" />
+										&nbsp;{{ node.label }}
 									</span>
 									<span v-else class="text-center font-black text-red-700 font-normal">
 										<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
 									</span>
+								</element-tree-line>
+								<!--  -->
 							</template>
 						</el-tree>
 					</div>
+				</div>
 			</el-col>
-			<el-col :span="9">
+			<el-col :span="8">
 				<div class="menu-box menu-center-box">
+					<div class="mcb-alert">
+						1.红色菜单代表状态禁用;<br />
+						2.添加菜单，如果是目录，组件地址为空即可;<br />
+						3.添加根节点菜单，父级ID为空即可;<br />
+						4.支持拖拽菜单;
+					</div>
 					<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
-						<el-alert :title="content" type="success" effect="dark" :closable="false" center />
 						<el-divider>
 							<strong>菜单配置</strong>
 						</el-divider>
@@ -44,7 +57,7 @@
 						</el-form-item>
 						<el-form-item label="组件地址" prop="component">
 							<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
-								:trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
+								:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
 						</el-form-item>
 						<el-form-item required label="Url" prop="web_path">
 							<el-input v-model="form.web_path" />
@@ -77,10 +90,10 @@
 					<el-divider></el-divider>
 					<div class="menus-btns">
 						<el-button @click="saveMenu()" type="primary" round>保存</el-button>
-						<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
+						<el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
-						<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
+						<el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级
 						</el-button>
-						<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
+						<el-button @click="deleteMenu()" type="primary" round :disabled="!form.id">删除菜单
 						</el-button>
 					</div>
 				</div>
@@ -91,107 +104,15 @@
 				</div>
 			</el-col>
 		</el-row>
-		<!-- <splitpanes>
-			<pane max-size="30" min-size="30">
-				<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" :allow-drag="allowDrag" :allow-drop="allowDrop"
-						@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
-						<template #default="{ node, data }">
-							<span v-if="data.status" class="text-center font-black font-normal">
-								<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
-							</span>
-							<span v-else class="text-center font-black text-red-700 font-normal">
-								<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
-							</span>
-						</template>
-					</el-tree>
-				</el-card>
-			</pane>
-			<pane min-size="30">
-				<el-card :body-style="{ height: '100%' }">
-					<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
-						<el-alert :title="content" type="success" effect="dark" :closable="false" center />
-						<el-divider>
-							<strong>菜单配置</strong>
-						</el-divider>
-						<el-form-item label="菜单ID" prop="id">
-							<el-input v-model="form.id" disabled />
-						</el-form-item>
-						<el-form-item label="父级ID" prop="parent">
-							<el-input v-model="form.parent" />
-						</el-form-item>
-						<el-form-item required label="菜单名称" prop="name">
-							<el-input v-model="form.name" />
-						</el-form-item>
-						<el-form-item label="组件地址" prop="component">
-							<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
-								:trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
-						</el-form-item>
-						<el-form-item required label="Url" prop="web_path">
-							<el-input v-model="form.web_path" />
-						</el-form-item>
-						<el-form-item label="排序" prop="sort">
-							<el-input-number v-model="form.sort" controls-position="right" />
-						</el-form-item>
-						<el-form-item label="状态">
-							<el-radio-group v-model="form.status">
-								<el-radio :label="true">启用</el-radio>
-								<el-radio :label="false">禁用</el-radio>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="侧边可见">
-							<el-radio-group v-model="form.visible">
-								<el-radio :label="true">启用</el-radio>
-								<el-radio :label="false">禁用</el-radio>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="缓存">
-							<el-radio-group v-model="form.cache">
-								<el-radio :label="true">启用</el-radio>
-								<el-radio :label="false">禁用</el-radio>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="图标" prop="icon">
-							<IconSelector clearable v-model="form.icon" />
-						</el-form-item>
-					</el-form>
-					<el-divider></el-divider>
-					<div class="menus-btns">
-						<el-button @click="saveMenu()" type="primary" round>保存</el-button>
-						<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
-						<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
-						</el-button>
-						<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
-						</el-button>
-					</div>
-				</el-card>
-			</pane>
-			<pane min-size="30">
-				<el-card :body-style="{ height: '100%' }">
-					<menuButton :select-menu="form" />
-				</el-card>
-			</pane>
-		</splitpanes> -->
 	</fs-page>
 </template>
 
 <script lang="ts" setup name="menu">
-import { Splitpanes, Pane } from 'splitpanes';
+import { getElementLabelLine } from "element-tree-line";
-import 'splitpanes/dist/splitpanes.css';
 import * as api from './api';
 import * as menuButoonApi from './components/menuButton/api';
 import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
-import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef, onActivated } from 'vue';
+import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, onActivated, h } from 'vue';
 import XEUtils from 'xe-utils';
 import { errorMessage, successMessage } from '../../../utils/message';
 
@@ -217,6 +138,8 @@ interface ComponentFileItem {
 	label: string;
 }
 
+const ElementTreeLine = getElementLabelLine(h);
+
 // 引入组件
 const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
 const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
@@ -302,13 +225,6 @@ let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保
 
 const permissionDrawerVisible = ref(false);
 
-const content = `
-1.红色菜单代表状态禁用;
-2.添加菜单，如果是目录，组件地址为空即可;
-3.添加根节点菜单，父级ID为空即可;
-4.支持拖拽菜单;
-`;
-
 let form: Form<any> = reactive({
 	id: '',
 	parent: '',
@@ -469,12 +385,14 @@ onActivated(() => {
 .s-el-row {
 	height: 100%;
 	overflow: hidden;
+
 	.el-col {
 		height: 100%;
 		padding: 10px 0;
 		box-sizing: border-box;
 	}
 }
+
 .menu-box {
 	height: 100%;
 	padding: 10px;
@@ -485,11 +403,42 @@ onActivated(() => {
 
 .menu-left-box {
 	border-radius: 0 8px 8px 0;
+
+	//margin-right: 10px;
+	.mlt-head {
+		display: flex;
+		align-items: center;
+		margin-left: -8px;
+		color: #606266;
+
+		img {
+			display: block;
+			width: 16px;
+			height: 16px;
+			margin-right: 8px;
+			position: relative;
+			top: -1px;
+		}
+
+		.mlt-tooltip {
+			margin-left: 5px;
+			position: relative;
+			top: -1px;
+		}
+	}
 }
 
 .menu-center-box {
 	border-radius: 8px;
 	margin: 0 10px;
+
+	.mcb-alert {
+		color: #fff;
+		line-height: 24px;
+		padding: 8px 16px;
+		border-radius: 4px;
+		background-color: var(--el-color-primary);
+	}
 }
 
 .menu-right-box {
@@ -505,3 +454,65 @@ onActivated(() => {
 	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
 }
 </style>
+
+<style lang="scss">
+.menu-left-tree {
+	padding: 20px;
+	box-sizing: border-box;
+
+	.el-tree-node__content {
+		height: 32px !important;
+	}
+
+	.el-tree .el-tree-node__expand-icon svg {
+		display: none !important;
+		height: 0;
+		width: 0;
+	}
+
+	.el-tree-node__expand-icon {
+		font-size: 16px;
+	}
+
+	.el-tree-node__content>.el-tree-node__expand-icon {
+		padding: 0;
+		box-sizing: border-box;
+		margin-right: 5px;
+		margin-left: 24px;
+	}
+
+	.el-tree .el-tree-node__expand-icon.expanded {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	.el-tree .el-tree-node__expand-icon.is-leaf {
+		margin-left: 0
+	}
+
+	.el-tree .el-tree-node__expand-icon:before {
+		background: url("../../../assets/img/menu-tree-show-icon.png") no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
+
+	.el-tree .el-tree-node__expand-icon.expanded:before {
+		background: url("../../../assets/img/menu-tree-hidden-icon.png") no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
+
+	.el-tree .is-leaf.el-tree-node__expand-icon::before {
+		display: block;
+		background: none !important;
+		content: '';
+		width: 18px;
+		height: 18px;
+		border: none;
+	}
+}
+</style>