fix

2025-10-13 20:13:52 +08:00
parent 34413704c3
commit 88b7224b49
9 changed files with 296 additions and 295 deletions
--- a/src/oj/problem/components/FlowchartEvaluationDisplay.vue
+++ b/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>
--- a/src/oj/problem/components/ProblemFlowchart.vue
+++ b/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>

--- a/src/oj/problem/components/SubmitFlowchart.vue
+++ b/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"
    />
--- a/src/oj/problem/composables/useFlowchartEvaluation.ts
+++ b/src/oj/problem/composables/useFlowchartEvaluation.ts
@@ -0,0 +1,97 @@
+import { ref } from "vue"
+import { useMessage } from "naive-ui"
+import {
+  useFlowchartWebSocket,
+  type FlowchartEvaluationUpdate,
+} from "shared/composables/websocket"
+
+export interface EvaluationResult {
+  score?: number
+  grade?: string
+  feedback?: string
+  suggestions?: string
+  criteriaDetails?: any
+}
+
+export interface SubmissionStatus {
+  status: string
+  submission_id: string
+  created_time?: string
+}
+
+export function useFlowchartEvaluation() {
+  const message = useMessage()
+
+  const evaluationResult = ref<EvaluationResult | null>(null)
+  const submissionStatus = ref<SubmissionStatus | null>(null)
+  const loading = ref(false)
+
+  // 处理 WebSocket 消息
+  const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
+    console.log("收到流程图评分更新:", data)
+
+    if (data.type === "flowchart_evaluation_completed") {
+      loading.value = false
+      evaluationResult.value = {
+        score: data.score,
+        grade: data.grade,
+        feedback: data.feedback,
+      }
+      submissionStatus.value = null // 清除状态
+      message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
+    } else if (data.type === "flowchart_evaluation_failed") {
+      console.log("处理评分失败消息")
+      loading.value = false
+      submissionStatus.value = null // 清除状态
+      message.error(`流程图评分失败: ${data.error}`)
+    } else {
+      console.log("未知的消息类型:", data.type)
+    }
+  }
+
+  // 创建 WebSocket 连接
+  const { connect, disconnect, subscribe } = useFlowchartWebSocket(
+    handleWebSocketMessage,
+  )
+
+  // 订阅提交更新
+  const subscribeToSubmission = (submissionId: string) => {
+    console.log("开始订阅WebSocket更新")
+    subscribe(submissionId)
+
+    // 设置评分状态显示
+    submissionStatus.value = {
+      status: "processing",
+      submission_id: submissionId,
+      created_time: new Date().toISOString(),
+    }
+  }
+
+  // 清除结果
+  const clearResult = () => {
+    evaluationResult.value = null
+    submissionStatus.value = null
+  }
+
+  // 设置加载状态
+  const setLoading = (value: boolean) => {
+    loading.value = value
+  }
+
+  // 设置评估结果
+  const setEvaluationResult = (result: EvaluationResult) => {
+    evaluationResult.value = result
+  }
+
+  return {
+    evaluationResult,
+    submissionStatus,
+    loading,
+    connect,
+    disconnect,
+    subscribeToSubmission,
+    clearResult,
+    setLoading,
+    setEvaluationResult,
+  }
+}
--- a/src/oj/problem/composables/useFlowchartSubmission.ts
+++ b/src/oj/problem/composables/useFlowchartSubmission.ts
@@ -1,98 +1,18 @@
-import { ref, watch } from "vue"
+import { ref } from "vue"
 import { useMessage } from "naive-ui"
