feat(阶段1): 搬入 ojnext 为 apps/web,未改业务代码

This commit is contained in:
2026-08-06 21:18:16 -06:00
parent 3c975e85ee
commit ae1fb329b5
258 changed files with 40490 additions and 91 deletions

View File

@@ -0,0 +1,34 @@
# Submit Formatting Button State
## Goal
Make the code submission button reflect the automatic formatting request that runs before submission.
## Behavior
- For Python3, C, and C++, the button displays `格式化中` while the formatting API request is pending.
- During formatting, the button uses the existing loading icon and is disabled to prevent duplicate submissions.
- After formatting succeeds, the existing submission flow continues and the button can display `正在提交`.
- A formatting error stops submission and clears the formatting state before showing the existing warning.
- A formatter server or network failure keeps the existing fallback behavior: clear the formatting state and submit the original code.
- Languages without automatic formatting skip this state and submit directly.
- Existing button labels and judging/cooldown behavior remain unchanged.
## Implementation
Add a component-local `isFormatting` ref in `SubmitCode.vue`.
- Include it in `submitDisabled`.
- Give it priority in `submitLabel`, using `格式化中`.
- Include it in the loading-icon condition.
- Set it immediately before `formatCode`.
- Clear it in a `finally` block so every formatter outcome restores the button state.
The state remains local because it is transient UI state owned only by the submission button.
## Verification
The frontend currently has no automated test suite. Verify with:
- TypeScript production build.
- Manual inspection of the state transitions for successful formatting, formatting errors, formatter infrastructure failures, and languages that do not format.

View File

@@ -0,0 +1,28 @@
# SQL 题强制至少 2 个测试点 — 设计
日期2026-07-05
## 背景
题目页的 `sql_display` 用**测试点 1** 的数据生成期望结果展示(截断到 20 行)。如果 SQL 题只有 1 个测试点且结果 ≤20 行,页面展示的期望结果就是完整答案输出,学生可用 `SELECT ... UNION ALL ...`query 模式)或硬编码 INSERT/UPDATEmodify 模式)对照抄写直接 AC。多测试点时数据不同硬编码只能过测试点 1。
## 决定
SQL 题**强制至少 2 个数据不同的初始化脚本**,前后端双重拦截:
- **前端** `ojnext/src/admin/problem/components/SQLTestcaseEditor.vue`
- `canUpload` 要求非空脚本数 ≥ 2不满足时上传按钮禁用
- 上传按钮 tooltip 在脚本不足时显示原因("SQL 题至少需要 2 个数据不同的测试点,防止硬编码期望结果")。
- **后端** `OnlineJudge/problem/views/admin.py``TestCaseZipProcessor.process_zip`
- `sql=True` 且测试点数 < 2 时 `raise APIError(...)`,兜底直接调 API 的情况。
## 影响范围
- 只在**重新上传/保存测试点**时拦截,已有的单测试点老题目不受影响、不回溯校验。
- 非 SQL 题(.in/.out 沙箱判题)不受影响。
- "数据不同"不做内容级校验两个脚本内容相同也能过只保证数量下限YAGNI。
## 验证
前端 `vue-tsc --noEmit`、Prettier 通过;后端 `ruff check` / `ruff format --check` 通过。
人工验证:出题页只填 1 个脚本 → 上传按钮禁用且 tooltip 说明原因;填 2 个并预览通过 → 可上传。

View File

