Merge pull request #942 from WorldSansha/feat-new-work

feat: 在播放界面、评论区、专辑等页面添加具体评论数量

Author: imsyy

src/components/List/ListComment.vue

@@ -25,6 +25,7 @@
             <div class="title">
               <SvgIcon name="Message" />
               <span>全部评论</span>
+              <span v-if="commentTotalCount > 0" class="count">{{ commentTotalCount }}</span>
             </div>
           </div>
           <CommentList
@@ -62,6 +63,10 @@ const props = withDefaults(
   {},
 );
 
+const emit = defineEmits<{
+  "update:commentCount": [count: number];
+}>();
+
 const commentListRef = ref<HTMLElement | null>(null);
 
 // 列表高度
@@ -73,6 +78,7 @@ const commentData = ref<CommentType[]>([]);
 const commentHotData = ref<CommentType[] | null>(null);
 const commentPage = ref<number>(1);
 const commentHasMore = ref<boolean>(true);
+const commentTotalCount = ref<number>(0);
 
 // 获取热门评论
 const getHotCommentData = async () => {
@@ -106,6 +112,11 @@ const getCommentData = async (clean: boolean = true) => {
         : undefined;
     // 获取评论
     const result = await getComment(props.id, props.type, commentPage.value, 20, 3, cursor);
+    // 更新评论总数
+    if (result.data?.totalCount != null) {
+      commentTotalCount.value = result.data.totalCount;
+      emit("update:commentCount", result.data.totalCount);
+    }
     if (isEmpty(result.data?.comments)) {
       commentHasMore.value = false;
       commentLoading.value = false;
@@ -140,6 +151,7 @@ watch(
       commentHotData.value = null;
       commentPage.value = 1;
       commentHasMore.value = true;
+      commentTotalCount.value = 0;
       getCommentData();
     }
   },
@@ -169,6 +181,12 @@ watch(
       margin-right: 8px;
       font-size: 20px;
     }
+    .count {
+      margin-left: 6px;
+      font-size: 13px;
+      font-weight: normal;
+      opacity: 0.6;
+    }
   }
 }
 </style>

src/components/List/ListDetail.vue

@@ -214,7 +214,12 @@
                     {{ detailData?.count }}
                   </n-text>
                 </n-tab>
-                <n-tab name="comments"> 评论 </n-tab>
+                <n-tab name="comments">
+                  评论
+                  <n-text v-if="settingStore.showCommentCount !== 'off' && detailData?.commentCount" class="count" depth="3">
+                    {{ formatCommentCount(detailData.commentCount) }}
+                  </n-text>
+                </n-tab>
               </n-tabs>
             </n-flex>
           </n-flex>
@@ -234,7 +239,7 @@
 import type { CoverType, SongType } from "@/types/main";
 import type { DropdownOption } from "naive-ui";
 import { coverLoaded, formatNumber } from "@/utils/helper";
-import { removeBrackets } from "@/utils/format";
+import { removeBrackets, formatCommentCount } from "@/utils/format";
 import { renderToolbar } from "@/utils/meta";
 import { formatTimestamp } from "@/utils/time";
 import { openDescModal, openJumpArtist } from "@/utils/modal";

src/components/Player/PlayerComponents/PlayerComment.vue

@@ -63,6 +63,9 @@
         <div class="title">
           <SvgIcon name="Message" />
           <span>全部评论</span>
+          <span v-if="statusStore.songCommentCount > 0" class="count">
+            {{ statusStore.songCommentCount }}
+          </span>
         </div>
       </div>
       <CommentList
