feat: sidebar 样式优化

package.json

@@ -47,6 +47,7 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+		"@types/js-md5": "^0.7.0",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
     "@types/vue-ls": "^3.2.3",

src/components/LangSelect/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-dropdown class="lang-select" trigger="click" @command="handleSetLanguage">
 		<div class="lang-select__icon">
-			<LeIcon :icon-class="`le-lang_${language}`" style="transform: scale(1.2)" />
+			<LeIcon :icon-class="`le-lang_${language}`" />
 		</div>
 		<template #dropdown>
 			<el-dropdown-menu>

src/layout/components/Navbar.vue

@@ -6,8 +6,8 @@
 
 		<div class="right-menu">
 			<template v-if="device !== 'mobile'">
-				<!--				<search id="header-search" class="right-menu-item" />
-				<error-log class="errLog-container right-menu-item hover-effect" />-->
+				<!--        <search id="header-search" class="right-menu-item" />
+                <error-log class="errLog-container right-menu-item hover-effect" />-->
 				<Screenfull id="screenfull" class="right-menu-item hover-effect" />
 				<template v-if="true">
 					<el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -19,9 +19,9 @@
 
 			<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" size="default">
 				<div class="avatar-wrapper">
-					<!--					<img :src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar" />-->
-					{{ username }} <img src="@/assets/favicon.ico" class="user-avatar" />
-					<CaretBottom style="width: 0.6em; height: 0.6em; margin-left: 5px" />
+					<span class="nickname">{{ user.nickname || '' }}</span>
+					<img v-if="user.avatar" :src="user.avatar" class="user-avatar" />
+					<ArrowDown style="width: 0.6em; height: 0.6em; margin-left: 5px; font-size: 24px;" />
 				</div>
 
 				<template #dropdown>
@@ -39,12 +39,12 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from 'vue'
+import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 
 import useStore from '@/store'
-import { ls } from '@/utils'
+// import { ls } from '@/utils'
 
 // 组件依赖
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
@@ -54,8 +54,7 @@ import SizeSelect from '@/components/SizeSelect/index.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
 
 // 图标依赖
-import { CaretBottom } from '@element-plus/icons-vue'
-const menuController = ref(false)
+import { ArrowDown } from '@element-plus/icons-vue'
 
 const { app, user } = useStore()
 
@@ -64,19 +63,10 @@ const router = useRouter()
 
 const sidebar = computed(() => app.sidebar)
 const device = computed(() => app.device)
-// const avatar = computed(() => user.avatar)
 
 function toggleSideBar() {
 	app.toggleSidebar()
 }
