Merge pull request #88 from OrzMiku/main

feat: 移动端适配

Author: tbphp

web/package-lock.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/package.json

@@ -218,7 +218,7 @@ onMounted(() => {
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   padding: 12px 24px;
   font-size: 14px;
-  height: 52px;
+  min-height: 52px;
 }
 
 .footer-container {
@@ -231,7 +231,6 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   gap: 16px;
-  flex-wrap: wrap;
   line-height: 1.4;
 }
 
@@ -269,6 +268,7 @@ onMounted(() => {
   font-weight: 500;
   font-size: 13px;
   color: #666;
+  white-space: nowrap;
 }
 
 .version-clickable {
@@ -301,6 +301,7 @@ onMounted(() => {
   border-radius: 4px;
   transition: all 0.2s ease;
   font-size: 13px;
+  white-space: nowrap;
 }
 
 .footer-link:hover {
@@ -345,6 +346,7 @@ onMounted(() => {
 @media (max-width: 768px) {
   .app-footer {
     padding: 10px 16px;
+    height: auto;
   }
 
   .footer-main {
@@ -353,7 +355,7 @@ onMounted(() => {
     text-align: center;
   }
 
-  .divider {
+  .footer-main :deep(.n-divider) {
     display: none;
   }
 

web/src/components/AppFooter.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;

web/src/components/BaseInfoCard.vue

@@ -170,14 +170,23 @@ 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);
   border: 1px solid rgba(0, 0, 0, 0.08);
   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/GlobalTaskProgressBar.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/Layout.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 {