From f4db7dc81cec4d1984bcb7f7a8cc5f403ea98f6b Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 28 Sep 2026 14:21:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A2=98=E7=9B=AE):=20=E5=88=A4=E9=A2=98?=
 =?UTF-8?q?=E7=BB=93=E6=9E=9C=E4=BB=8E=E6=8F=90=E4=BA=A4=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=B8=8B=E7=9A=84=E6=B5=AE=E5=B1=82=E6=8C=AA=E5=88=B0=E5=B7=A6?=
 =?UTF-8?q?=E6=A0=8F=E3=80=8C=E7=BB=93=E6=9E=9C=E3=80=8D=E9=A1=B5=E7=AD=BE?=
 =?UTF-8?q?=E2=80=94=E2=80=94=E6=94=B9=E4=BB=A3=E7=A0=81=E6=97=B6=E7=BB=93?=
 =?UTF-8?q?=E6=9E=9C=E5=B0=B1=E6=91=86=E5=9C=A8=E6=97=81=E8=BE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原来结果是提交按钮下面的 n-popover：点一下外面就收起、最高 600px、盖住编辑器，
学生没法一边看「正确输出 / 你的输出」一边改代码，还得靠「上次结果」按钮找回来。

- 左栏新增「结果」页签（手机上排在「代码」后面），交上去或者语法检查没过就自动切过去；
  页签标题带状态图标（✕ / ✓ / ! / 判题中转圈），不只靠颜色
- 页签用 show:lazy：切走不卸载，编辑器里的错误标记、AI 提示都留着
- 「题目描述」改叫「题目」；去掉浮层和「上次结果」按钮

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/oj/problem/components/ResultPane.vue  | 43 +++++++++++++
 .../oj/problem/components/ResultTabLabel.vue  | 60 ++++++++++++++++++
 .../problem/components/SubmissionEffects.vue  |  5 +-
 .../src/oj/problem/components/SubmitCode.vue  | 63 ++++---------------
 apps/web/src/oj/problem/detail.vue            | 34 ++++++++--
 apps/web/src/oj/store/submission.ts           | 22 ++++---
 6 files changed, 160 insertions(+), 67 deletions(-)
 create mode 100644 apps/web/src/oj/problem/components/ResultPane.vue
 create mode 100644 apps/web/src/oj/problem/components/ResultTabLabel.vue

