fix(题目): 在题目页里直接换题（下一题、题号直达）后，例子和语言还停在上一道题

题目页换题是同一个组件复用、只换路由参数，几处只在创建时读一次的状态就停在了上一道题：

- 例子：新题下面摆着旧题的例子，「测试」也拿旧例子比对
- 语言：下拉选项不跟着变，也不回退——从 Python 题跳到 SQL 题，语言停在 Python，提交必被拒
- 比赛 / 题单的编辑器只在挂载时载入一次代码
- 流程图：分数按钮、评分弹框、「我的流程图」还是上一道题的，上一道题还没评完的那次会挂到新题上

语言回退挪进 problem store 的 supportedLanguage()，两个编辑器在载入草稿之前调用，
保证先定语言再读这门语言的草稿。没有用给整块加 key 强制重新挂载的办法：课堂协作的
绑定依赖组件复用，重挂载会让协作中切题的老师语言恢复不了。

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

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

@@ -153,16 +153,21 @@ const { start: startPollingDeadline, stop: stopPollingDeadline } = useTimeoutFn(
   { immediate: false },
 )
 
-function settle(submissionId: string, outcome: Outcome) {
-  // 一个学生可能同时开着几道题的页面，每条连接都订在同一个用户 topic 上，
-  // 别的页面的评分结果照样会推到这里来 —— 必须认 id，不然会张冠李戴
-  if (!submissionId || submissionId !== monitoringId.value) return
+/** 不再跟这一次评分：结算完、或者换了题 */
+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}` : "流程图评分失败，请稍后重试")
@@ -261,8 +266,11 @@ function submit() {
 // ==================== 数据获取和处理函数 ====================
 
 async function getCurrentSubmission() {
-  if (!problem.value?.id) return
-  const data = await getCurrentProblemFlowchartSubmission(problem.value.id)
+  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,
@@ -271,8 +279,10 @@ async function getCurrentSubmission() {
 }
 
 async function getSubmission(submissionPage = 0) {
-  if (!problem.value?.id) return
-  const data = await getFlowchartSubmissionDetail(problem.value.id, submissionPage)
+  const problemId = problem.value?.id
+  if (!problemId) return
+  const data = await getFlowchartSubmissionDetail(problemId, submissionPage)
+  if (problem.value?.id !== problemId) return
   submissionCount.value = data.count
   const submission = data.submission
   // 翻到没有提交的页时后端返回 null（契约里 submission 是 nullable）——
@@ -380,19 +390,46 @@ const getPercentType = (percent: number) => {
 }
 
 // ==================== 生命周期钩子 ====================
-onMounted(async () => {
-  connect()
+/** 这道题最近一次的评分；画到了 A/S 的话，把那张图亮到「我的流程图」 */
+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(() => {
+  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 = ""
+    loadLatest()
+  },
+)
+
 // 组件卸载时断开连接
 onUnmounted(() => {
   disconnect()