feat(消息界面): 添加AI回答反馈功能(点赞/点踩)

pages/home/index/index.vue

@@ -151,7 +151,12 @@
                 src="/static/common/images/avatar_ai.png"
                 mode="scaleToFill"
               />
-              <view class="message-content">
+              <view
+                class="message-content"
+                :class="{
+                  'message-content-width': !message.isLoading,
+                }"
+              >
                 <!-- 加载动画 -->
                 <view v-if="message.isLoading" class="loading-dots">
                   <view class="dot"></view>
@@ -161,6 +166,39 @@
                 <!-- 正常消息内容 -->
                 <markdown-viewer v-else :content="message.message" />
               </view>
+
+              <!-- 回答反馈：点赞/点踩 -->
+              <view v-if="!message.isLoading" class="feedback-container">
+                <view class="feedback-box">
+                  <view
+                    class="feedback-btn"
+                    @click.stop="handleFeedback(message, true)"
+                  >
+                    <u-icon
+                      :name="
+                        message.isHelp === true ? 'thumb-up-fill' : 'thumb-up'
+                      "
+                      size="32"
+                      :color="message.isHelp === true ? '#4370fe' : '#bfbfbf'"
+                    ></u-icon>
+                  </view>
+                  <view class="feedback-divider"></view>
+                  <view
+                    class="feedback-btn"
+                    @click.stop="handleFeedback(message, false)"
+                  >
+                    <u-icon
+                      :name="
+                        message.isHelp === false
+                          ? 'thumb-down-fill'
+                          : 'thumb-down'
+                      "
+                      size="32"
+                      :color="message.isHelp === false ? '#4370fe' : '#bfbfbf'"
+                    ></u-icon>
+                  </view>
+                </view>
+              </view>
             </view>
           </block>
         </view>
@@ -616,6 +654,12 @@ export default {
       this.isLoadingMore = false;
       this.noMoreData = false;
 
+      // 刷新当前对话的消息详情
+      this.handleGetConversationDetail();
+    },
+
+    // 刷新当前对话的消息详情
+    handleGetConversationDetail() {
       this.$u.api
         .GetConversationDetail({
           "Item1.Id": this.currentConversationId,
@@ -770,6 +814,24 @@ export default {
         }
       });
     },
+
+    // 回答反馈：点赞/点踩
+    handleFeedback(message, isHelp) {
+      // 触发反馈事件，外部可根据id处理
+      console.log("thumb-up", message.id);
+      this.$u.api
+        .ModifyStatus({
+          id: message.id,
+          isHelp: isHelp,
+        })
+        .then((res) => {
+          if (res.succeed) {
+            this.$u.toast("操作成功");
+            // 刷新当前对话的消息详情
+            this.handleGetConversationDetail();
+          }
+        });
+    },
   },
 };
 </script>
@@ -1046,6 +1108,7 @@ export default {
 
       .message-left {
         justify-content: flex-start;
+        flex-wrap: wrap; /* 允许反馈区换行到消息下方 */
 
         .ai-avatar {
           width: 64rpx;
@@ -1058,7 +1121,7 @@ export default {
 
         .message-content {
           background-color: #ffffff;
-          max-width: 70%;
+          // width: 70%;
           padding: 20rpx 24rpx;
           border-radius: 0 16rpx 16rpx 16rpx;
           font-size: 28rpx;
@@ -1137,6 +1200,44 @@ export default {
             }
           }
         }
+
+        .message-content-width {
+          width: 70%;
+        }
+
+        /* 回答反馈容器，跟随左侧消息，右下角对齐 */
+        .feedback-container {
+          width: 70%;
+          margin-left: 80rpx; /* 头像宽度64rpx + 间距16rpx */
+          display: flex;
+          justify-content: flex-end;
+          margin-top: 16rpx;
+        }
+
+        .feedback-box {
+          display: flex;
+          align-items: center;
+          background-color: #ffffff;
+          padding: 4rpx 12rpx;
+          border-radius: 20rpx;
+          box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
+        }
+
+        .feedback-btn {
+          width: 60rpx;
+          height: 60rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .feedback-divider {
+          width: 2rpx;
+          height: 36rpx;
+          margin: 0 8rpx;
+          background-color: #e9edf7;
+          border-radius: 2rpx;
+        }
       }
 
       .message-right {