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;