@@ -44,10 +44,6 @@ function getDifficultyTag(difficulty: string) {
|
||||
return difficultyMap[difficulty] || { type: "default", text: "未知" }
|
||||
}
|
||||
|
||||
function goToProblem(problemId: string) {
|
||||
router.push(`/problemset/${problemSetId.value}/problem/${problemId}`)
|
||||
}
|
||||
|
||||
function getProgressPercentage() {
|
||||
if (!problemSet.value) return 0
|
||||
return Math.round(
|
||||
@@ -120,118 +116,117 @@ onMounted(init)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="problemSet">
|
||||
<!-- 题单信息头部 -->
|
||||
<n-card style="margin-bottom: 24px">
|
||||
<n-flex justify="space-between" align="center">
|
||||
<n-flex align="center">
|
||||
<n-tag type="warning" v-if="problemSet.status === 'archived'">
|
||||
已归档
|
||||
</n-tag>
|
||||
<n-tag :type="getDifficultyTag(problemSet.difficulty).type">
|
||||
{{ getDifficultyTag(problemSet.difficulty).text }}
|
||||
</n-tag>
|
||||
<n-h2 style="margin: 0">{{ problemSet.title }}</n-h2>
|
||||
<n-tooltip trigger="hover" v-if="problemSet.description">
|
||||
<template #trigger>
|
||||
<Icon width="20" icon="emojione:information" />
|
||||
</template>
|
||||
{{ problemSet.description }}
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
|
||||
<n-flex align="center">
|
||||
<!-- 用户徽章显示区域 - 只在已加入且有徽章时显示 -->
|
||||
<n-flex v-if="isJoined && userBadges.length > 0" align="center">
|
||||
<n-text>已获徽章</n-text>
|
||||
<UserBadge
|
||||
v-for="badge in userBadges"
|
||||
:key="badge.id"
|
||||
:badge="badge"
|
||||
/>
|
||||
</n-flex>
|
||||
|
||||
<!-- 完成进度 - 只在已加入时显示 -->
|
||||
<n-flex align="center" v-if="isJoined">
|
||||
<n-text strong>完成进度</n-text>
|
||||
<n-text>
|
||||
{{ problemSet.completed_count }} / {{ problemSet.problems_count }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
<n-progress
|
||||
v-if="isJoined"
|
||||
:percentage="getProgressPercentage()"
|
||||
:height="8"
|
||||
:border-radius="4"
|
||||
style="width: 200px"
|
||||
/>
|
||||
<n-button
|
||||
v-if="!isJoined"
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="isJoining"
|
||||
@click="handleJoinProblemSet"
|
||||
>
|
||||
加入题单
|
||||
</n-button>
|
||||
<n-tag v-else type="success" size="large">
|
||||
<template #icon>
|
||||
<Icon icon="material-symbols:check-circle" />
|
||||
</template>
|
||||
已加入
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
<n-card v-if="problemSet" style="margin-bottom: 24px">
|
||||
<n-flex justify="space-between" align="center">
|
||||
<n-flex align="center">
|
||||
<n-tag type="warning" v-if="problemSet.status === 'archived'">
|
||||
已归档
|
||||
</n-tag>
|
||||
<n-tag :type="getDifficultyTag(problemSet.difficulty).type">
|
||||
{{ getDifficultyTag(problemSet.difficulty).text }}
|
||||
</n-tag>
|
||||
<n-h2 style="margin: 0">{{ problemSet.title }}</n-h2>
|
||||
<n-tooltip trigger="hover" v-if="problemSet.description">
|
||||
<template #trigger>
|
||||
<Icon width="20" icon="emojione:information" />
|
||||
</template>
|
||||
{{ problemSet.description }}
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
|
||||
<!-- 题目列表 -->
|
||||
<n-grid :cols="isDesktop ? 4 : 1" :x-gap="16" :y-gap="16">
|
||||
<n-grid-item
|
||||
v-for="(problemSetProblem, index) in problems"
|
||||
:key="problemSetProblem.id"
|
||||
>
|
||||
<n-card
|
||||
hoverable
|
||||
@click="handleProblemClick(problemSetProblem.problem._id)"
|
||||
style="cursor: pointer"
|
||||
<n-flex align="center">
|
||||
<!-- 用户徽章显示区域 - 只在已加入且有徽章时显示 -->
|
||||
<n-flex v-if="isJoined && userBadges.length > 0" align="center">
|
||||
<n-text>已获徽章</n-text>
|
||||
<UserBadge
|
||||
v-for="badge in userBadges"
|
||||
:key="badge.id"
|
||||
:badge="badge"
|
||||
/>
|
||||
</n-flex>
|
||||
|
||||
<!-- 完成进度 - 只在已加入时显示 -->
|
||||
<n-flex align="center" v-if="isJoined">
|
||||
<n-text strong>完成进度</n-text>
|
||||
<n-text>
|
||||
{{ problemSet.completed_count }} / {{ problemSet.problems_count }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
<n-progress
|
||||
v-if="isJoined"
|
||||
:percentage="getProgressPercentage()"
|
||||
:height="8"
|
||||
:border-radius="4"
|
||||
style="width: 200px"
|
||||
/>
|
||||
<n-button
|
||||
v-if="!isJoined"
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="isJoining"
|
||||
@click="handleJoinProblemSet"
|
||||
>
|
||||
<n-flex align="center">
|
||||
<Icon
|
||||
style="margin-right: 12px"
|
||||
width="50"
|
||||
icon="noto:check-mark-button"
|
||||
v-if="problemSetProblem.is_completed"
|
||||
/>
|
||||
加入题单
|
||||
</n-button>
|
||||
<n-tag v-else type="success" size="large">
|
||||
<template #icon>
|
||||
<Icon icon="material-symbols:check-circle" />
|
||||
</template>
|
||||
已加入
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
<n-grid v-if="problemSet" :cols="isDesktop ? 4 : 1" :x-gap="16" :y-gap="16">
|
||||
<n-grid-item
|
||||
v-for="(problemSetProblem, index) in problems"
|
||||
:key="problemSetProblem.id"
|
||||
>
|
||||
<n-card
|
||||
hoverable
|
||||
@click="handleProblemClick(problemSetProblem.problem._id)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<n-flex align="center">
|
||||
<Icon
|
||||
style="margin-right: 12px"
|
||||
width="50"
|
||||
icon="noto:check-mark-button"
|
||||
v-if="problemSetProblem.is_completed"
|
||||
/>
|
||||
|
||||
<n-flex vertical style="flex: 1">
|
||||
<n-flex align="center">
|
||||
<n-h4 style="margin: 0">#{{ index + 1 }}</n-h4>
|
||||
<n-flex vertical style="flex: 1">
|
||||
<n-flex align="center">
|
||||
<n-h4 style="margin: 0">#{{ index + 1 }}</n-h4>
|
||||
<n-h4 style="margin: 0">
|
||||
{{ problemSetProblem.problem.title }}
|
||||
</n-h4>
|
||||
</n-flex>
|
||||
|
||||
<n-h4 style="margin: 0">
|
||||
{{ problemSetProblem.problem.title }}
|
||||
</n-h4>
|
||||
</n-flex>
|
||||
|
||||
<n-flex align="center" size="small">
|
||||
<n-tag
|
||||
:type="getTagColor(problemSetProblem.problem.difficulty)"
|
||||
size="small"
|
||||
>
|
||||
{{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
|
||||
</n-tag>
|
||||
<n-text type="info">
|
||||
分数：{{ problemSetProblem.score }}
|
||||
</n-text>
|
||||
<n-text v-if="!problemSetProblem.is_required">
|
||||
（选做）
|
||||
</n-text>
|
||||
</n-flex>
|
||||
<n-flex align="center" size="small">
|
||||
<n-tag
|
||||
:type="getTagColor(problemSetProblem.problem.difficulty)"
|
||||
size="small"
|
||||
>
|
||||
{{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
|
||||
</n-tag>
|
||||
<n-text type="info"> 分数：{{ problemSetProblem.score }} </n-text>
|
||||
<n-text v-if="!problemSetProblem.is_required"> （选做） </n-text>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
|
||||
<div class="tip">
|
||||
<n-text :deep="3">* 题目完成后会自动返回题单页面</n-text>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.tip {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user