xuyue/OJ2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(前端): 拆掉 camelCase→snake_case 转换层，契约成为唯一真相

Browse Source 
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:
xuyue
2026-08-25 13:44:24 -06:00
co-authored by Claude Opus 5
parent b5edd6faf5
commit c2a81209d7
125 changed files with 1650 additions and 2252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/oj/rank/list.vue
+44 -77
View File
@@ -1,4 +1,10 @@
<script setup lang="ts">
import type {
ClassComparison,
ClassRankItem as ClassRank,
ClassUserRank,
Rank,
} from "utils/types"
import { formatISO, sub, type Duration } from "date-fns"
import { NButton, NFlex } from "naive-ui"
import {
@@ -10,7 +16,6 @@ import {
} from "oj/api"
import { useBreakpoints } from "shared/composables/breakpoints"
import { getACRate, getCSRFToken } from "utils/functions"
import type { Rank } from "utils/types"
import Pagination from "shared/components/Pagination.vue"
import { ChartType } from "utils/constants"
import { renderTableTitle } from "utils/renders"
@@ -39,6 +44,7 @@ const query = reactive({
limit: 10,
page: 1,
})
const message = useMessage()
const rankChart = ref<Rank[]>([])
const activityChart = ref<Rank[]>([])
const duration = ref("months:1")
@@ -46,7 +52,7 @@ const classData = ref<ClassRank[]>([])
const classQuery = reactive({
grade: gradeOptions[0].value,
})
const myClassData = ref<UserRank[]>([])
const myClassData = ref<ClassUserRank["ranks"]>([])
const myRank = ref(-1)
const myClassName = ref("")
const myClassScope = ref<"window" | "all">("window")
@@ -137,44 +143,6 @@ async function analyzeSingleClassWithAI() {
}
}
interface ClassRank {
rank: number
class_name: string
user_count: number
total_ac: number
total_submission: number
avg_ac: number
ac_rate: number
}
interface ClassComparison {
class_name: string
user_count: number
total_ac: number
total_submission: number
avg_ac: number
median_ac: number
q1_ac: number
q3_ac: number
iqr: number
std_dev: number
top10_avg: number
middle80_avg: number
bottom10_avg: number
excellent_rate: number
pass_rate: number
active_rate: number
ac_rate: number
composite_score: number
}
interface UserRank {
rank: number
username: string
accepted_number: number
submission_number: number
}
async function init() {
const offset = (query.page - 1) * query.limit
const res = await getRank(offset, query.limit, 100)
@@ -251,7 +219,7 @@ const columns: DataTableColumn<Rank>[] = [
key: "rate",
width: 120,
align: "center",
render: (row) => getACRate(row.accepted_number, row.submission_number),
render: (row) => getACRate(row.acceptedNumber, row.submissionNumber),
},
]
@@ -269,15 +237,14 @@ async function listActivity() {
const current = Date.now()
const start = formatISO(sub(current, subOptions.value))
const res = await getActivityRank(start)
activityChart.value = res.data.map(
(d: { username: string; count: number }) => ({
user: {
username: d.username,
},
accepted_number: d.count,
submission_number: 0,
}),
)
// 活动榜只有「用户名 + 做题数」，塞进榜单图表复用的 Rank 形状里
activityChart.value = res.data.map((d, index) => ({
id: index,
user: { id: index, username: d.username, realName: null },
acceptedNumber: d.count,
submissionNumber: 0,
mood: null,
}))
}
async function listRank() {
@@ -321,7 +288,7 @@ const classColumns: DataTableColumn<ClassRank>[] = [
title: "班级",
key: "class_name",
render: (row) =>
`${row.class_name.slice(0, 2)}计算机${row.class_name.slice(2)}班`,
`${row.className.slice(0, 2)}计算机${row.className.slice(2)}班`,
minWidth: 120,
titleAlign: "center",
align: "center",
@@ -360,7 +327,7 @@ const classColumns: DataTableColumn<ClassRank>[] = [
width: 90,
titleAlign: "center",
align: "center",
render: (row) => `${row.ac_rate}%`,
render: (row) => `${row.acRate}%`,
},
{
title: "详情",
@@ -374,14 +341,14 @@ const classColumns: DataTableColumn<ClassRank>[] = [
{
text: true,
type: "info",
onClick: () => loadClassDetail(row.class_name),
onClick: () => loadClassDetail(row.className),
},
() => "查看",
),
},
]
const myClassColumns: DataTableColumn<UserRank>[] = [
const myClassColumns: DataTableColumn<ClassUserRank["ranks"][number]>[] = [
{
title: "排名",
key: "rank",
@@ -448,7 +415,7 @@ async function listClassRank() {
if (!userStore.user) {
await userStore.getMyProfile()
}
const className = userStore.user?.class_name
const className = userStore.user?.className
if (className) {
classQuery.grade = parseInt(className.slice(0, 2))
}
@@ -464,8 +431,8 @@ async function listMyClassRank() {
: 0
const limit = myClassScope.value === "all" ? myClassQuery.limit : undefined
const res = await getUserClassRank(myClassScope.value, offset, limit)
myRank.value = res.data.my_rank
myClassName.value = res.data.class_name
myRank.value = res.data.myRank
myClassName.value = res.data.className
myClassData.value = res.data.ranks
myClassTotal.value = res.data.total ?? res.data.ranks.length
if (myClassScope.value === "window") {
@@ -610,7 +577,7 @@ watch(
preset="card"
:title="
classDetailData
? `${classDetailData.class_name.slice(0, 2)}计算机${classDetailData.class_name.slice(2)}班`
? `${classDetailData.className.slice(0, 2)}计算机${classDetailData.className.slice(2)}班`
: '班级详情'
"
:style="{ width: '700px', maxWidth: '95vw' }"
@@ -621,7 +588,7 @@ watch(
<n-gi>
<n-statistic
label="总AC数"
:value="classDetailData.total_ac"
:value="classDetailData.totalAc"
size="large"
class="stat-total-ac"
>
@@ -633,7 +600,7 @@ watch(
<n-gi>
<n-statistic
label="平均AC数"
:value="classDetailData.avg_ac.toFixed(2)"
:value="classDetailData.avgAc.toFixed(2)"
size="large"
class="stat-avg-ac"
>
@@ -648,7 +615,7 @@ watch(
<n-gi>
<n-statistic
label="中位数AC数"
:value="classDetailData.median_ac.toFixed(2)"
:value="classDetailData.medianAc.toFixed(2)"
size="large"
class="stat-median-ac"
>
@@ -663,7 +630,7 @@ watch(
<n-gi>
<n-statistic
label="总提交数"
:value="classDetailData.total_submission"
:value="classDetailData.totalSubmission"
size="large"
class="stat-total-submission"
>
@@ -678,7 +645,7 @@ watch(
<n-gi>
<n-statistic
label="AC率"
:value="classDetailData.ac_rate.toFixed(1) + '%'"
:value="classDetailData.acRate.toFixed(1) + '%'"
size="large"
class="stat-ac-rate"
>
@@ -699,12 +666,12 @@ watch(
>
<n-descriptions-item label="第一四分位数(Q1)">
<span style="color: #9254de; font-weight: 500">{{
classDetailData.q1_ac.toFixed(2)
classDetailData.q1Ac.toFixed(2)
}}</span>
</n-descriptions-item>
<n-descriptions-item label="第三四分位数(Q3)">
<span style="color: #f759ab; font-weight: 500">{{
classDetailData.q3_ac.toFixed(2)
classDetailData.q3Ac.toFixed(2)
}}</span>
</n-descriptions-item>
<n-descriptions-item label="四分位距(IQR)">
@@ -714,27 +681,27 @@ watch(
</n-descriptions-item>
<n-descriptions-item label="标准差">
<span style="color: #fa8c16; font-weight: 500">{{
classDetailData.std_dev.toFixed(2)
classDetailData.stdDev.toFixed(2)
}}</span>
</n-descriptions-item>
<n-descriptions-item label="前10%均值">
<span style="color: #cf1322; font-weight: 600">{{
classDetailData.top10_avg.toFixed(2)
classDetailData.top10Avg.toFixed(2)
}}</span>
</n-descriptions-item>
<n-descriptions-item label="中间80%均值">
<span style="color: #389e0d; font-weight: 600">{{
classDetailData.middle80_avg.toFixed(2)
classDetailData.middle80Avg.toFixed(2)
}}</span>
</n-descriptions-item>
<n-descriptions-item label="后10%均值">
<span style="color: #096dd9; font-weight: 500">{{
classDetailData.bottom10_avg.toFixed(2)
classDetailData.bottom10Avg.toFixed(2)
}}</span>
</n-descriptions-item>
<n-descriptions-item label="人数">
<span style="color: #1890ff; font-weight: 600">{{
classDetailData.user_count
classDetailData.userCount
}}</span>
</n-descriptions-item>
</n-descriptions>
@@ -743,35 +710,35 @@ watch(
<n-space vertical :size="10">
<n-progress
type="line"
:percentage="classDetailData.excellent_rate"
:percentage="classDetailData.excellentRate"
:show-indicator="true"
:border-radius="4"
>
<template #default
>优秀率:
{{ classDetailData.excellent_rate.toFixed(1) }}%</template
{{ classDetailData.excellentRate.toFixed(1) }}%</template
>
</n-progress>
<n-progress
type="line"
:percentage="classDetailData.pass_rate"
:percentage="classDetailData.passRate"
:show-indicator="true"
:border-radius="4"
status="success"
>
<template #default
>及格率: {{ classDetailData.pass_rate.toFixed(1) }}%</template
>及格率: {{ classDetailData.passRate.toFixed(1) }}%</template
>
</n-progress>
<n-progress
type="line"
:percentage="classDetailData.active_rate"
:percentage="classDetailData.activeRate"
:show-indicator="true"
:border-radius="4"
status="info"
>
<template #default
>参与度: {{ classDetailData.active_rate.toFixed(1) }}%</template
>参与度: {{ classDetailData.activeRate.toFixed(1) }}%</template
>
</n-progress>
</n-space>
@@ -784,7 +751,7 @@ watch(
style="margin-top: 12px"
>
<n-tag type="success" size="large">
综合分: {{ classDetailData.composite_score.toFixed(1) }}
综合分: {{ classDetailData.compositeScore.toFixed(1) }}
</n-tag>
<n-button
type="info"