chore：改了pages-tool/ai-chat/ai-chat-message.vue

pages_tool/ai-chat/ai-chat-message.vue

@@ -1,7 +1,11 @@
 <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">
       
       <!-- 加载更多历史消息 -->
@@ -10,7 +14,11 @@
       </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">
@@ -77,12 +85,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"
+                    <slider 
-                      @changing="onAudioSliderChange" @change="onAudioSliderChangeEnd" activeColor="#8a9fb8"
+                      class="audio-slider" 
-                      backgroundColor="#e8edf3" block-size="12" />
+                      :value="message.currentTime || 0" 
+                      :max="message.duration || 0"
+                      @changing="onAudioSliderChange"
+                      @change="onAudioSliderChangeEnd"
+                      activeColor="#8a9fb8"
+                      backgroundColor="#e8edf3"
+                      block-size="12" />
                   </view>
                 </view>
               </view>
@@ -90,8 +107,14 @@
               <!-- 视频消息 -->
               <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"
+                  <video 
-                    class="video-element" @play="onVideoPlay(message)" @pause="onVideoPause(message)">
+                    :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>
@@ -140,8 +163,12 @@
               
               <!-- 操作按钮 -->
               <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"
+                <button 
-                  :class="[`iconfont`, action.icon, action.type]" @click="handleAction(action, message)">
+                  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>
@@ -172,11 +199,21 @@
       </view>
       
       <view class="input-container">
