From e40e6e73b20162ff7bb0a474d35d8779abe08f08 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 16 Jan 2026 10:34:00 +0800
Subject: [PATCH] =?UTF-8?q?chore(build):=20=E8=B0=83=E6=95=B4ai-chat-messa?=
 =?UTF-8?q?ge=E7=BB=84=E4=BB=B6=E7=9A=84=E4=BD=8D=E7=BD=AE=EF=BC=8C?=
 =?UTF-8?q?=E5=87=8F=E5=B0=91=E5=AF=B9=E4=B8=BB=E5=8C=85=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E7=9A=84=E5=BD=B1=E5=93=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ai-chat-message/ai-chat-message.json      |    6 -
 components/hover-nav/hover-nav.vue            |   13 +-
 .../ai-chat}/ai-chat-message.vue              | 1099 +++++++++--------
 pages_tool/ai-chat/index.vue                  |   11 +-
 4 files changed, 570 insertions(+), 559 deletions(-)
 delete mode 100644 components/ai-chat-message/ai-chat-message.json
 rename {components/ai-chat-message => pages_tool/ai-chat}/ai-chat-message.vue (80%)

diff --git a/components/ai-chat-message/ai-chat-message.json b/components/ai-chat-message/ai-chat-message.json
deleted file mode 100644
index d806736..0000000
--- a/components/ai-chat-message/ai-chat-message.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "ns-loading": "../ns-loading/ns-loading"
-  }
-}
\ No newline at end of file
diff --git a/components/hover-nav/hover-nav.vue b/components/hover-nav/hover-nav.vue
index 3ef65a7..ab51db7 100644
--- a/components/hover-nav/hover-nav.vue
+++ b/components/hover-nav/hover-nav.vue
@@ -109,6 +109,7 @@ export default {
     });
   },
   methods: {
+
     /**
      * 初始化多语言配置
      */
@@ -130,12 +131,14 @@ export default {
         this.currentLangIndex = 0;
       }
     },
+
     /**
      * 电话联系客服
      */
     call() {
       this.customerService.makePhoneCall(this.tel);
     },
+
     /**
      * 切换中英文语言，并刷新当前页面（保留所有参数）
      */
@@ -153,12 +156,12 @@ export default {
     openAIChat() {
       this.$util.redirectTo(this.$util.AI_CHAT_PAGE_URL);
     },
+
+    /**
+     * 打开客服选择对话框
+     */
     openCustomerSelectPopup() {
-      if (this.customerService) {
-        this.customerService.openCustomerSelectPopupDialog();
-      } else {
-        uni.showToast({ title: '客服初始化中，请稍后重试', icon: 'none' });
-      }
+      this.customerService.openCustomerSelectPopupDialog();
     }
   }
 }
diff --git a/components/ai-chat-message/ai-chat-message.vue b/pages_tool/ai-chat/ai-chat-message.vue
similarity index 80%
rename from components/ai-chat-message/ai-chat-message.vue
rename to pages_tool/ai-chat/ai-chat-message.vue
index c24fab4..edcf3a8 100644
--- a/components/ai-chat-message/ai-chat-message.vue
+++ b/pages_tool/ai-chat/ai-chat-message.vue
@@ -1,25 +1,18 @@
 <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="(message, index) in messages" 
-        :key="`msg-${message.id || message.timestamp}-${index}`"  
-        class="message-item"
-        :class="[message.role, { 'first-message': 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">
@@ -32,9 +25,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">
@@ -49,7 +42,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">
@@ -60,7 +53,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)">
@@ -76,7 +69,7 @@
                   </view>
                 </view>
               </view>
-              
+
               <!-- 音频消息 -->
               <view v-else-if="message.type === 'audio'" class="audio-content">
                 <view class="audio-player">
@@ -85,36 +78,21 @@
                     <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>
@@ -122,7 +100,7 @@
                   </view>
                 </view>
               </view>
-              
+
               <!-- 跳转链接 -->
               <view v-else-if="message.type === 'link'" class="link-content">
                 <view class="link-card" @click="openLink(message)">
@@ -136,7 +114,7 @@
                   </view>
                 </view>
               </view>
-              
+
               <!-- 商品卡片 -->
               <view v-else-if="message.type === 'product'" class="product-content">
                 <view class="product-card" @click="viewProduct(message)">
