fix
This commit is contained in:
@@ -1,78 +1,42 @@
|
||||
<template>
|
||||
<div class="container" v-if="taskTab === TASK_TYPE.Challenge">
|
||||
<template v-if="currentChallenge">
|
||||
<n-flex align="center" style="margin-bottom: 12px">
|
||||
<n-button text @click="back">
|
||||
<Icon :width="20" icon="pepicons-pencil:arrow-left"></Icon>
|
||||
</n-button>
|
||||
<span style="font-weight: bold">返回挑战列表</span>
|
||||
</n-flex>
|
||||
<div class="markdown-body" v-html="content" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<n-empty v-if="!challenges.length">暂无挑战，敬请期待</n-empty>
|
||||
<n-grid v-else :cols="3" x-gap="12" y-gap="12">
|
||||
<n-gi v-for="item in challenges" :key="item.display">
|
||||
<n-card hoverable class="challenge-card" @click="select(item)">
|
||||
<template #header>
|
||||
{{ item.title }}
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-tag type="warning" size="small">{{ item.score }}分</n-tag>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
</template>
|
||||
<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"
|
||||
@click="select(item)"
|
||||
>
|
||||
<template #header>
|
||||
{{ item.title }}
|
||||
</template>
|
||||
<template #header-extra>
|
||||
<n-tag type="warning" size="small">{{ item.score }}分</n-tag>
|
||||
</template>
|
||||
</n-card>
|
||||
</n-flex>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue"
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { marked } from "marked"
|
||||
import { useRouter } from "vue-router"
|
||||
import { Challenge } from "../api"
|
||||
import { taskTab, taskId, challengeDisplay } from "../store/task"
|
||||
import { taskTab } from "../store/task"
|
||||
import { TASK_TYPE } from "../utils/const"
|
||||
import type { ChallengeSlim } from "../utils/type"
|
||||
|
||||
const router = useRouter()
|
||||
const challenges = ref<ChallengeSlim[]>([])
|
||||
const currentChallenge = ref<ChallengeSlim | null>(null)
|
||||
const content = ref("")
|
||||
|
||||
async function loadList() {
|
||||
function select(item: ChallengeSlim) {
|
||||
router.push({ name: "home-challenge", params: { display: item.display } })
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
challenges.value = await Challenge.listDisplay()
|
||||
// 从 URL 恢复选中状态
|
||||
if (challengeDisplay.value) {
|
||||
const item = challenges.value.find(
|
||||
(c) => c.display === challengeDisplay.value,
|
||||
)
|
||||
if (item) await select(item, false)
|
||||
}
|
||||
}
|
||||
|
||||
async function select(item: ChallengeSlim, updateUrl = true) {
|
||||
currentChallenge.value = item
|
||||
challengeDisplay.value = item.display
|
||||
if (updateUrl) {
|
||||
router.push({ name: "home-challenge", params: { display: item.display } })
|
||||
}
|
||||
const data = await Challenge.get(item.display)
|
||||
taskId.value = data.task_ptr
|
||||
const merged = `# #${data.display} ${data.title}\n${data.content}`
|
||||
content.value = await marked.parse(merged, { async: true })
|
||||
}
|
||||
|
||||
function back() {
|
||||
currentChallenge.value = null
|
||||
challengeDisplay.value = 0
|
||||
taskId.value = 0
|
||||
content.value = ""
|
||||
router.push({ name: "home-challenge-list" })
|
||||
}
|
||||
|
||||
onMounted(loadList)
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
|
||||
@@ -62,7 +62,6 @@
|
||||
<n-flex align="center">
|
||||
<span class="label">预加载</span>
|
||||
<n-tag type="success">Normalize.css</n-tag>
|
||||
<n-tag type="success">Tailwind CSS</n-tag>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-tab-pane>
|
||||
|
||||
@@ -64,7 +64,6 @@ function getContent() {
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>${props.css}</style>
|
||||
<link rel="stylesheet" href="/normalize.min.css" />
|
||||
<script src="/tailwindcss.min.js"><\/script>
|
||||
</head>
|
||||
<body>
|
||||
${props.html}
|
||||
|
||||
@@ -83,11 +83,11 @@ renderer.code = function ({ lang }: { text: string; lang?: string }) {
|
||||
{ bg: string; fg: string; dot: string; border: string; shimmer: string }
|
||||
> = {
|
||||
html: {
|
||||
bg: "#fff5f0",
|
||||
fg: "#e05020",
|
||||
dot: "#e05020",
|
||||
border: "#f0d0c0",
|
||||
shimmer: "#fff5f0, #ffeee5, #fff5f0",
|
||||
bg: "#f0fff4",
|
||||
fg: "#18a058",
|
||||
dot: "#18a058",
|
||||
border: "#b8e8cc",
|
||||
shimmer: "#f0fff4, #e0f7ea, #f0fff4",
|
||||
},
|
||||
css: {
|
||||
bg: "#f0f0ff",
|
||||
@@ -118,7 +118,7 @@ renderer.code = function ({ lang }: { text: string; lang?: string }) {
|
||||
border: "#e0eaf5",
|
||||
shimmer: "#f0f7ff, #e8f4f8, #f0f7ff",
|
||||
}
|
||||
return `<div class="code-placeholder" style="background: linear-gradient(90deg, ${c.shimmer}); background-size: 200% 100%; border-color: ${c.border}"><span class="code-placeholder-dot" style="background: ${c.dot}"></span><span class="code-placeholder-label" style="color: ${c.fg}; background: ${c.fg}18">${label}</span><span class="code-placeholder-text">代码已自动应用到预览区</span></div>`
|
||||
return `<div class="code-placeholder" style="background: linear-gradient(90deg, ${c.shimmer}); background-size: 200% 100%; border-color: ${c.border}"><span class="code-placeholder-dot" style="background: ${c.dot}"></span><span class="code-placeholder-label" style="color: ${c.fg}; background: ${c.fg}18">${label}</span><span class="code-placeholder-text">代码正在生成中，结束后会自动应用到预览区</span></div>`
|
||||
}
|
||||
|
||||
function renderMarkdown(text: string): string {
|
||||
@@ -149,6 +149,7 @@ watch([() => messages.value.length, streamingContent], () => {
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -39,353 +39,356 @@
|
||||
</n-flex>
|
||||
|
||||
<n-spin :show="loading">
|
||||
<!-- 关键指标 -->
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
"
|
||||
>
|
||||
<!-- 关键指标 -->
|
||||
<div
|
||||
v-for="(metric, i) in metrics"
|
||||
:key="metric.label"
|
||||
:style="{
|
||||
padding: '12px 8px',
|
||||
textAlign: 'center',
|
||||
borderRight: i < metrics.length - 1 ? '1px solid #eee' : 'none',
|
||||
}"
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(metric, i) in metrics"
|
||||
:key="metric.label"
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
color: metric.color,
|
||||
}"
|
||||
>
|
||||
{{ metric.value }}
|
||||
</div>
|
||||
<div style="color: #888; font-size: 11px; margin-top: 2px">
|
||||
{{ metric.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未提交名单（可折叠） -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fff8f8;
|
||||
"
|
||||
@click="showUnsubmitted = !showUnsubmitted"
|
||||
>
|
||||
<n-flex align="center" :size="6">
|
||||
<span
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #d03050;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #d03050; font-size: 12px"
|
||||
>未提交（{{ stats.unsubmitted_count }}人）</span
|
||||
>
|
||||
</n-flex>
|
||||
<Icon
|
||||
:icon="
|
||||
showUnsubmitted ? 'lucide:chevron-down' : 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnsubmitted"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fff8f8;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<n-tag
|
||||
v-for="u in stats.unsubmitted_users"
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0d0; background: #fff"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unsubmitted_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未打分名单（可折叠） -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fffaf5;
|
||||
"
|
||||
@click="showUnrated = !showUnrated"
|
||||
>
|
||||
<n-flex align="center" :size="6">
|
||||
<span
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #e07800;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #e07800; font-size: 12px"
|
||||
>未打分（{{ stats.unrated_count }}人）</span
|
||||
>
|
||||
<span style="font-size: 11px; color: #aaa"
|
||||
>— 还没给任何提交打过分</span
|
||||
>
|
||||
</n-flex>
|
||||
<Icon
|
||||
:icon="
|
||||
showUnrated ? 'lucide:chevron-down' : 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnrated"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fffaf5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<n-tag
|
||||
v-for="u in stats.unrated_users"
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0a0; background: #fff"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unrated_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交次数分布 -->
|
||||
<div style="margin-bottom: 12px">
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
提交次数分布
|
||||
<span style="font-size: 11px; color: #aaa; font-weight: 400"
|
||||
>（已提交的 {{ stats.submitted_count }} 人）</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px">
|
||||
<div
|
||||
v-for="bucket in countBuckets"
|
||||
:key="bucket.label"
|
||||
:style="{
|
||||
flex: 1,
|
||||
border: `1px solid ${bucket.borderColor}`,
|
||||
borderRadius: '6px',
|
||||
padding: '10px 8px',
|
||||
padding: '12px 8px',
|
||||
textAlign: 'center',
|
||||
background: bucket.bg,
|
||||
borderRight: i < metrics.length - 1 ? '1px solid #eee' : 'none',
|
||||
}"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
color: bucket.color,
|
||||
color: metric.color,
|
||||
}"
|
||||
>
|
||||
{{ bucket.value }}
|
||||
{{ metric.value }}
|
||||
</div>
|
||||
<div style="color: #aaa; font-size: 11px; margin-top: 2px">
|
||||
{{ bucket.label }}
|
||||
<div style="color: #888; font-size: 11px; margin-top: 2px">
|
||||
{{ metric.label }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 8px;
|
||||
background: #e8e8e8;
|
||||
border-radius: 3px;
|
||||
height: 4px;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未提交名单（可折叠） -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fff8f8;
|
||||
"
|
||||
@click="showUnsubmitted = !showUnsubmitted"
|
||||
>
|
||||
<n-flex align="center" :size="6">
|
||||
<span
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #d03050;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #d03050; font-size: 12px"
|
||||
>未提交（{{ stats.unsubmitted_count }}人）</span
|
||||
>
|
||||
</n-flex>
|
||||
<Icon
|
||||
:icon="
|
||||
showUnsubmitted
|
||||
? 'lucide:chevron-down'
|
||||
: 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnsubmitted"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fff8f8;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<n-tag
|
||||
v-for="u in stats.unsubmitted_users"
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0d0; background: #fff"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unsubmitted_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未打分名单（可折叠） -->
|
||||
<div
|
||||
style="
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background: #fffaf5;
|
||||
"
|
||||
@click="showUnrated = !showUnrated"
|
||||
>
|
||||
<n-flex align="center" :size="6">
|
||||
<span
|
||||
style="
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #e07800;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
"
|
||||
></span>
|
||||
<span style="font-weight: 600; color: #e07800; font-size: 12px"
|
||||
>未打分（{{ stats.unrated_count }}人）</span
|
||||
>
|
||||
<span style="font-size: 11px; color: #aaa"
|
||||
>— 还没给任何提交打过分</span
|
||||
>
|
||||
</n-flex>
|
||||
<Icon
|
||||
:icon="
|
||||
showUnrated ? 'lucide:chevron-down' : 'lucide:chevron-right'
|
||||
"
|
||||
:width="14"
|
||||
style="color: #aaa"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="showUnrated"
|
||||
style="
|
||||
padding: 10px 14px;
|
||||
background: #fffaf5;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
"
|
||||
>
|
||||
<n-tag
|
||||
v-for="u in stats.unrated_users"
|
||||
:key="u.username"
|
||||
size="small"
|
||||
:bordered="true"
|
||||
style="border-color: #ffd0a0; background: #fff"
|
||||
>{{ displayName(u.username, u.classname) }}</n-tag
|
||||
>
|
||||
<span
|
||||
v-if="!stats.unrated_users.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交次数分布 -->
|
||||
<div style="margin-bottom: 12px">
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
提交次数分布
|
||||
<span style="font-size: 11px; color: #aaa; font-weight: 400"
|
||||
>（已提交的 {{ stats.submitted_count }} 人）</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; gap: 8px">
|
||||
<div
|
||||
v-for="bucket in countBuckets"
|
||||
:key="bucket.label"
|
||||
:style="{
|
||||
flex: 1,
|
||||
border: `1px solid ${bucket.borderColor}`,
|
||||
borderRadius: '6px',
|
||||
padding: '10px 8px',
|
||||
textAlign: 'center',
|
||||
background: bucket.bg,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
background: bucket.color,
|
||||
height: '4px',
|
||||
borderRadius: '3px',
|
||||
width: bucketPct(bucket.value),
|
||||
fontSize: '20px',
|
||||
fontWeight: '700',
|
||||
color: bucket.color,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div style="color: #bbb; font-size: 10px; margin-top: 3px">
|
||||
{{ bucketPct(bucket.value) }}
|
||||
>
|
||||
{{ bucket.value }}
|
||||
</div>
|
||||
<div style="color: #aaa; font-size: 11px; margin-top: 2px">
|
||||
{{ bucket.label }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 8px;
|
||||
background: #e8e8e8;
|
||||
border-radius: 3px;
|
||||
height: 4px;
|
||||
"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
background: bucket.color,
|
||||
height: '4px',
|
||||
borderRadius: '3px',
|
||||
width: bucketPct(bucket.value),
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div style="color: #bbb; font-size: 10px; margin-top: 3px">
|
||||
{{ bucketPct(bucket.value) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人气提交 Top 5 -->
|
||||
<div style="margin-bottom: 12px">
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
人气提交 Top 5
|
||||
<span style="font-size: 11px; color: #aaa; font-weight: 400"
|
||||
>（按打分人数）</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 5px">
|
||||
<!-- 人气提交 Top 5 -->
|
||||
<div style="margin-bottom: 12px">
|
||||
<div
|
||||
v-for="(sub, i) in stats.top_submissions"
|
||||
:key="sub.submission_id"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
padding: '6px 10px',
|
||||
background: rankBg(i),
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
}"
|
||||
@click="viewSubmission(sub.submission_id)"
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
人气提交 Top 5
|
||||
<span style="font-size: 11px; color: #aaa; font-weight: 400"
|
||||
>（按打分人数）</span
|
||||
>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 5px">
|
||||
<div
|
||||
v-for="(sub, i) in stats.top_submissions"
|
||||
:key="sub.submission_id"
|
||||
:style="{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
background: rankColor(i),
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: '700',
|
||||
fontSize: '11px',
|
||||
flexShrink: 0,
|
||||
gap: '10px',
|
||||
padding: '6px 10px',
|
||||
background: rankBg(i),
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
}"
|
||||
@click="viewSubmission(sub.submission_id)"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
background: rankColor(i),
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff',
|
||||
fontWeight: '700',
|
||||
fontSize: '11px',
|
||||
flexShrink: 0,
|
||||
}"
|
||||
>
|
||||
{{ i + 1 }}
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; font-size: 13px">
|
||||
{{ displayName(sub.username, sub.classname) }}
|
||||
</div>
|
||||
<div style="color: #aaa; font-size: 11px">
|
||||
{{ sub.score.toFixed(1) }} 分 ·
|
||||
{{ sub.rating_count }} 人打分
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: #2080f0; font-size: 12px">查看 →</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="!stats.top_submissions.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无打分记录</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标记统计 -->
|
||||
<div>
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
标记统计
|
||||
</div>
|
||||
<n-flex :size="8" style="flex-wrap: wrap">
|
||||
<div
|
||||
v-for="flag in flagBadges"
|
||||
:key="flag.label"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '4px 10px',
|
||||
background: flag.bg,
|
||||
borderRadius: '4px',
|
||||
border: `1px solid ${flag.border}`,
|
||||
}"
|
||||
>
|
||||
{{ i + 1 }}
|
||||
<span
|
||||
:style="{
|
||||
width: '7px',
|
||||
height: '7px',
|
||||
background: flag.color,
|
||||
borderRadius: '50%',
|
||||
display: 'inline-block',
|
||||
}"
|
||||
></span>
|
||||
<span :style="{ color: flag.color, fontSize: '12px' }">{{
|
||||
flag.label
|
||||
}}</span>
|
||||
<span style="font-weight: 700; font-size: 13px; color: #333">{{
|
||||
flag.value
|
||||
}}</span>
|
||||
</div>
|
||||
<div style="flex: 1">
|
||||
<div style="font-weight: 500; font-size: 13px">
|
||||
{{ displayName(sub.username, sub.classname) }}
|
||||
</div>
|
||||
<div style="color: #aaa; font-size: 11px">
|
||||
{{ sub.score.toFixed(1) }} 分 · {{ sub.rating_count }} 人打分
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: #2080f0; font-size: 12px">查看 →</div>
|
||||
</div>
|
||||
<span
|
||||
v-if="!stats.top_submissions.length"
|
||||
style="color: #aaa; font-size: 12px"
|
||||
>暂无打分记录</span
|
||||
>
|
||||
</n-flex>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标记统计 -->
|
||||
<div>
|
||||
<div
|
||||
style="
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
"
|
||||
>
|
||||
标记统计
|
||||
</div>
|
||||
<n-flex :size="8" style="flex-wrap: wrap">
|
||||
<div
|
||||
v-for="flag in flagBadges"
|
||||
:key="flag.label"
|
||||
:style="{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '4px 10px',
|
||||
background: flag.bg,
|
||||
borderRadius: '4px',
|
||||
border: `1px solid ${flag.border}`,
|
||||
}"
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
width: '7px',
|
||||
height: '7px',
|
||||
background: flag.color,
|
||||
borderRadius: '50%',
|
||||
display: 'inline-block',
|
||||
}"
|
||||
></span>
|
||||
<span :style="{ color: flag.color, fontSize: '12px' }">{{
|
||||
flag.label
|
||||
}}</span>
|
||||
<span style="font-weight: 700; font-size: 13px; color: #333">{{
|
||||
flag.value
|
||||
}}</span>
|
||||
</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
</n-spin>
|
||||
</template>
|
||||
</div>
|
||||
@@ -434,11 +437,17 @@ function viewSubmission(id: string) {
|
||||
}
|
||||
|
||||
function rankColor(i: number) {
|
||||
return (["#f0a020", "#909090", "#cd7f32", "#8899aa", "#7a8fa0"] as const)[i] ?? "#aaa"
|
||||
return (
|
||||
(["#f0a020", "#909090", "#cd7f32", "#8899aa", "#7a8fa0"] as const)[i] ??
|
||||
"#aaa"
|
||||
)
|
||||
}
|
||||
|
||||
function rankBg(i: number) {
|
||||
return (["#fffbef", "#f8f8f8", "#fdf5ee", "#f2f5f8", "#eef2f5"] as const)[i] ?? "#f8f8f8"
|
||||
return (
|
||||
(["#fffbef", "#f8f8f8", "#fdf5ee", "#f2f5f8", "#eef2f5"] as const)[i] ??
|
||||
"#f8f8f8"
|
||||
)
|
||||
}
|
||||
|
||||
function bucketPct(value: number) {
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<n-flex align="center" class="corner">
|
||||
<n-button quaternary v-if="!show" @click="showTutorial">
|
||||
打开{{ TASK_LABEL[taskTab] }}
|
||||
</n-button>
|
||||
<n-button quaternary v-if="!show" @click="showTutorial"> 教程 </n-button>
|
||||
<template v-if="user.loaded && authed">
|
||||
<n-button quaternary @click="emit('format')">整理</n-button>
|
||||
<n-button
|
||||
@@ -38,7 +36,7 @@ import { taskId, taskTab } from "../store/task"
|
||||
import { Account } from "../api"
|
||||
import { Role } from "../utils/type"
|
||||
import { router } from "../router"
|
||||
import { ADMIN_URL, TASK_LABEL } from "../utils/const"
|
||||
import { ADMIN_URL } from "../utils/const"
|
||||
|
||||
const props = defineProps<{
|
||||
submitLoading: boolean
|
||||
|
||||
@@ -63,6 +63,7 @@ async function prepare() {
|
||||
tutorialIds.value = await Tutorial.listDisplay()
|
||||
if (!tutorialIds.value.length) {
|
||||
content.value = "暂无教程"
|
||||
return
|
||||
}
|
||||
if (!tutorialIds.value.includes(step.value)) {
|
||||
step.value = tutorialIds.value[0] as number
|
||||
|
||||
Reference in New Issue
Block a user