From 42563d7184c33cfd0c286649a3390815fb0de690 Mon Sep 17 00:00:00 2001
From: jinhhanhan <1683105490@qq.com>
Date: Sat, 31 Jan 2026 09:47:41 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E6=94=B9=E4=BA=86pages-tool/ai-c?=
 =?UTF-8?q?hat/ai-chat-message.vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages_tool/ai-chat/ai-chat-message.vue | 1225 ++++++++++++------------
 1 file changed, 634 insertions(+), 591 deletions(-)

diff --git a/pages_tool/ai-chat/ai-chat-message.vue b/pages_tool/ai-chat/ai-chat-message.vue
index a9f68fc..579da6e 100644
--- a/pages_tool/ai-chat/ai-chat-message.vue
+++ b/pages_tool/ai-chat/ai-chat-message.vue
@@ -1,17 +1,25 @@
 <template>
   <view class="ai-chat-container">
     <!-- 聊天消息列表 -->
-    <scroll-view class="chat-messages" scroll-y :scroll-top="scrollTop" @scroll="onScroll"
+    <scroll-view 
+      class="chat-messages" 
+      scroll-y 
+      :scroll-top="scrollTop"
+       @scroll="onScroll"
       :scroll-with-animation="false">
-
+      
       <!-- 加载更多历史消息 -->
       <view class="load-more" v-if="hasMoreHistory">
         <ns-loading :down-text="loadingText" :is-rotate="true" />
       </view>
-
+      
       <!-- 消息列表 -->
-      <view v-for="item in messagesWithKey" :key="item.__renderKey" class="message-item" :class="[item.role, { 'first-message': item.__index === 0 }]">
-
+      <view 
+        v-for="(message, index) in messages" 
+        :key="`msg-${message.id || message.timestamp}-${index}`"  
+        class="message-item"
+        :class="[message.role, { 'first-message': index === 0 }]">
+        
         <!-- 用户消息 -->
         <view v-if="message.role === 'user'" class="user-message">
           <view class="avatar">
@@ -24,9 +32,9 @@
             <view class="message-bubble">
               <text class="message-text">{{ message.content }}</text>
             </view>
-          </view>
+                      </view>
         </view>
-
+        
         <!-- AI消息 -->
         <view v-else class="ai-message">
           <view class="avatar">
@@ -41,7 +49,7 @@
               <view v-if="message.type === 'text'" class="text-content">
                 <rich-text :nodes="parseMarkdown(message.content)" />
               </view>
-
+              
               <!-- Markdown文档 -->
               <view v-else-if="message.type === 'markdown'" class="markdown-content">
                 <view class="markdown-header">
@@ -52,7 +60,7 @@
                   <rich-text :nodes="parseMarkdown(message.content)" />
                 </view>
               </view>
-
+              
               <!-- 文件链接 -->
               <view v-else-if="message.type === 'file'" class="file-content">
                 <view class="file-item" @click="previewFile(message)">
@@ -68,7 +76,7 @@
                   </view>
                 </view>
               </view>
-
+              
               <!-- 音频消息 -->
               <view v-else-if="message.type === 'audio'" class="audio-content">
                 <view class="audio-player">
@@ -77,21 +85,36 @@
                     <text class="audio-duration">{{ formatDuration(message.duration) }}</text>
                   </view>
                   <view class="audio-controls">
-                    <button class="play-btn" :class="{ playing: message.playing }" @click="toggleAudio(message)">
+                    <button 
+                      class="play-btn" 
+                      :class="{ playing: message.playing }"
+                      @click="toggleAudio(message)">
                       <text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text>
                     </button>
-                    <slider class="audio-slider" :value="message.currentTime || 0" :max="message.duration || 0"
-                      @changing="onAudioSliderChange" @change="onAudioSliderChangeEnd" activeColor="#8a9fb8"
-                      backgroundColor="#e8edf3" block-size="12" />
+                    <slider 
+                      class="audio-slider" 
+                      :value="message.currentTime || 0" 
+                      :max="message.duration || 0"
+                      @changing="onAudioSliderChange"
+                      @change="onAudioSliderChangeEnd"
+                      activeColor="#8a9fb8"
+                      backgroundColor="#e8edf3"
+                      block-size="12" />
                   </view>
                 </view>
               </view>
-
+              
               <!-- 视频消息 -->
               <view v-else-if="message.type === 'video'" class="video-content">
                 <view class="video-player">
-                  <video :src="message.url" :poster="message.cover" :controls="true" :autoplay="false"
-                    class="video-element" @play="onVideoPlay(message)" @pause="onVideoPause(message)">
+                  <video 
+                    :src="message.url" 
+                    :poster="message.cover"
+                    :controls="true"
+                    :autoplay="false"
+                    class="video-element"
+                    @play="onVideoPlay(message)"
+                    @pause="onVideoPause(message)">
                   </video>
                   <view class="video-info">
                     <text class="video-title">{{ message.title || '视频消息' }}</text>
@@ -99,7 +122,7 @@
                   </view>
                 </view>
               </view>
-
+              
               <!-- 跳转链接 -->
               <view v-else-if="message.type === 'link'" class="link-content">
                 <view class="link-card" @click="openLink(message)">
@@ -113,7 +136,7 @@
                   </view>
                 </view>
               </view>
-
+              
               <!-- 商品卡片 -->
               <view v-else-if="message.type === 'product'" class="product-content">
                 <view class="product-card" @click="viewProduct(message)">
@@ -127,7 +150,7 @@
                   </view>
                 </view>
               </view>
-
+              
               <!-- 加载中状态 -->
               <view v-else-if="message.type === 'loading'" class="loading-content">
                 <view class="loading-dots">
@@ -137,21 +160,25 @@
                 </view>
                 <text class="loading-text">AI正在思考中...</text>
               </view>
-
+              
               <!-- 操作按钮 -->
               <view class="message-actions" v-if="message.actions && message.actions.length > 0">
-                <button v-for="action in message.actions" :key="action.id" class="action-btn"
-                  :class="[`iconfont`, action.icon, action.type]" @click="handleAction(action, message)">
+                <button 
+                  v-for="action in message.actions" 
+                  :key="action.id"
+                  class="action-btn"
+                  :class="[`iconfont`, action.icon, action.type]"
+                  @click="handleAction(action, message)">
                   {{ action.text }}
                 </button>
               </view>
             </view>
-
+            
           </view>
         </view>
       </view>
     </scroll-view>
-
+    
     <!-- 输入区域 -->
     <view class="input-area">
       <view class="input-tools">
@@ -170,19 +197,29 @@
           <text class="iconfont icon-edit">✏️</text>
         </button>
       </view>
-
+      
       <view class="input-container">
-        <textarea v-model="inputText" class="message-input" placeholder="请输入您的问题..." :maxlength="500"
-          :auto-height="true" :show-confirm-bar="false" @confirm="sendMessage" @input="onInput" />
-
+        <textarea 
+          v-model="inputText" 
+          class="message-input"
+          placeholder="请输入您的问题..."
+          :maxlength="500"
+          :auto-height="true"
+          :show-confirm-bar="false"
+          @confirm="sendMessage"
+          @input="onInput" />
+        
         <!-- 发送按钮 -->
-        <button class="send-btn" :class="{ disabled: !inputText.trim() }" @click="sendMessage"
+        <button 
+          class="send-btn" 
+          :class="{ disabled: !inputText.trim() }"
+          @click="sendMessage"
           :disabled="!inputText.trim()">
           <text>发送</text>
         </button>
       </view>
     </view>
-
+    
     <!-- 更多工具面板 -->
     <view v-if="showToolsPanel" class="tools-popup">
       <view class="tools-mask" @click="hideToolsPanel"></view>
@@ -221,7 +258,7 @@
         </view>
       </view>
     </view>
-
+    
     <!-- 语音输入面板 -->
     <view v-if="enalbeVoicePanelShow" class="voice-popup">
       <view class="voice-mask" @click="hideVoicePanel"></view>
@@ -234,7 +271,11 @@
         </view>
         <view class="voice-content">
           <view class="voice-wave" :class="{ recording: voiceInputing }">
-            <view v-for="i in 8" :key="i" class="wave-bar" :style="{ animationDelay: (i * 0.1) + 's' }"></view>
+            <view 
+              v-for="i in 8" 
+              :key="i" 
+              class="wave-bar"
+              :style="{ animationDelay: (i * 0.1) + 's' }"></view>
           </view>
           <text class="voice-tip">{{ voiceInputing ? '正在录音，松开结束' : '点击开始录音' }}</text>
         </view>
