🌈 style: v3.8.0

✨ feat: 添加歌词界面样式配置功能
✨ feat: 添加字体配置功能可配置歌词页面或全局字体
2026-04-05 07:20:50 +08:00 · 2025-01-18 03:26:14 +08:00 · 2025-01-18 03:25:21 +08:00 · 2025-01-17 22:45:59 +08:00 · 2025-01-17 22:35:42 +08:00 · 2025-01-17 22:35:33 +08:00
22 changed files with 1370 additions and 413 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,9 +1,15 @@
 # 更新日志

-## v3.7.2
-### ✨ 优化
- 优化歌词缓存
- 优化音乐播放体验 如果播放失败自动播放下一首
+## v3.8.0
+### ✨ 新功能
+- 添加歌词界面样式配置功能
+- 添加字体配置功能，支持歌词页面或全局字体配置
+- 实现应用单例模式，防止重复启动
+
+### ⚡ 优化
+- 优化播放体验，去除歌曲地址缓存
+- 优化播放下一首逻辑
+- 优化播放控制逻辑


 ## 咖啡☕️
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "AlgerMusicPlayer",
-  "version": "3.7.2",
+  "version": "3.8.0",
  "description": "Alger Music Player",
  "author": "Alger <algerkc@qq.com>",
  "main": "./out/main/index.js",
@@ -26,6 +26,7 @@
    "@unblockneteasemusic/server": "^0.27.8-patch.1",
    "electron-store": "^8.1.0",
    "electron-updater": "^6.1.7",
+    "font-list": "^1.5.1",
    "netease-cloud-music-api-alger": "^4.25.0"
  },
  "devDependencies": {
@@ -36,6 +37,7 @@
    "@tailwindcss/postcss7-compat": "^2.2.4",
    "@types/howler": "^2.2.12",
    "@types/node": "^20.14.8",
+    "@types/tinycolor2": "^1.4.6",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
    "@vitejs/plugin-vue": "^5.0.5",
@@ -45,6 +47,7 @@
    "@vue/runtime-core": "^3.5.0",
    "@vueuse/core": "^11.0.3",
    "@vueuse/electron": "^11.0.3",
+    "animate.css": "^4.1.1",
    "autoprefixer": "^10.4.20",
    "axios": "^1.7.7",
    "cross-env": "^7.0.3",
@@ -68,6 +71,7 @@
    "remixicon": "^4.2.0",
    "sass": "^1.82.0",
    "tailwindcss": "^3.4.15",
+    "tinycolor2": "^1.6.0",
    "typescript": "^5.5.2",
    "unplugin-auto-import": "^0.18.2",
    "unplugin-vue-components": "^0.27.4",
@@ -78,8 +82,7 @@
    "vue": "^3.4.30",
    "vue-router": "^4.4.3",
    "vue-tsc": "^2.0.22",
-    "vuex": "^4.1.0",
-    "animate.css": "^4.1.1"
+    "vuex": "^4.1.0"
  },
  "build": {
    "appId": "com.alger.music",
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -5,6 +5,7 @@ import { join } from 'path';
 import { loadLyricWindow } from './lyric';
 import { initializeConfig } from './modules/config';
 import { initializeFileManager } from './modules/fileManager';
+import { initializeFonts } from './modules/fonts';
 import { initializeShortcuts, registerShortcuts } from './modules/shortcuts';
 import { initializeTray } from './modules/tray';
 import { createMainWindow, initializeWindowManager } from './modules/window';
@@ -30,6 +31,8 @@ function initialize() {
  initializeFileManager();
  // 初始化窗口管理
  initializeWindowManager();
+  // 初始化字体管理
+  initializeFonts();

  // 创建主窗口
  mainWindow = createMainWindow(icon);
@@ -47,44 +50,62 @@ function initialize() {
  initializeShortcuts(mainWindow);
 }

-// 应用程序准备就绪时的处理
-app.whenReady().then(() => {
-  // 设置应用ID
-  electronApp.setAppUserModelId('com.alger.music');
+// 检查是否为第一个实例
+const isSingleInstance = app.requestSingleInstanceLock();

-  // 监听窗口创建事件
-  app.on('browser-window-created', (_, window) => {
-    optimizer.watchWindowShortcuts(window);
+if (!isSingleInstance) {
+  app.quit();
+} else {
+  // 当第二个实例启动时，将焦点转移到第一个实例的窗口
+  app.on('second-instance', () => {
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) {
+        mainWindow.restore();
+      }
+      mainWindow.show();
+      mainWindow.focus();
+    }
  });

-  // 初始化应用
-  initialize();
+  // 应用程序准备就绪时的处理
+  app.whenReady().then(() => {
+    // 设置应用ID
+    electronApp.setAppUserModelId('com.alger.music');

-  // macOS 激活应用时的处理
-  app.on('activate', () => {
-    if (mainWindow === null) initialize();
+    // 监听窗口创建事件
+    app.on('browser-window-created', (_, window) => {
+      optimizer.watchWindowShortcuts(window);
+    });
+
+    // 初始化应用
+    initialize();
+
+    // macOS 激活应用时的处理
+    app.on('activate', () => {
+      if (mainWindow === null) initialize();
+    });
  });
-});

-// 监听快捷键更新
-ipcMain.on('update-shortcuts', () => {
-  registerShortcuts(mainWindow);
-});
+  // 监听快捷键更新
+  ipcMain.on('update-shortcuts', () => {
+    registerShortcuts(mainWindow);
+  });

-// 所有窗口关闭时的处理
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit();
-  }
-});
+  // 所有窗口关闭时的处理
+  app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+      app.quit();
+    }
+  });

-// 重启应用
-ipcMain.on('restart', () => {
-  app.relaunch();
-  app.exit(0);
-});
+  // 重启应用
+  ipcMain.on('restart', () => {
+    app.relaunch();
+    app.exit(0);
+  });

-// 获取系统架构信息
-ipcMain.on('get-arch', (event) => {
-  event.returnValue = process.arch;
-});
+  // 获取系统架构信息
+  ipcMain.on('get-arch', (event) => {
+    event.returnValue = process.arch;
+  });
+}
--- a/src/main/modules/config.ts
+++ b/src/main/modules/config.ts
@@ -4,15 +4,28 @@ import Store from 'electron-store';
 import set from '../set.json';
 import { defaultShortcuts } from './shortcuts';

