chore(packages): bump globals from 16.5.0 to 17.3.0

Bumps [globals](https://github.com/sindresorhus/globals) from 16.5.0 to 17.3.0.
- [Release notes](https://github.com/sindresorhus/globals/releases)
- [Commits](https://github.com/sindresorhus/globals/compare/v16.5.0...v17.3.0)

---
updated-dependencies:
- dependency-name: globals
  dependency-version: 17.3.0
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/build-and-pr.yml

@@ -3,7 +3,7 @@ name: Build and Create PR
 on:
   workflow_dispatch: # 手动触发
   push:
-    branches: [main, pr/*]
+    branches: [main]
 
 jobs:
   build:
@@ -27,10 +27,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '18'
 
@@ -46,7 +46,7 @@ jobs:
           PKG_TARGET: ${{ matrix.target }}
 
       - name: Upload artifacts
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v6
         with:
           name: app-${{ matrix.platform }}
           path: ${{ matrix.output }}
@@ -59,10 +59,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v7
         with:
           path: precompiled
 
@@ -70,7 +70,7 @@ jobs:
         run: ls -R
 
       - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
 
       - name: Create new branch and commit
         run: |
@@ -95,7 +95,7 @@ jobs:
           git push origin $BRANCH_NAME
 
       - name: Create Pull Request
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         with:
           script: |
             const { data: pullRequest } = await github.rest.pulls.create({

CHANGELOG.MD

@@ -1,6 +1,22 @@
 # 更新日志
 
-## 二开作者注: 这些`commit`记录为原版网易云音乐API的记录, 本项目不会对其进行添加以及修改
+### 4.30.0 | 2026.02.06
+- feat: 新增音乐人黑胶会员任务接口 `/musician/vip/tasks` (#95)
+- feat: 自动构建: 添加Windows、Linux、macOS预编译二进制文件 (#88)
+- fix: 修复模块未定义问题
+- chore: 更新依赖项 (music-metadata: ^11.11.1 -> ^11.11.2, ansi-escapes: ^7.2.0 -> ^7.3.0, commander: ^14.0.2 -> ^14.0.3)
+- chore: 更新GitHub Actions (checkout: v4 -> v6, setup-node: v4 -> v6, upload-artifact: v4 -> v6, download-artifact: v4 -> v7, github-script: v7 -> v8)
+- refactor: 注释掉IP地址日志输出以提升隐私保护
+- refactor: 重构前端测试页面, 主要改进:
+   - 统一使用简洁现代的设计风格
+   - 去除渐变背景和复杂动画
+   - 使用纯色背景（#f5f5f5）和白色卡片
+   - 优化表单布局和交互体验
+   - 增强错误处理和加载状态
+   - 移除第三方框架依赖（Tailwind、Bootstrap、MDUI）
+   - 升级Vue 2到Vue 3
+   - 将硬编码的配置项移至前端表单
+   - 所有页面现在都保持一致的设计语言，简洁清爽，功能完整。
 
 ### 4.25.0 | 2024.11.16
 - feat: 增加副歌时间、相关歌单推荐接口，原有相关歌单接口已废弃；fix: 将部分易盾白名单接口替换为eapi [#30](https://gitlab.com/Binaryify/neteasecloudmusicapi/-/merge_requests/30)

README.MD

@@ -183,6 +183,15 @@ pnpm test
 
 - 欢迎提交 PR、Issue 参与维护
 
+## 最近更新日志
+### 4.30.0 | 2026.02.06
+- feat: 新增音乐人黑胶会员任务接口 `/musician/vip/tasks` (#95)
+- feat: 自动构建: 添加Windows、Linux、macOS预编译二进制文件 (#88)
+- fix: 修复模块未定义问题
+- chore: 更新依赖项 (music-metadata: ^11.11.1 -> ^11.11.2, ansi-escapes: ^7.2.0 -> ^7.3.0, commander: ^14.0.2 -> ^14.0.3)
+- chore: 更新GitHub Actions (checkout: v4 -> v6, setup-node: v4 -> v6, upload-artifact: v4 -> v6, download-artifact: v4 -> v7, github-script: v7 -> v8)
+- refactor: 注释掉IP地址日志输出以提升隐私保护
+
 ### 致谢
 
 原作者 [Binaryify/NeteaseCloudMusicApi](https://github.com/binaryify/NeteaseCloudMusicApi) 项目为本项目基础 (该项目在`npmjs`网站上仍持续维护, 但 github 仓库已不再更新)

interface.d.ts

@@ -1715,6 +1715,8 @@ export function nickname_check(
 
 export function musician_tasks_new(params: RequestBaseConfig): Promise<Response>
 
+export function musician_vip_tasks(params: RequestBaseConfig): Promise<Response>
+
 export function playlist_update_playcount(
   params: {
     id?: number | string

module/musician_vip_tasks.js

@@ -0,0 +1,11 @@
+// 获取音乐人任务
+
+const createOption = require('../util/option.js')
+module.exports = (query, request) => {
+  const data = {}
+  return request(
+    `/api/nmusician/workbench/special/right/vip/info`,
+    data,
+    createOption(query, 'eapi'),
+  )
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neteasecloudmusicapienhanced/api",
-  "version": "4.29.21",
+  "version": "4.30.0",
   "description": "全网最全的网易云音乐API接口 || A revival project for NeteaseCloudMusicApi Node.js Services (Half Refactor & Enhanced) || 网易云音乐 API 备份 + 增强 || 本项目自原版v4.28.0版本后开始自行维护",
   "scripts": {
     "dev": "nodemon app.js",
@@ -66,14 +66,14 @@
     "data"
   ],
   "dependencies": {
-    "@neteasecloudmusicapienhanced/unblockmusic-utils": "^0.1.3",
+    "@neteasecloudmusicapienhanced/unblockmusic-utils": "^0.2.2",
-    "axios": "^1.13.4",
+    "axios": "^1.13.5",
     "crypto-js": "^4.2.0",
-    "dotenv": "^17.2.3",
+    "dotenv": "^17.2.4",
     "express": "^5.2.1",
     "express-fileupload": "^1.5.2",
     "md5": "^2.3.0",
-    "music-metadata": "^11.11.1",
+    "music-metadata": "^11.12.0",
     "node-forge": "^1.3.3",
     "pac-proxy-agent": "^7.2.0",
     "qrcode": "^1.5.4",

pnpm-lock.yaml

@@ -9,17 +9,17 @@ importers:
   .:
     dependencies:
       '@neteasecloudmusicapienhanced/unblockmusic-utils':
-        specifier: ^0.1.3
+        specifier: ^0.2.2
-        version: 0.1.3
+        version: 0.2.2
       axios:
-        specifier: ^1.13.4
+        specifier: ^1.13.5
-        version: 1.13.4
+        version: 1.13.5
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
       dotenv:
-        specifier: ^17.2.3
+        specifier: ^17.2.4
-        version: 17.2.3
+        version: 17.2.4
       express:
         specifier: ^5.2.1
         version: 5.2.1
@@ -30,8 +30,8 @@ importers:
         specifier: ^2.3.0
         version: 2.3.0
       music-metadata:
-        specifier: ^11.11.1
+        specifier: ^11.12.0
-        version: 11.11.1
+        version: 11.12.0
       node-forge:
         specifier: ^1.3.3
         version: 1.3.3
@@ -222,8 +222,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@neteasecloudmusicapienhanced/unblockmusic-utils@0.1.3':
+  '@neteasecloudmusicapienhanced/unblockmusic-utils@0.2.2':
-    resolution: {integrity: sha512-X6DtL26AtRw4SsAG5iW+0ZbcvCrdhXLlaCSL38UWp1HW+F5+QXocBtzE6wkcZN/ZXAiKpMow2+Y1Igjx/foN/A==}
+    resolution: {integrity: sha512-3YdfPWL/bLhsdUtvZ4nBEgeZjyy0QLD7Py9v7uwEt7V2WQK+q1qV2EWKn9TkCkeOujwCMNvGbhiWouk0PJnP6g==}
     hasBin: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -436,8 +436,8 @@ packages:
     resolution: {integrity: sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==}
     engines: {node: '>=0.4.2'}
 
-  ansi-escapes@7.2.0:
+  ansi-escapes@7.3.0:
-    resolution: {integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==}
+    resolution: {integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==}
     engines: {node: '>=18'}
 
   ansi-regex@5.0.1:
@@ -515,8 +515,8 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axios@1.13.4:
+  axios@1.13.5:
-    resolution: {integrity: sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==}
+    resolution: {integrity: sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==}
 
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -666,8 +666,8 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
-  commander@14.0.2:
+  commander@14.0.3:
-    resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
 
   concat-map@0.0.1:
@@ -834,8 +834,8 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  dotenv@17.2.3:
+  dotenv@17.2.4:
-    resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
+    resolution: {integrity: sha512-mudtfb4zRB4bVvdj0xRo+e6duH1csJRM8IukBqfTRvHotn9+LBXB8ynAidP9zHqoRC/fsllXgk4kCKlR21fIhw==}
     engines: {node: '>=12'}
 
   dunder-proto@1.0.1:
@@ -1271,6 +1271,7 @@ packages:
 
   glob@10.5.0:
     resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   globals@14.0.0:
@@ -1750,8 +1751,8 @@ packages:
   multistream@4.1.0:
     resolution: {integrity: sha512-J1XDiAmmNpRCBfIWJv+n0ymC4ABcf/Pl+5YvC5B/D2f/2+8PtHvCNxMPKiQcZyi922Hq69J2YOpb1pTywfifyw==}
 
-  music-metadata@11.11.1:
+  music-metadata@11.12.0:
-    resolution: {integrity: sha512-8FT+lSLznASDhn5KNJtQE6ZH95VqhxtKWNPrvdfhlqgbdZZEEAXehx+xpUvas4VuEZAu49BhQgLa3NlmPeRaww==}
+    resolution: {integrity: sha512-9ChYnmVmyHvFxR2g0MWFSHmJfbssRy07457G4gbb4LA9WYvyZea/8EMbqvg5dcv4oXNCNL01m8HXtymLlhhkYg==}
     engines: {node: '>=18'}
 
   nano-spawn@2.0.0:
@@ -2177,8 +2178,8 @@ packages:
   secure-json-parse@2.7.0:
     resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
 
-  semver@7.7.3:
+  semver@7.7.4:
-    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -2773,10 +2774,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@neteasecloudmusicapienhanced/unblockmusic-utils@0.1.3':
+  '@neteasecloudmusicapienhanced/unblockmusic-utils@0.2.2':
     dependencies:
       '@unblockneteasemusic/server': 0.28.0
-      axios: 1.13.4
+      axios: 1.13.5
       express: 4.22.1
       https: 1.0.0
     transitivePeerDependencies:
@@ -2958,7 +2959,7 @@ snapshots:
       fast-glob: 3.3.3
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.3
+      semver: 7.7.4
       ts-api-utils: 2.4.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -2972,7 +2973,7 @@ snapshots:
       '@typescript-eslint/visitor-keys': 8.53.0
       debug: 4.4.3
       minimatch: 9.0.5
-      semver: 7.7.3
+      semver: 7.7.4
       tinyglobby: 0.2.15
       ts-api-utils: 2.4.0(typescript@5.9.3)
       typescript: 5.9.3
@@ -3043,7 +3044,7 @@ snapshots:
 
   amdefine@1.0.1: {}
 
-  ansi-escapes@7.2.0:
+  ansi-escapes@7.3.0:
     dependencies:
       environment: 1.1.0
 
@@ -3114,7 +3115,7 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axios@1.13.4:
+  axios@1.13.5:
     dependencies:
       follow-redirects: 1.15.11
       form-data: 4.0.5
@@ -3309,7 +3310,7 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
-  commander@14.0.2: {}
+  commander@14.0.3: {}
 
   concat-map@0.0.1: {}
 
@@ -3465,7 +3466,7 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
-  dotenv@17.2.3: {}
+  dotenv@17.2.4: {}
 
   dunder-proto@1.0.1:
     dependencies:
@@ -4433,7 +4434,7 @@ snapshots:
 
   lint-staged@16.2.7:
     dependencies:
-      commander: 14.0.2
+      commander: 14.0.3
       listr2: 9.0.5
       micromatch: 4.0.8
       nano-spawn: 2.0.0
@@ -4467,7 +4468,7 @@ snapshots:
 
   log-update@6.1.0:
     dependencies:
-      ansi-escapes: 7.2.0
+      ansi-escapes: 7.3.0
       cli-cursor: 5.0.0
       slice-ansi: 7.1.2
       strip-ansi: 7.1.2
@@ -4575,7 +4576,7 @@ snapshots:
       once: 1.4.0
       readable-stream: 3.6.2
 
-  music-metadata@11.11.1:
+  music-metadata@11.12.0:
     dependencies:
       '@borewit/text-codec': 0.2.1
       '@tokenizer/token': 0.3.0
@@ -4606,7 +4607,7 @@ snapshots:
 
   node-abi@3.87.0:
     dependencies:
-      semver: 7.7.3
+      semver: 7.7.4
 
   node-fetch@2.7.0:
     dependencies:
@@ -4626,7 +4627,7 @@ snapshots:
       ignore-by-default: 1.0.1
       minimatch: 3.1.2
       pstree.remy: 1.1.8
-      semver: 7.7.3
+      semver: 7.7.4
       simple-update-notifier: 2.0.0
       supports-color: 5.5.0
       touch: 3.1.1
@@ -4803,7 +4804,7 @@ snapshots:
       https-proxy-agent: 5.0.1
       node-fetch: 2.7.0
       progress: 2.0.3
-      semver: 7.7.3
+      semver: 7.7.4
       tar-fs: 2.1.4
       yargs: 16.2.0
     transitivePeerDependencies:
@@ -5096,7 +5097,7 @@ snapshots:
 
   secure-json-parse@2.7.0: {}
 
-  semver@7.7.3: {}
+  semver@7.7.4: {}
 
   send@0.19.2:
     dependencies:
@@ -5226,7 +5227,7 @@ snapshots:
 
   simple-update-notifier@2.0.0:
     dependencies:
-      semver: 7.7.3
+      semver: 7.7.4
 
   slash@3.0.0: {}
 

public/api.html

@@ -5,66 +5,128 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>API 调试界面</title>
 <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
     body {
-        font-family: Arial, sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-        margin: 20px;
-        display: flex;
-        flex-direction: column;
       min-height: 100vh;
+      background: #f5f5f5;
+      padding: 20px;
     }
+
     .container {
-        display: flex;
+      max-width: 1200px;
-        flex-direction: column;
+      margin: 0 auto;
-        flex-grow: 1;
+      background: white;
+      border-radius: 12px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 24px;
+    }
+
     form {
       display: flex;
-        flex-direction: row;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    .form-row {
+      display: flex;
+      gap: 12px;
       align-items: center;
-        gap: 10px;
-        margin-bottom: 10px;
     }
-    input, button {
+
-        padding: 10px;
+    label {
-        box-sizing: border-box;
+      font-size: 14px;
+      font-weight: 500;
+      color: #555;
+      min-width: 80px;
+    }
+
+    input, select {
+      padding: 10px 14px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 14px;
       flex: 1;
+      outline: none;
     }
+
+    input:focus, select:focus {
+      border-color: #333;
+    }
+
     button {
-        background-color: #4CAF50;
+      background: #333;
       color: white;
+      padding: 10px 24px;
       border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
       cursor: pointer;
+      transition: background 0.2s ease;
     }
+
+    button:hover {
+      background: #555;
+    }
+
     .data-result {
       display: flex;
-        flex-direction: row;
+      gap: 16px;
-        flex-grow: 1;
+      min-height: 400px;
     }
+
     .data-result > div {
+      flex: 1;
       display: flex;
       flex-direction: column;
-        flex-grow: 1;
-        padding: 10px;
-        box-sizing: border-box;
     }
+
     .data-result label {
-        margin-bottom: 10px;
+      margin-bottom: 8px;
+      padding: 0;
     }
-    #data, #result {
+
-        height: 100%;
+    textarea {
-        box-sizing: border-box;
+      flex: 1;
+      padding: 12px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-family: 'Courier New', monospace;
+      font-size: 13px;
+      resize: vertical;
+      min-height: 350px;
+      outline: none;
     }
-    #data {
+
-        border-right: 1px solid #ccc;
+    textarea:focus {
+      border-color: #333;
     }
 </style>
 </head>
 <body>
     <div class="container">
+        <h1>API 调试界面</h1>
         <form onsubmit="event.preventDefault(); sendRequest();">
-            <label for="uri">uri</label>
+            <div class="form-row">
+                <label for="uri">URI</label>
                 <input type="text" id="uri" name="uri" value="/api/song/lyric/v1">
-            <label for="crypto">crypto</label>
+            </div>
+            <div class="form-row">
+                <label for="crypto">加密方式</label>
                 <select id="crypto" name="crypto">
                     <option value="weapi">weapi</option>
                     <option value="eapi">eapi</option>
@@ -72,15 +134,19 @@
                     <option value="linuxapi">linuxapi</option>
                     <option value="" selected>(默认)</option>
                 </select>
-            <button type="submit">发送</button>
+            </div>
+            <div class="form-row">
+                <label></label>
+                <button type="submit">发送请求</button>
+            </div>
         </form>
         <div class="data-result">
             <div>
-                <label for="result">result</label>
+                <label for="result">响应结果</label>
-                <textarea id="result" name="result"></textarea>
+                <textarea id="result" name="result" readonly></textarea>
             </div>
             <div>
-                <label for="data">data</label>
+                <label for="data">请求数据</label>
                 <textarea id="data" name="data">
 {
     "cp": false,

public/audio_match_demo/afp.js

@@ -1,6 +1,5 @@
 'use strict'
 const WASM_BINARY_PLACEHOLDER = 'WASM_BINARY_PLACEHOLDER';
-const logger = require('../../util/logger.js')
 // See https://github.com/Distributive-Network/PythonMonkey/issues/266
 if (typeof globalThis.setInterval != 'function'){
     globalThis.setInterval = function pm$$setInterval(fn, timeout) {
@@ -1612,9 +1611,9 @@ function instantiateRuntime(){
 
 function GenerateFP(floatArray) {
     let PCMBuffer = Float32Array.from(floatArray)
-    logger.info('[afp] input samples n=', PCMBuffer.length)    
+    console.info('[afp] input samples n=', PCMBuffer.length)    
     return instantiateRuntime().then((fpRuntime) => {
-        logger.info('[afp] begin fingerprinting')
+        console.info('[afp] begin fingerprinting')
         let fp_vector = fpRuntime.ExtractQueryFP(PCMBuffer.buffer)        
         let result_buf = new Uint8Array(fp_vector.size());
         for (let t = 0; t < fp_vector.size(); t++)

public/audio_match_demo/index.html

@@ -1,27 +1,142 @@
 <!DOCTYPE html>
 
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>听歌识曲 Demo</title>
   <style>
     * {
-      font-family: sans-serif;
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
     }
 
-    pre {
+    body {
-      font-family: monospace;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 800px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 12px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      font-size: 13px;
+      color: #666;
+      margin-bottom: 24px;
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid #eee;
+      margin: 20px 0;
+    }
+
+    p {
+      font-size: 14px;
+      color: #555;
+      line-height: 1.6;
+      margin-bottom: 12px;
     }
 
     a {
-      font-family: sans-serif;
+      color: #333;
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    .section {
+      margin-bottom: 24px;
+    }
+
+    .section h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 12px;
+    }
+
+    .control-group {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    button {
+      padding: 10px 20px;
+      background: #333;
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+
+    button:hover {
+      background: #555;
+    }
+
+    button:disabled {
+      background: #999;
+      cursor: not-allowed;
+    }
+
+    input[type="file"] {
+      padding: 10px 14px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 14px;
+    }
+
+    .checkbox-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .checkbox-group input[type="checkbox"] {
+      cursor: pointer;
+    }
+
+    .checkbox-group label {
+      margin: 0;
+      cursor: pointer;
+      font-size: 14px;
+      color: #555;
     }
 
     audio {
       width: 100%;
+      margin-bottom: 16px;
     }
 
     canvas {
       width: 100%;
       height: 0;
       transition: all linear 0.1s;
+      background: #f9f9f9;
+      border-radius: 6px;
     }
 
     .canvas-active {
@@ -29,39 +144,80 @@
     }
 
     pre {
-      overflow: scroll;
+      font-family: 'Courier New', monospace;
+      font-size: 13px;
+      color: #666;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      max-height: 400px;
+      overflow-y: auto;
+      padding: 16px;
+      background: #f9f9f9;
+      border-radius: 6px;
+      border: 1px solid #eee;
+    }
+
+    .warning {
+      padding: 12px 16px;
+      background: #fef3c7;
+      border-radius: 6px;
+      font-size: 14px;
+      color: #92400e;
+      margin-bottom: 16px;
     }
   </style>
 </head>
 
 <body>
-  <h1>听歌识曲 Demo (Credit: <a href="https://github.com/mos9527/ncm-afp" target="_blank">https://github.com/mos9527/ncm-afp</a>)</h1>
+  <div class="container">
+    <h1>听歌识曲 Demo</h1>
+    <p class="subtitle">Credit: <a href="https://github.com/mos9527/ncm-afp" target="_blank">https://github.com/mos9527/ncm-afp</a></p>
+
     <hr>
-  <p><b>DISCLAIMER: </b></p>
+
-  <p>This site uses the offical NetEase audio matcher APIs (reverse engineered from <a
+    <div class="warning">
-      href="https://fn.music.163.com/g/chrome-extension-home-page-beta/">https://fn.music.163.com/g/chrome-extension-home-page-beta/</a>)
+      <strong>免责声明：</strong>本站点使用网易云音乐官方音频识别API（逆向自 <a href="https://fn.music.163.com/g/chrome-extension-home-page-beta/" target="_blank">Chrome 扩展页面</a>），不鼓励版权侵犯或知识产权盗窃。
-  </p>
+    </div>
-  <p>And DOES NOT condone copyright infringment nor intellectual property theft.</p>
+
+    <div class="section">
+      <h3>使用说明</h3>
+      <p>在使用本站点之前，您可能需要先访问以下链接：</p>
+      <p><a href="https://cors-anywhere.herokuapp.com/corsdemo" target="_blank">https://cors-anywhere.herokuapp.com/corsdemo</a></p>
+      <p>由于网易云音乐API没有CORS头，这是解决此限制的必要步骤。</p>
+    </div>
+
+    <div class="section">
+      <h3>使用方法</h3>
+      <ul style="padding-left: 20px; font-size: 14px; color: #555;">
+        <li>通过"选择文件"选择您的音频文件</li>
+        <li>点击"识别"按钮并等待结果</li>
+      </ul>
+    </div>
+
     <hr>
-  <p><b>NOTE:</b></p>
-  <p>Before start using the site, you may want to access this link first:</p>
-  <a href="https://cors-anywhere.herokuapp.com/corsdemo">https://cors-anywhere.herokuapp.com/corsdemo</a>
-  <p>Since Netease APIs do not have CORS headers, this is required to alleviate this restriction.</p>
-  <hr>
-  <p>Usage:</p>
-  <li>Select your audio file through "Choose File" picker</li>
-  <li>Hit the "Clip" button and wait for the results!</li>
 
     <audio id="audio" controls autoplay></audio>
     <canvas id="canvas"></canvas>
-  <button id="invoke">Clip</button>
+
+    <div class="control-group">
+      <button id="invoke">识别</button>
       <input type="file" name="picker" accept="*" id="file">
-  <hr>
+    </div>
-  <label for="use-mic">Mix in Microphone input</label>
+
+    <div class="control-group">
+      <div class="checkbox-group">
         <input type="checkbox" name="use-mic" id="usemic">
+        <label for="usemic">混合麦克风输入</label>
+      </div>
+    </div>
+
     <hr>
+
+    <h3 style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 12px;">日志</h3>
     <pre id="logs"></pre>
+  </div>
 </body>
+
 <script src="./afp.wasm.js"></script>
 <script src="./afp.js"></script>
 <script type="module">
@@ -76,13 +232,17 @@
   let canvas = document.getElementById('canvas')
   let canvasCtx = canvas.getContext('2d')
   let logs = document.getElementById('logs')
-  logs.write = line => logs.innerHTML += line + '\n'
+  logs.write = line => {
+    // Append log lines as text to avoid interpreting content as HTML
+    logs.appendChild(document.createTextNode(line));
+    logs.appendChild(document.createElement('br'));
+  }
 
   function RecorderCallback(channelL) {
     let sampleBuffer = new Float32Array(channelL.subarray(0, duration * 8000))
     GenerateFP(sampleBuffer).then(FP => {
-      logs.write(`[index] Generated FP ${FP}`)
+      logs.write(`[index] 生成指纹 ${FP}`)
-      logs.write('[index] Now querying, please wait...')
+      logs.write('[index] 正在查询，请稍候...')
       fetch(
         '/audio/match?' +
         new URLSearchParams({
@@ -91,9 +251,9 @@
         method: 'POST'
       }).then(resp => resp.json()).then(resp => {
         if (!resp.data.result) {
-          return logs.write('[index] Query failed with no results.')
+          return logs.write('[index] 查询失败，无结果')
         }
-        logs.write(`[index] Query complete. Results=${resp.data.result.length}`)
+        logs.write(`[index] 查询完成。结果数量=${resp.data.result.length}`)
         for (var song of resp.data.result) {
           logs.write(
             `[result] <a target="_blank" href="https://music.163.com/song?id=${song.song.id}">${song.song.name} - ${song.song.album.name} (${song.startTime / 1000}s)</a>`
@@ -104,20 +264,19 @@
   }
 
   function InitAudioCtx() {
-    // AFP.wasm can't do it with anything other than 8KHz
     audioCtx = new AudioContext({ 'sampleRate': 8000 })
     if (audioCtx.state == 'suspended')
       return false
     let audioNode = audioCtx.createMediaElementSource(audio)
     audioCtx.audioWorklet.addModule('rec.js').then(() => {
       recorderNode = new AudioWorkletNode(audioCtx, 'timed-recorder')
-      audioNode.connect(recorderNode) // recorderNode doesn't output anything
+      audioNode.connect(recorderNode)
       audioNode.connect(audioCtx.destination)
       recorderNode.port.onmessage = event => {
         switch (event.data.message) {
           case 'finished':
             RecorderCallback(event.data.recording)
-            clip.innerHTML = 'Clip'
+            clip.innerHTML = '识别'
             clip.disabled = false
             canvas.classList.remove('canvas-active')
             break
@@ -130,7 +289,6 @@
             logs.write(event.data.message)
         }
       }
-      // Attempt to get user's microphone and connect it to the AudioContext.
       navigator.mediaDevices.getUserMedia({
         audio: {
           echoCancellation: false,
@@ -142,7 +300,7 @@
         micSourceNode = audioCtx.createMediaStreamSource(micStream);
         micSourceNode.connect(recorderNode)
         usemic.checked = true
-        logs.write('[rec.js] Microphone attached.')
+        logs.write('[rec.js] 麦克风已连接')
       });
     });
     return true
@@ -161,10 +319,20 @@
     else
       micSourceNode.connect(recorderNode)
   })
+  function escapeHtml(str) {
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+      .replace(/\//g, '&#x2F;');
+  }
   file.addEventListener('change', event => {
     file.files[0].arrayBuffer().then(
       async buffer => {
-        logs.write(`[index] File ${file.files[0].name} loaded.`)
+        const safeName = escapeHtml(file.files[0].name)
+        logs.write(`[index] 文件 ${safeName} 已加载`)
         audio.src = window.URL.createObjectURL(new Blob([buffer]))
         clip.disabled = false
       })
@@ -188,12 +356,13 @@
   UpdateCanvas()
   let requestCtx = setInterval(() => {
     try {
-      if (InitAudioCtx()) { // Put this here so we don't have to deal with the 'user did not interact' thing
+      if (InitAudioCtx()) {
         clearInterval(requestCtx)
-        logs.write('[rec.js] Audio Context started.')
+        logs.write('[rec.js] 音频上下文已启动')
       }
     } catch {
       // Fail silently
     }
   }, 100)
 </script>
+</html>

public/avatar_update.html

@@ -5,67 +5,320 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>更新头像</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .container {
+      background: white;
+      border-radius: 12px;
+      padding: 40px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 32px;
+    }
+
+    .avatar-wrapper {
+      position: relative;
+      width: 160px;
+      height: 160px;
+      margin: 0 auto 32px;
+    }
+
+    .avatar {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid #fff;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .avatar-wrapper.loading .avatar {
+      opacity: 0.5;
+    }
+
+    .loading-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .avatar-wrapper.loading .loading-overlay {
+      opacity: 1;
+    }
+
+    .spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid #e0e0e0;
+      border-top-color: #333;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .upload-btn {
+      display: inline-block;
+      position: relative;
+      padding: 12px 28px;
+      background: #333;
+      color: white;
+      font-size: 15px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+      border: none;
+    }
+
+    .upload-btn:hover {
+      background: #555;
+    }
+
+    .upload-btn input[type="file"] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+    }
+
+    .login-link {
+      display: block;
+      margin-top: 24px;
+      color: #666;
+      font-size: 14px;
+      text-decoration: none;
+    }
+
+    .login-link:hover {
+      color: #333;
+      text-decoration: underline;
+    }
+
+    .toast {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%) translateY(100px);
+      padding: 12px 20px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      color: white;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      opacity: 0;
+      transition: all 0.3s ease;
+      z-index: 1000;
+      max-width: 90%;
+      text-align: center;
+    }
+
+    .toast.show {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+    }
+
+    .toast.success {
+      background: #10b981;
+    }
+
+    .toast.error {
+      background: #ef4444;
+    }
+
+    .toast.info {
+      background: #3b82f6;
+    }
+
+    .hint {
+      margin-top: 20px;
+      font-size: 12px;
+      color: #999;
+    }
+  </style>
 </head>
 
 <body>
-  <div>
+  <div class="container">
-    <a href="/qrlogin-nocookie.html">
+    <h1>更新头像</h1>
-      如果没登录,请先登录
+    <p class="subtitle">选择一张图片作为您的新头像</p>
-    </a>
+
+    <div class="avatar-wrapper" id="avatarWrapper">
+      <img id="avatar" class="avatar" src="" alt="头像" />
+      <div class="loading-overlay">
+        <div class="spinner"></div>
       </div>
-  <input id="file" type="file" />
+    </div>
-  <img id="avatar" style="height: 200px; width: 200px; border-radius: 50%" />
+
-  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js
+    <label class="upload-btn">
-    "></script>
+      选择图片
+      <input id="file" type="file" accept="image/*" />
+    </label>
+
+    <a href="/qrlogin-nocookie.html" class="login-link">
+      还没有登录？点击登录
+    </a>
+
+    <p class="hint">支持 JPG、PNG 格式，建议尺寸 200x200</p>
+  </div>
+
+  <div id="toast" class="toast"></div>
+
+  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
   <script>
     main()
 
     async function main() {
-      document.querySelector('input[type="file"]').addEventListener(
+      const fileInput = document.querySelector('input[type="file"]');
-        'change',
+      const avatarWrapper = document.getElementById('avatarWrapper');
-        function (e) {
+
-          var file = this.files[0]
+      fileInput.addEventListener('change', function(e) {
-          upload(file)
+        const file = this.files[0];
-        },
+        if (file) {
-        false,
+          upload(file);
-      )
+        }
+      }, false);
+
+      try {
+        showToast('正在加载头像...', 'info');
+        avatarWrapper.classList.add('loading');
         const res = await axios({
           url: `/user/detail?uid=32953014&timestamp=${Date.now()}`,
-        withCredentials: true, //跨域的话必须设置
+          withCredentials: true
-      })
+        });
-      document.querySelector('#avatar').src = res.data.profile.avatarUrl
+        document.querySelector('#avatar').src = res.data.profile.avatarUrl;
+        hideToast();
+      } catch (error) {
+        hideToast();
+        showToast('加载头像失败，请刷新页面重试', 'error');
+        console.error('加载头像失败:', error);
+      } finally {
+        avatarWrapper.classList.remove('loading');
+      }
     }
 
     async function upload(file) {
-      var formData = new FormData()
+      const avatarWrapper = document.getElementById('avatarWrapper');
-      formData.append('imgFile', file)
+
-      const imgSize = await getImgSize(file)
+      if (!file.type.startsWith('image/')) {
+        showToast('请选择图片文件', 'error');
+        return;
+      }
+
+      try {
+        showToast('正在上传头像...', 'info');
+        avatarWrapper.classList.add('loading');
+
+        var formData = new FormData();
+        formData.append('imgFile', file);
+        const imgSize = await getImgSize(file);
+
         const res = await axios({
           method: 'post',
-        url: `/avatar/upload?cookie=${localStorage.getItem('cookie')}&imgSize=${imgSize.width
+          url: `/avatar/upload?cookie=${localStorage.getItem('cookie')}&imgSize=${imgSize.width}&imgX=0&imgY=0&timestamp=${Date.now()}`,
-          }&imgX=0&imgY=0&timestamp=${Date.now()}`,
           headers: {
             'Content-Type': 'multipart/form-data',
           },
           data: formData,
-      })
+        });
-      document.querySelector('#avatar').src = res.data.data.url
+
+        document.querySelector('#avatar').src = res.data.data.url;
+        showToast('头像更新成功！', 'success');
+      } catch (error) {
+        console.error('上传失败:', error);
+        const errorMsg = error.response?.data?.message || error.message || '上传失败，请重试';
+        showToast(errorMsg, 'error');
+      } finally {
+        avatarWrapper.classList.remove('loading');
       }
+    }
+
     function getImgSize(file) {
       return new Promise((resolve, reject) => {
-        let reader = new FileReader()
+        let reader = new FileReader();
-        reader.readAsDataURL(file)
+        reader.readAsDataURL(file);
-        reader.onload = function (theFile) {
+        reader.onload = function(theFile) {
-          let image = new Image()
+          let image = new Image();
-          image.src = theFile.target.result
+          image.src = theFile.target.result;
-          image.onload = function () {
+          image.onload = function() {
             resolve({
               width: this.width,
               height: this.height,
-            })
+            });
+          };
+          image.onerror = function() {
+            reject(new Error('图片加载失败'));
+          };
+        };
+        reader.onerror = function() {
+          reject(new Error('文件读取失败'));
+        };
+      });
     }
+
+    function showToast(message, type = 'info') {
+      const toast = document.getElementById('toast');
+      toast.textContent = message;
+      toast.className = `toast ${type}`;
+      
+      requestAnimationFrame(() => {
+        toast.classList.add('show');
+      });
+
+      setTimeout(() => {
+        toast.classList.remove('show');
+      }, 3000);
     }
-      })
+
+    function hideToast() {
+      const toast = document.getElementById('toast');
+      toast.classList.remove('show');
     }
   </script>
 </body>

public/cloud.html

@@ -4,26 +4,135 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>云盘上传</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        min-height: 100vh;
+        background: #f5f5f5;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 12px;
+        padding: 32px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      h1 {
+        font-size: 24px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 24px;
+      }
+
+      .login-link {
+        display: block;
+        margin-bottom: 24px;
+        color: #666;
+        font-size: 14px;
+        text-decoration: none;
+      }
+
+      .login-link:hover {
+        color: #333;
+        text-decoration: underline;
+      }
+
+      .upload-section {
+        margin-bottom: 32px;
+      }
+
+      .upload-btn {
+        display: inline-block;
+        padding: 12px 28px;
+        background: #333;
+        color: white;
+        font-size: 15px;
+        font-weight: 500;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background 0.2s ease;
+        border: none;
+      }
+
+      .upload-btn:hover {
+        background: #555;
+      }
+
+      .upload-btn input[type="file"] {
+        display: none;
+      }
+
+      .songs-list {
+        list-style: none;
+      }
+
+      .song-item {
+        padding: 12px 16px;
+        border-bottom: 1px solid #eee;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .song-item:last-child {
+        border-bottom: none;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: #999;
+        font-size: 14px;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+      }
+    </style>
   </head>
 
   <body>
-    <div>
+    <div class="container">
-      <a href="/qrlogin-nocookie.html"> 如果没登录,请先登录 </a>
+      <h1>云盘上传</h1>
+      <a href="/qrlogin-nocookie.html" class="login-link">还没登录？点击登录</a>
+
+      <div class="upload-section">
+        <label class="upload-btn">
+          选择文件（支持多选）
+          <input id="file" type="file" multiple accept="audio/*" />
+        </label>
       </div>
-    <input id="file" type="file" multiple />
+
       <div id="app">
-      <ul>
+        <div v-if="loading" class="loading">加载中...</div>
-        <li v-for="(item,index) in songs" :key="index">{{item.songName}}</li>
+        <ul v-else-if="songs.length > 0" class="songs-list">
+          <li v-for="(item, index) in songs" :key="index" class="song-item">
+            {{ item.songName }}
+          </li>
         </ul>
+        <div v-else class="empty-state">暂无云盘歌曲</div>
+      </div>
     </div>
 
     <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
-    <script src="https://fastly.jsdelivr.net/npm/vue"></script>
+    <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
     <script>
       const app = Vue.createApp({
         data() {
           return {
             songs: [],
+            loading: false,
           }
         },
         created() {
@@ -31,19 +140,23 @@
         },
         methods: {
           getData() {
-            console.info('getdata')
+            this.loading = true
-            const _this = this
             axios({
-              url: `/user/cloud?time=${Date.now()}&cookie=${localStorage.getItem(
+              url: `/user/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
-                'cookie',
+            })
-              )}`,
+              .then((res) => {
-            }).then((res) => {
+                this.songs = res.data.data || []
-              console.info(res.data)
+              })
-              _this.songs = res.data.data
+              .catch((err) => {
+                console.error('获取云盘数据失败:', err)
+              })
+              .finally(() => {
+                this.loading = false
               })
           },
         },
       }).mount('#app')
+
       const fileUpdateTime = {}
       let fileLength = 0
 
@@ -51,51 +164,46 @@
         document
           .querySelector('input[type="file"]')
           .addEventListener('change', function (e) {
-            console.info(this.files)
+            const files = this.files
-            let currentIndx = 0
+            if (files.length === 0) return
-            fileLength = this.files.length
+
-            for (const item of this.files) {
+            fileLength = files.length
-              currentIndx += 1
+            for (let i = 0; i < files.length; i++) {
-              upload(item, currentIndx)
+              upload(files[i], i + 1)
             }
           })
       }
       main()
 
-      function upload(file, currentIndx) {
+      function upload(file, currentIndex) {
         var formData = new FormData()
         formData.append('songFile', file)
+
         axios({
           method: 'post',
-          url: `/cloud?time=${Date.now()}&cookie=${localStorage.getItem(
+          url: `/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
-            'cookie',
-          )}`,
           headers: {
             'Content-Type': 'multipart/form-data',
           },
           data: formData,
         })
           .then((res) => {
-            console.info(`${file.name} 上传成功`)
+            console.log(`${file.name} 上传成功`)
-            if (currentIndx >= fileLength) {
+            if (currentIndex >= fileLength) {
-              console.info('上传完毕')
+              console.log('所有文件上传完毕')
             }
             app.getData()
           })
-          .catch(async (err) => {
+          .catch((err) => {
-            console.info(err)
+            console.error(`${file.name} 上传失败:`, err)
-            console.info(fileUpdateTime)
+            fileUpdateTime[file.name] = (fileUpdateTime[file.name] || 0) + 1
-            fileUpdateTime[file.name]
-              ? (fileUpdateTime[file.name] += 1)
-              : (fileUpdateTime[file.name] = 1)
             if (fileUpdateTime[file.name] >= 4) {
-              console.error(`丢，这首歌怎么都传不上：${file.name}`)
+              console.error(`文件 ${file.name} 上传失败次数过多，已停止重试`)
               return
             } else {
-              console.error(`${file.name} 失败 ${fileUpdateTime[file.name]} 次`)
+              console.error(`${file.name} 上传失败 ${fileUpdateTime[file.name]} 次，正在重试...`)
+              upload(file, currentIndex)
             }
-            // await login()
-            upload(file, currentIndx)
           })
       }
     </script>

public/docs/home.md

@@ -3633,6 +3633,14 @@ type='1009' 获取其 id, 如`/search?keywords= 代码时间 &type=1009`
 
 **调用例子 :** `/musician/tasks/new`
 
+### 音乐人黑胶会员任务
+
+说明 : 音乐人登录后调用此接口 , 可获取音乐人黑胶会员任务。返回的数据中`missionStatus`字段为任务状态，100 表示任务完成。
+
+**接口地址 :** `/musician/vip/tasks`
+
+**调用例子 :** `/musician/vip/tasks`
+
 ### 账号云豆数
 
 说明 : 音乐人登录后调用此接口 , 可获取账号云豆数

public/docs/index.html

@@ -36,12 +36,12 @@
   }
 </script>
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139996012-1"></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-BPRGR23JEG"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
+  function gtag() { dataLayer.push(arguments); }
   gtag('js', new Date());
 
-  gtag('config', 'UA-139996012-1');
+  gtag('config', 'G-BPRGR23JEG');
 </script>
 </html>

public/eapi_decrypt.html

@@ -1,50 +1,181 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>eapi 参数和返回内容解析</title>
-  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+  <style>
-</head>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 12px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 24px;
+    }
+
+    .form-group {
+      margin-bottom: 24px;
+    }
+
+    label {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      color: #555;
+      margin-bottom: 8px;
+    }
+
+    textarea {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-family: 'Courier New', monospace;
+      font-size: 13px;
+      resize: vertical;
+      min-height: 200px;
+      outline: none;
+    }
+
+    textarea:focus {
+      border-color: #333;
+    }
+
+    .radio-group {
+      display: flex;
+      gap: 24px;
+      margin-bottom: 24px;
+    }
+
+    .radio-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .radio-item input[type="radio"] {
+      cursor: pointer;
+    }
+
+    .radio-item label {
+      margin: 0;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    button {
+      background: #333;
+      color: white;
+      padding: 12px 28px;
+      border: none;
+      border-radius: 6px;
+      font-size: 15px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+
+    button:hover {
+      background: #555;
+    }
+
+    .result-section {
+      margin-top: 24px;
+    }
+
+    .result-section label {
+      margin-bottom: 12px;
+    }
 
-<style>
     .decode-result {
       white-space: pre-wrap;
       word-break: break-all;
-    background-color: #f0f0f0;
+      background: #f9f9f9;
-    padding: 10px;
+      padding: 16px;
-    border-radius: 5px;
+      border-radius: 6px;
-    margin-top: 10px;
+      border: 1px solid #eee;
-    height: 300px;
+      min-height: 200px;
+      max-height: 400px;
       overflow: auto;
+      font-family: 'Courier New', monospace;
+      font-size: 13px;
     }
-</style>
+
+    .example-section {
+      margin-top: 32px;
+      padding-top: 24px;
+      border-top: 1px solid #eee;
+    }
+
+    .example-section h2 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 16px;
+    }
+
+    .example-section img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 6px;
+      margin-bottom: 16px;
+      border: 1px solid #eee;
+    }
+  </style>
+</head>
 
 <body>
-  <div id="app" class="p-5 flex flex-col">
+  <div id="app" class="container">
-    <h1 class="text-2xl font-bold mb-5">eapi 参数和返回内容解析</h1>
+    <h1>eapi 参数和返回内容解析</h1>
-    <textarea class="border border-gray-300 p-3 mb-5" v-model="hexString" rows="10"></textarea>
+
-    <button @click="decrypt" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+    <div class="form-group">
-      解密
+      <label for="hexString">十六进制字符串</label>
-    </button>
+      <textarea id="hexString" v-model="hexString" rows="10"></textarea>
-    <div class="mt-3">
-      <input type="radio" id="format" name="format" v-model="isReq" value="true">
-      <label for="format" class="ml-2">请求数据request params(针对请求数据的 params)</label>
-      <input type="radio" id="noFormat" name="format" v-model="isReq" value="false" class="ml-5">
-      <label for="noFormat" class="ml-2">返回数据 response 二进制数据(针对返回内容解析)</label>
-    </div>
-    <div>
-      <p>解密结果:
-      <pre class="decode-result">{{ JSON.stringify(JSON.parse(result), null, 2) }}</pre>
-      </p>
     </div>
 
+    <div class="radio-group">
+      <div class="radio-item">
+        <input type="radio" id="req" name="format" v-model="isReq" value="true">
+        <label for="req">请求数据 request params</label>
+      </div>
+      <div class="radio-item">
+        <input type="radio" id="resp" name="format" v-model="isReq" value="false">
+        <label for="resp">返回数据 response 二进制数据</label>
+      </div>
+    </div>
 
-    <div>
+    <button @click="decrypt">解密</button>
-      <p>使用例子:</p>
+
-      <img src="/static/eapi_params.png" />
+    <div class="result-section">
-      <img src="/static/eapi_response.png" />
+      <label>解密结果：</label>
+      <pre class="decode-result">{{ formatResult(result) }}</pre>
+    </div>
+
+    <div class="example-section">
+      <h2>使用示例</h2>
+      <img src="/static/eapi_params.png" alt="请求示例" />
+      <img src="/static/eapi_response.png" alt="响应示例" />
     </div>
   </div>
 
@@ -64,6 +195,13 @@
         this.decrypt()
       },
       methods: {
+        formatResult(result) {
+          try {
+            return JSON.stringify(JSON.parse(result), null, 2)
+          } catch (e) {
+            return result
+          }
+        },
         async decrypt() {
           try {
             const res = await axios({
@@ -77,7 +215,7 @@
             console.log(res.data);
           } catch (error) {
             console.error(error)
-            alert(error?.response?.data?.message || '解密失败,数据格式错误')
+            alert(error?.response?.data?.message || '解密失败，数据格式错误')
           }
         }
       }

public/index.html

@@ -7,33 +7,33 @@
   <title>网易云音乐 API Enhanced</title>
   <style>
     :root {
-      --fg: #111827; /* gray-900 */
+      --fg: #333;
-      --muted: #6b7280; /* gray-500 */
+      --muted: #666;
-      --border: #e5e7eb; /* gray-200 */
+      --border: #ddd;
-      --bg: #ffffff;
+      --bg: #f5f5f5;
-      --panel: #f9fafb; /* gray-50 */
+      --panel: #ffffff;
-      --accent: #2563eb; /* blue-600 */
+      --accent: #333;
     }
     * { box-sizing: border-box; }
     html, body { height: 100%; }
-    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, PingFang SC, Helvetica, Arial, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.6; }
+    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.6; }
     .container { max-width: 960px; margin: 40px auto; padding: 0 20px; }
     header.site-header { margin-bottom: 24px; }
-    header.site-header h1 { font-size: 28px; font-weight: 700; margin: 0; }
+    header.site-header h1 { font-size: 28px; font-weight: 600; margin: 0; }
-    .badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 14px; font-size: 12px; color: var(--muted); }
+    .badge { display: inline-block; margin-left: 8px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 12px; color: var(--muted); }
-    .sub { margin-top: 6px; color: var(--muted); }
+    .sub { margin-top: 8px; color: var(--muted); font-size: 14px; }
-    .block { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
+    .block { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
-    .block h2 { margin: 0 0 10px; font-size: 18px; }
+    .block h2 { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
     .kvs { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; align-items: center; }
     .kvs div:first-child { color: var(--muted); }
     ul.links { list-style: none; padding: 0; margin: 0; }
-    ul.links li { margin: 6px 0; }
+    ul.links li { margin: 8px 0; }
-    ul.links a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
+    ul.links a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); transition: all 0.2s ease; }
     ul.links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
-    pre { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 12px; overflow: auto; }
+    pre { margin: 0; background: #f9f9f9; border: 1px solid var(--border); border-radius: 6px; padding: 12px; overflow: auto; }
-    code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 13px; }
+    code { font-family: 'Courier New', monospace; font-size: 13px; }
-    footer.site-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); }
+    footer.site-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; }
-    footer.site-footer a { color: var(--fg); text-decoration: none; }
+    footer.site-footer a { color: var(--fg); text-decoration: none; transition: color 0.2s ease; }
     footer.site-footer a:hover { color: var(--accent); }
   </style>
 </head>