@@ -245,7 +286,7 @@
         </view>
       </view>
     </view>
-
+    
     <!-- 头像选择弹窗 -->
     <view v-if="showAvatarSelector" class="avatar-selector-popup">
       <view class="avatar-selector-mask" @click="closeAvatarSelector"></view>
@@ -277,7 +318,7 @@
         </view>
       </view>
     </view>
-
+    
     <!-- 新增：昵称编辑弹窗 -->
     <view v-if="showNicknameEditor" class="nickname-editor-popup">
       <view class="nickname-editor-mask" @click="closeNicknameEditor"></view>
@@ -290,15 +331,23 @@
         </view>
         <view class="nickname-editor-content">
           <view class="nickname-input-container">
-            <input v-model="tempNickname" class="nickname-input" placeholder="请输入您的新昵称" :maxlength="12" type="text" />
+            <input 
+              v-model="tempNickname" 
+              class="nickname-input"
+              placeholder="请输入您的新昵称"
+              :maxlength="12"
+              type="text" />
           </view>
           <view class="nickname-tip">昵称长度限制1-12个字符，仅自己可见</view>
           <view class="nickname-editor-actions">
             <button class="nickname-action-btn cancel" @click="closeNicknameEditor">
               <text>取消</text>
             </button>
-            <button class="nickname-action-btn confirm" :class="{ disabled: !tempNickname.trim() }"
-              :disabled="!tempNickname.trim()" @click="saveNickname">
+            <button 
+              class="nickname-action-btn confirm" 
+              :class="{ disabled: !tempNickname.trim() }"
+              :disabled="!tempNickname.trim()"
+              @click="saveNickname">
               <text>保存</text>
             </button>
           </view>
@@ -349,7 +398,7 @@ export default {
       default: 20
     }
   },
-  data() {
+  data(){
     return {
       messages: [],
       inputText: '',
@@ -383,47 +432,42 @@ export default {
       currentConversationId: null,
       isAIServiceAvailable: true,
       aiServiceError: null,
-      isLoadingHistory: false, // 新增：标记历史加载状态
+	  isLoadingHistory: false, // 新增：标记历史加载状态
       shouldScrollToBottom: false,
-      scrollTimer: null,
-      lastScrollTop: 0,
-      historyOffset: 0,
-      isFetchingHistory: false
-    }
-  },
-  computed: {
-    // 为每条消息生成兼容小程序的唯一 key
-    messagesWithKey() {
-      return this.messages.map((msg, idx) => {
-        const uniqueId = msg.id || msg.timestamp || idx;
-        return {
-          ...msg,
-          __renderKey: `msg_${uniqueId}_${idx}`,
-          __index: idx  // 保留原始索引，用于判断 first-message 等
-        };
-      });
+	   scrollTimer: null,
+	  lastScrollTop: 0,
+	  historyOffset: 0,
+	   isFetchingHistory: false
     }
   },
   onShow() {
-    // 优先读取本地缓存的会话 ID
-    const localConvId = this.getConversationIdFromLocal();
-    if (localConvId) {
-      this.currentConversationId = localConvId;
-      aiService.setConversationId(localConvId);
-    } else {
-      this.currentConversationId = aiService.getConversationId();
-    }
-    // 加载初始历史后，同步historyOffset
-    this.loadChatHistoryIfExist().then(() => {
-      // 初始历史条数作为偏移量
-      this.historyOffset = this.messages.length;
-    });
-    // 移除：this.historyOffset = 0;（避免覆盖初始历史的偏移量）
-  },
-  // 新增：组件销毁时清除防抖定时器
-  beforeDestroy() {
-    if (this.scrollTimer) clearTimeout(this.scrollTimer);
-  },
+	  // 如果不是 AI 客服，立即退出并跳转
+	    if (customerServiceType !== 'ai') {
+	      uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
+	      setTimeout(() => {
+	        uni.navigateBack({ delta: 1 }); // 或 redirectTo 首页
+	      }, 1000);
+	      return; // ⚠️ 关键：阻止后续初始化
+	    }
+           // 优先读取本地缓存的会话 ID
+           const localConvId = this.getConversationIdFromLocal();
+           if (localConvId) {
+             this.currentConversationId = localConvId;
+             aiService.setConversationId(localConvId);
+           } else {
+             this.currentConversationId = aiService.getConversationId();
+           }
+           // 加载初始历史后，同步historyOffset
+               this.loadChatHistoryIfExist().then(() => {
+                 // 初始历史条数作为偏移量
+                 this.historyOffset = this.messages.length;
+               });
+               // 移除：this.historyOffset = 0;（避免覆盖初始历史的偏移量）
+             },
+             // 新增：组件销毁时清除防抖定时器
+             beforeDestroy() {
+               if (this.scrollTimer) clearTimeout(this.scrollTimer);
+             },
   created() {
     this.messages = [...this.initialMessages]
     this.messageId = this.messages.length
@@ -432,42 +476,42 @@ export default {
     this.initUserAvatarData()
     // 初始化用户昵称（缓存优先）
     this.initUserNicknameData()
-    this.currentConversationId = aiService.getConversationId();
-  },
-  mounted() {
-    // 初始加载时滚底（仅一次）
-    this.$nextTick(() => {
-      this.scrollToBottom()
-    })
+	this.currentConversationId = aiService.getConversationId();
   },
+   mounted() {
+      // 初始加载时滚底（仅一次）
+      this.$nextTick(() => {
+        this.scrollToBottom()
+      })
+    },
   watch: {
-    messages: {
-      handler() {
-        this.$nextTick(() => {
-          // 仅当不是加载历史、且需要滚底时，才执行滚底
-          if (!this.isLoadingHistory && this.shouldScrollToBottom) {
-            this.scrollToBottom()
-            // 滚底后重置状态，避免重复触发
-            this.shouldScrollToBottom = false
-          }
-        })
-      },
+      messages: {
+        handler() {
+          this.$nextTick(() => {
+            // 仅当不是加载历史、且需要滚底时，才执行滚底
+            if (!this.isLoadingHistory && this.shouldScrollToBottom) {
+              this.scrollToBottom()
+              // 滚底后重置状态，避免重复触发
+              this.shouldScrollToBottom = false
+            }
+          })
+        },
       deep: true
     }
   },
   methods: {
-    // 【新增：会话 ID 本地缓存方法】
-    saveConversationIdToLocal(convId) {
-      if (convId) {
-        uni.setStorageSync('dify_conversation_id', convId);
-      }
-    },
-    getConversationIdFromLocal() {
-      return uni.getStorageSync('dify_conversation_id') || null;
-    },
-    clearConversationIdFromLocal() {
-      uni.removeStorageSync('dify_conversation_id');
-    },
+	  // 【新增：会话 ID 本地缓存方法】
+	   saveConversationIdToLocal(convId) {
+	      if (convId) {
+	        uni.setStorageSync('dify_conversation_id', convId);
+	      }
+	    },
+	    getConversationIdFromLocal() {
+	      return uni.getStorageSync('dify_conversation_id') || null;
+	    },
+	    clearConversationIdFromLocal() {
+	      uni.removeStorageSync('dify_conversation_id');
+	    },
     // 初始化音频上下文
     initAudioContext() {
       // #ifdef H5
@@ -476,114 +520,114 @@ export default {
       }
       // #endif
     },
-    onScroll(e) {
-      const currentScrollTop = e.detail.scrollTop;
-      this.lastScrollTop = currentScrollTop;
-      // 防抖处理：50ms内只执行一次，避免频繁触发
-      if (this.scrollTimer) clearTimeout(this.scrollTimer);
-      this.scrollTimer = setTimeout(() => {
-        // 滚动到顶部附近（<20px）、不在加载中、显示加载更多时，触发加载
-        if (currentScrollTop < 20 && !this.isLoadingHistory && this.showLoadMore) {
-          this.loadMoreHistory();
-        }
-      }, 50);
-    },
+        onScroll(e) {
+          const currentScrollTop = e.detail.scrollTop;
+          this.lastScrollTop = currentScrollTop;
+          // 防抖处理：50ms内只执行一次，避免频繁触发
+          if (this.scrollTimer) clearTimeout(this.scrollTimer);
+          this.scrollTimer = setTimeout(() => {
+            // 滚动到顶部附近（<20px）、不在加载中、显示加载更多时，触发加载
+            if (currentScrollTop < 20 && !this.isLoadingHistory && this.showLoadMore) {
+              this.loadMoreHistory();
+            }
+          }, 50);
+        },
     // 初始化用户头像（支持缓存持久化）
     initUserAvatarData() {
       // 1. 优先读取本地缓存的头像
       const cachedAvatar = uni.getStorageSync('user_avatar')
-
+      
       if (cachedAvatar) {
         this.localUserAvatar = cachedAvatar
-      }
+      } 
       // 2. 无缓存时，使用外部传入的初始头像
       else if (this.initUserAvatar) {
         this.localUserAvatar = this.initUserAvatar
         // 缓存初始头像
         uni.setStorageSync('user_avatar', this.initUserAvatar)
-      }
+      } 
       // 3. 最后使用默认头像
       else {
         this.localUserAvatar = this.defaultAvatar
       }
     },
     // 👇 新增：加载历史记录
-    async loadChatHistoryIfExist() {
-      const convId = aiService.getConversationId();
-      if (convId) {
-        try {
-          const history = await aiService.getChatHistory();
-          if (!history || !Array.isArray(history.messages)) {
-            console.warn('历史记录为空或格式无效');
-            return;
-          }
-
-          this.messages = history.messages.map(msg => {
-            let content = '';
-            if (msg.role === 'user') {
-              content = msg.query || (typeof msg.inputs === 'string' ? msg.inputs : JSON.stringify(msg.inputs || '')) || '';
-            } else {
-              content = msg.answer || '';
-            }
-            return {
-              id: msg.message_id || (Date.now() + Math.random() * 10000),
-              role: msg.role === 'user' ? 'user' : 'assistant',
-              content: content,
-              timestamp: msg.created_at,
-              actions: msg.role !== 'user' ? [
-                { id: 1, text: '有帮助', type: 'like' },
-                { id: 2, text: '没帮助', type: 'dislike' }
-              ] : []
-            };
-          });
-        } catch (error) {
-          console.error('加载历史记录失败:', error);
-          aiService.clearConversationId();
-          this.clearConversationIdFromLocal();
-          this.currentConversationId = null;
-        }
-      }
-    },
+   async loadChatHistoryIfExist() {
+     const convId = aiService.getConversationId();
+     if (convId) {
+       try {
+         const history = await aiService.getChatHistory();
+         if (!history || !Array.isArray(history.messages)) {
+           console.warn('历史记录为空或格式无效');
+           return;
+         }
+   
+         this.messages = history.messages.map(msg => {
+           let content = '';
+           if (msg.role === 'user') {
+             content = msg.query || (typeof msg.inputs === 'string' ? msg.inputs : JSON.stringify(msg.inputs || '')) || '';
+           } else {
+             content = msg.answer || '';
+           }
+           return {
+             id: msg.message_id || (Date.now() + Math.random() * 10000),
+             role: msg.role === 'user' ? 'user' : 'assistant',
+             content: content,
+             timestamp: msg.created_at,
+             actions: msg.role !== 'user' ? [
+               { id: 1, text: '有帮助', type: 'like' },
+               { id: 2, text: '没帮助', type: 'dislike' }
+             ] : []
+           };
+         });
+       } catch (error) {
+         console.error('加载历史记录失败:', error);
+         aiService.clearConversationId();
+         this.clearConversationIdFromLocal();
+         this.currentConversationId = null;
+       }
+     }
+   },
     // 新增：初始化用户昵称（支持缓存持久化）
     initUserNicknameData() {
       // 1. 优先读取本地缓存的昵称
       const cachedNickname = uni.getStorageSync('user_nickname')
-
+      
       if (cachedNickname) {
         this.localUserNickname = cachedNickname
-      }
+      } 
       // 2. 无缓存时，使用外部传入的初始昵称
       else if (this.initUserNickname) {
         this.localUserNickname = this.initUserNickname
         // 缓存初始昵称
         uni.setStorageSync('user_nickname', this.initUserNickname)
-      }
+      } 
       // 3. 最后使用默认昵称
       else {
         this.localUserNickname = this.defaultNickname
       }
     },
