feat/info-comment-jump

components/CommentSection/CommentSection.vue

@@ -79,6 +79,7 @@
         :comment="comment"
         :like-handler="likeHandler"
         :page-name="pageName"
+        :active-anchor-id="activeAnchorId"
         @need-login="emitNeedLogin"
         @like-change="handleCommentLikeChange"
         @reply="openReplyPopup"
@@ -331,8 +332,10 @@ const replyPopupVisible = ref(false);
 const replyInputFocus = ref(false);
 const replyContent = ref("");
 const replyKeyboardHeight = ref(0);
+const activeAnchorId = ref("");
 
 let keyboardHeightListener = null;
+let anchorHighlightTimer = null;
 
 const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
 const replyPlaceholder = computed(() => {
@@ -433,6 +436,98 @@ const loadMoreComments = async () => {
   await loadComments();
 };
 
+const getCommentById = (commentId) => {
+  return comments.value.find((item) => item.id === commentId) || null;
+};
+
+const getLoadedAnchorTarget = (targetCommentId) => {
+  for (const comment of comments.value) {
+    if (String(comment.id) === String(targetCommentId)) {
+      return { type: "comment", id: comment.id };
+    }
+    const reply = (comment.replies || []).find((item) => String(item.id) === String(targetCommentId));
+    if (reply) {
+      return { type: "reply", id: reply.id, parentId: comment.id };
+    }
+  }
+  return null;
+};
+
+const markAnchorActive = (targetCommentId) => {
+  if (!targetCommentId) return;
+  activeAnchorId.value = String(targetCommentId);
+  if (anchorHighlightTimer) {
+    clearTimeout(anchorHighlightTimer);
+  }
+  anchorHighlightTimer = setTimeout(() => {
+    activeAnchorId.value = "";
+    anchorHighlightTimer = null;
+  }, 2200);
+};
+
+const scrollToAnchorNode = async (target) => {
+  if (!target?.id) return false;
+  markAnchorActive(target.id);
+  await nextTick();
+
+  return await new Promise((resolve) => {
+    uni.pageScrollTo({
+      selector: `#${target.type === "reply" ? "reply" : "comment"}-${target.id}`,
+      offsetTop: 108,
+      duration: 300,
+      success: () => resolve(true),
+      fail: () => resolve(false),
+    });
+  });
+};
+
+const ensureRepliesContainTarget = async (commentId, targetCommentId) => {
+  let currentComment = getCommentById(commentId);
+  if (!currentComment?.replyCount) return null;
+
+  if (!currentComment.repliesLoaded) {
+    await loadReplies(currentComment, 1);
+    currentComment = getCommentById(commentId);
+    const loadedTarget = getLoadedAnchorTarget(targetCommentId);
+    if (loadedTarget) return loadedTarget;
+  }
+
+  while (currentComment?.repliesHasMore) {
+    await loadReplies(currentComment, Number(currentComment.repliesPage || 1) + 1);
+    currentComment = getCommentById(commentId);
+    const loadedTarget = getLoadedAnchorTarget(targetCommentId);
+    if (loadedTarget) return loadedTarget;
+  }
+
+  return getLoadedAnchorTarget(targetCommentId);
+};
+
+const scrollToComment = async (targetCommentId) => {
+  if (!targetCommentId || !props.requestKey || !props.visible) return false;
+
+  let matchedTarget = getLoadedAnchorTarget(targetCommentId);
+  if (matchedTarget) {
+    return await scrollToAnchorNode(matchedTarget);
+  }
+
+  while (hasMore.value) {
+    await loadMoreComments();
+    matchedTarget = getLoadedAnchorTarget(targetCommentId);
+    if (matchedTarget) {
+      return await scrollToAnchorNode(matchedTarget);
+    }
+  }
+
+  for (const comment of comments.value) {
+    matchedTarget = await ensureRepliesContainTarget(comment.id, targetCommentId);
+    if (matchedTarget) {
+      return await scrollToAnchorNode(matchedTarget);
+    }
+  }
+
+  return false;
+};
+
 const switchTab = (tab) => {
   if (currentTab.value === tab) return;
   currentTab.value = tab;
@@ -627,11 +722,15 @@ onUnmounted(() => {
   if (uni.offKeyboardHeightChange && keyboardHeightListener) {
     uni.offKeyboardHeightChange(keyboardHeightListener);
   }
+  if (anchorHighlightTimer) {
+    clearTimeout(anchorHighlightTimer);
+  }
 });
 
 defineExpose({
   refreshComments,
   loadMoreComments,
+  scrollToComment,
 });
 </script>