feat(ui): 移动端适配

主要变化包括：
  - 实现了响应式主布局，带有可折叠的汉堡菜单，用于移动导航。
  - 调整了仪表板、密钥管理和信息卡中的网格布局，使其在较小的屏幕上垂直堆叠内容。
  - 使图表和数据表可水平滚动或使其元素换行，以防止溢出并保持可用性。
  - 添加了 `@vueuse/core` 库，用于动态检测屏幕尺寸以实现响应式逻辑。
  - 改进了各种组件（如按钮、字体和间距）的样式，以改善移动设备上的视觉层次结构。

web/package-lock.json

@@ -10,6 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "@vicons/ionicons5": "^0.13.0",
+        "@vueuse/core": "^13.6.0",
         "axios": "^1.9.0",
         "naive-ui": "^2.41.0",
         "vue": "^3.5.13",
@@ -1122,6 +1123,12 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.35.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.35.1.tgz",
@@ -1590,6 +1597,44 @@
         }
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.6.0.tgz",
+      "integrity": "sha512-DJbD5fV86muVmBgS9QQPddVX7d9hWYswzlf4bIyUD2dj8GC46R1uNClZhVAmsdVts4xb2jwp1PbpuiA50Qee1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.6.0",
+        "@vueuse/shared": "13.6.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.6.0.tgz",
+      "integrity": "sha512-rnIH7JvU7NjrpexTsl2Iwv0V0yAx9cw7+clymjKuLSXG0QMcLD0LDgdNmXic+qL0SGvgSVPEpM9IDO/wqo1vkQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.6.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.6.0.tgz",
+      "integrity": "sha512-pDykCSoS2T3fsQrYqf9SyF0QXWHmcGPQ+qiOVjlYSzlWd9dgppB2bFSM1GgKKkt7uzn0BBMV3IbJsUfHG2+BCg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",

web/package.json

@@ -4,7 +4,14 @@
   "version": "0.1.0",
   "description": "GPT Load Balancer Frontend - A modern Vue 3 frontend for GPT load balancing service",
   "type": "module",
