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>

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() {