fix: pk comment

pages/pk/index.vue

@@ -79,15 +79,31 @@
         </view>
       </view>
 
-      <PkCommentSection
+      <CommentSection
         v-if="currentPair && hasVoted"
         ref="commentSectionRef"
-        :pk-id="currentPair.id"
-        :current-pair="currentPair"
-        :selected-item-id="selectedItemId"
-        :selected-item-label="selectedItemLabel"
+        variant="pk"
+        :request-key="commentRequestKey"
         :visible="hasVoted"
+        :allow-compose="true"
+        compose-title="说说你的理由"
+        :compose-desc="`支持 ${selectedItemLabel} 的观点，会更容易引发讨论`"
+        compose-placeholder="写下你的 PK 观点..."
+        page-name="pk_station"
+        pill-label="我站"
+        :pill-value="selectedItemLabel"
+        :pill-tone="selectedTone"
+        loading-desc="看看大家都站哪边"
+        empty-title="还没有人发言"
+        empty-desc="你可以成为这场 PK 的第一位评论官"
+        footer-more-text="查看更多评论"
+        :list-handler="fetchPkCommentList"
+        :replies-handler="fetchPkCommentReplies"
+        :publish-handler="publishPkComment"
+        :normalize-comment="normalizePkComment"
+        :like-handler="likeComment"
         @need-login="openLoginPopup('请先登录后再参与评论')"
+        @published="handleCommentPublished"
       />
 
       <view v-else-if="!currentPair" class="state-card">
