66 changed files with 9181 additions and 26315 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -10,7 +10,7 @@ steps:
      - ./scripts/build-wasm.sh

  - name: build
-    image: node:16.18-bullseye
+    image: node:18.12-bullseye
    commands:
      - apt-get update
      - apt-get install -y jq zip
@ -18,7 +18,8 @@ steps:
      - npm run test
      - ./scripts/build-and-package.sh legacy
      - ./scripts/build-and-package.sh extension
-      - ./scripts/build-and-package.sh modern
+      # FIXME: --modern is not a valid flag. Is this still required?
+      # - ./scripts/build-and-package.sh modern

  - name: upload artifact
    image: node:16.18-bullseye
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
--- a/.gitignore
+++ b/.gitignore
@ -32,3 +32,7 @@ yarn-error.log*
 *.zip
 *.tar.gz
 /sha256sum.txt
+
+# auto generated
+/auto-imports.d.ts
+/components.d.ts
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -3,10 +3,9 @@ cache:
  paths:
    - node_modules/

-stages:          
+stages:
  - build

-
 build-job:
  stage: build
  script: |
@ -37,7 +36,7 @@ build-job:
    sha256sum *.tar.gz *.zip > sha256sum.txt

  artifacts:
-    name: "$CI_JOB_NAME"
+    name: '$CI_JOB_NAME'
    paths:
      - legacy.zip
      - legacy.tar.gz
