feat(题目): 例子摆成一张「输入 | 输出」的表，三个例子不再占掉大半屏

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

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

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 {

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」那一页已作废，只留着对照）。效果图表达不了的规则都写在这里，
 **实施时以本文为准**。