fix

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 () => {
+const renderFlowchart = async () => {
-  // 确保 mermaid 已加载
+  try {
-  await loadMermaid()
+    renderError.value = null
 
-  // 渲染流程图
+    // 确保 mermaid 已加载
-  if (mermaidContainer.value && problem.value?.mermaid_code) {
+    await loadMermaid()
-    const id = `mermaid-${nanoid()}`
+
-    const { svg } = await mermaid.render(id, problem.value.mermaid_code)
+    // 渲染流程图
-    mermaidContainer.value.innerHTML = svg
+    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>

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="流程图表"
           >