--- a/.gitlab/ISSUE_TEMPLATE/bug-report.md
+++ b/.gitlab/ISSUE_TEMPLATE/bug-report.md
@ -1,39 +1,34 @@
---
-name: Bug报告
-about: 报告Bug以帮助改进程序
-title: ''
-labels: bug
-assignees: ''
-
---
-
-* 请按照此模板填写，否则可能立即被关闭
-
- [x] 我确认已经搜索过Issue不存并确认相同的Issue
- [x] 我有证据表明这是程序导致的问题（如不确认，可以在[Discussions](https://github.com/ix64/unlock-music/discussions)内提出）
-
-
-**Bug描述**
-
-简要地复述你遇到的Bug
-
-**复现方法**
-
-描述复现方法，必要时请提供样本文件
-
-**程序截图或者Console报错信息**
-
-如果可以请提供二者之一
-
-
-**环境信息:**
-
- - 操作系统和浏览器：
- - 程序版本：
- - 获取音乐文件所使用的客户端及其版本信息：
-
-
-**附加信息**
-
-其他能够帮助确认问题的信息
-
+---
+name: Bug报告
+about: 报告Bug以帮助改进程序
+title: ''
+labels: bug
+assignees: ''
+---
+
+- 请按照此模板填写，否则可能立即被关闭
+
+* [x] 我确认已经搜索过 Issue 不存并确认相同的 Issue
+* [x] 我有证据表明这是程序导致的问题（如不确认，可以在[Discussions](https://github.com/ix64/unlock-music/discussions)内提出）
+
+**Bug 描述**
+
+简要地复述你遇到的 Bug
+
+**复现方法**
+
+描述复现方法，必要时请提供样本文件
+
+**程序截图或者 Console 报错信息**
+
+如果可以请提供二者之一
+
+**环境信息:**
+
+- 操作系统和浏览器：
+- 程序版本：
+- 获取音乐文件所使用的客户端及其版本信息：
+
+**附加信息**
+
+其他能够帮助确认问题的信息
--- a/.gitlab/ISSUE_TEMPLATE/new-feature.md
+++ b/.gitlab/ISSUE_TEMPLATE/new-feature.md
@ -1,26 +1,22 @@
---
-name: 新功能
-about: 对于程序新的想法或建议
-title: ''
-labels: enhancement
-assignees: ''
-
---
-
- 请按照此模板填写，否则可能立即被关闭
-
-**背景和说明**
-
-简要说明产生此想法的背景和此想法的具体内容
-
-
-**实现途径**
-
- 如果没有设计方案，请简要描述实现思路
- 如果你没有任何的实现思路，请通过[Discussions](https://github.com/ix64/unlock-music/discussions)或者Telegram进行讨论
-
-
-**附加信息**
-
-更多你想要表达的内容
-
+---
+name: 新功能
+about: 对于程序新的想法或建议
+title: ''
+labels: enhancement
+assignees: ''
+---
+
+- 请按照此模板填写，否则可能立即被关闭
+
+**背景和说明**
+
+简要说明产生此想法的背景和此想法的具体内容
+
+**实现途径**
+
+- 如果没有设计方案，请简要描述实现思路
+- 如果你没有任何的实现思路，请通过[Discussions](https://github.com/ix64/unlock-music/discussions)或者 Telegram 进行讨论
+
+**附加信息**
+
+更多你想要表达的内容
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-v16.18.1
+v18.12.1
--- a/.prettierignore
+++ b/.prettierignore
@ -0,0 +1,4 @@
+build/
+dist/
+src/QmcWasm/
+src/KgmWasm/
--- a/README.md
+++ b/README.md
@ -11,7 +11,7 @@
 [授权协议]: https://git.unlock-music.dev/um/web/src/branch/master/LICENSE
 [unlock-music/cli]: https://git.unlock-music.dev/um/cli
 [`@unlock_music_chat`]: https://t.me/unlock_music_chat
-[UM-Packages]: https://git.unlock-music.dev/um/-/packages/generic/web-build/
+[um-packages]: https://git.unlock-music.dev/um/-/packages/generic/web-build/

 ## 特性

@ -42,7 +42,7 @@

 ### 使用预构建版本

- 从 [Release] 或 [CI 构建][UM-Packages] 下载预构建的版本
+- 从 [Release] 或 [CI 构建][um-packages] 下载预构建的版本
  - :warning: 本地使用请下载`legacy版本`（`modern版本`只能通过 **http(s)协议** 访问）
 - 解压缩后即可部署或本地使用（**请勿直接运行源代码**）

@ -50,7 +50,7 @@

 ### 自行构建

-#### JS部分
+#### JS 部分

 - 环境要求
  - nodejs (v16.x)
@ -77,14 +77,15 @@
   npm run make-extension
   ```

-#### WASM部分
+#### WASM 部分

 - 环境要求
+
  - Linux
  - python3

- 运行此目录下的build-wasm
+- 运行此目录下的 build-wasm

-   ```sh
-   ./scripts/build-wasm.sh
-   ```
+  ```sh
+  ./scripts/build-wasm.sh
+  ```
--- a/babel.config.js
+++ b/babel.config.js
@ -1,12 +1,12 @@
 module.exports = {
-    presets: [
-        '@vue/app',
-        '@babel/preset-typescript'
+  presets: ['@vue/app', '@babel/preset-typescript'],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk',
+      },
    ],
-    plugins: [
-        ["component", {
-            "libraryName": "element-ui",
-            "styleLibraryName": "theme-chalk"
-        }]
-    ]
+  ],
 };
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/icons/android-chrome-192x192.png
+++ b/public/img/icons/android-chrome-192x192.png
--- a/public/img/icons/android-chrome-512x512.png
+++ b/public/img/icons/android-chrome-512x512.png
--- a/public/img/icons/apple-touch-icon-152x152.png
+++ b/public/img/icons/apple-touch-icon-152x152.png
--- a/public/img/icons/favicon-16x16.png
+++ b/public/img/icons/favicon-16x16.png
--- a/public/img/icons/favicon-32x32.png
+++ b/public/img/icons/favicon-32x32.png
--- a/public/img/icons/msapplication-icon-144x144.png
+++ b/public/img/icons/msapplication-icon-144x144.png
--- a/public/img/icons/safari-pinned-tab.svg
+++ b/public/img/icons/safari-pinned-tab.svg
--- a/index.html
+++ b/index.html
@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta content="webkit" name="renderer" />
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
+    <meta content="width=device-width,initial-scale=1.0" name="viewport" />
+    <title>音乐解锁</title>
+    <meta content="音乐,解锁,ncm,qmc,mgg,mflac,qq音乐,网易云音乐,加密" name="keywords" />
+    <meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description" />
+  </head>
+  <body>
+    <div id="loader-mask">
+      <div id="loader"></div>
+      <noscript>
+        <h3 id="loader-js">请启用JavaScript</h3>
+      </noscript>
+      <h3 id="loader-source">请勿直接运行源代码！</h3>
+      <div id="loader-tips-outdated" hidden>
+        <h2>您可能在使用不受支持的<span style="color: #f00">过时</span>浏览器，这可能导致此应用无法正常工作。</h2>
+        <h3>
+          如果您使用双核浏览器，您可以尝试切换到
+          <span style="color: #f00">“极速模式”</span> 解决此问题。
+        </h3>
+        <h3>或者，您可以尝试更换下方的几个浏览器之一。</h3>
+      </div>
+      <h3 id="loader-tips-timeout" hidden>
+        音乐解锁采用了一些新特性！建议使用
+        <a href="https://www.microsoft.com/zh-cn/edge" target="_blank">Microsoft Edge Chromium</a>
+        <a href="https://www.google.cn/chrome/" target="_blank">Google Chrome</a>
+        <a href="https://www.firefox.com.cn/" target="_blank">Mozilla Firefox</a>
+        |
+        <a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
+      </h3>
+    </div>
+    <div id="app"></div>
+    <script type="module" src="./src/loader.js"></script>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
--- a/jest.config.js
+++ b/jest.config.js
@ -1,7 +1,11 @@
-module.exports = {
-  testPathIgnorePatterns: ['/build/', '/dist/', '/node_modules/'],
-  setupFilesAfterEnv: ['./src/__test__/setup_jest.js'],
-  moduleNameMapper: {
-    '@/(.*)': '<rootDir>/src/$1',
-  },
-};
+module.exports = {
+  testPathIgnorePatterns: ['/build/', '/dist/', '/node_modules/'],
+  setupFilesAfterEnv: ['./src/__test__/setup_jest.js'],
+  moduleNameMapper: {
+    '@/(.*)': '<rootDir>/src/$1',
+  },
+  transform: {
+    '^.+\\.[jt]s$': 'babel-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
+  },
+};
--- a/make-extension.js
+++ b/make-extension.js
@ -1,25 +1,25 @@
-const fs = require('fs')
-const path = require('path')
-const src = __dirname + "/src/extension/"
-const dst = __dirname + "/dist"
-fs.readdirSync(src).forEach(file => {
-    let srcPath = path.join(src, file)
-    let dstPath = path.join(dst, file)
-    fs.copyFileSync(srcPath, dstPath)
-    console.log(`Copy: ${srcPath} => ${dstPath}`)
-})
-
-const manifestRaw = fs.readFileSync(__dirname + "/extension-manifest.json", "utf-8")
-const manifest = JSON.parse(manifestRaw)
-
-const pkgRaw = fs.readFileSync(__dirname + "/package.json", "utf-8")
-const pkg = JSON.parse(pkgRaw)
-
-verExt = pkg["version"]
-if (verExt.startsWith("v")) verExt = verExt.slice(1)
-if (verExt.includes("-")) verExt = verExt.split("-")[0]
-manifest["version"] = `${verExt}.${pkg["ext_build"]}`
-manifest["version_name"] = pkg["version"]
-
-fs.writeFileSync(__dirname + "/dist/manifest.json", JSON.stringify(manifest), "utf-8")
-console.log("Write: manifest.json")
+const fs = require('fs');
+const path = require('path');
+const src = __dirname + '/src/extension/';
+const dst = __dirname + '/dist';
+fs.readdirSync(src).forEach((file) => {
+  let srcPath = path.join(src, file);
+  let dstPath = path.join(dst, file);
+  fs.copyFileSync(srcPath, dstPath);
+  console.log(`Copy: ${srcPath} => ${dstPath}`);
+});
+
+const manifestRaw = fs.readFileSync(__dirname + '/extension-manifest.json', 'utf-8');
+const manifest = JSON.parse(manifestRaw);
+
+const pkgRaw = fs.readFileSync(__dirname + '/package.json', 'utf-8');
+const pkg = JSON.parse(pkgRaw);
+
+verExt = pkg['version'];
+if (verExt.startsWith('v')) verExt = verExt.slice(1);
+if (verExt.includes('-')) verExt = verExt.split('-')[0];
+manifest['version'] = `${verExt}.${pkg['ext_build']}`;
+manifest['version_name'] = pkg['version'];
+
+fs.writeFileSync(__dirname + '/dist/manifest.json', JSON.stringify(manifest), 'utf-8');
+console.log('Write: manifest.json');
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -12,8 +12,10 @@
  "private": true,
  "scripts": {
    "postinstall": "patch-package",
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "serve": "vite",
+    "start": "vite",
+    "build": "vite build",
+    "build:wasm": "bash ./scripts/build-wasm.sh",
    "test": "jest",
    "pretty": "prettier --write src/{**/*,*}.{js,ts,jsx,tsx,vue}",
    "pretty:check": "prettier --check src/{**/*,*}.{js,ts,jsx,tsx,vue}",
@ -21,39 +23,54 @@
  },
  "dependencies": {
    "@babel/preset-typescript": "^7.16.5",
+    "@element-plus/icons-vue": "^2.0.10",
+    "@element-plus/theme-chalk": "^2.2.16",
    "@jixun/kugou-crypto": "^1.0.3",
    "@unlock-music/joox-crypto": "^0.0.1-R5",
+    "autoprefixer": "^10.4.13",
    "base64-js": "^1.5.1",
    "browser-id3-writer": "^4.4.0",
-    "core-js": "^3.16.0",
    "crypto-js": "^4.1.1",
-    "element-ui": "^2.15.5",
+    "element-plus": "^2.2.25",
    "iconv-lite": "^0.6.3",
-    "jimp": "^0.16.1",
    "metaflac-js": "^1.0.5",
    "music-metadata": "7.9.0",
    "music-metadata-browser": "2.2.7",
+    "postcss": "^8.4.19",
    "register-service-worker": "^1.7.2",
    "threads": "^1.6.5",
-    "vue": "^2.6.14"
+    "tslib": "^2.4.1",
+    "vue": "^3.2.45"
  },
  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
+    "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@rollup/plugin-replace": "^5.0.1",
    "@types/crypto-js": "^4.0.2",
-    "@types/jest": "^27.0.3",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-pwa": "^4.5.13",
-    "@vue/cli-plugin-typescript": "^4.5.13",
-    "@vue/cli-service": "^4.5.13",
+    "@types/jest": "^29.2.4",
+    "@vitejs/plugin-vue": "^3.2.0",
+    "@vue/babel-preset-app": "^5.0.8",
+    "@vue/vue3-jest": "^29.2.1",
+    "babel-jest": "^29.3.1",
    "babel-plugin-component": "^1.1.1",
-    "jest": "^27.4.5",
+    "buffer": "^6.0.3",
+    "jest": "^29.3.1",
    "patch-package": "^6.4.7",
-    "prettier": "2.5.1",
-    "sass": "^1.38.1",
-    "sass-loader": "^10.2.0",
+    "prettier": "^2.5.1",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "sass": "^1.56.1",
    "semver": "^7.3.5",
+    "stream-browserify": "^3.0.0",
    "threads-plugin": "^1.4.0",
    "typescript": "^4.5.4",
-    "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.6.14"
+    "unplugin-auto-import": "^0.12.0",
+    "unplugin-icons": "^0.14.14",
+    "unplugin-vue-components": "^0.22.11",
+    "util": "^0.12.5",
+    "vite": "^3.2.4",
+    "vite-plugin-commonjs": "^0.5.3",
+    "vite-plugin-pwa": "^0.13.3",
+    "vite-plugin-static-copy": "^0.12.0"
  }
-}
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -1,5 +1,5 @@
 module.exports = {
  plugins: {
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+  },
+};
--- a/public/index.html
+++ b/public/index.html
@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="utf-8">
-    <meta content="webkit" name="renderer">
-    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta content="width=device-width,initial-scale=1.0" name="viewport">
-    <title>音乐解锁</title>
-    <meta content="音乐,解锁,ncm,qmc,mgg,mflac,qq音乐,网易云音乐,加密" name="keywords"/>
-    <meta content="音乐解锁 - 在任何设备上解锁已购的加密音乐！" name="description"/>
-    <!--@formatter:off-->
-    <style>#loader{position:absolute;left:50%;top:50%;z-index:1010;margin:-75px 0 0 -75px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #1db1ff;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#loader-mask{text-align:center;position:absolute;width:100%;height:100%;bottom:0;left:0;right:0;top:0;z-index:1009;background-color:rgba(242,246,252,.88)}@media (prefers-color-scheme:dark){#loader-mask{color:#fff;background-color:rgba(0,0,0,.85)}#loader-mask a{color:#ddd}#loader-mask a:hover{color:#1db1ff}}#loader-source{font-size:1.5rem}#loader-tips-timeout{font-size:1.2rem}</style>
-    <!--@formatter:on-->
-</head>
-<body>
-
-<div id="loader-mask">
-    <div id="loader"></div>
-    <noscript>
-        <h3 id="loader-js">请启用JavaScript</h3>
-    </noscript>
-    <h3 id="loader-source"> 请勿直接运行源代码！ </h3>
-    <div id="loader-tips-outdated" hidden>
-        <h2>您可能在使用不受支持的<span style="color:#f00;">过时</span>浏览器，这可能导致此应用无法正常工作。</h2>
-        <h3>如果您使用双核浏览器，您可以尝试切换到 <span style="color:#f00;">“极速模式”</span> 解决此问题。</h3>
-        <h3>或者，您可以尝试更换下方的几个浏览器之一。</h3>
-    </div>
-    <h3 id="loader-tips-timeout" hidden>
-        音乐解锁采用了一些新特性！建议使用
-        <a href="https://www.microsoft.com/zh-cn/edge" target="_blank">Microsoft Edge Chromium</a>
-        <a href="https://www.google.cn/chrome/" target="_blank">Google Chrome</a>
-        <a href="https://www.firefox.com.cn/" target="_blank">Mozilla Firefox</a>
-        | <a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
-    </h3>
-</div>
-<div id="app"></div>
-<script src="./loader.js"></script>
-</body>
-</html>
--- a/public/loader.js
+++ b/public/loader.js
@ -1,25 +0,0 @@
-(function () {
-    setTimeout(function () {
-        var ele = document.getElementById("loader-tips-timeout");
-        if (ele != null) {
-            ele.hidden = false;
-        }
-    }, 2000);
-
-    var ua = navigator && navigator.userAgent;
-    var detected = (function () {
-        var m;
-        if (!ua) return true;
-        if (/MSIE |Trident\//.exec(ua)) return true; // no IE
-        m = /Edge\/([\d.]+)/.exec(ua); // Edge >= 17
-        if (m && Number(m[1]) < 17) return true;
-        m = /Chrome\/([\d.]+)/.exec(ua); // Chrome >= 58
-        if (m && Number(m[1]) < 58) return true;
-        m = /Firefox\/([\d.]+)/.exec(ua); // Firefox >= 45
-        return m && Number(m[1]) < 45;
-    })();
-    if (detected) {
-        document.getElementById('loader-tips-outdated').hidden = false;
-        document.getElementById("loader-tips-timeout").hidden = false;
-    }
-})();
--- a/src/App.vue
+++ b/src/App.vue
@ -4,34 +4,38 @@
      <Home />
    </el-main>
    <el-footer id="app-footer">
-      <el-row>
-        <a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>({{ version }})
-        ：移除已购音乐的加密保护。
+      <p>
+        <a href="https://github.com/ix64/unlock-music" target="_blank">音乐解锁</a>({{
+          version
+        }})：移除已购音乐的加密保护。
        <a href="https://github.com/ix64/unlock-music/wiki/使用提示" target="_blank">使用提示</a>
-      </el-row>
-      <el-row>
+      </p>
+      <p>
        目前支持 网易云音乐(ncm), QQ音乐(qmc, mflac, mgg), 酷狗音乐(kgm), 虾米音乐(xm), 酷我音乐(.kwm)
        <a href="https://github.com/ix64/unlock-music/blob/master/README.md" target="_blank">更多</a>。
-      </el-row>
-      <el-row>
+      </p>
+      <p>
        <!--如果进行二次开发，此行版权信息不得移除且应明显地标注于页面上-->
        <span>Copyright &copy; 2019 - {{ new Date().getFullYear() }} MengYX</span>
        音乐解锁使用
        <a href="https://github.com/ix64/unlock-music/blob/master/LICENSE" target="_blank">MIT许可协议</a>
        开放源代码
-      </el-row>
+      </p>
    </el-footer>
  </el-container>
 </template>

 <script>
+import './scss/unlock-music.scss';
+import { ElNotification } from 'element-plus';
+import { defineComponent } from 'vue';
 import FileSelector from '@/component/FileSelector';
 import PreviewTable from '@/component/PreviewTable';
 import config from '@/../package.json';
 import Home from '@/view/Home';
 import { checkUpdate } from '@/utils/api';

-export default {
+export default defineComponent({
  name: 'app',
  components: {
    FileSelector,
@ -49,7 +53,7 @@ export default {
  methods: {
    async finishLoad() {
      const mask = document.getElementById('loader-mask');
-      if (!!mask) mask.remove();
+      if (mask) mask.remove();
      let updateInfo;
      try {
        updateInfo = await checkUpdate(this.version);
@ -69,7 +73,8 @@ export default {
          position: 'top-left',
        });
      } else {
-        this.$notify.info({
+        ElNotification({
+          type: 'info',
          title: '离线使用',
          message: `<div>
                        <p>我们使用 PWA 技术，无网络也能使用</p>
@ -86,9 +91,5 @@ export default {
      }
    },
  },
-};
+});
 </script>