-import {
-  useFlowchartWebSocket,
-  type FlowchartEvaluationUpdate,
-} from "shared/composables/websocket"
-
-export interface EvaluationResult {
-  score?: number
-  grade?: string
-  feedback?: string
-  suggestions?: string
-  criteriaDetails?: any
-}
-
-export interface SubmissionStatus {
-  status: string
-  submission_id: string
-  created_time?: string
-}
+import { submitFlowchart, getCurrentProblemFlowchartSubmission } from "oj/api"
+import { useProblemStore } from "oj/store/problem"
+import { utoa } from "utils/functions"
+import { useMermaidConverter } from "./useMermaidConverter"
+import { useFlowchartEvaluation } from "./useFlowchartEvaluation"

 export function useFlowchartSubmission() {
  const message = useMessage()
+  const problemStore = useProblemStore()
+  const { problem } = toRefs(problemStore)

-  const evaluationResult = ref<EvaluationResult | null>(null)
-  const submissionStatus = ref<SubmissionStatus | null>(null)
-  const loading = ref(false)
-
-  // 处理 WebSocket 消息
-  const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
-    console.log("收到流程图评分更新:", data)
-
-    if (data.type === "flowchart_evaluation_completed") {
-      loading.value = false
-      evaluationResult.value = {
-        score: data.score,
-        grade: data.grade,
-        feedback: data.feedback,
-      }
-      submissionStatus.value = null // 清除状态
-      message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
-    } else if (data.type === "flowchart_evaluation_failed") {
-      console.log("处理评分失败消息")
-      loading.value = false
-      submissionStatus.value = null // 清除状态
-      message.error(`流程图评分失败: ${data.error}`)
-    } else {
-      console.log("未知的消息类型:", data.type)
-    }
-  }
-
-  // 创建 WebSocket 连接
-  const { connect, disconnect, subscribe, status } = useFlowchartWebSocket(
-    handleWebSocketMessage,
-  )
-
-  // 监听WebSocket状态变化
-  watch(
-    status,
-    (newStatus) => {
-      console.log("WebSocket状态变化:", newStatus)
-    },
-    { immediate: true },
-  )
-
-  // 订阅提交更新
-  const subscribeToSubmission = (submissionId: string) => {
-    console.log("开始订阅WebSocket更新")
-    subscribe(submissionId)
-
-    // 设置评分状态显示
-    submissionStatus.value = {
-      status: "processing",
-      submission_id: submissionId,
-      created_time: new Date().toISOString(),
-    }
-  }
-
-  // 清除结果
-  const clearResult = () => {
-    evaluationResult.value = null
-    submissionStatus.value = null
-  }
-
-  // 设置加载状态
-  const setLoading = (value: boolean) => {
-    loading.value = value
-  }
-
-  // 设置评估结果
-  const setEvaluationResult = (result: EvaluationResult) => {
-    evaluationResult.value = result
-  }
-
-  return {
+  const { convertToMermaid } = useMermaidConverter()
+  const {
    evaluationResult,
    submissionStatus,
    loading,
@@ -102,5 +22,90 @@ export function useFlowchartSubmission() {
    clearResult,
    setLoading,
    setEvaluationResult,
+  } = useFlowchartEvaluation()
+
+  // 提交次数
+  const submissionCount = ref(0)
+
+  // 存储流程图数据
+  const myFlowchartZippedStr = ref("")
+  const myMermaidCode = ref("")
+
+  // 检查当前问题的流程图提交状态
+  const checkCurrentSubmissionStatus = async () => {
+    if (!problem.value?.id) return
+
+    const { data } = await getCurrentProblemFlowchartSubmission(
+      problem.value.id,
+    )
+    const submission = data.submission
+    submissionCount.value = data.count
+    if (submission && submission.status === 2) {
+      myFlowchartZippedStr.value = data.submission.flowchart_data.data
+      myMermaidCode.value = data.submission.mermaid_code
+      setEvaluationResult({
+        score: submission.ai_score,
+        grade: submission.ai_grade,
+        feedback: submission.ai_feedback,
+        suggestions: submission.ai_suggestions,
+        criteriaDetails: submission.ai_criteria_details,
+      })
+    }
+  }
+
+  // 提交流程图
+  const submitFlowchartData = async (flowchartEditorRef: any) => {
+    if (!flowchartEditorRef?.value) return
+
+    // 获取流程图的JSON数据
+    const flowchartData = flowchartEditorRef.value.getFlowchartData()
+
+    if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
+      message.error("流程图节点或边不能为空")
+      return
+    }
+
+    const mermaidCode = convertToMermaid(flowchartData)
+    const compressed = utoa(JSON.stringify(flowchartData))
+
+    setLoading(true)
+    clearResult() // 清除之前的结果
+
+    try {
+      const response = await submitFlowchart({
+        problem_id: problem.value!.id,
+        mermaid_code: mermaidCode,
+        flowchart_data: {
+          compressed: true,
+          data: compressed,
+        },
+      })
+
+      // 获取提交ID并订阅更新
+      const submissionId = response.data.submission_id
+
+      if (submissionId) {
+        subscribeToSubmission(submissionId)
+      }
+
+      message.success("流程图已提交，请耐心等待评分")
+    } catch (error) {
+      setLoading(false)
+      message.error("流程图提交失败")
+      console.error("提交流程图失败:", error)
+    }
+  }
+
+  return {
+    evaluationResult,
+    submissionStatus,
+    loading,
+    submissionCount,
+    myFlowchartZippedStr,
+    myMermaidCode,
+    connect,
+    disconnect,
+    checkCurrentSubmissionStatus,
+    submitFlowchartData,
  }
 }
