feat: repley

components/AttitudePanel/AttitudePanel.vue

@@ -15,13 +15,6 @@
         <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" 
@@ -49,14 +42,10 @@ const props = defineProps({
   sending: {
     type: Boolean,
     default: false
-  },
-  replyTarget: {
-    type: Object,
-    default: null
   }
 });
 
-const emit = defineEmits(['action-change', 'send-comment', 'cancel-reply']);
+const emit = defineEmits(['action-change', 'send-comment']);
 
 const currentAction = ref(props.initialAction);
 
@@ -66,12 +55,7 @@ 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 inputPlaceholder = computed(() => '说点什么吧...');
 
 const actions = [
   { label: '拉', value: 'terrible', emoji: '👎', score: 2, scoreType:1 },
@@ -101,10 +85,6 @@ const handleSend = () => {
   });
 };
 
-const handleCancelReply = () => {
-  emit('cancel-reply');
-};
-
 const resetComment = () => {
   commentText.value = '';
 };
@@ -178,42 +158,6 @@ 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

@@ -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>