fix: pk comment

api/pk.js

@@ -19,3 +19,57 @@ export const vote = async (data) => {
     data,
   });
 };
+
+/**
+ * 获取PK 评论列表
+ * @param { pkId: string, page: number, orderBy: string }
+ * @param { orderBy: string } 排序字段，可选值：'hot' | 'new',
+ */
+export const fetchCommentList = async (data) => {
+  return request({
+    url: "/api/rating/pk/comment/list",
+    method: "GET",
+    data,
+  });
+};
+
+/**
+ * 获取PK 评论回复
+ * @param { pkId: string, rootCommentId: string, page: number }
+ */
+export const fetchCommentReplyList = async (data) => {
+  return request({
+    url: "/api/rating/pk/comment/replies",
+    method: "GET",
+    data,
+  });
+};
+
+/**
+ * 发布PK 评论
+ * @param { pkId: string, content: string, parentCommentId?: string, replyToCommentId?: string } 
+ * @param { parentCommentId?: string } 父评论ID，回复时必填
+ * @param { replyToCommentId?: string } 回复的评论ID，回复时必填
+ */
+export const publishComment = async (data) => {
+  return request({
+    url: "/api/rating/pk/comment",
+    method: "POST",
+    data,
+  });
+};
+
+/**
+ * PK 评论 点赞
+ * @param { commentId: string }
+ */
+export const likeComment = async (data) => {
+  return request({
+    url: "/api/rating/pk/comment/like",
+    method: "POST",
+    data,
+  });
+};
+
+
+

components/CommentItem/CommentItem.vue

@@ -5,6 +5,13 @@
       <view class="c-header">
         <view class="c-user-info">
           <text class="c-name">{{ localComment.name }}</text>
+          <view
+            v-if="localComment.choiceLabel"
+            class="choice-tag"
+            :class="localComment.choiceTone ? `choice-tag--${localComment.choiceTone}` : ''"
+          >
+            <text class="choice-tag-text">{{ localComment.choiceLabel }}</text>
+          </view>
           <ActionBadge v-if="localComment.userAction" :action="localComment.userAction" />
           <view class="c-badge" v-if="localComment.badge">
             <text class="b-icon">{{ localComment.badgeIcon }}</text>
@@ -89,6 +96,14 @@ const props = defineProps({
     type: Object,
     required: true,
     default: () => ({})
+  },
+  likeHandler: {
+    type: Function,
+    default: null
+  },
+  pageName: {
+    type: String,
+    default: 'rating_detail'
   }
 });
 