public/listen_together_host.html

@@ -1,92 +1,321 @@
-<!-- eslint-disable prettier/prettier -->
 <!DOCTYPE html>
 <html lang="zh">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>一起听</title>
+    <title>一起听 - 主机模式</title>
     <script src="https://unpkg.com/petite-vue"></script>
     <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
-    <link
+    <style>
-      rel="stylesheet"
+      * {
-      href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css"
+        margin: 0;
-    />
+        padding: 0;
-    <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        min-height: 100vh;
+        background: #f5f5f5;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 12px;
+        padding: 32px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      h1 {
+        font-size: 24px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 16px;
+      }
+
+      .login-link {
+        display: block;
+        margin-bottom: 24px;
+        color: #666;
+        font-size: 14px;
+        text-decoration: none;
+      }
+
+      .login-link:hover {
+        color: #333;
+        text-decoration: underline;
+      }
+
+      .message {
+        padding: 12px 16px;
+        background: #f9f9f9;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        font-size: 14px;
+        color: #555;
+      }
+
+      .audio-player {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+
+      .btn {
+        background: #333;
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s ease;
+        margin-right: 8px;
+        margin-bottom: 8px;
+      }
+
+      .btn:hover {
+        background: #555;
+      }
+
+      .section {
+        margin-bottom: 24px;
+        padding: 20px;
+        background: #f9f9f9;
+        border-radius: 6px;
+      }
+
+      .section h3 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 12px;
+      }
+
+      input[type="text"], input[type="number"] {
+        padding: 10px 14px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        outline: none;
+        width: 200px;
+      }
+
+      input:focus {
+        border-color: #333;
+      }
+
+      .input-group {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+      }
+
+      .input-group label {
+        font-size: 14px;
+        color: #555;
+        min-width: 80px;
+      }
+
+      .share-link {
+        padding: 12px;
+        background: #f0f0f0;
+        border-radius: 6px;
+        font-size: 13px;
+        color: #666;
+        word-break: break-all;
+        margin-bottom: 12px;
+      }
+
+      .user-list {
+        list-style: none;
+        max-height: 200px;
+        overflow-y: auto;
+      }
+
+      .user-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px;
+        border-bottom: 1px solid #eee;
+      }
+
+      .user-item:last-child {
+        border-bottom: none;
+      }
+
+      .user-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      .user-name {
+        font-size: 14px;
+        color: #333;
+      }
+
+      .track-list {
+        list-style: none;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      .track-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px;
+        border-bottom: 1px solid #eee;
+        cursor: pointer;
+        transition: background 0.2s ease;
+      }
+
+      .track-item:hover {
+        background: #f5f5f5;
+      }
+
+      .track-item:last-child {
+        border-bottom: none;
+      }
+
+      .track-cover {
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        object-fit: cover;
+      }
+
+      .track-name {
+        font-size: 14px;
+        color: #333;
+      }
+
+      details {
+        cursor: pointer;
+      }
+
+      details summary {
+        font-size: 14px;
+        font-weight: 500;
+        color: #555;
+        padding: 8px 0;
+      }
+
+      details summary:hover {
+        color: #333;
+      }
+
+      details[open] summary {
+        margin-bottom: 12px;
+      }
+
+      .control-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+    </style>
   </head>
 
