From fdd689daf5cf4c2083e6160d932d70e91bad46e1 Mon Sep 17 00:00:00 2001
From: BirtYu <714851131@qq.com>
Date: 星期日, 13 四月 2025 22:51:38 +0800
Subject: [PATCH] Merge pull request #59 from zhitan-cloud/jiayu1.0
---
zhitan-vue/src/layout/components/Sidebar/index.vue | 165 +++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 142 insertions(+), 23 deletions(-)
diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index 68596a6..658fc19 100644
--- a/zhitan-vue/src/layout/components/Sidebar/index.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/index.vue
@@ -5,9 +5,8 @@
class="sidebar-container-wrapper"
>
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper" view-class="scrollbar-view">
- <!-- 棣栭〉鏃朵笉鏄剧ず浠讳綍鑿滃崟椤� -->
+ <!-- 濮嬬粓鏄剧ず鑿滃崟椤癸紝涓嶅啀鏍规嵁璺緞鍒ゆ柇 -->
<el-menu
- v-if="!isHomePage"
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="'transparent'"
@@ -18,15 +17,24 @@
mode="vertical"
class="custom-menu"
>
- <sidebar-item
- v-for="(route, index) in sidebarRouters"
- :key="route.path + index"
- :item="route"
- :base-path="route.path"
- />
+ <!-- 褰撳墠鏄椤电湅鏉垮瓙璺敱鏃讹紝娓叉煋涓撶敤璺敱 -->
+ <template v-if="isIndexSubRoute">
+ <sidebar-item
+ v-for="(route, index) in indexPageRouters"
+ :key="route.path + index"
+ :item="route"
+ :base-path="route.path"
+ />
+ </template>
+ <template v-else>
+ <sidebar-item
+ v-for="(route, index) in sidebarRouters"
+ :key="route.path + index"
+ :item="route"
+ :base-path="route.path"
+ />
+ </template>
</el-menu>
- <!-- 棣栭〉鏃剁殑绌虹櫧鍖哄煙 -->
- <div v-else class="home-empty-menu"></div>
</el-scrollbar>
<!-- 搴曢儴鐢ㄦ埛鍖哄煙 -->
@@ -95,19 +103,21 @@
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
-// 鍒ゆ柇褰撳墠鏄惁涓洪椤�
-const isHomePage = computed(() => {
- return route.path === '/index' || route.path === '/' || route.fullPath.startsWith('/index')
+// 鍒ゆ柇褰撳墠鏄惁涓洪椤靛瓙璺敱(/index/index)
+const isIndexSubRoute = computed(() => {
+ return route.path === '/index/index'
})
-// 棣栭〉涓撶敤璺敱锛屽彧鏈夐椤典竴涓彍鍗曢」
-const homePageRouters = computed(() => {
- // 浠庡師濮嬭矾鐢变腑绛涢�夊嚭棣栭〉璺敱
- const homeRoute = sidebarRouters.value.find(route => {
- return route.children && route.children.find(child => child.path === '/index')
- })
-
- return homeRoute ? [homeRoute] : []
+// 鍒ゆ柇褰撳墠鏄惁涓轰富棣栭〉璺敱(/index鎴�/)
+const isMainIndexRoute = computed(() => {
+ return route.path === '/index' || route.path === '/'
+})
+
+// 棣栭〉涓撶敤璺敱锛岄椤电湅鏉跨浉鍏宠彍鍗�
+const indexPageRouters = computed(() => {
+ // 鏌ユ壘name涓篒ndex鐨勮矾鐢�
+ const indexRoute = sidebarRouters.value.find(route => route.name === 'Index')
+ return indexRoute ? [indexRoute] : []
})
const showLogo = computed(() => settingsStore.sidebarLogo)
@@ -162,12 +172,13 @@
}
:deep(.scrollbar-wrapper) {
- height: calc(100% - 290px) !important;
+ height: calc(100% - 220px) !important;
overflow-x: hidden !important;
}
:deep(.scrollbar-view) {
height: 100%;
+ padding-bottom: 20px;
}
:deep(.el-scrollbar__bar.is-vertical) {
@@ -200,6 +211,12 @@
&.is-active {
background-color: #3883FA !important;
color: #fff !important;
+ font-weight: bold;
+ position: relative;
+ box-shadow: 0 2px 8px rgba(56, 131, 250, 0.5);
+
+ // 宸︿晶鎸囩ず鏉�
+
}
&:hover {
@@ -221,6 +238,13 @@
}
}
+ &.is-active {
+ > .el-sub-menu__title {
+ color: #3883FA !important;
+ font-weight: bold;
+ }
+ }
+
.el-menu-item {
padding-left: 45px !important;
min-width: auto !important;
@@ -237,6 +261,28 @@
height: 38px !important;
line-height: 38px !important;
}
+
+ // Add styling for deeply nested submenus (level 3+)
+ .el-sub-menu {
+ .el-menu-item {
+ padding-left: 65px !important;
+
+ &.is-active {
+ padding-left: 65px !important;
+ }
+ }
+
+ // Level 4
+ .el-menu {
+ .el-menu-item {
+ padding-left: 85px !important;
+
+ &.is-active {
+ padding-left: 85px !important;
+ }
+ }
+ }
+ }
}
}
}
@@ -250,7 +296,7 @@
// 搴曢儴鐢ㄦ埛鍖哄煙鏍峰紡
.sidebar-footer {
position: absolute;
- bottom: 72px;
+ bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
@@ -425,6 +471,62 @@
}
}
+// 娣诲姞娣辫壊妯″紡涓撶敤鏍峰紡
+.theme-dark {
+ :deep(.custom-menu) {
+ // Override Element Plus menu styles for dark theme
+ .el-menu-item {
+ &.is-active {
+ background-color: #4e77f8 !important;
+ color: #ffffff !important;
+ font-weight: bold;
+ box-shadow: 0 2px 10px rgba(78, 119, 248, 0.6);
+ position: relative;
+
+ // 宸︿晶鎸囩ず鏉�
+
+ }
+
+ &:hover {
+ background-color: rgba(78, 119, 248, 0.2) !important;
+ }
+ }
+
+ .el-sub-menu {
+ &.is-active {
+ > .el-sub-menu__title {
+ color: #4e77f8 !important;
+ font-weight: bold;
+ }
+ }
+
+ .el-sub-menu__title {
+ &:hover {
+ background-color: rgba(78, 119, 248, 0.2) !important;
+ }
+ }
+
+ // 宓屽瀛愯彍鍗曟牱寮�
+ .el-menu {
+ .el-menu-item {
+ &.is-active {
+ background-color: #4e77f8 !important;
+ color: #ffffff !important;
+ }
+ }
+
+ .el-sub-menu {
+ &.is-active {
+ > .el-sub-menu__title {
+ color: #4e77f8 !important;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
// Add global style to override Element Plus defaults
:global(.el-menu--vertical .el-menu-item),
:global(.el-menu--vertical .el-sub-menu__title) {
@@ -475,4 +577,21 @@
outline: none;
}
}
+
+// 娣辫壊妯″紡涓嬫姌鍙犺彍鍗曠殑鏍峰紡
+.theme-dark {
+ :deep(.custom-menu.el-menu--collapse) {
+ .el-menu-item, .el-sub-menu__title {
+ &.is-active {
+ background-color: #4e77f8 !important;
+ color: #ffffff !important;
+ box-shadow: 0 2px 8px rgba(78, 119, 248, 0.6);
+ }
+
+ &:hover {
+ background-color: rgba(78, 119, 248, 0.2) !important;
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.3