fix(流程图渲染): 出错后再也画不出来、每失败一次往 body 漏一个 div

## 渲染失败后永久空白四个渲染点都是同一个写法： <n-alert v-if="renderError" ... /> <div v-else ref="mermaidContainer"></div> 一旦渲染出错，容器被 `v-else` 卸载，`mermaidContainer.value` 变成 null。而 `renderFlowchart` 一进来就先清 `renderError`、再因为 `!container` 直接 return —— 于是**报错提示消失了，图也再画不出来**，只剩一块空白，只能刷新页面。翻历史提交最容易踩到。改成容器常驻、用 `v-show` 隐藏，和 MermaidEditor 本来的写法一致。 `FlowchartScoreDetail` 那处 Teleport 上不能挂 v-show，把条件挪到内层容器。实测：修复前切回合法代码后 0 个 svg（永久空白），修复后正常渲染。 ## 每次渲染失败都往 body 漏一个 div `m.render(id, code)` 没传容器，mermaid 会在 `document.body` 上建一个临时 `div#d{id}`。而 `suppressErrorRendering` 默认关着，看 mermaid 源码，解析出错时是先 `errorRenderer.draw()` 再 `throw`，**清理临时容器的那行在 throw 之后**，永远执行不到；每次 render 用的又是新的随机 id，`removeExistingElements` 也清不掉旧的。于是渲染失败一次就留一个。出题页是边敲边预览，且没有防抖，每个字符触发一次完整渲染，中间态几乎全是语法错误 —— 实测逐字符敲 26 个字符，body 里留下 16 个残留 div。打开 `suppressErrorRendering`（该分支是先清理再抛）+ 预览防抖 300ms，实测降到 0，预览功能不受影响。 ## 顺带 `loadMermaid` 缓存的是实例，两个组件同屏挂载时会双双落进 `if (!mermaidInstance)`， import 和 initialize 各跑两次。改成缓存 Promise，并在失败时清掉缓存，避免一次网络抖动把后续所有渲染都钉死在这个失败结果上。 `SubmitFlowchart` 的 `updatePage` / `openDetailModal` / `loadToEditor` 一并补了错误兜底（同文件，见下一个提交的说明）：前两个失败时 `rendering` 会卡在 true，弹框永久转圈；`loadToEditor` 是裸 `JSON.parse`，老提交数据坏掉就点了没反应。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-27 06:14:40 -06:00
parent c27c9fdbf9
commit 5f0fe713dc
6 changed files with 86 additions and 39 deletions
--- a/apps/web/src/oj/problem/components/MyFlowchartTab.vue
+++ b/apps/web/src/oj/problem/components/MyFlowchartTab.vue
@@ -22,7 +22,11 @@ watch(
    <n-alert v-if="renderError" type="error" title="渲染失败" size="small">
      {{ renderError }}
    </n-alert>
-    <div v-else ref="mermaidContainer" class="flowchart-container"></div>
+    <div
+      v-show="!renderError"
+      ref="mermaidContainer"
+      class="flowchart-container"
+    ></div>
  </div>
 </template>

--- a/apps/web/src/oj/problem/components/ProblemFlowchart.vue
+++ b/apps/web/src/oj/problem/components/ProblemFlowchart.vue
@@ -27,7 +27,9 @@ watch(() => problem.value?.mermaidCode, renderProblemFlowchart)
        {{ renderError }}
      </template>
    </n-alert>
-    <div v-else ref="mermaidContainer" class="container"></div>
+    <!-- 容器必须常驻：用 v-else 卸载掉之后 mermaidContainer 变成 null，
+         下一次渲染会因为拿不到容器直接 return，图就再也画不出来了 -->
+    <div v-show="!renderError" ref="mermaidContainer" class="container"></div>
  </div>
 </template>

--- a/apps/web/src/oj/problem/components/SubmitFlowchart.vue
+++ b/apps/web/src/oj/problem/components/SubmitFlowchart.vue
@@ -314,26 +314,40 @@ async function getSubmission(submissionPage = 0) {
  }
 }

