From e5cd8f7b346252a7a27ee8f975c88dbae7a6331b Mon Sep 17 00:00:00 2001
From: hptangxi <hptangxi@yeah.net>
Date: Sun, 6 Jul 2025 10:54:46 +0800
Subject: [PATCH] fix nav

---
 web/src/components/Layout.vue              | 67 +---------------------
 web/src/components/NavBar.vue              | 44 ++++----------
 web/src/components/keys/GroupFormModal.vue | 20 ++++---
 3 files changed, 24 insertions(+), 107 deletions(-)

diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue
index 6faf2de..0a18b57 100644
--- a/web/src/components/Layout.vue
+++ b/web/src/components/Layout.vue
@@ -10,15 +10,6 @@ import NavBar from "@/components/NavBar.vue";
         <div class="header-brand">
           <div class="brand-icon">
             <img src="@/assets/logo.png" width="50" alt="" />
-            <!-- <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
-              <path
-                d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg> -->
           </div>
           <h1 class="brand-title">GPT Load</h1>
         </div>
@@ -45,7 +36,6 @@ import NavBar from "@/components/NavBar.vue";
 
 <style scoped>
 .main-layout {
-  /* height: 100vh; */
   background: transparent;
 }
 
@@ -66,8 +56,8 @@ import NavBar from "@/components/NavBar.vue";
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 100%;
-  padding: 0 8px;
+  padding: 8px;
+  overflow-x: auto;
 }
 
 .header-brand {
@@ -83,10 +73,6 @@ import NavBar from "@/components/NavBar.vue";
   justify-content: center;
   width: 40px;
   height: 40px;
-  /* background: var(--primary-gradient);
-  border-radius: var(--border-radius-md);
-  color: white;
-  box-shadow: var(--shadow-md); */
 }
 
 .brand-title {
@@ -100,19 +86,8 @@ import NavBar from "@/components/NavBar.vue";
   letter-spacing: -0.3px;
 }
 
-.header-nav {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  max-width: 600px;
-  display: flex;
-  justify-content: center;
-}
-
 .header-actions {
   flex-shrink: 0;
-  margin-left: auto;
 }
 
 .layout-content {
@@ -126,42 +101,4 @@ import NavBar from "@/components/NavBar.vue";
   margin: 0 auto;
   padding: 24px 12px;
 }
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .header-content {
-    padding: 0 4px;
-  }
-
-  .brand-title {
-    font-size: 1.2rem;
-  }
-
-  .content-wrapper {
-    padding: 16px;
-  }
-
-  .header-nav {
-    display: none;
-  }
-}
-
-@media (max-width: 480px) {
-  .brand-title {
-    display: none;
-  }
-
-  .content-wrapper {
-    padding: 12px;
-  }
-}
-
-:deep(.n-layout-header) {
-  height: 64px;
-  padding: 0;
-}
-
-:deep(.n-layout-content) {
-  padding: 0;
-}
 </style>
diff --git a/web/src/components/NavBar.vue b/web/src/components/NavBar.vue
index 04ac530..a92df6f 100644
--- a/web/src/components/NavBar.vue
+++ b/web/src/components/NavBar.vue
@@ -37,34 +37,32 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
 </script>
 
 <template>
-  <div class="navbar-container">
-    <n-menu mode="horizontal" :options="menuOptions" :value="activeMenu" class="modern-menu" />
+  <div>
+    <n-menu
+      mode="horizontal"
+      :options="menuOptions"
+      :value="activeMenu"
+      responsive
+      class="modern-menu"
+    />
   </div>
 </template>
 
 <style scoped>
-.navbar-container {
-  flex: 1;
-  display: flex;
-  max-width: 600px;
-}
-
 :deep(.nav-menu-item) {
   display: flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   color: inherit;
-  padding: 8px 16px;
+  padding: 8px;
   border-radius: var(--border-radius-md);
   transition: all 0.2s ease;
   font-weight: 500;
 }
 
-:deep(.nav-item-icon) {
-  font-size: 1.1rem;
-  display: flex;
-  align-items: center;
+:deep(.n-menu-item-content) {
+  padding: 0 10px !important;
 }
 
 :deep(.nav-item-text) {
@@ -72,12 +70,6 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   letter-spacing: 0.2px;
 }
 
-:deep(.n-menu) {
-  background: transparent;
-  border-bottom: none;
-  justify-content: center;
-}
-
 :deep(.n-menu-item) {
   border-radius: var(--border-radius-md);
   margin: 0 4px;
@@ -100,18 +92,4 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
   background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
   transform: translateY(-1px);
 }
-
-:deep(.n-menu-item-content) {
-  border-radius: var(--border-radius-md);
-}
-
-:deep(.n-menu-item-content-header) {
-  overflow: visible;
-}
-
-@media (max-width: 768px) {
-  .navbar-container {
-    display: none;
-  }
-}
 </style>
diff --git a/web/src/components/keys/GroupFormModal.vue b/web/src/components/keys/GroupFormModal.vue
index 6933061..4e2ba0b 100644
--- a/web/src/components/keys/GroupFormModal.vue
+++ b/web/src/components/keys/GroupFormModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import { settingsApi } from "@/api/settings";
-import type { Group, GroupConfigOption, Upstream } from "@/types/models";
+import type { Group, GroupConfigOption, UpstreamInfo } from "@/types/models";
 import {
   NButton,
   NCard,
@@ -53,7 +53,7 @@ const formData = reactive<any>({
       url: "",
       weight: 1,
     },
-  ] as Upstream[],
+  ] as UpstreamInfo[],
   channel_type: "openai",
   sort: 1,
   test_model: "",
@@ -211,11 +211,13 @@ async function handleSubmit() {
 
     // 验证 JSON 格式
     let paramOverrides = {};
-    try {
-      paramOverrides = JSON.parse(formData.param_overrides);
-    } catch {
-      message.error("参数覆盖必须是有效的 JSON 格式");
-      return;
+    if (formData.param_overrides) {
+      try {
+        paramOverrides = JSON.parse(formData.param_overrides);
+      } catch {
+        message.error("参数覆盖必须是有效的 JSON 格式");
+        return;
+      }
     }
 
     // 将configItems转换为config对象
@@ -231,11 +233,11 @@ async function handleSubmit() {
       name: formData.name,
       display_name: formData.display_name,
       description: formData.description,
-      upstreams: formData.upstreams.filter(upstream => upstream.url.trim()),
+      upstreams: formData.upstreams.filter((upstream: UpstreamInfo) => upstream.url.trim()),
       channel_type: formData.channel_type,
       sort: formData.sort,
       test_model: formData.test_model,
-      param_overrides: paramOverrides,
+      param_overrides: formData.param_overrides ? paramOverrides : null,
       config,
     };