From 948e9a734d7de22475c47b4357eb53d8f4dd98de Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Mon, 28 Sep 2026 17:48:13 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E9=A2=98=E7=9B=AE):=20=E4=BE=8B=E5=AD=90?=
 =?UTF-8?q?=E6=91=86=E6=88=90=E4=B8=80=E5=BC=A0=E3=80=8C=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=20|=20=E8=BE=93=E5=87=BA=E3=80=8D=E7=9A=84=E8=A1=A8=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=89=E4=B8=AA=E4=BE=8B=E5=AD=90=E4=B8=8D=E5=86=8D=E5=8D=A0?=
 =?UTF-8?q?=E6=8E=89=E5=A4=A7=E5=8D=8A=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原来每个例子各占一个小标题加两个框，三个例子就把输入输出说明挤出了一屏；
现在一行一个例子、输入输出对齐，每格右上角带复制。「自己输入数据试试」留在表头旁边

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../oj/problem/components/ProblemContent.vue  | 98 +++++++++++++------
 ...2026-09-28-problem-page-redesign-design.md |  2 +-
 2 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/apps/web/src/oj/problem/components/ProblemContent.vue b/apps/web/src/oj/problem/components/ProblemContent.vue
index b0f3301..6da06e7 100644
--- a/apps/web/src/oj/problem/components/ProblemContent.vue
+++ b/apps/web/src/oj/problem/components/ProblemContent.vue
@@ -240,15 +240,17 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
     </section>
 
     <template v-if="!isSQL">
-      <section v-for="(sample, index) of samples" :key="index" class="sample">
+      <!--
+        例子是一张表：例子 N | 输入 | 输出。原来每个例子各占一个小标题加两个框，三个例子
+        就占掉大半屏；Python 的例子大多一两行，摆成表一眼能对上「这个输入 → 这个输出」
+      -->
+      <section v-if="samples.length" class="sample">
         <n-flex align="center" justify="space-between" class="sample-head">
           <h3 class="title">
             <Icon icon="streamline-emojis:microscope"></Icon>
-            例子 {{ index + 1 }}
+            例子
           </h3>
-          <!-- 只在第一个例子旁放一个入口：每个都放就成了一排一样的链接 -->
           <n-button
-            v-if="index === 0"
             text
             type="primary"
             size="small"
@@ -257,20 +259,22 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
             自己输入数据试试 ›
           </n-button>
         </n-flex>
-        <div class="sample-grid">
-          <div class="sample-box">
-            <n-flex align="center" justify="space-between" class="sample-label">
-              <span>输入</span>
-              <Copy :value="sample.input" />
-            </n-flex>
-            <pre class="testcase">{{ sample.input }}</pre>
+        <div class="sample-table" role="table" aria-label="例子">
+          <div class="sample-row sample-header" role="row">
+            <span role="columnheader"></span>
+            <span role="columnheader">输入</span>
+            <span role="columnheader">输出</span>
           </div>
-          <div class="sample-box">
-            <n-flex align="center" justify="space-between" class="sample-label">
-              <span>输出</span>
-              <Copy :value="sample.output" />
-            </n-flex>
-            <pre class="testcase">{{ sample.output }}</pre>
+          <div v-for="(sample, index) of samples" :key="index" class="sample-row" role="row">
+            <span class="sample-no" role="rowheader">{{ index + 1 }}</span>
+            <div class="sample-cell" role="cell">
+              <pre class="testcase">{{ sample.input }}</pre>
+              <span class="sample-copy"><Copy :value="sample.input" /></span>
+            </div>
+            <div class="sample-cell" role="cell">
+              <pre class="testcase">{{ sample.output }}</pre>
+              <span class="sample-copy"><Copy :value="sample.output" /></span>
+            </div>
           </div>
         </div>
       </section>
@@ -471,23 +475,59 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
   margin: 0;
 }
 
-.sample-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 8px;
-}
-
-.sample-box {
-  min-width: 0;
+.sample-table {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(128, 128, 128, 0.2);
   border-radius: 6px;
-  background-color: rgba(128, 128, 128, 0.08);
-  padding: 6px 10px 10px;
+  overflow: hidden;
 }
 
-.sample-label {
+.sample-row {
+  display: grid;
+  grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.sample-row + .sample-row {
+  border-top: 1px solid rgba(128, 128, 128, 0.2);
+}
+
+.sample-header {
   font-size: 12px;
   opacity: 0.7;
-  margin-bottom: 4px;
+  background-color: rgba(128, 128, 128, 0.06);
+}
+
+.sample-header > span {
+  padding: 4px 10px;
+}
+
+.sample-no {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  opacity: 0.6;
+  font-variant-numeric: tabular-nums;
+  background-color: rgba(128, 128, 128, 0.06);
+}
+
+.sample-cell {
+  position: relative;
+  min-width: 0;
+  padding: 6px 30px 6px 10px;
+}
+
+.sample-cell + .sample-cell {
+  border-left: 1px solid rgba(128, 128, 128, 0.2);
+}
+
+/* Copy 的根是 n-tooltip，class 挂不上去，所以外面包一层 span 来定位 */
+.sample-copy {
+  position: absolute;
+  top: 5px;
+  right: 6px;
+  display: flex;
 }
 
 .testcase {
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 baf4d08..d0f0fa4 100644
--- a/docs/specs/2026-09-28-problem-page-redesign-design.md
+++ b/docs/specs/2026-09-28-problem-page-redesign-design.md
@@ -1,7 +1,7 @@
 # OJ2 设计文档：题目详情页重设计
 
 日期：2026-09-28
-状态：**设计已定，第 14 节的 1–4 步和第 7 节已实施**（还没做：5.5 的「我的提交」行内展开与「放回编辑器」、5.2 的例子表格）。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
+状态：**设计已定，第 14 节的 1–4 步和第 7 节已实施**。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
 那一页是定稿，「初稿 1280×800」那一页已作废，只留着对照）。效果图表达不了的规则都写在这里，
 **实施时以本文为准**。