Merge pull request #81 from imsyy/dev

feat: 支持手机号登录 #67
feat: 更新说明
2025-11-25 19:37:35 +08:00 · 2023-10-25 16:34:15 +08:00 · 2023-09-13 16:00:25 +08:00 · 2023-08-21 17:27:08 +08:00 · 2023-08-14 10:03:56 +08:00 · 2023-08-08 10:03:19 +08:00
97 changed files with 5055 additions and 2208 deletions
--- a/.env
+++ b/.env
@@ -1,10 +1,12 @@
 # 全局 API 地址
 ## 需部署 API，详见 https://github.com/Binaryify/NeteaseCloudMusicApi
-VITE_MUSIC_API = "https://api-music.imsyy.top/"
+# VITE_MUSIC_API = "https://api-music.imsyy.top/"
+VITE_MUSIC_API = "http://localhost:3000/"

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

 # 站点标题
 VITE_SITE_TITLE = "SPlayer"
@@ -13,9 +15,7 @@ VITE_SITE_KEYWORDS = "SPlayer,云音乐,播放器,在线音乐,在线播放器,
 VITE_SITE_DES = "一个简约的在线音乐播放器，具有音乐搜索、播放、每日推荐、私人FM、歌词显示、歌曲评论、网易云登录与云盘等功能"
 VITE_SITE_URL = "imsyy.top"
 VITE_SITE_LOGO = "/images/logo/favicon.svg"
-
-# 百度统计（若不需要，请设为空即可）
-VITE_SITE_BAIDUTONGJI = "c6579e9a33cbc5260fc90231678556ec"
+VITE_SITE_APPLE_LOGO = "/images/logo/favicon-apple.png"

 # ICP 备案号
 ## 若不需要，请设为空即可
@@ -24,8 +24,8 @@ VITE_ICP = "豫ICP备2022018134号-1"
 # 公告配置
 ## 若无需公告，请将任意一项设为空即可
 ## 公告标题
-VITE_ANN_TITLE = ""
+VITE_ANN_TITLE = "温馨提醒"
 ## 公告内容
-VITE_ANN_CONTENT = ""
+VITE_ANN_CONTENT = "由于演示站访问量随时可能超出，请自行部署后查看效果"
 ## 公告时长（毫秒）不可超过 999999
-VITE_ANN_DURATION = 3000
+VITE_ANN_DURATION = 8000
--- a/.hintrc
+++ b/.hintrc
@@ -21,6 +21,7 @@
          "meta[name=theme-color]"
        ]
      }
-    ]
+    ],
+    "apple-touch-icons": "off"
  }
 }
--- a/README.md
+++ b/README.md
@@ -8,6 +8,11 @@

 ## 说明

+> **当前项目正在重构中，当前版本进入维护模式，仅在遇到重大问题时会进行修复**
+> - 支持客户端与网页端
+> - 支持现有版本所有功能
+> - 新增支持播放与管理本地歌曲
+
 - 本项目采用 [Vue 3](https://cn.vuejs.org/) 全家桶和 [Naïve UI](https://www.naiveui.com/) 组件库及 `SCSS` 开发
 - 目前主要以 `Web` 端为主，可能暂时不会考虑使用 `Electron` 构建客户端
 - 仅对移动端做了基础适配，**不保证功能全部可用**
@@ -20,7 +25,7 @@
 ## 🎉 功能

 - 支持扫码登录
- 支持手机号登录（上游接口暂时无法使用）
+- 支持手机号登录
 - 自动进行每日签到及云贝签到
 - 支持 [UnblockNeteaseMusic](https://github.com/UnblockNeteaseMusic/server)，自动替换变灰歌曲
  - 由于酷我音源不支持 `https`，故网页端替换可能不全面
@@ -42,12 +47,13 @@
 - 支持评论区及评论点赞
 - 明暗模式自动 / 手动切换
 - 移动端基础适配
+- `i18n` 支持

 #### 待办

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

 ## 😍 Screenshots
@@ -56,30 +62,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>

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

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

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

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

--- a/index.html
+++ b/index.html
@@ -2,39 +2,62 @@
 <html lang="zh-CN">

 <head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="<%- logo %>">
-  <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="author" content="<%- author %>" />
-  <meta name="keywords" content="<%- keywords %>" />
-  <meta name="description" content="<%- description %>" />
-  <meta name="theme-color" content="#ffffff">
+  <meta charset="UTF-8" />
+  <link rel="icon" href="%VITE_SITE_LOGO%" />
+  <link rel="apple-touch-icon" href="%VITE_SITE_APPLE_LOGO%" />
+  <link rel="bookmark" href="%VITE_SITE_APPLE_LOGO%" />
+  <link rel="apple-touch-icon-precomposed" sizes="200x200" href="%VITE_SITE_APPLE_LOGO%" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>%VITE_SITE_TITLE%</title>
+  <meta name="apple-mobile-web-app-title" content="%VITE_SITE_TITLE%" />
+  <meta name="author" content="%VITE_SITE_ANTHOR%" />
+  <meta name="keywords" content="%VITE_SITE_KEYWORDS%" />
+  <meta name="description" content="%VITE_SITE_DES%" />
+  <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))
+    if (
+      /*@cc_on!@*/
+      false ||
+      (!!window.MSInputMethodContext && !!document.documentMode)
+    )
      window.location.href =
-      "https://support.dmeng.net/upgrade-your-browser.html?referrer=" + encodeURIComponent(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>

 <body>
  <div id="app"></div>
+  <noscript>
+    <img src="%VITE_SITE_LOGO%" alt="logo" />
+    <p class="title">%VITE_SITE_TITLE%</p>
+    <p class="tip">请开启 JavaScript</p>
+  </noscript>
  <script type="module" src="/src/main.js"></script>
 </body>

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "splayer",
-  "version": "1.1.6",
+  "version": "1.1.9",
  "author": "imsyy",
  "home": "https://imsyy.top",
  "github": "https://github.com/imsyy/SPlayer",
@@ -22,9 +22,10 @@
    "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-i18n": "^9.2.2",
    "vue-router": "^4.1.6",
    "vue-slider-component": "4.1.0-beta.7"
  },
@@ -32,11 +33,12 @@
    "@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.4.9",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-pwa": "^0.16.4"
  }
 }
--- 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,7 +13,7 @@
        <main
          ref="mainContent"
          class="main"
-          id="main"
+          id="mainContent"
          :class="{
            playlist: music.showPlayList,
            search: site.searchInputActive,
@@ -42,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();
@@ -122,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"]({
@@ -192,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;
    });
