feat:修改了软件下载源

.github/workflows/uploadpan.yml

@@ -0,0 +1,160 @@
+name: Sync Existing Releases to WebDAV
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag_name:
+        description: '要同步的特定标签（如 v1.0.0），留空则同步所有版本'
+        required: false
+        default: ''
+
+permissions:
+  contents: read
+
+jobs:
+  sync-releases-to-webdav:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y curl
+
+      - name: Get all releases
+        id: get-releases
+        run: |
+          response=$(curl -s \
+            -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+            -H "Accept: application/vnd.github.v3+json" \
+            "https://api.github.com/repos/${{ github.repository }}/releases")
+          echo "releases_json=$(echo "$response" | jq -c '.')" >> $GITHUB_OUTPUT
+
+      - name: Sync releases to WebDAV
+        run: |
+          # 读取输入参数
+          SPECIFIC_TAG="${{ github.event.inputs.tag_name }}"
+          RELEASES_JSON='${{ steps.get-releases.outputs.releases_json }}'
+          
+          echo "开始同步 releases..."
+          echo "特定标签: ${SPECIFIC_TAG:-所有版本}"
+          echo "WebDAV 根路径: ${{ secrets.WEBDAV_BASE_URL }}/yd/ceru"
+
+          # 处理每个 release
+          releases_count=$(echo "$RELEASES_JSON" | jq '. | length')
+          echo "找到 $releases_count 个 releases"
+
+          for i in $(seq 0 $(($releases_count - 1))); do
+            release=$(echo "$RELEASES_JSON" | jq -c ".[$i]")
+            tag_name=$(echo "$release" | jq -r '.tag_name')
+            release_id=$(echo "$release" | jq -r '.id')
+            
+            if [ -n "$SPECIFIC_TAG" ] && [ "$tag_name" != "$SPECIFIC_TAG" ]; then
+              echo "跳过 $tag_name，不是指定的标签 $SPECIFIC_TAG"
+              continue
+            fi
+
+            echo "正在处理版本: $tag_name (ID: $release_id)"
+
+            # 获取该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 个资源文件"
+
+            # 处理每个asset
+            for j in $(seq 0 $(($assets_count - 1))); do
+              asset=$(echo "$assets_json" | jq -c ".[$j]")
+              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_download"
+              
+              if ! curl -sL -o "$safe_filename" \
+                -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+                -H "Accept: application/octet-stream" \
+                "$asset_url"; then
+                echo "❌ 下载失败: $asset_name"
+                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"
+                  continue
+                fi
+
+                echo "上传到 WebDAV: $asset_name"
+                
+                # 构建远程路径
+                remote_path="/yd/ceru/$tag_name/$asset_name"
+                full_url="${{ secrets.WEBDAV_BASE_URL }}$remote_path"
+                
+                echo "完整路径: $full_url"
+                
+                # 使用 WebDAV PUT 方法上传文件
+                if curl -s -f -X PUT \
+                  -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
+                  -T "$safe_filename" \
+                  "$full_url"; then
+                  
+                  echo "✅ WebDAV 上传成功: $asset_name"
+                  
+                  # 验证文件是否存在
+                  echo "验证文件是否存在..."
+                  sleep 2
+                  
+                  if curl -s -f -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
+                    -X PROPFIND \
+                    -H "Depth: 0" \
+                    "$full_url" > /dev/null 2>&1; then
+                    echo "✅ 文件确认存在: $asset_name"
+                  else
+                    echo "⚠️  文件验证失败，但上传可能成功"
+                  fi
+                  
+                else
+                  echo "❌ WebDAV 上传失败: $asset_name"
+                  echo "尝试创建目录后重新上传..."
+                  
+                  # 尝试先创建目录
+                  dir_path="/yd/ceru/$tag_name"
+                  dir_url="${{ secrets.WEBDAV_BASE_URL }}$dir_path"
+                  
+                  if curl -s -f -X MKCOL \
+                    -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
+                    "$dir_url"; then
+                    echo "✅ 目录创建成功: $dir_path"
+                    
+                    # 重新尝试上传文件
+                    if curl -s -f -X PUT \
+                      -u "${{ secrets.WEBDAV_USERNAME }}:${{ secrets.WEBDAV_PASSWORD }}" \
+                      -T "$safe_filename" \
+                      "$full_url"; then
+                      echo "✅ 重新上传成功: $asset_name"
+                    else
+                      echo "❌ 重新上传失败: $asset_name"
+                    fi
+                  else
+                    echo "❌ 目录创建失败: $dir_path"
+                  fi
+                fi
+                
+                # 安全删除临时文件
+                rm -f "$safe_filename"
+                echo "----------------------------------------"
+              else
+                echo "❌ 文件不存在: $safe_filename"
+              fi
+            done
+          done
+          
+          echo "🎉 WebDAV 同步完成"

docs/.vitepress/config.mts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   lang: 'zh-CN',
   title: "Ceru Music",
-  base: '/CeruMusic/',
+  base: process.env.BASE_URL ?? '/CeruMusic/',
   description: "Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工具，一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
@@ -32,7 +32,12 @@ export default defineConfig({
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/timeshiftsauce/CeruMusic' }
+      { icon: 'github', link: 'https://github.com/timeshiftsauce/CeruMusic' },
+      { icon: 'gitee', link: 'https://gitee.com/sqjcode/CeruMuisc' },
+      { icon: 'qq', link: 'https://qm.qq.com/q/IDpQnbGd06' },
+      { icon: 'beatsbydre', link: 'https://shiqianjiang.cn' },
+      { icon: 'bilibili', link: 'https://space.bilibili.com/696709986' }
+
     ],
     footer: {
       message: 'Released under the Apache License 2.0 License.',
@@ -46,6 +51,6 @@ export default defineConfig({
     }
   },
   lastUpdated: true,
-  head: [['link', { rel: 'icon', href: '/CeruMusic/logo.svg' }]]
+  head: [['link', { rel: 'icon', href: (process.env.BASE_URL ?? '/CeruMusic/') + 'logo.svg' }]]
 })
 // Smooth scrolling functions

docs/.vitepress/theme/phycat/phycat.dark.css

@@ -1,6 +1,5 @@
-
 /* 暗色主题界面UI颜色重写 */
-.dropdown-menu{
+.dropdown-menu {
   background: #222222;
 }
 #recent-file-panel {
@@ -19,31 +18,29 @@
   border: 1px solid #9292928f;
 }
 
-
-
 /* 字体引入：鸿蒙字体 */
 
 @font-face {
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
   font-weight: normal;
   font-style: normal;
-  src: url("HarmonyOS_Sans_SC_Regular.woff");
+  src: url('HarmonyOS_Sans_SC_Regular.woff');
 }
 
 @font-face {
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
   font-weight: bold;
   font-style: normal;
-  src: url("HarmonyOS_Sans_SC_Bold.woff");
+  src: url('HarmonyOS_Sans_SC_Bold.woff');
 }
 @font-face {
-  font-family: "CascadiaCode";
+  font-family: 'CascadiaCode';
   src: url('Cascadia-Code-Regular.ttf');
 }
 
 html {
   font-size: 16px;
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
 }
 
 /* 打印页面设置 */
@@ -61,7 +58,11 @@ html {
   p {
     line-height: 1.5rem; /*设置打印内容的行高*/
   }
-  ol,ul,figure,pre {  /*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/
+  ol,
+  ul,
+  figure,
+  pre {
+    /*设置一些元素不会被分页截断对应有序列表、无序列表、图片(表格)、代码块*/
     page-break-inside: avoid;
     break-inside: avoid;
   }
@@ -87,8 +88,9 @@ html.dark #app .vp-doc {
 html.dark #app .vp-doc p {
   color: var(--dark-text-color);
   margin: 10px 10px;
-  font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light,
-    "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-family:
+    Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin,
+    Georgia, Times, 'Times New Roman', serif;
 
   font-size: 1rem;
   word-spacing: 2px;
@@ -97,7 +99,7 @@ html.dark #app .vp-doc h3:after,
 h4:after,
 h5:after,
 h6:after {
-  content: "";
+  content: '';
   display: inline-block;
   margin-left: 0.2em;
   height: 2em;
@@ -182,7 +184,7 @@ html.dark #app .vp-doc h4 {
 }
 
 html.dark #app .vp-doc h4::before {
-  content: "";
+  content: '';
   margin-right: 7px;
   display: inline-block;
   background-color: var(--head-title-color);
@@ -200,7 +202,7 @@ html.dark #app .vp-doc h5 {
 }
 
 html.dark #app .vp-doc h5::before {
-  content: "";
+  content: '';
   margin-right: 7px;
   display: inline-block;
   background-color: #ffffff;
@@ -218,7 +220,7 @@ html.dark #app .vp-doc h6 {
 }
 
 html.dark #app .vp-doc h6::before {
-  content: "-";
+  content: '-';
   color: var(--head-title-color);
   margin-right: 7px;
   display: inline-block;
@@ -251,170 +253,160 @@ h5 {
 }
 
 .sidebar-content {
-  counter-reset: h1
+  counter-reset: h1;
 }
 .outline-content {
-  counter-reset: h1
+  counter-reset: h1;
 }
 .outline-h1 {
-  counter-reset: h2
+  counter-reset: h2;
 }
 
 .outline-h2 {
-  counter-reset: h3
+  counter-reset: h3;
 }
 
 .outline-h3 {
-  counter-reset: h4
+  counter-reset: h4;
 }
 
 .outline-h4 {
-  counter-reset: h5
+  counter-reset: h5;
 }
 
 .outline-h5 {
-  counter-reset: h6
+  counter-reset: h6;
 }
 
-
-
 .md-toc-content {
-  counter-reset: h1toc
+  counter-reset: h1toc;
 }
 
 .md-toc-h1 {
-  counter-reset: h2toc
+  counter-reset: h2toc;
 }
 
 .md-toc-h2 {
-  counter-reset: h3toc
+  counter-reset: h3toc;
 }
 
 .md-toc-h3 {
-  counter-reset: h4toc
+  counter-reset: h4toc;
 }
 
 .md-toc-h4 {
-  counter-reset: h5toc
+  counter-reset: h5toc;
 }
 
 .md-toc-h5 {
-  counter-reset: h6toc
+  counter-reset: h6toc;
 }
 
-
 html.dark #app .vp-doc h1:before {
   counter-increment: h1;
   content: var(--autonum-h1);
 }
-#outline-content li.outline-h1>div>span.outline-label:before {
+#outline-content li.outline-h1 > div > span.outline-label:before {
   counter-increment: h1;
   content: var(--autonum-h1);
 }
-.outline-content .outline-h1>.outline-item>.outline-label:before{
+.outline-content .outline-h1 > .outline-item > .outline-label:before {
   counter-increment: h1;
   content: var(--autonum-h1);
 }
-html.dark #app .vp-doc span.md-toc-item.md-toc-h1>a:before {
+html.dark #app .vp-doc span.md-toc-item.md-toc-h1 > a:before {
   counter-increment: h1toc;
   content: var(--autonum-h1toc);
 }
 
-
 html.dark #app .vp-doc h2:before {
   counter-increment: h2;
   content: var(--autonum-h2);
 }
-#outline-content li.outline-h2>div>span.outline-label:before {
+#outline-content li.outline-h2 > div > span.outline-label:before {
   counter-increment: h2;
   content: var(--autonum-h2);
 }
-.outline-content .outline-h2>.outline-item>.outline-label:before {
+.outline-content .outline-h2 > .outline-item > .outline-label:before {
   counter-increment: h2;
   content: var(--autonum-h2);
 }
-html.dark #app .vp-doc span.md-toc-item.md-toc-h2>a:before {
+html.dark #app .vp-doc span.md-toc-item.md-toc-h2 > a:before {
   counter-increment: h2toc;
   content: var(--autonum-h2toc);
 }
 
-
 html.dark #app .vp-doc h3 > span::before {
   counter-increment: h3;
   content: var(--autonum-h3);
 }
-#outline-content li.outline-h3>div>span.outline-label:before {
+#outline-content li.outline-h3 > div > span.outline-label:before {
   counter-increment: h3;
   content: var(--autonum-h3);
 }
-.outline-content .outline-h3>.outline-item>.outline-label:before {
+.outline-content .outline-h3 > .outline-item > .outline-label:before {
   counter-increment: h3;
   content: var(--autonum-h3);
 }
-html.dark #app .vp-doc span.md-toc-item.md-toc-h3>a:before {
+html.dark #app .vp-doc span.md-toc-item.md-toc-h3 > a:before {
   counter-increment: h3toc;
   content: var(--autonum-h3toc);
 }
 
-
-
 html.dark #app .vp-doc h4 > span::before {
   counter-increment: h4;
   content: var(--autonum-h4);
 }
-#outline-content li.outline-h4>div>span.outline-label:before {
+#outline-content li.outline-h4 > div > span.outline-label:before {
   counter-increment: h4;
   content: var(--autonum-h4);
 }
-.outline-content .outline-h4>.outline-item>.outline-label:before {
+.outline-content .outline-h4 > .outline-item > .outline-label:before {
   counter-increment: h4;
   content: var(--autonum-h4);
 }
-html.dark #app .vp-doc span.md-toc-item.md-toc-h4>a:before {
+html.dark #app .vp-doc span.md-toc-item.md-toc-h4 > a:before {
   counter-increment: h4toc;
   content: var(--autonum-h4toc);
 }
 
-
 html.dark #app .vp-doc h5 > span::before {
   counter-increment: h5;
   content: var(--autonum-h5);
 }
-#outline-content li.outline-h5>div>span.outline-label:before {
+#outline-content li.outline-h5 > div > span.outline-label:before {
   counter-increment: h5;
   content: var(--autonum-h5);
 }
-.outline-content .outline-h5>.outline-item>.outline-label:before {
+.outline-content .outline-h5 > .outline-item > .outline-label:before {
   counter-increment: h5;
   content: var(--autonum-h5);
 }
-html.dark #app .vp-doc span.md-toc-item.md-toc-h5>a:before {
+html.dark #app .vp-doc span.md-toc-item.md-toc-h5 > a:before {
   counter-increment: h5toc;
   content: var(--autonum-h5toc);
 }
 
-
 html.dark #app .vp-doc h6 > span::before {
   counter-increment: h6;
   content: var(--autonum-h6);
 }
-#outline-content li.outline-h6>div>span.outline-label:before {
+#outline-content li.outline-h6 > div > span.outline-label:before {
   counter-increment: h6;
   content: var(--autonum-h6);
 }
-.outline-content .outline-h6>.outline-item>.outline-label:before {
+.outline-content .outline-h6 > .outline-item > .outline-label:before {
   counter-increment: h6;
   content: var(--autonum-h6);
 }
-html.dark #app .vp-doc span.md-toc-item.md-toc-h6>a:before {
+html.dark #app .vp-doc span.md-toc-item.md-toc-h6 > a:before {
   counter-increment: h6toc;
   content: var(--autonum-h6toc);
 }
 
-
 /* 列表 */
-::marker {
-  color: var(--dark-text-color);
+html.dark ::marker {
+  color: var(--dark-text-color) !important;
   font-weight: bold;
 }
 
@@ -466,7 +458,7 @@ html.dark #app .vp-doc li section {
 }
 
 html.dark #app .vp-doc li:before {
-  content: "";
+  content: '';
   height: calc(100% - 50px);
   top: 35px;
   position: absolute;
@@ -474,10 +466,9 @@ html.dark #app .vp-doc li:before {
   left: -14.5px;
 }
 
-
 /* 任务列表样式 */
 
