Merge pull request #53 from imsyy/dev

fix: 修复空元素异常 #52
2025-11-25 11:29:26 +08:00 · 2023-06-13 09:30:02 +08:00 · 2023-06-12 18:04:58 +08:00 · 2023-06-12 16:41:37 +08:00 · 2023-06-12 16:40:43 +08:00 · 2023-06-05 18:26:33 +08:00
100 changed files with 6806 additions and 2507 deletions
--- a/.env
+++ b/.env
@@ -2,10 +2,22 @@
 ## 需部署 API，详见 https://github.com/Binaryify/NeteaseCloudMusicApi
 VITE_MUSIC_API = "https://api-music.imsyy.top/"

-# 网易云解灰 API 地址
+# 网易云解灰 API 地址（可选功能）
 ## 需部署 API，详见 https://github.com/imsyy/UNM-Server#%E8%BF%90%E8%A1%8C
 VITE_UNM_API = "https://api-unm.imsyy.top/"

+# 站点标题
+VITE_SITE_TITLE = "SPlayer"
+VITE_SITE_ANTHOR = "無名"
+VITE_SITE_KEYWORDS = "SPlayer,云音乐,播放器,在线音乐,在线播放器,音乐播放器,在线音乐播放器"
+VITE_SITE_DES = "一个简约的在线音乐播放器，具有音乐搜索、播放、每日推荐、私人FM、歌词显示、歌曲评论、网易云登录与云盘等功能"
+VITE_SITE_URL = "imsyy.top"
+VITE_SITE_LOGO = "/images/logo/favicon.svg"
+VITE_SITE_APPLE_LOGO = "/images/logo/favicon-apple.png"
+
+# 百度统计（若不需要，请设为空即可）
+VITE_SITE_BAIDUTONGJI = "c6579e9a33cbc5260fc90231678556ec"
+
 # ICP 备案号
 ## 若不需要，请设为空即可
 VITE_ICP = "豫ICP备2022018134号-1"
--- a/.hintrc
+++ b/.hintrc
@@ -21,6 +21,7 @@
          "meta[name=theme-color]"
        ]
      }
-    ]
+    ],
+    "apple-touch-icons": "off"
  }
 }
--- a/README.md
+++ b/README.md
@@ -6,8 +6,12 @@
 </div>
 <br />

-> 本项目采用 Vue 3 全家桶及 SCSS 开发  
-> 目前主要以 PC 端为主，移动端做了基础适配，仅保证功能
+## 说明
+
+- 本项目采用 [Vue 3](https://cn.vuejs.org/) 全家桶和 [Naïve UI](https://www.naiveui.com/) 组件库及 `SCSS` 开发
+- 目前主要以 `Web` 端为主，可能暂时不会考虑使用 `Electron` 构建客户端
+- 仅对移动端做了基础适配，**不保证功能全部可用**
+- 欢迎各位大佬指点和 `Star` 哦 😍

 ## 👀 Demo

@@ -16,7 +20,7 @@
 ## 🎉 功能

 - 支持扫码登录
- 支持手机号登录（目前暂时无法使用）
+- 支持手机号登录（上游接口暂时无法使用）
 - 自动进行每日签到及云贝签到
 - 支持 [UnblockNeteaseMusic](https://github.com/UnblockNeteaseMusic/server)，自动替换变灰歌曲
  - 由于酷我音源不支持 `https`，故网页端替换可能不全面
@@ -32,16 +36,20 @@
 - 支持逐字歌词
 - 歌词滚动以及歌词翻译
 - MV 与视频播放
- 音乐频谱显示（ 实验性功能，需在设置中开启 ）
+- 音乐频谱显示（ 暂时去除，还待完善 ）
 - 音乐渐入渐出
 - 支持 PWA
 - 支持评论区及评论点赞
 - 明暗模式自动 / 手动切换
 - 移动端基础适配
+- `i18n` 支持

 #### 待办

+- [ ] 电台节目支持
+- [ ] 歌词页面进一步完善
 - [ ] 发表评论
+- [ ] 重构（写成屎山了） 🤣

 ## 😍 Screenshots

@@ -49,30 +57,35 @@
 <summary>主页面</summary>

 ![主页面](/screenshots/SPlayer%20-%20%E4%B8%BB%E9%A1%B5%E9%9D%A2.png)
+
 </details>

 <details>
 <summary>播放页面</summary>

 ![播放页面](/screenshots/SPlayer%20-%20%E6%92%AD%E6%94%BE%E9%A1%B5%E9%9D%A2.png)
+
 </details>

 <details>
 <summary>发现页面</summary>

 ![发现页面](/screenshots/SPlayer%20-%20%E5%8F%91%E7%8E%B0%E9%A1%B5%E9%9D%A2.png)
+
 </details>

 <details>
 <summary>歌单页面</summary>

 ![歌单页面](/screenshots/SPlayer%20-%20%E6%AD%8C%E5%8D%95%E9%A1%B5%E9%9D%A2.png)
+
 </details>

 <details>
 <summary>评论页面</summary>

 ![评论页面](/screenshots/SPlayer%20-%20%E8%AF%84%E8%AE%BA%E9%A1%B5%E9%9D%A2.png)
+
 </details>

 ## ⚙️ 部署
@@ -86,7 +99,7 @@
 - 请在根目录下的 `.env` 文件中的 `VITE_MUSIC_API` 中填入 API 地址（必需）

 ```js
-VITE_MUSIC_API = "your api url"
+VITE_MUSIC_API = "your api url";
 ```

 ### 网易云解灰 API（可选）
@@ -136,6 +149,7 @@ npm build
 - [Vue-mmPlayer](https://github.com/maomao1996/Vue-mmPlayer)

 ## 📜 开源许可
+
 - **本项目仅供个人学习研究使用，禁止用于商业及非法用途**
 - 本项目基于 [MIT license](https://opensource.org/license/mit/) 许可进行开源

@@ -145,4 +159,4 @@ npm build

 同时，本项目开发者承诺 **严格遵守相关法律法规和网易云音乐 API 使用协议，不会利用本项目进行任何违法活动。** 如因使用本项目而引起的任何纠纷或责任，均由使用者自行承担。**本项目开发者不承担任何因使用本项目而导致的任何直接或间接责任，并保留追究使用者违法行为的权利**

-请使用者在使用本项目时遵守相关法律法规，**不要将本项目用于任何商业及非法用途。如有违反，一切后果由使用者自负。** 同时，使用者应该自行承担因使用本项目而带来的风险和责任。本项目开发者不对本项目所提供的服务和内容做出任何保证
+请使用者在使用本项目时遵守相关法律法规，**不要将本项目用于任何商业及非法用途。如有违反，一切后果由使用者自负。** 同时，使用者应该自行承担因使用本项目而带来的风险和责任。本项目开发者不对本项目所提供的服务和内容做出任何保证
--- a/index.html
+++ b/index.html
@@ -1,31 +1,79 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="<%- logo %>" />
+    <link rel="apple-touch-icon" href="<%- appleLogo %>" />
+    <link rel="bookmark" href="<%- appleLogo %>" />
+    <link
+      rel="apple-touch-icon-precomposed"
+      sizes="200x200"
+      href="<%- appleLogo %>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> -->
+    <title><%- title %></title>
+    <meta name="apple-mobile-web-app-title" content="<%- title %>" />
+    <meta name="author" content="<%- author %>" />
+    <meta name="keywords" content="<%- keywords %>" />
+    <meta name="description" content="<%- description %>" />
+    <meta name="theme-color" content="#ffffff" />
+    <!-- HarmonyOS Sans -->
+    <link
+      rel="stylesheet"
+      href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css"
+    />
+    <!-- IE Out -->
+    <script>
+      if (
+        /*@cc_on!@*/ false ||
+        (!!window.MSInputMethodContext && !!document.documentMode)
+      )
+        window.location.href =
+          "https://support.dmeng.net/upgrade-your-browser.html?referrer=" +
+          encodeURIComponent(window.location.href);
+    </script>
+    <% if (tongji) { %>
+    <!-- 百度统计 -->
+    <script>
+      var _hmt = _hmt || [];
+      (function () {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?<%- tongji %>";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
+    <% } %>
+    <style>
+      noscript {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: calc(100vh - 16px);
+        font-family: "HarmonyOS_Regular", sans-serif;
+      }
+      noscript .title {
+        font-size: 30px;
+        font-weight: bold;
+        margin-top: 50px;
+      }
+      noscript .tip {
+        opacity: 0.6;
+        margin: 0;
+      }
+    </style>
+  </head>

-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/images/logo/favicon.svg">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> -->
-  <title>SPlayer</title>
-  <meta name="keywords" content="SPlayer,云音乐,播放器,在线音乐,在线播放器,音乐播放器,在线音乐播放器" />
-  <meta name="description" content="一个简约的在线音乐播放器，具有音乐搜索、播放、每日推荐、私人FM、歌词显示、歌曲评论、网易云登录与云盘等功能" />
-  <meta name="theme-color" content="#ffffff">
-  <!-- HarmonyOS Sans -->
-  <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />
-  <script>
-    var _hmt = _hmt || [];
-    (function () {
-      var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?c6579e9a33cbc5260fc90231678556ec";
-      var s = document.getElementsByTagName("script")[0];
-      s.parentNode.insertBefore(hm, s);
-    })();
-  </script>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>
+  <body>
+    <div id="app"></div>
+    <noscript>
+      <img src="<%- logo %>" alt="logo" />
+      <p class="title"><%- title %></p>
+      <p class="tip">请开启 JavaScript</p>
+    </noscript>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "splayer",
-  "version": "1.1.5",
+  "version": "1.1.7",
  "author": "imsyy",
  "home": "https://imsyy.top",
  "github": "https://github.com/imsyy/SPlayer",
@@ -15,24 +15,30 @@
    "artplayer": "^4.5.12",
    "axios": "^1.2.0",
    "colorthief": "^2.4.0",
+    "howler": "^2.2.3",
    "pinia": "^2.0.26",
    "pinia-plugin-persistedstate": "^3.0.1",
    "plyr": "^3.7.3",
    "qrcode.vue": "^3.3.3",
    "sass": "^1.56.1",
    "screenfull": "^6.0.2",
+    "swiper": "^9.3.2",
+    "throttle-debounce": "^5.0.0",
+    "vite-plugin-html": "^3.2.0",
    "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.1.6",
+    "vue-slider-component": "4.1.0-beta.7"
  },
  "devDependencies": {
    "@jridgewell/sourcemap-codec": "^1.4.14",
    "@rollup/plugin-terser": "^0.4.0",
    "@vicons/material": "^0.12.0",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "naive-ui": "^2.34.2",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "naive-ui": "^2.34.4",
    "unplugin-auto-import": "^0.12.0",
    "unplugin-vue-components": "^0.22.11",
-    "vite": "^3.2.4",
-    "vite-plugin-pwa": "^0.14.1"
+    "vite": "^4.3.8",
+    "vite-plugin-pwa": "^0.15.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/images/logo/favicon-apple.png
+++ b/public/images/logo/favicon-apple.png
--- a/public/images/pic/radar.jpg
+++ b/public/images/pic/radar.jpg
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,8 +13,11 @@
        <main
          ref="mainContent"
          class="main"
-          id="main"
-          :class="[music.showPlayList ? 'playlist' : null]"
+          id="mainContent"
+          :class="{
+            playlist: music.showPlayList,
+            search: site.searchInputActive,
+          }"
        >
          <n-back-top
            :bottom="music.getPlaylists[0] && music.showPlayBar ? 100 : 40"
@@ -39,11 +42,13 @@ import { musicStore, userStore, settingStore, siteStore } from "@/store";
 import { useRouter } from "vue-router";
 import { getLoginState, refreshLogin } from "@/api/login";
 import { userDailySignin, userYunbeiSign } from "@/api/user";
+import { useI18n } from "vue-i18n";
 import Provider from "@/components/Provider/index.vue";
 import Nav from "@/components/Nav/index.vue";
 import Player from "@/components/Player/index.vue";
 import packageJson from "@/../package.json";

+const { t } = useI18n();
 const music = musicStore();
 const user = userStore();
 const setting = settingStore();
@@ -77,10 +82,10 @@ const spacePlayOrPause = (e) => {
 // 更改页面标题
 const setSiteTitle = (val) => {
  const title = val
-    ? val === "SPlayer"
+    ? val === import.meta.env.VITE_SITE_TITLE
      ? val
-      : val + " - SPlayer"
-    : site.siteTitle;
+      : val + " - " + import.meta.env.VITE_SITE_TITLE
+    : sessionStorage.getItem("siteTitle") ?? import.meta.env.VITE_SITE_TITLE;
  site.siteTitle = title;
  sessionStorage.setItem("siteTitle", title);
  if (!music.getPlayState) {
@@ -119,38 +124,50 @@ const signIn = () => {
    Promise.all(signInPromises)
      .then((results) => {
        localStorage.setItem("lastSignInDate", today);
-        console.log("签到成功！");
-        console.log("userDailySignin:", results[0]);
-        console.log("userYunbeiSign:", results[1]);
+        console.log(t("general.message.signInSuccess"), results[0], results[1]);
        $notification["success"]({
-          content: "签到成功",
-          meta: "每日签到及云贝签到成功",
+          content: t("general.message.signInSuccess"),
+          meta: t("general.message.signInSuccessDesc"),
          duration: 3000,
        });
      })
      .catch((error) => {
-        console.error("签到失败：", error);
-        $message.error("每日签到失败");
+        console.error(t("general.message.signInFailed"), error);
+        $message.error(t("general.message.signInFailed"));
      });
-  } else {
-    console.log("今天已经签到过了！");
  }
 };

 // 系统重置
 const cleanAll = () => {
-  $message ? $message.success("重置成功") : alert("重置成功");
+  $message ? $message.success(t("other.cleanAll")) : alert(t("other.cleanAll"));
  localStorage.clear();
  document.location.reload();
 };

+// 滚动至顶部
+const scrollToTop = () => {
+  nextTick().then(() => {
+    if (mainContent.value) {
+      mainContent.value?.scrollIntoView({ behavior: "smooth" });
+    } else {
+      const mainContent = document.getElementById("mainContent");
+      mainContent?.scrollIntoView({ behavior: "smooth" });
+    }
+  });
+};
+
 onMounted(() => {
-  // 挂载至全局
-  window.$mainContent = mainContent.value;
+  // 挂载方法至全局
+  window.$scrollToTop = scrollToTop;
  window.$cleanAll = cleanAll;
  window.$signIn = signIn;
  window.$setSiteTitle = setSiteTitle;

+  // 更改页面语言
+  const html = document.documentElement;
+  if (html) html.setAttribute("lang", setting.language);
+
  // 公告
  if (annShow) {
    $notification["info"]({
@@ -161,7 +178,7 @@ onMounted(() => {
  }

  // 版权声明
-  const logoText = "SPlayer";
+  const logoText = import.meta.env.VITE_SITE_TITLE;
  const copyrightNotice = `\n\n版本: ${packageJson.version}\n作者: ${packageJson.author}\n作者主页: ${packageJson.home}\nGitHub: ${packageJson.github}`;
  console.info(
    `%c${logoText} %c ${copyrightNotice}`,
@@ -189,15 +206,15 @@ onMounted(() => {
      } else {
        user.userLogOut();
        if (music.getPlayListMode === "cloud") {
-          $message.info("登录已失效，请重新登录");
+          $message.info(t("other.loginExpired"));
          music.setPlaylists([]);
          music.setPlayListMode("list");
        }
      }
    })
    .catch((err) => {
-      $message.error("请求发生错误");
-      console.error("请求发生错误" + err);
+      console.error(t("general.message.acquisitionFailed"), err);
+      $message.error(t("general.message.acquisitionFailed"));
      router.push("/500");
      return false;
    });
@@ -232,12 +249,31 @@ onMounted(() => {
    margin: 0 auto;
    div:nth-of-type(2) {
      transition: all 0.3s;
+      &::after {
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        transition: all 0.3s;
+        pointer-events: none;
+        z-index: 2;
+      }
    }
    &.playlist {
      div:nth-of-type(2) {
        transform: scale(0.98);
      }
    }
+    &.search {
+      div:nth-of-type(2) {
+        &::after {
+          pointer-events: all;
+          background-color: #00000040;
+        }
+      }
+    }
  }
 }

--- a/src/api/song.js
+++ b/src/api/song.js
@@ -43,10 +43,11 @@ export const getMusicUrl = (id, level = "exhigh") => {
 * @param {number} id - 要替换播放链接的音乐ID
 */
 export const getMusicNumUrl = async (id) => {
-  const server =
-    process.env.NODE_ENV === "development"
-      ? "kuwo,qq,pyncmd,kugou"
-      : "qq,pyncmd,kugou";
+  // const server =
+  //   process.env.NODE_ENV === "development"
+  //     ? "kuwo,qq,pyncmd,kugou"
+  //     : "qq,pyncmd,kugou";
+  const server = "kuwo,qq,pyncmd,kugou";
  const url = `${import.meta.env.VITE_UNM_API}match?id=${id}&server=${server}`;
  const response = await fetch(url, {
    method: "GET",
@@ -100,6 +101,7 @@ export const getMusicDetail = (ids) => {
    url: "/song/detail",
    params: {
      ids,
+      timestamp: new Date().getTime(),
    },
  });
 };
--- a/src/components/Banner/index.vue
+++ b/src/components/Banner/index.vue
@@ -36,7 +36,9 @@
 <script setup>
 import { useRouter } from "vue-router";
 import { getBanner } from "@/api/home";
+import { useI18n } from "vue-i18n";

+const { t } = useI18n();
 const router = useRouter();

 // 轮播图高度
@@ -78,7 +80,7 @@ const bannerJump = (type, id, url) => {
      const time = setTimeout(() => {
        window.open(url);
      }, 2000);
-      $message.loading("即将跳转至站外链接", {
+      $message.loading(t("general.message.jumpOut"), {
        closable: true,
        duration: 2000,
        onClose: () => {
@@ -116,7 +118,6 @@ onMounted(() => {
 });

 onBeforeUnmount(() => {
-  console.log("销毁");
  window.removeEventListener("resize", getBannerHeight);
 });
 </script>
--- a/src/components/Comment/index.vue
+++ b/src/components/Comment/index.vue
@@ -78,12 +78,14 @@
 </template>

 <script setup>
-import { getCommentTime, formatNumber } from "@/utils/timeTools.js";
+import { getCommentTime, formatNumber } from "@/utils/timeTools";
 import { Local, Time, ThumbsUp } from "@icon-park/vue-next";
 import { userStore } from "@/store";
 import { useRouter } from "vue-router";
 import { likeComment } from "@/api/comment";
+import { useI18n } from "vue-i18n";

+const { t } = useI18n();
 const user = userStore();
 const router = useRouter();
 const props = defineProps({
@@ -104,15 +106,14 @@ const toLikeComment = () => {
      type
    ).then((res) => {
      if (res.code === 200) {
-        $message.success(type ? "点赞成功" : "取消点赞成功");
        props.commentData.liked = !props.commentData.liked;
        props.commentData.likedCount += type ? 1 : -1;
      } else {
-        $message.error("操作失败，请重试");
+        $message.error(t("general.message.operationFailed"));
      }
    });
  } else {
-    $message.error("请登录账号后使用");
+    $message.error(t("general.message.needLogin"));
  }
 };
 </script>
--- a/src/components/DataList/AllArtists.vue
+++ b/src/components/DataList/AllArtists.vue
@@ -7,7 +7,7 @@
    >
      <n-text
        class="name"
-        depth="3"
+        :depth="isDark ? 3 : 0"
        v-html="item.name"
        @click.stop="jumpArtist(item.id)"
      />
@@ -34,6 +34,11 @@ const props = defineProps({
    type: Array,
    default: [],
  },
+  // 是否变灰
+  isDark: {
+    type: Boolean,
+    default: true,
+  },
 });

 // 跳转歌手页面
@@ -67,4 +72,4 @@ const jumpArtist = (id) => {
    opacity: 0.8;
  }
 }
-</style>
+</style>
--- a/src/components/DataList/ArtistLists.vue
+++ b/src/components/DataList/ArtistLists.vue
@@ -19,16 +19,34 @@
        >
          <div class="cover">
            <n-avatar
+              lazy
              round
              class="coverImg"
              :src="item.cover.replace(/^http:/, 'https:') + '?param=200y200'"
              fallback-src="/images/pic/default.png"
+            >
+              <template #placeholder>
+                <div class="cover-loading">
+                  <n-spin size="small" />
+                </div>
+              </template>
+            </n-avatar>
+            <n-avatar
+              lazy
+              round
+              class="shadow"
+              :src="item.cover.replace(/^http:/, 'https:') + '?param=200y200'"
+              fallback-src="/images/pic/default.png"
            />
            <n-icon size="40" :component="PeopleSearchOne" />
          </div>
          <n-text class="name text-hidden">{{ item.name }}</n-text>
          <n-text class="size" :depth="3" v-if="item.size">
-            {{ item.size }}首
+            {{
+              $t("general.name.songSize", {
+                size: item.size,
+              })
+            }}
          </n-text>
        </n-gi>
      </n-grid>
@@ -65,12 +83,16 @@
 </template>

 <script setup>
-import { PeopleSearchOne } from "@icon-park/vue-next";
+import { NIcon } from "naive-ui";
+import { PeopleSearchOne, LinkTwo, Like, Unlike } from "@icon-park/vue-next";
 import { likeArtist } from "@/api/artist";
 import { useRouter } from "vue-router";
-import { userStore } from "@/store";
+import { userStore, settingStore } from "@/store";
+import { useI18n } from "vue-i18n";

+const { t } = useI18n();
 const user = userStore();
+const setting = settingStore();
 const router = useRouter();
 const props = defineProps({
  // 列表数据
@@ -101,6 +123,19 @@ const rightMenuY = ref(0);
 const rightMenuShow = ref(false);
 const rightMenuOptions = ref(null);

+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { style: { transform: "translateX(2px)" } },
+      {
+        default: () => icon,
+      }
+    );
+  };
+};
+
 // 打开右键菜单
 const openRightMenu = (e, data) => {
  e.preventDefault();
@@ -109,8 +144,11 @@ const openRightMenu = (e, data) => {
    rightMenuOptions.value = [
      {
        key: "like",
-        label: isLikeOrDislike(data.id) ? "收藏歌手" : "取消收藏歌手",
+        label: isLikeOrDislike(data.id)
+          ? t("menu.collection", { name: t("general.name.artists") })
+          : t("menu.cancelCollection", { name: t("general.name.artists") }),
        show: user.userLogin && user.getUserArtistLists.has ? true : false,
+        icon: renderIcon(h(isLikeOrDislike(data.id) ? Like : Unlike)),
        props: {
          onClick: () => {
            toLikeArtist(data);
@@ -119,7 +157,11 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "copy",
-        label: "复制歌手链接",
+        label: t("menu.copy", {
+          name: t("general.name.artists"),
+          other: t("general.name.link"),
+        }),
+        icon: renderIcon(h(LinkTwo)),
        props: {
          onClick: () => {
            if (navigator.clipboard) {
@@ -127,12 +169,13 @@ const openRightMenu = (e, data) => {
                navigator.clipboard.writeText(
                  `https://music.163.com/#/artist?id=${data.id}`
                );
-                $message.success("歌手链接复制成功");
+                $message.success(t("general.message.copySuccess"));
              } catch (err) {
-                $message.error("复制失败：", err);
+                console.error(t("general.message.copyFailure"), err);
+                $message.error(t("general.message.copyFailure"));
              }
            } else {
-              $message.error("您的浏览器暂不支持该操作");
+              $message.error(t("general.message.notSupported"));
            }
          },
        },
@@ -152,14 +195,25 @@ const onClickoutside = () => {
 // 收藏/取消收藏歌手
 const toLikeArtist = (data) => {
  const type = isLikeOrDislike(data.id) ? 1 : 2;
+  const isThereASpace = setting.language === "zh-CN" ? "" : " ";
  likeArtist(type, data.id).then((res) => {
    if (res.code === 200) {
      $message.success(
-        `${data.name}${type == 1 ? "收藏成功" : "取消收藏成功"}`
+        `${data.name + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.success") })
+            : t("menu.cancelCollection", { name: t("general.dialog.success") })
+        }`
      );
      user.setUserArtistLists();
    } else {
-      $message.error(`${data.name}${type == 1 ? "收藏失败" : "取消收藏失败"}`);
+      $message.error(
+        `${data.name + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.failed") })
+            : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+        }`
+      );
    }
  });
 };
@@ -205,12 +259,44 @@ onMounted(() => {
      box-shadow: 0 4px 16px 0 #00000020;
      border-radius: 50%;
      transition: all 0.3s;
-      .n-avatar {
+      .coverImg {
        filter: brightness(1);
        transform: scale(1);
        width: 100%;
        height: 100%;
        transition: all 0.3s;
+        z-index: 1;
+        .cover-loading {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 0;
+          padding-bottom: 100%;
+          background-color: #0001;
+          .n-spin-body {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+      .shadow {
+        opacity: 0;
+        position: absolute;
+        top: 12px;
+        height: 100%;
+        width: 100%;
+        filter: blur(16px) opacity(0.6);
+        transform: scale(0.92, 0.96);
+        z-index: 0;
+        background-size: cover;
+        aspect-ratio: 1/1;
+        transition: opacity 0.3s;
      }
      .n-icon {
        opacity: 0;
@@ -218,6 +304,7 @@ onMounted(() => {
        position: absolute;
        color: #fff;
        transition: all 0.3s;
+        z-index: 1;
      }
      &:hover {
        box-shadow: 0 4px 16px 0 #00000040;
@@ -225,10 +312,13 @@ onMounted(() => {
          opacity: 1;
          transform: scale(1);
        }
-        .n-avatar {
+        .coverImg {
          filter: brightness(0.8);
          transform: scale(1.05);
        }
+        .shadow {
+          opacity: 1;
+        }
      }
      &:active {
        .n-avatar {
--- a/src/components/DataList/CoverLists.vue
+++ b/src/components/DataList/CoverLists.vue
@@ -18,9 +18,24 @@
          @contextmenu="openRightMenu($event, item)"
        >
          <div class="cover">
-            <n-avatar
+            <n-image
+              lazy
              class="coverImg"
-              :src="item.cover.replace(/^http:/, 'https:') + '?param=300y300'"
+              preview-disabled
+              :src="getCoverUrl(item.cover, 300)"
+              fallback-src="/images/pic/default.png"
+            >
+              <template #placeholder>
+                <div class="cover-loading">
+                  <n-spin size="small" />
+                </div>
+              </template>
+            </n-image>
+            <n-image
+              lazy
+              class="shadow"
+              preview-disabled
+              :src="getCoverUrl(item.cover, 300)"
              fallback-src="/images/pic/default.png"
            />
            <n-icon class="play" size="40">
@@ -86,17 +101,30 @@
 </template>

 <script setup>
-import { PlayOne, Headset } from "@icon-park/vue-next";
+import { NIcon } from "naive-ui";
+import {
+  PlayOne,
+  Headset,
+  LinkTwo,
+  Like,
+  Unlike,
+  Editor,
+  DeleteFour,
+} from "@icon-park/vue-next";
+import { useI18n } from "vue-i18n";
 import { delPlayList, likePlaylist } from "@/api/playlist";
 import { likeAlbum } from "@/api/album";
-import { musicStore, userStore } from "@/store";
+import { musicStore, userStore, settingStore } from "@/store";
 import { useRouter } from "vue-router";
 import AllArtists from "./AllArtists.vue";
 import PlaylistUpdate from "@/components/DataModal/PlaylistUpdate.vue";
+import getCoverUrl from "@/utils/getCoverUrl";

+const { t } = useI18n();
 const router = useRouter();
 const music = musicStore();
 const user = userStore();
+const setting = settingStore();
 const props = defineProps({
  // 列表数据
  listData: {
@@ -131,6 +159,19 @@ const props = defineProps({
 });
 const playlistUpdateRef = ref(null);

+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { style: { transform: "translateX(2px)" } },
+      {
+        default: () => icon,
+      }
+    );
+  };
+};
+
 // 右键菜单数据
 const rightMenuX = ref(0);
 const rightMenuY = ref(0);
@@ -145,18 +186,19 @@ const openRightMenu = (e, data) => {
    rightMenuOptions.value = [
      {
        key: "update",
-        label: "编辑歌单",
+        label: t("menu.update"),
        show:
          router.currentRoute.value.name === "user-playlists" ? true : false,
        props: {
          onClick: () => {
-            playlistUpdateRef.value.openUpdateModel(data);
+            playlistUpdateRef.value.openUpdateModal(data);
          },
        },
+        icon: renderIcon(h(Editor)),
      },
      {
        key: "del",
-        label: "删除歌单",
+        label: t("menu.del"),
        show:
          router.currentRoute.value.name === "user-playlists" ? true : false,
        props: {
@@ -164,10 +206,13 @@ const openRightMenu = (e, data) => {
            toDelPlayList(data);
          },
        },
+        icon: renderIcon(h(DeleteFour)),
      },
      {
        key: "likePlaylist",
-        label: isLikeOrDislike(data.id) ? "收藏歌单" : "取消收藏歌单",
+        label: isLikeOrDislike(data.id)
+          ? t("menu.collection", { name: t("general.name.playlist") })
+          : t("menu.cancelCollection", { name: t("general.name.playlist") }),
        show:
          user.userLogin &&
          user.getUserPlayLists.has &&
@@ -180,10 +225,13 @@ const openRightMenu = (e, data) => {
            toChangeLike(data.id);
          },
        },
+        icon: renderIcon(h(isLikeOrDislike(data.id) ? Like : Unlike)),
      },
      {
        key: "likeAlbum",
-        label: isLikeOrDislike(data.id) ? "收藏专辑" : "取消收藏专辑",
+        label: isLikeOrDislike(data.id)
+          ? t("menu.collection", { name: t("general.name.album") })
+          : t("menu.cancelCollection", { name: t("general.name.album") }),
        show:
          user.userLogin &&
          user.getUserAlbumLists.has &&
@@ -195,10 +243,17 @@ const openRightMenu = (e, data) => {
            toChangeLike(data.id);
          },
        },
+        icon: renderIcon(h(isLikeOrDislike(data.id) ? Like : Unlike)),
      },
      {
        key: "copy",
-        label: `复制${props.listType === "playlist" ? "歌单" : "专辑"}链接`,
+        label: t("menu.copy", {
+          name:
+            props.listType === "playlist"
+              ? t("general.name.playlist")
+              : t("general.name.album"),
+          other: t("general.name.link"),
+        }),
        props: {
          onClick: () => {
            if (navigator.clipboard) {
@@ -208,19 +263,17 @@ const openRightMenu = (e, data) => {
                    props.listType === "playlist" ? "playlist" : "album"
                  }?id=${data.id}`
                );
-                $message.success(
-                  `${
-                    props.listType === "playlist" ? "歌单" : "专辑"
-                  }链接复制成功`
-                );
+                $message.success(t("general.message.copySuccess"));
              } catch (err) {
-                $message.error("复制失败：", err);
+                console.error(t("general.message.copyFailure"), err);
+                $message.error(t("general.message.copyFailure"));
              }
            } else {
-              $message.error("您的浏览器暂不支持该操作");
+              $message.error(t("general.message.notSupported"));
            }
          },
        },
+        icon: renderIcon(h(LinkTwo)),
      },
    ];
    rightMenuShow.value = true;
@@ -256,16 +309,22 @@ const toLink = (id) => {

 // 删除歌单
 const toDelPlayList = (data) => {
+  if (data.id === user.getUserPlayLists?.own[0].id) {
+    $message.warning(t("menu.unableToDelete"));
+    return false;
+  }
  $dialog.warning({
    class: "s-dialog",
-    title: "删除歌单",
-    content: "确认删除歌单 " + data.name + "？删除后将不可恢复！",
-    positiveText: "删除",
-    negativeText: "取消",
+    title: t("general.dialog.delete"),
+    content: t("menu.delQuestion", {
+      name: data.name,
+    }),
+    positiveText: t("general.dialog.delete"),
+    negativeText: t("general.dialog.cancel"),
    onPositiveClick: () => {
      delPlayList(data.id).then((res) => {
        if (res.code === 200) {
-          $message.success("删除成功");
+          $message.success(t("general.message.deleteSuccess"));
          user.setUserPlayLists();
        }
      });
@@ -279,10 +338,10 @@ const isLikeOrDislike = (id) => {
  const playlists = user.getUserPlayLists.like;
  const albums = user.getUserAlbumLists.list;
  if (listType === "playlist" && playlists.length) {
-    return !playlists.some((item) => item.id === id);
+    return !playlists.some((item) => item.id === Number(id));
  }
  if (listType === "album" && albums.length) {
-    return !albums.some((item) => item.id === id);
+    return !albums.some((item) => item.id === Number(id));
  }
  return true;
 };
@@ -292,21 +351,48 @@ const toChangeLike = async (id) => {
  const listType = props.listType;
  const type = isLikeOrDislike(id) ? 1 : 2;
  const likeFn = listType === "playlist" ? likePlaylist : likeAlbum;
-  const likeMsg = listType === "playlist" ? "歌单" : "专辑";
+  const likeMsg =
+    listType === "playlist"
+      ? t("general.name.playlist")
+      : t("general.name.album");
+  const isThereASpace = setting.language === "zh-CN" ? "" : " ";
  try {
    const res = await likeFn(type, id);
    if (res.code === 200) {
-      $message.success(`${likeMsg}${type == 1 ? "收藏成功" : "取消收藏成功"}`);
+      $message.success(
+        `${likeMsg + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.success") })
+            : t("menu.cancelCollection", { name: t("general.dialog.success") })
+        }`
+      );
      listType === "playlist"
        ? user.setUserPlayLists()
        : user.setUserAlbumLists();
    } else {
-      $message.error(`${likeMsg}${type == 1 ? "收藏失败" : "取消收藏失败"}`);
+      $message.error(
+        `${likeMsg + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.failed") })
+            : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+        }`
+      );
    }
  } catch (err) {
-    $message.error(`${likeMsg}${type == 1 ? "收藏失败" : "取消收藏失败"}`);
+    $message.error(
+      `${likeMsg + isThereASpace}${
+        type == 1
+          ? t("menu.collection", { name: t("general.dialog.failed") })
+          : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+      }`
+    );
    console.error(
-      `${likeMsg}${type == 1 ? "收藏失败：" : "取消收藏失败："}` + err
+      `${likeMsg + isThereASpace}${
+        type == 1
+          ? t("menu.collection", { name: t("general.dialog.failed") })
+          : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+      }`,
+      err
    );
  }
 };
@@ -356,7 +442,7 @@ onMounted(() => {
      align-items: center;
      justify-content: center;
      position: relative;
-      overflow: hidden;
+      // overflow: hidden;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
@@ -365,7 +451,44 @@ onMounted(() => {
        border-radius: 8px;
        width: 100%;
        height: 100%;
-        transition: all 0.3s;
+        overflow: hidden;
+        transition: filter 0.3s;
+        z-index: 1;
+        :deep(img) {
+          width: 100%;
+          transition: transform 0.3s;
+        }
+        .cover-loading {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 0;
+          padding-bottom: 100%;
+          background-color: #0001;
+          .n-spin-body {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+      .shadow {
+        opacity: 0;
+        position: absolute;
+        top: 12px;
+        height: 100%;
+        width: 100%;
+        filter: blur(16px) opacity(0.6);
+        transform: scale(0.92, 0.96);
+        z-index: 0;
+        background-size: cover;
+        aspect-ratio: 1/1;
+        transition: opacity 0.3s;
      }
      .play {
        opacity: 0;
@@ -378,6 +501,7 @@ onMounted(() => {
        border-radius: 50%;
        transform: scale(0.8);
        transition: all 0.3s;
+        z-index: 1;
      }
      .description {
        position: absolute;
@@ -390,7 +514,9 @@ onMounted(() => {
        backdrop-filter: blur(4px);
        padding: 6px;
        border-top-left-radius: 8px;
+        border-bottom-right-radius: 8px;
        transition: all 0.3s;
+        z-index: 1;
        .num {
          display: flex;
          flex-direction: row;
@@ -404,10 +530,11 @@ onMounted(() => {
        }
      }
      &:hover {
-        box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
        .coverImg {
          filter: brightness(0.8);
-          transform: scale(1.1);
+          :deep(img) {
+            transform: scale(1.1);
+          }
        }
        .play {
          transform: scale(1);
@@ -416,6 +543,9 @@ onMounted(() => {
        .description {
          opacity: 0;
        }
+        .shadow {
+          opacity: 1;
+        }
      }
      &:active {
        transform: scale(0.98);
@@ -460,5 +590,18 @@ onMounted(() => {
      margin-bottom: 12px;
    }
  }
+  @media (max-width: 450px) {
+    :deep(.n-grid) {
+      gap: 18px 10px;
+    }
+    .item {
+      .title {
+        margin-top: 8px;
+        .name {
+          font-size: 13px;
+        }
+      }
+    }
+  }
 }
 </style>
--- a/src/components/DataList/DataLists.vue
+++ b/src/components/DataList/DataLists.vue
@@ -1,6 +1,6 @@
 <template>
  <Transition mode="out-in">
-    <div class="datalists" v-if="listData[0]">
+    <div class="datalists" id="datalists" v-if="listData[0]">
      <n-card
        v-for="item in listData"
        :key="item"
@@ -25,6 +25,7 @@
      >
        <n-avatar
          v-if="item.album?.picUrl"
+          lazy
          class="pic"
          :src="item.album.picUrl.replace(/^http:/, 'https:') + '?param=60y60'"
          fallback-src="/images/pic/default.png"
@@ -47,7 +48,7 @@
              :bordered="false"
              size="small"
            >
-              {{ item.fee == 1 ? "VIP" : "数字专辑" }}
+              {{ item.fee == 1 ? "VIP" : "EP" }}
            </n-tag>
            <n-tag
              v-if="item.pc"
@@ -57,7 +58,7 @@
              size="small"
              :bordered="false"
            >
-              云盘
+              {{ $t("general.name.cloud") }}
            </n-tag>
            <n-tag
              v-if="item.mv"
@@ -108,7 +109,7 @@
          <n-icon
            class="download"
            size="20"
-            @click.stop="downloadSongRef.openDownloadModel(item)"
+            @click.stop="downloadSongRef.openDownloadModal(item)"
          >
            <DownloadFour theme="filled" />
          </n-icon>
@@ -164,7 +165,7 @@
              <n-icon size="20">
                <PlayOne theme="filled" />
              </n-icon>
-              <n-text>立即播放</n-text>
+              <n-text>{{ $t("menu.play") }}</n-text>
            </div>
            <div
              v-if="
@@ -182,7 +183,7 @@
              <n-icon size="20">
                <AddMusic theme="filled" />
              </n-icon>
-              <n-text>下一首播放</n-text>
+              <n-text>{{ $t("menu.nextPlay") }}</n-text>
            </div>
            <div
              class="item"
@@ -196,13 +197,13 @@
              <n-icon size="20">
                <ListAdd theme="filled" />
              </n-icon>
-              <n-text>添加到歌单</n-text>
+              <n-text>{{ $t("menu.add") }}</n-text>
            </div>
            <div
              class="item"
              @click="
                () => {
-                  downloadSongRef.openDownloadModel(drawerData);
+                  downloadSongRef.openDownloadModal(drawerData);
                  drawerShow = false;
                }
              "
@@ -210,7 +211,7 @@
              <n-icon size="20">
                <DownloadFour theme="filled" />
              </n-icon>
-              <n-text>歌曲下载</n-text>
+              <n-text>{{ $t("menu.download") }}</n-text>
            </div>
            <div
              class="item"
@@ -219,7 +220,7 @@
              <n-icon size="20">
                <Comments theme="filled" />
              </n-icon>
-              <n-text>前往评论区</n-text>
+              <n-text>{{ $t("menu.comment") }}</n-text>
            </div>
            <div
              class="item"
@@ -229,7 +230,7 @@
              <n-icon size="20">
                <Video theme="filled" />
              </n-icon>
-              <n-text>观看 MV</n-text>
+              <n-text>{{ $t("menu.mv") }}</n-text>
            </div>
            <div
              class="item"
@@ -243,14 +244,14 @@
              <n-icon size="20">
                <LinkTwo theme="filled" />
              </n-icon>
-              <n-text>复制歌曲链接</n-text>
+              <n-text>{{ $t("menu.copy") }}</n-text>
            </div>
            <div class="item">
              <n-icon size="20">
                <Voice theme="filled" />
              </n-icon>
              <n-text>
-                歌手：
+                {{ $t("general.name.artists") }}:
                <AllArtists
                  class="text-hidden"
                  :artistsData="drawerData.artist"
@@ -264,7 +265,9 @@
              <n-icon size="20">
                <RecordDisc theme="filled" />
              </n-icon>
-              <n-text>专辑：{{ drawerData.album.name }}</n-text>
+              <n-text>
+                {{ $t("general.name.album") }}: {{ drawerData.album.name }}
+              </n-text>
            </div>
            <div
              v-if="router.currentRoute.value.name === 'user-cloud'"
@@ -279,7 +282,7 @@
              <n-icon size="20">
                <FileMusic theme="filled" />
              </n-icon>
-              <n-text>歌曲信息纠正</n-text>
+              <n-text>{{ $t("menu.match") }}</n-text>
            </div>
            <div
              v-if="router.currentRoute.value.name === 'user-cloud'"
@@ -294,7 +297,7 @@
              <n-icon size="20">
                <DeleteFour theme="filled" />
              </n-icon>
-              <n-text>从云盘中删除</n-text>
+              <n-text>{{ $t("menu.delete") }}</n-text>
            </div>
          </div>
        </n-drawer-content>
@@ -331,12 +334,15 @@ import { musicStore, settingStore, userStore } from "@/store";
 import { useRouter } from "vue-router";
 import { setCloudDel } from "@/api/user";
 import { NIcon } from "naive-ui";
+import { soundStop } from "@/utils/Player";
+import { useI18n } from "vue-i18n";
 import AllArtists from "./AllArtists.vue";
 import AddPlaylist from "@/components/DataModal/AddPlaylist.vue";
 import CloudMatch from "@/components/DataModal/CloudMatch.vue";
 import DownloadSong from "@/components/DataModal/DownloadSong.vue";
 import SmallSongData from "./SmallSongData.vue";

+const { t } = useI18n();
 const router = useRouter();
 const music = musicStore();
 const setting = settingStore();
@@ -368,22 +374,6 @@ const rightMenuOptions = ref(null);
 const drawerShow = ref(false);
 const drawerData = ref(null);

-// 复制歌曲链接或ID
-const copySongData = (id, url = true) => {
-  if (navigator.clipboard) {
-    try {
-      navigator.clipboard.writeText(
-        url ? `https://music.163.com/#/song?id=${id}` : id
-      );
-      $message.success(`歌曲${url ? "链接" : " ID "}复制成功`);
-    } catch (err) {
-      $message.error("复制失败：", err);
-    }
-  } else {
-    $message.error("您的浏览器暂不支持该操作");
-  }
-};
-
 // 图标渲染
 const renderIcon = (icon, filled = true) => {
  return () => {
@@ -405,7 +395,7 @@ const openRightMenu = (e, data) => {
    rightMenuOptions.value = [
      {
        key: "play",
-        label: "立即播放",
+        label: t("menu.play"),
        icon: renderIcon(PlayOne),
        props: {
          onClick: () => {
@@ -415,10 +405,10 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "nextPlay",
-        label: "下一首播放",
+        label: t("menu.nextPlay"),
        icon: renderIcon(AddMusic),
        show:
-          music.getPersonalFmMode || music.getPlaySongData.id == data.id
+          music.getPersonalFmMode || music.getPlaySongData?.id == data.id
            ? false
            : true,
        props: {
@@ -429,7 +419,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "add",
-        label: "添加到歌单",
+        label: t("menu.add"),
        icon: renderIcon(ListAdd),
        show: user.userLogin ? true : false,
        props: {
@@ -440,17 +430,17 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "download",
-        label: "歌曲下载",
+        label: t("menu.download"),
        icon: renderIcon(DownloadFour),
        props: {
          onClick: () => {
-            downloadSongRef.value.openDownloadModel(data);
+            downloadSongRef.value.openDownloadModal(data);
          },
        },
      },
      {
        key: "comment",
-        label: "前往评论区",
+        label: t("menu.comment"),
        icon: renderIcon(Comments, false),
        props: {
          onClick: () => {
@@ -460,7 +450,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "mv",
-        label: "观看 MV",
+        label: t("menu.mv"),
        icon: renderIcon(Video, false),
        show: data.mv && data.mv != 0 ? true : false,
        props: {
@@ -476,7 +466,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "delete",
-        label: "从云盘中删除",
+        label: t("menu.delete"),
        icon: renderIcon(DeleteFour),
        show: router.currentRoute.value.name === "user-cloud" ? true : false,
        props: {
@@ -487,7 +477,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "match",
-        label: "歌曲信息纠正",
+        label: t("menu.match"),
        icon: renderIcon(FileMusic),
        show: router.currentRoute.value.name === "user-cloud" ? true : false,
        props: {
@@ -502,7 +492,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "search",
-        label: "同名搜索",
+        label: t("menu.search"),
        icon: renderIcon(Search, false),
        props: {
          onClick: () => {
@@ -518,7 +508,10 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "copyId",
-        label: "复制歌曲 ID",
+        label: t("menu.copy", {
+          name: t("general.name.song"),
+          other: "ID",
+        }),
        icon: renderIcon(FileMusic, false),
        props: {
          onClick: () => {
@@ -528,7 +521,10 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "copy",
-        label: "复制歌曲链接",
+        label: t("menu.copy", {
+          name: t("general.name.song"),
+          other: t("general.name.link"),
+        }),
        icon: renderIcon(LinkTwo),
        props: {
          onClick: () => {
@@ -548,23 +544,42 @@ const onClickoutside = () => {
  rightMenuShow.value = false;
 };

+// 复制歌曲链接或ID
+const copySongData = (id, url = true) => {
+  if (navigator.clipboard) {
+    try {
+      navigator.clipboard.writeText(
+        url ? `https://music.163.com/#/song?id=${id}` : id
+      );
+      $message.success(t("general.message.copySuccess"));
+    } catch (err) {
+      console.error(t("general.message.copyFailure"), err);
+      $message.error(t("general.message.copyFailure"));
+    }
+  } else {
+    $message.error(t("general.message.notSupported"));
+  }
+};
+
 // 云盘歌曲删除
 const delCloudSong = (data) => {
  $dialog.warning({
    class: "s-dialog",
-    title: "歌曲删除",
-    content: "确认从云盘中删除歌曲 " + data.name + " ？",
-    positiveText: "删除",
-    negativeText: "取消",
+    title: t("general.dialog.delete"),
+    content: t("menu.deleteQuestion", {
+      name: data.name,
+    }),
+    positiveText: t("general.dialog.delete"),
+    negativeText: t("general.dialog.cancel"),
    onPositiveClick: () => {
      setCloudDel(data.id).then((res) => {
        if (res.code == 200) {
-          $message.success("云盘歌曲删除成功");
+          $message.success(t("general.message.deleteSuccess"));
          props.listData.forEach((v, i) => {
            if (v.id == data.id) props.listData.splice(i, 1);
          });
        } else {
-          $message.error("云盘歌曲删除失败");
+          $message.error(t("general.message.deleteFailure"));
        }
      });
    },
@@ -581,7 +596,11 @@ const openDrawer = (data) => {
 // 播放并添加
 const playSong = (data, song) => {
  console.log(data, song);
-  music.setPersonalFmMode(false);
+  if (music.getPersonalFmMode) {
+    soundStop($player);
+    music.setPersonalFmMode(false);
+  }
+  music.setPlayState(true);
  if (router.currentRoute.value.name !== "history") music.setPlaylists(data);
  // 检查是否为云盘歌曲
  if (router.currentRoute.value.name === "user-cloud") {
@@ -637,7 +656,8 @@ const jumpLink = (id, type) => {
    &:hover {
      border-color: var(--main-color);
      box-shadow: 0 1px 2px -2px var(--main-boxshadow-color),
-        0 3px 6px 0 var(--main-boxshadow-color), 0 5px 12px 4px var(--main-boxshadow-hover-color);
+        0 3px 6px 0 var(--main-boxshadow-color),
+        0 5px 12px 4px var(--main-boxshadow-hover-color);
      .action {
        .like,
        .download {
--- a/src/components/DataList/SmallSongData.vue
+++ b/src/components/DataList/SmallSongData.vue
@@ -14,7 +14,7 @@
      <n-text
        class="text-hidden"
        depth="2"
-        v-html="songDetail ? songDetail.name : '未知歌曲'"
+        v-html="songDetail ? songDetail.name : $t('general.name.unknownSong')"
        @click.stop="router.push(`/song?id=${songDetail.id}`)"
      />
      <AllArtists
@@ -29,8 +29,10 @@
 <script setup>
 import { useRouter } from "vue-router";
 import { getMusicDetail } from "@/api/song";
+import { useI18n } from "vue-i18n";
 import AllArtists from "./AllArtists.vue";

+const { t } = useI18n();
 const router = useRouter();
 const props = defineProps({
  // 歌曲数据
@@ -64,7 +66,7 @@ const getMusicDetailData = (id) => {
        id: res.songs[0].id,
      };
    } else {
-      $message.error("歌曲信息获取失败");
+      $message.error(t("general.message.acquisitionFailed"));
    }
  });
 };
--- a/src/components/DataModal/AboutSite.vue
+++ b/src/components/DataModal/AboutSite.vue
@@ -4,13 +4,13 @@
    class="s-modal"
    v-model:show="showAboutModal"
    preset="card"
-    title="关于本站"
+    :title="$t('nav.avatar.about')"
    :bordered="false"
    transform-origin="center"
  >
    <div class="copyright">
      <div class="desc">
-        <n-text class="name">SPlayer</n-text>
+        <n-text class="name">{{ siteTitle }}</n-text>
        <n-text class="version" :depth="3">
          v&nbsp;{{ packageJson.version }}
        </n-text>
@@ -53,6 +53,7 @@ import { GithubOne } from "@icon-park/vue-next";
 import packageJson from "@/../package.json";

 // 关于本站数据
+const siteTitle = import.meta.env.VITE_SITE_TITLE;
 const showAboutModal = ref(false);
 const icp = ref(import.meta.env.VITE_ICP ? import.meta.env.VITE_ICP : null);

--- a/src/components/DataModal/AddPlaylist.vue
+++ b/src/components/DataModal/AddPlaylist.vue
@@ -1,13 +1,13 @@
 <template>
  <n-modal
    class="add-playlist s-modal"
-    v-model:show="addToPlaylistModel"
+    v-model:show="addToPlaylistModal"
    preset="card"
    :bordered="false"
    :on-after-leave="closeAddToPlaylist"
  >
    <template #header>
-      添加到歌单
+      {{ $t("menu.add") }}
      <n-tag
        round
        class="tag"
@@ -21,32 +21,40 @@
        :bordered="false"
        @click="createPlaylistRef.openCreatePlaylist()"
      >
-        新建歌单
+        {{ $t("menu.create") }}
      </n-tag>
    </template>
-    <n-space vertical class="list" v-if="user.getUserPlayLists.own[0]">
-      <div
-        class="item"
-        v-for="item in user.getUserPlayLists.own.slice(1)"
-        :key="item"
-        @click="addToPlayList(item.id, addToPlaylistId)"
-      >
-        <n-avatar
-          class="pic"
-          :src="
-            item.cover
-              ? item.cover.replace(/^http:/, 'https:') + '?param=60y60'
-              : '/images/pic/default.png'
-          "
-          fallback-src="/images/pic/default.png"
-        />
-        <div class="desc">
-          <n-text class="name">{{ item.name }}</n-text>
-          <n-text class="num">{{ item.trackCount }}首</n-text>
-        </div>
+    <Transition mode="out-in">
+      <div v-if="user.getUserPlayLists.own[0]">
+        <n-space vertical class="list">
+          <div
+            class="item"
+            v-for="item in user.getUserPlayLists.own.slice(1)"
+            :key="item"
+            @click="addToPlayList(item.id, addToPlaylistId)"
+          >
+            <n-avatar
+              class="pic"
+              :src="
+                item.cover
+                  ? item.cover.replace(/^http:/, 'https:') + '?param=60y60'
+                  : '/images/pic/default.png'
+              "
+              fallback-src="/images/pic/default.png"
+            />
+            <div class="desc">
+              <n-text class="name">{{ item.name }}</n-text>
+              <n-text class="num">{{
+                $t("general.name.songSize", {
+                  size: item.trackCount,
+                })
+              }}</n-text>
+            </div>
+          </div>
+        </n-space>
      </div>
-    </n-space>
-    <n-text v-else>歌单列表加载中</n-text>
+      <n-text v-else>{{ $t("general.message.isLoading") }}</n-text>
+    </Transition>
  </n-modal>
  <!-- 新建歌单 -->
  <CreatePlaylist ref="createPlaylistRef" />
@@ -55,26 +63,27 @@
 <script setup>
 import { addSongToPlayList } from "@/api/playlist";
 import { userStore } from "@/store";
+import { useI18n } from "vue-i18n";
 import CreatePlaylist from "./CreatePlaylist.vue";

+const { t } = useI18n();
 const user = userStore();
 const createPlaylistRef = ref(null);

 // 收藏到歌单数据
-const addToPlaylistModel = ref(false);
+const addToPlaylistModal = ref(false);
 const addToPlaylistId = ref(null);

 // 收藏到歌单
 const addToPlayList = (pid, tracks) => {
-  console.log("添加" + tracks + "到" + pid);
  addSongToPlayList(pid, tracks).then((res) => {
    console.log(res);
    if (res.status === 200) {
-      $message.success("添加歌曲至歌单成功");
+      $message.success(t("general.message.addSuccess"));
      closeAddToPlaylist();
      user.setUserPlayLists();
    } else {
-      $message.error("添加失败，请重试");
+      $message.error(t("general.message.addFailure"));
    }
  });
 };
@@ -82,20 +91,20 @@ const addToPlayList = (pid, tracks) => {
 // 开启收藏到歌单
 const openAddToPlaylist = (id) => {
  if (!user.userLogin) {
-    $message.error("请登录账号后使用");
+    $message.error(t("general.message.needLogin"));
    return false;
  }
  if (!user.getUserPlayLists.has && !user.getUserPlayLists.isLoading) {
    user.setUserPlayLists();
  }
-  addToPlaylistModel.value = true;
+  addToPlaylistModal.value = true;
  addToPlaylistId.value = id;
-  console.log("开启", addToPlaylistModel.value, addToPlaylistId.value);
+  console.log("开启", addToPlaylistModal.value, addToPlaylistId.value);
 };

 // 关闭收藏到歌单
 const closeAddToPlaylist = () => {
-  addToPlaylistModel.value = false;
+  addToPlaylistModal.value = false;
 };

 // 暴露方法
@@ -106,6 +115,15 @@ defineExpose({

 <style lang="scss" scoped>
 .add-playlist {
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
  .list {
    .item {
      display: flex;
--- a/src/components/DataModal/CloudMatch.vue
+++ b/src/components/DataModal/CloudMatch.vue
@@ -1,22 +1,22 @@
 <template>
  <n-modal
    class="s-modal"
-    v-model:show="cloudMatchModel"
+    v-model:show="cloudMatchModal"
    preset="card"
-    title="歌曲信息纠正"
+    :title="$t('menu.match')"
    :bordered="false"
    :on-after-leave="closeCloudMatch"
  >
    <n-form class="cloud-match" :label-width="80" :model="cloudMatchValue">
-      <n-form-item label="原歌曲信息">
+      <n-form-item :label="$t('other.sData')">
        <n-card content-style="padding: 16px" :bordered="false" embedded>
          <SmallSongData :songData="cloudMatchBeforeData" notJump />
        </n-card>
      </n-form-item>
-      <n-form-item label="匹配 ID" path="asid">
+      <n-form-item :label="$t('other.asId')" path="asid">
        <n-input-number
          v-model:value="cloudMatchValue.asid"
-          placeholder="请输入要匹配的歌曲 ID"
+          :placeholder="$t('other.asIdDes')"
          :show-button="false"
        />
        <n-button
@@ -24,7 +24,7 @@
          :disabled="!cloudMatchValue.asid"
          @click="cloudMatchId = cloudMatchValue.asid.toString()"
        >
-          检查
+          {{ $t("general.dialog.check") }}
        </n-button>
      </n-form-item>
    </n-form>
@@ -42,13 +42,15 @@
    </n-card>
    <template #footer>
      <n-space justify="end">
-        <n-button @click="closeCloudMatch"> 取消 </n-button>
+        <n-button @click="closeCloudMatch">
+          {{ $t("general.dialog.cancel") }}
+        </n-button>
        <n-button
          type="primary"
          @click="setCloudMatchBtn(cloudMatchValue)"
          :disabled="!cloudMatchValue.asid"
        >
-          纠正歌曲
+          {{ $t("general.dialog.match") }}
        </n-button>
      </n-space>
    </template>
@@ -58,14 +60,16 @@
 <script setup>
 import { setCloudMatch } from "@/api/user";
 import { userStore } from "@/store";
+import { useI18n } from "vue-i18n";
 import SmallSongData from "@/components/DataList/SmallSongData.vue";

+const { t } = useI18n();
 const user = userStore();

 // 歌曲信息纠正数据
 const cloudDataLoad = inject("cloudDataLoad", null);
 const smallSongDataRef = ref(null);
-const cloudMatchModel = ref(false);
+const cloudMatchModal = ref(false);
 const cloudMatchBeforeData = ref(null);
 const cloudMatchId = ref(null);
 const cloudMatchValue = ref({
@@ -77,23 +81,23 @@ const cloudMatchValue = ref({
 // 歌曲纠正
 const setCloudMatchBtn = (data) => {
  if (data.sid == data.asid) {
-    $message.error("与原歌曲 ID 一致，无需纠正");
+    $message.error(t("other.noNeedMatch"));
  } else {
    if (!smallSongDataRef.value) {
-      $message.error("请先检查");
+      $message.error(t("other.plaseCheck"));
    } else if (smallSongDataRef.value.checkSongData()) {
      setCloudMatch(data.uid, data.sid, data.asid).then((res) => {
        console.log(res);
        if (res.data) {
          closeCloudMatch();
-          $message.success("歌曲纠正成功");
+          $message.success(t("other.matchSuccess"));
          cloudDataLoad();
        } else {
-          $message.error("歌曲纠正失败，请重试");
+          $message.error(t("other.matchFailed"));
        }
      });
    } else {
-      $message.error("非正常歌曲 ID，无法匹配");
+      $message.error(t("other.matchError"));
    }
  }
 };
@@ -102,7 +106,7 @@ const setCloudMatchBtn = (data) => {
 const openCloudMatch = (data) => {
  cloudMatchValue.value.sid = data.id;
  cloudMatchBeforeData.value = data;
-  cloudMatchModel.value = true;
+  cloudMatchModal.value = true;
 };

 // 关闭歌曲纠正
@@ -110,7 +114,7 @@ const closeCloudMatch = () => {
  cloudMatchBeforeData.value = null;
  cloudMatchId.value = null;
  cloudMatchValue.value.asid = null;
-  cloudMatchModel.value = false;
+  cloudMatchModal.value = false;
 };

 // 暴露方法
--- a/src/components/DataModal/CreatePlaylist.vue
+++ b/src/components/DataModal/CreatePlaylist.vue
@@ -3,7 +3,7 @@
    class="s-modal"
    v-model:show="createPlaylistShow"
    preset="card"
-    title="新建歌单"
+    :title="$t('menu.create')"
    :bordered="false"
    :on-after-leave="closeCreatePlaylist"
  >
@@ -11,17 +11,22 @@
      style="margin-bottom: 12px"
      v-model:value="createName"
      type="text"
-      placeholder="请输入新歌单标题"
+      :placeholder="$t('other.newPlaylistName')"
    />
-    <n-checkbox v-model:checked="createPrivacy"> 设置为隐私歌单 </n-checkbox>
+    <n-checkbox v-model:checked="createPrivacy">
+      {{ $t("other.setPrivacy") }}
+    </n-checkbox>
    <template #footer>
      <n-space justify="end">
-        <n-button @click="closeCreatePlaylist"> 取消 </n-button>
+        <n-button @click="closeCreatePlaylist">
+          {{ $t("general.dialog.cancel") }}
+        </n-button>
        <n-button
          type="primary"
+          :disabled="!createName"
          @click="createPlaylistBtn(createName, createPrivacy)"
        >
-          新建
+          {{ $t("general.dialog.create") }}
        </n-button>
      </n-space>
    </template>
@@ -31,7 +36,9 @@
 <script setup>
 import { userStore } from "@/store";
 import { createPlaylist } from "@/api/playlist";
+import { useI18n } from "vue-i18n";

+const { t } = useI18n();
 const user = userStore();

 // 新建歌单数据
@@ -41,19 +48,15 @@ const createName = ref(null);

 // 新建歌单
 const createPlaylistBtn = (name, privacy = false) => {
-  if (createName.value) {
-    createPlaylist(name, privacy ? "10" : null).then((res) => {
-      if (res.code === 200) {
-        closeCreatePlaylist();
-        $message.success("歌单新建成功");
-        user.setUserPlayLists();
-      } else {
-        $message.error("歌单新建失败，请重试");
-      }
-    });
-  } else {
-    $message.info("请输入歌单名称");
-  }
+  createPlaylist(name, privacy ? "10" : null).then((res) => {
+    if (res.code === 200) {
+      closeCreatePlaylist();
+      $message.success(t("general.message.createSuccess"));
+      user.setUserPlayLists();
+    } else {
+      $message.error(t("general.message.createFailed"));
+    }
+  });
 };

 // 开启新建歌单
--- a/src/components/DataModal/DownloadSong.vue
+++ b/src/components/DataModal/DownloadSong.vue
@@ -1,17 +1,17 @@
 <template>
  <n-modal
-    class="s-modal downloadModel"
-    v-model:show="downloadModel"
+    class="s-modal downloadModal"
+    v-model:show="downloadModal"
    preset="card"
-    title="歌曲下载"
+    :title="$t('menu.download')"
    :bordered="false"
-    :on-after-leave="closeDownloadModel"
+    :on-after-leave="closeDownloadModal"
  >
    <Transition mode="out-in">
      <div v-if="songData">
        <SmallSongData ref="smallSongDataRef" :songData="songData" notJump />
        <n-alert v-if="songData.pc" class="tip" type="info" :show-icon="false">
-          当前为云盘歌曲，下载的文件均为最高音质
+          {{ $t("other.cloudTip") }}
        </n-alert>
        <n-radio-group
          class="downloadGroup"
@@ -31,18 +31,20 @@
                  {{ item.size }}
                </n-text>
                <n-text v-else-if="!item.disabled" class="error" :depth="3">
-                  无法获取
+                  {{ $t("general.message.acquisitionFailed") }}
                </n-text>
              </div>
            </n-radio>
          </n-space>
        </n-radio-group>
      </div>
-      <n-text v-else>正在获取歌曲下载数据</n-text>
+      <n-text v-else>{{ $t("general.message.isLoading") }}</n-text>
    </Transition>
    <template #footer>
      <n-space justify="end">
-        <n-button @click="closeDownloadModel"> 取消 </n-button>
+        <n-button @click="closeDownloadModal">
+          {{ $t("general.dialog.cancel") }}
+        </n-button>
        <n-button
          :disabled="!downloadChoose"
          :loading="downloadStatus"
@@ -55,7 +57,11 @@
            )
          "
        >
-          {{ downloadStatus ? "正在下载" : "下载" }}
+          {{
+            downloadStatus
+              ? $t("general.dialog.downloadingNow")
+              : $t("general.dialog.download")
+          }}
        </n-button>
      </n-space>
    </template>
@@ -66,8 +72,10 @@
 import { userStore } from "@/store";
 import { useRouter } from "vue-router";
 import { getMusicDetail, getSongDownload } from "@/api/song";
+import { useI18n } from "vue-i18n";
 import SmallSongData from "@/components/DataList/SmallSongData.vue";

+const { t } = useI18n();
 const user = userStore();
 const router = useRouter();

@@ -75,7 +83,7 @@ const router = useRouter();
 const songId = ref(null);
 const songData = ref(null);
 const downloadStatus = ref(false);
-const downloadModel = ref(false);
+const downloadModal = ref(false);
 const downloadChoose = ref(null);
 const downloadLevel = ref(null);

@@ -87,8 +95,8 @@ const toSongDownload = (id, br, name) => {
      console.log(name, res);
      if (res.data.url) {
        const type = res.data.type.toLowerCase();
-        const songName = name ? name : "未知曲目";
-        fetch(res.data.url)
+        const songName = name ? name : t("general.name.unknownSong");
+        fetch(res.data.url.replace(/^http:/, "https:"))
          .then((response) => response.blob())
          .then((blob) => {
            const url = window.URL.createObjectURL(blob);
@@ -98,19 +106,19 @@ const toSongDownload = (id, br, name) => {
            document.body.appendChild(a);
            a.click();
            a.remove();
-            closeDownloadModel();
+            closeDownloadModal();
            downloadStatus.value = false;
-            $message.success(name + " 下载完成");
+            $message.success(t("general.message.downloadSuccess", { name }));
          });
      } else {
        downloadStatus.value = false;
-        $message.error("下载失败，请尝试其他音质");
+        $message.error(t("general.message.downloadFailure"));
      }
    })
    .catch((err) => {
-      closeDownloadModel();
-      console.error("下载出现错误：" + err);
-      $message.error("下载出现错误，请重试");
+      closeDownloadModal();
+      console.error(t("general.message.downloadError"), err);
+      $message.error(t("general.message.downloadError"));
    });
 };

@@ -129,13 +137,13 @@ const getMusicDetailData = (id) => {
        // 生成音质列表
        generateLists(res);
      } else {
-        $message.error("歌曲信息获取失败");
+        $message.error(t("general.message.acquisitionFailed"));
      }
    })
    .catch((err) => {
-      closeDownloadModel();
-      console.error("歌曲信息获取出现错误：" + err);
-      $message.error("歌曲信息获取出现错误，请重试");
+      closeDownloadModal();
+      console.error(t("general.message.acquisitionFailed"), err);
+      $message.error(t("general.message.acquisitionFailed"));
    });
 };

@@ -145,25 +153,25 @@ const generateLists = (data) => {
  downloadLevel.value = [
    {
      value: "128000",
-      label: "标准音质",
+      label: t("general.type.quality.l"),
      disabled: br >= 128000 ? false : true,
      size: getSongSize(data, "l"),
    },
    {
      value: "192000",
-      label: "较高音质",
+      label: t("general.type.quality.m"),
      disabled: br >= 192000 ? false : true,
      size: getSongSize(data, "m"),
    },
    {
      value: "320000",
-      label: "极高音质",
+      label: t("general.type.quality.h"),
      disabled: br >= 320000 ? false : true,
      size: getSongSize(data, "h"),
    },
    {
      value: "420000",
-      label: "无损音质",
+      label: t("general.type.quality.sq"),
      disabled: [128000, 192000, 320000].includes(parseInt(br)),
      size: getSongSize(data, "sq"),
    },
@@ -200,7 +208,7 @@ const getSongSize = (data, type) => {
 };

 // 开启歌曲下载
-const openDownloadModel = (data) => {
+const openDownloadModal = (data) => {
  if (user.userLogin) {
    if (
      router.currentRoute.value.name === "user-cloud" ||
@@ -209,33 +217,33 @@ const openDownloadModel = (data) => {
      data?.pc
    ) {
      songId.value = data.id;
-      downloadModel.value = true;
+      downloadModal.value = true;
      getMusicDetailData(data.id);
    } else {
-      $message.error("该歌曲需使用黑胶会员下载");
+      $message.error(t("general.message.needVip"));
    }
  } else {
-    $message.error("请登录后使用该功能");
+    $message.error(t("general.message.needLogin"));
  }
 };

 // 关闭歌曲下载
-const closeDownloadModel = () => {
+const closeDownloadModal = () => {
  songId.value = null;
  songData.value = null;
  downloadStatus.value = false;
-  downloadModel.value = false;
+  downloadModal.value = false;
  downloadChoose.value = null;
 };

 // 暴露方法
 defineExpose({
-  openDownloadModel,
+  openDownloadModal,
 });
 </script>

 <style lang="scss" scoped>
-.downloadModel {
+.downloadModal {
  .v-enter-active,
  .v-leave-active {
    transition: opacity 0.3s ease;
--- a/src/components/DataModal/LyricSetting.vue
+++ b/src/components/DataModal/LyricSetting.vue
@@ -0,0 +1,189 @@
+<template>
+  <!-- 歌词设置 -->
+  <n-modal
+    :bordered="false"
+    :z-index="10000"
+    class="s-modal lyric-set"
+    v-model:show="LyricSettingModal"
+    preset="card"
+    title="歌词设置"
+  >
+    <n-scrollbar>
+      <div class="set">
+        <n-card class="set-item">
+          <div class="name">
+            播放页快捷设置
+            <span class="tip">关闭后需在设置页开启</span>
+          </div>
+          <n-switch v-model:value="showLyricSetting" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="name">
+            显示逐字歌词
+            <span class="tip">是否在歌曲具有逐字歌词时显示，实验性功能</span>
+          </div>
+          <n-switch v-model:value="showYrc" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="name">
+            显示歌词翻译
+            <span class="tip">是否在具有翻译歌词时显示</span>
+          </div>
+          <n-switch v-model:value="showTransl" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="name">
+            显示歌词音译
+            <span class="tip">是否在具有音译歌词时显示</span>
+          </div>
+          <n-switch v-model:value="showRoma" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="name">
+            显示前奏等待
+            <span class="tip">部分歌曲前奏可能存在显示错误</span>
+          </div>
+          <n-switch v-model:value="countDownShow" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="name">
+            智能暂停滚动
+            <span class="tip">鼠标移入歌词区域是否暂停滚动</span>
+          </div>
+          <n-switch v-model:value="lrcMousePause" :round="false" />
+        </n-card>
+        <n-card class="set-item">
+          <div class="name">
+            歌词模糊
+            <span class="tip">未播放或已播放歌词模糊显示，实验性功能</span>
+          </div>
+          <n-switch v-model:value="lyricsBlur" :round="false" />
+        </n-card>
+        <n-space justify="center">
+          <n-button
+            class="more"
+            size="large"
+            strong
+            secondary
+            round
+            @click="
+              () => {
+                LyricSettingModal = false;
+                music.setBigPlayerState(false);
+                router.push('/setting/player');
+              }
+            "
+          >
+            更多设置
+          </n-button>
+        </n-space>
+      </div>
+    </n-scrollbar>
+  </n-modal>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import { settingStore } from "@/store";
+import { useRouter } from "vue-router";
+import { musicStore } from "@/store";
+
+const setting = settingStore();
+const router = useRouter();
+const music = musicStore();
+
+// 歌词设置弹窗
+const LyricSettingModal = ref(false);
+
+// 设置数据
+const {
+  showTransl,
+  lyricsBlur,
+  lrcMousePause,
+  showYrc,
+  showRoma,
+  countDownShow,
+  showLyricSetting,
+} = storeToRefs(setting);
+
+// 开启歌词设置弹窗
+const openLyricSetting = () => {
+  LyricSettingModal.value = true;
+};
+
+// 暴露方法
+defineExpose({
+  openLyricSetting,
+});
+</script>
+
+<style lang="scss">
+.n-card {
+  &.lyric-set {
+    background-color: #ffffff40;
+    color: #fff;
+    .n-card-header {
+      .n-card-header__main,
+      .n-card-header__close {
+        color: #fff;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.set {
+  width: 100%;
+  :deep(.set-item) {
+    width: 100%;
+    color: #fff;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    background-color: #ffffff40;
+    border-color: transparent;
+    .n-card__content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      .name {
+        font-size: 16px;
+        display: flex;
+        flex-direction: column;
+        padding-right: 20px;
+        .tip {
+          font-size: 12px;
+          opacity: 0.8;
+        }
+      }
+      .n-switch {
+        --n-box-shadow-focus: none;
+        &.n-switch--active {
+          .n-switch__rail {
+            background-color: #ffffff78;
+          }
+        }
+        .n-switch__rail {
+          background-color: #ffffff24;
+        }
+      }
+      .set {
+        width: 200px;
+        @media (max-width: 768px) {
+          width: 140px;
+          min-width: 140px;
+        }
+      }
+    }
+  }
+  .more {
+    margin: 12px 0;
+    color: #fff;
+    background-color: #ffffff40;
+    &:hover {
+      background-color: #ffffff20;
+    }
+  }
+}
+</style>
--- a/src/components/DataModal/PlayListDrawer.vue
+++ b/src/components/DataModal/PlayListDrawer.vue
@@ -2,16 +2,26 @@
  <n-drawer
    class="playlist-drawer"
    v-model:show="playListShow"
-    :z-index="2000"
+    :z-index="1"
    :width="400"
    :trap-focus="false"
    :block-scroll="false"
    placement="right"
-    to="#main"
+    to="#mainContent"
    @after-leave="music.showPlayList = false"
    @mask-click="music.showPlayList = false"
  >
-    <n-drawer-content title="播放列表" :native-scrollbar="false" closable>
+    <n-drawer-content :native-scrollbar="false" closable>
+      <template #header>
+        <div class="text">
+          <n-text class="name">{{ $t("general.name.playlists") }}</n-text>
+          <n-text class="num" :depth="3" v-if="music.getPlaylists.length > 0">
+            {{
+              $t("general.name.songSize", { size: music.getPlaylists.length })
+            }}
+          </n-text>
+        </div>
+      </template>
      <Transition mode="out-in">
        <div v-if="music.getPlaylists[0]">
          <n-card
@@ -31,9 +41,13 @@
            @click="changeIndex(index)"
          >
            <div class="left">
-              <div v-if="index !== music.persistData.playSongIndex" class="num">
+              <n-text
+                v-if="index !== music.persistData.playSongIndex"
+                :depth="3"
+                class="num"
+              >
                {{ index + 1 }}
-              </div>
+              </n-text>
              <div v-else class="bar">
                <div
                  v-for="item in 3"
@@ -61,7 +75,7 @@
            </div>
          </n-card>
        </div>
-        <n-text v-else>暂无歌曲，请前往列表添加</n-text>
+        <n-text v-else>{{ $t("other.playlistEmpty") }}</n-text>
      </Transition>
    </n-drawer-content>
  </n-drawer>
@@ -70,8 +84,11 @@
 <script setup>
 import { musicStore } from "@/store";
 import { DeleteFour } from "@icon-park/vue-next";
+import { soundStop } from "@/utils/Player";
+import { useI18n } from "vue-i18n";
 import AllArtists from "@/components/DataList/AllArtists.vue";

+const { t } = useI18n();
 const music = musicStore();

 // 播放列表显隐
@@ -79,8 +96,17 @@ const playListShow = ref(false);

 // 改变播放索引
 const changeIndex = (index) => {
-  music.persistData.playSongIndex = index;
-  music.setPlayState(true);
+  try {
+    if (music.persistData.playSongIndex !== index) {
+      if (typeof $player !== "undefined") soundStop($player);
+      music.persistData.playSongIndex = index;
+      music.isLoadingSong = true;
+      music.setPlayState(true);
+    }
+  } catch (err) {
+    console.error(t("general.message.operationFailed"), err);
+    $message.error(t("general.message.operationFailed"));
+  }
 };

 // 监听播放列表显隐
@@ -89,7 +115,7 @@ watch(
  () => music.showPlayList,
  (val) => {
    playListShow.value = val;
-    nextTick(() => {
+    nextTick().then(() => {
      if (val && music.getPlaylists[0]) {
        const el = document.getElementById(
          `playlist${music.persistData.playSongIndex}`
@@ -129,6 +155,17 @@ onBeforeUnmount(() => {
  .v-leave-to {
    opacity: 0;
  }
+  .text {
+    display: flex;
+    align-items: center;
+    .num {
+      font-size: 14px;
+      &::before {
+        content: "-";
+        margin: 0 6px;
+      }
+    }
+  }
  .songs {
    border-radius: 8px;
    cursor: pointer;
@@ -236,4 +273,4 @@ onBeforeUnmount(() => {
    }
  }
 }
-</style>
+</style>
--- a/src/components/DataModal/PlaylistUpdate.vue
+++ b/src/components/DataModal/PlaylistUpdate.vue
@@ -1,11 +1,11 @@
 <template>
  <n-modal
    class="s-modal"
-    v-model:show="playlistUpdateModel"
+    v-model:show="playlistUpdateModal"
    preset="card"
-    title="歌单编辑"
+    :title="$t('menu.update')"
    :bordered="false"
-    :on-after-leave="closeUpdateModel"
+    :on-after-leave="closeUpdateModal"
  >
    <n-form
      ref="playlistUpdateRef"
@@ -13,28 +13,28 @@
      :label-width="80"
      :model="playlistUpdateValue"
    >
-      <n-form-item label="歌单名称" path="name">
+      <n-form-item :label="$t('other.plName')" path="name">
        <n-input
          v-model:value="playlistUpdateValue.name"
-          placeholder="请输入歌单名称"
+          :placeholder="$t('other.plNameTip')"
        />
      </n-form-item>
-      <n-form-item label="歌单描述" path="desc">
+      <n-form-item :label="$t('other.plDes')" path="desc">
        <n-input
          v-model:value="playlistUpdateValue.desc"
-          placeholder="请输入歌单描述"
          type="textarea"
+          :placeholder="$t('other.plDesTip')"
          :autosize="{
            minRows: 3,
            maxRows: 5,
          }"
        />
      </n-form-item>
-      <n-form-item label="歌单标签" path="tags">
+      <n-form-item :label="$t('other.plTag')" path="tags">
        <n-select
          multiple
          v-model:value="playlistUpdateValue.tags"
-          placeholder="请输入歌单标签"
+          :placeholder="$t('other.plTagTip')"
          :options="playlistTags"
          @click="openSelect"
        />
@@ -42,8 +42,12 @@
    </n-form>
    <template #footer>
      <n-space justify="end">
-        <n-button @click="closeUpdateModel"> 取消 </n-button>
-        <n-button type="primary" @click="toUpdatePlayList"> 编辑 </n-button>
+        <n-button @click="closeUpdateModal">
+          {{ $t("general.dialog.cancel") }}
+        </n-button>
+        <n-button type="primary" @click="toUpdatePlayList">
+          {{ $t("general.dialog.editor") }}
+        </n-button>
      </n-space>
    </template>
  </n-modal>
@@ -51,9 +55,11 @@

 <script setup>
 import { playlistUpdate } from "@/api/playlist";
-import { formRules } from "@/utils/formRules.js";
+import { formRules } from "@/utils/formRules";
 import { musicStore, userStore } from "@/store";
+import { useI18n } from "vue-i18n";

+const { t } = useI18n();
 const { textRule } = formRules();
 const music = musicStore();
 const user = userStore();
@@ -61,7 +67,7 @@ const user = userStore();
 // 更新歌单数据
 const playlistUpdateId = ref(null);
 const playlistUpdateRef = ref(null);
-const playlistUpdateModel = ref(false);
+const playlistUpdateModal = ref(false);
 const playlistUpdateRules = {
  name: textRule,
 };
@@ -85,16 +91,16 @@ const toUpdatePlayList = (e) => {
      ).then((res) => {
        console.log(res);
        if (res.code === 200) {
-          $message.success("编辑成功");
-          closeUpdateModel();
+          $message.success(t("general.message.editorSuccess"));
+          closeUpdateModal();
          user.setUserPlayLists();
        } else {
-          $message.error("编辑失败，请重试");
+          $message.error(t("general.message.editorFailed"));
        }
      });
    } else {
      $loadingBar.error();
-      $message.error("请检查您的输入");
+      $message.error(t("general.message.needCheck"));
    }
  });
 };
@@ -113,24 +119,24 @@ const openSelect = () => {
 };

 // 开启编辑歌单
-const openUpdateModel = (data) => {
+const openUpdateModal = (data) => {
  playlistUpdateValue.value = {
    name: data.name,
    desc: data.desc,
    tags: data.tags,
  };
  playlistUpdateId.value = data.id;
-  playlistUpdateModel.value = true;
+  playlistUpdateModal.value = true;
 };

 // 关闭更新歌单弹窗
-const closeUpdateModel = () => {
-  playlistUpdateModel.value = false;
+const closeUpdateModal = () => {
+  playlistUpdateModal.value = false;
  playlistUpdateId.value = null;
 };

 // 暴露方法
 defineExpose({
-  openUpdateModel,
+  openUpdateModal,
 });
 </script>
--- a/src/components/Nav/index.vue
+++ b/src/components/Nav/index.vue
@@ -2,31 +2,42 @@
  <nav>
    <div class="left">
      <div class="logo" @click="router.push('/')">
-        <img src="/images/logo/favicon.svg" alt="logo" />
-      </div>
-      <div :class="site.searchInputActive ? 'controls hidden' : 'controls'">
-        <n-icon size="22" :component="Left" @click="router.go(-1)" />
-        <n-icon size="22" :component="Right" @click="router.go(1)" />
+        <img :src="logoUrl" alt="logo" />
      </div>
+      <Transition name="fade" mode="out-in">
+        <div v-show="!site.searchInputActive" class="controls">
+          <n-icon size="22" :component="Left" @click="router.go(-1)" />
+          <n-icon size="22" :component="Right" @click="router.go(1)" />
+        </div>
+      </Transition>
    </div>
    <div class="center">
-      <router-link class="link" to="/">首页</router-link>
+      <router-link class="link" to="/">{{ $t("nav.home") }}</router-link>
      <n-dropdown
        trigger="hover"
        :options="discoverOptions"
        @select="menuSelect"
      >
-        <router-link class="link" to="/discover">发现</router-link>
+        <router-link class="link" to="/discover">
+          {{ $t("nav.discover") }}
+        </router-link>
      </n-dropdown>
      <n-dropdown trigger="hover" :options="userOptions" @select="menuSelect">
-        <router-link class="link" to="/user">我的</router-link>
+        <router-link class="link" to="/user">{{ $t("nav.user") }}</router-link>
      </n-dropdown>
    </div>
    <div class="right">
      <SearchInp />
+      <!-- 移动端菜单 -->
+      <n-dropdown trigger="click" :options="mbMenuOptions" @select="menuSelect">
+        <n-button class="mb-menu" circle>
+          <template #icon>
+            <n-icon :component="HamburgerButton" />
+          </template>
+        </n-button>
+      </n-dropdown>
      <!-- 下拉菜单 -->
      <n-dropdown
-        class="dropdown"
        placement="bottom-end"
        :show="showDropdown"
        :show-arrow="true"
@@ -67,18 +78,25 @@ import {
  History,
  SunOne,
  Moon,
+  HamburgerButton,
+  HomeTwo,
+  FindOne,
+  Me,
 } from "@icon-park/vue-next";
 import { userStore, settingStore, siteStore } from "@/store";
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 import AboutSite from "@/components/DataModal/AboutSite.vue";
 import SearchInp from "@/components/SearchInp/index.vue";

+const { t } = useI18n();
 const router = useRouter();
 const user = userStore();
 const site = siteStore();
 const setting = settingStore();
 const aboutSiteRef = ref(null);
 const timeOut = ref(null);
+const logoUrl = import.meta.env.VITE_SITE_LOGO;

 // 下拉菜单显隐
 const showDropdown = ref(false);
@@ -91,6 +109,19 @@ const closeDropdown = (event) => {
  }
 };

+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { style: { transform: "translateX(2px)" } },
+      {
+        default: () => icon,
+      }
+    );
+  };
+};
+
 // 用户数据模块
 const userDataRender = () => {
  return h(
@@ -120,7 +151,9 @@ const userDataRender = () => {
            { depth: 2 },
            {
              default: () =>
-                user.userLogin ? user.getUserData.nickname : "未登录",
+                user.userLogin
+                  ? user.getUserData.nickname
+                  : t("nav.avatar.notLogin"),
            }
          ),
        ]),
@@ -146,8 +179,8 @@ const userDataRender = () => {
                            "Lv." + user.getUserOtherData.level.level,
                        }
                      )
-                    : "等级信息获取失败"
-                  : "登录后享受完整功能",
+                    : t("nav.avatar.loginError")
+                  : t("nav.avatar.notLoginSubtitle"),
            }
          ),
        ]),
@@ -157,148 +190,157 @@ const userDataRender = () => {
 };

 // 下拉框数据
-const discoverOptions = ref([
-  {
-    label: "歌单",
-    key: "/discover/playlists",
-  },
-  {
-    label: "排行榜",
-    key: "/discover/toplists",
-  },
-  {
-    label: "歌手",
-    key: "/discover/artists",
-  },
-]);
+const discoverOptions = ref([]);
 const userOptions = ref([]);
+const dropdownOptions = ref([]);
+
+// 写入下拉框数据
+const changeDiscoverOptions = () => {
+  discoverOptions.value = [
+    {
+      label: t("nav.discoverChildren.playlists"),
+      key: "/discover/playlists",
+    },
+    {
+      label: t("nav.discoverChildren.toplists"),
+      key: "/discover/toplists",
+    },
+    {
+      label: t("nav.discoverChildren.artists"),
+      key: "/discover/artists",
+    },
+  ];
+};
 const changeUserOptions = (val) => {
  userOptions.value = val
    ? [
        {
-          label: "我的歌单",
+          label: t("nav.userChildren.playlist"),
          key: "/user/playlists",
        },
        {
-          label: "收藏的歌单",
+          label: t("nav.userChildren.like"),
          key: "/user/like",
        },
        {
-          label: "收藏的专辑",
+          label: t("nav.userChildren.album"),
          key: "/user/album",
        },
        {
-          label: "收藏的歌手",
+          label: t("nav.userChildren.artist"),
          key: "/user/artists",
        },
        {
-          label: "音乐云盘",
+          label: t("nav.userChildren.cloud"),
          key: "/user/cloud",
        },
      ]
    : [
        {
-          label: "登录账号",
+          label: t("nav.userChildren.login"),
          key: "/login",
        },
      ];
 };
-const dropdownOptions = ref([
-  {
-    key: "header",
-    type: "render",
-    render: userDataRender,
-  },
-  {
-    key: "header-divider",
-    type: "divider",
-  },
-  {
-    label: () => {
-      return h(
-        NText,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () =>
-            setting.getSiteTheme == "light" ? "深色模式" : "浅色模式",
-        }
-      );
+const changeDropdownOptions = () => {
+  dropdownOptions.value = [
+    {
+      key: "header",
+      type: "render",
+      render: userDataRender,
    },
-    key: "changeTheme",
-    icon: () => {
-      return h(
-        NIcon,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () =>
-            setting.getSiteTheme == "light" ? h(Moon) : h(SunOne),
-        }
-      );
+    {
+      key: "header-divider",
+      type: "divider",
    },
-  },
-  {
-    label: "播放历史",
-    key: "history",
-    icon: () => {
-      return h(
-        NIcon,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () => h(History),
-        }
-      );
+    {
+      label: () => {
+        return h(
+          NText,
+          { style: { transform: "translateX(2px)" } },
+          {
+            default: () =>
+              setting.getSiteTheme == "light"
+                ? t("nav.avatar.dark")
+                : t("nav.avatar.light"),
+          }
+        );
+      },
+      key: "changeTheme",
+      icon: () => {
+        return h(
+          NIcon,
+          { style: { transform: "translateX(2px)" } },
+          {
+            default: () =>
+              setting.getSiteTheme == "light" ? h(Moon) : h(SunOne),
+          }
+        );
+      },
    },
-  },
-  {
-    label: "全局设置",
-    key: "setting",
-    icon: () => {
-      return h(
-        NIcon,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () => h(SettingTwo),
-        }
-      );
+    {
+      label: t("nav.avatar.history"),
+      key: "history",
+      icon: renderIcon(h(History)),
    },
-  },
-  {
-    label: () => {
-      return h(
-        NText,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () => (user.userLogin ? "退出登录" : "登录账号"),
-        }
-      );
+    {
+      label: t("nav.avatar.setting"),
+      key: "setting",
+      icon: renderIcon(h(SettingTwo)),
    },
-    key: "user",
-    icon: () => {
-      return h(
-        NIcon,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () => (user.userLogin ? h(Logout) : h(Login)),
-        }
-      );
+    {
+      label: () => {
+        return h(
+          NText,
+          { style: { transform: "translateX(2px)" } },
+          {
+            default: () =>
+              user.userLogin ? t("nav.avatar.logout") : t("nav.avatar.login"),
+          }
+        );
+      },
+      key: "user",
+      icon: () => {
+        return h(
+          NIcon,
+          { style: { transform: "translateX(2px)" } },
+          {
+            default: () => (user.userLogin ? h(Logout) : h(Login)),
+          }
+        );
+      },
    },
-  },
-  {
-    label: "关于本站",
-    key: "about",
-    icon: () => {
-      return h(
-        NIcon,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () => h(Info),
-        }
-      );
+    {
+      label: t("nav.avatar.about"),
+      key: "about",
+      icon: renderIcon(h(Info)),
    },
-  },
-]);
+  ];
+};

-// 下拉框事件
+// 移动端菜单
+const mbMenuOptions = ref([]);
+const changeMbMenuOptions = () => {
+  mbMenuOptions.value = [
+    {
+      label: t("nav.home"),
+      key: "/",
+      icon: renderIcon(h(HomeTwo)),
+    },
+    {
+      label: t("nav.discover"),
+      key: "/discover",
+      icon: renderIcon(h(FindOne)),
+    },
+    {
+      label: t("nav.user"),
+      key: "/user",
+      icon: renderIcon(h(Me)),
+    },
+  ];
+};
+
+// 下拉框点击事件
 const menuSelect = (key) => {
  router.push(key);
 };
@@ -307,9 +349,10 @@ const dropdownSelect = (key) => {
  switch (key) {
    // 明暗切换
    case "changeTheme":
-      setting.getSiteTheme == "light"
+      setting.getSiteTheme === "light"
        ? setting.setSiteTheme("dark")
        : setting.setSiteTheme("light");
+      setting.themeAuto = false;
      break;
    // 播放历史
    case "history":
@@ -325,13 +368,13 @@ const dropdownSelect = (key) => {
        // 退出登录
        $dialog.warning({
          class: "s-dialog",
-          title: "退出登录",
-          content: "确认退出当前用户登录？",
-          positiveText: "退出登录",
-          negativeText: "取消",
+          title: t("nav.avatar.logout"),
+          content: t("nav.avatar.tip"),
+          positiveText: t("nav.avatar.logout"),
+          negativeText: t("general.dialog.cancel"),
          onPositiveClick: () => {
            user.userLogOut();
-            $message.success("已退出登录");
+            $message.success(t("nav.avatar.success"));
            // 刷新页面
            timeOut.value = setTimeout(() => {
              document.location.reload();
@@ -360,9 +403,22 @@ watch(
  }
 );

+// 监听语言变化
+watch(
+  () => setting.language,
+  () => {
+    changeDiscoverOptions();
+    changeMbMenuOptions();
+    changeDropdownOptions();
+    changeUserOptions(user.userLogin);
+  }
+);
+
 onMounted(() => {
+  changeDiscoverOptions();
+  changeMbMenuOptions();
+  changeDropdownOptions();
  changeUserOptions(user.userLogin);
-  console.log(router);
 });

 onBeforeUnmount(() => {
@@ -380,6 +436,17 @@ nav {
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.5s ease;
+  }
+  .fade-enter-active {
+    transition-delay: 0.5s;
+  }
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
  .left {
    flex: 1;
    max-width: 300px;
@@ -393,30 +460,35 @@ nav {
      width: 30px;
      height: 30px;
      margin-right: 12px;
+      transition: all 0.3s;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
+      @media (min-width: 640px) {
+        &:hover {
+          transform: scale(1.15);
+        }
+      }
+      &:active {
+        transform: scale(1);
+      }
    }
    .controls {
      display: flex;
      flex-direction: row;
      align-items: center;
-      @media (max-width: 520px) {
-        &.hidden{
-          display: none;
-        }
-        
-      }
      .n-icon {
        margin: 0 4px;
        border-radius: 8px;
        padding: 4px;
        cursor: pointer;
        transition: all 0.3s;
-        &:hover {
-          background-color: var(--n-border-color);
+        @media (min-width: 640px) {
+          &:hover {
+            background-color: var(--n-border-color);
+          }
        }
        &:active {
          transform: scale(0.95);
@@ -444,7 +516,7 @@ nav {
      cursor: pointer;
      &:hover {
        background-color: var(--main-color);
-        color: var(--n-color);
+        color: rgba(255, 255, 255, 0.9);
      }
      &:active {
        transform: scale(0.95);
@@ -453,7 +525,7 @@ nav {

    .router-link-active {
      background-color: var(--main-color);
-      color: var(--n-color);
+      color: rgba(255, 255, 255, 0.9);
    }
  }
  .right {
@@ -463,6 +535,10 @@ nav {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
+    @media (max-width: 520px) {
+      position: absolute;
+      right: 12px;
+    }
    .avatar {
      width: 30px;
      min-width: 30px;
@@ -471,6 +547,13 @@ nav {
      box-shadow: 0 4px 12px -2px rgb(0 0 0 / 10%);
      cursor: pointer;
    }
+    .mb-menu {
+      margin-left: 12px;
+      display: none;
+      @media (max-width: 768px) {
+        display: flex;
+      }
+    }
  }
 }
 </style>
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -10,12 +10,17 @@
    :show-size-picker="showSizePicker"
    :show-quick-jumper="showQuickJumper"
  >
-    <template #prefix="{ itemCount }"> 共 {{ itemCount }} 项 </template>
-    <template #goto> 前往 </template>
+    <template #prefix="{ itemCount }">
+      {{ $t("general.name.itemCount", { size: itemCount }) }}
+    </template>
+    <template #goto> {{ $t("general.name.goto") }} </template>
  </n-pagination>
 </template>

 <script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 const props = defineProps({
  // 数据总量
  totalCount: {
@@ -47,21 +52,25 @@ const currentPageNumber = ref(1);
 // 自定义每页数量
 const pageSizes = ref([
  {
-    label: "10条/页",
+    label: t("general.name.pageSizes", { num: 10 }),
    value: 10,
  },
  {
-    label: "20条/页",
+    label: t("general.name.pageSizes", { num: 20 }),
    value: 20,
  },
  {
-    label: "30条/页",
+    label: t("general.name.pageSizes", { num: 30 }),
    value: 30,
  },
  {
-    label: "50条/页",
+    label: t("general.name.pageSizes", { num: 50 }),
    value: 50,
  },
+  {
+    label: t("general.name.pageSizes", { num: 100 }),
+    value: 100,
+  },
 ]);

 // 每页个数数据变化
--- a/src/components/Personalized/PaAlbum.vue
+++ b/src/components/Personalized/PaAlbum.vue
@@ -1,8 +1,10 @@
 <template>
  <div class="paalbum">
    <n-h3 class="title" prefix="bar">
-      新碟上架
-      <span class="more" @click="router.push('/new-album?page=1')">更多</span>
+      {{ $t("home.title.newAlbum") }}
+      <span class="more" @click="router.push('/new-album?page=1')">
+        {{ $t("home.title.more") }}
+      </span>
    </n-h3>
    <CoverLists
      listType="album"
@@ -16,7 +18,7 @@
 <script setup>
 import { getNewAlbum } from "@/api/home";
 import { useRouter } from "vue-router";
-import { getLongTime } from "@/utils/timeTools.js";
+import { getLongTime } from "@/utils/timeTools";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 const router = useRouter();

--- a/src/components/Personalized/PaArtists.vue
+++ b/src/components/Personalized/PaArtists.vue
@@ -1,21 +1,21 @@
 <template>
  <div class="paartists">
    <n-h3 class="title" prefix="bar">
-      歌手推荐
+      {{ $t("home.title.artists") }}
      <n-tabs
        class="tab"
        :default-value="-1"
        size="small"
        @update:value="tabChange"
      >
-        <n-tab :name="-1"> 全部 </n-tab>
-        <n-tab :name="7"> 华语 </n-tab>
-        <n-tab :name="96"> 欧美 </n-tab>
-        <n-tab :name="8"> 日本 </n-tab>
-        <n-tab :name="16"> 韩国 </n-tab>
+        <n-tab :name="-1"> {{ $t("general.type.all") }} </n-tab>
+        <n-tab :name="7"> {{ $t("general.type.china") }} </n-tab>
+        <n-tab :name="96"> {{ $t("general.type.western") }} </n-tab>
+        <n-tab :name="8"> {{ $t("general.type.japan") }} </n-tab>
+        <n-tab :name="16"> {{ $t("general.type.korea") }} </n-tab>
      </n-tabs>
      <span class="more" @click="router.push('/discover/artists?page=1')">
-        更多
+        {{ $t("home.title.more") }}
      </span>
    </n-h3>
    <ArtistLists :listData="artistsData" :gridCollapsed="true" />
--- a/src/components/Personalized/PaDailySongs.vue
+++ b/src/components/Personalized/PaDailySongs.vue
@@ -1,19 +1,32 @@
 <template>
-  <div class="padailysongs" @click="router.push('/dailySongs')">
-    <img
-      class="pic"
-      :src="
-        music.getDailySongs[0]
-          ? music.getDailySongs[
-              Math.floor(Math.random() * music.getDailySongs.length)
-            ].album.picUrl.replace(/^http:/, 'https:') + '?param=800y800'
-          : '/images/pic/pic.jpg'
-      "
-      alt="pic"
-    />
+  <div
+    class="padailysongs"
+    :style="`background-image: url(${cardImage})`"
+    @click="router.push('/dailySongs')"
+  >
+    <div class="gray" />
    <div class="text">
-      <span class="title">每日推荐</span>
-      <span class="tip">根据你的音乐口味生成 · 每天 6:00 更新</span>
+      <div class="date">
+        <n-icon class="calendar" :component="CalendarTodayFilled" size="40" />
+        <n-text class="num" v-html="new Date().getDate()" />
+      </div>
+      <div class="desc">
+        <n-text class="title">{{ $t("home.modules.dailySongs.title") }}</n-text>
+        <n-text class="tip">{{ $t("home.modules.dailySongs.subtitle") }}</n-text>
+      </div>
+    </div>
+    <div class="control">
+      <n-avatar
+        class="cover"
+        :src="cardImage"
+        fallback-src="/images/pic/default.png"
+      />
+      <n-icon
+        class="play"
+        :component="PlayCircleFilled"
+        size="50"
+        @click.stop="playThisSong"
+      />
    </div>
  </div>
 </template>
@@ -22,24 +35,71 @@
 import { getDailySongs } from "@/api/home";
 import { useRouter } from "vue-router";
 import { musicStore, userStore } from "@/store";
+import { PlayCircleFilled, CalendarTodayFilled } from "@vicons/material";

 const music = musicStore();
 const user = userStore();
 const router = useRouter();

+// 卡片背景
+const cardImage = ref(null);
+
+// 随机数
+const randomNumber = Math.floor(Math.random() * music.getDailySongs.length);
+
+// 生成卡片背景
+const getCardImage = () => {
+  if (user.userLogin && music.getDailySongs[0]) {
+    cardImage.value =
+      music.getDailySongs[randomNumber]?.album.picUrl.replace(
+        /^http:/,
+        "https:"
+      ) + "?param=100y100";
+  } else {
+    cardImage.value = "/images/pic/pic.jpg";
+  }
+};
+
 // 获取每日推荐数据
 const getDailySongsData = () => {
-  getDailySongs().then((res) => {
-    if (res.data.dailySongs) {
-      music.setDailySongs(res.data.dailySongs);
+  getCardImage();
+  if (music.getDailySongs.length === 0 && user.userLogin) {
+    getDailySongs().then((res) => {
+      if (res.data.dailySongs) {
+        music.setDailySongs(res.data.dailySongs);
+        getCardImage();
+      } else {
+        $message.error("每日推荐获取失败");
+      }
+    });
+  }
+};
+
+// 从当前歌曲开始播放
+const playThisSong = () => {
+  if (user.userLogin) {
+    if (music.getDailySongs.length !== 0) {
+      // 正在播放的歌曲id
+      const songId = music.getPlaySongData?.id;
+      // 查找是否在日推中
+      const isHas = music.getDailySongs.findIndex((o) => o.id === songId);
+      console.log(isHas);
+      music.setPersonalFmMode(false);
+      music.setPlayState(true);
+      if (isHas === -1) {
+        music.setPlaylists(music.getDailySongs);
+        music.addSongToPlaylists(music.getDailySongs[randomNumber]);
+      }
    } else {
-      $message.error("每日推荐获取失败");
+      $message.error("每日推荐获取失败，请刷新后重试");
    }
-  });
+  } else {
+    $message.error("请登录账号后使用");
+  }
 };

 onMounted(() => {
-  if (music.getDailySongs.length === 0 && user.userLogin) getDailySongsData();
+  getDailySongsData();
 });
 </script>

@@ -47,66 +107,130 @@ onMounted(() => {
 .padailysongs {
  position: relative;
  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-  padding: 20px;
-  height: 200px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 110px;
  border-radius: 8px;
+  padding: 0 28px;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 0;
+  margin-bottom: 20px;
  transition: all 0.3s;
+  background-repeat: no-repeat;
+  background-size: 120% 120%;
+  background-position: center;
  cursor: pointer;
  &:hover {
-    .pic {
-      transform: translateY(calc(-50% + 13vh)) scale(1.2);
-      filter: brightness(50%);
+    .control {
+      .cover {
+        opacity: 0;
+      }
+      .play {
+        transform: rotate(0);
+        opacity: 1;
+        right: 5px;
+      }
    }
  }
-  &:active {
-    transform: scale(0.98);
-  }
-  .pic {
-    transition: all 0.3s;
+  .gray {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
-    transform: translateY(calc(-50% + 13vh));
-    filter: brightness(70%);
+    height: 100%;
+    background-color: #00000040;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
    z-index: -1;
-    @media (min-width: 750px) and (max-width: 1056px) {
-      transform: none;
-      height: 100%;
-    }
-    @media (max-width: 500px) {
-      transform: none;
-    }
  }
  .text {
    display: flex;
-    flex-direction: column;
    align-items: center;
-    color: #fff;
-    text-shadow: 0px 0px 8px #00000082;
-    .title {
-      font-size: 34px;
-      font-weight: bold;
-      margin-bottom: 8px;
-      letter-spacing: 2px;
+    .date {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      margin-right: 18px;
+      .num {
+        margin-top: 8px;
+        position: absolute;
+        font-size: 14px;
+        font-weight: bold;
+        color: #fff;
+      }
    }
-    @media (min-width: 750px) and (max-width: 1056px) {
+    .desc {
+      display: flex;
+      flex-direction: column;
+      span {
+        color: #fff;
+      }
+      .title {
+        font-size: 20px;
+        margin-bottom: 2px;
+        @media (max-width: 1020px) {
+          font-size: 18px;
+        }
+      }
      .tip {
-        display: none;
+        color: #e9e9e9;
+        font-size: 13px;
      }
    }
  }
-  @media (max-width: 500px) {
-    height: 160px;
-    .text {
-      .title {
-        font-size: 30px;
-        margin-bottom: 4px;
+  .control {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-left: 12px;
+    .cover {
+      position: relative;
+      background-color: transparent;
+      width: 70px;
+      height: 70px;
+      transition: all 0.3s;
+      z-index: 0;
+      overflow: inherit;
+      :deep(img) {
+        border-radius: 8px;
+      }
+      &::before,
+      &::after {
+        content: "";
+        border-radius: 8px;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-color: #fff;
+        opacity: 0.6;
+        transform: scale(0.85) translateX(11px);
+        z-index: -1;
+      }
+      &::after {
+        transform: scale(0.7) translateX(27px);
+        opacity: 0.4;
+        z-index: -2;
+      }
+    }
+    .play {
+      color: #fff;
+      opacity: 0;
+      right: -70px;
+      position: absolute;
+      transform: rotate(180deg);
+      transition: all 0.3s;
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.1);
+      }
+      &:active {
+        transform: scale(1);
      }
    }
  }
--- a/src/components/Personalized/PaLikeSongs.vue
+++ b/src/components/Personalized/PaLikeSongs.vue
@@ -0,0 +1,169 @@
+<template>
+  <!-- 喜欢的音乐 -->
+  <div
+    class="like-song"
+    :style="`background-image: url(${cardImage})`"
+    @click="toLikeSongs"
+  >
+    <div class="gray" />
+    <div class="left">
+      <n-icon class="icon" :component="CollectionRecords" size="30" />
+      <div class="title">
+        <n-text class="name">{{ $t("home.modules.likeSong.title") }}</n-text>
+        <n-text class="tip">{{ $t("home.modules.likeSong.subtitle") }}</n-text>
+      </div>
+    </div>
+    <div class="right">
+      <n-icon class="icon" :component="Right" size="20" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { userStore } from "@/store";
+import { CollectionRecords, Right } from "@icon-park/vue-next";
+
+const router = useRouter();
+const user = userStore();
+
+// 卡片背景
+const cardImage = ref(null);
+
+// 生成卡片背景
+const getCardImage = (index) => {
+  if (user.userLogin && user.getUserPlayLists.own[0]) {
+    const num =
+      index ?? Math.floor(Math.random() * user.getUserPlayLists.own.length);
+    cardImage.value =
+      user.getUserPlayLists.own[num]?.cover.replace(/^http:/, "https:") +
+      "?param=100y100";
+  } else {
+    cardImage.value = "/images/pic/pic.jpg";
+  }
+};
+
+// 跳转喜欢的音乐
+const toLikeSongs = () => {
+  if (user.userLogin) {
+    const id = user.getUserPlayLists.own[0]?.id;
+    if (id) {
+      router.push(`/playlist?id=${id}&page=1`);
+    } else {
+      console.error("发生错误");
+    }
+  } else {
+    $message.error("请登录账号后使用");
+    router.push("/login");
+  }
+};
+
+onMounted(() => {
+  getCardImage();
+  if (
+    user.userLogin &&
+    !user.getUserPlayLists.has &&
+    !user.getUserPlayLists.isLoading
+  ) {
+    user.setUserPlayLists(() => {
+      getCardImage();
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.like-song {
+  position: relative;
+  color: #fff;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 8px;
+  padding: 0 18px;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-size: 120% 120%;
+  background-position: center;
+  cursor: pointer;
+  z-index: 0;
+  overflow: hidden;
+  &:hover {
+    .left {
+      .title {
+        .name {
+          opacity: 0;
+          transform: translateY(-50px);
+        }
+        .tip {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    }
+    .right {
+      .icon {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+  .gray {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #00000040;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    z-index: -1;
+  }
+  .left {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .icon {
+      margin-right: 12px;
+    }
+    .title {
+      height: 100%;
+      width: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .name {
+        color: #fff;
+        font-size: 18px;
+        transition: all 0.3s;
+        @media (max-width: 1020px) {
+          font-size: 16px;
+        }
+      }
+      .tip {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        color: #fff;
+        opacity: 0;
+        transform: translateY(50px);
+        transition: all 0.3s;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    .icon {
+      opacity: 0;
+      transform: translateX(-8px);
+      transition: all 0.3s;
+    }
+  }
+}
+</style>
--- a/src/components/Personalized/PaPersonalFm.vue
+++ b/src/components/Personalized/PaPersonalFm.vue
@@ -1,12 +1,11 @@
 <template>
  <div
    class="papersonalfm"
-    v-if="music.getPersonalFmData.id"
-    :style="
-      'background-image: url(' +
-      music.getPersonalFmData.album.picUrl.replace(/^http:/, 'https:') +
-      '?param=300y300)'
-    "
+    v-if="music.getPersonalFmData?.id"
+    :style="`background-image: url(${music.getPersonalFmData.album.picUrl.replace(
+      /^http:/,
+      'https:'
+    )}?param=300y300)`"
  >
    <div class="gray" />
    <img
@@ -58,9 +57,11 @@
        <div class="radio">
          <div class="icon">
            <n-icon size="20" :component="RadioFilled" />
-            <span>私人FM</span>
+            <span>{{ $t("home.modules.papersonalfm.title") }}</span>
          </div>
-          <span class="tip" v-if="!user.userLogin">未登录模式</span>
+          <span class="tip" v-if="!user.userLogin">
+            {{ $t("home.modules.papersonalfm.subtitle") }}
+          </span>
        </div>
      </div>
    </div>
@@ -110,7 +111,7 @@ onMounted(() => {
  display: flex;
  align-items: center;
  padding: 20px;
-  height: 200px;
+  height: 100%;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
@@ -127,8 +128,8 @@ onMounted(() => {
    width: 100%;
    height: 100%;
    background-color: #00000040;
-    -webkit-backdrop-filter: blur(80px);
-    backdrop-filter: blur(80px);
+    -webkit-backdrop-filter: blur(40px);
+    backdrop-filter: blur(40px);
    z-index: -1;
  }
  .pic {
@@ -172,8 +173,7 @@ onMounted(() => {
      align-items: center;
      .state {
        margin-right: 2px;
-        transform: scale(1);
-        transition: all 0.3s;
+        transition: transform 0.3s;
        cursor: pointer;
        &:hover {
          transform: scale(1.1);
@@ -190,8 +190,10 @@ onMounted(() => {
        border-radius: 8px;
        transform: scale(1);
        transition: all 0.3s;
-        &:hover {
-          background-color: #ffffff30;
+        @media (min-width: 640px) {
+          &:hover {
+            background-color: #ffffff30;
+          }
        }
        &:active {
          transform: scale(0.9);
@@ -234,7 +236,7 @@ onMounted(() => {
      }
    }
  }
-  @media (max-width: 500px) {
+  @media (max-width: 1020px) {
    .pic {
      height: 96px;
      position: absolute;
--- a/src/components/Personalized/PaPlayLists.vue
+++ b/src/components/Personalized/PaPlayLists.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="paplaylists">
    <n-h3 class="title" prefix="bar">
-      推荐歌单
+      {{ $t("home.title.playlists") }}
      <span class="more" @click="router.push('/discover/playlists?page=1')">
-        更多
+        {{ $t("home.title.more") }}
      </span>
    </n-h3>
    <CoverLists
@@ -17,7 +17,7 @@
 <script setup>
 import { getPersonalized } from "@/api/home";
 import { useRouter } from "vue-router";
-import { formatNumber } from "@/utils/timeTools.js";
+import { formatNumber } from "@/utils/timeTools";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 const router = useRouter();

--- a/src/components/Personalized/PaRadar.vue
+++ b/src/components/Personalized/PaRadar.vue
@@ -0,0 +1,123 @@
+<template>
+  <!-- 私人雷达 -->
+  <div class="radar" @click="router.push(`/playlist?id=${radarId}&page=1`)">
+    <div class="gray" />
+    <div class="left">
+      <n-icon class="icon" :component="RadarThree" size="30" />
+      <div class="title">
+        <n-text class="name">{{ $t("home.modules.radar.title") }}</n-text>
+        <n-text class="tip">{{ $t("home.modules.radar.subtitle") }}</n-text>
+      </div>
+    </div>
+    <div class="right">
+      <n-icon class="icon" :component="Right" size="20" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from "vue-router";
+import { RadarThree, Right } from "@icon-park/vue-next";
+
+const router = useRouter();
+
+// 私人雷达歌单
+const radarId = ref(3136952023);
+</script>
+
+<style lang="scss" scoped>
+.radar {
+  position: relative;
+  color: #fff;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 8px;
+  padding: 0 18px;
+  box-sizing: border-box;
+  background-image: url("/images/pic/radar.jpg");
+  background-repeat: no-repeat;
+  background-size: 120% 120%;
+  background-position: center;
+  cursor: pointer;
+  z-index: 0;
+  overflow: hidden;
+  &:hover {
+    .left {
+      .title {
+        .name {
+          opacity: 0;
+          transform: translateY(-50px);
+        }
+        .tip {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+    }
+    .right {
+      .icon {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+  }
+  .gray {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #00000010;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    z-index: -1;
+  }
+  .left {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .icon {
+      margin-right: 12px;
+    }
+    .title {
+      height: 100%;
+      width: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .name {
+        color: #fff;
+        font-size: 18px;
+        transition: all 0.3s;
+        @media (max-width: 1020px) {
+          font-size: 16px;
+        }
+      }
+      .tip {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        position: absolute;
+        color: #fff;
+        opacity: 0;
+        transform: translateY(50px);
+        transition: all 0.3s;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    .icon {
+      opacity: 0;
+      transform: translateX(-8px);
+      transition: all 0.3s;
+    }
+  }
+}
+</style>
--- a/src/components/Player/BigPlayer.vue
+++ b/src/components/Player/BigPlayer.vue
@@ -1,7 +1,7 @@
 <template>
  <Transition name="up">
    <div
-      v-show="music.showBigPlayer"
+      v-if="music.showBigPlayer"
      class="bplayer"
      :style="[
        music.getPlaySongData && setting.backgroundImageShow === 'blur'
@@ -17,17 +17,12 @@
      />
      <div class="icon-menu">
        <div class="menu-left">
-          <div class="icon">
+          <div v-if="setting.showLyricSetting" class="icon">
            <n-icon
              class="setting"
              size="30"
              :component="SettingsRound"
-              @click="
-                () => {
-                  music.setBigPlayerState(false);
-                  router.push('/setting/player');
-                }
-              "
+              @click="LyricSettingRef.openLyricSetting()"
            />
          </div>
        </div>
@@ -58,7 +53,7 @@
        <!-- 提示文本 -->
        <Transition name="lrc">
          <div class="tip" v-show="lrcMouseStatus">
-            <n-text>点击选中的歌词以调整播放进度</n-text>
+            <n-text>{{ $t("other.lrcClicks") }}</n-text>
          </div>
        </Transition>
        <div class="left">
@@ -83,7 +78,7 @@
                  <span>{{
                    music.getPlaySongData
                      ? music.getPlaySongData.name
-                      : "暂无歌曲"
+                      : $t("other.noSong")
                  }}</span>
                  <span
                    v-if="music.getPlaySongData && music.getPlaySongData.alia"
@@ -134,9 +129,10 @@
          </Transition>
        </div>
      </div>
-      <div class="canvas">
-        <canvas v-if="setting.musicFrequency" class="avBars" ref="avBars" />
-      </div>
+      <!-- 音乐频谱 -->
+      <!-- <Spectrum v-if="setting.musicFrequency" /> -->
+      <!-- 歌词设置 -->
+      <LyricSetting ref="LyricSettingRef" />
    </div>
  </Transition>
 </template>
@@ -152,10 +148,12 @@ import {
 } from "@vicons/material";
 import { musicStore, settingStore, siteStore } from "@/store";
 import { useRouter } from "vue-router";
-import MusicFrequency from "@/utils/MusicFrequency.js";
+import { setSeek } from "@/utils/Player";
 import PlayerRecord from "./PlayerRecord.vue";
 import PlayerCover from "./PlayerCover.vue";
 import RollingLyrics from "./RollingLyrics.vue";
+// import Spectrum from "./Spectrum.vue";
+import LyricSetting from "@/components/DataModal/LyricSetting.vue";
 import screenfull from "screenfull";

 const router = useRouter();
@@ -166,13 +164,13 @@ const setting = settingStore();
 // 工具栏显隐
 const menuShow = ref(false);

-// 音乐频谱
-const avBars = ref(null);
-const musicFrequency = ref(null);
+// 歌词设置弹窗
+const LyricSettingRef = ref(null);

 // 歌词文本点击事件
 const lrcTextClick = (time) => {
-  if ($player) $player.currentTime = time;
+  if (typeof $player !== "undefined") setSeek($player, time);
+  music.setPlayState(true);
  lrcMouseStatus.value = false;
 };

@@ -238,29 +236,16 @@ const changePwaColor = () => {
  if (music.showBigPlayer) {
    themeColorMeta.setAttribute("content", site.songPicColor);
  } else {
-    if (setting.getSiteTheme == "light") {
+    if (setting.getSiteTheme === "light") {
      themeColorMeta.setAttribute("content", "#ffffff");
-    } else if (setting.getSiteTheme == "dark") {
+    } else if (setting.getSiteTheme === "dark") {
      themeColorMeta.setAttribute("content", "#18181c");
    }
  }
 };

 onMounted(() => {
-  nextTick(() => {
-    if (setting.musicFrequency) {
-      $player.crossOrigin = "anonymous";
-      musicFrequency.value = new MusicFrequency(
-        avBars.value,
-        $player,
-        null,
-        50,
-        null,
-        null,
-        5
-      );
-      musicFrequency.value.drawSpectrum();
-    }
+  nextTick().then(() => {
    // 滚动歌词
    lyricsScroll(music.getPlaySongLyricIndex);
  });
@@ -277,9 +262,9 @@ watch(
    changePwaColor();
    if (val) {
      console.log("开启播放器", music.getPlaySongLyricIndex);
-      nextTick(() => {
-        lyricsScroll(music.getPlaySongLyricIndex);
+      nextTick().then(() => {
        music.showPlayList = false;
+        lyricsScroll(music.getPlaySongLyricIndex);
      });
    }
  }
@@ -417,6 +402,12 @@ watch(
      .left {
        padding-right: 0;
        transform: translateX(25vh);
+        @media (max-width: 1200px) {
+          transform: translateX(22.2vh);
+        }
+        @media (min-width: 769px) and (max-width: 869px) {
+          transform: translateX(20.1vh);
+        }
      }
      @media (max-width: 768px) {
        .left {
--- a/src/components/Player/CountDown.vue
+++ b/src/components/Player/CountDown.vue
@@ -1,5 +1,5 @@
 <template>
-  <Transition mode="out-in" appear>
+  <Transition mode="out-in" appear v-if="music.getPlaySongLyric">
    <div
      class="countdown"
      :style="{ animationPlayState: music.getPlayState ? 'running' : 'paused' }"
@@ -24,33 +24,35 @@ const music = musicStore();
 // 剩余点数
 const remainingPoint = ref(0);
 // 总时长
-const totalDuration = ref(
-  music.getPlaySongLyric.hasYrc
-    ? music.getPlaySongLyric?.yrc[0].time
-    : music.getPlaySongLyric?.lrc[0].time
-);
+const totalDuration = ref(0);

 // 监听歌曲时长变化
 watch(
  () => music.getPlaySongTime.currentTime,
  (val) => {
-    if (music.getPlaySongLyric.lrc[0]) {
-      const remainingTime = totalDuration.value - val - 0.5;
-      const progress = 1 - remainingTime / totalDuration.value;
-      remainingPoint.value = Number(Math.floor(3 * progress));
+    if (music.getPlaySongLyric) {
+      const lyric =
+        music.getPlaySongLyric.lrc[0] || music.getPlaySongLyric.yrc[0];
+      if (lyric) {
+        totalDuration.value = lyric.time;
+        const remainingTime = totalDuration.value - val - 0.5;
+        const progress = 1 - remainingTime / totalDuration.value;
+        remainingPoint.value = Number(Math.floor(3 * progress));
+      }
    }
  }
 );

 // 监听歌曲改变
 watch(
-  () => music.getPlaySongLyric?.lrc,
+  () => music.getPlaySongLyric,
  (val) => {
-    if (music.getPlaySongLyric.lrc[0]) {
-      totalDuration.value = music.getPlaySongLyric.hasYrc
-        ? music.getPlaySongLyric?.yrc[0].time
-        : val[0].time;
-      remainingPoint.value = 0;
+    if (val) {
+      const lyric = val.lrc[0] || val.yrc[0];
+      if (lyric) {
+        totalDuration.value = lyric.time;
+        remainingPoint.value = 0;
+      }
    }
  }
 );
@@ -67,6 +69,7 @@ watch(
  opacity: 0;
  transform: scale(0);
 }
+
 .countdown {
  animation: breathe 5s ease-in-out infinite;
  .point {
@@ -77,13 +80,16 @@ watch(
    }
  }
 }
+
@keyframes breathe {
  0% {
    transform: scale(0.95);
  }
+
  50% {
    transform: scale(1.1);
  }
+
  100% {
    transform: scale(0.95);
  }
--- a/src/components/Player/PlayerCover.vue
+++ b/src/components/Player/PlayerCover.vue
@@ -11,13 +11,25 @@
        "
        alt="cover"
      />
+      <img
+        class="shadow"
+        :src="
+          music.getPlaySongData
+            ? music.getPlaySongData.album.picUrl.replace(/^http:/, 'https:') +
+              '?param=1024y1024'
+            : '/images/pic/default.png'
+        "
+        alt="shadow"
+      />
    </div>
    <div class="control">
      <div class="data">
        <div class="desc">
          <span class="name text-hidden">
            {{
-              music.getPlaySongData ? music.getPlaySongData.name : "暂无歌曲"
+              music.getPlaySongData
+                ? music.getPlaySongData.name
+                : $t("other.noSong")
            }}
          </span>
          <div v-if="music.getPlaySongData" class="message">
@@ -61,11 +73,14 @@
      </div>
      <div class="time">
        <span>{{ music.getPlaySongTime.songTimePlayed }}</span>
-        <n-slider
-          v-model:value="music.getPlaySongTime.barMoveDistance"
-          class="progress"
-          :step="0.01"
-          @update:value="songTimeSliderUpdate"
+        <vue-slider
+          v-model="music.getPlaySongTime.barMoveDistance"
+          @drag-start="music.setPlayState(false)"
+          @drag-end="sliderDragEnd"
+          @click.stop="
+            songTimeSliderUpdate(music.getPlaySongTime.barMoveDistance)
+          "
+          :tooltip="'none'"
        />
        <span>{{ music.getPlaySongTime.songTimeDuration }}</span>
      </div>
@@ -98,6 +113,7 @@
          v-else
          class="dislike"
          size="20"
+          :style="!user.userLogin ? 'opacity: 0.2;pointer-events: none;' : null"
          :component="ThumbDownRound"
          @click="music.setFmDislike(music.getPersonalFmData.id)"
        />
@@ -143,16 +159,25 @@ import {
 import { PlayCycle, PlayOnce, ShuffleOne } from "@icon-park/vue-next";
 import { musicStore, userStore } from "@/store";
 import { useRouter } from "vue-router";
+import { setSeek } from "@/utils/Player";
 import AllArtists from "@/components/DataList/AllArtists.vue";
+import VueSlider from "vue-slider-component";
+import "vue-slider-component/theme/default.css";

 const router = useRouter();
 const music = musicStore();
 const user = userStore();

 // 歌曲进度条更新
+const sliderDragEnd = () => {
+  songTimeSliderUpdate(music.getPlaySongTime.barMoveDistance);
+  music.setPlayState(true);
+};
 const songTimeSliderUpdate = (val) => {
-  if ($player && music.getPlaySongTime && music.getPlaySongTime.duration)
-    $player.currentTime = (music.getPlaySongTime.duration / 100) * val;
+  if (typeof $player !== "undefined" && music.getPlaySongTime?.duration) {
+    const currentTime = (music.getPlaySongTime.duration / 100) * val;
+    setSeek($player, currentTime);
+  }
 };

 // 页面跳转
@@ -168,11 +193,11 @@ const routerJump = (url, query) => {
 <style lang="scss" scoped>
 .cover {
  .pic {
+    position: relative;
    width: 50vh;
    height: 50vh;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 0 40px 14px rgb(0 0 0 / 20%);
+    z-index: 1;
+    // overflow: hidden;
    @media (max-width: 1200px) {
      width: 44vh;
      height: 44vh;
@@ -184,6 +209,19 @@ const routerJump = (url, query) => {
    .album {
      width: 100%;
      height: 100%;
+      border-radius: 8px;
+    }
+    .shadow {
+      position: absolute;
+      left: 0;
+      top: 12px;
+      height: 100%;
+      width: 100%;
+      filter: blur(16px) opacity(0.6);
+      transform: scale(0.92, 0.96);
+      z-index: -1;
+      background-size: cover;
+      aspect-ratio: 1/1;
    }
  }
  .control {
@@ -268,13 +306,26 @@ const routerJump = (url, query) => {
      span {
        opacity: 0.8;
      }
-      .progress {
-        margin: 0 12px;
-        --n-handle-size: 12px;
-        --n-fill-color: #fff;
-        --n-fill-color-hover: #fff;
-        --n-rail-color: #ffffff20;
-        --n-rail-color-hover: #ffffff30;
+      .vue-slider {
+        margin: 0 10px;
+        width: 100% !important;
+        transform: translateY(-1px);
+        cursor: pointer;
+        :deep(.vue-slider-rail) {
+          background-color: #ffffff20;
+          border-radius: 25px;
+          .vue-slider-process {
+            background-color: #fff;
+          }
+          .vue-slider-dot {
+            width: 12px !important;
+            height: 12px !important;
+            box-shadow: none;
+          }
+          .vue-slider-dot-handle-focus {
+            box-shadow: none;
+          }
+        }
      }
    }
    .buttons {
--- a/src/components/Player/RollingLyrics-old.vue
+++ b/src/components/Player/RollingLyrics-old.vue
@@ -0,0 +1,327 @@
+<template>
+  <!-- 歌词滚动 -->
+  <div
+    v-if="music.getPlaySongLyric.lrc[0]"
+    :class="[
+      setting.playerStyle === 'cover' ? 'lrc-all cover' : 'lrc-all record',
+      setting.lyricsBlock === 'center' ? 'center' : 'top',
+    ]"
+    :style="
+      setting.lyricsPosition === 'center'
+        ? { textAlign: 'center', paddingRight: '0' }
+        : null
+    "
+  >
+    <div
+      class="placeholder"
+      :id="
+        !music.getPlaySongLyric.hasYrc || !setting.showYrc ? 'lrc-1' : 'yrc-1'
+      "
+    >
+      <CountDown
+        v-if="setting.countDownShow"
+        :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
+      />
+    </div>
+    <!-- 普通歌词 -->
+    <template v-if="!music.getPlaySongLyric.hasYrc || !setting.showYrc">
+      <div
+        v-for="(item, index) in music.getPlaySongLyric.lrc"
+        :class="music.getPlaySongLyricIndex == index ? 'lrc on' : 'lrc'"
+        :style="{ marginBottom: setting.lyricsFontSize - 1.6 + 'vh' }"
+        :key="item"
+        :id="'lrc' + index"
+        @click="lrcTextClick(item.time)"
+      >
+        <div
+          :class="setting.lyricsBlur ? 'lrc-text blur' : 'lrc-text'"
+          :style="{
+            transformOrigin:
+              setting.lyricsPosition === 'center' ? 'center' : null,
+            filter: setting.lyricsBlur
+              ? `blur(${getFilter(music.getPlaySongLyricIndex, index)}px)`
+              : null,
+          }"
+        >
+          <span
+            class="lyric"
+            :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
+          >
+            {{ item.content }}
+          </span>
+          <span
+            v-show="
+              music.getPlaySongLyric.hasLrcTran &&
+              setting.showTransl &&
+              item.tran
+            "
+            :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
+            class="lyric-fy"
+          >
+            {{ item.tran }}</span
+          >
+          <span
+            v-show="
+              music.getPlaySongLyric.hasLrcRoma && setting.showRoma && item.roma
+            "
+            :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
+            class="lyric-roma"
+          >
+            {{ item.roma }}</span
+          >
+        </div>
+      </div>
+    </template>
+    <!-- 逐字歌词 -->
+    <template v-else>
+      <div
+        v-for="(item, index) in music.getPlaySongLyric.yrc"
+        :class="music.getPlaySongLyricIndex == index ? 'yrc on' : 'yrc'"
+        :key="item"
+        :id="'yrc' + index"
+        @click="lrcTextClick(item.time)"
+      >
+        <div
+          :class="setting.lyricsBlur ? 'yrc-text blur' : 'yrc-text'"
+          :style="{
+            transformOrigin:
+              setting.lyricsPosition === 'center' ? 'center' : null,
+            filter: setting.lyricsBlur
+              ? `blur(${getFilter(music.getPlaySongLyricIndex, index)}px)`
+              : null,
+          }"
+        >
+          <div
+            class="lyric"
+            :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
+          >
+            <span
+              v-for="(v, i) in item.content"
+              :key="i"
+              :style="{
+                '--dur': `${Math.max(v.duration - 0.15, 0.1)}s`,
+              }"
+              :class="
+                music.getPlaySongLyricIndex === index &&
+                music.getPlaySongTime.currentTime + 0.15 > v.time
+                  ? 'text fill'
+                  : 'text'
+              "
+            >
+              {{ v.content }}
+            </span>
+          </div>
+          <span
+            v-show="
+              music.getPlaySongLyric.hasYrcTran &&
+              setting.showTransl &&
+              item.tran
+            "
+            :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
+            class="lyric-fy"
+          >
+            {{ item.tran }}
+          </span>
+          <span
+            v-show="
+              music.getPlaySongLyric.hasYrcRoma && setting.showRoma && item.roma
+            "
+            :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
+            class="lyric-roma"
+          >
+            {{ item.roma }}
+          </span>
+        </div>
+      </div>
+    </template>
+    <div class="placeholder"></div>
+  </div>
+</template>
+
+<script setup>
+import { musicStore, settingStore } from "@/store";
+import CountDown from "./CountDown.vue";
+
+const music = musicStore();
+const setting = settingStore();
+
+// 发送方法
+const emit = defineEmits(["lrcTextClick"]);
+
+// 歌词模糊数值
+const getFilter = (lrcIndex, index) => {
+  if (lrcIndex >= index) {
+    return lrcIndex - index;
+  } else {
+    return index - lrcIndex;
+  }
+};
+
+// 歌词文本点击
+const lrcTextClick = (time) => {
+  emit("lrcTextClick", time);
+};
+</script>
+
+<style lang="scss" scoped>
+.lrc-all {
+  margin-right: 20%;
+  scrollbar-width: none;
+  // max-width: 460px;
+  max-width: 52vh;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  &.cover {
+    height: 80vh;
+  }
+  &.record {
+    height: 60vh;
+  }
+  &.center {
+    mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 15%,
+      #fff 25%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+    -webkit-mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 15%,
+      #fff 25%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+  }
+  &.top {
+    mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 5%,
+      #fff 10%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+    -webkit-mask: linear-gradient(
+      180deg,
+      hsla(0, 0%, 100%, 0) 0,
+      hsla(0, 0%, 100%, 0.6) 5%,
+      #fff 10%,
+      #fff 75%,
+      hsla(0, 0%, 100%, 0.6) 85%,
+      hsla(0, 0%, 100%, 0)
+    );
+    .placeholder {
+      &:nth-of-type(1) {
+        height: 16%;
+      }
+    }
+  }
+  &:hover {
+    .lrc-text,
+    .yrc-text {
+      &.blur {
+        filter: blur(0) !important;
+      }
+    }
+  }
+  @media (max-width: 768px) {
+    height: 70vh;
+    margin-right: 0;
+  }
+  .placeholder {
+    width: 100%;
+    &:nth-of-type(1) {
+      height: 50%;
+      display: flex;
+      align-items: flex-end;
+      padding: 0 0 0.8vh 3vh;
+    }
+    &:nth-last-of-type(1) {
+      height: 80%;
+    }
+  }
+  .lrc,
+  .yrc {
+    opacity: 0.3;
+    transition: all 0.3s;
+    margin-bottom: 0.8vh;
+    padding: 1.8vh 4vh 1.8vh 3vh;
+    border-radius: 8px;
+    transition: all 0.3s;
+    transform-origin: left bottom;
+    cursor: pointer;
+    .lrc-text,
+    .yrc-text {
+      display: flex;
+      flex-direction: column;
+      transition: all 0.35s ease-in-out;
+      transform: scale(0.95);
+      transform-origin: left bottom;
+      .lyric {
+        font-weight: bold;
+        transition: all 0.3s;
+        .text {
+          transition: all var(--dur);
+          color: #ffffff66;
+          &.fill {
+            text-shadow: 0 0 40px rgb(255 255 255 / 40%);
+            background-image: linear-gradient(to right, #fff 0%, #fff 0%);
+            background-repeat: no-repeat;
+            background-size: 0% 100%;
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: #ffffff66;
+            animation: toRight var(--dur) forwards linear;
+          }
+          @keyframes toRight {
+            to {
+              background-size: 100% 100%;
+            }
+          }
+        }
+      }
+      .lyric-fy,
+      .lyric-roma {
+        margin-top: 4px;
+        transition: all 0.3s;
+        opacity: 0.6;
+      }
+    }
+    &.on {
+      opacity: 1;
+      .lrc-text {
+        transform: scale(1.05);
+        .lyric {
+          text-shadow: 0 0 40px rgb(255 255 255 / 40%);
+        }
+      }
+      .yrc-text {
+        transform: scale(1.05);
+        .lyric {
+          font-weight: bold;
+        }
+      }
+    }
+    &:hover {
+      @media (min-width: 768px) {
+        background-color: #ffffff20;
+        opacity: 0.8;
+      }
+    }
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+  .yrc {
+    opacity: 0.6;
+  }
+}
+</style>
--- a/src/components/Player/RollingLyrics.vue
+++ b/src/components/Player/RollingLyrics.vue
@@ -1,142 +1,148 @@
 <template>
-  <!-- 歌词滚动 -->
+  <!-- 滚动歌词 -->
  <div
    v-if="music.getPlaySongLyric.lrc[0]"
    :class="[
      setting.playerStyle === 'cover' ? 'lrc-all cover' : 'lrc-all record',
      setting.lyricsBlock === 'center' ? 'center' : 'top',
    ]"
-    :style="
-      setting.lyricsPosition === 'center'
-        ? { textAlign: 'center', paddingRight: '0' }
-        : null
-    "
  >
    <div
      class="placeholder"
      :id="
        !music.getPlaySongLyric.hasYrc || !setting.showYrc ? 'lrc-1' : 'yrc-1'
      "
+      :style="
+        setting.lyricsPosition === 'center'
+          ? { justifyContent: 'center', padding: '0' }
+          : null
+      "
    >
      <CountDown
        v-if="setting.countDownShow"
        :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
      />
    </div>
+    <!-- 普通歌词 -->
    <template v-if="!music.getPlaySongLyric.hasYrc || !setting.showYrc">
      <div
+        class="lrc"
        v-for="(item, index) in music.getPlaySongLyric.lrc"
-        :class="music.getPlaySongLyricIndex == index ? 'lrc on' : 'lrc'"
-        :style="{ marginBottom: setting.lyricsFontSize - 1.6 + 'vh' }"
+        :class="{
+          on: music.getPlaySongLyricIndex == index,
+          blur: setting.lyricsBlur,
+        }"
+        :style="{
+          marginBottom: setting.lyricsFontSize - 1.6 + 'vh',
+          transformOrigin:
+            setting.lyricsPosition === 'center' ? 'center' : null,
+          filter: setting.lyricsBlur
+            ? `blur(${getFilter(music.getPlaySongLyricIndex, index)}px)`
+            : 'none',
+          alignItems:
+            setting.lyricsPosition === 'center' ? 'center' : 'flex-start',
+        }"
        :key="item"
        :id="'lrc' + index"
        @click="lrcTextClick(item.time)"
      >
-        <div
-          :class="setting.lyricsBlur ? 'lrc-text blur' : 'lrc-text'"
-          :style="{
-            transformOrigin:
-              setting.lyricsPosition === 'center' ? 'center' : null,
-            filter: setting.lyricsBlur
-              ? `blur(${getFilter(music.getPlaySongLyricIndex, index)}px)`
-              : null,
-          }"
+        <span
+          class="lyric"
+          :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
+        >
+          {{ item.content }}
+        </span>
+        <span
+          v-if="
+            music.getPlaySongLyric.hasLrcTran && setting.showTransl && item.tran
+          "
+          :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
+          class="lyric-fy"
+        >
+          {{ item.tran }}</span
+        >
+        <span
+          v-if="
+            music.getPlaySongLyric.hasLrcRoma && setting.showRoma && item.roma
+          "
+          :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
+          class="lyric-roma"
+        >
+          {{ item.roma }}</span
        >
-          <span
-            class="lyric"
-            :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
-          >
-            {{ item.content }}
-          </span>
-          <span
-            v-show="
-              music.getPlaySongLyric.hasLrcTran &&
-              setting.showTransl &&
-              item.tran
-            "
-            :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
-            class="lyric-fy"
-          >
-            {{ item.tran }}</span
-          >
-          <span
-            v-show="
-              music.getPlaySongLyric.hasLrcRoma &&
-              setting.showRoma &&
-              item.roma
-            "
-            :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
-            class="lyric-roma"
-          >
-            {{ item.roma }}</span
-          >
-        </div>
      </div>
    </template>
+    <!-- 逐字歌词 -->
    <template v-else>
      <div
+        class="yrc"
        v-for="(item, index) in music.getPlaySongLyric.yrc"
-        :class="music.getPlaySongLyricIndex == index ? 'yrc on' : 'yrc'"
+        :class="{
+          on: music.getPlaySongLyricIndex === index,
+          blur: setting.lyricsBlur,
+        }"
+        :style="{
+          marginBottom: setting.lyricsFontSize - 1.6 + 'vh',
+          transformOrigin:
+            setting.lyricsPosition === 'center' ? 'center' : null,
+          filter: setting.lyricsBlur
+            ? `blur(${getFilter(music.getPlaySongLyricIndex, index)}px)`
+            : 'none',
+          alignItems:
+            setting.lyricsPosition === 'center' ? 'center' : 'flex-start',
+        }"
        :key="item"
        :id="'yrc' + index"
        @click="lrcTextClick(item.time)"
      >
-        <div
-          :class="setting.lyricsBlur ? 'yrc-text blur' : 'yrc-text'"
-          :style="{
-            transformOrigin:
-              setting.lyricsPosition === 'center' ? 'center' : null,
-            filter: setting.lyricsBlur
-              ? `blur(${getFilter(music.getPlaySongLyricIndex, index)}px)`
-              : null,
-          }"
-        >
+        <div class="lyric" :style="{ fontSize: setting.lyricsFontSize + 'vh' }">
          <div
-            class="lyric"
-            :style="{ fontSize: setting.lyricsFontSize + 'vh' }"
-          >
-            <span
-              v-for="(v, i) in item.content"
-              :key="i"
-              :style="{
-                '--dur': `${Math.max(v.duration - 0.15, 0.1)}s`,
-              }"
-              :class="
+            class="text"
+            v-for="(v, i) in item.content"
+            :class="{
+              fill:
                music.getPlaySongLyricIndex === index &&
-                music.getPlaySongTime.currentTime + 0.15 > v.time
-                  ? 'text fill'
-                  : 'text'
-              "
-            >
-              {{ v.content }}
-            </span>
+                music.getPlaySongTime.currentTime + 0.2 >= v.time,
+              transform: setting.showYrcTransform,
+            }"
+            :key="i"
+            :style="{
+              '--dur': `${Math.max(v.duration - 0.2, 0.1)}s`,
+            }"
+          >
+            <span class="word" v-html="v.content.replace(/ /g, '&nbsp;')" />
+            <span
+              class="filler"
+              :class="{
+                long: i === item.content.length - 1 && v.duration > 1,
+                animation: setting.showYrcAnimation,
+                paused: !music.playState,
+              }"
+              v-html="v.content.replace(/ /g, '&nbsp;')"
+            />
          </div>
-          <span
-            v-show="
-              music.getPlaySongLyric.hasYrcTran &&
-              setting.showTransl &&
-              item.tran
-            "
-            :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
-            class="lyric-fy"
-          >
-            {{ item.tran }}
-          </span>
-          <span
-            v-show="
-              music.getPlaySongLyric.hasYrcRoma &&
-              setting.showRoma &&
-              item.roma
-            "
-            :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
-            class="lyric-roma"
-          >
-            {{ item.roma }}
-          </span>
        </div>
+        <span
+          v-if="
+            music.getPlaySongLyric.hasYrcTran && setting.showTransl && item.tran
+          "
+          :style="{ fontSize: setting.lyricsFontSize - 1 + 'vh' }"
+          class="lyric-fy"
+        >
+          {{ item.tran }}
+        </span>
+        <span
+          v-if="
+            music.getPlaySongLyric.hasYrcRoma && setting.showRoma && item.roma
+          "
+          :style="{ fontSize: setting.lyricsFontSize - 1.5 + 'vh' }"
+          class="lyric-roma"
+        >
+          {{ item.roma }}
+        </span>
      </div>
    </template>
-    <div class="placeholder"></div>
+    <div class="placeholder" />
  </div>
 </template>

@@ -167,19 +173,149 @@ const lrcTextClick = (time) => {

 <style lang="scss" scoped>
 .lrc-all {
-  margin-right: 20%;
+  display: flex;
+  flex-direction: column;
+  // margin-right: 20%;
  scrollbar-width: none;
-  // max-width: 460px;
  max-width: 52vh;
  overflow: auto;
+  padding: 0 10px;
+  .placeholder {
+    width: 100%;
+    &:nth-of-type(1) {
+      min-height: 50%;
+      display: flex;
+      align-items: flex-end;
+      padding: 0 0 0.8vh 3vh;
+    }
+    &:nth-last-of-type(1) {
+      min-height: 80%;
+    }
+  }
+  .lrc,
+  .yrc {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 1.8vh 4vh 1.8vh 3vh;
+    box-sizing: border-box;
+    border-radius: 8px;
+    opacity: 0.3;
+    transform: scale(0.9);
+    transform-origin: left bottom;
+    transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
+    cursor: pointer;
+    .lyric {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      font-weight: bold;
+      .text {
+        position: relative;
+        transition: transform 0.3s ease;
+        .filler {
+          transition: color 0.3s ease, opacity 0.3s ease;
+          position: absolute;
+          top: 0;
+          left: 0;
+          opacity: 0;
+          &.animation {
+            color: white;
+            background: linear-gradient(to right, white, white) no-repeat 0 0;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            -webkit-background-clip: text;
+            background-size: 0 100%;
+          }
+        }
+        &.fill {
+          &.transform {
+            transform: translateY(-1.5px);
+          }
+          .word {
+            opacity: 0.3;
+          }
+          .filler {
+            opacity: 1 !important;
+            &.long {
+              animation: shine calc var(--dur) ease-in-out;
+            }
+            &.animation {
+              background-size: 100% 100%;
+              animation: progress var(--dur) linear forwards;
+            }
+            &.paused {
+              animation-play-state: paused;
+              -webkit-animation-play-state: paused;
+            }
+          }
+        }
+      }
+    }
+    .lyric-fy,
+    .lyric-roma {
+      margin-top: 4px;
+      opacity: 0.6;
+    }
+    &.on {
+      opacity: 1;
+      transform: scale(1);
+      .lyric {
+        .text {
+          .word,
+          .filler {
+            opacity: 0.3;
+          }
+        }
+      }
+    }
+    &::before {
+      @media (min-width: 768px) {
+        content: "";
+        display: block;
+        position: absolute;
+        left: 0px;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        background-color: #ffffff20;
+        opacity: 0;
+        z-index: 0;
+        transform: scale(1.05);
+        transition: transform 0.3s ease, opacity 0.3s ease;
+        pointer-events: none;
+      }
+    }
+    &:hover {
+      opacity: 1;
+      &::before {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+    &:active {
+      &::before {
+        transform: scale(0.95);
+      }
+    }
+  }
  &::-webkit-scrollbar {
    display: none;
  }
+  &:hover {
+    .lrc,
+    .yrc {
+      &.blur {
+        filter: blur(0) !important;
+      }
+    }
+  }
  &.cover {
    height: 80vh;
  }
  &.record {
-    height: 60vh;
+    height: 70vh;
  }
  &.center {
    mask: linear-gradient(
@@ -222,108 +358,39 @@ const lrcTextClick = (time) => {
    );
    .placeholder {
      &:nth-of-type(1) {
-        height: 16%;
-      }
-    }
-  }
-  &:hover {
-    .lrc-text,
-    .yrc-text {
-      &.blur {
-        filter: blur(0) !important;
+        min-height: 16%;
      }
    }
  }
  @media (max-width: 768px) {
    height: 70vh;
    margin-right: 0;
+    padding: 0;
  }
-  .placeholder {
-    width: 100%;
-    &:nth-of-type(1) {
-      height: 50%;
-      display: flex;
-      align-items: flex-end;
-      padding: 0 0 0.8vh 3vh;
-    }
-    &:nth-last-of-type(1) {
-      height: 80%;
-    }
+}
+@keyframes progress {
+  0% {
+    background-size: 0 100%;
  }
-  .lrc,
-  .yrc {
-    opacity: 0.2;
-    transition: all 0.3s;
-    margin-bottom: 0.8vh;
-    padding: 1.8vh 4vh 1.8vh 3vh;
-    border-radius: 8px;
-    transition: all 0.3s;
-    transform-origin: left bottom;
-    cursor: pointer;
-    .lrc-text,
-    .yrc-text {
-      display: flex;
-      flex-direction: column;
-      transition: all 0.35s ease-in-out;
-      transform: scale(0.95);
-      transform-origin: left bottom;
-      .lyric {
-        font-weight: bold;
-        transition: all 0.3s;
-        .text {
-          transition: all var(--dur);
-          color: #ffffff66;
-          &.fill {
-            text-shadow: 0px 0px 30px #ffffff40;
-            background-image: linear-gradient(to right, #fff 0%, #fff 0%);
-            background-repeat: no-repeat;
-            background-size: 0% 100%;
-            background-clip: text;
-            -webkit-background-clip: text;
-            color: #ffffff66;
-            animation: toRight var(--dur) forwards linear;
-          }
-          @keyframes toRight {
-            to {
-              background-size: 100% 100%;
-            }
-          }
-        }
-      }
-      .lyric-fy,
-      .lyric-roma {
-        margin-top: 4px;
-        transition: all 0.3s;
-        opacity: 0.6;
-      }
-    }
-    &.on {
-      opacity: 1;
-      .lrc-text {
-        transform: scale(1.05);
-        .lyric {
-          text-shadow: 0px 0px 30px #ffffff40;
-        }
-      }
-      .yrc-text {
-        transform: scale(1.05);
-        .lyric {
-          font-weight: bold;
-        }
-      }
-    }
-    &:hover {
-      @media (min-width: 768px) {
-        background-color: #ffffff20;
-        opacity: 0.8;
-      }
-    }
-    &:active {
-      transform: scale(0.95);
-    }
+  100% {
+    background-size: 100% 100%;
  }
-  .yrc {
-    opacity: 0.6;
+}
+@keyframes shine {
+  0% {
+    text-shadow: 0 0 0.1em rgba(255, 255, 255, 0);
+  }
+  25% {
+    text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
+  }
+  50% {
+    text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.7);
+  }
+  75% {
+    text-shadow: 0 0 0.3em rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    text-shadow: 0 0 0.1em rgba(255, 255, 255, 0);
  }
 }
 </style>
--- a/src/components/Player/Spectrum.vue
+++ b/src/components/Player/Spectrum.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="spectrum">
+    <canvas class="avBars" ref="canvasRef" />
+  </div>
+</template>
+
+<script setup>
+import { musicStore } from "@/store";
+
+const music = musicStore();
+const canvasRef = ref(null);
+
+const drawSpectrum = (data) => {
+  canvasRef.value.width =
+    document.body.clientWidth >= 1600 ? 1600 : document.body.clientWidth;
+  canvasRef.value.height = 80;
+  const ctx = canvasRef.value.getContext("2d");
+  const barWidth = 2;
+  // 清除画布
+  ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
+  for (let i = 0; i < 360; i++) {
+    const barHeight = (data[i] / 255) * canvasRef.value.height;
+    const x = i * (barWidth * 2);
+    const y = canvasRef.value.height - barHeight;
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(x, y, barWidth, barHeight);
+  }
+};
+
+watch(
+  () => music.spectrumsData.data,
+  (val) => drawSpectrum(val)
+);
+</script>
+
+<style lang="scss" scoped>
+.spectrum {
+  position: absolute;
+}
+</style>
--- a/src/components/Player/index.vue
+++ b/src/components/Player/index.vue
@@ -1,220 +1,252 @@
 <template>
-  <n-card
-    :class="
-      music.getPlaylists[0] && music.showPlayBar ? 'player show' : 'player'
-    "
-    content-style="padding: 0"
-  >
-    <div class="slider">
-      <span>{{ music.getPlaySongTime.songTimePlayed }}</span>
-      <n-slider
-        v-model:value="music.getPlaySongTime.barMoveDistance"
-        class="progress"
-        :step="0.01"
-        :tooltip="false"
-        @update:value="songTimeSliderUpdate"
-        @click.stop
-      />
-      <span>{{ music.getPlaySongTime.songTimeDuration }}</span>
-    </div>
-    <div class="all">
-      <div class="data">
-        <div class="pic" @click.stop="music.setBigPlayerState(true)">
-          <img
-            :src="
-              music.getPlaySongData
-                ? music.getPlaySongData.album.picUrl.replace(
-                    /^http:/,
-                    'https:'
-                  ) + '?param=50y50'
-                : '/images/pic/default.png'
-            "
-            alt="pic"
-          />
-          <n-icon class="open" size="30" :component="KeyboardArrowUpFilled" />
-        </div>
-        <div class="name">
-          <div
-            class="song text-hidden"
-            @click.stop="router.push(`/song?id=${music.getPlaySongData.id}`)"
-          >
-            {{
-              music.getPlaySongData ? music.getPlaySongData.name : "暂无歌曲"
-            }}
+  <Transition name="show">
+    <n-card
+      v-show="music.getPlaylists[0] && music.showPlayBar"
+      class="player"
+      content-style="padding: 0"
+    >
+      <div class="slider">
+        <span>{{ music.getPlaySongTime.songTimePlayed }}</span>
+        <vue-slider
+          v-model="music.getPlaySongTime.barMoveDistance"
+          @drag-start="music.setPlayState(false)"
+          @drag-end="sliderDragEnd"
+          @click.stop="
+            songTimeSliderUpdate(music.getPlaySongTime.barMoveDistance)
+          "
+          :tooltip="'active'"
+          :use-keyboard="false"
+        >
+          <template v-slot:tooltip>
+            <div class="slider-tooltip">
+              {{
+                getSongPlayingTime(
+                  (music.getPlaySongTime.duration / 100) *
+                    music.getPlaySongTime.barMoveDistance
+                )
+              }}
+            </div>
+          </template>
+        </vue-slider>
+        <span>{{ music.getPlaySongTime.songTimeDuration }}</span>
+      </div>
+      <div class="all">
+        <div class="data">
+          <div class="pic" @click.stop="music.setBigPlayerState(true)">
+            <img
+              :src="
+                music.getPlaySongData
+                  ? music.getPlaySongData.album.picUrl.replace(
+                      /^http:/,
+                      'https:'
+                    ) + '?param=50y50'
+                  : '/images/pic/default.png'
+              "
+              alt="pic"
+            />
+            <n-icon class="open" size="30" :component="KeyboardArrowUpFilled" />
          </div>
-          <div class="artisrOrLrc" v-if="music.getPlaySongData">
-            <template v-if="setting.bottomLyricShow">
-              <Transition mode="out-in">
-                <AllArtists
-                  v-if="!music.getPlayState || !music.getPlaySongLyric.lrc[0]"
-                  class="text-hidden"
-                  :artistsData="music.getPlaySongData.artist"
-                />
-                <n-text
-                  v-else-if="
-                    setting.showYrc &&
-                    music.getPlaySongLyricIndex != -1 &&
-                    music.getPlaySongLyric.hasYrc
-                  "
-                  class="lrc text-hidden"
-                >
-                  <n-text
-                    v-for="item in music.getPlaySongLyric.yrc[
-                      music.getPlaySongLyricIndex
-                    ].content"
-                    :key="item"
-                    :depth="3"
-                  >
-                    {{ item.content }}
-                  </n-text>
-                </n-text>
-                <n-text
-                  v-else-if="
-                    music.getPlaySongLyricIndex != -1 &&
-                    music.getPlaySongLyric.lrc[0]
-                  "
-                  class="lrc text-hidden"
-                  :depth="3"
-                  v-html="
-                    music.getPlaySongLyric.lrc[music.getPlaySongLyricIndex]
-                      .content
-                  "
-                />
-                <AllArtists
-                  v-else
-                  class="text-hidden"
-                  :artistsData="music.getPlaySongData.artist"
-                />
+          <div class="name">
+            <div
+              class="song text-hidden"
+              @click.stop="router.push(`/song?id=${music.getPlaySongData.id}`)"
+            >
+              {{
+                music.getPlaySongData
+                  ? music.getPlaySongData.name
+                  : $t("other.noSong")
+              }}
+            </div>
+            <!-- 显示歌手或歌词 -->
+            <div class="artisrOrLrc" v-if="music.getPlaySongData">
+              <Transition name="fade" mode="out-in">
+                <template v-if="setting.bottomLyricShow">
+                  <Transition name="fade" mode="out-in">
+                    <AllArtists
+                      v-if="
+                        !music.getPlayState || !music.getPlaySongLyric.lrc[0]
+                      "
+                      class="text-hidden"
+                      :artistsData="music.getPlaySongData.artist"
+                    />
+                    <n-text
+                      v-else-if="
+                        setting.showYrc &&
+                        music.getPlaySongLyricIndex != -1 &&
+                        music.getPlaySongLyric.hasYrc
+                      "
+                      class="lrc text-hidden"
+                    >
+                      <n-text
+                        v-for="item in music.getPlaySongLyric.yrc[
+                          music.getPlaySongLyricIndex
+                        ].content"
+                        :key="item"
+                        :depth="3"
+                      >
+                        {{ item.content }}
+                      </n-text>
+                    </n-text>
+                    <n-text
+                      v-else-if="
+                        music.getPlaySongLyricIndex != -1 &&
+                        music.getPlaySongLyric.lrc[0]
+                      "
+                      class="lrc text-hidden"
+                      :depth="3"
+                      v-html="
+                        music.getPlaySongLyric.lrc[music.getPlaySongLyricIndex]
+                          .content
+                      "
+                    />
+                    <AllArtists
+                      v-else
+                      class="text-hidden"
+                      :artistsData="music.getPlaySongData.artist"
+                    />
+                  </Transition>
+                </template>
+                <template v-else>
+                  <AllArtists
+                    class="text-hidden"
+                    :artistsData="music.getPlaySongData.artist"
+                  />
+                </template>
              </Transition>
+            </div>
+          </div>
+        </div>
+        <div class="control">
+          <n-icon
+            v-if="!music.getPersonalFmMode"
+            class="prev"
+            size="30"
+            :component="SkipPreviousRound"
+            @click.stop="music.setPlaySongIndex('prev')"
+          />
+          <n-icon
+            v-else
+            class="dislike"
+            size="20"
+            :component="ThumbDownRound"
+            @click="music.setFmDislike(music.getPersonalFmData.id)"
+          />
+          <div class="play-state">
+            <n-icon
+              size="46"
+              :component="
+                music.getPlayState ? PauseCircleFilled : PlayCircleFilled
+              "
+              @click.stop="music.setPlayState(!music.getPlayState)"
+            />
+          </div>
+          <n-icon
+            class="next"
+            size="30"
+            :component="SkipNextRound"
+            @click.stop="music.setPlaySongIndex('next')"
+          />
+        </div>
+        <div :class="music.getPersonalFmMode ? 'menu fm' : 'menu'">
+          <n-popover v-if="music.getPlaySongData" trigger="hover" :keep-alive-on-hover="false">
+            <template #trigger>
+              <div class="like">
+                <n-icon
+                  class="like-icon"
+                  size="24"
+                  :component="
+                    music.getSongIsLike(music.getPlaySongData.id)
+                      ? FavoriteRound
+                      : FavoriteBorderRound
+                  "
+                  @click.stop="
+                    music.getSongIsLike(music.getPlaySongData.id)
+                      ? music.changeLikeList(music.getPlaySongData.id, false)
+                      : music.changeLikeList(music.getPlaySongData.id, true)
+                  "
+                />
+              </div>
            </template>
-            <template v-else>
-              <AllArtists
-                class="text-hidden"
-                :artistsData="music.getPlaySongData.artist"
+            {{
+              music.getSongIsLike(music.getPlaySongData.id)
+                ? $t("menu.cancelCollection")
+                : $t("menu.collection")
+            }}
+          </n-popover>
+          <n-popover trigger="hover" :keep-alive-on-hover="false">
+            <template #trigger>
+              <div class="add-playlist">
+                <n-icon
+                  class="add-icon"
+                  size="30"
+                  :component="PlaylistAddRound"
+                  @click.stop="
+                    addPlayListRef.openAddToPlaylist(music.getPlaySongData.id)
+                  "
+                />
+              </div>
+            </template>
+            {{ $t("menu.add") }}
+          </n-popover>
+          <n-dropdown
+            trigger="hover"
+            :options="patternOptions"
+            :show-arrow="true"
+            @select="patternClick"
+          >
+            <div class="pattern">
+              <n-icon
+                :component="
+                  persistData.playSongMode === 'normal'
+                    ? PlayCycle
+                    : persistData.playSongMode === 'random'
+                    ? ShuffleOne
+                    : PlayOnce
+                "
+                @click="music.setPlaySongMode()"
              />
+            </div>
+          </n-dropdown>
+          <n-popover trigger="hover" :keep-alive-on-hover="false">
+            <template #trigger>
+              <div :class="music.showPlayList ? 'playlist open' : 'playlist'">
+                <n-icon
+                  size="30"
+                  :component="PlaylistPlayRound"
+                  @click.stop="music.showPlayList = !music.showPlayList"
+                />
+              </div>
            </template>
+            {{ $t("general.name.playlists") }}
+          </n-popover>
+          <div class="volume">
+            <n-icon
+              size="28"
+              :component="
+                persistData.playVolume == 0
+                  ? VolumeOffRound
+                  : persistData.playVolume < 0.4
+                  ? VolumeMuteRound
+                  : persistData.playVolume < 0.7
+                  ? VolumeDownRound
+                  : VolumeUpRound
+              "
+              @click.stop="volumeMute"
+            />
+            <n-slider
+              class="volmePg"
+              v-model:value="persistData.playVolume"
+              :tooltip="false"
+              :min="0"
+              :max="1"
+              :step="0.01"
+              @click.stop
+            />
          </div>
        </div>
      </div>
-      <div class="control">
-        <n-icon
-          v-if="!music.getPersonalFmMode"
-          title="上一曲"
-          class="prev"
-          size="30"
-          :component="SkipPreviousRound"
-          @click.stop="music.setPlaySongIndex('prev')"
-        />
-        <n-icon
-          v-else
-          class="dislike"
-          size="20"
-          :component="ThumbDownRound"
-          @click="music.setFmDislike(music.getPersonalFmData.id)"
-        />
-        <div class="play-state">
-          <n-icon
-            size="46"
-            :title="music.getPlayState ? '暂停' : '播放'"
-            :component="
-              music.getPlayState ? PauseCircleFilled : PlayCircleFilled
-            "
-            @click.stop="music.setPlayState(!music.getPlayState)"
-          />
-        </div>
-        <n-icon
-          class="next"
-          size="30"
-          :component="SkipNextRound"
-          @click.stop="music.setPlaySongIndex('next')"
-        />
-      </div>
-      <div :class="music.getPersonalFmMode ? 'menu fm' : 'menu'">
-        <div class="like" v-if="music.getPlaySongData">
-          <n-icon
-            class="like-icon"
-            size="24"
-            :component="
-              music.getSongIsLike(music.getPlaySongData.id)
-                ? FavoriteRound
-                : FavoriteBorderRound
-            "
-            @click.stop="
-              music.getSongIsLike(music.getPlaySongData.id)
-                ? music.changeLikeList(music.getPlaySongData.id, false)
-                : music.changeLikeList(music.getPlaySongData.id, true)
-            "
-          />
-        </div>
-        <div class="add-playlist">
-          <n-icon
-            class="add-icon"
-            size="30"
-            :component="PlaylistAddRound"
-            @click.stop="
-              addPlayListRef.openAddToPlaylist(music.getPlaySongData.id)
-            "
-          />
-        </div>
-        <div class="pattern">
-          <n-icon
-            :component="
-              persistData.playSongMode === 'normal'
-                ? PlayCycle
-                : persistData.playSongMode === 'random'
-                ? ShuffleOne
-                : PlayOnce
-            "
-            @click="music.setPlaySongMode()"
-          />
-        </div>
-        <div :class="music.showPlayList ? 'playlist open' : 'playlist'">
-          <n-icon
-            size="30"
-            :component="PlaylistPlayRound"
-            @click.stop="music.showPlayList = !music.showPlayList"
-          />
-        </div>
-        <div class="volume">
-          <n-icon
-            size="28"
-            :component="
-              persistData.playVolume == 0
-                ? VolumeOffRound
-                : persistData.playVolume < 0.4
-                ? VolumeMuteRound
-                : persistData.playVolume < 0.7
-                ? VolumeDownRound
-                : VolumeUpRound
-            "
-            @click.stop="volumeMute"
-          />
-          <n-slider
-            class="volmePg"
-            v-model:value="persistData.playVolume"
-            :tooltip="false"
-            :min="0"
-            :max="1"
-            :step="0.01"
-            @click.stop
-          />
-        </div>
-      </div>
-    </div>
-    <!-- 全局播放器 -->
-    <audio
-      ref="player"
-      :autoplay="music.getPlayState"
-      @timeupdate="songUpdate"
-      @play="songPlay"
-      @pause="songPause"
-      @canplay="songCanplay"
-      @loadeddata="songReady"
-      @error="songError"
-      @ended="music.setPlaySongIndex('next')"
-      :src="music.getPlaySongLink"
-    ></audio>
-  </n-card>
+    </n-card>
+  </Transition>
  <!-- 播放列表 -->
  <PlayListDrawer ref="PlayListDrawerRef" />
  <!-- 添加到歌单 -->
@@ -229,12 +261,10 @@ import {
  getMusicUrl,
  getMusicNumUrl,
  getMusicNewLyric,
-  songScrobble,
 } from "@/api/song";
 import { NIcon } from "naive-ui";
 import {
  KeyboardArrowUpFilled,
-  MusicNoteFilled,
  PlayCircleFilled,
  PauseCircleFilled,
  SkipNextRound,
@@ -251,27 +281,34 @@ import {
 } from "@vicons/material";
 import { PlayCycle, PlayOnce, ShuffleOne } from "@icon-park/vue-next";
 import { storeToRefs } from "pinia";
-import { musicStore, settingStore, userStore, siteStore } from "@/store";
+import { musicStore, settingStore, siteStore } from "@/store";
+import {
+  createSound,
+  setVolume,
+  setSeek,
+  fadePlayOrPause,
+} from "@/utils/Player";
+import { getSongPlayingTime } from "@/utils/timeTools";
 import { useRouter } from "vue-router";
+import { debounce } from "throttle-debounce";
+import { useI18n } from "vue-i18n";
+import VueSlider from "vue-slider-component";
 import AddPlaylist from "@/components/DataModal/AddPlaylist.vue";
 import PlayListDrawer from "@/components/DataModal/PlayListDrawer.vue";
 import AllArtists from "@/components/DataList/AllArtists.vue";
 import ColorThief from "colorthief";
 import BigPlayer from "./BigPlayer.vue";
-import debounce from "@/utils/debounce";
+import "vue-slider-component/theme/default.css";

+const { t } = useI18n();
 const router = useRouter();
 const setting = settingStore();
 const music = musicStore();
-const user = userStore();
 const site = siteStore();
 const { persistData } = storeToRefs(music);
 const addPlayListRef = ref(null);
 const PlayListDrawerRef = ref(null);

-// 重试次数
-const testNumber = ref(0);
-
 // UNM 是否存在
 const useUnmServerHas = import.meta.env.VITE_UNM_API ? true : false;

@@ -298,16 +335,18 @@ const getPlaySongData = (data, level = setting.songLevel) => {
        if (res.success) {
          console.log("当前歌曲可用");
          if (!pc && (fee === 1 || fee === 4))
-            $message.info("当前歌曲为 VIP 专享，仅可试听");
+            $message.info(t("general.message.vipTip"));
          // 获取音乐地址
          getMusicUrl(id, level).then((res) => {
-            music.setPlaySongLink(res.data[0].url.replace(/^http:/, "https:"));
+            player.value = createSound(
+              res.data[0].url.replace(/^http:/, "https:")
+            );
          });
        } else {
          if (useUnmServerHas && setting.useUnmServer) {
            getMusicNumUrlData(id);
          } else {
-            $message.warning("当前歌曲播放失败，跳至下一首");
+            $message.warning(t("general.message.playError"));
            music.setPlaySongIndex("next");
          }
        }
@@ -318,195 +357,61 @@ const getPlaySongData = (data, level = setting.songLevel) => {
      music.setPlaySongLyric(res);
    });
  } catch (err) {
-    if (music.getPlaylists[0] && music.getPlayState && $player) {
+    if (music.getPlaylists[0] && music.getPlayState) {
      console.log("当前歌曲所有音源匹配失败：" + err);
-      $message.warning("当前歌曲所有音源匹配失败，跳至下一首");
+      $message.warning(t("general.message.playError"));
      music.setPlaySongIndex("next");
    }
  }
 };

+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { style: { transform: "translateX(1px)" } },
+      {
+        default: () => icon,
+      }
+    );
+  };
+};
+
 // 网易云解灰
 const getMusicNumUrlData = (id) => {
  getMusicNumUrl(id)
    .then((res) => {
      if (res.code === 200) {
-        console.log("替换成功：" + res.data.url.replace(/^http:/, ""));
-        music.setPlaySongLink(res.data.url.replace(/^http:/, ""));
+        const songUrl = res.data.url.replace(/^http:/, "");
+        // 匹配酷我域名
+        const pattern = /kuwo\.cn/i;
+        if (pattern.test(songUrl) && res.data?.proxyUrl) {
+          player.value = createSound(res.data.proxyUrl);
+          console.log("替换成功：" + res.data.proxyUrl);
+        } else {
+          player.value = createSound(songUrl);
+          console.log("替换成功：" + songUrl);
+        }
      }
    })
    .catch((err) => {
      console.log("解灰失败：" + err);
-      $message.warning("当前歌曲解灰失败，跳至下一首");
+      $message.warning(t("general.message.playError"));
      music.setPlaySongIndex("next");
    });
 };

-// 歌曲进度更新事件
-const songUpdate = (e) => {
-  const currentTime = e.target.currentTime;
-  const duration = e.target.duration;
-  music.setPlaySongTime({ currentTime, duration });
-};
-
-// 歌曲缓冲完成
-const songCanplay = () => {
-  console.log("缓冲完成", music.getPlayState);
-  if (music.getPlayState && $player) {
-    music.setPlayState(true);
-    songInOrOut("play");
-  }
-};
-
-// 歌曲首次缓冲
-const songReady = () => {
-  const songId = music.getPlaySongData?.id;
-  const sourceId = music.getPlaySongData?.sourceId
-    ? music.getPlaySongData.sourceId
-    : 0;
-  console.log("首次缓冲完成：" + songId + " / 来源：" + sourceId);
-  // 听歌打卡
-  if (user.userLogin) {
-    songScrobble(songId, sourceId).catch((err) => {
-      console.error("歌曲打卡失败：" + err);
-    });
-  }
-};
-
-// 歌曲开始播放
-const songPlay = () => {
-  testNumber.value = 0;
-  if (!Object.keys(music.getPlaySongData).length) {
-    $message.error("音乐数据获取失败");
-    return false;
-  }
-  music.setPlayState(true);
-  const songName = music.getPlaySongData.name;
-  const songArtist = music.getPlaySongData.artist[0].name;
-  $message.info(songName + " - " + songArtist, {
-    icon: () =>
-      h(NIcon, null, {
-        default: () => h(MusicNoteFilled),
-      }),
-  });
-  console.log("开始播放：" + songName + " - " + songArtist);
-  // mediaSession
-  if (
-    "mediaSession" in navigator &&
-    Object.keys(music.getPlaySongData).length
-  ) {
-    navigator.mediaSession.metadata = new MediaMetadata({
-      title: music.getPlaySongData.name,
-      artist: music.getPlaySongData.artist[0].name,
-      album: music.getPlaySongData.album.name,
-      artwork: [
-        {
-          src:
-            music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
-            "?param=96y96",
-          sizes: "96x96",
-        },
-        {
-          src:
-            music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
-            "?param=128y128",
-          sizes: "128x128",
-        },
-        {
-          src:
-            music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
-            "?param=512x512",
-          sizes: "512x512",
-        },
-      ],
-    });
-    navigator.mediaSession.setActionHandler("nexttrack", () => {
-      music.setPlaySongIndex("next");
-    });
-    navigator.mediaSession.setActionHandler("previoustrack", () => {
-      music.setPlaySongIndex("prev");
-    });
-  }
-  // 写入播放历史
-  music.setPlayHistory(music.getPlaySongData);
-  // 播放时页面标题
-  window.document.title =
-    music.getPlaySongData.name +
-    " - " +
-    music.getPlaySongData.artist[0].name +
-    " - SPlayer";
-};
-
-// 音乐渐入渐出
-const isFading = ref(false);
-const songInOrOut = (type) => {
-  if (isFading.value) {
-    return;
-  }
-  isFading.value = true;
-
-  if (type === "play") {
-    let volume = 0;
-    $player.play();
-    const interval = setInterval(() => {
-      // 如果音量已经到达当前音量，则停止渐入
-      if (volume >= persistData.value.playVolume) {
-        clearInterval(interval);
-        isFading.value = false;
-        return;
-      }
-      // 增加音量
-      volume += 0.1;
-      if (volume > persistData.value.playVolume) {
-        volume = persistData.value.playVolume;
-      }
-      $player.volume = volume;
-    }, 30);
-  } else if (type === "pause") {
-    let volume = persistData.value.playVolume;
-    const interval = setInterval(() => {
-      // 如果音量已经到达最小值，则停止渐出
-      if (volume <= 0) {
-        clearInterval(interval);
-        $player.pause();
-        isFading.value = false;
-        return;
-      }
-      // 减小音量
-      volume -= 0.1;
-      if (volume < 0) {
-        volume = 0;
-      }
-      $player.volume = volume;
-    }, 30);
-  }
-};
-
-// 歌曲暂停
-const songPause = () => {
-  console.log("音乐暂停");
-  if (!$player.ended) music.setPlayState(false);
-  // 更改页面标题
-  $setSiteTitle();
-};
-
 // 歌曲进度条更新
-const songTimeSliderUpdate = (val) => {
-  if ($player && music.getPlaySongTime && music.getPlaySongTime.duration)
-    $player.currentTime = (music.getPlaySongTime.duration / 100) * val;
+const sliderDragEnd = () => {
+  songTimeSliderUpdate(music.getPlaySongTime.barMoveDistance);
+  music.setPlayState(true);
 };
-
-// 歌曲播放失败事件
-const songError = () => {
-  console.error("歌曲播放失败");
-  $message.error("歌曲播放失败");
-  if (testNumber.value < 4) {
-    if (music.getPlaylists[0]) getPlaySongData(music.getPlaySongData);
-    testNumber.value++;
-  } else {
-    $message.error("歌曲重试次数过多，请刷新后重试");
+const songTimeSliderUpdate = (val) => {
+  if (player.value && music.getPlaySongTime?.duration) {
+    const currentTime = (music.getPlaySongTime.duration / 100) * val;
+    setSeek(player.value, currentTime);
  }
-  if (music.getPlayState) songInOrOut("play");
 };

 // 静音事件
@@ -519,8 +424,44 @@ const volumeMute = () => {
  }
 };

+// 播放模式数据
+const patternOptions = ref([
+  {
+    label: t("general.name.random"),
+    key: "random",
+    icon: renderIcon(h(ShuffleOne)),
+  },
+  {
+    label: t("general.name.single"),
+    key: "single",
+    icon: renderIcon(h(PlayOnce)),
+  },
+  {
+    label: t("general.name.normal"),
+    key: "normal",
+    icon: renderIcon(h(PlayCycle)),
+  },
+]);
+
+// 播放模式点击
+const patternClick = (val) => {
+  music.setPlaySongMode(val);
+};
+
+// 歌曲更换事件
+const songChange = debounce(500, (val) => {
+  if (val === undefined) {
+    window.document.title =
+      sessionStorage.getItem("siteTitle") ?? import.meta.env.VITE_SITE_TITLE;
+  }
+  // 加载数据
+  getPlaySongData(val);
+  getPicColor(val?.album.picUrl);
+});
+
 // 获取封面图主色
 const getPicColor = (url) => {
+  if (!url) return false;
  const imgUrl = url.replace(/^http:/, "https:") + "?param=50y50";
  const img = new Image();
  fetch(imgUrl)
@@ -541,29 +482,21 @@ const getPicColor = (url) => {
 };

 onMounted(() => {
+  // 挂载方法
+  window.$getPlaySongData = getPlaySongData;
  // 获取音乐数据
  if (music.getPlaylists[0] && music.getPlaySongData) {
    getPlaySongData(music.getPlaySongData);
    getPicColor(music.getPlaySongData.album.picUrl);
  }
-  // 挂载播放器
-  window.$player = player.value;
-  // 恢复上次播放进度
-  if (music.getPlaySongTime && music.getPlaySongTime.currentTime) {
-    $player.currentTime = music.getPlaySongTime.currentTime;
-  }
-  // 设置音量
-  if ($player) $player.volume = persistData.value.playVolume;
 });

 // 监听当前音乐数据变化
 watch(
  () => music.getPlaySongData,
  (val) => {
-    debounce(() => {
-      getPlaySongData(val);
-      getPicColor(val?.album.picUrl);
-    }, 500);
+    music.setPlaySongTime({ currentTime: 0, duration: 0 });
+    songChange(val);
  }
 );

@@ -571,7 +504,7 @@ watch(
 watch(
  () => persistData.value.playVolume,
  (val) => {
-    if ($player) $player.volume = val;
+    if (player.value) setVolume(player.value, val);
  }
 );

@@ -579,11 +512,13 @@ watch(
 watch(
  () => music.getPlayState,
  (val) => {
-    nextTick(() => {
-      if ($player) {
-        val ? songInOrOut("play") : songInOrOut("pause");
-      } else {
-        $message.error("播放器初始化失败，请重试");
+    nextTick().then(() => {
+      if (player.value && !music.isLoadingSong) {
+        fadePlayOrPause(
+          player.value,
+          val ? "play" : "pause",
+          persistData.value.playVolume
+        );
      }
    });
  }
@@ -591,16 +526,30 @@ watch(
 </script>

 <style lang="scss" scoped>
+.show-enter-active,
+.show-leave-active {
+  transform: translateY(0);
+  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+.show-enter-from,
+.show-leave-to {
+  transform: translateY(80px);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 .player {
  height: 70px;
  position: fixed;
-  bottom: -90px;
+  bottom: 0;
  left: 0;
-  transition: all 0.3s;
-  z-index: 2004;
-  &.show {
-    bottom: 0;
-  }
+  z-index: 2;
  .slider {
    position: absolute;
    top: -12px;
@@ -608,19 +557,15 @@ watch(
    width: 100%;
    display: flex;
    align-items: center;
+    justify-content: space-between;
    @media (max-width: 640px) {
-      top: -6px;
+      top: -8px;
      > {
        span {
          display: none;
        }
      }
    }
-
-    .progress {
-      --n-handle-size: 12px;
-      --n-rail-height: 3px;
-    }
    > {
      span {
        font-size: 12px;
@@ -632,6 +577,33 @@ watch(
        margin: 0 2px;
      }
    }
+    .vue-slider {
+      width: 100% !important;
+      height: 3px !important;
+      cursor: pointer;
+      .slider-tooltip {
+        font-size: 12px;
+        white-space: nowrap;
+        background-color: var(--n-color);
+        outline: 1px solid var(--n-border-color);
+        padding: 2px 8px;
+        border-radius: 25px;
+      }
+      :deep(.vue-slider-rail) {
+        background-color: var(--n-border-color);
+        border-radius: 25px;
+        .vue-slider-process {
+          background-color: var(--main-color);
+        }
+        .vue-slider-dot {
+          width: 12px !important;
+          height: 12px !important;
+        }
+        .vue-slider-dot-handle-focus {
+          box-shadow: 0px 0px 1px 2px var(--main-color);
+        }
+      }
+    }
  }

  .all {
@@ -697,15 +669,6 @@ watch(
        .artisrOrLrc {
          font-size: 12px;
          margin-top: 2px;
-          .v-enter-active,
-          .v-leave-active {
-            transition: opacity 0.3s ease;
-          }
-
-          .v-enter-from,
-          .v-leave-to {
-            opacity: 0;
-          }
        }
      }
    }
@@ -777,9 +740,11 @@ watch(
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
-        &:hover {
-          background-color: var(--main-color);
-          color: var(--n-color-embedded);
+        @media (min-width: 640px) {
+          &:hover {
+            background-color: var(--main-color);
+            color: var(--n-color-embedded);
+          }
        }
        &:active {
          transform: scale(0.95);
--- a/src/components/Provider/index.vue
+++ b/src/components/Provider/index.vue
@@ -21,7 +21,7 @@
    <n-loading-bar-provider>
      <n-dialog-provider>
        <n-notification-provider>
-          <n-message-provider>
+          <n-message-provider :max="1">
            <slot></slot>
            <NaiveProviderContent />
          </n-message-provider>
@@ -62,6 +62,13 @@ const changeTheme = () => {
  }
 };

+// 根据系统决定明暗切换
+const osThemeChange = (val) => {
+  if (setting.themeAuto) {
+    val == "dark" ? (setting.theme = "dark") : (setting.theme = "light");
+  }
+};
+
 // 配置主题色
 const changeThemeColor = (val) => {
  const color = themeColorData[val];
@@ -109,11 +116,7 @@ watch(
 watch(
  () => osThemeRef.value,
  (val) => {
-    if (setting.themeAuto) {
-      val == "dark"
-        ? setting.setSiteTheme("dark")
-        : setting.setSiteTheme("light");
-    }
+    osThemeChange(val);
  }
 );

@@ -126,5 +129,6 @@ watch(
 onMounted(() => {
  changeTheme();
  changeThemeColor(setting.themeType);
+  osThemeChange(osThemeRef.value);
 });
 </script>
--- a/src/components/SearchInp/index.vue
+++ b/src/components/SearchInp/index.vue
@@ -3,10 +3,10 @@
    <n-input
      :class="site.searchInputActive ? 'input focus' : 'input'"
      :input-props="{ autoComplete: false }"
+      :placeholder="$t('nav.search.placeholder')"
      ref="searchInpRef"
      round
      clearable
-      placeholder="搜索音乐/视频"
      v-model:value="inputValue"
      @focus="inputFocus"
      @keydown="inputkeydown($event)"
@@ -37,7 +37,7 @@
          >
            <div class="list-title">
              <n-icon size="16" :component="History" />
-              <n-text>搜索历史</n-text>
+              <n-text>{{ $t("nav.search.history") }}</n-text>
            </div>
            <n-space>
              <n-tag
@@ -53,7 +53,7 @@
              <n-icon size="16" :depth="3">
                <DeleteFour theme="filled" />
              </n-icon>
-              <n-text :depth="3">删除搜索历史</n-text>
+              <n-text :depth="3">{{ $t("nav.search.delHistory") }}</n-text>
            </div>
          </div>
          <div class="hot-list" v-if="searchData.hot[0]">
@@ -61,7 +61,7 @@
              <n-icon size="16">
                <Fire theme="filled" />
              </n-icon>
-              <n-text>热搜榜</n-text>
+              <n-text>{{ $t("nav.search.hotList") }}</n-text>
            </div>
            <div
              class="hot-item"
@@ -103,19 +103,19 @@
            v-if="Object.keys(searchData.suggest).length === 0"
          >
            <n-icon size="16" :component="Find" />
-            <span>暂无搜索结果</span>
+            <span>{{ $t("nav.search.noSuggestions") }}</span>
          </div>
          <div class="suggest-all" v-else>
            <div class="loading" v-show="!searchData.suggest.order">
              <n-icon size="16" :component="Find" />
-              <span>努力搜索中</span>
+              <span>{{ $t("nav.search.searchTip") }}</span>
            </div>
            <div class="suggest-item" v-if="searchData.suggest.songs">
              <div class="type">
                <n-icon size="18">
                  <MusicOne theme="filled" />
                </n-icon>
-                <span class="name">单曲</span>
+                <span class="name">{{ $t("nav.search.songs") }}</span>
              </div>
              <span
                class="names"
@@ -131,7 +131,7 @@
                <n-icon size="18">
                  <Voice theme="filled" />
                </n-icon>
-                <span class="name">歌手</span>
+                <span class="name">{{ $t("nav.search.artists") }}</span>
              </div>
              <span
                class="names"
@@ -146,7 +146,7 @@
                <n-icon size="18">
                  <RecordDisc theme="filled" />
                </n-icon>
-                <span class="name">专辑</span>
+                <span class="name">{{ $t("nav.search.albums") }}</span>
              </div>
              <span
                class="names"
@@ -162,7 +162,7 @@
                <n-icon size="18">
                  <Record theme="filled" />
                </n-icon>
-                <span class="name">歌单</span>
+                <span class="name">{{ $t("nav.search.playlists") }}</span>
              </div>
              <span
                class="names"
@@ -193,11 +193,13 @@ import {
  History,
  DeleteFour,
 } from "@icon-park/vue-next";
-import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
-import debounce from "@/utils/debounce";
+import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { musicStore, settingStore, siteStore } from "@/store";
+import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
+import debounce from "@/utils/debounce";

+const { t } = useI18n();
 const router = useRouter();
 const music = musicStore();
 const setting = settingStore();
@@ -293,13 +295,13 @@ const inputkeydown = (e) => {
 const delHistory = () => {
  $dialog.warning({
    class: "s-dialog",
-    title: "删除历史",
-    content: "确认删除全部的搜索历史记录？",
-    positiveText: "删除",
-    negativeText: "取消",
+    title: t("general.dialog.delete"),
+    content: t("nav.search.tip"),
+    positiveText: t("general.dialog.delete"),
+    negativeText: t("general.dialog.cancel"),
    onPositiveClick: () => {
      music.setSearchHistory(null, true);
-      $message.success("删除成功");
+      $message.success(t("general.message.deleteSuccess"));
    },
  });
 };
@@ -366,6 +368,12 @@ watch(
      @media (max-width: 450px) {
        width: 60vw;
      }
+      @media (max-width: 380px) {
+        width: 54vw;
+      }
+      @media (max-width: 320px) {
+        width: 50vw;
+      }
    }
    :deep(.n-input__prefix) {
      .n-icon {
@@ -396,10 +404,10 @@ watch(
        position: absolute;
        right: 0;
        top: 0;
-        content: "收起";
+        content: "×";
        padding: 4px 12px;
        font-size: 12px;
-        background-color: #efefef;
+        background-color: var(--n-action-color);
        border-radius: 0 0 0 14px;
      }
    }
@@ -414,7 +422,9 @@ watch(
        width: 4px;
      }
      .n-scrollbar-container {
-        padding-top: 8px;
+        @media (max-width: 450px) {
+          padding-top: 8px;
+        }
        .n-scrollbar-content {
          padding: 12px;
          .list-title {
--- a/src/locale/index.js
+++ b/src/locale/index.js
@@ -0,0 +1,24 @@
+import { createI18n } from "vue-i18n";
+import { settingStore } from "@/store";
+
+// 引入语言文件
+import en from "./lang/en.js";
+import zhCN from "./lang/zh-CN.js";
+
+// 注册 i8n 实例
+export const useI18n = (app) => {
+  const setting = settingStore();
+  const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: setting.language,
+    fallbackLocale: "zh-CN",
+    messages: {
+      en,
+      "zh-CN": zhCN,
+    },
+  });
+  app.config.globalProperties.$i18n = i18n;
+  app.use(i18n);
+  return i18n;
+};
--- a/src/locale/lang/en.js
+++ b/src/locale/lang/en.js
@@ -0,0 +1,370 @@
+export default {
+  // Navigation
+  nav: {
+    home: "Home",
+    discover: "Discover",
+    discoverChildren: {
+      playlists: "Playlists",
+      toplists: "Toplists",
+      artists: "Artists",
+    },
+    user: "Library",
+    userChildren: {
+      playlist: "My Playlists",
+      like: "Liked Playlists",
+      album: "Liked Albums",
+      artist: "Liked Artists",
+      cloud: "Music Cloud",
+      login: "Login",
+      results: "Music Library",
+    },
+    avatar: {
+      dark: "Dark Mode",
+      light: "Light Mode",
+      login: "Login",
+      logout: "Logout",
+      notLogin: "Not logged in",
+      notLoginSubtitle: "Log in for full functionality",
+      loginError: "Level information retrieval failed",
+      history: "Playback History",
+      setting: "Global Setting",
+      about: "About",
+      tip: "Confirm that you are logged out of the current user login ?",
+      success: "Log out successfully",
+    },
+    search: {
+      placeholder: "Search music/videos",
+      history: "Search History",
+      delHistory: "Delete Search History",
+      hotList: "Hot Searches",
+      searchTip: "Searching...",
+      noSuggestions: "No search results",
+      songs: "Songs",
+      artists: "Artists",
+      albums: "Albums",
+      playlists: "Playlists",
+      tip: "Confirm to delete all search history ?",
+      results: "search results",
+    },
+    officialList: "Official List",
+    globalList: "Global List",
+  },
+  // Home
+  home: {
+    title: {
+      exclusive: "Exclusive Recommend",
+      playlists: "Recommended Playlists",
+      artists: "Artist Recommend",
+      newAlbum: "New Albums",
+      more: "More",
+    },
+    modules: {
+      dailySongs: {
+        title: "Daily Recommend",
+        subtitle: "Updated at 6:00 am based on your music preference.",
+      },
+      radar: {
+        title: "Personal Radar",
+        subtitle: "Created for you based on your listening history.",
+      },
+      likeSong: {
+        title: "Liked Songs",
+        subtitle: "Discover your unique music taste.",
+      },
+      papersonalfm: {
+        title: "Personal FM",
+        subtitle: "Offline mode",
+      },
+    },
+  },
+  // Login
+  login: {
+    login: "Login {name}",
+    qr: "QR",
+    phone: "Captcha",
+    email: "Email",
+    canNotUse: "This login method is temporarily unavailable",
+    loggedIn: "Already logged in, please don't log in again",
+    qrText1: "Please open APP and scan the code to login",
+    qrText2: "The current QR code is invalid, please scan it again",
+    qrText3: "Scan successfully, please confirm login in the client",
+    qrText4: "Login successfully",
+    qrText5: "Login error, please try again",
+    qrText6: "Login QR code generation failed",
+  },
+  // Menu
+  menu: {
+    play: "Play now",
+    nextPlay: "Play next",
+    add: "Add to playlist",
+    create: "Create new playlist",
+    download: "Download",
+    comment: "Comment",
+    mv: "Watch MV",
+    delete: "Remove from cloud drive",
+    deleteQuestion:
+      "Confirm to delete song {name} from Cloud Drive? This action cannot be undone!",
+    match: "Song Information Match",
+    search: "Search for same name",
+    copy: "Copy {name} {other}",
+    update: "Edit Playlist",
+    del: "Delete Playlist",
+    delQuestion:
+      "Are you sure you want to delete the playlist {name}? This action cannot be undone!",
+    unableToDelete: "Default playlist cannot be deleted",
+    collection: "Add {name} to Collection",
+    cancelCollection: "Remove {name} from Collection",
+  },
+  // General
+  general: {
+    type: {
+      hot: "Hot",
+      all: "All",
+      china: "China",
+      chinaMale: "China Male",
+      chinaFemale: "China Female",
+      chinaGroup: "China Group",
+      western: "Western",
+      westernMale: "Western Male",
+      westernFemale: "Western Female",
+      westernGroup: "Western Group",
+      japan: "Japan",
+      japanMale: "Japan Male",
+      japanFemale: "Japan Female",
+      japanGroup: "Japan Group",
+      korea: "Korea",
+      koreaMale: "Korea Male",
+      koreaFemale: "Korea Female",
+      koreaGroup: "Korea Group",
+      other: "Other",
+      quality: {
+        l: "Standard quality",
+        m: "Higher quality",
+        h: "Very high quality",
+        sq: "Lossless",
+      },
+    },
+    name: {
+      song: "Song",
+      hotSong: "Top Songs",
+      playlist: "Playlist",
+      playlists: "Playlists",
+      videos: "Videos",
+      toplists: "Toplists",
+      artists: "Artists",
+      album: "Album",
+      link: "Link",
+      cloud: "Cloud",
+      songSize: "{size} songs",
+      albumSize: "{size} albums",
+      mvSize: "{size} MVs",
+      unknownSong: "Unknown Songs",
+      unknownArtist: "Unknown Artist",
+      itemCount: "Total {size} items",
+      goto: "Goto",
+      pageSizes: "{num} items/page",
+      desc: "{name} Introduction",
+      allDesc: "All Introduction",
+      allSong: "All Songs",
+      allPLaylist: "All Playlists",
+      artistDesc: "Singer Introduction",
+      play: "Play",
+      add: "Add",
+      comment: "Comment",
+      noKeywords: "Incomplete parameters",
+      goBack: "Back to previous page",
+      reload: "Reload",
+      allComments: "All Comments",
+      hotComments: "Hot Comments",
+      toCurrentlySong: "Go to currently playing song",
+      loadMore: "Load More",
+      playlistType: "Playlist Category",
+      bestPlaylist: "Best Playlist",
+      upCloud: "Cloud Upload",
+      cloudUsed: "Used {used}%, Remaining {remaining} G",
+      simiVideo: "Similar Videos",
+      restore: "Restore",
+      random: "Random play",
+      single: "Single loop",
+      normal: "list loop",
+    },
+    dialog: {
+      check: "Check",
+      cancel: "Cancel",
+      success: "Successfully",
+      failed: "Failed",
+      delete: "Confirm deletion",
+      match: "Match",
+      create: "Create",
+      download: "Downloading",
+      downloadingNow: "Downloading now",
+      editor: "Editor",
+      resetUp: "Re-Upload",
+    },
+    message: {
+      copySuccess: "Copied successfully",
+      copyFailure: "Copying failed",
+      addSuccess: "Add songs to playlist successfully",
+      addFailure: "Failed to add, please try again",
+      createSuccess: "Playlist creation success",
+      createFailed: "Playlist creation failed, please try again",
+      deleteSuccess: "Delete successfully",
+      deleteFailure: "Delete failed",
+      downloadSuccess: "{name} Download completed",
+      downloadFailure: "Download failed, please try another sound quality",
+      downloadError: "There was an error downloading, please try again",
+      upCloudSuccess: "{name} Upload successful",
+      upCloudFailure: "There was an error uploading the song",
+      upCloudError: "There was an error uploading the song, please try again",
+      upCloudNotHas: "Upload song details failed to get, try song match",
+      editorSuccess: "Edit successful",
+      editorFailed: "Edit failed, Please try again",
+      operationFailed: "Operation failed, please try again",
+      acquisitionFailed: "Failed to get",
+      notSupported: "Your browser does not support this operation",
+      jumpOut: "About to jump to off-site links",
+      needLogin: "Please login to your account to use",
+      needVip: "This operation requires a member account",
+      needCheck: "Please check your input",
+      isLoading: "Data loading",
+      vipTip:
+        "The current song is exclusive for VIP and can be listened to only",
+      playError: "Current song failed to play, skip to next song",
+      signInSuccess: "Sign In Success",
+      signInSuccessDesc: "Daily sign-in and Yunbei sign-in success",
+      signInFailed: "Failed to sign in",
+    },
+  },
+  // State
+  state: {
+    prohibition: "Prohibit access",
+    prohibitionDesc: "There are always doors that are closed to you",
+    notFound: "Resources do not exist",
+    notFoundDesc: "Why did you come here?",
+    error: "Server error",
+    errorDesc: "The server is broken, try again later",
+  },
+  // Other
+  other: {
+    sData: "Original song information",
+    asId: "Matching ID",
+    asIdDes: "Please enter the song ID to be matched",
+    noNeedMatch: "Consistent with original song ID, no correction required",
+    plaseCheck: "Please click to check first",
+    matchSuccess: "Song match successfully",
+    matchFailed: "Song match failed, please try again",
+    matchError: "Unusual song ID, can't match",
+    newPlaylistName: "Please enter a new playlist title",
+    setPrivacy: "Set as private playlist",
+    cloudTip:
+      "Currently for the cloud disk songs, downloaded files are the highest sound quality",
+    playlistEmpty: "There is no song, please go to the playlist to add",
+    plName: "Playlist Name",
+    plNameTip: "Please enter the playlist name",
+    plDes: "Playlist Description",
+    plDesTip: "Please enter the playlist description",
+    plTag: "Playlist Tags",
+    plTagTip: "Please enter the playlist tags",
+    lrcClicks: "Click on the selected lyrics to adjust the playback progress",
+    noSong: "No Song",
+    noHistory: "No play history",
+    justShow: "Show only the last {num} songs",
+    noDesc: "Too lazy, do not even write the introduction",
+    containing: "Song list containing this song",
+    loginExpired: "Login is disabled, please login again",
+    cleanAll: "Reset successful",
+  },
+  // Setting
+  setting: {
+    dev: "WIP",
+    main: "Basic",
+    player: "Player",
+    themeChange: "Theme color changed to {name}",
+    themeType: "Theme Color Selection",
+    themeTypeTip: "Change the site theme color, taking effect immediately",
+    themeTypeDialog: "Confirm to restore the full site theme color as default?",
+    language: "Language",
+    changeLanguage: "Language has been switched to {name}",
+    theme: "Light/Dark Mode",
+    themeAuto: "Follow System Light/Dark Mode",
+    autoSignIn: "Daily Check-in",
+    autoSignInTip: "Automatically perform daily check-in",
+    bannerShow: "Show Banner Image",
+    listClickMode: "List Click Mode",
+    listClickModeTip:
+      "This setting is ineffective on mobile, both click modes will be in effect",
+    dblclick: "Double-click to play",
+    click: "Single-click to play",
+    searchHistory: "Display Search History",
+    bottomLyricShow: "Display Bottom Lyrics",
+    bottomLyricShowTip:
+      "Whether to display lyrics at the bottom of the screen while playing",
+    songVolumeFade: "Song Volume Fade",
+    songVolumeFadeTip:
+      "Gradually fade in/out volume when stopping/starting playback",
+    memoryLastPlaybackPosition: "Remember Playback Position",
+    memoryLastPlaybackPositionTip:
+      "Resume last playback progress after refreshing the page",
+    songLevel: "Song Quality",
+    songLevelTip:
+      "Lossless quality and above require a Black Vinyl Club membership",
+    standard: "Standard",
+    higher: "Higher",
+    exhigh: "Extreme",
+    lossless: "Lossless",
+    hires: "Hi-Res",
+    jyeffect: "Whale Cloud Hi-Fi",
+    jymaster: "Whale Cloud Master",
+    useUnmServerShow: "Use UNM to play blocked songs",
+    useUnmServerShowTip1: "Whether to use UNM to replace blocked song links",
+    useUnmServerShowTip2:
+      "Please configure UNM-Server before using unblocking feature",
+    showLyricSetting: "Play Page Shortcut Settings",
+    showLyricSettingTip: "Show shortcut settings on the play page",
+    resetApp: "Reset the program",
+    resetAppTip:
+      "Try this if the program displays abnormally or if there is a problem",
+    resetAppWarning:
+      "Confirming reset to default? Your login status and custom settings will be lost!",
+    playerStyle: "Player Style",
+    playerStyleTip: "Style of the player's left-hand function area",
+    cover: "Cover Mode",
+    record: "Record Mode",
+    backgroundImageShow: "Play Background Style",
+    solid: "Solid Cover",
+    blur: "Blurry Cover",
+    backgroundImageShowTip1: "Display album cover in blurred mode",
+    backgroundImageShowTip2: "Extract album's main color as background color",
+    showTransl: "Show Lyric Translation",
+    showTranslTip: "Whether to display lyric translation when available",
+    showRoma: "Show Lyric Transliteration",
+    showRomaTip: "Whether to display lyric transliteration when available",
+    countDownShow: "Show Countdown Before Playing",
+    countDownShowTip: "Some songs may have incorrect countdown display",
+    showYrc: "Show Word-by-Word Lyrics",
+    showYrcTip: "Whether to display word-by-word lyrics when available",
+    showYrcAnimation: "Word by word lyric step animation",
+    showYrcAnimationTip:
+      "Whether to display verbatim lyrics step - by - step animation, more cost performance",
+    showYrcTransform: "Word for word lyrics come up",
+    showYrcTransformTip:
+      "Whether to display verbatim lyrics text floating animation",
+    lrcMousePause: "Intelligent Scroll Pause",
+    lrcMousePauseTip:
+      "Whether to pause scrolling when the mouse is over the lyrics area",
+    lyricsBlock: "Lyric Scrolling Position",
+    lyricsBlockTip: "The position where the lyrics are highlighted",
+    blockStart: "Near the Top",
+    blockCenter: "Horizontally Centered",
+    lyricsFontSize: "Lyric Text Size",
+    lyrics1: "Smallest",
+    lyrics2: "Default",
+    lyrics3: "Largest",
+    lyricsPosition: "Default Lyric Position",
+    positionLeft: "Left",
+    positionCenter: "Centered",
+    lyricsBlur: "Lyric Blur",
+    lyricsBlurTip:
+      "Blur lyrics other than the currently playing ones, experimental feature",
+  },
+};
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -0,0 +1,353 @@
+export default {
+  // 导航栏
+  nav: {
+    home: "首页",
+    discover: "发现",
+    discoverChildren: {
+      playlists: "歌单",
+      toplists: "排行榜",
+      artists: "歌手",
+    },
+    user: "音乐库",
+    userChildren: {
+      login: "登录账号",
+      playlist: "我的歌单",
+      like: "收藏的歌单",
+      album: "收藏的专辑",
+      artist: "收藏的歌手",
+      cloud: "音乐云盘",
+      results: "的音乐库",
+    },
+    avatar: {
+      dark: "深色模式",
+      light: "浅色模式",
+      login: "登录账号",
+      logout: "退出登录",
+      notLogin: "未登录",
+      notLoginSubtitle: "登录后享受完整功能",
+      loginError: "等级信息获取失败",
+      history: "播放历史",
+      setting: "全局设置",
+      about: "关于本站",
+      tip: "确认退出当前用户登录？",
+      success: "成功退出登录",
+    },
+    search: {
+      placeholder: "搜索音乐/视频",
+      history: "搜索历史",
+      delHistory: "删除搜索历史",
+      hotList: "热搜榜",
+      searchTip: "努力搜索中",
+      noSuggestions: "暂无搜索结果",
+      songs: "单曲",
+      artists: "歌手",
+      albums: "专辑",
+      playlists: "歌单",
+      tip: "确认删除全部的搜索历史记录？",
+      results: "的搜索结果",
+    },
+    officialList: "官方榜",
+    globalList: "全球榜",
+  },
+  // 首页
+  home: {
+    title: {
+      exclusive: "专属推荐",
+      playlists: "推荐歌单",
+      artists: "歌手推荐",
+      newAlbum: "新碟上架",
+      more: "更多",
+    },
+    modules: {
+      dailySongs: {
+        title: "每日推荐",
+        subtitle: "根据你的音乐口味 · 每日 6:00 更新",
+      },
+      radar: {
+        title: "私人雷达",
+        subtitle: "根据听歌记录为你打造",
+      },
+      likeSong: {
+        title: "喜欢的音乐",
+        subtitle: "发现你独特的音乐品味",
+      },
+      papersonalfm: {
+        title: "私人FM",
+        subtitle: "未登录模式",
+      },
+    },
+  },
+  // Login
+  login: {
+    login: "登录 {name}",
+    qr: "扫码登录",
+    phone: "验证码登录",
+    email: "邮箱登录",
+    canNotUse: "该登录方式暂时无法使用",
+    loggedIn: "已登录，请勿重复登录",
+    qrText1: "请打开云音乐 APP 扫码登录",
+    qrText2: "当前二维码已失效，请重新扫码",
+    qrText3: "扫描成功，请在客户端确认登录",
+    qrText4: "登录成功",
+    qrText5: "登录出错，请重试",
+    qrText6: "登录二维码生成失败",
+  },
+  // 菜单
+  menu: {
+    play: "立即播放",
+    nextPlay: "下一首播放",
+    add: "添加到歌单",
+    create: "新建歌单",
+    download: "歌曲下载",
+    comment: "前往评论区",
+    mv: "观看 MV",
+    delete: "从云盘中删除",
+    deleteQuestion: "确认从云盘中删除歌曲 {name} ？删除后将不可恢复！",
+    match: "歌曲信息匹配",
+    search: "同名搜索",
+    copy: "复制{name}{other}",
+    update: "编辑歌单",
+    del: "删除歌单",
+    delQuestion: "确认删除歌单 {name} ？删除后将不可恢复！",
+    unableToDelete: "默认歌单无法删除",
+    collection: "收藏{name}",
+    cancelCollection: "取消收藏{name}",
+  },
+  // 通用
+  general: {
+    type: {
+      hot: "热门",
+      all: "全部",
+      china: "华语",
+      chinaMale: "华语男",
+      chinaFemale: "华语女",
+      chinaGroup: "华语组合",
+      western: "欧美",
+      westernMale: "欧美男",
+      westernFemale: "欧美女",
+      westernGroup: "欧美组合",
+      japan: "日本",
+      japanMale: "日本男",
+      japanFemale: "日本女",
+      japanGroup: "日本组合",
+      korea: "韩国",
+      koreaMale: "韩国男",
+      koreaFemale: "韩国女",
+      koreaGroup: "韩国组合",
+      other: "其他",
+      quality: {
+        l: "标准音质",
+        m: "较高音质",
+        h: "极高音质",
+        sq: "无损音质",
+      },
+    },
+    name: {
+      song: "歌曲",
+      hotSong: "热门歌曲",
+      playlist: "歌单",
+      videos: "视频",
+      playlists: "播放列表",
+      toplists: "排行榜",
+      artists: "歌手",
+      album: "专辑",
+      link: "链接",
+      cloud: "云盘",
+      songSize: "{size} 首",
+      albumSize: "{size} 张专辑",
+      mvSize: "{size} 个 MV",
+      unknownSong: "未知歌曲",
+      unknownArtist: "未知歌手",
+      itemCount: "共{size}项",
+      goto: "前往",
+      pageSizes: "{num}条/页",
+      desc: "{name}简介",
+      allDesc: "全部简介",
+      allSong: "全部歌曲",
+      allPLaylist: "全部歌单",
+      artistDesc: "歌手介绍",
+      play: "播放",
+      add: "添加",
+      comment: "评论",
+      noKeywords: "参数不完整",
+      goBack: "返回上一级",
+      reload: "重新载入",
+      allComments: "全部评论",
+      hotComments: "热门评论",
+      toCurrentlySong: "前往当前播放歌曲",
+      loadMore: "加载更多",
+      playlistType: "歌单分类",
+      bestPlaylist: "精品歌单",
+      upCloud: "云盘上传",
+      cloudUsed: "已用 {used}%，剩余 {remaining} G",
+      simiVideo: "相似视频",
+      restore: "恢复默认",
+      random: "随机播放",
+      single: "单曲循环",
+      normal: "列表循环",
+    },
+    dialog: {
+      check: "检查",
+      cancel: "取消",
+      success: "成功",
+      failed: "失败",
+      delete: "确认删除",
+      match: "匹配歌曲",
+      create: "新建",
+      download: "下载",
+      downloadingNow: "正在下载",
+      editor: "编辑",
+      resetUp: "重新上传",
+    },
+    message: {
+      copySuccess: "复制成功",
+      copyFailure: "复制失败",
+      addSuccess: "添加歌曲至歌单成功",
+      addFailure: "添加失败，请重试",
+      createSuccess: "歌单新建成功",
+      createFailed: "歌单新建失败，请重试",
+      deleteSuccess: "删除成功",
+      deleteFailure: "删除失败",
+      downloadSuccess: "{name}下载完成",
+      downloadFailure: "下载失败，请尝试其他音质",
+      downloadError: "下载出现错误，请重试",
+      upCloudSuccess: "{name} 上传成功",
+      upCloudFailure: "歌曲上传出现错误",
+      upCloudError: "歌曲上传出错，请重试",
+      upCloudNotHas: "上传歌曲详细信息获取失败，可尝试歌曲匹配",
+      editorSuccess: "编辑成功",
+      editorFailed: "编辑失败，请重试",
+      operationFailed: "操作失败，请重试",
+      acquisitionFailed: "获取失败",
+      notSupported: "您的浏览器暂不支持该操作",
+      jumpOut: "即将跳转至站外链接",
+      needLogin: "请登录账号后使用",
+      needVip: "该操作需要账号为黑胶会员",
+      needCheck: "请检查您的输入",
+      isLoading: "数据加载中",
+      vipTip: "当前歌曲为 VIP 专享，仅可试听",
+      playError: "当前歌曲播放失败，跳至下一首",
+      signInSuccess: "签到成功",
+      signInSuccessDesc: "每日签到及云贝签到成功",
+      signInFailed: "签到失败",
+    },
+  },
+  // State
+  state: {
+    prohibition: "禁止访问",
+    prohibitionDesc: "总有些门是对你关闭的",
+    notFound: "资源不存在",
+    notFoundDesc: "怎么跑到这来了？",
+    error: "服务器错误",
+    errorDesc: "服务器寄了，等会再试吧",
+  },
+  // Other
+  other: {
+    sData: "原歌曲信息",
+    asId: "匹配的 ID",
+    asIdDes: "请输入要匹配的歌曲 ID",
+    noNeedMatch: "与原歌曲 ID 一致，无需匹配",
+    plaseCheck: "请先点击检查",
+    matchSuccess: "歌曲匹配成功",
+    matchFailed: "歌曲匹配失败，请重试",
+    matchError: "非正常歌曲 ID，无法匹配",
+    newPlaylistName: "请输入新歌单标题",
+    setPrivacy: "设置为隐私歌单",
+    cloudTip: "当前为云盘歌曲，下载的文件均为最高音质",
+    playlistEmpty: "暂无歌曲，请前往列表添加",
+    plName: "歌单名称",
+    plNameTip: "请输入歌单名称",
+    plDes: "歌单描述",
+    plDesTip: "请输入歌单描述",
+    plTag: "歌单标签",
+    plTagTip: "请输入歌单标签",
+    lrcClicks: "点击选中的歌词以调整播放进度",
+    noSong: "暂无歌曲",
+    noHistory: "暂无播放历史",
+    justShow: "仅显示最近 {num} 首",
+    noDesc: "太懒了吧，连简介都不写",
+    containing: "包含这首歌的歌单",
+    loginExpired: "登录已失效，请重新登录",
+    cleanAll: "重置成功",
+  },
+  setting: {
+    dev: "开发中功能",
+    main: "基础",
+    player: "播放器",
+    themeChange: "主题色更换为 {name}",
+    themeType: "主题色选择",
+    themeTypeTip: "更换全站主题色，即时生效",
+    themeTypeDialog: "确认恢复全站主题色为默认？",
+    language: "语言",
+    changeLanguage: "语言已切换为 {name}",
+    theme: "明暗模式",
+    themeAuto: "明暗模式跟随系统",
+    autoSignIn: "每日签到",
+    autoSignInTip: "是否自动进行每日签到",
+    bannerShow: "显示轮播图",
+    listClickMode: "列表点击方式",
+    listClickModeTip: "移动端该设置项无效，单击同时生效",
+    dblclick: "双击播放",
+    click: "单击播放",
+    searchHistory: "显示搜索历史",
+    bottomLyricShow: "显示底栏歌词",
+    bottomLyricShowTip: "是否在播放时显示歌词",
+    songVolumeFade: "歌曲渐入渐出",
+    songVolumeFadeTip: "是否在歌曲暂停 / 播放时渐入渐出",
+    memoryLastPlaybackPosition: "记忆播放位置",
+    memoryLastPlaybackPositionTip: "是否在刷新后恢复上次播放进度",
+    songLevel: "歌曲音质",
+    songLevelTip: "无损音质及以上需要您为黑胶会员",
+    standard: "标准",
+    higher: "较高",
+    exhigh: "极高",
+    lossless: "无损",
+    hires: "Hi-Res",
+    jyeffect: "鲸云臻音",
+    jymaster: "鲸云母带",
+    useUnmServerShow: "尝试替换无法播放的歌曲",
+    useUnmServerShowTip1: "是否使用 UNM 替换无法播放的歌曲链接",
+    useUnmServerShowTip2: "请配置 UNM-Server 后使用解灰功能",
+    showLyricSetting: "播放页快捷设置",
+    showLyricSettingTip: "是否在播放页面显示快捷设置",
+    resetApp: "程序重置",
+    resetAppTip: "若程序显示异常或出现问题时可尝试此操作",
+    resetAppWarning: "确认重置为默认状态？你的登录状态以及自定义设置都将丢失！",
+    playerStyle: "播放器样式",
+    playerStyleTip: "播放器左侧功能区样式",
+    cover: "封面模式",
+    record: "唱片模式",
+    backgroundImageShow: "播放背景样式",
+    solid: "封面主色",
+    blur: "封面模糊",
+    backgroundImageShowTip1: "将专辑封面模糊显示",
+    backgroundImageShowTip2: "提取专辑主色作为背景颜色",
+    showTransl: "显示歌词翻译",
+    showTranslTip: "是否在具有翻译歌词时显示",
+    showRoma: "显示歌词音译",
+    showRomaTip: "是否在具有音译歌词时显示",
+    countDownShow: "显示前奏等待",
+    countDownShowTip: "部分歌曲前奏可能存在显示错误",
+    showYrc: "显示逐字歌词",
+    showYrcTip: "是否在歌曲具有逐字歌词时显示",
+    showYrcAnimation: "逐字歌词步进动画",
+    showYrcAnimationTip: "是否显示逐字歌词步进动画，较耗费性能",
+    showYrcTransform: "逐字歌词上浮",
+    showYrcTransformTip: "是否显示逐字歌词文字上浮动画",
+    lrcMousePause: "智能暂停滚动",
+    lrcMousePauseTip: "鼠标移入歌词区域是否暂停滚动",
+    lyricsBlock: "歌词滚动位置",
+    lyricsBlockTip: "歌词高亮时所处的位置",
+    blockStart: "靠近顶部",
+    blockCenter: "水平居中",
+    lyricsFontSize: "歌词文本大小",
+    lyrics1: "最小",
+    lyrics2: "默认",
+    lyrics3: "最大",
+    lyricsPosition: "默认歌词位置",
+    positionLeft: "居左",
+    positionCenter: "居中",
+    lyricsBlur: "歌词模糊",
+    lyricsBlurTip: "除当前播放歌词外模糊显示，实验性功能",
+  },
+};
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import { useI18n } from "@/locale";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

-import App from "./App.vue";
-import router from "./router";
+import App from "@/App.vue";
+import router from "@/router";

 // 全局样式
 import "@/style/global.scss";
@@ -12,27 +13,34 @@ const app = createApp(App);

 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
-app.use(pinia);

+app.use(pinia);
 app.use(router);

+// 国际化
+useI18n(app);
+
 app.mount("#app");

-// 检测到更新提醒
-let pwaMessage = null;
-navigator.serviceWorker.addEventListener("onupdatefound", () => {
-  console.info("发现站点更新，正在下载新版本");
-  pwaMessage = $message.loading("发现站点更新，正在下载新版本", {
-    closable: true,
-    duration: 0,
+if ("serviceWorker" in navigator) {
+  let pwaMessage = null;
+
+  // 检测到更新提醒
+  navigator.serviceWorker.addEventListener("onupdatefound", () => {
+    console.info("发现站点更新，正在下载新版本");
+    pwaMessage = $message.loading("发现站点更新，正在下载新版本", {
+      closable: true,
+      duration: 0,
+    });
  });
-});
-// 更新完成提醒
-navigator.serviceWorker.addEventListener("controllerchange", () => {
-  console.info("站点已更新，刷新后生效");
-  if (pwaMessage) pwaMessage?.destroy();
-  $message.info("站点已更新，刷新后生效", {
-    closable: true,
-    duration: 0,
+
+  // 更新完成提醒
+  navigator.serviceWorker.addEventListener("controllerchange", () => {
+    console.info("站点已更新，刷新后生效");
+    if (pwaMessage) pwaMessage?.destroy();
+    $message.info("站点已更新，刷新后生效", {
+      closable: true,
+      duration: 0,
+    });
  });
-});
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,7 +11,7 @@ const router = createRouter({
 // 路由守卫
 router.beforeEach((to, from, next) => {
  const user = userStore();
-  $loadingBar.start();
+  if (typeof $loadingBar !== "undefined") $loadingBar.start();
  // 判断是否需要登录
  if (to.meta.needLogin) {
    getLoginState()
@@ -45,7 +45,7 @@ router.beforeEach((to, from, next) => {
 });

 router.afterEach(() => {
-  $loadingBar.finish();
+  if (typeof $loadingBar !== "undefined") $loadingBar.finish();
 });

 export default router;
--- a/src/store/musicData.js
+++ b/src/store/musicData.js
@@ -1,12 +1,15 @@
 import { defineStore } from "pinia";
-import { getSongTime, getSongPlayingTime } from "@/utils/timeTools.js";
+import { nextTick } from "vue";
+import { getSongTime, getSongPlayingTime } from "@/utils/timeTools";
 import { getPersonalFm, setFmTrash } from "@/api/home";
 import { getLikelist, setLikeSong } from "@/api/user";
 import { getPlayListCatlist } from "@/api/playlist";
 import { userStore, settingStore } from "@/store";
 import { NIcon } from "naive-ui";
 import { PlayCycle, PlayOnce, ShuffleOne } from "@icon-park/vue-next";
+import { soundStop, fadePlayOrPause } from "@/utils/Player";
 import parseLyric from "@/utils/parseLyric";
+import getLanguageData from "@/utils/getLanguageData";

 const useMusicDataStore = defineStore("musicData", {
  state: () => {
@@ -20,7 +23,7 @@ const useMusicDataStore = defineStore("musicData", {
      // 播放状态
      playState: false,
      // 当前歌曲播放链接
-      playSongLink: null,
+      // playSongLink: null,
      // 当前歌曲歌词数据
      playSongLyric: {
        lrc: [],
@@ -37,6 +40,15 @@ const useMusicDataStore = defineStore("musicData", {
      catList: {},
      // 精品歌单分类
      highqualityCatList: [],
+      // 音乐频谱数据
+      spectrumsData: {
+        data: [],
+        audio: null,
+        analyser: null,
+        audioCtx: null,
+      },
+      // 是否正在加载数据
+      isLoadingSong: false,
      // 持久化数据
      persistData: {
        // 搜索历史
@@ -116,10 +128,6 @@ const useMusicDataStore = defineStore("musicData", {
    getPlayState(state) {
      return state.playState;
    },
-    // 获取播放链接
-    getPlaySongLink(state) {
-      return state.playSongLink;
-    },
    // 获取喜欢音乐列表
    getLikeList(state) {
      return state.persistData.likeList;
@@ -142,8 +150,8 @@ const useMusicDataStore = defineStore("musicData", {
    setPersonalFmMode(value) {
      this.persistData.personalFmMode = value;
      if (value) {
-        this.playSongLink = null;
-        if (this.persistData.personalFmData.id) {
+        if (typeof $player !== "undefined") soundStop($player);
+        if (this.persistData.personalFmData?.id) {
          this.persistData.playlists = [];
          this.persistData.playlists.push(this.persistData.personalFmData);
          this.persistData.playSongIndex = 0;
@@ -175,7 +183,7 @@ const useMusicDataStore = defineStore("musicData", {
            } else {
              this.persistData.personalFmData = fmData;
              if (this.persistData.personalFmMode) {
-                this.playSongLink = null;
+                if (typeof $player !== "undefined") soundStop($player);
                this.persistData.playlists = [];
                this.persistData.playlists.push(fmData);
                this.persistData.playSongIndex = 0;
@@ -183,29 +191,28 @@ const useMusicDataStore = defineStore("musicData", {
              }
            }
          } else {
-            $message.error("获取私人 FM 失败");
+            $message.error(getLanguageData("personalFmError"));
          }
        });
      } catch (err) {
-        console.error("获取私人 FM 失败：" + err);
-        $message.error("获取私人 FM 失败");
+        console.error(getLanguageData("personalFmError"), err);
+        $message.error(getLanguageData("personalFmError"));
      }
    },
    // 私人fm垃圾桶
-    setFmDislike(id, tip = true) {
+    setFmDislike(id) {
      const user = userStore();
      if (user.userLogin) {
        setFmTrash(id).then((res) => {
          if (res.code == 200) {
-            if (tip) $message.success("已将该歌曲移除至垃圾桶");
            this.persistData.personalFmMode = true;
            this.setPlaySongIndex("next");
          } else {
-            $message.error("歌曲移除至垃圾桶失败");
+            $message.error(getLanguageData("fmTrashError"));
          }
        });
      } else {
-        $message.error("请登录账号后使用");
+        $message.error(getLanguageData("needLogin"));
      }
    },
    // 更改喜欢列表
@@ -222,40 +229,36 @@ const useMusicDataStore = defineStore("musicData", {
      return this.persistData.likeList.includes(id);
    },
    // 移入移除喜欢列表
-    changeLikeList(id, like = true) {
+    async changeLikeList(id, like = true) {
      const user = userStore();
      const list = this.persistData.likeList;
      const exists = list.includes(id);
-      if (user.userLogin) {
-        if (like) {
-          if (!exists) {
-            setLikeSong(id, like).then((res) => {
-              if (res.code == 200) {
-                list.push(id);
-                $message.info("已添加到我喜欢的音乐");
-              } else {
-                $message.error("喜欢音乐时发生错误");
-              }
-            });
-          } else {
-            $message.info("我喜欢的音乐中已存在该歌曲");
+      if (!user.userLogin) {
+        $message.error(getLanguageData("needLogin"));
+        return;
+      }
+      try {
+        const res = await setLikeSong(id, like);
+        if (res.code === 200) {
+          if (like && !exists) {
+            list.push(id);
+            $message.info(getLanguageData("loveSong"));
+          } else if (!like && exists) {
+            list.splice(list.indexOf(id), 1);
+            $message.info(getLanguageData("loveSongRemove"));
+          } else if (like && exists) {
+            $message.info(getLanguageData("loveSongRepeat"));
          }
        } else {
-          if (exists) {
-            setLikeSong(id, like).then((res) => {
-              if (res.code == 200) {
-                list.splice(list.indexOf(id), 1);
-                $message.info("已从我喜欢的音乐中移除");
-              } else {
-                $message.error("取消喜欢音乐时发生错误");
-              }
-            });
+          if (like) {
+            $message.error(getLanguageData("loveSongError"));
          } else {
-            $message.error("我喜欢的列表中未找到该歌曲");
+            $message.error(getLanguageData("loveSongRemoveError"));
          }
        }
-      } else {
-        $message.error("请登录账号后使用");
+      } catch (error) {
+        console.error(getLanguageData("loveSongError"), error);
+        $message.error(getLanguageData("loveSongError"));
      }
    },
    // 更改音乐播放状态
@@ -270,10 +273,6 @@ const useMusicDataStore = defineStore("musicData", {
    setPlayBarState(value) {
      this.showPlayBar = value;
    },
-    // 更改歌曲播放链接
-    setPlaySongLink(value) {
-      this.playSongLink = value;
-    },
    // 更改播放列表模式
    setPlayListMode(value) {
      this.persistData.playListMode = value;
@@ -281,7 +280,6 @@ const useMusicDataStore = defineStore("musicData", {
    // 添加歌单至播放列表
    setPlaylists(value) {
      this.persistData.playlists = value.slice();
-      console.log(`已添加${value.length}首歌曲至播放列表`);
    },
    // 更改每日推荐数据
    setDailySongs(value) {
@@ -300,8 +298,6 @@ const useMusicDataStore = defineStore("musicData", {
            mv: v.mv ? v.mv : null,
          });
        });
-      } else {
-        $message.error("处理每日推荐发生错误");
      }
    },
    // 歌词处理
@@ -310,8 +306,8 @@ const useMusicDataStore = defineStore("musicData", {
        try {
          this.playSongLyric = parseLyric(value);
        } catch (err) {
-          $message.error("歌词处理出错");
-          console.error("歌词处理出错：" + err);
+          $message.error(getLanguageData("getLrcError"));
+          console.error(getLanguageData("getLrcError"), err);
        }
      } else {
        console.log("该歌曲暂无歌词");
@@ -323,9 +319,13 @@ const useMusicDataStore = defineStore("musicData", {
      this.persistData.playSongTime.currentTime = value.currentTime;
      this.persistData.playSongTime.duration = value.duration;
      // 计算进度条应该移动的距离
-      this.persistData.playSongTime.barMoveDistance = Number(
-        (value.currentTime / (value.duration / 100)).toFixed(2)
-      );
+      if (value.duration === 0) {
+        this.persistData.playSongTime.barMoveDistance = 0;
+      } else {
+        this.persistData.playSongTime.barMoveDistance = Number(
+          (value.currentTime / (value.duration / 100)).toFixed(2)
+        );
+      }
      if (this.persistData.playSongTime.barMoveDistance) {
        // 歌曲播放进度转换
        this.persistData.playSongTime.songTimePlayed = getSongPlayingTime(
@@ -343,27 +343,42 @@ const useMusicDataStore = defineStore("musicData", {
      this.playSongLyricIndex = index === -1 ? lyrics.length - 1 : index - 1;
    },
    // 设置当前播放模式
-    setPlaySongMode() {
-      if (this.persistData.playSongMode === "normal") {
-        this.persistData.playSongMode = "random";
-        $message.info("随机播放", {
-          icon: () => h(NIcon, null, { default: () => h(ShuffleOne) }),
-        });
-      } else if (this.persistData.playSongMode === "random") {
-        this.persistData.playSongMode = "single";
-        $message.info("单曲循环", {
-          icon: () => h(NIcon, null, { default: () => h(PlayOnce) }),
-        });
+    setPlaySongMode(value = null) {
+      const modeObj = {
+        normal: PlayCycle,
+        random: ShuffleOne,
+        single: PlayOnce,
+      };
+      if (value && value in modeObj) {
+        this.persistData.playSongMode = value;
      } else {
-        this.persistData.playSongMode = "normal";
-        $message.info("列表循环", {
-          icon: () => h(NIcon, null, { default: () => h(PlayCycle) }),
-        });
+        switch (this.persistData.playSongMode) {
+          case "normal":
+            this.persistData.playSongMode = "random";
+            value = "random";
+            break;
+          case "random":
+            this.persistData.playSongMode = "single";
+            value = "single";
+            break;
+          default:
+            this.persistData.playSongMode = "normal";
+            value = "normal";
+            break;
+        }
      }
+      $message.info(getLanguageData(value), {
+        icon: () =>
+          h(NIcon, null, {
+            default: () => h(modeObj[this.persistData.playSongMode]),
+          }),
+      });
    },
    // 上下曲调整
    setPlaySongIndex(type) {
-      this.playState = false;
+      if (typeof $player === "undefined") return false;
+      soundStop($player);
+      this.isLoadingSong = true;
      if (this.persistData.personalFmMode) {
        this.setPersonalFmData();
      } else {
@@ -376,22 +391,26 @@ const useMusicDataStore = defineStore("musicData", {
          this.persistData.playSongIndex = Math.floor(
            Math.random() * listLength
          );
-        } else if (listMode === "single" && $player) {
-          $player.currentTime = 0;
+        } else if (listMode === "single" && typeof $player !== "undefined") {
+          soundStop($player);
+          fadePlayOrPause($player, "play", this.persistData.playVolume);
        } else {
-          $message.error("播放出错，请刷新后重试");
+          $message.error(getLanguageData("playError"));
        }
        // 判断是否处于最后/第一首
        if (this.persistData.playSongIndex < 0) {
          this.persistData.playSongIndex = listLength - 1;
        } else if (this.persistData.playSongIndex >= listLength) {
          this.persistData.playSongIndex = 0;
-          $player.currentTime = 0;
+          soundStop($player);
+          fadePlayOrPause($player, "play", this.persistData.playVolume);
        }
        if (listMode !== "single" && listLength > 1) {
-          this.playSongLink = null;
+          soundStop($player);
        }
-        this.playState = true;
+        nextTick().then(() => {
+          this.setPlayState(true);
+        });
      }
    },
    // 添加歌曲至播放列表
@@ -405,11 +424,12 @@ const useMusicDataStore = defineStore("musicData", {
          value.id !==
          this.persistData.playlists[this.persistData.playSongIndex]?.id
        ) {
-          console.log("播放歌曲与上一次不一致");
-          this.playSongLink = null;
+          console.log("Play a song that is not the same as the last one");
+          if (typeof $player !== "undefined") soundStop($player);
+          this.isLoadingSong = true;
        }
      } catch (error) {
-        console.error("出现错误：" + error);
+        console.error("Error:" + error);
      }
      if (index !== -1) {
        this.persistData.playSongIndex = index;
@@ -417,10 +437,13 @@ const useMusicDataStore = defineStore("musicData", {
        this.persistData.playlists.push(value);
        this.persistData.playSongIndex = this.persistData.playlists.length - 1;
      }
-      play ? (this.playState = true) : null;
+      play ? this.setPlayState(true) : null;
    },
    // 在当前播放歌曲后添加
    addSongToNext(value) {
+      // 更改播放模式为列表循环
+      this.persistData.playSongMode = "normal";
+      // 查找是否存在于播放列表
      const index = this.persistData.playlists.findIndex(
        (o) => o.id === value.id
      );
@@ -442,23 +465,24 @@ const useMusicDataStore = defineStore("musicData", {
          value
        );
      }
-      $message.success(value.name + " 已添加至下一曲播放");
+      $message.success(value.name + " " + getLanguageData("addSongToNext"));
    },
    // 播放列表移除歌曲
    removeSong(index) {
+      if (typeof $player === "undefined") return false;
      const name = this.persistData.playlists[index].name;
      if (index < this.persistData.playSongIndex) {
        this.persistData.playSongIndex--;
      } else if (index === this.persistData.playSongIndex) {
-        // 如果删除的是当前播放歌曲，则将播放链接置为null
-        this.playSongLink = null;
+        // 如果删除的是当前播放歌曲，则重置播放器
+        soundStop($player);
      }
-      $message.success(name + " 已从播放列表中移除");
+      $message.success(name + " " + getLanguageData("removeSong"));
      this.persistData.playlists.splice(index, 1);
      // 检查当前播放歌曲的索引是否超出了列表范围
      if (this.persistData.playSongIndex >= this.persistData.playlists.length) {
        this.persistData.playSongIndex = 0;
-        this.playSongLink = null;
+        soundStop($player);
      }
    },
    // 获取歌单分类
@@ -467,7 +491,7 @@ const useMusicDataStore = defineStore("musicData", {
        if (res.code == 200) {
          this.catList = res;
        } else {
-          $message.error("歌单分类获取失败");
+          $message.error(getLanguageData("getDataError"));
        }
      });
      if (highquality) {
@@ -475,7 +499,7 @@ const useMusicDataStore = defineStore("musicData", {
          if (res.code == 200) {
            this.highqualityCatList = res.tags;
          } else {
-            $message.error("精品歌单分类获取失败");
+            $message.error(getLanguageData("getDataError"));
          }
        });
      }
--- a/src/store/settingData.js
+++ b/src/store/settingData.js
@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import { NIcon } from "naive-ui";
 import { WbSunnyFilled, DarkModeFilled } from "@vicons/material";
+import getLanguageData from "@/utils/getLanguageData";

 const useSettingDataStore = defineStore("settingData", {
  state: () => {
@@ -24,6 +25,10 @@ const useSettingDataStore = defineStore("settingData", {
      bottomLyricShow: true,
      // 是否显示逐字歌词
      showYrc: true,
+      // 是否显示逐字歌词动画
+      showYrcAnimation: true,
+      // 是否显示逐字歌词上浮
+      showYrcTransform: false,
      // 是否显示歌词翻译
      showTransl: true,
      // 是否显示歌词音译
@@ -41,13 +46,23 @@ const useSettingDataStore = defineStore("settingData", {
      // 音乐频谱
      musicFrequency: false,
      // 鼠标移入歌词区域暂停滚动
-      lrcMousePause: true,
+      lrcMousePause: false,
      // 是否使用网易云解灰
      useUnmServer: true,
      // 播放背景是否显示图片
      backgroundImageShow: "blur",
      // 是否显示前奏等待
      countDownShow: true,
+      // 是否显示歌词设置
+      showLyricSetting: false,
+      // 歌曲渐入渐出
+      songVolumeFade: true,
+      // 列表默认数量
+      listNumber: 30,
+      // 记忆上次播放位置
+      memoryLastPlaybackPosition: true,
+      // 语言
+      language: "zh-CN",
    };
  },
  getters: {
@@ -60,7 +75,9 @@ const useSettingDataStore = defineStore("settingData", {
    // 切换明暗模式
    setSiteTheme(value) {
      const isLightMode = value === "light";
-      const message = isLightMode ? "已切换至浅色模式" : "已切换至深色模式";
+      const message = isLightMode
+        ? getLanguageData("lightMode")
+        : getLanguageData("darkMode");
      const icon = isLightMode ? WbSunnyFilled : DarkModeFilled;
      this.theme = value;
      $message.info(message, {
--- a/src/store/siteData.js
+++ b/src/store/siteData.js
@@ -4,7 +4,7 @@ const useSiteDataStore = defineStore("siteData", {
  state: () => {
    return {
      // 站点标题
-      siteTitle: "SPlayer",
+      siteTitle: import.meta.env.VITE_SITE_TITLE,
      // 封面主题色
      songPicColor: "rgb(128,128,128)",
      // 搜索框激活状态
--- a/src/store/userData.js
+++ b/src/store/userData.js
@@ -7,7 +7,8 @@ import {
  getUserArtistlist,
  getUserAlbum,
 } from "@/api/user";
-import { formatNumber, getLongTime } from "@/utils/timeTools.js";
+import { formatNumber, getLongTime } from "@/utils/timeTools";
+import getLanguageData from "@/utils/getLanguageData";

 const useUserDataStore = defineStore("userData", {
  state: () => {
@@ -86,11 +87,11 @@ const useUserDataStore = defineStore("userData", {
            console.log(res);
            this.userOtherData.level = res[0].data;
            this.userOtherData.subcount = res[1];
-            this.setUserPlayLists();
+            // this.setUserPlayLists();
          })
          .catch((err) => {
-            console.error("获取用户详情失败：" + err);
-            $message.error("获取用户详情失败，请刷新后重试");
+            console.error(getLanguageData("getDataError"), err);
+            $message.error(getLanguageData("getDataError"));
          });
      }
    },
@@ -105,59 +106,61 @@ const useUserDataStore = defineStore("userData", {
      userLogOut();
    },
    // 更改用户歌单
-    async setUserPlayLists() {
+    async setUserPlayLists(callback) {
      if (this.userLogin) {
        try {
-          if (!Object.keys(this.userOtherData).length) {
-            this.setUserOtherData();
-          } else {
-            this.userPlayLists.isLoading = true;
-            const { userId } = this.userData;
-            const { subcount } = this.userOtherData;
-            const number =
-              subcount.createdPlaylistCount + subcount.subPlaylistCount;
-            const res = await getUserPlaylist(userId, number);
-            if (res.playlist) {
-              this.userPlayLists = {
-                has: true,
-                own: [],
-                like: [],
-              };
-              res.playlist.forEach((v) => {
-                if (v.creator.userId === this.getUserData.userId) {
-                  this.userPlayLists.own.push({
-                    id: v.id,
-                    cover: v.coverImgUrl,
-                    name: v.name,
-                    artist: v.creator,
-                    desc: v.description,
-                    tags: v.tags,
-                    playCount: formatNumber(v.playCount),
-                    trackCount: v.trackCount,
-                  });
-                } else {
-                  this.userPlayLists.like.push({
-                    id: v.id,
-                    cover: v.coverImgUrl,
-                    name: v.name,
-                    artist: v.creator,
-                    playCount: formatNumber(v.playCount),
-                  });
-                }
-              });
-              this.userPlayLists.isLoading = false;
-            } else {
-              this.userPlayLists.isLoading = false;
-              $message.error("用户歌单为空");
+          this.userPlayLists.isLoading = true;
+          const { userId } = this.userData;
+          // const { subcount } = this.userOtherData;
+          const { createdPlaylistCount, subPlaylistCount } =
+            await getUserSubcount();
+          const number = createdPlaylistCount + subPlaylistCount ?? 30;
+          const res = await getUserPlaylist(userId, number);
+          if (res.playlist) {
+            this.userPlayLists = {
+              has: true,
+              own: [],
+              like: [],
+            };
+            res.playlist.forEach((v) => {
+              if (v.creator.userId === this.getUserData.userId) {
+                this.userPlayLists.own.push({
+                  id: v.id,
+                  cover: v.coverImgUrl,
+                  name: v.name,
+                  artist: v.creator,
+                  desc: v.description,
+                  tags: v.tags,
+                  playCount: formatNumber(v.playCount),
+                  trackCount: v.trackCount,
+                });
+              } else {
+                this.userPlayLists.like.push({
+                  id: v.id,
+                  cover: v.coverImgUrl,
+                  name: v.name,
+                  artist: v.creator,
+                  playCount: formatNumber(v.playCount),
+                });
+              }
+            });
+            if (callback && typeof callback === "function") {
+              callback();
            }
+            this.userPlayLists.isLoading = false;
+          } else {
+            this.userPlayLists.isLoading = false;
+            $message.info(getLanguageData("getDaraEmpty"));
          }
        } catch (err) {
          this.userPlayLists.isLoading = false;
-          console.error("获取用户歌单时出现错误：" + err);
-          $message.error("获取用户歌单时出现错误，请刷新后重试");
+          if (this.userLogin) {
+            console.error(getLanguageData("getDataError"), err);
+            $message.error(getLanguageData("getDataError"));
+          }
        }
      } else {
-        $message.error("请登录账号后使用");
+        $message.error(getLanguageData("needLogin"));
      }
    },
    // 更改用户收藏歌手
@@ -177,25 +180,27 @@ const useUserDataStore = defineStore("userData", {
                size: v.musicSize,
              });
            });
-            if (typeof callback === "function") {
+            if (callback && typeof callback === "function") {
              callback();
            }
            this.userArtistLists.isLoading = false;
          } else {
            this.userArtistLists.isLoading = false;
-            $message.error("用户收藏歌手为空");
+            $message.info(getLanguageData("getDaraEmpty"));
          }
        } catch (err) {
          this.userArtistLists.isLoading = false;
-          console.error("用户收藏歌手获取失败：" + err);
-          $message.error("用户收藏歌手获取失败，请刷新后重试");
+          if (this.userLogin) {
+            console.error(getLanguageData("getDataError"), err);
+            $message.error(getLanguageData("getDataError"));
+          }
        }
      } else {
-        $message.error("请登录账号后使用");
+        $message.error(getLanguageData("needLogin"));
      }
    },
    // 更改用户收藏专辑
-    async setUserAlbumLists() {
+    async setUserAlbumLists(callback) {
      if (this.userLogin) {
        try {
          let offset = 0;
@@ -217,15 +222,20 @@ const useUserDataStore = defineStore("userData", {
            offset += 30;
            console.log(totalCount, offset, this.userAlbum.list);
          }
+          if (callback && typeof callback === "function") {
+            callback();
+          }
          this.userAlbum.isLoading = false;
          this.userAlbum.has = true;
        } catch (err) {
          this.userAlbum.isLoading = false;
-          console.error("用户收藏专辑获取失败：" + err);
-          $message.error("用户收藏专辑获取失败，请刷新后重试");
+          if (this.userLogin) {
+            console.error(getLanguageData("getDataError"), err);
+            $message.error(getLanguageData("getDataError"));
+          }
        }
      } else {
-        $message.error("请登录账号后使用");
+        $message.error(getLanguageData("needLogin"));
      }
    },
  },
--- a/src/style/global.scss
+++ b/src/style/global.scss
@@ -60,7 +60,7 @@ body,
  }
 }
 .n-modal-container {
-  z-index: 2006 !important;
+  // z-index: 2006 !important;
  .n-modal-body-wrapper {
    .n-modal-mask {
      -webkit-backdrop-filter: blur(16px);
--- a/src/utils/MusicFrequency.js
+++ b/src/utils/MusicFrequency.js
@@ -77,7 +77,15 @@ class MusicFrequency {
    this.source.connect(this.analyser);
    this.analyser.connect(this.context.destination);
  }
-
+  // 断开音频元素和分析器之间的连接，释放音频上下文
+  disconnect() {
+    // 断开连接
+    this.source.disconnect();
+    this.analyser.disconnect();
+    // 关闭音频上下文
+    this.context.close();
+  }
+  // 绘制频谱
  drawSpectrum() {
    // 获取频域数据
    this.analyser.getByteFrequencyData(this.output);
--- a/src/utils/Player.js
+++ b/src/utils/Player.js
@@ -0,0 +1,320 @@
+import { Howl, Howler } from "howler";
+import { songScrobble } from "@/api/song";
+import { musicStore } from "@/store";
+import { NIcon } from "naive-ui";
+import { MusicNoteFilled } from "@vicons/material";
+import getLanguageData from "./getLanguageData";
+
+// 歌曲信息更新定时器
+let timeupdateInterval = null;
+// 听歌打卡延时器
+let scrobbleTimeout = null;
+// 重试次数
+let testNumber = 0;
+
+/**
+ * 创建音频对象
+ * @param {string} src - 音频文件地址
+ * @param {number} volume - 音量（默认为0.7）
+ * @param {number} seek - 初始播放进度（默认为0）
+ * @return {Howl} - 音频对象
+ */
+export const createSound = (src, autoPlay = true) => {
+  try {
+    Howler.unload();
+    const music = musicStore();
+    const sound = new Howl({
+      src: [src],
+      format: ["mp3", "flac"],
+      html5: true,
+      preload: true,
+      volume: music.persistData.playVolume,
+    });
+    if (autoPlay && music.getPlayState) {
+      fadePlayOrPause(sound, "play", music.persistData.playVolume);
+    }
+    // 首次加载事件
+    sound?.once("load", () => {
+      const songId = music.getPlaySongData?.id;
+      const sourceId = music.getPlaySongData?.sourceId
+        ? music.getPlaySongData.sourceId
+        : 0;
+      const user = JSON.parse(localStorage.getItem("userData"));
+      const settings = JSON.parse(localStorage.getItem("settingData"));
+      const isLogin = user.userLogin;
+      const isMemory = settings.memoryLastPlaybackPosition;
+      console.log("首次缓冲完成：" + songId + " / 来源：" + sourceId);
+      if (isMemory) {
+        sound?.seek(music.persistData.playSongTime.currentTime);
+      } else {
+        music.persistData.playSongTime = {
+          currentTime: 0,
+          duration: 0,
+          barMoveDistance: 0,
+          songTimePlayed: "00:00",
+          songTimeDuration: "00:00",
+        };
+      }
+      // 取消加载状态
+      music.isLoadingSong = false;
+      // 听歌打卡
+      if (isLogin) {
+        clearTimeout(scrobbleTimeout);
+        scrobbleTimeout = setTimeout(() => {
+          songScrobble(songId, sourceId)
+            .then((res) => {
+              console.log("歌曲打卡完成", res);
+            })
+            .catch((err) => {
+              console.error("歌曲打卡失败：" + err);
+            });
+        }, 3000);
+      }
+    });
+    // 播放事件
+    sound?.on("play", () => {
+      if (!Object.keys(music.getPlaySongData).length) {
+        $message.error(getLanguageData("songLoadError"));
+        return false;
+      }
+      testNumber = 0;
+      music.setPlayState(true);
+      const songName = music.getPlaySongData.name;
+      const songArtist = music.getPlaySongData.artist[0].name;
+      // 播放通知
+      if (typeof $message !== "undefined") {
+        $message.info(songName + " - " + songArtist, {
+          icon: () =>
+            h(NIcon, null, {
+              default: () => h(MusicNoteFilled),
+            }),
+        });
+      }
+      console.log("开始播放：" + songName + " - " + songArtist);
+      // 获取播放器信息
+      timeupdateInterval = setInterval(() => checkAudioTime(sound, music), 250);
+      setMediaSession(music);
+      // 写入播放历史
+      music.setPlayHistory(music.getPlaySongData);
+      // 播放时页面标题
+      window.document.title =
+        music.getPlaySongData.name +
+        " - " +
+        music.getPlaySongData.artist[0].name +
+        " - " +
+        import.meta.env.VITE_SITE_TITLE;
+    });
+    // 暂停事件
+    sound?.on("pause", () => {
+      clearInterval(timeupdateInterval);
+      console.log("音乐暂停");
+      music.setPlayState(false);
+      // 更改页面标题
+      $setSiteTitle();
+    });
+    // 结束事件
+    sound?.on("end", () => {
+      console.log("歌曲播放结束");
+      music.setPlaySongIndex("next");
+    });
+    // 错误事件
+    sound?.on("loaderror", () => {
+      if (testNumber > 2) {
+        $message.error(getLanguageData("songPlayError"));
+        console.error(getLanguageData("songPlayError"));
+        music.setPlayState(false);
+      }
+      if (testNumber < 4) {
+        if (music.getPlaylists[0]) $getPlaySongData(music.getPlaySongData);
+        testNumber++;
+      } else {
+        $message.error(getLanguageData("songLoadTest"), {
+          closable: true,
+          duration: 0,
+        });
+      }
+    });
+    sound?.on("playerror", () => {
+      $message.error(getLanguageData("songPlayError"));
+      console.error(getLanguageData("songPlayError"));
+      music.setPlayState(false);
+    });
+    // 生成频谱
+    // createSpectrums(sound, music);
+    // 返回音频对象
+    return (window.$player = sound);
+  } catch (err) {
+    $message.error(getLanguageData("songLoadError"));
+    console.error(getLanguageData("songLoadError"), err);
+  }
+};
+
+/**
+ * 设置音量
+ * @param {number} volume - 设置的音量值，0-1之间的浮点数
+ */
+export const setVolume = (sound, volume) => {
+  sound?.volume(volume);
+};
+
+/**
+ * 设置进度
+ * @param {number} seek - 设置的进度值，0-1之间的浮点数
+ */
+export const setSeek = (sound, seek) => {
+  const music = musicStore();
+  music.persistData.playSongTime.currentTime = seek;
+  sound?.seek(seek);
+};
+
+/**
+ * 音频渐入渐出
+ * @param {Howl} sound - 音频对象
+ * @param {String} type - 渐入还是渐出
+ * @param {number} volume - 渐出音量的大小，0-1之间的浮点数
+ * @param {number} duration - 渐出音量的时长，单位为毫秒
+ */
+export const fadePlayOrPause = (sound, type, volume, duration = 300) => {
+  const isFade =
+    JSON.parse(localStorage.getItem("settingData")).songVolumeFade ?? true;
+  if (isFade) {
+    if (type === "play") {
+      if (sound?.playing()) return;
+      sound?.play();
+      sound?.once("play", () => {
+        sound?.fade(0, volume, duration);
+      });
+    } else if (type === "pause") {
+      sound?.fade(volume, 0, duration);
+      sound?.once("fade", () => {
+        sound?.pause();
+      });
+    }
+  } else {
+    type === "play" ? sound?.play() : sound?.pause();
+  }
+};
+
+/**
+ * 停止播放器
+ * @param {Howl} sound - 音频对象
+ */
+export const soundStop = (sound) => {
+  sound?.stop();
+  setSeek(sound, 0);
+};
+
+/**
+ * 获取播放进度
+ * @param {Howl} sound - 音频对象
+ * @param {music} music - pinia
+ */
+const checkAudioTime = (sound, music) => {
+  if (sound.playing()) {
+    const currentTime = sound.seek();
+    const duration = sound._duration;
+    music.setPlaySongTime({ currentTime, duration });
+  }
+};
+
+/**
+ * 生成 MediaSession
+ * @param {music} music - pinia
+ */
+const setMediaSession = (music) => {
+  if (
+    "mediaSession" in navigator &&
+    Object.keys(music.getPlaySongData).length
+  ) {
+    const artists = music.getPlaySongData.artist.map((a) => a.name);
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: music.getPlaySongData.name,
+      artist: artists.join(" & "),
+      album: music.getPlaySongData.album.name,
+      artwork: [
+        {
+          src:
+            music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
+            "?param=96y96",
+          sizes: "96x96",
+        },
+        {
+          src:
+            music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
+            "?param=128y128",
+          sizes: "128x128",
+        },
+        {
+          src:
+            music.getPlaySongData.album.picUrl.replace(/^http:/, "https:") +
+            "?param=512x512",
+          sizes: "512x512",
+        },
+      ],
+      length: music.getPlaySongTime?.duration,
+    });
+    navigator.mediaSession.setActionHandler("nexttrack", () => {
+      music.setPlaySongIndex("next");
+    });
+    navigator.mediaSession.setActionHandler("previoustrack", () => {
+      music.setPlaySongIndex("prev");
+    });
+    navigator.mediaSession.setActionHandler("play", () => {
+      music.setPlayState(true);
+    });
+    navigator.mediaSession.setActionHandler("pause", () => {
+      music.setPlayState(false);
+    });
+  }
+};
+
+/**
+ * 生成频谱数据 - 快速傅里叶变换（FFT）
+ * @param {Howl} sound - 音频对象
+ * @param {music} music - pinia
+ */
+const createSpectrums = (sound, music) => {
+  try {
+    if (!music.spectrumsData.audioCtx) {
+      // 断开之前的连接
+      music.spectrumsData.audio?.disconnect();
+      music.spectrumsData.analyser?.disconnect();
+      music.spectrumsData.audioCtx?.close();
+      // 创建新的连接
+      music.spectrumsData.audioCtx = new (window.AudioContext ||
+        window.webkitAudioContext)();
+      const audioDom = sound._sounds[0]._node;
+      audioDom.crossOrigin = "anonymous";
+      const source =
+        music.spectrumsData.audioCtx.createMediaElementSource(audioDom);
+      const analyser = music.spectrumsData.audioCtx.createAnalyser();
+      analyser.fftSize = 256;
+      source.connect(analyser);
+      analyser.connect(music.spectrumsData.audioCtx.destination);
+      // 更新频谱数据
+      const dataArray = new Uint8Array(analyser.frequencyBinCount);
+      updateSpectrums(analyser, dataArray, music);
+      // 保存当前链接
+      music.spectrumsData.audio = source;
+      music.spectrumsData.analyser = analyser;
+    }
+  } catch (err) {
+    console.error("音乐频谱生成失败：" + err);
+  }
+};
+
+/**
+ * 更新音乐频谱数据
+ *
+ * @param {Object} analyser - 音频分析器
+ * @param {Uint8Array} dataArray - 频谱数据数组
+ * @param {Object} music - pinia
+ */
+const updateSpectrums = (analyser, dataArray, music) => {
+  analyser.getByteFrequencyData(dataArray);
+  music.spectrumsData.data = [...dataArray];
+  // 递归调用，持续更新频谱数据
+  requestAnimationFrame(() => {
+    updateSpectrums(analyser, dataArray, music);
+  });
+};
--- a/src/utils/getCoverUrl.js
+++ b/src/utils/getCoverUrl.js
@@ -0,0 +1,17 @@
+/**
+ * 获取图片的 url
+ * @param {string} url - 必选参数，输入的原始图片url
+ * @param {number} size - 可选参数，需要生成的图片尺寸，默认为null
+ * @return {string} 返回根据 url 和 size 参数生成的图片url
+ */
+const getCoverUrl = (url, size = null) => {
+  if (!url) return "/images/pic/default.png";
+  const sizeUrl = size ? `?param=${size}y${size}` : "";
+  const imageUrl = url.replace(/^http:/, "https:");
+  if (imageUrl.endsWith(".jpg")) {
+    return imageUrl + sizeUrl;
+  }
+  return imageUrl;
+};
+
+export default getCoverUrl;
--- a/src/utils/getLanguageData.js
+++ b/src/utils/getLanguageData.js
@@ -0,0 +1,88 @@
+import { settingStore } from "@/store";
+
+/**
+ * 翻译文本数据
+ */
+const languageData = {
+  "zh-CN": {
+    million: "万",
+    billion: "亿",
+    year: "年",
+    month: "月",
+    day: "日",
+    just: "刚刚发布",
+    minutesAgo: "分钟前",
+    yesterday: "昨天",
+    lightMode: "已切换至浅色模式",
+    darkMode: "已切换至深色模式",
+    personalFmError: "获取私人 FM 失败",
+    fmTrashError: "歌曲移除至垃圾桶失败",
+    needLogin: "请登录账号后使用",
+    loveSong: "已添加到我喜欢的音乐",
+    loveSongError: "喜欢音乐时发生错误",
+    loveSongRepeat: "我喜欢的音乐中已存在该歌曲",
+    loveSongRemove: "已从我喜欢的音乐中移除",
+    loveSongRemoveError: "取消喜欢音乐时发生错误",
+    loveSongNoFound: "我喜欢的列表中未找到该歌曲",
+    getDataError: "数据获取失败，请刷新后重试",
+    getDaraEmpty: "数据为空",
+    getLrcError: "歌词处理出错",
+    random: "随机播放",
+    single: "单曲循环",
+    normal: "列表循环",
+    playError: "播放出错，请刷新后重试",
+    addSongToNext: "已添加至下一曲播放",
+    removeSong: "已从播放列表中移除",
+    songLoadError: "音乐数据获取失败",
+    songPlayError: "歌曲播放失败",
+    songLoadTest: "歌曲重试次数过多，请刷新后重试",
+  },
+  en: {
+    million: "M",
+    billion: "B",
+    year: "-",
+    month: "-",
+    day: "",
+    just: "Just released",
+    minutesAgo: "Minutes ago",
+    yesterday: "Yesterday",
+    lightMode: "Switched to light mode",
+    darkMode: "Switched to dark mode",
+    personalFmError: "Get Private FM Failed",
+    fmTrashError: "Song removal to trash failed",
+    needLogin: "Please login to your account to use",
+    loveSong: "Added to my favorite music",
+    loveSongError: "An error occurred while liking music",
+    loveSongRepeat: "The song already exists in my favorite music",
+    loveSongRemove: "Removed from my favorite music",
+    loveSongError: "An error occurred while unliking music",
+    loveSongNoFound: "The song was not found in my favorite list",
+    getDataError: "Data acquisition failed, please refresh and try again",
+    getDaraEmpty: "Data is empty",
+    getLrcError: "Lyrics processing error",
+    random: "Random play",
+    single: "Single loop",
+    normal: "list loop",
+    playError: "Playback error, please refresh and try again",
+    addSongToNext: "has been added to the next song to play",
+    removeSong: "has been removed from the playlist",
+  },
+};
+
+/**
+ * 返回翻译文本
+ * @param {String} type 文本类别
+ * @returns {Object} 对应语种文本
+ */
+const getLanguageData = (type) => {
+  try {
+    const setting = settingStore();
+    const language = setting.language;
+    return languageData[language][type];
+  } catch (err) {
+    console.log("Failed to get translated:" + err);
+    return null;
+  }
+};
+
+export default getLanguageData;
--- a/src/utils/parseLyric.js
+++ b/src/utils/parseLyric.js
@@ -55,6 +55,7 @@ const parseLyric = (data) => {
      ? parseOtherLrc(result.yrc, parseLrc(lrcData.yromalrc), "roma")
      : result.yrc;
  }
+  console.log(result);
  return result;
 };

@@ -167,7 +168,7 @@ const parseYrc = (lyrics) => {
              return null;
            }
            return {
-              time: Number(time) / 1000,
+              time: Number(time) / 1000 + 0.1,
              duration: Number(duration) / 1000,
              content,
            };
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -19,7 +19,8 @@ axios.defaults.withCredentials = true;
 // 请求拦截
 axios.interceptors.request.use(
  (request) => {
-    if (!request.hiddenBar) $loadingBar.start();
+    if (!request.hiddenBar && typeof $loadingBar !== "undefined")
+      $loadingBar.start();
    return request;
  },
  (error) => {
@@ -32,7 +33,7 @@ axios.interceptors.request.use(
 // 响应拦截
 axios.interceptors.response.use(
  (response) => {
-    $loadingBar.finish();
+    if (typeof $loadingBar !== "undefined") $loadingBar.finish();
    return response.data;
  },
  (error) => {
@@ -41,7 +42,7 @@ axios.interceptors.response.use(
      const data = error.response.data;
      switch (error.response.status) {
        case 401:
-          console.error("您未登录");
+          console.error("无权限访问");
          break;
        case 301:
          console.error("请求发生重定向");
--- a/src/utils/timeTools.js
+++ b/src/utils/timeTools.js
@@ -1,3 +1,5 @@
+import getLanguageData from "./getLanguageData";
+
 /**
 * 歌曲时长时间戳转换
 * @param {number} mss 毫秒数
@@ -47,26 +49,30 @@ export const getCommentTime = (t) => {
      : userDate.getMinutes();
  // 判断时间差
  if (nowDate - t <= 60000) {
-    return "刚刚发布";
+    return getLanguageData("just");
  } else if (nowDate - t > 60000 && nowDate - t <= 3600000) {
    const pastTimeUnix = nowDate - t;
    const pastTime = new Date(Number(pastTimeUnix));
-    return `${pastTime.getMinutes()} 分钟前`;
+    return `${pastTime.getMinutes("yesterday")} ${getLanguageData(
+      "minutesAgo"
+    )}`;
  } else if (todayLast - t > 3600000 && todayLast - t <= 86400000) {
    return `${UH}:${Um}`;
  } else if (todayLast - t > 86400000 && todayLast - t <= 172800000) {
-    return `昨天 ${UH}:${Um}`;
+    return `${getLanguageData("yesterday")} ${UH}:${Um}`;
  } else if (todayLast - t > 172800000 && todayLast - t <= 31557600000) {
-    return `${userDate.getMonth() + 1}月${userDate.getDate()}日`;
+    return `${userDate.getMonth() + 1}${getLanguageData(
+      "month"
+    )}${userDate.getDate()}${getLanguageData("day")}`;
  } else {
-    return `${userDate.getFullYear()}年${
+    return `${userDate.getFullYear()}${getLanguageData("year")}${
      userDate.getMonth() + 1
-    }月${userDate.getDate()}日`;
+    }${getLanguageData("month")}${userDate.getDate()}${getLanguageData("day")}`;
  }
 };

 /**
- * 过万数字转化
+ * 过万/亿数字转化
 * @param {number} num 需要格式化的数字
 * @returns {string|number} 格式化后的字符串或原样返回的数字
 */
@@ -74,8 +80,17 @@ export const formatNumber = (num) => {
  const n = Number(num);
  if (n === 0 || n < 10000) {
    return n;
+  } else if (n < 100000000) {
+    const numString = (n / 10000).toFixed(1);
+    return numString.endsWith(".0")
+      ? numString.slice(0, -2) + getLanguageData("million")
+      : numString + getLanguageData("million");
+  } else {
+    const numString = (n / 100000000).toFixed(1);
+    return numString.endsWith(".0")
+      ? numString.slice(0, -2) + getLanguageData("billion")
+      : numString + getLanguageData("billion");
  }
-  return (n / 10000).toFixed(1) + "万";
 };

 /**
--- a/src/views/Album/AlbumView.vue
+++ b/src/views/Album/AlbumView.vue
@@ -1,85 +1,123 @@
 <template>
-  <div class="playlist" v-if="albumDetail">
+  <div class="album" v-if="albumDetail">
    <div class="left">
      <div class="cover">
-        <n-avatar
+        <n-image
+          show-toolbar-tooltip
          class="coverImg"
-          :src="
-            albumDetail.picUrl
-              ? albumDetail.picUrl.replace(/^http:/, 'https:') +
-                '?param=1024y1024'
-              : null
-          "
+          :src="getCoverUrl(albumDetail.picUrl, 1024)"
+          :previewed-img-props="{ style: { borderRadius: '8px' } }"
+          :preview-src="getCoverUrl(albumDetail.picUrl)"
          fallback-src="/images/pic/default.png"
        />
        <img src="/images/pic/album.png" class="album" alt="album" />
      </div>
-      <div class="intr">
-        <span class="name">歌单简介</span>
-        <span class="desc text-hidden">
-          {{ albumDetail.description }}
-        </span>
-        <n-button
-          block
-          strong
-          secondary
-          v-if="albumDetail?.description.length > 70"
-          @click="albumDescShow = true"
-        >
-          全部简介
-        </n-button>
-        <n-modal
-          class="s-modal"
-          v-model:show="albumDescShow"
-          preset="card"
-          title="歌单简介"
-          :bordered="false"
-        >
-          <n-scrollbar>
-            <n-text v-html="albumDetail.description.replace(/\n/g, '<br>')" />
-          </n-scrollbar>
-        </n-modal>
-      </div>
-      <div class="tag" v-if="albumDetail.tags">
-        <n-tag
-          class="tags"
-          round
-          :bordered="false"
-          v-for="item in albumDetail.tags"
-          :key="item"
-        >
-          {{ item }}
-        </n-tag>
+      <div class="meta">
+        <div class="title">
+          <n-text class="name">{{ albumDetail.name }}</n-text>
+          <n-text
+            class="creator"
+            @click="router.push(`/artist/songs?id=${albumDetail.artist.id}`)"
+          >
+            {{ albumDetail.artist.name }}
+          </n-text>
+        </div>
+        <div class="intr">
+          <span class="name">{{
+            $t("general.name.desc", { name: $t("general.name.album") })
+          }}</span>
+          <span class="desc text-hidden">
+            {{
+              albumDetail.description
+                ? albumDetail.description
+                : $t("other.noDesc")
+            }}
+          </span>
+          <n-button
+            class="all-desc"
+            block
+            strong
+            secondary
+            v-if="albumDetail?.description.length > 70"
+            @click="albumDescShow = true"
+          >
+            {{ $t("general.name.allDesc") }}
+          </n-button>
+        </div>
+        <n-space class="tag" v-if="albumDetail.tags">
+          <n-tag
+            class="tags"
+            round
+            :bordered="false"
+            v-for="item in albumDetail.tags"
+            :key="item"
+          >
+            {{ item }}
+          </n-tag>
+        </n-space>
+        <n-space class="control">
+          <n-button strong secondary round type="primary" @click="playAllSong">
+            <template #icon>
+              <n-icon :component="MusicList" />
+            </template>
+            {{ $t("general.name.play") }}
+          </n-button>
+          <n-dropdown
+            placement="right-start"
+            trigger="click"
+            :show-arrow="true"
+            :options="dropdownOptions"
+          >
+            <n-button strong secondary circle>
+              <template #icon>
+                <n-icon :component="More" />
+              </template>
+            </n-button>
+          </n-dropdown>
+        </n-space>
      </div>
    </div>
    <div class="right">
      <div class="meta">
-        <span class="name">{{ albumDetail.name }}</span>
-        <span
+        <n-text class="name">{{ albumDetail.name }}</n-text>
+        <n-text
          class="creator"
          @click="router.push(`/artist/songs?id=${albumDetail.artist.id}`)"
        >
+          <n-icon :depth="3" :component="People" />
          {{ albumDetail.artist.name }}
-        </span>
-        <div class="time">
-          <div class="createTime">
-            <span class="num">发行时间：</span>
-            {{ getLongTime(albumDetail.publishTime) }}
+        </n-text>
+        <n-space class="time">
+          <div class="num">
+            <n-icon :depth="3" :component="Time" />
+            <n-text v-html="getLongTime(albumDetail.publishTime)" />
          </div>
-          <div class="company" v-if="albumDetail.company">
-            <span class="num">发行公司：</span>
-            {{ albumDetail.company }}
+          <div class="num" v-if="albumDetail.company">
+            <n-icon :depth="3" :component="City" />
+            <n-text v-html="albumDetail.company" />
          </div>
-        </div>
+        </n-space>
      </div>
      <DataLists :listData="albumData" hideAlbum />
+      <!-- 专辑简介 -->
+      <n-modal
+        class="s-modal"
+        v-model:show="albumDescShow"
+        preset="card"
+        :title="$t('general.name.desc', { name: $t('general.name.album') })"
+        :bordered="false"
+      >
+        <n-scrollbar>
+          <n-text v-html="albumDetail.description.replace(/\n/g, '<br>')" />
+        </n-scrollbar>
+      </n-modal>
    </div>
  </div>
  <div class="title" v-else-if="!albumId">
-    <span class="key">参数不完整</span>
+    <span class="key">{{ $t("general.name.noKeywords") }}</span>
    <br />
    <n-button strong secondary @click="router.go(-1)" style="margin-top: 20px">
-      返回上一级
+      {{ $t("general.name.goBack") }}
    </n-button>
  </div>
  <div class="loading" v-else>
@@ -96,25 +134,113 @@
 </template>

 <script setup>
-import { getAlbum } from "@/api/album";
+import { NIcon, NAvatar, NText } from "naive-ui";
+import { getAlbum, likeAlbum } from "@/api/album";
 import { useRouter } from "vue-router";
-import { getSongTime, getLongTime } from "@/utils/timeTools.js";
+import { getSongTime, getLongTime } from "@/utils/timeTools";
+import {
+  MusicList,
+  LinkTwo,
+  More,
+  Like,
+  Unlike,
+  People,
+  Time,
+  City,
+} from "@icon-park/vue-next";
+import { userStore, musicStore, settingStore } from "@/store";
+import { useI18n } from "vue-i18n";
 import DataLists from "@/components/DataList/DataLists.vue";
-const router = useRouter();
+import getCoverUrl from "@/utils/getCoverUrl";

-// 歌单数据
+const { t } = useI18n();
+const router = useRouter();
+const user = userStore();
+const music = musicStore();
+const setting = settingStore();
+
+// 专辑数据
 const albumId = ref(router.currentRoute.value.query.id);
 const albumDetail = ref(null);
 const albumData = ref([]);
 const albumDescShow = ref(false);

+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { style: { transform: "translateX(2px)" } },
+      {
+        default: () => icon,
+      }
+    );
+  };
+};
+
+// 判断收藏还是取消
+const isLikeOrDislike = (id) => {
+  const playlists = user.getUserAlbumLists.list;
+  if (playlists.length) {
+    return !playlists.some((item) => item.id === Number(id));
+  }
+  return true;
+};
+
+// 专辑下拉菜单数据
+const dropdownOptions = ref([]);
+
+// 更改专辑下拉菜单数据
+const setDropdownOptions = () => {
+  dropdownOptions.value = [
+    {
+      key: "copy",
+      label: t("menu.copy", {
+        name: t("general.name.album"),
+        other: t("general.name.link"),
+      }),
+      props: {
+        onClick: () => {
+          if (navigator.clipboard) {
+            try {
+              navigator.clipboard.writeText(
+                `https://music.163.com/#/playlist?id=${albumId.value}`
+              );
+              $message.success(t("general.message.copySuccess"));
+            } catch (err) {
+              console.error(t("general.message.copyFailure"), err);
+              $message.error(t("general.message.copyFailure"));
+            }
+          } else {
+            $message.error(t("general.message.notSupported"));
+          }
+        },
+      },
+      icon: renderIcon(h(LinkTwo)),
+    },
+    {
+      key: "like",
+      label: isLikeOrDislike(albumId.value)
+        ? t("menu.collection", { name: t("general.name.album") })
+        : t("menu.cancelCollection", { name: t("general.name.album") }),
+      show: user.userLogin,
+      props: {
+        onClick: () => {
+          toChangeLike(albumId.value);
+        },
+      },
+      icon: renderIcon(h(isLikeOrDislike(albumId.value) ? Like : Unlike)),
+    },
+  ];
+};
+
 // 获取歌单信息
 const getAlbumData = (id) => {
  getAlbum(id).then((res) => {
    console.log(res);
    // 专辑信息
    albumDetail.value = res.album;
-    $setSiteTitle(res.album.name + " - 专辑");
+    $setSiteTitle(res.album.name + " - " + t("general.name.album"));
    // 专辑歌曲
    if (res.songs) {
      albumData.value = [];
@@ -134,14 +260,107 @@ const getAlbumData = (id) => {
        });
      });
    } else {
-      $message.error("获取专辑歌曲失败");
+      $message.error(t("general.message.acquisitionFailed"));
    }
  });
 };

+// 播放专辑所有歌曲
+const playAllSong = () => {
+  try {
+    // 获取元素
+    const songDom = document.getElementById("datalists").firstElementChild;
+    const allSongDom = document.querySelectorAll("#datalists > *");
+    // 是否有元素存在 play
+    let isHasPlay = false;
+    // 遍历
+    allSongDom.forEach((child) => {
+      if (child.classList.contains("play")) {
+        isHasPlay = true;
+      }
+    });
+    if (!isHasPlay) {
+      // 双击操作
+      const event = new MouseEvent("dblclick", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+      // 双击或单击
+      if (setting.listClickMode === "dblclick") {
+        songDom.dispatchEvent(event);
+      } else if (setting.listClickMode === "click") {
+        songDom.click();
+      }
+    } else {
+      music.setPlayState(true);
+    }
+  } catch (err) {
+    console.error($message.error(t("general.message.operationFailed")), err);
+    $message.error($message.error(t("general.message.operationFailed")));
+  }
+};
+
+// 收藏/取消收藏
+const toChangeLike = async (id) => {
+  const type = isLikeOrDislike(id) ? 1 : 2;
+  const likeMsg = t("general.name.album");
+  const isThereASpace = setting.language === "zh-CN" ? "" : " ";
+  try {
+    const res = await likeAlbum(type, id);
+    if (res.code === 200) {
+      $message.success(
+        `${likeMsg + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.success") })
+            : t("menu.cancelCollection", { name: t("general.dialog.success") })
+        }`
+      );
+      user.setUserAlbumLists(() => {
+        setDropdownOptions();
+      });
+    } else {
+      $message.error(
+        `${likeMsg + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.failed") })
+            : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+        }`
+      );
+    }
+  } catch (err) {
+    $message.error(
+      `${likeMsg + isThereASpace}${
+        type == 1
+          ? t("menu.collection", { name: t("general.dialog.failed") })
+          : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+      }`
+    );
+    console.error(
+      `${likeMsg + isThereASpace}${
+        type == 1
+          ? t("menu.collection", { name: t("general.dialog.failed") })
+          : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+      }`,
+      err
+    );
+  }
+};
+
 onMounted(() => {
  if (albumId.value) {
    getAlbumData(albumId.value);
+    if (
+      user.userLogin &&
+      !user.getUserAlbumLists.has &&
+      !user.getUserAlbumLists.isLoading
+    ) {
+      user.setUserAlbumLists(() => {
+        setDropdownOptions();
+      });
+    } else {
+      setDropdownOptions();
+    }
  }
 });

@@ -158,7 +377,7 @@ watch(
 </script>

 <style lang="scss" scoped>
-.playlist,
+.album,
 .loading {
  display: flex;
  flex-direction: row;
@@ -173,49 +392,95 @@ watch(
    align-items: flex-start;
    position: sticky;
    top: 24px;
+    @media (max-width: 990px) {
+      margin-right: 0;
+      width: 30vw;
+    }
    .cover {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
-      // box-shadow: 0 0 16px 0px rgb(0 0 0 / 20%);
-      .n-avatar {
+      width: 80%;
+      height: 80%;
+      border-radius: 8px;
+      position: relative;
+      transition: transform 0.3s;
+      &:active {
+        transform: scale(0.95);
+      }
+      .coverImg {
        border-radius: 8px;
-        width: 80%;
-        height: 80%;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index: 1;
+        :deep(img) {
+          width: 100%;
+        }
      }
      .album {
        height: 100%;
        position: absolute;
        top: 0;
-        right: 4%;
+        right: -20%;
      }
    }
-    .intr {
-      margin-top: 24px;
-      width: 80%;
-      padding-left: 4px;
-      .name {
-        display: block;
-        font-size: 20px;
-        font-weight: bold;
-        margin-bottom: 12px;
-      }
-      .desc {
-        -webkit-line-clamp: 4;
-        line-height: 26px;
-        margin-bottom: 16px;
-      }
-    }
-    .tag {
-      margin-top: 20px;
+    .meta {
      width: 100%;
+      height: 100%;
      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      .tags {
-        margin-right: 8px;
-        font-size: 13px;
+      flex-direction: column;
+      justify-content: flex-start;
+      .title {
+        display: none;
+        flex-direction: column;
+        margin-top: 0;
+        .name {
+          font-size: 28px;
+          font-weight: bold;
+          -webkit-line-clamp: 2;
+        }
+        .creator {
+          margin-top: 6px;
+          font-size: 16px;
+          opacity: 0.8;
+        }
+      }
+      .intr {
+        margin-top: 24px;
+        width: 80%;
+        padding-left: 4px;
+        .name {
+          display: block;
+          font-size: 20px;
+          font-weight: bold;
+          margin-bottom: 12px;
+        }
+        .desc {
+          -webkit-line-clamp: 4;
+          line-height: 26px;
+          margin-bottom: 16px;
+        }
+      }
+      .tag {
+        margin-top: 20px;
+        .tags {
+          line-height: 0;
+          font-size: 13px;
+          cursor: pointer;
+          transition: all 0.3s;
+          &:hover {
+            background-color: var(--main-second-color);
+            color: var(--main-color);
+          }
+          &:active {
+            transform: scale(0.95);
+          }
+        }
+      }
+      .control {
+        margin-top: 20px;
      }
    }
  }
@@ -231,6 +496,8 @@ watch(
        font-weight: bold;
      }
      .creator {
+        display: flex;
+        align-items: center;
        margin-top: 6px;
        font-size: 16px;
        opacity: 0.8;
@@ -240,21 +507,27 @@ watch(
          opacity: 1;
          color: var(--main-color);
        }
+        .n-icon {
+          margin-right: 6px;
+        }
      }
      .time {
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
-        @media (max-width: 768px) {
+        @media (max-width: 1100px) {
          flex-direction: column;
          align-items: flex-start;
        }
        .num {
-          color: #999;
-        }
-        div {
-          margin-right: 12px;
+          // color: #999;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          .n-icon {
+            margin-right: 6px;
+          }
        }
      }
    }
@@ -272,21 +545,111 @@ watch(
  @media (max-width: 768px) {
    flex-direction: column;
    .left {
-      margin-bottom: 12px;
-      position: static;
-      width: 60vw;
+      position: relative;
+      top: 0;
+      width: 100%;
+      height: 30vw;
      max-width: none;
-      .intr {
-        display: none;
+      display: flex;
+      flex-direction: row;
+      .cover {
+        height: 100%;
+        min-width: 30vw;
+        width: 30vw;
+        margin-right: 60px;
+      }
+      .meta {
+        .title {
+          display: flex;
+          margin-bottom: 16px;
+          .name {
+            font-size: 25px;
+          }
+          .creator {
+            font-size: 14px;
+          }
+        }
+        .intr {
+          margin-top: 0;
+          padding-left: 0;
+          .name,
+          .all-desc {
+            display: none;
+          }
+          .desc {
+            -webkit-line-clamp: 3;
+            margin-bottom: 0;
+          }
+        }
+        .control {
+          position: absolute;
+          left: 0;
+          bottom: -60px;
+        }
      }
    }
    .right {
+      margin-top: 80px;
      .meta {
-        .name {
-          font-size: 26px;
+        display: none;
+      }
+    }
+  }
+  @media (max-width: 540px) {
+    .left {
+      .cover {
+        margin-right: 44px;
+      }
+      .meta {
+        .title {
+          margin-bottom: 0;
+          .name {
+            font-size: 24px;
+          }
+        }
+        .intr,
+        .tag {
+          display: none !important;
+        }
+        .control {
+          position: static;
        }
      }
    }
+    .right {
+      margin-top: 30px;
+    }
+  }
+  @media (max-width: 520px) {
+    .left {
+      .meta {
+        .title {
+          .name {
+            font-size: 20px;
+          }
+          .creator {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+  @media (max-width: 370px) {
+    .left {
+      .meta {
+        .title {
+          .name {
+            -webkit-line-clamp: 3;
+          }
+        }
+        .control {
+          position: absolute;
+        }
+      }
+    }
+    .right {
+      margin-top: 80px;
+    }
  }
 }
 .title {
--- a/src/views/Artist/albums.vue
+++ b/src/views/Artist/albums.vue
@@ -13,7 +13,7 @@
 <script setup>
 import { getArtistAblums } from "@/api/artist";
 import { useRouter } from "vue-router";
-import { getLongTime } from "@/utils/timeTools.js";
+import { getLongTime } from "@/utils/timeTools";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 import Pagination from "@/components/Pagination/index.vue";
 const router = useRouter();
@@ -51,7 +51,7 @@ const getArtistAblumsData = (id, limit = 30, offset = 0) => {
      $message.error("搜索内容为空");
    }
    // 请求后回顶
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -106,4 +106,4 @@ watch(
 .albums {
  padding-top: 10px;
 }
-</style>
+</style>
--- a/src/views/Artist/all-songs.vue
+++ b/src/views/Artist/all-songs.vue
@@ -1,11 +1,15 @@
 <template>
  <div class="all-songs">
    <div class="title" v-if="artistId">
-      <span class="key">{{ artistName ? artistName : "未知歌手" }}</span>
-      <span>全部歌曲</span>
+      <template v-if="artistData[0]">
+        <span class="key">{{
+          artistName ? artistName : $t("general.name.unknownArtist")
+        }}</span>
+        <span>{{ $t("general.name.allSong") }} </span>
+      </template>
    </div>
    <div class="title" v-else>
-      <span class="key">未提供所需信息</span>
+      <span class="key">{{ $t("general.name.noKeywords") }}</span>
      <br />
      <n-button
        strong
@@ -13,7 +17,7 @@
        @click="router.go(-1)"
        style="margin-top: 20px"
      >
-        返回上一级
+        {{ $t("general.name.goBack") }}
      </n-button>
    </div>
    <div class="songs" v-if="artistId">
@@ -30,13 +34,15 @@
 </template>

 <script setup>
-import { getArtistAllSongs } from "@/api/artist";
+import { getArtistDetail, getArtistAllSongs } from "@/api/artist";
 import { getMusicDetail } from "@/api/song";
 import { useRouter } from "vue-router";
-import { getSongTime } from "@/utils/timeTools.js";
+import { getSongTime } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import DataLists from "@/components/DataList/DataLists.vue";
 import Pagination from "@/components/Pagination/index.vue";

+const { t } = useI18n();
 const router = useRouter();

 // 歌手信息
@@ -51,41 +57,56 @@ const pageNumber = ref(
    : 1
 );

+// 获取歌手名称
+const getArtistDetailData = (id) => {
+  getArtistDetail(id).then((res) => {
+    artistName.value = res.data.artist.name;
+  });
+};
+
 // 获取歌手信息
 const getArtistAllSongsData = (id, limit = 30, offset = 0, order = "hot") => {
-  getArtistAllSongs(id, limit, offset, order).then((res) => {
-    console.log(res);
-    if (res.songs[0]) {
-      // 数据总数
-      totalCount.value = res.total;
-      // 歌手名称
-      artistName.value = res.songs[0].ar[0].name;
-      // 列表数据
-      const ids = res.songs.map((obj) => obj.id);
-      getMusicDetail(ids.join(",")).then((res) => {
-        console.log(res);
-        artistData.value = [];
-        res.songs.forEach((v, i) => {
-          artistData.value.push({
-            id: v.id,
-            num: i + 1 + (pageNumber.value - 1) * pagelimit.value,
-            name: v.name,
-            artist: v.ar,
-            album: v.al,
-            alia: v.alia,
-            time: getSongTime(v.dt),
-            fee: v.fee,
-            pc: v.pc ? v.pc : null,
-            mv: v.mv ? v.mv : null,
+  if (!id) return false;
+  getArtistAllSongs(id, limit, offset, order)
+    .then((res) => {
+      console.log(res);
+      // 获取歌手名称
+      getArtistDetailData(id);
+      // 全部歌曲数据
+      if (res.songs[0]) {
+        // 数据总数
+        totalCount.value = res.total;
+        // 列表数据
+        const ids = res.songs.map((obj) => obj.id);
+        getMusicDetail(ids.join(",")).then((res) => {
+          console.log(res);
+          artistData.value = [];
+          res.songs.forEach((v, i) => {
+            artistData.value.push({
+              id: v.id,
+              num: i + 1 + (pageNumber.value - 1) * pagelimit.value,
+              name: v.name,
+              artist: v.ar,
+              album: v.al,
+              alia: v.alia,
+              time: getSongTime(v.dt),
+              fee: v.fee,
+              pc: v.pc ? v.pc : null,
+              mv: v.mv ? v.mv : null,
+            });
          });
        });
-      });
-    } else {
-      $message.error("歌手全部歌曲为空");
-    }
-    // 请求后回顶并结束加载条
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
-  });
+      } else {
+        $message.error(t("general.message.acquisitionFailed"));
+      }
+      // 请求后回顶
+      if (typeof $scrollToTop !== "undefined") $scrollToTop();
+    })
+    .catch((err) => {
+      router.go(-1);
+      console.error(t("general.message.acquisitionFailed"), err);
+      $message.error(t("general.message.acquisitionFailed"));
+    });
 };

 // 监听路由参数变化
--- a/src/views/Artist/index.vue
+++ b/src/views/Artist/index.vue
@@ -17,15 +17,15 @@
        <div class="num">
          <n-text class="musicSize" @click="tabChange('songs')">
            <n-icon :component="MusicNoteFilled" />
-            {{ artistData.musicSize }} 首歌
+            {{ $t("general.name.songSize", { size: artistData.musicSize }) }}
          </n-text>
          <n-text class="albumSize" @click="tabChange('albums')">
            <n-icon :component="AlbumFilled" />
-            {{ artistData.albumSize }} 张专辑
+            {{ $t("general.name.albumSize", { size: artistData.albumSize }) }}
          </n-text>
          <n-text class="mvSize" @click="tabChange('videos')">
            <n-icon :component="VideocamRound" />
-            {{ artistData.mvSize }} 个 MV
+            {{ $t("general.name.mvSize", { size: artistData.mvSize }) }}
          </n-text>
        </div>
        <n-text class="desc text-hidden" @click="artistDescShow = true">
@@ -51,7 +51,13 @@
                "
              />
            </template>
-            {{ artistLikeBtn ? "收藏歌手" : "取消收藏歌手" }}
+            {{
+              artistLikeBtn
+                ? $t("menu.collection", { name: $t("general.name.artists") })
+                : $t("menu.cancelCollection", {
+                    name: $t("general.name.artists"),
+                  })
+            }}
          </n-button>
        </n-space>
        <!-- 歌手介绍 -->
@@ -59,7 +65,7 @@
          class="s-modal"
          v-model:show="artistDescShow"
          preset="card"
-          title="歌手介绍"
+          :title="$t('general.name.artistDesc')"
          :bordered="false"
        >
          <n-scrollbar>
@@ -69,7 +75,7 @@
      </div>
    </div>
    <div class="error" v-else-if="!artistId">
-      <n-text>参数不完整</n-text>
+      <n-text>{{ $t("general.name.noKeywords") }}</n-text>
      <br />
      <n-button
        strong
@@ -77,7 +83,7 @@
        @click="router.go(-1)"
        style="margin-top: 20px"
      >
-        返回上一级
+        {{ $t("general.name.goBack") }}
      </n-button>
    </div>
    <n-tabs
@@ -87,8 +93,8 @@
      v-model:value="tabValue"
      v-if="artistData"
    >
-      <n-tab name="songs"> 热门单曲 </n-tab>
-      <n-tab name="albums"> 专辑 </n-tab>
+      <n-tab name="songs"> {{ $t("general.name.hotSong") }} </n-tab>
+      <n-tab name="albums"> {{ $t("general.name.album") }} </n-tab>
      <n-tab name="videos"> MV </n-tab>
    </n-tabs>
    <main class="content" v-if="artistData">
@@ -117,7 +123,9 @@ import {
  PersonAddAlt1Round,
  PersonRemoveAlt1Round,
 } from "@vicons/material";
+import { useI18n } from "vue-i18n";

+const { t } = useI18n();
 const router = useRouter();
 const user = userStore();

@@ -146,17 +154,15 @@ const getArtistDetailData = (id) => {
          musicSize: res.data.artist.musicSize,
          mvSize: res.data.artist.mvSize,
        };
-        $setSiteTitle(res.data.artist.name + " - 歌手");
+        $setSiteTitle(res.data.artist.name + " - " + t("general.name.artists"));
        // 请求后回顶
-        if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+        if (typeof $scrollToTop !== "undefined") $scrollToTop();
      })
      .catch((err) => {
        router.go(-1);
-        console.error("歌手信息获取失败：" + err);
-        $message.error("歌手信息获取失败");
+        console.error(t("general.message.acquisitionFailed"), err);
+        $message.error(t("general.message.acquisitionFailed"));
      });
-  } else {
-    $message.error("参数不完整");
  }
 };

@@ -193,13 +199,23 @@ const toLikeArtist = (data) => {
  likeArtist(type, data.id).then((res) => {
    if (res.code === 200) {
      $message.success(
-        `${data.name}${type == 1 ? "收藏成功" : "取消收藏成功"}`
+        `${data.name} ${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.success") })
+            : t("menu.cancelCollection", { name: t("general.dialog.success") })
+        }`
      );
      user.setUserArtistLists(() => {
        artistLikeBtn.value = isLikeOrDislike(artistId.value);
      });
    } else {
-      $message.error(`${data.name}${type == 1 ? "收藏失败" : "取消收藏失败"}`);
+      $message.error(
+        `${data.name} ${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.failed") })
+            : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+        }`
+      );
    }
  });
 };
--- a/src/views/Artist/songs.vue
+++ b/src/views/Artist/songs.vue
@@ -10,7 +10,7 @@
        round
        @click="router.push(`/all-songs?id=${artistId}&page=1`)"
      >
-        全部歌曲
+        {{ $t("general.name.allSong") }}
      </n-button>
    </n-space>
  </div>
@@ -19,7 +19,7 @@
 <script setup>
 import { getArtistSongs } from "@/api/artist";
 import { useRouter } from "vue-router";
-import { getSongTime } from "@/utils/timeTools.js";
+import { getSongTime } from "@/utils/timeTools";
 import DataLists from "@/components/DataList/DataLists.vue";
 const router = useRouter();

--- a/src/views/Artist/videos.vue
+++ b/src/views/Artist/videos.vue
@@ -13,7 +13,7 @@
 <script setup>
 import { getArtistVideos } from "@/api/artist";
 import { useRouter } from "vue-router";
-import { formatNumber, getSongTime } from "@/utils/timeTools.js";
+import { formatNumber, getSongTime } from "@/utils/timeTools";
 import VideoLists from "@/components/DataList/VideoLists.vue";
 import Pagination from "@/components/Pagination/index.vue";

@@ -59,8 +59,8 @@ const getArtistVideosData = (id, limit = 30, offset = 0) => {
    } else {
      $message.error("搜索内容为空");
    }
-    // 请求后回顶并结束加载条
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

--- a/src/views/Comment/CommentView.vue
+++ b/src/views/Comment/CommentView.vue
@@ -6,17 +6,18 @@
        class="goback"
        @click="router.push(`/comment?id=${music.getPlaySongData.id}&page=1`)"
        content-style="padding: 6px"
-        >前往当前播放歌曲
+      >
+        {{ $t("general.name.toCurrentlySong") }}
      </n-card>
    </Transition>
    <div class="title" v-if="songId">
-      <span class="key">全部评论</span>
+      <span class="key">{{ $t("general.name.allComments") }}</span>
      <n-card class="song">
        <SmallSongData :getDataByID="songId" />
      </n-card>
    </div>
    <div class="title" v-else>
-      <span class="key">缺少必要参数</span>
+      <span class="key">{{ $t("general.name.noKeywords") }}</span>
      <br />
      <n-button
        strong
@@ -24,12 +25,12 @@
        @click="router.go(-1)"
        style="margin-top: 20px"
      >
-        返回上一页
+        {{ $t("general.name.goBack") }}
      </n-button>
    </div>
    <div class="commentData" v-if="songId && commentData.allComments[0]">
      <div class="hotComments" v-if="commentData.hotComments[0]">
-        <n-h6 prefix="bar"> 热门评论 </n-h6>
+        <n-h6 prefix="bar"> {{ $t("general.name.hotComments") }} </n-h6>
        <div class="loading" v-if="!commentData.hotComments[0]">
          <n-skeleton text :repeat="3" />
          <n-skeleton text style="width: 60%" />
@@ -44,8 +45,8 @@
      </div>
      <div class="allComments" ref="allCommentsRef">
        <n-h6 prefix="bar">
-          全部评论
-          <span class="count">{{ commentsCount }} 条</span>
+          {{ $t("general.name.allComments") }}
+          <span class="count">{{ commentsCount }} +</span>
        </n-h6>
        <div class="loading" v-if="!commentData.allComments[0]">
          <n-skeleton text :repeat="3" />
@@ -73,9 +74,12 @@
 import { musicStore } from "@/store";
 import { useRouter } from "vue-router";
 import { getComment } from "@/api/comment";
+import { useI18n } from "vue-i18n";
 import SmallSongData from "@/components/DataList/SmallSongData.vue";
 import Comment from "@/components/Comment/index.vue";
 import Pagination from "@/components/Pagination/index.vue";
+
+const { t } = useI18n();
 const router = useRouter();
 const music = musicStore();

@@ -114,11 +118,11 @@ const getCommentData = (id, offset = 0) => {
      commentData.allComments = res.comments;
      commentsCount.value = res.total;
    } else {
-      $message.info("暂无评论");
+      $message.error(t("general.message.acquisitionFailed"));
      router.go(-1);
    }
-    // 滚动至顶部
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -134,7 +138,7 @@ const pageNumberChange = (val) => {
 };

 onMounted(() => {
-  $setSiteTitle("全部评论");
+  $setSiteTitle(t("general.name.allComments"));
  // 获取评论数据
  if (songId.value) getCommentData(songId.value, (pageNumber.value - 1) * 20);
 });
--- a/src/views/DailySongs/DailySongsView.vue
+++ b/src/views/DailySongs/DailySongsView.vue
@@ -6,9 +6,11 @@
        <n-text class="num" v-html="new Date().getDate()" />
      </div>
      <div class="right">
-        <n-gradient-text class="big" type="danger"> 每日推荐 </n-gradient-text>
+        <n-gradient-text class="big" type="danger">
+          {{ $t("home.modules.dailySongs.title") }}
+        </n-gradient-text>
        <n-text class="tip" :depth="3">
-          根据你的音乐口味生成 · 每天 6:00 更新
+          {{ $t("home.modules.dailySongs.subtitle") }}
        </n-text>
      </div>
    </div>
@@ -20,24 +22,28 @@
 import { getDailySongs } from "@/api/home";
 import { musicStore } from "@/store";
 import { CalendarTodayFilled } from "@vicons/material";
+import { useI18n } from "vue-i18n";
 import DataLists from "@/components/DataList/DataLists.vue";

+const { t } = useI18n();
 const music = musicStore();

 // 获取每日推荐数据
 const getDailySongsData = () => {
-  getDailySongs().then((res) => {
-    if (res.data.dailySongs) {
-      music.setDailySongs(res.data.dailySongs);
-    } else {
-      $message.error("每日推荐获取失败");
-    }
-  });
+  if (music.getDailySongs.length === 0) {
+    getDailySongs().then((res) => {
+      if (res.data.dailySongs) {
+        music.setDailySongs(res.data.dailySongs);
+      } else {
+        $message.error(t("general.message.acquisitionFailed"));
+      }
+    });
+  }
 };

 onMounted(() => {
-  $setSiteTitle("每日推荐");
-  if (music.getDailySongs.length === 0) getDailySongsData();
+  $setSiteTitle(t("home.modules.dailySongs.title"));
+  getDailySongsData();
 });
 </script>

--- a/src/views/Discover/artists.vue
+++ b/src/views/Discover/artists.vue
@@ -41,7 +41,7 @@
        :loading="loading"
        @click="loadingMore"
      >
-        加载更多
+        {{ $t("general.name.loadMore") }}
      </n-button>
    </n-space>
  </div>
@@ -49,14 +49,16 @@

 <script setup>
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 import { getArtistList } from "@/api/artist";
 import ArtistLists from "@/components/DataList/ArtistLists.vue";

+const { t } = useI18n();
 const router = useRouter();

 // 歌手标签数据
 const artistInitials = [
-  { key: "-1", value: "热门" },
+  { key: "-1", value: t("general.type.hot") },
  ...Array.from({ length: 26 }, (_, i) => String.fromCharCode(i + 65)).map(
    (v) => ({
      key: v,
@@ -73,24 +75,24 @@ const artistInitialChoose = ref(

 // 歌手分类数据
 const artistTypeNames = [
-  "全部",
-  "华语",
-  "华语男",
-  "华语女",
-  "华语组合",
-  "欧美",
-  "欧美男",
-  "欧美女",
-  "欧美组合",
-  "日本",
-  "日本男",
-  "日本女",
-  "日本组合",
-  "韩国",
-  "韩国男",
-  "韩国女",
-  "韩国组合",
-  "其他",
+  t("general.type.all"),
+  t("general.type.china"),
+  t("general.type.chinaMale"),
+  t("general.type.chinaFemale"),
+  t("general.type.chinaGroup"),
+  t("general.type.western"),
+  t("general.type.westernMale"),
+  t("general.type.westernFemale"),
+  t("general.type.westernGroup"),
+  t("general.type.japan"),
+  t("general.type.japanMale"),
+  t("general.type.japanFemale"),
+  t("general.type.japanGroup"),
+  t("general.type.korea"),
+  t("general.type.koreaMale"),
+  t("general.type.koreaFemale"),
+  t("general.type.koreaGroup"),
+  t("general.type.other"),
 ];
 const artistType = [-1, -1, 1, 2, 3, -1, 1, 2, 3, -1, 1, 2, 3, -1, 1, 2, 3, -1];
 const artistArea = [
@@ -132,7 +134,7 @@ const getArtistListData = (
      });
    } else {
      hasMore.value = false;
-      $message.error("歌手内容为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
  });
 };
@@ -167,7 +169,6 @@ const artistTypeChange = (index) => {
 const loadingMore = () => {
  loading.value = true;
  artistsOffset.value += 30;
-  if (artistsOffset.value >= 300) $message.info("太多了吧 😲");
  getArtistListData(
    artistType[artistTypeNamesChoose.value],
    artistArea[artistTypeNamesChoose.value],
@@ -200,7 +201,7 @@ watch(
 );

 onMounted(() => {
-  $setSiteTitle("发现 - 歌手");
+  $setSiteTitle(t("nav.discover") + " - " + t("nav.discoverChildren.artists"));
  // 获取歌手数据
  getArtistListData(
    artistType[artistTypeNamesChoose.value],
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -1,15 +1,15 @@
 <template>
  <div class="discover">
-    <n-text class="title">发现</n-text>
+    <n-text class="title">{{ $t("nav.discover") }}</n-text>
    <n-tabs
      class="main-tab"
      type="segment"
      @update:value="tabChange"
      v-model:value="tabValue"
    >
-      <n-tab name="playlists"> 歌单 </n-tab>
-      <n-tab name="toplists"> 排行榜 </n-tab>
-      <n-tab name="artists"> 歌手 </n-tab>
+      <n-tab name="playlists">{{ $t("nav.discoverChildren.playlists") }}</n-tab>
+      <n-tab name="toplists">{{ $t("nav.discoverChildren.toplists") }}</n-tab>
+      <n-tab name="artists">{{ $t("nav.discoverChildren.artists") }}</n-tab>
    </n-tabs>
    <main class="content">
      <router-view v-slot="{ Component }">
--- a/src/views/Discover/playlists.vue
+++ b/src/views/Discover/playlists.vue
@@ -8,7 +8,7 @@
        class="cat"
        icon-placement="right"
        round
-        @click="catModelShow = true"
+        @click="catModalShow = true"
      >
        <template #icon>
          <n-icon class="up" :component="ChevronRightRound" />
@@ -17,13 +17,13 @@
      </n-button>
      <n-modal
        class="s-modal"
-        v-model:show="catModelShow"
+        v-model:show="catModalShow"
        preset="card"
-        title="歌单分类"
+        :title="$t('general.name.playlistType')"
        :bordered="false"
      >
        <template #header>
-          歌单分类
+          {{ $t("general.name.playlistType") }}
          <n-tag
            round
            class="tag"
@@ -37,7 +37,7 @@
            :bordered="false"
            @click="changeTagName('全部歌单')"
          >
-            全部歌单
+            {{ $t("general.name.allPLaylist") }}
          </n-tag>
        </template>
        <n-scrollbar>
@@ -76,7 +76,9 @@
              </n-list-item>
            </n-list>
          </div>
-          <div class="error" v-else>分类数据获取失败</div>
+          <div class="error" v-else>
+            {{ $t("general.message.acquisitionFailed") }}
+          </div>
        </n-scrollbar>
      </n-modal>
      <!-- 精品歌单开关 -->
@@ -84,7 +86,7 @@
        v-if="getHaveHqPlaylists(music.highqualityCatList, catName)"
        align="center"
      >
-        <n-text>精品歌单</n-text>
+        <n-text>{{ $t("general.name.bestPlaylist") }}</n-text>
        <n-switch
          v-model:value="hqPLayListOpen"
          @update:value="hqPLayListChange"
@@ -116,7 +118,7 @@
          }
        "
      >
-        加载更多
+        {{ $t("general.name.loadMore") }}
      </n-button>
    </n-space>
  </div>
@@ -127,15 +129,17 @@ import { ChevronRightRound, LocalFireDepartmentRound } from "@vicons/material";
 import { useRouter } from "vue-router";
 import { musicStore } from "@/store";
 import { getHighqualityPlaylist, getTopPlaylist } from "@/api/playlist";
-import { formatNumber } from "@/utils/timeTools.js";
+import { formatNumber } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 import Pagination from "@/components/Pagination/index.vue";

+const { t } = useI18n();
 const router = useRouter();
 const music = musicStore();

 // 分类数据
-const catModelShow = ref(false);
+const catModalShow = ref(false);
 const catName = ref(
  router.currentRoute.value.query.cat
    ? router.currentRoute.value.query.cat
@@ -206,10 +210,10 @@ const getPlaylistData = (cat = "全部歌单", limit = 30, offset = 0) => {
        });
      });
    } else {
-      $message.error("歌单列表为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
    // 请求后回顶
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -240,7 +244,7 @@ const getHqPlaylistData = (cat = "全部歌单", limit = 30) => {
      });
    } else {
      hasMore.value = false;
-      $message.error("精品歌单列表为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
  });
 };
@@ -255,7 +259,7 @@ const changeTagName = (name) => {
      page: 1,
    },
  });
-  catModelShow.value = false;
+  catModalShow.value = false;
 };

 // 排序方式变化
@@ -300,6 +304,7 @@ watch(
      : false;
    if (val.name == "dsc-playlists") {
      if (hqPLayListOpen.value) {
+        playlistsData.value = [];
        getHqPlaylistData(catName.value);
      } else {
        pageNumber.value = val.query.page ? Number(val.query.page) : 1;
@@ -314,7 +319,7 @@ watch(
 );

 onMounted(() => {
-  $setSiteTitle("发现 - 歌单");
+  $setSiteTitle(t("nav.discover") + " - " + t("general.name.playlist"));
  // 获取歌单分类
  if (!music.catList.sub || !music.highqualityCatList[0])
    music.setCatList(true);
--- a/src/views/Discover/toplists.vue
+++ b/src/views/Discover/toplists.vue
@@ -1,6 +1,8 @@
 <template>
  <div class="toplists">
-    <n-divider v-if="toplistData.officialList[0]">官方榜</n-divider>
+    <n-divider v-if="toplistData.officialList[0]">
+      {{ $t("nav.officialList") }}
+    </n-divider>
    <Transition mode="out-in">
      <n-grid
        class="official"
@@ -49,7 +51,7 @@
        </n-gi>
      </n-grid>
    </Transition>
-    <n-divider>全球榜</n-divider>
+    <n-divider>{{ $t("nav.globalList") }}</n-divider>
    <CoverLists :listData="toplistData.globalList" listType="topList" />
  </div>
 </template>
@@ -57,9 +59,11 @@
 <script setup>
 import { getToplist } from "@/api/album";
 import { useRouter } from "vue-router";
-import { formatNumber } from "@/utils/timeTools.js";
+import { formatNumber } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";

+const { t } = useI18n();
 const router = useRouter();

 // 排行榜数据
@@ -91,13 +95,13 @@ const getToplistData = () => {
      });
      console.log(toplistData);
    } else {
-      $message.error("排行榜获取失败");
+      $message.error(t("general.message.acquisitionFailed"));
    }
  });
 };

 onMounted(() => {
-  $setSiteTitle("发现 - 排行榜");
+  $setSiteTitle(t("nav.discover") + " - " + t("nav.discoverChildren.toplists"));
  getToplistData();
 });
 </script>
--- a/src/views/History/HistoryView.vue
+++ b/src/views/History/HistoryView.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="history">
    <div class="title" v-if="music.getPlayHistory[0]">
-      <span class="key">播放历史</span>
+      <span class="key">{{ $t("nav.avatar.history") }}</span>
    </div>
    <div class="title" v-else>
-      <span class="key">暂无播放历史</span>
+      <span class="key">{{ $t("other.noHistory") }}</span>
      <br />
      <n-button
        strong
@@ -12,7 +12,7 @@
        @click="router.go(-1)"
        style="margin-top: 20px"
      >
-        返回上一页
+        {{ $t("general.name.goBack") }}
      </n-button>
    </div>
    <DataLists
@@ -20,7 +20,9 @@
      :listData="music.getPlayHistory"
    />
    <n-divider v-if="music.getPlayHistory[0]" class="tip" dashed>
-      <n-text :depth="3" style="font-size: 12px">仅显示最近 100 首</n-text>
+      <n-text :depth="3" style="font-size: 12px">
+        {{ $t("other.justShow", { num: 100 }) }}
+      </n-text>
    </n-divider>
  </div>
 </template>
@@ -28,13 +30,15 @@
 <script setup>
 import { musicStore } from "@/store";
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 import DataLists from "@/components/DataList/DataLists.vue";

+const { t } = useI18n();
 const music = musicStore();
 const router = useRouter();

 onMounted(() => {
-  $setSiteTitle("播放历史");
+  $setSiteTitle(t("nav.avatar.history"));
 });
 </script>

--- a/src/views/Home/HomeView.vue
+++ b/src/views/Home/HomeView.vue
@@ -2,14 +2,24 @@
  <div class="home">
    <Banner v-if="setting.bannerShow" />
    <!-- 个性化推荐 -->
-    <n-h3 class="title" prefix="bar"> 专属推荐 </n-h3>
-    <n-grid class="recommendation" cols="4" item-responsive x-gap="20">
-      <n-grid-item span="1 950:2">
+    <n-h3 class="title" prefix="bar">{{ $t("home.title.exclusive") }}</n-h3>
+    <n-grid class="recommend" :x-gap="20" :cols="2">
+      <n-gi class="rec-left">
+        <!-- 每日推荐 -->
        <PaDailySongs />
-      </n-grid-item>
-      <n-grid-item span="3 950:2">
+        <!-- 其他推荐 -->
+        <n-grid class="rec-func" x-gap="12" :cols="2">
+          <n-gi>
+            <PaRadar />
+          </n-gi>
+          <n-gi>
+            <PaLikeSongs />
+          </n-gi>
+        </n-grid>
+      </n-gi>
+      <n-gi class="rec-right">
        <PaPersonalFm />
-      </n-grid-item>
+      </n-gi>
    </n-grid>
    <!-- 公共推荐 -->
    <PaPlayLists />
@@ -26,11 +36,16 @@ import PaArtists from "@/components/Personalized/PaArtists.vue";
 import PaAlbum from "@/components/Personalized/PaAlbum.vue";
 import PaDailySongs from "@/components/Personalized/PaDailySongs.vue";
 import PaPersonalFm from "@/components/Personalized/PaPersonalFm.vue";
+import PaRadar from "@/components/Personalized/PaRadar.vue";
+import PaLikeSongs from "@/components/Personalized/PaLikeSongs.vue";

 const setting = settingStore();

 onMounted(() => {
-  $setSiteTitle("SPlayer");
+  if (typeof $setSiteTitle !== "undefined")
+    $setSiteTitle(import.meta.env.VITE_SITE_TITLE);
+  // 回顶
+  if (typeof $scrollToTop !== "undefined") $scrollToTop();
 });
 </script>

@@ -42,10 +57,25 @@ onMounted(() => {
    justify-content: space-between;
    padding-left: 16px;
  }
-  :deep(.recommendation) {
-    @media (max-width: 750px) {
+  .recommend {
+    @media (max-width: 850px) {
      grid-template-columns: repeat(1, minmax(0px, 1fr)) !important;
      gap: 20px 0 !important;
+      .rec-left {
+        display: flex;
+        flex-direction: column-reverse;
+        .padailysongs {
+          margin-bottom: 0;
+          margin-top: 20px;
+        }
+      }
+    }
+    .rec-left,
+    .rec-right {
+      height: 200px;
+    }
+    .rec-func {
+      height: 70px;
    }
  }
 }
--- a/src/views/Login/LoginView.vue
+++ b/src/views/Login/LoginView.vue
@@ -2,7 +2,7 @@
  <div class="login">
    <div class="title">
      <img src="/images/logo/favicon.png" alt="logo" />
-      <span>登录云音乐</span>
+      <n-text>{{ $t("login.login", { name: siteTitle }) }}</n-text>
    </div>
    <n-tabs
      animated
@@ -17,7 +17,7 @@
      }"
      @update:value="tabChange"
    >
-      <n-tab-pane name="qr" tab="二维码登录">
+      <n-tab-pane name="qr" :tab="$t('login.qr')">
        <n-card class="qr-img">
          <n-skeleton
            v-if="!qrImg"
@@ -37,14 +37,14 @@
        </n-card>
        <span class="tip">{{ qrText }}</span>
      </n-tab-pane>
-      <n-tab-pane name="phone" tab="手机号登录">
+      <n-tab-pane name="phone" :tab="$t('login.phone')">
        <n-alert
          style="width: 100%; margin-top: -20px; margin-bottom: 12px"
          type="warning"
        >
-          该登录方式暂时无法使用
+          {{ $t("login.canNotUse") }}
        </n-alert>
-        <n-form
+        <!-- <n-form
          class="phone"
          ref="phoneFormRef"
          :model="phoneFormData"
@@ -83,12 +83,19 @@
          </n-form-item>
          <n-form-item>
            <n-button style="width: 100%" type="primary" @click="phoneLogin">
-              登录
+              {{$t("login.login")}}
            </n-button>
          </n-form-item>
-        </n-form>
+        </n-form> -->
+      </n-tab-pane>
+      <n-tab-pane name="email" :tab="$t('login.email')">
+        <n-alert
+          style="width: 100%; margin-top: -20px; margin-bottom: 12px"
+          type="warning"
+        >
+          {{ $t("login.canNotUse") }}
+        </n-alert>
      </n-tab-pane>
-      <n-tab-pane name="email" tab="邮箱登录"> 还没搞 </n-tab-pane>
    </n-tabs>
  </div>
 </template>
@@ -105,18 +112,21 @@ import {
 } from "@/api/login";
 import { useRouter } from "vue-router";
 import { PhoneAndroidRound, PasswordRound } from "@vicons/material";
-import { formRules } from "@/utils/formRules.js";
+import { formRules } from "@/utils/formRules";
+import { useI18n } from "vue-i18n";
 import QrcodeVue from "qrcode.vue";

+const { t } = useI18n();
 const router = useRouter();
 const user = userStore();
 const music = musicStore();
 const setting = settingStore();
+const siteTitle = import.meta.env.VITE_SITE_TITLE;
 const { numberRule, mobileRule } = formRules();

 // 二维码数据
 const qrImg = ref(null);
-const qrText = ref("请打开云音乐 APP 扫码登录");
+const qrText = ref(t("login.qrText1"));

 // 手机号登录数据
 const phoneFormRef = ref(null);
@@ -147,15 +157,15 @@ const saveLoginData = (data) => {
    if (res.data.profile) {
      user.setUserData(res.data.profile);
      user.userLogin = true;
-      qrText.value = "登录成功";
-      $message.success("登录成功");
+      qrText.value = t("login.qrText4");
+      $message.success(t("login.qrText4"));
      // 自动签到
      if ($signIn) $signIn();
      clearInterval(qrCheckInterval.value);
-      router.go(-1);
+      router.push("/user");
    } else {
      user.userLogOut();
-      $message.error("登录出错，请重试");
+      $message.error(t("login.qrText5"));
      getQrKeyData();
    }
  });
@@ -166,9 +176,9 @@ const getQrKeyData = () => {
  // 检测是否登录
  getLoginState().then((res) => {
    if (res.data.profile && window.localStorage.getItem("cookie")) {
-      $message.info("已登录，请勿重复登录");
+      $message.info(t("login.loggedIn"));
      user.userLogin = true;
-      router.go(-1);
+      router.push("/user");
    } else {
      user.userLogOut();
      clearInterval(qrCheckInterval.value);
@@ -178,7 +188,7 @@ const getQrKeyData = () => {
          qrImg.value = `https://music.163.com/login?codekey=${res.data.unikey}`;
          checkQrState(res.data.unikey);
        } else {
-          $message.error("登录二维码生成失败");
+          $message.error(t("login.qrText6"));
        }
      });
    }
@@ -194,19 +204,16 @@ const checkQrState = (key) => {
      if (res.code == 800) {
        getQrKeyData();
        loginStateMessage.value = null;
-        qrText.value = "当前二维码已失效，请重新扫码";
+        qrText.value = t("login.qrText2");
      } else if (res.code == 801) {
        loginStateMessage.value = null;
-        qrText.value = "请打开云音乐 APP 扫码登录";
+        qrText.value = t("login.qrText1");
      } else if (res.code == 802) {
-        qrText.value = "扫描成功，请在客户端确认登录";
+        qrText.value = t("login.qrText3");
        if (!loginStateMessage.value) {
-          loginStateMessage.value = $message.loading(
-            "扫描成功，请在客户端确认登录",
-            {
-              duration: 0,
-            }
-          );
+          loginStateMessage.value = $message.loading(t("login.qrText3"), {
+            duration: 0,
+          });
        }
      } else if (res.code == 803) {
        loginStateMessage.value.destroy();
@@ -291,7 +298,7 @@ const tabChange = (val) => {
 };

 onMounted(() => {
-  $setSiteTitle("登录");
+  $setSiteTitle(t("login.login"));
  // 隐藏控制条
  music.setPlayBarState(false);
  // 获取二维码登录 key
--- a/src/views/NewAlbum/NewAlbumView.vue
+++ b/src/views/NewAlbum/NewAlbumView.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="new-album">
    <div class="title">
-      <span class="key">全部新碟</span>
+      <span class="key">{{ $t("home.title.newAlbum") }}</span>
    </div>
    <n-space class="category">
      <n-tag
@@ -30,10 +30,12 @@
 <script setup>
 import { getAlbumNew } from "@/api/album";
 import { useRouter } from "vue-router";
-import { getLongTime } from "@/utils/timeTools.js";
+import { getLongTime } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 import Pagination from "@/components/Pagination/index.vue";

+const { t } = useI18n();
 const router = useRouter();

 // 新碟数据
@@ -52,24 +54,24 @@ const albumAreaChoose = ref(
 );
 const albumArea = [
  {
-    label: "全部",
+    label: t("general.type.all"),
    value: "ALL",
  },
  {
-    label: "华语",
+    label: t("general.type.china"),
    value: "ZH",
  },
  {
-    label: "欧美",
+    label: t("general.type.western"),
    value: "EA",
  },
  {
-    label: "韩国",
-    value: "KR",
+    label: t("general.type.japan"),
+    value: "JP",
  },
  {
-    label: "日本",
-    value: "JP",
+    label: t("general.type.korea"),
+    value: "KR",
  },
 ];

@@ -92,10 +94,10 @@ const getAlbumNewData = (area, limit = 30, offset = 0) => {
        });
      });
    } else {
-      $message.error("全部新碟为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
-    // 请求后回顶并结束加载条
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -149,7 +151,7 @@ const changeArea = (area) => {
 };

 onMounted(() => {
-  $setSiteTitle("全部新碟");
+  $setSiteTitle(t("home.title.newAlbum"));
  getAlbumNewData(
    albumAreaChoose.value,
    pagelimit.value,
--- a/src/views/PlayList/PlayListView.vue
+++ b/src/views/PlayList/PlayListView.vue
@@ -2,93 +2,99 @@
  <div class="playlist" v-if="playListDetail">
    <div class="left">
      <div class="cover">
-        <n-avatar
+        <n-image
+          show-toolbar-tooltip
          class="coverImg"
-          :src="
-            playListDetail.coverImgUrl
-              ? playListDetail.coverImgUrl.replace(/^http:/, 'https:') +
-                '?param=1024y1024'
-              : null
-          "
+          :src="getCoverUrl(playListDetail.coverImgUrl, 1024)"
+          :previewed-img-props="{ style: { borderRadius: '8px' } }"
+          :preview-src="getCoverUrl(playListDetail.coverImgUrl)"
+          fallback-src="/images/pic/default.png"
+        />
+        <n-image
+          preview-disabled
+          class="shadow"
+          :src="getCoverUrl(playListDetail.coverImgUrl, 1024)"
          fallback-src="/images/pic/default.png"
        />
-        <img src="/images/pic/album.png" class="album" alt="album" />
      </div>
-      <div class="intr">
-        <span class="name">歌单简介</span>
-        <span class="desc text-hidden">
-          {{
-            playListDetail.description
-              ? playListDetail.description
-              : "太懒了吧，连简介都不写"
-          }}
-        </span>
-        <n-button
-          block
-          strong
-          secondary
-          v-if="playListDetail?.description?.length > 70"
-          @click="playListDescShow = true"
-        >
-          全部简介
-        </n-button>
-        <n-modal
-          class="s-modal"
-          v-model:show="playListDescShow"
-          preset="card"
-          title="歌单简介"
-          :bordered="false"
-        >
-          <n-scrollbar>
-            <n-text
-              v-html="playListDetail.description.replace(/\n/g, '<br>')"
-            />
-          </n-scrollbar>
-        </n-modal>
-      </div>
-      <n-space class="tag" v-if="playListDetail.tags">
-        <n-tag
-          class="tags"
-          size="large"
-          round
-          :bordered="false"
-          v-for="item in playListDetail.tags"
-          :key="item"
-          @click="router.push(`/discover/playlists?cat=${item}&page=1`)"
-        >
-          {{ item }}
-        </n-tag>
-      </n-space>
-      <!-- <div class="control" v-if="true">
-        <n-space>
-          <n-button strong secondary round>
-            <template #icon>
-              <n-icon :component="EditNoteRound" />
-            </template>
-            编辑
-          </n-button>
-          <n-button strong secondary round type="primary">
-            <template #icon>
-              <n-icon :component="DeleteRound" />
-            </template>
+      <div class="meta">
+        <div class="title">
+          <n-text class="name text-hidden">{{ playListDetail.name }}</n-text>
+          <n-text class="creator">{{ playListDetail.creator.nickname }}</n-text>
+        </div>
+        <div class="intr">
+          <span class="name">{{
+            $t("general.name.desc", { name: $t("general.name.playlist") })
+          }}</span>
+          <span class="desc text-hidden">
+            {{
+              playListDetail.description
+                ? playListDetail.description
+                : $t("other.noDesc")
+            }}
+          </span>
+          <n-button
+            class="all-desc"
+            block
+            strong
+            secondary
+            v-if="playListDetail?.description?.length > 70"
+            @click="playListDescShow = true"
+          >
+            {{ $t("general.name.allDesc") }}
          </n-button>
+        </div>
+        <n-space class="tag" v-if="playListDetail.tags">
+          <n-tag
+            class="tags"
+            round
+            :bordered="false"
+            v-for="item in playListDetail.tags"
+            :key="item"
+            @click="router.push(`/discover/playlists?cat=${item}&page=1`)"
+          >
+            {{ item }}
+          </n-tag>
        </n-space>
-      </div> -->
+        <n-space class="control">
+          <n-button strong secondary round type="primary" @click="playAllSong">
+            <template #icon>
+              <n-icon :component="MusicList" />
+            </template>
+            {{ $t("general.name.play") }}
+          </n-button>
+          <n-dropdown
+            placement="right-start"
+            trigger="click"
+            :show-arrow="true"
+            :options="dropdownOptions"
+          >
+            <n-button strong secondary circle>
+              <template #icon>
+                <n-icon :component="More" />
+              </template>
+            </n-button>
+          </n-dropdown>
+        </n-space>
+      </div>
    </div>
    <div class="right">
      <div class="meta">
-        <span class="name">{{ playListDetail.name }}</span>
-        <span class="creator">{{ playListDetail.creator.nickname }}</span>
-        <div class="time">
-          <div class="createTime">
-            <span class="num">创建时间：</span>
-            {{ getLongTime(playListDetail.createTime) }}
+        <n-text class="name">{{ playListDetail.name }}</n-text>
+        <n-text class="creator">
+          <n-icon :depth="3" :component="People" />
+          {{ playListDetail.creator.nickname }}
+        </n-text>
+        <n-space class="time">
+          <div class="num">
+            <n-icon :depth="3" :component="Newlybuild" />
+            <n-text v-html="getLongTime(playListDetail.createTime)" />
          </div>
-          <div class="updateTime">
-            <span class="num">更新时间：</span>
-            {{ getLongTime(playListDetail.updateTime) }}
+          <div class="num">
+            <n-icon :depth="3" :component="Write" />
+            <n-text v-html="getLongTime(playListDetail.updateTime)" />
          </div>
-        </div>
+        </n-space>
      </div>
      <DataLists :listData="playListData" />
      <Pagination
@@ -99,15 +105,29 @@
        @pageSizeChange="pageSizeChange"
        @pageNumberChange="pageNumberChange"
      />
+      <!-- 歌单简介 -->
+      <n-modal
+        class="s-modal"
+        v-model:show="playListDescShow"
+        preset="card"
+        :title="$t('general.name.desc', { name: $t('general.name.playlist') })"
+        :bordered="false"
+      >
+        <n-scrollbar>
+          <n-text v-html="playListDetail.description.replace(/\n/g, '<br>')" />
+        </n-scrollbar>
+      </n-modal>
    </div>
  </div>
  <div class="title" v-else-if="!playListId || !loadingState">
    <span class="key">{{
-      loadingState ? "参数不完整" : "歌单信息加载失败"
+      loadingState
+        ? $t("general.name.noKeywords")
+        : $t("general.message.acquisitionFailed")
    }}</span>
    <br />
    <n-button strong secondary @click="router.go(-1)" style="margin-top: 20px">
-      返回上一页
+      {{ $t("general.name.goBack") }}
    </n-button>
  </div>
  <div class="loading" v-else>
@@ -124,17 +144,38 @@
 </template>

 <script setup>
-import { getPlayListDetail, getAllPlayList } from "@/api/playlist";
+import { NIcon, NAvatar, NText } from "naive-ui";
+import {
+  getPlayListDetail,
+  getAllPlayList,
+  delPlayList,
+  likePlaylist,
+} from "@/api/playlist";
 import { useRouter } from "vue-router";
-// import { userStore, musicStore } from "@/store";
-import { getSongTime, getLongTime } from "@/utils/timeTools.js";
-// import { EditNoteRound, DeleteRound } from "@vicons/material";
+import { userStore, musicStore, settingStore } from "@/store";
+import { getSongTime, getLongTime } from "@/utils/timeTools";
+import {
+  MusicList,
+  LinkTwo,
+  More,
+  DeleteFour,
+  Like,
+  Unlike,
+  Newlybuild,
+  Write,
+  People,
+} from "@icon-park/vue-next";
+import { useI18n } from "vue-i18n";
 import DataLists from "@/components/DataList/DataLists.vue";
 import Pagination from "@/components/Pagination/index.vue";
+import getCoverUrl from "@/utils/getCoverUrl";
+// import SpecialPlayLists from "./SpecialPlayLists.json";

+const { t } = useI18n();
 const router = useRouter();
-// const user = userStore();
-// const music = musicStore();
+const user = userStore();
+const music = musicStore();
+const setting = settingStore();

 // 歌单数据
 const playListId = ref(router.currentRoute.value.query.id);
@@ -150,6 +191,95 @@ const pageNumber = ref(
 );
 const totalCount = ref(0);

+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { style: { transform: "translateX(2px)" } },
+      {
+        default: () => icon,
+      }
+    );
+  };
+};
+
+// 判断收藏还是取消
+const isLikeOrDislike = (id) => {
+  const playlists = user.getUserPlayLists.like;
+  if (playlists.length) {
+    return !playlists.some((item) => item.id === Number(id));
+  }
+  return true;
+};
+
+// 判断是否可删除
+const isCanDelete = (id) => {
+  const playlists = user.getUserPlayLists.own;
+  if (playlists.length) {
+    return playlists.some((item) => item.id === Number(id));
+  }
+  return false;
+};
+
+// 歌单下拉菜单数据
+const dropdownOptions = ref([]);
+
+// 更改歌单下拉菜单数据
+const setDropdownOptions = () => {
+  dropdownOptions.value = [
+    {
+      key: "copy",
+      label: t("menu.copy", {
+        name: t("general.name.playlist"),
+        other: t("general.name.link"),
+      }),
+      props: {
+        onClick: () => {
+          if (navigator.clipboard) {
+            try {
+              navigator.clipboard.writeText(
+                `https://music.163.com/#/playlist?id=${playListId.value}`
+              );
+              $message.success(t("general.message.copySuccess"));
+            } catch (err) {
+              console.error(t("general.message.copyFailure"), err);
+              $message.error(t("general.message.copyFailure"));
+            }
+          } else {
+            $message.error(t("general.message.notSupported"));
+          }
+        },
+      },
+      icon: renderIcon(h(LinkTwo)),
+    },
+    {
+      key: "del",
+      label: t("menu.del"),
+      show: user.userLogin && isCanDelete(playListId.value),
+      props: {
+        onClick: () => {
+          toDelPlayList(playListDetail.value);
+        },
+      },
+      icon: renderIcon(h(DeleteFour)),
+    },
+    {
+      key: "like",
+      label: isLikeOrDislike(playListId.value)
+        ? t("menu.collection", { name: t("general.name.playlist") })
+        : t("menu.cancelCollection", { name: t("general.name.playlist") }),
+      show: user.userLogin && !isCanDelete(playListId.value),
+      props: {
+        onClick: () => {
+          toChangeLike(playListId.value);
+        },
+      },
+      icon: renderIcon(h(isLikeOrDislike(playListId.value) ? Like : Unlike)),
+    },
+  ];
+};
+
 // 获取歌单信息
 const getPlayListDetailData = (id) => {
  getPlayListDetail(id)
@@ -159,12 +289,16 @@ const getPlayListDetailData = (id) => {
      totalCount.value = res.playlist.trackCount;
      // 歌单信息
      playListDetail.value = res.playlist;
-      $setSiteTitle(res.playlist.name + " - 歌单");
+      $setSiteTitle(res.playlist.name + " - " + t("general.name.playlist"));
    })
    .catch((err) => {
-      $setSiteTitle("歌单详情");
+      $setSiteTitle(t("general.name.playlist"));
      loadingState.value = false;
-      console.error("获取歌单信息失败：" + err);
+      console.error(
+        $message.error(t("general.message.acquisitionFailed")),
+        err
+      );
+      $message.error(t("general.message.acquisitionFailed"));
    });
 };

@@ -190,13 +324,121 @@ const getAllPlayListData = (id, limit = 30, offset = 0) => {
        });
      });
    } else {
-      $message.error("获取歌单内歌曲失败");
+      $message.error(t("general.message.acquisitionFailed"));
    }
    // 请求后回顶
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

+// 播放歌单所有歌曲
+const playAllSong = () => {
+  try {
+    // 获取元素
+    const songDom = document.getElementById("datalists").firstElementChild;
+    const allSongDom = document.querySelectorAll("#datalists > *");
+    // 是否有元素存在 play
+    let isHasPlay = false;
+    // 遍历
+    allSongDom.forEach((child) => {
+      if (child.classList.contains("play")) {
+        isHasPlay = true;
+      }
+    });
+    if (!isHasPlay) {
+      // 双击操作
+      const event = new MouseEvent("dblclick", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      });
+      // 双击或单击
+      if (setting.listClickMode === "dblclick") {
+        songDom.dispatchEvent(event);
+      } else if (setting.listClickMode === "click") {
+        songDom.click();
+      }
+    } else {
+      music.setPlayState(true);
+    }
+  } catch (err) {
+    console.error($message.error(t("general.message.operationFailed")), err);
+    $message.error($message.error(t("general.message.operationFailed")));
+  }
+};
+
+// 删除歌单
+const toDelPlayList = (data) => {
+  if (data.id === user.getUserPlayLists?.own[0].id) {
+    $message.warning(t("menu.unableToDelete"));
+    return false;
+  }
+  $dialog.warning({
+    class: "s-dialog",
+    title: t("general.dialog.delete"),
+    content: t("menu.delQuestion", {
+      name: data.name,
+    }),
+    positiveText: t("general.dialog.delete"),
+    negativeText: t("general.dialog.cancel"),
+    onPositiveClick: () => {
+      delPlayList(data.id).then((res) => {
+        if (res.code === 200) {
+          $message.success(t("general.message.deleteSuccess"));
+          user.setUserPlayLists();
+          router.push("/user/playlists");
+        }
+      });
+    },
+  });
+};
+
+// 收藏/取消收藏
+const toChangeLike = async (id) => {
+  const type = isLikeOrDislike(id) ? 1 : 2;
+  const likeMsg = t("general.name.playlist");
+  const isThereASpace = setting.language === "zh-CN" ? "" : " ";
+  try {
+    const res = await likePlaylist(type, id);
+    if (res.code === 200) {
+      $message.success(
+        `${likeMsg + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.success") })
+            : t("menu.cancelCollection", { name: t("general.dialog.success") })
+        }`
+      );
+      user.setUserPlayLists(() => {
+        setDropdownOptions();
+      });
+    } else {
+      $message.error(
+        `${likeMsg + isThereASpace}${
+          type == 1
+            ? t("menu.collection", { name: t("general.dialog.failed") })
+            : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+        }`
+      );
+    }
+  } catch (err) {
+    $message.error(
+      `${likeMsg + isThereASpace}${
+        type == 1
+          ? t("menu.collection", { name: t("general.dialog.failed") })
+          : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+      }`
+    );
+    console.error(
+      `${likeMsg + isThereASpace}${
+        type == 1
+          ? t("menu.collection", { name: t("general.dialog.failed") })
+          : t("menu.cancelCollection", { name: t("general.dialog.failed") })
+      }`,
+      err
+    );
+  }
+};
+
 onMounted(() => {
  if (playListId.value) {
    getPlayListDetailData(playListId.value);
@@ -205,6 +447,17 @@ onMounted(() => {
      pagelimit.value,
      (pageNumber.value - 1) * pagelimit.value
    );
+    if (
+      user.userLogin &&
+      !user.getUserPlayLists.has &&
+      !user.getUserPlayLists.isLoading
+    ) {
+      user.setUserPlayLists(() => {
+        setDropdownOptions();
+      });
+    } else {
+      setDropdownOptions();
+    }
  }
 });

@@ -272,53 +525,104 @@ watch(
    align-items: flex-start;
    position: sticky;
    top: 24px;
+    @media (max-width: 990px) {
+      margin-right: 0;
+      width: 30vw;
+    }
    .cover {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
-      // box-shadow: 0 0 16px 0px rgb(0 0 0 / 20%);
-      .n-avatar {
-        border-radius: 8px;
-        width: 80%;
-        height: 80%;
-      }
-      .album {
-        height: 100%;
-        position: absolute;
-        top: 0;
-        right: 4%;
-      }
-    }
-    .intr {
-      margin-top: 24px;
      width: 80%;
-      padding-left: 4px;
-      .name {
-        display: block;
-        font-size: 20px;
-        font-weight: bold;
-        margin-bottom: 12px;
+      height: 80%;
+      border-radius: 8px;
+      position: relative;
+      transition: transform 0.3s;
+      &:active {
+        transform: scale(0.95);
      }
-      .desc {
-        -webkit-line-clamp: 4;
-        line-height: 26px;
-        margin-bottom: 16px;
+      .coverImg {
+        border-radius: 8px;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        z-index: 1;
+        :deep(img) {
+          width: 100%;
+        }
+      }
+      .shadow {
+        position: absolute;
+        top: 12px;
+        height: 100%;
+        width: 100%;
+        filter: blur(16px) opacity(0.6);
+        transform: scale(0.92, 0.96);
+        z-index: 0;
+        background-size: cover;
+        aspect-ratio: 1/1;
      }
    }
-    .tag {
-      margin-top: 20px;
-      .tags {
-        cursor: pointer;
-        transition: all 0.3s;
-        &:hover {
-          background-color: var(--main-second-color);
-          color: var(--main-color);
+    .meta {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      .title {
+        display: none;
+        flex-direction: column;
+        margin-top: 0;
+        .name {
+          font-size: 28px;
+          font-weight: bold;
+          -webkit-line-clamp: 2;
        }
-        &:active {
-          transform: scale(0.95);
+        .creator {
+          margin-top: 6px;
+          font-size: 16px;
+          opacity: 0.8;
        }
      }
+      .intr {
+        margin-top: 24px;
+        width: 80%;
+        padding-left: 4px;
+        .name {
+          display: block;
+          font-size: 20px;
+          font-weight: bold;
+          margin-bottom: 12px;
+          @media (max-width: 990px) {
+            font-size: 18px;
+          }
+        }
+        .desc {
+          -webkit-line-clamp: 4;
+          line-height: 26px;
+          margin-bottom: 16px;
+        }
+      }
+      .tag {
+        margin-top: 20px;
+        .tags {
+          line-height: 0;
+          font-size: 13px;
+          cursor: pointer;
+          transition: all 0.3s;
+          &:hover {
+            background-color: var(--main-second-color);
+            color: var(--main-color);
+          }
+          &:active {
+            transform: scale(0.95);
+          }
+        }
+      }
+      .control {
+        margin-top: 20px;
+      }
    }
  }
  .right {
@@ -333,6 +637,8 @@ watch(
        font-weight: bold;
      }
      .creator {
+        display: flex;
+        align-items: center;
        margin-top: 6px;
        font-size: 16px;
        opacity: 0.8;
@@ -342,6 +648,9 @@ watch(
          opacity: 1;
          color: var(--main-color);
        }
+        .n-icon {
+          margin-right: 6px;
+        }
      }
      .time {
        margin-top: 8px;
@@ -353,10 +662,13 @@ watch(
          align-items: flex-start;
        }
        .num {
-          color: #999;
-        }
-        div {
-          margin-right: 12px;
+          // color: #999;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          .n-icon {
+            margin-right: 6px;
+          }
        }
      }
    }
@@ -374,22 +686,110 @@ watch(
  @media (max-width: 768px) {
    flex-direction: column;
    .left {
-      margin-bottom: 12px;
-      position: static;
-      width: 60vw;
+      position: relative;
+      top: 0;
+      width: 100%;
+      height: 40vw;
      max-width: none;
-      .intr,
-      .tag {
-        display: none;
+      display: flex;
+      flex-direction: row;
+      .cover {
+        height: 100%;
+        min-width: 40vw;
+        margin-right: 30px;
+      }
+      .meta {
+        .title {
+          display: flex;
+          margin-bottom: 16px;
+          .name {
+            font-size: 25px;
+          }
+          .creator {
+            font-size: 15px;
+          }
+        }
+        .intr {
+          margin-top: 0;
+          padding-left: 0;
+          .name,
+          .all-desc {
+            display: none;
+          }
+          .desc {
+            -webkit-line-clamp: 2;
+            margin-bottom: 0;
+          }
+        }
+        .control {
+          position: absolute;
+          left: 0;
+          bottom: -60px;
+        }
      }
    }
    .right {
+      margin-top: 80px;
      .meta {
-        .name {
-          font-size: 26px;
+        display: none;
+      }
+    }
+  }
+  @media (max-width: 540px) {
+    .left {
+      .cover {
+        margin-right: 20px;
+      }
+      .meta {
+        .title {
+          .name {
+            font-size: 24px;
+          }
+        }
+        .intr,
+        .tag {
+          display: none !important;
+        }
+        .control {
+          position: static;
        }
      }
    }
+    .right {
+      margin-top: 30px;
+    }
+  }
+  @media (max-width: 520px) {
+    .left {
+      .meta {
+        .title {
+          margin-bottom: 0;
+          .name {
+            font-size: 20px;
+          }
+          .creator {
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+  @media (max-width: 370px) {
+    .left {
+      .meta {
+        .title {
+          .name {
+            -webkit-line-clamp: 3;
+          }
+        }
+        .control {
+          position: absolute;
+        }
+      }
+    }
+    .right {
+      margin-top: 80px;
+    }
  }
 }
 .title {
--- a/src/views/PlayList/SpecialPlayLists.json
+++ b/src/views/PlayList/SpecialPlayLists.json
@@ -0,0 +1,6 @@
+[
+  {
+    "id": 3136952023,
+    "name": "私人雷达"
+  }
+]
--- a/src/views/Search/albums.vue
+++ b/src/views/Search/albums.vue
@@ -10,13 +10,16 @@
    />
  </div>
 </template>
-  
+
 <script setup>
 import { getSearchData } from "@/api/search";
 import { useRouter } from "vue-router";
-import { getLongTime } from "@/utils/timeTools.js";
+import { getLongTime } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 import Pagination from "@/components/Pagination/index.vue";
+
+const { t } = useI18n();
 const router = useRouter();

 // 搜索数据
@@ -49,10 +52,10 @@ const getSearchDataList = (keywords, limit = 30, offset = 0, type = 10) => {
        });
      });
    } else {
-      $message.error("搜索内容为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
-    // 请求后回顶并结束加载条
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -101,4 +104,4 @@ onMounted(() => {
    (pageNumber.value - 1) * pagelimit.value
  );
 });
-</script>
+</script>
--- a/src/views/Search/artists.vue
+++ b/src/views/Search/artists.vue
@@ -7,8 +7,10 @@
 <script setup>
 import { getSearchData } from "@/api/search";
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
 import ArtistLists from "@/components/DataList/ArtistLists.vue";

+const { t } = useI18n();
 const router = useRouter();

 // 搜索数据
@@ -35,10 +37,10 @@ const getSearchDataList = (keywords, limit = 30, offset = 0, type = 100) => {
        });
      });
    } else {
-      $message.error("搜索内容为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
-    // 请求后回顶并结束加载条
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -60,4 +62,4 @@ watch(
 onMounted(() => {
  getSearchDataList(searchKeywords.value);
 });
-</script>
+</script>
--- a/src/views/Search/index.vue
+++ b/src/views/Search/index.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="search">
    <div class="title" v-if="searchKeywords">
-      <span class="key">{{ searchKeywords }}</span>
-      <span>的搜索结果</span>
+      <n-text class="key" v-html="searchKeywords" />
+      <n-text v-html="$t('nav.search.results')" />
    </div>
    <div class="title" v-else>
-      <span class="key">未提供搜索关键字</span>
+      <span class="key">{{ $t("general.name.noKeywords") }}</span>
      <br />
      <n-button
        strong
@@ -13,7 +13,7 @@
        @click="router.go(-1)"
        style="margin-top: 20px"
      >
-        返回上一级
+        {{ $t("general.name.goBack") }}
      </n-button>
    </div>
    <n-tabs
@@ -23,11 +23,11 @@
      v-model:value="tabValue"
      v-if="searchKeywords"
    >
-      <n-tab name="songs"> 单曲 </n-tab>
-      <n-tab name="artists"> 歌手 </n-tab>
-      <n-tab name="albums"> 专辑 </n-tab>
-      <n-tab name="videos"> 视频 </n-tab>
-      <n-tab name="playlists"> 歌单 </n-tab>
+      <n-tab name="songs">{{ $t("general.name.song") }}</n-tab>
+      <n-tab name="artists">{{ $t("general.name.artists") }}</n-tab>
+      <n-tab name="albums">{{ $t("general.name.album") }}</n-tab>
+      <n-tab name="videos">{{ $t("general.name.videos") }}</n-tab>
+      <n-tab name="playlists">{{ $t("general.name.playlist") }}</n-tab>
    </n-tabs>
    <main class="content" v-if="searchKeywords">
      <router-view v-slot="{ Component }">
@@ -43,6 +43,9 @@

 <script setup>
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 const router = useRouter();

 // 搜索关键词
@@ -74,7 +77,8 @@ const tabChange = (value) => {
 };

 onMounted(() => {
-  $setSiteTitle(searchKeywords.value + "的搜索结果");
+  if (searchKeywords.value)
+    $setSiteTitle(searchKeywords.value + " " + t("nav.search.results"));
 });
 </script>

--- a/src/views/Search/playlists.vue
+++ b/src/views/Search/playlists.vue
@@ -14,9 +14,12 @@
 <script setup>
 import { getSearchData } from "@/api/search";
 import { useRouter } from "vue-router";
-import { formatNumber } from "@/utils/timeTools.js";
+import { formatNumber } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 import Pagination from "@/components/Pagination/index.vue";
+
+const { t } = useI18n();
 const router = useRouter();

 // 搜索数据
@@ -49,10 +52,10 @@ const getSearchDataList = (keywords, limit = 30, offset = 0, type = 1000) => {
        });
      });
    } else {
-      $message.error("搜索内容为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
    // 请求后回顶
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -101,4 +104,4 @@ onMounted(() => {
    (pageNumber.value - 1) * pagelimit.value
  );
 });
-</script>
+</script>
--- a/src/views/Search/songs.vue
+++ b/src/views/Search/songs.vue
@@ -13,11 +13,14 @@

 <script setup>
 import { getSearchData } from "@/api/search";
-import { getMusicDetail } from "@/api/song";
+// import { getMusicDetail } from "@/api/song";
 import { useRouter } from "vue-router";
-import { getSongTime } from "@/utils/timeTools.js";
+import { getSongTime } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import DataLists from "@/components/DataList/DataLists.vue";
 import Pagination from "@/components/Pagination/index.vue";
+
+const { t } = useI18n();
 const router = useRouter();

 // 搜索数据
@@ -58,10 +61,10 @@ const getSearchDataList = (keywords, limit = 30, offset = 0, type = 1) => {
        });
      });
    } else {
-      $message.error("搜索内容为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
-    // 请求后回顶并结束加载条
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

--- a/src/views/Search/videos.vue
+++ b/src/views/Search/videos.vue
@@ -10,13 +10,16 @@
    />
  </div>
 </template>
-  
+
 <script setup>
 import { getSearchData } from "@/api/search";
 import { useRouter } from "vue-router";
-import { formatNumber, getSongTime } from "@/utils/timeTools.js";
+import { formatNumber, getSongTime } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import VideoLists from "@/components/DataList/VideoLists.vue";
 import Pagination from "@/components/Pagination/index.vue";
+
+const { t } = useI18n();
 const router = useRouter();

 // 搜索数据
@@ -50,10 +53,10 @@ const getSearchDataList = (keywords, limit = 30, offset = 0, type = 1004) => {
        });
      });
    } else {
-      $message.error("搜索内容为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
-    // 请求后回顶并结束加载条
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -102,4 +105,4 @@ onMounted(() => {
    (pageNumber.value - 1) * pagelimit.value
  );
 });
-</script>
+</script>
--- a/src/views/Setting/index.vue
+++ b/src/views/Setting/index.vue
@@ -1,15 +1,15 @@
 <template>
  <div class="setting">
-    <div class="title">全局设置</div>
+    <div class="title">{{ $t("nav.avatar.setting") }}</div>
    <n-tabs
      class="main-tab"
      type="segment"
      @update:value="tabChange"
      v-model:value="tabValue"
    >
-      <n-tab name="main"> 基础 </n-tab>
-      <n-tab name="player"> 播放器 </n-tab>
-      <n-tab name="other"> 其他 </n-tab>
+      <n-tab name="main">{{ $t("setting.main") }}</n-tab>
+      <n-tab name="player">{{ $t("setting.player") }}</n-tab>
+      <n-tab name="other">{{ $t("general.type.other") }}</n-tab>
    </n-tabs>
    <main class="content">
      <router-view v-slot="{ Component }">
@@ -25,7 +25,9 @@

 <script setup>
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";

+const { t } = useI18n();
 const router = useRouter();

 // Tab 默认选中
@@ -48,8 +50,9 @@ watch(
 );

 onMounted(() => {
-  $setSiteTitle("全局设置");
-  if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+  $setSiteTitle(t("nav.avatar.setting"));
+  // 回顶
+  if (typeof $scrollToTop !== "undefined") $scrollToTop();
 });
 </script>

@@ -79,6 +82,14 @@ onMounted(() => {
          display: flex;
          flex-direction: column;
          padding-right: 20px;
+          .dev {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .n-tag {
+              margin-left: 6px;
+            }
+          }
          .tip {
            font-size: 12px;
            opacity: 0.8;
--- a/src/views/Setting/main.vue
+++ b/src/views/Setting/main.vue
@@ -9,11 +9,16 @@
    >
      <div class="top">
        <div class="name">
-          主题色选择
-          <span class="tip">更换全站主题色，即时生效</span>
+          {{ $t("setting.themeType") }}
+          <span class="tip">{{ $t("setting.themeTypeTip") }}</span>
        </div>
-        <n-button strong secondary @click="changeThemeColor(null, true)">
-          恢复默认
+        <n-button
+          v-if="themeType !== 'red'"
+          strong
+          secondary
+          @click="changeThemeColor(null, true)"
+        >
+          {{ $t("general.name.restore") }}
        </n-button>
      </div>
      <n-grid
@@ -27,36 +32,54 @@
          v-for="item in themeColorData"
          :key="item"
          :style="{ '--color': item.primaryColor }"
-          :class="item.label === setting.themeType ? 'item check' : 'item'"
+          :class="item.label === themeType ? 'item check' : 'item'"
          @click="changeThemeColor(item)"
        >
-          <n-text v-html="item.name" />
+          <n-text v-html="language === 'zh-CN' ? item.name : item.label" />
        </n-grid-item>
      </n-grid>
    </n-card>
    <n-card class="set-item">
-      <div class="name">明暗模式</div>
-      <n-select class="set" v-model:value="theme" :options="darkOptions" />
+      <div class="name">{{ $t("setting.language") }}</div>
+      <n-select
+        class="set"
+        v-model:value="language"
+        :options="languageOptions"
+        @update:value="changeLanguage"
+      />
    </n-card>
    <n-card class="set-item">
-      <div class="name">明暗模式跟随系统</div>
-      <n-switch v-model:value="themeAuto" :round="false" />
+      <div class="name">{{ $t("setting.theme") }}</div>
+      <n-select
+        class="set"
+        v-model:value="theme"
+        :options="themeOptions"
+        @update:value="themeAuto = false"
+      />
+    </n-card>
+    <n-card class="set-item">
+      <div class="name">{{ $t("setting.themeAuto") }}</div>
+      <n-switch
+        v-model:value="themeAuto"
+        :round="false"
+        @update:value="themeAutoOpen"
+      />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        每日签到
-        <span class="tip">是否自动进行每日签到</span>
+        {{ $t("setting.autoSignIn") }}
+        <span class="tip">{{ $t("setting.autoSignInTip") }}</span>
      </div>
      <n-switch v-model:value="autoSignIn" :round="false" />
    </n-card>
    <n-card class="set-item">
-      <div class="name">显示轮播图</div>
+      <div class="name">{{ $t("setting.bannerShow") }}</div>
      <n-switch v-model:value="bannerShow" :round="false" />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        列表点击方式
-        <span class="tip">移动端该设置项无效，单击同时生效</span>
+        {{ $t("setting.listClickMode") }}
+        <span class="tip">{{ $t("setting.listClickModeTip") }}</span>
      </div>
      <n-select
        class="set"
@@ -65,20 +88,36 @@
      />
    </n-card>
    <n-card class="set-item">
-      <div class="name">显示搜索历史</div>
+      <div class="name">{{ $t("setting.searchHistory") }}</div>
      <n-switch v-model:value="searchHistory" :round="false" />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        显示底栏歌词
-        <span class="tip">是否在播放时显示歌词</span>
+        {{ $t("setting.bottomLyricShow") }}
+        <span class="tip">{{ $t("setting.bottomLyricShowTip") }}</span>
      </div>
      <n-switch v-model:value="bottomLyricShow" :round="false" />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        歌曲音质
-        <span class="tip">无损音质及以上需要您为黑胶会员</span>
+        {{ $t("setting.songVolumeFade") }}
+        <span class="tip">{{ $t("setting.songVolumeFadeTip") }}</span>
+      </div>
+      <n-switch v-model:value="songVolumeFade" :round="false" />
+    </n-card>
+    <n-card class="set-item">
+      <div class="name">
+        {{ $t("setting.memoryLastPlaybackPosition") }}
+        <span class="tip">{{
+          $t("setting.memoryLastPlaybackPositionTip")
+        }}</span>
+      </div>
+      <n-switch v-model:value="memoryLastPlaybackPosition" :round="false" />
+    </n-card>
+    <n-card class="set-item">
+      <div class="name">
+        {{ $t("setting.songLevel") }}
+        <span class="tip">{{ $t("setting.songLevelTip") }}</span>
      </div>
      <n-select
        class="set"
@@ -86,16 +125,43 @@
        :options="songLevelOptions"
      />
    </n-card>
+    <n-card class="set-item">
+      <div class="name">
+        {{ $t("setting.useUnmServerShow") }}
+        <span class="tip">
+          {{
+            useUnmServerShow
+              ? $t("setting.useUnmServerShowTip1")
+              : $t("setting.useUnmServerShowTip2")
+          }}
+        </span>
+      </div>
+      <n-switch
+        v-model:value="useUnmServer"
+        :round="false"
+        :disabled="!useUnmServerShow"
+      />
+    </n-card>
+    <n-card class="set-item">
+      <div class="name">
+        {{ $t("setting.showLyricSetting") }}
+        <span class="tip">{{ $t("setting.showLyricSettingTip") }}</span>
+      </div>
+      <n-switch v-model:value="showLyricSetting" :round="false" />
+    </n-card>
  </div>
 </template>

 <script setup>
 import { storeToRefs } from "pinia";
 import { settingStore, userStore } from "@/store";
+import { useI18n } from "vue-i18n";
+import { useOsTheme } from "naive-ui";
 import themeColorData from "@/components/Provider/themeColor.json";

 const setting = settingStore();
 const user = userStore();
+const osThemeRef = useOsTheme();
 const {
  theme,
  themeAuto,
@@ -106,88 +172,149 @@ const {
  autoSignIn,
  searchHistory,
  themeType,
+  showLyricSetting,
+  songVolumeFade,
+  useUnmServer,
+  memoryLastPlaybackPosition,
+  language,
 } = storeToRefs(setting);

+// 国际化
+const { locale, t } = useI18n();
+
+// UNM 开关显示
+const useUnmServerShow = import.meta.env.VITE_UNM_API ? true : false;
+
 // 深浅模式
-const darkOptions = [
-  {
-    label: "浅色模式",
-    value: "light",
-  },
-  {
-    label: "深色模式",
-    value: "dark",
-  },
-];
+const themeOptions = ref([]);
+const themeChange = () => {
+  themeOptions.value = [
+    {
+      label: t("nav.avatar.light"),
+      value: "light",
+    },
+    {
+      label: t("nav.avatar.dark"),
+      value: "dark",
+    },
+  ];
+};
+
+// 开启自动跟随
+const themeAutoOpen = (val) => {
+  console.log(osThemeRef.value);
+  if (val) {
+    theme.value = osThemeRef.value;
+  }
+};

 // 列表模式
-const listClickModeOptions = [
+const listClickModeOptions = ref([]);
+const listClickModeChange = () => {
+  listClickModeOptions.value = [
+    {
+      label: t("setting.dblclick"),
+      value: "dblclick",
+    },
+    {
+      label: t("setting.click"),
+      value: "click",
+    },
+  ];
+};
+
+// 语言
+const languageOptions = [
  {
-    label: "双击播放",
-    value: "dblclick",
+    label: "🇨🇳 简体中文",
+    value: "zh-CN",
  },
  {
-    label: "单击播放",
-    value: "click",
+    label: "🇬🇧 English",
+    value: "en",
  },
 ];

+// 语言切换
+const changeLanguage = (value, option) => {
+  const html = document.documentElement;
+  locale.value = value;
+  if (html) html.setAttribute("lang", value);
+  changeAllOptions();
+  console.log(t("setting.changeLanguage", { name: value }));
+  $message.success(t("setting.changeLanguage", { name: option.label }));
+};
+
 // 歌曲音质
-const songLevelOptions = [
-  {
-    label: "标准",
-    value: "standard",
-  },
-  {
-    label: "较高",
-    value: "higher",
-  },
-  ,
-  {
-    label: "极高",
-    value: "exhigh",
-  },
-  {
-    label: "无损",
-    value: "lossless",
-    disabled: user.userData?.vipType ? false : true,
-  },
-  {
-    label: "Hi-Res",
-    value: "hires",
-    disabled: user.userData?.vipType ? false : true,
-  },
-  {
-    label: "鲸云臻音",
-    value: "jyeffect",
-    disabled: user.userData?.vipType ? false : true,
-  },
-  {
-    label: "鲸云母带",
-    value: "jymaster",
-    disabled: user.userData?.vipType ? false : true,
-  },
-];
+const songLevelOptions = ref([]);
+const songLevelChange = () => {
+  songLevelOptions.value = [
+    {
+      label: t("setting.standard"),
+      value: "standard",
+    },
+    {
+      label: t("setting.higher"),
+      value: "higher",
+    },
+    ,
+    {
+      label: t("setting.exhigh"),
+      value: "exhigh",
+    },
+    {
+      label: t("setting.lossless"),
+      value: "lossless",
+      disabled: user.userData?.vipType ? false : true,
+    },
+    {
+      label: t("setting.hires"),
+      value: "hires",
+      disabled: user.userData?.vipType ? false : true,
+    },
+    {
+      label: t("setting.jyeffect"),
+      value: "jyeffect",
+      disabled: user.userData?.vipType ? false : true,
+    },
+    {
+      label: t("setting.jymaster"),
+      value: "jymaster",
+      disabled: user.userData?.vipType ? false : true,
+    },
+  ];
+};
+
+// 更改所有配置
+const changeAllOptions = () => {
+  themeChange();
+  listClickModeChange();
+  songLevelChange();
+};

 // 更换主题色
 const changeThemeColor = (data, reset = false) => {
  if (reset) {
    $dialog.warning({
      class: "s-dialog",
-      title: "恢复默认",
-      content: "确认恢复全站主题色为默认？",
-      positiveText: "确认",
-      negativeText: "取消",
+      title: t("general.name.restore"),
+      content: t("setting.themeTypeDialog"),
+      positiveText: t("general.name.restore"),
+      negativeText: t("general.dialog.cancel"),
      onPositiveClick: () => {
-        $message.success("主题色已重置");
-        setting.themeType = "red";
+        $message.success(t("other.cleanAll"));
+        themeType.value = "red";
      },
    });
  } else {
-    $message.success("主题色更换为" + data.name);
-    setting.themeType = data.label;
+    $message.success(t("setting.themeChange", { name: data.name }));
+    themeType.value = data.label;
  }
 };
+
+onMounted(() => {
+  changeAllOptions();
+});
 </script>

 <style lang="scss" scoped>
--- a/src/views/Setting/other.vue
+++ b/src/views/Setting/other.vue
@@ -2,30 +2,36 @@
  <div class="set-other">
    <n-card class="set-item">
      <div class="name">
-        系统重置
-        <span class="tip">若程序显示异常或出现问题时可尝试此操作</span>
+        {{ $t("setting.resetApp") }}
+        <span class="tip">{{ $t("setting.resetAppTip") }}</span>
      </div>
      <n-button strong secondary type="error" @click="resetApp">
-        重置
+        {{ $t("general.name.restore") }}
      </n-button>
    </n-card>
  </div>
 </template>

 <script setup>
-// 系统重置
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+// 程序重置
 const resetApp = () => {
  const cleanAll = () => {
-    $message ? $message.success("重置成功") : alert("重置成功");
+    $message
+      ? $message.success(t("other.cleanAll"))
+      : alert(t("other.cleanAll"));
    localStorage.clear();
    window.location.href = "/";
  };
  $dialog.warning({
    class: "s-dialog",
-    title: "系统重置",
-    content: "确认重置为默认状态？你的登录状态以及自定义设置都将丢失！",
-    positiveText: "重置",
-    negativeText: "取消",
+    title: t("setting.resetApp"),
+    content: t("setting.resetAppWarning"),
+    positiveText: t("setting.resetApp"),
+    negativeText: t("general.dialog.cancel"),
    onPositiveClick: () => {
      $cleanAll ? $cleanAll() : cleanAll();
    },
--- a/src/views/Setting/player.vue
+++ b/src/views/Setting/player.vue
@@ -2,8 +2,8 @@
  <div class="set-player">
    <n-card class="set-item">
      <div class="name">
-        播放器样式
-        <span class="tip">播放器左侧功能区样式</span>
+        {{ $t("setting.playerStyle") }}
+        <span class="tip">{{ $t("setting.playerStyleTip") }}</span>
      </div>
      <n-select
        class="set"
@@ -13,11 +13,11 @@
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        播放背景样式
+        {{ $t("setting.backgroundImageShow") }}
        <span class="tip">{{
          backgroundImageShow === "blur"
-            ? "将专辑封面模糊显示"
-            : "提取专辑主色作为背景颜色"
+            ? $t("setting.backgroundImageShowTip1")
+            : $t("setting.backgroundImageShowTip2")
        }}</span>
      </div>
      <n-select
@@ -28,60 +28,67 @@
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        替换无法播放的歌曲链接
-        <span class="tip">
-          {{
-            useUnmServerShow
-              ? "是否使用 UNM 替换无法播放的歌曲链接"
-              : "请配置 UNM-Server 后使用解灰功能"
-          }}
-        </span>
-      </div>
-      <n-switch
-        v-model:value="useUnmServer"
-        :round="false"
-        :disabled="!useUnmServerShow"
-      />
-    </n-card>
-    <n-card class="set-item">
-      <div class="name">
-        显示歌词翻译
-        <span class="tip">是否在具有翻译歌词时显示</span>
+        {{ $t("setting.showTransl") }}
+        <span class="tip">{{ $t("setting.showTranslTip") }}</span>
      </div>
      <n-switch v-model:value="showTransl" :round="false" />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        显示歌词音译
-        <span class="tip">是否在具有音译歌词时显示</span>
+        {{ $t("setting.showRoma") }}
+        <span class="tip">{{ $t("setting.showRomaTip") }}</span>
      </div>
      <n-switch v-model:value="showRoma" :round="false" />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        显示前奏等待
-        <span class="tip">部分歌曲前奏可能存在显示错误</span>
+        <div class="dev">
+          {{ $t("setting.showYrc") }}
+          <n-tag round :bordered="false" size="small" type="warning">
+            {{ $t("setting.dev") }}
+            <template #icon>
+              <n-icon :component="Code" />
+            </template>
+          </n-tag>
+        </div>
+        <span class="tip">{{ $t("setting.showYrcTip") }}</span>
+      </div>
+      <n-switch v-model:value="showYrc" :round="false" />
+    </n-card>
+    <template v-if="showYrc">
+      <n-card class="set-item">
+        <div class="name">
+          {{ $t("setting.showYrcAnimation") }}
+          <span class="tip">{{ $t("setting.showYrcAnimationTip") }}</span>
+        </div>
+        <n-switch v-model:value="showYrcAnimation" :round="false" />
+      </n-card>
+      <n-card class="set-item">
+        <div class="name">
+          {{ $t("setting.showYrcTransform") }}
+          <span class="tip">{{ $t("setting.showYrcTransformTip") }}</span>
+        </div>
+        <n-switch v-model:value="showYrcTransform" :round="false" />
+      </n-card>
+    </template>
+    <n-card class="set-item">
+      <div class="name">
+        {{ $t("setting.countDownShow") }}
+        <span class="tip">{{ $t("setting.countDownShowTip") }}</span>
      </div>
      <n-switch v-model:value="countDownShow" :round="false" />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        显示逐字歌词
-        <span class="tip">是否在歌曲具有逐字歌词时显示，实验性功能</span>
-      </div>
-      <n-switch v-model:value="showYrc" :round="false" />
-    </n-card>
-    <n-card class="set-item">
-      <div class="name">
-        智能暂停滚动
-        <span class="tip">鼠标移入歌词区域是否暂停滚动</span>
+        {{ $t("setting.lrcMousePause") }}
+        <span class="tip">{{ $t("setting.lrcMousePauseTip") }}</span>
      </div>
      <n-switch v-model:value="lrcMousePause" :round="false" />
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        歌词滚动位置
-        <span class="tip">歌词高亮时所处的位置</span>
+        {{ $t("setting.lyricsBlock") }}
+        <span class="tip">{{ $t("setting.lyricsBlockTip") }}</span>
      </div>
      <n-select
        class="set"
@@ -96,7 +103,7 @@
        alignItems: 'flex-start',
      }"
    >
-      <div class="name">歌词文本大小</div>
+      <div class="name">{{ $t("setting.lyricsFontSize") }}</div>
      <n-slider
        v-model:value="lyricsFontSize"
        :tooltip="false"
@@ -104,9 +111,9 @@
        :min="3"
        :step="0.01"
        :marks="{
-          3: '最小',
-          3.6: '默认',
-          4: '最大',
+          3: t('setting.lyrics1'),
+          3.6: t('setting.lyrics2'),
+          4: t('setting.lyrics3'),
        }"
      />
      <div :class="lyricsBlur ? 'more blur' : 'more'">
@@ -131,7 +138,7 @@
      </div>
    </n-card>
    <n-card class="set-item">
-      <div class="name">默认歌词位置</div>
+      <div class="name">{{ $t("setting.lyricsPosition") }}</div>
      <n-select
        class="set"
        v-model:value="lyricsPosition"
@@ -140,12 +147,12 @@
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        歌词模糊
-        <span class="tip">未播放或已播放歌词模糊显示，实验性功能</span>
+        {{ $t("setting.lyricsBlur") }}
+        <span class="tip">{{ $t("setting.lyricsBlurTip") }}</span>
      </div>
      <n-switch v-model:value="lyricsBlur" :round="false" />
    </n-card>
-    <n-card class="set-item">
+    <!-- <n-card class="set-item">
      <div class="name">
        显示音乐频谱
        <span class="tip">可能会导致一些意想不到的后果，实验性功能</span>
@@ -155,13 +162,17 @@
        :round="false"
        @click="changeMusicFrequency"
      />
-    </n-card>
+    </n-card> -->
  </div>
 </template>

 <script setup>
 import { storeToRefs } from "pinia";
 import { settingStore } from "@/store";
+import { useI18n } from "vue-i18n";
+import { Code } from "@icon-park/vue-next";
+
+const { t } = useI18n();

 const setting = settingStore();
 const {
@@ -175,22 +186,20 @@ const {
  lrcMousePause,
  showYrc,
  showRoma,
-  useUnmServer,
  backgroundImageShow,
  countDownShow,
+  showYrcAnimation,
+  showYrcTransform,
 } = storeToRefs(setting);

-// UNM 开关显示
-const useUnmServerShow = import.meta.env.VITE_UNM_API ? true : false;
-
 // 歌词位置
 const lyricsPositionOptions = [
  {
-    label: "居左",
+    label: t("setting.positionLeft"),
    value: "left",
  },
  {
-    label: "居中",
+    label: t("setting.positionCenter"),
    value: "center",
  },
 ];
@@ -198,11 +207,11 @@ const lyricsPositionOptions = [
 // 歌词滚动位置
 const lyricsBlockOptions = [
  {
-    label: "靠近顶部",
+    label: t("setting.blockStart"),
    value: "start",
  },
  {
-    label: "水平居中",
+    label: t("setting.blockCenter"),
    value: "center",
  },
 ];
@@ -210,11 +219,11 @@ const lyricsBlockOptions = [
 // 播放器样式
 const playerStyleOptions = [
  {
-    label: "封面模式",
+    label: t("setting.cover"),
    value: "cover",
  },
  {
-    label: "唱片模式",
+    label: t("setting.record"),
    value: "record",
  },
 ];
@@ -222,34 +231,34 @@ const playerStyleOptions = [
 // 播放背景类型
 const backgroundImageShowOptions = [
  {
-    label: "封面主色",
+    label: t("setting.solid"),
    value: "solid",
  },
  {
-    label: "封面模糊",
+    label: t("setting.blur"),
    value: "blur",
  },
 ];

 // 音乐频谱提醒
-const changeMusicFrequency = () => {
-  if (musicFrequency.value) {
-    $dialog.warning({
-      class: "s-dialog",
-      title: "实验性功能",
-      content: "确认开启音乐频谱？将在重启应用后生效",
-      positiveText: "开启",
-      negativeText: "取消",
-      onMaskClick: () => {
-        musicFrequency.value = false;
-      },
-      onPositiveClick: () => {
-        musicFrequency.value = true;
-      },
-      onNegativeClick: () => {
-        musicFrequency.value = false;
-      },
-    });
-  }
-};
+// const changeMusicFrequency = () => {
+//   if (musicFrequency.value) {
+//     $dialog.warning({
+//       class: "s-dialog",
+//       title: "实验性功能",
+//       content: "确认开启音乐频谱？将在重启应用后生效",
+//       positiveText: "开启",
+//       negativeText: "取消",
+//       onMaskClick: () => {
+//         musicFrequency.value = false;
+//       },
+//       onPositiveClick: () => {
+//         musicFrequency.value = true;
+//       },
+//       onNegativeClick: () => {
+//         musicFrequency.value = false;
+//       },
+//     });
+//   }
+// };
 </script>
--- a/src/views/Song/SongView.vue
+++ b/src/views/Song/SongView.vue
@@ -2,14 +2,24 @@
  <div class="song" v-if="musicDetail">
    <div class="detail">
      <div class="pic">
-        <n-avatar
+        <n-image
+          show-toolbar-tooltip
          class="coverImg"
-          :src="
-            musicDetail.al.picUrl
-              ? musicDetail.al.picUrl.replace(/^http:/, 'https:') +
-                '?param=1024y1024'
-              : '/images/pic/default.png'
-          "
+          :previewed-img-props="{ style: { borderRadius: '8px' } }"
+          :preview-src="getCoverUrl(musicDetail?.al.picUrl)"
+          :src="getCoverUrl(musicDetail?.al.picUrl, 1024)"
+          fallback-src="/images/pic/default.png"
+        >
+          <template #placeholder>
+            <div class="cover-loading">
+              <n-spin />
+            </div>
+          </template>
+        </n-image>
+        <n-image
+          class="shadow"
+          preview-disabled
+          :src="getCoverUrl(musicDetail?.al.picUrl, 1024)"
          fallback-src="/images/pic/default.png"
        />
      </div>
@@ -22,20 +32,43 @@
            v-if="musicDetail.alia[0]"
            v-html="musicDetail.alia[0]"
          />
-          <div class="all-artist">
-            <n-text class="tip" depth="3">歌手：</n-text>
-            <AllArtists v-if="musicDetail.ar" :artistsData="musicDetail.ar" />
+          <n-space class="tag">
+            <n-tag
+              v-if="musicDetail.fee == 1 || musicDetail.fee == 4"
+              class="vip"
+              round
+              :bordered="false"
+            >
+              {{ musicDetail.fee == 1 ? "VIP" : "EP" }}
+            </n-tag>
+            <n-tag
+              v-if="musicDetail.pc"
+              class="cloud"
+              round
+              type="info"
+              :bordered="false"
+            >
+              {{ $t("general.name.cloud") }}
+            </n-tag>
+          </n-space>
+          <div class="item">
+            <n-icon :depth="3" :component="People" />
+            <AllArtists
+              v-if="musicDetail.ar"
+              :artistsData="musicDetail.ar"
+              :isDark="false"
+            />
          </div>
-          <div class="album">
-            <n-text class="tip" depth="3">专辑：</n-text>
+          <div class="item">
+            <n-icon :depth="3" :component="RecordDisc" />
            <n-text
              class="text"
              v-html="musicDetail.al.name"
              @click="router.push(`/album?id=${musicDetail.al.id}`)"
            />
          </div>
-          <div class="time" v-if="musicDetail.publishTime">
-            <n-text class="tip" depth="3">发行日期：</n-text>
+          <div class="item" v-if="musicDetail.publishTime">
+            <n-icon :depth="3" :component="Time" />
            <n-text
              class="text"
              v-html="getLongTime(musicDetail.publishTime)"
@@ -50,9 +83,9 @@
            @click="addSong(musicDetail)"
          >
            <template #icon>
-              <n-icon :component="PlayArrowRound" />
+              <n-icon :component="PlayOne" />
            </template>
-            播放
+            {{ $t("general.name.play") }}
          </n-button>
          <n-button
            strong
@@ -60,9 +93,9 @@
            @click="addPlayListRef.openAddToPlaylist(musicId)"
          >
            <template #icon>
-              <n-icon :component="PlaylistAddRound" />
+              <n-icon :component="ListAdd" />
            </template>
-            添加
+            {{ $t("general.name.add") }}
          </n-button>
          <n-button
            strong
@@ -70,9 +103,9 @@
            @click="router.push(`/comment?id=${musicDetail.id}&page=1`)"
          >
            <template #icon>
-              <n-icon :component="MessageFilled" />
+              <n-icon :component="Comments" />
            </template>
-            评论
+            {{ $t("general.name.comment") }}
          </n-button>
          <n-button
            strong
@@ -81,16 +114,22 @@
            @click="router.push(`/video?id=${musicDetail.mv}`)"
          >
            <template #icon>
-              <n-icon :component="VideocamRound" />
+              <n-icon :component="Youtube" />
            </template>
            MV
          </n-button>
        </n-space>
      </div>
    </div>
-    <n-divider />
+    <div class="comments" v-if="commentData[0]">
+      <n-h6 prefix="bar"> {{ $t("general.name.hotComments") }} </n-h6>
+      <div class="content">
+        <Comment v-for="item in commentData" :key="item" :commentData="item" />
+      </div>
+    </div>
    <div class="simiPlayList" v-if="simiPlayList[0]">
-      <n-h6 prefix="bar"> 包含这首歌的歌单 </n-h6>
+      <n-divider />
+      <n-h6 prefix="bar"> {{ $t("other.containing") }} </n-h6>
      <CoverLists :listData="simiPlayList" />
    </div>
    <!-- 添加到歌单 -->
@@ -100,20 +139,28 @@

 <script setup>
 import { getSimiPlayList, getMusicDetail } from "@/api/song";
+import { getComment } from "@/api/comment";
 import { useRouter } from "vue-router";
 import { musicStore } from "@/store";
-import { getLongTime } from "@/utils/timeTools.js";
+import { getLongTime } from "@/utils/timeTools";
 import {
-  PlayArrowRound,
-  MessageFilled,
-  VideocamRound,
-  PlaylistAddRound,
-} from "@vicons/material";
-import { formatNumber } from "@/utils/timeTools.js";
+  PlayOne,
+  Comments,
+  ListAdd,
+  Youtube,
+  People,
+  RecordDisc,
+  Time,
+} from "@icon-park/vue-next";
+import { formatNumber } from "@/utils/timeTools";
+import { useI18n } from "vue-i18n";
 import AllArtists from "@/components/DataList/AllArtists.vue";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 import AddPlaylist from "@/components/DataModal/AddPlaylist.vue";
+import Comment from "@/components/Comment/index.vue";
+import getCoverUrl from "@/utils/getCoverUrl";

+const { t } = useI18n();
 const router = useRouter();
 const music = musicStore();
 const addPlayListRef = ref(null);
@@ -122,6 +169,9 @@ const addPlayListRef = ref(null);
 const musicId = ref(router.currentRoute.value.query.id);
 const musicDetail = ref(null);

+// 评论数据
+const commentData = ref([]);
+
 // 相似数据
 const simiPlayList = ref([]);

@@ -132,16 +182,39 @@ const getMusicDetailData = (id) => {
    if (res.songs[0]) {
      musicDetail.value = res.songs[0];
      $setSiteTitle(
-        res.songs[0].name + " - " + res.songs[0].ar[0].name + " - 单曲"
+        res.songs[0].name +
+          " - " +
+          res.songs[0].ar[0].name +
+          " - " +
+          t("general.name.song")
      );
+      // 获取热门评论
+      getCommentData(id);
      // 获取相似数据
      getSimiData(id);
+      // 请求后回顶
+      if (typeof $scrollToTop !== "undefined") $scrollToTop();
    } else {
-      $message.error("歌曲信息获取失败");
+      $message.error(t("general.message.acquisitionFailed"));
    }
  });
 };

+// 获取评论数据
+const getCommentData = (id) => {
+  getComment(id)
+    .then((res) => {
+      // 写入数据
+      if (res.total > 0) {
+        commentData.value = res.hotComments;
+      }
+    })
+    .catch((err) => {
+      console.error(t("general.message.acquisitionFailed"), err);
+      $message.error(t("general.message.acquisitionFailed"));
+    });
+};
+
 // 获取相似数据
 const getSimiData = (id) => {
  getSimiPlayList(id).then((res) => {
@@ -205,11 +278,53 @@ watch(
      justify-content: center;
      max-width: 280px;
      border-radius: 8px;
-      overflow: hidden;
      margin-right: 40px;
-      .n-avatar {
+      position: relative;
+      transition: transform 0.3s;
+      &:active {
+        transform: scale(0.95);
+      }
+      .coverImg {
+        border-radius: 8px;
        width: 100%;
-        height: inherit;
+        height: 100%;
+        overflow: hidden;
+        z-index: 1;
+        :deep(img) {
+          width: 100%;
+        }
+        .cover-loading {
+          position: relative;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 0;
+          padding-bottom: 100%;
+          background-color: #0001;
+          .n-spin-body {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+      .shadow {
+        position: absolute;
+        top: 12px;
+        height: 100%;
+        width: 100%;
+        filter: blur(16px) opacity(0.6);
+        transform: scale(0.92, 0.96);
+        z-index: 0;
+        background-size: cover;
+        aspect-ratio: 1/1;
+        :deep(img) {
+          width: 100%;
+        }
      }
    }
    .right {
@@ -228,14 +343,17 @@ watch(
        .alia {
          font-size: 20px;
        }
-        .all-artist {
-          margin-top: 12px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
+        .tag {
+          margin: 12px 0;
        }
-        .album {
-          margin: 4px 0;
+        .item {
+          font-size: 16px;
+          display: flex;
+          align-items: center;
+          margin-bottom: 4px;
+          .n-icon {
+            margin-right: 6px;
+          }
          .text {
            cursor: pointer;
            transition: all 0.3s;
@@ -252,6 +370,7 @@ watch(
    }
    @media (max-width: 768px) {
      flex-direction: column;
+      width: 100%;
      .pic {
        margin-bottom: 20px;
      }
@@ -267,5 +386,8 @@ watch(
      }
    }
  }
+  .comments {
+    margin-top: 40px;
+  }
 }
 </style>
--- a/src/views/State/403.vue
+++ b/src/views/State/403.vue
@@ -2,11 +2,13 @@
  <n-result
    class="error"
    status="403"
-    title="禁止访问"
-    description="总有些门是对你关闭的"
+    :title="$t('state.prohibition')"
+    :description="$t('state.prohibitionDesc')"
  >
    <template #footer>
-      <n-button type="primary" @click="router.go(-1)">回到上一页</n-button>
+      <n-button type="primary" @click="router.go(-1)">{{
+        $t("general.name.goBack")
+      }}</n-button>
    </template>
  </n-result>
 </template>
--- a/src/views/State/404.vue
+++ b/src/views/State/404.vue
@@ -2,11 +2,13 @@
  <n-result
    class="error"
    status="404"
-    title="资源不存在"
-    description="怎么跑到这来了"
+    :title="$t('state.notFound')"
+    :description="$t('state.notFoundDesc')"
  >
    <template #footer>
-      <n-button type="primary" @click="router.go(-1)">回到上一页</n-button>
+      <n-button type="primary" @click="router.go(-1)">{{
+        $t("general.name.goBack")
+      }}</n-button>
    </template>
  </n-result>
 </template>
--- a/src/views/State/500.vue
+++ b/src/views/State/500.vue
@@ -2,11 +2,13 @@
  <n-result
    class="error"
    status="500"
-    title="服务器错误"
-    description="服务器寄了，等会再试吧"
+    :title="$t('state.error')"
+    :description="$t('state.errorDesc')"
  >
    <template #footer>
-      <n-button type="primary" @click="router.push('/')">重新载入</n-button>
+      <n-button type="primary" @click="router.push('/')">{{
+        $t("general.name.reload")
+      }}</n-button>
    </template>
  </n-result>
 </template>
@@ -28,4 +30,4 @@ onMounted(() => {
  align-items: center;
  flex-direction: column;
 }
-</style>
+</style>
--- a/src/views/User/album.vue
+++ b/src/views/User/album.vue
@@ -6,12 +6,14 @@

 <script setup>
 import { userStore } from "@/store";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";

+const { t } = useI18n();
 const user = userStore();

 onMounted(() => {
-  $setSiteTitle("音乐库 - 收藏的专辑");
+  $setSiteTitle(t("nav.user") + " - " + t("nav.userChildren.album"));
  if (!user.getUserAlbumLists.has && !user.getUserAlbumLists.isLoading)
    user.setUserAlbumLists();
 });
--- a/src/views/User/artists.vue
+++ b/src/views/User/artists.vue
@@ -6,12 +6,14 @@

 <script setup>
 import { userStore } from "@/store";
+import { useI18n } from "vue-i18n";
 import ArtistLists from "@/components/DataList/ArtistLists.vue";

+const { t } = useI18n();
 const user = userStore();

 onMounted(() => {
-  $setSiteTitle("音乐库 - 收藏的歌手");
+  $setSiteTitle(t("nav.user") + " - " + t("nav.userChildren.artist"));
  if (!user.getUserArtistLists.has && !user.getUserArtistLists.isLoading)
    user.setUserArtistLists();
 });
--- a/src/views/User/cloud.vue
+++ b/src/views/User/cloud.vue
@@ -12,7 +12,7 @@
        <template #icon>
          <n-icon :component="BackupRound" />
        </template>
-        上传歌曲
+        {{ $t("general.name.upCloud") }}
      </n-button>
      <input
        ref="upSongRef"
@@ -34,11 +34,14 @@
            />
          </template>
          <n-text>
-            已用 {{ (100 / (cloudSpace[1] / cloudSpace[0])).toFixed() }}%，剩余
-            {{ cloudSpace[1] - cloudSpace[0] }} G
+            {{
+              $t("general.name.cloudUsed", {
+                used: (100 / (cloudSpace[1] / cloudSpace[0])).toFixed(),
+                remaining: cloudSpace[1] - cloudSpace[0],
+              })
+            }}
          </n-text>
        </n-popover>
-
        <span>{{ cloudSpace[1] }} G</span>
      </div>
    </div>
@@ -54,7 +57,7 @@
      class="s-modal close"
      v-model:show="upSongModal"
      preset="card"
-      title="云盘上传"
+      :title="$t('general.name.upCloud')"
      :auto-focus="false"
      :bordered="false"
      :close-on-esc="false"
@@ -70,9 +73,11 @@
      />
      <template #footer>
        <n-space justify="end" v-if="upSongType === 'error'">
-          <n-button @click="closeUpSongModal"> 取消 </n-button>
+          <n-button @click="closeUpSongModal">
+            {{ $t("general.dialog.cancel") }}
+          </n-button>
          <n-button type="primary" @click="resetUpSongModal">
-            重新上传
+            {{ $t("general.dialog.resetUp") }}
          </n-button>
        </n-space>
      </template>
@@ -84,11 +89,13 @@
 import { getCloud, upCloudSong } from "@/api/user";
 import { useRouter } from "vue-router";
 import { settingStore } from "@/store";
-import { getSongTime } from "@/utils/timeTools.js";
+import { getSongTime } from "@/utils/timeTools";
 import { BackupRound } from "@vicons/material";
+import { useI18n } from "vue-i18n";
 import DataLists from "@/components/DataList/DataLists.vue";
 import Pagination from "@/components/Pagination/index.vue";

+const { t } = useI18n();
 const router = useRouter();
 const setting = settingStore();

@@ -135,11 +142,10 @@ const getCloudData = (limit = 30, offset = 0, scroll = true) => {
        });
      });
    } else {
-      $message.error("搜索内容为空");
+      $message.error(t("general.message.acquisitionFailed"));
    }
    // 请求后回顶
-    if ($mainContent && scroll)
-      $mainContent.scrollIntoView({ behavior: "smooth" });
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -148,7 +154,6 @@ const onUploadProgress = (progressEvent) => {
  const { loaded, total } = progressEvent;
  const percentCompleted = Math.round((loaded * 100) / total);
  upSongCompleted.value = Number(percentCompleted);
-  console.log(`上传 ${percentCompleted}% 完成`);
 };

 // 歌曲上传
@@ -164,21 +169,25 @@ const upCloudSongData = (e) => {
      if (res.code === 200) {
        closeUpSongModal();
        if (!res.privateCloud.simpleSong.al?.name) {
-          $message.warning("上传歌曲详细信息获取失败，可尝试歌曲纠正");
+          $message.warning(t("general.message.upCloudNotHas"));
        }
-        $message.success(res.privateCloud.simpleSong?.name + " 上传成功");
+        $message.success(
+          t("general.message.upCloudSuccess", {
+            name: res.privateCloud.simpleSong?.name,
+          })
+        );
        getCloudData(pagelimit.value, (pageNumber.value - 1) * pagelimit.value);
      } else {
        upSongType.value = "error";
-        $message.error("歌曲上传出错，请重试");
-        console.error("歌曲上传出错，请重试");
+        $message.error(t("general.message.upCloudError"));
+        console.error(t("general.message.upCloudError"));
      }
    })
    .catch((err) => {
      upSongType.value = "error";
      closeUpSongModal();
-      $message.error("歌曲上传出现错误");
-      console.error("歌曲上传出现错误：" + err);
+      $message.error(t("general.message.upCloudFailure"));
+      console.error(t("general.message.upCloudFailure"), err);
    });
 };

@@ -234,7 +243,7 @@ watch(
 );

 onMounted(() => {
-  $setSiteTitle("音乐库 - 音乐云盘");
+  $setSiteTitle(t("nav.user") + " - " + t("nav.userChildren.cloud"));
  getCloudData(pagelimit.value, (pageNumber.value - 1) * pagelimit.value);
 });
 </script>
--- a/src/views/User/index.vue
+++ b/src/views/User/index.vue
@@ -13,7 +13,7 @@
      />
      <div class="text">
        <n-text class="key">{{ user.getUserData.nickname }}</n-text>
-        <n-text class="tip">的音乐库</n-text>
+        <n-text class="tip" v-html="$t('nav.userChildren.results')" />
      </div>
    </div>
    <n-tabs
@@ -22,11 +22,11 @@
      @update:value="tabChange"
      v-model:value="tabValue"
    >
-      <n-tab name="playlists"> 我的歌单 </n-tab>
-      <n-tab name="like"> 收藏的歌单 </n-tab>
-      <n-tab name="album"> 收藏的专辑 </n-tab>
-      <n-tab name="artists"> 收藏的歌手 </n-tab>
-      <n-tab name="cloud"> 音乐云盘 </n-tab>
+      <n-tab name="playlists">{{ $t("nav.userChildren.playlist") }}</n-tab>
+      <n-tab name="like">{{ $t("nav.userChildren.like") }}</n-tab>
+      <n-tab name="album">{{ $t("nav.userChildren.album") }}</n-tab>
+      <n-tab name="artists">{{ $t("nav.userChildren.artist") }}</n-tab>
+      <n-tab name="cloud">{{ $t("nav.userChildren.cloud") }}</n-tab>
    </n-tabs>
    <main class="content">
      <router-view v-slot="{ Component }">
--- a/src/views/User/like.vue
+++ b/src/views/User/like.vue
@@ -6,12 +6,14 @@

 <script setup>
 import { userStore } from "@/store";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";

+const { t } = useI18n();
 const user = userStore();

 onMounted(() => {
-  $setSiteTitle("音乐库 - 收藏的歌单");
+  $setSiteTitle(t("nav.user") + " - " + t("nav.userChildren.like"));
  if (!user.getUserPlayLists.has && !user.getUserPlayLists.isLoading)
    user.setUserPlayLists();
 });
--- a/src/views/User/playlists.vue
+++ b/src/views/User/playlists.vue
@@ -12,7 +12,7 @@
        <template #icon>
          <n-icon :component="AddCircleRound" />
        </template>
-        新建歌单
+        {{ $t("menu.create") }}
      </n-button>
      <!-- 新建歌单 -->
      <CreatePlaylist ref="createPlaylistRef" />
@@ -24,14 +24,16 @@
 <script setup>
 import { AddCircleRound } from "@vicons/material";
 import { userStore } from "@/store";
+import { useI18n } from "vue-i18n";
 import CoverLists from "@/components/DataList/CoverLists.vue";
 import CreatePlaylist from "@/components/DataModal/CreatePlaylist.vue";

+const { t } = useI18n();
 const user = userStore();
 const createPlaylistRef = ref(null);

 onMounted(() => {
-  $setSiteTitle("音乐库 - 我的歌单");
+  $setSiteTitle(t("nav.user") + " - " + t("nav.userChildren.playlist"));
  if (!user.getUserPlayLists.has && !user.getUserPlayLists.isLoading)
    user.setUserPlayLists();
 });
--- a/src/views/Video/VideoView.vue
+++ b/src/views/Video/VideoView.vue
@@ -16,21 +16,21 @@
        <div class="num">
          <span class="playCount">
            <n-icon :component="OndemandVideoFilled" />
-            {{ formatNumber(videoData.playCount) }} 次播放
+            {{ formatNumber(videoData.playCount) }}
          </span>
          <span class="shareCount">
            <n-icon :component="ShareFilled" />
-            {{ formatNumber(videoData.shareCount) }} 次分享
+            {{ formatNumber(videoData.shareCount) }}
          </span>
          <span class="commentCount">
            <n-icon :component="MessageOutlined" />
-            {{ formatNumber(videoData.commentCount) }} 条评论
+            {{ formatNumber(videoData.commentCount) }}
          </span>
        </div>
      </div>
      <div class="comment" v-if="commentData.allComments[0]">
        <div class="hotComments" v-if="commentData.hotComments[0]">
-          <n-h6 prefix="bar"> 热门评论 </n-h6>
+          <n-h6 prefix="bar"> {{ $t("general.name.hotComments") }} </n-h6>
          <div class="loading" v-if="!commentData.hotComments[0]">
            <n-skeleton text :repeat="3" />
            <n-skeleton text style="width: 60%" />
@@ -45,8 +45,8 @@
        </div>
        <div class="allComments" ref="allCommentsRef">
          <n-h6 prefix="bar">
-            全部评论
-            <span class="count">{{ commentsCount }} 条</span>
+            {{ $t("general.name.allComments") }}
+            <span class="count">{{ commentsCount }} +</span>
          </n-h6>
          <div class="loading" v-if="!commentData.allComments[0]">
            <n-skeleton text :repeat="3" />
@@ -68,7 +68,7 @@
      </div>
    </section>
    <section class="simiVideo">
-      <n-h6 prefix="bar"> 相似视频 </n-h6>
+      <n-h6 prefix="bar"> {{ $t("general.name.simiVideo") }} </n-h6>
      <VideoLists v-if="simiVideo[0]" :listData="simiVideo" />
    </section>
  </div>
@@ -76,15 +76,16 @@

 <script setup>
 import { useRouter } from "vue-router";
-import { musicStore } from "@/store";
+import { musicStore, settingStore } from "@/store";
 import { getVideoDetail, getVideoUrl, getSimiVideo } from "@/api/video";
 import { getComment } from "@/api/comment";
-import { formatNumber, getSongTime } from "@/utils/timeTools.js";
+import { formatNumber, getSongTime } from "@/utils/timeTools";
 import {
  OndemandVideoFilled,
  ShareFilled,
  MessageOutlined,
 } from "@vicons/material";
+import { useI18n } from "vue-i18n";
 import VideoLists from "@/components/DataList/VideoLists.vue";
 import AllArtists from "@/components/DataList/AllArtists.vue";
 import Comment from "@/components/Comment/index.vue";
@@ -92,8 +93,10 @@ import Pagination from "@/components/Pagination/index.vue";
 import Plyr from "plyr";
 import "plyr/dist/plyr.css";

+const { t } = useI18n();
 const router = useRouter();
 const music = musicStore();
+const setting = settingStore();

 // 视频 id
 const videoId = ref(router.currentRoute.value.query.id);
@@ -113,19 +116,22 @@ const playerOptions = {
    default: 1080,
    options: [1080, 720, 480, 240],
  },
-  i18n: {
-    play: "播放",
-    pause: "暂停",
-    speed: "速度",
-    settings: "设置",
-    normal: "正常",
-    quality: "画质",
-    pip: "画中画",
-    enterFullscreen: "开启全屏",
-    exitFullscreen: "退出全屏",
-    mute: "音量",
-    unmute: "静音",
-  },
+  i18n:
+    setting.language === "zh-CN"
+      ? {
+          play: "播放",
+          pause: "暂停",
+          speed: "速度",
+          settings: "设置",
+          normal: "正常",
+          quality: "画质",
+          pip: "画中画",
+          enterFullscreen: "开启全屏",
+          exitFullscreen: "退出全屏",
+          mute: "音量",
+          unmute: "静音",
+        }
+      : {},
  tooltips: {
    controls: true,
  },
@@ -142,7 +148,13 @@ const commentsCount = ref(0);
 const getVideoData = (id) => {
  getVideoDetail(id).then((res) => {
    videoData.value = res.data;
-    $setSiteTitle(res.data.name + " - " + res.data.artists[0].name + " - 视频");
+    $setSiteTitle(
+      res.data.name +
+        " - " +
+        res.data.artists[0].name +
+        " - " +
+        t("general.name.videos")
+    );
    const requests = res.data.brs.map((v) => {
      return getVideoUrl(id, v.br);
    });
@@ -163,11 +175,11 @@ const getVideoData = (id) => {
        };
      })
      .catch((err) => {
-        console.error(err);
-        $message.error("视频加载失败，请重试");
+        console.error(t("general.message.userChildren.playlist"), err);
+        $message.error(t("general.message.userChildren.playlist"));
      });
    // 请求后回顶
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });

  // 获取相似视频
@@ -202,8 +214,8 @@ const getCommentData = (id, offset = 0, type = "mv") => {
    }
    commentData.allComments = res.comments;
    commentsCount.value = res.total;
-    // 滚动至顶部
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    // 请求后回顶
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

@@ -213,8 +225,6 @@ const pageNumberChange = (val) => {
 };

 onMounted(() => {
-  // 隐藏控制条
-  music.setPlayBarState(false);
  // 初始化播放器
  player.value = new Plyr(videoRef.value, playerOptions);
  // 获取视频数据
@@ -223,7 +233,8 @@ onMounted(() => {
  getCommentData(videoId.value);
  // 播放器事件
  player.value.on("playing", () => {
-    console.log("视频开始播放");
+    // 隐藏控制条及暂停音乐
+    music.setPlayBarState(false);
    music.setPlayState(false);
  });
 });
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,7 @@ import AutoImport from "unplugin-auto-import/vite";
 import Components from "unplugin-vue-components/vite";
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
 import { VitePWA } from "vite-plugin-pwa";
+import { createHtmlPlugin } from "vite-plugin-html";

 // https://vitejs.dev/config/
 export default ({ mode }) =>
@@ -27,6 +28,21 @@ export default ({ mode }) =>
      Components({
        resolvers: [NaiveUiResolver()],
      }),
+      createHtmlPlugin({
+        minify: true,
+        template: "index.html",
+        inject: {
+          data: {
+            logo: loadEnv(mode, process.cwd()).VITE_SITE_LOGO,
+            appleLogo: loadEnv(mode, process.cwd()).VITE_SITE_APPLE_LOGO,
+            title: loadEnv(mode, process.cwd()).VITE_SITE_TITLE,
+            author: loadEnv(mode, process.cwd()).VITE_SITE_ANTHOR,
+            keywords: loadEnv(mode, process.cwd()).VITE_SITE_KEYWORDS,
+            description: loadEnv(mode, process.cwd()).VITE_SITE_DES,
+            tongji: loadEnv(mode, process.cwd()).VITE_SITE_BAIDUTONGJI,
+          },
+        },
+      }),
      // PWA
      VitePWA({
        registerType: "autoUpdate",
@@ -53,9 +69,9 @@ export default ({ mode }) =>
          ],
        },
        manifest: {
-          name: "SPlayer",
-          short_name: "SPlayer",
-          description: "一个简约的在线音乐播放器",
+          name: loadEnv(mode, process.cwd()).VITE_SITE_TITLE,
+          short_name: loadEnv(mode, process.cwd()).VITE_SITE_TITLE,
+          description: loadEnv(mode, process.cwd()).VITE_SITE_DES,
          display: "standalone",
          start_url: "/",
          theme_color: "#fff",
@@ -86,6 +102,7 @@ export default ({ mode }) =>
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
+        "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
      },
    },
    build: {
Author	SHA1	Message	Date
底层用户	dbbcee41c3	Merge pull request #53 from imsyy/dev fix: 修复空元素异常 #52	2023-06-13 09:30:02 +08:00
imsyy	261997a627	fix: 修复空元素异常 #52	2023-06-12 18:04:58 +08:00
底层用户	3736085624	Merge pull request #51 from imsyy/dev feat: 一些优化	2023-06-12 16:41:37 +08:00
imsyy	bf3675ce45	fix: 使消息同时只存在一个	2023-06-12 16:40:43 +08:00
imsyy	da2a924c7e	feat: 播放模式弹窗	2023-06-05 18:26:33 +08:00
imsyy	ea245945fa	fix: 移入移除喜欢列表提醒	2023-06-03 09:26:10 +08:00
底层用户	ad20b6ce65	Merge pull request #50 from imsyy/dev fix: 修复一些问题	2023-06-01 10:24:35 +08:00
imsyy	6ac8b948b2	fix: 滚动歌词无法居中	2023-06-01 09:41:43 +08:00
imsyy	995f087e1d	fix: 兼容苹果端图标 #46	2023-05-31 15:27:12 +08:00
imsyy	021ace4a86	feat: 兼容解灰酷我音源 #45	2023-05-31 14:31:52 +08:00
imsyy	2c2301d8af	feat: 兼容解灰酷我音源	2023-05-31 14:18:21 +08:00
底层用户	4bd76ce157	Merge pull request #44 from imsyy/dev fix: 修复下载歌曲异常 #43	2023-05-29 18:04:40 +08:00
imsyy	ee7fe27801	fix: 去除每次进入提醒	2023-05-29 18:02:41 +08:00
imsyy	73798ba196	fix: 修复下载歌曲异常 #43	2023-05-29 17:48:21 +08:00
imsyy	c30263b019	feat: 新增部分提醒	2023-05-29 17:47:02 +08:00
imsyy	f96b07a43c	fix: 简单优化下歌词	2023-05-25 15:28:55 +08:00
底层用户	b23c2677e2	Merge pull request #42 from imsyy/dev feat: 完善 i18n 支持 & fix: ios 端图标显示 #38	2023-05-24 09:54:46 +08:00
imsyy	3c64da89f6	docs: 更新说明	2023-05-23 17:32:02 +08:00
imsyy	0207b92f2a	feat: 完善 i18n 支持 & fix: ios 端图标显示 #38	2023-05-23 17:30:57 +08:00
imsyy	0ee896d352	feat: 新增 i18n 支持	2023-05-19 10:25:43 +08:00
底层用户	0e88d1405f	Merge pull request #36 from imsyy/dev feat: 首页新增私人雷达 & 封面支持懒加载	2023-05-15 11:24:28 +08:00
imsyy	0e0a3911c1	feat: 部分封面支持懒加载	2023-05-15 11:15:08 +08:00
imsyy	b5cde21981	feat: 首页新增私人雷达 & fix: 部分封面无法显示 - 新增封面图片懒加载 - 部分样式调整	2023-05-12 18:09:28 +08:00
底层用户	2370d237a8	Merge pull request #34 from imsyy/dev feat: 同步开发分支	2023-05-11 14:05:25 +08:00
imsyy	ffbe6229f9	style: 调整进度条样式	2023-05-11 14:04:30 +08:00
imsyy	bf1312889d	style: 部分组件样式调整	2023-05-11 11:19:20 +08:00
imsyy	2bf3d7db5a	style: 样式微调	2023-05-10 18:25:58 +08:00
imsyy	06ccb969e4	feat: 新增歌单及专辑页播放全部 & 移动端体验优化	2023-05-10 18:18:31 +08:00
imsyy	6867897e02	fix: 在切换模式时播放进度异常 - 我愿称之为屎山添屎 🤡	2023-05-10 10:26:11 +08:00
imsyy	c78f94ae86	fix: 切换歌曲时多次弹窗	2023-05-09 17:57:06 +08:00
imsyy	40ed0dada1	fix: 切换歌曲时异常播放上一首	2023-05-09 17:33:13 +08:00
imsyy	f4d2c5f337	fix: 修复播放异常问题（可能）	2023-05-09 16:52:30 +08:00
imsyy	aace9e97b0	fix: 再次修复引用错误 😂	2023-05-09 16:20:15 +08:00
imsyy	b3641801df	fix: 引用错误	2023-05-09 16:13:54 +08:00
imsyy	1dd877832c	feat: 更换播放器为 Howler - 新增站点标题自定义 - 暂时去除音乐频谱功能	2023-05-09 16:05:32 +08:00
imsyy	660cd33387	fix: 修复部分样式	2023-05-05 16:19:54 +08:00
imsyy	8caebf65f9	feat: 歌单页新增播放全部	2023-05-05 12:06:52 +08:00
imsyy	3b432dbd8b	feat: 歌词页面快捷设置	2023-05-04 17:26:29 +08:00
imsyy	ee934c89f4	fix: 修复引用错误	2023-05-04 15:00:52 +08:00
imsyy	921b0eed0a	fix: 修复歌手全部歌曲显示异常 #30	2023-05-04 14:55:27 +08:00