vue_zhongyou 1.0.24 → 1.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue_zhongyou",
-  "version": "1.0.24",
+  "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

@@ -125,6 +125,30 @@ import ChatForm from '@/components/ChatForm.vue'
 import NewChatCardList from '@/components/newChatCardList.vue'
 import DynamicMobileForm from '@/components/dynamicMobileForm.vue'
 import inputCom from '@/components/inputCom.vue'
+import request from '@/api/request'
+// 引入核心库
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+// 引入高亮样式（任选一种）
+import 'highlight.js/styles/github.css';
+
+// 配置marked
+marked.setOptions({
+  renderer: new marked.Renderer(),
+  highlight: function(code, lang) {
+    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+    return hljs.highlight(code, { language }).value;
+  },
+  langPrefix: 'hljs language-',
+  pedantic: false,
+  gfm: true,
+  breaks: true,
+  sanitize: false,
+  smartLists: true,
+  smartypants: false,
+  xhtml: false
+});
+
 
 // 消息列表
 const messages = ref([])
@@ -138,10 +162,19 @@ const chatContainerRef = ref(null)
 const sessionId = ref('')
 // 输入组件引用
 const inputComRef = ref(null)
-// SSE连接引用
-const eventSourceRef = ref(null)
+// Axios取消请求控制器
+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('')
 
 
 // 判断消息类型
@@ -159,6 +192,7 @@ const isCardListMessage = (message) => {
 
 // 初始化欢迎消息
 onMounted(() => {
+
   addMessage('assistant', '您好！有什么可以帮助您的吗？', false)
   scrollToBottom()
 })
@@ -235,11 +269,21 @@ const sendMessage = async () => {
   const text = inputComRef.value.inputText.trim()
   if (!text || isLoading.value) return
 
-  // 关闭之前的SSE连接
-  if (eventSourceRef.value) {
-    eventSourceRef.value.close()
-    eventSourceRef.value = null
+  // 取消之前的请求和重连定时器
+  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)
@@ -267,60 +311,159 @@ const sendMessage = async () => {
       }
     }
   }
+  
+  // 保存请求体，用于重连
+  currentRequestBody.value = requestBody
+
+  // 执行SSE请求
+  await executeSSERequest(requestBody, text)
+}
+
+// 执行SSE请求
+const executeSSERequest = async (requestBody, userText) => {
+  // 创建新的AbortController
+  abortControllerRef.value = new AbortController()
 
   try {
-    // 创建SSE连接
+    // 使用fetch API发送SSE请求
     const baseURL = import.meta.env.VITE_API_BASE_URL || ''
-    const url = `${baseURL}/api/ai/chat/stream`
+    const url = `http://localhost:8080/ai/chat`
     
-    // 构建查询参数
-    const params = new URLSearchParams()
-    params.append('sessionId', requestBody.sessionId)
-    params.append('input', requestBody.input)
-    params.append('payload', JSON.stringify(requestBody.payload))
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'text/event-stream',
+        'Cache-Control': 'no-cache'
+      },
+      body: JSON.stringify({
+        message: userText
+      }),
+      signal: abortControllerRef.value.signal
+    })
     
-    const fullUrl = `${url}?${params.toString()}`
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
     
-    // 创建EventSource连接
-    eventSourceRef.value = new EventSource(fullUrl)
+    // 使用ReadableStream处理流式响应
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
     
-    // 监听消息事件
-    eventSourceRef.value.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data)
-        handleSSEMessage(data)
-      } catch (error) {
-        console.error('解析SSE消息失败:', error)
-      }
-    }
+    // 重置重连计数器（连接成功）
+    reconnectAttempts.value = 0
     
-    // 监听错误事件
-    eventSourceRef.value.onerror = (error) => {
-      console.error('SSE连接错误:', error)
-      handleSSEError()
+    while (true) {
+      const { done, value } = await reader.read()
+      console.log(done, value);
+      
+      if (done) {
+        console.log('SSE流读取完成')
+        // 流正常结束，不需要重连
+        break
+      }
+      
+      // 解码数据块
+      const chunk = decoder.decode(value, { stream: true })
+      console.log(chunk);
+      
+      buffer += chunk
+      
+      // 处理buffer中的完整消息
+      const lines = buffer.split('\n')
+      buffer = lines.pop() || '' // 保留最后一个不完整的行
+      
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const dataStr = line.slice(6).trim()
+          if (dataStr) {
+            try {
+              const data = JSON.parse(dataStr)
+              handleSSEMessage(data)
+            } catch (error) {
+              console.error('解析SSE消息失败:', error, dataStr)
+            }
+          }
+        }
+      }
     }
     
