From 19d5f4e9d63c3a95652cf097d0daa1c8499a5bbc Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Thu, 7 May 2026 17:08:40 +0800
Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=9B=BE=E7=89=87=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |  2 +
 electron/main/ipc/index.ts                    |  2 +
 electron/main/ipc/theme.ts                    | 71 +++++++++++++++++
 electron/preload/index.d.ts                   |  4 +
 electron/preload/index.ts                     |  7 ++
 src/App.vue                                   |  1 +
 src/components/AppBackground.vue              | 33 ++++++++
 .../settings/custom/BackgroundImagePicker.vue | 72 +++++++++++++++++
 src/components/ui/SCombobox.vue               |  2 +-
 src/components/ui/SMenu.vue                   |  2 +-
 src/components/ui/SSelect.vue                 |  2 +-
 src/i18n/locales/en-US.json                   | 34 +++++++-
 src/i18n/locales/zh-CN.json                   | 36 +++++++--
 src/layouts/MainLayout.vue                    | 34 ++++----
 src/layouts/components/NavHeader.vue          |  7 +-
 src/settings/schema.ts                        | 58 ++++++++++++++
 src/stores/theme.ts                           | 78 +++++++++++++++++--
 src/styles/global.css                         | 53 ++++++++++++-
 src/types/theme.ts                            | 15 ++++
 src/utils/color.ts                            | 16 +++-
 uno.config.ts                                 |  6 ++
 21 files changed, 497 insertions(+), 38 deletions(-)
 create mode 100644 electron/main/ipc/theme.ts
 create mode 100644 src/components/AppBackground.vue
 create mode 100644 src/components/settings/custom/BackgroundImagePicker.vue

