优化admin-gui

frontend/src/layouts/AdminLayout.vue

@@ -1,7 +1,21 @@
 <script setup lang="ts">
-import { ChatDotRound, DataLine, Document, DocumentChecked, Operation, ScaleToOriginal, Shop, SwitchButton, Tickets, User, Wallet } from '@element-plus/icons-vue'
+import {
+  ChatDotRound,
+  DataLine,
+  Document,
+  DocumentChecked,
+  Operation,
+  Fold,
+  Expand,
+  ScaleToOriginal,
+  Shop,
+  SwitchButton,
+  Tickets,
+  User,
+  Wallet
+} from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { logoutAdmin } from '@/api/adminAuth'
@@ -9,6 +23,7 @@ import { useAdminSessionStore } from '@/stores/adminSession'
 
 const router = useRouter()
 const adminSession = useAdminSessionStore()
+const isCollapsed = ref(false)
 
 const navItems = [
   { label: '仪表盘', to: '/admin/dashboard', icon: DataLine },
@@ -38,17 +53,23 @@ async function handleLogout() {
 </script>
 
 <template>
-  <div class="admin-shell">
+  <div class="admin-shell" :class="{ 'admin-shell--collapsed': isCollapsed }">
     <aside class="admin-sidebar">
-      <RouterLink class="admin-brand" to="/admin/dashboard">
-        <span class="brand-mark">H</span>
-        <span>哈夫币后台</span>
-      </RouterLink>
+      <div class="admin-sidebar-header">
+        <RouterLink class="admin-brand" to="/admin/dashboard">
+          <span class="brand-mark">H</span>
+          <span class="brand-text">哈夫币后台</span>
+        </RouterLink>
+        <el-icon class="collapse-btn" @click="isCollapsed = !isCollapsed">
+          <Fold v-if="!isCollapsed" />
+          <Expand v-else />
+        </el-icon>
+      </div>
 
       <nav class="admin-nav">
         <RouterLink v-for="item in navItems" :key="item.to" class="admin-nav-link" :to="item.to">
           <el-icon><component :is="item.icon" /></el-icon>
-          <span>{{ item.label }}</span>
+          <span class="nav-text">{{ item.label }}</span>
         </RouterLink>
       </nav>
     </aside>