From 6ff2a0337aee159c70bf5bc793dc46cd6a503ee7 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 4 Feb 2026 20:14:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=BE=E7=BD=AE=E9=A1=B5=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=9F=B3=E9=A2=91=E8=AE=BE=E5=A4=87=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/AudioDeviceSettings.vue          |   98 ++
 .../settings/MusicSourceSettings.vue          |  114 +-
 src/renderer/views/set/SettingItem.vue        |   17 +-
 src/renderer/views/set/SettingSection.vue     |   10 +-
 src/renderer/views/set/index.vue              | 1093 ++++++++---------
 5 files changed, 735 insertions(+), 597 deletions(-)
 create mode 100644 src/renderer/components/settings/AudioDeviceSettings.vue

diff --git a/src/renderer/components/settings/AudioDeviceSettings.vue b/src/renderer/components/settings/AudioDeviceSettings.vue
new file mode 100644
index 0000000..22614d3
--- /dev/null
+++ b/src/renderer/components/settings/AudioDeviceSettings.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { usePlayerCoreStore } from '@/store/modules/playerCore';
+
+const { t } = useI18n();
+const playerStore = usePlayerCoreStore();
+
+const isLoading = ref(false);
+const isTesting = ref(false);
+
+const handleRefresh = async () => {
+  isLoading.value = true;
+  await playerStore.refreshAudioDevices();
+  isLoading.value = false;
+};
+
+const handleDeviceChange = async (deviceId: string) => {
+  isLoading.value = true;
+  await playerStore.setAudioOutputDevice(deviceId);
+  isLoading.value = false;
+};
+
+const handleTest = async () => {
+  isTesting.value = true;
+
+  try {
+    // 使用与播放器相同的 AudioContext 测试
+    const audioContext = new AudioContext();
+
+    // 应用当前选择的设备
+    const deviceId = playerStore.audioOutputDeviceId;
+    if (deviceId && deviceId !== 'default' && (audioContext as any).setSinkId) {
+      await (audioContext as any).setSinkId(deviceId);
+    }
+
+    const oscillator = audioContext.createOscillator();
+    const gainNode = audioContext.createGain();
+
+    oscillator.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+
+    oscillator.frequency.value = 440;
+    gainNode.gain.value = 0.3;
+
+    oscillator.start();
+    setTimeout(() => {
+      oscillator.stop();
+      audioContext.close();
+      isTesting.value = false;
+    }, 500);
+  } catch (error) {
+    console.error('测试音频失败:', error);
+    isTesting.value = false;
+  }
+};
+
+onMounted(() => {
+  handleRefresh();
+});
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div class="flex items-center justify-between">
+      <span class="text-sm text-gray-700 dark:text-gray-300">
+        {{ t('settings.playback.audioDevice') }}
+      </span>
+      <div class="flex items-center gap-2">
+        <n-button size="tiny" :loading="isLoading" quaternary @click="handleRefresh">
+          <template #icon>
+            <i class="ri-refresh-line"></i>
+          </template>
+        </n-button>
+        <n-button size="tiny" :loading="isTesting" quaternary @click="handleTest">
+          <template #icon>
+            <i class="ri-volume-up-line"></i>
+          </template>
+          {{ t('settings.playback.testAudio') }}
+        </n-button>
+      </div>
+    </div>
+
+    <n-select
+      :value="playerStore.audioOutputDeviceId"
+      :options="
+        playerStore.availableAudioDevices.map((d) => ({
+          label: d.label,
+          value: d.deviceId
+        }))
+      "
+      :loading="isLoading"
+      :placeholder="t('settings.playback.selectAudioDevice')"
+      @update:value="handleDeviceChange"
+    />
+  </div>
+</template>
diff --git a/src/renderer/components/settings/MusicSourceSettings.vue b/src/renderer/components/settings/MusicSourceSettings.vue
index 9a05d2d..905b57d 100644
--- a/src/renderer/components/settings/MusicSourceSettings.vue
+++ b/src/renderer/components/settings/MusicSourceSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <ResponsiveModal
+  <responsive-modal
     v-model="visible"
     :title="t('settings.playback.musicSources')"
     @close="handleCancel"
@@ -55,10 +55,12 @@
                   >
                     <i class="ri-music-2-fill text-base"></i>
                   </div>
-                  
+
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center justify-between">
-                      <span class="font-semibold text-gray-900 dark:text-white text-sm truncate">{{ source.key }}</span>
+                      <span class="font-semibold text-gray-900 dark:text-white text-sm truncate">{{
+                        source.key
+                      }}</span>
                       <div
                         class="w-4 h-4 rounded-full border flex items-center justify-center transition-colors shrink-0 ml-1"
                         :class="[
@@ -67,7 +69,10 @@
                             : 'border-gray-300 dark:border-gray-600'
                         ]"
                       >
-                        <i v-if="isSourceSelected(source.key)" class="ri-check-line text-white text-xs scale-75"></i>
+                        <i
+                          v-if="isSourceSelected(source.key)"
+                          class="ri-check-line text-white text-xs scale-75"
+                        ></i>
                       </div>
                     </div>
                   </div>
@@ -94,10 +99,12 @@
                   >
                     <i class="ri-netease-cloud-music-fill text-base"></i>
                   </div>
-                  
+
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center justify-between">
-                      <span class="font-semibold text-gray-900 dark:text-white text-sm truncate">落雪音源</span>
+                      <span class="font-semibold text-gray-900 dark:text-white text-sm truncate"
+                        >落雪音源</span
+                      >
                       <div
                         class="w-4 h-4 rounded-full border flex items-center justify-center transition-colors shrink-0 ml-1"
                         :class="[
@@ -106,11 +113,18 @@
                             : 'border-gray-300 dark:border-gray-600'
                         ]"
                       >
-                        <i v-if="isSourceSelected('lxMusic')" class="ri-check-line text-white text-xs scale-75"></i>
+                        <i
+                          v-if="isSourceSelected('lxMusic')"
+                          class="ri-check-line text-white text-xs scale-75"
+                        ></i>
                       </div>
                     </div>
                     <p class="text-[10px] text-gray-500 mt-0.5 truncate">
-                      {{ activeLxApiId && lxMusicScriptInfo ? lxMusicScriptInfo.name : t('settings.playback.lxMusic.scripts.notConfigured') }}
+                      {{
+                        activeLxApiId && lxMusicScriptInfo
+                          ? lxMusicScriptInfo.name
+                          : t('settings.playback.lxMusic.scripts.notConfigured')
+                      }}
                     </p>
                   </div>
                 </div>
@@ -136,10 +150,12 @@
                   >
                     <i class="ri-plug-fill text-base"></i>
                   </div>
-                  
+
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center justify-between">
-                      <span class="font-semibold text-gray-900 dark:text-white text-sm truncate">{{ t('settings.playback.sourceLabels.custom') }}</span>
+                      <span class="font-semibold text-gray-900 dark:text-white text-sm truncate">{{
+                        t('settings.playback.sourceLabels.custom')
+                      }}</span>
                       <div
                         class="w-4 h-4 rounded-full border flex items-center justify-center transition-colors shrink-0 ml-1"
                         :class="[
@@ -148,11 +164,18 @@
                             : 'border-gray-300 dark:border-gray-600'
                         ]"
                       >
-                        <i v-if="isSourceSelected('custom')" class="ri-check-line text-white text-xs scale-75"></i>
+                        <i
+                          v-if="isSourceSelected('custom')"
+                          class="ri-check-line text-white text-xs scale-75"
+                        ></i>
                       </div>
                     </div>
                     <p class="text-[10px] text-gray-500 mt-0.5 truncate">