@@ -0,0 +1,50 @@
# SQL 题目表名/字段名自动补全 — 设计
日期2026-07-05
## 目标
学生在 SQL 题目的代码编辑器里输入时,自动补全列表中除现有的 SQL 关键字/函数外,还出现**当前题目的表名和字段名**(带类型提示),减少抄写表名字段名的负担和拼写错误。
## 背景
- SQL 题目详情页已下发 `problem.sql_display``SQLDisplay` 类型),其中 `tables: SQLDisplayTable[]` 包含每张表的 `name``columns[{name, type}]`。数据在前端齐全,**无需后端改动**。
- 编辑器补全入口是 `shared/extensions/autocompletion.ts``enhanceCompletion(language)``CodeEditor.vue``SyncCodeEditor.vue` 都用它,且都叠加了 `completeAnyWord`
- SQL 静态关键字补全表在 `shared/extensions/sql.ts`
- `shared` 直接 import `oj/store/problem` 已有先例(`FlowchartEditor/index.vue`)。
## 方案(已选:方案 A
`enhanceCompletion` 中,当 `language === "SQL"` 时,从 `useProblemStore().problem?.sql_display?.tables` 动态生成补全项,追加到静态关键字列表后:
- **表名**`type: "class"``detail: "数据表"``info` 列出该表全部字段(如 `字段id INTEGER, name TEXT, score REAL``boost` 高于所有关键字(如 110
- **字段名**`type: "property"``detail` 标注来源表和类型(如 `students 的字段 · TEXT``boost` 略低于表名、高于关键字(如 105
- **同名字段每表一条**,靠 detail 区分来源表。
- store 在补全回调内惰性读取(每次按键执行),题目切换后自动反映最新表结构。
- 非 SQL 语言、无题目上下文(如 admin/tutorial/learn 页面)或 `sql_display` 为空时,不追加任何项,行为与现状一致。
### 不做的事YAGNI
- 不改后端;不改题目描述展示(`SQLDataTable` 已展示表结构)。
- 管理端出题的 SQL 编辑器(`SQLTestcaseEditor`)不接入。
- 不做基于 SQL 语法位置的智能上下文补全(如 FROM 后只补表名)。
## 改动文件
| 文件 | 改动 |
|---|---|
| `src/shared/extensions/autocompletion.ts` | SQL 分支追加由 `sql_display.tables` 生成的动态补全项 |
(如生成逻辑较长,可拆一个小函数放同文件或 `sql.ts`,保持单一职责。)
## 错误处理
- `problem``sql_display``tables` 任一为空 → 返回纯静态列表(可选链兜底)。
- Pinia store 在组件上下文外调用的风险:补全回调在编辑器运行期触发,此时 Pinia 已安装;与 FlowchartEditor 的既有用法一致。
## 测试
项目无测试套件(政策:不写新测试)。人工验证:
1. 打开一道 SQL 题,编辑器中输入表名/字段名前缀,确认补全项出现且 detail/info 正确。
2. 打开非 SQL 题,确认补全行为无变化。
3. 协作编辑SyncCodeEditor场景同样生效。

View File

@@ -0,0 +1,102 @@
# 学生视角(演示模式)设计
日期2026-07-26
范围仅前端ojnext
## 背景
超级管理员给学生上课演示时,界面上到处是管理员才可见的入口和按钮(后台菜单、题目编辑、提交列表的额外操作列等)。这些东西对学生是噪音,也容易误点。需要一个一键开关,把界面临时切换成普通学生看到的样子。
## 目标
- 超管点一下,全站界面变成普通学生的样子
- 再点一下恢复
- 刷新页面不丢状态
- 改动集中,不散落到几十个页面
## 非目标
- 不改后端。演示模式是纯界面伪装,登录态仍然是超管,接口权限不变。目的是演示,不是权限隔离。
- 不做审计日志、不做时长限制。
- 教师管理员、学生管理员不提供此功能。
## 机制
全站所有权限判断都读 `shared/store/user.ts` 里的几个 getter没有任何一处直接读 `user.admin_type`。因此在 store 层加一个开关,就能一次性覆盖全部调用点。
```ts
// shared/store/user.ts
const demoMode = ref<boolean>(storage.get(STORAGE_KEY.DEMO_MODE) ?? false)
// 不受伪装影响的真实身份,只用于决定是否显示切换入口
const realIsSuperAdmin = computed(
() => user.value?.admin_type === USER_TYPE.SUPER_ADMIN,
)
const isSuperAdmin = computed(() => !demoMode.value && realIsSuperAdmin.value)
const isAdminRole = computed(() => !demoMode.value && (/* 原逻辑 */))
const isStudentAdmin = computed(() => !demoMode.value && (/* 原逻辑 */))
const isTeacherAdmin = computed(() => !demoMode.value && (/* 原逻辑 */))
const isTeacherOrAbove = computed(() => !demoMode.value && (/* 原逻辑 */))
const hasProblemPermission = computed(() => !demoMode.value && (/* 原逻辑 */))
const canToggleDemoMode = computed(() => realIsSuperAdmin.value)
function toggleDemoMode() {
demoMode.value = !demoMode.value
storage.set(STORAGE_KEY.DEMO_MODE, demoMode.value)
}
```
`realIsSuperAdmin` 是关键:如果切换入口的显示条件用被伪装后的 `isSuperAdmin`,一进入演示模式入口自己就消失了,退不出来。
## 改动清单
| 文件 | 改动 |
|---|---|
| `src/utils/constants.ts` | `STORAGE_KEY` 增加 `DEMO_MODE: "demoMode"` |
| `src/shared/store/user.ts` | 新增 `demoMode``realIsSuperAdmin``canToggleDemoMode``toggleDemoMode`6 个角色 getter 加 `!demoMode.value &&` 前缀;导出新成员 |
| `src/shared/components/Header.vue` | 用户下拉菜单 `options` 增加一项「进入演示 / 退出演示」 |
**不改**`src/main.ts` 路由守卫、`src/utils/permissions.ts`、以及所有页面级的 `v-if` 判断。它们读的都是上述 getter自动跟随。
## 交互
**入口**:右上角用户头像下拉菜单,与「我的主页」「我的提交」并列。
- 显示条件:`userStore.canToggleDemoMode`
- 文案随状态翻转:未开启显示「进入演示」,已开启显示「退出演示」
- 该文案本身就是状态指示器,不额外加横幅或角标
**点击行为**
1. 调用 `toggleDemoMode()`
2. 如果是**进入**演示模式,且当前路由属于 `admins` 分支,执行 `router.push("/")`。否则页面会停在一个已失去权限的后台界面上。
3. 退出演示模式不需要跳转,留在当前页即可。
## 连带影响(均为预期行为)
- **后台入口消失**`Header.vue:165-175`)。手动输入 `/admin/*` 地址也会被 `main.ts` 守卫弹回首页,因为守卫读的是被伪装后的 getter。
- **提交列表**`submission/list.vue`)的教师专属筛选、额外列隐藏;`showSubmissions` 改为跟随站点配置 `submission_list_show_all`,而不是无条件为 true。
- **题目编辑表单**`problem/components/Form.vue`)的管理员字段隐藏。
- **比赛访问**`oj/store/contest.ts:49`)失去超管免密码特权,需按学生流程输密码。演示时更真实。
- **协同代码编辑**`shared/composables/sync.ts`)的超管特殊颜色与提示一并变为学生行为。**确认不做豁免**——演示场景不涉及协同编辑功能。
## 持久化与清理
-`localStorage`key 为 `demoMode`
- store 初始化时从 storage 读取,刷新后保持
- 退出登录时 `clearProfile()` 调用 `storage.clear()`,会一并清除,不会残留到下一个登录用户
## 验证方式
手工验证(本项目不写测试):
1. 超管登录 → 下拉菜单出现「进入演示」
2. 点击 → 顶栏「后台」消失,菜单文案变为「退出演示」
3. 停在 `/admin/problem/list` 时点击 → 跳回首页
4. 地址栏直接输 `/admin` → 弹回首页
5. 刷新页面 → 仍是学生界面
6. 点「退出演示」→ 后台入口恢复
7. 退出登录再登录 → 演示模式已重置为关闭
8. 用教师管理员账号登录 → 菜单中无此项