diff --git a/.github/workflows/build-and-pr.yml b/.github/workflows/build-and-pr.yml
index f54f0a9..f743853 100644
--- a/.github/workflows/build-and-pr.yml
+++ b/.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({
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 74cb010..23a8c45 100644
--- a/CHANGELOG.MD
+++ b/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)
diff --git a/README.MD b/README.MD
index 3f16bc9..7ccece5 100644
--- a/README.MD
+++ b/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 仓库已不再更新)
diff --git a/interface.d.ts b/interface.d.ts
index de718c7..dae3528 100644
--- a/interface.d.ts
+++ b/interface.d.ts
@@ -153,58 +153,58 @@ export function artist_list(
   params: {
     area: ArtistArea
     initial?:
-    | 'a'
-    | 'b'
-    | 'c'
-    | 'd'
-    | 'e'
-    | 'f'
-    | 'g'
-    | 'h'
-    | 'i'
-    | 'j'
-    | 'k'
-    | 'l'
-    | 'm'
-    | 'n'
-    | 'o'
-    | 'p'
-    | 'q'
-    | 'r'
-    | 's'
-    | 't'
-    | 'u'
-    | 'v'
-    | 'w'
-    | 'x'
-    | 'y'
-    | 'z'
-    | 'A'
-    | 'B'
-    | 'C'
-    | 'D'
-    | 'E'
-    | 'F'
-    | 'G'
-    | 'H'
-    | 'I'
-    | 'J'
-    | 'K'
-    | 'L'
-    | 'M'
-    | 'N'
-    | 'O'
-    | 'P'
-    | 'Q'
-    | 'R'
-    | 'S'
-    | 'T'
-    | 'U'
-    | 'V'
-    | 'W'
-    | 'X'
-    | 'Y'
-    | 'Z'
+      | 'a'
+      | 'b'
+      | 'c'
+      | 'd'
+      | 'e'
+      | 'f'
+      | 'g'
+      | 'h'
+      | 'i'
+      | 'j'
+      | 'k'
+      | 'l'
+      | 'm'
+      | 'n'
+      | 'o'
+      | 'p'
+      | 'q'
+      | 'r'
+      | 's'
+      | 't'
+      | 'u'
+      | 'v'
+      | 'w'
+      | 'x'
+      | 'y'
+      | 'z'
+      | 'A'
+      | 'B'
+      | 'C'
+      | 'D'
+      | 'E'
+      | 'F'
+      | 'G'
+      | 'H'
+      | 'I'
+      | 'J'
+      | 'K'
+      | 'L'
+      | 'M'
+      | 'N'
+      | 'O'
+      | 'P'
+      | 'Q'
+      | 'R'
+      | 'S'
+      | 'T'
+      | 'U'
+      | 'V'
+      | 'W'
+      | 'X'
+      | 'Y'
+      | 'Z'
     type?: ArtistType
   } & MultiPageConfig &
     RequestBaseConfig,
diff --git a/package.json b/package.json
index e0a1cc8..e452a7e 100644
--- a/package.json
+++ b/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",
-    "axios": "^1.13.4",
+    "@neteasecloudmusicapienhanced/unblockmusic-utils": "^0.2.2",
+    "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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 20fc54d..d02db53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,17 +9,17 @@ importers:
   .:
     dependencies:
       '@neteasecloudmusicapienhanced/unblockmusic-utils':
-        specifier: ^0.1.3
-        version: 0.1.3
+        specifier: ^0.2.2
+        version: 0.2.2
       axios:
-        specifier: ^1.13.4
-        version: 1.13.4
+        specifier: ^1.13.5
+        version: 1.13.5
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
       dotenv:
-        specifier: ^17.2.3
-        version: 17.2.3
+        specifier: ^17.2.4
+        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
-        version: 11.11.1
+        specifier: ^11.12.0
+        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':
-    resolution: {integrity: sha512-X6DtL26AtRw4SsAG5iW+0ZbcvCrdhXLlaCSL38UWp1HW+F5+QXocBtzE6wkcZN/ZXAiKpMow2+Y1Igjx/foN/A==}
+  '@neteasecloudmusicapienhanced/unblockmusic-utils@0.2.2':
+    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:
-    resolution: {integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==}
+  ansi-escapes@7.3.0:
+    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:
-    resolution: {integrity: sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==}
+  axios@1.13.5:
+    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:
-    resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
+  commander@14.0.3:
+    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:
-    resolution: {integrity: sha512-JVUnt+DUIzu87TABbhPmNfVdBDt18BLOWjMUFJMSi/Qqg7NTYtabbvSNJGOJ7afbRuv9D/lngizHtP7QyLQ+9w==}
+  dotenv@17.2.4:
+    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:
-    resolution: {integrity: sha512-8FT+lSLznASDhn5KNJtQE6ZH95VqhxtKWNPrvdfhlqgbdZZEEAXehx+xpUvas4VuEZAu49BhQgLa3NlmPeRaww==}
+  music-metadata@11.12.0:
+    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:
-    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+  semver@7.7.4:
+    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: {}
 
diff --git a/public/api.html b/public/api.html
index ee0c9d5..1144bc7 100644
--- a/public/api.html
+++ b/public/api.html
@@ -5,82 +5,148 @@
 <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;
-        margin: 20px;
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      min-height: 100vh;
+      background: #f5f5f5;
+      padding: 20px;
     }
