xuyueandClaude Opus 5.5
c64b0a402b
- 七个选项不变，排成 4 + 3 的大按钮（表情 + 15px 的字）。原来的轮盘要把鼠标移到扇区上 才看得清，每块的字只有 12px 左右；还用了 Chrome 111 才有的 color-mix()，机房 105 那档 渲染不出扇区底色 - 选之前不显示「N 人选择」，免得跟风；选完换成横条图，标出自己选的那一项 - 防误触：弹出后 600ms 内点不了，强制弹窗里不响应 Enter / 空格，也不预选任何一项 - 选完弹窗不马上关，下面只有一个按钮、焦点就在上面：这节课的「下一题」，或者刚才被拦下 的换题「继续」，都没有就是「好的」 - 标题从「恭喜你成功提交」改成「做对了！」：交上去不等于做对 - 提交失败留在弹窗里提示「没记上，再点一次」；没做对的人在抽屉里只看到一句说明 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<script setup lang="ts">
|
||
import { useLessonStore } from "oj/store/lesson"
|
||
|
||
/**
|
||
* 通过之后告诉学生「这节课的下一题是哪道」。
|
||
*
|
||
* 72% 的提交一次就通过，每次通过之后学生都得回首页、或者再问一遍题号去找下一道。
|
||
* 这节课的题就是首页「班里在做」那几道，和左栏顶上的课堂条读同一份（lesson store）；
|
||
* 通过的那一刻课堂条已经把这道标成做完、并且重拉了一次。
|
||
*
|
||
* 「下一道」怎么算见 lesson store 的 nextAfter，AC 后的点评弹窗里那个「下一题」也用它。
|
||
*
|
||
* 这道题不在这节课的列表里（学生在做别的）就什么都不显示。
|
||
*/
|
||
const props = defineProps<{
|
||
/** 当前这道题的展示题号 */
|
||
problemDisplayId: string
|
||
}>()
|
||
|
||
const lessonStore = useLessonStore()
|
||
|
||
// 一般课堂条早就拉过了，这里只是兜底（旧了才拉）
|
||
onMounted(() => lessonStore.load())
|
||
|
||
const lesson = computed(() => lessonStore.nextAfter(props.problemDisplayId))
|
||
|
||
const label = computed(() => lessonStore.label)
|
||
</script>
|
||
|
||
<template>
|
||
<n-card v-if="lesson" size="small" embedded class="lesson-next">
|
||
<n-flex v-if="lesson.next" align="center" justify="space-between" :wrap="false">
|
||
<n-text depth="3">{{ label }}还剩 {{ lesson.remaining }} 道</n-text>
|
||
<router-link :to="`/problem/${lesson.next.problemDisplayId}`">
|
||
<n-button type="primary">
|
||
下一题：{{ lesson.next.problemDisplayId }} {{ lesson.next.title }}
|
||
</n-button>
|
||
</router-link>
|
||
</n-flex>
|
||
<n-flex v-else align="center" justify="space-between">
|
||
<n-text>{{ label }}都做完了，一共 {{ lesson.total }} 道 🎉</n-text>
|
||
<router-link to="/problemset">
|
||
<n-button secondary>去题单继续练</n-button>
|
||
</router-link>
|
||
</n-flex>
|
||
</n-card>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.lesson-next {
|
||
margin-top: 12px;
|
||
max-width: 560px;
|
||
}
|
||
|
||
/* 题目名可能很长（带 emoji 的、二十几个字的），按钮别把结果面板撑宽 */
|
||
.lesson-next :deep(.n-button__content) {
|
||
display: block;
|
||
max-width: 320px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
</style>
|