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,
-  }
-}
--- a/src/shared/components/FlowchartEditor/CustomNode.vue
+++ b/src/shared/components/FlowchartEditor/CustomNode.vue
@@ -1,18 +1,14 @@
 <template>
  <div
    class="custom-node"
-    :class="{
-      'is-hovered': isHovered,
-      'is-editing': isEditing,
-      readonly: readonly,
-    }"
+    :class="{ 'is-hovered': isHovered, 'is-editing': isEditing }"
    :data-node-type="nodeType"
-    :draggable="!isEditing && !readonly"
-    @mouseenter="!readonly ? (isHovered = true) : undefined"
-    @mouseleave="!readonly ? handleMouseLeave : undefined"
-    @dblclick="!readonly ? handleDoubleClick : undefined"
-    @dragstart="!readonly ? handleDragStart : undefined"
-    @mousedown="!readonly ? handleMouseDown : undefined"
+    :draggable="!isEditing"
+    @mouseenter="isHovered = true"
+    @mouseleave="handleMouseLeave"
+    @dblclick="handleDoubleClick"
+    @dragstart="handleDragStart"
+    @mousedown="handleMouseDown"
  >
    <!-- 连线点 - 根据节点类型动态显示 -->
    <NodeHandles :node-type="nodeType" :node-config="nodeConfig" />
@@ -43,7 +39,7 @@

    <!-- 悬停时显示的操作按钮 -->
    <NodeActions
-      v-if="isHovered && !readonly"
+      v-if="isHovered"
      @delete="handleDelete"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
@@ -62,7 +58,6 @@ interface Props {
  id: string
  type: string
  data: any
-  readonly?: boolean
 }

 interface Emits {
@@ -71,9 +66,7 @@ interface Emits {
 }

 // Props 和 Emits
-const props = withDefaults(defineProps<Props>(), {
-  readonly: false,
-})
+const props = defineProps<Props>()
 const emit = defineEmits<Emits>()

 // 响应式状态
@@ -222,14 +215,6 @@ onUnmounted(() => {
  filter: brightness(1.1);
 }

-.custom-node.readonly {
-  cursor: default;
-  pointer-events: none;
-}
-
-.custom-node.readonly .node-content {
-  pointer-events: auto;
-}

 /* 节点内容区域 */
 .node-content {
--- a/src/shared/components/FlowchartEditor/index.vue
+++ b/src/shared/components/FlowchartEditor/index.vue
@@ -22,12 +22,10 @@ import CustomNode from "./CustomNode.vue"
 import { useProblemStore } from "oj/store/problem"

 interface Props {
-  readonly?: boolean
  height?: string
 }

 withDefaults(defineProps<Props>(), {
-  readonly: false,
  height: "calc(100vh - 133px)",
 })

@@ -183,12 +181,11 @@ defineExpose({
    <VueFlow
      v-model:nodes="nodes"
      v-model:edges="edges"
-      :readonly="readonly"
-      @dragover="!readonly ? handleDragOver : undefined"
-      @dragleave="!readonly ? handleDragLeave : undefined"
-      @drop="!readonly ? handleDrop : undefined"
-      @connect="!readonly ? handleConnect : undefined"
-      @edge-click="!readonly ? handleEdgeClick : undefined"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+      @connect="handleConnect"
+      @edge-click="handleEdgeClick"
      :default-edge-options="{
        type: 'step',
        style: {
@@ -211,7 +208,7 @@ defineExpose({
        markerEnd: 'url(#connection-arrow)',
        filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))',
      }"
-      :fit-view-on-init="readonly"
+      :fit-view-on-init="false"
      :connect-on-click="false"
      :multi-selection-key-code="null"
      :delete-key-code="null"
@@ -240,17 +237,14 @@ defineExpose({
          :id="id"
          :type="type"
          :data="data"
-          :readonly="readonly"
          @delete="handleNodeDelete"
          @update="handleNodeUpdate"
        />
      </template>

      <Background variant="lines" :gap="20" :size="1" />
-      <Controls v-if="!readonly" />
+      <Controls />
      <Toolbar
-        v-if="!readonly"
-        r
        :can-undo="canUndo"
        :can-redo="canRedo"
        :is-saving="isSaving"
--- a/src/shared/composables/useMermaid.ts
+++ b/src/shared/composables/useMermaid.ts
@@ -0,0 +1,54 @@
+import { nanoid } from "nanoid"
+
+export function useMermaid() {
+  // 渲染状态
+  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
+  }
+
+  // 渲染流程图的函数
+  const renderFlowchart = async (container: HTMLElement | null, mermaidCode: string) => {
+    try {
+      renderError.value = null
+
+      // 确保 mermaid 已加载
+      await loadMermaid()
+
+      // 渲染流程图
+      if (container && mermaidCode) {
+        const id = `mermaid-${nanoid()}`
+        const { svg } = await mermaid.render(id, mermaidCode)
+        container.innerHTML = svg
+      }
+    } catch (error) {
+      renderError.value =
+        error instanceof Error ? error.message : "流程图渲染失败，请检查代码格式"
+    }
+  }
+
+  // 清除渲染错误
+  const clearError = () => {
+    renderError.value = null
+  }
+
+  return {
+    renderError: readonly(renderError),
+    renderFlowchart,
+    clearError,
+  }
+}