feat(题目列表): 学生自己挑题时只看得到一堆标签和提交数，不知道自己练到哪了——改成左栏知识点进度、顶上先说做到了什么
Deploy / deploy (push) Canceled after 0s
Deploy / deploy (push) Canceled after 0s
- 左栏是知识点（可切到主题）和自己的进度：做了一部分写 37/96 加进度条，全做对写「通关」， 一道没做对过的只写题数，不再是一整列 0/108 - 顶上一行：做对几道 · 这周 +n（或连续几周都有做对）· 离哪个成就最近 ·「有 n 道差一点」 （点开才列出来）；新生引去「输出入门」；一言照旧在右边 - 每题最后一列是做对 / 做过的人数，代替提交数和按提交算的通过率（和题目页统计同一个口径） - 「画流程图 / 语法要求 / 有参考图」挂在题目名后面，「全部类型」下拉单独筛这三类， 不再混在排序里；题目页的「代码要求」统一叫「语法要求」 - 「只看没做完」开关（默认关）、「随便来一道」（当前知识点里先挑没做对的简单 / 中等题） - 画流程图的题，流程图评到 A / S 在状态列也打勾，和题单、课堂条一个口径 - 老师看不到状态列和个人进度；出题者筛选保留 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
1ba8928d41
commit
ed7752afbb
14 files changed
+2083
-339
No files matched your search
@@ -0,0 +1,235 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from "@iconify/vue"
|
||||
import type { ProblemProgress } from "@oj2/contract"
|
||||
import { useThemeVars } from "naive-ui"
|
||||
import AchievementIcon from "shared/components/AchievementIcon.vue"
|
||||
import { useTone } from "oj/submission/composables/tone"
|
||||
|
||||
/**
|
||||
* 题目列表顶上那行的左半边：先说做到了什么（设计稿「题目列表重设计 · 改版」）。
|
||||
* 做对几道 · 这周新做对几道（这周还没有就说连续几周）· 离哪个成就最近 · 有几道差一点。
|
||||
* 没做对的题不常驻在这里：大多数学生一道「差一点」都没有（快照里 64%），常驻的话
|
||||
* 这行就只剩一言；有的人看见一排红色也是压力。点「差一点」才弹出来看。
|
||||
*/
|
||||
const props = defineProps<{
|
||||
progress: ProblemProgress
|
||||
/** 一道还没做对时引去的知识点（「输出入门」），没有这个标签就是 null */
|
||||
startTag: { name: string; problemCount: number } | null
|
||||
compact?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{ selectTag: [name: string] }>()
|
||||
|
||||
const theme = useThemeVars()
|
||||
const tone = useTone()
|
||||
|
||||
const remaining = computed(() =>
|
||||
props.progress.next ? props.progress.next.threshold - props.progress.next.progress : 0,
|
||||
)
|
||||
|
||||
/** 离成就还差什么，按指标换说法 */
|
||||
const nextText = computed(() => {
|
||||
const next = props.progress.next
|
||||
if (!next) return ""
|
||||
const r = remaining.value
|
||||
switch (next.metric) {
|
||||
case "accepted_count":
|
||||
return next.progress === 0 ? "做对第一道题就解锁" : `再做对 ${r} 道就解锁`
|
||||
case "mid_ac_count":
|
||||
return `再做对 ${r} 道中等题就解锁`
|
||||
case "hard_ac_count":
|
||||
return `再做对 ${r} 道困难题就解锁`
|
||||
case "active_days":
|
||||
return `再来 ${r} 天就解锁`
|
||||
case "max_ac_week_streak":
|
||||
return `连续 ${next.threshold} 周有做对就解锁`
|
||||
default:
|
||||
return `还差 ${r} 就解锁`
|
||||
}
|
||||
})
|
||||
|
||||
const weekChip = computed(() => {
|
||||
const p = props.progress
|
||||
if (p.weekSolved > 0) return `这周 +${p.weekSolved}`
|
||||
if (p.weekStreak >= 2) return `连续 ${p.weekStreak} 周都有做对`
|
||||
return ""
|
||||
})
|
||||
|
||||
// 弹层在 body 下面，样式里的 v-bind 变量够不着，主题色就地给
|
||||
const listVars = computed(() => ({
|
||||
"--list-text": theme.value.textColor1,
|
||||
"--list-id": theme.value.textColor3,
|
||||
"--list-hover": theme.value.hoverColor,
|
||||
}))
|
||||
|
||||
const fresh = computed(() => props.progress.solved === 0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="progress-row" :class="{ compact }">
|
||||
<template v-if="!fresh">
|
||||
<span class="total">
|
||||
你做对了<b>{{ progress.solved }}</b
|
||||
>道题
|
||||
</span>
|
||||
<span v-if="weekChip" class="chip">{{ weekChip }}</span>
|
||||
</template>
|
||||
<i v-if="!fresh && progress.next" class="sep"></i>
|
||||
<RouterLink v-if="progress.next" to="/achievement" class="next" title="去看我的成就">
|
||||
<AchievementIcon :icon="progress.next.icon" :size="16" />
|
||||
<span>
|
||||
{{ nextText }}<b>「{{ progress.next.name }}」</b>
|
||||
</span>
|
||||
</RouterLink>
|
||||
<button v-if="fresh && startTag" class="start" @click="emit('selectTag', startTag.name)">
|
||||
从「{{ startTag.name }}」开始，一共 {{ startTag.problemCount }} 道
|
||||
<Icon icon="ph:caret-right-bold" :width="12" />
|
||||
</button>
|
||||
<i v-if="!fresh && progress.almost.length" class="sep"></i>
|
||||
<n-popover v-if="!fresh && progress.almost.length" trigger="click" placement="bottom-start">
|
||||
<template #trigger>
|
||||
<button class="almost">
|
||||
有 {{ progress.almost.length }} 道差一点
|
||||
<Icon icon="ph:caret-right-bold" :width="12" />
|
||||
</button>
|
||||
</template>
|
||||
<div class="almost-list" :style="listVars">
|
||||
<RouterLink
|
||||
v-for="p in progress.almost"
|
||||
:key="p._id"
|
||||
:to="'/problem/' + p._id"
|
||||
class="almost-item"
|
||||
>
|
||||
<span class="id">{{ p._id }}</span>
|
||||
{{ p.title }}
|
||||
</RouterLink>
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.progress-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
color: v-bind("theme.textColor2");
|
||||
}
|
||||
|
||||
.sep {
|
||||
flex: none;
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: v-bind("theme.dividerColor");
|
||||
}
|
||||
|
||||
.progress-row.compact {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 10px;
|
||||
}
|
||||
|
||||
.progress-row.compact .sep {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.total {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.total b {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: v-bind("theme.successColor");
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.chip {
|
||||
height: 24px;
|
||||
padding: 0 9px;
|
||||
border-radius: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
background: v-bind("tone('success').background");
|
||||
color: v-bind("tone('success').color");
|
||||
}
|
||||
|
||||
.next {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: v-bind("theme.textColor2");
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.next b {
|
||||
font-weight: 600;
|
||||
color: v-bind("theme.textColor1");
|
||||
}
|
||||
|
||||
.next:hover b {
|
||||
color: v-bind("theme.primaryColor");
|
||||
}
|
||||
|
||||
.almost {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
color: v-bind("theme.textColor3");
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.almost:hover {
|
||||
color: v-bind("theme.primaryColor");
|
||||
}
|
||||
|
||||
.start {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border: 0;
|
||||
border-radius: 14px;
|
||||
background: v-bind("theme.primaryColor");
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.almost-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 320px;
|
||||
overflow-y: auto;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.almost-item {
|
||||
padding: 6px 4px;
|
||||
border-radius: 4px;
|
||||
color: var(--list-text);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.almost-item:hover {
|
||||
background: var(--list-hover);
|
||||
}
|
||||
|
||||
.almost-item .id {
|
||||
margin-right: 6px;
|
||||
color: var(--list-id);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user