-  <body class="mdui-container">
+  <body class="container">
-    <div>
+    <a href="/qrlogin.html" class="login-link">还没登录？点击登录</a>
-      <a href="/qrlogin.html"> 如果没登录,请先登录 </a>
+
-    </div>
     <h1>一起听 - 主机模式</h1>
-    <div>消息: {{message}}</div>
+
-    <audio id="player" autoplay controls></audio>
+    <div class="message">消息: {{message}}</div>
-    <br />
+
-    <br />
+    <audio id="player" class="audio-player" autoplay controls></audio>
-    <button v-if="!account.login" @click="login">获取登录状态</button>
+
-    <div>您的当前登录账号为: {{account.nickname}}</div>
+    <div v-if="!account.login">
-    <br />
+      <button class="btn" @click="login">获取登录状态</button>
-    <div v-if="account.login">
+    </div>
-      <button v-if="!roomInfo.roomId" @click="createRoom">创建房间</button>
+
+    <div class="section">
+      <h3>账号信息</h3>
+      <div>当前登录账号: {{account.nickname}}</div>
+    </div>
+
+    <div v-if="account.login" class="section">
+      <h3>房间管理</h3>
+      <div class="control-buttons">
+        <button v-if="!roomInfo.roomId" class="btn" @click="createRoom">创建房间</button>
+      </div>
+
       <details>
         <summary>加入房间</summary>