-                      {{ settingsStore.setData.customApiPlugin ? t('settings.playback.customApi.status.imported') : t('settings.playback.customApi.status.notImported') }}
+                      {{
+                        settingsStore.setData.customApiPlugin
+                          ? t('settings.playback.customApi.status.imported')
+                          : t('settings.playback.customApi.status.notImported')
+                      }}
                     </p>
                   </div>
                 </div>
@@ -162,7 +185,9 @@
             <!-- LX Music Management Tab -->
             <div v-else-if="activeTab === 'lxMusic'" class="space-y-3 pb-2">
               <div class="flex justify-between items-center mb-1">
-                <h3 class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('settings.playback.lxMusic.scripts.title') }}</h3>
+                <h3 class="text-xs font-medium text-gray-500 dark:text-gray-400">
+                  {{ t('settings.playback.lxMusic.scripts.title') }}
+                </h3>
                 <button
                   @click="importLxMusicScript"
                   class="flex items-center gap-1 px-2.5 py-1 bg-emerald-500 hover:bg-emerald-600 text-white text-xs font-medium rounded-lg transition-colors"
@@ -191,12 +216,17 @@
                       class="peer appearance-none w-4 h-4 rounded-full border border-gray-300 dark:border-gray-600 checked:border-emerald-500 checked:bg-emerald-500 transition-colors cursor-pointer"
                       @change="setActiveLxApi(api.id)"
                     />
-                    <i class="ri-check-line absolute text-white text-[10px] pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity"></i>
+                    <i
+                      class="ri-check-line absolute text-white text-[10px] pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity"
+                    ></i>
                   </div>
 
                   <div class="flex-1 min-w-0 mr-2">
                     <div class="flex items-center gap-2">
-                      <span v-if="editingScriptId !== api.id" class="font-medium text-sm text-gray-900 dark:text-white truncate">
+                      <span
+                        v-if="editingScriptId !== api.id"
+                        class="font-medium text-sm text-gray-900 dark:text-white truncate"
+                      >
                         {{ api.name }}
                       </span>
                       <input
@@ -207,7 +237,7 @@
                         @blur="saveScriptName(api.id)"
                         @keyup.enter="saveScriptName(api.id)"
                       />
-                      
+
                       <button
                         v-if="editingScriptId !== api.id"
                         class="text-gray-400 hover:text-emerald-500 transition-colors"
@@ -217,7 +247,10 @@
                       </button>
                     </div>
                     <div class="flex items-center gap-2 mt-0.5">
-                      <span v-if="api.info.version" class="text-[10px] text-gray-500 bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">
+                      <span
+                        v-if="api.info.version"
+                        class="text-[10px] text-gray-500 bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded"
+                      >
                         v{{ api.info.version }}
                       </span>
                     </div>
@@ -231,14 +264,19 @@
                   </button>
                 </div>
               </div>
-              
-              <div v-else class="py-6 text-center text-xs text-gray-400 bg-gray-50 dark:bg-white/5 rounded-xl border border-dashed border-gray-200 dark:border-white/10">
+
+              <div
+                v-else
+                class="py-6 text-center text-xs text-gray-400 bg-gray-50 dark:bg-white/5 rounded-xl border border-dashed border-gray-200 dark:border-white/10"
+              >
                 <p>{{ t('settings.playback.lxMusic.scripts.empty') }}</p>
               </div>
 
               <!-- URL Import -->
               <div class="mt-4 pt-4 border-t border-gray-100 dark:border-white/5">
-                <h4 class="text-xs font-medium mb-2 text-gray-900 dark:text-white">{{ t('settings.playback.lxMusic.scripts.importOnline') }}</h4>
+                <h4 class="text-xs font-medium mb-2 text-gray-900 dark:text-white">
+                  {{ t('settings.playback.lxMusic.scripts.importOnline') }}
+                </h4>
                 <div class="flex gap-2">
                   <input
                     v-model="lxScriptUrl"
@@ -260,11 +298,16 @@
             </div>
 
             <!-- Custom API Tab -->
-            <div v-else-if="activeTab === 'customApi'" class="flex flex-col items-center justify-center py-6 text-center h-full">
-              <div class="w-12 h-12 bg-violet-100 dark:bg-violet-500/20 text-violet-500 rounded-xl flex items-center justify-center mb-3">
+            <div
+              v-else-if="activeTab === 'customApi'"
+              class="flex flex-col items-center justify-center py-6 text-center h-full"
+            >
+              <div
+                class="w-12 h-12 bg-violet-100 dark:bg-violet-500/20 text-violet-500 rounded-xl flex items-center justify-center mb-3"
+              >
                 <i class="ri-plug-fill text-2xl"></i>
               </div>
-              
+
               <h3 class="text-base font-semibold text-gray-900 dark:text-white mb-1">
                 {{ t('settings.playback.customApi.sectionTitle') }}
               </h3>
@@ -280,11 +323,17 @@
                 {{ t('settings.playback.customApi.importConfig') }}
               </button>
 
-              <div v-if="settingsStore.setData.customApiPluginName" class="mt-4 flex items-center gap-2 px-3 py-1.5 bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 rounded-lg text-xs">
+              <div
+                v-if="settingsStore.setData.customApiPluginName"
+                class="mt-4 flex items-center gap-2 px-3 py-1.5 bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 rounded-lg text-xs"
+              >
                 <i class="ri-check-circle-fill"></i>
-                <span>{{ t('settings.playback.customApi.currentSource') }}: <b>{{ settingsStore.setData.customApiPluginName }}</b></span>
+                <span
+                  >{{ t('settings.playback.customApi.currentSource') }}:
+                  <b>{{ settingsStore.setData.customApiPluginName }}</b></span
+                >
               </div>
-              
+
               <div v-else class="mt-4 text-xs text-gray-400">
                 {{ t('settings.playback.customApi.notImported') }}
               </div>
@@ -311,7 +360,7 @@
         </button>
       </div>
     </template>
-  </ResponsiveModal>
+  </responsive-modal>
 </template>
 
 <script setup lang="ts">
@@ -344,8 +393,7 @@ const MUSIC_SOURCES: MusicSourceConfig[] = [
   { key: 'migu', color: '#ff6600' },
   { key: 'kugou', color: '#2979ff' },
   { key: 'kuwo', color: '#ff8c00' },
-  { key: 'pyncmd', color: '#ec4141' },
-  { key: 'bilibili', color: '#00a1d6' }
+  { key: 'pyncmd', color: '#ec4141' }
 ];
 
 // ==================== Props & Emits ====================
@@ -356,7 +404,7 @@ const props = defineProps({
   },
   sources: {
     type: Array as () => ExtendedPlatform[],
-    default: () => ['migu', 'kugou', 'kuwo', 'pyncmd', 'bilibili'] as ExtendedPlatform[]
+    default: () => ['migu', 'kugou', 'kuwo', 'pyncmd'] as ExtendedPlatform[]
   }
 });
 
@@ -649,7 +697,9 @@ const importLxMusicScriptFromUrl = async () => {
     lxScriptUrl.value = '';
   } catch (error: any) {
     console.error('从 URL 导入落雪音源脚本失败:', error);
-    message.error(`${t('settings.playback.lxMusic.scripts.importOnline')} ${t('common.error')}：${error.message}`);
+    message.error(
+      `${t('settings.playback.lxMusic.scripts.importOnline')} ${t('common.error')}：${error.message}`
+    );
   } finally {
     isImportingFromUrl.value = false;
   }
