From 522e88a6a25f1f89c27077af763d35204460a470 Mon Sep 17 00:00:00 2001
From: Jerry Yan <792602257@qq.com>
Date: Fri, 12 Jun 2026 13:36:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/client.ts                          |  7 ++++++-
 web/src/components/acp/AgentKindForm.vue       | 12 ++++++++----
 web/src/utils/markdown.ts                      |  3 +++
 web/src/views/chat/ChatDetailView.vue          |  1 +
 .../views/chat/components/MessageBubble.vue    |  5 +----
 .../projects/components/ArtifactPanel.vue      |  4 +---
 .../components/RequirementChatPanel.vue        |  1 +
 .../components/RequirementHistoryPanel.vue     |  3 +--
 .../components/RequirementSummaryPanel.vue     |  4 +---
 .../projects/components/SaveArtifactModal.vue  |  3 +--
 web/vite.config.ts                             | 18 ++++++++++++++++++
 11 files changed, 42 insertions(+), 19 deletions(-)
 create mode 100644 web/src/utils/markdown.ts

diff --git a/web/src/api/client.ts b/web/src/api/client.ts
index edb0e1d..a7c1503 100644
--- a/web/src/api/client.ts
+++ b/web/src/api/client.ts
@@ -34,11 +34,13 @@ export async function request<T>(path: string, opts: RequestOptions = {}): Promi
 
   const controller = new AbortController()
   const timer = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT_MS)
+  let onAbort: (() => void) | undefined
   if (opts.signal) {
     if (opts.signal.aborted) {
       controller.abort()
     } else {
-      opts.signal.addEventListener('abort', () => controller.abort(), { once: true })
+      onAbort = () => controller.abort()
+      opts.signal.addEventListener('abort', onAbort, { once: true })
     }
   }
 
@@ -78,6 +80,9 @@ export async function request<T>(path: string, opts: RequestOptions = {}): Promi
     return data as T
   } finally {
     clearTimeout(timer)
+    if (opts.signal && onAbort) {
+      opts.signal.removeEventListener('abort', onAbort)
+    }
   }
 }
 