-        <textarea v-model="inputText" class="message-input" placeholder="请输入您的问题..." :maxlength="500"
+        <textarea 
-          :auto-height="true" :show-confirm-bar="false" @confirm="sendMessage" @input="onInput" />
+          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>
@@ -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>
@@ -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() }"
+            <button 
-              :disabled="!tempNickname.trim()" @click="saveNickname">
+              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: '',
@@ -391,20 +440,15 @@ export default {
 	   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 等
-        };
-      });
-    }
-  },
   onShow() {
+	  // 如果不是 AI 客服，立即退出并跳转
+	    if (customerServiceType !== 'ai') {
+	      uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
+	      setTimeout(() => {
+	        uni.navigateBack({ delta: 1 }); // 或 redirectTo 首页
+	      }, 1000);
+	      return; // ⚠️ 关键：阻止后续初始化
+	    }
            // 优先读取本地缓存的会话 ID
            const localConvId = this.getConversationIdFromLocal();
            if (localConvId) {
@@ -774,6 +818,7 @@ export default {
     },
     
     // 发送流式消息
+ // 发送流式消息（自动适配 H5 / 微信小程序）
  async sendStreamMessage(userMessage) {
    // 创建流式消息对象
    const streamMessage = {
@@ -783,35 +828,36 @@ export default {
      content: '',
      timestamp: Date.now(),
      isStreaming: true
-      }
+   };
  
    // 移除加载状态，添加流式消息
-      this.messages = this.messages.filter(msg => msg.type !== 'loading')
+   this.messages = this.messages.filter(msg => msg.type !== 'loading');
-      this.shouldScrollToBottom = true
+   this.shouldScrollToBottom = true;
-      this.messages.push(streamMessage)
+   this.messages.push(streamMessage);
  
-      // 开始流式响应
+   try {
-      await aiService.sendStreamMessage(
+     // #ifdef H5
+     // ===== H5: 使用 POST + 流式 (fetch readable stream) =====
+     await aiService.sendHttpStream(
        userMessage,
-        // 流式数据回调
        (chunk) => {
-          streamMessage.content += chunk
+         // 实时更新内容
-          this.$forceUpdate() // 或 this.$nextTick()
+         streamMessage.content += chunk;
+         this.$forceUpdate(); // 强制更新视图
        },
-        // 完成回调：处理对象或字符串
        (completeResult) => {
+         // 流结束回调
          let finalContent = '';
          let convId = '';
  
-          // 判断是对象还是字符串
          if (typeof completeResult === 'string') {
            finalContent = completeResult;
          } else {
            finalContent = completeResult.content || '';
-            convId = completeResult.conversation_id || ''; // 👈 关键：提取 conversation_id
+           convId = completeResult.conversation_id || '';
          }
  
-          // 更新消息状态
+         // 更新最终内容
          streamMessage.isStreaming = false;
          streamMessage.content = finalContent;
  
@@ -821,17 +867,71 @@ export default {
            { id: 2, text: '没帮助', type: 'dislike' }
          ];
  
-          //  保存 conversation_id 到本地
+         // 保存会话 ID
          if (convId) {
+           this.currentConversationId = convId;
            aiService.setConversationId(convId);
+           this.saveConversationIdToLocal(convId);
          }
  
          // 触发事件
          this.$emit('ai-response', streamMessage);
-          this.saveConversationIdToLocal(convId);
-          this.currentConversationId = convId;
        }
      );
+     // #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 = {
@@ -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;
+    min-height: 0; /* 重要：防止flex元素溢出 */
-    /* 重要：防止flex元素溢出 */
 
     .load-more {
       text-align: center;
@@ -1382,8 +1481,7 @@ $radius-lg: 36rpx;
         margin-top: 24rpx;
       }
 
-      .user-message,
+      .user-message, .ai-message {
-      .ai-message {
         display: flex;
         align-items: flex-start;
 
@@ -1414,25 +1512,26 @@ $radius-lg: 36rpx;
           margin-left: 24rpx;
           max-width: calc(100% - 112rpx);
           min-width: 0;
-          width: 0;
+          width: 0; /* 添加这个属性防止flex元素溢出 */
-          /* 添加这个属性防止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 {
+            &.ai-nickname {
               text-align: left;
               margin-left: 0;
               padding-left: 0;
               align-self: flex-start;
               margin-bottom: 4rpx;
             }
+          }
 
           .message-bubble {
             padding: 24rpx 32rpx;
@@ -1863,27 +1962,20 @@ $radius-lg: 36rpx;
           text-align: right;
           
           .message-bubble {
-            background: linear-gradient(135deg, #ffadd2, #f783ac) !important;
+            background: #c4e0ff !important; /* 浅蓝色 */
-            /* 粉色渐变 */
+              color: black !important;
-            color: white !important;
+              border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
-            border-radius: 16rpx 16rpx 4rpx 16rpx;
+              box-shadow: 0 8rpx 20rpx rgba(196, 224, 255, 0.3) !important;
-            /* 右对齐气泡尖角适配 */
-            box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
               border: none !important;
 			  /* ✅ 关键：允许内容撑开高度 */
 			   min-height: auto;
 			   height: auto;
-            padding: 24rpx 32rpx;
+			   padding: 24rpx 32rpx; /* 保留内边距 */
-            /* 保留内边距 */
+			   display: inline-block; /* 让宽度也随内容收缩（可选） */
-            display: inline-block;
+			   max-width: 80%; /* 防止过宽 */
-            /* 让宽度也随内容收缩（可选） */
-            max-width: 80%;
-            /* 防止过宽 */
 			   word-break: break-word;
-            white-space: pre-wrap;
+			   white-space: pre-wrap; /* 保留用户输入的换行符 */
-            /* 保留用户输入的换行符 */
 			   line-height: 1.6;
-
             &::before {
               content: '';
               position: absolute;
@@ -1891,8 +1983,7 @@ $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);
@@ -1905,9 +1996,11 @@ $radius-lg: 36rpx;
               left: -100%;
               width: 50%;
               height: 100%;
-              background: linear-gradient(to right,
+              background: linear-gradient(
+                to right,
                 rgba(255, 255, 255, 0) 0%,
-                  rgba(255, 255, 255, 0.15) 100%);
+                rgba(255, 255, 255, 0.15) 100%
+              );
               animation: shine 4s infinite linear;
             }
           }
@@ -1923,13 +2016,11 @@ $radius-lg: 36rpx;
           align-items: flex-start;
           
           .message-bubble {
-            background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
+            background: white !important; /* 白色 */
-            /* 蓝色浅渐变 */
+              color: black !important;
-            color: #2c3e50 !important;
+              border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
-            border-radius: 16rpx 16rpx 16rpx 4rpx;
+              box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1) !important;
-            /* 左对齐气泡尖角适配 */
+              border: 1rpx solid #e0e0e0 !important;
-            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;
@@ -1938,7 +2029,6 @@ $radius-lg: 36rpx;
               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;
     /* 确保在微信小程序中紧贴底部 */
@@ -2047,13 +2136,10 @@ $radius-lg: 36rpx;
         font-size: 28rpx;
         font-weight: 500;
         border: none;
-        text-align: center;
+         text-align: center;     /* 兼容多端文字居中 */
-        /* 兼容多端文字居中 */
+          white-space: nowrap;    /* 强制文字单行横向显示 */
-        white-space: nowrap;
+          line-height: 1;         /* 重置行高，避免文字垂直偏移 */
-        /* 强制文字单行横向显示 */
+          top:-10px;
-        line-height: 1;
-        /* 重置行高，避免文字垂直偏移 */
-        top: -10px;
         
         &.disabled {
           background-color: $color-primary-light;
@@ -2076,21 +2162,19 @@ $radius-lg: 36rpx;
     left: 0;
     right: 0;
     bottom: 0;
-    pointer-events: none;
+    pointer-events: none; /* 让鼠标事件穿透容器，不影响主内容交互 */
-    /* 让鼠标事件穿透容器，不影响主内容交互 */
+    z-index: 999; /* 基础弹窗层级 */
-    z-index: 999;
-    /* 基础弹窗层级 */
     
     /* 子弹窗需要开启 pointer-events，否则点击无效 */
-    >.tools-popup,
+    > .tools-popup,
-    >.voice-popup,
+    > .voice-popup,
-    >.avatar-selector-popup,
+    > .avatar-selector-popup,
-    >.nickname-editor-popup {
+    > .nickname-editor-popup {
       pointer-events: auto;
     }
     
     /* 昵称编辑弹窗层级最高，避免被其他弹窗遮挡 */
-    >.nickname-editor-popup {
+    > .nickname-editor-popup {
       z-index: 1001;
     }
   }
@@ -2450,45 +2534,14 @@ $radius-lg: 36rpx;
             border-radius: 4rpx;
             animation: none;
 
-            &:nth-child(1) {
+            &:nth-child(1) { height: 60rpx; animation-delay: 0s; }
-              height: 60rpx;
+            &:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
-              animation-delay: 0s;
+            &: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(2) {
+            &:nth-child(6) { height: 100rpx; animation-delay: 0.5s; }
-              height: 90rpx;
+            &:nth-child(7) { height: 80rpx; animation-delay: 0.6s; }
-              animation-delay: 0.1s;
+            &:nth-child(8) { height: 40rpx; animation-delay: 0.7s; }
-            }
-
-            &: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%;
   }
@@ -2738,8 +2782,7 @@ $radius-lg: 36rpx;
       .message-item {
         margin-bottom: 24rpx;
         
-        .user-message,
+        .user-message, .ai-message {
-        .ai-message {
           .avatar {
             width: 72rpx;
             height: 72rpx;