✨ feat: 支持查看电台节目评论

src/api/comment.js

@@ -95,3 +95,24 @@ export const likeComment = (id, cid, t, type = 0) => {
     },
   });
 };
+
+/**
+ * 电台节目评论
+ * @param {number} id - 电台节目的 id
+ * @param {number} limit - 取出评论数量 , 默认为 20
+ * @param {number} offset - 偏移数量 , 用于分页 , 如 :( 评论页数 -1)*20, 其中 20 为 limit 的值
+ * @param {string} before - 分页参数,取上一页最后一项的 time 获取下一页数据(获取超过 5000 条评论的时候需要用到)
+ */
+export const commentDj = (id, limit, offset, before) => {
+  return axios({
+    method: "GET",
+    url: "/comment/dj",
+    params: {
+      id,
+      limit,
+      offset,
+      before,
+      timestamp: new Date().getTime(),
+    },
+  });
+};

src/api/dj.js

@@ -118,6 +118,20 @@ export const getDjProgram = (rid, limit = 50, offset = 0) => {
   });
 };
 
+/**
+ * 电台 - 节目详情
+ * @param {string} id - 电台 的 id
+ */
+export const getDjProgramDetail = (id) => {
+  return axios({
+    method: "GET",
+    url: "/dj/program/detail",
+    params: {
+      id,
+    },
+  });
+};
+
 /**
  * 电台 - 订阅
  * @param {number} rid - 电台 的 id

src/components/Player/FullPlayer.vue

@@ -79,13 +79,16 @@
           class="main-player"
         >
           <div
-            v-show="!(pureLyricMode && isHasLrc)"
+            v-show="!(pureLyricMode && isHasLrc) || playMode === 'dj'"
             :class="['content', { 'no-lrc': !isHasLrc || playMode === 'dj' }]"
           >
             <!-- 封面 -->
             <PlayerCover />
             <!-- 信息 -->
-            <div v-show="playCoverType === 'cover' || !isHasLrc" :class="['data', playCoverType]">
+            <div
+              v-show="playCoverType === 'cover' || !isHasLrc || playMode === 'dj'"
+              :class="['data', playCoverType]"
+            >
               <div class="desc">
                 <div class="title">
                   <span class="name">{{ music.getPlaySongData.name || "未知曲目" }}</span>

src/components/Player/MainControl.vue

@@ -94,7 +94,7 @@
             </n-icon>
             <!-- 更多操作 -->
             <n-dropdown
-              v-if="playMode !== 'dj' && !music.getPlaySongData?.path"
+              v-if="!music.getPlaySongData?.path"
               :options="songMoreOptions"
               :show-arrow="true"
               placement="top-start"
@@ -415,6 +415,7 @@ const songMoreOptions = computed(() => [
   {
     key: "add-pl",
     label: "添加到歌单",
+    show: playMode.value !== "dj",
     props: {
       onClick: () => {
         addPlaylistRef.value?.openAddToPlaylist(music.getPlaySongData?.id);
@@ -431,6 +432,7 @@ const songMoreOptions = computed(() => [
           path: "/comment",
           query: {
             id: music.getPlaySongData?.id,
+            type: playMode.value,
           },
         });
       },
@@ -440,7 +442,9 @@ const songMoreOptions = computed(() => [
   {
     key: "mv",
     label: "观看 MV",
-    show: music.getPlaySongData?.mv && music.getPlaySongData?.mv !== 0 ? true : false,
+    show:
+      playMode.value !== "dj" &&
+      (music.getPlaySongData?.mv && music.getPlaySongData?.mv !== 0 ? true : false),
     props: {
       onClick: () => {
         router.push({
@@ -456,7 +460,7 @@ const songMoreOptions = computed(() => [
   {
     key: "download",
     label: "下载歌曲",
-    show: music.getPlaySongData?.path ? false : true,
+    show: playMode.value !== "dj" && (music.getPlaySongData?.path ? false : true),
     props: {
       onClick: () => {
         downloadSongRef.value?.openDownloadModal(music.getPlaySongData);

src/components/Player/PlayerControl.vue

@@ -122,12 +122,10 @@
         </n-icon>
         <!-- 评论 -->
         <n-icon
-          v-if="!music.getPlaySongData?.path && playMode !== 'dj'"
+          v-if="!music.getPlaySongData?.path"
           class="hidden"
           size="22"
-          @click.stop="
-            (showFullPlayer = false), router.push(`/comment?id=${music.getPlaySongData?.id}`)
-          "
+          @click.stop="jumpToComment"
         >
           <SvgIcon icon="comment-text" />
         </n-icon>
@@ -311,6 +309,18 @@ const controlEnter = () => {
 const controlMove = (e) => {
   if (!e.target.closest(".slider")) e.stopPropagation();
 };
+
+// 跳转至评论
+const jumpToComment = () => {
+  showFullPlayer.value = false;
+  router.push({
+    path: "/comment",
+    query: {
+      id: music.getPlaySongData?.id,
+      type: playMode.value,
+    },
+  });
+};
 </script>
 
 <style lang="scss" scoped>

src/utils/Player.js

@@ -57,13 +57,15 @@ export const initPlayer = async (playNow = false) => {
     if (playMode === "fm") music.playSongData = {};
     // 在线歌曲
     if (!isLocalSong) {
-      // 获取歌曲信息
-      const { id } = playSongData;
-      if (!id) return false;
+      // 获取歌曲 ID
+      let songId = playSongData?.id;
+      if (!songId) return false;
+      // 若为电台模式
+      if (playMode === "dj") songId = music.getPlaySongData?.djId;
       // 开启加载状态
       status.playLoading = true;
       // 获取播放地址
-      const url = await getNormalSongUrl(id, status, playNow);
+      const url = await getNormalSongUrl(songId, status, playNow);
       // 正常播放地址
       if (url) {
         status.playUseOtherSource = false;
@@ -91,7 +93,7 @@ export const initPlayer = async (playNow = false) => {
       // 下一曲
       else {
         if (playIndex !== playList.length - 1) {
-          changePlayIndex();
+          // changePlayIndex();
         } else {
           status.playLoading = false;
           status.playState = false;
@@ -236,7 +238,7 @@ export const createPlayer = async (src, autoPlay = true) => {
     const audioDom = player._sounds[0]._node;
     audioDom.crossOrigin = "anonymous";
     // 写入播放历史
-    music.setPlayHistory(playSongData);
+    if (playMode !== "dj") music.setPlayHistory(playSongData);
     // 生成音乐频谱
     // 由于浏览器安全策略，无法在此处启动
     if (showSpectrums && checkPlatform.electron()) processSpectrum(player);

src/utils/formatData.js

@@ -112,7 +112,8 @@ const formatData = (data, type = "playlist", noTracks = false) => {
       // dj
       case "dj":
         return {
-          id: v.mainTrackId || v.id || v.vid,
+          id: v.id || v.vid,
+          djId: v.mainTrackId || v.id,
           name: v.name,
           creator: v.dj,
           count: v.programCount,

src/utils/globalEvents.js

@@ -11,7 +11,6 @@ const globalEvents = (router) => {
   // 显示播放器
   electron.ipcRenderer.on("showPlayer", () => {
     const status = siteStatus();
-    if (status.playMode === "dj") return false;
     status.showFullPlayer = true;
   });
   // 播放或暂停

src/views/Comment.vue

@@ -32,7 +32,7 @@
         </n-image>
         <div class="content">
           <div class="name">{{ songDetail?.name || "未知曲目" }}</div>
-          <div class="artist">
+          <div v-if="commentType === 'normal'" class="artist">
             <n-icon depth="3" size="20">
               <SvgIcon icon="account-music" />
             </n-icon>
@@ -45,6 +45,14 @@
               <span class="ar"> {{ songDetail?.artists || "未知艺术家" }} </span>
             </div>
           </div>
+          <div v-else-if="songDetail?.creator" class="artist dj">
+            <n-icon depth="3" size="20">
+              <SvgIcon icon="record" />
+            </n-icon>
+            <span class="all-ar dj-name">
+              {{ songDetail.creator?.brand || "未知电台" }}
+            </span>
+          </div>
         </div>
       </n-card>
     </Transition>
@@ -86,14 +94,18 @@
 <script setup>
 import { useRouter } from "vue-router";
 import { getSongDetail } from "@/api/song";
-import { getComment, getHotComment } from "@/api/comment";
+import { getDjProgramDetail } from "@/api/dj";
+import { getComment, getHotComment, commentDj } from "@/api/comment";
 import formatData from "@/utils/formatData";
 
 const router = useRouter();
 
 // 歌曲 id
 const songId = ref(router.currentRoute.value.query.id);
 
+// 评论类型
+const commentType = ref(router.currentRoute.value.query.type || "normal");
+
 // 歌曲信息
 const songDetail = ref(null);
 
@@ -105,9 +117,15 @@ const hotCommentData = ref(null);
 // 获取歌曲详情
 const getSongDetailData = async (id) => {
   try {
-    const detail = await getSongDetail(id);
-    const data = formatData(detail?.songs?.[0], "song");
-    songDetail.value = data?.[0] ?? null;
+    if (commentType.value === "normal") {
+      const detail = await getSongDetail(id);
+      const data = formatData(detail?.songs?.[0], "song");
+      songDetail.value = data?.[0] ?? null;
+    } else if (commentType.value === "dj") {
+      const detail = await getDjProgramDetail(id);
+      const data = formatData(detail?.program, "dj");
+      songDetail.value = data?.[0] ?? null;
+    }
   } catch (error) {
     console.error("获取歌曲详情失败：", error);
   }
@@ -120,14 +138,24 @@ const getCommentData = async (id, pageNo = 1, sortType = 3, pageSize = 20) => {
     const cursor =
       pageNo !== 1 && commentData.value?.cursor !== "0" ? commentData.value.cursor : null;
     // 获取热门评论和普通评论
-    const [hotComments, comments] = await Promise.all([
-      pageNo === 1 ? getHotComment(id, 0, 10) : null,
-      getComment(id, 0, pageNo, sortType, pageSize, cursor),
-    ]);
-    // 更新数据
-    if (comments?.data.totalCount === 0) return (commentData.value = "empty");
-    commentData.value = comments?.data;
-    hotCommentData.value = hotComments?.hotComments?.[0] ? hotComments.hotComments : "no-comment";
+    if (commentType.value === "normal") {
+      const [hotComments, comments] = await Promise.all([
+        pageNo === 1 ? getHotComment(id, 0, 10) : null,
+        getComment(id, 0, pageNo, sortType, pageSize, cursor),
+      ]);
+      // 更新数据
+      if (comments?.data.totalCount === 0) return (commentData.value = "empty");
+      commentData.value = comments?.data;
+      hotCommentData.value = hotComments?.hotComments?.[0] ? hotComments.hotComments : "no-comment";
+    } else if (commentType.value === "dj") {
+      const offset = (pageNo - 1) * pageSize;
+      const { hotComments, comments, total } = await commentDj(id, pageSize, offset, cursor);
+      // 更新数据
+      if (total === 0) return (commentData.value = "empty");
+      commentData.value = { totalCount: comments?.length, comments };
+      hotCommentData.value = hotComments?.[0] ? hotComments : "no-comment";
+      console.log(commentData.value, hotCommentData.value);
+    }
   } catch (error) {
     console.error("获取评论数据出错：", error);
     $message.error("获取评论数据出错");