refactor(流程图): 评分状态挪进 store——交完切去写代码，这次的评分结果不再丢

SubmitFlowchart 只在语言选成 Flowchart 时才挂载，评分的全部状态（WebSocket 订阅、
轮询兜底、3 分钟超时）都长在它身上：交完马上切去写代码，组件一卸载就断开连接，
正在评的那次结果丢了 —— 不提示分数，评到 A/S 也不亮到「我的流程图」。

- oj/store/flowchart.ts：提交、评分跟踪、评完的提示、A/S 亮图、最近一次分数；
  换题和离开页面时收掉
- SubmitFlowchart 只剩从画布取图和评分详情弹框
- 顺手补了登录检查：原来没登录也能点，请求发出去才被拦，只看到一句「提交失败」

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

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

@@ -1,71 +0,0 @@
-<script lang="ts" setup>
-import { storeToRefs } from "pinia"
-import { useCodeStore } from "oj/store/code"
-import { useProblemStore } from "oj/store/problem"
-import { SOURCES } from "utils/constants"
-import CodeEditor from "shared/components/CodeEditor.vue"
-import { useBreakpoints } from "shared/composables/breakpoints"
-import storage from "utils/storage"
-import type { LANGUAGE } from "utils/types"
-import { beginEditTrace, editTraceExtensions } from "oj/problem/utils/editTrace"
-import EditorToolbar from "./EditorToolbar.vue"
-
-const route = useRoute()
-
-const codeStore = useCodeStore()
-const problemStore = useProblemStore()
-const { problem } = storeToRefs(problemStore)
-
-const { isDesktop } = useBreakpoints()
-
-const contestID = route.params.contestID || null
-const storageKey = computed(
-  () => `problem_${problem.value!._id}_contest_${contestID}_lang_${codeStore.code.language}`,
-)
-
-const editorHeight = computed(() =>
-  isDesktop.value ? "calc(100vh - 133px)" : "calc(100vh - 172px)",
-)
-
-function loadCode() {
-  codeStore.code.language = problemStore.supportedLanguage(codeStore.code.language)
-  const savedCode = storage.get(storageKey.value)
-  codeStore.setCode(
-    savedCode ||
-      problem.value!.template[codeStore.code.language] ||
-      SOURCES[codeStore.code.language],
-  )
-  beginEditTrace(`problem_${problem.value!._id}_contest_${contestID}`, codeStore.code.value.length)
-}
-
-onMounted(loadCode)
-
-// 换题时组件复用、不重新挂载，和 ProblemEditor 一样得自己重新载入
-watch(() => problem.value?._id, loadCode)
-
-const changeCode = (v: string) => {
-  storage.set(storageKey.value, v)
-}
-
-const changeLanguage = (v: LANGUAGE) => {
-  const savedCode = storage.get(storageKey.value)
-  codeStore.setCode(
-    savedCode && storageKey.value.split("_").pop() === v
-      ? savedCode
-      : problem.value!.template[codeStore.code.language] || SOURCES[codeStore.code.language],
-  )
-}
-</script>
-
-<template>
-  <n-flex vertical>
-    <EditorToolbar :storage-key="storageKey" @change-language="changeLanguage" />
-    <CodeEditor
-      v-model:value="codeStore.code.value"
-      :language="codeStore.code.language"
-      :height="editorHeight"
-      :extra-extensions="editTraceExtensions"
-      @update:model-value="changeCode"
-    />
-  </n-flex>
-</template>

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/components/SubmitFlowchart.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { errorCode } from "utils/api"
+import { storeToRefs } from "pinia"
-import { toRefs } from "vue"
 
 // 工具函数
 import { decompressFromBase64, compressToBase64 } from "utils/functions"
@@ -10,25 +9,22 @@ import { sortFlowchartCriteria } from "utils/constants"
 import { useBreakpoints } from "shared/composables/breakpoints"
 import { useMermaid } from "shared/composables/useMermaid"
 import { useMermaidConverter } from "../composables/useMermaidConverter"
