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>

apps/web/src/oj/problem/components/SubmissionEffects.vue

@@ -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>

apps/web/src/oj/problem/components/SubmissionResult.vue

@@ -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 提示状态。
+// AI 提示的状态在 submission store 里（见 oj/problem/composables/useSubmissionHint.ts）：
-// hintTarget 是后端发来的全文，hintContent 是已经"打"出来的那一截 ——
+// 这个组件在提交按钮那边，编辑器一卸载它就跟着卸载，已经生成的提示不能跟着没
-// 后端从 2c 起整段生成、过滤通过才推（设计 2.6），一次就把全文发过来，
+const {
-// 逐字显示改在这边模拟。
+  hintTarget,
-const hintTarget = ref("")
+  hintContent,
-const hintContent = ref("")
+  hintLoading,
-const hintStream = useAIStream()
+  hintError,
-// 整条流跑完才算结束：提示是一次推全文，没有「第一个字到了」的中间态
+  hintId,
-const hintLoading = hintStream.running
+  hintLevel,
-const hintError = ref("")
+  hintCanEscalate,
-// 这条提示在 ai_hint 里的 id，生成完由 done 事件带回来；后端落库失败时没有，就不出评价按钮
+  hintHelpful,
-const hintId = ref<number | null>(null)
+  hintFeedbackSending,
-// 这条提示是哪一级（-1 = 编译错误那一档，不在阶梯上），以及还能不能再往上要一级。
+  hintTyping,
-// 两个都由后端算好在 done 里给，前端不自己推阶梯
+  fetchHint,
-const hintLevel = ref<number | null>(null)
+  sendHintFeedback,
-const hintCanEscalate = ref(false)
+} = useSubmissionStore().hint
-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)
 
 /** 判题机的临时目录名（`/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

apps/web/src/oj/problem/components/SubmitCode.vue

@@ -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 { useSubmissionStore } from "oj/store/submission"
-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 { 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 submissionStore = useSubmissionStore()
-const { problem } = storeToRefs(problemStore)
+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,
+    isFormatting: submissionStore.isFormatting,
-    isSubmitting: isSubmittingRequest.value || submitting.value,
+    isSubmitting: submissionStore.isSubmittingRequest || submissionStore.submitting,
-    isJudging: judging.value || pending.value,
+    isJudging: submissionStore.judging || submissionStore.pending,
-    isCooldown: isCooldown.value,
+    isCooldown: submissionStore.isCooldown,
   }),
 )
 
-// ==================== 提交函数 ====================
+function submit() {
-async function submit() {
   if (buttonState.value.disabled) return
-
+  submissionStore.submit({
-  syntaxErrorInfo.value = ""
+    contestId: (route.params.contestID as string) ?? "",
-
+    problemSetId: (route.params.problemSetId as string) ?? "",
-  // 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
-  }
 }
-
-// ==================== 失败计数 ====================
-// 这里只数本次会话的增量，历史失败数由 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 就被卸载，
+       display-directive 默认是 "if"：面板一收起来整个 SubmissionResult 就被卸载。
-       正在流式输出的 AI 提示连同已经生成的内容一起没了，那次 LLM 调用白花。
+       AI 提示的内容现在在 store 里，卸了也不丢，但重新挂载要重渲染 Markdown、
-       改成 "show" 之后内容留着，重新打开还是原样。 -->
+       重新拉一次「这节课的下一题」，留着更省事。 -->
   <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>

apps/web/src/oj/problem/composables/useSubmissionHint.ts

@@ -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,
+  }
+}

apps/web/src/oj/problem/composables/useSubmissionMonitor.ts

@@ -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(() => {
+  // 现在由 submission store 持有（见 oj/store/submission.ts），store 不销毁就一直在；
-    pausePolling()
+  // 用 onScopeDispose 是为了在组件里调用时照样能收尾
-  })
+  if (getCurrentScope()) onScopeDispose(pausePolling)
 
   return {
     // 状态

apps/web/src/oj/problem/detail.vue

@@ -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"

apps/web/src/oj/store/submission.ts

@@ -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),
+  }
+})

apps/web/src/shared/composables/websocket.ts

@@ -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 (getCurrentScope()) {
+    onScopeDispose(() => {
       if (handler) ws.removeHandler(handler)
       ws.disconnect()
     })
+  }
 
   return {
     connect: () => ws.connect(),