From 5047cd07448bae6f8cacee3d7194d50d8a8f0da4 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Wed, 14 Jan 2026 21:40:48 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=A8=A1=E6=80=81=E6=A1=86=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=B8=83=E5=B1=80=E5=92=8C=E9=97=B4=E8=B7=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/BasicSettingsSection.vue |  2 +
 web/src/components/SettingsModal.vue        | 52 +++++++++++----------
 2 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/web/src/components/BasicSettingsSection.vue b/web/src/components/BasicSettingsSection.vue
index 04a899dc..07025319 100644
--- a/web/src/components/BasicSettingsSection.vue
+++ b/web/src/components/BasicSettingsSection.vue
@@ -308,6 +308,8 @@ const openLink = (url) => {
       }
 
       &.card-select {
+        gap: 0px;
+        padding: 0;
         .label {
           margin-top: 0;
         }
diff --git a/web/src/components/SettingsModal.vue b/web/src/components/SettingsModal.vue
index 4cb458fb..a84b22b1 100644
--- a/web/src/components/SettingsModal.vue
+++ b/web/src/components/SettingsModal.vue
@@ -3,7 +3,7 @@
     v-model:open="visible"
     title="系统设置"
     width="90%"
-    :style="{ maxWidth: '1200px', minWidth: '320px', top: '3%' }"
+    :style="{ maxWidth: '980px', minWidth: '320px', top: '10%' }"
     :footer="null"
     @cancel="handleClose"
     class="settings-modal"
@@ -12,7 +12,7 @@
   >
     <div class="settings-container">
       <!-- 侧边栏 (Desktop) -->
-      <div class="settings-sider" v-if="!isMobile">
+      <div class="settings-sider">
         <div
           class="sider-item"
           :class="{ activesec: activeTab === 'base' }"
@@ -52,7 +52,7 @@
       </div>
 
       <!-- 顶部导航 (Mobile) -->
-      <div class="settings-mobile-nav" v-else>
+      <div class="settings-mobile-nav">
         <div
           class="nav-item"
           :class="{ active: activeTab === 'base' }"
@@ -112,7 +112,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useUserStore } from '@/stores/user'
 import {
   SettingOutlined,
@@ -136,9 +136,6 @@ const emit = defineEmits(['update:visible', 'close'])
 
 const userStore = useUserStore()
 const activeTab = ref('base')
-const windowWidth = ref(window?.innerWidth || 0)
-
-const isMobile = computed(() => windowWidth.value <= 768)
 
 const visible = computed({
   get: () => props.visible,
@@ -149,18 +146,6 @@ const handleClose = () => {
   emit('close')
 }
 
-const updateWindowWidth = () => {
-  windowWidth.value = window?.innerWidth || 0
-}
-
-onMounted(() => {
-  window.addEventListener('resize', updateWindowWidth)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('resize', updateWindowWidth)
-})
-
 // 根据用户权限设置默认标签页
 watch(() => props.visible, (newVal) => {
   if (newVal) {
@@ -197,11 +182,15 @@ watch(() => props.visible, (newVal) => {
   display: flex;
   height: 100%;
   width: 100%;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 }
 
 /* Sidebar Styles - Matching SettingView.vue style */
 .settings-sider {
-  width: 140px;
+  width: 128px;
   height: 100%;
   padding-top: 8px;
   display: flex;
@@ -210,9 +199,13 @@ watch(() => props.visible, (newVal) => {
   gap: 8px;
   flex-shrink: 0;
 
+  @media (max-width: 768px) {
+    display: none;
+  }
+
   .sider-item {
     width: 100%;
-    padding: 6px 16px; /* Matches SettingView .sider > * */
+    padding: 6px 12px; /* Matches SettingView .sider > * */
     cursor: pointer;
     transition: all 0.1s; /* Matches SettingView */
     text-align: left;
@@ -222,6 +215,7 @@ watch(() => props.visible, (newVal) => {
     display: flex;
     align-items: center;
     gap: 10px;
+    margin-left: -20px;
 
     .icon {
       font-size: 14px; /* Slightly adjusted to align better, SettingView uses h() icon defaults */
@@ -248,10 +242,14 @@ watch(() => props.visible, (newVal) => {
     padding: 0 20px; /* Matches SettingView .setting padding */
     // margin-bottom: 40px; /* Matches SettingView .setting margin-bottom */
     overflow-y: scroll;
-    height: 80vh;
+    height: 70vh;
+
+    @media (max-width: 768px) {
+      height: 70vh;
+      padding: 0px;
+    }
 
     h3 {
-      font-size: 18px;
       font-weight: 600;
       color: var(--gray-900);
       margin-bottom: 0.5em;
@@ -263,13 +261,17 @@ watch(() => props.visible, (newVal) => {
 
 /* Mobile Styles */
 .settings-mobile-nav {
-  display: flex;
+  display: none;
   overflow-x: auto;
   border-bottom: 1px solid var(--gray-150);
   background: var(--gray-0);
-  padding: 0 16px;
+  padding: 0;
   flex-shrink: 0;
 
+  @media (max-width: 768px) {
+    display: flex;
+  }
+
   .nav-item {
     padding: 12px 16px;
     white-space: nowrap;