-        <div><span>房间ID: </span><input v-model="roomInfo.roomId" /></div>
+        <div class="input-group">
-        <div>
+          <label>房间ID:</label>
-          <span>邀请者 ID: </span><input v-model="roomInfo.inviterId" />
+          <input v-model="roomInfo.roomId" type="text" />
         </div>
-        <button @click="joinRoom">点击加入</button>
+        <div class="input-group">
+          <label>邀请者ID:</label>
+          <input v-model="roomInfo.inviterId" type="text" />
+        </div>
+        <button class="btn" @click="joinRoom">加入房间</button>
       </details>
 
-      <div v-if="roomInfo.roomId">
+      <div v-if="roomInfo.roomId" style="margin-top: 16px;">
-        <div>
+        <h4>分享链接</h4>
-          分享链接为:
+        <div class="share-link">
           https://st.music.163.com/listen-together/share/?songId=1372188635&roomId={{roomInfo.roomId}}&inviterId={{roomInfo.inviterId}}
         </div>
-        <br />
+        <button class="btn" @click="refreshRoom">刷新房间状态</button>
-        <button @click="refreshRoom">刷新房间状态</button>
+        <button class="btn" @click="closeRoom">关闭房间</button>
-        <div>在线用户:</div>
+
-        <ul class="mdui-list">
+        <h4 style="margin-top: 16px;">在线用户</h4>
-          <li
+        <ul class="user-list">
-            v-for="user in roomInfo.roomUsers"
+          <li v-for="user in roomInfo.roomUsers" :key="user.userId" class="user-item">
-            class="mdui-list-item mdui-ripple"
+            <img :src="user.avatarUrl" class="user-avatar" alt="avatar" />
-          >
+            <span class="user-name">{{user.nickname}}</span>
-            <div class="mdui-list-item-avatar">
-              <img :src="user.avatarUrl" />
-            </div>
-            <div class="mdui-list-item-content">{{user.nickname}}</div>
           </li>
         </ul>