@@ -699,7 +749,7 @@ const saveScriptName = (apiId: string) => {
  * 确认选择
  */
 const handleConfirm = () => {
-  const defaultPlatforms: ExtendedPlatform[] = ['migu', 'kugou', 'kuwo', 'pyncmd', 'bilibili'];
+  const defaultPlatforms: ExtendedPlatform[] = ['migu', 'kugou', 'kuwo', 'pyncmd'];
   const valuesToEmit =
     selectedSources.value.length > 0 ? [...new Set(selectedSources.value)] : defaultPlatforms;
   emit('update:sources', valuesToEmit);
diff --git a/src/renderer/views/set/SettingItem.vue b/src/renderer/views/set/SettingItem.vue
index 3b244f7..2dd7098 100644
--- a/src/renderer/views/set/SettingItem.vue
+++ b/src/renderer/views/set/SettingItem.vue
@@ -1,31 +1,32 @@
 <template>
   <div
-    class="flex items-center justify-between p-4 rounded-lg transition-all bg-light dark:bg-dark text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-800"
+    class="setting-item flex items-center justify-between p-4 transition-colors bg-transparent text-gray-900 dark:text-white border-b border-gray-100 dark:border-gray-800 last:border-b-0 hover:bg-gray-50 hover:dark:bg-white/5"
     :class="[
       // 移动端垂直布局
-      { 'max-md:flex-col max-md:items-start max-md:gap-3 max-md:p-3': !inline },
+      { 'max-md:flex-col max-md:items-start max-md:gap-3': !inline },
       // 可点击样式
       {
-        'cursor-pointer hover:text-green-500 hover:!bg-green-50 hover:dark:!bg-green-900/30':
-          clickable
+        'cursor-pointer active:bg-gray-100 active:dark:bg-white/10': clickable
       },
       customClass
     ]"
     @click="handleClick"
   >
     <!-- 左侧：标题和描述 -->
-    <div class="flex-1 min-w-0">
-      <div class="text-base font-medium mb-1">
+    <div class="flex-1 min-w-0 mr-4">
+      <div class="text-base font-medium mb-0.5">
         <slot name="title">{{ title }}</slot>
       </div>
       <div
         v-if="description || $slots.description"
-        class="text-sm text-gray-500 dark:text-gray-400"
+        class="text-sm text-gray-500 dark:text-gray-400 leading-normal"
       >
         <slot name="description">{{ description }}</slot>
       </div>
       <!-- 额外内容插槽 -->
-      <slot name="extra"></slot>
+      <div v-if="$slots.extra" class="mt-2">
+        <slot name="extra"></slot>
+      </div>
     </div>
 
     <!-- 右侧：操作区 -->
diff --git a/src/renderer/views/set/SettingSection.vue b/src/renderer/views/set/SettingSection.vue
index f104e71..bb70b36 100644
--- a/src/renderer/views/set/SettingSection.vue
+++ b/src/renderer/views/set/SettingSection.vue
@@ -1,12 +1,14 @@
 <template>
-  <div :id="id" :ref="setRef" class="mb-6 scroll-mt-4">
+  <div :id="id" :ref="setRef" class="mb-8 scroll-mt-20">
     <!-- 分组标题 -->
-    <div class="text-base font-medium mb-4 text-gray-600 dark:text-white">
+    <div class="text-xl font-bold mb-4 text-gray-900 dark:text-white px-1">
       <slot name="title">{{ title }}</slot>
     </div>
 
-    <!-- 设置项列表 -->
-    <div class="space-y-4 max-md:space-y-3">
+    <!-- 设置项列表容器 -->
+    <div
+      class="bg-white dark:bg-neutral-900 rounded-2xl overflow-hidden border border-gray-100 dark:border-gray-800 shadow-sm"
+    >
       <slot></slot>
     </div>
   </div>
diff --git a/src/renderer/views/set/index.vue b/src/renderer/views/set/index.vue
index 3fdaade..3fda6ea 100644
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -1,538 +1,547 @@
 <template>
-  <div class="flex h-full">
-    <!-- 左侧导航栏 -->
-    <setting-nav
-      v-if="!isMobile"
-      :sections="navSections"
-      :current-section="currentSection"
-      @navigate="scrollToSection"
-    />
+  <div class="h-full w-full bg-white dark:bg-black transition-colors duration-500 flex flex-col">
+    <!-- 顶部导航区 -->
+    <div
+      class="flex-shrink-0 border-b border-gray-100 dark:border-gray-800 bg-white dark:bg-black z-10 pr-4 sm:pr-6 lg:pr-8 pt-6 pb-2"
+    >
+      <h1 class="text-2xl md:text-3xl font-bold text-neutral-900 dark:text-white mb-6">
+        {{ t('common.settings') }}
+      </h1>
 
-    <!-- 右侧内容区 -->
-    <n-scrollbar ref="scrollbarRef" class="flex-1 h-full" @scroll="handleScroll">
-      <div class="p-4 pb-20 max-md:p-3 max-md:pb-24">
-        <!-- 基础设置 -->
-        <setting-section
-          id="basic"
-          :title="t('settings.sections.basic')"
-          @ref="(el) => (sectionRefs.basic = el as HTMLElement | null)"
-        >
-          <!-- 主题设置 -->
-          <setting-item
-            :title="t('settings.basic.themeMode')"
-            :description="t('settings.basic.themeModeDesc')"
-          >
-            <template #action>
-              <div class="flex items-center gap-3 max-md:flex-wrap">
-                <div class="flex items-center gap-2">
-                  <n-switch v-model:value="setData.autoTheme" @update:value="handleAutoThemeChange">
-                    <template #checked><i class="ri-smartphone-line"></i></template>
-                    <template #unchecked><i class="ri-settings-line"></i></template>
-                  </n-switch>
-                  <span class="text-sm text-gray-500 max-md:hidden">
-                    {{
-                      setData.autoTheme
-                        ? t('settings.basic.autoTheme')
-                        : t('settings.basic.manualTheme')
-                    }}
-                  </span>
-                </div>
-                <n-switch
-                  v-model:value="isDarkTheme"
-                  :disabled="setData.autoTheme"
-                  :class="{ 'opacity-50': setData.autoTheme }"
-                >
-                  <template #checked><i class="ri-moon-line"></i></template>
-                  <template #unchecked><i class="ri-sun-line"></i></template>
-                </n-switch>
-              </div>
-            </template>
-          </setting-item>
-
-          <!-- 语言设置 -->
-          <setting-item
-            :title="t('settings.basic.language')"
-            :description="t('settings.basic.languageDesc')"
-          >
-            <language-switcher />
-          </setting-item>
-
-          <!-- 平板模式 -->
-          <setting-item
-            v-if="!isElectron"
-            :title="t('settings.basic.tabletMode')"
-            :description="t('settings.basic.tabletModeDesc')"
-          >
-            <n-switch v-model:value="setData.tabletMode">
-              <template #checked><i class="ri-tablet-line"></i></template>
-              <template #unchecked><i class="ri-smartphone-line"></i></template>
-            </n-switch>
-          </setting-item>
-
-          <!-- 翻译引擎 -->
-          <setting-item
-            :title="t('settings.translationEngine')"
-            :description="t('settings.translationEngine')"
-          >
-            <n-select
-              v-model:value="setData.lyricTranslationEngine"
-              :options="translationEngineOptions"
-              class="w-40 max-md:w-full"
-            />
-          </setting-item>
-
-          <!-- 字体设置 -->
-          <setting-item
-            v-if="isElectron"
-            :title="t('settings.basic.font')"
-            :description="t('settings.basic.fontDesc')"
-          >
-            <template #action>
-              <div class="flex gap-2 max-md:flex-col max-md:w-full">
-                <n-radio-group v-model:value="setData.fontScope" class="mt-2">
-                  <n-radio key="global" value="global">{{
-                    t('settings.basic.fontScope.global')
-                  }}</n-radio>
-                  <n-radio key="lyric" value="lyric">{{
-                    t('settings.basic.fontScope.lyric')
-                  }}</n-radio>
-                </n-radio-group>
-                <n-select
-                  v-model:value="selectedFonts"
-                  :options="systemFonts"
-                  filterable
-                  multiple
-                  placeholder="选择字体"
-                  class="w-[300px] max-md:w-full"
-                  :render-label="renderFontLabel"
-                />
-              </div>
-            </template>
-          </setting-item>
-
-          <!-- 字体预览 -->
+      <n-scrollbar x-scrollable class="w-full">
+        <div class="flex items-center pl-2 pb-2 whitespace-nowrap">
           <div
-            v-if="selectedFonts.length > 0"
-            class="mt-4 p-4 max-md:p-3 rounded-lg bg-gray-50 dark:bg-dark-100 border border-gray-200 dark:border-gray-700"
+            v-for="section in navSections"
+            :key="section.id"
+            class="tab-item"
+            :class="{ active: currentSection === section.id }"
+            @click="currentSection = section.id"
           >
-            <div class="text-sm font-medium mb-3 text-gray-600 dark:text-gray-300">
-              {{ t('settings.basic.fontPreview.title') }}
-            </div>
-            <div class="space-y-3" :style="{ fontFamily: setData.fontFamily }">
-              <div v-for="preview in fontPreviews" :key="preview.key" class="flex flex-col gap-1">
-                <div class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ t(`settings.basic.fontPreview.${preview.key}`) }}
-                </div>
-                <div
-                  class="text-base text-gray-900 dark:text-gray-100 p-2 rounded bg-white dark:bg-dark border border-gray-200 dark:border-gray-700"
-                >
-                  {{ t(`settings.basic.fontPreview.${preview.key}Text`) }}
-                </div>
-              </div>
-            </div>
+            {{ section.title }}
           </div>
