From eda470cb78f91fb444c22522b15d0a1d760da032 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 13 Oct 2025 12:51:23 +0800
Subject: [PATCH] fix

---
 .../problem/components/ProblemFlowchart.vue   | 42 ++++++++++++++-----
 src/oj/problem/detail.vue                     |  2 +-
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/oj/problem/components/ProblemFlowchart.vue b/src/oj/problem/components/ProblemFlowchart.vue
index 9c84fb9..874e7e8 100644
--- a/src/oj/problem/components/ProblemFlowchart.vue
+++ b/src/oj/problem/components/ProblemFlowchart.vue
@@ -6,6 +6,9 @@ const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
 
+// 渲染状态
+const renderError = ref<string | null>(null)
+
 // 动态导入 mermaid
 let mermaid: any = null
 
@@ -23,22 +26,41 @@ const loadMermaid = async () => {
   return mermaid
 }
 
-// 初始化Mermaid并渲染
-onMounted(async () => {
-  // 确保 mermaid 已加载
-  await loadMermaid()
+// 渲染流程图的函数
+const renderFlowchart = async () => {
+  try {
+    renderError.value = null
 
-  // 渲染流程图
-  if (mermaidContainer.value && problem.value?.mermaid_code) {
-    const id = `mermaid-${nanoid()}`
-    const { svg } = await mermaid.render(id, problem.value.mermaid_code)
-    mermaidContainer.value.innerHTML = svg
+    // 确保 mermaid 已加载
+    await loadMermaid()
+
+    // 渲染流程图
+    if (mermaidContainer.value && problem.value?.mermaid_code) {
+      const id = `mermaid-${nanoid()}`
+      const { svg } = await mermaid.render(id, problem.value.mermaid_code)
+      mermaidContainer.value.innerHTML = svg
+    }
+  } catch (error) {
+    renderError.value =
+      error instanceof Error ? error.message : "流程图渲染失败，请检查代码格式"
   }
+}
+
+// 初始化Mermaid并渲染
+onMounted(() => {
+  renderFlowchart()
 })
 </script>
 
 <template>
-  <div ref="mermaidContainer" class="container"></div>
+  <div>
+    <n-alert v-if="renderError" type="error" title="流程图渲染失败">
+      <template #default>
+        {{ renderError }}
+      </template>
+    </n-alert>
+    <div v-else ref="mermaidContainer" class="container"></div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/oj/problem/detail.vue b/src/oj/problem/detail.vue
index c69b234..9701b35 100644
--- a/src/oj/problem/detail.vue
+++ b/src/oj/problem/detail.vue
@@ -122,7 +122,7 @@ watch(isMobile, (value) => {
             <ProblemContent />
           </n-tab-pane>
           <n-tab-pane
-            v-if="problem.show_flowchart"
+            v-if="problem.show_flowchart && problem.mermaid_code"
             name="flowchart"
             tab="流程图表"
           >