-    // 监听连接打开事件
-    eventSourceRef.value.onopen = () => {
-      console.log('SSE连接已建立')
+    // 处理buffer中剩余的数据
+    if (buffer.trim()) {
+      const lines = buffer.split('\n')
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const dataStr = line.slice(6).trim()
+          if (dataStr) {
+            try {
+              const data = JSON.parse(dataStr)
+              handleSSEMessage(data)
+            } catch (error) {
+              console.error('解析SSE消息失败:', error, dataStr)
+            }
+          }
+        }
+      }
     }
     
+    // 请求完成
+    console.log('SSE请求完成')
   } catch (error) {
-    console.error('创建SSE连接失败:', error)
-    showToast('连接失败，请重试')
-    handleSSEError()
+    if (error.name === 'AbortError') {
+      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消息
 const handleSSEMessage = (data) => {
+  
   const messageIndex = streamingMessageIndex.value
+  
   if (messageIndex === -1 || !messages.value[messageIndex]) return
   
   const currentMessage = messages.value[messageIndex]
-  
   // 根据消息类型处理
-  if (data.type === 'text') {
+  if (data.type === 'text' || data.type === 'message') {
     // 文本流式更新
     if (typeof currentMessage.content !== 'string') {
       currentMessage.content = ''
@@ -340,7 +483,7 @@ const handleSSEMessage = (data) => {
     for (let key in data) {
       currentMessage[key] = data[key]
     }
-  } else if (data.type === 'done') {
+  } else if (data.type === 'end') {
     // 流式传输完成
     currentMessage.loading = false
     isLoading.value = false
@@ -348,16 +491,17 @@ const handleSSEMessage = (data) => {
     // 为AI助手消息添加推荐信息
     currentMessage.suggestions = generateSuggestions(currentMessage.content)
     
-    // 关闭SSE连接
-    if (eventSourceRef.value) {
-      eventSourceRef.value.close()
-      eventSourceRef.value = null
+    // 清理请求控制器
+    if (abortControllerRef.value) {
+      abortControllerRef.value = null
     }
     streamingMessageIndex.value = -1
   } else if (data.type === 'error') {
     // 错误消息
     handleSSEError(data.message || '服务器错误')
   }
+  console.log(messages.value);
+  
 }
 
 // 处理SSE错误
@@ -375,26 +519,39 @@ const handleSSEError = (errorMessage = '连接中断，请重试') => {
   isLoading.value = false
   showToast(errorMessage)
   
-  // 关闭SSE连接
-  if (eventSourceRef.value) {
-    eventSourceRef.value.close()
-    eventSourceRef.value = null
+  // 清理请求控制器
+  if (abortControllerRef.value) {
+    abortControllerRef.value = null
   }
   streamingMessageIndex.value = -1
 }
 
 // 组件卸载时清理SSE连接
 onUnmounted(() => {
-  if (eventSourceRef.value) {
-    eventSourceRef.value.close()
-    eventSourceRef.value = null
+  if (abortControllerRef.value) {
+    abortControllerRef.value.abort()
+    abortControllerRef.value = null
+  }
+  // 清理重连定时器
+  if (reconnectTimerRef.value) {
+    clearTimeout(reconnectTimerRef.value)
+    reconnectTimerRef.value = null
   }
 })
 
-// 格式化消息内容（支持换行）
+// 格式化消息内容（支持Markdown）
 const formatMessage = (content) => {
   if (!content) return ''
-  return content.replace(/\n/g, '<br>')
+  
+  try {
+    // 使用marked将Markdown转换为HTML
+    const html = marked(content)
+    return html
+  } catch (error) {
+    console.error('Markdown转换失败:', error)
+    // 如果转换失败，回退到简单的换行处理
+    return content.replace(/\n/g, '<br>')
+  }
 }
 
 // 格式化时间
@@ -625,6 +782,7 @@ const handleLoadMore = (message) => {
   // max-width: 75%;
   flex: 1;
   gap: 6px;
+  overflow: hidden;
 }
 
 .message-bubble {
@@ -632,11 +790,216 @@ 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(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  // 标题样式
+  :deep(h1), :deep(h2), :deep(h3), :deep(h4), :deep(h5), :deep(h6) {
+    margin: 0.5em 0 0.3em 0;
+    font-weight: 600;
+    line-height: 1.4;
+    color: inherit;
+  }
+  
+  :deep(h1) {
+    font-size: 1.5em;
+    border-bottom: 1px solid #eaecef;
+    padding-bottom: 0.3em;
+  }
+  
+  :deep(h2) {
+    font-size: 1.3em;
+    border-bottom: 1px solid #eaecef;
+    padding-bottom: 0.3em;
+  }
+  
+  :deep(h3) {
+    font-size: 1.15em;
+  }
+  
+  :deep(h4) {
+    font-size: 1.05em;
+  }
+  
+  // 段落样式
+  :deep(p) {
+    margin: 0.3em 0;
+    line-height: 1.6;
+  }
+  
+  // 列表样式
+  :deep(ul), :deep(ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+    list-style-position: outside;
+  }
+  
+  :deep(ul) {
+    list-style-type: disc;
+  }
+  
+  :deep(ol) {
+    list-style-type: decimal;
+  }
+  
+  :deep(li) {
+    margin: 0.25em 0;
+    line-height: 1.6;
+    padding-left: 0.3em;
+  }
+  
+  :deep(ul ul), :deep(ol ul), :deep(ul ol), :deep(ol ol) {
+    margin: 0.25em 0;
+  }
+  
+  // 嵌套列表样式
+  :deep(ul ul) {
+    list-style-type: circle;
+  }
+  
+  :deep(ul ul ul) {
+    list-style-type: square;
+  }
+  
+  // 代码样式
+  :deep(code) {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: rgba(0, 0, 0, 0.06);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+    color: #e83e8c;
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+  
+  :deep(pre) {
+    background-color: #f6f8fa;
+    border: 1px solid #e1e4e8;
+    border-radius: 6px;
+    padding: 12px;
+    margin: 0.5em 0;
+    overflow-x: auto;
+    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) {
+    background-color: transparent;
+    padding: 0;
+    border-radius: 0;
+    font-size: inherit;
+    color: inherit;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  
+  // 引用样式
+  :deep(blockquote) {
+    margin: 0.5em 0;
+    padding: 0.5em 1em;
+    border-left: 4px solid #dfe2e5;
+    background-color: #f6f8fa;
+    color: #6a737d;
+  }
+  
+  // 表格样式
+  :deep(table) {
+    border-collapse: collapse;
+    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) {
+    background-color: #f6f8fa;
+    font-weight: 600;
+  }
+  
+  :deep(table tr:nth-child(even)) {
+    background-color: #fafbfc;
+  }
+  
+  // 链接样式
+  :deep(a) {
+    color: #1989fa;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: border-bottom-color 0.2s;
+    word-break: break-all;
+  }
+  
+  :deep(a:hover) {
+    border-bottom-color: #1989fa;
+  }
+  
+  // 图片样式
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+    margin: 0.5em 0;
+  }
+  
+  // 分隔线样式
+  :deep(hr) {
+    border: none;
+    border-top: 2px solid #e1e4e8;
+    margin: 1em 0;
+  }
+  
+  // 强调样式
+  :deep(strong), :deep(b) {
+    font-weight: 600;
+  }
+  
+  :deep(em), :deep(i) {
+    font-style: italic;
+  }
+  
+  // 删除线样式
+  :deep(del), :deep(s) {
+    text-decoration: line-through;
+    color: #6a737d;
+  }
+  
+  // 任务列表样式
+  :deep(input[type="checkbox"]) {
+    margin-right: 0.5em;
+    vertical-align: middle;
+  }
 }
 
 .message-output {
@@ -648,6 +1011,57 @@ const handleLoadMore = (message) => {
   background-color: #f8f9fa;
   border-radius: 8px;
   // border-left: 3px solid #1989fa;
+  
+  // Markdown样式隔离
+  :deep(*) {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  
+  :deep(p) {
+    margin: 0.3em 0;
+    line-height: 1.6;
+  }
+  
+  :deep(ul), :deep(ol) {
+    margin: 0.5em 0;
+    padding-left: 1.5em;
+    list-style-position: outside;
+  }
+  
+  :deep(ul) {
+    list-style-type: disc;
+  }
+  
+  :deep(ol) {
+    list-style-type: decimal;
+  }
+  
+  :deep(li) {
+    margin: 0.25em 0;
+    line-height: 1.6;
+    padding-left: 0.3em;
+  }
+  
+  :deep(code) {
+    font-family: 'Courier New', Courier, monospace;
+    background-color: rgba(0, 0, 0, 0.06);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+    color: #e83e8c;
+  }
+  
+  :deep(a) {
+    color: #1989fa;
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+  }
+  
+  :deep(a:hover) {
+    border-bottom-color: #1989fa;
+  }
 }
 
 .message-time {