From b5bac302589c5371e9911b0e57f958d7c97569ed Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Wed, 11 Mar 2026 22:27:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor(settings):=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E4=B8=BA=E7=8B=AC=E7=AB=8B?=
 =?UTF-8?q?Tab=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E6=8D=90?=
 =?UTF-8?q?=E8=B5=A0=E5=88=97=E8=A1=A8=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将设置页面拆分为7个独立Tab组件（Basic/Playback/Application/Network/System/About/Donation）
- 抽取自定义SBtn/SSelect/SInput组件替代naive-ui原生组件
- 使用provide/inject共享setData/message/dialog
- 捐赠列表：去除dicebear外部头像改用首字母头像，去除n-popover改用title属性
- 捐赠列表：IntersectionObserver自动分页加载，首字母跳过*号等符号字符
- SInput：有suffix时增大右侧padding防止数值遮挡单位
---
 .../components/common/DonationList.vue        |  124 +-
 src/renderer/views/set/SBtn.vue               |   45 +
 src/renderer/views/set/SInput.vue             |  145 ++
 src/renderer/views/set/SSelect.vue            |  129 ++
 src/renderer/views/set/index.vue              | 1415 +----------------
 src/renderer/views/set/keys.ts                |    6 +
 src/renderer/views/set/tabs/AboutTab.vue      |  160 ++
 .../views/set/tabs/ApplicationTab.vue         |  114 ++
 src/renderer/views/set/tabs/BasicTab.vue      |  353 ++++
 src/renderer/views/set/tabs/DonationTab.vue   |   15 +
 src/renderer/views/set/tabs/NetworkTab.vue    |  124 ++
 src/renderer/views/set/tabs/PlaybackTab.vue   |  148 ++
 src/renderer/views/set/tabs/SystemTab.vue     |  499 ++++++
 13 files changed, 1865 insertions(+), 1412 deletions(-)
 create mode 100644 src/renderer/views/set/SBtn.vue
 create mode 100644 src/renderer/views/set/SInput.vue
 create mode 100644 src/renderer/views/set/SSelect.vue
 create mode 100644 src/renderer/views/set/keys.ts
 create mode 100644 src/renderer/views/set/tabs/AboutTab.vue
 create mode 100644 src/renderer/views/set/tabs/ApplicationTab.vue
 create mode 100644 src/renderer/views/set/tabs/BasicTab.vue
 create mode 100644 src/renderer/views/set/tabs/DonationTab.vue
 create mode 100644 src/renderer/views/set/tabs/NetworkTab.vue
 create mode 100644 src/renderer/views/set/tabs/PlaybackTab.vue
 create mode 100644 src/renderer/views/set/tabs/SystemTab.vue

diff --git a/src/renderer/components/common/DonationList.vue b/src/renderer/components/common/DonationList.vue
index 189e1b6..9f53e7a 100644
--- a/src/renderer/components/common/DonationList.vue
+++ b/src/renderer/components/common/DonationList.vue
@@ -55,7 +55,7 @@
     </div>
 
     <!-- 捐赠者列表 -->
-    <div class="donors-list">
+    <div class="donors-list px-4">
       <div class="flex items-center justify-between mb-4 px-1">
         <h4 class="text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2">
           <i class="ri-user-heart-line text-primary"></i>
@@ -69,23 +69,23 @@
 
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
         <div
-          v-for="(donor, index) in donors"
+          v-for="(donor, index) in visibleDonors"
           :key="donor.id"
-          class="donor-card group animate-fade-in-up"
-          :style="{ animationDelay: `${index * 10}ms` }"
+          class="donor-card group"
+          :class="index < FIRST_BATCH ? 'animate-fade-in-up' : ''"
+          :style="index < FIRST_BATCH ? { animationDelay: `${index * 10}ms` } : undefined"
         >
           <div
             class="h-full bg-white dark:bg-neutral-800/50 border border-gray-100 dark:border-gray-800 rounded-xl p-3 flex gap-3 hover:border-primary/30 hover:shadow-md hover:bg-white dark:hover:bg-neutral-800 transition-all duration-300"
           >
             <!-- 头像 -->
             <div class="relative flex-shrink-0">
-              <n-avatar
-                :src="donor.avatar"
-                :fallback-src="defaultAvatar"
-                round
-                :size="40"
-                class="border border-gray-100 dark:border-gray-700"
-              />
+              <div
+                class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border border-gray-100 dark:border-gray-700"
+                :class="avatarColorClass(donor.name)"
+              >
+                {{ avatarInitial(donor.name) }}
+              </div>
               <div
                 v-if="index < 3"
                 class="absolute -top-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center text-[10px] text-white border border-white dark:border-gray-800"
@@ -110,16 +110,13 @@
 
               <!-- 留言或日期 -->
               <div class="mt-1">
-                <n-popover v-if="donor.message" trigger="hover" placement="top">
-                  <template #trigger>
-                    <div
-                      class="text-xs text-gray-500 dark:text-gray-400 truncate cursor-help border-b border-dashed border-gray-300 dark:border-gray-600 inline-block max-w-full"
-                    >
-                      "{{ donor.message }}"
-                    </div>
-                  </template>
-                  <div class="max-w-[200px] text-xs">{{ donor.message }}</div>
-                </n-popover>
+                <div
+                  v-if="donor.message"
+                  class="text-xs text-gray-500 dark:text-gray-400 truncate border-b border-dashed border-gray-300 dark:border-gray-600 inline-block max-w-full"
+                  :title="donor.message"
+                >
+                  "{{ donor.message }}"
+                </div>
                 <div v-else class="text-xs text-gray-400 dark:text-gray-600">
                   {{ donor.date }}
                 </div>
@@ -128,12 +125,15 @@
           </div>
         </div>
       </div>