--- 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",
@@ -97,9 +98,11 @@ export const getMusicNewLyric = (id) => {
 export const getMusicDetail = (ids) => {
  return axios({
    method: "GET",
+    hiddenBar: true,
    url: "/song/detail",
    params: {
      ids,
+      timestamp: new Date().getTime(),
    },
  });
 };
@@ -140,6 +143,7 @@ export const getSimiSong = (id) => {
 export const getSongDownload = (id, br = 999000) => {
  return axios({
    method: "GET",
+    hiddenBar: true,
    url: "/song/download/url",
    params: {
      id,
--- 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: () => {
--- a/src/components/Comment/index.vue
+++ b/src/components/Comment/index.vue
@@ -83,7 +83,9 @@ 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,
+  },
 });

 // 跳转歌手页面
--- a/src/components/DataList/ArtistLists.vue
+++ b/src/components/DataList/ArtistLists.vue
@@ -19,12 +19,20 @@
        >
          <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'"
@@ -34,7 +42,11 @@
          </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>
@@ -71,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({
  // 列表数据
@@ -107,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();
@@ -115,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);
@@ -125,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) {
@@ -133,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"));
            }
          },
        },
@@ -158,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") })
+        }`
+      );
    }
  });
 };
@@ -218,6 +266,24 @@ onMounted(() => {
        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;
--- a/src/components/DataList/CoverLists.vue
+++ b/src/components/DataList/CoverLists.vue
@@ -18,14 +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"
-            />
-            <n-avatar
+            >
+              <template #placeholder>
+                <div class="cover-loading">
+                  <n-spin size="small" />
+                </div>
+              </template>
+            </n-image>
+            <n-image
+              lazy
              class="shadow"
-              :src="item.cover.replace(/^http:/, 'https:') + '?param=300y300'"
+              preview-disabled
+              :src="getCoverUrl(item.cover, 300)"
              fallback-src="/images/pic/default.png"
            />
            <n-icon class="play" size="40">
@@ -101,16 +111,20 @@ import {
  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: {
@@ -172,7 +186,7 @@ const openRightMenu = (e, data) => {
    rightMenuOptions.value = [
      {
        key: "update",
-        label: "编辑歌单",
+        label: t("menu.update"),
        show:
          router.currentRoute.value.name === "user-playlists" ? true : false,
        props: {
@@ -184,7 +198,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "del",
-        label: "删除歌单",
+        label: t("menu.del"),
        show:
          router.currentRoute.value.name === "user-playlists" ? true : false,
        props: {
@@ -196,7 +210,9 @@ const openRightMenu = (e, data) => {
      },
      {
        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 &&
@@ -213,7 +229,9 @@ const openRightMenu = (e, data) => {
      },
      {
        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 &&
@@ -229,7 +247,13 @@ const openRightMenu = (e, data) => {
      },
      {
        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) {
@@ -239,16 +263,13 @@ 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"));
            }
          },
        },
@@ -288,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();
        }
      });
@@ -324,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
    );
  }
 };
@@ -401,8 +455,27 @@ onMounted(() => {
        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;
@@ -517,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
@@ -2,10 +2,11 @@
  <Transition mode="out-in">
    <div class="datalists" id="datalists" v-if="listData[0]">
      <n-card
-        v-for="item in listData"
+        v-for="(item, index) in listData"
        :key="item"
+        :id="'song' + index"
        :class="
-          music.getPlaySongData && music.getPlaySongData.id == item.id
+          music.getPlaySongData && music.getPlaySongData?.id == item?.id
            ? 'songs play'
            : 'songs'
        "
@@ -25,42 +26,43 @@
      >
        <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"
        />
-        <div class="num" v-else-if="item.num">
-          <n-text :depth="2" v-html="item.num" />
+        <div class="num" v-else-if="item?.num">
+          <n-text :depth="2" v-html="item?.num" />
        </div>
        <div class="name">
          <div class="title">
            <n-text
              class="text-hidden"
              depth="2"
-              v-html="item.name"
-              @click.stop="jumpLink(item.id, 1)"
+              v-html="item?.name"
+              @click.stop="jumpLink(item?.id, 1)"
            />
            <n-tag
-              v-if="item.fee == 1 || item.fee == 4"
+              v-if="item?.fee == 1 || item?.fee == 4"
              class="vip"
              round
              :bordered="false"
              size="small"
            >
-              {{ item.fee == 1 ? "VIP" : "数字专辑" }}
+              {{ item?.fee == 1 ? "VIP" : "EP" }}
            </n-tag>
            <n-tag
-              v-if="item.pc"
+              v-if="item?.pc"
              class="cloud"
              round
              type="info"
              size="small"
              :bordered="false"
            >
-              云盘
+              {{ $t("general.name.cloud") }}
            </n-tag>
            <n-tag
-              v-if="item.mv"
+              v-if="item?.mv"
              class="mv"
              round
              type="warning"
@@ -73,19 +75,19 @@
          </div>
          <div class="meta">
            <AllArtists
-              v-if="item.artist"
+              v-if="item?.artist"
              class="text-hidden"
-              :artistsData="item.artist"
+              :artistsData="item?.artist"
            />
            <n-text
              class="alia text-hidden"
              depth="3"
-              v-if="item.alia && item.alia[0]"
+              v-if="item?.alia[0]"
              v-html="item.alia[0]"
            />
          </div>
        </div>
-        <div class="album" v-if="!hideAlbum && item.album">
+        <div class="album" v-if="!hideAlbum && item?.album">
          <n-text
            v-html="item.album.name"
            @click.stop="jumpLink(item.album.id, 10)"
@@ -96,13 +98,13 @@
            class="like"
            size="20"
            @click.stop="
-              music.getSongIsLike(item.id)
-                ? music.changeLikeList(item.id, false)
-                : music.changeLikeList(item.id, true)
+              music.getSongIsLike(item?.id)
+                ? music.changeLikeList(item?.id, false)
+                : music.changeLikeList(item?.id, true)
            "
          >
            <Like
-              :theme="music.getSongIsLike(item.id) ? 'filled' : 'outline'"
+              :theme="music.getSongIsLike(item?.id) ? 'filled' : 'outline'"
            />
          </n-icon>
          <n-icon
@@ -164,7 +166,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 +184,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,7 +198,7 @@
              <n-icon size="20">
                <ListAdd theme="filled" />
              </n-icon>
-              <n-text>添加到歌单</n-text>
+              <n-text>{{ $t("menu.add") }}</n-text>
            </div>
            <div
              class="item"
@@ -210,7 +212,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 +221,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 +231,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 +245,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 +266,30 @@
              <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'"
+              class="item"
+              @click="
+                () => {
+                  router.push({
+                    path: '/search/songs',
+                    query: {
+                      keywords: drawerData.name,
+                      page: 1,
+                    },
+                  });
+                  drawerShow = false;
+                }
+              "
+            >
+              <n-icon size="20">
+                <Search theme="filled" />
+              </n-icon>
+              <n-text>{{ $t("menu.search") }}</n-text>
            </div>
            <div
              v-if="router.currentRoute.value.name === 'user-cloud'"
@@ -279,7 +304,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 +319,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>
@@ -332,12 +357,14 @@ 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();
@@ -369,22 +396,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 () => {
@@ -406,7 +417,7 @@ const openRightMenu = (e, data) => {
    rightMenuOptions.value = [
      {
        key: "play",
-        label: "立即播放",
+        label: t("menu.play"),
        icon: renderIcon(PlayOne),
        props: {
          onClick: () => {
@@ -416,7 +427,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "nextPlay",
-        label: "下一首播放",
+        label: t("menu.nextPlay"),
        icon: renderIcon(AddMusic),
        show:
          music.getPersonalFmMode || music.getPlaySongData?.id == data.id
@@ -430,7 +441,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "add",
-        label: "添加到歌单",
+        label: t("menu.add"),
        icon: renderIcon(ListAdd),
        show: user.userLogin ? true : false,
        props: {
@@ -441,7 +452,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "download",
-        label: "歌曲下载",
+        label: t("menu.download"),
        icon: renderIcon(DownloadFour),
        props: {
          onClick: () => {
@@ -451,7 +462,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "comment",
-        label: "前往评论区",
+        label: t("menu.comment"),
        icon: renderIcon(Comments, false),
        props: {
          onClick: () => {
@@ -461,7 +472,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: {
@@ -477,7 +488,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: {
@@ -488,7 +499,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: {
@@ -503,7 +514,7 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "search",
-        label: "同名搜索",
+        label: t("menu.search"),
        icon: renderIcon(Search, false),
        props: {
          onClick: () => {
@@ -519,7 +530,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: () => {
@@ -529,7 +543,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: () => {
@@ -549,23 +566,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"));
        }
      });
    },
@@ -582,7 +618,7 @@ const openDrawer = (data) => {
 // 播放并添加
 const playSong = (data, song) => {
  console.log(data, song);
-  if (music.getPersonalFmMode) {
+  if (music.getPersonalFmMode && typeof $player !== "undefined") {
    soundStop($player);
    music.setPersonalFmMode(false);
  }
--- 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,7 +4,7 @@
    class="s-modal"
    v-model:show="showAboutModal"
    preset="card"
-    title="关于本站"
+    :title="$t('nav.avatar.about')"
    :bordered="false"
    transform-origin="center"
  >
--- a/src/components/DataModal/AddPlaylist.vue
+++ b/src/components/DataModal/AddPlaylist.vue
@@ -7,7 +7,7 @@
    :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,8 +63,10 @@
 <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);

@@ -66,15 +76,14 @@ 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,7 +91,7 @@ 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) {
@@ -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
@@ -3,28 +3,41 @@
    class="s-modal"
    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-popover trigger="hover" :keep-alive-on-hover="false">
+          <template #trigger>
+            <n-button
+              style="margin-left: 12px"
+              @click="toSearch(cloudMatchBeforeData.name)"
+            >
+              <template #icon>
+                <n-icon :component="Search" />
+              </template>
+            </n-button>
+          </template>
+          {{ $t("menu.search") }}
+        </n-popover>
        <n-button
          style="margin-left: 12px"
          :disabled="!cloudMatchValue.asid"
          @click="cloudMatchId = cloudMatchValue.asid.toString()"
        >
-          检查
+          {{ $t("general.dialog.check") }}
        </n-button>
      </n-form-item>
    </n-form>
@@ -42,13 +55,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,8 +73,11 @@
 <script setup>
 import { setCloudMatch } from "@/api/user";
 import { userStore } from "@/store";
+import { useI18n } from "vue-i18n";
+import { Search } from "@icon-park/vue-next";
 import SmallSongData from "@/components/DataList/SmallSongData.vue";

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

 // 歌曲信息纠正数据
@@ -77,27 +95,32 @@ 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"));
    }
  }
 };

+// 同名搜索
+const toSearch = (name) => {
+  window.open(`/search/songs?keywords=${name}&page=1`);
+};
+
 // 开启歌曲纠正
 const openCloudMatch = (data) => {
  cloudMatchValue.value.sid = data.id;
--- 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
@@ -3,7 +3,7 @@
    class="s-modal downloadModal"
    v-model:show="downloadModal"
    preset="card"
-    title="歌曲下载"
+    :title="$t('menu.download')"
    :bordered="false"
    :on-after-leave="closeDownloadModal"
  >
@@ -11,7 +11,7 @@
      <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="closeDownloadModal"> 取消 </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();

@@ -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);
@@ -100,17 +108,17 @@ const toSongDownload = (id, br, name) => {
            a.remove();
            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) => {
      closeDownloadModal();
-      console.error("下载出现错误：" + err);
-      $message.error("下载出现错误，请重试");
+      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) => {
      closeDownloadModal();
-      console.error("歌曲信息获取出现错误：" + err);
-      $message.error("歌曲信息获取出现错误，请重试");
+      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"),
    },
@@ -212,10 +220,10 @@ const openDownloadModal = (data) => {
      downloadModal.value = true;
      getMusicDetailData(data.id);
    } else {
-      $message.error("该歌曲需使用黑胶会员下载");
+      $message.error(t("general.message.needVip"));
    }
  } else {
-    $message.error("请登录后使用该功能");
+    $message.error(t("general.message.needLogin"));
  }
 };

--- a/src/components/DataModal/PlayListDrawer.vue
+++ b/src/components/DataModal/PlayListDrawer.vue
@@ -7,16 +7,18 @@
    :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 :native-scrollbar="false" closable>
      <template #header>
        <div class="text">
-          <n-text class="name">播放列表</n-text>
+          <n-text class="name">{{ $t("general.name.playlists") }}</n-text>
          <n-text class="num" :depth="3" v-if="music.getPlaylists.length > 0">
-            {{ music.getPlaylists.length }} 首
+            {{
+              $t("general.name.songSize", { size: music.getPlaylists.length })
+            }}
          </n-text>
        </div>
      </template>
@@ -73,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>
@@ -83,8 +85,10 @@
 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();

 // 播放列表显隐
@@ -94,14 +98,14 @@ const playListShow = ref(false);
 const changeIndex = (index) => {
  try {
    if (music.persistData.playSongIndex !== index) {
-      soundStop($player);
+      if (typeof $player !== "undefined") soundStop($player);
      music.persistData.playSongIndex = index;
      music.isLoadingSong = true;
      music.setPlayState(true);
    }
  } catch (err) {
-    console.error("切换失败：" + err);
-    $message.error("切换失败，请刷新后重试");
+    console.error(t("general.message.operationFailed"), err);
+    $message.error(t("general.message.operationFailed"));
  }
 };

--- a/src/components/DataModal/PlaylistUpdate.vue
+++ b/src/components/DataModal/PlaylistUpdate.vue
@@ -3,7 +3,7 @@
    class="s-modal"
    v-model:show="playlistUpdateModal"
    preset="card"
-    title="歌单编辑"
+    :title="$t('menu.update')"
    :bordered="false"
    :on-after-leave="closeUpdateModal"
  >
@@ -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="closeUpdateModal"> 取消 </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>
@@ -53,7 +57,9 @@
 import { playlistUpdate } from "@/api/playlist";
 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();
@@ -85,16 +91,16 @@ const toUpdatePlayList = (e) => {
      ).then((res) => {
        console.log(res);
        if (res.code === 200) {
-          $message.success("编辑成功");
+          $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"));
    }
  });
 };
--- a/src/components/Nav/index.vue
+++ b/src/components/Nav/index.vue
@@ -12,16 +12,18 @@
      </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">
@@ -83,9 +85,11 @@ import {
 } 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();
@@ -110,7 +114,7 @@ const renderIcon = (icon) => {
  return () => {
    return h(
      NIcon,
-      { style: { transform: "translateX(2px)" } },
+      { style: { transform: "translateX(2px) translateY(1px)" } },
      {
        default: () => icon,
      }
@@ -147,7 +151,9 @@ const userDataRender = () => {
            { depth: 2 },
            {
              default: () =>
-                user.userLogin ? user.getUserData.nickname : "未登录",
+                user.userLogin
+                  ? user.getUserData.nickname
+                  : t("nav.avatar.notLogin"),
            }
          ),
        ]),
@@ -173,8 +179,8 @@ const userDataRender = () => {
                            "Lv." + user.getUserOtherData.level.level,
                        }
                      )
-                    : "等级信息获取失败"
-                  : "登录后享受完整功能",
+                    : t("nav.avatar.loginError")
+                  : t("nav.avatar.notLoginSubtitle"),
            }
          ),
        ]),
@@ -184,141 +190,155 @@ 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: renderIcon(h(History)),
-  },
-  {
-    label: "全局设置",
-    key: "setting",
-    icon: renderIcon(h(SettingTwo)),
-  },
-  {
-    label: () => {
-      return h(
-        NText,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () => (user.userLogin ? "退出登录" : "登录账号"),
-        }
-      );
+    {
+      label: () => {
+        return h(
+          NText,
+          { style: { transform: "translateX(2px) translateY(1px)" } },
+          {
+            default: () =>
+              setting.getSiteTheme == "light"
+                ? t("nav.avatar.dark")
+                : t("nav.avatar.light"),
+          }
+        );
+      },
+      key: "changeTheme",
+      icon: () => {
+        return h(
+          NIcon,
+          { style: { transform: "translateX(2px) translateY(1px)" } },
+          {
+            default: () =>
+              setting.getSiteTheme == "light" ? h(Moon) : h(SunOne),
+          }
+        );
+      },
    },
-    key: "user",
-    icon: () => {
-      return h(
-        NIcon,
-        { style: { transform: "translateX(2px)" } },
-        {
-          default: () => (user.userLogin ? h(Logout) : h(Login)),
-        }
-      );
+    {
+      label: t("nav.avatar.history"),
+      key: "history",
+      icon: renderIcon(h(History)),
    },
-  },
-  {
-    label: "关于本站",
-    key: "about",
-    icon: renderIcon(h(Info)),
-  },
-]);
+    {
+      label: t("nav.avatar.setting"),
+      key: "setting",
+      icon: renderIcon(h(SettingTwo)),
+    },
+    {
+      label: () => {
+        return h(
+          NText,
+          { style: { transform: "translateX(2px) translateY(1px)" } },
+          {
+            default: () =>
+              user.userLogin ? t("nav.avatar.logout") : t("nav.avatar.login"),
+          }
+        );
+      },
+      key: "user",
+      icon: () => {
+        return h(
+          NIcon,
+          { style: { transform: "translateX(2px) translateY(1px)" } },
+          {
+            default: () => (user.userLogin ? h(Logout) : h(Login)),
+          }
+        );
+      },
+    },
+    {
+      label: t("nav.avatar.about"),
+      key: "about",
+      icon: renderIcon(h(Info)),
+    },
+  ];
+};

 // 移动端菜单
-const mbMenuOptions = ref([
-  {
-    label: "首页",
-    key: "/",
-    icon: renderIcon(h(HomeTwo)),
-  },
-  {
-    label: "发现",
-    key: "/discover",
-    icon: renderIcon(h(FindOne)),
-  },
-  {
-    label: "我的",
-    key: "/user",
-    icon: renderIcon(h(Me)),
-  },
-]);
+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) => {
@@ -329,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":
@@ -347,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();
@@ -382,7 +403,21 @@ watch(
  }
 );

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

--- 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,23 +52,23 @@ 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: "100条/页",
+    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"
--- 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,70 +1,74 @@
 <template>
-  <div
-    class="papersonalfm"
-    v-if="music.getPersonalFmData.id"
-    :style="
-      'background-image: url(' +
-      music.getPersonalFmData.album.picUrl.replace(/^http:/, 'https:') +
-      '?param=300y300)'
-    "
-  >
-    <div class="gray" />
-    <img
-      class="pic"
-      :src="
-        music.getPersonalFmData.album.picUrl.replace(/^http:/, 'https:') +
-        '?param=300y300'
-      "
-      alt="pic"
-    />
-    <div class="data">
-      <div class="info">
-        <span
-          class="name text-hidden"
-          @click="router.push(`/song?id=${music.getPersonalFmData.id}`)"
-        >
-          {{ music.getPersonalFmData.name }}
-        </span>
-        <AllArtists
-          class="text-hidden"
-          :artistsData="music.getPersonalFmData.artist"
-        />
-      </div>
-      <div class="controls">
-        <n-icon
-          class="state"
-          size="46"
-          :component="
-            music.getPersonalFmMode
-              ? music.getPlayState
-                ? PauseCircleFilled
+  <Transition mode="out-in">
+    <div
+      v-if="music.getPersonalFmData?.id"
+      class="papersonalfm"
+      :style="`background-image: url(${music.getPersonalFmData.album.picUrl.replace(
+        /^http:/,
+        'https:'
+      )}?param=300y300)`"
+    >
+      <div class="gray" />
+      <img
+        class="pic"
+        :src="
+          music.getPersonalFmData.album.picUrl.replace(/^http:/, 'https:') +
+          '?param=300y300'
+        "
+        alt="pic"
+      />
+      <div class="data">
+        <div class="info">
+          <span
+            class="name text-hidden"
+            @click="router.push(`/song?id=${music.getPersonalFmData.id}`)"
+          >
+            {{ music.getPersonalFmData.name }}
+          </span>
+          <AllArtists
+            class="text-hidden"
+            :artistsData="music.getPersonalFmData.artist"
+          />
+        </div>
+        <div class="controls">
+          <n-icon
+            class="state"
+            size="46"
+            :component="
+              music.getPersonalFmMode
+                ? music.getPlayState
+                  ? PauseCircleFilled
+                  : PlayCircleFilled
                : PlayCircleFilled
-              : PlayCircleFilled
-          "
-          @click="fmPlayOrPause"
-        />
-        <n-icon
-          class="next"
-          size="30"
-          :component="SkipNextRound"
-          @click="fmNext"
-        />
-        <n-icon
-          class="dislike"
-          size="20"
-          :component="ThumbDownRound"
-          @click="music.setFmDislike(music.getPersonalFmData.id)"
-        />
-        <div class="radio">
-          <div class="icon">
-            <n-icon size="20" :component="RadioFilled" />
-            <span>私人FM</span>
+            "
+            @click="fmPlayOrPause"
+          />
+          <n-icon
+            class="next"
+            size="30"
+            :component="SkipNextRound"
+            @click="fmNext"
+          />
+          <n-icon
+            class="dislike"
+            size="20"
+            :component="ThumbDownRound"
+            @click="music.setFmDislike(music.getPersonalFmData.id)"
+          />
+          <div class="radio">
+            <div class="icon">
+              <n-icon size="20" :component="RadioFilled" />
+              <span>{{ $t("home.modules.papersonalfm.title") }}</span>
+            </div>
+            <span class="tip" v-if="!user.userLogin">
+              {{ $t("home.modules.papersonalfm.subtitle") }}
+            </span>
          </div>
-          <span class="tip" v-if="!user.userLogin">未登录模式</span>
        </div>
      </div>
    </div>
-  </div>
+    <n-skeleton v-else class="papersonalfm" />
+  </Transition>
 </template>

 <script setup>
@@ -110,7 +114,7 @@ onMounted(() => {
  display: flex;
  align-items: center;
  padding: 20px;
-  height: 200px;
+  height: 100%;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
@@ -127,8 +131,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 +176,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);
@@ -236,7 +239,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
--- 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
@@ -53,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">
@@ -78,7 +78,7 @@
                  <span>{{
                    music.getPlaySongData
                      ? music.getPlaySongData.name
-                      : "暂无歌曲"
+                      : $t("other.noSong")
                  }}</span>
                  <span
                    v-if="music.getPlaySongData && music.getPlaySongData.alia"
--- 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
@@ -27,7 +27,9 @@
        <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">
--- 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,22 +1,22 @@
 <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"
@@ -26,115 +26,123 @@
    <!-- 普通歌词 -->
    <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>

@@ -165,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(
@@ -220,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.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);
-    }
+  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/index.vue
+++ b/src/components/Player/index.vue
@@ -4,6 +4,7 @@
      v-show="music.getPlaylists[0] && music.showPlayBar"
      class="player"
      content-style="padding: 0"
+      @click.stop="setting.bottomClick ? music.setBigPlayerState(true) : null"
    >
      <div class="slider">
        <span>{{ music.getPlaySongTime.songTimePlayed }}</span>
@@ -52,67 +53,82 @@
              @click.stop="router.push(`/song?id=${music.getPlaySongData.id}`)"
            >
              {{
-                music.getPlaySongData ? music.getPlaySongData.name : "暂无歌曲"
+                music.getPlaySongData
+                  ? music.getPlaySongData.name
+                  : $t("other.noSong")
              }}
            </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"
-                  >
+              <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-for="item in music.getPlaySongLyric.yrc[
-                        music.getPlaySongLyricIndex
-                      ].content"
-                      :key="item"
-                      :depth="3"
+                      v-else-if="
+                        setting.showYrc &&
+                        music.getPlaySongLyricIndex != -1 &&
+                        music.getPlaySongLyric.hasYrc
+                      "
+                      class="lrc text-hidden"
                    >
-                      {{ item.content }}
+                      <n-text
+                        v-for="item in music.getPlaySongLyric.yrc[
+                          music.getPlaySongLyricIndex
+                        ].content"
+                        :key="item"
+                        :depth="3"
+                      >
+                        {{ item.content }}
+                      </n-text>
                    </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
-                    "
-                  />
+                    <n-text
+                      v-else-if="
+                        music.getPlaySongLyricIndex != -1 &&
+                        music.getPlaySongLyric?.lrc[0]
+                      "
+                      class="lrc"
+                    >
+                      <Transition name="fade" mode="out-in">
+                        <n-text
+                          class="text-hidden"
+                          :key="music.getPlaySongLyricIndex"
+                          :depth="3"
+                        >
+                          {{
+                            music.getPlaySongLyric.lrc[
+                              music.getPlaySongLyricIndex
+                            ]?.content
+                          }}
+                        </n-text>
+                      </Transition>
+                    </n-text>
+                    <AllArtists
+                      v-else
+                      class="text-hidden"
+                      :artistsData="music.getPlaySongData.artist"
+                    />
+                  </Transition>
+                </template>
+                <template v-else>
                  <AllArtists
-                    v-else
                    class="text-hidden"
                    :artistsData="music.getPlaySongData.artist"
                  />
-                </Transition>
-              </template>
-              <template v-else>
-                <AllArtists
-                  class="text-hidden"
-                  :artistsData="music.getPlaySongData.artist"
-                />
-              </template>
+                </template>
+              </Transition>
            </div>
          </div>
        </div>
        <div class="control">
          <n-icon
            v-if="!music.getPersonalFmMode"
-            title="上一曲"
            class="prev"
            size="30"
            :component="SkipPreviousRound"
@@ -128,7 +144,6 @@
          <div class="play-state">
            <n-icon
              size="46"
-              :title="music.getPlayState ? '暂停' : '播放'"
              :component="
                music.getPlayState ? PauseCircleFilled : PlayCircleFilled
              "
@@ -143,65 +158,108 @@
          />
        </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>
+          <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>
+            {{
+              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.stop="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-popover
+              trigger="hover"
+              placement="top-start"
+              :keep-alive-on-hover="false"
+            >
+              <template #trigger>
+                <n-icon
+                  size="28"
+                  :component="
+                    persistData.playVolume == 0
+                      ? VolumeOffRound
+                      : persistData.playVolume < 0.4
+                      ? VolumeMuteRound
+                      : persistData.playVolume < 0.7
+                      ? VolumeDownRound
+                      : VolumeUpRound
+                  "
+                  @click.stop="volumeMute"
+                />
+              </template>
+              {{
+                persistData.playVolume > 0
+                  ? $t("general.name.mute")
+                  : $t("general.name.unmute")
+              }}
+            </n-popover>
            <n-slider
              class="volmePg"
              v-model:value="persistData.playVolume"
@@ -260,6 +318,7 @@ import {
 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";
@@ -268,6 +327,7 @@ import ColorThief from "colorthief";
 import BigPlayer from "./BigPlayer.vue";
 import "vue-slider-component/theme/default.css";

+const { t } = useI18n();
 const router = useRouter();
 const setting = settingStore();
 const music = musicStore();
@@ -302,7 +362,7 @@ 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) => {
            player.value = createSound(
@@ -313,7 +373,7 @@ const getPlaySongData = (data, level = setting.songLevel) => {
          if (useUnmServerHas && setting.useUnmServer) {
            getMusicNumUrlData(id);
          } else {
-            $message.warning("当前歌曲播放失败，跳至下一首");
+            $message.warning(t("general.message.playError"));
            music.setPlaySongIndex("next");
          }
        }
@@ -326,24 +386,45 @@ const getPlaySongData = (data, level = setting.songLevel) => {
  } catch (err) {
    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:/, ""));
-        player.value = createSound(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");
    });
 };
@@ -370,6 +451,30 @@ 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) {
@@ -457,6 +562,15 @@ watch(
 .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;
@@ -582,15 +696,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;
-          }
        }
      }
    }
--- 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,14 +62,30 @@ const changeTheme = () => {
  }
 };

+// 根据系统决定明暗切换
+const osThemeChange = (val) => {
+  if (setting.themeAuto) {
+    val == "dark" ? (setting.theme = "dark") : (setting.theme = "light");
+  }
+};
+
 // 配置主题色
 const changeThemeColor = (val) => {
-  const color = themeColorData[val];
-  console.log("当前主题色：" + val, color);
-  themeOverrides.value = {
-    common: color,
-  };
-  setting.themeData = color;
+  let color = null;
+  if (val !== "custom") {
+    color = themeColorData[val];
+    console.log("当前主题色：" + val, color);
+    themeOverrides.value = {
+      common: color,
+    };
+    setting.themeData = color;
+  } else {
+    color = setting.themeData;
+    console.log("当前主题色为自定义：" + val, color);
+    themeOverrides.value = {
+      common: color,
+    };
+  }
  setCssVariable("--main-color", color.primaryColor);
  setCssVariable("--main-second-color", color.primaryColor + "1f");
  setCssVariable("--main-boxshadow-color", color.primaryColor + "26");
@@ -109,11 +125,7 @@ watch(
 watch(
  () => osThemeRef.value,
  (val) => {
-    if (setting.themeAuto) {
-      val == "dark"
-        ? setting.setSiteTheme("dark")
-        : setting.setSiteTheme("light");
-    }
+    osThemeChange(val);
  }
 );

@@ -122,9 +134,14 @@ watch(
  () => setting.themeType,
  (val) => changeThemeColor(val)
 );
+watch(
+  () => setting.themeData,
+  (val) => changeThemeColor(val.label)
+);

 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"));
    },
  });
 };
@@ -402,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;
      }
    }
@@ -420,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,380 @@
+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",
+    getCode: "Get the verification code",
+    getCodeAgain: "Try again",
+    codeSuccess: "Verification code sent successfully",
+    codeError: "Failed to send verification code, please try again",
+    canNotUse: "This login mode is not secure and is temporarily disabled",
+    loggedIn: "Already logged in, please don't log in again",
+    loginStatus1: "Please open APP and scan the code to login",
+    loginStatus2: "The current QR code is invalid, please scan it again",
+    loginStatus3: "Scan successfully, please confirm login in the client",
+    loginStatus4: "Login successfully",
+    loginStatus5: "Login error, please try again",
+    loginStatus6: "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",
+      mute: "Mute",
+      unmute: "Unmute",
+      customTheme: "Custom theme",
+      primaryColor: "Primary Color",
+    },
+    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",
+    bottomClick: "Bottomclick to expand Player ",
+    bottomClickTip: "It may cause mistouch, please open with caution ",
+  },
+};
--- a/src/locale/lang/zh-CN.js
+++ b/src/locale/lang/zh-CN.js
@@ -0,0 +1,363 @@
+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: "邮箱登录",
+    getCode: "获取验证码",
+    getCodeAgain: "重新获取",
+    codeSuccess: "验证码发送成功",
+    codeError: "验证码发送失败，请重试",
+    canNotUse: "该登录方式不安全，暂时禁用",
+    loggedIn: "已登录，请勿重复登录",
+    loginStatus1: "请打开云音乐 APP 扫码登录",
+    loginStatus2: "当前二维码已失效，请重新扫码",
+    loginStatus3: "扫描成功，请在客户端确认登录",
+    loginStatus4: "登录成功",
+    loginStatus5: "登录出错，请重试",
+    loginStatus6: "登录二维码生成失败",
+  },
+  // 菜单
+  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: "列表循环",
+      mute: "静音",
+      unmute: "取消静音",
+      customTheme: "自定义主题",
+      primaryColor: "主色",
+    },
+    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: "除当前播放歌词外模糊显示，实验性功能",
+    bottomClick: "点击底栏展开播放器",
+    bottomClickTip: "可能会造成误触，请谨慎开启",
+  },
+};
--- 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
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import routes from "./routes";
 import { getLoginState } from "@/api/login";
-import { userStore } from "@/store";
+import { userStore, musicStore } from "@/store";

 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
@@ -11,7 +11,11 @@ const router = createRouter({
 // 路由守卫
 router.beforeEach((to, from, next) => {
  const user = userStore();
-  $loadingBar.start();
+  const music = musicStore();
+  // 关闭播放器
+  music.setBigPlayerState(false);
+  // 开始进度条
+  if (typeof $loadingBar !== "undefined") $loadingBar.start();
  // 判断是否需要登录
  if (to.meta.needLogin) {
    getLoginState()
@@ -45,7 +49,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
@@ -9,6 +9,7 @@ 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: () => {
@@ -149,7 +150,7 @@ const useMusicDataStore = defineStore("musicData", {
    setPersonalFmMode(value) {
      this.persistData.personalFmMode = value;
      if (value) {
-        soundStop($player);
+        if (typeof $player !== "undefined") soundStop($player);
        if (this.persistData.personalFmData?.id) {
          this.persistData.playlists = [];
          this.persistData.playlists.push(this.persistData.personalFmData);
@@ -182,7 +183,7 @@ const useMusicDataStore = defineStore("musicData", {
            } else {
              this.persistData.personalFmData = fmData;
              if (this.persistData.personalFmMode) {
-                soundStop($player);
+                if (typeof $player !== "undefined") soundStop($player);
                this.persistData.playlists = [];
                this.persistData.playlists.push(fmData);
                this.persistData.playSongIndex = 0;
@@ -190,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"));
      }
    },
    // 更改喜欢列表
@@ -229,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"));
      }
    },
    // 更改音乐播放状态
@@ -284,7 +280,6 @@ const useMusicDataStore = defineStore("musicData", {
    // 添加歌单至播放列表
    setPlaylists(value) {
      this.persistData.playlists = value.slice();
-      console.log(`已添加${value.length}首歌曲至播放列表`);
    },
    // 更改每日推荐数据
    setDailySongs(value) {
@@ -303,8 +298,6 @@ const useMusicDataStore = defineStore("musicData", {
            mv: v.mv ? v.mv : null,
          });
        });
-      } else {
-        $message.error("处理每日推荐发生错误");
      }
    },
    // 歌词处理
@@ -313,12 +306,18 @@ 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("该歌曲暂无歌词");
-        this.playSongLyric = [];
+        this.playSongLyric = {
+          lrc: [],
+          yrc: [],
+          hasTran: false,
+          hasTran: false,
+          hasYrc: false,
+        };
      }
    },
    // 歌曲播放进度
@@ -346,84 +345,111 @@ const useMusicDataStore = defineStore("musicData", {
      const setting = settingStore();
      const lrcType = !this.playSongLyric.hasYrc || !setting.showYrc;
      const lyrics = lrcType ? this.playSongLyric.lrc : this.playSongLyric.yrc;
-      const index = lyrics.findIndex((v) => v.time >= value.currentTime);
+      const index = lyrics?.findIndex((v) => v?.time >= value?.currentTime);
      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;
+      // 如果 $player 未定义，返回 false
+      if (typeof $player === "undefined") return false;
+      // 停止播放当前歌曲
      soundStop($player);
-      this.isLoadingSong = true;
+      // 根据播放模式设置加载状态
+      if (this.persistData.playSongMode !== "single") {
+        this.isLoadingSong = true;
+      }
+      // 如果是个人 FM 模式，设置个人 FM 数据
      if (this.persistData.personalFmMode) {
        this.setPersonalFmData();
      } else {
-        let listLength = this.persistData.playlists.length;
-        let listMode = this.persistData.playSongMode;
-        // 根据当前播放模式调整
+        const listLength = this.persistData.playlists.length;
+        const listMode = this.persistData.playSongMode;
+        // 根据当前播放模式调整播放索引
        if (listMode === "normal") {
          this.persistData.playSongIndex += type === "next" ? 1 : -1;
        } else if (listMode === "random") {
          this.persistData.playSongIndex = Math.floor(
            Math.random() * listLength
          );
-        } else if (listMode === "single" && typeof $player !== "undefined") {
-          soundStop($player);
+        } else if (listMode === "single") {
+          // 单曲循环模式
+          console.log("单曲循环模式");
          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;
-          soundStop($player);
-          fadePlayOrPause($player, "play", this.persistData.playVolume);
+        // 检查播放索引是否越界，并根据情况进行处理
+        if (listMode !== "single") {
+          if (this.persistData.playSongIndex < 0) {
+            this.persistData.playSongIndex = listLength - 1;
+          } else if (this.persistData.playSongIndex >= listLength) {
+            this.persistData.playSongIndex = 0;
+            soundStop($player);
+            fadePlayOrPause($player, "play", this.persistData.playVolume);
+          }
+          // 如果播放列表长度大于 1，则停止播放当前歌曲
+          if (listLength > 1) {
+            soundStop($player);
+          }
+          // 在下一个事件循环中设置播放状态
+          nextTick().then(() => {
+            this.setPlayState(true);
+          });
        }
-        if (listMode !== "single" && listLength > 1) {
-          soundStop($player);
-        }
-        nextTick().then(() => {
-          this.setPlayState(true);
-        });
      }
    },
    // 添加歌曲至播放列表
    addSongToPlaylists(value, play = true) {
+      // 停止当前播放
+      if (typeof $player !== "undefined") soundStop($player);
+      // 判断与上一次播放歌曲是否一致
      const index = this.persistData.playlists.findIndex(
        (o) => o.id === value.id
      );
-      // 判断与上一次播放歌曲是否一致
      try {
        if (
          value.id !==
          this.persistData.playlists[this.persistData.playSongIndex]?.id
        ) {
-          console.log("播放歌曲与上一次不一致");
-          soundStop($player);
+          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;
@@ -435,6 +461,9 @@ const useMusicDataStore = defineStore("musicData", {
    },
    // 在当前播放歌曲后添加
    addSongToNext(value) {
+      // 更改播放模式为列表循环
+      this.persistData.playSongMode = "normal";
+      // 查找是否存在于播放列表
      const index = this.persistData.playlists.findIndex(
        (o) => o.id === value.id
      );
@@ -456,10 +485,11 @@ 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--;
@@ -467,7 +497,7 @@ const useMusicDataStore = defineStore("musicData", {
        // 如果删除的是当前播放歌曲，则重置播放器
        soundStop($player);
      }
-      $message.success(name + " 已从播放列表中移除");
+      $message.success(name + " " + getLanguageData("removeSong"));
      this.persistData.playlists.splice(index, 1);
      // 检查当前播放歌曲的索引是否超出了列表范围
      if (this.persistData.playSongIndex >= this.persistData.playlists.length) {
@@ -481,7 +511,7 @@ const useMusicDataStore = defineStore("musicData", {
        if (res.code == 200) {
          this.catList = res;
        } else {
-          $message.error("歌单分类获取失败");
+          $message.error(getLanguageData("getDataError"));
        }
      });
      if (highquality) {
@@ -489,7 +519,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,7 +46,7 @@ const useSettingDataStore = defineStore("settingData", {
      // 音乐频谱
      musicFrequency: false,
      // 鼠标移入歌词区域暂停滚动
-      lrcMousePause: true,
+      lrcMousePause: false,
      // 是否使用网易云解灰
      useUnmServer: true,
      // 播放背景是否显示图片
@@ -49,11 +54,17 @@ const useSettingDataStore = defineStore("settingData", {
      // 是否显示前奏等待
      countDownShow: true,
      // 是否显示歌词设置
-      showLyricSetting: true,
+      showLyricSetting: false,
      // 歌曲渐入渐出
      songVolumeFade: true,
      // 列表默认数量
      listNumber: 30,
+      // 记忆上次播放位置
+      memoryLastPlaybackPosition: true,
+      // 语言
+      language: "zh-CN",
+      // 底栏点击展开播放器
+      bottomClick: false,
    };
  },
  getters: {
@@ -66,7 +77,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/userData.js
+++ b/src/store/userData.js
@@ -8,6 +8,7 @@ import {
  getUserAlbum,
 } from "@/api/user";
 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"));
          });
      }
    },
@@ -108,59 +109,58 @@ const useUserDataStore = defineStore("userData", {
    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),
-                  });
-                }
-              });
-              if (typeof callback === "function") {
-                callback();
+          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),
+                });
              }
-              this.userPlayLists.isLoading = false;
-            } else {
-              this.userPlayLists.isLoading = false;
-              $message.error("用户歌单为空");
+            });
+            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"));
      }
    },
    // 更改用户收藏歌手
@@ -180,21 +180,23 @@ 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"));
      }
    },
    // 更改用户收藏专辑
@@ -220,18 +222,20 @@ const useUserDataStore = defineStore("userData", {
            offset += 30;
            console.log(totalCount, offset, this.userAlbum.list);
          }
-          if (typeof callback === "function") {
+          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
@@ -113,6 +113,22 @@ body,
  }
 }

+// NSlider
+.n-slider {
+  &:hover {
+    .n-slider-rail {
+      .n-slider-rail__fill {
+        background-color: var(--main-color);
+      }
+    }
+  }
+  .n-slider-rail {
+    .n-slider-rail__fill {
+      background-color: var(--main-color);
+    }
+  }
+}
+
 // 文本超出隐藏
 .text-hidden {
  display: -webkit-box !important;
--- a/src/utils/Player.js
+++ b/src/utils/Player.js
@@ -3,9 +3,12 @@ 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;

@@ -36,38 +39,63 @@ export const createSound = (src, autoPlay = true) => {
      const sourceId = music.getPlaySongData?.sourceId
        ? music.getPlaySongData.sourceId
        : 0;
-      const isLogin = JSON.parse(localStorage.getItem("userData")).userLogin;
+      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);
-      sound?.seek(music.persistData.playSongTime.currentTime);
+      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) {
-        songScrobble(songId, sourceId).catch((err) => {
-          console.error("歌曲打卡失败：" + err);
-        });
+        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("音乐数据获取失败");
+        $message.error(getLanguageData("songLoadError"));
        return false;
      }
      testNumber = 0;
      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),
-          }),
-      });
+      const songName = music.getPlaySongData?.name;
+      const songArtist = music.getPlaySongData.artist[0]?.name;
+      // 播放通知
+      if (typeof $message !== "undefined" && songArtist !== null) {
+        $message.info(songName + " - " + songArtist, {
+          icon: () =>
+            h(NIcon, null, {
+              default: () => h(MusicNoteFilled),
+            }),
+        });
+      } else {
+        $message.warning(getLanguageData("songNotDetails"));
+      }
      console.log("开始播放：" + songName + " - " + songArtist);
+      setMediaSession(music);
      // 获取播放器信息
      timeupdateInterval = setInterval(() => checkAudioTime(sound, music), 250);
-      setMediaSession(music);
      // 写入播放历史
      music.setPlayHistory(music.getPlaySongData);
      // 播放时页面标题
@@ -94,23 +122,23 @@ export const createSound = (src, autoPlay = true) => {
    // 错误事件
    sound?.on("loaderror", () => {
      if (testNumber > 2) {
-        $message.error("歌曲播放失败");
-        console.error("歌曲播放失败");
+        $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("歌曲重试次数过多，请刷新后重试", {
+        $message.error(getLanguageData("songLoadTest"), {
          closable: true,
          duration: 0,
        });
      }
    });
    sound?.on("playerror", () => {
-      $message.error("歌曲播放出错");
-      console.error("歌曲播放出错");
+      $message.error(getLanguageData("songPlayError"));
+      console.error(getLanguageData("songPlayError"));
      music.setPlayState(false);
    });
    // 生成频谱
@@ -118,8 +146,8 @@ export const createSound = (src, autoPlay = true) => {
    // 返回音频对象
    return (window.$player = sound);
  } catch (err) {
-    $message.error("音乐播放器初始化失败");
-    console.error("音乐播放器初始化失败：" + err);
+    $message.error(getLanguageData("songLoadError"));
+    console.error(getLanguageData("songLoadError"), err);
  }
 };

@@ -136,8 +164,8 @@ export const setVolume = (sound, volume) => {
 * @param {number} seek - 设置的进度值，0-1之间的浮点数
 */
 export const setSeek = (sound, seek) => {
-  // const music = musicStore();
-  // music.persistData.playSongTime.currentTime = seek;
+  const music = musicStore();
+  music.persistData.playSongTime.currentTime = seek;
  sound?.seek(seek);
 };

--- 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,90 @@
+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: "歌曲重试次数过多，请刷新后重试",
+    songNotDetails: "歌曲详细信息获取失败，可尝试歌曲匹配",
+  },
+  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",
+    songNotDetails: "Song details failed to get, try song match",
+  },
+};
+
+/**
+ * 返回翻译文本
+ * @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,16 +42,16 @@ axios.interceptors.response.use(
      const data = error.response.data;
      switch (error.response.status) {
        case 401:
-          console.error("无权限访问");
+          console.error(data.message ? data.message : "无权限访问");
          break;
        case 301:
-          console.error("请求发生重定向");
+          console.error(data.message ? data.message : "请求发生重定向");
          break;
        case 404:
-          console.error("请求资源不存在");
+          console.error(data.message ? data.message : "请求资源不存在");
          break;
        case 500:
-          console.error("内部服务器错误");
+          console.error(data.message ? data.message : "内部服务器错误");
          break;
        default:
          console.error(data.message ? data.message : "请求失败，请稍后重试");
--- 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,15 +1,13 @@
 <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" />
@@ -25,9 +23,15 @@
          </n-text>
        </div>
        <div class="intr">
-          <span class="name">专辑简介</span>
+          <span class="name">{{
+            $t("general.name.desc", { name: $t("general.name.album") })
+          }}</span>
          <span class="desc text-hidden">
-            {{ albumDetail.description }}
+            {{
+              albumDetail.description
+                ? albumDetail.description
+                : $t("other.noDesc")
+            }}
          </span>
          <n-button
            class="all-desc"
@@ -37,19 +41,8 @@
            v-if="albumDetail?.description.length > 70"
            @click="albumDescShow = true"
          >
-            全部简介
+            {{ $t("general.name.allDesc") }}
          </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>
        <n-space class="tag" v-if="albumDetail.tags">
          <n-tag
@@ -67,7 +60,7 @@
            <template #icon>
              <n-icon :component="MusicList" />
            </template>
-            播放
+            {{ $t("general.name.play") }}
          </n-button>
          <n-dropdown
            placement="right-start"
@@ -91,27 +84,40 @@
          class="creator"
          @click="router.push(`/artist/songs?id=${albumDetail.artist.id}`)"
        >
+          <n-icon :depth="3" :component="People" />
          {{ albumDetail.artist.name }}
        </n-text>
-        <div class="time">
-          <div class="createTime">
-            <span class="num">发行时间：</span>
-            {{ getLongTime(albumDetail.publishTime) }}
+        <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>
@@ -132,10 +138,22 @@ import { NIcon, NAvatar, NText } from "naive-ui";
 import { getAlbum, likeAlbum } from "@/api/album";
 import { useRouter } from "vue-router";
 import { getSongTime, getLongTime } from "@/utils/timeTools";
-import { MusicList, LinkTwo, More, Like, Unlike } from "@icon-park/vue-next";
+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";
+import getCoverUrl from "@/utils/getCoverUrl";

+const { t } = useI18n();
 const router = useRouter();
 const user = userStore();
 const music = musicStore();
@@ -177,7 +195,10 @@ const setDropdownOptions = () => {
  dropdownOptions.value = [
    {
      key: "copy",
-      label: "复制专辑链接",
+      label: t("menu.copy", {
+        name: t("general.name.album"),
+        other: t("general.name.link"),
+      }),
      props: {
        onClick: () => {
          if (navigator.clipboard) {
@@ -185,12 +206,13 @@ const setDropdownOptions = () => {
              navigator.clipboard.writeText(
                `https://music.163.com/#/playlist?id=${albumId.value}`
              );
