fix

src/oj/problem/components/FlowchartEvaluationDisplay.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import FlowchartEditor from "shared/components/FlowchartEditor/index.vue"
 import { atou } from "utils/functions"
+import { useMermaid } from "shared/composables/useMermaid"
 
 interface EvaluationResult {
   score?: number
@@ -13,6 +13,7 @@ interface EvaluationResult {
 interface Props {
   evaluationResult: EvaluationResult | null
   myFlowchartZippedStr: string
+  myMermaidCode: string
 }
 
 const props = defineProps<Props>()
@@ -24,9 +25,11 @@ const emit = defineEmits<{
 
 const showDetailModal = ref(false)
 
-const readonlyFlowchartEditorRef = useTemplateRef<any>(
-  "readonlyFlowchartEditorRef",
-)
+// mermaid 渲染相关
+const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
+
+// 使用 mermaid composable
+const { renderError, renderFlowchart } = useMermaid()
 
 // 根据分数获取标签类型
 const getScoreType = (score: number) => {
@@ -39,12 +42,7 @@ const getScoreType = (score: number) => {
 async function openDetailModal() {
   showDetailModal.value = true
   await nextTick()
-  const str = atou(props.myFlowchartZippedStr)
-  const json = JSON.parse(str)
-  readonlyFlowchartEditorRef.value.setFlowchartData({
-    nodes: json.nodes || [],
-    edges: json.edges || [],
-  })
+  await renderFlowchart(mermaidContainer.value, props.myMermaidCode)
 }
 
 function closeModal() {
@@ -87,14 +85,13 @@ function loadToEditor() {
     >
       <n-grid :cols="5" :x-gap="16">
         <n-gi :span="3">
-          <n-card title="大致缩略图（有错位问题，建议加载到流程图编辑器查看）">
-            <div class="flowchart">
-              <FlowchartEditor
-                ref="readonlyFlowchartEditorRef"
-                readonly
-                height="400px"
-              />
-            </div>
+          <n-card title="流程图预览">
+            <n-alert v-if="renderError" type="error" title="流程图渲染失败">
+              <template #default>
+                {{ renderError }}
+              </template>
+            </n-alert>
+            <div v-else ref="mermaidContainer" class="flowchart"></div>
           </n-card>
           <n-flex style="margin-top: 16px" justify="center">
             <n-button @click="loadToEditor" type="primary">
@@ -160,9 +157,14 @@ function loadToEditor() {
 
 <style scoped>
 .flowchart {
-  height: 400px;
+  height: 500px;
   width: 100%;
-  border-radius: 4px;
-  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:deep(.flowchart > svg) {
+  height: 100%;
 }
 </style>

src/oj/problem/components/ProblemFlowchart.vue

@@ -1,54 +1,24 @@
 <script setup lang="ts">
 import { useProblemStore } from "oj/store/problem"
-import { nanoid } from "nanoid"
+import { useMermaid } from "shared/composables/useMermaid"
 
 const problemStore = useProblemStore()
 const { problem } = storeToRefs(problemStore)
 const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
 
-// 渲染状态
-const renderError = ref<string | null>(null)
-
-// 动态导入 mermaid
-let mermaid: any = null
-
-// 动态加载 Mermaid
-const loadMermaid = async () => {
-  if (!mermaid) {
-    const mermaidModule = await import("mermaid")
-    mermaid = mermaidModule.default
-    mermaid.initialize({
-      startOnLoad: false,
-      securityLevel: "loose",
-      theme: "default",
-    })
-  }
-  return mermaid
-}
+// 使用 mermaid composable
+const { renderError, renderFlowchart } = useMermaid()
 
 // 渲染流程图的函数
-const renderFlowchart = async () => {
-  try {
-    renderError.value = null
-
-    // 确保 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 : "流程图渲染失败，请检查代码格式"
+const renderProblemFlowchart = async () => {
+  if (problem.value?.mermaid_code) {
+    await renderFlowchart(mermaidContainer.value, problem.value.mermaid_code)
   }
 }
 
 // 初始化Mermaid并渲染
 onMounted(() => {
-  renderFlowchart()
+  renderProblemFlowchart()
 })
 </script>
 

src/oj/problem/components/SubmitFlowchart.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { useFlowchartSubmit } from "../composables/useFlowchartSubmit"
+import { useFlowchartSubmission } from "../composables/useFlowchartSubmission"
 import FlowchartEvaluationDisplay from "./FlowchartEvaluationDisplay.vue"
 
 const { isDesktop } = useBreakpoints()
@@ -14,11 +14,12 @@ const {
   loading,
   submissionCount,
   myFlowchartZippedStr,
+  myMermaidCode,
   connect,
   disconnect,
   checkCurrentSubmissionStatus,
   submitFlowchartData,
-} = useFlowchartSubmit()
+} = useFlowchartSubmission()
 
 // 组件挂载时连接 WebSocket 并检查状态
 onMounted(() => {
@@ -65,6 +66,7 @@ function handleLoadToEditor(data: any) {
     <FlowchartEvaluationDisplay
       :evaluation-result="evaluationResult"
       :my-flowchart-zipped-str="myFlowchartZippedStr"
+      :my-mermaid-code="myMermaidCode"
       @close="() => {}"
       @load-to-editor="handleLoadToEditor"
     />