From de79c227e2f77fd1cd93b8f8c5409d2c3437ec59 Mon Sep 17 00:00:00 2001
From: ViperEkura <3081035982@qq.com>
Date: Thu, 26 Mar 2026 17:18:47 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=89=8D=E7=AB=AF=E6=80=A7=E8=83=BD?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20-=20=E6=9E=84=E5=BB=BA=E5=88=86=E5=8C=85?=
 =?UTF-8?q?=E3=80=81=E5=BC=82=E6=AD=A5=E7=BB=84=E4=BB=B6=E3=80=81=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html                           |  3 ++
 frontend/src/App.vue                          | 45 +++++++++++--------
 frontend/src/components/ChatView.vue          |  9 +++-
 frontend/src/components/ProcessBlock.vue      |  9 +++-
 .../src/composables/useCodeEnhancement.js     | 14 +++++-
 frontend/src/styles/highlight.css             |  2 +-
 frontend/vite.config.js                       | 10 +++++
 7 files changed, 67 insertions(+), 25 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index 68d26d0..60b5cd8 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
     <title>Chat</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
   </head>
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3260865..038ef0a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -57,22 +57,23 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, shallowRef, computed, onMounted, defineAsyncComponent, triggerRef } from 'vue'
 import Sidebar from './components/Sidebar.vue'
 import ChatView from './components/ChatView.vue'
-import SettingsPanel from './components/SettingsPanel.vue'
-import StatsPanel from './components/StatsPanel.vue'
+
+const SettingsPanel = defineAsyncComponent(() => import('./components/SettingsPanel.vue'))
+const StatsPanel = defineAsyncComponent(() => import('./components/StatsPanel.vue'))
 import { conversationApi, messageApi } from './api'
 
 // -- Conversations state --
-const conversations = ref([])
+const conversations = shallowRef([])
 const currentConvId = ref(null)
 const loadingConvs = ref(false)
 const hasMoreConvs = ref(false)
 const nextConvCursor = ref(null)
 
 // -- Messages state --
-const messages = ref([])
+const messages = shallowRef([])
 const hasMoreMessages = ref(false)
 const loadingMessages = ref(false)
 const nextMsgCursor = ref(null)
@@ -81,8 +82,8 @@ const nextMsgCursor = ref(null)
 const streaming = ref(false)
 const streamContent = ref('')
 const streamThinking = ref('')
-const streamToolCalls = ref([])
-const streamProcessSteps = ref([])
+const streamToolCalls = shallowRef([])
+const streamProcessSteps = shallowRef([])
 
 // 保存每个对话的流式状态
 const streamStates = new Map()
@@ -151,7 +152,7 @@ async function loadConversations(reset = true) {
     if (reset) {
       conversations.value = res.data.items
     } else {
-      conversations.value.push(...res.data.items)
+      conversations.value = [...conversations.value, ...res.data.items]
     }
     nextConvCursor.value = res.data.next_cursor
     hasMoreConvs.value = res.data.has_more
@@ -173,7 +174,7 @@ async function createConversation() {
       title: '新对话',
       project_id: currentProject.value?.id || null,
     })