-              $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"));
          }
        },
      },
@@ -198,7 +220,9 @@ const setDropdownOptions = () => {
    },
    {
      key: "like",
-      label: isLikeOrDislike(albumId.value) ? "收藏专辑" : "取消收藏专辑",
+      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: () => {
@@ -216,7 +240,7 @@ const getAlbumData = (id) => {
    console.log(res);
    // 专辑信息
    albumDetail.value = res.album;
-    $setSiteTitle(res.album.name + " - 专辑");
+    $setSiteTitle(res.album.name + " - " + t("general.name.album"));
    // 专辑歌曲
    if (res.songs) {
      albumData.value = [];
@@ -236,7 +260,7 @@ const getAlbumData = (id) => {
        });
      });
    } else {
-      $message.error("获取专辑歌曲失败");
+      $message.error(t("general.message.acquisitionFailed"));
    }
  });
 };
@@ -272,27 +296,54 @@ const playAllSong = () => {
      music.setPlayState(true);
    }
  } catch (err) {
-    console.error("播放全部歌曲失败：" + err);
-    $message.error("播放全部歌曲失败，请重试");
+    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(`专辑${type == 1 ? "收藏成功" : "取消收藏成功"}`);
+      $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(`专辑${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(`专辑${type == 1 ? "收藏失败" : "取消收藏失败"}`);
-    console.error(`专辑${type == 1 ? "收藏失败：" : "取消收藏失败："}` + 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
+    );
  }
 };

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

 <style lang="scss" scoped>
-.playlist,
+.album,
 .loading {
  display: flex;
  flex-direction: row;
@@ -352,10 +403,21 @@ watch(
      justify-content: flex-start;
      width: 80%;
      height: 80%;
-      .n-avatar {
+      border-radius: 8px;
+      position: relative;
+      transition: transform 0.3s;
+      &:active {
+        transform: scale(0.95);
+      }
+      .coverImg {
        border-radius: 8px;
        width: 100%;
        height: 100%;
+        overflow: hidden;
+        z-index: 1;
+        :deep(img) {
+          width: 100%;
+        }
      }
      .album {
        height: 100%;
@@ -434,6 +496,8 @@ watch(
        font-weight: bold;
      }
      .creator {
+        display: flex;
+        align-items: center;
        margin-top: 6px;
        font-size: 16px;
        opacity: 0.8;
@@ -443,6 +507,9 @@ watch(
          opacity: 1;
          color: var(--main-color);
        }
+        .n-icon {
+          margin-right: 6px;
+        }
      }
      .time {
        margin-top: 8px;
@@ -454,10 +521,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;
+          }
        }
      }
    }
--- a/src/views/Artist/albums.vue
+++ b/src/views/Artist/albums.vue
@@ -51,7 +51,7 @@ const getArtistAblumsData = (id, limit = 30, offset = 0) => {
      $message.error("搜索内容为空");
    }
    // 请求后回顶
-    if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+    if (typeof $scrollToTop !== "undefined") $scrollToTop();
  });
 };

--- 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">
@@ -34,9 +38,11 @@ import { getArtistDetail, getArtistAllSongs } from "@/api/artist";
 import { getMusicDetail } from "@/api/song";
 import { useRouter } from "vue-router";
 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();

 // 歌手信息
@@ -91,15 +97,15 @@ const getArtistAllSongsData = (id, limit = 30, offset = 0, order = "hot") => {
          });
        });
      } else {
-        $message.error("歌手全部歌曲为空");
+        $message.error(t("general.message.acquisitionFailed"));
      }
-      // 请求后回顶并结束加载条
-      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"));
    });
 };

--- 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>
--- a/src/views/Artist/videos.vue
+++ b/src/views/Artist/videos.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
@@ -19,11 +19,11 @@
        class="s-modal"
        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>
@@ -128,9 +130,11 @@ import { useRouter } from "vue-router";
 import { musicStore } from "@/store";
 import { getHighqualityPlaylist, getTopPlaylist } from "@/api/playlist";
 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();

@@ -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"));
    }
  });
 };
@@ -315,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>
@@ -58,8 +60,10 @@
 import { getToplist } from "@/api/album";
 import { useRouter } from "vue-router";
 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(import.meta.env.VITE_SITE_TITLE);
+  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"
@@ -35,15 +35,9 @@
            :foreground="setting.themeData.primaryColor"
          />
        </n-card>
-        <span class="tip">{{ qrText }}</span>
+        <span class="tip">{{ loginStatus }}</span>
      </n-tab-pane>
-      <n-tab-pane name="phone" tab="手机号登录">
-        <n-alert
-          style="width: 100%; margin-top: -20px; margin-bottom: 12px"
-          type="warning"
-        >
-          该登录方式暂时无法使用
-        </n-alert>
+      <n-tab-pane name="phone" :tab="$t('login.phone')">
        <n-form
          class="phone"
          ref="phoneFormRef"
@@ -83,12 +77,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-tab-pane>
-      <n-tab-pane name="email" tab="邮箱登录"> 还没搞 </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-tabs>
  </div>
 </template>
@@ -106,17 +107,20 @@ import {
 import { useRouter } from "vue-router";
 import { PhoneAndroidRound, PasswordRound } from "@vicons/material";
 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 loginStatus = ref(t("login.loginStatus1"));

 // 手机号登录数据
 const phoneFormRef = ref(null);
@@ -129,7 +133,7 @@ const phoneFormRules = {
  captcha: numberRule,
 };
 const captchaTimeOut = ref(null);
-const captchaText = ref("获取验证码");
+const captchaText = ref(t("login.getCode"));
 const captchaDisabled = ref(false);

 // 定时器
@@ -147,15 +151,15 @@ const saveLoginData = (data) => {
    if (res.data.profile) {
      user.setUserData(res.data.profile);
      user.userLogin = true;
-      qrText.value = "登录成功";
-      $message.success("登录成功");
+      loginStatus.value = t("login.loginStatus4");
+      $message.success(t("login.loginStatus4"));
      // 自动签到
      if ($signIn) $signIn();
      clearInterval(qrCheckInterval.value);
      router.push("/user");
    } else {
      user.userLogOut();
-      $message.error("登录出错，请重试");
+      $message.error(t("login.loginStatus5"));
      getQrKeyData();
    }
  });
@@ -166,7 +170,7 @@ const getQrKeyData = () => {
  // 检测是否登录
  getLoginState().then((res) => {
    if (res.data.profile && window.localStorage.getItem("cookie")) {
-      $message.info("已登录，请勿重复登录");
+      $message.info(t("login.loggedIn"));
      user.userLogin = true;
      router.push("/user");
    } else {
@@ -178,7 +182,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.loginStatus6"));
        }
      });
    }
@@ -194,19 +198,16 @@ const checkQrState = (key) => {
      if (res.code == 800) {
        getQrKeyData();
        loginStateMessage.value = null;
-        qrText.value = "当前二维码已失效，请重新扫码";
+        loginStatus.value = t("login.loginStatus2");
      } else if (res.code == 801) {
        loginStateMessage.value = null;
-        qrText.value = "请打开云音乐 APP 扫码登录";
+        loginStatus.value = t("login.loginStatus1");
      } else if (res.code == 802) {
-        qrText.value = "扫描成功，请在客户端确认登录";
+        loginStatus.value = t("login.loginStatus3");
        if (!loginStateMessage.value) {
-          loginStateMessage.value = $message.loading(
-            "扫描成功，请在客户端确认登录",
-            {
-              duration: 0,
-            }
-          );
+          loginStateMessage.value = $message.loading(t("login.loginStatus3"), {
+            duration: 0,
+          });
        }
      } else if (res.code == 803) {
        loginStateMessage.value.destroy();
@@ -222,13 +223,13 @@ const getCaptcha = (data) => {
  phoneFormRef.value?.validate(
    (errors) => {
      if (errors) {
-        $message.error("请输入正确的手机号");
+      $message.error(t("general.message.needCheck"));
      } else {
        console.log(data + "发送验证码");
        sentCaptcha(data).then((res) => {
          console.log(res);
          if (res.code == 200) {
-            $message.success("验证码发送成功");
+            $message.success(t("login.codeSuccess"));
            let countDown = 60;
            captchaDisabled.value = true;
            captchaTimeOut.value = setInterval(() => {
@@ -236,12 +237,12 @@ const getCaptcha = (data) => {
              captchaText.value = countDown + "s";
              if (countDown === 0) {
                clearInterval(captchaTimeOut.value);
-                captchaText.value = "重新获取";
+                captchaText.value = t("login.getCodeAgain");
                captchaDisabled.value = false;
              }
            }, 1000);
          } else {
-            $message.error("验证码发送失败，请重试");
+            $message.error(t("login.codeError"));
          }
        });
      }
@@ -258,24 +259,39 @@ const phoneLogin = (e) => {
  phoneFormRef.value?.validate((errors) => {
    if (!errors) {
      console.log("通过");
-      verifyCaptcha(
-        phoneFormData._value.phone,
-        phoneFormData._value.captcha
-      ).then((res) => {
-        console.log(res);
-        if (res.code == 200) {
-          toLogin(
-            phoneFormData._value.phone,
-            phoneFormData._value.captcha
-          ).then((res) => {
-            console.log(res);
-            // 暂时不支持，等支持了再写
-          });
-        }
-      });
+      verifyCaptcha(phoneFormData._value.phone, phoneFormData._value.captcha)
+        .then((res) => {
+          console.log(res);
+          if (res.code == 200) {
+            toLogin(
+              phoneFormData._value.phone,
+              phoneFormData._value.captcha
+            ).then((res) => {
+              console.log(res);
+              if (res.profile) {
+                saveLoginData(res);
+                user.setUserData(res.profile);
+                user.userLogin = true;
+                $message.success(t("login.loginStatus4"));
+                // 自动签到
+                if ($signIn) $signIn();
+                router.push("/user");
+              } else {
+                user.userLogOut();
+                $message.error(t("login.loginStatus5"));
+                phoneFormData.value.captcha = null;
+              }
+            });
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          $loadingBar.error();
+          $message.error(t("login.loginStatus5"));
+        });
    } else {
      $loadingBar.error();
-      $message.error("请检查您的输入");
+      $message.error(t("general.message.needCheck"));
    }
  });
 };
@@ -291,7 +307,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
@@ -31,9 +31,11 @@
 import { getAlbumNew } from "@/api/album";
 import { useRouter } from "vue-router";
 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,24 +2,18 @@
  <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-avatar
+        <n-image
+          preview-disabled
          class="shadow"
-          :src="
-            playListDetail.coverImgUrl
-              ? playListDetail.coverImgUrl.replace(/^http:/, 'https:') +
-                '?param=1024y1024'
-              : null
-          "
+          :src="getCoverUrl(playListDetail.coverImgUrl, 1024)"
          fallback-src="/images/pic/default.png"
        />
      </div>
@@ -29,12 +23,14 @@
          <n-text class="creator">{{ playListDetail.creator.nickname }}</n-text>
        </div>
        <div class="intr">
-          <span class="name">歌单简介</span>
+          <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
@@ -45,7 +41,7 @@
            v-if="playListDetail?.description?.length > 70"
            @click="playListDescShow = true"
          >
-            全部简介
+            {{ $t("general.name.allDesc") }}
          </n-button>
        </div>
        <n-space class="tag" v-if="playListDetail.tags">
@@ -65,7 +61,7 @@
            <template #icon>
              <n-icon :component="MusicList" />
            </template>
-            播放
+            {{ $t("general.name.play") }}
          </n-button>
          <n-dropdown
            placement="right-start"
@@ -85,17 +81,20 @@
    <div class="right">
      <div class="meta">
        <n-text class="name">{{ playListDetail.name }}</n-text>
-        <n-text class="creator">{{ playListDetail.creator.nickname }}</n-text>
-        <div class="time">
-          <div class="createTime">
-            <span class="num">创建时间：</span>
-            {{ getLongTime(playListDetail.createTime) }}
+        <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
@@ -111,7 +110,7 @@
        class="s-modal"
        v-model:show="playListDescShow"
        preset="card"
-        title="歌单简介"
+        :title="$t('general.name.desc', { name: $t('general.name.playlist') })"
        :bordered="false"
      >
        <n-scrollbar>
@@ -122,11 +121,13 @@
  </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>
@@ -160,10 +161,17 @@ import {
  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();
@@ -222,7 +230,10 @@ const setDropdownOptions = () => {
  dropdownOptions.value = [
    {
      key: "copy",
-      label: "复制歌单链接",
+      label: t("menu.copy", {
+        name: t("general.name.playlist"),
+        other: t("general.name.link"),
+      }),
      props: {
        onClick: () => {
          if (navigator.clipboard) {
@@ -230,12 +241,13 @@ const setDropdownOptions = () => {
              navigator.clipboard.writeText(
                `https://music.163.com/#/playlist?id=${playListId.value}`
              );
-              $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"));
          }
        },
      },