-let username = ref('')
-const getName = () => {
-	username.value = ls.get('username')
-}
-
-onBeforeMount(() => {
-	getName()
-})
 
 function logout() {
 	ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
@@ -84,7 +74,6 @@ function logout() {
 		cancelButtonText: '取消',
 		type: 'warning'
 	}).then(() => {
-		ls.remove('username')
 		user.logout().then(() => {
 			router.push(`/login?redirect=${route.fullPath}`)
 		})
@@ -100,10 +89,12 @@ ul {
 }
 .navbar {
 	height: 50px;
+	display: flex;
+	align-items: center;
 	overflow: hidden;
 	position: relative;
 	background: #fff;
-	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+	box-shadow: 0 1px 2px #00152914;
 
 	.hamburger-container {
 		line-height: 46px;
@@ -119,11 +110,14 @@ ul {
 	}
 
 	.breadcrumb-container {
-		float: left;
+		flex: 1;
 	}
 
 	.right-menu {
-		float: right;
+		flex: 1 1 0;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
 		height: 100%;
 		line-height: 50px;
 
@@ -132,12 +126,10 @@ ul {
 		}
 
 		.right-menu-item {
-			display: inline-block;
 			padding: 0 8px;
 			height: 100%;
 			font-size: 18px;
 			color: #5a5e66;
-			vertical-align: text-bottom;
 
 			&.hover-effect {
 				cursor: pointer;
@@ -151,23 +143,22 @@ ul {
 
 		.avatar-container {
 			.avatar-wrapper {
-				margin-top: 8px;
-				position: relative;
-
+				display: flex;
+				align-items: center;
+				white-space: nowrap;
+				.nickname {
+					font-size: 14px;
+				}
 				.user-avatar {
 					cursor: pointer;
-					width: 36px;
-					height: 36px;
-					border-radius: 10px;
-					vertical-align: middle;
-					margin-left: 10px;
+					width: 26px;
+					height: 26px;
+					border-radius: 50%;
+					margin-left: 8px;
 				}
 
 				.el-icon-caret-bottom {
 					cursor: pointer;
-					position: absolute;
-					right: -20px;
-					top: 25px;
 					font-size: 12px;
 				}
 			}

src/layout/components/Sidebar/Logo.vue

@@ -46,10 +46,21 @@ const title = ref('vue3_element_admin')
 	width: 100%;
 	height: 50px;
 	line-height: 50px;
-	background: #2b2f3a;
 	text-align: center;
 	overflow: hidden;
-
+	&::before {
+		z-index: auto;
+		content: '';
+		background-color: var(--el-menu-active-color);
+		opacity: 0.01;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		pointer-events: none;
+		transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
 	& .sidebar-logo-link {
 		height: 100%;
 		width: 100%;
@@ -64,7 +75,7 @@ const title = ref('vue3_element_admin')
 		& .sidebar-title {
 			display: inline-block;
 			margin: 0;
-			color: #fff;
+			color: var(--el-color-primary);
 			font-weight: 600;
 			line-height: 50px;
 			font-size: 14px;

src/layout/components/Sidebar/index.vue

@@ -2,17 +2,8 @@
 	<div :class="{ 'has-logo': showLogo }">
 		<logo v-if="showLogo" :collapse="isCollapse" />
 		<el-scrollbar wrap-class="scrollbar-wrapper">
-			<el-menu
-				:default-active="activeMenu"
-				:collapse="isCollapse"
-				:background-color="variables.menuBg"
-				:text-color="variables.menuText"
-				:active-text-color="variables.menuActiveText"
-				:unique-opened="false"
-				:collapse-transition="false"
-				mode="vertical"
-			>
-				<sidebar-item v-for="route in routes" :item="route" :key="route.path" :base-path="route.path" :is-collapse="isCollapse" />
+			<el-menu :default-active="activeMenu" :collapse="isCollapse" :unique-opened="false" :collapse-transition="false" mode="vertical">
+				<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" :is-collapse="isCollapse" />
 			</el-menu>
 		</el-scrollbar>
 	</div>

src/layout/components/TagsView/index.vue

@@ -272,8 +272,7 @@ onMounted(() => {
 	width: 100%;
 	background: #fff;
 	border-bottom: 1px solid #d8dce5;
-	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
-
+	box-shadow: 0 1px 2px #00152914;
 	.tags-view__wrapper {
 		.tags-view__item {
 			display: inline-block;

src/store/modules/user.ts

@@ -3,8 +3,6 @@ import { UserState } from '@/types'
 import { ls } from '@/utils'
 import { login, logout, getMenuPermissions } from '@/api/login'
 import router, { resetRouter } from '@/router'
-// eslint-disable-next-line
-// @ts-ignore
 import md5 from 'js-md5'
 
 const useUserStore = defineStore({

src/styles/sidebar.scss

@@ -1,4 +1,7 @@
 #app {
+	--el-menu-item-height: 42px;
+	--el-menu-sub-item-height: 42px;
+	--el-menu-hover-bg-color: transparent;
 	.main-container {
 		min-height: 100%;
 		height: 100%;
@@ -10,7 +13,7 @@
 	.sidebar-container {
 		transition: width 0.28s;
 		width: $sideBarWidth !important;
-		background-color: $menuBg;
+		background-color: var(--el-menu-bg-color); // todo
 		height: 100%;
 		position: fixed;
 		font-size: 0px;
@@ -19,6 +22,7 @@
 		left: 0;
 		z-index: 1001;
 		overflow: hidden;
+		box-shadow: 2px 0 8px #1d23290d;
 
 		// reset element-plus css
 		.horizontal-collapse-transition {
@@ -66,28 +70,72 @@
 			border: none;
 			height: 100%;
 			width: 100% !important;
+			.el-sub-menu {
+				&.is-active {
+					.el-sub-menu__title {
+						color: var(--el-menu-active-color);
+					}
+				}
+			}
+			/*$active_1: var(--el-menu-active-color);
+			$active_bg: desaturate(rgba(0, 0, 0, .90), 1%);
+			//$active_bg: desaturate($active_1, 50%);
+			//$active_bg: draken($active_1, 50%);*/
+			$active_bg: var(--el-color-primary);
+			.el-menu-item,
+			.el-sub-menu__title {
+				margin-top: 6px;
+			}
+			.el-menu-item.is-active::before {
+				background-color: $active_bg;
+			}
+			.el-menu-item:hover {
+				&::before {
+					background-color: $active_bg;
+				}
+			}
+			.el-sub-menu__title:hover {
+				&::before {
+					background-color: $active_bg;
+				}
+			}
+			.el-menu-item::before,
+			.el-sub-menu__title::before {
+				z-index: auto;
+				content: "";
+				background-color: #0000;
+				opacity: 0.08;
+				position: absolute;
+				left: 8px;
+				right: 8px;
+				top: 0;
+				bottom: 0;
+				pointer-events: none;
+				border-radius: 3px;
+				transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
+			}
 		}
 
 		// menu hover
-		.submenu-title-noDropdown,
+		/*.submenu-title-noDropdown,
 		.el-sub-menu__title {
 			&:hover {
-				background-color: $menuHover !important;
+				//background-color: $menuHover !important;
 			}
-		}
+		}*/
 
-		.is-active > .el-sub-menu__title {
-			color: $subMenuActiveText !important;
-		}
+		/*.is-active > .el-sub-menu__title {
+			color: // $subMenuActiveText !important;
+		}*/
 
 		& .nest-menu .el-sub-menu > .el-sub-menu__title,
 		& .el-sub-menu .el-menu-item {
 			min-width: $sideBarWidth !important;
-			background-color: $subMenuBg !important;
+			// // background-color: $subMenuBg !important;
 
-			&:hover {
-				background-color: $subMenuHover !important;
-			}
+			//&:hover {
+			//	// background-color: $subMenuHover !important;
+			//}
 		}
 	}
 
@@ -199,13 +247,13 @@
 		}
 	}
 
-	.nest-menu .el-sub-menu > .el-sub-menu__title,
+	/*.nest-menu .el-sub-menu > .el-sub-menu__title,
 	.el-menu-item {
 		&:hover {
 			// you can use $subMenuHover
-			background-color: $menuHover !important;
+			//background-color: $menuHover !important;
 		}
-	}
+	}*/
 
 	// the scroll bar appears when the subMenu is too long
 	> .el-menu--popup {

src/styles/variables.module.scss

@@ -1,25 +1,25 @@
 // sidebar
-$menuText: #bfcbd9;
-$menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+//$menuText: #bfcbd9;
+//$menuActiveText: #409eff;
+//$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg: #304156;
-$menuHover: #263445;
+//$menuBg: #304156;
+//$menuHover: #263445;
 
-$subMenuBg: #1f2d3d;
-$subMenuHover: #001528;
+//$subMenuBg: #1f2d3d;
+//$subMenuHover: #001528;
 
 $sideBarWidth: 210px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
-	menuText: $menuText;
-	menuActiveText: $menuActiveText;
-	subMenuActiveText: $subMenuActiveText;
-	menuBg: $menuBg;
-	menuHover: $menuHover;
-	subMenuBg: $subMenuBg;
-	subMenuHover: $subMenuHover;
+	//menuText: $menuText;
+	//menuActiveText: $menuActiveText;
+	//subMenuActiveText: $subMenuActiveText;
+	//menuBg: $menuBg;
+	//menuHover: $menuHover;
+	//subMenuBg: $subMenuBg;
+	//subMenuHover: $subMenuHover;
 	sideBarWidth: $sideBarWidth;
 }