From 725da078afc3398f49f1efdc25bc82b9ec1dac35 Mon Sep 17 00:00:00 2001
From: DYL0109 <dn18191638832@163.com>
Date: 星期三, 16 四月 2025 19:27:30 +0800
Subject: [PATCH] Merge pull request #64 from zhitan-cloud/develop1.0
---
zhitan-vue/src/layout/components/Sidebar/index.vue | 138 +++++++++++++++++++++++++++++++++++++++-------
1 files changed, 117 insertions(+), 21 deletions(-)
diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index fcb7d47..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)
@@ -201,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 {
@@ -219,6 +235,13 @@
&:hover {
background-color: rgba(56, 131, 250, 0.1) !important;
+ }
+ }
+
+ &.is-active {
+ > .el-sub-menu__title {
+ color: #3883FA !important;
+ font-weight: bold;
}
}
@@ -448,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) {
@@ -498,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