@@ -243,7 +255,7 @@ const setDropdownOptions = () => {
    },
    {
      key: "del",
-      label: "删除歌单",
+      label: t("menu.del"),
      show: user.userLogin && isCanDelete(playListId.value),
      props: {
        onClick: () => {
@@ -254,7 +266,9 @@ const setDropdownOptions = () => {
    },
    {
      key: "like",
-      label: isLikeOrDislike(playListId.value) ? "收藏歌单" : "取消收藏歌单",
+      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: () => {
@@ -275,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"));
    });
 };

@@ -306,10 +324,10 @@ 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();
  });
 };

@@ -344,27 +362,29 @@ const playAllSong = () => {
      music.setPlayState(true);
    }
  } catch (err) {
-    console.error("播放全部歌曲失败：" + err);
-    $message.error("播放全部歌曲失败，请重试");
+    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("默认歌单无法删除");
+    $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();
          router.push("/user/playlists");
        }
@@ -376,19 +396,46 @@ const toDelPlayList = (data) => {
 // 收藏/取消收藏
 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(`歌单${type == 1 ? "收藏成功" : "取消收藏成功"}`);
+      $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(`歌单${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(`歌单${type == 1 ? "收藏失败" : "取消收藏失败"}`);
-    console.error(`歌单${type == 1 ? "收藏失败：" : "取消收藏失败："}` + 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
+    );
  }
 };

@@ -489,11 +536,21 @@ watch(
      justify-content: flex-start;
      width: 80%;
      height: 80%;
-      .n-avatar {
+      border-radius: 8px;
+      position: relative;
+      transition: transform 0.3s;
+      &:active {
+        transform: scale(0.95);
+      }
+      .coverImg {
        border-radius: 8px;
        width: 100%;
        height: 100%;
+        overflow: hidden;
        z-index: 1;
+        :deep(img) {
+          width: 100%;
+        }
      }
      .shadow {
        position: absolute;
@@ -580,6 +637,8 @@ watch(
        font-weight: bold;
      }
      .creator {
+        display: flex;
+        align-items: center;
        margin-top: 6px;
        font-size: 16px;
        opacity: 0.8;
@@ -589,6 +648,9 @@ watch(
          opacity: 1;
          color: var(--main-color);
        }
+        .n-icon {
+          margin-right: 6px;
+        }
      }
      .time {
        margin-top: 8px;
@@ -600,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;
+          }
        }
      }
    }
--- 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
@@ -15,8 +15,11 @@
 import { getSearchData } from "@/api/search";
 import { useRouter } from "vue-router";
 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();
  });
 };

--- 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();
  });
 };

--- 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(() => {
-  if (searchKeywords.value) $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
@@ -15,8 +15,11 @@
 import { getSearchData } from "@/api/search";
 import { useRouter } from "vue-router";
 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();
  });
 };

--- a/src/views/Search/songs.vue
+++ b/src/views/Search/songs.vue
@@ -16,8 +16,11 @@ import { getSearchData } from "@/api/search";
 // import { getMusicDetail } from "@/api/song";
 import { useRouter } from "vue-router";
 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
@@ -15,8 +15,11 @@
 import { getSearchData } from "@/api/search";
 import { useRouter } from "vue-router";
 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();
  });
 };

--- 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,8 +9,8 @@
    >
      <div class="top">
        <div class="name">
-          主题色选择
-          <span class="tip">更换全站主题色，即时生效</span>
+          {{ $t("setting.themeType") }}
+          <span class="tip">{{ $t("setting.themeTypeTip") }}</span>
        </div>
        <n-button
          v-if="themeType !== 'red'"
@@ -18,7 +18,7 @@
          secondary
          @click="changeThemeColor(null, true)"
        >
-          恢复默认
+          {{ $t("general.name.restore") }}
        </n-button>
      </div>
      <n-grid
@@ -35,33 +35,58 @@
          :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-item
+          :class="themeType === 'custom' ? 'item check' : 'item'"
+          :style="{ '--color': themeData.primaryColor }"
+          @click="openThemeCustom()"
+        >
+          <n-text v-html="$t('general.name.customTheme')" />
        </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"
@@ -70,27 +95,43 @@
      />
    </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.bottomClick") }}
+        <span class="tip">{{ $t("setting.bottomClickTip") }}</span>
+      </div>
+      <n-switch v-model:value="bottomClick" :round="false" />
+    </n-card>
+    <n-card class="set-item">
+      <div class="name">
+        {{ $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">
-        歌曲音质
-        <span class="tip">无损音质及以上需要您为黑胶会员</span>
+        {{ $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"
@@ -100,12 +141,12 @@
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        尝试替换无法播放的歌曲
+        {{ $t("setting.useUnmServerShow") }}
        <span class="tip">
          {{
            useUnmServerShow
-              ? "是否使用 UNM 替换无法播放的歌曲链接"
-              : "请配置 UNM-Server 后使用解灰功能"
+              ? $t("setting.useUnmServerShowTip1")
+              : $t("setting.useUnmServerShowTip2")
          }}
        </span>
      </div>
@@ -117,21 +158,69 @@
    </n-card>
    <n-card class="set-item">
      <div class="name">
-        播放页快捷设置
-        <span class="tip">是否在播放页面显示快捷设置</span>
+        {{ $t("setting.showLyricSetting") }}
+        <span class="tip">{{ $t("setting.showLyricSettingTip") }}</span>
      </div>
      <n-switch v-model:value="showLyricSetting" :round="false" />
    </n-card>
+    <!-- 自定义主题 -->
+    <n-modal
+      class="s-modal"
+      v-model:show="showThemeCustom"
+      preset="card"
+      :title="$t('general.name.customTheme')"
+      :bordered="false"
+    >
+      <n-form class="color-custom" :model="customColorData">
+        <n-form-item
+          :label="$t('general.name.primaryColor')"
+          path="primaryColor"
+        >
+          <n-color-picker v-model:value="customColorData.primaryColor" />
+        </n-form-item>
+        <n-form-item
+          :label="$t('general.name.primaryColor') + ' Hover'"
+          path="primaryColorHover"
+        >
+          <n-color-picker v-model:value="customColorData.primaryColorHover" />
+        </n-form-item>
+        <n-form-item
+          :label="$t('general.name.primaryColor') + ' Suppl'"
+          path="primaryColorSuppl"
+        >
+          <n-color-picker v-model:value="customColorData.primaryColorSuppl" />
+        </n-form-item>
+        <n-form-item
+          :label="$t('general.name.primaryColor') + ' Pressed'"
+          path="primaryColorPressed"
+        >
+          <n-color-picker v-model:value="customColorData.primaryColorPressed" />
+        </n-form-item>
+      </n-form>
+      <template #footer>
+        <n-space justify="end">
+          <n-button @click="showThemeCustom = false">
+            {{ $t("general.dialog.cancel") }}
+          </n-button>
+          <n-button type="primary" @click="setThemeCustom">
+            {{ $t("general.name.customTheme") }}
+          </n-button>
+        </n-space>
+      </template>
+    </n-modal>
  </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,
@@ -142,94 +231,182 @@ const {
  autoSignIn,
  searchHistory,
  themeType,
+  themeData,
  showLyricSetting,
  songVolumeFade,
  useUnmServer,
+  memoryLastPlaybackPosition,
+  language,
+  bottomClick,
 } = storeToRefs(setting);

+// 国际化
+const { locale, t } = useI18n();
+
+// 自定义主题
+const showThemeCustom = ref(false);
+const customColorData = ref({
+  primaryColor: null,
+  primaryColorHover: null,
+  primaryColorSuppl: null,
+  primaryColorPressed: null,
+});
+
+const openThemeCustom = () => {
+  showThemeCustom.value = true;
+  customColorData.value = {
+    primaryColor: themeData.value.primaryColor,
+    primaryColorHover: themeData.value.primaryColorHover,
+    primaryColorSuppl: themeData.value.primaryColorSuppl,
+    primaryColorPressed: themeData.value.primaryColorPressed,
+  };
+};
+
+// 确认自定义颜色
+const setThemeCustom = () => {
+  console.log(customColorData.value);
+  themeType.value = "custom";
+  themeData.value = {
+    label: "custom",
+    name: t("general.name.customTheme"),
+    ...customColorData.value,
+  };
+  showThemeCustom.value = false;
+};
+
 // 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("主题色已重置");
+        $message.success(t("other.cleanAll"));
        themeType.value = "red";
      },
    });
  } else {
-    $message.success("主题色更换为" + data.name);
+    $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,43 +28,67 @@
    </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"
@@ -79,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"
@@ -87,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'">
@@ -114,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"
@@ -123,8 +147,8 @@
    </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>
@@ -145,6 +169,10 @@
 <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 {
@@ -160,16 +188,18 @@ const {
  showRoma,
  backgroundImageShow,
  countDownShow,
+  showYrcAnimation,
+  showYrcTransform,
 } = storeToRefs(setting);

 // 歌词位置
 const lyricsPositionOptions = [
  {
-    label: "居左",
+    label: t("setting.positionLeft"),
    value: "left",
  },
  {
-    label: "居中",
+    label: t("setting.positionCenter"),
    value: "center",
  },
 ];
@@ -177,11 +207,11 @@ const lyricsPositionOptions = [
 // 歌词滚动位置
 const lyricsBlockOptions = [
  {
-    label: "靠近顶部",
+    label: t("setting.blockStart"),
    value: "start",
  },
  {
-    label: "水平居中",
+    label: t("setting.blockCenter"),
    value: "center",
  },
 ];
@@ -189,11 +219,11 @@ const lyricsBlockOptions = [
 // 播放器样式
 const playerStyleOptions = [
  {
-    label: "封面模式",
+    label: t("setting.cover"),
    value: "cover",
  },
  {
-    label: "唱片模式",
+    label: t("setting.record"),
    value: "record",
  },
 ];
@@ -201,11 +231,11 @@ const playerStyleOptions = [
 // 播放背景类型
 const backgroundImageShowOptions = [
  {
-    label: "封面主色",
+    label: t("setting.solid"),
    value: "solid",
  },
  {
-    label: "封面模糊",
+    label: t("setting.blur"),
    value: "blur",
  },
 ];
--- 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";
 import {
-  PlayArrowRound,
-  MessageFilled,
-  VideocamRound,
-  PlaylistAddRound,
-} from "@vicons/material";
+  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>
--- 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]).toFixed(),
+              })
+            }}
          </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>
@@ -86,9 +91,11 @@ import { useRouter } from "vue-router";
 import { settingStore } from "@/store";
 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,7 +76,7 @@

 <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";
@@ -85,6 +85,7 @@ import {
  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();
  });
 };

@@ -221,7 +233,6 @@ onMounted(() => {
  getCommentData(videoId.value);
  // 播放器事件
  player.value.on("playing", () => {
-    console.log("视频开始播放");
    // 隐藏控制条及暂停音乐
    music.setPlayBarState(false);
    music.setPlayState(false);
--- a/vercel.json
+++ b/vercel.json
@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,11 +1,11 @@
 import { fileURLToPath, URL } from "node:url";
 import { defineConfig, loadEnv } from "vite";
-import vue from "@vitejs/plugin-vue";
-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";
+import vue from "@vitejs/plugin-vue";
+import viteCompression from "vite-plugin-compression";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";

 // https://vitejs.dev/config/
 export default ({ mode }) =>
@@ -28,20 +28,6 @@ export default ({ mode }) =>
      Components({
        resolvers: [NaiveUiResolver()],
      }),
-      createHtmlPlugin({
-        minify: true,
-        template: "index.html",
-        inject: {
-          data: {
-            logo: loadEnv(mode, process.cwd()).VITE_SITE_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",
@@ -84,9 +70,11 @@ export default ({ mode }) =>
          ],
        },
      }),
+      // viteCompression
+      viteCompression(),
    ],
    server: {
-      port: 2048,
+      port: 25536,
      open: true,
      http: true,
      ssr: false,
@@ -101,6 +89,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
底层用户	d48c8b1aa4	Merge pull request #81 from imsyy/dev feat: 支持手机号登录 #67	2023-10-25 16:34:15 +08:00
imsyy	9fa5935929	feat: 更新说明	2023-09-13 16:00:25 +08:00
imsyy	ab0fb19585	feat: 支持手机号登录 #67	2023-08-21 17:27:08 +08:00
底层用户	67e69e0513	Merge pull request #66 from imsyy/dev feat: 更新说明	2023-08-14 10:03:56 +08:00
imsyy	540b0c5855	feat: 更新说明	2023-08-08 10:03:19 +08:00
底层用户	52f15a044f	Merge pull request #65 from imsyy/dev feat: 新增一项设置 #58	2023-08-07 09:06:53 +08:00
imsyy	b5ec3aaee3	feat: 底栏歌词切换时动画	2023-08-01 15:53:54 +08:00
imsyy	91d66801a9	fix: 单曲循环无法暂停	2023-07-19 11:24:15 +08:00
imsyy	73470ef643	feat: 新增一项设置 #58	2023-07-19 10:57:42 +08:00
底层用户	6563cbf3ab	Merge pull request #62 from imsyy/dev feat: 新增自定义主题	2023-07-17 09:39:21 +08:00
imsyy	b5f193c731	fix: 私人 FM 加载动画	2023-07-17 09:36:39 +08:00
imsyy	f13eaf838f	feat: 新增自定义主题 & fix: 修复提示触发位置 #60	2023-07-15 11:20:22 +08:00
imsyy	7f8dbbaaf8	style: 样式微调	2023-07-03 11:06:07 +08:00
底层用户	0a6f071bbd	Merge pull request #54 from imsyy/dev fix: 部分无信息歌曲导致异常	2023-06-16 09:58:31 +08:00
imsyy	846691f789	fix: 部分无信息歌曲导致异常	2023-06-14 17:57:29 +08:00
imsyy	17bb9f13b8	fix: 解决 Vercel 刷新 404	2023-06-14 11:44:55 +08:00
底层用户	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