@@ -105,9 +121,10 @@
 import { computed, ref } from "vue";
 import { onLoad, onPullDownRefresh, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import { getStatusBarHeight } from "@/utils/system";
-import { fetchRandomTopicList, vote } from "@/api/pk";
+import { fetchRandomTopicList, vote, fetchCommentList, fetchCommentReplyList, publishComment, likeComment } from "@/api/pk";
 import { FILE_BASE_URL } from "@/utils/constants";
-import PkCommentSection from "@/components/PkCommentSection/PkCommentSection.vue";
+import { formatDate } from "@/utils/date";
+import CommentSection from "@/components/CommentSection/CommentSection.vue";
 import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
 import { useUserStore } from "@/stores/user";
 import { getShareReward } from "@/api/system";
@@ -133,12 +150,92 @@ const selectedItemLabel = computed(() => {
   if (!currentPair.value || !selectedSide.value) return "";
   return selectedSide.value === "left" ? currentPair.value.left.name : currentPair.value.right.name;
 });
+const selectedTone = computed(() => {
+  if (!selectedSide.value) return "";
+  return selectedSide.value === "left" ? "left" : "right";
+});
+const commentRequestKey = computed(() => {
+  if (!currentPair.value?.id || !selectedItemId.value) return "";
+  return `${currentPair.value.id}_${selectedItemId.value}`;
+});
 
 const buildAvatarUrl = (avatar) => {
   if (!avatar) return "https://api.dicebear.com/7.x/avataaars/svg?seed=fallback";
-  return String(avatar).startsWith("http") ? avatar : `${FILE_BASE_URL}${avatar}`;
+  const normalizedAvatar = String(avatar).trim();
+  return normalizedAvatar.startsWith("http") ? normalizedAvatar : `${FILE_BASE_URL}${normalizedAvatar}`;
 };
 
+const resolveChoiceMeta = (chooseItemId) => {
+  if (!chooseItemId || !currentPair.value) {
+    return { choiceLabel: "", choiceTone: "" };
+  }
+  if (chooseItemId === currentPair.value.left?.id) {
+    return { choiceLabel: `支持 ${currentPair.value.left.name}`, choiceTone: "left" };
+  }
+  if (chooseItemId === currentPair.value.right?.id) {
+    return { choiceLabel: `支持 ${currentPair.value.right.name}`, choiceTone: "right" };
+  }
+  return { choiceLabel: "已站队", choiceTone: "" };
+};
+
+const normalizePkComment = (item = {}, rootComment = null) => {
+  const user = item.user || {};
+  const replyToUser = item.replyToUser || {};
+  const choiceMeta = resolveChoiceMeta(item.chooseItemId);
+
+  return {
+    id: item.id,
+    rootCommentId: item.rootCommentId || rootComment?.id || null,
+    parentCommentId: item.parentCommentId || rootComment?.id || null,
+    replyToCommentId: item.replyToCommentId || null,
+    name: user.nickname || "匿名用户",
+    avatar: buildAvatarUrl(user.avatar),
+    time: formatDate(item.createdAt) || "刚刚",
+    content: item.content || "",
+    likes: Number(item.likeCount || 0),
+    isLiked: !!item.isLiked,
+    userAction: "",
+    replyCount: Number(item.replyCount || 0),
+    replyToName: replyToUser.nickname || "",
+    choiceLabel: choiceMeta.choiceLabel,
+    choiceTone: choiceMeta.choiceTone,
+    chooseItemId: item.chooseItemId || "",
+    repliesLoading: false,
+    repliesLoaded: false,
+    repliesHasMore: false,
+    repliesPage: 1,
+    replies: [],
+  };
+};
+
+const fetchPkCommentList = ({ page, orderBy }) => {
+  return fetchCommentList({
+    pkId: currentPair.value?.id,
+    page,
+    orderBy,
+  });
+};
+
+const fetchPkCommentReplies = ({ rootCommentId, page }) => {
+  return fetchCommentReplyList({
+    pkId: currentPair.value?.id,
+    rootCommentId,
+    page,
+  });
+};
+
+const publishPkComment = ({ content, replyTarget, mode }) => {
+  return publishComment({
+    pkId: currentPair.value?.id,
+    chooseItemId: selectedItemId.value,
+    content,
+    parentCommentId: mode === "reply" ? replyTarget?.parentCommentId : undefined,
+    replyToCommentId: mode === "reply" ? replyTarget?.replyToCommentId : undefined,
+  });
+};
+
+const handleCommentPublished = () => {};
+
 const normalizePercent = (value) => {
   const number = Number(value);
   if (!Number.isFinite(number)) return null;

pages/rating/detail.vue

@@ -84,109 +84,44 @@
       </view> -->
 
       <!-- 评论区 -->
-      <view class="comments-section card">
-        <view class="tabs-header">
-          <view class="tabs">
-            <text class="tab" :class="{ active: currentTab === 'hot' }" @tap="switchTab('hot')">最热</text>
-            <text class="tab" :class="{ active: currentTab === 'new' }" @tap="switchTab('new')">最新</text>
-          </view>
-          <!-- <text class="filter-icon"></text> -->
-        </view>
-
-        <view class="comment-list">
-          <view v-if="commentLoading && !comments.length" class="comment-state">
-            <text class="comment-state-title">评论加载中...</text>
-            <text class="comment-state-desc">正在拉取大家的锐评</text>
-          </view>
-          <view v-else-if="commentError && !comments.length" class="comment-state">
-            <text class="comment-state-title">评论加载失败</text>
-            <text class="comment-state-desc">{{ commentError }}</text>
-            <button class="comment-state-btn" @tap="retryLoadComments">重新加载</button>
-          </view>
-          <view v-else-if="!comments.length" class="comment-state">
-            <view class="comment-empty-visual">
-              <view class="comment-empty-orbit orbit-1"></view>
-              <view class="comment-empty-orbit orbit-2"></view>
-              <view class="comment-empty-core">
-                <text class="comment-empty-emoji">💬</text>
-              </view>
-            </view>
-            <text class="comment-state-title">还没有评论</text>
-            <text class="comment-state-desc">来发第一条锐评，带动一下讨论气氛</text>
-            <text class="comment-state-tip">你的观点，可能就是这条榜单最有意思的开始</text>
-          </view>
-          <CommentItem 
-            v-for="(comment, index) in comments" 
-            :key="comment.id"
-            :comment="comment"
-            @need-login="openLoginPopup"
-            @like-change="handleCommentLikeChange"
-            @reply="handleReplyComment"
-            @toggle-replies="handleToggleReplies"
-            @more-replies="handleLoadMoreReplies"
-          />
-        </view>
-
-        <!-- 加载更多 -->
-        <view v-if="comments.length" class="load-more">
-          <text>{{ commentLoadText }}</text>
-        </view>
-      </view>
+      <CommentSection
+        ref="commentSectionRef"
+        variant="topic"
+        section-title="评论区"
+        :request-key="commentRequestKey"
+        :visible="!!commentRequestKey"
+        :allow-compose="false"
+        page-name="rating_detail"
+        loading-desc="正在拉取大家的锐评"
+        empty-title="还没有评论"
+        empty-desc="来发第一条锐评，带动一下讨论气氛"
+        empty-tip="你的观点，可能就是这条榜单最有意思的开始"
+        :show-empty-visual="true"
+        load-more-mode="scroll"
+        footer-hint-text="上拉加载更多"
+        :show-success-toast="false"
+        :list-handler="fetchTopicComments"
+        :replies-handler="fetchTopicCommentReplies"
+        :publish-handler="publishTopicComment"
+        :normalize-comment="normalizeCommentItem"
+        @need-login="openLoginPopup"
+        @published="handleCommentPublished"
+      />
     </view>
 
     <!-- 评分成功特效弹窗 -->
-    <view
-      v-if="replyPopupVisible"
-      class="reply-popup-mask"
-      @tap="closeReplyPopup"
-    ></view>
-    <view
-      v-if="replyPopupVisible"
-      class="reply-popup"
-      :style="{ bottom: `${replyKeyboardHeight}px` }"
-    >
-      <view class="reply-popup-header">
-        <view class="reply-popup-user">
-          <text class="reply-popup-label">回复</text>
-          <text class="reply-popup-name">@{{ replyTarget?.replyToName || 'Ta' }}</text>
-        </view>
-        <text class="reply-popup-close" @tap="closeReplyPopup">取消</text>
-      </view>
-      <view class="reply-popup-input-wrap">
-        <input
-          class="reply-popup-input"
-          v-model="replyContent"
-          :focus="replyInputFocus"
-          :disabled="isSendingReply"
-          :adjust-position="false"
-          confirm-type="send"
-          :placeholder="replyPlaceholder"
-          placeholder-class="reply-popup-placeholder"
-          @confirm="handleSendReply"
-        />
-        <button
-          class="reply-popup-send"
-          :class="{ disabled: isSendingReply || !replyContent.trim() }"
-          :disabled="isSendingReply || !replyContent.trim()"
-          @tap="handleSendReply"
-        >
-          {{ isSendingReply ? '发送中' : '发送' }}
-        </button>
-      </view>
-    </view>
-
     <SuccessPopup ref="successPopupRef" />
     <LoginPopup ref="loginPopupRef" @logind="handleLoginSuccess" />
   </view>
 </template>
 
 <script setup>
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { getStatusBarHeight } from "@/utils/system";
-import { onLoad, onPullDownRefresh, onReachBottom, onShareAppMessage, onShareTimeline, onUnload } from "@dcloudio/uni-app";
+import { onLoad, onPullDownRefresh, onReachBottom, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
 import AttitudePanel from "@/components/AttitudePanel/AttitudePanel.vue";
 import SuccessPopup from "@/components/SuccessPopup/SuccessPopup.vue";
-import CommentItem from "@/components/CommentItem/CommentItem.vue";
+import CommentSection from "@/components/CommentSection/CommentSection.vue";
 import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
 import { FILE_BASE_URL } from "@/utils/constants";
 import { fetchTopicRatingItems as fetchTopicItemList } from "@/api/topic";
@@ -197,22 +132,17 @@ import { getShareReward } from "@/api/system";
 import { useUserStore } from "@/stores/user";
 const userStore = useUserStore();
 const statusBarHeight = ref(getStatusBarHeight() || 44);
-const hasMore = ref(true);
-const currentPage = ref(1);
 const currentAction = ref('');
 const successPopupRef = ref(null);
 const loginPopupRef = ref(null);
 const attitudePanelRef = ref(null);
-const currentTab = ref('hot'); // 'hot' 或 'new'
+const commentSectionRef = ref(null);
 const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
-const commentLoading = ref(false);
 const isSendingComment = ref(false);
-const commentError = ref('');
 const pkPreview = ref(null);
-const commentLoadText = computed(() => {
-  if (commentLoading.value && comments.value.length) return '加载中...';
-  if (!hasMore.value) return '没有更多了';
-  return '上拉加载更多';
+const commentRequestKey = computed(() => {
+  if (!detailData.value.topicId || !itemId.value) return '';
+  return `${detailData.value.topicId}_${itemId.value}`;
 });
 
 const goBack = () => {
@@ -238,16 +168,7 @@ const detailData = ref({
   userAction: "",
   topicId: ''
 });
-
-const comments = ref([]);
 const itemId = ref('');
-const replyTarget = ref(null);
-const replyPopupVisible = ref(false);
-const replyInputFocus = ref(false);
-const replyContent = ref('');
-const replyKeyboardHeight = ref(0);
-const isSendingReply = ref(false);
-let keyboardHeightListener = null;
 
 const buildAvatarUrl = (avatar) => {
   if (!avatar) return 'https://api.dicebear.com/7.x/avataaars/svg?seed=fallback';
@@ -282,71 +203,6 @@ const normalizeCommentItem = (item = {}, rootComment = null) => {
   };
 };
 
-const clearReplyTarget = () => {
-  replyTarget.value = null;
-};
-
-const replyPlaceholder = computed(() => {
-  return replyTarget.value?.replyToName
-    ? `回复 @${replyTarget.value.replyToName}...`
-    : '回复一下这条评论';
-});
-
-const patchCommentItem = (commentId, updater) => {
-  comments.value = comments.value.map((comment) => {
-    if (comment.id !== commentId) return comment;
-    return updater(comment);
-  });
-};
-
-const resolveReplyHasMore = (res, list, currentPage) => {
-  const data = res?.data || res || {};
-  const hasNext = data?.hasNext || res?.hasNext;
-  if (typeof hasNext === 'boolean') return hasNext;
-
-  const pages = Number(data?.pages || res?.pages || 0);
-  if (pages > 0) return currentPage < pages;
-
-  const total = Number(data?.totalCount || data?.total || res?.totalCount || res?.total || 0);
-  if (total > 0) {
-    return currentPage * list.length < total || list.length < total;
-  }
-
-  return list.length > 0;
-};
-
-const openReplyPopup = async () => {
-  replyPopupVisible.value = true;
-  await nextTick();
-  replyInputFocus.value = false;
-  await nextTick();
-  replyInputFocus.value = true;
-};
-
-const closeReplyPopup = () => {
-  replyPopupVisible.value = false;
-  replyInputFocus.value = false;
-  replyKeyboardHeight.value = 0;
-  replyContent.value = '';
-  clearReplyTarget();
-};
-
-const handleReplyComment = (payload) => {
-  if (!isLoggedIn.value) {
-    openLoginPopup();
-    return;
-  }
-
-  replyTarget.value = {
-    rootCommentId: payload.rootCommentId,
-    parentCommentId: payload.parentCommentId,
-    replyToCommentId: payload.replyToCommentId,
-    replyToName: payload.replyToName || '',
-    content: payload.content || ''
-  };
-  openReplyPopup();
-};
-
 const calcPkPercent = (leftScore, rightScore) => {
   const left = Number(leftScore) || 0;
   const right = Number(rightScore) || 0;
@@ -462,245 +318,84 @@ const handleActionChange = async (action) => {
   }
 };
 
-const submitComment = async ({ content, parentCommentId, replyToCommentId, successMode = 'comment' }) => {
+const publishTopicComment = ({ content, replyTarget, mode }) => {
+  return topicItemComment({
+    topicId: detailData.value.topicId,
+    itemId: itemId.value,
+    content,
+    parentCommentId: mode === 'reply' ? replyTarget?.parentCommentId : undefined,
+    replyToCommentId: mode === 'reply' ? replyTarget?.replyToCommentId : undefined
+  });
+};
+
+const fetchTopicComments = ({ page, orderBy }) => {
+  return topicItemCommentList(detailData.value.topicId, itemId.value, page, orderBy);
+};
+
+const fetchTopicCommentReplies = ({ rootCommentId, page }) => {
+  return topicItemCommentReplyList({
+    rootCommentId,
+    page
+  });
+};
+
+const handleCommentPublished = ({ mode, content, replyTarget }) => {
+  if (successPopupRef.value) {
+    successPopupRef.value.show({
+      emoji: '💬',
+      label: mode === 'reply' ? '回复已发送' : '你的锐评已发布'
+    }, 'comment');
+  }
+
+  uni.$trackRecord({
+    eventName: 'comment',
+    eventType: 'comment',
+    elementId: `item_${itemId.value}`,
+    elementContent: `评论项_${detailData.value.name}`,
+    customParams: {
+      comment: content,
+      replyToCommentId: replyTarget?.replyToCommentId || '',
+      page: 'rating_detail'
+    }
+  });
+};
+
+const handleSendComment = async (payload) => {
   if (!isLoggedIn.value) {
     openLoginPopup();
     return;
   }
 
-  if (!detailData.value.topicId || !itemId.value) return false;
+  if (!detailData.value.topicId || !itemId.value || isSendingComment.value) return;
 
   try {
-    if (successMode === 'reply') {
-      isSendingReply.value = true;
-    } else {
-      isSendingComment.value = true;
-    }
+    isSendingComment.value = true;
     uni.showLoading({ title: '发送中...' });
-    await topicItemComment({
-      topicId: detailData.value.topicId,
-      itemId: itemId.value,
-      content,
-      parentCommentId: parentCommentId || undefined,
-      replyToCommentId: replyToCommentId || undefined
+    await publishTopicComment({
+      content: payload.content,
+      mode: 'comment',
+      replyTarget: null
     });
     uni.hideLoading();
-    
-    // 弹出成功弹窗
-    if (successPopupRef.value) {
-      successPopupRef.value.show({
-        emoji: '💬',
-        label: successMode === 'reply' ? '回复已发送' : '你的锐评已发布'
-      }, 'comment');
-    }
-    
-    // 刷新页面数据以获取最新评论
-    currentPage.value = 1;
-    hasMore.value = true;
-    uni.$trackRecord({
-      eventName: 'comment',
-      eventType: 'comment',
-      elementId: `item_${itemId.value}`,
-      elementContent: `评论项_${detailData.value.name}`,
-      customParams: {
-        comment: content,
-        replyToCommentId: replyToCommentId || '',
-        page: 'rating_detail'
-      }
+
+    handleCommentPublished({
+      mode: 'comment',
+      content: payload.content,
+      replyTarget: null
     });
-    return true;
+    attitudePanelRef.value?.resetComment?.();
+    await commentSectionRef.value?.refreshComments?.();
   } catch (error) {
     uni.hideLoading();
     uni.showToast({
       title: '发送失败',
       icon: 'none'
     });
-    return false;
   } finally {
     isSendingComment.value = false;
-    isSendingReply.value = false;
   }
 };
 
-const handleSendComment = async (payload) => {
-  if (isSendingComment.value) return;
-  const success = await submitComment({
-    content: payload.content,
-    successMode: 'comment'
-  });
-  if (!success) return;
-  currentPage.value = 1;
-  hasMore.value = true;
-  attitudePanelRef.value?.resetComment?.();
-  await getCommentsData({ replace: true });
-};
-
-const handleSendReply = async () => {
-  const content = replyContent.value.trim();
-  if (!content) {
-    uni.showToast({ title: '请输入回复内容', icon: 'none' });
-    return;
-  }
-  if (!replyTarget.value || isSendingReply.value) return;
-
-  const success = await submitComment({
-    content,
-    parentCommentId: replyTarget.value.parentCommentId,
-    replyToCommentId: replyTarget.value.replyToCommentId,
-    successMode: 'reply'
-  });
-  if (!success) return;
-  closeReplyPopup();
-    await getCommentsData({ replace: true });
-};
-
-const switchTab = (tab) => {
-  if (currentTab.value === tab) return;
-  currentTab.value = tab;
-  currentPage.value = 1;
-  hasMore.value = true;
-  commentError.value = '';
-  closeReplyPopup();
-  getCommentsData({ replace: true });
-};
-
-const resolveCommentHasMore = (res, list) => {
-  const data = res?.data || res || {};
-  const hasNext = data?.hasNext || res?.hasNext;
-  if (typeof hasNext === 'boolean') return hasNext;
-
-  const pages = Number(data?.pages || res?.pages || 0);
-  if (pages > 0) return currentPage.value < pages;
-
-  const total = Number(data?.total || res?.total || 0);
-  if (total > 0) {
-    const size = Number(data?.size || data?.pageSize || res?.size || res?.pageSize || list.length || 1);
-    return currentPage.value * size < total;
-  }
-
-  return list.length > 0;
-};
-
-const getCommentsData = async ({ replace = false } = {}) => {
-  if (!detailData.value.topicId || !itemId.value || commentLoading.value) return;
-  
-  try {
-    commentLoading.value = true;
-    commentError.value = '';
-    const orderBy = currentTab.value;
-    const res = await topicItemCommentList(detailData.value.topicId, itemId.value, currentPage.value, orderBy);
-    const rawList =
-      res?.data?.records ||
-      res?.data?.list ||
-      res?.records ||
-      res?.list ||
-      (Array.isArray(res?.data) ? res.data : []);
-    const list = Array.isArray(rawList) ? rawList : [];
-    
-    const formattedList = list.map((item) => normalizeCommentItem(item));
-
-    if (currentPage.value === 1 || replace) {
-      comments.value = formattedList;
-    } else {
-      comments.value = [...comments.value, ...formattedList];
-    }
-    
-    hasMore.value = resolveCommentHasMore(res, list);
-  } catch (error) {
-    console.error('获取评论列表失败:', error);
-    commentError.value = '请检查网络后重试';
-    if (currentPage.value > 1) {
-      currentPage.value -= 1;
-    }
-  } finally {
-    commentLoading.value = false;
-  }
-};
-
-const retryLoadComments = () => {
-  if (!comments.value.length) {
-    currentPage.value = 1;
-  }
-  closeReplyPopup();
-  getCommentsData({ replace: currentPage.value === 1 });
-};
-
-const loadReplies = async (comment, page = 1) => {
-  if (!comment?.id) return;
-
-  patchCommentItem(comment.id, (item) => ({
-    ...item,
-    repliesLoading: true
-  }));
-
-  try {
-    const res = await topicItemCommentReplyList({
-      rootCommentId: comment.id,
-      page
-    });
-    const data = res?.data || res || {};
-    const rawList = data?.list || res?.list || [];
-    const list = Array.isArray(rawList) ? rawList : [];
-    const normalizedReplies = list.map((reply) => normalizeCommentItem(reply, comment));
-    const hasMoreReplies = resolveReplyHasMore(res, list, page);
-
-    patchCommentItem(comment.id, (item) => ({
-      ...item,
-      repliesLoading: false,
-      repliesLoaded: true,
-      repliesPage: page,
-      repliesHasMore: hasMoreReplies,
-      replies: page === 1 ? normalizedReplies : [...(item.replies || []), ...normalizedReplies]
-    }));
-  } catch (error) {
-    patchCommentItem(comment.id, (item) => ({
-      ...item,
-      repliesLoading: false
-    }));
-    uni.showToast({
-      title: '加载回复失败',
-      icon: 'none'
-    });
-  }
-};
-
-const handleToggleReplies = (comment) => {
-  if (comment.repliesLoading || comment.repliesLoaded) return;
-  loadReplies(comment, 1);
-};
-
-const handleLoadMoreReplies = (comment) => {
-  if (comment.repliesLoading || !comment.repliesHasMore) return;
-  loadReplies(comment, Number(comment.repliesPage || 1) + 1);
-};
-
-const handleCommentLikeChange = ({ id, parentId, isReply, isLiked, likes }) => {
-  comments.value = comments.value.map((item) => {
-    if (!isReply && item.id !== id) return item;
-    if (isReply && item.id !== parentId) return item;
-
-    if (isReply) {
-      return {
-        ...item,
-        replies: (item.replies || []).map((reply) => {
-          if (reply.id !== id) return reply;
-          return {
-            ...reply,
-            isLiked,
-            likes
-          };
-        })
-      };
-    }
-
-    return {
-      ...item,
-      isLiked,
-      likes
-    };
-  });
-};
-
 const getDetailData = async () => {
   if (!itemId.value) return;
   try {
@@ -720,21 +415,9 @@ const getDetailData = async () => {
       userAction: data.userAction || ""
     };
 
-    // 如果接口返回了当前用户的态度，初始化它
-    if (data.userAction) {
-      currentAction.value = data.userAction;
-    }
+    currentAction.value = data.userAction || '';
     
-    // 如果有评论数据，更新评论 (兼容老接口一并返回的情况，但推荐通过 getCommentsData 单独获取)
-    if (data.comments && Array.isArray(data.comments) && currentPage.value === 1) {
-      // 如果后端在详情里依然返回了一部分评论
-      // comments.value = data.comments;
-    }
-    
-    // 拉取真实的评论列表
-    if (currentPage.value === 1) {
-      getCommentsData({ replace: true });
-    }
+    await commentSectionRef.value?.refreshComments?.();
     getPkPreviewData();
   } catch (error) {
     console.error('获取详情失败:', error);
@@ -749,12 +432,6 @@ const getDetailData = async () => {
 };
 
 onLoad((options) => {
-  if (uni.onKeyboardHeightChange) {
-    keyboardHeightListener = (res) => {
-      replyKeyboardHeight.value = res?.height || 0;
-    };
-    uni.onKeyboardHeightChange(keyboardHeightListener);
-  }
   uni.$trackRecord({
     eventName: "rating_item_detail_page_visit",
     eventType: `visit`,
@@ -770,11 +447,6 @@ onLoad((options) => {
 });
 
 const handleLoginSuccess = () => {
-  currentPage.value = 1;
-  hasMore.value = true;
-  comments.value = [];
-  commentError.value = '';
-  closeReplyPopup();
   getDetailData();
 };
 
@@ -800,24 +472,11 @@ onShareTimeline(async () => {
 });
 
 onPullDownRefresh(() => {
-  currentPage.value = 1;
-  hasMore.value = true;
-  comments.value = [];
-  commentError.value = '';
-  closeReplyPopup();
   getDetailData();
 });
 
-onUnload(() => {
-  if (uni.offKeyboardHeightChange && keyboardHeightListener) {
-    uni.offKeyboardHeightChange(keyboardHeightListener);
-  }
-});
-
 onReachBottom(() => {
-  if (!hasMore.value || commentLoading.value) return;
-  currentPage.value += 1;
-  getCommentsData();
+  commentSectionRef.value?.loadMoreComments?.();
 });
 </script>
 
@@ -1101,258 +760,4 @@ onReachBottom(() => {
 .blue-text { color: #4d44f1; }
 .yellow-text { color: #333; }
 
-/* 评论区 */
-.comments-section {
-  padding: 32rpx;
-}
-
-.tabs-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32rpx;
-}
-
-.tabs {
-  display: flex;
-  gap: 40rpx;
-}
-
-.tab {
-  font-size: 32rpx;
-  color: #999;
-  font-weight: 500;
-  position: relative;
-  padding-bottom: 12rpx;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
-}
-
-.tab.active {
-  color: #111;
-  font-size: 36rpx;
-  font-weight: 700; /* 稍微减轻字重，从800改为700，显得不那么生硬 */
-}
-
-.tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 32rpx;
-  height: 8rpx;
-  background: linear-gradient(90deg, #4d44f1, #8a78ff);
-  border-radius: 4rpx;
-}
-
-.filter-icon {
-  width: 40rpx;
-  height: 40rpx;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'%3E%3C/line%3E%3Cline x1='4' y1='10' x2='4' y2='3'%3E%3C/line%3E%3Cline x1='12' y1='21' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='3'%3E%3C/line%3E%3Cline x1='20' y1='21' x2='20' y2='16'%3E%3C/line%3E%3Cline x1='20' y1='12' x2='20' y2='3'%3E%3C/line%3E%3Cline x1='1' y1='14' x2='7' y2='14'%3E%3C/line%3E%3Cline x1='9' y1='8' x2='15' y2='8'%3E%3C/line%3E%3Cline x1='17' y1='16' x2='23' y2='16'%3E%3C/line%3E%3C/svg%3E");
-  background-size: cover;
-  transition: opacity 0.2s;
-}
-
-.filter-icon:active {
-  opacity: 0.7;
-}
-
-.comment-list {
-  display: flex;
-  flex-direction: column;
-  min-height: 400rpx;
-}
-
-.comment-state {
-  min-height: 400rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: #999;
-  padding: 56rpx 40rpx;
-  box-sizing: border-box;
-  background: linear-gradient(180deg, rgba(247, 248, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
-  border-radius: 28rpx;
-  border: 2rpx solid #f1f2fb;
-}
-
-.comment-empty-visual {
-  position: relative;
-  width: 180rpx;
-  height: 180rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 28rpx;
-}
-
-.comment-empty-orbit {
-  position: absolute;
-  border-radius: 50%;
-  border: 2rpx solid rgba(123, 70, 241, 0.12);
-}
-
-.orbit-1 {
-  width: 180rpx;
-  height: 180rpx;
-}
-
-.orbit-2 {
-  width: 132rpx;
-  height: 132rpx;
-  border-color: rgba(77, 68, 241, 0.18);
-}
-
-.comment-empty-core {
-  width: 96rpx;
-  height: 96rpx;
-  border-radius: 32rpx;
-  background: linear-gradient(135deg, #7668ff, #4d44f1);
-  box-shadow: 0 18rpx 36rpx rgba(94, 83, 255, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.comment-empty-emoji {
-  font-size: 44rpx;
-}
-
-.comment-state-title {
-  font-size: 32rpx;
-  color: #1f2430;
-  font-weight: 700;
-  margin-bottom: 14rpx;
-  letter-spacing: 0.5rpx;
-}
-
-.comment-state-desc {
-  font-size: 25rpx;
-  color: #70778a;
-  line-height: 1.7;
-}
-
-.comment-state-tip {
-  margin-top: 14rpx;
-  font-size: 22rpx;
-  color: #a7adbc;
-  line-height: 1.6;
-}
-
-.comment-state-btn {
-  margin-top: 24rpx;
-  height: 72rpx;
-  line-height: 72rpx;
-  padding: 0 32rpx;
-  border-radius: 999rpx;
-  background: #4d44f1;
-  color: #fff;
-  font-size: 26rpx;
-}
-
-.comment-state-btn::after {
-  border: none;
-}
-
-.load-more {
-  text-align: center;
-  padding: 40rpx 0 0;
-  color: #999;
-  font-size: 24rpx;
-}
-
-.reply-popup-mask {
-  position: fixed;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.24);
-  z-index: 998;
-}
-
-.reply-popup {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 999;
-  padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 24rpx);
-  background: #ffffff;
-  border-radius: 28rpx 28rpx 0 0;
-  box-shadow: 0 -12rpx 36rpx rgba(15, 23, 42, 0.12);
-}
-
-.reply-popup-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20rpx;
-  margin-bottom: 20rpx;
-}
-
-.reply-popup-user {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10rpx;
-}
-
-.reply-popup-label {
-  font-size: 24rpx;
-  color: #6b7280;
-}
-
-.reply-popup-name {
-  font-size: 26rpx;
-  font-weight: 700;
-  color: #111827;
-}
-
-.reply-popup-close {
-  font-size: 24rpx;
-  color: #8b8f98;
-}
-
-.reply-popup-input-wrap {
-  display: flex;
-  align-items: center;
-  gap: 16rpx;
-}
-
-.reply-popup-input {
-  flex: 1;
-  height: 84rpx;
-  padding: 0 28rpx;
-  border-radius: 24rpx;
-  background: #f4f6fb;
-  font-size: 28rpx;
-  color: #1f2937;
-  box-sizing: border-box;
-}
-
-.reply-popup-placeholder {
-  color: #9ca3af;
-}
-
-.reply-popup-send {
-  min-width: 132rpx;
-  height: 84rpx;
-  line-height: 84rpx;
-  margin: 0;
-  padding: 0 24rpx;
-  border-radius: 24rpx;
-  background: linear-gradient(135deg, #111827 0%, #374151 100%);
-  color: #ffffff;
-  font-size: 26rpx;
-  font-weight: 700;
-}
-
-.reply-popup-send.disabled {
-  opacity: 0.45;
-}
-
-.reply-popup-send::after {
-  border: none;
-}
 </style>