+
+      <!-- 自动加载哨兵 -->
+      <div v-if="hasMore" ref="sentinelRef" class="h-1"></div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onActivated, onMounted, ref } from 'vue';
+import { computed, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { Donor } from '@/api/donation';
@@ -143,21 +143,81 @@ import wechat from '@/assets/wechat.png';
 
 const { t } = useI18n();
 
-const defaultAvatar = 'https://avatars.githubusercontent.com/u/0?v=4';
-const donors = ref<Donor[]>([]);
+const PAGE_SIZE = 40;
+const FIRST_BATCH = 16;
+
+const AVATAR_COLORS = [
+  'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400',
+  'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400',
+  'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400',
+  'bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400',
+  'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-400',
+  'bg-pink-100 text-pink-600 dark:bg-pink-900/30 dark:text-pink-400',
+  'bg-cyan-100 text-cyan-600 dark:bg-cyan-900/30 dark:text-cyan-400',
+  'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
+];
+
+const allDonors = ref<Donor[]>([]);
+const visibleCount = ref(PAGE_SIZE);
 const isLoading = ref(false);
+const sentinelRef = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+const visibleDonors = computed(() => allDonors.value.slice(0, visibleCount.value));
+const hasMore = computed(() => visibleCount.value < allDonors.value.length);
+
+const isTextChar = (ch: string) => /[\p{L}\p{N}]/u.test(ch);
+
+const avatarInitial = (name: string) => {
+  if (!name) return '?';
+  for (const ch of name) {
+    if (isTextChar(ch)) {
+      return ch.toUpperCase();
+    }
+  }
+  return '?';
+};
+
+const avatarColorClass = (name: string) => {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+};
+
+const loadMore = () => {
+  visibleCount.value = Math.min(visibleCount.value + PAGE_SIZE, allDonors.value.length);
+};
+
+const setupObserver = () => {
+  if (observer) observer.disconnect();
+  if (!sentinelRef.value) return;
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0]?.isIntersecting && hasMore.value) {
+        loadMore();
+      }
+    },
+    { rootMargin: '200px' }
+  );
+  observer.observe(sentinelRef.value);
+};
+
+watch(sentinelRef, (el) => {
+  if (el) setupObserver();
+});
+
+onBeforeUnmount(() => {
+  observer?.disconnect();
+});
 
 const fetchDonors = async () => {
   isLoading.value = true;
   try {
     const data = await getDonationList();
-    // Sort by amount desc
-    donors.value = data
-      .sort((a, b) => Number(b.amount) - Number(a.amount))
-      .map((donor) => ({
-        ...donor,
-        avatar: `https://api.dicebear.com/7.x/micah/svg?seed=${donor.name}`
-      }));
+    allDonors.value = data.sort((a, b) => Number(b.amount) - Number(a.amount));
+    visibleCount.value = PAGE_SIZE;
   } catch (error) {
     console.error('Failed to fetch donors:', error);
   } finally {
@@ -173,7 +233,7 @@ onMounted(() => fetchDonors());
 onActivated(() => fetchDonors());
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .animate-fade-in-up {
   animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
 }
diff --git a/src/renderer/views/set/SBtn.vue b/src/renderer/views/set/SBtn.vue
new file mode 100644
index 0000000..50fe7c5
--- /dev/null
+++ b/src/renderer/views/set/SBtn.vue
@@ -0,0 +1,45 @@
+<template>
+  <button
+    :disabled="disabled || loading"
+    class="inline-flex items-center justify-center gap-1.5 rounded-[10px] px-3.5 py-1.5 text-sm font-medium transition-all duration-200 select-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-95"
+    :class="variantClass"
+    @click="$emit('click', $event)"
+  >
+    <i v-if="loading" class="ri-loader-4-line animate-spin text-sm" />
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({ name: 'SBtn' });
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'default' | 'primary' | 'danger' | 'ghost';
+    disabled?: boolean;
+    loading?: boolean;
+  }>(),
+  {
+    variant: 'default',
+    disabled: false,
+    loading: false
+  }
+);
+
+defineEmits<{ click: [event: MouseEvent] }>();
+
+const variantClass = computed(() => {
+  switch (props.variant) {
+    case 'primary':
+      return 'bg-primary text-white hover:bg-primary/85 shadow-sm shadow-primary/20';
+    case 'danger':
+      return 'bg-red-50 text-red-600 hover:bg-red-100 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60';
+    case 'ghost':
+      return 'bg-transparent text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800';
+    default:
+      return 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700';
+  }
+});
+</script>
diff --git a/src/renderer/views/set/SInput.vue b/src/renderer/views/set/SInput.vue
new file mode 100644
index 0000000..49eabf0
--- /dev/null
+++ b/src/renderer/views/set/SInput.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="inline-flex items-center gap-1" :class="widthClass">
+    <button
+      v-if="type === 'number' && showButtons"
+      class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-500 transition-colors hover:bg-neutral-200 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
+      :disabled="disabled || atMin"
+      @click="decrement"
+    >
+      <i class="ri-subtract-line text-sm" />
+    </button>
+
+    <div class="relative flex-1 min-w-0">
+      <input
+        ref="inputRef"
+        :type="type === 'number' ? 'text' : type"
+        :value="displayValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        inputmode="decimal"
+        class="w-full rounded-[10px] border border-neutral-200 bg-neutral-50 py-1.5 pl-3 text-sm text-neutral-900 transition-all duration-200 outline-none placeholder:text-neutral-400 focus:border-primary focus:bg-white focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder:text-neutral-500 dark:focus:bg-neutral-900"
+        :class="[type === 'number' && !suffix ? 'text-center pr-3' : '', suffix ? 'pr-10' : 'pr-3']"
+        @input="handleInput"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
+      />
+      <span
+        v-if="suffix"
+        class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-neutral-400"
+      >
+        {{ suffix }}
+      </span>
+    </div>
+
+    <button
+      v-if="type === 'number' && showButtons"
+      class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-500 transition-colors hover:bg-neutral-200 active:scale-95 disabled:opacity-40 disabled:cursor-not-allowed dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
+      :disabled="disabled || atMax"
+      @click="increment"
+    >
+      <i class="ri-add-line text-sm" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+defineOptions({ name: 'SInput' });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number;
+    type?: 'text' | 'number';
+    placeholder?: string;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    suffix?: string;
+    showButtons?: boolean;
+    width?: string;
+  }>(),
+  {
+    modelValue: '',
+    type: 'text',
+    placeholder: '',
+    disabled: false,
+    min: -Infinity,
+    max: Infinity,
+    step: 1,
+    suffix: '',
+    showButtons: true,
+    width: ''
+  }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number];
+  blur: [];
+}>();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+
+const numericValue = computed(() => {
+  const n = Number(props.modelValue);
+  return Number.isFinite(n) ? n : 0;
+});
+
+const displayValue = computed(() => {
+  if (props.type === 'number') {
+    return String(props.modelValue ?? '');
+  }
+  return String(props.modelValue ?? '');
+});
+
+const atMin = computed(() => numericValue.value <= props.min);
+const atMax = computed(() => numericValue.value >= props.max);
+
+const widthClass = computed(() => props.width);
+
+const clamp = (n: number) => Math.min(props.max, Math.max(props.min, n));
+
+const handleInput = (e: Event) => {
+  const val = (e.target as HTMLInputElement).value;
+  if (props.type === 'text') {
+    emit('update:modelValue', val);
+    return;
+  }
+  if (val === '' || val === '-') {
+    emit('update:modelValue', val as unknown as number);
+    return;
+  }
+  const n = Number(val);
+  if (!Number.isNaN(n)) {
+    emit('update:modelValue', n);
+  }
+};
+
+const handleBlur = () => {
+  if (props.type === 'number') {
+    const clamped = clamp(numericValue.value);
+    emit('update:modelValue', clamped);
+  }
+  emit('blur');
+};
+
+const increment = () => {
+  emit('update:modelValue', clamp(numericValue.value + props.step));
+};
+
+const decrement = () => {
+  emit('update:modelValue', clamp(numericValue.value - props.step));
+};
+
+const handleKeydown = (e: KeyboardEvent) => {
+  if (props.type !== 'number') return;
+  if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    increment();
+  } else if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    decrement();
+  }
+};
+</script>
diff --git a/src/renderer/views/set/SSelect.vue b/src/renderer/views/set/SSelect.vue
new file mode 100644
index 0000000..b0b7ca8
--- /dev/null
+++ b/src/renderer/views/set/SSelect.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="relative inline-block" :class="widthClass" ref="wrapperRef">
+    <button
+      :disabled="disabled"
+      class="flex w-full items-center justify-between gap-2 rounded-[10px] border px-3 py-1.5 text-sm transition-all duration-200 select-none disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="
+        isOpen
+          ? 'border-primary bg-white dark:bg-neutral-900 ring-2 ring-primary/20'
+          : 'border-neutral-200 bg-neutral-50 hover:border-neutral-300 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600'
+      "
+      @click="toggle"
+    >
+      <span
+        class="truncate"
+        :class="selectedLabel ? 'text-neutral-900 dark:text-neutral-100' : 'text-neutral-400'"
+      >
+        {{ selectedLabel || placeholder }}
+      </span>
+      <i
+        class="ri-arrow-down-s-line text-base text-neutral-400 transition-transform duration-200 flex-shrink-0"
+        :class="{ 'rotate-180': isOpen }"
+      />
+    </button>
+
+    <Transition
+      enter-active-class="transition duration-150 ease-out"
+      enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition duration-100 ease-in"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
+    >
+      <div
+        v-if="isOpen"
+        class="absolute z-50 mt-1.5 w-full min-w-[160px] overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-lg dark:border-neutral-700 dark:bg-neutral-900"
+        :class="dropdownPosition === 'top' ? 'bottom-full mb-1.5 mt-0' : ''"
+      >
+        <div class="max-h-[240px] overflow-y-auto py-1">
+          <div
+            v-for="opt in options"
+            :key="String(opt.value)"
+            class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors"
+            :class="
+              opt.value === modelValue
+                ? 'bg-primary/10 text-primary font-medium'
+                : 'text-neutral-700 hover:bg-neutral-50 dark:text-neutral-300 dark:hover:bg-neutral-800'
+            "
+            @click="select(opt.value)"
+          >
+            <span class="truncate flex-1">{{ opt.label }}</span>
+            <i
+              v-if="opt.value === modelValue"
+              class="ri-check-line text-primary text-base flex-shrink-0"
+            />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+defineOptions({ name: 'SSelect' });
+
+type OptionValue = string | number | boolean;
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: OptionValue;
+    options?: { label: string; value: OptionValue }[];
+    placeholder?: string;
+    disabled?: boolean;
+    width?: string;
+  }>(),
+  {
+    modelValue: undefined,
+    options: () => [],
+    placeholder: '',
+    disabled: false,
+    width: 'w-40'
+  }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: OptionValue];
+}>();
+
+const isOpen = ref(false);
+const wrapperRef = ref<HTMLElement | null>(null);
+const dropdownPosition = ref<'bottom' | 'top'>('bottom');
+
+const widthClass = computed(() => props.width);
+
+const selectedLabel = computed(() => {
+  const opt = props.options.find((o) => o.value === props.modelValue);
+  return opt?.label ?? '';
+});
+
+const toggle = () => {
+  if (props.disabled) return;
+  isOpen.value = !isOpen.value;
+  if (isOpen.value) {
+    checkDropdownPosition();
+  }
+};
+
+const select = (value: OptionValue) => {
+  emit('update:modelValue', value);
+  isOpen.value = false;
+};
+
+const checkDropdownPosition = () => {
+  if (!wrapperRef.value) return;
+  const rect = wrapperRef.value.getBoundingClientRect();
+  const spaceBelow = window.innerHeight - rect.bottom;
+  dropdownPosition.value = spaceBelow < 260 ? 'top' : 'bottom';
+};
+
+const onClickOutside = (e: MouseEvent) => {
+  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) {
+    isOpen.value = false;
+  }
+};
+
+onMounted(() => document.addEventListener('click', onClickOutside));
+onBeforeUnmount(() => document.removeEventListener('click', onClickOutside));
+</script>
diff --git a/src/renderer/views/set/index.vue b/src/renderer/views/set/index.vue
index 33814d9..4c0a7a1 100644
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -13,8 +13,12 @@
           <div
             v-for="section in navSections"
             :key="section.id"
-            class="tab-item"
-            :class="{ active: currentSection === section.id }"
+            class="py-1.5 px-4 mr-3 inline-block rounded-full cursor-pointer transition-all duration-300 text-sm font-medium select-none"
+            :class="
+              currentSection === section.id
+                ? 'bg-primary text-white shadow-lg shadow-primary/25 scale-105'
+                : 'bg-gray-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-gray-200 dark:hover:bg-neutral-800 hover:text-neutral-900 dark:hover:text-white'
+            "
             @click="currentSection = section.id"
           >
             {{ section.title }}
@@ -26,758 +30,66 @@
     <!-- 内容区域 -->
     <n-scrollbar class="flex-1">
       <div class="w-full mx-auto pb-32 pt-6 page-padding">
-        <!-- 基础设置 -->
         <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.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>
-
-            <!-- 字体预览 -->
-            <div
-              v-if="isElectron && selectedFonts.length > 0"
-              class="p-4 border-b border-gray-100 dark:border-gray-800"
-            >
-              <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>
+          <basic-tab />
         </div>
 
-        <!-- 播放设置 -->
         <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')"
-            >
-              <n-select
-                v-model:value="setData.musicQuality"
-                :options="qualityOptions"
-                class="w-40 max-md:w-full"
-              />
-            </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
-              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
-              :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
-              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"
-          >
-            <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>
+          <playback-tab />
         </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>
+          <application-tab />
         </div>
 
-        <!-- 网络设置 -->
         <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>
-
-            <!-- 真实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>
+          <network-tab />
         </div>
 
-        <!-- 系统管理 -->
         <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.diskCache')"
-              :description="t('settings.system.diskCacheDesc')"
-            >
-              <n-switch v-model:value="setData.enableDiskCache">
-                <template #checked>{{ t('common.on') }}</template>
-                <template #unchecked>{{ t('common.off') }}</template>
-              </n-switch>
-            </setting-item>
-
-            <!-- 缓存目录 -->
-            <setting-item
-              :title="t('settings.system.cacheDirectory')"
-              :description="
-                setData.diskCacheDir ||
-                diskCacheStats.directory ||
-                t('settings.system.cacheDirectoryDesc')
-              "
-            >
-              <template #action>
-                <div class="flex items-center gap-2 max-md:flex-wrap">
-                  <n-button size="small" @click="selectCacheDirectory">
-                    {{ t('settings.system.selectDirectory') }}
-                  </n-button>
-                  <n-button size="small" @click="openCacheDirectory">
-                    {{ t('settings.system.openDirectory') }}
-                  </n-button>
-                </div>
-              </template>
-            </setting-item>
-
-            <!-- 缓存上限 -->
-            <setting-item
-              :title="t('settings.system.cacheMaxSize')"
-              :description="t('settings.system.cacheMaxSizeDesc')"
-            >
-              <template #action>
-                <div class="flex items-center gap-2">
-                  <n-input-number
-                    v-model:value="setData.diskCacheMaxSizeMB"
-                    :min="256"
-                    :max="102400"
-                    :step="256"
-                    class="max-md:w-32"
-                  />
-                  <span class="text-xs text-neutral-500">MB</span>
-                </div>
-              </template>
-            </setting-item>
-
-            <!-- 清理策略 -->
-            <setting-item
-              :title="t('settings.system.cleanupPolicy')"
-              :description="t('settings.system.cleanupPolicyDesc')"
-            >
-              <n-select
-                v-model:value="setData.diskCacheCleanupPolicy"
-                :options="cleanupPolicyOptions"
-                class="w-40"
-              />
-            </setting-item>
-
-            <!-- 缓存状态 -->
-            <setting-item
-              :title="t('settings.system.cacheStatus')"
-              :description="
-                t('settings.system.cacheStatusDesc', {
-                  used: formatBytes(diskCacheStats.totalSizeBytes),
-                  limit: `${setData.diskCacheMaxSizeMB || diskCacheStats.maxSizeMB || 0} MB`
-                })
-              "
-            >
-              <template #action>
-                <div class="flex items-center gap-3 max-md:flex-wrap">
-                  <div class="w-40 max-md:w-32">
-                    <n-progress type="line" :percentage="diskCacheUsagePercent" />
-                  </div>
-                  <span class="text-xs text-neutral-500">
-                    {{
-                      t('settings.system.cacheStatusDetail', {
-                        musicCount: diskCacheStats.musicFiles,
-                        lyricCount: diskCacheStats.lyricFiles
-                      })
-                    }}
-                  </span>
-                  <n-button size="small" @click="refreshDiskCacheStats()">{{
-                    t('common.refresh')
-                  }}</n-button>
-                </div>
-              </template>
-            </setting-item>
-
-            <!-- 手动清理磁盘缓存 -->
-            <setting-item
-              :title="t('settings.system.manageDiskCache')"
-              :description="t('settings.system.manageDiskCacheDesc')"
-            >
-              <template #action>
-                <div class="flex items-center gap-2 max-md:flex-wrap">
-                  <n-button size="small" @click="clearDiskCacheByScope('music')">
-                    {{ t('settings.system.clearMusicCache') }}
-                  </n-button>
-                  <n-button size="small" @click="clearDiskCacheByScope('lyrics')">
-                    {{ t('settings.system.clearLyricCache') }}
-                  </n-button>
-                  <n-button type="error" size="small" @click="clearDiskCacheByScope('all')">
-                    {{ t('settings.system.clearAllCache') }}
-                  </n-button>
-                </div>
-              </template>
-            </setting-item>
-
-            <!-- 清除缓存 -->
-            <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>
+          <system-tab />
         </div>
 
