From 6b37a4de80d35c3ce494466b5347447d3d378b0a Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 4 Nov 2026 22:17:08 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=8F=90=E4=BA=A4=E8=AF=A6=E6=83=85):=20?=
 =?UTF-8?q?=E7=AD=94=E9=94=99=E6=97=B6=E7=9A=84=E4=BE=8B=E5=AD=90=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E6=8D=A2=E6=88=90=E6=96=B0=E6=A0=B7=E5=AD=90=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=89=E6=A0=BC=E6=A8=AA=E6=8E=92=E3=80=81=E4=B8=8D=E4=B8=80?=
 =?UTF-8?q?=E6=A0=B7=E7=9A=84=E9=82=A3=E8=A1=8C=E4=B8=A4=E8=BE=B9=E6=A0=87?=
 =?UTF-8?q?=E6=B5=85=E9=BB=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 和题目页结果页签同一套：黄色小节标题「例子 N 没对上」、正文大小的说明、输入灰 / 正确输出绿 / 学生的输出红
- 这一页一栏 1200 宽，三格横着并排，正确输出和学生的输出一行对一行，不一样的那行两边都垫浅黄
- 窄于 600（手机、课堂任务的弹窗）自动退回竖排

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../oj/problem/components/SampleRunResult.vue |  2 +-
 .../problem/components/SubmissionResult.vue   |  2 +-
 .../problem/components/WrongAnswerExplain.vue | 83 +++++++++++++++++--
 .../submission/components/SubmissionView.vue  | 10 ++-
 ...2026-09-28-problem-page-redesign-design.md |  3 +-
 5 files changed, 87 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/oj/problem/components/SampleRunResult.vue b/apps/web/src/oj/problem/components/SampleRunResult.vue
index e6cefb4..7914445 100644
--- a/apps/web/src/oj/problem/components/SampleRunResult.vue
+++ b/apps/web/src/oj/problem/components/SampleRunResult.vue
@@ -126,7 +126,7 @@ const current = computed(() => sampleRuns.value[selected.value] ?? null)
         :code="samplesCode?.value ?? ''"
         :language="samplesCode?.language ?? ''"
         :plain="inContest"
-        section
+        section="stack"
       />
       <!-- 没跑完：编译不过、运行出错、超时 -->
       <TrialErrorNote
