feat(阶段1): 搬入 ojnext 为 apps/web，未改业务代码
This commit is contained in:
109
apps/web/src/oj/problemset/components/ProblemSetHeader.vue
Normal file
109
apps/web/src/oj/problemset/components/ProblemSetHeader.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from "@iconify/vue"
|
||||
import type { ProblemSet, UserBadge as UserBadgeType } from "utils/types"
|
||||
import UserBadge from "shared/components/UserBadge.vue"
|
||||
import { useUserStore } from "shared/store/user"
|
||||
|
||||
interface Props {
|
||||
problemSet: ProblemSet
|
||||
isJoined: boolean
|
||||
isJoining: boolean
|
||||
userBadges: UserBadgeType[]
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: "join"): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
function getDifficultyTag(difficulty: string) {
|
||||
const difficultyMap: Record<
|
||||
string,
|
||||
{ type: "success" | "warning" | "error" | "default"; text: string }
|
||||
> = {
|
||||
Easy: { type: "success", text: "简单" },
|
||||
Medium: { type: "warning", text: "中等" },
|
||||
Hard: { type: "error", text: "困难" },
|
||||
}
|
||||
return difficultyMap[difficulty] || { type: "default", text: "未知" }
|
||||
}
|
||||
|
||||
function getProgressPercentage() {
|
||||
if (!props.problemSet) return 0
|
||||
return Math.round(
|
||||
(props.problemSet.completed_count / props.problemSet.problems_count) * 100,
|
||||
)
|
||||
}
|
||||
|
||||
function handleJoin() {
|
||||
emit("join")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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="fluent-emoji:information" />
|
||||
</template>
|
||||
{{ problemSet.description }}
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
|
||||
<n-flex align="center" v-if="userStore.isAuthed">
|
||||
<!-- 用户徽章显示区域 - 只在已加入且有徽章时显示 -->
|
||||
<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="handleJoin"
|
||||
>
|
||||
加入题单
|
||||
</n-button>
|
||||
<n-tag v-else type="success" size="large">
|
||||
<template #icon>
|
||||
<Icon icon="ph:check-circle-fill" />
|
||||
</template>
|
||||
已加入
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</template>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from "@iconify/vue"
|
||||
import type { ProblemSetProblem } from "utils/types"
|
||||
import { DIFFICULTY } from "utils/constants"
|
||||
import { getTagColor } from "utils/functions"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
|
||||
interface Props {
|
||||
problems: ProblemSetProblem[]
|
||||
isJoined: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: "problem-click", problemId: string): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const { isDesktop } = useBreakpoints()
|
||||
|
||||
function handleProblemClick(problemId: string) {
|
||||
emit("problem-click", problemId)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<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">
|
||||
<Icon
|
||||
style="margin-right: 10px"
|
||||
width="48"
|
||||
icon="fluent-emoji: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-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>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
<div class="tip">
|
||||
<n-text depth="3">题目完成后会自动返回题单页面</n-text>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tip {
|
||||
padding-top: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
268
apps/web/src/oj/problemset/components/UserProgressView.vue
Normal file
268
apps/web/src/oj/problemset/components/UserProgressView.vue
Normal file
@@ -0,0 +1,268 @@
|
||||
<script setup lang="ts">
|
||||
import { h, computed, ref, onMounted, watch } from "vue"
|
||||
import { watchDebounced } from "@vueuse/core"
|
||||
import { parseTime } from "utils/functions"
|
||||
import type { ProblemSetProgress } from "utils/types"
|
||||
import { getProblemSetUserProgress } from "../../api"
|
||||
import { NFlex, NTag } from "naive-ui"
|
||||
import { usePagination } from "shared/composables/pagination"
|
||||
import Pagination from "shared/components/Pagination.vue"
|
||||
|
||||
const route = useRoute()
|
||||
const problemSetId = computed(() => Number(route.params.problemSetId))
|
||||
const progress = ref<ProblemSetProgress[]>([])
|
||||
const loading = ref(false)
|
||||
const total = ref(0)
|
||||
const statistics = ref<{
|
||||
total: number
|
||||
completed: number
|
||||
avg_progress: number
|
||||
} | null>(null)
|
||||
const classFilter = ref<string>("")
|
||||
const completionFilter = ref<"" | "completed" | "in_progress" | "not_started">(
|
||||
"",
|
||||
)
|
||||
const allProblems = ref<Array<{ id: number; _id: string; title: string }>>([])
|
||||
|
||||
// 完成度筛选选项
|
||||
const completionOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "未开始", value: "not_started" },
|
||||
{ label: "进行中", value: "in_progress" },
|
||||
{ label: "已完成", value: "completed" },
|
||||
]
|
||||
|
||||
// 使用分页 composable
|
||||
const { query } = usePagination({}, { defaultLimit: 50 })
|
||||
|
||||
// 加载用户进度数据
|
||||
async function loadUserProgress() {
|
||||
loading.value = true
|
||||
const offset = (query.page - 1) * query.limit
|
||||
const params: {
|
||||
limit?: number
|
||||
offset?: number
|
||||
class_name?: string
|
||||
completion_status?: "" | "completed" | "in_progress" | "not_started"
|
||||
} = {
|
||||
limit: query.limit,
|
||||
offset,
|
||||
}
|
||||
if (classFilter.value.trim()) {
|
||||
params.class_name = classFilter.value.trim()
|
||||
}
|
||||
if (completionFilter.value) {
|
||||
params.completion_status = completionFilter.value
|
||||
}
|
||||
const res = await getProblemSetUserProgress(problemSetId.value, params)
|
||||
|
||||
progress.value = res.data.results
|
||||
total.value = res.data.total
|
||||
// 使用后端返回的统计数据（基于所有数据）
|
||||
if (res.data.statistics) {
|
||||
statistics.value = res.data.statistics
|
||||
}
|
||||
// 保存所有题目信息
|
||||
if (res.data.problems) {
|
||||
allProblems.value = res.data.problems
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 监听分页参数变化
|
||||
watch([() => query.page, () => query.limit], loadUserProgress)
|
||||
// 监听班级过滤变化（防抖）
|
||||
watchDebounced(
|
||||
classFilter,
|
||||
() => {
|
||||
query.page = 1 // 重置到第一页
|
||||
loadUserProgress()
|
||||
},
|
||||
{ debounce: 500 },
|
||||
)
|
||||
// 监听完成度筛选变化
|
||||
watch(completionFilter, () => {
|
||||
query.page = 1 // 重置到第一页
|
||||
loadUserProgress()
|
||||
})
|
||||
|
||||
// 使用后端返回的统计数据
|
||||
const stats = computed(() => {
|
||||
if (statistics.value) {
|
||||
return {
|
||||
total: statistics.value.total,
|
||||
completed: statistics.value.completed,
|
||||
avgProgress: Math.round(statistics.value.avg_progress),
|
||||
}
|
||||
}
|
||||
// 如果后端还没有返回统计数据，使用默认值
|
||||
return {
|
||||
total: total.value,
|
||||
completed: 0,
|
||||
avgProgress: 0,
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(loadUserProgress)
|
||||
|
||||
// 定义表格列
|
||||
const progressColumns = [
|
||||
{
|
||||
title: "排名",
|
||||
key: "rank",
|
||||
width: 80,
|
||||
render: (row: ProblemSetProgress, index: number) => {
|
||||
// 计算全局排名：当前页偏移 + 当前行索引 + 1
|
||||
const globalRank = (query.page - 1) * query.limit + index + 1
|
||||
return globalRank
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "用户",
|
||||
key: "user.username",
|
||||
width: 120,
|
||||
render: (row: ProblemSetProgress) => row.user.username,
|
||||
},
|
||||
{
|
||||
title: "加入时间",
|
||||
key: "join_time",
|
||||
width: 180,
|
||||
render: (row: ProblemSetProgress) =>
|
||||
parseTime(row.join_time, "YYYY-MM-DD HH:mm:ss"),
|
||||
},
|
||||
{
|
||||
title: "已完成数量",
|
||||
key: "completed_problems_count",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "已/未完成题目",
|
||||
key: "completed_problems",
|
||||
width: 300,
|
||||
render: (row: ProblemSetProgress) => {
|
||||
if (row.progress_percentage === 100) {
|
||||
return "全部题目已完成"
|
||||
}
|
||||
if (row.progress_percentage > 50 && row.progress_percentage < 100) {
|
||||
const completedProblemIds = new Set(
|
||||
row.completed_problems.map((p: any) => p.id),
|
||||
)
|
||||
const incompleteProblems = allProblems.value.filter(
|
||||
(p) => !completedProblemIds.has(p.id),
|
||||
)
|
||||
return h("div", { style: "max-height: 120px; overflow-y: auto" }, [
|
||||
h(NFlex, {}, () =>
|
||||
incompleteProblems.map((problem) =>
|
||||
h(
|
||||
NTag,
|
||||
{ type: "warning", size: "small", style: "margin: 2px" },
|
||||
() => `${problem._id}: ${problem.title}`,
|
||||
),
|
||||
),
|
||||
),
|
||||
])
|
||||
}
|
||||
return h("div", { style: "max-height: 120px; overflow-y: auto" }, [
|
||||
h(NFlex, {}, () =>
|
||||
row.completed_problems.map((problem: any) =>
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
type: "success",
|
||||
size: "small",
|
||||
style: "margin: 2px",
|
||||
},
|
||||
() => `${problem._id}: ${problem.title}`,
|
||||
),
|
||||
),
|
||||
),
|
||||
])
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "进度",
|
||||
key: "progress_percentage",
|
||||
width: 120,
|
||||
render: (row: ProblemSetProgress) => {
|
||||
return `${row.progress_percentage.toFixed(0)}%`
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "is_completed",
|
||||
width: 100,
|
||||
render: (row: ProblemSetProgress) => {
|
||||
if (row.is_completed) {
|
||||
return h(NTag, { type: "success" }, () => "已完成")
|
||||
} else {
|
||||
return h(NTag, { type: "warning" }, () => "进行中")
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 过滤条件 -->
|
||||
<n-form label-placement="left" inline>
|
||||
<n-form-item label="班级">
|
||||
<n-input
|
||||
v-model:value="classFilter"
|
||||
placeholder="输入班级名称"
|
||||
style="width: 200px"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="完成度：">
|
||||
<n-select
|
||||
v-model:value="completionFilter"
|
||||
:options="completionOptions"
|
||||
placeholder="完成度"
|
||||
style="width: 160px"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
|
||||
<!-- 统计信息卡片 -->
|
||||
<n-grid :cols="3" :x-gap="16" style="margin-bottom: 16px">
|
||||
<n-grid-item>
|
||||
<n-card size="small">
|
||||
<n-statistic label="总参与人数" :value="stats.total" />
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-card size="small">
|
||||
<n-statistic label="已完成人数" :value="stats.completed" />
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
<n-grid-item>
|
||||
<n-card size="small">
|
||||
<n-statistic
|
||||
label="平均进度"
|
||||
:value="stats.avgProgress.toFixed(0) + '%'"
|
||||
/>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
|
||||
<n-data-table
|
||||
:loading="loading"
|
||||
:columns="progressColumns"
|
||||
:data="progress"
|
||||
:pagination="false"
|
||||
:bordered="false"
|
||||
:single-line="false"
|
||||
/>
|
||||
|
||||
<Pagination
|
||||
:total="total"
|
||||
:limit="query.limit"
|
||||
:page="query.page"
|
||||
@update:limit="(limit: number) => (query.limit = limit)"
|
||||
@update:page="(page: number) => (query.page = page)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
139
apps/web/src/oj/problemset/detail.vue
Normal file
139
apps/web/src/oj/problemset/detail.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
getProblemSetDetail,
|
||||
getProblemSetProblems,
|
||||
joinProblemSet,
|
||||
getUserBadges,
|
||||
} from "../api"
|
||||
import type {
|
||||
ProblemSet,
|
||||
ProblemSetProblem,
|
||||
UserBadge as UserBadgeType,
|
||||
} from "utils/types"
|
||||
import { useFireworks } from "../problem/composables/useFireworks"
|
||||
import ProblemSetHeader from "./components/ProblemSetHeader.vue"
|
||||
import ProblemSetProblemsList from "./components/ProblemSetProblemsList.vue"
|
||||
import UserProgressView from "./components/UserProgressView.vue"
|
||||
import { useUserStore } from "shared/store/user"
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const message = useMessage()
|
||||
|
||||
const { celebrate } = useFireworks()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const problemSetId = computed(() => Number(route.params.problemSetId))
|
||||
|
||||
const problemSet = ref<ProblemSet | null>(null)
|
||||
const problems = ref<ProblemSetProblem[]>([])
|
||||
const isJoined = ref(false)
|
||||
const isJoining = ref(false)
|
||||
const userBadges = ref<UserBadgeType[]>([])
|
||||
const activeTab = ref("problems")
|
||||
|
||||
async function loadProblemSetDetail() {
|
||||
const res = await getProblemSetDetail(problemSetId.value)
|
||||
problemSet.value = res.data
|
||||
isJoined.value = res.data.user_progress?.is_joined || false
|
||||
}
|
||||
|
||||
async function loadProblems() {
|
||||
const res = await getProblemSetProblems(problemSetId.value)
|
||||
problems.value = res.data
|
||||
}
|
||||
|
||||
async function loadUserBadges() {
|
||||
if (!isJoined.value) return
|
||||
|
||||
const res = await getUserBadges()
|
||||
userBadges.value = res.data.filter(
|
||||
(badge: UserBadgeType) => badge.badge.problemset === problemSetId.value,
|
||||
)
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await Promise.all([loadProblemSetDetail(), loadProblems()])
|
||||
if (isJoined.value) {
|
||||
if (problemSet.value?.user_progress?.is_completed) {
|
||||
celebrate()
|
||||
}
|
||||
loadUserBadges()
|
||||
}
|
||||
}
|
||||
|
||||
async function handleProblemClick(problemId: string) {
|
||||
if (!userStore.isAuthed) {
|
||||
message.warning("请先登录！")
|
||||
return
|
||||
}
|
||||
if (!isJoined.value) {
|
||||
message.warning("请先点击【加入题单】按钮！")
|
||||
return
|
||||
}
|
||||
router.push({
|
||||
name: "problemset problem",
|
||||
params: {
|
||||
problemSetId: problemSetId.value,
|
||||
problemID: problemId,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
async function handleJoinProblemSet() {
|
||||
if (isJoining.value) return
|
||||
|
||||
isJoining.value = true
|
||||
try {
|
||||
await joinProblemSet(problemSetId.value)
|
||||
isJoined.value = true
|
||||
message.success("成功加入题单！")
|
||||
// 加入题单后加载用户徽章
|
||||
await loadUserBadges()
|
||||
} catch (err: any) {
|
||||
message.error("加入题单失败：" + (err.data || "未知错误"))
|
||||
} finally {
|
||||
isJoining.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const showTabs = computed(
|
||||
() =>
|
||||
userStore.isSuperAdmin ||
|
||||
(isJoined.value && problemSet.value?.user_progress?.is_completed),
|
||||
)
|
||||
|
||||
onMounted(init)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="problemSet">
|
||||
<ProblemSetHeader
|
||||
:problem-set="problemSet"
|
||||
:is-joined="isJoined"
|
||||
:is-joining="isJoining"
|
||||
:user-badges="userBadges"
|
||||
@join="handleJoinProblemSet"
|
||||
/>
|
||||
<n-tabs v-if="showTabs" v-model:value="activeTab" animated>
|
||||
<n-tab-pane name="problems" tab="题目列表">
|
||||
<ProblemSetProblemsList
|
||||
:problems="problems"
|
||||
:is-joined="isJoined"
|
||||
@problem-click="handleProblemClick"
|
||||
/>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="progress" tab="用户进度">
|
||||
<UserProgressView />
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
<ProblemSetProblemsList
|
||||
v-else
|
||||
:problems="problems"
|
||||
:is-joined="isJoined"
|
||||
@problem-click="handleProblemClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
274
apps/web/src/oj/problemset/list.vue
Normal file
274
apps/web/src/oj/problemset/list.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { useRouteQuery } from "@vueuse/router"
|
||||
import { getProblemSetList } from "../api"
|
||||
import { parseTime } from "utils/functions"
|
||||
import type { ProblemSetList } from "utils/types"
|
||||
import Pagination from "shared/components/Pagination.vue"
|
||||
import { usePagination } from "shared/composables/pagination"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
|
||||
const router = useRouter()
|
||||
const { isDesktop } = useBreakpoints()
|
||||
|
||||
const total = ref(0)
|
||||
const problemSets = ref<ProblemSetList[]>([])
|
||||
|
||||
interface ProblemSetQuery {
|
||||
keyword: string
|
||||
difficulty: string
|
||||
status: string
|
||||
}
|
||||
|
||||
// 使用分页 composable
|
||||
const { query, clearQuery } = usePagination<ProblemSetQuery>(
|
||||
{
|
||||
keyword: useRouteQuery("keyword", "").value,
|
||||
difficulty: useRouteQuery("difficulty", "").value,
|
||||
status: useRouteQuery("status", "").value,
|
||||
},
|
||||
{
|
||||
defaultLimit: 30,
|
||||
},
|
||||
)
|
||||
|
||||
const difficultyOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "简单", value: "Easy" },
|
||||
{ label: "中等", value: "Medium" },
|
||||
{ label: "困难", value: "Hard" },
|
||||
]
|
||||
|
||||
const statusOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "活跃", value: "active" },
|
||||
{ label: "已归档", value: "archived" },
|
||||
]
|
||||
|
||||
async function listProblemSets() {
|
||||
if (query.page < 1) query.page = 1
|
||||
const offset = (query.page - 1) * query.limit
|
||||
const res = await getProblemSetList(
|
||||
offset,
|
||||
query.limit,
|
||||
query.keyword,
|
||||
query.difficulty,
|
||||
query.status,
|
||||
)
|
||||
total.value = res.data.total
|
||||
problemSets.value = res.data.results
|
||||
}
|
||||
|
||||
function getDifficultyTag(difficulty: string) {
|
||||
const difficultyMap: Record<
|
||||
string,
|
||||
{ type: "success" | "warning" | "error" | "default"; text: string }
|
||||
> = {
|
||||
Easy: { type: "success", text: "简单" },
|
||||
Medium: { type: "warning", text: "中等" },
|
||||
Hard: { type: "error", text: "困难" },
|
||||
}
|
||||
return difficultyMap[difficulty] || { type: "default", text: "未知" }
|
||||
}
|
||||
|
||||
function goToProblemSet(problemSetId: number) {
|
||||
router.push(`/problemset/${problemSetId}`)
|
||||
}
|
||||
|
||||
function getConditionText(
|
||||
conditionType: string,
|
||||
conditionValue: number,
|
||||
): string {
|
||||
const conditionMap: Record<string, string> = {
|
||||
all_problems: "完成所有题目",
|
||||
problem_count: `完成 ${conditionValue} 道题目`,
|
||||
score: `达到 ${conditionValue} 分`,
|
||||
}
|
||||
return conditionMap[conditionType] || "未知条件"
|
||||
}
|
||||
|
||||
function getProgressColor(percentage: number) {
|
||||
if (percentage >= 80) return "#18a058" // 绿色
|
||||
if (percentage >= 50) return "#f0a020" // 橙色
|
||||
return "#d03050" // 红色
|
||||
}
|
||||
|
||||
onMounted(listProblemSets)
|
||||
|
||||
// 监听搜索关键词变化（防抖）
|
||||
watchDebounced(() => query.keyword, listProblemSets, {
|
||||
debounce: 500,
|
||||
maxWait: 1000,
|
||||
})
|
||||
|
||||
// 监听其他查询条件变化
|
||||
watch(
|
||||
() => [query.page, query.limit, query.difficulty, query.status],
|
||||
listProblemSets,
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-flex vertical size="large">
|
||||
<n-space>
|
||||
<n-space align="center">
|
||||
<n-text>难度</n-text>
|
||||
<n-select
|
||||
v-model:value="query.difficulty"
|
||||
:options="difficultyOptions"
|
||||
placeholder="选择难度"
|
||||
style="width: 120px"
|
||||
clearable
|
||||
/>
|
||||
</n-space>
|
||||
<n-space align="center">
|
||||
<n-text>状态</n-text>
|
||||
<n-select
|
||||
v-model:value="query.status"
|
||||
:options="statusOptions"
|
||||
placeholder="选择状态"
|
||||
style="width: 120px"
|
||||
clearable
|
||||
/>
|
||||
</n-space>
|
||||
<n-input
|
||||
v-model:value="query.keyword"
|
||||
placeholder="搜索题单..."
|
||||
clearable
|
||||
@clear="clearQuery"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</n-space>
|
||||
|
||||
<n-grid
|
||||
v-if="problemSets.length > 0"
|
||||
:cols="isDesktop ? 3 : 1"
|
||||
:x-gap="16"
|
||||
:y-gap="16"
|
||||
>
|
||||
<n-grid-item v-for="problemSet in problemSets" :key="problemSet.id">
|
||||
<n-card
|
||||
hoverable
|
||||
@click="goToProblemSet(problemSet.id)"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<template #header>
|
||||
<n-flex justify="space-between" align="center">
|
||||
<n-text strong>{{ problemSet.title }}</n-text>
|
||||
<n-tag :type="getDifficultyTag(problemSet.difficulty).type">
|
||||
{{ getDifficultyTag(problemSet.difficulty).text }}
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
</template>
|
||||
<n-flex vertical size="large">
|
||||
<n-flex justify="space-between" align="center">
|
||||
<n-flex>
|
||||
<Icon width="20" icon="streamline-emojis:blossom" />
|
||||
<n-text>{{ problemSet.problems_count }} 道题目</n-text>
|
||||
</n-flex>
|
||||
|
||||
<n-flex align="center" style="height: 28px">
|
||||
<!-- 用户进度显示 -->
|
||||
<n-progress
|
||||
v-if="
|
||||
problemSet.user_progress?.is_joined &&
|
||||
!problemSet.user_progress?.is_completed
|
||||
"
|
||||
type="line"
|
||||
:percentage="
|
||||
Math.round(problemSet.user_progress.progress_percentage)
|
||||
"
|
||||
:height="4"
|
||||
:border-radius="2"
|
||||
style="width: 100px"
|
||||
:color="
|
||||
getProgressColor(
|
||||
problemSet.user_progress.progress_percentage,
|
||||
)
|
||||
"
|
||||
/>
|
||||
<n-tag type="warning" v-if="problemSet.status === 'archived'">
|
||||
已归档
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="
|
||||
problemSet.user_progress?.is_joined &&
|
||||
!problemSet.user_progress?.is_completed
|
||||
"
|
||||
type="warning"
|
||||
>
|
||||
已加入
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="problemSet.user_progress?.is_completed"
|
||||
type="error"
|
||||
>
|
||||
已完成
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
|
||||
<!-- 奖章显示 -->
|
||||
<n-flex align="center" justify="space-between">
|
||||
<n-text depth="3">
|
||||
创建于
|
||||
{{ parseTime(problemSet.create_time, "YYYY-MM-DD") }}
|
||||
</n-text>
|
||||
<n-flex>
|
||||
<n-tooltip
|
||||
v-for="badge in problemSet.badges"
|
||||
:key="badge.id"
|
||||
trigger="hover"
|
||||
>
|
||||
<template #trigger>
|
||||
<n-image
|
||||
:src="badge.icon"
|
||||
:alt="badge.name"
|
||||
width="24"
|
||||
height="24"
|
||||
object-fit="cover"
|
||||
:class="{ 'earned-badge': badge.is_earned }"
|
||||
/>
|
||||
</template>
|
||||
<n-flex vertical size="small">
|
||||
<span style="font-weight: bold">
|
||||
徽章: {{ badge.name }}
|
||||
</span>
|
||||
<span>
|
||||
获取条件:
|
||||
{{
|
||||
getConditionText(
|
||||
badge.condition_type,
|
||||
badge.condition_value,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<n-text type="primary" v-if="badge.is_earned">
|
||||
✓ 已获得
|
||||
</n-text>
|
||||
</n-flex>
|
||||
</n-tooltip>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-card>
|
||||
</n-grid-item>
|
||||
</n-grid>
|
||||
|
||||
<Pagination
|
||||
v-if="problemSets.length > 0"
|
||||
:total="total"
|
||||
v-model:limit="query.limit"
|
||||
v-model:page="query.page"
|
||||
/>
|
||||
</n-flex>
|
||||
<n-empty v-if="problemSets.length === 0"></n-empty>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.earned-badge {
|
||||
border: 2px solid #ffd700;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user