-  "keywords": ["vue3", "typescript", "vite", "naive-ui", "gpt-load", "frontend"],
+  "keywords": [
+    "vue3",
+    "typescript",
+    "vite",
+    "naive-ui",
+    "gpt-load",
+    "frontend"
+  ],
   "author": "tbphp",
   "license": "MIT",
   "repository": {
@@ -32,6 +39,7 @@
   },
   "dependencies": {
     "@vicons/ionicons5": "^0.13.0",
+    "@vueuse/core": "^13.6.0",
     "axios": "^1.9.0",
     "naive-ui": "^2.41.0",
     "vue": "^3.5.13",

web/src/components/BaseInfoCard.vue

@@ -59,7 +59,7 @@ onMounted(() => {
 <template>
   <div class="stats-container">
     <n-space vertical size="medium">
-      <n-grid :cols="4" :x-gap="20" :y-gap="20" responsive="screen">
+      <n-grid cols="2 s:4" :x-gap="20" :y-gap="20" responsive="screen">
         <!-- 密钥数量 -->
         <n-grid-item span="1">
           <n-card :bordered="false" class="stat-card" style="animation-delay: 0s">
@@ -217,13 +217,13 @@ onMounted(() => {
 }
 
 .stat-icon {
-  width: 48px;
+  width: 40px;
-  height: 48px;
+  height: 40px;
   border-radius: var(--border-radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
   color: white;
   box-shadow: var(--shadow-md);
 }
@@ -262,7 +262,7 @@ onMounted(() => {
 }
 
 .stat-value {
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
   line-height: 1.2;
   color: #1e293b;

web/src/components/GlobalTaskProgressBar.vue

@@ -170,7 +170,8 @@ function getTaskTitle(): string {
   bottom: 62px;
   right: 10px;
   z-index: 9999;
-  width: 350px;
+  width: 95%;
+  max-width: 350px;
   background: white;
   border-radius: var(--border-radius-md);
   box-shadow: var(--shadow-lg);
@@ -178,6 +179,14 @@ function getTaskTitle(): string {
   animation: slideIn 0.3s ease-out;
 }
 
+@media (max-width: 768px) {
+  .global-task-progress {
+    bottom: 72px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
 @keyframes slideIn {
   from {
     transform: translateX(100%);

web/src/components/Layout.vue

@@ -3,6 +3,21 @@ import AppFooter from "@/components/AppFooter.vue";
 import GlobalTaskProgressBar from "@/components/GlobalTaskProgressBar.vue";
 import Logout from "@/components/Logout.vue";
 import NavBar from "@/components/NavBar.vue";
+import { useMediaQuery } from "@vueuse/core";
+import { ref, watch } from "vue";
+
+const isMenuOpen = ref(false);
+const isMobile = useMediaQuery("(max-width: 768px)");
+
+watch(isMobile, value => {
+  if (!value) {
+    isMenuOpen.value = false;
+  }
+});
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value;
+};
 </script>
 
 <template>
@@ -13,17 +28,33 @@ import NavBar from "@/components/NavBar.vue";
           <div class="brand-icon">
             <img src="@/assets/logo.png" alt="" />
           </div>
-          <h1 class="brand-title">GPT Load</h1>
+          <h1 v-if="!isMobile" class="brand-title">GPT Load</h1>
         </div>
 
-        <nav-bar class="header-nav" />
+        <nav v-if="!isMobile" class="header-nav">
+          <nav-bar />
+        </nav>
 
         <div class="header-actions">
-          <logout />
+          <logout v-if="!isMobile" />
+          <n-button v-else text @click="toggleMenu">
+            <svg viewBox="0 0 24 24" width="24" height="24">
+              <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+            </svg>
+          </n-button>
         </div>
       </div>
     </n-layout-header>
 
+    <n-drawer v-model:show="isMenuOpen" :width="240" placement="right">
+      <n-drawer-content title="GPT Load" body-content-style="padding: 0;">
+        <nav-bar mode="vertical" @close="isMenuOpen = false" />
+        <div class="mobile-actions">
+          <logout />
+        </div>
+      </n-drawer-content>
+    </n-drawer>
+
     <n-layout-content class="layout-content">
       <div class="content-wrapper">
         <router-view v-slot="{ Component }">
@@ -56,14 +87,14 @@ import NavBar from "@/components/NavBar.vue";
   position: sticky;
   top: 0;
   z-index: 100;
-  padding: 0 24px;
+  padding: 0 12px;
 }
 
 .header-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px;
+  padding: 8px 0;
   overflow-x: auto;
   max-width: 1200px;
   margin: 0 auto;
@@ -101,6 +132,13 @@ import NavBar from "@/components/NavBar.vue";
 
 .header-actions {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.mobile-actions {
+  padding: 12px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
 }
 
 .layout-content {
@@ -113,7 +151,7 @@ import NavBar from "@/components/NavBar.vue";
 }
 
 .content-wrapper {
-  padding: 24px 12px;
+  padding: 16px;
   min-height: calc(100vh - 111px);
 }
 

web/src/components/LineChart.vue

@@ -792,9 +792,34 @@ onMounted(() => {
     align-items: flex-start;
   }
 
+  .chart-wrapper {
+    flex-direction: column;
+    align-items: center;
+  }
+
   .chart-legend {
+    position: relative;
+    transform: none;
+    left: auto;
+    top: auto;
+    margin-top: 8px;
+    margin-bottom: 12px;
+    background: transparent;
+    backdrop-filter: none;
+    border: none;
+    width: 100%;
     flex-wrap: wrap;
-    gap: 16px;
+    gap: 8px;
+    justify-content: center;
+  }
+
+  .legend-item {
+    padding: 4px 10px;
+    font-size: 12px;
+    color: #333;
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    gap: 6px;
   }
 
   .chart-svg {

web/src/components/NavBar.vue

@@ -1,18 +1,37 @@
 <script setup lang="ts">
-import type { MenuOption } from "naive-ui";
+import { type MenuOption } from "naive-ui";
-import { computed, h } from "vue";
+import { computed, h, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 
-const menuOptions: MenuOption[] = [
+const props = defineProps({
+  mode: {
+    type: String,
+    default: "horizontal",
+  },
+});
+
+const emit = defineEmits(["close"]);
+
+const menuOptions = computed<MenuOption[]>(() => {
+  const options: MenuOption[] = [
     renderMenuItem("dashboard", "仪表盘", "📊"),
     renderMenuItem("keys", "密钥管理", "🔑"),
     renderMenuItem("logs", "日志", "📋"),
     renderMenuItem("settings", "系统设置", "⚙️"),
-];
+  ];
+
+  return options;
+});
 
 const route = useRoute();
 const activeMenu = computed(() => route.name);
 
+watch(activeMenu, () => {
+  if (props.mode === "vertical") {
+    emit("close");
+  }
+});
+
 function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   return {
     label: () =>
@@ -39,10 +58,9 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
 <template>
   <div>
     <n-menu
-      mode="horizontal"
+      :mode="mode"
       :options="menuOptions"
       :value="activeMenu"
-      responsive
       class="modern-menu"
     />
   </div>
@@ -61,24 +79,22 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   font-weight: 500;
 }
 
-:deep(.n-menu-item-content) {
-  padding: 0 10px !important;
-}
-
-:deep(.nav-item-text) {
-  font-size: 0.95rem;
-  letter-spacing: 0.2px;
-}
-
 :deep(.n-menu-item) {
   border-radius: var(--border-radius-md);
-  margin: 0 4px;
+}
-  transition: all 0.2s ease;
+
+:deep(.n-menu--vertical .n-menu-item-content) {
+  justify-content: center;
+}
+
+:deep(.n-menu--vertical .n-menu-item) {
+  margin: 4px 8px;
 }
 
 :deep(.n-menu-item:hover) {
   background: rgba(102, 126, 234, 0.1);
   transform: translateY(-1px);
+  border-radius: var(--border-radius-md);
 }
 
 :deep(.n-menu-item--selected) {
@@ -86,6 +102,7 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   color: white;
   font-weight: 600;
   box-shadow: var(--shadow-md);
+  border-radius: var(--border-radius-md);
 }
 
 :deep(.n-menu-item--selected:hover) {

web/src/components/keys/GroupInfoCard.vue

@@ -275,7 +275,7 @@ function resetPage() {
       <!-- 统计摘要区 -->
       <div class="stats-summary">
         <n-spin :show="loading" size="small">
-          <n-grid :cols="4" :x-gap="12" :y-gap="12" responsive="screen">
+          <n-grid cols="2 s:4" :x-gap="12" :y-gap="12" responsive="screen">
             <n-grid-item span="1">
               <n-statistic :label="`密钥数量：${stats?.key_stats?.total_keys ?? 0}`">
                 <n-tooltip trigger="hover">
@@ -379,7 +379,7 @@ function resetPage() {
               <div class="detail-section">
                 <h4 class="section-title">基础信息</h4>
                 <n-form label-placement="left" label-width="85px" label-align="right">
-                  <n-grid :cols="2">
+                  <n-grid cols="1 m:2">
                     <n-grid-item>
                       <n-form-item label="分组名称：">
                         {{ group?.name }}

web/src/components/keys/KeyTable.vue

@@ -815,7 +815,7 @@ function resetPage() {
 
 .keys-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 12px;
 }
 
@@ -1026,4 +1026,23 @@ function resetPage() {
   font-size: 12px;
   color: #6c757d;
 }
+
+@media (max-width: 768px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+
+  .toolbar-left,
+  .toolbar-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .toolbar-right .n-space {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
 </style>

web/src/components/logs/LogTable.vue

@@ -431,19 +431,32 @@ function changePageSize(size: number) {
   margin-left: auto;
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 768px) {
   .filter-row {
-    gap: 16px;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
   }
 
   .filter-group {
-    min-width: auto;
+    width: 100%;
+  }
+
+  .filter-group > * {
+    width: 100% !important;
   }
 
   .filter-actions {
-    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .pagination-container {
+    flex-direction: column;
+    gap: 12px;
   }
 }
+
 .table-main {
   background: white;
   border-radius: 8px;
@@ -453,7 +466,7 @@ function changePageSize(size: number) {
   /* background: white;
   border-radius: 8px; */
   flex: 1;
-  overflow: hidden;
+  overflow: auto;
   position: relative;
 }
 .empty-container {

web/src/views/Dashboard.vue

@@ -7,11 +7,9 @@ import { NSpace } from "naive-ui";
 <template>
   <div class="dashboard-container">
     <n-space vertical size="large">
-      <n-space vertical size="large" style="gap: 24px">
       <base-info-card />
       <line-chart class="dashboard-chart" />
     </n-space>
-    </n-space>
   </div>
 </template>
 

web/src/views/Keys.vue

@@ -106,14 +106,14 @@ function handleGroupDelete(deletedGroup: Group) {
 <style scoped>
 .keys-container {
   display: flex;
+  flex-direction: column;
   gap: 8px;
   width: 100%;
 }
 
 .sidebar {
-  width: 240px;
+  width: 100%;
   flex-shrink: 0;
-  height: calc(100vh - 159px);
 }
 
 .main-content {
@@ -133,4 +133,15 @@ function handleGroupDelete(deletedGroup: Group) {
   flex-direction: column;
   min-height: 0;
 }
+
+@media (min-width: 768px) {
+  .keys-container {
+    flex-direction: row;
+  }
+
+  .sidebar {
+    width: 240px;
+    height: calc(100vh - 159px);
+  }
+}
 </style>