-        <button v-if="roomInfo.roomId" @click="closeRoom">关闭房间</button>
       </div>
     </div>
-    <button @click="playTrack">播放</button>
+
-    <button @click="pauseTrack">暂停</button>
+    <div class="section">
-    <button @click="seekTrack">同步进度</button>
+      <h3>播放控制</h3>
+      <div class="control-buttons">
+        <button class="btn" @click="playTrack">播放</button>
+        <button class="btn" @click="pauseTrack">暂停</button>
+        <button class="btn" @click="seekTrack">同步进度</button>
+      </div>
+    </div>
+
     <details>
       <summary>播放列表</summary>
-      <br />
+      <div class="section">
-      <div>
+        <div class="input-group">
-        <span>歌单ID: </span><input v-model="playlistInfo.playlistId" />
+          <label>歌单ID:</label>
+          <input v-model="playlistInfo.playlistId" type="text" />
         </div>
-      <button @click="loadPlaylist">加载歌单到播放列表</button>
+        <button class="btn" @click="loadPlaylist">加载歌单</button>
-      <span>{{playlistInfo.playlistName}}</span>
+        <div style="margin-top: 12px; font-size: 14px; color: #555;">
-      <br />
+          歌单名称: {{playlistInfo.playlistName}}
-      <br />
+        </div>
-      <div>歌单内容:</div>
+
-      <ul class="mdui-list">
+        <h4 style="margin-top: 16px;">歌单内容</h4>
+        <ul class="track-list">
           <li
             @click="gotoTrack(track.id)"
             v-for="track in playlistInfo.playlistTracks"
-          class="mdui-list-item mdui-ripple"
+            :key="track.id"
+            class="track-item"
           >
-          <div class="mdui-list-item-avatar">
+            <img :src="track.al.picUrl" class="track-cover" alt="cover" />
-            <img :src="track.al.picUrl" />
+            <span class="track-name">{{track.name}}</span>
-          </div>
-          <div class="mdui-list-item-content">{{track.name}}</div>
           </li>
         </ul>
+      </div>
     </details>
   </body>
+
   <script>
     PetiteVue.createApp({
       message: '请点击获取登录状态',
@@ -126,7 +355,7 @@
           this.account.userId = res.data.data.profile.userId
           this.account.nickname = res.data.data.profile.nickname
           this.account.login = true
-          this.message = '成功登录, 请创建房间'
+          this.message = '成功登录，请创建房间'
         }
       },
       joinRoom: async function () {
@@ -212,7 +441,7 @@
         })
         console.info(res)
         if (res.data.code != 200 || !res.data.data.inRoom) {
-          this.message = '房间状态获取失败, 可能退出了房间'
+          this.message = '房间状态获取失败，可能退出了房间'
         } else {
           this.roomInfo.roomUsers = res.data.data.roomInfo.roomUsers
         }

public/login.html

@@ -5,21 +5,143 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>登录</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .container {
+      background: white;
+      border-radius: 12px;
+      padding: 40px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 32px;
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+      text-align: left;
+    }
+
+    label {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      color: #555;
+      margin-bottom: 8px;
+    }
+
+    input {
+      width: 100%;
+      padding: 12px 14px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 15px;
+      outline: none;
+    }
+
+    input:focus {
+      border-color: #333;
+    }
+
+    .btn {
+      width: 100%;
+      padding: 14px;
+      background: #333;
+      color: white;
+      font-size: 15px;
+      font-weight: 500;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+    }
+
+    .btn:hover {
+      background: #555;
+    }
+
+    .btn:disabled {
+      background: #999;
+      cursor: not-allowed;
+    }
+
+    .result {
+      margin-top: 24px;
+      padding: 16px;
+      background: #f9f9f9;
+      border-radius: 6px;
+      font-size: 13px;
+      color: #666;
+      text-align: left;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+
+    .error {
+      color: #ef4444;
+      background: #fef2f2;
+    }
+
+    .success {
+      color: #10b981;
+      background: #f0fdf4;
+    }
+  </style>
 </head>
 
 <body>
+  <div class="container">
+    <h1>登录</h1>
+    <p class="subtitle">使用手机号和密码登录网易云音乐</p>
+
+    <div class="form-group">
+      <label for="phone">手机号</label>
+      <input type="tel" id="phone" placeholder="请输入手机号" />
+    </div>
+
+    <div class="form-group">
+      <label for="password">密码</label>
+      <input type="password" id="password" placeholder="请输入密码" />
+    </div>
+
+    <button id="loginBtn" class="btn" onclick="handleLogin()">登录</button>
+
+    <div id="result" class="result" style="display: none;"></div>
+  </div>
+
   <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
   <script>
-    const phone = '' // 这里填手机号
-    const password = '' // 这里填密码
     const fileUpdateTime = {}
-    if (!phone || !password) {
-      const msg = '请设置你的手机号码和密码'
-      alert(msg)
-      throw new Error(msg)
-    }
 
-    async function login() {
+    async function login(phone, password) {
       const res = await axios({
         url: `/login/cellphone`,
         method: 'post',
@@ -30,8 +152,29 @@
       })
       return res.data.cookie
     }
-    async function main() {
+
-      const cookieToken = await login()
+    async function handleLogin() {
+      const phoneInput = document.getElementById('phone')
+      const passwordInput = document.getElementById('password')
+      const loginBtn = document.getElementById('loginBtn')
+      const resultDiv = document.getElementById('result')
+
+      const phone = phoneInput.value.trim()
+      const password = passwordInput.value
+
+      if (!phone || !password) {
+        showResult('请输入手机号和密码', 'error')
+        return
+      }
+
+      loginBtn.disabled = true
+      loginBtn.textContent = '登录中...'
+      showResult('正在登录...', 'info')
+
+      try {
+        const cookieToken = await login(phone, password)
+        localStorage.setItem('cookie', cookieToken)
+
         const res = await axios({
           url: `/login/status`,
           method: 'post',
@@ -39,8 +182,37 @@
             cookie: cookieToken,
           },
         })
+
+        showResult(`登录成功！\n${JSON.stringify(res.data, null, 2)}`, 'success')
+      } catch (error) {
+        console.error('登录失败:', error)
+        const errorMsg = error.response?.data?.message || error.message || '登录失败，请重试'
+        showResult(`登录失败：${errorMsg}`, 'error')
+      } finally {
+        loginBtn.disabled = false
+        loginBtn.textContent = '登录'
       }
-    main()
+    }
+
+    function showResult(message, type = 'info') {
+      const resultDiv = document.getElementById('result')
+      resultDiv.style.display = 'block'
+      resultDiv.textContent = message
+      resultDiv.className = 'result ' + type
+    }
+
+    // 支持回车登录
+    document.getElementById('password').addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') {
+        handleLogin()
+      }
+    })
+
+    document.getElementById('phone').addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') {
+        document.getElementById('password').focus()
+      }
+    })
   </script>
 </body>
 

public/playlist_cover_update.html

