From 9ecabf9eb9c096b973ce924df7d4d0b9418b8b79 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Tue, 14 Oct 2025 01:17:55 +0800
Subject: [PATCH] update

---
 .../components/FlowchartEvaluationDisplay.vue | 161 ---------
 src/oj/problem/components/SubmitFlowchart.vue | 335 ++++++++++++++++--
 src/oj/problem/composables/useFlowchart.ts    | 172 ---------
 3 files changed, 299 insertions(+), 369 deletions(-)
 delete mode 100644 src/oj/problem/components/FlowchartEvaluationDisplay.vue
 delete mode 100644 src/oj/problem/composables/useFlowchart.ts

diff --git a/src/oj/problem/components/FlowchartEvaluationDisplay.vue b/src/oj/problem/components/FlowchartEvaluationDisplay.vue
deleted file mode 100644
index 55ec660..0000000
--- a/src/oj/problem/components/FlowchartEvaluationDisplay.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script lang="ts" setup>
-import { atou } from "utils/functions"
-import { useMermaid } from "shared/composables/useMermaid"
-import { Evaluation } from "../composables/useFlowchart"
-
-interface Props {
-  evaluation: Evaluation | null
-  myFlowchartZippedStr: string
-  myMermaidCode: string
-}
-
-const props = defineProps<Props>()
-
-const emit = defineEmits<{
-  loadToEditor: [data: any]
-}>()
-
-const showDetailModal = ref(false)
-
-// mermaid 渲染相关
-const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
-
-// 使用 mermaid composable
-const { renderError, renderFlowchart } = useMermaid()
-
-// 根据分数获取标签类型
-const getScoreType = (score: number) => {
-  if (score >= 90) return "success"
-  if (score >= 80) return "info"
-  if (score >= 70) return "warning"
-  return "error"
-}
-
-async function openDetailModal() {
-  showDetailModal.value = true
-  await nextTick()
-  await renderFlowchart(mermaidContainer.value, props.myMermaidCode)
-}
-
-function closeModal() {
-  showDetailModal.value = false
-}
-
-function loadToEditor() {
-  if (props.myFlowchartZippedStr) {
-    const str = atou(props.myFlowchartZippedStr)
-    const json = JSON.parse(str)
-    const processedData = {
-      nodes: json.nodes || [],
-      edges: json.edges || [],
-    }
-    emit("loadToEditor", processedData)
-  }
-  closeModal()
-}
-</script>
-
-<template>
-  <div>
-    <!-- 评分结果显示 -->
-    <n-button
-      secondary
-      v-if="evaluation"
-      @click="openDetailModal"
-      :type="getScoreType(evaluation.score)"
-    >
-      {{ evaluation.score }}分 {{ evaluation.grade }}级
-    </n-button>
-
-    <!-- 详情弹框 -->
-    <n-modal
-      v-model:show="showDetailModal"
-      preset="card"
-      title="评分详情"
-      style="width: 1000px"
-    >
-      <n-grid :cols="5" :x-gap="16">
-        <n-gi :span="3">
-          <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">
-              加载到流程图编辑器
-            </n-button>
-          </n-flex>
-        </n-gi>
-        <n-gi :span="2">
-          <n-card
-            v-if="evaluation?.feedback"
-            size="small"
-            title="AI反馈"
-            style="margin-bottom: 16px"
-          >
-            <n-text>{{ evaluation.feedback }}</n-text>
-          </n-card>
-
-          <!-- 建议部分 -->
-          <n-card
-            v-if="evaluation?.suggestions"
-            size="small"
-            title="改进建议"
-            style="margin-bottom: 16px"
-          >
-            <n-text>{{ evaluation.suggestions }}</n-text>
-          </n-card>
-
-          <!-- 详细评分部分 -->
-          <n-card
-            v-if="evaluation?.criteria_details"
-            size="small"
-            title="详细评分"
-          >
-            <div
-              v-for="(detail, key) in evaluation.criteria_details"
-              :key="key"
-              style="margin-bottom: 12px"
-            >
-              <n-flex
-                justify="space-between"
-                align="center"
-                style="margin-bottom: 4px"
-              >
-                <n-text strong>{{ key }}</n-text>
-                <n-tag
-                  :type="getScoreType(detail.score || 0)"
-                  size="small"
-                  round
-                >
-                  {{ detail.score || 0 }}分 / {{ detail.max }}分
-                </n-tag>
-              </n-flex>
-              <n-text v-if="detail.comment" depth="3" style="font-size: 12px">
-                {{ detail.comment }}
-              </n-text>
-            </div>
-          </n-card>
-        </n-gi>
-      </n-grid>
-    </n-modal>
-  </div>
-</template>
-
-<style scoped>
-.flowchart {
-  height: 500px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-:deep(.flowchart > svg) {
-  height: 100%;
-}
-</style>
diff --git a/src/oj/problem/components/SubmitFlowchart.vue b/src/oj/problem/components/SubmitFlowchart.vue
index 8d1012c..4098bfd 100644
--- a/src/oj/problem/components/SubmitFlowchart.vue
+++ b/src/oj/problem/components/SubmitFlowchart.vue
@@ -1,52 +1,212 @@
 <script lang="ts" setup>
+import { toRefs } from "vue"
+
+// 工具函数
+import { atou, utoa } from "utils/functions"
+
+// 组合式函数
 import { useBreakpoints } from "shared/composables/breakpoints"
-import { useFlowchart } from "../composables/useFlowchart"
-import FlowchartEvaluationDisplay from "./FlowchartEvaluationDisplay.vue"
+import { useMermaid } from "shared/composables/useMermaid"
+import { useMermaidConverter } from "../composables/useMermaidConverter"
+import {
+  useFlowchartWebSocket,
+  type FlowchartEvaluationUpdate,
+} from "shared/composables/websocket"
 
-const { isDesktop } = useBreakpoints()
+// API 和状态管理
+import { getCurrentProblemFlowchartSubmission, submitFlowchart } from "oj/api"
+import { useProblemStore } from "oj/store/problem"
 
+// ==================== 类型定义 ====================
+interface Rating {
+  score: number
+  grade: string
+}
+
+interface Evaluation extends Rating {
+  feedback: string
+  suggestions: string
+  criteria_details: {
+    [key: string]: { score: number; max: number; comment: string }
+  }
+}
+
+// ==================== 组合式函数和响应式变量 ====================
 // 通过inject获取FlowchartEditor组件的引用
 const flowchartEditorRef = inject<any>("flowchartEditorRef")
+const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
 
-// 使用合并后的逻辑
-const {
-  evaluation,
-  loading,
-  submissionCount,
-  myFlowchartZippedStr,
-  myMermaidCode,
-  connect,
-  disconnect,
-  checkCurrentSubmissionStatus,
-  submitFlowchartData,
-} = useFlowchart()
+// 基础组合式函数
+const message = useMessage()
+const problemStore = useProblemStore()
+const { problem } = toRefs(problemStore)
+const { isDesktop } = useBreakpoints()
+const { convertToMermaid } = useMermaidConverter()
+const { renderError, renderFlowchart } = useMermaid()
 
-// 组件挂载时连接 WebSocket 并检查状态
-onMounted(() => {
-  connect()
-  checkCurrentSubmissionStatus()
-})
+// 状态管理
+const loading = ref(false)
+const rating = ref<Rating | null>(null)
+const submissionCount = ref(0)
+const myFlowchartZippedStr = ref("")
+const myMermaidCode = ref("")
+const showDetailModal = ref(false)
+const evaluation = ref<Evaluation | null>(null)
 
-// 组件卸载时断开连接
-onUnmounted(() => {
-  disconnect()
-})
+// ==================== WebSocket 相关函数 ====================
+// 处理 WebSocket 消息
+const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
+  console.log("收到流程图评分更新:", data)
+
+  if (data.type === "flowchart_evaluation_completed") {
+    loading.value = false
+    rating.value = {
+      score: data.score || 0,
+      grade: data.grade || "",
+    }
+    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,
+)
+
+// 订阅提交更新
+function subscribeToSubmission(submissionId: string) {
+  console.log("开始订阅WebSocket更新")
+  subscribe(submissionId)
+}
+
+// ==================== 提交相关函数 ====================
+// 提交流程图
+async function submitFlowchartData(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))
+
+  loading.value = true
+  rating.value = { score: 0, grade: "" }
+
+  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) {
+    loading.value = false
+    message.error("流程图提交失败")
+    console.error("提交流程图失败:", error)
+  }
+}
 
 // 提交函数
 function submit() {
   submitFlowchartData(flowchartEditorRef)
 }
 