+        </div>
+      </n-scrollbar>
+    </div>
 
-          <!-- Token管理 -->
-          <setting-item :title="t('settings.basic.tokenManagement')">
-            <template #description>
-              <div class="text-sm text-gray-500 mb-2">
-                {{ t('settings.basic.tokenStatus') }}:
-                {{ currentToken ? t('settings.basic.tokenSet') : t('settings.basic.tokenNotSet') }}
-              </div>
-              <div v-if="currentToken" class="text-xs text-gray-400 mb-2 font-mono break-all">
-                {{ currentToken.substring(0, 50) }}...
-              </div>
-            </template>
-            <template #action>
-              <div class="flex gap-2">
-                <n-button size="small" @click="showTokenModal = true">
-                  {{
-                    currentToken ? t('settings.basic.modifyToken') : t('settings.basic.setToken')
-                  }}
-                </n-button>
-                <n-button v-if="currentToken" size="small" type="error" @click="clearToken">
-                  {{ t('settings.basic.clearToken') }}
-                </n-button>
-              </div>
-            </template>
-          </setting-item>
+    <!-- 内容区域 -->
+    <n-scrollbar class="flex-1">
+      <div class="w-full mx-auto pb-32 pt-6 px-4 sm:px-6 lg:px-8">
+        <!-- 基础设置 -->
+        <div v-show="currentSection === 'basic'" class="animate-fade-in">
+          <setting-section :title="t('settings.sections.basic')">
+            <!-- 主题设置 -->
+            <setting-item
+              :title="t('settings.basic.themeMode')"
+              :description="t('settings.basic.themeModeDesc')"
+            >
+              <template #action>
+                <div class="flex items-center gap-3 max-md:flex-wrap">
+                  <div class="flex items-center gap-2">
+                    <n-switch
+                      v-model:value="setData.autoTheme"
+                      @update:value="handleAutoThemeChange"
+                    >
+                      <template #checked><i class="ri-smartphone-line"></i></template>
+                      <template #unchecked><i class="ri-settings-line"></i></template>
+                    </n-switch>
+                    <span class="text-sm text-gray-500 max-md:hidden">
+                      {{
+                        setData.autoTheme
+                          ? t('settings.basic.autoTheme')
+                          : t('settings.basic.manualTheme')
+                      }}
+                    </span>
+                  </div>
+                  <n-switch
+                    v-model:value="isDarkTheme"
+                    :disabled="setData.autoTheme"
+                    :class="{ 'opacity-50': setData.autoTheme }"
+                  >
+                    <template #checked><i class="ri-moon-line"></i></template>
+                    <template #unchecked><i class="ri-sun-line"></i></template>
+                  </n-switch>
+                </div>
+              </template>
+            </setting-item>
 
-          <!-- 动画设置 -->
-          <setting-item :title="t('settings.basic.animation')">
-            <template #description>
-              <div class="flex items-center gap-2">
-                <n-switch v-model:value="setData.noAnimate">
-                  <template #checked>{{ t('common.off') }}</template>
-                  <template #unchecked>{{ t('common.on') }}</template>
-                </n-switch>
-                <span>{{ t('settings.basic.animationDesc') }}</span>
-              </div>
-            </template>
-            <template #action>
-              <div class="flex items-center gap-2">
-                <span v-if="!isMobile" class="text-sm text-gray-400"
-                  >{{ setData.animationSpeed }}x</span
-                >
-                <div class="w-40 max-md:w-auto flex justify-end">
-                  <n-slider
-                    v-if="!isMobile"
-                    v-model:value="setData.animationSpeed"
-                    :min="0.1"
-                    :max="3"
-                    :step="0.1"
-                    :marks="animationSpeedMarks"
-                    :disabled="setData.noAnimate"
-                  />
-                  <n-input-number
-                    v-else
-                    v-model:value="setData.animationSpeed"
-                    :min="0.1"
-                    :max="3"
-                    :step="0.1"
-                    :disabled="setData.noAnimate"
-                    button-placement="both"
-                    class="w-[100px]"
+            <!-- 语言设置 -->
+            <setting-item
+              :title="t('settings.basic.language')"
+              :description="t('settings.basic.languageDesc')"
+            >
+              <language-switcher />
+            </setting-item>
+
+            <!-- 平板模式 -->
+            <setting-item
+              v-if="!isElectron"
+              :title="t('settings.basic.tabletMode')"
+              :description="t('settings.basic.tabletModeDesc')"
+            >
+              <n-switch v-model:value="setData.tabletMode">
+                <template #checked><i class="ri-tablet-line"></i></template>
+                <template #unchecked><i class="ri-smartphone-line"></i></template>
+              </n-switch>
+            </setting-item>
+
+            <!-- 翻译引擎 -->
+            <setting-item
+              :title="t('settings.translationEngine')"
+              :description="t('settings.translationEngine')"
+            >
+              <n-select
+                v-model:value="setData.lyricTranslationEngine"
+                :options="translationEngineOptions"
+                class="w-40 max-md:w-full"
+              />
+            </setting-item>
+
+            <!-- 字体设置 -->
+            <setting-item
+              v-if="isElectron"
+              :title="t('settings.basic.font')"
+              :description="t('settings.basic.fontDesc')"
+            >
+              <template #action>
+                <div class="flex gap-2 max-md:flex-col max-md:w-full">
+                  <n-radio-group v-model:value="setData.fontScope" class="mt-2">
+                    <n-radio key="global" value="global">{{
+                      t('settings.basic.fontScope.global')
+                    }}</n-radio>
+                    <n-radio key="lyric" value="lyric">{{
+                      t('settings.basic.fontScope.lyric')
+                    }}</n-radio>
+                  </n-radio-group>
+                  <n-select
+                    v-model:value="selectedFonts"
+                    :options="systemFonts"
+                    filterable
+                    multiple
+                    placeholder="选择字体"
+                    class="w-[300px] max-md:w-full"
+                    :render-label="renderFontLabel"
                   />
                 </div>
-              </div>
-            </template>
-          </setting-item>
+              </template>
+            </setting-item>
 