-    conversations.value.unshift(res.data)
+    conversations.value = [res.data, ...conversations.value]
     await selectConversation(res.data.id)
   } catch (e) {
     console.error('Failed to create conversation:', e)
@@ -282,7 +283,7 @@ function createStreamCallbacks(convId, { updateConvList = true } = {}) {
 
       if (currentConvId.value === convId) {
         streaming.value = false
-        messages.value.push({
+        messages.value = [...messages.value, {
           id: data.message_id,
           conversation_id: convId,
           role: 'assistant',
@@ -292,16 +293,20 @@ function createStreamCallbacks(convId, { updateConvList = true } = {}) {
           process_steps: streamProcessSteps.value.filter(Boolean),
           token_count: data.token_count,
           created_at: new Date().toISOString(),
-        })
+        }]
         resetStreamState()
 
         if (updateConvList) {
           const idx = conversations.value.findIndex(c => c.id === convId)
           if (idx >= 0) {
-            const conv = idx > 0 ? conversations.value.splice(idx, 1)[0] : conversations.value[0]
-            conv.message_count = (conv.message_count || 0) + 2
-            if (data.suggested_title) conv.title = data.suggested_title
-            if (idx > 0) conversations.value.unshift(conv)
+            const conv = conversations.value[idx]
+            const updated = {
+              ...conv,
+              message_count: (conv.message_count || 0) + 2,
+              ...(data.suggested_title ? { title: data.suggested_title } : {}),
+            }
+            const newList = conversations.value.filter((_, i) => i !== idx)
+            conversations.value = [updated, ...newList]
           }
         }
       } else {
@@ -309,11 +314,13 @@ function createStreamCallbacks(convId, { updateConvList = true } = {}) {
           const res = await messageApi.list(convId, null, 50)
           const idx = conversations.value.findIndex(c => c.id === convId)
           if (idx >= 0) {
-            conversations.value[idx].message_count = res.data.items.length
+            const conv = conversations.value[idx]
+            const updates = { message_count: res.data.items.length }
             if (res.data.items.length > 0) {
               const convRes = await conversationApi.get(convId)
-              if (convRes.data.title) conversations.value[idx].title = convRes.data.title
+              if (convRes.data.title) updates.title = convRes.data.title
             }
+            conversations.value = conversations.value.map((c, i) => i === idx ? { ...c, ...updates } : c)
           }
         } catch (_) {}
       }
@@ -345,7 +352,7 @@ async function sendMessage(data) {
     token_count: 0,
     created_at: new Date().toISOString(),
   }
-  messages.value.push(userMsg)
+  messages.value = [...messages.value, userMsg]
 
   initStreamState()
 
@@ -410,7 +417,7 @@ async function saveSettings(data) {
     const res = await conversationApi.update(currentConvId.value, data)
     const idx = conversations.value.findIndex(c => c.id === currentConvId.value)
     if (idx !== -1) {
-      conversations.value[idx] = { ...conversations.value[idx], ...res.data }
+    conversations.value = conversations.value.map((c, i) => i === idx ? { ...c, ...res.data } : c)
     }
   } catch (e) {
     console.error('Failed to save settings:', e)
diff --git a/frontend/src/components/ChatView.vue b/frontend/src/components/ChatView.vue
index da05b83..c7dc2a7 100644
--- a/frontend/src/components/ChatView.vue
+++ b/frontend/src/components/ChatView.vue
@@ -42,6 +42,7 @@
               v-for="msg in messages"
               :key="msg.id"
               :data-msg-id="msg.id"
+              v-memo="[msg.text, msg.thinking, msg.tool_calls, msg.process_steps, msg.attachments]"
             >
               <MessageBubble
                 :role="msg.role"
@@ -119,6 +120,7 @@ const inputRef = ref(null)
 const modelNameMap = ref({})
 const activeMessageId = ref(null)
 let scrollObserver = null
+const observedElements = new WeakSet()
 
 function formatModelName(modelId) {
   return modelNameMap.value[modelId] || modelId
@@ -158,7 +160,12 @@ watch(() => props.messages.length, () => {
   nextTick(() => {
     if (!scrollObserver || !scrollContainer.value) return
     const wrappers = scrollContainer.value.querySelectorAll('[data-msg-id]')
-    wrappers.forEach(el => scrollObserver.observe(el))
+    wrappers.forEach(el => {
+      if (!observedElements.has(el)) {
+        scrollObserver.observe(el)
+        observedElements.add(el)
+      }
+    })
   })
 })
 
diff --git a/frontend/src/components/ProcessBlock.vue b/frontend/src/components/ProcessBlock.vue
index a67aaab..a853991 100644
--- a/frontend/src/components/ProcessBlock.vue
+++ b/frontend/src/components/ProcessBlock.vue
@@ -211,8 +211,13 @@ const processItems = computed(() => {
   return items
 })
 
-// 增强 processBlock 内代码块（必须在 processItems 定义之后）
-useCodeEnhancement(processRef, processItems, { deep: true })
+// 增强 processBlock 内代码块
+const { enhance, debouncedEnhance } = useCodeEnhancement(processRef, processItems, { deep: true })
+
+// 流式时使用节流的代码块增强，减少 DOM 操作
+watch(() => props.streamingContent?.length, () => {
+  if (props.streaming) debouncedEnhance()
+})
 </script>
 
 <style scoped>
diff --git a/frontend/src/composables/useCodeEnhancement.js b/frontend/src/composables/useCodeEnhancement.js
index 0439e1a..ffe53c7 100644
--- a/frontend/src/composables/useCodeEnhancement.js
+++ b/frontend/src/composables/useCodeEnhancement.js
@@ -1,4 +1,4 @@
-import { watch, onMounted, nextTick } from 'vue'
+import { watch, onMounted, nextTick, onUnmounted } from 'vue'
 import { enhanceCodeBlocks } from '../utils/markdown'
 
 /**
@@ -10,15 +10,25 @@ import { enhanceCodeBlocks } from '../utils/markdown'
  * @param {import('vue').WatchOptions} [watchOpts] - Optional watch options (e.g. { deep: true })
  */
 export function useCodeEnhancement(templateRef, dep, watchOpts) {
+  let debounceTimer = null
+
   function enhance() {
     enhanceCodeBlocks(templateRef.value)
   }
 
+  function debouncedEnhance() {
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => nextTick(enhance), 150)
+  }
+
   onMounted(enhance)
+  onUnmounted(() => {
+    if (debounceTimer) clearTimeout(debounceTimer)
+  })
 
   if (dep) {
     watch(dep, () => nextTick(enhance), watchOpts)
   }
 
-  return { enhance }
+  return { enhance, debouncedEnhance }
 }
diff --git a/frontend/src/styles/highlight.css b/frontend/src/styles/highlight.css
index 69c532a..3c9cf96 100644
--- a/frontend/src/styles/highlight.css
+++ b/frontend/src/styles/highlight.css
@@ -1,5 +1,5 @@
 /* highlight.js - Light theme for code blocks */
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
+/* JetBrains Mono font loaded via <link> in index.html */
 
 .hljs {
   color: #24292f;
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index cff26f4..4483a15 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -23,4 +23,14 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vendor-markdown': ['marked', 'marked-highlight', 'highlight.js'],
+          'vendor-katex': ['katex'],
+        },
+      },
+    },
+  },
 })