+
     .container {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
+      max-width: 1200px;
+      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 {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 10px;
-        margin-bottom: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      margin-bottom: 24px;
     }
-    input, button {
-        padding: 10px;
-        box-sizing: border-box;
-        flex: 1;
+
+    .form-row {
+      display: flex;
+      gap: 12px;
+      align-items: center;
     }
+
+    label {
+      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;
-        color: white;
-        border: none;
-        cursor: pointer;
+      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;
-        flex-grow: 1;
+      display: flex;
+      gap: 16px;
+      min-height: 400px;
     }
+
     .data-result > div {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        padding: 10px;
-        box-sizing: border-box;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
     }
+
     .data-result label {
-        margin-bottom: 10px;
+      margin-bottom: 8px;
+      padding: 0;
     }
-    #data, #result {
-        height: 100%;
-        box-sizing: border-box;
+
+    textarea {
+      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>
-            <input type="text" id="uri" name="uri" value="/api/song/lyric/v1">
-            <label for="crypto">crypto</label>
-            <select id="crypto" name="crypto">
-                <option value="weapi">weapi</option>
-                <option value="eapi">eapi</option>
-                <option value="api">api</option>
-                <option value="linuxapi">linuxapi</option>
-                <option value="" selected>(默认)</option>
-            </select>
-            <button type="submit">发送</button>
+            <div class="form-row">
+                <label for="uri">URI</label>
+                <input type="text" id="uri" name="uri" value="/api/song/lyric/v1">
+            </div>
+            <div class="form-row">
+                <label for="crypto">加密方式</label>
+                <select id="crypto" name="crypto">
+                    <option value="weapi">weapi</option>
+                    <option value="eapi">eapi</option>
+                    <option value="api">api</option>
+                    <option value="linuxapi">linuxapi</option>
+                    <option value="" selected>(默认)</option>
+                </select>
+            </div>
+            <div class="form-row">
+                <label></label>
+                <button type="submit">发送请求</button>
+            </div>
         </form>
         <div class="data-result">
             <div>
-                <label for="result">result</label>
-                <textarea id="result" name="result"></textarea>
+                <label for="result">响应结果</label>
+                <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,
diff --git a/public/audio_match_demo/afp.js b/public/audio_match_demo/afp.js
index 9a1ac13..c387e0b 100644
--- a/public/audio_match_demo/afp.js
+++ b/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++)
diff --git a/public/audio_match_demo/index.html b/public/audio_match_demo/index.html
index 2a3bfd5..550880c 100644
--- a/public/audio_match_demo/index.html
+++ b/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 {
-      font-family: monospace;
+    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: 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>
-  <hr>
-  <p><b>DISCLAIMER: </b></p>
-  <p>This site uses the offical NetEase audio matcher APIs (reverse engineered from <a
-      href="https://fn.music.163.com/g/chrome-extension-home-page-beta/">https://fn.music.163.com/g/chrome-extension-home-page-beta/</a>)
-  </p>
-  <p>And DOES NOT condone copyright infringment nor intellectual property theft.</p>
-  <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>
+  <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>
 
-  <audio id="audio" controls autoplay></audio>
-  <canvas id="canvas"></canvas>
-  <button id="invoke">Clip</button>
-  <input type="file" name="picker" accept="*" id="file">
-  <hr>
-  <label for="use-mic">Mix in Microphone input</label>
-  <input type="checkbox" name="use-mic" id="usemic">
-  <hr>
-  <pre id="logs"></pre>
+    <hr>
+
+    <div class="warning">
+      <strong>免责声明：</strong>本站点使用网易云音乐官方音频识别API（逆向自 <a href="https://fn.music.163.com/g/chrome-extension-home-page-beta/" target="_blank">Chrome 扩展页面</a>），不鼓励版权侵犯或知识产权盗窃。
+    </div>
+
+    <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>
+
+    <audio id="audio" controls autoplay></audio>
+    <canvas id="canvas"></canvas>
+
+    <div class="control-group">
+      <button id="invoke">识别</button>
+      <input type="file" name="picker" accept="*" id="file">
+    </div>
+
+    <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] Now querying, please wait...')
+      logs.write(`[index] 生成指纹 ${FP}`)
+      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>
\ No newline at end of file
diff --git a/public/avatar_update.html b/public/avatar_update.html
index 37aae10..9a62d78 100644
--- a/public/avatar_update.html
+++ b/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>
-    <a href="/qrlogin-nocookie.html">
-      如果没登录,请先登录
+  <div class="container">
+    <h1>更新头像</h1>
+    <p class="subtitle">选择一张图片作为您的新头像</p>
+
+    <div class="avatar-wrapper" id="avatarWrapper">
+      <img id="avatar" class="avatar" src="" alt="头像" />
+      <div class="loading-overlay">
+        <div class="spinner"></div>
+      </div>
+    </div>
+
+    <label class="upload-btn">
+      选择图片
+      <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>
-  <input id="file" type="file" />
-  <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
-    "></script>
+
+  <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(
-        'change',
-        function (e) {
-          var file = this.files[0]
-          upload(file)
-        },
-        false,
-      )
-      const res = await axios({
-        url: `/user/detail?uid=32953014&timestamp=${Date.now()}`,
-        withCredentials: true, //跨域的话必须设置
-      })
-      document.querySelector('#avatar').src = res.data.profile.avatarUrl
+      const fileInput = document.querySelector('input[type="file"]');
+      const avatarWrapper = document.getElementById('avatarWrapper');
+
+      fileInput.addEventListener('change', function(e) {
+        const file = this.files[0];
+        if (file) {
+          upload(file);
+        }
+      }, false);
+
+      try {
+        showToast('正在加载头像...', 'info');
+        avatarWrapper.classList.add('loading');
+        const res = await axios({
+          url: `/user/detail?uid=32953014&timestamp=${Date.now()}`,
+          withCredentials: true
+        });
+        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()
-      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
-          }&imgX=0&imgY=0&timestamp=${Date.now()}`,
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-        data: formData,
-      })
-      document.querySelector('#avatar').src = res.data.data.url
+      const avatarWrapper = document.getElementById('avatarWrapper');
+
+      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}&imgX=0&imgY=0&timestamp=${Date.now()}`,
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+          data: formData,
+        });
+
+        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()
-        reader.readAsDataURL(file)
-        reader.onload = function (theFile) {
-          let image = new Image()
-          image.src = theFile.target.result
-          image.onload = function () {
+        let reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function(theFile) {
+          let image = new Image();
+          image.src = theFile.target.result;
+          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>
diff --git a/public/cloud.html b/public/cloud.html
index e43753f..53bd60a 100644
--- a/public/cloud.html
+++ b/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>
-      <a href="/qrlogin-nocookie.html"> 如果没登录,请先登录 </a>
-    </div>
-    <input id="file" type="file" multiple />
-    <div id="app">
-      <ul>
-        <li v-for="(item,index) in songs" :key="index">{{item.songName}}</li>
-      </ul>
+    <div class="container">
+      <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>
+
+      <div id="app">
+        <div v-if="loading" class="loading">加载中...</div>
+        <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')
-            const _this = this
+            this.loading = true
             axios({
-              url: `/user/cloud?time=${Date.now()}&cookie=${localStorage.getItem(
-                'cookie',
-              )}`,
-            }).then((res) => {
-              console.info(res.data)
-              _this.songs = res.data.data
+              url: `/user/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
             })
+              .then((res) => {
+                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)
-            let currentIndx = 0
-            fileLength = this.files.length
-            for (const item of this.files) {
-              currentIndx += 1
-              upload(item, currentIndx)
+            const files = this.files
+            if (files.length === 0) return
+
+            fileLength = files.length
+            for (let i = 0; i < files.length; i++) {
+              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(
-            'cookie',
-          )}`,
+          url: `/cloud?time=${Date.now()}&cookie=${localStorage.getItem('cookie')}`,
           headers: {
             'Content-Type': 'multipart/form-data',
           },
           data: formData,
         })
           .then((res) => {
-            console.info(`${file.name} 上传成功`)
-            if (currentIndx >= fileLength) {
-              console.info('上传完毕')
+            console.log(`${file.name} 上传成功`)
+            if (currentIndex >= fileLength) {
+              console.log('所有文件上传完毕')
             }
             app.getData()
           })
-          .catch(async (err) => {
-            console.info(err)
-            console.info(fileUpdateTime)
-            fileUpdateTime[file.name]
-              ? (fileUpdateTime[file.name] += 1)
-              : (fileUpdateTime[file.name] = 1)
+          .catch((err) => {
+            console.error(`${file.name} 上传失败:`, err)
+            fileUpdateTime[file.name] = (fileUpdateTime[file.name] || 0) + 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>
diff --git a/public/docs/index.html b/public/docs/index.html
index eff6f31..9ef5ffb 100644
--- a/public/docs/index.html
+++ b/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>
diff --git a/public/eapi_decrypt.html b/public/eapi_decrypt.html
index ace7e41..061a6e8 100644
--- a/public/eapi_decrypt.html
+++ b/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>
+    * {
+      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;
+    }
+
+    .decode-result {
+      white-space: pre-wrap;
+      word-break: break-all;
+      background: #f9f9f9;
+      padding: 16px;
+      border-radius: 6px;
+      border: 1px solid #eee;
+      min-height: 200px;
+      max-height: 400px;
+      overflow: auto;
+      font-family: 'Courier New', monospace;
+      font-size: 13px;
+    }
+
+    .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>
 
-<style>
-  .decode-result {
-    white-space: pre-wrap;
-    word-break: break-all;
-    background-color: #f0f0f0;
-    padding: 10px;
-    border-radius: 5px;
-    margin-top: 10px;
-    height: 300px;
-    overflow: auto;
-  }
-</style>
-
 <body>
-  <div id="app" class="p-5 flex flex-col">
-    <h1 class="text-2xl font-bold mb-5">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">
-      解密
-    </button>
-    <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 id="app" class="container">
+    <h1>eapi 参数和返回内容解析</h1>
+
+    <div class="form-group">
+      <label for="hexString">十六进制字符串</label>
+      <textarea id="hexString" v-model="hexString" rows="10"></textarea>
     </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>
-      <p>使用例子:</p>
-      <img src="/static/eapi_params.png" />
-      <img src="/static/eapi_response.png" />
+    <button @click="decrypt">解密</button>
+
+    <div class="result-section">
+      <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 || '解密失败，数据格式错误')
           }
         }
       }
diff --git a/public/index.html b/public/index.html
index fbe8d80..8c58f59 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,33 +7,33 @@
   <title>网易云音乐 API Enhanced</title>
   <style>
     :root {
-      --fg: #111827; /* gray-900 */
-      --muted: #6b7280; /* gray-500 */
-      --border: #e5e7eb; /* gray-200 */
-      --bg: #ffffff;
-      --panel: #f9fafb; /* gray-50 */
-      --accent: #2563eb; /* blue-600 */
+      --fg: #333;
+      --muted: #666;
+      --border: #ddd;
+      --bg: #f5f5f5;
+      --panel: #ffffff;
+      --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; }
-    .badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 14px; font-size: 12px; color: var(--muted); }
-    .sub { margin-top: 6px; color: var(--muted); }
-    .block { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
-    .block h2 { margin: 0 0 10px; font-size: 18px; }
+    header.site-header h1 { font-size: 28px; font-weight: 600; margin: 0; }
+    .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: 8px; color: var(--muted); font-size: 14px; }
+    .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 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 a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
+    ul.links li { margin: 8px 0; }
+    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; }
-    code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", 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 a { color: var(--fg); text-decoration: none; }
+    pre { margin: 0; background: #f9f9f9; border: 1px solid var(--border); border-radius: 6px; padding: 12px; overflow: auto; }
+    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); text-align: center; }
+    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>
diff --git a/public/listen_together_host.html b/public/listen_together_host.html
index 6d3ffff..ec53cc3 100644
--- a/public/listen_together_host.html
+++ b/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
-      rel="stylesheet"
-      href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css"
-    />
-    <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
+    <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: 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">
-    <div>
-      <a href="/qrlogin.html"> 如果没登录,请先登录 </a>
-    </div>
+  <body class="container">
+    <a href="/qrlogin.html" class="login-link">还没登录？点击登录</a>
+
     <h1>一起听 - 主机模式</h1>
-    <div>消息: {{message}}</div>
-    <audio id="player" autoplay controls></audio>
-    <br />
-    <br />
-    <button v-if="!account.login" @click="login">获取登录状态</button>
-    <div>您的当前登录账号为: {{account.nickname}}</div>
-    <br />
-    <div v-if="account.login">
-      <button v-if="!roomInfo.roomId" @click="createRoom">创建房间</button>
+
+    <div class="message">消息: {{message}}</div>
+
+    <audio id="player" class="audio-player" autoplay controls></audio>
+
+    <div v-if="!account.login">
+      <button class="btn" @click="login">获取登录状态</button>
+    </div>
+
+    <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>
-          <span>邀请者 ID: </span><input v-model="roomInfo.inviterId" />
+        <div class="input-group">
+          <label>房间ID:</label>
+          <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>
-          分享链接为:
+      <div v-if="roomInfo.roomId" style="margin-top: 16px;">
+        <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 @click="refreshRoom">刷新房间状态</button>
-        <div>在线用户:</div>
-        <ul class="mdui-list">
-          <li
-            v-for="user in roomInfo.roomUsers"
-            class="mdui-list-item mdui-ripple"
-          >
-            <div class="mdui-list-item-avatar">
-              <img :src="user.avatarUrl" />
-            </div>
-            <div class="mdui-list-item-content">{{user.nickname}}</div>
+        <button class="btn" @click="refreshRoom">刷新房间状态</button>
+        <button class="btn" @click="closeRoom">关闭房间</button>
+
+        <h4 style="margin-top: 16px;">在线用户</h4>
+        <ul class="user-list">
+          <li v-for="user in roomInfo.roomUsers" :key="user.userId" class="user-item">
+            <img :src="user.avatarUrl" class="user-avatar" alt="avatar" />
+            <span class="user-name">{{user.nickname}}</span>
           </li>
         </ul>
-        <button v-if="roomInfo.roomId" @click="closeRoom">关闭房间</button>
       </div>
     </div>
-    <button @click="playTrack">播放</button>
-    <button @click="pauseTrack">暂停</button>
-    <button @click="seekTrack">同步进度</button>
+
+    <div class="section">
+      <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>
-        <span>歌单ID: </span><input v-model="playlistInfo.playlistId" />
+      <div class="section">
+        <div class="input-group">
+          <label>歌单ID:</label>
+          <input v-model="playlistInfo.playlistId" type="text" />
+        </div>
+        <button class="btn" @click="loadPlaylist">加载歌单</button>
+        <div style="margin-top: 12px; font-size: 14px; color: #555;">
+          歌单名称: {{playlistInfo.playlistName}}
+        </div>
+
+        <h4 style="margin-top: 16px;">歌单内容</h4>
+        <ul class="track-list">
+          <li
+            @click="gotoTrack(track.id)"
+            v-for="track in playlistInfo.playlistTracks"
+            :key="track.id"
+            class="track-item"
+          >
+            <img :src="track.al.picUrl" class="track-cover" alt="cover" />
+            <span class="track-name">{{track.name}}</span>
+          </li>
+        </ul>
       </div>
-      <button @click="loadPlaylist">加载歌单到播放列表</button>
-      <span>{{playlistInfo.playlistName}}</span>
-      <br />
-      <br />
-      <div>歌单内容:</div>
-      <ul class="mdui-list">
-        <li
-          @click="gotoTrack(track.id)"
-          v-for="track in playlistInfo.playlistTracks"
-          class="mdui-list-item mdui-ripple"
-        >
-          <div class="mdui-list-item-avatar">
-            <img :src="track.al.picUrl" />
-          </div>
-          <div class="mdui-list-item-content">{{track.name}}</div>
-        </li>
-      </ul>
     </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
         }
diff --git a/public/login.html b/public/login.html
index 5e29214..2425151 100644
--- a/public/login.html
+++ b/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,17 +152,67 @@
       })
       return res.data.cookie
     }
