vue_zhongyou 1.0.25 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "",
   "main": "index.js",
   "keywords": [],

package//345/212/237/350/203/275/344/273/243/347/240/201/AI/345/257/271/350/257/235/aiChatPage.vue

@@ -166,6 +166,15 @@ const inputComRef = ref(null)
 const abortControllerRef = ref(null)
 // 当前正在接收流式响应的消息索引
 const streamingMessageIndex = ref(-1)
+// SSE重连相关
+const reconnectAttempts = ref(0)
+const maxReconnectAttempts = ref(3)
+const reconnectDelay = ref(1000) // 初始重连延迟1秒
+const reconnectTimerRef = ref(null)
+// 当前请求体，用于重连时重新发送
+const currentRequestBody = ref(null)
+// 当前用户输入，用于重连时重新发送
+const currentUserInput = ref('')
 
 
 // 判断消息类型
@@ -260,10 +269,21 @@ const sendMessage = async () => {
   const text = inputComRef.value.inputText.trim()
   if (!text || isLoading.value) return
 
-  // 取消之前的请求
+  // 取消之前的请求和重连定时器
   if (abortControllerRef.value) {
     abortControllerRef.value.abort()
   }
+  if (reconnectTimerRef.value) {
+    clearTimeout(reconnectTimerRef.value)
+    reconnectTimerRef.value = null
+  }
+  
+  // 重置重连计数器和延迟
+  reconnectAttempts.value = 0
+  reconnectDelay.value = 1000
+
+  // 保存当前请求信息，用于重连
+  currentUserInput.value = text
 
   // 添加用户消息
   addMessage('user', text)
@@ -291,7 +311,16 @@ const sendMessage = async () => {
       }
     }
   }
+  
+  // 保存请求体，用于重连
+  currentRequestBody.value = requestBody
+
+  // 执行SSE请求
+  await executeSSERequest(requestBody, text)
+}
 
+// 执行SSE请求
+const executeSSERequest = async (requestBody, userText) => {
   // 创建新的AbortController
   abortControllerRef.value = new AbortController()
 
@@ -308,7 +337,7 @@ const sendMessage = async () => {
         'Cache-Control': 'no-cache'
       },
       body: JSON.stringify({
-        message: text
+        message: userText
       }),
       signal: abortControllerRef.value.signal
     })
@@ -322,11 +351,16 @@ const sendMessage = async () => {
     const decoder = new TextDecoder()
     let buffer = ''
     
+    // 重置重连计数器（连接成功）
+    reconnectAttempts.value = 0
+    
     while (true) {
       const { done, value } = await reader.read()
+      console.log(done, value);
       
       if (done) {
         console.log('SSE流读取完成')
+        // 流正常结束，不需要重连
         break
       }
       
@@ -380,9 +414,44 @@ const sendMessage = async () => {
       console.log('请求已取消')
     } else {
       console.error('SSE请求失败:', error)
+      // 处理SSE错误并重试
       handleSSEError('连接失败，请重试')
+      // 尝试重连
+      attemptReconnect()
+    }
+  }
+}
+
+// 尝试重新连接
+const attemptReconnect = () => {
+  // 检查是否达到最大重试次数
+  if (reconnectAttempts.value >= maxReconnectAttempts.value) {
+    console.error('已达到最大重连次数，停止重连')
+    // 更新消息状态
+    const messageIndex = streamingMessageIndex.value
+    if (messageIndex !== -1 && messages.value[messageIndex]) {
+      messages.value[messageIndex].loading = false
+      messages.value[messageIndex].content = '连接已断开，建议重试'
     }
+    isLoading.value = false
+    return
   }
+  
+  // 增加重连计数器
+  reconnectAttempts.value++
+  
+  // 指数退避策略，每次重连延迟翻倍
+  const delay = reconnectDelay.value * Math.pow(2, reconnectAttempts.value - 1)
+  
+  console.log(`SSE连接失败，${delay}ms后尝试第${reconnectAttempts.value}次重连...`)
+  
+  // 设置重连定时器
+  reconnectTimerRef.value = setTimeout(async () => {
+    console.log(`尝试第${reconnectAttempts.value}次重连...`)
+    
+    // 重新执行SSE请求
+    await executeSSERequest(currentRequestBody.value, currentUserInput.value)
+  }, delay)
 }
 
 // 处理SSE消息
@@ -463,6 +532,11 @@ onUnmounted(() => {
     abortControllerRef.value.abort()
     abortControllerRef.value = null
   }
+  // 清理重连定时器
+  if (reconnectTimerRef.value) {
+    clearTimeout(reconnectTimerRef.value)
+    reconnectTimerRef.value = null
+  }
 })
 
 // 格式化消息内容（支持Markdown）
@@ -708,6 +782,7 @@ const handleLoadMore = (message) => {
   // max-width: 75%;
   flex: 1;
   gap: 6px;
+  overflow: hidden;
 }
 
 .message-bubble {
@@ -715,11 +790,15 @@ const handleLoadMore = (message) => {
   word-wrap: break-word;
   word-break: break-word;
   line-height: 1.5;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
 }
 
 .message-text {
   font-size: 15px;
   white-space: pre-wrap;
+  overflow: hidden;
   
   // Markdown样式隔离 - 使用深度选择器控制所有Markdown元素
   :deep(*) {
@@ -804,6 +883,8 @@ const handleLoadMore = (message) => {
     border-radius: 3px;
     font-size: 0.9em;
     color: #e83e8c;
+    word-break: break-all;
+    word-wrap: break-word;
   }
   
   :deep(pre) {
@@ -813,8 +894,13 @@ const handleLoadMore = (message) => {
     padding: 12px;
     margin: 0.5em 0;
     overflow-x: auto;
-    font-size: 0.9em;
+    overflow-y: hidden;
+    font-size: 0.85em;
     line-height: 1.5;
+    max-width: 100%;
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    word-break: break-all;
   }
   
   :deep(pre code) {
@@ -823,6 +909,10 @@ const handleLoadMore = (message) => {
     border-radius: 0;
     font-size: inherit;
     color: inherit;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
   }
   
   // 引用样式
@@ -840,12 +930,17 @@ const handleLoadMore = (message) => {
     width: 100%;
     margin: 0.5em 0;
     font-size: 0.95em;
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
   }
   
   :deep(table th), :deep(table td) {
     border: 1px solid #dfe2e5;
     padding: 6px 12px;
     text-align: left;
+    white-space: nowrap;
+    min-width: 80px;
   }
   
   :deep(table th) {
@@ -863,6 +958,7 @@ const handleLoadMore = (message) => {
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-bottom-color 0.2s;
+    word-break: break-all;
   }
   
   :deep(a:hover) {