提示词保存

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

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue'
+import { ref, watch, onUnmounted } from 'vue'
 import { renderMarkdown } from '@/utils/markdown'
 
 const props = defineProps({
@@ -17,196 +17,152 @@ const props = defineProps({
   }
 })
 
-// 已完成的 chunks（包含已渲染的 HTML）
-const chunks = ref([])
-// chunk ID 计数器
-const chunkIdCounter = ref(0)
+// 当前显示的内容（用于打字机效果）
+const displayedContent = ref('')
+// 目标内容（完整内容）
+const targetContent = ref('')
+// 动画帧 ID
+let animationFrameId = null
+// 打字机速度（字符/帧，可根据性能调整）
+const TYPING_SPEED = 3
+// 是否正在执行打字机动画
+const isTyping = ref(false)
 
 /**
- * 创建 chunk 对象（包含预渲染的 HTML）
+ * 高性能打字机效果渲染
+ * 使用 requestAnimationFrame 实现平滑的逐字符显示
  */
-function createChunk(text) {
-  return {
-    id: chunkIdCounter.value++,
-    text: text.trim(),
-    rendered: renderMarkdown(text.trim()) // 预渲染，避免重复渲染
-  }
-}
-
-/**
- * 智能分块：业界成熟方案
- */
-function splitIntoChunks(text) {
-  if (!text || !text.trim()) return []
+function typewriterEffect() {
+  if (!isTyping.value) return
   
-  const result = []
+  const currentLength = displayedContent.value.length
+  const targetLength = targetContent.value.length
   
-  // 第一级：按段落分割（双换行）
-  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 = []
+  if (currentLength >= targetLength) {
+    // 已完成，停止动画
+    isTyping.value = false
+    displayedContent.value = targetContent.value
     return
   }
   
-  const text = content
+  // 每次增加多个字符以提高性能
+  const nextLength = Math.min(currentLength + TYPING_SPEED, targetLength)
+  displayedContent.value = targetContent.value.slice(0, nextLength)
   
-  // 查找最后一个段落分隔符
-  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])
-      }
-    }
-  }
+  // 继续下一帧
+  animationFrameId = requestAnimationFrame(typewriterEffect)
 }
 
+/**
+ * 开始打字机效果
+ */
+function startTypewriter() {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+  }
+  
+  isTyping.value = true
+  animationFrameId = requestAnimationFrame(typewriterEffect)
+}
+
+/**
+ * 停止打字机效果
+ */
+function stopTypewriter() {
+  if (animationFrameId) {
+    cancelAnimationFrame(animationFrameId)
+    animationFrameId = null
+  }
+  isTyping.value = false
+}
+
+/**
+ * 计算渲染的 HTML 内容
+ */
+const renderedContent = ref('')
+
+/**
+ * 更新渲染内容
+ */
+function updateRenderedContent() {
+  const content = displayedContent.value
+  if (!content) {
+    renderedContent.value = ''
+    return
+  }
+  
+  // 渲染 markdown 为 HTML
+  renderedContent.value = renderMarkdown(content)
+}
+
+// 监听 displayedContent 变化，更新渲染
+watch(displayedContent, () => {
+  updateRenderedContent()
+}, { immediate: true })
+
 /**
  * 处理内容更新
  */
-function updateChunks(content) {
-  if (!content) {
-    chunks.value = []
+function handleContentUpdate(newContent) {
+  if (!newContent) {
+    targetContent.value = ''
+    displayedContent.value = ''
+    stopTypewriter()
     return
   }
   
+  // 更新目标内容
+  targetContent.value = newContent
+  
   if (props.isStreaming) {
-    // 流式模式：增量更新
-    updateChunksIncremental(content)
+    // 流式传输模式：使用打字机效果显示内容
+    // 流式传输时，内容会逐步到达，使用打字机效果增强体验
+    const currentLength = displayedContent.value.length
+    const newLength = newContent.length
+    
+    if (newLength !== currentLength) {
+      // 内容发生变化
+      if (newLength < currentLength) {
+        // 内容被重置或缩短，直接显示新内容
+        displayedContent.value = newContent
+        stopTypewriter()
+      } else {
+        // 内容增加，使用打字机效果显示新增部分
+        if (!isTyping.value) {
+          startTypewriter()
+        }
+      }
+    }
   } else {
-    // 非流式模式：完整分割
-    chunks.value = splitIntoChunks(content)
+    // 静态内容模式：直接显示全部内容，不使用打字机效果
+    displayedContent.value = newContent
+    stopTypewriter()
   }
 }
 
 // 监听 content 变化
 watch(() => props.content, (newContent) => {
-  updateChunks(newContent)
+  handleContentUpdate(newContent)
 }, { immediate: true })
 
-// 监听 isStreaming 变化：流式结束时处理最后一个未完成的块
+// 监听 isStreaming 变化
 watch(() => props.isStreaming, (newVal, oldVal) => {
-  if (!newVal && oldVal && props.content) {
-    // 流式结束，完整重新分割
-    const newChunks = splitIntoChunks(props.content)
-    chunks.value = newChunks
+  if (!newVal && oldVal) {
+    // 流式传输结束，确保显示完整内容，停止打字机效果
+    if (targetContent.value) {
+      displayedContent.value = targetContent.value
+    }
+    stopTypewriter()
+  } else if (newVal) {
+    // 开始流式传输，如果内容有变化，启动打字机效果
+    // 打字机效果会在 handleContentUpdate 中根据内容变化自动启动
   }
 })
+
+// 组件卸载时清理
+onUnmounted(() => {
+  stopTypewriter()
+})
 </script>
 
 <style scoped>