🐞 fix: 修复抱一抱和列表评论切换

Closes #976

Author: imsyy

src/components/List/CommentList.vue

@@ -1,12 +1,11 @@
 <template>
   <Transition name="fade" mode="out-in">
-    <n-flex v-if="data.length > 0" :size="20" :class="['comment-list', { transparent }]" vertical>
+    <n-flex v-if="data.length > 0" key="content" :size="20" :class="['comment-list', { transparent }]" vertical>
       <n-flex
         v-for="(item, index) in data"
         :key="index"
         :size="0"
         class="comments"
-        @dblclick="handleDoubleClick(item)"
       >
         <div v-if="!transparent && !hiddenCover" class="user">
           <div class="avatar">
@@ -68,6 +67,10 @@
               <SvgIcon name="IP" :depth="3" />
               <n-text :depth="3">{{ item.ip.location }}</n-text>
             </div>
+            <!-- 抱一抱 -->
+            <div class="item hug" @click="handleHug(item)">
+              <SvgIcon name="FavoriteBorder" :depth="3" />
+            </div>
             <!-- 点赞 -->
             <div class="item like" @click="likeComment(item)">
               <SvgIcon
@@ -86,11 +89,11 @@
         </n-button>
       </n-flex>
     </n-flex>
-    <div v-else-if="loading" :class="['comment-list', { transparent }]">
+    <div v-else-if="loading" key="loading" :class="['comment-list', { transparent }]">
       <n-skeleton :repeat="20" />
     </div>
     <!-- 空列表 -->
-    <n-empty v-else description="空空如也，怎么什么都没有啊" size="large" />
+    <n-empty v-else key="empty" description="空空如也，怎么什么都没有啊" size="large" />
   </Transition>
 </template>
 
@@ -163,8 +166,8 @@ const likeComment = debounce(async (data: CommentType) => {
   }
 }, 300);
 
