feat: 新增收藏专辑页面 & 部分变量调整

feat: 新增收藏/取消收藏专辑 & 歌手页优化
feat: 免责声明
2025-11-26 03:44:57 +08:00 · 2023-04-11 15:21:18 +08:00 · 2023-04-10 18:29:40 +08:00 · 2023-04-10 14:09:29 +08:00
23 changed files with 542 additions and 180 deletions
--- a/README.md
+++ b/README.md
@@ -131,4 +131,16 @@ npm build

 - [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
 - [YesPlayMusic](https://github.com/qier222/YesPlayMusic)
- [Vue-mmPlayer](https://github.com/maomao1996/Vue-mmPlayer)
+- [Vue-mmPlayer](https://github.com/maomao1996/Vue-mmPlayer)
+
+## 📜 开源许可
+- **本项目仅供个人学习研究使用，禁止用于商业及非法用途**
+- 本项目基于 [MIT license](https://opensource.org/license/mit/) 许可进行开源
+
+## 📢 免责声明
+
+本项目使用了网易云音乐的第三方 API 服务，**仅供个人学习研究使用，禁止用于商业及非法用途。** 本项目旨在提供一个前端练手的实战项目，用于帮助开发者提升技能水平和对前端技术的理解
+
+同时，本项目开发者承诺 **严格遵守相关法律法规和网易云音乐 API 使用协议，不会利用本项目进行任何违法活动。** 如因使用本项目而引起的任何纠纷或责任，均由使用者自行承担。**本项目开发者不承担任何因使用本项目而导致的任何直接或间接责任，并保留追究使用者违法行为的权利**
+
+请使用者在使用本项目时遵守相关法律法规，**不要将本项目用于任何商业及非法用途。如有违反，一切后果由使用者自负。** 同时，使用者应该自行承担因使用本项目而带来的风险和责任。本项目开发者不对本项目所提供的服务和内容做出任何保证
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "splayer",
-  "version": "1.0.3",
+  "version": "1.0.4",
  "private": true,
  "author": "imsyy",
  "home": "https://imsyy.top",
--- a/src/App.vue
+++ b/src/App.vue
@@ -58,7 +58,7 @@ const annDuration = Number(import.meta.env.VITE_ANN_DURATION);
 const spacePlayOrPause = (e) => {
  if (e.code === "Space") {
    console.log(e.target.tagName);
-    if (router.currentRoute.value.name == "video") return false;
+    if (router.currentRoute.value.name === "video") return false;
    if (e.target.tagName === "BODY") {
      e.preventDefault();
      music.setPlayState(!music.getPlayState);
--- a/src/api/album.js
+++ b/src/api/album.js
@@ -48,3 +48,20 @@ export const getToplist = (detail = true) => {
    url: `/toplist${detail ? "/detail" : null}`,
  });
 };
+
+/**
+ * 收藏/取消收藏专辑
+ * @param {number} t - 操作类型，1为收藏，2为取消收藏
+ * @param {number} id - 专辑id
+ */
+export const likeAlbum = (t, id) => {
+  return axios({
+    method: "GET",
+    url: "/album/sub",
+    params: {
+      t,
+      id,
+      timestamp: new Date().getTime(),
+    },
+  });
+};
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -49,6 +49,23 @@ export const getUserPlaylist = (uid, limit = 30, offset = 0) => {
  });
 };

+/**
+ * 获取用户的专辑列表
+ * @param {number} [limit=30] - 返回数量，默认30
+ * @param {number} [offset=0] - 偏移数量，默认0
+ */
+export const getUserAlbum = (limit = 30, offset = 0) => {
+  return axios({
+    method: "GET",
+    url: "/album/sublist",
+    params: {
+      limit,
+      offset,
+      timestamp: new Date().getTime(),
+    },
+  });
+};
+
 /**
 * 获取用户收藏的歌手列表
 */
--- a/src/components/DataList/ArtistLists.vue
+++ b/src/components/DataList/ArtistLists.vue
@@ -110,7 +110,7 @@ const openRightMenu = (e, data) => {
      {
        key: "like",
        label: isLikeOrDislike(data.id) ? "收藏歌手" : "取消收藏歌手",
-        show: user.userLogin && user.getUserArtistlists.has ? true : false,
+        show: user.userLogin && user.getUserArtistLists.has ? true : false,
        props: {
          onClick: () => {
            toLikeArtist(data);
@@ -166,21 +166,19 @@ const toLikeArtist = (data) => {

 // 判断收藏还是取消
 const isLikeOrDislike = (id) => {
-  if (user.getUserArtistlists.list[0]) {
-    const index = user.getUserArtistlists.list.findIndex(
-      (item) => item.id === id
-    );
-    if (index !== -1) {
-      return false;
-    }
-    return true;
-  } else {
+  if (!user.getUserArtistLists.list[0]) {
    return true;
  }
+  return !user.getUserArtistLists.list.some((item) => item.id === id);
 };

 onMounted(() => {
-  if (user.userLogin && !user.getUserArtistlists.has) user.setUserArtistLists();
+  if (
+    user.userLogin &&
+    !user.getUserArtistLists.has &&
+    !user.getUserArtistLists.isLoading
+  )
+    user.setUserArtistLists();
 });
 </script>

--- a/src/components/DataList/CoverLists.vue
+++ b/src/components/DataList/CoverLists.vue
@@ -27,7 +27,7 @@
              <PlayOne theme="filled" />
            </n-icon>
            <div class="description" v-if="listType != 'topList'">
-              <div class="num" v-if="listType == 'playList'">
+              <div class="num" v-if="listType == 'playlist'">
                <n-icon>
                  <Headset theme="filled" />
                </n-icon>
@@ -40,7 +40,7 @@
          </div>
          <div class="title">
            <span class="name text-hidden">{{ item.name }}</span>
-            <span v-if="listType == 'playList' && item.artist" class="by">
+            <span v-if="listType == 'playlist' && item.artist" class="by">
              By {{ item.artist.nickname }}
            </span>
            <span v-else-if="listType == 'topList' && item.update" class="by">
@@ -88,6 +88,7 @@
 <script setup>
 import { PlayOne, Headset } from "@icon-park/vue-next";
 import { delPlayList, likePlaylist } from "@/api/playlist";
+import { likeAlbum } from "@/api/album";
 import { musicStore, userStore } from "@/store";
 import { useRouter } from "vue-router";
 import AllArtists from "./AllArtists.vue";
@@ -105,7 +106,7 @@ const props = defineProps({
  // 列表类型
  listType: {
    type: String,
-    default: "playList",
+    default: "playlist",
  },
  // 自定义列数
  columns: {
@@ -145,7 +146,8 @@ const openRightMenu = (e, data) => {
      {
        key: "update",
        label: "编辑歌单",
-        show: router.currentRoute.value.name === "playlists" ? true : false,
+        show:
+          router.currentRoute.value.name === "user-playlists" ? true : false,
        props: {
          onClick: () => {
            playlistUpdateRef.value.openUpdateModel(data);
@@ -155,7 +157,8 @@ const openRightMenu = (e, data) => {
      {
        key: "del",
        label: "删除歌单",
-        show: router.currentRoute.value.name === "playlists" ? true : false,
+        show:
+          router.currentRoute.value.name === "user-playlists" ? true : false,
        props: {
          onClick: () => {
            toDelPlayList(data);
@@ -163,31 +166,53 @@ const openRightMenu = (e, data) => {
        },
      },
      {
-        key: "like",
+        key: "likePlaylist",
        label: isLikeOrDislike(data.id) ? "收藏歌单" : "取消收藏歌单",
        show:
          user.userLogin &&
          user.getUserPlayLists.has &&
-          router.currentRoute.value.name != "playlists"
+          props.listType === "playlist" &&
+          router.currentRoute.value.name !== "user-playlists"
            ? true
            : false,
        props: {
          onClick: () => {
-            toLikePlaylist(data.id);
+            toChangeLike(data.id);
+          },
+        },
+      },
+      {
+        key: "likeAlbum",
+        label: isLikeOrDislike(data.id) ? "收藏专辑" : "取消收藏专辑",
+        show:
+          user.userLogin &&
+          user.getUserAlbumLists.has &&
+          props.listType === "album"
+            ? true
+            : false,
+        props: {
+          onClick: () => {
+            toChangeLike(data.id);
          },
        },
      },
      {
        key: "copy",
-        label: "复制歌单链接",
+        label: `复制${props.listType === "playlist" ? "歌单" : "专辑"}链接`,
        props: {
          onClick: () => {
            if (navigator.clipboard) {
              try {
                navigator.clipboard.writeText(
-                  `https://music.163.com/#/playlist?id=${data.id}`
+                  `https://music.163.com/#/${
+                    props.listType === "playlist" ? "playlist" : "album"
+                  }?id=${data.id}`
+                );
+                $message.success(
+                  `${
+                    props.listType === "playlist" ? "歌单" : "专辑"
+                  }链接复制成功`
                );
-                $message.success("歌单链接复制成功");
              } catch (err) {
                $message.error("复制失败：", err);
              }
@@ -211,7 +236,7 @@ const onClickoutside = () => {

 // 链接跳转
 const toLink = (id) => {
-  if (props.listType == "playList" || props.listType == "topList") {
+  if (props.listType === "playlist" || props.listType === "topList") {
    router.push({
      path: "/playlist",
      query: {
@@ -219,7 +244,7 @@ const toLink = (id) => {
        page: 1,
      },
    });
-  } else if (props.listType == "album") {
+  } else if (props.listType === "album") {
    router.push({
      path: "/album",
      query: {
@@ -250,36 +275,65 @@ const toDelPlayList = (data) => {

 // 判断收藏还是取消
 const isLikeOrDislike = (id) => {
-  if (user.getUserPlayLists.like[0]) {
-    const index = user.getUserPlayLists.like.findIndex(
-      (item) => item.id === id
-    );
-    if (index !== -1) {
-      return false;
+  const listType = props.listType;
+  const playlists = user.getUserPlayLists.like;
+  const albums = user.getUserAlbumLists.list;
+  if (listType === "playlist" && playlists.length) {
+    return !playlists.some((item) => item.id === id);
+  }
+  if (listType === "album" && albums.length) {
+    return !albums.some((item) => item.id === id);
+  }
+  return true;
+};
+
+// 收藏/取消收藏
+const toChangeLike = async (id) => {
+  const listType = props.listType;
+  const type = isLikeOrDislike(id) ? 1 : 2;
+  const likeFn = listType === "playlist" ? likePlaylist : likeAlbum;
+  const likeMsg = listType === "playlist" ? "歌单" : "专辑";
+  try {
+    const res = await likeFn(type, id);
+    if (res.code === 200) {
+      $message.success(`${likeMsg}${type == 1 ? "收藏成功" : "取消收藏成功"}`);
+      listType === "playlist"
+        ? user.setUserPlayLists()
+        : user.setUserAlbumLists();
+    } else {
+      $message.error(`${likeMsg}${type == 1 ? "收藏失败" : "取消收藏失败"}`);
    }
-    return true;
-  } else {
-    return true;
+  } catch (err) {
+    $message.error(`${likeMsg}${type == 1 ? "收藏失败" : "取消收藏失败"}`);
+    console.error(
+      `${likeMsg}${type == 1 ? "收藏失败：" : "取消收藏失败："}` + err
+    );
  }
 };

-// 收藏/取消收藏歌单
-const toLikePlaylist = (id) => {
-  const type = isLikeOrDislike(id) ? 1 : 2;
-  likePlaylist(type, id).then((res) => {
-    if (res.code === 200) {
-      $message.success(`歌单${type == 1 ? "收藏成功" : "取消收藏成功"}`);
-      user.setUserPlayLists();
-    } else {
-      $message.error(`歌单${type == 1 ? "收藏失败" : "取消收藏失败"}`);
-    }
-  });
-};
-
 onMounted(() => {
-  if (router.currentRoute.value.name === "playlists" && !music.catList.sub)
+  if (
+    router.currentRoute.value.name === "user-playlists" &&
+    !music.catList.sub
+  ) {
    music.setCatList();
-  if (user.userLogin && !user.getUserPlayLists.has) user.setUserPlayLists();
+  }
+  if (
+    user.userLogin &&
+    !user.getUserPlayLists.has &&
+    !user.getUserPlayLists.isLoading &&
+    props.listType === "playlist"
+  ) {
+    user.setUserPlayLists();
+  }
+  if (
+    user.userLogin &&
+    !user.getUserAlbumLists.has &&
+    !user.getUserAlbumLists.isLoading &&
+    props.listType === "album"
+  ) {
+    user.setUserAlbumLists();
+  }
 });
 </script>

--- a/src/components/DataList/DataLists.vue
+++ b/src/components/DataList/DataLists.vue
@@ -269,7 +269,7 @@
              <n-text>专辑：{{ drawerData.album.name }}</n-text>
            </div>
            <div
-              v-if="router.currentRoute.value.name == 'cloud'"
+              v-if="router.currentRoute.value.name === 'user-cloud'"
              class="item"
              @click="
                () => {
@@ -284,7 +284,7 @@
              <n-text>歌曲信息纠正</n-text>
            </div>
            <div
-              v-if="router.currentRoute.value.name == 'cloud'"
+              v-if="router.currentRoute.value.name === 'user-cloud'"
              class="item"
              @click="
                () => {
@@ -327,10 +327,12 @@ import {
  DeleteFour,
  Like,
  More,
+  Search,
 } from "@icon-park/vue-next";
 import { musicStore, settingStore, userStore } from "@/store";
 import { useRouter } from "vue-router";
 import { setCloudDel } from "@/api/user";
+import { NIcon } from "naive-ui";
 import AllArtists from "./AllArtists.vue";
 import AddPlaylist from "@/components/DataModel/AddPlaylist.vue";
 import CloudMatch from "@/components/DataModel/CloudMatch.vue";
@@ -384,6 +386,19 @@ const copySongData = (id, url = true) => {
  }
 };

+// 图标渲染
+const renderIcon = (icon) => {
+  return () => {
+    return h(
+      NIcon,
+      { depth: 2, style: { transform: "translateX(2px)" } },
+      {
+        default: () => h(icon, { theme: "filled" }),
+      }
+    );
+  };
+};
+
 // 打开右键菜单
 const openRightMenu = (e, data) => {
  e.preventDefault();
@@ -393,6 +408,7 @@ const openRightMenu = (e, data) => {
      {
        key: "play",
        label: "立即播放",
+        icon: renderIcon(PlayOne),
        props: {
          onClick: () => {
            playSong(props.listData, data);
@@ -402,7 +418,8 @@ const openRightMenu = (e, data) => {
      {
        key: "nextPlay",
        label: "下一首播放",
-        disabled:
+        icon: renderIcon(AddMusic),
+        show:
          music.getPersonalFmMode || music.getPlaySongData.id == data.id
            ? true
            : false,
@@ -415,6 +432,7 @@ const openRightMenu = (e, data) => {
      {
        key: "add",
        label: "添加到歌单",
+        icon: renderIcon(ListAdd),
        show: user.userLogin ? true : false,
        props: {
          onClick: () => {
@@ -422,9 +440,20 @@ const openRightMenu = (e, data) => {
          },
        },
      },
+      {
+        key: "download",
+        label: "歌曲下载",
+        icon: renderIcon(DownloadFour),
+        props: {
+          onClick: () => {
+            downloadSongRef.value.openDownloadModel(data);
+          },
+        },
+      },
      {
        key: "comment",
        label: "前往评论区",
+        icon: renderIcon(Comments),
        props: {
          onClick: () => {
            router.push(`/comment?id=${data.id}`);
@@ -434,6 +463,7 @@ const openRightMenu = (e, data) => {
      {
        key: "mv",
        label: "观看 MV",
+        icon: renderIcon(Video),
        show: data.mv && data.mv != 0 ? true : false,
        props: {
          onClick: () => {
@@ -444,12 +474,13 @@ const openRightMenu = (e, data) => {
      {
        key: "line1",
        type: "divider",
-        show: router.currentRoute.value.name == "cloud" ? true : false,
+        show: router.currentRoute.value.name === "user-cloud" ? true : false,
      },
      {
        key: "delete",
        label: "从云盘中删除",
-        show: router.currentRoute.value.name == "cloud" ? true : false,
+        icon: renderIcon(DeleteFour),
+        show: router.currentRoute.value.name === "user-cloud" ? true : false,
        props: {
          onClick: () => {
            delCloudSong(data);
@@ -459,7 +490,8 @@ const openRightMenu = (e, data) => {
      {
        key: "match",
        label: "歌曲信息纠正",
-        show: router.currentRoute.value.name == "cloud" ? true : false,
+        icon: renderIcon(FileMusic),
+        show: router.currentRoute.value.name === "user-cloud" ? true : false,
        props: {
          onClick: () => {
            cloudMatchRef.value.openCloudMatch(data);
@@ -473,6 +505,7 @@ const openRightMenu = (e, data) => {
      {
        key: "search",
        label: "同名搜索",
+        icon: renderIcon(Search),
        props: {
          onClick: () => {
            router.push({
@@ -488,6 +521,7 @@ const openRightMenu = (e, data) => {
      {
        key: "copyId",
        label: "复制歌曲 ID",
+        icon: renderIcon(FileMusic),
        props: {
          onClick: () => {
            copySongData(data.id, false);
@@ -496,22 +530,14 @@ const openRightMenu = (e, data) => {
      },
      {
        key: "copy",
-        label: "复制链接",
+        label: "复制歌曲链接",
+        icon: renderIcon(LinkTwo),
        props: {
          onClick: () => {
            copySongData(data.id);
          },
        },
      },
-      {
-        key: "line2",
-        type: "divider",
-      },
-      {
-        label: data.name,
-        key: "name",
-        disabled: true,
-      },
    ];
    rightMenuShow.value = true;
    rightMenuX.value = e.clientX;
@@ -560,7 +586,7 @@ const playSong = (data, song) => {
  music.setPersonalFmMode(false);
  if (router.currentRoute.value.name !== "history") music.setPlaylists(data);
  // 检查是否为云盘歌曲
-  if (router.currentRoute.value.name === "cloud") {
+  if (router.currentRoute.value.name === "user-cloud") {
    music.setPlayListMode("cloud");
  } else {
    music.setPlayListMode("list");
--- a/src/components/DataModel/AddPlaylist.vue
+++ b/src/components/DataModel/AddPlaylist.vue
@@ -64,7 +64,9 @@ const openAddToPlaylist = (id) => {
    $message.error("请登录账号后使用");
    return false;
  }
-  if (!user.getUserPlayLists.has) user.setUserPlayLists();
+  if (!user.getUserPlayLists.has && !user.getUserPlayLists.isLoading) {
+    user.setUserPlayLists();
+  }
  addToPlaylistModel.value = true;
  addToPlaylistId.value = id;
  console.log("开启", addToPlaylistModel.value, addToPlaylistId.value);
--- a/src/components/DataModel/DownloadSong.vue
+++ b/src/components/DataModel/DownloadSong.vue
@@ -203,7 +203,7 @@ const getSongSize = (data, type) => {
 const openDownloadModel = (data) => {
  if (user.userLogin) {
    if (
-      router.currentRoute.value.name === "cloud" ||
+      router.currentRoute.value.name === "user-cloud" ||
      user.userData?.vipType ||
      data?.fee === 0 ||
      data?.pc
--- a/src/components/Nav/index.vue
+++ b/src/components/Nav/index.vue
@@ -13,7 +13,6 @@
      <router-link class="link" to="/">首页</router-link>
      <n-dropdown
        trigger="hover"
-        size="large"
        :options="discoverOptions"
        @select="menuSelect"
      >
@@ -21,7 +20,6 @@
      </n-dropdown>
      <n-dropdown
        trigger="hover"
-        size="large"
        :options="userOptions"
        @select="menuSelect"
      >
@@ -139,11 +137,13 @@ const userDataRender = () => {
                        {
                          height: 4,
                          type: "line",
-                          percentage: user.getUserOtherData.level.progress * 100,
+                          percentage:
+                            user.getUserOtherData.level.progress * 100,
                          color: "#f55e55",
                        },
                        {
-                          default: () => "Lv." + user.getUserOtherData.level.level,
+                          default: () =>
+                            "Lv." + user.getUserOtherData.level.level,
                        }
                      )
                    : "等级信息获取失败"
@@ -182,6 +182,10 @@ const userOptions = ref(
          label: "收藏的歌单",
          key: "/user/like",
        },
+        {
+          label: "收藏的专辑",
+          key: "/user/album",
+        },
        {
          label: "收藏的歌手",
          key: "/user/artists",
@@ -191,7 +195,12 @@ const userOptions = ref(
          key: "/user/cloud",
        },
      ]
-    : []
+    : [
+        {
+          label: "登录账号",
+          key: "/login",
+        },
+      ]
 );
 const dropdownOptions = ref([
  {
@@ -205,56 +214,85 @@ const dropdownOptions = ref([
  },
  {
    label: () => {
-      return h(NText, null, {
-        default: () =>
-          setting.getSiteTheme == "light" ? "深色模式" : "浅色模式",
-      });
+      return h(
+        NText,
+        { style: { transform: "translateX(2px)" } },
+        {
+          default: () =>
+            setting.getSiteTheme == "light" ? "深色模式" : "浅色模式",
+        }
+      );
    },
    key: "changeTheme",
    icon: () => {
-      return h(NIcon, null, {
-        default: () => (setting.getSiteTheme == "light" ? h(Moon) : h(SunOne)),
-      });
+      return h(
+        NIcon,
+        { style: { transform: "translateX(2px)" } },
+        {
+          default: () =>
+            setting.getSiteTheme == "light" ? h(Moon) : h(SunOne),
+        }
+      );
    },
  },
  {
    label: "播放历史",
    key: "history",
    icon: () => {
-      return h(NIcon, null, {
-        default: () => h(History),
-      });
+      return h(
+        NIcon,
+        { style: { transform: "translateX(2px)" } },
+        {
+          default: () => h(History),
+        }
+      );
    },
  },
  {
    label: "全局设置",
    key: "setting",
    icon: () => {
-      return h(NIcon, null, {
-        default: () => h(SettingTwo),
-      });
+      return h(
+        NIcon,
+        { style: { transform: "translateX(2px)" } },
+        {
+          default: () => h(SettingTwo),
+        }
+      );
    },
  },
  {
    label: () => {
-      return h(NText, null, {
-        default: () => (user.userLogin ? "退出登录" : "登录账号"),
-      });
+      return h(
+        NText,
+        { style: { transform: "translateX(2px)" } },
+        {
+          default: () => (user.userLogin ? "退出登录" : "登录账号"),
+        }
+      );
    },
    key: "user",
    icon: () => {
-      return h(NIcon, null, {
-        default: () => (user.userLogin ? h(Logout) : h(Login)),
-      });
+      return h(
+        NIcon,
+        { style: { transform: "translateX(2px)" } },
+        {
+          default: () => (user.userLogin ? h(Logout) : h(Login)),
+        }
+      );
    },
  },
  {
    label: "关于本站",
    key: "about",
    icon: () => {
-      return h(NIcon, null, {
-        default: () => h(Info),
-      });
+      return h(
+        NIcon,
+        { style: { transform: "translateX(2px)" } },
+        {
+          default: () => h(Info),
+        }
+      );
    },
  },
 ]);
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -84,22 +84,27 @@ const routes = [
    children: [
      {
        path: "playlists",
-        name: "playlists",
+        name: "user-playlists",
        component: () => import("@/views/User/playlists.vue"),
      },
      {
        path: "like",
-        name: "like",
+        name: "user-like",
        component: () => import("@/views/User/like.vue"),
      },
+      {
+        path: "album",
+        name: "user-album",
+        component: () => import("@/views/User/album.vue"),
+      },
      {
        path: "artists",
-        name: "artists",
+        name: "user-artists",
        component: () => import("@/views/User/artists.vue"),
      },
      {
        path: "cloud",
-        name: "cloud",
+        name: "user-cloud",
        component: () => import("@/views/User/cloud.vue"),
      },
    ],
--- a/src/store/userData.js
+++ b/src/store/userData.js
@@ -5,8 +5,9 @@ import {
  getUserSubcount,
  getUserPlaylist,
  getUserArtistlist,
+  getUserAlbum,
 } from "@/api/user";
-import { formatNumber } from "@/utils/timeTools.js";
+import { formatNumber, getLongTime } from "@/utils/timeTools.js";

 const useUserDataStore = defineStore("userData", {
  state: () => {
@@ -21,12 +22,20 @@ const useUserDataStore = defineStore("userData", {
      userOtherData: {},
      // 用户歌单
      userPlayLists: {
+        isLoading: false,
        has: false,
        own: [], // 创建歌单
        like: [], // 收藏歌单
      },
+      // 用户专辑
+      userAlbum: {
+        isLoading: false,
+        has: false,
+        list: [],
+      },
      // 用户收藏歌手
      userArtistLists: {
+        isLoading: false,
        has: false,
        list: [],
      },
@@ -50,9 +59,13 @@ const useUserDataStore = defineStore("userData", {
      return state.userPlayLists;
    },
    // 获取用户收藏歌手
-    getUserArtistlists(state) {
+    getUserArtistLists(state) {
      return state.userArtistLists;
    },
+    // 获取用户收藏专辑
+    getUserAlbumLists(state) {
+      return state.userAlbum;
+    },
  },
  actions: {
    // 更改 cookie
@@ -91,50 +104,54 @@ const useUserDataStore = defineStore("userData", {
      userLogOut();
    },
    // 更改用户歌单
-    setUserPlayLists() {
+    async setUserPlayLists() {
      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 =
-              this.userOtherData.subcount.createdPlaylistCount +
-              this.userOtherData.subcount.subPlaylistCount;
-            getUserPlaylist(this.getUserData.userId, number).then((res) => {
-              if (res.playlist) {
-                this.userPlayLists = {
-                  own: [],
-                  like: [],
-                };
-                this.userPlayLists.has = true;
-                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),
-                    });
-                  }
-                });
-              } else {
-                $message.error("用户歌单为空");
-              }
-            });
+              subcount.createdPlaylistCount + subcount.subPlaylistCount;
+            const res = await getUserPlaylist(userId, number);
+            if (res.playlist) {
+              this.userPlayLists = {
+                has: true,
+                own: [],
+                like: [],
+              };
+              res.playlist.forEach((v) => {
+                if (v.creator.userId === this.getUserData.userId) {
+                  this.userPlayLists.own.push({
+                    id: v.id,
+                    cover: v.coverImgUrl,
+                    name: v.name,
+                    artist: v.creator,
+                    desc: v.description,
+                    tags: v.tags,
+                    playCount: formatNumber(v.playCount),
+                    trackCount: v.trackCount,
+                  });
+                } else {
+                  this.userPlayLists.like.push({
+                    id: v.id,
+                    cover: v.coverImgUrl,
+                    name: v.name,
+                    artist: v.creator,
+                    playCount: formatNumber(v.playCount),
+                  });
+                }
+              });
+              this.userPlayLists.isLoading = false;
+            } else {
+              this.userPlayLists.isLoading = false;
+              $message.error("用户歌单为空");
+            }
          }
        } catch (err) {
+          this.userPlayLists.isLoading = false;
          console.error("获取用户歌单时出现错误：" + err);
          $message.error("获取用户歌单时出现错误，请刷新后重试");
        }
@@ -143,13 +160,13 @@ const useUserDataStore = defineStore("userData", {
      }
    },
    // 更改用户收藏歌手
-    setUserArtistLists() {
+    async setUserArtistLists(callback) {
      if (this.userLogin) {
-        getUserArtistlist().then((res) => {
+        try {
+          this.userArtistLists.isLoading = true;
+          const res = await getUserArtistlist();
          if (res.data) {
-            this.userArtistLists = {
-              list: [],
-            };
+            this.userArtistLists.list = [];
            this.userArtistLists.has = true;
            res.data.forEach((v) => {
              this.userArtistLists.list.push({
@@ -159,10 +176,53 @@ const useUserDataStore = defineStore("userData", {
                size: v.musicSize,
              });
            });
+            if (typeof callback === "function") {
+              callback();
+            }
+            this.userArtistLists.isLoading = false;
          } else {
+            this.userArtistLists.isLoading = false;
            $message.error("用户收藏歌手为空");
          }
-        });
+        } catch (err) {
+          this.userArtistLists.isLoading = false;
+          console.error("用户收藏歌手获取失败：" + err);
+          $message.error("用户收藏歌手获取失败，请刷新后重试");
+        }
+      } else {
+        $message.error("请登录账号后使用");
+      }
+    },
+    // 更改用户收藏专辑
+    async setUserAlbumLists() {
+      if (this.userLogin) {
+        try {
+          let offset = 0;
+          let totalCount = null;
+          this.userAlbum.isLoading = true;
+          this.userAlbum.list = [];
+          while (totalCount === null || offset < totalCount) {
+            const res = await getUserAlbum(30, offset);
+            res.data.forEach((v) => {
+              this.userAlbum.list.push({
+                id: v.id,
+                cover: v.picUrl,
+                name: v.name,
+                artist: v.artists,
+                time: getLongTime(v.subTime),
+              });
+            });
+            totalCount = res.count;
+            offset += 30;
+            console.log(totalCount, offset, this.userAlbum.list);
+          }
+          this.userAlbum.isLoading = false;
+          this.userAlbum.has = true;
+        } catch (err) {
+          this.userAlbum.isLoading = false;
+          console.error("用户收藏专辑获取失败：" + err);
+          $message.error("用户收藏专辑获取失败，请刷新后重试");
+        }
      } else {
        $message.error("请登录账号后使用");
      }
--- a/src/views/Album/AlbumView.vue
+++ b/src/views/Album/AlbumView.vue
@@ -71,7 +71,7 @@
    </div>
  </div>
  <div class="title" v-else-if="!albumId">
-    <span class="key">未提供所需数据</span>
+    <span class="key">参数不完整</span>
    <br />
    <n-button strong secondary @click="router.go(-1)" style="margin-top: 20px">
      返回上一级
--- a/src/views/Artist/index.vue
+++ b/src/views/Artist/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="artist">
-    <div class="artistData" v-if="artistData">
+    <div class="artistData" v-if="artistId && artistData">
      <div class="cover">
        <n-avatar
          round
@@ -31,6 +31,30 @@
        <n-text class="desc text-hidden" @click="artistDescShow = true">
          {{ artistData.desc }}
        </n-text>
+        <n-space class="button" v-if="user.userLogin">
+          <!-- <n-button type="primary" strong secondary>
+            <template #icon>
+              <n-icon :component="PlayArrowRound" />
+            </template>
+            播放热门歌曲
+          </n-button> -->
+          <n-button
+            :type="artistLikeBtn ? 'primary' : 'default'"
+            strong
+            secondary
+            @click="toLikeArtist(artistData)"
+          >
+            <template #icon>
+              <n-icon
+                :component="
+                  artistLikeBtn ? PersonAddAlt1Round : PersonRemoveAlt1Round
+                "
+              />
+            </template>
+            {{ artistLikeBtn ? "收藏歌手" : "取消收藏歌手" }}
+          </n-button>
+        </n-space>
+        <!-- 歌手介绍 -->
        <n-modal
          class="s-modal"
          v-model:show="artistDescShow"
@@ -44,12 +68,24 @@
        </n-modal>
      </div>
    </div>
+    <div class="error" v-else-if="!artistId">
+      <n-text>参数不完整</n-text>
+      <br />
+      <n-button
+        strong
+        secondary
+        @click="router.go(-1)"
+        style="margin-top: 20px"
+      >
+        返回上一级
+      </n-button>
+    </div>
    <n-tabs
      class="main-tab"
      type="segment"
      @update:value="tabChange"
      v-model:value="tabValue"
-      v-if="artistId"
+      v-if="artistData"
    >
      <n-tab name="songs"> 热门单曲 </n-tab>
      <n-tab name="albums"> 专辑 </n-tab>
@@ -72,14 +108,24 @@

 <script setup>
 import { useRouter } from "vue-router";
-import { getArtistDetail } from "@/api/artist";
-import { MusicNoteFilled, AlbumFilled, VideocamRound } from "@vicons/material";
+import { userStore } from "@/store";
+import { getArtistDetail, likeArtist } from "@/api/artist";
+import {
+  MusicNoteFilled,
+  AlbumFilled,
+  VideocamRound,
+  PersonAddAlt1Round,
+  PersonRemoveAlt1Round,
+} from "@vicons/material";
+
 const router = useRouter();
+const user = userStore();

 // 歌手数据
 const artistId = ref(router.currentRoute.value.query.id);
 const artistData = ref(null);
 const artistDescShow = ref(false);
+const artistLikeBtn = ref(false);

 // Tab 默认选中
 const tabValue = ref(router.currentRoute.value.path.split("/")[2]);
@@ -87,20 +133,29 @@ const tabValue = ref(router.currentRoute.value.path.split("/")[2]);
 // 获取歌手数据
 const getArtistDetailData = (id) => {
  if (id) {
-    getArtistDetail(id).then((res) => {
-      console.log(res);
-      artistData.value = {
-        name: res.data.artist.name,
-        occupation: res.data.identify ? res.data.identify.imageDesc : null,
-        cover: res.data.artist.cover,
-        desc: res.data.artist.briefDesc,
-        albumSize: res.data.artist.albumSize,
-        musicSize: res.data.artist.musicSize,
-        mvSize: res.data.artist.mvSize,
-      };
-    });
+    getArtistDetail(id)
+      .then((res) => {
+        console.log(res);
+        artistData.value = {
+          id: res.data.artist.id,
+          name: res.data.artist.name,
+          occupation: res.data.identify ? res.data.identify.imageDesc : null,
+          cover: res.data.artist.cover,
+          desc: res.data.artist.briefDesc,
+          albumSize: res.data.artist.albumSize,
+          musicSize: res.data.artist.musicSize,
+          mvSize: res.data.artist.mvSize,
+        };
+        // 请求后回顶
+        if ($mainContent) $mainContent.scrollIntoView({ behavior: "smooth" });
+      })
+      .catch((err) => {
+        router.go(-1);
+        console.error("歌手信息获取失败：" + err);
+        $message.error("歌手信息获取失败");
+      });
  } else {
-    $message.error("请提供歌手id");
+    $message.error("参数不完整");
  }
 };

@@ -116,8 +171,51 @@ const tabChange = (value) => {
  });
 };

+// 判断收藏还是取消
+const isLikeOrDislike = (id) => {
+  if (user.getUserArtistLists.list[0]) {
+    const index = user.getUserArtistLists.list.findIndex(
+      (item) => item.id === Number(id)
+    );
+    if (index !== -1) {
+      return false;
+    }
+    return true;
+  } else {
+    return true;
+  }
+};
+
+// 收藏/取消收藏歌手
+const toLikeArtist = (data) => {
+  const type = isLikeOrDislike(data.id) ? 1 : 2;
+  likeArtist(type, data.id).then((res) => {
+    if (res.code === 200) {
+      $message.success(
+        `${data.name}${type == 1 ? "收藏成功" : "取消收藏成功"}`
+      );
+      user.setUserArtistLists(() => {
+        artistLikeBtn.value = isLikeOrDislike(artistId.value);
+      });
+    } else {
+      $message.error(`${data.name}${type == 1 ? "收藏失败" : "取消收藏失败"}`);
+    }
+  });
+};
+
 onMounted(() => {
  getArtistDetailData(artistId.value);
+  artistLikeBtn.value = isLikeOrDislike(artistId.value);
+  if (
+    user.userLogin &&
+    !user.getUserArtistLists.has &&
+    !user.getUserArtistLists.isLoading
+  ) {
+    user.setUserArtistLists(() => {
+      console.log("执行回调", artistId.value, isLikeOrDislike(artistId.value));
+      artistLikeBtn.value = isLikeOrDislike(artistId.value);
+    });
+  }
 });

 // 监听路由参数变化
@@ -126,6 +224,7 @@ watch(
  (val) => {
    artistId.value = val.query.id;
    tabValue.value = val.path.split("/")[2];
+    artistLikeBtn.value = isLikeOrDislike(artistId.value);
    if (val.path.split("/")[1] == "artist") {
      getArtistDetailData(artistId.value);
    }
@@ -136,6 +235,15 @@ watch(
 <style lang="scss" scoped>
 .artist {
  margin-top: 30px;
+  .error {
+    margin-top: 30px;
+    margin-bottom: 20px;
+    .n-text {
+      font-size: 40px;
+      font-weight: bold;
+      margin-right: 8px;
+    }
+  }
  .artistData {
    display: flex;
    align-items: center;
@@ -167,6 +275,8 @@ watch(
    }
    .cover {
      margin-right: 40px;
+      display: flex;
+      align-items: center;
      .n-avatar {
        height: 240px;
        width: 240px;
@@ -179,7 +289,7 @@ watch(
      .name {
        font-size: 40px;
        font-weight: bold;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
        margin-left: 2px;
      }
      .occupation {
@@ -209,13 +319,16 @@ watch(
      }
      .desc {
        margin-top: 12px;
-        -webkit-line-clamp: 3;
+        -webkit-line-clamp: 2;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          opacity: 0.8;
        }
      }
+      .button {
+        margin-top: 18px;
+      }
    }
  }
  .content {
--- a/src/views/PlayList/PlayListView.vue
+++ b/src/views/PlayList/PlayListView.vue
@@ -102,7 +102,7 @@
    </div>
  </div>
  <div class="title" v-else-if="!playListId">
-    <span class="key">未提供所需数据</span>
+    <span class="key">参数不完整</span>
    <br />
    <n-button strong secondary @click="router.go(-1)" style="margin-top: 20px">
      返回上一级
--- a/src/views/User/album.vue
+++ b/src/views/User/album.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="album">
+    <CoverLists :listData="user.getUserAlbumLists.list" listType="album" />
+  </div>
+</template>
+
+<script setup>
+import { userStore } from "@/store";
+import CoverLists from "@/components/DataList/CoverLists.vue";
+
+const user = userStore();
+
+onMounted(() => {
+  if (!user.getUserAlbumLists.has && !user.getUserAlbumLists.isLoading)
+    user.setUserAlbumLists();
+});
+</script>
--- a/src/views/User/artists.vue
+++ b/src/views/User/artists.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="artists">
-    <ArtistLists :listData="user.getUserArtistlists.list" />
+    <ArtistLists :listData="user.getUserArtistLists.list" />
  </div>
 </template>

@@ -11,6 +11,7 @@ import ArtistLists from "@/components/DataList/ArtistLists.vue";
 const user = userStore();

 onMounted(() => {
-  if (!user.getUserArtistlists.has) user.setUserArtistLists();
+  if (!user.getUserArtistLists.has && !user.getUserArtistLists.isLoading)
+    user.setUserArtistLists();
 });
 </script>
--- a/src/views/User/cloud.vue
+++ b/src/views/User/cloud.vue
@@ -69,13 +69,9 @@
        processing
      />
      <template #footer>
-        <n-space justify="end">
+        <n-space justify="end" v-if="upSongType === 'error'">
          <n-button @click="closeUpSongModal"> 取消 </n-button>
-          <n-button
-            type="primary"
-            @click="resetUpSongModal"
-            v-if="upSongType === 'error'"
-          >
+          <n-button type="primary" @click="resetUpSongModal">
            重新上传
          </n-button>
        </n-space>
@@ -177,6 +173,7 @@ const upCloudSongData = (e) => {
      }
    })
    .catch((err) => {
+      upSongType.value = "error";
      closeUpSongModal();
      $message.error("歌曲上传出现错误");
      console.error("歌曲上传出现错误：" + err);
--- a/src/views/User/index.vue
+++ b/src/views/User/index.vue
@@ -22,6 +22,7 @@
    >
      <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-tabs>
--- a/src/views/User/like.vue
+++ b/src/views/User/like.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="like">
-    <CoverLists :listData="user.getUserPlayLists.like" :showMore="true" />
+    <CoverLists :listData="user.getUserPlayLists.like" />
  </div>
 </template>

@@ -11,6 +11,7 @@ import CoverLists from "@/components/DataList/CoverLists.vue";
 const user = userStore();

 onMounted(() => {
-  if (!user.getUserPlayLists.has) user.setUserPlayLists();
+  if (!user.getUserPlayLists.has && !user.getUserPlayLists.isLoading)
+    user.setUserPlayLists();
 });
-</script>
+</script>
--- a/src/views/User/playlists.vue
+++ b/src/views/User/playlists.vue
@@ -44,7 +44,7 @@
        </template>
      </n-modal>
    </div>
-    <CoverLists :listData="user.getUserPlayLists.own" :showMore="true" />
+    <CoverLists :listData="user.getUserPlayLists.own" />
  </div>
 </template>

@@ -86,7 +86,8 @@ const createClose = () => {
 };

 onMounted(() => {
-  if (!user.getUserPlayLists.has) user.setUserPlayLists();
+  if (!user.getUserPlayLists.has && !user.getUserPlayLists.isLoading)
+    user.setUserPlayLists();
 });
 </script>

--- a/src/views/Video/VideoView.vue
+++ b/src/views/Video/VideoView.vue
@@ -123,6 +123,8 @@ const playerOptions = {
    pip: "画中画",
    enterFullscreen: "开启全屏",
    exitFullscreen: "退出全屏",
+    mute: "音量",
+    unmute: "静音",
  },
  tooltips: {
    controls: true,
@@ -327,7 +329,7 @@ watch(
  .simiVideo {
    width: 20vw;
    min-width: 200px;
-    max-width: 400px;
+    max-width: 300px;
    margin-left: 30px;
    @media (max-width: 990px) {
      max-width: 100%;
Author	SHA1	Message	Date
imsyy	55df8f05dc	feat: 新增收藏专辑页面 & 部分变量调整	2023-04-11 15:21:18 +08:00
imsyy	18359d69d2	feat: 新增收藏/取消收藏专辑 & 歌手页优化	2023-04-10 18:29:40 +08:00
imsyy	d291e86998	feat: 免责声明	2023-04-10 14:09:29 +08:00