@@ -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>
|
|
||||||
@@ -1,52 +1,212 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import { toRefs } from "vue"
|
||||||
|
|
||||||
|
// 工具函数
|
||||||
|
import { atou, utoa } from "utils/functions"
|
||||||
|
|
||||||
|
// 组合式函数
|
||||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||||
import { useFlowchart } from "../composables/useFlowchart"
|
import { useMermaid } from "shared/composables/useMermaid"
|
||||||
import FlowchartEvaluationDisplay from "./FlowchartEvaluationDisplay.vue"
|
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组件的引用
|
// 通过inject获取FlowchartEditor组件的引用
|
||||||
const flowchartEditorRef = inject<any>("flowchartEditorRef")
|
const flowchartEditorRef = inject<any>("flowchartEditorRef")
|
||||||
|
const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
|
||||||
|
|
||||||
// 使用合并后的逻辑
|
// 基础组合式函数
|
||||||
const {
|
const message = useMessage()
|
||||||
evaluation,
|
const problemStore = useProblemStore()
|
||||||
loading,
|
const { problem } = toRefs(problemStore)
|
||||||
submissionCount,
|
const { isDesktop } = useBreakpoints()
|
||||||
myFlowchartZippedStr,
|
const { convertToMermaid } = useMermaidConverter()
|
||||||
myMermaidCode,
|
const { renderError, renderFlowchart } = useMermaid()
|
||||||
connect,
|
|
||||||
disconnect,
|
|
||||||
checkCurrentSubmissionStatus,
|
|
||||||
submitFlowchartData,
|
|
||||||
} = useFlowchart()
|
|
||||||
|
|
||||||
// 组件挂载时连接 WebSocket 并检查状态
|
// 状态管理
|
||||||
onMounted(() => {
|
const loading = ref(false)
|
||||||
connect()
|
const rating = ref<Rating | null>(null)
|
||||||
checkCurrentSubmissionStatus()
|
const submissionCount = ref(0)
|
||||||
})
|
const myFlowchartZippedStr = ref("")
|
||||||
|
const myMermaidCode = ref("")
|
||||||
|
const showDetailModal = ref(false)
|
||||||
|
const evaluation = ref<Evaluation | null>(null)
|
||||||
|
|
||||||
// 组件卸载时断开连接
|
// ==================== WebSocket 相关函数 ====================
|
||||||
onUnmounted(() => {
|
// 处理 WebSocket 消息
|
||||||
disconnect()
|
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() {
|
function submit() {
|
||||||
submitFlowchartData(flowchartEditorRef)
|
submitFlowchartData(flowchartEditorRef)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 处理加载到编辑器
|
// ==================== 数据获取和处理函数 ====================
|
||||||
function handleLoadToEditor(data: any) {
|
async function getSubmission() {
|
||||||
if (flowchartEditorRef?.value) {
|
if (!problem.value?.id) return
|
||||||
flowchartEditorRef.value.setFlowchartData(data)
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<!-- 主要操作区域 -->
|
||||||
<n-flex align="center">
|
<n-flex align="center">
|
||||||
|
<!-- 提交按钮 -->
|
||||||
<n-button
|
<n-button
|
||||||
:size="isDesktop ? 'medium' : 'small'"
|
:size="isDesktop ? 'medium' : 'small'"
|
||||||
type="primary"
|
type="primary"
|
||||||
@@ -57,17 +217,120 @@ function handleLoadToEditor(data: any) {
|
|||||||
{{ loading ? "评分中..." : "提交流程图" }}
|
{{ loading ? "评分中..." : "提交流程图" }}
|
||||||
</n-button>
|
</n-button>
|
||||||
|
|
||||||
<!-- 显示提交次数 -->
|
<!-- 提交次数显示 -->
|
||||||
<n-button secondary v-if="submissionCount > 0" type="info">
|
<n-button secondary v-if="submissionCount > 0" type="info">
|
||||||
{{ submissionCount }} 次
|
{{ submissionCount }} 次
|
||||||
</n-button>
|
</n-button>
|
||||||
|
|
||||||
<!-- 评分结果显示组件 -->
|
<!-- 评分结果按钮 -->
|
||||||
<FlowchartEvaluationDisplay
|
<n-button
|
||||||
:evaluation="evaluation"
|
secondary
|
||||||
:my-flowchart-zipped-str="myFlowchartZippedStr"
|
v-if="rating"
|
||||||
:my-mermaid-code="myMermaidCode"
|
@click="openDetailModal"
|
||||||
@load-to-editor="handleLoadToEditor"
|
: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>
|
</n-flex>
|
||||||
</template>
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
/* ==================== 流程图样式 ==================== */
|
||||||
|
.flowchart {
|
||||||
|
height: 500px;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保 SVG 图表占满容器 */
|
||||||
|
:deep(.flowchart > svg) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -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,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user