流程图的功能

src/oj/problem/components/ProblemEditor.vue

@@ -16,6 +16,7 @@ const FlowchartEditor = defineAsyncComponent(
 
 const route = useRoute()
 const formRef = useTemplateRef<InstanceType<typeof Form>>("formRef")
+const flowchartEditorRef = useTemplateRef("flowchartEditorRef")
 
 const codeStore = useCodeStore()
 const problemStore = useProblemStore()
@@ -78,6 +79,9 @@ const handleSyncStatusChange = (status: {
 }) => {
   syncStatus.setOtherUser(status.otherUser)
 }
+
+// 提供FlowchartEditor的ref给子组件
+provide('flowchartEditorRef', flowchartEditorRef)
 </script>
 
 <template>
@@ -89,7 +93,7 @@ const handleSyncStatusChange = (status: {
       @change-language="changeLanguage"
       @toggle-sync="toggleSync"
     />
-    <FlowchartEditor v-if="codeStore.code.language === 'Flowchart'" />
+    <FlowchartEditor v-if="codeStore.code.language === 'Flowchart'" ref="flowchartEditorRef" />
     <SyncCodeEditor
       v-else
       v-model:value="codeStore.code.value"

src/oj/problem/components/SubmitFlowchart.vue

@@ -4,8 +4,89 @@ import { useBreakpoints } from "shared/composables/breakpoints"
 const { isDesktop } = useBreakpoints()
 const message = useMessage()
 
+// 通过inject获取FlowchartEditor组件的引用
+const flowchartEditorRef = inject<any>("flowchartEditorRef")
+
+// 将流程图JSON数据转换为Mermaid格式
+const convertToMermaid = (flowchartData: any) => {
+  const { nodes, edges } = flowchartData
+
+  if (!nodes || nodes.length === 0) {
+    return "graph TD\n    A[空流程图]"
+  }
+
+  let mermaid = "graph TD\n"
+
+  // 处理节点 - 根据原始类型和自定义标签
+  nodes.forEach((node: any) => {
+    const nodeId = node.id
+    const label = node.data?.customLabel || node.data?.label || "节点"
+    const originalType = node.data?.originalType || node.type
+
+    // 根据节点原始类型确定Mermaid语法
+    switch (originalType) {
+      case "start":
+        mermaid += `    ${nodeId}[${label}]\n`
+        break
+      case "end":
+        mermaid += `    ${nodeId}[${label}]\n`
+        break
+      case "input":
+        mermaid += `    ${nodeId}[${label}]\n`
+        break
+      case "output":
+        mermaid += `    ${nodeId}[${label}]\n`
+        break
+      case "default":
+        mermaid += `    ${nodeId}[${label}]\n`
+        break
+      case "decision":
+        mermaid += `    ${nodeId}{${label}}\n`
+        break
+      case "loop":
+        mermaid += `    ${nodeId}[${label}]\n`
+        break
+      default:
+        mermaid += `    ${nodeId}[${label}]\n`
+    }
+  })
+
+  // 处理边
+  edges.forEach((edge: any) => {
+    const source = edge.source
+    const target = edge.target
+    const label = edge.label || edge.data?.label || ""
+
+    if (label) {
+      mermaid += `    ${source} -->|${label}| ${target}\n`
+    } else {
+      mermaid += `    ${source} --> ${target}\n`
+    }
+  })
+
+  return mermaid
+}
+
 const submit = () => {
-  message.warning("暂未实现")
+  if (!flowchartEditorRef?.value) return
+  // 获取流程图的JSON数据
+  const flowchartData = flowchartEditorRef.value.getFlowchartData()
+
+  if (flowchartData.nodes.length === 0 || flowchartData.edges.length === 0) {
+    message.error("流程图节点或边不能为空")
+    return
+  }
+
+  // 打印JSON数据到控制台
+  console.log("流程图JSON数据:", JSON.stringify(flowchartData, null, 2))
+
+  // 转换为Mermaid格式
+  const mermaidCode = convertToMermaid(flowchartData)
+  console.log("Mermaid代码:")
+  console.log(mermaidCode)
+
+  // 显示成功消息
+  message.success("敬请期待，快了～")
 }
 </script>