From 840323ff072b31f9f5188de6aa3ca1b00ad9aa13 Mon Sep 17 00:00:00 2001
From: sheng <15292050171@163.com>
Date: Wed, 26 Jul 2023 13:35:47 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BE=8E=E5=8C=96=EF=BC=9A?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E7=AE=A1=E7=90=86=E6=A0=91=E7=9A=84=E7=BE=8E?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/.env.development                         |   2 +-
 web/package.json                             |   1 +
 web/src/assets/img/menu-tree-head-icon.png   | Bin 0 -> 698 bytes
 web/src/assets/img/menu-tree-hidden-icon.png | Bin 0 -> 663 bytes
 web/src/assets/img/menu-tree-show-icon.png   | Bin 0 -> 737 bytes
 web/src/layout/component/main.vue            |  13 +-
 web/src/main.ts                              |   2 +
 web/src/views/system/login/index.vue         |  39 ++-
 web/src/views/system/menu/index.vue          | 267 ++++++++++---------
 9 files changed, 181 insertions(+), 143 deletions(-)
 create mode 100644 web/src/assets/img/menu-tree-head-icon.png
 create mode 100644 web/src/assets/img/menu-tree-hidden-icon.png
 create mode 100644 web/src/assets/img/menu-tree-show-icon.png

