feat: 主体样式 风格调整优化

src/components/Screenfull/index.vue

@@ -1,9 +1,9 @@
 <template>
-	<div>
-		<el-tooltip placement="top" :content="$t(isFullscreen ? 'le.exitFullscreen' : 'le.fullscreen')">
+	<el-tooltip placement="top" :content="$t(isFullscreen ? 'le.exitFullscreen' : 'le.fullscreen')">
+		<div class="right-menu-item le-hover-effect--bg">
 			<LeIcon :icon-class="isFullscreen ? 'le-suoxiao1' : 'le-fangda1'" @click="toggle" />
-		</el-tooltip>
-	</div>
+		</div>
+	</el-tooltip>
 </template>
 
 <script setup lang="ts">

src/hooks/useTheme.ts

@@ -58,8 +58,8 @@ export const useTheme = () => {
 	// 设置菜单样式
 	const setMenuTheme = () => {
 		let type: Theme.ThemeType = 'light'
-		if (layout.value === 'transverse' && headerInverted.value) type = 'inverted'
-		if (layout.value !== 'transverse' && asideInverted.value) type = 'inverted'
+		if (layout.value === 'top' && headerInverted.value) type = 'inverted'
+		if (layout.value !== 'top' && asideInverted.value) type = 'inverted'
 		if (isDark.value) type = 'dark'
 		const theme = menuTheme[type!]
 		// console.error(type, 'type theme', theme)

src/layout/LayoutColumns/index.scss

@@ -1,133 +0,0 @@
-.layout-wrap--columns {
-  width: 100%;
-  height: 100%;
-  .aside-split {
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    width: 70px;
-    height: 100%;
-    background-color: var(--el-menu-bg-color);
-    border-right: 1px solid var(--el-aside-border-color);
-    .logo {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      height: 55px;
-      .logo-img {
-        //width: 32px;
-        width: 36px;
-        height: 36px;
-        object-fit: contain;
-      }
-    }
-    .el-scrollbar {
-      height: calc(100% - 55px);
-      .split-list {
-        flex: 1;
-        .split-item {
-					position: relative;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          height: 70px;
-          cursor: pointer;
-          transition: all 0.3s ease;
-					&::before {
-						z-index: auto;
-						content: "";
-						background-color: #0000;
-						opacity: 0.08;
-						position: absolute;
-						//left: 8px;
-						//right: 8px;
-						left: 0;
-						right: 0;
-						top: 0;
-						bottom: 0;
-						pointer-events: none;
-						border-radius: 3px;
-						transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
-					}
-          /*.el-icon {
-            font-size: 20px;
-          }*/
-					.menu-icon {
-						font-size: 18px;
-					}
-          .title {
-            margin-top: 6px;
-            font-size: 12px;
-          }
-          .menu-icon,
-          .title {
-            color: var(--el-menu-text-color);
-          }
-        }
-        .split-active {
-					&::before {
-						background-color: var(--el-color-primary) !important;
-					}
-          .menu-icon,
-          .title {
-						color: var(--el-menu-active-color);
-            //color: #ffffff !important;
-          }
-        }
-      }
-    }
-  }
-  .not-aside {
-    width: 0 !important;
-    border-right: none !important;
-  }
-  .el-aside {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    background-color: var(--el-menu-bg-color);
-    border-right: 1px solid var(--el-aside-border-color);
-    transition: width 0.3s ease;
-    .el-scrollbar {
-      height: calc(100% - 55px);
-      .layout-menu-wrap {
-        width: 100%;
-        overflow-x: hidden;
-        border-right: none;
-      }
-    }
-    .logo {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-sizing: border-box;
-      padding: 0 6px;
-      height: 55px;
-      .logo-text {
-        //font-size: 24px;
-        font-size: 15px;
-        font-weight: bold;
-        //color: var(--el-aside-logo-text-color);
-        color: var(--el-color-primary);
-        white-space: nowrap;
-      }
-    }
-  }
-  .el-header {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 55px;
-    //padding: 0 15px;
-		padding: 0;
-    background-color: var(--el-header-bg-color);
-    border-bottom: 1px solid var(--el-border-color-light);
-  }
-  .app-main {
-    min-height: 0;
-  }
-}

src/layout/LayoutLeft/index.scss

@@ -0,0 +1,71 @@
+@import "../layout_common";
+.layout-wrap--left {
+	width: 100%;
+	height: 100%;
+	.el-aside {
+		width: auto;
+		background-color: var(--el-menu-bg-color);
+		//border-right: 1px solid var(--el-aside-border-color);
+		box-shadow: 1px 0 2px var(--el-aside-border-color);
+		//box-shadow: 1px 0 4px -1px var(--el-aside-border-color);
+		z-index: $header_index + 1;
+		//box-shadow: 2px 0 8px #1d23290d;
+		.aside-box {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+			transition: width 0.3s ease;
+			.el-scrollbar {
+				height: calc(100% - $header_height);
+				.layout-menu-wrap {
+					width: 100%;
+					overflow-x: hidden;
+					border-right: none;
+					// 折叠
+					/*&--collapse {
+						//background-color: transparent !important;
+						.menu-icon {
+							margin-right: 0;
+						}
+					}*/
+				}
+			}
+			.logo {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+				height: $header_height; // todo  55-1 ???
+				.logo-img { // 样式提取 todo...
+					//width: 28px;
+					width: 36px;
+					height: 36px;
+					object-fit: contain;
+					//margin-right: 6px;
+					margin: 0 6px;
+				}
+				.logo-text {
+					font-size: 15px;
+					font-weight: bold;
+					color: var(--el-color-primary);
+					white-space: nowrap;
+				}
+			}
+		}
+	}
+	.el-header {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: $header_height;
+		padding: 0;
+		background-color: var(--el-header-bg-color);
+		//border-bottom: 1px solid var(--el-header-border-color);
+		box-shadow: 0 1px 4px -1px var(--el-header-border-color);
+		z-index: $header_index;
+	}
+	.app-main {
+		min-height: 0;
+	}
+}

src/layout/LayoutVertical/index.vue → src/layout/LayoutLeft/index.vue

@@ -1,6 +1,6 @@
-<!-- 纵向布局 -->
+<!-- 左侧菜单模式:left -->
 <template>
-	<el-container class="layout-wrap--vertical">
+	<el-container class="layout-wrap--left">
 		<el-aside>
 			<div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
 				<div class="logo">
@@ -25,7 +25,7 @@
 	</el-container>
 </template>
 
-<script setup lang="ts" name="layoutVertical">
+<script setup lang="ts" name="layoutLeft">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 // import { useAuthStore } from '@/stores/modules/auth'
@@ -46,7 +46,7 @@ const { permission, setting } = useStore()
 // const accordion = computed(() => globalStore.accordion)
 // const isCollapse = computed(() => globalStore.isCollapse)
 // const menuList = computed(() => authStore.showMenuListGet)
-const accordion = computed(() => setting.accordion || false) // todo...
+const accordion = computed(() => setting.accordion)
 const isCollapse = computed(() => setting.isCollapse)
 // const isCollapse = computed(() => !app.sidebar.opened)
 

src/layout/LayoutLeftMix/index.scss

@@ -0,0 +1,138 @@
+@import "../layout_common";
+.layout-wrap--leftMix {
+	width: 100%;
+	height: 100%;
+	.aside-split {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		width: 70px;
+		height: 100%;
+		background-color: var(--el-menu-bg-color);
+		//border-right: 1px solid var(--el-aside-border-color);
+		box-shadow: 1px 0 2px var(--el-aside-border-color);
+		z-index: $header_index + 2;
+		.logo {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+			height: 55px;
+			.logo-img {
+				//width: 32px;
+				width: 36px;
+				height: 36px;
+				object-fit: contain;
+			}
+		}
+		.el-scrollbar {
+			height: calc(100% - 55px);
+			.split-list {
+				flex: 1;
+				.split-item {
+					&::before {
+						left: 2px;
+						right: 2px;
+					}
+					&:hover {
+						color: var(--el-menu-active-color);
+						&::before {
+							background-color: inherit;
+						}
+					}
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					height: 70px;
+					line-height: unset;
+					cursor: pointer;
+					transition: all 0.3s ease;
+					.menu-icon {
+						//font-size: 18px;
+						margin-right: 0;
+					}
+					.title {
+						margin-top: 6px;
+						font-size: 12px;
+						//color: inherit;
+					}
+					/*.menu-icon,
+					.title {
+						color: var(--el-menu-text-color);
+					}*/
+				}
+				.split-active {
+					&:hover {
+						&::before {
+							background-color: var(--el-menu-active-color);
+						}
+					}
+					&::before {
+						background-color: var(--el-menu-active-color);
+					}
+					.menu-icon,
+					.title {
+						color: var(--el-menu-active-color);
+					}
+				}
+			}
+		}
+	}
+	.not-aside {
+		width: 0 !important;
+		border-right: none !important;
+	}
+	.el-aside {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+		background-color: var(--el-menu-bg-color);
+		//border-right: 1px solid var(--el-aside-border-color);
+		z-index: $header_index + 1;
+		box-shadow: 1px 0 2px var(--el-aside-border-color);
+		//box-shadow: 2px 0 8px #1d23290d;
+		//box-shadow: 1px 0 4px -1px var(--el-aside-border-color);
+		transition: width 0.3s ease;
+		.el-scrollbar {
+			height: calc(100% - 55px);
+			.layout-menu-wrap {
+				width: 100%;
+				overflow-x: hidden;
+				border-right: none;
+			}
+		}
+		.logo {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+			padding: 0 6px;
+			height: 55px;
+			.logo-text {
+				//font-size: 24px;
+				font-size: 15px;
+				font-weight: bold;
+				color: var(--el-color-primary);
+				white-space: nowrap;
+			}
+		}
+	}
+	.el-header {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 55px;
+		//padding: 0 15px;
+		padding: 0;
+		background-color: var(--el-header-bg-color);
+		//border-bottom: 1px solid var(--el-border-color-light);
+		box-shadow: 0 1px 4px -1px var(--el-header-border-color);
+		z-index: $header_index;
+	}
+	.app-main {
+		min-height: 0;
+	}
+}

src/layout/LayoutColumns/index.vue → src/layout/LayoutLeftMix/index.vue

@@ -1,6 +1,6 @@
-<!-- 分栏布局 -->
+<!-- 左侧菜单混合模式:leftMix -->
 <template>
-	<el-container class="layout-wrap--columns">
+	<el-container class="layout-wrap--leftMix">
 		<div class="aside-split">
 			<div class="logo">
 				<!--				<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />-->
@@ -12,14 +12,14 @@
 					<div
 						v-for="item in menuList"
 						:key="item.path"
-						class="split-item"
+						class="el-menu-item split-item"
 						:class="{ 'split-active': splitActive === item.path || `/${splitActive.split('/')[1]}` === item.path }"
 						@click="changeSubMenu(item)"
 					>
 						<MenuIcon v-if="item.meta?.icon" :icon-class="item.meta.icon"></MenuIcon>
-<!--						<el-icon>
-							<component :is="item.meta.icon"></component>
-						</el-icon>-->
+						<!--						<el-icon>
+													<component :is="item.meta.icon"></component>
+												</el-icon>-->
 						<span class="title">{{ generateTitle(item.meta.title) }}</span>
 					</div>
 				</div>
@@ -45,7 +45,7 @@
 	</el-container>
 </template>
 
-<script setup lang="ts" name="layoutColumns">
+<script setup lang="ts" name="layoutLeftMix">
 import { ref, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 // import { useAuthStore } from '@/stores/modules/auth'
@@ -68,10 +68,10 @@ const { permission, setting, app } = useStore()
 // const accordion = computed(() => globalStore.accordion)
 // const isCollapse = computed(() => globalStore.isCollapse)
 // const menuList = computed(() => authStore.showMenuListGet)
-const accordion = computed(() => setting.accordion || false) // todo...
+const accordion = computed(() => setting.accordion)
 const isCollapse = computed(() => setting.isCollapse)
 const menuList = computed(() => permission.showMenuList)
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
+const activeMenu = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.path) as string)
 
 const subMenuList = ref<Menu.MenuOptions[]>([])
 const splitActive = ref('')

src/layout/LayoutTop/index.scss

@@ -0,0 +1,82 @@
+@import "../layout_common";
+.layout-wrap--top {
+	width: 100%;
+	height: 100%;
+	.el-header {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: $header_height;
+		padding: 0;
+		background-color: var(--el-header-bg-color);
+		//border-bottom: 1px solid var(--el-header-border-color);
+		box-shadow: 0 1px 4px -1px var(--el-header-border-color);
+		z-index: $header_index;
+		.logo {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 210px;
+			margin-right: 10px;
+			.logo-img {
+				//width: 28px;
+				width: 36px;
+				height: 36px;
+				object-fit: contain;
+				margin: 0 6px;
+			}
+			.logo-text {
+				font-size: 15px;
+				font-weight: bold;
+				color: var(--el-color-primary);
+				white-space: nowrap;
+			}
+		}
+		.layout-menu-wrap {
+			flex: 1;
+			height: 100%;
+			overflow: hidden;
+			border-bottom: none;
+			margin-top: 0;
+			.el-sub-menu__hide-arrow {
+				width: 65px;
+				//height: $header_height - 1px;
+			}
+			.el-menu-item,
+			.el-sub-menu__title {
+				margin-top: 0;
+				&::before {
+					left: 0;
+					right: 0;
+				}
+			}
+			.is-active {
+				border-bottom-color: var(--el-color-primary) !important;
+				/*&::before {
+					width: 0;
+				}*/
+				.el-sub-menu__title {
+					border-bottom-color: var(--el-color-primary) !important;
+				}
+			}
+		}
+	}
+
+	@media screen and (width <= 730px) {
+		.logo {
+			display: none !important;
+		}
+	}
+	.app-main {
+		min-height: 0;
+	}
+}
+.layout-menu-popper-wrap.el-menu--horizontal {
+	--el-menu-horizontal-sub-item-height: 42px;
+	.el-menu-item::before,
+	.el-sub-menu__title::before {
+		left: 0;
+		right: 0;
+	}
+}

src/layout/LayoutTransverse/index.vue → src/layout/LayoutTop/index.vue

@@ -1,6 +1,6 @@
-<!-- 横向布局 -->
+<!-- 顶部菜单模式:top -->
 <template>
-	<el-container class="layout-wrap--transverse">
+	<el-container class="layout-wrap--top">
 		<el-header>
 			<div class="logo">
 				<!--          <SvgIcon class="logo-img sidebar-logo" icon-class="logo" />-->
@@ -45,7 +45,7 @@
 	</el-container>
 </template>
 
-<script setup lang="ts" name="layoutTransverse">
+<script setup lang="ts" name="layoutTop">
 import { computed } from 'vue'
 // import { useAuthStore } from '@/stores/modules/auth'
 import { useRoute, useRouter } from 'vue-router'

src/layout/LayoutClassic/index.scss → src/layout/LayoutTopMix/index.scss

@@ -1,8 +1,7 @@
 @import "../layout_common";
-.layout-wrap--classic {
+.layout-wrap--topMix {
   width: 100%;
   height: 100%;
-  //:deep() {
 	.el-header {
     box-sizing: border-box;
     display: flex;
@@ -12,7 +11,10 @@
     //padding: 0 15px 0 0;
     padding: 0;
     background-color: var(--el-header-bg-color);
-    border-bottom: 1px solid var(--el-header-border-color);
+		//border-bottom: 1px solid var(--el-header-border-color);
+		//box-shadow: 0 2px 8px var(--el-header-border-color);
+		box-shadow: 0 1px 4px -1px var(--el-header-border-color);
+		z-index: $header_index;
     .header-lf {
       display: flex;
       align-items: center;
@@ -46,15 +48,19 @@
       }
     }
   }
-  .classic-content {
+  .topMix-content {
     display: flex;
     height: calc(100% - $header_height);
     .aside-box {
       width: auto;
       background-color: var(--el-menu-bg-color);
-      border-right: 1px solid var(--el-aside-border-color);
-      z-index: 1;
-      box-shadow: 2px 0 8px #1d23290d;
+			//border-right: 1px solid var(--el-aside-border-color);
+			z-index: $header_index - 1;
+			//box-shadow: 2px 0 8px #1d23290d;
+			//box-shadow: 2px 0 8px var(--el-aside-border-color);
+			box-shadow: 1px 0 2px var(--el-aside-border-color);
+			////box-shadow: 1px 1px 8px var(--el-color-primary);
+			//box-shadow: 1px 1px 16px -10px var(--el-color-primary);
       display: flex;
       flex-direction: column;
       height: 100%;
@@ -63,63 +69,16 @@
         width: 100%;
         overflow-x: hidden;
         border-right: none;
-/*				.menu-icon {
-					margin-right: 4px;
-					font-size: 18px;
-				}*/
         // 折叠
-        &--collapse {
+        /*&--collapse {
           //background-color: transparent !important;
 					.menu-icon {
 						margin-right: 0;
 					}
-        }
-        .el-sub-menu {
-          &.is-active {
-						& > .el-sub-menu__title {
-              color: var(--el-menu-active-color);
-            }
-          }
-        }
-        $active_bg: var(--el-color-primary);
-        .el-menu-item,
-        .el-sub-menu__title {
-          margin-top: 5px;
-        }
-        .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);
-        }
+        }*/
       }
     }
-    //:deep(.el-aside) {
-    //
-    //}
-    .classic-main {
+    .topMix-main {
       display: flex;
       flex-direction: column;
     }

src/layout/LayoutClassic/index.vue → src/layout/LayoutTopMix/index.vue

@@ -1,6 +1,6 @@
-<!-- 经典布局 -->
+<!-- 顶部菜单混合模式:topMix -->
 <template>
-	<el-container class="layout-wrap--classic">
+	<el-container class="layout-wrap--topMix">
 		<el-header>
 			<div class="header-lf mask-image">
 				<div class="logo">
@@ -12,7 +12,7 @@
 			</div>
 			<ToolBarRight class="header-ri" />
 		</el-header>
-		<el-container class="classic-content">
+		<el-container class="topMix-content">
 			<el-aside class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
 				<el-scrollbar>
 					<el-menu class="layout-menu-wrap" :router="false" :default-active="activeMenu" :collapse="isCollapse" :unique-opened="accordion" :collapse-transition="false">
@@ -20,14 +20,14 @@
 					</el-menu>
 				</el-scrollbar>
 			</el-aside>
-			<el-container class="classic-main">
+			<el-container class="topMix-main">
 				<AppMain />
 			</el-container>
 		</el-container>
 	</el-container>
 </template>
 
-<script setup lang="ts" name="layoutClassic">
+<script setup lang="ts" name="layoutTopMix">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import AppMain from '@/layout/components/AppMain.vue'
@@ -40,10 +40,10 @@ const title = import.meta.env.VITE_APP_TITLE
 const { permission, setting } = useStore()
 
 const route = useRoute()
-const accordion = computed(() => setting.accordion) // todo...
+const accordion = computed(() => setting.accordion)
 const isCollapse = computed(() => setting.isCollapse)
 const menuList = computed(() => permission.showMenuList)
-const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
+const activeMenu = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.path) as string)
 </script>
 
 <style lang="scss">

src/layout/LayoutTransverse/index.scss

@@ -1,92 +0,0 @@
-.layout-wrap--transverse {
-  width: 100%;
-  height: 100%;
-  //:deep(.el-header) {
-  .el-header {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 55px;
-    //padding: 0 15px 0 0;
-    padding: 0;
-    background-color: var(--el-header-bg-color);
-    border-bottom: 1px solid var(--el-header-border-color);
-    .logo {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 210px;
-      margin-right: 10px;
-      .logo-img {
-        //width: 28px;
-        width: 36px;
-        height: 36px;
-        object-fit: contain;
-        //margin-right: 6px;
-        margin: 0 6px;
-      }
-      .logo-text {
-        font-size: 15px;
-        font-weight: bold;
-        color: var(--el-color-primary);
-        //color: var(--el-header-logo-text-color);
-        white-space: nowrap;
-      }
-    }
-    .layout-menu-wrap {
-      flex: 1;
-      height: 100%;
-      overflow: hidden;
-      border-bottom: none;
-			margin-top: 0;
-      .el-sub-menu__hide-arrow {
-        width: 65px;
-        height: 55px;
-      }
-      /*.el-menu-item.is-active {
-        //color: #ffffff !important;
-				&::before {
-					background-color: var(--el-color-primary);
-				}
-      }*/
-			.el-menu-item,
-			.el-sub-menu__title {
-				margin-top: 0;
-				&::before {
-					left: 0;
-					right: 0;
-				}
-			}
-      .is-active {
-        //background-color: var(--el-color-primary) !important;
-        border-bottom-color: var(--el-color-primary) !important;
-        /*&::before {
-          width: 0;
-        }*/
-        .el-sub-menu__title {
-          //color: #ffffff !important;
-          //background-color: var(--el-color-primary) !important;
-          border-bottom-color: var(--el-color-primary) !important;
-        }
-      }
-    }
-  }
-
-  @media screen and (width <= 730px) {
-    .logo {
-      display: none !important;
-    }
-  }
-  .app-main {
-    min-height: 0;
-  }
-}
-.layout-menu-popper-wrap.el-menu--horizontal {
-	--el-menu-horizontal-sub-item-height: 42px;
-	.el-menu-item::before,
-	.el-sub-menu__title::before {
-		left: 0;
-		right: 0;
-	}
-}

src/layout/LayoutVertical/index.scss

@@ -1,116 +0,0 @@
-.layout-wrap--vertical {
-  width: 100%;
-  height: 100%;
-  //:deep(.el-aside) {
-  .el-aside {
-    width: auto;
-    background-color: var(--el-menu-bg-color);
-    border-right: 1px solid var(--el-aside-border-color);
-    .aside-box {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      transition: width 0.3s ease;
-      .el-scrollbar {
-        height: calc(100% - 55px);
-        .layout-menu-wrap {
-          width: 100%;
-          overflow-x: hidden;
-          border-right: none;
-          /*.menu-icon {
-            margin-right: 4px;
-            font-size: 18px;
-          }*/
-          // 折叠
-          &--collapse {
-            //background-color: transparent !important;
-            .menu-icon {
-              margin-right: 0;
-            }
-          }
-          /*.el-sub-menu {
-            &.is-active {
-							& > .el-sub-menu__title {
-                color: var(--el-menu-active-color);
-              }
-            }
-          }
-          $active_bg: var(--el-color-primary);
-          .el-menu-item,
-          .el-sub-menu__title {
-            margin-top: 5px;
-          }
-          .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);
-          }*/
-        }
-      }
-      .logo {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        height: 55px;
-        /*.logo-img {
-          width: 28px;
-          object-fit: contain;
-          margin-right: 6px;
-        }*/
-        .logo-img {
-          //width: 28px;
-          width: 36px;
-          height: 36px;
-          object-fit: contain;
-          //margin-right: 6px;
-          margin: 0 6px;
-        }
-        .logo-text {
-          font-size: 15px;
-          font-weight: bold;
-          //color: var(--el-aside-logo-text-color);
-          color: var(--el-color-primary);
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-  .el-header {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 55px;
-    //padding: 0 15px;
-    padding: 0;
-    background-color: var(--el-header-bg-color);
-    border-bottom: 1px solid var(--el-header-border-color);
-  }
-	.app-main {
-		min-height: 0;
-	}
-}

src/layout/components/AppMain.vue

@@ -35,6 +35,7 @@ const pageAnimateMode = computed(() => setting.animate ? setting.animateMode : u
 	height: 100%;
 	width: 100%;
 	position: relative;
+	z-index: 0;
 	overflow: hidden;
 }
 

src/layout/components/Header/ToolBarRight.vue

@@ -1,12 +1,12 @@
 <template>
-	<div class="tool-bar-ri">
+	<div class="tool-bar-right">
 		<div class="header-icon">
 			<!--			<AssemblySize id="assemblySize" />-->
-			<Screenfull id="screenfull" class="right-menu-item hover-effect" />
+			<Screenfull id="screenfull" />
 			<el-tooltip content="布局大小" effect="dark" placement="bottom">
-				<SizeSelect id="size-select" class="right-menu-item hover-effect" />
+				<SizeSelect id="size-select" class="right-menu-item le-hover-effect--bg" />
 			</el-tooltip>
-			<Language id="language" class="right-menu-item hover-effect" />
+			<Language id="language" class="right-menu-item le-hover-effect--bg" />
 			<!--      todo...搜索 -->
 			<!--			<SearchMenu id="searchMenu" />-->
 			<!--			<ThemeSetting id="themeSetting" />-->
@@ -19,7 +19,6 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-// import { useUserStore } from '@/stores/modules/user'
 // import AssemblySize from './components/AssemblySize.vue'
 import Language from './components/Language.vue'
 import Screenfull from '@/components/Screenfull/index.vue'
@@ -30,72 +29,29 @@ import SizeSelect from '@/components/SizeSelect/index.vue'
 // import Fullscreen from './components/Fullscreen.vue'
 import Avatar from './components/Avatar.vue'
 
-// const userStore = useUserStore()
 // const username = computed(() => userStore.userInfo.name)
 </script>
 
-<style scoped lang="scss">
-.tool-bar-ri {
+<style lang="scss">
+.tool-bar-right {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	height: 100%;
-	//padding-right: 25px;
-	&:deep(.header-icon) {
+	.header-icon {
 		height: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		.right-menu-item {
-			display: flex;
-			align-items: center;
-			padding: 0 8px;
-			height: 100%;
-			//height: 55px;
-			font-size: 18px;
-			//color: #5a5e66;
-			//color: var(--el-header-text-color);
-			color: var(--el-color-info);
-
-			&.hover-effect {
-				position: relative;
-				cursor: pointer;
-				transition: background 0.3s;
-				&::before {
-					z-index: auto;
-					content: '';
-					background-color: #0000;
-					opacity: 0.08;
-					position: absolute;
-					//left: 8px;
-					//right: 8px;
-					left: 0;
-					right: 0;
-					top: 0;
-					bottom: 0;
-					pointer-events: none;
-					border-radius: 3px;
-					transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-				}
-				&:hover {
-					//background: rgba(0, 0, 0, 0.025);
-					//background: var(--el-fill-color);
-					&::before {
-						background-color: var(--el-color-primary);
-					}
-				}
-			}
-		}
-		//& > * {
-		//	margin-left: 21px;
-		//}
-	}
-	.header-icon {
 	}
-	.username {
-		margin: 0 20px;
-		font-size: 15px;
-		color: var(--el-header-text-color);
+	.right-menu-item {
+		display: flex;
+		align-items: center;
+		padding: 0 8px;
+		height: 100%;
+		//height: 55px;
+		font-size: 18px;
+		color: var(--el-color-info);
 	}
 }
 </style>

src/layout/components/Menu/SubMenu.vue

@@ -50,17 +50,12 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
 		align-items: center;
 		justify-content: center;
 		padding: 0;
-		/*.menu-icon {
-			font-size: 18px;
-		}*/
 	}
 	.is-active {
 		.el-sub-menu__title {
 			&::before {
 				background-color: var(--el-color-primary) !important;
 			}
-			//color: #ffffff !important;
-			//background-color: var(--el-color-primary) !important;
 		}
 	}
 }
@@ -70,35 +65,6 @@ const handleClickMenu = (subItem: Menu.MenuOptions) => {
 	}
 	&.is-active {
 		color: var(--el-menu-active-color) !important;
-		//background-color: var(--el-menu-active-bg-color) !important;
-		/*&::before {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			width: 4px;
-			content: '';
-			background-color: var(--el-color-primary);
-		}*/
-	}
-}
-.vertical,
-.classic,
-.transverse {
-	.el-menu-item {
-		&.is-active {
-			&::before {
-				left: 0;
-			}
-		}
-	}
-}
-.columns {
-	.el-menu-item {
-		&.is-active {
-			&::before {
-				right: 0;
-			}
-		}
 	}
 }
 </style>

src/layout/components/Settings/index.vue

@@ -29,45 +29,45 @@
 			<el-icon><Menu /></el-icon>布局模式
 		</el-divider>
 		<div class="layout-box">
-			<el-tooltip effect="dark" content="顶部菜单混合模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]" @click="setLayout('classic')">
+			<el-tooltip effect="dark" content="左侧菜单模式" placement="top" :show-after="200">
+				<div :class="['layout-item layout-left', { 'is-active': layout == 'left' }]" @click="setLayout('left')">
 					<div class="layout-dark"></div>
 					<div class="layout-container">
 						<div class="layout-light"></div>
 						<div class="layout-content"></div>
 					</div>
-					<el-icon v-if="layout == 'classic'">
+					<el-icon v-if="layout == 'left'">
 						<CircleCheckFilled />
 					</el-icon>
 				</div>
 			</el-tooltip>
-			<el-tooltip effect="dark" content="顶部菜单模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]" @click="setLayout('transverse')">
+			<el-tooltip effect="dark" content="左侧菜单混合模式" placement="top" :show-after="200">
+				<div :class="['layout-item layout-leftMix', { 'is-active': layout == 'leftMix' }]" @click="setLayout('leftMix')">
 					<div class="layout-dark"></div>
+					<div class="layout-light"></div>
 					<div class="layout-content"></div>
-					<el-icon v-if="layout == 'transverse'">
+					<el-icon v-if="layout == 'leftMix'">
 						<CircleCheckFilled />
 					</el-icon>
 				</div>
 			</el-tooltip>
-			<el-tooltip effect="dark" content="左侧菜单模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
+			<el-tooltip effect="dark" content="顶部菜单模式" placement="top" :show-after="200">
+				<div :class="['layout-item layout-top', { 'is-active': layout == 'top' }]" @click="setLayout('top')">
 					<div class="layout-dark"></div>
-					<div class="layout-container">
-						<div class="layout-light"></div>
-						<div class="layout-content"></div>
-					</div>
-					<el-icon v-if="layout == 'vertical'">
+					<div class="layout-content"></div>
+					<el-icon v-if="layout == 'top'">
 						<CircleCheckFilled />
 					</el-icon>
 				</div>
 			</el-tooltip>
-			<el-tooltip effect="dark" content="左侧菜单混合模式" placement="top" :show-after="200">
-				<div :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]" @click="setLayout('columns')">
+			<el-tooltip effect="dark" content="顶部菜单混合模式" placement="top" :show-after="200">
+				<div :class="['layout-item layout-topMix', { 'is-active': layout == 'topMix' }]" @click="setLayout('topMix')">
 					<div class="layout-dark"></div>
-					<div class="layout-light"></div>
-					<div class="layout-content"></div>
-					<el-icon v-if="layout == 'columns'">
+					<div class="layout-container">
+						<div class="layout-light"></div>
+						<div class="layout-content"></div>
+					</div>
+					<el-icon v-if="layout == 'topMix'">
 						<CircleCheckFilled />
 					</el-icon>
 				</div>
@@ -309,7 +309,7 @@ const setLayout = (val: LayoutType) => {
 		.is-active {
 			box-shadow: 0 0 0 2px var(--el-color-primary) !important;
 		}
-		.layout-vertical {
+		.layout-left {
 			display: flex;
 			justify-content: space-between;
 			margin-bottom: 20px;
@@ -329,7 +329,7 @@ const setLayout = (val: LayoutType) => {
 				}
 			}
 		}
-		.layout-classic {
+		.layout-topMix {
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
@@ -349,7 +349,7 @@ const setLayout = (val: LayoutType) => {
 				}
 			}
 		}
-		.layout-transverse {
+		.layout-top {
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
@@ -361,7 +361,7 @@ const setLayout = (val: LayoutType) => {
 				height: 67%;
 			}
 		}
-		.layout-columns {
+		.layout-leftMix {
 			display: flex;
 			justify-content: space-between;
 			margin-bottom: 15px;

src/layout/components/TagsView/index.vue

@@ -274,7 +274,8 @@ onMounted(() => {
 	width: 100%;
 	background-color: var(--el-bg-color);
 	//border-bottom: 1px solid #d8dce5;
-	border-bottom: 1px solid var(--el-border-color-light);
+	//border-bottom: 1px solid var(--el-border-color-light);
+	box-shadow: 0 1px 4px -1px var(--el-border-color-light);
 	//box-shadow: 0 1px 2px #00152914;
 	.tags-view__wrapper {
 		.tags-view__item {

src/layout/index.vue

@@ -15,17 +15,17 @@ import useStore from '@/store'
 // import { useGlobalStore } from "@/stores/modules/global";
 // import ThemeDrawer from './components/ThemeDrawer/index.vue'
 import RightPanel from '@/components/RightPanel/index.vue'
-import LayoutClassic from './LayoutClassic/index.vue'
-import LayoutTransverse from './LayoutTransverse/index.vue'
-import LayoutVertical from './LayoutVertical/index.vue'
-import LayoutColumns from './LayoutColumns/index.vue'
+import LayoutTop from './LayoutTop/index.vue'
+import LayoutTopMix from './LayoutTopMix/index.vue'
+import LayoutLeft from './LayoutLeft/index.vue'
+import LayoutLeftMix from './LayoutLeftMix/index.vue'
 import { Settings } from '@/layout/components'
 
 const LayoutComponents: Record<LayoutType, Component> = {
-	classic: LayoutClassic,
-	transverse: LayoutTransverse,
-	vertical: LayoutVertical,
-	columns: LayoutColumns
+	topMix: LayoutTopMix,
+	top: LayoutTop,
+	left: LayoutLeft,
+	leftMix: LayoutLeftMix
 }
 const { setting } = useStore()
 // const globalStore = useGlobalStore();

src/layout/layout_common.scss

@@ -1 +1,2 @@
-$header_height: 55px;
+$header_height: 55px;
+$header_index: 2;

src/settings.ts

@@ -16,8 +16,8 @@ const defaultSettingState: SettingState = {
 	// 展示底部
 	footer: true,
 	/** 布局模式 */
-	// 布局模式 (纵向：vertical | 经典：classic | 横向：transverse | 分栏：columns) // todo...
-	layout: 'classic',
+	// 布局模式 (左侧菜单模式：left | 左侧菜单混合模式：leftMix | 顶部菜单模式：top | 顶部菜单混合模式：topMix)
+	layout: 'left',
 	/** 界面功能 */
 	// 面包屑
 	breadcrumb: true,

src/store/interface/index.ts

@@ -1,4 +1,4 @@
-export type LayoutType = 'vertical' | 'classic' | 'transverse' | 'columns'
+export type LayoutType = 'left' | 'leftMix' | 'topMix' | 'top'
 
 export type AssemblySizeType = 'large' | 'default' | 'small'
 

src/styles/index.scss

@@ -131,4 +131,10 @@ div:focus {
 // table下 按钮集合的外壳样式
 .#{$prefix}button-wrap {
 	padding-bottom: 12px;
+}
+// hover下 背景转化为 带透明度的 --el-color-primary
+//.#{$prefix}hover-effect--bg {
+.le-hover-effect--bg {
+	cursor: pointer;
+	@include hover-bg-opacity();
 }

src/styles/mixins.scss

@@ -4,3 +4,29 @@
   padding: 0;
   border-radius: 6px;
 }
+
+// 背景定位left&right, 背景颜色, 背景透明度
+@mixin hover-bg-opacity($lr: 0, $bgColor: var(--el-color-primary), $opacity: 0.08) {
+	position: relative;
+	transition: background 0.3s;
+	&::before {
+		z-index: auto;
+		content: '';
+		background-color: #0000;
+		opacity: $opacity;
+		position: absolute;
+		left: $lr;
+		right: $lr;
+		top: 0;
+		bottom: 0;
+		pointer-events: none;
+		border-radius: 3px;
+		transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	&:hover {
+		//background: var(--el-fill-color);
+		&::before {
+			background-color: $bgColor;
+		}
+	}
+}

src/styles/sidebar.scss

@@ -1,11 +1,12 @@
+@import "mixins";
 :root {
 	--el-menu-item-height: 42px;
 	--el-menu-sub-item-height: 42px;
 	--el-menu-hover-bg-color: transparent;
 }
-$active_bg: var(--el-color-primary);
+$active_color: var(--el-menu-active-color);
 // 公用的 菜单样式
-.layout-menu-wrap, .layout-menu-popper-wrap {
+.layout-menu-wrap, .layout-menu-popper-wrap, .layout-wrap--columns {
 	// 折叠情况
 	&.el-menu--collapse {
 		.menu-icon {
@@ -23,7 +24,8 @@ $active_bg: var(--el-color-primary);
 	.el-sub-menu {
 		&.is-active {
 			& > .el-sub-menu__title {
-				color: var(--el-menu-active-color);
+				//color: var(--el-menu-active-color);
+				color: $active_color;
 			}
 		}
 	}
@@ -31,298 +33,44 @@ $active_bg: var(--el-color-primary);
 	.el-sub-menu__title {
 		margin-top: 5px;
 	}
-	.el-menu-item.is-active::before {
-		background-color: $active_bg;
+	.el-menu-item.is-active {
+		color: $active_color;
+		&::before {
+			background-color: $active_color;
+		}
 	}
 	.el-menu-item:hover {
 		&::before {
-			background-color: $active_bg;
+			background-color: $active_color;
 		}
 	}
 	.el-sub-menu__title:hover {
 		&::before {
-			background-color: $active_bg;
+			background-color: $active_color;
 		}
 	}
-	.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);
+	.el-menu-item,
+	.el-sub-menu__title {
+		@include hover-bg-opacity(8px, $active_color);
 	}
 }
-/*#app {
-	// rgba(243, 243, 245);
-	.main-container {
-		min-height: 100%;
-		height: 100%;
-		transition: margin-left 0.28s;
-		margin-left: $sideBarWidth;
-		position: relative;
-	}
-
-	.sidebar-container {
-		transition: width 0.28s;
-		width: $sideBarWidth !important;
-		background-color: var(--el-menu-bg-color); // todo
-		height: 100%;
-		position: fixed;
-		font-size: 0px;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 1001;
-		overflow: hidden;
-		box-shadow: 2px 0 8px #1d23290d;
-
-		// reset element-plus css
-		.horizontal-collapse-transition {
-			transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
-		}
-
-		.scrollbar-wrapper {
-			overflow-x: hidden !important;
-		}
-
-		.el-scrollbar__bar.is-vertical {
-			right: 0px;
-		}
-
-		.el-scrollbar {
-			height: 100%;
-		}
-
-		&.has-logo {
-			.el-scrollbar {
-				height: calc(100% - 50px);
-			}
-		}
-
-		.is-horizontal {
-			display: none;
-		}
-
-		a {
-			display: inline-block;
-			width: 100%;
-			overflow: hidden;
-		}
 
-		.menu-icon {
-			margin-right: 16px;
-		}
-
-		.sub-el-icon {
-			margin-right: 12px;
-			margin-left: -2px;
-		}
-
-		.el-menu {
-			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: 5px;
-			}
-			.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,
-		.el-sub-menu__title {
-			&:hover {
-				//background-color: $menuHover !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;
-
-			//&:hover {
-			//	// background-color: $subMenuHover !important;
-			//}
-		}
-	}
-
-	.hideSidebar {
-		.sidebar-container {
-			width: 54px !important;
-			.svg-icon {
-				margin-right: 0px;
-			}
-		}
-
-		.main-container {
-			margin-left: 54px;
-		}
-
-		.submenu-title-noDropdown {
-			padding: 0 !important;
-			position: relative;
-
-			.el-tooltip {
-				padding: 0 !important;
-
-				.svg-icon {
-					margin-left: 20px;
-				}
-
-				.sub-el-icon {
-					margin-left: 19px;
-				}
-			}
-		}
-
-		.el-sub-menu {
-			overflow: hidden;
-
-			& > .el-sub-menu__title {
-				padding: 0 !important;
-
-				!*.svg-icon {
-					margin-left: 20px;
-				}*!
-
-				.sub-el-icon {
-					margin-left: 19px;
-				}
-
-				.el-sub-menu__icon-arrow {
-					display: none;
-				}
-			}
-		}
-
-		.el-menu--collapse {
-			.el-sub-menu {
-				& > .el-sub-menu__title {
-					& > span {
-						height: 0;
-						width: 0;
-						overflow: hidden;
-						visibility: hidden;
-						display: inline-block;
-					}
-				}
-			}
-		}
-	}
-
-	.el-menu--collapse .el-menu .el-sub-menu {
-		min-width: $sideBarWidth !important;
-	}
-
-	// mobile responsive
-	.mobile {
-		.main-container {
-			margin-left: 0px;
-		}
-
-		.sidebar-container {
-			transition: transform 0.28s;
-			width: $sideBarWidth !important;
-		}
-
-		&.hideSidebar {
-			.sidebar-container {
-				pointer-events: none;
-				transition-duration: 0.3s;
-				transform: translate3d(-$sideBarWidth, 0, 0);
-			}
-		}
-	}
-
-	.withoutAnimation {
-		.main-container,
-		.sidebar-container {
-			transition: none;
-		}
-	}
-}*/
-
-// when menu collapsed
+// 菜单折叠情况:
 // 由于 vertical collapsed 出现样式问题 进行隐藏
 .layout-menu-popper-wrap.el-menu--vertical,
 .layout-menu-popper-wrap.el-menu--horizontal {
-	// el-menu--horizontal: layout-transverse 模式
+	// el-menu--horizontal: layout-top 模式
 	// el-menu--vertical: layout-vertical 模式
 	& > .el-menu {
 		/*.svg-icon {
 			margin-right: 16px;
 		}*/
-		.sub-el-icon {
-			margin-right: 12px;
-			margin-left: -2px;
-		}
 	}
 
-	/*.nest-menu .el-sub-menu > .el-sub-menu__title,
-	.el-menu-item {
-		&:hover {
-			// you can use $subMenuHover
-			//background-color: $menuHover !important;
-		}
-	}*/
-
-	// the scroll bar appears when the subMenu is too long
+	// 子菜单太长时出现滚动条
 	> .el-menu--popup {
 		max-height: 100vh;
-		//overflow-y: auto;
+		overflow-y: auto;
 		& > li:first-child {
 			margin-top: 0;
 		}

src/styles/theme/aside.ts

@@ -2,15 +2,12 @@ import { Theme } from '@/hooks/interface'
 
 export const asideTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
 	light: {
-		'--el-aside-logo-text-color': '#303133',
 		'--el-aside-border-color': '#e4e7ed'
 	},
 	inverted: {
-		'--el-aside-logo-text-color': '#dadada',
 		'--el-aside-border-color': '#414243'
 	},
 	dark: {
-		'--el-aside-logo-text-color': '#dadada',
 		'--el-aside-border-color': '#414243'
 	}
 }

src/styles/theme/menu.ts

@@ -15,7 +15,7 @@ export const menuTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
 		// '--el-menu-hover-bg-color': '#000000',
 		'--el-menu-active-bg-color': '#000000',
 		'--el-menu-text-color': '#bdbdc0',
-		'--el-menu-active-color': '#ffffff',
+		'--el-menu-active-color': 'var(--el-color-primary)',
 		'--el-menu-hover-text-color': '#ffffff',
 		'--el-menu-horizontal-sub-item-height': '50px'
 	},
@@ -24,7 +24,7 @@ export const menuTheme: Record<Theme.ThemeType, { [key: string]: string }> = {
 		// '--el-menu-hover-bg-color': '#000000',
 		'--el-menu-active-bg-color': '#000000',
 		'--el-menu-text-color': '#bdbdc0',
-		'--el-menu-active-color': '#ffffff',
+		'--el-menu-active-color': 'var(--el-color-primary)',
 		'--el-menu-hover-text-color': '#ffffff',
 		'--el-menu-horizontal-sub-item-height': '50px'
 	}