@@ -150,7 +128,7 @@
                   </view>
                 </view>
               </view>
-              
+
               <!-- 加载中状态 -->
               <view v-else-if="message.type === 'loading'" class="loading-content">
                 <view class="loading-dots">
@@ -160,25 +138,21 @@
                 </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">
@@ -197,29 +171,19 @@
           <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>
@@ -258,7 +222,7 @@
         </view>
       </view>
     </view>
-    
+
     <!-- 语音输入面板 -->
     <view v-if="enalbeVoicePanelShow" class="voice-popup">
       <view class="voice-mask" @click="hideVoicePanel"></view>
@@ -271,11 +235,7 @@
         </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>
@@ -286,7 +246,7 @@
         </view>
       </view>
     </view>
-    
+
     <!-- 头像选择弹窗 -->
     <view v-if="showAvatarSelector" class="avatar-selector-popup">
       <view class="avatar-selector-mask" @click="closeAvatarSelector"></view>
@@ -318,7 +278,7 @@
         </view>
       </view>
     </view>
-    
+
     <!-- 新增：昵称编辑弹窗 -->
     <view v-if="showNicknameEditor" class="nickname-editor-popup">
       <view class="nickname-editor-mask" @click="closeNicknameEditor"></view>
@@ -331,23 +291,15 @@
         </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>
@@ -398,7 +350,7 @@ export default {
       default: 20
     }
   },
-  data(){
+  data() {
     return {
       messages: [],
       inputText: '',
@@ -432,34 +384,34 @@ export default {
       currentConversationId: null,
       isAIServiceAvailable: true,
       aiServiceError: null,
-	  isLoadingHistory: false, // 新增：标记历史加载状态
+      isLoadingHistory: false, // 新增：标记历史加载状态
       shouldScrollToBottom: false,
-	   scrollTimer: null,
-	  lastScrollTop: 0,
-	  historyOffset: 0,
-	   isFetchingHistory: false
+      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);
-             },
+    // 优先读取本地缓存的会话 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
@@ -468,42 +420,42 @@ export default {
     this.initUserAvatarData()
     // 初始化用户昵称（缓存优先）
     this.initUserNicknameData()
-	this.currentConversationId = aiService.getConversationId();
+    this.currentConversationId = aiService.getConversationId();
+  },
+  mounted() {
+    // 初始加载时滚底（仅一次）
+    this.$nextTick(() => {
+      this.scrollToBottom()
+    })
   },
-   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
@@ -512,114 +464,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({
@@ -628,19 +580,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: '头像更换成功',
@@ -667,37 +619,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: '昵称修改成功',
@@ -705,11 +657,11 @@ export default {
         duration: 1500
       })
     },
-    
+
     // 发送消息
     async sendMessage() {
       if (!this.inputText.trim()) return
-      
+
       const userMessage = {
         id: ++this.messageId,
         role: 'user',
@@ -717,10 +669,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,
@@ -731,29 +683,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,
@@ -769,28 +721,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',
@@ -808,7 +760,7 @@ export default {
       this.messages.push(aiMessage)
       this.$emit('ai-response', aiMessage)
     },
-    
+
     // 发送流式消息
     async sendStreamMessage(userMessage) {
       // 创建流式消息对象
@@ -820,55 +772,55 @@ export default {
         timestamp: Date.now(),
         isStreaming: true
       }
-      
+
       // 移除加载状态，添加流式消息
       this.messages = this.messages.filter(msg => msg.type !== 'loading')
-	  this.shouldScrollToBottom = true
+      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;
-       }
-     );
-	 },
+
+      // 开始流式响应
+      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;
+        }
+      );
+    },
     generateAIResponse(userMessage) {
       const responses = {
         '你好': '您好！我是AI智能客服，很高兴为您服务！有什么可以帮助您的吗？',
@@ -884,12 +836,12 @@ export default {
       }
       return `感谢您的咨询！关于"${userMessage}"的问题，我们的专业客服会尽快为您解答。您也可以查看我们的帮助文档获取更多信息。`;
     },
-  
-    
+
+
     // 解析Markdown
     parseMarkdown(content) {
       if (!content) return ''
-      
+
       // 简单的Markdown解析
       let html = content
         .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 粗体
@@ -897,16 +849,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小时内
@@ -914,12 +866,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'
@@ -928,7 +880,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'
@@ -936,110 +888,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()
@@ -1048,7 +1000,7 @@ export default {
         this.hideVoicePanel()
       }
     },
-    
+
     // 开始语音输入
     startVoiceInput() {
       // #ifdef H5
@@ -1068,21 +1020,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) => {
@@ -1093,7 +1045,7 @@ export default {
         }
       })
       // #endif
