xuyueandClaude Opus 5.5
c17f88cdbb
Deploy / deploy (push) Canceled after 0s
- 列表：布置中的大卡片（做对几道、布置到哪天、再做对几道拿哪个奖章），其余小卡片，加入过的在前 - 详情：进度 + 奖章阶梯（下一个金圈「再做对 n 道」），题目两列写几点做对 / 交过几次； 以前做对过的标「旧代码先藏着」；做完整条变绿，烟花只在做完那一刻放 - 老师多一个「全班情况」页签；题目页从链接直接进来没加入时，条上给「加入题单」 - 后台一屏编辑：布置一周 / 两周 / 四周 / 选日期，公开开关，粘贴多个题号一次加，拖动排序，奖章只剩两种条件 - 旧代码藏着的地方都说清楚是哪个题单、哪天之后能看 - 修掉列表卡片把选做题数说成「新加了 N 题」 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
118 lines
3.5 KiB
Vue
118 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import PageHeader from "admin/components/PageHeader.vue"
|
|
import Pagination from "shared/components/Pagination.vue"
|
|
import { usePagination } from "shared/composables/pagination"
|
|
import { parseTime } from "utils/functions"
|
|
import type { AdminProblemSet } from "utils/types"
|
|
import { getProblemSetList, toggleProblemSetVisible } from "../api"
|
|
import { NButton, NSwitch, NTag } from "naive-ui"
|
|
|
|
/**
|
|
* 后台题单列表。难度、状态两列和筛选拿掉了（线上全是简单 / 活跃，「状态 + 可见」合成了「公开」），
|
|
* 换成老师真正关心的：几道题、多少人加入 / 做完、布置到哪天。点一行进一屏编辑
|
|
*/
|
|
const router = useRouter()
|
|
const total = ref(0)
|
|
const problemSets = ref<AdminProblemSet[]>([])
|
|
|
|
const { query, clearQuery } = usePagination<{ keyword: string }>({ keyword: "" })
|
|
|
|
function edit(row: AdminProblemSet) {
|
|
router.push({ name: "admin problemset edit", params: { problemSetId: row.id } })
|
|
}
|
|
|
|
const columns: DataTableColumn<AdminProblemSet>[] = [
|
|
{ title: "ID", key: "id", width: 70 },
|
|
{
|
|
title: "题单",
|
|
key: "title",
|
|
minWidth: 200,
|
|
render: (row) =>
|
|
h(NButton, { text: true, onClick: () => edit(row) }, { default: () => row.title }),
|
|
},
|
|
{ title: "题数", key: "problemsCount", width: 70 },
|
|
{
|
|
title: "加入 / 做完",
|
|
key: "participantCount",
|
|
width: 110,
|
|
render: (row) => `${row.participantCount} / ${row.completedCount}`,
|
|
},
|
|
{ title: "奖章", key: "badgeCount", width: 70 },
|
|
{
|
|
title: "布置",
|
|
key: "assignedUntil",
|
|
width: 130,
|
|
render: (row) =>
|
|
row.assigning
|
|
? h(
|
|
NTag,
|
|
{ type: "info", size: "small", bordered: false },
|
|
{ default: () => `到 ${parseTime(row.assignedUntil!, "M月D日")}` },
|
|
)
|
|
: "—",
|
|
},
|
|
{
|
|
title: "创建者",
|
|
key: "createdBy",
|
|
width: 110,
|
|
render: (row) => row.createdBy.username,
|
|
},
|
|
{
|
|
title: "创建时间",
|
|
key: "createTime",
|
|
width: 120,
|
|
render: (row) => parseTime(row.createTime, "YYYY-MM-DD"),
|
|
},
|
|
{
|
|
title: "公开",
|
|
key: "visible",
|
|
width: 80,
|
|
render: (row) =>
|
|
h(NSwitch, {
|
|
value: row.visible,
|
|
size: "small",
|
|
rubberBand: false,
|
|
onUpdateValue: () => toggleVisible(row.id),
|
|
}),
|
|
},
|
|
]
|
|
|
|
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)
|
|
total.value = res.total
|
|
problemSets.value = res.results
|
|
}
|
|
|
|
async function toggleVisible(problemSetId: number) {
|
|
const updated = await toggleProblemSetVisible(problemSetId)
|
|
problemSets.value = problemSets.value.map((it) => (it.id === problemSetId ? updated : it))
|
|
}
|
|
|
|
onMounted(listProblemSets)
|
|
watchDebounced(() => query.keyword, listProblemSets, { debounce: 500, maxWait: 1000 })
|
|
watch(() => [query.page, query.limit], listProblemSets)
|
|
</script>
|
|
|
|
<template>
|
|
<PageHeader title="题单列表">
|
|
<template #actions>
|
|
<n-button type="primary" @click="router.push({ name: 'admin problemset create' })">
|
|
新建题单
|
|
</n-button>
|
|
</template>
|
|
<template #filters>
|
|
<n-input
|
|
v-model:value="query.keyword"
|
|
placeholder="搜题单名字"
|
|
clearable
|
|
@clear="clearQuery"
|
|
style="width: 220px"
|
|
/>
|
|
</template>
|
|
</PageHeader>
|
|
<n-data-table striped :columns="columns" :data="problemSets" />
|
|
<Pagination :total="total" v-model:limit="query.limit" v-model:page="query.page" />
|
|
</template>
|