feat(流程图): 「写代码 / 画流程图」变成工具栏上的切换，AI 的评分和历次分数挪进结果页签，题单里也能画
- 流程图题的工具栏最左边是「写代码 / 画流程图」。原来流程图藏在语言下拉里，叫一个名叫 Flowchart 的「语言」；画完一道题之后它还被记成语言偏好，下一道能画的题一打开就是画布 - 「交给 AI 点评」交完切到「结果」页签：评的时候写着「AI 正在看你的图」、画布照样能改； 评完是分数、评语、改进建议、四项得分，顶上一排历次分数，点哪次看哪次。 原来是提交按钮旁一个 1000px 的弹框，盖住画布，翻历次评分要一页一页点 - 画到 A / S：给「照着它写代码 →」，题单里 1.5 秒后回题单（和代码通过一样）， 课堂条当场标成做完；只在这一页上刚评完的那次才算，进页面读到以前的 A 不跳 - 「把这一版载回画布」只在画布和那一版不一样时出现；载回、进页面读回草稿后都缩放到装下整张图 - 题单入口能画流程图了（原来只有题库入口能画），题单里的代码草稿、流程图草稿各存一份， 加入题单之前写的、画的不会一进题单就摆在编辑器里 - 手机上不给「画流程图」（节点库是拖放，手机上拖不动），题面里以前画好的那张照样看得到 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
3fe3caa944
commit
11368813cc
16 files changed
+747
-388
No files matched your search
+1
-1
@@ -58,7 +58,7 @@ API 调用不按模块分：学生端全在 `oj/api.ts`、后台全在 `admin/ap
|
||||
跨端的（登录、资料、标签、验证码）在 `shared/api.ts`。
|
||||
|
||||
Shared logic lives in `shared/`:
|
||||
- `store/` — Pinia stores: `user` (auth/roles), `config` (site-wide settings), `authModal` (login/signup form state), `loginSummary` (AI activity summary), `collab` (help-request queue + collab room), `achievement` (解锁弹窗队列), `myFlowchart` (流程图弹窗的 mermaid 源码)
|
||||
- `store/` — Pinia stores: `user` (auth/roles), `config` (site-wide settings), `authModal` (login/signup form state), `loginSummary` (AI activity summary), `collab` (help-request queue + collab room), `achievement` (解锁弹窗队列), `myFlowchart` (题面「你画的流程图」那张 A/S 图的 mermaid 源码)
|
||||
- `composables/` — `aiStream`, `pagination` (URL-synced), `websocket` (reconnect + heartbeat), `collabDoc` (Yjs binding for the collab channel), `configUpdate` (WS-pushed config sync), `useMermaid` (lazy Mermaid render), `darkTransition` (View Transitions，111 以下走降级分支), `hiddenStudents` (统计面板的「请假隐藏」), `chartTheme`, `breakpoints`, `maxkb`, `learnProgress`, `rarity`
|
||||
- `layout/` — `default.vue` and `admin.vue` layout wrappers
|
||||
- `api.ts` — shared API calls (auth, profile, tags, captcha)
|
||||
|
||||
+4
-10
@@ -23,8 +23,7 @@ import {
|
||||
type YearlyAc,
|
||||
type ProblemList,
|
||||
type CreateFlowchartResponse,
|
||||
type FlowchartCurrent,
|
||||
type FlowchartDetail,
|
||||
type FlowchartScores,
|
||||
type FlowchartList,
|
||||
type FlowchartSubmission,
|
||||
type AiDetail,
|
||||
@@ -437,14 +436,9 @@ export function retryFlowchartSubmission(submissionId: string) {
|
||||
return api.post<{ status: string }>(`flowcharts/${encodeURIComponent(submissionId)}/retry`)
|
||||
}
|
||||
|
||||
export function getCurrentProblemFlowchartSubmission(problemId: number) {
|
||||
return api.get<FlowchartCurrent>(`problems/${problemId}/flowchart/current`)
|
||||
}
|
||||
|
||||
export function getFlowchartSubmissionDetail(problemId: number, page = 0) {
|
||||
return api.get<FlowchartDetail>(`problems/${problemId}/flowchart/history`, {
|
||||
params: { page },
|
||||
})
|
||||
/** 自己在这道题上评完的每一次（早的在前），加入题单之前的已经滤掉 */
|
||||
export function getFlowchartScores(problemId: number) {
|
||||
return api.get<FlowchartScores>(`problems/${problemId}/flowchart/scores`)
|
||||
}
|
||||
|
||||
// ==================== 题单相关API ====================
|
||||
|
||||
@@ -3,6 +3,7 @@ import { storeToRefs } from "pinia"
|
||||
import type { RouteLocationRaw } from "vue-router"
|
||||
import { getProblemSetDetail, getProblemSetProblems } from "oj/api"
|
||||
import { useContestStore } from "oj/store/contest"
|
||||
import { isFlowchartPass, useFlowchartStore } from "oj/store/flowchart"
|
||||
import { useLessonStore } from "oj/store/lesson"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useUserStore } from "shared/store/user"
|
||||
@@ -30,7 +31,11 @@ const userStore = useUserStore()
|
||||
const { problem } = storeToRefs(useProblemStore())
|
||||
const currentId = computed(() => problem.value?._id ?? "")
|
||||
|
||||
/** 刚在这一页上做出来（不是本来就做过）：换题时 id 跟着变，那一次不算 */
|
||||
/**
|
||||
* 刚在这一页上做出来（不是本来就做过）：代码通过，或者流程图刚评到 A / S。
|
||||
* 换题时 id 跟着变，那一次不算；流程图只认这一页上刚评完的（evaluatedSeq）
|
||||
*/
|
||||
const flowchartStore = useFlowchartStore()
|
||||
function onSolvedHere(callback: () => void) {
|
||||
watch(
|
||||
() => [problem.value?.id, problem.value?.myStatus] as const,
|
||||
@@ -38,6 +43,12 @@ function onSolvedHere(callback: () => void) {
|
||||
if (id !== undefined && id === previousId && status === 0 && previousStatus !== 0) callback()
|
||||
},
|
||||
)
|
||||
watch(
|
||||
() => flowchartStore.evaluatedSeq,
|
||||
() => {
|
||||
if (isFlowchartPass(flowchartStore.latestRating.grade)) callback()
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
// ==================== 课堂 ====================
|
||||
@@ -124,13 +135,18 @@ const setBar = computed(() => {
|
||||
params: { problemSetId: ctx.value.problemSetId, problemID: item.problem._id },
|
||||
}
|
||||
: null
|
||||
const done = list.filter((item) => item.isCompleted).length
|
||||
// 进度只数必做题，和题单页的「完成进度 2 / 8（另有 3 道选做）」同一个口径；
|
||||
// 一道必做都没有的题单才数全部
|
||||
const required = list.some((item) => item.isRequired)
|
||||
? list.filter((item) => item.isRequired)
|
||||
: list
|
||||
const done = required.filter((item) => item.isCompleted).length
|
||||
return {
|
||||
title: problemSet.value.title,
|
||||
home: { name: "problemset", params: { problemSetId: ctx.value.problemSetId } },
|
||||
done,
|
||||
total: list.length,
|
||||
percentage: list.length ? (done / list.length) * 100 : 0,
|
||||
total: required.length,
|
||||
percentage: required.length ? (done / required.length) * 100 : 0,
|
||||
position: index >= 0 ? index + 1 : null,
|
||||
previous: index >= 0 ? link(list[index - 1]) : null,
|
||||
next: index >= 0 ? link(list[index + 1]) : null,
|
||||
|
||||
@@ -44,7 +44,20 @@ const ctx = useProblemPageContext()
|
||||
const userStore = useUserStore()
|
||||
const codeStore = useCodeStore()
|
||||
const problemStore = useProblemStore()
|
||||
const { problem, languages } = storeToRefs(problemStore)
|
||||
const { problem, codeLanguages, canDraw } = storeToRefs(problemStore)
|
||||
|
||||
/**
|
||||
* 「写代码 / 画流程图」是两种作业，不是两门语言。原来流程图藏在语言下拉里，叫一个名叫
|
||||
* Flowchart 的「语言」—— 有的题流程图交了几百次、代码个位数，入口却在下拉的第一项里。
|
||||
*/
|
||||
const drawing = computed(() => codeStore.code.language === "Flowchart")
|
||||
const mode = computed({
|
||||
get: () => (drawing.value ? "draw" : "code"),
|
||||
set: (value: "draw" | "code") => {
|
||||
if (value === "draw") problemStore.switchLanguage("Flowchart")
|
||||
else problemStore.switchLanguage(problemStore.supportedLanguage(codeStore.preferredLanguage()))
|
||||
},
|
||||
})
|
||||
|
||||
const { isDesktop } = useBreakpoints()
|
||||
|
||||
@@ -183,7 +196,7 @@ const handleMenuSelect = (key: string) => {
|
||||
|
||||
// computed：换题时组件复用，选项得跟着新题的语言走
|
||||
const languageOptions = computed<DropdownOption[]>(() =>
|
||||
languages.value.map((it) => ({
|
||||
codeLanguages.value.map((it) => ({
|
||||
label: () =>
|
||||
h(NFlex, { align: "center" }, () => [
|
||||
h(Icon, {
|
||||
@@ -239,8 +252,15 @@ const goEdit = () => {
|
||||
|
||||
<template>
|
||||
<n-flex align="center">
|
||||
<!-- 协作中的老师不会落到画图：求助入口本身就排掉了流程图 -->
|
||||
<n-radio-group v-if="canDraw && !showCollabBar" v-model:value="mode" :size="buttonSize">
|
||||
<n-radio-button value="code">写代码</n-radio-button>
|
||||
<n-radio-button value="draw">画流程图</n-radio-button>
|
||||
</n-radio-group>
|
||||
|
||||
<!-- 协作中编辑器的语言跟着学生走，这个选择器改了也不会生效，索性禁掉 -->
|
||||
<n-select
|
||||
v-if="!drawing"
|
||||
v-model:value="codeStore.code.language"
|
||||
style="width: 120px"
|
||||
:size="buttonSize"
|
||||
|
||||
@@ -0,0 +1,388 @@
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from "pinia"
|
||||
import { useCodeStore } from "oj/store/code"
|
||||
import { isFlowchartPass, useFlowchartStore } from "oj/store/flowchart"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { sortFlowchartCriteria } from "utils/constants"
|
||||
import { decompressFromBase64, parseTime } from "utils/functions"
|
||||
|
||||
/**
|
||||
* 「结果」页签里流程图作业的那一块：AI 在评 / 评完了几分 / 历次分数 / 评语和改进建议。
|
||||
*
|
||||
* 原来评分详情是提交按钮旁一个 1000px 的弹框：盖住画布，学生没法一边看改进建议一边改图；
|
||||
* 翻历次评分要一页一页点分页器。现在摆在左栏，画布整列都在右边（设计文档第 6 节）。
|
||||
*/
|
||||
|
||||
const flowchartStore = useFlowchartStore()
|
||||
const { phase, scores, hiddenCount, selectedId, details, detailLoading, editor } =
|
||||
storeToRefs(flowchartStore)
|
||||
const problemStore = useProblemStore()
|
||||
const codeStore = useCodeStore()
|
||||
const message = useMessage()
|
||||
|
||||
/** 正在看的那一次：点过哪次就是哪次，否则是最新的 */
|
||||
const current = computed(() => {
|
||||
const id = selectedId.value ?? scores.value.at(-1)?.id
|
||||
return id ? (scores.value.find((row) => row.id === id) ?? null) : null
|
||||
})
|
||||
const currentIndex = computed(() =>
|
||||
current.value ? scores.value.findIndex((row) => row.id === current.value!.id) : -1,
|
||||
)
|
||||
const detail = computed(() => (current.value ? details.value[current.value.id] : undefined))
|
||||
const viewingLatest = computed(() => selectedId.value === null)
|
||||
|
||||
// 评完的那次、点到的那次，评语都要现拉（历次分数里只有分数）
|
||||
watch(
|
||||
() => current.value?.id,
|
||||
(id) => {
|
||||
if (id && !details.value[id]) flowchartStore.select(selectedId.value)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
const criteria = computed(() =>
|
||||
sortFlowchartCriteria(
|
||||
(detail.value?.aiCriteriaDetails ?? {}) as Record<
|
||||
string,
|
||||
{ score: number; max: number; comment?: string }
|
||||
>,
|
||||
),
|
||||
)
|
||||
const suggestions = computed(() =>
|
||||
(detail.value?.aiSuggestions ?? "")
|
||||
.split("\n")
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean),
|
||||
)
|
||||
|
||||
function gradeType(grade: string) {
|
||||
if (grade === "S" || grade === "A") return "success"
|
||||
if (grade === "B") return "warning"
|
||||
return "error"
|
||||
}
|
||||
|
||||
function percentType(ratio: number) {
|
||||
if (ratio >= 0.8) return "success"
|
||||
if (ratio >= 0.6) return "info"
|
||||
if (ratio >= 0.4) return "warning"
|
||||
return "error"
|
||||
}
|
||||
|
||||
// ==================== 载回画布 ====================
|
||||
/** 这一版的画布数据（压缩前的 JSON 字符串）；老提交的压缩数据可能是坏的 */
|
||||
const versionJson = computed(() => {
|
||||
const data = detail.value?.flowchartData?.data
|
||||
if (typeof data !== "string" || !data) return null
|
||||
try {
|
||||
return decompressFromBase64(data)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 一张图「长什么样」：节点的 id / 类型 / data（字写在里面）/ 位置，连线的两端和标签。不直接比 JSON 字符串 ——
|
||||
* 载回画布时编辑器会补上默认字段（sourceHandle: null 之类），老提交还带着 vue-flow 的运行时
|
||||
* 字段，字符串永远对不上，按钮就一直在。
|
||||
*/
|
||||
type Shape = { nodes?: unknown[]; edges?: unknown[] }
|
||||
function signature(data: Shape) {
|
||||
const nodes = (data.nodes ?? []).map((raw) => {
|
||||
const node = raw as {
|
||||
id?: string
|
||||
type?: string
|
||||
data?: unknown
|
||||
position?: { x?: number; y?: number }
|
||||
}
|
||||
return [
|
||||
node.id,
|
||||
node.type,
|
||||
// 节点上的字（customLabel）和原始类型都在 data 里，整个带上
|
||||
JSON.stringify(node.data ?? {}),
|
||||
Math.round(node.position?.x ?? 0),
|
||||
Math.round(node.position?.y ?? 0),
|
||||
].join("|")
|
||||
})
|
||||
const edges = (data.edges ?? []).map((raw) => {
|
||||
const edge = raw as {
|
||||
source?: string
|
||||
target?: string
|
||||
sourceHandle?: string | null
|
||||
targetHandle?: string | null
|
||||
label?: unknown
|
||||
}
|
||||
return [
|
||||
edge.source,
|
||||
edge.target,
|
||||
edge.sourceHandle ?? "",
|
||||
edge.targetHandle ?? "",
|
||||
edge.label ?? "",
|
||||
].join("|")
|
||||
})
|
||||
return JSON.stringify([nodes.sort(), edges.sort()])
|
||||
}
|
||||
|
||||
const versionSignature = computed(() => {
|
||||
if (!versionJson.value) return null
|
||||
try {
|
||||
return signature(JSON.parse(versionJson.value) as Shape)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 只有画布和这一版不一样时才给「载回画布」：刚交完、还没动过的时候，这个按钮点了什么
|
||||
* 都不会变，只会让人以为它坏了。读 getFlowchartData() 会顺带跟踪画布的节点和边。
|
||||
*/
|
||||
const canvasDiffers = computed(() => {
|
||||
if (!editor.value || !versionSignature.value) return false
|
||||
return signature(editor.value.getFlowchartData()) !== versionSignature.value
|
||||
})
|
||||
|
||||
function loadToCanvas() {
|
||||
if (!editor.value || !versionJson.value) return
|
||||
try {
|
||||
const json = JSON.parse(versionJson.value)
|
||||
editor.value.setFlowchartData({ nodes: json.nodes || [], edges: json.edges || [] })
|
||||
message.success("已载回画布，按 Ctrl+Z 可以撤回")
|
||||
} catch {
|
||||
message.error("这一版的图数据坏了，载不回画布")
|
||||
}
|
||||
}
|
||||
|
||||
/** A / S 之后：照着图写代码。切回学生习惯的那门语言 */
|
||||
const canCode = computed(() => problemStore.codeLanguages.length > 0)
|
||||
function goCode() {
|
||||
problemStore.switchLanguage(problemStore.supportedLanguage(codeStore.preferredLanguage()))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flowchart-result">
|
||||
<!-- 正在评：评的是最新这一次，所以只在看最新时显示 -->
|
||||
<n-alert
|
||||
v-if="phase === 'evaluating' && viewingLatest"
|
||||
type="info"
|
||||
:show-icon="false"
|
||||
class="block"
|
||||
>
|
||||
<n-flex align="center" :size="10" :wrap="false">
|
||||
<n-spin :size="18" />
|
||||
<div>
|
||||
<b>AI 正在看你的图</b>（一般 5 秒左右）
|
||||
<div class="note">评的时候画布还能改，改了不影响这一次</div>
|
||||
</div>
|
||||
</n-flex>
|
||||
</n-alert>
|
||||
|
||||
<n-alert
|
||||
v-else-if="phase === 'failed' && viewingLatest"
|
||||
type="warning"
|
||||
:show-icon="false"
|
||||
class="block"
|
||||
>
|
||||
AI 这次没评出来，再点一次「交给 AI 点评」试试
|
||||
</n-alert>
|
||||
|
||||
<n-empty
|
||||
v-if="!scores.length && phase !== 'evaluating'"
|
||||
class="empty"
|
||||
description="还没交过流程图。画好之后点「交给 AI 点评」，评分和建议会出现在这里"
|
||||
/>
|
||||
|
||||
<template v-if="scores.length">
|
||||
<!-- 历次分数：一眼看出是不是越改越好 -->
|
||||
<div class="history" role="list" aria-label="历次分数">
|
||||
<button
|
||||
v-for="(row, index) in scores"
|
||||
:key="row.id"
|
||||
type="button"
|
||||
role="listitem"
|
||||
class="attempt"
|
||||
:class="[gradeType(row.grade), { active: current?.id === row.id }]"
|
||||
:title="parseTime(row.createTime, 'MM-DD HH:mm')"
|
||||
@click="flowchartStore.select(index === scores.length - 1 ? null : row.id)"
|
||||
>
|
||||
<span class="attempt-no">第 {{ index + 1 }} 次</span>
|
||||
<b>{{ row.score }}</b>
|
||||
<span>{{ row.grade }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="hiddenCount" class="note">
|
||||
另外 {{ hiddenCount }} 次是加入题单之前画的，先藏起来了：在题单里画到 A 或 S 就解锁
|
||||
</p>
|
||||
|
||||
<section v-if="current" class="block">
|
||||
<n-flex align="baseline" :size="10">
|
||||
<n-text :type="gradeType(current.grade)" class="score">
|
||||
{{ current.score }} 分 · {{ current.grade }} 级
|
||||
</n-text>
|
||||
<n-text depth="3" class="note">
|
||||
第 {{ currentIndex + 1 }} 次 · {{ parseTime(current.createTime, "MM-DD HH:mm") }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
|
||||
<n-flex v-if="isFlowchartPass(current.grade)" align="center" class="pass" :size="12">
|
||||
<span>画到 {{ current.grade }} 级了，这道题的流程图算做完 ✓</span>
|
||||
<n-button v-if="canCode" size="small" type="primary" @click="goCode">
|
||||
照着它写代码 →
|
||||
</n-button>
|
||||
</n-flex>
|
||||
|
||||
<n-flex v-if="detailLoading && !detail" justify="center" class="pad">
|
||||
<n-spin size="small" />
|
||||
</n-flex>
|
||||
|
||||
<template v-if="detail">
|
||||
<p v-if="detail.aiFeedback" class="feedback">{{ detail.aiFeedback }}</p>
|
||||
|
||||
<div v-if="suggestions.length" class="suggestions">
|
||||
<h4>可以这样改</h4>
|
||||
<ol>
|
||||
<li v-for="(line, index) in suggestions" :key="index">{{ line }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div v-if="criteria.length" class="criteria">
|
||||
<h4>四项得分</h4>
|
||||
<div v-for="[name, item] in criteria" :key="name" class="criterion">
|
||||
<n-flex justify="space-between" align="center">
|
||||
<b>{{ name }}</b>
|
||||
<n-tag :type="percentType(item.score / item.max)" size="small" round>
|
||||
{{ item.score || 0 }} / {{ item.max }}
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
<n-text v-if="item.comment" depth="3" class="comment">{{ item.comment }}</n-text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<n-button v-if="canvasDiffers" secondary class="load" @click="loadToCanvas">
|
||||
把这一版载回画布
|
||||
</n-button>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.flowchart-result {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: 13px;
|
||||
opacity: 0.75;
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
|
||||
.pad {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.history {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
overflow-x: auto;
|
||||
padding: 2px 2px 8px;
|
||||
}
|
||||
|
||||
.attempt {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1px;
|
||||
min-width: 58px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(128, 128, 128, 0.25);
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.attempt b {
|
||||
font-size: 17px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.attempt-no {
|
||||
font-size: 11px;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.attempt.success b {
|
||||
color: #18a058;
|
||||
}
|
||||
|
||||
.attempt.warning b {
|
||||
color: #f0a020;
|
||||
}
|
||||
|
||||
.attempt.error b {
|
||||
color: #d03050;
|
||||
}
|
||||
|
||||
.attempt.active {
|
||||
border-color: #2080f0;
|
||||
box-shadow: 0 0 0 1px #2080f0;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pass {
|
||||
margin: 10px 0 4px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
background-color: rgba(24, 160, 88, 0.1);
|
||||
}
|
||||
|
||||
.feedback {
|
||||
margin: 12px 0;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 14px 0 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.suggestions ol {
|
||||
margin: 0;
|
||||
padding-left: 1.4em;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.criterion {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.criterion + .criterion {
|
||||
border-top: 1px dashed rgba(128, 128, 128, 0.2);
|
||||
}
|
||||
|
||||
.comment {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.load {
|
||||
margin-top: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -22,7 +22,7 @@ const MyFlowchart = defineAsyncComponent(() => import("./MyFlowchart.vue"))
|
||||
|
||||
const isDark = useDark()
|
||||
const problemStore = useProblemStore()
|
||||
const { problem, languages } = storeToRefs(problemStore)
|
||||
const { problem } = storeToRefs(problemStore)
|
||||
const ctx = useProblemPageContext()
|
||||
|
||||
// SQL 题：隐藏输入/输出/例子，改为渲染数据表与期望结果
|
||||
@@ -103,11 +103,17 @@ const flowchartStore = useFlowchartStore()
|
||||
const userStore = useUserStore()
|
||||
const myFlowchartZoom = ref(false)
|
||||
|
||||
// 这道题能画流程图，就去查画到 A/S 没有 —— 原来要先切到「流程图」这门「语言」才查
|
||||
// 这道题能画流程图，就去查画到 A/S 没有 —— 原来要先切到「流程图」这门「语言」才查。
|
||||
// 不看 canDraw：手机上画不了，但以前在电脑上画好的那张照样该摆出来
|
||||
watch(
|
||||
() => [problem.value?.id, languages.value.includes("Flowchart"), userStore.isAuthed] as const,
|
||||
([id, canDraw, authed]) => {
|
||||
if (id && canDraw && authed) flowchartStore.ensureLoaded()
|
||||
() =>
|
||||
[
|
||||
problem.value?.id,
|
||||
!!problem.value?.allowFlowchart && ctx.value.entry !== "contest",
|
||||
userStore.isAuthed,
|
||||
] as const,
|
||||
([id, drawable, authed]) => {
|
||||
if (id && drawable && authed) flowchartStore.ensureLoaded()
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
@@ -11,6 +11,7 @@ import type { LANGUAGE } from "utils/types"
|
||||
import { beginEditTrace, editTraceExtensions } from "oj/problem/utils/editTrace"
|
||||
import { errorMarkExtensions } from "oj/problem/utils/errorMark"
|
||||
import EditorToolbar from "./EditorToolbar.vue"
|
||||
import { useFlowchartStore } from "oj/store/flowchart"
|
||||
|
||||
const FlowchartEditor = defineAsyncComponent(
|
||||
() => import("shared/components/FlowchartEditor/index.vue"),
|
||||
@@ -84,8 +85,16 @@ const { isDesktop } = useBreakpoints()
|
||||
const editorExtensions = [...editTraceExtensions, ...errorMarkExtensions]
|
||||
|
||||
const contestID = route.params.contestID || null
|
||||
const storageKey = computed(
|
||||
() => `problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
|
||||
const problemSetId = route.params.problemSetId || null
|
||||
/**
|
||||
* 本地草稿的键。题单入口单独一份：原来题库和题单共用 `problem_题号_contest_null_语言`，
|
||||
* 加入题单之前在题库里写对的代码，一进题单就摆在编辑器里（设计文档第 11 节 4）。
|
||||
* 键的最后一段必须是语言，changeLanguage 靠它判断草稿是不是这门语言的。
|
||||
*/
|
||||
const storageKey = computed(() =>
|
||||
problemSetId
|
||||
? `problem_${problem.value!._id}_problemset_${problemSetId}_lang_${codeStore.code.language}`
|
||||
: `problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
|
||||
)
|
||||
|
||||
const editorHeight = computed(() =>
|
||||
@@ -130,7 +139,28 @@ const changeLanguage = (v: LANGUAGE) => {
|
||||
)
|
||||
}
|
||||
|
||||
// 提供FlowchartEditor的ref给子组件
|
||||
/**
|
||||
* 换语言的请求：工具栏的「写代码 / 画流程图」、结果页签里的「照着它写代码」。
|
||||
* 和语言下拉走同一条路（存语言偏好 → 读那门语言的草稿）。
|
||||
*/
|
||||
watch(
|
||||
() => problemStore.languageRequest,
|
||||
(language) => {
|
||||
if (!language) return
|
||||
problemStore.languageRequest = null
|
||||
if (language === codeStore.code.language) return
|
||||
codeStore.setLanguage(language)
|
||||
changeLanguage(language)
|
||||
},
|
||||
)
|
||||
|
||||
// 流程图编辑器交给 store：结果页签（在左栏，不在编辑器底下）要拿当前画布比一比、
|
||||
// 把旧版本载回去。子组件 SubmitFlowchart 还是从 inject 拿
|
||||
const flowchartStore = useFlowchartStore()
|
||||
watch(flowchartEditorRef, (editor) => flowchartStore.attachEditor(editor ?? null), {
|
||||
immediate: true,
|
||||
})
|
||||
onBeforeUnmount(() => flowchartStore.attachEditor(null))
|
||||
provide("flowchartEditorRef", flowchartEditorRef)
|
||||
</script>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { storeToRefs } from "pinia"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import { useCodeStore } from "oj/store/code"
|
||||
|
||||
/**
|
||||
* 左栏「结果」页签：三段 —— 提交结果 / 运行例子 / 自己输入。
|
||||
@@ -17,10 +18,15 @@ const SubmissionResult = defineAsyncComponent(() => import("./SubmissionResult.v
|
||||
const PythonErrorExplain = defineAsyncComponent(() => import("./PythonErrorExplain.vue"))
|
||||
const SampleRunResult = defineAsyncComponent(() => import("./SampleRunResult.vue"))
|
||||
const CustomRun = defineAsyncComponent(() => import("./CustomRun.vue"))
|
||||
const FlowchartResult = defineAsyncComponent(() => import("./FlowchartResult.vue"))
|
||||
|
||||
const submissionStore = useSubmissionStore()
|
||||
const { submission, syntaxErrorInfo, resultSegment } = storeToRefs(submissionStore)
|
||||
const { problem } = storeToRefs(useProblemStore())
|
||||
const codeStore = useCodeStore()
|
||||
|
||||
/** 正在画流程图：结果就是 AI 的点评，没有例子可跑 */
|
||||
const drawing = computed(() => codeStore.code.language === "Flowchart")
|
||||
|
||||
// 试跑走 Judge0，它跑不了 SQL；流程图也没得跑。这两种只留「提交结果」
|
||||
const canTrial = computed(() => {
|
||||
@@ -30,7 +36,8 @@ const canTrial = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="result-pane">
|
||||
<FlowchartResult v-if="drawing" />
|
||||
<div v-show="!drawing" class="result-pane">
|
||||
<n-radio-group v-if="canTrial" v-model:value="resultSegment" size="small" class="segments">
|
||||
<n-radio-button value="submit">提交结果</n-radio-button>
|
||||
<n-radio-button value="samples">运行例子</n-radio-button>
|
||||
|
||||
@@ -3,6 +3,8 @@ import { Icon } from "@iconify/vue"
|
||||
import { useThemeVars } from "naive-ui"
|
||||
import { storeToRefs } from "pinia"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import { useCodeStore } from "oj/store/code"
|
||||
import { isFlowchartPass, useFlowchartStore } from "oj/store/flowchart"
|
||||
import { SubmissionStatus } from "utils/constants"
|
||||
|
||||
/**
|
||||
@@ -14,7 +16,23 @@ const theme = useThemeVars()
|
||||
const { submission, syntaxErrorInfo, judging, pending, submitting } =
|
||||
storeToRefs(useSubmissionStore())
|
||||
|
||||
const codeStore = useCodeStore()
|
||||
const flowchart = storeToRefs(useFlowchartStore())
|
||||
|
||||
/** 画流程图时：评中转圈，A/S 打勾，B/C 是「还没过关」的 !，评失败是 ✕ */
|
||||
const flowchartStatus = computed(() => {
|
||||
const phase = flowchart.phase.value
|
||||
if (phase === "evaluating")
|
||||
return { icon: "ph:circle-notch-bold", color: theme.value.infoColor, spin: true }
|
||||
if (phase === "failed") return { icon: "ph:x-bold", color: theme.value.errorColor }
|
||||
if (phase !== "done") return null
|
||||
return isFlowchartPass(flowchart.latestRating.value.grade)
|
||||
? { icon: "ph:check-bold", color: theme.value.successColor }
|
||||
: { icon: "ph:warning-bold", color: theme.value.warningColor }
|
||||
})
|
||||
|
||||
const status = computed(() => {
|
||||
if (codeStore.code.language === "Flowchart") return flowchartStatus.value
|
||||
if (syntaxErrorInfo.value) return { icon: "ph:warning-bold", color: theme.value.warningColor }
|
||||
if (!submission.value) return null
|
||||
if (judging.value || pending.value || submitting.value)
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useProblemStore } from "oj/store/problem"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import { useFireworks } from "oj/problem/composables/useFireworks"
|
||||
import { useLessonStore } from "oj/store/lesson"
|
||||
import { isFlowchartPass, useFlowchartStore } from "oj/store/flowchart"
|
||||
import { SubmissionStatus } from "utils/constants"
|
||||
import { useProblemPageContext } from "../composables/problemPageContext"
|
||||
|
||||
@@ -225,6 +226,19 @@ watch(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// ==================== 流程图画到 A / S ====================
|
||||
// 题单里流程图作业拿到 A 或 S 就算这道题做完（后端评分那一路已经记了账），
|
||||
// 和代码通过一样 1.5 秒后回题单（设计文档第 3 节决定 4、5）。只认这一页上刚评完的那一次
|
||||
const flowchartStore = useFlowchartStore()
|
||||
watch(
|
||||
() => flowchartStore.evaluatedSeq,
|
||||
() => {
|
||||
if (!isFlowchartPass(flowchartStore.latestRating.grade)) return
|
||||
celebrate()
|
||||
if (ctx.value.backToProblemSet) goToProblemSetDelayed()
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,346 +1,54 @@
|
||||
<script lang="ts" setup>
|
||||
import { storeToRefs } from "pinia"
|
||||
|
||||
// 工具函数
|
||||
import { decompressFromBase64, compressToBase64 } from "utils/functions"
|
||||
import { sortFlowchartCriteria } from "utils/constants"
|
||||
|
||||
// 组合式函数
|
||||
import { compressToBase64 } from "utils/functions"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
import { useMermaid } from "shared/composables/useMermaid"
|
||||
import { useMermaidConverter } from "../composables/useMermaidConverter"
|
||||
|
||||
// API 和状态管理
|
||||
import { getFlowchartSubmissionDetail } from "oj/api"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useFlowchartStore, type FlowchartRating } from "oj/store/flowchart"
|
||||
import { useFlowchartStore, type FlowchartEditorInstance } from "oj/store/flowchart"
|
||||
|
||||
/**
|
||||
* 「提交流程图」按钮、分数按钮和评分详情弹框。
|
||||
* 「交给 AI 点评」按钮。
|
||||
*
|
||||
* 提交和评分（WebSocket + 轮询 + 超时、评完的提示、A/S 亮到「我的流程图」）都在
|
||||
* flowchart store：这个组件只在语言选成 Flowchart 时才挂载，切去写代码它就卸载，
|
||||
* 正在评的那次不能跟着没。这里只剩从编辑器里取图、以及翻看历次评分的弹框。
|
||||
* 提交和评分（WebSocket + 轮询 + 超时）在 flowchart store；评分结果、历次分数、载回旧版
|
||||
* 都在左栏「结果」页签（FlowchartResult）。原来这里还有一个分数按钮和 1000px 的评分弹框，
|
||||
* 弹框盖住画布，学生没法一边看改进建议一边改图。
|
||||
*/
|
||||
|
||||
// ==================== 类型定义 ====================
|
||||
interface Evaluation extends FlowchartRating {
|
||||
feedback: string
|
||||
suggestions: string
|
||||
criteria_details: {
|
||||
[key: string]: { score: number; max: number; comment: string }
|
||||
}
|
||||
}
|
||||
|
||||
interface FlowchartEditorInstance {
|
||||
getFlowchartData: () => { nodes: unknown[]; edges: unknown[] }
|
||||
setFlowchartData: (data: { nodes: unknown[]; edges: unknown[] }) => void
|
||||
}
|
||||
|
||||
// 通过inject获取FlowchartEditor组件的引用
|
||||
const flowchartEditorRef = inject<Ref<FlowchartEditorInstance | null>>("flowchartEditorRef")
|
||||
const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
|
||||
|
||||
// 基础组合式函数
|
||||
const message = useMessage()
|
||||
const problemStore = useProblemStore()
|
||||
const { problem } = storeToRefs(problemStore)
|
||||
const { problem } = storeToRefs(useProblemStore())
|
||||
const flowchartStore = useFlowchartStore()
|
||||
const { loading, latestRating, submissionCount } = storeToRefs(flowchartStore)
|
||||
const { loading } = storeToRefs(flowchartStore)
|
||||
const { isDesktop } = useBreakpoints()
|
||||
const { convertToMermaid } = useMermaidConverter()
|
||||
const { renderError, renderFlowchart } = useMermaid()
|
||||
|
||||
// 评分详情弹框
|
||||
const rendering = ref(false)
|
||||
const modalRating = ref<FlowchartRating>({ score: 0, grade: "" })
|
||||
const myFlowchartZippedStr = ref("")
|
||||
const myMermaidCode = ref("")
|
||||
const showDetailModal = ref(false)
|
||||
const evaluation = ref<Evaluation>({
|
||||
score: 0,
|
||||
grade: "",
|
||||
feedback: "",
|
||||
suggestions: "",
|
||||
criteria_details: {},
|
||||
})
|
||||
const page = ref(1)
|
||||
const suggestionLines = computed(() => splitSuggestionLines(evaluation.value.suggestions))
|
||||
|
||||
// jsonb 不保留键序，直接遍历会把 40 分的「逻辑正确性」排到最后
|
||||
const sortedCriteria = computed(() => sortFlowchartCriteria(evaluation.value.criteria_details))
|
||||
|
||||
function splitSuggestionLines(suggestions?: string | null) {
|
||||
return suggestions
|
||||
? suggestions
|
||||
.split("\n")
|
||||
.map((suggestion) => suggestion.trim())
|
||||
.filter(Boolean)
|
||||
: []
|
||||
}
|
||||
|
||||
// ==================== 提交 ====================
|
||||
function submit() {
|
||||
if (!flowchartEditorRef?.value) return
|
||||
|
||||
// 获取流程图的JSON数据
|
||||
const flowchartData = flowchartEditorRef.value.getFlowchartData()
|
||||
|
||||
const editor = flowchartEditorRef?.value
|
||||
if (!editor) return
|
||||
const flowchartData = editor.getFlowchartData()
|
||||
if (!flowchartData?.nodes?.length || !flowchartData?.edges?.length) {
|
||||
message.error("流程图节点或边不能为空")
|
||||
message.warning("画布上还没有图：从左边拖几个框进来，再用线连起来")
|
||||
return
|
||||
}
|
||||
|
||||
flowchartStore.submit(
|
||||
convertToMermaid(flowchartData),
|
||||
compressToBase64(JSON.stringify(flowchartData)),
|
||||
)
|
||||
}
|
||||
|
||||
// ==================== 评分详情 ====================
|
||||
async function getSubmission(submissionPage = 0) {
|
||||
const problemId = problem.value?.id
|
||||
if (!problemId) return
|
||||
const data = await getFlowchartSubmissionDetail(problemId, submissionPage)
|
||||
if (problem.value?.id !== problemId) return
|
||||
submissionCount.value = data.count
|
||||
const submission = data.submission
|
||||
// 翻到没有提交的页时后端返回 null（契约里 submission 是 nullable）——
|
||||
// 原来的 any 让这里看起来非空，真翻到那一页会直接抛
|
||||
if (!submission) {
|
||||
myFlowchartZippedStr.value = ""
|
||||
myMermaidCode.value = ""
|
||||
modalRating.value = { score: 0, grade: "" }
|
||||
evaluation.value = {
|
||||
score: 0,
|
||||
grade: "",
|
||||
feedback: "",
|
||||
suggestions: "",
|
||||
criteria_details: {},
|
||||
}
|
||||
return
|
||||
}
|
||||
myFlowchartZippedStr.value = String(submission.flowchartData.data ?? "")
|
||||
myMermaidCode.value = submission.mermaidCode || ""
|
||||
modalRating.value = {
|
||||
score: submission.aiScore ?? 0,
|
||||
grade: submission.aiGrade ?? "",
|
||||
}
|
||||
evaluation.value = {
|
||||
score: submission.aiScore ?? 0,
|
||||
grade: submission.aiGrade ?? "",
|
||||
feedback: submission.aiFeedback ?? "",
|
||||
suggestions: submission.aiSuggestions ?? "",
|
||||
criteria_details: submission.aiCriteriaDetails as Evaluation["criteria_details"],
|
||||
}
|
||||
}
|
||||
|
||||
// 请求失败时 rendering 必须复位：拦截器对普通业务错误是静默 reject 的，
|
||||
// 少了这个 finally，弹框就会永远停在转圈状态，也没有任何提示
|
||||
async function updatePage(val: number) {
|
||||
page.value = val
|
||||
rendering.value = true
|
||||
try {
|
||||
await getSubmission(val)
|
||||
// 等待 DOM 更新
|
||||
await nextTick()
|
||||
await renderFlowchart(mermaidContainer.value, myMermaidCode.value)
|
||||
} catch (error) {
|
||||
message.error("加载这次提交失败，请稍后重试")
|
||||
console.error("加载流程图提交失败:", error)
|
||||
} finally {
|
||||
rendering.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function openDetailModal() {
|
||||
showDetailModal.value = true
|
||||
rendering.value = true
|
||||
try {
|
||||
await getSubmission()
|
||||
page.value = submissionCount.value
|
||||
// 等待 DOM 更新，确保弹框已经渲染
|
||||
await nextTick()
|
||||
await renderFlowchart(mermaidContainer.value, myMermaidCode.value)
|
||||
} catch (error) {
|
||||
message.error("加载评分详情失败，请稍后重试")
|
||||
console.error("加载流程图评分详情失败:", error)
|
||||
} finally {
|
||||
rendering.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showDetailModal.value = false
|
||||
}
|
||||
|
||||
function loadToEditor() {
|
||||
if (myFlowchartZippedStr.value) {
|
||||
// 老提交的压缩数据可能是坏的（格式换过、存了一半），
|
||||
// 不兜住的话 decompressFromBase64/JSON.parse 直接抛，按钮点了毫无反应
|
||||
try {
|
||||
const json = JSON.parse(decompressFromBase64(myFlowchartZippedStr.value))
|
||||
flowchartEditorRef?.value?.setFlowchartData({
|
||||
nodes: json.nodes || [],
|
||||
edges: json.edges || [],
|
||||
})
|
||||
} catch (error) {
|
||||
message.error("这份流程图数据已损坏，无法加载到编辑器")
|
||||
console.error("解析流程图数据失败:", error)
|
||||
return
|
||||
}
|
||||
}
|
||||
closeModal()
|
||||
}
|
||||
|
||||
// ==================== 工具函数 ====================
|
||||
const getGradeType = (grade: string) => {
|
||||
if (grade === "S") return "primary"
|
||||
if (grade === "A") return "info"
|
||||
if (grade === "B") return "warning"
|
||||
return "error"
|
||||
}
|
||||
|
||||
const getPercentType = (percent: number) => {
|
||||
if (percent >= 0.8) return "primary"
|
||||
else if (percent >= 0.6) return "info"
|
||||
else if (percent >= 0.4) return "warning"
|
||||
return "error"
|
||||
}
|
||||
|
||||
// ==================== 生命周期 ====================
|
||||
onMounted(flowchartStore.ensureLoaded)
|
||||
|
||||
// 换题：分数和还在评的那次由 store 自己收（见 flowchart store 的 reset），
|
||||
// 这里只关掉弹框，再拉新题的最近一次分数
|
||||
watch(
|
||||
() => problem.value?.id,
|
||||
(next, previous) => {
|
||||
if (!previous || next === previous) return
|
||||
showDetailModal.value = false
|
||||
page.value = 1
|
||||
flowchartStore.ensureLoaded()
|
||||
},
|
||||
)
|
||||
// 进题、换题都读一次历次分数（store 里同一道题只读一次）
|
||||
watch(() => problem.value?.id, flowchartStore.ensureLoaded, { immediate: true })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 主要操作区域 -->
|
||||
<n-flex align="center">
|
||||
<!-- 提交按钮 -->
|
||||
<n-button
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? "AI 点评中..." : "提交流程图" }}
|
||||
</n-button>
|
||||
|
||||
<!-- 评分结果按钮 -->
|
||||
<n-button
|
||||
secondary
|
||||
v-if="latestRating.grade"
|
||||
@click="openDetailModal"
|
||||
:type="getGradeType(latestRating.grade)"
|
||||
>
|
||||
{{ latestRating.score }}分 {{ latestRating.grade }}级
|
||||
</n-button>
|
||||
|
||||
<!-- 流程图评分详情模态框 -->
|
||||
<n-modal v-model:show="showDetailModal" preset="card" style="width: 1000px">
|
||||
<template #header>
|
||||
<n-flex align="center">
|
||||
<n-text>流程图评分详情</n-text>
|
||||
<n-text :type="getGradeType(modalRating.grade)">
|
||||
{{ modalRating.score }}分 {{ modalRating.grade }}级
|
||||
</n-text>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-grid :cols="5" :x-gap="16">
|
||||
<!-- 左侧：流程图预览区域 -->
|
||||
<n-gi :span="3">
|
||||
<div class="flowchart">
|
||||
<n-spin :show="rendering">
|
||||
<n-alert v-if="renderError" type="error" title="流程图渲染失败">
|
||||
{{ renderError }}
|
||||
</n-alert>
|
||||
<div class="flowchart" v-show="!renderError" ref="mermaidContainer"></div>
|
||||
</n-spin>
|
||||
</div>
|
||||
<!-- 加载到编辑器按钮 -->
|
||||
<n-flex style="margin-top: 16px" justify="center">
|
||||
<n-button @click="loadToEditor" type="primary"> 加载到流程图编辑器 </n-button>
|
||||
</n-flex>
|
||||
</n-gi>
|
||||
|
||||
<!-- 右侧：评分详情区域 -->
|
||||
<n-gi :span="2" style="max-height: 550px; overflow: auto">
|
||||
<!-- AI反馈 -->
|
||||
<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="suggestionLines.length"
|
||||
size="small"
|
||||
title="改进建议"
|
||||
style="margin-bottom: 16px"
|
||||
>
|
||||
<n-flex vertical :size="6">
|
||||
<n-text
|
||||
v-for="(suggestion, index) in suggestionLines"
|
||||
:key="`${index}-${suggestion}`"
|
||||
>
|
||||
{{ suggestion }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
|
||||
<!-- 详细评分 -->
|
||||
<n-card v-if="sortedCriteria.length" size="small" title="详细评分">
|
||||
<div v-for="[key, detail] in sortedCriteria" :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="getPercentType(detail.score / detail.max)" 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-flex justify="center" style="margin-top: 24px" v-if="submissionCount > 1">
|
||||
<n-pagination v-model:page="page" :page-count="submissionCount" @update-page="updatePage" />
|
||||
</n-flex>
|
||||
</n-modal>
|
||||
</n-flex>
|
||||
<n-button
|
||||
:size="isDesktop ? 'medium' : 'small'"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
:disabled="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? "AI 正在看…" : "交给 AI 点评" }}
|
||||
</n-button>
|
||||
</template>
|
||||
<style scoped>
|
||||
/* ==================== 流程图样式 ==================== */
|
||||
.flowchart {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 确保 SVG 图表占满容器 */
|
||||
:deep(.flowchart > svg) {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -8,13 +8,19 @@ import type { Code, LANGUAGE } from "utils/types"
|
||||
* 代码编辑器状态管理 Store
|
||||
* 管理全局的代码、输入、输出状态
|
||||
*/
|
||||
function savedCodeLanguage() {
|
||||
const saved = normalizeLanguage(storage.get(STORAGE_KEY.LANGUAGE))
|
||||
return saved && saved !== "Flowchart" ? saved : null
|
||||
}
|
||||
|
||||
export const useCodeStore = defineStore("code", () => {
|
||||
// ==================== 状态 ====================
|
||||
const code = reactive<Code>({
|
||||
value: "",
|
||||
// 过一道 normalizeLanguage：上线那一刻学生浏览器的 localStorage 里存的还是
|
||||
// 旧值 Python3，直接拿来用会被后端的契约挡掉（而且报错看不出是这个原因）
|
||||
language: normalizeLanguage(storage.get(STORAGE_KEY.LANGUAGE)) ?? "Python",
|
||||
// 以前的版本会把 Flowchart 也记成语言偏好，那种老值在这里一并不认
|
||||
language: savedCodeLanguage() ?? "Python",
|
||||
})
|
||||
|
||||
const input = ref("")
|
||||
@@ -36,7 +42,6 @@ export const useCodeStore = defineStore("code", () => {
|
||||
*/
|
||||
function setLanguage(language: LANGUAGE) {
|
||||
code.language = language
|
||||
storage.set(STORAGE_KEY.LANGUAGE, language)
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -69,14 +74,23 @@ export const useCodeStore = defineStore("code", () => {
|
||||
output.value = ""
|
||||
}
|
||||
|
||||
// 监听语言变化，保存到本地存储
|
||||
/**
|
||||
* 语言变了就记下来，下一道题默认用它。**不记 Flowchart**：那是「画流程图」这种作业，
|
||||
* 不是编程语言偏好 —— 记下来的话，画完一道流程图题，下一道能画的题一打开就是画布，
|
||||
* 而学生这节课要写的是代码。切回「写代码」时用的也是这份偏好。
|
||||
*/
|
||||
watch(
|
||||
() => code.language,
|
||||
(newLanguage) => {
|
||||
storage.set(STORAGE_KEY.LANGUAGE, newLanguage)
|
||||
if (newLanguage !== "Flowchart") storage.set(STORAGE_KEY.LANGUAGE, newLanguage)
|
||||
},
|
||||
)
|
||||
|
||||
/** 学生习惯用的编程语言（从来不会是 Flowchart） */
|
||||
function preferredLanguage(): LANGUAGE {
|
||||
return savedCodeLanguage() ?? "Python"
|
||||
}
|
||||
|
||||
return {
|
||||
// 状态
|
||||
code,
|
||||
@@ -89,6 +103,7 @@ export const useCodeStore = defineStore("code", () => {
|
||||
// 操作
|
||||
setCode,
|
||||
setLanguage,
|
||||
preferredLanguage,
|
||||
setInput,
|
||||
setOutput,
|
||||
reset,
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import { createDiscreteApi } from "naive-ui"
|
||||
import { defineStore } from "pinia"
|
||||
import { errorCode } from "utils/api"
|
||||
import {
|
||||
getCurrentProblemFlowchartSubmission,
|
||||
getFlowchartSubmission,
|
||||
getFlowchartSubmissionDetail,
|
||||
submitFlowchart,
|
||||
} from "oj/api"
|
||||
import type { FlowchartScores, FlowchartSubmission } from "@oj2/contract"
|
||||
import type { Edge, Node } from "@vue-flow/core"
|
||||
import { getFlowchartScores, getFlowchartSubmission, submitFlowchart } from "oj/api"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import { useFlowchartWebSocket, type FlowchartEvaluationUpdate } from "shared/composables/websocket"
|
||||
import { useMyFlowchartStore } from "shared/store/myFlowchart"
|
||||
import { useUserStore } from "shared/store/user"
|
||||
@@ -22,18 +20,35 @@ export interface FlowchartRating {
|
||||
|
||||
type Outcome = { ok: true; score: number; grade: string } | { ok: false; error?: string }
|
||||
|
||||
/** 编辑器对外的两个方法（FlowchartEditor 的 defineExpose） */
|
||||
export interface FlowchartEditorInstance {
|
||||
getFlowchartData: () => { nodes: unknown[]; edges: unknown[] }
|
||||
setFlowchartData: (data: { nodes: Node[]; edges: Edge[] }) => void
|
||||
}
|
||||
|
||||
/** 画到这两档算这道题做完（后端 flowchart/grade.ts 的 FLOWCHART_PASS_GRADES） */
|
||||
export function isFlowchartPass(grade: string | null | undefined) {
|
||||
return grade === "S" || grade === "A"
|
||||
}
|
||||
|
||||
/**
|
||||
* 这一页上最近一次交的图走到哪了。idle = 这一页还没交过（历史分数照样有）
|
||||
*/
|
||||
export type FlowchartPhase = "idle" | "evaluating" | "done" | "failed"
|
||||
|
||||
/** AI 评分比判题慢得多，轮询放缓一点 */
|
||||
const POLL_INTERVAL = 3000
|
||||
/** 到点还没结果就收手，别无限轮询下去 */
|
||||
const POLL_TIMEOUT = 3 * 60 * 1000
|
||||
|
||||
/**
|
||||
* 流程图提交与 AI 评分：正在评的那一次、最近一次的分数、提交次数。
|
||||
* 流程图提交与 AI 评分：正在评的那一次、历次分数、结果页签正在看哪一次。
|
||||
*
|
||||
* 原来都在提交按钮那个组件（SubmitFlowchart）里，而它只在语言选成 Flowchart 时才挂载 ——
|
||||
* 交完切到写代码，组件一卸载就断开 WebSocket，正在评的那次结果就丢了（评分中位 4.8 秒、
|
||||
* 最长二十几秒，足够学生切走）。挪到 store 之后，切走了照样评完、照样提示、照样把
|
||||
* A/S 的图亮到「我的流程图」。评分详情弹框只是展示，还留在组件里。
|
||||
* A/S 的图亮到「你画的流程图」。评分详情从 1000px 的弹框挪进了左栏「结果」页签
|
||||
* （FlowchartResult），那边只管显示。
|
||||
*/
|
||||
export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
const problemStore = useProblemStore()
|
||||
@@ -41,7 +56,27 @@ export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
|
||||
const loading = ref(false)
|
||||
const latestRating = ref<FlowchartRating>({ score: 0, grade: "" })
|
||||
const submissionCount = ref(0)
|
||||
const phase = ref<FlowchartPhase>("idle")
|
||||
/**
|
||||
* 这一页上**刚刚**评完一次就加一（不含进页面时读到的历史）。课堂条标做完、题单里
|
||||
* 1.5 秒后跳回题单，都只认这一下 —— 进页面读到以前的 A 不该再跳一次
|
||||
*/
|
||||
const evaluatedSeq = ref(0)
|
||||
/** 这道题评完的每一次，早的在前；hidden = 加入题单之前、被藏起来的次数 */
|
||||
const scores = ref<FlowchartScores["scores"]>([])
|
||||
const hiddenCount = ref(0)
|
||||
const submissionCount = computed(() => scores.value.length)
|
||||
/** 结果页签正在看哪一次；null = 最新那次 */
|
||||
const selectedId = ref<string | null>(null)
|
||||
/** 看过的几次的完整评语，按 id 缓存（评完就不会再变） */
|
||||
const details = ref<Record<string, FlowchartSubmission>>({})
|
||||
const detailLoading = ref(false)
|
||||
|
||||
/** 画布本身。结果页签要拿当前画布和某一版比一比、把那一版载回去 */
|
||||
const editor = shallowRef<FlowchartEditorInstance | null>(null)
|
||||
function attachEditor(instance: FlowchartEditorInstance | null) {
|
||||
editor.value = instance
|
||||
}
|
||||
/** 最近一次交上去的那张图，评到 A/S 时亮到「我的流程图」 */
|
||||
const lastSubmittedMermaidCode = ref("")
|
||||
/** 最近一次分数是哪道题的；换题后置空，下次挂载时重新拉 */
|
||||
@@ -122,16 +157,21 @@ export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
scheduleDisconnect(15 * 60 * 1000)
|
||||
|
||||
if (!outcome.ok) {
|
||||
message.error(
|
||||
outcome.error ? `流程图评分失败: ${outcome.error}` : "流程图评分失败，请稍后重试",
|
||||
)
|
||||
phase.value = "failed"
|
||||
message.error("AI 这次没评出来，再交一次试试")
|
||||
return
|
||||
}
|
||||
latestRating.value = { score: outcome.score, grade: outcome.grade }
|
||||
message.success(`流程图评分完成！得分: ${outcome.score}分 (${outcome.grade}级)`)
|
||||
if ((outcome.grade === "A" || outcome.grade === "S") && lastSubmittedMermaidCode.value) {
|
||||
phase.value = "done"
|
||||
selectedId.value = null
|
||||
evaluatedSeq.value++
|
||||
// 学生这会儿可能在看题目：只提示一句、页签上亮状态，不强行把他切过去（设计文档 5.3）
|
||||
message.success(`AI 点评完了：${outcome.score} 分，${outcome.grade} 级`)
|
||||
if (isFlowchartPass(outcome.grade) && lastSubmittedMermaidCode.value) {
|
||||
myFlowchartStore.show(lastSubmittedMermaidCode.value)
|
||||
}
|
||||
const problemId = problemStore.problem?.id
|
||||
if (problemId) loadScores(problemId)
|
||||
}
|
||||
|
||||
const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
|
||||
@@ -162,7 +202,9 @@ export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
|
||||
lastSubmittedMermaidCode.value = mermaidCode
|
||||
loading.value = true
|
||||
latestRating.value = { score: 0, grade: "" }
|
||||
phase.value = "evaluating"
|
||||
// 交上去就切到「结果」页签，和交代码一样
|
||||
useSubmissionStore().revealResult()
|
||||
|
||||
try {
|
||||
const response = await submitFlowchart({
|
||||
@@ -183,10 +225,9 @@ export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
startPollingFallback()
|
||||
startPollingDeadline()
|
||||
}
|
||||
|
||||
message.success("流程图已提交，请耐心等待评分")
|
||||
} catch (error) {
|
||||
loading.value = false
|
||||
phase.value = "idle"
|
||||
// 按错误码分支（见 utils/api.ts 的约定）。限流是最容易撞上的一种：
|
||||
// 只说「提交失败」的话，学生会以为是自己的图有问题，然后反复点，越点越久
|
||||
if (errorCode(error) === "too-many-submissions") {
|
||||
@@ -200,32 +241,64 @@ export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 最近一次的分数 ====================
|
||||
// ==================== 历次分数 ====================
|
||||
async function loadScores(problemId: number) {
|
||||
const data = await getFlowchartScores(problemId)
|
||||
// 换题之后才回来的是上一道题的，别盖掉新题的
|
||||
if (problemStore.problem?.id !== problemId) return
|
||||
scores.value = data.scores
|
||||
hiddenCount.value = data.hidden
|
||||
const latest = data.scores.at(-1)
|
||||
if (latest && phase.value !== "evaluating") {
|
||||
latestRating.value = { score: latest.score, grade: latest.grade }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 这道题最近一次的分数；画到了 A/S 的话，把那张图亮到「我的流程图」。
|
||||
* 同一道题只拉一次（组件卸了再挂回来不重拉），换题后 loadedFor 清空。
|
||||
* 进这道题时读一次历次分数；画到过 A/S 的话，把最近那张 A/S 亮到题面的「你画的流程图」。
|
||||
* 同一道题只读一次（组件卸了再挂回来不重读），换题后 loadedFor 清空。
|
||||
*/
|
||||
async function ensureLoaded() {
|
||||
const problemId = problemStore.problem?.id
|
||||
if (!problemId || loadedFor === problemId) return
|
||||
loadedFor = problemId
|
||||
try {
|
||||
const data = await getCurrentProblemFlowchartSubmission(problemId)
|
||||
// 换题之后才回来的是上一道题的分数，别盖掉新题的
|
||||
await loadScores(problemId)
|
||||
if (problemStore.problem?.id !== problemId) return
|
||||
submissionCount.value = data.count
|
||||
latestRating.value = { score: data.score, grade: data.grade }
|
||||
const grade = data.grade
|
||||
if ((grade === "A" || grade === "S") && data.count > 0) {
|
||||
const detail = await getFlowchartSubmissionDetail(problemId, data.count)
|
||||
const passed = scores.value.filter((row) => isFlowchartPass(row.grade)).at(-1)
|
||||
if (passed) {
|
||||
const detail = await fetchDetail(passed.id)
|
||||
// 查的这一会儿又换了题，这张图不是新题的
|
||||
if (problemStore.problem?.id !== problemId) return
|
||||
if (detail.submission?.mermaidCode) myFlowchartStore.show(detail.submission.mermaidCode)
|
||||
if (detail?.mermaidCode) myFlowchartStore.show(detail.mermaidCode)
|
||||
}
|
||||
} catch (error) {
|
||||
// 拉不到就当没交过；下次挂载再试
|
||||
loadedFor = null
|
||||
console.error("[Flowchart] 读取最近一次评分失败:", error)
|
||||
console.error("[Flowchart] 读取历次评分失败:", error)
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchDetail(id: string) {
|
||||
const cached = details.value[id]
|
||||
if (cached) return cached
|
||||
const detail = await getFlowchartSubmission(id)
|
||||
details.value[id] = detail
|
||||
return detail
|
||||
}
|
||||
|
||||
/** 结果页签里点了某一次（null = 回到最新）：把那次的完整评语拉回来 */
|
||||
async function select(id: string | null) {
|
||||
selectedId.value = id
|
||||
const target = id ?? scores.value.at(-1)?.id
|
||||
if (!target || details.value[target]) return
|
||||
detailLoading.value = true
|
||||
try {
|
||||
await fetchDetail(target)
|
||||
} catch {
|
||||
message.error("这一次的评语读不出来，过一会儿再试")
|
||||
} finally {
|
||||
detailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -237,7 +310,11 @@ export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
function reset() {
|
||||
stopMonitoring()
|
||||
latestRating.value = { score: 0, grade: "" }
|
||||
submissionCount.value = 0
|
||||
phase.value = "idle"
|
||||
scores.value = []
|
||||
hiddenCount.value = 0
|
||||
selectedId.value = null
|
||||
details.value = {}
|
||||
lastSubmittedMermaidCode.value = ""
|
||||
loadedFor = null
|
||||
}
|
||||
@@ -253,9 +330,19 @@ export const useFlowchartStore = defineStore("flowchart", () => {
|
||||
return {
|
||||
loading,
|
||||
latestRating,
|
||||
phase,
|
||||
evaluatedSeq,
|
||||
scores,
|
||||
hiddenCount,
|
||||
submissionCount,
|
||||
selectedId,
|
||||
details,
|
||||
detailLoading,
|
||||
editor,
|
||||
attachEditor,
|
||||
submit,
|
||||
ensureLoaded,
|
||||
select,
|
||||
reset,
|
||||
}
|
||||
})
|
||||
@@ -1,5 +1,7 @@
|
||||
import { defineStore } from "pinia"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
import type { LANGUAGE, ProblemDetail } from "utils/types"
|
||||
import { problemEntryOf } from "oj/problem/composables/problemPageContext"
|
||||
|
||||
export const useProblemStore = defineStore("problem", () => {
|
||||
const problem = ref<ProblemDetail | null>(null)
|
||||
@@ -25,20 +27,46 @@ export const useProblemStore = defineStore("problem", () => {
|
||||
*/
|
||||
const failCount = computed(() => (problem.value?.myFailedCount ?? 0) + sessionFailCount.value)
|
||||
|
||||
const { isDesktop } = useBreakpoints()
|
||||
|
||||
/**
|
||||
* 这道题能不能画流程图。比赛里不给（入口差异表）；题单里原来也不给，现在给了，画到 A/S
|
||||
* 算完成（设计文档第 3 节决定 4）。手机上不给：节点库是 HTML5 拖放，手机上拖不动。
|
||||
*/
|
||||
const canDraw = computed(
|
||||
() => !!problem.value?.allowFlowchart && problemEntryOf(route) !== "contest" && isDesktop.value,
|
||||
)
|
||||
|
||||
/**
|
||||
* 编辑器能切到的全部「语言」。流程图在内部仍是一门叫 Flowchart 的语言（提交、草稿、编辑器
|
||||
* 切换都按它分支），但界面上不再混在语言下拉里 —— 那是工具栏最左边的「写代码 / 画流程图」。
|
||||
*/
|
||||
const languages = computed<LANGUAGE[]>(() => {
|
||||
if (route.name === "problem" && problem.value?.allowFlowchart) {
|
||||
return ["Flowchart", ...problem.value.languages]
|
||||
}
|
||||
return problem.value?.languages ?? []
|
||||
const own = problem.value?.languages ?? []
|
||||
return canDraw.value ? ["Flowchart", ...own] : own
|
||||
})
|
||||
|
||||
/** 语言下拉里的：真正的编程语言 */
|
||||
const codeLanguages = computed(() => languages.value.filter((it) => it !== "Flowchart"))
|
||||
|
||||
/**
|
||||
* 请编辑器换语言，并读回那门语言的草稿（没有就是模板）。只有编辑器（ProblemEditor）知道
|
||||
* 草稿存在哪，所以这里只留一个请求，由它接住 —— 结果页签里的「照着它写代码」不在编辑器里。
|
||||
*/
|
||||
const languageRequest = ref<LANGUAGE | null>(null)
|
||||
function switchLanguage(language: LANGUAGE) {
|
||||
languageRequest.value = language
|
||||
}
|
||||
|
||||
/**
|
||||
* 这道题收不收当前语言，不收就退到它支持的第一种（SQL 题只有 "SQL"，硬编码的
|
||||
* Python 会被后端拒绝）。编辑器每次载入代码之前都要过一遍：草稿的键里带着语言，
|
||||
* 先载入再改语言，编辑器里摆的就是另一种语言的模板。
|
||||
*/
|
||||
function supportedLanguage(current: LANGUAGE): LANGUAGE {
|
||||
return languages.value.includes(current) ? current : (languages.value[0] ?? "Python")
|
||||
if (languages.value.includes(current)) return current
|
||||
// 兜底落在编程语言上：languages 的第一项可能是 Flowchart，不能默认把人扔到画布上
|
||||
return codeLanguages.value[0] ?? languages.value[0] ?? "Python"
|
||||
}
|
||||
|
||||
function incrementFailCount() {
|
||||
@@ -55,7 +83,11 @@ export const useProblemStore = defineStore("problem", () => {
|
||||
return {
|
||||
problem,
|
||||
failCount,
|
||||
canDraw,
|
||||
languages,
|
||||
codeLanguages,
|
||||
languageRequest,
|
||||
switchLanguage,
|
||||
supportedLanguage,
|
||||
incrementFailCount,
|
||||
}
|
||||
|
||||
@@ -24,7 +24,22 @@ interface Props {
|
||||
const { height = "calc(100vh - 133px)" } = defineProps<Props>()
|
||||
|
||||
// Vue Flow 实例
|
||||
const { addEdges, removeNodes, removeEdges } = useVueFlow()
|
||||
const { addEdges, removeNodes, removeEdges, fitView, onNodesInitialized } = useVueFlow()
|
||||
|
||||
/**
|
||||
* 进页面读回草稿、载回旧版之后缩放到正好装下整张图。原来画布停在默认的位置和缩放上，
|
||||
* 图大一点就有一半在外面，学生以为草稿丢了。只在这两种时候缩：拖进一个新节点时也会
|
||||
* 触发 nodes-initialized，那时候跟着缩放会让画布跳一下
|
||||
*/
|
||||
let fitPending = false
|
||||
function fitSoon() {
|
||||
fitPending = true
|
||||
}
|
||||
onNodesInitialized(() => {
|
||||
if (!fitPending) return
|
||||
fitPending = false
|
||||
fitView({ padding: 0.15, maxZoom: 1.2 })
|
||||
})
|
||||
|
||||
// 节点和边的响应式数据
|
||||
// 显式标注成 Ref<Node[]>，不走 ref<T>() 的 UnwrapRef 推导 —— vue-flow 的
|
||||
@@ -37,12 +52,18 @@ const { canUndo, canRedo, resetHistory, saveState, undo, redo } = useHistory()
|
||||
|
||||
const problemStore = useProblemStore()
|
||||
const { problem } = storeToRefs(problemStore)
|
||||
// 缓存管理：用 computed key 支持题目 ID 异步加载后自动切换到正确的 storage
|
||||
const cacheKey = computed(() =>
|
||||
problem.value?._id
|
||||
? `flowchart-editor-data-problem-${problem.value!._id}`
|
||||
: "flowchart-editor-data",
|
||||
)
|
||||
const route = useRoute()
|
||||
/**
|
||||
* 缓存管理：用 computed key 支持题目 ID 异步加载后自动切换到正确的 storage。
|
||||
* 题单入口单独一份草稿：加入题单之前在题库里画到 A 的那张，不能一进题单就摆在画布上
|
||||
* （设计文档第 11 节 3，和代码草稿同理）
|
||||
*/
|
||||
const cacheKey = computed(() => {
|
||||
if (!problem.value?._id) return "flowchart-editor-data"
|
||||
const base = `flowchart-editor-data-problem-${problem.value._id}`
|
||||
const problemSetId = route.params.problemSetId
|
||||
return problemSetId ? `${base}-problemset-${problemSetId}` : base
|
||||
})
|
||||
const { isSaving, lastSaved, hasUnsavedChanges, saveToCache, loadFromCache, clearCache } = useCache(
|
||||
nodes,
|
||||
edges,
|
||||
@@ -51,6 +72,7 @@ const { isSaving, lastSaved, hasUnsavedChanges, saveToCache, loadFromCache, clea
|
||||
// 换题后画布已经被换成新题的草稿，历史必须跟着重建，
|
||||
// 否则一次撤销就会把上一题的图还原到这一题里
|
||||
resetHistory(nodes.value, edges.value)
|
||||
fitSoon()
|
||||
},
|
||||
)
|
||||
|
||||
@@ -152,6 +174,7 @@ onMounted(() => {
|
||||
// 否则第一步操作没有可回退的目标，撤销按钮一直是灰的
|
||||
loadFromCache()
|
||||
resetHistory(nodes.value, edges.value)
|
||||
fitSoon()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -177,6 +200,7 @@ const setFlowchartData = (data: { nodes: Node[]; edges: Edge[] }) => {
|
||||
nodes.value = processedNodes
|
||||
edges.value = processedEdges
|
||||
saveState(nodes.value, edges.value)
|
||||
fitSoon()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# OJ2 设计文档：题目详情页重设计
|
||||
|
||||
日期：2026-09-28
|
||||
状态：**设计已定，第 14 节的 1–4 步和第 7 节已实施**。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
|
||||
状态：**设计已定，第 14 节的 1–5 步和第 7 节已实施**（剩第 6 步：协作的几处规则、手机版）。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
|
||||
那一页是定稿，「初稿 1280×800」那一页已作废，只留着对照）。效果图表达不了的规则都写在这里，
|
||||
**实施时以本文为准**。
|
||||
|
||||
|
||||
Reference in new issue
Block a user