diff --git a/apps/web/src/oj/problem/components/ResultPane.vue b/apps/web/src/oj/problem/components/ResultPane.vue
new file mode 100644
index 0000000..978f896
--- /dev/null
+++ b/apps/web/src/oj/problem/components/ResultPane.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia"
+import { useSubmissionStore } from "oj/store/submission"
+
+/**
+ * 左栏「结果」页签的内容：提交前语法检查没过的说明、这一次提交的判题结果，或者空状态。
+ *
+ * 原来是提交按钮下面的一个浮层（n-popover），点一下外面就收起、最高 600px、盖住编辑器，
+ * 学生没法一边看「正确输出 / 你的输出」一边改代码。放进左栏页签之后编辑器整列都在，
+ * 改代码时结果就摆在旁边（见 docs/specs/2026-09-28-problem-page-redesign-design.md）。
+ */
+
+// 第一次切到「结果」时才加载：它带着 DataTable 和 Markdown 渲染，只看题不提交的人不用付
+const SubmissionResult = defineAsyncComponent(() => import("./SubmissionResult.vue"))
+const PythonErrorExplain = defineAsyncComponent(() => import("./PythonErrorExplain.vue"))
+
+const { submission, syntaxErrorInfo } = storeToRefs(useSubmissionStore())
+</script>
+
+<template>
+  <div class="result-pane">
+    <n-flex v-if="syntaxErrorInfo" vertical>
+      <n-alert type="warning" title="代码有语法错误，还没有提交" />
+      <PythonErrorExplain :err-info="syntaxErrorInfo" />
+    </n-flex>
+    <SubmissionResult v-else-if="submission" :submission="submission" />
+    <n-empty
+      v-else
+      class="empty"
+      description="还没有提交过。写完代码按「提交代码」，结果会出现在这里"
+    />
+  </div>
+</template>
+
+<style scoped>
+.result-pane {
+  padding: 4px 0 16px;
+}
+
+.empty {
+  margin-top: 48px;
+}
+</style>
diff --git a/apps/web/src/oj/problem/components/ResultTabLabel.vue b/apps/web/src/oj/problem/components/ResultTabLabel.vue
new file mode 100644
index 0000000..478121b
--- /dev/null
+++ b/apps/web/src/oj/problem/components/ResultTabLabel.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Icon } from "@iconify/vue"
+import { useThemeVars } from "naive-ui"
+import { storeToRefs } from "pinia"
+import { useSubmissionStore } from "oj/store/submission"
+import { SubmissionStatus } from "utils/constants"
+
+/**
+ * 「结果」页签的标题：带上这一次的状态。用图标而不是一个彩色小圆点 ——
+ * 机房投影、色弱的学生只靠颜色分不出对错。
+ */
+
+const theme = useThemeVars()
+const { submission, syntaxErrorInfo, judging, pending, submitting } =
+  storeToRefs(useSubmissionStore())
+
+const status = computed(() => {
+  if (syntaxErrorInfo.value) return { icon: "ph:warning-bold", color: theme.value.warningColor }
+  if (!submission.value) return null
+  if (judging.value || pending.value || submitting.value)
+    return { icon: "ph:circle-notch-bold", color: theme.value.infoColor, spin: true }
+  const result = submission.value.result
+  if (result === SubmissionStatus.accepted)
+    return { icon: "ph:check-bold", color: theme.value.successColor }
+  if (result === SubmissionStatus.ast_check_failed)
+    return { icon: "ph:warning-bold", color: theme.value.warningColor }
+  return { icon: "ph:x-bold", color: theme.value.errorColor }
+})
+</script>
+
+<template>
+  <span class="label">
+    结果
+    <Icon
+      v-if="status"
+      :icon="status.icon"
+      :color="status.color"
+      :class="{ spin: status.spin }"
+      width="14"
+    />
+  </span>
+</template>
+
+<style scoped>
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/apps/web/src/oj/problem/components/SubmissionEffects.vue b/apps/web/src/oj/problem/components/SubmissionEffects.vue
index 6114280..717b5ea 100644
--- a/apps/web/src/oj/problem/components/SubmissionEffects.vue
+++ b/apps/web/src/oj/problem/components/SubmissionEffects.vue
@@ -73,9 +73,8 @@ function settleReview() {
 
 function closeCommentPanel() {
   commentPanel.value = false
-  // 点评价弹窗时，结果面板会当成「点了外面」收起来 —— 而「下一题」就在面板里
-  // （LessonNext），评价完得把它重新打开
-  submissionStore.showResult = true
+  // 「下一题」在结果页签里（LessonNext），评价完回到那里 —— 学生点评之前可能切去看了题目
+  submissionStore.revealResult()
   settleReview()
 }
 
diff --git a/apps/web/src/oj/problem/components/SubmitCode.vue b/apps/web/src/oj/problem/components/SubmitCode.vue
index b00338d..f7b98cb 100644
--- a/apps/web/src/oj/problem/components/SubmitCode.vue
+++ b/apps/web/src/oj/problem/components/SubmitCode.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Icon } from "@iconify/vue"
-import { storeToRefs } from "pinia"
 import { useCodeStore } from "oj/store/code"
 import { useSubmissionStore } from "oj/store/submission"
 import { getSubmitButtonState } from "./submitButtonState"
