From 4745c48798fc7d967a7fd4416c10050d4f79fb98 Mon Sep 17 00:00:00 2001
From: birt <2499248221@qq.com>
Date: 星期日, 13 四月 2025 21:43:49 +0800
Subject: [PATCH] 123
---
zhitan-vue/src/layout/components/Sidebar/index.vue | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 107 insertions(+), 5 deletions(-)
diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index 603f4f2..fcb7d47 100644
--- a/zhitan-vue/src/layout/components/Sidebar/index.vue
+++ b/zhitan-vue/src/layout/components/Sidebar/index.vue
@@ -2,8 +2,9 @@
<div
:class="{ 'has-logo': showLogo }"
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
+ class="sidebar-container-wrapper"
>
- <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
+ <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper" view-class="scrollbar-view">
<!-- 棣栭〉鏃朵笉鏄剧ず浠讳綍鑿滃崟椤� -->
<el-menu
v-if="!isHomePage"
@@ -152,9 +153,41 @@
}
</script>
<style lang="scss" scoped>
-:deep(.custom-menu) {
+.sidebar-container-wrapper {
+ position: relative;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+}
+
+:deep(.scrollbar-wrapper) {
+ height: calc(100% - 220px) !important;
+ overflow-x: hidden !important;
+}
+
+:deep(.scrollbar-view) {
+ height: 100%;
+ padding-bottom: 20px;
+}
+
+:deep(.el-scrollbar__bar.is-vertical) {
+ right: 0;
+ width: 6px;
+}
+
+:deep(.el-scrollbar__thumb) {
+ background-color: rgba(144, 147, 153, 0.3);
+ &:hover {
+ background-color: rgba(144, 147, 153, 0.5);
+ }
+}
+
+.custom-menu {
+ width: 100%;
padding: 6px 0;
- height: calc(100% - 150px); // 鐣欏嚭搴曢儴鐢ㄦ埛鍖哄煙鐨勭┖闂�
+ height: auto !important; // 鏀逛负鑷�傚簲楂樺害锛岄伩鍏嶅浐瀹氶珮搴﹀鑷村唴瀹规孩鍑�
+ transition: all 0.3s ease;
// Override Element Plus default menu styles
.el-menu-item {
@@ -163,6 +196,7 @@
border-radius: 4px;
margin: 4px 10px;
width: calc(100% - 20px);
+ transition: all 0.2s ease;
&.is-active {
background-color: #3883FA !important;
@@ -181,6 +215,7 @@
border-radius: 4px;
margin: 4px 10px;
width: calc(100% - 20px);
+ transition: all 0.2s ease;
&:hover {
background-color: rgba(56, 131, 250, 0.1) !important;
@@ -203,19 +238,42 @@
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;
+ }
+ }
+ }
+ }
}
}
}
// 棣栭〉绌虹櫧鑿滃崟鍖哄煙鏍峰紡
.home-empty-menu {
- height: calc(100% - 150px);
+ height: auto;
+ min-height: 100px;
}
// 搴曢儴鐢ㄦ埛鍖哄煙鏍峰紡
.sidebar-footer {
position: absolute;
- bottom: 72px;
+ bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid rgba(255, 255, 255, 0.1);
@@ -396,4 +454,48 @@
height: 38px !important;
line-height: 38px !important;
}
+
+// Add styles for collapsed menu items
+:deep(.custom-menu.el-menu--collapse) {
+ width: 54px !important;
+
+ .el-menu-item, .el-sub-menu__title {
+ width: 36px !important;
+ min-width: 36px !important;
+ margin: 4px 9px !important; /* 9px鏄负浜嗙‘淇濆眳涓細(54px瀹� - 36px鑿滃崟椤�) / 2 = 9px */
+ padding: 0 !important;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 4px;
+
+ &.is-active {
+ background-color: #3883FA !important;
+ color: #fff !important;
+ box-shadow: 0 2px 6px rgba(56, 131, 250, 0.4);
+ transform: scale(0.95);
+ transition: all 0.2s ease;
+ }
+
+ .el-icon, .svg-icon {
+ margin: 0 !important;
+ font-size: 18px !important;
+
+ svg {
+ width: 1.2em;
+ height: 1.2em;
+ }
+ }
+
+ // 纭繚鎶樺彔鏃跺瓙鑿滃崟鐨勬爣棰樹篃灞呬腑瀵归綈
+ .el-sub-menu__icon-arrow {
+ display: none;
+ }
+ }
+
+ // 纭繚鎶樺彔鏃跺脊鍑虹殑瀛愯彍鍗曟湁姝ｇ‘鏍峰紡
+ .el-tooltip__trigger:focus:not(.focusing) {
+ outline: none;
+ }
+}
</style>
--
Gitblit v1.9.3