-      
+
       uni.hideLoading()
       this.$emit('file-preview', message)
     },
@@ -1105,69 +1057,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) {
       // 处理重试操作
@@ -1175,28 +1127,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 = {
@@ -1206,9 +1158,9 @@ export default {
         content: content,
         timestamp: Date.now()
       }
-      
+
       this.messages.push(userMessage)
-      
+
       // 显示AI正在输入
       const loadingMessage = {
         id: ++this.messageId,
@@ -1217,9 +1169,9 @@ export default {
         content: '',
         timestamp: Date.now()
       }
-      
+
       this.messages.push(loadingMessage)
-      
+
       try {
         // 使用AI服务获取回复
         if (this.enableStreaming) {
@@ -1229,13 +1181,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,
@@ -1247,20 +1199,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({
@@ -1283,7 +1235,7 @@ export default {
         }
       })
     },
-    
+
     // 选择文件
     selectFile() {
       // #ifdef H5
@@ -1310,7 +1262,7 @@ export default {
       }
       input.click()
       // #endif
-      
+
       // #ifdef APP-PLUS
       uni.chooseFile({
         count: 1,
@@ -1334,12 +1286,12 @@ export default {
       })
       // #endif
     },
-    
+
     // 开始录音
     startRecord() {
       this.toggleVoiceInput()
     },
-    
+
     // 选择位置
     selectLocation() {
       uni.chooseLocation({
@@ -1402,7 +1354,8 @@ $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;
@@ -1412,12 +1365,13 @@ $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;
 
@@ -1431,11 +1385,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%;
@@ -1448,17 +1402,20 @@ $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;
+
             // 用户昵称右对齐，AI昵称左对齐
             &:not(.ai-message .message-nickname) {
               text-align: right;
             }
+
             // AI昵称专属样式 - 左移到气泡上方
             &.ai-nickname {
               text-align: left;
@@ -1500,35 +1457,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;
@@ -1537,13 +1494,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;
                 }
@@ -1560,24 +1517,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;
@@ -1585,20 +1542,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);
                 }
@@ -1610,7 +1567,7 @@ $radius-lg: 36rpx;
             .audio-player {
               .audio-info {
                 margin-bottom: 16rpx;
-                
+
                 .audio-title {
                   display: block;
                   font-weight: 600;
@@ -1618,17 +1575,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;
@@ -1641,17 +1598,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;
                 }
@@ -1668,10 +1625,10 @@ $radius-lg: 36rpx;
                 overflow: hidden;
                 box-shadow: $shadow-md;
               }
-              
+
               .video-info {
                 margin-top: 16rpx;
-                
+
                 .video-title {
                   display: block;
                   font-weight: 600;
@@ -1679,7 +1636,7 @@ $radius-lg: 36rpx;
                   font-size: 26rpx;
                   color: $color-text;
                 }
-                
+
                 .video-duration {
                   font-size: 24rpx;
                   color: $color-text-light;
@@ -1696,29 +1653,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;
@@ -1726,7 +1683,7 @@ $radius-lg: 36rpx;
                   font-size: 26rpx;
                   color: $color-text;
                 }
-                
+
                 .link-desc {
                   display: block;
                   font-size: 24rpx;
@@ -1737,7 +1694,7 @@ $radius-lg: 36rpx;
                   -webkit-box-orient: vertical;
                   overflow: hidden;
                 }
-                
+
                 .link-url {
                   display: block;
                   font-size: 22rpx;
@@ -1758,28 +1715,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;
@@ -1791,7 +1748,7 @@ $radius-lg: 36rpx;
                   -webkit-box-orient: vertical;
                   overflow: hidden;
                 }
-                
+
                 .product-price {
                   display: block;
                   font-size: 28rpx;
@@ -1799,7 +1756,7 @@ $radius-lg: 36rpx;
                   margin-bottom: 6rpx;
                   color: $color-user;
                 }
-                
+
                 .product-desc {
                   display: block;
                   font-size: 24rpx;
@@ -1817,11 +1774,11 @@ $radius-lg: 36rpx;
             display: flex;
             align-items: center;
             padding: 32rpx 0;
-            
+
             .loading-dots {
               display: flex;
               margin-right: 16rpx;
-              
+
               .dot {
                 width: 14rpx;
                 height: 14rpx;
@@ -1829,17 +1786,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;
@@ -1851,7 +1808,7 @@ $radius-lg: 36rpx;
             display: flex;
             gap: 16rpx;
             justify-content: flex-start;
-            
+
             .action-btn {
               border-radius: $radius-lg;
               font-size: 24rpx;
@@ -1863,21 +1820,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);
@@ -1891,27 +1848,34 @@ $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: 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;
+
             &::before {
               content: '';
               position: absolute;
@@ -1919,12 +1883,13 @@ $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;
@@ -1932,11 +1897,9 @@ $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;
             }
           }
@@ -1950,21 +1913,24 @@ $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: 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;
             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;
@@ -1972,7 +1938,8 @@ $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);
@@ -2003,7 +1970,7 @@ $radius-lg: 36rpx;
     .input-tools {
       display: flex;
       margin-bottom: 16rpx;
-      
+
       .tool-btn {
         width: 64rpx;
         height: 64rpx;
@@ -2014,12 +1981,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;
@@ -2030,7 +1997,7 @@ $radius-lg: 36rpx;
     .input-container {
       display: flex;
       align-items: flex-end;
-      
+
       .message-input {
         flex: 1;
         min-height: 88rpx;
@@ -2043,19 +2010,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;
@@ -2072,17 +2039,20 @@ $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;
@@ -2098,23 +2068,25 @@ $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;
@@ -2470,14 +2442,45 @@ $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;
+            }
           }
         }
 
@@ -2645,10 +2648,13 @@ $radius-lg: 36rpx;
 
 /* 动画定义 */
 @keyframes dotPulse {
-  0%, 100% {
+
+  0%,
+  100% {
     opacity: 0.4;
     transform: scale(0.8);
   }
+
   50% {
     opacity: 1;
     transform: scale(1.2);
@@ -2656,10 +2662,13 @@ $radius-lg: 36rpx;
 }
 
 @keyframes wave {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scaleY(0.5);
     opacity: 0.7;
   }
+
   50% {
     transform: scaleY(1);
     opacity: 1;
@@ -2670,6 +2679,7 @@ $radius-lg: 36rpx;
   0% {
     left: -100%;
   }
+
   100% {
     left: 200%;
   }
@@ -2679,9 +2689,11 @@ $radius-lg: 36rpx;
   0% {
     background-position: 0% 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0% 50%;
   }
@@ -2702,7 +2714,7 @@ $radius-lg: 36rpx;
   background: $color-primary-light;
   border-radius: 4rpx;
   opacity: 0.7;
-  
+
   &:hover {
     background: $color-primary;
     opacity: 1;
@@ -2714,23 +2726,24 @@ $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;
               }
@@ -2739,17 +2752,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;
diff --git a/pages_tool/ai-chat/index.vue b/pages_tool/ai-chat/index.vue
index 3b901cc..bf82101 100644
--- a/pages_tool/ai-chat/index.vue
+++ b/pages_tool/ai-chat/index.vue
@@ -52,7 +52,12 @@ import { mapGetters, mapMutations } from 'vuex'
 import navigationHelper from '@/common/js/navigation';
 import { EventSafety } from '@/common/js/event-safety';
 
+import aiChatMessage from './ai-chat-message.vue';
+
 export default {
+  components: {
+    aiChatMessage,
+  },
   data() {
     return {
       initialMessages: [
@@ -85,8 +90,7 @@ export default {
       // 事件处理器引用（用于清理）
       safeEventHandlers: new Map()
     }
-  },
-  
+  },  
   computed: {
     ...mapGetters([
       'globalAIKefuConfig'
@@ -142,9 +146,6 @@ export default {
     this.cleanup()
   },
 
-
-  
-
   methods: {
     // ========== 安全事件处理 ==========
     setupSafeEventListeners() {