feat: repley

2026-06-15 07:59:47 +08:00
parent 9a28a0929d
commit cd1595373b
4 changed files with 386 additions and 71 deletions
--- a/api/topicItem.js
+++ b/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",
--- a/components/AttitudePanel/AttitudePanel.vue
+++ b/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;
--- a/components/CommentItem/CommentItem.vue
+++ b/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>
-          <!-- 用户态度徽章 -->
-          <ActionBadge v-if="comment.userAction" :action="comment.userAction" />
-          <view class="c-badge" v-if="comment.badge">
-            <text class="b-icon">{{ comment.badgeIcon }}</text>
-            <text class="b-text">{{ comment.badge }}</text>
+          <text class="c-name">{{ localComment.name }}</text>
+          <ActionBadge v-if="localComment.userAction" :action="localComment.userAction" />
+          <view class="c-badge" v-if="localComment.badge">
+            <text class="b-icon">{{ localComment.badgeIcon }}</text>
+            <text class="b-text">{{ localComment.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 currentLikes = ref(props.comment.likes || 0);
-let isLiking = false; // 防抖标志
-
-watch(() => props.comment.likes, (newVal) => {
-  currentLikes.value = newVal;
+const buildReplyItem = (reply = {}) => ({
+  ...reply,
+  id: reply.id || '',
+  name: reply.name || '匿名用户',
+  avatar: reply.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=fallback',
+  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) => {
-  isLiked.value = newVal || false;
+const buildCommentState = (comment = {}) => ({
+  ...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;
-  isLiking = true;
+  const currentTarget = target || localComment.value;
+  if (!currentTarget?.id || likingMap.value[currentTarget.id]) return;

-  // 乐观更新 UI
-  isLiked.value = !isLiked.value;
-  if (isLiked.value) {
-    currentLikes.value += 1;
+  likingMap.value = {
+    ...likingMap.value,
+    [currentTarget.id]: true
+  };
+
+  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,
-    isLiked: isLiked.value,
-    likes: currentLikes.value
+    id: currentTarget.id,
+    parentId: currentTarget.id === localComment.value.id ? '' : localComment.value.id,
+    isReply: currentTarget.id !== localComment.value.id,
+    isLiked: nextLiked,
+    likes: nextLikes
  });

  try {
-    // 调用点赞接口 (点赞和取消点赞为同一个接口)
-    await topicItemCommentLike({ commentId: props.comment.id });
-    // 记录点赞事件
+    await topicItemCommentLike({ commentId: currentTarget.id });
    uni.$trackRecord({
      eventName: 'like_comment',
      eventType: 'like',
-      elementId: `comment_${props.comment.id}`,
-      elementContent: `评论项_${props.comment.name}`,
+      elementId: `comment_${currentTarget.id}`,
+      elementContent: `评论项_${currentTarget.name}`,
      customParams: {
-        comment: props.comment.content,
+        comment: currentTarget.content,
+        isReply: currentTarget.id !== localComment.value.id,
        page: 'rating_detail'
      }
    });
  } catch (error) {
-    // 接口调用失败，回滚 UI 状态
-    isLiked.value = !isLiked.value;
-    if (isLiked.value) {
-      currentLikes.value += 1;
-    } else {
-      currentLikes.value -= 1;
-    }
+    patchLikeState(currentTarget.id, () => ({
+      isLiked: currentTarget.isLiked,
+      likes: currentTarget.likes
+    }));
    emit('like-change', {
-      id: props.comment.id,
-      isLiked: isLiked.value,
-      likes: currentLikes.value
+      id: currentTarget.id,
+      parentId: currentTarget.id === localComment.value.id ? '' : localComment.value.id,
+      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>
--- a/pages/rating/detail.vue
+++ b/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 => ({
-      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/拉
-    }));
+    const formattedList = list.map((item) => normalizeCommentItem(item));

    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();
 });