feat: repley

api/topicItem.js

@@ -10,6 +10,7 @@ export const topicItemScore = async (data) => {
 };
 
 // 评论
+// data = { topicId, itemId, content, parentCommentId?, replyToCommentId? }
 export const topicItemComment = async (data) => {
   return request({
     url: "/api/rating/topic/comment/item",

components/AttitudePanel/AttitudePanel.vue

@@ -15,13 +15,20 @@
         <text class="action-name">{{ action.label }}</text>
       </view>
     </view>
+    <view v-if="replyTarget" class="reply-banner">
+      <view class="reply-banner-main">
+        <text class="reply-banner-label">正在回复</text>
+        <text class="reply-banner-user">@{{ replyTarget.replyToName || replyTarget.name }}</text>
+      </view>
+      <text class="reply-banner-cancel" @tap="handleCancelReply">取消</text>
+    </view>
     <view class="quick-comment">
       <input 
         class="comment-input" 
         type="text" 
         v-model="commentText"
         :disabled="sending"
-        placeholder="说点什么吧..." 
+        :placeholder="inputPlaceholder" 
         placeholder-class="input-placeholder" 
       />
       <button class="send-btn" :class="{ 'is-disabled': sending }" :disabled="sending" @tap="handleSend">
@@ -32,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 const props = defineProps({
   initialAction: {
@@ -42,10 +49,14 @@ const props = defineProps({
   sending: {
     type: Boolean,
     default: false
+  },
+  replyTarget: {
+    type: Object,
+    default: null
   }
 });
 
-const emit = defineEmits(['action-change', 'send-comment']);
+const emit = defineEmits(['action-change', 'send-comment', 'cancel-reply']);
 
 const currentAction = ref(props.initialAction);
 
@@ -55,6 +66,12 @@ watch(() => props.initialAction, (newVal) => {
 });
 
 const commentText = ref('');
+const inputPlaceholder = computed(() => {
+  if (props.replyTarget?.replyToName || props.replyTarget?.name) {
+    return `回复 @${props.replyTarget.replyToName || props.replyTarget.name}...`;
+  }
+  return '说点什么吧...';
+});
 
 const actions = [
   { label: '拉', value: 'terrible', emoji: '👎', score: 2, scoreType:1 },
@@ -84,6 +101,10 @@ const handleSend = () => {
   });
 };
 
+const handleCancelReply = () => {
+  emit('cancel-reply');
+};
+
 const resetComment = () => {
   commentText.value = '';
 };
@@ -157,6 +178,42 @@ defineExpose({
   padding: 8rpx 8rpx 8rpx 32rpx;
 }
 
+.reply-banner {
+  margin-bottom: 18rpx;
+  padding: 16rpx 20rpx;
+  border-radius: 18rpx;
+  background: linear-gradient(135deg, rgba(29, 78, 216, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+}
+
+.reply-banner-main {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10rpx;
+}
+
+.reply-banner-label {
+  font-size: 22rpx;
+  color: #6b7280;
+}
+
+.reply-banner-user {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #4338ca;
+}
+
+.reply-banner-cancel {
+  flex-shrink: 0;
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #111827;
+}
+
 .comment-input {
   flex: 1;
   height: 72rpx;

components/CommentItem/CommentItem.vue

@@ -1,24 +1,60 @@
 <template>
   <view class="comment-item">
-    <image class="c-avatar" :src="comment.avatar" mode="aspectFill" />
+    <image class="c-avatar" :src="localComment.avatar" mode="aspectFill" />
     <view class="c-content-wrap">
       <view class="c-header">
         <view class="c-user-info">
-          <text class="c-name">{{ comment.name }}</text>
+          <text class="c-name">{{ localComment.name }}</text>
-          <!-- 用户态度徽章 -->
+          <ActionBadge v-if="localComment.userAction" :action="localComment.userAction" />
-          <ActionBadge v-if="comment.userAction" :action="comment.userAction" />
+          <view class="c-badge" v-if="localComment.badge">
-          <view class="c-badge" v-if="comment.badge">
+            <text class="b-icon">{{ localComment.badgeIcon }}</text>
-            <text class="b-icon">{{ comment.badgeIcon }}</text>
+            <text class="b-text">{{ localComment.badge }}</text>
-            <text class="b-text">{{ comment.badge }}</text>
+          </view>
+        </view>
+        <view class="c-like" @tap="handleLike()">
+          <text class="like-icon" :class="{ 'is-liked': localComment.isLiked }"></text>
+          <text class="like-count" :class="{ 'liked-text': localComment.isLiked }">{{ localComment.likes }}</text>
+        </view>
+      </view>
+
+      <text class="c-time">{{ localComment.time }}</text>
+      <text class="c-text">{{ localComment.content }}</text>
+
+      <view class="c-actions">
+        <text class="c-action-btn" @tap="emitReply(localComment)">回复</text>
+        <text v-if="localComment.replyCount" class="c-action-count">{{ localComment.replyCount }} 条回复</text>
+      </view>
+
+      <view v-if="localComment.replies && localComment.replies.length" class="reply-panel">
+        <view
+          v-for="reply in localComment.replies"
+          :key="reply.id"
+          class="reply-item"
+        >
+          <image class="reply-avatar" :src="reply.avatar" mode="aspectFill" />
+          <view class="reply-main">
+            <view class="reply-head">
+              <view class="reply-user-wrap">
+                <text class="reply-name">{{ reply.name }}</text>
+                <ActionBadge v-if="reply.userAction" :action="reply.userAction" />
+              </view>
+              <view class="c-like reply-like" @tap="handleLike(reply)">
+                <text class="like-icon reply-like-icon" :class="{ 'is-liked': reply.isLiked }"></text>
+                <text class="like-count" :class="{ 'liked-text': reply.isLiked }">{{ reply.likes }}</text>
+              </view>
+            </view>
+
+            <text class="reply-time">{{ reply.time }}</text>
+            <text class="reply-text">
+              <text v-if="reply.replyToName" class="reply-at">@{{ reply.replyToName }} </text>{{ reply.content }}
+            </text>
+
+            <view class="reply-footer">
+              <text class="reply-btn" @tap="emitReply(reply)">回复</text>
             </view>
           </view>
-        <view class="c-like" @tap="handleLike">
-          <text class="like-icon" :class="{ 'is-liked': isLiked }"></text>
-          <text class="like-count" :class="{ 'liked-text': isLiked }">{{ currentLikes }}</text>
         </view>
       </view>
-      <text class="c-time">{{ comment.time }}</text>
-      <text class="c-text">{{ comment.content }}</text>
     </view>
   </view>
 </template>
@@ -37,75 +73,139 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['need-login', 'like-change']);
+const emit = defineEmits(['need-login', 'like-change', 'reply']);
 const userStore = useUserStore();
 const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
 
-const isLiked = ref(props.comment.isLiked || false);
+const buildReplyItem = (reply = {}) => ({
-const currentLikes = ref(props.comment.likes || 0);
+  ...reply,
-let isLiking = false; // 防抖标志
+  id: reply.id || '',
-
+  name: reply.name || '匿名用户',
-watch(() => props.comment.likes, (newVal) => {
+  avatar: reply.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=fallback',
-  currentLikes.value = newVal;
+  time: reply.time || '刚刚',
+  content: reply.content || '',
+  likes: Number(reply.likes || 0),
+  isLiked: !!reply.isLiked,
+  replyToName: reply.replyToName || '',
+  parentCommentId: reply.parentCommentId || '',
+  replyToCommentId: reply.replyToCommentId || '',
+  userAction: reply.userAction || ''
 });
 
-watch(() => props.comment.isLiked, (newVal) => {
+const buildCommentState = (comment = {}) => ({
-  isLiked.value = newVal || false;
+  ...comment,
+  likes: Number(comment.likes || 0),
+  isLiked: !!comment.isLiked,
+  replyCount: Number(comment.replyCount || 0),
+  replies: Array.isArray(comment.replies) ? comment.replies.map(buildReplyItem) : []
 });
 
-const handleLike = async () => {
+const localComment = ref(buildCommentState(props.comment));
+const likingMap = ref({});
+
+watch(
+  () => props.comment,
+  (newVal) => {
+    localComment.value = buildCommentState(newVal || {});
+  },
+  { deep: true }
+);
+
+const emitReply = (target) => {
+  emit('reply', {
+    rootCommentId: localComment.value.id,
+    parentCommentId: target.id === localComment.value.id ? localComment.value.id : (target.parentCommentId || localComment.value.id),
+    replyToCommentId: target.id,
+    replyToName: target.name,
+    content: target.content
+  });
+};
+
+const patchLikeState = (targetId, updater) => {
+  if (targetId === localComment.value.id) {
+    localComment.value = {
+      ...localComment.value,
+      ...updater(localComment.value)
+    };
+    return;
+  }
+
+  localComment.value = {
+    ...localComment.value,
+    replies: localComment.value.replies.map((reply) => {
+      if (reply.id !== targetId) return reply;
+      return {
+        ...reply,
+        ...updater(reply)
+      };
+    })
+  };
+};
+
+const handleLike = async (target = null) => {
   if (!isLoggedIn.value) {
     emit('need-login');
     return;
   }
 
-  if (isLiking) return;
+  const currentTarget = target || localComment.value;
-  isLiking = true;
+  if (!currentTarget?.id || likingMap.value[currentTarget.id]) return;
 
-  // 乐观更新 UI
+  likingMap.value = {
-  isLiked.value = !isLiked.value;
+    ...likingMap.value,
-  if (isLiked.value) {
+    [currentTarget.id]: true
-    currentLikes.value += 1;
+  };
+
+  const nextLiked = !currentTarget.isLiked;
+  const nextLikes = nextLiked ? currentTarget.likes + 1 : Math.max(0, currentTarget.likes - 1);
+
+  patchLikeState(currentTarget.id, () => ({
+    isLiked: nextLiked,
+    likes: nextLikes
+  }));
+
+  if (nextLiked) {
     uni.vibrateShort({ type: 'light' });
-  } else {
-    currentLikes.value -= 1;
   }
+
   emit('like-change', {
-    id: props.comment.id,
+    id: currentTarget.id,
-    isLiked: isLiked.value,
+    parentId: currentTarget.id === localComment.value.id ? '' : localComment.value.id,
-    likes: currentLikes.value
+    isReply: currentTarget.id !== localComment.value.id,
+    isLiked: nextLiked,
+    likes: nextLikes
   });
 
   try {
-    // 调用点赞接口 (点赞和取消点赞为同一个接口)
+    await topicItemCommentLike({ commentId: currentTarget.id });
-    await topicItemCommentLike({ commentId: props.comment.id });
-    // 记录点赞事件
     uni.$trackRecord({
       eventName: 'like_comment',
       eventType: 'like',
-      elementId: `comment_${props.comment.id}`,
+      elementId: `comment_${currentTarget.id}`,
-      elementContent: `评论项_${props.comment.name}`,
+      elementContent: `评论项_${currentTarget.name}`,
       customParams: {
-        comment: props.comment.content,
+        comment: currentTarget.content,
+        isReply: currentTarget.id !== localComment.value.id,
         page: 'rating_detail'
       }
     });
   } catch (error) {
-    // 接口调用失败，回滚 UI 状态
+    patchLikeState(currentTarget.id, () => ({
-    isLiked.value = !isLiked.value;
+      isLiked: currentTarget.isLiked,
-    if (isLiked.value) {
+      likes: currentTarget.likes
-      currentLikes.value += 1;
+    }));
-    } else {
-      currentLikes.value -= 1;
-    }
     emit('like-change', {
-      id: props.comment.id,
+      id: currentTarget.id,
-      isLiked: isLiked.value,
+      parentId: currentTarget.id === localComment.value.id ? '' : localComment.value.id,
-      likes: currentLikes.value
+      isReply: currentTarget.id !== localComment.value.id,
+      isLiked: currentTarget.isLiked,
+      likes: currentTarget.likes
     });
     uni.showToast({ title: '操作失败', icon: 'none' });
   } finally {
-    isLiking = false;
+    const nextMap = { ...likingMap.value };
+    delete nextMap[currentTarget.id];
+    likingMap.value = nextMap;
   }
 };
 </script>
@@ -225,4 +325,102 @@ const handleLike = async () => {
   line-height: 1.65;
   word-break: break-all;
 }
+
+.c-actions {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  margin-top: 16rpx;
+}
+
+.c-action-btn,
+.reply-btn,
+.c-action-count {
+  font-size: 22rpx;
+  color: #8b8f98;
+}
+
+.c-action-btn,
+.reply-btn {
+  font-weight: 600;
+}
+
+.reply-panel {
+  margin-top: 20rpx;
+  padding: 18rpx 18rpx 8rpx;
+  border-radius: 24rpx;
+  background: linear-gradient(180deg, #f6f7fb 0%, #f9fafc 100%);
+}
+
+.reply-item {
+  display: flex;
+  gap: 16rpx;
+  padding-bottom: 18rpx;
+}
+
+.reply-avatar {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: #eceff5;
+}
+
+.reply-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.reply-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.reply-user-wrap {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8rpx;
+}
+
+.reply-name {
+  font-size: 24rpx;
+  font-weight: 700;
+  color: #111827;
+}
+
+.reply-time {
+  display: block;
+  margin: 6rpx 0 10rpx;
+  font-size: 20rpx;
+  color: #9ca3af;
+}
+
+.reply-text {
+  font-size: 24rpx;
+  line-height: 1.7;
+  color: #30343b;
+  word-break: break-all;
+}
+
+.reply-at {
+  color: #4f46e5;
+  font-weight: 600;
+}
+
+.reply-footer {
+  margin-top: 10rpx;
+}
+
+.reply-like {
+  margin: 0;
+  padding: 0;
+}
+
+.reply-like-icon {
+  width: 28rpx;
+  height: 28rpx;
+}
 </style>

pages/rating/detail.vue

@@ -50,8 +50,10 @@
         ref="attitudePanelRef"
         :initial-action="currentAction" 
         :sending="isSendingComment"
+        :reply-target="replyTarget"
         @action-change="handleActionChange"
         @send-comment="handleSendComment"
+        @cancel-reply="clearReplyTarget"
       />
 
       <!-- 大家都在 PK -->
@@ -121,6 +123,7 @@
             :comment="comment"
             @need-login="openLoginPopup"
             @like-change="handleCommentLikeChange"
+            @reply="handleReplyComment"
           />
         </view>
 
@@ -198,12 +201,57 @@ const detailData = ref({
 
 const comments = ref([]);
 const itemId = ref('');
+const replyTarget = ref(null);
 
 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 normalizeCommentItem = (item = {}, rootComment = null) => {
+  const user = item.user || {};
+  const replyToUser = item.replyToUser || {};
+  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,
+    badge: '',
+    badgeIcon: '',
+    userAction: item.userAction || '',
+    replyCount: Number(item.replyCount || 0),
+    replyToName: replyToUser.nickname || '',
+    replies: rootComment
+      ? []
+      : (Array.isArray(item.replies) ? item.replies.map((reply) => normalizeCommentItem(reply, item)) : [])
+  };
+};
+
+const clearReplyTarget = () => {
+  replyTarget.value = null;
+};
+
+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 || ''
+  };
+};
+
 const calcPkPercent = (leftScore, rightScore) => {
   const left = Number(leftScore) || 0;
   const right = Number(rightScore) || 0;
@@ -333,7 +381,9 @@ const handleSendComment = async (payload) => {
     await topicItemComment({
       topicId: detailData.value.topicId,
       itemId: itemId.value,
-      content: payload.content
+      content: payload.content,
+      parentCommentId: replyTarget.value?.parentCommentId || undefined,
+      replyToCommentId: replyTarget.value?.replyToCommentId || undefined
     });
     uni.hideLoading();
     
@@ -355,10 +405,12 @@ const handleSendComment = async (payload) => {
       elementContent: `评论项_${detailData.value.name}`,
       customParams: {
         comment: payload.content,
+        replyToCommentId: replyTarget.value?.replyToCommentId || '',
         page: 'rating_detail'
       }
     });
     attitudePanelRef.value?.resetComment?.();
+    clearReplyTarget();
     await getCommentsData({ replace: true });
   } catch (error) {
     uni.hideLoading();
@@ -377,6 +429,7 @@ const switchTab = (tab) => {
   currentPage.value = 1;
   hasMore.value = true;
   commentError.value = '';
+  clearReplyTarget();
   getCommentsData({ replace: true });
 };
 
@@ -413,20 +466,7 @@ const getCommentsData = async ({ replace = false } = {}) => {
       (Array.isArray(res?.data) ? res.data : []);
     const list = Array.isArray(rawList) ? rawList : [];
     
-    const formattedList = list.map(item => ({
+    const formattedList = list.map((item) => normalizeCommentItem(item));
-      id: item.id,
-      name: item.user?.nickname || '匿名用户',
-      avatar: item.user?.avatar
-        ? (String(item.user.avatar).startsWith('http') ? item.user.avatar : `${FILE_BASE_URL}${item.user.avatar}`)
-        : 'https://api.dicebear.com/7.x/avataaars/svg?seed=fallback',
-      time: formatDate(item.createdAt) || '刚刚', // 如果后端返回了时间字段可以替换
-      content: item.content,
-      likes: item.likeCount || 0,
-      isLiked: item.isLiked || false,
-      badge: '', // 预留徽章字段
-      badgeIcon: '',
-      userAction: item.userAction || "" // 夯/顶级/人上人/NPC/拉
-    }));
 
     if (currentPage.value === 1 || replace) {
       comments.value = formattedList;
@@ -450,12 +490,29 @@ const retryLoadComments = () => {
   if (!comments.value.length) {
     currentPage.value = 1;
   }
+  clearReplyTarget();
   getCommentsData({ replace: currentPage.value === 1 });
 };
 
-const handleCommentLikeChange = ({ id, isLiked, likes }) => {
+const handleCommentLikeChange = ({ id, parentId, isReply, isLiked, likes }) => {
   comments.value = comments.value.map((item) => {
-    if (item.id !== id) return 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,
@@ -531,6 +588,7 @@ const handleLoginSuccess = () => {
   hasMore.value = true;
   comments.value = [];
   commentError.value = '';
+  clearReplyTarget();
   getDetailData();
 };
 
@@ -560,6 +618,7 @@ onPullDownRefresh(() => {
   hasMore.value = true;
   comments.value = [];
   commentError.value = '';
+  clearReplyTarget();
   getDetailData();
 });