update

src/oj/problem/composables/useFlowchartSubmission.ts

@@ -0,0 +1,106 @@
+import { ref, watch } 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 useFlowchartSubmission() {
+  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, 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 {
+    evaluationResult,
+    submissionStatus,
+    loading,
+    connect,
+    disconnect,
+    subscribeToSubmission,
+    clearResult,
+    setLoading,
+    setEvaluationResult,
+  }
+}

src/oj/problem/composables/useFlowchartSubmit.ts

@@ -0,0 +1,106 @@
+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,
+  }
+}

src/oj/problem/composables/useMermaidConverter.ts

@@ -0,0 +1,108 @@
+/**
+ * 将流程图JSON数据转换为Mermaid格式
+ */
+export function useMermaidConverter() {
+  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 ?? ""
+
+      if (label && label.trim() !== "") {
+        mermaid += `    ${source} -->|${label}| ${target}\n`
+      } else {
+        mermaid += `    ${source} --> ${target}\n`
+      }
+    })
+
+    // 添加样式定义来区分不同类型的节点
+    mermaid += "\n"
+    mermaid +=
+      "    classDef startEnd fill:#e1f5fe,stroke:#01579b,stroke-width:2px\n"
+    mermaid += "    classDef input fill:#e3f2fd,stroke:#1976d2,stroke-width:2px\n"
+    mermaid +=
+      "    classDef output fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px\n"
+    mermaid +=
+      "    classDef process fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px\n"
+    mermaid +=
+      "    classDef decision fill:#fff3e0,stroke:#e65100,stroke-width:2px\n"
+    mermaid += "\n"
+
+    // 为节点应用样式
+    nodes.forEach((node: any) => {
+      const nodeId = node.id
+      const originalType = node.data?.originalType || node.type
+
+      switch (originalType) {
+        case "start":
+        case "end":
+          mermaid += `    class ${nodeId} startEnd\n`
+          break
+        case "input":
+          mermaid += `    class ${nodeId} input\n`
+          break
+        case "output":
+          mermaid += `    class ${nodeId} output\n`
+          break
+        case "decision":
+        case "loop":
+          mermaid += `    class ${nodeId} decision\n`
+          break
+        default:
+          mermaid += `    class ${nodeId} process\n`
+      }
+    })
+
+    return mermaid
+  }
+
+  return {
+    convertToMermaid,
+  }
+}