From 3933d3aa143e87f92387d2c3a31f65c192685efc Mon Sep 17 00:00:00 2001
From: AliooWang <64893838+AliooWang@users.noreply.github.com>
Date: 星期日, 13 四月 2025 14:05:15 +0800
Subject: [PATCH] Merge pull request #58 from zhitan-cloud/jiayu1.0

---
 zhitan-vue/src/layout/components/Sidebar/index.vue |   87 +++++++++++++++++++++++++++++++++++++++++--
 1 files changed, 83 insertions(+), 4 deletions(-)

diff --git a/zhitan-vue/src/layout/components/Sidebar/index.vue b/zhitan-vue/src/layout/components/Sidebar/index.vue
index 603f4f2..68596a6 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,40 @@
 }
 </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% - 290px) !important;
+  overflow-x: hidden !important;
+}
+
+:deep(.scrollbar-view) {
+  height: 100%;
+}
+
+: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 +195,7 @@
     border-radius: 4px; 
     margin: 4px 10px;
     width: calc(100% - 20px);
+    transition: all 0.2s ease;
     
     &.is-active {
       background-color: #3883FA !important;
@@ -181,6 +214,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;
@@ -209,7 +243,8 @@
 
 // 棣栭〉绌虹櫧鑿滃崟鍖哄煙鏍峰紡
 .home-empty-menu {
-  height: calc(100% - 150px);
+  height: auto;
+  min-height: 100px;
 }
 
 // 搴曢儴鐢ㄦ埛鍖哄煙鏍峰紡
@@ -396,4 +431,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