From 7d92965cae9fde325a721ad85b49dfdfe79c7d43 Mon Sep 17 00:00:00 2001
From: IGCrystal <IGCrystal@wenturc.com>
Date: Thu, 12 Jun 2025 23:51:44 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../full/vertical-sidebar/VerticalSidebar.vue | 36 +++++-----
 dashboard/src/scss/layout/_sidebar.scss       | 66 ++++++++++++++++++-
 2 files changed, 82 insertions(+), 20 deletions(-)

diff --git a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
index 82f160746..70c5d5d82 100644
--- a/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
+++ b/dashboard/src/layouts/full/vertical-sidebar/VerticalSidebar.vue
@@ -160,25 +160,23 @@ function endDrag() {
     width="220"
     :rail="customizer.mini_sidebar"
   >
-    <v-list class="pa-4 listitem" style="height: auto;">
-      <template v-for="(item, i) in sidebarMenu" :key="i">
-        <NavItem :item="item" class="leftPadding" />
-      </template>
-    </v-list>
-    <div style="position: absolute; bottom: 16px; width: 100%; font-size: 13px;" class="text-center">
-      <v-btn style="margin-bottom: 8px;" size="small" variant="primary" v-if="!customizer.mini_sidebar" to="/settings">
-        🔧 设置
-      </v-btn>
-      <br/>
-      <v-btn style="margin-bottom: 8px;" size="small" variant="plain" v-if="!customizer.mini_sidebar" @click="toggleIframe">
-        官方文档
-      </v-btn>
-      <br/>
-      <v-btn style="margin-bottom: 8px;" size="small" variant="plain" v-if="!customizer.mini_sidebar" @click="openIframeLink('https://github.com/AstrBotDevs/AstrBot')">
-        GitHub
-      </v-btn>
-      <br/>
-      
+    <div class="sidebar-container">
+      <v-list class="pa-4 listitem flex-grow-1">
+        <template v-for="(item, i) in sidebarMenu" :key="i">
+          <NavItem :item="item" class="leftPadding" />
+        </template>
+      </v-list>
+      <div class="sidebar-footer" v-if="!customizer.mini_sidebar">
+        <v-btn style="margin-bottom: 8px;" size="small" variant="primary" to="/settings">
+          🔧 设置
+        </v-btn>
+        <v-btn style="margin-bottom: 8px;" size="small" variant="plain" @click="toggleIframe">
+          官方文档
+        </v-btn>
+        <v-btn style="margin-bottom: 8px;" size="small" variant="plain" @click="openIframeLink('https://github.com/AstrBotDevs/AstrBot')">
+          GitHub
+        </v-btn>
+      </div>
     </div>
   </v-navigation-drawer>
   
diff --git a/dashboard/src/scss/layout/_sidebar.scss b/dashboard/src/scss/layout/_sidebar.scss
index e530d7f30..032af62a1 100644
--- a/dashboard/src/scss/layout/_sidebar.scss
+++ b/dashboard/src/scss/layout/_sidebar.scss
@@ -4,7 +4,7 @@
   box-shadow: none !important;
 }
 .listitem {
-  height: calc(100vh - 100px);
+  overflow-y: auto;
   .v-list {
     color: rgb(var(--v-theme-secondaryText));
   }
@@ -16,6 +16,39 @@
       color: rgb(var(--v-theme-secondary));
     }
   }
+}
+
+// 深色主题下的侧边栏悬停和选中样式
+.v-theme--PurpleThemeDark .leftSidebar {
+  .listitem {
+    .v-list-group__items .v-list-item,
+    .v-list-item {
+      &:hover {
+        color: #b794f6 !important;
+        
+        .v-list-item-title {
+          color: #b794f6 !important;
+        }
+        
+        .v-icon {
+          color: #b794f6 !important;
+        }
+      }
+      
+      // 选中状态的样式
+      &.v-list-item--active {
+        color: #b794f6 !important;
+        
+        .v-list-item-title {
+          color: #b794f6 !important;
+        }
+        
+        .v-icon {
+          color: #b794f6 !important;
+        }
+      }
+    }
+  }
   .v-list-item--density-default.v-list-item--one-line {
     min-height: 42px;
   }
@@ -52,3 +85,34 @@
     }
   }
 }
+
+// 新的flex布局样式
+.leftSidebar {
+  .sidebar-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    
+    .flex-grow-1 {
+      flex: 1 1 auto;
+      overflow-y: auto;
+    }
+    
+    .sidebar-footer {
+      padding: 16px;
+      background: inherit;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      font-size: 13px;
+      text-align: center;
+      flex-shrink: 0;
+      
+      .v-btn {
+        width: 100%;
+        max-width: 180px;
+        margin-bottom: 8px !important;
+      }
+    }
+  }
+}