+// 请求失败时 rendering 必须复位：拦截器对普通业务错误是静默 reject 的，
+// 少了这个 finally，弹框就会永远停在转圈状态，也没有任何提示
 async function updatePage(val: number) {
  page.value = val
  rendering.value = true
-  await getSubmission(val)
-  // 等待 DOM 更新
-  await nextTick()
-  await renderFlowchart(mermaidContainer.value, myMermaidCode.value)
-  rendering.value = false
+  try {
+    await getSubmission(val)
+    // 等待 DOM 更新
+    await nextTick()
+    await renderFlowchart(mermaidContainer.value, myMermaidCode.value)
+  } catch (error) {
+    message.error("加载这次提交失败，请稍后重试")
+    console.error("加载流程图提交失败:", error)
+  } finally {
+    rendering.value = false
+  }
 }

 // ==================== 模态框相关函数 ====================
 async function openDetailModal() {
  showDetailModal.value = true
  rendering.value = true
-  await getSubmission()
-  page.value = submissionCount.value
-  // 等待 DOM 更新，确保弹框已经渲染
-  await nextTick()
-  await renderFlowchart(mermaidContainer.value, myMermaidCode.value)
-  rendering.value = false
+  try {
+    await getSubmission()
+    page.value = submissionCount.value
+    // 等待 DOM 更新，确保弹框已经渲染
+    await nextTick()
+    await renderFlowchart(mermaidContainer.value, myMermaidCode.value)
+  } catch (error) {
+    message.error("加载评分详情失败，请稍后重试")
+    console.error("加载流程图评分详情失败:", error)
+  } finally {
+    rendering.value = false
+  }
 }

 function closeModal() {
@@ -342,14 +356,18 @@ function closeModal() {

 function loadToEditor() {
  if (myFlowchartZippedStr.value) {
-    const str = atou(myFlowchartZippedStr.value)
-    const json = JSON.parse(str)
-    const processedData = {
-      nodes: json.nodes || [],
-      edges: json.edges || [],
-    }
-    if (flowchartEditorRef?.value) {
-      flowchartEditorRef.value.setFlowchartData(processedData)
+    // 老提交的压缩数据可能是坏的（格式换过、存了一半），
+    // 不兜住的话 atou/JSON.parse 直接抛，按钮点了毫无反应
+    try {
+      const json = JSON.parse(atou(myFlowchartZippedStr.value))
+      flowchartEditorRef?.value?.setFlowchartData({
+        nodes: json.nodes || [],
+        edges: json.edges || [],
+      })
+    } catch (error) {
+      message.error("这份流程图数据已损坏，无法加载到编辑器")
+      console.error("解析流程图数据失败:", error)
+      return
    }
  }
  closeModal()
@@ -432,7 +450,11 @@ onUnmounted(() => {
              <n-alert v-if="renderError" type="error" title="流程图渲染失败">
                {{ renderError }}
              </n-alert>
-              <div class="flowchart" v-else ref="mermaidContainer"></div>
+              <div
+                class="flowchart"
+                v-show="!renderError"
+                ref="mermaidContainer"
+              ></div>
            </n-spin>
          </div>
          <!-- 加载到编辑器按钮 -->
--- a/apps/web/src/oj/submission/components/FlowchartScoreDetail.vue
+++ b/apps/web/src/oj/submission/components/FlowchartScoreDetail.vue
@@ -20,8 +20,9 @@
          <n-alert v-if="renderError" type="error" title="流程图渲染失败">
            {{ renderError }}
          </n-alert>
-          <Teleport v-else to="body" :disabled="!showLargeImage">
+          <Teleport to="body" :disabled="!showLargeImage">
            <div
+              v-show="!renderError"
              :class="['flowchart', { 'flowchart-fullscreen': showLargeImage }]"
              ref="mermaidContainer"
            ></div>
--- a/apps/web/src/shared/components/MermaidEditor.vue
+++ b/apps/web/src/shared/components/MermaidEditor.vue
@@ -20,7 +20,9 @@ onMounted(() => {
  nextTick(renderMermaid)
 })

-watch(modelValue, renderMermaid)
+// 出题页是边敲边预览，不防抖的话每个字符都会触发一次完整的 mermaid 渲染，
+// 而中间态几乎全是语法错误
+watchDebounced(modelValue, renderMermaid, { debounce: 300, maxWait: 1000 })

 const clearCode = () => {
  modelValue.value = ""
--- a/apps/web/src/shared/composables/useMermaid.ts
+++ b/apps/web/src/shared/composables/useMermaid.ts
@@ -256,25 +256,41 @@ function getChromeVersion(): number {
  return match ? parseInt(match[1]) : Infinity
 }

-let mermaidInstance: any = null
+let mermaidPromise: Promise<any> | null = null
 let mermaidIsLegacy = false

-async function loadMermaid() {
-  if (!mermaidInstance) {
-    if (getChromeVersion() < 94) {
-      mermaidInstance = (await import("mermaid-legacy")).default
-      mermaidIsLegacy = true
-    } else {
-      mermaidInstance = (await import("mermaid")).default
-    }
-    mermaidInstance.initialize({
-      startOnLoad: false,
-      securityLevel: "strict",
-      theme: "base",
-      themeVariables: mermaidThemeVariables,
+function loadMermaid(): Promise<any> {
+  // 缓存 Promise 而不是实例：同一屏里两个组件一起挂载时，缓存实例会让两边都
+  // 落进 if (!mermaidInstance)，import 两次、initialize 两次
+  if (!mermaidPromise) {
+    mermaidPromise = (async () => {
+      let instance: any
+      if (getChromeVersion() < 94) {
+        instance = (await import("mermaid-legacy")).default
+        mermaidIsLegacy = true
+      } else {
+        instance = (await import("mermaid")).default
+      }
+      instance.initialize({
+        startOnLoad: false,
+        securityLevel: "strict",
+        theme: "base",
+        // 解析失败时 mermaid 默认会先把一张「错误图」画进挂在 document.body 上的
+        // 临时容器，再抛异常，而清理临时容器的那行在 throw 之后，永远执行不到；
+        // 每次 render 用的又是新的随机 id，旧的也清不掉。于是每失败一次就往
+        // body 里留一个 div#dmermaid-xxx —— 出题页每敲一个字符渲染一次，一段
+        // 代码写下来能堆几十个。打开这个开关后 mermaid 会先清理再抛。
+        suppressErrorRendering: true,
+        themeVariables: mermaidThemeVariables,
+      })
+      return instance
+    })().catch((error) => {
+      // 失败的 Promise 不能留在缓存里，否则后面每次渲染都直接复用这个失败结果
+      mermaidPromise = null
+      throw error
    })
  }
-  return mermaidInstance
+  return mermaidPromise
 }

 export function useMermaid() {