feat: 搜索联想 fix: 网易云歌单导入数量限制1000的问题

2. 歌曲下载 选择音质
3. 歌单 头部自动压缩

.github/workflows/deploydocs.yml

@@ -1,66 +0,0 @@
-# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
-#
-name: Deploy VitePress site to Pages
-
-on:
-  # 在针对 `main` 分支的推送上运行。如果你
-  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
-  push:
-    branches: [main]
-
-  # 允许你从 Actions 选项卡手动运行此工作流程
-  workflow_dispatch:
-
-# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
-# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
-concurrency:
-  group: pages
-  cancel-in-progress: false
-
-jobs:
-  # 构建工作
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0 # 如果未启用 lastUpdated，则不需要
-      - uses: pnpm/action-setup@v3 # 如果使用 pnpm，请取消此区域注释
-        with:
-          version: 9
-      # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: pnpm # 或 pnpm / yarn
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      - name: Install dependencies
-        run: pnpm add -D vitepress@next # 或 pnpm install / yarn install / bun install
-      - name: Build with VitePress
-        run: pnpm run docs:build # 或 pnpm docs:build / yarn docs:build / bun run docs:build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: docs/.vitepress/dist
-
-  # 部署工作
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
-    runs-on: ubuntu-latest
-    name: Deploy
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

.github/workflows/main.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Build Electron App for macos
         if: matrix.os == 'macos-latest' # 只在macOS上运行
         run: |
-          yarn run build:mac
+          yarn run build:mac:universal
 
       - name: Build Electron App for linux
         if: matrix.os == 'ubuntu-latest' # 只在Linux上运行
@@ -70,146 +70,4 @@ jobs:
         uses: softprops/action-gh-release@v1
         with:
           files: 'dist/**' # 将dist目录下所有文件添加到release
-
-  # 新增：自动同步到 WebDAV
-  sync-to-webdav:
-    name: Sync to WebDAV
-    needs: release # 等待 release 任务完成
-    runs-on: ubuntu-latest
-    if: startsWith(github.ref, 'refs/tags/v') # 只在标签推送时执行
-    steps:
-      - name: Wait for release to be ready
-        run: |
-          echo "等待 Release 准备就绪..."
-          sleep 30 # 等待30秒确保 release 完全创建
-
-      - name: Install dependencies
-        run: |
-          sudo apt-get update
-          sudo apt-get install -y curl jq
-
-      - name: Get latest release info
-        id: get-release
-        run: |
-          # 获取当前标签对应的 release 信息
-          TAG_NAME=${GITHUB_REF#refs/tags/}
-          echo "tag_name=$TAG_NAME" >> $GITHUB_OUTPUT
-
-          # 获取 release 详细信息
-          response=$(curl -s \
-            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-            -H "Accept: application/vnd.github.v3+json" \
-            "https://api.github.com/repos/${{ github.repository }}/releases/tags/$TAG_NAME")
-
-          release_id=$(echo "$response" | jq -r '.id')
-          echo "release_id=$release_id" >> $GITHUB_OUTPUT
-          echo "找到 Release ID: $release_id"
-
-      - name: Sync release to WebDAV
-        run: |
-          TAG_NAME="${{ steps.get-release.outputs.tag_name }}"
-          RELEASE_ID="${{ steps.get-release.outputs.release_id }}"
-
-          echo "🚀 开始同步版本 $TAG_NAME 到 WebDAV..."
-          echo "Release ID: $RELEASE_ID"
-          echo "WebDAV 根路径: ${{ secrets.WEBDAV_BASE_URL }}/yd/ceru"
-
-          # 获取该release的所有资源文件
-          assets_json=$(curl -s \
-            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-            -H "Accept: application/vnd.github.v3+json" \
-            "https://api.github.com/repos/${{ github.repository }}/releases/$RELEASE_ID/assets")
-
-          assets_count=$(echo "$assets_json" | jq '. | length')
-          echo "找到 $assets_count 个资源文件"
-
-          if [ "$assets_count" -eq 0 ]; then
-            echo "⚠️  该版本没有资源文件，跳过同步"
-            exit 0
-          fi
-
-          # 先创建版本目录
-          dir_path="/yd/ceru/$TAG_NAME"
-          dir_url="${{ secrets.WEBDAV_BASE_URL }}$dir_path"
-
-          echo "创建版本目录: $dir_path"
-          curl -s -X MKCOL \
-            -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
-            "$dir_url" || echo "目录可能已存在"
-
-          # 处理每个asset
-          success_count=0
-          failed_count=0
-
-          for i in $(seq 0 $(($assets_count - 1))); do
-            asset=$(echo "$assets_json" | jq -c ".[$i]")
-            asset_name=$(echo "$asset" | jq -r '.name')
-            asset_url=$(echo "$asset" | jq -r '.url')
-            asset_size=$(echo "$asset" | jq -r '.size')
-            
-            echo "📦 处理资源: $asset_name (大小: $asset_size bytes)"
-
-            # 下载资源文件
-            safe_filename="./temp_${TAG_NAME}_$(date +%s)_$i"
-            
-            if ! curl -sL -o "$safe_filename" \
-              -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
-              -H "Accept: application/octet-stream" \
-              "$asset_url"; then
-              echo "❌ 下载失败: $asset_name"
-              failed_count=$((failed_count + 1))
-              continue
-            fi
-            
-            if [ -f "$safe_filename" ]; then
-              actual_size=$(wc -c < "$safe_filename")
-              if [ "$actual_size" -ne "$asset_size" ]; then
-                echo "❌ 文件大小不匹配: $asset_name (期望: $asset_size, 实际: $actual_size)"
-                rm -f "$safe_filename"
-                failed_count=$((failed_count + 1))
-                continue
-              fi
-
-              echo "⬆️  上传到 WebDAV: $asset_name"
-              
-              # 构建远程路径
-              remote_path="/yd/ceru/$TAG_NAME/$asset_name"
-              full_url="${{ secrets.WEBDAV_BASE_URL }}$remote_path"
-              
-              # 使用 WebDAV PUT 方法上传文件
-              if curl -s -f -X PUT \
-                -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
-                -T "$safe_filename" \
-                "$full_url"; then
-                
-                echo "✅ 上传成功: $asset_name"
-                success_count=$((success_count + 1))
-                
-              else
-                echo "❌ 上传失败: $asset_name"
-                failed_count=$((failed_count + 1))
-              fi
-              
-              # 清理临时文件
-              rm -f "$safe_filename"
-              echo "----------------------------------------"
-            else
-              echo "❌ 临时文件不存在: $safe_filename"
-              failed_count=$((failed_count + 1))
-            fi
-          done
-
-          echo "========================================"
-          echo "🎉 同步完成！"
-          echo "成功: $success_count 个文件"
-          echo "失败: $failed_count 个文件"
-          echo "总计: $assets_count 个文件"
-
-      - name: Notify completion
-        if: always()
-        run: |
-          if [ "${{ job.status }}" == "success" ]; then
-            echo "✅ 版本 ${{ steps.get-release.outputs.tag_name }} 已成功同步到 alist"
-          else
-            echo "❌ 版本 ${{ steps.get-release.outputs.tag_name }} 同步失败"
-          fi
+          body: ${{ github.event.head_commit.message }} # 自动将commit message写入release描述

.gitignore

@@ -18,3 +18,4 @@ temp/log.txt
 /.idea/
 docs/.vitepress/dist
 docs/.vitepress/cache
+yarn.lock

.workflow/main copy.yml

@@ -0,0 +1,215 @@
+name: AutoBuild # 工作流的名称
+
+permissions:
+  contents: write # 给予写入仓库内容的权限
+
+on:
+  push:
+    tags:
+      - 'v*' # 当推送以v开头的标签时触发此工作流
+  workflow_dispatch:
+
+jobs:
+  release:
+    name: build and release electron app # 任务名称
+    runs-on: ${{ matrix.os }} # 在matrix.os定义的操作系统上运行
+    strategy:
+      fail-fast: false # 如果一个任务失败,其他任务继续运行
+      matrix:
+        os: [windows-latest, macos-latest, ubuntu-latest] # 在Windows和macOS上运行任务
+
+    steps:
+      - name: Check out git repository
+        uses: actions/checkout@v4 # 检出代码仓库
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22 # 安装Node.js 22 （这里node环境是能够运行代码的环境）
+
+      - name: Install Dependencies
+        run: |
+          npm i -g yarn
+          yarn install  # 安装项目依赖
+
+      - name: Build Electron App for windows
+        if: matrix.os == 'windows-latest' # 只在Windows上运行
+        run: yarn run build:win # 构建Windows版应用
+
+      - name: Build Electron App for macos
+        if: matrix.os == 'macos-latest' # 只在macOS上运行
+        run: |
+          yarn run build:mac
+
+      - name: Build Electron App for linux
+        if: matrix.os == 'ubuntu-latest' # 只在Linux上运行
+        run: yarn run build:linux # 构建Linux版应用
+
+      - name: Cleanup Artifacts for Windows
+        if: matrix.os == 'windows-latest'
+        run: |
+          npx del-cli "dist/*" "!dist/*.exe" "!dist/*.zip" "!dist/*.yml"  # 清理Windows构建产物,只保留特定文件
+
+      - name: Cleanup Artifacts for MacOS
+        if: matrix.os == 'macos-latest'
+        run: |
+          npx del-cli "dist/*" "!dist/(*.dmg|*.zip|latest*.yml)"  # 清理macOS构建产物,只保留特定文件
+
+      - name: Cleanup Artifacts for Linux
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          npx del-cli "dist/*" "!dist/(*.AppImage|*.deb|*.snap|latest*.yml)"  # 清理Linux构建产物,只保留特定文件
+
+      - name: upload artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: ${{ matrix.os }}
+          path: dist # 上传构建产物作为工作流artifact
+
+      - name: release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: 'dist/**' # 将dist目录下所有文件添加到release
+
+  # 新增：自动同步到 WebDAV
+  sync-to-webdav:
+    name: Sync to WebDAV
+    needs: release # 等待 release 任务完成
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/tags/v') # 只在标签推送时执行
+    steps:
+      - name: Wait for release to be ready
+        run: |
+          echo "等待 Release 准备就绪..."
+          sleep 30 # 等待30秒确保 release 完全创建
+
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y curl jq
+
+      - name: Get latest release info
+        id: get-release
+        run: |
+          # 获取当前标签对应的 release 信息
+          TAG_NAME=${GITHUB_REF#refs/tags/}
+          echo "tag_name=$TAG_NAME" >> $GITHUB_OUTPUT
+
+          # 获取 release 详细信息
+          response=$(curl -s \
+            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            -H "Accept: application/vnd.github.v3+json" \
+            "https://api.github.com/repos/${{ github.repository }}/releases/tags/$TAG_NAME")
+
+          release_id=$(echo "$response" | jq -r '.id')
+          echo "release_id=$release_id" >> $GITHUB_OUTPUT
+          echo "找到 Release ID: $release_id"
+
+      - name: Sync release to WebDAV
+        run: |
+          TAG_NAME="${{ steps.get-release.outputs.tag_name }}"
+          RELEASE_ID="${{ steps.get-release.outputs.release_id }}"
+
+          echo "🚀 开始同步版本 $TAG_NAME 到 WebDAV..."
+          echo "Release ID: $RELEASE_ID"
+          echo "WebDAV 根路径: ${{ secrets.WEBDAV_BASE_URL }}/yd/ceru"
+
+          # 获取该release的所有资源文件
+          assets_json=$(curl -s \
+            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            -H "Accept: application/vnd.github.v3+json" \
+            "https://api.github.com/repos/${{ github.repository }}/releases/$RELEASE_ID/assets")
+
+          assets_count=$(echo "$assets_json" | jq '. | length')
+          echo "找到 $assets_count 个资源文件"
+
+          if [ "$assets_count" -eq 0 ]; then
+            echo "⚠️  该版本没有资源文件，跳过同步"
+            exit 0
+          fi
+
+          # 先创建版本目录
+          dir_path="/yd/ceru/$TAG_NAME"
+          dir_url="${{ secrets.WEBDAV_BASE_URL }}$dir_path"
+
+          echo "创建版本目录: $dir_path"
+          curl -s -X MKCOL \
+            -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
+            "$dir_url" || echo "目录可能已存在"
+
+          # 处理每个asset
+          success_count=0
+          failed_count=0
+
+          for i in $(seq 0 $(($assets_count - 1))); do
+            asset=$(echo "$assets_json" | jq -c ".[$i]")
+            asset_name=$(echo "$asset" | jq -r '.name')
+            asset_url=$(echo "$asset" | jq -r '.url')
+            asset_size=$(echo "$asset" | jq -r '.size')
+            
+            echo "📦 处理资源: $asset_name (大小: $asset_size bytes)"
+
+            # 下载资源文件
+            safe_filename="./temp_${TAG_NAME}_$(date +%s)_$i"
+            
+            if ! curl -sL -o "$safe_filename" \
+              -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+              -H "Accept: application/octet-stream" \
+              "$asset_url"; then
+              echo "❌ 下载失败: $asset_name"
+              failed_count=$((failed_count + 1))
+              continue
+            fi
+            
+            if [ -f "$safe_filename" ]; then
+              actual_size=$(wc -c < "$safe_filename")
+              if [ "$actual_size" -ne "$asset_size" ]; then
+                echo "❌ 文件大小不匹配: $asset_name (期望: $asset_size, 实际: $actual_size)"
+                rm -f "$safe_filename"
+                failed_count=$((failed_count + 1))
+                continue
+              fi
+
+              echo "⬆️  上传到 WebDAV: $asset_name"
+              
+              # 构建远程路径
+              remote_path="/yd/ceru/$TAG_NAME/$asset_name"
+              full_url="${{ secrets.WEBDAV_BASE_URL }}$remote_path"
+              
+              # 使用 WebDAV PUT 方法上传文件
+              if curl -s -f -X PUT \
+                -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
+                -T "$safe_filename" \
+                "$full_url"; then
+                
+                echo "✅ 上传成功: $asset_name"
+                success_count=$((success_count + 1))
+                
+              else
+                echo "❌ 上传失败: $asset_name"
+                failed_count=$((failed_count + 1))
+              fi
+              
+              # 清理临时文件
+              rm -f "$safe_filename"
+              echo "----------------------------------------"
+            else
+              echo "❌ 临时文件不存在: $safe_filename"
+              failed_count=$((failed_count + 1))
+            fi
+          done
+
+          echo "========================================"
+          echo "🎉 同步完成！"
+          echo "成功: $success_count 个文件"
+          echo "失败: $failed_count 个文件"
+          echo "总计: $assets_count 个文件"
+
+      - name: Notify completion
+        if: always()
+        run: |
+          if [ "${{ job.status }}" == "success" ]; then
+            echo "✅ 版本 ${{ steps.get-release.outputs.tag_name }} 已成功同步到 alist"
+          else
+            echo "❌ 版本 ${{ steps.get-release.outputs.tag_name }} 同步失败"
+          fi

README.md

@@ -6,7 +6,15 @@
 
 Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工具，**仅提供插件运行框架与播放功能**，不直接存储、提供任何音乐源文件。用户需通过自行选择、安装合规插件获取音乐相关数据，项目旨在为开发者提供桌面应用技术实践与学习案例，为用户提供合规的音乐播放工具框架。
 
-<img src="assets/image-20250827175023917.png" alt="image-20250827175023917" style="zoom: 33%;" /><img src="assets/image-20250827175109430.png" alt="image-20250827175109430" style="zoom:33%;" />
+<img src="assets/image-20251003173109619.png" alt="image-20251003173109619" style="zoom:33%;" />
+
+![image-20251003173654569](assets/image-20251003173654569.png)
+
+
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=timeshiftsauce/CeruMusic&type=Date)](https://www.star-history.com/#timeshiftsauce/CeruMusic&Date)
 
 ## 技术栈
 
@@ -16,7 +24,201 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 - **Pinia**：状态管理工具
 - **Vite**：快速的前端构建工具
 - **CeruPlugins**：音乐插件运行环境（仅提供框架，不包含默认插件）
-- **AMLL**：音乐生态辅助模块（仅提供功能接口，不关联具体音乐数据源）
+- **AMLL**：音乐生态（歌词渲染等）辅助模块（仅提供功能接口，不关联具体音乐数据源）
+
+## 项目结构
+
+<details>
+  <summary>点击查看目录结构</summary>
+
+```ast
+CeruMuisc/
+    ├── .github/
+    ├── scripts/
+    ├── src/
+    │   ├── common/
+    │   │   ├── types/
+    │   │   │   ├── playList.ts
+    │   │   │   └── songList.ts
+    │   │   ├── utils/
+    │   │   │   ├── lyricUtils/
+    │   │   │   │   ├── kg.js
+    │   │   │   │   └── util.ts
+    │   │   │   ├── common.ts
+    │   │   │   ├── nodejs.ts
+    │   │   │   └── renderer.ts
+    │   │   └── index.ts
+    │   ├── main/
+    │   │   ├── events/
+    │   │   │   ├── ai.ts
+    │   │   │   ├── autoUpdate.ts
+    │   │   │   ├── directorySettings.ts
+    │   │   │   ├── musicCache.ts
+    │   │   │   ├── pluginNotice.ts
+    │   │   │   └── songList.ts
+    │   │   ├── services/
+    │   │   │   ├── music/
+    │   │   │   │   ├── index.ts
+    │   │   │   │   ├── net-ease-service.ts
+    │   │   │   │   └── service-base.ts
+    │   │   │   ├── musicCache/
+    │   │   │   │   └── index.ts
+    │   │   │   ├── musicSdk/
+    │   │   │   │   ├── index.ts
+    │   │   │   │   ├── service.ts
+    │   │   │   │   └── type.ts
+    │   │   │   ├── plugin/
+    │   │   │   │   ├── manager/
+    │   │   │   │   │   ├── CeruMusicPluginHost.ts
+    │   │   │   │   │   └── converter-event-driven.ts
+    │   │   │   │   ├── index.ts
+    │   │   │   │   └── logger.ts
+    │   │   │   ├── songList/
+    │   │   │   │   ├── ManageSongList.ts
+    │   │   │   │   └── PlayListSongs.ts
+    │   │   │   ├── ai-service.ts
+    │   │   │   └── ConfigManager.ts
+    │   │   ├── utils/
+    │   │   │   ├── musicSdk/
+    │   │   │   │   ├── api-source-info.ts
+    │   │   │   │   ├── index.js
+    │   │   │   │   ├── options.js
+    │   │   │   │   └── utils.js
+    │   │   │   ├── array.ts
+    │   │   │   ├── index.ts
+    │   │   │   ├── object.ts
+    │   │   │   ├── path.ts
+    │   │   │   ├── request.js
+    │   │   │   └── utils.ts
+    │   │   ├── autoUpdate.ts
+    │   │   └── index.ts
+    │   ├── preload/
+    │   │   ├── index.d.ts
+    │   │   └── index.ts
+    │   ├── renderer/
+    │   │   ├── public/
+    │   │   │   ├── default-cover.png
+    │   │   │   ├── head.jpg
+    │   │   │   ├── logo.svg
+    │   │   │   ├── star.png
+    │   │   │   └── wldss.png
+    │   │   ├── src/
+    │   │   │   ├── api/
+    │   │   │   │   └── songList.ts
+    │   │   │   ├── components/
+    │   │   │   │   ├── AI/
+    │   │   │   │   │   └── FloatBall.vue
+    │   │   │   │   ├── ContextMenu/
+    │   │   │   │   │   ├── composables.ts
+    │   │   │   │   │   ├── ContextMenu.vue
+    │   │   │   │   │   ├── demo.vue
+    │   │   │   │   │   ├── index.ts
+    │   │   │   │   │   ├── README.md
+    │   │   │   │   │   ├── types.ts
+    │   │   │   │   │   └── utils.ts
+    │   │   │   │   ├── layout/
+    │   │   │   │   │   └── HomeLayout.vue
+    │   │   │   │   ├── Music/
+    │   │   │   │   │   └── SongVirtualList.vue
+    │   │   │   │   ├── Play/
+    │   │   │   │   │   ├── AudioVisualizer.vue
+    │   │   │   │   │   ├── FullPlay.vue
+    │   │   │   │   │   ├── GlobalAudio.vue
+    │   │   │   │   │   ├── PlaylistActions.vue
+    │   │   │   │   │   ├── PlaylistDrawer.vue
+    │   │   │   │   │   ├── PlayMusic.vue
+    │   │   │   │   │   └── ShaderBackground.vue
+    │   │   │   │   ├── Settings/
+    │   │   │   │   │   ├── AIFloatBallSettings.vue
+    │   │   │   │   │   ├── DirectorySettings.vue
+    │   │   │   │   │   ├── MusicCache.vue
+    │   │   │   │   │   ├── PlaylistSettings.vue
+    │   │   │   │   │   ├── plugins.vue
+    │   │   │   │   │   └── UpdateSettings.vue
+    │   │   │   │   ├── PluginNoticeDialog.vue
+    │   │   │   │   ├── ThemeSelector.vue
+    │   │   │   │   ├── TitleBarControls.vue
+    │   │   │   │   ├── UpdateExample.vue
+    │   │   │   │   ├── UpdateProgress.vue
+    │   │   │   │   └── Versions.vue
+    │   │   │   ├── composables/
+    │   │   │   │   └── useAutoUpdate.ts
+    │   │   │   ├── router/
+    │   │   │   │   └── index.ts
+    │   │   │   ├── services/
+    │   │   │   │   ├── music/
+    │   │   │   │   │   ├── index.ts
+    │   │   │   │   │   └── service-base.ts
+    │   │   │   │   └── autoUpdateService.ts
+    │   │   │   ├── store/
+    │   │   │   │   ├── ControlAudio.ts
+    │   │   │   │   ├── LocalUserDetail.ts
+    │   │   │   │   ├── search.ts
+    │   │   │   │   └── Settings.ts
+    │   │   │   ├── types/
+    │   │   │   │   ├── audio.ts
+    │   │   │   │   ├── Sources.ts
+    │   │   │   │   └── userInfo.ts
+    │   │   │   ├── utils/
+    │   │   │   │   ├── audio/
+    │   │   │   │   │   ├── audioManager.ts
+    │   │   │   │   │   ├── download.ts
+    │   │   │   │   │   ├── useSmtc.ts
+    │   │   │   │   │   └── volume.ts
+    │   │   │   │   ├── color/
+    │   │   │   │   │   ├── colorExtractor.ts
+    │   │   │   │   │   └── contrastColor.ts
+    │   │   │   │   └── playlist/
+    │   │   │   │       ├── playlistExportImport.ts
+    │   │   │   │       └── playlistManager.ts
+    │   │   │   ├── views/
+    │   │   │   │   ├── home/
+    │   │   │   │   │   └── index.vue
+    │   │   │   │   ├── music/
+    │   │   │   │   │   ├── find.vue
+    │   │   │   │   │   ├── list.vue
+    │   │   │   │   │   ├── local.vue
+    │   │   │   │   │   ├── recent.vue
+    │   │   │   │   │   └── search.vue
+    │   │   │   │   ├── settings/
+    │   │   │   │   │   └── index.vue
+    │   │   │   │   ├── welcome/
+    │   │   │   │   │   └── index.vue
+    │   │   │   │   └── ThemeDemo.vue
+    │   │   │   ├── App.vue
+    │   │   │   ├── env.d.ts
+    │   │   │   └── main.ts
+    │   │   ├── auto-imports.d.ts
+    │   │   ├── components.d.ts
+    │   │   └── index.html
+    │   └── types/
+    │       ├── musicCache.ts
+    │       └── songList.ts
+    ├── website/
+    │   ├── CeruUse.html
+    │   ├── design.html
+    │   ├── index.html
+    │   ├── pluginDev.html
+    │   ├── script.js
+    │   └── styles.css
+    ├── electron-builder.yml
+    ├── electron.vite.config.ts
+    ├── eslint.config.js
+    ├── LICENSE
+    ├── package-lock.json
+    ├── package.json
+    ├── qodana.sarif.json
+    ├── qodana.yaml
+    ├── README.md
+    ├── tsconfig.json
+    ├── tsconfig.node.json
+    ├── tsconfig.web.json
+    └── yarn.lock
+```
+</details>
+
+
+
 
 ## 主要功能
 
@@ -80,8 +282,8 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 
 ## 文档与资源
 
-- [产品设计文档](https://www.doubao.com/thread/docs/design.md)：涵盖项目架构、核心功能设计和开发规范（不含任何音乐数据源信息）。
-- [插件开发文档](https://www.doubao.com/thread/docs/CeruMusic插件开发文档.md)：仅提供插件开发技术规范，**明确要求插件开发者需遵守数据来源平台的用户协议与版权法**，禁止开发、传播获取非公开数据的插件。
+- 产品设计文档：涵盖项目架构、核心功能设计和开发规范（不含任何音乐数据源信息）。
+- [插件开发文档](https://ceru.docs.shiqianjiang.cn/guide/CeruMusicPluginDev.html)：仅提供插件开发技术规范，**明确要求插件开发者需遵守数据来源平台的用户协议与版权法**，禁止开发、传播获取非公开数据的插件。
 
 ## 开源许可
 
@@ -92,7 +294,7 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 欢迎开发者贡献代码与反馈建议，贡献内容需符合以下要求：
 
 1. 仅涉及播放器框架功能优化、bug 修复、文档完善，不包含任何音乐数据源相关代码。
-2. 遵循 [Git 提交规范](https://www.doubao.com/thread/docs/design.md#git提交规范) 并确保代码符合项目风格指南。
+2. 遵循 [Git 提交规范](#) 并确保代码符合项目风格指南。
 3. 贡献的代码需无第三方版权纠纷，且不违反开源许可协议。
 
 ## 联系方式
@@ -159,3 +361,8 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 
 若您认可本项目的技术价值，欢迎通过以下方式支持开发者（仅用于项目技术维护与迭代）：
 <img src="assets/image-20250827175356006.png" alt="赞助方式1" style="zoom:33%;" /><img src="assets/image-20250827175547444.png" alt="赞助方式2" style="zoom: 33%;" />
+
+## 联系
+
+关于项目问题也可联系
+邮箱：sqj@shiqianjiang.cn

docs/.vitepress/config.mts

@@ -5,10 +5,16 @@ export default defineConfig({
   lang: 'zh-CN',
   title: 'Ceru Music',
   base: '/',
+  head: [
+    ['link', { rel: 'icon', href: '/logo.svg' }],
+    ['meta', { name: 'author', href: '时迁酱，无聊的霜霜，star' }],
+    ['meta', { name: 'keywords', content: 'Ceru Music,音乐播放器,音乐播放器工具,音乐播放器软件,音乐播放器下载,音乐播放器下载地址,澜音播放器,免费的音乐播放器,cerumusic,时迁酱,周晨鹭,无聊的霜霜,star,洛雪音乐,洛雪'}],
+    ['meta', { name: 'baidu-site-verification', content: 'codeva-ocKFImCsOO' }],
+  ],
   description:
     'Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工具，一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。',
-  markdown:{
-    config(md){
+  markdown: {
+    config(md) {
       md.use(note)
     }
   },
@@ -28,12 +34,10 @@ export default defineConfig({
           { text: '安装教程', link: '/guide/' },
           {
             text: '使用教程',
-            items: [
-              { text: '音乐播放列表', link: '/guide/used/playList' },
-            ]
+            items: [{ text: '音乐播放列表', link: '/guide/used/playList' }]
           },
-          { text: '软件设计文档', link: '/guide/design' },
-          { text: '更新日志', link: '/guide/updateLog' }
+          { text: '更新日志', link: '/guide/updateLog' },
+          { text: '更新计划', link: '/guide/update' }
         ]
       },
       {
@@ -42,6 +46,10 @@ export default defineConfig({
           { text: '插件类使用', link: '/guide/CeruMusicPluginHost' },
           { text: '澜音插件开发文档（重点）', link: '/guide/CeruMusicPluginDev' }
         ]
+      },
+      {
+        text: '鸣谢名单',
+        link: '/guide/sponsorship'
       }
     ],
 
@@ -63,19 +71,19 @@ export default defineConfig({
       provider: 'local'
     },
     outline: {
-      level: [2,4],
+      level: [2, 4],
       label: '文章导航'
     },
     docFooter: {
       next: '下一篇',
       prev: '上一篇'
     },
-    lastUpdatedText: '上次更新',
-
+    lastUpdatedText: '上次更新'
   },
-
-  lastUpdated: true,
-  head: [['link', { rel: 'icon', href: '/logo.svg' }]],
+  sitemap: {
+    hostname: 'https://ceru.docs.shiqianjiang.cn'
+  },
+  lastUpdated: true
 })
 console.log(process.env.BASE_URL_DOCS)
 // Smooth scrolling functions

docs/.vitepress/theme/style.scss

@@ -168,15 +168,15 @@ html.dark #app {
   // --autonum-h3: counter(h1) "." counter(h2) "." counter(h3) ". ";
   // --autonum-h4: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". ";
   // --autonum-h5: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
-  // --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; 
+  // --autonum-h6: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
 
   /* 下面是文章内Toc目录自动编号，与上面一样即可 */
-//  --autonum-h1toc: counter(h1toc) ". ";
-//   --autonum-h2toc: counter(h1toc) "." counter(h2toc) ". ";
-//   --autonum-h3toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) ". ";
-//   --autonum-h4toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". ";
-//   --autonum-h5toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) ". ";
-//   --autonum-h6toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "." counter(h6toc) ". "; 
+  //  --autonum-h1toc: counter(h1toc) ". ";
+  //   --autonum-h2toc: counter(h1toc) "." counter(h2toc) ". ";
+  //   --autonum-h3toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) ". ";
+  //   --autonum-h4toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) ". ";
+  //   --autonum-h5toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) ". ";
+  //   --autonum-h6toc: counter(h1toc) "." counter(h2toc) "." counter(h3toc) "." counter(h4toc) "." counter(h5toc) "." counter(h6toc) ". ";
 
   /* 主题颜色 */
 
@@ -218,33 +218,33 @@ html.dark #app {
 * 黑暗模式切换动画
 * -------------------------------------------------------------------------- */
 
-// #VPContent .vp-doc > div {
-//   animation:
-//     rises 1s,
-//     looming 1s;
-// }
+#VPContent .vp-doc > div {
+  animation:
+    rises 1s,
+    looming 1s;
+}
 
-// @keyframes rises {
-//   0% {
-//     transform: translateY(50px);
-//   }
+@keyframes rises {
+  0% {
+    transform: translateY(50px);
+  }
 
-//   100% {
-//     transform: translateY(0);
-//   }
-// }
+  100% {
+    transform: translateY(0);
+  }
+}
 
-// @keyframes looming {
-//   0% {
-//     opacity: 0;
-//   }
-//   50% {
-//     opacity: 0.3;
-//   }
-//   100% {
-//     opacity: 1;
-//   }
-// }
+@keyframes looming {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
 .vp-doc li div[class*='language-'] {
   margin: 12px;
@@ -285,6 +285,3 @@ html .vp-doc div[class*='language-'] pre {
 .VPDoc.has-aside .content-container {
   max-width: none !important;
 }
-.vp-doc{
-  // padding: min(3vw, 64px) !important;
-}

docs/guide/CeruMusicPluginDev.md

@@ -1,105 +1,123 @@
----
-layout: doc
----
-
-# CeruMusic 插件开发文档
+# CeruMusic 插件开发指南
 
 ## 概述
 
-本文档介绍如何为 CeruMusic 开发音乐源插件。CeruMusic 插件是运行在沙箱环境中的 JavaScript 模块，用于从各种音乐平台获取音乐资源。
+CeruMusic 支持两种类型的插件：
 
-## 插件结构
+1. **CeruMusic 原生插件**：基于 CeruMusic API 的插件格式
+2. **LX 兼容插件**：兼容 LX Music 的事件驱动插件格式
 
-### 基本结构
+本文档将详细介绍如何开发这两种类型的插件。
 
-每个 CeruMusic 插件必须导出以下三个核心组件：
+## 文件要求
 
-```javascript
-module.exports = {
-  pluginInfo, // 插件信息
-  sources, // 支持的音源
-  musicUrl // 获取音乐链接的函数
-}
-```
+- **编码格式**：UTF-8
+- **编程语言**：JavaScript (支持 ES6+ 语法)
+- **文件扩展名**：`.js`
 
-# 完整示例
+## 插件信息注释
+
+所有插件文件的开头必须包含以下注释格式：
 
 ```javascript
 /**
- * 示例音乐插件
- * @author 开发者名称
+ * @name 插件名称
+ * @description 插件描述
  * @version 1.0.0
+ * @author 作者名称
+ * @homepage https://example.com
+ */
+```
+
+### 注释字段说明
+
+- `@name`：插件名称，建议不超过 24 个字符
+- `@description`：插件描述，建议不超过 36 个字符（可选）
+- `@version`：版本号（可选）
+- `@author`：作者名称（可选）
+- `@homepage`：主页地址（可选）
+
+---
+
+## CeruMusic 原生插件开发
+
+首先 `澜音` 插件是面向 方法的 这意味着你直接导出方法即可为播放器提供音源
+
+### 基本结构
+
+```javascript
+/**
+ * @name 示例音乐源
+ * @description CeruMusic 原生插件示例
+ * @version 1.0.0
+ * @author CeruMusic Team
  */
 
-// 1. 插件信息
+// 插件信息
 const pluginInfo = {
-  name: '示例音源插件',
-  version: '1.0.0',
-  author: '开发者名称',
-  description: '这是一个示例音乐源插件'
-}
+  name: "示例音乐源",
+  version: "1.0.0",
+  author: "CeruMusic Team",
+  description: "这是一个示例插件"
+};
 
-// 2. 支持的音源配置
+// 支持的音源配置
 const sources = {
-  demo: {
-    name: '示例音源',
-    type: 'music',
-    qualitys: ['128k', '320k', 'flac']
+  kw:{
+    name: "酷我音乐",
+    qualitys: ['128k', '320k', 'flac', 'flac24bit']
   },
-  demo2: {
-    name: '示例音源2',
-    type: 'music',
-    qualitys: ['128k', '320k']
+  tx:{
+    name: "QQ音乐",
+    qualitys: ['128k', '320k', 'flac']
   }
-}
+};
 
-// 3. 获取音乐URL的核心函数
+// 获取音乐链接的主要方法
 async function musicUrl(source, musicInfo, quality) {
-  // 从 cerumusic 对象获取 API
-  const { request, env, version } = cerumusic
+  try {
+    // 使用 cerumusic API 发送 HTTP 请求
+    const result = await cerumusic.request('https://api.example.com/music', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+        ...你的其他参数 可以 是密钥或者其他...
+      },
+      body: JSON.stringify({
+        id: musicInfo.id,
+        qualitys: quality
+      })
+    });
 
-  // 构建请求参数
-  const songId = musicInfo.hash ?? musicInfo.songmid
-  const apiUrl = `https://api.example.com/music/${source}/${songId}/${quality}`
-
-  console.log(`[${pluginInfo.name}] 请求音乐链接: ${apiUrl}`)
-
-  // 发起网络请求
-  const { body, statusCode } = await request(apiUrl, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      'User-Agent': `cerumusic-${env}/${version}`
+    if (result.statusCode === 200 && result.body.url) {
+      return result.body.url;
+    } else {
+      throw new Error('获取音乐链接失败');
     }
-  })
-
-  // 处理响应
-  if (statusCode !== 200 || body.code !== 200) {
-    const errorMessage = body.msg || `接口错误 (HTTP: ${statusCode})`
-    console.error(`[${pluginInfo.name}] Error: ${errorMessage}`)
-    throw new Error(errorMessage)
+  } catch (error) {
+    console.error('获取音乐链接时发生错误:', error);
+    throw error;
   }
-
-  console.log(`[${pluginInfo.name}] 获取成功: ${body.url}`)
-  return body.url
 }
 
-// 4. 可选：获取封面图片
+// 获取歌曲封面（可选）
 async function getPic(source, musicInfo) {
-  const { request } = cerumusic
-  const songId = musicInfo.hash ?? musicInfo.songmid
-
-  const { body } = await request(`https://api.example.com/pic/${source}/${songId}`)
-  return body.picUrl
+  try {
+    const result = await cerumusic.request(`https://api.example.com/pic/${musicInfo.id}`);
+    return result.body.picUrl;
+  } catch (error) {
+    throw new Error('获取封面失败: ' + error.message);
+  }
 }
 
-// 5. 可选：获取歌词
+// 获取歌词（可选）
 async function getLyric(source, musicInfo) {
-  const { request } = cerumusic
-  const songId = musicInfo.hash ?? musicInfo.songmid
-
-  const { body } = await request(`https://api.example.com/lyric/${source}/${songId}`)
-  return body.lyric
+  try {
+    const result = await cerumusic.request(`https://api.example.com/lyric/${musicInfo.id}`);
+    return result.body.lyric;
+  } catch (error) {
+    throw new Error('获取歌词失败: ' + error.message);
+  }
 }
 
 // 导出插件
@@ -107,279 +125,556 @@ module.exports = {
   pluginInfo,
   sources,
   musicUrl,
-  getPic, // 可选
-  getLyric // 可选
-}
+  getPic,    // 可选
+  getLyric   // 可选
+};
 ```
 
-## 详细说明
+> #### PS:
+>
+> - `sources key` 取值
+>   - wy 网易云音乐 |
+>   - tx QQ音乐 |
+>   - kg 酷狗音乐 |
+>   - mg 咪咕音乐 |
+>   - kw 酷我音乐
+> - 导出
+>
+>   ```javascript
+>   module.exports = {
+>     sources // 你的音源支持
+>   }
+>   ```
+>
+> - 支持的音质 ` sources.qualitys: ['128k', '320k', 'flac']`
+>   - `128k`: 128kbps
+>   - `320k`: 320kbps
+>   - `flac`: FLAC 无损
+>   - `flac24bit`: 24bit FLAC
+>   - `hires`: Hi-Res 高解析度
+>   - `atmos`: 杜比全景声
+>   - `master`: 母带音质
 
-### 1. pluginInfo 对象
+### CeruMusic API 参考
 
-插件的基本信息，必须包含以下字段：
+#### cerumusic.request(url, options)
 
-```javascript
-const pluginInfo = {
-  name: '插件名称', // 必需：插件显示名称
-  version: '1.0.0', // 必需：版本号
-  author: '作者名', // 必需：作者信息
-  description: '插件描述' // 必需：功能描述
-}
-```
+HTTP 请求方法，返回 Promise。
 
-### 2. sources 对象
-
-定义插件支持的音源，键为音源标识，值为音源配置：
-
-```javascript
-const sources = {
-  // 音源标识（用于API调用）
-  source_id: {
-    name: '音源显示名称', // 必需：用户看到的名称
-    type: 'music', // 必需：固定为 'music'
-    qualitys: [
-      // 必需：支持的音质列表
-      '128k', // 标准音质
-      '320k', // 高音质
-      'flac', // 无损音质
-      'flac24bit', // 24位无损
-      'hires' // 高解析度
-    ]
-  }
-}
-```
-
-### 3. musicUrl 函数
-
-获取音乐播放链接的核心函数：
-
-```javascript
-async function musicUrl(source, musicInfo, quality) {
-  // source: 音源标识（sources 对象的键）
-  // musicInfo: 歌曲信息对象
-  // quality: 请求的音质
-  // 返回: Promise<string> - 音乐播放链接
-}
-```
-
-#### musicInfo 对象结构
-
-```javascript
-const musicInfo = {
-  songmid: '歌曲ID', // 歌曲标识符
-  hash: '歌曲哈希', // 备用标识符
-  title: '歌曲标题', // 歌曲名称
-  artist: '艺术家', // 演唱者
-  album: '专辑名' // 专辑信息
-  // ... 其他可能的字段
-}
-```
-
-## 可用 API
-
-### cerumusic 对象
-
-插件运行时可以访问 `cerumusic` 全局对象：
-
-```javascript
-const { request, env, version, utils } = cerumusic
-```
-
-#### request 函数
-
-用于发起 HTTP 请求：
-
-```javascript
-// Promise 模式
-const response = await request(url, options)
-
-// Callback 模式
-request(url, options, (error, response) => {
-  if (error) {
-    console.error('请求失败:', error)
-    return
-  }
-  console.log('响应:', response)
-})
-```
-
-**参数说明:**
+**参数：**
 
 - `url` (string): 请求地址
-- `options` (Object): 请求选项
-  - `method`: HTTP 方法 ('GET', 'POST', 等)
+- `options` (object): 请求选项
+  - `method`: 请求方法 (GET, POST, PUT, DELETE 等)
   - `headers`: 请求头对象
-  - `body`: 请求体（POST 请求时）
+  - `body`: 请求体
+  - `timeout`: 超时时间（毫秒）
 
-**响应格式:**
+**返回值：**
 
 ```javascript
 {
-  body: {},              // 解析后的响应体
-  statusCode: 200,       // HTTP 状态码
-  headers: {}            // 响应头
+  statusCode: 200,
+  headers: {...},
+  body: {...}  // 自动解析的响应体
 }
 ```
 
-#### utils 对象
+#### cerumusic.utils
 
-提供实用工具函数：
+工具方法集合：
 
 ```javascript
-const { utils } = cerumusic
-
 // Buffer 操作
-const buffer = utils.buffer.from('hello', 'utf8')
-const string = utils.buffer.bufToString(buffer, 'utf8')
+cerumusic.utils.buffer.from(data, encoding)
+cerumusic.utils.buffer.bufToString(buffer, encoding)
+
+// 加密工具
+cerumusic.utils.crypto.md5(str)
+cerumusic.utils.crypto.randomBytes(size)
+cerumusic.utils.crypto.aesEncrypt(data, mode, key, iv)
+cerumusic.utils.crypto.rsaEncrypt(data, key)
 ```
 
+#### cerumusic.NoticeCenter(type, data)
+
+发送通知到用户界面：
+
+```javascript
+cerumusic.NoticeCenter('info', {
+  title: '通知标题',
+  content: '通知内容',
+  url: 'https://example.com', // 可选 当通知为update 版本跟新可传
+  version: '版本号', // 当通知为update 版本跟新可传
+  pluginInfo: {
+    name: '插件名称',
+    type: 'cr' // 固定唯一标识
+  } // 当通知为update 版本跟新可传
+})
+```
+
+**通知类型：**
+
+- `'info'`: 信息通知
+- `'success'`: 成功通知
+- `'warn'`: 警告通知
+- `'error'`: 错误通知
+- `'update'`: 更新通知
+
+---
+
+## LX 兼容插件开发 引用于落雪官网改编
+
+CeruMusic 完全兼容 LX Music 的插件格式，支持事件驱动的开发模式。
+
+### 基本结构
+
+```javascript
+/**
+ * @name 测试音乐源
+ * @description 我只是一个测试音乐源哦
+ * @version 1.0.0
+ * @author xxx
+ * @homepage http://xxx
+ */
+
+const { EVENT_NAMES, request, on, send } = globalThis.lx
+
+// 音质配置
+const qualitys = {
+  kw: {
+    '128k': '128',
+    '320k': '320',
+    flac: 'flac',
+    flac24bit: 'flac24bit'
+  },
+  local: {}
+}
+
+// HTTP 请求封装
+const httpRequest = (url, options) =>
+  new Promise((resolve, reject) => {
+    request(url, options, (err, resp) => {
+      if (err) return reject(err)
+      resolve(resp.body)
+    })
+  })
+
+// API 实现
+const apis = {
+  kw: {
+    musicUrl({ songmid }, quality) {
+      return httpRequest('http://xxx').then((data) => {
+        return data.url
+      })
+    }
+  },
+  local: {
+    musicUrl(info) {
+      return httpRequest('http://xxx').then((data) => {
+        return data.url
+      })
+    },
+    pic(info) {
+      return httpRequest('http://xxx').then((data) => {
+        return data.url
+      })
+    },
+    lyric(info) {
+      return httpRequest('http://xxx').then((data) => {
+        return {
+          lyric: '...', // 歌曲歌词
+          tlyric: '...', // 翻译歌词，没有可为 null
+          rlyric: '...', // 罗马音歌词，没有可为 null
+          lxlyric: '...' // lx 逐字歌词，没有可为 null
+        }
+      })
+    }
+  }
+}
+
+// 注册 API 请求事件
+on(EVENT_NAMES.request, ({ source, action, info }) => {
+  switch (action) {
+    case 'musicUrl':
+      return apis[source].musicUrl(info.musicInfo, qualitys[source][info.type])
+    case 'lyric':
+      return apis[source].lyric(info.musicInfo)
+    case 'pic':
+      return apis[source].pic(info.musicInfo)
+  }
+})
+
+// 发送初始化完成事件
+send(EVENT_NAMES.inited, {
+  openDevTools: false, // 是否打开开发者工具
+  sources: {
+    kw: {
+      name: '酷我音乐',
+      type: 'music',
+      actions: ['musicUrl'],
+      qualitys: ['128k', '320k', 'flac', 'flac24bit']
+    },
+    local: {
+      name: '本地音乐',
+      type: 'music',
+      actions: ['musicUrl', 'lyric', 'pic'],
+      qualitys: []
+    }
+  }
+})
+```
+
+### LX API 参考
+
+#### globalThis.lx.EVENT_NAMES
+
+事件名称常量：
+
+- `inited`: 初始化完成事件
+- `request`: API 请求事件
+- `updateAlert`: 更新提示事件
+
+#### globalThis.lx.on(eventName, handler)
+
+注册事件监听器：
+
+```javascript
+lx.on(lx.EVENT_NAMES.request, ({ source, action, info }) => {
+  // 必须返回 Promise
+  return Promise.resolve(result)
+})
+```
+
+#### globalThis.lx.send(eventName, data)
+
+发送事件：
+
+```javascript
+// 发送初始化事件
+lx.send(lx.EVENT_NAMES.inited, {
+  openDevTools: false,
+  sources: {...}
+});
+
+// 发送更新提示
+lx.send(lx.EVENT_NAMES.updateAlert, {
+  log: '更新日志\n修复了一些问题',
+  updateUrl: 'https://example.com/update'
+});
+```
+
+#### globalThis.lx.request(url, options, callback)
+
+HTTP 请求方法：
+
+```javascript
+lx.request(
+  'https://api.example.com',
+  {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+    timeout: 10000
+  },
+  (err, resp) => {
+    if (err) {
+      console.error('请求失败:', err)
+      return
+    }
+    console.log('响应:', resp.body)
+  }
+)
+```
+
+#### globalThis.lx.utils
+
+工具方法：
+
+```javascript
+// Buffer 操作
+lx.utils.buffer.from(data, encoding)
+lx.utils.buffer.bufToString(buffer, encoding)
+
+// 加密工具
+lx.utils.crypto.md5(str)
+lx.utils.crypto.aesEncrypt(buffer, mode, key, iv)
+lx.utils.crypto.randomBytes(size)
+lx.utils.crypto.rsaEncrypt(buffer, key)
+```
+
+---
+
+## 音源配置
+
+### 支持的音源 ID
+
+- `kw`: 酷我音乐
+- `kg`: 酷狗音乐
+- `tx`: QQ音乐
+- `wy`: 网易云音乐
+- `mg`: 咪咕音乐
+- `local`: 本地音乐
+
+### 支持的音质
+
+- `128k`: 128kbps
+- `320k`: 320kbps
+- `flac`: FLAC 无损
+- `flac24bit`: 24bit FLAC
+- `hires`: Hi-Res 高解析度
+- `atmos`: 杜比全景声
+- `master`: 母带音质
+
+---
+
 ## 错误处理
 
 ### 最佳实践
 
-1. **总是检查 API 响应状态**
+```javascript
+async function musicUrl(source, musicInfo, quality) {
+  try {
+    // 参数验证
+    if (!musicInfo || !musicInfo.id) {
+      throw new Error('音乐信息不完整')
+    }
 
-   ```javascript
-   if (statusCode !== 200 || body.code !== 200) {
-     throw new Error(`请求失败: ${body.msg || '未知错误'}`)
-   }
-   ```
+    // API 调用
+    const result = await cerumusic.request(url, options)
 
-2. **提供有意义的错误信息**
+    // 结果验证
+    if (!result || result.statusCode !== 200) {
+      throw new Error(`API 请求失败: ${result?.statusCode || 'Unknown'}`)
+    }
 
-   ```javascript
-   console.error(`[${pluginInfo.name}] Error: ${errorMessage}`)
-   throw new Error(errorMessage)
-   ```
+    if (!result.body || !result.body.url) {
+      throw new Error('返回数据格式错误')
+    }
 
-3. **处理网络异常**
-   ```javascript
-   try {
-     const response = await request(url, options)
-     // 处理响应
-   } catch (error) {
-     console.error(`[${pluginInfo.name}] 网络请求失败:`, error.message)
-     throw new Error(`网络错误: ${error.message}`)
-   }
-   ```
+    return result.body.url
+  } catch (error) {
+    // 记录错误日志
+    console.error(`[${source}] 获取音乐链接失败:`, error.message)
+
+    // 重新抛出错误供上层处理
+    throw new Error(`获取 ${source} 音乐链接失败: ${error.message}`)
+  }
+}
+```
 
 ### 常见错误类型
 
-- **网络错误**: 无法连接到 API 服务器
-- **认证错误**: API 密钥无效或过期
-- **参数错误**: 请求参数格式不正确
-- **资源不存在**: 请求的歌曲不存在
-- **限流错误**: 请求过于频繁
+1. **网络错误**: 请求超时、连接失败
+2. **API 错误**: 接口返回错误状态码
+3. **数据错误**: 返回数据格式不正确
+4. **参数错误**: 传入参数不完整或格式错误
 
-## 事件驱动插件
-
-对于使用 `lx.on(EVENT_NAMES.request)` 模式的插件，可以使用转换器：
-
-```javascript
-// 使用转换器转换事件驱动插件
-node converter-event-driven.js input-plugin.js output-plugin.js
-```
-
-转换后的插件将兼容 CeruMusicPluginHost。
+---
 
 ## 调试技巧
 
 ### 1. 使用 console.log
 
 ```javascript
-console.log(`[${pluginInfo.name}] 调试信息:`, data)
-console.error(`[${pluginInfo.name}] 错误:`, error)
+console.log('[插件名] 调试信息:', data)
+console.warn('[插件名] 警告信息:', warning)
+console.error('[插件名] 错误信息:', error)
 ```
 
-### 2. 检查请求和响应
+### 2. LX 插件开发者工具
 
 ```javascript
-console.log('请求URL:', url)
-console.log('请求选项:', options)
-console.log('响应状态:', statusCode)
-console.log('响应内容:', body)
+send(EVENT_NAMES.inited, {
+  openDevTools: true, // 开启开发者工具
+  sources: {...}
+});
 ```
 
-### 3. 测试插件
-
-创建测试文件：
+### 3. 错误捕获
 
 ```javascript
-const CeruMusicPluginHost = require('./CeruMusicPluginHost')
+process.on('unhandledRejection', (reason, promise) => {
+  console.error('未处理的 Promise 拒绝:', reason)
+})
+```
 
-async function testPlugin() {
-  const host = new CeruMusicPluginHost()
-  await host.loadPlugin('./my-plugin.js')
+---
 
-  const musicInfo = {
-    songmid: 'test123',
-    title: '测试歌曲'
+## 性能优化
+
+### 1. 请求缓存
+
+```javascript
+const cache = new Map()
+
+async function getCachedData(key, fetcher, ttl = 300000) {
+  const cached = cache.get(key)
+  if (cached && Date.now() - cached.timestamp < ttl) {
+    return cached.data
+  }
+
+  const data = await fetcher()
+  cache.set(key, { data, timestamp: Date.now() })
+  return data
+}
+```
+
+### 2. 请求超时控制
+
+```javascript
+const result = await cerumusic.request(url, {
+  timeout: 10000 // 10秒超时
+})
+```
+
+### 3. 并发控制
+
+```javascript
+// 限制并发请求数量
+const semaphore = new Semaphore(3) // 最多3个并发请求
+
+async function limitedRequest(url, options) {
+  await semaphore.acquire()
+  try {
+    return await cerumusic.request(url, options)
+  } finally {
+    semaphore.release()
+  }
+}
+```
+
+---
+
+## 安全注意事项
+
+### 1. 输入验证
+
+```javascript
+function validateMusicInfo(musicInfo) {
+  if (!musicInfo || typeof musicInfo !== 'object') {
+    throw new Error('音乐信息格式错误')
+  }
+
+  if (!musicInfo.id || typeof musicInfo.id !== 'string') {
+    throw new Error('音乐 ID 无效')
+  }
+
+  return true
+}
+```
+
+### 2. URL 验证
+
+```javascript
+function isValidUrl(url) {
+  try {
+    const urlObj = new URL(url)
+    return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+```
+
+### 3. 敏感信息保护
+
+```javascript
+// 不要在日志中输出敏感信息
+console.log('请求参数:', {
+  ...params,
+  token: '***', // 隐藏敏感信息
+  password: '***'
+})
+```
+
+---
+
+## 插件发布
+
+### 1. 代码检查清单
+
+- [ ] 插件信息注释完整
+- [ ] 错误处理完善
+- [ ] 性能优化合理
+- [ ] 安全验证到位
+- [ ] 测试覆盖充分
+
+### 2. 测试建议
+
+```javascript
+// 单元测试示例
+async function testMusicUrl() {
+  const testMusicInfo = {
+    id: 'test123',
+    name: '测试歌曲',
+    artist: '测试歌手'
   }
 
   try {
-    const url = await host.getMusicUrl('demo', musicInfo, '320k')
-    console.log('成功获取URL:', url)
+    const url = await musicUrl('kw', testMusicInfo, '320k')
+    console.log('测试通过:', url)
   } catch (error) {
-    console.error('测试失败:', error.message)
+    console.error('测试失败:', error)
   }
 }
-
-testPlugin()
 ```
 
-## 发布和分发
+### 3. 版本管理
 
-### 文件结构
+使用语义化版本号：
 
-```
-my-plugin/
-├── plugin.js          # 主插件文件
-├── package.json       # 包信息（可选）
-├── README.md          # 说明文档
-└── test.js           # 测试文件（可选）
-```
-
-### 版本管理
-
-遵循语义化版本规范：
-
-- `1.0.0` - 主版本.次版本.修订版本
+- `1.0.0`: 主版本.次版本.修订版本
 - 主版本：不兼容的 API 修改
 - 次版本：向下兼容的功能性新增
 - 修订版本：向下兼容的问题修正
 
-## 示例插件
-
-查看项目中的示例：
-
-- `example-plugin.js` - 基础插件示例
-- `plugin.js` - 事件驱动插件示例
-- `fm.js` - 复杂插件示例
+---
 
 ## 常见问题
 
-**Q: 如何处理需要登录的 API？**
+### Q: 插件加载失败怎么办？
 
-A: 在请求头中添加认证信息，或使用 Cookie。
+A: 检查以下几点：
 
-**Q: 如何处理加密的 API 响应？**
+1. 文件编码是否为 UTF-8
+2. 插件信息注释格式是否正确
+3. JavaScript 语法是否有错误
+4. 是否正确导出了必需的方法
 
-A: 在插件中实现解密逻辑，使用 `utils` 对象提供的工具函数。
+### Q: 如何处理跨域请求？
 
-**Q: 插件可以访问文件系统吗？**
+A: CeruMusic 的请求方法不受浏览器跨域限制，可以直接请求任何域名的 API。
 
-A: 不可以，插件运行在受限的沙箱环境中，无法直接访问文件系统。
+### Q: 插件如何更新？
 
-**Q: 如何优化插件性能？**
+A: 使用 `cerumusic.NoticeCenter` 事件通知用户更新：
 
-A: 减少不必要的网络请求，使用适当的缓存策略，避免阻塞操作。
+```javascript
+cerumusic.NoticeCenter('update', {
+  title: '新版本更新',
+  content: 'xxxx',
+  version: 'v1.0.3',
+  url: 'https://shiqianjiang.cn',
+  pluginInfo: {
+    type: 'cr'
+  }
+})
+```
 
-## 贡献指南
+### Q: 如何调试插件？
 
-1. Fork 项目仓库
-2. 创建功能分支
-3. 编写插件代码和测试
-4. 提交 Pull Request
-5. 等待代码审查
+A:
 
-欢迎贡献新的音源插件！
+1. 使用 `console.log` 输出调试信息 可在设置—>插件管理—>日志 查看调试
+2. LX 插件可以设置 `openDevTools: true` 打开开发者工具
+3. 查看 CeruMusic 的插件日志
+
+---
+
+## 技术支持
+
+如有问题或建议，请通过以下方式联系：
+
+- GitHub Issues: [CeruMusic Issues](https://github.com/timeshiftsauce/CeruMusic/issues)
+- Blog (最好登录，否则需要审核): [CeruMusic Blog](https://shiqianjiang.cn/blog/4966904626407280640)

docs/guide/api.md

@@ -1,197 +0,0 @@
-# 音乐API接口文档
-
-## 概述
-
-这是一个基于 Meting 库的音乐API接口，支持多个音乐平台的数据获取，包括歌曲信息、专辑、歌词、播放链接等。
-
-## 基础信息
-
-- **请求方式**: GET
-- **返回格式**: JSON
-- **字符编码**: UTF-8
-- **跨域支持**: 是
-
-## 请求参数
-
-| 参数名 | 类型   | 必填 | 默认值  | 说明           |
-| ------ | ------ | ---- | ------- | -------------- |
-| server | string | 否   | netease | 音乐平台       |
-| type   | string | 否   | search  | 请求类型       |
-| id     | string | 否   | hello   | 查询ID或关键词 |
-
-### 支持的音乐平台 (server)
-
-| 平台代码 | 平台名称   |
-| -------- | ---------- |
-| netease  | 网易云音乐 |
-| tencent  | QQ音乐     |
-| baidu    | 百度音乐   |
-| xiami    | 虾米音乐   |
-| kugou    | 酷狗音乐   |
-| kuwo     | 酷我音乐   |
-
-### 支持的请求类型 (type)
-
-| 类型     | 说明         | id参数说明       |
-| -------- | ------------ | ---------------- |
-| search   | 搜索歌曲     | 搜索关键词       |
-| song     | 获取歌曲详情 | 歌曲ID           |
-| album    | 获取专辑信息 | 专辑ID           |
-| artist   | 获取歌手信息 | 歌手ID           |
-| playlist | 获取歌单信息 | 歌单ID           |
-| lrc      | 获取歌词     | 歌曲ID           |
-| url      | 获取播放链接 | 歌曲ID           |
-| pic      | 获取封面图片 | 歌曲/专辑/歌手ID |
-
-## 响应格式
-
-### 成功响应
-
-```json
-{
-  "success": true,
-  "message": {
-    // 具体数据内容，根据请求类型不同而不同
-  }
-}
-```
-
-### 错误响应
-
-```json
-{
-  "success": false,
-  "message": "错误信息"
-}
-```
-
-## 请求示例
-
-### 1. 搜索歌曲
-
-```
-GET /?server=netease&type=search&id=周杰伦
-```
-
-**响应示例**:
-
-```json
-{
-  "success": true,
-  "message": [
-    {
-      "id": "186016",
-      "name": "青花瓷",
-      "artist": ["周杰伦"],
-      "album": "我很忙",
-      "pic_id": "109951163240682406",
-      "url_id": "186016",
-      "lyric_id": "186016"
-    }
-  ]
-}
-```
-
-### 2. 获取歌曲详情
-
-```
-GET /?server=netease&type=song&id=186016
-```
-
-### 3. 获取歌词
-
-```
-GET /?server=netease&type=lrc&id=186016
-```
-
-**响应示例**:
-
-```json
-{
-  "success": true,
-  "message": {
-    "lyric": "[00:00.00] 作词 : 方文山\n[00:01.00] 作曲 : 周杰伦\n[00:22.78]素胚勾勒出青花笔锋浓转淡\n..."
-  }
-}
-```
-
-### 4. 获取播放链接
-
-```
-GET /?server=netease&type=url&id=186016
-```
-
-**响应示例**:
-
-```json
-{
-  "success": true,
-  "message": [
-    {
-      "id": "186016",
-      "url": "http://music.163.com/song/media/outer/url?id=186016.mp3",
-      "size": 4729252,
-      "br": 128
-    }
-  ]
-}
-```
-
-### 5. 获取专辑信息
-
-```
-GET /?server=netease&type=album&id=18905
-```
-
-### 6. 获取歌手信息
-
-```
-GET /?server=netease&type=artist&id=6452
-```
-
-### 7. 获取歌单信息
-
-```
-GET /?server=netease&type=playlist&id=19723756
-```
-
-### 8. 获取封面图片
-
-```
-GET /?server=netease&type=pic&id=186016
-```
-
-## 错误码说明
-
-| 错误信息            | 说明             |
-| ------------------- | ---------------- |
-| require id.         | 缺少必需的id参数 |
-| unsupported server. | 不支持的音乐平台 |
-| unsupported type.   | 不支持的请求类型 |
-
-## 注意事项
-
-1. **代理支持**: 如果设置了环境变量 `METING_PROXY`，API会使用代理访问音乐平台
-2. **Cookie支持**: API会自动传递请求中的Cookie到音乐平台
-3. **跨域访问**: API已配置CORS，支持跨域请求
-4. **请求频率**: 建议控制请求频率，避免被音乐平台限制
-5. **数据时效性**: 音乐平台的数据可能会发生变化，建议适当缓存但不要过度依赖
-
-## 使用建议
-
-1. **错误处理**: 请务必检查响应中的 `success` 字段
-2. **数据验证**: 返回的数据结构可能因平台而异，请做好数据验证
-3. **备用方案**: 建议支持多个音乐平台作为备用数据源
-4. **缓存策略**: 对于不经常变化的数据（如歌词、专辑信息）建议进行缓存
-
-## 技术实现
-
-本API基于以下技术栈：
-
-- **PHP**: 后端语言
-- **Meting**: 音乐数据获取库
-- **Composer**: 依赖管理
-
-## 更新日志
-
-- **v1.0.0**: 初始版本，支持基础的音乐数据获取功能

docs/guide/design.md

@@ -1,600 +0,0 @@
-# Ceru Music 产品设计文档
-
-## 项目概述
-
-Ceru Music 是一个基于 Electron + Vue 3 的跨平台桌面音乐播放器，支持多音乐平台数据源，提供流畅的音乐播放体验。
-
-## 项目架构
-
-### 技术栈
-
-- **前端框架**: Vue 3 + TypeScript + Composition API
-- **桌面框架**: Electron (v37.2.3)
-- **UI组件库**: TDesign Vue Next (v1.15.2)
-- ![image-20250813180317221](..\assets\image-20250813180317221.png)
-- **状态管理**: Pinia (v3.0.3)
-- **路由管理**: Vue Router (v4.5.1)
-- **构建工具**: Vite + electron-vite
-- **包管理器**: PNPM
-- **Node pnpm 版本**：
-
-  ```bash
-  PS D:\code\Ceru-Music> node -v
-  v22.17.0
-  PS D:\code\Ceru-Music> pnpm -v
-  10.14.0
-  ```
-
--
-
-### 架构设计
-
-```asp
-Ceru Music
-├── 主进程 (Main Process)
-│   ├── 应用生命周期管理
-│   ├── 窗口管理
-│   ├── 系统集成 (托盘、快捷键)
-│   └── 文件系统操作
-├── 渲染进程 (Renderer Process)
-│   ├── Vue 3 应用
-│   ├── 用户界面
-│   ├── 音乐播放控制
-│   └── 数据展示
-└── 预加载脚本 (Preload Script)
-    └── 安全的 IPC 通信桥梁
-```
-
-### 目录结构
-
-```
-src/
-├── main/                   # 主进程代码
-│   ├── index.ts           # 主进程入口
-│   ├── window.ts          # 窗口管理
-│   └── services/          # 主进程服务
-├── preload/               # 预加载脚本
-│   └── index.ts          # IPC 通信接口
-└── renderer/              # 渲染进程 (Vue 应用)
-    ├── src/
-    │   ├── components/    # Vue 组件
-    │   ├── views/         # 页面视图
-    │   ├── stores/        # Pinia 状态管理
-    │   ├── services/      # API 服务
-    │   ├── utils/         # 工具函数
-    │   └── types/         # TypeScript 类型定义
-    └── index.html         # 应用入口
-```
-
-## 项目开发使用方式
-
-### 开发环境启动
-
-```bash
-# 安装依赖
-pnpm install
-
-# 启动开发服务器
-pnpm dev
-
-# 代码检查
-pnpm lint
-
-# 类型检查
-pnpm typecheck
-```
-
-### 构建打包
-
-```bash
-# 构建当前平台
-pnpm build
-
-# 构建 Windows 版本
-pnpm build:win
-
-# 构建 macOS 版本
-pnpm build:mac
-
-# 构建 Linux 版本
-pnpm build:linux
-```
-
-## 音乐数据源接口设计
-
-### 接口1: 网易云音乐原生接口 (主要数据源)
-
-#### 获取音乐信息
-
-- **请求地址**: `https://music.163.com/api/song/detail`
-- **请求参数**: `ids=[ID1,ID2,ID3,...]` 音乐ID列表
-- **示例**: `https://music.163.com/api/song/detail?ids=[36270426]`
-
-#### 获取音乐直链
-
-- **请求地址**: `https://music.163.com/song/media/outer/url`
-- **请求参数**: `id=123` 音乐ID
-- **示例**: `https://music.163.com/song/media/outer/url?id=36270426.mp3`
-
-#### 获取歌词
-
-- **请求地址**: `https://music.163.com/api/song/lyric`
-- **请求参数**:
-  - `id=123` 音乐ID
-  - `lv=-1` 获取歌词
-  - `yv=-1` 获取逐字歌词
-  - `tv=-1` 获取歌词翻译
-- **示例**: `https://music.163.com/api/song/lyric?id=36270426&lv=-1&yv=-1&tv=-1`
-
-#### 搜索歌曲
-
-- **请求地址**: `https://music.163.com/api/search/get/web`
-- **请求参数**:
-  - `s` 歌名
-  - `type=1` 搜索类型
-  - `offset=0` 偏移量
-  - `limit=10` 搜索结果数量
-- **示例**: `https://music.163.com/api/search/get/web?s=来自天堂的魔鬼&type=1&offset=0&limit=10`
-
-### 接口2: Meting API (备用数据源)
-
-#### 参数说明
-
-- **server**: 数据源
-  - `netease` 网易云音乐(默认)
-  - `tencent` QQ音乐
-- **type**: 类型
-  - `name` 歌曲名
-  - `artist` 歌手
-  - `url` 链接
-  - `pic` 封面
-  - `lrc` 歌词
-  - `song` 单曲
-  - `playlist` 歌单
-- **id**: 类型ID（封面ID/单曲ID/歌单ID）
-
-#### 使用示例
-
-```
-https://api.qijieya.cn/meting/?type=url&id=1969519579
-https://api.qijieya.cn/meting/?type=song&id=591321
-https://api.qijieya.cn/meting/?type=playlist&id=2619366284
-```
-
-### 接口3: 备选接口
-
-- **地址**: https://doc.vkeys.cn/api-doc/
-- **说明**: 不建议使用，延迟较高
-
-### 接口4: 自部署接口 (备用)
-
-- **地址**: `https://music.shiqianjiang.cn?id=你是我的风景&server=netease`
-- **说明**: 不支持分页，用于获取歌曲源、歌词源等
-- **文档**: [API文档](./api.md)
-
-## 核心功能设计
-
-### 通用请求函数设计
-
-```typescript
-// 音乐服务接口定义
-interface MusicService {
-  search({keyword: string, page?: number, limit?: number}): Promise<SearchResult>
-  getSongDetail({id: string)}: Promise<SongDetail>
-  getSongUrl({id: string}): Promise<string>
-  getLyric({id: string}): Promise<LyricData>
-  getPlaylist({id: string}): Promise<PlaylistData>
-}
-
-// 通用请求函数
-async function request(method: string, ...args: any{},isLoading=false): Promise<any> {
-  try {
-    switch (method) {
-      case 'search':
-        return await musicService.search(args)
-      case 'getSongDetail':
-        return await musicService.getSongDetail(args)
-      case 'getSongUrl':
-        return await musicService.getSongUrl(args)
-      case 'getLyric':
-        return await musicService.getLyric(args)
-      default:
-        throw new Error(`未知的方法: ${method}`)
-    }
-  } catch (error) {
-    console.error(`请求失败: ${method}`, error)
-    throw error
-  }
-}
-
-// 使用示例
-request('search', '周杰伦', 1, 20).then((result) => {
-  console.log('搜索结果:', result)
-})
-```
-
-### 状态管理设计 (Pinia + LocalStorage)
-
-```typescript
-// stores/music.ts
-import { defineStore } from 'pinia'
-
-export const useMusicStore = defineStore('music', {
-  state: () => ({
-    // 当前播放歌曲
-    currentSong: null as Song | null,
-    // 播放列表
-    playlist: [] as Song[],
-    // 播放状态
-    isPlaying: false,
-    // 播放模式 (顺序、随机、单曲循环)
-    playMode: 'order' as 'order' | 'random' | 'repeat',
-    // 音量
-    volume: 0.8,
-    // 播放进度
-    currentTime: 0,
-    duration: 0
-  }),
-
-  actions: {
-    // 播放歌曲
-    async playSong(song: Song) {
-      this.currentSong = song
-      this.isPlaying = true
-      this.saveToStorage()
-    },
-
-    // 添加到播放列表
-    addToPlaylist(songs: Song[]) {
-      this.playlist.push(...songs)
-      this.saveToStorage()
-    },
-
-    // 保存到本地存储
-    saveToStorage() {
-      localStorage.setItem(
-        'music-state',
-        JSON.stringify({
-          currentSong: this.currentSong,
-          playlist: this.playlist,
-          playMode: this.playMode,
-          volume: this.volume
-        })
-      )
-    },
-
-    // 从本地存储恢复
-    loadFromStorage() {
-      const saved = localStorage.getItem('music-state')
-      if (saved) {
-        const state = JSON.parse(saved)
-        Object.assign(this, state)
-      }
-    }
-  }
-})
-```
-
-### 虚拟滚动列表设计
-
-使用 TDesign 的虚拟滚动组件展示大量歌曲数据：
-
-```vue
-<template>
-  <t-virtual-scroll :data="songList" :height="600" :item-height="60" :buffer="10">
-    <template #default="{ data: song, index }">
-      <div class="song-item" @click="playSong(song)">
-        <div class="song-cover">
-          <img :src="song.pic" :alt="song.name" />
-        </div>
-        <div class="song-info">
-          <div class="song-name">{{ song.name }}</div>
-          <div class="song-artist">{{ song.artist }}</div>
-        </div>
-        <div class="song-duration">{{ formatTime(song.duration) }}</div>
-      </div>
-    </template>
-  </t-virtual-scroll>
-</template>
-```
-
-### 本地数据存储设计
-
-#### 播放列表存储
-
-```typescript
-// 方案1: LocalStorage (简单方案)
-class PlaylistStorage {
-  private key = 'ceru-playlists'
-
-  save(playlists: Playlist[]) {
-    localStorage.setItem(this.key, JSON.stringify(playlists))
-  }
-
-  load(): Playlist[] {
-    const data = localStorage.getItem(this.key)
-    return data ? JSON.parse(data) : []
-  }
-}
-
-// 方案2: Node.js 文件存储 (最优方案，支持分享)
-class FileStorage {
-  private filePath = path.join(app.getPath('userData'), 'playlists.json')
-
-  async save(playlists: Playlist[]) {
-    await fs.writeFile(this.filePath, JSON.stringify(playlists, null, 2))
-  }
-
-  async load(): Promise<Playlist[]> {
-    try {
-      const data = await fs.readFile(this.filePath, 'utf-8')
-      return JSON.parse(data)
-    } catch {
-      return []
-    }
-  }
-
-  // 导出播放列表
-  async export(playlist: Playlist, exportPath: string) {
-    await fs.writeFile(exportPath, JSON.stringify(playlist, null, 2))
-  }
-
-  // 导入播放列表
-  async import(importPath: string): Promise<Playlist> {
-    const data = await fs.readFile(importPath, 'utf-8')
-    return JSON.parse(data)
-  }
-}
-```
-
-## 用户体验设计
-
-### 首次启动流程
-
-```typescript
-// stores/app.ts
-export const useAppStore = defineStore('app', {
-  state: () => ({
-    isFirstLaunch: true,
-    hasCompletedWelcome: false,
-    userPreferences: {
-      theme: 'auto' as 'light' | 'dark' | 'auto',
-      language: 'zh-CN',
-      defaultMusicSource: 'netease',
-      autoPlay: false
-    }
-  }),
-
-  actions: {
-    checkFirstLaunch() {
-      const hasLaunched = localStorage.getItem('has-launched')
-      this.isFirstLaunch = !hasLaunched
-
-      if (this.isFirstLaunch) {
-        // 跳转到欢迎页面
-        router.push('/welcome')
-      } else {
-        // 加载用户配置
-        this.loadUserPreferences()
-        router.push('/home')
-      }
-    },
-
-    completeWelcome(preferences?: Partial<UserPreferences>) {
-      if (preferences) {
-        Object.assign(this.userPreferences, preferences)
-      }
-
-      this.hasCompletedWelcome = true
-      localStorage.setItem('has-launched', 'true')
-      localStorage.setItem('user-preferences', JSON.stringify(this.userPreferences))
-
-      router.push('/home')
-    }
-  }
-})
-```
-
-### 欢迎页面设计
-
-![image-20250813180856660](..\assets\image-20250813180856660.png)
-
-```vue
-<template>
-  <div class="welcome-container">
-    <t-steps :current="currentStep" class="welcome-steps">
-      <t-step title="欢迎使用" content="欢迎使用 Ceru Music" />
-      <t-step title="基础设置" content="配置您的偏好设置" />
-      <t-step title="完成设置" content="开始您的音乐之旅" />
-    </t-steps>
-
-    <transition name="slide" mode="out-in">
-      <component :is="currentStepComponent" @next="nextStep" @skip="skipWelcome" />
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import WelcomeStep1 from './steps/WelcomeStep1.vue'
-import WelcomeStep2 from './steps/WelcomeStep2.vue'
-import WelcomeStep3 from './steps/WelcomeStep3.vue'
-
-const currentStep = ref(0)
-const steps = [WelcomeStep1, WelcomeStep2, WelcomeStep3]
-
-const currentStepComponent = computed(() => steps[currentStep.value])
-
-function nextStep() {
-  if (currentStep.value < steps.length - 1) {
-    currentStep.value++
-  } else {
-    completeWelcome()
-  }
-}
-
-function skipWelcome() {
-  appStore.completeWelcome()
-}
-</script>
-
-<style scoped>
-.slide-enter-active,
-.slide-leave-active {
-  transition: all 0.3s ease;
-}
-.slide-enter-from {
-  opacity: 0;
-  transform: translateX(30px);
-}
-.slide-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-</style>
-```
-
-##### 界面UI参考
-
-![..\assets\image-20250813180944752.png)
-
-## 页面动画设计
-
-### 路由过渡动画
-
-```vue
-<template>
-  <router-view v-slot="{ Component, route }">
-    <transition :name="getTransitionName(route)" mode="out-in">
-      <component :is="Component" :key="route.path" />
-    </transition>
-  </router-view>
-</template>
-
-<script setup lang="ts">
-function getTransitionName(route: any) {
-  // 根据路由层级决定动画方向
-  const depth = route.path.split('/').length
-  return depth > 2 ? 'slide-left' : 'slide-right'
-}
-</script>
-
-<style>
-/* 滑动动画 */
-.slide-left-enter-active,
-.slide-left-leave-active,
-.slide-right-enter-active,
-.slide-right-leave-active {
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.slide-left-enter-from {
-  opacity: 0;
-  transform: translateX(100%);
-}
-.slide-left-leave-to {
-  opacity: 0;
-  transform: translateX(-100%);
-}
-
-.slide-right-enter-from {
-  opacity: 0;
-  transform: translateX(-100%);
-}
-.slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(100%);
-}
-
-/* 淡入淡出动画 */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
-```
-
-## 核心组件设计
-
-### 音乐播放器组件
-
-```vue
-<template>
-  <div class="music-player">
-    <div class="player-info">
-      <img :src="currentSong?.pic" class="song-cover" />
-      <div class="song-details">
-        <div class="song-name">{{ currentSong?.name }}</div>
-        <div class="song-artist">{{ currentSong?.artist }}</div>
-      </div>
-    </div>
-
-    <div class="player-controls">
-      <t-button variant="text" @click="previousSong">
-        <t-icon name="skip-previous" />
-      </t-button>
-      <t-button :variant="isPlaying ? 'filled' : 'outline'" @click="togglePlay">
-        <t-icon :name="isPlaying ? 'pause' : 'play'" />
-      </t-button>
-      <t-button variant="text" @click="nextSong">
-        <t-icon name="skip-next" />
-      </t-button>
-    </div>
-
-    <div class="player-progress">
-      <span class="time-current">{{ formatTime(currentTime) }}</span>
-      <t-slider v-model="progress" :max="duration" @change="seekTo" class="progress-slider" />
-      <span class="time-duration">{{ formatTime(duration) }}</span>
-    </div>
-  </div>
-</template>
-```
-
-## 开发规范
-
-### 代码规范
-
-- 使用 TypeScript 进行类型检查
-- 遵循 ESLint 配置的代码规范
-- 使用 Prettier 进行代码格式化
-- 组件命名使用 PascalCase
-- 文件命名使用 kebab-case
-
-### Git 提交规范
-
-```
-feat: 新功能
-fix: 修复bug
-docs: 文档更新
-style: 代码格式调整
-refactor: 代码重构
-test: 测试相关
-chore: 构建过程或辅助工具的变动
-```
-
-### 性能优化
-
-- 使用虚拟滚动处理大列表
-- 图片懒加载
-- 组件按需加载
-- 音频预加载和缓存
-- 防抖和节流优化用户交互
-
-## 待补充功能
-
-1. **歌词显示**: 滚动歌词、逐字高亮
-2. **音效处理**: 均衡器、音效增强
-3. **主题系统**: 多主题切换、自定义主题
-4. **快捷键**: 全局快捷键支持
-5. **系统集成**: 媒体键支持、系统通知
-6. **云同步**: 播放列表云端同步
-7. **插件系统**: 支持第三方插件扩展
-8. **音乐推荐**: 基于听歌历史的智能推荐
-
----
-
-_本设计文档将随着项目开发进度持续更新和完善。_

docs/guide/sponsorship.md

@@ -0,0 +1,16 @@
+# 赞助名单
+
+## 鸣谢
+
+|            昵称            | 赞助金额 |
+| :------------------------: | :------: |
+| **群友**：可惜情绪落泪零碎 |   6.66   |
+| **群友**：🍀 |   5   |
+| **群友**：涟漪 | 50 |
+| **作者朋友** | 188 |
+| **群友**：我叫阿狸 | 3 |
+| RiseSun | 9.9 |
+| **b站小友**：光牙阿普斯木兰 | 5 |
+| 青禾 | 8.8 |
+
+据不完全统计 如有疏漏可联系sqj@shiqianjiang.cn

docs/guide/update.md

@@ -0,0 +1,16 @@
+# 我的-更新计划-欢迎issue
+
+- [ ] 搜索框可以弄对应的音乐源的排行榜 搜索联想
+- [ ] 导航上面这几个按钮可以稍微优化一下
+- [x] 支持在线导入插件
+- [ ] 大熊好暖: 09-21 12:52:25 在搜索歌曲出来后 大熊好暖: 09-21 12:52:34 一般都是双击播放 大熊好暖: 09-21 12:54:16 这个是双击加入播放列表 可以优化 或者可以把这个双击做一个选项，让人选择
+- [ ] 播放页 样式模板选择 歌词背景律动很有沉浸感，但是黑胶唱片的专辑样式不是很喜欢，希望增加一个选项如图二一样只有圆形专辑封面
+- [x] 点击搜索框的 源图标实现快速切换
+- [ ] ai功能完善
+- [ ] 支持歌词隐藏
+- [x] 兼容多平台歌单导入
+- [x] 软件能不能记住上次打开的窗口大小，每次都要手动拉
+- [x] 歌单右键菜单
+- [x] 播放列表滚动条适配
+- [x] 暗色主题
+- [x] 歌单页支持修改封面

docs/guide/updateLog.md

@@ -1,10 +1,75 @@
 # 澜音版本更新日志
 
-
-
 ## 日志
 
-- 2025-9-17 **（V1.3.1）**
+- ###### 2025-10-3 (v1.3.12)
+
+  1. 支持暗黑主题
+  2. 调整插件页面ui
+
+- ###### 2025-9-29 (v1.3.11)
+
+  1. 新增插件在线导入
+
+- ###### 2025-9-28 (v1.3.10)
+
+  1. 优化播放列表
+  2. 单击播放
+  3. 右键菜单
+  4. 调整播放进度调粗细
+
+- ###### 2025-09-27 (v1.3.9)
+
+  1. debug:flac格式使用ffmpeg 
+  2. 修复高音质下载失效
+
+- ###### 2025-9-26 (v1.3.8)
+
+  1. 写入歌曲tag信息
+  2. 歌曲下载 选择音质
+  3. 歌单 头部自动压缩
+
+- ###### 2025-9-25 (v1.3.7)
+  1. 歌单
+     - 新增右键移除歌曲
+     - local 页歌单右键操作
+     - 歌单页支持修改封面
+  2. debug：右键菜单二级菜单位置决策
+
+- ###### 2025-9-22 (v1.3.6)
+  1. 歌单列表可以右键操作
+     - 播放
+     - 下载
+     - 添加到歌单
+     - 添加到播放列表
+  2. 播放列表滚动条
+  3. 搜索页切换源重新加载
+
+- ###### 2025-9-22 (v1.3.5)
+  1. 软件启动位置 宽高记忆 限制软件最大宽高
+  2. debug: 修复歌曲音质支持短缺问题
+
+- ###### 2025-9-21 (v1.3.4)
+  1. 紧急修复QQ音乐歌词失效问题
+
+- ###### 2025-9-21(v1.3.3)
+  1. 兼容多平台歌单导入
+  2. 点击搜索框的 源图标实现快速切换
+  3. debug: fix:列表删除按钮冒泡
+
+- ###### 2025-9-17 **(v1.3.2)**
+  1. 目录结构调整
+
+  2. **支持插件更新提示**
+
+     **洛雪** 插件请手动重装适配
+
+  3. **debug**
+     - SMTC 问题
+
+     - 歌曲缓存播放多次请求和多次缓存问题
+
+- ###### 2025-9-17 **（v1.3.1）**
   1. **设置功能页**
      - 缓存路径支持自定义
      - 下载路径支持自定义
@@ -12,4 +77,4 @@
      - 播放页面唱针可以拖动问题
      - 播放按钮加载中 因为自动下一曲 导致动画变形问题
      - **SMTC** 功能 系统显示**未知应用**问题
-     - 播放页歌词**字体粗细**偶现丢失问题
+     - 播放页歌词**字体粗细**偶现丢失问题

docs/guide/used/playList.md

@@ -3,7 +3,7 @@
 ## 基础使用
 
 1. 默认情况下，播放 **「搜索」「歌单」** 双击中的歌曲时，会自动将该歌曲添加到 **「列表」** 中的末尾后并不会播放，这与手动将歌曲添加到 **「列表」** 等价，亦或是通过点击歌曲前面小三角播放<img src="./assets/image-20250916132248046.png" alt="image-20250916132248046" style="float:right" />可以添加到歌曲开头也可进行该歌曲添加到 **「列表」** 中的开头并播放。歌曲会按照你选择的播放顺序进行播放。
-2. 对于 **「列表」** 歌曲的顺序可通过展开长按 **1.5s** 后可以进行拖拽排序，歌曲排序实时保存到本地 **LocalStorage**<img src="./assets/image-20250916133531421.png" alt="image-20250916133531421" style="zoom: 20%;" />
+2. 对于 **「列表」** 歌曲的顺序可通过展开长按 **1.5s** 后可以进行拖拽排序，歌曲排序实时保存到本地 **LocalStorage**<img src="./assets/image-20250916133531421.png" alt="image-20250916133531421" style="zoom: 50%;" />
 
 ## 歌曲列表的导出和分享
 
@@ -23,6 +23,4 @@
 
    歌单将自动选取第一首 **有效封面**[^1] 为歌单
 
-
-
-[^1]: url正确的歌曲封面
+[^1]: url正确的歌曲封面

docs/index.md

@@ -120,7 +120,7 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 
 ## 文档与资源
 
-- [产品设计文档](./guide/design)：涵盖项目架构、核心功能设计和开发规范（不含任何音乐数据源信息）。
+- [产品设计文档](#)：涵盖项目架构、核心功能设计和开发规范（不含任何音乐数据源信息）。
 - [插件开发文档](./guide/CeruMusicPluginDev)：仅提供插件开发技术规范，**明确要求插件开发者需遵守数据来源平台的用户协议与版权法**，禁止开发、传播获取非公开数据的插件。
 
 ## 开源许可
@@ -132,7 +132,7 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 欢迎开发者贡献代码与反馈建议，贡献内容需符合以下要求：
 
 1. 仅涉及播放器框架功能优化、bug 修复、文档完善，不包含任何音乐数据源相关代码。
-2. 遵循 [Git 提交规范](./guide/design#git提交规范) 并确保代码符合项目风格指南。
+2. 遵循 [Git 提交规范](#) 并确保代码符合项目风格指南。
 3. 贡献的代码需无第三方版权纠纷，且不违反开源许可协议。
 
 ## 联系方式

docs/plugin-notice-test.js

@@ -0,0 +1,84 @@
+// 测试插件通知功能的示例插件
+// 这个文件可以用来测试 NoticeCenter 功能
+
+const pluginInfo = {
+  name: '测试通知插件',
+  version: '1.0.0',
+  author: 'CeruMusic Team',
+  description: '用于测试插件通知功能的示例插件',
+  type: 'cr'
+}
+
+const sources = [
+  {
+    name: 'test',
+    qualities: ['128k', '320k']
+  }
+]
+
+// 模拟音乐URL获取函数
+async function musicUrl(source, musicInfo, quality) {
+  console.log('测试插件：获取音乐URL')
+
+  // 测试不同类型的通知
+  setTimeout(() => {
+    // 测试信息通知
+    this.cerumusic.NoticeCenter('info', {
+      title: '信息通知',
+      message: '这是一个信息通知测试',
+      content: '插件正在正常工作'
+    })
+  }, 1000)
+
+  setTimeout(() => {
+    // 测试警告通知
+    this.cerumusic.NoticeCenter('warning', {
+      title: '警告通知',
+      message: '这是一个警告通知测试',
+      content: '请注意某些设置'
+    })
+  }, 2000)
+
+  setTimeout(() => {
+    // 测试成功通知
+    this.cerumusic.NoticeCenter('success', {
+      title: '成功通知',
+      message: '操作已成功完成',
+      content: '音乐URL获取成功'
+    })
+  }, 3000)
+
+  setTimeout(() => {
+    // 测试更新通知
+    this.cerumusic.NoticeCenter('update', {
+      title: '插件更新',
+      message: '发现新版本 v2.0.0，是否立即更新？',
+      url: 'https://example.com/plugin-update.js',
+      version: '2.0.0',
+      pluginInfo: {
+        name: '测试通知插件',
+        type: 'cr',
+        forcedUpdate: false
+      }
+    })
+  }, 4000)
+
+  setTimeout(() => {
+    // 测试错误通知
+    this.cerumusic.NoticeCenter('error', {
+      title: '错误通知',
+      message: '这是一个错误通知测试',
+      error: '模拟的错误信息'
+    })
+  }, 5000)
+
+  // 返回一个测试URL
+  return 'https://example.com/test-music.mp3'
+}
+
+// 导出插件
+module.exports = {
+  pluginInfo,
+  sources,
+  musicUrl
+}

docs/plugin-notice-usage.md

@@ -0,0 +1,216 @@
+# 插件通知系统使用说明
+
+## 概述
+
+CeruMusic 插件通知系统允许插件向用户显示各种类型的通知对话框，包括信息、警告、错误、成功和更新通知。
+
+## 功能特性
+
+### 🎯 支持的通知类型
+
+1. **信息通知 (info)** - 显示一般信息
+2. **警告通知 (warning)** - 显示警告信息
+3. **错误通知 (error)** - 显示错误信息
+4. **成功通知 (success)** - 显示成功信息
+5. **更新通知 (update)** - 显示插件更新信息，支持一键更新
+
+### 🎨 界面特性
+
+- 使用 TDesign 组件库，界面美观统一
+- 支持深色主题适配
+- 响应式设计，移动端友好
+- 不同通知类型有对应的图标和颜色
+
+### ⚡ 技术特性
+
+- 基于 Electron IPC 通信
+- TypeScript 类型安全
+- 异步操作支持
+- 错误处理完善
+
+## 使用方法
+
+### 在插件中调用通知
+
+```javascript
+// 基本用法
+this.cerumusic.NoticeCenter(type, data)
+
+// 信息通知
+this.cerumusic.NoticeCenter('info', {
+  title: '插件信息',
+  message: '这是一条信息通知',
+  content: '详细的信息内容'
+})
+
+// 警告通知
+this.cerumusic.NoticeCenter('warning', {
+  title: '注意',
+  message: '这是一条警告信息',
+  content: '请检查相关设置'
+})
+
+// 错误通知
+this.cerumusic.NoticeCenter('error', {
+  title: '错误',
+  message: '操作失败',
+  error: '具体的错误信息'
+})
+
+// 成功通知
+this.cerumusic.NoticeCenter('success', {
+  title: '成功',
+  message: '操作已成功完成'
+})
+
+// 更新通知（特殊）
+this.cerumusic.NoticeCenter('update', {
+  title: '插件更新',
+  message: '发现新版本，是否立即更新？',
+  url: 'https://example.com/plugin-update.js',
+  version: '2.0.0',
+  pluginInfo: {
+    name: '插件名称',
+    type: 'cr', // 'cr' 或 'lx'
+    forcedUpdate: false
+  }
+})
+```
+
+### 参数说明
+
+#### 通用参数 (data 对象)
+
+| 参数    | 类型   | 必填 | 说明                           |
+| ------- | ------ | ---- | ------------------------------ |
+| title   | string | 否   | 通知标题，不提供时使用默认标题 |
+| message | string | 否   | 通知消息内容                   |
+| content | string | 否   | 详细内容（与 message 二选一）  |
+
+#### 更新通知特有参数
+
+| 参数                    | 类型         | 必填 | 说明             |
+| ----------------------- | ------------ | ---- | ---------------- |
+| url                     | string       | 是   | 插件更新下载链接 |
+| version                 | string       | 否   | 新版本号         |
+| pluginInfo.name         | string       | 否   | 插件名称         |
+| pluginInfo.type         | 'cr' \| 'lx' | 否   | 插件类型         |
+| pluginInfo.forcedUpdate | boolean      | 否   | 是否强制更新     |
+
+#### 错误通知特有参数
+
+| 参数  | 类型   | 必填 | 说明         |
+| ----- | ------ | ---- | ------------ |
+| error | string | 否   | 具体错误信息 |
+
+## 实现原理
+
+### 架构图
+
+```
+插件代码
+    ↓ (调用 NoticeCenter)
+CeruMusicPluginHost
+    ↓ (sendPluginNotice)
+pluginNotice.ts (主进程)
+    ↓ (IPC 通信)
+PluginNoticeDialog.vue (渲染进程)
+    ↓ (显示对话框)
+用户界面
+```
+
+### 文件结构
+
+```
+src/
+├── main/
+│   ├── events/
+│   │   └── pluginNotice.ts          # 主进程通知处理
+│   └── services/plugin/manager/
+│       └── CeruMusicPluginHost.ts   # 插件主机
+├── renderer/src/
+│   ├── components/
+│   │   └── PluginNoticeDialog.vue   # 通知对话框组件
+│   └── App.vue                      # 主应用（注册组件）
+└── preload/
+    └── index.ts                     # IPC API 定义
+```
+
+## 测试
+
+### 使用测试插件
+
+1. 将 `docs/plugin-notice-test.js` 作为插件加载
+2. 调用插件的 `musicUrl` 方法
+3. 观察不同类型的通知是否正确显示
+
+### 测试场景
+
+- [x] 信息通知显示
+- [x] 警告通知显示
+- [x] 错误通知显示
+- [x] 成功通知显示
+- [x] 更新通知显示（带更新按钮）
+- [x] 更新按钮功能
+- [x] 对话框关闭功能
+- [x] 响应式布局
+- [x] 深色主题适配
+
+## 注意事项
+
+1. **URL 验证**: 更新通知的 URL 必须是有效的 HTTP/HTTPS 链接
+2. **错误处理**: 所有通知操作都有完善的错误处理机制
+3. **性能考虑**: 避免频繁发送通知，可能影响用户体验
+4. **类型安全**: 使用 TypeScript 确保参数类型正确
+
+## 扩展功能
+
+### 未来可能的增强
+
+- [ ] 通知历史记录
+- [ ] 通知优先级系统
+- [ ] 批量通知管理
+- [ ] 自定义通知样式
+- [ ] 通知声音提醒
+- [ ] 通知位置自定义
+
+## 故障排除
+
+### 常见问题
+
+1. **通知不显示**
+   - 检查主窗口是否存在
+   - 确认 IPC 通信是否正常
+   - 查看控制台错误信息
+
+2. **更新按钮无响应**
+   - 确认更新 URL 是否有效
+   - 检查网络连接
+   - 查看主进程日志
+
+3. **样式显示异常**
+   - 确认 TDesign 组件库已正确加载
+   - 检查 CSS 样式是否冲突
+   - 验证主题配置
+
+### 调试方法
+
+```javascript
+// 在插件中添加调试日志
+console.log('[Plugin] 发送通知:', type, data)
+
+// 在渲染进程中监听通知
+window.api.on('plugin-notice', (_, notice) => {
+  console.log('[Renderer] 收到通知:', notice)
+})
+```
+
+## 更新日志
+
+### v1.0.0 (2025-09-20)
+
+- ✨ 初始版本发布
+- ✨ 支持 5 种通知类型
+- ✨ 完整的 TypeScript 类型定义
+- ✨ 响应式设计和深色主题支持
+- ✨ 完善的错误处理机制

electron-builder.yml

@@ -12,6 +12,7 @@ files:
   - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
 asarUnpack:
   - resources/**
+  - node_modules/ffmpeg-static/**
 win:
   executableName: ceru-music
   icon: 'resources/icons/icon.ico'
@@ -20,18 +21,16 @@ win:
       arch:
         - x64
         - ia32
-  # 简化版本信息设置，避免rcedit错误
+    - target: zip
+      arch:
+        - x64
+        - ia32
   fileAssociations:
     - ext: cerumusic
       name: CeruMusic File
       description: CeruMusic playlist file
-  # 如果有证书文件，取消注释以下配置
-  # certificateFile: path/to/certificate.p12
-  # certificatePassword: your-password
-  # 或者使用证书存储
-  # certificateSubjectName: "Your Company Name"
 nsis:
-  artifactName: ${name}-${version}-${arch}-setup.${ext}
+  artifactName: ${name}-${version}-win-${arch}-setup.${ext}
   shortcutName: ${productName}
   uninstallDisplayName: ${productName}
   createDesktopShortcut: always
@@ -43,23 +42,40 @@ nsis:
 mac:
   icon: 'resources/icons/icon.icns'
   entitlementsInherit: build/entitlements.mac.plist
+  target:
+    - target: dmg
+      arch:
+        - universal
+    - target: zip
+      arch:
+        - universal
   extendInfo:
     - NSDocumentsFolderUsageDescription: 需要访问文档文件夹来保存和打开您创建的文件。
-    - NSDownloadsFolderUsageDescription: 需要访问下载文件夹来管理您下载的内容。
+    - NSDownloadsFolderUsageDescription: 需要访问下载文件夹来管理您下载的歌曲。
   notarize: false
 dmg:
-  artifactName: ${name}-${version}.${ext}
+  artifactName: ${name}-${version}-${arch}.${ext}
   title: ${productName}
 linux:
   icon: 'resources/icons'
   target:
-    - AppImage
-    - snap
-    - deb
+    - target: AppImage
+      arch:
+        - x64
+    - target: snap
+      arch:
+        - x64
+    - target: deb
+      arch:
+        - x64
   maintainer: electronjs.org
   category: Utility
 appImage:
-  artifactName: ${name}-${version}.${ext}
+  artifactName: ${name}-${version}-linux-${arch}.${ext}
+snap:
+  artifactName: ${name}-${version}-linux-${arch}.${ext}
+deb:
+  artifactName: ${name}-${version}-linux-${arch}.${ext}
 npmRebuild: false
 publish:
   provider: generic

electron.vite.config.ts

@@ -6,6 +6,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { TDesignResolver } from '@tdesign-vue-next/auto-import-resolver'
 import wasm from 'vite-plugin-wasm'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 import topLevelAwait from 'vite-plugin-top-level-await'
 
 export default defineConfig({
@@ -36,14 +37,23 @@ export default defineConfig({
           TDesignResolver({
             library: 'vue-next'
           })
-        ]
+        ],
+        imports: [
+          'vue',
+          {
+            'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar']
+          }
+        ],
+        dts: true
       }),
       Components({
         resolvers: [
           TDesignResolver({
             library: 'vue-next'
-          })
-        ]
+          }),
+          NaiveUiResolver()
+        ],
+        dts: true
       })
     ],
     base: './',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ceru-music",
-  "version": "1.3.1",
+  "version": "1.3.13",
   "description": "一款简洁优雅的音乐播放器",
   "main": "./out/main/index.js",
   "author": "sqj,wldss,star",
@@ -8,7 +8,7 @@
   "homepage": "https://ceru.docs.shiqianjiang.cn",
   "scripts": {
     "format": "prettier --write .",
-    "lint": "eslint --cache . --fix",
+    "lint": "eslint --cache . --fix && yarn typecheck",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
     "typecheck:web": "vue-tsc --noEmit -p tsconfig.web.json --composite false",
     "typecheck": "yarn run typecheck:node && yarn run typecheck:web",
@@ -18,9 +18,12 @@
     "onlybuild": "electron-vite build  && electron-builder --win --x64",
     "postinstall": "electron-builder install-app-deps",
     "build:unpack": "yarn run build && electron-builder --dir",
-    "build:win": "yarn run build && electron-builder --win  --config --publish never",
+    "build:win": "yarn run build && electron-builder --win --x64 --config --publish never",
     "build:win32": "yarn run build && electron-builder --win --ia32 --config --publish never",
     "build:mac": "yarn run build && electron-builder --mac --config --publish never",
+    "build:mac:intel": "yarn run build && electron-builder --mac --x64 --config --publish never",
+    "build:mac:arm64": "yarn run build && electron-builder --mac --arm64 --config --publish never",
+    "build:mac:universal": "yarn run build && electron-builder --mac --universal --config --publish never",
     "build:linux": "yarn run build && electron-builder --linux --config --publish never",
     "build:deps": "electron-builder install-app-deps && yarn run build && electron-builder --win --x64 --config",
     "buildico": "electron-icon-builder --input=./resources/logo.png --output=resources --flatten",
@@ -44,6 +47,7 @@
     "@pixi/filter-bulge-pinch": "^5.1.1",
     "@pixi/filter-color-matrix": "^7.4.3",
     "@pixi/sprite": "^7.4.3",
+    "@types/fluent-ffmpeg": "^2.1.27",
     "@types/needle": "^3.3.0",
     "NeteaseCloudMusicApi": "^4.27.0",
     "animate.css": "^4.1.1",
@@ -53,6 +57,8 @@
     "dompurify": "^3.2.6",
     "electron-log": "^5.4.3",
     "electron-updater": "^6.3.9",
+    "ffmpeg-static": "^5.2.0",
+    "fluent-ffmpeg": "^2.1.3",
     "hpagent": "^1.2.0",
     "iconv-lite": "^0.7.0",
     "jss": "^10.10.0",
@@ -63,7 +69,10 @@
     "mitt": "^3.0.1",
     "needle": "^3.3.1",
     "node-fetch": "2",
+    "node-id3": "^0.2.9",
     "pinia": "^3.0.3",
+    "pinia-plugin-persistedstate": "^4.5.0",
+    "tdesign-icons-vue-next": "^0.4.1",
     "tdesign-vue-next": "^1.15.2",
     "vue-router": "^4.5.1",
     "zlib": "^1.0.5"
@@ -80,12 +89,14 @@
     "@types/node": "^22.16.5",
     "@types/node-fetch": "^2.6.13",
     "@vitejs/plugin-vue": "^6.0.0",
+    "@vueuse/core": "^13.9.0",
     "electron": "^38.1.0",
     "electron-builder": "^25.1.8",
     "electron-icon-builder": "^2.0.1",
     "electron-vite": "^4.0.0",
     "eslint": "^9.31.0",
     "eslint-plugin-vue": "^10.3.0",
+    "naive-ui": "^2.43.1",
     "prettier": "^3.6.2",
     "sass-embedded": "^1.90.0",
     "scss": "^0.2.4",

qodana.yaml

@@ -0,0 +1,3 @@
+version: '1.0'
+profile:
+  name: qodana.starter

scripts/genAst.js

@@ -0,0 +1,79 @@
+const fs = require('fs')
+const path = require('path')
+
+function generateTree(
+  dir,
+  prefix = '',
+  isLast = true,
+  excludeDirs = [
+    'node_modules',
+    'dist',
+    'out',
+    '.git',
+    '.kiro',
+    '.idea',
+    '.codebuddy',
+    '.vscode',
+    '.workflow',
+    'assets',
+    'resources',
+    'docs'
+  ]
+) {
+  const basename = path.basename(dir)
+
+  // 跳过排除的目录和隐藏文件
+  if (
+    basename.startsWith('.') &&
+    basename !== '.' &&
+    basename !== '..' &&
+    !['.github', '.workflow'].includes(basename)
+  ) {
+    return
+  }
+  if (excludeDirs.includes(basename)) {
+    return
+  }
+
+  // 当前项目显示
+  if (prefix === '') {
+    console.log(`${basename}/`)
+  } else {
+    const connector = isLast ? '└── ' : '├── '
+    const displayName = fs.statSync(dir).isDirectory() ? `${basename}/` : basename
+    console.log(prefix + connector + displayName)
+  }
+
+  if (!fs.statSync(dir).isDirectory()) {
+    return
+  }
+
+  try {
+    const items = fs
+      .readdirSync(dir)
+      .filter((item) => !item.startsWith('.') || ['.github', '.workflow'].includes(item))
+      .filter((item) => !excludeDirs.includes(item))
+      .sort((a, b) => {
+        // 目录排在前面，文件排在后面
+        const aIsDir = fs.statSync(path.join(dir, a)).isDirectory()
+        const bIsDir = fs.statSync(path.join(dir, b)).isDirectory()
+        if (aIsDir && !bIsDir) return -1
+        if (!aIsDir && bIsDir) return 1
+        return a.localeCompare(b)
+      })
+
+    const newPrefix = prefix + (isLast ? '    ' : '│   ')
+
+    items.forEach((item, index) => {
+      const isLastItem = index === items.length - 1
+      generateTree(path.join(dir, item), newPrefix, isLastItem, excludeDirs)
+    })
+  } catch (error) {
+    console.error(`Error reading directory: ${dir}`, error.message)
+  }
+}
+
+// 使用示例
+const targetDir = process.argv[2] || '.'
+console.log('项目文件结构:')
+generateTree(targetDir)

src/common/utils/tools.ts

@@ -1,150 +0,0 @@
-// 业务工具方法
-
-import { LX } from '../../types/global'
-
-export const toNewMusicInfo = (oldMusicInfo: any): LX.Music.MusicInfo => {
-  const meta: Record<string, any> = {
-    songId: oldMusicInfo.songmid, // 歌曲ID，local为文件路径
-    albumName: oldMusicInfo.albumName, // 歌曲专辑名称
-    picUrl: oldMusicInfo.img // 歌曲图片链接
-  }
-  const newInfo = {
-    id: `${oldMusicInfo.source}_${oldMusicInfo.songmid}`,
-    name: oldMusicInfo.name,
-    singer: oldMusicInfo.singer,
-    source: oldMusicInfo.source,
-    interval: oldMusicInfo.interval,
-    meta: meta as LX.Music.MusicInfoOnline['meta']
-  }
-
-  if (oldMusicInfo.source == 'local') {
-    meta.filePath = oldMusicInfo.filePath ?? oldMusicInfo.songmid ?? ''
-    meta.ext = oldMusicInfo.ext ?? /\.(\w+)$/.exec(meta.filePath)?.[1] ?? ''
-  } else {
-    meta.qualitys = oldMusicInfo.types
-    meta._qualitys = oldMusicInfo._types
-    meta.albumId = oldMusicInfo.albumId
-    if (meta._qualitys.flac32bit && !meta._qualitys.flac24bit) {
-      meta._qualitys.flac24bit = meta._qualitys.flac32bit
-      delete meta._qualitys.flac32bit
-
-      meta.qualitys = (meta.qualitys as any[]).map((quality) => {
-        if (quality.type == 'flac32bit') quality.type = 'flac24bit'
-        return quality
-      })
-    }
-
-    switch (oldMusicInfo.source) {
-      case 'kg':
-        meta.hash = oldMusicInfo.hash
-        newInfo.id = oldMusicInfo.songmid + '_' + oldMusicInfo.hash
-        break
-      case 'tx':
-        meta.strMediaMid = oldMusicInfo.strMediaMid
-        meta.id = oldMusicInfo.songId
-        meta.albumMid = oldMusicInfo.albumMid
-        break
-      case 'mg':
-        meta.copyrightId = oldMusicInfo.copyrightId
-        meta.lrcUrl = oldMusicInfo.lrcUrl
-        meta.mrcUrl = oldMusicInfo.mrcUrl
-        meta.trcUrl = oldMusicInfo.trcUrl
-        break
-    }
-  }
-
-  return newInfo
-}
-
-export const toOldMusicInfo = (minfo: LX.Music.MusicInfo) => {
-  const oInfo: Record<string, any> = {
-    name: minfo.name,
-    singer: minfo.singer,
-    source: minfo.source,
-    songmid: minfo.meta.songId,
-    interval: minfo.interval,
-    albumName: minfo.meta.albumName,
-    img: minfo.meta.picUrl ?? '',
-    typeUrl: {}
-  }
-  if (minfo.source == 'local') {
-    oInfo.filePath = minfo.meta.filePath
-    oInfo.ext = minfo.meta.ext
-    oInfo.albumId = ''
-    oInfo.types = []
-    oInfo._types = {}
-  } else {
-    oInfo.albumId = minfo.meta.albumId
-    oInfo.types = minfo.meta.qualitys
-    oInfo._types = minfo.meta._qualitys
-
-    switch (minfo.source) {
-      case 'kg':
-        oInfo.hash = minfo.meta.hash
-        break
-      case 'tx':
-        oInfo.strMediaMid = minfo.meta.strMediaMid
-        oInfo.albumMid = minfo.meta.albumMid
-        oInfo.songId = minfo.meta.id
-        break
-      case 'mg':
-        oInfo.copyrightId = minfo.meta.copyrightId
-        oInfo.lrcUrl = minfo.meta.lrcUrl
-        oInfo.mrcUrl = minfo.meta.mrcUrl
-        oInfo.trcUrl = minfo.meta.trcUrl
-        break
-    }
-  }
-
-  return oInfo
-}
-
-/**
- * 修复2.0.0-dev.8之前的新列表数据音质
- * @param musicInfo
- */
-export const fixNewMusicInfoQuality = (musicInfo: LX.Music.MusicInfo) => {
-  if (musicInfo.source == 'local') return musicInfo
-
-  // @ts-expect-error
-  if (musicInfo.meta._qualitys.flac32bit && !musicInfo.meta._qualitys.flac24bit) {
-    // @ts-expect-error
-    musicInfo.meta._qualitys.flac24bit = musicInfo.meta._qualitys.flac32bit
-    // @ts-expect-error
-    delete musicInfo.meta._qualitys.flac32bit
-
-    musicInfo.meta.qualitys = musicInfo.meta.qualitys.map((quality) => {
-      // @ts-expect-error
-      if (quality.type == 'flac32bit') quality.type = 'flac24bit'
-      return quality
-    })
-  }
-
-  return musicInfo
-}
-
-export const filterMusicList = <T extends LX.Music.MusicInfo>(list: T[]): T[] => {
-  const ids = new Set<string>()
-  return list.filter((s) => {
-    if (!s.id || ids.has(s.id) || !s.name) return false
-    if (s.singer == null) s.singer = ''
-    ids.add(s.id)
-    return true
-  })
-}
-
-const MAX_NAME_LENGTH = 80
-const MAX_FILE_NAME_LENGTH = 150
-export const clipNameLength = (name: string) => {
-  if (name.length <= MAX_NAME_LENGTH || !name.includes('、')) return name
-  const names = name.split('、')
-  let newName = names.shift()!
-  for (const name of names) {
-    if (newName.length + name.length > MAX_NAME_LENGTH) break
-    newName = newName + '、' + name
-  }
-  return newName
-}
-export const clipFileNameLength = (name: string) => {
-  return name.length > MAX_FILE_NAME_LENGTH ? name.substring(0, MAX_FILE_NAME_LENGTH) : name
-}

src/main/autoUpdate.ts

@@ -22,7 +22,7 @@ const UPDATE_API_URL = `${UPDATE_SERVER}/update/${process.platform}/${app.getVer
 // Alist API 配置
 const ALIST_BASE_URL = 'https://alist.shiqianjiang.cn' // 请替换为实际的 alist 域名
 const ALIST_USERNAME = 'ceruupdate'
-const ALIST_PASSWORD = '123456'
+const ALIST_PASSWORD = '123456' //登录公开的账号密码
 
 // Alist 认证 token
 let alistToken: string | null = null

src/main/events/directorySettings.ts

@@ -1,61 +1,19 @@
-import { ipcMain, dialog, app } from 'electron'
-import { join } from 'path'
-import fs from 'fs'
-import { promisify } from 'util'
-
-const mkdir = promisify(fs.mkdir)
-const access = promisify(fs.access)
-
-export const CONFIG_NAME = 'sqj_config.json'
-
-// 默认目录配置
-const getDefaultDirectories = () => {
-  const userDataPath = app.getPath('userData')
-  return {
-    cacheDir: join(userDataPath, 'music-cache'),
-    downloadDir: join(app.getPath('music'), 'CeruMusic/songs')
-  }
-}
-
-// 确保目录存在
-const ensureDirectoryExists = async (dirPath: string) => {
-  try {
-    await access(dirPath)
-  } catch {
-    await mkdir(dirPath, { recursive: true })
-  }
-}
+import { ipcMain, dialog } from 'electron'
+import { configManager } from '../services/ConfigManager'
 
 // 获取当前目录配置
 ipcMain.handle('directory-settings:get-directories', async () => {
   try {
-    const defaults = getDefaultDirectories()
-
-    // 从配置文件读取用户设置的目录
-    const configPath = join(app.getPath('userData'), CONFIG_NAME)
-    let userConfig: any = {}
-
-    try {
-      const configData = fs.readFileSync(configPath, 'utf-8')
-      userConfig = JSON.parse(configData)
-    } catch {
-      // 配置文件不存在或读取失败，使用默认配置
-    }
-
-    const directories = {
-      cacheDir: userConfig.cacheDir || defaults.cacheDir,
-      downloadDir: userConfig.downloadDir || defaults.downloadDir
-    }
+    const directories = configManager.getDirectories()
 
     // 确保目录存在
-    await ensureDirectoryExists(directories.cacheDir)
-    await ensureDirectoryExists(directories.downloadDir)
+    await configManager.ensureDirectoryExists(directories.cacheDir)
+    await configManager.ensureDirectoryExists(directories.downloadDir)
 
     return directories
   } catch (error) {
     console.error('获取目录配置失败:', error)
-    const defaults = getDefaultDirectories()
-    return defaults
+    return configManager.getDirectories() // 返回默认配置
   }
 })
 
@@ -70,7 +28,7 @@ ipcMain.handle('directory-settings:select-cache-dir', async () => {
 
     if (!result.canceled && result.filePaths.length > 0) {
       const selectedPath = result.filePaths[0]
-      await ensureDirectoryExists(selectedPath)
+      await configManager.ensureDirectoryExists(selectedPath)
       return { success: true, path: selectedPath }
     }
 
@@ -92,7 +50,7 @@ ipcMain.handle('directory-settings:select-download-dir', async () => {
 
     if (!result.canceled && result.filePaths.length > 0) {
       const selectedPath = result.filePaths[0]
-      await ensureDirectoryExists(selectedPath)
+      await configManager.ensureDirectoryExists(selectedPath)
       return { success: true, path: selectedPath }
     }
 
@@ -106,16 +64,8 @@ ipcMain.handle('directory-settings:select-download-dir', async () => {
 // 保存目录配置
 ipcMain.handle('directory-settings:save-directories', async (_, directories) => {
   try {
-    const configPath = join(app.getPath('userData'), CONFIG_NAME)
-
-    // 确保目录存在
-    await ensureDirectoryExists(directories.cacheDir)
-    await ensureDirectoryExists(directories.downloadDir)
-
-    // 保存配置
-    fs.writeFileSync(configPath, JSON.stringify(directories, null, 2))
-
-    return { success: true, message: '目录配置已保存' }
+    const success = await configManager.saveDirectories(directories)
+    return { success, message: success ? '目录配置已保存' : '保存配置失败' }
   } catch (error) {
     console.error('保存目录配置失败:', error)
     return { success: false, message: '保存配置失败' }
@@ -125,21 +75,19 @@ ipcMain.handle('directory-settings:save-directories', async (_, directories) =>
 // 重置为默认目录
 ipcMain.handle('directory-settings:reset-directories', async () => {
   try {
-    const defaults = getDefaultDirectories()
-    const configPath = join(app.getPath('userData'), CONFIG_NAME)
+    // 重置目录配置
+    configManager.delete('cacheDir')
+    configManager.delete('downloadDir')
+    configManager.saveConfig()
 
-    // 删除配置文件
-    try {
-      fs.unlinkSync(configPath)
-    } catch {
-      // 文件不存在，忽略错误
-    }
+    // 获取默认目录
+    const directories = configManager.getDirectories()
 
     // 确保默认目录存在
-    await ensureDirectoryExists(defaults.cacheDir)
-    await ensureDirectoryExists(defaults.downloadDir)
+    await configManager.ensureDirectoryExists(directories.cacheDir)
+    await configManager.ensureDirectoryExists(directories.downloadDir)
 
-    return { success: true, directories: defaults }
+    return { success: true, directories }
   } catch (error) {
     console.error('重置目录配置失败:', error)
     return { success: false, message: '重置配置失败' }
@@ -161,6 +109,9 @@ ipcMain.handle('directory-settings:open-directory', async (_, dirPath) => {
 // 获取目录大小
 ipcMain.handle('directory-settings:get-directory-size', async (_, dirPath) => {
   try {
+    const fs = require('fs')
+    const { join } = require('path')
+
     const getDirectorySize = (dirPath: string): number => {
       let totalSize = 0
 

src/main/events/pluginNotice.ts

@@ -0,0 +1,161 @@
+/*
+ * Copyright (c) 2025. 时迁酱 Inc. All rights reserved.
+ *
+ * This software is the confidential and proprietary information of 时迁酱.
+ * Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * @author 时迁酱，无聊的霜霜，Star
+ * @since 2025-9-20
+ * @version 1.0
+ */
+
+import { BrowserWindow } from 'electron'
+
+export interface PluginNoticeData {
+  type: 'error' | 'info' | 'success' | 'warn' | 'update'
+  data: {
+    title?: string
+    content?: string
+    message?: string
+    url?: string
+    version?: string
+    pluginInfo?: {
+      name?: string
+      type?: 'lx' | 'cr'
+      forcedUpdate?: boolean
+    }
+  }
+  currentVersion?: string
+  timestamp?: number
+  pluginName?: string
+}
+
+export interface DialogNotice {
+  type: string
+  data: any
+  timestamp: number
+  pluginName: string
+  dialogType: 'update' | 'info' | 'error' | 'warning' | 'success'
+  title: string
+  message: string
+  updateUrl?: string
+  pluginType?: 'lx' | 'cr'
+  currentVersion?: string
+  newVersion?: string
+  actions: Array<{
+    text: string
+    type: 'cancel' | 'update' | 'confirm'
+    primary?: boolean
+  }>
+}
+
+/**
+ * 验证 URL 是否有效
+ */
+function isValidUrl(url: string): boolean {
+  try {
+    const urlObj = new URL(url)
+    return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
+  } catch {
+    return false
+  }
+}
+
+/**
+ * 根据通知类型获取标题
+ */
+function getNoticeTitle(type: string): string {
+  const titleMap: Record<string, string> = {
+    update: '插件更新',
+    error: '插件错误',
+    warning: '插件警告',
+    info: '插件信息',
+    success: '操作成功'
+  }
+  return titleMap[type] || '插件通知'
+}
+
+/**
+ * 根据通知类型获取默认消息
+ */
+function getDefaultMessage(type: string, data: any, pluginName: string): string {
+  switch (type) {
+    case 'error':
+      return `插件 "${pluginName}" 发生错误: ${data?.error || data?.message || '未知错误'}`
+    case 'warning':
+      return `插件 "${pluginName}" 警告: ${data?.warning || data?.message || '需要注意'}`
+    case 'success':
+      return `插件 "${pluginName}" 操作成功: ${data?.message || ''}`
+    case 'info':
+    default:
+      return data?.message || `插件 "${pluginName}" 信息: ${JSON.stringify(data)}`
+  }
+}
+
+/**
+ * 发送插件通知到渲染进程
+ */
+export function sendPluginNotice(noticeData: PluginNoticeData, pluginName?: string): void {
+  try {
+    console.log(`[CeruMusic] 插件通知: ${noticeData.type}`, noticeData.data)
+
+    // 获取主窗口实例
+    const mainWindow = BrowserWindow.getAllWindows().find((win) => !win.isDestroyed())
+    if (!mainWindow) {
+      console.warn('[CeruMusic] 未找到主窗口，无法发送通知')
+      return
+    }
+
+    // 构建通知数据
+    const baseNoticeData = {
+      type: noticeData.type,
+      data: noticeData.data,
+      timestamp: noticeData.timestamp || Date.now(),
+      pluginName: pluginName || noticeData.pluginName || 'Unknown Plugin'
+    }
+
+    // 根据通知类型处理不同的逻辑
+    if (noticeData.type === 'update' && noticeData.data?.url && isValidUrl(noticeData.data.url)) {
+      // 更新通知 - 显示带更新按钮的对话框
+      const updateNotice: DialogNotice = {
+        ...baseNoticeData,
+        dialogType: 'update',
+        title: noticeData.data.title || '插件更新',
+        message: noticeData.data.content || `插件 "${baseNoticeData.pluginName}" 有新版本可用`,
+        updateUrl: noticeData.data.url,
+        pluginType: noticeData.data.pluginInfo?.type,
+        currentVersion: noticeData.currentVersion || '未知', // 这个需要从插件实例获取
+        newVersion: noticeData.data.version,
+        actions: [
+          { text: '稍后更新', type: 'cancel' },
+          { text: '立即更新', type: 'update', primary: true }
+        ]
+      }
+
+      mainWindow.webContents.send('plugin-notice', updateNotice)
+    } else {
+      // 普通通知 - 显示信息对话框
+      const infoNotice: DialogNotice = {
+        ...baseNoticeData,
+        dialogType:
+          noticeData.type === 'error'
+            ? 'error'
+            : noticeData.type === 'warn'
+              ? 'warning'
+              : noticeData.type === 'success'
+                ? 'success'
+                : 'info',
+        title: noticeData.data.title || getNoticeTitle(noticeData.type),
+        message:
+          noticeData.data.message ||
+          noticeData.data.content ||
+          getDefaultMessage(noticeData.type, noticeData.data, baseNoticeData.pluginName),
+        actions: [{ text: '我知道了', type: 'confirm', primary: true }]
+      }
+
+      mainWindow.webContents.send('plugin-notice', infoNotice)
+    }
+  } catch (error: any) {
+    console.error('[CeruMusic] 发送插件通知失败:', error.message)
+  }
+}

src/main/index.ts

@@ -1,9 +1,9 @@
-import { app, shell, BrowserWindow, ipcMain, Tray, Menu } from 'electron'
+import { app, shell, BrowserWindow, ipcMain, Tray, Menu, screen } from 'electron'
+import { configManager } from './services/ConfigManager'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/logo.png?asset'
 import path from 'node:path'
-import musicService from './services/music'
 import pluginService from './services/plugin'
 import aiEvents from './events/ai'
 import './services/musicSdk/index'
@@ -89,20 +89,27 @@ function createTray(): void {
 
 function createWindow(): void {
   // return
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
+  // 获取保存的窗口位置和大小
+  const savedBounds = configManager.getWindowBounds()
+
+  // 获取屏幕尺寸
+  const primaryDisplay = screen.getPrimaryDisplay()
+  // 使用完整屏幕尺寸而不是工作区域，以支持真正的全屏模式
+  const { width: screenWidth, height: screenHeight } = primaryDisplay.size
+
+  // 默认窗口配置
+  const defaultOptions = {
     width: 1100,
     height: 750,
     minWidth: 1100,
     minHeight: 670,
+    maxWidth: screenWidth,
+    maxHeight: screenHeight,
     show: false,
-    center: true,
+    center: !savedBounds, // 如果有保存的位置，则不居中
     autoHideMenuBar: true,
-    // alwaysOnTop: true,
-    // 移除最大宽高限制，以便全屏模式能够铺满整个屏幕
-    titleBarStyle: 'hidden',
+    titleBarStyle: 'hidden' as const,
     ...(process.platform === 'linux' ? { icon } : {}),
-    // ...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {}),
     icon: path.join(__dirname, '../../resources/logo.ico'),
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
@@ -112,9 +119,57 @@ function createWindow(): void {
       contextIsolation: false,
       backgroundThrottling: false
     }
-  })
+  }
+
+  // 如果有保存的窗口位置和大小，则使用保存的值
+  if (savedBounds) {
+    Object.assign(defaultOptions, savedBounds)
+  }
+
+  // Create the browser window.
+  mainWindow = new BrowserWindow(defaultOptions)
   if (process.platform == 'darwin') mainWindow.setWindowButtonVisibility(false)
 
+  // 监听窗口移动和调整大小事件，保存窗口位置和大小
+  mainWindow.on('moved', () => {
+    if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isFullScreen()) {
+      const bounds = mainWindow.getBounds()
+      configManager.saveWindowBounds(bounds)
+    }
+  })
+
+  mainWindow.on('resized', () => {
+    if (mainWindow && !mainWindow.isMaximized() && !mainWindow.isFullScreen()) {
+      const bounds = mainWindow.getBounds()
+
+      // 获取当前屏幕尺寸
+      const { screen } = require('electron')
+      const currentDisplay = screen.getDisplayMatching(bounds)
+      const { width: screenWidth, height: screenHeight } = currentDisplay.workAreaSize
+
+      // 确保窗口不超过屏幕尺寸
+      let needResize = false
+      const newBounds = { ...bounds }
+
+      if (bounds.width > screenWidth) {
+        newBounds.width = screenWidth
+        needResize = true
+      }
+
+      if (bounds.height > screenHeight) {
+        newBounds.height = screenHeight
+        needResize = true
+      }
+
+      // 如果需要调整大小，应用新的尺寸
+      if (needResize) {
+        mainWindow.setBounds(newBounds)
+      }
+
+      configManager.saveWindowBounds(newBounds)
+    }
+  })
+
   mainWindow.on('ready-to-show', () => {
     mainWindow?.show()
   })
@@ -159,6 +214,15 @@ ipcMain.handle('service-plugin-selectAndAddPlugin', async (_, type): Promise<any
   }
 })
 
+ipcMain.handle('service-plugin-downloadAndAddPlugin', async (_, url, type): Promise<any> => {
+  try {
+    return await pluginService.downloadAndAddPlugin(url, type)
+  } catch (error: any) {
+    console.error('Error downloading and adding plugin:', error)
+    return { error: error.message }
+  }
+})
+
 ipcMain.handle('service-plugin-addPlugin', async (_, pluginCode, pluginName): Promise<any> => {
   try {
     return await pluginService.addPlugin(pluginCode, pluginName)
@@ -205,10 +269,6 @@ ipcMain.handle('service-plugin-uninstallPlugin', async (_, pluginId): Promise<an
   }
 })
 
-ipcMain.handle('service-music-request', async (_, api, args) => {
-  return await musicService.request(api, args)
-})
-
 // 获取应用版本号
 ipcMain.handle('get-app-version', () => {
   return app.getVersion()
@@ -218,6 +278,7 @@ aiEvents(mainWindow)
 import './events/musicCache'
 import './events/songList'
 import './events/directorySettings'
+import './events/pluginNotice'
 import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/autoUpdate'
 
 // This method will be called when Electron has finished

src/main/services/ConfigManager.ts

@@ -0,0 +1,162 @@
+import { app } from 'electron'
+import { join } from 'path'
+import fs from 'fs'
+import { promisify } from 'util'
+
+const mkdir = promisify(fs.mkdir)
+const access = promisify(fs.access)
+
+export const CONFIG_NAME = 'sqj_config.json'
+
+// 配置管理器类
+export class ConfigManager {
+  private static instance: ConfigManager
+  private configPath: string
+  private config: Record<string, any> = {}
+
+  private constructor() {
+    this.configPath = join(app.getPath('userData'), CONFIG_NAME)
+    this.loadConfig()
+  }
+
+  // 单例模式获取实例
+  public static getInstance(): ConfigManager {
+    if (!ConfigManager.instance) {
+      ConfigManager.instance = new ConfigManager()
+    }
+    return ConfigManager.instance
+  }
+
+  // 加载配置
+  private loadConfig(): void {
+    try {
+      if (fs.existsSync(this.configPath)) {
+        const configData = fs.readFileSync(this.configPath, 'utf-8')
+        this.config = JSON.parse(configData)
+      }
+    } catch (error) {
+      console.error('加载配置失败:', error)
+      this.config = {}
+    }
+  }
+
+  // 保存配置
+  public saveConfig(): boolean {
+    try {
+      fs.writeFileSync(this.configPath, JSON.stringify(this.config, null, 2))
+      return true
+    } catch (error) {
+      console.error('保存配置失败:', error)
+      return false
+    }
+  }
+
+  // 获取配置项
+  public get<T>(key: string, defaultValue?: T): T {
+    const value = this.config[key]
+    return value !== undefined ? value : (defaultValue as T)
+  }
+
+  // 设置配置项
+  public set<T>(key: string, value: T): void {
+    this.config[key] = value
+  }
+
+  // 删除配置项
+  public delete(key: string): void {
+    delete this.config[key]
+  }
+
+  // 重置所有配置
+  public reset(): void {
+    this.config = {}
+    this.saveConfig()
+  }
+
+  // 获取所有配置
+  public getAll(): Record<string, any> {
+    return { ...this.config }
+  }
+
+  // 确保目录存在
+  public async ensureDirectoryExists(dirPath: string): Promise<void> {
+    try {
+      await access(dirPath)
+    } catch {
+      await mkdir(dirPath, { recursive: true })
+    }
+  }
+
+  // 获取目录配置
+  public getDirectories() {
+    const userDataPath = app.getPath('userData')
+    const defaults = {
+      cacheDir: join(userDataPath, 'music-cache'),
+      downloadDir: join(app.getPath('music'), 'CeruMusic/songs')
+    }
+
+    return {
+      cacheDir: this.get('cacheDir', defaults.cacheDir),
+      downloadDir: this.get('downloadDir', defaults.downloadDir)
+    }
+  }
+
+  // 保存目录配置
+  public async saveDirectories(directories: {
+    cacheDir: string
+    downloadDir: string
+  }): Promise<boolean> {
+    try {
+      await this.ensureDirectoryExists(directories.cacheDir)
+      await this.ensureDirectoryExists(directories.downloadDir)
+
+      this.set('cacheDir', directories.cacheDir)
+      this.set('downloadDir', directories.downloadDir)
+      return this.saveConfig()
+    } catch (error) {
+      console.error('保存目录配置失败:', error)
+      return false
+    }
+  }
+
+  // 保存窗口位置和大小
+  public saveWindowBounds(bounds: { x: number; y: number; width: number; height: number }): void {
+    this.set('windowBounds', bounds)
+    this.saveConfig()
+  }
+
+  // 获取窗口位置和大小，确保窗口完全在屏幕内
+  public getWindowBounds(): { x: number; y: number; width: number; height: number } | null {
+    const bounds = this.get<{ x: number; y: number; width: number; height: number } | null>(
+      'windowBounds',
+      null
+    )
+
+    if (bounds) {
+      const { screen } = require('electron')
+
+      // 获取主显示器
+      const primaryDisplay = screen.getPrimaryDisplay()
+      const { width: screenWidth, height: screenHeight } = primaryDisplay.workAreaSize
+
+      // 确保窗口在屏幕内
+      if (bounds.x < 0) bounds.x = 0
+      if (bounds.y < 0) bounds.y = 0
+
+      // 确保窗口右侧不超出屏幕
+      if (bounds.x + bounds.width > screenWidth) {
+        bounds.x = Math.max(0, screenWidth - bounds.width)
+      }
+
+      // 确保窗口底部不超出屏幕
+      if (bounds.y + bounds.height > screenHeight) {
+        bounds.y = Math.max(0, screenHeight - bounds.height)
+      }
+    }
+
+    return bounds
+  }
+}
+
+// 导出单例实例
+export const configManager = ConfigManager.getInstance()

src/main/services/music/index.ts

@@ -1,77 +0,0 @@
-import { MusicServiceBase, ServiceNamesType, ServiceArgsType } from './service-base'
-import {
-  GetToplistArgs,
-  SearchArgs,
-  GetLyricArgs,
-  GetSongDetailArgs,
-  GetSongUrlArgs,
-  GetToplistDetailArgs,
-  GetListSongsArgs,
-  DownloadSingleSongArgs
-} from './service-base'
-import { netEaseService } from './net-ease-service'
-import { AxiosError } from 'axios'
-
-const musicService: MusicServiceBase = netEaseService
-
-type Response = {
-  success: boolean
-  data?: any
-  error?: any
-}
-
-async function request(api: ServiceNamesType, args: ServiceArgsType): Promise<any> {
-  const res: Response = { success: false }
-  try {
-    switch (api) {
-      case 'search':
-        res.data = await musicService.search(args as SearchArgs)
-        break
-      case 'getSongDetail':
-        res.data = await musicService.getSongDetail(args as GetSongDetailArgs)
-        break
-      case 'getSongUrl':
-        res.data = await musicService.getSongUrl(args as GetSongUrlArgs)
-        break
-      case 'getLyric':
-        res.data = await musicService.getLyric(args as GetLyricArgs)
-        break
-      case 'getToplist':
-        res.data = await musicService.getToplist(args as GetToplistArgs)
-        break
-      case 'getToplistDetail':
-        res.data = await musicService.getToplistDetail(args as GetToplistDetailArgs)
-        break
-      case 'getListSongs':
-        res.data = await musicService.getListSongs(args as GetListSongsArgs)
-        break
-      case 'downloadSingleSong':
-        res.data = await musicService.downloadSingleSong(args as DownloadSingleSongArgs)
-        break
-      default:
-        throw new Error(`未知的方法: ${api}`)
-    }
-
-    res.success = true
-  } catch (error: any) {
-    if (error instanceof AxiosError) {
-      error.message = '网络错误'
-    }
-
-    console.error('请求失败: ', error)
-    res.error = error
-  }
-
-  return res
-}
-
-export default { request }
-// netEaseService
-//   .search({
-//     keyword: '稻香',
-//     type: 1,
-//     limit: 25
-//   })
-//   .then((res) => {
-//     console.log(res)
-//   })

src/main/services/music/net-ease-service.ts

@@ -1,398 +0,0 @@
-import path from 'path'
-import fs from 'fs'
-import fsPromise from 'fs/promises'
-
-import NeteaseCloudMusicApi from 'NeteaseCloudMusicApi'
-import { axiosClient, MusicServiceBase } from './service-base'
-import { pipeline } from 'node:stream/promises'
-import pluginService from '../plugin'
-import musicSdk from '../../utils/musicSdk'
-
-import {
-  SearchArgs,
-  GetSongDetailArgs,
-  GetSongUrlArgs,
-  GetToplistDetailArgs,
-  GetListSongsArgs,
-  GetLyricArgs,
-  GetToplistArgs,
-  DownloadSingleSongArgs
-} from './service-base'
-
-import { SongDetailResponse, SongResponse } from './service-base'
-
-import { fieldsSelector } from '../../utils/object'
-import { getAppDirPath } from '../../utils/path'
-
-// 音乐源映射
-const MUSIC_SOURCES = {
-  kg: 'kg', // 酷狗音乐
-  wy: 'wy', // 网易云音乐
-  tx: 'tx', // QQ音乐
-  kw: 'kw', // 酷我音乐
-  mg: 'mg' // 咪咕音乐
-}
-
-// 扩展搜索参数接口
-interface ExtendedSearchArgs extends SearchArgs {
-  source?: string // 音乐源参数 kg|wy|tx|kw|mg
-}
-
-// 扩展歌曲详情参数接口
-interface ExtendedGetSongDetailArgs extends GetSongDetailArgs {
-  source?: string
-}
-
-// 扩展歌词参数接口
-interface ExtendedGetLyricArgs extends GetLyricArgs {
-  source?: string
-}
-
-const baseUrl: string = 'https://music.163.com'
-const baseTwoUrl: string = 'https://www.lihouse.xyz/coco_widget'
-
-const fileLock: Record<string, boolean> = {}
-
-/**
- * 获取支持的音乐源列表
- */
-export const getSupportedSources = () => {
-  return Object.keys(MUSIC_SOURCES).map((key) => ({
-    id: key,
-    name: getSourceName(key),
-    available: !!musicSdk[key]
-  }))
-}
-
-/**
- * 获取音乐源名称
- */
-const getSourceName = (source: string): string => {
-  const sourceNames = {
-    kg: '酷狗音乐',
-    wy: '网易云音乐',
-    tx: 'QQ音乐',
-    kw: '酷我音乐',
-    mg: '咪咕音乐'
-  }
-  return sourceNames[source] || source
-}
-
-/**
- * 智能音乐匹配（使用musicSdk的findMusic功能）
- */
-export const findMusic = async (musicInfo: {
-  name: string
-  singer?: string
-  albumName?: string
-  interval?: string
-  source?: string
-}) => {
-  try {
-    return await musicSdk.findMusic(musicInfo)
-  } catch (error) {
-    console.error('智能音乐匹配失败:', error)
-    return []
-  }
-}
-
-export const netEaseService: MusicServiceBase = {
-  async search({
-    type,
-    keyword,
-    offset,
-    limit,
-    source
-  }: ExtendedSearchArgs): Promise<SongResponse> {
-    // 如果指定了音乐源且不是网易云，使用对应的musicSdk
-    if (source && source !== 'wy' && MUSIC_SOURCES[source]) {
-      try {
-        const sourceModule = musicSdk[source]
-        if (sourceModule && sourceModule.musicSearch) {
-          const page = Math.floor((offset || 0) / (limit || 25)) + 1
-          const result = await sourceModule.musicSearch.search(keyword, page, limit || 25)
-
-          // 转换为统一格式
-          return {
-            songs: result.list || [],
-            songCount: result.total || result.list?.length || 0
-          }
-        } else {
-          throw new Error(`不支持的音乐源: ${source}`)
-        }
-      } catch (error: any) {
-        console.error(`${source}音乐源搜索失败:`, error)
-        // 如果指定源失败，回退到网易云
-        console.log('回退到网易云音乐搜索')
-      }
-    }
-
-    // 默认使用网易云音乐搜索
-    return await axiosClient
-      .get(`${baseUrl}/api/search/get/web`, {
-        params: {
-          s: keyword,
-          type: type,
-          limit: limit,
-          offset: offset ?? 0
-        }
-      })
-      .then(({ data }) => {
-        if (data.code !== 200) {
-          console.error(data)
-          throw new Error(data.msg)
-        }
-        return data.result
-      })
-  },
-  async getSongDetail({ ids, source }: ExtendedGetSongDetailArgs): Promise<SongDetailResponse> {
-    // 如果指定了音乐源且不是网易云，使用对应的musicSdk
-    if (source && source !== 'wy' && MUSIC_SOURCES[source]) {
-      try {
-        const sourceModule = musicSdk[source]
-        if (sourceModule && sourceModule.musicInfo) {
-          // 对于多个ID，并行获取详情
-          const promises = ids.map((id) => sourceModule.musicInfo.getMusicInfo(id))
-          const results = await Promise.all(promises)
-          return results.filter((result: any) => result) // 过滤掉失败的结果
-        } else {
-          throw new Error(`不支持的音乐源: ${source}`)
-        }
-      } catch (error: any) {
-        console.error(`${source}音乐源获取歌曲详情失败:`, error)
-        // 如果指定源失败，回退到网易云
-        console.log('回退到网易云音乐获取歌曲详情')
-      }
-    }
-
-    // 默认使用网易云音乐
-    return await axiosClient
-      .get(`${baseUrl}/api/song/detail?ids=[${ids.join(',')}]`)
-      .then(({ data }) => {
-        if (data.code !== 200) {
-          console.error(data)
-          throw new Error(data.msg)
-        }
-
-        return data.songs
-      })
-  },
-  async getSongUrl({ id, pluginId, quality, source }: GetSongUrlArgs): Promise<any> {
-    // 如果提供了插件ID、音质和音乐源，则使用插件获取音乐URL
-    if (pluginId && (quality || source)) {
-      try {
-        // 获取插件实例
-        const plugin = pluginService.getPluginById(pluginId)
-        if (!plugin) {
-          throw new Error(`未找到ID为 ${pluginId} 的插件`)
-        }
-
-        // 准备音乐信息对象，确保符合MusicInfo类型要求
-        const musicInfo = {
-          songmid: id as unknown as number,
-          singer: '',
-          name: '',
-          albumName: '',
-          albumId: 0,
-          source: source || 'wy',
-          interval: '',
-          img: '',
-          lrc: null,
-          types: [],
-          _types: {},
-          typeUrl: {}
-        }
-
-        // 调用插件的getMusicUrl方法获取音乐URL
-        const url: string = await plugin.getMusicUrl(
-          source || 'wy',
-          musicInfo,
-          quality || 'standard'
-        )
-
-        // 构建返回对象
-        return { url }
-      } catch (error: any) {
-        console.error('通过插件获取音乐URL失败:', error)
-        throw new Error(`插件获取音乐URL失败: ${error.message}`)
-      }
-    }
-
-    // 如果没有提供插件信息或插件调用失败，则使用默认方法获取
-    return await axiosClient.get(`${baseTwoUrl}/music_resource/id/${id}`).then(({ data }) => {
-      if (!data.status) {
-        throw new Error('歌曲不存在')
-      }
-
-      return data.song_data
-    })
-  },
-  async getLyric({ id, lv, yv, tv, source }: ExtendedGetLyricArgs): Promise<any> {
-    // 如果指定了音乐源且不是网易云，使用对应的musicSdk
-    if (source && source !== 'wy' && MUSIC_SOURCES[source]) {
-      try {
-        const sourceModule = musicSdk[source]
-        if (sourceModule && sourceModule.getLyric) {
-          // 构建歌曲信息对象，不同源可能需要不同的参数
-          const songInfo = { id, songmid: id, hash: id }
-          const result = await sourceModule.getLyric(songInfo)
-
-          // 转换为统一格式
-          return {
-            lrc: { lyric: result.lyric || '' },
-            tlyric: { lyric: result.tlyric || '' },
-            yrc: { lyric: result.yrc || '' }
-          }
-        } else {
-          throw new Error(`不支持的音乐源: ${source}`)
-        }
-      } catch (error: any) {
-        console.error(`${source}音乐源获取歌词失败:`, error)
-        // 如果指定源失败，回退到网易云
-        console.log('回退到网易云音乐获取歌词')
-      }
-    }
-
-    // 默认使用网易云音乐
-    const optionalParams: any = {}
-    if (lv) {
-      optionalParams.lv = -1
-    }
-    if (yv) {
-      optionalParams.yv = -1
-    }
-    if (tv) {
-      optionalParams.tv = -1
-    }
-
-    return await axiosClient
-      .get(`${baseUrl}/api/song/lyric`, {
-        params: {
-          id: id,
-          ...optionalParams
-        }
-      })
-      .then(({ data }) => {
-        if (data.code !== 200) {
-          console.error(data)
-          throw Error(data.msg)
-        }
-
-        const requiredFields = ['lyricUser', 'lrc', 'tlyric', 'yrc']
-        return fieldsSelector(data, requiredFields)
-      })
-  },
-  async getToplist({}: GetToplistArgs): Promise<any> {
-    return await NeteaseCloudMusicApi.toplist({})
-      .then(({ body: data }) => {
-        return data.list
-      })
-      .catch((err: any) => {
-        console.error({
-          code: err.body?.code,
-          msg: err.body?.msg?.message
-        })
-        throw err.body?.msg ?? err
-      })
-  },
-  async getToplistDetail({}: GetToplistDetailArgs): Promise<any> {
-    return await NeteaseCloudMusicApi.toplist_detail({})
-      .then(({ body: data }) => {
-        return data.list
-      })
-      .catch((err: any) => {
-        console.error({
-          code: err.body?.code,
-          msg: err.body?.msg?.message
-        })
-        throw err.body?.msg ?? err
-      })
-  },
-  async getListSongs(args: GetListSongsArgs): Promise<any> {
-    return await NeteaseCloudMusicApi.playlist_track_all(args)
-      .then(({ body: data }) => {
-        const requiredFields = ['songs', 'privileges']
-        return fieldsSelector(data, requiredFields)
-      })
-      .catch((err: any) => {
-        console.error({
-          code: err.body?.code,
-          msg: err.body?.msg?.message
-        })
-        throw err.body?.msg ?? err
-      })
-  },
-  async downloadSingleSong({
-    id,
-    name,
-    artist,
-    pluginId,
-    source,
-    quality
-  }: DownloadSingleSongArgs) {
-    const { url } = await this.getSongUrl({ id, pluginId, source, quality })
-
-    // 从URL中提取文件扩展名，如果没有则默认为mp3
-    const getFileExtension = (url: string): string => {
-      try {
-        const urlObj = new URL(url)
-        const pathname = urlObj.pathname
-        const lastDotIndex = pathname.lastIndexOf('.')
-        if (lastDotIndex !== -1 && lastDotIndex < pathname.length - 1) {
-          const extension = pathname.substring(lastDotIndex + 1).toLowerCase()
-          // 验证是否为常见的音频格式
-          const validExtensions = ['mp3', 'flac', 'wav', 'aac', 'm4a', 'ogg', 'wma']
-          if (validExtensions.includes(extension)) {
-            return extension
-          }
-        }
-      } catch (error) {
-        console.warn('解析URL失败，使用默认扩展名:', error)
-      }
-      return 'mp3' // 默认扩展名
-    }
-
-    const fileExtension = getFileExtension(url)
-    const songPath = path.join(
-      getAppDirPath(),
-      'download',
-      'songs',
-      `${name}-${artist}-${id}.${fileExtension}`
-        .replace(/[/\\:*?"<>|]/g, '')
-        .replace(/^\.+/, '')
-        .replace(/\.+$/, '')
-        .trim()
-    )
-
-    if (fileLock[songPath]) {
-      throw new Error('歌曲正在下载中')
-    } else {
-      fileLock[songPath] = true
-    }
-
-    try {
-      if (fs.existsSync(songPath)) {
-        return {
-          message: '歌曲已存在'
-        }
-      }
-
-      await fsPromise.mkdir(path.dirname(songPath), { recursive: true })
-
-      const songDataRes = await axiosClient({
-        method: 'GET',
-        url: url,
-        responseType: 'stream'
-      })
-
-      await pipeline(songDataRes.data, fs.createWriteStream(songPath))
-    } finally {
-      delete fileLock[songPath]
-    }
-
-    return {
-      message: '下载成功',
-      path: songPath
-    }
-  }
-}

src/main/services/music/service-base.ts

@@ -1,276 +0,0 @@
-import axios, { AxiosInstance } from 'axios'
-
-const timeout: number = 5000
-
-const mobileHeaders = {
-  'User-Agent':
-    'Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148'
-}
-
-const axiosClient: AxiosInstance = axios.create({
-  timeout: timeout
-})
-
-type SearchArgs = {
-  type: number
-  keyword: string
-  offset?: number
-  limit: number
-  source?: string
-}
-
-type GetSongDetailArgs = {
-  ids: string[]
-}
-
-type GetSongUrlArgs = {
-  id: string
-  pluginId?: string // 插件ID
-  quality?: string // 音质
-  source?: string // 音乐源（wy, tx等）
-}
-
-type GetLyricArgs = {
-  id: string
-  lv?: boolean
-  yv?: boolean // 获取逐字歌词
-  tv?: boolean // 获取歌词翻译
-}
-
-type GetToplistArgs = Record<string, never>
-
-type GetToplistDetailArgs = Record<string, never>
-
-type GetListSongsArgs = {
-  id: string
-  limit?: number
-  offset?: number
-}
-
-type DownloadSingleSongArgs = {
-  id: string
-  name: string
-  artist: string
-  pluginId?: string
-  quality?: string
-  source?: string
-}
-
-type ServiceNamesType =
-  | 'search'
-  | 'getSongDetail'
-  | 'getSongUrl'
-  | 'getLyric'
-  | 'getToplist'
-  | 'getToplistDetail'
-  | 'getListSongs'
-  | 'downloadSingleSong'
-
-type ServiceArgsType =
-  | SearchArgs
-  | GetSongDetailArgs
-  | GetSongUrlArgs
-  | GetLyricArgs
-  | GetToplistArgs
-  | GetToplistDetailArgs
-  | GetListSongsArgs
-  | DownloadSingleSongArgs
-
-interface Artist {
-  id: number
-  name: string
-  picUrl: string | null
-  alias: string[]
-  albumSize: number
-  picId: number
-  fansGroup: null
-  img1v1Url: string
-  img1v1: number
-  trans: null
-}
-
-interface Album {
-  id: number
-  name: string
-  artist: {
-    id: number
-    name: string
-    picUrl: string | null
-    alias: string[]
-    albumSize: number
-    picId: number
-    fansGroup: null
-    img1v1Url: string
-    img1v1: number
-    trans: null
-  }
-  publishTime: number
-  size: number
-  copyrightId: number
-  status: number
-  picId: number
-  alia?: string[]
-  mark: number
-}
-
-interface Song {
-  id: number
-  name: string
-  artists: Artist[]
-  album: Album
-  duration: number
-  copyrightId: number
-  status: number
-  alias: string[]
-  rtype: number
-  ftype: number
-  mvid: number
-  fee: number
-  rUrl: null
-  mark: number
-  transNames?: string[]
-}
-
-interface SongResponse {
-  songs: Song[]
-  songCount: number
-}
-interface AlbumDetail {
-  name: string
-  id: number
-  type: string
-  size: number
-  picId: number
-  blurPicUrl: string
-  companyId: number
-  pic: number
-  picUrl: string
-  publishTime: number
-  description: string
-  tags: string
-  company: string
-  briefDesc: string
-  artist: {
-    name: string
-    id: number
-    picId: number
-    img1v1Id: number
-    briefDesc: string
-    picUrl: string
-    img1v1Url: string
-    albumSize: number
-    alias: string[]
-    trans: string
-    musicSize: number
-    topicPerson: number
-  }
-  songs: any[]
-  alias: string[]
-  status: number
-  copyrightId: number
-  commentThreadId: string
-  artists: Artist[]
-  subType: string
-  transName: null
-  onSale: boolean
-  mark: number
-  gapless: number
-  dolbyMark: number
-}
-interface MusicQuality {
-  name: null
-  id: number
-  size: number
-  extension: string
-  sr: number
-  dfsId: number
-  bitrate: number
-  playTime: number
-  volumeDelta: number
-}
-interface SongDetail {
-  name: string
-  id: number
-  position: number
-  alias: string[]
-  status: number
-  fee: number
-  copyrightId: number
-  disc: string
-  no: number
-  artists: Artist[]
-  album: AlbumDetail
-  starred: boolean
-  popularity: number
-  score: number
-  starredNum: number
-  duration: number
-  playedNum: number
-  dayPlays: number
-  hearTime: number
-  sqMusic: MusicQuality
-  hrMusic: null
-  ringtone: null
-  crbt: null
-  audition: null
-  copyFrom: string
-  commentThreadId: string
-  rtUrl: null
-  ftype: number
-  rtUrls: any[]
-  copyright: number
-  transName: null
-  sign: null
-  mark: number
-  originCoverType: number
-  originSongSimpleData: null
-  single: number
-  noCopyrightRcmd: null
-  hMusic: MusicQuality
-  mMusic: MusicQuality
-  lMusic: MusicQuality
-  bMusic: MusicQuality
-  mvid: number
-  mp3Url: null
-  rtype: number
-  rurl: null
-}
-
-interface SongDetailResponse {
-  songs: SongDetail[]
-  equalizers: Record<string, unknown>
-  code: number
-}
-interface SongUrlResponse {
-  id: number
-  url: string // 歌曲地址
-  name: string
-  artist: string
-  pic: string //封面图片
-}
-
-interface MusicServiceBase {
-  search({ type, keyword, offset, limit }: SearchArgs): Promise<SongResponse>
-  getSongDetail({ ids }: GetSongDetailArgs): Promise<SongDetailResponse>
-  getSongUrl({ id, pluginId, quality, source }: GetSongUrlArgs): Promise<SongUrlResponse>
-  getLyric({ id, lv, yv, tv }: GetLyricArgs): Promise<any>
-  getToplist({}: GetToplistArgs): Promise<any>
-  getToplistDetail({}: GetToplistDetailArgs): Promise<any>
-  getListSongs({ id, limit, offset }: GetListSongsArgs): Promise<any>
-  downloadSingleSong({ id }: DownloadSingleSongArgs): Promise<any>
-}
-
-export type { MusicServiceBase, ServiceNamesType, ServiceArgsType }
-export type {
-  SearchArgs,
-  GetSongDetailArgs,
-  GetSongUrlArgs,
-  GetLyricArgs,
-  GetToplistArgs,
-  GetToplistDetailArgs,
-  GetListSongsArgs,
-  DownloadSingleSongArgs
-}
-export type { SongResponse, SongDetailResponse, SongUrlResponse }
-
-export { mobileHeaders, axiosClient }

src/main/services/musicCache/index.ts

@@ -1,9 +1,8 @@
-import { app } from 'electron'
 import * as path from 'path'
 import * as fs from 'fs/promises'
 import * as crypto from 'crypto'
 import axios from 'axios'
-import { CONFIG_NAME } from '../../events/directorySettings'
+import { configManager } from '../ConfigManager'
 
 export class MusicCacheService {
   private cacheIndex: Map<string, string> = new Map()
@@ -13,21 +12,9 @@ export class MusicCacheService {
   }
 
   private getCacheDirectory(): string {
-    try {
-      // 尝试从配置文件读取自定义缓存目录
-      const configPath = path.join(app.getPath('userData'), CONFIG_NAME)
-      const configData = require('fs').readFileSync(configPath, 'utf-8')
-      const config = JSON.parse(configData)
-
-      if (config.cacheDir && typeof config.cacheDir === 'string') {
-        return config.cacheDir
-      }
-    } catch {
-      // 配置文件不存在或读取失败，使用默认目录
-    }
-
-    // 默认缓存目录
-    return path.join(app.getPath('userData'), 'music-cache')
+    // 使用配置管理服务获取缓存目录
+    const directories = configManager.getDirectories()
+    return directories.cacheDir
   }
 
   // 动态获取缓存目录
@@ -82,9 +69,9 @@ export class MusicCacheService {
     return path.join(this.cacheDir, `${cacheKey}${ext}`)
   }
 
-  async getCachedMusicUrl(songId: string, originalUrlPromise: Promise<string>): Promise<string> {
+  async getCachedMusicUrl(songId: string): Promise<string | null> {
     const cacheKey = this.generateCacheKey(songId)
-    console.log('hash', cacheKey)
+    console.log('检查缓存 hash:', cacheKey)
 
     // 检查是否已缓存
     if (this.cacheIndex.has(cacheKey)) {
@@ -97,14 +84,29 @@ export class MusicCacheService {
         return `file://${cachedFilePath}`
       } catch (error) {
         // 文件不存在，从缓存索引中移除
+        console.warn(`缓存文件不存在，移除索引: ${cachedFilePath}`)
         this.cacheIndex.delete(cacheKey)
         await this.saveCacheIndex()
       }
     }
 
-    // 下载并缓存文件 先返回源链接不等待结果优化体验
-    this.downloadAndCache(songId, await originalUrlPromise, cacheKey)
-    return await originalUrlPromise
+    return null
+  }
+
+  async cacheMusic(songId: string, url: string): Promise<void> {
+    const cacheKey = this.generateCacheKey(songId)
+
+    // 如果已经缓存，跳过
+    if (this.cacheIndex.has(cacheKey)) {
+      return
+    }
+
+    try {
+      await this.downloadAndCache(songId, url, cacheKey)
+    } catch (error) {
+      console.error(`缓存歌曲失败: ${songId}`, error)
+      throw error
+    }
   }
 
   private async downloadAndCache(songId: string, url: string, cacheKey: string): Promise<string> {

src/main/services/musicSdk/index.ts

@@ -24,3 +24,15 @@ export function request<T extends keyof MainApi>(
   }
 }
 ipcMain.handle('service-music-sdk-request', request)
+
+// 处理搜索联想请求
+ipcMain.handle('service-music-tip-search', async (_, source, keyword) => {
+  try {
+    if (!source) throw new Error('请配置音源')
+    const Api = main(source)
+    return await Api.tipSearch({ keyword })
+  } catch (error: any) {
+    console.error('搜索联想错误:', error)
+    return { result: { songs: [], order: ['songs'] } }
+  }
+})

src/main/services/musicSdk/service.ts

@@ -7,21 +7,13 @@ import {
   PlaylistResult,
   GetSongListDetailsArg,
   PlaylistDetailResult,
-  DownloadSingleSongArgs
+  DownloadSingleSongArgs,
+  TipSearchResult
 } from './type'
 import pluginService from '../plugin/index'
 import musicSdk from '../../utils/musicSdk/index'
 import { musicCacheService } from '../musicCache'
-import path from 'node:path'
-import fs from 'fs'
-import fsPromise from 'fs/promises'
-import axios from 'axios'
-import { pipeline } from 'node:stream/promises'
-import { fileURLToPath } from 'url'
-import { app } from 'electron'
-import { CONFIG_NAME } from '../../events/directorySettings'
-
-const fileLock: Record<string, boolean> = {}
+import download from '../../utils/downloadSongs'
 
 function main(source: string) {
   const Api = musicSdk[source]
@@ -30,26 +22,36 @@ function main(source: string) {
       return (await Api.musicSearch.search(keyword, page, limit)) as Promise<SearchResult>
     },
 
+    async tipSearch({ keyword }: { keyword: string }) {
+      if (!Api.tipSearch?.tipSearchBySong) {
+        // 如果音乐源没有实现tipSearch方法，返回空结果
+        return [] as TipSearchResult
+      }
+      return (await Api.tipSearch.search(keyword)) as Promise<TipSearchResult>
+    },
+
     async getMusicUrl({ pluginId, songInfo, quality }: GetMusicUrlArg) {
       try {
         const usePlugin = pluginService.getPluginById(pluginId)
         if (!pluginId || !usePlugin) return { error: '请配置音源来播放歌曲' }
 
-        // 获取原始URL
-        const originalUrlPromise = usePlugin.getMusicUrl(source, songInfo, quality)
-
         // 生成歌曲唯一标识
         const songId = `${songInfo.name}-${songInfo.singer}-${source}-${quality}`
 
-        // 尝试获取缓存的URL
-        try {
-          const cachedUrl = await musicCacheService.getCachedMusicUrl(songId, originalUrlPromise)
+        // 先检查缓存
+        const cachedUrl = await musicCacheService.getCachedMusicUrl(songId)
+        if (cachedUrl) {
           return cachedUrl
-        } catch (cacheError) {
-          console.warn('缓存获取失败，使用原始URL:', cacheError)
-          const originalUrl = await originalUrlPromise
-          return originalUrl
         }
+
+        // 没有缓存时才发起网络请求
+        const originalUrl = await usePlugin.getMusicUrl(source, songInfo, quality)
+        // 异步缓存，不阻塞返回
+        musicCacheService.cacheMusic(songId, originalUrl).catch((error) => {
+          console.warn('缓存歌曲失败:', error)
+        })
+
+        return originalUrl
       } catch (e: any) {
         return {
           error: '获取歌曲失败 ' + e.error || e
@@ -83,100 +85,22 @@ function main(source: string) {
     },
 
     async getPlaylistDetail({ id, page }: GetSongListDetailsArg) {
+      // 酷狗音乐特殊处理：直接调用getUserListDetail
+      if (source === 'kg' && /https?:\/\//.test(id)) {
+        return (await Api.songList.getUserListDetail(id, page)) as PlaylistDetailResult
+      }
       return (await Api.songList.getListDetail(id, page)) as PlaylistDetailResult
     },
 
-    async downloadSingleSong({ pluginId, songInfo, quality }: DownloadSingleSongArgs) {
+    async downloadSingleSong({
+      pluginId,
+      songInfo,
+      quality,
+      tagWriteOptions
+    }: DownloadSingleSongArgs) {
       const url = await this.getMusicUrl({ pluginId, songInfo, quality })
       if (typeof url === 'object') throw new Error('无法获取歌曲链接')
-
-      // 获取自定义下载目录
-      const getDownloadDirectory = (): string => {
-        try {
-          const configPath = path.join(app.getPath('userData'), CONFIG_NAME)
-          const configData = fs.readFileSync(configPath, 'utf-8')
-          const config = JSON.parse(configData)
-
-          if (config.downloadDir && typeof config.downloadDir === 'string') {
-            return config.downloadDir
-          }
-        } catch {
-          // 配置文件不存在或读取失败，使用默认目录
-        }
-
-        // 默认下载目录
-        return path.join(app.getPath('music'), 'CeruMusic/songs')
-      }
-
-      // 从URL中提取文件扩展名，如果没有则默认为mp3
-      const getFileExtension = (url: string): string => {
-        try {
-          const urlObj = new URL(url)
-          const pathname = urlObj.pathname
-          const lastDotIndex = pathname.lastIndexOf('.')
-          if (lastDotIndex !== -1 && lastDotIndex < pathname.length - 1) {
-            const extension = pathname.substring(lastDotIndex + 1).toLowerCase()
-            // 验证是否为常见的音频格式
-            const validExtensions = ['mp3', 'flac', 'wav', 'aac', 'm4a', 'ogg', 'wma']
-            if (validExtensions.includes(extension)) {
-              return extension
-            }
-          }
-        } catch (error) {
-          console.warn('解析URL失败，使用默认扩展名:', error)
-        }
-        return 'mp3' // 默认扩展名
-      }
-
-      const fileExtension = getFileExtension(url)
-      const downloadDir = getDownloadDirectory()
-      const songPath = path.join(
-        downloadDir,
-        `${songInfo.name}-${songInfo.singer}-${songInfo.source}.${fileExtension}`
-          .replace(/[/\\:*?"<>|]/g, '')
-          .replace(/^\.+/, '')
-          .replace(/\.+$/, '')
-          .trim()
-      )
-
-      if (fileLock[songPath]) {
-        throw new Error('歌曲正在下载中')
-      } else {
-        fileLock[songPath] = true
-      }
-
-      try {
-        if (fs.existsSync(songPath)) {
-          return {
-            message: '歌曲已存在'
-          }
-        }
-        await fsPromise.mkdir(path.dirname(songPath), { recursive: true })
-
-        if (url.startsWith('file://')) {
-          const filePath = fileURLToPath(url)
-
-          const readStream = fs.createReadStream(filePath)
-          const writeStream = fs.createWriteStream(songPath)
-
-          await pipeline(readStream, writeStream)
-        } else {
-          const songDataRes = await axios({
-            method: 'GET',
-            url: url,
-            responseType: 'stream'
-          })
-
-          await pipeline(songDataRes.data, fs.createWriteStream(songPath))
-        }
-      } finally {
-        delete fileLock[songPath]
-      }
-
-      return {
-        message: '下载成功',
-        path: songPath
-      }
+      return await download(url, songInfo, tagWriteOptions)
     },
 
     async parsePlaylistId({ url }: { url: string }) {

src/main/services/musicSdk/type.ts

@@ -90,6 +90,16 @@ export interface PlaylistDetailResult {
   info: PlaylistInfo
 }
 
+export interface TagWriteOptions {
+  basicInfo?: boolean
+  cover?: boolean
+  lyrics?: boolean
+}
+
 export interface DownloadSingleSongArgs extends GetMusicUrlArg {
   path?: string
+  tagWriteOptions?: TagWriteOptions
 }
+
+// 搜索联想结果的类型定义
+export type TipSearchResult = string[]

src/main/services/plugin/index.ts

@@ -4,6 +4,7 @@ import fsPromise from 'fs/promises'
 import { randomUUID } from 'crypto'
 import { dialog } from 'electron'
 import { getAppDirPath } from '../../utils/path'
+import axios from 'axios'
 
 import CeruMusicPluginHost from './manager/CeruMusicPluginHost'
 import convertEventDrivenPlugin from './manager/converter-event-driven'
@@ -223,6 +224,60 @@ const pluginService = {
     })
   },
 
+  async downloadAndAddPlugin(url: string, type: 'lx' | 'cr') {
+    try {
+      // 验证URL
+      if (!url || typeof url !== 'string') {
+        throw new Error('无效的URL地址')
+      }
+
+      // 下载文件
+      let pluginCode = await this.downloadFile(url)
+
+      // 生成临时文件名
+      const fileName = `downloaded_${Date.now()}.js`
+      if (type == 'lx') {
+        pluginCode = convertEventDrivenPlugin(pluginCode)
+      }
+      // 调用现有的添加插件方法
+      return await this.addPlugin(pluginCode, fileName)
+    } catch (error: any) {
+      console.error('下载并添加插件失败:', error)
+      return { error: error.message || '下载插件失败' }
+    }
+  },
+
+  async downloadFile(url: string): Promise<string> {
+    try {
+      const response = await axios.get(url, {
+        timeout: 30000, // 30秒超时
+        responseType: 'text',
+        headers: {
+          'User-Agent': 'CeruMusic/1.0'
+        }
+      })
+
+      if (response.status !== 200) {
+        throw new Error(`下载失败: HTTP ${response.status}`)
+      }
+
+      const data = response.data
+      if (!data || !data.trim()) {
+        throw new Error('下载的文件内容为空')
+      }
+
+      return data
+    } catch (error: any) {
+      if (error.response) {
+        throw new Error(`下载失败: HTTP ${error.response.status}`)
+      } else if (error.request) {
+        throw new Error('网络错误: 无法连接到服务器')
+      } else {
+        throw new Error(`下载错误: ${error.message}`)
+      }
+    }
+  },
+
   async getPluginLog(pluginId: string) {
     return await getLog(pluginId)
   }

src/main/services/plugin/manager/CeruMusicPluginHost.ts

@@ -1,9 +1,30 @@
+/*
+ * Copyright (c) 2025. 时迁酱 Inc. All rights reserved.
+ *
+ * This software is the confidential and proprietary information of 时迁酱.
+ * Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * @author 时迁酱，无聊的霜霜，Star
+ * @since 2025-9-19
+ * @version 1.0
+ */
+
 import * as vm from 'vm'
 import fetch from 'node-fetch'
 import * as fs from 'fs'
 import { MusicItem } from '../../musicSdk/type'
+import { sendPluginNotice } from '../../../events/pluginNotice'
 
-// 定义插件结构接口
+// ==================== 常量定义 ====================
+const CONSTANTS = {
+  DEFAULT_TIMEOUT: 10000, // 10秒超时
+  API_VERSION: '1.0.3',
+  ENVIRONMENT: 'nodejs',
+  NOTICE_DELAY: 100, // 通知延迟时间
+  LOG_PREFIX: '[CeruMusic]'
+} as const
+
+// ==================== 类型定义 ====================
 export interface PluginInfo {
   name: string
   version: string
@@ -33,7 +54,7 @@ interface MusicInfo extends MusicItem {
 interface RequestResult {
   body: any
   statusCode: number
-  headers: Record<string, string[]>
+  headers: Record<string, string>
 }
 
 interface CeruMusicApiUtils {
@@ -52,12 +73,26 @@ interface CeruMusicApi {
     options?: RequestOptions | RequestCallback,
     callback?: RequestCallback
   ) => Promise<RequestResult> | void
+  NoticeCenter: (
+    type: 'error' | 'info' | 'success' | 'warn' | 'update',
+    data: {
+      title: string
+      content?: string
+      url?: string
+      version?: string
+      pluginInfo: {
+        name?: string // 插件名
+        type: 'lx' | 'cr' //插件类型
+      }
+    }
+  ) => void
 }
 
 type RequestOptions = {
   method?: string
   headers?: Record<string, string>
   body?: any
+  timeout?: number
   [key: string]: any
 }
 
@@ -66,8 +101,21 @@ type RequestCallback = (error: Error | null, result: RequestResult | null) => vo
 type Logger = {
   log: (...args: any[]) => void
   error: (...args: any[]) => void
-  warn?: (...args: any[]) => void
-  info?: (...args: any[]) => void
+  warn: (...args: any[]) => void
+  info: (...args: any[]) => void
+}
+
+type PluginMethodName = 'musicUrl' | 'getPic' | 'getLyric'
+
+// ==================== 错误类定义 ====================
+class PluginError extends Error {
+  constructor(
+    message: string,
+    public readonly method?: string
+  ) {
+    super(message)
+    this.name = 'PluginError'
+  }
 }
 
 /**
@@ -85,160 +133,27 @@ class CeruMusicPluginHost {
    */
   constructor(pluginCode: string | null = null, logger: Logger = console) {
     this.pluginCode = pluginCode
-    this.plugin = null // 存储插件导出的对象
+    this.plugin = null
+
     if (pluginCode) {
       this._initialize(logger)
     }
   }
 
+  // ==================== 公共方法 ====================
+
   /**
    * 从文件加载插件
    * @param pluginPath 插件文件路径
    * @param logger 日志记录器
    */
   async loadPlugin(pluginPath: string, logger: Logger = console): Promise<CeruMusicPlugin> {
-    this.pluginCode = fs.readFileSync(pluginPath, 'utf-8')
-    this._initialize(logger)
-    return this.plugin as CeruMusicPlugin
-  }
-
-  /**
-   * 初始化沙箱环境，加载并验证插件
-   * @private
-   */
-  _initialize(console: Logger): void {
-    // 提供给插件的API
-    const cerumusicApi: CeruMusicApi = {
-      env: 'nodejs',
-      version: '1.0.0',
-      utils: {
-        buffer: {
-          from: (data: string | Buffer | ArrayBuffer, encoding?: BufferEncoding) => {
-            if (typeof data === 'string') {
-              return Buffer.from(data, encoding)
-            } else if (data instanceof Buffer) {
-              return data
-            } else if (data instanceof ArrayBuffer) {
-              return Buffer.from(new Uint8Array(data))
-            } else {
-              return Buffer.from(data as any)
-            }
-          },
-          bufToString: (buffer: Buffer, encoding?: BufferEncoding) => buffer.toString(encoding)
-        }
-      },
-      request: (url, options, callback) => {
-        // 支持 Promise 和 callback 两种调用方式
-        if (typeof options === 'function') {
-          callback = options as RequestCallback
-          options = { method: 'GET' }
-        }
-
-        const makeRequest = async (): Promise<RequestResult> => {
-          try {
-            console.log(`[CeruMusic] 发起请求: ${url}`)
-
-            // 添加超时设置
-            const controller = new AbortController()
-            const timeoutId = setTimeout(() => controller.abort(), 10000) // 10秒超时
-
-            const requestOptions = {
-              method: 'GET',
-              ...(options as RequestOptions),
-              signal: controller.signal
-            }
-
-            const response = await fetch(url, requestOptions)
-            clearTimeout(timeoutId)
-
-            console.log(`[CeruMusic] 请求响应状态: ${response.status}`)
-
-            // 尝试解析JSON，如果失败则返回文本
-            let body: any
-            try {
-              body = await response.json()
-            } catch (parseError: any) {
-              console.error(`[CeruMusic] 解析响应失败: ${parseError.message}`)
-              // 解析失败时创建错误body
-              body = {
-                code: response.status,
-                msg: `Failed to parse response: ${parseError.message}`
-              }
-            }
-
-            console.log(`[CeruMusic] 请求响应内容:`, body)
-
-            const result: RequestResult = {
-              body,
-              statusCode: response.status,
-              headers: response.headers.raw()
-            }
-
-            if (callback) {
-              callback(null, result)
-            }
-            return result
-          } catch (error: any) {
-            console.error(`[CeruMusic] Request failed: ${error.message}`)
-
-            if (callback) {
-              // 网络错误时，调用 callback(error, null)
-              callback(error, null)
-              // 需要返回一个值以满足 Promise<RequestResult> 类型
-              return {
-                body: { error: error.message },
-                statusCode: 500,
-                headers: {}
-              }
-            } else {
-              throw error
-            }
-          }
-        }
-
-        if (callback) {
-          makeRequest().catch((error) => {
-            console.error(`[CeruMusic] Unhandled request error in callback mode: ${error.message}`)
-          }) // 确保错误被正确处理
-          return undefined
-        } else {
-          return makeRequest()
-        }
-      }
-    }
-
-    const sandbox = {
-      module: { exports: {} },
-      cerumusic: cerumusicApi,
-      console: console,
-      setTimeout: setTimeout,
-      clearTimeout: clearTimeout,
-      setInterval: setInterval,
-      clearInterval: clearInterval,
-      Buffer: Buffer,
-      JSON: JSON,
-      require: () => ({}),
-      global: {},
-      process: { env: {} }
-    }
-
     try {
-      // 在沙箱中执行插件代码
-      if (this.pluginCode) {
-        vm.runInNewContext(this.pluginCode, sandbox)
-        this.plugin = sandbox.module.exports as CeruMusicPlugin
-        console.log(`[CeruMusic] Plugin "${this.plugin.pluginInfo.name}" loaded successfully.`)
-      } else {
-        throw new Error('No plugin code provided.')
-      }
-    } catch (e: any) {
-      console.error('[CeruMusic] Error executing plugin code:', e)
-      throw new Error('Failed to initialize plugin.')
-    }
-
-    // 验证插件结构
-    if (!this.plugin?.pluginInfo || !this.plugin.sources || !this.plugin.musicUrl) {
-      throw new Error('Invalid plugin structure. Required fields: pluginInfo, sources, musicUrl.')
+      this.pluginCode = fs.readFileSync(pluginPath, 'utf-8')
+      this._initialize(logger)
+      return this.plugin as CeruMusicPlugin
+    } catch (error: any) {
+      throw new PluginError(`无法加载插件 ${pluginPath}: ${error.message}`)
     }
   }
 
@@ -246,10 +161,8 @@ class CeruMusicPluginHost {
    * 获取插件信息
    */
   getPluginInfo(): PluginInfo {
-    if (!this.plugin) {
-      throw new Error('Plugin not initialized')
-    }
-    return this.plugin.pluginInfo
+    this._ensurePluginInitialized()
+    return this.plugin!.pluginInfo
   }
 
   /**
@@ -263,10 +176,8 @@ class CeruMusicPluginHost {
    * 获取支持的音源和音质信息
    */
   getSupportedSources(): PluginSource[] {
-    if (!this.plugin) {
-      throw new Error('Plugin not initialized')
-    }
-    return this.plugin.sources
+    this._ensurePluginInitialized()
+    return this.plugin!.sources
   }
 
   /**
@@ -276,148 +187,7 @@ class CeruMusicPluginHost {
    * @param quality 音质
    */
   async getMusicUrl(source: string, musicInfo: MusicInfo, quality: string): Promise<string> {
-    try {
-      if (!this.plugin || typeof this.plugin.musicUrl !== 'function') {
-        throw new Error(`Action "musicUrl" is not implemented in plugin.`)
-      }
-
-      console.log(`[CeruMusic] 开始调用插件的 musicUrl 方法...`)
-
-      // 将 cerumusic API 绑定到函数调用的 this 上下文
-      const result = await this.plugin.musicUrl.call(
-        { cerumusic: this._getCerumusicApi() },
-        source,
-        musicInfo,
-        quality
-      )
-
-      console.log(`[CeruMusic] 插件 musicUrl 方法调用成功`)
-      return result
-    } catch (error: any) {
-      console.error(`[CeruMusic] getMusicUrl 方法执行失败:`, error.message)
-      console.error(`[CeruMusic] 错误堆栈:`, error.stack)
-
-      // 重新抛出错误，确保外部可以捕获
-      throw new Error(`Plugin getMusicUrl failed: ${error.message}`)
-    }
-  }
-
-  /**
-   * 获取 cerumusic API 对象
-   * @private
-   */
-  _getCerumusicApi(): CeruMusicApi {
-    return {
-      env: 'nodejs',
-      version: '1.0.0',
-      utils: {
-        buffer: {
-          from: (data: string | Buffer | ArrayBuffer, encoding?: BufferEncoding) => {
-            if (typeof data === 'string') {
-              return Buffer.from(data, encoding)
-            } else if (data instanceof Buffer) {
-              return data
-            } else if (data instanceof ArrayBuffer) {
-              return Buffer.from(new Uint8Array(data))
-            } else {
-              return Buffer.from(data as any)
-            }
-          },
-          bufToString: (buffer: Buffer, encoding?: BufferEncoding) => buffer.toString(encoding)
-        }
-      },
-      request: (url, options, callback) => {
-        // 支持 Promise 和 callback 两种调用方式
-        if (typeof options === 'function') {
-          callback = options as RequestCallback
-          options = { method: 'GET' }
-        }
-
-        const makeRequest = async (): Promise<RequestResult> => {
-          try {
-            console.log(`[CeruMusic] 发起请求: ${url}`)
-
-            // 添加超时设置
-            const controller = new AbortController()
-            const timeoutId = setTimeout(() => controller.abort(), 10000) // 10秒超时
-
-            const requestOptions = {
-              method: 'GET',
-              ...(options as RequestOptions),
-              signal: controller.signal
-            }
-
-            const response = await fetch(url, requestOptions)
-            clearTimeout(timeoutId)
-
-            console.log(`[CeruMusic] 请求响应状态: ${response.status}`)
-
-            // 尝试解析JSON，如果失败则返回文本
-            let body: any
-            const contentType = response.headers.get('content-type')
-
-            try {
-              if (contentType && contentType.includes('application/json')) {
-                body = await response.json()
-              } else {
-                const text = await response.text()
-                console.log(`[CeruMusic] 响应不是JSON格式，内容: ${text.substring(0, 200)}...`)
-                // 对于非JSON响应，创建一个错误状态的body
-                body = {
-                  code: response.status,
-                  msg: `Expected JSON response but got: ${contentType || 'unknown content type'}`,
-                  data: text
-                }
-              }
-            } catch (parseError: any) {
-              console.error(`[CeruMusic] 解析响应失败: ${parseError.message}`)
-              // 解析失败时创建错误body
-              body = {
-                code: response.status,
-                msg: `Failed to parse response: ${parseError.message}`
-              }
-            }
-
-            console.log(`[CeruMusic] 请求响应内容:`, body)
-
-            const result: RequestResult = {
-              body,
-              statusCode: response.status,
-              headers: response.headers.raw()
-            }
-
-            if (callback) {
-              callback(null, result)
-            }
-            return result
-          } catch (error: any) {
-            console.error(`[CeruMusic] Request failed: ${error.message}`)
-
-            if (callback) {
-              // 网络错误时，调用 callback(error, null)
-              callback(error, null)
-              // 需要返回一个值以满足 Promise<RequestResult> 类型
-              return {
-                body: { error: error.message },
-                statusCode: 500,
-                headers: {}
-              }
-            } else {
-              throw error
-            }
-          }
-        }
-
-        if (callback) {
-          makeRequest().catch((error) => {
-            console.error(`[CeruMusic] Unhandled request error in callback mode: ${error.message}`)
-          }) // 确保错误被正确处理
-          return undefined
-        } else {
-          return makeRequest()
-        }
-      }
-    }
+    return this._callPluginMethod('musicUrl', source, musicInfo, quality)
   }
 
   /**
@@ -426,25 +196,7 @@ class CeruMusicPluginHost {
    * @param musicInfo 音乐信息
    */
   async getPic(source: string, musicInfo: MusicInfo): Promise<string> {
-    try {
-      if (!this.plugin || typeof this.plugin.getPic !== 'function') {
-        throw new Error(`Action "getPic" is not implemented in plugin.`)
-      }
-
-      console.log(`[CeruMusic] 开始调用插件的 getPic 方法...`)
-
-      const result = await this.plugin.getPic.call(
-        { cerumusic: this._getCerumusicApi() },
-        source,
-        musicInfo
-      )
-
-      console.log(`[CeruMusic] 插件 getPic 方法调用成功`)
-      return result
-    } catch (error: any) {
-      console.error(`[CeruMusic] getPic 方法执行失败:`, error.message)
-      throw new Error(`Plugin getPic failed: ${error.message}`)
-    }
+    return this._callPluginMethod('getPic', source, musicInfo)
   }
 
   /**
@@ -453,24 +205,364 @@ class CeruMusicPluginHost {
    * @param musicInfo 音乐信息
    */
   async getLyric(source: string, musicInfo: MusicInfo): Promise<string> {
+    return this._callPluginMethod('getLyric', source, musicInfo)
+  }
+
+  // ==================== 私有方法 ====================
+
+  /**
+   * 初始化沙箱环境，加载并验证插件
+   * @private
+   */
+  private _initialize(logger: Logger): void {
+    if (!this.pluginCode) {
+      throw new PluginError('No plugin code provided.')
+    }
+
+    const sandbox = this._createSandbox(logger)
+
     try {
-      if (!this.plugin || typeof this.plugin.getLyric !== 'function') {
-        throw new Error(`Action "getLyric" is not implemented in plugin.`)
-      }
+      vm.runInNewContext(this.pluginCode, sandbox)
+      this.plugin = sandbox.module.exports as CeruMusicPlugin
 
-      console.log(`[CeruMusic] 开始调用插件的 getLyric 方法...`)
+      this._validatePlugin()
 
-      const result = await this.plugin.getLyric.call(
-        { cerumusic: this._getCerumusicApi() },
-        source,
-        musicInfo
+      logger.log(
+        `${CONSTANTS.LOG_PREFIX} Plugin "${this.plugin.pluginInfo.name}" loaded successfully.`
       )
+    } catch (error: any) {
+      logger.error(`${CONSTANTS.LOG_PREFIX} Error executing plugin code:`, error)
+      throw new PluginError('Failed to initialize plugin.')
+    }
+  }
 
-      console.log(`[CeruMusic] 插件 getLyric 方法调用成功`)
+  /**
+   * 创建沙箱环境
+   * @private
+   */
+  private _createSandbox(logger: Logger): any {
+    return {
+      module: { exports: {} },
+      cerumusic: this._getCerumusicApi(),
+      console: logger,
+      setTimeout,
+      clearTimeout,
+      setInterval,
+      clearInterval,
+      Buffer,
+      JSON,
+      require: () => ({}),
+      global: {},
+      process: { env: {} }
+    }
+  }
+
+  /**
+   * 验证插件结构
+   * @private
+   */
+  private _validatePlugin(): void {
+    if (!this.plugin?.pluginInfo || !this.plugin.sources || !this.plugin.musicUrl) {
+      throw new PluginError(
+        'Invalid plugin structure. Required fields: pluginInfo, sources, musicUrl.'
+      )
+    }
+  }
+
+  /**
+   * 确保插件已初始化
+   * @private
+   */
+  private _ensurePluginInitialized(): void {
+    if (!this.plugin) {
+      throw new PluginError('Plugin not initialized')
+    }
+  }
+
+  /**
+   * 统一的插件方法调用逻辑
+   * @private
+   */
+  private async _callPluginMethod(
+    methodName: PluginMethodName,
+    ...args: readonly any[]
+  ): Promise<string> {
+    this._ensurePluginInitialized()
+    const method = this.plugin![methodName] as any
+    if (typeof method !== 'function') {
+      throw new PluginError(`Action "${methodName}" is not implemented in plugin.`, methodName)
+    }
+    try {
+      console.log(`${CONSTANTS.LOG_PREFIX} 开始调用插件的 ${methodName} 方法...`)
+
+      const result = await method.call(...[{ cerumusic: this._getCerumusicApi() }], ...args)
+
+      console.log(`${CONSTANTS.LOG_PREFIX} 插件 ${methodName} 方法调用成功`)
       return result
     } catch (error: any) {
-      console.error(`[CeruMusic] getLyric 方法执行失败:`, error.message)
-      throw new Error(`Plugin getLyric failed: ${error.message}`)
+      console.error(`${CONSTANTS.LOG_PREFIX} ${methodName} 方法执行失败:`, error.message)
+      if (methodName === 'musicUrl') {
+        console.error(`${CONSTANTS.LOG_PREFIX} 错误堆栈:`, error.stack)
+      }
+      throw new PluginError(`Plugin ${methodName} failed: ${error.message}`, methodName)
+    }
+  }
+
+  // ==================== 工具方法 ====================
+
+  // /**
+  //  * 验证 URL 是否有效
+  //  * @private
+  //  */
+  // private _isValidUrl(url: string): boolean {
+  //   try {
+  //     const urlObj = new URL(url)
+  //     return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
+  //   } catch {
+  //     return false
+  //   }
+  // }
+
+  // /**
+  //  * 根据通知类型获取标题
+  //  * @private
+  //  */
+  // private _getNoticeTitle(type: string): string {
+  //   const titleMap: Record<string, string> = {
+  //     update: '插件更新',
+  //     error: '插件错误',
+  //     warning: '插件警告',
+  //     info: '插件信息',
+  //     success: '操作成功'
+  //   }
+  //   return titleMap[type] || '插件通知'
+  // }
+
+  // /**
+  //  * 根据通知类型获取默认消息
+  //  * @private
+  //  */
+  // private _getDefaultMessage(type: string, data: any): string {
+  //   const pluginName = this.plugin?.pluginInfo?.name || '未知插件'
+
+  //   switch (type) {
+  //     case 'error':
+  //       return `插件 "${pluginName}" 发生错误: ${data?.error || '未知错误'}`
+  //     case 'warning':
+  //       return `插件 "${pluginName}" 警告: ${data?.warning || '需要注意'}`
+  //     case 'success':
+  //       return `插件 "${pluginName}" 操作成功`
+  //     case 'info':
+  //     default:
+  //       return `插件 "${pluginName}" 信息: ${JSON.stringify(data)}`
+  //   }
+  // }
+
+  /**
+   * 解析响应体
+   * @private
+   */
+  private async _parseResponseBody(response: any): Promise<any> {
+    const contentType = response.headers.get('content-type') || ''
+
+    try {
+      if (contentType.includes('application/json')) {
+        return await response.json()
+      } else if (contentType.includes('text/')) {
+        return await response.text()
+      } else {
+        // 对于其他类型，尝试解析为 JSON，失败则返回文本
+        const text = await response.text()
+        try {
+          return JSON.parse(text)
+        } catch {
+          return text
+        }
+      }
+    } catch (parseError: any) {
+      console.error(`${CONSTANTS.LOG_PREFIX} 解析响应失败: ${parseError.message}`)
+      return {
+        error: 'Parse failed',
+        message: parseError.message,
+        statusCode: response.status
+      }
+    }
+  }
+
+  /**
+   * 创建错误结果
+   * @private
+   */
+  private _createErrorResult(error: any, url: string): RequestResult {
+    const isTimeout = error.name === 'AbortError'
+    return {
+      body: {
+        error: error.name || 'RequestError',
+        message: error.message,
+        url
+      },
+      statusCode: isTimeout ? 408 : 500,
+      headers: {}
+    }
+  }
+
+  // ==================== API 构建方法 ====================
+
+  /**
+   * 获取 cerumusic API 对象
+   * @private
+   */
+  private _getCerumusicApi(): CeruMusicApi {
+    return {
+      env: CONSTANTS.ENVIRONMENT,
+      version: CONSTANTS.API_VERSION,
+      utils: this._createApiUtils(),
+      request: this._createRequestFunction(),
+      NoticeCenter: this._createNoticeCenter()
+    }
+  }
+
+  /**
+   * 创建 API 工具对象
+   * @private
+   */
+  private _createApiUtils(): CeruMusicApiUtils {
+    return {
+      buffer: {
+        from: (data: string | Buffer | ArrayBuffer, encoding?: BufferEncoding) => {
+          if (typeof data === 'string') {
+            return Buffer.from(data, encoding)
+          } else if (data instanceof Buffer) {
+            return data
+          } else if (data instanceof ArrayBuffer) {
+            return Buffer.from(new Uint8Array(data))
+          } else {
+            return Buffer.from(data as any)
+          }
+        },
+        bufToString: (buffer: Buffer, encoding?: BufferEncoding) => buffer.toString(encoding)
+      }
+    }
+  }
+
+  /**
+   * 创建请求函数
+   * @private
+   */
+  private _createRequestFunction() {
+    return (
+      url: string,
+      options?: RequestOptions | RequestCallback,
+      callback?: RequestCallback
+    ) => {
+      // 支持 Promise 和 callback 两种调用方式
+      if (typeof options === 'function') {
+        callback = options as RequestCallback
+        options = { method: 'GET' }
+      }
+
+      const requestOptions = options as RequestOptions
+      const makeRequest = () => this._makeHttpRequest(url, requestOptions)
+
+      // 执行请求
+      if (callback) {
+        makeRequest()
+          .then((result) => callback(null, result))
+          .catch((error) => {
+            const errorResult = this._createErrorResult(error, url)
+            callback(error, errorResult)
+          })
+        return undefined
+      } else {
+        return makeRequest()
+      }
+    }
+  }
+
+  /**
+   * 执行 HTTP 请求
+   * @private
+   */
+  private async _makeHttpRequest(url: string, options: RequestOptions): Promise<RequestResult> {
+    const controller = new AbortController()
+    const timeout = options.timeout || CONSTANTS.DEFAULT_TIMEOUT
+
+    const timeoutId = setTimeout(() => {
+      controller.abort()
+      console.warn(`${CONSTANTS.LOG_PREFIX} 请求超时: ${url}`)
+    }, timeout)
+
+    try {
+      console.log(`${CONSTANTS.LOG_PREFIX} 发起请求: ${options.method || 'GET'} ${url}`)
+
+      const fetchOptions = {
+        method: 'GET',
+        ...options,
+        signal: controller.signal
+      }
+
+      const response = await fetch(url, fetchOptions)
+      clearTimeout(timeoutId)
+
+      console.log(`${CONSTANTS.LOG_PREFIX} 请求响应: ${response.status} ${response.statusText}`)
+
+      const body = await this._parseResponseBody(response)
+      const headers = this._extractHeaders(response)
+
+      const result: RequestResult = {
+        body,
+        statusCode: response.status,
+        headers
+      }
+
+      console.log(`${CONSTANTS.LOG_PREFIX} 请求完成:`, {
+        url,
+        status: response.status,
+        bodyType: typeof body
+      })
+
+      return result
+    } catch (error: any) {
+      clearTimeout(timeoutId)
+
+      const errorMessage =
+        error.name === 'AbortError' ? `请求超时: ${url}` : `请求失败: ${error.message}`
+
+      console.error(`${CONSTANTS.LOG_PREFIX} ${errorMessage}`)
+      throw error
+    }
+  }
+
+  /**
+   * 提取响应头
+   * @private
+   */
+  private _extractHeaders(response: any): Record<string, string> {
+    const headers: Record<string, string> = {}
+    response.headers.forEach((value: string, key: string) => {
+      headers[key] = value
+    })
+    return headers
+  }
+
+  /**
+   * 创建通知中心
+   * @private
+   */
+  private _createNoticeCenter() {
+    return (type: string, data: any) => {
+      const sendNotice = () => {
+        if (this.plugin?.pluginInfo) {
+          sendPluginNotice(
+            { type: type as any, data, currentVersion: this.plugin.pluginInfo.version },
+            this.plugin.pluginInfo.name
+          )
+        } else {
+          // 如果插件还未初始化，延迟执行
+          setTimeout(sendNotice, CONSTANTS.NOTICE_DELAY)
+        }
+      }
+      sendNotice()
     }
   }
 }

src/main/services/plugin/manager/converter-event-driven.ts

@@ -68,7 +68,6 @@ function extractDefaultSources() {
         };
       });
       
-      console.log('提取的音源配置:', extractedSources);
       return extractedSources;
     } catch (e) {
       console.log('解析 MUSIC_QUALITY 失败:', e.message);
@@ -94,6 +93,70 @@ sources = extractDefaultSources();
 let isInitialized = false;
 let pluginSources = {};
 let requestHandler = null;
+let updateAlertSent = false; // 防止重复发送更新提示
+
+// 处理更新提示事件
+function handleUpdateAlert(data, cerumusicApi) {
+  // 每次运行脚本只能调用一次
+  if (updateAlertSent) {
+    console.warn(\`[${pluginName}] updateAlert 事件每次运行脚本只能调用一次，忽略重复调用\`);
+    return;
+  }
+  
+  if (!data || !data.log) {
+    console.error(\`[${pluginName}] updateAlert 事件缺少必需的 log 参数\`);
+    return;
+  }
+  
+  // 验证和处理参数
+  let log = String(data.log);
+  let updateUrl = data.updateUrl ? String(data.updateUrl) : undefined;
+  
+  // 限制 log 长度为 1024 字符
+  if (log.length > 1024) {
+    log = log.substring(0, 1024);
+    console.warn(\`[${pluginName}] 更新日志超过 1024 字符，已截断\`);
+  }
+  
+  // 验证 updateUrl 格式
+  if (updateUrl) {
+    if (updateUrl.length > 1024) {
+      updateUrl = updateUrl.substring(0, 1024);
+      console.warn(\`[${pluginName}] 更新地址超过 1024 字符，已截断\`);
+    }
+    
+    if (!updateUrl.startsWith('http://') && !updateUrl.startsWith('https://')) {
+      console.error(\`[${pluginName}] updateUrl 必须是 HTTP 协议的 URL 地址\`);
+      updateUrl = undefined;
+    }
+  }
+  
+  // 标记已发送
+  updateAlertSent = true;
+  
+  // 通过 CeruMusic 的通知系统发送更新提示
+  try {
+    // 使用传入的 cerumusic API 对象发送通知
+    if (cerumusicApi && cerumusicApi.NoticeCenter) {
+      cerumusicApi.NoticeCenter('update', {
+        title: \`${pluginName} 有新版本可用\`,
+        content: log,
+        url: updateUrl,
+        pluginInfo: {
+          name: '${pluginName}',
+          type: 'lx',
+          forcedUpdate: false
+        }
+      });
+      
+      console.log(\`[${pluginName}] 更新提示已发送\`, { log: log.substring(0, 100) + '...', updateUrl });
+    } else {
+      console.error(\`[${pluginName}] CeruMusic API 不可用，无法发送更新提示\`);
+    }
+  } catch (error) {
+    console.error(\`[${pluginName}] 发送更新提示失败:\`, error.message);
+  }
+}
 initializePlugin()
 function initializePlugin() {
   if (isInitialized) return;
@@ -133,9 +196,9 @@ function initializePlugin() {
             qualitys: sourceInfo.qualitys || originalQualitys || ['128k', '320k']
           };
         });
-        
-        console.log('[${pluginName + ' by Ceru插件' || 'ceru插件'}] 音源注册完成:', Object.keys(pluginSources));
-        console.log('[${pluginName + ' by Ceru插件' || 'ceru插件'}] 动态音源信息已更新:', sources);
+      } else if (event === 'updateAlert' && data) {
+        // 处理更新提示事件，传入 cerumusic API
+        handleUpdateAlert(data, cerumusic);
       }
     },
     request: request,

src/main/utils/downloadSongs.ts

@@ -0,0 +1,508 @@
+import NodeID3 from 'node-id3'
+import ffmpegStatic from 'ffmpeg-static'
+import ffmpeg from 'fluent-ffmpeg'
+import path from 'node:path'
+import axios from 'axios'
+import fs from 'fs'
+import fsPromise from 'fs/promises'
+import { configManager } from '../services/ConfigManager'
+import { pipeline } from 'node:stream/promises'
+import { fileURLToPath } from 'url'
+
+const fileLock: Record<string, boolean> = {}
+
+/**
+ * 转换LRC格式
+ * 将带有字符位置信息的LRC格式转换为标准的逐字时间戳格式
+ * @param lrcContent 原始LRC内容
+ * @returns 转换后的LRC内容
+ */
+function convertLrcFormat(lrcContent: string): string {
+  if (!lrcContent) return ''
+
+  const lines = lrcContent.split('\n')
+  const convertedLines: string[] = []
+
+  for (const line of lines) {
+    // 跳过空行
+    if (!line.trim()) {
+      convertedLines.push(line)
+      continue
+    }
+
+    // 检查是否是新格式：[开始时间,持续时间](开始时间,字符持续时间,0)字符
+    const newFormatMatch = line.match(/^\[(\d+),(\d+)\](.*)$/)
+    if (newFormatMatch) {
+      const [, startTimeMs, , content] = newFormatMatch
+      const convertedLine = convertNewFormat(parseInt(startTimeMs), content)
+      convertedLines.push(convertedLine)
+      continue
+    }
+
+    // 检查是否是旧格式：[mm:ss.xxx]字符(偏移,持续时间)
+    const oldFormatMatch = line.match(/^\[(\d{2}:\d{2}\.\d{3})\](.*)$/)
+    if (oldFormatMatch) {
+      const [, timestamp, content] = oldFormatMatch
+
+      // 如果内容中没有位置信息，直接返回原行
+      if (!content.includes('(') || !content.includes(')')) {
+        convertedLines.push(line)
+        continue
+      }
+
+      const convertedLine = convertOldFormat(timestamp, content)
+      convertedLines.push(convertedLine)
+      continue
+    }
+
+    // 其他行直接保留
+    convertedLines.push(line)
+  }
+
+  return convertedLines.join('\n')
+}
+
+/**
+ * 将毫秒时间戳格式化为 mm:ss.xxx 格式
+ * @param timeMs 毫秒时间戳
+ * @returns 格式化的时间字符串
+ */
+function formatTimestamp(timeMs: number): string {
+  const minutes = Math.floor(timeMs / 60000)
+  const seconds = Math.floor((timeMs % 60000) / 1000)
+  const milliseconds = timeMs % 1000
+
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`
+}
+
+/**
+ * 转换新格式：[开始时间,持续时间](开始时间,字符持续时间,0)字符
+ */
+function convertNewFormat(baseTimeMs: number, content: string): string {
+  const baseTimestamp = formatTimestamp(baseTimeMs)
+  let convertedContent = `<${baseTimestamp}>`
+
+  // 匹配模式：(开始时间,字符持续时间,0)字符
+  const charPattern = /\((\d+),(\d+),(\d+)\)([^(]*?)(?=\(|$)/g
+  let match
+  let isFirstChar = true
+
+  while ((match = charPattern.exec(content)) !== null) {
+    const [, charStartMs, , , char] = match
+    const charTimeMs = parseInt(charStartMs)
+    const charTimestamp = formatTimestamp(charTimeMs)
+
+    if (isFirstChar) {
+      // 第一个字符直接添加
+      convertedContent += char.trim()
+      isFirstChar = false
+    } else {
+      convertedContent += `<${charTimestamp}>${char.trim()}`
+    }
+  }
+
+  return `[${baseTimestamp}]${convertedContent}`
+}
+
+/**
+ * 转换旧格式：[mm:ss.xxx]字符(偏移,持续时间)
+ */
+function convertOldFormat(timestamp: string, content: string): string {
+  // 解析基础时间戳（毫秒）
+  const [minutes, seconds] = timestamp.split(':')
+  const [sec, ms] = seconds.split('.')
+  const baseTimeMs = parseInt(minutes) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(ms)
+
+  let convertedContent = `<${timestamp}>`
+
+  // 匹配所有字符(偏移,持续时间)的模式
+  const charPattern = /([^()]+)\((\d+),(\d+)\)/g
+  let match
+  let lastIndex = 0
+  let isFirstChar = true
+
+  while ((match = charPattern.exec(content)) !== null) {
+    const [fullMatch, char, offsetMs, _durationMs] = match
+    const charTimeMs = baseTimeMs + parseInt(offsetMs)
+    const charTimestamp = formatTimestamp(charTimeMs)
+
+    // 添加匹配前的普通文本
+    if (match.index > lastIndex) {
+      const beforeText = content.substring(lastIndex, match.index)
+      if (beforeText.trim()) {
+        convertedContent += beforeText
+      }
+    }
+
+    // 添加带时间戳的字符
+    if (isFirstChar) {
+      // 第一个字符直接添加，不需要额外的时间戳
+      convertedContent += char
+      isFirstChar = false
+    } else {
+      convertedContent += `<${charTimestamp}>${char}`
+    }
+    lastIndex = match.index + fullMatch.length
+  }
+
+  // 添加剩余的普通文本
+  if (lastIndex < content.length) {
+    const remainingText = content.substring(lastIndex)
+    if (remainingText.trim()) {
+      convertedContent += remainingText
+    }
+  }
+
+  return `[${timestamp}]${convertedContent}`
+}
+
+// 写入音频标签的辅助函数
+async function writeAudioTags(filePath: string, songInfo: any, tagWriteOptions: any) {
+  try {
+    console.log('开始写入音频标签:', filePath, tagWriteOptions, songInfo)
+
+    // 获取文件扩展名来判断格式
+    const fileExtension = path.extname(filePath).toLowerCase().substring(1)
+    console.log('文件格式:', fileExtension)
+
+    // 根据文件格式选择不同的标签写入方法
+    if (fileExtension === 'mp3') {
+      await writeMP3Tags(filePath, songInfo, tagWriteOptions)
+    } else if (['flac', 'ogg', 'opus'].includes(fileExtension)) {
+      await writeVorbisCommentTags(filePath, songInfo, tagWriteOptions)
+    } else if (['m4a', 'mp4', 'aac'].includes(fileExtension)) {
+      await writeMP4Tags(filePath, songInfo, tagWriteOptions)
+    } else {
+      console.warn('不支持的音频格式:', fileExtension)
+      // 尝试使用 NodeID3 作为后备方案
+      await writeMP3Tags(filePath, songInfo, tagWriteOptions)
+    }
+  } catch (error) {
+    console.error('写入音频标签时发生错误:', error)
+    throw error
+  }
+}
+
+// MP3 格式标签写入
+async function writeMP3Tags(filePath: string, songInfo: any, tagWriteOptions: any) {
+  const tags: any = {}
+
+  // 写入基础信息
+  if (tagWriteOptions.basicInfo) {
+    tags.title = songInfo.name || ''
+    tags.artist = songInfo.singer || ''
+    tags.album = songInfo.albumName || ''
+    tags.year = songInfo.year || ''
+    tags.genre = songInfo.genre || ''
+  }
+
+  // 写入歌词
+  if (tagWriteOptions.lyrics && songInfo.lrc) {
+    const convertedLrc = convertLrcFormat(songInfo.lrc)
+    tags.unsynchronisedLyrics = {
+      language: 'chi',
+      shortText: 'Lyrics',
+      text: convertedLrc
+    }
+  }
+
+  // 写入封面
+  if (tagWriteOptions.cover && songInfo.img) {
+    try {
+      const coverResponse = await axios({
+        method: 'GET',
+        url: songInfo.img,
+        responseType: 'arraybuffer',
+        timeout: 10000
+      })
+
+      if (coverResponse.data) {
+        tags.image = {
+          mime: 'image/jpeg',
+          type: {
+            id: 3,
+            name: 'front cover'
+          },
+          description: 'Cover',
+          imageBuffer: Buffer.from(coverResponse.data)
+        }
+      }
+    } catch (coverError) {
+      console.warn('获取封面失败:', coverError)
+    }
+  }
+
+  // 写入标签到文件
+  if (Object.keys(tags).length > 0) {
+    const success = NodeID3.write(tags, filePath)
+    if (success) {
+      console.log('MP3音频标签写入成功:', filePath)
+    } else {
+      console.warn('MP3音频标签写入失败:', filePath)
+    }
+  }
+}
+
+// FLAC/OGG 格式标签写入 (使用 Vorbis Comment)
+async function writeVorbisCommentTags(filePath: string, songInfo: any, tagWriteOptions: any) {
+  try {
+    console.log('开始写入 FLAC 标签:', filePath)
+
+    // 准备新的标签数据
+    const newTags: any = {}
+
+    // 写入基础信息
+    if (tagWriteOptions.basicInfo) {
+      if (songInfo.name) newTags.TITLE = songInfo.name
+      if (songInfo.singer) newTags.ARTIST = songInfo.singer
+      if (songInfo.albumName) newTags.ALBUM = songInfo.albumName
+      if (songInfo.year) newTags.DATE = songInfo.year.toString()
+      if (songInfo.genre) newTags.GENRE = songInfo.genre
+    }
+
+    // 写入歌词
+    if (tagWriteOptions.lyrics && songInfo.lrc) {
+      const convertedLrc = convertLrcFormat(songInfo.lrc)
+      newTags.LYRICS = convertedLrc
+    }
+
+    console.log('准备写入的标签:', newTags)
+
+    // 使用 ffmpeg-static 写入 FLAC 标签
+    if (path.extname(filePath).toLowerCase() === '.flac') {
+      await writeFLACTagsWithFFmpeg(filePath, newTags, songInfo, tagWriteOptions)
+    } else {
+      console.warn('暂不支持该格式的标签写入:', path.extname(filePath))
+    }
+  } catch (error) {
+    console.error('写入 Vorbis Comment 标签失败:', error)
+    throw error
+  }
+}
+
+// 使用 fluent-ffmpeg 写入 FLAC 标签
+async function writeFLACTagsWithFFmpeg(
+  filePath: string,
+  tags: any,
+  songInfo: any,
+  tagWriteOptions: any
+) {
+  let tempOutputPath: string | null = null
+  let tempCoverPath: string | null = null
+
+  try {
+    if (!ffmpegStatic) {
+      throw new Error('ffmpeg-static 不可用')
+    }
+    ffmpeg.setFfmpegPath(ffmpegStatic.replace('app.asar', 'app.asar.unpacked'))
+
+    // 创建临时输出文件
+    tempOutputPath = filePath + '.temp.flac'
+
+    // 创建 fluent-ffmpeg 实例
+    let command = ffmpeg(filePath)
+      .audioCodec('copy') // 复制音频编解码器，不重新编码
+      .output(tempOutputPath)
+
+    // 添加元数据标签
+    for (const [key, value] of Object.entries(tags)) {
+      if (value) {
+        // fluent-ffmpeg 会自动处理特殊字符转义
+        command = command.outputOptions(['-metadata', `${key}=${value}`])
+      }
+    }
+
+    // 处理封面
+    if (tagWriteOptions.cover && songInfo.img) {
+      try {
+        console.log('开始下载封面:', songInfo.img)
+        const coverResponse = await axios({
+          method: 'GET',
+          url: songInfo.img,
+          responseType: 'arraybuffer',
+          timeout: 10000
+        })
+
+        if (coverResponse.data) {
+          // 保存临时封面文件
+          tempCoverPath = path.join(path.dirname(filePath), 'temp_cover.jpg')
+          await fsPromise.writeFile(tempCoverPath, Buffer.from(coverResponse.data))
+
+          // 添加封面作为输入
+          command = command.input(tempCoverPath).outputOptions([
+            '-map',
+            '0:a', // 映射原始文件的音频流
+            '-map',
+            '1:v', // 映射封面的视频流
+            '-c:v',
+            'copy', // 复制视频编解码器
+            '-disposition:v:0',
+            'attached_pic' // 设置为附加图片
+          ])
+
+          console.log('封面已添加到命令中')
+        }
+      } catch (coverError) {
+        console.warn(
+          '下载封面失败，跳过封面写入:',
+          coverError instanceof Error ? coverError.message : coverError
+        )
+      }
+    }
+
+    // 执行 ffmpeg 命令
+    await new Promise<void>((resolve, reject) => {
+      command
+        .on('start', () => {
+          console.log('执行 ffmpeg 命令')
+        })
+        .on('progress', (progress) => {
+          if (progress.percent) {
+            console.log('处理进度:', Math.round(progress.percent) + '%')
+          }
+        })
+        .on('end', () => {
+          console.log('ffmpeg 处理完成')
+          resolve()
+        })
+        .on('error', (err, _, stderr) => {
+          console.error('ffmpeg 错误:', err.message)
+          if (stderr) {
+            console.error('ffmpeg stderr:', stderr)
+          }
+          reject(new Error(`ffmpeg 处理失败: ${err.message}`))
+        })
+        .run()
+    })
+
+    // 检查临时文件是否创建成功
+    if (!fs.existsSync(tempOutputPath)) {
+      throw new Error('ffmpeg 未能创建输出文件')
+    }
+
+    // 替换原文件
+    await fsPromise.rename(tempOutputPath, filePath)
+    tempOutputPath = null // 标记已处理，避免重复清理
+
+    console.log('使用 fluent-ffmpeg 写入 FLAC 标签成功:', filePath)
+  } catch (error) {
+    console.error('使用 fluent-ffmpeg 写入 FLAC 标签失败:', error)
+    throw error
+  } finally {
+    // 清理所有临时文件
+    const filesToClean = [tempOutputPath, tempCoverPath].filter(Boolean) as string[]
+
+    for (const tempFile of filesToClean) {
+      try {
+        if (fs.existsSync(tempFile)) {
+          await fsPromise.unlink(tempFile)
+          console.log('已清理临时文件:', tempFile)
+        }
+      } catch (cleanupError) {
+        console.warn(
+          '清理临时文件失败:',
+          tempFile,
+          cleanupError instanceof Error ? cleanupError.message : cleanupError
+        )
+      }
+    }
+  }
+}
+
+// MP4/M4A 格式标签写入
+async function writeMP4Tags(filePath: string, _songInfo: any, _tagWriteOptions: any) {
+  console.log('MP4/M4A 格式标签写入暂未实现:', filePath)
+  // 可以使用 ffmpeg 或其他工具实现
+}
+
+// 获取自定义下载目录
+const getDownloadDirectory = (): string => {
+  // 使用配置管理服务获取下载目录
+  const directories = configManager.getDirectories()
+  return directories.downloadDir
+}
+
+// 从URL中提取文件扩展名，如果没有则默认为mp3
+const getFileExtension = (url: string): string => {
+  try {
+    const urlObj = new URL(url)
+    const pathname = urlObj.pathname
+    const lastDotIndex = pathname.lastIndexOf('.')
+    if (lastDotIndex !== -1 && lastDotIndex < pathname.length - 1) {
+      const extension = pathname.substring(lastDotIndex + 1).toLowerCase()
+      // 验证是否为常见的音频格式
+      const validExtensions = ['mp3', 'flac', 'wav', 'aac', 'm4a', 'ogg', 'wma']
+      if (validExtensions.includes(extension)) {
+        return extension
+      }
+    }
+  } catch (error) {
+    console.warn('解析URL失败，使用默认扩展名:', error)
+  }
+  return 'mp3' // 默认扩展名
+}
+
+export default async function download(
+  url: string,
+  songInfo: any,
+  tagWriteOptions: any
+): Promise<any> {
+  const fileExtension = getFileExtension(url)
+  const downloadDir = getDownloadDirectory()
+  const songPath = path.join(
+    downloadDir,
+    `${songInfo.name}-${songInfo.singer}-${songInfo.source}.${fileExtension}`
+      .replace(/[/\\:*?"<>|]/g, '')
+      .replace(/^\.+/, '')
+      .replace(/\.+$/, '')
+      .trim()
+  )
+
+  if (fileLock[songPath]) {
+    throw new Error('歌曲正在下载中')
+  } else {
+    fileLock[songPath] = true
+  }
+
+  try {
+    if (fs.existsSync(songPath)) {
+      return {
+        message: '歌曲已存在'
+      }
+    }
+    await fsPromise.mkdir(path.dirname(songPath), { recursive: true })
+
+    if (url.startsWith('file://')) {
+      const filePath = fileURLToPath(url)
+
+      const readStream = fs.createReadStream(filePath)
+      const writeStream = fs.createWriteStream(songPath)
+
+      await pipeline(readStream, writeStream)
+    } else {
+      const songDataRes = await axios({
+        method: 'GET',
+        url: url,
+        responseType: 'stream'
+      })
+
+      await pipeline(songDataRes.data, fs.createWriteStream(songPath))
+    }
+  } finally {
+    delete fileLock[songPath]
+  }
+
+  // 写入标签信息
+  if (tagWriteOptions && fs.existsSync(songPath)) {
+    try {
+      await writeAudioTags(songPath, songInfo, tagWriteOptions)
+    } catch (error) {
+      console.warn('写入音频标签失败:', error)
+      throw ffmpegStatic
+    }
+  }
+  return {
+    message: '下载成功',
+    path: songPath
+  }
+}

src/main/utils/index.ts

@@ -1,10 +1,9 @@
 // 导入通用工具函数
-import { dateFormat } from '../../common/utils/common'
+import { dateFormat } from '@common/utils/common'
 
 // 导出通用工具函数
 export * from '../../common/utils/nodejs'
 export * from '../../common/utils/common'
-export * from '../../common/utils/tools'
 
 /**
  * 格式化播放数量

src/main/utils/musicSdk/kg/index.js

@@ -5,10 +5,10 @@ import pic from './pic'
 import lyric from './lyric'
 import hotSearch from './hotSearch'
 import comment from './comment'
-// import tipSearch from './tipSearch'
+import tipSearch from './tipSearch'
 
 const kg = {
-  // tipSearch,
+  tipSearch,
   leaderboard,
   songList,
   musicSearch,
@@ -24,5 +24,4 @@ const kg = {
     return `https://www.kugou.com/song/#hash=${songInfo.hash}&album_id=${songInfo.albumId}`
   }
 }
-
 export default kg

src/main/utils/musicSdk/mg/index.js

@@ -5,10 +5,10 @@ import pic from './pic'
 import lyric from './lyric'
 import hotSearch from './hotSearch'
 import comment from './comment'
-// import tipSearch from './tipSearch'
+import tipSearch from './tipSearch'
 
 const mg = {
-  // tipSearch,
+  tipSearch,
   songList,
   musicSearch,
   leaderboard,

src/main/utils/musicSdk/tx/index.js

@@ -4,10 +4,10 @@ import songList from './songList'
 import musicSearch from './musicSearch'
 import hotSearch from './hotSearch'
 import comment from './comment'
-// import tipSearch from './tipSearch'
+import tipSearch from './tipSearch'
 
 const tx = {
-  // tipSearch,
+  tipSearch,
   leaderboard,
   songList,
   musicSearch,
@@ -21,5 +21,4 @@ const tx = {
     return `https://y.qq.com/n/yqq/song/${songInfo.songmid}.html`
   }
 }
-
 export default tx

src/main/utils/musicSdk/tx/lyric.js

@@ -1,10 +1,31 @@
+import qrcDecrypt from './qrc-decrypt'
 import { httpFetch } from '../../request'
 import getMusicInfo from './musicInfo'
 
 const songIdMap = new Map()
 const promises = new Map()
+const decode = qrcDecrypt()
 
 export default {
+  rxps: {
+    info: /^{"/,
+    lineTime: /^\[(\d+),\d+\]/,
+    lineTime2: /^\[([\d:.]+)\]/,
+    wordTime: /\(\d+,\d+,\d+\)/,
+    wordTimeAll: /(\(\d+,\d+,\d+\))/g,
+    timeLabelFixRxp: /(?:\.0+|0+)$/
+  },
+  msFormat(timeMs) {
+    if (Number.isNaN(timeMs)) return ''
+    let ms = timeMs % 1000
+    timeMs /= 1000
+    let m = parseInt(timeMs / 60)
+      .toString()
+      .padStart(2, '0')
+    timeMs %= 60
+    let s = parseInt(timeMs).toString().padStart(2, '0')
+    return `[${m}:${s}.${String(ms).padStart(3, '0')}]`
+  },
   successCode: 0,
   async getSongId({ songId, songmid }) {
     if (songId) return songId
@@ -17,6 +38,179 @@ export default {
     promises.delete(songmid)
     return info.songId
   },
+  removeTag(str) {
+    return str.replace(/^[\S\s]*?LyricContent="/, '').replace(/"\/>[\S\s]*?$/, '')
+  },
+  parseCeru(lrc) {
+    lrc = lrc.trim()
+    lrc = lrc.replace(/\r/g, '')
+    if (!lrc) return { lyric: '', lxlyric: '' }
+    const lines = lrc.split('\n')
+
+    const lxlrcLines = []
+    const lrcLines = []
+
+    for (let line of lines) {
+      line = line.trim()
+      let result = this.rxps.lineTime.exec(line)
+      if (!result) {
+        if (line.startsWith('[offset')) {
+          lxlrcLines.push(line)
+          lrcLines.push(line)
+          continue
+        }
+        if (this.rxps.lineTime2.test(line)) {
+          // lxlrcLines.push(line)
+          lrcLines.push(line)
+        }
+        continue
+      }
+
+      const startMsTime = parseInt(result[1])
+      const startTimeStr = this.msFormat(startMsTime)
+      if (!startTimeStr) continue
+
+      let words = line.replace(this.rxps.lineTime, '')
+
+      lrcLines.push(`${startTimeStr}${words.replace(this.rxps.wordTimeAll, '')}`)
+
+      let times = words.match(this.rxps.wordTimeAll)
+      if (!times) continue
+
+      let currentStart = startMsTime
+      const processedTimes = []
+
+      times.forEach((time) => {
+        const result = /\((\d+),(\d+),(\d+)\)/.exec(time)
+        const duration = parseInt(result[2])
+        processedTimes.push(`(${currentStart},${duration},0)`)
+        currentStart += duration
+      })
+
+      const wordArr = words.split(this.rxps.wordTime)
+      const newWords = processedTimes.map((time, index) => `${time}${wordArr[index]}`).join('')
+      lxlrcLines.push(`${startTimeStr}${newWords}`)
+    }
+    return {
+      lyric: lrcLines.join('\n'),
+      lxlyric: lxlrcLines.join('\n')
+    }
+  },
+  getIntv(interval) {
+    if (!interval) return 0
+    if (!interval.includes('.')) interval += '.0'
+    let arr = interval.split(/:|\./)
+    while (arr.length < 3) arr.unshift('0')
+    const [m, s, ms] = arr
+    return parseInt(m) * 3600000 + parseInt(s) * 1000 + parseInt(ms)
+  },
+  fixRlrcTimeTag(rlrc, lrc) {
+    // console.log(lrc)
+    // console.log(rlrc)
+    const rlrcLines = rlrc.split('\n')
+    let lrcLines = lrc.split('\n')
+    // let temp = []
+    let newLrc = []
+    rlrcLines.forEach((line) => {
+      const result = this.rxps.lineTime2.exec(line)
+      if (!result) return
+      const words = line.replace(this.rxps.lineTime2, '')
+      if (!words.trim()) return
+      const t1 = this.getIntv(result[1])
+
+      while (lrcLines.length) {
+        const lrcLine = lrcLines.shift()
+        const lrcLineResult = this.rxps.lineTime2.exec(lrcLine)
+        if (!lrcLineResult) continue
+        const t2 = this.getIntv(lrcLineResult[1])
+        if (Math.abs(t1 - t2) < 100) {
+          newLrc.push(line.replace(this.rxps.lineTime2, lrcLineResult[0]))
+          break
+        }
+        // temp.push(line)
+      }
+      // lrcLines = [...temp, ...lrcLines]
+      // temp = []
+    })
+    return newLrc.join('\n')
+  },
+  fixTlrcTimeTag(tlrc, lrc) {
+    // console.log(lrc)
+    // console.log(tlrc)
+    const tlrcLines = tlrc.split('\n')
+    let lrcLines = lrc.split('\n')
+    // let temp = []
+    let newLrc = []
+    tlrcLines.forEach((line) => {
+      const result = this.rxps.lineTime2.exec(line)
+      if (!result) return
+      const words = line.replace(this.rxps.lineTime2, '')
+      if (!words.trim()) return
+      let time = result[1]
+      if (time.includes('.')) {
+        time += ''.padStart(3 - time.split('.')[1].length, '0')
+      }
+      const t1 = this.getIntv(time)
+
+      while (lrcLines.length) {
+        const lrcLine = lrcLines.shift()
+        const lrcLineResult = this.rxps.lineTime2.exec(lrcLine)
+        if (!lrcLineResult) continue
+        const t2 = this.getIntv(lrcLineResult[1])
+        if (Math.abs(t1 - t2) < 100) {
+          newLrc.push(line.replace(this.rxps.lineTime2, lrcLineResult[0]))
+          break
+        }
+        // temp.push(line)
+      }
+      // lrcLines = [...temp, ...lrcLines]
+      // temp = []
+    })
+    return newLrc.join('\n')
+  },
+  parse(lrc, tlrc, rlrc) {
+    const info = {
+      lyric: '',
+      tlyric: '',
+      rlyric: '',
+      crlyric: ''
+    }
+    if (lrc) {
+      let { lyric } = this.parseCeru(this.removeTag(lrc))
+      info.lyric = lyric
+      info.crlyric = lrc
+    }
+    if (rlrc) info.rlyric = this.fixRlrcTimeTag(this.parseRlyric(this.removeTag(rlrc)), info.lyric)
+    if (tlrc) info.tlyric = this.fixTlrcTimeTag(tlrc, info.lyric)
+
+    return info
+  },
+  parseRlyric(lrc) {
+    lrc = lrc.trim()
+    lrc = lrc.replace(/\r/g, '')
+    if (!lrc) return { lyric: '', lxlyric: '' }
+    const lines = lrc.split('\n')
+
+    const lrcLines = []
+
+    for (let line of lines) {
+      line = line.trim()
+      let result = this.rxps.lineTime.exec(line)
+      if (!result) continue
+
+      const startMsTime = parseInt(result[1])
+      const startTimeStr = this.msFormat(startMsTime)
+      if (!startTimeStr) continue
+
+      let words = line.replace(this.rxps.lineTime, '')
+
+      lrcLines.push(`${startTimeStr}${words.replace(this.rxps.wordTimeAll, '')}`)
+    }
+    return lrcLines.join('\n')
+  },
+  parseLyric(lrc, tlrc, rlrc) {
+    return this.parse(decode(lrc), decode(tlrc), decode(rlrc))
+  },
   getLyric(mInfo, retryNum = 0) {
     if (retryNum > 3) return Promise.reject(new Error('Get lyric failed'))
 

src/main/utils/musicSdk/tx/qrc-decrypt.js

@@ -0,0 +1,521 @@
+import zlib from 'zlib'
+
+export default () => {
+  const ENCRYPT = 1
+  const DECRYPT = 0
+
+  const sbox = [
+    // sbox1
+    [
+      14, 4, 13, 1, 2, 15, 11, 8, 3, 10, 6, 12, 5, 9, 0, 7, 0, 15, 7, 4, 14, 2, 13, 1, 10, 6, 12,
+      11, 9, 5, 3, 8, 4, 1, 14, 8, 13, 6, 2, 11, 15, 12, 9, 7, 3, 10, 5, 0, 15, 12, 8, 2, 4, 9, 1,
+      7, 5, 11, 3, 14, 10, 0, 6, 13
+    ],
+    // sbox2
+    [
+      15, 1, 8, 14, 6, 11, 3, 4, 9, 7, 2, 13, 12, 0, 5, 10, 3, 13, 4, 7, 15, 2, 8, 15, 12, 0, 1, 10,
+      6, 9, 11, 5, 0, 14, 7, 11, 10, 4, 13, 1, 5, 8, 12, 6, 9, 3, 2, 15, 13, 8, 10, 1, 3, 15, 4, 2,
+      11, 6, 7, 12, 0, 5, 14, 9
+    ],
+    // sbox3
+    [
+      10, 0, 9, 14, 6, 3, 15, 5, 1, 13, 12, 7, 11, 4, 2, 8, 13, 7, 0, 9, 3, 4, 6, 10, 2, 8, 5, 14,
+      12, 11, 15, 1, 13, 6, 4, 9, 8, 15, 3, 0, 11, 1, 2, 12, 5, 10, 14, 7, 1, 10, 13, 0, 6, 9, 8, 7,
+      4, 15, 14, 3, 11, 5, 2, 12
+    ],
+    // sbox4
+    [
+      7, 13, 14, 3, 0, 6, 9, 10, 1, 2, 8, 5, 11, 12, 4, 15, 13, 8, 11, 5, 6, 15, 0, 3, 4, 7, 2, 12,
+      1, 10, 14, 9, 10, 6, 9, 0, 12, 11, 7, 13, 15, 1, 3, 14, 5, 2, 8, 4, 3, 15, 0, 6, 10, 10, 13,
+      8, 9, 4, 5, 11, 12, 7, 2, 14
+    ],
+    // sbox5
+    [
+      2, 12, 4, 1, 7, 10, 11, 6, 8, 5, 3, 15, 13, 0, 14, 9, 14, 11, 2, 12, 4, 7, 13, 1, 5, 0, 15,
+      10, 3, 9, 8, 6, 4, 2, 1, 11, 10, 13, 7, 8, 15, 9, 12, 5, 6, 3, 0, 14, 11, 8, 12, 7, 1, 14, 2,
+      13, 6, 15, 0, 9, 10, 4, 5, 3
+    ],
+    // sbox6
+    [
+      12, 1, 10, 15, 9, 2, 6, 8, 0, 13, 3, 4, 14, 7, 5, 11, 10, 15, 4, 2, 7, 12, 9, 5, 6, 1, 13, 14,
+      0, 11, 3, 8, 9, 14, 15, 5, 2, 8, 12, 3, 7, 0, 4, 10, 1, 13, 11, 6, 4, 3, 2, 12, 9, 5, 15, 10,
+      11, 14, 1, 7, 6, 0, 8, 13
+    ],
+    // sbox7
+    [
+      4, 11, 2, 14, 15, 0, 8, 13, 3, 12, 9, 7, 5, 10, 6, 1, 13, 0, 11, 7, 4, 9, 1, 10, 14, 3, 5, 12,
+      2, 15, 8, 6, 1, 4, 11, 13, 12, 3, 7, 14, 10, 15, 6, 8, 0, 5, 9, 2, 6, 11, 13, 8, 1, 4, 10, 7,
+      9, 5, 0, 15, 14, 2, 3, 12
+    ],
+    // sbox8
+    [
+      13, 2, 8, 4, 6, 15, 11, 1, 10, 9, 3, 14, 5, 0, 12, 7, 1, 15, 13, 8, 10, 3, 7, 4, 12, 5, 6, 11,
+      0, 14, 9, 2, 7, 11, 4, 1, 9, 12, 14, 2, 0, 6, 10, 13, 15, 3, 5, 8, 2, 1, 14, 7, 4, 10, 8, 13,
+      15, 12, 9, 0, 3, 5, 6, 11
+    ]
+  ]
+
+  /**
+   * 从 Buffer 中提取指定位置的位,并左移指定偏移量
+   * @param {Buffer} a - Buffer
+   * @param {number} b - 要提取的位索引
+   * @param {number} c - 位提取后的偏移量
+   * @returns {number} 提取后的位
+   */
+  function bitnum(a, b, c) {
+    const byteIndex = Math.floor(b / 32) * 4 + 3 - Math.floor((b % 32) / 8)
+    const bitInByte = 7 - (b % 8)
+    const bit = (a[byteIndex] >> bitInByte) & 1
+    return bit << c
+  }
+
+  /**
+   * 从整数中提取指定位置的位,并左移指定偏移量
+   * @param {number} a - 整数
+   * @param {number} b - 要提取的位索引
+   * @param {number} c - 位提取后的偏移量
+   * @returns {number} 提取后的位
+   */
+  function bitnum_intr(a, b, c) {
+    return (((a >>> (31 - b)) & 1) << c) | 0
+  }
+
+  /**
+   * 从整数中提取指定位置的位,并右移指定偏移量
+   * @param {number} a - 整数
+   * @param {number} b - 要提取的位索引
+   * @param {number} c - 位提取后的偏移量
+   * @returns {number} 提取后的位
+   */
+  function bitnum_intl(a, b, c) {
+    return (((a << b) & 0x80000000) >>> c) | 0
+  }
+
+  /**
+   * 对输入整数进行位运算,重新组合位
+   * @param {number} a - 整数
+   * @returns {number} 重新组合后的位
+   */
+  function sbox_bit(a) {
+    return (a & 32) | ((a & 31) >> 1) | ((a & 1) << 4) | 0
+  }
+
+  /**
+   * 初始置换
+   * @param {Buffer} input_data - 输入 Buffer
+   * @returns {[number, number]} 初始置换后的两个32位整数
+   */
+  function initial_permutation(input_data) {
+    const s0 =
+      bitnum(input_data, 57, 31) |
+      bitnum(input_data, 49, 30) |
+      bitnum(input_data, 41, 29) |
+      bitnum(input_data, 33, 28) |
+      bitnum(input_data, 25, 27) |
+      bitnum(input_data, 17, 26) |
+      bitnum(input_data, 9, 25) |
+      bitnum(input_data, 1, 24) |
+      bitnum(input_data, 59, 23) |
+      bitnum(input_data, 51, 22) |
+      bitnum(input_data, 43, 21) |
+      bitnum(input_data, 35, 20) |
+      bitnum(input_data, 27, 19) |
+      bitnum(input_data, 19, 18) |
+      bitnum(input_data, 11, 17) |
+      bitnum(input_data, 3, 16) |
+      bitnum(input_data, 61, 15) |
+      bitnum(input_data, 53, 14) |
+      bitnum(input_data, 45, 13) |
+      bitnum(input_data, 37, 12) |
+      bitnum(input_data, 29, 11) |
+      bitnum(input_data, 21, 10) |
+      bitnum(input_data, 13, 9) |
+      bitnum(input_data, 5, 8) |
+      bitnum(input_data, 63, 7) |
+      bitnum(input_data, 55, 6) |
+      bitnum(input_data, 47, 5) |
+      bitnum(input_data, 39, 4) |
+      bitnum(input_data, 31, 3) |
+      bitnum(input_data, 23, 2) |
+      bitnum(input_data, 15, 1) |
+      bitnum(input_data, 7, 0) |
+      0
+
+    const s1 =
+      bitnum(input_data, 56, 31) |
+      bitnum(input_data, 48, 30) |
+      bitnum(input_data, 40, 29) |
+      bitnum(input_data, 32, 28) |
+      bitnum(input_data, 24, 27) |
+      bitnum(input_data, 16, 26) |
+      bitnum(input_data, 8, 25) |
+      bitnum(input_data, 0, 24) |
+      bitnum(input_data, 58, 23) |
+      bitnum(input_data, 50, 22) |
+      bitnum(input_data, 42, 21) |
+      bitnum(input_data, 34, 20) |
+      bitnum(input_data, 26, 19) |
+      bitnum(input_data, 18, 18) |
+      bitnum(input_data, 10, 17) |
+      bitnum(input_data, 2, 16) |
+      bitnum(input_data, 60, 15) |
+      bitnum(input_data, 52, 14) |
+      bitnum(input_data, 44, 13) |
+      bitnum(input_data, 36, 12) |
+      bitnum(input_data, 28, 11) |
+      bitnum(input_data, 20, 10) |
+      bitnum(input_data, 12, 9) |
+      bitnum(input_data, 4, 8) |
+      bitnum(input_data, 62, 7) |
+      bitnum(input_data, 54, 6) |
+      bitnum(input_data, 46, 5) |
+      bitnum(input_data, 38, 4) |
+      bitnum(input_data, 30, 3) |
+      bitnum(input_data, 22, 2) |
+      bitnum(input_data, 14, 1) |
+      bitnum(input_data, 6, 0) |
+      0
+
+    return [s0, s1]
+  }
+
+  /**
+   * 逆初始置换
+   * @param {number} s0 - 32位整数
+   * @param {number} s1 - 32位整数
+   * @returns {Buffer} 逆初始置换后的 Buffer
+   */
+  function inverse_permutation(s0, s1) {
+    const data = Buffer.alloc(8)
+    data[3] =
+      bitnum_intr(s1, 7, 7) |
+      bitnum_intr(s0, 7, 6) |
+      bitnum_intr(s1, 15, 5) |
+      bitnum_intr(s0, 15, 4) |
+      bitnum_intr(s1, 23, 3) |
+      bitnum_intr(s0, 23, 2) |
+      bitnum_intr(s1, 31, 1) |
+      bitnum_intr(s0, 31, 0) |
+      0
+    data[2] =
+      bitnum_intr(s1, 6, 7) |
+      bitnum_intr(s0, 6, 6) |
+      bitnum_intr(s1, 14, 5) |
+      bitnum_intr(s0, 14, 4) |
+      bitnum_intr(s1, 22, 3) |
+      bitnum_intr(s0, 22, 2) |
+      bitnum_intr(s1, 30, 1) |
+      bitnum_intr(s0, 30, 0) |
+      0
+    data[1] =
+      bitnum_intr(s1, 5, 7) |
+      bitnum_intr(s0, 5, 6) |
+      bitnum_intr(s1, 13, 5) |
+      bitnum_intr(s0, 13, 4) |
+      bitnum_intr(s1, 21, 3) |
+      bitnum_intr(s0, 21, 2) |
+      bitnum_intr(s1, 29, 1) |
+      bitnum_intr(s0, 29, 0) |
+      0
+    data[0] =
+      bitnum_intr(s1, 4, 7) |
+      bitnum_intr(s0, 4, 6) |
+      bitnum_intr(s1, 12, 5) |
+      bitnum_intr(s0, 12, 4) |
+      bitnum_intr(s1, 20, 3) |
+      bitnum_intr(s0, 20, 2) |
+      bitnum_intr(s1, 28, 1) |
+      bitnum_intr(s0, 28, 0) |
+      0
+    data[7] =
+      bitnum_intr(s1, 3, 7) |
+      bitnum_intr(s0, 3, 6) |
+      bitnum_intr(s1, 11, 5) |
+      bitnum_intr(s0, 11, 4) |
+      bitnum_intr(s1, 19, 3) |
+      bitnum_intr(s0, 19, 2) |
+      bitnum_intr(s1, 27, 1) |
+      bitnum_intr(s0, 27, 0) |
+      0
+    data[6] =
+      bitnum_intr(s1, 2, 7) |
+      bitnum_intr(s0, 2, 6) |
+      bitnum_intr(s1, 10, 5) |
+      bitnum_intr(s0, 10, 4) |
+      bitnum_intr(s1, 18, 3) |
+      bitnum_intr(s0, 18, 2) |
+      bitnum_intr(s1, 26, 1) |
+      bitnum_intr(s0, 26, 0) |
+      0
+    data[5] =
+      bitnum_intr(s1, 1, 7) |
+      bitnum_intr(s0, 1, 6) |
+      bitnum_intr(s1, 9, 5) |
+      bitnum_intr(s0, 9, 4) |
+      bitnum_intr(s1, 17, 3) |
+      bitnum_intr(s0, 17, 2) |
+      bitnum_intr(s1, 25, 1) |
+      bitnum_intr(s0, 25, 0) |
+      0
+    data[4] =
+      bitnum_intr(s1, 0, 7) |
+      bitnum_intr(s0, 0, 6) |
+      bitnum_intr(s1, 8, 5) |
+      bitnum_intr(s0, 8, 4) |
+      bitnum_intr(s1, 16, 3) |
+      bitnum_intr(s0, 16, 2) |
+      bitnum_intr(s1, 24, 1) |
+      bitnum_intr(s0, 24, 0) |
+      0
+    return data
+  }
+
+  /**
+   * Triple-DES F函数
+   * @param {number} state - 输入
+   * @param {number[]} key - 密钥
+   * @returns {number} 输出
+   */
+  function f(state, key) {
+    state = state | 0
+    const t1 =
+      bitnum_intl(state, 31, 0) |
+      (((state & 0xf0000000) >>> 1) | 0) |
+      bitnum_intl(state, 4, 5) |
+      bitnum_intl(state, 3, 6) |
+      (((state & 0x0f000000) >>> 3) | 0) |
+      bitnum_intl(state, 8, 11) |
+      bitnum_intl(state, 7, 12) |
+      (((state & 0x00f00000) >>> 5) | 0) |
+      bitnum_intl(state, 12, 17) |
+      bitnum_intl(state, 11, 18) |
+      (((state & 0x000f0000) >>> 7) | 0) |
+      bitnum_intl(state, 16, 23) |
+      0
+
+    const t2 =
+      bitnum_intl(state, 15, 0) |
+      (((state & 0x0000f000) << 15) | 0) |
+      bitnum_intl(state, 20, 5) |
+      bitnum_intl(state, 19, 6) |
+      (((state & 0x00000f00) << 13) | 0) |
+      bitnum_intl(state, 24, 11) |
+      bitnum_intl(state, 23, 12) |
+      (((state & 0x000000f0) << 11) | 0) |
+      bitnum_intl(state, 28, 17) |
+      bitnum_intl(state, 27, 18) |
+      (((state & 0x0000000f) << 9) | 0) |
+      bitnum_intl(state, 0, 23) |
+      0
+
+    const _lrgstate = [
+      (t1 >>> 24) & 0xff,
+      (t1 >>> 16) & 0xff,
+      (t1 >>> 8) & 0xff,
+      (t2 >>> 24) & 0xff,
+      (t2 >>> 16) & 0xff,
+      (t2 >>> 8) & 0xff
+    ]
+
+    const lrgstate = _lrgstate.map((val, i) => val ^ key[i])
+
+    const newState =
+      (sbox[0][sbox_bit(lrgstate[0] >>> 2)] << 28) |
+      (sbox[1][sbox_bit(((lrgstate[0] & 0x03) << 4) | (lrgstate[1] >>> 4))] << 24) |
+      (sbox[2][sbox_bit(((lrgstate[1] & 0x0f) << 2) | (lrgstate[2] >>> 6))] << 20) |
+      (sbox[3][sbox_bit(lrgstate[2] & 0x3f)] << 16) |
+      (sbox[4][sbox_bit(lrgstate[3] >>> 2)] << 12) |
+      (sbox[5][sbox_bit(((lrgstate[3] & 0x03) << 4) | (lrgstate[4] >>> 4))] << 8) |
+      (sbox[6][sbox_bit(((lrgstate[4] & 0x0f) << 2) | (lrgstate[5] >>> 6))] << 4) |
+      sbox[7][sbox_bit(lrgstate[5] & 0x3f)] |
+      0
+
+    return (
+      bitnum_intl(newState, 15, 0) |
+      bitnum_intl(newState, 6, 1) |
+      bitnum_intl(newState, 19, 2) |
+      bitnum_intl(newState, 20, 3) |
+      bitnum_intl(newState, 28, 4) |
+      bitnum_intl(newState, 11, 5) |
+      bitnum_intl(newState, 27, 6) |
+      bitnum_intl(newState, 16, 7) |
+      bitnum_intl(newState, 0, 8) |
+      bitnum_intl(newState, 14, 9) |
+      bitnum_intl(newState, 22, 10) |
+      bitnum_intl(newState, 25, 11) |
+      bitnum_intl(newState, 4, 12) |
+      bitnum_intl(newState, 17, 13) |
+      bitnum_intl(newState, 30, 14) |
+      bitnum_intl(newState, 9, 15) |
+      bitnum_intl(newState, 1, 16) |
+      bitnum_intl(newState, 7, 17) |
+      bitnum_intl(newState, 23, 18) |
+      bitnum_intl(newState, 13, 19) |
+      bitnum_intl(newState, 31, 20) |
+      bitnum_intl(newState, 26, 21) |
+      bitnum_intl(newState, 2, 22) |
+      bitnum_intl(newState, 8, 23) |
+      bitnum_intl(newState, 18, 24) |
+      bitnum_intl(newState, 12, 25) |
+      bitnum_intl(newState, 29, 26) |
+      bitnum_intl(newState, 5, 27) |
+      bitnum_intl(newState, 21, 28) |
+      bitnum_intl(newState, 10, 29) |
+      bitnum_intl(newState, 3, 30) |
+      bitnum_intl(newState, 24, 31) |
+      0
+    )
+  }
+
+  /**
+   * TripleDES 加密/解密算法 (单块)
+   * @param {Buffer} input_data - 输入 Buffer
+   * @param {number[][]} key - 密钥
+   * @returns {Buffer} 加/解密后的 Buffer
+   */
+  function crypt(input_data, key) {
+    let [s0, s1] = initial_permutation(input_data)
+
+    for (let idx = 0; idx < 15; idx++) {
+      const previous_s1 = s1
+      s1 = (f(s1, key[idx]) ^ s0) | 0
+      s0 = previous_s1
+    }
+    s0 = (f(s1, key[15]) ^ s0) | 0
+
+    return inverse_permutation(s0, s1)
+  }
+
+  /**
+   * TripleDES 密钥扩展算法
+   * @param {Buffer} key - 密钥
+   * @param {number} mode - 模式 (ENCRYPT/DECRYPT)
+   * @returns {number[][]} 密钥扩展
+   */
+  function key_schedule(key, mode) {
+    const schedule = Array.from({ length: 16 }, () => Array(6).fill(0))
+    const key_rnd_shift = [1, 1, 2, 2, 2, 2, 2, 2, 1, 2, 2, 2, 2, 2, 2, 1]
+    const key_perm_c = [
+      56, 48, 40, 32, 24, 16, 8, 0, 57, 49, 41, 33, 25, 17, 9, 1, 58, 50, 42, 34, 26, 18, 10, 2, 59,
+      51, 43, 35
+    ]
+    const key_perm_d = [
+      62, 54, 46, 38, 30, 22, 14, 6, 61, 53, 45, 37, 29, 21, 13, 5, 60, 52, 44, 36, 28, 20, 12, 4,
+      27, 19, 11, 3
+    ]
+    const key_compression = [
+      13, 16, 10, 23, 0, 4, 2, 27, 14, 5, 20, 9, 22, 18, 11, 3, 25, 7, 15, 6, 26, 19, 12, 1, 40, 51,
+      30, 36, 46, 54, 29, 39, 50, 44, 32, 47, 43, 48, 38, 55, 33, 52, 45, 41, 49, 35, 28, 31
+    ]
+
+    let c = 0,
+      d = 0
+    for (let i = 0; i < 28; i++) {
+      c |= bitnum(key, key_perm_c[i], 31 - i)
+      d |= bitnum(key, key_perm_d[i], 31 - i)
+    }
+    c = c | 0
+    d = d | 0
+
+    for (let i = 0; i < 16; i++) {
+      const shift = key_rnd_shift[i]
+      c = (((c << shift) | (c >>> (28 - shift))) & 0xfffffff0) | 0
+      d = (((d << shift) | (d >>> (28 - shift))) & 0xfffffff0) | 0
+
+      const togen = mode === DECRYPT ? 15 - i : i
+
+      schedule[togen] = Array(6).fill(0)
+
+      for (let j = 0; j < 24; j++) {
+        schedule[togen][Math.floor(j / 8)] |= bitnum_intr(c, key_compression[j], 7 - (j % 8))
+      }
+
+      for (let j = 24; j < 48; j++) {
+        schedule[togen][Math.floor(j / 8)] |= bitnum_intr(d, key_compression[j] - 27, 7 - (j % 8))
+      }
+    }
+    return schedule
+  }
+
+  /**
+   * TripleDES 密钥设置
+   * @param {Buffer} key - 密钥
+   * @param {number} mode - 模式
+   * @returns {number[][][]} 密钥设置
+   */
+  function tripledes_key_setup(key, mode) {
+    if (mode === ENCRYPT) {
+      return [
+        key_schedule(key.slice(0, 8), ENCRYPT),
+        key_schedule(key.slice(8, 16), DECRYPT),
+        key_schedule(key.slice(16, 24), ENCRYPT)
+      ]
+    }
+    return [
+      key_schedule(key.slice(16, 24), DECRYPT),
+      key_schedule(key.slice(8, 16), ENCRYPT),
+      key_schedule(key.slice(0, 8), DECRYPT)
+    ]
+  }
+
+  /**
+   * TripleDES 加密/解密算法 (完整)
+   * @param {Buffer} data - 输入 Buffer
+   * @param {number[][][]} key - 密钥
+   * @returns {Buffer} 加/解密后的 Buffer
+   */
+  function tripledes_crypt(data, key) {
+    let result = data
+    for (let i = 0; i < 3; i++) {
+      result = crypt(result, key[i])
+    }
+    return result
+  }
+
+  /**
+   * QRC解密主函数
+   * @param {string | Buffer} encrypted_qrc - 加密的QRC内容 (十六进制字符串或Buffer)
+   * @returns {string} 解密后的UTF-8字符串
+   */
+  function qrc_decrypt(encrypted_qrc) {
+    if (!encrypted_qrc) {
+      return ''
+    }
+
+    let input_buffer
+    if (typeof encrypted_qrc === 'string') {
+      input_buffer = Buffer.from(encrypted_qrc, 'hex')
+    } else if (Buffer.isBuffer(encrypted_qrc)) {
+      input_buffer = encrypted_qrc
+    } else {
+      throw new Error('无效的加密数据类型')
+    }
+
+    try {
+      const decrypted_chunks = []
+      const key = Buffer.from('!@#)(*$%123ZXC!@!@#)(NHL')
+      const schedule = tripledes_key_setup(key, DECRYPT)
+
+      for (let i = 0; i < input_buffer.length; i += 8) {
+        const chunk = input_buffer.slice(i, i + 8)
+        if (chunk.length < 8) {
+          // 如果最后一块不足8字节，DES无法处理，但QRC格式应该是8的倍数
+          // 这里可以根据实际情况决定如何处理，例如抛出错误或填充
+          // 根据原始代码行为，这里假设输入总是8字节的倍数
+          console.warn('警告: 数据末尾存在不足8字节的块，可能导致解密不完整。')
+          continue
+        }
+        decrypted_chunks.push(tripledes_crypt(chunk, schedule))
+      }
+
+      const data = Buffer.concat(decrypted_chunks)
+      const decompressed = zlib.unzipSync(data)
+      return decompressed.toString('utf-8')
+    } catch (e) {
+      throw new Error(`解密失败: ${e.message}`)
+    }
+  }
+
+  // 导出主函数
+  return qrc_decrypt
+}

src/main/utils/musicSdk/wy/index.js

@@ -5,9 +5,10 @@ import musicSearch from './musicSearch'
 import songList from './songList'
 import hotSearch from './hotSearch'
 import comment from './comment'
+import tipSearch from './tipSearch'
 
 const wy = {
-  // tipSearch,
+  tipSearch,
   leaderboard,
   musicSearch,
   songList,
@@ -25,4 +26,4 @@ const wy = {
   }
 }
 
-export default wy
+export default wy

src/main/utils/path.ts

@@ -20,8 +20,7 @@ function getAppDirPath(
     | 'logs'
     | 'crashDumps'
 ) {
-  const dirPath: string = electron.app.getPath(name ?? 'userData')
-  return dirPath
+  return electron.app.getPath(name ?? 'userData')
 }
 
 export { getAppDirPath }

src/main/utils/utils.ts

@@ -4,7 +4,6 @@ import { dateFormat } from '../../common/utils/common'
 // 导出通用工具函数
 export * from '../../common/utils/nodejs'
 export * from '../../common/utils/common'
-export * from '../../common/utils/tools'
 
 /**
  * 格式化播放数量

src/preload/index.d.ts

@@ -11,7 +11,6 @@ interface CustomAPI {
   onMusicCtrl: (callback: (event: Event, args: any) => void) => () => void
 
   music: {
-    request: (api: string, args: any) => Promise<any>
     requestSdk: <T extends keyof MainApi>(
       method: T,
       args: {
@@ -68,6 +67,7 @@ interface CustomAPI {
   // 插件管理API
   plugins: {
     selectAndAddPlugin: (type: 'lx' | 'cr') => Promise<any>
+    downloadAndAddPlugin: (url: string, type: 'lx' | 'cr') => Promise<any>
     uninstallPlugin(pluginId: string): ApiResult | PromiseLike<ApiResult>
     addPlugin: (pluginCode: string, pluginName: string) => Promise<any>
     getPluginById: (id: string) => Promise<any>
@@ -79,7 +79,7 @@ interface CustomAPI {
     start: () => undefined
     stop: () => undefined
   }
-  
+
   // 目录设置API
   directorySettings: {
     getDirectories: () => Promise<{
@@ -96,10 +96,7 @@ interface CustomAPI {
       path?: string
       message?: string
     }>
-    saveDirectories: (directories: {
-      cacheDir: string
-      downloadDir: string
-    }) => Promise<{
+    saveDirectories: (directories: { cacheDir: string; downloadDir: string }) => Promise<{
       success: boolean
       message: string
     }>
@@ -120,9 +117,13 @@ interface CustomAPI {
       formatted: string
     }>
   }
-  
+
   // 用户配置API
   getUserConfig: () => Promise<any>
+
+  pluginNotice: {
+    onPluginNotice: (listener: (...args: any[]) => void) => () => void
+  }
 }
 
 declare global {

src/preload/index.ts

@@ -22,19 +22,22 @@ const api = {
   },
   toggleFullscreen: () => ipcRenderer.send('window-toggle-fullscreen'),
   onMusicCtrl: (callback: (event: Electron.IpcRendererEvent, ...args: any[]) => void) => {
+    // 音乐控制
     const handler = (event: Electron.IpcRendererEvent) => callback(event)
     ipcRenderer.on('music-control', handler)
     return () => ipcRenderer.removeListener('music-control', handler)
   },
-
+  // 音乐相关方法
   music: {
-    request: (api: string, args: any) => ipcRenderer.invoke('service-music-request', api, args),
     requestSdk: (api: string, args: any) =>
-      ipcRenderer.invoke('service-music-sdk-request', api, args)
+      ipcRenderer.invoke('service-music-sdk-request', api, args),
   },
+  //音源插件
   plugins: {
     selectAndAddPlugin: (type: 'lx' | 'cr') =>
       ipcRenderer.invoke('service-plugin-selectAndAddPlugin', type),
+    downloadAndAddPlugin: (url: string, type: 'lx' | 'cr') =>
+      ipcRenderer.invoke('service-plugin-downloadAndAddPlugin', url, type),
     addPlugin: (pluginCode: string, pluginName: string) =>
       ipcRenderer.invoke('service-plugin-addPlugin', pluginCode, pluginName),
     getPluginById: (id: string) => ipcRenderer.invoke('service-plugin-getPluginById', id),
@@ -43,7 +46,7 @@ const api = {
       ipcRenderer.invoke('service-plugin-uninstallPlugin', pluginId),
     getPluginLog: (pluginId: string) => ipcRenderer.invoke('service-plugin-getPluginLog', pluginId)
   },
-
+  // ai助手
   ai: {
     ask: (prompt: string) => ipcRenderer.invoke('ai-ask', prompt),
     askStream: (prompt: string, streamId: string) =>
@@ -63,7 +66,7 @@ const api = {
       ipcRenderer.removeAllListeners('ai-stream-error')
     }
   },
-
+  // 音频缓存管理
   musicCache: {
     getInfo: () => ipcRenderer.invoke('music-cache:get-info'),
     clear: () => ipcRenderer.invoke('music-cache:clear'),
@@ -176,6 +179,17 @@ const api = {
       ipcRenderer.invoke('directory-settings:open-directory', dirPath),
     getDirectorySize: (dirPath: string) =>
       ipcRenderer.invoke('directory-settings:get-directory-size', dirPath)
+  },
+
+  // 插件通知相关
+  pluginNotice: {
+    onPluginNotice(callback: (data: string) => any) {
+      function listener(_: any, data: any) {
+        callback(data)
+      }
+      ipcRenderer.on('plugin-notice', listener)
+      return () => ipcRenderer.removeListener('plugin-notice', listener)
+    }
   }
 }
 

src/renderer/auto-imports.d.ts

@@ -6,5 +6,73 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-
+  const DialogPlugin: (typeof import('tdesign-vue-next'))['DialogPlugin']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const isShallow: typeof import('vue')['isShallow']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useDialog: typeof import('naive-ui')['useDialog']
+  const useId: typeof import('vue')['useId']
+  const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
+  const useMessage: typeof import('naive-ui')['useMessage']
+  const useModel: typeof import('vue')['useModel']
+  const useNotification: typeof import('naive-ui')['useNotification']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

src/renderer/components.d.ts

@@ -10,18 +10,26 @@ declare module 'vue' {
   export interface GlobalComponents {
     AIFloatBallSettings: typeof import('./src/components/Settings/AIFloatBallSettings.vue')['default']
     AudioVisualizer: typeof import('./src/components/Play/AudioVisualizer.vue')['default']
+    ContextMenu: typeof import('./src/components/ContextMenu/ContextMenu.vue')['default']
+    Demo: typeof import('./src/components/ContextMenu/demo.vue')['default']
     DirectorySettings: typeof import('./src/components/Settings/DirectorySettings.vue')['default']
     FloatBall: typeof import('./src/components/AI/FloatBall.vue')['default']
     FullPlay: typeof import('./src/components/Play/FullPlay.vue')['default']
     GlobalAudio: typeof import('./src/components/Play/GlobalAudio.vue')['default']
+    HomeLayout: typeof import('./src/components/layout/HomeLayout.vue')['default']
     MusicCache: typeof import('./src/components/Settings/MusicCache.vue')['default']
+    NCard: typeof import('naive-ui')['NCard']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NText: typeof import('naive-ui')['NText']
     PlaylistActions: typeof import('./src/components/Play/PlaylistActions.vue')['default']
     PlaylistDrawer: typeof import('./src/components/Play/PlaylistDrawer.vue')['default']
     PlaylistSettings: typeof import('./src/components/Settings/PlaylistSettings.vue')['default']
     PlayMusic: typeof import('./src/components/Play/PlayMusic.vue')['default']
+    PluginNoticeDialog: typeof import('./src/components/PluginNoticeDialog.vue')['default']
+    Plugins: typeof import('./src/components/Settings/plugins.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    SearchComponent: typeof import('./src/components/Search/SearchComponent.vue')['default']
+    SearchSuggest: typeof import('./src/components/search/searchSuggest.vue')['default']
     ShaderBackground: typeof import('./src/components/Play/ShaderBackground.vue')['default']
     SongVirtualList: typeof import('./src/components/Music/SongVirtualList.vue')['default']
     TAlert: typeof import('tdesign-vue-next')['Alert']
@@ -29,10 +37,13 @@ declare module 'vue' {
     TBadge: typeof import('tdesign-vue-next')['Badge']
     TButton: typeof import('tdesign-vue-next')['Button']
     TCard: typeof import('tdesign-vue-next')['Card']
+    TCheckbox: typeof import('tdesign-vue-next')['Checkbox']
     TContent: typeof import('tdesign-vue-next')['Content']
     TDialog: typeof import('tdesign-vue-next')['Dialog']
     TDivider: typeof import('tdesign-vue-next')['Divider']
+    TDrawer: typeof import('tdesign-vue-next')['Drawer']
     TDropdown: typeof import('tdesign-vue-next')['Dropdown']
+    TEmpty: typeof import('tdesign-vue-next')['Empty']
     TForm: typeof import('tdesign-vue-next')['Form']
     TFormItem: typeof import('tdesign-vue-next')['FormItem']
     ThemeSelector: typeof import('./src/components/ThemeSelector.vue')['default']
@@ -42,10 +53,14 @@ declare module 'vue' {
     TitleBarControls: typeof import('./src/components/TitleBarControls.vue')['default']
     TLayout: typeof import('tdesign-vue-next')['Layout']
     TLoading: typeof import('tdesign-vue-next')['Loading']
+    TOption: typeof import('tdesign-vue-next')['Option']
     TRadioButton: typeof import('tdesign-vue-next')['RadioButton']
     TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
+    TSelect: typeof import('tdesign-vue-next')['Select']
     TSlider: typeof import('tdesign-vue-next')['Slider']
     TSwitch: typeof import('tdesign-vue-next')['Switch']
+    TTabPanel: typeof import('tdesign-vue-next')['TabPanel']
+    TTabs: typeof import('tdesign-vue-next')['Tabs']
     TTag: typeof import('tdesign-vue-next')['Tag']
     TTextarea: typeof import('tdesign-vue-next')['Textarea']
     TTooltip: typeof import('tdesign-vue-next')['Tooltip']

src/renderer/index.html

@@ -3,11 +3,6 @@
   <head lang="zh-CN">
     <meta charset="UTF-8" />
     <title>澜音 Music</title>
-    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <!-- <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' *.gtimg.com; style-src 'self' 'unsafe-inline'; img-src *; connect-src 'self' https://music.163.com https://*.music.163.com *.bikonoo.com/ ; media-src 'self' data: https://* http://*;"
-    /> -->
   </head>
 
   <body>

src/renderer/src/App.vue

@@ -1,9 +1,19 @@
+<!--
+  - Copyright (c) 2025. 时迁酱 Inc. All rights reserved.
+  -
+  - This software is the confidential and proprietary information of 时迁酱.
+  - Unauthorized copying of this file, via any medium is strictly prohibited.
+  -
+  - @author 时迁酱，无聊的霜霜，Star
+  - @since 2025-9-19
+  - @version 1.0
+  -->
+
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import GlobalAudio from './components/Play/GlobalAudio.vue'
-import FloatBall from './components/AI/FloatBall.vue'
+import { onMounted, ref } from 'vue'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
 import { useAutoUpdate } from './composables/useAutoUpdate'
+import { NConfigProvider, darkTheme, NGlobalStyle } from 'naive-ui'
 
 const userInfo = LocalUserDetailStore()
 const { checkForUpdates } = useAutoUpdate()
@@ -16,7 +26,10 @@ import './assets/theme/cyan.css'
 
 onMounted(() => {
   userInfo.init()
+  setupSystemThemeListener()
   loadSavedTheme()
+  syncNaiveTheme()
+  window.addEventListener('theme-changed', () => syncNaiveTheme())
 
   // 应用启动后延迟3秒检查更新，避免影响启动速度
   setTimeout(() => {
@@ -33,43 +46,121 @@ const themes = [
   { name: 'orange', label: '橙色', color: '#fb9458' }
 ]
 
-const loadSavedTheme = () => {
-  const savedTheme = localStorage.getItem('selected-theme')
-  if (savedTheme && themes.some((t) => t.name === savedTheme)) {
-    applyTheme(savedTheme)
+const naiveTheme = ref<any>(null)
+const themeOverrides = ref<any>({})
+
+function syncNaiveTheme() {
+  const docEl = document.documentElement
+  const savedDarkMode = localStorage.getItem('dark-mode')
+  const isDark = savedDarkMode === 'true'
+  naiveTheme.value = isDark ? darkTheme : null
+
+  const computed = getComputedStyle(docEl)
+  const primary = (computed.getPropertyValue('--td-brand-color') || '').trim()
+
+  const savedThemeName = localStorage.getItem('selected-theme') || 'default'
+  const fallback = themes.find((t) => t.name === savedThemeName)?.color || '#2ba55b'
+  const mainColor = primary || fallback
+
+  themeOverrides.value = {
+    common: {
+      primaryColor: mainColor,
+      primaryColorHover: mainColor,
+      primaryColorPressed: mainColor
+    }
   }
 }
 
-const applyTheme = (themeName) => {
+const loadSavedTheme = () => {
+  const savedTheme = localStorage.getItem('selected-theme')
+  const savedDarkMode = localStorage.getItem('dark-mode')
+
+  let themeName = 'default'
+  let isDarkMode = false
+
+  if (savedTheme && themes.some((t) => t.name === savedTheme)) {
+    themeName = savedTheme
+  }
+
+  if (savedDarkMode !== null) {
+    isDarkMode = savedDarkMode === 'true'
+  } else {
+    // 如果没有保存的设置，检测系统偏好
+    isDarkMode = detectSystemTheme()
+  }
+
+  applyTheme(themeName, isDarkMode)
+}
+
+const applyTheme = (themeName, darkMode = false) => {
   const documentElement = document.documentElement
 
-  // 移除之前的主题
+  // 移除之前的主题属性
   documentElement.removeAttribute('theme-mode')
+  documentElement.removeAttribute('data-theme')
 
-  // 应用新主题（如果不是默认主题）
+  // 应用主题色彩
   if (themeName !== 'default') {
     documentElement.setAttribute('theme-mode', themeName)
   }
 
+  // 应用明暗模式
+  if (darkMode) {
+    documentElement.setAttribute('data-theme', 'dark')
+  } else {
+    documentElement.setAttribute('data-theme', 'light')
+  }
+
   // 保存到本地存储
   localStorage.setItem('selected-theme', themeName)
+  localStorage.setItem('dark-mode', darkMode.toString())
+
+  // 同步 Naive UI 主题
+  syncNaiveTheme()
+}
+
+// 检测系统主题偏好
+const detectSystemTheme = () => {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return true
+  }
+  return false
+}
+
+// 监听系统主题变化
+const setupSystemThemeListener = () => {
+  if (window.matchMedia) {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    mediaQuery.addEventListener('change', (e) => {
+      const savedDarkMode = localStorage.getItem('dark-mode')
+      // 如果用户没有手动设置暗色模式，则跟随系统主题
+      if (savedDarkMode === null) {
+        const savedTheme = localStorage.getItem('selected-theme') || 'default'
+        applyTheme(savedTheme, e.matches)
+      }
+    })
+  }
 }
 </script>
 
 <template>
-  <div class="page">
-    <router-view v-slot="{ Component }">
-      <Transition
-        :enter-active-class="`animate__animated animate__fadeIn  pagesApp`"
-        :leave-active-class="`animate__animated animate__fadeOut pagesApp`"
-      >
-        <component :is="Component" />
-      </Transition>
-    </router-view>
-    <GlobalAudio />
-    <FloatBall />
-    <UpdateProgress />
-  </div>
+  <NConfigProvider :theme="naiveTheme" :theme-overrides="themeOverrides">
+    <NGlobalStyle />
+    <div class="page">
+      <router-view v-slot="{ Component }">
+        <Transition
+          :enter-active-class="`animate__animated animate__fadeIn  pagesApp`"
+          :leave-active-class="`animate__animated animate__fadeOut pagesApp`"
+        >
+          <component :is="Component" />
+        </Transition>
+      </router-view>
+      <GlobalAudio />
+      <FloatBall />
+      <PluginNoticeDialog />
+      <UpdateProgress />
+    </div>
+  </NConfigProvider>
 </template>
 <style>
 .pagesApp {

src/renderer/src/assets/base.css

@@ -60,20 +60,23 @@ body {
   }
 
   &::-webkit-scrollbar-track {
-    background: #f1f5f9;
+    background: var(--td-scroll-track-color);
     border-radius: 0.1875rem;
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
+    background: var(--td-scrollbar-color);
     border-radius: 0.1875rem;
     transition: background-color 0.2s ease;
 
     &:hover {
-      background: #94a3b8;
+      background: var(--td-scrollbar-hover-color);
     }
   }
   /* Firefox 滚动条样式 */
   scrollbar-width: thin;
-  scrollbar-color: #cbd5e1 #f1f5f9;
+  scrollbar-color: var(--td-scrollbar-color) var(--td-scroll-track-color);
+}
+.t-dialog__mask {
+  backdrop-filter: blur(5px);
 }

src/renderer/src/assets/main.css

@@ -1,15 +1,19 @@
-:root,
-:root[theme-mode='light'] {
-  --td-brand-color-1: #e2fae2;
-  --td-brand-color-2: #c5f4cb;
-  --td-brand-color-3: #91dca1;
-  --td-brand-color-4: #55c277;
-  --td-brand-color-5: #2ba55b;
-  --td-brand-color-6: #008942;
-  --td-brand-color-7: #006d33;
-  --td-brand-color-8: #005426;
-  --td-brand-color-9: #003c19;
-  --td-brand-color-10: #00260d;
+:root[data-theme='light'],
+:root:not([data-theme]) {
+  --hover-nav-color: #f3f4f6;
+  --hover-nav-text: #6b7280;
+  --hover-nav-text-hover: #111827;
+
+  --td-brand-color-1: #ddfbdd;
+  --td-brand-color-2: #bdf6c3;
+  --td-brand-color-3: #80df94;
+  --td-brand-color-4: #03de6d;
+  --td-brand-color-5: #00a74d;
+  --td-brand-color-6: #00893e;
+  --td-brand-color-7: #006d2f;
+  --td-brand-color-8: #005423;
+  --td-brand-color-9: #003c16;
+  --td-brand-color-10: #00260b;
   --td-brand-color-light: var(--td-brand-color-1);
   --td-brand-color-focus: var(--td-brand-color-2);
   --td-brand-color-disabled: var(--td-brand-color-3);
@@ -64,16 +68,16 @@
   --td-success-color-active: var(--td-success-color-6);
   --td-success-color-disabled: var(--td-success-color-3);
   --td-success-color-light: var(--td-success-color-1);
-  --td-gray-color-1: #f0f4f1;
-  --td-gray-color-2: #e9efeb;
-  --td-gray-color-3: #e1eae4;
-  --td-gray-color-4: #d4dfd8;
-  --td-gray-color-5: #bdc8c1;
-  --td-gray-color-6: #9ca8a1;
-  --td-gray-color-7: #808d86;
-  --td-gray-color-8: #6d7873;
-  --td-gray-color-9: #565f5b;
-  --td-gray-color-10: #454c48;
+  --td-gray-color-1: #f3f3f3;
+  --td-gray-color-2: #eee;
+  --td-gray-color-3: #e7e7e7;
+  --td-gray-color-4: #dcdcdc;
+  --td-gray-color-5: #c5c5c5;
+  --td-gray-color-6: #a6a6a6;
+  --td-gray-color-7: #8b8b8b;
+  --td-gray-color-8: #777;
+  --td-gray-color-9: #5e5e5e;
+  --td-gray-color-10: #4b4b4b;
   --td-gray-color-11: #383838;
   --td-gray-color-12: #2c2c2c;
   --td-gray-color-13: #242424;
@@ -135,19 +139,271 @@
   --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
   --td-mask-active: rgba(0, 0, 0, 0.6);
   --td-mask-disabled: rgba(255, 255, 255, 0.6);
+
+  /* 通用颜色变量 - 亮色主题 */
+  --theme-bg-primary: #ffffff;
+  --theme-bg-secondary: #f8f9fa;
+  --theme-bg-tertiary: #fafafa;
+  --theme-text-primary: #111827;
+  --theme-text-secondary: #6b7280;
+  --theme-text-tertiary: #9ca3af;
+  --theme-text-muted: #9ca3af;
+  --theme-text-disabled: #666666;
+  --theme-border-light: #f3f4f6;
+  --theme-border-medium: #e5e7eb;
+  --theme-border-strong: #f3f3f3;
+  --theme-border: #e5e7eb;
+  --theme-hover-bg: #f9fafb;
+  --theme-overlay: rgba(0, 0, 0, 0.7);
+  --theme-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.06);
+  --theme-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --theme-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
+  --theme-card-bg: #ffffff;
+  --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --theme-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
+  --theme-header-bg: #f9fafb;
+  --theme-badge-bg: #f3f4f6;
+  --theme-tips-bg: linear-gradient(135deg, #f8fafc, #f1f5f9);
+  --theme-warning-bg: #fef3c7;
+  --theme-warning-text: #d97706;
+  --theme-code-bg: rgba(255, 255, 255, 0.6);
+  --theme-code-hover-bg: rgba(255, 255, 255, 0.9);
+  --theme-note-bg: rgba(255, 255, 255, 0.5);
+
+  /* Find 页面专用变量 - 亮色主题 */
+  --find-bg-primary: var(--theme-bg-primary);
+  --find-bg-secondary: var(--theme-bg-secondary);
+  --find-text-primary: var(--theme-text-primary);
+  --find-text-secondary: var(--theme-text-secondary);
+  --find-text-muted: var(--theme-text-muted);
+  --find-card-bg: var(--theme-bg-primary);
+  --find-song-count-bg: rgba(156, 163, 175, 0.1);
+  --find-card-info-bg: rgba(255, 255, 255, 0.95);
+  --find-card-shadow: var(--theme-shadow-light), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --find-card-shadow-hover: var(--theme-shadow-hover);
+  --find-song-bg: var(--theme-bg-primary);
+  --find-song-hover-bg: var(--theme-hover-bg);
+  --find-border-color: var(--theme-border-light);
+  --find-meta-border: rgba(229, 231, 235, 0.5);
+
+  /* HomeLayout 页面专用变量 - 亮色主题 */
+  --home-nav-btn-color: #3d4043;
+  --home-nav-btn-hover: var(--theme-text-primary);
+  --home-source-selector-hover: var(--theme-border-light);
+  --home-source-list-bg: var(--theme-bg-primary);
+  --home-source-list-border: var(--theme-border-medium);
+  --home-source-list-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --home-source-item-hover: var(--theme-border-light);
+  --home-scrollbar-track: #f1f5f9;
+  --home-scrollbar-thumb: #cbd5e1;
+  --home-scrollbar-thumb-hover: #94a3b8;
+  --home-scrollbar-color: #cbd5e1 #f1f5f9;
+
+  /* List 页面专用变量 - 亮色主题 */
+  --list-bg-primary: var(--theme-bg-tertiary);
+  --list-content-bg: var(--theme-bg-primary);
+  --list-header-bg: var(--theme-bg-primary);
+  --list-header-shadow: var(--theme-shadow-medium);
+  --list-content-shadow: var(--theme-shadow-light);
+  --list-title-color: var(--theme-text-primary);
+  --list-author-color: var(--theme-text-secondary);
+  --list-stats-color: var(--theme-text-muted);
+  --list-loading-text: var(--theme-text-disabled);
+  --list-loading-border: var(--theme-border-strong);
+  --list-loading-spinner: var(--td-brand-color);
+  --list-cover-overlay: var(--theme-overlay);
+
+  /* SongVirtualList 组件专用变量 - 亮色主题 */
+  --song-list-header-bg: #fafafa;
+  --song-list-header-border: #e9e9e9;
+  --song-list-header-text: #999999;
+  --song-list-content-bg: var(--theme-bg-primary);
+  --song-list-item-border: #f5f5f5;
+  --song-list-item-hover: #f5f5f5;
+  --song-list-item-current: #f0f7ff;
+  --song-list-item-playing: #e6f7ff;
+  --song-list-track-number: #999999;
+  --song-list-title-color: #333333;
+  --song-list-title-hover: var(--td-brand-color);
+  --song-list-artist-color: #999999;
+  --song-list-album-color: #999999;
+  --song-list-album-hover: var(--td-brand-color);
+  --song-list-duration-color: #999999;
+  --song-list-btn-color: #cccccc;
+  --song-list-btn-hover: var(--td-brand-color);
+  --song-list-btn-bg-hover: var(--td-brand-color-light);
+  --song-list-quality-bg: #fff7e6;
+  --song-list-quality-color: #fa8c16;
+
+  /* Search 页面专用变量 - 亮色主题 */
+  --search-bg: var(--theme-bg-tertiary);
+  --search-title-color: #333333;
+  --search-keyword-color: var(--td-brand-color);
+  --search-info-color: #999999;
+  --search-content-bg: var(--theme-bg-primary);
+  --search-content-shadow: var(--theme-shadow-light);
+  --search-empty-title: #333333;
+  --search-empty-text: #999999;
+  --search-loading-text: #666666;
+  --search-loading-border: #f3f3f3;
+  --search-loading-spinner: var(--td-brand-color);
+
+  /* Recent 页面专用变量 - 亮色主题 */
+  --recent-bg: var(--theme-bg-tertiary);
+  --recent-title-color: #111827;
+  --recent-subtitle-color: #6b7280;
+  --recent-section-title: #111827;
+  --recent-card-bg: var(--theme-bg-primary);
+  --recent-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --recent-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --recent-playlist-title: #111827;
+  --recent-playlist-desc: #6b7280;
+  --recent-playlist-meta: #9ca3af;
+  --recent-song-item-border: #f3f4f6;
+  --recent-song-item-hover: #f9fafb;
+  --recent-song-index: #6b7280;
+  --recent-song-title: #111827;
+  --recent-song-artist: #6b7280;
+  --recent-song-stats: #6b7280;
+  --recent-song-duration: #6b7280;
+  --recent-empty-icon: #d1d5db;
+  --recent-empty-title: #111827;
+  --recent-empty-text: #6b7280;
+
+  /* Local 页面专用变量 - 亮色主题 */
+  --local-bg: var(--theme-bg-tertiary);
+  --local-text-primary: var(--theme-text-primary);
+  --local-text-secondary: var(--theme-text-secondary);
+  --local-text-tertiary: var(--theme-text-tertiary);
+  --local-card-bg: var(--theme-card-bg);
+  --local-card-shadow: var(--theme-card-shadow);
+  --local-card-shadow-hover: var(--theme-card-shadow-hover);
+  --local-border: var(--theme-border);
+  --local-hover-bg: var(--theme-hover-bg);
+  --local-header-bg: var(--theme-header-bg);
+  --local-badge-bg: var(--theme-badge-bg);
+  --local-tips-bg: var(--theme-tips-bg);
+  --local-warning-bg: var(--theme-warning-bg);
+  --local-warning-text: var(--theme-warning-text);
+  --local-code-bg: var(--theme-code-bg);
+  --local-code-hover-bg: var(--theme-code-hover-bg);
+  --local-note-bg: var(--theme-note-bg);
+
+  /* Welcome 页面专用变量 - 亮色主题 */
+  --welcome-bg: #ffffff;
+  --welcome-subtitle-color: #666666;
+  --welcome-loading-text: #888888;
+  --welcome-progress-bg: #f0f0f0;
+  --welcome-tag-bg: #b8f1ce;
+  --welcome-tag-border: #e9ecef;
+  --welcome-tag-color: #333333;
+  --welcome-version-color: #9e9e9e;
+
+  /* TitleBarControls 组件专用变量 - 亮色主题 */
+  --titlebar-icon-color: #111827;
+  --titlebar-icon-hover: #111827;
+  --titlebar-btn-hover-bg: #f3f4f6;
+  --titlebar-close-hover-bg: #fee2e2;
+  --titlebar-close-hover-color: #dc2626;
+
+  /* Settings 页面专用变量 - 亮色主题 */
+  --settings-main-bg: #f8fafc;
+  --settings-header-bg: #ffffff;
+  --settings-sidebar-bg: #ffffff;
+  --settings-sidebar-border: #e2e8f0;
+  --settings-nav-hover-bg: #f1f5f9;
+  --settings-nav-active-bg: var(--td-brand-color-1);
+  --settings-nav-active-border: var(--td-brand-color-5);
+  --settings-nav-icon-color: #64748b;
+  --settings-nav-icon-active: var(--td-brand-color-5);
+  --settings-nav-label-color: #334155;
+  --settings-nav-label-active: var(--td-brand-color-6);
+  --settings-nav-desc-color: #64748b;
+  --settings-content-bg: #f8fafc;
+  --settings-group-bg: #ffffff;
+  --settings-group-border: #e2e8f0;
+  --settings-group-shadow: rgba(0, 0, 0, 0.1);
+  --settings-text-primary: #1e293b;
+  --settings-text-secondary: #64748b;
+  --settings-preview-bg: #f8fafc;
+  --settings-preview-border: #e2e8f0;
+  --settings-mock-titlebar-bg: #f6f6f6;
+  --settings-mock-titlebar-border: #d1d5db;
+  --settings-feature-bg: #f8fafc;
+  --settings-feature-border: #e2e8f0;
+  --settings-api-tips-bg: #f8fafc;
+  --settings-api-tips-border: #e2e8f0;
+  --settings-source-card-bg: #ffffff;
+  --settings-source-card-border: #e2e8f0;
+  --settings-source-card-hover-border: var(--td-brand-color-3);
+  --settings-source-card-active-border: var(--td-brand-color-5);
+  --settings-source-card-active-bg: var(--td-brand-color-1);
+  --settings-source-icon-bg: #f1f5f9;
+  --settings-quality-container-bg: #f8fafc;
+  --settings-quality-container-border: #e2e8f0;
+  --settings-status-item-bg: #f8fafc;
+  --settings-status-item-border: #e2e8f0;
+  --settings-plugin-prompt-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  --settings-plugin-prompt-border: #cbd5e1;
+  --settings-tech-item-bg: #f8fafc;
+  --settings-tech-item-border: #e2e8f0;
+  --settings-developer-item-bg: #f8fafc;
+  --settings-developer-item-border: #e2e8f0;
+  --settings-tag-option-bg: #f8fafc;
+  --settings-tag-option-border: #e2e8f0;
+  --settings-tag-status-bg: #f8fafc;
+  --settings-tag-status-border: #e2e8f0;
+
+  /* Plugins 组件专用变量 - 亮色主题 */
+  --plugins-bg: var(--theme-bg-tertiary);
+  --plugins-container-bg: var(--theme-bg-primary);
+  --plugins-header-bg: var(--theme-bg-primary);
+  --plugins-text-primary: var(--theme-text-primary);
+  --plugins-text-secondary: var(--theme-text-secondary);
+  --plugins-text-muted: var(--theme-text-muted);
+  --plugins-border: var(--theme-border);
+  --plugins-card-bg: var(--theme-card-bg);
+  --plugins-card-shadow: var(--theme-card-shadow);
+  --plugins-card-shadow-hover: var(--theme-card-shadow-hover);
+  --plugins-card-selected-bg: #e8f5e8;
+  --plugins-card-selected-border: #28a745;
+  --plugins-loading-spinner: var(--td-brand-color);
+  --plugins-error-color: #dc3545;
+  --plugins-success-color: #28a745;
+  --plugins-console-bg: #1e1e1e;
+  --plugins-console-header-bg: #2d2d2d;
+  --plugins-console-border: #404040;
+  --plugins-console-text: #ffffff;
+  --plugins-console-prompt: var(--td-brand-color);
+  --plugins-console-path: #8a8a8a;
+  --plugins-console-time: #666666;
+  --plugins-console-scrollbar-track: #2d2d2d;
+  --plugins-console-scrollbar-thumb: #555555;
+  --plugins-console-scrollbar-thumb-hover: #666666;
+  --plugins-log-error: #ff6b6b;
+  --plugins-log-warn: #ffd93d;
+  --plugins-log-info: #74b9ff;
+  --plugins-log-debug: #a29bfe;
+  --plugins-mac-close: #ff5f57;
+  --plugins-mac-minimize: #ffbd2e;
+  --plugins-mac-maximize: #28ca42;
 }
 
-:root[theme-mode='dark'] {
-  --td-brand-color-1: #2ba55b20;
-  --td-brand-color-2: #003c19;
-  --td-brand-color-3: #005426;
-  --td-brand-color-4: #006d33;
-  --td-brand-color-5: #008942;
-  --td-brand-color-6: #2ba55b;
-  --td-brand-color-7: #4cd47c;
-  --td-brand-color-8: #91dca1;
-  --td-brand-color-9: #c5f4cb;
-  --td-brand-color-10: #e2fae2;
+:root[data-theme='dark'] {
+  --hover-nav-color: #ffffff18;
+  --hover-nav-text: #a5a5a5;
+  --hover-nav-text-hover: #f3f4f6;
+
+  --td-brand-color-1: #00a74d20;
+  --td-brand-color-2: #003c16;
+  --td-brand-color-3: #005423;
+  --td-brand-color-4: #006d2f;
+  --td-brand-color-5: #00893e;
+  --td-brand-color-6: #00a74d;
+  --td-brand-color-7: #03de6d;
+  --td-brand-color-8: #80df94;
+  --td-brand-color-9: #bdf6c3;
+  --td-brand-color-10: #ddfbdd;
   --td-brand-color-light: var(--td-brand-color-1);
   --td-brand-color-focus: var(--td-brand-color-2);
   --td-brand-color-disabled: var(--td-brand-color-3);
@@ -184,16 +440,16 @@
   --td-success-color-8: #80d2b6;
   --td-success-color-9: #b4e1d3;
   --td-success-color-10: #deede8;
-  --td-gray-color-1: #f0f4f1;
-  --td-gray-color-2: #e9efeb;
-  --td-gray-color-3: #e1eae4;
-  --td-gray-color-4: #d4dfd8;
-  --td-gray-color-5: #bdc8c1;
-  --td-gray-color-6: #9ca8a1;
-  --td-gray-color-7: #808d86;
-  --td-gray-color-8: #6d7873;
-  --td-gray-color-9: #565f5b;
-  --td-gray-color-10: #454c48;
+  --td-gray-color-1: #f3f3f3;
+  --td-gray-color-2: #eee;
+  --td-gray-color-3: #e7e7e7;
+  --td-gray-color-4: #dcdcdc;
+  --td-gray-color-5: #c5c5c5;
+  --td-gray-color-6: #a6a6a6;
+  --td-gray-color-7: #8b8b8b;
+  --td-gray-color-8: #777;
+  --td-gray-color-9: #5e5e5e;
+  --td-gray-color-10: #4b4b4b;
   --td-gray-color-11: #383838;
   --td-gray-color-12: #2c2c2c;
   --td-gray-color-13: #242424;
@@ -246,6 +502,257 @@
   --td-border-level-2-color: var(--td-gray-color-9);
   --td-mask-active: rgba(0, 0, 0, 0.4);
   --td-mask-disabled: rgba(0, 0, 0, 0.6);
+
+  /* 通用颜色变量 - 暗色主题 */
+  --theme-bg-primary: #2d2d2d;
+  --theme-bg-secondary: #1a1a1a;
+  --theme-bg-tertiary: #1a1a1a;
+  --theme-text-primary: #ffffff;
+  --theme-text-secondary: #b3b3b3;
+  --theme-text-tertiary: #8a8a8a;
+  --theme-text-muted: #8a8a8a;
+  --theme-text-disabled: #b3b3b3;
+  --theme-border-light: #404040;
+  --theme-border-medium: #404040;
+  --theme-border-strong: #404040;
+  --theme-border: #404040;
+  --theme-hover-bg: #3a3a3a;
+  --theme-overlay: rgba(0, 0, 0, 0.8);
+  --theme-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
+  --theme-shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --theme-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
+  --theme-card-bg: #2d2d2d;
+  --theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --theme-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
+  --theme-header-bg: #2a2a2a;
+  --theme-badge-bg: #404040;
+  --theme-tips-bg: linear-gradient(135deg, #2a2a2a, #333333);
+  --theme-warning-bg: #4a3a2a;
+  --theme-warning-text: #ffa726;
+  --theme-code-bg: rgba(255, 255, 255, 0.1);
+  --theme-code-hover-bg: rgba(255, 255, 255, 0.15);
+  --theme-note-bg: rgba(255, 255, 255, 0.08);
+
+  /* Find 页面专用变量 - 暗色主题 */
+  --find-bg-primary: var(--theme-bg-secondary);
+  --find-bg-secondary: var(--theme-bg-primary);
+  --find-text-primary: var(--theme-text-primary);
+  --find-text-secondary: var(--theme-text-secondary);
+  --find-text-muted: var(--theme-text-muted);
+  --find-card-bg: var(--theme-bg-primary);
+  --find-song-count-bg: rgba(255, 255, 255, 0.1);
+  --find-card-info-bg: rgba(45, 45, 45, 0.95);
+  --find-card-shadow: var(--theme-shadow-medium), 0 1px 4px rgba(0, 0, 0, 0.2);
+  --find-card-shadow-hover: var(--theme-shadow-hover);
+  --find-song-bg: var(--theme-bg-primary);
+  --find-song-hover-bg: var(--theme-hover-bg);
+  --find-border-color: var(--theme-border-light);
+  --find-meta-border: rgba(64, 64, 64, 0.5);
+
+  /* HomeLayout 页面专用变量 - 暗色主题 */
+  --home-nav-btn-color: var(--theme-text-secondary);
+  --home-nav-btn-hover: var(--theme-text-primary);
+  --home-source-selector-hover: var(--theme-hover-bg);
+  --home-source-list-bg: var(--theme-bg-primary);
+  --home-source-list-border: var(--theme-border-light);
+  --home-source-list-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+  --home-source-item-hover: var(--theme-hover-bg);
+  --home-scrollbar-track: var(--theme-bg-primary);
+  --home-scrollbar-thumb: #4a4a4a;
+  --home-scrollbar-thumb-hover: #5a5a5a;
+  --home-scrollbar-color: #4a4a4a var(--theme-bg-primary);
+
+  /* List 页面专用变量 - 暗色主题 */
+  --list-bg-primary: var(--theme-bg-tertiary);
+  --list-content-bg: var(--theme-bg-primary);
+  --list-header-bg: var(--theme-bg-primary);
+  --list-header-shadow: var(--theme-shadow-medium);
+  --list-content-shadow: var(--theme-shadow-light);
+  --list-title-color: var(--theme-text-primary);
+  --list-author-color: var(--theme-text-secondary);
+  --list-stats-color: var(--theme-text-muted);
+  --list-loading-text: var(--theme-text-disabled);
+  --list-loading-border: var(--theme-border-strong);
+  --list-loading-spinner: var(--td-brand-color);
+  --list-cover-overlay: var(--theme-overlay);
+
+  /* SongVirtualList 组件专用变量 - 暗色主题 */
+  --song-list-header-bg: #2a2a2a;
+  --song-list-header-border: #404040;
+  --song-list-header-text: #8a8a8a;
+  --song-list-content-bg: var(--theme-bg-primary);
+  --song-list-item-border: #3a3a3a;
+  --song-list-item-hover: var(--theme-hover-bg);
+  --song-list-item-current: #1a3a5a;
+  --song-list-item-playing: #1a4a6a;
+  --song-list-track-number: #8a8a8a;
+  --song-list-title-color: var(--theme-text-primary);
+  --song-list-title-hover: var(--td-brand-color);
+  --song-list-artist-color: var(--theme-text-muted);
+  --song-list-album-color: var(--theme-text-muted);
+  --song-list-album-hover: var(--td-brand-color);
+  --song-list-duration-color: var(--theme-text-muted);
+  --song-list-btn-color: #666666;
+  --song-list-btn-hover: var(--td-brand-color);
+  --song-list-btn-bg-hover: var(--td-brand-color-light);
+  --song-list-quality-bg: #3a2a1a;
+  --song-list-quality-color: #fa8c16;
+
+  /* Search 页面专用变量 - 暗色主题 */
+  --search-bg: var(--theme-bg-tertiary);
+  --search-title-color: var(--theme-text-primary);
+  --search-keyword-color: var(--td-brand-color);
+  --search-info-color: var(--theme-text-muted);
+  --search-content-bg: var(--theme-bg-primary);
+  --search-content-shadow: var(--theme-shadow-light);
+  --search-empty-title: var(--theme-text-primary);
+  --search-empty-text: var(--theme-text-muted);
+  --search-loading-text: var(--theme-text-secondary);
+  --search-loading-border: var(--theme-border-light);
+  --search-loading-spinner: var(--td-brand-color);
+
+  /* Recent 页面专用变量 - 暗色主题 */
+  --recent-bg: var(--theme-bg-tertiary);
+  --recent-title-color: var(--theme-text-primary);
+  --recent-subtitle-color: var(--theme-text-secondary);
+  --recent-section-title: var(--theme-text-primary);
+  --recent-card-bg: var(--theme-bg-primary);
+  --recent-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --recent-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --recent-playlist-title: var(--theme-text-primary);
+  --recent-playlist-desc: var(--theme-text-secondary);
+  --recent-playlist-meta: var(--theme-text-muted);
+  --recent-song-item-border: var(--theme-border-light);
+  --recent-song-item-hover: var(--theme-hover-bg);
+  --recent-song-index: var(--theme-text-secondary);
+  --recent-song-title: var(--theme-text-primary);
+  --recent-song-artist: var(--theme-text-secondary);
+  --recent-song-stats: var(--theme-text-secondary);
+  --recent-song-duration: var(--theme-text-secondary);
+  --recent-empty-icon: #666666;
+  --recent-empty-title: var(--theme-text-primary);
+  --recent-empty-text: var(--theme-text-secondary);
+
+  /* Local 页面专用变量 - 暗色主题 */
+  --local-bg: var(--theme-bg-tertiary);
+  --local-text-primary: var(--theme-text-primary);
+  --local-text-secondary: var(--theme-text-secondary);
+  --local-text-tertiary: var(--theme-text-tertiary);
+  --local-card-bg: var(--theme-card-bg);
+  --local-card-shadow: var(--theme-card-shadow);
+  --local-card-shadow-hover: var(--theme-card-shadow-hover);
+  --local-border: var(--theme-border);
+  --local-hover-bg: var(--theme-hover-bg);
+  --local-header-bg: var(--theme-header-bg);
+  --local-badge-bg: var(--theme-badge-bg);
+  --local-tips-bg: var(--theme-tips-bg);
+  --local-warning-bg: var(--theme-warning-bg);
+  --local-warning-text: var(--theme-warning-text);
+  --local-code-bg: var(--theme-code-bg);
+  --local-code-hover-bg: var(--theme-code-hover-bg);
+  --local-note-bg: var(--theme-note-bg);
+
+  /* Welcome 页面专用变量 - 暗色主题 */
+  --welcome-bg: #1a1a1a;
+  --welcome-subtitle-color: #999999;
+  --welcome-loading-text: #aaaaaa;
+  --welcome-progress-bg: #333333;
+  --welcome-tag-bg: #2d2d2d;
+  --welcome-tag-border: #404040;
+  --welcome-tag-color: #cccccc;
+  --welcome-version-color: #666666;
+
+  /* TitleBarControls 组件专用变量 - 暗色主题 */
+  --titlebar-icon-color: #ffffff;
+  --titlebar-icon-hover: #ffffff;
+  --titlebar-btn-hover-bg: #3a3a3a;
+  --titlebar-close-hover-bg: #4a2a2a;
+  --titlebar-close-hover-color: #ff6b6b;
+
+  /* Settings 页面专用变量 - 暗色主题 */
+  --settings-main-bg: #1a1a1a;
+  --settings-header-bg: #2d2d2d;
+  --settings-sidebar-bg: #2d2d2d;
+  --settings-sidebar-border: #404040;
+  --settings-nav-hover-bg: #3a3a3a;
+  --settings-nav-active-bg: var(--td-brand-color-1);
+  --settings-nav-active-border: var(--td-brand-color-5);
+  --settings-nav-icon-color: #8a8a8a;
+  --settings-nav-icon-active: var(--td-brand-color-5);
+  --settings-nav-label-color: #ffffff;
+  --settings-nav-label-active: var(--td-brand-color-6);
+  --settings-nav-desc-color: #8a8a8a;
+  --settings-content-bg: #1a1a1a;
+  --settings-group-bg: #2d2d2d;
+  --settings-group-border: #404040;
+  --settings-group-shadow: rgba(0, 0, 0, 0.3);
+  --settings-text-primary: #ffffff;
+  --settings-text-secondary: #b3b3b3;
+  --settings-text-tertiary: #8a8a8a;
+  --settings-footer-bg: #2d2d2d;
+  --settings-version-bg: #404040;
+  --settings-preview-bg: #2a2a2a;
+  --settings-preview-border: #404040;
+  --settings-mock-titlebar-bg: #333333;
+  --settings-mock-titlebar-border: #555555;
+  --settings-feature-bg: #2a2a2a;
+  --settings-feature-border: #404040;
+  --settings-api-tips-bg: #2a2a2a;
+  --settings-api-tips-border: #404040;
+  --settings-source-card-bg: #2d2d2d;
+  --settings-source-card-border: #404040;
+  --settings-source-card-hover-border: var(--td-brand-color-3);
+  --settings-source-card-active-border: var(--td-brand-color-5);
+  --settings-source-card-active-bg: var(--td-brand-color-1);
+  --settings-source-icon-bg: #3a3a3a;
+  --settings-quality-container-bg: #2a2a2a;
+  --settings-quality-container-border: #404040;
+  --settings-status-item-bg: #2a2a2a;
+  --settings-status-item-border: #404040;
+  --settings-plugin-prompt-bg: linear-gradient(135deg, #2a2a2a 0%, #333333 100%);
+  --settings-plugin-prompt-border: #555555;
+  --settings-tech-item-bg: #2a2a2a;
+  --settings-tech-item-border: #404040;
+  --settings-developer-item-bg: #2a2a2a;
+  --settings-developer-item-border: #404040;
+  --settings-tag-option-bg: #2a2a2a;
+  --settings-tag-option-border: #404040;
+  --settings-tag-status-bg: #2a2a2a;
+  --settings-tag-status-border: #404040;
+
+  /* Plugins 组件专用变量 - 暗色主题 */
+  --plugins-bg: var(--theme-bg-tertiary);
+  --plugins-container-bg: var(--theme-bg-primary);
+  --plugins-header-bg: var(--theme-bg-primary);
+  --plugins-text-primary: var(--theme-text-primary);
+  --plugins-text-secondary: var(--theme-text-secondary);
+  --plugins-text-muted: var(--theme-text-muted);
+  --plugins-border: var(--theme-border);
+  --plugins-card-bg: var(--theme-card-bg);
+  --plugins-card-shadow: var(--theme-card-shadow);
+  --plugins-card-shadow-hover: var(--theme-card-shadow-hover);
+  --plugins-card-selected-bg: #1a3a1a;
+  --plugins-card-selected-border: #28a745;
+  --plugins-loading-spinner: var(--td-brand-color);
+  --plugins-error-color: #ff6b6b;
+  --plugins-success-color: #4ade80;
+  --plugins-console-bg: #0d1117;
+  --plugins-console-header-bg: #161b22;
+  --plugins-console-border: #30363d;
+  --plugins-console-text: #f0f6fc;
+  --plugins-console-prompt: var(--td-brand-color);
+  --plugins-console-path: #7d8590;
+  --plugins-console-time: #6e7681;
+  --plugins-console-scrollbar-track: #161b22;
+  --plugins-console-scrollbar-thumb: #30363d;
+  --plugins-console-scrollbar-thumb-hover: #484f58;
+  --plugins-log-error: #ff7b72;
+  --plugins-log-warn: #f0d852;
+  --plugins-log-info: #79c0ff;
+  --plugins-log-debug: #d2a8ff;
+  --plugins-mac-close: #ff5f57;
+  --plugins-mac-minimize: #ffbd2e;
+  --plugins-mac-maximize: #28ca42;
 }
 
 :root {

src/renderer/src/assets/theme/blue.css

@@ -1,4 +1,5 @@
-:root[theme-mode='blue'] {
+:root[theme-mode='blue'],
+:root[theme-mode='blue'][data-theme='light'] {
   --td-brand-color-1: #ecf4ff;
   --td-brand-color-2: #cde5ff;
   --td-brand-color-3: #9aceff;
@@ -132,11 +133,11 @@
   --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
   --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
   --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
-  --td-mask-active: rgba(0, 0, 0, 0.6);
+  --td-mask-active: rgba(0, 0, 0, 0.1);
   --td-mask-disabled: rgba(255, 255, 255, 0.6);
 }
 
-:root[theme-mode='dark'] {
+:root[theme-mode='blue'][data-theme='dark'] {
   --td-brand-color-1: #3198e220;
   --td-brand-color-2: #003355;
   --td-brand-color-3: #004a77;
@@ -243,7 +244,7 @@
   --td-bg-color-specialcomponent: transparent;
   --td-border-level-1-color: var(--td-gray-color-11);
   --td-border-level-2-color: var(--td-gray-color-9);
-  --td-mask-active: rgba(0, 0, 0, 0.4);
+  --td-mask-active: rgba(0, 0, 0, 0.1);
   --td-mask-disabled: rgba(0, 0, 0, 0.6);
 }
 

src/renderer/src/assets/theme/cyan.css

@@ -1,4 +1,5 @@
-:root[theme-mode='cyan'] {
+:root[theme-mode='cyan'][data-theme='light'],
+:root[theme-mode='cyan']:not([data-theme]) {
   --td-brand-color-1: #e3fcf8;
   --td-brand-color-2: #beefe9;
   --td-brand-color-3: #86dad1;
@@ -132,11 +133,11 @@
   --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
   --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
   --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
-  --td-mask-active: rgba(0, 0, 0, 0.6);
+  --td-mask-active: rgba(0, 0, 0, 0.1);
   --td-mask-disabled: rgba(255, 255, 255, 0.6);
 }
 
-:root[theme-mode='dark'] {
+:root[theme-mode='cyan'][data-theme='dark'] {
   --td-brand-color-1: #00a59b20;
   --td-brand-color-2: #003b36;
   --td-brand-color-3: #00524c;

src/renderer/src/assets/theme/orange.css

@@ -1,4 +1,5 @@
-:root[theme-mode='orange'] {
+:root[theme-mode='orange'][data-theme='light'],
+:root[theme-mode='orange']:not([data-theme]) {
   --td-brand-color-1: #fff1ea;
   --td-brand-color-2: #ffd9c5;
   --td-brand-color-3: #ffb991;
@@ -132,11 +133,11 @@
   --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
   --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
   --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
-  --td-mask-active: rgba(0, 0, 0, 0.6);
+  --td-mask-active: rgba(0, 0, 0, 0.1);
   --td-mask-disabled: rgba(255, 255, 255, 0.6);
 }
 
-:root[theme-mode='dark'] {
+:root[theme-mode='orange'][data-theme='dark'] {
   --td-brand-color-1: #e4722820;
   --td-brand-color-2: #552100;
   --td-brand-color-3: #753000;

src/renderer/src/assets/theme/pink.css

@@ -1,4 +1,5 @@
-:root[theme-mode='pink'] {
+:root[theme-mode='pink'][data-theme='light'],
+:root[theme-mode='pink']:not([data-theme]) {
   --td-brand-color-1: #fff0f1;
   --td-brand-color-2: #ffd8dd;
   --td-brand-color-3: #ffb7c1;
@@ -132,11 +133,11 @@
   --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
   --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
   --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
-  --td-mask-active: rgba(0, 0, 0, 0.6);
+  --td-mask-active: rgba(0, 0, 0, 0.1);
   --td-mask-disabled: rgba(255, 255, 255, 0.6);
 }
 
-:root[theme-mode='dark'] {
+:root[theme-mode='pink'][data-theme='dark'] {
   --td-brand-color-1: #ff547920;
   --td-brand-color-2: #690021;
   --td-brand-color-3: #8d1135;

src/renderer/src/components/ContextMenu/ContextMenu.vue

@@ -0,0 +1,811 @@
+<template>
+  <Teleport v-if="visible" to="body">
+    <!-- 遮罩层 -->
+    <div
+      class="context-menu-backdrop"
+      @click="handleBackdropClick"
+      @contextmenu="handleBackdropContextMenu"
+    ></div>
+
+    <!-- 右键菜单容器 -->
+    <div
+      ref="menuRef"
+      class="context-menu"
+      :class="[className, { 'context-menu--scrolling': isScrolling }]"
+      :style="menuStyle"
+      @mouseleave="handleMouseLeave"
+      @wheel="handleWheel"
+    >
+      <!-- 菜单项列表容器 -->
+      <div
+        ref="scrollContainer"
+        class="context-menu__scroll-container"
+        :style="scrollContainerStyle"
+      >
+        <!-- 菜单项列表 -->
+        <ul class="context-menu__list">
+          <li
+            v-for="item in visibleItems"
+            :key="item.id"
+            class="context-menu__item"
+            :class="[
+              {
+                'context-menu__item--disabled': item.disabled,
+                'context-menu__item--separator': item.separator,
+                'context-menu__item--has-children': item.children && item.children.length > 0
+              },
+              item.className
+            ]"
+            @mouseenter="handleItemMouseEnter(item, $event)"
+            @mouseleave="handleItemMouseLeave(item)"
+            @click="handleItemClick(item, $event)"
+          >
+            <!-- 分隔线 -->
+            <div v-if="item.separator" class="context-menu__separator"></div>
+
+            <!-- 普通菜单项 -->
+            <template v-else>
+              <!-- 图标 -->
+              <div v-if="item.icon" class="context-menu__icon">
+                <component :is="item.icon" size="16" />
+              </div>
+
+              <!-- 标签 -->
+              <span class="context-menu__label">{{ item.label }}</span>
+
+              <!-- 子菜单箭头 -->
+              <div v-if="item.children && item.children.length > 0" class="context-menu__arrow">
+                <chevron-right-icon
+                  :fill-color="'transparent'"
+                  :stroke-color="'#000000'"
+                  :stroke-width="1.5"
+                />
+              </div>
+            </template>
+          </li>
+        </ul>
+      </div>
+
+      <!-- 滚动指示器 -->
+      <div v-if="showScrollIndicator" class="context-menu__scroll-indicator">
+        <div
+          class="context-menu__scroll-indicator-top"
+          :class="{ 'context-menu__scroll-indicator--visible': canScrollUp }"
+        ></div>
+        <div
+          class="context-menu__scroll-indicator-bottom"
+          :class="{ 'context-menu__scroll-indicator--visible': canScrollDown }"
+        ></div>
+      </div>
+
+      <!-- 子菜单 -->
+      <div
+        v-if="activeSubmenu"
+        class="context-menu__submenu-wrapper"
+        :style="submenuWrapperStyle"
+        @mouseenter="handleSubmenuMouseEnter"
+        @mouseleave="handleSubmenuMouseLeave"
+      >
+        <ContextMenu
+          ref="submenuRef"
+          :visible="true"
+          :position="submenuPosition"
+          :items="activeSubmenu.children || []"
+          :width="width"
+          :max-height="Math.min(maxHeight, 300)"
+          :z-index="zIndex + 1"
+          @item-click="handleSubmenuItemClick"
+          @close="closeSubmenu"
+        />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, nextTick, onMounted, onUnmounted, type CSSProperties } from 'vue'
+import type {
+  ContextMenuProps,
+  ContextMenuItem,
+  ContextMenuPosition,
+  EdgeDetectionConfig,
+  AnimationConfig,
+  ScrollConfig
+} from './types'
+import { ChevronRightIcon } from 'tdesign-icons-vue-next'
+
+// 默认配置
+const DEFAULT_EDGE_CONFIG: EdgeDetectionConfig = {
+  threshold: 10,
+  enabled: true
+}
+
+const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
+  duration: 200,
+  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  enabled: true
+}
+
+const DEFAULT_SCROLL_CONFIG: ScrollConfig = {
+  scrollbarWidth: 6,
+  scrollSpeed: 40,
+  showScrollbar: true
+}
+
+// 组件属性
+const props = withDefaults(defineProps<ContextMenuProps>(), {
+  visible: false,
+  position: () => ({ x: 0, y: 0 }),
+  items: () => [],
+  className: '',
+  width: 200,
+  maxHeight: 400,
+  zIndex: 1000
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  close: []
+  'item-click': [item: ContextMenuItem, event: MouseEvent]
+}>()
+
+// 响应式引用
+const menuRef = ref<HTMLElement>()
+const scrollContainer = ref<HTMLElement>()
+const submenuRef = ref<any>()
+
+// 状态管理
+const isScrolling = ref(false)
+const scrollTop = ref(0)
+const scrollHeight = ref(0)
+const clientHeight = ref(0)
+const activeSubmenu = ref<ContextMenuItem | null>(null)
+const submenuPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
+const submenuTimer = ref<NodeJS.Timeout>()
+const submenuMaxHeight = ref(300)
+
+// 计算属性
+const menuStyle = computed((): CSSProperties => {
+  const style: CSSProperties = {
+    '--menu-width': `${props.width}px`,
+    '--menu-max-height': `${props.maxHeight}px`,
+    '--menu-z-index': props.zIndex,
+    '--animation-duration': `${DEFAULT_ANIMATION_CONFIG.duration}ms`,
+    '--animation-easing': DEFAULT_ANIMATION_CONFIG.easing
+  }
+
+  if (!menuRef.value) {
+    return {
+      ...style,
+      left: `${props.position.x}px`,
+      top: `${props.position.y}px`
+    }
+  }
+
+  const adjustedPosition = adjustMenuPosition(props.position)
+  return {
+    ...style,
+    left: `${adjustedPosition.x}px`,
+    top: `${adjustedPosition.y}px`
+  }
+})
+
+const scrollContainerStyle = computed((): CSSProperties => {
+  return {
+    maxHeight: `${props.maxHeight}px`,
+    transform: `translateY(-${scrollTop.value}px)`
+  }
+})
+
+const visibleItems = computed(() => {
+  return props.items.filter((item) => {
+    // 显示所有非分隔线项目
+    if (!item.separator) return true
+    // 显示所有分隔线项目（无论是否有label）
+    return true
+  })
+})
+
+const showScrollIndicator = computed(() => {
+  return DEFAULT_SCROLL_CONFIG.showScrollbar && scrollHeight.value > clientHeight.value
+})
+
+const canScrollUp = computed(() => scrollTop.value > 0)
+const canScrollDown = computed(() => scrollTop.value < scrollHeight.value - clientHeight.value)
+
+const submenuWrapperStyle = computed((): CSSProperties => {
+  return {
+    position: 'fixed',
+    zIndex: props.zIndex + 1,
+    maxHeight: `${submenuMaxHeight.value}px`
+  }
+})
+
+// 监听器
+watch(
+  () => props.visible,
+  (newVisible) => {
+    if (newVisible) {
+      nextTick(() => {
+        initializeScroll()
+        updateSubmenuPosition()
+      })
+    } else {
+      closeSubmenu()
+      resetScroll()
+    }
+  }
+)
+
+watch(
+  () => props.items,
+  () => {
+    if (props.visible) {
+      nextTick(initializeScroll)
+    }
+  }
+)
+
+// 生命周期
+onMounted(() => {
+  document.addEventListener('keydown', handleKeyDown)
+  window.addEventListener('resize', handleWindowResize)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeyDown)
+  window.removeEventListener('resize', handleWindowResize)
+  clearTimeout(submenuTimer.value)
+})
+
+// 方法定义
+const adjustMenuPosition = (position: ContextMenuPosition): ContextMenuPosition => {
+  if (!DEFAULT_EDGE_CONFIG.enabled || !menuRef.value) {
+    return position
+  }
+
+  const menuRect = menuRef.value.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+  const threshold = DEFAULT_EDGE_CONFIG.threshold
+
+  let adjustedX = position.x
+  let adjustedY = position.y
+
+  // 水平边缘检测
+  if (position.x + menuRect.width > viewportWidth - threshold) {
+    adjustedX = viewportWidth - menuRect.width - threshold
+  } else if (position.x < threshold) {
+    adjustedX = threshold
+  }
+
+  // 垂直边缘检测
+  if (position.y + menuRect.height > viewportHeight - threshold) {
+    adjustedY = viewportHeight - menuRect.height - threshold
+  } else if (position.y < threshold) {
+    adjustedY = threshold
+  }
+
+  return { x: adjustedX, y: adjustedY }
+}
+
+const initializeScroll = () => {
+  if (!scrollContainer.value) return
+
+  const container = scrollContainer.value
+  scrollHeight.value = container.scrollHeight
+  clientHeight.value = container.clientHeight
+  scrollTop.value = 0
+}
+
+const resetScroll = () => {
+  scrollTop.value = 0
+  scrollHeight.value = 0
+  clientHeight.value = 0
+}
+
+const scrollTo = (targetScrollTop: number) => {
+  const maxScrollTop = scrollHeight.value - clientHeight.value
+  scrollTop.value = Math.max(0, Math.min(targetScrollTop, maxScrollTop))
+}
+
+const scrollBy = (delta: number) => {
+  scrollTo(scrollTop.value + delta)
+}
+
+const handleWheel = (event: WheelEvent) => {
+  if (!showScrollIndicator.value) return
+
+  event.preventDefault()
+  event.stopPropagation()
+
+  const delta =
+    event.deltaY > 0 ? DEFAULT_SCROLL_CONFIG.scrollSpeed : -DEFAULT_SCROLL_CONFIG.scrollSpeed
+  scrollBy(delta)
+  isScrolling.value = true
+
+  clearTimeout(submenuTimer.value)
+  submenuTimer.value = setTimeout(() => {
+    isScrolling.value = false
+  }, 150)
+}
+
+const handleItemMouseEnter = (item: ContextMenuItem, event: MouseEvent) => {
+  if (item.disabled || item.separator) return
+
+  // 清除之前的子菜单定时器
+  clearTimeout(submenuTimer.value)
+
+  if (item.children && item.children.length > 0) {
+    submenuTimer.value = setTimeout(() => {
+      openSubmenu(item, event)
+    }, 200)
+  } else {
+    closeSubmenu()
+  }
+}
+
+const handleItemMouseLeave = (item: ContextMenuItem) => {
+  if (item.children && item.children.length > 0) {
+    clearTimeout(submenuTimer.value)
+  }
+}
+
+const handleItemClick = (item: ContextMenuItem, event: MouseEvent) => {
+  if (item.disabled || item.separator) return
+
+  // 调用菜单项的点击回调
+  if (item.onClick) {
+    item.onClick(item, event)
+  }
+
+  // 发射组件事件
+  emit('item-click', item, event)
+
+  // 如果没有子菜单，关闭菜单
+  if (!item.children || item.children.length === 0) {
+    closeMenu()
+  }
+}
+
+const handleSubmenuItemClick = (item: ContextMenuItem, event: MouseEvent) => {
+  emit('item-click', item, event)
+  closeMenu()
+}
+
+const openSubmenu = (item: ContextMenuItem, _event: MouseEvent) => {
+  if (!menuRef.value) return
+
+  // 如果是相同的子菜单，不需要重新计算位置
+  if (activeSubmenu.value && activeSubmenu.value.id === item.id) {
+    return
+  }
+
+  // 移除未使用的变量声明
+  activeSubmenu.value = item
+
+  nextTick(() => {
+    updateSubmenuPosition()
+  })
+}
+
+const closeSubmenu = () => {
+  activeSubmenu.value = null
+  clearTimeout(submenuTimer.value)
+}
+const updateSubmenuPosition = () => {
+  if (!menuRef.value || !activeSubmenu.value) return
+
+  const menuRect = menuRef.value.getBoundingClientRect()
+  // 初始位置：显示在右侧
+  const x = menuRect.right
+  const y = menuRect.top
+
+  // 先设置初始位置，让子菜单渲染
+  submenuPosition.value = { x, y }
+
+  // 等待子菜单渲染完成后调整位置
+  setTimeout(() => {
+    // 子菜单通过 Teleport 渲染到 body 中，需要在 body 中查找
+    // 查找所有的 context-menu 元素，找到 z-index 最高的（即子菜单）
+    const allMenus = document.querySelectorAll('.context-menu')
+    console.log('All menus found:', allMenus.length)
+
+    let submenuEl: Element | null = null
+    let maxZIndex = props.zIndex
+
+    allMenus.forEach((menu) => {
+      const style = window.getComputedStyle(menu)
+      const zIndex = parseInt(style.zIndex) || 0
+      console.log('Menu z-index:', zIndex, 'Current max:', maxZIndex)
+
+      if (zIndex > maxZIndex) {
+        maxZIndex = zIndex
+        submenuEl = menu as Element
+      }
+    })
+
+    console.log('Found submenu:', submenuEl)
+
+    if (submenuEl) {
+      const submenuRect = (submenuEl as HTMLElement).getBoundingClientRect()
+      console.log('submenuRect:', submenuRect)
+
+      if (submenuRect.width > 0) {
+        // 计算包含滚动条的实际宽度
+        const scrollContainer = (submenuEl as HTMLElement).querySelector(
+          '.context-menu__scroll-container'
+        ) as HTMLElement | null
+        let actualWidth = submenuRect.width
+
+        if (scrollContainer) {
+          // 检查是否有滚动条
+          const hasScrollbar = scrollContainer.scrollHeight > scrollContainer.clientHeight
+          if (hasScrollbar) {
+            // 添加滚动条宽度（通常是6-17px，这里使用默认的6px）
+            const scrollbarWidth = scrollContainer.offsetWidth - scrollContainer.clientWidth
+            actualWidth += scrollbarWidth
+            console.log('Added scrollbar width:', scrollbarWidth, 'Total width:', actualWidth)
+          }
+        }
+
+        adjustSubmenuPosition(actualWidth)
+      } else {
+        // 如果宽度为0，再等一下
+        setTimeout(() => {
+          const retryRect = (submenuEl as HTMLElement).getBoundingClientRect()
+          console.log('retryRect:', retryRect)
+          if (retryRect.width > 0) {
+            // 重试时也要考虑滚动条
+            const scrollContainer = (submenuEl as HTMLElement).querySelector(
+              '.context-menu__scroll-container'
+            ) as HTMLElement | null
+            let actualWidth = retryRect.width
+
+            if (scrollContainer) {
+              const hasScrollbar = scrollContainer.scrollHeight > scrollContainer.clientHeight
+              if (hasScrollbar) {
+                const scrollbarWidth = scrollContainer.offsetWidth - scrollContainer.clientWidth
+                actualWidth += scrollbarWidth
+              }
+            }
+
+            adjustSubmenuPosition(actualWidth)
+          }
+        }, 50)
+      }
+    }
+  }, 0)
+}
+
+// 提取位置调整逻辑为独立函数
+const adjustSubmenuPosition = (submenuWidth: number) => {
+  if (!menuRef.value || !activeSubmenu.value) return
+
+  const menuRect = menuRef.value.getBoundingClientRect()
+  const viewportWidth = window.innerWidth
+  const threshold = 10
+
+  // 重新计算位置
+  let adjustedX = menuRect.right
+  const y = menuRect.top
+
+  // 检查右侧是否有足够空间显示子菜单
+  if (adjustedX + submenuWidth > viewportWidth - threshold) {
+    // 如果右侧空间不足，显示在左侧：父元素的left - 子菜单宽度
+    adjustedX = menuRect.left - submenuWidth
+  }
+
+  // 确保子菜单不会超出左边界
+  if (adjustedX < threshold) {
+    adjustedX = threshold
+  }
+
+  console.log('Final position:', { x: adjustedX, y })
+  // 更新最终位置
+  submenuPosition.value = { x: adjustedX, y }
+}
+
+const handleBackdropClick = () => {
+  closeMenu()
+}
+
+const handleBackdropContextMenu = (event: MouseEvent) => {
+  event.preventDefault()
+  closeMenu()
+}
+
+const handleMouseLeave = () => {
+  clearTimeout(submenuTimer.value)
+}
+
+const handleSubmenuMouseEnter = () => {
+  // 鼠标进入子菜单区域，清除关闭定时器
+  clearTimeout(submenuTimer.value)
+}
+
+const handleSubmenuMouseLeave = () => {
+  // 鼠标离开子菜单区域，延迟关闭子菜单
+  submenuTimer.value = setTimeout(() => {
+    closeSubmenu()
+  }, 100)
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!props.visible) return
+
+  switch (event.key) {
+    case 'Escape':
+      event.preventDefault()
+      closeMenu()
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      scrollBy(-DEFAULT_SCROLL_CONFIG.scrollSpeed)
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      scrollBy(DEFAULT_SCROLL_CONFIG.scrollSpeed)
+      break
+  }
+}
+
+const handleWindowResize = () => {
+  if (props.visible) {
+    closeMenu()
+  }
+}
+
+const closeMenu = () => {
+  emit('update:visible', false)
+  emit('close')
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  updatePosition: (_position: ContextMenuPosition) => {
+    // 位置更新逻辑
+  },
+  updateItems: (_items: ContextMenuItem[]) => {
+    // 菜单项更新逻辑
+  },
+  hide: closeMenu
+})
+</script>
+
+<style scoped>
+.context-menu-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: calc(var(--menu-z-index) - 1);
+  background: transparent;
+}
+
+.context-menu {
+  position: fixed;
+  min-width: var(--menu-width);
+  max-width: 300px;
+  background: #ffffff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(10px);
+  z-index: var(--menu-z-index);
+  overflow: auto;
+  animation: contextMenuEnter var(--animation-duration) var(--animation-easing);
+}
+
+.context-menu--scrolling {
+  pointer-events: auto;
+}
+
+.context-menu__scroll-container {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  /* scrollbar-color: rgba(255, 255, 255, 0.3) transparent; */
+  transition: transform 0.15s ease;
+}
+.context-menu__scroll-container::-webkit-scrollbar {
+  width: 6px;
+}
+/* 
+
+.context-menu__scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.context-menu__scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.context-menu__scroll-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+} */
+
+.context-menu__list {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  min-width: 100%;
+}
+
+.context-menu__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  margin: 0 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s ease;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.context-menu__item:hover:not(.context-menu__item--disabled):not(.context-menu__item--separator) {
+  background: #f5f5f5;
+}
+
+.context-menu__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.context-menu__item--separator {
+  padding: 0;
+  margin: 4px 0;
+  cursor: default;
+  height: auto;
+  min-height: auto;
+}
+
+.context-menu__item--has-children {
+  padding-right: 24px;
+}
+
+.context-menu__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  color: #666;
+  flex-shrink: 0;
+}
+
+.context-menu__label {
+  flex: 1;
+  font-size: 13px;
+  color: #333;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.context-menu__arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  color: #999;
+}
+
+.context-menu__arrow-icon {
+  font-size: 10px;
+  font-style: normal;
+}
+
+.context-menu__separator {
+  height: 1px;
+  width: 100%;
+  background: #e0e0e0;
+  margin: 0 8px;
+  opacity: 0.8;
+}
+
+.context-menu__scroll-indicator {
+  position: absolute;
+  right: 2px;
+  top: 4px;
+  bottom: 4px;
+  width: var(--scrollbar-width, 6px);
+  pointer-events: none;
+}
+
+.context-menu__scroll-indicator-top,
+.context-menu__scroll-indicator-bottom {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 20px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent);
+}
+
+.context-menu__scroll-indicator-top {
+  top: 0;
+  transform: rotate(180deg);
+}
+
+.context-menu__scroll-indicator-bottom {
+  bottom: 0;
+}
+
+.context-menu__scroll-indicator--visible {
+  opacity: 1;
+}
+
+/* 动画 */
+@keyframes contextMenuEnter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .context-menu {
+    min-width: 180px;
+    max-width: 280px;
+    border-radius: 6px;
+  }
+
+  .context-menu__item {
+    padding: 10px 12px;
+    min-height: 36px;
+  }
+
+  .context-menu__label {
+    font-size: 14px;
+  }
+}
+
+/* 暗色主题支持 */
+@media (prefers-color-scheme: dark) {
+  .context-menu {
+    background: #2d2d2d;
+    border-color: #404040;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .context-menu__item:hover:not(.context-menu__item--disabled):not(.context-menu__item--separator) {
+    background: #404040;
+  }
+
+  .context-menu__icon {
+    color: #ccc;
+  }
+
+  .context-menu__label {
+    color: #e0e0e0;
+  }
+
+  .context-menu__separator {
+    background: #555555;
+    opacity: 0.9;
+  }
+
+  .context-menu__scroll-indicator-top,
+  .context-menu__scroll-indicator-bottom {
+    background: linear-gradient(to bottom, rgba(45, 45, 45, 0.9), transparent);
+  }
+}
+</style>

src/renderer/src/components/ContextMenu/README.md

@@ -0,0 +1,244 @@
+# 自定义右键菜单组件
+
+一个功能完整、可扩展的自定义右键菜单组件，专为歌曲列表等场景设计。
+
+## 特性
+
+- ✅ **精确的边缘点击判定** - 智能计算位置，确保菜单始终在可视区域内
+- ✅ **滚动支持** - 支持菜单项过多时的滚动选择
+- ✅ **可扩展性** - 易于添加新的菜单项和功能
+- ✅ **平滑动画** - 流畅的显示/隐藏动画效果
+- ✅ **自适应显示** - 在不同屏幕尺寸下自动适配
+- ✅ **完整TypeScript支持** - 提供完整的类型定义
+
+## 安装和使用
+
+### 基本使用
+
+```vue
+<template>
+  <div @contextmenu.prevent="handleContextMenu">
+    <!-- 你的内容 -->
+  </div>
+
+  <ContextMenu
+    v-model:visible="menuVisible"
+    :items="menuItems"
+    :position="menuPosition"
+    @item-click="handleMenuItemClick"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContextMenu from './ContextMenu/ContextMenu.vue'
+import { createMenuItem, createSeparator } from './ContextMenu/utils'
+import type { ContextMenuItem } from './ContextMenu/types'
+
+const menuVisible = ref(false)
+const menuPosition = ref({ x: 0, y: 0 })
+const menuItems = ref<ContextMenuItem[]>([
+  createMenuItem('play', '播放', {
+    onClick: (item, event) => console.log('播放点击')
+  }),
+  createSeparator(),
+  createMenuItem('download', '下载')
+])
+</script>
+```
+
+### 在歌曲列表中使用
+
+```vue
+<template>
+  <div class="song-list">
+    <div
+      v-for="song in songs"
+      :key="song.id"
+      class="song-item"
+      @contextmenu.prevent="handleSongContextMenu(song, $event)"
+    >
+      {{ song.name }}
+    </div>
+  </div>
+
+  <ContextMenu
+    v-model:visible="contextMenuVisible"
+    :items="contextMenuItems"
+    :position="contextMenuPosition"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ContextMenu from './ContextMenu/ContextMenu.vue'
+import { createMenuItem, createSeparator } from './ContextMenu/utils'
+
+const contextMenuVisible = ref(false)
+const contextMenuPosition = ref({ x: 0, y: 0 })
+const currentSong = ref(null)
+
+const contextMenuItems = computed(() => [
+  createMenuItem('play', '播放', {
+    onClick: () => playSong(currentSong.value)
+  }),
+  createMenuItem('addToPlaylist', '添加到播放列表'),
+  createSeparator(),
+  createMenuItem('download', '下载')
+])
+
+const handleSongContextMenu = (song, event) => {
+  currentSong.value = song
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY }
+  contextMenuVisible.value = true
+}
+</script>
+```
+
+## API 文档
+
+### ContextMenu 组件属性
+
+| 属性      | 类型                | 默认值    | 说明              |
+| --------- | ------------------- | --------- | ----------------- |
+| visible   | boolean             | false     | 控制菜单显示/隐藏 |
+| items     | ContextMenuItem[]   | []        | 菜单项配置数组    |
+| position  | ContextMenuPosition | {x:0,y:0} | 菜单位置坐标      |
+| maxHeight | number              | 400       | 菜单最大高度      |
+| zIndex    | number              | 1000      | 菜单层级          |
+
+### ContextMenuItem 类型
+
+```typescript
+interface ContextMenuItem {
+  id: string
+  label: string
+  icon?: any
+  disabled?: boolean
+  separator?: boolean
+  children?: ContextMenuItem[]
+  onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+  className?: string
+}
+```
+
+### 工具函数
+
+#### createMenuItem
+
+创建标准菜单项
+
+```typescript
+createMenuItem(id: string, label: string, options?: {
+  icon?: any
+  disabled?: boolean
+  separator?: boolean
+  children?: ContextMenuItem[]
+  onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+  className?: string
+}): ContextMenuItem
+```
+
+#### createSeparator
+
+创建分隔线
+
+```typescript
+createSeparator(): ContextMenuItem
+```
+
+#### calculateMenuPosition
+
+智能计算菜单位置
+
+```typescript
+calculateMenuPosition(
+  event: MouseEvent,
+  menuWidth?: number,
+  menuHeight?: number
+): ContextMenuPosition
+```
+
+## 高级用法
+
+### 子菜单支持
+
+```typescript
+const menuItems = [
+  createMenuItem('playlist', '添加到歌单', {
+    children: [
+      createMenuItem('playlist1', '我的最爱'),
+      createMenuItem('playlist2', '开车音乐'),
+      createSeparator(),
+      createMenuItem('newPlaylist', '新建歌单')
+    ]
+  })
+]
+```
+
+### 动态菜单项
+
+```typescript
+const dynamicMenuItems = computed(() => {
+  const items = [createMenuItem('play', '播放')]
+
+  if (user.value.isPremium) {
+    items.push(createMenuItem('download', '下载高音质'))
+  }
+
+  return items
+})
+```
+
+### 自定义样式
+
+```typescript
+const menuItems = [
+  createMenuItem('danger', '删除歌曲', {
+    className: 'danger-item'
+  })
+]
+```
+
+```css
+.danger-item {
+  color: #ff4d4f;
+}
+
+.danger-item:hover {
+  background-color: #fff2f0;
+}
+```
+
+## 最佳实践
+
+1. **使用防抖处理频繁的右键事件**
+2. **合理设置菜单最大高度，避免过长滚动**
+3. **为重要操作添加确认对话框**
+4. **根据用户权限动态显示菜单项**
+5. **在移动端考虑触摸替代方案**
+
+## 浏览器兼容性
+
+- Chrome 60+
+- Firefox 55+
+- Safari 12+
+- Edge 79+
+
+## 故障排除
+
+### 菜单位置不正确
+
+确保使用 `calculateMenuPosition` 函数计算位置。
+
+### 菜单项点击无效
+
+检查 `onClick` 回调函数是否正确绑定。
+
+### 样式冲突
+
+使用 `className` 属性添加自定义样式类。
+
+## 贡献指南
+
+欢迎提交 Issue 和 Pull Request 来改进这个组件。

src/renderer/src/components/ContextMenu/composables.ts

@@ -0,0 +1,397 @@
+import { ref, computed, type Ref } from 'vue'
+import type { ContextMenuItem, ContextMenuPosition } from './types'
+import { createMenuItem, createSeparator } from './utils'
+
+/**
+ * 右键菜单组合式函数
+ */
+export function useContextMenu() {
+  const visible = ref(false)
+  const position = ref<ContextMenuPosition>({ x: 0, y: 0 })
+  const items = ref<ContextMenuItem[]>([])
+  const currentData = ref<any>(null)
+
+  /**
+   * 显示菜单
+   */
+  const show = (event: MouseEvent, menuItems: ContextMenuItem[], data?: any) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    position.value = {
+      x: event.clientX,
+      y: event.clientY
+    }
+
+    items.value = menuItems
+    currentData.value = data
+    visible.value = true
+  }
+
+  /**
+   * 隐藏菜单
+   */
+  const hide = () => {
+    visible.value = false
+    currentData.value = null
+  }
+
+  /**
+   * 更新菜单位置
+   */
+  const updatePosition = (newPosition: ContextMenuPosition) => {
+    position.value = newPosition
+  }
+
+  /**
+   * 更新菜单项
+   */
+  const updateItems = (newItems: ContextMenuItem[]) => {
+    items.value = newItems
+  }
+
+  /**
+   * 处理菜单项点击
+   */
+  const handleItemClick = (item: ContextMenuItem, event: MouseEvent) => {
+    if (item.onClick) {
+      item.onClick(item, event)
+    }
+    hide()
+  }
+
+  return {
+    // 状态
+    visible: computed(() => visible.value),
+    position: computed(() => position.value),
+    items: computed(() => items.value),
+    currentData: computed(() => currentData.value),
+
+    // 方法
+    show,
+    hide,
+    updatePosition,
+    updateItems,
+    handleItemClick
+  }
+}
+
+/**
+ * 歌曲相关的右键菜单配置
+ */
+export function useSongContextMenu() {
+  const { show, hide, ...rest } = useContextMenu()
+
+  /**
+   * 显示歌曲右键菜单
+   */
+  const showSongMenu = (
+    event: MouseEvent,
+    song: any,
+    options?: {
+      showPlay?: boolean
+      showAddToPlaylist?: boolean
+      showDownload?: boolean
+      showAddToSongList?: boolean
+      playlists?: any[]
+      onPlay?: (song: any) => void
+      onAddToPlaylist?: (song: any) => void
+      onDownload?: (song: any) => void
+      onAddToSongList?: (song: any, playlist: any) => void
+    }
+  ) => {
+    const {
+      showPlay = true,
+      showAddToPlaylist = true,
+      showDownload = true,
+      showAddToSongList = true,
+      playlists = [],
+      onPlay,
+      onAddToPlaylist,
+      onDownload,
+      onAddToSongList
+    } = options || {}
+
+    const menuItems: ContextMenuItem[] = []
+
+    // 播放
+    if (showPlay) {
+      menuItems.push(
+        createMenuItem('play', '播放', {
+          onClick: () => onPlay?.(song)
+        })
+      )
+    }
+
+    // 添加到播放列表
+    if (showAddToPlaylist) {
+      menuItems.push(
+        createMenuItem('addToPlaylist', '添加到播放列表', {
+          onClick: () => onAddToPlaylist?.(song)
+        })
+      )
+    }
+
+    // 添加到歌单（如果有歌单）
+    if (showAddToSongList && playlists.length > 0) {
+      menuItems.push(
+        createMenuItem('addToSongList', '加入歌单', {
+          children: playlists.map((playlist) =>
+            createMenuItem(`playlist_${playlist.id}`, playlist.name, {
+              onClick: () => onAddToSongList?.(song, playlist)
+            })
+          )
+        })
+      )
+    }
+
+    // 分隔线
+    if (menuItems.length > 0) {
+      menuItems.push(createSeparator())
+    }
+
+    // 下载
+    if (showDownload) {
+      menuItems.push(
+        createMenuItem('download', '下载', {
+          onClick: () => onDownload?.(song)
+        })
+      )
+    }
+
+    show(event, menuItems, song)
+  }
+
+  return {
+    ...rest,
+    showSongMenu,
+    hide
+  }
+}
+
+/**
+ * 列表项右键菜单配置
+ */
+export function useListItemContextMenu() {
+  const { show, hide, ...rest } = useContextMenu()
+
+  /**
+   * 显示列表项右键菜单
+   */
+  const showListItemMenu = (
+    event: MouseEvent,
+    item: any,
+    options?: {
+      showEdit?: boolean
+      showDelete?: boolean
+      showCopy?: boolean
+      showProperties?: boolean
+      onEdit?: (item: any) => void
+      onDelete?: (item: any) => void
+      onCopy?: (item: any) => void
+      onProperties?: (item: any) => void
+    }
+  ) => {
+    const {
+      showEdit = true,
+      showDelete = true,
+      showCopy = false,
+      showProperties = false,
+      onEdit,
+      onDelete,
+      onCopy,
+      onProperties
+    } = options || {}
+
+    const menuItems: ContextMenuItem[] = []
+
+    // 编辑
+    if (showEdit) {
+      menuItems.push(
+        createMenuItem('edit', '编辑', {
+          onClick: () => onEdit?.(item)
+        })
+      )
+    }
+
+    // 复制
+    if (showCopy) {
+      menuItems.push(
+        createMenuItem('copy', '复制', {
+          onClick: () => onCopy?.(item)
+        })
+      )
+    }
+
+    // 分隔线
+    if (menuItems.length > 0 && (showDelete || showProperties)) {
+      menuItems.push(createSeparator())
+    }
+
+    // 删除
+    if (showDelete) {
+      menuItems.push(
+        createMenuItem('delete', '删除', {
+          onClick: () => onDelete?.(item)
+        })
+      )
+    }
+
+    // 属性
+    if (showProperties) {
+      menuItems.push(
+        createMenuItem('properties', '属性', {
+          onClick: () => onProperties?.(item)
+        })
+      )
+    }
+
+    show(event, menuItems, item)
+  }
+
+  return {
+    ...rest,
+    showListItemMenu,
+    hide
+  }
+}
+
+/**
+ * 文本选择右键菜单配置
+ */
+export function useTextSelectionContextMenu() {
+  const { show, hide, ...rest } = useContextMenu()
+
+  /**
+   * 显示文本选择右键菜单
+   */
+  const showTextSelectionMenu = (
+    event: MouseEvent,
+    selectedText: string,
+    options?: {
+      showCopy?: boolean
+      showSearch?: boolean
+      showTranslate?: boolean
+      onCopy?: (text: string) => void
+      onSearch?: (text: string) => void
+      onTranslate?: (text: string) => void
+    }
+  ) => {
+    const {
+      showCopy = true,
+      showSearch = true,
+      showTranslate = false,
+      onCopy,
+      onSearch,
+      onTranslate
+    } = options || {}
+
+    const menuItems: ContextMenuItem[] = []
+
+    // 复制
+    if (showCopy) {
+      menuItems.push(
+        createMenuItem('copy', '复制', {
+          onClick: () => onCopy?.(selectedText)
+        })
+      )
+    }
+
+    // 搜索
+    if (showSearch) {
+      menuItems.push(
+        createMenuItem('search', '搜索', {
+          onClick: () => onSearch?.(selectedText)
+        })
+      )
+    }
+
+    // 翻译
+    if (showTranslate) {
+      menuItems.push(
+        createMenuItem('translate', '翻译', {
+          onClick: () => onTranslate?.(selectedText)
+        })
+      )
+    }
+
+    show(event, menuItems, selectedText)
+  }
+
+  return {
+    ...rest,
+    showTextSelectionMenu,
+    hide
+  }
+}
+
+/**
+ * 创建可复用的菜单配置
+ */
+export function createMenuConfig<T = any>(config: {
+  items: ContextMenuItem[]
+  onItemClick?: (item: ContextMenuItem, data: T, event: MouseEvent) => void
+  onShow?: (data: T) => void
+  onHide?: () => void
+}) {
+  const { items, onItemClick, onShow, onHide } = config
+
+  return {
+    items: ref([...items]),
+
+    show: (_event: MouseEvent, data: T) => {
+      onShow?.(data)
+    },
+
+    handleItemClick: (item: ContextMenuItem, event: MouseEvent, data: T) => {
+      onItemClick?.(item, data, event)
+    },
+
+    hide: () => {
+      onHide?.()
+    }
+  }
+}
+
+/**
+ * 菜单项可见性控制
+ */
+export function useMenuVisibility<T extends ContextMenuItem>(
+  items: Ref<T[]>,
+  predicate: (item: T) => boolean
+) {
+  const visibleItems = computed(() => items.value.filter(predicate))
+
+  const hasVisibleItems = computed(() => visibleItems.value.length > 0)
+
+  return {
+    visibleItems,
+    hasVisibleItems
+  }
+}
+
+/**
+ * 菜单项动态启用/禁用控制
+ */
+export function useMenuItemsState<T extends ContextMenuItem>(
+  items: Ref<T[]>,
+  getState: (item: T) => { disabled?: boolean; visible?: boolean }
+) {
+  const processedItems = computed(() =>
+    items.value
+      .map((item) => {
+        const state = getState(item)
+        return {
+          ...item,
+          disabled: state.disabled ?? item.disabled,
+          // 如果visible为false，完全移除该项
+          ...(state.visible === false ? { _hidden: true } : {})
+        }
+      })
+      .filter((item) => !(item as any)._hidden)
+  )
+
+  return {
+    processedItems
+  }
+}

src/renderer/src/components/ContextMenu/demo.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="demo-container">
+    <h1>右键菜单组件演示</h1>
+
+    <!-- 测试区域 -->
+    <div class="test-area">
+      <div
+        class="test-box"
+        style="width: 300px; height: 200px; border: 2px dashed #ccc; padding: 20px"
+        @contextmenu.prevent="handleContextMenu($event)"
+      >
+        <p>在此区域右键点击测试菜单</p>
+        <p>菜单项数量：{{ menuItems.length }}</p>
+      </div>
+    </div>
+
+    <!-- 右键菜单 -->
+    <ContextMenu
+      v-model:visible="menuVisible"
+      :position="menuPosition"
+      :items="menuItems"
+      :max-height="200"
+      @item-click="handleMenuItemClick"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContextMenu from './ContextMenu.vue'
+import type { ContextMenuItem } from './types'
+
+const menuVisible = ref(false)
+const menuPosition = ref({ x: 0, y: 0 })
+
+// 创建大量菜单项用于测试滚动
+const menuItems = ref<ContextMenuItem[]>([
+  {
+    id: 'play',
+    label: '播放',
+    icon: '▶'
+  },
+  {
+    id: 'pause',
+    label: '暂停',
+    icon: '⏸'
+  },
+  {
+    id: 'separator-1',
+    separator: true
+  },
+  {
+    id: 'add-to-playlist',
+    label: '添加到播放列表',
+    icon: '➕'
+  },
+  {
+    id: 'remove-from-playlist',
+    label: '从播放列表移除',
+    icon: '➖'
+  },
+  {
+    id: 'separator-2',
+    separator: true
+  },
+  {
+    id: 'download',
+    label: '下载歌曲',
+    icon: '⬇️'
+  },
+  {
+    id: 'share',
+    label: '分享',
+    icon: '↗️'
+  },
+  {
+    id: 'separator-3',
+    separator: true
+  },
+  {
+    id: 'info',
+    label: '歌曲信息',
+    icon: 'ℹ️'
+  },
+  {
+    id: 'edit-tags',
+    label: '编辑标签',
+    icon: '✏️'
+  },
+  {
+    id: 'separator-4',
+    separator: true
+  },
+  {
+    id: 'rate-1',
+    label: '评分：★☆☆☆☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-2',
+    label: '评分：★★☆☆☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-3',
+    label: '评分：★★★☆☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-4',
+    label: '评分：★★★★☆',
+    icon: '⭐'
+  },
+  {
+    id: 'rate-5',
+    label: '评分：★★★★★',
+    icon: '⭐'
+  },
+  {
+    id: 'separator-5',
+    separator: true
+  },
+  {
+    id: 'create-station',
+    label: '创建电台',
+    icon: '📻'
+  },
+  {
+    id: 'similar-songs',
+    label: '相似歌曲',
+    icon: '🎵'
+  },
+  {
+    id: 'separator-6',
+    separator: true
+  },
+  {
+    id: 'copy-link',
+    label: '复制链接',
+    icon: '🔗'
+  },
+  {
+    id: 'properties',
+    label: '属性',
+    icon: '📋'
+  },
+  {
+    id: 'separator-7',
+    separator: true
+  },
+  {
+    id: 'delete',
+    label: '删除',
+    icon: '🗑️',
+    className: 'danger'
+  }
+])
+
+const handleContextMenu = (event: MouseEvent) => {
+  menuPosition.value = {
+    x: event.clientX,
+    y: event.clientY
+  }
+  menuVisible.value = true
+}
+
+const handleMenuItemClick = (item: ContextMenuItem) => {
+  console.log('菜单项点击:', item.label)
+  // 这里可以添加具体的菜单项处理逻辑
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.test-area {
+  margin: 20px 0;
+}
+
+.test-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.test-box:hover {
+  background-color: #f5f5f5;
+}
+
+.danger {
+  color: #ff4444 !important;
+}
+</style>

src/renderer/src/components/ContextMenu/index.ts

@@ -0,0 +1,4 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export * from './types'
+export * from './utils'
+export * from './composables'

src/renderer/src/components/ContextMenu/types.ts

@@ -0,0 +1,101 @@
+/**
+ * 右键菜单位置类型定义
+ */
+export interface ContextMenuPosition {
+  x: number
+  y: number
+}
+
+/**
+ * 右键菜单项类型定义
+ */
+export interface ContextMenuItem {
+  /** 菜单项唯一标识 */
+  id: string
+  /** 显示文本 */
+  label?: string
+  /** 图标组件 */
+  icon?: any
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否显示分隔线 */
+  separator?: boolean
+  /** 子菜单项 */
+  children?: ContextMenuItem[]
+  /** 点击回调函数 */
+  onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+  /** 自定义CSS类名 */
+  className?: string
+}
+
+/**
+ * 右键菜单配置属性
+ */
+export interface ContextMenuProps {
+  /** 是否显示菜单 */
+  visible: boolean
+  /** 菜单位置 */
+  position: ContextMenuPosition
+  /** 菜单项列表 */
+  items: ContextMenuItem[]
+  /** 自定义CSS类名 */
+  className?: string
+  /** 菜单宽度 */
+  width?: number
+  /** 最大高度（超出时显示滚动条） */
+  maxHeight?: number
+  /** 菜单层级 */
+  zIndex?: number
+  /** 关闭菜单回调 */
+  onClose?: () => void
+  /** 菜单项点击回调 */
+  onItemClick?: (item: ContextMenuItem, event: MouseEvent) => void
+}
+
+/**
+ * 边缘检测配置
+ */
+export interface EdgeDetectionConfig {
+  /** 距离边缘的阈值（像素） */
+  threshold: number
+  /** 是否启用边缘检测 */
+  enabled: boolean
+}
+
+/**
+ * 动画配置
+ */
+export interface AnimationConfig {
+  /** 动画持续时间（毫秒） */
+  duration: number
+  /** 动画缓动函数 */
+  easing: string
+  /** 是否启用动画 */
+  enabled: boolean
+}
+
+/**
+ * 滚动配置
+ */
+export interface ScrollConfig {
+  /** 滚动条宽度 */
+  scrollbarWidth: number
+  /** 滚动速度 */
+  scrollSpeed: number
+  /** 是否显示滚动条 */
+  showScrollbar: boolean
+}
+
+/**
+ * 右键菜单实例方法
+ */
+export interface ContextMenuInstance {
+  /** 显示菜单 */
+  show: (position: ContextMenuPosition, items?: ContextMenuItem[]) => void
+  /** 隐藏菜单 */
+  hide: () => void
+  /** 更新菜单位置 */
+  updatePosition: (position: ContextMenuPosition) => void
+  /** 更新菜单项 */
+  updateItems: (items: ContextMenuItem[]) => void
+}

src/renderer/src/components/ContextMenu/utils.ts

@@ -0,0 +1,266 @@
+import type { ContextMenuItem, ContextMenuPosition } from './types'
+
+/**
+ * 创建标准菜单项
+ */
+export function createMenuItem(
+  id: string,
+  label: string,
+  options?: {
+    icon?: any
+    disabled?: boolean
+    separator?: boolean
+    children?: ContextMenuItem[]
+    onClick?: (item: ContextMenuItem, event: MouseEvent) => void
+    className?: string
+  }
+): ContextMenuItem {
+  return {
+    id,
+    label,
+    icon: options?.icon,
+    disabled: options?.disabled || false,
+    separator: options?.separator || false,
+    children: options?.children,
+    onClick: options?.onClick,
+    className: options?.className
+  }
+}
+
+/**
+ * 创建分隔线菜单项
+ */
+export function createSeparator(): ContextMenuItem {
+  return {
+    id: `separator-${Date.now()}`,
+    label: '',
+    separator: true
+  }
+}
+
+/**
+ * 计算菜单位置，确保在可视区域内
+ */
+export function calculateMenuPosition(
+  event: MouseEvent,
+  menuWidth: number = 200,
+  menuHeight: number = 400
+): ContextMenuPosition {
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+  const threshold = 10
+
+  let x = event.clientX
+  let y = event.clientY
+
+  // 水平边缘检测
+  if (x + menuWidth > viewportWidth - threshold) {
+    x = viewportWidth - menuWidth - threshold
+  } else if (x < threshold) {
+    x = threshold
+  }
+
+  // 垂直边缘检测
+  if (y + menuHeight > viewportHeight - threshold) {
+    y = viewportHeight - menuHeight - threshold
+  } else if (y < threshold) {
+    y = threshold
+  }
+
+  return { x, y }
+}
+
+/**
+ * 防抖函数
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: NodeJS.Timeout
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeoutId)
+    timeoutId = setTimeout(() => func(...args), delay)
+  }
+}
+
+/**
+ * 节流函数
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  func: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle: boolean
+  return (...args: Parameters<T>) => {
+    if (!inThrottle) {
+      func(...args)
+      inThrottle = true
+      setTimeout(() => (inThrottle = false), limit)
+    }
+  }
+}
+
+/**
+ * 深度克隆菜单项（避免引用问题）
+ */
+export function cloneMenuItem(item: ContextMenuItem): ContextMenuItem {
+  return {
+    ...item,
+    children: item.children ? item.children.map(cloneMenuItem) : undefined
+  }
+}
+
+/**
+ * 扁平化菜单项（用于搜索等功能）
+ */
+export function flattenMenuItems(items: ContextMenuItem[]): ContextMenuItem[] {
+  const result: ContextMenuItem[] = []
+
+  items.forEach((item) => {
+    result.push(item)
+    if (item.children && item.children.length > 0) {
+      result.push(...flattenMenuItems(item.children))
+    }
+  })
+
+  return result
+}
+
+/**
+ * 根据ID查找菜单项
+ */
+export function findMenuItemById(items: ContextMenuItem[], id: string): ContextMenuItem | null {
+  for (const item of items) {
+    if (item.id === id) {
+      return item
+    }
+    if (item.children && item.children.length > 0) {
+      const found = findMenuItemById(item.children, id)
+      if (found) {
+        return found
+      }
+    }
+  }
+  return null
+}
+
+/**
+ * 验证菜单项配置
+ */
+export function validateMenuItem(item: ContextMenuItem): boolean {
+  if (!item.id || typeof item.id !== 'string') {
+    console.warn('菜单项必须包含有效的id字段')
+    return false
+  }
+
+  if (!item.separator && (!item.label || typeof item.label !== 'string')) {
+    console.warn('非分隔线菜单项必须包含有效的label字段')
+    return false
+  }
+
+  if (item.children && !Array.isArray(item.children)) {
+    console.warn('children字段必须是数组')
+    return false
+  }
+
+  return true
+}
+
+/**
+ * 验证菜单项列表
+ */
+export function validateMenuItems(items: ContextMenuItem[]): boolean {
+  if (!Array.isArray(items)) {
+    console.warn('菜单项列表必须是数组')
+    return false
+  }
+
+  return items.every(validateMenuItem)
+}
+
+/**
+ * 过滤可见菜单项（移除禁用项和空分隔线）
+ */
+export function filterVisibleItems(items: ContextMenuItem[]): ContextMenuItem[] {
+  return items.filter((item) => {
+    if (item.disabled) return false
+    if (item.separator && !item.label) return true // 保留纯分隔线
+    return true
+  })
+}
+
+/**
+ * 菜单项排序工具
+ */
+export function sortMenuItems(
+  items: ContextMenuItem[],
+  compareFn?: (a: ContextMenuItem, b: ContextMenuItem) => number
+): ContextMenuItem[] {
+  const sorted = [...items]
+  sorted.sort(
+    compareFn ||
+      ((a, b) => {
+        if (!a.label || !b.label) return 0
+        return a.label.localeCompare(b.label)
+      })
+  )
+
+  // 递归排序子菜单
+  return sorted.map((item) => ({
+    ...item,
+    children: item.children ? sortMenuItems(item.children, compareFn) : undefined
+  }))
+}
+
+/**
+ * 菜单项分组工具
+ */
+export function groupMenuItems(items: ContextMenuItem[], groupSize: number = 5): ContextMenuItem[] {
+  const result: ContextMenuItem[] = []
+  let currentGroup: ContextMenuItem[] = []
+
+  items.forEach((item, index) => {
+    currentGroup.push(item)
+
+    if (currentGroup.length >= groupSize || index === items.length - 1) {
+      if (currentGroup.length > 0) {
+        result.push(...currentGroup)
+        if (index < items.length - 1) {
+          result.push(createSeparator())
+        }
+        currentGroup = []
+      }
+    }
+  })
+
+  return result
+}
+
+/**
+ * 菜单项搜索工具
+ */
+export function searchMenuItems(items: ContextMenuItem[], searchText: string): ContextMenuItem[] {
+  if (!searchText.trim()) return items
+
+  const lowerSearchText = searchText.toLowerCase()
+
+  return items.filter((item) => {
+    if (item.separator) return true
+    if (!item.label) return false
+
+    const matches = item.label.toLowerCase().includes(lowerSearchText)
+
+    if (matches) return true
+
+    if (item.children && item.children.length > 0) {
+      const matchingChildren = searchMenuItems(item.children, searchText)
+      if (matchingChildren.length > 0) {
+        item.children = matchingChildren
+        return true
+      }
+    }
+
+    return false
+  })
+}

src/renderer/src/components/Music/SongVirtualList.vue

@@ -2,7 +2,7 @@
   <div class="song-virtual-list">
     <!-- 表头 -->
     <div class="list-header">
-      <div v-if="showIndex" class="col-index"></div>
+      <div v-if="showIndex" class="col-index">#</div>
       <div class="col-title">标题</div>
       <div v-if="showAlbum" class="col-album">专辑</div>
       <div class="col-like">喜欢</div>
@@ -19,6 +19,7 @@
             class="song-item"
             @mouseenter="hoveredSong = song.id || song.songmid"
             @mouseleave="hoveredSong = null"
+            @contextmenu="handleContextMenu($event, song)"
           >
             <!-- 序号或播放状态图标 -->
             <div v-if="showIndex" class="col-index">
@@ -33,7 +34,7 @@
             </div>
 
             <!-- 歌曲信息 -->
-            <div class="col-title" @dblclick="handleAddToPlaylist(song)">
+            <div class="col-title" @click="handleSongClick(song)">
               <div v-if="song.img" class="song-cover">
                 <img :src="song.img" loading="lazy" alt="封面" />
               </div>
@@ -90,12 +91,33 @@
         </div>
       </div>
     </div>
+
+    <!-- 右键菜单 -->
+    <ContextMenu
+      v-model:visible="contextMenuVisible"
+      :position="contextMenuPosition"
+      :items="contextMenuItems"
+      @item-click="handleContextMenuItemClick"
+      @close="closeContextMenu"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
-import { DownloadIcon } from 'tdesign-icons-vue-next'
+import { ref, computed, onMounted, onUnmounted, nextTick, toRaw } from 'vue'
+import {
+  DownloadIcon,
+  PlayCircleIcon,
+  AddIcon,
+  FolderIcon,
+  DeleteIcon
+} from 'tdesign-icons-vue-next'
+import ContextMenu from '../ContextMenu/ContextMenu.vue'
+import { createMenuItem, createSeparator, calculateMenuPosition } from '../ContextMenu/utils'
+import type { ContextMenuItem, ContextMenuPosition } from '../ContextMenu/types'
+import songListAPI from '@renderer/api/songList'
+import type { SongList } from '@common/types/songList'
+import { MessagePlugin } from 'tdesign-vue-next'
 
 interface Song {
   id?: number
@@ -120,6 +142,8 @@ interface Props {
   showIndex?: boolean
   showAlbum?: boolean
   showDuration?: boolean
+  isLocalPlaylist?: boolean
+  playlistId?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -127,10 +151,19 @@ const props = withDefaults(defineProps<Props>(), {
   isPlaying: false,
   showIndex: true,
   showAlbum: true,
-  showDuration: true
+  showDuration: true,
+  isLocalPlaylist: false,
+  playlistId: ''
 })
 
-const emit = defineEmits(['play', 'pause', 'addToPlaylist', 'download', 'scroll'])
+const emit = defineEmits([
+  'play',
+  'pause',
+  'addToPlaylist',
+  'download',
+  'scroll',
+  'removeFromLocalPlaylist'
+])
 
 // 虚拟滚动相关状态
 const scrollContainer = ref<HTMLElement>()
@@ -142,6 +175,19 @@ const scrollTop = ref(0)
 const visibleStartIndex = ref(0)
 const visibleEndIndex = ref(0)
 
+// 点击防抖相关状态
+let clickTimer: NodeJS.Timeout | null = null
+let lastClickTime = 0
+const doubleClickDelay = 300 // 300ms 内的第二次点击视为双击
+
+// 右键菜单相关状态
+const contextMenuVisible = ref(false)
+const contextMenuPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
+const contextMenuSong = ref<Song | null>(null)
+
+// 歌单列表
+const playlists = ref<SongList[]>([])
+
 // 计算总高度
 const totalHeight = computed(() => props.songs.length * itemHeight)
 
@@ -168,21 +214,9 @@ const visibleItems = computed(() => {
   return props.songs.slice(visibleStartIndex.value, visibleEndIndex.value)
 })
 
-// 判断是否为当前歌曲
-const isCurrentSong = (song: Song) => {
-  return (
-    props.currentSong &&
-    (song.id === props.currentSong.id || song.songmid === props.currentSong.songmid)
-  )
-}
-
 // 处理播放
 const handlePlay = (song: Song) => {
-  if (isCurrentSong(song) && props.isPlaying) {
-    emit('pause')
-  } else {
-    emit('play', song)
-  }
+  emit('play', song)
 }
 
 // 处理添加到播放列表
@@ -190,6 +224,31 @@ const handleAddToPlaylist = (song: Song) => {
   emit('addToPlaylist', song)
 }
 
+// 处理歌曲点击事件
+const handleSongClick = (song: Song) => {
+  const currentTime = Date.now()
+  const timeDiff = currentTime - lastClickTime
+
+  // 清除之前的定时器
+  if (clickTimer) {
+    clearTimeout(clickTimer)
+    clickTimer = null
+  }
+
+  if (timeDiff < doubleClickDelay && timeDiff > 0) {
+    // 双击：立即执行播放操作
+    handlePlay(song)
+    lastClickTime = 0 // 重置时间，防止三击
+  } else {
+    // 单击：延迟执行添加到播放列表
+    lastClickTime = currentTime
+    clickTimer = setTimeout(() => {
+      handleAddToPlaylist(song)
+      clickTimer = null
+    }, doubleClickDelay)
+  }
+}
+
 // 格式化时长
 const formatDuration = (duration: string | number) => {
   if (!duration) return '--:--'
@@ -236,6 +295,131 @@ const onScroll = (event: Event) => {
   emit('scroll', event)
 }
 
+// 右键菜单项配置
+const contextMenuItems = computed((): ContextMenuItem[] => {
+  const baseItems: ContextMenuItem[] = [
+    createMenuItem('play', '播放', {
+      icon: PlayCircleIcon,
+      onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+        if (contextMenuSong.value) {
+          handlePlay(contextMenuSong.value)
+        }
+      }
+    }),
+    createMenuItem('addToPlaylist', '添加到播放列表', {
+      icon: AddIcon,
+      onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+        if (contextMenuSong.value) {
+          handleAddToPlaylist(contextMenuSong.value)
+        }
+      }
+    })
+  ]
+
+  // 如果有歌单，添加"加入歌单"子菜单
+  if (playlists.value.length > 0) {
+    baseItems.push(
+      createMenuItem('addToSongList', '加入歌单', {
+        icon: FolderIcon,
+        children: playlists.value.map((playlist) =>
+          createMenuItem(`playlist_${playlist.id}`, playlist.name, {
+            onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+              if (contextMenuSong.value) {
+                handleAddToSongList(contextMenuSong.value, playlist)
+              }
+            }
+          })
+        )
+      })
+    )
+  }
+
+  baseItems.push(
+    createMenuItem('download', '下载', {
+      icon: DownloadIcon,
+      onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+        if (contextMenuSong.value) {
+          emit('download', contextMenuSong.value)
+        }
+      }
+    })
+  )
+  // 如果是本地歌单，添加"移出本地歌单"选项
+  if (props.isLocalPlaylist) {
+    // 添加分隔线
+    baseItems.push(createSeparator())
+    baseItems.push(
+      createMenuItem('removeFromLocalPlaylist', '移出当前歌单', {
+        icon: DeleteIcon,
+        onClick: (_item: ContextMenuItem, _event: MouseEvent) => {
+          if (contextMenuSong.value) {
+            emit('removeFromLocalPlaylist', contextMenuSong.value)
+          }
+        }
+      })
+    )
+  }
+
+  return baseItems
+})
+
+// 处理右键菜单
+const handleContextMenu = (event: MouseEvent, song: Song) => {
+  event.preventDefault()
+  event.stopPropagation()
+
+  // 设置菜单数据
+  contextMenuSong.value = song
+
+  // 使用智能位置计算，确保菜单在可视区域内
+  contextMenuPosition.value = calculateMenuPosition(event, 240, 300)
+
+  // 直接显示菜单
+  contextMenuVisible.value = true
+}
+
+// 处理右键菜单项点击
+const handleContextMenuItemClick = (_item: ContextMenuItem, _event: MouseEvent) => {
+  // 菜单项的 onClick 回调已经在 ContextMenuItem 组件中调用
+  // 这里不需要额外关闭菜单，ContextMenu 组件会处理关闭逻辑
+  // 避免重复关闭导致菜单显示问题
+}
+
+// 关闭右键菜单
+const closeContextMenu = () => {
+  contextMenuVisible.value = false
+  contextMenuSong.value = null
+}
+
+// 加载歌单列表
+const loadPlaylists = async () => {
+  try {
+    const result = await songListAPI.getAll()
+    if (result.success) {
+      playlists.value = result.data || []
+    } else {
+      console.error('加载歌单失败:', result.error)
+    }
+  } catch (error) {
+    console.error('加载歌单失败:', error)
+  }
+}
+
+// 添加歌曲到歌单
+const handleAddToSongList = async (song: Song, playlist: SongList) => {
+  try {
+    const result = await songListAPI.addSongs(playlist.id, [toRaw(song) as any])
+    if (result.success) {
+      MessagePlugin.success(`已将"${song.name}"添加到歌单"${playlist.name}"`)
+    } else {
+      MessagePlugin.error(result.error || '添加到歌单失败')
+    }
+  } catch (error) {
+    console.error('添加到歌单失败:', error)
+    MessagePlugin.error('添加到歌单失败')
+  }
+}
+
 onMounted(() => {
   // 组件挂载后触发一次重新计算
   nextTick(() => {
@@ -245,6 +429,17 @@ onMounted(() => {
       onScroll(event)
     }
   })
+
+  // 加载歌单列表
+  loadPlaylists()
+
+  // 监听歌单变化事件
+  window.addEventListener('playlist-updated', loadPlaylists)
+})
+
+onUnmounted(() => {
+  // 清理事件监听器
+  window.removeEventListener('playlist-updated', loadPlaylists)
 })
 </script>
 
@@ -269,10 +464,10 @@ onMounted(() => {
   display: grid;
   grid-template-columns: 60px 1fr 200px 60px 80px;
   padding: 8px 20px;
-  background: #fafafa;
-  border-bottom: 1px solid #e9e9e9;
+  background: var(--song-list-header-bg);
+  border-bottom: 1px solid var(--song-list-header-border);
   font-size: 12px;
-  color: #999;
+  color: var(--song-list-header-text);
   flex-shrink: 0;
   height: 40px;
   box-sizing: border-box;
@@ -286,7 +481,7 @@ onMounted(() => {
   }
 
   .col-title {
-    padding-left: 10px;
+    padding-left: 20px;
     display: flex;
     align-items: center;
   }
@@ -314,7 +509,7 @@ onMounted(() => {
 }
 
 .virtual-scroll-container {
-  background: #fff;
+  background: var(--song-list-content-bg);
   overflow-y: auto;
   position: relative;
   flex: 1;
@@ -335,24 +530,32 @@ onMounted(() => {
     display: grid;
     grid-template-columns: 60px 1fr 200px 60px 80px;
     padding: 8px 20px;
-    border-bottom: 1px solid #f5f5f5;
+    border-bottom: 1px solid var(--song-list-item-border);
     cursor: pointer;
     transition: background-color 0.2s ease;
     height: 64px;
 
     &:hover,
     &.is-hovered {
-      background: #f5f5f5;
+      background: var(--song-list-item-hover);
+
+      .col-title .song-info .song-title {
+        color: var(--song-list-title-hover);
+      }
+
+      .col-album .album-name {
+        color: var(--song-list-album-hover);
+      }
     }
 
     &.is-current {
-      background: #f0f7ff;
-      color: #507daf;
+      background: var(--song-list-item-current);
+      color: var(--song-list-btn-hover);
     }
 
     &.is-playing {
-      background: #e6f7ff;
-      color: #507daf;
+      background: var(--song-list-item-playing);
+      color: var(--song-list-btn-hover);
     }
 
     .col-index {
@@ -363,7 +566,7 @@ onMounted(() => {
 
       .track-number {
         font-size: 14px;
-        color: #999;
+        color: var(--song-list-track-number);
         font-variant-numeric: tabular-nums;
         width: 100%;
         text-align: center;
@@ -373,7 +576,7 @@ onMounted(() => {
         background: none;
         border: none;
         cursor: pointer;
-        color: #507daf;
+        color: var(--song-list-btn-hover);
         font-size: 16px;
         padding: 8px;
         border-radius: 50%;
@@ -386,8 +589,8 @@ onMounted(() => {
         font-style: none;
 
         &:hover {
-          background: rgba(80, 125, 175, 0.1);
-          color: #3a5d8f;
+          background: var(--song-list-btn-bg-hover);
+          color: var(--song-list-btn-hover);
         }
 
         i {
@@ -429,21 +632,18 @@ onMounted(() => {
 
         .song-title {
           font-size: 14px;
-          color: #333;
+          color: var(--song-list-title-color);
           margin-bottom: 4px;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           line-height: 1.2;
-
-          &:hover {
-            color: #507daf;
-          }
+          transition: color 0.2s ease;
         }
 
         .song-artist {
           font-size: 12px;
-          color: #999;
+          color: var(--song-list-artist-color);
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -453,8 +653,8 @@ onMounted(() => {
           gap: 4px;
 
           .quality-tag {
-            background: #fff7e6;
-            color: #fa8c16;
+            background: var(--song-list-quality-bg);
+            color: var(--song-list-quality-color);
             padding: 1px 4px;
             border-radius: 2px;
             font-size: 10px;
@@ -472,16 +672,13 @@ onMounted(() => {
 
       .album-name {
         font-size: 12px;
-        color: #999;
+        color: var(--song-list-album-color);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         width: 100%;
-
-        &:hover {
-          color: #507daf;
-          cursor: pointer;
-        }
+        transition: color 0.2s ease;
+        cursor: pointer;
       }
     }
 
@@ -495,7 +692,7 @@ onMounted(() => {
         background: none;
         border: none;
         cursor: pointer;
-        color: #ccc;
+        color: var(--song-list-btn-color);
         padding: 8px;
         border-radius: 50%;
         transition: all 0.2s;
@@ -506,8 +703,8 @@ onMounted(() => {
         justify-content: center;
 
         &:hover {
-          color: #507daf;
-          background: rgba(80, 125, 175, 0.1);
+          color: var(--song-list-btn-hover);
+          background: var(--song-list-btn-bg-hover);
         }
 
         i {
@@ -532,7 +729,7 @@ onMounted(() => {
 
         .duration {
           font-size: 12px;
-          color: #999;
+          color: var(--song-list-duration-color);
           font-variant-numeric: tabular-nums;
           min-width: 35px;
           text-align: center;
@@ -548,7 +745,7 @@ onMounted(() => {
             background: none;
             border: none;
             cursor: pointer;
-            color: #ccc;
+            color: var(--song-list-btn-color);
             padding: 6px;
             border-radius: 50%;
             transition: all 0.2s;
@@ -559,8 +756,8 @@ onMounted(() => {
             justify-content: center;
 
             &:hover {
-              color: #507daf;
-              background: rgba(80, 125, 175, 0.1);
+              color: var(--song-list-btn-hover);
+              background: var(--song-list-btn-bg-hover);
             }
 
             i {

src/renderer/src/components/Play/AudioVisualizer.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
 import { ControlAudioStore } from '@renderer/store/ControlAudio'
 import { storeToRefs } from 'pinia'
-import audioManager from '@renderer/utils/audioManager'
+import audioManager from '@renderer/utils/audio/audioManager'
 
 interface Props {
   show?: boolean

src/renderer/src/components/Play/FullPlay.vue

@@ -12,11 +12,16 @@ import {
 import type { SongList } from '@renderer/types/audio'
 import type { LyricLine } from '@applemusic-like-lyrics/core'
 import { ref, computed, onMounted, watch, reactive, onBeforeUnmount, toRaw } from 'vue'
-import { shouldUseBlackText } from '@renderer/utils/contrastColor'
+import { shouldUseBlackText } from '@renderer/utils/color/contrastColor'
 import { ControlAudioStore } from '@renderer/store/ControlAudio'
 import { Fullscreen1Icon, FullscreenExit1Icon, ChevronDownIcon } from 'tdesign-icons-vue-next'
 // 直接从包路径导入，避免 WebAssembly 导入问题
-import { parseYrc, parseLrc, parseTTML } from '@applemusic-like-lyrics/lyric/pkg/amll_lyric.js'
+import {
+  parseYrc,
+  parseLrc,
+  parseTTML,
+  parseQrc
+} from '@applemusic-like-lyrics/lyric/pkg/amll_lyric.js'
 import _ from 'lodash'
 import { storeToRefs } from 'pinia'
 
@@ -151,7 +156,11 @@ watch(
         if (lyricData.crlyric) {
           // 使用逐字歌词
           lyricText = lyricData.crlyric
-          parsedLyrics = parseYrc(lyricText)
+          if (source === 'tx') {
+            parsedLyrics = parseQrc(lyricText)
+          } else {
+            parsedLyrics = parseYrc(lyricText)
+          }
           console.log(`使用${source}逐字歌词`, parsedLyrics)
         } else if (lyricData.lyric) {
           lyricText = lyricData.lyric
@@ -347,13 +356,14 @@ const lightMainColor = computed(() => {
           :lyric-lines="props.show ? state.lyricLines : []"
           :current-time="state.currentTime"
           class="lyric-player"
+          :enable-spring="true"
+          :enable-scale="true"
           @line-click="
             (e) => {
               if (Audio.audio) Audio.audio.currentTime = e.line.getLine().startTime / 1000
             }
           "
         >
-          <template #bottom-line> Test Bottom Line </template>
         </LyricPlayer>
       </div>
     </div>
@@ -384,8 +394,10 @@ const lightMainColor = computed(() => {
 .fullscreen-btn,
 .putawayscreen-btn {
   position: absolute;
-  top: 40px;
-  left: 40px;
+
+  -webkit-app-region: no-drag;
+  top: 25px;
+  left: 30px;
   padding: 10px;
   border-radius: 10px;
   background: rgba(255, 255, 255, 0.1);
@@ -432,7 +444,7 @@ const lightMainColor = computed(() => {
 }
 
 .putawayscreen-btn {
-  left: 100px;
+  left: 90px;
 }
 
 .full-play {
@@ -458,8 +470,8 @@ const lightMainColor = computed(() => {
   .top {
     position: absolute;
     width: calc(100% - 200px);
-    margin-left: 200px;
     z-index: 1;
+    right: 0;
     padding: 30px 30px;
     padding-bottom: 10px;
   }
@@ -681,8 +693,8 @@ const lightMainColor = computed(() => {
 
         // bottom: max(2vw, 29px);
 
-        height: 200%;
-        transform: translateY(-25%);
+        height: 100%;
+        // transform: translateY(-25%);
 
         * [class^='lyricMainLine'] {
           font-weight: 600 !important;

src/renderer/src/components/Play/PlayMusic.vue

@@ -18,16 +18,16 @@ const { liebiao, shengyin } = icons
 import { storeToRefs } from 'pinia'
 import FullPlay from './FullPlay.vue'
 import PlaylistDrawer from './PlaylistDrawer.vue'
-import { extractDominantColor } from '@renderer/utils/colorExtractor'
-import { getBestContrastTextColorWithOpacity } from '@renderer/utils/contrastColor'
+import { extractDominantColor } from '@renderer/utils/color/colorExtractor'
+import { getBestContrastTextColorWithOpacity } from '@renderer/utils/color/contrastColor'
 import { PlayMode, type SongList } from '@renderer/types/audio'
 import { MessagePlugin } from 'tdesign-vue-next'
 import {
   initPlaylistEventListeners,
   destroyPlaylistEventListeners,
   getSongRealUrl
-} from '@renderer/utils/playlistManager'
-import mediaSessionController from '@renderer/utils/useSmtc'
+} from '@renderer/utils/playlist/playlistManager'
+import mediaSessionController from '@renderer/utils/audio/useSmtc'
 import defaultCoverImg from '/default-cover.png'
 
 const controlAudio = ControlAudioStore()
@@ -180,20 +180,12 @@ const playSong = async (song: SongList) => {
 
     let urlToPlay = ''
 
-    // 如果没有URL，需要获取URL
-    if (!urlToPlay) {
-      // eslint-disable-next-line no-useless-catch
-      try {
-        urlToPlay = await getSongRealUrl(toRaw(song))
-
-        // 同时更新播放列表中对应歌曲的URL
-        const playlistIndex = list.value.findIndex((item) => item.songmid === song.songmid)
-        if (playlistIndex !== -1) {
-          ;(list.value[playlistIndex] as any).url = urlToPlay
-        }
-      } catch (error) {
-        throw error
-      }
+    // 获取URL
+    // eslint-disable-next-line no-useless-catch
+    try {
+      urlToPlay = await getSongRealUrl(toRaw(song))
+    } catch (error) {
+      throw error
     }
 
     // 先停止当前播放
@@ -1019,7 +1011,7 @@ watch(showFullPlay, (val) => {
 /* 进度条样式 */
 .progress-bar-container {
   width: 100%;
-  height: 2px;
+  height: 4px;
   position: absolute;
   // padding-top: 2px;
   cursor: pointer;
@@ -1027,7 +1019,7 @@ watch(showFullPlay, (val) => {
 
   &:has(.progress-handle.dragging, *:hover) {
     // margin-bottom: 0;
-    height: 4px;
+    height: 6px;
   }
 
   .progress-bar {

src/renderer/src/components/Play/PlaylistActions.vue

@@ -8,7 +8,7 @@ import {
   importPlaylistFromFile,
   importPlaylistFromClipboard,
   validateImportedPlaylist
-} from '@renderer/utils/playlistExportImport'
+} from '@renderer/utils/playlist/playlistExportImport'
 import { CloudDownloadIcon } from 'tdesign-icons-vue-next'
 import type { SongList } from '@renderer/types/audio'
 import { storeToRefs } from 'pinia'

src/renderer/src/components/Play/PlaylistDrawer.vue

@@ -2,6 +2,8 @@
 import { ref, computed, nextTick, onUnmounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
+import { MessagePlugin, Popconfirm } from 'tdesign-vue-next'
+import { LocationIcon, DeleteIcon } from 'tdesign-icons-vue-next'
 import type { SongList } from '@renderer/types/audio'
 
 // Props
@@ -124,10 +126,20 @@ const currentOperatingSong = ref<any>(null)
 
 // 统一的鼠标/触摸事件处理
 const handleMouseDown = (event: MouseEvent, index: number, song: any) => {
+  // 检查是否点击了删除按钮或其子元素
+  const target = event.target as HTMLElement
+  if (target.closest('.song-remove')) {
+    return // 如果点击的是删除按钮，直接返回，不处理拖拽逻辑
+  }
   handlePointerStart(event, index, song, false)
 }
 
 const handleTouchStart = (event: TouchEvent, index: number, song: any) => {
+  // 检查是否点击了删除按钮或其子元素
+  const target = event.target as HTMLElement
+  if (target.closest('.song-remove')) {
+    return // 如果点击的是删除按钮，直接返回，不处理拖拽逻辑
+  }
   handlePointerStart(event, index, song, true)
 }
 
@@ -403,6 +415,33 @@ onUnmounted(() => {
   stopAutoScroll()
 })
 
+// 清空播放列表
+const handleClearPlaylist = () => {
+  if (list.value.length === 0) {
+    MessagePlugin.warning('播放列表已为空')
+    return
+  }
+
+  localUserStore.clearList()
+  MessagePlugin.success('播放列表已清空')
+}
+
+// 定位到当前播放歌曲
+const handleLocateCurrentSong = () => {
+  if (!props.currentSongId) {
+    MessagePlugin.info('当前没有正在播放的歌曲')
+    return
+  }
+
+  const currentSongExists = list.value.some((song) => song.songmid === props.currentSongId)
+  if (!currentSongExists) {
+    MessagePlugin.warning('当前播放的歌曲不在播放列表中')
+    return
+  }
+
+  scrollToCurrentSong()
+}
+
 // 暴露方法给父组件
 defineExpose({
   scrollToCurrentSong
@@ -474,6 +513,35 @@ defineExpose({
           </div>
         </TransitionGroup>
       </div>
+
+      <!-- 底部操作按钮 -->
+      <div v-if="list.length > 0" class="playlist-footer">
+        <button
+          class="playlist-action-btn locate-btn"
+          :disabled="!currentSongId"
+          @click="handleLocateCurrentSong"
+        >
+          <LocationIcon size="16" />
+          <span>定位当前播放</span>
+        </button>
+        <Popconfirm
+          content="确定要清空播放列表吗？此操作不可撤销。"
+          :confirm-btn="{ content: '确认清空', theme: 'danger' }"
+          cancel-btn="取消"
+          placement="top"
+          theme="warning"
+          :popup-props="{
+            zIndex: 9999,
+            overlayStyle: { zIndex: 9998 }
+          }"
+          @confirm="handleClearPlaylist"
+        >
+          <button class="playlist-action-btn clear-btn">
+            <DeleteIcon size="16" />
+            <span>清空播放列表</span>
+          </button>
+        </Popconfirm>
+      </div>
     </div>
   </transition>
 </template>
@@ -499,6 +567,7 @@ defineExpose({
   flex-direction: column;
   color: #333;
   transform: translateX(0);
+  overflow: hidden;
   /* 初始位置 */
 }
 
@@ -527,6 +596,34 @@ defineExpose({
   color: #ccc;
 }
 
+/* 全屏模式下的滚动条样式 - 只显示滑块 */
+.playlist-container .playlist-content {
+  scrollbar-arrow-color: transparent;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(91, 91, 91, 0.3) transparent;
+}
+.playlist-container.full-screen-mode .playlist-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+
+.playlist-container.full-screen-mode .playlist-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
 .playlist-container.full-screen-mode .playlist-song:hover {
   background-color: rgba(255, 255, 255, 0.1);
 }
@@ -579,7 +676,7 @@ defineExpose({
 .playlist-content {
   flex: 1;
   overflow-y: auto;
-  scrollbar-width: none;
+  // scrollbar-width: none;
   margin: 10px 0;
   padding: 0 8px;
 }
@@ -797,6 +894,153 @@ defineExpose({
   transform: translateX(100%);
 }
 
+/* 播放列表底部操作按钮 */
+.playlist-footer {
+  display: flex;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+  // background: rgba(255, 255, 255, 0.3);
+  // backdrop-filter: blur(10px);
+}
+
+.playlist-container.full-screen-mode .playlist-footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  // background: rgba(0, 0, 0, 0.2);
+}
+
+.playlist-action-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(10px);
+  -webkit-app-region: no-drag;
+}
+
+.locate-btn {
+  background: rgba(35, 115, 206, 0.1);
+  color: #2373ce;
+  border: 1px solid rgba(35, 115, 206, 0.2);
+}
+
+.locate-btn:hover:not(:disabled) {
+  background: rgba(35, 115, 206, 0.15);
+  border-color: rgba(35, 115, 206, 0.3);
+  transform: translateY(-1px);
+}
+
+.locate-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: #999;
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.clear-btn {
+  background: rgba(229, 72, 77, 0.1);
+  color: #e5484d;
+  border: 1px solid rgba(229, 72, 77, 0.2);
+}
+
+.clear-btn:hover {
+  background: rgba(229, 72, 77, 0.15);
+  border-color: rgba(229, 72, 77, 0.3);
+  transform: translateY(-1px);
+}
+
+// /* 全屏模式下的按钮样式 */
+// .playlist-container.full-screen-mode .locate-btn {
+//   background: rgba(255, 255, 255, 0.1);
+//   color: #87ceeb;
+//   border-color: rgba(255, 255, 255, 0.2);
+// }
+
+// .playlist-container.full-screen-mode .locate-btn:hover:not(:disabled) {
+//   background: rgba(255, 255, 255, 0.15);
+//   border-color: rgba(255, 255, 255, 0.3);
+// }
+
+// .playlist-container.full-screen-mode .locate-btn:disabled {
+//   color: #666;
+//   background: rgba(255, 255, 255, 0.05);
+//   border-color: rgba(255, 255, 255, 0.1);
+// }
+
+// .playlist-container.full-screen-mode .clear-btn {
+//   background: rgba(255, 255, 255, 0.1);
+//   color: #ff6b6b;
+//   border-color: rgba(255, 255, 255, 0.2);
+// }
+
+// .playlist-container.full-screen-mode .clear-btn:hover {
+//   background: rgba(255, 255, 255, 0.15);
+//   border-color: rgba(255, 255, 255, 0.3);
+// }
+
+// /* Popconfirm 样式适配 */
+// .playlist-container :deep(.t-popup__content) {
+//   background: rgba(255, 255, 255, 0.95) !important;
+//   backdrop-filter: blur(20px) !important;
+//   border: 1px solid rgba(0, 0, 0, 0.1) !important;
+//   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
+//   border-radius: 8px !important;
+// }
+
+// .playlist-container.full-screen-mode :deep(.t-popup__content) {
+//   background: rgba(0, 0, 0, 0.85) !important;
+//   backdrop-filter: blur(20px) !important;
+//   border: 1px solid rgba(255, 255, 255, 0.2) !important;
+//   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
+// }
+
+// .playlist-container.full-screen-mode :deep(.t-popconfirm__content) {
+//   color: #fff !important;
+// }
+
+// .playlist-container.full-screen-mode :deep(.t-button--theme-default) {
+//   background: rgba(255, 255, 255, 0.1) !important;
+//   border-color: rgba(255, 255, 255, 0.2) !important;
+//   color: #fff !important;
+// }
+
+// .playlist-container.full-screen-mode :deep(.t-button--theme-default:hover) {
+//   background: rgba(255, 255, 255, 0.15) !important;
+//   border-color: rgba(255, 255, 255, 0.3) !important;
+// }
+
+// .playlist-container.full-screen-mode :deep(.t-button--theme-danger) {
+//   background: rgba(229, 72, 77, 0.8) !important;
+//   border-color: rgba(229, 72, 77, 0.9) !important;
+// }
+
+// .playlist-container.full-screen-mode :deep(.t-button--theme-danger:hover) {
+//   background: rgba(229, 72, 77, 0.9) !important;
+//   border-color: rgba(229, 72, 77, 1) !important;
+// }
+
+// /* 普通模式下的按钮样式优化 */
+// .playlist-container :deep(.t-button--theme-danger) {
+//   background: rgba(229, 72, 77, 0.1) !important;
+//   border-color: rgba(229, 72, 77, 0.3) !important;
+//   color: #e5484d !important;
+// }
+
+// .playlist-container :deep(.t-button--theme-danger:hover) {
+//   background: rgba(229, 72, 77, 0.15) !important;
+//   border-color: rgba(229, 72, 77, 0.4) !important;
+// }
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .playlist-container {
@@ -804,5 +1048,22 @@ defineExpose({
     right: 0;
     border-radius: 8px 8px 0 0;
   }
+
+  .playlist-footer {
+    padding: 10px 12px;
+    gap: 6px;
+  }
+
+  .playlist-action-btn {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  // /* 移动端 Popconfirm 适配 */
+  // :deep(.playlist-popconfirm .t-popup__content),
+  // :deep(.playlist-popconfirm-fullscreen .t-popup__content) {
+  //   max-width: 280px;
+  //   font-size: 14px;
+  // }
 }
 </style>

src/renderer/src/components/Play/ShaderBackground.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'
-import { extractColors, Color } from '@renderer/utils/colorExtractor'
+import { extractColors, Color } from '@renderer/utils/color/colorExtractor'
 import DefaultCover from '@renderer/assets/images/Default.jpg'
 import CoverImage from '@renderer/assets/images/cover.png'
 
@@ -40,7 +40,7 @@ const actualCoverImage = computed(() => {
 const vertexShaderSource = `
   attribute vec2 a_position;
   varying vec2 v_texCoord;
-  
+
   void main() {
     gl_Position = vec4(a_position, 0.0, 1.0);
     v_texCoord = a_position * 0.5 + 0.5;
@@ -53,81 +53,81 @@ const fragmentShaderSource = `
   varying vec2 v_texCoord;
   uniform float u_time;
   uniform vec3 u_color;
-  
+
   // 改进的随机函数 - 更平滑
   float random(vec2 st) {
     return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
   }
-  
+
   // 改进的噪声函数 - 使用三次Hermite插值，更平滑
   float noise(vec2 st) {
     vec2 i = floor(st);
     vec2 f = fract(st);
-    
+
     // 四个角的随机值
     float a = random(i);
     float b = random(i + vec2(1.0, 0.0));
     float c = random(i + vec2(0.0, 1.0));
     float d = random(i + vec2(1.0, 1.0));
-    
+
     // 使用三次Hermite插值，更加平滑
     vec2 u = f * f * (3.0 - 2.0 * f);
-    
+
     return mix(a, b, u.x) +
            (c - a) * u.y * (1.0 - u.x) +
            (d - b) * u.x * u.y;
   }
-  
+
   // 改进的分数布朗运动 - 降低频率，减少网格感
   float fbm(vec2 st) {
     float value = 0.0;
     float amplitude = 0.5;
     float frequency = 0.6; // 降低初始频率
-    
+
     // 减少迭代次数，使用更平滑的混合
     for (int i = 0; i < 4; i++) { // 减少迭代次数
       value += amplitude * noise(st * frequency);
       frequency *= 1.8; // 降低频率增长率
       amplitude *= 0.6; // 提高振幅衰减率
     }
-    
+
     // 额外的平滑处理
     return smoothstep(0.2, 0.8, value);
   }
-  
+
   // HSV转RGB颜色
   vec3 hsv2rgb(vec3 c) {
     vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
     vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
     return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
   }
-  
+
   void main() {
     // 使用时间和位置创建动态效果
     vec2 st = v_texCoord;
     float time = u_time * 0.20; // 降低时间速率，使动画更平滑
-    
+
     // 创建更平滑的移动噪声场
     vec2 q = vec2(
       fbm(st + vec2(0.0, time * 0.3)),
       fbm(st + vec2(time * 0.2, 0.0))
     );
-    
+
     // 使用q创建第二层噪声，降低强度
     vec2 r = vec2(
       fbm(st + 2.0 * q + vec2(1.7, 9.2) + time * 0.1),
       fbm(st + 2.0 * q + vec2(8.3, 2.8) + time * 0.08)
     );
-    
+
     // 最终的噪声值 - 额外平滑处理
     float f = fbm(st + r * 0.7);
-    
+
     // 从主色调提取HSV
     vec3 baseColor = u_color;
     float maxComp = max(max(baseColor.r, baseColor.g), baseColor.b);
     float minComp = min(min(baseColor.r, baseColor.g), baseColor.b);
     float delta = maxComp - minComp;
-    
+
     // 估算色相
     float hue = 0.0;
     if (delta > 0.0) {
@@ -140,78 +140,78 @@ const fragmentShaderSource = `
       }
       hue /= 6.0;
     }
-    
+
     // 估算饱和度和明度
     float saturation = maxComp == 0.0 ? 0.0 : delta / maxComp;
     float value = maxComp;
-    
+
     // 提高基础亮度和饱和度，使颜色更加明亮清新
     saturation = min(saturation * 1.0, 1.0);  // 增加饱和度
     value = min(value * 1.3, 1.0);            // 增加亮度
-    
+
     // 创建多个颜色变体 - 更明亮的变体
     vec3 color1 = hsv2rgb(vec3(hue, saturation * 0.9, min(value * 1.1, 1.0)));
     vec3 color2 = hsv2rgb(vec3(mod(hue + 0.05, 1.0), min(saturation * 1.3, 1.0), min(value * 1.2, 1.0)));
     vec3 color3 = hsv2rgb(vec3(mod(hue + 0.1, 1.0), min(saturation * 1.1, 1.0), min(value * 1.15, 1.0)));
     vec3 color4 = hsv2rgb(vec3(mod(hue - 0.05, 1.0), min(saturation * 1.2, 1.0), min(value * 1.25, 1.0)));
-    
+
     // 使用噪声值混合多个颜色 - 更平滑的混合，使用更多主色调
     float t1 = smoothstep(0.0, 1.0, f);
     float t2 = sin(f * 3.14) * 0.5 + 0.5;
     float t3 = cos(f * 2.0 + time * 0.5) * 0.5 + 0.5;
     float t4 = sin(f * 4.0 + time * 0.3) * 0.5 + 0.5; // 额外的混合因子
-    
+
     // 创建两个额外的颜色变体，增加色彩丰富度
     vec3 color5 = hsv2rgb(vec3(mod(hue + 0.15, 1.0), min(saturation * 1.4, 1.0), min(value * 1.3, 1.0)));
     vec3 color6 = hsv2rgb(vec3(mod(hue - 0.15, 1.0), min(saturation * 1.3, 1.0), min(value * 1.2, 1.0)));
-    
+
     // 混合所有颜色
     vec3 colorMix1 = mix(color1, color2, t1);
     vec3 colorMix2 = mix(color3, color4, t2);
     vec3 colorMix3 = mix(color5, color6, t4);
-    
+
     vec3 color = mix(
       mix(colorMix1, colorMix2, t3),
       colorMix3,
       sin(f * 2.5 + time * 0.4) * 0.5 + 0.5
     );
-    
+
     // 添加更多的动态亮点和波纹
     color += 0.15 * sin(f * 8.0 + time) * vec3(1.0);
-    
+
     // 增加波纹效果
     float ripple1 = sin(st.x * 12.0 + time * 0.8) * sin(st.y * 12.0 + time * 0.7) * 0.06;
     float ripple2 = sin(st.x * 8.0 - time * 0.6) * sin(st.y * 8.0 - time * 0.5) * 0.05;
     float ripple3 = sin(st.x * 15.0 + time * 0.4) * sin(st.y * 15.0 + time * 0.3) * 0.04;
-    
+
     // 混合多层波纹
     color += vec3(ripple1 + ripple2 + ripple3);
-    
+
     // 添加更大范围、更柔和的光晕效果
     float glow = smoothstep(0.3, 0.7, f);
     color = mix(color, vec3(1.0), glow * 0.12);
-    
+
     // 添加柔和的渐变效果，进一步减少网格感
     float vignette = smoothstep(0.0, 0.7, 0.5 - length(st - 0.5));
     color = mix(color, color * 1.2, vignette * 0.3);
-    
+
     // 应用高斯模糊效果，减少锐利的网格边缘
     vec2 pixel = vec2(1.0) / vec2(800.0, 600.0); // 假设的分辨率
     float blur = 0.0;
-    
+
     // 简化的高斯模糊 - 只采样几个点以保持性能
     blur += f * 0.5;
     blur += fbm(st + pixel * vec2(1.0, 0.0)) * 0.125;
     blur += fbm(st + pixel * vec2(-1.0, 0.0)) * 0.125;
     blur += fbm(st + pixel * vec2(0.0, 1.0)) * 0.125;
     blur += fbm(st + pixel * vec2(0.0, -1.0)) * 0.125;
-    
+
     // 使用模糊值平滑颜色过渡
     color = mix(color, mix(color1, color4, 0.5), (blur - f) * 0.2);
-    
+
     // 确保颜色在有效范围内
     color = clamp(color, 0.0, 1.0);
-    
+
     gl_FragColor = vec4(color, 1.0);
   }
 `

src/renderer/src/components/PluginNoticeDialog.vue

@@ -0,0 +1,324 @@
+<template>
+  <t-dialog
+    v-model:visible="visible"
+    :header="dialogTitle"
+    :width="dialogWidth"
+    :close-btn="true"
+    :close-on-overlay-click="false"
+    :destroy-on-close="true"
+    placement="center"
+    @close="handleClose"
+  >
+    <template #body>
+      <div class="plugin-notice-content">
+        <!-- 通知消息 -->
+        <div class="notice-message">
+          <p class="message-text">{{ notice?.message }}</p>
+
+          <!-- 更新通知的额外信息 -->
+          <div v-if="notice?.dialogType === 'update'" class="update-info">
+            <div class="version-info">
+              <span class="version-label">当前版本:</span>
+              <span class="version-value">{{ notice?.currentVersion || 'Unknown' }}</span>
+            </div>
+            <div class="version-info">
+              <span class="version-label">新版本:</span>
+              <span class="version-value new-version">{{ notice?.newVersion || 'Unknown' }}</span>
+            </div>
+            <div v-if="notice?.pluginType" class="plugin-type">
+              <span class="type-label">插件类型:</span>
+              <t-tag :theme="notice.pluginType === 'cr' ? 'primary' : 'success'" size="small">
+                {{ notice.pluginType === 'cr' ? 'CeruMusic' : 'LX Music' }}
+              </t-tag>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="dialog-actions">
+        <t-button
+          v-for="action in notice?.actions || []"
+          :key="action.type"
+          :theme="action.primary ? 'primary' : 'default'"
+          :loading="actionLoading === action.type"
+          @click="handleAction(action.type)"
+        >
+          {{ action.text }}
+        </t-button>
+      </div>
+    </template>
+  </t-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { MessagePlugin } from 'tdesign-vue-next'
+
+interface DialogNotice {
+  type: string
+  data: any
+  timestamp: number
+  pluginName: string
+  dialogType: 'update' | 'info' | 'error' | 'warning' | 'success'
+  title: string
+  message: string
+  updateUrl?: string
+  pluginType?: 'lx' | 'cr'
+  currentVersion?: string
+  newVersion?: string
+  actions: Array<{
+    text: string
+    type: 'cancel' | 'update' | 'confirm'
+    primary?: boolean
+  }>
+}
+
+// 响应式数据
+const visible = ref(false)
+const notice = ref<DialogNotice | null>(null)
+const actionLoading = ref<string | null>(null)
+const noticeQueue = ref<DialogNotice[]>([]) // 通知队列
+
+// 计算属性
+const dialogWidth = computed(() => {
+  return notice.value?.dialogType === 'update' ? '500px' : '400px'
+})
+
+// 对话框标题（包含队列信息）
+const dialogTitle = computed(() => {
+  const baseTitle = notice.value?.title || '插件通知'
+  const queueLength = noticeQueue.value.length
+
+  if (queueLength > 0) {
+    return `${baseTitle} (还有 ${queueLength} 个通知)`
+  }
+
+  return baseTitle
+})
+
+// 显示通知对话框
+const showNotice = (noticeData: DialogNotice) => {
+  // 添加到队列
+  noticeQueue.value.push(noticeData)
+  console.log('[PluginNotice] 添加通知到队列:', noticeData, '队列长度:', noticeQueue.value.length)
+
+  // 如果当前没有显示对话框，立即显示
+  if (!visible.value) {
+    showNextNotice()
+  }
+}
+
+// 显示队列中的下一个通知
+const showNextNotice = () => {
+  if (noticeQueue.value.length === 0) {
+    return
+  }
+
+  const nextNotice = noticeQueue.value.shift()
+  if (nextNotice) {
+    notice.value = nextNotice
+    visible.value = true
+    console.log(
+      '[PluginNotice] 显示下一个通知:',
+      nextNotice,
+      '剩余队列长度:',
+      noticeQueue.value.length
+    )
+  }
+}
+
+// 处理操作按钮点击
+const handleAction = async (actionType: string) => {
+  if (!notice.value) return
+
+  actionLoading.value = actionType
+
+  try {
+    console.log('[PluginNotice] 处理操作:', actionType, notice.value)
+
+    if (actionType === 'update' && notice.value.updateUrl) {
+      window.open(notice.value.updateUrl)
+      handleClose()
+    } else if (actionType === 'cancel') {
+      // 取消操作直接关闭
+      handleClose()
+    } else {
+      // 其他操作直接关闭对话框
+      handleClose()
+    }
+  } catch (error: any) {
+    console.error('[PluginNotice] 处理操作失败:', error)
+    MessagePlugin.error(`操作失败: ${error.message}`)
+  } finally {
+    actionLoading.value = null
+  }
+}
+
+// 处理对话框关闭
+const handleClose = () => {
+  visible.value = false
+  notice.value = null
+  actionLoading.value = null
+
+  // 延迟一点时间后显示下一个通知，避免对话框切换过快
+  setTimeout(() => {
+    showNextNotice()
+  }, 300)
+}
+
+// 监听插件通知事件
+const handlePluginNotice = (noticeData: DialogNotice) => {
+  showNotice(noticeData)
+}
+let event: () => void
+// 生命周期
+onMounted(() => {
+  // 监听来自主进程的插件通知
+  event = window.api.pluginNotice.onPluginNotice(handlePluginNotice)
+})
+onUnmounted(() => {
+  event()
+  // 清空队列
+  noticeQueue.value = []
+})
+// 暴露方法给父组件
+defineExpose({
+  showNotice,
+  getQueueLength: () => noticeQueue.value.length,
+  clearQueue: () => {
+    noticeQueue.value = []
+    console.log('[PluginNotice] 清空通知队列')
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.plugin-notice-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 16px 0;
+
+  .notice-icon {
+    flex-shrink: 0;
+
+    .icon-update {
+      color: #0052d9;
+    }
+
+    .icon-error {
+      color: #e34d59;
+    }
+
+    .icon-warning {
+      color: #ed7b2f;
+    }
+
+    .icon-success {
+      color: #00a870;
+    }
+
+    .icon-info {
+      color: #0052d9;
+    }
+  }
+
+  .notice-message {
+    flex: 1;
+
+    .message-text {
+      margin: 0 0 16px 0;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--td-text-color-primary);
+    }
+
+    .update-info {
+      background: var(--td-bg-color-container);
+      border-radius: 6px;
+      padding: 20px;
+      margin: 0 10px;
+      border: 1px solid var(--td-border-level-1-color);
+
+      .version-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .version-label {
+          font-size: 12px;
+          color: var(--td-text-color-secondary);
+        }
+
+        .version-value {
+          font-size: 12px;
+          font-weight: 500;
+          color: var(--td-text-color-primary);
+
+          &.new-version {
+            color: var(--td-brand-color);
+          }
+        }
+      }
+
+      .plugin-type {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 8px;
+        padding-top: 8px;
+        border-top: 1px solid var(--td-border-level-2-color);
+
+        .type-label {
+          font-size: 12px;
+          color: var(--td-text-color-secondary);
+        }
+      }
+    }
+  }
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .plugin-notice-content {
+    flex-direction: column;
+    text-align: center;
+
+    .notice-icon {
+      align-self: center;
+    }
+  }
+
+  .dialog-actions {
+    flex-direction: column-reverse;
+
+    :deep(.t-button) {
+      width: 100%;
+    }
+  }
+}
+
+// 深色主题适配
+:deep(.t-dialog) {
+  .t-dialog__header {
+    border-bottom: 1px solid var(--td-border-level-1-color);
+  }
+
+  .t-dialog__footer {
+    border-top: 1px solid var(--td-border-level-1-color);
+  }
+}
+</style>

src/renderer/src/components/README-ThemeSelector.md

@@ -1,162 +0,0 @@
-# 主题切换组件使用说明
-
-## 概述
-
-ThemeSelector 是一个现代化的主题切换组件，支持在多个预设主题色之间切换。组件与现有的 TDesign 主题系统完全兼容。
-
-## 功能特性
-
-- ✅ 支持多种预设主题色（默认、粉色、蓝色、青色、橙色）
-- ✅ 使用 `theme-mode` 属性实现主题切换
-- ✅ 自动保存用户选择到本地存储
-- ✅ 现代化的下拉选择界面
-- ✅ 平滑的过渡动画效果
-- ✅ 响应式设计，支持移动端
-- ✅ 与 TDesign 主题系统完全兼容
-
-## 使用方法
-
-### 1. 基本使用
-
-```vue
-<template>
-  <div>
-    <!-- 在任何需要的地方使用主题切换器 -->
-    <ThemeSelector />
-  </div>
-</template>
-
-<script setup>
-import ThemeSelector from '@/components/ThemeSelector.vue'
-</script>
-```
-
-### 2. 在导航栏中使用
-
-```vue
-<template>
-  <header class="app-header">
-    <h1>应用标题</h1>
-    <div class="header-actions">
-      <ThemeSelector />
-    </div>
-  </header>
-</template>
-```
-
-### 3. 在设置页面中使用
-
-```vue
-<template>
-  <div class="settings-page">
-    <div class="setting-item">
-      <label>主题色</label>
-      <ThemeSelector />
-    </div>
-  </div>
-</template>
-```
-
-## 主题切换原理
-
-组件通过以下方式实现主题切换：
-
-1. **默认主题**: 移除 `theme-mode` 属性
-
-   ```javascript
-   document.documentElement.removeAttribute('theme-mode')
-   ```
-
-2. **其他主题**: 设置对应的 `theme-mode` 属性
-   ```javascript
-   document.documentElement.setAttribute('theme-mode', 'pink')
-   ```
-
-## 支持的主题
-
-| 主题名称 | 属性值    | 主色调  |
-| -------- | --------- | ------- |
-| 默认     | `default` | #57b4ff |
-| 粉色     | `pink`    | #fc5e7e |
-| 蓝色     | `blue`    | #57b4ff |
-| 青色     | `cyan`    | #3ac2b8 |
-| 橙色     | `orange`  | #fb9458 |
-
-## 自定义配置
-
-如果需要添加新的主题，请按以下步骤操作：
-
-### 1. 创建主题CSS文件
-
-在 `src/renderer/src/assets/theme/` 目录下创建新的主题文件，例如 `green.css`：
-
-```css
-:root[theme-mode='green'] {
-  --td-brand-color: #10b981;
-  --td-brand-color-hover: #059669;
-  /* 其他主题变量... */
-}
-```
-
-### 2. 更新组件配置
-
-在 `ThemeSelector.vue` 中添加新主题：
-
-```javascript
-const themes = [
-  // 现有主题...
-  { name: 'green', label: '绿色', color: '#10b981' }
-]
-```
-
-## 样式自定义
-
-组件使用 TDesign 的 CSS 变量，可以通过覆盖这些变量来自定义样式：
-
-```css
-.theme-selector {
-  /* 自定义触发器样式 */
-  --td-radius-medium: 8px;
-}
-
-.theme-dropdown {
-  /* 自定义下拉菜单样式 */
-  --td-shadow-2: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-```
-
-## 事件和回调
-
-组件会自动处理主题切换和本地存储，无需额外配置。如果需要监听主题变化，可以监听 `localStorage` 的变化：
-
-```javascript
-// 监听主题变化
-window.addEventListener('storage', (e) => {
-  if (e.key === 'selected-theme') {
-    console.log('主题已切换到:', e.newValue)
-  }
-})
-```
-
-## 注意事项
-
-1. 确保项目中已引入对应的主题CSS文件
-2. 组件会自动加载用户上次选择的主题
-3. 主题切换是全局的，会影响整个应用
-4. 建议在应用的主入口处使用，避免重复渲染
-
-## 演示组件
-
-项目还包含一个 `ThemeDemo.vue` 组件，展示了主题切换的效果：
-
-```vue
-<template>
-  <ThemeDemo />
-</template>
-
-<script setup>
-import ThemeDemo from '@/components/ThemeDemo.vue'
-</script>
-```
-
-这个演示组件展示了不同UI元素在各种主题下的表现。

src/renderer/src/components/Search/SearchComponent.vue

@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-const keyword = ref('')
-const isSearching = ref(false)
-
-// 搜索类型：1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单
-
-// 处理搜索事件
-const handleSearch = async () => {
-  if (!keyword.value.trim()) return
-
-  isSearching.value = true
-  try {
-    // 调用搜索API
-
-    // 跳转到搜索结果页面，并传递搜索结果和关键词
-    router.push({
-      path: '/home/search',
-      query: { keyword: keyword.value }
-    })
-  } catch (error) {
-    console.error('搜索失败:', error)
-  } finally {
-    isSearching.value = false
-  }
-}
-
-// 处理按键事件，按下回车键时触发搜索
-const handleKeyDown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    handleSearch()
-  }
-}
-</script>
-
-<template>
-  <div class="search-component">
-    <t-input
-      v-model="keyword"
-      placeholder="搜索音乐、歌手"
-      :loading="isSearching"
-      @keydown="handleKeyDown"
-    >
-      <template #suffix>
-        <t-button
-          theme="primary"
-          variant="text"
-          shape="square"
-          :disabled="isSearching"
-          @click="handleSearch"
-        >
-          <i class="iconfont icon-sousuo"></i>
-        </t-button>
-      </template>
-    </t-input>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-component {
-  width: 100%;
-
-  :deep(.t-input) {
-    border-radius: 0rem !important;
-    border: none;
-    box-shadow: none;
-  }
-
-  :deep(.t-input__suffix) {
-    padding-right: 0.5rem;
-  }
-
-  .iconfont {
-    font-size: 1rem;
-    color: #6b7280;
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: #f97316;
-    }
-  }
-}
-</style>

src/renderer/src/components/Settings/AIFloatBallSettings.vue

@@ -25,7 +25,7 @@ const { settings } = storeToRefs(settingsStore)
 const showFloatBall = ref(settings.value.showFloatBall !== false)
 
 // 处理悬浮球开关切换
-const handleFloatBallToggle = (val: boolean) => {
+const handleFloatBallToggle = (val: any) => {
   settingsStore.updateSettings({ showFloatBall: val })
 }
 

src/renderer/src/components/Settings/PlaylistSettings.vue

@@ -9,7 +9,7 @@ import {
   importPlaylistFromFile,
   importPlaylistFromClipboard,
   validateImportedPlaylist
-} from '@renderer/utils/playlistExportImport'
+} from '@renderer/utils/playlist/playlistExportImport'
 import type { SongList } from '@renderer/types/audio'
 import { CloudDownloadIcon, DeleteIcon, CloudUploadIcon } from 'tdesign-icons-vue-next'
 

src/renderer/src/components/Settings/plugins.vue

@@ -1,32 +1,73 @@
 <template>
   <div class="page">
-    <TitleBarControls title="插件管理" :show-back="true" class="header"></TitleBarControls>
+    <!-- <TitleBarControls title="插件管理" :show-back="true" class="header"></TitleBarControls> -->
     <div class="plugins-container">
-      <h2>插件管理</h2>
+      <div class="plugin-actions-hearder">
+        <h2>插件管理</h2>
 
-      <div class="plugin-actions">
-        <t-button theme="primary" @click="plugTypeDialog = true">
-          <template #icon><t-icon name="add" /></template> 添加插件
-        </t-button>
-        <t-dialog
-          :visible="plugTypeDialog"
-          :close-btn="true"
-          confirm-btn="确定"
-          cancel-btn="取消"
-          :on-confirm="addPlug"
-          :on-close="() => (plugTypeDialog = false)"
-        >
-          <template #header>请选择你的插件类别</template>
-          <template #body>
-            <t-radio-group v-model="type" variant="primary-filled" default-value="cr">
-              <t-radio-button value="cr">澜音插件</t-radio-button>
-              <t-radio-button value="lx">洛雪插件</t-radio-button>
-            </t-radio-group>
-          </template>
-        </t-dialog>
-        <t-button theme="default" @click="refreshPlugins">
-          <template #icon><t-icon name="refresh" /></template> 刷新
-        </t-button>
+        <div class="plugin-actions" style="flex-direction: row">
+          <t-button theme="primary" @click="plugTypeDialog = true">
+            <template #icon><t-icon name="add" /></template> 添加插件
+          </t-button>
+          <t-dialog
+            :visible="plugTypeDialog"
+            :close-btn="true"
+            confirm-btn="下一步"
+            cancel-btn="取消"
+            :on-confirm="showImportMethodDialog"
+            :on-close="() => (plugTypeDialog = false)"
+          >
+            <template #header>请选择你的插件类别</template>
+            <template #body>
+              <t-radio-group v-model="type" variant="primary-filled" default-value="cr">
+                <t-radio-button value="cr">澜音插件</t-radio-button>
+                <t-radio-button value="lx">洛雪插件</t-radio-button>
+              </t-radio-group>
+            </template>
+          </t-dialog>
+
+          <!-- 导入方式选择对话框 -->
+          <t-dialog
+            :visible="importMethodDialog"
+            :close-btn="true"
+            confirm-btn="确定"
+            cancel-btn="返回"
+            :on-confirm="handleImport"
+            :on-close="() => (importMethodDialog = false)"
+            :on-cancel="backToTypeSelection"
+          >
+            <template #header>选择导入方式</template>
+            <template #body>
+              <div class="import-method-container">
+                <t-radio-group
+                  v-model="importMethod"
+                  variant="primary-filled"
+                  default-value="local"
+                >
+                  <t-radio-button value="local">本地导入</t-radio-button>
+                  <t-radio-button value="online">在线导入</t-radio-button>
+                </t-radio-group>
+
+                <div v-if="importMethod === 'online'" class="online-input-container">
+                  <t-input
+                    v-model="onlineUrl"
+                    placeholder="请输入插件下载地址"
+                    size="large"
+                    style="margin-top: 15px"
+                  />
+                  <p class="hint-text">支持 HTTP/HTTPS 链接，插件文件应为 .js 或 .zip 格式</p>
+                </div>
+
+                <div v-else class="local-hint-container">
+                  <p class="hint-text">将从本地文件选择插件文件进行导入</p>
+                </div>
+              </div>
+            </template>
+          </t-dialog>
+          <t-button theme="default" @click="refreshPlugins">
+            <template #icon><t-icon name="refresh" /></template> 刷新
+          </t-button>
+        </div>
       </div>
 
       <div v-if="loading" class="loading">
@@ -179,7 +220,6 @@
 </template>
 
 <script setup lang="ts">
-import TitleBarControls from '@renderer/components/TitleBarControls.vue'
 import { ref, onMounted, nextTick } from 'vue'
 import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
@@ -215,7 +255,10 @@ const plugins = ref<Plugin[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
 const plugTypeDialog = ref(false)
+const importMethodDialog = ref(false)
 const type = ref<'lx' | 'cr'>('cr')
+const importMethod = ref<'local' | 'online'>('local')
+const onlineUrl = ref('')
 
 // 日志相关状态
 const logDialogVisible = ref(false)
@@ -327,14 +370,52 @@ async function getPlugins() {
   }
 }
 
-async function addPlug() {
-  try {
-    // 调用主进程的文件选择和添加插件API
-    plugTypeDialog.value = false
-    console.log(type.value)
-    const result = (await window.api.plugins.selectAndAddPlugin(type.value)) as ApiResult
+// 显示导入方式选择对话框
+function showImportMethodDialog() {
+  plugTypeDialog.value = false
+  importMethodDialog.value = true
+}
 
-    // 检查用户是否取消了文件选择
+// 返回到插件类型选择
+function backToTypeSelection() {
+  importMethodDialog.value = false
+  plugTypeDialog.value = true
+  onlineUrl.value = '' // 清空在线地址
+}
+
+// 处理导入操作
+async function handleImport() {
+  try {
+    importMethodDialog.value = false
+    let result: ApiResult
+
+    if (importMethod.value === 'local') {
+      // 本地导入：调用文件选择API
+      result = (await window.api.plugins.selectAndAddPlugin(type.value)) as ApiResult
+    } else {
+      // 在线导入：调用在线下载API
+      if (!onlineUrl.value.trim()) {
+        MessagePlugin.warning('请输入插件下载地址')
+        importMethodDialog.value = true
+        return
+      }
+
+      // 验证URL格式
+      try {
+        new URL(onlineUrl.value)
+      } catch {
+        MessagePlugin.warning('请输入有效的URL地址')
+        importMethodDialog.value = true
+        return
+      }
+
+      result = (await window.api.plugins.downloadAndAddPlugin(
+        onlineUrl.value,
+        type.value
+      )) as ApiResult
+    }
+
+    // 检查用户是否取消了操作
     if (result && result.canceled) {
       return
     }
@@ -353,6 +434,9 @@ async function addPlug() {
         MessagePlugin.success('插件安装成功！')
       }
     }
+
+    // 重置状态
+    onlineUrl.value = ''
   } catch (err: any) {
     console.error('安装插件失败:', err)
     MessagePlugin.error(`安装插件失败: ${err.message || '未知错误'}`)
@@ -513,35 +597,62 @@ onMounted(async () => {
 .page {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  // height: 100%;
+  // max-height: 100vh;
+  background: var(--plugins-bg);
+  color: var(--plugins-text-primary);
+  overflow: hidden;
+
+  h2 {
+    font-weight: 600;
+    color: var(--plugins-text-primary);
+    margin: 0 0 16px 0;
+  }
 }
+
 .header {
   -webkit-app-region: drag;
   display: flex;
   align-items: center;
-  background-color: #fff;
+  background-color: var(--plugins-header-bg);
   padding: 1.5rem;
   position: sticky;
   z-index: 1000;
   top: 0;
   left: 0;
   right: 0;
+  border-bottom: 1px solid var(--plugins-border);
+  flex-shrink: 0;
 }
 
 .plugins-container {
   flex: 1;
-  padding: 20px;
+  padding: 24px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  overflow: hidden;
   min-height: 0;
+  background: var(--plugins-bg);
+}
+
+.plugin-actions-hearder {
+  margin-bottom: 24px;
+  flex-shrink: 0;
+
+  h2 {
+    margin-bottom: 16px;
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--plugins-text-primary);
+  }
 }
 
 .plugin-actions {
   display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
+
+  gap: 12px;
+  margin-top: 16px;
 }
 
 .loading {
@@ -549,17 +660,25 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 0;
+  padding: 60px 0;
+  background: var(--plugins-container-bg);
+  border-radius: 12px;
+  margin: 20px 0;
 }
 
 .spinner {
-  width: 30px;
-  height: 30px;
-  border: 3px solid rgba(0, 0, 0, 0.1);
+  width: 32px;
+  height: 32px;
+  border: 3px solid var(--plugins-border);
   border-radius: 50%;
-  border-top-color: var(--color-primary, #007bff);
+  border-top-color: var(--plugins-loading-spinner);
   animation: spin 1s ease-in-out infinite;
-  margin-bottom: 10px;
+  margin-bottom: 16px;
+}
+
+.loading span {
+  color: var(--plugins-text-secondary);
+  font-size: 14px;
 }
 
 .error-state {
@@ -567,15 +686,26 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 0;
-  color: #666;
+  padding: 60px 0;
+  color: var(--plugins-text-secondary);
+  background: var(--plugins-container-bg);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.error-state p {
+  color: var(--plugins-text-primary);
+  font-size: 16px;
+  margin: 8px 0;
 }
 
 .error-message {
-  color: #dc3545;
-  margin-bottom: 15px;
+  color: var(--plugins-error-color);
+  margin-bottom: 20px;
   text-align: center;
   max-width: 80%;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 @keyframes spin {
@@ -589,103 +719,167 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 40px 0;
-  color: #666;
+  padding: 60px 0;
+  color: var(--plugins-text-secondary);
+  background: var(--plugins-container-bg);
+  border-radius: 12px;
+  margin: 20px 0;
+}
+
+.empty-state p {
+  color: var(--plugins-text-primary);
+  font-size: 16px;
+  margin: 8px 0;
 }
 
 .hint {
-  font-size: 0.9em;
-  color: #999;
+  font-size: 14px;
+  color: var(--plugins-text-muted);
+  line-height: 1.5;
 }
 
 .plugin-list {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 16px;
   flex: 1;
-  overflow-y: auto;
+  // overflow-y: auto;
+  // overflow-x: hidden;
   min-height: 0;
+  max-height: 100%;
+
+  /* 自定义滚动条 */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--plugins-bg);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--plugins-border);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--plugins-text-muted);
+    }
+  }
 }
 
 .plugin-item {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  border-radius: 8px;
-  background-color: var(--color-background-soft, #f8f9fa);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  align-items: flex-start;
+  padding: 20px;
+  border-radius: 12px;
+  background-color: var(--plugins-card-bg);
+  box-shadow: var(--plugins-card-shadow);
   transition: all 0.3s ease;
   border: 2px solid transparent;
+  position: relative;
+
+  // &:hover {
+  //   box-shadow: var(--plugins-card-shadow-hover);
+  //   transform: translateY(-2px);
+  // }
 }
 
 .plugin-item.selected {
-  background-color: #e8f5e8;
-  border: 2px solid #28a745;
+  background-color: var(--plugins-card-selected-bg);
+  border: 2px solid var(--plugins-card-selected-border);
+
+  // &::before {
+  //   content: '';
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   right: 0;
+  //   height: 3px;
+  //   background: linear-gradient(90deg, var(--plugins-card-selected-border), var(--td-brand-color));
+  //   border-radius: 12px 12px 0 0;
+  // }
 }
 
 .plugin-info {
   flex: 1;
+  margin-right: 20px;
 }
 
 .plugin-info h3 {
-  margin: 0 0 5px 0;
-  font-size: 1.1em;
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
+  color: var(--plugins-text-primary);
+  line-height: 1.4;
 }
 
 .version {
-  font-size: 0.8em;
-  color: #666;
-  font-weight: normal;
+  font-size: 12px;
+  color: var(--plugins-text-muted);
+  font-weight: 500;
+  background: var(--plugins-border);
+  padding: 2px 8px;
+  border-radius: 6px;
 }
 
 .current-tag {
-  background-color: var(--td-brand-color-5);
+  background: linear-gradient(135deg, var(--td-brand-color-5), var(--td-brand-color-6));
   color: white;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 0.75em;
-  font-weight: normal;
+  padding: 4px 12px;
+  border-radius: 16px;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: 0 2px 4px rgba(0, 167, 77, 0.2);
 }
 
 .author {
-  margin: 0 0 5px 0;
-  font-size: 0.9em;
-  color: #666;
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: var(--plugins-text-secondary);
 }
 
 .description {
-  margin: 0 0 8px 0;
-  font-size: 0.9em;
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  color: var(--plugins-text-secondary);
+  line-height: 1.5;
+  max-width: 500px;
 }
 
 .plugin-sources {
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
+  gap: 8px;
   align-items: center;
-  margin-top: 5px;
+  margin-top: 8px;
 }
 
 .source-label {
-  font-size: 0.85em;
-  color: #666;
+  font-size: 13px;
+  color: var(--plugins-text-muted);
+  font-weight: 500;
 }
 
 .source-tag {
-  background-color: var(--color-primary, #007bff);
+  background: linear-gradient(135deg, var(--td-brand-color-4), var(--td-brand-color-5));
   color: white;
-  padding: 2px 8px;
+  padding: 4px 10px;
   border-radius: 12px;
-  font-size: 0.8em;
+  font-size: 12px;
+  font-weight: 500;
+  box-shadow: 0 1px 3px rgba(0, 167, 77, 0.2);
 }
 
 .plugin-actions {
   display: flex;
+  flex-direction: column;
   gap: 8px;
+  min-width: 120px;
 }
 
 /* 日志弹窗样式 */
@@ -693,15 +887,16 @@ onMounted(async () => {
   height: 80vh;
 
   .t-dialog {
-    background: #1e1e1e;
+    background: var(--plugins-console-bg);
     border-radius: 12px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    box-shadow: var(--plugins-dialog-shadow, 0 20px 60px rgba(0, 0, 0, 0.4));
     overflow: hidden;
+    border: 1px solid var(--plugins-console-border);
   }
 
   .t-dialog__header {
-    background: #2d2d2d;
-    border-bottom: 1px solid #404040;
+    background: var(--plugins-console-header-bg);
+    border-bottom: 1px solid var(--plugins-console-border);
     padding: 0;
     border-radius: 12px 12px 0 0;
     overflow: hidden;
@@ -709,12 +904,11 @@ onMounted(async () => {
 
   .t-dialog__body {
     padding: 0;
-    background: #1e1e1e;
-    border-left: 2px solid #272727;
-    border-right: 2px solid #272727;
-    border-bottom: 2px solid #272727;
+    background: var(--plugins-console-bg);
+    border-left: 2px solid var(--plugins-console-border);
+    border-right: 2px solid var(--plugins-console-border);
+    border-bottom: 2px solid var(--plugins-console-border);
     border-radius: 0 0 12px 12px;
-    // max-height: 600px;
     overflow: hidden;
   }
 }
@@ -723,7 +917,10 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   padding: 12px 20px;
-  background: linear-gradient(135deg, #2d2d2d 0%, #1e1e1e 100%);
+  background: var(
+    --plugins-dialog-header-bg,
+    linear-gradient(135deg, var(--plugins-console-header-bg) 0%, var(--plugins-console-bg) 100%)
+  );
   min-height: 48px;
   width: 100%;
 
@@ -731,14 +928,14 @@ onMounted(async () => {
     display: flex;
     align-items: center;
     gap: 8px;
-    color: #ffffff;
+    color: var(--plugins-console-text);
     font-weight: 600;
     font-size: 14px;
     flex: 1;
 
     .iconfont {
       font-size: 16px;
-      color: #00d4aa;
+      color: var(--plugins-console-prompt);
     }
   }
 
@@ -749,15 +946,15 @@ onMounted(async () => {
 
     :deep(.t-button) {
       background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      color: #ffffff;
+      border: 1px solid var(--plugins-console-border);
+      color: var(--plugins-console-text);
       font-size: 12px;
       padding: 4px 12px;
       height: auto;
 
       &:hover {
         background: rgba(255, 255, 255, 0.2) !important;
-        border-color: rgba(255, 255, 255, 0.3);
+        border-color: var(--plugins-console-prompt);
       }
 
       .t-icon {
@@ -779,7 +976,7 @@ onMounted(async () => {
       transition: all 0.2s ease;
 
       &.close {
-        background: #ff5f57;
+        background: var(--plugins-mac-close);
 
         &:hover {
           background: #ff3b30;
@@ -787,7 +984,7 @@ onMounted(async () => {
       }
 
       &.minimize {
-        background: #ffbd2e;
+        background: var(--plugins-mac-minimize);
 
         &:hover {
           background: #ff9500;
@@ -795,7 +992,7 @@ onMounted(async () => {
       }
 
       &.maximize {
-        background: #28ca42;
+        background: var(--plugins-mac-maximize);
 
         &:hover {
           background: #30d158;
@@ -806,21 +1003,20 @@ onMounted(async () => {
 }
 
 .console-container {
-  background: #1e1e1e;
-  color: #ffffff;
+  background: var(--plugins-console-bg);
+  color: var(--plugins-console-text);
   font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
   font-size: 13px;
   line-height: 1.4;
   height: calc(80vh - 64px - 48px);
-  // max-height: 500px;
   min-height: 300px;
   display: flex;
   flex-direction: column;
 }
 
 .console-header {
-  background: #2d2d2d;
-  border-bottom: 1px solid #404040;
+  background: var(--plugins-console-header-bg);
+  border-bottom: 1px solid var(--plugins-console-border);
   padding: 8px 16px;
   flex-shrink: 0;
 
@@ -831,16 +1027,16 @@ onMounted(async () => {
     font-size: 12px;
 
     .console-prompt {
-      color: var(--td-brand-color-5);
+      color: var(--plugins-console-prompt);
       font-weight: bold;
     }
 
     .console-path {
-      color: #8a8a8a;
+      color: var(--plugins-console-path);
     }
 
     .console-time {
-      color: #666666;
+      color: var(--plugins-console-time);
       margin-left: auto;
     }
   }
@@ -849,9 +1045,9 @@ onMounted(async () => {
 .console-content {
   flex: 1;
   overflow-y: auto;
-  scrollbar-color: #555555 #2d2d2d;
+  scrollbar-color: var(--plugins-console-scrollbar-thumb) var(--plugins-console-scrollbar-track);
   padding: 16px;
-  background: #1e1e1e;
+  background: var(--plugins-console-bg);
   position: relative;
 
   &.loading {
@@ -866,15 +1062,15 @@ onMounted(async () => {
   }
 
   &::-webkit-scrollbar-track {
-    background: #2d2d2d;
+    background: var(--plugins-console-scrollbar-track);
   }
 
   &::-webkit-scrollbar-thumb {
-    background: #555555;
+    background: var(--plugins-console-scrollbar-thumb);
     border-radius: 4px;
 
     &:hover {
-      background: #666666;
+      background: var(--plugins-console-scrollbar-thumb-hover);
     }
   }
 }
@@ -884,13 +1080,13 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   gap: 12px;
-  color: #8a8a8a;
+  color: var(--plugins-console-path);
 
   .loading-spinner {
     width: 20px;
     height: 20px;
-    border: 2px solid #404040;
-    border-top: 2px solid #00d4aa;
+    border: 2px solid var(--plugins-console-border);
+    border-top: 2px solid var(--plugins-console-prompt);
     border-radius: 50%;
     animation: spin 1s linear infinite;
   }
@@ -900,11 +1096,11 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 8px;
-  color: #ff6b6b;
+  color: var(--plugins-log-error);
   padding: 12px;
   background: rgba(255, 107, 107, 0.1);
   border-radius: 6px;
-  border-left: 4px solid #ff6b6b;
+  border-left: 4px solid var(--plugins-log-error);
 
   .error-icon {
     font-size: 16px;
@@ -917,7 +1113,7 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
   gap: 8px;
-  color: #8a8a8a;
+  color: var(--plugins-console-path);
   height: 200px;
 
   .empty-icon {
@@ -939,7 +1135,7 @@ onMounted(async () => {
     }
 
     .log-timestamp {
-      color: #666666;
+      color: var(--plugins-console-time);
       font-size: 11px;
       width: 80px;
       text-align: center;
@@ -952,52 +1148,53 @@ onMounted(async () => {
       flex: 1;
       word-break: break-all;
       white-space: pre-wrap;
+      user-select: text !important;
     }
 
     /* 不同日志级别的颜色 */
     &.log-error {
       .log-content {
-        color: #ff6b6b;
+        color: var(--plugins-log-error);
       }
 
       .log-timestamp {
-        color: #ff6b6b;
+        color: var(--plugins-log-error);
       }
     }
 
     &.log-warn {
       .log-content {
-        color: #ffd93d;
+        color: var(--plugins-log-warn);
       }
 
       .log-timestamp {
-        color: #ffd93d;
+        color: var(--plugins-log-warn);
       }
     }
 
     &.log-info {
       .log-content {
-        color: #74b9ff;
+        color: var(--plugins-log-info);
       }
 
       .log-timestamp {
-        color: #74b9ff;
+        color: var(--plugins-log-info);
       }
     }
 
     &.log-debug {
       .log-content {
-        color: #a29bfe;
+        color: var(--plugins-log-debug);
       }
 
       .log-timestamp {
-        color: #a29bfe;
+        color: var(--plugins-log-debug);
       }
     }
 
     &.log-default {
       .log-content {
-        color: #ffffff;
+        color: var(--plugins-console-text);
       }
     }
   }
@@ -1013,8 +1210,51 @@ onMounted(async () => {
   }
 }
 
+/* 导入方式选择样式 */
+.import-method-container {
+  padding: 16px 0;
+}
+
+.online-input-container {
+  margin-top: 16px;
+}
+
+.hint-text {
+  font-size: 13px;
+  color: var(--plugins-text-muted);
+  margin-top: 8px;
+  line-height: 1.5;
+}
+
+.local-hint-container {
+  margin-top: 16px;
+  padding: 12px;
+  background: var(--plugins-border);
+  border-radius: 8px;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
+  .plugins-container {
+    padding: 16px;
+  }
+
+  .plugin-item {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+
+    .plugin-info {
+      margin-right: 0;
+    }
+
+    .plugin-actions {
+      flex-direction: row;
+      justify-content: flex-end;
+      min-width: auto;
+    }
+  }
+
   :deep(.log-dialog) {
     .t-dialog {
       width: 95% !important;

src/renderer/src/components/ThemeSelector.vue

@@ -1,54 +1,35 @@
+<!--
+  主题选择器组件 - 支持暗色模式切换
+-->
 <template>
   <div class="theme-selector">
-    <div class="theme-selector-trigger" @click="toggleDropdown">
-      <div class="current-theme">
-        <div class="theme-color-preview" :style="{ backgroundColor: currentThemeColor }"></div>
-        <span class="theme-name">{{ currentThemeName }}</span>
-      </div>
-      <svg
-        class="dropdown-icon"
-        :class="{ rotated: isDropdownOpen }"
-        viewBox="0 0 24 24"
-        width="16"
-        height="16"
+    <div class="theme-options">
+      <div
+        v-for="theme in themes"
+        :key="theme.name"
+        class="theme-option"
+        :class="{ active: currentTheme === theme.name }"
+        @click="selectTheme(theme.name)"
       >
-        <path d="M7 10l5 5 5-5z" fill="currentColor" />
-      </svg>
+        <div class="theme-preview" :style="{ backgroundColor: theme.color }"></div>
+        <span class="theme-label">{{ theme.label }}</span>
+      </div>
     </div>
 
-    <transition name="dropdown">
-      <div v-if="isDropdownOpen" class="theme-dropdown">
-        <div
-          v-for="theme in themes"
-          :key="theme.name"
-          class="theme-option"
-          :class="{ active: currentTheme === theme.name }"
-          @click="selectTheme(theme.name)"
-        >
-          <div class="theme-color-dot" :style="{ backgroundColor: theme.color }"></div>
-          <span class="theme-label">{{ theme.label }}</span>
-          <svg
-            v-if="currentTheme === theme.name"
-            class="check-icon"
-            viewBox="0 0 24 24"
-            width="16"
-            height="16"
-          >
-            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor" />
-          </svg>
-        </div>
-      </div>
-    </transition>
+    <div class="dark-mode-toggle">
+      <label class="toggle-switch">
+        <input type="checkbox" :checked="isDarkMode" @change="toggleDarkMode" />
+        <span class="slider"></span>
+        <span class="toggle-label">暗色模式</span>
+      </label>
+    </div>
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
 
-const isDropdownOpen = ref(false)
-const currentTheme = ref('default')
-
-// 基于现有主题文件的配置
+// 主题配置
 const themes = [
   { name: 'default', label: '默认', color: '#2ba55b' },
   { name: 'pink', label: '粉色', color: '#fc5e7e' },
@@ -57,209 +38,206 @@ const themes = [
   { name: 'orange', label: '橙色', color: '#fb9458' }
 ]
 
-const loadSavedTheme = () => {
-  const savedTheme = localStorage.getItem('selected-theme')
-  if (savedTheme && themes.some((t) => t.name === savedTheme)) {
-    currentTheme.value = savedTheme
-    applyTheme(savedTheme)
-  }
-}
+const currentTheme = ref('default')
+const isDarkMode = ref(false)
 
-const applyTheme = (themeName) => {
+// 应用主题
+const applyTheme = (themeName: string, darkMode: boolean = false) => {
   const documentElement = document.documentElement
 
-  // 移除之前的主题
+  // 移除之前的主题属性
   documentElement.removeAttribute('theme-mode')
+  documentElement.removeAttribute('data-theme')
 
-  // 应用新主题（如果不是默认主题）
+  // 应用主题色彩
   if (themeName !== 'default') {
     documentElement.setAttribute('theme-mode', themeName)
   }
 
-  // 保存到本地存储
-  localStorage.setItem('selected-theme', themeName)
-}
-
-const currentThemeColor = computed(() => {
-  const theme = themes.find((t) => t.name === currentTheme.value)
-  return theme ? theme.color : '#2ba55b'
-})
-
-const currentThemeName = computed(() => {
-  const theme = themes.find((t) => t.name === currentTheme.value)
-  return theme ? theme.label : '默认'
-})
-
-const toggleDropdown = () => {
-  isDropdownOpen.value = !isDropdownOpen.value
-}
-
-const selectTheme = (themeName) => {
-  if (themeName === currentTheme.value) {
-    isDropdownOpen.value = false
-    return
+  // 应用明暗模式
+  if (darkMode) {
+    documentElement.setAttribute('data-theme', 'dark')
+  } else {
+    documentElement.setAttribute('data-theme', 'light')
   }
 
-  currentTheme.value = themeName
-  applyTheme(themeName)
-  isDropdownOpen.value = false
+  // 保存到本地存储
+  localStorage.setItem('selected-theme', themeName)
+  localStorage.setItem('dark-mode', darkMode.toString())
+
+  // 通知全局（App.vue）同步 Naive UI 主题
+  window.dispatchEvent(new CustomEvent('theme-changed'))
 }
 
-const handleClickOutside = (event) => {
-  const themeSelector = event.target.closest('.theme-selector')
-  if (!themeSelector) {
-    isDropdownOpen.value = false
+// 选择主题
+const selectTheme = (themeName: string) => {
+  currentTheme.value = themeName
+  applyTheme(themeName, isDarkMode.value)
+}
+
+// 切换暗色模式
+const toggleDarkMode = () => {
+  isDarkMode.value = !isDarkMode.value
+  applyTheme(currentTheme.value, isDarkMode.value)
+}
+
+// 检测系统主题偏好
+const detectSystemTheme = () => {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return true
+  }
+  return false
+}
+
+// 加载保存的设置
+const loadSavedSettings = () => {
+  const savedTheme = localStorage.getItem('selected-theme')
+  const savedDarkMode = localStorage.getItem('dark-mode')
+
+  if (savedTheme && themes.some((t) => t.name === savedTheme)) {
+    currentTheme.value = savedTheme
+  }
+
+  if (savedDarkMode !== null) {
+    isDarkMode.value = savedDarkMode === 'true'
+  } else {
+    // 如果没有保存的设置，检测系统偏好
+    isDarkMode.value = detectSystemTheme()
+  }
+
+  applyTheme(currentTheme.value, isDarkMode.value)
+}
+
+// 监听系统主题变化
+const setupSystemThemeListener = () => {
+  if (window.matchMedia) {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    mediaQuery.addEventListener('change', (e) => {
+      const savedDarkMode = localStorage.getItem('dark-mode')
+      // 如果用户没有手动设置暗色模式，则跟随系统主题
+      if (savedDarkMode === null) {
+        isDarkMode.value = e.matches
+        applyTheme(currentTheme.value, isDarkMode.value)
+      }
+    })
   }
 }
 
 onMounted(() => {
-  loadSavedTheme()
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
+  setupSystemThemeListener()
+  loadSavedSettings()
 })
 </script>
 
 <style scoped>
 .theme-selector {
-  position: relative;
-  display: inline-block;
-  width: 200px;
+  padding: 16px;
+  background: var(--td-bg-color-container);
+  border-radius: var(--td-radius-medium);
+  border: 1px solid var(--td-border-level-1-color);
 }
 
-.theme-selector-trigger {
+.theme-options {
   display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: var(--td-bg-color-container, #ffffff);
-  border: 1px solid var(--td-component-border, #e2e8f0);
-  border-radius: var(--td-radius-medium, 6px);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 120px;
-}
-
-.theme-selector-trigger:hover {
-  background: var(--td-bg-color-container-hover, #f8fafc);
-  border-color: var(--td-brand-color-hover, #cbd5e1);
-}
-
-.current-theme {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex: 1;
-}
-
-.theme-color-preview {
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2px solid var(--td-bg-color-container, #ffffff);
-  box-shadow: 0 0 0 1px var(--td-component-border, #e2e8f0);
-}
-
-.theme-name {
-  font-size: 14px;
-  color: var(--td-text-color-primary, #1e293b);
-  font-weight: 500;
-}
-
-.dropdown-icon {
-  color: var(--td-text-color-secondary, #64748b);
-  transition: transform 0.2s ease;
-}
-
-.dropdown-icon.rotated {
-  transform: rotate(180deg);
-}
-
-.theme-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: 4px;
-  background: var(--td-bg-color-container, #ffffff);
-  border: 1px solid var(--td-component-border, #e2e8f0);
-  border-radius: var(--td-radius-medium, 6px);
-  box-shadow: var(
-    --td-shadow-2,
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06)
-  );
-  z-index: 1000;
-  overflow: hidden;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
 }
 
 .theme-option {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
+  gap: 8px;
+  padding: 12px;
+  border-radius: var(--td-radius-medium);
   cursor: pointer;
-  transition: background-color 0.2s ease;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
 }
 
 .theme-option:hover {
-  background: var(--td-bg-color-container-hover, #f8fafc);
+  background: var(--td-bg-color-container-hover);
 }
 
 .theme-option.active {
-  background: var(--td-brand-color-light, #eff6ff);
-  color: var(--td-text-color-primary, #1e293b);
+  border-color: var(--td-brand-color);
+  background: var(--td-brand-color-light);
 }
 
-.theme-color-dot {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid var(--td-bg-color-container, #ffffff);
-  box-shadow: 0 0 0 1px var(--td-component-border, #e2e8f0);
+.theme-preview {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--td-radius-circle);
+  border: 2px solid var(--td-border-level-1-color);
 }
 
 .theme-label {
-  flex: 1;
-  font-size: 14px;
-  color: var(--td-text-color-primary, #1e293b);
+  font-size: var(--td-font-size-body-small);
+  color: var(--td-text-color-primary);
+  font-weight: 500;
 }
 
-.check-icon {
-  color: var(--td-brand-color, #3b82f6);
+.dark-mode-toggle {
+  padding-top: 16px;
+  border-top: 1px solid var(--td-border-level-1-color);
 }
 
-/* 下拉动画 */
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s ease;
+.toggle-switch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
 }
 
-.dropdown-enter-from {
-  opacity: 0;
-  transform: translateY(-8px) scale(0.95);
+.toggle-switch input {
+  display: none;
 }
 
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-8px) scale(0.95);
+.slider {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: var(--td-bg-color-component);
+  border-radius: 12px;
+  transition: background-color 0.2s ease;
+  border: 1px solid var(--td-border-level-1-color);
 }
 
-/* 响应式设计 */
-@media (max-width: 640px) {
-  .theme-selector-trigger {
-    min-width: 100px;
-    padding: 6px 10px;
-  }
+.slider::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: var(--td-bg-color-container);
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+  box-shadow: var(--td-shadow-1);
+}
 
-  .theme-name {
-    font-size: 13px;
-  }
+.toggle-switch input:checked + .slider {
+  background: var(--td-brand-color);
+}
 
-  .theme-option {
-    padding: 10px 14px;
-  }
+.toggle-switch input:checked + .slider::before {
+  transform: translateX(20px);
+}
+
+.toggle-label {
+  font-size: var(--td-font-size-body-medium);
+  color: var(--td-text-color-primary);
+  font-weight: 500;
+}
+
+/* 暗色模式下的特殊样式 */
+:root[theme-mode='dark'] .theme-selector {
+  background: var(--td-bg-color-container);
+  border-color: var(--td-border-level-1-color);
+}
+
+:root[theme-mode='dark'] .theme-preview {
+  border-color: var(--td-border-level-2-color);
 }
 </style>

src/renderer/src/components/TitleBarControls.vue

@@ -9,7 +9,7 @@ const props = withDefaults(defineProps<Props>(), {
   showSettings: true,
   showBack: false,
   title: '',
-  color: 'black'
+  color: 'var(--titlebar-btn-text-color)'
 })
 const Store = LocalUserDetailStore()
 const { userInfo } = storeToRefs(Store)
@@ -202,7 +202,7 @@ const handleBack = (): void => {
     }
 
     &:hover .iconfont {
-      color: #111827;
+      color: v-bind(color) !important;
     }
   }
 
@@ -222,12 +222,20 @@ const handleBack = (): void => {
         -webkit-app-region: no-drag;
         margin-right: 0.5rem;
         &:hover {
-          background-color: #f3f4f6;
+          background-color: var(--titlebar-btn-hover-bg);
         }
       }
     }
     .title-box {
       flex: 1;
+
+      p {
+        margin: 0;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: var(--settings-text-primary, v-bind(color));
+        line-height: 1.2;
+      }
     }
   }
 
@@ -235,7 +243,7 @@ const handleBack = (): void => {
     margin-right: 0.5rem;
 
     &:hover {
-      background-color: #f3f4f6;
+      background-color: var(--titlebar-btn-hover-bg);
     }
   }
 
@@ -251,23 +259,23 @@ const handleBack = (): void => {
     }
 
     &:hover {
-      background-color: #f3f4f6;
+      background-color: var(--titlebar-btn-hover-bg);
     }
   }
 
   .minimize-btn:hover {
-    background-color: #f3f4f6;
+    background-color: var(--titlebar-btn-hover-bg);
   }
 
   .maximize-btn:hover {
-    background-color: #f3f4f6;
+    background-color: var(--titlebar-btn-hover-bg);
   }
 
   .close-btn:hover {
-    background-color: #fee2e2;
+    background-color: var(--titlebar-close-hover-bg);
 
     .iconfont {
-      color: #dc2626;
+      color: v-bind(color) !important;
     }
   }
 }

src/renderer/src/components/Versions.vue

@@ -11,3 +11,53 @@ const versions = reactive({ ...window.electron.process.versions })
     <li class="node-version">Node v{{ versions.node }}</li>
   </ul>
 </template>
+
+<style lang="scss" scoped>
+.versions {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: var(--settings-tech-item-bg, #f8fafc);
+    border-radius: 0.5rem;
+    border: 1px solid var(--settings-tech-item-border, #e2e8f0);
+    color: var(--settings-text-primary, #1e293b);
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: var(--settings-nav-hover-bg, #f1f5f9);
+    }
+  }
+
+  .electron-version {
+    &::before {
+      content: '⚡';
+      margin-right: 0.5rem;
+    }
+  }
+
+  .chrome-version {
+    &::before {
+      content: '🌐';
+      margin-right: 0.5rem;
+    }
+  }
+
+  .node-version {
+    &::before {
+      content: '🟢';
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

src/renderer/src/components/layout/HomeLayout.vue

@@ -0,0 +1,647 @@
+<script setup lang="ts">
+import TitleBarControls from '@renderer/components/TitleBarControls.vue'
+import SearchSuggest from '@renderer/components/search/searchSuggest.vue'
+import { SearchIcon } from 'tdesign-icons-vue-next'
+import { onMounted, ref, watchEffect, computed } from 'vue'
+import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
+import { useRouter } from 'vue-router'
+import { useSearchStore } from '@renderer/store'
+
+onMounted(() => {
+  const LocalUserDetail = LocalUserDetailStore()
+  watchEffect(() => {
+    source.value = sourceicon[LocalUserDetail.userSource.source || 'wy']
+  })
+})
+
+const sourceicon = {
+  kg: 'kugouyinle',
+  wy: 'wangyiyun',
+  mg: 'mg',
+  tx: 'tx',
+  kw: 'kw'
+}
+const source = ref('kugouyinle')
+interface MenuItem {
+  name: string
+  icon: string
+  path: string
+}
+const menuList: MenuItem[] = [
+  {
+    name: '发现',
+    icon: 'icon-faxian',
+    path: '/home/find'
+  },
+  {
+    name: '本地',
+    icon: 'icon-music',
+    path: '/home/local'
+  },
+  {
+    name: '最近',
+    icon: 'icon-shijian',
+    path: '/home/recent'
+  }
+]
+const menuActive = ref(0)
+const router = useRouter()
+const source_list_show = ref(false)
+
+// 检查是否有插件数据
+const hasPluginData = computed(() => {
+  const LocalUserDetail = LocalUserDetailStore()
+  return !!(
+    LocalUserDetail.userInfo.pluginId &&
+    LocalUserDetail.userInfo.supportedSources &&
+    Object.keys(LocalUserDetail.userInfo.supportedSources).length > 0
+  )
+})
+
+// 音源名称映射
+const sourceNames = {
+  wy: '网易云音乐',
+  kg: '酷狗音乐',
+  mg: '咪咕音乐',
+  tx: 'QQ音乐',
+  kw: '酷我音乐'
+}
+
+// 动态音源列表数据，基于supportedSources
+const sourceList = computed(() => {
+  const LocalUserDetail = LocalUserDetailStore()
+  const supportedSources = LocalUserDetail.userInfo.supportedSources
+
+  if (!supportedSources) return []
+
+  return Object.keys(supportedSources).map((key) => ({
+    key,
+    name: sourceNames[key] || key,
+    icon: sourceicon[key] || key
+  }))
+})
+
+// 切换音源选择器显示状态
+const toggleSourceList = () => {
+  source_list_show.value = !source_list_show.value
+}
+
+// 选择音源
+const selectSource = (sourceKey: string) => {
+  if (!hasPluginData.value) return
+
+  const LocalUserDetail = LocalUserDetailStore()
+  LocalUserDetail.userInfo.selectSources = sourceKey
+
+  // 自动选择该音源的最高音质
+  const sourceDetail = LocalUserDetail.userInfo.supportedSources?.[sourceKey]
+  if (sourceDetail && sourceDetail.qualitys && sourceDetail.qualitys.length > 0) {
+    const currentQuality = LocalUserDetail.userInfo.selectQuality
+    if (!currentQuality || !sourceDetail.qualitys.includes(currentQuality)) {
+      LocalUserDetail.userInfo.selectQuality =
+        sourceDetail.qualitys[sourceDetail.qualitys.length - 1]
+    }
+  }
+
+  // 更新音源图标
+  source.value = sourceicon[sourceKey]
+  source_list_show.value = false
+}
+
+// 点击遮罩关闭音源选择器
+const handleMaskClick = () => {
+  source_list_show.value = false
+}
+
+const handleClick = (index: number): void => {
+  menuActive.value = index
+  router.push(menuList[index].path)
+}
+
+// 导航历史前进后退功能
+const goBack = (): void => {
+  router.go(-1)
+}
+
+const goForward = (): void => {
+  router.go(1)
+}
+
+// 搜索相关
+const keyword = ref('')
+const SearchStore = useSearchStore()
+const inputRef = ref<any>(null)
+
+// 搜索类型：1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单
+// const searchType = ref(1)
+
+// 处理搜索事件
+const handleSearch = async () => {
+  if (!SearchStore.getValue.trim()) return
+  // 重新设置搜索关键字
+  try {
+    router.push({
+      path: '/home/search'
+    })
+  } catch (error) {
+    console.error('搜索失败:', error)
+  }
+}
+
+// 处理按键事件，按下回车键时触发搜索
+const handleKeyDown = () => {
+  handleSearch()
+  // 回车后取消输入框焦点
+  inputRef.value?.blur?.()
+}
+
+// 监听输入变化，更新SearchStore
+watchEffect(() => {
+  SearchStore.setValue(keyword.value)
+})
+
+// 处理搜索建议选择
+const handleSuggestionSelect = (suggestion: any, _type: any) => {
+  console.log(111)
+
+  keyword.value = suggestion
+  handleSearch()
+}
+</script>
+
+<template>
+  <t-layout class="home-container">
+    <!-- sidebar -->
+    <t-aside class="sidebar">
+      <div class="sidebar-content">
+        <div class="logo-section">
+          <div class="logo-icon">
+            <i class="iconfont icon-music"></i>
+          </div>
+          <p class="app-title">
+            <span style="font-weight: 800">Ceru Music</span>
+          </p>
+        </div>
+
+        <nav class="nav-section">
+          <t-button
+            v-for="(item, index) in menuList"
+            :key="index"
+            :variant="menuActive == index ? 'base' : 'text'"
+            :class="menuActive == index ? 'nav-button active' : 'nav-button'"
+            block
+            @click="handleClick(index)"
+          >
+            <i :class="`iconfont ${item.icon} nav-icon`"></i>
+            {{ item.name }}
+          </t-button>
+        </nav>
+      </div>
+    </t-aside>
+
+    <t-layout style="flex: 1">
+      <t-content>
+        <div class="content">
+          <!-- Header -->
+          <div class="header">
+            <t-button shape="circle" theme="default" class="nav-btn" @click="goBack">
+              <i class="iconfont icon-xiangzuo"></i>
+            </t-button>
+            <t-button shape="circle" theme="default" class="nav-btn" @click="goForward">
+              <i class="iconfont icon-xiangyou"></i>
+            </t-button>
+
+            <div class="search-container">
+              <div class="search-input">
+                <div class="source-selector" @click="toggleSourceList">
+                  <svg class="icon" aria-hidden="true">
+                    <use :xlink:href="`#icon-${source}`"></use>
+                  </svg>
+                </div>
+                <!-- 透明遮罩 -->
+                <transition name="mask">
+                  <div v-if="source_list_show" class="source-mask" @click="handleMaskClick"></div>
+                </transition>
+                <!-- 音源选择列表 -->
+                <transition name="source">
+                  <div v-if="source_list_show" class="source-list">
+                    <div class="items">
+                      <div
+                        v-for="item in sourceList"
+                        :key="item.key"
+                        class="source-item"
+                        :class="{ active: source === item.icon }"
+                        @click="selectSource(item.key)"
+                      >
+                        <svg class="source-icon" aria-hidden="true">
+                          <use :xlink:href="`#icon-${item.icon}`"></use>
+                        </svg>
+                        <span class="source-name">{{ item.name }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </transition>
+                <t-input
+                  ref="inputRef"
+                  v-model="keyword"
+                  placeholder="搜索音乐、歌手"
+                  style="width: 100%"
+                  @enter="handleKeyDown"
+                  @focus="SearchStore.setFocus(true)"
+                  @blur="SearchStore.setFocus(false)"
+                >
+                  <template #suffix>
+                    <t-button
+                      theme="primary"
+                      variant="text"
+                      shape="circle"
+                      style="display: flex; align-items: center; justify-content: center"
+                      @click="handleSearch"
+                    >
+                      <SearchIcon style="font-size: 16px; color: var(--td-text-color-primary)" />
+                    </t-button>
+                  </template>
+                </t-input>
+                <SearchSuggest @to-search="handleSuggestionSelect" />
+              </div>
+
+              <TitleBarControls></TitleBarControls>
+            </div>
+          </div>
+
+          <div class="mainContent">
+            <slot name="body"></slot>
+          </div>
+        </div>
+      </t-content>
+    </t-layout>
+  </t-layout>
+</template>
+
+<style scoped lang="scss">
+:deep(.animate__animated) {
+  position: absolute;
+  width: 100%;
+}
+
+// 音源选择器过渡动画
+.source-enter-active,
+.source-leave-active {
+  transition: all 0.2s ease;
+}
+
+.source-enter-from {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+
+.source-leave-to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+
+// 遮罩过渡动画
+.mask-enter-active,
+.mask-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.mask-enter-from,
+.mask-leave-to {
+  opacity: 0;
+}
+
+.home-container {
+  height: calc(100vh - var(--play-bottom-height));
+  overflow-y: hidden;
+  position: relative;
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.sidebar {
+  width: 15rem;
+  background-image: linear-gradient(
+    to bottom,
+    var(--td-brand-color-4) -140vh,
+    var(--td-bg-color-container) 30vh
+  );
+  border-right: 0.0625rem solid var(--td-border-level-1-color);
+  flex-shrink: 0;
+
+  .sidebar-content {
+    padding: 1rem;
+
+    .logo-section {
+      -webkit-app-region: drag;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1.5rem;
+
+      .logo-icon {
+        width: 2rem;
+        height: 2rem;
+        background-color: var(--td-brand-color-4);
+        border-radius: 0.625rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .iconfont {
+          font-size: 1.25rem;
+          color: #fff;
+        }
+      }
+
+      .app-title {
+        font-weight: 500;
+        font-size: 1.125rem;
+        color: var(--td-text-color-primary);
+
+        span {
+          font-weight: 500;
+        }
+      }
+    }
+
+    .nav-section {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+
+      .nav-button {
+        justify-content: flex-start;
+        height: 2.4rem;
+        text-align: left;
+        padding: 0.7rem 1rem;
+        border-radius: 0.5rem;
+        border: none;
+
+        .nav-icon {
+          margin-right: 0.75rem;
+          font-size: 1rem;
+        }
+        div {
+          display: none !important;
+          visibility: hidden;
+        }
+        &.active {
+          background-color: var(--td-brand-color-4);
+          color: var(--td-text-color-anti);
+          &:active {
+            background-color: var(--td-brand-color-5) !important;
+          }
+
+          &:hover {
+            background-color: var(--td-brand-color-5) !important;
+          }
+        }
+
+        &:not(.active) {
+          color: var(--hover-nav-text);
+
+          // color: var(--td-text-color-secondary);
+
+          &:hover {
+            color: var(--hover-nav-text-hover);
+            background-color: var(--hover-nav-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+:deep(.t-layout__content) {
+  height: 100%;
+  display: flex;
+}
+
+.content {
+  padding: 0;
+  background-image: linear-gradient(
+    to bottom,
+    var(--td-brand-color-4) -110vh,
+    var(--td-bg-color-container) 15vh
+  );
+
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+
+  .header {
+    -webkit-app-region: drag;
+    display: flex;
+    align-items: center;
+    padding: 1.5rem;
+
+    .nav-btn {
+      -webkit-app-region: no-drag;
+      margin-right: 0.5rem;
+
+      &:last-of-type {
+        margin-right: 0.5rem;
+      }
+
+      .iconfont {
+        font-size: 1rem;
+        color: var(--home-nav-btn-color);
+      }
+
+      &:hover .iconfont {
+        color: var(--home-nav-btn-hover);
+      }
+    }
+
+    .search-container {
+      display: flex;
+      flex: 1;
+      position: relative;
+      justify-content: space-between;
+
+      .search-input {
+        -webkit-app-region: no-drag;
+        display: flex;
+        align-items: center;
+        transition: width 0.3s;
+        padding: 0 0.5rem;
+        width: min(18.75rem, 400px);
+        margin-right: 0.5rem;
+        border-radius: 1.25rem !important;
+        background-color: var(--td-bg-color-container);
+        overflow: visible;
+        position: relative;
+
+        &:has(input:focus) {
+          width: max(18.75rem, 400px);
+        }
+
+        .source-selector {
+          display: flex;
+          align-items: center;
+          cursor: pointer;
+          box-sizing: border-box;
+          padding: 0.25rem;
+          aspect-ratio: 1 / 1;
+          border-radius: 999px;
+          overflow: hidden;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: var(--home-source-selector-hover);
+          }
+
+          .source-arrow {
+            margin-left: 0.25rem;
+            font-size: 0.75rem;
+            color: #6b7280;
+            transition: transform 0.2s;
+
+            &.rotated {
+              transform: rotate(180deg);
+            }
+          }
+        }
+
+        .source-mask {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: 9999999;
+          background: transparent;
+          cursor: pointer;
+        }
+
+        .source-list {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          z-index: 10000000;
+          background: var(--home-source-list-bg);
+          border: 1px solid var(--home-source-list-border);
+          border-radius: 0.5rem;
+          box-shadow: var(--home-source-list-shadow);
+          min-width: 10rem;
+          overflow-y: hidden;
+          margin-top: 0.25rem;
+          padding: 0.5em;
+
+          .items {
+            max-height: 12rem;
+            overflow-y: auto;
+
+            // 隐藏滚动条
+            &::-webkit-scrollbar {
+              width: 0;
+              height: 0;
+            }
+
+            &::-webkit-scrollbar-track {
+              background: transparent;
+            }
+
+            &::-webkit-scrollbar-thumb {
+              background: transparent;
+            }
+
+            // Firefox 隐藏滚动条
+            scrollbar-width: none;
+          }
+
+          .source-item {
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 0.75rem;
+            margin-bottom: 5px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+
+            &:last-child {
+              margin: 0;
+            }
+
+            &:hover {
+              background-color: var(--home-source-item-hover);
+            }
+
+            &.active {
+              background-color: var(--td-brand-color-1);
+              color: var(--td-brand-color);
+            }
+
+            .source-icon {
+              width: 1rem;
+              height: 1rem;
+              margin-right: 0.5rem;
+            }
+
+            .source-name {
+              font-size: 0.875rem;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+
+      :deep(.t-input) {
+        border-radius: 0rem !important;
+        border: none;
+        box-shadow: none;
+        &.t-input--suffix {
+          padding-right: 0 !important;
+        }
+      }
+
+      .settings-btn {
+        .iconfont {
+          font-size: 1rem;
+          color: var(--td-text-color-secondary);
+        }
+
+        &:hover .iconfont {
+          color: var(--td-text-color-primary);
+        }
+      }
+    }
+  }
+
+  .mainContent {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+    height: 0;
+    /* 确保flex子元素能够正确计算高度 */
+
+    &::-webkit-scrollbar {
+      width: 0.375rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--home-scrollbar-track);
+      border-radius: 0.1875rem;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--home-scrollbar-thumb);
+      border-radius: 0.1875rem;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background: var(--home-scrollbar-thumb-hover);
+      }
+    }
+
+    /* Firefox 滚动条样式 */
+    scrollbar-width: thin;
+    scrollbar-color: var(--home-scrollbar-color);
+  }
+}
+</style>

src/renderer/src/components/search/searchSuggest.vue

@@ -0,0 +1,272 @@
+<template>
+  <Transition
+    name="fadeDown"
+    mode="out-in"
+    @after-enter="calcSearchSuggestHeights"
+    @after-leave="calcSearchSuggestHeights"
+  >
+    <n-card
+      v-if="SearchStore.focus && SearchStore.value"
+      class="search-suggest"
+      content-style="padding: 0"
+      :style="{
+        height: `${searchSuggestHeights}px`,
+        border: searchSuggestHeights === 0 ? 'none' : null
+      }"
+    >
+      <n-scrollbar class="scrollbar">
+        <!-- 直接搜索 -->
+        <div
+          ref="directSearchRef"
+          class="direct"
+          @click="emit('toSearch', SearchStore.value, 'keyword')"
+        >
+          <SvgIcon name="Search" :depth="3" />
+          <n-text class="text text-hidden">直接搜索：{{ SearchStore.value }}</n-text>
+        </div>
+        <!-- 搜索建议 -->
+        <Transition name="fade" mode="out-in" @after-leave="calcSearchSuggestHeights">
+          <div
+            v-if="Object.keys(searchSuggestData)?.length && searchSuggestData?.order"
+            ref="searchSuggestRef"
+            class="all-suggest"
+          >
+            <div v-for="(item, index) in searchSuggestData.order" :key="index" class="suggest">
+              <div class="suggest-type">
+                <SvgIcon :name="searchSuggestionsType[item].icon" />
+                <n-text>{{ searchSuggestionsType[item].name }}</n-text>
+              </div>
+              <div
+                v-for="(suggestItem, suggestIndex) in searchSuggestData[item]"
+                :key="suggestIndex"
+                class="suggest-item"
+                @click="emit('toSearch', suggestItem, item)"
+              >
+                <n-text class="name">{{ suggestItem }}</n-text>
+                <n-text v-if="suggestItem?.artist" class="artist" depth="3">
+                  {{ suggestItem.artist.name }}
+                </n-text>
+                <n-text v-else-if="suggestItem?.artists" class="artist" depth="3">
+                  {{ suggestItem.artists[0].name }}
+                </n-text>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </n-scrollbar>
+    </n-card>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { useSearchStore } from '@renderer/store'
+import { watchDebounced } from '@vueuse/core'
+import { ref, nextTick } from 'vue'
+import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
+
+const emit = defineEmits<{
+  toSearch: [key: number | string, type: string]
+}>()
+
+watch(
+  () => LocalUserDetailStore().userSource.source,
+  () => {
+    getSearchSuggest(SearchStore.value)
+  }
+)
+
+const SearchStore = useSearchStore()
+
+// 搜索建议数据
+const searchSuggestData = ref<any>({})
+const searchSuggestHeights = ref<number>(0)
+
+// 搜索建议元素
+const directSearchRef = ref<HTMLElement | null>(null)
+const searchSuggestRef = ref<HTMLElement | null>(null)
+
+// 搜索建议分类
+const searchSuggestionsType = {
+  songs: {
+    name: '单曲',
+    icon: 'Music'
+  },
+  artists: {
+    name: '歌手',
+    icon: 'Artist'
+  },
+  albums: {
+    name: '专辑',
+    icon: 'Album'
+  },
+  playlists: {
+    name: '歌单',
+    icon: 'MusicList'
+  }
+}
+
+// 获取搜索建议
+const getSearchSuggest = async (keywords: string) => {
+  searchSuggestData.value = {}
+  try {
+    console.log('获取搜索建议', keywords)
+    // 使用网易云音乐的搜索建议API
+    const result = await window.api.music.requestSdk('tipSearch', {
+      source: toRaw(LocalUserDetailStore().userSource.source || 'wy'),
+      keyword: keywords
+    })
+    console.log('result', result)
+
+    if (result) {
+      const res = result
+      // 若为纯数组则包装为分组结构，保证模板可渲染
+      searchSuggestData.value = Array.isArray(res) ? { order: ['songs'], songs: res } : res
+    } else {
+      searchSuggestData.value = {}
+    }
+
+    // 计算高度
+    nextTick(calcSearchSuggestHeights)
+  } catch (error) {
+    console.error('获取搜索建议失败:', error)
+  }
+}
+
+// 计算高度
+const calcSearchSuggestHeights = () => {
+  const directSearchHeight = directSearchRef.value?.offsetHeight
+  const searchSuggestionsHeight = searchSuggestRef.value?.offsetHeight
+  if (directSearchHeight || searchSuggestionsHeight) {
+    const totalHeight =
+      (directSearchHeight || 0) +
+      (searchSuggestionsHeight || 0) +
+      (searchSuggestionsHeight ? 8 : 0) +
+      20
+    searchSuggestHeights.value = totalHeight
+  } else {
+    searchSuggestHeights.value = 0
+  }
+}
+
+// 搜索框改变
+watchDebounced(
+  () => SearchStore.value,
+  (val) => {
+    if (!val || val === '') return
+    getSearchSuggest(val)
+  },
+  { debounce: 300 }
+)
+</script>
+
+<style lang="scss" scoped>
+.search-suggest {
+  position: absolute;
+  left: 0;
+  top: 50px;
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  max-height: calc(100vh - 160px);
+  z-index: 101;
+  transition:
+    height 0.3s ease,
+    opacity 0.3s ease,
+    transform 0.3s ease;
+  :deep(.scrollbar) {
+    max-height: calc(100vh - 160px);
+    .n-scrollbar-content {
+      padding: 10px;
+    }
+  }
+  .direct {
+    display: flex;
+    align-items: center;
+    padding: 6px;
+    border-radius: 8px;
+    transition: background-color 0.3s;
+    cursor: pointer;
+    .n-icon {
+      font-size: 16px;
+      margin-right: 6px;
+    }
+    &:hover {
+      background-color: var(--n-border-color);
+    }
+  }
+  .all-suggest {
+    margin-top: 8px;
+    .suggest {
+      margin-bottom: 8px;
+      .suggest-type {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+        color: var(--td-brand-color);
+        .n-icon {
+          font-size: 18px;
+          margin-right: 4px;
+        }
+        .n-text {
+          color: var(--td-brand-color);
+        }
+      }
+      .suggest-item {
+        padding: 10px 14px 10px 16px;
+        margin-bottom: 8px;
+        border-radius: 8px;
+        transition: background-color 0.3s;
+        cursor: pointer;
+        .name {
+          white-space: normal;
+        }
+        .artist {
+          &::before {
+            content: ' - ';
+          }
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+        &:hover {
+          background-color: var(--n-border-color);
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+/* 外层卡片下滑淡入/淡出 */
+.fadeDown-enter-active,
+.fadeDown-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.fadeDown-enter-from,
+.fadeDown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+.fadeDown-enter-to,
+.fadeDown-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 内层内容淡入/淡出（name="fade"） */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>

src/renderer/src/env.d.ts

@@ -1 +1,8 @@
 /// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/renderer/src/main.ts

@@ -1,20 +1,25 @@
+// 基础样式
 import './assets/base.css'
 import 'animate.css'
-
-// 引入组件库的少量全局样式变量
-// import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式
-
 // 引入iconfont图标样式
 import './assets/icon_font/iconfont.css'
 import './assets/icon_font/iconfont.js'
-
+// vue
 import App from './App.vue'
-
 import { createApp } from 'vue'
 const app = createApp(App)
-import { createPinia } from 'pinia'
+// router
 import router from './router'
+// pinia
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
+// pinia
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
+app.use(pinia)
+//router
 app.use(router)
-app.use(createPinia())
+
+//app
 app.mount('#app')

src/renderer/src/router/index.ts

@@ -46,12 +46,12 @@ const routes: RouteRecordRaw[] = [
       transitionOut: 'animate__fadeOut'
     },
     component: () => import('@renderer/views/settings/index.vue')
-  },
-  {
-    path: '/plugins',
-    name: 'plugins',
-    component: () => import('@renderer/views/settings/plugins.vue')
   }
+  // {
+  //   path: '/plugins',
+  //   name: 'plugins',
+  //   component: () => import('@renderer/views/settings/plugins.vue')
+  // }
 ]
 function setAnimate(routerObj: RouteRecordRaw[]) {
   for (let i = 0; i < routerObj.length; i++) {

src/renderer/src/services/music/index.ts

@@ -84,7 +84,7 @@ async function request(
   }
 
   // ipc request music service
-  const musicServiceRes: Response = await window.api.music.request(api, args)
+  const musicServiceRes: Response = await (window as any).api.music.request(api, args)
   if (musicServiceRes.success) {
     return musicServiceRes.data
   } else {

src/renderer/src/store/ControlAudio.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { reactive } from 'vue'
-import { transitionVolume } from '@renderer/utils/volume'
+import { transitionVolume } from '@renderer/utils/audio/volume'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
 
 import type {
@@ -21,202 +21,208 @@ import type {
  * @property {string} url - 音频URL。
  */
 let userInfo: any
-export const ControlAudioStore = defineStore('controlAudio', () => {
-  const Audio = reactive<ControlAudioState>({
-    audio: null,
-    isPlay: false,
-    currentTime: 0,
-    duration: 0,
-    volume: 80,
-    url: ''
-  })
-
-  // -------------------------------------------发布订阅逻辑------------------------------------------
-  // 事件订阅者映射表
-  /**
-   * 音频事件订阅与发布逻辑。
-   * @property {Record<AudioEventType, AudioSubscriber[]>} subscribers - 事件订阅者映射表。
-   */
-  const subscribers = reactive<Record<AudioEventType, AudioSubscriber[]>>({
-    ended: [],
-    seeked: [],
-    timeupdate: [],
-    play: [],
-    pause: [],
-    error: [],
-    canplay: []
-  })
-  // 生成唯一ID
-  const generateId = (): string => {
-    return `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
-  }
-
-  // 订阅事件
-  /**
-   * 订阅音频事件。
-   * @param {AudioEventType} eventType - 事件类型。
-   * @param {AudioEventCallback} callback - 事件回调函数。
-   * @returns {UnsubscribeFunction} 取消订阅的函数。
-   */
-  const subscribe = (
-    eventType: AudioEventType,
-    callback: AudioEventCallback
-  ): UnsubscribeFunction => {
-    const id = generateId()
-    const subscriber: AudioSubscriber = { id, callback }
-
-    subscribers[eventType].push(subscriber)
-
-    // 返回取消订阅函数
-    return () => {
-      const index = subscribers[eventType].findIndex((sub) => sub.id === id)
-      if (index > -1) {
-        subscribers[eventType].splice(index, 1)
-      }
-    }
-  }
-
-  // 发布事件
-  const publish = (eventType: AudioEventType): void => {
-    subscribers[eventType].forEach((subscriber) => {
-      try {
-        subscriber.callback()
-      } catch (error) {
-        console.error(`音频事件回调执行错误 [${eventType}]:`, error)
-      }
+export const ControlAudioStore = defineStore(
+  'controlAudio',
+  () => {
+    const Audio = reactive<ControlAudioState>({
+      audio: null,
+      isPlay: false,
+      currentTime: 0,
+      duration: 0,
+      volume: 80,
+      url: ''
     })
-  }
 
-  // 清空所有订阅者
-  const clearAllSubscribers = (): void => {
-    Object.keys(subscribers).forEach((eventType) => {
-      subscribers[eventType as AudioEventType] = []
+    // -------------------------------------------发布订阅逻辑------------------------------------------
+    // 事件订阅者映射表
+    /**
+     * 音频事件订阅与发布逻辑。
+     * @property {Record<AudioEventType, AudioSubscriber[]>} subscribers - 事件订阅者映射表。
+     */
+    const subscribers = reactive<Record<AudioEventType, AudioSubscriber[]>>({
+      ended: [],
+      seeked: [],
+      timeupdate: [],
+      play: [],
+      pause: [],
+      error: [],
+      canplay: []
     })
-  }
-
-  // 清空特定事件的所有订阅者
-  const clearEventSubscribers = (eventType: AudioEventType): void => {
-    subscribers[eventType] = []
-  }
-  // End-------------------------------------------事件订阅者映射表逻辑------------------------------------------
-
-  // 初始化
-  const init = (el: ControlAudioState['audio']) => {
-    userInfo = LocalUserDetailStore()
-    console.log(el, '全局音频挂载初始化success')
-    Audio.audio = el
-  }
-
-  /**
-   * 设置当前播放时间。
-   * @param {number} time - 播放时间（秒）。
-   * @throws {Error} 如果时间不是数字类型。
-   */
-  const setCurrentTime = (time: number) => {
-    if (typeof time === 'number') {
-      Audio.currentTime = time
-      return
+    // 生成唯一ID
+    const generateId = (): string => {
+      return `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
     }
-    throw new Error('时间必须是数字类型')
-  }
-  const setDuration = (duration: number) => {
-    if (typeof duration === 'number') {
-      Audio.duration = duration
-      return
-    }
-    throw new Error('时间必须是数字类型')
-  }
-  /**
-   * 设置音量。
-   * @param {number} volume - 音量（0-100）。
-   * @param {boolean} transition - 是否使用渐变。
-   * @throws {Error} 如果音量不在0-100之间。
-   */
-  const setVolume = (volume: number, transition: boolean = false) => {
-    if (typeof volume === 'number' && volume >= 0 && volume <= 100) {
-      if (Audio.audio) {
-        if (Audio.isPlay && transition) {
-          transitionVolume(Audio.audio, volume / 100, Audio.volume <= volume)
-        } else {
-          Audio.audio.volume = Number((volume / 100).toFixed(2))
+
+    // 订阅事件
+    /**
+     * 订阅音频事件。
+     * @param {AudioEventType} eventType - 事件类型。
+     * @param {AudioEventCallback} callback - 事件回调函数。
+     * @returns {UnsubscribeFunction} 取消订阅的函数。
+     */
+    const subscribe = (
+      eventType: AudioEventType,
+      callback: AudioEventCallback
+    ): UnsubscribeFunction => {
+      const id = generateId()
+      const subscriber: AudioSubscriber = { id, callback }
+
+      subscribers[eventType].push(subscriber)
+
+      // 返回取消订阅函数
+      return () => {
+        const index = subscribers[eventType].findIndex((sub) => sub.id === id)
+        if (index > -1) {
+          subscribers[eventType].splice(index, 1)
         }
-        Audio.volume = volume
-        userInfo.userInfo.volume = volume
       }
-    } else {
-      if (typeof volume === 'number' && Audio.audio) {
-        if (volume <= 0) {
-          Audio.volume = 0
-          Audio.audio.volume = 0
-          userInfo.userInfo.volume = 0
-        } else {
-          Audio.volume = 100
-          Audio.audio.volume = 100
-          userInfo.userInfo.volume = 100
+    }
+
+    // 发布事件
+    const publish = (eventType: AudioEventType): void => {
+      subscribers[eventType].forEach((subscriber) => {
+        try {
+          subscriber.callback()
+        } catch (error) {
+          console.error(`音频事件回调执行错误 [${eventType}]:`, error)
         }
-      } else {
-        throw new Error('音量必须是0-100之间的数字')
-      }
-    }
-  }
-
-  /**
-   * 设置音频URL。
-   * @param {string} url - 音频URL。
-   * @throws {Error} 如果URL为空或无效。
-   */
-  const setUrl = (url: string) => {
-    if (typeof url !== 'string' || url.trim() === '') {
-      throw new Error('音频URL不能为空')
-    }
-
-    // 停止当前播放
-    if (Audio.isPlay) {
-      stop()
-    }
-
-    Audio.url = url.trim()
-    console.log('音频URL已设置:', Audio.url)
-  }
-  const start = async () => {
-    const volume = Audio.volume
-    if (Audio.audio) {
-      Audio.audio.volume = 0
-      try {
-        await Audio.audio.play()
-        Audio.isPlay = true
-        return transitionVolume(Audio.audio, volume / 100, true, true)
-      } catch (error) {
-        Audio.audio.volume = volume / 100
-        console.error('音频播放失败:', error)
-        Audio.isPlay = false
-        throw new Error('音频播放失败，请检查音频URL是否有效')
-      }
-    }
-    return false
-  }
-  const stop = () => {
-    if (Audio.audio) {
-      Audio.isPlay = false
-      return transitionVolume(Audio.audio, Audio.volume / 100, false, true).then(() => {
-        Audio.audio?.pause()
       })
     }
-    return false
-  }
 
-  return {
-    Audio,
-    init,
-    setCurrentTime,
-    setVolume,
-    setUrl,
-    start,
-    stop,
-    subscribe,
-    publish,
-    clearAllSubscribers,
-    clearEventSubscribers,
-    setDuration
+    // 清空所有订阅者
+    const clearAllSubscribers = (): void => {
+      Object.keys(subscribers).forEach((eventType) => {
+        subscribers[eventType as AudioEventType] = []
+      })
+    }
+
+    // 清空特定事件的所有订阅者
+    const clearEventSubscribers = (eventType: AudioEventType): void => {
+      subscribers[eventType] = []
+    }
+    // End-------------------------------------------事件订阅者映射表逻辑------------------------------------------
+
+    // 初始化
+    const init = (el: ControlAudioState['audio']) => {
+      userInfo = LocalUserDetailStore()
+      console.log(el, '全局音频挂载初始化success')
+      Audio.audio = el
+    }
+
+    /**
+     * 设置当前播放时间。
+     * @param {number} time - 播放时间（秒）。
+     * @throws {Error} 如果时间不是数字类型。
+     */
+    const setCurrentTime = (time: number) => {
+      if (typeof time === 'number') {
+        Audio.currentTime = time
+        return
+      }
+      throw new Error('时间必须是数字类型')
+    }
+    const setDuration = (duration: number) => {
+      if (typeof duration === 'number') {
+        Audio.duration = duration
+        return
+      }
+      throw new Error('时间必须是数字类型')
+    }
+    /**
+     * 设置音量。
+     * @param {number} volume - 音量（0-100）。
+     * @param {boolean} transition - 是否使用渐变。
+     * @throws {Error} 如果音量不在0-100之间。
+     */
+    const setVolume = (volume: number, transition: boolean = false) => {
+      if (typeof volume === 'number' && volume >= 0 && volume <= 100) {
+        if (Audio.audio) {
+          if (Audio.isPlay && transition) {
+            transitionVolume(Audio.audio, volume / 100, Audio.volume <= volume)
+          } else {
+            Audio.audio.volume = Number((volume / 100).toFixed(2))
+          }
+          Audio.volume = volume
+          userInfo.userInfo.volume = volume
+        }
+      } else {
+        if (typeof volume === 'number' && Audio.audio) {
+          if (volume <= 0) {
+            Audio.volume = 0
+            Audio.audio.volume = 0
+            userInfo.userInfo.volume = 0
+          } else {
+            Audio.volume = 100
+            Audio.audio.volume = 100
+            userInfo.userInfo.volume = 100
+          }
+        } else {
+          throw new Error('音量必须是0-100之间的数字')
+        }
+      }
+    }
+
+    /**
+     * 设置音频URL。
+     * @param {string} url - 音频URL。
+     * @throws {Error} 如果URL为空或无效。
+     */
+    const setUrl = (url: string) => {
+      if (typeof url !== 'string' || url.trim() === '') {
+        throw new Error('音频URL不能为空')
+      }
+
+      // 停止当前播放
+      if (Audio.isPlay) {
+        stop()
+      }
+
+      Audio.url = url.trim()
+      console.log('音频URL已设置:', Audio.url)
+    }
+    const start = async () => {
+      const volume = Audio.volume
+      if (Audio.audio) {
+        Audio.audio.volume = 0
+        try {
+          await Audio.audio.play()
+          Audio.isPlay = true
+          return transitionVolume(Audio.audio, volume / 100, true, true)
+        } catch (error) {
+          Audio.audio.volume = volume / 100
+          console.error('音频播放失败:', error)
+          Audio.isPlay = false
+          throw new Error('音频播放失败，请检查音频URL是否有效')
+        }
+      }
+      return false
+    }
+    const stop = () => {
+      if (Audio.audio) {
+        Audio.isPlay = false
+        return transitionVolume(Audio.audio, Audio.volume / 100, false, true).then(() => {
+          Audio.audio?.pause()
+        })
+      }
+      return false
+    }
+
+    return {
+      Audio,
+      init,
+      setCurrentTime,
+      setVolume,
+      setUrl,
+      start,
+      stop,
+      subscribe,
+      publish,
+      clearAllSubscribers,
+      clearEventSubscribers,
+      setDuration
+    }
+  },
+  {
+    persist: false
   }
-})
+)

src/renderer/src/store/LocalUserDetail.ts

@@ -5,106 +5,112 @@ import { ControlAudioStore } from '@renderer/store/ControlAudio'
 import type { SongList } from '@renderer/types/audio'
 import type { UserInfo } from '@renderer/types/userInfo'
 
-export const LocalUserDetailStore = defineStore('Local', () => {
-  const list = ref<SongList[]>([])
-  const userInfo = ref<UserInfo>({})
-  const initialization = ref(false)
-  function init(): void {
-    const UserInfoLocal = localStorage.getItem('userInfo')
-    const ListLocal = localStorage.getItem('songList')
-    if (UserInfoLocal) {
-      userInfo.value = JSON.parse(UserInfoLocal) as UserInfo
-    } else {
-      userInfo.value = {
-        lastPlaySongId: null,
-        topBarStyle: false,
-        mainColor: '#00DAC0',
-        volume: 80,
-        currentTime: 0,
-        selectSources: 'wy'
+export const LocalUserDetailStore = defineStore(
+  'Local',
+  () => {
+    const list = ref<SongList[]>([])
+    const userInfo = ref<UserInfo>({})
+    const initialization = ref(false)
+    function init(): void {
+      const UserInfoLocal = localStorage.getItem('userInfo')
+      const ListLocal = localStorage.getItem('songList')
+      if (UserInfoLocal) {
+        userInfo.value = JSON.parse(UserInfoLocal) as UserInfo
+      } else {
+        userInfo.value = {
+          lastPlaySongId: null,
+          topBarStyle: false,
+          mainColor: '#00DAC0',
+          volume: 80,
+          currentTime: 0,
+          selectSources: 'wy'
+        }
+        localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
       }
-      localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
+      if (ListLocal) {
+        list.value = JSON.parse(ListLocal) as SongList[]
+      } else {
+        list.value = []
+        localStorage.setItem('songList', JSON.stringify([]))
+      }
+      console.log('init local user detail')
+      initialization.value = true
+      const Audio = ControlAudioStore()
+      startWatch()
+      Audio.setVolume(userInfo.value.volume as number)
     }
-    if (ListLocal) {
-      list.value = JSON.parse(ListLocal) as SongList[]
-    } else {
+    function startWatch() {
+      console.log('startWatch')
+      watch(
+        list,
+        (newVal) => {
+          localStorage.setItem('songList', JSON.stringify(newVal))
+        },
+        {
+          deep: true
+        }
+      )
+      watch(
+        userInfo,
+        (newVal) => {
+          localStorage.setItem('userInfo', JSON.stringify(newVal))
+        },
+        {
+          deep: true
+        }
+      )
+    }
+
+    function addSong(song: SongList) {
+      if (!list.value.find((item) => item.songmid === song.songmid)) {
+        list.value.push(song)
+      }
+      return list.value
+    }
+
+    function addSongToFirst(song: SongList) {
+      const existingIndex = list.value.findIndex((item) => item.songmid === song.songmid)
+      if (existingIndex !== -1) {
+        // 如果歌曲已存在，将其移动到第一位
+        const existingSong = list.value.splice(existingIndex, 1)[0]
+        list.value.unshift(existingSong)
+      } else {
+        // 如果歌曲不存在，添加到第一位
+        list.value.unshift(song)
+      }
+      return list.value
+    }
+
+    function removeSong(songId: number | string) {
+      const index = list.value.findIndex((item) => item.songmid === songId)
+      if (index !== -1) {
+        list.value.splice(index, 1)
+      }
+    }
+
+    function clearList() {
       list.value = []
-      localStorage.setItem('songList', JSON.stringify([]))
     }
-    console.log('init local user detail')
-    initialization.value = true
-    const Audio = ControlAudioStore()
-    startWatch()
-    Audio.setVolume(userInfo.value.volume as number)
-  }
-  function startWatch() {
-    console.log('startWatch')
-    watch(
-      list,
-      (newVal) => {
-        localStorage.setItem('songList', JSON.stringify(newVal))
-      },
-      {
-        deep: true
+    const userSource = computed(() => {
+      return {
+        pluginId: userInfo.value.pluginId,
+        source: userInfo.value.selectSources,
+        quality: userInfo.value.selectQuality
       }
-    )
-    watch(
-      userInfo,
-      (newVal) => {
-        localStorage.setItem('userInfo', JSON.stringify(newVal))
-      },
-      {
-        deep: true
-      }
-    )
-  }
-
-  function addSong(song: SongList) {
-    if (!list.value.find((item) => item.songmid === song.songmid)) {
-      list.value.push(song)
-    }
-    return list.value
-  }
-
-  function addSongToFirst(song: SongList) {
-    const existingIndex = list.value.findIndex((item) => item.songmid === song.songmid)
-    if (existingIndex !== -1) {
-      // 如果歌曲已存在，将其移动到第一位
-      const existingSong = list.value.splice(existingIndex, 1)[0]
-      list.value.unshift(existingSong)
-    } else {
-      // 如果歌曲不存在，添加到第一位
-      list.value.unshift(song)
-    }
-    return list.value
-  }
-
-  function removeSong(songId: number | string) {
-    const index = list.value.findIndex((item) => item.songmid === songId)
-    if (index !== -1) {
-      list.value.splice(index, 1)
-    }
-  }
-
-  function clearList() {
-    list.value = []
-  }
-  const userSource = computed(() => {
+    })
     return {
-      pluginId: userInfo.value.pluginId,
-      source: userInfo.value.selectSources,
-      quality: userInfo.value.selectQuality
+      list,
+      userInfo,
+      initialization,
+      init,
+      addSong,
+      addSongToFirst,
+      removeSong,
+      clearList,
+      userSource
     }
-  })
-  return {
-    list,
-    userInfo,
-    initialization,
-    init,
-    addSong,
-    addSongToFirst,
-    removeSong,
-    clearList,
-    userSource
+  },
+  {
+    persist: false
   }
-})
+)

src/renderer/src/store/Settings.ts

@@ -1,54 +1,72 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
+export interface TagWriteOptions {
+  basicInfo: boolean // 基础信息（标题、艺术家、专辑）
+  cover: boolean // 封面
+  lyrics: boolean // 普通歌词
+}
+
 export interface SettingsState {
   showFloatBall: boolean
   directories?: {
     cacheDir: string
     downloadDir: string
   }
+  tagWriteOptions?: TagWriteOptions
 }
 
-export const useSettingsStore = defineStore('settings', () => {
-  // 从本地存储加载设置，如果没有则使用默认值
-  const loadSettings = (): SettingsState => {
-    try {
-      const savedSettings = localStorage.getItem('appSettings')
-      if (savedSettings) {
-        return JSON.parse(savedSettings)
+export const useSettingsStore = defineStore(
+  'settings',
+  () => {
+    // 从本地存储加载设置，如果没有则使用默认值
+    const loadSettings = (): SettingsState => {
+      try {
+        const savedSettings = localStorage.getItem('appSettings')
+        if (savedSettings) {
+          return JSON.parse(savedSettings)
+        }
+      } catch (error) {
+        console.error('加载设置失败:', error)
+      }
+
+      // 默认设置
+      return {
+        showFloatBall: true,
+        tagWriteOptions: {
+          basicInfo: true,
+          cover: true,
+          lyrics: true
+        }
       }
-    } catch (error) {
-      console.error('加载设置失败:', error)
     }
 
-    // 默认设置
+    const settings = ref<SettingsState>(loadSettings())
+
+    // 保存设置到本地存储
+    const saveSettings = () => {
+      localStorage.setItem('appSettings', JSON.stringify(settings.value))
+    }
+
+    // 更新设置
+    const updateSettings = (newSettings: Partial<SettingsState>) => {
+      settings.value = { ...settings.value, ...newSettings }
+      saveSettings()
+    }
+
+    // 切换悬浮球显示状态
+    const toggleFloatBall = () => {
+      settings.value.showFloatBall = !settings.value.showFloatBall
+      saveSettings()
+    }
+
     return {
-      showFloatBall: true
+      settings,
+      updateSettings,
+      toggleFloatBall
     }
+  },
+  {
+    persist: false
   }
-
-  const settings = ref<SettingsState>(loadSettings())
-
-  // 保存设置到本地存储
-  const saveSettings = () => {
-    localStorage.setItem('appSettings', JSON.stringify(settings.value))
-  }
-
-  // 更新设置
-  const updateSettings = (newSettings: Partial<SettingsState>) => {
-    settings.value = { ...settings.value, ...newSettings }
-    saveSettings()
-  }
-
-  // 切换悬浮球显示状态
-  const toggleFloatBall = () => {
-    settings.value.showFloatBall = !settings.value.showFloatBall
-    saveSettings()
-  }
-
-  return {
-    settings,
-    updateSettings,
-    toggleFloatBall
-  }
-})
+)