Merge pull request #88 from OrzMiku/main

feat: 移动端适配
2025-07-31 22:03:24 +08:00
parent 734938b787 e3b110abd0
commit 124986baa4
14 changed files with 374 additions and 155 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/AppFooter.vue
+++ b/web/src/components/AppFooter.vue
@@ -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;
  }

--- 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/GroupFormModal.vue
+++ b/web/src/components/keys/GroupFormModal.vue
@@ -366,6 +366,10 @@ function handleConfigKeyChange(index: number, key: string) {
  }
 }

+const getConfigOption = (key: string) => {
+  return configOptions.value.find(opt => opt.key === key);
+};
+
 // 关闭弹窗
 function handleClose() {
  emit("update:show", false);
@@ -440,7 +444,7 @@ async function handleSubmit() {
 <template>
  <n-modal :show="show" @update:show="handleClose" class="group-form-modal">
    <n-card
-      style="width: 800px"
+      class="group-form-card"
      :title="group ? '编辑分组' : '创建分组'"
      :bordered="false"
      size="huge"
@@ -462,6 +466,7 @@ async function handleSubmit() {
        label-placement="left"
        label-width="120px"
        require-mark-placement="right-hanging"
+        class="group-form"
      >
        <!-- 基础信息 -->
        <div class="form-section">
@@ -677,9 +682,14 @@ async function handleSubmit() {
              </div>
              <div class="upstream-weight">
                <span class="weight-label">权重</span>
-                <n-tooltip trigger="hover" placement="top">
+                <n-tooltip trigger="hover" placement="top" style="width: 100%">
                  <template #trigger>
-                    <n-input-number v-model:value="upstream.weight" :min="1" placeholder="权重" />
+                    <n-input-number
+                      v-model:value="upstream.weight"
+                      :min="1"
+                      placeholder="权重"
+                      style="width: 100%"
+                    />
                  </template>
                  负载均衡权重，数值越大被选中的概率越高。例如：权重为2的上游被选中的概率是权重为1的两倍
                </n-tooltip>
@@ -771,11 +781,16 @@ async function handleSubmit() {
                        />
                      </div>
                      <div class="config-value">
-                        <n-input-number
-                          v-model:value="configItem.value"
-                          placeholder="参数值"
-                          :precision="0"
-                        />
+                        <n-tooltip trigger="hover" placement="top">
+                          <template #trigger>
+                            <n-input-number
+                              v-model:value="configItem.value"
+                              placeholder="参数值"
+                              :precision="0"
+                            />
+                          </template>
+                          {{ getConfigOption(configItem.key)?.description || "设置此配置项的值" }}
+                        </n-tooltip>
                      </div>
                      <div class="config-actions">
                        <n-button
@@ -1106,4 +1121,49 @@ async function handleSubmit() {
  display: flex;
  justify-content: center;
 }
+
+@media (max-width: 768px) {
+  .group-form-card {
+    width: 100vw !important;
+  }
+
+  .group-form {
+    label-width: auto !important;
+  }
+
+  .form-row {
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .form-item-half {
+    width: 100%;
+  }
+
+  .section-title {
+    font-size: 0.9rem;
+  }
+
+  .upstream-row,
+  .config-item-content {
+    flex-direction: column;
+    gap: 8px;
+    align-items: stretch;
+  }
+
+  .upstream-weight {
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .config-value {
+    flex: 1;
+  }
+
+  .upstream-actions,
+  .config-actions {
+    justify-content: flex-end;
+  }
+}
 </style>
--- 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,8 +815,8 @@ function resetPage() {

 .keys-grid {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
 }

 .key-card {
@@ -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
@@ -235,80 +235,70 @@ function changePageSize(size: number) {
      <!-- 工具栏 -->
      <div class="toolbar">
        <div class="filter-section">
-          <!-- 第一行：基础筛选 -->
          <div class="filter-row">
-            <div class="filter-group">
-              <n-date-picker
-                v-model:value="filters.start_time"
-                type="datetime"
-                clearable
-                size="small"
-                placeholder="开始时间"
-                style="width: 180px"
-              />
-            </div>
-            <div class="filter-group">
-              <n-date-picker
-                v-model:value="filters.end_time"
-                type="datetime"
-                clearable
-                size="small"
-                placeholder="结束时间"
-                style="width: 180px"
-              />
-            </div>
-            <div class="filter-group">
-              <n-select
-                v-model:value="filters.is_success"
-                :options="successOptions"
-                size="small"
-                style="width: 166px"
-                @update:value="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.status_code"
-                placeholder="状态码"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.group_name"
-                placeholder="分组名"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.key_value"
-                placeholder="密钥"
-                size="small"
-                clearable
-                style="width: 166px"
-                @keyup.enter="handleSearch"
-              />
-            </div>
-          </div>
-
-          <!-- 第二行：详细筛选和操作 -->
-          <div class="filter-row">
-            <div class="filter-group">
-              <n-input
-                v-model:value="filters.error_contains"
-                placeholder="错误信息"
-                size="small"
-                clearable
-                style="width: 384px"
-                @keyup.enter="handleSearch"
-              />
+            <div class="filter-grid">
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.group_name"
+                  placeholder="分组名"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.key_value"
+                  placeholder="密钥"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.status_code"
+                  placeholder="状态码"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-select
+                  v-model:value="filters.is_success"
+                  :options="successOptions"
+                  size="small"
+                  @update:value="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-input
+                  v-model:value="filters.error_contains"
+                  placeholder="错误信息"
+                  size="small"
+                  clearable
+                  @keyup.enter="handleSearch"
+                />
+              </div>
+              <div class="filter-item">
+                <n-date-picker
+                  v-model:value="filters.start_time"
+                  type="datetime"
+                  clearable
+                  size="small"
+                  placeholder="开始时间"
+                />
+              </div>
+              <div class="filter-item">
+                <n-date-picker
+                  v-model:value="filters.end_time"
+                  type="datetime"
+                  clearable
+                  size="small"
+                  placeholder="结束时间"
+                />
+              </div>
            </div>
            <div class="filter-actions">
              <n-button ghost size="small" :disabled="loading" @click="handleSearch">
@@ -400,50 +390,47 @@ function changePageSize(size: number) {

 .filter-row {
  display: flex;
-  align-items: center;
-  gap: 24px;
  flex-wrap: wrap;
+  align-items: flex-end; /* Aligns buttons with the bottom of the filter items */
+  gap: 16px;
 }

-.filter-group {
+.filter-grid {
  display: flex;
-  align-items: center;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 12px;
+  flex: 1 1 auto; /* Let it take available space and wrap */
 }

-.filter-label {
-  font-size: 13px;
-  color: #666;
-  white-space: nowrap;
-  min-width: 50px;
-}
-
-.filter-separator {
-  font-size: 12px;
-  color: #999;
-  margin: 0 4px;
+.filter-item {
+  flex: 1 1 180px; /* Each item will have a base width of 180px and can grow */
+  min-width: 180px; /* Prevent from becoming too narrow */
 }

 .filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
-  margin-left: auto;
 }

-@media (max-width: 1200px) {
-  .filter-row {
-    gap: 16px;
-  }
-
-  .filter-group {
-    min-width: auto;
+@media (max-width: 768px) {
+  .pagination-container {
+    flex-direction: column;
+    gap: 12px;
  }
+}

+@media (max-width: 480px) {
  .filter-actions {
-    margin-left: 0;
+    width: 100%;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .filter-actions .n-button {
+    width: 100%;
  }
 }
+
 .table-main {
  background: white;
  border-radius: 8px;
@@ -453,7 +440,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>