diff --git a/web/src/components/acp/AgentKindForm.vue b/web/src/components/acp/AgentKindForm.vue
index 80e64ca..c8fcae1 100644
--- a/web/src/components/acp/AgentKindForm.vue
+++ b/web/src/components/acp/AgentKindForm.vue
@@ -57,11 +57,12 @@ const allowlistText = computed({
 })
 
 interface EnvRow {
+  id: string
   k: string
   v: string
 }
 const envEntries = ref<EnvRow[]>(
-  Object.entries(local.value.env).map(([k, v]) => ({ k, v })),
+  Object.entries(local.value.env).map(([k, v]) => ({ id: crypto.randomUUID(), k, v })),
 )
 
 watch(
@@ -77,7 +78,7 @@ watch(
 )
 
 function addEnv() {
-  envEntries.value.push({ k: '', v: '' })
+  envEntries.value.push({ id: crypto.randomUUID(), k: '', v: '' })
 }
 function removeEnv(idx: number) {
   envEntries.value.splice(idx, 1)
@@ -94,6 +95,7 @@ const mcpTypeOptions = [
 ]
 
 interface McpRow {
+  id: string
   name: string
   type: 'stdio' | 'http' | 'sse'
   command: string
@@ -123,6 +125,7 @@ function parseKV(s: string): Record<string, string> | undefined {
 
 function specsToRows(specs: McpServerSpec[]): McpRow[] {
   return specs.map((s) => ({
+    id: crypto.randomUUID(),
     name: s.name,
     type: s.type,
     command: s.command ?? '',
@@ -173,6 +176,7 @@ watch(
 
 function addMcpServer() {
   mcpRows.value.push({
+    id: crypto.randomUUID(),
     name: '',
     type: 'http',
     command: '',
@@ -258,7 +262,7 @@ function removeMcpServer(idx: number) {
       </p>
       <div
         v-for="(e, idx) in envEntries"
-        :key="idx"
+        :key="e.id"
         class="flex gap-2 mb-2"
       >
         <NInput
@@ -305,7 +309,7 @@ function removeMcpServer(idx: number) {
       </label>
       <div
         v-for="(m, idx) in mcpRows"
-        :key="idx"
+        :key="m.id"
         class="border rounded p-3 mb-2 space-y-2"
       >
         <div class="flex gap-2">
diff --git a/web/src/utils/markdown.ts b/web/src/utils/markdown.ts
new file mode 100644
index 0000000..b90c77b
--- /dev/null
+++ b/web/src/utils/markdown.ts
@@ -0,0 +1,3 @@
+import MarkdownIt from 'markdown-it'
+
+export const md = new MarkdownIt({ html: false, breaks: true, linkify: true })
diff --git a/web/src/views/chat/ChatDetailView.vue b/web/src/views/chat/ChatDetailView.vue
index b3e57ce..6995e8d 100644
--- a/web/src/views/chat/ChatDetailView.vue
+++ b/web/src/views/chat/ChatDetailView.vue
@@ -94,6 +94,7 @@
             <MessageBubble
               v-for="m in chat.messages"
               :key="m.id"
+              v-memo="[m.id, m.content, m.status]"
               :message="m"
               @retry="onRetry"
             />
diff --git a/web/src/views/chat/components/MessageBubble.vue b/web/src/views/chat/components/MessageBubble.vue
index f294561..f4a4c10 100644
--- a/web/src/views/chat/components/MessageBubble.vue
+++ b/web/src/views/chat/components/MessageBubble.vue
@@ -93,13 +93,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { NCollapse, NCollapseItem, NButton } from 'naive-ui'
-import MarkdownIt from 'markdown-it'
-
 import type { ChatMessage } from '@/api/chat'
+import { md } from '@/utils/markdown'
 import { parseInteractiveMessage, type InteractiveQuestionAnswer } from '@/utils/interactiveMessage'
 import QuestionCard from './QuestionCard.vue'
-
-const md = new MarkdownIt({ html: false, breaks: true, linkify: true })
 // savable：仅需求阶段对话面板传 true，对成功的 assistant 回复显示「保存为产物」。
 const props = defineProps<{ message: ChatMessage; savable?: boolean; answerDisabled?: boolean }>()
 const emit = defineEmits<{
diff --git a/web/src/views/projects/components/ArtifactPanel.vue b/web/src/views/projects/components/ArtifactPanel.vue
index 2c0866e..f878bdb 100644
--- a/web/src/views/projects/components/ArtifactPanel.vue
+++ b/web/src/views/projects/components/ArtifactPanel.vue
@@ -112,9 +112,8 @@ import {
   NTag,
   NThing,
 } from 'naive-ui'
-import MarkdownIt from 'markdown-it'
-
 import type { Artifact, ArtifactPhase } from '@/api/projects'
+import { md } from '@/utils/markdown'
 import { useRequirementsStore } from '@/stores/requirements'
 
 const PHASE_TITLE: Record<ArtifactPhase, string> = {
@@ -131,7 +130,6 @@ const props = defineProps<{
 }>()
 
 const store = useRequirementsStore()
-const md = new MarkdownIt({ html: false, breaks: true, linkify: true })
 
 const artifacts = ref<Artifact[]>([])
 const selectedVersion = ref<number | null>(null)
diff --git a/web/src/views/projects/components/RequirementChatPanel.vue b/web/src/views/projects/components/RequirementChatPanel.vue
index 8e6bc77..a21be3e 100644
--- a/web/src/views/projects/components/RequirementChatPanel.vue
+++ b/web/src/views/projects/components/RequirementChatPanel.vue
@@ -71,6 +71,7 @@
       <MessageBubble
         v-for="m in session.messages.value"
         :key="m.id"
+        v-memo="[m.id, m.content, m.status]"
         :message="m"
         :savable="!readonly"
         :answer-disabled="readonly || session.isStreaming.value"
diff --git a/web/src/views/projects/components/RequirementHistoryPanel.vue b/web/src/views/projects/components/RequirementHistoryPanel.vue
index 5cfcef0..bc4cc76 100644
--- a/web/src/views/projects/components/RequirementHistoryPanel.vue
+++ b/web/src/views/projects/components/RequirementHistoryPanel.vue
@@ -201,11 +201,11 @@ import {
   NTag,
   NThing,
 } from 'naive-ui'
-import MarkdownIt from 'markdown-it'
 
 import { chatApi, type Conversation } from '@/api/chat'
 import { acpApi, type AcpSession } from '@/api/acp'
 import type { Artifact, ArtifactPhase, Phase } from '@/api/projects'
+import { md } from '@/utils/markdown'
 import { useRequirementsStore } from '@/stores/requirements'
 import SessionStatusBadge from '@/components/acp/SessionStatusBadge.vue'
 
@@ -227,7 +227,6 @@ const props = defineProps<{
 
 const router = useRouter()
 const store = useRequirementsStore()
-const md = new MarkdownIt({ html: false, breaks: true, linkify: true })
 
 const loading = ref(false)
 const artifacts = ref<Artifact[]>([])
diff --git a/web/src/views/projects/components/RequirementSummaryPanel.vue b/web/src/views/projects/components/RequirementSummaryPanel.vue
index 500a61f..d86de33 100644
--- a/web/src/views/projects/components/RequirementSummaryPanel.vue
+++ b/web/src/views/projects/components/RequirementSummaryPanel.vue
@@ -68,9 +68,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { NCard, NDivider, NEmpty, NList, NListItem, NSpin, NTag, NThing } from 'naive-ui'
-import MarkdownIt from 'markdown-it'
-
 import type { Artifact, ArtifactPhase } from '@/api/projects'
+import { md } from '@/utils/markdown'
 import { useRequirementsStore } from '@/stores/requirements'
 
 const PHASE_TITLE: Record<ArtifactPhase, string> = {
@@ -86,7 +85,6 @@ const props = defineProps<{
 }>()
 
 const store = useRequirementsStore()
-const md = new MarkdownIt({ html: false, breaks: true, linkify: true })
 
 const artifacts = ref<Artifact[]>([])
 const loading = ref(false)
diff --git a/web/src/views/projects/components/SaveArtifactModal.vue b/web/src/views/projects/components/SaveArtifactModal.vue
index 1f20072..27a56a1 100644
--- a/web/src/views/projects/components/SaveArtifactModal.vue
+++ b/web/src/views/projects/components/SaveArtifactModal.vue
@@ -54,10 +54,10 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { NButton, NInput, NModal, NTabPane, NTabs, useMessage } from 'naive-ui'
-import MarkdownIt from 'markdown-it'
 
 import type { ArtifactPhase } from '@/api/projects'
 import type { ChatMessage } from '@/api/chat'
+import { md } from '@/utils/markdown'
 import { useRequirementsStore } from '@/stores/requirements'
 
 const PHASE_TITLE: Record<ArtifactPhase, string> = {
@@ -78,7 +78,6 @@ const emit = defineEmits<{ 'update:show': [v: boolean]; saved: [] }>()
 
 const store = useRequirementsStore()
 const message = useMessage()
-const md = new MarkdownIt({ html: false, breaks: true, linkify: true })
 
 const content = ref('')
 const note = ref('')
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 64722bd..6ff1e78 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -20,5 +20,23 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     emptyOutDir: true,
+    sourcemap: true,
+    cssCodeSplit: true,
+    chunkSizeWarningLimit: 500,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (
+            id.includes('node_modules/vue/') ||
+            id.includes('node_modules/vue-router/') ||
+            id.includes('node_modules/pinia/')
+          ) {
+            return 'vendor'
+          }
+          if (id.includes('node_modules/naive-ui/')) return 'naive-ui'
+          if (id.includes('node_modules/markdown-it/')) return 'markdown'
+        },
+      },
+    },
   },
 })