-import { useFlowchartWebSocket, type FlowchartEvaluationUpdate } from "shared/composables/websocket"
-import { useMyFlowchartStore } from "shared/store/myFlowchart"
 
 // API 和状态管理
-import {
+import { getFlowchartSubmissionDetail } from "oj/api"
-  getCurrentProblemFlowchartSubmission,
-  getFlowchartSubmission,
-  getFlowchartSubmissionDetail,
-  submitFlowchart,
-} from "oj/api"
 import { useProblemStore } from "oj/store/problem"
+import { useFlowchartStore, type FlowchartRating } from "oj/store/flowchart"
+
+/**
+ * 「提交流程图」按钮、分数按钮和评分详情弹框。
+ *
+ * 提交和评分（WebSocket + 轮询 + 超时、评完的提示、A/S 亮到「我的流程图」）都在
+ * flowchart store：这个组件只在语言选成 Flowchart 时才挂载，切去写代码它就卸载，
+ * 正在评的那次不能跟着没。这里只剩从编辑器里取图、以及翻看历次评分的弹框。
+ */
 
 // ==================== 类型定义 ====================
-interface Rating {
+interface Evaluation extends FlowchartRating {
-  score: number
-  grade: string
-}
-
-interface Evaluation extends Rating {
   feedback: string
   suggestions: string
   criteria_details: {
@@ -36,7 +32,6 @@ interface Evaluation extends Rating {
   }
 }
 
-// ==================== 组合式函数和响应式变量 ====================
 interface FlowchartEditorInstance {
   getFlowchartData: () => { nodes: unknown[]; edges: unknown[] }
   setFlowchartData: (data: { nodes: unknown[]; edges: unknown[] }) => void
@@ -49,18 +44,16 @@ const mermaidContainer = useTemplateRef<HTMLElement>("mermaidContainer")
 // 基础组合式函数
 const message = useMessage()
 const problemStore = useProblemStore()
-const { problem } = toRefs(problemStore)
+const { problem } = storeToRefs(problemStore)
+const flowchartStore = useFlowchartStore()
+const { loading, latestRating, submissionCount } = storeToRefs(flowchartStore)
 const { isDesktop } = useBreakpoints()
-const myFlowchartStore = useMyFlowchartStore()
 const { convertToMermaid } = useMermaidConverter()
 const { renderError, renderFlowchart } = useMermaid()
 
-// 状态管理
+// 评分详情弹框
 const rendering = ref(false)
-const loading = ref(false)
+const modalRating = ref<FlowchartRating>({ score: 0, grade: "" })
-const latestRating = ref<Rating>({ score: 0, grade: "" })
-const modalRating = ref<Rating>({ score: 0, grade: "" })
-const submissionCount = ref(0)
 const myFlowchartZippedStr = ref("")
 const myMermaidCode = ref("")
 const showDetailModal = ref(false)
@@ -72,7 +65,6 @@ const evaluation = ref<Evaluation>({
   criteria_details: {},
 })
 const page = ref(1)
-const lastSubmittedMermaidCode = ref("")
 const suggestionLines = computed(() => splitSuggestionLines(evaluation.value.suggestions))
 
 // jsonb 不保留键序，直接遍历会把 40 分的「逻辑正确性」排到最后
@@ -87,127 +79,8 @@ function splitSuggestionLines(suggestions?: string | null) {
     : []
 }
 
-// ==================== 评分结果监听 ====================
+// ==================== 提交 ====================
-/**
+function submit() {
- * 评分结果有两条路进来：WebSocket 推送（快）和轮询（稳）。谁先到谁结算，
- * 靠 monitoringId 去重 —— 结算时清空，另一条路后到就直接跳过。
- *
- * 之所以必须有轮询兜底：Redis pub/sub 是发完不管的，worker 推的那一刻只要这条
- * 连接不在（重连空窗、页面刚从后台切回来），这条消息就永远丢了。判题那边一直
- * 有兜底轮询，流程图这边没有，丢一次消息按钮就一直转圈转到用户自己刷新。
- */
-const monitoringId = ref("")
-
-/** AI 评分比判题慢得多，轮询放缓一点 */
-const POLL_INTERVAL = 3000
-/** 到点还没结果就收手，别无限轮询下去 */
-const POLL_TIMEOUT = 3 * 60 * 1000
-
-type Outcome = { ok: true; score: number; grade: string } | { ok: false; error?: string }
-
-const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
-  async () => {
-    if (!monitoringId.value) {
-      pausePolling()
-      return
-    }
-    try {
-      const data = await getFlowchartSubmission(monitoringId.value)
-      if (data.status === 2) {
-        settle(data.id, {
-          ok: true,
-          score: data.aiScore ?? 0,
-          grade: data.aiGrade ?? "",
-        })
-      } else if (data.status === 3) {
-        settle(data.id, { ok: false })
-      }
-    } catch (error) {
-      console.error("[Flowchart] 轮询失败:", error)
-      pausePolling()
-    }
-  },
-  POLL_INTERVAL,
-  { immediate: false },
-)
-
-// WebSocket 正常时压根用不上轮询，先给它 5 秒，到点还没结果才开始拉
-const { start: startPollingFallback, stop: stopPollingFallback } = useTimeoutFn(
-  () => {
-    if (monitoringId.value) resumePolling()
-  },
-  5000,
-  { immediate: false },
-)
-
-const { start: startPollingDeadline, stop: stopPollingDeadline } = useTimeoutFn(
-  () => {
-    if (!monitoringId.value) return
-    monitoringId.value = ""
-    unsubscribe()
-    pausePolling()
-    loading.value = false
-    message.warning("评分等待超时，请稍后刷新页面查看结果")
-  },
-  POLL_TIMEOUT,
-  { immediate: false },
-)
-
-/** 不再跟这一次评分：结算完、或者换了题 */
-function stopMonitoring() {
-  monitoringId.value = ""
-  unsubscribe()
-  pausePolling()
-  stopPollingFallback()
-  stopPollingDeadline()
-  loading.value = false
-}
-
-function settle(submissionId: string, outcome: Outcome) {
-  // 一个学生可能同时开着几道题的页面，每条连接都订在同一个用户 topic 上，
-  // 别的页面的评分结果照样会推到这里来 —— 必须认 id，不然会张冠李戴
-  if (!submissionId || submissionId !== monitoringId.value) return
-  stopMonitoring()
-
-  if (!outcome.ok) {
-    message.error(outcome.error ? `流程图评分失败: ${outcome.error}` : "流程图评分失败，请稍后重试")
-    return
-  }
-  latestRating.value = { score: outcome.score, grade: outcome.grade }
-  message.success(`流程图评分完成！得分: ${outcome.score}分 (${outcome.grade}级)`)
-  if ((outcome.grade === "A" || outcome.grade === "S") && lastSubmittedMermaidCode.value) {
-    myFlowchartStore.show(lastSubmittedMermaidCode.value)
-  }
-}
-
-// ==================== WebSocket 相关函数 ====================
-const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
-  if (data.type === "flowchart_evaluation_completed") {
-    settle(data.submissionId, {
-      ok: true,
-      score: data.score ?? 0,
-      grade: data.grade || "",
-    })
-  } else if (data.type === "flowchart_evaluation_failed") {
-    settle(data.submissionId, { ok: false, error: data.error })
-  }
-}
-
-// 创建 WebSocket 连接
-const { connect, disconnect, subscribe, unsubscribe } =
-  useFlowchartWebSocket(handleWebSocketMessage)
-
-// 订阅提交更新，同时开启轮询兜底
-function subscribeToSubmission(submissionId: string) {
-  monitoringId.value = submissionId
-  subscribe(submissionId)
-  startPollingFallback()
-  startPollingDeadline()
-}
-
-// ==================== 提交相关函数 ====================
-// 提交流程图
-async function submitFlowchartData() {
   if (!flowchartEditorRef?.value) return
 
   // 获取流程图的JSON数据
@@ -218,66 +91,13 @@ async function submitFlowchartData() {
     return
   }
 
-  const mermaidCode = convertToMermaid(flowchartData)
+  flowchartStore.submit(
-  lastSubmittedMermaidCode.value = mermaidCode
+    convertToMermaid(flowchartData),
-  const compressed = compressToBase64(JSON.stringify(flowchartData))
+    compressToBase64(JSON.stringify(flowchartData)),
-
+  )
-  loading.value = true
-  latestRating.value = { score: 0, grade: "" }
-
-  try {
-    const response = await submitFlowchart({
-      problemId: problem.value!.id,
-      mermaidCode,
-      flowchartData: {
-        compressed: true,
-        data: compressed,
-      },
-    })
-
-    // 获取提交ID并订阅更新
-    const submissionId = response.submissionId
-
-    if (submissionId) {
-      subscribeToSubmission(submissionId)
-    }
-
-    message.success("流程图已提交，请耐心等待评分")
-  } catch (error) {
-    loading.value = false
-    // 按错误码分支（见 utils/api.ts 的约定）。限流是最容易撞上的一种：
-    // 只说「提交失败」的话，学生会以为是自己的图有问题，然后反复点，越点越久
-    if (errorCode(error) === "too-many-submissions") {
-      message.warning("提交太频繁了，缓一会儿再交")
-    } else if (errorCode(error) === "flowchart-not-allowed") {
-      message.error("这道题不接受流程图提交")
-    } else {
-      message.error("流程图提交失败")
-    }
-    console.error("提交流程图失败:", error)
-  }
-}
-
-// 提交函数
-function submit() {
-  submitFlowchartData()
-}
-
-// ==================== 数据获取和处理函数 ====================
-
-async function getCurrentSubmission() {
-  const problemId = problem.value?.id
-  if (!problemId) return
-  const data = await getCurrentProblemFlowchartSubmission(problemId)
-  // 换题之后才回来的是上一道题的分数，别盖掉新题的
-  if (problem.value?.id !== problemId) return
-  submissionCount.value = data.count
-  latestRating.value = {
-    score: data.score,
-    grade: data.grade,
-  }
 }
 
+// ==================== 评分详情 ====================
 async function getSubmission(submissionPage = 0) {
   const problemId = problem.value?.id
   if (!problemId) return
@@ -304,11 +124,11 @@ async function getSubmission(submissionPage = 0) {
   myMermaidCode.value = submission.mermaidCode || ""
   modalRating.value = {
     score: submission.aiScore ?? 0,
-    grade: (submission.aiGrade ?? "") as Rating["grade"],
+    grade: submission.aiGrade ?? "",
   }
   evaluation.value = {
     score: submission.aiScore ?? 0,
-    grade: (submission.aiGrade ?? "") as Rating["grade"],
+    grade: submission.aiGrade ?? "",
     feedback: submission.aiFeedback ?? "",
     suggestions: submission.aiSuggestions ?? "",
     criteria_details: submission.aiCriteriaDetails as Evaluation["criteria_details"],
@@ -333,7 +153,6 @@ async function updatePage(val: number) {
   }
 }
 
-// ==================== 模态框相关函数 ====================
 async function openDetailModal() {
   showDetailModal.value = true
   rendering.value = true
@@ -389,51 +208,20 @@ const getPercentType = (percent: number) => {
   return "error"
 }
 
-// ==================== 生命周期钩子 ====================
+// ==================== 生命周期 ====================
-/** 这道题最近一次的评分；画到了 A/S 的话，把那张图亮到「我的流程图」 */
+onMounted(flowchartStore.ensureLoaded)
-async function loadLatest() {
-  const problemId = problem.value?.id
-  await getCurrentSubmission()
-  page.value = submissionCount.value
-  const grade = latestRating.value.grade
-  if ((grade === "A" || grade === "S") && submissionCount.value > 0) {
-    await getSubmission(submissionCount.value)
-    // 查的这一会儿又换了题，这张图不是新题的
-    if (problem.value?.id !== problemId) return
-    if (myMermaidCode.value) {
-      myFlowchartStore.show(myMermaidCode.value)
-    }
-  }
-}
 
-onMounted(() => {
+// 换题：分数和还在评的那次由 store 自己收（见 flowchart store 的 reset），
-  connect()
+// 这里只关掉弹框，再拉新题的最近一次分数
-  loadLatest()
-})
-
-/**
- * 换题。题目页换题是同一个组件复用（只换路由参数），两道题都能画流程图、语言又停在
- * Flowchart 的时候，这个组件连卸载都不会：分数按钮和评分弹框还是上一道题的，
- * 上一道还在评的那次评完，还会把它的图挂到新题的「我的流程图」上。
- */
 watch(
   () => problem.value?.id,
   (next, previous) => {
     if (!previous || next === previous) return
-    stopMonitoring()
     showDetailModal.value = false
-    latestRating.value = { score: 0, grade: "" }
-    submissionCount.value = 0
     page.value = 1
-    lastSubmittedMermaidCode.value = ""
+    flowchartStore.ensureLoaded()
-    loadLatest()
   },
 )
-
-// 组件卸载时断开连接
-onUnmounted(() => {
-  disconnect()
-})
 </script>
 
 <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,12 +7,17 @@ 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 { useFlowchartStore } from "oj/store/flowchart"
+// 判完之后该发生的事（烟花、点评、回题单）。静态引入：它得在第一次判完之前就挂好
+import SubmissionEffects from "./components/SubmissionEffects.vue"
 
-// 抽成具名 loader，便于进页面时与接口并行预取编辑器 chunk
+// 抽成具名 loader，便于进页面时与接口并行预取编辑器 chunk。
+// 题库、比赛、题单三种入口用的是同一个编辑器：原来比赛和题单用的是另一个精简版，
+// 没有协作、也没有错误标记，于是题单里「求助」老师接不上、「把中文标点都换成英文」
+// 点了没反应（见 docs/specs/2026-09-28-problem-page-redesign-design.md 第 10 节）
 const loadProblemEditor = () => import("./components/ProblemEditor.vue")
-const loadContestEditor = () => import("./components/BasicEditor.vue")
 const ProblemEditor = defineAsyncComponent(loadProblemEditor)
-const BasicEditor = defineAsyncComponent(loadContestEditor)
 const EditorForTest = defineAsyncComponent(() => import("./components/EditorForTest.vue"))
 const ProblemContent = defineAsyncComponent(() => import("./components/ProblemContent.vue"))
 const ProblemInfo = defineAsyncComponent(() => import("./components/ProblemInfo.vue"))
@@ -71,8 +76,6 @@ const tabOptions = computed(() => {
 
 const currentTab = ref("content")
 
-const isPublicProblemRoute = computed(() => route.name === "problem")
-
 watch(
   [() => route.query.tab, () => tabOptions.value],
   ([rawTab]) => {
@@ -103,7 +106,7 @@ async function init() {
   myFlowchartStore.hide()
   // 并行预取右侧编辑器 chunk（CodeMirror ~370K+），
   // 避免等 getProblem 返回后才串行下载，编辑器才迟迟出现
-  ;(isPublicProblemRoute.value ? loadProblemEditor : loadContestEditor)()
+  loadProblemEditor()
   try {
     const res = await getProblem(problemID, contestID)
     problem.value = res
@@ -132,6 +135,11 @@ watch(
   },
 )
 onBeforeUnmount(() => {
+  // 提交状态在 store 里、离开页面也不会自己没：不清的话回到题目页（哪怕换了一道题），
+  // 结果面板里还是上一次的那条
+  useSubmissionStore().reset()
+  // 流程图那边同理，还在评的那次不再跟（照常评完落库）
+  useFlowchartStore().reset()
   problem.value = null
   errMsg.value = "无数据"
   screenModeStore.resetScreenMode()
@@ -155,6 +163,7 @@ watch(
 
 <template>
   <template v-if="problem">
+    <SubmissionEffects />
     <n-split
       v-if="isDesktop && screenModeStore.isBothMode"
       direction="horizontal"
@@ -188,7 +197,7 @@ watch(
         </n-scrollbar>
       </template>
       <template #2>
-        <component :is="isPublicProblemRoute ? ProblemEditor : BasicEditor" />
+        <ProblemEditor />
       </template>
     </n-split>
 
@@ -232,7 +241,7 @@ watch(
         <ProblemFlowchart />
       </n-tab-pane>
       <n-tab-pane name="editor" tab="代码">
-        <component :is="isPublicProblemRoute ? ProblemEditor : BasicEditor" />
+        <ProblemEditor />
       </n-tab-pane>
       <n-tab-pane name="info" tab="统计" :disabled="!!problemSetId">
         <ProblemInfo />

apps/web/src/oj/problem/utils/editTrace.ts

@@ -5,8 +5,8 @@ import type { SubmissionTrace } from "@oj2/contract"
  * 编辑过程信号的采集，随提交一起报给后端（落进 `submission_trace`）。
  * 字段含义见契约的 `submissionTraceSchema`。**只数字符数和次数，不留任何按键内容。**
  *
- * 是模块单例而不是 Pinia store：编辑器（ProblemEditor / BasicEditor 里）和
+ * 是模块单例而不是 Pinia store：编辑器（ProblemEditor 里）和
- * 提交按钮（Form → SubmitCode）是兄弟组件，得共用一份计数；而 CodeMirror 的
+ * 提交按钮（EditorToolbar → SubmitCode）是兄弟组件，得共用一份计数；而 CodeMirror 的
  * 扩展对象一旦经过 store 就会被包成响应式代理，facet 靠身份比较，代理过的扩展
  * 直接失效。计数本身也不需要响应式。
  *

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

@@ -0,0 +1,261 @@
+import { createDiscreteApi } from "naive-ui"
+import { defineStore } from "pinia"
+import { errorCode } from "utils/api"
+import {
+  getCurrentProblemFlowchartSubmission,
+  getFlowchartSubmission,
+  getFlowchartSubmissionDetail,
+  submitFlowchart,
+} from "oj/api"
+import { useProblemStore } from "oj/store/problem"
+import { useFlowchartWebSocket, type FlowchartEvaluationUpdate } from "shared/composables/websocket"
+import { useMyFlowchartStore } from "shared/store/myFlowchart"
+import { useUserStore } from "shared/store/user"
+
+// store 里没有组件上下文，useMessage() 拿不到，和 utils/api.ts 一样用独立的一份
+const { message } = createDiscreteApi(["message"])
+
+export interface FlowchartRating {
+  score: number
+  grade: string
+}
+
+type Outcome = { ok: true; score: number; grade: string } | { ok: false; error?: string }
+
+/** AI 评分比判题慢得多，轮询放缓一点 */
+const POLL_INTERVAL = 3000
+/** 到点还没结果就收手，别无限轮询下去 */
+const POLL_TIMEOUT = 3 * 60 * 1000
+
+/**
+ * 流程图提交与 AI 评分：正在评的那一次、最近一次的分数、提交次数。
+ *
+ * 原来都在提交按钮那个组件（SubmitFlowchart）里，而它只在语言选成 Flowchart 时才挂载 ——
+ * 交完切到写代码，组件一卸载就断开 WebSocket，正在评的那次结果就丢了（评分中位 4.8 秒、
+ * 最长二十几秒，足够学生切走）。挪到 store 之后，切走了照样评完、照样提示、照样把
+ * A/S 的图亮到「我的流程图」。评分详情弹框只是展示，还留在组件里。
+ */
+export const useFlowchartStore = defineStore("flowchart", () => {
+  const problemStore = useProblemStore()
+  const myFlowchartStore = useMyFlowchartStore()
+
+  const loading = ref(false)
+  const latestRating = ref<FlowchartRating>({ score: 0, grade: "" })
+  const submissionCount = ref(0)
+  /** 最近一次交上去的那张图，评到 A/S 时亮到「我的流程图」 */
+  const lastSubmittedMermaidCode = ref("")
+  /** 最近一次分数是哪道题的；换题后置空，下次挂载时重新拉 */
+  let loadedFor: number | null = null
+
+  // ==================== 评分结果监听 ====================
+  /**
+   * 评分结果有两条路进来：WebSocket 推送（快）和轮询（稳）。谁先到谁结算，
+   * 靠 monitoringId 去重 —— 结算时清空，另一条路后到就直接跳过。
+   *
+   * 之所以必须有轮询兜底：Redis pub/sub 是发完不管的，worker 推的那一刻只要这条
+   * 连接不在（重连空窗、页面刚从后台切回来），这条消息就永远丢了。判题那边一直
+   * 有兜底轮询，流程图这边没有，丢一次消息按钮就一直转圈转到用户自己刷新。
+   */
+  let monitoringId = ""
+
+  const { pause: pausePolling, resume: resumePolling } = useIntervalFn(
+    async () => {
+      if (!monitoringId) {
+        pausePolling()
+        return
+      }
+      try {
+        const data = await getFlowchartSubmission(monitoringId)
+        if (data.status === 2) {
+          settle(data.id, {
+            ok: true,
+            score: data.aiScore ?? 0,
+            grade: data.aiGrade ?? "",
+          })
+        } else if (data.status === 3) {
+          settle(data.id, { ok: false })
+        }
+      } catch (error) {
+        console.error("[Flowchart] 轮询失败:", error)
+        pausePolling()
+      }
+    },
+    POLL_INTERVAL,
+    { immediate: false },
+  )
+
+  // WebSocket 正常时压根用不上轮询，先给它 5 秒，到点还没结果才开始拉
+  const { start: startPollingFallback, stop: stopPollingFallback } = useTimeoutFn(
+    () => {
+      if (monitoringId) resumePolling()
+    },
+    5000,
+    { immediate: false },
+  )
+
+  const { start: startPollingDeadline, stop: stopPollingDeadline } = useTimeoutFn(
+    () => {
+      if (!monitoringId) return
+      stopMonitoring()
+      message.warning("评分等待超时，请稍后刷新页面查看结果")
+    },
+    POLL_TIMEOUT,
+    { immediate: false },
+  )
+
+  /** 不再跟这一次评分：结算完、超时、或者换了题 */
+  function stopMonitoring() {
+    monitoringId = ""
+    unsubscribe()
+    pausePolling()
+    stopPollingFallback()
+    stopPollingDeadline()
+    loading.value = false
+  }
+
+  function settle(submissionId: string, outcome: Outcome) {
+    // 一个学生可能同时开着几道题的页面，每条连接都订在同一个用户 topic 上，
+    // 别的页面的评分结果照样会推到这里来 —— 必须认 id，不然会张冠李戴
+    if (!submissionId || submissionId !== monitoringId) return
+    stopMonitoring()
+    // 评完了就不急着断：接着还可能再交一次。和判题那边一样，闲 15 分钟再断
+    scheduleDisconnect(15 * 60 * 1000)
+
+    if (!outcome.ok) {
+      message.error(
+        outcome.error ? `流程图评分失败: ${outcome.error}` : "流程图评分失败，请稍后重试",
+      )
+      return
+    }
+    latestRating.value = { score: outcome.score, grade: outcome.grade }
+    message.success(`流程图评分完成！得分: ${outcome.score}分 (${outcome.grade}级)`)
+    if ((outcome.grade === "A" || outcome.grade === "S") && lastSubmittedMermaidCode.value) {
+      myFlowchartStore.show(lastSubmittedMermaidCode.value)
+    }
+  }
+
+  const handleWebSocketMessage = (data: FlowchartEvaluationUpdate) => {
+    if (data.type === "flowchart_evaluation_completed") {
+      settle(data.submissionId, {
+        ok: true,
+        score: data.score ?? 0,
+        grade: data.grade || "",
+      })
+    } else if (data.type === "flowchart_evaluation_failed") {
+      settle(data.submissionId, { ok: false, error: data.error })
+    }
+  }
+
+  const { connect, subscribe, unsubscribe, scheduleDisconnect, cancelScheduledDisconnect } =
+    useFlowchartWebSocket(handleWebSocketMessage)
+
+  // ==================== 提交 ====================
+  /** 交一张图。图的两种形态（Mermaid 源码、压缩过的编辑器数据）由组件从编辑器里取出来给 */
+  async function submit(mermaidCode: string, compressedData: string) {
+    const problem = problemStore.problem
+    if (!problem) return
+    // 原来没有这一道：没登录也能点，请求发出去才被拦下，学生只看到一句「提交失败」
+    if (!useUserStore().isAuthed) {
+      message.warning("请先登录")
+      return
+    }
+
+    lastSubmittedMermaidCode.value = mermaidCode
+    loading.value = true
+    latestRating.value = { score: 0, grade: "" }
+
+    try {
+      const response = await submitFlowchart({
+        problemId: problem.id,
+        mermaidCode,
+        flowchartData: {
+          compressed: true,
+          data: compressedData,
+        },
+      })
+
+      if (response.submissionId) {
+        // 订阅提交更新，同时开启轮询兜底。connect() 幂等；没连上时 subscribe 会先记着
+        cancelScheduledDisconnect()
+        connect()
+        monitoringId = response.submissionId
+        subscribe(response.submissionId)
+        startPollingFallback()
+        startPollingDeadline()
+      }
+
+      message.success("流程图已提交，请耐心等待评分")
+    } catch (error) {
+      loading.value = false
+      // 按错误码分支（见 utils/api.ts 的约定）。限流是最容易撞上的一种：
+      // 只说「提交失败」的话，学生会以为是自己的图有问题，然后反复点，越点越久
+      if (errorCode(error) === "too-many-submissions") {
+        message.warning("提交太频繁了，缓一会儿再交")
+      } else if (errorCode(error) === "flowchart-not-allowed") {
+        message.error("这道题不接受流程图提交")
+      } else {
+        message.error("流程图提交失败")
+      }
+      console.error("提交流程图失败:", error)
+    }
+  }
+
+  // ==================== 最近一次的分数 ====================
+  /**
+   * 这道题最近一次的分数；画到了 A/S 的话，把那张图亮到「我的流程图」。
+   * 同一道题只拉一次（组件卸了再挂回来不重拉），换题后 loadedFor 清空。
+   */
+  async function ensureLoaded() {
+    const problemId = problemStore.problem?.id
+    if (!problemId || loadedFor === problemId) return
+    loadedFor = problemId
+    try {
+      const data = await getCurrentProblemFlowchartSubmission(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)
+        // 查的这一会儿又换了题，这张图不是新题的
+        if (problemStore.problem?.id !== problemId) return
+        if (detail.submission?.mermaidCode) myFlowchartStore.show(detail.submission.mermaidCode)
+      }
+    } catch (error) {
+      // 拉不到就当没交过；下次挂载再试
+      loadedFor = null
+      console.error("[Flowchart] 读取最近一次评分失败:", error)
+    }
+  }
+
+  /**
+   * 收掉这一道题的：还在评的那一次不再跟（照常评完落库），分数、次数清空。
+   * 题目页换题是同一个组件复用，两道题都能画流程图、语言又停在 Flowchart 时组件
+   * 连卸载都不会 —— 不收的话上一道还在评的那次评完，会把它的图挂到新题上。
+   */
+  function reset() {
+    stopMonitoring()
+    latestRating.value = { score: 0, grade: "" }
+    submissionCount.value = 0
+    lastSubmittedMermaidCode.value = ""
+    loadedFor = null
+  }
+
+  watch(
+    () => problemStore.problem?.id,
+    (next, previous) => {
+      if (!previous || next === previous) return
+      reset()
+    },
+  )
+
+  return {
+    loading,
+    latestRating,
+    submissionCount,
+    submit,
+    ensureLoaded,
+    reset,
+  }
+})

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