style(题目): 题目页照设计稿「机房（方案 B）」重排——顶满的两栏、带底色的上下文条、下划线页签、新的结果和题面样式
Deploy / deploy (push) Canceled after 0s
Deploy / deploy (push) Canceled after 0s
原来实施时只照了设计文档，没对照设计稿，一路套 Naive 现成的分段页签、提示框、单选组， 功能对了、样子差很多。这次逐块对着设计稿的画板改： - 两栏顶满内容区，中间一条 1px 分隔线；上下文条、页签行、工具栏下面各一道分隔线 - 上下文条：课堂浅绿、题单浅蓝、比赛浅黄三种底色；‹ › 是不带边框的箭头；比赛的题号是方角、 做错的是红色 ✕；手机上不摆一排题号，写「这节课 做完 2/5 · 这是第 3 道」配 44px 的箭头 - 「题目 / 结果」是下划线页签，右边「统计 / 点评 / 我的提交」是胶囊按钮 - 抽屉盖住整个左栏（连上下文条、页签行），顶上有自己的「我的提交 / 统计 / 点评」页签，Esc 能关 - 结果页签：三个分段是胶囊，选中的深色实心、带时间（「提交结果 · 10:42」）；标题是圆形图标 + 大字 + 灰字（「答案错误 在例子 1 上就错了」），不再套整块彩色提示框；答错的对比三栏并排、 只把不一样的那几个字标红；「题目要求的输出」是一行小字；「让 AI 分析我的代码」是描边按钮； 答对后的「下一题」是浅绿卡片里 44px 的大按钮 - 工具栏：语言、运行例子（描边）、提交（实心，就叫「提交」）靠左，求助、⋯ 推到最右； 交对之后「提交」变成绿色描边；协作条换成设计稿的深蓝 - 题面：标题下「简单 · 还没交过」，流程图过关的加「流程图 A 级」；代码要求压成一行； 小标题不带图标；输入、输出左右两栏；参考流程图是一行可以点开的条；例子表带「例子 1」和「复制」 - 去掉「限时 1 秒」：执行时间、内存对中职学生只会添迷惑（和设计稿不同，用户定的） - 我的提交：一整块带框的列表，结果用彩色文字；展开的代码先露 5 行；题单锁住的几次合成一行 - 错在隐藏测试点时「去自己输入」给的数跳过例子里出现过的 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
83b6b7a81a
commit
1fd9bf67c2
17 files changed
+1800
-706
No files matched your search
@@ -4,6 +4,9 @@ import { useProblemStore } from "oj/store/problem"
|
||||
import { useSubmissionStore } from "oj/store/submission"
|
||||
import { useCodeStore } from "oj/store/code"
|
||||
import { useTeacherCollab } from "../composables/teacherCollab"
|
||||
import { useThemeVars } from "naive-ui"
|
||||
import { parseTime } from "utils/functions"
|
||||
import ResultHeader from "./ResultHeader.vue"
|
||||
|
||||
/**
|
||||
* 左栏「结果」页签：三段 —— 提交结果 / 运行例子 / 自己输入。
|
||||
@@ -31,6 +34,28 @@ const codeStore = useCodeStore()
|
||||
/** 协作中的老师自己还没交过：先摆学生最近一次交的 */
|
||||
const teacherCollab = useTeacherCollab()
|
||||
|
||||
const theme = useThemeVars()
|
||||
const { samplesRunAt } = submissionStore.trial
|
||||
|
||||
type Segment = "submit" | "samples" | "custom"
|
||||
const segments = computed<{ value: Segment; label: string; time: string }[]>(() => [
|
||||
{
|
||||
value: "submit",
|
||||
// 语法没过就没交上去：那一段不叫「提交结果」
|
||||
label: syntaxErrorInfo.value ? "交之前检查" : "提交结果",
|
||||
time:
|
||||
!syntaxErrorInfo.value && submission.value?.createTime
|
||||
? parseTime(submission.value.createTime, "HH:mm")
|
||||
: "",
|
||||
},
|
||||
{
|
||||
value: "samples",
|
||||
label: "运行例子",
|
||||
time: samplesRunAt.value ? parseTime(samplesRunAt.value, "HH:mm") : "",
|
||||
},
|
||||
{ value: "custom", label: "自己输入", time: "" },
|
||||
])
|
||||
|
||||
/** 正在画流程图：结果就是 AI 的点评，没有例子可跑 */
|
||||
const drawing = computed(() => codeStore.code.language === "Flowchart")
|
||||
|
||||
@@ -44,21 +69,28 @@ const canTrial = computed(() => {
|
||||
<template>
|
||||
<FlowchartResult v-if="drawing" />
|
||||
<div v-show="!drawing" class="result-pane">
|
||||
<n-radio-group v-if="canTrial" v-model:value="resultSegment" size="small" class="segments">
|
||||
<!-- 语法没过就没交上去：那一段不叫「提交结果」 -->
|
||||
<n-radio-button value="submit">{{
|
||||
syntaxErrorInfo ? "交之前检查" : "提交结果"
|
||||
}}</n-radio-button>
|
||||
<n-radio-button value="samples">运行例子</n-radio-button>
|
||||
<n-radio-button value="custom">自己输入</n-radio-button>
|
||||
</n-radio-group>
|
||||
<!-- 设计稿：三个胶囊，选中的深色实心，带上那次结果的时间 -->
|
||||
<div v-if="canTrial" class="segments" role="tablist" aria-label="结果">
|
||||
<button
|
||||
v-for="segment in segments"
|
||||
:key="segment.value"
|
||||
type="button"
|
||||
role="tab"
|
||||
class="segment"
|
||||
:class="{ active: resultSegment === segment.value }"
|
||||
:aria-selected="resultSegment === segment.value"
|
||||
@click="resultSegment = segment.value"
|
||||
>
|
||||
{{ segment.label }}<template v-if="segment.time"> · {{ segment.time }}</template>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 提交结果用 v-show：切去看运行例子时不卸载，挂着的错误说明在编辑器里标着红 -->
|
||||
<div v-show="resultSegment === 'submit' || !canTrial">
|
||||
<n-flex v-if="syntaxErrorInfo" vertical>
|
||||
<n-alert type="warning" title="代码有语法错误，还没有交上去" />
|
||||
<template v-if="syntaxErrorInfo">
|
||||
<ResultHeader kind="warning" title="代码有语法错误，还没有交上去" />
|
||||
<PythonErrorExplain :err-info="syntaxErrorInfo" />
|
||||
</n-flex>
|
||||
</template>
|
||||
<template v-else-if="submission">
|
||||
<p v-if="formattedBeforeSubmit" class="formatted">
|
||||
提交之前自动整理了代码格式（缩进、空格），编辑器里的代码也跟着变了，按 Ctrl+Z 能撤回
|
||||
@@ -69,7 +101,7 @@ const canTrial = computed(() => {
|
||||
<n-empty
|
||||
v-else
|
||||
class="empty"
|
||||
description="还没有提交过。写完代码按「提交代码」，结果会出现在这里"
|
||||
description="还没有提交过。写完代码按「提交」，结果会出现在这里"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="canTrial">
|
||||
@@ -81,13 +113,33 @@ const canTrial = computed(() => {
|
||||
|
||||
<style scoped>
|
||||
.result-pane {
|
||||
padding: 4px 0 16px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.segments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.segment {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(128, 128, 128, 0.12);
|
||||
color: v-bind("theme.textColor2");
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segment.active {
|
||||
background-color: v-bind("theme.textColor1");
|
||||
color: v-bind("theme.cardColor");
|
||||
}
|
||||
|
||||
.formatted {
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
|
||||
Reference in new issue
Block a user