-          <!-- GPU加速 -->
-          <setting-item v-if="isElectron" :title="t('settings.basic.gpuAcceleration')">
-            <template #description>
-              <div class="text-sm text-gray-500 mb-2">
-                {{ t('settings.basic.gpuAccelerationDesc') }}
-              </div>
-              <div v-if="gpuAccelerationChanged" class="text-xs text-amber-500">
-                <i class="ri-information-line mr-1"></i>
-                {{ t('settings.basic.gpuAccelerationRestart') }}
-              </div>
-            </template>
-            <n-switch
-              v-model:value="setData.enableGpuAcceleration"
-              @update:value="handleGpuAccelerationChange"
+            <!-- 字体预览 -->
+            <div
+              v-if="isElectron && selectedFonts.length > 0"
+              class="p-4 border-b border-gray-100 dark:border-gray-800"
             >
-              <template #checked><i class="ri-cpu-line"></i></template>
-              <template #unchecked><i class="ri-cpu-line"></i></template>
-            </n-switch>
-          </setting-item>
-        </setting-section>
+              <div class="text-base font-bold mb-4 text-gray-900 dark:text-white">
+                {{ t('settings.basic.fontPreview.title') }}
+              </div>
+              <div class="space-y-4" :style="{ fontFamily: setData.fontFamily }">
+                <div v-for="preview in fontPreviews" :key="preview.key" class="flex flex-col gap-2">
+                  <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
+                    {{ t(`settings.basic.fontPreview.${preview.key}`) }}
+                  </div>
+                  <div
+                    class="text-lg text-gray-900 dark:text-gray-100 p-3 rounded-xl bg-gray-50 dark:bg-black/20"
+                  >
+                    {{ t(`settings.basic.fontPreview.${preview.key}Text`) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Token管理 -->
+            <setting-item :title="t('settings.basic.tokenManagement')">
+              <template #description>
+                <div class="text-sm text-gray-500 mb-2">
+                  {{ t('settings.basic.tokenStatus') }}:
+                  {{
+                    currentToken ? t('settings.basic.tokenSet') : t('settings.basic.tokenNotSet')
+                  }}
+                </div>
+                <div v-if="currentToken" class="text-xs text-gray-400 mb-2 font-mono break-all">
+                  {{ currentToken.substring(0, 50) }}...
+                </div>
+              </template>
+              <template #action>
+                <div class="flex gap-2">
+                  <n-button size="small" @click="showTokenModal = true">
+                    {{
+                      currentToken ? t('settings.basic.modifyToken') : t('settings.basic.setToken')
+                    }}
+                  </n-button>
+                  <n-button v-if="currentToken" size="small" type="error" @click="clearToken">
+                    {{ t('settings.basic.clearToken') }}
+                  </n-button>
+                </div>
+              </template>
+            </setting-item>
+
+            <!-- 动画设置 -->
+            <setting-item :title="t('settings.basic.animation')">
+              <template #description>
+                <div class="flex items-center gap-2">
+                  <n-switch v-model:value="setData.noAnimate">
+                    <template #checked>{{ t('common.off') }}</template>
+                    <template #unchecked>{{ t('common.on') }}</template>
+                  </n-switch>
+                  <span>{{ t('settings.basic.animationDesc') }}</span>
+                </div>
+              </template>
+              <template #action>
+                <div class="flex items-center gap-2">
+                  <span v-if="!isMobile" class="text-sm text-gray-400"
+                    >{{ setData.animationSpeed }}x</span
+                  >
+                  <div class="w-40 max-md:w-auto flex justify-end">
+                    <n-slider
+                      v-if="!isMobile"
+                      v-model:value="setData.animationSpeed"
+                      :min="0.1"
+                      :max="3"
+                      :step="0.1"
+                      :marks="animationSpeedMarks"
+                      :disabled="setData.noAnimate"
+                    />
+                    <n-input-number
+                      v-else
+                      v-model:value="setData.animationSpeed"
+                      :min="0.1"
+                      :max="3"
+                      :step="0.1"
+                      :disabled="setData.noAnimate"
+                      button-placement="both"
+                      class="w-[100px]"
+                    />
+                  </div>
+                </div>
+              </template>
+            </setting-item>
+
+            <!-- GPU加速 -->
+            <setting-item v-if="isElectron" :title="t('settings.basic.gpuAcceleration')">
+              <template #description>
+                <div class="text-sm text-gray-500 mb-2">
+                  {{ t('settings.basic.gpuAccelerationDesc') }}
+                </div>
+                <div v-if="gpuAccelerationChanged" class="text-xs text-amber-500">
+                  <i class="ri-information-line mr-1"></i>
+                  {{ t('settings.basic.gpuAccelerationRestart') }}
+                </div>
+              </template>
+              <n-switch
+                v-model:value="setData.enableGpuAcceleration"
+                @update:value="handleGpuAccelerationChange"
+              >
+                <template #checked><i class="ri-cpu-line"></i></template>
+                <template #unchecked><i class="ri-cpu-line"></i></template>
+              </n-switch>
+            </setting-item>
+          </setting-section>
+        </div>
 
         <!-- 播放设置 -->
-        <setting-section
-          id="playback"
-          :title="t('settings.sections.playback')"
-          @ref="(el) => (sectionRefs.playback = el as HTMLElement | null)"
-        >
-          <!-- 音质设置 -->
-          <setting-item
-            :title="t('settings.playback.quality')"
-            :description="t('settings.playback.qualityDesc')"
-          >
-            <n-select
-              v-model:value="setData.musicQuality"
-              :options="qualityOptions"
-              class="w-40 max-md:w-full"
-            />
-          </setting-item>
-
-          <!-- 会员购买链接 -->
-          <div
-            class="p-3 max-md:p-2 bg-light-100 dark:bg-dark-100 rounded-lg text-sm max-md:text-xs"
-          >
-            <div>大家还是需要支持正版，本软件只做开源探讨</div>
-            <div class="mt-2">各大音乐会员购买链接</div>
-            <div class="flex gap-4 max-md:gap-2 flex-wrap mt-1">
-              <a
-                v-for="link in memberLinks"
-                :key="link.url"
-                class="text-green-400 hover:text-green-500"
-                :href="link.url"
-                target="_blank"
-              >
-                {{ link.name }}
-              </a>
-            </div>
-          </div>
-
-          <!-- 音源设置 -->
-          <setting-item v-if="isElectron" :title="t('settings.playback.musicSources')">
-            <template #description>
-              <div class="flex items-center gap-2">
-                <n-switch v-model:value="setData.enableMusicUnblock">
-                  <template #checked>{{ t('common.on') }}</template>
-                  <template #unchecked>{{ t('common.off') }}</template>
-                </n-switch>
-                <span>{{ t('settings.playback.musicUnblockEnableDesc') }}</span>
-              </div>
-              <div v-if="setData.enableMusicUnblock" class="mt-2 text-sm">
-                <span class="text-gray-500">{{ t('settings.playback.selectedMusicSources') }}</span>
-                <span v-if="musicSources.length > 0" class="text-gray-400">{{
-                  musicSources.join(', ')
-                }}</span>
-                <span v-else class="text-red-500 text-xs">{{
-                  t('settings.playback.noMusicSources')
-                }}</span>
-              </div>
-            </template>
-            <n-button
-              size="small"
-              :disabled="!setData.enableMusicUnblock"
-              @click="showMusicSourcesModal = true"
+        <div v-show="currentSection === 'playback'" class="animate-fade-in">
+          <setting-section :title="t('settings.sections.playback')">
+            <!-- 音质设置 -->
+            <setting-item
+              :title="t('settings.playback.quality')"
+              :description="t('settings.playback.qualityDesc')"
             >
-              {{ t('settings.playback.configureMusicSources') }}
-            </n-button>
-          </setting-item>
+              <n-select
+                v-model:value="setData.musicQuality"
+                :options="qualityOptions"
+                class="w-40 max-md:w-full"
+              />
+            </setting-item>
 
-          <!-- 状态栏显示 -->
-          <setting-item
-            v-if="platform === 'darwin'"
-            :title="t('settings.playback.showStatusBar')"
-            :description="t('settings.playback.showStatusBarContent')"
-          >
-            <n-switch v-model:value="setData.showTopAction">
-              <template #checked>{{ t('common.on') }}</template>
-              <template #unchecked>{{ t('common.off') }}</template>
-            </n-switch>
-          </setting-item>
+            <!-- 音源设置 -->
+            <setting-item v-if="isElectron" :title="t('settings.playback.musicSources')">
+              <template #description>
+                <div class="flex items-center gap-2">
+                  <n-switch v-model:value="setData.enableMusicUnblock">
+                    <template #checked>{{ t('common.on') }}</template>
+                    <template #unchecked>{{ t('common.off') }}</template>
+                  </n-switch>
+                  <span>{{ t('settings.playback.musicUnblockEnableDesc') }}</span>
+                </div>
+                <div v-if="setData.enableMusicUnblock" class="mt-2 text-sm">
+                  <span class="text-gray-500">{{
+                    t('settings.playback.selectedMusicSources')
+                  }}</span>
+                  <span v-if="musicSources.length > 0" class="text-gray-400">{{
+                    musicSources.join(', ')
+                  }}</span>
+                  <span v-else class="text-red-500 text-xs">{{
+                    t('settings.playback.noMusicSources')
+                  }}</span>
+                </div>
+              </template>
+              <n-button
+                size="small"
+                :disabled="!setData.enableMusicUnblock"
+                @click="showMusicSourcesModal = true"
+              >
+                {{ t('settings.playback.configureMusicSources') }}
+              </n-button>
+            </setting-item>
 
-          <!-- 自动播放 -->
-          <setting-item
-            :title="t('settings.playback.autoPlay')"
-            :description="t('settings.playback.autoPlayDesc')"
-          >
-            <n-switch v-model:value="setData.autoPlay">
-              <template #checked>{{ t('common.on') }}</template>
-              <template #unchecked>{{ t('common.off') }}</template>
-            </n-switch>
-          </setting-item>
-        </setting-section>
-
-        <!-- 应用设置 -->
-        <setting-section
-          v-if="isElectron"
-          id="application"
-          :title="t('settings.sections.application')"
-          @ref="(el) => (sectionRefs.application = el as HTMLElement | null)"
-        >
-          <!-- 关闭行为 -->
-          <setting-item
-            :title="t('settings.application.closeAction')"
-            :description="t('settings.application.closeActionDesc')"
-          >
-            <n-select
-              v-model:value="setData.closeAction"
-              :options="closeActionOptions"
-              class="w-40 max-md:w-full"
-            />
-          </setting-item>
-
-          <!-- 快捷键 -->
-          <setting-item
-            :title="t('settings.application.shortcut')"
-            :description="t('settings.application.shortcutDesc')"
-          >
-            <n-button size="small" @click="showShortcutModal = true">{{
-              t('common.configure')
-            }}</n-button>
-          </setting-item>
-
-          <!-- 下载管理 -->
-          <setting-item v-if="isElectron" :title="t('settings.application.download')">
-            <template #description>
-              <n-switch v-model:value="setData.alwaysShowDownloadButton" class="mr-2">
-                <template #checked>{{ t('common.show') }}</template>
-                <template #unchecked>{{ t('common.hide') }}</template>
-              </n-switch>
-              {{ t('settings.application.downloadDesc') }}
-            </template>
-            <n-button size="small" @click="settingsStore.showDownloadDrawer = true">
-              {{ t('settings.application.download') }}
-            </n-button>
-          </setting-item>
-
-          <!-- 无限下载 -->
-          <setting-item :title="t('settings.application.unlimitedDownload')">
-            <template #description>
-              <n-switch v-model:value="setData.unlimitedDownload" class="mr-2">
+            <!-- 状态栏显示 -->
+            <setting-item
+              v-if="platform === 'darwin'"
+              :title="t('settings.playback.showStatusBar')"
+              :description="t('settings.playback.showStatusBarContent')"
+            >
+              <n-switch v-model:value="setData.showTopAction">
                 <template #checked>{{ t('common.on') }}</template>
                 <template #unchecked>{{ t('common.off') }}</template>
               </n-switch>
-              {{ t('settings.application.unlimitedDownloadDesc') }}
-            </template>
-          </setting-item>
+            </setting-item>
 
-          <!-- 下载路径 -->
-          <setting-item :title="t('settings.application.downloadPath')">
-            <template #description>
-              <span class="break-all">{{
-                setData.downloadPath || t('settings.application.downloadPathDesc')
-              }}</span>
-            </template>
-            <template #action>
-              <div class="flex items-center gap-2">
-                <n-button size="small" @click="openDownloadPath">{{ t('common.open') }}</n-button>
-                <n-button size="small" @click="selectDownloadPath">{{
-                  t('common.modify')
-                }}</n-button>
-              </div>
-            </template>
-          </setting-item>
+            <!-- 自动播放 -->
+            <setting-item
+              :title="t('settings.playback.autoPlay')"
+              :description="t('settings.playback.autoPlayDesc')"
+            >
+              <n-switch v-model:value="setData.autoPlay">
+                <template #checked>{{ t('common.on') }}</template>
+                <template #unchecked>{{ t('common.off') }}</template>
+              </n-switch>
+            </setting-item>
 
-          <!-- 远程控制 -->
-          <setting-item
-            :title="t('settings.application.remoteControl')"
-            :description="t('settings.application.remoteControlDesc')"
+            <!-- 音频输出设备 -->
+            <setting-item
+              v-if="isElectron"
+              :title="t('settings.playback.audioDevice')"
+              :description="t('settings.playback.audioDeviceDesc')"
+            >
+              <audio-device-settings />
+            </setting-item>
+          </setting-section>
+
+          <!-- 会员购买链接 -->
+          <div
+            class="mt-6 p-4 rounded-2xl bg-white dark:bg-neutral-900 border border-gray-100 dark:border-gray-800"
           >
-            <n-button size="small" @click="showRemoteControlModal = true">{{
-              t('common.configure')
-            }}</n-button>
-          </setting-item>
-        </setting-section>
+            <div class="text-sm font-medium text-gray-500 mb-3">支持正版</div>
+            <div class="text-base text-gray-900 dark:text-white mb-4">
+              大家还是需要支持正版，本软件只做开源探讨。各大音乐会员购买链接：
+            </div>
+            <div class="flex gap-3 flex-wrap">
+              <a
+                v-for="link in memberLinks"
+                :key="link.url"
+                class="px-4 py-2 rounded-xl bg-gray-50 dark:bg-black/20 text-primary hover:text-green-500 transition-colors"
+                :href="link.url"
+                target="_blank"
+              >
+                {{ link.name }} <i class="ri-external-link-line ml-1"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- 应用设置 -->
+        <div v-show="currentSection === 'application'" class="animate-fade-in">
+          <setting-section v-if="isElectron" :title="t('settings.sections.application')">
+            <!-- 关闭行为 -->
+            <setting-item
+              :title="t('settings.application.closeAction')"
+              :description="t('settings.application.closeActionDesc')"
+            >
+              <n-select
+                v-model:value="setData.closeAction"
+                :options="closeActionOptions"
+                class="w-40 max-md:w-full"
+              />
+            </setting-item>
+
+            <!-- 快捷键 -->
+            <setting-item
+              :title="t('settings.application.shortcut')"
+              :description="t('settings.application.shortcutDesc')"
+            >
+              <n-button size="small" @click="showShortcutModal = true">{{
+                t('common.configure')
+              }}</n-button>
+            </setting-item>
+
+            <!-- 下载管理 -->
+            <setting-item v-if="isElectron" :title="t('settings.application.download')">
+              <template #description>
+                <n-switch v-model:value="setData.alwaysShowDownloadButton" class="mr-2">
+                  <template #checked>{{ t('common.show') }}</template>
+                  <template #unchecked>{{ t('common.hide') }}</template>
+                </n-switch>
+                {{ t('settings.application.downloadDesc') }}
+              </template>
+              <n-button size="small" @click="router.push('/downloads')">
+                {{ t('settings.application.download') }}
+              </n-button>
+            </setting-item>
+
+            <!-- 无限下载 -->
+            <setting-item :title="t('settings.application.unlimitedDownload')">
+              <template #description>
+                <n-switch v-model:value="setData.unlimitedDownload" class="mr-2">
+                  <template #checked>{{ t('common.on') }}</template>
+                  <template #unchecked>{{ t('common.off') }}</template>
+                </n-switch>
+                {{ t('settings.application.unlimitedDownloadDesc') }}
+              </template>
+            </setting-item>
+
+            <!-- 下载路径 -->
+            <setting-item :title="t('settings.application.downloadPath')">
+              <template #description>
+                <span class="break-all">{{
+                  setData.downloadPath || t('settings.application.downloadPathDesc')
+                }}</span>
+              </template>
+              <template #action>
+                <div class="flex items-center gap-2">
+                  <n-button size="small" @click="openDownloadPath">{{ t('common.open') }}</n-button>
+                  <n-button size="small" @click="selectDownloadPath">{{
+                    t('common.modify')
+                  }}</n-button>
+                </div>
+              </template>
+            </setting-item>
+
+            <!-- 远程控制 -->
+            <setting-item
+              :title="t('settings.application.remoteControl')"
+              :description="t('settings.application.remoteControlDesc')"
+            >
+              <n-button size="small" @click="showRemoteControlModal = true">{{
+                t('common.configure')
+              }}</n-button>
+            </setting-item>
+          </setting-section>
+        </div>
 
         <!-- 网络设置 -->
-        <setting-section
-          v-if="isElectron"
-          id="network"
-          :title="t('settings.sections.network')"
-          @ref="(el) => (sectionRefs.network = el as HTMLElement | null)"
-        >
-          <!-- API端口 -->
-          <setting-item
-            :title="t('settings.network.apiPort')"
-            :description="t('settings.network.apiPortDesc')"
-          >
-            <n-input-number v-model:value="setData.musicApiPort" class="max-md:w-32" />
-          </setting-item>
+        <div v-show="currentSection === 'network'" class="animate-fade-in">
+          <setting-section v-if="isElectron" :title="t('settings.sections.network')">
+            <!-- API端口 -->
+            <setting-item
+              :title="t('settings.network.apiPort')"
+              :description="t('settings.network.apiPortDesc')"
+            >
+              <n-input-number v-model:value="setData.musicApiPort" class="max-md:w-32" />
+            </setting-item>
 
-          <!-- 代理设置 -->
-          <setting-item
-            :title="t('settings.network.proxy')"
-            :description="t('settings.network.proxyDesc')"
-          >
-            <template #action>
-              <div class="flex items-center gap-2">
-                <n-switch v-model:value="setData.proxyConfig.enable">
-                  <template #checked>{{ t('common.on') }}</template>
-                  <template #unchecked>{{ t('common.off') }}</template>
-                </n-switch>
-                <n-button size="small" @click="showProxyModal = true">{{
-                  t('common.configure')
-                }}</n-button>
-              </div>
-            </template>
-          </setting-item>
+            <!-- 代理设置 -->
+            <setting-item
+              :title="t('settings.network.proxy')"
+              :description="t('settings.network.proxyDesc')"
+            >
+              <template #action>
+                <div class="flex items-center gap-2">
+                  <n-switch v-model:value="setData.proxyConfig.enable">
+                    <template #checked>{{ t('common.on') }}</template>
+                    <template #unchecked>{{ t('common.off') }}</template>
+                  </n-switch>
+                  <n-button size="small" @click="showProxyModal = true">{{
+                    t('common.configure')
+                  }}</n-button>
+                </div>
+              </template>
+            </setting-item>
 
-          <!-- 真实IP -->
-          <setting-item
-            :title="t('settings.network.realIP')"
-            :description="t('settings.network.realIPDesc')"
-          >
-            <template #action>
-              <div class="flex items-center gap-2 max-md:flex-wrap">
-                <n-switch v-model:value="setData.enableRealIP">
-                  <template #checked>{{ t('common.on') }}</template>
-                  <template #unchecked>{{ t('common.off') }}</template>
-                </n-switch>
-                <n-input
-                  v-if="setData.enableRealIP"
-                  v-model:value="setData.realIP"
-                  placeholder="realIP"
-                  class="w-[200px] max-md:w-full"
-                  @blur="validateAndSaveRealIP"
-                />
-              </div>
-            </template>
-          </setting-item>
-        </setting-section>
+            <!-- 真实IP -->
+            <setting-item
+              :title="t('settings.network.realIP')"
+              :description="t('settings.network.realIPDesc')"
+            >
+              <template #action>
+                <div class="flex items-center gap-2 max-md:flex-wrap">
+                  <n-switch v-model:value="setData.enableRealIP">
+                    <template #checked>{{ t('common.on') }}</template>
+                    <template #unchecked>{{ t('common.off') }}</template>
+                  </n-switch>
+                  <n-input
+                    v-if="setData.enableRealIP"
+                    v-model:value="setData.realIP"
+                    placeholder="realIP"
+                    class="w-[200px] max-md:w-full"
+                    @blur="validateAndSaveRealIP"
+                  />
+                </div>
+              </template>
+            </setting-item>
+          </setting-section>
+        </div>
 
         <!-- 系统管理 -->
-        <setting-section
-          v-if="isElectron"
-          id="system"
-          :title="t('settings.sections.system')"
-          @ref="(el) => (sectionRefs.system = el as HTMLElement | null)"
-        >
-          <!-- 清除缓存 -->
-          <setting-item
-            :title="t('settings.system.cache')"
-            :description="t('settings.system.cacheDesc')"
-          >
-            <n-button size="small" @click="showClearCacheModal = true">{{
-              t('settings.system.cacheDesc')
-            }}</n-button>
-          </setting-item>
+        <div v-show="currentSection === 'system'" class="animate-fade-in">
+          <setting-section v-if="isElectron" :title="t('settings.sections.system')">
+            <!-- 清除缓存 -->
+            <setting-item
+              :title="t('settings.system.cache')"
+              :description="t('settings.system.cacheDesc')"
+            >
+              <n-button size="small" @click="showClearCacheModal = true">{{
+                t('settings.system.cacheDesc')
+              }}</n-button>
+            </setting-item>
 
-          <!-- 重启应用 -->
-          <setting-item
-            :title="t('settings.system.restart')"
-            :description="t('settings.system.restartDesc')"
-          >
-            <n-button size="small" @click="restartApp">{{ t('settings.system.restart') }}</n-button>
-          </setting-item>
-        </setting-section>
+            <!-- 重启应用 -->
+            <setting-item
+              :title="t('settings.system.restart')"
+              :description="t('settings.system.restartDesc')"
+            >
+              <n-button size="small" @click="restartApp">{{
+                t('settings.system.restart')
+              }}</n-button>
+            </setting-item>
+          </setting-section>
+        </div>
 
         <!-- 关于 -->
-        <setting-section
-          id="about"
-          :title="t('settings.sections.about')"
-          @ref="(el) => (sectionRefs.about = el as HTMLElement | null)"
-        >
-          <!-- 版本信息 -->
-          <setting-item :title="t('settings.about.version')">
-            <template #description>
-              {{ updateInfo.currentVersion }}
-              <n-tag v-if="updateInfo.hasUpdate" type="success" class="ml-2">
-                {{ t('settings.about.hasUpdate') }} {{ updateInfo.latestVersion }}
-              </n-tag>
-            </template>
-            <template #action>
-              <div class="flex items-center gap-2 flex-wrap">
-                <n-button size="small" :loading="checking" @click="checkForUpdates(true)">
-                  {{ checking ? t('settings.about.checking') : t('settings.about.checkUpdate') }}
-                </n-button>
-                <n-button v-if="updateInfo.hasUpdate" size="small" @click="openReleasePage">
-                  {{ t('settings.about.gotoUpdate') }}
-                </n-button>
-              </div>
-            </template>
-          </setting-item>
+        <div v-show="currentSection === 'about'" class="animate-fade-in">
+          <setting-section :title="t('settings.sections.about')">
+            <!-- 版本信息 -->
+            <setting-item :title="t('settings.about.version')">
+              <template #description>
+                {{ updateInfo.currentVersion }}
+                <n-tag v-if="updateInfo.hasUpdate" type="success" class="ml-2">
+                  {{ t('settings.about.hasUpdate') }} {{ updateInfo.latestVersion }}
+                </n-tag>
+              </template>
+              <template #action>
+                <div class="flex items-center gap-2 flex-wrap">
+                  <n-button size="small" :loading="checking" @click="checkForUpdates(true)">
+                    {{ checking ? t('settings.about.checking') : t('settings.about.checkUpdate') }}
+                  </n-button>
+                  <n-button v-if="updateInfo.hasUpdate" size="small" @click="openReleasePage">
+                    {{ t('settings.about.gotoUpdate') }}
+                  </n-button>
+                </div>
+              </template>
+            </setting-item>
 
-          <!-- 作者信息 -->
-          <setting-item
-            :title="t('settings.about.author')"
-            :description="t('settings.about.authorDesc')"
-            clickable
-            @click="openAuthor"
-          >
-            <n-button size="small" @click.stop="openAuthor">
-              <i class="ri-github-line mr-1"></i>{{ t('settings.about.gotoGithub') }}
-            </n-button>
-          </setting-item>
-        </setting-section>
+            <!-- 作者信息 -->
+            <setting-item
+              :title="t('settings.about.author')"
+              :description="t('settings.about.authorDesc')"
+              clickable
+              @click="openAuthor"
+            >
+              <n-button size="small" @click.stop="openAuthor">
+                <i class="ri-github-line mr-1"></i>{{ t('settings.about.gotoGithub') }}
+              </n-button>
+            </setting-item>
+          </setting-section>
+        </div>
 
         <!-- 捐赠支持 -->
-        <setting-section
-          id="donation"
-          :title="t('settings.sections.donation')"
-          @ref="(el) => (sectionRefs.donation = el as HTMLElement | null)"
-        >
-          <setting-item
-            :title="t('settings.sections.donation')"
-            :description="t('donation.message')"
-          >
-            <n-button text @click="toggleDonationList">
-              <template #icon>
-                <i :class="isDonationListVisible ? 'ri-eye-line' : 'ri-eye-off-line'" />
-              </template>
-              {{ isDonationListVisible ? t('common.hide') : t('common.show') }}
-            </n-button>
-          </setting-item>
-          <donation-list v-if="isDonationListVisible" />
-        </setting-section>
+        <div v-show="currentSection === 'donation'" class="animate-fade-in">
+          <setting-section :title="t('settings.sections.donation')">
+            <donation-list />
+          </setting-section>
+        </div>
+
+        <div class="h-20"></div>
+        <play-bottom />
       </div>
-      <play-bottom />
     </n-scrollbar>
 
     <!-- 弹窗组件 -->
@@ -559,14 +568,16 @@
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import { computed, h, nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { computed, h, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import localData from '@/../main/set.json';
 import { getUserDetail } from '@/api/login';
 import DonationList from '@/components/common/DonationList.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+import AudioDeviceSettings from '@/components/settings/AudioDeviceSettings.vue';
 import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
 import CookieSettingsModal from '@/components/settings/CookieSettingsModal.vue';
 import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
@@ -582,11 +593,10 @@ import { checkUpdate, UpdateResult } from '@/utils/update';
 
 import config from '../../../../package.json';
 import SettingItem from './SettingItem.vue';
-import SettingNav from './SettingNav.vue';
 import SettingSection from './SettingSection.vue';
 
 // ==================== 常量配置 ====================
-const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'kuwo', 'pyncmd', 'bilibili'];
+const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'kuwo', 'pyncmd'];
 
 const memberLinks = [
   { name: '网易云音乐会员', url: 'https://music.163.com/store/vip' },
@@ -607,6 +617,7 @@ const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 const message = useMessage();
 const { t } = useI18n();
+const router = useRouter();
 
 // ==================== 设置数据管理 ====================
 const saveSettings = useDebounceFn((data) => {
@@ -830,14 +841,6 @@ watch(
   { immediate: true }
 );
 
-// ==================== 捐赠列表 ====================
-const isDonationListVisible = ref(localStorage.getItem('donationListVisible') !== 'false');
-
-const toggleDonationList = () => {
-  isDonationListVisible.value = !isDonationListVisible.value;
-  localStorage.setItem('donationListVisible', isDonationListVisible.value.toString());
-};
-
 // ==================== 弹窗控制 ====================
 const showClearCacheModal = ref(false);
 const showShortcutModal = ref(false);
@@ -984,45 +987,6 @@ const navSections = computed(() => {
 });
 
 const currentSection = ref('basic');
-const scrollbarRef = ref();
-const sectionRefs = reactive<Record<string, HTMLElement | null>>({
-  basic: null,
-  playback: null,
-  application: null,
-  network: null,
-  system: null,
-  about: null,
-  donation: null
-});
-
-const scrollToSection = async (sectionId: string) => {
-  currentSection.value = sectionId;
-  const sectionEl = sectionRefs[sectionId];
-  if (sectionEl) {
-    await nextTick();
-    scrollbarRef.value?.scrollTo({ top: sectionEl.offsetTop - 20, behavior: 'smooth' });
-  }
-};
-
-const SCROLL_OFFSET_THRESHOLD = 100;
-
-const handleScroll = (e: any) => {
-  const { scrollTop } = e.target;
-  let lastValidSection = 'basic';
-
-  for (const section of settingSections) {
-    if (!section.electron || isElectron) {
-      const el = sectionRefs[section.id];
-      if (el && scrollTop >= el.offsetTop - SCROLL_OFFSET_THRESHOLD) {
-        lastValidSection = section.id;
-      }
-    }
-  }
-
-  if (lastValidSection !== currentSection.value) {
-    currentSection.value = lastValidSection;
-  }
-};
 
 // ==================== 初始化 ====================
 onMounted(async () => {
@@ -1045,9 +1009,6 @@ onMounted(async () => {
       gpuAccelerationChanged.value = false;
     });
   }
-
-  await nextTick();
-  handleScroll({ target: { scrollTop: 0 } });
 });
 </script>
 
@@ -1059,4 +1020,30 @@ onMounted(async () => {
 :deep(.n-input-number) {
   max-width: 140px;
 }
+
+.tab-item {
+  @apply py-1.5 px-4 mr-3 inline-block rounded-full cursor-pointer transition-all duration-300;
+  @apply text-sm font-medium;
+  @apply bg-gray-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400;
+  @apply hover:bg-gray-200 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white;
+
+  &.active {
+    @apply bg-primary text-white shadow-lg shadow-primary/25 scale-105;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 </style>