--- a/src/oj/problem/composables/useFlowchartSubmit.ts
+++ b/src/oj/problem/composables/useFlowchartSubmit.ts
@@ -1,108 +0,0 @@
-import { ref } from "vue"
-import { useMessage } from "naive-ui"
-import { submitFlowchart, getCurrentProblemFlowchartSubmission } from "oj/api"
-import { useProblemStore } from "oj/store/problem"
-import { atou, utoa } from "utils/functions"
-import { useMermaidConverter } from "./useMermaidConverter"
-import { useFlowchartSubmission } from "./useFlowchartSubmission"
-
-export function useFlowchartSubmit() {
-  const message = useMessage()
-  const problemStore = useProblemStore()
-  const { problem } = toRefs(problemStore)
-
-  const { convertToMermaid } = useMermaidConverter()
-  const {
-    evaluationResult,
-    submissionStatus,
-    loading,
-    connect,
-    disconnect,
-    subscribeToSubmission,
-    clearResult,
-    setLoading,
-    setEvaluationResult,
-  } = useFlowchartSubmission()
-
-  // 提交次数
-  const submissionCount = ref(0)
-
-  // 存储流程图数据
-  const myFlowchartZippedStr = ref("")
-
-  // 检查当前问题的流程图提交状态
-  const checkCurrentSubmissionStatus = async () => {
-    if (!problem.value?.id) return
-
-    const { data } = await getCurrentProblemFlowchartSubmission(
-      problem.value.id,
-    )
-    const submission = data.submission
-    submissionCount.value = data.count
-    if (submission && submission.status === 2) {
-      myFlowchartZippedStr.value = data.submission.flowchart_data.data
-      setEvaluationResult({
-        score: submission.ai_score,
-        grade: submission.ai_grade,
-        feedback: submission.ai_feedback,
-        suggestions: submission.ai_suggestions,
-        criteriaDetails: submission.ai_criteria_details,
-      })
-    }
-  }
-
-  // 提交流程图
-  const submitFlowchartData = async (flowchartEditorRef: any) => {
-    if (!flowchartEditorRef?.value) return
-
-    // 获取流程图的JSON数据
-    const flowchartData = flowchartEditorRef.value.getFlowchartData()
-
-    if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
-      message.error("流程图节点或边不能为空")
-      return
-    }
-
-    const mermaidCode = convertToMermaid(flowchartData)
-    const compressed = utoa(JSON.stringify(flowchartData))
-
-    setLoading(true)
-    clearResult() // 清除之前的结果
-
-    try {
-      const response = await submitFlowchart({
-        problem_id: problem.value!.id,
-        mermaid_code: mermaidCode,
-        flowchart_data: {
-          compressed: true,
-          data: compressed,
-        },
-      })
-
-      // 获取提交ID并订阅更新
-      const submissionId = response.data.submission_id
-
-      if (submissionId) {
-        subscribeToSubmission(submissionId)
-      }
-
-      message.success("流程图已提交，请耐心等待评分")
-    } catch (error) {
-      setLoading(false)
-      message.error("流程图提交失败")
-      console.error("提交流程图失败:", error)
-    }
-  }
-
-  return {
-    evaluationResult,
-    submissionStatus,
-    loading,
-    submissionCount,
-    myFlowchartZippedStr,
-    connect,
-    disconnect,
-    checkCurrentSubmissionStatus,
-    submitFlowchartData,
-  }
-}