diff --git a/components.d.ts b/components.d.ts
index 54b43a8..0c5cfd7 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,7 +13,9 @@ declare module 'vue' {
   export interface GlobalComponents {
     AbLoopDialog: typeof import('./src/components/modals/AbLoopDialog.vue')['default']
     AmllDbServerConfig: typeof import('./src/components/settings/custom/AmllDbServerConfig.vue')['default']
+    AppBackground: typeof import('./src/components/AppBackground.vue')['default']
     AutoCloseDialog: typeof import('./src/components/modals/AutoCloseDialog.vue')['default']
+    BackgroundImagePicker: typeof import('./src/components/settings/custom/BackgroundImagePicker.vue')['default']
     BottomSpectrum: typeof import('./src/components/player/FullPlayer/BottomSpectrum.vue')['default']
     ComboboxAnchor: typeof import('reka-ui')['ComboboxAnchor']
     ComboboxContent: typeof import('reka-ui')['ComboboxContent']
diff --git a/electron/main/ipc/index.ts b/electron/main/ipc/index.ts
index 3c805f9..7887400 100644
--- a/electron/main/ipc/index.ts
+++ b/electron/main/ipc/index.ts
@@ -8,6 +8,7 @@ import { registerPluginIpc } from "./plugin";
 import { registerApisIpc } from "./apis";
 import { registerLyricsIpc } from "./lyrics";
 import { registerHotkeyIpc } from "./hotkey";
+import { registerThemeIpc } from "./theme";
 
 /** 注册所有 IPC 处理 */
 export const registerIpcHandlers = (): void => {
@@ -21,4 +22,5 @@ export const registerIpcHandlers = (): void => {
   registerApisIpc();
   registerLyricsIpc();
   registerHotkeyIpc();
+  registerThemeIpc();
 };
diff --git a/electron/main/ipc/theme.ts b/electron/main/ipc/theme.ts
new file mode 100644
index 0000000..b3549ae
--- /dev/null
+++ b/electron/main/ipc/theme.ts
@@ -0,0 +1,71 @@
+import { dialog, ipcMain } from "electron";
+import path from "node:path";
+import fs from "node:fs/promises";
+import { createHash } from "node:crypto";
+import { appCacheDir } from "@main/utils/config";
+import { toCacheUrl } from "@main/utils/protocol";
+import { systemLog } from "@main/utils/logger";
+
+/** 背景图片缓存目录 */
+const bgDir = path.join(appCacheDir, "backgrounds");
+
+/** 允许的图片扩展名 */
+const allowedExt = new Set([".jpg", ".jpeg", ".png", ".webp", ".bmp", ".gif"]);
+
+/** 图片体积上限：30MB */
+const MAX_BG_SIZE = 30 * 1024 * 1024;
+
+/**
+ * 注册主题相关的 IPC
+ */
+export const registerThemeIpc = (): void => {
+  /**
+   * 弹出文件选择框，选择背景图后复制到 app-cache/backgrounds/<sha1>.<ext>
+   * 返回 cache:// URL；用户取消 / 体积超限 / 失败均返回 null
+   */
+  ipcMain.handle("theme:pickBackgroundImage", async (): Promise<string | null> => {
+    try {
+      const result = await dialog.showOpenDialog({
+        title: "选择背景图片",
+        properties: ["openFile"],
+        filters: [{ name: "Images", extensions: ["jpg", "jpeg", "png", "webp", "bmp", "gif"] }],
+      });
+      if (result.canceled) return null;
+      const src = result.filePaths[0];
+      if (!src) return null;
+      const ext = path.extname(src).toLowerCase();
+      if (!allowedExt.has(ext)) return null;
+      // 体积校验
+      const stat = await fs.stat(src);
+      if (stat.size > MAX_BG_SIZE) {
+        systemLog.warn(
+          `[theme] background image too large: ${stat.size} bytes (max ${MAX_BG_SIZE})`,
+        );
+        return null;
+      }
+      const data = await fs.readFile(src);
+      // 内容 hash 作为文件名
+      const hash = createHash("sha1").update(data).digest("hex").slice(0, 16);
+      // 清空整个目录再写入新图
+      await fs.rm(bgDir, { recursive: true, force: true });
+      await fs.mkdir(bgDir, { recursive: true });
+      const dest = path.join(bgDir, `${hash}${ext}`);
+      await fs.writeFile(dest, data);
+      return toCacheUrl(dest) ?? null;
+    } catch (err) {
+      systemLog.error("[theme] pickBackgroundImage failed", err);
+      return null;
+    }
+  });
+
+  /**
+   * 清空所有缓存的背景图
+   */
+  ipcMain.handle("theme:clearBackgroundImages", async (): Promise<void> => {
+    try {
+      await fs.rm(bgDir, { recursive: true, force: true });
+    } catch (err) {
+      systemLog.error("[theme] clearBackgroundImages failed", err);
+    }
+  });
+};
diff --git a/electron/preload/index.d.ts b/electron/preload/index.d.ts
index ab5f087..bc7d4c8 100644
--- a/electron/preload/index.d.ts
+++ b/electron/preload/index.d.ts
@@ -40,6 +40,10 @@ declare global {
       plugins: PluginsApi;
       apis: ApisApi;
       lyrics: LyricsApi;
+      theme: {
+        pickBackgroundImage: () => Promise<string | null>;
+        clearBackgroundImages: () => Promise<void>;
+      };
       hotkey: HotkeyApi;
     };
   }
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index 4b4d61e..47a9dab 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -295,6 +295,13 @@ const api = {
     onPositionSync: (callback: (data: unknown) => void) =>
       subscribe("nowPlaying:position-sync", callback),
   },
+  theme: {
+    // 弹出文件选择框
+    pickBackgroundImage: (): Promise<string | null> =>
+      ipcRenderer.invoke("theme:pickBackgroundImage"),
+    // 清空已缓存的背景图
+    clearBackgroundImages: (): Promise<void> => ipcRenderer.invoke("theme:clearBackgroundImages"),
+  },
   hotkey: {
     getAll: () => ipcRenderer.invoke("hotkey:getAll"),
     set: (id: HotkeyActionId, binding: HotkeyBinding) =>
diff --git a/src/App.vue b/src/App.vue
index d584dc7..e8dfa16 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,5 +10,6 @@ watchEffect(() => {
 </script>
 
 <template>
+  <AppBackground />
   <RouterView />
 </template>
diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
new file mode 100644
index 0000000..fac10fa
--- /dev/null
+++ b/src/components/AppBackground.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useThemeStore } from "@/stores/theme";
+
+const theme = useThemeStore();
+
+/** 仅当生效风格为 image 时挂载 DOM；solid 时整个组件不渲染 */
+const visible = computed(
+  () => theme.effectiveStyle === "image" && !!theme.imageBackground.src,
+);
+
+/** 底图永远 object-fit:cover；再叠 transform:scale 控制缩放（>1 溢出可掩盖模糊白边） */
+const imageStyle = computed<Record<string, string>>(() => ({
+  objectFit: "cover",
+  filter: theme.imageBackground.blur > 0 ? `blur(${theme.imageBackground.blur}px)` : "none",
+  transform: `scale(${theme.imageBackground.scale})`,
+}));
+</script>
+
+<template>
+  <div v-if="visible" class="fixed inset-0 -z-10 pointer-events-none overflow-hidden">
+    <img
+      :src="theme.imageBackground.src"
+      class="w-full h-full select-none"
+      :style="imageStyle"
+      draggable="false"
+      alt=""
+    />
+    <div
+      class="absolute inset-0 bg-black transition-opacity"
+      :style="{ opacity: theme.imageBackground.dim }"
+    />
+  </div>
+</template>
diff --git a/src/components/settings/custom/BackgroundImagePicker.vue b/src/components/settings/custom/BackgroundImagePicker.vue
new file mode 100644
index 0000000..997dc76
--- /dev/null
+++ b/src/components/settings/custom/BackgroundImagePicker.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useThemeStore } from "@/stores/theme";
+import IconLucideImage from "~icons/lucide/image";
+import IconLucideImagePlus from "~icons/lucide/image-plus";
+import IconLucideX from "~icons/lucide/x";
+
+defineOptions({ inheritAttrs: false });
+
+const { t } = useI18n();
+const theme = useThemeStore();
+
+const picking = ref(false);
+
+/** 选图 */
+const handlePick = async (): Promise<void> => {
+  if (picking.value) return;
+  picking.value = true;
+  try {
+    const url = await window.api.theme.pickBackgroundImage();
+    if (url) theme.imageBackground.src = url;
+  } finally {
+    picking.value = false;
+  }
+};
+
+/** 清除 */
+const handleClear = (): void => {
+  theme.imageBackground.src = "";
+};
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <!-- 横向预览（背景图基本都是横屏，正方形会过度裁剪） -->
+    <div
+      class="w-24 h-14 shrink-0 rounded-lg border border-solid border-outline-variant/30 overflow-hidden bg-on-surface/5 flex items-center justify-center"
+    >
+      <img
+        v-if="theme.imageBackground.src"
+        :src="theme.imageBackground.src"
+        class="w-full h-full object-cover"
+        draggable="false"
+        alt="cover"
+      />
+      <IconLucideImage v-else class="size-6 text-on-surface-variant/50" />
+    </div>
+    <SButton
+      variant="secondary"
+      size="small"
+      circle
+      :loading="picking"
+      :title="
+        theme.imageBackground.src
+          ? t('settings.backgroundImage.replace')
+          : t('settings.backgroundImage.select')
+      "
+      @click="handlePick"
+    >
+      <template #icon><IconLucideImagePlus /></template>
+    </SButton>
+    <SButton
+      v-if="theme.imageBackground.src"
+      variant="ghost"
+      size="small"
+      circle
+      :title="t('settings.backgroundImage.clear')"
+      @click="handleClear"
+    >
+      <template #icon><IconLucideX /></template>
+    </SButton>
+  </div>
+</template>
diff --git a/src/components/ui/SCombobox.vue b/src/components/ui/SCombobox.vue
index b4826eb..2cc4c08 100644
--- a/src/components/ui/SCombobox.vue
+++ b/src/components/ui/SCombobox.vue
@@ -135,7 +135,7 @@ const compareByValue = (a: unknown, b: unknown): boolean => {
       <ComboboxTrigger
         as="div"
         :class="[
-          'group flex w-full items-center justify-between gap-2 min-h-8.5 px-2 py-1 text-sm text-on-surface bg-surface-bright/40 border border-solid border-on-surface/20 rounded-lg transition-[border-color,box-shadow,opacity] duration-250 data-[state=open]:border-primary data-[state=open]:shadow-[0_0_0_2px_rgb(var(--s-primary)/0.25)] data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed overflow-hidden',
+          'group flex w-full items-center justify-between gap-2 min-h-8.5 px-2 py-1 text-sm text-on-surface bg-field border border-solid border-on-surface/20 rounded-lg transition-[border-color,box-shadow,opacity] duration-250 data-[state=open]:border-primary data-[state=open]:ring-2 data-[state=open]:ring-primary/25 data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed overflow-hidden',
           disabled ? '' : 'cursor-pointer hover:border-on-surface/50',
         ]"
       >
diff --git a/src/components/ui/SMenu.vue b/src/components/ui/SMenu.vue
index b75ca7a..ab39a0a 100644
--- a/src/components/ui/SMenu.vue
+++ b/src/components/ui/SMenu.vue
@@ -78,7 +78,7 @@ const handleSelect = (item: SMenuItem) => {
             sizeClass.item,
             modelValue === item.key
               ? 'bg-primary/10 text-primary'
-              : 'text-on-surface-variant hover:bg-on-surface/5',
+              : 'text-on-surface/80 hover:bg-on-surface/5',
             item.disabled ? 'opacity-40 pointer-events-none' : '',
           ]"
           @click="handleSelect(item)"
diff --git a/src/components/ui/SSelect.vue b/src/components/ui/SSelect.vue
index 81a17d7..d7ad682 100644
--- a/src/components/ui/SSelect.vue
+++ b/src/components/ui/SSelect.vue
@@ -42,7 +42,7 @@ const handleChange = (val: string) => {
     @update:model-value="handleChange"
   >
     <SelectTrigger
-      class="flex w-full items-center justify-between gap-2 h-8.5 px-3 text-sm text-on-surface bg-surface-bright/40 border border-solid border-on-surface/20 rounded-lg cursor-pointer outline-none focus-visible:outline-none transition-[border-color,box-shadow,opacity] duration-250 hover:border-on-surface/50 data-[state=open]:border-primary data-[state=open]:shadow-[0_0_0_2px_rgb(var(--s-primary)/0.25)] disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
+      class="flex w-full items-center justify-between gap-2 h-8.5 px-3 text-sm text-on-surface bg-field border border-solid border-on-surface/20 rounded-lg cursor-pointer outline-none focus-visible:outline-none transition-[border-color,box-shadow,opacity] duration-250 hover:border-on-surface/50 data-[state=open]:border-primary data-[state=open]:ring-2 data-[state=open]:ring-primary/25 disabled:opacity-50 disabled:cursor-not-allowed overflow-hidden"
     >
       <SelectValue class="min-w-0 truncate">
         <span class="truncate">{{ selectedLabel }}</span>
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 3142ae8..83fc6b3 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -191,6 +191,7 @@
       "dynamicIsland": "Dynamic Island Lyric",
       "taskbarLyric": "Taskbar Lyric",
       "theme": "Theme",
+      "appearanceStyle": "Appearance Style",
       "layout": "Layout",
       "font": "Fonts",
       "media": "Media Controls",
@@ -619,10 +620,10 @@
     "themeSource": {
       "label": "Theme Color Source",
       "description": "How the theme color is determined",
-      "default": "Default",
-      "custom": "Custom",
-      "cover": "From Cover",
-      "solid": "Solid"
+      "default": "Default Color",
+      "custom": "Custom Color",
+      "cover": "From Cover / Background",
+      "solid": "No Theme Color"
     },
     "customColor": {
       "label": "Custom Theme Color",
@@ -632,6 +633,31 @@
       "label": "Global Tint",
       "description": "Apply theme color tint to the entire interface"
     },
+    "appearanceStyle": {
+      "label": "Appearance Style",
+      "description": "How the application background is rendered",
+      "solid": "Solid color",
+      "image": "Custom image"
+    },
+    "backgroundImage": {
+      "label": "Background Image",
+      "description": "Pick a local image as the app background",
+      "select": "Choose image",
+      "replace": "Replace",
+      "clear": "Clear"
+    },
+    "backgroundBlur": {
+      "label": "Background Blur",
+      "description": "Gaussian blur applied to the background image"
+    },
+    "backgroundDim": {
+      "label": "Dim Overlay",
+      "description": "Black overlay opacity for foreground readability"
+    },
+    "backgroundScale": {
+      "label": "Scale",
+      "description": "Background image scale factor"
+    },
     "layoutMode": {
       "label": "Layout Mode",
       "description": "Application layout style",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index a49d153..4e7ea0c 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -190,7 +190,8 @@
       "desktopLyric": "桌面歌词",
       "dynamicIsland": "灵动岛歌词",
       "taskbarLyric": "任务栏歌词",
-      "theme": "主题与风格",
+      "theme": "主题与颜色",
+      "appearanceStyle": "外观风格",
       "layout": "布局",
       "font": "字体",
       "media": "媒体控制",
@@ -619,10 +620,10 @@
     "themeSource": {
       "label": "主题色来源",
       "description": "主题色的获取方式",
-      "default": "默认",
-      "custom": "自定义",
-      "cover": "跟随封面",
-      "solid": "纯色"
+      "default": "默认主题色",
+      "custom": "自定义主色",
+      "cover": "跟随封面 / 背景",
+      "solid": "无主题色"
     },
     "customColor": {
       "label": "自定义主题色",
@@ -632,6 +633,31 @@
       "label": "全局着色",
       "description": "将主题色应用到全局界面"
     },
+    "appearanceStyle": {
+      "label": "外观风格",
+      "description": "应用主背景的呈现方式",
+      "solid": "纯色背景",
+      "image": "自定义图片"
+    },
+    "backgroundImage": {
+      "label": "背景图片",
+      "description": "选择本地图片作为应用背景",
+      "select": "选择图片",
+      "replace": "更换图片",
+      "clear": "清除"
+    },
+    "backgroundBlur": {
+      "label": "背景模糊",
+      "description": "对背景图片应用高斯模糊"
+    },
+    "backgroundDim": {
+      "label": "遮罩浓度",
+      "description": "叠加的黑色遮罩透明度，越高前景越易读"
+    },
+    "backgroundScale": {
+      "label": "缩放大小",
+      "description": "背景图的缩放倍数"
+    },
     "layoutMode": {
       "label": "布局模式",
       "description": "应用的整体布局方式",
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 9705c6c..4b29a6e 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -55,7 +55,7 @@ const playerBarInnerClass = computed(() => {
   const base = "pointer-events-auto";
   switch (appearance.layoutMode) {
     case "floating":
-      return `${base} mx-auto max-w-4xl bg-surface-panel/80 backdrop-blur-2xl backdrop-saturate-150 rounded-full shadow-xl border border-solid border-primary/10`;
+      return `${base} mx-auto max-w-4xl glass-panel rounded-full shadow-xl border border-solid border-primary/10`;
     default:
       return `${base} h-20 bg-surface-panel border-t border-t-solid border-t-primary/10`;
   }
@@ -65,7 +65,7 @@ const playerBarInnerClass = computed(() => {
 <template>
   <!-- 主界面 -->
   <div
-    class="h-screen flex bg-surface text-on-surface transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.7,0,0.3,1)] origin-center"
+    class="h-screen flex bg-app text-on-surface transition-[transform,opacity] duration-500 ease-[cubic-bezier(0.7,0,0.3,1)] origin-center"
     :class="isExpanded ? 'scale-95 opacity-0 pointer-events-none' : ''"
   >
     <!-- 侧边栏 -->
@@ -92,21 +92,23 @@ const playerBarInnerClass = computed(() => {
         </RouterView>
       </main>
     </div>
-
-    <!-- 底部播放栏 -->
-    <Transition
-      enter-active-class="transition-transform duration-300 ease-out"
-      leave-active-class="transition-transform duration-300 ease-in"
-      enter-from-class="translate-y-full"
-      leave-to-class="translate-y-full"
-    >
-      <div v-if="showPlayerBar" :class="playerBarWrapperClass">
-        <footer :class="playerBarInnerClass">
-          <PlayerBar />
-        </footer>
-      </div>
-    </Transition>
   </div>
+
+  <!-- 底部播放栏：放在「主界面」缩放容器外，避免 isExpanded 时跟随 scale-95/opacity 变化；
+       同时 backdrop-filter 不会被祖先 transform 触发重栅格化导致闪烁。 -->
+  <Transition
+    enter-active-class="transition-transform duration-300 ease-out"
+    leave-active-class="transition-transform duration-300 ease-in"
+    enter-from-class="translate-y-full"
+    leave-to-class="translate-y-full"
+  >
+    <div v-if="showPlayerBar" :class="playerBarWrapperClass">
+      <footer :class="playerBarInnerClass">
+        <PlayerBar />
+      </footer>
+    </div>
+  </Transition>
+
   <!-- Toast -->
   <SToast :max="5" />
   <!-- Dialog -->
diff --git a/src/layouts/components/NavHeader.vue b/src/layouts/components/NavHeader.vue
index 8484446..c4fdbaa 100644
--- a/src/layouts/components/NavHeader.vue
+++ b/src/layouts/components/NavHeader.vue
@@ -27,7 +27,12 @@ const themeLabel = computed(() => {
 });
 
 const menuItems = computed<DropdownMenuItem[]>(() => [
-  { key: "theme", label: themeLabel.value, icon: themeIcon.value },
+  {
+    key: "theme",
+    label: themeLabel.value,
+    icon: themeIcon.value,
+    disabled: theme.appearanceStyle === "image",
+  },
   { key: "reload", label: t("nav.reload"), icon: IconRefreshCw, separator: true },
   { key: "devtools", label: t("nav.devtools"), icon: IconTerminal },
   { key: "settings", label: t("nav.globalSettings"), icon: IconSettings },
diff --git a/src/settings/schema.ts b/src/settings/schema.ts
index fb79f1d..cb245d5 100644
--- a/src/settings/schema.ts
+++ b/src/settings/schema.ts
@@ -10,6 +10,7 @@ import LyricFormatOrderConfig from "@/components/settings/custom/LyricFormatOrde
 import ExcludeLyricsConfig from "@/components/settings/custom/ExcludeLyricsConfig.vue";
 import HotkeyConfig from "@/components/settings/custom/HotkeyConfig.vue";
 import FontConfig from "@/components/settings/custom/FontConfig.vue";
+import BackgroundImagePicker from "@/components/settings/custom/BackgroundImagePicker.vue";
 import IconLucideCog from "~icons/lucide/cog";
 import IconLucidePlay from "~icons/lucide/play";
 import IconLucideMic2 from "~icons/lucide/mic-2";
@@ -101,6 +102,8 @@ export const settingsSchema: SettingCategory[] = [
               { value: "system", labelKey: "settings.themeMode.system" },
             ],
             defaultValue: "system",
+            // 图片背景下强制暗色，禁用此开关
+            disabled: () => useThemeStore().appearanceStyle === "image",
           },
           {
             key: "themeSource",
@@ -130,6 +133,61 @@ export const settingsSchema: SettingCategory[] = [
             type: "switch",
             binding: { store: "theme", path: "globalTint" },
             defaultValue: false,
+            // 图片背景下强制开启全局着色，禁用切换
+            disabled: () => useThemeStore().appearanceStyle === "image",
+          },
+        ],
+      },
+      {
+        id: "appearanceStyle",
+        items: [
+          {
+            key: "appearanceStyle",
+            type: "select",
+            binding: { store: "theme", path: "appearanceStyle" },
+            options: [
+              { value: "solid", labelKey: "settings.appearanceStyle.solid" },
+              { value: "image", labelKey: "settings.appearanceStyle.image" },
+            ],
+            defaultValue: "solid",
+            childrenCondition: () => useThemeStore().appearanceStyle === "image",
+            children: [
+              {
+                key: "backgroundImage",
+                type: "custom",
+                component: BackgroundImagePicker,
+              },
+              {
+                key: "backgroundBlur",
+                type: "slider",
+                binding: { store: "theme", path: "imageBackground.blur" },
+                min: 0,
+                max: 80,
+                step: 1,
+                defaultValue: 0,
+                marks: { 0: "0", 20: "20", 40: "40", 80: "80" },
+              },
+              {
+                key: "backgroundDim",
+                type: "slider",
+                binding: { store: "theme", path: "imageBackground.dim" },
+                min: 0.3,
+                max: 0.9,
+                step: 0.05,
+                defaultValue: 0.4,
+                marks: { 0.3: "0.3", 0.4: "0.4", 0.9: "0.9" },
+              },
+              {
+                key: "backgroundScale",
+                type: "slider",
+                binding: { store: "theme", path: "imageBackground.scale" },
+                min: 1,
+                max: 2,
+                step: 0.05,
+                defaultValue: 1.2,
+                marks: { 1: "1", 1.2: "1.2", 2: "2" },
+              },
+            ],
           },
         ],
       },
diff --git a/src/stores/theme.ts b/src/stores/theme.ts
index 6a376df..2cec339 100644
--- a/src/stores/theme.ts
+++ b/src/stores/theme.ts
@@ -1,7 +1,8 @@
-import type { ThemeMode, ThemeSource } from "@/types/theme";
+import type { ThemeMode, ThemeSource, AppearanceStyle, ImageBackgroundConfig } from "@/types/theme";
 import {
   generatePalette,
   applyThemeToDOM,
+  extractColorFromImageUrl,
   DEFAULT_PRIMARY,
   SOLID_PALETTE_LIGHT,
   SOLID_PALETTE_DARK,
@@ -23,12 +24,29 @@ export const useThemeStore = defineStore(
     const globalTint = ref(false);
     /** 封面取色 HEX */
     const coverColor = ref<string | null>(null);
+    /** 外观风格 */
+    const appearanceStyle = ref<AppearanceStyle>("solid");
+    /** 图片背景配置 */
+    const imageBackground = reactive<ImageBackgroundConfig>({
+      src: "",
+      blur: 0,
+      dim: 0.4,
+      scale: 1.2,
+    });
+    /** 从背景图提取的主色 */
+    const imageBackgroundColor = ref<string | null>(null);
+
+    /** 实际生效的风格 */
+    const effectiveStyle = computed<AppearanceStyle>(() =>
+      appearanceStyle.value === "image" && !imageBackground.src ? "solid" : appearanceStyle.value,
+    );
 
-    /** 系统暗色偏好（响应式） */
+    /** 系统暗色偏好 */
     const systemDark = usePreferredDark();
 
     /** 当前是否为暗色 */
     const isDark = computed(() => {
+      if (effectiveStyle.value === "image") return true;
       if (mode.value === "dark") return true;
       if (mode.value === "light") return false;
       return systemDark.value;
@@ -41,15 +59,32 @@ export const useThemeStore = defineStore(
       return DEFAULT_PRIMARY;
     });
 
+    /** 实际生效的全局着色 */
+    const effectiveGlobalTint = computed(() =>
+      effectiveStyle.value === "image" ? true : globalTint.value,
+    );
+    /** 实际生效的封面颜色 */
+    const trackedColorForCover = computed(() =>
+      effectiveStyle.value === "image" ? imageBackgroundColor.value : coverColor.value,
+    );
+    /** 实际生效的主色 HEX */
+    const effectiveColor = computed(() => {
+      if (source.value === "cover" && trackedColorForCover.value) return trackedColorForCover.value;
+      if (source.value === "custom") return customColor.value;
+      return DEFAULT_PRIMARY;
+    });
+
     /** 应用主题到 DOM */
     const apply = (): void => {
-      const useSolid = source.value === "solid" || (source.value === "cover" && !coverColor.value);
+      const useSolid =
+        source.value === "solid" || (source.value === "cover" && !trackedColorForCover.value);
       const palette = useSolid
         ? isDark.value
           ? SOLID_PALETTE_DARK
           : SOLID_PALETTE_LIGHT
-        : generatePalette(activeColor.value, isDark.value, globalTint.value);
+        : generatePalette(effectiveColor.value, isDark.value, effectiveGlobalTint.value);
       applyThemeToDOM(palette, coverColor.value, isDark.value);
+      document.documentElement.dataset.appearanceStyle = effectiveStyle.value;
     };
 
     /** 循环切换主题模式 */
@@ -69,13 +104,30 @@ export const useThemeStore = defineStore(
       source.value = newSource;
     };
 
-    /** 初始化（启动时调用一次） */
+    /** 重新提取背景图主色 */
+    const refreshImageColor = async (src: string): Promise<void> => {
+      imageBackgroundColor.value = src ? await extractColorFromImageUrl(src) : null;
+    };
+
+    /** 初始化 */
     const init = (): void => {
       if (typeof customColor.value !== "string" || !customColor.value.startsWith("#")) {
         customColor.value = DEFAULT_PRIMARY;
       }
+      // 启动时若已有背景图
+      if (imageBackground.src) void refreshImageColor(imageBackground.src);
       apply();
-      watch([isDark, activeColor, source, coverColor, globalTint], () => apply());
+      // 监听背景图变化
+      watch(
+        () => imageBackground.src,
+        (src) => {
+          void refreshImageColor(src);
+        },
+      );
+      // 影响渲染的值变化
+      watch([isDark, effectiveColor, source, effectiveGlobalTint, coverColor, effectiveStyle], () =>
+        apply(),
+      );
     };
 
     return {
@@ -84,8 +136,12 @@ export const useThemeStore = defineStore(
       customColor,
       globalTint,
       coverColor,
+      appearanceStyle,
+      imageBackground,
+      imageBackgroundColor,
       isDark,
       activeColor,
+      effectiveStyle,
       cycleMode,
       setCustomColor,
       setSource,
@@ -95,7 +151,15 @@ export const useThemeStore = defineStore(
   {
     persist: {
       storage: localStorage,
-      pick: ["mode", "source", "customColor", "globalTint"],
+      pick: [
+        "mode",
+        "source",
+        "customColor",
+        "globalTint",
+        "appearanceStyle",
+        "imageBackground",
+        "imageBackgroundColor",
+      ],
     },
   },
 );
diff --git a/src/styles/global.css b/src/styles/global.css
index 70977c3..dfc7194 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -29,13 +29,64 @@ img {
   -webkit-app-region: no-drag;
 }
 
+/* 应用主背景 */
+:root {
+  --s-app-bg: rgb(var(--s-surface));
+}
+html[data-appearance-style="image"] {
+  --s-app-bg: transparent;
+}
+
 html,
 body {
-  background-color: rgb(var(--s-surface));
+  background-color: var(--s-app-bg);
   color: rgb(var(--s-on-surface));
   font-family: var(--user-font, var(--app-font));
 }
 
+/* 主区域容器 */
+.bg-app {
+  background-color: var(--s-app-bg);
+}
+
+/* image 风格 */
+html[data-appearance-style="image"] .bg-surface {
+  background-color: transparent;
+}
+
+/* 顶层面板 + 玻璃面板 */
+html[data-appearance-style="image"] .bg-surface-panel,
+html[data-appearance-style="image"] .bg-surface-alt,
+html[data-appearance-style="image"] .glass-panel {
+  background-color: rgb(var(--s-surface-bright) / 0.22);
+}
+
+/* 默认布局播放栏 */
+html[data-appearance-style="image"] footer.bg-surface-panel {
+  backdrop-filter: blur(16px) saturate(1.4);
+}
+
+/* 弹层主体 */
+html[data-appearance-style="image"] [role="dialog"].bg-surface-panel,
+html[data-appearance-style="image"] [role="dialog"].bg-surface-alt,
+html[data-appearance-style="image"] [role="alertdialog"].bg-surface-panel,
+html[data-appearance-style="image"] [role="alertdialog"].bg-surface-alt {
+  backdrop-filter: blur(16px) saturate(1.4);
+}
+
+/* 弹层内嵌套面板 */
+html[data-appearance-style="image"] [role="dialog"] .bg-surface-panel,
+html[data-appearance-style="image"] [role="alertdialog"] .bg-surface-panel {
+  background-color: rgb(var(--s-surface-panel) / 0.35);
+}
+
+/* 浮层 + 表单控件 */
+html[data-appearance-style="image"] .bg-surface-bright,
+html[data-appearance-style="image"] .bg-field {
+  background-color: rgb(var(--s-surface-bright) / 0.55);
+  backdrop-filter: blur(10px) saturate(1.3);
+}
+
 ::selection {
   background: rgb(var(--s-primary) / 0.3);
   color: rgb(var(--s-on-surface));
diff --git a/src/types/theme.ts b/src/types/theme.ts
index cf3bee3..d0f173a 100644
--- a/src/types/theme.ts
+++ b/src/types/theme.ts
@@ -4,6 +4,21 @@ export type ThemeMode = "light" | "dark" | "system";
 /** 主题颜色来源 */
 export type ThemeSource = "default" | "custom" | "cover" | "solid";
 
+/** 背景层外观风格 */
+export type AppearanceStyle = "solid" | "image";
+
+/** 图片背景配置 */
+export interface ImageBackgroundConfig {
+  /** cache:// URL */
+  src: string;
+  /** 背景模糊半径（px，0~80） */
+  blur: number;
+  /** 遮罩浓度（0~1） */
+  dim: number;
+  /** 缩放倍数（1~2） */
+  scale: number;
+}
+
 /** 主题色板（值为 "R G B" 格式，用于 CSS rgb() / <alpha-value>） */
 export interface ThemePalette {
   /** 主色 */
diff --git a/src/utils/color.ts b/src/utils/color.ts
index cd9e569..ebbed34 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -74,7 +74,7 @@ export const SOLID_PALETTE_LIGHT: ThemePalette = {
   secondary: "82 82 91",
   secondaryContainer: "244 244 245",
   surface: "246 246 246",
-  surfaceAlt: "244 244 245",
+  surfaceAlt: "250 250 251",
   surfacePanel: "255 255 255",
   surfaceBright: "255 255 255",
   onSurface: "24 24 27",
@@ -137,6 +137,20 @@ export const extractColorFromUrl = (url: string | null): void => {
   img.src = url;
 };
 
+/**
+ * 从图片 URL 提取主色
+ * @returns 主色 HEX 或 null（图片加载失败 / 单调 / 低彩度）
+ */
+export const extractColorFromImageUrl = (url: string): Promise<string | null> => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(extractColorFromImageElement(img));
+    img.onerror = () => resolve(null);
+    img.src = url;
+  });
+};
+
 /**
  * 从 HTMLImageElement 提取主色 HEX，纯计算，不操作 store
  * @returns 主色 HEX 或 null（单调/低彩度时）
diff --git a/uno.config.ts b/uno.config.ts
index 5a4ec3c..d4e817c 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -2,6 +2,12 @@ import { defineConfig, presetWind3, presetIcons } from "unocss";
 
 export default defineConfig({
   presets: [presetWind3(), presetIcons()],
+  shortcuts: {
+    // 玻璃感面板
+    "glass-panel": "bg-surface-panel/80 backdrop-blur-2xl backdrop-saturate-150",
+    // 表单控件底色
+    "bg-field": "bg-surface-bright/40",
+  },
   theme: {
     fontFamily: {
       logo: "logo",

From c4beee25fb1c60e8ad5667054a6a6d8ede169fcb Mon Sep 17 00:00:00 2001
From: imsyy <imsyy1024@gmail.com>
Date: Thu, 7 May 2026 18:30:57 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E6=8B=86=E5=88=86=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B9=E5=8F=8A=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppBackground.vue              |    2 -
 src/components/Versions.vue                   |   13 -
 src/components/settings/SettingsItem.vue      |    4 +-
 src/components/settings/custom/FontConfig.vue |   12 +-
 .../settings/custom/HotkeyConfig.vue          |   78 +-
 src/layouts/MainLayout.vue                    |    3 +-
 src/settings/categories/appearance.ts         |  162 +++
 src/settings/categories/externalLyric.ts      |  326 ++++++
 src/settings/categories/general.ts            |   70 ++
 src/settings/categories/hotkeys.ts            |   23 +
 src/settings/categories/lyric.ts              |  252 ++++
 src/settings/categories/player.ts             |  119 ++
 src/settings/categories/plugins.ts            |   29 +
 src/settings/categories/services.ts           |   52 +
 src/settings/schema.ts                        | 1022 +----------------
 src/styles/global.css                         |    6 +
 src/types/settings-schema.ts                  |   14 +-
 17 files changed, 1110 insertions(+), 1077 deletions(-)
 delete mode 100644 src/components/Versions.vue
 create mode 100644 src/settings/categories/appearance.ts
 create mode 100644 src/settings/categories/externalLyric.ts
 create mode 100644 src/settings/categories/general.ts
 create mode 100644 src/settings/categories/hotkeys.ts
 create mode 100644 src/settings/categories/lyric.ts
 create mode 100644 src/settings/categories/player.ts
 create mode 100644 src/settings/categories/plugins.ts
 create mode 100644 src/settings/categories/services.ts

diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index fac10fa..a657986 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -3,12 +3,10 @@ import { useThemeStore } from "@/stores/theme";
 
 const theme = useThemeStore();
 
-/** 仅当生效风格为 image 时挂载 DOM；solid 时整个组件不渲染 */
 const visible = computed(
   () => theme.effectiveStyle === "image" && !!theme.imageBackground.src,
 );
 
-/** 底图永远 object-fit:cover；再叠 transform:scale 控制缩放（>1 溢出可掩盖模糊白边） */
 const imageStyle = computed<Record<string, string>>(() => ({
   objectFit: "cover",
   filter: theme.imageBackground.blur > 0 ? `blur(${theme.imageBackground.blur}px)` : "none",
diff --git a/src/components/Versions.vue b/src/components/Versions.vue
deleted file mode 100644
index 1bfbfdc..0000000
--- a/src/components/Versions.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { reactive } from "vue";
-
-const versions = reactive({ ...window.electron.process.versions });
-</script>
-
-<template>
-  <ul class="versions">
-    <li class="electron-version">Electron v{{ versions.electron }}</li>
-    <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
-    <li class="node-version">Node v{{ versions.node }}</li>
-  </ul>
-</template>
diff --git a/src/components/settings/SettingsItem.vue b/src/components/settings/SettingsItem.vue
index dac69ed..97a852a 100644
--- a/src/components/settings/SettingsItem.vue
+++ b/src/components/settings/SettingsItem.vue
@@ -112,10 +112,8 @@ const descriptionText = computed(() =>
         />
       </div>
     </div>
-
-    <!-- 子项（父级关闭时禁用） -->
     <div
-      v-if="item.children?.length"
+      v-if="item.children?.length && (!item.hideChildren || isChildrenActive)"
       class="mt-2.5 flex flex-col gap-2.5 transition-opacity duration-200"
       :class="isChildrenActive ? '' : 'opacity-50 pointer-events-none'"
     >
diff --git a/src/components/settings/custom/FontConfig.vue b/src/components/settings/custom/FontConfig.vue
index 76f9d54..d7f718c 100644
--- a/src/components/settings/custom/FontConfig.vue
+++ b/src/components/settings/custom/FontConfig.vue
@@ -163,9 +163,7 @@ const handleSave = async (): Promise<void> => {
   >
     <div class="flex flex-col gap-3">
       <!-- 设置方式 -->
-      <div
-        class="flex items-center gap-3 rounded-xl bg-surface-panel border border-solid border-outline-variant/15 px-4 py-3.5"
-      >
+      <SCard class="flex items-center gap-3">
         <div class="min-w-0 flex-1">
           <div class="text-base">{{ t("settings.fontConfig.modeLabel") }}</div>
           <div class="text-sm text-on-surface-variant/70 mt-0.5">
@@ -175,7 +173,7 @@ const handleSave = async (): Promise<void> => {
         <div class="shrink-0 w-60">
           <SSelect :model-value="mode" :options="modeOptions" @update:model-value="updateMode" />
         </div>
-      </div>
+      </SCard>
 
       <!-- 各分组 -->
       <div v-for="g in groupedTargets" :key="g.group" class="flex flex-col gap-2.5">
@@ -183,10 +181,10 @@ const handleSave = async (): Promise<void> => {
           <span class="w-1 h-4 rounded-full bg-primary" />
           {{ t(`settings.fontConfig.groups.${g.group}`) }}
         </h4>
-        <div
+        <SCard
           v-for="target in g.items"
           :key="target.key"
-          class="flex flex-col gap-2.5 rounded-xl bg-surface-panel border border-solid border-outline-variant/15 px-4 py-3.5"
+          class="flex flex-col gap-2.5"
         >
           <div class="flex items-center gap-3">
             <div class="min-w-0 flex-1 text-base">{{ target.label }}</div>
@@ -221,7 +219,7 @@ const handleSave = async (): Promise<void> => {
             clearable
             @update:model-value="handleManualInput(target.key, $event)"
           />
-        </div>
+        </SCard>
       </div>
     </div>
 
diff --git a/src/components/settings/custom/HotkeyConfig.vue b/src/components/settings/custom/HotkeyConfig.vue
index d48fc3c..26edf39 100644
--- a/src/components/settings/custom/HotkeyConfig.vue
+++ b/src/components/settings/custom/HotkeyConfig.vue
@@ -231,9 +231,7 @@ const errorTitleOf = (id: HotkeyActionId, scope: Scope): string => {
       :key="group.category"
       class="rounded-xl bg-surface-panel border border-solid border-outline-variant/15 overflow-hidden"
     >
-      <div
-        class="px-4 py-2.5 flex items-center gap-3 text-sm border-b border-solid border-outline-variant/10"
-      >
+      <div class="px-4 py-2.5 flex items-center gap-3 text-sm">
         <span class="flex-1 text-on-surface-variant/80">
           {{ t(`settings.hotkeys.groups.${group.category}`) }}
         </span>
@@ -245,47 +243,47 @@ const errorTitleOf = (id: HotkeyActionId, scope: Scope): string => {
         </span>
         <span class="w-9" />
       </div>
+      <SDivider />
       <div class="flex flex-col">
-        <div
-          v-for="action in group.actions"
-          :key="action.id"
-          class="px-4 py-2.5 flex items-center gap-3 border-b border-solid border-outline-variant/10 last:border-b-0"
-        >
-          <span class="flex-1 text-sm">{{ t(action.labelKey) }}</span>
+        <template v-for="(action, idx) in group.actions" :key="action.id">
+          <div class="px-4 py-2.5 flex items-center gap-3">
+            <span class="flex-1 text-sm">{{ t(action.labelKey) }}</span>
 
-          <div class="w-48" :title="errorTitleOf(action.id, 'inApp')">
-            <SInput
-              readonly
-              :model-value="valueOf(action.id, 'inApp')"
-              :placeholder="placeholderOf(action.id, 'inApp')"
-              :status="statusOf(action.id, 'inApp')"
-              @click="startRecord(action.id, 'inApp')"
-              @blur="stopRecord"
-            />
-          </div>
+            <div class="w-48" :title="errorTitleOf(action.id, 'inApp')">
+              <SInput
+                readonly
+                :model-value="valueOf(action.id, 'inApp')"
+                :placeholder="placeholderOf(action.id, 'inApp')"
+                :status="statusOf(action.id, 'inApp')"
+                @click="startRecord(action.id, 'inApp')"
+                @blur="stopRecord"
+              />
+            </div>
 
-          <div v-if="action.allowGlobal" class="w-48" :title="errorTitleOf(action.id, 'global')">
-            <SInput
-              readonly
-              :disabled="!hotkey.globalEnabled"
-              :model-value="valueOf(action.id, 'global')"
-              :placeholder="placeholderOf(action.id, 'global')"
-              :status="statusOf(action.id, 'global')"
-              @click="startRecord(action.id, 'global')"
-              @blur="stopRecord"
-            />
-          </div>
-          <div v-else class="w-48 text-center text-sm text-on-surface-variant/30">—</div>
+            <div v-if="action.allowGlobal" class="w-48" :title="errorTitleOf(action.id, 'global')">
+              <SInput
+                readonly
+                :disabled="!hotkey.globalEnabled"
+                :model-value="valueOf(action.id, 'global')"
+                :placeholder="placeholderOf(action.id, 'global')"
+                :status="statusOf(action.id, 'global')"
+                @click="startRecord(action.id, 'global')"
+                @blur="stopRecord"
+              />
+            </div>
+            <div v-else class="w-48 text-center text-sm text-on-surface-variant/30">—</div>
 
-          <SButton
-            variant="ghost"
-            circle
-            :title="t('settings.hotkeys.resetRow')"
-            @click="resetSingle(action.id)"
-          >
-            <template #icon><IconLucideRotateCcw /></template>
-          </SButton>
-        </div>
+            <SButton
+              variant="ghost"
+              circle
+              :title="t('settings.hotkeys.resetRow')"
+              @click="resetSingle(action.id)"
+            >
+              <template #icon><IconLucideRotateCcw /></template>
+            </SButton>
+          </div>
+          <SDivider v-if="idx < group.actions.length - 1" />
+        </template>
       </div>
     </div>
 
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 4b29a6e..05861a1 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -94,8 +94,7 @@ const playerBarInnerClass = computed(() => {
     </div>
   </div>
 
-  <!-- 底部播放栏：放在「主界面」缩放容器外，避免 isExpanded 时跟随 scale-95/opacity 变化；
-       同时 backdrop-filter 不会被祖先 transform 触发重栅格化导致闪烁。 -->
+  <!-- 底部播放栏 -->
   <Transition
     enter-active-class="transition-transform duration-300 ease-out"
     leave-active-class="transition-transform duration-300 ease-in"
diff --git a/src/settings/categories/appearance.ts b/src/settings/categories/appearance.ts
new file mode 100644
index 0000000..51c6112
--- /dev/null
+++ b/src/settings/categories/appearance.ts
@@ -0,0 +1,162 @@
+import type { SettingCategory } from "@/types/settings-schema";
+import { useThemeStore } from "@/stores/theme";
+import FontConfig from "@/components/settings/custom/FontConfig.vue";
+import BackgroundImagePicker from "@/components/settings/custom/BackgroundImagePicker.vue";
+import IconLucidePalette from "~icons/lucide/palette";
+
+const appearanceCategory: SettingCategory = {
+  id: "appearance",
+  icon: IconLucidePalette,
+  sections: [
+    {
+      id: "theme",
+      items: [
+        {
+          key: "themeMode",
+          type: "select",
+          binding: { store: "theme", path: "mode" },
+          options: [
+            { value: "light", labelKey: "settings.themeMode.light" },
+            { value: "dark", labelKey: "settings.themeMode.dark" },
+            { value: "system", labelKey: "settings.themeMode.system" },
+          ],
+          defaultValue: "system",
+          // 图片背景下强制暗色，禁用此开关
+          disabled: () => useThemeStore().appearanceStyle === "image",
+        },
+        {
+          key: "themeSource",
+          type: "select",
+          binding: { store: "theme", path: "source" },
+          options: [
+            { value: "default", labelKey: "settings.themeSource.default" },
+            { value: "custom", labelKey: "settings.themeSource.custom" },
+            { value: "cover", labelKey: "settings.themeSource.cover" },
+            { value: "solid", labelKey: "settings.themeSource.solid" },
+          ],
+          defaultValue: "default",
+          childrenCondition: () => useThemeStore().source === "custom",
+          hideChildren: true,
+          children: [
+            {
+              key: "customColor",
+              type: "color",
+              binding: { store: "theme", path: "customColor" },
+              defaultValue: "#fe7971",
+              showAlpha: false,
+              colorFormat: "hex",
+            },
+          ],
+        },
+        {
+          key: "globalTint",
+          type: "switch",
+          binding: { store: "theme", path: "globalTint" },
+          defaultValue: false,
+          // 图片背景下强制开启全局着色，禁用切换
+          disabled: () => useThemeStore().appearanceStyle === "image",
+        },
+      ],
+    },
+    {
+      id: "appearanceStyle",
+      items: [
+        {
+          key: "appearanceStyle",
+          type: "select",
+          binding: { store: "theme", path: "appearanceStyle" },
+          options: [
+            { value: "solid", labelKey: "settings.appearanceStyle.solid" },
+            { value: "image", labelKey: "settings.appearanceStyle.image" },
+          ],
+          defaultValue: "solid",
+          childrenCondition: () => useThemeStore().appearanceStyle === "image",
+          hideChildren: true,
+          children: [
+            {
+              key: "backgroundImage",
+              type: "custom",
+              component: BackgroundImagePicker,
+            },
+            {
+              key: "backgroundBlur",
+              type: "slider",
+              binding: { store: "theme", path: "imageBackground.blur" },
+              min: 0,
+              max: 80,
+              step: 1,
+              defaultValue: 0,
+              marks: { 0: "0", 20: "20", 40: "40", 80: "80" },
+            },
+            {
+              key: "backgroundDim",
+              type: "slider",
+              binding: { store: "theme", path: "imageBackground.dim" },
+              min: 0.3,
+              max: 0.9,
+              step: 0.05,
+              defaultValue: 0.4,
+              marks: { 0.3: "0.3", 0.4: "0.4", 0.9: "0.9" },
+            },
+            {
+              key: "backgroundScale",
+              type: "slider",
+              binding: { store: "theme", path: "imageBackground.scale" },
+              min: 1,
+              max: 2,
+              step: 0.05,
+              defaultValue: 1.2,
+              marks: { 1: "1", 1.2: "1.2", 2: "2" },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: "font",
+      items: [
+        {
+          key: "fontConfig",
+          type: "custom",
+          component: FontConfig,
+        },
+      ],
+    },
+    {
+      id: "layout",
+      items: [
+        {
+          key: "layoutMode",
+          type: "select",
+          binding: { store: "settings", path: "appearance.layoutMode" },
+          options: [
+            { value: "default", labelKey: "settings.layoutMode.default" },
+            { value: "sidebar-full", labelKey: "settings.layoutMode.sidebarFull" },
+            { value: "floating", labelKey: "settings.layoutMode.floating" },
+          ],
+          defaultValue: "default",
+        },
+        {
+          key: "routeTransition",
+          type: "select",
+          binding: { store: "settings", path: "appearance.routeTransition" },
+          options: [
+            { value: "none", labelKey: "settings.routeTransition.none" },
+            { value: "fade", labelKey: "settings.routeTransition.fade" },
+            { value: "slide", labelKey: "settings.routeTransition.slide" },
+            { value: "zoom", labelKey: "settings.routeTransition.zoom" },
+          ],
+          defaultValue: "fade",
+        },
+        {
+          key: "sidebarCollapsed",
+          type: "switch",
+          binding: { store: "settings", path: "appearance.sidebarCollapsed" },
+          defaultValue: false,
+        },
+      ],
+    },
+  ],
+};
+
+export default appearanceCategory;
diff --git a/src/settings/categories/externalLyric.ts b/src/settings/categories/externalLyric.ts
new file mode 100644
index 0000000..07dc3a9
--- /dev/null
+++ b/src/settings/categories/externalLyric.ts
@@ -0,0 +1,326 @@
+import type { SettingCategory, SettingSection } from "@/types/settings-schema";
+import { useSettingsStore } from "@/stores/settings";
+import IconLucideMonitor from "~icons/lucide/monitor";
+
+const desktopLyricSection: SettingSection = {
+  id: "desktopLyric",
+  tag: { text: "Beta" },
+  items: [
+    {
+      key: "desktopLyricEnabled",
+      type: "switch",
+      binding: { store: "settings", path: "isDesktopLyricOpen" },
+      defaultValue: false,
+    },
+    {
+      key: "desktopLyricFontSize",
+      type: "select",
+      binding: { store: "settings", path: "system.desktopLyric.fontSize" },
+      defaultValue: 24,
+      options: Array.from({ length: 96 - 20 + 1 }, (_, i) => {
+        const n = 20 + i;
+        return { value: n, label: `${n} px` };
+      }),
+    },
+    {
+      key: "desktopLyricFontWeight",
+      type: "slider",
+      binding: { store: "settings", path: "system.desktopLyric.fontWeight" },
+      min: 100,
+      max: 900,
+      step: 100,
+      defaultValue: 600,
+      marks: { 100: "100", 400: "400", 700: "700", 900: "900" },
+    },
+    {
+      key: "desktopLyricDoubleLine",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.doubleLine" },
+      defaultValue: true,
+    },
+    {
+      key: "desktopLyricAlign",
+      type: "select",
+      binding: { store: "settings", path: "system.desktopLyric.align" },
+      options: [
+        { value: "left", labelKey: "settings.desktopLyricAlign.left" },
+        { value: "center", labelKey: "settings.desktopLyricAlign.center" },
+        { value: "right", labelKey: "settings.desktopLyricAlign.right" },
+        { value: "justify", labelKey: "settings.desktopLyricAlign.justify" },
+      ],
+      defaultValue: "center",
+    },
+    {
+      key: "desktopLyricWordByWord",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.wordByWord" },
+      defaultValue: true,
+    },
+    {
+      key: "desktopLyricAutoGenerateWordByWord",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.autoGenerateWordByWord" },
+      defaultValue: true,
+    },
+    {
+      key: "desktopLyricShowTranslation",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.showTranslation" },
+      defaultValue: true,
+    },
+    {
+      key: "desktopLyricPlayedColor",
+      type: "color",
+      binding: { store: "settings", path: "system.desktopLyric.playedColor" },
+      defaultValue: "#ffffff",
+      showAlpha: false,
+    },
+    {
+      key: "desktopLyricUnplayedColor",
+      type: "color",
+      binding: { store: "settings", path: "system.desktopLyric.unplayedColor" },
+      defaultValue: "#7d7d7d",
+      showAlpha: false,
+    },
+    {
+      key: "desktopLyricStrokeColor",
+      type: "color",
+      binding: { store: "settings", path: "system.desktopLyric.strokeColor" },
+      defaultValue: "rgba(0, 0, 0, 0.5)",
+    },
+    {
+      key: "desktopLyricBackgroundMask",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.backgroundMask" },
+      defaultValue: false,
+      children: [
+        {
+          key: "desktopLyricBackgroundMaskColor",
+          type: "color",
+          binding: { store: "settings", path: "system.desktopLyric.backgroundMaskColor" },
+          defaultValue: "rgba(0, 0, 0, 0.3)",
+        },
+      ],
+    },
+    {
+      key: "desktopLyricAlwaysShowSongInfo",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.alwaysShowSongInfo" },
+      defaultValue: false,
+    },
+    {
+      key: "desktopLyricAnimation",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.animation" },
+      defaultValue: true,
+    },
+    {
+      key: "desktopLyricLimitBounds",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.limitBounds" },
+      defaultValue: false,
+    },
+    {
+      key: "desktopLyricAlwaysOnTop",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.alwaysOnTop" },
+      defaultValue: true,
+    },
+    {
+      key: "desktopLyricLocked",
+      type: "switch",
+      binding: { store: "settings", path: "system.desktopLyric.locked" },
+      defaultValue: false,
+    },
+  ],
+};
+
+const dynamicIslandSection: SettingSection = {
+  id: "dynamicIsland",
+  tag: { text: "Beta" },
+  items: [
+    {
+      key: "dynamicIslandEnabled",
+      type: "switch",
+      binding: { store: "settings", path: "isDynamicIslandOpen" },
+      defaultValue: false,
+    },
+    {
+      key: "dynamicIslandScale",
+      type: "slider",
+      binding: { store: "settings", path: "system.dynamicIsland.scale" },
+      min: 0.5,
+      max: 2,
+      step: 0.05,
+      defaultValue: 1,
+      marks: { 0.5: "50%", 1: "100%", 2: "200%" },
+    },
+    {
+      key: "dynamicIslandFontWeight",
+      type: "slider",
+      binding: { store: "settings", path: "system.dynamicIsland.fontWeight" },
+      min: 100,
+      max: 900,
+      step: 100,
+      defaultValue: 500,
+      marks: { 100: "100", 500: "500", 900: "900" },
+    },
+    {
+      key: "dynamicIslandWordByWord",
+      type: "switch",
+      binding: { store: "settings", path: "system.dynamicIsland.wordByWord" },
+      defaultValue: true,
+    },
+    {
+      key: "dynamicIslandDoubleLine",
+      type: "switch",
+      binding: { store: "settings", path: "system.dynamicIsland.doubleLine" },
+      defaultValue: false,
+    },
+    {
+      key: "dynamicIslandShowTranslation",
+      type: "switch",
+      binding: { store: "settings", path: "system.dynamicIsland.showTranslation" },
+      defaultValue: false,
+    },
+    {
+      key: "dynamicIslandPlayedColor",
+      type: "color",
+      binding: { store: "settings", path: "system.dynamicIsland.playedColor" },
+      defaultValue: "rgba(255, 255, 255, 1)",
+      showAlpha: false,
+    },
+    {
+      key: "dynamicIslandUnplayedColor",
+      type: "color",
+      binding: { store: "settings", path: "system.dynamicIsland.unplayedColor" },
+      defaultValue: "rgba(255, 255, 255, 0.5)",
+    },
+    {
+      key: "dynamicIslandBackgroundColor",
+      type: "color",
+      binding: { store: "settings", path: "system.dynamicIsland.backgroundColor" },
+      defaultValue: "rgba(0, 0, 0, 1)",
+    },
+    {
+      key: "dynamicIslandAlwaysOnTop",
+      type: "switch",
+      binding: { store: "settings", path: "system.dynamicIsland.alwaysOnTop" },
+      defaultValue: true,
+    },
+    {
+      key: "dynamicIslandSnapCentered",
+      type: "switch",
+      binding: { store: "settings", path: "system.dynamicIsland.snapCentered" },
+      defaultValue: true,
+    },
+    {
+      key: "dynamicIslandNonOcclusive",
+      type: "switch",
+      binding: { store: "settings", path: "system.dynamicIsland.nonOcclusive" },
+      defaultValue: false,
+    },
+  ],
+};
+
+/** Win 平台限定 */
+const taskbarLyricSection: SettingSection = {
+  id: "taskbarLyric",
+  tag: { text: "Beta" },
+  items: [
+    {
+      key: "taskbarLyricEnabled",
+      type: "switch",
+      binding: { store: "settings", path: "isTaskbarLyricOpen" },
+      defaultValue: false,
+    },
+    {
+      key: "taskbarLyricPosition",
+      type: "select",
+      binding: { store: "settings", path: "system.taskbarLyric.position" },
+      options: [
+        { value: "auto", labelKey: "settings.taskbarLyricPosition.auto" },
+        { value: "left", labelKey: "settings.taskbarLyricPosition.left" },
+        { value: "right", labelKey: "settings.taskbarLyricPosition.right" },
+      ],
+      defaultValue: "auto",
+    },
+    {
+      key: "taskbarLyricAutoMaxWidth",
+      type: "switch",
+      binding: { store: "settings", path: "system.taskbarLyric.autoMaxWidth" },
+      defaultValue: true,
+      childrenCondition: () => useSettingsStore().system.taskbarLyric.autoMaxWidth === false,
+      children: [
+        {
+          key: "taskbarLyricMaxWidth",
+          type: "slider",
+          binding: { store: "settings", path: "system.taskbarLyric.maxWidth" },
+          min: 200,
+          max: 800,
+          step: 20,
+          defaultValue: 400,
+          marks: { 200: "200", 400: "400", 800: "800" },
+        },
+      ],
+    },
+    {
+      key: "taskbarLyricColorMode",
+      type: "select",
+      binding: { store: "settings", path: "system.taskbarLyric.colorMode" },
+      options: [
+        { value: "taskbar", labelKey: "settings.taskbarLyricColorMode.taskbar" },
+        { value: "light", labelKey: "settings.taskbarLyricColorMode.light" },
+        { value: "dark", labelKey: "settings.taskbarLyricColorMode.dark" },
+      ],
+      defaultValue: "taskbar",
+    },
+    {
+      key: "taskbarLyricFontSize",
+      type: "slider",
+      binding: { store: "settings", path: "system.taskbarLyric.fontSize" },
+      min: 12,
+      max: 20,
+      step: 1,
+      defaultValue: 14,
+      marks: { 12: "12", 14: "14", 17: "17", 20: "20" },
+    },
+    {
+      key: "taskbarLyricShowCover",
+      type: "switch",
+      binding: { store: "settings", path: "system.taskbarLyric.showCover" },
+      defaultValue: true,
+    },
+    {
+      key: "taskbarLyricWordByWord",
+      type: "switch",
+      binding: { store: "settings", path: "system.taskbarLyric.wordByWord" },
+      defaultValue: true,
+    },
+    {
+      key: "taskbarLyricDoubleLine",
+      type: "switch",
+      binding: { store: "settings", path: "system.taskbarLyric.doubleLine" },
+      defaultValue: true,
+    },
+    {
+      key: "taskbarLyricShowTranslation",
+      type: "switch",
+      binding: { store: "settings", path: "system.taskbarLyric.showTranslation" },
+      defaultValue: true,
+    },
+  ],
+};
+
+const externalLyricCategory: SettingCategory = {
+  id: "externalLyric",
+  icon: IconLucideMonitor,
+  sections: [
+    desktopLyricSection,
+    dynamicIslandSection,
+    // taskbarLyric 仅 Windows 可用
+    ...(navigator.platform.startsWith("Win") ? [taskbarLyricSection] : []),
+  ],
+};
+
+export default externalLyricCategory;
diff --git a/src/settings/categories/general.ts b/src/settings/categories/general.ts
new file mode 100644
index 0000000..39bad3a
--- /dev/null
+++ b/src/settings/categories/general.ts
@@ -0,0 +1,70 @@
+import type { SettingCategory } from "@/types/settings-schema";
+import StorageManager from "@/components/settings/custom/StorageManager.vue";
+import IconLucideCog from "~icons/lucide/cog";
+
+const generalCategory: SettingCategory = {
+  id: "general",
+  icon: IconLucideCog,
+  sections: [
+    {
+      id: "language",
+      items: [
+        {
+          key: "language",
+          type: "select",
+          binding: { store: "settings", path: "locale" },
+          options: [
+            { value: "zh-CN", labelKey: "settings.language.zhCN" },
+            { value: "en-US", labelKey: "settings.language.enUS" },
+          ],
+          defaultValue: "zh-CN",
+        },
+      ],
+    },
+    {
+      id: "systemConfig",
+      items: [
+        {
+          key: "rememberWindowState",
+          type: "switch",
+          binding: { store: "settings", path: "system.system.rememberWindowState" },
+          defaultValue: true,
+        },
+        {
+          key: "taskbarProgress",
+          type: "switch",
+          binding: { store: "settings", path: "system.system.taskbarProgress" },
+          defaultValue: true,
+        },
+        {
+          key: "closeAction",
+          type: "select",
+          binding: { store: "settings", path: "appearance.closeAction" },
+          options: [
+            { value: "quit", labelKey: "settings.closeAction.quit" },
+            { value: "hide", labelKey: "settings.closeAction.hide" },
+          ],
+          defaultValue: "hide",
+        },
+        {
+          key: "rememberCloseChoice",
+          type: "switch",
+          binding: { store: "settings", path: "appearance.rememberCloseChoice" },
+          defaultValue: false,
+        },
+      ],
+    },
+    {
+      id: "reset",
+      items: [
+        {
+          key: "storageManager",
+          type: "custom",
+          component: StorageManager,
+        },
+      ],
+    },
+  ],
+};
+
+export default generalCategory;
diff --git a/src/settings/categories/hotkeys.ts b/src/settings/categories/hotkeys.ts
new file mode 100644
index 0000000..4dcf040
--- /dev/null
+++ b/src/settings/categories/hotkeys.ts
@@ -0,0 +1,23 @@
+import type { SettingCategory } from "@/types/settings-schema";
+import HotkeyConfig from "@/components/settings/custom/HotkeyConfig.vue";
+import IconLucideKeyboard from "~icons/lucide/keyboard";
+
+const hotkeysCategory: SettingCategory = {
+  id: "hotkeys",
+  icon: IconLucideKeyboard,
+  sections: [
+    {
+      id: "hotkeys",
+      items: [
+        {
+          key: "hotkeys",
+          type: "custom",
+          component: HotkeyConfig,
+          fullWidth: true,
+        },
+      ],
+    },
+  ],
+};
+
+export default hotkeysCategory;
diff --git a/src/settings/categories/lyric.ts b/src/settings/categories/lyric.ts
new file mode 100644
index 0000000..084fa04
--- /dev/null
+++ b/src/settings/categories/lyric.ts
@@ -0,0 +1,252 @@
+import type { SettingCategory } from "@/types/settings-schema";
+import { useSettingsStore } from "@/stores/settings";
+import AmllDbServerConfig from "@/components/settings/custom/AmllDbServerConfig.vue";
+import LyricSourceOrderConfig from "@/components/settings/custom/LyricSourceOrderConfig.vue";
+import LyricFormatOrderConfig from "@/components/settings/custom/LyricFormatOrderConfig.vue";
+import ExcludeLyricsConfig from "@/components/settings/custom/ExcludeLyricsConfig.vue";
+import IconLucideMic2 from "~icons/lucide/mic-2";
+
+const lyricCategory: SettingCategory = {
+  id: "lyric",
+  icon: IconLucideMic2,
+  sections: [
+    {
+      id: "lyricContent",
+      items: [
+        {
+          key: "lyricSourcePreference",
+          type: "select",
+          binding: { store: "settings", path: "lyric.lyricSourcePreference" },
+          options: [
+            { value: "auto", labelKey: "settings.lyricSourcePreference.auto" },
+            { value: "qqmusic", labelKey: "settings.lyricSourcePreference.qqmusic" },
+            { value: "kugou", labelKey: "settings.lyricSourcePreference.kugou" },
+            { value: "netease", labelKey: "settings.lyricSourcePreference.netease" },
+            { value: "self", labelKey: "settings.lyricSourcePreference.self" },
+          ],
+          defaultValue: "auto",
+          childrenCondition: () => useSettingsStore().lyric.lyricSourcePreference === "auto",
+          children: [
+            {
+              key: "smartPreferOnline",
+              type: "switch",
+              binding: { store: "settings", path: "lyric.smartPreferOnline" },
+              defaultValue: false,
+            },
+          ],
+        },
+        {
+          key: "lyricSourceOrder",
+          type: "custom",
+          component: LyricSourceOrderConfig,
+        },
+        {
+          key: "lyricFormatOrder",
+          type: "custom",
+          component: LyricFormatOrderConfig,
+        },
+        {
+          key: "enableOnlineTTMLLyric",
+          type: "switch",
+          binding: { store: "settings", path: "system.lyric.enableOnlineTTMLLyric" },
+          defaultValue: false,
+          tag: { text: "Beta" },
+          children: [
+            {
+              key: "amllDbServer",
+              type: "custom",
+              component: AmllDbServerConfig,
+              binding: { store: "settings", path: "system.lyric.amllDbServer" },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: "lyricExclude",
+      items: [
+        {
+          key: "enableExcludeLyrics",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.enableExcludeLyrics" },
+          defaultValue: true,
+          children: [
+            {
+              key: "excludeLyricsRules",
+              type: "custom",
+              component: ExcludeLyricsConfig,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: "lyricGeneral",
+      items: [
+        {
+          key: "adaptiveFontSize",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.adaptiveFontSize" },
+          defaultValue: true,
+        },
+        {
+          key: "fontSize",
+          type: "slider",
+          binding: { store: "settings", path: "lyric.fontSize" },
+          min: 30,
+          max: 64,
+          step: 1,
+          defaultValue: 48,
+          marks: { 30: "30", 48: "48", 64: "64" },
+        },
+        {
+          key: "fontWeight",
+          type: "slider",
+          binding: { store: "settings", path: "lyric.fontWeight" },
+          min: 100,
+          max: 900,
+          step: 100,
+          defaultValue: 700,
+          marks: { 100: "100", 400: "400", 700: "700", 900: "900" },
+        },
+        {
+          key: "showTranslation",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.showTranslation" },
+          defaultValue: true,
+        },
+        {
+          key: "showRomanization",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.showRomanization" },
+          defaultValue: true,
+        },
+      ],
+    },
+    {
+      id: "lyricDisplay",
+      items: [
+        {
+          key: "enableWordHighlight",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.enableWordHighlight" },
+          defaultValue: true,
+        },
+        {
+          key: "enableFloatAnimation",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.enableFloatAnimation" },
+          defaultValue: false,
+        },
+        {
+          key: "enableEmphasizeEffect",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.enableEmphasizeEffect" },
+          defaultValue: false,
+        },
+        {
+          key: "enableBlur",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.enableBlur" },
+          defaultValue: false,
+        },
+        {
+          key: "hidePassedLines",
+          type: "switch",
+          binding: { store: "settings", path: "lyric.hidePassedLines" },
+          defaultValue: false,
+        },
+      ],
+    },
+    {
+      id: "lyricSpring",
+      items: [
+        {
+          key: "springPreset",
+          type: "select",
+          binding: { store: "settings", path: "lyric.springPreset" },
+          options: [
+            { value: "default", labelKey: "settings.springPreset.default" },
+            { value: "smooth", labelKey: "settings.springPreset.smooth" },
+            { value: "responsive", labelKey: "settings.springPreset.responsive" },
+            { value: "jello", labelKey: "settings.springPreset.jello" },
+            { value: "heavy", labelKey: "settings.springPreset.heavy" },
+            { value: "noBounce", labelKey: "settings.springPreset.noBounce" },
+            { value: "custom", labelKey: "settings.springPreset.custom" },
+          ],
+          defaultValue: "default",
+          childrenCondition: () => useSettingsStore().lyric.springPreset === "custom",
+          children: [
+            {
+              key: "springMass",
+              type: "slider",
+              binding: { store: "settings", path: "lyric.springMass" },
+              min: 0.1,
+              max: 5,
+              step: 0.1,
+              defaultValue: 0.9,
+              marks: { 0.1: "0.1", 0.9: "0.9", 5: "5" },
+            },
+            {
+              key: "springDamping",
+              type: "slider",
+              binding: { store: "settings", path: "lyric.springDamping" },
+              min: 1,
+              max: 50,
+              step: 0.5,
+              defaultValue: 15,
+              marks: { 1: "1", 15: "15", 50: "50" },
+            },
+            {
+              key: "springStiffness",
+              type: "slider",
+              binding: { store: "settings", path: "lyric.springStiffness" },
+              min: 10,
+              max: 300,
+              step: 5,
+              defaultValue: 90,
+              marks: { 10: "10", 90: "90", 300: "300" },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: "lyricLayout",
+      items: [
+        {
+          key: "alignPosition",
+          type: "slider",
+          binding: { store: "settings", path: "lyric.alignPosition" },
+          min: 0.1,
+          max: 0.9,
+          step: 0.05,
+          defaultValue: 0.35,
+          marks: { 0.1: "0.1", 0.35: "0.35", 0.9: "0.9" },
+        },
+        {
+          key: "wordFadeWidth",
+          type: "slider",
+          binding: { store: "settings", path: "lyric.wordFadeWidth" },
+          min: 0.1,
+          max: 1,
+          step: 0.1,
+          defaultValue: 0.5,
+          marks: { 0.1: "0.1", 0.5: "0.5", 1: "1" },
+        },
+        {
+          key: "inactiveAlpha",
+          type: "slider",
+          binding: { store: "settings", path: "lyric.inactiveAlpha" },
+          min: 0,
+          max: 1,
+          step: 0.05,
+          defaultValue: 0.2,
+          marks: { 0: "0", 0.2: "0.2", 1: "1" },
+        },
+      ],
+    },
+  ],
+};
+
+export default lyricCategory;
diff --git a/src/settings/categories/player.ts b/src/settings/categories/player.ts
new file mode 100644
index 0000000..7cbb3d8
--- /dev/null
+++ b/src/settings/categories/player.ts
@@ -0,0 +1,119 @@
+import type { SettingCategory } from "@/types/settings-schema";
+import DeviceSelector from "@/components/settings/custom/DeviceSelector.vue";
+import IconLucidePlay from "~icons/lucide/play";
+
+const playerCategory: SettingCategory = {
+  id: "player",
+  icon: IconLucidePlay,
+  sections: [
+    {
+      id: "playback",
+      items: [
+        {
+          key: "playerBgType",
+          type: "select",
+          binding: { store: "settings", path: "player.playerBgType" },
+          options: [
+            { value: "blur", labelKey: "settings.playerBgType.blur" },
+            { value: "solid", labelKey: "settings.playerBgType.solid" },
+          ],
+          defaultValue: "blur",
+        },
+        {
+          key: "autoCenterCover",
+          type: "switch",
+          binding: { store: "settings", path: "player.autoCenterCover" },
+          defaultValue: true,
+        },
+        {
+          key: "followCoverColor",
+          type: "switch",
+          binding: { store: "settings", path: "player.followCoverColor" },
+          defaultValue: true,
+        },
+        {
+          key: "autoImmersive",
+          type: "switch",
+          binding: { store: "settings", path: "player.autoImmersive" },
+          defaultValue: false,
+        },
+      ],
+    },
+    {
+      id: "musicSpectrum",
+      items: [
+        {
+          key: "enableSpectrum",
+          type: "switch",
+          binding: { store: "settings", path: "player.enableSpectrum" },
+          defaultValue: false,
+          children: [
+            {
+              key: "spectrumBarWidth",
+              type: "slider",
+              binding: { store: "settings", path: "player.spectrumBarWidth" },
+              min: 1,
+              max: 12,
+              step: 1,
+              defaultValue: 4,
+              marks: { 1: "1", 4: "4", 8: "8", 12: "12" },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      id: "playControl",
+      items: [
+        {
+          key: "autoPlay",
+          type: "switch",
+          binding: { store: "settings", path: "system.player.autoPlay" },
+          defaultValue: true,
+        },
+        {
+          key: "rememberLastTrack",
+          type: "switch",
+          binding: { store: "settings", path: "system.player.rememberLastTrack" },
+          defaultValue: false,
+        },
+        {
+          key: "fadeEnabled",
+          type: "switch",
+          binding: { store: "settings", path: "system.player.fadeEnabled" },
+          defaultValue: true,
+          children: [
+            {
+              key: "fadeDuration",
+              type: "slider",
+              binding: { store: "settings", path: "system.player.fadeDuration" },
+              min: 100,
+              max: 600,
+              step: 100,
+              defaultValue: 200,
+              marks: { 100: "100", 200: "200", 600: "600" },
+            },
+          ],
+        },
+        {
+          key: "loudnessNormalization",
+          type: "switch",
+          binding: { store: "settings", path: "system.player.loudnessNormalization" },
+          defaultValue: false,
+        },
+      ],
+    },
+    {
+      id: "device",
+      items: [
+        {
+          key: "outputDevice",
+          type: "custom",
+          component: DeviceSelector,
+        },
+      ],
+    },
+  ],
+};
+
+export default playerCategory;
diff --git a/src/settings/categories/plugins.ts b/src/settings/categories/plugins.ts
new file mode 100644
index 0000000..aaa842a
--- /dev/null
+++ b/src/settings/categories/plugins.ts
@@ -0,0 +1,29 @@
+import type { SettingCategory } from "@/types/settings-schema";
+import PluginManager from "@/components/settings/custom/PluginManager.vue";
+import IconLucidePuzzle from "~icons/lucide/puzzle";
+
+const pluginsCategory: SettingCategory = {
+  id: "plugins",
+  icon: IconLucidePuzzle,
+  sections: [
+    {
+      id: "pluginsList",
+      tag: { text: "Beta" },
+      items: [
+        {
+          key: "pluginManager",
+          type: "custom",
+          component: PluginManager,
+          fullWidth: true,
+          keywords: [
+            "settings.plugins.import",
+            "settings.plugins.hint",
+            "settings.plugins.uninstall",
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default pluginsCategory;
diff --git a/src/settings/categories/services.ts b/src/settings/categories/services.ts
new file mode 100644
index 0000000..2165870
--- /dev/null
+++ b/src/settings/categories/services.ts
@@ -0,0 +1,52 @@
+import type { SettingCategory } from "@/types/settings-schema";
+import IconLucideGlobe from "~icons/lucide/globe";
+
+const servicesCategory: SettingCategory = {
+  id: "services",
+  icon: IconLucideGlobe,
+  sections: [
+    {
+      id: "media",
+      items: [
+        {
+          key: "systemMediaControls",
+          type: "switch",
+          binding: { store: "settings", path: "system.media.systemMediaControls" },
+          defaultValue: true,
+        },
+      ],
+    },
+    {
+      id: "discord",
+      items: [
+        {
+          key: "discordEnabled",
+          type: "switch",
+          binding: { store: "settings", path: "system.media.discord.enabled" },
+          defaultValue: false,
+          children: [
+            {
+              key: "discordShowWhenPaused",
+              type: "switch",
+              binding: { store: "settings", path: "system.media.discord.showWhenPaused" },
+              defaultValue: false,
+            },
+            {
+              key: "discordDisplayMode",
+              type: "select",
+              binding: { store: "settings", path: "system.media.discord.displayMode" },
+              options: [
+                { value: "name", labelKey: "settings.discordDisplayMode.name" },
+                { value: "details", labelKey: "settings.discordDisplayMode.details" },
+                { value: "state", labelKey: "settings.discordDisplayMode.state" },
+              ],
+              defaultValue: "name",
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export default servicesCategory;
diff --git a/src/settings/schema.ts b/src/settings/schema.ts
index cb245d5..c881d67 100644
--- a/src/settings/schema.ts
+++ b/src/settings/schema.ts
@@ -1,1008 +1,22 @@
 import type { SettingCategory } from "@/types/settings-schema";
-import { useSettingsStore } from "@/stores/settings";
-import { useThemeStore } from "@/stores/theme";
-import DeviceSelector from "@/components/settings/custom/DeviceSelector.vue";
-import StorageManager from "@/components/settings/custom/StorageManager.vue";
-import PluginManager from "@/components/settings/custom/PluginManager.vue";
-import AmllDbServerConfig from "@/components/settings/custom/AmllDbServerConfig.vue";
-import LyricSourceOrderConfig from "@/components/settings/custom/LyricSourceOrderConfig.vue";
-import LyricFormatOrderConfig from "@/components/settings/custom/LyricFormatOrderConfig.vue";
-import ExcludeLyricsConfig from "@/components/settings/custom/ExcludeLyricsConfig.vue";
-import HotkeyConfig from "@/components/settings/custom/HotkeyConfig.vue";
-import FontConfig from "@/components/settings/custom/FontConfig.vue";
-import BackgroundImagePicker from "@/components/settings/custom/BackgroundImagePicker.vue";
-import IconLucideCog from "~icons/lucide/cog";
-import IconLucidePlay from "~icons/lucide/play";
-import IconLucideMic2 from "~icons/lucide/mic-2";
-import IconLucideMonitor from "~icons/lucide/monitor";
-import IconLucidePalette from "~icons/lucide/palette";
-import IconLucideGlobe from "~icons/lucide/globe";
-import IconLucidePuzzle from "~icons/lucide/puzzle";
-import IconLucideKeyboard from "~icons/lucide/keyboard";
+import generalCategory from "./categories/general";
+import appearanceCategory from "./categories/appearance";
+import playerCategory from "./categories/player";
+import lyricCategory from "./categories/lyric";
+import externalLyricCategory from "./categories/externalLyric";
+import hotkeysCategory from "./categories/hotkeys";
+import servicesCategory from "./categories/services";
+import pluginsCategory from "./categories/plugins";
 
+/** 设置项 schema：左侧分类（category）→ 区块（section）→ 设置项（item）三级结构。
+ *  各 category 单独成文件，便于维护与定位。 */
 export const settingsSchema: SettingCategory[] = [
-  {
-    id: "general",
-    icon: IconLucideCog,
-    sections: [
-      {
-        id: "language",
-        items: [
-          {
-            key: "language",
-            type: "select",
-            binding: { store: "settings", path: "locale" },
-            options: [
-              { value: "zh-CN", labelKey: "settings.language.zhCN" },
-              { value: "en-US", labelKey: "settings.language.enUS" },
-            ],
-            defaultValue: "zh-CN",
-          },
-        ],
-      },
-      {
-        id: "systemConfig",
-        items: [
-          {
-            key: "rememberWindowState",
-            type: "switch",
-            binding: { store: "settings", path: "system.system.rememberWindowState" },
-            defaultValue: true,
-          },
-          {
-            key: "taskbarProgress",
-            type: "switch",
-            binding: { store: "settings", path: "system.system.taskbarProgress" },
-            defaultValue: true,
-          },
-          {
-            key: "closeAction",
-            type: "select",
-            binding: { store: "settings", path: "appearance.closeAction" },
-            options: [
-              { value: "quit", labelKey: "settings.closeAction.quit" },
-              { value: "hide", labelKey: "settings.closeAction.hide" },
-            ],
-            defaultValue: "hide",
-          },
-          {
-            key: "rememberCloseChoice",
-            type: "switch",
-            binding: { store: "settings", path: "appearance.rememberCloseChoice" },
-            defaultValue: false,
-          },
-        ],
-      },
-      {
-        id: "reset",
-        items: [
-          {
-            key: "storageManager",
-            type: "custom",
-            component: StorageManager,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "appearance",
-    icon: IconLucidePalette,
-    sections: [
-      {
-        id: "theme",
-        items: [
-          {
-            key: "themeMode",
-            type: "select",
-            binding: { store: "theme", path: "mode" },
-            options: [
-              { value: "light", labelKey: "settings.themeMode.light" },
-              { value: "dark", labelKey: "settings.themeMode.dark" },
-              { value: "system", labelKey: "settings.themeMode.system" },
-            ],
-            defaultValue: "system",
-            // 图片背景下强制暗色，禁用此开关
-            disabled: () => useThemeStore().appearanceStyle === "image",
-          },
-          {
-            key: "themeSource",
-            type: "select",
-            binding: { store: "theme", path: "source" },
-            options: [
-              { value: "default", labelKey: "settings.themeSource.default" },
-              { value: "custom", labelKey: "settings.themeSource.custom" },
-              { value: "cover", labelKey: "settings.themeSource.cover" },
-              { value: "solid", labelKey: "settings.themeSource.solid" },
-            ],
-            defaultValue: "default",
-            childrenCondition: () => useThemeStore().source === "custom",
-            children: [
-              {
-                key: "customColor",
-                type: "color",
-                binding: { store: "theme", path: "customColor" },
-                defaultValue: "#fe7971",
-                showAlpha: false,
-                colorFormat: "hex",
-              },
-            ],
-          },
-          {
-            key: "globalTint",
-            type: "switch",
-            binding: { store: "theme", path: "globalTint" },
-            defaultValue: false,
-            // 图片背景下强制开启全局着色，禁用切换
-            disabled: () => useThemeStore().appearanceStyle === "image",
-          },
-        ],
-      },
-      {
-        id: "appearanceStyle",
-        items: [
-          {
-            key: "appearanceStyle",
-            type: "select",
-            binding: { store: "theme", path: "appearanceStyle" },
-            options: [
-              { value: "solid", labelKey: "settings.appearanceStyle.solid" },
-              { value: "image", labelKey: "settings.appearanceStyle.image" },
-            ],
-            defaultValue: "solid",
-            childrenCondition: () => useThemeStore().appearanceStyle === "image",
-            children: [
-              {
-                key: "backgroundImage",
-                type: "custom",
-                component: BackgroundImagePicker,
-              },
-              {
-                key: "backgroundBlur",
-                type: "slider",
-                binding: { store: "theme", path: "imageBackground.blur" },
-                min: 0,
-                max: 80,
-                step: 1,
-                defaultValue: 0,
-                marks: { 0: "0", 20: "20", 40: "40", 80: "80" },
-              },
-              {
-                key: "backgroundDim",
-                type: "slider",
-                binding: { store: "theme", path: "imageBackground.dim" },
-                min: 0.3,
-                max: 0.9,
-                step: 0.05,
-                defaultValue: 0.4,
-                marks: { 0.3: "0.3", 0.4: "0.4", 0.9: "0.9" },
-              },
-              {
-                key: "backgroundScale",
-                type: "slider",
-                binding: { store: "theme", path: "imageBackground.scale" },
-                min: 1,
-                max: 2,
-                step: 0.05,
-                defaultValue: 1.2,
-                marks: { 1: "1", 1.2: "1.2", 2: "2" },
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: "font",
-        items: [
-          {
-            key: "fontConfig",
-            type: "custom",
-            component: FontConfig,
-          },
-        ],
-      },
-      {
-        id: "layout",
-        items: [
-          {
-            key: "layoutMode",
-            type: "select",
-            binding: { store: "settings", path: "appearance.layoutMode" },
-            options: [
-              { value: "default", labelKey: "settings.layoutMode.default" },
-              { value: "sidebar-full", labelKey: "settings.layoutMode.sidebarFull" },
-              { value: "floating", labelKey: "settings.layoutMode.floating" },
-            ],
-            defaultValue: "default",
-          },
-          {
-            key: "routeTransition",
-            type: "select",
-            binding: { store: "settings", path: "appearance.routeTransition" },
-            options: [
-              { value: "none", labelKey: "settings.routeTransition.none" },
-              { value: "fade", labelKey: "settings.routeTransition.fade" },
-              { value: "slide", labelKey: "settings.routeTransition.slide" },
-              { value: "zoom", labelKey: "settings.routeTransition.zoom" },
-            ],
-            defaultValue: "fade",
-          },
-          {
-            key: "sidebarCollapsed",
-            type: "switch",
-            binding: { store: "settings", path: "appearance.sidebarCollapsed" },
-            defaultValue: false,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "player",
-    icon: IconLucidePlay,
-    sections: [
-      {
-        id: "playback",
-        items: [
-          {
-            key: "playerBgType",
-            type: "select",
-            binding: { store: "settings", path: "player.playerBgType" },
-            options: [
-              { value: "blur", labelKey: "settings.playerBgType.blur" },
-              { value: "solid", labelKey: "settings.playerBgType.solid" },
-            ],
-            defaultValue: "blur",
-          },
-          {
-            key: "autoCenterCover",
-            type: "switch",
-            binding: { store: "settings", path: "player.autoCenterCover" },
-            defaultValue: true,
-          },
-          {
-            key: "followCoverColor",
-            type: "switch",
-            binding: { store: "settings", path: "player.followCoverColor" },
-            defaultValue: true,
-          },
-          {
-            key: "autoImmersive",
-            type: "switch",
-            binding: { store: "settings", path: "player.autoImmersive" },
-            defaultValue: false,
-          },
-        ],
-      },
-      {
-        id: "musicSpectrum",
-        items: [
-          {
-            key: "enableSpectrum",
-            type: "switch",
-            binding: { store: "settings", path: "player.enableSpectrum" },
-            defaultValue: false,
-            children: [
-              {
-                key: "spectrumBarWidth",
-                type: "slider",
-                binding: { store: "settings", path: "player.spectrumBarWidth" },
-                min: 1,
-                max: 12,
-                step: 1,
-                defaultValue: 4,
-                marks: { 1: "1", 4: "4", 8: "8", 12: "12" },
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: "playControl",
-        items: [
-          {
-            key: "autoPlay",
-            type: "switch",
-            binding: { store: "settings", path: "system.player.autoPlay" },
-            defaultValue: true,
-          },
-          {
-            key: "rememberLastTrack",
-            type: "switch",
-            binding: { store: "settings", path: "system.player.rememberLastTrack" },
-            defaultValue: false,
-          },
-          {
-            key: "fadeEnabled",
-            type: "switch",
-            binding: { store: "settings", path: "system.player.fadeEnabled" },
-            defaultValue: true,
-            children: [
-              {
-                key: "fadeDuration",
-                type: "slider",
-                binding: { store: "settings", path: "system.player.fadeDuration" },
-                min: 100,
-                max: 600,
-                step: 100,
-                defaultValue: 200,
-                marks: { 100: "100", 200: "200", 600: "600" },
-              },
-            ],
-          },
-          {
-            key: "loudnessNormalization",
-            type: "switch",
-            binding: { store: "settings", path: "system.player.loudnessNormalization" },
-            defaultValue: false,
-          },
-        ],
-      },
-      {
-        id: "device",
-        items: [
-          {
-            key: "outputDevice",
-            type: "custom",
-            component: DeviceSelector,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "lyric",
-    icon: IconLucideMic2,
-    sections: [
-      {
-        id: "lyricContent",
-        items: [
-          {
-            key: "lyricSourcePreference",
-            type: "select",
-            binding: { store: "settings", path: "lyric.lyricSourcePreference" },
-            options: [
-              { value: "auto", labelKey: "settings.lyricSourcePreference.auto" },
-              { value: "qqmusic", labelKey: "settings.lyricSourcePreference.qqmusic" },
-              { value: "kugou", labelKey: "settings.lyricSourcePreference.kugou" },
-              { value: "netease", labelKey: "settings.lyricSourcePreference.netease" },
-              { value: "self", labelKey: "settings.lyricSourcePreference.self" },
-            ],
-            defaultValue: "auto",
-            childrenCondition: () => useSettingsStore().lyric.lyricSourcePreference === "auto",
-            children: [
-              {
-                key: "smartPreferOnline",
-                type: "switch",
-                binding: { store: "settings", path: "lyric.smartPreferOnline" },
-                defaultValue: false,
-              },
-            ],
-          },
-          {
-            key: "lyricSourceOrder",
-            type: "custom",
-            component: LyricSourceOrderConfig,
-          },
-          {
-            key: "lyricFormatOrder",
-            type: "custom",
-            component: LyricFormatOrderConfig,
-          },
-          {
-            key: "enableOnlineTTMLLyric",
-            type: "switch",
-            binding: { store: "settings", path: "system.lyric.enableOnlineTTMLLyric" },
-            defaultValue: false,
-            tag: { text: "Beta", type: "warning" },
-            children: [
-              {
-                key: "amllDbServer",
-                type: "custom",
-                component: AmllDbServerConfig,
-                binding: { store: "settings", path: "system.lyric.amllDbServer" },
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: "lyricExclude",
-        items: [
-          {
-            key: "enableExcludeLyrics",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.enableExcludeLyrics" },
-            defaultValue: true,
-            children: [
-              {
-                key: "excludeLyricsRules",
-                type: "custom",
-                component: ExcludeLyricsConfig,
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: "lyricGeneral",
-        items: [
-          {
-            key: "adaptiveFontSize",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.adaptiveFontSize" },
-            defaultValue: true,
-          },
-          {
-            key: "fontSize",
-            type: "slider",
-            binding: { store: "settings", path: "lyric.fontSize" },
-            min: 30,
-            max: 64,
-            step: 1,
-            defaultValue: 48,
-            marks: { 30: "30", 48: "48", 64: "64" },
-          },
-          {
-            key: "fontWeight",
-            type: "slider",
-            binding: { store: "settings", path: "lyric.fontWeight" },
-            min: 100,
-            max: 900,
-            step: 100,
-            defaultValue: 700,
-            marks: { 100: "100", 400: "400", 700: "700", 900: "900" },
-          },
-          {
-            key: "showTranslation",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.showTranslation" },
-            defaultValue: true,
-          },
-          {
-            key: "showRomanization",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.showRomanization" },
-            defaultValue: true,
-          },
-        ],
-      },
-      {
-        id: "lyricDisplay",
-        items: [
-          {
-            key: "enableWordHighlight",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.enableWordHighlight" },
-            defaultValue: true,
-          },
-          {
-            key: "enableFloatAnimation",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.enableFloatAnimation" },
-            defaultValue: false,
-          },
-          {
-            key: "enableEmphasizeEffect",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.enableEmphasizeEffect" },
-            defaultValue: false,
-          },
-          {
-            key: "enableBlur",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.enableBlur" },
-            defaultValue: false,
-          },
-          {
-            key: "hidePassedLines",
-            type: "switch",
-            binding: { store: "settings", path: "lyric.hidePassedLines" },
-            defaultValue: false,
-          },
-        ],
-      },
-      {
-        id: "lyricSpring",
-        items: [
-          {
-            key: "springPreset",
-            type: "select",
-            binding: { store: "settings", path: "lyric.springPreset" },
-            options: [
-              { value: "default", labelKey: "settings.springPreset.default" },
-              { value: "smooth", labelKey: "settings.springPreset.smooth" },
-              { value: "responsive", labelKey: "settings.springPreset.responsive" },
-              { value: "jello", labelKey: "settings.springPreset.jello" },
-              { value: "heavy", labelKey: "settings.springPreset.heavy" },
-              { value: "noBounce", labelKey: "settings.springPreset.noBounce" },
-              { value: "custom", labelKey: "settings.springPreset.custom" },
-            ],
-            defaultValue: "default",
-            childrenCondition: () => useSettingsStore().lyric.springPreset === "custom",
-            children: [
-              {
-                key: "springMass",
-                type: "slider",
-                binding: { store: "settings", path: "lyric.springMass" },
-                min: 0.1,
-                max: 5,
-                step: 0.1,
-                defaultValue: 0.9,
-                marks: { 0.1: "0.1", 0.9: "0.9", 5: "5" },
-              },
-              {
-                key: "springDamping",
-                type: "slider",
-                binding: { store: "settings", path: "lyric.springDamping" },
-                min: 1,
-                max: 50,
-                step: 0.5,
-                defaultValue: 15,
-                marks: { 1: "1", 15: "15", 50: "50" },
-              },
-              {
-                key: "springStiffness",
-                type: "slider",
-                binding: { store: "settings", path: "lyric.springStiffness" },
-                min: 10,
-                max: 300,
-                step: 5,
-                defaultValue: 90,
-                marks: { 10: "10", 90: "90", 300: "300" },
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: "lyricLayout",
-        items: [
-          {
-            key: "alignPosition",
-            type: "slider",
-            binding: { store: "settings", path: "lyric.alignPosition" },
-            min: 0.1,
-            max: 0.9,
-            step: 0.05,
-            defaultValue: 0.35,
-            marks: { 0.1: "0.1", 0.35: "0.35", 0.9: "0.9" },
-          },
-          {
-            key: "wordFadeWidth",
-            type: "slider",
-            binding: { store: "settings", path: "lyric.wordFadeWidth" },
-            min: 0.1,
-            max: 1,
-            step: 0.1,
-            defaultValue: 0.5,
-            marks: { 0.1: "0.1", 0.5: "0.5", 1: "1" },
-          },
-          {
-            key: "inactiveAlpha",
-            type: "slider",
-            binding: { store: "settings", path: "lyric.inactiveAlpha" },
-            min: 0,
-            max: 1,
-            step: 0.05,
-            defaultValue: 0.2,
-            marks: { 0: "0", 0.2: "0.2", 1: "1" },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "externalLyric",
-    icon: IconLucideMonitor,
-    sections: [
-      {
-        id: "desktopLyric",
-        tag: { text: "Beta" },
-        items: [
-          {
-            key: "desktopLyricEnabled",
-            type: "switch",
-            binding: { store: "settings", path: "isDesktopLyricOpen" },
-            defaultValue: false,
-          },
-          {
-            key: "desktopLyricFontSize",
-            type: "select",
-            binding: { store: "settings", path: "system.desktopLyric.fontSize" },
-            defaultValue: 24,
-            options: Array.from({ length: 96 - 20 + 1 }, (_, i) => {
-              const n = 20 + i;
-              return { value: n, label: `${n} px` };
-            }),
-          },
-          {
-            key: "desktopLyricFontWeight",
-            type: "slider",
-            binding: { store: "settings", path: "system.desktopLyric.fontWeight" },
-            min: 100,
-            max: 900,
-            step: 100,
-            defaultValue: 600,
-            marks: { 100: "100", 400: "400", 700: "700", 900: "900" },
-          },
-          {
-            key: "desktopLyricDoubleLine",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.doubleLine" },
-            defaultValue: true,
-          },
-          {
-            key: "desktopLyricAlign",
-            type: "select",
-            binding: { store: "settings", path: "system.desktopLyric.align" },
-            options: [
-              { value: "left", labelKey: "settings.desktopLyricAlign.left" },
-              { value: "center", labelKey: "settings.desktopLyricAlign.center" },
-              { value: "right", labelKey: "settings.desktopLyricAlign.right" },
-              { value: "justify", labelKey: "settings.desktopLyricAlign.justify" },
-            ],
-            defaultValue: "center",
-          },
-          {
-            key: "desktopLyricWordByWord",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.wordByWord" },
-            defaultValue: true,
-          },
-          {
-            key: "desktopLyricAutoGenerateWordByWord",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.autoGenerateWordByWord" },
-            defaultValue: true,
-          },
-          {
-            key: "desktopLyricShowTranslation",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.showTranslation" },
-            defaultValue: true,
-          },
-          {
-            key: "desktopLyricPlayedColor",
-            type: "color",
-            binding: { store: "settings", path: "system.desktopLyric.playedColor" },
-            defaultValue: "#ffffff",
-            showAlpha: false,
-          },
-          {
-            key: "desktopLyricUnplayedColor",
-            type: "color",
-            binding: { store: "settings", path: "system.desktopLyric.unplayedColor" },
-            defaultValue: "#7d7d7d",
-            showAlpha: false,
-          },
-          {
-            key: "desktopLyricStrokeColor",
-            type: "color",
-            binding: { store: "settings", path: "system.desktopLyric.strokeColor" },
-            defaultValue: "rgba(0, 0, 0, 0.5)",
-          },
-          {
-            key: "desktopLyricBackgroundMask",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.backgroundMask" },
-            defaultValue: false,
-            children: [
-              {
-                key: "desktopLyricBackgroundMaskColor",
-                type: "color",
-                binding: { store: "settings", path: "system.desktopLyric.backgroundMaskColor" },
-                defaultValue: "rgba(0, 0, 0, 0.3)",
-              },
-            ],
-          },
-          {
-            key: "desktopLyricAlwaysShowSongInfo",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.alwaysShowSongInfo" },
-            defaultValue: false,
-          },
-          {
-            key: "desktopLyricAnimation",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.animation" },
-            defaultValue: true,
-          },
-          {
-            key: "desktopLyricLimitBounds",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.limitBounds" },
-            defaultValue: false,
-          },
-          {
-            key: "desktopLyricAlwaysOnTop",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.alwaysOnTop" },
-            defaultValue: true,
-          },
-          {
-            key: "desktopLyricLocked",
-            type: "switch",
-            binding: { store: "settings", path: "system.desktopLyric.locked" },
-            defaultValue: false,
-          },
-        ],
-      },
-      {
-        id: "dynamicIsland",
-        tag: { text: "Beta" },
-        items: [
-          {
-            key: "dynamicIslandEnabled",
-            type: "switch",
-            binding: { store: "settings", path: "isDynamicIslandOpen" },
-            defaultValue: false,
-          },
-          {
-            key: "dynamicIslandScale",
-            type: "slider",
-            binding: { store: "settings", path: "system.dynamicIsland.scale" },
-            min: 0.5,
-            max: 2,
-            step: 0.05,
-            defaultValue: 1,
-            marks: { 0.5: "50%", 1: "100%", 2: "200%" },
-          },
-          {
-            key: "dynamicIslandFontWeight",
-            type: "slider",
-            binding: { store: "settings", path: "system.dynamicIsland.fontWeight" },
-            min: 100,
-            max: 900,
-            step: 100,
-            defaultValue: 500,
-            marks: { 100: "100", 500: "500", 900: "900" },
-          },
-          {
-            key: "dynamicIslandWordByWord",
-            type: "switch",
-            binding: { store: "settings", path: "system.dynamicIsland.wordByWord" },
-            defaultValue: true,
-          },
-          {
-            key: "dynamicIslandDoubleLine",
-            type: "switch",
-            binding: { store: "settings", path: "system.dynamicIsland.doubleLine" },
-            defaultValue: false,
-          },
-          {
-            key: "dynamicIslandShowTranslation",
-            type: "switch",
-            binding: { store: "settings", path: "system.dynamicIsland.showTranslation" },
-            defaultValue: false,
-          },
-          {
-            key: "dynamicIslandPlayedColor",
-            type: "color",
-            binding: { store: "settings", path: "system.dynamicIsland.playedColor" },
-            defaultValue: "rgba(255, 255, 255, 1)",
-            showAlpha: false,
-          },
-          {
-            key: "dynamicIslandUnplayedColor",
-            type: "color",
-            binding: { store: "settings", path: "system.dynamicIsland.unplayedColor" },
-            defaultValue: "rgba(255, 255, 255, 0.5)",
-          },
-          {
-            key: "dynamicIslandBackgroundColor",
-            type: "color",
-            binding: { store: "settings", path: "system.dynamicIsland.backgroundColor" },
-            defaultValue: "rgba(0, 0, 0, 1)",
-          },
-          {
-            key: "dynamicIslandAlwaysOnTop",
-            type: "switch",
-            binding: { store: "settings", path: "system.dynamicIsland.alwaysOnTop" },
-            defaultValue: true,
-          },
-          {
-            key: "dynamicIslandSnapCentered",
-            type: "switch",
-            binding: { store: "settings", path: "system.dynamicIsland.snapCentered" },
-            defaultValue: true,
-          },
-          {
-            key: "dynamicIslandNonOcclusive",
-            type: "switch",
-            binding: { store: "settings", path: "system.dynamicIsland.nonOcclusive" },
-            defaultValue: false,
-          },
-        ],
-      },
-      ...(navigator.platform.startsWith("Win")
-        ? [
-            {
-              id: "taskbarLyric",
-              tag: { text: "Beta" },
-              items: [
-                {
-                  key: "taskbarLyricEnabled",
-                  type: "switch" as const,
-                  binding: { store: "settings" as const, path: "isTaskbarLyricOpen" },
-                  defaultValue: false,
-                },
-                {
-                  key: "taskbarLyricPosition",
-                  type: "select" as const,
-                  binding: { store: "settings" as const, path: "system.taskbarLyric.position" },
-                  options: [
-                    { value: "auto", labelKey: "settings.taskbarLyricPosition.auto" },
-                    { value: "left", labelKey: "settings.taskbarLyricPosition.left" },
-                    { value: "right", labelKey: "settings.taskbarLyricPosition.right" },
-                  ],
-                  defaultValue: "auto",
-                },
-                {
-                  key: "taskbarLyricAutoMaxWidth",
-                  type: "switch" as const,
-                  binding: {
-                    store: "settings" as const,
-                    path: "system.taskbarLyric.autoMaxWidth",
-                  },
-                  defaultValue: true,
-                  childrenCondition: () =>
-                    useSettingsStore().system.taskbarLyric.autoMaxWidth === false,
-                  children: [
-                    {
-                      key: "taskbarLyricMaxWidth",
-                      type: "slider" as const,
-                      binding: {
-                        store: "settings" as const,
-                        path: "system.taskbarLyric.maxWidth",
-                      },
-                      min: 200,
-                      max: 800,
-                      step: 20,
-                      defaultValue: 400,
-                      marks: { 200: "200", 400: "400", 800: "800" },
-                    },
-                  ],
-                },
-                {
-                  key: "taskbarLyricColorMode",
-                  type: "select" as const,
-                  binding: { store: "settings" as const, path: "system.taskbarLyric.colorMode" },
-                  options: [
-                    { value: "taskbar", labelKey: "settings.taskbarLyricColorMode.taskbar" },
-                    { value: "light", labelKey: "settings.taskbarLyricColorMode.light" },
-                    { value: "dark", labelKey: "settings.taskbarLyricColorMode.dark" },
-                  ],
-                  defaultValue: "taskbar",
-                },
-                {
-                  key: "taskbarLyricFontSize",
-                  type: "slider" as const,
-                  binding: { store: "settings" as const, path: "system.taskbarLyric.fontSize" },
-                  min: 12,
-                  max: 20,
-                  step: 1,
-                  defaultValue: 14,
-                  marks: { 12: "12", 14: "14", 17: "17", 20: "20" },
-                },
-                {
-                  key: "taskbarLyricShowCover",
-                  type: "switch" as const,
-                  binding: { store: "settings" as const, path: "system.taskbarLyric.showCover" },
-                  defaultValue: true,
-                },
-                {
-                  key: "taskbarLyricWordByWord",
-                  type: "switch" as const,
-                  binding: { store: "settings" as const, path: "system.taskbarLyric.wordByWord" },
-                  defaultValue: true,
-                },
-                {
-                  key: "taskbarLyricDoubleLine",
-                  type: "switch" as const,
-                  binding: { store: "settings" as const, path: "system.taskbarLyric.doubleLine" },
-                  defaultValue: true,
-                },
-                {
-                  key: "taskbarLyricShowTranslation",
-                  type: "switch" as const,
-                  binding: {
-                    store: "settings" as const,
-                    path: "system.taskbarLyric.showTranslation",
-                  },
-                  defaultValue: true,
-                },
-              ],
-            },
-          ]
-        : []),
-    ],
-  },
-  {
-    id: "hotkeys",
-    icon: IconLucideKeyboard,
-    sections: [
-      {
-        id: "hotkeys",
-        items: [
-          {
-            key: "hotkeys",
-            type: "custom",
-            component: HotkeyConfig,
-            fullWidth: true,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "services",
-    icon: IconLucideGlobe,
-    sections: [
-      {
-        id: "media",
-        items: [
-          {
-            key: "systemMediaControls",
-            type: "switch",
-            binding: { store: "settings", path: "system.media.systemMediaControls" },
-            defaultValue: true,
-          },
-        ],
-      },
-      {
-        id: "discord",
-        items: [
-          {
-            key: "discordEnabled",
-            type: "switch",
-            binding: { store: "settings", path: "system.media.discord.enabled" },
-            defaultValue: false,
-            children: [
-              {
-                key: "discordShowWhenPaused",
-                type: "switch",
-                binding: { store: "settings", path: "system.media.discord.showWhenPaused" },
-                defaultValue: false,
-              },
-              {
-                key: "discordDisplayMode",
-                type: "select",
-                binding: { store: "settings", path: "system.media.discord.displayMode" },
-                options: [
-                  { value: "name", labelKey: "settings.discordDisplayMode.name" },
-                  { value: "details", labelKey: "settings.discordDisplayMode.details" },
-                  { value: "state", labelKey: "settings.discordDisplayMode.state" },
-                ],
-                defaultValue: "name",
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-  {
-    id: "plugins",
-    icon: IconLucidePuzzle,
-    sections: [
-      {
-        id: "pluginsList",
-        tag: { text: "Beta" },
-        items: [
-          {
-            key: "pluginManager",
-            type: "custom",
-            component: PluginManager,
-            fullWidth: true,
-            keywords: [
-              "settings.plugins.import",
-              "settings.plugins.hint",
-              "settings.plugins.uninstall",
-            ],
-          },
-        ],
-      },
-    ],
-  },
+  generalCategory,
+  appearanceCategory,
+  playerCategory,
+  lyricCategory,
+  externalLyricCategory,
+  hotkeysCategory,
+  servicesCategory,
+  pluginsCategory,
 ];
diff --git a/src/styles/global.css b/src/styles/global.css
index dfc7194..9571a8f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -87,6 +87,12 @@ html[data-appearance-style="image"] .bg-field {
   backdrop-filter: blur(10px) saturate(1.3);
 }
 
+/* 仅保留弹窗内的底色 */
+html[data-appearance-style="image"] [role="dialog"] .bg-field,
+html[data-appearance-style="image"] [role="alertdialog"] .bg-field {
+  backdrop-filter: none;
+}
+
 ::selection {
   background: rgb(var(--s-primary) / 0.3);
   color: rgb(var(--s-on-surface));
diff --git a/src/types/settings-schema.ts b/src/types/settings-schema.ts
index 4291793..df98b8a 100644
--- a/src/types/settings-schema.ts
+++ b/src/types/settings-schema.ts
@@ -3,7 +3,7 @@ import type { Component } from "vue";
 /** 设置项控件类型 */
 export type SettingWidgetType = "switch" | "select" | "slider" | "color" | "button" | "custom";
 
-/** 选择项（select 用） */
+/** 选择项 */
 export interface SettingOption {
   value: string | number | boolean;
   /** i18n key */
@@ -42,14 +42,16 @@ export interface SettingItem {
   action?: () => void;
   /** custom 类型的组件 */
   component?: Component;
-  /** custom：独占整行（隐藏 label/description 与卡片包裹，组件自渲染） */
+  /** custom：独占整行 */
   fullWidth?: boolean;
   /** 搜索用额外关键词（i18n keys） */
   keywords?: string[];
-  /** 子项（折叠展开） */
+  /** 子项 */
   children?: SettingItem[];
-  /** 子项展开条件（默认：父级值为 true 时展开） */
+  /** 子项展开条件 */
   childrenCondition?: () => boolean;
+  /** 是否完全隐藏子项 */
+  hideChildren?: boolean;
   /** 标题旁的徽标 */
   tag?: SettingTag;
 }
@@ -60,7 +62,7 @@ export interface SettingTag {
   type?: "default" | "primary" | "cover" | "info" | "success" | "warning" | "error";
 }
 
-/** 设置分区（卡片区块） */
+/** 设置分区 */
 export interface SettingSection {
   /** i18n key: settings.section.{id} */
   id: string;
@@ -69,7 +71,7 @@ export interface SettingSection {
   tag?: SettingTag;
 }
 
-/** 设置分类（左侧菜单项） */
+/** 设置分类 */
 export interface SettingCategory {
   /** i18n key: settings.group.{id}，同时作为菜单 key */
   id: string;

From bb221d2fee5468b51d298c6275c32d98a385cfb8 Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Thu, 7 May 2026 22:32:48 +0800
Subject: [PATCH 3/4] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppBackground.vue              |  4 +-
 src/components/list/SongList.vue              | 10 ++-
 src/components/player/Lyrics/engine/index.ts  | 73 +++++++++++++------
 src/components/settings/custom/FontConfig.vue |  6 +-
 src/components/ui/SVirtualList.vue            | 31 ++++----
 5 files changed, 74 insertions(+), 50 deletions(-)

diff --git a/src/components/AppBackground.vue b/src/components/AppBackground.vue
index a657986..c6cd665 100644
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -3,9 +3,7 @@ import { useThemeStore } from "@/stores/theme";
 
 const theme = useThemeStore();
 
-const visible = computed(
-  () => theme.effectiveStyle === "image" && !!theme.imageBackground.src,
-);
+const visible = computed(() => theme.effectiveStyle === "image" && !!theme.imageBackground.src);
 
 const imageStyle = computed<Record<string, string>>(() => ({
   objectFit: "cover",
diff --git a/src/components/list/SongList.vue b/src/components/list/SongList.vue
index 2fb23a2..b2634d2 100644
--- a/src/components/list/SongList.vue
+++ b/src/components/list/SongList.vue
@@ -3,6 +3,7 @@ import type { Track, TrackSource } from "@shared/types/player";
 import type { CollectionType } from "@/types/collection";
 import { useMediaStore } from "@/stores/media";
 import { useStatusStore } from "@/stores/status";
+import { useSettingsStore } from "@/stores/settings";
 import { useTrackMenu } from "@/composables/useTrackMenu";
 import { useMultiSelect } from "@/composables/useMultiSelect";
 import { formatTime } from "@/utils/time";
@@ -58,6 +59,12 @@ const props = withDefaults(
 const { t } = useI18n();
 const media = useMediaStore();
 const status = useStatusStore();
+const settings = useSettingsStore();
+
+/** 悬浮布局且播放栏可见时 */
+const isFloatingPlayerBar = computed(
+  () => settings.appearance.layoutMode === "floating" && !!media.track,
+);
 
 /** 排序器 默认使用 base 敏感度，忽略大小写 */
 const textCollator = new Intl.Collator(undefined, {
@@ -504,7 +511,8 @@ defineExpose({
     <Transition name="fade">
       <div
         v-if="playingIndex >= 0 && !batch.active.value"
-        class="absolute right-6 bottom-5 z-20 rounded-full bg-surface-panel shadow-lg border border-solid border-primary/10"
+        class="absolute right-6 z-20 rounded-full bg-surface-panel backdrop-blur-2xl backdrop-saturate-150 shadow-lg border border-solid border-primary/10 transition-[bottom] duration-300"
+        :class="isFloatingPlayerBar ? 'bottom-26' : 'bottom-5'"
       >
         <SButton type="primary" variant="bordered" circle :size="40" @click="scrollToPlaying">
           <template #icon>
diff --git a/src/components/player/Lyrics/engine/index.ts b/src/components/player/Lyrics/engine/index.ts
index 9bf2652..5344f50 100644
--- a/src/components/player/Lyrics/engine/index.ts
+++ b/src/components/player/Lyrics/engine/index.ts
@@ -184,6 +184,10 @@ export class LyricRenderer {
    */
   constructor(container: HTMLElement, config?: Partial<RendererConfig>) {
     this.container = container;
+    // 移除上一次实例残留的 lp-inner
+    for (const stale of Array.from(container.querySelectorAll(":scope > .lp-inner"))) {
+      stale.remove();
+    }
     container.classList.add("lp-root");
     // 创建内部包裹层
     this.innerElement = document.createElement("div");
@@ -222,6 +226,10 @@ export class LyricRenderer {
   freeze = () => {
     cancelAnimationFrame(this.animationFrameId);
     this.animationFrameId = 0;
+    // Web Animations 走自己的时间线，不随 rAF 暂停而停止；冻结期间也要 pause
+    for (const anims of this.activeAnimations.values()) {
+      for (const anim of anims) anim.pause();
+    }
   };
 
   /** 恢复渲染 */
@@ -229,6 +237,22 @@ export class LyricRenderer {
     if (this.animationFrameId !== 0) return;
     this.lastFrameTimestamp = 0;
     this.needsFullSync = true;
+    // 恢复时按当前播放时间重新对齐动画 currentTime 后再 play
+    if (this.isPlaying) {
+      for (const [lineIdx, anims] of this.activeAnimations) {
+        const line = this.lines[lineIdx];
+        if (!line) continue;
+        const relativeTime = Math.max(0, this.lastProcessedTime - line.startTime);
+        for (const anim of anims) {
+          const timing = anim.effect?.getComputedTiming();
+          const endTime = ((timing?.delay as number) || 0) + ((timing?.duration as number) || 0);
+          if (anim.playbackRate >= 0 && relativeTime < endTime) {
+            anim.currentTime = relativeTime;
+            anim.play();
+          }
+        }
+      }
+    }
     this.animationFrameId = requestAnimationFrame(this.onAnimationFrame);
   };
 
@@ -383,6 +407,8 @@ export class LyricRenderer {
     // 重置时间状态，避免残留旧歌的播放时间影响新歌词定位
     this.pendingPlayTime = -1;
     this.lastProcessedTime = -1;
+    // 重置帧时间戳，避免渲染器空闲后首帧 deltaTime 过大导致弹簧瞬移
+    this.lastFrameTimestamp = 0;
 
     // 初始布局 + 入场动画（从 time=0 开始）
     this.handleSeek(0);
@@ -512,7 +538,7 @@ export class LyricRenderer {
 
     const lines = this.lines;
     const activated: number[] = [];
-    const deactivated: number[] = [];
+    const deactivated = new Set<number>();
 
     // 检测新激活的行
     for (let i = 0; i < lines.length; i++) {
@@ -532,12 +558,12 @@ export class LyricRenderer {
     for (const lineIdx of this.activeLineSet) {
       const line = lines[lineIdx];
       if (!line) {
-        deactivated.push(lineIdx);
+        deactivated.add(lineIdx);
         continue;
       }
       if (line.isBG) {
-        if (!this.activeLineSet.has(lineIdx - 1) || deactivated.includes(lineIdx - 1))
-          deactivated.push(lineIdx);
+        if (!this.activeLineSet.has(lineIdx - 1) || deactivated.has(lineIdx - 1))
+          deactivated.add(lineIdx);
         continue;
       }
       const nextLine = lines[lineIdx + 1];
@@ -549,13 +575,13 @@ export class LyricRenderer {
           Math.max(line.endTime, nextMainLine?.startTime ?? Number.MAX_VALUE),
           Math.max(line.endTime, nextLine.endTime),
         );
-        if (pairStart > currentTime || pairEnd <= currentTime) deactivated.push(lineIdx);
+        if (pairStart > currentTime || pairEnd <= currentTime) deactivated.add(lineIdx);
       } else {
-        if (line.startTime > currentTime || line.endTime <= currentTime) deactivated.push(lineIdx);
+        if (line.startTime > currentTime || line.endTime <= currentTime) deactivated.add(lineIdx);
       }
     }
 
-    if (activated.length === 0 && deactivated.length === 0) return false;
+    if (activated.length === 0 && deactivated.size === 0) return false;
 
     // 执行停用/激活
     for (const lineIdx of deactivated) {
@@ -725,20 +751,21 @@ export class LyricRenderer {
     this.animationFrameId = requestAnimationFrame(this.onAnimationFrame);
     if (!this.isPageVisible) return;
 
-    // 计算帧间隔
-    const deltaTime = this.lastFrameTimestamp ? timestamp - this.lastFrameTimestamp : 16;
+    // 计算帧间隔，并夹紧上限避免 tab 后台 / 长时间冻结后的首帧 deltaTime 过大
+    const rawDelta = this.lastFrameTimestamp ? timestamp - this.lastFrameTimestamp : 16;
+    const deltaTime = rawDelta > 100 ? 100 : rawDelta;
     this.lastFrameTimestamp = timestamp;
 
     const lineCount = this.positionSprings.length;
     if (lineCount === 0) return;
 
-    // 1. 消费播放时间，检测激活行变化
+    // 消费播放时间，检测激活行变化
     const playTime = this.pendingPlayTime;
     if (playTime >= 0 && playTime !== this.lastProcessedTime) {
       if (this.processTime(playTime)) this.needsFullSync = true;
     }
 
-    // 2. 更新激活行的 --t CSS 变量（驱动逐字掩码位移）
+    // 更新激活行的 --t CSS 变量（驱动逐字掩码位移）
     if (this.enableWordHighlight && playTime >= 0) {
       const timeStr = String(playTime);
       if (timeStr !== this.cachedTimeString) {
@@ -749,7 +776,7 @@ export class LyricRenderer {
       }
     }
 
-    // 3. 推进弹簧 + 写入 transform（视口裁剪：屏幕外跳过 DOM 写入）
+    // 推进弹簧 + 写入 transform
     const viewHeight = this.containerHeight;
     const isFullSync = this.needsFullSync;
     this.needsFullSync = false;
@@ -761,8 +788,6 @@ export class LyricRenderer {
       scaleSpring.update(deltaTime);
 
       const yPos = posSpring.getCurrentPosition();
-      if (!isFullSync && (yPos < -500 || yPos > viewHeight + 500)) continue;
-
       const scale = scaleSpring.getCurrentPosition() / 100;
       const transformStr = `translateY(${yPos.toFixed(1)}px) scale(${scale.toFixed(4)})`;
       if (this.cachedTransforms[i] !== transformStr) {
@@ -771,7 +796,7 @@ export class LyricRenderer {
       }
     }
 
-    // 3.5 入场完成检测（弹簧全部稳定后标记完成）
+    // 入场完成检测
     if (!this.entranceComplete) {
       let allSettled = true;
       for (let i = 0; i < lineCount; i++) {
@@ -783,7 +808,7 @@ export class LyricRenderer {
       this.entranceComplete = allSettled;
     }
 
-    // 4. 透明度 / pass / 模糊（指数平滑插值，视口裁剪）
+    // 透明度 / pass / 模糊
     const frameDeltaSec = (deltaTime || 16) / 1000;
     const attackFactor = 1 - Math.exp(-this.alphaAttackSpeed * frameDeltaSec);
     const releaseFactor = 1 - Math.exp(-this.alphaReleaseSpeed * frameDeltaSec);
@@ -796,7 +821,7 @@ export class LyricRenderer {
 
     for (let i = 0; i < lineCount; i++) {
       const yPos = this.positionSprings[i].getCurrentPosition();
-      if (yPos < -500 || yPos > viewHeight + 500) continue;
+      if (!isFullSync && (yPos < -500 || yPos > viewHeight + 500)) continue;
 
       const isActive = this.activeLineSet.has(i);
       const isPassed =
@@ -881,7 +906,7 @@ export class LyricRenderer {
       }
     }
 
-    // 5. 间奏圆点呼吸动画
+    // 间奏圆点呼吸动画
     renderInterludeDots(
       playTime,
       this.interludeState,
@@ -892,8 +917,6 @@ export class LyricRenderer {
     );
   };
 
-  // ---- 懒动画管理 ----
-
   /**
    * 为指定行按需创建动画并播放（懒创建：仅在行激活时调用）
    * @param lineIndex - 行索引
@@ -1006,8 +1029,6 @@ export class LyricRenderer {
     this.activeAnimations.clear();
   };
 
-  // ---- 事件处理 ----
-
   /**
    * 歌词行点击
    * @param event - 鼠标事件
@@ -1123,8 +1144,12 @@ export class LyricRenderer {
     if (this.isPageVisible) {
       this.lastFrameTimestamp = 0;
       this.measureLineHeights();
-      if (this.pendingPlayTime >= 0) this.handleSeek(this.pendingPlayTime);
-      this.calculateLayout(true);
+      // 兜底布局
+      if (this.pendingPlayTime >= 0) {
+        this.handleSeek(this.pendingPlayTime);
+      } else {
+        this.calculateLayout(true);
+      }
       this.needsFullSync = true;
     }
   };
diff --git a/src/components/settings/custom/FontConfig.vue b/src/components/settings/custom/FontConfig.vue
index d7f718c..007fde1 100644
--- a/src/components/settings/custom/FontConfig.vue
+++ b/src/components/settings/custom/FontConfig.vue
@@ -181,11 +181,7 @@ const handleSave = async (): Promise<void> => {
           <span class="w-1 h-4 rounded-full bg-primary" />
           {{ t(`settings.fontConfig.groups.${g.group}`) }}
         </h4>
-        <SCard
-          v-for="target in g.items"
-          :key="target.key"
-          class="flex flex-col gap-2.5"
-        >
+        <SCard v-for="target in g.items" :key="target.key" class="flex flex-col gap-2.5">
           <div class="flex items-center gap-3">
             <div class="min-w-0 flex-1 text-base">{{ target.label }}</div>
             <SButton
diff --git a/src/components/ui/SVirtualList.vue b/src/components/ui/SVirtualList.vue
index 19612b2..d7cb706 100644
--- a/src/components/ui/SVirtualList.vue
+++ b/src/components/ui/SVirtualList.vue
@@ -48,15 +48,15 @@ const contentRef = ref<HTMLElement | null>(null);
 const itemRefs = ref<HTMLElement[]>([]);
 
 const scrollTop = ref(0);
-const { height: containerHeight } = useElementSize(wrapperRef);
+
+// 测量滚动容器高度
+const { height: scrollViewportHeight } = useElementSize(scrollRef);
 
 const containerHeightStyle = computed(() =>
   typeof props.height === "number" ? `${props.height}px` : props.height,
 );
 
-const viewportHeight = computed(() =>
-  typeof props.height === "number" ? props.height : containerHeight.value || 0,
-);
+const viewportHeight = computed(() => scrollViewportHeight.value || 0);
 
 // 每项实际高度、累积顶部位置（仅动态高度模式）
 const itemHeights = shallowRef<number[]>([]);
@@ -350,20 +350,17 @@ defineExpose({
 <template>
   <div
     ref="wrapperRef"
-    class="w-full [overflow-anchor:none] contain-[layout_paint]"
+    class="w-full flex flex-col [overflow-anchor:none] contain-[layout_paint]"
     :style="{ height: containerHeightStyle }"
   >
-    <div ref="scrollRef" class="size-full overflow-y-auto" @scroll="handleScroll">
-      <div
-        v-if="items.length === 0 && $slots.empty"
-        class="flex items-center justify-center h-full"
-      >
-        <slot name="empty" />
+    <div v-if="items.length === 0 && $slots.empty" class="flex-1 flex items-center justify-center">
+      <slot name="empty" />
+    </div>
+    <template v-else>
+      <div v-if="$slots.header" class="shrink-0">
+        <slot name="header" />
       </div>
-      <template v-else>
-        <div v-if="$slots.header" class="sticky top-0 z-10 bg-surface">
-          <slot name="header" />
-        </div>
+      <div ref="scrollRef" class="flex-1 min-h-0 overflow-y-auto" @scroll="handleScroll">
         <div
           v-show="items.length > 0"
           :style="{
@@ -385,7 +382,7 @@ defineExpose({
             </div>
           </div>
         </div>
-      </template>
-    </div>
+      </div>
+    </template>
   </div>
 </template>

From 41a4c789d78581d958fc155292d5f6a03294ccbb Mon Sep 17 00:00:00 2001
From: imsyy <one@imsyy.top>
Date: Thu, 7 May 2026 23:38:06 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AE=A1=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/player/Lyrics/engine/index.ts             | 2 ++
 src/components/settings/custom/BackgroundImagePicker.vue | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/player/Lyrics/engine/index.ts b/src/components/player/Lyrics/engine/index.ts
index 5344f50..c69b584 100644
--- a/src/components/player/Lyrics/engine/index.ts
+++ b/src/components/player/Lyrics/engine/index.ts
@@ -788,6 +788,8 @@ export class LyricRenderer {
       scaleSpring.update(deltaTime);
 
       const yPos = posSpring.getCurrentPosition();
+      // 视口裁剪：屏幕外行跳过 transform 写入
+      if (!isFullSync && (yPos < -500 || yPos > viewHeight + 500)) continue;
       const scale = scaleSpring.getCurrentPosition() / 100;
       const transformStr = `translateY(${yPos.toFixed(1)}px) scale(${scale.toFixed(4)})`;
       if (this.cachedTransforms[i] !== transformStr) {
diff --git a/src/components/settings/custom/BackgroundImagePicker.vue b/src/components/settings/custom/BackgroundImagePicker.vue
index 997dc76..8467da4 100644
--- a/src/components/settings/custom/BackgroundImagePicker.vue
+++ b/src/components/settings/custom/BackgroundImagePicker.vue
@@ -26,6 +26,7 @@ const handlePick = async (): Promise<void> => {
 /** 清除 */
 const handleClear = (): void => {
   theme.imageBackground.src = "";
+  void window.api.theme.clearBackgroundImages();
 };
 </script>
 
@@ -40,7 +41,7 @@ const handleClear = (): void => {
         :src="theme.imageBackground.src"
         class="w-full h-full object-cover"
         draggable="false"
-        alt="cover"
+        alt=""
       />
       <IconLucideImage v-else class="size-6 text-on-surface-variant/50" />
     </div>