feat: 改版阶段 4：挑战列表页、教程按小节存代码、出题页合并、用户管理、整站暗色
Deploy / deploy (build, debian, 22) (push) Canceled after 0s
Deploy / deploy (build, debian, 22) (push) Canceled after 0s
- 挑战列表改成独立页面（ChallengeHome）：每题一行，完成状态、分值、出题人，可按未做 / 已交筛选； 教程面板只放教程 - 教程每一节的代码各存一份（和挑战同一个按任务的 key），切回来时还在，第一次才放示例代码； 提交列表“复制到编辑器”对教程也写入该任务的代码 - 教程 / 挑战出题页合并为 TaskEditor：“提交”改为“保存”，保存后停在当前项，删除前说明会连带删除学生提交； admin 也能在列表里切换挑战是否公开（保存时本来就能设） - 用户管理：初始密码默认隐藏，封号前确认，批量新建说明用户名规则 - 整站暗色：顶栏切换跟随系统 / 亮色 / 暗色；Naive 暗色主题、markdown 和代码高亮的暗色覆盖 （styles/dark-content.css 由 GitHub 暗色样式生成）、CodeMirror One Dark 配色、md-editor 暗色； 组件里剩下的硬编码颜色全部换成配色变量 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
xuyueandClaude Opus 5.5 committed
1 parent
df3f842dac
commit
8653d411a6
40 files changed
+1208
-851
No files matched your search
@@ -160,11 +160,11 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
color: #888;
|
||||
color: var(--wp-muted);
|
||||
}
|
||||
|
||||
.guidance-msg.user .msg-role {
|
||||
color: #2080f0;
|
||||
color: var(--wp-css);
|
||||
}
|
||||
|
||||
.guidance-msg.assistant .msg-role {
|
||||
@@ -172,8 +172,8 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
}
|
||||
|
||||
.guidance-msg.assistant .msg-content {
|
||||
background: #f0f7ff;
|
||||
border-left: 3px solid #2080f0;
|
||||
background: var(--wp-css-soft);
|
||||
border-left: 3px solid var(--wp-css);
|
||||
padding: 8px 12px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
font-size: 14px;
|
||||
@@ -183,7 +183,7 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
.guidance-msg.user .msg-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
color: var(--wp-ink);
|
||||
}
|
||||
|
||||
.msg-content :deep(p) {
|
||||
@@ -198,9 +198,9 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 6px 10px;
|
||||
background: #f0fff4;
|
||||
background: var(--wp-brand-soft);
|
||||
border-radius: 6px;
|
||||
border: 1px solid #b8e8cc;
|
||||
border: 1px solid var(--wp-brand-soft);
|
||||
}
|
||||
|
||||
.typing-indicator {
|
||||
@@ -213,7 +213,7 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #2080f0;
|
||||
background: var(--wp-css);
|
||||
animation: bounce 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
|
||||
@@ -283,7 +283,7 @@ onMounted(() => {
|
||||
.history-toolbar {
|
||||
height: 42px;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid var(--n-border-color, #efeff5);
|
||||
border-bottom: 1px solid var(--n-border-color, var(--wp-line));
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -307,12 +307,12 @@ onMounted(() => {
|
||||
|
||||
|
||||
.history-card.is-selected {
|
||||
--n-color: #f7fffa;
|
||||
--n-color: var(--wp-brand-soft);
|
||||
box-shadow: 0 10px 24px rgba(13, 122, 82, 0.14);
|
||||
}
|
||||
|
||||
.history-card.is-selected .history-main {
|
||||
background: #eefaf3;
|
||||
background: var(--wp-brand-soft);
|
||||
}
|
||||
|
||||
.history-main {
|
||||
@@ -323,7 +323,7 @@ onMounted(() => {
|
||||
.prompt-markdown {
|
||||
margin: 0;
|
||||
padding: 0 12px 12px;
|
||||
color: #333;
|
||||
color: var(--wp-ink);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
@@ -356,8 +356,8 @@ onMounted(() => {
|
||||
|
||||
.thumbnail {
|
||||
height: 160px;
|
||||
border-top: 1px solid var(--n-border-color, #efeff5);
|
||||
background: #f7f7f9;
|
||||
border-top: 1px solid var(--n-border-color, var(--wp-line));
|
||||
background: var(--wp-paper);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -365,15 +365,15 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.history-card.is-selected .thumbnail {
|
||||
border-top-color: #d8f1e2;
|
||||
background: #f4fbf6;
|
||||
border-top-color: var(--wp-brand-soft);
|
||||
background: var(--wp-brand-soft);
|
||||
}
|
||||
|
||||
.thumbnail iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
background: #fff;
|
||||
background: var(--wp-surface);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -274,11 +274,11 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
color: #666;
|
||||
color: var(--wp-muted);
|
||||
}
|
||||
|
||||
.message.user .message-role {
|
||||
color: #2080f0;
|
||||
color: var(--wp-css);
|
||||
}
|
||||
|
||||
.message.assistant .message-role {
|
||||
@@ -321,7 +321,7 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
}
|
||||
|
||||
.message-content :deep(pre) {
|
||||
background: #f5f5f5;
|
||||
background: var(--wp-paper);
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
@@ -379,7 +379,7 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
|
||||
.streaming-hint {
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
color: var(--wp-faint);
|
||||
margin-top: 4px;
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
@@ -387,7 +387,7 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
.input-area {
|
||||
flex-shrink: 0;
|
||||
padding: 12px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-top: 1px solid var(--wp-line);
|
||||
}
|
||||
|
||||
.message-pair {
|
||||
@@ -405,11 +405,11 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: none;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid var(--wp-line);
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
color: #bbb;
|
||||
color: var(--wp-faint);
|
||||
line-height: 1;
|
||||
transition:
|
||||
color 0.15s,
|
||||
@@ -417,8 +417,8 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
}
|
||||
|
||||
.pair-delete-btn:hover {
|
||||
color: #e03e3e;
|
||||
border-color: #e03e3e;
|
||||
color: var(--wp-bad);
|
||||
border-color: var(--wp-bad);
|
||||
}
|
||||
|
||||
.message-pair.has-delete:hover .pair-delete-btn {
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<MdEditor v-bind="props" v-model="modelValue" @upload-img="uploadImg" />
|
||||
<MdEditor
|
||||
v-bind="props"
|
||||
v-model="modelValue"
|
||||
:theme="isDark ? 'dark' : 'light'"
|
||||
@upload-img="uploadImg"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { MdEditor } from "md-editor-v3"
|
||||
@@ -7,6 +12,7 @@ import { MdEditor } from "md-editor-v3"
|
||||
import "md-editor-v3/lib/style.css"
|
||||
import { Helper } from "../../api"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { isDark } from "../../store/theme"
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
import { useMessage } from "naive-ui"
|
||||
import { useDialog, useMessage } from "naive-ui"
|
||||
import { Account } from "../../api"
|
||||
import { Role, type User } from "../../utils/type"
|
||||
import UserFormModal from "./UserFormModal.vue"
|
||||
@@ -41,15 +41,27 @@ const props = defineProps<Props>()
|
||||
const emits = defineEmits(["reload"])
|
||||
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
const showEdit = ref(false)
|
||||
|
||||
function edit() {
|
||||
showEdit.value = true
|
||||
}
|
||||
|
||||
async function toggleUserActive() {
|
||||
async function doToggle() {
|
||||
const data = await Account.toggleActive(props.user.id)
|
||||
message.success(data.message)
|
||||
emits("reload")
|
||||
}
|
||||
|
||||
function toggleUserActive() {
|
||||
if (!props.user.is_active) return doToggle()
|
||||
dialog.warning({
|
||||
title: `封禁「${props.user.username}」？`,
|
||||
content: "封禁后这个账号不能登录，已经登录的也会被退出。之后可以再解封。",
|
||||
positiveText: "封禁",
|
||||
negativeText: "取消",
|
||||
onPositiveClick: doToggle,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@@ -5,6 +5,9 @@ import { css } from "@codemirror/lang-css"
|
||||
import { javascript } from "@codemirror/lang-javascript"
|
||||
import { html } from "@codemirror/lang-html"
|
||||
import { computed } from "vue"
|
||||
import { syntaxHighlighting } from "@codemirror/language"
|
||||
import { oneDarkHighlightStyle } from "@codemirror/theme-one-dark"
|
||||
import { isDark } from "../../store/theme"
|
||||
|
||||
const styleTheme = EditorView.baseTheme({
|
||||
"& .cm-scroller": {
|
||||
@@ -44,13 +47,24 @@ const lang = computed(() => {
|
||||
|
||||
const bgTheme = computed(() => {
|
||||
const bg = bgColors[props.language] ?? "var(--wp-surface)"
|
||||
return EditorView.theme({
|
||||
"&": { backgroundColor: bg },
|
||||
".cm-gutters": { backgroundColor: bg },
|
||||
})
|
||||
return EditorView.theme(
|
||||
{
|
||||
"&": { backgroundColor: bg, color: "var(--wp-ink)" },
|
||||
".cm-gutters": { backgroundColor: bg, color: "var(--wp-faint)", borderColor: "var(--wp-line)" },
|
||||
".cm-activeLine, .cm-activeLineGutter": { backgroundColor: "rgba(127, 127, 127, 0.08)" },
|
||||
".cm-cursor": { borderLeftColor: "var(--wp-ink)" },
|
||||
},
|
||||
{ dark: isDark.value },
|
||||
)
|
||||
})
|
||||
|
||||
const extensions = computed(() => [styleTheme, bgTheme.value, lang.value])
|
||||
// 暗色时换成 One Dark 的语法配色（默认配色是给浅色背景设计的）
|
||||
const extensions = computed(() => [
|
||||
styleTheme,
|
||||
bgTheme.value,
|
||||
...(isDark.value ? [syntaxHighlighting(oneDarkHighlightStyle)] : []),
|
||||
lang.value,
|
||||
])
|
||||
</script>
|
||||
<template>
|
||||
<Codemirror
|
||||
|
||||
@@ -16,6 +16,14 @@
|
||||
</router-link>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
<n-button quaternary circle size="small" @click="cycleTheme">
|
||||
<Icon :icon="themeIcon" :width="16" />
|
||||
</n-button>
|
||||
</template>
|
||||
外观：{{ themeLabel }}（点击切换）
|
||||
</n-tooltip>
|
||||
<template v-if="user.loaded">
|
||||
<router-link
|
||||
v-if="roleStaff"
|
||||
@@ -55,6 +63,19 @@ import { authed, roleStaff, user } from "../../store/user"
|
||||
import { loginModal } from "../../store/modal"
|
||||
import { step } from "../../store/tutorial"
|
||||
import { logout } from "../../store/session"
|
||||
import { themeMode, type ThemeMode } from "../../store/theme"
|
||||
import { Icon } from "../../icons"
|
||||
|
||||
const themeOrder: ThemeMode[] = ["auto", "light", "dark"]
|
||||
const themeLabel = computed(
|
||||
() => ({ auto: "跟随系统", light: "亮色", dark: "暗色" })[themeMode.value],
|
||||
)
|
||||
const themeIcon = computed(
|
||||
() => ({ auto: "lucide:sun-moon", light: "lucide:sun", dark: "lucide:moon" })[themeMode.value],
|
||||
)
|
||||
function cycleTheme() {
|
||||
themeMode.value = themeOrder[(themeOrder.indexOf(themeMode.value) + 1) % themeOrder.length]!
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
@@ -135,7 +135,7 @@ async function rate(w: PeerWork, score: number) {
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--wp-line);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
background: var(--wp-surface);
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<span>提示词</span>
|
||||
<n-tooltip placement="bottom-start">
|
||||
<template #trigger>
|
||||
<Icon icon="lucide:info" :width="20" style="color: #aaa" />
|
||||
<Icon icon="lucide:info" :width="20" style="color: var(--wp-faint)" />
|
||||
</template>
|
||||
<div style="line-height: 2">
|
||||
<div>
|
||||
@@ -71,7 +71,7 @@
|
||||
style="
|
||||
overflow-y: auto;
|
||||
padding-right: 8px;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
border-right: 1px solid var(--wp-line);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
@@ -94,8 +94,8 @@
|
||||
width: '22px',
|
||||
height: '22px',
|
||||
borderRadius: '50%',
|
||||
background: selectedRound === index ? '#2080f0' : '#c2d5fb',
|
||||
color: '#fff',
|
||||
background: selectedRound === index ? 'var(--wp-css)' : 'var(--wp-css-soft)',
|
||||
color: 'var(--wp-surface)',
|
||||
fontSize: '12px',
|
||||
fontWeight: 'bold',
|
||||
display: 'flex',
|
||||
@@ -112,11 +112,11 @@
|
||||
flex: 1,
|
||||
padding: '10px 14px',
|
||||
borderRadius: '8px',
|
||||
background: selectedRound === index ? '#e8f0fe' : '#f5f5f5',
|
||||
background: selectedRound === index ? 'var(--wp-css-soft)' : 'var(--wp-paper)',
|
||||
border:
|
||||
selectedRound === index
|
||||
? '1px solid #2080f0'
|
||||
: '1px solid #e0e0e0',
|
||||
? '1px solid var(--wp-css)'
|
||||
: '1px solid var(--wp-line)',
|
||||
fontSize: '13px',
|
||||
lineHeight: '1.6',
|
||||
transition: 'all 0.2s',
|
||||
@@ -154,9 +154,9 @@
|
||||
padding: '1px 5px',
|
||||
borderRadius: '4px',
|
||||
background:
|
||||
round.source === 'conversation' ? '#e8f0fe' : '#f0f0f0',
|
||||
round.source === 'conversation' ? 'var(--wp-css-soft)' : 'var(--wp-line)',
|
||||
color:
|
||||
round.source === 'conversation' ? '#2060c0' : '#888',
|
||||
round.source === 'conversation' ? 'var(--wp-css)' : 'var(--wp-muted)',
|
||||
fontWeight: 500,
|
||||
whiteSpace: 'nowrap',
|
||||
}"
|
||||
@@ -212,7 +212,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 8px">
|
||||
<div style="font-weight: bold; font-size: 13px; color: #555">
|
||||
<div style="font-weight: bold; font-size: 13px; color: var(--wp-ink)">
|
||||
第 {{ selectedRound + 1 }} 轮网页
|
||||
</div>
|
||||
<iframe
|
||||
@@ -222,9 +222,9 @@
|
||||
sandbox="allow-scripts"
|
||||
style="
|
||||
flex: 1;
|
||||
border: 1px solid #e0e0e0;
|
||||
border: 1px solid var(--wp-line);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
background: var(--wp-surface);
|
||||
"
|
||||
/>
|
||||
<n-empty v-else description="该轮无网页代码" style="margin: auto" />
|
||||
@@ -285,12 +285,12 @@ async function deleteRound(index: number) {
|
||||
}
|
||||
|
||||
const levelColors: Record<number, string> = {
|
||||
1: "#aaa",
|
||||
2: "#6aab9c",
|
||||
3: "#4a9ade",
|
||||
1: "var(--wp-faint)",
|
||||
2: "var(--wp-brand)",
|
||||
3: "var(--wp-css)",
|
||||
4: "#c47ab8",
|
||||
5: "#e0a040",
|
||||
6: "#e05c5c",
|
||||
5: "var(--wp-warn)",
|
||||
6: "var(--wp-bad)",
|
||||
}
|
||||
|
||||
const selectedPageHtml = computed(() => {
|
||||
|
||||
@@ -71,7 +71,7 @@ const subColumns = computed((): DataTableColumn<SubmissionOut>[] => [
|
||||
{ style: { display: "flex", gap: "6px", alignItems: "baseline" } },
|
||||
[
|
||||
h("span", avgScore),
|
||||
h("span", { style: { fontSize: "11px", color: "#999" } }, myScore),
|
||||
h("span", { style: { fontSize: "11px", color: "var(--wp-faint)" } }, myScore),
|
||||
],
|
||||
)
|
||||
},
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<div class="container" v-if="taskTab === TASK_TYPE.Challenge">
|
||||
<n-empty v-if="!challenges.length">暂无挑战，敬请期待</n-empty>
|
||||
<n-flex v-else vertical :size="12">
|
||||
<n-card
|
||||
v-for="item in challenges"
|
||||
:key="item.display"
|
||||
hoverable
|
||||
:class="['challenge-card', { submitted: item.submitted }]"
|
||||
@click="select(item)"
|
||||
>
|
||||
<template #header>
|
||||
<n-flex align="center" :size="6">
|
||||
<span v-if="item.submitted" class="check-icon">✓</span>
|
||||
<span :class="{ 'submitted-title': item.submitted }">{{
|
||||
item.title
|
||||
}}</span>
|
||||
</n-flex>
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-flex :size="6">
|
||||
<n-tag type="warning" size="small">{{ item.score }} 分</n-tag>
|
||||
<n-tag v-if="item.pass_score != null" size="small"
|
||||
>及格 {{ item.pass_score }} 分</n-tag
|
||||
>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-text depth="3" class="challenge-author">
|
||||
出题人：{{ item.author_name || "未设置" }}
|
||||
</n-text>
|
||||
</n-card>
|
||||
</n-flex>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Challenge } from "../../api"
|
||||
import { taskTab } from "../../store/task"
|
||||
import { TASK_TYPE } from "../../utils/const"
|
||||
import type { ChallengeSlim } from "../../utils/type"
|
||||
|
||||
const router = useRouter()
|
||||
const challenges = ref<ChallengeSlim[]>([])
|
||||
|
||||
function select(item: ChallengeSlim) {
|
||||
router.push({ name: "home-challenge", params: { display: item.display } })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
challenges.value = await Challenge.listDisplay()
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.challenge-card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.challenge-card.submitted {
|
||||
background-color: #f6ffed;
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
|
||||
.check-icon {
|
||||
color: #52c41a;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.submitted-title {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.challenge-author {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
@@ -2,9 +2,7 @@
|
||||
<div class="container">
|
||||
<n-flex align="center" justify="space-between" class="title" :wrap="false">
|
||||
<n-flex align="center" :wrap="false">
|
||||
<span class="panel-name">
|
||||
{{ taskTab === TASK_TYPE.Tutorial ? "教程" : "挑战" }}
|
||||
</span>
|
||||
<span class="panel-name">教程</span>
|
||||
<template v-if="!hideNav">
|
||||
<n-tooltip>
|
||||
<template #trigger>
|
||||
@@ -59,8 +57,7 @@
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
<TutorialContent v-if="taskTab === TASK_TYPE.Tutorial" />
|
||||
<ChallengeList v-else />
|
||||
<TutorialContent />
|
||||
</div>
|
||||
<PeersDrawer
|
||||
v-model:show="showPeers"
|
||||
@@ -109,7 +106,6 @@ import { useRoute, useRouter } from "vue-router"
|
||||
import { TASK_TYPE } from "../../utils/const"
|
||||
import { TaskAssets } from "../../api"
|
||||
import type { TaskAsset } from "../../utils/type"
|
||||
import ChallengeList from "./ChallengeList.vue"
|
||||
import TutorialContent from "./TutorialContent.vue"
|
||||
|
||||
const tutorialAssets = ref<TaskAsset[]>([])
|
||||
@@ -134,16 +130,11 @@ const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// 路由同步：初始执行 + watch 响应 SPA 内部导航
|
||||
// 这个面板只用在教程页（挑战有自己的页面）
|
||||
function syncRoute(routeName: string) {
|
||||
if (routeName.startsWith("home-tutorial")) {
|
||||
taskTab.value = TASK_TYPE.Tutorial
|
||||
if (route.params.display) step.value = Number(route.params.display)
|
||||
} else if (routeName.startsWith("home-challenge")) {
|
||||
taskTab.value = TASK_TYPE.Challenge
|
||||
if (route.params.display)
|
||||
challengeDisplay.value = Number(route.params.display)
|
||||
// 挑战列表里没有选中的任务，“提交”不可用
|
||||
else taskId.value = 0
|
||||
taskTab.value = TASK_TYPE.Tutorial
|
||||
if (routeName.startsWith("home-tutorial") && route.params.display) {
|
||||
step.value = Number(route.params.display)
|
||||
}
|
||||
}
|
||||
syncRoute(route.name as string)
|
||||
@@ -155,9 +146,7 @@ watch(
|
||||
|
||||
defineEmits(["hide"])
|
||||
|
||||
const hideNav = computed(
|
||||
() => taskTab.value !== TASK_TYPE.Tutorial || tutorialIds.value.length <= 1,
|
||||
)
|
||||
const hideNav = computed(() => tutorialIds.value.length <= 1)
|
||||
|
||||
const progressText = computed(() => {
|
||||
const ids = tutorialIds.value
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
align="center"
|
||||
style="margin-bottom: 16px; flex-wrap: wrap; gap: 6px"
|
||||
>
|
||||
<span style="color: #666; font-size: 12px">班级筛选：</span>
|
||||
<span style="color: var(--wp-muted); font-size: 12px">班级筛选：</span>
|
||||
<n-button
|
||||
size="small"
|
||||
:type="selectedClass === null ? 'primary' : 'default'"
|
||||
@@ -44,7 +44,7 @@
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--wp-line);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
@@ -56,7 +56,7 @@
|
||||
:style="{
|
||||
padding: '12px 8px',
|
||||
textAlign: 'center',
|
||||
borderRight: i < metrics.length - 1 ? '1px solid #eee' : 'none',
|
||||
borderRight: i < metrics.length - 1 ? '1px solid var(--wp-line)' : 'none',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
@@ -68,7 +68,7 @@
|
||||
>
|
||||
{{ metric.value }}
|
||||
</div>
|
||||
<div style="color: #888; font-size: 11px; margin-top: 2px">
|
||||
<div style="color: var(--wp-muted); font-size: 11px; margin-top: 2px">
|
||||
{{ metric.label }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,7 +77,7 @@
|
||||
<!-- 未提交名单（可折叠） -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--wp-line);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
@@ -90,7 +90,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fff8f8;
|
||||
background: var(--wp-bad-soft);
|
||||
"
|
||||
@click="showUnsubmitted = !showUnsubmitted"
|
||||
>
|
||||
@@ -99,12 +99,12 @@
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #d03050;
|
||||
background: var(--wp-bad);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #d03050; font-size: 12px"
|
||||
<span style="font-weight: 600; color: var(--wp-bad); font-size: 12px"
|
||||
>未提交（{{ stats.unsubmitted_count }}人）</span
|
||||
>
|
||||
</n-flex>
|
||||
@@ -115,14 +115,14 @@
|
||||
: 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
style="color: var(--wp-faint)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnsubmitted"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fff8f8;
|
||||
background: var(--wp-bad-soft);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
@@ -133,12 +133,12 @@
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0d0; background: #fff"
|
||||
style="border-color: var(--wp-bad-soft); background: var(--wp-surface)"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unsubmitted_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
style="color: var(--wp-faint); font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
@@ -147,7 +147,7 @@
|
||||
<!-- 未打分名单（可折叠） -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--wp-line);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
@@ -160,7 +160,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fffaf5;
|
||||
background: var(--wp-warn-soft);
|
||||
"
|
||||
@click="showUnrated = !showUnrated"
|
||||
>
|
||||
@@ -169,15 +169,15 @@
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #e07800;
|
||||
background: var(--wp-warn);
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #e07800; font-size: 12px"
|
||||
<span style="font-weight: 600; color: var(--wp-warn); font-size: 12px"
|
||||
>未打分（{{ stats.unrated_count }}人）</span
|
||||
>
|
||||
<span style="font-size: 11px; color: #aaa"
|
||||
<span style="font-size: 11px; color: var(--wp-faint)"
|
||||
>— 还没给任何提交打过分</span
|
||||
>
|
||||
</n-flex>
|
||||
@@ -186,14 +186,14 @@
|
||||
showUnrated ? 'lucide:chevron-down' : 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
style="color: var(--wp-faint)"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnrated"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fffaf5;
|
||||
background: var(--wp-warn-soft);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
@@ -204,12 +204,12 @@
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0a0; background: #fff"
|
||||
style="border-color: var(--wp-warn-soft); background: var(--wp-surface)"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unrated_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
style="color: var(--wp-faint); font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
@@ -222,11 +222,11 @@
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
color: var(--wp-ink);
|
||||
"
|
||||
>
|
||||
提交次数分布
|
||||
<span style="font-size: 11px; color: #aaa; font-weight: 400"
|
||||
<span style="font-size: 11px; color: var(--wp-faint); font-weight: 400"
|
||||
>（已提交的 {{ stats.submitted_count }} 人）</span
|
||||
>
|
||||
</div>
|
||||
@@ -252,13 +252,13 @@
|
||||
>
|
||||
{{ bucket.value }}
|
||||
</div>
|
||||
<div style="color: #aaa; font-size: 11px; margin-top: 2px">
|
||||
<div style="color: var(--wp-faint); font-size: 11px; margin-top: 2px">
|
||||
{{ bucket.label }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 8px;
|
||||
background: #e8e8e8;
|
||||
background: var(--wp-line);
|
||||
border-radius: 3px;
|
||||
height: 4px;
|
||||
"
|
||||
@@ -272,7 +272,7 @@
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div style="color: #bbb; font-size: 10px; margin-top: 3px">
|
||||
<div style="color: var(--wp-faint); font-size: 10px; margin-top: 3px">
|
||||
{{ bucketPct(bucket.value) }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -286,14 +286,14 @@
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
color: var(--wp-ink);
|
||||
"
|
||||
>
|
||||
人气前五
|
||||
</div>
|
||||
<div
|
||||
v-if="stats.top_viewed.length === 0"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
style="color: var(--wp-faint); font-size: 12px"
|
||||
>
|
||||
暂无
|
||||
</div>
|
||||
@@ -306,10 +306,10 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #eee;
|
||||
border: 1px solid var(--wp-line);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background: #fafafa;
|
||||
background: var(--wp-paper);
|
||||
"
|
||||
@click="viewSubmission(item.submission_id)"
|
||||
>
|
||||
@@ -319,8 +319,8 @@
|
||||
height: '20px',
|
||||
borderRadius: '50%',
|
||||
background:
|
||||
i < 3 ? ['#f0a020', '#888', '#a07040'][i] : '#ddd',
|
||||
color: '#fff',
|
||||
i < 3 ? ['var(--wp-warn)', 'var(--wp-muted)', 'var(--wp-warn)'][i] : 'var(--wp-line)',
|
||||
color: 'var(--wp-surface)',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
display: 'flex',
|
||||
@@ -330,10 +330,10 @@
|
||||
}"
|
||||
>{{ i + 1 }}</span
|
||||
>
|
||||
<span style="flex: 1; font-size: 13px; color: #333">
|
||||
<span style="flex: 1; font-size: 13px; color: var(--wp-ink)">
|
||||
{{ displayName(item.username, item.classname) }}
|
||||
</span>
|
||||
<span style="font-size: 12px; color: #2080f0; font-weight: 600">
|
||||
<span style="font-size: 12px; color: var(--wp-css); font-weight: 600">
|
||||
{{ item.view_count }} 次
|
||||
</span>
|
||||
</div>
|
||||
@@ -395,14 +395,14 @@ function bucketPct(value: number) {
|
||||
const metrics = computed(() => {
|
||||
if (!stats.value) return []
|
||||
return [
|
||||
{ label: "已提交", value: stats.value.submitted_count, color: "#18a058" },
|
||||
{ label: "未提交", value: stats.value.unsubmitted_count, color: "#d03050" },
|
||||
{ label: "已提交", value: stats.value.submitted_count, color: "var(--wp-brand)" },
|
||||
{ label: "未提交", value: stats.value.unsubmitted_count, color: "var(--wp-bad)" },
|
||||
{
|
||||
label: "平均分",
|
||||
value: stats.value.average_score?.toFixed(1) ?? "—",
|
||||
color: "#2080f0",
|
||||
color: "var(--wp-css)",
|
||||
},
|
||||
{ label: "未打分", value: stats.value.unrated_count, color: "#d03050" },
|
||||
{ label: "未打分", value: stats.value.unrated_count, color: "var(--wp-bad)" },
|
||||
]
|
||||
})
|
||||
|
||||
@@ -413,30 +413,30 @@ const countBuckets = computed(() => {
|
||||
{
|
||||
label: "4 次+",
|
||||
value: d.count_4_plus,
|
||||
color: "#f0a020",
|
||||
bg: "#fffbf0",
|
||||
borderColor: "#ffe0a0",
|
||||
color: "var(--wp-warn)",
|
||||
bg: "var(--wp-warn-soft)",
|
||||
borderColor: "var(--wp-warn-soft)",
|
||||
},
|
||||
{
|
||||
label: "3 次",
|
||||
value: d.count_3,
|
||||
color: "#18a058",
|
||||
bg: "#f0fff4",
|
||||
borderColor: "#c8e8d0",
|
||||
color: "var(--wp-brand)",
|
||||
bg: "var(--wp-brand-soft)",
|
||||
borderColor: "var(--wp-brand-soft)",
|
||||
},
|
||||
{
|
||||
label: "2 次",
|
||||
value: d.count_2,
|
||||
color: "#2080f0",
|
||||
bg: "#f0f7ff",
|
||||
borderColor: "#d0e8ff",
|
||||
color: "var(--wp-css)",
|
||||
bg: "var(--wp-css-soft)",
|
||||
borderColor: "var(--wp-css-soft)",
|
||||
},
|
||||
{
|
||||
label: "仅 1 次",
|
||||
value: d.count_1,
|
||||
color: "#888",
|
||||
bg: "#fafafa",
|
||||
borderColor: "#e0e0e0",
|
||||
color: "var(--wp-muted)",
|
||||
bg: "var(--wp-paper)",
|
||||
borderColor: "var(--wp-line)",
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
@@ -8,6 +8,7 @@ import { trustedExtensions } from "../../utils/markdown"
|
||||
import copyFn from "copy-text-to-clipboard"
|
||||
import { css, html, js, tab } from "../../store/editors"
|
||||
import { Tutorial } from "../../api"
|
||||
import { readTaskCode } from "../../composables/useTaskCode"
|
||||
import { step, tutorialIds, loadTutorials } from "../../store/tutorial"
|
||||
import { taskId, assetBaseUrl } from "../../store/task"
|
||||
import { useRouter } from "vue-router"
|
||||
@@ -45,11 +46,13 @@ async function render() {
|
||||
const seq = ++renderSeq
|
||||
const data = await Tutorial.get(step.value)
|
||||
if (seq !== renderSeq) return
|
||||
// 这一节写过代码就接着写，没写过才放示例代码（以前每次切换都会被示例覆盖）
|
||||
const saved = readTaskCode(data.task_ptr)
|
||||
taskId.value = data.task_ptr
|
||||
assetBaseUrl.value = `/media/tasks/tutorial/${step.value}/`
|
||||
html.value = data.example_html ?? ""
|
||||
css.value = data.example_css ?? ""
|
||||
js.value = data.example_js ?? ""
|
||||
html.value = saved?.html ?? data.example_html ?? ""
|
||||
css.value = saved?.css ?? data.example_css ?? ""
|
||||
js.value = saved?.js ?? data.example_js ?? ""
|
||||
const merged = `# ${data.display}. ${data.title}\n${data.content}`
|
||||
const rendered = await tutorialMarked.parse(merged, { async: true })
|
||||
if (seq !== renderSeq) return
|
||||
@@ -124,7 +127,7 @@ watch(step, (v) => {
|
||||
|
||||
.markdown-body .codeblock-wrapper {
|
||||
padding: 1rem;
|
||||
background-color: #f6f8fa;
|
||||
background-color: var(--wp-paper);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
@@ -170,9 +173,9 @@ watch(step, (v) => {
|
||||
padding: 0 14px;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 1px solid var(--wp-line);
|
||||
background-color: var(--wp-surface);
|
||||
color: var(--wp-ink);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -169,7 +169,7 @@ watch(
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: zoom-in;
|
||||
background: #fff;
|
||||
background: var(--wp-surface);
|
||||
}
|
||||
|
||||
/* 按 4 倍大小渲染再缩小，看起来像网页缩略图 */
|
||||
|
||||
Reference in new issue
Block a user