-
+    
     // 打开头像选择弹窗
     openAvatarSelector() {
       this.showAvatarSelector = true
     },
-
+    
     // 关闭头像选择弹窗
     closeAvatarSelector() {
       this.showAvatarSelector = false
     },
-
+    
     // 从相册选择头像
     chooseAvatarFromAlbum() {
       this.selectAvatar('album')
     },
-
+    
     // 拍照上传头像
     takeAvatarWithCamera() {
       this.selectAvatar('camera')
     },
-
+    
     // 统一头像选择方法
     selectAvatar(sourceType) {
       uni.chooseImage({
@@ -592,19 +636,19 @@ export default {
         sourceType: [sourceType], // 来源：相册/相机
         success: (res) => {
           const tempFilePath = res.tempFilePaths[0]
-
+          
           // 1. 本地预览更新
           this.localUserAvatar = tempFilePath
-
+          
           // 2. 持久化缓存（支持页面刷新后保留）
           uni.setStorageSync('user_avatar', tempFilePath)
-
+          
           // 3. 通知父组件（可选，用于同步到服务器等场景）
           this.$emit('avatar-changed', tempFilePath)
-
+          
           // 4. 关闭弹窗
           this.closeAvatarSelector()
-
+          
           // 5. 提示成功
           uni.showToast({
             title: '头像更换成功',
@@ -631,37 +675,37 @@ export default {
         }
       })
     },
-
+    
     // 新增：打开昵称编辑弹窗
     openNicknameEditor() {
       // 初始化临时昵称值为当前昵称
       this.tempNickname = this.localUserNickname
       this.showNicknameEditor = true
     },
-
+    
     // 新增：关闭昵称编辑弹窗
     closeNicknameEditor() {
       this.showNicknameEditor = false
       // 清空临时值
       this.tempNickname = ''
     },
-
+    
     // 新增：保存用户昵称
     saveNickname() {
       if (!this.tempNickname.trim()) return
-
+      
       // 1. 更新本地昵称
       this.localUserNickname = this.tempNickname.trim()
-
+      
       // 2. 持久化缓存（支持页面刷新后保留）
       uni.setStorageSync('user_nickname', this.localUserNickname)
-
+      
       // 3. 通知父组件（可选，用于同步到服务器等场景）
       this.$emit('nickname-changed', this.localUserNickname)
-
+      
       // 4. 关闭弹窗
       this.closeNicknameEditor()
-
+      
       // 5. 提示成功
       uni.showToast({
         title: '昵称修改成功',
@@ -669,11 +713,11 @@ export default {
         duration: 1500
       })
     },
-
+    
     // 发送消息
     async sendMessage() {
       if (!this.inputText.trim()) return
-
+      
       const userMessage = {
         id: ++this.messageId,
         role: 'user',
@@ -681,10 +725,10 @@ export default {
         content: this.inputText.trim(),
         timestamp: Date.now()
       }
-      this.shouldScrollToBottom = true
+       this.shouldScrollToBottom = true
       this.messages.push(userMessage)
       this.inputText = ''
-
+      
       // 显示AI正在输入
       const loadingMessage = {
         id: ++this.messageId,
@@ -695,29 +739,29 @@ export default {
       }
       this.shouldScrollToBottom = true
       this.messages.push(loadingMessage)
-
+      
       try {
         // 检查AI服务状态
         const status = await aiService.getServiceStatus()
         this.isAIServiceAvailable = status.available
-
+        
         if (!this.isAIServiceAvailable) {
           throw new Error('AI服务暂不可用')
         }
-
+        
         // 使用AI服务获取回复
         if (this.enableStreaming) {
           await this.sendStreamMessage(userMessage.content)
         } else {
           await this.sendNormalMessage(userMessage.content)
         }
-
+        
       } catch (error) {
         console.error('AI服务调用失败:', error)
-
+        
         // 移除加载状态
         this.messages = this.messages.filter(msg => msg.type !== 'loading')
-
+        
         // 显示错误消息
         const errorMessage = {
           id: ++this.messageId,
@@ -733,28 +777,28 @@ export default {
         this.messages.push(errorMessage)
         this.$emit('ai-response', errorMessage)
       }
-
+      
       // 触发消息发送事件
       this.$emit('message-sent', userMessage)
     },
-
+    
     // 发送普通消息
     async sendNormalMessage(userMessage) {
       const response = await aiService.sendMessage(userMessage, {
         conversationId: this.currentConversationId,
         stream: false
       })
-
+      
       // 移除加载状态
       this.messages = this.messages.filter(msg => msg.type !== 'loading')
-
+      
       // 更新会话ID
       if (response.conversationId) {
         this.currentConversationId = response.conversationId;
-        aiService.setConversationId(response.conversationId);
-        this.saveConversationIdToLocal(response.conversationId);
+		aiService.setConversationId(response.conversationId);
+		  this.saveConversationIdToLocal(response.conversationId);
       }
-
+      
       const aiMessage = {
         id: ++this.messageId,
         role: 'ai',
@@ -772,67 +816,123 @@ export default {
       this.messages.push(aiMessage)
       this.$emit('ai-response', aiMessage)
     },
-
+    
     // 发送流式消息
-    async sendStreamMessage(userMessage) {
-      // 创建流式消息对象
-      const streamMessage = {
-        id: ++this.messageId,
-        role: 'ai',
-        type: 'text',
-        content: '',
-        timestamp: Date.now(),
-        isStreaming: true
-      }
-
-      // 移除加载状态，添加流式消息
-      this.messages = this.messages.filter(msg => msg.type !== 'loading')
-      this.shouldScrollToBottom = true
-      this.messages.push(streamMessage)
-
-      // 开始流式响应
-      await aiService.sendStreamMessage(
-        userMessage,
-        // 流式数据回调
-        (chunk) => {
-          streamMessage.content += chunk
-          this.$forceUpdate() // 或 this.$nextTick()
-        },
-        // 完成回调：处理对象或字符串
-        (completeResult) => {
-          let finalContent = '';
-          let convId = '';
-
-          // 判断是对象还是字符串
-          if (typeof completeResult === 'string') {
-            finalContent = completeResult;
-          } else {
-            finalContent = completeResult.content || '';
-            convId = completeResult.conversation_id || ''; // 👈 关键：提取 conversation_id
-          }
-
-          // 更新消息状态
-          streamMessage.isStreaming = false;
-          streamMessage.content = finalContent;
-
-          // 添加操作按钮
-          streamMessage.actions = [
-            { id: 1, text: '有帮助', type: 'like' },
-            { id: 2, text: '没帮助', type: 'dislike' }
-          ];
-
-          //  保存 conversation_id 到本地
-          if (convId) {
-            aiService.setConversationId(convId);
-          }
-
-          // 触发事件
-          this.$emit('ai-response', streamMessage);
-          this.saveConversationIdToLocal(convId);
-          this.currentConversationId = convId;
-        }
-      );
-    },
+ // 发送流式消息（自动适配 H5 / 微信小程序）
+ async sendStreamMessage(userMessage) {
+   // 创建流式消息对象
+   const streamMessage = {
+     id: ++this.messageId,
+     role: 'ai',
+     type: 'text',
+     content: '',
+     timestamp: Date.now(),
+     isStreaming: true
+   };
+ 
+   // 移除加载状态，添加流式消息
+   this.messages = this.messages.filter(msg => msg.type !== 'loading');
+   this.shouldScrollToBottom = true;
+   this.messages.push(streamMessage);
+ 
+   try {
+     // #ifdef H5
+     // ===== H5: 使用 POST + 流式 (fetch readable stream) =====
+     await aiService.sendHttpStream(
+       userMessage,
+       (chunk) => {
+         // 实时更新内容
+         streamMessage.content += chunk;
+         this.$forceUpdate(); // 强制更新视图
+       },
+       (completeResult) => {
+         // 流结束回调
+         let finalContent = '';
+         let convId = '';
+ 
+         if (typeof completeResult === 'string') {
+           finalContent = completeResult;
+         } else {
+           finalContent = completeResult.content || '';
+           convId = completeResult.conversation_id || '';
+         }
+ 
+         // 更新最终内容
+         streamMessage.isStreaming = false;
+         streamMessage.content = finalContent;
+ 
+         // 添加操作按钮
+         streamMessage.actions = [
+           { id: 1, text: '有帮助', type: 'like' },
+           { id: 2, text: '没帮助', type: 'dislike' }
+         ];
+ 
+         // 保存会话 ID
+         if (convId) {
+           this.currentConversationId = convId;
+           aiService.setConversationId(convId);
+           this.saveConversationIdToLocal(convId);
+         }
+ 
+         // 触发事件
+         this.$emit('ai-response', streamMessage);
+       }
+     );
+     // #endif
+ 
+     // #ifdef MP-WEIXIN
+     // ===== 微信小程序: 使用 WebSocket =====
+     await aiService.sendStreamMessage(
+       userMessage,
+       (chunk) => {
+         // 实时更新内容
+         streamMessage.content += chunk;
+         this.$forceUpdate();
+       },
+       (completeResult) => {
+         // 流结束回调
+         let finalContent = completeResult?.content || '';
+         let convId = completeResult?.conversation_id || '';
+ 
+         // 更新最终内容
+         streamMessage.isStreaming = false;
+         streamMessage.content = finalContent;
+ 
+         // 添加操作按钮
+         streamMessage.actions = [
+           { id: 1, text: '有帮助', type: 'like' },
+           { id: 2, text: '没帮助', type: 'dislike' }
+         ];
+ 
+         // 保存会话 ID
+         if (convId) {
+           this.currentConversationId = convId;
+           aiService.setConversationId(convId);
+           this.saveConversationIdToLocal(convId);
+         }
+ 
+         // 触发事件
+         this.$emit('ai-response', streamMessage);
+       }
+     );
+     // #endif
+   } catch (error) {
+     console.error('流式请求失败:', error);
+     // 移除流式消息
+     this.messages = this.messages.filter(msg => msg.id !== streamMessage.id);
+     // 显示错误
+     const errorMsg = {
+       id: ++this.messageId,
+       role: 'ai',
+       type: 'text',
+       content: '抱歉，服务暂时不可用，请稍后重试。',
+       timestamp: Date.now(),
+       actions: [{ id: 1, text: '重试', type: 'retry' }]
+     };
+     this.messages.push(errorMsg);
+     this.$emit('ai-response', errorMsg);
+   }
+ },
     generateAIResponse(userMessage) {
       const responses = {
         '你好': '您好！我是AI智能客服，很高兴为您服务！有什么可以帮助您的吗？',
@@ -848,12 +948,12 @@ export default {
       }
       return `感谢您的咨询！关于"${userMessage}"的问题，我们的专业客服会尽快为您解答。您也可以查看我们的帮助文档获取更多信息。`;
     },
-
-
+  
+    
     // 解析Markdown
     parseMarkdown(content) {
       if (!content) return ''
-
+      
       // 简单的Markdown解析
       let html = content
         .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 粗体
@@ -861,16 +961,16 @@ export default {
         .replace(/`(.*?)`/g, '<code>$1</code>') // 代码
         .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>') // 链接
         .replace(/\n/g, '<br>') // 换行
-
+      
       return html
     },
-
+    
     // 格式化时间
     formatTime(timestamp) {
       const date = new Date(timestamp)
       const now = new Date()
       const diff = now - date
-
+      
       if (diff < 60000) { // 1分钟内
         return '刚刚'
       } else if (diff < 3600000) { // 1小时内
@@ -878,12 +978,12 @@ export default {
       } else if (diff < 86400000) { // 1天内
         return Math.floor(diff / 3600000) + '小时前'
       } else {
-        return date.getMonth() + 1 + '月' + date.getDate() + '日 ' +
-          date.getHours().toString().padStart(2, '0') + ':' +
-          date.getMinutes().toString().padStart(2, '0')
+        return date.getMonth() + 1 + '月' + date.getDate() + '日 ' + 
+               date.getHours().toString().padStart(2, '0') + ':' + 
+               date.getMinutes().toString().padStart(2, '0')
       }
     },
-
+    
     // 格式化文件大小
     formatFileSize(bytes) {
       if (!bytes) return '0B'
@@ -892,7 +992,7 @@ export default {
       const i = Math.floor(Math.log(bytes) / Math.log(k))
       return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + sizes[i]
     },
-
+    
     // 格式化时长
     formatDuration(seconds) {
       if (!seconds) return '00:00'
@@ -900,110 +1000,110 @@ export default {
       const secs = Math.floor(seconds % 60)
       return mins.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0')
     },
-
+    
     // 滚动到底部
     scrollToBottom() {
       setTimeout(() => {
         this.scrollTop = 999999
       }, 100)
     },
-
+    
     // 加载更多历史消息
-    async loadMoreHistory() {
-      if (!this.currentConversationId) {
-        this.currentConversationId = this.getConversationIdFromLocal();
-        aiService.setConversationId(this.currentConversationId);
-      }
-      // 防止重复加载
-      if (!this.showLoadMore || !this.currentConversationId || this.isLoadingHistory) {
-        return;
-      }
-      this.isFetchingHistory = true;
-      this.isLoadingHistory = true;
-      this.loadingText = '加载历史消息中...';
-      this.hasMoreHistory = true;
-
-      try {
-        // 关键修改：用独立的historyOffset作为偏移量，不再依赖messages.length
-        const response = await aiService.getConversationHistory({
-          conversation_id: this.currentConversationId,
-          limit: 20,
-          offset: this.historyOffset // 改用独立偏移量
-        });
-
-        if (response.success && Array.isArray(response.messages) && response.messages.length > 0) {
-          const historyMessages = response.messages.map(msg => ({
-            id: msg.id || `history-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-            role: msg.role === 'user' ? 'user' : 'ai',
-            type: 'text',
-            content: msg.content,
-            timestamp: msg.create_time * 1000
-          }));
-
-          // 1. 记录新增消息数量
-          const newMsgCount = historyMessages.length;
-          // 2. 添加到消息列表开头
-          this.messages = [...historyMessages, ...this.messages];
-          // 3. 更新历史偏移量（累加，不是覆盖）
-          this.historyOffset += newMsgCount;
-
-          // 4. 等待DOM渲染后，精准计算滚动位置
-          await this.$nextTick();
-          // 获取新增消息的实际DOM高度
-          const query = uni.createSelectorQuery().in(this);
-          const heightPromises = [];
-          for (let i = 0; i < newMsgCount; i++) {
-            heightPromises.push(new Promise(resolve => {
-              query.select(`.message-item:nth-child(${i + 1})`).boundingClientRect(rect => {
-                resolve(rect ? rect.height + 32 : 0); // 加上消息间距（32rpx）
-              }).exec();
-            }));
-          }
-          // 计算总高度
-          const heights = await Promise.all(heightPromises);
-          const totalNewHeight = heights.reduce((sum, h) => sum + h, 0);
-          // 5. 设置scrollTop，保持滚动条在顶部附近
-          this.scrollTop = totalNewHeight;
-        } else {
-          // 无更多历史
-          this.showLoadMore = false;
-        }
-      } catch (error) {
-        console.error('加载历史失败:', error);
-        uni.showToast({ title: '加载历史失败', icon: 'none' });
-        this.showLoadMore = false;
-      } finally {
-        this.isLoadingHistory = false;
-        this.isFetchingHistory = false;
-        this.hasMoreHistory = false;
-        this.loadingText = '加载更多历史消息';
-      }
-    },
+ async loadMoreHistory() {
+       if (!this.currentConversationId) {
+         this.currentConversationId = this.getConversationIdFromLocal();
+         aiService.setConversationId(this.currentConversationId);
+       }
+       // 防止重复加载
+       if (!this.showLoadMore || !this.currentConversationId || this.isLoadingHistory) {
+         return;
+       }
+       this.isFetchingHistory = true;
+       this.isLoadingHistory = true;
+       this.loadingText = '加载历史消息中...';
+       this.hasMoreHistory = true;
+ 
+       try {
+         // 关键修改：用独立的historyOffset作为偏移量，不再依赖messages.length
+         const response = await aiService.getConversationHistory({
+           conversation_id: this.currentConversationId,
+           limit: 20,
+           offset: this.historyOffset // 改用独立偏移量
+         });
+ 
+         if (response.success && Array.isArray(response.messages) && response.messages.length > 0) {
+           const historyMessages = response.messages.map(msg => ({
+             id: msg.id || `history-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+             role: msg.role === 'user' ? 'user' : 'ai',
+             type: 'text',
+             content: msg.content,
+             timestamp: msg.create_time * 1000
+           }));
+ 
+           // 1. 记录新增消息数量
+           const newMsgCount = historyMessages.length;
+           // 2. 添加到消息列表开头
+           this.messages = [...historyMessages, ...this.messages];
+           // 3. 更新历史偏移量（累加，不是覆盖）
+           this.historyOffset += newMsgCount;
+ 
+           // 4. 等待DOM渲染后，精准计算滚动位置
+           await this.$nextTick();
+           // 获取新增消息的实际DOM高度
+           const query = uni.createSelectorQuery().in(this);
+           const heightPromises = [];
+           for (let i = 0; i < newMsgCount; i++) {
+             heightPromises.push(new Promise(resolve => {
+               query.select(`.message-item:nth-child(${i + 1})`).boundingClientRect(rect => {
+                 resolve(rect ? rect.height + 32 : 0); // 加上消息间距（32rpx）
+               }).exec();
+             }));
+           }
+           // 计算总高度
+           const heights = await Promise.all(heightPromises);
+           const totalNewHeight = heights.reduce((sum, h) => sum + h, 0);
+           // 5. 设置scrollTop，保持滚动条在顶部附近
+           this.scrollTop = totalNewHeight;
+         } else {
+           // 无更多历史
+           this.showLoadMore = false;
+         }
+       } catch (error) {
+         console.error('加载历史失败:', error);
+         uni.showToast({ title: '加载历史失败', icon: 'none' });
+         this.showLoadMore = false;
+       } finally {
+         this.isLoadingHistory = false;
+		  this.isFetchingHistory = false;
+         this.hasMoreHistory = false;
+         this.loadingText = '加载更多历史消息';
+       }
+     },
     // 显示更多工具
     showMoreTools() {
       this.showToolsPanel = true
     },
-
+    
     // 隐藏工具面板
     hideToolsPanel() {
       this.showToolsPanel = false
     },
-
+    
     // 显示语音面板
     showVoicePanel() {
       this.enalbeVoicePanelShow = true
     },
-
+    
     // 隐藏语音面板
     hideVoicePanel() {
       this.enalbeVoicePanelShow = false
       this.voiceInputing = false
     },
-
+    
     // 切换语音输入
     toggleVoiceInput() {
       this.voiceInputing = !this.voiceInputing
-
+      
       if (this.voiceInputing) {
         this.showVoicePanel()
         this.startVoiceInput()
@@ -1012,7 +1112,7 @@ export default {
         this.hideVoicePanel()
       }
     },
-
+    
     // 开始语音输入
     startVoiceInput() {
       // #ifdef H5
@@ -1032,21 +1132,21 @@ export default {
       }
       // #endif
     },
-
+    
     // 停止语音输入
     stopVoiceInput() {
       this.voiceInputing = false
       // 停止语音输入逻辑
     },
-
+    
     // 预览文件
     previewFile(message) {
       uni.showLoading({ title: '打开文件中...' })
-
+      
       // #ifdef H5
       window.open(message.url, '_blank')
       // #endif
-
+      
       // #ifdef APP-PLUS
       plus.runtime.openFile(message.url, {
         error: (e) => {
@@ -1057,7 +1157,7 @@ export default {
         }
       })
       // #endif
-
+      
       uni.hideLoading()
       this.$emit('file-preview', message)
     },
@@ -1069,69 +1169,69 @@ export default {
         this.playAudio(message)
       }
     },
-
+    
     // 播放音频
     playAudio(message) {
       if (this.currentAudio && this.currentAudio !== message) {
         this.pauseAudio(this.currentAudio)
       }
-
+      
       // 模拟音频播放
       message.playing = true
       message.currentTime = message.currentTime || 0
-
+      
       this.currentAudio = message
       this.$emit('audio-play', message)
     },
-
+    
     // 暂停音频
     pauseAudio(message) {
       message.playing = false
       this.$emit('audio-pause', message)
     },
-
+    
     // 音频滑块变化
     onAudioSliderChange(e) {
       if (this.currentAudio) {
         this.currentAudio.currentTime = e.detail.value
       }
     },
-
+    
     onAudioSliderChangeEnd(e) {
       if (this.currentAudio) {
         this.currentAudio.currentTime = e.detail.value
         this.$emit('audio-seek', this.currentAudio)
       }
     },
-
+    
     // 视频播放
     onVideoPlay(message) {
       this.$emit('video-play', message)
     },
-
+    
     // 视频暂停
     onVideoPause(message) {
       this.$emit('video-pause', message)
     },
-
+    
     // 打开链接
     openLink(message) {
       // #ifdef H5
       window.open(message.url, '_blank')
       // #endif
-
+      
       // #ifdef APP-PLUS
       plus.runtime.openURL(message.url)
       // #endif
-
+      
       this.$emit('link-open', message)
     },
-
+    
     // 查看商品
     viewProduct(message) {
       this.$emit('product-view', message)
     },
-
+    
     // 处理操作
     handleAction(action, message) {
       // 处理重试操作
@@ -1139,28 +1239,28 @@ export default {
         this.retryMessage(message)
         return
       }
-
+      
       this.$emit('action-click', { action, message })
     },
-
+    
     // 重试消息
     async retryMessage(message) {
       // 找到对应的用户消息
-      const userMessageIndex = this.messages.findIndex(msg =>
+      const userMessageIndex = this.messages.findIndex(msg => 
         msg.role === 'user' && msg.id < message.id
       )
-
+      
       if (userMessageIndex !== -1) {
         const userMessage = this.messages[userMessageIndex]
-
+        
         // 移除错误消息
         this.messages = this.messages.filter(msg => msg.id !== message.id)
-
+        
         // 重新发送消息
         await this.sendMessageWithContent(userMessage.content)
       }
     },
-
+    
     // 使用指定内容发送消息
     async sendMessageWithContent(content) {
       const userMessage = {
@@ -1170,9 +1270,9 @@ export default {
         content: content,
         timestamp: Date.now()
       }
-
+      
       this.messages.push(userMessage)
-
+      
       // 显示AI正在输入
       const loadingMessage = {
         id: ++this.messageId,
@@ -1181,9 +1281,9 @@ export default {
         content: '',
         timestamp: Date.now()
       }
-
+      
       this.messages.push(loadingMessage)
-
+      
       try {
         // 使用AI服务获取回复
         if (this.enableStreaming) {
@@ -1193,13 +1293,13 @@ export default {
           // 普通响应
           await this.sendNormalMessage(userMessage.content)
         }
-
+        
       } catch (error) {
         console.error('AI服务调用失败:', error)
-
+        
         // 移除加载状态
         this.messages = this.messages.filter(msg => msg.type !== 'loading')
-
+        
         // 显示错误消息
         const errorMessage = {
           id: ++this.messageId,
@@ -1211,20 +1311,20 @@ export default {
             { id: 1, text: '重试', type: 'retry' }
           ]
         }
-
+        
         this.messages.push(errorMessage)
         this.$emit('ai-response', errorMessage)
       }
-
+      
       // 触发消息发送事件
       this.$emit('message-sent', userMessage)
     },
-
+    
     // 输入事件
     onInput(e) {
       this.$emit('input-change', e.detail.value)
     },
-
+    
     // 选择图片
     selectImage() {
       uni.chooseImage({
@@ -1247,7 +1347,7 @@ export default {
         }
       })
     },
-
+    
     // 选择文件
     selectFile() {
       // #ifdef H5
@@ -1274,7 +1374,7 @@ export default {
       }
       input.click()
       // #endif
-
+      
       // #ifdef APP-PLUS
       uni.chooseFile({
         count: 1,
@@ -1298,12 +1398,12 @@ export default {
       })
       // #endif
     },
-
+    
     // 开始录音
     startRecord() {
       this.toggleVoiceInput()
     },
-
+    
     // 选择位置
     selectLocation() {
       uni.chooseLocation({
@@ -1352,7 +1452,7 @@ $radius-lg: 36rpx;
   display: flex;
   flex-direction: column;
   /* 仅新增：科技感粉蓝渐变背景 + 流动动画 */
-  background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
+  background: white; /* 白色 */
   background-size: 200% 200%;
   animation: gradient-flow 15s ease infinite;
   /* 原有样式保持不变 */
@@ -1366,8 +1466,7 @@ $radius-lg: 36rpx;
     padding: 24rpx 32rpx;
     overflow-y: auto;
     box-sizing: border-box;
-    min-height: 0;
-    /* 重要：防止flex元素溢出 */
+    min-height: 0; /* 重要：防止flex元素溢出 */
 
     .load-more {
       text-align: center;
@@ -1377,13 +1476,12 @@ $radius-lg: 36rpx;
 
     .message-item {
       margin-bottom: 32rpx;
-
+      
       &.first-message {
         margin-top: 24rpx;
       }
 
-      .user-message,
-      .ai-message {
+      .user-message, .ai-message {
         display: flex;
         align-items: flex-start;
 
@@ -1397,11 +1495,11 @@ $radius-lg: 36rpx;
           background-color: $bg-card;
           border: 2rpx solid #f0f4f8;
           transition: transform 0.2s ease;
-
+          
           &:hover {
             transform: scale(1.03);
           }
-
+          
           image {
             width: 100%;
             height: 100%;
@@ -1414,24 +1512,25 @@ $radius-lg: 36rpx;
           margin-left: 24rpx;
           max-width: calc(100% - 112rpx);
           min-width: 0;
-          width: 0;
-          /* 添加这个属性防止flex元素溢出 */
+          width: 0; /* 添加这个属性防止flex元素溢出 */
 
           .message-nickname {
             font-size: 24rpx;
             color: $color-text-light;
             margin-bottom: 8rpx;
             letter-spacing: 0.5rpx;
-            text-align: right;
-          }
-
-          // AI昵称专属样式 - 左移到气泡上方
-          .ai-nickname {
-            text-align: left;
-            margin-left: 0;
-            padding-left: 0;
-            align-self: flex-start;
-            margin-bottom: 4rpx;
+            // 用户昵称右对齐，AI昵称左对齐
+            &:not(.ai-message .message-nickname) {
+              text-align: right;
+            }
+            // AI昵称专属样式 - 左移到气泡上方
+            &.ai-nickname {
+              text-align: left;
+              margin-left: 0;
+              padding-left: 0;
+              align-self: flex-start;
+              margin-bottom: 4rpx;
+            }
           }
 
           .message-bubble {
@@ -1465,35 +1564,35 @@ $radius-lg: 36rpx;
               display: flex;
               align-items: center;
               margin-bottom: 16rpx;
-
+              
               .icon-markdown {
                 color: $color-primary;
                 margin-right: 12rpx;
                 font-size: 28rpx;
               }
-
+              
               .markdown-title {
                 font-weight: 600;
                 color: $color-text;
                 font-size: 28rpx;
               }
             }
-
+            
             .markdown-body {
               line-height: 1.8;
               font-size: 26rpx;
               color: $color-text;
-
+              
               strong {
                 font-weight: 600;
                 color: $color-text;
               }
-
+              
               em {
                 font-style: italic;
                 color: $color-text-light;
               }
-
+              
               code {
                 background-color: #f0f4f8;
                 padding: 4rpx 8rpx;
@@ -1502,13 +1601,13 @@ $radius-lg: 36rpx;
                 font-size: 24rpx;
                 color: $color-primary;
               }
-
+              
               a {
                 color: $color-primary;
                 text-decoration: underline;
                 text-underline-offset: 4rpx;
                 transition: color 0.2s ease;
-
+                
                 &:hover {
                   color: #5a7cb0;
                 }
@@ -1525,24 +1624,24 @@ $radius-lg: 36rpx;
               border-radius: $radius-md;
               border: 1rpx solid #f0f4f8;
               transition: all 0.3s ease;
-
+              
               &:hover {
                 background-color: #fafbfc;
                 box-shadow: $shadow-md;
               }
-
+              
               .file-icon {
                 margin-right: 24rpx;
-
+                
                 .icon-file {
                   font-size: 52rpx;
                   color: $color-primary;
                 }
               }
-
+              
               .file-info {
                 flex: 1;
-
+                
                 .file-name {
                   display: block;
                   font-weight: 600;
@@ -1550,20 +1649,20 @@ $radius-lg: 36rpx;
                   font-size: 26rpx;
                   color: $color-text;
                 }
-
+                
                 .file-size {
                   font-size: 24rpx;
                   color: $color-text-light;
                 }
               }
-
+              
               .file-action {
                 .icon-download {
                   font-size: 38rpx;
                   color: $color-primary;
                   transition: transform 0.2s ease;
                 }
-
+                
                 &:hover .icon-download {
                   transform: scale(1.1);
                 }
@@ -1575,7 +1674,7 @@ $radius-lg: 36rpx;
             .audio-player {
               .audio-info {
                 margin-bottom: 16rpx;
-
+                
                 .audio-title {
                   display: block;
                   font-weight: 600;
@@ -1583,17 +1682,17 @@ $radius-lg: 36rpx;
                   font-size: 26rpx;
                   color: $color-text;
                 }
-
+                
                 .audio-duration {
                   font-size: 24rpx;
                   color: $color-text-light;
                 }
               }
-
+              
               .audio-controls {
                 display: flex;
                 align-items: center;
-
+                
                 .play-btn {
                   width: 68rpx;
                   height: 68rpx;
@@ -1606,17 +1705,17 @@ $radius-lg: 36rpx;
                   justify-content: center;
                   box-shadow: 0 4rpx 12rpx rgba(108, 142, 191, 0.3);
                   transition: all 0.2s ease;
-
+                  
                   &.playing {
                     background-color: $color-primary-light;
                     box-shadow: 0 2rpx 8rpx rgba(138, 159, 184, 0.2);
                   }
-
+                  
                   &:hover {
                     transform: scale(1.05);
                   }
                 }
-
+                
                 .audio-slider {
                   flex: 1;
                 }
@@ -1633,10 +1732,10 @@ $radius-lg: 36rpx;
                 overflow: hidden;
                 box-shadow: $shadow-md;
               }
-
+              
               .video-info {
                 margin-top: 16rpx;
-
+                
                 .video-title {
                   display: block;
                   font-weight: 600;
@@ -1644,7 +1743,7 @@ $radius-lg: 36rpx;
                   font-size: 26rpx;
                   color: $color-text;
                 }
-
+                
                 .video-duration {
                   font-size: 24rpx;
                   color: $color-text-light;
@@ -1661,29 +1760,29 @@ $radius-lg: 36rpx;
               overflow: hidden;
               border: 1rpx solid #f0f4f8;
               transition: all 0.3s ease;
-
+              
               &:hover {
                 box-shadow: $shadow-md;
                 transform: translateY(-2rpx);
               }
-
+              
               .link-image {
                 width: 130rpx;
                 height: 130rpx;
                 flex-shrink: 0;
                 border-radius: $radius-md 0 0 $radius-md;
-
+                
                 image {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                 }
               }
-
+              
               .link-info {
                 flex: 1;
                 padding: 24rpx;
-
+                
                 .link-title {
                   display: block;
                   font-weight: 600;
@@ -1691,7 +1790,7 @@ $radius-lg: 36rpx;
                   font-size: 26rpx;
                   color: $color-text;
                 }
-
+                
                 .link-desc {
                   display: block;
                   font-size: 24rpx;
@@ -1702,7 +1801,7 @@ $radius-lg: 36rpx;
                   -webkit-box-orient: vertical;
                   overflow: hidden;
                 }
-
+                
                 .link-url {
                   display: block;
                   font-size: 22rpx;
@@ -1723,28 +1822,28 @@ $radius-lg: 36rpx;
               overflow: hidden;
               border: 1rpx solid #f0f4f8;
               transition: all 0.3s ease;
-
+              
               &:hover {
                 box-shadow: $shadow-md;
                 transform: translateY(-2rpx);
               }
-
+              
               .product-image {
                 width: 130rpx;
                 height: 130rpx;
                 flex-shrink: 0;
-
+                
                 image {
                   width: 100%;
                   height: 100%;
                   object-fit: cover;
                 }
               }
-
+              
               .product-info {
                 flex: 1;
                 padding: 24rpx;
-
+                
                 .product-title {
                   display: block;
                   font-weight: 600;
@@ -1756,7 +1855,7 @@ $radius-lg: 36rpx;
                   -webkit-box-orient: vertical;
                   overflow: hidden;
                 }
-
+                
                 .product-price {
                   display: block;
                   font-size: 28rpx;
@@ -1764,7 +1863,7 @@ $radius-lg: 36rpx;
                   margin-bottom: 6rpx;
                   color: $color-user;
                 }
-
+                
                 .product-desc {
                   display: block;
                   font-size: 24rpx;
@@ -1782,11 +1881,11 @@ $radius-lg: 36rpx;
             display: flex;
             align-items: center;
             padding: 32rpx 0;
-
+            
             .loading-dots {
               display: flex;
               margin-right: 16rpx;
-
+              
               .dot {
                 width: 14rpx;
                 height: 14rpx;
@@ -1794,17 +1893,17 @@ $radius-lg: 36rpx;
                 background-color: $color-primary;
                 margin: 0 6rpx;
                 animation: dotPulse 1.5s infinite ease-in-out;
-
+                
                 &:nth-child(2) {
                   animation-delay: 0.2s;
                 }
-
+                
                 &:nth-child(3) {
                   animation-delay: 0.4s;
                 }
               }
             }
-
+            
             .loading-text {
               color: $color-text-light;
               font-size: 26rpx;
@@ -1816,7 +1915,7 @@ $radius-lg: 36rpx;
             display: flex;
             gap: 16rpx;
             justify-content: flex-start;
-
+            
             .action-btn {
               border-radius: $radius-lg;
               font-size: 24rpx;
@@ -1828,21 +1927,21 @@ $radius-lg: 36rpx;
               transition: all 0.2s ease;
               border: 1rpx solid #f0f4f8;
               color: $color-text;
-
+              
               &.like {
                 color: $color-user;
                 border-color: #e8e0f2;
-
+                
                 &:hover {
                   background-color: #f9f6fc;
                   transform: translateY(-2rpx);
                 }
               }
-
+              
               &.dislike {
                 color: $color-text-light;
                 border-color: #e9edf2;
-
+                
                 &:hover {
                   background-color: #f8fafc;
                   transform: translateY(-2rpx);
@@ -1856,34 +1955,27 @@ $radius-lg: 36rpx;
       /* 用户消息特有样式 */
       .user-message {
         flex-direction: row-reverse;
-
+        
         .message-content {
           margin-left: 0;
           margin-right: 24rpx;
           text-align: right;
-
+          
           .message-bubble {
-            background: linear-gradient(135deg, #ffadd2, #f783ac) !important;
-            /* 粉色渐变 */
-            color: white !important;
-            border-radius: 16rpx 16rpx 4rpx 16rpx;
-            /* 右对齐气泡尖角适配 */
-            box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
-            border: none !important;
-            /* ✅ 关键：允许内容撑开高度 */
-            min-height: auto;
-            height: auto;
-            padding: 24rpx 32rpx;
-            /* 保留内边距 */
-            display: inline-block;
-            /* 让宽度也随内容收缩（可选） */
-            max-width: 80%;
-            /* 防止过宽 */
-            word-break: break-word;
-            white-space: pre-wrap;
-            /* 保留用户输入的换行符 */
-            line-height: 1.6;
-
+            background: #c4e0ff !important; /* 浅蓝色 */
+              color: black !important;
+              border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
+              box-shadow: 0 8rpx 20rpx rgba(196, 224, 255, 0.3) !important;
+              border: none !important;
+			  /* ✅ 关键：允许内容撑开高度 */
+			   min-height: auto;
+			   height: auto;
+			   padding: 24rpx 32rpx; /* 保留内边距 */
+			   display: inline-block; /* 让宽度也随内容收缩（可选） */
+			   max-width: 80%; /* 防止过宽 */
+			   word-break: break-word;
+			   white-space: pre-wrap; /* 保留用户输入的换行符 */
+			   line-height: 1.6;
             &::before {
               content: '';
               position: absolute;
@@ -1891,13 +1983,12 @@ $radius-lg: 36rpx;
               right: -14rpx;
               width: 24rpx;
               height: 24rpx;
-              background: #ffffff !important;
-              /* 菱形改为白色 */
+              background: #ffffff !important; /* 菱形改为白色 */
               border-radius: 6rpx;
               transform: rotate(45deg);
               box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
             }
-
+            
             &::after {
               content: '';
               position: absolute;
@@ -1905,9 +1996,11 @@ $radius-lg: 36rpx;
               left: -100%;
               width: 50%;
               height: 100%;
-              background: linear-gradient(to right,
-                  rgba(255, 255, 255, 0) 0%,
-                  rgba(255, 255, 255, 0.15) 100%);
+              background: linear-gradient(
+                to right,
+                rgba(255, 255, 255, 0) 0%,
+                rgba(255, 255, 255, 0.15) 100%
+              );
               animation: shine 4s infinite linear;
             }
           }
@@ -1921,24 +2014,21 @@ $radius-lg: 36rpx;
           display: flex;
           flex-direction: column;
           align-items: flex-start;
-
+          
           .message-bubble {
-            background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
-            /* 蓝色浅渐变 */
-            color: #2c3e50 !important;
-            border-radius: 16rpx 16rpx 16rpx 4rpx;
-            /* 左对齐气泡尖角适配 */
-            box-shadow: 0 8rpx 20rpx rgba(191, 219, 254, 0.4) !important;
-            border: 1rpx solid #dbeafe !important;
+            background: white !important; /* 白色 */
+              color: black !important;
+              border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
+              box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1) !important;
+              border: 1rpx solid #e0e0e0 !important;
             min-height: auto;
-            height: auto;
-            padding: 24rpx 32rpx;
-            display: inline-block;
-            max-width: 80%;
-            word-break: break-word;
-            white-space: pre-wrap;
-            line-height: 1.6;
-
+              height: auto;
+              padding: 24rpx 32rpx;
+              display: inline-block;
+              max-width: 80%;
+              word-break: break-word;
+              white-space: pre-wrap;
+              line-height: 1.6;
             &::before {
               content: '';
               position: absolute;
@@ -1946,8 +2036,7 @@ $radius-lg: 36rpx;
               left: -14rpx;
               width: 24rpx;
               height: 24rpx;
-              background: #ffffff !important;
-              /* 菱形改为白色 */
+              background: #ffffff !important; /* 菱形改为白色 */
               border-radius: 6rpx;
               transform: rotate(45deg);
               box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -1963,7 +2052,7 @@ $radius-lg: 36rpx;
 
   /* 输入区域 */
   .input-area {
-    background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
+    background: #c4e0ff; /* 浅蓝色 */
     border-top: 2rpx solid #f0f4f8;
     padding: 24rpx 32rpx;
     /* 确保在微信小程序中紧贴底部 */
@@ -1978,7 +2067,7 @@ $radius-lg: 36rpx;
     .input-tools {
       display: flex;
       margin-bottom: 16rpx;
-
+      
       .tool-btn {
         width: 64rpx;
         height: 64rpx;
@@ -1989,12 +2078,12 @@ $radius-lg: 36rpx;
         align-items: center;
         justify-content: center;
         transition: all 0.2s ease;
-
+        
         &:hover {
           background-color: #e8edf3;
           transform: scale(1.05);
         }
-
+        
         .iconfont {
           font-size: 34rpx;
           color: $color-text-light;
@@ -2005,7 +2094,7 @@ $radius-lg: 36rpx;
     .input-container {
       display: flex;
       align-items: flex-end;
-
+      
       .message-input {
         flex: 1;
         min-height: 88rpx;
@@ -2018,19 +2107,19 @@ $radius-lg: 36rpx;
         border: 1rpx solid #e8edf3;
         transition: all 0.2s ease;
         color: $color-text;
-
+        
         &:focus {
           background-color: $bg-card;
           border-color: $color-primary-light;
           box-shadow: 0 0 0 4rpx rgba(138, 159, 184, 0.1);
         }
-
+        
         &::placeholder {
           color: $color-text-light;
           opacity: 0.8;
         }
       }
-
+      
       /* 发送按钮 */
       .send-btn {
         width: 112rpx;
@@ -2047,20 +2136,17 @@ $radius-lg: 36rpx;
         font-size: 28rpx;
         font-weight: 500;
         border: none;
-        text-align: center;
-        /* 兼容多端文字居中 */
-        white-space: nowrap;
-        /* 强制文字单行横向显示 */
-        line-height: 1;
-        /* 重置行高，避免文字垂直偏移 */
-        top: -10px;
-
+         text-align: center;     /* 兼容多端文字居中 */
+          white-space: nowrap;    /* 强制文字单行横向显示 */
+          line-height: 1;         /* 重置行高，避免文字垂直偏移 */
+          top:-10px;
+        
         &.disabled {
           background-color: $color-primary-light;
           box-shadow: none;
           opacity: 0.7;
         }
-
+        
         &:not(.disabled):hover {
           transform: scale(1.05);
           background-color: #5a7cb0;
@@ -2076,25 +2162,23 @@ $radius-lg: 36rpx;
     left: 0;
     right: 0;
     bottom: 0;
-    pointer-events: none;
-    /* 让鼠标事件穿透容器，不影响主内容交互 */
-    z-index: 999;
-    /* 基础弹窗层级 */
-
+    pointer-events: none; /* 让鼠标事件穿透容器，不影响主内容交互 */
+    z-index: 999; /* 基础弹窗层级 */
+    
     /* 子弹窗需要开启 pointer-events，否则点击无效 */
-    >.tools-popup,
-    >.voice-popup,
-    >.avatar-selector-popup,
-    >.nickname-editor-popup {
+    > .tools-popup,
+    > .voice-popup,
+    > .avatar-selector-popup,
+    > .nickname-editor-popup {
       pointer-events: auto;
     }
-
+    
     /* 昵称编辑弹窗层级最高，避免被其他弹窗遮挡 */
-    >.nickname-editor-popup {
+    > .nickname-editor-popup {
       z-index: 1001;
     }
   }
-
+  
   // 昵称编辑弹窗样式（修复右侧溢出问题）
   .nickname-editor-popup {
     position: fixed;
@@ -2450,45 +2534,14 @@ $radius-lg: 36rpx;
             border-radius: 4rpx;
             animation: none;
 
-            &:nth-child(1) {
-              height: 60rpx;
-              animation-delay: 0s;
-            }
-
-            &:nth-child(2) {
-              height: 90rpx;
-              animation-delay: 0.1s;
-            }
-
-            &:nth-child(3) {
-              height: 50rpx;
-              animation-delay: 0.2s;
-            }
-
-            &:nth-child(4) {
-              height: 120rpx;
-              animation-delay: 0.3s;
-            }
-
-            &:nth-child(5) {
-              height: 70rpx;
-              animation-delay: 0.4s;
-            }
-
-            &:nth-child(6) {
-              height: 100rpx;
-              animation-delay: 0.5s;
-            }
-
-            &:nth-child(7) {
-              height: 80rpx;
-              animation-delay: 0.6s;
-            }
-
-            &:nth-child(8) {
-              height: 40rpx;
-              animation-delay: 0.7s;
-            }
+            &:nth-child(1) { height: 60rpx; animation-delay: 0s; }
+            &:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
+            &:nth-child(3) { height: 50rpx; animation-delay: 0.2s; }
+            &:nth-child(4) { height: 120rpx; animation-delay: 0.3s; }
+            &:nth-child(5) { height: 70rpx; animation-delay: 0.4s; }
+            &:nth-child(6) { height: 100rpx; animation-delay: 0.5s; }
+            &:nth-child(7) { height: 80rpx; animation-delay: 0.6s; }
+            &:nth-child(8) { height: 40rpx; animation-delay: 0.7s; }
           }
         }
 
@@ -2656,13 +2709,10 @@ $radius-lg: 36rpx;
 
 /* 动画定义 */
 @keyframes dotPulse {
-
-  0%,
-  100% {
+  0%, 100% {
     opacity: 0.4;
     transform: scale(0.8);
   }
-
   50% {
     opacity: 1;
     transform: scale(1.2);
@@ -2670,13 +2720,10 @@ $radius-lg: 36rpx;
 }
 
 @keyframes wave {
-
-  0%,
-  100% {
+  0%, 100% {
     transform: scaleY(0.5);
     opacity: 0.7;
   }
-
   50% {
     transform: scaleY(1);
     opacity: 1;
@@ -2687,7 +2734,6 @@ $radius-lg: 36rpx;
   0% {
     left: -100%;
   }
-
   100% {
     left: 200%;
   }
@@ -2697,11 +2743,9 @@ $radius-lg: 36rpx;
   0% {
     background-position: 0% 50%;
   }
-
   50% {
     background-position: 100% 50%;
   }
-
   100% {
     background-position: 0% 50%;
   }
@@ -2722,7 +2766,7 @@ $radius-lg: 36rpx;
   background: $color-primary-light;
   border-radius: 4rpx;
   opacity: 0.7;
-
+  
   &:hover {
     background: $color-primary;
     opacity: 1;
@@ -2734,24 +2778,23 @@ $radius-lg: 36rpx;
   .ai-chat-container {
     .chat-messages {
       padding: 16rpx 24rpx;
-
+      
       .message-item {
         margin-bottom: 24rpx;
-
-        .user-message,
-        .ai-message {
+        
+        .user-message, .ai-message {
           .avatar {
             width: 72rpx;
             height: 72rpx;
           }
-
+          
           .message-content {
             margin-left: 16rpx;
             max-width: calc(100% - 88rpx);
-
+            
             .message-bubble {
               padding: 16rpx 24rpx;
-
+              
               .message-text {
                 font-size: 26rpx;
               }
@@ -2760,17 +2803,17 @@ $radius-lg: 36rpx;
         }
       }
     }
-
+    
     .input-area {
       padding: 16rpx 24rpx;
-
+      
       .input-container {
         .message-input {
           min-height: 72rpx;
           padding: 16rpx 24rpx;
           font-size: 26rpx;
         }
-
+        
         .send-btn {
           width: 96rpx;
           height: 68rpx;