@@ -170,6 +173,10 @@ const getAllComment = async () => {
       : undefined;
   // 获取评论
   const result = await getComment(songId.value, songType.value, commentPage.value, 20, 3, cursor);
+  // 更新评论总数
+  if (result.data?.totalCount != null) {
+    statusStore.songCommentCount = result.data.totalCount;
+  }
   if (isEmpty(result.data?.comments)) {
     commentHasMore.value = false;
     commentLoading.value = false;
@@ -197,6 +204,7 @@ watch(
     commentHotData.value = [];
     commentPage.value = 1;
     commentHasMore.value = true;
+    statusStore.songCommentCount = 0;
     if (!isShowComment.value) return;
     getHotCommentData();
     getAllComment();
@@ -322,6 +330,12 @@ onMounted(() => {
       .n-icon {
         margin-right: 6px;
       }
+      .count {
+        margin-left: 6px;
+        font-size: 14px;
+        font-weight: normal;
+        opacity: 0.6;
+      }
     }
   }
 }

src/components/Player/PlayerControl.vue

@@ -39,18 +39,22 @@
           >
             <SvgIcon name="Download" />
           </div>
-          <!-- 显示评论 -->
-          <div
-            v-if="
-              !musicStore.playSong.path &&
-              !statusStore.pureLyricMode &&
-              settingStore.fullscreenPlayerElements.comments
-            "
-            class="menu-icon"
-            @click.stop="statusStore.showPlayerComment = !statusStore.showPlayerComment"
+          <n-badge
+            :value="formatCommentCount(statusStore.songCommentCount)"
+            :show="settingStore.showCommentCount !== 'off' && statusStore.songCommentCount > 0"
           >
-            <SvgIcon :depth="statusStore.showPlayerComment ? 1 : 3" name="Message" />
-          </div>
+            <div
+              v-if="
+                !musicStore.playSong.path &&
+                !statusStore.pureLyricMode &&
+                settingStore.fullscreenPlayerElements.comments
+              "
+              class="menu-icon"
+              @click.stop="statusStore.showPlayerComment = !statusStore.showPlayerComment"
+            >
+              <SvgIcon :depth="statusStore.showPlayerComment ? 1 : 3" name="Message" />
+            </div>
+          </n-badge>
         </n-flex>
         <div class="center">
           <div class="btn">
@@ -151,6 +155,8 @@ import { useDataStore, useMusicStore, useStatusStore, useSettingStore } from "@/
 import { toLikeSong } from "@/utils/auth";
 import { useTimeFormat } from "@/composables/useTimeFormat";
 import { openDownloadSong, openPlaylistAdd } from "@/utils/modal";
+import { getComment } from "@/api/comment";
+import { formatCommentCount } from "@/utils/format";
 
 const dataStore = useDataStore();
 const musicStore = useMusicStore();
@@ -162,6 +168,37 @@ const player = usePlayerController();
 
 const { timeDisplay, toggleTimeFormat } = useTimeFormat();
 
+// 获取评论数量
+const fetchCommentCount = async () => {
+  if (settingStore.showCommentCount === "off") return;
+  const id = musicStore.playSong.id;
+  if (!id || typeof id !== "number" || musicStore.playSong.path) return;
+  try {
+    const type = musicStore.playSong.type === "radio" ? 4 : 0;
+    const result = await getComment(id, type as 0 | 4, 1, 1);
+    if (result.data?.totalCount != null) {
+      statusStore.songCommentCount = result.data.totalCount;
+    }
+  } catch {
+    // 忽略错误
+  }
+};
+
+// 歌曲变化时获取评论数量
+watch(
+  () => musicStore.playSong.id,
+  () => {
+    statusStore.songCommentCount = 0;
+    fetchCommentCount();
+  },
+);
+
+onMounted(() => {
+  if (musicStore.playSong.id && !musicStore.playSong.path) {
+    fetchCommentCount();
+  }
+});
+
 const showAutomixFx = ref(false);
 let automixFxTimer: number | null = null;
 const showAutomixLabel = ref(false);
@@ -274,6 +311,12 @@ onBeforeUnmount(() => {
         transform: scale(1);
       }
     }
+    :deep(.n-badge-sup) {
+      background-color: rgba(var(--main-cover-color), 0.14);
+      .n-base-slot-machine {
+        color: rgb(var(--main-cover-color));
+      }
+    }
     :deep(.right-menu) {
       .n-badge-sup {
         background-color: rgba(var(--main-cover-color), 0.14);

src/components/Setting/config/appearance.ts

@@ -169,6 +169,21 @@ export const useAppearanceSettings = (): SettingConfig => {
               set: (v) => (settingStore.showPlaylistCount = v),
             }),
           },
+          {
+            key: "showCommentCount",
+            label: "显示评论数量",
+            type: "select",
+            description: "在评论按钮上显示评论数量",
+            options: [
+              { label: "关闭", value: "off" },
+              { label: "缩减", value: "compact" },
+              { label: "完整", value: "full" },
+            ],
+            value: computed({
+              get: () => settingStore.showCommentCount,
+              set: (v) => (settingStore.showCommentCount = v),
+            }),
+          },
           {
             key: "routeAnimation",
             label: "页面切换动画",

src/stores/setting.ts

@@ -221,6 +221,8 @@ export interface SettingState {
   progressAdjustLyric: boolean;
   /** 显示播放列表数量 */
   showPlaylistCount: boolean;
+  /** 显示评论数量 */
+  showCommentCount: "off" | "compact" | "full";
   /** 是否显示音乐频谱 */
   showSpectrums: boolean;
   /** 是否开启系统音频集成 */
@@ -570,6 +572,7 @@ export const useSettingStore = defineStore("setting", {
     progressTooltipShow: true,
     progressAdjustLyric: false,
     showPlaylistCount: true,
+    showCommentCount: "compact",
     showSpectrums: false,
     smtcOpen: true,
     playSongDemo: false,

src/stores/status.ts

@@ -165,6 +165,8 @@ interface StatusState {
   playlistMode: "online" | "local";
   automixFxSeq: number;
   automixEndedSeq: number;
+  /** 当前歌曲评论数量 */
+  songCommentCount: number;
 }
 
 export const useStatusStore = defineStore("status", {
@@ -248,6 +250,7 @@ export const useStatusStore = defineStore("status", {
     playlistMode: "online",
     automixFxSeq: 0,
     automixEndedSeq: 0,
+    songCommentCount: 0,
   }),
   getters: {
     // 播放音量图标

src/utils/format.ts

@@ -1,9 +1,28 @@
-import { useDataStore, useMusicStore, useStatusStore } from "@/stores";
+import { useDataStore, useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import type { ArtistType, CatType, CommentType, CoverType, MetaData, SongType } from "@/types/main";
 import { flatMap, isArray, uniqBy } from "lodash-es";
 import { handleSongQuality } from "./helper";
 import { msToTime } from "./time";
 
+/**
+ * 格式化评论数量
+ * @param count 评论数量
+ * @returns 格式化后的评论数量
+ */
+export const formatCommentCount = (count: number): string | number => {
+  const settingStore = useSettingStore();
+  if (settingStore.showCommentCount === "full") return count;
+  if (count >= 10000) {
+    const val = Math.floor(count / 1000) / 10;
+    return `${val % 1 === 0 ? val.toFixed(0) : val}W+`;
+  }
+  if (count >= 1000) {
+    const val = Math.floor(count / 100) / 10;
+    return `${val % 1 === 0 ? val.toFixed(0) : val}K+`;
+  }
+  return count;
+};
+
 /**
  * 移除文本中的括号内容（支持中英文括号）
  * @param text 原始文本

src/views/List/album.vue

@@ -54,7 +54,7 @@
       </template>
       <!-- 评论 -->
       <template v-else>
-        <ListComment :id="albumId" :type="3" :height="songListHeight" />
+        <ListComment :id="albumId" :type="3" :height="songListHeight" @update:comment-count="handleCommentCount" />
       </template>
     </Transition>
   </div>
@@ -64,6 +64,7 @@
 import type { DropdownOption } from "naive-ui";
 import { songDetail } from "@/api/song";
 import { albumDetail } from "@/api/album";
+import { getComment } from "@/api/comment";
 import { formatCoverList, formatSongsList } from "@/utils/format";
 import { renderIcon, copyData, getShareUrl } from "@/utils/helper";
 import { openBatchList } from "@/utils/modal";
@@ -194,6 +195,8 @@ const getAlbumDetail = async (id: number, refresh: boolean = false) => {
       setListData(cached.songs);
       setLoading(false);
 
+      // 获取专辑评论数量（专辑API不返回commentCount）
+      fetchAlbumCommentCount(id);
       // 后台检查更新
       backgroundCheck(id, cached);
       return;
@@ -208,6 +211,8 @@ const getAlbumDetail = async (id: number, refresh: boolean = false) => {
   // 检查是否仍然是当前请求的专辑
   if (currentRequestId.value !== id) return;
   setDetailData(formatCoverList(detail.album)[0]);
+  // 获取专辑评论数量（专辑API不返回commentCount）
+  fetchAlbumCommentCount(id);
   // 获取专辑歌曲
   const ids: number[] = detail.songs.map((song: any) => song.id as number);
   const result = await songDetail(ids);
@@ -251,6 +256,25 @@ const handleTabChange = (value: "songs" | "comments") => {
   currentTab.value = value;
 };
 
+// 更新评论数量（从 ListComment emit 回调）
+const handleCommentCount = (count: number) => {
+  if (detailData.value) {
+    detailData.value.commentCount = count;
+  }
+};
+
+// 主动获取专辑评论数量
+const fetchAlbumCommentCount = async (id: number) => {
+  try {
+    const result = await getComment(id, 3, 1, 1);
+    if (result.data?.totalCount != null && detailData.value?.id === id) {
+      detailData.value.commentCount = result.data.totalCount;
+    }
+  } catch {
+    // 忽略错误
+  }
+};
+
 // 播放全部歌曲
 const playAllSongs = useDebounceFn(() => {
   if (!detailData.value || !displayData.value?.length) return;