feat: redesign admin layout and stats dashboards

admin-frontend/src/layouts/AdminLayout.vue

@@ -162,21 +162,23 @@ async function go(path) {
             <span class="app-muted">管理员</span>
             <strong>{{ adminUsername || '-' }}</strong>
           </div>
-          <el-button type="primary" plain @click="logout">退出</el-button>
+          <el-button type="primary" plain class="logout-btn" @click="logout">退出</el-button>
         </div>
       </el-header>
 
       <el-main class="layout-main">
-        <Suspense>
-          <template #default>
-            <RouterView />
-          </template>
-          <template #fallback>
-            <el-card shadow="never" :body-style="{ padding: '16px' }" class="fallback-card">
-              <el-skeleton :rows="5" animated />
-            </el-card>
-          </template>
-        </Suspense>
+        <div class="main-shell">
+          <Suspense>
+            <template #default>
+              <RouterView />
+            </template>
+            <template #fallback>
+              <el-card shadow="never" :body-style="{ padding: '16px' }" class="fallback-card">
+                <el-skeleton :rows="5" animated />
+              </el-card>
+            </template>
+          </Suspense>
+        </div>
       </el-main>
     </el-container>
 
@@ -204,31 +206,58 @@ async function go(path) {
 }
 
 .layout-aside {
-  background: #ffffff;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
   border-right: 1px solid var(--app-border);
+  box-shadow: 4px 0 16px rgba(15, 23, 42, 0.04);
+}
+
+.brand,
+.drawer-brand {
+  padding: 18px 16px 14px;
 }
 
 .brand {
-  padding: 18px 16px 10px;
-}
-
-.drawer-brand {
-  padding: 18px 16px 10px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
 }
 
 .brand-title {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 800;
   letter-spacing: 0.2px;
 }
 
 .brand-sub {
-  margin-top: 2px;
+  margin-top: 4px;
   font-size: 12px;
 }
 
 .aside-menu {
   border-right: none;
+  padding: 8px;
+  background: transparent;
+}
+
+.aside-menu :deep(.el-menu-item) {
+  height: 42px;
+  line-height: 42px;
+  margin: 3px 0;
+  border-radius: 10px;
+  color: #334155;
+  font-weight: 600;
+}
+
+.aside-menu :deep(.el-menu-item .el-icon) {
+  margin-right: 10px;
+}
+
+.aside-menu :deep(.el-menu-item:hover) {
+  background: rgba(59, 130, 246, 0.08);
+  color: #1d4ed8;
+}
+
+.aside-menu :deep(.el-menu-item.is-active) {
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.1));
+  color: #1e40af;
 }
 
 .menu-label {
@@ -243,16 +272,22 @@ async function go(path) {
 }
 
 .fallback-card {
-  border-radius: var(--app-radius);
+  min-height: 160px;
+  border-radius: var(--app-radius-lg);
   border: 1px solid var(--app-border);
 }
 
 .layout-header {
+  position: sticky;
+  top: 0;
+  z-index: 20;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  background: rgba(246, 247, 251, 0.6);
+  height: 58px;
+  padding: 0 18px;
+  background: rgba(255, 255, 255, 0.78);
   backdrop-filter: saturate(180%) blur(10px);
   border-bottom: 1px solid var(--app-border);
 }
@@ -265,7 +300,7 @@ async function go(path) {
 }
 
 .header-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 800;
   white-space: nowrap;
   overflow: hidden;
@@ -288,18 +323,33 @@ async function go(path) {
   align-items: baseline;
   gap: 8px;
   font-size: 13px;
+  color: #334155;
+}
+
+.admin-name strong {
+  color: #0f172a;
+  font-weight: 800;
+}
+
+.logout-btn {
+  min-width: 74px;
 }
 
 .layout-main {
-  padding: 16px;
+  padding: 18px;
+}
+
+.main-shell {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
 }
 
 @media (max-width: 768px) {
   .layout-header {
     flex-wrap: wrap;
     height: auto;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding: 10px 12px;
   }
 
   .header-right {