🎈 perf: 优化侧边栏样式

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>
   

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;
+      }
+    }
+  }
+}