Files
OJ2/apps/web/src/oj/problem/components/SubmitFlowchart.vue
T
xuyueandClaude Opus 5.5 04c90e3f89 feat(流程图): 手机上也能画流程图了
原来手机上不给画(节点库是 HTML5 拖放,手机上拖不动),只能在结果页签里多一段只读的
「流程图点评」。换成插入式编辑器之后只用点,手机上照样能画:
- 「代码」页签的工具栏里有「写代码 / 画流程图」、撤销、重做
- 屏幕底部那条在画流程图时换成「交给 AI 点评」
- 结果页签就是电脑上那一套(逐组结果、亮路径、载回画布),只读的那一段删了

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 21:28:20 +08:00

62 lines
2.1 KiB
Vue

<script lang="ts" setup>
import { storeToRefs } from "pinia"
import { useBreakpoints } from "shared/composables/breakpoints"
import { countBlank } from "shared/components/FlowchartEditor/model"
import { useProblemStore } from "oj/store/problem"
import { useFlowchartStore } from "oj/store/flowchart"
/**
* 「交给 AI 点评」按钮。
*
* 提交和评分(WebSocket + 轮询 + 超时)在 flowchart store;评分结果、历次分数、载回旧版
* 都在左栏「结果」页签(FlowchartResult)。原来这里还有一个分数按钮和 1000px 的评分弹框,
* 弹框盖住画布,学生没法一边看改进建议一边改图。
*/
/** 手机上它在屏幕底部那条(MobileActionBar),不在编辑器里面,所以画布从 store 拿 */
const { size, block = false } = defineProps<{
size?: "small" | "medium" | "large"
block?: boolean
}>()
const message = useMessage()
const { problem } = storeToRefs(useProblemStore())
const flowchartStore = useFlowchartStore()
const { loading, unchanged, editor: canvas } = storeToRefs(flowchartStore)
const { isDesktop } = useBreakpoints()
function submit() {
const editor = canvas.value
if (!editor) return
const doc = editor.getDoc()
if (!doc.steps.length) {
message.warning("画布上还没有图:点「开始」下面的 +,加第一步")
return
}
// 空框交上去 AI 只能瞎猜,学生也不知道扣分是因为忘了写字
const blank = countBlank(doc.steps)
if (blank) {
message.warning(`有 ${blank} 个框还没写字,点一下框就能写`)
return
}
flowchartStore.submit(doc)
}
// 进题、换题都读一次历次分数(store 里同一道题只读一次)
watch(() => problem.value?.id, flowchartStore.ensureLoaded, { immediate: true })
</script>
<template>
<n-button
:size="size ?? (isDesktop ? 'medium' : 'small')"
:block="block"
type="primary"
:loading="loading"
:disabled="loading || unchanged"
:title="unchanged && !loading ? '这一版已经点评过了,改一改再交' : undefined"
@click="submit"
>
{{ loading ? "AI 点评中…" : "交给 AI 点评" }}
</n-button>
</template>