@@ -8,20 +7,14 @@ import { useBreakpoints } from "shared/composables/breakpoints"
 import { useUserStore } from "shared/store/user"
 
 /**
- * 提交按钮 + 结果面板。只管显示和把点击交给 store：提交的状态在 submission store，
- * 判完之后该发生的事（烟花、点评、回题单）在页面这一层的 SubmissionEffects ——
+ * 提交按钮。只把点击交给 store：提交的状态在 submission store，结果显示在左栏的
+ * 「结果」页签（ResultPane），判完之后该发生的事在页面这一层的 SubmissionEffects ——
  * 这个组件在编辑器的工具栏里，编辑器卸载时它也跟着卸载，所以什么都不能只存在这里。
  */
 
-// 结果面板第一次弹出（也就是第一次提交）时才加载：它带着 DataTable，而判题要等
-// 好几秒，这点下载时间藏得住。进页面就加载的话，只看题不提交的人也要付这笔
-const SubmissionResult = defineAsyncComponent(() => import("./SubmissionResult.vue"))
-const PythonErrorExplain = defineAsyncComponent(() => import("./PythonErrorExplain.vue"))
-
 const userStore = useUserStore()
 const codeStore = useCodeStore()
 const submissionStore = useSubmissionStore()
-const { submission, showResult, syntaxErrorInfo } = storeToRefs(submissionStore)
 const route = useRoute()
 
 const { isDesktop } = useBreakpoints()
