From c1cd31840ec317ea19f36d3ba8650dad186220ed Mon Sep 17 00:00:00 2001
From: qier222 <qier222@outlook.com>
Date: Sun, 26 Mar 2023 02:16:01 +0800
Subject: [PATCH] feat: updates

---
 .gitignore                                    |   2 +-
 README.md                                     |   4 +
 package.json                                  |   2 +-
 packages/desktop/.electron-builder.config.js  |  29 +-
 packages/desktop/main/appServer/appServer.ts  |  14 +-
 .../main/appServer/routes/netease/netease.ts  |   4 +-
 .../appServer/routes/r3play/appleMusic.ts     |   3 +
 .../main/appServer/routes/r3play/audio.ts     |   2 +
 packages/desktop/main/cache.ts                |   2 +
 packages/desktop/main/db.ts                   |   4 +-
 packages/desktop/main/index.ts                |   4 +-
 packages/desktop/main/ipcMain.ts              |  29 +-
 packages/desktop/main/log.ts                  |   2 +-
 packages/desktop/main/menu.ts                 |  24 +-
 packages/desktop/main/store.ts                |   3 +
 packages/desktop/main/tray.ts                 |  12 +-
 packages/desktop/main/utils.ts                |   3 +
 packages/desktop/main/windowsTaskbar.ts       |  11 +-
 packages/desktop/package.json                 |   8 +-
 packages/desktop/scripts/copySQLite3.js       |   7 +-
 packages/shared/api/User.ts                   |  14 +
 packages/web/IpcRendererReact.tsx             |   4 +-
 packages/web/api/album.ts                     |   8 +-
 packages/web/api/artist.ts                    |  12 +-
 packages/web/api/auth.ts                      |  12 +-
 packages/web/api/hooks/useTracks.ts           |   2 +-
 packages/web/api/hooks/useUser.ts             |  43 +-
 packages/web/api/playlist.ts                  |   8 +-
 packages/web/api/user.ts                      |  17 +-
 .../web/components/ContextMenus/MenuItem.tsx  |   4 +
 packages/web/components/CoverRow.tsx          |  22 +-
 packages/web/components/CoverRowVirtual.tsx   |  16 +-
 packages/web/components/CoverWall.tsx         |  11 +-
 packages/web/components/Devtool.tsx           |  19 +-
 packages/web/components/Dropdown.tsx          |  45 ++
 packages/web/components/ErrorBoundary.tsx     |   4 +-
 packages/web/components/Image.tsx             |   3 +-
 packages/web/components/Layout.tsx            |  17 +-
 .../web/components/Login/LoginWithQRCode.tsx  |   5 +-
 .../web/components/NowPlaying/Controls.tsx    |  14 +-
 .../web/components/NowPlaying/NowPlaying.tsx  |   2 +
 packages/web/components/Player.tsx            |   1 +
 packages/web/components/PlayerMobile.tsx      |  23 +-
 packages/web/components/PlayingNextMobile.tsx |   5 +-
 packages/web/components/Router.tsx            |  44 +-
 packages/web/components/Slider.tsx            |  38 +-
 packages/web/components/TitleBar.tsx          |   7 +-
 packages/web/components/Topbar/Avatar.tsx     |   9 +-
 packages/web/components/TrafficLight.tsx      |   3 +-
 packages/web/components/Wave.tsx              |   2 +-
 packages/web/global.d.ts                      |  10 +-
 packages/web/hooks/useIntersectionObserver.ts |   8 +-
 packages/web/hooks/useScroll.ts               |  11 +-
 packages/web/i18n/locales/en-us.json          |  13 +-
 packages/web/i18n/locales/zh-cn.json          |  12 +-
 packages/web/index.html                       |  42 +-
 packages/web/ipcRenderer.ts                   |   6 +-
 packages/web/package.json                     |  14 +-
 packages/web/pages/Album/Header.tsx           |  23 +-
 packages/web/pages/Album/MoreByArtist.tsx     |  12 +-
 packages/web/pages/Artist/Header/Actions.tsx  |  10 +-
 .../web/pages/Artist/Header/ArtistInfo.tsx    |  15 +-
 .../web/pages/Artist/Header/LatestRelease.tsx |   6 +-
 packages/web/pages/Artist/Popular.tsx         |   8 +-
 packages/web/pages/Discover.tsx               |  12 +-
 packages/web/pages/My/Collections.tsx         |  54 +-
 packages/web/pages/My/My.tsx                  |  13 +-
 packages/web/pages/My/PlayLikedSongsCard.tsx  |   6 +-
 packages/web/pages/My/RecentlyListened.tsx    |  27 +-
 packages/web/pages/Playlist/Header.tsx        |  10 +-
 packages/web/pages/Playlist/Playlist.tsx      |  10 +-
 packages/web/pages/Playlist/TrackList.tsx     |  17 +-
 packages/web/pages/Settings/Player.tsx        |  12 +-
 packages/web/pages/Settings/Settings.tsx      |  24 +-
 packages/web/postcss.config.js                |   5 +-
 packages/web/states/scrollPositions.ts        |  12 +-
 packages/web/tailwind.config.js               |   6 +-
 packages/web/test/utils/common.test.ts        | 232 ++++----
 packages/web/test/utils/cookie.test.ts        |  10 +-
 packages/web/utils/common.ts                  |   4 +-
 packages/web/utils/lyric.ts                   |   3 +-
 packages/web/utils/theme.ts                   |   3 +-
 packages/web/vite.config.ts                   |  65 +--
 packages/web/vitePluginFilenamesToType.ts     |  14 +-
 pnpm-lock.yaml                                | 510 +++++++++++++-----
 vercel.json                                   |   4 +-
 86 files changed, 1048 insertions(+), 778 deletions(-)
 mode change 100644 => 100755 packages/desktop/main/ipcMain.ts
 create mode 100644 packages/web/components/Dropdown.tsx

diff --git a/.gitignore b/.gitignore
index 0e85dfb..5e2ad1f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,4 +57,4 @@ vercel.json
 packages/web/bundle-stats-renderer.html
 packages/web/bundle-stats.html
 packages/web/storybook-static