-// 双击抱一抱
-const handleDoubleClick = debounce(async (item: CommentType) => {
+// 抱一抱
+const handleHug = debounce(async (item: CommentType) => {
   if (!isLogin()) {
     openUserLogin();
     return;
@@ -305,8 +308,19 @@ const handleDoubleClick = debounce(async (item: CommentType) => {
             margin-right: 4px;
           }
         }
-        .like {
+        .hug {
           margin-left: auto;
+          cursor: pointer;
+          &:hover {
+            .n-icon {
+              color: var(--primary-hex);
+              :deep(svg) {
+                opacity: 1;
+              }
+            }
+          }
+        }
+        .like {
           cursor: pointer;
           &:hover {
             .n-icon,

src/components/List/ListComment.vue

@@ -76,22 +76,27 @@ const commentPage = ref<number>(1);
 const commentHasMore = ref<boolean>(true);
 const commentTotalCount = ref<number>(0);
 
+// 当前请求的 id，用于竞态保护
+const currentRequestId = ref<number>(0);
+
 // 获取热门评论
-const getHotCommentData = async () => {
+const getHotCommentData = async (requestId: number) => {
   if (!props.id) return;
   try {
     const result = await getHotComment(props.id, props.type);
+    if (currentRequestId.value !== requestId) return;
     const formatData = formatCommentList(result.hotComments);
     commentHotData.value = formatData?.length > 0 ? formatData : null;
   } catch (error) {
     console.error("Error getting hot comment data:", error);
-    commentHotData.value = null;
+    if (currentRequestId.value === requestId) commentHotData.value = null;
   }
 };
 
 // 获取评论数据
 const getCommentData = async (clean: boolean = true) => {
   if (!props.id) return;
+  const requestId = clean ? ++currentRequestId.value : currentRequestId.value;
   try {
     commentLoading.value = true;
     if (clean) {
@@ -100,14 +105,16 @@ const getCommentData = async (clean: boolean = true) => {
       commentHasMore.value = true;
     }
     // 获取热门评论
-    await getHotCommentData();
+    await getHotCommentData(requestId);
+    if (currentRequestId.value !== requestId) return;
     // 分页参数
     const cursor =
       commentPage.value > 1 && commentData.value?.length > 0
         ? commentData.value[commentData.value.length - 1]?.time
         : undefined;
     // 获取评论
     const result = await getComment(props.id, props.type, commentPage.value, 20, 3, cursor);
+    if (currentRequestId.value !== requestId) return;
     // 更新评论总数
     if (result.data?.totalCount != null) {
       commentTotalCount.value = result.data.totalCount;
@@ -124,6 +131,7 @@ const getCommentData = async (clean: boolean = true) => {
     commentHasMore.value = result.data.hasMore;
     commentLoading.value = false;
   } catch (error) {
+    if (currentRequestId.value !== requestId) return;
     console.error("Error getting comment data:", error);
     window.$message.error("获取评论数据失败");
     commentLoading.value = false;
@@ -153,11 +161,11 @@ watch(
   { immediate: true },
 );
 
-// 如果高度是 auto，停止计算高度
+// 传入固定高度时不需要 ResizeObserver
 watch(
   () => props.height,
   (newHeight) => {
-    if (newHeight === "auto") stopCalcHeight();
+    if (newHeight != null) stopCalcHeight();
   },
   { immediate: true },
 );

src/components/List/ListDetail.vue

@@ -296,6 +296,14 @@ const settingStore = useSettingStore();
 // 当前 tab
 const currentTab = ref<"songs" | "comments">("songs");
 
+// 切换资源时重置 tab
+watch(
+  () => props.detailData?.id,
+  () => {
+    currentTab.value = "songs";
+  },
+);
+
 // 标题文本
 const titleText = computed(() => {
   if (props.titleText) return props.titleText;

src/components/Player/PlayerComponents/PlayerComment.vue

@@ -44,21 +44,26 @@
       </div>
     </n-flex>
     <n-scrollbar ref="commentScroll" class="comment-scroll">
-      <template v-if="filteredCommentHotData && filteredCommentHotData.length > 0">
-        <div class="placeholder">
-          <div class="title">
-            <SvgIcon name="Fire" />
-            <span>热门评论</span>
+      <Transition name="fade">
+        <div
+          v-if="filteredCommentHotData && filteredCommentHotData.length > 0"
+          class="hot-comments"
+        >
+          <div class="placeholder">
+            <div class="title">
+              <SvgIcon name="Fire" />
+              <span>热门评论</span>
+            </div>
           </div>
+          <CommentList
+            :data="filteredCommentHotData"
+            :loading="false"
+            :type="songType"
+            :res-id="songId"
+            transparent
+          />
         </div>
-        <CommentList
-          :data="filteredCommentHotData"
-          :loading="commentHotData?.length === 0"
-          :type="songType"
-          :res-id="songId"
-          transparent
-        />
-      </template>
+      </Transition>
       <div class="placeholder">
         <div class="title">
           <SvgIcon name="Message" />
@@ -112,7 +117,7 @@ const songType = computed<0 | 1 | 7 | 2 | 3 | 4 | 5 | 6>(() =>
 // 评论数据
 const commentLoading = ref<boolean>(true);
 const commentData = ref<CommentType[]>([]);
-const commentHotData = ref<CommentType[] | null>([]);
+const commentHotData = ref<CommentType[] | null>(null);
 const commentPage = ref<number>(1);
 const commentHasMore = ref<boolean>(true);
 
@@ -149,11 +154,14 @@ const filteredCommentData = computed(() => filterComments(commentData.value));
 const filteredCommentHotData = computed(() => filterComments(commentHotData.value));
 
 // 获取热门评论
-const getHotCommentData = async () => {
+const getHotCommentData = async (id?: number) => {
+  const targetId = id ?? songId.value;
   // 本地歌曲无法获取评论
-  if (!songId.value || typeof songId.value !== "number") return;
+  if (!targetId || typeof targetId !== "number") return;
   // 获取评论
-  const result = await getHotComment(songId.value);
+  const result = await getHotComment(targetId);
+  // 确保返回时歌曲未再次变化
+  if (targetId !== songId.value) return;
   // 处理数据
   const formatData = formatCommentList(result.hotComments);
   commentHotData.value = formatData?.length > 0 ? formatData : null;
@@ -162,29 +170,44 @@ const getHotCommentData = async () => {
 };
 
 // 获取歌曲评论
-const getAllComment = async () => {
+const getAllComment = async (id?: number, reset?: boolean) => {
+  const targetId = id ?? songId.value;
   // 本地歌曲无法获取评论
-  if (!songId.value || typeof songId.value !== "number") return;
-  commentLoading.value = true;
+  if (!targetId || typeof targetId !== "number") return;
+  // 仅在首次加载时显示骨架屏（追加分页不显示）
+  if (reset || commentData.value.length === 0) {
+    commentLoading.value = true;
+  }
   // 分页参数
+  const page = reset ? 1 : commentPage.value;
   const cursor =
-    commentPage.value > 1 && commentData.value?.length > 0
+    !reset && page > 1 && commentData.value?.length > 0
       ? commentData.value[commentData.value.length - 1]?.time
       : undefined;
   // 获取评论
-  const result = await getComment(songId.value, songType.value, commentPage.value, 20, 3, cursor);
+  const result = await getComment(
+    targetId,
+    musicStore.playSong.type === "radio" ? 4 : 0,
+    page,
+    20,
+    3,
+    cursor,
+  );
+  // 确保返回时歌曲未再次变化
+  if (targetId !== songId.value) return;
   // 更新评论总数
   if (result.data?.totalCount != null) {
     statusStore.songCommentCount = result.data.totalCount;
   }
   if (isEmpty(result.data?.comments)) {
     commentHasMore.value = false;
     commentLoading.value = false;
+    if (reset) commentData.value = [];
     return;
   }
   // 处理数据
   const formatData = formatCommentList(result.data.comments);
-  commentData.value = commentData.value.concat(formatData);
+  commentData.value = reset ? formatData : commentData.value.concat(formatData);
   // 是否还有
   commentHasMore.value = result.data.hasMore;
   commentLoading.value = false;
@@ -196,18 +219,31 @@ const loadMoreComment = () => {
   getAllComment();
 };
 
+// 重置并加载评论
+const resetAndFetch = (id?: number | string) => {
+  const targetId = id ?? songId.value;
+  commentPage.value = 1;
+  commentHasMore.value = true;
+  statusStore.songCommentCount = 0;
+  getHotCommentData(typeof targetId === "number" ? targetId : undefined);
+  getAllComment(typeof targetId === "number" ? targetId : undefined, true);
+};
+
 // 歌曲id变化
 watch(
   () => songId.value,
-  () => {
-    commentData.value = [];
-    commentHotData.value = [];
-    commentPage.value = 1;
-    commentHasMore.value = true;
-    statusStore.songCommentCount = 0;
-    if (!isShowComment.value) return;
-    getHotCommentData();
-    getAllComment();
+  (newId) => {
+    if (!isShowComment.value) {
+      // 不在评论页时，仅标记数据过期，打开时再加载
+      commentData.value = [];
+      commentHotData.value = null;
+      commentPage.value = 1;
+      commentHasMore.value = true;
+      commentLoading.value = true;
+      statusStore.songCommentCount = 0;
+      return;
+    }
+    resetAndFetch(newId);
   },
 );
 
@@ -218,16 +254,14 @@ watch(
     if (!newVal) return;
     // 若不存在数据，重新获取
     if (!commentData.value?.length) {
-      getHotCommentData();
-      getAllComment();
+      resetAndFetch();
     }
   },
 );
 
 onMounted(() => {
   if (!isShowComment.value) return;
-  getHotCommentData();
-  getAllComment();
+  resetAndFetch();
 });
 </script>
 

src/views/Home/index.vue

@@ -12,15 +12,21 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from "@/stores";
+import { useSettingStore, useDataStore } from "@/stores";
 import { getGreeting } from "@/utils/time";
+import { isLogin } from "@/utils/auth";
 import HomeOnline from "./HomeOnline.vue";
 import HomeLocal from "./HomeLocal.vue";
 
 const settingStore = useSettingStore();
+const dataStore = useDataStore();
 
 // 问候语
-const greetings = computed(getGreeting);
+const greetings = computed(() => {
+  const greeting = getGreeting();
+  const name = isLogin() ? dataStore.userData.name : "";
+  return name ? `${greeting}，${name}` : greeting;
+});
 </script>
 
 <style lang="scss" scoped>