@@ -47,51 +40,17 @@ function submit() {
 </script>
 
 <template>
-  <!-- 提交按钮 + 结果弹窗。
-       display-directive 默认是 "if"：面板一收起来整个 SubmissionResult 就被卸载。
-       AI 提示的内容现在在 store 里，卸了也不丢，但重新挂载要重渲染 Markdown、
-       重新拉一次「这节课的下一题」，留着更省事。 -->
-  <n-popover
-    trigger="manual"
-    display-directive="show"
-    placement="bottom-end"
-    scrollable
-    :show-arrow="false"
-    style="max-height: 600px"
-    :show="showResult"
-    @clickoutside="showResult = false"
-  >
-    <template #trigger>
-      <n-button
-        :size="isDesktop ? 'medium' : 'small'"
-        type="primary"
-        :disabled="buttonState.disabled"
-        @click="submit"
-      >
-        <template #icon>
-          <n-icon>
-            <Icon :icon="buttonState.icon" />
-          </n-icon>
-        </template>
-        {{ buttonState.label }}
-      </n-button>
-    </template>
-
-    <n-flex v-if="syntaxErrorInfo" vertical style="max-width: 560px">
-      <n-alert type="warning" title="代码有语法错误，还没有提交" />
-      <PythonErrorExplain :err-info="syntaxErrorInfo" />
-    </n-flex>
-    <SubmissionResult v-show="!syntaxErrorInfo" :submission="submission" />
-  </n-popover>
-
-  <!-- 结果面板点一下别处就收起来，而 showResult 只在提交时被置 true ——
-       原来唯一的重开方式是「再提交一次」，AI 提示读到一半去看眼题面就回不来了。
-       只在这次会话提交过之后才出现，没提交时工具栏保持原样。 -->
   <n-button
-    v-if="(submission || syntaxErrorInfo) && !showResult"
     :size="isDesktop ? 'medium' : 'small'"
-    @click="showResult = true"
+    type="primary"
+    :disabled="buttonState.disabled"
+    @click="submit"
   >
-    上次结果
+    <template #icon>
+      <n-icon>
+        <Icon :icon="buttonState.icon" />
+      </n-icon>
+    </template>
+    {{ buttonState.label }}
   </n-button>
 </template>
diff --git a/apps/web/src/oj/problem/detail.vue b/apps/web/src/oj/problem/detail.vue
index 7e5092e..68cb644 100644
--- a/apps/web/src/oj/problem/detail.vue
+++ b/apps/web/src/oj/problem/detail.vue
@@ -11,6 +11,7 @@ import { useSubmissionStore } from "oj/store/submission"
 import { useFlowchartStore } from "oj/store/flowchart"
 // 判完之后该发生的事（烟花、点评、回题单）。静态引入：它得在第一次判完之前就挂好
 import SubmissionEffects from "./components/SubmissionEffects.vue"
+import ResultTabLabel from "./components/ResultTabLabel.vue"
 
 // 抽成具名 loader，便于进页面时与接口并行预取编辑器 chunk。
 // 题库、比赛、题单三种入口用的是同一个编辑器：原来比赛和题单用的是另一个精简版，
@@ -25,6 +26,7 @@ const ProblemSubmission = defineAsyncComponent(() => import("./components/Proble
 const ProblemReaction = defineAsyncComponent(() => import("./components/ProblemReaction.vue"))
 const ProblemFlowchart = defineAsyncComponent(() => import("./components/ProblemFlowchart.vue"))
 const MyFlowchartTab = defineAsyncComponent(() => import("./components/MyFlowchartTab.vue"))
+const ResultPane = defineAsyncComponent(() => import("./components/ResultPane.vue"))
 
 interface Props {
   problemID: string
@@ -55,13 +57,15 @@ const canShowFlowchart = computed(
 )
 
 const tabOptions = computed(() => {
+  // 桌面上「结果」紧跟在「题目」后面；手机上编辑器也是一个页签，「结果」排在「代码」后面
   const options: string[] = ["content"]
+  if (!isMobile.value) options.push("result")
   if (canShowFlowchart.value) {
     options.push("flowchart")
   }
 
   if (isMobile.value) {
-    options.push("editor")
+    options.push("editor", "result")
   }
   options.push("info")
   if (!contestID) {
@@ -93,6 +97,18 @@ watch(currentTab, (tab) => {
   })
 })
 
+// 交上去、或者语法检查没过：切到「结果」。提交按钮在编辑器那边，页签归这一页管
+const submissionStore = useSubmissionStore()
+watch(
+  () => submissionStore.resultSeq,
+  () => {
+    currentTab.value = "result"
+  },
+)
+
+// 结果页签的标题带状态图标（ResultTabLabel），n-tab-pane 的 tab 接受渲染函数
+const resultTab = () => h(ResultTabLabel)
+
 watch(
   () => myFlowchartStore.showing,
   (showing) => {
@@ -175,9 +191,13 @@ watch(
       <template #1>
         <n-scrollbar style="height: 100%">
           <n-tabs v-model:value="currentTab" type="segment">
-            <n-tab-pane name="content" tab="题目描述">
+            <n-tab-pane name="content" tab="题目">
               <ProblemContent />
             </n-tab-pane>
+            <!-- 切走也不卸载：挂着的错误说明在编辑器里标着红，AI 提示也在渲染 -->
+            <n-tab-pane name="result" :tab="resultTab" display-directive="show:lazy">
+              <ResultPane />
+            </n-tab-pane>
             <n-tab-pane v-if="canShowFlowchart" name="flowchart" tab="流程图表">
               <ProblemFlowchart />
             </n-tab-pane>
@@ -210,9 +230,12 @@ watch(
     <template v-else-if="isDesktop && shouldShowProblem">
       <n-scrollbar style="max-height: calc(100vh - 92px)">
         <n-tabs v-model:value="currentTab" type="segment">
-          <n-tab-pane name="content" tab="题目描述">
+          <n-tab-pane name="content" tab="题目">
             <ProblemContent />
           </n-tab-pane>
+          <n-tab-pane name="result" :tab="resultTab" display-directive="show:lazy">
+            <ResultPane />
+          </n-tab-pane>
           <n-tab-pane v-if="canShowFlowchart" name="flowchart" tab="流程图表">
             <ProblemFlowchart />
           </n-tab-pane>
@@ -234,7 +257,7 @@ watch(
 
     <!-- Mobile -->
     <n-tabs v-else v-model:value="currentTab" type="segment">
-      <n-tab-pane name="content" tab="描述">
+      <n-tab-pane name="content" tab="题目">
         <ProblemContent />
       </n-tab-pane>
       <n-tab-pane v-if="canShowFlowchart" name="flowchart" tab="流程">
@@ -243,6 +266,9 @@ watch(
       <n-tab-pane name="editor" tab="代码">
         <ProblemEditor />
       </n-tab-pane>
+      <n-tab-pane name="result" :tab="resultTab" display-directive="show:lazy">
+        <ResultPane />
+      </n-tab-pane>
       <n-tab-pane name="info" tab="统计" :disabled="!!problemSetId">
         <ProblemInfo />
       </n-tab-pane>
diff --git a/apps/web/src/oj/store/submission.ts b/apps/web/src/oj/store/submission.ts
index 3f48d04..a4040a3 100644
--- a/apps/web/src/oj/store/submission.ts
+++ b/apps/web/src/oj/store/submission.ts
@@ -12,7 +12,7 @@ import type { SubmitCodePayload } from "utils/types"
 
 /**
  * 题目页上「这一次提交」的全部状态：正在跟的那条提交、判题跟踪（WebSocket + 轮询）、
- * 提交前语法检查的错误、结果面板开没开、5 秒冷却、AI 提示。
+ * 提交前语法检查的错误、5 秒冷却、AI 提示。
  *
  * 原来它们都长在提交按钮那个组件（SubmitCode）里，而那个组件在编辑器的工具栏里 ——
  * 手机上交完切到「描述」页签（Naive 的页签默认切走即卸载）、桌面切到「题目 / 自测」
@@ -30,8 +30,14 @@ export const useSubmissionStore = defineStore("submission", () => {
   const monitor = useSubmissionMonitor()
   const hint = useSubmissionHint()
 
-  /** 结果面板开着没有。放 store 里是为了按钮组件卸了再挂回来，面板还是原来的开合 */
-  const showResult = ref(false)
+  /**
+   * 有新结果要给学生看了（交上去、或者语法检查没过）就 +1。题目页看着它把左栏切到
+   * 「结果」页签 —— store 不管页签，只说「该看结果了」。
+   */
+  const resultSeq = ref(0)
+  function revealResult() {
+    resultSeq.value++
+  }
   const isFormatting = ref(false)
   const isSubmittingRequest = ref(false)
 
@@ -73,7 +79,7 @@ export const useSubmissionStore = defineStore("submission", () => {
         if (errorCode(e) === "syntax-error") {
           // 仅 Python 会出现：message 是 CPython 的报错原文，交给 PythonErrorExplain 翻译
           syntaxErrorInfo.value = errorMessage(e)
-          showResult.value = true
+          revealResult()
           return
         }
         // server-error / 网络异常：格式化工具问题，静默降级，提交原代码
@@ -111,19 +117,18 @@ export const useSubmissionStore = defineStore("submission", () => {
       // 3. 启动冷却 + 监控
       startCooldown()
       monitor.startMonitoring(res.submissionId)
-      showResult.value = true
+      revealResult()
     } finally {
       isSubmittingRequest.value = false
     }
   }
 
   /**
-   * 收掉这一道题的所有东西：结果面板、语法错误、还在跟的那条提交、AI 提示。
+   * 收掉这一道题的所有东西：语法错误、还在跟的那条提交、AI 提示。
    * 提交本身照常判完落库，只是这边不再跟 —— 不然上一道还在判的那条判完，
    * 会把**新题**标成已解决。
    */
   function reset() {
-    showResult.value = false
     syntaxErrorInfo.value = ""
     monitor.reset()
     hint.clearHint()
@@ -147,7 +152,8 @@ export const useSubmissionStore = defineStore("submission", () => {
     judging: monitor.judging,
     pending: monitor.pending,
     submitting: monitor.submitting,
-    showResult,
+    resultSeq,
+    revealResult,
     isFormatting,
     isSubmittingRequest,
     syntaxErrorInfo,