feat:修改滚动效果,让图表出现在可视区域

src/views/components/AiChat.vue

@@ -292,7 +292,7 @@ const handleSSEMessage = (data: SSEData, isSimulated: boolean = false) => {
     }
 
     nextTick(() => {
-      scrollToBottom();
+      smartScroll();
     });
   } catch (error) {
     console.error('处理SSE消息时出错:', error);
@@ -806,6 +806,47 @@ const scrollToBottom = () => {
   }
 };
 
+// 智能滚动：检查当前会话的最新消息是否有图表，有则滚动到图表区域，否则滚动到底部
+const smartScroll = () => {
+  if (!messagesContainer.value) return;
+  
+  // 直接检查最新的一条接收消息（当前会话）
+  const latestMessage = messages.value[messages.value.length - 1];
+  
+  // 如果是接收消息且包含图表数据
+  if (latestMessage && latestMessage.messageType === 'received' && 
+      latestMessage.contentBlocks.some(block => block.chartData)) {
+    
+    nextTick(() => {
+      const container = messagesContainer.value;
+      if (!container) return;
+      
+      // 直接获取最新的接收消息元素
+       const messageElements = container.querySelectorAll('.message.received');
+       if (messageElements.length > 0) {
+         const latestElement = messageElements[messageElements.length - 1];
+         
+         // 查找 ChartComponent 中的总结区域 (.tips)
+         const tipsElement = latestElement.querySelector('.chart-container .tips');
+         if (tipsElement) {
+          // 滚动到总结区域的顶部
+          tipsElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+         } else {
+           // 如果没有找到总结区域，滚动到整个消息的顶部
+           latestElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+         }
+         return;
+       }
+      
+      // 如果找不到元素，回退到滚动到底部
+      scrollToBottom();
+    });
+  } else {
+    // 如果没有图表，直接滚动到底部
+    scrollToBottom();
+  }
+};
+
 // 暴露组件方法给外部使用
 defineExpose({
   // 消息处理方法