diff --git a/web/.env.development b/web/.env.development
index 203010c..60c9086 100644
--- a/web/.env.development
+++ b/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
diff --git a/web/package.json b/web/package.json
index 43fdacf..3d5af3a 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/src/assets/img/menu-tree-head-icon.png b/web/src/assets/img/menu-tree-head-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc4eab3d000b7911c3cca8b13c82a2060e6fcfc1
GIT binary patch
literal 698
zcmV;r0!96aP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px%bV)=(RCr$PT2XR>Fc96O7txbcPtw4&)?2jR!fFR|6X{9HMVfR_X(b^ffSbW#
z{oeRCFS`qQ4+azev5D^=hybd9i8DYg5K;g_tY^U06KK5v#%3XF>M<+_P+v0J%aFA(
z@w^ov($yOPyoV(2jnO&>{g6nxEnKm&@mdKG>FWVN3-89d1ZbVh!+zPc<ffai09x?M
z5GMiRdA$Iojtz-APtU<aL(AyIY=_u*RjzIVtkP#vW*<qH!!Be0`uVzz8cxMJeb31`
zTd0~>9=reojPh4}-qyQq#9T-ytEsAnLT0=9^%|?)hT^fG12DF@U|4v50+N^G)gOS&
zcHV*6N<#hrYyxococX(305>5bz-j?p!l?pWEle%oe4OBxB+USt0p@!EZpG0Mq#@{d
zk)x*oJp~*L2xBP0fXm70R+z57TQ5Vncs+*TjjqF&%^RwceYLj5kbc+iP(1%_uvrl4
zDu$FeLj(~tJTC!fCSyxtaq(IuF{hf-RT8Sl7ohmkC9E{6M~HY{0xE2gz6b#R2wKhh
z%i_9x|KEh{Cnnw?l_z8~V~-&M#(qNB`B4RgFkJKMLKc`Yj2FGVL1a8{1>DxIViFYF
zkT-be-e8}iG}d(T22t?5ufnmty4ZLD1l+kd$WP9;(~I;IfGbjxEKagG$>PTM0k|#K
zLlVPHh-LuI0Ga_b1L_}1;m#Zyf@F@8IokZ0Up#ks+TLL4E3m`=#U9%m^yB$&gX9g8
zH`x58_b`DfzBkBuB0smeD{ZeTe0GTkdV^XQz*rv58|;7=M8L2^ANOh^VBF_}pB+^I
gKF8xmn0y8N0(;MCZjX0LD*ylh07*qoM6N<$f-ieP<NyEw

literal 0
HcmV?d00001

diff --git a/web/src/assets/img/menu-tree-hidden-icon.png b/web/src/assets/img/menu-tree-hidden-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..71ec76f82decf821d9da1c5c688283e54c4dc57a
GIT binary patch
literal 663
zcmV;I0%-k-P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px%QAtEWRCr$PTWxlNFc942Bzh9{B#pdky@mD`R{JnLiS{I=2a)t4U_%0ekB~wg
ze@aNQ!{%dmb{IYQk3G2k1OV>w03lYRd)ohHTPe3ulksnQz{Ox5Kao;XVr<%^!ydJX
zNU4YzJIQeOS~agq0L1fZN^yMbkwI;yvZ(^06o7wbd<GnoGJKnxD3${-UmOjWPu7zp
zQr~SpgWq@ggh+|vm})M=z107+01&}K5V6Cxky0ml*w6e<-py#)9`>d67Rhiot^wfX
zpd%;4-Jp+35iHk4w8@P&?J4m94S)fE{oG({KjVBR-?yjyxeb86{sF*n*FQWULjX&_
zywG6}z$S=O0LLKi0k{a^CWxzWo+U5?Pk~rKONJmALNGMgY!ISBM1v^;2#0-#!xzNQ
z=QT0b0gaZhJa%sXRu0*_2Z&&qq@g=7J~z|O?e_}+n^bX=<j;FCGCFmg`}csHP^B)G
zK>TSkJG}#-ZbH7Fd-nj}2G)%S0DK>Vbzj8yb9ewez^HTqF#=))#0ZEH5F;Q)K#YJG
z0Wp#yfGROiV+I1?20@M%D#fkhV&Cz6+wrX8@0gEuHAzXWaIv_U?##lrov`co3rjkw
z`8SHcZ2)YgNJKH8HPzs_HlR&^W~DfhEt)77Oa#S}c_Pa6H@uM$sm-L_y{i(9Q<0!4
z@#b;>(%gQc7wVAVac647o=SB?)uO2@!SO3LXgE;cnqA~RcZsHS3({SbPe{e1ZV1ng
x@X91}6!VW;``4i5FfO1204`7*avu-x0Y8?C`d^E6IK2P>002ovPDHLkV1l(!DAND{

literal 0
HcmV?d00001

diff --git a/web/src/assets/img/menu-tree-show-icon.png b/web/src/assets/img/menu-tree-show-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..62782bb7989ec97cd6ade41b42d57775dc71330d
GIT binary patch
literal 737
zcmV<70v`Q|P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00001b5ch_0Itp)
z=>Px%n@L1LRCr$PTU&O*AP~Kz8?h^?T}d&g+U}z5F0AcQx)R+<vk|3-#3&$!#5{yL
z{00bfnHlEEaN~pBIQ<|1hyy$b@O1VDDaT-J91&O<z&3!)#B%Xbb?&nwz@J~o*zHyT
zMiCM2I%<X_nTYTC#`Vz&z@GSZ<b<2YPm)I$2yOt<*{^l;82}LvAZ!FkC9*pADsi~C
zX*dBOmwDj*IFSjl{G7x?d~s6FUq?uGPbMvRw{?O8fR_~@c}cKXE~0%Za}d~ebx`0^
zZp7;AQNK(V2Wadc=k4nR^3=G{6EScBAhiunSSC7AuteJCXac~#QJ&6-14smp2#^l&
z+0vmaMcb|+C1}|-^a@<_6;PI%5Od{c^frPO0nOvAbXVIV6D|O{iR!S?+Y(-`4;O&R
zbY1175C9z^KpYUNGsH;*NC%J-q*tI!w)`hMAh+<gTNPQZ9%iN~gOq-gnBhk(zZ!+-
z2Y&{wh>{P6rr({h{i;m{1z;bGS5f8u#xA*U;y?`wK%S6DryLS0A>k7Nm9;r$ZlrYP
z?u<?D?mo`t_|E-oZ~%OCADk32gvbygLx>Ea|7Zx260C^;xx@4fYR@40t3wFa5GtzB
zibAY21xz)isd8Gd0OV%#Ehk30xZOH?1kC|;2xvQp00=cK-u7net|ty44lpZUsX~M*
zM9k9P>QdPr<MnlwSlfA4sVw{=pgSo*<1lpF19!ci8>RoJK8J$?rW|0ZQ)EB-b5yz}
z*51#)eN{T|FPAUs?3I&ZG#ivXIDH?w!~IpsfAfZk+)2?rwGK~o)vcPe%#@y*gA=Yw
z!-YR@-ZXVcUgYAi9RtaOqX*~0^9-`ANVYPz@s;{U+YZwej08YeNXEL)&2zvXb?dfY
TJPFgZ00000NkvXXu0mjfrBh0z

literal 0
HcmV?d00001

diff --git a/web/src/layout/component/main.vue b/web/src/layout/component/main.vue
index 36cec94..fd3f599 100644
--- a/web/src/layout/component/main.vue
+++ b/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-scrollbar
-			ref="layoutMainScrollbarRef"
-			class="layout-main-scroll layout-backtop-header-fixed"
-			wrap-class="layout-main-scroll"
-			view-class="layout-main-scroll"
-		>
+	<el-main class="layout-main"
+		:style="isFixedHeader ? `height: calc(100% - ${setMainHeight})` : `minHeight: calc(100% - ${setMainHeight})`">
+		<el-scrollbar ref="layoutMainScrollbarRef" class="layout-main-scroll layout-backtop-header-fixed"
+			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>
diff --git a/web/src/main.ts b/web/src/main.ts
index e20e8d1..28d3475 100644
--- a/web/src/main.ts
+++ b/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的图标
diff --git a/web/src/views/system/login/index.vue b/web/src/views/system/login/index.vue
index a209e05..28d3a17 100644
--- a/web/src/views/system/login/index.vue
+++ b/web/src/views/system/login/index.vue
@@ -45,7 +45,7 @@
 			<p>Copyright © 2021-2022 django-vue-admin.com 版权所有</p>
 			<p class="la-other">
 				<a href="https://beian.miit.gov.cn" target="_blank">晋ICP备18005113号-3</a>
-				| 
+				|
 				<a href="https://django-vue-admin.com" target="_blank">帮助</a>
 				|
 				<a href="#">隐私</a>
@@ -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;
-					color: #26a59a;
+					font-size: 16px;
+					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;
 		}
 	}
diff --git a/web/src/views/system/menu/index.vue b/web/src/views/system/menu/index.vue
index dc03717..47c1c09 100644
--- a/web/src/views/system/menu/index.vue
+++ b/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-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>
+					<div class="menu-left-tree">
+						<div class="mlt-head">
+							<img src="../../../assets/img/menu-tree-head-icon.png" alt="" />
+							菜单列表
+							<el-tooltip effect="dark" placement="right"
+								content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;">
+								<el-icon size="16" class="mlt-tooltip">
+									<QuestionFilled />
+								</el-icon>
+							</el-tooltip>
+						</div>
+						<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 :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 }}
+									</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="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
+						<el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
+						<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 'splitpanes/dist/splitpanes.css';
+import { getElementLabelLine } from "element-tree-line";
 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>