feat(ui): 移动端适配

主要变化包括： - 实现了响应式主布局，带有可折叠的汉堡菜单，用于移动导航。 - 调整了仪表板、密钥管理和信息卡中的网格布局，使其在较小的屏幕上垂直堆叠内容。 - 使图表和数据表可水平滚动或使其元素换行，以防止溢出并保持可用性。 - 添加了 `@vueuse/core` 库，用于动态检测屏幕尺寸以实现响应式逻辑。 - 改进了各种组件（如按钮、字体和间距）的样式，以改善移动设备上的视觉层次结构。
2025-07-30 23:09:15 +08:00
parent 734938b787
commit 2dd6957ae9
12 changed files with 232 additions and 49 deletions
--- a/web/package-lock.json
+++ b/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",
--- a/web/package.json
+++ b/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",
--- a/web/src/components/BaseInfoCard.vue
+++ b/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;
-  height: 48px;
+  width: 40px;
+  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;
--- a/web/src/components/GlobalTaskProgressBar.vue
+++ b/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%);
--- a/web/src/components/Layout.vue
+++ b/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);
 }

--- a/web/src/components/LineChart.vue
+++ b/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 {
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -1,18 +1,37 @@
 <script setup lang="ts">
-import type { MenuOption } from "naive-ui";
-import { computed, h } from "vue";
+import { type MenuOption } from "naive-ui";
+import { computed, h, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";

-const menuOptions: MenuOption[] = [
-  renderMenuItem("dashboard", "仪表盘", "📊"),
-  renderMenuItem("keys", "密钥管理", "🔑"),
-  renderMenuItem("logs", "日志", "📋"),
-  renderMenuItem("settings", "系统设置", "⚙️"),
-];
+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) {
--- a/web/src/components/keys/GroupInfoCard.vue
+++ b/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 }}
--- a/web/src/components/keys/KeyTable.vue
+++ b/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>
--- a/web/src/components/logs/LogTable.vue
+++ b/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 {
--- a/web/src/views/Dashboard.vue
+++ b/web/src/views/Dashboard.vue
@@ -7,10 +7,8 @@ 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>
+      <base-info-card />
+      <line-chart class="dashboard-chart" />
    </n-space>
  </div>
 </template>
--- a/web/src/views/Keys.vue
+++ b/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>