-packages/desktop/prisma/client
+packages/desktop/esbuild-kit
diff --git a/README.md b/README.md
index 4b1c9ab..c27587c 100644
--- a/README.md
+++ b/README.md
@@ -49,6 +49,10 @@ API 源代码来自 [Binaryify/NeteaseCloudMusicApi](https://github.com/Binaryif
 
 任何基于此项目开发的项目都必须遵守开源协议，在项目 README/应用内的关于页面和介绍网站中明确说明基于此项目开发，并附上此项目 GitHub 页面的链接。
 
+## Credit
+
+Designed by [JACKCRING](https://jackcring.com)
+
 <!-- ## 🖼️ 截图 -->
 
 <!-- ![lyrics][lyrics-screenshot]
diff --git a/package.json b/package.json
index bee70ab..8d43501 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.31.0",
     "prettier": "^2.8.1",
-    "turbo": "^1.6.3",
+    "turbo": "^1.8.3",
     "typescript": "^4.9.5",
     "tsx": "^3.12.1",
     "prettier-plugin-tailwindcss": "^0.2.1"
diff --git a/packages/desktop/.electron-builder.config.js b/packages/desktop/.electron-builder.config.js
index 78f5f40..8973f01 100644
--- a/packages/desktop/.electron-builder.config.js
+++ b/packages/desktop/.electron-builder.config.js
@@ -9,7 +9,8 @@ const electronVersion = pkg.devDependencies.electron.replaceAll('^', '')
 module.exports = {
   appId: 'app.r3play',
   productName: pkg.productName,
-  copyright: 'Copyright © 2022 qier222',
+  executableName: pkg.productName,
+  copyright: 'Copyright © 2023 qier222',
   asar: true,
   directories: {
     output: 'release',
@@ -70,14 +71,14 @@ module.exports = {
   },
   linux: {
     target: [
-      {
-        target: 'deb',
-        arch: [
-          'x64',
-          // 'arm64',
-          // 'armv7l'
-        ],
-      },
+      // {
+      //   target: 'deb',
+      //   arch: [
+      //     'x64',
+      //     // 'arm64',
+      //     // 'armv7l'
+      //   ],
+      // },
       {
         target: 'AppImage',
         arch: ['x64'],
@@ -105,19 +106,13 @@ module.exports = {
   },
   files: [
     '!**/*.ts',
-    '!**/node_modules/better-sqlite3/{bin,build,deps}/**',
-    '!**/node_modules/*/{*.MD,*.md,README,readme}',
-    '!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples}',
-    '!**/node_modules/*.d.ts',
-    '!**/node_modules/.bin',
     '!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}',
     '!.editorconfig',
     '!**/._*',
     '!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}',
-    '!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}',
-    '!**/{appveyor.yml,.travis.yml,circle.yml}',
-    '!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json,pnpm-lock.yaml}',
+    '!**/{pnpm-lock.yaml}',
     '!**/*.{map,debug.min.js}',
+    '!**/node_modules/*',
 
     {
       from: './dist',
diff --git a/packages/desktop/main/appServer/appServer.ts b/packages/desktop/main/appServer/appServer.ts
index 70e6a29..e3995e5 100644
--- a/packages/desktop/main/appServer/appServer.ts
+++ b/packages/desktop/main/appServer/appServer.ts
@@ -1,13 +1,15 @@
+import path from 'path'
+import { isProd } from '../env'
+import log from '../log'
+import appleMusic from './routes/r3play/appleMusic'
+import netease from './routes/netease/netease'
+import audio from './routes/r3play/audio'
 import fastifyCookie from '@fastify/cookie'
 import fastifyMultipart from '@fastify/multipart'
 import fastifyStatic from '@fastify/static'
 import fastify from 'fastify'
-import path from 'path'
-import { isProd } from '../env'
-import log from '../log'
-import netease from './routes/netease/netease'
-import appleMusic from './routes/r3play/appleMusic'
-import audio from './routes/r3play/audio'
+
+log.info('[electron] appServer/appServer.ts')
 
 const initAppServer = async () => {
   const server = fastify({
diff --git a/packages/desktop/main/appServer/routes/netease/netease.ts b/packages/desktop/main/appServer/routes/netease/netease.ts
index e14b17e..5e41604 100644
--- a/packages/desktop/main/appServer/routes/netease/netease.ts
+++ b/packages/desktop/main/appServer/routes/netease/netease.ts
@@ -1,9 +1,11 @@
+import cache from '../../../cache'
 import log from '@/desktop/main/log'
 import { CacheAPIs } from '@/shared/CacheAPIs'
 import { pathCase, snakeCase } from 'change-case'
 import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify'
 import NeteaseCloudMusicApi from 'NeteaseCloudMusicApi'
-import cache from '../../../cache'
+
+log.info('[electron] appServer/routes/netease.ts')
 
 async function netease(fastify: FastifyInstance) {
   const getHandler = (name: string, neteaseApi: (params: any) => any) => {
diff --git a/packages/desktop/main/appServer/routes/r3play/appleMusic.ts b/packages/desktop/main/appServer/routes/r3play/appleMusic.ts
index fce7951..e4ac84a 100644
--- a/packages/desktop/main/appServer/routes/r3play/appleMusic.ts
+++ b/packages/desktop/main/appServer/routes/r3play/appleMusic.ts
@@ -1,6 +1,9 @@
 import { FastifyInstance } from 'fastify'
 import proxy from '@fastify/http-proxy'
 import { isDev } from '@/desktop/main/env'
+import log from '@/desktop/main/log'
+
+log.info('[electron] appServer/routes/r3play/appleMusic.ts')
 
 async function appleMusic(fastify: FastifyInstance) {
   fastify.register(proxy, {
diff --git a/packages/desktop/main/appServer/routes/r3play/audio.ts b/packages/desktop/main/appServer/routes/r3play/audio.ts
index cee9270..268fd94 100644
--- a/packages/desktop/main/appServer/routes/r3play/audio.ts
+++ b/packages/desktop/main/appServer/routes/r3play/audio.ts
@@ -11,6 +11,8 @@ import { FetchTracksResponse } from '@/shared/api/Track'
 import store from '@/desktop/main/store'
 import { db, Tables } from '@/desktop/main/db'
 
+log.info('[electron] appServer/routes/r3play/audio.ts')
+
 const getAudioFromCache = async (id: number) => {
   // get from cache
   const cache = await db.find(Tables.Audio, id)
diff --git a/packages/desktop/main/cache.ts b/packages/desktop/main/cache.ts
index bd3396c..72393cc 100644
--- a/packages/desktop/main/cache.ts
+++ b/packages/desktop/main/cache.ts
@@ -8,6 +8,8 @@ import { CacheAPIs, CacheAPIsParams } from '@/shared/CacheAPIs'
 import { TablesStructures } from './db'
 import { FastifyReply } from 'fastify'
 
+log.info('[electron] cache.ts')
+
 class Cache {
   constructor() {
     //
diff --git a/packages/desktop/main/db.ts b/packages/desktop/main/db.ts
index 1a02e48..b29c694 100644
--- a/packages/desktop/main/db.ts
+++ b/packages/desktop/main/db.ts
@@ -9,6 +9,8 @@ import pkg from '../../../package.json'
 import { compare, validate } from 'compare-versions'
 import os from 'os'
 
+log.info('[electron] db.ts')
+
 export const enum Tables {
   Track = 'Track',
   Album = 'Album',
@@ -108,7 +110,7 @@ class DB {
     const prodBinPaths = {
       darwin: path.resolve(app.getPath('exe'), `../../Resources/bin/better_sqlite3.node`),
       win32: path.resolve(app.getPath('exe'), `../resources/bin/better_sqlite3.node`),
-      linux: '',
+      linux: path.resolve(app.getPath('exe'), `../resources/bin/better_sqlite3.node`),
     }
     return isProd
       ? prodBinPaths[os.platform as unknown as 'darwin' | 'win32' | 'linux']
diff --git a/packages/desktop/main/index.ts b/packages/desktop/main/index.ts
index b524b87..bf10afc 100644
--- a/packages/desktop/main/index.ts
+++ b/packages/desktop/main/index.ts
@@ -13,6 +13,8 @@ import { isDev, isWindows, isLinux, isMac, appName } from './env'
 import store from './store'
 import initAppServer from './appServer/appServer'
 
+log.info('[electron] index.ts')
+
 class Main {
   win: BrowserWindow | null = null
   tray: YPMTray | null = null
@@ -103,7 +105,7 @@ class Main {
 
     // Make all links open with the browser, not with the application
     this.win.webContents.setWindowOpenHandler(({ url }) => {
-      if (url.startsWith('https:')) shell.openExternal(url)
+      if (url.startsWith('https://')) shell.openExternal(url)
       return { action: 'deny' }
     })
 
diff --git a/packages/desktop/main/ipcMain.ts b/packages/desktop/main/ipcMain.ts
old mode 100644
new mode 100755
index 7e880d1..9b3bfb1
--- a/packages/desktop/main/ipcMain.ts
+++ b/packages/desktop/main/ipcMain.ts
@@ -14,6 +14,8 @@ import path from 'path'
 import prettyBytes from 'pretty-bytes'
 import { db, Tables } from './db'
 
+log.info('[electron] ipcMain.ts')
+
 const on = <T extends keyof IpcChannelsParams>(
   channel: T,
   listener: (event: Electron.IpcMainEvent, params: IpcChannelsParams[T]) => void
@@ -50,9 +52,30 @@ function initWindowIpcMain(win: BrowserWindow | null) {
     win?.minimize()
   })
 
+  let isMaximized = false
+  let unMaximizeSize: { width: number; height: number } | null = null
+  let windowPosition: { x: number; y: number } | null = null
   on(IpcChannels.MaximizeOrUnmaximize, () => {
-    if (!win) return
-    win.isMaximized() ? win.unmaximize() : win.maximize()
+    if (!win) return false
+
+    if (isMaximized) {
+      if (unMaximizeSize) {
+        win.setSize(unMaximizeSize.width, unMaximizeSize.width, true)
+      }
+      if (windowPosition) {
+        win.setPosition(windowPosition.x, windowPosition.y, true)
+      }
+      win.unmaximize()
+    } else {
+      const size = win.getSize()
+      unMaximizeSize = { width: size[1], height: size[0] }
+      const position = win.getPosition()
+      windowPosition = { x: position[0], y: position[1] }
+      win.maximize()
+    }
+
+    isMaximized = !isMaximized
+    win.webContents.send(IpcChannels.IsMaximized, isMaximized)
   })
 
   on(IpcChannels.Close, () => {
@@ -66,7 +89,7 @@ function initWindowIpcMain(win: BrowserWindow | null) {
 
   handle(IpcChannels.IsMaximized, () => {
     if (!win) return
-    return win.isMaximized()
+    return isMaximized
   })
 }
 
diff --git a/packages/desktop/main/log.ts b/packages/desktop/main/log.ts
index e195452..edb2c3d 100644
--- a/packages/desktop/main/log.ts
+++ b/packages/desktop/main/log.ts
@@ -1,5 +1,5 @@
 /**  By default, it writes logs to the following locations:
- * on Linux: ~/.config/r3play/logs/main.log
+ * on Linux: ~/.config/R3PLAY/logs/main.log
  * on macOS: ~/Library/Logs/r3play/main.log
  * on Windows: %USERPROFILE%\AppData\Roaming\r3play\logs\main.log
  * @see https://www.npmjs.com/package/electron-log
diff --git a/packages/desktop/main/menu.ts b/packages/desktop/main/menu.ts
index a69de81..5401c86 100644
--- a/packages/desktop/main/menu.ts
+++ b/packages/desktop/main/menu.ts
@@ -1,14 +1,10 @@
-import {
-  app,
-  BrowserWindow,
-  Menu,
-  MenuItem,
-  MenuItemConstructorOptions,
-  shell,
-} from 'electron'
+import { app, BrowserWindow, Menu, MenuItem, MenuItemConstructorOptions, shell } from 'electron'
 import { isMac } from './env'
 import { logsPath } from './utils'
 import { exec } from 'child_process'
+import log from './log'
+
+log.info('[electron] menu.ts')
 
 export const createMenu = (win: BrowserWindow) => {
   const template: Array<MenuItemConstructorOptions | MenuItem> = [
@@ -51,9 +47,7 @@ export const createMenu = (win: BrowserWindow) => {
         {
           label: '反馈问题',
           click: async () => {
-            await shell.openExternal(
-              'https://github.com/qier222/YesPlayMusic/issues/new'
-            )
+            await shell.openExternal('https://github.com/qier222/YesPlayMusic/issues/new')
           },
         },
         { type: 'separator' },
@@ -66,17 +60,13 @@ export const createMenu = (win: BrowserWindow) => {
         {
           label: '访问论坛',
           click: async () => {
-            await shell.openExternal(
-              'https://github.com/qier222/YesPlayMusic/discussions'
-            )
+            await shell.openExternal('https://github.com/qier222/YesPlayMusic/discussions')
           },
         },
         {
           label: '加入交流群',
           click: async () => {
-            await shell.openExternal(
-              'https://github.com/qier222/YesPlayMusic/discussions'
-            )
+            await shell.openExternal('https://github.com/qier222/YesPlayMusic/discussions')
           },
         },
       ],
diff --git a/packages/desktop/main/store.ts b/packages/desktop/main/store.ts
index 5a51152..5182a06 100644
--- a/packages/desktop/main/store.ts
+++ b/packages/desktop/main/store.ts
@@ -1,4 +1,7 @@
 import Store from 'electron-store'
+import log from './log'
+
+log.info('[electron] store.ts')
 
 export interface TypedElectronStore {
   window: {
diff --git a/packages/desktop/main/tray.ts b/packages/desktop/main/tray.ts
index 891283d..32a7be8 100644
--- a/packages/desktop/main/tray.ts
+++ b/packages/desktop/main/tray.ts
@@ -1,15 +1,11 @@
 import path from 'path'
-import {
-  app,
-  BrowserWindow,
-  Menu,
-  MenuItemConstructorOptions,
-  nativeImage,
-  Tray,
-} from 'electron'
+import { app, BrowserWindow, Menu, MenuItemConstructorOptions, nativeImage, Tray } from 'electron'
 import { IpcChannels } from '@/shared/IpcChannels'
 import { RepeatMode } from '@/shared/playerDataTypes'
 import { appName } from './env'
+import log from './log'
+
+log.info('[electron] tray.ts')
 
 const iconDirRoot =
   process.env.NODE_ENV === 'development'
diff --git a/packages/desktop/main/utils.ts b/packages/desktop/main/utils.ts
index 0761c60..0443840 100644
--- a/packages/desktop/main/utils.ts
+++ b/packages/desktop/main/utils.ts
@@ -3,6 +3,9 @@ import path from 'path'
 import os from 'os'
 import pkg from '../../../package.json'
 import { appName, isDev } from './env'
+import log from './log'
+
+log.info('[electron] utils.ts')
 
 export const dirname = isDev ? process.cwd() : __dirname
 export const devUserDataPath = path.resolve(process.cwd(), '../../tmp/userData')
diff --git a/packages/desktop/main/windowsTaskbar.ts b/packages/desktop/main/windowsTaskbar.ts
index 9243b96..c5b1dc1 100644
--- a/packages/desktop/main/windowsTaskbar.ts
+++ b/packages/desktop/main/windowsTaskbar.ts
@@ -1,6 +1,9 @@
 import { IpcChannels } from '@/shared/IpcChannels'
 import { BrowserWindow, nativeImage, ThumbarButton } from 'electron'
 import path from 'path'
+import log from './log'
+
+log.info('[electron] windowsTaskbar.ts')
 
 enum ItemKeys {
   Play = 'play',
@@ -66,15 +69,11 @@ class ThumbarImpl implements Thumbar {
   }
 
   private _updateThumbarButtons(clear: boolean) {
-    this._win.setThumbarButtons(
-      clear ? [] : [this._previous, this._playOrPause, this._next]
-    )
+    this._win.setThumbarButtons(clear ? [] : [this._previous, this._playOrPause, this._next])
   }
 
   setPlayState(isPlaying: boolean) {
-    this._playOrPause = this._buttons.get(
-      isPlaying ? ItemKeys.Pause : ItemKeys.Play
-    )!
+    this._playOrPause = this._buttons.get(isPlaying ? ItemKeys.Pause : ItemKeys.Play)!
     this._updateThumbarButtons(false)
   }
 }
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
index 47ed484..034759b 100644
--- a/packages/desktop/package.json
+++ b/packages/desktop/package.json
@@ -4,7 +4,8 @@
   "private": true,
   "version": "2.0.0",
   "main": "./main/index.js",
-  "author": "*",
+  "author": "qier222 <qier222@outlook.com>",
+  "homepage": "https://github.com/qier222/YesPlayMusic",
   "scripts": {
     "postinstall": "tsx scripts/build.sqlite3.ts",
     "dev": "tsx scripts/build.main.ts --watch",
@@ -25,7 +26,6 @@
     "@fastify/multipart": "^7.4.0",
     "@fastify/static": "^6.6.1",
     "@sentry/electron": "^3.0.7",
-    "@yimura/scraper": "^1.2.4",
     "NeteaseCloudMusicApi": "^4.8.9",
     "better-sqlite3": "8.1.0",
     "change-case": "^4.1.2",
@@ -41,10 +41,10 @@
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.3",
     "@vitest/ui": "^0.20.3",
-    "axios": "^1.2.1",
+    "axios": "^1.3.4",
     "cross-env": "^7.0.3",
     "dotenv": "^16.0.3",
-    "electron": "^23.1.1",
+    "electron": "^23.1.4",
     "electron-builder": "23.6.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-rebuild": "^3.2.9",
diff --git a/packages/desktop/scripts/copySQLite3.js b/packages/desktop/scripts/copySQLite3.js
index 5d6d90b..24ce6ee 100644
--- a/packages/desktop/scripts/copySQLite3.js
+++ b/packages/desktop/scripts/copySQLite3.js
@@ -39,10 +39,11 @@ exports.default = async function (context) {
     }
   }
 
-  if (platform === 'win32') {
-    if (arch !== 'x64') return // Skip other archs
+  // Windows and Linux
+  if (platform === 'win32' || platform === 'linux') {
+    if (platform === 'win32' && arch !== 'x64') return // Skip windows arm
 
-    const from = `${binDir}/better_sqlite3_win32_${arch}.node`
+    const from = `${binDir}/better_sqlite3_${platform}_${arch}.node`
     const to = `${context.appOutDir}/resources/bin/better_sqlite3.node`
     console.info(`copy ${from} to ${to}`)
 
diff --git a/packages/shared/api/User.ts b/packages/shared/api/User.ts
index 7d67bcb..6a996d8 100644
--- a/packages/shared/api/User.ts
+++ b/packages/shared/api/User.ts
@@ -6,6 +6,8 @@ export enum UserApiNames {
   FetchUserArtists = 'fetchUserArtists',
   FetchListenedRecords = 'fetchListenedRecords',
   FetchUserVideos = 'fetchUserVideos',
+  RefreshCookie = 'refreshCookie',
+  DailyCheckIn = 'dailyCheckIn',
 }
 
 // 获取账号详情
@@ -130,3 +132,15 @@ export interface FetchListenedRecordsResponse {
     song: Track
   }[]
 }
+
+// 刷新Cookie
+export interface RefreshCookieResponse {
+  code: number
+  cookie: string
+}
+
+// 每日签到
+export interface DailyCheckInResponse {
+  code: number
+  point: number
+}
diff --git a/packages/web/IpcRendererReact.tsx b/packages/web/IpcRendererReact.tsx
index c31dae6..272ca93 100644
--- a/packages/web/IpcRendererReact.tsx
+++ b/packages/web/IpcRendererReact.tsx
@@ -1,7 +1,5 @@
 import { IpcChannels } from '@/shared/IpcChannels'
-import useUserLikedTracksIDs, {
-  useMutationLikeATrack,
-} from '@/web/api/hooks/useUserLikedTracksIDs'
+import useUserLikedTracksIDs, { useMutationLikeATrack } from '@/web/api/hooks/useUserLikedTracksIDs'
 import player from '@/web/states/player'
 import useIpcRenderer from '@/web/hooks/useIpcRenderer'
 import { State as PlayerState } from '@/web/utils/player'
diff --git a/packages/web/api/album.ts b/packages/web/api/album.ts
index 35f1ab6..a6ab7a9 100644
--- a/packages/web/api/album.ts
+++ b/packages/web/api/album.ts
@@ -7,9 +7,7 @@ import {
 } from '@/shared/api/Album'
 
 // 专辑详情
-export function fetchAlbum(
-  params: FetchAlbumParams
-): Promise<FetchAlbumResponse> {
+export function fetchAlbum(params: FetchAlbumParams): Promise<FetchAlbumResponse> {
   return request({
     url: '/album',
     method: 'get',
@@ -20,9 +18,7 @@ export function fetchAlbum(
   })
 }
 
-export function likeAAlbum(
-  params: LikeAAlbumParams
-): Promise<LikeAAlbumResponse> {
+export function likeAAlbum(params: LikeAAlbumParams): Promise<LikeAAlbumResponse> {
   return request({
     url: '/album/sub',
     method: 'post',
diff --git a/packages/web/api/artist.ts b/packages/web/api/artist.ts
index 27b2ab2..82953bd 100644
--- a/packages/web/api/artist.ts
+++ b/packages/web/api/artist.ts
@@ -13,9 +13,7 @@ import {
 } from '@/shared/api/Artist'
 
 // 歌手详情
-export function fetchArtist(
-  params: FetchArtistParams
-): Promise<FetchArtistResponse> {
+export function fetchArtist(params: FetchArtistParams): Promise<FetchArtistResponse> {
   return request({
     url: '/artists',
     method: 'get',
@@ -46,9 +44,7 @@ export function fetchSimilarArtists(
 }
 
 // 获取歌手MV
-export function fetchArtistMV(
-  params: FetchArtistMVParams
-): Promise<FetchArtistMVResponse> {
+export function fetchArtistMV(params: FetchArtistMVParams): Promise<FetchArtistMVResponse> {
   return request({
     url: '/artist/mv',
     method: 'get',
@@ -57,9 +53,7 @@ export function fetchArtistMV(
 }
 
 // 收藏歌手
-export function likeAArtist(
-  params: LikeAArtistParams
-): Promise<LikeAArtistResponse> {
+export function likeAArtist(params: LikeAArtistParams): Promise<LikeAArtistResponse> {
   return request({
     url: 'artist/sub',
     method: 'get',
diff --git a/packages/web/api/auth.ts b/packages/web/api/auth.ts
index 1829453..aa4e7a3 100644
--- a/packages/web/api/auth.ts
+++ b/packages/web/api/auth.ts
@@ -1,5 +1,5 @@
 import request from '@/web/utils/request'
-import { FetchUserAccountResponse } from '@/shared/api/User'
+import { FetchUserAccountResponse, RefreshCookieResponse } from '@/shared/api/User'
 
 // 手机号登录
 interface LoginWithPhoneParams {
@@ -14,9 +14,7 @@ export interface LoginWithPhoneResponse {
   code: number
   cookie: string
 }
-export function loginWithPhone(
-  params: LoginWithPhoneParams
-): Promise<LoginWithPhoneResponse> {
+export function loginWithPhone(params: LoginWithPhoneParams): Promise<LoginWithPhoneResponse> {
   return request({
     url: '/login/cellphone',
     method: 'post',
@@ -47,9 +45,7 @@ export interface LoginWithEmailResponse extends FetchUserAccountResponse {
     userId: number
   }[]
 }
-export function loginWithEmail(
-  params: LoginWithEmailParams
-): Promise<LoginWithEmailResponse> {
+export function loginWithEmail(params: LoginWithEmailParams): Promise<LoginWithEmailResponse> {
   return request({
     url: '/login',
     method: 'post',
@@ -99,7 +95,7 @@ export function checkLoginQrCodeStatus(
 }
 
 // 刷新登录
-export function refreshCookie() {
+export function refreshCookie(): Promise<RefreshCookieResponse> {
   return request({
     url: '/login/refresh',
     method: 'post',
diff --git a/packages/web/api/hooks/useTracks.ts b/packages/web/api/hooks/useTracks.ts
index 66abe1f..8ef6418 100644
--- a/packages/web/api/hooks/useTracks.ts
+++ b/packages/web/api/hooks/useTracks.ts
@@ -1,5 +1,5 @@
 import { fetchAudioSource, fetchTracks } from '@/web/api/track'
-import type {} from '@/web/api/track'
+import type { } from '@/web/api/track'
 import reactQueryClient from '@/web/utils/reactQueryClient'
 import { IpcChannels } from '@/shared/IpcChannels'
 import {
diff --git a/packages/web/api/hooks/useUser.ts b/packages/web/api/hooks/useUser.ts
index 9af9275..5344d42 100644
--- a/packages/web/api/hooks/useUser.ts
+++ b/packages/web/api/hooks/useUser.ts
@@ -1,10 +1,10 @@
-import { fetchUserAccount } from '@/web/api/user'
+import { dailyCheckIn, fetchUserAccount } from '@/web/api/user'
 import { UserApiNames, FetchUserAccountResponse } from '@/shared/api/User'
 import { CacheAPIs } from '@/shared/CacheAPIs'
 import { IpcChannels } from '@/shared/IpcChannels'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { logout as logoutAPI } from '../auth'
-import { removeAllCookies } from '@/web/utils/cookie'
+import { logout as logoutAPI, refreshCookie } from '../auth'
+import { removeAllCookies, setCookies } from '@/web/utils/cookie'
 import reactQueryClient from '@/web/utils/reactQueryClient'
 
 export default function useUser() {
@@ -31,6 +31,43 @@ export default function useUser() {
   )
 }
 
+export function useRefreshCookie() {
+  const user = useUser()
+  return useQuery(
+    [UserApiNames.RefreshCookie],
+    async () => {
+      const result = await refreshCookie()
+      if (result?.code === 200) {
+        setCookies(result.cookie)
+      }
+      return result
+    },
+    {
+      refetchInterval: 1000 * 60 * 30,
+      enabled: !!user.data?.profile?.userId,
+    }
+  )
+}
+
+export function useDailyCheckIn() {
+  const user = useUser()
+  return useQuery(
+    [UserApiNames.DailyCheckIn],
+    async () => {
+      try {
+        Promise.allSettled([dailyCheckIn(0), dailyCheckIn(1)])
+        return 'ok'
+      } catch (e: any) {
+        return 'error'
+      }
+    },
+    {
+      refetchInterval: 1000 * 60 * 30,
+      enabled: !!user.data?.profile?.userId,
+    }
+  )
+}
+
 export const useIsLoggedIn = () => {
   const { data, isLoading } = useUser()
   if (isLoading) return true
diff --git a/packages/web/api/playlist.ts b/packages/web/api/playlist.ts
index 307d0b0..4fb63a0 100644
--- a/packages/web/api/playlist.ts
+++ b/packages/web/api/playlist.ts
@@ -10,9 +10,7 @@ import {
 } from '@/shared/api/Playlists'
 
 // 歌单详情
-export function fetchPlaylist(
-  params: FetchPlaylistParams
-): Promise<FetchPlaylistResponse> {
+export function fetchPlaylist(params: FetchPlaylistParams): Promise<FetchPlaylistResponse> {
   if (!params.s) params.s = 0 // 网易云默认返回8个收藏者，这里设置为0，减少返回的JSON体积
   return request({
     url: '/playlist/detail',
@@ -46,9 +44,7 @@ export function fetchDailyRecommendPlaylists(): Promise<FetchDailyRecommendPlayl
   })
 }
 
-export function likeAPlaylist(
-  params: LikeAPlaylistParams
-): Promise<LikeAPlaylistResponse> {
+export function likeAPlaylist(params: LikeAPlaylistParams): Promise<LikeAPlaylistResponse> {
   return request({
     url: '/playlist/subscribe',
     method: 'post',
diff --git a/packages/web/api/user.ts b/packages/web/api/user.ts
index 24a10dd..b4872ff 100644
--- a/packages/web/api/user.ts
+++ b/packages/web/api/user.ts
@@ -12,14 +12,10 @@ import {
   FetchListenedRecordsResponse,
   FetchUserVideosResponse,
   FetchUserVideosParams,
+  DailyCheckInResponse,
 } from '@/shared/api/User'
 
-/**
- * 获取用户详情
- * 说明 : 登录后调用此接口 , 传入用户 id, 可以获取用户详情
- * - uid : 用户 id
- * @param {number} uid
- */
+// 获取用户详情
 export function userDetail(uid: number) {
   return request({
     url: '/user/detail',
@@ -53,6 +49,7 @@ export function fetchUserPlaylists(
   })
 }
 
+// 获取用户收藏的歌曲ID列表
 export function fetchUserLikedTracksIDs(
   params: FetchUserLikedTracksIDsParams
 ): Promise<FetchUserLikedTracksIDsResponse> {
@@ -102,9 +99,9 @@ export function fetchListenedRecords(
  * -  type: 签到类型 , 默认 0, 其中 0 为安卓端签到 ,1 为 web/PC 签到
  * @param {number} type
  */
-export function dailySignin(type = 0) {
+export function dailyCheckIn(type = 0): Promise<DailyCheckInResponse> {
   return request({
-    url: '/daily_signin',
+    url: '/daily/signin',
     method: 'post',
     params: {
       type,
@@ -113,9 +110,7 @@ export function dailySignin(type = 0) {
   })
 }
 
-export function fetchUserAlbums(
-  params: FetchUserAlbumsParams
-): Promise<FetchUserAlbumsResponse> {
+export function fetchUserAlbums(params: FetchUserAlbumsParams): Promise<FetchUserAlbumsResponse> {
   return request({
     url: '/album/sublist',
     method: 'get',
diff --git a/packages/web/components/ContextMenus/MenuItem.tsx b/packages/web/components/ContextMenus/MenuItem.tsx
index feae4d9..f5a419d 100644
--- a/packages/web/components/ContextMenus/MenuItem.tsx
+++ b/packages/web/components/ContextMenus/MenuItem.tsx
@@ -96,6 +96,10 @@ const MenuItem = ({
                 `
               )}
             ></div>
+
+            {/* 增加三角形，避免斜着移动到submenu时意外关闭菜单 */}
+            <div className='absolute -right-8 -bottom-6 h-12 w-12 rotate-45'></div>
+            <div className='absolute -right-8 -top-6 h-12 w-12 rotate-45'></div>
           </>
         )}
       </div>
diff --git a/packages/web/components/CoverRow.tsx b/packages/web/components/CoverRow.tsx
index e37a365..35e1a8b 100644
--- a/packages/web/components/CoverRow.tsx
+++ b/packages/web/components/CoverRow.tsx
@@ -73,13 +73,21 @@ const Playlist = ({ playlist }: { playlist: Playlist }) => {
   }, [playlist.id])
 
   return (
-    <Image
-      onClick={goTo}
-      key={playlist.id}
-      src={resizeImage(playlist.coverImgUrl || playlist?.picUrl || '', 'md')}
-      className='aspect-square rounded-24'
-      onMouseOver={prefetch}
-    />
+    <div className='group relative'>
+      <Image
+        onClick={goTo}
+        key={playlist.id}
+        src={resizeImage(playlist.coverImgUrl || playlist?.picUrl || '', 'md')}
+        className='aspect-square rounded-24'
+        onMouseOver={prefetch}
+      />
+      {/* Hover mask layer */}
+      <div className='pointer-events-none absolute inset-0 w-full bg-gradient-to-b from-transparent to-black opacity-0 transition-all duration-400 group-hover:opacity-100 '></div>
+      {/* Name */}
+      <div className='pointer-events-none absolute bottom-0 p-3 text-sm font-medium  text-neutral-300 opacity-0 transition-all duration-400 group-hover:opacity-100'>
+        {playlist.name}
+      </div>
+    </div>
   )
 }
 
diff --git a/packages/web/components/CoverRowVirtual.tsx b/packages/web/components/CoverRowVirtual.tsx
index 725d124..91bf8da 100644
--- a/packages/web/components/CoverRowVirtual.tsx
+++ b/packages/web/components/CoverRowVirtual.tsx
@@ -46,11 +46,7 @@ const CoverRow = ({
   return (
     <div className={className}>
       {/* Title */}
-      {title && (
-        <h4 className='mb-6 text-14 font-bold uppercase dark:text-neutral-300'>
-          {title}
-        </h4>
-      )}
+      {title && <h4 className='mb-6 text-14 font-bold uppercase dark:text-neutral-300'>{title}</h4>}
 
       <Virtuoso
         className='no-scrollbar'
@@ -66,20 +62,14 @@ const CoverRow = ({
           Footer: () => <div className='h-16'></div>,
         }}
         itemContent={(index, row) => (
-          <div
-            key={index}
-            className='grid w-full grid-cols-4 gap-4 lg:mb-6 lg:gap-6'
-          >
+          <div key={index} className='grid w-full grid-cols-4 gap-4 lg:mb-6 lg:gap-6'>
             {row.map((item: Item) => (
               <img
                 onClick={() => goTo(item.id)}
                 key={item.id}
                 alt={item.name}
                 src={resizeImage(
-                  item?.picUrl ||
-                    (item as Playlist)?.coverImgUrl ||
-                    item?.picUrl ||
-                    '',
+                  item?.picUrl || (item as Playlist)?.coverImgUrl || item?.picUrl || '',
                   'md'
                 )}
                 className='aspect-square w-full rounded-24'
diff --git a/packages/web/components/CoverWall.tsx b/packages/web/components/CoverWall.tsx
index 1e440aa..8a0ab26 100644
--- a/packages/web/components/CoverWall.tsx
+++ b/packages/web/components/CoverWall.tsx
@@ -22,11 +22,7 @@ const sizes = {
   },
 } as const
 
-const CoverWall = ({
-  albums,
-}: {
-  albums: { id: number; coverUrl: string; large: boolean }[]
-}) => {
+const CoverWall = ({ albums }: { albums: { id: number; coverUrl: string; large: boolean }[] }) => {
   const navigate = useNavigate()
   const breakpoint = useBreakpoint()
 
@@ -41,10 +37,7 @@ const CoverWall = ({
     >
       {albums.map(album => (
         <Image
-          src={resizeImage(
-            album.coverUrl,
-            sizes[album.large ? 'large' : 'small'][breakpoint]
-          )}
+          src={resizeImage(album.coverUrl, sizes[album.large ? 'large' : 'small'][breakpoint])}
           key={album.id}
           className={cx(
             'aspect-square h-full w-full rounded-20 lg:rounded-24',
diff --git a/packages/web/components/Devtool.tsx b/packages/web/components/Devtool.tsx
index 1c7a60a..cc084fe 100644
--- a/packages/web/components/Devtool.tsx
+++ b/packages/web/components/Devtool.tsx
@@ -1,27 +1,16 @@
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import useIsMobile from '@/web/hooks/useIsMobile'
 
 const Devtool = () => {
-  const isMobile = useIsMobile()
   return (
     <ReactQueryDevtools
       initialIsOpen={false}
       toggleButtonProps={{
         style: {
           position: 'fixed',
-          ...(isMobile
-            ? {
-                top: 0,
-                right: 0,
-                bottom: 'auto',
-                left: 'atuo',
-              }
-            : {
-                top: 36,
-                right: 148,
-                bottom: 'atuo',
-                left: 'auto',
-              }),
+          top: 36,
+          right: 148,
+          bottom: 'atuo',
+          left: 'auto',
         },
       }}
     />
diff --git a/packages/web/components/Dropdown.tsx b/packages/web/components/Dropdown.tsx
new file mode 100644
index 0000000..b2963c6
--- /dev/null
+++ b/packages/web/components/Dropdown.tsx
@@ -0,0 +1,45 @@
+import { css, cx } from '@emotion/css'
+import { motion } from 'framer-motion'
+
+export interface DropdownItem {
+  label: string
+  onClick: () => void
+}
+
+function Dropdown({ items, onClose }: { items: DropdownItem[]; onClose: () => void }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.96 }}
+      animate={{
+        opacity: 1,
+        scale: 1,
+        transition: {
+          duration: 0.1,
+        },
+      }}
+      exit={{ opacity: 0, scale: 0.96 }}
+      transition={{ duration: 0.2 }}
+      className={cx(
+        'origin-top rounded-12 border border-white/[.06] bg-gray-900/95 p-px py-2.5 shadow-xl outline outline-1 outline-black backdrop-blur-3xl',
+        css`
+          min-width: 200px;
+        `
+      )}
+    >
+      {items.map((item, index) => (
+        <div
+          className='active:bg-gray/50 relative flex w-full items-center justify-between whitespace-nowrap rounded-[5px] p-3 text-16 font-medium text-neutral-200 transition-colors duration-400 hover:bg-white/[.06]'
+          key={index}
+          onClick={() => {
+            item.onClick()
+            onClose()
+          }}
+        >
+          {item.label}
+        </div>
+      ))}
+    </motion.div>
+  )
+}
+
+export default Dropdown
diff --git a/packages/web/components/ErrorBoundary.tsx b/packages/web/components/ErrorBoundary.tsx
index 20fda06..ecb12ef 100644
--- a/packages/web/components/ErrorBoundary.tsx
+++ b/packages/web/components/ErrorBoundary.tsx
@@ -11,9 +11,7 @@ const ErrorBoundary = ({ children }: { children: ReactNode }) => {
         >
           <div className='app-region-no-drag'>
             <p>Something went wrong:</p>
-            <pre className='mb-2 text-18 dark:text-white'>
-              {error.toString()}
-            </pre>
+            <pre className='mb-2 text-18 dark:text-white'>{error.toString()}</pre>
             <div className='max-h-72 max-w-2xl overflow-scroll whitespace-pre-line rounded-12 border border-white/10 px-3 py-2 dark:text-white/50'>
               {componentStack?.trim()}
             </div>
diff --git a/packages/web/components/Image.tsx b/packages/web/components/Image.tsx
index bc95532..15eedfb 100644
--- a/packages/web/components/Image.tsx
+++ b/packages/web/components/Image.tsx
@@ -101,8 +101,7 @@ const ImageDesktop = ({
 }
 
 const ImageMobile = (props: Props) => {
-  const { src, className, srcSet, sizes, lazyLoad, onClick, onMouseOver } =
-    props
+  const { src, className, srcSet, sizes, lazyLoad, onClick, onMouseOver } = props
   return (
     <div
       onClick={onClick}
diff --git a/packages/web/components/Layout.tsx b/packages/web/components/Layout.tsx
index b3b85b0..49148f6 100644
--- a/packages/web/components/Layout.tsx
+++ b/packages/web/components/Layout.tsx
@@ -21,11 +21,8 @@ const Layout = () => {
     <div
       id='layout'
       className={cx(
-        'relative grid h-screen select-none overflow-hidden bg-white dark:bg-black',
-        window.env?.isElectron && !fullscreen && 'rounded-24',
-        css`
-          min-width: 720px;
-        `
+        'relative grid h-screen select-none overflow-hidden bg-black',
+        window.env?.isElectron && !fullscreen && 'rounded-24'
       )}
     >
       <BlurBackground />
@@ -47,7 +44,15 @@ const Layout = () => {
 
       <ContextMenus />
 
-      {/* {window.env?.isElectron && <Airplay />} */}
+      {/* Border */}
+      <div
+        className={cx(
+          'pointer-events-none fixed inset-0 z-50 rounded-24',
+          css`
+            box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.06);
+          `
+        )}
+      ></div>
     </div>
   )
 }
diff --git a/packages/web/components/Login/LoginWithQRCode.tsx b/packages/web/components/Login/LoginWithQRCode.tsx
index 9ce8ea3..d51a155 100644
--- a/packages/web/components/Login/LoginWithQRCode.tsx
+++ b/packages/web/components/Login/LoginWithQRCode.tsx
@@ -94,10 +94,7 @@ const LoginWithQRCode = () => {
   )
 
   const text = useMemo(
-    () =>
-      key?.data?.unikey
-        ? `https://music.163.com/login?codekey=${key.data.unikey}`
-        : '',
+    () => (key?.data?.unikey ? `https://music.163.com/login?codekey=${key.data.unikey}` : ''),
     [key?.data?.unikey]
   )
 
diff --git a/packages/web/components/NowPlaying/Controls.tsx b/packages/web/components/NowPlaying/Controls.tsx
index d2d8b93..1eb0939 100644
--- a/packages/web/components/NowPlaying/Controls.tsx
+++ b/packages/web/components/NowPlaying/Controls.tsx
@@ -6,9 +6,7 @@ import { MotionConfig, motion } from 'framer-motion'
 import { useSnapshot } from 'valtio'
 import Icon from '../Icon'
 import { State as PlayerState } from '@/web/utils/player'
-import useUserLikedTracksIDs, {
-  useMutationLikeATrack,
-} from '@/web/api/hooks/useUserLikedTracksIDs'
+import useUserLikedTracksIDs, { useMutationLikeATrack } from '@/web/api/hooks/useUserLikedTracksIDs'
 
 const LikeButton = () => {
   const { track } = useSnapshot(player)
@@ -38,9 +36,7 @@ const Controls = () => {
       <motion.div
         className={cx(
           'fixed bottom-0 right-0 flex',
-          mini
-            ? 'flex-col items-center justify-between'
-            : 'items-center justify-between',
+          mini ? 'flex-col items-center justify-between' : 'items-center justify-between',
           mini
             ? css`
                 right: 24px;
@@ -85,11 +81,7 @@ const Controls = () => {
             className='rounded-full bg-black/10 p-2.5 transition-colors duration-400 dark:bg-white/10 hover:dark:bg-white/20'
           >
             <Icon
-              name={
-                [PlayerState.Playing, PlayerState.Loading].includes(state)
-                  ? 'pause'
-                  : 'play'
-              }
+              name={[PlayerState.Playing, PlayerState.Loading].includes(state) ? 'pause' : 'play'}
               className='h-6 w-6 '
             />
           </motion.button>
diff --git a/packages/web/components/NowPlaying/NowPlaying.tsx b/packages/web/components/NowPlaying/NowPlaying.tsx
index 7a51c71..9341445 100644
--- a/packages/web/components/NowPlaying/NowPlaying.tsx
+++ b/packages/web/components/NowPlaying/NowPlaying.tsx
@@ -7,6 +7,7 @@ import persistedUiStates from '@/web/states/persistedUiStates'
 import Controls from './Controls'
 import Cover from './Cover'
 import Progress from './Progress'
+import { ease } from '@/web/utils/const'
 
 const NowPlaying = () => {
   const { track } = useSnapshot(player)
@@ -21,6 +22,7 @@ const NowPlaying = () => {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
+            transition={{ ease, duration: 0.4 }}
             className={cx(
               'relative flex aspect-square h-full w-full flex-col justify-end overflow-hidden rounded-24 border',
               css`
diff --git a/packages/web/components/Player.tsx b/packages/web/components/Player.tsx
index 8bd9703..020b2f1 100644
--- a/packages/web/components/Player.tsx
+++ b/packages/web/components/Player.tsx
@@ -25,6 +25,7 @@ const Player = () => {
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
+              transition={{ ease, duration: 0.4 }}
             >
               <PlayingNext />
             </motion.div>
diff --git a/packages/web/components/PlayerMobile.tsx b/packages/web/components/PlayerMobile.tsx
index 690e378..fca5321 100644
--- a/packages/web/components/PlayerMobile.tsx
+++ b/packages/web/components/PlayerMobile.tsx
@@ -8,9 +8,7 @@ import { resizeImage } from '@/web/utils/common'
 import { motion, PanInfo } from 'framer-motion'
 import { useLockBodyScroll } from 'react-use'
 import { useState } from 'react'
-import useUserLikedTracksIDs, {
-  useMutationLikeATrack,
-} from '@/web/api/hooks/useUserLikedTracksIDs'
+import useUserLikedTracksIDs, { useMutationLikeATrack } from '@/web/api/hooks/useUserLikedTracksIDs'
 import uiStates from '@/web/states/uiStates'
 import { ease } from '@/web/utils/const'
 
@@ -27,10 +25,7 @@ const LikeButton = () => {
       className='flex h-full items-center'
       onClick={() => track?.id && likeATrack.mutateAsync(track.id)}
     >
-      <Icon
-        name={isLiked ? 'heart' : 'heart-outline'}
-        className='h-7 w-7 text-white/10'
-      />
+      <Icon name={isLiked ? 'heart' : 'heart-outline'} className='h-7 w-7 text-white/10' />
     </button>
   )
 }
@@ -42,10 +37,7 @@ const PlayerMobile = () => {
   useLockBodyScroll(locked)
   const { mobileShowPlayingNext } = useSnapshot(uiStates)
 
-  const onDragEnd = (
-    event: MouseEvent | TouchEvent | PointerEvent,
-    info: PanInfo
-  ) => {
+  const onDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
     console.log(JSON.stringify(info))
     const { x, y } = info.offset
     const offset = 100
@@ -107,9 +99,7 @@ const PlayerMobile = () => {
           className='flex h-full flex-grow items-center '
         >
           <div className='flex-shrink-0'>
-            <div className='line-clamp-1 text-14 font-bold text-white'>
-              {track?.name}
-            </div>
+            <div className='line-clamp-1 text-14 font-bold text-white'>{track?.name}</div>
             <div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
               {track?.ar?.map(a => a.name).join(', ')}
             </div>
@@ -143,10 +133,7 @@ const PlayerMobile = () => {
         onClick={() => player.playOrPause()}
         className='ml-2.5 flex items-center justify-center rounded-full bg-white/20 p-2.5'
       >
-        <Icon
-          name={state === 'playing' ? 'pause' : 'play'}
-          className='h-6 w-6 text-white/80'
-        />
+        <Icon name={state === 'playing' ? 'pause' : 'play'} className='h-6 w-6 text-white/80' />
       </button>
     </div>
   )
diff --git a/packages/web/components/PlayingNextMobile.tsx b/packages/web/components/PlayingNextMobile.tsx
index 6d7354c..357eea5 100644
--- a/packages/web/components/PlayingNextMobile.tsx
+++ b/packages/web/components/PlayingNextMobile.tsx
@@ -67,10 +67,7 @@ const PlayingNextMobile = () => {
               `
             )}
           >
-            <Icon
-              name='player-handler'
-              className='mb-5 h-2.5 rotate-180 text-brand-700'
-            />
+            <Icon name='player-handler' className='mb-5 h-2.5 rotate-180 text-brand-700' />
           </motion.div>
 
           {/* List */}
diff --git a/packages/web/components/Router.tsx b/packages/web/components/Router.tsx
index dc63610..321eaf6 100644
--- a/packages/web/components/Router.tsx
+++ b/packages/web/components/Router.tsx
@@ -1,21 +1,17 @@
 import { Route, Routes, useLocation } from 'react-router-dom'
 import { AnimatePresence } from 'framer-motion'
-import React, { ReactNode, Suspense } from 'react'
+import React, { lazy, Suspense } from 'react'
 import VideoPlayer from './VideoPlayer'
 
-const My = React.lazy(() => import('@/web/pages/My'))
-const Discover = React.lazy(() => import('@/web/pages/Discover'))
-const Browse = React.lazy(() => import('@/web/pages/Browse'))
-const Album = React.lazy(() => import('@/web/pages/Album'))
-const Playlist = React.lazy(() => import('@/web/pages/Playlist'))
-const Artist = React.lazy(() => import('@/web/pages/Artist'))
-const Lyrics = React.lazy(() => import('@/web/pages/Lyrics'))
-const Search = React.lazy(() => import('@/web/pages/Search'))
-const Settings = React.lazy(() => import('@/web/pages/Settings'))
-
-const lazy = (component: ReactNode) => {
-  return <Suspense>{component}</Suspense>
-}
+const My = lazy(() => import('@/web/pages/My'))
+const Discover = lazy(() => import('@/web/pages/Discover'))
+const Browse = lazy(() => import('@/web/pages/Browse'))
+const Album = lazy(() => import('@/web/pages/Album'))
+const Playlist = lazy(() => import('@/web/pages/Playlist'))
+const Artist = lazy(() => import('@/web/pages/Artist'))
+const Lyrics = lazy(() => import('@/web/pages/Lyrics'))
+const Search = lazy(() => import('@/web/pages/Search'))
+const Settings = lazy(() => import('@/web/pages/Settings'))
 
 const Router = () => {
   const location = useLocation()
@@ -24,16 +20,16 @@ const Router = () => {
     <AnimatePresence mode='wait'>
       <VideoPlayer />
       <Routes location={location} key={location.pathname}>
-        <Route path='/' element={lazy(<My />)} />
-        <Route path='/discover' element={lazy(<Discover />)} />
-        <Route path='/browse' element={lazy(<Browse />)} />
-        <Route path='/album/:id' element={lazy(<Album />)} />
-        <Route path='/playlist/:id' element={lazy(<Playlist />)} />
-        <Route path='/artist/:id' element={lazy(<Artist />)} />
-        <Route path='/settings' element={lazy(<Settings />)} />
-        <Route path='/lyrics' element={lazy(<Lyrics />)} />
-        <Route path='/search/:keywords' element={lazy(<Search />)}>
-          <Route path=':type' element={lazy(<Search />)} />
+        <Route path='/' element={<My />} />
+        <Route path='/discover' element={<Discover />} />
+        <Route path='/browse' element={<Browse />} />
+        <Route path='/album/:id' element={<Album />} />
+        <Route path='/playlist/:id' element={<Playlist />} />
+        <Route path='/artist/:id' element={<Artist />} />
+        <Route path='/settings' element={<Settings />} />
+        <Route path='/lyrics' element={<Lyrics />} />
+        <Route path='/search/:keywords' element={<Search />}>
+          <Route path=':type' element={<Search />} />
         </Route>
       </Routes>
     </AnimatePresence>
diff --git a/packages/web/components/Slider.tsx b/packages/web/components/Slider.tsx
index bbf7cc1..bcfad9e 100644
--- a/packages/web/components/Slider.tsx
+++ b/packages/web/components/Slider.tsx
@@ -23,8 +23,7 @@ const Slider = ({
   const [isDragging, setIsDragging] = useState(false)
   const [draggingValue, setDraggingValue] = useState(value)
   const memoedValue = useMemo(
-    () =>
-      isDragging && onlyCallOnChangeAfterDragEnded ? draggingValue : value,
+    () => (isDragging && onlyCallOnChangeAfterDragEnded ? draggingValue : value),
     [isDragging, draggingValue, value, onlyCallOnChangeAfterDragEnded]
   )
 
@@ -50,8 +49,7 @@ const Slider = ({
    * Handle slider click event
    */
   const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) =>
-      onChange(getNewValue({ x: e.clientX, y: e.clientY })),
+    (e: React.MouseEvent<HTMLDivElement>) => onChange(getNewValue({ x: e.clientX, y: e.clientY })),
     [getNewValue, onChange]
   )
 
@@ -69,22 +67,14 @@ const Slider = ({
     const handlePointerMove = (e: { clientX: number; clientY: number }) => {
       if (!isDragging) return
       const newValue = getNewValue({ x: e.clientX, y: e.clientY })
-      onlyCallOnChangeAfterDragEnded
-        ? setDraggingValue(newValue)
-        : onChange(newValue)
+      onlyCallOnChangeAfterDragEnded ? setDraggingValue(newValue) : onChange(newValue)
     }
     document.addEventListener('pointermove', handlePointerMove)
 
     return () => {
       document.removeEventListener('pointermove', handlePointerMove)
     }
-  }, [
-    isDragging,
-    onChange,
-    setDraggingValue,
-    onlyCallOnChangeAfterDragEnded,
-    getNewValue,
-  ])
+  }, [isDragging, onChange, setDraggingValue, onlyCallOnChangeAfterDragEnded, getNewValue])
 
   /**
    * Handle pointer up events
@@ -102,28 +92,18 @@ const Slider = ({
     return () => {
       document.removeEventListener('pointerup', handlePointerUp)
     }
-  }, [
-    isDragging,
-    setIsDragging,
-    onlyCallOnChangeAfterDragEnded,
-    draggingValue,
-    onChange,
-  ])
+  }, [isDragging, setIsDragging, onlyCallOnChangeAfterDragEnded, draggingValue, onChange])
 
   /**
    * Track and thumb styles
    */
   const usedTrackStyle = useMemo(() => {
     const percentage = `${(memoedValue / max) * 100}%`
-    return orientation === 'horizontal'
-      ? { width: percentage }
-      : { height: percentage }
+    return orientation === 'horizontal' ? { width: percentage } : { height: percentage }
   }, [max, memoedValue, orientation])
   const thumbStyle = useMemo(() => {
     const percentage = `${(memoedValue / max) * 100}%`
-    return orientation === 'horizontal'
-      ? { left: percentage }
-      : { bottom: percentage }
+    return orientation === 'horizontal' ? { left: percentage } : { bottom: percentage }
   }, [max, memoedValue, orientation])
 
   return (
@@ -159,9 +139,7 @@ const Slider = ({
       <div
         className={cx(
           'absolute flex h-2 w-2 items-center justify-center rounded-full bg-black bg-opacity-20 transition-opacity dark:bg-white',
-          isDragging || alwaysShowThumb
-            ? 'opacity-100'
-            : 'opacity-0 group-hover:opacity-100',
+          isDragging || alwaysShowThumb ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
           orientation === 'horizontal' && '-translate-x-1',
           orientation === 'vertical' && 'translate-y-1'
         )}
diff --git a/packages/web/components/TitleBar.tsx b/packages/web/components/TitleBar.tsx
index f2bff79..6bb4914 100644
--- a/packages/web/components/TitleBar.tsx
+++ b/packages/web/components/TitleBar.tsx
@@ -3,12 +3,14 @@ import { IpcChannels } from '@/shared/IpcChannels'
 import useIpcRenderer from '@/web/hooks/useIpcRenderer'
 import { useState } from 'react'
 import { css, cx } from '@emotion/css'
+import uiStates from '../states/uiStates'
 
 const Controls = () => {
   const [isMaximized, setIsMaximized] = useState(false)
 
   useIpcRenderer(IpcChannels.IsMaximized, (e, value) => {
     setIsMaximized(value)
+    uiStates.fullscreen = value
   })
 
   const minimize = () => {
@@ -38,10 +40,7 @@ const Controls = () => {
         <Icon className='h-3 w-3' name='windows-minimize' />
       </button>
       <button onClick={maxRestore} className={classNames}>
-        <Icon
-          className='h-3 w-3'
-          name={isMaximized ? 'windows-un-maximize' : 'windows-maximize'}
-        />
+        <Icon className='h-3 w-3' name={isMaximized ? 'windows-un-maximize' : 'windows-maximize'} />
       </button>
       <button
         onClick={close}
diff --git a/packages/web/components/Topbar/Avatar.tsx b/packages/web/components/Topbar/Avatar.tsx
index f0062b7..62298bb 100644
--- a/packages/web/components/Topbar/Avatar.tsx
+++ b/packages/web/components/Topbar/Avatar.tsx
@@ -1,7 +1,11 @@
 import { css, cx } from '@emotion/css'
 import Icon from '../Icon'
 import { resizeImage } from '@/web/utils/common'
-import useUser, { useMutationLogout } from '@/web/api/hooks/useUser'
+import useUser, {
+  useDailyCheckIn,
+  useMutationLogout,
+  useRefreshCookie,
+} from '@/web/api/hooks/useUser'
 import uiStates from '@/web/states/uiStates'
 import { useRef, useState } from 'react'
 import BasicContextMenu from '../ContextMenus/BasicContextMenu'
@@ -15,6 +19,9 @@ const Avatar = ({ className }: { className?: string }) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
 
+  useRefreshCookie()
+  useDailyCheckIn()
+
   const avatarUrl = user?.profile?.avatarUrl
     ? resizeImage(user?.profile?.avatarUrl ?? '', 'sm')
     : ''
diff --git a/packages/web/components/TrafficLight.tsx b/packages/web/components/TrafficLight.tsx
index 09f9414..46b8aed 100644
--- a/packages/web/components/TrafficLight.tsx
+++ b/packages/web/components/TrafficLight.tsx
@@ -8,8 +8,7 @@ const TrafficLight = () => {
     return <></>
   }
 
-  const className =
-    'mr-2 h-3 w-3 rounded-full last-of-type:mr-0 dark:bg-white/20'
+  const className = 'mr-2 h-3 w-3 rounded-full last-of-type:mr-0 dark:bg-white/20'
   return (
     <div className='flex'>
       <div className={className}></div>
diff --git a/packages/web/components/Wave.tsx b/packages/web/components/Wave.tsx
index 70f13bd..37848a1 100644
--- a/packages/web/components/Wave.tsx
+++ b/packages/web/components/Wave.tsx
@@ -13,7 +13,7 @@ const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
 
 const Wave = ({ playing }: { playing: boolean }) => {
   return (
-    <div className='grid h-3 grid-cols-5 items-end gap-0.5'>
+    <div className='grid h-3 flex-shrink-0 grid-cols-5 items-end gap-0.5'>
       {[...new Array(5).keys()].map(i => (
         <div
           key={i}
diff --git a/packages/web/global.d.ts b/packages/web/global.d.ts
index d7799f3..2b57112 100644
--- a/packages/web/global.d.ts
+++ b/packages/web/global.d.ts
@@ -14,16 +14,10 @@ declare global {
         channel: T,
         params?: IpcChannelsParams[T]
       ) => Promise<IpcChannelsReturns[T]>
-      send: <T extends keyof IpcChannelsParams>(
-        channel: T,
-        params?: IpcChannelsParams[T]
-      ) => void
+      send: <T extends keyof IpcChannelsParams>(channel: T, params?: IpcChannelsParams[T]) => void
       on: <T extends keyof IpcChannelsParams>(
         channel: T,
-        listener: (
-          event: Electron.IpcRendererEvent,
-          value: IpcChannelsReturns[T]
-        ) => void
+        listener: (event: Electron.IpcRendererEvent, value: IpcChannelsReturns[T]) => void
       ) => void
     }
     env?: {
diff --git a/packages/web/hooks/useIntersectionObserver.ts b/packages/web/hooks/useIntersectionObserver.ts
index f0d8f03..c76f867 100644
--- a/packages/web/hooks/useIntersectionObserver.ts
+++ b/packages/web/hooks/useIntersectionObserver.ts
@@ -1,15 +1,11 @@
 import { useState, useEffect, RefObject } from 'react'
 
-const useIntersectionObserver = (
-  element: RefObject<Element>
-): { onScreen: boolean } => {
+const useIntersectionObserver = (element: RefObject<Element>): { onScreen: boolean } => {
   const [onScreen, setOnScreen] = useState(false)
 
   useEffect(() => {
     if (element.current) {
-      const observer = new IntersectionObserver(([entry]) =>
-        setOnScreen(entry.isIntersecting)
-      )
+      const observer = new IntersectionObserver(([entry]) => setOnScreen(entry.isIntersecting))
       observer.observe(element.current)
       return () => {
         observer.disconnect()
diff --git a/packages/web/hooks/useScroll.ts b/packages/web/hooks/useScroll.ts
index a9af472..00bfd85 100644
--- a/packages/web/hooks/useScroll.ts
+++ b/packages/web/hooks/useScroll.ts
@@ -43,13 +43,10 @@ const useScroll = (
 
       const arrivedState: ArrivedState = {
         left: target.scrollLeft <= 0 + (offset?.left || 0),
-        right:
-          target.scrollLeft + target.clientWidth >=
-          target.scrollWidth - (offset?.right || 0),
+        right: target.scrollLeft + target.clientWidth >= target.scrollWidth - (offset?.right || 0),
         top: target.scrollTop <= 0 + (offset?.top || 0),
         bottom:
-          target.scrollTop + target.clientHeight >=
-          target.scrollHeight - (offset?.bottom || 0),
+          target.scrollTop + target.clientHeight >= target.scrollHeight - (offset?.bottom || 0),
       }
 
       setScroll({
@@ -59,9 +56,7 @@ const useScroll = (
       })
     }
 
-    const readHandleScroll = throttle
-      ? lodashThrottle(handleScroll, throttle)
-      : handleScroll
+    const readHandleScroll = throttle ? lodashThrottle(handleScroll, throttle) : handleScroll
 
     const element = 'current' in ref ? ref?.current : ref
     element?.addEventListener('scroll', readHandleScroll)
diff --git a/packages/web/i18n/locales/en-us.json b/packages/web/i18n/locales/en-us.json
index 233db5a..9570ab7 100644
--- a/packages/web/i18n/locales/en-us.json
+++ b/packages/web/i18n/locales/en-us.json
@@ -68,14 +68,15 @@
     "general": "General",
     "appearance": "Appearance",
     "player": "Player",
-    "lyrics": "Lyrics",
     "lab": "Lab",
     "general-choose-language": "Choose Language",
-    "player-youtube-unlock": "YouTube Unlock"
+    "player-youtube-unlock": "YouTube Unlock",
+    "player-find-alternative-track-on-youtube-if-not-available-on-netease": "Find alternative track on YouTube if not available on NetEase.",
+    "about": "About"
   },
   "context-menu": {
     "share": "Share",
-    "copy-netease-link": "Copy Netease Link",
+    "copy-netease-link": "Copy NetEase Link",
     "add-to-playlist": "Add to playlist",
     "add-to-liked-tracks": "Add to Liked Tracks",
     "go-to-album": "Go to album",
@@ -94,11 +95,5 @@
     "listen": "Listen",
     "latest-releases": "Latest Releases",
     "popular": "Popular"
-  },
-  "menu-bar": {
-    "discover": "DISCOVER",
-    "explore": "EXPLORE",
-    "lyrics": "LYRICS",
-    "my-music": "MY MUSIC"
   }
 }
diff --git a/packages/web/i18n/locales/zh-cn.json b/packages/web/i18n/locales/zh-cn.json
index 77e0935..04533d5 100644
--- a/packages/web/i18n/locales/zh-cn.json
+++ b/packages/web/i18n/locales/zh-cn.json
@@ -68,9 +68,11 @@
     "appearance": "外观",
     "general": "通用",
     "lab": "实验室",
-    "lyrics": "歌词",
     "player": "播放",
-    "general-choose-language": "选择语言"
+    "general-choose-language": "选择语言",
+    "player-find-alternative-track-on-youtube-if-not-available-on-netease": "当播放的歌曲无版权或无法播放时，自动从 YouTube 寻找替代音频。",
+    "player-youtube-unlock": "YouTube 解锁",
+    "about": "关于"
   },
   "context-menu": {
     "share": "分享",
@@ -93,11 +95,5 @@
     "listen": "播放",
     "latest-releases": "最新发行",
     "popular": "热门歌曲"
-  },
-  "menu-bar": {
-    "discover": "发现",
-    "explore": "浏览",
-    "lyrics": "歌词",
-    "my-music": "我的"
   }
 }
diff --git a/packages/web/index.html b/packages/web/index.html
index 4ee5a23..1c3c776 100644
--- a/packages/web/index.html
+++ b/packages/web/index.html
@@ -1,22 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/public/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="script-src 'self' 'unsafe-inline' www.googletagmanager.com blob:;"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <title>R3PLAY</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/src/public/favicon.svg" />
-  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-  <meta http-equiv="Content-Security-Policy"
-    content="script-src 'self' 'unsafe-inline' www.googletagmanager.com blob:;" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-  <title>R3PLAY</title>
-</head>
-
-<body>
-  <div id="root">
-    <div id="placeholder" style="background-color: #000; position: fixed; inset: 0; border-radius: 24px;"></div>
-  </div>
-  <script type="module" src="/main.tsx"></script>
-</body>
-
+  <body>
+    <div id="root">
+      <div
+        id="placeholder"
+        style="background-color: #000; position: fixed; inset: 0; border-radius: 24px"
+      ></div>
+    </div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
 </html>
diff --git a/packages/web/ipcRenderer.ts b/packages/web/ipcRenderer.ts
index b9bbb16..bede1f7 100644
--- a/packages/web/ipcRenderer.ts
+++ b/packages/web/ipcRenderer.ts
@@ -1,9 +1,5 @@
 import player from '@/web/states/player'
-import {
-  IpcChannels,
-  IpcChannelsReturns,
-  IpcChannelsParams,
-} from '@/shared/IpcChannels'
+import { IpcChannels, IpcChannelsReturns, IpcChannelsParams } from '@/shared/IpcChannels'
 import uiStates from './states/uiStates'
 
 const on = <T extends keyof IpcChannelsParams>(
diff --git a/packages/web/package.json b/packages/web/package.json
index e370cf0..29ef16e 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -13,7 +13,7 @@
     "analyze:css": "npx windicss-analysis",
     "analyze:js": "npm run build && open-cli bundle-stats-renderer.html",
     "generate:accent-color-css": "node ./scripts/generate.accent.color.css.js",
-    "api:netease": "npx NeteaseCloudMusicApi@latest"
+    "api:netease": "PORT=30001 npx NeteaseCloudMusicApi@latest"
   },
   "engines": {
     "node": ">=16.0.0"
@@ -23,15 +23,15 @@
     "@sentry/react": "^7.29.0",
     "@sentry/tracing": "^7.29.0",
     "@tailwindcss/container-queries": "^0.1.0",
-    "@tanstack/react-query": "^4.20.9",
-    "@tanstack/react-query-devtools": "^4.20.9",
+    "@tanstack/react-query": "^4.26.1",
+    "@tanstack/react-query-devtools": "^4.26.1",
     "ahooks": "^3.7.4",
     "axios": "^1.2.2",
     "color.js": "^1.2.0",
     "colord": "^2.9.3",
     "dayjs": "^1.11.7",
     "framer-motion": "^8.1.7",
-    "hls.js": "^1.2.9",
+    "hls.js": "^1.3.5",
     "howler": "^2.2.3",
     "i18next": "^22.4.9",
     "js-cookie": "^3.0.1",
@@ -58,7 +58,7 @@
     "@types/qrcode": "^1.4.2",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react-swc": "^3.0.1",
+    "@vitejs/plugin-react-swc": "^3.2.0",
     "@vitest/ui": "^0.26.3",
     "autoprefixer": "^10.4.13",
     "c8": "^7.12.0",
@@ -71,8 +71,8 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "tailwindcss": "^3.2.4",
     "typescript": "*",
-    "vite": "^4.0.4",
-    "vite-plugin-pwa": "^0.14.1",
+    "vite": "^4.2.0",
+    "vite-plugin-pwa": "^0.14.4",
     "vite-plugin-svg-icons": "^2.0.1",
     "vitest": "^0.26.3"
   }
diff --git a/packages/web/pages/Album/Header.tsx b/packages/web/pages/Album/Header.tsx
index bda78c4..298ee03 100644
--- a/packages/web/pages/Album/Header.tsx
+++ b/packages/web/pages/Album/Header.tsx
@@ -5,7 +5,7 @@ import TrackListHeader from '@/web/components/TrackListHeader'
 import player from '@/web/states/player'
 import { formatDuration } from '@/web/utils/common'
 import dayjs from 'dayjs'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import toast from 'react-hot-toast'
 import { useParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
@@ -68,18 +68,21 @@ const Header = () => {
     return !!userLikedAlbums?.data?.find(item => item.id === id)
   }, [params.id, userLikedAlbums?.data])
 
-  const onPlay = async (trackID: number | null = null) => {
-    if (!album?.id) {
-      toast('无法播放专辑，该专辑不存在')
-      return
-    }
-    player.playAlbum(album.id, trackID)
-  }
+  const onPlay = useCallback(
+    async (trackID: number | null = null) => {
+      if (!album?.id) {
+        toast('无法播放专辑，该专辑不存在')
+        return
+      }
+      player.playAlbum(album.id, trackID)
+    },
+    [album?.id]
+  )
 
   const likeAAlbum = useMutationLikeAAlbum()
-  const onLike = async () => {
+  const onLike = useCallback(async () => {
     likeAAlbum.mutateAsync(album?.id || Number(params.id))
-  }
+  }, [likeAAlbum.mutateAsync, album?.id, params.id])
 
   return (
     <TrackListHeader
diff --git a/packages/web/pages/Album/MoreByArtist.tsx b/packages/web/pages/Album/MoreByArtist.tsx
index 305b0c8..95c6105 100644
--- a/packages/web/pages/Album/MoreByArtist.tsx
+++ b/packages/web/pages/Album/MoreByArtist.tsx
@@ -14,12 +14,9 @@ const MoreByArtist = ({ album }: { album?: Album }) => {
     if (!albums) return []
     const allReleases = albums?.hotAlbums || []
     const filteredAlbums = allReleases.filter(
-      album =>
-        ['专辑', 'EP/Single', 'EP'].includes(album.type) && album.size > 1
-    )
-    const singles = allReleases.filter(
-      album => album.type === 'Single' || album.size === 1
+      album => ['专辑', 'EP/Single', 'EP'].includes(album.type) && album.size > 1
     )
+    const singles = allReleases.filter(album => album.type === 'Single' || album.size === 1)
 
     const qualifiedAlbums = [...filteredAlbums, ...singles]
 
@@ -41,10 +38,7 @@ const MoreByArtist = ({ album }: { album?: Album }) => {
       }
 
       // 去除 remix 专辑
-      if (
-        a.name.toLowerCase().includes('remix)') ||
-        a.name.toLowerCase().includes('remixes)')
-      ) {
+      if (a.name.toLowerCase().includes('remix)') || a.name.toLowerCase().includes('remixes)')) {
         return
       }
 
diff --git a/packages/web/pages/Artist/Header/Actions.tsx b/packages/web/pages/Artist/Header/Actions.tsx
index 1cce241..3bbf21c 100644
--- a/packages/web/pages/Artist/Header/Actions.tsx
+++ b/packages/web/pages/Artist/Header/Actions.tsx
@@ -1,11 +1,8 @@
-import useUserArtists, {
-  useMutationLikeAArtist,
-} from '@/web/api/hooks/useUserArtists'
+import useUserArtists, { useMutationLikeAArtist } from '@/web/api/hooks/useUserArtists'
 import Icon from '@/web/components/Icon'
 import { openContextMenu } from '@/web/states/contextMenus'
 import player from '@/web/states/player'
 import { cx } from '@emotion/css'
-import toast from 'react-hot-toast'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 
@@ -50,10 +47,7 @@ const Actions = ({ isLoading }: { isLoading: boolean }) => {
               : 'text-white/40 hover:text-white/70  hover:dark:bg-white/30 '
           )}
         >
-          <Icon
-            name={isLiked ? 'heart' : 'heart-outline'}
-            className='h-7 w-7'
-          />
+          <Icon name={isLiked ? 'heart' : 'heart-outline'} className='h-7 w-7' />
         </button>
       </div>
 
diff --git a/packages/web/pages/Artist/Header/ArtistInfo.tsx b/packages/web/pages/Artist/Header/ArtistInfo.tsx
index 6f691b6..0aef059 100644
--- a/packages/web/pages/Artist/Header/ArtistInfo.tsx
+++ b/packages/web/pages/Artist/Header/ArtistInfo.tsx
@@ -59,7 +59,7 @@ const ArtistInfo = ({ artist, isLoading }: { artist?: Artist; isLoading: boolean
             className={cx(
               'line-clamp-5 mt-6 text-14 font-bold text-transparent',
               css`
-                height: 86px;
+                min-height: 85px;
               `
             )}
           >
@@ -68,15 +68,14 @@ const ArtistInfo = ({ artist, isLoading }: { artist?: Artist; isLoading: boolean
         ) : (
           <div
             className={cx(
-              'line-clamp-5 mt-6 overflow-hidden whitespace-pre-wrap text-14 font-bold text-white/40 transition-colors duration-500 hover:text-white/60'
-              // css`
-              //   height: 86px;
-              // `
+              'line-clamp-5 mt-6 overflow-hidden whitespace-pre-wrap text-14 font-bold text-white/40 transition-colors duration-500 hover:text-white/60',
+              css`
+                height: 85px;
+              `
             )}
             onClick={() => setIsOpenDescription(true)}
-          >
-            {description}
-          </div>
+            dangerouslySetInnerHTML={{ __html: description }}
+          ></div>
         ))}
 
       <DescriptionViewer
diff --git a/packages/web/pages/Artist/Header/LatestRelease.tsx b/packages/web/pages/Artist/Header/LatestRelease.tsx
index 8e8c813..1916327 100644
--- a/packages/web/pages/Artist/Header/LatestRelease.tsx
+++ b/packages/web/pages/Artist/Header/LatestRelease.tsx
@@ -104,11 +104,7 @@ const LatestRelease = () => {
   return (
     <>
       {!isLoadingVideos && !isLoadingAlbums && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          className='mx-2.5 lg:mx-0'
-        >
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className='mx-2.5 lg:mx-0'>
           <div className='mb-3 mt-7 text-14 font-bold text-neutral-300'>
             {t`artist.latest-releases`}
           </div>
diff --git a/packages/web/pages/Artist/Popular.tsx b/packages/web/pages/Artist/Popular.tsx
index e4ae254..1d758b3 100644
--- a/packages/web/pages/Artist/Popular.tsx
+++ b/packages/web/pages/Artist/Popular.tsx
@@ -37,9 +37,7 @@ const Track = ({
         <div
           className={cx(
             'line-clamp-1 text-16 font-medium ',
-            isPlaying
-              ? 'text-brand-700'
-              : 'text-neutral-700 dark:text-neutral-200'
+            isPlaying ? 'text-brand-700' : 'text-neutral-700 dark:text-neutral-200'
           )}
         >
           {track?.name}
@@ -71,9 +69,7 @@ const Popular = () => {
 
   return (
     <div>
-      <div className='mb-4 text-12 font-medium uppercase text-neutral-300'>
-        {t`artist.popular`}
-      </div>
+      <div className='mb-4 text-12 font-medium uppercase text-neutral-300'>{t`artist.popular`}</div>
 
       <div className='grid grid-cols-3 grid-rows-3 gap-4 overflow-hidden'>
         {tracks?.slice(0, 9)?.map(t => (
diff --git a/packages/web/pages/Discover.tsx b/packages/web/pages/Discover.tsx
index 6cd5919..81478ac 100644
--- a/packages/web/pages/Discover.tsx
+++ b/packages/web/pages/Discover.tsx
@@ -1,9 +1,6 @@
 import CoverWall from '@/web/components/CoverWall'
 import PageTransition from '@/web/components/PageTransition'
-import {
-  fetchPlaylistWithReactQuery,
-  fetchFromCache,
-} from '@/web/api/hooks/usePlaylist'
+import { fetchPlaylistWithReactQuery, fetchFromCache } from '@/web/api/hooks/usePlaylist'
 import { fetchTracksWithReactQuery } from '@/web/api/hooks/useTracks'
 import { sampleSize } from 'lodash-es'
 import { FetchPlaylistResponse } from '@/shared/api/Playlists'
@@ -39,9 +36,7 @@ const getAlbumsFromAPI = async () => {
   )
 
   let ids: number[] = []
-  playlists.forEach(playlist =>
-    playlist?.playlist?.trackIds?.forEach(t => ids.push(t.id))
-  )
+  playlists.forEach(playlist => playlist?.playlist?.trackIds?.forEach(t => ids.push(t.id)))
   if (!ids.length) return []
   ids = sampleSize(ids, 100)
 
@@ -77,8 +72,7 @@ const Discover = () => {
   const { data: albums } = useQuery(
     ['DiscoveryAlbums'],
     async () => {
-      const albumsInLocalStorageTime =
-        localStorage.getItem('discoverAlbumsTime')
+      const albumsInLocalStorageTime = localStorage.getItem('discoverAlbumsTime')
       if (
         !albumsInLocalStorageTime ||
         Date.now() - Number(albumsInLocalStorageTime) > 1000 * 60 * 60 * 2 // 2小时刷新一次
diff --git a/packages/web/pages/My/Collections.tsx b/packages/web/pages/My/Collections.tsx
index 2696ed1..8f1993c 100644
--- a/packages/web/pages/My/Collections.tsx
+++ b/packages/web/pages/My/Collections.tsx
@@ -19,6 +19,7 @@ import VideoRow from '@/web/components/VideoRow'
 import useUserVideos from '@/web/api/hooks/useUserVideos'
 import persistedUiStates from '@/web/states/persistedUiStates'
 import settings from '@/web/states/settings'
+import useUser from '@/web/api/hooks/useUser'
 
 const collections = ['playlists', 'albums', 'artists', 'videos'] as const
 type Collection = typeof collections[number]
@@ -31,8 +32,37 @@ const Albums = () => {
 
 const Playlists = () => {
   const { data: playlists } = useUserPlaylists()
-  const p = useMemo(() => playlists?.playlist?.slice(1), [playlists])
-  return <CoverRow playlists={p} />
+  const user = useUser()
+  const myPlaylists = useMemo(
+    () => playlists?.playlist?.slice(1).filter(p => p.userId === user?.data?.account?.id),
+    [playlists, user]
+  )
+  const otherPlaylists = useMemo(
+    () => playlists?.playlist?.slice(1).filter(p => p.userId !== user?.data?.account?.id),
+    [playlists, user]
+  )
+  return (
+    <div>
+      {/* My playlists */}
+      {myPlaylists && (
+        <>
+          <div className='mb-4 mt-2 text-14 font-medium uppercase text-neutral-400'>
+            Created BY ME
+          </div>
+          <CoverRow playlists={myPlaylists} />
+        </>
+      )}
+      {/* Other playlists */}
+      {otherPlaylists && (
+        <>
+          <div className='mb-4 mt-8 text-14 font-medium uppercase text-neutral-400'>
+            Created BY OTHERS
+          </div>
+          <CoverRow playlists={otherPlaylists} />
+        </>
+      )}
+    </div>
+  )
 }
 
 const Artists = () => {
@@ -50,14 +80,14 @@ const CollectionTabs = ({ showBg }: { showBg: boolean }) => {
   const { displayPlaylistsFromNeteaseMusic } = useSnapshot(settings)
 
   const tabs: { id: Collection; name: string }[] = [
-    {
-      id: 'playlists',
-      name: t`common.playlist_other`,
-    },
     {
       id: 'albums',
       name: t`common.album_other`,
     },
+    {
+      id: 'playlists',
+      name: t`common.playlist_other`,
+    },
     {
       id: 'artists',
       name: t`common.artist_other`,
@@ -75,7 +105,7 @@ const CollectionTabs = ({ showBg }: { showBg: boolean }) => {
   }
 
   return (
-    <>
+    <div className='relative'>
       {/* Topbar background */}
       <AnimatePresence>
         {showBg && (
@@ -84,14 +114,14 @@ const CollectionTabs = ({ showBg }: { showBg: boolean }) => {
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             className={cx(
-              'pointer-events-none fixed top-0 right-0 left-10 z-10',
+              'pointer-events-none absolute right-0 left-0 z-10',
               css`
                 height: 230px;
                 background-repeat: repeat;
               `
             )}
             style={{
-              right: `${minimizePlayer ? 0 : playerWidth + 32}px`,
+              top: '-132px',
               backgroundImage: `url(${topbarBackground})`,
             }}
           ></motion.div>
@@ -115,7 +145,7 @@ const CollectionTabs = ({ showBg }: { showBg: boolean }) => {
           top: `${topbarHeight}px`,
         }}
       />
-    </>
+    </div>
   )
 }
 
@@ -131,7 +161,7 @@ const Collections = () => {
   }, 500)
 
   return (
-    <div>
+    <motion.div layout>
       <CollectionTabs showBg={isScrollReachBottom} />
       <div
         className={cx('no-scrollbar overflow-y-auto px-2.5 pt-16 pb-16 lg:px-0')}
@@ -146,7 +176,7 @@ const Collections = () => {
         {selectedTab === 'videos' && <Videos />}
       </div>
       <div ref={observePoint}></div>
-    </div>
+    </motion.div>
   )
 }
 
diff --git a/packages/web/pages/My/My.tsx b/packages/web/pages/My/My.tsx
index 081be0d..6a415c7 100644
--- a/packages/web/pages/My/My.tsx
+++ b/packages/web/pages/My/My.tsx
@@ -3,6 +3,7 @@ import PageTransition from '@/web/components/PageTransition'
 import RecentlyListened from './RecentlyListened'
 import Collections from './Collections'
 import { useIsLoggedIn } from '@/web/api/hooks/useUser'
+import { LayoutGroup, motion } from 'framer-motion'
 
 function PleaseLogin() {
   return <></>
@@ -13,11 +14,13 @@ const My = () => {
   return (
     <PageTransition>
       {isLoggedIn ? (
-        <div className='grid grid-cols-1 gap-10'>
-          <PlayLikedSongsCard />
-          <RecentlyListened />
-          <Collections />
-        </div>
+        <LayoutGroup>
+          <div className='grid grid-cols-1 gap-10'>
+            <PlayLikedSongsCard />
+            <RecentlyListened />
+            <Collections />
+          </div>
+        </LayoutGroup>
       ) : (
         <PleaseLogin />
       )}
diff --git a/packages/web/pages/My/PlayLikedSongsCard.tsx b/packages/web/pages/My/PlayLikedSongsCard.tsx
index 1b3acdd..37bba26 100644
--- a/packages/web/pages/My/PlayLikedSongsCard.tsx
+++ b/packages/web/pages/My/PlayLikedSongsCard.tsx
@@ -14,6 +14,7 @@ import { resizeImage } from '@/web/utils/common'
 import { breakpoint as bp } from '@/web/utils/const'
 import useUser from '@/web/api/hooks/useUser'
 import { useTranslation } from 'react-i18next'
+import { motion } from 'framer-motion'
 
 const Lyrics = ({ tracksIDs }: { tracksIDs: number[] }) => {
   const { t } = useTranslation()
@@ -104,7 +105,8 @@ const PlayLikedSongsCard = () => {
   }, [likedSongsPlaylist?.playlist?.tracks, sampledTracks])
 
   return (
-    <div
+    <motion.div
+      layout
       className={cx(
         'mx-2.5 flex flex-col justify-between rounded-24 p-8 dark:bg-white/10 lg:mx-0',
         css`
@@ -141,7 +143,7 @@ const PlayLikedSongsCard = () => {
           <Icon name='forward' className='h-7 w-7 ' />
         </button>
       </div>
-    </div>
+    </motion.div>
   )
 }
 
diff --git a/packages/web/pages/My/RecentlyListened.tsx b/packages/web/pages/My/RecentlyListened.tsx
index 7ecb387..82eeb41 100644
--- a/packages/web/pages/My/RecentlyListened.tsx
+++ b/packages/web/pages/My/RecentlyListened.tsx
@@ -1,13 +1,14 @@
 import useUserListenedRecords from '@/web/api/hooks/useUserListenedRecords'
 import useArtists from '@/web/api/hooks/useArtists'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import ArtistRow from '@/web/components/ArtistRow'
 import { useTranslation } from 'react-i18next'
+import { AnimatePresence, motion } from 'framer-motion'
 
 const RecentlyListened = () => {
   const { t } = useTranslation()
 
-  const { data: listenedRecords } = useUserListenedRecords({ type: 'week' })
+  const { data: listenedRecords, isLoading } = useUserListenedRecords({ type: 'week' })
   const recentListenedArtistsIDs = useMemo(() => {
     const artists: {
       id: number
@@ -31,10 +32,26 @@ const RecentlyListened = () => {
       .slice(0, 5)
       .map(artist => artist.id)
   }, [listenedRecords])
-  const { data: recentListenedArtists } = useArtists(recentListenedArtistsIDs)
-  const artist = useMemo(() => recentListenedArtists?.map(a => a.artist), [recentListenedArtists])
+  const { data: recentListenedArtists, isLoading: isLoadingArtistsDetail } =
+    useArtists(recentListenedArtistsIDs)
+  const artists = useMemo(() => recentListenedArtists?.map(a => a.artist), [recentListenedArtists])
 
-  return <ArtistRow artists={artist} placeholderRow={1} title={t`my.recently-listened`} />
+  const show = useMemo(() => {
+    if (listenedRecords?.weekData?.length === 0) return false
+    if (isLoading || isLoadingArtistsDetail) return true
+    if (artists?.length) return true
+    return false
+  }, [isLoading, artists, listenedRecords, isLoadingArtistsDetail])
+
+  return (
+    <AnimatePresence>
+      {show && (
+        <motion.div layout exit={{ opacity: 0 }} transition={{ duration: 0.2 }}>
+          <ArtistRow artists={artists} placeholderRow={1} title={t`my.recently-listened`} />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
 }
 
 export default RecentlyListened
diff --git a/packages/web/pages/Playlist/Header.tsx b/packages/web/pages/Playlist/Header.tsx
index ead0df4..608c57b 100644
--- a/packages/web/pages/Playlist/Header.tsx
+++ b/packages/web/pages/Playlist/Header.tsx
@@ -1,8 +1,6 @@
 import usePlaylist from '@/web/api/hooks/usePlaylist'
 import useUser from '@/web/api/hooks/useUser'
-import useUserPlaylists, {
-  useMutationLikeAPlaylist,
-} from '@/web/api/hooks/useUserPlaylists'
+import useUserPlaylists, { useMutationLikeAPlaylist } from '@/web/api/hooks/useUserPlaylists'
 import TrackListHeader from '@/web/components/TrackListHeader'
 import player from '@/web/states/player'
 import { formatDate } from '@/web/utils/common'
@@ -32,8 +30,7 @@ const Header = () => {
   const extraInfo = useMemo(() => {
     return (
       <>
-        Updated at {formatDate(playlist?.updateTime || 0, 'en')} ·{' '}
-        {playlist?.trackCount} tracks
+        Updated at {formatDate(playlist?.updateTime || 0, 'en')} · {playlist?.trackCount} tracks
       </>
     )
   }, [playlist])
@@ -64,8 +61,7 @@ const Header = () => {
         extraInfo,
         cover,
         isLiked,
-        onLike:
-          user?.account?.id === playlist?.creator?.userId ? undefined : onLike,
+        onLike: user?.account?.id === playlist?.creator?.userId ? undefined : onLike,
         onPlay,
       }}
     />
diff --git a/packages/web/pages/Playlist/Playlist.tsx b/packages/web/pages/Playlist/Playlist.tsx
index 3e3e597..e92fc97 100644
--- a/packages/web/pages/Playlist/Playlist.tsx
+++ b/packages/web/pages/Playlist/Playlist.tsx
@@ -4,6 +4,7 @@ import TrackList from './TrackList'
 import player from '@/web/states/player'
 import usePlaylist from '@/web/api/hooks/usePlaylist'
 import Header from './Header'
+import useTracks from '@/web/api/hooks/useTracks'
 
 const Playlist = () => {
   const params = useParams()
@@ -11,6 +12,13 @@ const Playlist = () => {
     id: Number(params.id),
   })
 
+  // TODO: 分页加载
+  const { data: playlistTracks } = useTracks({
+    ids: playlist?.playlist?.trackIds?.map(t => t.id) ?? [],
+  })
+
+  console.log(playlistTracks)
+
   const onPlay = async (trackID: number | null = null) => {
     await player.playPlaylist(playlist?.playlist?.id, trackID)
   }
@@ -20,7 +28,7 @@ const Playlist = () => {
       <Header />
       <div className='pb-10'>
         <TrackList
-          tracks={playlist?.playlist?.tracks ?? []}
+          tracks={playlistTracks?.songs ?? playlist?.playlist?.tracks ?? []}
           onPlay={onPlay}
           className='z-10 mt-10'
         />
diff --git a/packages/web/pages/Playlist/TrackList.tsx b/packages/web/pages/Playlist/TrackList.tsx
index 1be160e..ad65b5b 100644
--- a/packages/web/pages/Playlist/TrackList.tsx
+++ b/packages/web/pages/Playlist/TrackList.tsx
@@ -5,6 +5,7 @@ import player from '@/web/states/player'
 import { formatDuration, resizeImage } from '@/web/utils/common'
 import { State as PlayerState } from '@/web/utils/player'
 import { css, cx } from '@emotion/css'
+import { Fragment } from 'react'
 import { NavLink } from 'react-router-dom'
 import { useSnapshot } from 'valtio'
 
@@ -58,7 +59,17 @@ const Track = ({
             )}
           </div>
           <div className='line-clamp-1 mt-1 text-14 font-bold text-white/30'>
-            {track?.ar.map(a => a.name).join(', ')}
+            {track?.ar.map((a, index) => (
+              <Fragment key={a.id}>
+                {index > 0 && ', '}
+                <NavLink
+                  className='transition-all duration-300 hover:text-white/70'
+                  to={`/artist/${a.id}`}
+                >
+                  {a.name}
+                </NavLink>
+              </Fragment>
+            ))}
           </div>
         </div>
 
@@ -102,7 +113,7 @@ function TrackList({
   placeholderRows?: number
 }) {
   const { trackID, state } = useSnapshot(player)
-  const playingTrackIndex = tracks?.findIndex(track => track.id === trackID) ?? -1
+  const playingTrack = tracks?.find(track => track.id === trackID)
 
   const handleClick = (e: React.MouseEvent<HTMLElement>, trackID: number) => {
     if (isLoading) return
@@ -129,7 +140,7 @@ function TrackList({
           key={track.id}
           track={track}
           index={index}
-          playingTrackIndex={playingTrackIndex}
+          playingTrackID={playingTrack?.id || 0}
           state={state}
           handleClick={handleClick}
         />
diff --git a/packages/web/pages/Settings/Player.tsx b/packages/web/pages/Settings/Player.tsx
index 52c7193..7d66740 100644
--- a/packages/web/pages/Settings/Player.tsx
+++ b/packages/web/pages/Settings/Player.tsx
@@ -13,7 +13,7 @@ function Player() {
 }
 
 function FindTrackOnYouTube() {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
 
   const { enableFindTrackOnYouTube, httpProxyForYouTube } = useSnapshot(settings)
 
@@ -21,12 +21,18 @@ function FindTrackOnYouTube() {
     <div>
       <BlockTitle>{t`settings.player-youtube-unlock`}</BlockTitle>
       <BlockDescription>
-        Find alternative track on YouTube if not available on NetEase.
+        {t`settings.player-find-alternative-track-on-youtube-if-not-available-on-netease`}
+        {i18n.language === 'zh-CN' && (
+          <>
+            <br />
+            此功能需要开启 Clash for Windows 的 TUN Mode 或 ClashX Pro 的增强模式。
+          </>
+        )}
       </BlockDescription>
 
       {/* Switch */}
       <Option>
-        <OptionText>Enable YouTube Unlock </OptionText>
+        <OptionText>Enable YouTube Unlock</OptionText>
         <Switch
           enabled={enableFindTrackOnYouTube}
           onChange={value => (settings.enableFindTrackOnYouTube = value)}
diff --git a/packages/web/pages/Settings/Settings.tsx b/packages/web/pages/Settings/Settings.tsx
index f8383b7..c6ec0e3 100644
--- a/packages/web/pages/Settings/Settings.tsx
+++ b/packages/web/pages/Settings/Settings.tsx
@@ -1,7 +1,7 @@
 import useUser from '@/web/api/hooks/useUser'
 import Appearance from './Appearance'
 import { css, cx } from '@emotion/css'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import UserCard from './UserCard'
 import { useTranslation } from 'react-i18next'
 import { motion, useAnimationControls } from 'framer-motion'
@@ -10,7 +10,7 @@ import Player from './Player'
 import PageTransition from '@/web/components/PageTransition'
 import { ease } from '@/web/utils/const'
 
-export const categoryIds = ['general', 'appearance', 'player', 'lyrics', 'lab'] as const
+export const categoryIds = ['general', 'appearance', 'player', 'lab', 'about'] as const
 export type Category = typeof categoryIds[number]
 
 const Sidebar = ({
@@ -25,22 +25,22 @@ const Sidebar = ({
     { name: t`settings.general`, id: 'general' },
     { name: t`settings.appearance`, id: 'appearance' },
     { name: t`settings.player`, id: 'player' },
-    { name: t`settings.lyrics`, id: 'lyrics' },
     { name: t`settings.lab`, id: 'lab' },
+    { name: t`settings.about`, id: 'about' },
   ]
-  const animation = useAnimationControls()
 
-  const onClick = (categoryId: Category) => {
-    setActiveCategory(categoryId)
-    const index = categories.findIndex(category => category.id === categoryId)
-    animation.start({ y: index * 40 + 11.5 })
-  }
+  // Indicator animation
+  const indicatorAnimation = useAnimationControls()
+  useEffect(() => {
+    const index = categories.findIndex(category => category.id === activeCategory)
+    indicatorAnimation.start({ y: index * 40 + 11.5 })
+  }, [activeCategory])
 
   return (
     <div className='relative'>
       <motion.div
         initial={{ y: 11.5 }}
-        animate={animation}
+        animate={indicatorAnimation}
         transition={{ type: 'spring', duration: 0.6, bounce: 0.36 }}
         className='absolute top-0 left-3 mr-2 h-4 w-1 rounded-full bg-brand-700'
       ></motion.div>
@@ -48,7 +48,7 @@ const Sidebar = ({
       {categories.map(category => (
         <motion.div
           key={category.id}
-          onClick={() => onClick(category.id)}
+          onClick={() => setActiveCategory(category.id)}
           initial={{ x: activeCategory === category.id ? 12 : 0 }}
           animate={{ x: activeCategory === category.id ? 12 : 0 }}
           className={cx(
@@ -71,8 +71,8 @@ const Settings = () => {
     { id: 'general', component: <General /> },
     { id: 'appearance', component: <Appearance /> },
     { id: 'player', component: <Player /> },
-    { id: 'lyrics', component: <span className='text-white'>开发中</span> },
     { id: 'lab', component: <span className='text-white'>开发中</span> },
+    { id: 'about', component: <span className='text-white'>开发中</span> },
   ]
 
   return (
diff --git a/packages/web/postcss.config.js b/packages/web/postcss.config.js
index 4b48cac..1f339b6 100644
--- a/packages/web/postcss.config.js
+++ b/packages/web/postcss.config.js
@@ -20,10 +20,7 @@ const replaceBrandColorWithCSSVar = () => {
         if (decl?.parent?.selector?.includes('-blue-')) {
           return
         }
-        value = value.replace(
-          `rgb(${blue.rgb}`,
-          `hsl(var(--brand-color-${blue.key})`
-        )
+        value = value.replace(`rgb(${blue.rgb}`, `hsl(var(--brand-color-${blue.key})`)
       })
       // if (decl.value !== value) {
       //   console.log({
diff --git a/packages/web/states/scrollPositions.ts b/packages/web/states/scrollPositions.ts
index 3364982..963a6f0 100644
--- a/packages/web/states/scrollPositions.ts
+++ b/packages/web/states/scrollPositions.ts
@@ -11,9 +11,7 @@ class ScrollPositions {
     const nestedPath = `/${pathname.split('/')[1]}`
     const restPath = pathname.split('/').slice(2).join('/')
     if (this._nestedPaths.includes(nestedPath)) {
-      return this._positions?.[nestedPath]?.find(
-        ({ path }) => path === restPath
-      )?.top
+      return this._positions?.[nestedPath]?.find(({ path }) => path === restPath)?.top
     } else {
       return this._generalPositions?.[pathname]
     }
@@ -30,14 +28,10 @@ class ScrollPositions {
     }
 
     // set nested position
-    const existsPath = this._positions[nestedPath].find(
-      p => p.path === restPath
-    )
+    const existsPath = this._positions[nestedPath].find(p => p.path === restPath)
     if (existsPath) {
       existsPath.top = top
-      this._positions[nestedPath] = this._positions[nestedPath].filter(
-        p => p.path !== restPath
-      )
+      this._positions[nestedPath] = this._positions[nestedPath].filter(p => p.path !== restPath)
       this._positions[nestedPath].push(existsPath)
     } else {
       this._positions[nestedPath].push({ path: restPath, top })
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index b1b0f1a..2ee4a6e 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -118,10 +118,8 @@ module.exports = {
         xl: '12px',
         '2xl': '20px',
         '3xl': '45px',
-      }
+      },
     },
   },
-  plugins: [
-    require('@tailwindcss/container-queries'),
-  ],
+  plugins: [require('@tailwindcss/container-queries')],
 }
diff --git a/packages/web/test/utils/common.test.ts b/packages/web/test/utils/common.test.ts
index 2f014e9..9e1872d 100644
--- a/packages/web/test/utils/common.test.ts
+++ b/packages/web/test/utils/common.test.ts
@@ -58,142 +58,142 @@ test('formatDuration', () => {
   expect(formatDuration(0, 'zh-CN', 'hh[hr] mm[min]')).toBe('0 分钟')
 })
 
-describe('cacheCoverColor', () => {
-  test('cache with valid url', () => {
-    vi.stubGlobal('ipcRenderer', {
-      send: (channel: IpcChannels, ...args: any[]) => {
-        expect(channel).toBe(IpcChannels.CacheCoverColor)
-        expect(args[0].api).toBe(CacheAPIs.CoverColor)
-        expect(args[0].query).toEqual({
-          id: '109951165911363',
-          color: '#fff',
-        })
-      },
-    })
+// describe('cacheCoverColor', () => {
+//   test('cache with valid url', () => {
+//     vi.stubGlobal('ipcRenderer', {
+//       send: (channel: IpcChannels, ...args: any[]) => {
+//         expect(channel).toBe(IpcChannels.CacheCoverColor)
+//         expect(args[0].api).toBe(CacheAPIs.CoverColor)
+//         expect(args[0].query).toEqual({
+//           id: '109951165911363',
+//           color: '#fff',
+//         })
+//       },
+//     })
 
-    const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
-    cacheCoverColor(
-      'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256',
-      '#fff'
-    )
+//     const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
+//     cacheCoverColor(
+//       'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256',
+//       '#fff'
+//     )
 
-    expect(sendSpy).toHaveBeenCalledTimes(1)
+//     expect(sendSpy).toHaveBeenCalledTimes(1)
 
-    vi.stubGlobal('ipcRenderer', undefined)
-  })
+//     vi.stubGlobal('ipcRenderer', undefined)
+//   })
 
-  test('cache with invalid url', () => {
-    vi.stubGlobal('ipcRenderer', {
-      send: (channel: IpcChannels, ...args: any[]) => {
-        expect(channel).toBe(IpcChannels.CacheCoverColor)
-        expect(args[0].api).toBe(CacheAPIs.CoverColor)
-        expect(args[0].query).toEqual({
-          id: '',
-          color: '#fff',
-        })
-      },
-    })
+//   test('cache with invalid url', () => {
+//     vi.stubGlobal('ipcRenderer', {
+//       send: (channel: IpcChannels, ...args: any[]) => {
+//         expect(channel).toBe(IpcChannels.CacheCoverColor)
+//         expect(args[0].api).toBe(CacheAPIs.CoverColor)
+//         expect(args[0].query).toEqual({
+//           id: '',
+//           color: '#fff',
+//         })
+//       },
+//     })
 
-    const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
-    cacheCoverColor('not a valid url', '#fff')
-    expect(sendSpy).toHaveBeenCalledTimes(0)
+//     const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
+//     cacheCoverColor('not a valid url', '#fff')
+//     expect(sendSpy).toHaveBeenCalledTimes(0)
 
-    vi.stubGlobal('ipcRenderer', undefined)
-  })
-})
+//     vi.stubGlobal('ipcRenderer', undefined)
+//   })
+// })
 
-test('calcCoverColor', async () => {
-  vi.mock('color.js', () => {
-    return {
-      average: vi.fn(
-        () =>
-          new Promise(resolve => {
-            resolve('#fff')
-          })
-      ),
-    }
-  })
+// test('calcCoverColor', async () => {
+//   vi.mock('color.js', () => {
+//     return {
+//       average: vi.fn(
+//         () =>
+//           new Promise(resolve => {
+//             resolve('#fff')
+//           })
+//       ),
+//     }
+//   })
 
-  vi.stubGlobal('ipcRenderer', {
-    send: (channel: IpcChannels, ...args: any[]) => {
-      expect(channel).toBe(IpcChannels.CacheCoverColor)
-      expect(args[0].api).toBe(CacheAPIs.CoverColor)
-      expect(args[0].query).toEqual({
-        id: '109951165911363',
-        color: '#808080',
-      })
-    },
-  })
+//   vi.stubGlobal('ipcRenderer', {
+//     send: (channel: IpcChannels, ...args: any[]) => {
+//       expect(channel).toBe(IpcChannels.CacheCoverColor)
+//       expect(args[0].api).toBe(CacheAPIs.CoverColor)
+//       expect(args[0].query).toEqual({
+//         id: '109951165911363',
+//         color: '#808080',
+//       })
+//     },
+//   })
 
-  const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
+//   const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
 
-  expect(
-    await calcCoverColor(
-      'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256'
-    )
-  ).toBe('#808080')
+//   expect(
+//     await calcCoverColor(
+//       'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256'
+//     )
+//   ).toBe('#808080')
 
-  vi.stubGlobal('ipcRenderer', undefined)
-})
+//   vi.stubGlobal('ipcRenderer', undefined)
+// })
 
-describe('getCoverColor', () => {
-  test('hit cache', async () => {
-    vi.stubGlobal('ipcRenderer', {
-      sendSync: (channel: IpcChannels, ...args: any[]) => {
-        expect(channel).toBe(IpcChannels.GetApiCache)
-        expect(args[0].api).toBe(CacheAPIs.CoverColor)
-        expect(args[0].query).toEqual({
-          id: '109951165911363',
-        })
-        return '#fff'
-      },
-    })
+// describe('getCoverColor', () => {
+//   test('hit cache', async () => {
+//     vi.stubGlobal('ipcRenderer', {
+//       sendSync: (channel: IpcChannels, ...args: any[]) => {
+//         expect(channel).toBe(IpcChannels.GetApiCache)
+//         expect(args[0].api).toBe(CacheAPIs.CoverColor)
+//         expect(args[0].query).toEqual({
+//           id: '109951165911363',
+//         })
+//         return '#fff'
+//       },
+//     })
 
-    const sendSyncSpy = vi.spyOn(window.ipcRenderer as any, 'sendSync')
+//     const sendSyncSpy = vi.spyOn(window.ipcRenderer as any, 'sendSync')
 
-    expect(
-      await getCoverColor(
-        'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256'
-      )
-    ).toBe('#fff')
+//     expect(
+//       await getCoverColor(
+//         'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256'
+//       )
+//     ).toBe('#fff')
 
-    expect(sendSyncSpy).toHaveBeenCalledTimes(1)
-    vi.stubGlobal('ipcRenderer', undefined)
-  })
+//     expect(sendSyncSpy).toHaveBeenCalledTimes(1)
+//     vi.stubGlobal('ipcRenderer', undefined)
+//   })
 
-  test('did not hit cache', async () => {
-    vi.stubGlobal('ipcRenderer', {
-      sendSync: (channel: IpcChannels, ...args: any[]) => {
-        expect(channel).toBe(IpcChannels.GetApiCache)
-        expect(args[0].api).toBe(CacheAPIs.CoverColor)
-        expect(args[0].query).toEqual({
-          id: '109951165911363',
-        })
-        return undefined
-      },
-      send: () => {
-        //
-      },
-    })
+//   test('did not hit cache', async () => {
+//     vi.stubGlobal('ipcRenderer', {
+//       sendSync: (channel: IpcChannels, ...args: any[]) => {
+//         expect(channel).toBe(IpcChannels.GetApiCache)
+//         expect(args[0].api).toBe(CacheAPIs.CoverColor)
+//         expect(args[0].query).toEqual({
+//           id: '109951165911363',
+//         })
+//         return undefined
+//       },
+//       send: () => {
+//         //
+//       },
+//     })
 
-    const sendSyncSpy = vi.spyOn(window.ipcRenderer as any, 'sendSync')
-    const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
+//     const sendSyncSpy = vi.spyOn(window.ipcRenderer as any, 'sendSync')
+//     const sendSpy = vi.spyOn(window.ipcRenderer as any, 'send')
 
-    expect(
-      await getCoverColor(
-        'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256'
-      )
-    ).toBe('#808080')
+//     expect(
+//       await getCoverColor(
+//         'https://p2.music.126.net/2qW-OYZod7SgrzxTwtyBqA==/109951165911363.jpg?param=256y256'
+//       )
+//     ).toBe('#808080')
 
-    expect(sendSyncSpy).toHaveBeenCalledTimes(1)
-    expect(sendSpy).toHaveBeenCalledTimes(1)
-    vi.stubGlobal('ipcRenderer', undefined)
-  })
+//     expect(sendSyncSpy).toHaveBeenCalledTimes(1)
+//     expect(sendSpy).toHaveBeenCalledTimes(1)
+//     vi.stubGlobal('ipcRenderer', undefined)
+//   })
 
-  test('invalid url', async () => {
-    expect(await getCoverColor('not a valid url')).toBe(undefined)
-  })
-})
+//   test('invalid url', async () => {
+//     expect(await getCoverColor('not a valid url')).toBe(undefined)
+//   })
+// })
 
 test('storage', () => {
   const mockLocalStorage: any = {
diff --git a/packages/web/test/utils/cookie.test.ts b/packages/web/test/utils/cookie.test.ts
index 9bc50e1..d1c7da7 100644
--- a/packages/web/test/utils/cookie.test.ts
+++ b/packages/web/test/utils/cookie.test.ts
@@ -24,11 +24,7 @@ describe('parseCookies', () => {
   })
 
   test('parse cookies with empty value, expires and double semicolon', () => {
-    expect(
-      parseCookies(
-        'test=; test2=test2; Expires=Wed, 21 Oct 2015 07:28:00 GMT;;'
-      )
-    ).toEqual([
+    expect(parseCookies('test=; test2=test2; Expires=Wed, 21 Oct 2015 07:28:00 GMT;;')).toEqual([
       {
         key: 'test',
         value: '',
@@ -153,9 +149,7 @@ describe('setCookies', () => {
     )
     expect(Cookies.get('__remember_me')).toBe('true')
     expect(Cookies.get('__csrf')).toBe('78328f711c179391b096a67ad9d0f08b')
-    expect(Cookies.get('NMTID')).toBe(
-      '00OEhPKoaEluGvd9kgutai-iADpQkEAAAGAJz_PTQ'
-    )
+    expect(Cookies.get('NMTID')).toBe('00OEhPKoaEluGvd9kgutai-iADpQkEAAAGAJz_PTQ')
     expect(Cookies.get('MUSIC_R_T')).toBe(undefined) // because of path is not /
     expect(Cookies.get('MUSIC_A_T')).toBe(undefined) // because of path is not /
   })
diff --git a/packages/web/utils/common.ts b/packages/web/utils/common.ts
index 6179b98..badb04d 100644
--- a/packages/web/utils/common.ts
+++ b/packages/web/utils/common.ts
@@ -168,7 +168,7 @@ export async function calcCoverColor(coverUrl: string) {
 export const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
 export const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
 export const isPWA =
-  (navigator as any).standalone || window.matchMedia('(display-mode: standalone)').matches
-export const isIosPwa = isIOS && isPWA && isSafari
+  () => (navigator as any).standalone || window.matchMedia('(display-mode: standalone)').matches
+export const isIosPwa = isIOS && isPWA() && isSafari
 
 export const sleep = (ms: number) => new Promise(r => setTimeout(r, ms))
diff --git a/packages/web/utils/lyric.ts b/packages/web/utils/lyric.ts
index ac75680..d6980eb 100644
--- a/packages/web/utils/lyric.ts
+++ b/packages/web/utils/lyric.ts
@@ -12,8 +12,7 @@ export function lyricParser(lrc: FetchLyricResponse) {
 /**
  * @see {@link https://regexr.com/6e52n}
  */
-const extractLrcRegex =
-  /^(?<lyricTimestamps>(?:\[.+?\])+)(?!\[)(?<content>.+)$/gm
+const extractLrcRegex = /^(?<lyricTimestamps>(?:\[.+?\])+)(?!\[)(?<content>.+)$/gm
 const extractTimestampRegex = /\[(?<min>\d+):(?<sec>\d+)(?:\.|:)*(?<ms>\d+)*\]/g
 
 interface ParsedLyric {
diff --git a/packages/web/utils/theme.ts b/packages/web/utils/theme.ts
index 96b204a..c1f8b93 100644
--- a/packages/web/utils/theme.ts
+++ b/packages/web/utils/theme.ts
@@ -1,8 +1,7 @@
 export const changeTheme = (theme: 'light' | 'dark') => {
   document.body.setAttribute('class', theme)
   if (!window.env?.isElectron) {
-    document.documentElement.style.background =
-      theme === 'dark' ? '#000' : '#fff'
+    document.documentElement.style.background = theme === 'dark' ? '#000' : '#fff'
   }
 }
 
diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts
index 410f31b..2db66a0 100644
--- a/packages/web/vite.config.ts
+++ b/packages/web/vite.config.ts
@@ -11,6 +11,8 @@ import { appName } from './utils/const'
 
 dotenv.config({ path: join(__dirname, '../../.env') })
 const IS_ELECTRON = process.env.IS_ELECTRON
+const ELECTRON_DEV_NETEASE_API_PORT = Number(process.env.ELECTRON_DEV_NETEASE_API_PORT || 30001)
+const ELECTRON_WEB_SERVER_PORT = Number(process.env.ELECTRON_WEB_SERVER_PORT || 42710)
 
 /**
  * @see https://vitejs.dev/config/
@@ -23,6 +25,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': join(__dirname, '..'),
+      'hls.js': 'hls.js/dist/hls.min.js',
     },
   },
   plugins: [
@@ -37,33 +40,35 @@ export default defineConfig({
     /**
      * @see https://vite-plugin-pwa.netlify.app/guide/generate.html
      */
-    VitePWA({
-      registerType: 'autoUpdate',
-      manifest: {
-        name: appName,
-        short_name: appName,
-        description: 'Description of your app',
-        theme_color: '#000',
-        icons: [
-          {
-            src: 'pwa-192x192.png',
-            sizes: '192x192',
-            type: 'image/png',
+    IS_ELECTRON
+      ? VitePWA({
+          registerType: 'autoUpdate',
+          manifest: {
+            name: appName,
+            short_name: appName,
+            description: 'Description of your app',
+            theme_color: '#000',
+            icons: [
+              {
+                src: 'pwa-192x192.png',
+                sizes: '192x192',
+                type: 'image/png',
+              },
+              {
+                src: 'pwa-512x512.png',
+                sizes: '512x512',
+                type: 'image/png',
+              },
+              {
+                src: 'pwa-512x512.png',
+                sizes: '512x512',
+                type: 'image/png',
+                purpose: 'any maskable',
+              },
+            ],
           },
-          {
-            src: 'pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-          },
-          {
-            src: 'pwa-512x512.png',
-            sizes: '512x512',
-            type: 'image/png',
-            purpose: 'any maskable',
-          },
-        ],
-      },
-    }),
+        })
+      : undefined,
 
     /**
      * @see https://github.com/vbenjs/vite-plugin-svg-icons
@@ -90,22 +95,22 @@ export default defineConfig({
     },
   },
   server: {
-    port: Number(process.env.ELECTRON_WEB_SERVER_PORT || 42710),
+    port: ELECTRON_WEB_SERVER_PORT,
     strictPort: IS_ELECTRON ? true : false,
     proxy: {
       '/netease/': {
-        target: `http://127.0.0.1:${process.env.ELECTRON_DEV_NETEASE_API_PORT || 30001}`,
+        target: `http://127.0.0.1:${ELECTRON_DEV_NETEASE_API_PORT}`,
         changeOrigin: true,
         rewrite: path => (IS_ELECTRON ? path : path.replace(/^\/netease/, '')),
       },
       '/r3play/': {
-        target: `http://127.0.0.1:${process.env.ELECTRON_DEV_NETEASE_API_PORT || 30001}`,
+        target: `http://127.0.0.1:${ELECTRON_DEV_NETEASE_API_PORT}`,
         changeOrigin: true,
       },
     },
   },
   preview: {
-    port: Number(process.env.ELECTRON_WEB_SERVER_PORT || 42710),
+    port: ELECTRON_WEB_SERVER_PORT,
   },
   test: {
     environment: 'jsdom',
diff --git a/packages/web/vitePluginFilenamesToType.ts b/packages/web/vitePluginFilenamesToType.ts
index 6198497..cb09b00 100644
--- a/packages/web/vitePluginFilenamesToType.ts
+++ b/packages/web/vitePluginFilenamesToType.ts
@@ -10,21 +10,13 @@ export type Conversion = {
 const filenamesToType = (conversions: Conversion[]): Plugin => {
   const generateTypes = async (conversion: Conversion) => {
     const filenames = await fs.readdir(conversion.dictionary).catch(reason => {
-      console.error(
-        'vite-plugin-filenames-to-type: unable to read directory. ',
-        reason
-      )
+      console.error('vite-plugin-filenames-to-type: unable to read directory. ', reason)
       return []
     })
     if (!filenames.length) return
 
-    const iconNames = filenames.map(
-      fileName => `'${fileName.replace(/\.[^.]+$/, '')}'`
-    )
-    await fs.writeFile(
-      conversion.typeFile,
-      `export type IconNames = ${iconNames.join(' | ')}`
-    )
+    const iconNames = filenames.map(fileName => `'${fileName.replace(/\.[^.]+$/, '')}'`)
+    await fs.writeFile(conversion.typeFile, `export type IconNames = ${iconNames.join(' | ')}`)
   }
 
   const findConversion = (filePath: string) => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52c8a3c..e6b5ec1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,7 +9,7 @@ importers:
       prettier: ^2.8.1
       prettier-plugin-tailwindcss: ^0.2.1
       tsx: ^3.12.1
-      turbo: ^1.6.3
+      turbo: ^1.8.3
       typescript: ^4.9.5
     devDependencies:
       cross-env: 7.0.3
@@ -17,7 +17,7 @@ importers:
       prettier: 2.8.1
       prettier-plugin-tailwindcss: 0.2.1_prettier@2.8.1
       tsx: 3.12.1
-      turbo: 1.6.3
+      turbo: 1.8.3
       typescript: 4.9.5
 
   packages/desktop:
@@ -29,15 +29,14 @@ importers:
       '@sentry/electron': ^3.0.7
       '@types/better-sqlite3': ^7.6.3
       '@vitest/ui': ^0.20.3
-      '@yimura/scraper': ^1.2.4
       NeteaseCloudMusicApi: ^4.8.9
-      axios: ^1.2.1
+      axios: ^1.3.4
       better-sqlite3: 8.1.0
       change-case: ^4.1.2
       compare-versions: ^4.1.3
       cross-env: ^7.0.3
       dotenv: ^16.0.3
-      electron: ^23.1.1
+      electron: ^23.1.4
       electron-builder: 23.6.0
       electron-devtools-installer: ^3.2.0
       electron-log: ^4.4.8
@@ -65,7 +64,6 @@ importers:
       '@fastify/multipart': 7.4.0
       '@fastify/static': 6.6.1
       '@sentry/electron': 3.0.7
-      '@yimura/scraper': 1.2.4
       NeteaseCloudMusicApi: 4.8.9
       better-sqlite3: 8.1.0
       change-case: 4.1.2
@@ -80,10 +78,10 @@ importers:
     devDependencies:
       '@types/better-sqlite3': 7.6.3
       '@vitest/ui': 0.20.3
-      axios: 1.2.1
+      axios: 1.3.4
       cross-env: 7.0.3
       dotenv: 16.0.3
-      electron: 23.1.1
+      electron: 23.1.4
       electron-builder: 23.6.0
       electron-devtools-installer: 3.2.0
       electron-rebuild: 3.2.9
@@ -140,8 +138,8 @@ importers:
       '@sentry/react': ^7.29.0
       '@sentry/tracing': ^7.29.0
       '@tailwindcss/container-queries': ^0.1.0
-      '@tanstack/react-query': ^4.20.9
-      '@tanstack/react-query-devtools': ^4.20.9
+      '@tanstack/react-query': ^4.26.1
+      '@tanstack/react-query-devtools': ^4.26.1
       '@testing-library/react': ^13.3.0
       '@types/howler': ^2.2.7
       '@types/js-cookie': ^3.0.2
@@ -150,7 +148,7 @@ importers:
       '@types/qrcode': ^1.4.2
       '@types/react': ^18.0.15
       '@types/react-dom': ^18.0.6
-      '@vitejs/plugin-react-swc': ^3.0.1
+      '@vitejs/plugin-react-swc': ^3.2.0
       '@vitest/ui': ^0.26.3
       ahooks: ^3.7.4
       autoprefixer: ^10.4.13
@@ -161,7 +159,7 @@ importers:
       dayjs: ^1.11.7
       dotenv: ^16.0.3
       framer-motion: ^8.1.7
-      hls.js: ^1.2.9
+      hls.js: ^1.3.5
       howler: ^2.2.3
       i18next: ^22.4.9
       js-cookie: ^3.0.1
@@ -186,8 +184,8 @@ importers:
       tailwindcss: ^3.2.4
       typescript: '*'
       valtio: ^1.8.0
-      vite: ^4.0.4
-      vite-plugin-pwa: ^0.14.1
+      vite: ^4.2.0
+      vite-plugin-pwa: ^0.14.4
       vite-plugin-svg-icons: ^2.0.1
       vitest: ^0.26.3
     dependencies:
@@ -195,15 +193,15 @@ importers:
       '@sentry/react': 7.29.0_react@18.2.0
       '@sentry/tracing': 7.29.0
       '@tailwindcss/container-queries': 0.1.0_tailwindcss@3.2.4
-      '@tanstack/react-query': 4.20.9_biqbaboplfbrettd7655fr4n2y
-      '@tanstack/react-query-devtools': 4.20.9_hin5uqs2feg5fwcu6eooischsu
+      '@tanstack/react-query': 4.26.1_biqbaboplfbrettd7655fr4n2y
+      '@tanstack/react-query-devtools': 4.26.1_brdhmlf72zuns3lsk66phyptty
       ahooks: 3.7.4_react@18.2.0
       axios: 1.2.2
       color.js: 1.2.0
       colord: 2.9.3
       dayjs: 1.11.7
       framer-motion: 8.1.7_biqbaboplfbrettd7655fr4n2y
-      hls.js: 1.2.9
+      hls.js: 1.3.5
       howler: 2.2.3
       i18next: 22.4.9
       js-cookie: 3.0.1
@@ -219,7 +217,7 @@ importers:
       react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y
       react-use-measure: 2.1.1_biqbaboplfbrettd7655fr4n2y
       react-virtuoso: 2.16.6_biqbaboplfbrettd7655fr4n2y
-      valtio: 1.8.0_react@18.2.0+vite@4.0.4
+      valtio: 1.8.0_react@18.2.0+vite@4.2.0
     devDependencies:
       '@testing-library/react': 13.3.0_biqbaboplfbrettd7655fr4n2y
       '@types/howler': 2.2.7
@@ -229,7 +227,7 @@ importers:
       '@types/qrcode': 1.4.2
       '@types/react': 18.0.15
       '@types/react-dom': 18.0.6
-      '@vitejs/plugin-react-swc': 3.0.1_vite@4.0.4
+      '@vitejs/plugin-react-swc': 3.2.0_vite@4.2.0
       '@vitest/ui': 0.26.3
       autoprefixer: 10.4.13_postcss@8.4.20
       c8: 7.12.0
@@ -242,9 +240,9 @@ importers:
       rollup-plugin-visualizer: 5.9.0
       tailwindcss: 3.2.4_postcss@8.4.20
       typescript: 4.7.4
-      vite: 4.0.4
-      vite-plugin-pwa: 0.14.1_vite@4.0.4
-      vite-plugin-svg-icons: 2.0.1_vite@4.0.4
+      vite: 4.2.0
+      vite-plugin-pwa: 0.14.4_vite@4.2.0
+      vite-plugin-svg-icons: 2.0.1_vite@4.2.0
       vitest: 0.26.3_lae363bjhdipllr6jstkmuhhna
 
 packages:
@@ -279,11 +277,6 @@ packages:
     dependencies:
       '@babel/highlight': 7.18.6
 
-  /@babel/compat-data/7.18.8:
-    resolution: {integrity: sha512-HSmX4WZPPK3FUxYp7g2T6EyO8j96HlZJlxmKPSh6KAcqwyDrfx7hKjXpAW/0FhFfTJsR0Yt4lAjLI2coMptIHQ==}
-    engines: {node: '>=6.9.0'}
-    dev: true
-
   /@babel/compat-data/7.20.10:
     resolution: {integrity: sha512-sEnuDPpOJR/fcafHMjpcpGN5M2jbUGUHwmuWKM/YdPzeEDJg8bgmbcWQFUfE32MQjti1koACvoPVsDe8Uq+idg==}
     engines: {node: '>=6.9.0'}
@@ -407,14 +400,6 @@ packages:
       '@babel/types': 7.20.7
     dev: true
 
-  /@babel/helper-function-name/7.18.9:
-    resolution: {integrity: sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/template': 7.20.7
-      '@babel/types': 7.20.7
-    dev: true
-
   /@babel/helper-function-name/7.19.0:
     resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
     engines: {node: '>=6.9.0'}
@@ -707,7 +692,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/compat-data': 7.18.8
+      '@babel/compat-data': 7.20.10
       '@babel/core': 7.20.12
       '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
       '@babel/helper-plugin-utils': 7.20.2
@@ -978,7 +963,7 @@ packages:
       '@babel/core': 7.20.12
       '@babel/helper-annotate-as-pure': 7.18.6
       '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-function-name': 7.18.9
+      '@babel/helper-function-name': 7.19.0
       '@babel/helper-optimise-call-expression': 7.18.6
       '@babel/helper-plugin-utils': 7.20.2
       '@babel/helper-replace-supers': 7.18.9
@@ -1293,7 +1278,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
     dependencies:
-      '@babel/compat-data': 7.18.8
+      '@babel/compat-data': 7.20.10
       '@babel/core': 7.20.12
       '@babel/helper-compilation-targets': 7.20.7_@babel+core@7.20.12
       '@babel/helper-plugin-utils': 7.20.2
@@ -1611,6 +1596,15 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm/0.17.12:
+    resolution: {integrity: sha512-E/sgkvwoIfj4aMAPL2e35VnUJspzVYl7+M1B2cqeubdBhADV4uPon0KCc8p2G+LqSJ6i8ocYPCqY3A4GGq0zkQ==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
     optional: true
 
   /@esbuild/android-arm64/0.16.10:
@@ -1619,6 +1613,15 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64/0.17.12:
+    resolution: {integrity: sha512-WQ9p5oiXXYJ33F2EkE3r0FRDFVpEdcDiwNX3u7Xaibxfx6vQE0Sb8ytrfQsA5WO6kDn6mDfKLh6KrPBjvkk7xA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
     optional: true
 
   /@esbuild/android-x64/0.16.10:
@@ -1627,6 +1630,15 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64/0.17.12:
+    resolution: {integrity: sha512-m4OsaCr5gT+se25rFPHKQXARMyAehHTQAz4XX1Vk3d27VtqiX0ALMBPoXZsGaB6JYryCLfgGwUslMqTfqeLU0w==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
     optional: true
 
   /@esbuild/darwin-arm64/0.16.10:
@@ -1635,6 +1647,15 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64/0.17.12:
+    resolution: {integrity: sha512-O3GCZghRIx+RAN0NDPhyyhRgwa19MoKlzGonIb5hgTj78krqp9XZbYCvFr9N1eUxg0ZQEpiiZ4QvsOQwBpP+lg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
     optional: true
 
   /@esbuild/darwin-x64/0.16.10:
@@ -1643,6 +1664,15 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64/0.17.12:
+    resolution: {integrity: sha512-5D48jM3tW27h1qjaD9UNRuN+4v0zvksqZSPZqeSWggfMlsVdAhH3pwSfQIFJwcs9QJ9BRibPS4ViZgs3d2wsCA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
     optional: true
 
   /@esbuild/freebsd-arm64/0.16.10:
@@ -1651,6 +1681,15 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64/0.17.12:
+    resolution: {integrity: sha512-OWvHzmLNTdF1erSvrfoEBGlN94IE6vCEaGEkEH29uo/VoONqPnoDFfShi41Ew+yKimx4vrmmAJEGNoyyP+OgOQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
     optional: true
 
   /@esbuild/freebsd-x64/0.16.10:
@@ -1659,6 +1698,15 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64/0.17.12:
+    resolution: {integrity: sha512-A0Xg5CZv8MU9xh4a+7NUpi5VHBKh1RaGJKqjxe4KG87X+mTjDE6ZvlJqpWoeJxgfXHT7IMP9tDFu7IZ03OtJAw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-arm/0.16.10:
@@ -1667,6 +1715,15 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm/0.17.12:
+    resolution: {integrity: sha512-WsHyJ7b7vzHdJ1fv67Yf++2dz3D726oO3QCu8iNYik4fb5YuuReOI9OtA+n7Mk0xyQivNTPbl181s+5oZ38gyA==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-arm64/0.16.10:
@@ -1675,6 +1732,15 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64/0.17.12:
+    resolution: {integrity: sha512-cK3AjkEc+8v8YG02hYLQIQlOznW+v9N+OI9BAFuyqkfQFR+DnDLhEM5N8QRxAUz99cJTo1rLNXqRrvY15gbQUg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-ia32/0.16.10:
@@ -1683,6 +1749,15 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32/0.17.12:
+    resolution: {integrity: sha512-jdOBXJqcgHlah/nYHnj3Hrnl9l63RjtQ4vn9+bohjQPI2QafASB5MtHAoEv0JQHVb/xYQTFOeuHnNYE1zF7tYw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-loong64/0.14.53:
@@ -1709,6 +1784,15 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64/0.17.12:
+    resolution: {integrity: sha512-GTOEtj8h9qPKXCyiBBnHconSCV9LwFyx/gv3Phw0pa25qPYjVuuGZ4Dk14bGCfGX3qKF0+ceeQvwmtI+aYBbVA==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-mips64el/0.16.10:
@@ -1717,6 +1801,15 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el/0.17.12:
+    resolution: {integrity: sha512-o8CIhfBwKcxmEENOH9RwmUejs5jFiNoDw7YgS0EJTF6kgPgcqLFjgoc5kDey5cMHRVCIWc6kK2ShUePOcc7RbA==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-ppc64/0.16.10:
@@ -1725,6 +1818,15 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64/0.17.12:
+    resolution: {integrity: sha512-biMLH6NR/GR4z+ap0oJYb877LdBpGac8KfZoEnDiBKd7MD/xt8eaw1SFfYRUeMVx519kVkAOL2GExdFmYnZx3A==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-riscv64/0.16.10:
@@ -1733,6 +1835,15 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64/0.17.12:
+    resolution: {integrity: sha512-jkphYUiO38wZGeWlfIBMB72auOllNA2sLfiZPGDtOBb1ELN8lmqBrlMiucgL8awBw1zBXN69PmZM6g4yTX84TA==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-s390x/0.16.10:
@@ -1741,6 +1852,15 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x/0.17.12:
+    resolution: {integrity: sha512-j3ucLdeY9HBcvODhCY4b+Ds3hWGO8t+SAidtmWu/ukfLLG/oYDMaA+dnugTVAg5fnUOGNbIYL9TOjhWgQB8W5g==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/linux-x64/0.16.10:
@@ -1749,6 +1869,15 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64/0.17.12:
+    resolution: {integrity: sha512-uo5JL3cgaEGotaqSaJdRfFNSCUJOIliKLnDGWaVCgIKkHxwhYMm95pfMbWZ9l7GeW9kDg0tSxcy9NYdEtjwwmA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
     optional: true
 
   /@esbuild/netbsd-x64/0.16.10:
@@ -1757,6 +1886,15 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64/0.17.12:
+    resolution: {integrity: sha512-DNdoRg8JX+gGsbqt2gPgkgb00mqOgOO27KnrWZtdABl6yWTST30aibGJ6geBq3WM2TIeW6COs5AScnC7GwtGPg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
     optional: true
 
   /@esbuild/openbsd-x64/0.16.10:
@@ -1765,6 +1903,15 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64/0.17.12:
+    resolution: {integrity: sha512-aVsENlr7B64w8I1lhHShND5o8cW6sB9n9MUtLumFlPhG3elhNWtE7M1TFpj3m7lT3sKQUMkGFjTQBrvDDO1YWA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
     optional: true
 
   /@esbuild/sunos-x64/0.16.10:
@@ -1773,6 +1920,15 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64/0.17.12:
+    resolution: {integrity: sha512-qbHGVQdKSwi0JQJuZznS4SyY27tYXYF0mrgthbxXrZI3AHKuRvU+Eqbg/F0rmLDpW/jkIZBlCO1XfHUBMNJ1pg==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
     optional: true
 
   /@esbuild/win32-arm64/0.16.10:
@@ -1781,6 +1937,15 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64/0.17.12:
+    resolution: {integrity: sha512-zsCp8Ql+96xXTVTmm6ffvoTSZSV2B/LzzkUXAY33F/76EajNw1m+jZ9zPfNJlJ3Rh4EzOszNDHsmG/fZOhtqDg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
     optional: true
 
   /@esbuild/win32-ia32/0.16.10:
@@ -1789,6 +1954,15 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32/0.17.12:
+    resolution: {integrity: sha512-FfrFjR4id7wcFYOdqbDfDET3tjxCozUgbqdkOABsSFzoZGFC92UK7mg4JKRc/B3NNEf1s2WHxJ7VfTdVDPN3ng==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
     optional: true
 
   /@esbuild/win32-x64/0.16.10:
@@ -1797,6 +1971,15 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64/0.17.12:
+    resolution: {integrity: sha512-JOOxw49BVZx2/5tW3FqkdjSD/5gXYeVGPDcB0lvap0gLQshkh1Nyel1QazC+wNxus3xPlsYAgqU1BUmrmCvWtw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
     optional: true
 
   /@eslint/eslintrc/1.4.1:
@@ -2437,8 +2620,8 @@ packages:
       string.prototype.matchall: 4.0.7
     dev: true
 
-  /@swc/core-darwin-arm64/1.3.25:
-    resolution: {integrity: sha512-8PWAVcjTJyj2VrqPBFOIi2w2P0Z8kOCbzHW3+pe+bSXxfGMG0MKPl5U2IXhsEL0ovm4xSFlqW0yygpoP3MmRPw==}
+  /@swc/core-darwin-arm64/1.3.38:
+    resolution: {integrity: sha512-4ZTJJ/cR0EsXW5UxFCifZoGfzQ07a8s4ayt1nLvLQ5QoB1GTAf9zsACpvWG8e7cmCR0L76R5xt8uJuyr+noIXA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
@@ -2446,8 +2629,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-darwin-x64/1.3.25:
-    resolution: {integrity: sha512-5DHGiMYFEj5aa208tCjo7Sn5tiG4xPz+4gUiWVlglxqXFptkNim5xu/1G6VYm5Zk7dI5jJkjTU76GQG7IRvPug==}
+  /@swc/core-darwin-x64/1.3.38:
+    resolution: {integrity: sha512-Kim727rNo4Dl8kk0CR8aJQe4zFFtsT1TZGlNrNMUgN1WC3CRX7dLZ6ZJi/VVcTG1cbHp5Fp3mUzwHsMxEh87Mg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
@@ -2455,8 +2638,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm-gnueabihf/1.3.25:
-    resolution: {integrity: sha512-YNfLxv9PhZk+jrJbpR1mMrYBUkufo0hiFv3S1OrX3l8edsIP4wPND5w9ZH0Oi898f6Jg9DBrY2zXJMQ+gWkbvA==}
+  /@swc/core-linux-arm-gnueabihf/1.3.38:
+    resolution: {integrity: sha512-yaRdnPNU2enlJDRcIMvYVSyodY+Amhf5QuXdUbAj6rkDD6wUs/s9C6yPYrFDmoTltrG+nBv72mUZj+R46wVfSw==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
@@ -2464,8 +2647,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-gnu/1.3.25:
-    resolution: {integrity: sha512-kS+spM5/xQ6QvWF1ms3byfjnhUlpjTfFwgCyHnIKgjvsYkDa+vkAIhKq6HuEdaTPaCRCjts0Zarhub1nClUU0g==}
+  /@swc/core-linux-arm64-gnu/1.3.38:
+    resolution: {integrity: sha512-iNY1HqKo/wBSu3QOGBUlZaLdBP/EHcwNjBAqIzpb8J64q2jEN02RizqVW0mDxyXktJ3lxr3g7VW9uqklMeXbjQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -2473,8 +2656,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-musl/1.3.25:
-    resolution: {integrity: sha512-vM3D7LWmjotUAJ2D4F+L+dspFeWrcPNVh0o8TCoTOYCt8DPD5YsUKTpIgOsZ+gReeWUAnNTh0Btx5pGGVfajGA==}
+  /@swc/core-linux-arm64-musl/1.3.38:
+    resolution: {integrity: sha512-LJCFgLZoPRkPCPmux+Q5ctgXRp6AsWhvWuY61bh5bIPBDlaG9pZk94DeHyvtiwT0syhTtXb2LieBOx6NqN3zeA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -2482,8 +2665,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-gnu/1.3.25:
-    resolution: {integrity: sha512-xUCLLMDlYa/zB8BftVa4SrxuVpcDxkltCfmBg5r2pZPVskhC5ZJsQZ/AvWNChoAB11shRhjTaWDlmxJEsa7TIg==}
+  /@swc/core-linux-x64-gnu/1.3.38:
+    resolution: {integrity: sha512-hRQGRIWHmv2PvKQM/mMV45mVXckM2+xLB8TYLLgUG66mmtyGTUJPyxjnJkbI86WNGqo18k+lAuMG2mn6QmzYwQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -2491,8 +2674,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-musl/1.3.25:
-    resolution: {integrity: sha512-QzHU3BIaUVRSFNsUn3Qxx1vgtF/f5NqsFMAAPSq9Y8Yq5nrlc2t7cNuOROxHLbUqE+NPUp6+RglleJMoeWz5mA==}
+  /@swc/core-linux-x64-musl/1.3.38:
+    resolution: {integrity: sha512-PTYSqtsIfPHLKDDNbueI5e0sc130vyHRiFOeeC6qqzA2FAiVvIxuvXHLr0soPvKAR1WyhtYmFB9QarcctemL2w==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -2500,8 +2683,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-arm64-msvc/1.3.25:
-    resolution: {integrity: sha512-77VSVtneVOAUL4zkRyQZ6pWVpTsVVdqwly/DKnRnloglGKxYuk5DG5MUBsL72Nnfv4OCHjZ27eI3NUrpLsUb2Q==}
+  /@swc/core-win32-arm64-msvc/1.3.38:
+    resolution: {integrity: sha512-9lHfs5TPNs+QdkyZFhZledSmzBEbqml/J1rqPSb9Fy8zB6QlspixE6OLZ3nTlUOdoGWkcTTdrOn77Sd7YGf1AA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
@@ -2509,8 +2692,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-ia32-msvc/1.3.25:
-    resolution: {integrity: sha512-kz0v3K3H6OPEZR3ry72Ad/6C5GrZBRRUk69K58LORQ8tZXQD3UGl85pUbQqyHl8fR5NU76Muxgovj9CI9iTHGA==}
+  /@swc/core-win32-ia32-msvc/1.3.38:
+    resolution: {integrity: sha512-SbL6pfA2lqvDKnwTHwOfKWvfHAdcbAwJS4dBkFidr7BiPTgI5Uk8wAPcRb8mBECpmIa9yFo+N0cAFRvMnf+cNw==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
@@ -2518,8 +2701,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-x64-msvc/1.3.25:
-    resolution: {integrity: sha512-nmQOAzIpNRRnupWzkenJmW4i+h1M76cVNUqEU2MjmtesEkRZEGqv//jefXiyCP2zcbeLNLKiB2ptVJhpd1BvRA==}
+  /@swc/core-win32-x64-msvc/1.3.38:
+    resolution: {integrity: sha512-UFveLrL6eGvViOD8OVqUQa6QoQwdqwRvLtL5elF304OT8eCPZa8BhuXnWk25X8UcOyns8gFcb8Fhp3oaLi/Rlw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
@@ -2527,21 +2710,21 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core/1.3.25:
-    resolution: {integrity: sha512-wqzvM/wu6OsTVYPMStOpm7kIQcPX3GoZ0sC85qzDdsCxmJ1rmItLAD91sXPUmmdk0XqPYjLgT9MRDEIP5woz4g==}
+  /@swc/core/1.3.38:
+    resolution: {integrity: sha512-AiEVehRFws//AiiLx9DPDp1WDXt+yAoGD1kMYewhoF6QLdTz8AtYu6i8j/yAxk26L8xnegy0CDwcNnub9qenyQ==}
     engines: {node: '>=10'}
     requiresBuild: true
     optionalDependencies:
-      '@swc/core-darwin-arm64': 1.3.25
-      '@swc/core-darwin-x64': 1.3.25
-      '@swc/core-linux-arm-gnueabihf': 1.3.25
-      '@swc/core-linux-arm64-gnu': 1.3.25
-      '@swc/core-linux-arm64-musl': 1.3.25
-      '@swc/core-linux-x64-gnu': 1.3.25
-      '@swc/core-linux-x64-musl': 1.3.25
-      '@swc/core-win32-arm64-msvc': 1.3.25
-      '@swc/core-win32-ia32-msvc': 1.3.25
-      '@swc/core-win32-x64-msvc': 1.3.25
+      '@swc/core-darwin-arm64': 1.3.38
+      '@swc/core-darwin-x64': 1.3.38
+      '@swc/core-linux-arm-gnueabihf': 1.3.38
+      '@swc/core-linux-arm64-gnu': 1.3.38
+      '@swc/core-linux-arm64-musl': 1.3.38
+      '@swc/core-linux-x64-gnu': 1.3.38
+      '@swc/core-linux-x64-musl': 1.3.38
+      '@swc/core-win32-arm64-msvc': 1.3.38
+      '@swc/core-win32-ia32-msvc': 1.3.38
+      '@swc/core-win32-x64-msvc': 1.3.38
     dev: true
 
   /@szmarczak/http-timer/4.0.6:
@@ -2566,27 +2749,27 @@ packages:
       remove-accents: 0.4.2
     dev: false
 
-  /@tanstack/query-core/4.20.9:
-    resolution: {integrity: sha512-XTEEvOGy7wlABPTYfmg7U287WYcf2PV8lH15oKWD2I09okqMOHrB23WxyikEVRwJCjYNKcCW0BuYaAY4S2g/jg==}
+  /@tanstack/query-core/4.26.1:
+    resolution: {integrity: sha512-Zrx2pVQUP4ndnsu6+K/m8zerXSVY8QM+YSbxA1/jbBY21GeCd5oKfYl92oXPK0hPEUtoNuunIdiq0ZMqLos+Zg==}
     dev: false
 
-  /@tanstack/react-query-devtools/4.20.9_hin5uqs2feg5fwcu6eooischsu:
-    resolution: {integrity: sha512-Bim/6nzxb5ZdFR+du4MvyAGPsOlMXiJiIiU8XcDIrgJzdRzHdw6dkkMpWXENKmjn9nTE5Ns0Mj+r11yBZcnMYA==}
+  /@tanstack/react-query-devtools/4.26.1_brdhmlf72zuns3lsk66phyptty:
+    resolution: {integrity: sha512-ts2mA+fyFYFRi3Cee4xBk8Fx6waSFOM+yCkFqwJfGQRGjjTIMYMZPJv4wkv7vy12IVi1SYhL8au22LRKlXS1Zg==}
     peerDependencies:
-      '@tanstack/react-query': 4.20.9
+      '@tanstack/react-query': 4.26.1
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@tanstack/match-sorter-utils': 8.7.2
-      '@tanstack/react-query': 4.20.9_biqbaboplfbrettd7655fr4n2y
+      '@tanstack/react-query': 4.26.1_biqbaboplfbrettd7655fr4n2y
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       superjson: 1.12.1
       use-sync-external-store: 1.2.0_react@18.2.0
     dev: false
 
-  /@tanstack/react-query/4.20.9_biqbaboplfbrettd7655fr4n2y:
-    resolution: {integrity: sha512-OqwcmqkxOYgLbVjsMm4Cl8MMZ063VqdRw1GpSWqN8WgppftPiFJTDb6Q1TX5I/ciCbHmRWNPE/D0ayyTesAKug==}
+  /@tanstack/react-query/4.26.1_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-i3dnz4TOARGIXrXQ5P7S25Zfi4noii/bxhcwPurh2nrf5EUCcAt/95TB2HSmMweUBx206yIMWUMEQ7ptd6zwDg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -2597,7 +2780,7 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@tanstack/query-core': 4.20.9
+      '@tanstack/query-core': 4.26.1
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       use-sync-external-store: 1.2.0_react@18.2.0
@@ -2898,13 +3081,13 @@ packages:
     resolution: {integrity: sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw==}
     dev: false
 
-  /@vitejs/plugin-react-swc/3.0.1_vite@4.0.4:
-    resolution: {integrity: sha512-3GQ2oruZO9j8dSHcI0MUeOZQBhjYyDQsF/pKY4Px+CJxn0M16OhgFeEzUjeuwci4zhhjoNIDE9aFNaV5GMQ09g==}
+  /@vitejs/plugin-react-swc/3.2.0_vite@4.2.0:
+    resolution: {integrity: sha512-IcBoXL/mcH7JdQr/nfDlDwTdIaH8Rg7LpfQDF4nAht+juHWIuv6WhpKPCSfY4+zztAaB07qdBoFz1XCZsgo3pQ==}
     peerDependencies:
       vite: ^4
     dependencies:
-      '@swc/core': 1.3.25
-      vite: 4.0.4
+      '@swc/core': 1.3.38
+      vite: 4.2.0
     dev: true
 
   /@vitest/ui/0.20.3:
@@ -2925,16 +3108,12 @@ packages:
     resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
     dev: false
 
-  /@yimura/scraper/1.2.4:
-    resolution: {integrity: sha512-lHx/NqqZBOuDyYdUbXIigLGKKm2+Wtrx4rxGJ1dObZhOyth3CzFZbb1/SykVVzxxGYkFkhD9HHf74UWelaP2mw==}
-    dev: false
-
   /NeteaseCloudMusicApi/4.8.7:
     resolution: {integrity: sha512-f+Z/lar+IOcrzGeDKHNQaTnlNE7nLRiD9Nb/KoLmKC32aUnnCerFTFV2/ZWlEC4YokP/4mXOZXvo8wXA8PQhVA==}
     engines: {node: '>=12'}
     hasBin: true
     dependencies:
-      axios: 1.2.2
+      axios: 1.3.4
       express: 4.18.2
       express-fileupload: 1.4.0
       md5: 2.3.0
@@ -2954,7 +3133,7 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
     dependencies:
-      axios: 1.2.2
+      axios: 1.3.4
       express: 4.18.2
       express-fileupload: 1.4.0
       md5: 2.3.0
@@ -3381,16 +3560,6 @@ packages:
     transitivePeerDependencies:
       - debug
 
-  /axios/1.2.1:
-    resolution: {integrity: sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==}
-    dependencies:
-      follow-redirects: 1.15.1
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-    dev: true
-
   /axios/1.2.2:
     resolution: {integrity: sha512-bz/J4gS2S3I7mpN/YZfGFTqhXTYzRho8Ay38w2otuuDR322KzFIWm/4W2K6gIwvWaws5n+mnb7D1lN9uD+QH6Q==}
     dependencies:
@@ -3401,6 +3570,15 @@ packages:
       - debug
     dev: false
 
+  /axios/1.3.4:
+    resolution: {integrity: sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==}
+    dependencies:
+      follow-redirects: 1.15.1
+      form-data: 4.0.0
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
   /babel-plugin-dynamic-import-node/2.3.3:
     resolution: {integrity: sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==}
     dependencies:
@@ -4887,8 +5065,8 @@ packages:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
     dev: true
 
-  /electron/23.1.1:
-    resolution: {integrity: sha512-junV1NzPx5T8Mx9+o8fMWK1Q5WOtG5vggiM09PGYg/6zTcGDL3DjGVHeUa/97gx7ErXL37DrFnxNg6+ePWprDg==}
+  /electron/23.1.4:
+    resolution: {integrity: sha512-3Z6CpAPdhv6haYX9DTO7k0l6uAUreZM3/EngQYqGN3Gz7Fp0DPb/egt8BwR3ClG/jTlQM+PQ+5WkTK0eMjm07A==}
     engines: {node: '>= 12.20.55'}
     hasBin: true
     requiresBuild: true
@@ -5452,6 +5630,36 @@ packages:
       '@esbuild/win32-arm64': 0.16.10
       '@esbuild/win32-ia32': 0.16.10
       '@esbuild/win32-x64': 0.16.10
+    dev: true
+
+  /esbuild/0.17.12:
+    resolution: {integrity: sha512-bX/zHl7Gn2CpQwcMtRogTTBf9l1nl+H6R8nUbjk+RuKqAE3+8FDulLA+pHvX7aA7Xe07Iwa+CWvy9I8Y2qqPKQ==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/android-arm': 0.17.12
+      '@esbuild/android-arm64': 0.17.12
+      '@esbuild/android-x64': 0.17.12
+      '@esbuild/darwin-arm64': 0.17.12
+      '@esbuild/darwin-x64': 0.17.12
+      '@esbuild/freebsd-arm64': 0.17.12
+      '@esbuild/freebsd-x64': 0.17.12
+      '@esbuild/linux-arm': 0.17.12
+      '@esbuild/linux-arm64': 0.17.12
+      '@esbuild/linux-ia32': 0.17.12
+      '@esbuild/linux-loong64': 0.17.12
+      '@esbuild/linux-mips64el': 0.17.12
+      '@esbuild/linux-ppc64': 0.17.12
+      '@esbuild/linux-riscv64': 0.17.12
+      '@esbuild/linux-s390x': 0.17.12
+      '@esbuild/linux-x64': 0.17.12
+      '@esbuild/netbsd-x64': 0.17.12
+      '@esbuild/openbsd-x64': 0.17.12
+      '@esbuild/sunos-x64': 0.17.12
+      '@esbuild/win32-arm64': 0.17.12
+      '@esbuild/win32-ia32': 0.17.12
+      '@esbuild/win32-x64': 0.17.12
 
   /escalade/3.1.1:
     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@@ -6485,8 +6693,8 @@ packages:
     resolution: {integrity: sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==}
     dev: false
 
-  /hls.js/1.2.9:
-    resolution: {integrity: sha512-SPjm8ix0xe6cYzwDvdVGh2QvQPDkCYrGWpZu6bRaKNNVyEGWM9uF0pooh/Lqj/g8QBQgPFEx1vHzW8SyMY9rqg==}
+  /hls.js/1.3.5:
+    resolution: {integrity: sha512-uybAvKS6uDe0MnWNEPnO0krWVr+8m2R0hJ/viql8H3MVK+itq8gGQuIYoFHL3rECkIpNH98Lw8YuuWMKZxp3Ew==}
     dev: false
 
   /hoist-non-react-statics/3.3.2:
@@ -8564,6 +8772,14 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /postcss/8.4.21:
+    resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.4
+      picocolors: 1.0.0
+      source-map-js: 1.0.2
+
   /posthtml-parser/0.2.1:
     resolution: {integrity: sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==}
     dependencies:
@@ -9287,12 +9503,20 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup/3.18.0:
+    resolution: {integrity: sha512-J8C6VfEBjkvYPESMQYxKHxNOh4A5a3FlP+0BETGo34HEcE4eTlgCrO2+eWzlu2a/sHs2QUkZco+wscH7jhhgWg==}
+    engines: {node: '>=14.18.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+
   /rollup/3.9.1:
     resolution: {integrity: sha512-GswCYHXftN8ZKGVgQhTFUJB/NBXxrRGgO2NCy6E8s1rwEJ4Q9/VttNqcYfEvx4dTo4j58YqdC3OVztPzlKSX8w==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
       fsevents: 2.3.2
+    dev: true
 
   /rtl-css-js/1.16.0:
     resolution: {integrity: sha512-Oc7PnzwIEU4M0K1J4h/7qUUaljXhQ0kCObRsZjxs2HjkpKsnoTMvSmvJ4sqgJZd0zBoEfAyTdnK/jMIYvrjySQ==}
@@ -10403,65 +10627,65 @@ packages:
     engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
     dev: false
 
-  /turbo-darwin-64/1.6.3:
-    resolution: {integrity: sha512-QmDIX0Yh1wYQl0bUS0gGWwNxpJwrzZU2GIAYt3aOKoirWA2ecnyb3R6ludcS1znfNV2MfunP+l8E3ncxUHwtjA==}
+  /turbo-darwin-64/1.8.3:
+    resolution: {integrity: sha512-bLM084Wr17VAAY/EvCWj7+OwYHvI9s/NdsvlqGp8iT5HEYVimcornCHespgJS/yvZDfC+mX9EQkn3V2JmYgGGw==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-darwin-arm64/1.6.3:
-    resolution: {integrity: sha512-75DXhFpwE7CinBbtxTxH08EcWrxYSPFow3NaeFwsG8aymkWXF+U2aukYHJA6I12n9/dGqf7yRXzkF0S/9UtdyQ==}
+  /turbo-darwin-arm64/1.8.3:
+    resolution: {integrity: sha512-4oZjXtzakopMK110kue3z/hqu3WLv+eDLZOX1NGdo49gqca9BeD8GbH+sXpAp6tqyeuzpss+PIliVYuyt7LgbA==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-64/1.6.3:
-    resolution: {integrity: sha512-O9uc6J0yoRPWdPg9THRQi69K6E2iZ98cRHNvus05lZbcPzZTxJYkYGb5iagCmCW/pq6fL4T4oLWAd6evg2LGQA==}
+  /turbo-linux-64/1.8.3:
+    resolution: {integrity: sha512-uvX2VKotf5PU14FCxJA5iHItPQno2JWzerMd+g3/h/Asay6dvxvtVjc39MQeGT0H5njSvzVKFkT+3/5q8lgOEg==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-arm64/1.6.3:
-    resolution: {integrity: sha512-dCy667qqEtZIhulsRTe8hhWQNCJO0i20uHXv7KjLHuFZGCeMbWxB8rsneRoY+blf8+QNqGuXQJxak7ayjHLxiA==}
+  /turbo-linux-arm64/1.8.3:
+    resolution: {integrity: sha512-E1p+oH3XKMaPS4rqWhYsL4j2Pzc0d/9P5KU7Kn1kqVLo2T3iRA7n2KVULEieUNE0nTH+aIJPXYXOpqCI5wFJaA==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-64/1.6.3:
-    resolution: {integrity: sha512-lKRqwL3mrVF09b9KySSaOwetehmGknV9EcQTF7d2dxngGYYX1WXoQLjFP9YYH8ZV07oPm+RUOAKSCQuDuMNhiA==}
+  /turbo-windows-64/1.8.3:
+    resolution: {integrity: sha512-cnzAytHtoLXd0J7aNzRpZFpL/GTjcBmkvAPlbOdf/Pl1iwS4qzGrudZQ+OM1lmLgLIfBPIavsGHBknTwTNib4A==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-arm64/1.6.3:
-    resolution: {integrity: sha512-BXY1sDPEA1DgPwuENvDCD8B7Hb0toscjus941WpL8CVd10hg9pk/MWn9CNgwDO5Q9ks0mw+liDv2EMnleEjeNA==}
+  /turbo-windows-arm64/1.8.3:
+    resolution: {integrity: sha512-ulIiItNm2w/zYJdD5/oAzjzNns1IjbpweRzpsE8tLXaWwo6+fnXXkyloUug0IUhcd2k6fJXfoiDZfygqpOVuXg==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo/1.6.3:
-    resolution: {integrity: sha512-FtfhJLmEEtHveGxW4Ye/QuY85AnZ2ZNVgkTBswoap7UMHB1+oI4diHPNyqrQLG4K1UFtCkjOlVoLsllUh/9QRw==}
+  /turbo/1.8.3:
+    resolution: {integrity: sha512-zGrkU1EuNFmkq6iky6LcMqD4h0OLE8XysVFxQWRIZbcTNnf0XAycbsbeEyiJpiWeqb7qtg2bVuY9EYcNoNhVuQ==}
     hasBin: true
     requiresBuild: true
     optionalDependencies:
-      turbo-darwin-64: 1.6.3
-      turbo-darwin-arm64: 1.6.3
-      turbo-linux-64: 1.6.3
-      turbo-linux-arm64: 1.6.3
-      turbo-windows-64: 1.6.3
-      turbo-windows-arm64: 1.6.3
+      turbo-darwin-64: 1.8.3
+      turbo-darwin-arm64: 1.8.3
+      turbo-linux-64: 1.8.3
+      turbo-linux-arm64: 1.8.3
+      turbo-windows-64: 1.8.3
+      turbo-windows-arm64: 1.8.3
     dev: true
 
   /type-check/0.3.2:
@@ -10752,7 +10976,7 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /valtio/1.8.0_react@18.2.0+vite@4.0.4:
+  /valtio/1.8.0_react@18.2.0+vite@4.2.0:
     resolution: {integrity: sha512-lNw7wM0Qb9iBzXMju+XCn+UiIlf5uCe5pcI8XRqcvxEZ/mnRXyKXoOodPDKB8cIAVekA3Q3zWA7rboCdS4ea7g==}
     engines: {node: '>=12.7.0'}
     peerDependencies:
@@ -10779,7 +11003,7 @@ packages:
       proxy-compare: 2.3.0
       react: 18.2.0
       use-sync-external-store: 1.2.0_react@18.2.0
-      vite: 4.0.4
+      vite: 4.2.0
     dev: false
 
   /vary/1.1.2:
@@ -10806,7 +11030,7 @@ packages:
       pathe: 0.2.0
       source-map: 0.6.1
       source-map-support: 0.5.21
-      vite: 4.0.4_@types+node@18.11.17
+      vite: 4.2.0_@types+node@18.11.17
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -10817,8 +11041,8 @@ packages:
       - terser
     dev: true
 
-  /vite-plugin-pwa/0.14.1_vite@4.0.4:
-    resolution: {integrity: sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==}
+  /vite-plugin-pwa/0.14.4_vite@4.2.0:
+    resolution: {integrity: sha512-M7Ct0so8OlouMkTWgXnl8W1xU95glITSKIe7qswZf1tniAstO2idElGCnsrTJ5NPNSx1XqfTCOUj8j94S6FD7Q==}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0
     dependencies:
@@ -10827,7 +11051,7 @@ packages:
       fast-glob: 3.2.12
       pretty-bytes: 6.0.0
       rollup: 3.9.1
-      vite: 4.0.4
+      vite: 4.2.0
       workbox-build: 6.5.4
       workbox-window: 6.5.4
     transitivePeerDependencies:
@@ -10835,7 +11059,7 @@ packages:
       - supports-color
     dev: true
 
-  /vite-plugin-svg-icons/2.0.1_vite@4.0.4:
+  /vite-plugin-svg-icons/2.0.1_vite@4.2.0:
     resolution: {integrity: sha512-6ktD+DhV6Rz3VtedYvBKKVA2eXF+sAQVaKkKLDSqGUfnhqXl3bj5PPkVTl3VexfTuZy66PmINi8Q6eFnVfRUmA==}
     peerDependencies:
       vite: '>=2.0.0'
@@ -10848,7 +11072,7 @@ packages:
       pathe: 0.2.0
       svg-baker: 1.7.0
       svgo: 2.8.0
-      vite: 4.0.4
+      vite: 4.2.0
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -10880,8 +11104,8 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vite/4.0.4:
-    resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
+  /vite/4.2.0:
+    resolution: {integrity: sha512-AbDTyzzwuKoRtMIRLGNxhLRuv1FpRgdIw+1y6AQG73Q5+vtecmvzKo/yk8X/vrHDpETRTx01ABijqUHIzBXi0g==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -10905,15 +11129,15 @@ packages:
       terser:
         optional: true
     dependencies:
-      esbuild: 0.16.10
-      postcss: 8.4.20
+      esbuild: 0.17.12
+      postcss: 8.4.21
       resolve: 1.22.1
-      rollup: 3.9.1
+      rollup: 3.18.0
     optionalDependencies:
       fsevents: 2.3.2
 
-  /vite/4.0.4_@types+node@18.11.17:
-    resolution: {integrity: sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw==}
+  /vite/4.2.0_@types+node@18.11.17:
+    resolution: {integrity: sha512-AbDTyzzwuKoRtMIRLGNxhLRuv1FpRgdIw+1y6AQG73Q5+vtecmvzKo/yk8X/vrHDpETRTx01ABijqUHIzBXi0g==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -10938,10 +11162,10 @@ packages:
         optional: true
     dependencies:
       '@types/node': 18.11.17
-      esbuild: 0.16.10
-      postcss: 8.4.20
+      esbuild: 0.17.12
+      postcss: 8.4.21
       resolve: 1.22.1
-      rollup: 3.9.1
+      rollup: 3.18.0
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -11026,7 +11250,7 @@ packages:
       tinybench: 2.3.1
       tinypool: 0.3.0
       tinyspy: 1.0.2
-      vite: 4.0.4_@types+node@18.11.17
+      vite: 4.2.0_@types+node@18.11.17
       vite-node: 0.26.3_@types+node@18.11.17
     transitivePeerDependencies:
       - less
@@ -11173,7 +11397,7 @@ packages:
       '@apideck/better-ajv-errors': 0.3.6_ajv@8.11.0
       '@babel/core': 7.20.12
       '@babel/preset-env': 7.18.10_@babel+core@7.20.12
-      '@babel/runtime': 7.18.9
+      '@babel/runtime': 7.20.13
       '@rollup/plugin-babel': 5.3.1_xgoxr7twop5vl7zckj4amwg4xu
       '@rollup/plugin-node-resolve': 11.2.1_rollup@2.77.2
       '@rollup/plugin-replace': 2.4.2_rollup@2.77.2
diff --git a/vercel.json b/vercel.json
index 95076ff..44bf793 100644
--- a/vercel.json
+++ b/vercel.json
@@ -10,11 +10,11 @@
   "rewrites": [
     {
       "source": "/netease/:match*",
-      "destination": "http://168.138.174.244:30001/:match*"
+      "destination": "http://129.150.45.86:30001/:match*"
     },
     {
       "source": "/r3play/:match*",
-      "destination": "http://168.138.174.244:35530/:match*"
+      "destination": "http://129.150.45.86:35530/:match*"
     },
     {
       "source": "/(.*)",