-
-<style lang="scss">
-@import 'scss/unlock-music';
-</style>
--- a/src/KgmWasm/KgmWasmBundle.d.ts
+++ b/src/KgmWasm/KgmWasmBundle.d.ts
@ -0,0 +1,5 @@
+interface KgmWasmBundle {
+  (): Promise<any>;
+}
+
+export = KgmWasmBundle;
--- a/src/QmcWasm/QmcWasmBundle.d.ts
+++ b/src/QmcWasm/QmcWasmBundle.d.ts
@ -0,0 +1,5 @@
+interface QmcWasmBundle {
+  (): Promise<any>;
+}
+
+export = QmcWasmBundle;
--- a/src/test/setup_jest.js
+++ b/src/test/setup_jest.js
@ -1,2 +1,2 @@
 // Polyfill for node.
-global.Blob = global.Blob || require("node:buffer").Blob;
+global.Blob = global.Blob || require('node:buffer').Blob;
--- a/src/component/ConfigDialog.vue
+++ b/src/component/ConfigDialog.vue
@ -26,7 +26,7 @@ form >>> input {
 </style>

 <template>
-  <el-dialog @close="cancel()" title="解密设定" :visible="show" custom-class="um-config-dialog" center>
+  <el-dialog @close="cancel()" title="解密设定" v-model="internalShow" class="um-config-dialog" center>
    <el-form ref="form" :rules="rules" status-icon :model="form" label-width="0">
      <section>
        <label>
@ -49,9 +49,11 @@ form >>> input {
        </p>
      </section>
    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" :loading="saving" @click="emitConfirm()">确 定</el-button>
-    </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" :loading="saving" @click="emitConfirm()"> 确 定 </el-button>
+      </span>
+    </template>
  </el-dialog>
 </template>

@ -86,9 +88,15 @@ export default {
      form: {
        jooxUUID: '',
      },
+      internalShow: false,
      centerDialogVisible: false,
    };
  },
+  watch: {
+    show(newValue, oldValue) {
+      this.internalShow = newValue;
+    },
+  },
  async mounted() {
    await this.resetForm();
  },
--- a/src/component/EditDialog.vue
+++ b/src/component/EditDialog.vue
@ -26,58 +26,67 @@ form >>> input {
 </style>

 <template>
-  <el-dialog @close="cancel()" title="音乐标签编辑" :visible="show" custom-class="um-edit-dialog" center>
+  <el-dialog @close="cancel()" title="音乐标签编辑" v-model="internalShow" class="um-edit-dialog" center>
    <el-form ref="form" status-icon :model="form" label-width="0">
      <section>
        <el-image v-show="!editPicture" :src="imgFile.url || picture" style="width: 100px; height: 100px">
-          <div slot="error" class="image-slot el-image__error">暂无封面</div>
+          <template #error class="image-slot el-image__error"> 暂无封面 </template>
        </el-image>
-        <el-upload v-show="editPicture" :auto-upload="false" :on-change="addFile" :on-remove="rmvFile" :show-file-list="true" :limit="1" list-type="picture" action="" drag>
-          <i class="el-icon-upload" />
+        <el-upload
+          v-show="editPicture"
+          :auto-upload="false"
+          :on-change="addFile"
+          :on-remove="rmvFile"
+          :show-file-list="true"
+          :limit="1"
+          list-type="picture"
+          action=""
+          drag
+        >
+          <el-icon><UploadFilled /></el-icon>
          <div class="el-upload__text">将新图片拖到此处，或<em>点击选择</em><br />以替换自动匹配的图片</div>
-          <div slot="tip" class="el-upload__tip">
-            新拖到此处的图片将覆盖原始图片
-          </div>
-        </el-upload> 
+          <template #tip class="el-upload__tip"> 新拖到此处的图片将覆盖原始图片 </template>
+        </el-upload>
+
        <i
-          :class="{'el-icon-edit': !editPicture, 'el-icon-check': editPicture}"
+          :class="{
+            'el-icon-edit': !editPicture,
+            'el-icon-check': editPicture,
+          }"
          @click="changeCover"
-        ></i><br />
-        标题: 
-        <span v-show="!editTitle">{{title}}</span>
-        <el-input v-show="editTitle" v-model="title"></el-input>
+        ></i>
+        <br />
+        标题:
+        <span v-show="!editTitle">{{ title }}</span>
+        <!-- <el-input v-show="editTitle" v-model="title"></el-input> -->
+        <i :class="{ 'el-icon-edit': !editTitle, 'el-icon-check': editTitle }" @click="editTitle = !editTitle"></i
+        ><br />
+        艺术家:
+        <span v-show="!editArtist">{{ artist }}</span>
+        <!-- <el-input v-show="editArtist" v-model="artist"></el-input> -->
+        <i :class="{ 'el-icon-edit': !editArtist, 'el-icon-check': editArtist }" @click="editArtist = !editArtist"></i
+        ><br />
+        专辑:
+        <span v-show="!editAlbum">{{ album }}</span>
+        <!-- <el-input v-show="editAlbum" v-model="album"></el-input> -->
+        <i :class="{ 'el-icon-edit': !editAlbum, 'el-icon-check': editAlbum }" @click="editAlbum = !editAlbum"></i
+        ><br />
+        专辑艺术家:
+        <span v-show="!editAlbumartist">{{ albumartist }}</span>
+        <!-- <el-input v-show="editAlbumartist" v-model="albumartist"></el-input> -->
        <i
-          :class="{'el-icon-edit': !editTitle, 'el-icon-check': editTitle}"
-          @click="editTitle = !editTitle"
-        ></i><br />
-        艺术家: 
-        <span v-show="!editArtist">{{artist}}</span>
-        <el-input v-show="editArtist" v-model="artist"></el-input>
-        <i
-          :class="{'el-icon-edit': !editArtist, 'el-icon-check': editArtist}"
-          @click="editArtist = !editArtist"
-        ></i><br />
-        专辑: 
-        <span v-show="!editAlbum">{{album}}</span>
-        <el-input v-show="editAlbum" v-model="album"></el-input>
-        <i
-          :class="{'el-icon-edit': !editAlbum, 'el-icon-check': editAlbum}"
-          @click="editAlbum = !editAlbum"
-        ></i><br />
-        专辑艺术家: 
-        <span v-show="!editAlbumartist">{{albumartist}}</span>
-        <el-input v-show="editAlbumartist" v-model="albumartist"></el-input>
-        <i
-          :class="{'el-icon-edit': !editAlbumartist, 'el-icon-check': editAlbumartist}"
+          :class="{
+            'el-icon-edit': !editAlbumartist,
+            'el-icon-check': editAlbumartist,
+          }"
          @click="editAlbumartist = !editAlbumartist"
-        ></i><br />
-        风格: 
-        <span v-show="!editGenre">{{genre}}</span>
-        <el-input v-show="editGenre" v-model="genre"></el-input>
-        <i
-          :class="{'el-icon-edit': !editGenre, 'el-icon-check': editGenre}"
-          @click="editGenre = !editGenre"
-        ></i><br />
+        ></i
+        ><br />
+        风格:
+        <span v-show="!editGenre">{{ genre }}</span>
+        <!-- <el-input v-show="editGenre" v-model="genre"></el-input> -->
+        <i :class="{ 'el-icon-edit': !editGenre, 'el-icon-check': editGenre }" @click="editGenre = !editGenre"></i
+        ><br />

        <p class="item-desc">
          为了节省您设备的资源，请在确定前充分检查，避免反复修改。<br />