-interface StoreType {
-  set: {
-    isProxy: boolean;
-    noAnimate: boolean;
-    animationSpeed: number;
-    author: string;
-    authorUrl: string;
-    musicApiPort: number;
+type SetConfig = {
+  isProxy: boolean;
+  proxyConfig: {
+    enable: boolean;
+    protocol: string;
+    host: string;
+    port: number;
  };
+  enableRealIP: boolean;
+  realIP: string;
+  noAnimate: boolean;
+  animationSpeed: number;
+  author: string;
+  authorUrl: string;
+  musicApiPort: number;
+  closeAction: 'ask' | 'minimize' | 'close';
+  musicQuality: string;
+  fontFamily: string;
+  fontScope: 'global' | 'lyric';
+};
+interface StoreType {
+  set: SetConfig;
  shortcuts: typeof defaultShortcuts;
 }

@@ -25,7 +38,7 @@ export function initializeConfig() {
  store = new Store<StoreType>({
    name: 'config',
    defaults: {
-      set,
+      set: set as SetConfig,
      shortcuts: defaultShortcuts
    }
  });
--- a/src/main/modules/fonts.ts
+++ b/src/main/modules/fonts.ts
@@ -0,0 +1,42 @@
+import { ipcMain } from 'electron';
+import { getFonts } from 'font-list';
+
+/**
+ * 清理字体名称
+ * @param fontName 原始字体名称
+ * @returns 清理后的字体名称
+ */
+function cleanFontName(fontName: string): string {
+  return fontName
+    .trim()
+    .replace(/^["']|["']$/g, '') // 移除首尾的引号
+    .replace(/\s+/g, ' '); // 将多个空格替换为单个空格
+}
+
+/**
+ * 获取系统字体列表
+ */
+async function getSystemFonts(): Promise<string[]> {
+  try {
+    // 使用 font-list 获取系统字体
+    const fonts = await getFonts();
+    // 清理字体名称并去重
+    const cleanedFonts = [...new Set(fonts.map(cleanFontName))];
+    // 添加系统默认字体并排序
+    return ['system-ui', ...cleanedFonts].sort();
+  } catch (error) {
+    console.error('获取系统字体失败:', error);
+    // 如果获取失败，至少返回系统默认字体
+    return ['system-ui'];
+  }
+}
+
+/**
+ * 初始化字体管理模块
+ */
+export function initializeFonts() {
+  // 添加获取系统字体的 IPC 处理
+  ipcMain.handle('get-system-fonts', async () => {
+    return await getSystemFonts();
+  });
+}
--- a/src/main/modules/update.ts
+++ b/src/main/modules/update.ts
@@ -0,0 +1,90 @@
+import axios from 'axios';
+import { exec } from 'child_process';
+import { app, BrowserWindow, ipcMain } from 'electron';
+import * as fs from 'fs';
+import * as path from 'path';
+
+export function setupUpdateHandlers(_mainWindow: BrowserWindow) {
+  ipcMain.on('start-download', async (event, url: string) => {
+    try {
+      const response = await axios({
+        url,
+        method: 'GET',
+        responseType: 'stream',
+        onDownloadProgress: (progressEvent: { loaded: number; total?: number }) => {
+          if (!progressEvent.total) return;
+          const percent = Math.round((progressEvent.loaded / progressEvent.total) * 100);
+          const downloaded = (progressEvent.loaded / 1024 / 1024).toFixed(2);
+          const total = (progressEvent.total / 1024 / 1024).toFixed(2);
+          event.sender.send('download-progress', percent, `已下载 ${downloaded}MB / ${total}MB`);
+        }
+      });
+
+      const fileName = url.split('/').pop() || 'update.exe';
+      const downloadPath = path.join(app.getPath('downloads'), fileName);
+
+      // 创建写入流
+      const writer = fs.createWriteStream(downloadPath);
+
+      // 将响应流写入文件
+      response.data.pipe(writer);
+
+      // 处理写入完成
+      writer.on('finish', () => {
+        event.sender.send('download-complete', true, downloadPath);
+      });
+
+      // 处理写入错误
+      writer.on('error', (error) => {
+        console.error('Write file error:', error);
+        event.sender.send('download-complete', false, '');
+      });
+    } catch (error) {
+      console.error('Download failed:', error);
+      event.sender.send('download-complete', false, '');
+    }
+  });
+
+  ipcMain.on('install-update', (_event, filePath: string) => {
+    if (!fs.existsSync(filePath)) {
+      console.error('Installation file not found:', filePath);
+      return;
+    }
+
+    const { platform } = process;
+
+    // 关闭当前应用
+    app.quit();
+
+    // 根据不同平台执行安装
+    if (platform === 'win32') {
+      exec(`"${filePath}"`, (error) => {
+        if (error) {
+          console.error('Error starting installer:', error);
+        }
+      });
+    } else if (platform === 'darwin') {
+      // 挂载 DMG 文件
+      exec(`open "${filePath}"`, (error) => {
+        if (error) {
+          console.error('Error opening DMG:', error);
+        }
+      });
+    } else if (platform === 'linux') {
+      const ext = path.extname(filePath);
+      if (ext === '.AppImage') {
+        exec(`chmod +x "${filePath}" && "${filePath}"`, (error) => {
+          if (error) {
+            console.error('Error running AppImage:', error);
+          }
+        });
+      } else if (ext === '.deb') {
+        exec(`pkexec dpkg -i "${filePath}"`, (error) => {
+          if (error) {
+            console.error('Error installing deb package:', error);
+          }
+        });
+      }
+    }
+  });
+}
--- a/src/main/set.json
+++ b/src/main/set.json
@@ -14,5 +14,7 @@
  "authorUrl": "https://github.com/algerkong",
  "musicApiPort": 30488,
  "closeAction": "ask",
-  "musicQuality": "higher"
+  "musicQuality": "higher",
+  "fontFamily": "system-ui",
+  "fontScope": "global"
 }
--- a/src/main/unblockMusic.ts
+++ b/src/main/unblockMusic.ts
@@ -1,5 +1,4 @@
 import match from '@unblockneteasemusic/server';
-import Store from 'electron-store';

 type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'kuwo' | 'bilibili' | 'youtube';

@@ -28,73 +27,6 @@ interface UnblockResult {
  };
 }

-interface CacheData extends UnblockResult {
-  timestamp: number;
-}
-
-interface CacheStore {
-  [key: string]: CacheData;
-}
-
-// 初始化缓存存储
-const store = new Store<CacheStore>({
-  name: 'unblock-cache'
-});
-
-// 缓存过期时间（24小时）
-const CACHE_EXPIRY = 24 * 60 * 60 * 1000;
-
-/**
- * 检查缓存是否有效
- * @param cacheData 缓存数据
- * @returns boolean
- */
-const isCacheValid = (cacheData: CacheData | null): boolean => {
-  if (!cacheData) return false;
-  const now = Date.now();
-  return now - cacheData.timestamp < CACHE_EXPIRY;
-};
-
-/**
- * 从缓存中获取数据
- * @param id 歌曲ID
- * @returns CacheData | null
- */
-const getFromCache = (id: string | number): CacheData | null => {
-  const cacheData = store.get(String(id)) as CacheData | null;
-  if (isCacheValid(cacheData)) {
-    return cacheData;
-  }
-  // 清除过期缓存
-  store.delete(String(id));
-  return null;
-};
-
-/**
- * 将数据存入缓存
- * @param id 歌曲ID
- * @param data 解析结果
- */
-const saveToCache = (id: string | number, data: UnblockResult): void => {
-  const cacheData: CacheData = {
-    ...data,
-    timestamp: Date.now()
-  };
-  store.set(String(id), cacheData);
-};
-
-/**
- * 清理过期缓存
- */
-const cleanExpiredCache = (): void => {
-  const allData = store.store;
-  Object.entries(allData).forEach(([id, data]) => {
-    if (!isCacheValid(data)) {
-      store.delete(id);
-    }
-  });
-};
-
 /**
 * 音乐解析函数
 * @param id 歌曲ID
@@ -107,12 +39,6 @@ const unblockMusic = async (
  songData: SongData,
  retryCount = 3
 ): Promise<UnblockResult> => {
-  // 检查缓存
-  const cachedData = getFromCache(id);
-  if (cachedData) {
-    return cachedData;
-  }
-
  // 所有可用平台
  const platforms: Platform[] = ['migu', 'kugou', 'pyncmd', 'joox', 'kuwo', 'bilibili', 'youtube'];

@@ -128,9 +54,6 @@ const unblockMusic = async (
          }
        }
      };
-
-      // 保存到缓存
-      saveToCache(id, result);
      return result;
    } catch (err) {
      if (attempt < retryCount) {
@@ -149,14 +72,4 @@ const unblockMusic = async (
  return retry(1);
 };

-// 定期清理过期缓存（每小时执行一次）
-setInterval(cleanExpiredCache, 60 * 60 * 1000);
-
-export {
-  cleanExpiredCache, // 导出清理缓存函数，以便手动调用
-  type Platform,
-  type ResponseData,
-  type SongData,
-  unblockMusic,
-  type UnblockResult
-};
+export { type Platform, type ResponseData, type SongData, unblockMusic, type UnblockResult };
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -14,11 +14,18 @@ const api = {
  unblockMusic: (id) => ipcRenderer.invoke('unblock-music', id),
  // 歌词缓存相关
  invoke: (channel: string, ...args: any[]) => {
-    const validChannels = ['get-cached-lyric', 'cache-lyric', 'clear-lyric-cache'];
+    const validChannels = [
+      'get-lyrics',
+      'clear-lyrics-cache',
+      'get-system-fonts',
+      'get-cached-lyric',
+      'cache-lyric',
+      'clear-lyric-cache'
+    ];
    if (validChannels.includes(channel)) {
      return ipcRenderer.invoke(channel, ...args);
    }
-    return Promise.reject(new Error(`Invalid channel: ${channel}`));
+    return Promise.reject(new Error(`未授权的 IPC 通道: ${channel}`));
  }
 };

--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -12,7 +12,7 @@

 <script setup lang="ts">
 import { darkTheme, lightTheme } from 'naive-ui';
-import { onMounted } from 'vue';
+import { computed, onMounted, watch } from 'vue';

 import homeRouter from '@/router/home';
 import store from '@/store';
@@ -24,9 +24,45 @@ const theme = computed(() => {
  return store.state.theme;
 });

+// 监听字体变化并应用
+watch(
+  () => [store.state.setData.fontFamily, store.state.setData.fontScope],
+  ([newFont, fontScope]) => {
+    const appElement = document.body;
+    if (!appElement) return;
+
+    const defaultFonts =
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+    // 只有在全局模式下才应用字体
+    if (fontScope !== 'global') {
+      appElement.style.fontFamily = defaultFonts;
+      return;
+    }
+
+    if (newFont === 'system-ui') {
+      appElement.style.fontFamily = defaultFonts;
+    } else {
+      // 处理多个字体，确保每个字体名都被正确引用
+      const fontList = newFont.split(',').map((font) => {
+        const trimmedFont = font.trim();
+        // 如果字体名包含空格或特殊字符，添加引号（如果还没有引号的话）
+        return /[\s'"()]/.test(trimmedFont) && !/^['"].*['"]$/.test(trimmedFont)
+          ? `"${trimmedFont}"`
+          : trimmedFont;
+      });
+
+      // 将选择的字体和默认字体组合
+      appElement.style.fontFamily = `${fontList.join(', ')}, ${defaultFonts}`;
+    }
+  },
+  { immediate: true }
+);
+
 onMounted(() => {
  store.dispatch('initializeSettings');
  store.dispatch('initializeTheme');
+  store.dispatch('initializeSystemFonts');
  if (isMobile.value) {
    store.commit(
      'setMenus',
@@ -36,7 +72,7 @@ onMounted(() => {
 });
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
 .app-container {
  @apply h-full w-full;
  user-select: none;
--- a/src/renderer/assets/css/base.css
+++ b/src/renderer/assets/css/base.css
@@ -9,3 +9,7 @@ body {
  border-radius: 0.5rem !important;
  overflow: hidden !important;
 }
+.n-popover:has(.transparent-popover ) {
+  background-color: transparent !important;
+  padding: 0 !important;
+}
--- a/src/renderer/components.d.ts
+++ b/src/renderer/components.d.ts
@@ -27,10 +27,15 @@ declare module 'vue' {
    NInput: typeof import('naive-ui')['NInput']
    NInputNumber: typeof import('naive-ui')['NInputNumber']
    NLayout: typeof import('naive-ui')['NLayout']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
    NModal: typeof import('naive-ui')['NModal']
    NPopover: typeof import('naive-ui')['NPopover']
    NProgress: typeof import('naive-ui')['NProgress']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioButton: typeof import('naive-ui')['NRadioButton']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
    NScrollbar: typeof import('naive-ui')['NScrollbar']
    NSelect: typeof import('naive-ui')['NSelect']
    NSlider: typeof import('naive-ui')['NSlider']
@@ -41,6 +46,7 @@ declare module 'vue' {
    NTabs: typeof import('naive-ui')['NTabs']
    NTag: typeof import('naive-ui')['NTag']
    NTooltip: typeof import('naive-ui')['NTooltip']
+    NTransfer: typeof import('naive-ui')['NTransfer']
    NVirtualList: typeof import('naive-ui')['NVirtualList']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
--- a/src/renderer/components/common/UpdateModal.vue
+++ b/src/renderer/components/common/UpdateModal.vue
@@ -3,7 +3,8 @@
    v-model:show="showModal"
    preset="dialog"
    :show-icon="false"
-    :mask-closable="true"
+    :mask-closable="!downloading"
+    :closable="!downloading"
    class="update-app-modal"
    style="width: 800px; max-width: 90vw"
  >
@@ -15,7 +16,6 @@
        <div class="app-info">
          <h2 class="app-name">发现新版本 {{ updateInfo.latestVersion }}</h2>
          <p class="app-desc mb-2">当前版本 {{ updateInfo.currentVersion }}</p>
-          <n-checkbox v-model:checked="noPrompt">不再提示</n-checkbox>
        </div>
      </div>
      <div class="update-info">
@@ -23,11 +23,35 @@
          <div class="update-body" v-html="parsedReleaseNotes"></div>
        </n-scrollbar>
      </div>
-      <div class="modal-actions">
-        <n-button class="cancel-btn" @click="closeModal">暂不更新</n-button>
-        <n-button type="primary" class="update-btn" @click="handleUpdate">立即更新</n-button>
+      <div v-if="downloading" class="download-status mt-6">
+        <div class="flex items-center justify-between mb-2">
+          <span class="text-sm text-gray-500">{{ downloadStatus }}</span>
+          <span class="text-sm font-medium">{{ downloadProgress }}%</span>
+        </div>
+        <div class="progress-bar-wrapper">
+          <div class="progress-bar" :style="{ width: `${downloadProgress}%` }"></div>
+        </div>
      </div>
-      <div class="modal-desc mt-4 text-center">
+      <div class="modal-actions" :class="{ 'mt-6': !downloading }">
+        <n-button
+          class="cancel-btn"
+          :disabled="downloading"
+          :loading="downloading"
+          @click="closeModal"
+        >
+          {{ '暂不更新' }}
+        </n-button>
+        <n-button
+          type="primary"
+          class="update-btn"
+          :loading="downloading"
+          :disabled="downloading"
+          @click="handleUpdate"
+        >
+          {{ downloadBtnText }}
+        </n-button>
+      </div>
+      <div v-if="!downloading" class="modal-desc mt-4 text-center">
        <p class="text-xs text-gray-400">
          下载遇到问题？去
          <a
@@ -45,7 +69,7 @@

 <script setup lang="ts">
 import { marked } from 'marked';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useStore } from 'vuex';

 import { checkUpdate, UpdateResult } from '@/utils/update';
@@ -59,7 +83,6 @@ marked.setOptions({
 });

 const showModal = ref(false);
-const noPrompt = ref(false);
 const updateInfo = ref<UpdateResult>({
  hasUpdate: false,
  latestVersion: '',
@@ -102,9 +125,6 @@ const parsedReleaseNotes = computed(() => {

 const closeModal = () => {
  showModal.value = false;
-  if (noPrompt.value) {
-    localStorage.setItem('updatePromptDismissed', 'true');
-  }
 };

 const checkForUpdates = async () => {
@@ -112,21 +132,54 @@ const checkForUpdates = async () => {
    const result = await checkUpdate(config.version);
    if (result) {
      updateInfo.value = result;
-      if (localStorage.getItem('updatePromptDismissed') !== 'true') {
-        showModal.value = true;
-      }
+      showModal.value = true;
    }
  } catch (error) {
    console.error('检查更新失败:', error);
  }
 };

+const downloading = ref(false);
+const downloadProgress = ref(0);
+const downloadStatus = ref('准备下载...');
+const downloadBtnText = computed(() => {
+  if (downloading.value) return '下载中...';
+  return '立即更新';
+});
+
+// 处理下载状态更新
+const handleDownloadProgress = (_event: any, progress: number, status: string) => {
+  downloadProgress.value = progress;
+  downloadStatus.value = status;
+};
+
+// 处理下载完成
+const handleDownloadComplete = (_event: any, success: boolean, filePath: string) => {
+  downloading.value = false;
+  if (success) {
+    window.electron.ipcRenderer.send('install-update', filePath);
+  } else {
+    window.$message.error('下载失败，请重试或手动下载');
+  }
+};
+
+// 监听下载事件
+onMounted(() => {
+  checkForUpdates();
+  window.electron.ipcRenderer.on('download-progress', handleDownloadProgress);
+  window.electron.ipcRenderer.on('download-complete', handleDownloadComplete);
+});
+
+// 清理事件监听
+onUnmounted(() => {
+  window.electron.ipcRenderer.removeListener('download-progress', handleDownloadProgress);
+  window.electron.ipcRenderer.removeListener('download-complete', handleDownloadComplete);
+});
+
 const handleUpdate = async () => {
  const assets = updateInfo.value.releaseInfo?.assets || [];
  const { platform } = window.electron.process;
  const arch = window.electron.ipcRenderer.sendSync('get-arch');
-  console.log('arch', arch);
-  console.log('platform', platform);
  const version = updateInfo.value.latestVersion;
  const downUrls = {
    win32: {
@@ -170,16 +223,20 @@ const handleUpdate = async () => {
  }

  if (downloadUrl) {
-    window.open(`https://www.ghproxy.cn/${downloadUrl}`, '_blank');
+    try {
+      downloading.value = true;
+      downloadStatus.value = '准备下载...';
+      window.electron.ipcRenderer.send('start-download', downloadUrl);
+    } catch (error) {
+      downloading.value = false;
+      window.$message.error('启动下载失败，请重试或手动下载');
+      console.error('下载失败:', error);
+    }
  } else {
-    // 如果没有找到对应的安装包，跳转到 release 页面
+    window.$message.error('未找到适合当前系统的安装包，请手动下载');
    window.open('https://github.com/algerkong/AlgerMusicPlayer/releases/latest', '_blank');
  }
 };
-
-onMounted(() => {
-  checkForUpdates();
-});
 </script>

 <style lang="scss" scoped>
@@ -266,8 +323,18 @@ onMounted(() => {
        }
      }
    }
+    .download-status {
+      @apply p-2;
+      .progress-bar-wrapper {
+        @apply w-full h-2 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden;
+        .progress-bar {
+          @apply h-full bg-green-500 rounded-full transition-all duration-300 ease-out;
+          box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
+        }
+      }
+    }
    .modal-actions {
-      @apply flex gap-4 mt-6;
+      @apply flex gap-4;
      .n-button {
        @apply flex-1 text-base py-2;
      }
@@ -276,12 +343,18 @@ onMounted(() => {
        &:hover {
          @apply bg-gray-700;
        }
+        &:disabled {
+          @apply opacity-50 cursor-not-allowed;
+        }
      }
      .update-btn {
        @apply bg-green-600 border-none;
        &:hover {
          @apply bg-green-500;
        }
+        &:disabled {
+          @apply opacity-50 cursor-not-allowed;
+        }
      }
    }
  }
--- a/src/renderer/components/lyric/LyricSettings.vue
+++ b/src/renderer/components/lyric/LyricSettings.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="settings-panel transparent-popover">
+    <div class="settings-title">页面设置</div>
+    <div class="settings-content">
+      <div class="settings-item">
+        <span>纯净模式</span>
+        <n-switch v-model:value="config.pureModeEnabled" />
+      </div>
+
+      <div class="settings-item">
+        <span>隐藏封面</span>
+        <n-switch v-model:value="config.hideCover" />
+      </div>
+
+      <div class="settings-item">
+        <span>居中显示</span>
+        <n-switch v-model:value="config.centerLyrics" />
+      </div>
+
+      <div class="settings-item">
+        <span>显示翻译</span>
+        <n-switch v-model:value="config.showTranslation" />
+      </div>
+
+      <div class="settings-item">
+        <span>隐藏播放栏</span>
+        <n-switch v-model:value="config.hidePlayBar" />
+      </div>
+
+      <div class="settings-slider">
+        <span>字体大小</span>
+        <n-slider
+          v-model:value="config.fontSize"
+          :step="1"
+          :min="12"
+          :max="32"
+          :marks="{
+            12: '小',
+            22: '中',
+            32: '大'
+          }"
+        />
+      </div>
+
+      <div class="settings-slider">
+        <span>文字间距</span>
+        <n-slider
+          v-model:value="config.letterSpacing"
+          :step="0.2"
+          :min="-2"
+          :max="10"
+          :marks="{
+            '-2': '紧凑',
+            0: '默认',
+            10: '宽松'
+          }"
+        />
+      </div>
+
+      <div class="settings-slider">
+        <span>行高</span>
+        <n-slider
+          v-model:value="config.lineHeight"
+          :step="0.1"
+          :min="1"
+          :max="3"
+          :marks="{
+            1: '紧凑',
+            1.5: '默认',
+            3: '宽松'
+          }"
+        />
+      </div>
+
+      <div class="settings-item">
+        <span>背景主题</span>
+        <n-radio-group v-model:value="config.theme" name="theme">
+          <n-radio value="default">默认</n-radio>
+          <n-radio value="light">亮色</n-radio>
+          <n-radio value="dark">暗色</n-radio>
+        </n-radio-group>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+
+interface LyricConfig {
+  hideCover: boolean;
+  centerLyrics: boolean;
+  fontSize: number;
+  letterSpacing: number;
+  lineHeight: number;
+  showTranslation: boolean;
+  theme: 'default' | 'light' | 'dark';
+  hidePlayBar: boolean;
+  pureModeEnabled: boolean;
+}
+
+const config = ref<LyricConfig>({
+  hideCover: false,
+  centerLyrics: false,
+  fontSize: 22,
+  letterSpacing: 0,
+  lineHeight: 2,
+  showTranslation: true,
+  theme: 'default',
+  hidePlayBar: false,
+  pureModeEnabled: false
+});
+
+const emit = defineEmits(['themeChange']);
+
+// 监听配置变化并保存到本地存储
+watch(
+  () => config.value,
+  (newConfig) => {
+    updateCSSVariables(newConfig);
+  },
+  { deep: true }
+);
+
+// 监听主题变化
+watch(
+  () => config.value.theme,
+  (newTheme) => {
+    emit('themeChange', newTheme);
+  }
+);
+
+// 更新 CSS 变量
+const updateCSSVariables = (config: LyricConfig) => {
+  document.documentElement.style.setProperty('--lyric-font-size', `${config.fontSize}px`);
+  document.documentElement.style.setProperty('--lyric-letter-spacing', `${config.letterSpacing}px`);
+  document.documentElement.style.setProperty('--lyric-line-height', config.lineHeight.toString());
+};
+
+// 加载保存的配置
+onMounted(() => {
+  const savedConfig = localStorage.getItem('music-full-config');
+  if (savedConfig) {
+    config.value = { ...config.value, ...JSON.parse(savedConfig) };
+    updateCSSVariables(config.value);
+  }
+});
+
+defineExpose({
+  config
+});
+</script>
+
+<style scoped lang="scss">
+.settings-panel {
+  @apply p-4 w-72 rounded-lg relative overflow-hidden backdrop-blur-lg bg-black/10;
+  .settings-title {
+    @apply text-base font-bold mb-4;
+    color: var(--text-color-active);
+  }
+
+  .settings-content {
+    @apply space-y-4;
+  }
+
+  .settings-item {
+    @apply flex items-center justify-between;
+    span {
+      @apply text-sm;
+      color: var(--text-color-primary);
+    }
+  }
+
+  .settings-slider {
+    @apply space-y-2;
+    @apply mb-10 !important;
+    span {
+      @apply text-sm;
+      color: var(--text-color-primary);
+    }
+  }
+}
+
+// 修改 slider 字体颜色
+:deep(.n-slider-mark) {
+  color: var(--text-color-primary) !important;
+}
+// 修改 radio 字体颜色
+:deep(.n-radio__label) {
+  color: var(--text-color-active) !important;
+}
+</style>
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -6,7 +6,7 @@ import store from '@/store';
 import type { Artist, ILyricText, SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
 import { getTextColors } from '@/utils/linearColor';
-
+import { createDiscreteApi } from 'naive-ui';
 const windowData = window as any;

 export const lrcArray = ref<ILyricText[]>([]); // 歌词数组
@@ -51,6 +51,8 @@ document.onkeyup = (e) => {
  }
 };

+const { message } = createDiscreteApi(['message']);
+
 watch(
  () => store.state.playMusicUrl,
  async (newVal) => {
@@ -60,8 +62,10 @@ watch(
        sound.value = newSound as Howl;
        setupAudioListeners();
      } catch (error) {
+
        console.error('播放音频失败:', error);
        store.commit('setPlayMusic', false);
+        message.error('当前歌曲播放失败，播放下一首');
        // 下一首
        store.commit('nextPlay');
      }
@@ -149,6 +153,30 @@ const setupAudioListeners = () => {
    }
  });

+  const replayMusic = async () => {
+    try {
+      // 如果当前有音频实例，先停止并销毁
+      if (sound.value) {
+        sound.value.stop();
+        sound.value.unload();
+        sound.value = null;
+      }
+
+      // 重新播放当前歌曲
+      if (store.state.playMusicUrl && playMusic.value) {
+        const newSound = await audioService.play(store.state.playMusicUrl, playMusic.value);
+        sound.value = newSound as Howl;
+        setupAudioListeners();
+      } else {
+        console.error('No music URL or playMusic data available');
+        store.commit('nextPlay');
+      }
+    } catch (error) {
+      console.error('Error replaying song:', error);
+      store.commit('nextPlay');
+    }
+  };
+
  // 监听结束
  audioService.on('end', () => {
    clearInterval();
@@ -156,23 +184,13 @@ const setupAudioListeners = () => {
    if (store.state.playMode === 1) {
      // 单曲循环模式
      if (sound.value) {
-        sound.value.seek(0);
-        try {
-          sound.value.play();
-        } catch (error) {
-          console.error('Error replaying song:', error);
-          store.commit('nextPlay');
-        }
+        replayMusic();
      }
    } else if (store.state.playMode === 2) {
      // 随机播放模式
      const { playList } = store.state;
      if (playList.length <= 1) {
-        try {
-          sound.value?.play();
-        } catch (error) {
-          console.error('Error replaying song:', error);
-        }
+        replayMusic();
      } else {
        let randomIndex;
        do {
@@ -466,13 +484,6 @@ if (isElectron) {

 // 在组件挂载时设置监听器
 onMounted(() => {
-  const clearIntervalFn = setupAudioListeners();
+  setupAudioListeners();
  useLyricProgress(); // 直接调用，不需要解构返回值
-
-  // 在组件卸载时清理
-  onUnmounted(() => {
-    clearIntervalFn();
-    audioService.stop();
-    audioService.clearAllListeners();
-  });
 });
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -25,7 +25,7 @@
        </div>
      </div>
      <!-- 底部音乐播放 -->
-      <play-bar v-if="isPlay" :style="isMobile && store.state.musicFull ? 'bottom: 0;' : ''" />
+      <play-bar v-show="isPlay" :style="isMobile && store.state.musicFull ? 'bottom: 0;' : ''" />
      <!-- 下载管理抽屉 -->
      <download-drawer v-if="isElectron" />
    </div>
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -7,9 +7,29 @@
    :to="`#layout-main`"
    :z-index="9998"
  >
-    <div id="drawer-target">
-      <div class="drawer-back"></div>
+    <div id="drawer-target" :class="[config.theme]">
      <div
+        class="control-btn absolute top-8 left-8"
+        :class="{ 'pure-mode': config.pureModeEnabled }"
+        @click="isVisible = false"
+      >
+        <i class="ri-arrow-down-s-line"></i>
+      </div>
+
+      <n-popover trigger="click" placement="bottom">
+        <template #trigger>
+          <div
+            class="control-btn absolute top-8 right-8"
+            :class="{ 'pure-mode': config.pureModeEnabled }"
+          >
+            <i class="ri-settings-3-line"></i>
+          </div>
+        </template>
+        <lyric-settings ref="lyricSettingsRef" />
+      </n-popover>
+
+      <div
+        v-show="!config.hideCover"
        class="music-img"
        :style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
      >
@@ -44,16 +64,39 @@
          </div>
        </div>
      </div>
-      <div class="music-content">
+      <div class="music-content" :class="{ center: config.centerLyrics && config.hideCover }">
        <n-layout
          ref="lrcSider"
          class="music-lrc"
-          style="height: 60vh"
+          :style="{
+            height: config.hidePlayBar ? '85vh' : '65vh',
+            width: config.hideCover ? '50vw' : '500px'
+          }"
          :native-scrollbar="false"
          @mouseover="mouseOverLayout"
          @mouseleave="mouseLeaveLayout"
        >
-          <div ref="lrcContainer">
+          <!-- 歌曲信息 -->
+
+          <div ref="lrcContainer" class="music-lrc-container">
+            <div
+              v-if="config.hideCover"
+              class="music-info-header"
+              :style="{ textAlign: config.centerLyrics ? 'center' : 'left' }"
+            >
+              <div class="music-info-name">{{ playMusic.name }}</div>
+              <div class="music-info-singer">
+                <span
+                  v-for="(item, index) in artistList"
+                  :key="index"
+                  class="cursor-pointer hover:text-green-500"
+                  @click="handleArtistClick(item.id)"
+                >
+                  {{ item.name }}
+                  {{ index < artistList.length - 1 ? ' / ' : '' }}
+                </span>
+              </div>
+            </div>
            <div
              v-for="(item, index) in lrcArray"
              :id="`music-lrc-text-${index}`"
@@ -63,7 +106,9 @@
              @click="setAudioTime(index)"
            >
              <span :style="getLrcStyle(index)">{{ item.text }}</span>
-              <div class="music-lrc-text-tr">{{ item.trText }}</div>
+              <div v-show="config.showTranslation" class="music-lrc-text-tr">
+                {{ item.trText }}
+              </div>
            </div>

            <!-- 无歌词 -->
@@ -84,9 +129,10 @@

 <script setup lang="ts">
 import { useDebounceFn } from '@vueuse/core';
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useStore } from 'vuex';

+import LyricSettings from '@/components/lyric/LyricSettings.vue';
 import {
  artistList,
  lrcArray,
@@ -106,6 +152,56 @@ const lrcContainer = ref<HTMLElement | null>(null);
 const currentBackground = ref('');
 const animationFrame = ref<number | null>(null);
 const isDark = ref(false);
+const showStickyHeader = ref(false);
+const lyricSettingsRef = ref<InstanceType<typeof LyricSettings>>();
+
+interface LyricConfig {
+  hideCover: boolean;
+  centerLyrics: boolean;
+  fontSize: number;
+  letterSpacing: number;
+  lineHeight: number;
+  showTranslation: boolean;
+  theme: 'default' | 'light' | 'dark';
+  hidePlayBar: boolean;
+  pureModeEnabled: boolean;
+}
+
+// 移除 computed 配置
+const config = ref<LyricConfig>({
+  hideCover: false,
+  centerLyrics: false,
+  fontSize: 22,
+  letterSpacing: 0,
+  lineHeight: 1.5,
+  showTranslation: true,
+  theme: 'default',
+  hidePlayBar: false,
+  pureModeEnabled: false
+});
+
+// 监听设置组件的配置变化
+watch(
+  () => lyricSettingsRef.value?.config,
+  (newConfig) => {
+    if (newConfig) {
+      config.value = newConfig;
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+// 监听本地配置变化，保存到 localStorage
+watch(
+  () => config.value,
+  (newConfig) => {
+    localStorage.setItem('music-full-config', JSON.stringify(newConfig));
+    if (lyricSettingsRef.value) {
+      lyricSettingsRef.value.config = newConfig;
+    }
+  },
+  { deep: true }
+);

 const props = defineProps({
  modelValue: {
@@ -118,6 +214,11 @@ const props = defineProps({
  }
 });

+const themeMusic = {
+  light: 'linear-gradient(to bottom, #ffffff, #f5f5f5)',
+  dark: 'linear-gradient(to bottom, #1a1a1a, #000000)'
+};
+
 const emit = defineEmits(['update:modelValue']);

 const isVisible = computed({
@@ -126,18 +227,17 @@ const isVisible = computed({
 });

 // 歌词滚动方法
-const lrcScroll = (behavior = 'smooth', top: null | number = null) => {
-  const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`);
-  if (isVisible.value && !isMouse.value && nowEl && lrcContainer.value) {
-    if (top !== null) {
-      lrcSider.value.scrollTo({ top, behavior });
-    } else {
-      const containerRect = lrcContainer.value.getBoundingClientRect();
-      const nowElRect = nowEl.getBoundingClientRect();
-      const relativeTop = nowElRect.top - containerRect.top;
-      const scrollTop = relativeTop - lrcSider.value.$el.getBoundingClientRect().height / 2;
-      lrcSider.value.scrollTo({ top: scrollTop, behavior });
-    }
+const lrcScroll = (behavior: ScrollBehavior = 'smooth') => {
+  const nowEl = document.querySelector(`#music-lrc-text-${nowIndex.value}`) as HTMLElement;
+  if (isVisible.value && !isMouse.value && nowEl && lrcSider.value) {
+    const containerHeight = lrcSider.value.$el.clientHeight;
+    const elementTop = nowEl.offsetTop;
+    const scrollTop = elementTop - containerHeight / 2 + nowEl.clientHeight / 2;
+
+    lrcSider.value.scrollTo({
+      top: scrollTop,
+      behavior
+    });
  }
 };

@@ -149,6 +249,7 @@ const mouseOverLayout = () => {
  }
  isMouse.value = true;
 };
+
 const mouseLeaveLayout = () => {
  if (isMobile.value) {
    return;
@@ -174,41 +275,51 @@ watch(
  }
 );

+const setTextColors = (background: string) => {
+  if (!background) {
+    textColors.value = getTextColors();
+    document.documentElement.style.setProperty('--hover-bg-color', getHoverBackgroundColor(false));
+    document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
+    document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
+    return;
+  }
+
+  // 更新文字颜色
+  textColors.value = getTextColors(background);
+  isDark.value = textColors.value.active === '#000000';
+
+  document.documentElement.style.setProperty(
+    '--hover-bg-color',
+    getHoverBackgroundColor(isDark.value)
+  );
+  document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
+  document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
+
+  // 处理背景颜色动画
+  if (currentBackground.value) {
+    if (animationFrame.value) {
+      cancelAnimationFrame(animationFrame.value);
+    }
+    const result = animateGradient(currentBackground.value, background, (gradient) => {
+      currentBackground.value = gradient;
+    });
+    if (typeof result === 'number') {
+      animationFrame.value = result;
+    }
+  } else {
+    currentBackground.value = background;
+  }
+};
+
 // 监听背景变化
 watch(
  () => props.background,
  (newBg) => {
-    if (!newBg) {
-      textColors.value = getTextColors();
-      document.documentElement.style.setProperty(
-        '--hover-bg-color',
-        getHoverBackgroundColor(false)
-      );
-      document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
-      document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
-      return;
-    }
-
-    if (currentBackground.value) {
-      if (animationFrame.value) {
-        cancelAnimationFrame(animationFrame.value);
-      }
-      animationFrame.value = animateGradient(currentBackground.value, newBg, (gradient) => {
-        currentBackground.value = gradient;
-      });
+    if (config.value.theme === 'default') {
+      setTextColors(newBg);
    } else {
-      currentBackground.value = newBg;
+      setTextColors(themeMusic[config.value.theme] || props.background);
    }
-
-    textColors.value = getTextColors(newBg);
-    isDark.value = textColors.value.active === '#000000';
-
-    document.documentElement.style.setProperty(
-      '--hover-bg-color',
-      getHoverBackgroundColor(isDark.value)
-    );
-    document.documentElement.style.setProperty('--text-color-primary', textColors.value.primary);
-    document.documentElement.style.setProperty('--text-color-active', textColors.value.active);
  },
  { immediate: true }
 );
@@ -253,8 +364,124 @@ const handleArtistClick = (id: number) => {
  store.commit('setCurrentArtistId', id);
 };

+const setData = computed(() => store.state.setData);
+
+// 监听字体变化并更新 CSS 变量
+watch(
+  () => [setData.value.fontFamily, setData.value.fontScope],
+  ([newFont, fontScope]) => {
+    const defaultFonts =
+      'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+
+    // 如果不是歌词模式或全局模式，使用默认字体
+    if (fontScope !== 'lyric' && fontScope !== 'global') {
+      document.documentElement.style.setProperty('--current-font-family', defaultFonts);
+      return;
+    }
+
+    if (newFont === 'system-ui') {
+      document.documentElement.style.setProperty('--current-font-family', defaultFonts);
+    } else {
+      // 处理多个字体，确保每个字体名都被正确引用
+      const fontList = newFont.split(',').map((font) => {
+        const trimmedFont = font.trim();
+        // 如果字体名包含空格或特殊字符，添加引号（如果还没有引号的话）
+        return /[\s'"()]/.test(trimmedFont) && !/^['"].*['"]$/.test(trimmedFont)
+          ? `"${trimmedFont}"`
+          : trimmedFont;
+      });
+
+      // 将选择的字体和默认字体组合
+      document.documentElement.style.setProperty(
+        '--current-font-family',
+        `${fontList.join(', ')}, ${defaultFonts}`
+      );
+    }
+  },
+  { immediate: true }
+);
+
+// 监听配置变化并保存到本地存储
+watch(
+  () => config.value,
+  (newConfig) => {
+    localStorage.setItem('music-full-config', JSON.stringify(newConfig));
+  },
+  { deep: true }
+);
+
+// 监听滚动事件
+const handleScroll = () => {
+  if (!lrcSider.value || !config.value.hideCover) return;
+  const { scrollTop } = lrcSider.value.$el;
+  showStickyHeader.value = scrollTop > 100;
+};
+
+// 添加滚动监听
+onMounted(() => {
+  if (lrcSider.value?.$el) {
+    lrcSider.value.$el.addEventListener('scroll', handleScroll);
+  }
+});
+
+// 移除滚动监听
+onBeforeUnmount(() => {
+  if (animationFrame.value) {
+    cancelAnimationFrame(animationFrame.value);
+  }
+  if (lrcSider.value?.$el) {
+    lrcSider.value.$el.removeEventListener('scroll', handleScroll);
+  }
+});
+
+// 监听字体大小变化
+watch(
+  () => config.value.fontSize,
+  (newSize) => {
+    document.documentElement.style.setProperty('--lyric-font-size', `${newSize}px`);
+  }
+);
+
+// 监听主题变化
+watch(
+  () => config.value.theme,
+  (newTheme) => {
+    const newBackground = themeMusic[newTheme] || props.background;
+    setTextColors(newBackground);
+  },
+  { immediate: true }
+);
+
+// 添加文字间距监听
+watch(
+  () => config.value.letterSpacing,
+  (newSpacing) => {
+    document.documentElement.style.setProperty('--lyric-letter-spacing', `${newSpacing}px`);
+  }
+);
+
+// 添加行高监听
+watch(
+  () => config.value.lineHeight,
+  (newLineHeight) => {
+    document.documentElement.style.setProperty('--lyric-line-height', newLineHeight.toString());
+  }
+);
+
+// 加载保存的配置
+onMounted(() => {
+  const savedConfig = localStorage.getItem('music-full-config');
+  if (savedConfig) {
+    config.value = { ...config.value, ...JSON.parse(savedConfig) };
+  }
+  if (lrcSider.value?.$el) {
+    lrcSider.value.$el.addEventListener('scroll', handleScroll);
+  }
+});
+
 defineExpose({
-  lrcScroll
+  lrcScroll,
+  config
 });
 </script>

@@ -281,7 +508,7 @@ defineExpose({
 }

 #drawer-target {
-  @apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full pb-8;
+  @apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full py-8;
  animation-duration: 300ms;

  .music-img {
@@ -289,12 +516,23 @@ defineExpose({
    max-width: 360px;
    max-height: 360px;
    .img {
-      @apply rounded-xl w-full h-full  shadow-2xl;
+      @apply rounded-xl w-full h-full shadow-2xl;
    }
  }

  .music-content {
    @apply flex flex-col justify-center items-center relative;
+    width: 500px;
+
+    &.center {
+      @apply w-full;
+      .music-lrc {
+        @apply w-full max-w-3xl mx-auto;
+      }
+      .music-lrc-text {
+        @apply text-center;
+      }
+    }

    &-name {
      @apply font-bold text-2xl pb-1 pt-4;
@@ -309,15 +547,46 @@ defineExpose({
    display: none;
    @apply flex justify-center items-center;
  }
+
+  .music-lrc-container {
+    padding-top: 30vh;
+  }
+
  .music-lrc {
    background-color: inherit;
    width: 500px;
    height: 550px;
+    position: relative;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black 10%,
+      black 90%,
+      transparent 100%
+    );
+
+    .music-info-header {
+      @apply mb-8;
+
+      .music-info-name {
+        @apply text-4xl font-bold mb-2;
+        color: var(--text-color-active);
+      }
+
+      .music-info-singer {
+        @apply text-base;
+        color: var(--text-color-primary);
+      }
+    }
+
    &-text {
      @apply text-2xl cursor-pointer font-bold px-2 py-4;
      transition: all 0.3s ease;
      background-color: transparent;
+      font-size: var(--lyric-font-size, 22px) !important;
+      letter-spacing: var(--lyric-letter-spacing, 0) !important;
+      line-height: var(--lyric-line-height, 2) !important;

      span {
        background-clip: text !important;
@@ -370,4 +639,57 @@ defineExpose({
 .music-drawer {
  transition: none; // 移除之前的过渡效果，现在使用 JS 动画
 }
+
+// 添加全局字体样式
+:root {
+  --current-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+}
+
+#drawer-target {
+  @apply top-0 left-0 absolute overflow-hidden rounded px-24 flex items-center justify-center w-full h-full py-8;
+  animation-duration: 300ms;
+
+  .music-lrc-text {
+    font-family: var(--current-font-family);
+  }
+}
+
+.close-btn {
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.control-btn {
+  @apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300;
+  background: rgba(142, 142, 142, 0.192);
+  backdrop-filter: blur(12px);
+
+  i {
+    @apply text-xl;
+    color: var(--text-color-active);
+  }
+
+  &.pure-mode {
+    background: transparent;
+    backdrop-filter: none;
+
+    &:not(:hover) {
+      i {
+        opacity: 0;
+      }
+    }
+  }
+
+  &:hover {
+    background: rgba(126, 121, 121, 0.2);
+    i {
+      opacity: 1;
+    }
+  }
+}
 </style>
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/layout/components/PlayBar.vue
@@ -1,9 +1,13 @@
 <template>
  <div
    class="music-play-bar"
-    :class="
-      setAnimationClass('animate__bounceInUp') + ' ' + (musicFullVisible ? 'play-bar-opcity' : '')
-    "
+    :class="[
+      setAnimationClass('animate__bounceInUp'),
+      musicFullVisible ? 'play-bar-opcity' : '',
+      musicFullVisible && MusicFullRef?.config?.hidePlayBar
+        ? 'animate__animated animate__slideOutDown'
+        : ''
+    ]"
    :style="{
      color: musicFullVisible
        ? textColors.theme === 'dark'
@@ -25,7 +29,7 @@
    </div>
    <div class="play-bar-img-wrapper" @click="setMusicFull">
      <n-image
-        :src="getImgUrl(playMusic?.picUrl, '500y500')"
+        :src="getImgUrl(playMusic?.picUrl, '100y100')"
        class="play-bar-img"
        lazy
        preview-disabled
@@ -164,6 +168,7 @@ import {
  sound,
  textColors
 } from '@/hooks/MusicHook';
+import { audioService } from '@/services/audioService';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
 import { showShortcutToast } from '@/utils/shortcutToast';
@@ -282,16 +287,19 @@ const MusicFullRef = ref<any>(null);

 // 播放暂停按钮事件
 const playMusicEvent = async () => {
-  if (play.value) {
-    if (sound.value) {
-      sound.value.pause();
+  try {
+    if (play.value) {
+      audioService.pause();
+      store.commit('setPlayMusic', false);
+    } else {
+      audioService.play();
+      store.commit('setPlayMusic', true);
    }
-    store.commit('setPlayMusic', false);
-  } else {
-    if (sound.value) {
-      sound.value.play();
+  } catch (error) {
+    console.log('error', error);
+    if (play.value) {
+      store.commit('nextPlay');
    }
-    store.commit('setPlayMusic', true);
  }
 };

@@ -382,6 +390,16 @@ if (isElectron) {
    }
  });
 }
+
+// 监听播放栏显示状态
+watch(
+  () => MusicFullRef.value?.config?.hidePlayBar,
+  (newVal) => {
+    if (newVal && musicFullVisible.value) {
+      // 使用 animate.css 动画，不需要手动设置样式
+    }
+  }
+);
 </script>

 <style lang="scss" scoped>
@@ -395,6 +413,16 @@ if (isElectron) {
  z-index: 9999;
  animation-duration: 0.5s !important;

+  &.play-bar-opcity {
+    @apply bg-transparent !important;
+    box-shadow: 0 0 20px 5px #0000001d;
+  }
+
+  &.animate__slideOutDown {
+    animation-duration: 0.3s !important;
+    pointer-events: none;
+  }
+
  .music-content {
    width: 160px;
    @apply ml-4;
@@ -409,11 +437,6 @@ if (isElectron) {
  }
 }

-.play-bar-opcity {
-  @apply bg-transparent !important;
-  box-shadow: 0 0 20px 5px #0000001d;
-}
-
 .play-bar-img {
  @apply w-14 h-14 rounded-2xl;
 }
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -121,20 +121,24 @@ class AudioService {
  }

  // 播放控制相关
-  play(url: string, track: SongResult): Promise<Howl> {
+  play(url?: string, track?: SongResult): Promise<Howl> {
+    if (this.currentSound && !url && !track) {
+      this.currentSound.play();
+      return Promise.resolve(this.currentSound as Howl);
+    }
    return new Promise((resolve, reject) => {
      let retryCount = 0;
-      const maxRetries = 3;
+      const maxRetries = 1;

      const tryPlay = () => {
        if (this.currentSound) {
          this.currentSound.unload();
        }
        this.currentSound = null;
-        this.currentTrack = track;
+        this.currentTrack = track as SongResult;

        this.currentSound = new Howl({
-          src: [url],
+          src: [url as string],
          html5: true,
          autoplay: true,
          volume: localStorage.getItem('volume')
@@ -163,7 +167,7 @@ class AudioService {
        });

        // 更新媒体会话元数据
-        this.updateMediaSessionMetadata(track);
+        this.updateMediaSessionMetadata(track as SongResult);

        // 设置音频事件监听
        this.currentSound.on('play', () => {
@@ -230,6 +234,13 @@ class AudioService {
    }
  }

+  pause() {
+    if (this.currentSound) {
+      this.currentSound.pause();
+    }
+  }
+  
+
  clearAllListeners() {
    this.callbacks = {};
  }
--- a/src/renderer/store/index.ts
+++ b/src/renderer/store/index.ts
@@ -37,6 +37,7 @@ export interface State {
  showUpdateModal: boolean;
  showArtistDrawer: boolean;
  currentArtistId: number | null;
+  systemFonts: { label: string; value: string }[];
 }

 const state: State = {
@@ -59,7 +60,8 @@ const state: State = {
  musicFull: false,
  showUpdateModal: false,
  showArtistDrawer: false,
-  currentArtistId: null
+  currentArtistId: null,
+  systemFonts: [{ label: '系统默认', value: 'system-ui' }]
 };

 const { handlePlayMusic, nextPlay, prevPlay } = useMusicListHook();
@@ -160,6 +162,15 @@ const mutations = {
  },
  setCurrentArtistId(state, id: number) {
    state.currentArtistId = id;
+  },
+  setSystemFonts(state, fonts: string[]) {
+    state.systemFonts = [
+      { label: '系统默认', value: 'system-ui' },
+      ...fonts.map((font) => ({
+        label: font,
+        value: font
+      }))
+    ];
  }
 };

@@ -167,7 +178,10 @@ const actions = {
  initializeSettings({ commit }: { commit: any }) {
    if (isElectron) {
      const setData = window.electron.ipcRenderer.sendSync('get-store-value', 'set');
-      commit('setSetData', setData || defaultSettings);
+      commit('setSetData', {
+        ...defaultSettings,
+        ...setData
+      });
    } else {
      const savedSettings = localStorage.getItem('appSettings');
      if (savedSettings) {
@@ -213,6 +227,17 @@ const actions = {
  },
  showArtist({ commit }, id: number) {
    commit('setCurrentArtistId', id);
+  },
+  async initializeSystemFonts({ commit, state }) {
+    // 如果已经有字体列表（不只是默认字体），则不重复获取
+    if (state.systemFonts.length > 1) return;
+
+    try {
+      const fonts = await window.api.invoke('get-system-fonts');
+      commit('setSystemFonts', fonts);
+    } catch (error) {
+      console.error('获取系统字体失败:', error);
+    }
  }
 };

--- a/src/renderer/utils/linearColor.ts
+++ b/src/renderer/utils/linearColor.ts
@@ -1,8 +1,17 @@
+import { useDebounceFn } from '@vueuse/core';
+import tinycolor from 'tinycolor2';
+
 interface IColor {
  backgroundColor: string;
  primaryColor: string;
 }

+interface ITextColors {
+  primary: string;
+  active: string;
+  theme: string;
+}
+
 export const getImageLinearBackground = async (imageSrc: string): Promise<IColor> => {
  try {
    const primaryColor = await getImagePrimaryColor(imageSrc);
@@ -96,126 +105,43 @@ const getAverageColor = (data: Uint8ClampedArray): number[] => {
 };

 const generateGradientBackground = (color: string): string => {
-  const [r, g, b] = color.match(/\d+/g)?.map(Number) || [0, 0, 0];
-  const [h, s, l] = rgbToHsl(r, g, b);
+  const tc = tinycolor(color);
+  const hsl = tc.toHsl();

  // 增加亮度和暗度的差异
-  const lightL = Math.min(l + 0.2, 0.95);
-  const darkL = Math.max(l - 0.3, 0.05);
-  const midL = (lightL + darkL) / 2;
+  const lightColor = tinycolor({ h: hsl.h, s: hsl.s * 0.8, l: Math.min(hsl.l + 0.2, 0.95) });
+  const midColor = tinycolor({ h: hsl.h, s: hsl.s, l: hsl.l });
+  const darkColor = tinycolor({
+    h: hsl.h,
+    s: Math.min(hsl.s * 1.2, 1),
+    l: Math.max(hsl.l - 0.3, 0.05)
+  });

-  // 调整饱和度以增强效果
-  const lightS = Math.min(s * 0.8, 1);
-  const darkS = Math.min(s * 1.2, 1);
-
-  const [lightR, lightG, lightB] = hslToRgb(h, lightS, lightL);
-  const [midR, midG, midB] = hslToRgb(h, s, midL);
-  const [darkR, darkG, darkB] = hslToRgb(h, darkS, darkL);
-
-  const lightColor = `rgb(${lightR}, ${lightG}, ${lightB})`;
-  const midColor = `rgb(${midR}, ${midG}, ${midB})`;
-  const darkColor = `rgb(${darkR}, ${darkG}, ${darkB})`;
-
-  // 使用三个颜色点创建更丰富的渐变
-  return `linear-gradient(to bottom, ${lightColor} 0%, ${midColor} 50%, ${darkColor} 100%)`;
-};
-
-// Helper functions (unchanged)
-function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
-  r /= 255;
-  g /= 255;
-  b /= 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  let h = 0;
-  let s;
-  const l = (max + min) / 2;
-
-  if (max === min) {
-    h = s = 0;
-  } else {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / d + 2;
-        break;
-      case b:
-        h = (r - g) / d + 4;
-        break;
-      default:
-        break;
-    }
-    h /= 6;
-  }
-
-  return [h, s, l];
-}
-
-function hslToRgb(h: number, s: number, l: number): [number, number, number] {
-  let r;
-  let g;
-  let b;
-
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    const hue2rgb = (p: number, q: number, t: number) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    };
-
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
-  }
-
-  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
-}
-
-// 添加新的接口
-interface ITextColors {
-  primary: string;
-  active: string;
-  theme: string;
-}
-
-// 添加新的函数
-export const calculateBrightness = (r: number, g: number, b: number): number => {
-  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return `linear-gradient(to bottom, ${lightColor.toRgbString()} 0%, ${midColor.toRgbString()} 50%, ${darkColor.toRgbString()} 100%)`;
 };

 export const parseGradient = (gradientStr: string) => {
-  const matches = gradientStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g);
-  if (!matches) return [];
-  return matches.map((rgb) => {
-    const [r, g, b] = rgb.match(/\d+/g)!.map(Number);
-    return { r, g, b };
+  if (!gradientStr) return [];
+
+  // 处理非渐变色
+  if (!gradientStr.startsWith('linear-gradient')) {
+    const color = tinycolor(gradientStr);
+    if (color.isValid()) {
+      const rgb = color.toRgb();
+      return [{ r: rgb.r, g: rgb.g, b: rgb.b }];
+    }
+    return [];
+  }
+
+  // 处理渐变色，支持 rgb、rgba 和十六进制颜色
+  const colorMatches = gradientStr.match(/(?:(?:rgb|rgba)\([^)]+\)|#[0-9a-fA-F]{3,8})/g) || [];
+  return colorMatches.map((color) => {
+    const tc = tinycolor(color);
+    const rgb = tc.toRgb();
+    return { r: rgb.r, g: rgb.g, b: rgb.b };
  });
 };

-export const interpolateRGB = (start: number, end: number, progress: number) => {
-  return Math.round(start + (end - start) * progress);
-};
-
-export const createGradientString = (
-  colors: { r: number; g: number; b: number }[],
-  percentages = [0, 50, 100]
-) => {
-  return `linear-gradient(to bottom, ${colors
-    .map((color, i) => `rgb(${color.r}, ${color.g}, ${color.b}) ${percentages[i]}%`)
-    .join(', ')})`;
-};
-
 export const getTextColors = (gradient: string = ''): ITextColors => {
  const defaultColors = {
    primary: 'rgba(255, 255, 255, 0.54)',
@@ -226,11 +152,12 @@ export const getTextColors = (gradient: string = ''): ITextColors => {
  if (!gradient) return defaultColors;

  const colors = parseGradient(gradient);
+  console.log('colors', colors);
  if (!colors.length) return defaultColors;

-  const mainColor = colors[1] || colors[0];
-  const brightness = calculateBrightness(mainColor.r, mainColor.g, mainColor.b);
-  const isDark = brightness > 0.6;
+  const mainColor = colors.length === 1 ? colors[0] : colors[1] || colors[0];
+  const tc = tinycolor(mainColor);
+  const isDark = tc.getBrightness() > 155; // tinycolor 的亮度范围是 0-255

  return {
    primary: isDark ? 'rgba(0, 0, 0, 0.54)' : 'rgba(255, 255, 255, 0.54)',
@@ -243,35 +170,130 @@ export const getHoverBackgroundColor = (isDark: boolean): string => {
  return isDark ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.08)';
 };

-export const animateGradient = (
-  oldGradient: string,
-  newGradient: string,
-  onUpdate: (gradient: string) => void,
-  duration = 1000
-) => {
-  const startColors = parseGradient(oldGradient);
-  const endColors = parseGradient(newGradient);
-  if (startColors.length !== endColors.length) return null;
+export const animateGradient = (() => {
+  let currentAnimation: number | null = null;
+  let isAnimating = false;
+  let lastProgress = 0;

-  const startTime = performance.now();
-
-  const animate = (currentTime: number) => {
-    const elapsed = currentTime - startTime;
-    const progress = Math.min(elapsed / duration, 1);
-
-    const currentColors = startColors.map((startColor, i) => ({
-      r: interpolateRGB(startColor.r, endColors[i].r, progress),
-      g: interpolateRGB(startColor.g, endColors[i].g, progress),
-      b: interpolateRGB(startColor.b, endColors[i].b, progress)
-    }));
-
-    onUpdate(createGradientString(currentColors));
-
-    if (progress < 1) {
-      return requestAnimationFrame(animate);
-    }
-    return null;
+  const validateColors = (colors: ReturnType<typeof parseGradient>) => {
+    return colors.every(
+      (color) =>
+        typeof color.r === 'number' &&
+        typeof color.g === 'number' &&
+        typeof color.b === 'number' &&
+        !Number.isNaN(color.r) &&
+        !Number.isNaN(color.g) &&
+        !Number.isNaN(color.b)
+    );
  };

-  return requestAnimationFrame(animate);
+  const easeInOutCubic = (x: number): number => {
+    return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
+  };
+
+  const animate = (
+    oldGradient: string,
+    newGradient: string,
+    onUpdate: (gradient: string) => void,
+    duration = 300
+  ) => {
+    // 如果新旧渐变色相同，不执行动画
+    if (oldGradient === newGradient) {
+      return null;
+    }
+
+    // 如果正在动画中，取消当前动画
+    if (currentAnimation !== null) {
+      cancelAnimationFrame(currentAnimation);
+      currentAnimation = null;
+    }
+
+    // 解析颜色
+    const startColors = parseGradient(oldGradient);
+    const endColors = parseGradient(newGradient);
+
+    // 验证颜色数组
+    if (
+      !startColors.length ||
+      !endColors.length ||
+      !validateColors(startColors) ||
+      !validateColors(endColors)
+    ) {
+      console.warn('Invalid color values detected');
+      onUpdate(newGradient); // 直接更新到目标颜色
+      return null;
+    }
+
+    // 如果颜色数量不匹配，直接更新到目标颜色
+    if (startColors.length !== endColors.length) {
+      onUpdate(newGradient);
+      return null;
+    }
+
+    isAnimating = true;
+    const startTime = performance.now();
+
+    const animateFrame = (currentTime: number) => {
+      if (!isAnimating) return null;
+
+      const elapsed = currentTime - startTime;
+      const rawProgress = Math.min(elapsed / duration, 1);
+      // 使用缓动函数使动画更平滑
+      const progress = easeInOutCubic(rawProgress);
+
+      try {
+        // 使用上一帧的进度来平滑过渡
+        const effectiveProgress = lastProgress + (progress - lastProgress) * 0.6;
+        lastProgress = effectiveProgress;
+
+        const currentColors = startColors.map((startColor, i) => {
+          const start = tinycolor(startColor);
+          const end = tinycolor(endColors[i]);
+          return tinycolor.mix(start, end, effectiveProgress * 100);
+        });
+
+        const gradientString = createGradientString(
+          currentColors.map((c) => {
+            const rgb = c.toRgb();
+            return { r: rgb.r, g: rgb.g, b: rgb.b };
+          })
+        );
+
+        onUpdate(gradientString);
+
+        if (rawProgress < 1) {
+          currentAnimation = requestAnimationFrame(animateFrame);
+          return currentAnimation;
+        }
+        // 确保最终颜色正确
+        onUpdate(newGradient);
+        isAnimating = false;
+        currentAnimation = null;
+        lastProgress = 0;
+        return null;
+      } catch (error) {
+        console.error('Animation error:', error);
+        onUpdate(newGradient);
+        isAnimating = false;
+        currentAnimation = null;
+        lastProgress = 0;
+        return null;
+      }
+    };
+
+    currentAnimation = requestAnimationFrame(animateFrame);
+    return currentAnimation;
+  };
+
+  // 使用更短的防抖时间
+  return useDebounceFn(animate, 50);
+})();
+
+export const createGradientString = (
+  colors: { r: number; g: number; b: number }[],
+  percentages = [0, 50, 100]
+) => {
+  return `linear-gradient(to bottom, ${colors
+    .map((color, i) => `rgb(${color.r}, ${color.g}, ${color.b}) ${percentages[i]}%`)
+    .join(', ')})`;
 };
--- a/src/renderer/views/set/index.vue
+++ b/src/renderer/views/set/index.vue
@@ -31,6 +31,51 @@
              </n-switch>
            </div>

+            <div class="set-item">
+              <div>
+                <div class="set-item-title">字体设置</div>
+                <div class="set-item-content">选择字体，优先使用排在前面的字体</div>
+              </div>
+              <div class="flex gap-2">
+                <n-radio-group v-model:value="setData.fontScope" class="mt-2">
+                  <n-radio key="global" value="global">全局</n-radio>
+                  <n-radio key="lyric" value="lyric">仅歌词</n-radio>
+                </n-radio-group>
+                <n-select
+                  v-model:value="selectedFonts"
+                  :options="systemFonts"
+                  filterable
+                  multiple
+                  placeholder="选择字体"
+                  style="width: 300px"
+                  :render-label="renderFontLabel"
+                >
+                </n-select>
+              </div>
+            </div>
+
+            <div v-if="selectedFonts.length > 0" class="font-preview-container">
+              <div class="font-preview-title">字体预览</div>
+              <div class="font-preview" :style="{ fontFamily: setData.fontFamily }">
+                <div class="preview-item">
+                  <div class="preview-label">中文</div>
+                  <div class="preview-text">静夜思 床前明月光 疑是地上霜</div>
+                </div>
+                <div class="preview-item">
+                  <div class="preview-label">English</div>
+                  <div class="preview-text">The quick brown fox jumps over the lazy dog</div>
+                </div>
+                <div class="preview-item">
+                  <div class="preview-label">日本語</div>
+                  <div class="preview-text">あいうえお かきくけこ さしすせそ</div>
+                </div>
+                <div class="preview-item">
+                  <div class="preview-label">한국어</div>
+                  <div class="preview-text">가나다라마 바사아자차 카타파하</div>
+                </div>
+              </div>
+            </div>
+
            <div class="set-item">
              <div>
                <div class="set-item-title">动画速度</div>
@@ -366,7 +411,7 @@
 <script setup lang="ts">
 import type { FormRules } from 'naive-ui';
 import { useMessage } from 'naive-ui';
-import { computed, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, h, nextTick, onMounted, ref, watch } from 'vue';
 import { useStore } from 'vuex';

 import localData from '@/../main/set.json';
@@ -510,8 +555,55 @@ const proxyRules: FormRules = {
  }
 };

-// 初始化时从store获取代理配置
-onMounted(() => {
+// 使用 store 中的字体列表
+const systemFonts = computed(() => store.state.systemFonts);
+
+// 已选择的字体列表
+const selectedFonts = ref<string[]>([]);
+
+// 自定义渲染函数
+const renderFontLabel = (option: { label: string; value: string }) => {
+  return h('span', { style: { fontFamily: option.value } }, option.label);
+};
+
+// 监听字体选择变化
+watch(
+  selectedFonts,
+  (newFonts) => {
+    // 如果没有选择任何字体，使用系统默认字体
+    if (newFonts.length === 0) {
+      store.commit('setSetData', {
+        ...setData.value,
+        fontFamily: 'system-ui'
+      });
+      return;
+    }
+    // 将选择的字体组合成字体列表
+    store.commit('setSetData', {
+      ...setData.value,
+      fontFamily: newFonts.join(',')
+    });
+  },
+  { deep: true }
+);
+
+// 初始化已选择的字体
+watch(
+  () => setData.value.fontFamily,
+  (newFont) => {
+    if (newFont) {
+      if (newFont === 'system-ui') {
+        selectedFonts.value = [];
+      } else {
+        selectedFonts.value = newFont.split(',');
+      }
+    }
+  },
+  { immediate: true }
+);
+
+// 初始化时从store获取配置
+onMounted(async () => {
  checkForUpdates();
  if (setData.value.proxyConfig) {
    proxyForm.value = { ...setData.value.proxyConfig };
@@ -734,8 +826,9 @@ const scrollToSection = async (sectionId: string) => {
 };

 // 处理滚动，更新当前激活的分类
-const handleScroll = () => {
-  const scrollTop = scrollbarRef.value?.containerRef.scrollTop;
+const handleScroll = (e: any) => {
+  const { scrollTop } = e.target;
+
  const sections = [
    { id: 'basic', ref: basicRef },
    { id: 'playback', ref: playbackRef },
@@ -746,18 +839,30 @@ const handleScroll = () => {
    { id: 'donation', ref: donationRef }
  ];

+  const activeSection = sections[0].id;
+  let lastValidSection = activeSection;
+
  for (const section of sections) {
    if (section.ref?.value) {
      const { offsetTop } = section.ref.value;
-      const offsetBottom = offsetTop + section.ref.value.offsetHeight;
-
-      if (scrollTop >= offsetTop - 100 && scrollTop < offsetBottom) {
-        currentSection.value = section.id;
-        break;
+      if (scrollTop >= offsetTop - 100) {
+        lastValidSection = section.id;
      }
    }
  }
+
+  if (lastValidSection !== currentSection.value) {
+    currentSection.value = lastValidSection;
+  }
 };
+
+// 初始化时设置当前激活的分类
+onMounted(() => {
+  // 延迟一帧等待 DOM 完全渲染
+  nextTick(() => {
+    handleScroll({ target: { scrollTop: 0 } });
+  });
+});
 </script>

 <style lang="scss" scoped>
@@ -830,4 +935,34 @@ const handleScroll = () => {
    @apply text-green-500 bg-green-50 dark:bg-green-900;
  }
 }
+
+.font-preview-container {
+  @apply mt-4 p-4 rounded-lg;
+  @apply bg-gray-50 dark:bg-dark-100;
+  @apply border border-gray-200 dark:border-gray-700;
+
+  .font-preview-title {
+    @apply text-sm font-medium mb-3;
+    @apply text-gray-600 dark:text-gray-300;
+  }
+
+  .font-preview {
+    @apply space-y-3;
+
+    .preview-item {
+      @apply flex flex-col gap-1;
+
+      .preview-label {
+        @apply text-xs text-gray-500 dark:text-gray-400;
+      }
+
+      .preview-text {
+        @apply text-base text-gray-900 dark:text-gray-100;
+        @apply p-2 rounded;
+        @apply bg-white dark:bg-dark;
+        @apply border border-gray-200 dark:border-gray-700;
+      }
+    }
+  }
+}
 </style>
Author	SHA1	Message	Date
alger	1f0f35dd51	🌈 style: v3.8.0	2025-01-18 03:26:14 +08:00
alger	be94d6ff8e	✨ feat: 添加歌词界面样式配置功能	2025-01-18 03:25:21 +08:00
alger	1bdb8fcb4a	✨ feat: 添加字体配置功能可配置歌词页面或全局字体	2025-01-17 22:45:59 +08:00
alger	914e043502	✨ feat: 去除歌曲缓存优化播放下一首	2025-01-17 22:35:42 +08:00
alger	dfa175b8b2	✨ feat: 应用单例模式	2025-01-17 22:35:33 +08:00
alger	a94e0efba5	✨ feat: 优化播放	2025-01-17 22:34:49 +08:00