feat: repley

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;