@@ -115,6 +130,8 @@ const buildCommentState = (comment = {}) => ({
   ...comment,
   likes: Number(comment.likes || 0),
   isLiked: !!comment.isLiked,
+  choiceLabel: comment.choiceLabel || '',
+  choiceTone: comment.choiceTone || '',
   replyCount: Number(comment.replyCount || 0),
   repliesLoading: !!comment.repliesLoading,
   repliesLoaded: !!comment.repliesLoaded,
@@ -200,7 +217,8 @@ const handleLike = async (target = null) => {
   });
 
   try {
-    await topicItemCommentLike({ commentId: currentTarget.id });
+    const likeRequest = props.likeHandler || topicItemCommentLike;
+    await likeRequest({ commentId: currentTarget.id });
     uni.$trackRecord({
       eventName: 'like_comment',
       eventType: 'like',
@@ -209,7 +227,7 @@ const handleLike = async (target = null) => {
       customParams: {
         comment: currentTarget.content,
         isReply: currentTarget.id !== localComment.value.id,
-        page: 'rating_detail'
+        page: props.pageName
       }
     });
   } catch (error) {
@@ -303,6 +321,34 @@ const handleLike = async (target = null) => {
 .b-icon { font-size: 20rpx; margin-right: 6rpx; }
 .b-text { font-size: 20rpx; color: #666; font-weight: bold; }
 
+.choice-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 42rpx;
+  padding: 0 16rpx;
+  border-radius: 999rpx;
+  background: rgba(79, 70, 229, 0.08);
+  margin-right: 12rpx;
+}
+
+.choice-tag--left {
+  background: rgba(92, 67, 245, 0.1);
+}
+
+.choice-tag--right {
+  background: rgba(255, 141, 95, 0.12);
+}
+
+.choice-tag-text {
+  font-size: 20rpx;
+  font-weight: 700;
+  color: #4f46e5;
+}
+
+.choice-tag--right .choice-tag-text {
+  color: #ff7a45;
+}
+
 .c-like {
   display: flex;
   align-items: center;

components/PkCommentSection/PkCommentSection.vue

@@ -0,0 +1,825 @@
+<template>
+  <view class="pk-comment-section">
+    <view class="comment-header">
+      <view class="comment-tabs">
+        <text
+          v-for="tab in tabs"
+          :key="tab.value"
+          class="comment-tab"
+          :class="{ active: currentTab === tab.value }"
+          @tap="switchTab(tab.value)"
+        >
+          {{ tab.label }}
+        </text>
+      </view>
+      <view class="my-choice-pill" :class="selectedTone ? `my-choice-pill--${selectedTone}` : ''">
+        <text class="my-choice-pill-label">我站</text>
+        <text class="my-choice-pill-value">{{ selectedItemLabel }}</text>
+      </view>
+    </view>
+
+    <view class="compose-card">
+      <view class="compose-tip">
+        <text class="compose-title">说说你的理由</text>
+        <text class="compose-desc">支持 {{ selectedItemLabel }} 的观点，会更容易引发讨论</text>
+      </view>
+      <view class="compose-box">
+        <input
+          class="compose-input"
+          v-model="commentText"
+          :disabled="sending"
+          placeholder="写下你的 PK 观点..."
+          placeholder-class="compose-placeholder"
+          confirm-type="send"
+          @confirm="submitMainComment"
+        />
+        <button
+          class="compose-send"
+          :class="{ disabled: sending || !commentText.trim() }"
+          :disabled="sending || !commentText.trim()"
+          @tap="submitMainComment"
+        >
+          {{ sending ? "发送中" : "发布" }}
+        </button>
+      </view>
+    </view>
+
+    <view class="comment-list">
+      <view v-if="loading && !comments.length" class="comment-state">
+        <text class="comment-state-title">评论加载中...</text>
+        <text class="comment-state-desc">看看大家都站哪边</text>
+      </view>
+      <view v-else-if="loadError && !comments.length" class="comment-state">
+        <text class="comment-state-title">评论加载失败</text>
+        <text class="comment-state-desc">{{ loadError }}</text>
+        <button class="comment-state-btn" @tap="refreshComments">重新加载</button>
+      </view>
+      <view v-else-if="!comments.length" class="comment-state">
+        <text class="comment-state-title">还没有人发言</text>
+        <text class="comment-state-desc">你可以成为这场 PK 的第一位评论官</text>
+      </view>
+      <CommentItem
+        v-for="comment in comments"
+        :key="comment.id"
+        :comment="comment"
+        :like-handler="likeComment"
+        page-name="pk_station"
+        @need-login="emit('need-login')"
+        @like-change="handleCommentLikeChange"
+        @reply="openReplyPopup"
+        @toggle-replies="handleToggleReplies"
+        @more-replies="handleLoadMoreReplies"
+      />
+    </view>
+
+    <view v-if="comments.length" class="comment-footer">
+      <text v-if="loading" class="comment-footer-text">加载中...</text>
+      <text
+        v-else-if="hasMore"
+        class="comment-footer-link"
+        @tap="loadComments()"
+      >
+        查看更多评论
+      </text>
+      <text v-else class="comment-footer-text">没有更多评论了</text>
+    </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="sendingReply"
+          :adjust-position="false"
+          confirm-type="send"
+          :placeholder="replyPlaceholder"
+          placeholder-class="reply-popup-placeholder"
+          @confirm="submitReplyComment"
+        />
+        <button
+          class="reply-popup-send"
+          :class="{ disabled: sendingReply || !replyContent.trim() }"
+          :disabled="sendingReply || !replyContent.trim()"
+          @tap="submitReplyComment"
+        >
+          {{ sendingReply ? "发送中" : "发送" }}
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed, nextTick, ref, watch } from "vue";
+import { onUnmounted } from "vue";
+import CommentItem from "@/components/CommentItem/CommentItem.vue";
+import { useUserStore } from "@/stores/user";
+import {
+  fetchCommentList,
+  fetchCommentReplyList,
+  publishComment,
+  likeComment,
+} from "@/api/pk";
+import { FILE_BASE_URL } from "@/utils/constants";
+import { formatDate } from "@/utils/date";
+
+const props = defineProps({
+  pkId: {
+    type: String,
+    default: "",
+  },
+  selectedItemId: {
+    type: String,
+    default: "",
+  },
+  selectedItemLabel: {
+    type: String,
+    default: "",
+  },
+  currentPair: {
+    type: Object,
+    default: null,
+  },
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["need-login"]);
+const userStore = useUserStore();
+
+const tabs = [
+  { label: "最热", value: "hot" },
+  { label: "最新", value: "new" },
+];
+
+const comments = ref([]);
+const currentTab = ref("hot");
+const currentPage = ref(1);
+const hasMore = ref(true);
+const loading = ref(false);
+const sending = ref(false);
+const loadError = ref("");
+const commentText = ref("");
+const replyTarget = ref(null);
+const replyPopupVisible = ref(false);
+const replyInputFocus = ref(false);
+const replyContent = ref("");
+const replyKeyboardHeight = ref(0);
+const sendingReply = ref(false);
+
+let keyboardHeightListener = null;
+
+const selectedTone = computed(() => {
+  if (!props.currentPair || !props.selectedItemId) return "";
+  if (props.selectedItemId === props.currentPair.left?.id) return "left";
+  if (props.selectedItemId === props.currentPair.right?.id) return "right";
+  return "";
+});
+const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
+
+const replyPlaceholder = computed(() => {
+  return replyTarget.value?.replyToName
+    ? `回复 @${replyTarget.value.replyToName}...`
+    : "写下你的回复";
+});
+
+const buildAvatarUrl = (avatar) => {
+  if (!avatar) return "https://api.dicebear.com/7.x/avataaars/svg?seed=fallback";
+  const normalizedAvatar = String(avatar).trim();
+  return normalizedAvatar.startsWith("http") ? normalizedAvatar : `${FILE_BASE_URL}${normalizedAvatar}`;
+};
+
+const resolveChoiceMeta = (chooseItemId) => {
+  if (!chooseItemId || !props.currentPair) {
+    return { choiceLabel: "", choiceTone: "" };
+  }
+  if (chooseItemId === props.currentPair.left?.id) {
+    return {
+      choiceLabel: `支持 ${props.currentPair.left.name}`,
+      choiceTone: "left",
+    };
+  }
+  if (chooseItemId === props.currentPair.right?.id) {
+    return {
+      choiceLabel: `支持 ${props.currentPair.right.name}`,
+      choiceTone: "right",
+    };
+  }
+  return { choiceLabel: "已站队", choiceTone: "" };
+};
+
+const normalizeComment = (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 resetState = () => {
+  comments.value = [];
+  currentTab.value = "hot";
+  currentPage.value = 1;
+  hasMore.value = true;
+  loading.value = false;
+  sending.value = false;
+  loadError.value = "";
+  commentText.value = "";
+  closeReplyPopup();
+};
+
+const patchCommentItem = (commentId, updater) => {
+  comments.value = comments.value.map((comment) => {
+    if (comment.id !== commentId) return comment;
+    return updater(comment);
+  });
+};
+
+const resolveHasMore = (res, list, page) => {
+  const data = res?.data || res || {};
+  const hasNext = data?.hasNext ?? res?.hasNext;
+  if (typeof hasNext === "boolean") return hasNext;
+
+  const total = Number(data?.totalCount ?? data?.total ?? res?.totalCount ?? res?.total ?? 0);
+  if (total > 0) {
+    return page * Math.max(1, list.length) < total;
+  }
+
+  const pages = Number(data?.pages || res?.pages || 0);
+  if (pages > 0) return page < pages;
+
+  return list.length > 0;
+};
+
+const loadComments = async ({ reset = false } = {}) => {
+  if (!props.visible || !props.pkId || loading.value) return;
+  if (!reset && !hasMore.value) return;
+
+  const page = reset ? 1 : currentPage.value;
+
+  try {
+    loading.value = true;
+    loadError.value = "";
+    const res = await fetchCommentList({
+      pkId: props.pkId,
+      page,
+      orderBy: currentTab.value,
+    });
+    const source = res?.data || res || {};
+    const rawList =
+      source.list ||
+      source.records ||
+      res?.list ||
+      res?.records ||
+      (Array.isArray(source) ? source : []);
+    const list = Array.isArray(rawList) ? rawList : [];
+    const normalized = list.map((item) => normalizeComment(item));
+
+    comments.value = reset ? normalized : [...comments.value, ...normalized];
+    hasMore.value = resolveHasMore(res, list, page);
+    currentPage.value = page + 1;
+  } catch (error) {
+    loadError.value = "网络开了点小差，稍后重试";
+  } finally {
+    loading.value = false;
+  }
+};
+
+const refreshComments = async () => {
+  currentPage.value = 1;
+  hasMore.value = true;
+  await loadComments({ reset: true });
+};
+
+const switchTab = (tab) => {
+  if (currentTab.value === tab) return;
+  currentTab.value = tab;
+  refreshComments();
+};
+
+const submitMainComment = async () => {
+  if (!isLoggedIn.value) {
+    emit("need-login");
+    return;
+  }
+  const content = commentText.value.trim();
+  if (!content || sending.value || !props.pkId || !props.selectedItemId) return;
+
+  try {
+    sending.value = true;
+    await publishComment({
+      pkId: props.pkId,
+      chooseItemId: props.selectedItemId,
+      content,
+    });
+    uni.showToast({ title: "评论已发布", icon: "none" });
+    commentText.value = "";
+    await refreshComments();
+  } catch (error) {
+    uni.showToast({ title: "发布失败", icon: "none" });
+  } finally {
+    sending.value = false;
+  }
+};
+
+const openReplyPopup = async (payload) => {
+  if (!isLoggedIn.value) {
+    emit("need-login");
+    return;
+  }
+  replyTarget.value = payload;
+  replyPopupVisible.value = true;
+  await nextTick();
+  replyInputFocus.value = false;
+  await nextTick();
+  replyInputFocus.value = true;
+};
+
+const closeReplyPopup = () => {
+  replyPopupVisible.value = false;
+  replyInputFocus.value = false;
+  replyContent.value = "";
+  replyTarget.value = null;
+  replyKeyboardHeight.value = 0;
+};
+
+const submitReplyComment = async () => {
+  if (!isLoggedIn.value) {
+    emit("need-login");
+    return;
+  }
+  const content = replyContent.value.trim();
+  if (!content || !replyTarget.value || sendingReply.value || !props.pkId || !props.selectedItemId) return;
+
+  try {
+    sendingReply.value = true;
+    await publishComment({
+      pkId: props.pkId,
+      chooseItemId: props.selectedItemId,
+      content,
+      parentCommentId: replyTarget.value.parentCommentId,
+      replyToCommentId: replyTarget.value.replyToCommentId,
+    });
+    uni.showToast({ title: "回复已发送", icon: "none" });
+    closeReplyPopup();
+    await refreshComments();
+  } catch (error) {
+    uni.showToast({ title: "回复失败", icon: "none" });
+  } finally {
+    sendingReply.value = false;
+  }
+};
+
+const loadReplies = async (comment, page = 1) => {
+  if (!comment?.id || !props.pkId) return;
+
+  patchCommentItem(comment.id, (item) => ({
+    ...item,
+    repliesLoading: true,
+  }));
+
+  try {
+    const res = await fetchCommentReplyList({
+      pkId: props.pkId,
+      rootCommentId: comment.id,
+      page,
+    });
+    const source = res?.data || res || {};
+    const rawList = source.list || res?.list || [];
+    const list = Array.isArray(rawList) ? rawList : [];
+    const normalizedReplies = list.map((reply) => normalizeComment(reply, comment));
+    const hasMoreReplies = resolveHasMore(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,
+    };
+  });
+};
+
+watch(
+  () => [props.pkId, props.visible, props.selectedItemId],
+  ([pkId, visible, selectedItemId]) => {
+    if (!pkId || !visible || !selectedItemId) {
+      resetState();
+      return;
+    }
+    currentPage.value = 1;
+    hasMore.value = true;
+    comments.value = [];
+    loadComments({ reset: true });
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.currentPair,
+  () => {
+    comments.value = comments.value.map((comment) => ({
+      ...comment,
+      ...resolveChoiceMeta(comment.chooseItemId),
+    }));
+  }
+);
+
+if (uni.onKeyboardHeightChange) {
+  keyboardHeightListener = (res) => {
+    replyKeyboardHeight.value = res?.height || 0;
+  };
+  uni.onKeyboardHeightChange(keyboardHeightListener);
+}
+
+onUnmounted(() => {
+  if (uni.offKeyboardHeightChange && keyboardHeightListener) {
+    uni.offKeyboardHeightChange(keyboardHeightListener);
+  }
+});
+
+defineExpose({
+  refreshComments,
+});
+</script>
+
+<style lang="scss" scoped>
+.pk-comment-section {
+  margin-top: 24rpx;
+  padding: 32rpx;
+  border-radius: 32rpx;
+  background: rgba(255, 255, 255, 0.94);
+  border: 2rpx solid rgba(229, 232, 246, 0.92);
+  box-shadow: 0 18rpx 42rpx rgba(87, 92, 145, 0.08);
+}
+
+.comment-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+  margin-bottom: 28rpx;
+}
+
+.comment-tabs {
+  display: flex;
+  gap: 34rpx;
+}
+
+.comment-tab {
+  font-size: 30rpx;
+  color: #8a90a0;
+  font-weight: 600;
+  padding-bottom: 10rpx;
+  position: relative;
+}
+
+.comment-tab.active {
+  color: #1f2432;
+  font-weight: 800;
+}
+
+.comment-tab.active::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: 28rpx;
+  height: 6rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #6557ff, #4d44f1);
+}
+
+.my-choice-pill {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 10rpx 18rpx;
+  border-radius: 999rpx;
+  background: rgba(92, 67, 245, 0.1);
+}
+
+.my-choice-pill--right {
+  background: rgba(255, 141, 95, 0.12);
+}
+
+.my-choice-pill-label {
+  font-size: 22rpx;
+  color: #8a90a0;
+}
+
+.my-choice-pill-value {
+  font-size: 22rpx;
+  font-weight: 700;
+  color: #4d44f1;
+}
+
+.my-choice-pill--right .my-choice-pill-value {
+  color: #ff7a45;
+}
+
+.compose-card {
+  margin-bottom: 28rpx;
+  padding: 24rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(135deg, rgba(92, 67, 245, 0.08), rgba(92, 67, 245, 0.03));
+}
+
+.compose-tip {
+  margin-bottom: 18rpx;
+}
+
+.compose-title {
+  display: block;
+  font-size: 28rpx;
+  font-weight: 800;
+  color: #202433;
+}
+
+.compose-desc {
+  display: block;
+  margin-top: 8rpx;
+  font-size: 22rpx;
+  color: #7b8191;
+}
+
+.compose-box {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.compose-input {
+  flex: 1;
+  height: 84rpx;
+  padding: 0 26rpx;
+  border-radius: 24rpx;
+  background: #ffffff;
+  font-size: 28rpx;
+  color: #1f2432;
+  box-sizing: border-box;
+}
+
+.compose-placeholder {
+  color: #a0a6b5;
+}
+
+.compose-send {
+  min-width: 132rpx;
+  height: 84rpx;
+  line-height: 84rpx;
+  margin: 0;
+  padding: 0 24rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(135deg, #6557ff, #4d44f1);
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: 700;
+}
+
+.compose-send.disabled {
+  opacity: 0.45;
+}
+
+.compose-send::after,
+.comment-state-btn::after,
+.reply-popup-send::after {
+  border: none;
+}
+
+.comment-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 200rpx;
+}
+
+.comment-state {
+  min-height: 260rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  color: #999;
+  padding: 36rpx 24rpx;
+  border-radius: 24rpx;
+  background: #f8f9ff;
+}
+
+.comment-state-title {
+  display: block;
+  font-size: 30rpx;
+  color: #232734;
+  font-weight: 800;
+  margin-bottom: 12rpx;
+}
+
+.comment-state-desc {
+  display: block;
+  font-size: 24rpx;
+  color: #8a90a0;
+  line-height: 1.7;
+}
+
+.comment-state-btn {
+  margin-top: 22rpx;
+  height: 72rpx;
+  line-height: 72rpx;
+  padding: 0 30rpx;
+  border-radius: 999rpx;
+  background: #111827;
+  color: #fff;
+  font-size: 24rpx;
+}
+
+.comment-footer {
+  padding-top: 20rpx;
+  text-align: center;
+}
+
+.comment-footer-text {
+  font-size: 22rpx;
+  color: #9ca3af;
+}
+
+.comment-footer-link {
+  font-size: 22rpx;
+  font-weight: 700;
+  color: #4f46e5;
+}
+
+.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;
+}
+</style>

pages/pk/index.vue

@@ -79,7 +79,18 @@
         </view>
       </view>
 
-      <view v-else class="state-card">
+      <PkCommentSection
+        v-if="currentPair && hasVoted"
+        ref="commentSectionRef"
+        :pk-id="currentPair.id"
+        :current-pair="currentPair"
+        :selected-item-id="selectedItemId"
+        :selected-item-label="selectedItemLabel"
+        :visible="hasVoted"
+        @need-login="openLoginPopup('请先登录后再参与评论')"
+      />
+
+      <view v-else-if="!currentPair" class="state-card">
         <text class="state-title">暂时没有新的 PK 对局</text>
         <text class="state-desc">当前没有可参与的随机对局，稍后再来看看有没有新的组合。</text>
         <button class="state-btn" @tap="loadNextPair">重新获取</button>
@@ -96,6 +107,7 @@ import { onLoad, onPullDownRefresh, onShareAppMessage, onShareTimeline } from "@
 import { getStatusBarHeight } from "@/utils/system";
 import { fetchRandomTopicList, vote } from "@/api/pk";
 import { FILE_BASE_URL } from "@/utils/constants";
+import PkCommentSection from "@/components/PkCommentSection/PkCommentSection.vue";
 import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
 import { useUserStore } from "@/stores/user";
 import { getShareReward } from "@/api/system";
@@ -104,6 +116,7 @@ import { getShareToken } from "@/utils/common";
 const userStore = useUserStore();
 const statusBarHeight = ref(getStatusBarHeight() || 44);
 const loginPopupRef = ref(null);
+const commentSectionRef = ref(null);
 const loading = ref(false);
 const voting = ref(false);
 const currentPair = ref(null);
@@ -112,6 +125,14 @@ const voteStats = ref({ leftPercent: 50, rightPercent: 50 });
 
 const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
 const hasVoted = computed(() => !!selectedSide.value);
+const selectedItemId = computed(() => {
+  if (!currentPair.value || !selectedSide.value) return "";
+  return selectedSide.value === "left" ? currentPair.value.left.id : currentPair.value.right.id;
+});
+const selectedItemLabel = computed(() => {
+  if (!currentPair.value || !selectedSide.value) return "";
+  return selectedSide.value === "left" ? currentPair.value.left.name : currentPair.value.right.name;
+});
 
 const buildAvatarUrl = (avatar) => {
   if (!avatar) return "https://api.dicebear.com/7.x/avataaars/svg?seed=fallback";
@@ -269,7 +290,11 @@ const refreshPool = () => {
   loadNextPair();
 };
 
-const handleLoginSuccess = () => {};
+const handleLoginSuccess = async () => {
+  if (hasVoted.value) {
+    await commentSectionRef.value?.refreshComments?.();
+  }
+};
 
 onLoad(() => {
   loadNextPair();