-.task-list-item input{
+.task-list-item input {
   width: 1.25rem;
   height: 1.25rem;
   display: block;
@@ -486,12 +477,12 @@ html.dark #app .vp-doc li:before {
   left: 4px;
 }
 
-.task-list-item input:focus{
+.task-list-item input:focus {
   outline: none;
   box-shadow: none;
 }
 
-.task-list-item input:before{
+.task-list-item input:before {
   border: 1px solid var(--element-color-deep);
   border-radius: 1.2rem;
   width: 1.2rem;
@@ -503,10 +494,10 @@ html.dark #app .vp-doc li:before {
 }
 
 .task-list-item input:checked:before,
-.task-list-item input[checked]:before{
+.task-list-item input[checked]:before {
   background: #c6c6c6;
   border-width: 2px;
-  display:inline-block;
+  display: inline-block;
   transition: background-color 200ms ease-in-out;
 }
 
@@ -520,17 +511,17 @@ html.dark #app .vp-doc li:before {
   text-decoration-color:var(--element-color)
 } */
 
-.task-list-item input[type="checkbox"] + p span {
+.task-list-item input[type='checkbox'] + p span {
   position: relative;
   display: inline-block;
 }
 
-.task-list-item input[type="checkbox"] + p span::after {
-  content: "";
+.task-list-item input[type='checkbox'] + p span::after {
+  content: '';
   position: absolute;
   left: 0;
   top: 52%;
-  width: calc(100%*var(--check-line));
+  width: calc(100% * var(--check-line));
   height: 2px;
   background: var(--element-color);
   transform: scaleX(0);
@@ -538,11 +529,11 @@ html.dark #app .vp-doc li:before {
   transition: transform 0.2s ease-in-out;
 }
 
-.task-list-item input[type="checkbox"]:checked + p span::after {
+.task-list-item input[type='checkbox']:checked + p span::after {
   transform: scaleX(1);
 }
 
-.task-list-item input[type="checkbox"]:not(:checked) + p span::after {
+.task-list-item input[type='checkbox']:not(:checked) + p span::after {
   transform-origin: right center;
   transition-delay: 0.1s;
 }
@@ -683,7 +674,7 @@ html.dark #app .vp-doc p code {
   color: var(--element-color-linecode);
   background: var(--element-color-linecode-background);
   border-radius: 3px;
-  font-family: "CascadiaCode" monospace;
+  font-family: 'CascadiaCode' monospace;
   letter-spacing: 0.5px;
 }
 
@@ -692,9 +683,9 @@ html.dark #app .vp-doc li code {
 }
 
 /* 代码块 */
-.md-fences:not([lang="mermaid"])::before {
+html.dark #app div[class^='language'] pre:not(.language-bash)::before {
   content: attr(lang);
-  font-family: "CascadiaCode" monospace;
+  font-family: 'CascadiaCode' monospace;
   text-align: right;
   padding-right: 15px;
   color: #7e7e7e;
@@ -720,7 +711,7 @@ html.dark #app .vp-doc li code {
 .cm-s-inner.CodeMirror {
   padding: 1.2rem 0.8rem;
   color: #4f5467;
-  font-family: "CascadiaCode" monospace;
+  font-family: 'CascadiaCode' monospace;
   border-radius: 10px;
   background-color: #fa0303;
   line-height: 1.6rem;
@@ -742,7 +733,7 @@ pre.CodeMirror-line {
   color: #a3a3a3;
 }
 
-.cm-s-inner.CodeMirror {
+html.dark #app div[class^='language'] pre:not([lang='mermaid']) code {
   background: #222222;
   border-radius: 0 0 5px 5px;
   padding: 20px 10px 20px 10px;
@@ -757,12 +748,12 @@ pre.CodeMirror-line {
 
 /* 代码块颜色 */
 .cm-keyword {
-  color: #48CFE9 !important;
+  color: #48cfe9 !important;
   font-weight: 700 !important;
 }
 
 .cm-variable {
-  color: #C2EAFF !important;
+  color: #c2eaff !important;
 }
 
 .cm-tag {
@@ -772,7 +763,7 @@ pre.CodeMirror-line {
 
 .cm-variable-3,
 .cm-variable-2 {
-  color: #DEBBFB !important;
+  color: #debbfb !important;
   font-weight: 700 !important;
 }
 
@@ -832,7 +823,7 @@ pre.CodeMirror-line {
 kbd {
   padding: 2px 4px;
   font-size: 90%;
-  background:var(--element-color-linecode-background);
+  background: var(--element-color-linecode-background);
   color: var(--element-color-linecode);
   border: var(--element-color-shallow) solid 1px;
   border-radius: 3px;
@@ -891,7 +882,7 @@ html.dark #app .vp-doc .footnote-item em {
 /* 目录 */
 
 .md-toc * {
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
 }
 .md-tooltip-hide > span {
   display: none;
@@ -901,7 +892,7 @@ html.dark #app .vp-doc .footnote-item em {
   display: inline-block;
   width: 100%;
   text-align: center;
-  content: "目录";
+  content: '目录';
   font-size: 20px;
   font-weight: 700;
   color: var(--dark-text-color);
@@ -929,7 +920,7 @@ html.dark #app .vp-doc .footnote-item em {
   font-size: 0.92rem;
   background-color: var(--dark-background-color);
 }
-.file-tree-node.active>.file-node-background{
+.file-tree-node.active > .file-node-background {
   background-color: #222222;
 }
 
@@ -1020,7 +1011,7 @@ span.file-node-title {
 }
 
 #outline-content .outline-h2 > .outline-item::before {
-  content: "";
+  content: '';
   width: 12px;
   height: 12px;
   background: var(--element-color);
@@ -1038,7 +1029,7 @@ span.file-node-title {
 }
 
 #outline-content .outline-h2::after {
-  content: "";
+  content: '';
   height: calc(100% - 24px);
   width: 1px;
   background: var(--element-color);
@@ -1065,7 +1056,7 @@ span.file-node-title {
 }
 
 .outline-item-active:not(.outline-item-wrapper)::after {
-  content: "";
+  content: '';
   position: relative;
   width: 11px;
   height: 8px;
@@ -1077,7 +1068,7 @@ span.file-node-title {
 }
 
 /* 导出HTML的样式 */
-.typora-export-content{
+.typora-export-content {
   background: var(--dark-background-color);
   color: var(--dark-text-color);
 }
@@ -1085,7 +1076,7 @@ body.typora-export {
   padding-left: 0px;
 }
 .typora-export-content .outline-content::before {
-  content: "目录";
+  content: '目录';
   font-size: 20px;
   font-weight: bold;
   position: absolute;
@@ -1111,7 +1102,7 @@ body.typora-export {
 }
 
 .typora-export-content .outline-item-active > .outline-item::after {
-  content: "";
+  content: '';
   position: relative;
   width: 11px;
   height: 8px;
@@ -1140,7 +1131,7 @@ body.typora-export {
 }
 
 .outline-content .outline-h2 > .outline-item::before {
-  content: "";
+  content: '';
   width: 12px;
   height: 12px;
   background: var(--element-color-deep);
@@ -1158,7 +1149,7 @@ body.typora-export {
 }
 
 .outline-content .outline-h2::after {
-  content: "";
+  content: '';
   height: calc(100% - 24px);
   width: 1px;
   background: var(--element-color);

docs/.vitepress/theme/phycat/phycat.light.css

@@ -8,27 +8,27 @@
 /* 字体引入：鸿蒙字体 */
 
 @font-face {
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
   font-weight: normal;
   font-style: normal;
-  src: url("HarmonyOS_Sans_SC_Regular.woff");
+  src: url('HarmonyOS_Sans_SC_Regular.woff');
 }
 
 @font-face {
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
   font-weight: bold;
   font-style: normal;
-  src: url("HarmonyOS_Sans_SC_Bold.woff");
+  src: url('HarmonyOS_Sans_SC_Bold.woff');
 }
 
 @font-face {
-  font-family: "CascadiaCode";
-  src: url("Cascadia-Code-Regular.ttf");
+  font-family: 'CascadiaCode';
+  src: url('Cascadia-Code-Regular.ttf');
 }
 
 html {
   font-size: 16px;
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
 }
 
 /* 打印页面设置 */
@@ -75,12 +75,17 @@ html {
   word-break: break-word;
   word-wrap: break-word;
   text-align: left;
-  background-image: linear-gradient(90deg,
+  background-image:
+    linear-gradient(
+      90deg,
       rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)),
-      rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))),
-    linear-gradient(360deg,
+      rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))
+    ),
+    linear-gradient(
+      360deg,
       rgba(50, 0, 0, 0.05) calc(3% * var(--bg-grid)),
-      rgba(0, 0, 0, 0) calc(3% * var(--bg-grid)));
+      rgba(0, 0, 0, 0) calc(3% * var(--bg-grid))
+    );
   background-size: 20px 20px;
   background-position: center center;
 }
@@ -88,8 +93,9 @@ html {
 #app .vp-doc p {
   color: #333;
   margin: 10px 10px;
-  font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light,
-    "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-family:
+    Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin,
+    Georgia, Times, 'Times New Roman', serif;
 
   font-size: 1rem;
   word-spacing: 2px;
@@ -99,7 +105,7 @@ html {
 h4:after,
 h5:after,
 h6:after {
-  content: "";
+  content: '';
   display: inline-block;
   margin-left: 0.2em;
   height: 2em;
@@ -191,7 +197,7 @@ h6:after {
 }
 
 #app .vp-doc h4::before {
-  content: "";
+  content: '';
   margin-right: 7px;
   display: inline-block;
   background-color: var(--head-title-color);
@@ -209,7 +215,7 @@ h6:after {
 }
 
 #app .vp-doc h5::before {
-  content: "";
+  content: '';
   margin-right: 7px;
   display: inline-block;
   background-color: #ffffff;
@@ -227,7 +233,7 @@ h6:after {
 }
 
 #app .vp-doc h6::before {
-  content: "-";
+  content: '-';
   color: var(--head-title-color);
   margin-right: 7px;
   display: inline-block;
@@ -260,71 +266,68 @@ h5 {
 }
 
 .sidebar-content {
-  counter-reset: h1
+  counter-reset: h1;
 }
 .outline-content {
-  counter-reset: h1
+  counter-reset: h1;
 }
 .outline-h1 {
-  counter-reset: h2
+  counter-reset: h2;
 }
 
 .outline-h2 {
-  counter-reset: h3
+  counter-reset: h3;
 }
 
 .outline-h3 {
-  counter-reset: h4
+  counter-reset: h4;
 }
 
 .outline-h4 {
-  counter-reset: h5
+  counter-reset: h5;
 }
 
 .outline-h5 {
-  counter-reset: h6
+  counter-reset: h6;
 }
 
-
-
 .md-toc-content {
-  counter-reset: h1toc
+  counter-reset: h1toc;
 }
 
 .md-toc-h1 {
-  counter-reset: h2toc
+  counter-reset: h2toc;
 }
 
 .md-toc-h2 {
-  counter-reset: h3toc
+  counter-reset: h3toc;
 }
 
 .md-toc-h3 {
-  counter-reset: h4toc
+  counter-reset: h4toc;
 }
 
 .md-toc-h4 {
-  counter-reset: h5toc
+  counter-reset: h5toc;
 }
 
 .md-toc-h5 {
-  counter-reset: h6toc
+  counter-reset: h6toc;
 }
 
-
 #app .vp-doc h1:before {
   counter-increment: h1;
   content: var(--autonum-h1);
 }
-#outline-content li.outline-h1>div>span.outline-label:before {
+#outline-content li.outline-h1 > div > span.outline-label:before {
   counter-increment: h1;
   content: var(--autonum-h1);
 }
-.outline-content .outline-h1>.outline-item>.outline-label:before{
+.outline-content .outline-h1 > .outline-item > .outline-label:before {
   counter-increment: h1;
   content: var(--autonum-h1);
 }
-#app .vp-doc span.md-toc-item.md-toc-h1>a:before {
+#app .vp-doc span.md-toc-item.md-toc-h1 > a:before {
   counter-increment: h1toc;
   content: var(--autonum-h1toc);
 }
@@ -334,100 +337,96 @@ h5 {
   content: var(--autonum-h2);
   color: var(--head-title-h2-color);
 }
-.outline-content .outline-h2>.outline-item>.outline-label:before {
+.outline-content .outline-h2 > .outline-item > .outline-label:before {
   counter-increment: h2;
   content: var(--autonum-h2);
 }
-li.outline-h2>div>a.outline-label:before {
+li.outline-h2 > div > a.outline-label:before {
   counter-increment: h2;
   content: var(--autonum-h2);
 }
 
-#app .vp-doc span.md-toc-item.md-toc-h2>a:before {
+#app .vp-doc span.md-toc-item.md-toc-h2 > a:before {
   counter-increment: h2toc;
   content: var(--autonum-h2toc);
 }
 
-
-#app .vp-doc h3>span:first-of-type::before {
+#app .vp-doc h3 > span:first-of-type::before {
   counter-increment: h3;
   content: var(--autonum-h3);
   color: var(--element-color);
 }
-#outline-content li.outline-h3>div>span.outline-label:before {
+#outline-content li.outline-h3 > div > span.outline-label:before {
   counter-increment: h3;
   content: var(--autonum-h3);
 }
-.outline-content .outline-h3>.outline-item>.outline-label:before {
+.outline-content .outline-h3 > .outline-item > .outline-label:before {
   counter-increment: h3;
   content: var(--autonum-h3);
 }
-#app .vp-doc span.md-toc-item.md-toc-h3>a:before {
+#app .vp-doc span.md-toc-item.md-toc-h3 > a:before {
   counter-increment: h3toc;
   content: var(--autonum-h3toc);
 }
 
-
-#app .vp-doc h4>span:first-of-type::before {
+#app .vp-doc h4 > span:first-of-type::before {
   counter-increment: h4;
   content: var(--autonum-h4);
   color: var(--element-color);
 }
-#outline-content li.outline-h4>div>span.outline-label:before {
+#outline-content li.outline-h4 > div > span.outline-label:before {
   counter-increment: h4;
   content: var(--autonum-h4);
 }
-.outline-content .outline-h4>.outline-item>.outline-label:before {
+.outline-content .outline-h4 > .outline-item > .outline-label:before {
   counter-increment: h4;
   content: var(--autonum-h4);
 }
-#app .vp-doc span.md-toc-item.md-toc-h4>a:before {
+#app .vp-doc span.md-toc-item.md-toc-h4 > a:before {
   counter-increment: h4toc;
   content: var(--autonum-h4toc);
 }
 
-
-#app .vp-doc h5>span:first-of-type::before {
+#app .vp-doc h5 > span:first-of-type::before {
   counter-increment: h5;
   content: var(--autonum-h5);
   color: var(--element-color);
 }
-#outline-content li.outline-h5>div>span.outline-label:before {
+#outline-content li.outline-h5 > div > span.outline-label:before {
   counter-increment: h5;
   content: var(--autonum-h5);
 }
-.outline-content .outline-h5>.outline-item>.outline-label:before {
+.outline-content .outline-h5 > .outline-item > .outline-label:before {
   counter-increment: h5;
   content: var(--autonum-h5);
 }
-#app .vp-doc span.md-toc-item.md-toc-h5>a:before {
+#app .vp-doc span.md-toc-item.md-toc-h5 > a:before {
   counter-increment: h5toc;
   content: var(--autonum-h5toc);
 }
 
-
-#app .vp-doc h6>span:first-of-type::before {
+#app .vp-doc h6 > span:first-of-type::before {
   counter-increment: h6;
   content: var(--autonum-h6);
   color: var(--element-color);
 }
-#outline-content li.outline-h6>div>span.outline-label:before {
+#outline-content li.outline-h6 > div > span.outline-label:before {
   counter-increment: h6;
   content: var(--autonum-h6);
 }
-.outline-content .outline-h6>.outline-item>.outline-label:before {
+.outline-content .outline-h6 > .outline-item > .outline-label:before {
   counter-increment: h6;
   content: var(--autonum-h6);
 }
-#app .vp-doc span.md-toc-item.md-toc-h6>a:before {
+#app .vp-doc span.md-toc-item.md-toc-h6 > a:before {
   counter-increment: h6toc;
   content: var(--autonum-h6toc);
 }
 
-
 /* 列表 */
 ::marker {
-  color: var(--element-color-deep);
+  color: var(--element-color-deep) !important;
+  font-weight: bold;
 }
 
 li.md-list-item {
@@ -480,7 +479,7 @@ li.md-list-item {
 }
 
 #app .vp-doc li:before {
-  content: "";
+  content: '';
   height: calc(100% - 50px);
   top: 35px;
   position: absolute;
@@ -490,7 +489,7 @@ li.md-list-item {
 
 /* 任务列表样式 */
 
-.task-list-item input{
+.task-list-item input {
   width: 1.25rem;
   height: 1.25rem;
   display: block;
@@ -499,12 +498,12 @@ li.md-list-item {
   left: 4px;
 }
 
-.task-list-item input:focus{
+.task-list-item input:focus {
   outline: none;
   box-shadow: none;
 }
 
-.task-list-item input:before{
+.task-list-item input:before {
   border: 1px solid var(--element-color-deep);
   border-radius: 1.2rem;
   width: 1.2rem;
@@ -516,10 +515,10 @@ li.md-list-item {
 }
 
 .task-list-item input:checked:before,
-.task-list-item input[checked]:before{
+.task-list-item input[checked]:before {
   background: var(--element-color-soo-shallow);
   border-width: 2px;
-  display:inline-block;
+  display: inline-block;
   transition: background-color 200ms ease-in-out;
 }
 
@@ -533,17 +532,17 @@ li.md-list-item {
   text-decoration-color:var(--element-color)
 } */
 
-.task-list-item input[type="checkbox"] + p span {
+.task-list-item input[type='checkbox'] + p span {
   position: relative;
   display: inline-block;
 }
 
-.task-list-item input[type="checkbox"] + p span::after {
-  content: "";
+.task-list-item input[type='checkbox'] + p span::after {
+  content: '';
   position: absolute;
   left: 0;
   top: 52%;
-  width: calc(100%*var(--check-line));
+  width: calc(100% * var(--check-line));
   height: 2px;
   background: var(--element-color);
   transform: scaleX(0);
@@ -551,11 +550,11 @@ li.md-list-item {
   transition: transform 0.2s ease-in-out;
 }
 
-.task-list-item input[type="checkbox"]:checked + p span::after {
+.task-list-item input[type='checkbox']:checked + p span::after {
   transform: scaleX(1);
 }
 
-.task-list-item input[type="checkbox"]:not(:checked) + p span::after {
+.task-list-item input[type='checkbox']:not(:checked) + p span::after {
   transform-origin: right center;
   transition-delay: 0.1s;
 }
@@ -692,13 +691,17 @@ pre.md-meta-block {
   background-color: var(--element-color-soo-shallow);
 }
 
+pre.shiki {
+  padding: 0;
+}
+
 /* 行内代码 */
 #app .vp-doc p code {
   padding: 3px 3px 1px;
   color: var(--element-color-linecode);
   background: var(--element-color-linecode-background);
   border-radius: 3px;
-  font-family: "CascadiaCode" monospace;
+  font-family: 'CascadiaCode' monospace;
   letter-spacing: 0.5px;
 }
 
@@ -707,10 +710,13 @@ pre.md-meta-block {
 }
 
 /* 代码块 */
+#app div[class^='language'] pre:not([lang='mermaid']) {
+  padding: 0;
+}
 
-.md-fences:not([lang="mermaid"])::before {
+#app div[class^='language'] pre:not([lang='mermaid'])::before {
   content: attr(lang);
-  font-family: "CascadiaCode" monospace;
+  font-family: 'CascadiaCode' monospace;
   text-align: right;
   padding-right: 15px;
   color: #7e7e7e;
@@ -729,14 +735,14 @@ pre.md-meta-block {
   overflow-x: auto;
 }
 
-.md-fences .cm-s-inner.CodeMirror {
+#app div[class^='language'] pre:not([lang='mermaid']) code {
   margin-top: -0.5rem;
 }
 
 .cm-s-inner.CodeMirror {
   padding: 1.2rem 0.8rem;
   color: #4f5467;
-  font-family: "CascadiaCode" monospace;
+  font-family: 'CascadiaCode' monospace;
   border-radius: 10px;
   background-color: #fa0303;
   /* border: 1px solid #eef2f5;*/
@@ -759,10 +765,10 @@ pre.CodeMirror-line {
   color: #a3a3a3;
 }
 
-.cm-s-inner.CodeMirror {
+#app div[class^='language'] pre:not([lang='mermaid']) code {
   background: #f8f8f8;
   border-radius: 0 0 5px 5px;
-  padding: 20px 10px 20px 10px;
+  padding: 20px 10px 20px 30px;
   page-break-before: auto;
   line-height: 1.8rem;
 }
@@ -911,10 +917,10 @@ kbd:hover {
 /* 目录 */
 
 .md-toc * {
-  font-family: "HarmonyOS_Sans_SC";
+  font-family: 'HarmonyOS_Sans_SC';
 }
 
-.md-tooltip-hide>span {
+.md-tooltip-hide > span {
   display: none;
 }
 
@@ -923,7 +929,7 @@ kbd:hover {
   display: inline-block;
   width: 100%;
   text-align: center;
-  content: "目录";
+  content: '目录';
   font-size: 20px;
   font-weight: 700;
   color: #000;
@@ -991,7 +997,7 @@ kbd:hover {
   line-height: 1.2rem;
 }
 
-.file-tree-node.active>.file-node-content {
+.file-tree-node.active > .file-node-content {
   color: var(--appui-color);
 }
 
@@ -1004,7 +1010,7 @@ span.file-node-title {
   padding-right: 0.2rem;
 }
 
-.file-tree-node.active>.file-node-background {
+.file-tree-node.active > .file-node-background {
   font-weight: bolder;
   border-left: 4px solid var(--appui-color);
   border-color: var(--appui-color);
@@ -1031,18 +1037,18 @@ span.file-node-title {
 }
 
 /* 侧边栏 大纲 */
-#outline-content .outline-h1>.outline-item {
+#outline-content .outline-h1 > .outline-item {
   font-size: larger;
   font-weight: bold;
   color: var(--element-color-deep);
 }
 
-#outline-content .outline-h1:not(:first-of-type)>.outline-item {
+#outline-content .outline-h1:not(:first-of-type) > .outline-item {
   margin-top: 10px;
 }
 
-#outline-content .outline-h2>.outline-item::before {
-  content: "";
+#outline-content .outline-h2 > .outline-item::before {
+  content: '';
   width: 12px;
   height: 12px;
   background: var(--element-color);
@@ -1060,7 +1066,7 @@ span.file-node-title {
 }
 
 #outline-content .outline-h2::after {
-  content: "";
+  content: '';
   height: calc(100% - 24px);
   width: 1px;
   background: var(--element-color);
@@ -1069,26 +1075,26 @@ span.file-node-title {
   top: 21px;
 }
 
-#outline-content .outline-h2>.outline-item:last-child:after {
+#outline-content .outline-h2 > .outline-item:last-child:after {
   display: none;
 }
 
-#outline-content .outline-h2>.outline-item>.outline-label {
+#outline-content .outline-h2 > .outline-item > .outline-label {
   line-height: 1.65rem;
   margin: 0;
 }
 
-#outline-content .outline-h2>.outline-item {
+#outline-content .outline-h2 > .outline-item {
   margin-bottom: -3px;
 }
 
-#outline-content .outline-h3>.outline-item>.outline-label {
+#outline-content .outline-h3 > .outline-item > .outline-label {
   border-left: 2px solid var(--element-color);
   padding-left: 8px;
 }
 
 .outline-item-active:not(.outline-item-wrapper)::after {
-  content: "";
+  content: '';
   position: relative;
   width: 11px;
   height: 8px;
@@ -1105,7 +1111,7 @@ body.typora-export {
 }
 
 .typora-export-content .outline-content::before {
-  content: "目录";
+  content: '目录';
   font-size: 20px;
   font-weight: bold;
   position: absolute;
@@ -1130,8 +1136,8 @@ body.typora-export {
   width: 0;
 }
 
-.typora-export-content .outline-item-active>.outline-item::after {
-  content: "";
+.typora-export-content .outline-item-active > .outline-item::after {
+  content: '';
   position: relative;
   width: 11px;
   height: 8px;
@@ -1150,18 +1156,18 @@ body.typora-export {
   text-overflow: ellipsis;
 }
 
-.outline-content .outline-h1>.outline-item {
+.outline-content .outline-h1 > .outline-item {
   font-size: larger;
   font-weight: bold;
   color: var(--element-color-deep);
 }
 
-.outline-content .outline-h1:not(:first-of-type)>.outline-item {
+.outline-content .outline-h1:not(:first-of-type) > .outline-item {
   margin-top: 10px;
 }
 
-.outline-content .outline-h2>.outline-item::before {
-  content: "";
+.outline-content .outline-h2 > .outline-item::before {
+  content: '';
   width: 12px;
   height: 12px;
   background: var(--element-color-deep);
@@ -1179,7 +1185,7 @@ body.typora-export {
 }
 
 .outline-content .outline-h2::after {
-  content: "";
+  content: '';
   height: calc(100% - 24px);
   width: 1px;
   background: var(--element-color);
@@ -1188,20 +1194,20 @@ body.typora-export {
   top: 21px;
 }
 
-.outline-content .outline-h2>.outline-item:last-child:after {
+.outline-content .outline-h2 > .outline-item:last-child:after {
   display: none;
 }
 
-.outline-content .outline-h2>.outline-item>.outline-label {
+.outline-content .outline-h2 > .outline-item > .outline-label {
   line-height: 1.65rem;
   margin: 0;
 }
 
-.outline-content .outline-h2>.outline-item {
+.outline-content .outline-h2 > .outline-item {
   margin-bottom: -3px;
 }
 
-.outline-content .outline-h3>.outline-item>.outline-label {
+.outline-content .outline-h3 > .outline-item > .outline-label {
   border-left: 2px solid var(--element-color);
   padding-left: 8px;
 }

docs/.vitepress/theme/style.css

@@ -45,10 +45,10 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
-html.dark #app{
+html.dark #app {
   --vp-nav-bg-color: #000000a7 !important;
 }
-.VPNavBar:not(.VPNavBar.top){
+.VPNavBar:not(.VPNavBar.top) {
   backdrop-filter: blur(10px);
 }
 
@@ -105,17 +105,9 @@ html.dark #app{
 
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    #5DD6CC 30%,
-    #B8F1CC
-  );
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #5dd6cc 30%, #b8f1cc);
 
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #B8F1CF 50%,
-    #47caff 50%
-  );
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #b8f1cf 50%, #47caff 50%);
   --vp-home-hero-image-filter: blur(44px);
 }
 
@@ -151,12 +143,18 @@ html.dark #app{
 
 :root {
   /* 标题后小图标，借鉴自思源笔记主题——Savor */
-  --h1-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.8 29.714v0c-1.371 0-2.514-1.143-2.514-2.514v0c0-1.371 1.143-2.514 2.514-2.514v0c1.371 0 2.514 1.143 2.514 2.514v0c0.114 1.371-1.029 2.514-2.514 2.514z'/></svg>") no-repeat center;
-  --h2-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>") no-repeat center;
-  --h3-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='28' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>") no-repeat center;
-  --h4-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>") no-repeat center;
-  --h5-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286zM4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>") no-repeat center;
-  --h6-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 16c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>") no-repeat center;
+  --h1-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.8 29.714v0c-1.371 0-2.514-1.143-2.514-2.514v0c0-1.371 1.143-2.514 2.514-2.514v0c1.371 0 2.514 1.143 2.514 2.514v0c0.114 1.371-1.029 2.514-2.514 2.514z'/></svg>")
+    no-repeat center;
+  --h2-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>")
+    no-repeat center;
+  --h3-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='28' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>")
+    no-repeat center;
+  --h4-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>")
+    no-repeat center;
+  --h5-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 22.857c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286zM4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286z'/></svg>")
+    no-repeat center;
+  --h6-r-graphic: url("data:image/svg+xml;utf8,<svg fill='rgba(74, 200, 141, 0.5)' height='24' viewBox='0 0 32 32' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M4.571 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM4.571 11.429c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 18.286c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 25.143c-1.257 0-2.286 1.029-2.286 2.286s1.029 2.286 2.286 2.286 2.286-1.029 2.286-2.286-1.029-2.286-2.286-2.286zM11.429 16c1.257 0 2.286-1.029 2.286-2.286s-1.029-2.286-2.286-2.286-2.286 1.029-2.286 2.286 1.029 2.286 2.286 2.286z'/></svg>")
+    no-repeat center;
 
   /* 是否开启网格背景？1 是；0 否 */
   --bg-grid: 0;
@@ -180,15 +178,12 @@ html.dark #app{
   --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) ". "; */
 
-
   /* 主题颜色 */
 
   --head-title-color: #3db8bf;
   /* 标题主色 */
   --head-title-h2-color: #fff;
-  --head-title-h2-background: linear-gradient(to right,
-      #3DB8D3,
-      #80F7C4);
+  --head-title-h2-background: linear-gradient(to right, #3db8d3, #80f7c4);
   /* 二级标题主色，因为二级标题是背景色的，所以单独设置 */
 
   --element-color: #3db8bf;
@@ -223,8 +218,10 @@ html.dark #app{
 * 黑暗模式切换动画
 * -------------------------------------------------------------------------- */
 
-#VPContent  .vp-doc > div {
-  animation: rises 1s, looming 1s;
+#VPContent .vp-doc > div {
+  animation:
+    rises 1s,
+    looming 1s;
 }
 
 @keyframes rises {
@@ -241,10 +238,29 @@ html.dark #app{
   0% {
     opacity: 0;
   }
-  50%{
+  50% {
     opacity: 0.3;
   }
   100% {
     opacity: 1;
   }
 }
+li {
+  position: relative;
+}
+.vp-doc li div[class*='language-'] {
+  margin: 12px;
+}
+html.dark .vp-doc div[class*='language-'],
+html.dark .vp-doc div[class*='language-'] pre {
+  background-color: #222222;
+}
+html .vp-doc div[class*='language-'],
+html .vp-doc div[class*='language-'] pre {
+  background-color: #f8f8f8;
+}
+#app div[class^='language'] {
+  border-radius: 1em;
+  overflow: hidden;
+  padding: 0.4em;
+}

docs/alist-config.md

@@ -0,0 +1,128 @@
+# Alist 下载配置说明
+
+## 概述
+
+项目已从 GitHub 下载方式切换到 Alist API 下载方式，包括：
+- 桌面应用的自动更新功能 (`src/main/autoUpdate.ts`)
+- 官方网站的下载功能 (`website/script.js`)
+
+## 配置步骤
+
+### 1. 修改 Alist 域名
+
+#### 桌面应用配置
+在 `src/main/autoUpdate.ts` 文件中，Alist 域名已配置为：
+
+```typescript
+const ALIST_BASE_URL = 'http://47.96.72.224:5244';
+```
+
+#### 网站配置
+在 `website/script.js` 文件中，Alist 域名已配置为：
+
+```javascript
+const ALIST_BASE_URL = 'http://47.96.72.224:5244';
+```
+
+如需修改域名，请同时更新这两个文件中的 `ALIST_BASE_URL` 配置。
+
+### 2. 认证信息
+
+已配置的认证信息：
+- 用户名: `ceruupdata`
+- 密码: `123456`
+
+### 3. 文件路径格式
+
+文件在 Alist 中的路径格式为：`/{version}/{文件名}`
+
+例如：
+- 版本 `v1.0.0` 的安装包 `app-setup.exe` 路径为：`/v1.0.0/app-setup.exe`
+
+## 工作原理
+
+### 桌面应用自动更新
+1. **认证**: 使用配置的用户名和密码向 Alist API 获取认证 token
+2. **获取文件信息**: 使用 token 调用 `/api/fs/get` 接口获取文件信息和签名
+3. **下载**: 使用带签名的直接下载链接下载文件
+4. **备用方案**: 如果 Alist 失败，自动回退到原始 URL 下载
+
+### 网站下载功能
+1. **获取版本列表**: 调用 `/api/fs/list` 获取根目录下的版本文件夹
+2. **获取文件列表**: 获取最新版本文件夹中的所有文件
+3. **平台匹配**: 根据用户平台自动匹配对应的安装包文件
+4. **生成下载链接**: 获取文件的直接下载链接
+5. **备用方案**: 如果 Alist 失败，自动回退到 GitHub API
+
+## API 接口
+
+### 认证接口
+```
+POST /api/auth/login
+{
+  "username": "ceruupdata",
+  "password": "123456"
+}
+```
+
+### 获取文件信息接口
+```
+POST /api/fs/get
+Headers: Authorization: {token}  # 注意：直接使用 token，不需要 "Bearer " 前缀
+{
+  "path": "/{version}/{fileName}"
+}
+```
+
+### 获取文件列表接口
+```
+POST /api/fs/list
+Headers: Authorization: {token}  # 注意：直接使用 token，不需要 "Bearer " 前缀
+{
+  "path": "/",
+  "password": "",
+  "page": 1,
+  "per_page": 100,
+  "refresh": false
+}
+```
+
+### 下载链接格式
+```
+{ALIST_BASE_URL}/d/{filePath}?sign={sign}
+```
+
+## 测试方法
+
+项目包含了一个测试脚本来验证 Alist 连接：
+
+```bash
+node scripts/test-alist.js
+```
+
+该脚本会：
+1. 测试服务器连通性
+2. 测试用户认证
+3. 测试文件列表获取
+4. 测试文件信息获取
+
+## 备用机制
+
+两个组件都实现了备用机制：
+
+### 桌面应用
+- 主要：使用 Alist API 下载
+- 备用：如果 Alist 失败，使用原始 URL 下载
+
+### 网站
+- 主要：使用 Alist API 获取版本和文件信息
+- 备用：如果 Alist 失败，回退到 GitHub API
+- 最终备用：跳转到 GitHub releases 页面
+
+## 注意事项
+
+1. 确保 Alist 服务器可以正常访问
+2. 确保配置的用户名和密码有权限访问相应的文件路径
+3. 文件必须按照指定的路径格式存放在 Alist 中
+4. 网站会自动检测用户操作系统并推荐对应的下载版本
+5. 所有下载都会显示文件大小信息

docs/alist-migration-summary.md

@@ -0,0 +1,88 @@
+# Alist 迁移完成总结
+
+## 修改概述
+
+项目已成功从 GitHub 下载方式迁移到 Alist API 下载方式。
+
+## 修改的文件
+
+### 1. 桌面应用自动更新 (`src/main/autoUpdate.ts`)
+- ✅ 添加了 Alist API 配置
+- ✅ 实现了 Alist 认证功能
+- ✅ 实现了 Alist 文件下载功能
+- ✅ 添加了备用机制（Alist 失败时回退到原始 URL）
+- ✅ 修复了 Authorization 头格式（使用直接 token 而非 Bearer 格式）
+
+### 2. 官方网站下载功能 (`website/script.js`)
+- ✅ 添加了 Alist API 配置
+- ✅ 实现了 Alist 认证功能
+- ✅ 实现了版本列表获取功能
+- ✅ 实现了文件列表获取功能
+- ✅ 实现了平台文件匹配功能
+- ✅ 添加了多层备用机制（Alist → GitHub API → GitHub 页面）
+- ✅ 修复了 Authorization 头格式
+
+### 3. 配置文档
+- ✅ 创建了详细的配置说明 (`docs/alist-config.md`)
+- ✅ 创建了迁移总结文档 (`docs/alist-migration-summary.md`)
+
+### 4. 测试脚本
+- ✅ 创建了 Alist 连接测试脚本 (`scripts/test-alist.js`)
+- ✅ 创建了认证格式测试脚本 (`scripts/auth-test.js`)
+
+## 配置信息
+
+### Alist 服务器配置
+- **服务器地址**: `http://47.96.72.224:5244`
+- **用户名**: `ceruupdate`
+- **密码**: `123456`
+- **文件路径格式**: `/{version}/{文件名}`
+
+### Authorization 头格式
+经过测试确认，正确的格式是：
+```
+Authorization: {token}
+```
+**注意**: 不需要 "Bearer " 前缀
+
+## 功能特性
+
+### 桌面应用
+1. **智能下载**: 优先使用 Alist API，失败时自动回退
+2. **进度显示**: 支持下载进度显示和节流
+3. **错误处理**: 完善的错误处理和日志记录
+
+### 网站
+1. **自动检测**: 自动检测用户操作系统并推荐对应版本
+2. **版本信息**: 自动获取最新版本信息和文件大小
+3. **多层备用**: Alist → GitHub API → GitHub 页面的三层备用机制
+4. **用户体验**: 加载状态、成功通知、错误提示
+
+## 测试结果
+
+✅ **Alist 连接测试**: 通过
+✅ **认证测试**: 通过
+✅ **文件列表获取**: 通过
+✅ **Authorization 头格式**: 已修复并验证
+
+## 可用文件
+
+测试显示 Alist 服务器当前包含以下文件：
+- `v1.2.1/` (版本目录)
+- `1111`
+- `L3YxLjIuMS8tMS4yLjEtYXJtNjQtbWFjLnppcA==`
+- `file2.msi`
+- `file.msi`
+
+## 后续维护
+
+1. **添加新版本**: 在 Alist 中创建新的版本目录（如 `v1.2.2/`）
+2. **上传文件**: 将对应平台的安装包上传到版本目录中
+3. **文件命名**: 确保文件名包含平台标识（如 `windows`, `mac`, `linux` 等）
+
+## 备注
+
+- 所有修改都保持了向后兼容性
+- 实现了完善的错误处理和备用机制
+- 用户体验不会因为迁移而受到影响
+- 可以随时回退到 GitHub 下载方式

docs/index.md

@@ -7,7 +7,7 @@ hero:
   text: '澜音 播放器'
   tagline: 澜音是一个跨平台的音乐播放器应用，支持基于合规插件获取公开音乐信息与播放功能。
   image:
-    src: './assets/logo.svg'
+    src: '/logo.svg'
   actions:
     - theme: brand
       text: 下载应用
@@ -56,7 +56,7 @@ Ceru Music 是基于 Electron 和 Vue 开发的跨平台桌面音乐播放器工
 - **Pinia**：状态管理工具
 - **Vite**：快速的前端构建工具
 - **CeruPlugins**：音乐插件运行环境（仅提供框架，不包含默认插件）
-- **AMLL**：音乐生态辅助模块（仅提供功能接口，不关联具体音乐数据源）
+- **AMLL**：音乐生态辅助模块
 
 ## 主要功能
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "ceru-music",
-  "version": "1.1.5",
+  "version": "1.2.2",
   "description": "一款简洁优雅的音乐播放器",
   "main": "./out/main/index.js",
   "author": "sqj,wldss,star",
   "license": "Apache-2.0",
-  "homepage": "https://electron-vite.org",
+  "homepage": "https://ceru.docs.shiqianjiang.cn",
   "scripts": {
     "format": "prettier --write .",
     "lint": "eslint --cache . --fix",
@@ -45,6 +45,7 @@
     "@pixi/sprite": "^7.4.3",
     "@types/needle": "^3.3.0",
     "NeteaseCloudMusicApi": "^4.27.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.11.0",
     "color-extraction": "^1.0.8",
     "crypto-js": "^4.2.0",
@@ -97,4 +98,4 @@
     "vue-eslint-parser": "^10.2.0",
     "vue-tsc": "^3.0.3"
   }
-}
+}

scripts/auth-test.js

@@ -0,0 +1,55 @@
+const axios = require('axios');
+
+const ALIST_BASE_URL = 'http://47.96.72.224:5244';
+const ALIST_USERNAME = 'ceruupdate';
+const ALIST_PASSWORD = '123456';
+
+async function test() {
+  // 认证
+  const auth = await axios.post(`${ALIST_BASE_URL}/api/auth/login`, {
+    username: ALIST_USERNAME,
+    password: ALIST_PASSWORD
+  });
+  
+  const token = auth.data.data.token;
+  console.log('Token received');
+
+  // 测试直接 token 格式
+  try {
+    const list = await axios.post(`${ALIST_BASE_URL}/api/fs/list`, {
+      path: '/',
+      password: '',
+      page: 1,
+      per_page: 30,
+      refresh: false
+    }, {
+      headers: { 'Authorization': token }
+    });
+    
+    console.log('Direct token works:', list.data.code === 200);
+    if (list.data.code === 200) {
+      console.log('Files:', list.data.data.content.map(f => f.name));
+    }
+  } catch (e) {
+    console.log('Direct token failed');
+  }
+
+  // 测试 Bearer 格式
+  try {
+    const list2 = await axios.post(`${ALIST_BASE_URL}/api/fs/list`, {
+      path: '/',
+      password: '',
+      page: 1,
+      per_page: 30,
+      refresh: false
+    }, {
+      headers: { 'Authorization': `Bearer ${token}` }
+    });
+    
+    console.log('Bearer format works:', list2.data.code === 200);
+  } catch (e) {
+    console.log('Bearer format failed');
+  }
+}
+
+test().catch(console.error);

scripts/test-alist.js

@@ -0,0 +1,131 @@
+const axios = require('axios');
+
+// Alist API 配置
+const ALIST_BASE_URL = 'http://47.96.72.224:5244';
+const ALIST_USERNAME = 'ceruupdate';
+const ALIST_PASSWORD = '123456';
+
+async function testAlistConnection() {
+  console.log('Testing Alist connection...');
+  
+  try {
+    // 0. 首先测试服务器是否可访问
+    console.log('0. Testing server accessibility...');
+    const pingResponse = await axios.get(`${ALIST_BASE_URL}/ping`, {
+      timeout: 5000
+    });
+    console.log('Server ping successful:', pingResponse.status);
+
+    // 1. 测试认证
+    console.log('1. Testing authentication...');
+    console.log(`Trying to authenticate with username: ${ALIST_USERNAME}`);
+    
+    const authResponse = await axios.post(`${ALIST_BASE_URL}/api/auth/login`, {
+      username: ALIST_USERNAME,
+      password: ALIST_PASSWORD
+    }, {
+      timeout: 10000,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    console.log('Auth response:', authResponse.data);
+
+    if (authResponse.data.code !== 200) {
+      // 尝试获取公共访问权限
+      console.log('Authentication failed, trying public access...');
+      
+      // 尝试不使用认证直接访问文件列表
+      const publicListResponse = await axios.post(`${ALIST_BASE_URL}/api/fs/list`, {
+        path: '/',
+        password: '',
+        page: 1,
+        per_page: 30,
+        refresh: false
+      }, {
+        timeout: 10000,
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      console.log('Public access response:', publicListResponse.data);
+      
+      if (publicListResponse.data.code === 200) {
+        console.log('✓ Public access successful');
+        return; // 如果公共访问成功，就不需要认证
+      }
+      
+      throw new Error(`Authentication failed: ${authResponse.data.message}`);
+    }
+
+    const token = authResponse.data.data.token;
+    console.log('✓ Authentication successful');
+
+    // 2. 测试文件列表
+    console.log('2. Testing file listing...');
+    const listResponse = await axios.post(`${ALIST_BASE_URL}/api/fs/list`, {
+      path: '/',
+      password: '',
+      page: 1,
+      per_page: 30,
+      refresh: false
+    }, {
+      timeout: 10000,
+      headers: {
+        'Authorization': `Bearer ${token}`,
+        'Content-Type': 'application/json'
+      }
+    });
+
+    console.log('List response:', listResponse.data);
+    
+    if (listResponse.data.code === 200) {
+      console.log('✓ File listing successful');
+      console.log('Available directories/files:');
+      listResponse.data.data.content.forEach(item => {
+        console.log(`  - ${item.name} (${item.is_dir ? 'directory' : 'file'})`);
+      });
+    }
+
+    // 3. 测试获取特定文件信息（如果存在版本目录）
+    console.log('3. Testing file info retrieval...');
+    try {
+      const fileInfoResponse = await axios.post(`${ALIST_BASE_URL}/api/fs/get`, {
+        path: '/v1.0.0'  // 测试版本目录
+      }, {
+        timeout: 10000,
+        headers: {
+          'Authorization': token,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      console.log('File info response:', fileInfoResponse.data);
+      
+      if (fileInfoResponse.data.code === 200) {
+        console.log('✓ File info retrieval successful');
+      }
+    } catch (error) {
+      console.log('ℹ Version directory /v1.0.0 not found (this is expected if no updates are available)');
+    }
+
+    console.log('\n✅ Alist connection test completed successfully!');
+    
+  } catch (error) {
+    console.error('❌ Alist connection test failed:', error.message);
+    
+    if (error.response) {
+      console.error('Response status:', error.response.status);
+      console.error('Response data:', error.response.data);
+    } else if (error.request) {
+      console.error('No response received. Check if the Alist server is running and accessible.');
+    }
+    
+    process.exit(1);
+  }
+}
+
+// 运行测试
+testAlistConnection();

src/main/autoUpdate.ts

@@ -20,6 +20,101 @@ interface UpdateInfo {
 const UPDATE_SERVER = 'https://update.ceru.shiqianjiang.cn';
 const UPDATE_API_URL = `${UPDATE_SERVER}/update/${process.platform}/${app.getVersion()}`;
 
+// Alist API 配置
+const ALIST_BASE_URL = 'http://47.96.72.224:5244'; // 请替换为实际的 alist 域名
+const ALIST_USERNAME = 'ceruupdate';
+const ALIST_PASSWORD = '123456';
+
+// Alist 认证 token
+let alistToken: string | null = null;
+
+// 获取 Alist 认证 token
+async function getAlistToken(): Promise<string> {
+  if (alistToken) {
+    return alistToken;
+  }
+
+  try {
+    console.log('Authenticating with Alist...');
+    const response = await axios.post(`${ALIST_BASE_URL}/api/auth/login`, {
+      username: ALIST_USERNAME,
+      password: ALIST_PASSWORD
+    }, {
+      timeout: 10000,
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+
+    console.log('Alist auth response:', response.data);
+
+    if (response.data.code === 200) {
+      alistToken = response.data.data.token;
+      console.log('Alist authentication successful');
+      return alistToken!; // 我们已经确认 token 存在
+    } else {
+      throw new Error(`Alist authentication failed: ${response.data.message || 'Unknown error'}`);
+    }
+  } catch (error: any) {
+    console.error('Alist authentication error:', error);
+    if (error.response) {
+      throw new Error(`Failed to authenticate with Alist: HTTP ${error.response.status} - ${error.response.data?.message || error.response.statusText}`);
+    } else {
+      throw new Error(`Failed to authenticate with Alist: ${error.message}`);
+    }
+  }
+}
+
+// 获取 Alist 文件下载链接
+async function getAlistDownloadUrl(version: string, fileName: string): Promise<string> {
+  const token = await getAlistToken();
+  const filePath = `/${version}/${fileName}`;
+
+  try {
+    console.log(`Getting file info for: ${filePath}`);
+    const response = await axios.post(`${ALIST_BASE_URL}/api/fs/get`, {
+      path: filePath
+    }, {
+      timeout: 10000,
+      headers: {
+        'Authorization': token,
+        'Content-Type': 'application/json'
+      }
+    });
+
+    console.log('Alist file info response:', response.data);
+
+    if (response.data.code === 200) {
+      const fileInfo = response.data.data;
+      
+      // 检查文件是否存在且有下载链接
+      if (fileInfo && fileInfo.raw_url) {
+        console.log('Using raw_url for download:', fileInfo.raw_url);
+        return fileInfo.raw_url;
+      } else if (fileInfo && fileInfo.sign) {
+        // 使用签名构建下载链接
+        const downloadUrl = `${ALIST_BASE_URL}/d${filePath}?sign=${fileInfo.sign}`;
+        console.log('Using signed download URL:', downloadUrl);
+        return downloadUrl;
+      } else {
+        // 尝试直接下载链接（无签名）
+        const directUrl = `${ALIST_BASE_URL}/d${filePath}`;
+        console.log('Using direct download URL:', directUrl);
+        return directUrl;
+      }
+    } else {
+      throw new Error(`Failed to get file info: ${response.data.message || 'Unknown error'}`);
+    }
+  } catch (error: any) {
+    console.error('Alist file info error:', error);
+    if (error.response) {
+      throw new Error(`Failed to get download URL from Alist: HTTP ${error.response.status} - ${error.response.data?.message || error.response.statusText}`);
+    } else {
+      throw new Error(`Failed to get download URL from Alist: ${error.message}`);
+    }
+  }
+}
+
 // 初始化自动更新器
 export function initAutoUpdater(window: BrowserWindow) {
   mainWindow = window;
@@ -128,8 +223,8 @@ export async function downloadUpdate() {
 }
 
 // 下载文件
-async function downloadFile(url: string): Promise<string> {
-  const fileName = path.basename(url);
+async function downloadFile(originalUrl: string): Promise<string> {
+  const fileName = path.basename(originalUrl);
   const downloadPath = path.join(app.getPath('temp'), fileName);
 
   // 进度节流变量
@@ -139,9 +234,24 @@ async function downloadFile(url: string): Promise<string> {
   const PROGRESS_THRESHOLD = 1; // 进度变化超过1%才发送
 
   try {
+    let downloadUrl = originalUrl;
+    
+    try {
+      // 从当前更新信息中提取版本号
+      const version = currentUpdateInfo?.name || app.getVersion();
+      
+      // 尝试使用 alist API 获取下载链接
+      downloadUrl = await getAlistDownloadUrl(version, fileName);
+      console.log('Using Alist download URL:', downloadUrl);
+    } catch (alistError) {
+      console.warn('Alist download failed, falling back to original URL:', alistError);
+      console.log('Using original download URL:', originalUrl);
+      downloadUrl = originalUrl;
+    }
+
     const response = await axios({
       method: 'GET',
-      url: url,
+      url: downloadUrl,
       responseType: 'stream',
       timeout: 30000, // 30秒超时
       onDownloadProgress: (progressEvent) => {

src/main/index.ts

@@ -40,6 +40,7 @@ function createTray(): void {
       label: '播放/暂停',
       click: () => {
         // 这里可以添加播放控制逻辑
+        console.log('music-control')
         mainWindow?.webContents.send('music-control')
       }
     },
@@ -75,7 +76,7 @@ function createWindow(): void {
   mainWindow = new BrowserWindow({
     width: 1100,
     height: 750,
-    minWidth: 970,
+    minWidth: 1100,
     minHeight: 670,
     show: false,
     center: true,
@@ -192,6 +193,11 @@ ipcMain.handle('service-music-request', async (_, api, args) => {
   return await musicService.request(api, args)
 })
 
+// 获取应用版本号
+ipcMain.handle('get-app-version', () => {
+  return app.getVersion()
+})
+
 aiEvents(mainWindow)
 import './events/musicCache'
 import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/autoUpdate'
@@ -199,18 +205,20 @@ import { registerAutoUpdateEvents, initAutoUpdateForWindow } from './events/auto
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.whenReady().then(async () => {
+app.whenReady().then(() => {
   // Set app user model id for windows
 
   electronApp.setAppUserModelId('com.cerulean.music')
 
-  // 初始化插件系统
-  try {
-    await pluginService.initializePlugins()
-    console.log('插件系统初始化完成')
-  } catch (error) {
-    console.error('插件系统初始化失败:', error)
-  }
+  setTimeout(async () => {
+    // 初始化插件系统
+    try {
+      await pluginService.initializePlugins()
+      console.log('插件系统初始化完成')
+    } catch (error) {
+      console.error('插件系统初始化失败:', error)
+    }
+  },1000)
 
   // Default open or close DevTools by F12 in development
   // and ignore CommandOrControl + R in production.

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

@@ -407,6 +407,7 @@ export default {
     return result.list[0].global_collection_id
   },
 
+  
   async getUserListDetailByLink({ info }, link) {
     let listInfo = info['0']
     let total = listInfo.count

src/preload/index.d.ts

@@ -8,7 +8,7 @@ interface CustomAPI {
   close: () => void
   setMiniMode: (isMini: boolean) => void
   toggleFullscreen: () => void
-  onMusicCtrl: (callback: (event: Event, args: any) => void) => void
+  onMusicCtrl: (callback: (event: Event, args: any) => void) => () => void
 
   music: {
     request: (api: string, args: any) => Promise<any>

src/preload/index.ts

@@ -21,8 +21,11 @@ const api = {
     ipcRenderer.send('window-mini-mode', isMini)
   },
   toggleFullscreen: () => ipcRenderer.send('window-toggle-fullscreen'),
-  onMusicCtrl: (callback: (event: Electron.IpcRendererEvent, ...args: any[]) => void) =>
-    ipcRenderer.on('music-control', callback),
+  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),

src/renderer/components.d.ts

@@ -8,6 +8,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AIFloatBallSettings: typeof import('./src/components/Settings/AIFloatBallSettings.vue')['default']
+    AudioVisualizer: typeof import('./src/components/Play/AudioVisualizer.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']
@@ -22,12 +24,15 @@ declare module 'vue' {
     SongVirtualList: typeof import('./src/components/Music/SongVirtualList.vue')['default']
     TAlert: typeof import('tdesign-vue-next')['Alert']
     TAside: typeof import('tdesign-vue-next')['Aside']
+    TBadge: typeof import('tdesign-vue-next')['Badge']
     TButton: typeof import('tdesign-vue-next')['Button']
+    TCard: typeof import('tdesign-vue-next')['Card']
     TContent: typeof import('tdesign-vue-next')['Content']
     TDialog: typeof import('tdesign-vue-next')['Dialog']
-    ThemeDemo: typeof import('./src/components/ThemeDemo.vue')['default']
+    TDropdown: typeof import('tdesign-vue-next')['Dropdown']
     ThemeSelector: typeof import('./src/components/ThemeSelector.vue')['default']
     TIcon: typeof import('tdesign-vue-next')['Icon']
+    TImage: typeof import('tdesign-vue-next')['Image']
     TInput: typeof import('tdesign-vue-next')['Input']
     TitleBarControls: typeof import('./src/components/TitleBarControls.vue')['default']
     TLayout: typeof import('tdesign-vue-next')['Layout']
@@ -35,6 +40,7 @@ declare module 'vue' {
     TRadioButton: typeof import('tdesign-vue-next')['RadioButton']
     TRadioGroup: typeof import('tdesign-vue-next')['RadioGroup']
     TSlider: typeof import('tdesign-vue-next')['Slider']
+    TSwitch: typeof import('tdesign-vue-next')['Switch']
     TTooltip: typeof import('tdesign-vue-next')['Tooltip']
     UpdateExample: typeof import('./src/components/UpdateExample.vue')['default']
     UpdateProgress: typeof import('./src/components/UpdateProgress.vue')['default']

src/renderer/index.html

@@ -2,7 +2,7 @@
 <html>
   <head lang="zh-CN">
     <meta charset="UTF-8" />
-    <title>Electron</title>
+    <title>澜音 Music</title>
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
     <!-- <meta
       http-equiv="Content-Security-Policy"

src/renderer/src/App.vue

@@ -17,7 +17,7 @@ import './assets/theme/cyan.css'
 onMounted(() => {
   userInfo.init()
   loadSavedTheme()
-  
+
   // 应用启动后延迟3秒检查更新，避免影响启动速度
   setTimeout(() => {
     checkForUpdates()
@@ -42,23 +42,36 @@ const loadSavedTheme = () => {
 
 const applyTheme = (themeName) => {
   const documentElement = document.documentElement
-  
+
   // 移除之前的主题
   documentElement.removeAttribute('theme-mode')
-  
+
   // 应用新主题（如果不是默认主题）
   if (themeName !== 'default') {
     documentElement.setAttribute('theme-mode', themeName)
   }
-  
+
   // 保存到本地存储
   localStorage.setItem('selected-theme', themeName)
 }
 </script>
 
 <template>
-  <router-view />
-  <GlobalAudio />
-  <FloatBall />
-  <UpdateProgress />
+  <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>
 </template>
+<style>
+.pagesApp {
+  width: 100vw;
+  position: fixed;
+}
+</style>

src/renderer/src/assets/base.css

@@ -1,8 +1,12 @@
 @import './icon_font/iconfont.css';
 :root {
-  --play-bottom-height: 86px;
+  --play-bottom-height: max(min(10vh, 80px), 70px);
+}
+@font-face {
+  font-family: 'lyricfont';
+  src: url('./lyricfont.ttf');
+  font-weight: 500;
 }
-
 *,
 *::before,
 *::after {
@@ -16,7 +20,7 @@ ul {
 }
 
 html {
-  font-size: min(1.4vw, 18px);
+  font-size: min(max(1.4vw, 15px), 18px);
 }
 
 .icon {

src/renderer/src/components/AI/FloatBall.vue

@@ -5,9 +5,12 @@ import DOMPurify from 'dompurify'
 import { Loading as TLoading } from 'tdesign-vue-next'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
 import { storeToRefs } from 'pinia'
+import { useSettingsStore } from '@renderer/store/Settings'
 
 const userStore = LocalUserDetailStore()
+const settingsStore = useSettingsStore()
 const { userInfo } = storeToRefs(userStore)
+const { settings } = storeToRefs(settingsStore)
 
 const ball = ref<HTMLElement | null>(null)
 const ballClass = ref('hidden-right') // 默认半隐藏
@@ -30,7 +33,7 @@ const windowSize = ref({ width: 0, height: 0 }) // 窗口尺寸
 
 // 显示悬浮球
 // 悬浮球可见性控制
-const isFloatBallVisible = ref(true)
+const isFloatBallVisible = ref(settings.value.showFloatBall !== false) // 默认显示，除非明确设置为false
 const isHovering = ref(false)
 
 const showBall = () => {
@@ -42,6 +45,7 @@ const showBall = () => {
 const closeBall = (e: MouseEvent) => {
   e.stopPropagation() // 阻止事件冒泡
   isFloatBallVisible.value = false
+  settingsStore.updateSettings({ showFloatBall: false })
 }
 
 // 鼠标进入悬浮球
@@ -60,7 +64,7 @@ const handleMouseLeave = () => {
 const startAutoHide = () => {
   clearTimer()
   timer = window.setTimeout(() => {
-    ballClass.value = 'hidden-right'
+    ballClass.value = isOnLeft.value ? 'hidden-left' : 'hidden-right'
   }, 3000) // 3 秒没操作缩回去
 }
 
@@ -102,11 +106,12 @@ const handleMouseMove = (e: MouseEvent) => {
 
   // 限制在屏幕范围内，底部边界为 height - 196，考虑外层容器尺寸120px
   const maxX = windowSize.value.width - 120
-  const maxY = windowSize.value.height - 196
+  const maxY = windowSize.value.height - 176
+  const minY = 90 // 顶部边界限制，不允许进入顶部90px区域
 
   ballPosition.value = {
     x: Math.max(0, Math.min(x, maxX)),
-    y: Math.max(0, Math.min(y, maxY))
+    y: Math.max(minY, Math.min(y, maxY))
   }
 }
 
@@ -119,8 +124,8 @@ const handleMouseUp = () => {
   document.removeEventListener('mouseup', handleMouseUp)
 
   if (hasDragged.value) {
-    // 自动吸边逻辑，考虑外层容器尺寸120px
-    const centerX = ballPosition.value.x + 60 // 外层容器中心点
+    // 自动吸边逻辑
+    const centerX = ballPosition.value.x + 60 // 悬浮球中心点
     const screenCenter = windowSize.value.width / 2
 
     if (centerX < screenCenter) {
@@ -130,12 +135,13 @@ const handleMouseUp = () => {
       ballClass.value = 'hidden-left'
     } else {
       // 吸附到右边
-      ballPosition.value.x = windowSize.value.width - 126
+      ballPosition.value.x = windowSize.value.width - 106
       isOnLeft.value = false
       ballClass.value = 'hidden-right'
     }
-
-    // 重新开启自动隐藏
+    // 保存位置到本地存储
+    saveBallPosition()
+    clearTimer()
     startAutoHide()
   }
 }
@@ -316,6 +322,15 @@ watch(
   { immediate: false }
 )
 
+// 监听设置变化，更新悬浮球可见性
+watch(
+  () => settings.value.showFloatBall,
+  (newValue) => {
+    isFloatBallVisible.value = newValue
+  },
+  { immediate: true }
+)
+
 // 更新窗口尺寸
 const updateWindowSize = () => {
   windowSize.value = {
@@ -324,25 +339,76 @@ const updateWindowSize = () => {
   }
 }
 
-// 初始化悬浮球位置
-const initBallPosition = () => {
+// 保存悬浮球位置到本地存储
+const saveBallPosition = () => {
+  const positionData = {
+    x: ballPosition.value.x,
+    y: ballPosition.value.y,
+    isOnLeft: isOnLeft.value
+  }
+  localStorage.setItem('floatBallPosition', JSON.stringify(positionData))
+}
+
+// 从本地存储加载悬浮球位置
+const loadBallPosition = () => {
+  try {
+    const savedPosition = localStorage.getItem('floatBallPosition')
+    if (savedPosition) {
+      const positionData = JSON.parse(savedPosition)
+      ballPosition.value = {
+        x: positionData.x,
+        y: positionData.y
+      }
+      isOnLeft.value = positionData.isOnLeft
+    } else {
+      // 如果没有保存过位置，使用默认位置
+      setDefaultPosition()
+    }
+  } catch (error) {
+    console.error('加载悬浮球位置失败:', error)
+    setDefaultPosition()
+  }
+}
+
+// 设置默认位置
+const setDefaultPosition = () => {
   updateWindowSize()
   ballPosition.value = {
     x: windowSize.value.width - 126, // 考虑外层容器尺寸120px
-    y: windowSize.value.height - 196
+    y: windowSize.value.height - 176
   }
   isOnLeft.value = false
 }
 
+// 初始化悬浮球位置
+const initBallPosition = () => {
+  updateWindowSize()
+  loadBallPosition()
+}
+
 // 定义 handleResize 函数
 const handleResize = () => {
   updateWindowSize()
-  initBallPosition()
+  // 保证悬浮球不超出边界
+  const maxX = windowSize.value.width - 120
+  const maxY = windowSize.value.height - 176
+  const minY = 90 // 顶部边界限制
+  
+  // 如果悬浮球在右侧，随窗口宽度变化更新位置
+  if (!isOnLeft.value) {
+    // 重新计算右侧位置
+    ballPosition.value.x = windowSize.value.width - 106
+  }
+  
+  // 确保位置在有效范围内
+  ballPosition.value.x = Math.max(0, Math.min(ballPosition.value.x, maxX))
+  ballPosition.value.y = Math.max(minY, Math.min(ballPosition.value.y, maxY))
 }
 
 onMounted(() => {
   initBallPosition()
   startAutoHide()
+  handleResize()
   window.addEventListener('resize', handleResize)
 })
 
@@ -351,6 +417,7 @@ onBeforeUnmount(() => {
   document.removeEventListener('mousemove', handleMouseMove)
   document.removeEventListener('mouseup', handleMouseUp)
   window.removeEventListener('resize', handleResize)
+  saveBallPosition() // 保存位置
 })
 </script>
 
@@ -398,7 +465,7 @@ onBeforeUnmount(() => {
         :style="{
           left: isOnLeft ? ballPosition.x + 120 + 'px' : 'auto',
           right: isOnLeft ? 'auto' : windowSize.width - ballPosition.x + 20 + 'px',
-          bottom: Math.max(20, 196) + 'px'
+          bottom: Math.max(20, 176) + 'px'
         }"
       >
         <div class="ask-header">
@@ -452,8 +519,8 @@ onBeforeUnmount(() => {
 }
 
 .float-ball {
-  width: 100px;
-  height: 100px;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
   background: #409eff;
   display: flex;

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

@@ -0,0 +1,326 @@
+<script lang="ts" setup>
+import { ref, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+import { ControlAudioStore } from '@renderer/store/ControlAudio'
+import { storeToRefs } from 'pinia'
+import audioManager from '@renderer/utils/audioManager'
+
+interface Props {
+  show?: boolean
+  height?: number
+  barCount?: number
+  color?: string
+  backgroundColor?: string
+}
+
+// 定义事件
+const emit = defineEmits<{
+  lowFreqUpdate: [volume: number]
+}>()
+
+const props = withDefaults(defineProps<Props>(), {
+  show: true,
+  height: 80,
+  barCount: 64,
+  color: 'rgba(255, 255, 255, 0.8)',
+  backgroundColor: 'transparent'
+})
+
+const canvasRef = ref<HTMLCanvasElement>()
+const animationId = ref<number>()
+const analyser = ref<AnalyserNode>()
+const dataArray = ref<Uint8Array>()
+const resizeObserver = ref<ResizeObserver>()
+const componentId = ref<string>(`visualizer-${Date.now()}-${Math.random()}`)
+
+const controlAudio = ControlAudioStore()
+const { Audio } = storeToRefs(controlAudio)
+
+// 初始化音频分析器
+const initAudioAnalyser = () => {
+  if (!Audio.value.audio) return
+
+  try {
+    // 计算所需的 fftSize - 必须是 2 的幂次方
+    const minSize = props.barCount * 2
+    let fftSize = 32
+    while (fftSize < minSize) {
+      fftSize *= 2
+    }
+    fftSize = Math.min(fftSize, 2048) // 限制最大值
+
+    // 使用音频管理器创建分析器
+    const createdAnalyser = audioManager.createAnalyser(Audio.value.audio, componentId.value, fftSize)
+    analyser.value = createdAnalyser || undefined
+    
+    if (analyser.value) {
+      // 创建数据数组，明确指定 ArrayBuffer 类型
+      const bufferLength = analyser.value.frequencyBinCount
+      dataArray.value = new Uint8Array(new ArrayBuffer(bufferLength))
+      console.log('音频分析器初始化成功')
+    } else {
+      console.warn('无法创建音频分析器，使用模拟数据')
+      // 创建一个默认大小的数据数组用于模拟数据
+      const bufferLength = fftSize / 2
+      dataArray.value = new Uint8Array(new ArrayBuffer(bufferLength))
+    }
+    
+  } catch (error) {
+    console.error('音频分析器初始化失败:', error)
+    // 创建一个默认大小的数据数组用于模拟数据
+    dataArray.value = new Uint8Array(new ArrayBuffer(256))
+  }
+}
+
+// 绘制可视化
+const draw = () => {
+  if (!canvasRef.value || !analyser.value || !dataArray.value) return
+
+  const canvas = canvasRef.value
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  // 获取频域数据或生成模拟数据
+  if (analyser.value && dataArray.value) {
+    // 有真实音频分析器，获取真实数据
+    analyser.value.getByteFrequencyData(dataArray.value as Uint8Array<ArrayBuffer>)
+  } else {
+    // 没有音频分析器，生成模拟数据
+    const time = Date.now() * 0.001
+    for (let i = 0; i < dataArray.value.length; i++) {
+      // 生成基于时间的模拟频谱数据
+      const frequency = i / dataArray.value.length
+      const amplitude = Math.sin(time * 2 + frequency * 10) * 0.5 + 0.5
+      const bass = Math.sin(time * 4) * 0.3 + 0.7 // 低频变化
+      dataArray.value[i] = Math.floor(amplitude * bass * 255 * (1 - frequency * 0.7))
+    }
+  }
+
+  // 计算低频音量 (80hz-120hz 范围)
+  // 假设采样率为 44100Hz，fftSize 为 256，则每个频率 bin 约为 172Hz
+  // 80-120Hz 大约对应前 1-2 个 bin
+  const lowFreqStart = 0
+  const lowFreqEnd = Math.min(3, dataArray.value.length) // 取前几个低频 bin
+  let lowFreqSum = 0
+  for (let i = lowFreqStart; i < lowFreqEnd; i++) {
+    lowFreqSum += dataArray.value[i]
+  }
+  const lowFreqVolume = (lowFreqSum / (lowFreqEnd - lowFreqStart)) / 255
+  
+  // 发送低频音量给父组件
+  emit('lowFreqUpdate', lowFreqVolume)
+
+  // 完全清空画布
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+  
+  // 如果有背景色，再填充背景
+  if (props.backgroundColor !== 'transparent') {
+    ctx.fillStyle = props.backgroundColor
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+  }
+
+  // 使用容器的实际尺寸进行计算，因为 ctx 已经缩放过了
+  const container = canvas.parentElement
+  if (!container) return
+  
+  const containerRect = container.getBoundingClientRect()
+  const canvasWidth = containerRect.width
+  const canvasHeight = props.height
+  
+  // 计算对称柱状图参数
+  const halfBarCount = Math.floor(props.barCount / 2)
+  const barWidth = (canvasWidth / 2) / halfBarCount
+  const maxBarHeight = canvasHeight * 0.9
+  const centerX = canvasWidth / 2
+
+  // 绘制左右对称的频谱柱状图
+  for (let i = 0; i < halfBarCount; i++) {
+    // 增强低频响应，让可视化更敏感
+    let barHeight = (dataArray.value[i] / 255) * maxBarHeight
+    
+    // 对数据进行增强处理，让变化更明显
+    barHeight = Math.pow(barHeight / maxBarHeight, 0.6) * maxBarHeight
+    
+    const y = canvasHeight - barHeight
+
+    // 创建渐变色
+    const gradient = ctx.createLinearGradient(0, canvasHeight, 0, y)
+    gradient.addColorStop(0, props.color)
+    gradient.addColorStop(1, props.color.replace(/[\d\.]+\)$/g, '0.3)'))
+
+    ctx.fillStyle = gradient
+    
+    // 绘制左侧柱状图（从中心向左）
+    const leftX = centerX - (i + 1) * barWidth
+    ctx.fillRect(leftX, y, barWidth, barHeight)
+    
+    // 绘制右侧柱状图（从中心向右）
+    const rightX = centerX + i * barWidth
+    ctx.fillRect(rightX, y, barWidth, barHeight)
+  }
+
+  // 继续动画
+  if (props.show && Audio.value.isPlay) {
+    animationId.value = requestAnimationFrame(draw)
+  }
+}
+
+// 开始可视化
+const startVisualization = () => {
+  if (!props.show || !Audio.value.isPlay) return
+  
+  if (!analyser.value) {
+    initAudioAnalyser()
+  }
+  
+  draw()
+}
+
+// 停止可视化
+const stopVisualization = () => {
+  try {
+    if (animationId.value) {
+      cancelAnimationFrame(animationId.value)
+      animationId.value = undefined
+    }
+  } catch (error) {
+    console.warn('停止动画帧时出错:', error)
+  }
+}
+
+// 监听播放状态变化
+watch(() => Audio.value.isPlay, (isPlaying) => {
+  if (isPlaying && props.show) {
+    startVisualization()
+  } else {
+    stopVisualization()
+  }
+})
+
+// 监听显示状态变化
+watch(() => props.show, (show) => {
+  if (show && Audio.value.isPlay) {
+    startVisualization()
+  } else {
+    stopVisualization()
+  }
+})
+
+
+// 设置画布尺寸的函数
+const resizeCanvas = () => {
+  if (!canvasRef.value) return
+  
+  const canvas = canvasRef.value
+  const container = canvas.parentElement
+  if (!container) return
+  
+  // 获取容器的实际尺寸
+  const containerRect = container.getBoundingClientRect()
+  const dpr = window.devicePixelRatio || 1
+  
+  // 设置 canvas 的实际尺寸
+  canvas.width = containerRect.width * dpr
+  canvas.height = props.height * dpr
+  
+  // 设置 CSS 尺寸
+  canvas.style.width = containerRect.width + 'px'
+  canvas.style.height = props.height + 'px'
+  
+  const ctx = canvas.getContext('2d')
+  if (ctx) {
+    // 重置变换矩阵并重新缩放
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.scale(dpr, dpr)
+  }
+  
+  console.log('Canvas resized:', containerRect.width, 'x', props.height)
+}
+
+// 组件挂载
+onMounted(() => {
+  if (canvasRef.value) {
+    resizeCanvas()
+    
+    // 使用 ResizeObserver 监听容器尺寸变化
+    resizeObserver.value = new ResizeObserver((entries) => {
+      for (const _entry of entries) {
+        // 使用 nextTick 确保 DOM 更新完成
+        nextTick(() => {
+          resizeCanvas()
+        })
+      }
+    })
+    
+    // 观察 canvas 元素的父容器
+    const container = canvasRef.value.parentElement
+    if (container) {
+      resizeObserver.value.observe(container)
+    }
+  }
+  
+  if (Audio.value.audio && props.show && Audio.value.isPlay) {
+    initAudioAnalyser()
+    startVisualization()
+  }
+})
+
+// 组件卸载
+onBeforeUnmount(() => {
+  console.log('AudioVisualizer 组件开始卸载')
+  
+  // 停止可视化动画
+  stopVisualization()
+  
+  // 清理音频上下文和相关资源
+  try {
+    // 只断开分析器连接，不断开共享的音频源
+    if (analyser.value) {
+      analyser.value.disconnect()
+      analyser.value = undefined
+    }
+    
+
+  } catch (error) {
+    console.warn('清理音频资源时出错:', error)
+  }
+  
+  // 断开 ResizeObserver
+  try {
+    if (resizeObserver.value) {
+      resizeObserver.value.disconnect()
+      resizeObserver.value = undefined
+    }
+  } catch (error) {
+    console.warn('断开 ResizeObserver 时出错:', error)
+  }
+  
+  // 清理数据数组
+  dataArray.value = undefined
+  
+  console.log('AudioVisualizer 组件卸载完成')
+})
+</script>
+
+<template>
+  <div class="audio-visualizer" :style="{ height: `${height}px` }">
+    <canvas
+      ref="canvasRef"
+      class="visualizer-canvas"
+      :style="{ height: `${height}px` }"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.audio-visualizer {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  
+  .visualizer-canvas {
+    width: 100%;
+    display: block;
+    border-radius: 4px;
+  }
+}
+</style>

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

@@ -1,6 +1,7 @@
 <!-- eslint-disable vue/require-toggle-inside-transition -->
 <script lang="ts" setup>
 import TitleBarControls from '../TitleBarControls.vue'
+import AudioVisualizer from './AudioVisualizer.vue'
 // import ShaderBackground from './ShaderBackground.vue'
 import {
   BackgroundRender,
@@ -23,13 +24,15 @@ interface Props {
   show?: boolean
   coverImage?: string
   songId?: string | null
-  songInfo: SongList | { songmid: number | null }
+  songInfo: SongList | { songmid: number | null },
+  mainColor:string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   show: false,
   coverImage: '@assets/images/Default.jpg',
-  songId: ''
+  songId: '',
+  mainColor: '#fff'
 })
 // 定义事件
 const emit = defineEmits(['toggle-fullscreen'])
@@ -76,7 +79,8 @@ const state = reactive({
   albumUrl: props.coverImage,
   albumIsVideo: false,
   currentTime: 0,
-  lyricLines: [] as LyricLine[]
+  lyricLines: [] as LyricLine[],
+  lowFreqVolume: 1.0
 })
 
 // 监听歌曲ID变化，获取歌词
@@ -242,93 +246,77 @@ watch(
     state.currentTime = Math.round(newTime * 1000)
   }
 )
+
+// 处理低频音量更新
+const handleLowFreqUpdate = (volume: number) => {
+  state.lowFreqVolume = volume
+}
 </script>
 
 <template>
   <div class="full-play" :class="{ active: props.show, 'use-black-text': useBlackText }">
     <!-- <ShaderBackground :cover-image="actualCoverImage" /> -->
-    <BackgroundRender
-      ref="bgRef"
-      :album="actualCoverImage"
-      :album-is-video="false"
-      :fps="30"
-      :flow-speed="4"
-      :low-freq-volume="1"
-      :has-lyric="state.lyricLines.length > 10"
-      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1"
-    />
+    <BackgroundRender ref="bgRef" :album="actualCoverImage" :album-is-video="false" :fps="30" :flow-speed="4"
+     :has-lyric="state.lyricLines.length > 10"
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1" />
     <!-- 全屏按钮 -->
-    <button
-      class="fullscreen-btn"
-      :class="{ 'black-text': useBlackText }"
-      @click="toggleFullscreen"
-    >
+    <button class="fullscreen-btn" :class="{ 'black-text': useBlackText }" @click="toggleFullscreen">
       <Fullscreen1Icon v-if="!isFullscreen" class="icon" />
       <FullscreenExit1Icon v-else class="icon" />
     </button>
-    <button
-      class="putawayscreen-btn"
-      :class="{ 'black-text': useBlackText }"
-      @click="emit('toggle-fullscreen')"
-    >
+    <button class="putawayscreen-btn" :class="{ 'black-text': useBlackText }" @click="emit('toggle-fullscreen')">
       <ChevronDownIcon class="icon" />
     </button>
     <Transition name="fade-nav">
-      <TitleBarControls
-        v-if="props.show"
-        class="top"
-        style="-webkit-app-region: drag"
-        :color="useBlackText ? 'black' : 'white'"
-      />
+      <TitleBarControls v-if="props.show" class="top" style="-webkit-app-region: drag"
+        :color="useBlackText ? 'black' : 'white'" />
     </Transition>
     <div class="playbox">
-      <!-- 播放控件内容
-      <div v-if="props.show" class="song-info">
-        <h1>当前播放</h1>
-        <p>这里将显示歌曲信息</p>
-      </div> -->
       <div class="left" :style="state.lyricLines.length <= 0 && 'width:100vw'">
-        <div
-          class="box"
-          :style="
-            !Audio.isPlay
-              ? 'animation-play-state: paused;'
-              : '' +
-                (state.lyricLines.length <= 0
-                  ? 'width:70vh;height:70vh; transition: width 0.3s ease, height 0.3s ease; transition-delay: 0.8s;'
-                  : '')
-          "
-        >
-          <t-image
-            :src="coverImage"
-            :style="
-              state.lyricLines.length > 0
-                ? 'width: min(20vw, 380px); height: min(20vw, 380px)'
-                : 'width: 45vh; height: 45vh;transition: width 0.3s ease, height 0.3s ease; transition-delay: 1s;'
-            "
-            shape="circle"
-            class="cover"
-          />
+        <div class="cd-container" 
+          :class="{ playing: Audio.isPlay }"
+          :style="!Audio.isPlay
+            ? 'animation-play-state: paused;'
+            : '' +
+            (state.lyricLines.length <= 0
+              ? 'width:70vh;height:70vh; transition: width 0.3s ease, height 0.3s ease; transition-delay: 0.8s;'
+              : '')
+          ">
+          <!-- 黑胶唱片 -->
+          <div class="vinyl-record"></div>
+          <!-- 唱片标签 -->
+          <div class="vinyl-label">
+            <t-image :src="coverImage" shape="circle" class="cover" />
+            <div class="label-shine"></div>
+          </div>
+          <!-- 中心孔 -->
+          <div class="center-hole"></div>
+
         </div>
       </div>
       <div v-show="state.lyricLines.length > 0" class="right">
-        <LyricPlayer
-          ref="lyricPlayerRef"
-          :lyric-lines="props.show ? state.lyricLines : []"
-          :current-time="state.currentTime"
-          :align-position="0.38"
-          style="mix-blend-mode: plus-lighter"
-          class="lyric-player"
-          @line-click="
+        <LyricPlayer ref="lyricPlayerRef" :lyric-lines="props.show ? state.lyricLines : []"
+          :current-time="state.currentTime"  class="lyric-player" @line-click="
             (e) => {
               if (Audio.audio) Audio.audio.currentTime = e.line.getLine().startTime / 1000
             }
           "
-        >
+          
+          >
           <template #bottom-line> Test Bottom Line </template>
         </LyricPlayer>
       </div>
     </div>
+    <!-- 音频可视化组件 -->
+    <div class="audio-visualizer-container" v-if="props.show&&coverImage">
+      <AudioVisualizer 
+        :show="props.show && Audio.isPlay" 
+        :height="70" 
+        :bar-count="80"
+        :color='mainColor'
+        @low-freq-update="handleLowFreqUpdate"
+      />
+    </div>
   </div>
 </template>
 
@@ -429,16 +417,15 @@ watch(
   .playbox {
     width: 100%;
     height: 100%;
-    // background-color: rgba(0, 0, 0, 0.256);
+    background-color: rgba(0, 0, 0, 0.256);
+    drop-filter: blur(10px);
+    padding: 0 10vw;
+    -webkit-drop-filter: blur(10px);
+    overflow: hidden;
     display: flex;
     position: relative;
 
-    :deep(.lyric-player) {
-      --amll-lyric-player-font-size: max(2vw, 29px);
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-    }
+
 
     .left {
       width: 40%;
@@ -454,33 +441,253 @@ watch(
       justify-content: center;
       align-items: center;
       margin: 0 0 var(--play-bottom-height) 0;
+      perspective: 1000px;
 
-      .box {
+      .cd-container {
         width: min(30vw, 700px);
         height: min(30vw, 700px);
-        background-color: #000000;
+        position: relative;
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: 1000%;
-        animation: rotateRecord 10s linear infinite;
+        animation: rotateRecord 33s linear infinite;
+        transition: filter .3s ease;
+        filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.6));
 
-        :deep(.cover) img {
-          user-select: none;
-          -webkit-user-drag: none;
+        &:hover {
+          filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.7));
+        }
+
+        /* 黑胶唱片主体 */
+        .vinyl-record {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          border-radius: 50%;
+          background: 
+            radial-gradient(circle at 50% 50%, #1a1a1a 0%, #0d0d0d 100%);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          
+          /* 唱片纹理轨道 */
+          &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: 
+              repeating-conic-gradient(
+                from 0deg,
+                transparent 0deg,
+                rgba(255, 255, 255, 0.02) 0.5deg,
+                transparent 1deg,
+                rgba(255, 255, 255, 0.01) 1.5deg,
+                transparent 2deg
+              ),
+              repeating-radial-gradient(
+                circle at 50% 50%,
+                transparent 0px,
+                rgba(255, 255, 255, 0.03) 1px,
+                transparent 2px,
+                transparent 8px
+              );
+            z-index: 1;
+          }
+
+          /* 唱片光泽效果 */
+          &::after {
+            content: '';
+            position: absolute;
+            top: 10%;
+            left: 10%;
+            width: 30%;
+            height: 30%;
+            background: 
+              radial-gradient(ellipse at 30% 30%, 
+                rgba(255, 255, 255, 0.15) 0%, 
+                rgba(255, 255, 255, 0.05) 40%, 
+                transparent 70%
+              );
+            border-radius: 50%;
+            z-index: 2;
+            animation: vinylShine 6s ease-in-out infinite;
+          }
+        }
+
+        /* 唱片标签区域 */
+        .vinyl-label {
+          position: absolute;
+          width: 60%;
+          height: 60%;
+          background: 
+            radial-gradient(circle at 50% 50%, 
+              rgba(40, 40, 40, 0.95) 0%, 
+              rgba(25, 25, 25, 0.98) 70%, 
+              rgba(15, 15, 15, 1) 100%
+            );
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 3;
+          box-shadow: 
+            inset 0 0 20px rgba(0, 0, 0, 0.8),
+            inset 0 0 0 1px rgba(255, 255, 255, 0.05),
+            0 0 10px rgba(0, 0, 0, 0.5);
+
+          :deep(.cover) {
+            position: relative;
+            z-index: 4;
+            border-radius: 50%;
+            overflow: hidden;
+            box-shadow: 
+              0 0 20px rgba(0, 0, 0, 0.4),
+              inset 0 0 0 2px rgba(255, 255, 255, 0.1);
+            width: 95% !important;
+            height: 95% !important;
+            aspect-ratio: 1 / 1;
+
+            img {
+              user-select: none;
+              -webkit-user-drag: none;
+              border-radius: 50%;
+              filter: brightness(0.85) contrast(1.15) saturate(1.1);
+              width: 100% !important;
+              height: 100% !important;
+              object-fit: cover;
+            }
+          }
+
+          /* 标签光泽 */
+          .label-shine {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+              radial-gradient(ellipse at 25% 25%, 
+                rgba(255, 255, 255, 0.1) 0%, 
+                transparent 50%
+              );
+            border-radius: 50%;
+            z-index: 5;
+            pointer-events: none;
+            animation: labelShine 8s ease-in-out infinite;
+          }
+        }
+
+        /* 中心孔 */
+        .center-hole {
+          position: absolute;
+          width: 8%;
+          height: 8%;
+          background: 
+            radial-gradient(circle, 
+              #000 0%, 
+              #111 30%, 
+              #222 70%, 
+              #333 100%
+            );
+          border-radius: 50%;
+          z-index: 10;
+          box-shadow: 
+            inset 0 0 8px rgba(0, 0, 0, 0.9),
+            0 0 3px rgba(0, 0, 0, 0.8);
         }
       }
     }
 
     .right {
+      :deep(.lyric-player) {
+        font-family: lyricfont;
+        --amll-lyric-player-font-size: min(2.6vw, 32px);
+
+        // bottom: max(2vw, 29px);
+
+        height: 120%;
+        transform: translateY(-10%);
+        &>div{
+          padding-bottom: 0;
+          overflow: hidden;
+          transform: translateY(-20px);
+        }
+      }
+      
       padding: 0 20px;
-      padding-top: 90px;
+      
+      margin: 80px 0 calc(var(--play-bottom-height)) 0;
+      overflow: hidden;
+
     }
   }
+
+  .audio-visualizer-container {
+    position: absolute;
+    bottom: calc(var(--play-bottom-height) - 10px);
+    z-index: 9999;
+    left: 0;
+    right: 0;
+    height: 60px;
+    // background: linear-gradient(to top, rgba(0, 0, 0, 0.3), transparent);
+    filter: blur(6px);
+    // max-width: 1000px;
+    // -webkit-backdrop-filter: blur(10px);
+    // border-top: 1px solid rgba(255, 255, 255, 0.1);
+    z-index: 5;
+    // padding: 0 20px;
+    display: flex;
+    align-items: center;
+    
+  }
 }
 
 @keyframes rotateRecord {
-  to {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vinylShine {
+  0% {
+    opacity: 0.1;
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    opacity: 0.2;
+    transform: rotate(180deg) scale(1.1);
+  }
+  100% {
+    opacity: 0.1;
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes labelShine {
+  0% {
+    opacity: 0.05;
+    transform: rotate(0deg);
+  }
+  25% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 0.1;
+    transform: rotate(180deg);
+  }
+  75% {
+    opacity: 0.15;
+  }
+  100% {
+    opacity: 0.05;
     transform: rotate(360deg);
   }
 }

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

@@ -34,7 +34,7 @@ const { setCurrentTime, start, stop, setVolume, setUrl } = controlAudio
 const showFullPlay = ref(false)
 document.addEventListener('keydown', KeyEvent)
 // 处理最小化右键的事件
-window.api.onMusicCtrl(() => {
+const removeMusicCtrlListener = window.api.onMusicCtrl(() => {
   togglePlayPause()
 })
 let timer: any = null
@@ -172,7 +172,7 @@ const playSong = async (song: SongList) => {
         // 同时更新播放列表中对应歌曲的URL
         const playlistIndex = list.value.findIndex((item) => item.songmid === song.songmid)
         if (playlistIndex !== -1) {
-          ;(list.value[playlistIndex] as any).url = urlToPlay
+          ; (list.value[playlistIndex] as any).url = urlToPlay
         }
       } catch (error) {
         throw error
@@ -377,13 +377,10 @@ const playNext = async () => {
         if (Audio.value.audio) {
           Audio.value.audio.currentTime = 0
         }
-
         // 如果当前正在播放，继续播放；如果暂停，保持暂停
-        if (Audio.value.isPlay) {
-          const startResult = start()
-          if (startResult && typeof startResult.then === 'function') {
-            await startResult
-          }
+        const startResult = start()
+        if (startResult && typeof startResult.then === 'function') {
+          await startResult
         }
         return
       }
@@ -412,7 +409,7 @@ const playNext = async () => {
 
 // 定期保存当前播放位置
 let savePositionInterval: number | null = null
-let unEnded:()=>any = ()=>{}
+let unEnded: () => any = () => { }
 // 初始化播放器
 onMounted(async () => {
   console.log('加载')
@@ -421,7 +418,8 @@ onMounted(async () => {
 
   // 监听音频结束事件，根据播放模式播放下一首
   unEnded = controlAudio.subscribe('ended', () => {
-    window.requestAnimationFrame(()=>{
+    window.requestAnimationFrame(() => {
+      console.log('播放结束')
       playNext()
     })
   })
@@ -473,6 +471,9 @@ onUnmounted(() => {
   if (savePositionInterval !== null) {
     clearInterval(savePositionInterval)
   }
+  if (removeMusicCtrlListener) {
+    removeMusicCtrlListener()
+  }
   unEnded()
 })
 
@@ -530,7 +531,9 @@ watch(
 
 // 全屏展示相关
 const toggleFullPlay = () => {
+  if (!songInfo.value.songmid) return
   showFullPlay.value = !showFullPlay.value
+
 }
 
 // 进度条相关
@@ -670,22 +673,24 @@ const handleProgressDragStart = (event: MouseEvent) => {
 const songInfo = ref<Omit<SongList, 'songmid'> & { songmid: null | number }>({
   songmid: null,
   hash: '',
-  singer: 'CeruMusic',
-  name: '未知歌曲名',
+  name: '欢迎使用CeruMusic 🎉',
+  singer: '可以配置音源插件来播放你的歌曲',
   albumName: '',
   albumId: 0,
   source: '',
   interval: '00:00',
-  img: 'https://oss.shiqianjiang.cn//storage/default/20250723/mmexport1744732a2f8406e483442888d29521de63ca4f98bc085a2.jpeg',
+  img: '',
   lrc: null,
   types: [],
   _types: {},
   typeUrl: {}
 })
-const maincolor = ref('rgba(0, 0, 0, 1)')
+const maincolor = ref('var(--td-brand-color-5)')
 const startmaincolor = ref('rgba(0, 0, 0, 1)')
 const contrastTextColor = ref('rgba(0, 0, 0, .8)')
-const hoverColor = ref('rgba(0,0,0,1)')
+const hoverColor = ref('var(--td-brand-color-5)')
+const playbg = ref('var(--td-brand-color-2)')
+const playbghover = ref('var(--td-brand-color-3)')
 async function setColor() {
   console.log('主题色刷新')
   const color = await extractDominantColor(songInfo.value.img)
@@ -694,8 +699,28 @@ async function setColor() {
   startmaincolor.value = `rgba(${color.r},${color.g},${color.b},.2)`
   contrastTextColor.value = await getBestContrastTextColorWithOpacity(songInfo.value.img, 0.6)
   hoverColor.value = await getBestContrastTextColorWithOpacity(songInfo.value.img, 1)
+  playbg.value = 'rgba(255,255,255,0.2)'
+  playbghover.value = 'rgba(255,255,255,0.33)'
 }
-watch(songInfo, setColor, { deep: true, immediate: true })
+watch(
+  songInfo,
+  async (newVal) => {
+    if (newVal.img) {
+      await setColor()
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const bg = ref('#ffffff46')
+watch(showFullPlay,(val)=>{
+  if(val){
+    console.log('背景hei')
+    bg.value = '#00000000'
+  }else{
+    bg.value = '#ffffff46'
+  }
+})
 // onMounted(setColor)
 </script>
 
@@ -703,12 +728,8 @@ watch(songInfo, setColor, { deep: true, immediate: true })
   <div class="player-container" @click.stop="toggleFullPlay">
     <!-- 进度条 -->
     <div class="progress-bar-container">
-      <div
-        ref="progressRef"
-        class="progress-bar"
-        @mousedown="handleProgressDragStart($event)"
-        @click.stop="handleProgressClick"
-      >
+      <div ref="progressRef" class="progress-bar" @mousedown="handleProgressDragStart($event)"
+        @click.stop="handleProgressClick">
         <div class="progress-background"></div>
         <div class="progress-filled" :style="{ width: `${progressPercentage}%` }"></div>
         <div class="progress-handle" :style="{ left: `${progressPercentage}%` }"></div>
@@ -718,7 +739,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
     <div class="player-content">
       <!-- 左侧：封面和歌曲信息 -->
       <div class="left-section">
-        <div class="album-cover">
+        <div class="album-cover" v-show="songInfo.img">
           <img :src="songInfo.img" alt="专辑封面" />
         </div>
 
@@ -751,22 +772,13 @@ watch(songInfo, setColor, { deep: true, immediate: true })
         <div class="extra-controls">
           <!-- 播放模式按钮 -->
           <t-tooltip :content="playModeTip">
-            <t-button
-              class="control-btn"
-              shape="circle"
-              variant="text"
-              @click.stop="updatePlayMode"
-            >
+            <t-button class="control-btn" shape="circle" variant="text" @click.stop="updatePlayMode">
               <i :class="playModeIconClass + ' ' + 'PlayMode'" style="width: 1.5em"></i>
             </t-button>
           </t-tooltip>
 
           <!-- 音量控制 -->
-          <div
-            class="volume-control"
-            @mouseenter="showVolumeSlider = true"
-            @mouseleave="showVolumeSlider = false"
-          >
+          <div class="volume-control" @mouseenter="showVolumeSlider = true" @mouseleave="showVolumeSlider = false">
             <button class="control-btn">
               <shengyin style="width: 1.5em; height: 1.5em" />
             </button>
@@ -775,12 +787,8 @@ watch(songInfo, setColor, { deep: true, immediate: true })
             <transition name="volume-popup">
               <div v-show="showVolumeSlider" class="volume-slider-container" @click.stop>
                 <div class="volume-slider">
-                  <div
-                    ref="volumeBarRef"
-                    class="volume-bar"
-                    @click="handleVolumeClick"
-                    @mousedown="handleVolumeDragStart"
-                  >
+                  <div ref="volumeBarRef" class="volume-bar" @click="handleVolumeClick"
+                    @mousedown="handleVolumeDragStart">
                     <div class="volume-background"></div>
                     <div class="volume-filled" :style="{ height: `${volumeValue}%` }"></div>
                     <div class="volume-handle" :style="{ bottom: `${volumeValue}%` }"></div>
@@ -793,38 +801,25 @@ watch(songInfo, setColor, { deep: true, immediate: true })
 
           <!-- 播放列表按钮 -->
           <t-tooltip content="播放列表">
-            <t-button
-              class="control-btn"
-              shape="circle"
-              variant="text"
-              @click.stop="togglePlaylist"
-            >
-              <liebiao style="width: 1.5em; height: 1.5em" />
-            </t-button>
+            <t-badge :count="list.length" :maxCount="99" color="#aaa">
+              <t-button class="control-btn" shape="circle" variant="text" @click.stop="togglePlaylist">
+                <liebiao style="width: 1.5em; height: 1.5em" />
+              </t-button>
+            </t-badge>
           </t-tooltip>
         </div>
       </div>
     </div>
   </div>
   <div class="fullbox">
-    <FullPlay
-      :song-id="songInfo.songmid ? songInfo.songmid.toString() : null"
-      :show="showFullPlay"
-      :cover-image="songInfo.img"
-      @toggle-fullscreen="toggleFullPlay"
-      :song-info="songInfo"
-    />
+    <FullPlay :song-id="songInfo.songmid ? songInfo.songmid.toString() : null" :show="showFullPlay"
+      :cover-image="songInfo.img" @toggle-fullscreen="toggleFullPlay" :song-info="songInfo" :main-color="maincolor" />
   </div>
 
   <!-- 播放列表 -->
   <div v-show="showPlaylist" class="cover" @click="showPlaylist = false"></div>
   <transition name="playlist-drawer">
-    <div
-      v-show="showPlaylist"
-      class="playlist-container"
-      :class="{ 'full-screen-mode': showFullPlay }"
-      @click.stop
-    >
+    <div v-show="showPlaylist" class="playlist-container" :class="{ 'full-screen-mode': showFullPlay }" @click.stop>
       <div class="playlist-header">
         <div class="playlist-title">播放列表 ({{ list.length }})</div>
         <button class="playlist-close" @click.stop="showPlaylist = false">
@@ -838,13 +833,8 @@ watch(songInfo, setColor, { deep: true, immediate: true })
           <p>请添加歌曲到播放列表，也可在设置中导入歌曲列表</p>
         </div>
         <div v-else class="playlist-songs">
-          <div
-            v-for="song in list"
-            :key="song.songmid"
-            class="playlist-song"
-            :class="{ active: song.songmid === currentSongId }"
-            @click="playSong(song)"
-          >
+          <div v-for="song in list" :key="song.songmid" class="playlist-song"
+            :class="{ active: song.songmid === currentSongId }" @click="playSong(song)">
             <div class="song-info">
               <div class="song-name">{{ song.name }}</div>
               <div class="song-artist">{{ song.singer }}</div>
@@ -890,7 +880,8 @@ watch(songInfo, setColor, { deep: true, immediate: true })
   bottom: 0;
   left: 0;
   right: 0;
-  background: #ffffff31;
+  transition: background .3s;
+  background: v-bind(bg);
   // border-top: 1px solid #e5e7eb;
   backdrop-filter: blur(1000px);
   z-index: 1000;
@@ -924,7 +915,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
       left: 0;
       right: 0;
       height: 100%;
-      background: #ffffff71;
+      background: transparent;
     }
 
     .progress-filled {
@@ -976,6 +967,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
   align-items: center;
   min-width: 0;
   flex: 1;
+  padding-top: 2px;
 
   .album-cover {
     width: 50px;
@@ -999,7 +991,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
 
     .song-name {
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 700;
       color: v-bind(hoverColor);
       white-space: nowrap;
       overflow: hidden;
@@ -1044,7 +1036,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
     }
 
     &.play-btn {
-      background-color: #ffffff27;
+      background-color: v-bind(playbg);
       transition: background-color 0.2s ease;
 
       border-radius: 50%;
@@ -1061,7 +1053,7 @@ watch(songInfo, setColor, { deep: true, immediate: true })
       }
 
       &:hover {
-        background-color: #ffffff62;
+        background-color: v-bind(playbghover);
         color: v-bind(contrastTextColor);
       }
     }

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

@@ -0,0 +1,81 @@
+<template>
+  <div class="float-ball-settings">
+    <t-card hover-shadow title="AI悬浮球设置">
+      <div class="card-body">
+        <div class="setting-item">
+          <span class="setting-label">显示AI悬浮球</span>
+          <t-switch v-model="showFloatBall" @change="handleFloatBallToggle" />
+        </div>
+        <div class="setting-description">
+          <p>开启后，AI悬浮球将显示在应用界面上，您可以随时与AI助手交流</p>
+          <p>关闭后，AI悬浮球将被隐藏，您可以随时在此处重新开启</p>
+        </div>
+      </div>
+    </t-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue'
+import { useSettingsStore } from '@renderer/store/Settings'
+import { storeToRefs } from 'pinia'
+
+const settingsStore = useSettingsStore()
+const { settings } = storeToRefs(settingsStore)
+
+// 悬浮球显示状态
+const showFloatBall = ref(settings.value.showFloatBall !== false)
+
+// 处理悬浮球开关切换
+const handleFloatBallToggle = (val: boolean) => {
+  settingsStore.updateSettings({ showFloatBall: val })
+}
+
+// 监听设置变化
+watch(
+  () => settings.value.showFloatBall,
+  (newValue) => {
+    showFloatBall.value = newValue !== false
+  }
+)
+
+onMounted(() => {
+  // 确保初始值与存储中的值一致
+  showFloatBall.value = settings.value.showFloatBall !== false
+})
+</script>
+
+<style scoped>
+.float-ball-settings {
+  width: 100%;
+}
+
+.card-body {
+  padding: 16px 0;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.setting-label {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--td-text-color-primary);
+}
+
+.setting-description {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--td-border-level-1-color);
+}
+
+.setting-description p {
+  margin: 8px 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+</style>

src/renderer/src/components/ThemeDemo.vue

@@ -1,195 +0,0 @@
-<template>
-  <div class="theme-demo">
-    <div class="demo-header">
-      <h1 class="demo-title">主题切换演示</h1>
-      <ThemeSelector />
-    </div>
-    
-    <div class="demo-content">
-      <div class="demo-card">
-        <h3 class="card-title">主要功能</h3>
-        <p class="card-text">这是一个现代化的主题切换组件，支持多种预设主题色。</p>
-        <button class="btn btn-primary">主要按钮</button>
-      </div>
-      
-      <div class="demo-card">
-        <h3 class="card-title">设计特点</h3>
-        <ul class="feature-list">
-          <li>简约美观的界面设计</li>
-          <li>平滑的过渡动画效果</li>
-          <li>响应式布局适配</li>
-          <li>深色模式支持</li>
-        </ul>
-      </div>
-      
-      <div class="demo-card">
-        <h3 class="card-title">交互元素</h3>
-        <div class="demo-controls">
-          <input type="text" class="form-control" placeholder="输入框示例" />
-          <button class="btn btn-secondary">次要按钮</button>
-          <a href="#" class="demo-link">链接示例</a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import ThemeSelector from './ThemeSelector.vue'
-</script>
-
-<style scoped>
-.theme-demo {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 24px;
-}
-
-.demo-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--td-component-border);
-}
-
-.demo-title {
-  font-size: 28px;
-  font-weight: 700;
-  color: var(--td-text-color-primary);
-  margin: 0;
-}
-
-.demo-content {
-  display: grid;
-  gap: 24px;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-}
-
-.demo-card {
-  background: var(--td-bg-color-container);
-  border: 1px solid var(--td-component-border);
-  border-radius: var(--td-radius-large);
-  padding: 24px;
-  box-shadow: var(--td-shadow-1);
-}
-
-.card-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--td-text-color-primary);
-  margin: 0 0 12px 0;
-}
-
-.card-text {
-  color: var(--td-text-color-secondary);
-  line-height: 1.6;
-  margin-bottom: 16px;
-}
-
-.feature-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.feature-list li {
-  color: var(--td-text-color-secondary);
-  padding: 8px 0;
-  position: relative;
-  padding-left: 20px;
-}
-
-.feature-list li::before {
-  content: '•';
-  color: var(--td-brand-color);
-  font-weight: bold;
-  position: absolute;
-  left: 0;
-}
-
-.demo-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.btn {
-  padding: 10px 16px;
-  border-radius: var(--td-radius-medium);
-  border: 1px solid transparent;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-decoration: none;
-  display: inline-block;
-  text-align: center;
-}
-
-.btn-primary {
-  background-color: var(--td-brand-color);
-  border-color: var(--td-brand-color);
-  color: white;
-}
-
-.btn-primary:hover {
-  background-color: var(--td-brand-color-hover);
-  border-color: var(--td-brand-color-hover);
-}
-
-.btn-secondary {
-  background-color: var(--td-bg-color-component);
-  border-color: var(--td-component-border);
-  color: var(--td-text-color-primary);
-}
-
-.btn-secondary:hover {
-  background-color: var(--td-bg-color-component-hover);
-  border-color: var(--td-component-border);
-}
-
-.form-control {
-  padding: 10px 12px;
-  border: 1px solid var(--td-component-border);
-  border-radius: var(--td-radius-medium);
-  background-color: var(--td-bg-color-container);
-  color: var(--td-text-color-primary);
-  font-size: 14px;
-  transition: all 0.2s ease;
-}
-
-.form-control:focus {
-  outline: none;
-  border-color: var(--td-brand-color);
-  box-shadow: 0 0 0 3px var(--td-brand-color-light);
-}
-
-.demo-link {
-  color: var(--td-brand-color);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-.demo-link:hover {
-  color: var(--td-brand-color-hover);
-  text-decoration: underline;
-}
-
-@media (max-width: 640px) {
-  .demo-header {
-    flex-direction: column;
-    gap: 16px;
-    align-items: flex-start;
-  }
-  
-  .demo-content {
-    grid-template-columns: 1fr;
-  }
-  
-  .demo-controls {
-    gap: 16px;
-  }
-}
-</style>

src/renderer/src/components/UpdateProgress.vue

@@ -5,20 +5,18 @@
         <h3>正在下载更新</h3>
         <p v-if="downloadState.updateInfo">版本 {{ downloadState.updateInfo.name }}</p>
       </div>
-      
+
       <div class="progress-content">
         <div class="progress-bar-container">
           <div class="progress-bar">
-            <div 
-              class="progress-fill" 
+            <div
+              class="progress-fill"
               :style="{ width: `${downloadState.progress.percent}%` }"
             ></div>
           </div>
-          <div class="progress-text">
-            {{ Math.round(downloadState.progress.percent) }}%
-          </div>
+          <div class="progress-text">{{ Math.round(downloadState.progress.percent) }}%</div>
         </div>
-        
+
         <div class="progress-details">
           <div class="download-info">
             <span>已下载: {{ formatBytes(downloadState.progress.transferred) }}</span>
@@ -46,46 +44,52 @@ let speedInterval: NodeJS.Timeout | null = null
 const calculateSpeed = () => {
   const currentTime = Date.now()
   const currentTransferred = downloadState.progress.transferred
-  
+
   if (lastTime > 0) {
     const timeDiff = (currentTime - lastTime) / 1000 // 秒
     const sizeDiff = currentTransferred - lastTransferred // 字节
-    
+
     if (timeDiff > 0) {
       downloadSpeed.value = sizeDiff / timeDiff
     }
   }
-  
+
   lastTransferred = currentTransferred
   lastTime = currentTime
 }
 
 // 监听下载进度变化
-watch(() => downloadState.progress.transferred, () => {
-  calculateSpeed()
-})
+watch(
+  () => downloadState.progress.transferred,
+  () => {
+    calculateSpeed()
+  }
+)
 
 // 开始监听时重置速度计算
-watch(() => downloadState.isDownloading, (isDownloading) => {
-  if (isDownloading) {
-    lastTransferred = 0
-    lastTime = 0
-    downloadSpeed.value = 0
-    
-    // 每秒更新一次速度显示
-    speedInterval = setInterval(() => {
-      if (!downloadState.isDownloading) {
-        downloadSpeed.value = 0
+watch(
+  () => downloadState.isDownloading,
+  (isDownloading) => {
+    if (isDownloading) {
+      lastTransferred = 0
+      lastTime = 0
+      downloadSpeed.value = 0
+
+      // 每秒更新一次速度显示
+      speedInterval = setInterval(() => {
+        if (!downloadState.isDownloading) {
+          downloadSpeed.value = 0
+        }
+      }, 1000)
+    } else {
+      if (speedInterval) {
+        clearInterval(speedInterval)
+        speedInterval = null
       }
-    }, 1000)
-  } else {
-    if (speedInterval) {
-      clearInterval(speedInterval)
-      speedInterval = null
+      downloadSpeed.value = 0
     }
-    downloadSpeed.value = 0
   }
-})
+)
 
 onUnmounted(() => {
   if (speedInterval) {
@@ -96,11 +100,11 @@ onUnmounted(() => {
 // 格式化字节大小
 const formatBytes = (bytes: number): string => {
   if (bytes === 0) return '0 B'
-  
+
   const k = 1024
   const sizes = ['B', 'KB', 'MB', 'GB']
   const i = Math.floor(Math.log(bytes) / Math.log(k))
-  
+
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 </script>
@@ -168,14 +172,14 @@ const formatBytes = (bytes: number): string => {
 
 .progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #0052d9, #266fe8);
+  background: linear-gradient(90deg, var(--td-brand-color-5), var(--td-brand-color-3));
   border-radius: 4px;
   transition: width 0.3s ease;
 }
 
 .progress-text {
   font-weight: 600;
-  color: #0052d9;
+  color: var(--td-brand-color-6);
   min-width: 40px;
   text-align: right;
 }
@@ -195,7 +199,7 @@ const formatBytes = (bytes: number): string => {
 
 .download-speed {
   text-align: center;
-  color: #0052d9;
+  color: var(--td-brand-color-4);
   font-weight: 500;
 }
 
@@ -205,21 +209,21 @@ const formatBytes = (bytes: number): string => {
     background: #2d2d2d;
     color: #fff;
   }
-  
+
   .progress-header h3 {
     color: #fff;
   }
-  
+
   .progress-header p {
     color: #ccc;
   }
-  
+
   .progress-bar {
     background-color: #404040;
   }
-  
+
   .progress-details {
     color: #ccc;
   }
 }
-</style>
+</style>

src/renderer/src/main.ts

@@ -1,4 +1,5 @@
 import './assets/base.css'
+import 'animate.css';
 
 // 引入组件库的少量全局样式变量
 // import 'tdesign-vue-next/es/style/index.css' //tdesign 组件样式

src/renderer/src/router/index.ts

@@ -1,6 +1,6 @@
 import { createWebHashHistory, createRouter, RouteRecordRaw, RouterOptions } from 'vue-router'
 
-const routes: RouteRecordRaw[] = [
+let routes: RouteRecordRaw[] = [
   {
     path: '/',
     name: 'welcome',
@@ -11,10 +11,6 @@ const routes: RouteRecordRaw[] = [
     redirect: '/home/find',
     component: () => import('@renderer/views/home/index.vue'),
     children: [
-      {
-        path: '',
-        redirect: '/home/find'
-      },
       {
         path: 'find',
         name: 'find',
@@ -45,6 +41,10 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/settings',
     name: 'settings',
+    meta: {
+      transitionIn: "animate__fadeIn",
+      transitionOut: "animate__fadeOut",
+    },
     component: () => import('@renderer/views/settings/index.vue')
   },
   {
@@ -53,9 +53,30 @@ const routes: RouteRecordRaw[] = [
     component: () => import('@renderer/views/settings/plugins.vue')
   }
 ]
+function setAnimate(routerObj: RouteRecordRaw[]) {
+  for (let i = 0; i < routerObj.length; i++) {
+    let item = routerObj[i];
+    if (item.children && item.children.length > 0) {
+      setAnimate(item.children);
+    } else {
+      if (item.meta) continue
+      item.meta = item.meta || {};
+      item.meta.transitionIn = 'animate__fadeInRight';
+      item.meta.transitionOut = 'animate__fadeOutLeft';
+    }
+  }
+}
+setAnimate(routes)
 const option: RouterOptions = {
   history: createWebHashHistory(),
-  routes
+  routes,
+  scrollBehavior(_to_, _from_, savedPosition) {
+    if (savedPosition) {
+      return savedPosition;
+    } else {
+      return { top: 0 };
+    }
+  },
 }
 
 const router = createRouter(option)

src/renderer/src/store/ControlAudio.ts

@@ -198,8 +198,8 @@ export const ControlAudioStore = defineStore('controlAudio', () => {
   }
   const stop = () => {
     if (Audio.audio) {
+      Audio.isPlay = false
       return transitionVolume(Audio.audio, Audio.volume / 100, false, true).then(() => {
-        Audio.isPlay = false
         Audio.audio?.pause()
       })
     }

src/renderer/src/store/LocalUserDetail.ts

@@ -20,7 +20,8 @@ export const LocalUserDetailStore = defineStore('Local', () => {
         topBarStyle: false,
         mainColor: '#00DAC0',
         volume: 80,
-        currentTime: 0
+        currentTime: 0,
+        selectSources: 'wy'
       }
       localStorage.setItem('userInfo', JSON.stringify(userInfo.value))
     }

src/renderer/src/store/Settings.ts

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface SettingsState {
+  showFloatBall: boolean
+}
+
+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
+    }
+  }
+
+  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
+  }
+})

src/renderer/src/utils/audioManager.ts

@@ -0,0 +1,116 @@
+// 全局音频管理器，用于管理音频源和分析器
+class AudioManager {
+  private static instance: AudioManager
+  private audioSources = new WeakMap<HTMLAudioElement, MediaElementAudioSourceNode>()
+  private audioContexts = new WeakMap<HTMLAudioElement, AudioContext>()
+  private analysers = new Map<string, AnalyserNode>()
+
+  static getInstance(): AudioManager {
+    if (!AudioManager.instance) {
+      AudioManager.instance = new AudioManager()
+    }
+    return AudioManager.instance
+  }
+
+  // 获取或创建音频源
+  getOrCreateAudioSource(audioElement: HTMLAudioElement): { source: MediaElementAudioSourceNode; context: AudioContext } | null {
+    try {
+      // 检查是否已经有音频源
+      let source = this.audioSources.get(audioElement)
+      let context = this.audioContexts.get(audioElement)
+
+      if (!source || !context || context.state === 'closed') {
+        // 创建新的音频上下文和源
+        context = new (window.AudioContext || (window as any).webkitAudioContext)()
+        source = context.createMediaElementSource(audioElement)
+        
+        // 连接到输出，确保音频能正常播放
+        source.connect(context.destination)
+        
+        // 存储引用
+        this.audioSources.set(audioElement, source)
+        this.audioContexts.set(audioElement, context)
+        
+        console.log('AudioManager: 创建新的音频源和上下文')
+      }
+
+      return { source, context }
+    } catch (error) {
+      console.error('AudioManager: 创建音频源失败:', error)
+      return null
+    }
+  }
+
+  // 创建分析器
+  createAnalyser(audioElement: HTMLAudioElement, id: string, fftSize: number = 256): AnalyserNode | null {
+    const audioData = this.getOrCreateAudioSource(audioElement)
+    if (!audioData) return null
+
+    const { source, context } = audioData
+
+    try {
+      // 创建分析器
+      const analyser = context.createAnalyser()
+      analyser.fftSize = fftSize
+      analyser.smoothingTimeConstant = 0.9
+
+      // 创建增益节点作为中介，避免直接断开主音频链
+      const gainNode = context.createGain()
+      gainNode.gain.value = 1.0
+
+      // 连接：source -> gainNode -> analyser
+      //                     -> destination (保持音频播放)
+      source.disconnect() // 先断开所有连接
+      source.connect(gainNode)
+      gainNode.connect(context.destination) // 确保音频继续播放
+      gainNode.connect(analyser) // 连接到分析器
+
+      // 存储分析器引用
+      this.analysers.set(id, analyser)
+
+      console.log('AudioManager: 创建分析器成功')
+      return analyser
+    } catch (error) {
+      console.error('AudioManager: 创建分析器失败:', error)
+      return null
+    }
+  }
+
+  // 移除分析器
+  removeAnalyser(id: string): void {
+    const analyser = this.analysers.get(id)
+    if (analyser) {
+      try {
+        analyser.disconnect()
+        this.analysers.delete(id)
+        console.log('AudioManager: 移除分析器成功')
+      } catch (error) {
+        console.warn('AudioManager: 移除分析器时出错:', error)
+      }
+    }
+  }
+
+  // 清理音频元素的所有资源
+  cleanupAudioElement(audioElement: HTMLAudioElement): void {
+    try {
+      const context = this.audioContexts.get(audioElement)
+      if (context && context.state !== 'closed') {
+        context.close()
+      }
+      
+      this.audioSources.delete(audioElement)
+      this.audioContexts.delete(audioElement)
+      
+      console.log('AudioManager: 清理音频元素资源')
+    } catch (error) {
+      console.warn('AudioManager: 清理资源时出错:', error)
+    }
+  }
+
+  // 获取分析器
+  getAnalyser(id: string): AnalyserNode | undefined {
+    return this.analysers.get(id)
+  }
+}
+
+export default AudioManager.getInstance()

src/renderer/src/utils/contrastColor.ts

@@ -1,4 +1,92 @@
-import { extractDominantColor } from './colorExtractor'
+import DefaultCover from '@renderer/assets/images/Default.jpg'
+import CoverImage from '@renderer/assets/images/cover.png'
+
+/**
+ * 直接从图片分析平均亮度，不依赖颜色提取器
+ * @param imageSrc 图片路径
+ * @returns 返回平均亮度值 (0-1)
+ */
+async function getImageAverageLuminance(imageSrc: string): Promise<number> {
+  return new Promise((resolve, reject) => {
+    // 处理相对路径
+    let actualSrc = imageSrc
+    if (
+      imageSrc.includes('@assets/images/Default.jpg') ||
+      imageSrc.includes('@renderer/assets/images/Default.jpg')
+    ) {
+      actualSrc = DefaultCover
+    } else if (
+      imageSrc.includes('@assets/images/cover.png') ||
+      imageSrc.includes('@renderer/assets/images/cover.png')
+    ) {
+      actualSrc = CoverImage
+    }
+
+    // 如果仍然是相对路径，使用默认亮度
+    if (actualSrc.startsWith('@')) {
+      console.warn('无法解析相对路径，使用默认亮度')
+      resolve(0.5) // 中等亮度
+      return
+    }
+
+    const img = new Image()
+    img.crossOrigin = 'Anonymous'
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas')
+        const ctx = canvas.getContext('2d')
+        if (!ctx) {
+          reject(new Error('无法创建canvas上下文'))
+          return
+        }
+
+        // 使用较小的采样尺寸提高性能
+        const size = 50
+        canvas.width = size
+        canvas.height = size
+
+        ctx.drawImage(img, 0, 0, size, size)
+        const imageData = ctx.getImageData(0, 0, size, size).data
+
+        let totalLuminance = 0
+        let pixelCount = 0
+
+        // 计算所有非透明像素的平均亮度
+        for (let i = 0; i < imageData.length; i += 4) {
+          // 忽略透明像素
+          if (imageData[i + 3] < 128) continue
+
+          const r = imageData[i] / 255
+          const g = imageData[i + 1] / 255
+          const b = imageData[i + 2] / 255
+
+          // 使用WCAG 2.0相对亮度公式
+          const R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
+          const G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
+          const B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
+
+          const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B
+          totalLuminance += luminance
+          pixelCount++
+        }
+
+        const averageLuminance = pixelCount > 0 ? totalLuminance / pixelCount : 0.5
+        resolve(averageLuminance)
+      } catch (error) {
+        console.error('分析图片亮度失败:', error)
+        resolve(0.5) // 默认中等亮度
+      }
+    }
+
+    img.onerror = () => {
+      console.error('图片加载失败:', actualSrc)
+      resolve(0.5) // 默认中等亮度
+    }
+
+    img.src = actualSrc
+  })
+}
 
 /**
  * 判断图片应该使用黑色还是白色作为对比色
@@ -7,46 +95,24 @@ import { extractDominantColor } from './colorExtractor'
  */
 export async function shouldUseBlackText(imageSrc: string): Promise<boolean> {
   try {
-    // 提取主要颜色
-    const dominantColor = await extractDominantColor(imageSrc)
-
-    // 使用更准确的相对亮度计算公式 (sRGB相对亮度)
-    // 先将RGB值标准化到0-1范围
-    const r = dominantColor.r / 255
-    const g = dominantColor.g / 255
-    const b = dominantColor.b / 255
-
-    // 应用sRGB转换
-    const R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
-    const G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
-    const B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
-
-    // 计算相对亮度 (WCAG 2.0公式)
-    const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B
-
-    // 计算与黑色和白色的对比度
-    // 对比度计算公式: (L1 + 0.05) / (L2 + 0.05)，其中L1是较亮的颜色，L2是较暗的颜色
-    const contrastWithBlack = (luminance + 0.05) / 0.05
-    const contrastWithWhite = 1.05 / (luminance + 0.05)
+    // 直接分析图片的平均亮度
+    const averageLuminance = await getImageAverageLuminance(imageSrc)
 
     console.log(
-      `颜色: RGB(${dominantColor.r},${dominantColor.g},${dominantColor.b}), ` +
-        `亮度: ${luminance.toFixed(3)}, ` +
-        `与黑色对比度: ${contrastWithBlack.toFixed(2)}, ` +
-        `与白色对比度: ${contrastWithWhite.toFixed(2)}`
+      `图片: ${imageSrc}, ` +
+        `平均亮度: ${averageLuminance.toFixed(3)} ` +
+        `(考虑半透明黑色背景覆盖效果)`
     )
 
-    // 不仅考虑亮度，还要考虑对比度
-    // 如果与黑色的对比度更高，说明背景较亮，应该使用黑色文字
-    // 如果与白色的对比度更高，说明背景较暗，应该使用白色文字
-    // 但对于中等亮度的颜色，我们需要更精细的判断
-
-    // 对于中等亮度的颜色(0.3-0.6)，我们更倾向于使用黑色文本，因为黑色文本通常更易读
-    if (luminance > 0.3) {
-      return true // 使用黑色文本
-    } else {
-      return false // 使用白色文本
-    }
+    // 考虑到图片会受到rgba(0, 0, 0, 0.256)背景覆盖，实际显示会更暗
+    // 大幅提高阈值，让白色文字在更多情况下被选择
+    // 只有非常明亮的图片才使用黑色文字
+    
+    const shouldUseBlack = averageLuminance >= 0.6
+    
+    console.log(`决定使用${shouldUseBlack ? '黑色' : '白色'}文字`)
+    
+    return shouldUseBlack
   } catch (error) {
     console.error('计算对比色失败:', error)
     // 默认返回白色作为安全选择
@@ -75,24 +141,11 @@ export async function getBestContrastTextColorWithOpacity(
   opacity: number = 1
 ): Promise<string> {
   try {
-    // 提取主要颜色
-    const dominantColor = await extractDominantColor(imageSrc)
+    // 使用相同的亮度分析逻辑
+    const averageLuminance = await getImageAverageLuminance(imageSrc)
 
-    // 使用更准确的相对亮度计算公式 (sRGB相对亮度)
-    const r = dominantColor.r / 255
-    const g = dominantColor.g / 255
-    const b = dominantColor.b / 255
-
-    // 应用sRGB转换
-    const R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4)
-    const G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4)
-    const B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)
-
-    // 计算相对亮度
-    const luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B
-
-    // 根据亮度决定文本颜色，使用更低的阈值
-    if (luminance > 0.3) {
+    // 使用与shouldUseBlackText相同的逻辑
+    if (averageLuminance >= 0.6) {
       // 背景较亮，使用黑色文本
       return `rgba(0, 0, 0, ${opacity})`
     } else {

src/renderer/src/utils/playlistManager.ts

@@ -12,8 +12,8 @@ type PlaylistEvents = {
 // 创建全局事件总线
 const emitter = mitt<PlaylistEvents>()
 
-// 将事件总线挂载到全局
-;(window as any).musicEmitter = emitter
+  // 将事件总线挂载到全局
+  ; (window as any).musicEmitter = emitter
 const qualityMap: Record<string, string> = {
   '128k': '标准音质',
   '192k': '高品音质',
@@ -87,8 +87,12 @@ export async function addToPlaylistAndPlay(
     }
 
     await MessagePlugin.success('已添加到播放列表并开始播放')
-  } catch (error) {
+  } catch (error: any) {
     console.error('播放失败:', error)
+    if (error.message) {
+      await MessagePlugin.error('播放失败了: ' + error.message)
+      return
+    }
     await MessagePlugin.error('播放失败了，可能还没有版权')
   }
 }

src/renderer/src/utils/volume.ts

@@ -8,7 +8,7 @@ export function transitionVolume(
 ): Promise<undefined> {
   clearInterval(timer)
   const playVolume = lengthen ? 40 : 20
-  const pauseVolume = lengthen ? 20 : 10
+  const pauseVolume = lengthen ? 30 : 20
   return new Promise((resolve) => {
     if (target) {
       timer = setInterval(() => {
@@ -22,7 +22,7 @@ export function transitionVolume(
     }
     timer = setInterval(() => {
       audio.volume = Math.max(audio.volume - volume / pauseVolume, 0)
-      if (audio.volume <= 20) {
+      if (audio.volume <= 0) {
         clearInterval(timer)
         audio.volume = volume
         resolve(undefined)

src/renderer/src/views/home/index.vue

@@ -89,89 +89,86 @@ const handleKeyDown = () => {
 </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 class="home">
+    <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="color: #000; font-weight: 800">Ceru Music</span>
+            </p>
           </div>
-          <p class="app-title">
-            <span style="color: #000; font-weight: 800">Ceru Music</span>
-          </p>
+
+          <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>
 
-        <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>
 
-    <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">
+                  <svg class="icon" aria-hidden="true">
+                    <use :xlink:href="`#icon-${source}`"></use>
+                  </svg>
+                  <t-input v-model="keyword" placeholder="搜索音乐、歌手" style="width: 100%" @enter="handleKeyDown">
+                    <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: #000" />
+                      </t-button>
+                    </template>
+                  </t-input>
+                </div>
 
-            <div class="search-container">
-              <div class="search-input">
-                <svg class="icon" aria-hidden="true">
-                  <use :xlink:href="`#icon-${source}`"></use>
-                </svg>
-                <t-input
-                  v-model="keyword"
-                  placeholder="搜索音乐、歌手"
-                  style="width: 100%"
-                  @enter="handleKeyDown"
-                >
-                  <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: #000" />
-                    </t-button>
-                  </template>
-                </t-input>
+                <TitleBarControls :color="'#000'"></TitleBarControls>
               </div>
+            </div>
 
-              <TitleBarControls :color="'#000'"></TitleBarControls>
+            <div class="mainContent">
+              <router-view v-slot="{ Component, route }">
+                <Transition name="page"
+                  :enter-active-class="`animate__animated ${route.meta.transitionIn} animate__fast`"
+                  :leave-active-class="`animate__animated ${route.meta.transitionOut} animate__fast`">
+                  <KeepAlive exclude="list">
+                    <component :is="Component" />
+                  </KeepAlive>
+                </Transition>
+              </router-view>
             </div>
           </div>
-
-          <div class="mainContent">
-            <keep-alive>
-              <router-view />
-            </keep-alive>
-          </div>
-        </div>
-      </t-content>
+        </t-content>
+      </t-layout>
     </t-layout>
-  </t-layout>
-  <PlayMusic />
+    <PlayMusic />
+  </div>
 </template>
 
 <style lang="scss" scoped>
+.animate__animated {
+  position: absolute;
+  width: 100%;
+}
+
 .home-container {
   height: calc(100vh - var(--play-bottom-height));
   overflow-y: hidden;
@@ -185,7 +182,7 @@ const handleKeyDown = () => {
 
 .sidebar {
   width: 15rem;
-  background-color: #fff;
+  background-image: linear-gradient(to bottom,var(--td-brand-color-4) -140vh, #ffffff 30vh);
   border-right: 0.0625rem solid #e5e7eb;
   flex-shrink: 0;
 
@@ -218,6 +215,7 @@ const handleKeyDown = () => {
         font-weight: 500;
         font-size: 1.125rem;
         color: #111827;
+
         span {
           font-weight: 500;
           color: #b8f0cc;
@@ -264,13 +262,16 @@ const handleKeyDown = () => {
     }
   }
 }
+
 :deep(.t-layout__content) {
   height: 100%;
   display: flex;
 }
+
 .content {
   padding: 0;
-  background: #f6f6f6;
+  background-image: linear-gradient(to bottom,var(--td-brand-color-4) -110vh, #ffffff 15vh);
+
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -288,6 +289,7 @@ const handleKeyDown = () => {
       &:last-of-type {
         margin-right: 0.5rem;
       }
+
       .iconfont {
         font-size: 1rem;
         color: #3d4043;
@@ -303,16 +305,21 @@ const handleKeyDown = () => {
       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: 18.75rem;
+        width: min(18.75rem,400px);
         margin-right: 0.5rem;
         border-radius: 1.25rem !important;
         background-color: #fff;
         overflow: hidden;
+        &:has(input:focus){
+          width: max(18.75rem,400px);
+        }
       }
 
       :deep(.t-input) {
@@ -333,11 +340,14 @@ const handleKeyDown = () => {
       }
     }
   }
+
   .mainContent {
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
-    height: 0; /* 确保flex子元素能够正确计算高度 */
+    position: relative;
+    height: 0;
+    /* 确保flex子元素能够正确计算高度 */
 
     &::-webkit-scrollbar {
       width: 0.375rem;

src/renderer/src/views/music/find.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch,WatchHandle, onUnmounted  } from 'vue'
 import { useRouter } from 'vue-router'
 import { LocalUserDetailStore } from '@renderer/store/LocalUserDetail'
 // 路由实例
@@ -11,11 +11,18 @@ const loading = ref(true)
 const error = ref('')
 
 // 热门歌曲数据
-const hotSongs:any = ref([])
+const hotSongs: any = ref([])
 
+
+let watchSource:WatchHandle |null = null
 // 获取热门歌单数据
 const fetchHotSonglist = async () => {
   const LocalUserDetail = LocalUserDetailStore()
+  watchSource =watch(LocalUserDetail.userSource,()=>{
+    if(LocalUserDetail.userSource.source){
+      fetchHotSonglist()
+    }
+  },{deep:true})
   try {
     loading.value = true
     error.value = ''
@@ -71,6 +78,11 @@ const playSong = (song: any): void => {
 onMounted(() => {
   fetchHotSonglist()
 })
+onUnmounted(()=>{
+  if(watchSource){
+    watchSource()
+  }
+})
 </script>
 
 <template>
@@ -229,6 +241,8 @@ onMounted(() => {
       width: 100%;
       height: 100%;
       object-fit: cover;
+      user-select: none;
+      -webkit-user-drag: none;
     }
   }
 

src/renderer/src/views/music/list.vue

@@ -186,6 +186,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .list-container {
+  box-sizing: border-box;
   background: #fafafa;
   box-sizing: border-box;
   width: 100%;

src/renderer/src/views/music/local.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { MessagePlugin } from 'tdesign-vue-next'
 
 // 本地音乐数据
 const localSongs = ref([
@@ -85,25 +86,303 @@ const deleteSong = (song: any): void => {
   console.log('删除歌曲:', song.title)
   // 这里可以添加删除确认和实际删除逻辑
 }
+
+// 歌单相关功能
+interface Playlist {
+  id: number
+  name: string
+  songs: any[]
+  createdAt: string
+  updatedAt: string
+}
+
+const playlists = ref<Playlist[]>([
+  {
+    id: 1,
+    name: '我喜欢的音乐',
+    songs: [localSongs.value[0], localSongs.value[2]],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  },
+  {
+    id: 2,
+    name: '周杰伦精选',
+    songs: [localSongs.value[1], localSongs.value[3], localSongs.value[4]],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  }
+])
+
+// 当前选中的歌单
+const currentPlaylist = ref<Playlist | null>(null)
+
+// 显示歌单对话框
+const showPlaylistDialog = ref(false)
+const showCreatePlaylistDialog = ref(false)
+const newPlaylistName = ref('')
+
+// 创建新歌单
+const createPlaylist = () => {
+  if (!newPlaylistName.value.trim()) {
+    MessagePlugin.warning('歌单名称不能为空')
+    return
+  }
+
+  const newPlaylist: Playlist = {
+    id: playlists.value.length + 1,
+    name: newPlaylistName.value,
+    songs: [],
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString()
+  }
+
+  playlists.value.push(newPlaylist)
+  newPlaylistName.value = ''
+  showCreatePlaylistDialog.value = false
+  MessagePlugin.success('歌单创建成功')
+}
+
+// 将当前播放列表保存为歌单
+const saveCurrentPlaylistAs = () => {
+  showCreatePlaylistDialog.value = true
+}
+
+// 一键播放歌单
+const playPlaylist = (playlist: Playlist) => {
+  if (playlist.songs.length === 0) {
+    MessagePlugin.warning('歌单中没有歌曲')
+    return
+  }
+
+  // 这里应该调用播放器的方法替换播放列表
+  console.log('播放歌单:', playlist.name, '共', playlist.songs.length, '首歌曲')
+  MessagePlugin.success(`已将播放列表替换为歌单"${playlist.name}"`)
+}
+
+// 查看歌单详情
+const viewPlaylist = (playlist: Playlist) => {
+  currentPlaylist.value = playlist
+  showPlaylistDialog.value = true
+}
+
+// 添加歌曲到歌单
+const addToPlaylist = (song: any, playlist: Playlist) => {
+  // 检查歌曲是否已在歌单中
+  const exists = playlist.songs.some((s) => s.id === song.id)
+  if (exists) {
+    MessagePlugin.warning(`歌曲"${song.title}"已在歌单中`)
+    return
+  }
+
+  playlist.songs.push(song)
+  playlist.updatedAt = new Date().toISOString()
+  MessagePlugin.success(`已将"${song.title}"添加到歌单"${playlist.name}"`)
+}
+
+// 从歌单中移除歌曲
+const removeFromPlaylist = (songId: number, playlist: Playlist) => {
+  const index = playlist.songs.findIndex((s) => s.id === songId)
+  if (index !== -1) {
+    const songTitle = playlist.songs[index].title
+    playlist.songs.splice(index, 1)
+    playlist.updatedAt = new Date().toISOString()
+    MessagePlugin.success(`已从歌单"${playlist.name}"中移除"${songTitle}"`)
+  }
+}
+
+// 删除歌单
+const deletePlaylist = (playlistId: number) => {
+  const index = playlists.value.findIndex((p) => p.id === playlistId)
+  if (index !== -1) {
+    const playlistName = playlists.value[index].name
+    playlists.value.splice(index, 1)
+
+    // 如果正在查看的歌单被删除，关闭对话框
+    if (currentPlaylist.value && currentPlaylist.value.id === playlistId) {
+      currentPlaylist.value = null
+      showPlaylistDialog.value = false
+    }
+
+    MessagePlugin.success(`已删除歌单"${playlistName}"`)
+  }
+}
 </script>
 
 <template>
-  <div class="local-container">
-    <!-- 页面标题和操作 -->
-    <div class="page-header">
-      <div class="header-left">
-        <h2>本地音乐</h2>
-        <div class="stats">
-          <span>{{ stats.totalSongs }} 首歌曲</span>
-          <span>总时长 {{ stats.totalDuration }}</span>
-          <span>总大小 {{ stats.totalSize }}</span>
+  <div>
+    <div class="local-container">
+      <!-- 页面标题和操作 -->
+      <div class="page-header">
+        <div class="header-left">
+          <h2>本地音乐</h2>
+          <div class="stats">
+            <span>{{ stats.totalSongs }} 首歌曲</span>
+            <span>总时长 {{ stats.totalDuration }}</span>
+            <span>总大小 {{ stats.totalSize }}</span>
+          </div>
+        </div>
+        <div class="header-actions">
+          <t-button theme="default" @click="openMusicFolder">
+            <i class="iconfont icon-shouye"></i>
+            打开文件夹
+          </t-button>
+          <t-button theme="primary" @click="importMusic">
+            <i class="iconfont icon-zengjia"></i>
+            导入音乐
+          </t-button>
+          <t-button theme="default" @click="saveCurrentPlaylistAs">
+            <i class="iconfont icon-baocun"></i>
+            保存为歌单
+          </t-button>
         </div>
       </div>
-      <div class="header-actions">
-        <t-button theme="default" @click="openMusicFolder">
-          <i class="iconfont icon-shouye"></i>
-          打开文件夹
-        </t-button>
+
+      <!-- 歌单区域 -->
+      <div class="playlists-section">
+        <div class="section-header">
+          <h3>我的歌单</h3>
+          <t-button theme="primary" variant="text" @click="showCreatePlaylistDialog = true">
+            <i class="iconfont icon-zengjia"></i>
+            新建歌单
+          </t-button>
+        </div>
+
+        <div class="playlists-grid">
+          <div v-for="playlist in playlists" :key="playlist.id" class="playlist-card">
+            <div class="playlist-cover" @click="viewPlaylist(playlist)">
+              <div class="cover-overlay">
+                <i class="iconfont icon-bofang"></i>
+              </div>
+            </div>
+            <div class="playlist-info">
+              <div class="playlist-name" @click="viewPlaylist(playlist)">{{ playlist.name }}</div>
+              <div class="playlist-meta">{{ playlist.songs.length }}首歌曲</div>
+            </div>
+            <div class="playlist-actions">
+              <t-button
+                shape="circle"
+                theme="primary"
+                variant="text"
+                size="small"
+                title="播放歌单"
+                @click="playPlaylist(playlist)"
+              >
+                <i class="iconfont icon-a-tingzhiwukuang"></i>
+              </t-button>
+              <t-button
+                shape="circle"
+                theme="default"
+                variant="text"
+                size="small"
+                title="查看详情"
+                @click="viewPlaylist(playlist)"
+              >
+                <i class="iconfont icon-liebiao"></i>
+              </t-button>
+              <t-button
+                shape="circle"
+                theme="danger"
+                variant="text"
+                size="small"
+                title="删除歌单"
+                @click="deletePlaylist(playlist.id)"
+              >
+                <i class="iconfont icon-shanchu"></i>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 音乐列表 -->
+      <div class="music-list">
+        <div class="list-header">
+          <div class="header-item index">#</div>
+          <div class="header-item title">标题</div>
+          <div class="header-item artist">艺术家</div>
+          <div class="header-item album">专辑</div>
+          <div class="header-item duration">时长</div>
+          <div class="header-item size">大小</div>
+          <div class="header-item format">格式</div>
+          <div class="header-item actions">操作</div>
+        </div>
+
+        <div class="list-body">
+          <div
+            v-for="(song, index) in localSongs"
+            :key="song.id"
+            class="song-row"
+            @dblclick="playSong(song)"
+          >
+            <div class="row-item index">{{ index + 1 }}</div>
+            <div class="row-item title">
+              <div class="song-title">{{ song.title }}</div>
+            </div>
+            <div class="row-item artist">{{ song.artist }}</div>
+            <div class="row-item album">{{ song.album }}</div>
+            <div class="row-item duration">{{ song.duration }}</div>
+            <div class="row-item size">{{ song.size }}</div>
+            <div class="row-item format">
+              <span class="format-badge">{{ song.format }}</span>
+              <span class="bitrate">{{ song.bitrate }}</span>
+            </div>
+            <div class="row-item actions">
+              <t-button
+                shape="circle"
+                theme="primary"
+                variant="text"
+                size="small"
+                title="播放"
+                @click="playSong(song)"
+              >
+                <i class="iconfont icon-a-tingzhiwukuang"></i>
+              </t-button>
+              <t-dropdown
+                :options="[
+                  {
+                    content: '添加到歌单',
+                    value: 'addToPlaylist',
+                    children: playlists.map((p) => ({ content: p.name, value: `playlist-${p.id}` }))
+                  }
+                ]"
+                @click="
+                  (data) => {
+                    if (data.startsWith('playlist-')) {
+                      const playlistId = parseInt(data.split('-')[1])
+                      const targetPlaylist = playlists.find((p) => p.id === playlistId)
+                      if (targetPlaylist) {
+                        addToPlaylist(song, targetPlaylist)
+                      }
+                    }
+                  }
+                "
+              >
+                <t-button shape="circle" theme="default" variant="text" size="small" title="更多">
+                  <i class="iconfont icon-gengduo"></i>
+                </t-button>
+              </t-dropdown>
+              <t-button
+                shape="circle"
+                theme="danger"
+                variant="text"
+                size="small"
+                title="删除"
+                @click="deleteSong(song)"
+              >
+                <i class="iconfont icon-shanchu"></i>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-if="localSongs.length === 0" class="empty-state">
+        <div class="empty-icon">
+          <i class="iconfont icon-music"></i>
+        </div>
+        <h3>暂无本地音乐</h3>
+        <p>点击"导入音乐"按钮添加您的音乐文件</p>
         <t-button theme="primary" @click="importMusic">
           <i class="iconfont icon-zengjia"></i>
           导入音乐
@@ -111,87 +390,110 @@ const deleteSong = (song: any): void => {
       </div>
     </div>
 
-    <!-- 音乐列表 -->
-    <div class="music-list">
-      <div class="list-header">
-        <div class="header-item index">#</div>
-        <div class="header-item title">标题</div>
-        <div class="header-item artist">艺术家</div>
-        <div class="header-item album">专辑</div>
-        <div class="header-item duration">时长</div>
-        <div class="header-item size">大小</div>
-        <div class="header-item format">格式</div>
-        <div class="header-item actions">操作</div>
-      </div>
+    <!-- 创建歌单对话框 -->
+    <t-dialog
+      v-model:visible="showCreatePlaylistDialog"
+      header="创建新歌单"
+      :confirm-btn="{ content: '创建', theme: 'primary' }"
+      :cancel-btn="{ content: '取消' }"
+      @confirm="createPlaylist"
+    >
+      <t-input
+        v-model="newPlaylistName"
+        placeholder="请输入歌单名称"
+        clearable
+        @keyup.enter="createPlaylist"
+      />
+    </t-dialog>
 
-      <div class="list-body">
-        <div
-          v-for="(song, index) in localSongs"
-          :key="song.id"
-          class="song-row"
-          @dblclick="playSong(song)"
-        >
-          <div class="row-item index">{{ index + 1 }}</div>
-          <div class="row-item title">
-            <div class="song-title">{{ song.title }}</div>
+    <!-- 歌单详情对话框 -->
+    <t-dialog
+      v-model:visible="showPlaylistDialog"
+      :header="currentPlaylist?.name || '歌单详情'"
+      width="800px"
+      :footer="false"
+    >
+      <template v-if="currentPlaylist">
+        <div class="playlist-header">
+          <div class="playlist-info">
+            <h3>{{ currentPlaylist.name }}</h3>
+            <div class="playlist-meta">
+              <span>{{ currentPlaylist.songs.length }} 首歌曲</span>
+              <span>创建于 {{ new Date(currentPlaylist.createdAt).toLocaleDateString() }}</span>
+            </div>
           </div>
-          <div class="row-item artist">{{ song.artist }}</div>
-          <div class="row-item album">{{ song.album }}</div>
-          <div class="row-item duration">{{ song.duration }}</div>
-          <div class="row-item size">{{ song.size }}</div>
-          <div class="row-item format">
-            <span class="format-badge">{{ song.format }}</span>
-            <span class="bitrate">{{ song.bitrate }}</span>
-          </div>
-          <div class="row-item actions">
-            <t-button
-              shape="circle"
-              theme="primary"
-              variant="text"
-              size="small"
-              title="播放"
-              @click="playSong(song)"
-            >
+          <div class="playlist-actions">
+            <t-button theme="primary" @click="playPlaylist(currentPlaylist)">
               <i class="iconfont icon-a-tingzhiwukuang"></i>
-            </t-button>
-            <t-button shape="circle" theme="default" variant="text" size="small" title="更多">
-              <i class="iconfont icon-gengduo"></i>
-            </t-button>
-            <t-button
-              shape="circle"
-              theme="danger"
-              variant="text"
-              size="small"
-              title="删除"
-              @click="deleteSong(song)"
-            >
-              <i class="iconfont icon-shanchu"></i>
+              一键播放
             </t-button>
           </div>
         </div>
-      </div>
-    </div>
 
-    <!-- 空状态 -->
-    <div v-if="localSongs.length === 0" class="empty-state">
-      <div class="empty-icon">
-        <i class="iconfont icon-music"></i>
-      </div>
-      <h3>暂无本地音乐</h3>
-      <p>点击"导入音乐"按钮添加您的音乐文件</p>
-      <t-button theme="primary" @click="importMusic">
-        <i class="iconfont icon-zengjia"></i>
-        导入音乐
-      </t-button>
-    </div>
+        <div class="playlist-songs">
+          <div class="list-header">
+            <div class="header-item index">#</div>
+            <div class="header-item title">标题</div>
+            <div class="header-item artist">艺术家</div>
+            <div class="header-item album">专辑</div>
+            <div class="header-item duration">时长</div>
+            <div class="header-item actions">操作</div>
+          </div>
+
+          <div class="list-body">
+            <div
+              v-for="(song, index) in currentPlaylist.songs"
+              :key="song.id"
+              class="song-row"
+              @dblclick="playSong(song)"
+            >
+              <div class="row-item index">{{ index + 1 }}</div>
+              <div class="row-item title">
+                <div class="song-title">{{ song.title }}</div>
+              </div>
+              <div class="row-item artist">{{ song.artist }}</div>
+              <div class="row-item album">{{ song.album }}</div>
+              <div class="row-item duration">{{ song.duration }}</div>
+              <div class="row-item actions">
+                <t-button
+                  shape="circle"
+                  theme="primary"
+                  variant="text"
+                  size="small"
+                  title="播放"
+                  @click="playSong(song)"
+                >
+                  <i class="iconfont icon-a-tingzhiwukuang"></i>
+                </t-button>
+                <t-button
+                  shape="circle"
+                  theme="danger"
+                  variant="text"
+                  size="small"
+                  title="从歌单中移除"
+                  @click="removeFromPlaylist(song.id, currentPlaylist)"
+                >
+                  <i class="iconfont icon-shanchu"></i>
+                </t-button>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="currentPlaylist.songs.length === 0" class="empty-playlist">
+            <p>歌单中暂无歌曲</p>
+          </div>
+        </div>
+      </template>
+    </t-dialog>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .local-container {
   padding: 2rem;
-  max-width: 1400px;
   margin: 0 auto;
+  width: 100%;
+  position: relative;
 }
 
 .page-header {
@@ -231,6 +533,7 @@ const deleteSong = (song: any): void => {
 }
 
 .music-list {
+  width: 100%;
   background: #fff;
   border-radius: 0.75rem;
   overflow: hidden;
@@ -239,7 +542,9 @@ const deleteSong = (song: any): void => {
 
 .list-header {
   display: grid;
-  grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
+  width: 100%;
+  grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
+
   gap: 1rem;
   padding: 1rem 1.5rem;
   background: #f9fafb;
@@ -257,7 +562,8 @@ const deleteSong = (song: any): void => {
 .list-body {
   .song-row {
     display: grid;
-    grid-template-columns: 60px 1fr 150px 150px 80px 80px 120px 120px;
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr 1fr 1fr;
+
     gap: 1rem;
     padding: 1rem 1.5rem;
     border-bottom: 1px solid #f3f4f6;
@@ -365,4 +671,152 @@ const deleteSong = (song: any): void => {
     margin-bottom: 2rem;
   }
 }
+
+/* 歌单区域样式 */
+.playlists-section {
+  margin-bottom: 2rem;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #111827;
+    }
+  }
+}
+
+.playlists-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.playlist-card {
+  background: #fff;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    .playlist-cover .cover-overlay {
+      opacity: 1;
+    }
+  }
+
+  .playlist-cover {
+    height: 160px;
+    background: linear-gradient(135deg, #4f46e5, #7c3aed);
+    position: relative;
+    cursor: pointer;
+
+    .cover-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+
+      .iconfont {
+        font-size: 3rem;
+        color: #fff;
+      }
+    }
+  }
+
+  .playlist-info {
+    padding: 1rem;
+
+    .playlist-name {
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 0.25rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
+
+      &:hover {
+        color: #4f46e5;
+      }
+    }
+
+    .playlist-meta {
+      font-size: 0.75rem;
+      color: #6b7280;
+    }
+  }
+
+  .playlist-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 1rem 1rem;
+    gap: 0.5rem;
+  }
+}
+
+/* 歌单详情对话框样式 */
+.playlist-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+
+  .playlist-info {
+    h3 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: #111827;
+      margin-bottom: 0.5rem;
+    }
+
+    .playlist-meta {
+      display: flex;
+      gap: 1rem;
+      font-size: 0.875rem;
+      color: #6b7280;
+
+      span {
+        &:not(:last-child)::after {
+          content: '•';
+          margin-left: 1rem;
+          color: #d1d5db;
+        }
+      }
+    }
+  }
+}
+
+.playlist-songs {
+  .list-header {
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
+  }
+
+  .list-body .song-row {
+    grid-template-columns: 0.5fr 2fr 1fr 3fr 1fr 1fr;
+  }
+}
+
+.empty-playlist {
+  text-align: center;
+  padding: 2rem;
+  color: #6b7280;
+}
 </style>

src/renderer/src/views/settings/index.vue

@@ -53,6 +53,7 @@ const clearAPIKey = (): void => {
 import { useRouter } from 'vue-router'
 import { computed, watch } from 'vue'
 import MusicCache from '@renderer/components/Settings/MusicCache.vue'
+import AIFloatBallSettings from '@renderer/components/Settings/AIFloatBallSettings.vue'
 const router = useRouter()
 const goPlugin = () => {
   router.push('/plugins')
@@ -181,7 +182,7 @@ const getCurrentSourceName = () => {
     <div class="settings-container">
       <div class="settings-content">
         <div class="settings-header">
-          <h2>标题栏控制组件演示</h2>
+          <h2>设置你的顶部控制栏</h2>
           <p>这里展示了两种不同风格的标题栏控制按钮</p>
         </div>
 
@@ -289,6 +290,8 @@ const getCurrentSourceName = () => {
               </div>
             </div>
           </div>
+          <AIFloatBallSettings></AIFloatBallSettings>
+
         </div>
 
         <!-- 播放列表管理部分 -->
@@ -430,7 +433,9 @@ const getCurrentSourceName = () => {
             <MusicCache></MusicCache>
           </div>
         </div>
-
+        <div class="demo-section">
+          <Versions></Versions>
+        </div>
 
         <div class="demo-section">
           <h3>功能说明</h3>
@@ -508,7 +513,7 @@ const getCurrentSourceName = () => {
 }
 
 .settings-content {
-  max-width: 800px;
+  max-width: 1100px;
   margin: 0 auto;
   background: #fff;
   padding: 2rem;
@@ -574,7 +579,7 @@ const getCurrentSourceName = () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.75rem 1rem;
+  padding: 14px 1rem;
   background: #f6f6f6;
   border-radius: 0.375rem;
   border: 1px solid #d1d5db;
@@ -602,7 +607,7 @@ const getCurrentSourceName = () => {
 
   .iconfont {
     font-size: 1.25rem;
-    color: #f97316;
+    color: var(--td-brand-color);
     margin-top: 0.125rem;
   }
 
@@ -1015,23 +1020,23 @@ const getCurrentSourceName = () => {
 }
 
 // 响应式设计
-@media (max-width: 768px) {
-  .music-config-container {
-    .source-cards {
-      grid-template-columns: 1fr;
-    }
+// @media (max-width: 768px) {
+//   .music-config-container {
+//     .source-cards {
+//       grid-template-columns: 1fr;
+//     }
 
-    .config-status {
-      grid-template-columns: 1fr;
-    }
-  }
+//     .config-status {
+//       grid-template-columns: 1fr;
+//     }
+//   }
 
-  .plugin-prompt {
-    flex-direction: column;
-    text-align: center;
-    gap: 1.5rem;
-  }
-}
+//   .plugin-prompt {
+//     flex-direction: column;
+//     text-align: center;
+//     gap: 1.5rem;
+//   }
+// }
 
 // 动画效果
 @keyframes fadeInUp {

src/renderer/src/views/welcome/index.vue

@@ -1,13 +1,312 @@
-<script setup lang="ts">
-import { useRouter } from 'vue-router'
-const router = useRouter()
-router.push('home')
-</script>
-
 <template>
-  <div>
-    <h1>欢迎来到Ceru Music</h1>
+  <div class="welcome-container">
+    <!-- 左侧Logo区域 -->
+    <div class="logo-section">
+      <div class="image-container">
+        <div class="image-bg"></div>
+        <img class="logo-image" src="/logo.svg" alt="Ceru Music Logo">
+      </div>
+    </div>
+
+    <!-- 右侧内容区域 -->
+    <div class="content-section">
+      <div class="brand-content">
+        <h1 class="brand-title">Cerulean Music</h1>
+        <p class="brand-subtitle">澜音-纯净音乐，极致音乐体验</p>
+
+        <!-- 加载状态 -->
+        <!-- <div class="loading-area">
+          <div class="progress-bar">
+            <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+          </div>
+          <p class="loading-text">{{ loadingText }}</p>
+        </div> -->
+
+        <!-- 特性标签 -->
+        <div class="feature-tags">
+          <span class="tag" v-for="(feature, index) in features" :key="index">
+            {{ feature }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <!-- 版本信息 -->
+    <div class="version-info">v{{ version }}</div>
   </div>
 </template>
 
-<style scoped></style>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const version = ref('1.0.0') // 默认版本号
+
+// 特性列表
+const features = ['高品质音乐', '简约风', '离线播放', '丰富的插件支持']
+
+onMounted(async () => {
+  // 通过IPC获取版本号
+  try {
+    const appVersion = await window.electron.ipcRenderer.invoke('get-app-version')
+    if (appVersion) {
+      version.value = appVersion
+    }
+  } catch (error) {
+    console.warn('Failed to get app version via IPC:', error)
+  }
+
+  setTimeout(() => {
+    router.push('/home')
+  }, 2000)
+})
+</script>
+
+<style scoped>
+.welcome-container {
+  width: 100vw;
+  height: 100vh;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
+  position: relative;
+}
+
+/* 左侧Logo区域 */
+.logo-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.image-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-bg {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  width: min(30vw, 70vh);
+  height: min(30vw, 70vh);
+  background-image: linear-gradient(-45deg, #b8f1cf 50%, #47caff 50%);
+  filter: blur(56px);
+  transform: translate(-50%, -50%);
+  z-index: 0;
+}
+
+.logo-image {
+  width: min(30vw, 70vh);
+  height: min(30vw, 70vh);
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.1));
+}
+
+/* 右侧内容区域 */
+.content-section {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 2rem 4rem 2rem 2rem;
+}
+
+.brand-content {
+  /* max-width: 400px; */
+  animation: slideInRight 1s ease-out;
+}
+
+.brand-title {
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin: 0 0 1rem 0;
+  background: -webkit-linear-gradient(120deg, #5dd6cc 30%, #b8f1cc);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: -2px;
+  line-height: 1.1;
+}
+
+.brand-subtitle {
+  font-size: 1.5rem;
+  color: #666666;
+  margin: 1rem 0 5rem 0;
+  font-weight: 400;
+}
+
+/* 加载区域 */
+.loading-area {
+  margin-bottom: 2rem;
+}
+
+.progress-bar {
+  width: 100%;
+  height: 4px;
+  background: #f0f0f0;
+  border-radius: 2px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(-45deg, #b8f1cf 0%, #47caff 100%);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.loading-text {
+  font-size: 0.9rem;
+  color: #888888;
+  margin: 0;
+  font-weight: 400;
+}
+
+/* 特性标签 */
+.feature-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag {
+  padding: 0.4rem 0.8rem;
+  background: #B8F1CE;
+  border: 1px solid #e9ecef;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  color: #333333;
+  transition: all 0.3s ease;
+  opacity: 0.5;
+}
+
+.tag.active {
+  background: linear-gradient(-45deg, #25ff7c 0%, #47caff 100%);
+  border-color: transparent;
+  color: white;
+  opacity: 1;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(71, 202, 255, 0.3);
+}
+
+/* 版本信息 */
+.version-info {
+  position: absolute;
+  bottom: 2rem;
+  right: 2rem;
+  font-size: 0.8rem;
+  color: #9e9e9e;
+  font-weight: 300;
+}
+
+/* 动画定义 */
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* 响应式设计
+@media (max-width: 1024px) {
+  .welcome-container {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .logo-section {
+    flex: none;
+    padding: 2rem 2rem 1rem 2rem;
+  }
+  
+  .content-section {
+    flex: none;
+    justify-content: center;
+    padding: 1rem 2rem 2rem 2rem;
+  }
+  
+  .brand-title {
+    font-size: 2.8rem;
+  }
+  
+  .image-bg {
+    width: 150px;
+    height: 150px;
+    filter: blur(40px);
+  }
+  
+  .logo-image {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+@media (max-width: 768px) {
+  .brand-title {
+    font-size: 2.2rem;
+  }
+  
+  .brand-subtitle {
+    font-size: 1rem;
+  }
+  
+  .content-section {
+    padding: 1rem;
+  }
+  
+  .image-bg {
+    width: 120px;
+    height: 120px;
+    filter: blur(30px);
+  }
+  
+  .logo-image {
+    width: 80px;
+    height: 80px;
+  }
+} */
+
+/* 暗色主题适配 */
+@media (prefers-color-scheme: dark) {
+  .welcome-container {
+    background: #1a1a1a;
+  }
+
+  .brand-subtitle {
+    color: #999999;
+  }
+
+  .loading-text {
+    color: #aaaaaa;
+  }
+
+  .progress-bar {
+    background: #333333;
+  }
+
+  .tag {
+    background: #2d2d2d;
+    border-color: #404040;
+    color: #cccccc;
+  }
+
+  .version-info {
+    color: #666666;
+  }
+}
+</style>

website/script.js

@@ -11,15 +11,163 @@ function scrollToFeatures() {
     });
 }
 
-// GitHub repository configuration
+// Alist API configuration
+const ALIST_BASE_URL = 'http://47.96.72.224:5244';
+const ALIST_USERNAME = 'ceruupdate';
+const ALIST_PASSWORD = '123456';
+
+// GitHub repository configuration (for fallback)
 const GITHUB_REPO = 'timeshiftsauce/CeruMusic';
 const GITHUB_API_URL = `https://api.github.com/repos/${GITHUB_REPO}/releases/latest`;
 
 // Cache for release data
 let releaseData = null;
 let releaseDataTimestamp = null;
+let alistToken = null;
 const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
+// Alist authentication
+async function getAlistToken() {
+    if (alistToken) {
+        return alistToken;
+    }
+
+    try {
+        const response = await fetch(`${ALIST_BASE_URL}/api/auth/login`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                username: ALIST_USERNAME,
+                password: ALIST_PASSWORD
+            })
+        });
+
+        const data = await response.json();
+        
+        if (data.code === 200) {
+            alistToken = data.data.token;
+            return alistToken;
+        } else {
+            throw new Error(`Alist authentication failed: ${data.message}`);
+        }
+    } catch (error) {
+        console.error('Alist authentication error:', error);
+        throw error;
+    }
+}
+
+// Get available versions from Alist
+async function getAlistVersions() {
+    try {
+        const token = await getAlistToken();
+        
+        const response = await fetch(`${ALIST_BASE_URL}/api/fs/list`, {
+            method: 'POST',
+            headers: {
+                'Authorization': token,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                path: '/',
+                password: '',
+                page: 1,
+                per_page: 100,
+                refresh: false
+            })
+        });
+
+        const data = await response.json();
+        
+        if (data.code === 200) {
+            // Filter directories that look like version numbers
+            const versions = data.data.content
+                .filter(item => item.is_dir && /^v?\d+\.\d+\.\d+/.test(item.name))
+                .sort((a, b) => b.name.localeCompare(a.name)); // Sort by version desc
+            
+            return versions;
+        } else {
+            throw new Error(`Failed to get versions: ${data.message}`);
+        }
+    } catch (error) {
+        console.error('Failed to get Alist versions:', error);
+        return [];
+    }
+}
+
+// Get files in a specific version directory
+async function getAlistVersionFiles(version) {
+    try {
+        const token = await getAlistToken();
+        
+        const response = await fetch(`${ALIST_BASE_URL}/api/fs/list`, {
+            method: 'POST',
+            headers: {
+                'Authorization': token,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                path: `/${version}`,
+                password: '',
+                page: 1,
+                per_page: 100,
+                refresh: false
+            })
+        });
+
+        const data = await response.json();
+        
+        if (data.code === 200) {
+            return data.data.content.filter(item => !item.is_dir);
+        } else {
+            throw new Error(`Failed to get version files: ${data.message}`);
+        }
+    } catch (error) {
+        console.error('Failed to get version files:', error);
+        return [];
+    }
+}
+
+// Get direct download URL from Alist
+async function getAlistDownloadUrl(version, fileName) {
+    try {
+        const token = await getAlistToken();
+        const filePath = `/${version}/${fileName}`;
+        
+        const response = await fetch(`${ALIST_BASE_URL}/api/fs/get`, {
+            method: 'POST',
+            headers: {
+                'Authorization': token,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                path: filePath
+            })
+        });
+
+        const data = await response.json();
+        
+        if (data.code === 200) {
+            const fileInfo = data.data;
+            
+            // Try different URL formats
+            if (fileInfo.raw_url) {
+                return fileInfo.raw_url;
+            } else if (fileInfo.sign) {
+                return `${ALIST_BASE_URL}/d${filePath}?sign=${fileInfo.sign}`;
+            } else {
+                return `${ALIST_BASE_URL}/d${filePath}`;
+            }
+        } else {
+            throw new Error(`Failed to get download URL: ${data.message}`);
+        }
+    } catch (error) {
+        console.error('Failed to get Alist download URL:', error);
+        throw error;
+    }
+}
+
 // Download functionality
 async function downloadApp(platform) {
     const button = event.target;
@@ -35,38 +183,53 @@ async function downloadApp(platform) {
     button.disabled = true;
     
     try {
-        // Get latest release data
-        const release = await getLatestRelease();
+        // Try Alist first
+        const versions = await getAlistVersions();
         
-        if (!release) {
-            throw new Error('无法获取最新版本信息');
+        if (versions.length > 0) {
+            const latestVersion = versions[0];
+            const files = await getAlistVersionFiles(latestVersion.name);
+            
+            // Find the appropriate file for the platform
+            const fileName = findFileForPlatform(files, platform);
+            
+            if (fileName) {
+                const downloadUrl = await getAlistDownloadUrl(latestVersion.name, fileName);
+                
+                // Show success notification
+                showNotification(`正在下载 ${getPlatformName(platform)} 版本 ${latestVersion.name}...`, 'success');
+                
+                // Start download
+                window.open(downloadUrl, '_blank');
+                
+                // Track download
+                trackDownload(platform, latestVersion.name);
+                
+                return; // Success, exit function
+            }
         }
         
-        // Find the appropriate download asset
-        const downloadUrl = findDownloadAsset(release.assets, platform);
-        
-        if (!downloadUrl) {
-            throw new Error(`暂无 ${getPlatformName(platform)} 版本下载`);
-        }
-        
-        // Show success notification
-        showNotification(`正在下载 ${getPlatformName(platform)} 版本 v${release.tag_name}...`, 'success');
-        
-        // Start download
-        window.open('https://gh.bugdey.us.kg/'+downloadUrl, '_blank');
-        
-        // Track download
-        trackDownload(platform, release.tag_name);
+        // Fallback to GitHub if Alist fails
+        console.log('Alist download failed, trying GitHub fallback...');
+        await downloadFromGitHub(platform);
         
     } catch (error) {
         console.error('Download error:', error);
-        showNotification(`下载失败: ${error.message}`, 'error');
         
-        // Fallback to GitHub releases page
-        setTimeout(() => {
-            showNotification('正在跳转到GitHub下载页面...', 'info');
-            window.open(`https://gh.bugdey.us.kg/https://github.com/${GITHUB_REPO}/releases/latest`, '_blank');
-        }, 2000);
+        // Try GitHub fallback
+        try {
+            console.log('Trying GitHub fallback...');
+            await downloadFromGitHub(platform);
+        } catch (fallbackError) {
+            console.error('GitHub fallback also failed:', fallbackError);
+            showNotification(`下载失败: ${error.message}`, 'error');
+            
+            // Final fallback to GitHub releases page
+            setTimeout(() => {
+                showNotification('正在跳转到GitHub下载页面...', 'info');
+                window.open(`https://github.com/${GITHUB_REPO}/releases/latest`, '_blank');
+            }, 2000);
+        }
     } finally {
         // Restore button state
         setTimeout(() => {
@@ -76,6 +239,30 @@ async function downloadApp(platform) {
     }
 }
 
+// GitHub fallback function
+async function downloadFromGitHub(platform) {
+    const release = await getLatestRelease();
+    
+    if (!release) {
+        throw new Error('无法获取最新版本信息');
+    }
+    
+    const downloadUrl = findDownloadAsset(release.assets, platform);
+    
+    if (!downloadUrl) {
+        throw new Error(`暂无 ${getPlatformName(platform)} 版本下载`);
+    }
+    
+    // Show success notification
+    showNotification(`正在下载 ${getPlatformName(platform)} 版本 v${release.tag_name}...`, 'success');
+    
+    // Start download
+    window.open(downloadUrl, '_blank');
+    
+    // Track download
+    trackDownload(platform, release.tag_name);
+}
+
 // Get latest release from GitHub API
 async function getLatestRelease() {
     // Check cache first
@@ -104,6 +291,64 @@ async function getLatestRelease() {
     }
 }
 
+// Find appropriate file for platform from Alist files
+function findFileForPlatform(files, platform) {
+    if (!files || !Array.isArray(files)) {
+        return null;
+    }
+    
+    // Define file patterns for each platform
+    const patterns = {
+        windows: [
+            /\\.exe$/i,
+            /windows.*\\.zip$/i,
+            /win32.*\\.zip$/i,
+            /win.*x64.*\\.zip$/i
+        ],
+        macos: [
+            /\\.dmg$/i,
+            /darwin.*\\.zip$/i,
+            /macos.*\\.zip$/i,
+            /mac.*\\.zip$/i,
+            /osx.*\\.zip$/i
+        ],
+        linux: [
+            /\\.AppImage$/i,
+            /linux.*\\.zip$/i,
+            /linux.*\\.tar\\.gz$/i,
+            /\\.deb$/i,
+            /\\.rpm$/i
+        ]
+    };
+    
+    const platformPatterns = patterns[platform] || [];
+    
+    // Try to find exact match
+    for (const pattern of platformPatterns) {
+        const file = files.find(file => pattern.test(file.name));
+        if (file) {
+            return file.name;
+        }
+    }
+    
+    // Fallback: look for any file that might match the platform
+    const fallbackPatterns = {
+        windows: /win|exe/i,
+        macos: /mac|darwin|dmg/i,
+        linux: /linux|appimage|deb|rpm/i
+    };
+    
+    const fallbackPattern = fallbackPatterns[platform];
+    if (fallbackPattern) {
+        const file = files.find(file => fallbackPattern.test(file.name));
+        if (file) {
+            return file.name;
+        }
+    }
+    
+    return null;
+}
+
 // Find appropriate download asset based on platform
 function findDownloadAsset(assets, platform) {
     if (!assets || !Array.isArray(assets)) {
@@ -460,6 +705,36 @@ window.addEventListener('error', (e) => {
 // Update version information on page
 async function updateVersionInfo() {
     try {
+        // Try to get version info from Alist first
+        const versions = await getAlistVersions();
+        
+        if (versions.length > 0) {
+            const latestVersion = versions[0];
+            const versionElement = document.querySelector('.version');
+            const versionInfoElement = document.querySelector('.version-info p');
+            
+            if (versionElement) {
+                versionElement.textContent = latestVersion.name;
+            }
+            
+            if (versionInfoElement) {
+                const modifyDate = new Date(latestVersion.modified);
+                const formattedDate = modifyDate.toLocaleDateString('zh-CN', {
+                    year: 'numeric',
+                    month: 'long'
+                });
+                versionInfoElement.innerHTML = `当前版本: <span class="version">${latestVersion.name}</span> | 更新时间: ${formattedDate}`;
+            }
+            
+            // Update download button text with file info from Alist
+            const files = await getAlistVersionFiles(latestVersion.name);
+            updateDownloadButtonsWithAlistFiles(files);
+            
+            return; // Success, exit function
+        }
+        
+        // Fallback to GitHub if Alist fails
+        console.log('Alist version info failed, trying GitHub fallback...');
         const release = await getLatestRelease();
         if (release) {
             const versionElement = document.querySelector('.version');
@@ -486,6 +761,29 @@ async function updateVersionInfo() {
     }
 }
 
+// Update download buttons with Alist file information
+function updateDownloadButtonsWithAlistFiles(files) {
+    if (!files || !Array.isArray(files)) return;
+    
+    const downloadCards = document.querySelectorAll('.download-card');
+    const platforms = ['windows', 'macos', 'linux'];
+    
+    downloadCards.forEach((card, index) => {
+        const platform = platforms[index];
+        const fileName = findFileForPlatform(files, platform);
+        
+        if (fileName) {
+            const file = files.find(f => f.name === fileName);
+            const button = card.querySelector('.btn-download');
+            const sizeText = formatFileSize(file.size);
+            const originalText = button.innerHTML;
+            
+            // Add file size info
+            button.innerHTML = originalText.replace(/下载 \..*?$/, `下载 .${getFileExtension(fileName)} (${sizeText})`);
+        }
+    });
+}
+
 // Update download buttons with asset information
 function updateDownloadButtonsWithAssets(assets) {
     if (!assets || !Array.isArray(assets)) return;

yarn.lock

@@ -2285,6 +2285,11 @@ alien-signals@^2.0.5:
   resolved "https://registry.npmmirror.com/alien-signals/-/alien-signals-2.0.6.tgz"
   integrity sha512-P3TxJSe31bUHBiblg59oU1PpaWPtmxF9GhJ/cB7OkgJ0qN/ifFSKUI25/v8ZhsT+lIG6ac8DpTOplXxORX6F3Q==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz"
@@ -5303,12 +5308,7 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@^4.17.15:
-  version "4.17.21"
-  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==