diff --git a/apps/web/src/oj/problem/components/SubmissionResult.vue b/apps/web/src/oj/problem/components/SubmissionResult.vue
index 3b80ecd..9f72135 100644
--- a/apps/web/src/oj/problem/components/SubmissionResult.vue
+++ b/apps/web/src/oj/problem/components/SubmissionResult.vue
@@ -369,7 +369,7 @@ const columns: DataTableColumn<JudgeCaseResult>[] = [
       >
         <CompileErrorExplain v-if="compileError" :err-info="compileError" :language="submission.language" />
         <RuntimeErrorExplain v-if="runtimeError" :info="runtimeError" :code="submission.code" />
-        <WrongAnswerExplain v-if="sampleCheck" full section :check="sampleCheck" :code="submission.code" :language="submission.language" />
+        <WrongAnswerExplain v-if="sampleCheck" full section="stack" :check="sampleCheck" :code="submission.code" :language="submission.language" />
         <!-- 语法要求逐条对没对：和题面的「语法要求」同一个黄色小节标题 -->
         <section v-if="submission.statisticInfo?.ast_results?.length">
           <SectionHead icon="rules" tone="amber">语法要求</SectionHead>
diff --git a/apps/web/src/oj/problem/components/WrongAnswerExplain.vue b/apps/web/src/oj/problem/components/WrongAnswerExplain.vue
index faa3f81..f66784d 100644
--- a/apps/web/src/oj/problem/components/WrongAnswerExplain.vue
+++ b/apps/web/src/oj/problem/components/WrongAnswerExplain.vue
@@ -33,11 +33,14 @@ const props = defineProps<{
    */
   peer?: boolean
   /**
-   * 题目页结果页签的样子（设计稿「题目页观感」结果 X）：黄色小节标题说哪里不对，说明用正文大小，
-   * 输入 / 正确输出 / 你的输出竖着排成灰、绿、红三格，和题面的例子一个样子。
-   * 不给的话是原来那张浅灰卡片（提交详情页还在用）
+   * 新的样子（设计稿「题目页观感」结果 X）：黄色小节标题说哪里不对，说明用正文大小，
+   * 输入 / 正确输出 / 你的输出是灰、绿、红三格。
+   * - stack：三格竖着排，和题面的例子一个样子。题目页的结果页签用（左栏只有 500 多宽）
+   * - row：三格横着并排，正确输出和你的输出一行对一行，不一样的那行两边都垫一层浅黄。
+   *   提交详情页用（一栏 1200 宽，多行输出对照着看）；放不下（窄于 600，比如手机）就退回竖排
+   * 不给的话是原来那张浅灰卡片
    */
-  section?: boolean
+  section?: 'stack' | 'row'
 }>()
 
 const theme = useThemeVars()
@@ -121,7 +124,7 @@ function lines(text: string) {
 </script>
 
 <template>
-  <div :class="section ? 'explain-section' : 'explain-card'">
+  <div :class="section ? ['explain-section', section] : 'explain-card'">
     <template v-if="section">
       <SectionHead icon="problem" tone="amber">
         {{ check.passed ? '例子都对了，错在没给你看的测试点' : `例子 ${(check.index ?? 0) + 1} 没对上` }}
@@ -148,10 +151,10 @@ function lines(text: string) {
           <div class="label">正确输出</div>
           <div class="text">
             <template v-for="(line, i) in lines(check.expected ?? '')" :key="i">
-              <div v-if="i === diffLine && diffParts?.expected" class="line">
+              <div v-if="i === diffLine && diffParts?.expected" class="line hit">
                 <span v-text="diffParts.expected.before" /><span class="diff" v-text="diffParts.expected.marked" /><span v-text="diffParts.expected.after" />
               </div>
-              <div v-else class="line" v-text="line" />
+              <div v-else class="line" :class="{ hit: i === diffLine }" v-text="line" />
             </template>
           </div>
         </div>
@@ -159,10 +162,10 @@ function lines(text: string) {
           <div class="label">{{ peer ? '学生' : '你' }}的输出</div>
           <div v-if="check.output" class="text">
             <template v-for="(line, i) in lines(check.output)" :key="i">
-              <div v-if="i === diffLine && diffParts?.output" class="line">
+              <div v-if="i === diffLine && diffParts?.output" class="line hit">
                 <span v-text="diffParts.output.before" /><span class="diff" v-text="diffParts.output.marked" /><span v-text="diffParts.output.after" />
               </div>
-              <div v-else class="line" v-text="line" />
+              <div v-else class="line" :class="{ hit: i === diffLine }" v-text="line" />
             </template>
           </div>
           <div v-else class="text empty">（什么都没有输出）</div>
@@ -336,4 +339,66 @@ function lines(text: string) {
   font-size: 14px;
   color: v-bind('theme.textColor3');
 }
+
+/*
+ * 横排（row，提交详情页）：三格并排，标签在格子上面；行的左右留白挪到每一行上，
+ * 不一样的那行垫的浅黄才能铺满整格宽、两边对齐
+ */
+.explain-section.row {
+  container: explain-row / inline-size;
+}
+
+.explain-section.row .blocks {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.explain-section.row .block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+}
+
+.explain-section.row .label {
+  line-height: 1.5;
+}
+
+.explain-section.row .text {
+  padding: 6px 0;
+  line-height: 26px;
+}
+
+.explain-section.row .line {
+  min-height: 26px;
+  padding: 0 12px;
+}
+
+.explain-section.row .text.empty {
+  padding: 6px 12px;
+}
+
+.explain-section.row .line.hit {
+  background-color: rgba(227, 160, 8, 0.14);
+}
+
+/* 放不下三格（窄于 600：手机、课堂任务的弹窗）就退回竖排 */
+@container explain-row (max-width: 600px) {
+  .explain-section.row .blocks {
+    grid-template-columns: 64px minmax(0, 1fr);
+    gap: 6px 8px;
+  }
+
+  .explain-section.row .block {
+    display: contents;
+  }
+
+  .explain-section.row .label {
+    line-height: 36px;
+  }
+}
 </style>
diff --git a/apps/web/src/oj/submission/components/SubmissionView.vue b/apps/web/src/oj/submission/components/SubmissionView.vue
index 084e731..b22637e 100644
--- a/apps/web/src/oj/submission/components/SubmissionView.vue
+++ b/apps/web/src/oj/submission/components/SubmissionView.vue
@@ -310,7 +310,15 @@ function handleMore(key: string) {
         class="code"
       />
 
-      <WrongAnswerExplain v-if="sampleCheck" :check="sampleCheck" :code="shown.code" :language="shown.language" :plain="!!shown.contestId" :peer="!own" />
+      <WrongAnswerExplain
+        v-if="sampleCheck"
+        section="row"
+        :check="sampleCheck"
+        :code="shown.code"
+        :language="shown.language"
+        :plain="!!shown.contestId"
+        :peer="!own"
+      />
       <ExplainNote v-else-if="explain" :explain="explain" :tone="explainTone" />
     </template>
 
diff --git a/docs/specs/2026-09-28-problem-page-redesign-design.md b/docs/specs/2026-09-28-problem-page-redesign-design.md
index 3a4cd3d..5e4fcee 100644
--- a/docs/specs/2026-09-28-problem-page-redesign-design.md
+++ b/docs/specs/2026-09-28-problem-page-redesign-design.md
@@ -170,7 +170,8 @@ B 看得到。
 例子对比竖着排成灰（输入）/ 绿（正确输出）/ 红（你的输出）三格，和题面的例子一个样子；
 运行时错误把出错那一行代码放进红格。「让 AI 分析我的代码」「用这组数据运行」是浅绿底按钮。
 做对了是「接着做」一节 + 写着下一题题号题名的大按钮（原来的浅绿卡片去掉了，竖栏里已经有进度）。
-提交详情页的答错对比（`WrongAnswerExplain` 不带 `section`）还是原来那张浅灰卡片。
+提交详情页的答错对比同一套颜色和标题，但三格**横着并排**（`section="row"`）：那一页一栏 1200 宽，
+正确输出和学生的输出一行对一行，不一样的那行两边垫浅黄；窄于 600（手机、课堂任务的弹窗）退回竖排。
 
 - **自动切换**：点「运行例子」「提交」或流程图「交给 AI 点评」后，自动切到「结果」对应的分段。
 - **页签上的状态**：✕ 错了 / ✓ 对了 / ! 没交上（语法没过）；用图标，不用 7px 的彩点。