-// 处理加载到编辑器
-function handleLoadToEditor(data: any) {
-  if (flowchartEditorRef?.value) {
-    flowchartEditorRef.value.setFlowchartData(data)
+// ==================== 数据获取和处理函数 ====================
+async function getSubmission() {
+  if (!problem.value?.id) return
+  const { data } = await getCurrentProblemFlowchartSubmission(problem.value.id)
+  const submission = data.submission
+  myMermaidCode.value = submission.mermaid_code
+  myFlowchartZippedStr.value = submission.flowchart_data.data
+  if (submission && submission.status === 2) {
+    rating.value = {
+      score: submission.ai_score,
+      grade: submission.ai_grade,
+    }
+    evaluation.value = {
+      score: submission.ai_score,
+      grade: submission.ai_grade,
+      feedback: submission.ai_feedback,
+      suggestions: submission.ai_suggestions,
+      criteria_details: submission.ai_criteria_details,
+    }
   }
 }
+
+// ==================== 模态框相关函数 ====================
+async function openDetailModal() {
+  showDetailModal.value = true
+  await getSubmission()
+  renderFlowchart(mermaidContainer.value, myMermaidCode.value)
+}
+
+function closeModal() {
+  showDetailModal.value = false
+}
+
+function loadToEditor() {
+  if (myFlowchartZippedStr.value) {
+    const str = atou(myFlowchartZippedStr.value)
+    const json = JSON.parse(str)
+    const processedData = {
+      nodes: json.nodes || [],
+      edges: json.edges || [],
+    }
+    if (flowchartEditorRef?.value) {
+      flowchartEditorRef.value.setFlowchartData(processedData)
+    }
+  }
+  closeModal()
+}
+
+// ==================== 工具函数 ====================
+const getScoreType = (score: number) => {
+  if (score >= 90) return "success"
+  if (score >= 80) return "info"
+  if (score >= 70) return "warning"
+  return "error"
+}
+
+// ==================== 生命周期钩子 ====================
+// 组件挂载时连接 WebSocket 并检查状态
+onMounted(() => {
+  connect()
+  getSubmission()
+})
+
+// 组件卸载时断开连接
+onUnmounted(() => {
+  disconnect()
+})
 </script>
 
 <template>
+  <!-- 主要操作区域 -->
   <n-flex align="center">
+    <!-- 提交按钮 -->
     <n-button
       :size="isDesktop ? 'medium' : 'small'"
       type="primary"
@@ -57,17 +217,120 @@ function handleLoadToEditor(data: any) {
       {{ loading ? "评分中..." : "提交流程图" }}
     </n-button>
 
-    <!-- 显示提交次数 -->
+    <!-- 提交次数显示 -->
     <n-button secondary v-if="submissionCount > 0" type="info">
       {{ submissionCount }} 次
     </n-button>
 
-    <!-- 评分结果显示组件 -->
-    <FlowchartEvaluationDisplay
-      :evaluation="evaluation"
-      :my-flowchart-zipped-str="myFlowchartZippedStr"
-      :my-mermaid-code="myMermaidCode"
-      @load-to-editor="handleLoadToEditor"
-    />
+    <!-- 评分结果按钮 -->
+    <n-button
+      secondary
+      v-if="rating"
+      @click="openDetailModal"
+      :type="getScoreType(rating.score)"
+    >
+      {{ rating.score }}分 {{ rating.grade }}级
+    </n-button>
+
+    <!-- 评分详情模态框 -->
+    <n-modal
+      v-model:show="showDetailModal"
+      preset="card"
+      title="评分详情"
+      style="width: 1000px"
+    >
+      <n-grid :cols="5" :x-gap="16">
+        <!-- 左侧：流程图预览区域 -->
+        <n-gi :span="3">
+          <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">
+              加载到流程图编辑器
+            </n-button>
+          </n-flex>
+        </n-gi>
+
+        <!-- 右侧：评分详情区域 -->
+        <n-gi :span="2">
+          <!-- AI反馈 -->
+          <n-card
+            v-if="evaluation?.feedback"
+            size="small"
+            title="AI反馈"
+            style="margin-bottom: 16px"
+          >
+            <n-text>{{ evaluation.feedback }}</n-text>
+          </n-card>score
+
+          <!-- 改进建议 -->
+          <n-card
+            v-if="evaluation?.suggestions"
+            size="small"
+            title="改进建议"
+            style="margin-bottom: 16px"
+          >
+            <n-text>{{ evaluation.suggestions }}</n-text>
+          </n-card>
+
+          <!-- 详细评分 -->
+          <n-card
+            v-if="evaluation?.criteria_details"
+            size="small"
+            title="详细评分"
+          >
+            <div
+              v-for="(detail, key) in evaluation.criteria_details"
+              :key="key"
+              style="margin-bottom: 12px"
+            >
+              <!-- 评分项标题和分数 -->
+              <n-flex
+                justify="space-between"
+                align="center"
+                style="margin-bottom: 4px"
+              >
+                <n-text strong>{{ key }}</n-text>
+                <n-tag
+                  :type="getScoreType(detail.score || 0)"
+                  size="small"
+                  round
+                >
+                  {{ detail.score || 0 }}分 / {{ detail.max }}分
+                </n-tag>
+              </n-flex>
+              <!-- 评分项详细说明 -->
+              <n-text v-if="detail.comment" depth="3" style="font-size: 12px">
+                {{ detail.comment }}
+              </n-text>
+            </div>
+          </n-card>
+        </n-gi>
+      </n-grid>
+    </n-modal>
   </n-flex>
 </template>
+<style scoped>
+/* ==================== 流程图样式 ==================== */
+.flowchart {
+  height: 500px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 确保 SVG 图表占满容器 */
+:deep(.flowchart > svg) {
+  height: 100%;
+}
+</style>
diff --git a/src/oj/problem/composables/useFlowchart.ts b/src/oj/problem/composables/useFlowchart.ts
deleted file mode 100644
index 195571f..0000000
--- a/src/oj/problem/composables/useFlowchart.ts
+++ /dev/null
@@ -1,172 +0,0 @@
-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 {
-  useFlowchartWebSocket,
-  type FlowchartEvaluationUpdate,
-} from "shared/composables/websocket"
-
-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 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
-
-    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
-      submissionCount.value += 1
-      setEvaluation({
-        score: submission.ai_score,
-        grade: submission.ai_grade,
-        feedback: submission.ai_feedback,
-        suggestions: submission.ai_suggestions,
-        criteria_details: 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 {
-    // 评估相关
-    evaluation,
-    loading,
-    connect,
-    disconnect,
-    subscribeToSubmission,
-    clearResult,
-    setLoading,
-    setEvaluation,
-
-    // 提交相关
-    submissionCount,
-    myFlowchartZippedStr,
-    myMermaidCode,
-    checkCurrentSubmissionStatus,
-    submitFlowchartData,
-  }
-}