From f64bd6aff9681b998a1eee932b58f4519e9a382d Mon Sep 17 00:00:00 2001
From: sparksfly <wu434425608@163.com>
Date: Thu, 20 Aug 2026 23:29:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor(setting):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E4=B8=8E?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 移除未使用的NList、NListItem类型声明
2. 统一设置页面容器的最大宽度和内边距，调整标题样式
3. 重构设置项卡片样式，改用border替代阴影背景
4. 调整侧边导航栏结构与样式，适配移动端布局
5. 为所有设置页面添加响应式适配规则
---
 src/types/components.d.ts        |   2 -
 src/views/Setting.vue            | 114 ++++++++++++++++++++++---------
 src/views/setting/About.vue      |  52 ++++++++------
 src/views/setting/Appearance.vue |  51 ++++++++++----
 src/views/setting/Shortcut.vue   |  31 +++++----
 5 files changed, 167 insertions(+), 83 deletions(-)

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index ca6aadf..77d7ef0 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -32,8 +32,6 @@ declare module 'vue' {
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
diff --git a/src/views/Setting.vue b/src/views/Setting.vue
index 31359f4..fe78c24 100644
--- a/src/views/Setting.vue
+++ b/src/views/Setting.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="setting">
-    <header class="setting-header">
-      <button class="back-btn" title="返回" aria-label="返回" @click="goBack">
-        <n-icon :component="ArrowLeftOutlined" />
-      </button>
-      <span class="setting-title">设置</span>
-    </header>
-
     <div class="setting-body">
       <aside class="setting-sider">
+        <div class="setting-sider__header">
+          <button class="back-btn" title="返回" aria-label="返回" @click="goBack">
+            <n-icon :component="ArrowLeftOutlined" />
+          </button>
+          <span class="setting-title">设置</span>
+        </div>
         <n-scrollbar class="setting-sider__scroll">
           <n-anchor
             class="setting-anchor"
@@ -76,76 +75,78 @@ const onNavClick = (item: (typeof menuItems)[number], e: Event) => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background: var(--color-window-bg);
 }
 
-.setting-header {
-  flex-shrink: 0;
+.setting-sider__header {
+  height: 50px;
   display: flex;
   align-items: center;
-  margin: 20px 24px 16px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--color-border);
 }
 
 .back-btn {
-  width: 36px;
-  height: 36px;
+  width: 30px;
+  height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: var(--radius-sm);
-  background-color: var(--color-surface);
+  border-radius: 6px;
+  background-color: transparent;
   color: var(--color-text-secondary);
-  box-shadow: var(--shadow-card);
   cursor: pointer;
-  transition: color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease;
 
   &:hover {
     color: var(--color-accent);
     background-color: var(--color-surface-hover);
-    box-shadow: var(--shadow-card-hover);
   }
 }
 
 .setting-title {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--color-text-primary);
