refactor(前端): 拆掉 camelCase→snake_case 转换层,契约成为唯一真相
utils/legacy.ts 是迁移期的临时层:新后端一律 camelCase,而组件读的还是
旧 Django 的 snake_case,于是在 api 层做一次递归键名重写。它自己的注释就
写了「迁移完成后这一层应当整体拆掉」。现在拆了。
代价不只是那 96 处包装:每个响应都要递归遍历整个对象重写一遍键名,而且
utils/types.ts 和 packages/contract 是两份真相 —— 手抄的那份还抄歪了好几处。
做法是按域推进,每域都用 vue-tsc 相对基线做差,确认零新增错误后再往下走。
前端的类型现在一律以契约为准,只在必要处窄化(比如 languages/template 的键
窄化成 LANGUAGE),删掉的重复定义包括 WebsiteConfig、LoginSummary、
AchievementSummary、ProblemSet、Contest、User、Profile、AdminTag、
StuckProblem 等等,其中 ClassComparison 有两个组件各手抄了一份。
## 顺带修掉的真 bug
- 管理端公告列表的「可见」开关每次都 400:列表响应被契约 omit 掉了 content,
而更新接口要求 content 必填,toggleVisible 把列表行原样回传。而且是乐观
翻转、不 await 不 catch,管理员看到开关动了、实际没存也没有提示。
改成先 GET 整条再 PUT,加失败提示。
- 删有提交的题时只显示笼统的「删除失败」:前端还在 match 旧 Django 的英文
文案,而后端返回的是 problem-has-submissions + 中文。连同另外 8 处同类
匹配一起改成判错误码 —— 文案是后端随时能改的,match 文案改一个字就静默失效。
- SubmissionStatus.time_limit_exceeded 写成 `1 | 2`,TS 按位或算成 3,和
memory_limit_exceeded 撞了同一个值。后端 judge/status.ts 里这是分开的
两个码,按后端拆成 cpu_/real_ 两项。当前没有代码读这两个成员,但
CLAUDE.md 明确要求判题状态码三处同步。
- 流程图历史翻到没有提交的那一页会直接抛:契约里 submission 是 nullable,
被 any 掩盖成看起来非空。补了 null 分支。
## 契约里被逼出来的三处不诚实
- grade 写成 z.string(),但 averageGrade() 在没有可用数据时返回空串,
前端三张图表拿它查 Record<Grade,...> 会查出 undefined。按实际收紧成
z.enum([...,""]),四个查表点都补了「无评级」分支。
- difficulty 写成 z.string()。核对过生产库 dump:956 道题只有
Low/Mid/High 三个值(761/149/46)。收紧成枚举。
- topReaction 写成 z.string(),既对不上前端渲染的 {type,count},也对不上
旧后端 get_top_reactions 下发的形状。改成正确形状并注明当前恒传 null。
## 明确保留 snake_case 的 54 处
判题沙箱原始输出(cpu_time/exit_code/output_md5/compile_output)、
statistic_info 内容(err_info/time_cost/ast_results)、submission_info
JSONB(is_ac/ac_time/error_number,回滚时旧后端还要读)、SQL 判题引擎的
total_rows/order_sensitive/changed_tables、WebSocket 的 submission_id、
以及数据库选项键 enable_maxkb。每一处都在类型定义旁写了为什么不能改。
language 没有跟着收紧契约 —— 它是配置项、随时可能加语言,收紧会让新语言
在后端 parse 时直接抛。改在 api 边界一处窄化。
## 另外
- utils/http.ts 整个模块已是死代码(四处引用全是 import type),删除。
- profile 的 blog/github/school/major/language 五个字段全链路空转,没有
任何组件读,从契约到类型一并摘除(数据库列不动)。
- admin/account.ts 往 user_profile 塞的 totalScore 是 OI 模式遗留,表里
没这一列。Drizzle 按表定义拼列名会把它静默丢弃,所以没出过错,是死代码。
验证:vue-tsc 143 → 54 条且无新增,apps/api tsc、check:routes、web build
全通过;各域响应形状逐条打接口核对过。
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -35,7 +35,8 @@ function getDifficultyTag(difficulty: string) {
|
||||
function getProgressPercentage() {
|
||||
if (!props.problemSet) return 0
|
||||
return Math.round(
|
||||
(props.problemSet.completed_count / props.problemSet.problems_count) * 100,
|
||||
((props.problemSet.completedCount ?? 0) / props.problemSet.problemsCount) *
|
||||
100,
|
||||
)
|
||||
}
|
||||
|
||||
@@ -78,7 +79,7 @@ function handleJoin() {
|
||||
<n-flex align="center" v-if="isJoined">
|
||||
<n-text strong>完成进度</n-text>
|
||||
<n-text>
|
||||
{{ problemSet.completed_count }} / {{ problemSet.problems_count }}
|
||||
{{ problemSet.completedCount }} / {{ problemSet.problemsCount }}
|
||||
</n-text>
|
||||
</n-flex>
|
||||
<n-progress
|
||||
|
||||
@@ -41,7 +41,7 @@ function handleProblemClick(problemId: string) {
|
||||
style="margin-right: 10px"
|
||||
width="48"
|
||||
icon="fluent-emoji:check-mark-button"
|
||||
v-if="problemSetProblem.is_completed"
|
||||
v-if="problemSetProblem.isCompleted"
|
||||
/>
|
||||
|
||||
<n-flex vertical style="flex: 1">
|
||||
@@ -60,7 +60,7 @@ function handleProblemClick(problemId: string) {
|
||||
{{ DIFFICULTY[problemSetProblem.problem.difficulty] }}
|
||||
</n-tag>
|
||||
<n-text type="info">分数:{{ problemSetProblem.score }}</n-text>
|
||||
<n-text v-if="!problemSetProblem.is_required">(选做)</n-text>
|
||||
<n-text v-if="!problemSetProblem.isRequired">(选做)</n-text>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
|
||||
@@ -16,7 +16,7 @@ const total = ref(0)
|
||||
const statistics = ref<{
|
||||
total: number
|
||||
completed: number
|
||||
avg_progress: number
|
||||
avgProgress: number
|
||||
} | null>(null)
|
||||
const classFilter = ref<string>("")
|
||||
const completionFilter = ref<"" | "completed" | "in_progress" | "not_started">(
|
||||
@@ -42,17 +42,17 @@ async function loadUserProgress() {
|
||||
const params: {
|
||||
limit?: number
|
||||
offset?: number
|
||||
class_name?: string
|
||||
completion_status?: "" | "completed" | "in_progress" | "not_started"
|
||||
className?: string
|
||||
completionStatus?: "" | "completed" | "in_progress" | "not_started"
|
||||
} = {
|
||||
limit: query.limit,
|
||||
offset,
|
||||
}
|
||||
if (classFilter.value.trim()) {
|
||||
params.class_name = classFilter.value.trim()
|
||||
params.className = classFilter.value.trim()
|
||||
}
|
||||
if (completionFilter.value) {
|
||||
params.completion_status = completionFilter.value
|
||||
params.completionStatus = completionFilter.value
|
||||
}
|
||||
const res = await getProblemSetUserProgress(problemSetId.value, params)
|
||||
|
||||
@@ -92,7 +92,7 @@ const stats = computed(() => {
|
||||
return {
|
||||
total: statistics.value.total,
|
||||
completed: statistics.value.completed,
|
||||
avgProgress: Math.round(statistics.value.avg_progress),
|
||||
avgProgress: Math.round(statistics.value.avgProgress),
|
||||
}
|
||||
}
|
||||
// 如果后端还没有返回统计数据,使用默认值
|
||||
@@ -128,7 +128,7 @@ const progressColumns = [
|
||||
key: "join_time",
|
||||
width: 180,
|
||||
render: (row: ProblemSetProgress) =>
|
||||
parseTime(row.join_time, "YYYY-MM-DD HH:mm:ss"),
|
||||
parseTime(row.joinTime, "YYYY-MM-DD HH:mm:ss"),
|
||||
},
|
||||
{
|
||||
title: "已完成数量",
|
||||
@@ -140,12 +140,12 @@ const progressColumns = [
|
||||
key: "completed_problems",
|
||||
width: 300,
|
||||
render: (row: ProblemSetProgress) => {
|
||||
if (row.progress_percentage === 100) {
|
||||
if (row.progressPercentage === 100) {
|
||||
return "全部题目已完成"
|
||||
}
|
||||
if (row.progress_percentage > 50 && row.progress_percentage < 100) {
|
||||
if (row.progressPercentage > 50 && row.progressPercentage < 100) {
|
||||
const completedProblemIds = new Set(
|
||||
row.completed_problems.map((p: any) => p.id),
|
||||
row.completedProblems.map((p: any) => p.id),
|
||||
)
|
||||
const incompleteProblems = allProblems.value.filter(
|
||||
(p) => !completedProblemIds.has(p.id),
|
||||
@@ -164,7 +164,7 @@ const progressColumns = [
|
||||
}
|
||||
return h("div", { style: "max-height: 120px; overflow-y: auto" }, [
|
||||
h(NFlex, {}, () =>
|
||||
row.completed_problems.map((problem: any) =>
|
||||
row.completedProblems.map((problem: any) =>
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
@@ -184,7 +184,7 @@ const progressColumns = [
|
||||
key: "progress_percentage",
|
||||
width: 120,
|
||||
render: (row: ProblemSetProgress) => {
|
||||
return `${row.progress_percentage.toFixed(0)}%`
|
||||
return `${row.progressPercentage.toFixed(0)}%`
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -192,7 +192,7 @@ const progressColumns = [
|
||||
key: "is_completed",
|
||||
width: 100,
|
||||
render: (row: ProblemSetProgress) => {
|
||||
if (row.is_completed) {
|
||||
if (row.isCompleted) {
|
||||
return h(NTag, { type: "success" }, () => "已完成")
|
||||
} else {
|
||||
return h(NTag, { type: "warning" }, () => "进行中")
|
||||
|
||||
@@ -35,7 +35,7 @@ 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
|
||||
isJoined.value = res.data.userProgress?.isJoined || false
|
||||
}
|
||||
|
||||
async function loadProblems() {
|
||||
@@ -48,14 +48,14 @@ async function loadUserBadges() {
|
||||
|
||||
const res = await getUserBadges()
|
||||
userBadges.value = res.data.filter(
|
||||
(badge: UserBadgeType) => badge.badge.problemset === problemSetId.value,
|
||||
(badge: UserBadgeType) => badge.badge.problemsetId === problemSetId.value,
|
||||
)
|
||||
}
|
||||
|
||||
async function init() {
|
||||
await Promise.all([loadProblemSetDetail(), loadProblems()])
|
||||
if (isJoined.value) {
|
||||
if (problemSet.value?.user_progress?.is_completed) {
|
||||
if (problemSet.value?.userProgress?.isCompleted) {
|
||||
celebrate()
|
||||
}
|
||||
loadUserBadges()
|
||||
@@ -100,7 +100,7 @@ async function handleJoinProblemSet() {
|
||||
const showTabs = computed(
|
||||
() =>
|
||||
userStore.isSuperAdmin ||
|
||||
(isJoined.value && problemSet.value?.user_progress?.is_completed),
|
||||
(isJoined.value && problemSet.value?.userProgress?.isCompleted),
|
||||
)
|
||||
|
||||
onMounted(init)
|
||||
|
||||
@@ -3,7 +3,7 @@ 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 type { ProblemSet } from "utils/types"
|
||||
import Pagination from "shared/components/Pagination.vue"
|
||||
import { usePagination } from "shared/composables/pagination"
|
||||
import { useBreakpoints } from "shared/composables/breakpoints"
|
||||
@@ -12,7 +12,7 @@ const router = useRouter()
|
||||
const { isDesktop } = useBreakpoints()
|
||||
|
||||
const total = ref(0)
|
||||
const problemSets = ref<ProblemSetList[]>([])
|
||||
const problemSets = ref<ProblemSet[]>([])
|
||||
|
||||
interface ProblemSetQuery {
|
||||
keyword: string
|
||||
@@ -164,27 +164,25 @@ watch(
|
||||
<n-flex justify="space-between" align="center">
|
||||
<n-flex>
|
||||
<Icon width="20" icon="streamline-emojis:blossom" />
|
||||
<n-text>{{ problemSet.problems_count }} 道题目</n-text>
|
||||
<n-text>{{ problemSet.problemsCount }} 道题目</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
|
||||
problemSet.userProgress?.isJoined &&
|
||||
!problemSet.userProgress?.isCompleted
|
||||
"
|
||||
type="line"
|
||||
:percentage="
|
||||
Math.round(problemSet.user_progress.progress_percentage)
|
||||
Math.round(problemSet.userProgress.progressPercentage)
|
||||
"
|
||||
:height="4"
|
||||
:border-radius="2"
|
||||
style="width: 100px"
|
||||
:color="
|
||||
getProgressColor(
|
||||
problemSet.user_progress.progress_percentage,
|
||||
)
|
||||
getProgressColor(problemSet.userProgress.progressPercentage)
|
||||
"
|
||||
/>
|
||||
<n-tag type="warning" v-if="problemSet.status === 'archived'">
|
||||
@@ -192,17 +190,14 @@ watch(
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="
|
||||
problemSet.user_progress?.is_joined &&
|
||||
!problemSet.user_progress?.is_completed
|
||||
problemSet.userProgress?.isJoined &&
|
||||
!problemSet.userProgress?.isCompleted
|
||||
"
|
||||
type="warning"
|
||||
>
|
||||
已加入
|
||||
</n-tag>
|
||||
<n-tag
|
||||
v-if="problemSet.user_progress?.is_completed"
|
||||
type="error"
|
||||
>
|
||||
<n-tag v-if="problemSet.userProgress?.isCompleted" type="error">
|
||||
已完成
|
||||
</n-tag>
|
||||
</n-flex>
|
||||
@@ -212,7 +207,7 @@ watch(
|
||||
<n-flex align="center" justify="space-between">
|
||||
<n-text depth="3">
|
||||
创建于
|
||||
{{ parseTime(problemSet.create_time, "YYYY-MM-DD") }}
|
||||
{{ parseTime(problemSet.createTime, "YYYY-MM-DD") }}
|
||||
</n-text>
|
||||
<n-flex>
|
||||
<n-tooltip
|
||||
@@ -227,7 +222,7 @@ watch(
|
||||
width="24"
|
||||
height="24"
|
||||
object-fit="cover"
|
||||
:class="{ 'earned-badge': badge.is_earned }"
|
||||
:class="{ 'earned-badge': badge.isEarned }"
|
||||
/>
|
||||
</template>
|
||||
<n-flex vertical size="small">
|
||||
@@ -238,12 +233,12 @@ watch(
|
||||
获取条件:
|
||||
{{
|
||||
getConditionText(
|
||||
badge.condition_type,
|
||||
badge.condition_value,
|
||||
badge.conditionType,
|
||||
badge.conditionValue,
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
<n-text type="primary" v-if="badge.is_earned">
|
||||
<n-text type="primary" v-if="badge.isEarned">
|
||||
✓ 已获得
|
||||
</n-text>
|
||||
</n-flex>
|
||||
|
||||
Reference in New Issue
Block a user