@@ -5,56 +5,297 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>歌单封面上传</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      padding: 20px;
+    }
+
+    .container {
+      max-width: 500px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 12px;
+      padding: 32px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 32px;
+    }
+
+    .login-link {
+      display: block;
+      margin-bottom: 24px;
+      color: #666;
+      font-size: 14px;
+      text-decoration: none;
+    }
+
+    .login-link:hover {
+      color: #333;
+      text-decoration: underline;
+    }
+
+    .cover-wrapper {
+      position: relative;
+      width: 180px;
+      height: 180px;
+      margin: 0 auto 24px;
+    }
+
+    .cover {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 4px solid #fff;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .form-group {
+      margin-bottom: 20px;
+      text-align: left;
+    }
+
+    label {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      color: #555;
+      margin-bottom: 8px;
+    }
+
+    input[type="text"] {
+      width: 100%;
+      padding: 10px 14px;
+      border: 1px solid #ddd;
+      border-radius: 6px;
+      font-size: 14px;
+      outline: none;
+    }
+
+    input[type="text"]:focus {
+      border-color: #333;
+    }
+
+    .upload-btn {
+      display: inline-block;
+      padding: 12px 28px;
+      background: #333;
+      color: white;
+      font-size: 15px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 0.2s ease;
+      border: none;
+    }
+
+    .upload-btn:hover {
+      background: #555;
+    }
+
+    .upload-btn input[type="file"] {
+      display: none;
+    }
+
+    .loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    .loading.active {
+      opacity: 1;
+    }
+
+    .spinner {
+      width: 48px;
+      height: 48px;
+      border: 4px solid #e0e0e0;
+      border-top-color: #333;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .result {
+      margin-top: 20px;
+      padding: 12px 16px;
+      border-radius: 6px;
+      font-size: 14px;
+      text-align: left;
+    }
+
+    .result.success {
+      background: #d1fae5;
+      color: #065f46;
+    }
+
+    .result.error {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+  </style>
 </head>
 
 <body>
-  <div>
+  <div class="container">
-    <a href="/qrlogin-nocookie.html">
+    <h1>歌单封面上传</h1>
-      如果没登录,请先登录
+    <p class="subtitle">上传自定义歌单封面图片</p>
-    </a>
+
+    <a href="/qrlogin-nocookie.html" class="login-link">还没登录？点击登录</a>
+
+    <div class="form-group">
+      <label for="playlistId">歌单 ID</label>
+      <input type="text" id="playlistId" placeholder="请输入歌单ID" />
     </div>
-  <input id="file" type="file" name="filename" />
+
-  <img id="playlist_cover" style="height: 200px; width: 200px; border-radius: 50%" />
+    <div class="cover-wrapper">
+      <img id="playlist_cover" class="cover" src="" alt="歌单封面" />
+      <div class="loading" id="loading">
+        <div class="spinner"></div>
+      </div>
+    </div>
+
+    <label class="upload-btn">
+      选择封面图片
+      <input id="file" type="file" name="filename" accept="image/*" />
+    </label>
+
+    <div id="result" class="result" style="display: none;"></div>
+  </div>
+
   <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
   <script>
-    const playlist_id = ''
+    const loadingOverlay = document.getElementById('loading')
-    if (!playlist_id) {
+    const playlistIdInput = document.getElementById('playlistId')
-      const msg = '请设置你的歌单id'
+    const resultDiv = document.getElementById('result')
-      alert(msg)
+
-      throw new Error(msg)
+    function showLoading() {
+      loadingOverlay.classList.add('active')
     }
 
-    main()
+    function hideLoading() {
-    async function main() {
+      loadingOverlay.classList.remove('active')
-      document.querySelector('input[type="file"]').addEventListener(
+    }
-        'change',
+
-        function (e) {
+    function showResult(message, type) {
-          var file = this.files[0]
+      resultDiv.textContent = message
-          upload(file)
+      resultDiv.className = 'result ' + type
-        },
+      resultDiv.style.display = 'block'
-        false,
+    }
-      )
+
+    function hideResult() {
+      resultDiv.style.display = 'none'
+    }
+
+    async function loadPlaylistCover() {
+      const playlistId = playlistIdInput.value.trim()
+      if (!playlistId) {
+        return
+      }
+
+      showLoading()
+      hideResult()
+
+      try {
         const res = await axios({
-        url: `/playlist/detail?id=${playlist_id}&timestamp=${Date.now()}`,
+          url: `/playlist/detail?id=${playlistId}&timestamp=${Date.now()}`,
         })
         document.querySelector('#playlist_cover').src = res.data.playlist.coverImgUrl
+        hideResult()
+      } catch (error) {
+        console.error('加载封面失败:', error)
+        showResult('加载封面失败，请检查歌单ID', 'error')
+      } finally {
+        hideLoading()
+      }
     }
 
-    async function upload(file) {
+    // 监听歌单ID输入变化
+    playlistIdInput.addEventListener('input', function() {
+      loadPlaylistCover()
+    })
+
+    // 监听文件选择
+    document
+      .querySelector('input[type="file"]')
+      .addEventListener('change', async function (e) {
+        const file = this.files[0]
+        const playlistId = playlistIdInput.value.trim()
+
+        if (!playlistId) {
+          showResult('请先输入歌单ID', 'error')
+          return
+        }
+
+        if (!file) {
+          return
+        }
+
+        showLoading()
+        hideResult()
+
+        try {
+          await upload(file, playlistId)
+        } catch (error) {
+          console.error('上传失败:', error)
+          showResult('上传失败，请重试', 'error')
+        } finally {
+          hideLoading()
+        }
+      })
+
+    async function upload(file, playlistId) {
       var formData = new FormData()
       formData.append('imgFile', file)
       const imgSize = await getImgSize(file)
       const res = await axios({
         method: 'post',
-        url: `/playlist/cover/update?id=${playlist_id}&cookie=${localStorage.getItem('cookie')}&imgSize=${imgSize.width
+        url: `/playlist/cover/update?id=${playlistId}&cookie=${localStorage.getItem('cookie')}&imgSize=${imgSize.width}&imgX=0&imgY=0&timestamp=${Date.now()}`,
-          }&imgX=0&imgY=0&timestamp=${Date.now()}`,
         headers: {
           'Content-Type': 'multipart/form-data',
         },
         data: formData,
       })
       document.querySelector('#playlist_cover').src = res.data.data.url
+      showResult('封面上传成功！', 'success')
     }
+
     function getImgSize(file) {
       return new Promise((resolve, reject) => {
         let reader = new FileReader()
@@ -68,6 +309,12 @@
               height: this.height,
             })
           }
+          image.onerror = function() {
+            reject(new Error('图片加载失败'))
+          }
+        }
+        reader.onerror = function() {
+          reject(new Error('文件读取失败'))
         }
       })
     }

public/playlist_import.html

@@ -2,115 +2,300 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>歌单导入工具</title>
-    <!-- 引入Bootstrap CSS -->
+    <style>
-    <link href="https://fastly.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+        * {
-    <!-- 引入Bootstrap JS -->
+            margin: 0;
-    <script src="https://fastly.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+            padding: 0;
-    <!-- 引入axios用于发送异步请求 -->
+            box-sizing: border-box;
-    <script src="https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-height: 100vh;
+            background: #f5f5f5;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            padding: 32px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            font-size: 24px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 8px;
+        }
+
+        .subtitle {
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 24px;
+        }
+
+        .tabs {
+            display: flex;
+            gap: 4px;
+            margin-bottom: 24px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .tab-btn {
+            padding: 12px 24px;
+            background: transparent;
+            border: none;
+            border-bottom: 2px solid transparent;
+            font-size: 14px;
+            font-weight: 500;
+            color: #666;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+
+        .tab-btn:hover {
+            color: #333;
+        }
+
+        .tab-btn.active {
+            color: #333;
+            border-bottom-color: #333;
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            color: #555;
+            margin-bottom: 8px;
+        }
+
+        input[type="text"], textarea {
+            width: 100%;
+            padding: 10px 14px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 14px;
+            outline: none;
+            font-family: inherit;
+        }
+
+        input[type="text"]:focus, textarea:focus {
+            border-color: #333;
+        }
+
+        textarea {
+            min-height: 120px;
+            resize: vertical;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-bottom: 16px;
+        }
+
+        table th, table td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #eee;
+        }
+
+        table th {
+            font-size: 14px;
+            font-weight: 600;
+            color: #555;
+            background: #f9f9f9;
+        }
+
+        table td input {
+            width: 100%;
+        }
+
+        .btn {
+            padding: 10px 20px;
+            background: #333;
+            color: white;
+            font-size: 14px;
+            font-weight: 500;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background 0.2s ease;
+        }
+
+        .btn:hover {
+            background: #555;
+        }
+
+        .btn-secondary {
+            background: #666;
+        }
+
+        .btn-secondary:hover {
+            background: #888;
+        }
+
+        .input-group {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 12px;
+        }
+
+        .input-group input {
+            flex: 1;
+        }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 24px;
+        }
+
+        .checkbox-group input[type="checkbox"] {
+            cursor: pointer;
+        }
+
+        .checkbox-group label {
+            margin: 0;
+            cursor: pointer;
+        }
+
+        input:disabled {
+            background: #f5f5f5;
+            cursor: not-allowed;
+        }
+    </style>
 </head>
 <body>
-    <div class="container mt-5">
+    <div class="container">
-        <h1 class="mb-4">歌单导入工具</h1>
+        <h1>歌单导入工具</h1>
-        <p>请选择一种导入方式并填写相关信息：</p>
+        <p class="subtitle">请选择一种导入方式并填写相关信息</p>
 
-        <!-- 表单开始 -->
+        <ul class="tabs" id="importTabs" role="tablist">
-        <form id="importForm" novalidate>
+            <li role="presentation">
-            <!-- 选项卡导航 -->
+                <button class="tab-btn active" id="metadata-tab" data-bs-toggle="tab" data-bs-target="#metadata" type="button" role="tab" aria-controls="metadata" aria-selected="true">元数据导入</button>
-            <ul class="nav nav-tabs mb-3" id="importTabs" role="tablist">
-                <li class="nav-item" role="presentation">
-                    <button class="nav-link active" id="metadata-tab" data-bs-toggle="tab" data-bs-target="#metadata" type="button" role="tab" aria-controls="metadata" aria-selected="true">元数据导入</button>
             </li>
-                <li class="nav-item" role="presentation">
+            <li role="presentation">
-                    <button class="nav-link" id="text-tab" data-bs-toggle="tab" data-bs-target="#text" type="button" role="tab" aria-controls="text" aria-selected="false">文字导入</button>
+                <button class="tab-btn" id="text-tab" data-bs-toggle="tab" data-bs-target="#text" type="button" role="tab" aria-controls="text" aria-selected="false">文字导入</button>
             </li>
-                <li class="nav-item" role="presentation">
+            <li role="presentation">
-                    <button class="nav-link" id="link-tab" data-bs-toggle="tab" data-bs-target="#link" type="button" role="tab" aria-controls="link" aria-selected="false">链接导入</button>
+                <button class="tab-btn" id="link-tab" data-bs-toggle="tab" data-bs-target="#link" type="button" role="tab" aria-controls="link" aria-selected="false">链接导入</button>
             </li>
         </ul>
 
-            <!-- 选项卡面板 -->
+        <div class="tab-content active" id="importTabContent">
-            <div class="tab-content" id="importTabContent">
             <!-- 元数据导入 -->
-                <div class="tab-pane fade show active" id="metadata" role="tabpanel" aria-labelledby="metadata-tab">
+            <div class="tab-content active" id="metadata" role="tabpanel" aria-labelledby="metadata-tab">
-                    <table class="table table-bordered mb-3">
+                <table>
                     <thead>
                         <tr>
-                                <th scope="col">歌曲名称</th>
+                            <th style="width: 33%">歌曲名称</th>
-                                <th scope="col">艺术家</th>
+                            <th style="width: 33%">艺术家</th>
-                                <th scope="col">专辑</th>
+                            <th style="width: 33%">专辑</th>
                         </tr>
                     </thead>
                     <tbody id="metadataTableBody">
-                            <!-- 默认添加一行 -->
                         <tr>
-                                <td><input type="text" class="form-control" name="name[]" placeholder="歌曲名称"></td>
+                            <td><input type="text" name="name[]" placeholder="歌曲名称"></td>
-                                <td><input type="text" class="form-control" name="artist[]" placeholder="艺术家"></td>
+                            <td><input type="text" name="artist[]" placeholder="艺术家"></td>
-                                <td><input type="text" class="form-control" name="album[]" placeholder="专辑"></td>
+                            <td><input type="text" name="album[]" placeholder="专辑"></td>
                         </tr>
                     </tbody>
                 </table>
-                    <button type="button" class="btn btn-secondary mb-3" id="addMetadataRow">增加歌曲</button>
+                <button type="button" class="btn btn-secondary" id="addMetadataRow">增加歌曲</button>
             </div>
             <!-- 文字导入 -->
-                <div class="tab-pane fade" id="text" role="tabpanel" aria-labelledby="text-tab">
+            <div class="tab-content" id="text" role="tabpanel" aria-labelledby="text-tab">
-                    <div class="mb-3">
+                <div class="form-group">
-                        <label for="textInput" class="form-label">文字:</label>
+                    <label for="textInput">文字内容</label>
-                        <textarea class="form-control" id="textInput" name="text" rows="5"></textarea>
+                    <textarea id="textInput" name="text" rows="5" placeholder="请输入歌曲信息，每行一首歌曲"></textarea>
                 </div>
-                    <div class="mb-3">
+                <div class="form-group">
-                        <label for="playlistNameInput" class="form-label">歌单名:</label>
+                    <label for="playlistNameInput">歌单名称</label>
-                        <input type="text" class="form-control" id="playlistNameInput" name="playlistName" placeholder="请输入歌单名">
+                    <input type="text" id="playlistNameInput" name="playlistName" placeholder="请输入歌单名">
                 </div>
             </div>
             <!-- 链接导入 -->
-                <div class="tab-pane fade" id="link" role="tabpanel" aria-labelledby="link-tab">
+            <div class="tab-content" id="link" role="tabpanel" aria-labelledby="link-tab">
-                    <div class="mb-3">
+                <div class="form-group">
-                        <label for="linkInputs" class="form-label">链接:</label>
+                    <label>链接列表</label>
                     <div id="linkInputsContainer">
-                            <div class="input-group mb-3">
+                        <div class="input-group">
-                                <input type="text" class="form-control" id="linkInput0" name="linkInput0" placeholder="请输入链接">
+                            <input type="text" id="linkInput0" name="linkInput0" placeholder="请输入链接">
                             <button type="button" class="btn btn-secondary removeLinkButton" data-index="0">×</button>
                         </div>
                     </div>
-                        <button type="button" class="btn btn-secondary mb-3" id="addLinkButton">增加链接</button>
+                    <button type="button" class="btn btn-secondary" id="addLinkButton" style="margin-top: 8px;">增加链接</button>
-                        <div class="mb-3">
-                            <label for="playlistNameLinkInput" class="form-label">歌单名:</label>
-                            <input type="text" class="form-control" id="playlistNameLinkInput" name="playlistName" placeholder="请输入歌单名">
                 </div>
+                <div class="form-group" style="margin-top: 20px;">
+                    <label for="playlistNameLinkInput">歌单名称</label>
+                    <input type="text" id="playlistNameLinkInput" name="playlistName" placeholder="请输入歌单名">
                 </div>
             </div>
         </div>
 
