fix
This commit is contained in:
83
public/tailwindcss.min.js
vendored
83
public/tailwindcss.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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
|
||||
|
||||
@@ -101,7 +101,13 @@ const canSubmit = computed(
|
||||
)
|
||||
async function getContent() {
|
||||
list.value = await Challenge.list()
|
||||
show(Number(route.params.display))
|
||||
const display = Number(route.params.display)
|
||||
const target = list.value.find((item) => item.display === display)
|
||||
if (target) {
|
||||
show(display)
|
||||
} else if (list.value.length > 0) {
|
||||
show(list.value[0].display)
|
||||
}
|
||||
}
|
||||
|
||||
function createNew() {
|
||||
|
||||
@@ -1,40 +1,36 @@
|
||||
<template>
|
||||
<n-split :size="leftSize" min="350px" max="700px">
|
||||
<template #1>
|
||||
<div class="left-panel">
|
||||
<n-tabs v-model:value="activeTab" type="line" class="left-tabs">
|
||||
<template #prefix>
|
||||
<n-button text @click="back" style="margin: 0 8px">
|
||||
<Icon :width="20" icon="pepicons-pencil:arrow-left" />
|
||||
</n-button>
|
||||
</template>
|
||||
<n-tab-pane name="desc" tab="挑战描述" display-directive="show">
|
||||
<div
|
||||
class="markdown-body"
|
||||
style="padding: 12px; overflow-y: auto; height: 100%"
|
||||
v-html="challengeContent"
|
||||
/>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="chat" tab="AI 对话" display-directive="show">
|
||||
<PromptPanel />
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<template #2>
|
||||
<div class="right-panel">
|
||||
<Preview
|
||||
:html="html"
|
||||
:css="css"
|
||||
:js="js"
|
||||
show-code-button
|
||||
clearable
|
||||
@showCode="showCode = true"
|
||||
@clear="clearAll"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</n-split>
|
||||
<n-layout has-sider style="height: 100vh">
|
||||
<n-layout-sider width="40%" bordered content-style="height: 100%; overflow: hidden;">
|
||||
<n-tabs v-model:value="activeTab" type="line" class="left-tabs">
|
||||
<template #prefix>
|
||||
<n-button text @click="back" style="margin: 0 8px">
|
||||
<Icon :width="20" icon="pepicons-pencil:arrow-left" />
|
||||
</n-button>
|
||||
</template>
|
||||
<n-tab-pane name="desc" tab="挑战描述" display-directive="show">
|
||||
<div
|
||||
class="markdown-body"
|
||||
style="padding: 12px; overflow-y: auto; height: 100%"
|
||||
v-html="challengeContent"
|
||||
/>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="chat" tab="AI 对话" display-directive="show">
|
||||
<PromptPanel />
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-layout-sider>
|
||||
<n-layout-content content-style="height: 100%; overflow: hidden;">
|
||||
<Preview
|
||||
:html="html"
|
||||
:css="css"
|
||||
:js="js"
|
||||
show-code-button
|
||||
clearable
|
||||
@showCode="showCode = true"
|
||||
@clear="clearAll"
|
||||
/>
|
||||
</n-layout-content>
|
||||
</n-layout>
|
||||
<n-modal
|
||||
v-model:show="showCode"
|
||||
preset="card"
|
||||
@@ -66,6 +62,7 @@ import Preview from "../components/Preview.vue"
|
||||
import { Challenge, Submission } from "../api"
|
||||
import { html, css, js } from "../store/editors"
|
||||
import { taskId } from "../store/task"
|
||||
import { authed } from "../store/user"
|
||||
import {
|
||||
connectPrompt,
|
||||
disconnectPrompt,
|
||||
@@ -79,9 +76,7 @@ const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
|
||||
const leftSize = ref(0.4)
|
||||
const activeTab = ref("desc")
|
||||
const challengeTitle = ref("")
|
||||
const challengeContent = ref("")
|
||||
const showCode = ref(false)
|
||||
|
||||
@@ -93,8 +88,8 @@ async function loadChallenge() {
|
||||
const display = Number(route.params.display)
|
||||
const data = await Challenge.get(display)
|
||||
taskId.value = data.task_ptr
|
||||
challengeTitle.value = `#${data.display} ${data.title}`
|
||||
challengeContent.value = await marked.parse(data.content, { async: true })
|
||||
if (!authed.value) return
|
||||
loadHistory(data.task_ptr) // HTTP preload — async, non-blocking
|
||||
connectPrompt(data.task_ptr) // WebSocket — synchronous open
|
||||
setOnCodeComplete(async (code) => {
|
||||
@@ -129,11 +124,6 @@ onUnmounted(disconnectPrompt)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.left-panel {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-tabs {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -150,9 +140,4 @@ onUnmounted(disconnectPrompt)
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -25,7 +25,6 @@ async function init() {
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>${submission.css}</style>
|
||||
<link rel="stylesheet" href="/normalize.min.css" />
|
||||
<script src="/tailwindcss.min.js"><\/script>
|
||||
</head>
|
||||
<body>
|
||||
${submission.html}
|
||||
|
||||
@@ -93,7 +93,13 @@ const canSubmit = computed(
|
||||
)
|
||||
async function getContent() {
|
||||
list.value = await Tutorial.list()
|
||||
show(Number(route.params.display))
|
||||
const display = Number(route.params.display)
|
||||
const target = list.value.find((item) => item.display === display)
|
||||
if (target) {
|
||||
show(display)
|
||||
} else if (list.value.length > 0) {
|
||||
show(list.value[0].display)
|
||||
}
|
||||
}
|
||||
|
||||
function createNew() {
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
import { useStorage } from "@vueuse/core"
|
||||
import { STORAGE_KEY } from "../utils/const"
|
||||
|
||||
const defaultHTML = `<div class="welcome">黄岩一职</div>`
|
||||
const defaultCSS = `.welcome {
|
||||
color: red;
|
||||
font-size: 24px;
|
||||
}`
|
||||
const defaultHTML = ``
|
||||
const defaultCSS = ``
|
||||
|
||||
export const html = useStorage(STORAGE_KEY.HTML, defaultHTML)
|
||||
export const css = useStorage(STORAGE_KEY.CSS, defaultCSS)
|
||||
|
||||
@@ -47,8 +47,3 @@ export enum TASK_TYPE {
|
||||
Tutorial = "tutorial",
|
||||
Challenge = "challenge",
|
||||
}
|
||||
|
||||
export const TASK_LABEL = {
|
||||
[TASK_TYPE.Tutorial]: "教程",
|
||||
[TASK_TYPE.Challenge]: "挑战",
|
||||
} as const
|
||||
|
||||
Reference in New Issue
Block a user