-  margin-left: 12px;
+  margin-left: 10px;
 }
 
 .setting-body {
   flex: 1;
   min-height: 0;
   display: flex;
-  margin: 0 24px 24px;
+  gap: 12px;
+  padding: 12px;
 }
 
 .setting-sider {
   flex-shrink: 0;
-  width: 200px;
-  margin-right: 24px;
+  width: 176px;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
+  border-radius: 8px;
 }
 
 .setting-sider__scroll {
-  height: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 .setting-anchor {
-  margin: 12px;
+  margin: 8px;
 
   :deep(.n-anchor-link) {
-    margin-bottom: 4px;
+    margin-bottom: 2px;
   }
 
   :deep(.n-anchor-link__title) {
     padding: 0;
     color: var(--color-text-secondary);
-    border-radius: var(--radius-sm);
+    border-radius: 6px;
     transition: color 0.2s ease, background-color 0.2s ease;
   }
 
@@ -158,16 +159,19 @@ const onNavClick = (item: (typeof menuItems)[number], e: Event) => {
 .nav-item {
   display: flex;
   align-items: center;
-  margin: 8px 12px;
+  height: 34px;
+  padding: 0 10px;
   font-size: 14px;
+  border-radius: 6px;
 
   &__icon {
-    margin-right: 10px;
+    margin-right: 8px;
   }
 
   &--active {
     color: var(--color-accent);
     font-weight: 600;
+    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
   }
 }
 
@@ -177,11 +181,57 @@ const onNavClick = (item: (typeof menuItems)[number], e: Event) => {
   overflow: hidden;
   background-color: var(--color-surface);
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
+  border-radius: 8px;
 }
 
 .setting-content__scroll {
   height: 100%;
 }
+
+@media (max-width: 640px) {
+  .setting-body {
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+  }
+
+  .setting-sider {
+    width: auto;
+    height: 96px;
+    overflow: visible;
+  }
+
+  .setting-sider__header {
+    flex-shrink: 0;
+    height: 44px;
+    padding: 0 10px;
+  }
+
+  .setting-sider__scroll {
+    flex: none;
+    height: 50px;
+  }
+
+  .setting-anchor {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin: 0 6px;
+
+    :deep(.n-anchor-link) {
+      flex: 1;
+      margin: 0;
+    }
+  }
+
+  .nav-item {
+    justify-content: center;
+    height: 34px;
+    padding: 0 6px;
+
+    &__icon {
+      margin-right: 5px;
+    }
+  }
+}
 </style>
diff --git a/src/views/setting/About.vue b/src/views/setting/About.vue
index 246603c..7a08c3c 100644
--- a/src/views/setting/About.vue
+++ b/src/views/setting/About.vue
@@ -16,51 +16,50 @@
 
 <style lang="scss" scoped>
 .setting-page {
-  margin: 24px 28px;
+  max-width: 760px;
+  padding: 22px 26px 32px;
 }
 
 .page-title {
-  margin: 0 0 4px;
-  font-size: 20px;
+  margin: 0 0 2px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
 
 .page-desc {
-  margin: 0 0 20px;
+  margin: 0 0 18px;
   font-size: 13px;
   color: var(--color-text-secondary);
 }
 
 .about-card {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  column-gap: 14px;
   align-items: center;
-  justify-content: center;
-  min-height: 320px;
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-card);
-  box-shadow: var(--shadow-card);
-  margin-top: 8px;
+  min-height: 108px;
+  padding: 18px 16px;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .app-logo {
-  width: 64px;
-  height: 64px;
+  width: 52px;
+  height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-card);
+  border-radius: 8px;
   background: var(--color-accent-gradient);
   color: var(--color-text-invert);
-  font-size: 28px;
+  font-size: 22px;
   font-weight: 700;
-  margin-bottom: 16px;
+  grid-row: span 2;
 }
 
 .app-name {
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
@@ -68,12 +67,23 @@
 .app-version {
   font-size: 13px;
   color: var(--color-text-secondary);
-  margin-top: 4px;
+  margin: 2px 0 0;
 }
 
 .app-desc {
+  grid-column: 1 / -1;
   font-size: 13px;
   color: var(--color-text-secondary);
-  margin-top: 16px;
+  margin: 12px 0 0;
+}
+
+@media (max-width: 640px) {
+  .setting-page {
+    padding: 18px 16px 24px;
+  }
+
+  .app-desc {
+    margin-left: 0;
+  }
 }
 </style>
diff --git a/src/views/setting/Appearance.vue b/src/views/setting/Appearance.vue
index 32237f5..1df8e73 100644
--- a/src/views/setting/Appearance.vue
+++ b/src/views/setting/Appearance.vue
@@ -39,28 +39,29 @@ const wordWrap = ref(true)
 
 <style lang="scss" scoped>
 .setting-page {
-  margin: 24px 28px;
+  max-width: 760px;
+  padding: 22px 26px 32px;
 }
 
 .page-title {
-  margin: 0 0 4px;
-  font-size: 20px;
+  margin: 0 0 2px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
 
 .page-desc {
-  margin: 0 0 20px;
+  margin: 0 0 18px;
   font-size: 13px;
   color: var(--color-text-secondary);
 }
 
 .setting-group {
-  margin-bottom: 24px;
+  margin-bottom: 20px;
 }
 
 .group-title {
-  margin-bottom: 8px;
+  margin-bottom: 6px;
   font-size: 13px;
   font-weight: 600;
   color: var(--color-text-secondary);
@@ -70,23 +71,21 @@ const wordWrap = ref(true)
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow-card);
+  min-height: 56px;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
   margin-bottom: 0;
-  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+  transition: background-color 0.2s ease;
 
   &:hover {
-    border-color: var(--color-border-hover);
-    box-shadow: var(--shadow-card-hover);
+    background-color: color-mix(in srgb, var(--color-surface-hover) 42%, transparent);
   }
 }
 
 .item-info {
   display: flex;
   flex-direction: column;
-  margin: 12px 16px;
+  padding: 0 16px;
 }
 
 .item-label {
@@ -103,6 +102,28 @@ const wordWrap = ref(true)
 
 :deep(.n-radio-group),
 :deep(.n-switch) {
-  margin: 0 16px;
+  margin: 0 16px 0 12px;
+}
+
+@media (max-width: 640px) {
+  .setting-page {
+    padding: 18px 16px 24px;
+  }
+
+  .setting-item {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+    padding: 12px 16px;
+  }
+
+  .item-info {
+    padding: 0;
+  }
+
+  :deep(.n-radio-group),
+  :deep(.n-switch) {
+    margin: 0;
+  }
 }
 </style>
diff --git a/src/views/setting/Shortcut.vue b/src/views/setting/Shortcut.vue
index 41c179e..070fb0e 100644
--- a/src/views/setting/Shortcut.vue
+++ b/src/views/setting/Shortcut.vue
@@ -28,35 +28,34 @@ const shortcuts = [
 
 <style lang="scss" scoped>
 .setting-page {
-  margin: 24px 28px;
+  max-width: 760px;
+  padding: 22px 26px 32px;
 }
 
 .page-title {
-  margin: 0 0 4px;
-  font-size: 20px;
+  margin: 0 0 2px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--color-text-primary);
 }
 
 .page-desc {
-  margin: 0 0 20px;
+  margin: 0 0 18px;
   font-size: 13px;
   color: var(--color-text-secondary);
 }
 
 .setting-group {
-  background-color: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--shadow-card);
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .shortcut-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0 16px;
-  min-height: 44px;
+  padding: 0 16px;
+  min-height: 46px;
 
   & + & {
     border-top: 1px solid var(--color-border);
@@ -75,14 +74,14 @@ const shortcuts = [
 
 .shortcut-key {
   min-width: 24px;
-  height: 24px;
+  height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   margin: 0 2px;
   border: 1px solid var(--color-border);
-  border-radius: 6px;
-  background-color: var(--color-window-bg);
+  border-radius: 4px;
+  background-color: color-mix(in srgb, var(--color-window-bg) 72%, transparent);
   color: var(--color-text-primary);
   font-size: 12px;
   font-family: inherit;
@@ -92,4 +91,10 @@ const shortcuts = [
   color: var(--color-text-secondary);
   font-size: 12px;
 }
+
+@media (max-width: 640px) {
+  .setting-page {
+    padding: 18px 16px 24px;
+  }
+}
 </style>