From e73c2a98260dd2c90033c1df74b6d20bb8120a65 Mon Sep 17 00:00:00 2001
From: yangzhe <yangzhe@qq.com>
Date: Fri, 20 Mar 2026 17:18:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20=E4=B8=BA=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=91=E9=80=81=E8=80=85=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=B9=B6=E8=B0=83=E6=95=B4=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在消息内容上方显示发送者名称（AI 或用户）
- 调整消息容器布局，使用 flex 列布局确保名称和内容正确对齐
- 将 AI 消息的默认头像替换为专用 AI 头像
- 移除消息容器的换行设置，保持整体左右布局
---
 pages/chat/index.vue | 113 +++++++++++++++++++++++++++----------------
 1 file changed, 72 insertions(+), 41 deletions(-)

diff --git a/pages/chat/index.vue b/pages/chat/index.vue
index 3643007..83cd064 100644
--- a/pages/chat/index.vue
+++ b/pages/chat/index.vue
@@ -153,60 +153,77 @@
               :id="'msg-' + message.id"
             >
               <image
+                v-if="message.sendName === 'AI'"
+                class="ai-avatar"
+                src="/static/common/images/avatar_ai.png"
+                mode="scaleToFill"
+              />
+              <image
+                v-else
                 class="ai-avatar"
                 :src="receiverHeadSculptureUrl"
                 mode="scaleToFill"
               />
-              <view
-                class="message-content"
-                :class="{
-                  'message-content-structured':
-                    getStructuredMessageBlocks(message).length,
-                }"
-              >
+              <view class="message-content-wrapper">
+                <view class="message-sender-name">{{
+                  message.sendName || vuex_msgUser.name
+                }}</view>
                 <view
-                  v-if="getStructuredMessageBlocks(message).length"
-                  class="structured-message"
+                  class="message-content"
+                  :class="{
+                    'message-content-structured':
+                      getStructuredMessageBlocks(message).length,
+                  }"
                 >
                   <view
-                    v-for="(block, blockIndex) in getStructuredMessageBlocks(
-                      message,
-                    )"
-                    :key="`${message.id || index}-block-${blockIndex}`"
-                    class="structured-item"
-                    :class="`structured-item-${block.type}`"
+                    v-if="getStructuredMessageBlocks(message).length"
+                    class="structured-message"
                   >
-                    <text v-if="block.type === 'text'" class="structured-text">
-                      {{ block.value }}
-                    </text>
-                    <image
-                      v-else-if="block.type === 'image'"
-                      class="structured-image"
-                      :src="block.url"
-                      mode="widthFix"
-                      @click="previewMessageImage(block.url)"
-                    ></image>
                     <view
-                      v-else-if="block.type === 'file'"
-                      class="structured-file"
-                      @click="downloadMessageFile(block.url)"
+                      v-for="(block, blockIndex) in getStructuredMessageBlocks(
+                        message,
+                      )"
+                      :key="`${message.id || index}-block-${blockIndex}`"
+                      class="structured-item"
+                      :class="`structured-item-${block.type}`"
                     >
+                      <text
+                        v-if="block.type === 'text'"
+                        class="structured-text"
+                      >
+                        {{ block.value }}
+                      </text>
                       <image
-                        class="structured-file-icon"
-                        src="/static/common/images/icon-file.png"
-                        mode="scaleToFill"
+                        v-else-if="block.type === 'image'"
+                        class="structured-image"
+                        :src="block.url"
+                        mode="widthFix"
+                        @click="previewMessageImage(block.url)"
                       ></image>
-                      <text class="structured-file-name">{{ block.name }}</text>
-                      <u-icon
-                        name="download"
-                        size="36"
-                        color="#666666"
-                        class="structured-file-download"
-                      ></u-icon>
+                      <view
+                        v-else-if="block.type === 'file'"
+                        class="structured-file"
+                        @click="downloadMessageFile(block.url)"
+                      >
+                        <image
+                          class="structured-file-icon"
+                          src="/static/common/images/icon-file.png"
+                          mode="scaleToFill"
+                        ></image>
+                        <text class="structured-file-name">{{
+                          block.name
+                        }}</text>
+                        <u-icon
+                          name="download"
+                          size="36"
+                          color="#666666"
+                          class="structured-file-download"
+                        ></u-icon>
+                      </view>
                     </view>
                   </view>
+                  <markdown-viewer v-else :content="message.message" />
                 </view>
-                <markdown-viewer v-else :content="message.message" />
               </view>
             </view>
           </view>
@@ -675,7 +692,7 @@ export default {
 
       .message-left {
         justify-content: flex-start;
-        flex-wrap: wrap; /* 允许反馈区换行到消息下方 */
+        flex-wrap: nowrap; /* 不换行，整体左右排布 */
 
         .ai-avatar {
           width: 64rpx;
@@ -686,13 +703,27 @@ export default {
           flex-shrink: 0;
         }
 
+        .message-content-wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          max-width: 70%;
+        }
+
+        .message-sender-name {
+          font-size: 24rpx;
+          color: #999999;
+          margin-bottom: 8rpx;
+        }
+
         .message-content {
           background-color: #ffffff;
-          max-width: 70%;
           padding: 20rpx 24rpx;
           border-radius: 0 16rpx 16rpx 16rpx;
           font-size: 28rpx;
           line-height: 1.5;
+          width: 100%;
+          box-sizing: border-box;
 
           &.message-content-structured {
             background-color: transparent;