优化前端

frontend/app/web-gold/src/components/ChatMessageRenderer.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="prompt-display" v-html="renderedContent"></div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { renderMarkdown } from '@/utils/markdown'
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: ''
+  },
+  isStreaming: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 已完成的 chunks（包含已渲染的 HTML）
+const chunks = ref([])
+// chunk ID 计数器
+const chunkIdCounter = ref(0)
+
+/**
+ * 创建 chunk 对象（包含预渲染的 HTML）
+ */
+function createChunk(text) {
+  return {
+    id: chunkIdCounter.value++,
+    text: text.trim(),
+    rendered: renderMarkdown(text.trim()) // 预渲染，避免重复渲染
+  }
+}
+
+/**
+ * 智能分块：业界成熟方案
+ */
+function splitIntoChunks(text) {
+  if (!text || !text.trim()) return []
+  
+  const result = []
+  
+  // 第一级：按段落分割（双换行）
+  const paragraphs = text.split(/\n\s*\n/)
+  
+  for (const paragraph of paragraphs) {
+    if (!paragraph.trim()) continue
+    
+    // 如果段落长度适中（< 500字符），直接作为一个 chunk
+    if (paragraph.trim().length < 500) {
+      result.push(createChunk(paragraph))
+      continue
+    }
+    
+    // 第二级：段落太长，按句子分割
+    const sentences = paragraph.split(/([。！？.!?]\s*)/)
+    let currentChunk = ''
+    
+    for (let i = 0; i < sentences.length; i++) {
+      currentChunk += sentences[i]
+      
+      // 如果累积的句子达到一定长度（> 300字符），创建一个 chunk
+      if (currentChunk.trim().length > 300) {
+        result.push(createChunk(currentChunk))
+        currentChunk = ''
+      }
+    }
+    
+    // 处理剩余的文本
+    if (currentChunk.trim()) {
+      if (currentChunk.trim().length > 500) {
+        // 第三级：按固定长度分割
+        const fixedLength = 400
+        let start = 0
+        while (start < currentChunk.length) {
+          const end = Math.min(start + fixedLength, currentChunk.length)
+          const chunkText = currentChunk.slice(start, end).trim()
+          if (chunkText) {
+            result.push(createChunk(chunkText))
+          }
+          start = end
+        }
+      } else {
+        result.push(createChunk(currentChunk))
+      }
+    }
+  }
+  
+  return result
+}
+
+/**
+ * 计算流式传输中的文本
+ */
+const streamingText = computed(() => {
+  if (!props.isStreaming || !props.content) return ''
+  
+  const text = props.content
+  
+  // 优先查找最后一个段落分隔符
+  const lastParagraphIndex = text.lastIndexOf('\n\n')
+  if (lastParagraphIndex !== -1) {
+    return text.slice(lastParagraphIndex + 2)
+  }
+  
+  // 查找最后一个句子结束符
+  const lastSentenceMatch = text.match(/([。！？.!?]\s*)(?!.*[。！？.!?]\s*)/)
+  if (lastSentenceMatch) {
+    return text.slice(lastSentenceMatch.index + lastSentenceMatch[0].length)
+  }
+  
+  // 全部作为流式文本
+  return text
+})
+
+/**
+ * 计算最终渲染的内容（合并所有 chunks 和流式文本）
+ */
+const renderedContent = computed(() => {
+  let html = ''
+  
+  // 添加已完成的 chunks
+  for (const chunk of chunks.value) {
+    html += chunk.rendered
+  }
+  
+  // 添加流式传输中的文本
+  if (props.isStreaming && streamingText.value) {
+    html += renderMarkdown(streamingText.value)
+  }
+  
+  return html
+})
+
+/**
+ * 增量更新 chunks（避免全量重新渲染）
+ */
+function updateChunksIncremental(content) {
+  if (!content) {
+    chunks.value = []
+    return
+  }
+  
+  const text = content
+  
+  // 查找最后一个段落分隔符
+  const lastParagraphIndex = text.lastIndexOf('\n\n')
+  let completedText = ''
+  
+  if (lastParagraphIndex !== -1) {
+    completedText = text.slice(0, lastParagraphIndex)
+  } else {
+    // 没有段落分隔符，查找最后一个句子结束符
+    const lastSentenceMatch = text.match(/([。！？.!?]\s*)(?!.*[。！？.!?]\s*)/)
+    if (lastSentenceMatch && lastSentenceMatch.index > 300) {
+      completedText = text.slice(0, lastSentenceMatch.index + lastSentenceMatch[0].length)
+    } else {
+      // 流式传输中，还没有完整的段落或句子
+      return
+    }
+  }
+  
+  // 分割已完成的文本
+  const newChunks = splitIntoChunks(completedText)
+  
+  // 增量更新：只添加新的 chunks，保留已存在的
+  if (newChunks.length > chunks.value.length) {
+    // 只添加新增的 chunks
+    const existingTexts = new Set(chunks.value.map(c => c.text))
+    for (let i = chunks.value.length; i < newChunks.length; i++) {
+      if (!existingTexts.has(newChunks[i].text)) {
+        chunks.value.push(newChunks[i])
+      }
+    }
+  }
+}
+
+/**
+ * 处理内容更新
+ */
+function updateChunks(content) {
+  if (!content) {
+    chunks.value = []
+    return
+  }
+  
+  if (props.isStreaming) {
+    // 流式模式：增量更新
+    updateChunksIncremental(content)
+  } else {
+    // 非流式模式：完整分割
+    chunks.value = splitIntoChunks(content)
+  }
+}
+
+// 监听 content 变化
+watch(() => props.content, (newContent) => {
+  updateChunks(newContent)
+}, { immediate: true })
+
+// 监听 isStreaming 变化：流式结束时处理最后一个未完成的块
+watch(() => props.isStreaming, (newVal, oldVal) => {
+  if (!newVal && oldVal && props.content) {
+    // 流式结束，完整重新分割
+    const newChunks = splitIntoChunks(props.content)
+    chunks.value = newChunks
+  }
+})
+</script>
+
+<style scoped>
+/* 修复 pre 标签撑开容器的问题 */
+.prompt-display :deep(pre) {
+  max-width: 100%;
+  overflow-x: auto;
+  word-break: break-word;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>