refactor(题目): 提交状态挪进 store——手机上切页签、桌面切分栏，判题结果和点评不再丢
提交按钮那个组件（SubmitCode）在编辑器的工具栏里，而提交的全部状态和判完之后的 反应都长在它身上：手机上交完切到「描述」页签（Naive 的页签切走即卸载）、桌面切到 「题目 / 自测」模式，编辑器一卸载，判题结果、AI 提示、失败计数、通过后的点评、 题单里的回题单全丢了。 - oj/store/submission.ts：这次提交、判题跟踪、语法检查报错、结果面板开合、冷却、 AI 提示（useSubmissionHint） - SubmissionEffects.vue：挂在题目页这一层，失败计数、标成已解决、烟花、强制点评 （连同「先点评再换题」的导航拦截）、回题单 - SubmitCode 只剩按钮和结果面板 - WebSocket 通道和判题监控的收尾改成 onScopeDispose：onUnmounted 在 store 里挂不上 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
a8b83ba762
commit
26e22e2542
8 files changed
+556
-419
No files matched your search
@@ -0,0 +1,205 @@
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from "pinia"
|
||||
import type { RouteLocationNormalized } from "vue-router"
|
||||
import { getReaction } from "oj/api"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import { useFireworks } from "oj/problem/composables/useFireworks"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
import { SubmissionStatus } from "utils/constants"
|
||||
|
||||
/**
|
||||
* 判完之后「该发生什么」：失败计数、标成已解决、烟花、点评、回题单。
|
||||
*
|
||||
* 挂在题目页这一层（detail.vue），和编辑器、提交按钮都无关 —— 原来这些写在提交按钮
|
||||
* 那个组件（SubmitCode）里，手机上切一下页签、桌面切一下分栏模式，编辑器一卸载它们
|
||||
* 就跟着没了：判完不放烟花、不计失败次数、不弹点评、题单里不回题单。
|
||||
* 状态本身在 submission store，这里只是看着它做事。
|
||||
*/
|
||||
|
||||
const ProblemReaction = defineAsyncComponent(() => import("./ProblemReaction.vue"))
|
||||
|
||||
const problemStore = useProblemStore()
|
||||
const submissionStore = useSubmissionStore()
|
||||
const { problem } = storeToRefs(problemStore)
|
||||
const { submission } = storeToRefs(submissionStore)
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
// 题目页在题库 / 比赛 / 题单三条路由之间是复用的，所以跟着路由算，不在 setup 时取一次
|
||||
const contestID = computed(() => (route.params.contestID as string) ?? "")
|
||||
const problemSetId = computed(() => (route.params.problemSetId as string) ?? "")
|
||||
|
||||
const { isDesktop } = useBreakpoints()
|
||||
const { celebrate } = useFireworks()
|
||||
|
||||
// ==================== AC 后弹出点评轮盘 ====================
|
||||
// 只对已经能评价、且还没评过的人弹：后端要求先有 AC 才收评价，这里刚 AC 完正好；
|
||||
// mine 非 null 说明早就评过了，别再打扰。
|
||||
//
|
||||
// 点评是强制的，但从 AC 到弹窗出来有 1.5 秒（加上查一次「评过没有」），而换题会把
|
||||
// 定时器取消（见下面换题的 watch）—— 「下一题」在通过的那一刻就出现了，学生手快点
|
||||
// 下去，点评就跳过了。所以这段时间里欠着一次点评（reviewOwed），离开这道题的导航
|
||||
// 先拦下来：立刻弹点评，选完再去原来要去的地方。
|
||||
const commentPanel = ref(false)
|
||||
const reviewOwed = ref(false)
|
||||
let reviewChecking = false
|
||||
let navigationAfterReview: string | null = null
|
||||
|
||||
async function openReview() {
|
||||
if (reviewChecking) return
|
||||
reviewChecking = true
|
||||
try {
|
||||
const res = await getReaction(problem.value!.id)
|
||||
if (res.mine === null) {
|
||||
commentPanel.value = true
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// 查不到就不拦：宁可少一条点评，也不能把学生卡在这道题上
|
||||
} finally {
|
||||
reviewChecking = false
|
||||
}
|
||||
settleReview()
|
||||
}
|
||||
|
||||
/** 这次点评了结（评完了、原来就评过、或者查不到），接着去刚才被拦下的地方 */
|
||||
function settleReview() {
|
||||
reviewOwed.value = false
|
||||
const target = navigationAfterReview
|
||||
navigationAfterReview = null
|
||||
if (target) router.push(target)
|
||||
}
|
||||
|
||||
function closeCommentPanel() {
|
||||
commentPanel.value = false
|
||||
// 点评价弹窗时，结果面板会当成「点了外面」收起来 —— 而「下一题」就在面板里
|
||||
// （LessonNext），评价完得把它重新打开
|
||||
submissionStore.showResult = true
|
||||
settleReview()
|
||||
}
|
||||
|
||||
const { start: showCommentPanelDelayed, stop: cancelCommentPanel } = useTimeoutFn(
|
||||
openReview,
|
||||
1500,
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
/**
|
||||
* 只拦「离开这道题」：换 query（左栏切页签会改 `?tab=`）不算。弹窗已经开着的时候
|
||||
* 不拦 —— 那时页面被遮罩盖住，还能走的只有浏览器后退，拦下来就等于把人关在这一页，
|
||||
* 点评接口一直失败时连退路都没有。
|
||||
*/
|
||||
function holdForReview(to: RouteLocationNormalized, from: RouteLocationNormalized) {
|
||||
if (!reviewOwed.value || commentPanel.value) return true
|
||||
if (to.name === from.name && to.params.problemID === from.params.problemID) return true
|
||||
navigationAfterReview = to.fullPath
|
||||
cancelCommentPanel()
|
||||
openReview()
|
||||
return false
|
||||
}
|
||||
|
||||
onBeforeRouteUpdate(holdForReview)
|
||||
onBeforeRouteLeave(holdForReview)
|
||||
|
||||
const { start: goToProblemSetDelayed, stop: cancelGoToProblemSet } = useTimeoutFn(
|
||||
() => {
|
||||
router.push({
|
||||
name: "problemset",
|
||||
params: {
|
||||
problemSetId: problemSetId.value,
|
||||
},
|
||||
})
|
||||
},
|
||||
1500,
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
/**
|
||||
* 换题时收掉通过之后那两个 1.5 秒的定时器 —— 评价弹窗是按**当前**题目去查、去弹的，
|
||||
* 不取消的话就会给一道还没做的题弹评价。欠着的点评走不到这里：离开这道题的导航
|
||||
* 已经被 holdForReview 拦下、评完才放行；还能走到这里的只有弹窗开着时按了浏览器后退。
|
||||
* 结果面板、还在跟的那条提交由 submission store 自己收。
|
||||
*/
|
||||
watch(
|
||||
() => problem.value?._id,
|
||||
(next, previous) => {
|
||||
if (!previous || next === previous) return
|
||||
commentPanel.value = false
|
||||
cancelCommentPanel()
|
||||
reviewOwed.value = false
|
||||
navigationAfterReview = null
|
||||
cancelGoToProblemSet()
|
||||
},
|
||||
)
|
||||
|
||||
// ==================== 失败计数 ====================
|
||||
// 这里只数本次会话的增量，历史失败数由 problem.myFailedCount 带进来。
|
||||
// 排除的状态要和后端 judge/status.ts 的 NON_FAILURE_RESULTS 对齐，
|
||||
// 尤其是 system_error —— 判题机自己崩了不该推进 AI 提示的解锁进度。
|
||||
watch(
|
||||
() => submission.value?.result,
|
||||
(result) => {
|
||||
if (result === undefined || result === null) return
|
||||
if (
|
||||
result === SubmissionStatus.pending ||
|
||||
result === SubmissionStatus.judging ||
|
||||
result === SubmissionStatus.submitting
|
||||
)
|
||||
return
|
||||
if (
|
||||
result !== SubmissionStatus.accepted &&
|
||||
result !== SubmissionStatus.ast_check_failed &&
|
||||
result !== SubmissionStatus.system_error
|
||||
) {
|
||||
problemStore.incrementFailCount()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// ==================== AC庆祝效果 ====================
|
||||
watch(
|
||||
() => submission.value?.result,
|
||||
(result) => {
|
||||
if (result !== SubmissionStatus.accepted && result !== SubmissionStatus.ast_check_failed) return
|
||||
|
||||
// 1. 刷新题目状态
|
||||
problem.value!.myStatus = 0
|
||||
|
||||
// 题单进度不在这里更新了。以前是 AC 之后回调 PUT /problem-set-progress，只认路由
|
||||
// 参数里那一个题单：从普通题库入口做出同一道题不计进度，网络一抖、页面提前关掉进度
|
||||
// 就静默丢失。现在判题那一路直接记账（judge/run.ts），而且是记进所有已加入且包含
|
||||
// 这道题的题单；收到「判完了」的时候进度已经落库，跳回题单页看到的就是新数据。
|
||||
|
||||
if (result !== SubmissionStatus.accepted) return
|
||||
|
||||
// 2. 放烟花
|
||||
celebrate()
|
||||
|
||||
// 3. 弹出评价框。比赛里不打扰；题单里 1.5 秒后要跳回题单页，弹了也会被冲掉
|
||||
if (!contestID.value && !problemSetId.value) {
|
||||
reviewOwed.value = true
|
||||
showCommentPanelDelayed()
|
||||
}
|
||||
|
||||
if (problemSetId.value) {
|
||||
// 延迟回到题单页面
|
||||
goToProblemSetDelayed()
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-modal
|
||||
preset="card"
|
||||
title="恭喜你成功提交，说说你对这道题的感受吧"
|
||||
:mask-closable="false"
|
||||
:closable="false"
|
||||
:close-on-esc="false"
|
||||
:style="{ maxWidth: isDesktop && '50vw', maxHeight: '80vh' }"
|
||||
v-model:show="commentPanel"
|
||||
>
|
||||
<ProblemReaction @submitted="closeCommentPanel" />
|
||||
</n-modal>
|
||||
</template>
|
||||
@@ -2,7 +2,7 @@
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { useThemeVars } from "naive-ui"
|
||||
import { HINT_MIN_FAILURES, hintLevelLabel } from "@oj2/contract"
|
||||
import type { AiHintDone, JudgeCaseResult } from "@oj2/contract"
|
||||
import type { JudgeCaseResult } from "@oj2/contract"
|
||||
import { JUDGE_STATUS, SubmissionStatus } from "utils/constants"
|
||||
import {
|
||||
submissionCaseResults,
|
||||
@@ -14,12 +14,11 @@ import {
|
||||
import type { Submission } from "utils/types"
|
||||
import SubmissionResultTag from "shared/components/SubmissionResultTag.vue"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import PythonErrorExplain from "./PythonErrorExplain.vue"
|
||||
import RuntimeErrorExplain from "./RuntimeErrorExplain.vue"
|
||||
import WrongAnswerExplain from "./WrongAnswerExplain.vue"
|
||||
import LessonNext from "./LessonNext.vue"
|
||||
import { useAIStream } from "shared/composables/aiStream"
|
||||
import { submitHintFeedback } from "oj/api"
|
||||
import { MdPreview } from "md-editor-v3"
|
||||
import "md-editor-v3/lib/preview.css"
|
||||
import { useDark } from "@vueuse/core"
|
||||
@@ -32,61 +31,22 @@ const isDark = useDark()
|
||||
const problemStore = useProblemStore()
|
||||
const theme = useThemeVars()
|
||||
|
||||
// AI 提示状态。
|
||||
// hintTarget 是后端发来的全文，hintContent 是已经"打"出来的那一截 ——
|
||||
// 后端从 2c 起整段生成、过滤通过才推（设计 2.6），一次就把全文发过来，
|
||||
// 逐字显示改在这边模拟。
|
||||
const hintTarget = ref("")
|
||||
const hintContent = ref("")
|
||||
const hintStream = useAIStream()
|
||||
// 整条流跑完才算结束：提示是一次推全文，没有「第一个字到了」的中间态
|
||||
const hintLoading = hintStream.running
|
||||
const hintError = ref("")
|
||||
// 这条提示在 ai_hint 里的 id，生成完由 done 事件带回来；后端落库失败时没有，就不出评价按钮
|
||||
const hintId = ref<number | null>(null)
|
||||
// 这条提示是哪一级（-1 = 编译错误那一档，不在阶梯上），以及还能不能再往上要一级。
|
||||
// 两个都由后端算好在 done 里给，前端不自己推阶梯
|
||||
const hintLevel = ref<number | null>(null)
|
||||
const hintCanEscalate = ref(false)
|
||||
const hintHelpful = ref<boolean | null>(null)
|
||||
const hintFeedbackSending = ref(false)
|
||||
|
||||
// 打字机：每 24ms 吐 3 个字，约 125 字/秒。步子不敢迈太小 ——
|
||||
// 每一帧都要让 MdPreview 重渲染一次 Markdown，机房那批机器扛不住逐字
|
||||
const TYPE_STEP = 3
|
||||
const TYPE_INTERVAL = 24
|
||||
let typingTimer: ReturnType<typeof setInterval> | null = null
|
||||
const hintTyping = computed(() => hintContent.value.length < hintTarget.value.length)
|
||||
|
||||
function stopTyping() {
|
||||
if (typingTimer === null) return
|
||||
clearInterval(typingTimer)
|
||||
typingTimer = null
|
||||
}
|
||||
|
||||
function startTyping() {
|
||||
if (typingTimer !== null) return
|
||||
typingTimer = setInterval(() => {
|
||||
if (!hintTyping.value) {
|
||||
stopTyping()
|
||||
return
|
||||
}
|
||||
hintContent.value = hintTarget.value.slice(0, hintContent.value.length + TYPE_STEP)
|
||||
}, TYPE_INTERVAL)
|
||||
}
|
||||
|
||||
function resetHint() {
|
||||
stopTyping()
|
||||
hintTarget.value = ""
|
||||
hintContent.value = ""
|
||||
hintError.value = ""
|
||||
hintId.value = null
|
||||
hintLevel.value = null
|
||||
hintCanEscalate.value = false
|
||||
hintHelpful.value = null
|
||||
}
|
||||
|
||||
onUnmounted(stopTyping)
|
||||
// AI 提示的状态在 submission store 里（见 oj/problem/composables/useSubmissionHint.ts）：
|
||||
// 这个组件在提交按钮那边，编辑器一卸载它就跟着卸载，已经生成的提示不能跟着没
|
||||
const {
|
||||
hintTarget,
|
||||
hintContent,
|
||||
hintLoading,
|
||||
hintError,
|
||||
hintId,
|
||||
hintLevel,
|
||||
hintCanEscalate,
|
||||
hintHelpful,
|
||||
hintFeedbackSending,
|
||||
hintTyping,
|
||||
fetchHint,
|
||||
sendHintFeedback,
|
||||
} = useSubmissionStore().hint
|
||||
|
||||
/** 判题机的临时目录名（`/judger/run/<32 位随机串>/`）对学生没有意义，只剩文件名 */
|
||||
function stripJudgePath(text: string) {
|
||||
@@ -188,59 +148,6 @@ const showAIHint = computed(() => {
|
||||
)
|
||||
})
|
||||
|
||||
// 结果面板现在是 display-directive="show"，关掉不再销毁组件，提示内容能留到重新打开。
|
||||
// 代价是换了一次提交它也留着，所以这里按提交 id 手动清一次 —— 否则新结果底下挂着
|
||||
// 上一次提交的提示，而且按钮已经被 v-if 藏了，学生没法重新分析。
|
||||
watch(
|
||||
() => props.submission?.id,
|
||||
() => {
|
||||
// 上一次提交的提示还在生成的话掐掉，不然它会写进新提交的面板里
|
||||
hintStream.abort()
|
||||
resetHint()
|
||||
},
|
||||
)
|
||||
|
||||
// more = 学生点的是「再多一点提示」。升级只能由学生主动发起，而且后端还要看
|
||||
// 「上次开出这一级之后有没有再交过」，所以点了也未必真升 —— 以 done 里的 level 为准
|
||||
async function fetchHint(submissionId: string, more = false) {
|
||||
resetHint()
|
||||
try {
|
||||
await hintStream.run<AiHintDone>(
|
||||
"ai/hint",
|
||||
{ submissionId, more },
|
||||
{
|
||||
onDelta(content) {
|
||||
hintTarget.value += content
|
||||
startTyping()
|
||||
},
|
||||
onDone(data) {
|
||||
hintId.value = data.hintId ?? null
|
||||
hintLevel.value = data.level ?? null
|
||||
hintCanEscalate.value = data.canEscalate === true
|
||||
},
|
||||
},
|
||||
)
|
||||
} catch (error) {
|
||||
hintError.value = (error as Error).message
|
||||
}
|
||||
}
|
||||
|
||||
// 可以改票：点另一个就覆盖。失败了不打扰学生，按钮恢复原样就行 ——
|
||||
// 评价是给我们看的，不值得为它弹一条报错
|
||||
async function sendHintFeedback(helpful: boolean) {
|
||||
if (hintId.value === null || hintFeedbackSending.value) return
|
||||
if (hintHelpful.value === helpful) return
|
||||
hintFeedbackSending.value = true
|
||||
try {
|
||||
await submitHintFeedback(hintId.value, helpful)
|
||||
hintHelpful.value = helpful
|
||||
} catch {
|
||||
// 静默
|
||||
} finally {
|
||||
hintFeedbackSending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 测试用例表格数据（只在部分通过时显示）
|
||||
const infoTable = computed(() => {
|
||||
const submission = props.submission
|
||||
|
||||
@@ -1,319 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { errorCode, errorMessage } from "utils/api"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { storeToRefs } from "pinia"
|
||||
import { formatCode, getReaction, submitCode } from "oj/api"
|
||||
import { useCodeStore } from "oj/store/code"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useFireworks } from "oj/problem/composables/useFireworks"
|
||||
import { useSubmissionMonitor } from "oj/problem/composables/useSubmissionMonitor"
|
||||
import { LANGUAGE_FORMAT_VALUE, SubmissionStatus } from "utils/constants"
|
||||
import type { SubmitCodePayload } from "utils/types"
|
||||
import type { RouteLocationNormalized } from "vue-router"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import { getSubmitButtonState } from "./submitButtonState"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
import { useUserStore } from "shared/store/user"
|
||||
import { useCollabStore } from "shared/store/collab"
|
||||
import { restartEditTrace, snapshotEditTrace } from "oj/problem/utils/editTrace"
|
||||
|
||||
// ==================== 异步组件 ====================
|
||||
const ProblemReaction = defineAsyncComponent(() => import("./ProblemReaction.vue"))
|
||||
/**
|
||||
* 提交按钮 + 结果面板。只管显示和把点击交给 store：提交的状态在 submission store，
|
||||
* 判完之后该发生的事（烟花、点评、回题单）在页面这一层的 SubmissionEffects ——
|
||||
* 这个组件在编辑器的工具栏里，编辑器卸载时它也跟着卸载，所以什么都不能只存在这里。
|
||||
*/
|
||||
|
||||
// 结果面板第一次弹出（也就是第一次提交）时才加载：它带着 DataTable，而判题要等
|
||||
// 好几秒，这点下载时间藏得住。进页面就加载的话，只看题不提交的人也要付这笔
|
||||
const SubmissionResult = defineAsyncComponent(() => import("./SubmissionResult.vue"))
|
||||
const PythonErrorExplain = defineAsyncComponent(() => import("./PythonErrorExplain.vue"))
|
||||
|
||||
// ==================== 基础状态 ====================
|
||||
const userStore = useUserStore()
|
||||
const collabStore = useCollabStore()
|
||||
const codeStore = useCodeStore()
|
||||
const problemStore = useProblemStore()
|
||||
const { problem } = storeToRefs(problemStore)
|
||||
const submissionStore = useSubmissionStore()
|
||||
const { submission, showResult, syntaxErrorInfo } = storeToRefs(submissionStore)
|
||||
const route = useRoute()
|
||||
const contestID = (route.params.contestID as string) ?? ""
|
||||
const problemSetId = (route.params.problemSetId as string) ?? ""
|
||||
|
||||
const router = useRouter()
|
||||
const [commentPanel] = useToggle()
|
||||
|
||||
function closeCommentPanel() {
|
||||
commentPanel.value = false
|
||||
// 点评价弹窗时，结果面板会当成「点了外面」收起来 —— 而「下一题」就在面板里
|
||||
// （LessonNext），评价完得把它重新打开
|
||||
showResult.value = true
|
||||
settleReview()
|
||||
}
|
||||
|
||||
const { isDesktop } = useBreakpoints()
|
||||
|
||||
// ==================== 烟花效果 ====================
|
||||
const { celebrate } = useFireworks()
|
||||
|
||||
// ==================== 判题监控 ====================
|
||||
const {
|
||||
submission,
|
||||
judging,
|
||||
pending,
|
||||
submitting,
|
||||
startMonitoring,
|
||||
reset: resetSubmission,
|
||||
} = useSubmissionMonitor()
|
||||
|
||||
const showResult = ref(false)
|
||||
const isFormatting = ref(false)
|
||||
const isSubmittingRequest = ref(false)
|
||||
|
||||
/**
|
||||
* 提交前语法检查查出来的错误（CPython 的报错原文），有它时结果面板显示中文说明、
|
||||
* 不显示上一次的判题结果。这次没交上去，所以不是一条提交、也不数进失败次数。
|
||||
*
|
||||
* 检查在服务端做（`/code/format` 里先用 CPython 编译一遍），原来是浏览器里的 Skulpt：
|
||||
* 那个只能报「第 N 行有错」，而且要下载 ~226KB。
|
||||
*/
|
||||
const syntaxErrorInfo = ref("")
|
||||
|
||||
// ==================== 提交冷却 ====================
|
||||
const { start: startCooldown, isPending: isCooldown } = useTimeout(5000, {
|
||||
controls: true,
|
||||
immediate: false,
|
||||
})
|
||||
|
||||
// ==================== AC 后弹出点评轮盘 ====================
|
||||
// 只对已经能评价、且还没评过的人弹：后端要求先有 AC 才收评价，这里刚 AC 完正好；
|
||||
// mine 非 null 说明早就评过了，别再打扰。
|
||||
//
|
||||
// 点评是强制的，但从 AC 到弹窗出来有 1.5 秒（加上查一次「评过没有」），而换题会把
|
||||
// 定时器取消（见下面换题的 watch）—— 「下一题」在通过的那一刻就出现了，学生手快点
|
||||
// 下去，点评就跳过了。所以这段时间里欠着一次点评（reviewOwed），离开这道题的导航
|
||||
// 先拦下来：立刻弹点评，选完再去原来要去的地方。
|
||||
const reviewOwed = ref(false)
|
||||
let reviewChecking = false
|
||||
let navigationAfterReview: string | null = null
|
||||
|
||||
async function openReview() {
|
||||
if (reviewChecking) return
|
||||
reviewChecking = true
|
||||
try {
|
||||
const res = await getReaction(problem.value!.id)
|
||||
if (res.mine === null) {
|
||||
commentPanel.value = true
|
||||
return
|
||||
}
|
||||
} catch {
|
||||
// 查不到就不拦：宁可少一条点评，也不能把学生卡在这道题上
|
||||
} finally {
|
||||
reviewChecking = false
|
||||
}
|
||||
settleReview()
|
||||
}
|
||||
|
||||
/** 这次点评了结（评完了、原来就评过、或者查不到），接着去刚才被拦下的地方 */
|
||||
function settleReview() {
|
||||
reviewOwed.value = false
|
||||
const target = navigationAfterReview
|
||||
navigationAfterReview = null
|
||||
if (target) router.push(target)
|
||||
}
|
||||
|
||||
const { start: showCommentPanelDelayed, stop: cancelCommentPanel } = useTimeoutFn(
|
||||
openReview,
|
||||
1500,
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
/**
|
||||
* 只拦「离开这道题」：换 query（左栏切页签会改 `?tab=`）不算。弹窗已经开着的时候
|
||||
* 不拦 —— 那时页面被遮罩盖住，还能走的只有浏览器后退，拦下来就等于把人关在这一页，
|
||||
* 点评接口一直失败时连退路都没有。
|
||||
*/
|
||||
function holdForReview(to: RouteLocationNormalized, from: RouteLocationNormalized) {
|
||||
if (!reviewOwed.value || commentPanel.value) return true
|
||||
if (to.name === from.name && to.params.problemID === from.params.problemID) return true
|
||||
navigationAfterReview = to.fullPath
|
||||
cancelCommentPanel()
|
||||
openReview()
|
||||
return false
|
||||
}
|
||||
|
||||
onBeforeRouteUpdate(holdForReview)
|
||||
onBeforeRouteLeave(holdForReview)
|
||||
|
||||
const { start: goToProblemSetDelayed, stop: cancelGoToProblemSet } = useTimeoutFn(
|
||||
() => {
|
||||
router.push({
|
||||
name: "problemset",
|
||||
params: {
|
||||
problemSetId: problemSetId,
|
||||
},
|
||||
})
|
||||
},
|
||||
1500,
|
||||
{ immediate: false },
|
||||
)
|
||||
|
||||
/**
|
||||
* 换题时把上一道题的东西全收掉：结果面板、提交前的语法错误、还在跟的那条提交，以及
|
||||
* 通过之后那两个 1.5 秒的定时器 —— 评价弹窗是按**当前**题目去查、去弹的，不取消的话
|
||||
* 就会给一道还没做的题弹评价。欠着的点评走不到这里：离开这道题的导航已经被
|
||||
* holdForReview 拦下、评完才放行；还能走到这里的只有弹窗开着时按了浏览器后退。
|
||||
*
|
||||
* 题目页换题是同一个组件复用（只换路由参数），以前几乎只有退回列表再点进来这一条路，
|
||||
* 有了顶栏题号直达和结果面板里的「下一题」之后，这成了常规操作。
|
||||
*/
|
||||
watch(
|
||||
() => problem.value?._id,
|
||||
(next, previous) => {
|
||||
if (!previous || next === previous) return
|
||||
showResult.value = false
|
||||
syntaxErrorInfo.value = ""
|
||||
commentPanel.value = false
|
||||
cancelCommentPanel()
|
||||
reviewOwed.value = false
|
||||
navigationAfterReview = null
|
||||
cancelGoToProblemSet()
|
||||
resetSubmission()
|
||||
},
|
||||
)
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
const buttonState = computed(() =>
|
||||
getSubmitButtonState({
|
||||
isAuthed: userStore.isAuthed,
|
||||
hasCode: codeStore.code.value.trim() !== "",
|
||||
isFormatting: isFormatting.value,
|
||||
isSubmitting: isSubmittingRequest.value || submitting.value,
|
||||
isJudging: judging.value || pending.value,
|
||||
isCooldown: isCooldown.value,
|
||||
isFormatting: submissionStore.isFormatting,
|
||||
isSubmitting: submissionStore.isSubmittingRequest || submissionStore.submitting,
|
||||
isJudging: submissionStore.judging || submissionStore.pending,
|
||||
isCooldown: submissionStore.isCooldown,
|
||||
}),
|
||||
)
|
||||
|
||||
// ==================== 提交函数 ====================
|
||||
async function submit() {
|
||||
function submit() {
|
||||
if (buttonState.value.disabled) return
|
||||
|
||||
syntaxErrorInfo.value = ""
|
||||
|
||||
// 0. 提交前自动格式化（Python 用 ruff，C/C++ 用 clang-format，SQL 用 sqlparse）。
|
||||
// Python 在格式化之前先由服务端的 CPython 查一遍语法，有错就不提交
|
||||
const formatLang = LANGUAGE_FORMAT_VALUE[codeStore.code.language]
|
||||
if (["python", "c", "cpp", "sql"].includes(formatLang)) {
|
||||
isFormatting.value = true
|
||||
try {
|
||||
const res = await formatCode({
|
||||
code: codeStore.code.value,
|
||||
language: formatLang,
|
||||
})
|
||||
codeStore.setCode(res.code)
|
||||
} catch (e) {
|
||||
if (errorCode(e) === "syntax-error") {
|
||||
// 仅 Python 会出现：message 是 CPython 的报错原文，交给 PythonErrorExplain 翻译
|
||||
syntaxErrorInfo.value = errorMessage(e)
|
||||
showResult.value = true
|
||||
return
|
||||
}
|
||||
// server-error / 网络异常：格式化工具问题，静默降级，提交原代码
|
||||
} finally {
|
||||
isFormatting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 1. 构建提交数据
|
||||
const data: SubmitCodePayload = {
|
||||
problemId: problem.value!.id,
|
||||
language: codeStore.code.language,
|
||||
code: codeStore.code.value,
|
||||
// 编辑过程信号，见 utils/editTrace.ts。协作的判断和 ProblemEditor 的 collabHere 同一个口径
|
||||
trace: snapshotEditTrace(
|
||||
collabStore.room !== null && collabStore.room.problemId === problem.value!._id,
|
||||
),
|
||||
}
|
||||
if (contestID) {
|
||||
data.contestId = parseInt(contestID)
|
||||
}
|
||||
// 从题单入口进来的，把来源题单一起报上去：提交列表要据此标出「来自题单」。
|
||||
// 只是来源标记，题单进度仍由后端判完之后自己记账（见上面那段注释）
|
||||
if (problemSetId) {
|
||||
data.problemSetId = parseInt(problemSetId)
|
||||
}
|
||||
// 2. 提交代码到后端
|
||||
isSubmittingRequest.value = true
|
||||
try {
|
||||
const res = await submitCode(data)
|
||||
console.log(`[Submit] 代码已提交: ID=${res.submissionId}`)
|
||||
// 交上了才清零；被限流 / 网络失败的话这一段接着记，下次提交一起报
|
||||
restartEditTrace(codeStore.code.value.length)
|
||||
|
||||
// 3. 启动冷却 + 监控
|
||||
startCooldown()
|
||||
startMonitoring(res.submissionId)
|
||||
showResult.value = true
|
||||
} finally {
|
||||
isSubmittingRequest.value = false
|
||||
}
|
||||
submissionStore.submit({
|
||||
contestId: (route.params.contestID as string) ?? "",
|
||||
problemSetId: (route.params.problemSetId as string) ?? "",
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 失败计数 ====================
|
||||
// 这里只数本次会话的增量，历史失败数由 problem.myFailedCount 带进来。
|
||||
// 排除的状态要和后端 judge/status.ts 的 NON_FAILURE_RESULTS 对齐，
|
||||
// 尤其是 system_error —— 判题机自己崩了不该推进 AI 提示的解锁进度。
|
||||
watch(
|
||||
() => submission.value?.result,
|
||||
(result) => {
|
||||
if (result === undefined || result === null) return
|
||||
if (
|
||||
result === SubmissionStatus.pending ||
|
||||
result === SubmissionStatus.judging ||
|
||||
result === SubmissionStatus.submitting
|
||||
)
|
||||
return
|
||||
if (
|
||||
result !== SubmissionStatus.accepted &&
|
||||
result !== SubmissionStatus.ast_check_failed &&
|
||||
result !== SubmissionStatus.system_error
|
||||
) {
|
||||
problemStore.incrementFailCount()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// ==================== AC庆祝效果 ====================
|
||||
watch(
|
||||
() => submission.value?.result,
|
||||
async (result) => {
|
||||
if (result !== SubmissionStatus.accepted && result !== SubmissionStatus.ast_check_failed) return
|
||||
|
||||
// 1. 刷新题目状态
|
||||
problem.value!.myStatus = 0
|
||||
|
||||
// 题单进度不在这里更新了。以前是 AC 之后回调 PUT /problem-set-progress，只认路由
|
||||
// 参数里那一个题单：从普通题库入口做出同一道题不计进度，网络一抖、页面提前关掉进度
|
||||
// 就静默丢失。现在判题那一路直接记账（judge/run.ts），而且是记进所有已加入且包含
|
||||
// 这道题的题单；收到「判完了」的时候进度已经落库，跳回题单页看到的就是新数据。
|
||||
|
||||
if (result !== SubmissionStatus.accepted) return
|
||||
|
||||
// 3. 放烟花
|
||||
celebrate()
|
||||
|
||||
// 4. 弹出评价框。比赛里不打扰；题单里 1.5 秒后要跳回题单页，弹了也会被冲掉
|
||||
if (!contestID && !problemSetId) {
|
||||
reviewOwed.value = true
|
||||
showCommentPanelDelayed()
|
||||
}
|
||||
|
||||
if (problemSetId) {
|
||||
// 延迟回到题单页面
|
||||
goToProblemSetDelayed()
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 提交按钮 + 结果弹窗。
|
||||
display-directive 默认是 "if"：面板一收起来整个 SubmissionResult 就被卸载，
|
||||
正在流式输出的 AI 提示连同已经生成的内容一起没了，那次 LLM 调用白花。
|
||||
改成 "show" 之后内容留着，重新打开还是原样。 -->
|
||||
display-directive 默认是 "if"：面板一收起来整个 SubmissionResult 就被卸载。
|
||||
AI 提示的内容现在在 store 里，卸了也不丢，但重新挂载要重渲染 Markdown、
|
||||
重新拉一次「这节课的下一题」，留着更省事。 -->
|
||||
<n-popover
|
||||
trigger="manual"
|
||||
display-directive="show"
|
||||
@@ -340,7 +77,6 @@ watch(
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
<!-- 结果展示。SubmissionResult 用 v-show 留着：它身上可能挂着正在生成的 AI 提示 -->
|
||||
<n-flex v-if="syntaxErrorInfo" vertical style="max-width: 560px">
|
||||
<n-alert type="warning" title="代码有语法错误，还没有提交" />
|
||||
<PythonErrorExplain :err-info="syntaxErrorInfo" />
|
||||
@@ -358,17 +94,4 @@ watch(
|
||||
>
|
||||
上次结果
|
||||
</n-button>
|
||||
|
||||
<!-- 评价弹窗 -->
|
||||
<n-modal
|
||||
preset="card"
|
||||
title="恭喜你成功提交，说说你对这道题的感受吧"
|
||||
:mask-closable="false"
|
||||
:closable="false"
|
||||
:close-on-esc="false"
|
||||
:style="{ maxWidth: isDesktop && '50vw', maxHeight: '80vh' }"
|
||||
v-model:show="commentPanel"
|
||||
>
|
||||
<ProblemReaction @submitted="closeCommentPanel" />
|
||||
</n-modal>
|
||||
</template>
|
||||
@@ -0,0 +1,131 @@
|
||||
import type { AiHintDone } from "@oj2/contract"
|
||||
import { submitHintFeedback } from "oj/api"
|
||||
import { useAIStream } from "shared/composables/aiStream"
|
||||
|
||||
/**
|
||||
* 一次提交的 AI 提示。
|
||||
*
|
||||
* 原来这些状态长在结果面板（SubmissionResult）里，而结果面板在提交按钮那个组件里 ——
|
||||
* 手机上切一下页签、桌面切一下分栏模式，编辑器连同它一起卸载，已经生成的提示没了，
|
||||
* 那次 LLM 调用白花。现在由 submission store 持有（见 oj/store/submission.ts）。
|
||||
*
|
||||
* hintTarget 是后端发来的全文，hintContent 是已经「打」出来的那一截 ——
|
||||
* 后端从 2c 起整段生成、过滤通过才推（设计 2.6），一次就把全文发过来，
|
||||
* 逐字显示改在这边模拟。
|
||||
*/
|
||||
export function useSubmissionHint() {
|
||||
const hintTarget = ref("")
|
||||
const hintContent = ref("")
|
||||
const hintStream = useAIStream()
|
||||
// 整条流跑完才算结束：提示是一次推全文，没有「第一个字到了」的中间态
|
||||
const hintLoading = hintStream.running
|
||||
const hintError = ref("")
|
||||
// 这条提示在 ai_hint 里的 id，生成完由 done 事件带回来；后端落库失败时没有，就不出评价按钮
|
||||
const hintId = ref<number | null>(null)
|
||||
// 这条提示是哪一级（-1 = 编译错误那一档，不在阶梯上），以及还能不能再往上要一级。
|
||||
// 两个都由后端算好在 done 里给，前端不自己推阶梯
|
||||
const hintLevel = ref<number | null>(null)
|
||||
const hintCanEscalate = ref(false)
|
||||
const hintHelpful = ref<boolean | null>(null)
|
||||
const hintFeedbackSending = ref(false)
|
||||
|
||||
// 打字机：每 24ms 吐 3 个字，约 125 字/秒。步子不敢迈太小 ——
|
||||
// 每一帧都要让 MdPreview 重渲染一次 Markdown，机房那批机器扛不住逐字
|
||||
const TYPE_STEP = 3
|
||||
const TYPE_INTERVAL = 24
|
||||
let typingTimer: ReturnType<typeof setInterval> | null = null
|
||||
const hintTyping = computed(() => hintContent.value.length < hintTarget.value.length)
|
||||
|
||||
function stopTyping() {
|
||||
if (typingTimer === null) return
|
||||
clearInterval(typingTimer)
|
||||
typingTimer = null
|
||||
}
|
||||
|
||||
function startTyping() {
|
||||
if (typingTimer !== null) return
|
||||
typingTimer = setInterval(() => {
|
||||
if (!hintTyping.value) {
|
||||
stopTyping()
|
||||
return
|
||||
}
|
||||
hintContent.value = hintTarget.value.slice(0, hintContent.value.length + TYPE_STEP)
|
||||
}, TYPE_INTERVAL)
|
||||
}
|
||||
|
||||
function resetHint() {
|
||||
stopTyping()
|
||||
hintTarget.value = ""
|
||||
hintContent.value = ""
|
||||
hintError.value = ""
|
||||
hintId.value = null
|
||||
hintLevel.value = null
|
||||
hintCanEscalate.value = false
|
||||
hintHelpful.value = null
|
||||
}
|
||||
|
||||
/** 换了一次提交：还在生成的那条掐掉（不然它会写进新提交的面板里），内容清空 */
|
||||
function clearHint() {
|
||||
hintStream.abort()
|
||||
resetHint()
|
||||
}
|
||||
|
||||
// more = 学生点的是「再多一点提示」。升级只能由学生主动发起，而且后端还要看
|
||||
// 「上次开出这一级之后有没有再交过」，所以点了也未必真升 —— 以 done 里的 level 为准
|
||||
async function fetchHint(submissionId: string, more = false) {
|
||||
resetHint()
|
||||
try {
|
||||
await hintStream.run<AiHintDone>(
|
||||
"ai/hint",
|
||||
{ submissionId, more },
|
||||
{
|
||||
onDelta(content) {
|
||||
hintTarget.value += content
|
||||
startTyping()
|
||||
},
|
||||
onDone(data) {
|
||||
hintId.value = data.hintId ?? null
|
||||
hintLevel.value = data.level ?? null
|
||||
hintCanEscalate.value = data.canEscalate === true
|
||||
},
|
||||
},
|
||||
)
|
||||
} catch (error) {
|
||||
hintError.value = (error as Error).message
|
||||
}
|
||||
}
|
||||
|
||||
// 可以改票：点另一个就覆盖。失败了不打扰学生，按钮恢复原样就行 ——
|
||||
// 评价是给我们看的，不值得为它弹一条报错
|
||||
async function sendHintFeedback(helpful: boolean) {
|
||||
if (hintId.value === null || hintFeedbackSending.value) return
|
||||
if (hintHelpful.value === helpful) return
|
||||
hintFeedbackSending.value = true
|
||||
try {
|
||||
await submitHintFeedback(hintId.value, helpful)
|
||||
hintHelpful.value = helpful
|
||||
} catch {
|
||||
// 静默
|
||||
} finally {
|
||||
hintFeedbackSending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
if (getCurrentScope()) onScopeDispose(stopTyping)
|
||||
|
||||
return {
|
||||
hintTarget,
|
||||
hintContent,
|
||||
hintLoading,
|
||||
hintError,
|
||||
hintId,
|
||||
hintLevel,
|
||||
hintCanEscalate,
|
||||
hintHelpful,
|
||||
hintFeedbackSending,
|
||||
hintTyping,
|
||||
fetchHint,
|
||||
sendHintFeedback,
|
||||
clearHint,
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ref, computed, onUnmounted } from "vue"
|
||||
import { ref, computed, getCurrentScope, onScopeDispose } from "vue"
|
||||
import { useIntervalFn, useTimeoutFn } from "@vueuse/core"
|
||||
import { getSubmission } from "oj/api"
|
||||
import { SubmissionStatus } from "utils/constants"
|
||||
@@ -153,9 +153,9 @@ export function useSubmissionMonitor() {
|
||||
})
|
||||
|
||||
// ==================== 清理 ====================
|
||||
onUnmounted(() => {
|
||||
pausePolling()
|
||||
})
|
||||
// 现在由 submission store 持有（见 oj/store/submission.ts），store 不销毁就一直在；
|
||||
// 用 onScopeDispose 是为了在组件里调用时照样能收尾
|
||||
if (getCurrentScope()) onScopeDispose(pausePolling)
|
||||
|
||||
return {
|
||||
// 状态
|
||||
|
||||
@@ -7,6 +7,9 @@ import { useProblemStore } from "oj/store/problem"
|
||||
import { useScreenModeStore } from "shared/store/screenMode"
|
||||
import { useMyFlowchartStore } from "shared/store/myFlowchart"
|
||||
import { useUserStore } from "shared/store/user"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
// 判完之后该发生的事（烟花、点评、回题单）。静态引入：它得在第一次判完之前就挂好
|
||||
import SubmissionEffects from "./components/SubmissionEffects.vue"
|
||||
|
||||
// 抽成具名 loader，便于进页面时与接口并行预取编辑器 chunk。
|
||||
// 题库、比赛、题单三种入口用的是同一个编辑器：原来比赛和题单用的是另一个精简版，
|
||||
@@ -131,6 +134,9 @@ watch(
|
||||
},
|
||||
)
|
||||
onBeforeUnmount(() => {
|
||||
// 提交状态在 store 里、离开页面也不会自己没：不清的话回到题目页（哪怕换了一道题），
|
||||
// 结果面板里还是上一次的那条
|
||||
useSubmissionStore().reset()
|
||||
problem.value = null
|
||||
errMsg.value = "无数据"
|
||||
screenModeStore.resetScreenMode()
|
||||
@@ -154,6 +160,7 @@ watch(
|
||||
|
||||
<template>
|
||||
<template v-if="problem">
|
||||
<SubmissionEffects />
|
||||
<n-split
|
||||
v-if="isDesktop && screenModeStore.isBothMode"
|
||||
direction="horizontal"
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
import { defineStore } from "pinia"
|
||||
import { errorCode, errorMessage } from "utils/api"
|
||||
import { formatCode, submitCode } from "oj/api"
|
||||
import { useCodeStore } from "oj/store/code"
|
||||
import { useProblemStore } from "oj/store/problem"
|
||||
import { useSubmissionMonitor } from "oj/problem/composables/useSubmissionMonitor"
|
||||
import { useSubmissionHint } from "oj/problem/composables/useSubmissionHint"
|
||||
import { restartEditTrace, snapshotEditTrace } from "oj/problem/utils/editTrace"
|
||||
import { useCollabStore } from "shared/store/collab"
|
||||
import { LANGUAGE_FORMAT_VALUE } from "utils/constants"
|
||||
import type { SubmitCodePayload } from "utils/types"
|
||||
|
||||
/**
|
||||
* 题目页上「这一次提交」的全部状态：正在跟的那条提交、判题跟踪（WebSocket + 轮询）、
|
||||
* 提交前语法检查的错误、结果面板开没开、5 秒冷却、AI 提示。
|
||||
*
|
||||
* 原来它们都长在提交按钮那个组件（SubmitCode）里，而那个组件在编辑器的工具栏里 ——
|
||||
* 手机上交完切到「描述」页签（Naive 的页签默认切走即卸载）、桌面切到「题目 / 自测」
|
||||
* 模式，编辑器一卸载，判题结果、AI 提示、失败计数、通过后的点评和回题单全都丢了。
|
||||
* 挪到 store 之后组件卸了再挂回来，状态还在。
|
||||
*
|
||||
* 判完之后「该发生什么」（失败计数、标成已解决、烟花、点评、回题单）不在这里，
|
||||
* 在页面这一层的 SubmissionEffects —— 它们要路由守卫和弹窗，得挂在一直在的组件上。
|
||||
*/
|
||||
export const useSubmissionStore = defineStore("submission", () => {
|
||||
const problemStore = useProblemStore()
|
||||
const codeStore = useCodeStore()
|
||||
const collabStore = useCollabStore()
|
||||
|
||||
const monitor = useSubmissionMonitor()
|
||||
const hint = useSubmissionHint()
|
||||
|
||||
/** 结果面板开着没有。放 store 里是为了按钮组件卸了再挂回来，面板还是原来的开合 */
|
||||
const showResult = ref(false)
|
||||
const isFormatting = ref(false)
|
||||
const isSubmittingRequest = ref(false)
|
||||
|
||||
/**
|
||||
* 提交前语法检查查出来的错误（CPython 的报错原文），有它时结果面板显示中文说明、
|
||||
* 不显示上一次的判题结果。这次没交上去，所以不是一条提交、也不数进失败次数。
|
||||
*
|
||||
* 检查在服务端做（`/code/format` 里先用 CPython 编译一遍），原来是浏览器里的 Skulpt：
|
||||
* 那个只能报「第 N 行有错」，而且要下载 ~226KB。
|
||||
*/
|
||||
const syntaxErrorInfo = ref("")
|
||||
|
||||
const { start: startCooldown, isPending: isCooldown } = useTimeout(5000, {
|
||||
controls: true,
|
||||
immediate: false,
|
||||
})
|
||||
|
||||
/**
|
||||
* 交一次。`contestId` / `problemSetId` 是路由参数（空串 = 不是从那个入口进来的），
|
||||
* 由调用方给：store 不看路由。
|
||||
*/
|
||||
async function submit(entry: { contestId: string; problemSetId: string }) {
|
||||
const problem = problemStore.problem
|
||||
if (!problem) return
|
||||
syntaxErrorInfo.value = ""
|
||||
|
||||
// 0. 提交前自动格式化（Python 用 ruff，C/C++ 用 clang-format，SQL 用 sqlparse）。
|
||||
// Python 在格式化之前先由服务端的 CPython 查一遍语法，有错就不提交
|
||||
const formatLang = LANGUAGE_FORMAT_VALUE[codeStore.code.language]
|
||||
if (["python", "c", "cpp", "sql"].includes(formatLang)) {
|
||||
isFormatting.value = true
|
||||
try {
|
||||
const res = await formatCode({
|
||||
code: codeStore.code.value,
|
||||
language: formatLang,
|
||||
})
|
||||
codeStore.setCode(res.code)
|
||||
} catch (e) {
|
||||
if (errorCode(e) === "syntax-error") {
|
||||
// 仅 Python 会出现：message 是 CPython 的报错原文，交给 PythonErrorExplain 翻译
|
||||
syntaxErrorInfo.value = errorMessage(e)
|
||||
showResult.value = true
|
||||
return
|
||||
}
|
||||
// server-error / 网络异常：格式化工具问题，静默降级，提交原代码
|
||||
} finally {
|
||||
isFormatting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 1. 构建提交数据
|
||||
const data: SubmitCodePayload = {
|
||||
problemId: problem.id,
|
||||
language: codeStore.code.language,
|
||||
code: codeStore.code.value,
|
||||
// 编辑过程信号，见 utils/editTrace.ts。协作的判断和 ProblemEditor 的 collabHere 同一个口径
|
||||
trace: snapshotEditTrace(
|
||||
collabStore.room !== null && collabStore.room.problemId === problem._id,
|
||||
),
|
||||
}
|
||||
if (entry.contestId) {
|
||||
data.contestId = parseInt(entry.contestId)
|
||||
}
|
||||
// 从题单入口进来的，把来源题单一起报上去：提交列表要据此标出「来自题单」。
|
||||
// 只是来源标记，题单进度仍由后端判完之后自己记账（judge/run.ts）
|
||||
if (entry.problemSetId) {
|
||||
data.problemSetId = parseInt(entry.problemSetId)
|
||||
}
|
||||
// 2. 提交代码到后端
|
||||
isSubmittingRequest.value = true
|
||||
try {
|
||||
const res = await submitCode(data)
|
||||
console.log(`[Submit] 代码已提交: ID=${res.submissionId}`)
|
||||
// 交上了才清零；被限流 / 网络失败的话这一段接着记，下次提交一起报
|
||||
restartEditTrace(codeStore.code.value.length)
|
||||
|
||||
// 3. 启动冷却 + 监控
|
||||
startCooldown()
|
||||
monitor.startMonitoring(res.submissionId)
|
||||
showResult.value = true
|
||||
} finally {
|
||||
isSubmittingRequest.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 收掉这一道题的所有东西：结果面板、语法错误、还在跟的那条提交、AI 提示。
|
||||
* 提交本身照常判完落库，只是这边不再跟 —— 不然上一道还在判的那条判完，
|
||||
* 会把**新题**标成已解决。
|
||||
*/
|
||||
function reset() {
|
||||
showResult.value = false
|
||||
syntaxErrorInfo.value = ""
|
||||
monitor.reset()
|
||||
hint.clearHint()
|
||||
}
|
||||
|
||||
// 题目页换题是同一个组件复用（顶栏题号直达、「下一题」都只换路由参数）
|
||||
watch(
|
||||
() => problemStore.problem?._id,
|
||||
(next, previous) => {
|
||||
if (!previous || next === previous) return
|
||||
reset()
|
||||
},
|
||||
)
|
||||
|
||||
// 换了一次提交就清掉上一次的 AI 提示，否则新结果底下挂着上一次的提示，
|
||||
// 而「让 AI 分析」按钮已经被藏了，学生没法重新分析
|
||||
watch(() => monitor.submission.value?.id, hint.clearHint)
|
||||
|
||||
return {
|
||||
submission: monitor.submission,
|
||||
judging: monitor.judging,
|
||||
pending: monitor.pending,
|
||||
submitting: monitor.submitting,
|
||||
showResult,
|
||||
isFormatting,
|
||||
isSubmittingRequest,
|
||||
syntaxErrorInfo,
|
||||
isCooldown,
|
||||
submit,
|
||||
reset,
|
||||
// markRaw：不让 store 把它包成 reactive，组件解构出来的还是 ref
|
||||
hint: markRaw(hint),
|
||||
}
|
||||
})
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createDiscreteApi } from "naive-ui"
|
||||
import { ref, onUnmounted, type Ref } from "vue"
|
||||
import { ref, getCurrentScope, onScopeDispose, type Ref } from "vue"
|
||||
|
||||
import { useAuthModalStore } from "shared/store/authModal"
|
||||
import { useUserStore } from "shared/store/user"
|
||||
@@ -467,7 +467,9 @@ export interface SubmissionUpdate extends WebSocketMessage {
|
||||
* 带二十五行示例注释的 `createWebSocketComposable` 工厂，示例里那条通知通道并不
|
||||
* 存在，三个真实的 composable 一个都没用它。现在只剩这一个。
|
||||
*
|
||||
* 每次调用都新建一条连接（和原来一致，不是单例），并在组件卸载时摘掉 handler、断开。
|
||||
* 每次调用都新建一条连接（和原来一致，不是单例），并在作用域销毁时摘掉 handler、断开。
|
||||
* 用的是 onScopeDispose 而不是 onUnmounted：组件卸载时它照样触发，而在 Pinia store
|
||||
* 里调用时 onUnmounted 根本挂不上（没有组件实例，只报一条警告），连接就永远断不掉。
|
||||
*/
|
||||
function useChannel<T extends WebSocketMessage>(path: string, handler?: MessageHandler<T>) {
|
||||
const ws = new BaseWebSocket<T>(path)
|
||||
@@ -476,10 +478,12 @@ function useChannel<T extends WebSocketMessage>(path: string, handler?: MessageH
|
||||
// 中间那段窗口收到的广播没有任何 handler 接。窗口极小，但没有理由留着它。
|
||||
if (handler) ws.addHandler(handler)
|
||||
|
||||
onUnmounted(() => {
|
||||
if (handler) ws.removeHandler(handler)
|
||||
ws.disconnect()
|
||||
})
|
||||
if (getCurrentScope()) {
|
||||
onScopeDispose(() => {
|
||||
if (handler) ws.removeHandler(handler)
|
||||
ws.disconnect()
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
connect: () => ws.connect(),
|
||||
|
||||
Reference in new issue
Block a user