feat(题目): 例子摆成一张「输入 | 输出」的表，三个例子不再占掉大半屏
原来每个例子各占一个小标题加两个框，三个例子就把输入输出说明挤出了一屏； 现在一行一个例子、输入输出对齐，每格右上角带复制。「自己输入数据试试」留在表头旁边 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
6a0f6399b7
commit
948e9a734d
2 files changed
+70
-30
No files matched your search
@@ -240,15 +240,17 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<template v-if="!isSQL">
|
<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">
|
<n-flex align="center" justify="space-between" class="sample-head">
|
||||||
<h3 class="title">
|
<h3 class="title">
|
||||||
<Icon icon="streamline-emojis:microscope"></Icon>
|
<Icon icon="streamline-emojis:microscope"></Icon>
|
||||||
例子 {{ index + 1 }}
|
例子
|
||||||
</h3>
|
</h3>
|
||||||
<!-- 只在第一个例子旁放一个入口：每个都放就成了一排一样的链接 -->
|
|
||||||
<n-button
|
<n-button
|
||||||
v-if="index === 0"
|
|
||||||
text
|
text
|
||||||
type="primary"
|
type="primary"
|
||||||
size="small"
|
size="small"
|
||||||
@@ -257,20 +259,22 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
|
|||||||
自己输入数据试试 ›
|
自己输入数据试试 ›
|
||||||
</n-button>
|
</n-button>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
<div class="sample-grid">
|
<div class="sample-table" role="table" aria-label="例子">
|
||||||
<div class="sample-box">
|
<div class="sample-row sample-header" role="row">
|
||||||
<n-flex align="center" justify="space-between" class="sample-label">
|
<span role="columnheader"></span>
|
||||||
<span>输入</span>
|
<span role="columnheader">输入</span>
|
||||||
<Copy :value="sample.input" />
|
<span role="columnheader">输出</span>
|
||||||
</n-flex>
|
|
||||||
<pre class="testcase">{{ sample.input }}</pre>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="sample-box">
|
<div v-for="(sample, index) of samples" :key="index" class="sample-row" role="row">
|
||||||
<n-flex align="center" justify="space-between" class="sample-label">
|
<span class="sample-no" role="rowheader">{{ index + 1 }}</span>
|
||||||
<span>输出</span>
|
<div class="sample-cell" role="cell">
|
||||||
<Copy :value="sample.output" />
|
<pre class="testcase">{{ sample.input }}</pre>
|
||||||
</n-flex>
|
<span class="sample-copy"><Copy :value="sample.input" /></span>
|
||||||
<pre class="testcase">{{ sample.output }}</pre>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -471,23 +475,59 @@ const astRequirements = computed(() => Object.entries(problem.value?.astRequirem
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sample-grid {
|
.sample-table {
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
flex-direction: column;
|
||||||
gap: 8px;
|
border: 1px solid rgba(128, 128, 128, 0.2);
|
||||||
}
|
|
||||||
|
|
||||||
.sample-box {
|
|
||||||
min-width: 0;
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background-color: rgba(128, 128, 128, 0.08);
|
overflow: hidden;
|
||||||
padding: 6px 10px 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
font-size: 12px;
|
||||||
opacity: 0.7;
|
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 {
|
.testcase {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
# OJ2 设计文档：题目详情页重设计
|
# OJ2 设计文档：题目详情页重设计
|
||||||
|
|
||||||
日期：2026-09-28
|
日期：2026-09-28
|
||||||
状态：**设计已定，第 14 节的 1–4 步和第 7 节已实施**（还没做：5.5 的「我的提交」行内展开与「放回编辑器」、5.2 的例子表格）。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
|
状态：**设计已定，第 14 节的 1–4 步和第 7 节已实施**。效果图在 claude.ai 的私有画布「题目详情页重设计」里（「机房（方案 B）」
|
||||||
那一页是定稿，「初稿 1280×800」那一页已作废，只留着对照）。效果图表达不了的规则都写在这里，
|
那一页是定稿，「初稿 1280×800」那一页已作废，只留着对照）。效果图表达不了的规则都写在这里，
|
||||||
**实施时以本文为准**。
|
**实施时以本文为准**。
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user