@ -85,9 +94,11 @@ form >>> input {
        </p>
      </section>
    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="emitConfirm()">确 定</el-button>
-    </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="emitConfirm()">确 定</el-button>
+      </span>
+    </template>
  </el-dialog>
 </template>

@ -100,17 +111,17 @@ export default {
  },
  props: {
    show: { type: Boolean, required: true },
-    picture: { type: String | undefined, required: true },
-    title: { type: String | undefined, required: true },
-    artist: { type: String | undefined, required: true },
-    album: { type: String | undefined, required: true },
-    albumartist: { type: String | undefined, required: true },
-    genre: { type: String | undefined, required: true },
+    picture: { type: String, required: true },
+    title: { type: String, required: true },
+    artist: { type: String, required: true },
+    album: { type: String, required: true },
+    albumartist: { type: String, required: true },
+    genre: { type: String, required: true },
  },
  data() {
    return {
-      form: {
-      },
+      internalShow: false,
+      form: {},
      imgFile: { tmpblob: undefined, blob: undefined, url: undefined },
      editPicture: false,
      editTitle: false,
@ -120,6 +131,11 @@ export default {
      editGenre: false,
    };
  },
+  watch: {
+    show(newValue, oldValue) {
+      this.internalShow = newValue;
+    },
+  },
  async mounted() {
    this.refreshForm();
  },
--- a/src/component/FileSelector.vue
+++ b/src/component/FileSelector.vue
@ -1,40 +1,53 @@
 <template>
-  <el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple>
-    <i class="el-icon-upload" />
-    <div class="el-upload__text">将文件拖到此处，或 <em>点击选择</em></div>
-    <div slot="tip" class="el-upload__tip">
-      <div>
-        仅在浏览器内对文件进行解锁，无需消耗流量
-        <el-tooltip effect="dark" placement="top-start">
-          <div slot="content">算法在源代码中已经提供，所有运算都发生在本地</div>
-          <i class="el-icon-info" style="font-size: 12px" />
-        </el-tooltip>
-      </div>
-      <div>
-        工作模式: {{ parallel ? '多线程 Worker' : '单线程 Queue' }}
-        <el-tooltip effect="dark" placement="top-start">
-          <div slot="content">
-            将此工具部署在HTTPS环境下，可以启用Web Worker特性，<br />
-            从而更快的利用并行处理完成解锁
-          </div>
-          <i class="el-icon-info" style="font-size: 12px" />
-        </el-tooltip>
-      </div>
-    </div>
-    <transition name="el-fade-in"
-      ><!--todo: add delay to animation-->
-      <el-progress
-        v-show="progress_show"
-        :format="progress_string"
-        :percentage="progress_value"
-        :stroke-width="16"
-        :text-inside="true"
-        style="margin: 16px 6px 0 6px"
-      ></el-progress>
-    </transition>
-  </el-upload>
+  <div class="decrypt-file-selector">
+    <el-upload :auto-upload="false" :on-change="addFile" :show-file-list="false" action="" drag multiple>
+      <el-icon size="80"><UploadFilled /></el-icon>
+      <div>将文件拖到此处，或 <em>点击选择</em></div>
+      <template #tip> </template>
+      <transition name="el-fade-in">
+        <!--todo: add delay to animation-->
+        <el-progress
+          v-show="progress_show"
+          :format="progress_string"
+          :percentage="progress_value"
+          :stroke-width="16"
+          :text-inside="true"
+          style="margin: 16px 6px 0 6px"
+        ></el-progress>
+      </transition>
+    </el-upload>
+  </div>
+  <div>
+    仅在浏览器内对文件进行解锁，无需消耗流量
+    <el-tooltip effect="dark" placement="top-start">
+      <template #content> 算法在源代码中已经提供，所有运算都发生在本地 </template>
+      <el-icon size="12">
+        <InfoFilled />
+      </el-icon>
+    </el-tooltip>
+  </div>
+  <div>
+    工作模式: {{ parallel ? '多线程任务' : '单线程队列' }}
+    <el-tooltip effect="dark" placement="top-start">
+      <template #content>
+        将此工具部署在 HTTPS 环境下，可以利用 Web Worker 的多线程特性，<br />
+        从而更快的利用并行处理完成解锁
+      </template>
+      <el-icon size="12">
+        <InfoFilled />
+      </el-icon>
+    </el-tooltip>
+  </div>
 </template>

+<style>
+.decrypt-file-selector {
+  max-width: 360px;
+  margin: 0 auto;
+  padding-bottom: 1em;
+}
+</style>
+
 <script>
 import { spawn, Worker, Pool } from 'threads';
 import { Decrypt } from '@/decrypt';
--- a/src/component/PreviewTable.vue
+++ b/src/component/PreviewTable.vue
@ -1,9 +1,9 @@
 <template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="封面">
-      <template slot-scope="scope">
+      <template #default="scope">
        <el-image :src="scope.row.picture" style="width: 100px; height: 100px">
-          <div slot="error" class="image-slot el-image__error">暂无封面</div>
+          <template #error class="image-slot el-image__error"> 暂无封面 </template>
        </el-image>
      </template>
    </el-table-column>
@ -24,11 +24,23 @@
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
-        <el-button circle icon="el-icon-video-play" type="success" @click="handlePlay(scope.$index, scope.row)">
+        <el-button circle type="success" @click="handlePlay(scope.$index, scope.row)">
+          <el-icon size="20" style="vertical-align: middle">
+            <VideoPlay />
+          </el-icon>
        </el-button>
-        <el-button circle icon="el-icon-download" @click="handleDownload(scope.row)"></el-button>
-        <el-button circle icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
-        <el-button circle icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index, scope.row)">
+        <el-button circle @click="handleDownload(scope.row)">
+          <el-icon size="20" style="vertical-align: middle">
+            <Download />
+          </el-icon>
+        </el-button>
+        <el-button circle @click="handleEdit(scope.row)">
+          <el-icon size="20" style="vertical-align: middle"><Edit /></el-icon>
+        </el-button>
+        <el-button circle type="danger" @click="handleDelete(scope.$index, scope.row)">
+          <el-icon size="20" style="vertical-align: middle">
+            <Delete />
+          </el-icon>
        </el-button>
      </template>
    </el-table-column>
--- a/src/decrypt/index.ts
+++ b/src/decrypt/index.ts
@ -71,7 +71,6 @@ export async function Decrypt(file: FileInfo, config: Record<string, any>): Prom
    case 'mggl': //QQ Music Mac
    case 'mflac': //QQ Music New Flac
    case 'mflac0': //QQ Music New Flac
-    case 'mflach': //QQ Music New Flac
    case 'mgg': //QQ Music New Ogg
    case 'mgg1': //QQ Music New Ogg
    case 'mgg0':
@ -102,8 +101,8 @@ export async function Decrypt(file: FileInfo, config: Record<string, any>): Prom
    case 'x3m':
      rt_data = await XimalayaDecrypt(file.raw, raw.name, raw.ext);
      break;
-    case 'mflach': //QQ Music New Flac
-      throw '网页版无法解锁，请使用<a target="_blank" href="https://git.unlock-music.dev/um/cli">CLI版本</a>'
+    case 'mflach': //QQ Music (Mac)
+      throw '网页版无法解锁，请使用<a target="_blank" href="https://git.unlock-music.dev/um/cli">CLI版本</a>';
    default:
      throw '不支持此文件格式';
  }
--- a/src/decrypt/kgm.ts
+++ b/src/decrypt/kgm.ts
@ -63,7 +63,11 @@ export async function Decrypt(file: File, raw_filename: string, raw_ext: string)
  const mime = AudioMimeType[ext];
  let musicBlob = new Blob([musicDecoded], { type: mime });
  const musicMeta = await metaParseBlob(musicBlob);