-        <!-- 关于 -->
         <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>
-                <div class="flex flex-wrap items-center gap-2">
-                  <span>{{ updateInfo.currentVersion }}</span>
-                  <n-tag v-if="updateInfo.hasUpdate" type="success">
-                    {{ t('settings.about.hasUpdate') }} {{ updateInfo.latestVersion }}
-                  </n-tag>
-                </div>
-                <div v-if="hasManualUpdateFallback" class="mt-2 text-xs text-amber-600">
-                  {{ appUpdateState.errorMessage || t('settings.about.messages.checkError') }}
-                </div>
-              </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>
-                  <n-button
-                    v-if="hasManualUpdateFallback"
-                    size="small"
-                    tertiary
-                    @click="openManualUpdatePage"
-                  >
-                    {{ t('settings.about.manualUpdate') }}
-                  </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>
+          <about-tab />
         </div>
 
-        <!-- 捐赠支持 -->
         <div v-show="currentSection === 'donation'" class="animate-fade-in">
-          <setting-section :title="t('settings.sections.donation')">
-            <donation-list />
-          </setting-section>
+          <donation-tab />
         </div>
 
         <div class="h-20"></div>
         <play-bottom />
       </div>
     </n-scrollbar>
-
-    <!-- 弹窗组件 -->
-    <template v-if="isElectron">
-      <shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
-      <proxy-settings
-        v-model:show="showProxyModal"
-        :config="proxyForm"
-        @confirm="handleProxyConfirm"
-      />
-      <music-source-settings v-model:show="showMusicSourcesModal" v-model:sources="musicSources" />
-      <remote-control-setting v-model:visible="showRemoteControlModal" />
-    </template>
-
-    <cookie-settings-modal
-      v-model:show="showTokenModal"
-      :initial-value="currentToken"
-      @save="handleTokenSave"
-    />
-    <clear-cache-settings v-model:show="showClearCacheModal" @confirm="clearCache" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
 import { useDialog, useMessage } from 'naive-ui';
-import { computed, h, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, provide, 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';
-import ProxySettings from '@/components/settings/ProxySettings.vue';
-import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
-import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
 import { useSettingsStore } from '@/store/modules/settings';
-import { useUserStore } from '@/store/modules/user';
-import { type Platform } from '@/types/music';
-import { isElectron, isMobile } from '@/utils';
-import { openDirectory, selectDirectory } from '@/utils/fileOperation';
-import { checkUpdate, UpdateResult } from '@/utils/update';
+import { isElectron } from '@/utils';
 
 import config from '../../../../package.json';
-import {
-  APP_UPDATE_STATUS,
-  createDefaultAppUpdateState,
-  hasAvailableAppUpdate
-} from '../../../shared/appUpdate';
-import SettingItem from './SettingItem.vue';
-import SettingSection from './SettingSection.vue';
+import { createDefaultAppUpdateState } from '../../../shared/appUpdate';
+import { SETTINGS_DATA_KEY, SETTINGS_DIALOG_KEY, SETTINGS_MESSAGE_KEY } from './keys';
+import AboutTab from './tabs/AboutTab.vue';
+import ApplicationTab from './tabs/ApplicationTab.vue';
+import BasicTab from './tabs/BasicTab.vue';
+import DonationTab from './tabs/DonationTab.vue';
+import NetworkTab from './tabs/NetworkTab.vue';
+import PlaybackTab from './tabs/PlaybackTab.vue';
+import SystemTab from './tabs/SystemTab.vue';
 
-// ==================== 常量配置 ====================
-const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'kuwo', 'pyncmd'];
-
-const memberLinks = [
-  { name: '网易云音乐会员', url: 'https://music.163.com/store/vip' },
-  { name: 'QQ音乐会员', url: 'https://y.qq.com/portal/vipportal/' },
-  { name: '酷狗音乐会员', url: 'https://vip.kugou.com/' }
-];
-
-const fontPreviews = [
-  { key: 'chinese' },
-  { key: 'english' },
-  { key: 'japanese' },
-  { key: 'korean' }
-];
-
-type DiskCacheScope = 'all' | 'music' | 'lyrics';
-type DiskCacheCleanupPolicy = 'lru' | 'fifo';
-type CacheSwitchAction = 'migrate' | 'destroy' | 'keep';
-
-type DiskCacheConfig = {
-  enabled: boolean;
-  directory: string;
-  maxSizeMB: number;
-  cleanupPolicy: DiskCacheCleanupPolicy;
-};
-
-type DiskCacheStats = DiskCacheConfig & {
-  totalSizeBytes: number;
-  musicSizeBytes: number;
-  lyricSizeBytes: number;
-  totalFiles: number;
-  musicFiles: number;
-  lyricFiles: number;
-  usage: number;
-};
-
-type SwitchCacheDirectoryResult = {
-  success: boolean;
-  config: DiskCacheConfig;
-  migratedFiles: number;
-  destroyedFiles: number;
-};
-
-// ==================== 平台和Store ====================
-const platform = window.electron ? window.electron.ipcRenderer.sendSync('get-platform') : 'web';
 const settingsStore = useSettingsStore();
-const userStore = useUserStore();
 const message = useMessage();
 const dialog = useDialog();
 const { t } = useI18n();