-            <!-- 是否导入我喜欢的音乐 -->
+        <div class="checkbox-group">
-            <div class="form-check">
+            <input type="checkbox" value="" id="importStarCheckbox">
-                <input class="form-check-input" type="checkbox" value="" id="importStarCheckbox">
+            <label for="importStarCheckbox">
-                <label class="form-check-label" for="importStarCheckbox">
+                导入"我喜欢的音乐"
-                    导入“我喜欢的音乐”
             </label>
         </div>
 
-            <!-- 提交按钮 -->
+        <button type="submit" class="btn" id="submitBtn">导入歌曲</button>
-            <button type="submit" class="btn btn-primary mt-3">导入歌曲</button>
+    </div>
-        </form>
-        <!-- 表单结束 -->
 
+    <script src="https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script>
+        // 选项卡切换
+        const tabBtns = document.querySelectorAll('.tab-btn');
+        const tabContents = document.querySelectorAll('.tab-content[id]');
+
+        tabBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                tabBtns.forEach(b => b.classList.remove('active'));
+                tabContents.forEach(c => c.classList.remove('active'));
+                
+                btn.classList.add('active');
+                const targetId = btn.getAttribute('data-bs-target');
+                document.getElementById(targetId).classList.add('active');
+            });
+        });
+
         // 动态增加链接输入框
         document.getElementById('addLinkButton').addEventListener('click', function() {
             var container = document.getElementById('linkInputsContainer');
-                var newIndex = container.childElementCount - 1; // 减去非输入框元素的数量
+            var newIndex = container.children.length;
             var newInput = document.createElement('input');
             newInput.type = 'text';
-                newInput.className = 'form-control';
+            newInput.className = '';
             newInput.id = `linkInput${newIndex}`;
             newInput.name = `linkInput${newIndex}`;
             newInput.placeholder = '请输入链接';
+            newInput.style.cssText = 'flex: 1; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none;';
 
             var removeButton = document.createElement('button');
             removeButton.type = 'button';
-                removeButton.className = 'btn btn-secondary removeLinkButton';
+            removeButton.className = 'btn btn-secondary';
             removeButton.textContent = '×';
             removeButton.dataset.index = newIndex.toString();
             removeButton.addEventListener('click', function() {
@@ -119,7 +304,7 @@
             });
 
             var inputGroup = document.createElement('div');
-                inputGroup.className = 'input-group mb-3';
+            inputGroup.className = 'input-group';
             inputGroup.appendChild(newInput);
             inputGroup.appendChild(removeButton);
 
@@ -131,37 +316,16 @@
             var container = document.getElementById('metadataTableBody');
             var newRow = document.createElement('tr');
 
-                var nameInput = document.createElement('input');
-                nameInput.type = 'text';
-                nameInput.className = 'form-control';
-                nameInput.name = 'name[]';
-                nameInput.placeholder = '歌曲名称';
-
-                var artistInput = document.createElement('input');
-                artistInput.type = 'text';
-                artistInput.className = 'form-control';
-                artistInput.name = 'artist[]';
-                artistInput.placeholder = '艺术家';
-
-                var albumInput = document.createElement('input');
-                albumInput.type = 'text';
-                albumInput.className = 'form-control';
-                albumInput.name = 'album[]';
-                albumInput.placeholder = '专辑';
-
             newRow.innerHTML = `
-                    <td>${nameInput.outerHTML}</td>
+                <td><input type="text" name="name[]" placeholder="歌曲名称" style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none;"></td>
-                    <td>${artistInput.outerHTML}</td>
+                <td><input type="text" name="artist[]" placeholder="艺术家" style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none;"></td>
-                    <td>${albumInput.outerHTML}</td>
+                <td><input type="text" name="album[]" placeholder="专辑" style="width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; outline: none;"></td>
             `;
 
             container.appendChild(newRow);
         });
 
