update

2025-10-14 00:24:12 +08:00
parent b991688edd
commit 7c21ce0e2e
5 changed files with 103 additions and 147 deletions
--- a/src/oj/problem/components/FlowchartEvaluationDisplay.vue
+++ b/src/oj/problem/components/FlowchartEvaluationDisplay.vue
@@ -1,17 +1,10 @@
 <script lang="ts" setup>
 import { atou } from "utils/functions"
 import { useMermaid } from "shared/composables/useMermaid"
-
-interface EvaluationResult {
-  score?: number
-  grade?: string
-  feedback?: string
-  suggestions?: string
-  criteriaDetails?: any
-}
+import { Evaluation } from "../composables/useFlowchart"

 interface Props {
-  evaluationResult: EvaluationResult | null
+  evaluation: Evaluation | null
  myFlowchartZippedStr: string
  myMermaidCode: string
 }
@@ -19,7 +12,6 @@ interface Props {
 const props = defineProps<Props>()

 const emit = defineEmits<{
-  close: []
  loadToEditor: [data: any]
 }>()

@@ -47,7 +39,6 @@ async function openDetailModal() {

 function closeModal() {
  showDetailModal.value = false
-  emit("close")
 }

 function loadToEditor() {
@@ -69,11 +60,11 @@ function loadToEditor() {
    <!-- 评分结果显示 -->
    <n-button
      secondary
-      v-if="evaluationResult"
+      v-if="evaluation"
      @click="openDetailModal"
-      :type="getScoreType(evaluationResult.score!)"
+      :type="getScoreType(evaluation.score)"
    >
-      {{ evaluationResult.score }}分 {{ evaluationResult.grade }}级
+      {{ evaluation.score }}分 {{ evaluation.grade }}级
    </n-button>

    <!-- 详情弹框 -->
@@ -101,32 +92,32 @@ function loadToEditor() {
        </n-gi>
        <n-gi :span="2">
          <n-card
-            v-if="evaluationResult?.feedback"
+            v-if="evaluation?.feedback"
            size="small"
            title="AI反馈"
            style="margin-bottom: 16px"
          >
-            <n-text>{{ evaluationResult.feedback }}</n-text>
+            <n-text>{{ evaluation.feedback }}</n-text>
          </n-card>

          <!-- 建议部分 -->
          <n-card
-            v-if="evaluationResult?.suggestions"
+            v-if="evaluation?.suggestions"
            size="small"
            title="改进建议"
            style="margin-bottom: 16px"
          >
-            <n-text>{{ evaluationResult.suggestions }}</n-text>
+            <n-text>{{ evaluation.suggestions }}</n-text>
          </n-card>

          <!-- 详细评分部分 -->
          <n-card
-            v-if="evaluationResult?.criteriaDetails"
+            v-if="evaluation?.criteria_details"
            size="small"
            title="详细评分"
          >
            <div
-              v-for="(detail, key) in evaluationResult.criteriaDetails"
+              v-for="(detail, key) in evaluation.criteria_details"
              :key="key"
              style="margin-bottom: 12px"
            >
--- 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 { useFlowchartSubmission } from "../composables/useFlowchartSubmission"
+import { useFlowchart } from "../composables/useFlowchart"
 import FlowchartEvaluationDisplay from "./FlowchartEvaluationDisplay.vue"

 const { isDesktop } = useBreakpoints()
@@ -8,9 +8,9 @@ const { isDesktop } = useBreakpoints()
 // 通过inject获取FlowchartEditor组件的引用
 const flowchartEditorRef = inject<any>("flowchartEditorRef")

-// 使用拆分后的逻辑
+// 使用合并后的逻辑
 const {
-  evaluationResult,
+  evaluation,
  loading,
  submissionCount,
  myFlowchartZippedStr,
@@ -19,7 +19,7 @@ const {
  disconnect,
  checkCurrentSubmissionStatus,
  submitFlowchartData,
-} = useFlowchartSubmission()
+} = useFlowchart()

 // 组件挂载时连接 WebSocket 并检查状态
 onMounted(() => {
@@ -33,8 +33,8 @@ onUnmounted(() => {
 })

 // 提交函数
-async function submit() {
-  await submitFlowchartData(flowchartEditorRef)
+function submit() {
+  submitFlowchartData(flowchartEditorRef)
 }

 // 处理加载到编辑器
@@ -64,10 +64,9 @@ function handleLoadToEditor(data: any) {

    <!-- 评分结果显示组件 -->
    <FlowchartEvaluationDisplay
-      :evaluation-result="evaluationResult"
+      :evaluation="evaluation"
      :my-flowchart-zipped-str="myFlowchartZippedStr"
      :my-mermaid-code="myMermaidCode"
-      @close="() => {}"
      @load-to-editor="handleLoadToEditor"
    />
  </n-flex>
--- a/src/oj/problem/composables/useFlowchartSubmission.ts
+++ b/src/oj/problem/composables/useFlowchartSubmission.ts
@@ -1,36 +1,90 @@
 import { ref } from "vue"
 import { useMessage } from "naive-ui"
+import { toRefs } from "vue"
 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"
+import {
+  useFlowchartWebSocket,
+  type FlowchartEvaluationUpdate,
+} from "shared/composables/websocket"

-export function useFlowchartSubmission() {
+export interface Evaluation {
+  score: number
+  grade: string
+  feedback: string
+  suggestions: string
+  criteria_details: {
+    [key: string]: { score: number; max: number; comment: string }
+  }
+}
+
+export function useFlowchart() {
  const message = useMessage()
  const problemStore = useProblemStore()
  const { problem } = toRefs(problemStore)

  const { convertToMermaid } = useMermaidConverter()
-  const {
-    evaluationResult,
-    submissionStatus,
-    loading,
-    connect,
-    disconnect,
-    subscribeToSubmission,
-    clearResult,
-    setLoading,
-    setEvaluationResult,
-  } = useFlowchartEvaluation()

-  // 提交次数
+  // 评估相关状态
+  const evaluation = ref<Evaluation | null>(null)
+  const loading = ref(false)
+
+  // 提交相关状态
  const submissionCount = ref(0)
-
-  // 存储流程图数据
  const myFlowchartZippedStr = ref("")
  const myMermaidCode = ref("")

+  // 处理 WebSocket 消息
+  const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
+    console.log("收到流程图评分更新:", data)
+
+    if (data.type === "flowchart_evaluation_completed") {
+      loading.value = false
+      evaluation.value = {
+        score: data.score || 0,
+        grade: data.grade || "",
+        feedback: data.feedback || "",
+        suggestions: data.suggestions || "",
+        criteria_details: data.criteria_details || {},
+      }
+      message.success(`流程图评分完成！得分: ${data.score}分 (${data.grade}级)`)
+    } else if (data.type === "flowchart_evaluation_failed") {
+      console.log("处理评分失败消息")
+      loading.value = false
+      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)
+  }
+
+  // 清除结果
+  const clearResult = () => {
+    evaluation.value = null
+  }
+
+  // 设置加载状态
+  const setLoading = (value: boolean) => {
+    loading.value = value
+  }
+
+  // 设置评估结果
+  const setEvaluation = (result: Evaluation) => {
+    evaluation.value = result
+  }
+
  // 检查当前问题的流程图提交状态
  const checkCurrentSubmissionStatus = async () => {
    if (!problem.value?.id) return
@@ -43,12 +97,13 @@ export function useFlowchartSubmission() {
    if (submission && submission.status === 2) {
      myFlowchartZippedStr.value = data.submission.flowchart_data.data
      myMermaidCode.value = data.submission.mermaid_code
-      setEvaluationResult({
+      submissionCount.value += 1
+      setEvaluation({
        score: submission.ai_score,
        grade: submission.ai_grade,
        feedback: submission.ai_feedback,
        suggestions: submission.ai_suggestions,
-        criteriaDetails: submission.ai_criteria_details,
+        criteria_details: submission.ai_criteria_details,
      })
    }
  }
@@ -97,14 +152,20 @@ export function useFlowchartSubmission() {
  }

  return {
-    evaluationResult,
-    submissionStatus,
+    // 评估相关
+    evaluation,
    loading,
+    connect,
+    disconnect,
+    subscribeToSubmission,
+    clearResult,
+    setLoading,
+    setEvaluation,
+
+    // 提交相关
    submissionCount,
    myFlowchartZippedStr,
    myMermaidCode,
-    connect,
-    disconnect,
    checkCurrentSubmissionStatus,
    submitFlowchartData,
  }
--- a/src/oj/problem/composables/useFlowchartEvaluation.ts
+++ b/src/oj/problem/composables/useFlowchartEvaluation.ts
@@ -1,97 +0,0 @@
-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/shared/composables/websocket.ts
+++ b/src/shared/composables/websocket.ts
@@ -422,6 +422,8 @@ export interface FlowchartEvaluationUpdate extends WebSocketMessage {
  score?: number
  grade?: string
  feedback?: string
+  suggestions?: string
+  criteriaDetails?: any
  error?: string
 }