-const router = useRouter();
 
 // ==================== 设置数据管理 ====================
 const saveSettings = useDebounceFn((data) => {
@@ -813,643 +125,16 @@ onUnmounted(() => {
   settingsStore.setSetData(localSetData.value);
 });
 
-// ==================== 选项配置 ====================
-const translationEngineOptions = computed(() => [
-  { label: t('settings.translationEngineOptions.none'), value: 'none' },
-  { label: t('settings.translationEngineOptions.opencc'), value: 'opencc' }
-]);
-
-const qualityOptions = computed(() => [
-  { label: t('settings.playback.qualityOptions.standard'), value: 'standard' },
-  { label: t('settings.playback.qualityOptions.higher'), value: 'higher' },
-  { label: t('settings.playback.qualityOptions.exhigh'), value: 'exhigh' },
-  { label: t('settings.playback.qualityOptions.lossless'), value: 'lossless' },
-  { label: t('settings.playback.qualityOptions.hires'), value: 'hires' },
-  { label: t('settings.playback.qualityOptions.jyeffect'), value: 'jyeffect' },
-  { label: t('settings.playback.qualityOptions.sky'), value: 'sky' },
-  { label: t('settings.playback.qualityOptions.dolby'), value: 'dolby' },
-  { label: t('settings.playback.qualityOptions.jymaster'), value: 'jymaster' }
-]);
-
-const closeActionOptions = computed(() => [
-  { label: t('settings.application.closeOptions.ask'), value: 'ask' },
-  { label: t('settings.application.closeOptions.minimize'), value: 'minimize' },
-  { label: t('settings.application.closeOptions.close'), value: 'close' }
-]);
-
-const animationSpeedMarks = computed(() => ({
-  0.1: t('settings.basic.animationSpeed.slow'),
-  1: t('settings.basic.animationSpeed.normal'),
-  3: t('settings.basic.animationSpeed.fast')
-}));
-
-// ==================== 主题设置 ====================
-const isDarkTheme = computed({
-  get: () => settingsStore.theme === 'dark',
-  set: () => settingsStore.toggleTheme()
-});
-
-const handleAutoThemeChange = (value: boolean) => {
-  settingsStore.setAutoTheme(value);
-};
-
-// ==================== GPU加速 ====================
-const gpuAccelerationChanged = ref(false);
-
-const handleGpuAccelerationChange = (enabled: boolean) => {
-  try {
-    if (window.electron) {
-      window.electron.ipcRenderer.send('update-gpu-acceleration', enabled);
-      gpuAccelerationChanged.value = true;
-      message.info(t('settings.basic.gpuAccelerationChangeSuccess'));
-    }
-  } catch (error) {
-    console.error('GPU加速设置更新失败:', error);
-    message.error(t('settings.basic.gpuAccelerationChangeError'));
-  }
-};
-
-// ==================== 更新检查 ====================
-const checking = ref(false);
-const webUpdateInfo = ref<UpdateResult>({
-  hasUpdate: false,
-  latestVersion: '',
-  currentVersion: config.version,
-  releaseInfo: null
-});
-
-const appUpdateState = computed(() => settingsStore.appUpdateState);
-const hasAppUpdate = computed(() => hasAvailableAppUpdate(appUpdateState.value));
-const hasManualUpdateFallback = computed(
-  () => isElectron && appUpdateState.value.status === APP_UPDATE_STATUS.error
-);
-
-const updateInfo = computed<UpdateResult>(() => {
-  if (!isElectron) {
-    return webUpdateInfo.value;
-  }
-
-  return {
-    hasUpdate: hasAppUpdate.value,
-    latestVersion: appUpdateState.value.availableVersion ?? '',
-    currentVersion: appUpdateState.value.currentVersion || config.version,
-    releaseInfo: appUpdateState.value.availableVersion
-      ? {
-          tag_name: appUpdateState.value.availableVersion,
-          body: appUpdateState.value.releaseNotes,
-          html_url: appUpdateState.value.releasePageUrl,
-          assets: []
-        }
-      : null
-  };
-});
-
-const checkForUpdates = async (isClick = false) => {
-  checking.value = true;
-  try {
-    if (isElectron) {
-      const result = await window.api.checkAppUpdate(isClick);
-      settingsStore.setAppUpdateState(result);
-
-      if (hasAvailableAppUpdate(result)) {
-        if (isClick) {
-          settingsStore.setShowUpdateModal(true);
-        }
-      } else if (result.status === APP_UPDATE_STATUS.notAvailable && isClick) {
-        message.success(t('settings.about.latest'));
-      } else if (result.status === APP_UPDATE_STATUS.error && isClick) {
-        message.error(result.errorMessage || t('settings.about.messages.checkError'));
-      }
-
-      return;
-    }
-
-    const result = await checkUpdate(config.version);
-    if (result) {
-      webUpdateInfo.value = result;
-      if (!result.hasUpdate && isClick) {
-        message.success(t('settings.about.latest'));
-      }
-    } else if (isClick) {
-      message.success(t('settings.about.latest'));
-    }
-  } catch (error) {
-    console.error('检查更新失败:', error);
-    if (isClick) {
-      message.error(t('settings.about.messages.checkError'));
-    }
-  } finally {
-    checking.value = false;
-  }
-};
-
-const openReleasePage = () => {
-  if (isElectron) {
-    settingsStore.setShowUpdateModal(true);
-    return;
-  }
-
-  window.open(updateInfo.value.releaseInfo?.html_url || setData.value.authorUrl);
-};
-
-const openManualUpdatePage = async () => {
-  if (isElectron) {
-    await window.api.openAppUpdatePage();
-    return;
-  }
-
-  window.open(updateInfo.value.releaseInfo?.html_url || setData.value.authorUrl);
-};
-
-const openAuthor = () => {
-  window.open(setData.value.authorUrl);
-};
-
-const restartApp = () => {
-  window.electron.ipcRenderer.send('restart');
-};
-
-// ==================== 下载路径 ====================
-const selectDownloadPath = async () => {
-  const path = await selectDirectory(message);
-  if (path) {
-    setData.value = { ...setData.value, downloadPath: path };
-  }
-};
-
-const openDownloadPath = () => {
-  openDirectory(setData.value.downloadPath, message);
-};
-
-// ==================== 磁盘缓存设置 ====================
-const diskCacheStats = ref<DiskCacheStats>({
-  enabled: true,
-  directory: '',
-  maxSizeMB: 4096,
-  cleanupPolicy: 'lru',
-  totalSizeBytes: 0,
-  musicSizeBytes: 0,
-  lyricSizeBytes: 0,
-  totalFiles: 0,
-  musicFiles: 0,
-  lyricFiles: 0,
-  usage: 0
-});
-const applyingDiskCacheConfig = ref(false);
-const switchingCacheDirectory = ref(false);
-
-const cleanupPolicyOptions = computed(() => [
-  { label: t('settings.system.cleanupPolicyOptions.lru'), value: 'lru' },
-  { label: t('settings.system.cleanupPolicyOptions.fifo'), value: 'fifo' }
-]);
-
-const diskCacheUsagePercent = computed(() =>
-  Math.min(100, Math.max(0, Math.round((diskCacheStats.value.usage || 0) * 100)))
-);
-
-const formatBytes = (bytes: number) => {
-  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  let value = bytes;
-  let unitIndex = 0;
-  while (value >= 1024 && unitIndex < units.length - 1) {
-    value /= 1024;
-    unitIndex++;
-  }
-  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;
-};
-
-const readDiskCacheConfigFromUI = (): DiskCacheConfig => {
-  const cleanupPolicy: DiskCacheCleanupPolicy =
-    setData.value.diskCacheCleanupPolicy === 'fifo' ? 'fifo' : 'lru';
-  const maxSizeMB = Math.max(256, Math.floor(Number(setData.value.diskCacheMaxSizeMB || 4096)));
-
-  return {
-    enabled: setData.value.enableDiskCache !== false,
-    directory: String(setData.value.diskCacheDir || ''),
-    maxSizeMB,
-    cleanupPolicy
-  };
-};
-
-const refreshDiskCacheStats = async (silent: boolean = true) => {
-  if (!window.electron) return;
-  try {
-    const stats = (await window.electron.ipcRenderer.invoke(
-      'get-disk-cache-stats'
-    )) as DiskCacheStats;
-    if (stats) {
-      diskCacheStats.value = stats;
-    }
-  } catch (error) {
-    console.error('读取磁盘缓存统计失败:', error);
-    if (!silent) {
-      message.error(t('settings.system.messages.diskCacheStatsLoadFailed'));
-    }
-  }
-};
-
-const loadDiskCacheConfig = async () => {
-  if (!window.electron) return;
-
-  try {
-    const config = (await window.electron.ipcRenderer.invoke(
-      'get-disk-cache-config'
-    )) as DiskCacheConfig;
-    if (config) {
-      setData.value = {
-        ...setData.value,
-        enableDiskCache: config.enabled,
-        diskCacheDir: config.directory,
-        diskCacheMaxSizeMB: config.maxSizeMB,
-        diskCacheCleanupPolicy: config.cleanupPolicy
-      };
-    }
-  } catch (error) {
-    console.error('读取磁盘缓存配置失败:', error);
-  }
-};
-
-const applyDiskCacheConfig = async () => {
-  if (!window.electron || applyingDiskCacheConfig.value) return;
-
-  applyingDiskCacheConfig.value = true;
-  try {
-    const config = readDiskCacheConfigFromUI();
-    const updated = (await window.electron.ipcRenderer.invoke(
-      'set-disk-cache-config',
-      config
-    )) as DiskCacheConfig;
-
-    if (updated) {
-      setData.value = {
-        ...setData.value,
-        enableDiskCache: updated.enabled,
-        diskCacheDir: updated.directory,
-        diskCacheMaxSizeMB: updated.maxSizeMB,
-        diskCacheCleanupPolicy: updated.cleanupPolicy
-      };
-    }
-    await refreshDiskCacheStats();
-  } catch (error) {
-    console.error('更新磁盘缓存配置失败:', error);
-  } finally {
-    applyingDiskCacheConfig.value = false;
-  }
-};
-
-const applyDiskCacheConfigDebounced = useDebounceFn(() => {
-  void applyDiskCacheConfig();
-}, 500);
-
-watch(
-  () => [
-    setData.value.enableDiskCache,
-    setData.value.diskCacheDir,
-    setData.value.diskCacheMaxSizeMB,
-    setData.value.diskCacheCleanupPolicy
-  ],
-  () => {
-    if (!window.electron || applyingDiskCacheConfig.value || switchingCacheDirectory.value) return;
-    applyDiskCacheConfigDebounced();
-  }
-);
-
-const askCacheSwitchMigrate = (): Promise<boolean> => {
-  return new Promise((resolve) => {
-    let resolved = false;
-    const finish = (value: boolean) => {
-      if (resolved) return;
-      resolved = true;
-      resolve(value);
-    };
-
-    dialog.warning({
-      title: t('settings.system.switchDirectoryMigrateTitle'),
-      content: t('settings.system.switchDirectoryMigrateContent'),
-      positiveText: t('settings.system.switchDirectoryMigrateConfirm'),
-      negativeText: t('settings.system.switchDirectoryKeepOld'),
-      onPositiveClick: () => finish(true),
-      onNegativeClick: () => finish(false),
-      onClose: () => finish(false)
-    });
-  });
-};
-
-const askCacheSwitchDestroy = (): Promise<boolean> => {
-  return new Promise((resolve) => {
-    let resolved = false;
-    const finish = (value: boolean) => {
-      if (resolved) return;
-      resolved = true;
-      resolve(value);
-    };
-
-    dialog.warning({
-      title: t('settings.system.switchDirectoryDestroyTitle'),
-      content: t('settings.system.switchDirectoryDestroyContent'),
-      positiveText: t('settings.system.switchDirectoryDestroyConfirm'),
-      negativeText: t('settings.system.switchDirectoryKeepOld'),
-      onPositiveClick: () => finish(true),
-      onNegativeClick: () => finish(false),
-      onClose: () => finish(false)
-    });
-  });
-};
-
-const selectCacheDirectory = async () => {
-  if (!window.electron) return;
-
-  const selectedPath = await selectDirectory(message);
-  if (!selectedPath) return;
-
-  const currentDirectory = setData.value.diskCacheDir || diskCacheStats.value.directory;
-  if (currentDirectory && selectedPath === currentDirectory) {
-    return;
-  }
-
-  let action: CacheSwitchAction = 'keep';
-  if (currentDirectory && diskCacheStats.value.totalFiles > 0) {
-    const shouldMigrate = await askCacheSwitchMigrate();
-    if (shouldMigrate) {
-      action = 'migrate';
-    } else {
-      const shouldDestroy = await askCacheSwitchDestroy();
-      action = shouldDestroy ? 'destroy' : 'keep';
-    }
-  }
-
-  switchingCacheDirectory.value = true;
-  try {
-    const result = (await window.electron.ipcRenderer.invoke('switch-disk-cache-directory', {
-      directory: selectedPath,
-      action
-    })) as SwitchCacheDirectoryResult;
-
-    if (!result?.success) {
-      message.error(t('settings.system.messages.switchDirectoryFailed'));
-      return;
-    }
-
-    setData.value = {
-      ...setData.value,
-      enableDiskCache: result.config.enabled,
-      diskCacheDir: result.config.directory,
-      diskCacheMaxSizeMB: result.config.maxSizeMB,
-      diskCacheCleanupPolicy: result.config.cleanupPolicy
-    };
-    await refreshDiskCacheStats();
-
-    if (action === 'migrate') {
-      message.success(
-        t('settings.system.messages.switchDirectoryMigrated', { count: result.migratedFiles })
-      );
-      return;
-    }
-    if (action === 'destroy') {
-      message.success(
-        t('settings.system.messages.switchDirectoryDestroyed', { count: result.destroyedFiles })
-      );
-      return;
-    }
-    message.success(t('settings.system.messages.switchDirectorySuccess'));
-  } catch (error) {
-    console.error('切换缓存目录失败:', error);
-    message.error(t('settings.system.messages.switchDirectoryFailed'));
-  } finally {
-    switchingCacheDirectory.value = false;
-  }
-};
-
-const openCacheDirectory = () => {
-  const targetPath = setData.value.diskCacheDir || diskCacheStats.value.directory;
-  openDirectory(targetPath, message);
-};
-
-const clearDiskCacheByScope = async (scope: DiskCacheScope) => {
-  if (!window.electron) return;
-
-  try {
-    const success = await window.electron.ipcRenderer.invoke('clear-disk-cache', scope);
-    if (success) {
-      await refreshDiskCacheStats();
-      message.success(t('settings.system.messages.diskCacheClearSuccess'));
-      return;
-    }
-    message.error(t('settings.system.messages.diskCacheClearFailed'));
-  } catch (error) {
-    console.error('手动清理磁盘缓存失败:', error);
-    message.error(t('settings.system.messages.diskCacheClearFailed'));
-  }
-};
-
-// ==================== 代理设置 ====================
-const showProxyModal = ref(false);
-const proxyForm = ref({ protocol: 'http', host: '127.0.0.1', port: 7890 });
-
-watch(
-  () => setData.value.proxyConfig,
-  (newVal) => {
-    if (newVal) {
-      proxyForm.value = {
-        protocol: newVal.protocol || 'http',
-        host: newVal.host || '127.0.0.1',
-        port: newVal.port || 7890
-      };
-    }
-  },
-  { immediate: true, deep: true }
-);
-
-const handleProxyConfirm = async (proxyConfig: any) => {
-  setData.value = {
-    ...setData.value,
-    proxyConfig: { enable: setData.value.proxyConfig?.enable || false, ...proxyConfig }
-  };
-  message.success(t('settings.network.messages.proxySuccess'));
-};
-
-const validateAndSaveRealIP = () => {
-  const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
-  if (!setData.value.realIP || ipRegex.test(setData.value.realIP)) {
-    setData.value = { ...setData.value, realIP: setData.value.realIP, enableRealIP: true };
-    if (setData.value.realIP) {
-      message.success(t('settings.network.messages.realIPSuccess'));
-    }
-  } else {
-    message.error(t('settings.network.messages.realIPError'));
-    setData.value = { ...setData.value, realIP: '' };
-  }
-};
-
-watch(
-  () => setData.value.enableRealIP,
-  (newVal) => {
-    if (!newVal) {
-      setData.value = { ...setData.value, realIP: '', enableRealIP: false };
-    }
-  }
-);
-
-// ==================== 字体设置 ====================
-const systemFonts = computed(() => settingsStore.systemFonts);
-const selectedFonts = ref<string[]>([]);
-
-const renderFontLabel = (option: { label: string; value: string }) => {
-  return h('span', { style: { fontFamily: option.value } }, option.label);
-};
-
-watch(
-  selectedFonts,
-  (newFonts) => {
-    setData.value = {
-      ...setData.value,
-      fontFamily: newFonts.length === 0 ? 'system-ui' : newFonts.join(',')
-    };
-  },
-  { deep: true }
-);
-
-watch(
-  () => setData.value.fontFamily,
-  (newFont) => {
-    if (newFont) {
-      selectedFonts.value = newFont === 'system-ui' ? [] : newFont.split(',');
-    }
-  },
-  { immediate: true }
-);
-
-// ==================== 弹窗控制 ====================
-const showClearCacheModal = ref(false);
-const showShortcutModal = ref(false);
-const showMusicSourcesModal = ref(false);
-const showRemoteControlModal = ref(false);
-const showTokenModal = ref(false);
-
-const handleShortcutsChange = (shortcuts: any) => {
-  console.log('快捷键已更新:', shortcuts);
-};
-
-// ==================== 缓存清理 ====================
-const clearCache = async (selectedCacheTypes: string[]) => {
-  const clearTasks = selectedCacheTypes.map(async (type) => {
-    switch (type) {
-      case 'history':
-        localStorage.removeItem('musicHistory');
-        break;
-      case 'favorite':
-        localStorage.removeItem('favoriteList');
-        break;
-      case 'user':
-        userStore.handleLogout();
-        break;
-      case 'settings':
-        if (window.electron) {
-          window.electron.ipcRenderer.send('set-store-value', 'set', localData);
-        }
-        localStorage.removeItem('appSettings');
-        localStorage.removeItem('theme');
-        localStorage.removeItem('lyricData');
-        localStorage.removeItem('lyricFontSize');
-        localStorage.removeItem('playMode');
-        break;
-      case 'downloads':
-        if (window.electron) {
-          window.electron.ipcRenderer.send('clear-downloads-history');
-        }
-        break;
-      case 'resources':
-        if (window.electron) {
-          window.electron.ipcRenderer.send('clear-audio-cache');
-          await window.electron.ipcRenderer.invoke('clear-disk-cache', 'music');
-        }
-        localStorage.removeItem('lyricCache');
-        localStorage.removeItem('musicUrlCache');
-        if (window.caches) {
-          try {
-            const cache = await window.caches.open('music-images');
-            const keys = await cache.keys();
-            keys.forEach((key) => cache.delete(key));
-          } catch (error) {
-            console.error('清除图片缓存失败:', error);
-          }
-        }
-        break;
-      case 'lyrics':
-        if (window.electron) {
-          await window.electron.ipcRenderer.invoke('clear-disk-cache', 'lyrics');
-        }
-        await window.api.invoke('clear-lyrics-cache');
-        break;
-    }
-  });
-  await Promise.all(clearTasks);
-  await refreshDiskCacheStats();
-  message.success(t('settings.system.messages.clearSuccess'));
-};
-
-// ==================== Token管理 ====================
-const currentToken = ref(localStorage.getItem('token') || '');
-
-const handleTokenSave = async (token: string) => {
-  try {
-    const originalToken = localStorage.getItem('token');
-    localStorage.setItem('token', token);
-
-    const user = await getUserDetail();
-    if (user.data && user.data.profile) {
-      userStore.setUser(user.data.profile);
-      currentToken.value = token;
-      message.success(t('settings.cookie.message.saveSuccess'));
-      setTimeout(() => window.location.reload(), 1000);
-    } else {
-      if (originalToken) localStorage.setItem('token', originalToken);
-      else localStorage.removeItem('token');
-      message.error(t('settings.cookie.message.saveError'));
-    }
-  } catch {
-    const originalToken = localStorage.getItem('token');
-    if (originalToken) localStorage.setItem('token', originalToken);
-    else localStorage.removeItem('token');
-    message.error(t('settings.cookie.message.saveError'));
-  }
-};
-
-const clearToken = () => {
-  localStorage.removeItem('token');
-  localStorage.removeItem('user');
-  currentToken.value = '';
-  userStore.user = null;
-  message.success(t('settings.basic.clearToken') + '成功');
-  setTimeout(() => window.location.reload(), 1000);
-};
-
-watch(
-  () => localStorage.getItem('token'),
-  (newToken) => {
-    currentToken.value = newToken || '';
-  },
-  { immediate: true }
-);
-
-// ==================== 音源设置 ====================
-const musicSources = computed({
-  get: () => {
-    if (!setData.value.enabledMusicSources) return ALL_PLATFORMS;
-    return setData.value.enabledMusicSources as Platform[];
-  },
-  set: (newValue: Platform[]) => {
-    const valuesToSet = newValue.length > 0 ? [...new Set(newValue)] : ALL_PLATFORMS;
-    setData.value = { ...setData.value, enabledMusicSources: valuesToSet };
-  }
-});
+// ==================== Provide ====================
+provide(SETTINGS_DATA_KEY, setData);
+provide(SETTINGS_MESSAGE_KEY, message);
+provide(SETTINGS_DIALOG_KEY, dialog);
 
 // ==================== 导航相关 ====================
-interface SettingSectionConfig {
+type SettingSectionConfig = {
   id: string;
   electron?: boolean;
-}
+};
 
 const settingSections: SettingSectionConfig[] = [
   { id: 'basic' },
@@ -1473,12 +158,12 @@ const navSections = computed(() => {
 const currentSection = ref('basic');
 
 // ==================== 初始化 ====================
-onMounted(async () => {
+onMounted(() => {
   if (isElectron && settingsStore.appUpdateState.currentVersion === '') {
     settingsStore.setAppUpdateState(createDefaultAppUpdateState(config.version));
   }
   if (setData.value.proxyConfig) {
-    proxyForm.value = { ...setData.value.proxyConfig };
+    // proxy form init moved to NetworkTab
   }
   if (setData.value.enableRealIP === undefined) {
     setData.value = { ...setData.value, enableRealIP: false };
@@ -1492,42 +177,12 @@ onMounted(async () => {
   if (!['lru', 'fifo'].includes(setData.value.diskCacheCleanupPolicy)) {
     setData.value = { ...setData.value, diskCacheCleanupPolicy: 'lru' };
   }
-
-  await loadDiskCacheConfig();
-  await refreshDiskCacheStats();
-
-  if (window.electron) {
-    window.electron.ipcRenderer.on('gpu-acceleration-updated', (_, enabled: boolean) => {
-      console.log('GPU加速设置已更新:', enabled);
-      gpuAccelerationChanged.value = true;
-    });
-
-    window.electron.ipcRenderer.on('gpu-acceleration-update-error', (_, errorMessage: string) => {
-      console.error('GPU加速设置更新错误:', errorMessage);
-      gpuAccelerationChanged.value = false;
-    });
-  }
 });
 </script>
 
-<style lang="scss" scoped>
-:deep(.n-select) {
-  min-width: 120px;
-}
-
-: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;
-  }
+<style scoped>
+:deep(.n-select .n-base-selection) {
+  border-radius: 10px;
 }
 
 .animate-fade-in {
diff --git a/src/renderer/views/set/keys.ts b/src/renderer/views/set/keys.ts
new file mode 100644
index 0000000..dbad1a2
--- /dev/null
+++ b/src/renderer/views/set/keys.ts
@@ -0,0 +1,6 @@
+import type { DialogApi, MessageApi } from 'naive-ui';
+import type { InjectionKey, WritableComputedRef } from 'vue';
+
+export const SETTINGS_DATA_KEY = Symbol('settings-data') as InjectionKey<WritableComputedRef<any>>;
+export const SETTINGS_MESSAGE_KEY = Symbol('settings-message') as InjectionKey<MessageApi>;
+export const SETTINGS_DIALOG_KEY = Symbol('settings-dialog') as InjectionKey<DialogApi>;
diff --git a/src/renderer/views/set/tabs/AboutTab.vue b/src/renderer/views/set/tabs/AboutTab.vue
new file mode 100644
index 0000000..4dd6722
--- /dev/null
+++ b/src/renderer/views/set/tabs/AboutTab.vue
@@ -0,0 +1,160 @@
+<template>
+  <setting-section :title="t('settings.sections.about')">
+    <setting-item :title="t('settings.about.version')">
+      <template #description>
+        <div class="flex flex-wrap items-center gap-2">
+          <span>{{ updateInfo.currentVersion }}</span>
+          <n-tag v-if="updateInfo.hasUpdate" type="success">
+            {{ t('settings.about.hasUpdate') }} {{ updateInfo.latestVersion }}
+          </n-tag>
+        </div>
+        <div v-if="hasManualUpdateFallback" class="mt-2 text-xs text-amber-600">
+          <i class="ri-information-line mr-1"></i>
+          {{ appUpdateState.errorMessage || t('settings.about.messages.checkError') }}
+        </div>
+      </template>
+      <template #action>
+        <div class="flex items-center gap-2 flex-wrap">
+          <s-btn :loading="checking" @click="checkForUpdates(true)">
+            {{ checking ? t('settings.about.checking') : t('settings.about.checkUpdate') }}
+          </s-btn>
+          <s-btn v-if="updateInfo.hasUpdate" variant="primary" @click="openReleasePage">
+            {{ t('settings.about.gotoUpdate') }}
+          </s-btn>
+          <s-btn v-if="hasManualUpdateFallback" variant="ghost" @click="openManualUpdatePage">
+            {{ t('settings.about.manualUpdate') }}
+          </s-btn>
+        </div>
+      </template>
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.about.author')"
+      :description="t('settings.about.authorDesc')"
+      clickable
+      @click="openAuthor"
+    >
+      <s-btn @click.stop="openAuthor">
+        <i class="ri-github-line mr-1"></i>{{ t('settings.about.gotoGithub') }}
+      </s-btn>
+    </setting-item>
+  </setting-section>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useSettingsStore } from '@/store/modules/settings';
+import { isElectron } from '@/utils';
+import { checkUpdate, UpdateResult } from '@/utils/update';
+
+import config from '../../../../../package.json';
+import { APP_UPDATE_STATUS, hasAvailableAppUpdate } from '../../../../shared/appUpdate';
+import { SETTINGS_DATA_KEY, SETTINGS_MESSAGE_KEY } from '../keys';
+import SBtn from '../SBtn.vue';
+import SettingItem from '../SettingItem.vue';
+import SettingSection from '../SettingSection.vue';
+
+const { t } = useI18n();
+const settingsStore = useSettingsStore();
+const setData = inject(SETTINGS_DATA_KEY)!;
+const message = inject(SETTINGS_MESSAGE_KEY)!;
+
+const checking = ref(false);
+const webUpdateInfo = ref<UpdateResult>({
+  hasUpdate: false,
+  latestVersion: '',
+  currentVersion: config.version,
+  releaseInfo: null
+});
+
+const appUpdateState = computed(() => settingsStore.appUpdateState);
+const hasAppUpdate = computed(() => hasAvailableAppUpdate(appUpdateState.value));
+const hasManualUpdateFallback = computed(
+  () => isElectron && appUpdateState.value.status === APP_UPDATE_STATUS.error
+);
+
+const updateInfo = computed<UpdateResult>(() => {
+  if (!isElectron) {
+    return webUpdateInfo.value;
+  }
+
+  return {
+    hasUpdate: hasAppUpdate.value,
+    latestVersion: appUpdateState.value.availableVersion ?? '',
+    currentVersion: appUpdateState.value.currentVersion || config.version,
+    releaseInfo: appUpdateState.value.availableVersion
+      ? {
+          tag_name: appUpdateState.value.availableVersion,
+          body: appUpdateState.value.releaseNotes,
+          html_url: appUpdateState.value.releasePageUrl,
+          assets: []
+        }
+      : null
+  };
+});
+
+const checkForUpdates = async (isClick = false) => {
+  checking.value = true;
+  try {
+    if (isElectron) {
+      const result = await window.api.checkAppUpdate(isClick);
+      settingsStore.setAppUpdateState(result);
+
+      if (hasAvailableAppUpdate(result)) {
+        if (isClick) {
+          settingsStore.setShowUpdateModal(true);
+        }
+      } else if (result.status === APP_UPDATE_STATUS.notAvailable && isClick) {
+        message.success(t('settings.about.latest'));
+      } else if (result.status === APP_UPDATE_STATUS.error && isClick) {
+        message.error(result.errorMessage || t('settings.about.messages.checkError'));
+      }
+
+      return;
+    }
+
+    const result = await checkUpdate(config.version);
+    if (result) {
+      webUpdateInfo.value = result;
+      if (!result.hasUpdate && isClick) {
+        message.success(t('settings.about.latest'));
+      }
+    } else if (isClick) {
+      message.success(t('settings.about.latest'));
+    }
+  } catch (error) {
+    console.error('检查更新失败:', error);
+    if (isClick) {
+      message.error(t('settings.about.messages.checkError'));
+    }
+  } finally {
+    checking.value = false;
+  }
+};
+
+const openReleasePage = () => {
+  if (isElectron) {
+    settingsStore.setShowUpdateModal(true);
+    return;
+  }
+
+  window.open(updateInfo.value.releaseInfo?.html_url || setData.value.authorUrl);
+};
+
+const openManualUpdatePage = async () => {
+  if (isElectron) {
+    await window.api.openAppUpdatePage();
+    return;
+  }
+
+  window.open(updateInfo.value.releaseInfo?.html_url || setData.value.authorUrl);
+};
+
+const openAuthor = () => {
+  window.open(setData.value.authorUrl);
+};
+
+defineExpose({ checkForUpdates });
+</script>
diff --git a/src/renderer/views/set/tabs/ApplicationTab.vue b/src/renderer/views/set/tabs/ApplicationTab.vue
new file mode 100644
index 0000000..43554cd
--- /dev/null
+++ b/src/renderer/views/set/tabs/ApplicationTab.vue
@@ -0,0 +1,114 @@
+<template>
+  <setting-section v-if="isElectron" :title="t('settings.sections.application')">
+    <setting-item
+      :title="t('settings.application.closeAction')"
+      :description="t('settings.application.closeActionDesc')"
+    >
+      <s-select
+        v-model="setData.closeAction"
+        :options="closeActionOptions"
+        width="w-40 max-md:w-full"
+      />
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.application.shortcut')"
+      :description="t('settings.application.shortcutDesc')"
+    >
+      <s-btn @click="showShortcutModal = true">{{ t('common.configure') }}</s-btn>
+    </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>
+      <s-btn @click="router.push('/downloads')">
+        {{ t('settings.application.download') }}
+      </s-btn>
+    </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">
+          <s-btn @click="openDownloadPath">{{ t('common.open') }}</s-btn>
+          <s-btn @click="selectDownloadPath">{{ t('common.modify') }}</s-btn>
+        </div>
+      </template>
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.application.remoteControl')"
+      :description="t('settings.application.remoteControlDesc')"
+    >
+      <s-btn @click="showRemoteControlModal = true">{{ t('common.configure') }}</s-btn>
+    </setting-item>
+
+    <shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
+    <remote-control-setting v-model:visible="showRemoteControlModal" />
+  </setting-section>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
+import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
+import { isElectron } from '@/utils';
+import { openDirectory, selectDirectory } from '@/utils/fileOperation';
+
+import { SETTINGS_DATA_KEY, SETTINGS_MESSAGE_KEY } from '../keys';
+import SBtn from '../SBtn.vue';
+import SettingItem from '../SettingItem.vue';
+import SettingSection from '../SettingSection.vue';
+import SSelect from '../SSelect.vue';
+
+const { t } = useI18n();
+const router = useRouter();
+const setData = inject(SETTINGS_DATA_KEY)!;
+const message = inject(SETTINGS_MESSAGE_KEY)!;
+
+const showShortcutModal = ref(false);
+const showRemoteControlModal = ref(false);
+
+const closeActionOptions = computed(() => [
+  { label: t('settings.application.closeOptions.ask'), value: 'ask' },
+  { label: t('settings.application.closeOptions.minimize'), value: 'minimize' },
+  { label: t('settings.application.closeOptions.close'), value: 'close' }
+]);
+
+const selectDownloadPath = async () => {
+  const path = await selectDirectory(message);
+  if (path) {
+    setData.value = { ...setData.value, downloadPath: path };
+  }
+};
+
+const openDownloadPath = () => {
+  openDirectory(setData.value.downloadPath, message);
+};
+
+const handleShortcutsChange = (shortcuts: any) => {
+  console.log('快捷键已更新:', shortcuts);
+};
+</script>
diff --git a/src/renderer/views/set/tabs/BasicTab.vue b/src/renderer/views/set/tabs/BasicTab.vue
new file mode 100644
index 0000000..a651449
--- /dev/null
+++ b/src/renderer/views/set/tabs/BasicTab.vue
@@ -0,0 +1,353 @@
+<template>
+  <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.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')"
+    >
+      <s-select
+        v-model="setData.lyricTranslationEngine"
+        :options="translationEngineOptions"
+        width="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>
+
+    <div
+      v-if="isElectron && selectedFonts.length > 0"
+      class="p-4 border-b border-gray-100 dark:border-gray-800"
+    >
+      <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>
+
+    <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">
+          <s-btn @click="showTokenModal = true">
+            {{ currentToken ? t('settings.basic.modifyToken') : t('settings.basic.setToken') }}
+          </s-btn>
+          <s-btn v-if="currentToken" variant="danger" @click="clearToken">
+            {{ t('settings.basic.clearToken') }}
+          </s-btn>
+        </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"
+            />
+            <s-input
+              v-else
+              v-model="setData.animationSpeed"
+              type="number"
+              :min="0.1"
+              :max="3"
+              :step="0.1"
+              :disabled="setData.noAnimate"
+              width="w-[120px]"
+            />
+          </div>
+        </div>
+      </template>
+    </setting-item>
+
+    <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>
+
+    <cookie-settings-modal
+      v-model:show="showTokenModal"
+      :initial-value="currentToken"
+      @save="handleTokenSave"
+    />
+  </setting-section>
+</template>
+
+<script setup lang="ts">
+import { computed, h, inject, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getUserDetail } from '@/api/login';
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+import CookieSettingsModal from '@/components/settings/CookieSettingsModal.vue';
+import { useSettingsStore } from '@/store/modules/settings';
+import { useUserStore } from '@/store/modules/user';
+import { isElectron, isMobile } from '@/utils';
+
+import { SETTINGS_DATA_KEY, SETTINGS_MESSAGE_KEY } from '../keys';
+import SBtn from '../SBtn.vue';
+import SettingItem from '../SettingItem.vue';
+import SettingSection from '../SettingSection.vue';
+import SInput from '../SInput.vue';
+import SSelect from '../SSelect.vue';
+
+const fontPreviews = [
+  { key: 'chinese' },
+  { key: 'english' },
+  { key: 'japanese' },
+  { key: 'korean' }
+];
+
+const { t } = useI18n();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
+const setData = inject(SETTINGS_DATA_KEY)!;
+const message = inject(SETTINGS_MESSAGE_KEY)!;
+
+const isDarkTheme = computed({
+  get: () => settingsStore.theme === 'dark',
+  set: () => settingsStore.toggleTheme()
+});
+
+const handleAutoThemeChange = (value: boolean) => {
+  settingsStore.setAutoTheme(value);
+};
+
+const gpuAccelerationChanged = ref(false);
+
+const handleGpuAccelerationChange = (enabled: boolean) => {
+  try {
+    if (window.electron) {
+      window.electron.ipcRenderer.send('update-gpu-acceleration', enabled);
+      gpuAccelerationChanged.value = true;
+      message.info(t('settings.basic.gpuAccelerationChangeSuccess'));
+    }
+  } catch (error) {
+    console.error('GPU加速设置更新失败:', error);
+    message.error(t('settings.basic.gpuAccelerationChangeError'));
+  }
+};
+
+const translationEngineOptions = computed(() => [
+  { label: t('settings.translationEngineOptions.none'), value: 'none' },
+  { label: t('settings.translationEngineOptions.opencc'), value: 'opencc' }
+]);
+
+const animationSpeedMarks = computed(() => ({
+  0.1: t('settings.basic.animationSpeed.slow'),
+  1: t('settings.basic.animationSpeed.normal'),
+  3: t('settings.basic.animationSpeed.fast')
+}));
+
+const systemFonts = computed(() => settingsStore.systemFonts);
+const selectedFonts = ref<string[]>([]);
+
+const renderFontLabel = (option: { label: string; value: string }) => {
+  return h('span', { style: { fontFamily: option.value } }, option.label);
+};
+
+watch(
+  selectedFonts,
+  (newFonts) => {
+    setData.value = {
+      ...setData.value,
+      fontFamily: newFonts.length === 0 ? 'system-ui' : newFonts.join(',')
+    };
+  },
+  { deep: true }
+);
+
+watch(
+  () => setData.value.fontFamily,
+  (newFont) => {
+    if (newFont) {
+      selectedFonts.value = newFont === 'system-ui' ? [] : newFont.split(',');
+    }
+  },
+  { immediate: true }
+);
+
+const showTokenModal = ref(false);
+const currentToken = ref(localStorage.getItem('token') || '');
+
+const handleTokenSave = async (token: string) => {
+  try {
+    const originalToken = localStorage.getItem('token');
+    localStorage.setItem('token', token);
+
+    const user = await getUserDetail();
+    if (user.data && user.data.profile) {
+      userStore.setUser(user.data.profile);
+      currentToken.value = token;
+      message.success(t('settings.cookie.message.saveSuccess'));
+      setTimeout(() => window.location.reload(), 1000);
+    } else {
+      if (originalToken) localStorage.setItem('token', originalToken);
+      else localStorage.removeItem('token');
+      message.error(t('settings.cookie.message.saveError'));
+    }
+  } catch {
+    const originalToken = localStorage.getItem('token');
+    if (originalToken) localStorage.setItem('token', originalToken);
+    else localStorage.removeItem('token');
+    message.error(t('settings.cookie.message.saveError'));
+  }
+};
+
+const clearToken = () => {
+  localStorage.removeItem('token');
+  localStorage.removeItem('user');
+  currentToken.value = '';
+  userStore.user = null;
+  message.success(t('settings.basic.clearToken') + '成功');
+  setTimeout(() => window.location.reload(), 1000);
+};
+
+watch(
+  () => localStorage.getItem('token'),
+  (newToken) => {
+    currentToken.value = newToken || '';
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (window.electron) {
+    window.electron.ipcRenderer.on('gpu-acceleration-updated', (_, enabled: boolean) => {
+      console.log('GPU加速设置已更新:', enabled);
+      gpuAccelerationChanged.value = true;
+    });
+
+    window.electron.ipcRenderer.on('gpu-acceleration-update-error', (_, errorMessage: string) => {
+      console.error('GPU加速设置更新错误:', errorMessage);
+      gpuAccelerationChanged.value = false;
+    });
+  }
+});
+
+onUnmounted(() => {
+  if (window.electron) {
+    window.electron.ipcRenderer.removeAllListeners?.('gpu-acceleration-updated');
+    window.electron.ipcRenderer.removeAllListeners?.('gpu-acceleration-update-error');
+  }
+});
+</script>
diff --git a/src/renderer/views/set/tabs/DonationTab.vue b/src/renderer/views/set/tabs/DonationTab.vue
new file mode 100644
index 0000000..ffe1ce7
--- /dev/null
+++ b/src/renderer/views/set/tabs/DonationTab.vue
@@ -0,0 +1,15 @@
+<template>
+  <setting-section :title="t('settings.sections.donation')">
+    <donation-list />
+  </setting-section>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+import DonationList from '@/components/common/DonationList.vue';
+
+import SettingSection from '../SettingSection.vue';
+
+const { t } = useI18n();
+</script>
diff --git a/src/renderer/views/set/tabs/NetworkTab.vue b/src/renderer/views/set/tabs/NetworkTab.vue
new file mode 100644
index 0000000..5bca3a8
--- /dev/null
+++ b/src/renderer/views/set/tabs/NetworkTab.vue
@@ -0,0 +1,124 @@
+<template>
+  <setting-section v-if="isElectron" :title="t('settings.sections.network')">
+    <setting-item
+      :title="t('settings.network.apiPort')"
+      :description="t('settings.network.apiPortDesc')"
+    >
+      <s-input
+        v-model="setData.musicApiPort"
+        type="number"
+        :min="1024"
+        :max="65535"
+        :step="1"
+        width="w-[140px] 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>
+          <s-btn @click="showProxyModal = true">{{ t('common.configure') }}</s-btn>
+        </div>
+      </template>
+    </setting-item>
+
+    <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>
+          <s-input
+            v-if="setData.enableRealIP"
+            v-model="setData.realIP"
+            placeholder="realIP"
+            width="w-[200px] max-md:w-full"
+            @blur="validateAndSaveRealIP"
+          />
+        </div>
+      </template>
+    </setting-item>
+
+    <proxy-settings
+      v-model:show="showProxyModal"
+      :config="proxyForm"
+      @confirm="handleProxyConfirm"
+    />
+  </setting-section>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import ProxySettings from '@/components/settings/ProxySettings.vue';
+import { isElectron } from '@/utils';
+
+import { SETTINGS_DATA_KEY, SETTINGS_MESSAGE_KEY } from '../keys';
+import SBtn from '../SBtn.vue';
+import SettingItem from '../SettingItem.vue';
+import SettingSection from '../SettingSection.vue';
+import SInput from '../SInput.vue';
+
+const { t } = useI18n();
+const setData = inject(SETTINGS_DATA_KEY)!;
+const message = inject(SETTINGS_MESSAGE_KEY)!;
+
+const showProxyModal = ref(false);
+const proxyForm = ref({ protocol: 'http', host: '127.0.0.1', port: 7890 });
+
+watch(
+  () => setData.value.proxyConfig,
+  (newVal) => {
+    if (newVal) {
+      proxyForm.value = {
+        protocol: newVal.protocol || 'http',
+        host: newVal.host || '127.0.0.1',
+        port: newVal.port || 7890
+      };
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const handleProxyConfirm = async (proxyConfig: any) => {
+  setData.value = {
+    ...setData.value,
+    proxyConfig: { enable: setData.value.proxyConfig?.enable || false, ...proxyConfig }
+  };
+  message.success(t('settings.network.messages.proxySuccess'));
+};
+
+const validateAndSaveRealIP = () => {
+  const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$/;
+  if (!setData.value.realIP || ipRegex.test(setData.value.realIP)) {
+    setData.value = { ...setData.value, realIP: setData.value.realIP, enableRealIP: true };
+    if (setData.value.realIP) {
+      message.success(t('settings.network.messages.realIPSuccess'));
+    }
+  } else {
+    message.error(t('settings.network.messages.realIPError'));
+    setData.value = { ...setData.value, realIP: '' };
+  }
+};
+
+watch(
+  () => setData.value.enableRealIP,
+  (newVal) => {
+    if (!newVal) {
+      setData.value = { ...setData.value, realIP: '', enableRealIP: false };
+    }
+  }
+);
+</script>
diff --git a/src/renderer/views/set/tabs/PlaybackTab.vue b/src/renderer/views/set/tabs/PlaybackTab.vue
new file mode 100644
index 0000000..9448e55
--- /dev/null
+++ b/src/renderer/views/set/tabs/PlaybackTab.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <setting-section :title="t('settings.sections.playback')">
+      <setting-item
+        :title="t('settings.playback.quality')"
+        :description="t('settings.playback.qualityDesc')"
+      >
+        <s-select
+          v-model="setData.musicQuality"
+          :options="qualityOptions"
+          width="w-40 max-md:w-full"
+        />
+      </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>
+        <s-btn :disabled="!setData.enableMusicUnblock" @click="showMusicSourcesModal = true">
+          {{ t('settings.playback.configureMusicSources') }}
+        </s-btn>
+      </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
+        :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
+        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"
+    >
+      <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>
+
+    <music-source-settings
+      v-if="isElectron"
+      v-model:show="showMusicSourcesModal"
+      v-model:sources="musicSources"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import AudioDeviceSettings from '@/components/settings/AudioDeviceSettings.vue';
+import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
+import { type Platform } from '@/types/music';
+import { isElectron } from '@/utils';
+
+import { SETTINGS_DATA_KEY } from '../keys';
+import SBtn from '../SBtn.vue';
+import SettingItem from '../SettingItem.vue';
+import SettingSection from '../SettingSection.vue';
+import SSelect from '../SSelect.vue';
+
+const ALL_PLATFORMS: Platform[] = ['migu', 'kugou', 'kuwo', 'pyncmd'];
+
+const memberLinks = [
+  { name: '网易云音乐会员', url: 'https://music.163.com/store/vip' },
+  { name: 'QQ音乐会员', url: 'https://y.qq.com/portal/vipportal/' },
+  { name: '酷狗音乐会员', url: 'https://vip.kugou.com/' }
+];
+
+const { t } = useI18n();
+const setData = inject(SETTINGS_DATA_KEY)!;
+const platform = window.electron ? window.electron.ipcRenderer.sendSync('get-platform') : 'web';
+
+const showMusicSourcesModal = ref(false);
+
+const qualityOptions = computed(() => [
+  { label: t('settings.playback.qualityOptions.standard'), value: 'standard' },
+  { label: t('settings.playback.qualityOptions.higher'), value: 'higher' },
+  { label: t('settings.playback.qualityOptions.exhigh'), value: 'exhigh' },
+  { label: t('settings.playback.qualityOptions.lossless'), value: 'lossless' },
+  { label: t('settings.playback.qualityOptions.hires'), value: 'hires' },
+  { label: t('settings.playback.qualityOptions.jyeffect'), value: 'jyeffect' },
+  { label: t('settings.playback.qualityOptions.sky'), value: 'sky' },
+  { label: t('settings.playback.qualityOptions.dolby'), value: 'dolby' },
+  { label: t('settings.playback.qualityOptions.jymaster'), value: 'jymaster' }
+]);
+
+const musicSources = computed({
+  get: () => {
+    if (!setData.value.enabledMusicSources) return ALL_PLATFORMS;
+    return setData.value.enabledMusicSources as Platform[];
+  },
+  set: (newValue: Platform[]) => {
+    const valuesToSet = newValue.length > 0 ? [...new Set(newValue)] : ALL_PLATFORMS;
+    setData.value = { ...setData.value, enabledMusicSources: valuesToSet };
+  }
+});
+</script>
diff --git a/src/renderer/views/set/tabs/SystemTab.vue b/src/renderer/views/set/tabs/SystemTab.vue
new file mode 100644
index 0000000..c56d1e9
--- /dev/null
+++ b/src/renderer/views/set/tabs/SystemTab.vue
@@ -0,0 +1,499 @@
+<template>
+  <setting-section v-if="isElectron" :title="t('settings.sections.system')">
+    <setting-item
+      :title="t('settings.system.diskCache')"
+      :description="t('settings.system.diskCacheDesc')"
+    >
+      <n-switch v-model:value="setData.enableDiskCache">
+        <template #checked>{{ t('common.on') }}</template>
+        <template #unchecked>{{ t('common.off') }}</template>
+      </n-switch>
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.system.cacheDirectory')"
+      :description="
+        setData.diskCacheDir || diskCacheStats.directory || t('settings.system.cacheDirectoryDesc')
+      "
+    >
+      <template #action>
+        <div class="flex items-center gap-2 max-md:flex-wrap">
+          <s-btn @click="selectCacheDirectory">
+            {{ t('settings.system.selectDirectory') }}
+          </s-btn>
+          <s-btn @click="openCacheDirectory">
+            {{ t('settings.system.openDirectory') }}
+          </s-btn>
+        </div>
+      </template>
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.system.cacheMaxSize')"
+      :description="t('settings.system.cacheMaxSizeDesc')"
+    >
+      <template #action>
+        <s-input
+          v-model="setData.diskCacheMaxSizeMB"
+          type="number"
+          :min="256"
+          :max="102400"
+          :step="256"
+          suffix="MB"
+          width="w-[160px] max-md:w-32"
+        />
+      </template>
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.system.cleanupPolicy')"
+      :description="t('settings.system.cleanupPolicyDesc')"
+    >
+      <s-select
+        v-model="setData.diskCacheCleanupPolicy"
+        :options="cleanupPolicyOptions"
+        width="w-40"
+      />
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.system.cacheStatus')"
+      :description="
+        t('settings.system.cacheStatusDesc', {
+          used: formatBytes(diskCacheStats.totalSizeBytes),
+          limit: `${setData.diskCacheMaxSizeMB || diskCacheStats.maxSizeMB || 0} MB`
+        })
+      "
+    >
+      <template #action>
+        <div class="flex items-center gap-3 max-md:flex-wrap">
+          <div class="w-40 max-md:w-32">
+            <n-progress type="line" :percentage="diskCacheUsagePercent" />
+          </div>
+          <span class="text-xs text-neutral-500">
+            {{
+              t('settings.system.cacheStatusDetail', {
+                musicCount: diskCacheStats.musicFiles,
+                lyricCount: diskCacheStats.lyricFiles
+              })
+            }}
+          </span>
+          <s-btn @click="refreshDiskCacheStats()">{{ t('common.refresh') }}</s-btn>
+        </div>
+      </template>
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.system.manageDiskCache')"
+      :description="t('settings.system.manageDiskCacheDesc')"
+    >
+      <template #action>
+        <div class="flex items-center gap-2 max-md:flex-wrap">
+          <s-btn @click="clearDiskCacheByScope('music')">
+            {{ t('settings.system.clearMusicCache') }}
+          </s-btn>
+          <s-btn @click="clearDiskCacheByScope('lyrics')">
+            {{ t('settings.system.clearLyricCache') }}
+          </s-btn>
+          <s-btn variant="danger" @click="clearDiskCacheByScope('all')">
+            {{ t('settings.system.clearAllCache') }}
+          </s-btn>
+        </div>
+      </template>
+    </setting-item>
+
+    <setting-item :title="t('settings.system.cache')" :description="t('settings.system.cacheDesc')">
+      <s-btn @click="showClearCacheModal = true">{{ t('settings.system.cacheDesc') }}</s-btn>
+    </setting-item>
+
+    <setting-item
+      :title="t('settings.system.restart')"
+      :description="t('settings.system.restartDesc')"
+    >
+      <s-btn @click="restartApp">{{ t('settings.system.restart') }}</s-btn>
+    </setting-item>
+
+    <clear-cache-settings v-model:show="showClearCacheModal" @confirm="clearCache" />
+  </setting-section>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from '@vueuse/core';
+import { computed, inject, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import localData from '@/../main/set.json';
+import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
+import { useUserStore } from '@/store/modules/user';
+import { isElectron } from '@/utils';
+import { openDirectory, selectDirectory } from '@/utils/fileOperation';
+
+import { SETTINGS_DATA_KEY, SETTINGS_DIALOG_KEY, SETTINGS_MESSAGE_KEY } from '../keys';
+import SBtn from '../SBtn.vue';
+import SettingItem from '../SettingItem.vue';
+import SettingSection from '../SettingSection.vue';
+import SInput from '../SInput.vue';
+import SSelect from '../SSelect.vue';
+
+type DiskCacheScope = 'all' | 'music' | 'lyrics';
+type DiskCacheCleanupPolicy = 'lru' | 'fifo';
+type CacheSwitchAction = 'migrate' | 'destroy' | 'keep';
+
+type DiskCacheConfig = {
+  enabled: boolean;
+  directory: string;
+  maxSizeMB: number;
+  cleanupPolicy: DiskCacheCleanupPolicy;
+};
+
+type DiskCacheStats = DiskCacheConfig & {
+  totalSizeBytes: number;
+  musicSizeBytes: number;
+  lyricSizeBytes: number;
+  totalFiles: number;
+  musicFiles: number;
+  lyricFiles: number;
+  usage: number;
+};
+
+type SwitchCacheDirectoryResult = {
+  success: boolean;
+  config: DiskCacheConfig;
+  migratedFiles: number;
+  destroyedFiles: number;
+};
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const setData = inject(SETTINGS_DATA_KEY)!;
+const message = inject(SETTINGS_MESSAGE_KEY)!;
+const dialog = inject(SETTINGS_DIALOG_KEY)!;
+
+const showClearCacheModal = ref(false);
+const diskCacheStats = ref<DiskCacheStats>({
+  enabled: true,
+  directory: '',
+  maxSizeMB: 4096,
+  cleanupPolicy: 'lru',
+  totalSizeBytes: 0,
+  musicSizeBytes: 0,
+  lyricSizeBytes: 0,
+  totalFiles: 0,
+  musicFiles: 0,
+  lyricFiles: 0,
+  usage: 0
+});
+const applyingDiskCacheConfig = ref(false);
+const switchingCacheDirectory = ref(false);
+
+const cleanupPolicyOptions = computed(() => [
+  { label: t('settings.system.cleanupPolicyOptions.lru'), value: 'lru' },
+  { label: t('settings.system.cleanupPolicyOptions.fifo'), value: 'fifo' }
+]);
+
+const diskCacheUsagePercent = computed(() =>
+  Math.min(100, Math.max(0, Math.round((diskCacheStats.value.usage || 0) * 100)))
+);
+
+const formatBytes = (bytes: number) => {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let value = bytes;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex++;
+  }
+  return `${value.toFixed(value >= 10 ? 0 : 1)} ${units[unitIndex]}`;
+};
+
+const readDiskCacheConfigFromUI = (): DiskCacheConfig => {
+  const cleanupPolicy: DiskCacheCleanupPolicy =
+    setData.value.diskCacheCleanupPolicy === 'fifo' ? 'fifo' : 'lru';
+  const maxSizeMB = Math.max(256, Math.floor(Number(setData.value.diskCacheMaxSizeMB || 4096)));
+
+  return {
+    enabled: setData.value.enableDiskCache !== false,
+    directory: String(setData.value.diskCacheDir || ''),
+    maxSizeMB,
+    cleanupPolicy
+  };
+};
+
+const refreshDiskCacheStats = async (silent: boolean = true) => {
+  if (!window.electron) return;
+  try {
+    const stats = (await window.electron.ipcRenderer.invoke(
+      'get-disk-cache-stats'
+    )) as DiskCacheStats;
+    if (stats) {
+      diskCacheStats.value = stats;
+    }
+  } catch (error) {
+    console.error('读取磁盘缓存统计失败:', error);
+    if (!silent) {
+      message.error(t('settings.system.messages.diskCacheStatsLoadFailed'));
+    }
+  }
+};
+
+const loadDiskCacheConfig = async () => {
+  if (!window.electron) return;
+
+  try {
+    const config = (await window.electron.ipcRenderer.invoke(
+      'get-disk-cache-config'
+    )) as DiskCacheConfig;
+    if (config) {
+      setData.value = {
+        ...setData.value,
+        enableDiskCache: config.enabled,
+        diskCacheDir: config.directory,
+        diskCacheMaxSizeMB: config.maxSizeMB,
+        diskCacheCleanupPolicy: config.cleanupPolicy
+      };
+    }
+  } catch (error) {
+    console.error('读取磁盘缓存配置失败:', error);
+  }
+};
+
+const applyDiskCacheConfig = async () => {
+  if (!window.electron || applyingDiskCacheConfig.value) return;
+
+  applyingDiskCacheConfig.value = true;
+  try {
+    const config = readDiskCacheConfigFromUI();
+    const updated = (await window.electron.ipcRenderer.invoke(
+      'set-disk-cache-config',
+      config
+    )) as DiskCacheConfig;
+
+    if (updated) {
+      setData.value = {
+        ...setData.value,
+        enableDiskCache: updated.enabled,
+        diskCacheDir: updated.directory,
+        diskCacheMaxSizeMB: updated.maxSizeMB,
+        diskCacheCleanupPolicy: updated.cleanupPolicy
+      };
+    }
+    await refreshDiskCacheStats();
+  } catch (error) {
+    console.error('更新磁盘缓存配置失败:', error);
+  } finally {
+    applyingDiskCacheConfig.value = false;
+  }
+};
+
+const applyDiskCacheConfigDebounced = useDebounceFn(() => {
+  void applyDiskCacheConfig();
+}, 500);
+
+watch(
+  () => [
+    setData.value.enableDiskCache,
+    setData.value.diskCacheDir,
+    setData.value.diskCacheMaxSizeMB,
+    setData.value.diskCacheCleanupPolicy
+  ],
+  () => {
+    if (!window.electron || applyingDiskCacheConfig.value || switchingCacheDirectory.value) return;
+    applyDiskCacheConfigDebounced();
+  }
+);
+
+const askCacheSwitchMigrate = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    let resolved = false;
+    const finish = (value: boolean) => {
+      if (resolved) return;
+      resolved = true;
+      resolve(value);
+    };
+
+    dialog.warning({
+      title: t('settings.system.switchDirectoryMigrateTitle'),
+      content: t('settings.system.switchDirectoryMigrateContent'),
+      positiveText: t('settings.system.switchDirectoryMigrateConfirm'),
+      negativeText: t('settings.system.switchDirectoryKeepOld'),
+      onPositiveClick: () => finish(true),
+      onNegativeClick: () => finish(false),
+      onClose: () => finish(false)
+    });
+  });
+};
+
+const askCacheSwitchDestroy = (): Promise<boolean> => {
+  return new Promise((resolve) => {
+    let resolved = false;
+    const finish = (value: boolean) => {
+      if (resolved) return;
+      resolved = true;
+      resolve(value);
+    };
+
+    dialog.warning({
+      title: t('settings.system.switchDirectoryDestroyTitle'),
+      content: t('settings.system.switchDirectoryDestroyContent'),
+      positiveText: t('settings.system.switchDirectoryDestroyConfirm'),
+      negativeText: t('settings.system.switchDirectoryKeepOld'),
+      onPositiveClick: () => finish(true),
+      onNegativeClick: () => finish(false),
+      onClose: () => finish(false)
+    });
+  });
+};
+
+const selectCacheDirectory = async () => {
+  if (!window.electron) return;
+
+  const selectedPath = await selectDirectory(message);
+  if (!selectedPath) return;
+
+  const currentDirectory = setData.value.diskCacheDir || diskCacheStats.value.directory;
+  if (currentDirectory && selectedPath === currentDirectory) {
+    return;
+  }
+
+  let action: CacheSwitchAction = 'keep';
+  if (currentDirectory && diskCacheStats.value.totalFiles > 0) {
+    const shouldMigrate = await askCacheSwitchMigrate();
+    if (shouldMigrate) {
+      action = 'migrate';
+    } else {
+      const shouldDestroy = await askCacheSwitchDestroy();
+      action = shouldDestroy ? 'destroy' : 'keep';
+    }
+  }
+
+  switchingCacheDirectory.value = true;
+  try {
+    const result = (await window.electron.ipcRenderer.invoke('switch-disk-cache-directory', {
+      directory: selectedPath,
+      action
+    })) as SwitchCacheDirectoryResult;
+
+    if (!result?.success) {
+      message.error(t('settings.system.messages.switchDirectoryFailed'));
+      return;
+    }
+
+    setData.value = {
+      ...setData.value,
+      enableDiskCache: result.config.enabled,
+      diskCacheDir: result.config.directory,
+      diskCacheMaxSizeMB: result.config.maxSizeMB,
+      diskCacheCleanupPolicy: result.config.cleanupPolicy
+    };
+    await refreshDiskCacheStats();
+
+    if (action === 'migrate') {
+      message.success(
+        t('settings.system.messages.switchDirectoryMigrated', { count: result.migratedFiles })
+      );
+      return;
+    }
+    if (action === 'destroy') {
+      message.success(
+        t('settings.system.messages.switchDirectoryDestroyed', { count: result.destroyedFiles })
+      );
+      return;
+    }
+    message.success(t('settings.system.messages.switchDirectorySuccess'));
+  } catch (error) {
+    console.error('切换缓存目录失败:', error);
+    message.error(t('settings.system.messages.switchDirectoryFailed'));
+  } finally {
+    switchingCacheDirectory.value = false;
+  }
+};
+
+const openCacheDirectory = () => {
+  const targetPath = setData.value.diskCacheDir || diskCacheStats.value.directory;
+  openDirectory(targetPath, message);
+};
+
+const clearDiskCacheByScope = async (scope: DiskCacheScope) => {
+  if (!window.electron) return;
+
+  try {
+    const success = await window.electron.ipcRenderer.invoke('clear-disk-cache', scope);
+    if (success) {
+      await refreshDiskCacheStats();
+      message.success(t('settings.system.messages.diskCacheClearSuccess'));
+      return;
+    }
+    message.error(t('settings.system.messages.diskCacheClearFailed'));
+  } catch (error) {
+    console.error('手动清理磁盘缓存失败:', error);
+    message.error(t('settings.system.messages.diskCacheClearFailed'));
+  }
+};
+
+const clearCache = async (selectedCacheTypes: string[]) => {
+  const clearTasks = selectedCacheTypes.map(async (type) => {
+    switch (type) {
+      case 'history':
+        localStorage.removeItem('musicHistory');
+        break;
+      case 'favorite':
+        localStorage.removeItem('favoriteList');
+        break;
+      case 'user':
+        userStore.handleLogout();
+        break;
+      case 'settings':
+        if (window.electron) {
+          window.electron.ipcRenderer.send('set-store-value', 'set', localData);
+        }
+        localStorage.removeItem('appSettings');
+        localStorage.removeItem('theme');
+        localStorage.removeItem('lyricData');
+        localStorage.removeItem('lyricFontSize');
+        localStorage.removeItem('playMode');
+        break;
+      case 'downloads':
+        if (window.electron) {
+          window.electron.ipcRenderer.send('clear-downloads-history');
+        }
+        break;
+      case 'resources':
+        if (window.electron) {
+          window.electron.ipcRenderer.send('clear-audio-cache');
+          await window.electron.ipcRenderer.invoke('clear-disk-cache', 'music');
+        }
+        localStorage.removeItem('lyricCache');
+        localStorage.removeItem('musicUrlCache');
+        if (window.caches) {
+          try {
+            const cache = await window.caches.open('music-images');
+            const keys = await cache.keys();
+            keys.forEach((key) => cache.delete(key));
+          } catch (error) {
+            console.error('清除图片缓存失败:', error);
+          }
+        }
+        break;
+      case 'lyrics':
+        if (window.electron) {
+          await window.electron.ipcRenderer.invoke('clear-disk-cache', 'lyrics');
+        }
+        await window.api.invoke('clear-lyrics-cache');
+        break;
+    }
+  });
+  await Promise.all(clearTasks);
+  await refreshDiskCacheStats();
+  message.success(t('settings.system.messages.clearSuccess'));
+};
+
+const restartApp = () => {
+  window.electron.ipcRenderer.send('restart');
+};
+
+onMounted(async () => {
+  await loadDiskCacheConfig();
+  await refreshDiskCacheStats();
+});
+</script>