-            document.getElementById('importForm').addEventListener('submit', async function(event) {
+        document.getElementById('submitBtn').addEventListener('click', async function() {
-                // 阻止默认行为
-                event.preventDefault();
-
             // 获取表单值
             let text = document.getElementById('textInput').value;
             let links = [];
@@ -169,7 +333,7 @@
             let playlistName = '';
 
             // 获取所有链接输入框的值
-                let linkInputs = document.querySelectorAll('#linkInputsContainer .input-group .form-control');
+            let linkInputs = document.querySelectorAll('#linkInputsContainer .input-group input[type="text"]');
             linkInputs.forEach(function(input) {
                 if (input.value.trim() !== '') {
                     links.push(input.value);
@@ -229,15 +393,7 @@
 
                 let taskId = res.data?.data?.taskId
                 if (taskId) {
-                        alert(`任务创建成功! 正在导入, 请稍等; 任务id:${taskId}`)
+                    alert(`任务创建成功！正在导入，请稍等；任务id：${taskId}`)
-                        // const res2 = await axios({
-                        //     url: `/playlist/import/task/status?timestamp=${Date.now()}`,
-                        //     method: 'post',
-                        //     data: {
-                        //         id: taskId
-                        //     },
-                        // });
-                        // alert(JSON.stringify(res2.data, null, 2));
                 }
             } catch (error) {
                 console.error('Error:', error);
@@ -257,6 +413,5 @@
         // 初始化时设置歌单名输入框的状态
         document.getElementById('importStarCheckbox').dispatchEvent(new Event('change'));
     </script>
-    </div>
 </body>
 </html>

public/qrlogin-nocookie.html

@@ -5,45 +5,164 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>二维码登录</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .container {
+      background: white;
+      border-radius: 12px;
+      padding: 48px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      max-width: 450px;
+      width: 100%;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 32px;
+    }
+
+    .qr-wrapper {
+      display: inline-block;
+      padding: 16px;
+      background: #f9f9f9;
+      border-radius: 8px;
+      margin-bottom: 24px;
+    }
+
+    #qrImg {
+      width: 200px;
+      height: 200px;
+      display: block;
+    }
+
+    .info {
+      text-align: left;
+      padding: 16px;
+      background: #f9f9f9;
+      border-radius: 6px;
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      color: #666;
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .status {
+      margin-top: 16px;
+      padding: 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .status.waiting {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    .status.success {
+      background: #d1fae5;
+      color: #065f46;
+    }
+
+    .status.error {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    .hint {
+      margin-top: 16px;
+      font-size: 13px;
+      color: #999;
+    }
+  </style>
 </head>
 
 <body>
-  <img id="qrImg" />
+  <div class="container">
-  <div id="info" class="info"></div>
+    <h1>二维码登录</h1>
-  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js
+    <p class="subtitle">使用网易云音乐App扫描二维码登录</p>
-    "></script>
-  <script>
 
+    <div class="qr-wrapper">
+      <img id="qrImg" src="" alt="二维码加载中..." />
+    </div>
+
+    <div id="status" class="status waiting">等待扫描...</div>
+
+    <div id="info" class="info"></div>
+
+    <p class="hint">请打开网易云音乐App，扫描上方二维码完成登录</p>
+  </div>
+
+  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
+  <script>
     async function login() {
       let timer
-      let timestamp = Date.now()
+      const statusDiv = document.getElementById('status')
       const cookie = localStorage.getItem('cookie')
+
+      updateStatus('加载二维码...', 'waiting')
       getLoginStatus(cookie)
+
+      try {
         const res = await axios({
           url: `/login/qr/key?timestamp=${Date.now()}`,
         })
         const key = res.data.data.unikey
+
         const res2 = await axios({
           url: `/login/qr/create?key=${key}&platform=web&qrimg=true&timestamp=${Date.now()}`,
         })
         document.querySelector('#qrImg').src = res2.data.data.qrimg
+        updateStatus('请扫描二维码', 'waiting')
 
         timer = setInterval(async () => {
           const statusRes = await checkStatus(key)
           if (statusRes.code === 800) {
-          alert('二维码已过期,请重新获取')
+            updateStatus('二维码已过期，请刷新页面', 'error')
             clearInterval(timer)
-        }
+          } else if (statusRes.code === 801) {
-        if (statusRes.code === 803) {
+            updateStatus('二维码已扫描，请在手机上确认', 'waiting')
-          // 这一步会返回cookie
+          } else if (statusRes.code === 802) {
+            updateStatus('登录成功，正在保存信息...', 'waiting')
+          } else if (statusRes.code === 803) {
             clearInterval(timer)
-          alert('授权登录成功')
+            updateStatus('授权登录成功！', 'success')
             await getLoginStatus(statusRes.cookie)
             localStorage.setItem('cookie', statusRes.cookie)
           }
         }, 3000)
+      } catch (error) {
+        console.error('登录失败:', error)
+        updateStatus('二维码加载失败，请刷新页面重试', 'error')
+      }
     }
-    login()
 
     async function checkStatus(key) {
       const res = await axios({
@@ -51,7 +170,9 @@
       })
       return res.data
     }
+
     async function getLoginStatus(cookie = '') {
+      try {
         const res = await axios({
           url: `/login/status?timestamp=${Date.now()}`,
           method: 'post',
@@ -59,14 +180,20 @@
             cookie,
           },
         })
-      document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2)
+        document.querySelector('#info').textContent = JSON.stringify(res.data, null, 2)
+      } catch (error) {
+        console.error('获取登录状态失败:', error)
       }
+    }
+
+    function updateStatus(message, type) {
+      const statusDiv = document.getElementById('status')
+      statusDiv.textContent = message
+      statusDiv.className = 'status ' + type
+    }
+
+    login()
   </script>
-  <style>
-    .info {
-      white-space: pre;
-    }
-  </style>
 </body>
 
 </html>

public/qrlogin.html

@@ -5,44 +5,164 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>二维码登录</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+
+    .container {
+      background: white;
+      border-radius: 12px;
+      padding: 48px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      max-width: 450px;
+      width: 100%;
+      text-align: center;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 8px;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      color: #666;
+      margin-bottom: 32px;
+    }
+
+    .qr-wrapper {
+      display: inline-block;
+      padding: 16px;
+      background: #f9f9f9;
+      border-radius: 8px;
+      margin-bottom: 24px;
+    }
+
+    #qrImg {
+      width: 200px;
+      height: 200px;
+      display: block;
+    }
+
+    .info {
+      text-align: left;
+      padding: 16px;
+      background: #f9f9f9;
+      border-radius: 6px;
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      color: #666;
+      white-space: pre-wrap;
+      word-break: break-all;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    .status {
+      margin-top: 16px;
+      padding: 12px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .status.waiting {
+      background: #fef3c7;
+      color: #92400e;
+    }
+
+    .status.success {
+      background: #d1fae5;
+      color: #065f46;
+    }
+
+    .status.error {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    .hint {
+      margin-top: 16px;
+      font-size: 13px;
+      color: #999;
+    }
+  </style>
 </head>
 
 <body>
-  <img id="qrImg" />
+  <div class="container">
+    <h1>二维码登录</h1>
+    <p class="subtitle">使用网易云音乐App扫描二维码登录</p>
+
+    <div class="qr-wrapper">
+      <img id="qrImg" src="" alt="二维码加载中..." />
+    </div>
+
+    <div id="status" class="status waiting">等待扫描...</div>
+
     <div id="info" class="info"></div>
-  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js
+
-    "></script>
+    <p class="hint">请打开网易云音乐App，扫描上方二维码完成登录</p>
+  </div>
+
+  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
   <script>
     async function login() {
       let timer
-      let timestamp = Date.now()
+      const statusDiv = document.getElementById('status')
       const cookie = localStorage.getItem('cookie')
+
+      updateStatus('加载二维码...', 'waiting')
       getLoginStatus(cookie)
+
+      try {
         const res = await axios({
           url: `/login/qr/key?timestamp=${Date.now()}`,
         })
         const key = res.data.data.unikey
+
         const res2 = await axios({
           url: `/login/qr/create?key=${key}&platform=web&qrimg=true&timestamp=${Date.now()}&ua=pc`,
         })
         document.querySelector('#qrImg').src = res2.data.data.qrimg
+        updateStatus('请扫描二维码', 'waiting')
 
         timer = setInterval(async () => {
           const statusRes = await checkStatus(key)
           if (statusRes.code === 800) {
-          alert('二维码已过期,请重新获取')
+            updateStatus('二维码已过期，请刷新页面', 'error')
             clearInterval(timer)
-        }
+          } else if (statusRes.code === 801) {
-        if (statusRes.code === 803) {
+            updateStatus('二维码已扫描，请在手机上确认', 'waiting')
-          // 这一步会返回cookie
+          } else if (statusRes.code === 802) {
+            updateStatus('登录成功，正在保存信息...', 'waiting')
+          } else if (statusRes.code === 803) {
             clearInterval(timer)
-          alert('授权登录成功')
+            updateStatus('授权登录成功！', 'success')
             await getLoginStatus(statusRes.cookie)
             localStorage.setItem('cookie', statusRes.cookie)
           }
         }, 3000)
+      } catch (error) {
+        console.error('登录失败:', error)
+        updateStatus('二维码加载失败，请刷新页面重试', 'error')
+      }
     }
-    login()
 
     async function checkStatus(key) {
       const res = await axios({
@@ -50,7 +170,9 @@
       })
       return res.data
     }
+
     async function getLoginStatus(cookie = '') {
+      try {
         const res = await axios({
           url: `/login/status?timestamp=${Date.now()}&ua=pc`,
           method: 'post',
@@ -58,14 +180,20 @@
             cookie,
           },
         })
-      document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2)
+        document.querySelector('#info').textContent = JSON.stringify(res.data, null, 2)
+      } catch (error) {
+        console.error('获取登录状态失败:', error)
       }
+    }
+
+    function updateStatus(message, type) {
+      const statusDiv = document.getElementById('status')
+      statusDiv.textContent = message
+      statusDiv.className = 'status ' + type
+    }
+
+    login()
   </script>
-  <style>
-    .info {
-      white-space: pre;
-    }
-  </style>
 </body>
 
 </html>

public/unblock_test.html

@@ -5,79 +5,136 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>音乐解灰测试</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
         body {
-            font-family: Arial, sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            max-width: 800px;
+            min-height: 100vh;
-            margin: 20px auto;
+            background: #f5f5f5;
-            padding: 0 20px;
-        }
-        .container {
-            background-color: #f5f5f5;
             padding: 20px;
-            border-radius: 8px;
         }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            padding: 32px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            font-size: 24px;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 24px;
+        }
+
         .form-group {
-            margin-bottom: 15px;
+            margin-bottom: 20px;
         }
-        .source-options {
+
-            display: flex;
+        label {
-            flex-wrap: wrap;
+            display: block;
-            gap: 10px;
+            font-size: 14px;
-            margin-bottom: 15px;
+            font-weight: 500;
+            color: #555;
+            margin-bottom: 8px;
         }
-        .source-option {
+
-            display: flex;
+        input {
-            align-items: center;
+            width: 100%;
-            gap: 5px;
+            padding: 12px 14px;
-        }
-        button {
-            background-color: #4CAF50;
-            color: white;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #45a049;
-        }
-        #result {
-            margin-top: 20px;
-            padding: 10px;
             border: 1px solid #ddd;
-            border-radius: 4px;
+            border-radius: 6px;
+            font-size: 15px;
+            outline: none;
+        }
+
+        input:focus {
+            border-color: #333;
+        }
+
+        button {
+            background: #333;
+            color: white;
+            padding: 14px 28px;
+            border: none;
+            border-radius: 6px;
+            font-size: 15px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s ease;
+        }
+
+        button:hover {
+            background: #555;
+        }
+
+        button:disabled {
+            background: #999;
+            cursor: not-allowed;
+        }
+
+        #result {
+            margin-top: 24px;
+            padding: 16px;
+            background: #f9f9f9;
+            border-radius: 6px;
+            border: 1px solid #eee;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
             white-space: pre-wrap;
+            word-break: break-all;
+            min-height: 100px;
+        }
+
+        .hint {
+            font-size: 12px;
+            color: #999;
+            margin-top: 4px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>音乐解灰测试</h1>
+        
         <div class="form-group">
-            <label for="songId">音乐 ID：</label>
+            <label for="songId">音乐 ID</label>
-            <input type="number" id="songId" placeholder="请输入音乐ID" required>
+            <input type="number" id="songId" placeholder="请输入音乐ID" />
+            <div class="hint">例如: 1372188635</div>
         </div>
+        
         <div class="form-group">
-            <label for="sources">音源列表：</label>
+            <label for="sources">音源列表（可选）</label>
-            <input type="text" id="sources" placeholder="请输入音源(非必填)">
+            <input type="text" id="sources" placeholder="请输入音源" />
+            <div class="hint">例如: kuwo, kugou, migu</div>
         </div>
-        <button onclick="testSong()">开始测试</button>
+        
+        <button id="testBtn" onclick="testSong()">开始测试</button>
+        
         <div id="result"></div>
     </div>
 
     <script>
         async function testSong() {
             const songId = document.getElementById('songId').value;
+            const sources = document.getElementById('sources').value;
+            const testBtn = document.getElementById('testBtn');
+            const resultDiv = document.getElementById('result');
+
             if (!songId) {
                 alert('请输入音乐ID');
                 return;
             }
 
-            const sources = document.getElementById('sources').value;
+            testBtn.disabled = true;
-
+            testBtn.textContent = '测试中...';
-
-
-            const resultDiv = document.getElementById('result');
             resultDiv.textContent = '正在请求...';
 
             try {
@@ -86,6 +143,9 @@
                 resultDiv.textContent = JSON.stringify(data, null, 2);
             } catch (error) {
                 resultDiv.textContent = `请求失败: ${error.message}`;
+            } finally {
+                testBtn.disabled = false;
+                testBtn.textContent = '开始测试';
             }
         }
     </script>

public/voice_upload.html

@@ -4,36 +4,230 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>播客上传声音</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        min-height: 100vh;
+        background: #f5f5f5;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 12px;
+        padding: 32px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      h1 {
+        font-size: 24px;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 24px;
+      }
+
+      .login-link {
+        display: block;
+        margin-bottom: 24px;
+        color: #666;
+        font-size: 14px;
+        text-decoration: none;
+      }
+
+      .login-link:hover {
+        color: #333;
+        text-decoration: underline;
+      }
+
+      .content {
+        display: flex;
+        gap: 24px;
+        flex-wrap: wrap;
+      }
+
+      .voice-list {
+        flex: 1;
+        min-width: 300px;
+      }
+
+      .voice-item {
+        padding: 12px 16px;
+        border: 1px solid #eee;
+        border-radius: 6px;
+        margin-bottom: 8px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .voice-item:hover {
+        border-color: #333;
+        background: #f9f9f9;
+      }
+
+      .voice-item.active {
+        border-color: #333;
+        background: #f0f0f0;
+      }
+
+      .voice-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .voice-cover {
+        width: 50px;
+        height: 50px;
+        border-radius: 4px;
+        object-fit: cover;
+      }
+
+      .voice-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .voice-tracks {
+        margin-top: 8px;
+        padding-left: 62px;
+      }
+
+      .voice-track {
+        font-size: 13px;
+        color: #666;
+        padding: 4px 0;
+      }
+
+      .upload-section {
+        flex: 1;
+        min-width: 300px;
+      }
+
+      .form-group {
+        margin-bottom: 16px;
+      }
+
+      label {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        color: #555;
+        margin-bottom: 8px;
+      }
+
+      input[type="text"], input[type="file"] {
+        width: 100%;
+        padding: 10px 14px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        outline: none;
+      }
+
+      input[type="text"]:focus {
+        border-color: #333;
+      }
+
+      .btn {
+        width: 100%;
+        padding: 12px;
+        background: #333;
+        color: white;
+        font-size: 15px;
+        font-weight: 500;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background 0.2s ease;
+      }
+
+      .btn:hover {
+        background: #555;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 40px 20px;
+        color: #999;
+        font-size: 14px;
+      }
+
+      .loading {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+      }
+    </style>
   </head>
 
   <body>
-    <div>
+    <div class="container">
-      <a href="/qrlogin-nocookie.html"> 如果没登录,请先登录 </a>
+      <h1>播客上传声音</h1>
-    </div>
+      <a href="/qrlogin-nocookie.html" class="login-link">还没登录？点击登录</a>
-    <div id="app">
+
-      <ul>
+      <div class="content">
-        <li
+        <div class="voice-list">
-          v-for="(item,index) in voicelist"
+          <h3 style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px;">选择播客列表</h3>
-          @click="currentVoiceIndex=index"
+          <div v-if="loading" class="loading">加载中...</div>
-          :class="{active:currentVoiceIndex===index}"
+          <div v-else-if="voicelist.length > 0">
+            <div
+              v-for="(item, index) in voicelist"
+              :key="index"
+              @click="currentVoiceIndex = index"
+              :class="{ active: currentVoiceIndex === index }"
+              class="voice-item"
             >
-          <img :src="item.coverUrl" style="width: 50px; width: 50px" />
+              <div class="voice-header">
-          <ul>
+                <img :src="item.coverUrl" class="voice-cover" alt="cover" />
-            <li v-for="(item2,index) in item.voiceListData">
+                <span class="voice-name">{{ item.voiceListName }}</span>
-              {{item2.voiceName}}
+              </div>
-            </li>
+              <div class="voice-tracks" v-if="item.voiceListData">
-          </ul>
+                <div
-          {{item.voiceListName}}
+                  v-for="(item2, index2) in item.voiceListData"
-        </li>
+                  :key="index2"
-      </ul>
+                  class="voice-track"
-      <input v-model="songName" placeholder="请输入声音名称" />
+                >
-      <input v-model="description" placeholder="请输入介绍" />
+                  {{ item2.voiceName }}
-      <input type="file" name="songFile" />
+                </div>
-      <button @click="submit">上传</button>
+              </div>
+            </div>
+          </div>
+          <div v-else class="empty-state">暂无播客列表</div>
+        </div>
+
+        <div class="upload-section">
+          <h3 style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px;">上传声音</h3>
+          <div class="form-group">
+            <label for="songName">声音名称</label>
+            <input id="songName" v-model="songName" placeholder="请输入声音名称" />
+          </div>
+
+          <div class="form-group">
+            <label for="description">介绍</label>
+            <input id="description" v-model="description" placeholder="请输入介绍" />
+          </div>
+
+          <div class="form-group">
+            <label>选择文件</label>
+            <input type="file" name="songFile" accept="audio/*" />
+          </div>
+
+          <button class="btn" @click="submit">上传</button>
+        </div>
+      </div>
     </div>
 
     <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
-    <script src="https://fastly.jsdelivr.net/npm/vue"></script>
+    <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
     <script>
       Vue.createApp({
         data() {
@@ -43,6 +237,7 @@
             voicelist: [],
             cookieToken: '',
             currentVoiceIndex: 0,
+            loading: false,
           }
         },
         created() {
@@ -50,12 +245,6 @@
         },
         computed: {
           currentVoice() {
-            // {
-            //   voiceListId: '',
-            //   coverImgId: '',
-            //   categoryId: '',
-            //   secondCategoryId: '',
-            // }
             return this.voicelist[this.currentVoiceIndex]
           },
         },
@@ -63,27 +252,49 @@
           submit() {
             console.info('submit')
             const file = document.querySelector('input[type=file]').files[0]
+            if (!file) {
+              alert('请选择文件')
+              return
+            }
             this.upload(file)
           },
 
           async getData() {
+            this.loading = true
+            try {
               const res = await axios({
                 url: `/voicelist/search?cookie=${localStorage.getItem('cookie')}`,
               })
 
               console.info(res.data.data)
-            this.voicelist = res.data.data.list
+              this.voicelist = res.data.data.list || []
-            this.voicelist.map(async (i) => {
+              this.voicelist.forEach(async (i) => {
+                try {
                   const res2 = await axios({
                     url: `/voicelist/list?voiceListId=${i.voiceListId}&limit=5`,
                   })
-              i.voiceListData = res2.data.data.list
+                  i.voiceListData = res2.data.data.list || []
                   console.info(res2)
+                } catch (err) {
+                  console.error('获取播客详情失败:', err)
+                }
               })
+            } catch (err) {
+              console.error('获取播客列表失败:', err)
+            } finally {
+              this.loading = false
+            }
           },
+
           upload(file) {
+            if (!this.currentVoice) {
+              alert('请先选择播客列表')
+              return
+            }
+
             var formData = new FormData()
             formData.append('songFile', file)
+
             axios({
               method: 'post',
               url: `/voice/upload?time=${Date.now()}&cookie=${localStorage.getItem(
@@ -102,26 +313,14 @@
             })
               .then((res) => {
                 alert(`${file.name} 上传成功`)
-                if (currentIndx >= fileLength) {
-                  console.info('上传完毕')
-                }
               })
-              .catch(async (err) => {
+              .catch((err) => {
-                console.info(err)
+                console.error('上传失败:', err)
+                alert('上传失败，请重试')
               })
           },
         },
-      }).mount('#app')
+      }).mount('body')
     </script>
-
-    <style>
-      ul li {
-        cursor: pointer;
-      }
-
-      ul li.active {
-        color: red;
-      }
-    </style>
   </body>
 </html>

server.js

@@ -235,7 +235,7 @@ async function consturctServer(moduleDefs) {
           if (ip == '::1') {
             ip = global.cnIp
           }
-          logger.info('Requested from ip:', ip)
+          // logger.info('Requested from ip:', ip)
           obj[3] = {
             ...obj[3],
             ip,

vercel.json

@@ -19,7 +19,6 @@
   ],
   "env": {
     "NODE_ENV": "production",
-    "ENABLE_FLAC": "true",
+    "ENABLE_FLAC": "true"
-    "ENABLE_GENERAL_UNBLOCK": "false"
   }
 }