-    async function main() {
-      const cookieToken = await login()
-      const res = await axios({
-        url: `/login/status`,
-        method: 'post',
-        data: {
-          cookie: cookieToken,
-        },
-      })
+
+    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',
+          data: {
+            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>
 
diff --git a/public/playlist_cover_update.html b/public/playlist_cover_update.html
index bdefa67..18bbeaa 100644
--- a/public/playlist_cover_update.html
+++ b/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>
-    <a href="/qrlogin-nocookie.html">
-      如果没登录,请先登录
-    </a>
+  <div class="container">
+    <h1>歌单封面上传</h1>
+    <p class="subtitle">上传自定义歌单封面图片</p>
+
+    <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>
+
+    <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>
-  <input id="file" type="file" name="filename" />
-  <img id="playlist_cover" style="height: 200px; width: 200px; border-radius: 50%" />
+
   <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js"></script>
   <script>
-    const playlist_id = ''
-    if (!playlist_id) {
-      const msg = '请设置你的歌单id'
-      alert(msg)
-      throw new Error(msg)
+    const loadingOverlay = document.getElementById('loading')
+    const playlistIdInput = document.getElementById('playlistId')
+    const resultDiv = document.getElementById('result')
+
+    function showLoading() {
+      loadingOverlay.classList.add('active')
     }
 
-    main()
-    async function main() {
-      document.querySelector('input[type="file"]').addEventListener(
-        'change',
-        function (e) {
-          var file = this.files[0]
-          upload(file)
-        },
-        false,
-      )
-      const res = await axios({
-        url: `/playlist/detail?id=${playlist_id}&timestamp=${Date.now()}`,
+    function hideLoading() {
+      loadingOverlay.classList.remove('active')
+    }
+
+    function showResult(message, type) {
+      resultDiv.textContent = message
+      resultDiv.className = 'result ' + type
+      resultDiv.style.display = 'block'
+    }
+
+    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=${playlistId}&timestamp=${Date.now()}`,
+        })
+        document.querySelector('#playlist_cover').src = res.data.playlist.coverImgUrl
+        hideResult()
+      } catch (error) {
+        console.error('加载封面失败:', error)
+        showResult('加载封面失败，请检查歌单ID', 'error')
+      } finally {
+        hideLoading()
+      }
+    }
+
+    // 监听歌单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()
+        }
       })
-      document.querySelector('#playlist_cover').src = res.data.playlist.coverImgUrl
-    }
 
-    async function upload(file) {
+    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
-          }&imgX=0&imgY=0&timestamp=${Date.now()}`,
+        url: `/playlist/cover/update?id=${playlistId}&cookie=${localStorage.getItem('cookie')}&imgSize=${imgSize.width}&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,10 +309,16 @@
               height: this.height,
             })
           }
+          image.onerror = function() {
+            reject(new Error('图片加载失败'))
+          }
+        }
+        reader.onerror = function() {
+          reject(new Error('文件读取失败'))
         }
       })
     }
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/playlist_import.html b/public/playlist_import.html
index 7b3532e..e2e7933 100644
--- a/public/playlist_import.html
+++ b/public/playlist_import.html
@@ -2,261 +2,416 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>歌单导入工具</title>
-    <!-- 引入Bootstrap CSS -->
-    <link href="https://fastly.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- 引入Bootstrap JS -->
-    <script src="https://fastly.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <!-- 引入axios用于发送异步请求 -->
-    <script src="https://fastly.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <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: 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">
-        <h1 class="mb-4">歌单导入工具</h1>
-        <p>请选择一种导入方式并填写相关信息：</p>
+    <div class="container">
+        <h1>歌单导入工具</h1>
+        <p class="subtitle">请选择一种导入方式并填写相关信息</p>
 
-        <!-- 表单开始 -->
-        <form id="importForm" novalidate>
-            <!-- 选项卡导航 -->
-            <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">
-                    <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>
-                </li>
-                <li class="nav-item" 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>
-                </li>
-            </ul>
+        <ul class="tabs" id="importTabs" role="tablist">
+            <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>
+            </li>
+            <li role="presentation">
+                <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 role="presentation">
+                <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" id="importTabContent">
-                <!-- 元数据导入 -->
-                <div class="tab-pane fade show active" id="metadata" role="tabpanel" aria-labelledby="metadata-tab">
-                    <table class="table table-bordered mb-3">
-                        <thead>
-                            <tr>
-                                <th scope="col">歌曲名称</th>
-                                <th scope="col">艺术家</th>
-                                <th scope="col">专辑</th>
-                            </tr>
-                        </thead>
-                        <tbody id="metadataTableBody">
-                            <!-- 默认添加一行 -->
-                            <tr>
-                                <td><input type="text" class="form-control" name="name[]" placeholder="歌曲名称"></td>
-                                <td><input type="text" class="form-control" name="artist[]" placeholder="艺术家"></td>
-                                <td><input type="text" class="form-control" name="album[]" placeholder="专辑"></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                    <button type="button" class="btn btn-secondary mb-3" id="addMetadataRow">增加歌曲</button>
+        <div class="tab-content active" id="importTabContent">
+            <!-- 元数据导入 -->
+            <div class="tab-content active" id="metadata" role="tabpanel" aria-labelledby="metadata-tab">
+                <table>
+                    <thead>
+                        <tr>
+                            <th style="width: 33%">歌曲名称</th>
+                            <th style="width: 33%">艺术家</th>
+                            <th style="width: 33%">专辑</th>
+                        </tr>
+                    </thead>
+                    <tbody id="metadataTableBody">
+                        <tr>
+                            <td><input type="text" name="name[]" placeholder="歌曲名称"></td>
+                            <td><input type="text" name="artist[]" placeholder="艺术家"></td>
+                            <td><input type="text" name="album[]" placeholder="专辑"></td>
+                        </tr>
+                    </tbody>
+                </table>
+                <button type="button" class="btn btn-secondary" id="addMetadataRow">增加歌曲</button>
+            </div>
+            <!-- 文字导入 -->
+            <div class="tab-content" id="text" role="tabpanel" aria-labelledby="text-tab">
+                <div class="form-group">
+                    <label for="textInput">文字内容</label>
+                    <textarea id="textInput" name="text" rows="5" placeholder="请输入歌曲信息，每行一首歌曲"></textarea>
                 </div>
-                <!-- 文字导入 -->
-                <div class="tab-pane fade" id="text" role="tabpanel" aria-labelledby="text-tab">
-                    <div class="mb-3">
-                        <label for="textInput" class="form-label">文字:</label>
-                        <textarea class="form-control" id="textInput" name="text" rows="5"></textarea>
-                    </div>
-                    <div class="mb-3">
-                        <label for="playlistNameInput" class="form-label">歌单名:</label>
-                        <input type="text" class="form-control" id="playlistNameInput" name="playlistName" placeholder="请输入歌单名">
-                    </div>
-                </div>
-                <!-- 链接导入 -->
-                <div class="tab-pane fade" id="link" role="tabpanel" aria-labelledby="link-tab">
-                    <div class="mb-3">
-                        <label for="linkInputs" class="form-label">链接:</label>
-                        <div id="linkInputsContainer">
-                            <div class="input-group mb-3">
-                                <input type="text" class="form-control" 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>
-                        <div class="mb-3">
-                            <label for="playlistNameLinkInput" class="form-label">歌单名:</label>
-                            <input type="text" class="form-control" id="playlistNameLinkInput" name="playlistName" placeholder="请输入歌单名">
-                        </div>
-                    </div>
+                <div class="form-group">
+                    <label for="playlistNameInput">歌单名称</label>
+                    <input type="text" id="playlistNameInput" name="playlistName" placeholder="请输入歌单名">
                 </div>
             </div>
-
-            <!-- 是否导入我喜欢的音乐 -->
-            <div class="form-check">
-                <input class="form-check-input" type="checkbox" value="" id="importStarCheckbox">
-                <label class="form-check-label" for="importStarCheckbox">
-                    导入“我喜欢的音乐”
-                </label>
+            <!-- 链接导入 -->
+            <div class="tab-content" id="link" role="tabpanel" aria-labelledby="link-tab">
+                <div class="form-group">
+                    <label>链接列表</label>
+                    <div id="linkInputsContainer">
+                        <div class="input-group">
+                            <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" id="addLinkButton" style="margin-top: 8px;">增加链接</button>
+                </div>
+                <div class="form-group" style="margin-top: 20px;">
+                    <label for="playlistNameLinkInput">歌单名称</label>
+                    <input type="text" id="playlistNameLinkInput" name="playlistName" placeholder="请输入歌单名">
+                </div>
             </div>
+        </div>
 
-            <!-- 提交按钮 -->
-            <button type="submit" class="btn btn-primary mt-3">导入歌曲</button>
-        </form>
-        <!-- 表单结束 -->
+        <div class="checkbox-group">
+            <input type="checkbox" value="" id="importStarCheckbox">
+            <label for="importStarCheckbox">
+                导入"我喜欢的音乐"
+            </label>
+        </div>
 
-        <script>
-            // 动态增加链接输入框
-            document.getElementById('addLinkButton').addEventListener('click', function() {
-                var container = document.getElementById('linkInputsContainer');
-                var newIndex = container.childElementCount - 1; // 减去非输入框元素的数量
-                var newInput = document.createElement('input');
-                newInput.type = 'text';
-                newInput.className = 'form-control';
-                newInput.id = `linkInput${newIndex}`;
-                newInput.name = `linkInput${newIndex}`;
-                newInput.placeholder = '请输入链接';
-
-                var removeButton = document.createElement('button');
-                removeButton.type = 'button';
-                removeButton.className = 'btn btn-secondary removeLinkButton';
-                removeButton.textContent = '×';
-                removeButton.dataset.index = newIndex.toString();
-                removeButton.addEventListener('click', function() {
-                    var group = this.closest('.input-group');
-                    container.removeChild(group);
-                });
-
-                var inputGroup = document.createElement('div');
-                inputGroup.className = 'input-group mb-3';
-                inputGroup.appendChild(newInput);
-                inputGroup.appendChild(removeButton);
-
-                container.appendChild(inputGroup);
-            });
-
-            // 动态增加元数据行
-            document.getElementById('addMetadataRow').addEventListener('click', function() {
-                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>${artistInput.outerHTML}</td>
-                    <td>${albumInput.outerHTML}</td>
-                `;
-
-                container.appendChild(newRow);
-            });
-
-            document.getElementById('importForm').addEventListener('submit', async function(event) {
-                // 阻止默认行为
-                event.preventDefault();
-
-                // 获取表单值
-                let text = document.getElementById('textInput').value;
-                let links = [];
-                let local = [];
-                let playlistName = '';
-
-                // 获取所有链接输入框的值
-                let linkInputs = document.querySelectorAll('#linkInputsContainer .input-group .form-control');
-                linkInputs.forEach(function(input) {
-                    if (input.value.trim() !== '') {
-                        links.push(input.value);
-                    }
-                });
-
-                // 获取元数据
-                let metadataRows = document.querySelectorAll('#metadataTableBody tr');
-                metadataRows.forEach(function(row) {
-                    let name = row.querySelector('input[name="name[]"]').value;
-                    let artist = row.querySelector('input[name="artist[]"]').value;
-                    let album = row.querySelector('input[name="album[]"]').value;
-                    if (name && artist && album) {
-                        local.push({ name, artist, album });
-                    }
-                });
-
-                // 检查是否有且只有一个输入字段被填写
-                let filledCount = (text ? 1 : 0) + (links.length > 0 ? 1 : 0) + (local.length > 0 ? 1 : 0);
-                if (filledCount !== 1) {
-                    alert("请确保仅填写了一个输入字段！");
-                    return;
-                }
-
-                // 获取歌单名
-                if (document.getElementById('importStarCheckbox').checked) {
-                    playlistName = '我喜欢的音乐';
-                } else {
-                    playlistName = document.getElementById('playlistNameInput').value ||
-                       document.getElementById('playlistNameLinkInput').value ||
-                       '导入音乐 ' + new Date().toLocaleString();
-                }
-
-                // 创建请求参数
-                let data = {};
-                if (text) {
-                    data.text = text;
-                    data.playlistName = playlistName;
-                } else if (links.length > 0) {
-                    data.link = JSON.stringify(links);
-                    data.playlistName = playlistName;
-                } else if (local.length > 0) {
-                    data.local = JSON.stringify(local);
-                }
-
-                // 添加额外参数
-                if (document.getElementById('importStarCheckbox').checked) {
-                    data.importStarPlaylist = true;
-                }
-
-                try {
-                    const res = await axios({
-                        url: `/playlist/import/name/task/create?timestamp=${Date.now()}`,
-                        method: 'post',
-                        data: data,
-                    });
-
-                    let taskId = res.data?.data?.taskId
-                    if (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);
-                    alert('导入失败，请检查您的输入或稍后再试。');
-                }
-            });
-
-            // 监听复选框状态变化
-            document.getElementById('importStarCheckbox').addEventListener('change', function() {
-                let isChecked = this.checked;
-                let playlistNameInputs = document.querySelectorAll('[name="playlistName"]');
-                playlistNameInputs.forEach(function(input) {
-                    input.disabled = isChecked;
-                });
-            });
-
-            // 初始化时设置歌单名输入框的状态
-            document.getElementById('importStarCheckbox').dispatchEvent(new Event('change'));
-        </script>
+        <button type="submit" class="btn" id="submitBtn">导入歌曲</button>
     </div>
+
+    <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.children.length;
+            var newInput = document.createElement('input');
+            newInput.type = 'text';
+            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';
+            removeButton.textContent = '×';
+            removeButton.dataset.index = newIndex.toString();
+            removeButton.addEventListener('click', function() {
+                var group = this.closest('.input-group');
+                container.removeChild(group);
+            });
+
+            var inputGroup = document.createElement('div');
+            inputGroup.className = 'input-group';
+            inputGroup.appendChild(newInput);
+            inputGroup.appendChild(removeButton);
+
+            container.appendChild(inputGroup);
+        });
+
+        // 动态增加元数据行
+        document.getElementById('addMetadataRow').addEventListener('click', function() {
+            var container = document.getElementById('metadataTableBody');
+            var newRow = document.createElement('tr');
+
+            newRow.innerHTML = `
+                <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><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><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('submitBtn').addEventListener('click', async function() {
+            // 获取表单值
+            let text = document.getElementById('textInput').value;
+            let links = [];
+            let local = [];
+            let playlistName = '';
+
+            // 获取所有链接输入框的值
+            let linkInputs = document.querySelectorAll('#linkInputsContainer .input-group input[type="text"]');
+            linkInputs.forEach(function(input) {
+                if (input.value.trim() !== '') {
+                    links.push(input.value);
+                }
+            });
+
+            // 获取元数据
+            let metadataRows = document.querySelectorAll('#metadataTableBody tr');
+            metadataRows.forEach(function(row) {
+                let name = row.querySelector('input[name="name[]"]').value;
+                let artist = row.querySelector('input[name="artist[]"]').value;
+                let album = row.querySelector('input[name="album[]"]').value;
+                if (name && artist && album) {
+                    local.push({ name, artist, album });
+                }
+            });
+
+            // 检查是否有且只有一个输入字段被填写
+            let filledCount = (text ? 1 : 0) + (links.length > 0 ? 1 : 0) + (local.length > 0 ? 1 : 0);
+            if (filledCount !== 1) {
+                alert("请确保仅填写了一个输入字段！");
+                return;
+            }
+
+            // 获取歌单名
+            if (document.getElementById('importStarCheckbox').checked) {
+                playlistName = '我喜欢的音乐';
+            } else {
+                playlistName = document.getElementById('playlistNameInput').value ||
+                   document.getElementById('playlistNameLinkInput').value ||
+                   '导入音乐 ' + new Date().toLocaleString();
+            }
+
+            // 创建请求参数
+            let data = {};
+            if (text) {
+                data.text = text;
+                data.playlistName = playlistName;
+            } else if (links.length > 0) {
+                data.link = JSON.stringify(links);
+                data.playlistName = playlistName;
+            } else if (local.length > 0) {
+                data.local = JSON.stringify(local);
+            }
+
+            // 添加额外参数
+            if (document.getElementById('importStarCheckbox').checked) {
+                data.importStarPlaylist = true;
+            }
+
+            try {
+                const res = await axios({
+                    url: `/playlist/import/name/task/create?timestamp=${Date.now()}`,
+                    method: 'post',
+                    data: data,
+                });
+
+                let taskId = res.data?.data?.taskId
+                if (taskId) {
+                    alert(`任务创建成功！正在导入，请稍等；任务id：${taskId}`)
+                }
+            } catch (error) {
+                console.error('Error:', error);
+                alert('导入失败，请检查您的输入或稍后再试。');
+            }
+        });
+
+        // 监听复选框状态变化
+        document.getElementById('importStarCheckbox').addEventListener('change', function() {
+            let isChecked = this.checked;
+            let playlistNameInputs = document.querySelectorAll('[name="playlistName"]');
+            playlistNameInputs.forEach(function(input) {
+                input.disabled = isChecked;
+            });
+        });
+
+        // 初始化时设置歌单名输入框的状态
+        document.getElementById('importStarCheckbox').dispatchEvent(new Event('change'));
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/public/qrlogin-nocookie.html b/public/qrlogin-nocookie.html
index f8f8014..72de9fb 100644
--- a/public/qrlogin-nocookie.html
+++ b/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 id="info" class="info"></div>
-  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js
-    "></script>
-  <script>
+  <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>
+
+    <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')
-      getLoginStatus(cookie)
-      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
 
-      timer = setInterval(async () => {
-        const statusRes = await checkStatus(key)
-        if (statusRes.code === 800) {
-          alert('二维码已过期,请重新获取')
-          clearInterval(timer)
-        }
-        if (statusRes.code === 803) {
-          // 这一步会返回cookie
-          clearInterval(timer)
-          alert('授权登录成功')
-          await getLoginStatus(statusRes.cookie)
-          localStorage.setItem('cookie', statusRes.cookie)
-        }
-      }, 3000)
+      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) {
+            updateStatus('二维码已过期，请刷新页面', 'error')
+            clearInterval(timer)
+          } else if (statusRes.code === 801) {
+            updateStatus('二维码已扫描，请在手机上确认', 'waiting')
+          } else if (statusRes.code === 802) {
+            updateStatus('登录成功，正在保存信息...', 'waiting')
+          } else if (statusRes.code === 803) {
+            clearInterval(timer)
+            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,22 +170,30 @@
       })
       return res.data
     }
+
     async function getLoginStatus(cookie = '') {
-      const res = await axios({
-        url: `/login/status?timestamp=${Date.now()}`,
-        method: 'post',
-        data: {
-          cookie,
-        },
-      })
-      document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2)
+      try {
+        const res = await axios({
+          url: `/login/status?timestamp=${Date.now()}`,
+          method: 'post',
+          data: {
+            cookie,
+          },
+        })
+        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>
diff --git a/public/qrlogin.html b/public/qrlogin.html
index dc9c6ef..f803304 100644
--- a/public/qrlogin.html
+++ b/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 id="info" class="info"></div>
-  <script src="https://fastly.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js
-    "></script>
+  <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>
+
+    <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')
-      getLoginStatus(cookie)
-      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
 
-      timer = setInterval(async () => {
-        const statusRes = await checkStatus(key)
-        if (statusRes.code === 800) {
-          alert('二维码已过期,请重新获取')
-          clearInterval(timer)
-        }
-        if (statusRes.code === 803) {
-          // 这一步会返回cookie
-          clearInterval(timer)
-          alert('授权登录成功')
-          await getLoginStatus(statusRes.cookie)
-          localStorage.setItem('cookie', statusRes.cookie)
-        }
-      }, 3000)
+      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) {
+            updateStatus('二维码已过期，请刷新页面', 'error')
+            clearInterval(timer)
+          } else if (statusRes.code === 801) {
+            updateStatus('二维码已扫描，请在手机上确认', 'waiting')
+          } else if (statusRes.code === 802) {
+            updateStatus('登录成功，正在保存信息...', 'waiting')
+          } else if (statusRes.code === 803) {
+            clearInterval(timer)
+            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,22 +170,30 @@
       })
       return res.data
     }
+
     async function getLoginStatus(cookie = '') {
-      const res = await axios({
-        url: `/login/status?timestamp=${Date.now()}&ua=pc`,
-        method: 'post',
-        data: {
-          cookie,
-        },
-      })
-      document.querySelector('#info').innerText = JSON.stringify(res.data, null, 2)
+      try {
+        const res = await axios({
+          url: `/login/status?timestamp=${Date.now()}&ua=pc`,
+          method: 'post',
+          data: {
+            cookie,
+          },
+        })
+        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>
diff --git a/public/unblock_test.html b/public/unblock_test.html
index 9d35020..09cca26 100644
--- a/public/unblock_test.html
+++ b/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;
-            max-width: 800px;
-            margin: 20px auto;
-            padding: 0 20px;
-        }
-        .container {
-            background-color: #f5f5f5;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-height: 100vh;
+            background: #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;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-bottom: 15px;
+
+        label {
+            display: block;
+            font-size: 14px;
+            font-weight: 500;
+            color: #555;
+            margin-bottom: 8px;
         }
-        .source-option {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-        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;
+
+        input {
+            width: 100%;
+            padding: 12px 14px;
             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>
-            <input type="number" id="songId" placeholder="请输入音乐ID" required>
+            <label for="songId">音乐 ID</label>
+            <input type="number" id="songId" placeholder="请输入音乐ID" />
+            <div class="hint">例如: 1372188635</div>
         </div>
+        
         <div class="form-group">
-            <label for="sources">音源列表：</label>
-            <input type="text" id="sources" placeholder="请输入音源(非必填)">
+            <label for="sources">音源列表（可选）</label>
+            <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;
-
-
-
-            const resultDiv = document.getElementById('result');
+            testBtn.disabled = true;
+            testBtn.textContent = '测试中...';
             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>
diff --git a/public/voice_upload.html b/public/voice_upload.html
index ebefcaa..e8f9e40 100644
--- a/public/voice_upload.html
+++ b/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>
-      <a href="/qrlogin-nocookie.html"> 如果没登录,请先登录 </a>
-    </div>
-    <div id="app">
-      <ul>
-        <li
-          v-for="(item,index) in voicelist"
-          @click="currentVoiceIndex=index"
-          :class="{active:currentVoiceIndex===index}"
-        >
-          <img :src="item.coverUrl" style="width: 50px; width: 50px" />
-          <ul>
-            <li v-for="(item2,index) in item.voiceListData">
-              {{item2.voiceName}}
-            </li>
-          </ul>
-          {{item.voiceListName}}
-        </li>
-      </ul>
-      <input v-model="songName" placeholder="请输入声音名称" />
-      <input v-model="description" placeholder="请输入介绍" />
-      <input type="file" name="songFile" />
-      <button @click="submit">上传</button>
+    <div class="container">
+      <h1>播客上传声音</h1>
+      <a href="/qrlogin-nocookie.html" class="login-link">还没登录？点击登录</a>
+
+      <div class="content">
+        <div class="voice-list">
+          <h3 style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px;">选择播客列表</h3>
+          <div v-if="loading" class="loading">加载中...</div>
+          <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"
+            >
+              <div class="voice-header">
+                <img :src="item.coverUrl" class="voice-cover" alt="cover" />
+                <span class="voice-name">{{ item.voiceListName }}</span>
+              </div>
+              <div class="voice-tracks" v-if="item.voiceListData">
+                <div
+                  v-for="(item2, index2) in item.voiceListData"
+                  :key="index2"
+                  class="voice-track"
+                >
+                  {{ item2.voiceName }}
+                </div>
+              </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() {
-            const res = await axios({
-              url: `/voicelist/search?cookie=${localStorage.getItem('cookie')}`,
-            })
-
-            console.info(res.data.data)
-            this.voicelist = res.data.data.list
-            this.voicelist.map(async (i) => {
-              const res2 = await axios({
-                url: `/voicelist/list?voiceListId=${i.voiceListId}&limit=5`,
+            this.loading = true
+            try {
+              const res = await axios({
+                url: `/voicelist/search?cookie=${localStorage.getItem('cookie')}`,
               })
-              i.voiceListData = res2.data.data.list
-              console.info(res2)
-            })
+
+              console.info(res.data.data)
+              this.voicelist = res.data.data.list || []
+              this.voicelist.forEach(async (i) => {
+                try {
+                  const res2 = await axios({
+                    url: `/voicelist/list?voiceListId=${i.voiceListId}&limit=5`,
+                  })
+                  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) => {
-                console.info(err)
+              .catch((err) => {
+                console.error('上传失败:', err)
+                alert('上传失败，请重试')
               })
           },
         },
-      }).mount('#app')
+      }).mount('body')
     </script>
-
-    <style>
-      ul li {
-        cursor: pointer;
-      }
-
-      ul li.active {
-        color: red;
-      }
-    </style>
   </body>
 </html>
diff --git a/server.js b/server.js
index 3191db6..83133e9 100644
--- a/server.js
+++ b/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,
diff --git a/vercel.json b/vercel.json
index 2c3e9e2..b792814 100644
--- a/vercel.json
+++ b/vercel.json
@@ -19,7 +19,6 @@
   ],
   "env": {
     "NODE_ENV": "production",
-    "ENABLE_FLAC": "true",
-    "ENABLE_GENERAL_UNBLOCK": "false"
+    "ENABLE_FLAC": "true"
   }
 }