-  const { title, artist } = GetMetaFromFile(raw_filename, musicMeta.common.title, String(musicMeta.common.artists || musicMeta.common.artist || ""));
+  const { title, artist } = GetMetaFromFile(
+    raw_filename,
+    musicMeta.common.title,
+    String(musicMeta.common.artists || musicMeta.common.artist || ''),
+  );
  return {
    album: musicMeta.common.album,
    picture: GetCoverFromFile(musicMeta),
--- a/src/decrypt/kgm_wasm.ts
+++ b/src/decrypt/kgm_wasm.ts
@ -1,8 +1,8 @@
-import KgmCryptoModule from '@/KgmWasm/KgmWasmBundle';
+import * as KgmCryptoModule from '@/KgmWasm/KgmWasmBundle';
 import { MergeUint8Array } from '@/utils/MergeUint8Array';

 // 每次处理 2M 的数据
-const DECRYPTION_BUF_SIZE = 2 *1024 * 1024;
+const DECRYPTION_BUF_SIZE = 2 * 1024 * 1024;

 export interface KGMDecryptionResult {
  success: boolean;
@ -17,7 +17,11 @@ export interface KGMDecryptionResult {
 * @param  {ArrayBuffer} kgmBlob 读入的文件 Blob
 */
 export async function DecryptKgmWasm(kgmBlob: ArrayBuffer, ext: string): Promise<KGMDecryptionResult> {
-  const result: KGMDecryptionResult = { success: false, data: new Uint8Array(), error: '' };
+  const result: KGMDecryptionResult = {
+    success: false,
+    data: new Uint8Array(),
+    error: '',
+  };

  // 初始化模组
  let KgmCrypto: any;
--- a/src/decrypt/kwm.ts
+++ b/src/decrypt/kwm.ts
@ -42,7 +42,11 @@ export async function Decrypt(file: File, raw_filename: string, _: string): Prom
  let musicBlob = new Blob([audioData], { type: mime });

  const musicMeta = await metaParseBlob(musicBlob);
-  const { title, artist } = GetMetaFromFile(raw_filename, musicMeta.common.title, String(musicMeta.common.artists || musicMeta.common.artist || ""));
+  const { title, artist } = GetMetaFromFile(
+    raw_filename,
+    musicMeta.common.title,
+    String(musicMeta.common.artists || musicMeta.common.artist || ''),
+  );
  return {
    album: musicMeta.common.album,
    picture: GetCoverFromFile(musicMeta),
--- a/src/decrypt/mg3d.ts
+++ b/src/decrypt/mg3d.ts
@ -5,24 +5,24 @@ import { DecryptResult } from '@/decrypt/entity';
 const segmentSize = 0x20;

 function isPrintableAsciiChar(ch: number) {
-    return ch >= 0x20 && ch <= 0x7E;
+  return ch >= 0x20 && ch <= 0x7e;
 }

 function isUpperHexChar(ch: number) {
-    return (ch >= 0x30 && ch <= 0x39) || (ch >= 0x41 && ch <= 0x46);
+  return (ch >= 0x30 && ch <= 0x39) || (ch >= 0x41 && ch <= 0x46);
 }

 /**
- * @param {Buffer} data 
- * @param {Buffer} key 
- * @param {boolean} copy 
+ * @param {Buffer} data
+ * @param {Buffer} key
+ * @param {boolean} copy
 * @returns Buffer
 */
 function decryptSegment(data: Uint8Array, key: Uint8Array) {
-    for (let i = 0; i < data.byteLength; i++) {
-      data[i] -= key[i % segmentSize];
-    }
-    return Buffer.from(data);
+  for (let i = 0; i < data.byteLength; i++) {
+    data[i] -= key[i % segmentSize];
+  }
+  return Buffer.from(data);
 }

 export async function Decrypt(file: File, raw_filename: string): Promise<DecryptResult> {
@ -33,37 +33,37 @@ export async function Decrypt(file: File, raw_filename: string): Promise<Decrypt
  const bytesRIFF = Buffer.from('RIFF', 'ascii');
  const bytesWaveFormat = Buffer.from('WAVEfmt ', 'ascii');
  const possibleKeys = [];
-  
+
  for (let i = segmentSize; i < segmentSize * 20; i += segmentSize) {
-      const possibleKey = buf.slice(i, i + segmentSize);
-      if (!possibleKey.every(isUpperHexChar)) continue;
-  
-      const tempHeader = decryptSegment(header, possibleKey);
-      if (tempHeader.slice(0, 4).compare(bytesRIFF)) continue;
-      if (tempHeader.slice(8, 16).compare(bytesWaveFormat)) continue;
-      
-      // fmt chunk 大小可以是 16 / 18 / 40。
-      const fmtChunkSize = tempHeader.readUInt32LE(0x10);
-      if (![16, 18, 40].includes(fmtChunkSize)) continue;
-  
-      // 下一个 chunk
-      const firstDataChunkOffset = 0x14 + fmtChunkSize;
-      const chunkName = tempHeader.slice(firstDataChunkOffset, firstDataChunkOffset + 4);
-      if (!chunkName.every(isPrintableAsciiChar)) continue;
-  
-      const secondDataChunkOffset = firstDataChunkOffset + 8 + tempHeader.readUInt32LE(firstDataChunkOffset + 4);
-      if (secondDataChunkOffset <= header.byteLength) {
-          const secondChunkName = tempHeader.slice(secondDataChunkOffset, secondDataChunkOffset + 4);
-          if (!secondChunkName.every(isPrintableAsciiChar)) continue;
-      }
-  
-      possibleKeys.push(Buffer.from(possibleKey).toString('ascii'));
+    const possibleKey = buf.slice(i, i + segmentSize);
+    if (!possibleKey.every(isUpperHexChar)) continue;
+
+    const tempHeader = decryptSegment(header, possibleKey);
+    if (tempHeader.slice(0, 4).compare(bytesRIFF)) continue;
+    if (tempHeader.slice(8, 16).compare(bytesWaveFormat)) continue;
+
+    // fmt chunk 大小可以是 16 / 18 / 40。
+    const fmtChunkSize = tempHeader.readUInt32LE(0x10);
+    if (![16, 18, 40].includes(fmtChunkSize)) continue;
+
+    // 下一个 chunk
+    const firstDataChunkOffset = 0x14 + fmtChunkSize;
+    const chunkName = tempHeader.slice(firstDataChunkOffset, firstDataChunkOffset + 4);
+    if (!chunkName.every(isPrintableAsciiChar)) continue;
+
+    const secondDataChunkOffset = firstDataChunkOffset + 8 + tempHeader.readUInt32LE(firstDataChunkOffset + 4);
+    if (secondDataChunkOffset <= header.byteLength) {
+      const secondChunkName = tempHeader.slice(secondDataChunkOffset, secondDataChunkOffset + 4);
+      if (!secondChunkName.every(isPrintableAsciiChar)) continue;
+    }
+
+    possibleKeys.push(Buffer.from(possibleKey).toString('ascii'));
  }
-  
+
  if (possibleKeys.length <= 0) {
    throw new Error(`ERROR: no suitable key discovered`);
  }
-  
+
  const decryptionKey = Buffer.from(possibleKeys[0], 'ascii');
  decryptSegment(buf, decryptionKey);
  const musicData = new Blob([buf], { type: 'audio/x-wav' });
--- a/src/decrypt/ncm.ts
+++ b/src/decrypt/ncm.ts
@ -10,7 +10,7 @@ import {
  WriteMetaToMp3,
 } from '@/decrypt/utils';
 import { parseBlob as metaParseBlob } from 'music-metadata-browser';
-import jimp from 'jimp';
+// import jimp from 'jimp';

 import AES from 'crypto-js/aes';
 import PKCS7 from 'crypto-js/pad-pkcs7';
@ -175,15 +175,20 @@ class NcmDecrypt {
      try {
        this.image = await GetImageFromURL(this.oriMeta.albumPic);
        while (this.image && this.image.buffer.byteLength >= 1 << 24) {
-          let img = await jimp.read(Buffer.from(this.image.buffer));
-          await img.resize(Math.round(img.getHeight() / 2), jimp.AUTO);
-          this.image.buffer = await img.getBufferAsync('image/jpeg');
+          // let img = await jimp.read(Buffer.from(this.image.buffer));
+          // await img.resize(Math.round(img.getHeight() / 2), jimp.AUTO);
+          // this.image.buffer = await img.getBufferAsync('image/jpeg');
        }
      } catch (e) {
        console.log('get cover image failed', e);
      }

-    this.newMeta = { title: info.title, artists, album: this.oriMeta.album, picture: this.image?.buffer };
+    this.newMeta = {
+      title: info.title,
+      artists,
+      album: this.oriMeta.album,
+      picture: this.image?.buffer,
+    };
  }

  async _writeMeta() {
--- a/src/decrypt/ncmcache.ts
+++ b/src/decrypt/ncmcache.ts
@ -13,7 +13,11 @@ export async function Decrypt(file: Blob, raw_filename: string, raw_ext: string)
  const ext = SniffAudioExt(buffer, raw_ext);
  if (ext !== raw_ext) file = new Blob([buffer], { type: AudioMimeType[ext] });
  const tag = await metaParseBlob(file);
-  const { title, artist } = GetMetaFromFile(raw_filename, tag.common.title, String(tag.common.artists || tag.common.artist || ""));
+  const { title, artist } = GetMetaFromFile(
+    raw_filename,
+    tag.common.title,
+    String(tag.common.artists || tag.common.artist || ''),
+  );

  return {
    title,
--- a/src/decrypt/qmc_key.ts
+++ b/src/decrypt/qmc_key.ts
@ -34,11 +34,14 @@ export function simpleMakeKey(salt: number, length: number): number[] {
  return keyBuf;
 }

-const mixKey1: Uint8Array = new Uint8Array([ 0x33, 0x38, 0x36, 0x5A, 0x4A, 0x59, 0x21, 0x40, 0x23, 0x2A, 0x24, 0x25, 0x5E, 0x26, 0x29, 0x28 ])
-const mixKey2: Uint8Array = new Uint8Array([ 0x2A, 0x2A, 0x23, 0x21, 0x28, 0x23, 0x24, 0x25, 0x26, 0x5E, 0x61, 0x31, 0x63, 0x5A, 0x2C, 0x54 ])
+const mixKey1: Uint8Array = new Uint8Array([
+  0x33, 0x38, 0x36, 0x5a, 0x4a, 0x59, 0x21, 0x40, 0x23, 0x2a, 0x24, 0x25, 0x5e, 0x26, 0x29, 0x28,
+]);
+const mixKey2: Uint8Array = new Uint8Array([
+  0x2a, 0x2a, 0x23, 0x21, 0x28, 0x23, 0x24, 0x25, 0x26, 0x5e, 0x61, 0x31, 0x63, 0x5a, 0x2c, 0x54,
+]);

-function decryptV2Key(key: Buffer): Buffer
-{
+function decryptV2Key(key: Buffer): Buffer {
  const textEnc = new TextDecoder();
  if (key.length < 18 || textEnc.decode(key.slice(0, 18)) !== 'QQMusic EncV2,Key:') {
    return key;
--- a/src/decrypt/qmc_wasm.ts
+++ b/src/decrypt/qmc_wasm.ts
@ -1,8 +1,8 @@
-import QmcCryptoModule from '@/QmcWasm/QmcWasmBundle';
 import { MergeUint8Array } from '@/utils/MergeUint8Array';
+import * as QmcCryptoModule from '@/QmcWasm/QmcWasmBundle';

 // 每次处理 2M 的数据
-const DECRYPTION_BUF_SIZE = 2 *1024 * 1024;
+const DECRYPTION_BUF_SIZE = 2 * 1024 * 1024;

 export interface QMCDecryptionResult {
  success: boolean;
@ -18,7 +18,12 @@ export interface QMCDecryptionResult {
 * @param  {ArrayBuffer} qmcBlob 读入的文件 Blob
 */
 export async function DecryptQmcWasm(qmcBlob: ArrayBuffer, ext: string): Promise<QMCDecryptionResult> {
-  const result: QMCDecryptionResult = { success: false, data: new Uint8Array(), songId: 0, error: '' };
+  const result: QMCDecryptionResult = {
+    success: false,
+    data: new Uint8Array(),
+    songId: 0,
+    error: '',
+  };

  // 初始化模组
  let QmcCrypto: any;
@ -47,7 +52,7 @@ export async function DecryptQmcWasm(qmcBlob: ArrayBuffer, ext: string): Promise
    return result;
  } else {
    result.songId = QmcCrypto.getSongId();
-    result.songId = result.songId == "0" ? 0 : result.songId;
+    result.songId = result.songId == '0' ? 0 : result.songId;
  }

  const decryptedParts = [];
--- a/src/decrypt/qmccache.ts
+++ b/src/decrypt/qmccache.ts
@ -52,7 +52,11 @@ export async function Decrypt(file: Blob, raw_filename: string, raw_ext: string)
    throw '不支持的QQ音乐缓存格式';
  }
  const tag = await metaParseBlob(audioBlob);
-  const { title, artist } = GetMetaFromFile(raw_filename, tag.common.title, String(tag.common.artists || tag.common.artist || ""));
+  const { title, artist } = GetMetaFromFile(
+    raw_filename,
+    tag.common.title,
+    String(tag.common.artists || tag.common.artist || ''),
+  );

  return {
    title,
--- a/src/decrypt/raw.ts
+++ b/src/decrypt/raw.ts
@ -17,7 +17,11 @@ export async function Decrypt(
    if (ext !== raw_ext) file = new Blob([buffer], { type: AudioMimeType[ext] });
  }
  const tag = await metaParseBlob(file);
-  const { title, artist } = GetMetaFromFile(raw_filename, tag.common.title, String(tag.common.artists || tag.common.artist || ''));
+  const { title, artist } = GetMetaFromFile(
+    raw_filename,
+    tag.common.title,
+    String(tag.common.artists || tag.common.artist || ''),
+  );

  return {
    title,
--- a/src/decrypt/utils.ts
+++ b/src/decrypt/utils.ts
@ -94,7 +94,8 @@ export function GetMetaFromFile(
  const items = filename.split(separator);
  if (items.length > 1) {
    //由文件名和原metadata共同决定歌手tag(有时从文件名看有多个歌手，而metadata只有一个)
-    if (!meta.artist || meta.artist.split(split_regex).length < items[0].trim().split(split_regex).length) meta.artist = items[0].trim();
+    if (!meta.artist || meta.artist.split(split_regex).length < items[0].trim().split(split_regex).length)
+      meta.artist = items[0].trim();
    if (!meta.title) meta.title = items[1].trim();
  } else if (items.length === 1) {
    if (!meta.title) meta.title = items[0].trim();
@ -182,11 +183,12 @@ export function RewriteMetaToMp3(audioData: Buffer, info: IMusicMeta, original:
  // preserve original data
  const frames = original.native['ID3v2.4'] || original.native['ID3v2.3'] || original.native['ID3v2.2'] || [];
  frames.forEach((frame) => {
-    if (frame.id !== 'TPE1'
-      && frame.id !== 'TIT2'
-      && frame.id !== 'TALB'
-      && frame.id !== 'TPE2'
-      && frame.id !== 'TCON'
+    if (
+      frame.id !== 'TPE1' &&
+      frame.id !== 'TIT2' &&
+      frame.id !== 'TALB' &&
+      frame.id !== 'TPE2' &&
+      frame.id !== 'TCON'
    ) {
      try {
        writer.setFrame(frame.id, frame.value);
--- a/src/decrypt/xm.ts
+++ b/src/decrypt/xm.ts
@ -49,7 +49,7 @@ export async function Decrypt(file: File, raw_filename: string, raw_ext: string)
  const { title, artist } = GetMetaFromFile(
    raw_filename,
    musicMeta.common.title,
-    String(musicMeta.common.artists || musicMeta.common.artist || ""),
+    String(musicMeta.common.artists || musicMeta.common.artist || ''),
    raw_filename.indexOf('_') === -1 ? '-' : '_',
  );

--- a/src/extension/popup.html
+++ b/src/extension/popup.html
@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-</head>
-<body>
-<script src="./popup.js"></script>
-<a href="./index.html" target="_blank">
-    <button>立即使用</button>
-</a>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script src="./popup.js"></script>
+    <a href="./index.html" target="_blank">
+      <button>立即使用</button>
+    </a>
+  </body>
 </html>
-
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1,31 @@
+declare module 'virtual:pwa-register/vue' {
+  // @ts-expect-error ignore when vue is not installed
+  import type { Ref } from 'vue';
+
+  export interface RegisterSWOptions {
+    immediate?: boolean;
+    onNeedRefresh?: () => void;
+    onOfflineReady?: () => void;
+    /**
+     * Called only if `onRegisteredSW` is not provided.
+     *
+     * @deprecated Use `onRegisteredSW` instead.
+     * @param registration The service worker registration if available.
+     */
+    onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
+    /**
+     * Called once the service worker is registered (requires version `0.12.8+`).
+     *
+     * @param swScriptUrl The service worker script url.
+     * @param registration The service worker registration if available.
+     */
+    onRegisteredSW?: (swScriptUrl: string, registration: ServiceWorkerRegistration | undefined) => void;
+    onRegisterError?: (error: any) => void;
+  }
+
+  export function useRegisterSW(options?: RegisterSWOptions): {
+    needRefresh: Ref<boolean>;
+    offlineReady: Ref<boolean>;
+    updateServiceWorker: (reloadPage?: boolean) => Promise<void>;
+  };
+}
--- a/src/loader.css
+++ b/src/loader.css
@ -0,0 +1,51 @@
+#loader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 1010;
+  margin: -75px 0 0 -75px;
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid #1db1ff;
+  width: 120px;
+  height: 120px;
+  animation: spin 2s linear infinite;
+}
+@keyframes spin {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+#loader-mask {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 1009;
+  background-color: rgba(242, 246, 252, 0.88);
+}
+@media (prefers-color-scheme: dark) {
+  #loader-mask {
+    color: #fff;
+    background-color: rgba(0, 0, 0, 0.85);
+  }
+  #loader-mask a {
+    color: #ddd;
+  }
+  #loader-mask a:hover {
+    color: #1db1ff;
+  }
+}
+#loader-source {
+  font-size: 1.5rem;
+}
+#loader-tips-timeout {
+  font-size: 1.2rem;
+}
--- a/src/loader.js
+++ b/src/loader.js
@ -0,0 +1,27 @@
+import './loader.css';
+
+(function () {
+  setTimeout(function () {
+    var ele = document.getElementById('loader-tips-timeout');
+    if (ele != null) {
+      ele.hidden = false;
+    }
+  }, 2000);
+
+  var ua = navigator && navigator.userAgent;
+  var detected = (function () {
+    var m;
+    if (!ua) return true;
+    if (/MSIE |Trident\//.exec(ua)) return true; // no IE
+    m = /Edge\/([\d.]+)/.exec(ua); // Edge >= 17
+    if (m && Number(m[1]) < 17) return true;
+    m = /Chrome\/([\d.]+)/.exec(ua); // Chrome >= 58
+    if (m && Number(m[1]) < 58) return true;
+    m = /Firefox\/([\d.]+)/.exec(ua); // Firefox >= 45
+    return m && Number(m[1]) < 45;
+  })();
+  if (detected) {
+    document.getElementById('loader-tips-outdated').hidden = false;
+    document.getElementById('loader-tips-timeout').hidden = false;
+  }
+})();
--- a/src/main.ts
+++ b/src/main.ts
@ -1,56 +1,11 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import App from '@/App.vue';
 import '@/registerServiceWorker';
-import {
-  Button,
-  Checkbox,
-  Col,
-  Container,
-  Dialog,
-  Form,
-  FormItem,
-  Footer,
-  Icon,
-  Image,
-  Input,
-  Link,
-  Main,
-  Notification,
-  Progress,
-  Radio,
-  Row,
-  Table,
-  TableColumn,
-  Tooltip,
-  Upload,
-  MessageBox,
-} from 'element-ui';
-import 'element-ui/lib/theme-chalk/base.css';
+import '@element-plus/theme-chalk/dist/index.css';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';

-Vue.use(Link);
-Vue.use(Image);
-Vue.use(Button);
-Vue.use(Dialog);
-Vue.use(Form);
-Vue.use(FormItem);
-Vue.use(Input);
-Vue.use(Table);
-Vue.use(TableColumn);
-Vue.use(Main);
-Vue.use(Footer);
-Vue.use(Container);
-Vue.use(Icon);
-Vue.use(Row);
-Vue.use(Col);
-Vue.use(Upload);
-Vue.use(Checkbox);
-Vue.use(Radio);
-Vue.use(Tooltip);
-Vue.use(Progress);
-Vue.prototype.$notify = Notification;
-Vue.prototype.$confirm = MessageBox.confirm;
-
-Vue.config.productionTip = false;
-new Vue({
-  render: (h) => h(App),
-}).$mount('#app');
+const app = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component);
+}
+app.mount('#app');
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@ -1,30 +1,3 @@
-/* eslint-disable no-console */
+import { useRegisterSW } from 'virtual:pwa-register/vue';

-import { register } from 'register-service-worker';
-
-if (process.env.NODE_ENV === 'production' && window.location.protocol === 'https:') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready() {
-      console.log('App is being served from cache by a service worker.');
-    },
-    registered() {
-      console.log('Service worker has been registered.');
-    },
-    cached() {
-      console.log('Content has been cached for offline use.');
-    },
-    updatefound() {
-      console.log('New content is downloading.');
-    },
-    updated() {
-      console.log('New content is available.');
-      window.location.reload();
-    },
-    offline() {
-      console.log('No internet connection found. App is running in offline mode.');
-    },
-    error(error) {
-      console.error('Error during service worker registration:', error);
-    },
-  });
-}
+useRegisterSW();
--- a/src/scss/_dark-mode.scss
+++ b/src/scss/_dark-mode.scss
@ -3,85 +3,83 @@
 */

@media (prefers-color-scheme: dark) {
-  #app{
+  #app {
    color: $dark-text-info;
  }
-  body{
+  body {
    background-color: $dark-bg;
  }

  // FORM
-  .el-radio{
-    &__label{
+  .el-radio {
+    &__label {
      color: $dark-text-main;
    }
-    &__input{
+    &__input {
      color: $dark-text-info;
-      .el-radio__inner{
+      .el-radio__inner {
        border-color: $dark-border;
        background-color: $dark-btn-bg;
      }
    }

-    &.is-checked{
-      .el-radio__inner{
+    &.is-checked {
+      .el-radio__inner {
        background-color: $blue;
      }
-      .el-radio__label{
+      .el-radio__label {
        font-weight: bold;
      }
    }
  }

-  .el-checkbox.is-bordered{
+  .el-checkbox.is-bordered {
    border-color: $dark-border;
    color: $dark-text-main;
    background-color: $dark-btn-bg;
-    .el-checkbox__inner{
+    .el-checkbox__inner {
      background-color: $dark-btn-bg-highlight;
      border-color: $dark-border-highlight;
    }
-    &:hover{
+    &:hover {
      border-color: $dark-border-highlight;
-      .el-checkbox__inner{
+      .el-checkbox__inner {
        background-color: $dark-btn-bg-highlight;
        border-color: $dark-border-highlight;
      }
-      .el-checkbox__label{
+      .el-checkbox__label {
        color: $dark-text-info;
      }
    }
-    &.is-checked{
+    &.is-checked {
      background-color: $blue;
-      .el-checkbox__inner{
+      .el-checkbox__inner {
        border-color: white;
      }
-      .el-checkbox__label{
+      .el-checkbox__label {
        color: white;
        font-weight: bold;
      }
-      &:hover{
+      &:hover {
        border-color: $blue;
-        .el-checkbox__inner{
+        .el-checkbox__inner {
          background-color: white;
        }
      }
    }
  }

-
-
  // BUTTON
-  .el-button{
+  .el-button {
    background-color: $dark-btn-bg;
    border-color: $dark-border;
    color: $dark-text-main;

-    &:active{
+    &:active {
      transform: translateY(2px);
    }

-    &--default{
+    &--default {
      &.is-plain {
        background-color: $dark-btn-bg;
        &:hover {
@ -101,7 +99,7 @@
      }
    }

-    &--success{
+    &--success {
      &.is-plain {
        background-color: $dark-btn-bg;
        &:hover {
@ -120,11 +118,11 @@
        }
      }
    }
-    &--danger{
-      &.is-plain{
+    &--danger {
+      &.is-plain {
        border-color: $dark-border;
        background-color: $dark-btn-bg;
-        &:hover{
+        &:hover {
          background-color: $red;
          border-color: $red;
        }
@ -142,44 +140,45 @@
  }

  // 文件拖放区
-  .el-upload__tip{
+  .el-upload__tip {
    color: $dark-text-info;
  }
-  .el-upload-dragger{
+  .el-upload-dragger {
    background-color: $dark-uploader-bg;
    border-color: $dark-border;
-    .el-upload__text{
+    .el-upload__text {
      color: $dark-text-info;
    }
-    &:hover{
+    &:hover {
      background: $dark-uploader-bg-highlight;
      border-color: $dark-border-highlight;
    }
  }

  // TABLE
-  .el-table{
+  .el-table {
    background-color: $dark-bg-td;
-    &:before{ // 去除表格末尾的横线
+    &:before {
+      // 去除表格末尾的横线
      content: none;
    }
-    &__header{
-      th{
+    &__header {
+      th {
        border-bottom-color: $dark-border !important;
      }
    }
-    th.el-table__cell{
+    th.el-table__cell {
      background-color: $dark-bg-th;
      color: $dark-text-info;
    }
-    td{
+    td {
      border-bottom-color: $dark-border !important;
    }
-    tr{
+    tr {
      background-color: $dark-bg-td;
      color: $dark-text-main;
-      &:hover{
-        td{
+      &:hover {
+        td {
          background-color: $dark-bg-th !important;
        }
      }
@ -187,68 +186,66 @@
  }

  // LINKS
-  a{
+  a {
    text-decoration: none;
    color: darken($dark-color-link, 15%);
-    &:hover{
+    &:hover {
      color: $dark-color-link;
    }
  }

  // ALERT
-  .el-notification{
+  .el-notification {
    background-color: $dark-btn-bg-highlight;
    border-color: $dark-border;
-    &__title{
+    &__title {
      color: white;
    }
-    &__content{
+    &__content {
      color: $dark-text-info;
    }
  }

  // DIALOG
-  .el-dialog{
+  .el-dialog {
    background-color: $dark-dialog-bg;
-    .el-dialog__header{
-      .el-dialog__title{
+    .el-dialog__header {
+      .el-dialog__title {
        color: $dark-text-main;
      }
    }
-    .el-dialog__body{
+    .el-dialog__body {
      color: $dark-text-main;
-      .el-input{
-        .el-input__inner{
+      .el-input {
+        .el-input__inner {
          color: $dark-text-main;
          background-color: $dark-btn-bg;
        }
-        .el-input__suffix{
-          .el-input__suffix-inner{
+        .el-input__suffix {
+          .el-input__suffix-inner {
          }
        }
-        .el-input__count{
-          .el-input__count-inner{
+        .el-input__count {
+          .el-input__count-inner {
            background-color: transparent;
          }
        }
      }
    }
-    .item-desc{
+    .item-desc {
      color: $dark-text-info;
    }
  }

-
-
  // 自定义样式
  // 首页弹窗提示信息的 更新信息 面板
-  .update-info{
+  .update-info {
    border: 1px solid $dark-btn-bg !important;
-    .update-title{
+    .update-title {
      color: $dark-text-main;
      background-color: $dark-btn-bg !important;
    }
-    .update-content{
+    .update-content {
      color: $dark-text-info;
      padding: 10px;
    }
--- a/src/scss/_element-ui-overrite.scss
+++ b/src/scss/_element-ui-overrite.scss
@ -1,32 +1,32 @@
 $color-checkbox: $blue;
-$color-border-el: #DCDFE6;
+$color-border-el: #dcdfe6;

 $btn-radius: 6px;

 /* FORM */
 // checkbox
-.el-checkbox.is-bordered{
-  @include border-radius($btn-radius) ;
-  &:hover{
+.el-checkbox.is-bordered {
+  @include border-radius($btn-radius);
+  &:hover {
    border-color: $color-checkbox;
-    .el-checkbox__label{
+    .el-checkbox__label {
      color: $color-checkbox;
    }
  }
-  .el-checkbox__input.is-focus{
-    .el-checkbox__inner{
+  .el-checkbox__input.is-focus {
+    .el-checkbox__inner {
      border-color: $color-border-el;
    }
  }
-  &.is-checked{
+  &.is-checked {
    background-color: $color-checkbox;
-    .el-checkbox__label{
+    .el-checkbox__label {
      color: white;
    }
-    .el-checkbox__inner{
+    .el-checkbox__inner {
      border-color: white;
      background-color: white;
-      &:after{
+      &:after {
        border-color: $color-checkbox;
      }
    }
@ -34,6 +34,6 @@ $btn-radius: 6px;
 }

 // el-button
-.el-button{
-  @include border-radius($btn-radius) ;
+.el-button {
+  @include border-radius($btn-radius);
 }
--- a/src/scss/_gaps.scss
+++ b/src/scss/_gaps.scss
@ -4,15 +4,35 @@

 $gap: 5px;
@for $item from 0 through 8 {
-  .mt-#{$item} { margin-top     : $gap * $item !important;}
-  .mb-#{$item} { margin-bottom  : $gap * $item !important;}
-  .ml-#{$item} { margin-left    : $gap * $item !important;}
-  .mr-#{$item} { margin-right   : $gap * $item !important;}
-   .m-#{$item} { margin         : $gap * $item !important;}
+  .mt-#{$item} {
+    margin-top: $gap * $item !important;
+  }
+  .mb-#{$item} {
+    margin-bottom: $gap * $item !important;
+  }
+  .ml-#{$item} {
+    margin-left: $gap * $item !important;
+  }
+  .mr-#{$item} {
+    margin-right: $gap * $item !important;
+  }
+  .m-#{$item} {
+    margin: $gap * $item !important;
+  }

-  .pt-#{$item} { padding-top    : $gap * $item !important;}
-  .pb-#{$item} { padding-bottom : $gap * $item !important;}
-  .pl-#{$item} { padding-left   : $gap * $item !important;}
-  .pr-#{$item} { padding-right  : $gap * $item !important;}
-   .p-#{$item} { padding        : $gap * $item !important;}
+  .pt-#{$item} {
+    padding-top: $gap * $item !important;
+  }
+  .pb-#{$item} {
+    padding-bottom: $gap * $item !important;
+  }
+  .pl-#{$item} {
+    padding-left: $gap * $item !important;
+  }
+  .pr-#{$item} {
+    padding-right: $gap * $item !important;
+  }
+  .p-#{$item} {
+    padding: $gap * $item !important;
+  }
 }
--- a/src/scss/_normal.scss
+++ b/src/scss/_normal.scss
@ -1,4 +1,4 @@
-body{
+body {
  font-family: $font-family;
  font-size: $fz-main;
  -webkit-font-smoothing: antialiased;
@ -11,14 +11,18 @@ body{
  padding-top: 30px;
 }

-#app-footer a {
-  padding-left: 0.2em;
-  padding-right: 0.2em;
-}
-
 #app-footer {
  text-align: center;
  font-size: small;
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    padding-left: 0.2em;
+    padding-right: 0.2em;
+  }
 }

 #app-control {
@ -26,13 +30,13 @@ body{
  padding-bottom: 1em;
 }

-audio{
+audio {
  margin-bottom: 15px; // 播放控件与表格间隔
 }

-a{
+a {
  color: darken($color-link, 15%);
-  &:hover{
+  &:hover {
    color: $color-link;
  }
-}
+}
--- a/src/scss/_utility.scss
+++ b/src/scss/_utility.scss
@ -1,19 +1,19 @@
 // box-shadow
-@mixin box-shadow($value...){
-  -webkit-box-shadow:  $value;
-  -moz-box-shadow:  $value;
-  box-shadow:  $value;
+@mixin box-shadow($value...) {
+  -webkit-box-shadow: $value;
+  -moz-box-shadow: $value;
+  box-shadow: $value;
 }

 // border-radius
-@mixin border-radius($corner...){
+@mixin border-radius($corner...) {
  -webkit-border-radius: $corner;
  -moz-border-radius: $corner;
  border-radius: $corner;
 }

-@mixin clearfix(){
-  &:after{
+@mixin clearfix() {
+  &:after {
    content: '';
    display: block;
    clear: both;
@ -21,7 +21,7 @@
  }
 }

-@mixin transform($value){
+@mixin transform($value) {
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
@ -29,7 +29,7 @@
  transform: $value;
 }

-@mixin transition($value...){
+@mixin transition($value...) {
  -webkit-transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
@ -37,23 +37,22 @@
  transition: $value;
 }

-@mixin animation($value){
+@mixin animation($value) {
  animation: $value;
  -webkit-animation: $value;
 }

-@mixin linear-gradient($direct, $colors){
+@mixin linear-gradient($direct, $colors) {
  background: linear-gradient($direct, $colors);
  background: -webkit-linear-gradient($direct, $colors);
  background: -moz-linear-gradient($direct, $colors);
 }

-@mixin backdrop-filter($value){
-  backdrop-filter: $value ;
+@mixin backdrop-filter($value) {
+  backdrop-filter: $value;
  -webkit-backdrop-filter: $value;
 }

-
 /*
  Extension
 */
@ -65,8 +64,8 @@
  user-select: none;
 }

-.btn-like{
-  &:active{
-    @include transform(translateY(2px))
+.btn-like {
+  &:active {
+    @include transform(translateY(2px));
  }
 }
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@ -1,35 +1,34 @@
 // COLORS
-$blue      : #409EFF;
-$red       : #F56C6C;
-$green     : #85ce61;
+$blue: #409eff;
+$red: #f56c6c;
+$green: #85ce61;

 // TEXT
-$text-main : #2C3E50;
+$text-main: #2c3e50;
 $color-link: $blue;

 $fz-main: 14px;
 $fz-mini-title: 13px;
 $fz-mini-content: 12px;

-$font-family: "Helvetica Neue", Helvetica, "PingFang SC",
-"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-
+$font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
+  sans-serif;

 // DARK MODE
-$dark-border                : lighten(black, 25%);
-$dark-border-highlight      : lighten(black, 55%);
-$dark-bg                    : lighten(black, 10%);
-$dark-text-main             : lighten(black, 90%);
-$dark-text-info             : lighten(black, 60%);
-$dark-uploader-bg           : lighten(black, 13%);
-$dark-dialog-bg             : lighten(black, 15%);
-$dark-uploader-bg-highlight : lighten(black, 18%);
-$dark-btn-bg                : lighten(black, 20%);
-$dark-btn-bg-highlight      : lighten(black, 30%);
-$dark-bg-th                 : lighten(black, 18%);
-$dark-bg-td                 : lighten(black, 13%);
-$dark-color-link            : $green;
+$dark-border: lighten(black, 25%);
+$dark-border-highlight: lighten(black, 55%);
+$dark-bg: lighten(black, 10%);
+$dark-text-main: lighten(black, 90%);
+$dark-text-info: lighten(black, 60%);
+$dark-uploader-bg: lighten(black, 13%);
+$dark-dialog-bg: lighten(black, 15%);
+$dark-uploader-bg-highlight: lighten(black, 18%);
+$dark-btn-bg: lighten(black, 20%);
+$dark-btn-bg-highlight: lighten(black, 30%);
+$dark-bg-th: lighten(black, 18%);
+$dark-bg-td: lighten(black, 13%);
+$dark-color-link: $green;

-$dark-blue      : darken(desaturate($blue, 40%), 30%);
-$dark-red       : darken(desaturate($red, 50%), 30%);
-$dark-green     : darken(desaturate($green, 30%), 30%);
+$dark-blue: darken(desaturate($blue, 40%), 30%);
+$dark-red: darken(desaturate($red, 50%), 30%);
+$dark-green: darken(desaturate($green, 30%), 30%);
--- a/src/scss/unlock-music.scss
+++ b/src/scss/unlock-music.scss
@ -1,24 +1,23 @@
-@import "variables";
-@import "utility";
-@import "gaps";
-@import "element-ui-overrite";
-
-@import "normal";
-@import "dark-mode"; // dark-mode 放在 normal 后面，以获得更高优先级
+@import 'variables';
+@import 'utility';
+@import 'gaps';
+@import 'element-ui-overrite';

+@import 'normal';
+@import 'dark-mode'; // dark-mode 放在 normal 后面，以获得更高优先级

 // 首页弹窗提示信息的 更新信息 面板
-.update-info{
+.update-info {
  @include border-radius(8px);
  overflow: hidden;
  border: 1px solid $color-border-el;
  margin: 10px 0;
-  .update-title{
+  .update-title {
    font-size: $fz-mini-title;
    padding: 5px 10px;
    background-color: $color-border-el;
  }
-  .update-content{
+  .update-content {
    font-size: $fz-mini-content;
    line-height: 1.5;
    padding: 10px;
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@ -1,4 +1,5 @@
 declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+  import { defineComponent } from 'vue';
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
 }
--- a/src/utils/qm_meta.ts
+++ b/src/utils/qm_meta.ts
@ -44,8 +44,7 @@ export async function extractQQMusicMeta(
      musicMeta.common.artist = '';
      if (!musicMeta.common.artists) {
        musicMeta.common.artist = fromGBK(musicMeta.common.artist);
-      }
-      else {
+      } else {
        musicMeta.common.artist = musicMeta.common.artists.map(fromGBK).join();
      }
      musicMeta.common.title = fromGBK(musicMeta.common.title);
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@ -3,13 +3,13 @@
    <file-selector @error="showFail" @success="showSuccess" />

    <div id="app-control">
-      <el-row class="mb-3">
+      <el-row class="mb-3" justify="center" align="middle">
        <span>歌曲命名格式：</span>
        <el-radio v-for="k in FilenamePolicies" :key="k.key" v-model="filename_policy" :label="k.key">
          {{ k.text }}
        </el-radio>
      </el-row>
-      <el-row>
+      <el-row justify="center" align="middle">
        <edit-dialog
          :show="showEditDialog"
          :picture="editing_data.picture"
@ -18,37 +18,52 @@
          :album="editing_data.album"
          :albumartist="editing_data.albumartist"
          :genre="editing_data.genre"
-          @cancel="showEditDialog = false" @ok="handleEdit"></edit-dialog>
+          @cancel="showEditDialog = false"
+          @ok="handleEdit"
+        ></edit-dialog>
        <config-dialog :show="showConfigDialog" @done="showConfigDialog = false"></config-dialog>
        <el-tooltip class="item" effect="dark" placement="top">
-          <div slot="content">
+          <template #content>
            <span> 部分解密方案需要设定解密参数。 </span>
-          </div>
-          <el-button icon="el-icon-s-tools" plain @click="showConfigDialog = true">解密设定</el-button>
+          </template>
+          <el-button plain @click="showConfigDialog = true">
+            <el-icon><Tools /></el-icon> 解密设定
+          </el-button>
        </el-tooltip>
-        <el-button icon="el-icon-download" plain @click="handleDownloadAll">下载全部</el-button>
-        <el-button icon="el-icon-delete" plain type="danger" @click="handleDeleteAll">清除全部</el-button>
+        <el-button plain @click="handleDownloadAll">
+          <el-icon><Download /></el-icon> 下载全部
+        </el-button>
+        <el-button plain type="danger" @click="handleDeleteAll">
+          <el-icon><Delete /></el-icon> 清除全部
+        </el-button>

        <el-tooltip class="item" effect="dark" placement="top-start">
-          <div slot="content">
-            <span v-if="instant_save">工作模式: {{ dir ? '写入本地文件系统' : '调用浏览器下载' }}</span>
+          <template #content>
+            <span v-if="instant_save"> 工作模式: {{ dir ? '写入本地文件系统' : '调用浏览器下载' }} </span>
            <span v-else>
              当您使用此工具进行大量文件解锁的时候，建议开启此选项。<br />
              开启后，解锁结果将不会存留于浏览器中，防止内存不足。
            </span>
-          </div>
-            <el-checkbox v-model="instant_save" type="success" border class="ml-2">立即保存</el-checkbox>
+          </template>
+          <el-checkbox v-model="instant_save" type="success" border class="ml-2"> 立即保存 </el-checkbox>
        </el-tooltip>
      </el-row>
    </div>

    <audio :autoplay="playing_auto" :src="playing_url" controls />

-    <PreviewTable :policy="filename_policy" :table-data="tableData" @download="saveFile" @edit="editFile" @play="changePlaying" />
+    <PreviewTable
+      :policy="filename_policy"
+      :table-data="tableData"
+      @download="saveFile"
+      @edit="editFile"
+      @play="changePlaying"
+    />
  </div>
 </template>

 <script>
+import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
 import FileSelector from '@/component/FileSelector';
 import PreviewTable from '@/component/PreviewTable';
 import ConfigDialog from '@/component/ConfigDialog';
@ -70,7 +85,14 @@ export default {
    return {
      showConfigDialog: false,
      showEditDialog: false,
-      editing_data: { picture: '', title: '', artist: '', album: '', albumartist: '', genre: '', },
+      editing_data: {
+        picture: '',
+        title: '',
+        artist: '',
+        album: '',
+        albumartist: '',
+        genre: '',
+      },
      tableData: [],
      playing_url: '',
      playing_auto: false,
@ -92,7 +114,8 @@ export default {
        RemoveBlobMusic(data);
      } else {
        this.tableData.push(data);
-        this.$notify.success({
+        ElNotification({
+          type: 'success',
          title: '解锁成功',
          message: '成功解锁 ' + data.title,
          duration: 3000,
@ -105,7 +128,8 @@ export default {
    },
    showFail(errInfo, filename) {
      console.error(errInfo, filename);
-      this.$notify.error({
+      ElNotification({
+        type: 'error',
        title: '出现问题',
        message:
          errInfo +
@ -164,12 +188,13 @@ export default {
            console.warn('获取图像失败', this.editing_data.picture);
          }
        }
-        const newMeta = { picture: imageInfo?.buffer,
+        const newMeta = {
+          picture: imageInfo?.buffer,
          title: data.title,
          artists: data.artist.split(split_regex),
          album: data.album,
          albumartist: data.albumartist,
-          genre: data.genre.split(split_regex)
+          genre: data.genre.split(split_regex),
        };
        const buffer = Buffer.from(await this.editing_data.blob.arrayBuffer());
        const mime = AudioMimeType[this.editing_data.ext] || AudioMimeType.mp3;
@ -187,19 +212,22 @@ export default {
      }
      this.editing_data.file = URL.createObjectURL(this.editing_data.blob);
      if (writeSuccess === true) {
-        this.$notify.success({
+        ElNotification({
+          type: 'success',
          title: '修改成功',
          message: notifyMsg,
          duration: 3000,
        });
      } else if (writeSuccess === false) {
-        this.$notify.error({
+        ElNotification({
+          type: 'error',
          title: '修改失败',
          message: notifyMsg,
          duration: 3000,
        });
      } else {
-        this.$notify.warning({
+        ElNotification({
+          type: 'warning',
          title: '修改取消',
          message: notifyMsg,
          duration: 3000,
@ -217,7 +245,7 @@ export default {
    async saveFile(data) {
      if (this.dir) {
        await DirectlyWriteFile(data, this.filename_policy, this.dir);
-        this.$notify({
+        ElNotification({
          title: '保存成功',
          message: data.title,
          position: 'top-left',
@ -231,7 +259,7 @@ export default {
    async showDirectlySave() {
      if (!window.showDirectoryPicker) return;
      try {
-        await this.$confirm('您的浏览器支持文件直接保存到磁盘，是否使用？', '新特性提示', {
+        await ElMessageBox.confirm('您的浏览器支持文件直接保存到磁盘，是否使用？', '新特性提示', {
          confirmButtonText: '使用',
          cancelButtonText: '不使用',
          type: 'warning',
--- a/tsconfig.json
+++ b/tsconfig.json
@ -14,7 +14,6 @@
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
-      "webpack-env",
      "jest"
    ],
    "paths": {
@ -40,4 +39,4 @@
  "exclude": [
    "node_modules"
  ]
-}
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,85 @@
+import path from 'path';
+
+import { defineConfig } from 'vite';
+
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import GlobalsPolyfills from '@esbuild-plugins/node-globals-polyfill';
+import NodeModulesPolyfills from '@esbuild-plugins/node-modules-polyfill';
+import { VitePWA } from 'vite-plugin-pwa';
+import commonjs from 'vite-plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+export default defineConfig({
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis',
+      },
+      plugins: [
+        GlobalsPolyfills({
+          process: true,
+          buffer: true,
+        }),
+      ],
+    },
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+
+      process: 'rollup-plugin-node-polyfills/polyfills/process-es6',
+      stream: 'rollup-plugin-node-polyfills/polyfills/stream',
+      util: 'rollup-plugin-node-polyfills/polyfills/util',
+    },
+  },
+  plugins: [
+    commonjs(),
+    NodeModulesPolyfills(),
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+    VitePWA({
+      registerType: 'autoUpdate',
+      manifest: {
+        name: '音乐解锁',
+        theme_color: '#4DBA87',
+        description: '在任何设备上解锁已购的加密音乐！',
+        icons: [
+          {
+            src: 'assets/img/icons/android-chrome-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: 'assets/img/icons/android-chrome-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
+    replace({
+      preventAssignment: false,
+      values: {
+        'global.': 'window.',
+      },
+    }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: 'img',
+          dest: 'assets',
+        },
+      ],
+    }),
+  ],
+});
--- a/vue.config.js
+++ b/vue.config.js
@ -1,43 +1,43 @@
 const ThreadsPlugin = require('threads-plugin');
 module.exports = {
-    publicPath: '',
-    productionSourceMap: false,
-    pwa: {
-        manifestPath: "web-manifest.json",
-        name: "音乐解锁",
-        themeColor: "#4DBA87",
-        msTileColor: "#000000",
-        manifestOptions: {
-            start_url: "./index.html",
-            description: "在任何设备上解锁已购的加密音乐！",
-            icons: [
-                {
-                    'src': './img/icons/android-chrome-192x192.png',
-                    'sizes': '192x192',
-                    'type': 'image/png'
-                },
-                {
-                    'src': './img/icons/android-chrome-512x512.png',
-                    'sizes': '512x512',
-                    'type': 'image/png'
-                }
-            ]
+  publicPath: '',
+  productionSourceMap: false,
+  pwa: {
+    manifestPath: 'web-manifest.json',
+    name: '音乐解锁',
+    themeColor: '#4DBA87',
+    msTileColor: '#000000',
+    manifestOptions: {
+      start_url: './index.html',
+      description: '在任何设备上解锁已购的加密音乐！',
+      icons: [
+        {
+          src: './img/icons/android-chrome-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
        },
-        appleMobileWebAppCapable: 'yes',
-        iconPaths: {
-            faviconSVG: './img/icons/safari-pinned-tab.svg',
-            favicon32: './img/icons/favicon-32x32.png',
-            favicon16: './img/icons/favicon-16x16.png',
-            appleTouchIcon: './img/icons/apple-touch-icon-152x152.png',
-            maskIcon: './img/icons/safari-pinned-tab.svg',
-            msTileImage: './img/icons/msapplication-icon-144x144.png'
+        {
+          src: './img/icons/android-chrome-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
        },
-        workboxPluginMode: "GenerateSW",
-        workboxOptions: {
-            skipWaiting: true
-        }
+      ],
    },
-    configureWebpack: {
-        plugins: [new ThreadsPlugin()]
-    }
+    appleMobileWebAppCapable: 'yes',
+    iconPaths: {
+      faviconSVG: './img/icons/safari-pinned-tab.svg',
+      favicon32: './img/icons/favicon-32x32.png',
+      favicon16: './img/icons/favicon-16x16.png',
+      appleTouchIcon: './img/icons/apple-touch-icon-152x152.png',
+      maskIcon: './img/icons/safari-pinned-tab.svg',
+      msTileImage: './img/icons/msapplication-icon-144x144.png',
+    },
+    workboxPluginMode: 'GenerateSW',
+    workboxOptions: {
+      skipWaiting: true,
+    },
+  },
+  configureWebpack: {
+    plugins: [new ThreadsPlugin()],
+  },
 };