feat: repley

components/CommentItem/CommentItem.vue

@@ -22,7 +22,15 @@
 
       <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>
+        <text
+          v-if="localComment.replyCount && !localComment.repliesLoaded && !localComment.repliesLoading"
+          class="c-action-link"
+          @tap="emit('toggle-replies', localComment)"
+        >
+          查看 {{ localComment.replyCount }} 条回复
+        </text>
+        <text v-else-if="localComment.repliesLoading" class="c-action-count">回复加载中...</text>
+        <text v-else-if="localComment.replyCount" class="c-action-count">{{ localComment.replyCount }} 条回复</text>
       </view>
 
       <view v-if="localComment.replies && localComment.replies.length" class="reply-panel">
@@ -54,6 +62,17 @@
             </view>
           </view>
         </view>
+
+        <view class="reply-panel-footer">
+          <text
+            v-if="localComment.repliesHasMore && !localComment.repliesLoading"
+            class="reply-more-btn"
+            @tap="emit('more-replies', localComment)"
+          >
+            查看更多回复
+          </text>
+          <text v-else-if="localComment.repliesLoading" class="reply-more-loading">加载更多中...</text>
+        </view>
       </view>
     </view>
   </view>
@@ -73,7 +92,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['need-login', 'like-change', 'reply']);
+const emit = defineEmits(['need-login', 'like-change', 'reply', 'toggle-replies', 'more-replies']);
 const userStore = useUserStore();
 const isLoggedIn = computed(() => !!userStore.token || !!userStore.userInfo?.nickName);
 
@@ -97,6 +116,10 @@ const buildCommentState = (comment = {}) => ({
   likes: Number(comment.likes || 0),
   isLiked: !!comment.isLiked,
   replyCount: Number(comment.replyCount || 0),
+  repliesLoading: !!comment.repliesLoading,
+  repliesLoaded: !!comment.repliesLoaded,
+  repliesHasMore: !!comment.repliesHasMore,
+  repliesPage: Number(comment.repliesPage || 1),
   replies: Array.isArray(comment.replies) ? comment.replies.map(buildReplyItem) : []
 });
 
@@ -335,13 +358,15 @@ const handleLike = async (target = null) => {
 
 .c-action-btn,
 .reply-btn,
-.c-action-count {
+.c-action-count,
+.c-action-link {
   font-size: 22rpx;
   color: #8b8f98;
 }
 
 .c-action-btn,
-.reply-btn {
+.reply-btn,
+.c-action-link {
   font-weight: 600;
 }
 
@@ -423,4 +448,19 @@ const handleLike = async (target = null) => {
   width: 28rpx;
   height: 28rpx;
 }
+
+.reply-panel-footer {
+  padding: 8rpx 0 10rpx 72rpx;
+}
+
+.reply-more-btn,
+.reply-more-loading {
+  font-size: 22rpx;
+  color: #4f46e5;
+  font-weight: 600;
+}
+
+.reply-more-loading {
+  color: #9ca3af;
+}
 </style>