fix: harden twenty four game submissions

Reviewed-on: http://117.72.28.96:8765/Jacky/Hulumath-Web/pulls/12

.env.example

@@ -5,3 +5,4 @@ DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1
 DATABASE_URL=mysql://hulumath:hulumath@127.0.0.1:3307/hulumath
 REDIS_URL=redis://localhost:6379/0
 CORS_ALLOWED_ORIGINS=http://localhost:3000
+CALCULATOR_RATE=30/minute

.env.production.example

@@ -14,6 +14,7 @@ CORS_ALLOWED_ORIGINS=https://math.example.com
 CSRF_TRUSTED_ORIGINS=https://math.example.com
 API_ANON_RATE=120/minute
 API_USER_RATE=600/minute
+CALCULATOR_RATE=30/minute
 SECURE_HSTS_SECONDS=31536000
 
 # 仅供部署脚本直接访问 127.0.0.1:8000 时设置 Host 头。

CONTRIBUTING.md

@@ -0,0 +1,503 @@
+新功能前要用分支发PR！禁止直接向main提交。
+
+# Hulumath-Web 代码贡献指南
+
+本指南面向人类开发者和 AI 编程助手。开始修改前，请完整阅读本文。
+
+葫芦数学不是通用内容站，而是围绕 MathBTI、数学人生、比赛、工具箱、视频探索和长期成长构建的“数学人生宇宙”。本仓库已经进入可部署的 Django 生产形态，贡献时应优先保持业务一致性、数据安全和可回滚性，不要把它当作一次性 Demo。
+
+## 1. 必须遵守的协作规则
+
+以下规则没有例外：
+
+1. **禁止直接向 `main` 推送。**
+2. **所有改动必须通过 Pull Request（PR）提交。**
+3. **所有 PR 必须由仓库负责人 Jacky 审查并明确批准后才能合并。**
+4. CI 未通过时不得合并，不得通过删除测试、降低规则或跳过检查来“修复” CI。
+5. 不得提交密码、Token、SSH 私钥、生产 `.env.production`、真实用户数据或数据库备份。
+6. 不得直接在生产服务器上改源码后绕过 Git。紧急修复也应补回 PR。
+7. 不得回退、覆盖或整理与当前任务无关的他人改动。
+
+如果你没有仓库写权限，请从 fork 创建分支并向本仓库提交 PR。
+
+## 2. AI 协作者五分钟快速入口
+
+AI 在采取任何修改动作前，至少完成以下步骤：
+
+1. 阅读本文件。
+2. 阅读任务直接涉及的代码、测试和迁移。
+3. 执行 `git status --short --branch`，确认工作区是否已有他人改动。
+4. 用 `rg` 搜索现有实现、调用方和测试，不凭文件名猜测行为。
+5. 对照下方“文档优先级”和“不可破坏的系统约束”。
+6. 明确最小修改范围，避免顺手重构。
+7. 修改后运行与风险相匹配的检查。
+8. 总结行为变化、测试结果、迁移影响和未验证风险。
+
+AI 不应：
+
+- 在没有阅读上下文时批量重写模块。
+- 因测试失败而删除断言、吞掉异常或放宽安全校验。
+- 自行修改产品规则、奖励数值、剧情事实或历史人物设定。
+- 使用字符串替换模拟结构化数据迁移。
+- 为了“代码更现代”而更换框架、数据库或部署方式。
+- 自动合并 PR。最终审查与合并权属于 Jacky。
+
+## 3. 文档与事实来源优先级
+
+遇到冲突时按以下顺序判断：
+
+1. **当前任务中仓库负责人的明确要求。**
+2. **本文件中的贡献与工程规则。**
+3. **数据库迁移、当前代码、测试和 API 契约所表达的真实行为。**
+4. **`Bible.md` 中的产品定位、核心循环和架构决策。**
+5. **`docs/DEPLOYMENT.md` 与 `docs/BAOTA_UBUNTU_FROM_ZERO.md` 中的生产约束。**
+6. **`README.md` 中的使用入口。**
+7. **`docs/TUTORIAL.md` 及旧脚本只作为历史和内容迁移参考。**
+
+旧 Flask、旧 SQLite 和旧前端文档不能覆盖当前 Django/MySQL 生产设计。
+
+`docs/` 中可能包含 Word 导出、UTF-16 或历史格式文件。编辑器显示乱码时，不要直接重写或删除原文件；优先使用同名 Markdown 版本，必要时先确认编码和来源。
+
+## 4. 当前技术栈
+
+- Django 4.2
+- Django REST Framework
+- Django Channels
+- MySQL 8.0.35
+- Redis 7.x Channel Layer
+- Gunicorn + UvicornWorker
+- Nginx
+- WhiteNoise
+- 原生 HTML、CSS、JavaScript Web 客户端
+- pytest、pytest-django、pytest-cov
+- Ruff
+- Gitea Actions
+
+本地最低兼容 Python 版本为 3.9，建议使用 Python 3.11 或 3.12。生产环境使用 Python 3.12。
+
+当前 Web 客户端没有 Node 构建步骤。不要仅为一个小功能引入 Node、前端框架或新的打包链。
+
+## 5. 仓库结构与模块所有权
+
+```text
+backend/
+├── accounts/       用户、邀请码、会话、游客迁移、审计
+├── math_life/      MathBTI、数学人格、剧情版本、存档、人物 Skill
+├── contest/        题库、比赛、实时匹配、判分、Rating、反作弊
+├── progression/    五维能力、数学精灵、卡牌、奖励流水
+├── content/        视频、知识卡片、人物内容、收藏、观看进度
+├── latex_lab/      公式文档、课程、练习与 LaTeX 判定
+├── engagement/     签到、通知等回访能力
+├── common/         通用 API、日志、健康检查、管理后台
+├── config/         Django 设置、URL、ASGI/WSGI
+├── templates/      网站与 Django Admin 模板
+└── static/         CSS、JavaScript 等静态资源源文件
+
+scripts/             部署、生产冒烟检查等运维脚本
+docs/                部署、迁移、产品和内容文档
+.gitea/workflows/   PR CI 与合并后自动部署
+```
+
+### 静态资源特别说明
+
+- `backend/static/` 是源文件，应在这里修改。
+- `backend/staticfiles/` 是 `collectstatic` 产物，不应手工编辑。
+- 普通功能 PR 不应提交 `backend/staticfiles/` 的意外变化。
+- 生产部署会自动执行 `collectstatic` 并生成带指纹资源。
+
+## 6. 核心请求路径
+
+典型请求路径如下：
+
+```text
+浏览器
+  → Nginx
+  → Gunicorn/Uvicorn ASGI
+  → Django URL / Channels 路由
+  → View / Consumer
+  → Service
+  → Model / MySQL / Redis
+```
+
+职责建议：
+
+- View/Consumer：鉴权、解析请求、返回响应。
+- Service：事务、业务规则、判分、奖励、状态迁移。
+- Model：数据结构、约束、索引和轻量领域属性。
+- Serializer：输入校验与 API 表达。
+- Template/JS：交互与展示，不承担正式判分和奖励真相。
+
+复杂业务不要全部写进 View，也不要把正式规则只放在浏览器。
+
+## 7. 不可破坏的系统约束
+
+### 7.1 服务端是正式数据唯一事实来源
+
+以下结果必须由服务端决定并持久化：
+
+- MathBTI 正式结果
+- 剧情存档、选择、关系和结局
+- Contest 计时、答案、分数、Rating 和反作弊标记
+- 视频完成状态
+- 五维能力、精灵经验、卡牌和奖励
+
+浏览器状态只能用于临时 UI，不得代替正式数据库记录。
+
+### 7.2 幂等性
+
+剧情选择、比赛提交、奖励发放、游客数据迁移等可重试写操作必须幂等。
+
+- 优先使用数据库唯一约束和事务保证幂等。
+- 客户端正式提交应提供 `Idempotency-Key`。
+- 不要只依赖“按钮禁用”防止重复请求。
+- HTTP 测试环境不是安全上下文，前端不能假设 `crypto.randomUUID()` 一定存在。
+
+### 7.3 数据库
+
+- 生产数据库必须为 MySQL 8.0.35 或更高兼容版本。
+- 禁止把生产改回 SQLite、MySQL 5.7 或直接暴露数据库公网端口。
+- 字符集必须支持 `utf8mb4`。
+- 表引擎使用 InnoDB。
+- 事务隔离级别为 `READ COMMITTED`。
+- 实时匹配依赖 `SELECT ... FOR UPDATE SKIP LOCKED` 和匹配索引。
+
+SQLite 只用于快速本地测试。涉及锁、排序规则、事务或 MySQL 特性的改动必须在 MySQL 上验证。
+
+### 7.4 Redis 与 WebSocket
+
+- Redis 是 Channels 的消息层，不是可随意移除的缓存依赖。
+- ASGI 初始化顺序经过特殊处理，模型相关 Consumer 必须在 Django App Registry 初始化后导入。
+- 修改 `config/asgi.py`、Consumer 或路由时，必须验证 ASGI 导入和 WebSocket。
+
+### 7.5 内容版本
+
+- 已发布题目和剧情内容使用版本模型，避免直接覆盖历史运行所依赖的内容。
+- `StoryRun` 应指向具体 `StoryVersion`。
+- 比赛题目应指向具体 `QuestionVersion`。
+- 修改种子内容时保持命令可重复执行。
+- 种子命令不能加入每次生产部署，以免覆盖运营修改。
+
+### 7.6 用户和权限
+
+- 使用项目自定义 UUID 用户模型，不要绕过 `AUTH_USER_MODEL`。
+- 普通用户不能看到或访问运营后台。
+- `is_staff`、`is_superuser` 等权限字段不得通过普通用户 API 写入。
+- 任何后台入口可见性都不能替代服务端权限校验。
+
+### 7.7 生产部署
+
+- 生产进程由 systemd 管理，不使用宝塔 Python 项目管理器。
+- 应用监听 `127.0.0.1:8000`，由 Nginx 对外代理。
+- 当前测试生产入口使用 `4321`，不要开放应用内部 `8000`。
+- 部署前自动备份 MySQL，执行迁移和静态资源收集。
+- 部署后验证 HTTP、数据库、Redis、WebSocket、页面和视频目录。
+- 不要在自动回退中执行破坏性数据库反向迁移。
+
+## 8. API 与前端约定
+
+### API
+
+- HTTP API 使用 `/api/v1/` 前缀。
+- WebSocket 使用 `/ws/`，业务 WebSocket 通常使用 `/ws/v1/`。
+- API 异常使用统一结构：
+
+```json
+{
+  "error": {
+    "code": "request_error",
+    "message": "请求未能完成",
+    "details": {},
+    "request_id": "..."
+  }
+}
+```
+
+- 新接口应遵循现有鉴权、CSRF、限流和 Request ID 约定。
+- 不要在响应中泄露内部异常、密钥或敏感用户字段。
+
+### 前端
+
+- 复用 `backend/static/js/app.js` 中的 `api()`、状态和渲染模式。
+- 使用 DOM API 和 `textContent` 表达不可信内容，避免直接拼接 HTML。
+- 修改用户可见流程时同时检查桌面端和移动端。
+- 当前生产可能运行在纯 HTTP IP 环境，不要无条件依赖安全上下文 API。
+- 后台主题源文件为 `backend/static/admin/css/hulumath_admin.css`。
+- CSS 修改要检查颜色对比度、禁用态、长内容滚动和系统深色偏好。
+
+## 9. 本地开发
+
+### 初始化
+
+```bash
+python3 -m venv .venv
+.venv/bin/pip install -r requirements-dev.txt
+make migrate
+make seed
+make run
+```
+
+本地地址：
+
+```text
+网站：http://127.0.0.1:8000/
+后台：http://127.0.0.1:8000/admin/
+邀请码：HULU2026
+```
+
+创建本地管理员：
+
+```bash
+cd backend
+../.venv/bin/python manage.py createsuperuser
+```
+
+### 环境变量
+
+从 `.env.example` 或 `.env.production.example` 复制本地文件，不要修改并提交真实值。
+
+```bash
+cp .env.example .env.local
+set -a
+source .env.local
+set +a
+```
+
+生产要求 `DJANGO_DEBUG=false`、MySQL `DATABASE_URL`、Redis `REDIS_URL`、强随机 `DJANGO_SECRET_KEY` 和正确的 Host/CORS/CSRF 来源。
+
+## 10. 推荐修改流程
+
+### 10.1 创建分支
+
+先同步 `main`，再创建语义清晰的分支：
+
+```bash
+git switch main
+git pull --ff-only origin main
+git switch -c feat/short-description
+```
+
+常用前缀：
+
+- `feat/`：用户可见功能
+- `fix/`：缺陷修复
+- `ci/`：CI/CD
+- `docs/`：文档
+- `refactor/`：无行为变化的重构
+- `test/`：测试改进
+
+### 10.2 先读后改
+
+查找实现和调用方：
+
+```bash
+rg "目标类名|函数名|API 路径" backend
+rg --files backend/<app>
+```
+
+至少阅读：
+
+- 目标模块的 model/service/view/serializer
+- 对应 URL 或 routing
+- 现有测试
+- 相关迁移
+- 调用该行为的前端代码
+
+### 10.3 小步提交
+
+- 一个 PR 解决一个明确问题。
+- 优先提交可运行的垂直切片。
+- 不夹带格式化整个仓库、目录重命名或无关依赖升级。
+- 提交信息使用祈使式或清楚的类型前缀，例如：
+
+```text
+feat: add story resume endpoint
+fix: make contest submission idempotent
+ci: add production smoke check
+docs: document content authoring flow
+```
+
+## 11. 数据模型与迁移
+
+修改 Django Model 时：
+
+```bash
+cd backend
+../.venv/bin/python manage.py makemigrations
+../.venv/bin/python manage.py makemigrations --check --dry-run
+../.venv/bin/python manage.py migrate
+```
+
+要求：
+
+- 迁移文件必须随 Model 变更提交。
+- 为唯一性、幂等性和高频查询使用数据库约束或索引。
+- 高风险迁移采用“先扩展、后切换、再清理”。
+- 不在同一发布中删除旧字段并立即依赖不可回退的新结构。
+- 数据迁移必须可审查、可重复或明确记录一次性边界。
+- 禁止直接复制 SQLite 文件、MySQL 数据目录或跨数据库 dump 作为迁移方案。
+
+PR 描述中必须说明：
+
+- 是否新增迁移
+- 是否锁表或扫描大表
+- 是否需要数据回填
+- 应用代码如何兼容发布前后的 schema
+- 回滚时数据库如何处理
+
+## 12. 测试与质量门禁
+
+### 最小本地检查
+
+文档以外的代码改动至少运行：
+
+```bash
+.venv/bin/ruff check backend scripts
+make check
+make test
+```
+
+### 与 PR CI 对齐
+
+```bash
+.venv/bin/ruff check backend scripts
+
+cd backend
+../.venv/bin/python manage.py makemigrations --check --dry-run
+../.venv/bin/python manage.py check
+../.venv/bin/python -c \
+  "from config.asgi import application; print(type(application).__name__)"
+cd ..
+
+.venv/bin/python -m pytest -q \
+  --cov=backend \
+  --cov-config=.coveragerc \
+  --cov-report=term \
+  --cov-fail-under=75
+```
+
+Gitea CI 还会在隔离的 MySQL 8.0.35 容器中执行：
+
+```bash
+python backend/manage.py check --database default
+python backend/manage.py check_mysql
+python backend/manage.py migrate --noinput
+pytest -q
+```
+
+### 测试原则
+
+- Bug 修复必须先理解复现条件，并增加能防止回归的测试。
+- Service 层规则优先写单元测试。
+- API 权限和响应写请求测试。
+- MySQL 锁、并发和事务行为不能只用 SQLite 测试。
+- 前端缺陷至少增加静态资产断言；关键交互应进行浏览器验证。
+- 用户流程、后台样式和响应式布局应附截图或录屏。
+- 覆盖率是下限，不是目标；不要为了数字测试无意义代码。
+
+## 13. PR 要求
+
+PR 标题应描述结果，而不是过程：
+
+```text
+fix: prevent duplicate contest settlement
+feat: add actuarial story import
+```
+
+PR 描述至少包含：
+
+```markdown
+## 背景
+为什么需要修改。
+
+## 变更
+具体改变了什么行为和模块。
+
+## 验证
+执行了哪些测试，结果是什么。
+
+## 数据与部署
+是否有迁移、种子、环境变量、静态资源或回滚影响。
+
+## 截图
+涉及 UI 时提供修改前后截图。
+```
+
+提交 PR 后：
+
+1. 等待 `CI / test` 全部通过。
+2. 处理审查意见，不要无解释地关闭讨论。
+3. 请求 Jacky 审查。
+4. 只有 Jacky 明确批准后才可合并。
+5. 合并后观察 `PR合并自动部署` 的 `release-check` 和 `deploy`。
+6. 部署失败时保留日志，先判断是代码、迁移、网络还是冒烟检查问题。
+
+## 14. 安全与隐私
+
+- 不记录真实密码、Cookie、Session、Token 或私钥。
+- 日志中使用 Request ID，避免打印完整请求体和敏感字段。
+- 最小化收集未成年人信息，不要求真实学校、姓名或精确年龄。
+- 新的用户输入必须校验长度、类型和权限。
+- 文件上传、富文本、外部 URL 和管理员批量操作需要单独安全评审。
+- 不要通过前端隐藏代替后端权限控制。
+- 不要关闭 CSRF、CORS、密码校验或生产安全检查来解决局部问题。
+
+## 15. 内容贡献规范
+
+剧情、数学人物和题目既是内容，也是生产数据。
+
+### 剧情
+
+- 使用版本化 Story 内容。
+- 节点 ID 稳定且唯一。
+- 每个 choice 的 `next` 必须存在。
+- 结局节点不再提供 choice。
+- 真实人物内容应列出事实来源和虚构边界。
+- 不擅自改写已发布存档所依赖的版本。
+
+### 题目
+
+- 正确答案和解释属于服务端版本。
+- 不把正式答案提前发送给未提交的客户端。
+- 题号必须为正整数且不重复。
+- 题目更新创建新版本，不覆盖历史正式尝试。
+- 注意 Unicode 数学符号与普通 ASCII 输入的归一化边界。
+
+### 视频与成长
+
+- 五维能力固定为：眼光、人文、侦探、建模、联结。
+- 视频完成奖励必须幂等。
+- 内容筛选字段和能力映射保持后台、API、前端一致。
+
+## 16. 不应出现在普通 PR 中的改动
+
+除非任务明确要求，否则不要：
+
+- 替换 Django、MySQL、Redis、Channels 或部署方案。
+- 将模块化单体拆成微服务。
+- 引入 Kubernetes。
+- 新建长期并行的第二套前端或后端。
+- 批量重写全部剧情和种子数据。
+- 修改生产服务器路径、端口、systemd 服务名或 Gitea Secrets。
+- 提交 `.env.production`、备份、数据库文件和运行日志。
+- 手改 `backend/staticfiles/`。
+- 重新运行生产种子命令覆盖运营数据。
+- 降低覆盖率门槛、删除 Ruff 规则或跳过 MySQL CI。
+
+需要做上述变更时，先提交设计说明并获得 Jacky 明确批准。
+
+## 17. 完成定义
+
+一个贡献只有同时满足以下条件才算完成：
+
+- 需求行为已实现，且没有明显超出范围。
+- 代码遵循现有模块边界。
+- 数据约束、事务和幂等性得到处理。
+- 测试覆盖新增行为和关键失败路径。
+- Ruff、Django check、迁移检查和 pytest 通过。
+- 涉及 MySQL、Redis、WebSocket 或部署时完成对应验证。
+- 涉及 UI 时检查桌面端、移动端和颜色对比度。
+- 文档、环境变量示例和迁移说明已同步。
+- 没有提交秘密或生成垃圾。
+- PR 已由 Jacky 审查并明确批准。
+
+不确定时，不要猜测产品规则。把问题、已知事实、可选方案和影响写进 PR，请仓库负责人决策。

Makefile

@@ -1,4 +1,4 @@
-.PHONY: install migrate seed run test check
+.PHONY: install migrate seed run run-asgi test check
 
 install:
 	python3 -m venv .venv
@@ -14,9 +14,13 @@ seed:
 run:
 	cd backend && ../.venv/bin/python manage.py runserver
 
+run-asgi:
+	cd backend && ../.venv/bin/uvicorn config.asgi:application --host 127.0.0.1 --port 8000 --reload
+
 test:
 	.venv/bin/python -m pytest -q
 
 check:
+	.venv/bin/ruff check backend scripts
 	cd backend && ../.venv/bin/python manage.py check
 	cd backend && ../.venv/bin/python manage.py makemigrations --check --dry-run

README.md

@@ -2,19 +2,25 @@
 
 面向全年龄数学兴趣用户的“数学人生宇宙”。当前仓库包含可运行的 Django 模块化单体、响应式 Web 客户端、运营后台、内容种子、实时比赛基础设施和生产部署配置。
 
+## 参与贡献
+
+提交代码、内容或文档前，请先完整阅读 [代码贡献指南](CONTRIBUTING.md)。
+
+所有改动必须通过 PR 提交，并由仓库负责人 Jacky 审查批准后才能合并。贡献指南同时包含供 AI 编程助手快速建立上下文的架构、约束、测试和部署说明。
+
 ## 已实现
 
 - 邀请码注册、登录、个人资料、会话记录和管理员审计模型
 - 12 题 MathBTI、16 种数学人格、人物卡与数学精灵初始化
 - 统一版本化剧情引擎、85 节点信仰者主线、2 个人物 Skill 样板
 - 剧情服务端存档、嵌套资源效果、结局与幂等选择
-- 入门、标准、进阶三赛道的实时 1v1、今日挑战和单人闯关
+- 入门、标准、进阶三赛道的实时 1v1、今日挑战、单人闯关、24 点和数独
 - 题目版本、服务端计时判分、Elo Rating、排行榜和基础反作弊
 - Channels WebSocket 比赛进度通道，Redis Channel Layer
 - LaTeX 文档与版本、六级零基础课程、练习判定
 - 54 条旧版志愿者视频、五维能力地图、专业筛选与融合视频流
 - 视频观看进度、幂等奖励、收藏、五维能力、数学精灵和人物卡册
-- 多工具工具箱：口算入口、科学计算器、符号查询、函数绘图和 LaTeX Lab
+- 多工具工具箱：强计算器、增强函数绘图、数学白板、几何画板、符号查询和 LaTeX Lab
 - Django Admin、健康检查、请求 ID、限流与统一 API 错误结构
 - MySQL 8.0/Redis Docker Compose、Gitea CI 和自动化测试
 
@@ -70,6 +76,7 @@ Gitea 会在 PR 合并到 `main` 后自动测试和部署：
 - [Ubuntu + 宝塔面板从零部署](docs/BAOTA_UBUNTU_FROM_ZERO.md)
 - [自动发布机制与运维说明](docs/DEPLOYMENT.md)
 - [MySQL 8 数据迁移说明](docs/MYSQL8_MIGRATION.md)
+- [本地实时 1v1 与联机码约战测试](docs/LOCAL_REALTIME_TEST.md)
 
 ## 目录
 
@@ -82,6 +89,7 @@ backend/
 ├── progression/    # 五维能力、精灵、卡牌、奖励
 ├── content/        # 视频、知识卡片、人物内容
 ├── engagement/     # 签到与通知
+├── toolbox/        # 受限数学计算内核与工具 API
 ├── common/         # 健康检查、错误、日志
 └── config/         # Django/ASGI 配置
 ```

backend/common/api.py

@@ -1,17 +1,65 @@
+import logging
+
 from rest_framework.views import exception_handler as drf_exception_handler
 
+logger = logging.getLogger(__name__)
+
+
+def _error_messages(details):
+    messages = []
+
+    def collect(value):
+        if isinstance(value, dict):
+            for item in value.values():
+                collect(item)
+        elif isinstance(value, (list, tuple)):
+            for item in value:
+                collect(item)
+        elif value is not None:
+            message = str(value).strip()
+            if message and message not in messages:
+                messages.append(message)
+
+    collect(details)
+    return messages
+
+
+def _error_message(details):
+    messages = _error_messages(details)
+    if not messages:
+        return "请求未能完成"
+    return "；".join(messages)[:300]
+
 
 def exception_handler(exc, context):
     response = drf_exception_handler(exc, context)
+    request = context.get("request")
     if response is None:
+        logger.exception(
+            "api_unhandled_error method=%s path=%s",
+            getattr(request, "method", "-"),
+            getattr(request, "path", "-"),
+        )
         return response
 
-    request = context.get("request")
+    details = response.data
+    code = getattr(exc, "default_code", "request_error")
+    message = _error_message(details)
+    fields = ",".join(details.keys()) if isinstance(details, dict) else "-"
+    logger.info(
+        "api_request_error method=%s path=%s status=%s code=%s fields=%s message=%s",
+        getattr(request, "method", "-"),
+        getattr(request, "path", "-"),
+        response.status_code,
+        code,
+        fields,
+        message,
+    )
     response.data = {
         "error": {
-            "code": getattr(exc, "default_code", "request_error"),
-            "message": "请求未能完成",
-            "details": response.data,
+            "code": code,
+            "message": message,
+            "details": details,
             "request_id": getattr(request, "request_id", None),
         }
     }

backend/common/test_frontend_assets.py

@@ -13,6 +13,18 @@ def test_app_js_幂等键兼容非安全上下文():
     assert source.count('"Idempotency-Key": createIdempotencyKey()') == 2
 
 
+def test_app_js_api_错误优先显示详情并输出安全诊断日志():
+    source = (STATIC_ROOT / "js" / "app.js").read_text(encoding="utf-8")
+
+    assert "function collectApiErrorMessages(" in source
+    assert "const baseMessage = detailMessages.length" in source
+    assert 'console.error("[Hulumath API]", {' in source
+    assert "requestId: error.requestId" in source
+    assert "error.details = details || null" in source
+    assert "payload.error?.message || payload.detail ||" in source
+    assert "payload.error?.message || payload.detail ||\n      (details ?" not in source
+
+
 def test_app_css_答题提交按钮可见且长弹窗可滚动():
     source = (STATIC_ROOT / "css" / "app.css").read_text(encoding="utf-8")
 
@@ -34,3 +46,41 @@ def test_admin_css_深色系统下仍保持完整浅色主题():
     assert "background-color: #ffffff !important" in source
     assert ".theme-toggle" in source
     assert "display: none" in source
+
+
+def test_toolbox_and_games_资源入口与移动端触控样式存在():
+    template = (settings.BASE_DIR / "templates" / "index.html").read_text(encoding="utf-8")
+    toolbox = (STATIC_ROOT / "js" / "toolbox.js").read_text(encoding="utf-8")
+    games = (STATIC_ROOT / "js" / "games.js").read_text(encoding="utf-8")
+    styles = (STATIC_ROOT / "css" / "app.css").read_text(encoding="utf-8")
+
+    assert "js/toolbox.js" in template
+    assert "js/games.js" in template
+    assert 'id="whiteboard-canvas"' in template
+    assert 'id="geometry-canvas"' in template
+    assert 'id="math-game-list"' in template
+    assert "window.HuluToolbox" in toolbox
+    assert "pointerdown" in toolbox
+    assert "window.HuluGames" in games
+    assert "sudoku-board" in games
+    assert 'errorMessage.className = "form-error game-form-error"' in games
+    assert "errorMessage.textContent = error.message" in games
+    assert "touch-action: none" in styles
+    assert ".calculator-controls [hidden]" in styles
+    assert ".sudoku-board" in styles
+    assert "@media (max-width: 700px)" in styles
+
+
+def test_realtime_match_联机码与_websocket_前端资源存在():
+    template = (settings.BASE_DIR / "templates" / "index.html").read_text(encoding="utf-8")
+    realtime = (STATIC_ROOT / "js" / "realtime.js").read_text(encoding="utf-8")
+    styles = (STATIC_ROOT / "css" / "app.css").read_text(encoding="utf-8")
+
+    assert 'id="challenge-create"' in template
+    assert 'id="challenge-join-form"' in template
+    assert template.count("js/realtime.js") == 1
+    assert "new WebSocket" in realtime
+    assert "setInterval(refreshMatch, 2000)" in realtime
+    assert "Idempotency-Key" in realtime
+    assert ".challenge-panel" in styles
+    assert ".realtime-progress-panel" in styles

backend/config/settings.py

@@ -38,6 +38,7 @@ INSTALLED_APPS = [
     "latex_lab",
     "content",
     "engagement",
+    "toolbox",
     "common",
 ]
 
@@ -142,6 +143,7 @@ REST_FRAMEWORK = {
     "DEFAULT_THROTTLE_RATES": {
         "anon": os.getenv("API_ANON_RATE", "120/minute"),
         "user": os.getenv("API_USER_RATE", "600/minute"),
+        "calculator": os.getenv("CALCULATOR_RATE", "30/minute"),
     },
 }
 

backend/config/urls.py

@@ -17,4 +17,5 @@ urlpatterns = [
     path("api/v1/latex/", include("latex_lab.urls")),
     path("api/v1/content/", include("content.urls")),
     path("api/v1/progression/", include("progression.urls")),
+    path("api/v1/toolbox/", include("toolbox.urls")),
 ]

backend/contest/admin.py

@@ -7,6 +7,7 @@ from .models import (
     ContestAttempt,
     ContestQuestion,
     LeaderboardSnapshot,
+    MathGameAttempt,
     Question,
     QuestionVersion,
     RatingHistory,
@@ -61,6 +62,45 @@ class QuestionVersionAdmin(admin.ModelAdmin):
 
 
 admin.site.register(ContestAnswer)
-admin.site.register(RealtimeMatch)
 admin.site.register(RatingHistory)
 admin.site.register(LeaderboardSnapshot)
+
+
+@admin.register(RealtimeMatch)
+class RealtimeMatchAdmin(admin.ModelAdmin):
+    list_display = (
+        "id",
+        "contest",
+        "match_type",
+        "challenge_code",
+        "player_one",
+        "player_two",
+        "status",
+        "created_at",
+    )
+    list_filter = ("match_type", "status", "contest__track")
+    search_fields = (
+        "challenge_code",
+        "player_one__username",
+        "player_two__username",
+    )
+    readonly_fields = ("created_at", "started_at", "completed_at")
+    ordering = ("-created_at",)
+
+
+@admin.register(MathGameAttempt)
+class MathGameAttemptAdmin(admin.ModelAdmin):
+    list_display = (
+        "id",
+        "user",
+        "kind",
+        "difficulty",
+        "status",
+        "score",
+        "hints_used",
+        "started_at",
+    )
+    list_filter = ("kind", "difficulty", "status")
+    search_fields = ("user__username", "user__nickname")
+    readonly_fields = ("puzzle", "solution", "submission", "started_at", "submitted_at")
+    ordering = ("-started_at",)

backend/contest/consumers.py

@@ -26,7 +26,11 @@ class MatchConsumer(AsyncJsonWebsocketConsumer):
             await self.send_json({"type": "pong"})
             return
         if event_type == "progress":
-            answered_count = max(0, min(int(content.get("answered_count", 0)), 100))
+            try:
+                answered_count = max(0, min(int(content.get("answered_count", 0)), 100))
+            except (TypeError, ValueError):
+                await self.send_json({"type": "error", "message": "答题进度无效"})
+                return
             await self.channel_layer.group_send(
                 self.group_name,
                 {
@@ -45,6 +49,15 @@ class MatchConsumer(AsyncJsonWebsocketConsumer):
             }
         )
 
+    async def match_state(self, event):
+        await self.send_json(
+            {
+                "type": "state",
+                "reason": event["reason"],
+                "match_id": str(self.match_id),
+            }
+        )
+
     @database_sync_to_async
     def _is_participant(self, user_id):
         return RealtimeMatch.objects.filter(id=self.match_id).filter(

backend/contest/game_services.py

@@ -0,0 +1,240 @@
+import ast
+import secrets
+import unicodedata
+from collections import Counter
+from fractions import Fraction
+
+from django.db import transaction
+from django.utils import timezone
+from rest_framework.exceptions import ValidationError
+
+from .models import MathGameAttempt
+
+SUDOKU_PUZZLES = {
+    MathGameAttempt.Difficulty.EASY: [
+        (
+            "530070000600195000098000060800060003400803001700020006060000280000419005000080079",
+            "534678912672195348198342567859761423426853791713924856961537284287419635345286179",
+        ),
+    ],
+    MathGameAttempt.Difficulty.STANDARD: [
+        (
+            "000260701680070090190004500820100040004602900050003028009300074040050036703018000",
+            "435269781682571493197834562826195347374682915951743628519326874248957136763418259",
+        ),
+    ],
+    MathGameAttempt.Difficulty.HARD: [
+        (
+            "000000010400000000020000000000050407008000300001090000300400200050100000000806000",
+            "693784512487512936125963874932651487568247391741398625319475268856129743274836159",
+        ),
+    ],
+}
+
+TWENTY_FOUR_PUZZLES = {
+    MathGameAttempt.Difficulty.EASY: [(3, 3, 8, 8), (1, 3, 4, 6), (4, 4, 10, 10)],
+    MathGameAttempt.Difficulty.STANDARD: [(2, 3, 4, 9), (3, 5, 7, 13), (4, 7, 8, 8)],
+    MathGameAttempt.Difficulty.HARD: [(1, 5, 5, 5), (3, 3, 7, 7), (5, 5, 7, 11)],
+}
+
+TWENTY_FOUR_SYMBOLS = str.maketrans(
+    {
+        "×": "*",
+        "·": "*",
+        "∙": "*",
+        "÷": "/",
+        "−": "-",
+        "–": "-",
+        "—": "-",
+    }
+)
+
+
+def _grid_from_text(value):
+    return [[int(value[row * 9 + column]) for column in range(9)] for row in range(9)]
+
+
+def game_payload(attempt):
+    return {
+        "attempt_id": attempt.id,
+        "kind": attempt.kind,
+        "difficulty": attempt.difficulty,
+        "status": attempt.status,
+        "puzzle": attempt.puzzle,
+        "score": attempt.score,
+        "duration_ms": attempt.duration_ms,
+        "hints_used": attempt.hints_used,
+        "started_at": attempt.started_at,
+    }
+
+
+def start_game(user, kind, difficulty):
+    if kind not in MathGameAttempt.Kind.values:
+        raise ValidationError({"kind": "不支持的数学玩法"})
+    if difficulty not in MathGameAttempt.Difficulty.values:
+        raise ValidationError({"difficulty": "不支持的难度"})
+    if kind == MathGameAttempt.Kind.SUDOKU:
+        puzzle_text, solution_text = secrets.choice(SUDOKU_PUZZLES[difficulty])
+        puzzle = {"grid": _grid_from_text(puzzle_text), "hints": []}
+        solution = {"grid": _grid_from_text(solution_text)}
+    else:
+        numbers = list(secrets.choice(TWENTY_FOUR_PUZZLES[difficulty]))
+        secrets.SystemRandom().shuffle(numbers)
+        puzzle = {"numbers": numbers}
+        solution = {"target": 24}
+    attempt = MathGameAttempt.objects.create(
+        user=user,
+        kind=kind,
+        difficulty=difficulty,
+        puzzle=puzzle,
+        solution=solution,
+    )
+    return game_payload(attempt)
+
+
+def _validate_twenty_four_expression(source, numbers):
+    source = unicodedata.normalize("NFKC", str(source or "")).translate(
+        TWENTY_FOUR_SYMBOLS
+    )
+    source = source.strip()
+    if not source or len(source) > 120:
+        raise ValidationError({"expression": "请输入不超过 120 个字符的表达式"})
+    try:
+        tree = ast.parse(source, mode="eval")
+    except SyntaxError as exc:
+        raise ValidationError({"expression": "表达式语法无效"}) from exc
+    used = []
+
+    def evaluate(node):
+        if (
+            isinstance(node, ast.Constant)
+            and isinstance(node.value, int)
+            and not isinstance(node.value, bool)
+        ):
+            used.append(node.value)
+            return Fraction(node.value)
+        if isinstance(node, ast.BinOp) and isinstance(
+            node.op,
+            (ast.Add, ast.Sub, ast.Mult, ast.Div),
+        ):
+            left = evaluate(node.left)
+            right = evaluate(node.right)
+            if isinstance(node.op, ast.Add):
+                return left + right
+            if isinstance(node.op, ast.Sub):
+                return left - right
+            if isinstance(node.op, ast.Mult):
+                return left * right
+            if right == 0:
+                raise ValidationError({"expression": "不能除以零"})
+            return left / right
+        raise ValidationError({"expression": "只允许题目数字、括号和 + - * /"})
+
+    result = evaluate(tree.body)
+    if Counter(used) != Counter(numbers):
+        raise ValidationError({"expression": "必须且只能使用题目给出的四个数字各一次"})
+    if result != 24:
+        raise ValidationError({"expression": f"当前结果是 {result}，还没有得到 24"})
+    return source
+
+
+def _validate_sudoku_grid(raw_grid, puzzle, solution):
+    if (
+        not isinstance(raw_grid, list)
+        or len(raw_grid) != 9
+        or any(not isinstance(row, list) or len(row) != 9 for row in raw_grid)
+    ):
+        raise ValidationError({"grid": "数独答案必须是 9×9 网格"})
+    try:
+        grid = [[int(value) for value in row] for row in raw_grid]
+    except (TypeError, ValueError) as exc:
+        raise ValidationError({"grid": "每个格子必须填写 1 到 9"}) from exc
+    if any(value < 1 or value > 9 for row in grid for value in row):
+        raise ValidationError({"grid": "每个格子必须填写 1 到 9"})
+    givens = puzzle["grid"]
+    for row in range(9):
+        for column in range(9):
+            if givens[row][column] and grid[row][column] != givens[row][column]:
+                raise ValidationError({"grid": "不能修改题目给出的数字"})
+    if grid != solution["grid"]:
+        raise ValidationError({"grid": "答案尚未满足全部行、列和九宫格"})
+    return grid
+
+
+@transaction.atomic
+def submit_game(user, attempt_id, submission, submission_key):
+    attempt = MathGameAttempt.objects.select_for_update().get(id=attempt_id, user=user)
+    if attempt.status == MathGameAttempt.Status.COMPLETED:
+        if submission_key and attempt.submission_key == submission_key:
+            return game_payload(attempt)
+        raise ValidationError("这局游戏已经完成")
+    if not submission_key:
+        raise ValidationError({"Idempotency-Key": "提交必须提供幂等键"})
+
+    if attempt.kind == MathGameAttempt.Kind.SUDOKU:
+        normalized = {
+            "grid": _validate_sudoku_grid(
+                submission.get("grid"),
+                attempt.puzzle,
+                attempt.solution,
+            )
+        }
+    else:
+        normalized = {
+            "expression": _validate_twenty_four_expression(
+                submission.get("expression"),
+                attempt.puzzle["numbers"],
+            )
+        }
+
+    now = timezone.now()
+    duration_ms = max(0, int((now - attempt.started_at).total_seconds() * 1000))
+    base_score = 1800 if attempt.kind == MathGameAttempt.Kind.SUDOKU else 1000
+    time_penalty = duration_ms // (2000 if attempt.kind == MathGameAttempt.Kind.SUDOKU else 1000)
+    attempt.submission = normalized
+    attempt.status = MathGameAttempt.Status.COMPLETED
+    attempt.duration_ms = duration_ms
+    attempt.score = max(100, base_score - time_penalty - attempt.hints_used * 150)
+    attempt.submission_key = submission_key
+    attempt.submitted_at = now
+    attempt.save(
+        update_fields=[
+            "submission",
+            "status",
+            "duration_ms",
+            "score",
+            "submission_key",
+            "submitted_at",
+        ]
+    )
+    return game_payload(attempt)
+
+
+@transaction.atomic
+def request_sudoku_hint(user, attempt_id):
+    attempt = MathGameAttempt.objects.select_for_update().get(id=attempt_id, user=user)
+    if attempt.kind != MathGameAttempt.Kind.SUDOKU:
+        raise ValidationError("只有数独支持提示")
+    if attempt.status != MathGameAttempt.Status.ACTIVE:
+        raise ValidationError("这局游戏已经结束")
+    hints = list(attempt.puzzle.get("hints", []))
+    if len(hints) >= 3:
+        raise ValidationError("每局最多使用 3 次提示")
+    candidates = [
+        (row, column)
+        for row in range(9)
+        for column in range(9)
+        if attempt.puzzle["grid"][row][column] == 0
+        and not any(item["row"] == row and item["column"] == column for item in hints)
+    ]
+    row, column = secrets.choice(candidates)
+    hint = {
+        "row": row,
+        "column": column,
+        "value": attempt.solution["grid"][row][column],
+    }
+    hints.append(hint)
+    attempt.puzzle = {**attempt.puzzle, "hints": hints}
+    attempt.hints_used = len(hints)
+    attempt.save(update_fields=["puzzle", "hints_used"])
+    return {**hint, "hints_used": attempt.hints_used}

backend/contest/migrations/0003_mathgameattempt_and_more.py

@@ -0,0 +1,44 @@
+# Generated by Django 4.2.23 on 2026-08-08 17:26
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('contest', '0002_realtimematch_matchmaking_lookup_idx'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='MathGameAttempt',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('kind', models.CharField(choices=[('sudoku', '数独'), ('twenty_four', '24 点')], max_length=20)),
+                ('difficulty', models.CharField(choices=[('easy', '入门'), ('standard', '标准'), ('hard', '进阶')], default='standard', max_length=16)),
+                ('puzzle', models.JSONField(default=dict)),
+                ('solution', models.JSONField(default=dict)),
+                ('submission', models.JSONField(blank=True, default=dict)),
+                ('status', models.CharField(choices=[('active', '进行中'), ('completed', '已完成'), ('failed', '未通过')], default='active', max_length=16)),
+                ('score', models.PositiveIntegerField(default=0)),
+                ('duration_ms', models.PositiveIntegerField(default=0)),
+                ('hints_used', models.PositiveSmallIntegerField(default=0)),
+                ('submission_key', models.CharField(blank=True, max_length=80, null=True)),
+                ('started_at', models.DateTimeField(auto_now_add=True)),
+                ('submitted_at', models.DateTimeField(blank=True, null=True)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='math_game_attempts', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'ordering': ['-started_at'],
+                'indexes': [models.Index(fields=['kind', 'status', '-score', 'duration_ms'], name='math_game_ranking_idx')],
+            },
+        ),
+        migrations.AddConstraint(
+            model_name='mathgameattempt',
+            constraint=models.UniqueConstraint(fields=('user', 'submission_key'), name='unique_user_math_game_submission'),
+        ),
+    ]

backend/contest/migrations/0004_remove_realtimematch_matchmaking_lookup_idx_and_more.py

@@ -0,0 +1,36 @@
+# Generated by Django 4.2.23 on 2026-08-08 18:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('contest', '0003_mathgameattempt_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveIndex(
+            model_name='realtimematch',
+            name='matchmaking_lookup_idx',
+        ),
+        migrations.AddField(
+            model_name='realtimematch',
+            name='challenge_code',
+            field=models.CharField(blank=True, max_length=8, null=True, unique=True),
+        ),
+        migrations.AddField(
+            model_name='realtimematch',
+            name='expires_at',
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='realtimematch',
+            name='match_type',
+            field=models.CharField(choices=[('random', '随机匹配'), ('challenge', '联机码约战')], default='random', max_length=16),
+        ),
+        migrations.AddIndex(
+            model_name='realtimematch',
+            index=models.Index(fields=['contest', 'match_type', 'status', 'player_one_rating', 'created_at'], name='matchmaking_lookup_idx'),
+        ),
+    ]

backend/contest/models.py

@@ -77,6 +77,10 @@ class ContestQuestion(models.Model):
 
 
 class RealtimeMatch(models.Model):
+    class MatchType(models.TextChoices):
+        RANDOM = "random", "随机匹配"
+        CHALLENGE = "challenge", "联机码约战"
+
     class Status(models.TextChoices):
         WAITING = "waiting", "等待对手"
         ACTIVE = "active", "进行中"
@@ -85,6 +89,12 @@ class RealtimeMatch(models.Model):
 
     id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
     contest = models.ForeignKey(Contest, on_delete=models.PROTECT)
+    match_type = models.CharField(
+        max_length=16,
+        choices=MatchType.choices,
+        default=MatchType.RANDOM,
+    )
+    challenge_code = models.CharField(max_length=8, unique=True, null=True, blank=True)
     player_one = models.ForeignKey(
         settings.AUTH_USER_MODEL, on_delete=models.PROTECT, related_name="matches_as_player_one"
     )
@@ -106,13 +116,20 @@ class RealtimeMatch(models.Model):
         related_name="won_matches",
     )
     created_at = models.DateTimeField(auto_now_add=True)
+    expires_at = models.DateTimeField(null=True, blank=True)
     started_at = models.DateTimeField(null=True, blank=True)
     completed_at = models.DateTimeField(null=True, blank=True)
 
     class Meta:
         indexes = [
             models.Index(
-                fields=("contest", "status", "player_one_rating", "created_at"),
+                fields=(
+                    "contest",
+                    "match_type",
+                    "status",
+                    "player_one_rating",
+                    "created_at",
+                ),
                 name="matchmaking_lookup_idx",
             )
         ]
@@ -192,3 +209,57 @@ class CheatFlag(models.Model):
     evidence = models.JSONField(default=dict)
     status = models.CharField(max_length=16, choices=Status.choices, default=Status.OPEN)
     created_at = models.DateTimeField(auto_now_add=True)
+
+
+class MathGameAttempt(models.Model):
+    class Kind(models.TextChoices):
+        SUDOKU = "sudoku", "数独"
+        TWENTY_FOUR = "twenty_four", "24 点"
+
+    class Difficulty(models.TextChoices):
+        EASY = "easy", "入门"
+        STANDARD = "standard", "标准"
+        HARD = "hard", "进阶"
+
+    class Status(models.TextChoices):
+        ACTIVE = "active", "进行中"
+        COMPLETED = "completed", "已完成"
+        FAILED = "failed", "未通过"
+
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="math_game_attempts",
+    )
+    kind = models.CharField(max_length=20, choices=Kind.choices)
+    difficulty = models.CharField(
+        max_length=16,
+        choices=Difficulty.choices,
+        default=Difficulty.STANDARD,
+    )
+    puzzle = models.JSONField(default=dict)
+    solution = models.JSONField(default=dict)
+    submission = models.JSONField(default=dict, blank=True)
+    status = models.CharField(max_length=16, choices=Status.choices, default=Status.ACTIVE)
+    score = models.PositiveIntegerField(default=0)
+    duration_ms = models.PositiveIntegerField(default=0)
+    hints_used = models.PositiveSmallIntegerField(default=0)
+    submission_key = models.CharField(max_length=80, null=True, blank=True)
+    started_at = models.DateTimeField(auto_now_add=True)
+    submitted_at = models.DateTimeField(null=True, blank=True)
+
+    class Meta:
+        constraints = [
+            models.UniqueConstraint(
+                fields=("user", "submission_key"),
+                name="unique_user_math_game_submission",
+            )
+        ]
+        indexes = [
+            models.Index(
+                fields=("kind", "status", "-score", "duration_ms"),
+                name="math_game_ranking_idx",
+            )
+        ]
+        ordering = ["-started_at"]

backend/contest/services.py

@@ -1,5 +1,9 @@
+import secrets
+from datetime import timedelta
 from decimal import Decimal
 
+from asgiref.sync import async_to_sync
+from channels.layers import get_channel_layer
 from django.db import transaction
 from django.db.models import Q
 from django.utils import timezone
@@ -16,6 +20,93 @@ from .models import (
     RealtimeMatch,
 )
 
+CHALLENGE_CODE_ALPHABET = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"
+WAITING_MATCH_TTL = timedelta(minutes=10)
+
+
+def _broadcast_match(match_id, reason):
+    channel_layer = get_channel_layer()
+    if channel_layer is None:
+        return
+    async_to_sync(channel_layer.group_send)(
+        f"match_{match_id}",
+        {
+            "type": "match.state",
+            "reason": reason,
+        },
+    )
+
+
+def notify_match_on_commit(match_id, reason):
+    transaction.on_commit(lambda: _broadcast_match(match_id, reason))
+
+
+def _new_challenge_code():
+    for _ in range(20):
+        code = "".join(secrets.choice(CHALLENGE_CODE_ALPHABET) for _ in range(6))
+        if not RealtimeMatch.objects.filter(challenge_code=code).exists():
+            return code
+    raise ValidationError("暂时无法生成联机码，请稍后重试")
+
+
+def _validate_realtime_contest(contest):
+    if contest.kind != Contest.Kind.REALTIME or contest.status != Contest.Status.PUBLISHED:
+        raise ValidationError("实时比赛不可用")
+
+
+def _cancel_expired_waiting_matches():
+    RealtimeMatch.objects.filter(status=RealtimeMatch.Status.WAITING).filter(
+        Q(expires_at__isnull=True) | Q(expires_at__lte=timezone.now())
+    ).update(status=RealtimeMatch.Status.CANCELLED)
+
+
+def _active_match_for(user):
+    return (
+        RealtimeMatch.objects.filter(
+            Q(player_one=user) | Q(player_two=user),
+            status=RealtimeMatch.Status.ACTIVE,
+        )
+        .select_related("contest", "player_one", "player_two")
+        .first()
+    )
+
+
+def _cancel_other_waiting_matches(user, match_type):
+    matches = list(
+        RealtimeMatch.objects.filter(
+            player_one=user,
+            status=RealtimeMatch.Status.WAITING,
+        )
+        .exclude(match_type=match_type)
+        .values_list("id", flat=True)
+    )
+    if matches:
+        RealtimeMatch.objects.filter(id__in=matches).update(
+            status=RealtimeMatch.Status.CANCELLED
+        )
+        for match_id in matches:
+            notify_match_on_commit(match_id, "cancelled")
+
+
+def _activate_match(match, user):
+    now = timezone.now()
+    match.player_two = user
+    match.player_two_rating = user.rating
+    match.status = RealtimeMatch.Status.ACTIVE
+    match.started_at = now
+    match.save(
+        update_fields=["player_two", "player_two_rating", "status", "started_at"]
+    )
+    ContestAttempt.objects.bulk_create(
+        [
+            ContestAttempt(contest=match.contest, user=match.player_one, match=match),
+            ContestAttempt(contest=match.contest, user=user, match=match),
+        ]
+    )
+    match.attempts.update(started_at=now)
+    notify_match_on_commit(match.id, "matched")
+    return match
+
 
 def normalize_answer(value):
     text = str(value).strip().lower().replace(" ", "")
@@ -35,12 +126,12 @@ def attempt_payload(attempt, include_results=False):
             "metadata": item.question_version.metadata,
             "points": item.points,
         }
-        if include_results and item.id in answers:
-            answer = answers[item.id]
+        if include_results:
+            answer = answers.get(item.id)
             question.update(
                 {
-                    "submitted_answer": answer.submitted_answer,
-                    "is_correct": answer.is_correct,
+                    "submitted_answer": answer.submitted_answer if answer else "",
+                    "is_correct": answer.is_correct if answer else False,
                     "correct_answer": item.question_version.answer,
                     "explanation": item.question_version.explanation,
                 }
@@ -48,6 +139,7 @@ def attempt_payload(attempt, include_results=False):
         questions.append(question)
     return {
         "attempt_id": attempt.id,
+        "match_id": attempt.match_id,
         "contest": attempt.contest.title,
         "kind": attempt.contest.kind,
         "status": attempt.status,
@@ -90,7 +182,10 @@ def submit_attempt(user, attempt_id, raw_answers, submission_key):
     )
     if attempt.status != ContestAttempt.Status.ACTIVE:
         if submission_key and attempt.submission_key == submission_key:
-            return attempt_payload(attempt, include_results=True)
+            include_results = not attempt.match_id or (
+                attempt.match.status == RealtimeMatch.Status.COMPLETED
+            )
+            return attempt_payload(attempt, include_results=include_results)
         raise ValidationError("该答题记录已经结算")
     if not submission_key:
         raise ValidationError({"Idempotency-Key": "正式提交必须提供幂等键"})
@@ -153,20 +248,34 @@ def submit_attempt(user, attempt_id, raw_answers, submission_key):
             },
         )
     if attempt.match_id:
-        finalize_match(attempt.match_id)
+        match = finalize_match(attempt.match_id)
+        if match.status != RealtimeMatch.Status.COMPLETED:
+            notify_match_on_commit(attempt.match_id, "submitted")
+        attempt.match.refresh_from_db()
+        return attempt_payload(
+            attempt,
+            include_results=attempt.match.status == RealtimeMatch.Status.COMPLETED,
+        )
     return attempt_payload(attempt, include_results=True)
 
 
 @transaction.atomic
 def find_match(user, contest):
-    if contest.kind != Contest.Kind.REALTIME or contest.status != Contest.Status.PUBLISHED:
-        raise ValidationError("实时比赛不可用")
+    _validate_realtime_contest(contest)
+    _cancel_expired_waiting_matches()
+    active = _active_match_for(user)
+    if active:
+        if active.contest_id == contest.id:
+            return active
+        raise ValidationError("你已有一场进行中的实时比赛")
+    _cancel_other_waiting_matches(user, RealtimeMatch.MatchType.RANDOM)
     existing = (
         RealtimeMatch.objects.filter(
             Q(player_one=user) | Q(player_two=user),
             contest=contest,
+            match_type=RealtimeMatch.MatchType.RANDOM,
             status__in=[RealtimeMatch.Status.WAITING, RealtimeMatch.Status.ACTIVE],
-        )
+        ).filter(Q(status=RealtimeMatch.Status.ACTIVE) | Q(expires_at__gt=timezone.now()))
         .order_by("-created_at")
         .first()
     )
@@ -177,7 +286,9 @@ def find_match(user, contest):
         RealtimeMatch.objects.select_for_update(skip_locked=True)
         .filter(
             contest=contest,
+            match_type=RealtimeMatch.MatchType.RANDOM,
             status=RealtimeMatch.Status.WAITING,
+            expires_at__gt=timezone.now(),
             player_one_rating__gte=max(0, user.rating - 300),
             player_one_rating__lte=user.rating + 300,
         )
@@ -188,42 +299,198 @@ def find_match(user, contest):
     if waiting is None:
         return RealtimeMatch.objects.create(
             contest=contest,
+            match_type=RealtimeMatch.MatchType.RANDOM,
             player_one=user,
             player_one_rating=user.rating,
+            expires_at=timezone.now() + WAITING_MATCH_TTL,
         )
 
-    waiting.player_two = user
-    waiting.player_two_rating = user.rating
-    waiting.status = RealtimeMatch.Status.ACTIVE
-    waiting.started_at = timezone.now()
-    waiting.save(
-        update_fields=["player_two", "player_two_rating", "status", "started_at"]
+    return _activate_match(waiting, user)
+
+
+@transaction.atomic
+def create_challenge(user, contest):
+    _validate_realtime_contest(contest)
+    _cancel_expired_waiting_matches()
+    active = _active_match_for(user)
+    if active:
+        raise ValidationError("你已有一场进行中的实时比赛")
+    _cancel_other_waiting_matches(user, RealtimeMatch.MatchType.CHALLENGE)
+    existing = (
+        RealtimeMatch.objects.filter(
+            player_one=user,
+            contest=contest,
+            match_type=RealtimeMatch.MatchType.CHALLENGE,
+            status=RealtimeMatch.Status.WAITING,
+            expires_at__gt=timezone.now(),
+        )
+        .order_by("-created_at")
+        .first()
     )
-    ContestAttempt.objects.bulk_create(
-        [
-            ContestAttempt(contest=contest, user=waiting.player_one, match=waiting),
-            ContestAttempt(contest=contest, user=user, match=waiting),
-        ]
+    if existing:
+        return existing
+    return RealtimeMatch.objects.create(
+        contest=contest,
+        match_type=RealtimeMatch.MatchType.CHALLENGE,
+        challenge_code=_new_challenge_code(),
+        player_one=user,
+        player_one_rating=user.rating,
+        expires_at=timezone.now() + WAITING_MATCH_TTL,
     )
-    return waiting
+
+
+@transaction.atomic
+def join_challenge(user, challenge_code):
+    _cancel_expired_waiting_matches()
+    code = str(challenge_code or "").strip().upper()
+    if len(code) != 6 or any(character not in CHALLENGE_CODE_ALPHABET for character in code):
+        raise ValidationError({"challenge_code": "联机码应为 6 位大写字母或数字"})
+    try:
+        match = (
+            RealtimeMatch.objects.select_for_update()
+            .select_related("contest", "player_one")
+            .get(
+                challenge_code=code,
+                match_type=RealtimeMatch.MatchType.CHALLENGE,
+            )
+        )
+    except RealtimeMatch.DoesNotExist as exc:
+        raise ValidationError({"challenge_code": "联机码不存在"}) from exc
+    if match.player_one_id == user.id:
+        raise ValidationError({"challenge_code": "不能加入自己创建的约战"})
+    if match.status != RealtimeMatch.Status.WAITING or (
+        match.expires_at and match.expires_at <= timezone.now()
+    ):
+        raise ValidationError({"challenge_code": "联机码已失效或已被使用"})
+    active = _active_match_for(user)
+    if active and active.id != match.id:
+        raise ValidationError("你已有一场进行中的实时比赛")
+    own_waiting_ids = list(
+        RealtimeMatch.objects.filter(
+            player_one=user,
+            status=RealtimeMatch.Status.WAITING,
+        )
+        .exclude(id=match.id)
+        .values_list("id", flat=True)
+    )
+    if own_waiting_ids:
+        RealtimeMatch.objects.filter(id__in=own_waiting_ids).update(
+            status=RealtimeMatch.Status.CANCELLED
+        )
+        for match_id in own_waiting_ids:
+            notify_match_on_commit(match_id, "cancelled")
+    return _activate_match(match, user)
+
+
+@transaction.atomic
+def cancel_waiting_match(user, match_id):
+    match = RealtimeMatch.objects.select_for_update().get(id=match_id)
+    if match.player_one_id != user.id:
+        raise ValidationError("只有创建者可以取消等待")
+    if match.status != RealtimeMatch.Status.WAITING:
+        raise ValidationError("只能取消等待中的比赛")
+    match.status = RealtimeMatch.Status.CANCELLED
+    match.save(update_fields=["status"])
+    notify_match_on_commit(match.id, "cancelled")
+    return match
 
 
 def match_payload(match, user):
-    attempt = match.attempts.filter(user=user).first()
+    reveal_results = match.status == RealtimeMatch.Status.COMPLETED
+    attempts = {
+        attempt.user_id: attempt
+        for attempt in match.attempts.select_related("user", "contest").all()
+    }
+    attempt = attempts.get(user.id)
     opponent = match.player_two if match.player_one_id == user.id else match.player_one
+    opponent_attempt = attempts.get(opponent.id) if opponent else None
+    rating_change = (
+        match.rating_changes.filter(user=user).values("delta", "rating_after").first()
+        if reveal_results
+        else None
+    )
     return {
         "match_id": match.id,
+        "match_type": match.match_type,
+        "is_owner": match.player_one_id == user.id,
+        "challenge_code": (
+            match.challenge_code
+            if match.match_type == RealtimeMatch.MatchType.CHALLENGE
+            and match.status == RealtimeMatch.Status.WAITING
+            else None
+        ),
         "status": match.status,
+        "contest": match.contest.title,
+        "duration_seconds": match.contest.duration_seconds,
+        "expires_at": match.expires_at,
+        "started_at": match.started_at,
         "opponent": (
-            {"nickname": opponent.nickname, "rating": opponent.rating}
+            {
+                "nickname": opponent.nickname,
+                "rating": opponent.rating,
+                "status": opponent_attempt.status if opponent_attempt else None,
+                "score": opponent_attempt.score if reveal_results and opponent_attempt else None,
+                "correct_count": (
+                    opponent_attempt.correct_count
+                    if reveal_results and opponent_attempt
+                    else None
+                ),
+            }
             if opponent
             else None
         ),
-        "attempt": attempt_payload(attempt) if attempt else None,
+        "attempt": (
+            attempt_payload(attempt, include_results=reveal_results)
+            if attempt
+            else None
+        ),
+        "result": (
+            {
+                "winner": (
+                    "draw"
+                    if match.winner_id is None
+                    else "self"
+                    if match.winner_id == user.id
+                    else "opponent"
+                ),
+                "rating_delta": rating_change["delta"] if rating_change else 0,
+                "rating_after": rating_change["rating_after"] if rating_change else user.rating,
+            }
+            if reveal_results
+            else None
+        ),
         "websocket_path": f"/ws/v1/contest/matches/{match.id}/",
     }
 
 
+@transaction.atomic
+def refresh_match_state(match_id):
+    match = (
+        RealtimeMatch.objects.select_for_update()
+        .select_related("contest", "player_one", "player_two")
+        .get(id=match_id)
+    )
+    if (
+        match.status == RealtimeMatch.Status.WAITING
+        and match.expires_at
+        and match.expires_at <= timezone.now()
+    ):
+        match.status = RealtimeMatch.Status.CANCELLED
+        match.save(update_fields=["status"])
+        notify_match_on_commit(match.id, "expired")
+    elif match.status == RealtimeMatch.Status.ACTIVE and match.started_at:
+        deadline = match.started_at + timedelta(seconds=match.contest.duration_seconds)
+        if timezone.now() >= deadline:
+            elapsed_ms = match.contest.duration_seconds * 1000
+            match.attempts.filter(status=ContestAttempt.Status.ACTIVE).update(
+                status=ContestAttempt.Status.EXPIRED,
+                duration_ms=elapsed_ms,
+                submitted_at=timezone.now(),
+            )
+            match = finalize_match(match.id)
+    return match
+
+
 def _elo_delta(rating, opponent_rating, score, k=32):
     expected = 1 / (1 + 10 ** ((opponent_rating - rating) / 400))
     return round(k * (score - expected))
@@ -277,4 +544,5 @@ def finalize_match(match_id):
     match.status = RealtimeMatch.Status.COMPLETED
     match.completed_at = timezone.now()
     match.save(update_fields=["winner", "status", "completed_at"])
+    notify_match_on_commit(match.id, "completed")
     return match

backend/contest/test_consumers.py

@@ -0,0 +1,87 @@
+import pytest
+from asgiref.sync import async_to_sync
+from channels.layers import get_channel_layer
+from channels.routing import URLRouter
+from channels.testing import WebsocketCommunicator
+from django.urls import path
+
+from accounts.models import User
+from contest.consumers import MatchConsumer
+from contest.models import Contest, Question, RealtimeMatch
+
+
+@pytest.mark.django_db(transaction=True)
+def test_match_consumer_双方连接并同步答题进度():
+    first = User.objects.create_user(
+        username="socket_player_one",
+        password="StrongPass_2026",
+        nickname="WS 玩家一",
+    )
+    second = User.objects.create_user(
+        username="socket_player_two",
+        password="StrongPass_2026",
+        nickname="WS 玩家二",
+    )
+    outsider = User.objects.create_user(
+        username="socket_outsider",
+        password="StrongPass_2026",
+        nickname="WS 局外人",
+    )
+    contest = Contest.objects.create(
+        slug="socket-contest",
+        title="WebSocket 联机赛",
+        kind=Contest.Kind.REALTIME,
+        track=Question.Track.STANDARD,
+        status=Contest.Status.PUBLISHED,
+    )
+    match = RealtimeMatch.objects.create(
+        contest=contest,
+        player_one=first,
+        player_two=second,
+        player_one_rating=first.rating,
+        player_two_rating=second.rating,
+        status=RealtimeMatch.Status.ACTIVE,
+    )
+    application = URLRouter(
+        [
+            path(
+                "ws/test/<uuid:match_id>/",
+                MatchConsumer.as_asgi(),
+            )
+        ]
+    )
+
+    async def scenario():
+        outsider_socket = WebsocketCommunicator(application, f"/ws/test/{match.id}/")
+        outsider_socket.scope["user"] = outsider
+        outsider_connected, close_code = await outsider_socket.connect()
+        assert not outsider_connected
+        assert close_code == 4403
+
+        first_socket = WebsocketCommunicator(application, f"/ws/test/{match.id}/")
+        second_socket = WebsocketCommunicator(application, f"/ws/test/{match.id}/")
+        first_socket.scope["user"] = first
+        second_socket.scope["user"] = second
+        first_connected, _ = await first_socket.connect()
+        second_connected, _ = await second_socket.connect()
+        assert first_connected and second_connected
+        assert (await first_socket.receive_json_from())["type"] == "connected"
+        assert (await second_socket.receive_json_from())["type"] == "connected"
+
+        await first_socket.send_json_to({"type": "progress", "answered_count": 3})
+        first_progress = await first_socket.receive_json_from()
+        second_progress = await second_socket.receive_json_from()
+        assert first_progress["answered_count"] == 3
+        assert second_progress["answered_count"] == 3
+        assert second_progress["user_id"] == str(first.id)
+
+        await get_channel_layer().group_send(
+            f"match_{match.id}",
+            {"type": "match.state", "reason": "completed"},
+        )
+        assert (await first_socket.receive_json_from())["reason"] == "completed"
+        assert (await second_socket.receive_json_from())["reason"] == "completed"
+        await first_socket.disconnect()
+        await second_socket.disconnect()
+
+    async_to_sync(scenario)()

backend/contest/test_game_services.py

@@ -0,0 +1,177 @@
+import pytest
+from rest_framework.exceptions import ValidationError
+
+from accounts.models import User
+from contest.game_services import (
+    SUDOKU_PUZZLES,
+    request_sudoku_hint,
+    start_game,
+    submit_game,
+)
+from contest.models import MathGameAttempt
+
+
+@pytest.fixture
+def game_user(db):
+    return User.objects.create_user(
+        username="game_user",
+        password="StrongPass_2026",
+        nickname="游戏玩家",
+    )
+
+
+@pytest.mark.django_db
+def test_twenty_four_服务端校验数字使用与幂等提交(game_user):
+    attempt = MathGameAttempt.objects.create(
+        user=game_user,
+        kind=MathGameAttempt.Kind.TWENTY_FOUR,
+        puzzle={"numbers": [1, 3, 4, 6]},
+        solution={"target": 24},
+    )
+
+    result = submit_game(
+        game_user,
+        attempt.id,
+        {"expression": "6 / (1 - 3 / 4)"},
+        "game-submit-1",
+    )
+    replay = submit_game(
+        game_user,
+        attempt.id,
+        {"expression": "1 + 3 + 4 + 6"},
+        "game-submit-1",
+    )
+
+    assert result["status"] == MathGameAttempt.Status.COMPLETED
+    assert result["score"] >= 100
+    assert replay["score"] == result["score"]
+
+
+@pytest.mark.django_db
+def test_twenty_four_api_兼容常见数学符号并完成计分(client, game_user):
+    attempt = MathGameAttempt.objects.create(
+        user=game_user,
+        kind=MathGameAttempt.Kind.TWENTY_FOUR,
+        puzzle={"numbers": [1, 3, 4, 6]},
+        solution={"target": 24},
+    )
+    client.force_login(game_user)
+
+    response = client.post(
+        f"/api/v1/contests/games/attempts/{attempt.id}/submit/",
+        {"expression": "６÷（１−３÷４）"},
+        content_type="application/json",
+        HTTP_IDEMPOTENCY_KEY="unicode-game-submit",
+    )
+
+    assert response.status_code == 200
+    assert response.json()["status"] == MathGameAttempt.Status.COMPLETED
+    assert response.json()["score"] >= 100
+    attempt.refresh_from_db()
+    assert attempt.submission == {"expression": "6/(1-3/4)"}
+
+
+@pytest.mark.django_db
+def test_twenty_four_api_答案错误时返回具体原因和请求编号(client, game_user):
+    attempt = MathGameAttempt.objects.create(
+        user=game_user,
+        kind=MathGameAttempt.Kind.TWENTY_FOUR,
+        puzzle={"numbers": [1, 3, 4, 6]},
+        solution={"target": 24},
+    )
+    client.force_login(game_user)
+
+    response = client.post(
+        f"/api/v1/contests/games/attempts/{attempt.id}/submit/",
+        {"expression": "1 + 3 + 4 + 6"},
+        content_type="application/json",
+        HTTP_IDEMPOTENCY_KEY="incorrect-game-submit",
+        HTTP_X_REQUEST_ID="twenty-four-invalid-test",
+    )
+
+    assert response.status_code == 400
+    assert response.json()["error"]["message"] == "当前结果是 14，还没有得到 24"
+    assert response.json()["error"]["request_id"] == "twenty-four-invalid-test"
+    attempt.refresh_from_db()
+    assert attempt.status == MathGameAttempt.Status.ACTIVE
+
+
+@pytest.mark.django_db
+def test_twenty_four_拒绝额外数字和非四则表达式(game_user):
+    attempt = MathGameAttempt.objects.create(
+        user=game_user,
+        kind=MathGameAttempt.Kind.TWENTY_FOUR,
+        puzzle={"numbers": [1, 3, 4, 6]},
+        solution={"target": 24},
+    )
+
+    with pytest.raises(ValidationError, match="四个数字"):
+        submit_game(
+            game_user,
+            attempt.id,
+            {"expression": "6 / (1 - 3 / 4) + 24 - 24"},
+            "invalid-extra-number",
+        )
+    with pytest.raises(ValidationError, match="只允许"):
+        submit_game(
+            game_user,
+            attempt.id,
+            {"expression": "pow(2, 3) * 3"},
+            "invalid-function",
+        )
+    with pytest.raises(ValidationError, match="只允许"):
+        submit_game(
+            game_user,
+            attempt.id,
+            {"expression": "6 / (True - 3 / 4)"},
+            "invalid-boolean",
+        )
+
+
+@pytest.mark.django_db
+def test_sudoku_提示受限并由服务端校验完整答案(game_user):
+    payload = start_game(
+        game_user,
+        MathGameAttempt.Kind.SUDOKU,
+        MathGameAttempt.Difficulty.EASY,
+    )
+    attempt = MathGameAttempt.objects.get(id=payload["attempt_id"])
+    hint = request_sudoku_hint(game_user, attempt.id)
+    solution_text = SUDOKU_PUZZLES[MathGameAttempt.Difficulty.EASY][0][1]
+    solution = [
+        [int(solution_text[row * 9 + column]) for column in range(9)]
+        for row in range(9)
+    ]
+
+    result = submit_game(
+        game_user,
+        attempt.id,
+        {"grid": solution},
+        "sudoku-submit-1",
+    )
+
+    assert hint["value"] == solution[hint["row"]][hint["column"]]
+    assert result["status"] == MathGameAttempt.Status.COMPLETED
+    assert result["hints_used"] == 1
+
+
+@pytest.mark.django_db
+def test_math_game_api_目录公开但开局需要登录(client, game_user):
+    catalog = client.get("/api/v1/contests/games/")
+    anonymous_start = client.post(
+        "/api/v1/contests/games/twenty_four/start/",
+        {"difficulty": "easy"},
+        content_type="application/json",
+    )
+    client.force_login(game_user)
+    authenticated_start = client.post(
+        "/api/v1/contests/games/twenty_four/start/",
+        {"difficulty": "easy"},
+        content_type="application/json",
+    )
+
+    assert catalog.status_code == 200
+    assert {item["kind"] for item in catalog.json()} == {"sudoku", "twenty_four"}
+    assert anonymous_start.status_code in {401, 403}
+    assert authenticated_start.status_code == 201
+    assert "solution" not in authenticated_start.json()

backend/contest/test_realtime_api.py

@@ -0,0 +1,205 @@
+from datetime import timedelta
+
+import pytest
+from django.test import Client
+from django.utils import timezone
+
+from accounts.models import User
+from contest.models import (
+    Contest,
+    ContestQuestion,
+    Question,
+    QuestionVersion,
+    RealtimeMatch,
+)
+
+
+@pytest.fixture
+def realtime_api_setup(db):
+    question = Question.objects.create(
+        slug="realtime-api-question",
+        track=Question.Track.STANDARD,
+    )
+    version = QuestionVersion.objects.create(
+        question=question,
+        version=1,
+        prompt="18 + 24",
+        answer="42",
+        explanation="18 + 24 = 42",
+    )
+    contest = Contest.objects.create(
+        slug="realtime-api",
+        title="API 联机赛",
+        kind=Contest.Kind.REALTIME,
+        track=Question.Track.STANDARD,
+        status=Contest.Status.PUBLISHED,
+        duration_seconds=60,
+    )
+    ContestQuestion.objects.create(
+        contest=contest,
+        question_version=version,
+        order=1,
+        points=100,
+    )
+    first = User.objects.create_user(
+        username="api_player_one",
+        password="StrongPass_2026",
+        nickname="API 玩家一",
+    )
+    second = User.objects.create_user(
+        username="api_player_two",
+        password="StrongPass_2026",
+        nickname="API 玩家二",
+    )
+    first_client = Client()
+    second_client = Client()
+    first_client.force_login(first)
+    second_client.force_login(second)
+    return contest, first_client, second_client
+
+
+@pytest.mark.django_db
+def test_challenge_api_创建加入状态提交形成完整闭环(realtime_api_setup):
+    contest, first_client, second_client = realtime_api_setup
+    created = first_client.post(
+        f"/api/v1/contests/{contest.slug}/challenges/",
+        {},
+        content_type="application/json",
+    )
+    code = created.json()["challenge_code"]
+
+    joined = second_client.post(
+        "/api/v1/contests/challenges/join/",
+        {"challenge_code": code.lower()},
+        content_type="application/json",
+    )
+    match_id = joined.json()["match_id"]
+    first_state = first_client.get(f"/api/v1/contests/matches/{match_id}/")
+
+    assert created.status_code == 201
+    assert joined.status_code == 200
+    assert joined.json()["status"] == "active"
+    assert first_state.json()["opponent"]["nickname"] == "API 玩家二"
+
+    first_attempt = first_state.json()["attempt"]["attempt_id"]
+    second_attempt = joined.json()["attempt"]["attempt_id"]
+    first_submit = first_client.post(
+        f"/api/v1/contests/attempts/{first_attempt}/submit/",
+        {"answers": [{"order": 1, "answer": "42"}]},
+        content_type="application/json",
+        HTTP_IDEMPOTENCY_KEY="api-submit-one",
+    )
+    second_submit = second_client.post(
+        f"/api/v1/contests/attempts/{second_attempt}/submit/",
+        {"answers": [{"order": 1, "answer": "0"}]},
+        content_type="application/json",
+        HTTP_IDEMPOTENCY_KEY="api-submit-two",
+    )
+
+    assert first_submit.json()["status"] == "active"
+    assert "correct_answer" not in first_submit.json()["attempt"]["questions"][0]
+    assert second_submit.json()["status"] == "completed"
+    assert second_submit.json()["result"]["winner"] == "opponent"
+    final_state = first_client.get(f"/api/v1/contests/matches/{match_id}/").json()
+    assert final_state["result"]["winner"] == "self"
+    assert final_state["attempt"]["questions"][0]["correct_answer"] == "42"
+
+
+@pytest.mark.django_db
+def test_challenge_api_无效联机码返回具体原因_request_id_和诊断日志(
+    realtime_api_setup,
+    caplog,
+):
+    _, _, second_client = realtime_api_setup
+    caplog.set_level("INFO", logger="common.api")
+
+    response = second_client.post(
+        "/api/v1/contests/challenges/join/",
+        {"challenge_code": "ABC234"},
+        content_type="application/json",
+        HTTP_X_REQUEST_ID="challenge-invalid-test",
+    )
+
+    assert response.status_code == 400
+    assert response["X-Request-ID"] == "challenge-invalid-test"
+    assert response.json()["error"] == {
+        "code": "invalid",
+        "message": "联机码不存在",
+        "details": {"challenge_code": "联机码不存在"},
+        "request_id": "challenge-invalid-test",
+    }
+    assert "api_request_error method=POST" in caplog.text
+    assert "path=/api/v1/contests/challenges/join/" in caplog.text
+    assert "fields=challenge_code message=联机码不存在" in caplog.text
+
+
+@pytest.mark.django_db
+def test_challenge_api_创建者不能加入自己的联机码(realtime_api_setup):
+    contest, first_client, _ = realtime_api_setup
+    created = first_client.post(
+        f"/api/v1/contests/{contest.slug}/challenges/",
+        {},
+        content_type="application/json",
+    )
+
+    response = first_client.post(
+        "/api/v1/contests/challenges/join/",
+        {"challenge_code": created.json()["challenge_code"]},
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert response.json()["error"]["message"] == "不能加入自己创建的约战"
+
+
+@pytest.mark.django_db
+def test_challenge_api_过期联机码返回具体原因(realtime_api_setup):
+    contest, first_client, second_client = realtime_api_setup
+    created = first_client.post(
+        f"/api/v1/contests/{contest.slug}/challenges/",
+        {},
+        content_type="application/json",
+    )
+    RealtimeMatch.objects.filter(id=created.json()["match_id"]).update(
+        expires_at=timezone.now() - timedelta(seconds=1)
+    )
+
+    response = second_client.post(
+        "/api/v1/contests/challenges/join/",
+        {"challenge_code": created.json()["challenge_code"]},
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert response.json()["error"]["message"] == "联机码已失效或已被使用"
+
+
+@pytest.mark.django_db
+def test_challenge_api_已使用联机码返回具体原因(realtime_api_setup):
+    contest, first_client, second_client = realtime_api_setup
+    created = first_client.post(
+        f"/api/v1/contests/{contest.slug}/challenges/",
+        {},
+        content_type="application/json",
+    )
+    second_client.post(
+        "/api/v1/contests/challenges/join/",
+        {"challenge_code": created.json()["challenge_code"]},
+        content_type="application/json",
+    )
+    third = User.objects.create_user(
+        username="api_player_three",
+        password="StrongPass_2026",
+        nickname="API 玩家三",
+    )
+    third_client = Client()
+    third_client.force_login(third)
+
+    response = third_client.post(
+        "/api/v1/contests/challenges/join/",
+        {"challenge_code": created.json()["challenge_code"]},
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert response.json()["error"]["message"] == "联机码已失效或已被使用"

backend/contest/test_services.py

@@ -15,9 +15,14 @@ from contest.models import (
     RealtimeMatch,
 )
 from contest.services import (
+    cancel_waiting_match,
+    create_challenge,
     finalize_match,
     find_match,
+    join_challenge,
+    match_payload,
     normalize_answer,
+    refresh_match_state,
     start_attempt,
     submit_attempt,
 )
@@ -62,6 +67,16 @@ def daily_contest(db):
     return contest
 
 
+@pytest.fixture
+def realtime_contest(daily_contest):
+    daily_contest.kind = Contest.Kind.REALTIME
+    daily_contest.slug = "realtime-with-question"
+    daily_contest.title = "联机测试赛"
+    daily_contest.duration_seconds = 60
+    daily_contest.save(update_fields=["kind", "slug", "title", "duration_seconds"])
+    return daily_contest
+
+
 @pytest.mark.parametrize(
     "raw, expected",
     [
@@ -201,3 +216,147 @@ def test_find_match_同分玩家配对并由_finalize_match_唯一结算_rating(
     assert first.rating == 1016
     assert second.rating == 984
     assert RatingHistory.objects.filter(match=active).count() == 2
+
+
+@pytest.mark.django_db
+def test_challenge_code_创建者和加入者通过联机码进入同一场(realtime_contest):
+    first = User.objects.create_user(
+        username="challenge_owner",
+        password="StrongPass_2026",
+        nickname="房主",
+    )
+    second = User.objects.create_user(
+        username="challenge_guest",
+        password="StrongPass_2026",
+        nickname="访客",
+    )
+
+    waiting = create_challenge(first, realtime_contest)
+    active = join_challenge(second, waiting.challenge_code.lower())
+    owner_payload = match_payload(active, first)
+    guest_payload = match_payload(active, second)
+
+    assert len(waiting.challenge_code) == 6
+    assert active.id == waiting.id
+    assert active.match_type == RealtimeMatch.MatchType.CHALLENGE
+    assert active.status == RealtimeMatch.Status.ACTIVE
+    assert active.attempts.count() == 2
+    assert owner_payload["opponent"]["nickname"] == "访客"
+    assert guest_payload["opponent"]["nickname"] == "房主"
+    assert owner_payload["attempt"]["questions"] == guest_payload["attempt"]["questions"]
+
+
+@pytest.mark.django_db
+def test_random_match_不会加入联机码约战(realtime_contest):
+    owner = User.objects.create_user(
+        username="private_owner",
+        password="StrongPass_2026",
+        nickname="约战房主",
+    )
+    random_player = User.objects.create_user(
+        username="random_player",
+        password="StrongPass_2026",
+        nickname="随机玩家",
+    )
+
+    challenge = create_challenge(owner, realtime_contest)
+    random_match = find_match(random_player, realtime_contest)
+
+    assert challenge.status == RealtimeMatch.Status.WAITING
+    assert random_match.id != challenge.id
+    assert random_match.match_type == RealtimeMatch.MatchType.RANDOM
+
+
+@pytest.mark.django_db
+def test_realtime_submit_双方结束前不泄露答案且结束后结算(realtime_contest):
+    first = User.objects.create_user(
+        username="fair_player_one",
+        password="StrongPass_2026",
+        nickname="公平玩家一",
+    )
+    second = User.objects.create_user(
+        username="fair_player_two",
+        password="StrongPass_2026",
+        nickname="公平玩家二",
+    )
+    match = join_challenge(
+        second,
+        create_challenge(first, realtime_contest).challenge_code,
+    )
+    first_attempt = match.attempts.get(user=first)
+    second_attempt = match.attempts.get(user=second)
+
+    first_result = submit_attempt(
+        first,
+        first_attempt.id,
+        [{"order": 1, "answer": "42"}],
+        "fair-submit-one",
+    )
+    active_payload = match_payload(match, first)
+
+    assert "correct_answer" not in first_result["questions"][0]
+    assert active_payload["status"] == RealtimeMatch.Status.ACTIVE
+    assert active_payload["attempt"]["status"] == ContestAttempt.Status.SUBMITTED
+
+    submit_attempt(
+        second,
+        second_attempt.id,
+        [{"order": 1, "answer": "0"}],
+        "fair-submit-two",
+    )
+    match.refresh_from_db()
+    completed_payload = match_payload(match, first)
+
+    assert match.status == RealtimeMatch.Status.COMPLETED
+    assert completed_payload["result"]["winner"] == "self"
+    assert completed_payload["attempt"]["questions"][0]["correct_answer"] == "42"
+    assert completed_payload["opponent"]["score"] == 0
+
+
+@pytest.mark.django_db
+def test_realtime_timeout_未提交玩家自动过期并完成比赛(realtime_contest):
+    first = User.objects.create_user(
+        username="timeout_one",
+        password="StrongPass_2026",
+        nickname="超时玩家一",
+    )
+    second = User.objects.create_user(
+        username="timeout_two",
+        password="StrongPass_2026",
+        nickname="超时玩家二",
+    )
+    match = join_challenge(
+        second,
+        create_challenge(first, realtime_contest).challenge_code,
+    )
+    RealtimeMatch.objects.filter(id=match.id).update(
+        started_at=timezone.now() - timedelta(seconds=61)
+    )
+
+    refreshed = refresh_match_state(match.id)
+
+    assert refreshed.status == RealtimeMatch.Status.COMPLETED
+    assert not refreshed.attempts.filter(status=ContestAttempt.Status.ACTIVE).exists()
+
+
+@pytest.mark.django_db
+def test_challenge_owner_可取消等待中的联机码(realtime_contest):
+    owner = User.objects.create_user(
+        username="cancel_owner",
+        password="StrongPass_2026",
+        nickname="取消房主",
+    )
+    waiting = create_challenge(owner, realtime_contest)
+
+    cancelled = cancel_waiting_match(owner, waiting.id)
+
+    assert cancelled.status == RealtimeMatch.Status.CANCELLED
+    with pytest.raises(ValidationError, match="失效"):
+        join_challenge(
+            User.objects.create_user(
+                username="late_guest",
+                password="StrongPass_2026",
+                nickname="迟到访客",
+            ),
+            waiting.challenge_code,
+        )

backend/contest/urls.py

@@ -3,17 +3,45 @@ from django.urls import path
 from .views import (
     AttemptStartView,
     AttemptSubmitView,
+    ChallengeCreateView,
+    ChallengeJoinView,
     ContestListView,
     LeaderboardView,
+    MatchCancelView,
     MatchmakingView,
     MatchStateView,
+    MathGameCatalogView,
+    MathGameHistoryView,
+    MathGameStartView,
+    MathGameSubmitView,
+    SudokuHintView,
 )
 
 urlpatterns = [
     path("", ContestListView.as_view(), name="contest-list"),
+    path("challenges/join/", ChallengeJoinView.as_view(), name="challenge-join"),
+    path("matches/<uuid:match_id>/", MatchStateView.as_view(), name="match-state"),
+    path("matches/<uuid:match_id>/cancel/", MatchCancelView.as_view(), name="match-cancel"),
     path("<slug:slug>/start/", AttemptStartView.as_view(), name="attempt-start"),
     path("<slug:slug>/matchmaking/", MatchmakingView.as_view(), name="matchmaking"),
+    path(
+        "<slug:slug>/challenges/",
+        ChallengeCreateView.as_view(),
+        name="challenge-create",
+    ),
     path("<slug:slug>/leaderboard/", LeaderboardView.as_view(), name="leaderboard"),
     path("attempts/<uuid:attempt_id>/submit/", AttemptSubmitView.as_view(), name="attempt-submit"),
-    path("matches/<uuid:match_id>/", MatchStateView.as_view(), name="match-state"),
+    path("games/", MathGameCatalogView.as_view(), name="math-game-catalog"),
+    path("games/history/", MathGameHistoryView.as_view(), name="math-game-history"),
+    path("games/<str:kind>/start/", MathGameStartView.as_view(), name="math-game-start"),
+    path(
+        "games/attempts/<uuid:attempt_id>/submit/",
+        MathGameSubmitView.as_view(),
+        name="math-game-submit",
+    ),
+    path(
+        "games/attempts/<uuid:attempt_id>/hint/",
+        SudokuHintView.as_view(),
+        name="sudoku-hint",
+    ),
 ]

backend/contest/views.py

@@ -3,10 +3,15 @@ from rest_framework import permissions, status
 from rest_framework.response import Response
 from rest_framework.views import APIView
 
-from .models import Contest, ContestAttempt, RealtimeMatch
+from .game_services import game_payload, request_sudoku_hint, start_game, submit_game
+from .models import Contest, ContestAttempt, MathGameAttempt, RealtimeMatch
 from .services import (
+    cancel_waiting_match,
+    create_challenge,
     find_match,
+    join_challenge,
     match_payload,
+    refresh_match_state,
     start_attempt,
     submit_attempt,
 )
@@ -43,13 +48,16 @@ class AttemptStartView(APIView):
 
 class AttemptSubmitView(APIView):
     def post(self, request, attempt_id):
-        get_object_or_404(ContestAttempt, id=attempt_id, user=request.user)
+        attempt = get_object_or_404(ContestAttempt, id=attempt_id, user=request.user)
         payload = submit_attempt(
             user=request.user,
             attempt_id=attempt_id,
             raw_answers=request.data.get("answers", []),
             submission_key=request.headers.get("Idempotency-Key"),
         )
+        if attempt.match_id:
+            match = refresh_match_state(attempt.match_id)
+            return Response(match_payload(match, request.user))
         return Response(payload)
 
 
@@ -62,12 +70,33 @@ class MatchmakingView(APIView):
 
 class MatchStateView(APIView):
     def get(self, request, match_id):
-        match = get_object_or_404(
+        existing = get_object_or_404(
             RealtimeMatch.objects.select_related("player_one", "player_two"),
             id=match_id,
         )
-        if request.user.id not in (match.player_one_id, match.player_two_id):
+        if request.user.id not in (existing.player_one_id, existing.player_two_id):
             return Response(status=status.HTTP_403_FORBIDDEN)
+        match = refresh_match_state(match_id)
+        return Response(match_payload(match, request.user))
+
+
+class ChallengeCreateView(APIView):
+    def post(self, request, slug):
+        contest = get_object_or_404(Contest, slug=slug)
+        match = create_challenge(request.user, contest)
+        return Response(match_payload(match, request.user), status=status.HTTP_201_CREATED)
+
+
+class ChallengeJoinView(APIView):
+    def post(self, request):
+        match = join_challenge(request.user, request.data.get("challenge_code"))
+        return Response(match_payload(match, request.user))
+
+
+class MatchCancelView(APIView):
+    def post(self, request, match_id):
+        get_object_or_404(RealtimeMatch, id=match_id)
+        match = cancel_waiting_match(request.user, match_id)
         return Response(match_payload(match, request.user))
 
 
@@ -98,3 +127,59 @@ class LeaderboardView(APIView):
                 for index, attempt in enumerate(attempts, start=1)
             ]
         )
+
+
+class MathGameCatalogView(APIView):
+    permission_classes = [permissions.AllowAny]
+
+    def get(self, request):
+        return Response(
+            [
+                {
+                    "kind": MathGameAttempt.Kind.TWENTY_FOUR,
+                    "title": "24 点",
+                    "summary": "四个数字各用一次，只用四则运算得到 24。",
+                    "ability": "connection",
+                    "estimated_minutes": 3,
+                },
+                {
+                    "kind": MathGameAttempt.Kind.SUDOKU,
+                    "title": "数独",
+                    "summary": "在行、列和九宫格约束中完成 9×9 数字推理。",
+                    "ability": "detection",
+                    "estimated_minutes": 8,
+                },
+            ]
+        )
+
+
+class MathGameStartView(APIView):
+    def post(self, request, kind):
+        payload = start_game(
+            request.user,
+            kind,
+            request.data.get("difficulty", MathGameAttempt.Difficulty.STANDARD),
+        )
+        return Response(payload, status=status.HTTP_201_CREATED)
+
+
+class MathGameSubmitView(APIView):
+    def post(self, request, attempt_id):
+        payload = submit_game(
+            request.user,
+            attempt_id,
+            request.data,
+            request.headers.get("Idempotency-Key"),
+        )
+        return Response(payload)
+
+
+class SudokuHintView(APIView):
+    def post(self, request, attempt_id):
+        return Response(request_sudoku_hint(request.user, attempt_id))
+
+
+class MathGameHistoryView(APIView):
+    def get(self, request):
+        attempts = MathGameAttempt.objects.filter(user=request.user)[:20]
+        return Response([game_payload(attempt) for attempt in attempts])

backend/progression/views.py

@@ -40,5 +40,17 @@ class ProgressionProfileView(APIView):
                     }
                     for item in request.user.cards.select_related("card")
                 ],
+                "recent_games": [
+                    {
+                        "kind": attempt.kind,
+                        "label": attempt.get_kind_display(),
+                        "difficulty": attempt.get_difficulty_display(),
+                        "status": attempt.status,
+                        "score": attempt.score,
+                        "duration_ms": attempt.duration_ms,
+                        "started_at": attempt.started_at,
+                    }
+                    for attempt in request.user.math_game_attempts.all()[:10]
+                ],
             }
         )

backend/static/css/app.css

@@ -132,6 +132,29 @@ button { color: inherit; }
 .track-switch { display: flex; gap: 5px; margin-bottom: 22px; }
 .track-switch button { border: 1px solid var(--line); padding: 9px 18px; border-radius: 99px; background: transparent; cursor: pointer; }
 .track-switch button.active { background: var(--ink); color: white; }
+.challenge-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); gap: 24px; align-items: center; margin-bottom: 22px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(120deg, rgba(25,101,72,.07), rgba(204,232,91,.12)); }.challenge-panel h2 { margin: 7px 0 6px; font: 27px Georgia, serif; }.challenge-panel p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }.challenge-actions { display: grid; gap: 9px; }.challenge-actions > .primary-button { width: 100%; }.challenge-actions form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }.challenge-actions input { min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: white; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; }.challenge-actions .dark-button { width: auto; margin: 0; white-space: nowrap; }
+.realtime-status-line { display: flex; justify-content: space-between; gap: 15px; margin: 10px 0 18px; color: var(--muted); font-size: 11px; }.realtime-status-line strong { color: var(--green); }
+.realtime-waiting { display: grid; justify-items: center; gap: 16px; padding: 35px 20px; border-radius: 18px; background: #eef1eb; text-align: center; }.realtime-waiting p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.7; }.realtime-pulse { width: 18px; height: 18px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(25,101,72,.35); animation: realtime-pulse 1.5s infinite; }.challenge-code { border: 1px dashed var(--green); border-radius: 14px; padding: 14px 24px; background: white; color: var(--green); font: 700 31px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .22em; cursor: pointer; }
+@keyframes realtime-pulse { 70% { box-shadow: 0 0 0 15px rgba(25,101,72,0); } 100% { box-shadow: 0 0 0 0 rgba(25,101,72,0); } }
+.realtime-progress-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }.realtime-progress-panel > div { padding: 13px 15px; border-radius: 12px; background: #eef1eb; }.realtime-progress-panel span, .realtime-progress-panel b { display: block; }.realtime-progress-panel span { color: var(--muted); font-size: 10px; }.realtime-progress-panel b { margin-top: 5px; color: var(--green); }
+.realtime-answer-form input { margin-top: 7px; width: 100%; padding: 12px; border: 1px solid #d6d8d1; border-radius: 9px; }.realtime-submitted { margin-top: 20px; padding: 30px; border-radius: 16px; background: var(--ink); color: white; text-align: center; }.realtime-submitted strong { color: var(--lime); font: 27px Georgia, serif; }.realtime-submitted p { margin-bottom: 0; color: #b9c2bc; }
+.realtime-result { margin: 20px 0; padding: 28px; border-radius: 17px; background: var(--ink); color: white; text-align: center; }.realtime-result > strong { color: var(--lime); font: 38px Georgia, serif; }.realtime-result p { color: #c5cec8; }.realtime-result > b { display: inline-block; padding: 6px 10px; border-radius: 99px; background: rgba(204,232,91,.13); color: var(--lime); }.result-opponent > strong { color: #ef947c; }
+.realtime-review { display: grid; gap: 9px; }.realtime-review article { padding: 15px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 11px; background: white; }.realtime-review article.incorrect { border-left-color: #c05245; }.realtime-review p { margin: 7px 0; color: #3e4942; }.realtime-review small { color: var(--muted); }
+.math-games-section { margin-top: 60px; }
+.game-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
+.game-card { min-height: 285px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); display: flex; flex-direction: column; overflow: hidden; position: relative; }
+.game-card::after { content: ""; position: absolute; width: 140px; height: 140px; right: -65px; top: -65px; border-radius: 50%; background: rgba(204,232,91,.18); }
+.game-sudoku::after { background: rgba(93,115,232,.13); }
+.game-card-top { display: flex; justify-content: space-between; align-items: start; }.game-card-top > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: var(--ink); color: var(--lime); font: 700 20px Georgia, serif; }.game-card-top small { color: var(--muted); }
+.game-card > b { margin-top: 24px; color: var(--green); font-size: 9px; letter-spacing: .18em; }.game-card h3 { margin: 8px 0; font: 28px Georgia, serif; }.game-card p { margin: 0; color: var(--muted); line-height: 1.7; }
+.game-card-controls { display: flex; gap: 10px; margin-top: auto; }.game-card-controls select { min-width: 100px; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: white; }.game-card-controls .primary-button { margin-left: auto; }
+.twenty-four-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }.twenty-four-numbers button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 18px; background: var(--ink); color: var(--lime); font: 36px Georgia, serif; cursor: pointer; }
+.twenty-four-form { display: grid; gap: 12px; }.game-keypad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }.game-keypad button { border: 1px solid var(--line); border-radius: 9px; padding: 10px; background: white; cursor: pointer; }
+.sudoku-board { width: min(100%, 540px); margin: 22px auto; display: grid; grid-template-columns: repeat(9, 1fr); border: 3px solid var(--ink); background: var(--ink); gap: 1px; }
+.sudoku-board input { width: 100%; min-width: 0; aspect-ratio: 1; border: 0; border-radius: 0; background: white; color: var(--green); text-align: center; font: 600 21px Georgia, serif; outline: 2px solid transparent; outline-offset: -2px; }
+.sudoku-board input:nth-child(3n) { border-right: 2px solid var(--ink); }.sudoku-board input:nth-child(9n) { border-right: 0; }.sudoku-board input:nth-child(n+19):nth-child(-n+27), .sudoku-board input:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid var(--ink); }
+.sudoku-board input:focus { outline-color: var(--green); }.sudoku-board input.given { background: #ecece5; color: var(--ink); font-weight: 800; }.sudoku-board input.hint { background: #fff2ca; color: #9a5b22; }
+.sudoku-actions { display: flex; justify-content: flex-end; gap: 10px; }.game-result-panel { margin-top: 30px; padding: 30px; border-radius: 18px; background: var(--ink); color: white; text-align: center; }.game-result-panel strong { color: var(--lime); font: 48px Georgia, serif; }.game-result-panel p { color: #b9c2bc; }
 .editor-shell { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; min-height: 430px; }
 .editor-pane, .preview-pane { padding: 28px; }
 .editor-pane { background: #1d2721; color: white; }
@@ -144,7 +167,8 @@ button { color: inherit; }
 .metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
 .metric { background: rgba(25,101,72,.06); border-radius: 14px; padding: 17px; }
 .metric b, .metric span { display: block; }.metric b { font: 28px Georgia, serif; }.metric span { margin-top: 5px; color: var(--muted); font-size: 11px; }
-.tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
+.profile-subtitle { margin: 30px 0 12px; font: 24px Georgia, serif; }.profile-game-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; }.profile-game-list > div { padding: 13px; border-radius: 11px; background: #eef1eb; }.profile-game-list b, .profile-game-list span { display: block; }.profile-game-list span { margin-top: 5px; color: var(--muted); font-size: 11px; }
+.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 22px; }
 .tool-card {
   min-height: 165px; border: 1px solid var(--line); border-radius: 18px; padding: 22px;
   background: rgba(255,255,252,.7); text-align: left; cursor: pointer; transition: .2s ease;
@@ -159,19 +183,29 @@ button { color: inherit; }
 .tool-workspace.active { display: block; animation: rise .3s ease; }
 .workspace-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 25px; }
 .workspace-heading h2 { margin: 7px 0 0; font: 31px Georgia, serif; }.workspace-heading p { max-width: 480px; color: var(--muted); font-size: 13px; }
-.calculator-shell { max-width: 800px; margin: auto; }
+.calculator-shell { max-width: 980px; margin: auto; }
 .calculator-display { min-height: 145px; border-radius: 18px; padding: 25px; background: var(--ink); color: white; display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
 .calculator-display small { color: #9eaaa2; }.calculator-display output { color: var(--lime); font: 48px/1 Georgia, serif; overflow-wrap: anywhere; }
 .formula-input, .search-input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: white; outline-color: var(--green); }
 .calculator-shell > .formula-input { margin: 14px 0; font: 18px "SFMono-Regular", Consolas, monospace; }
 .calculator-actions { display: flex; flex-wrap: wrap; gap: 8px; }.calculator-actions button { border: 1px solid var(--line); border-radius: 10px; padding: 11px 15px; background: white; cursor: pointer; }.calculator-actions .primary-button { margin-left: auto; color: white; background: var(--green); border: 0; }
+.calculator-controls { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }.calculator-controls label, .calculator-expression-label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; }.calculator-controls select, .calculator-controls input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px; background: white; }
+.calculator-controls [hidden] { display: none !important; }
+.calculator-expression-label textarea { min-height: 92px; margin: 0 0 12px; resize: vertical; font: 17px/1.6 "SFMono-Regular", Consolas, monospace; }
+.calculator-result { margin-top: 17px; }.calc-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }.calc-result-grid > div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: white; }.calc-result-grid span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }.calc-result-grid code { display: block; margin-top: 8px; overflow-wrap: anywhere; color: var(--green); }
+.calc-steps { margin: 13px 0 0; padding: 14px 14px 14px 34px; border-radius: 12px; background: #eef1eb; color: var(--muted); font-size: 12px; line-height: 1.8; }.calc-steps:empty { display: none; }
 .search-input { width: min(370px, 100%); }
 .symbol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
 .symbol-card { border: 1px solid var(--line); border-radius: 15px; padding: 18px; background: white; cursor: pointer; text-align: left; }
 .symbol-card strong { display: block; color: var(--green); font: 29px Georgia, serif; }.symbol-card b { display: block; margin-top: 10px; }.symbol-card small { display: block; margin-top: 5px; color: var(--muted); }.symbol-card code { display: inline-block; margin-top: 12px; padding: 4px 7px; border-radius: 6px; background: #f0f1eb; color: #405048; }
 .graph-shell { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 20px; }
-.graph-controls { display: flex; flex-direction: column; gap: 17px; }.graph-controls label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }.graph-controls p { color: #b84136; font-size: 12px; }
+.graph-controls { display: flex; flex-direction: column; gap: 17px; }.graph-controls label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }.graph-controls p { color: #b84136; font-size: 12px; }.graph-controls textarea { min-height: 100px; resize: vertical; font: 13px/1.6 "SFMono-Regular", Consolas, monospace; }
+.check-row { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 8px !important; }.check-row input { margin: 0; }
+.graph-analysis { padding: 11px; border-radius: 10px; background: #eef1eb; color: var(--muted); font-size: 11px; line-height: 1.6; }
 #graph-canvas { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 17px; background: #fbfbf7; }
+.drawing-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }.drawing-toolbar button, .drawing-toolbar label { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: white; color: var(--muted); cursor: pointer; }.drawing-toolbar button.active { border-color: var(--ink); background: var(--ink); color: white; }.drawing-toolbar .primary-button { margin-left: auto; border: 0; background: var(--green); color: white; }.drawing-toolbar label { display: flex; align-items: center; gap: 7px; font-size: 11px; }.drawing-toolbar input[type=color] { width: 28px; height: 24px; padding: 0; border: 0; background: transparent; }
+.toolbar-text-input { flex: 1 1 190px; min-width: 150px; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: white; }.drawing-toolbar .file-tool input { display: none; }
+.canvas-stage { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }.canvas-stage canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }.geometry-stage { background: #fbfbf7; }.canvas-hint { color: var(--muted); font-size: 11px; text-align: center; }
 .discover-title { padding-bottom: 24px; }
 .ability-map { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: rgba(255,255,252,.64); overflow: hidden; }
 .map-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }.map-heading h2 { margin: 0 0 6px; font: 30px Georgia, serif; }.map-heading p { margin: 0; color: var(--muted); font-size: 13px; }
@@ -225,16 +259,18 @@ dialog::backdrop { background: rgba(17,25,20,.55); backdrop-filter: blur(5px); }
   .app-shell { grid-template-columns: 80px 1fr; }.sidebar { padding: 25px 13px; }.brand span:last-child, .nav-item:not(.active) span, .nav-item { font-size: 0; }
   .nav-item { text-align: center; }.nav-item span { width: auto; font-size: 11px !important; }.sidebar-foot { display: none; }
   .hero-grid { grid-template-columns: 1fr; }.daily-card { min-height: 350px; }.spirit-grid { grid-template-columns: 1fr 1fr; }.content-grid { grid-template-columns: 1fr 1fr; }
-  .tool-grid { grid-template-columns: repeat(3, 1fr); }.symbol-grid { grid-template-columns: repeat(3, 1fr); }.video-grid { grid-template-columns: 1fr 1fr; }
+  .tool-grid { grid-template-columns: repeat(3, 1fr); }.symbol-grid { grid-template-columns: repeat(3, 1fr); }.video-grid { grid-template-columns: 1fr 1fr; }.calculator-controls { grid-template-columns: repeat(2, 1fr); }
 }
 @media (max-width: 700px) {
   .app-shell { display: block; }.sidebar { position: fixed; top: auto; bottom: 0; width: 100%; height: 68px; z-index: 10; border: 0; border-top: 1px solid var(--line); padding: 8px; }
   .brand, .sidebar-foot { display: none; }.nav { margin: 0; grid-template-columns: repeat(6, 1fr); gap: 2px; }.nav-item { padding: 11px 2px; font-size: 0; }.nav-item span { display: block; margin: auto; }
   .main { padding: 0 18px 90px; }.topbar { height: 66px; }.topbar p { max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .hero { min-height: 500px; padding: 35px 25px; }.hero h1 { font-size: 44px; }.hero-actions { align-items: stretch; flex-direction: column; }
-  .section-heading { display: block; }.section-heading p { margin-top: 12px; }.spirit-grid, .content-grid, .editor-shell, .metric-grid, .tool-grid, .symbol-grid, .video-grid, .graph-shell { grid-template-columns: 1fr; }
+  .section-heading { display: block; }.section-heading p { margin-top: 12px; }.spirit-grid, .content-grid, .editor-shell, .metric-grid, .tool-grid, .symbol-grid, .video-grid, .graph-shell, .game-card-grid, .calc-result-grid { grid-template-columns: 1fr; }
   .content-grid { gap: 11px; }.editor-shell { min-height: 700px; }.page-title { padding-top: 42px; }.page-title h1 { font-size: 45px; }
-  .tool-card { min-height: 125px; }.workspace-heading, .map-heading { display: block; }.workspace-heading p { margin-top: 12px; }.tool-workspace { padding: 20px; }
+  .tool-card { min-height: 125px; }.workspace-heading, .map-heading { display: block; }.workspace-heading p { margin-top: 12px; }.tool-workspace { padding: 16px; }.calculator-controls { grid-template-columns: 1fr 1fr; }.calculator-display { min-height: 120px; padding: 18px; }.calculator-display output { font-size: 34px; }.calc-examples .primary-button { width: 100%; margin-left: 0; }.drawing-toolbar { align-items: stretch; }.drawing-toolbar .primary-button { width: 100%; margin-left: 0; }.canvas-stage canvas { width: 100%; min-width: 0; }
+  .math-games-section { margin-top: 45px; }.game-card { min-height: 260px; padding: 21px; }.game-card-controls { align-items: stretch; }.game-card-controls .primary-button { flex: 1; }.twenty-four-numbers { gap: 7px; }.twenty-four-numbers button { border-radius: 13px; font-size: 28px; }.sudoku-board input { font-size: clamp(13px, 4.5vw, 20px); }.sudoku-actions { display: grid; grid-template-columns: 1fr 1fr; }.game-keypad { gap: 5px; }
+  .challenge-panel { grid-template-columns: 1fr; padding: 20px; }.challenge-actions form { grid-template-columns: 1fr; }.challenge-actions .dark-button { width: 100%; }.challenge-code { width: 100%; padding: 14px 10px; font-size: 27px; }.realtime-status-line { display: grid; }.realtime-progress-panel { grid-template-columns: 1fr 1fr; }
   .map-stage { height: 480px; transform: scale(.92); }.ability-node { width: 108px; height: 94px; }.node-vision { left: calc(50% - 54px); }.node-humanities { left: 0; top: 100px; }.node-connection { right: 0; top: 100px; }.node-detection { left: 2%; bottom: 30px; }.node-modeling { right: 2%; bottom: 30px; }.pet-node { top: 190px; }
   .map-lines { display: none; }.ability-legend { margin-top: 14px; justify-content: start; }.video-cover { height: 150px; }
 }

backend/static/js/app.js

@@ -43,22 +43,71 @@ function createIdempotencyKey() {
   ].join("-");
 }
 
+function collectApiErrorMessages(value, messages = []) {
+  if (Array.isArray(value)) {
+    value.forEach((item) => collectApiErrorMessages(item, messages));
+  } else if (value && typeof value === "object") {
+    Object.values(value).forEach((item) => collectApiErrorMessages(item, messages));
+  } else if (value !== undefined && value !== null) {
+    const message = String(value).trim();
+    if (message && !messages.includes(message)) messages.push(message);
+  }
+  return messages;
+}
+
+function logApiError(error) {
+  console.error("[Hulumath API]", {
+    method: error.method,
+    path: error.path,
+    status: error.status,
+    code: error.code,
+    requestId: error.requestId,
+    details: error.details,
+  });
+}
+
 async function api(path, options = {}) {
+  const method = (options.method || "GET").toUpperCase();
+  const requestPath = `/api/v1/${path}`;
   const headers = { Accept: "application/json", ...(options.headers || {}) };
   if (options.body && typeof options.body !== "string") {
     headers["Content-Type"] = "application/json";
     options.body = JSON.stringify(options.body);
   }
-  if (!["GET", "HEAD"].includes(options.method || "GET")) headers["X-CSRFToken"] = csrfToken();
-  const response = await fetch(`/api/v1/${path}`, { credentials: "same-origin", ...options, headers });
+  if (!["GET", "HEAD"].includes(method)) headers["X-CSRFToken"] = csrfToken();
+  let response;
+  try {
+    response = await fetch(requestPath, { credentials: "same-origin", ...options, headers });
+  } catch (cause) {
+    const error = new Error("网络连接失败，请检查连接后重试");
+    error.status = null;
+    error.code = "network_error";
+    error.requestId = null;
+    error.details = null;
+    error.path = requestPath;
+    error.method = method;
+    error.cause = cause;
+    logApiError(error);
+    throw error;
+  }
   if (response.status === 204) return null;
   const payload = await response.json().catch(() => ({}));
   if (!response.ok) {
     const details = payload.error?.details;
-    const message = payload.error?.message || payload.detail ||
-      (details ? Object.values(details).flat().join(" ") : "请求失败");
+    const detailMessages = collectApiErrorMessages(details);
+    const requestId = payload.error?.request_id || response.headers.get("X-Request-ID");
+    const baseMessage = detailMessages.length
+      ? detailMessages.join("；")
+      : payload.error?.message || payload.detail || `请求失败（HTTP ${response.status}）`;
+    const message = requestId ? `${baseMessage}（请求编号：${requestId}）` : baseMessage;
     const error = new Error(message);
     error.status = response.status;
+    error.code = payload.error?.code || "request_error";
+    error.requestId = requestId;
+    error.details = details || null;
+    error.path = requestPath;
+    error.method = method;
+    logApiError(error);
     throw error;
   }
   return payload;
@@ -308,12 +357,8 @@ async function beginContest(contest) {
   if (!requireAuth()) return;
   try {
     if (contest.kind === "realtime") {
-      const match = await api(`contests/${contest.slug}/matchmaking/`, { method: "POST", body: {} });
-      if (match.status === "waiting") {
-        showToast("已进入匹配队列，等待同赛道对手");
-        return;
-      }
-      renderAttempt(match.attempt);
+      await window.HuluRealtime.startRandom(contest);
+      return;
     } else {
       renderAttempt(await api(`contests/${contest.slug}/start/`, { method: "POST", body: {} }));
     }
@@ -638,6 +683,26 @@ async function loadProfile() {
       metrics.append(item);
     });
     root.append(heading, pet, metrics);
+    if (profile.recent_games?.length) {
+      const gameTitle = document.createElement("h3");
+      gameTitle.className = "profile-subtitle";
+      gameTitle.textContent = "最近数学玩法";
+      const gameList = document.createElement("div");
+      gameList.className = "profile-game-list";
+      profile.recent_games.forEach((game) => {
+        const item = document.createElement("div");
+        const name = document.createElement("b");
+        name.textContent = `${game.label} · ${game.difficulty}`;
+        const detail = document.createElement("span");
+        detail.textContent =
+          game.status === "completed"
+            ? `${game.score} 分 · ${(game.duration_ms / 1000).toFixed(1)} 秒`
+            : "进行中";
+        item.append(name, detail);
+        gameList.append(item);
+      });
+      root.append(gameTitle, gameList);
+    }
   } catch (error) {
     root.textContent = error.message;
   }
@@ -673,10 +738,20 @@ function evaluateExpression(source, variables = {}) {
     sin: Math.sin,
     cos: Math.cos,
     tan: Math.tan,
+    asin: Math.asin,
+    acos: Math.acos,
+    atan: Math.atan,
+    sinh: Math.sinh,
+    cosh: Math.cosh,
+    tanh: Math.tanh,
     sqrt: Math.sqrt,
     log: Math.log10,
     ln: Math.log,
+    exp: Math.exp,
     abs: Math.abs,
+    floor: Math.floor,
+    ceil: Math.ceil,
+    round: Math.round,
   };
 
   const skip = () => {
@@ -880,7 +955,7 @@ function switchTool(tool) {
   $$(".tool-workspace").forEach((workspace) => {
     workspace.classList.toggle("active", workspace.id === `tool-${tool}`);
   });
-  if (tool === "graph") window.setTimeout(drawGraph, 30);
+  window.HuluToolbox?.activate(tool);
 }
 
 async function saveFormula() {
@@ -906,24 +981,9 @@ function bindUI() {
   $$(".tool-card").forEach((button) => {
     button.addEventListener("click", () => switchTool(button.dataset.tool));
   });
-  $("#calc-run").addEventListener("click", runCalculator);
-  $("#calc-input").addEventListener("keydown", (event) => {
-    if (event.key === "Enter") runCalculator();
-  });
-  $$("[data-calc-example]").forEach((button) => {
-    button.addEventListener("click", () => {
-      $("#calc-input").value = button.dataset.calcExample;
-      runCalculator();
-    });
-  });
   $("#symbol-search").addEventListener("input", (event) => {
     renderSymbols(event.target.value);
   });
-  $("#graph-run").addEventListener("click", drawGraph);
-  $("#graph-range").addEventListener("input", drawGraph);
-  $("#graph-expression").addEventListener("keydown", (event) => {
-    if (event.key === "Enter") drawGraph();
-  });
   $$(".ability-node").forEach((button) => {
     button.addEventListener("click", () => {
       state.videoAbility =
@@ -936,6 +996,7 @@ function bindUI() {
   $("#auth-button").addEventListener("click", async () => {
     if (!state.user) return openAuth();
     await api("accounts/logout/", { method: "POST", body: {} });
+    window.HuluRealtime?.reset();
     state.user = null;
     updateUserUI();
     showToast("已退出登录");
@@ -980,9 +1041,16 @@ function bindUI() {
 
 async function boot() {
   bindUI();
+  window.HuluToolbox?.init();
+  window.HuluRealtime?.init();
   renderSymbols();
-  runCalculator();
-  await Promise.all([loadUser(), loadStories(), loadContests(), loadContent()]);
+  await Promise.all([
+    loadUser(),
+    loadStories(),
+    loadContests(),
+    loadContent(),
+    window.HuluGames?.load(),
+  ]);
 }
 
 boot();

backend/static/js/games.js

@@ -0,0 +1,304 @@
+(function () {
+  const $game = (selector, root = document) => root.querySelector(selector);
+
+  const GAME_META = {
+    twenty_four: {
+      title: "24 点",
+      kicker: "ARITHMETIC PUZZLE",
+      action: "开始组式",
+    },
+    sudoku: {
+      title: "数独",
+      kicker: "LOGIC GRID",
+      action: "开始推理",
+    },
+  };
+
+  function difficultySelect() {
+    const select = document.createElement("select");
+    select.className = "game-difficulty";
+    [
+      ["easy", "入门"],
+      ["standard", "标准"],
+      ["hard", "进阶"],
+    ].forEach(([value, label]) => {
+      const option = document.createElement("option");
+      option.value = value;
+      option.textContent = label;
+      if (value === "standard") option.selected = true;
+      select.append(option);
+    });
+    return select;
+  }
+
+  function gameCard(game) {
+    const meta = GAME_META[game.kind];
+    const article = document.createElement("article");
+    article.className = `game-card game-${game.kind}`;
+    const top = document.createElement("div");
+    top.className = "game-card-top";
+    const icon = document.createElement("span");
+    icon.textContent = game.kind === "sudoku" ? "9×9" : "24";
+    const time = document.createElement("small");
+    time.textContent = `约 ${game.estimated_minutes} 分钟`;
+    top.append(icon, time);
+    const kicker = document.createElement("b");
+    kicker.textContent = meta.kicker;
+    const title = document.createElement("h3");
+    title.textContent = game.title;
+    const summary = document.createElement("p");
+    summary.textContent = game.summary;
+    const controls = document.createElement("div");
+    controls.className = "game-card-controls";
+    const difficulty = difficultySelect();
+    const start = document.createElement("button");
+    start.className = "primary-button";
+    start.textContent = meta.action;
+    start.addEventListener("click", () => startGame(game.kind, difficulty.value));
+    controls.append(difficulty, start);
+    article.append(top, kicker, title, summary, controls);
+    return article;
+  }
+
+  async function loadGames() {
+    const root = $game("#math-game-list");
+    try {
+      const games = await api("contests/games/");
+      root.replaceChildren(...games.map(gameCard));
+    } catch (error) {
+      root.textContent = error.message;
+    }
+  }
+
+  async function startGame(kind, difficulty) {
+    if (!requireAuth()) return;
+    try {
+      const attempt = await api(`contests/games/${kind}/start/`, {
+        method: "POST",
+        body: { difficulty },
+      });
+      renderGame(attempt);
+      $game("#experience-dialog").showModal();
+    } catch (error) {
+      showToast(error.message);
+    }
+  }
+
+  function gameHeading(attempt) {
+    const fragment = document.createDocumentFragment();
+    const label = document.createElement("span");
+    label.className = "kicker";
+    label.textContent =
+      `${GAME_META[attempt.kind].kicker} · ${attempt.difficulty.toUpperCase()}`;
+    const title = document.createElement("h2");
+    title.textContent = GAME_META[attempt.kind].title;
+    fragment.append(label, title);
+    return fragment;
+  }
+
+  function resultPanel(attempt) {
+    const panel = document.createElement("div");
+    panel.className = "game-result-panel";
+    const score = document.createElement("strong");
+    score.textContent = `${attempt.score} 分`;
+    const details = document.createElement("p");
+    details.textContent =
+      `用时 ${(attempt.duration_ms / 1000).toFixed(1)} 秒 · 提示 ${attempt.hints_used} 次`;
+    panel.append(score, details);
+    return panel;
+  }
+
+  function renderGame(attempt) {
+    if (attempt.kind === "sudoku") renderSudoku(attempt);
+    else renderTwentyFour(attempt);
+  }
+
+  function renderTwentyFour(attempt) {
+    const root = $game("#experience-content");
+    root.replaceChildren();
+    root.append(gameHeading(attempt));
+    if (attempt.status === "completed") {
+      root.append(resultPanel(attempt));
+      return;
+    }
+    const instruction = document.createElement("p");
+    instruction.className = "scene";
+    instruction.textContent = "四个数字必须各使用一次，只允许 +、−、×、÷ 和括号。";
+    const numbers = document.createElement("div");
+    numbers.className = "twenty-four-numbers";
+    attempt.puzzle.numbers.forEach((number) => {
+      const tile = document.createElement("button");
+      tile.type = "button";
+      tile.textContent = number;
+      tile.addEventListener("click", () => {
+        input.value += String(number);
+        input.focus();
+      });
+      numbers.append(tile);
+    });
+    const form = document.createElement("form");
+    form.className = "twenty-four-form";
+    const input = document.createElement("input");
+    input.className = "formula-input";
+    input.placeholder = "例如：6 / (1 - 3 / 4)";
+    input.autocomplete = "off";
+    input.inputMode = "text";
+    input.spellcheck = false;
+    const errorMessage = document.createElement("p");
+    errorMessage.className = "form-error game-form-error";
+    errorMessage.setAttribute("role", "alert");
+    input.addEventListener("input", () => {
+      errorMessage.textContent = "";
+    });
+    const keypad = document.createElement("div");
+    keypad.className = "game-keypad";
+    ["+", "-", "*", "/", "(", ")"].forEach((operator) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = operator;
+      button.addEventListener("click", () => {
+        input.value += operator;
+        input.focus();
+      });
+      keypad.append(button);
+    });
+    const submit = document.createElement("button");
+    submit.className = "primary-button";
+    submit.type = "submit";
+    submit.textContent = "验证并计分";
+    form.append(input, keypad, errorMessage, submit);
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      errorMessage.textContent = "";
+      try {
+        const result = await api(
+          `contests/games/attempts/${attempt.attempt_id}/submit/`,
+          {
+            method: "POST",
+            headers: { "Idempotency-Key": createIdempotencyKey() },
+            body: { expression: input.value },
+          },
+        );
+        renderTwentyFour(result);
+        showToast("得到 24，成绩已记录");
+      } catch (error) {
+        errorMessage.textContent = error.message;
+        showToast(error.message);
+        submit.disabled = false;
+      }
+    });
+    root.append(instruction, numbers, form);
+    window.setTimeout(() => input.focus(), 50);
+  }
+
+  function sudokuCell(given, value, row, column) {
+    const input = document.createElement("input");
+    input.inputMode = "numeric";
+    input.pattern = "[1-9]";
+    input.maxLength = 1;
+    input.dataset.row = row;
+    input.dataset.column = column;
+    input.value = value || "";
+    input.className = given ? "given" : "";
+    input.readOnly = given;
+    input.setAttribute("aria-label", `第 ${row + 1} 行第 ${column + 1} 列`);
+    input.addEventListener("input", () => {
+      input.value = input.value.replace(/[^1-9]/g, "").slice(0, 1);
+    });
+    return input;
+  }
+
+  function renderSudoku(attempt) {
+    const root = $game("#experience-content");
+    root.replaceChildren();
+    root.append(gameHeading(attempt));
+    if (attempt.status === "completed") {
+      root.append(resultPanel(attempt));
+      return;
+    }
+    const instruction = document.createElement("p");
+    instruction.className = "scene";
+    instruction.textContent = "每一行、每一列和每个 3×3 九宫格都要包含 1 到 9。";
+    const board = document.createElement("div");
+    board.className = "sudoku-board";
+    const hints = new Map(
+      (attempt.puzzle.hints || []).map((item) => [`${item.row}-${item.column}`, item.value])
+    );
+    attempt.puzzle.grid.forEach((rowValues, row) => {
+      rowValues.forEach((givenValue, column) => {
+        const hintValue = hints.get(`${row}-${column}`) || 0;
+        const input = sudokuCell(Boolean(givenValue), givenValue || hintValue, row, column);
+        if (hintValue) {
+          input.readOnly = true;
+          input.classList.add("hint");
+        }
+        board.append(input);
+      });
+    });
+    const actions = document.createElement("div");
+    actions.className = "sudoku-actions";
+    const hint = document.createElement("button");
+    hint.type = "button";
+    hint.className = "ghost-button";
+    hint.textContent = `提示（已用 ${attempt.hints_used}/3）`;
+    hint.disabled = attempt.hints_used >= 3;
+    const submit = document.createElement("button");
+    submit.type = "button";
+    submit.className = "primary-button";
+    submit.textContent = "检查并完成";
+    hint.addEventListener("click", async () => {
+      hint.disabled = true;
+      try {
+        const result = await api(
+          `contests/games/attempts/${attempt.attempt_id}/hint/`,
+          { method: "POST", body: {} },
+        );
+        const input = $game(
+          `[data-row="${result.row}"][data-column="${result.column}"]`,
+          board,
+        );
+        input.value = result.value;
+        input.readOnly = true;
+        input.classList.add("hint");
+        attempt.hints_used = result.hints_used;
+        hint.textContent = `提示（已用 ${result.hints_used}/3）`;
+        hint.disabled = result.hints_used >= 3;
+      } catch (error) {
+        showToast(error.message);
+        hint.disabled = false;
+      }
+    });
+    submit.addEventListener("click", async () => {
+      submit.disabled = true;
+      const grid = Array.from({ length: 9 }, () => Array(9).fill(0));
+      $gameAll("input", board).forEach((input) => {
+        grid[Number(input.dataset.row)][Number(input.dataset.column)] =
+          Number(input.value || 0);
+      });
+      try {
+        const result = await api(
+          `contests/games/attempts/${attempt.attempt_id}/submit/`,
+          {
+            method: "POST",
+            headers: { "Idempotency-Key": createIdempotencyKey() },
+            body: { grid },
+          },
+        );
+        renderSudoku(result);
+        showToast("数独完成，成绩已记录");
+      } catch (error) {
+        showToast(error.message);
+        submit.disabled = false;
+      }
+    });
+    actions.append(hint, submit);
+    root.append(instruction, board, actions);
+  }
+
+  function $gameAll(selector, root = document) {
+    return [...root.querySelectorAll(selector)];
+  }
+
+  window.HuluGames = { load: loadGames };
+})();

backend/static/js/realtime.js

@@ -0,0 +1,451 @@
+(function () {
+  const realtime = {
+    match: null,
+    socket: null,
+    pollTimer: null,
+    clockTimer: null,
+    opponentProgress: 0,
+    reconnectTimer: null,
+  };
+
+  function stopTimers() {
+    if (realtime.pollTimer) window.clearInterval(realtime.pollTimer);
+    if (realtime.clockTimer) window.clearInterval(realtime.clockTimer);
+    realtime.pollTimer = null;
+    realtime.clockTimer = null;
+  }
+
+  function closeSocket() {
+    if (realtime.reconnectTimer) window.clearTimeout(realtime.reconnectTimer);
+    realtime.reconnectTimer = null;
+    if (realtime.socket) {
+      realtime.socket.onclose = null;
+      realtime.socket.close();
+    }
+    realtime.socket = null;
+  }
+
+  function websocketUrl(path) {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    return `${protocol}//${window.location.host}${path}`;
+  }
+
+  function connectSocket() {
+    closeSocket();
+    if (!realtime.match?.websocket_path) return;
+    const socket = new WebSocket(websocketUrl(realtime.match.websocket_path));
+    realtime.socket = socket;
+    socket.addEventListener("open", () => {
+      updateConnectionStatus("实时连接已建立");
+      socket.send(JSON.stringify({ type: "ping" }));
+    });
+    socket.addEventListener("message", async (event) => {
+      let message;
+      try {
+        message = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+      if (message.type === "state") {
+        await refreshMatch();
+      } else if (
+        message.type === "progress" &&
+        message.user_id !== String(state.user?.id)
+      ) {
+        realtime.opponentProgress = message.answered_count;
+        updateProgressUI();
+      }
+    });
+    socket.addEventListener("close", () => {
+      updateConnectionStatus("实时连接中断，正在使用轮询");
+      if (["waiting", "active"].includes(realtime.match?.status)) {
+        realtime.reconnectTimer = window.setTimeout(connectSocket, 2000);
+      }
+    });
+    socket.addEventListener("error", () => {
+      updateConnectionStatus("WebSocket 不可用，轮询仍在工作");
+    });
+  }
+
+  function updateConnectionStatus(message) {
+    const node = document.querySelector("#realtime-connection");
+    if (node) node.textContent = message;
+  }
+
+  async function refreshMatch() {
+    if (!realtime.match?.match_id) return;
+    try {
+      const match = await api(`contests/matches/${realtime.match.match_id}/`);
+      const previous = realtime.match;
+      const previousStatus = previous.status;
+      realtime.match = match;
+      const shouldRender =
+        previous.status !== match.status ||
+        previous.attempt?.status !== match.attempt?.status;
+      if (shouldRender) renderMatch();
+      else {
+        updateClock();
+        if (
+          previous.opponent?.status !== match.opponent?.status &&
+          match.opponent?.status &&
+          match.opponent.status !== "active"
+        ) {
+          realtime.opponentProgress = match.attempt?.questions.length || 0;
+          updateProgressUI();
+          updateConnectionStatus("对手已提交，完成后将立即结算");
+        }
+      }
+      if (previousStatus === "waiting" && match.status === "active") {
+        showToast(`已匹配到 ${match.opponent.nickname}`);
+      }
+      if (!["waiting", "active"].includes(match.status)) {
+        stopTimers();
+        closeSocket();
+      }
+    } catch (error) {
+      if (error.status === 404) {
+        stopTimers();
+        closeSocket();
+      }
+    }
+  }
+
+  function startPolling() {
+    stopTimers();
+    realtime.pollTimer = window.setInterval(refreshMatch, 2000);
+    realtime.clockTimer = window.setInterval(updateClock, 250);
+  }
+
+  function openMatch(match) {
+    realtime.match = match;
+    realtime.opponentProgress = 0;
+    renderMatch();
+    const dialog = document.querySelector("#experience-dialog");
+    if (!dialog.open) dialog.showModal();
+    connectSocket();
+    if (["waiting", "active"].includes(match.status)) startPolling();
+  }
+
+  function header(root, match) {
+    const label = document.createElement("span");
+    label.className = "kicker";
+    label.textContent =
+      `${match.match_type === "challenge" ? "联机码约战" : "随机匹配"} · REALTIME`;
+    const title = document.createElement("h2");
+    title.textContent = match.contest;
+    const status = document.createElement("div");
+    status.className = "realtime-status-line";
+    const connection = document.createElement("span");
+    connection.id = "realtime-connection";
+    connection.textContent = "正在建立实时连接…";
+    const clock = document.createElement("strong");
+    clock.id = "realtime-clock";
+    status.append(connection, clock);
+    root.append(label, title, status);
+  }
+
+  function updateClock() {
+    const clock = document.querySelector("#realtime-clock");
+    if (!clock || !realtime.match) return;
+    if (realtime.match.status === "waiting") {
+      const expiresAt = new Date(realtime.match.expires_at).getTime();
+      const seconds = Math.max(0, Math.ceil((expiresAt - Date.now()) / 1000));
+      clock.textContent = `联机码 ${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")} 后失效`;
+      return;
+    }
+    if (realtime.match.status === "active") {
+      const startedAt = new Date(realtime.match.started_at).getTime();
+      const elapsed = (Date.now() - startedAt) / 1000;
+      const remaining = Math.max(0, Math.ceil(realtime.match.duration_seconds - elapsed));
+      clock.textContent = `剩余 ${remaining} 秒`;
+      if (remaining === 0) refreshMatch();
+      return;
+    }
+    clock.textContent = "";
+  }
+
+  async function copyCode(code) {
+    try {
+      await navigator.clipboard.writeText(code);
+      showToast(`联机码 ${code} 已复制`);
+    } catch {
+      showToast(`联机码：${code}`);
+    }
+  }
+
+  function renderWaiting(root, match) {
+    const panel = document.createElement("div");
+    panel.className = "realtime-waiting";
+    const pulse = document.createElement("span");
+    pulse.className = "realtime-pulse";
+    const message = document.createElement("p");
+    message.textContent =
+      match.match_type === "challenge"
+        ? "把联机码发给朋友。对方加入后会自动开始，无需再次点击。"
+        : "正在寻找同赛道、相近 Rating 的玩家。";
+    panel.append(pulse, message);
+    if (match.challenge_code) {
+      const code = document.createElement("button");
+      code.className = "challenge-code";
+      code.textContent = match.challenge_code;
+      code.title = "点击复制联机码";
+      code.addEventListener("click", () => copyCode(match.challenge_code));
+      panel.append(code);
+    }
+    if (match.is_owner) {
+      const cancel = document.createElement("button");
+      cancel.className = "ghost-button";
+      cancel.textContent = "取消等待";
+      cancel.addEventListener("click", async () => {
+        cancel.disabled = true;
+        try {
+          realtime.match = await api(`contests/matches/${match.match_id}/cancel/`, {
+            method: "POST",
+            body: {},
+          });
+          renderMatch();
+          stopTimers();
+          closeSocket();
+        } catch (error) {
+          showToast(error.message);
+          cancel.disabled = false;
+        }
+      });
+      panel.append(cancel);
+    }
+    root.append(panel);
+    updateClock();
+  }
+
+  function progressPanel(root, match) {
+    const panel = document.createElement("div");
+    panel.className = "realtime-progress-panel";
+    const self = document.createElement("div");
+    self.innerHTML = `<span>你</span><b id="self-progress">0 / ${match.attempt.questions.length}</b>`;
+    const opponent = document.createElement("div");
+    opponent.innerHTML =
+      `<span>${match.opponent?.nickname || "对手"}</span>` +
+      `<b id="opponent-progress">${realtime.opponentProgress} / ${match.attempt.questions.length}</b>`;
+    panel.append(self, opponent);
+    root.append(panel);
+  }
+
+  function updateProgressUI(selfCount) {
+    if (Number.isInteger(selfCount)) {
+      const self = document.querySelector("#self-progress");
+      if (self && realtime.match?.attempt) {
+        self.textContent = `${selfCount} / ${realtime.match.attempt.questions.length}`;
+      }
+    }
+    const opponent = document.querySelector("#opponent-progress");
+    if (opponent && realtime.match?.attempt) {
+      opponent.textContent =
+        `${realtime.opponentProgress} / ${realtime.match.attempt.questions.length}`;
+    }
+  }
+
+  function sendProgress(answeredCount) {
+    if (realtime.socket?.readyState === WebSocket.OPEN) {
+      realtime.socket.send(
+        JSON.stringify({ type: "progress", answered_count: answeredCount })
+      );
+    }
+  }
+
+  function renderActive(root, match) {
+    progressPanel(root, match);
+    const attempt = match.attempt;
+    if (attempt.status !== "active") {
+      const waiting = document.createElement("div");
+      waiting.className = "realtime-submitted";
+      waiting.innerHTML =
+        "<strong>答案已锁定</strong><p>等待对手提交。双方完成后才会公开答案和 Rating 变化。</p>";
+      root.append(waiting);
+      updateClock();
+      return;
+    }
+    const form = document.createElement("form");
+    form.className = "choice-list realtime-answer-form";
+    attempt.questions.forEach((question) => {
+      const field = document.createElement("label");
+      field.textContent = `${question.order}. ${question.prompt}`;
+      const input = document.createElement("input");
+      input.name = String(question.order);
+      input.inputMode = "decimal";
+      input.autocomplete = "off";
+      input.addEventListener("input", () => {
+        const answered = [...form.querySelectorAll("input")].filter(
+          (item) => item.value.trim()
+        ).length;
+        updateProgressUI(answered);
+        sendProgress(answered);
+      });
+      field.append(input);
+      form.append(field);
+    });
+    const submit = document.createElement("button");
+    submit.className = "primary-button";
+    submit.type = "submit";
+    submit.textContent = "提交并等待对手";
+    form.append(submit);
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      const data = new FormData(form);
+      try {
+        realtime.match = await api(
+          `contests/attempts/${attempt.attempt_id}/submit/`,
+          {
+            method: "POST",
+            headers: { "Idempotency-Key": createIdempotencyKey() },
+            body: {
+              answers: attempt.questions.map((question) => ({
+                order: question.order,
+                answer: data.get(String(question.order)) || "",
+              })),
+            },
+          },
+        );
+        renderMatch();
+      } catch (error) {
+        showToast(error.message);
+        submit.disabled = false;
+      }
+    });
+    root.append(form);
+    updateClock();
+  }
+
+  function renderCompleted(root, match) {
+    const result = document.createElement("section");
+    result.className = `realtime-result result-${match.result.winner}`;
+    const outcome = document.createElement("strong");
+    outcome.textContent =
+      match.result.winner === "self"
+        ? "获胜"
+        : match.result.winner === "opponent"
+        ? "本局惜败"
+        : "平局";
+    const score = document.createElement("p");
+    score.textContent =
+      `你 ${match.attempt.score} 分 · ${match.opponent.score} 分 ${match.opponent.nickname}`;
+    const rating = document.createElement("b");
+    const sign = match.result.rating_delta > 0 ? "+" : "";
+    rating.textContent =
+      `Rating ${sign}${match.result.rating_delta} → ${match.result.rating_after}`;
+    result.append(outcome, score, rating);
+    root.append(result);
+
+    const review = document.createElement("div");
+    review.className = "realtime-review";
+    match.attempt.questions.forEach((question) => {
+      const item = document.createElement("article");
+      const title = document.createElement("b");
+      title.textContent = `${question.order}. ${question.prompt}`;
+      const answer = document.createElement("p");
+      answer.textContent =
+        `你的答案：${question.submitted_answer || "未作答"} · 正确答案：${question.correct_answer}`;
+      const explanation = document.createElement("small");
+      explanation.textContent = question.explanation || "";
+      item.className = question.is_correct ? "correct" : "incorrect";
+      item.append(title, answer, explanation);
+      review.append(item);
+    });
+    root.append(review);
+  }
+
+  function renderMatch() {
+    const root = document.querySelector("#experience-content");
+    const match = realtime.match;
+    root.replaceChildren();
+    header(root, match);
+    if (match.status === "waiting") renderWaiting(root, match);
+    else if (match.status === "active") renderActive(root, match);
+    else if (match.status === "completed") renderCompleted(root, match);
+    else {
+      const message = document.createElement("p");
+      message.className = "scene";
+      message.textContent = "这场匹配已取消或联机码已过期。";
+      root.append(message);
+    }
+  }
+
+  function currentRealtimeContest() {
+    return state.contests.find(
+      (contest) => contest.kind === "realtime" && contest.track === state.track
+    );
+  }
+
+  async function startRandom(contest) {
+    const match = await api(`contests/${contest.slug}/matchmaking/`, {
+      method: "POST",
+      body: {},
+    });
+    openMatch(match);
+  }
+
+  async function createChallenge() {
+    if (!requireAuth()) return;
+    const contest = currentRealtimeContest();
+    if (!contest) {
+      showToast("当前赛道没有可用的实时比赛");
+      return;
+    }
+    try {
+      const match = await api(`contests/${contest.slug}/challenges/`, {
+        method: "POST",
+        body: {},
+      });
+      openMatch(match);
+    } catch (error) {
+      showToast(error.message);
+    }
+  }
+
+  async function joinChallenge(event) {
+    event.preventDefault();
+    if (!requireAuth()) return;
+    const input = document.querySelector("#challenge-code-input");
+    const challengeCode = input.value.trim().toUpperCase();
+    if (challengeCode.length !== 6) {
+      showToast("请输入 6 位联机码");
+      return;
+    }
+    try {
+      const match = await api("contests/challenges/join/", {
+        method: "POST",
+        body: { challenge_code: challengeCode },
+      });
+      input.value = "";
+      openMatch(match);
+    } catch (error) {
+      showToast(error.message);
+    }
+  }
+
+  function init() {
+    document
+      .querySelector("#challenge-create")
+      .addEventListener("click", createChallenge);
+    document
+      .querySelector("#challenge-join-form")
+      .addEventListener("submit", joinChallenge);
+    document
+      .querySelector("#challenge-code-input")
+      .addEventListener("input", (event) => {
+        event.target.value = event.target.value
+          .toUpperCase()
+          .replace(/[^ABCDEFGHJKLMNPQRSTUVWXYZ23456789]/g, "")
+          .slice(0, 6);
+      });
+  }
+
+  function reset() {
+    stopTimers();
+    closeSocket();
+    realtime.match = null;
+    realtime.opponentProgress = 0;
+  }
+
+  window.HuluRealtime = { init, startRandom, refreshMatch, reset };
+})();

backend/static/js/toolbox.js

@@ -0,0 +1,710 @@
+(function () {
+  const $tool = (selector, root = document) => root.querySelector(selector);
+  const $$tool = (selector, root = document) => [...root.querySelectorAll(selector)];
+
+  const CALC_FIELDS = {
+    derivative: ["order"],
+    integral: ["bounds"],
+    limit: ["point"],
+    base: ["base"],
+    unit: ["unit"],
+  };
+
+  function formatCalculatorResult(result) {
+    if (Array.isArray(result)) {
+      return {
+        exact: result.map((item) => item.exact).join(", "),
+        decimal: result.map((item) => item.decimal).join(", "),
+        latex: result.map((item) => item.latex).join(", "),
+      };
+    }
+    if (result && typeof result === "object" && "exact" in result) return result;
+    const entries = Object.entries(result || {});
+    return {
+      exact: entries.map(([key, value]) => `${key}: ${value}`).join(" · "),
+      decimal: entries.map(([key, value]) => `${key}: ${value}`).join(" · "),
+      latex: entries.map(([key, value]) => `${key}=${value}`).join(", "),
+    };
+  }
+
+  function updateCalculatorFields() {
+    const operation = $tool("#calc-operation").value;
+    const visible = new Set(CALC_FIELDS[operation] || []);
+    $$tool("[data-calc-field]").forEach((field) => {
+      field.hidden = !visible.has(field.dataset.calcField);
+    });
+    const input = $tool("#calc-input");
+    const placeholders = {
+      statistics: "12, 15, 18, 21, 24",
+      base: "FF",
+      matrix_det: "1,2;3,4",
+      matrix_inverse: "1,2;3,4",
+      matrix_rref: "1,2,3;2,4,6",
+      matrix_transpose: "1,2,3;4,5,6",
+      solve: "x^2 - 5*x + 6 = 0",
+    };
+    input.placeholder = placeholders[operation] || "例如：sqrt(2) + 1/3";
+  }
+
+  async function runCalculator() {
+    const button = $tool("#calc-run");
+    const operation = $tool("#calc-operation").value;
+    const expression = $tool("#calc-input").value.trim();
+    button.disabled = true;
+    $tool("#calc-history").textContent = "数学内核正在计算…";
+    try {
+      const payload = await api("toolbox/calculate/", {
+        method: "POST",
+        body: {
+          operation,
+          expression,
+          variable: $tool("#calc-variable").value,
+          order: $tool("#calc-order").value,
+          lower: $tool("#calc-lower").value,
+          upper: $tool("#calc-upper").value,
+          point: $tool("#calc-point").value,
+          from_base: $tool("#calc-from-base").value,
+          to_base: $tool("#calc-to-base").value,
+          from_unit: $tool("#calc-from-unit").value,
+          to_unit: $tool("#calc-to-unit").value,
+        },
+      });
+      const result = formatCalculatorResult(payload.result);
+      $tool("#calc-history").textContent = `${operation} · ${expression}`;
+      $tool("#calc-output").textContent = result.exact || "完成";
+      $tool("#calc-decimal").textContent = result.decimal || result.exact || "—";
+      $tool("#calc-latex").textContent = result.latex || result.exact || "—";
+      $tool("#calc-steps").replaceChildren(
+        ...(payload.steps || []).map((step) => {
+          const item = document.createElement("li");
+          item.textContent = step;
+          return item;
+        })
+      );
+    } catch (error) {
+      $tool("#calc-history").textContent = error.message;
+      $tool("#calc-output").textContent = "计算失败";
+      $tool("#calc-decimal").textContent = "—";
+      $tool("#calc-latex").textContent = "—";
+      $tool("#calc-steps").replaceChildren();
+    } finally {
+      button.disabled = false;
+    }
+  }
+
+  const GRAPH_COLORS = ["#196548", "#d86f45", "#5d73e8", "#8667b5"];
+
+  function drawFunctionPath(context, expression, variables, range, width, height, color) {
+    const toY = (value) => height / 2 - (value / range) * (height / 2);
+    context.strokeStyle = color;
+    context.lineWidth = 3;
+    context.beginPath();
+    let drawing = false;
+    const samples = [];
+    for (let pixel = 0; pixel <= width; pixel += 2) {
+      const x = (pixel / width) * range * 2 - range;
+      let y;
+      try {
+        y = evaluateExpression(expression, { ...variables, x });
+      } catch (error) {
+        if (pixel === 0) throw error;
+        drawing = false;
+        continue;
+      }
+      samples.push({ x, y });
+      const screenY = toY(y);
+      if (!Number.isFinite(screenY) || screenY < -height * 2 || screenY > height * 3) {
+        drawing = false;
+        continue;
+      }
+      if (!drawing) context.moveTo(pixel, screenY);
+      else context.lineTo(pixel, screenY);
+      drawing = true;
+    }
+    context.stroke();
+    return samples;
+  }
+
+  function graphAnalysis(samples) {
+    const roots = [];
+    let extrema = 0;
+    for (let index = 1; index < samples.length; index += 1) {
+      const before = samples[index - 1];
+      const current = samples[index];
+      if (before.y === 0 || before.y * current.y < 0) {
+        const root = (before.x + current.x) / 2;
+        if (!roots.length || Math.abs(root - roots.at(-1)) > 0.15) roots.push(root);
+      }
+      if (index > 1) {
+        const previousSlope = before.y - samples[index - 2].y;
+        const currentSlope = current.y - before.y;
+        if (previousSlope * currentSlope < 0) extrema += 1;
+      }
+    }
+    return { roots: roots.slice(0, 8), extrema };
+  }
+
+  function drawGraph() {
+    const canvas = $tool("#graph-canvas");
+    const context = canvas.getContext("2d");
+    const expressions = $tool("#graph-expression").value
+      .split("\n")
+      .map((item) => item.trim())
+      .filter(Boolean)
+      .slice(0, 4);
+    const range = Number($tool("#graph-range").value);
+    const parameter = Number($tool("#graph-parameter").value);
+    const width = canvas.width;
+    const height = canvas.height;
+    $tool("#graph-range-label").textContent = `−${range} 到 ${range}`;
+    $tool("#graph-parameter-label").textContent = `a = ${parameter}`;
+    $tool("#graph-error").textContent = "";
+    context.clearRect(0, 0, width, height);
+    context.fillStyle = "#fbfbf7";
+    context.fillRect(0, 0, width, height);
+    const toX = (x) => ((x + range) / (range * 2)) * width;
+    const toY = (y) => height / 2 - (y / range) * (height / 2);
+
+    context.strokeStyle = "#e4e5df";
+    context.lineWidth = 1;
+    for (let value = -range; value <= range; value += 1) {
+      context.beginPath();
+      context.moveTo(toX(value), 0);
+      context.lineTo(toX(value), height);
+      context.moveTo(0, toY(value));
+      context.lineTo(width, toY(value));
+      context.stroke();
+    }
+    context.strokeStyle = "#718078";
+    context.lineWidth = 2;
+    context.beginPath();
+    context.moveTo(0, height / 2);
+    context.lineTo(width, height / 2);
+    context.moveTo(width / 2, 0);
+    context.lineTo(width / 2, height);
+    context.stroke();
+
+    if (!expressions.length) {
+      $tool("#graph-error").textContent = "请至少输入一个函数";
+      return;
+    }
+    try {
+      const firstSamples = drawFunctionPath(
+        context,
+        expressions[0],
+        { a: parameter },
+        range,
+        width,
+        height,
+        GRAPH_COLORS[0],
+      );
+      expressions.slice(1).forEach((expression, index) => {
+        drawFunctionPath(
+          context,
+          expression,
+          { a: parameter },
+          range,
+          width,
+          height,
+          GRAPH_COLORS[index + 1],
+        );
+      });
+
+      if ($tool("#graph-integral").checked) {
+        context.fillStyle = "rgba(25, 101, 72, .13)";
+        context.beginPath();
+        context.moveTo(0, height / 2);
+        firstSamples.forEach((item) => context.lineTo(toX(item.x), toY(item.y)));
+        context.lineTo(width, height / 2);
+        context.closePath();
+        context.fill();
+      }
+      if ($tool("#graph-derivative").checked) {
+        const derivative = firstSamples.slice(1, -1).map((item, index) => {
+          const before = firstSamples[index];
+          const after = firstSamples[index + 2];
+          return { x: item.x, y: (after.y - before.y) / (after.x - before.x) };
+        });
+        context.strokeStyle = "#111827";
+        context.lineWidth = 2;
+        context.setLineDash([9, 7]);
+        context.beginPath();
+        derivative.forEach((item, index) => {
+          const x = toX(item.x);
+          const y = toY(item.y);
+          if (index === 0) context.moveTo(x, y);
+          else context.lineTo(x, y);
+        });
+        context.stroke();
+        context.setLineDash([]);
+      }
+      const analysis = graphAnalysis(firstSamples);
+      const rootText = analysis.roots.length
+        ? analysis.roots.map((item) => item.toFixed(2)).join("、")
+        : "当前范围未发现";
+      $tool("#graph-analysis").textContent =
+        `第一条曲线：近似零点 ${rootText}；检测到 ${analysis.extrema} 个极值转折。`;
+    } catch (error) {
+      $tool("#graph-error").textContent = error.message;
+    }
+  }
+
+  function canvasPoint(canvas, event) {
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: ((event.clientX - rect.left) / rect.width) * canvas.width,
+      y: ((event.clientY - rect.top) / rect.height) * canvas.height,
+    };
+  }
+
+  function downloadCanvas(canvas, name) {
+    const link = document.createElement("a");
+    link.download = `${name}-${new Date().toISOString().slice(0, 10)}.png`;
+    link.href = canvas.toDataURL("image/png");
+    link.click();
+  }
+
+  class Whiteboard {
+    constructor(canvas) {
+      this.canvas = canvas;
+      this.context = canvas.getContext("2d");
+      this.tool = "pen";
+      this.history = [];
+      this.drawing = false;
+      this.start = null;
+      this.preview = null;
+      this.reset();
+      canvas.addEventListener("pointerdown", (event) => this.startDrawing(event));
+      canvas.addEventListener("pointermove", (event) => this.move(event));
+      canvas.addEventListener("pointerup", (event) => this.finish(event));
+      canvas.addEventListener("pointercancel", () => this.cancel());
+    }
+
+    reset() {
+      this.context.fillStyle = "#ffffff";
+      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    snapshot() {
+      this.history.push(this.canvas.toDataURL("image/png"));
+      if (this.history.length > 20) this.history.shift();
+    }
+
+    startDrawing(event) {
+      event.preventDefault();
+      this.snapshot();
+      this.drawing = true;
+      this.start = canvasPoint(this.canvas, event);
+      if (this.tool === "text") {
+        const text = $tool("#whiteboard-text").value.trim();
+        if (!text) {
+          this.history.pop();
+          showToast("先输入要放到白板的文字或公式");
+        } else {
+          const size = Math.max(18, Number($tool("#whiteboard-size").value) * 5);
+          this.context.fillStyle = $tool("#whiteboard-color").value;
+          this.context.font = `${size}px "SFMono-Regular", "PingFang SC", sans-serif`;
+          this.context.fillText(text, this.start.x, this.start.y);
+        }
+        this.drawing = false;
+        return;
+      }
+      this.preview = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
+      this.canvas.setPointerCapture(event.pointerId);
+      this.context.lineCap = "round";
+      this.context.lineJoin = "round";
+      this.context.lineWidth = Number($tool("#whiteboard-size").value);
+      this.context.strokeStyle =
+        this.tool === "eraser" ? "#ffffff" : $tool("#whiteboard-color").value;
+      if (this.tool === "pen" || this.tool === "eraser") {
+        this.context.beginPath();
+        this.context.moveTo(this.start.x, this.start.y);
+      }
+    }
+
+    move(event) {
+      if (!this.drawing) return;
+      event.preventDefault();
+      const point = canvasPoint(this.canvas, event);
+      if (this.tool === "pen" || this.tool === "eraser") {
+        this.context.lineTo(point.x, point.y);
+        this.context.stroke();
+        return;
+      }
+      this.context.putImageData(this.preview, 0, 0);
+      this.context.beginPath();
+      if (this.tool === "line") {
+        this.context.moveTo(this.start.x, this.start.y);
+        this.context.lineTo(point.x, point.y);
+      } else {
+        this.context.rect(
+          this.start.x,
+          this.start.y,
+          point.x - this.start.x,
+          point.y - this.start.y,
+        );
+      }
+      this.context.stroke();
+    }
+
+    finish(event) {
+      if (!this.drawing) return;
+      this.move(event);
+      this.drawing = false;
+      this.preview = null;
+    }
+
+    cancel() {
+      if (this.preview) this.context.putImageData(this.preview, 0, 0);
+      this.drawing = false;
+    }
+
+    undo() {
+      const source = this.history.pop();
+      if (!source) return;
+      const image = new Image();
+      image.onload = () => {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.context.drawImage(image, 0, 0);
+      };
+      image.src = source;
+    }
+
+    clear() {
+      this.snapshot();
+      this.reset();
+    }
+
+    addGrid() {
+      this.snapshot();
+      const context = this.context;
+      context.strokeStyle = "#e1e7e1";
+      context.lineWidth = 1;
+      for (let x = 0; x <= this.canvas.width; x += 50) {
+        context.beginPath();
+        context.moveTo(x, 0);
+        context.lineTo(x, this.canvas.height);
+        context.stroke();
+      }
+      for (let y = 0; y <= this.canvas.height; y += 50) {
+        context.beginPath();
+        context.moveTo(0, y);
+        context.lineTo(this.canvas.width, y);
+        context.stroke();
+      }
+      context.strokeStyle = "#7a877f";
+      context.lineWidth = 2;
+      context.beginPath();
+      context.moveTo(this.canvas.width / 2, 0);
+      context.lineTo(this.canvas.width / 2, this.canvas.height);
+      context.moveTo(0, this.canvas.height / 2);
+      context.lineTo(this.canvas.width, this.canvas.height / 2);
+      context.stroke();
+    }
+
+    addImage(file) {
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = () => {
+        const image = new Image();
+        image.onload = () => {
+          this.snapshot();
+          const scale = Math.min(
+            1,
+            (this.canvas.width * 0.8) / image.width,
+            (this.canvas.height * 0.8) / image.height,
+          );
+          this.context.drawImage(
+            image,
+            30,
+            30,
+            image.width * scale,
+            image.height * scale,
+          );
+        };
+        image.src = reader.result;
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+
+  class GeometryBoard {
+    constructor(canvas) {
+      this.canvas = canvas;
+      this.context = canvas.getContext("2d");
+      this.tool = "point";
+      this.points = [];
+      this.segments = [];
+      this.circles = [];
+      this.history = [];
+      this.pending = [];
+      this.dragging = null;
+      canvas.addEventListener("pointerdown", (event) => this.pointerDown(event));
+      canvas.addEventListener("pointermove", (event) => this.pointerMove(event));
+      canvas.addEventListener("pointerup", (event) => this.pointerUp(event));
+      canvas.addEventListener("pointercancel", () => {
+        this.dragging = null;
+      });
+      this.draw();
+    }
+
+    save() {
+      this.history.push(
+        JSON.stringify({
+          points: this.points,
+          segments: this.segments,
+          circles: this.circles,
+        })
+      );
+      if (this.history.length > 30) this.history.shift();
+    }
+
+    findOrCreate(point) {
+      const nearest = this.findNearest(point);
+      if (nearest >= 0) return nearest;
+      this.points.push(point);
+      return this.points.length - 1;
+    }
+
+    findNearest(point) {
+      let nearest = -1;
+      let distance = 28;
+      this.points.forEach((item, index) => {
+        const current = Math.hypot(item.x - point.x, item.y - point.y);
+        if (current < distance) {
+          nearest = index;
+          distance = current;
+        }
+      });
+      return nearest;
+    }
+
+    pointerDown(event) {
+      if (this.tool !== "move") return;
+      event.preventDefault();
+      const nearest = this.findNearest(canvasPoint(this.canvas, event));
+      if (nearest < 0 || this.points[nearest].derived) return;
+      this.save();
+      this.dragging = nearest;
+      this.canvas.setPointerCapture(event.pointerId);
+    }
+
+    pointerMove(event) {
+      if (this.dragging === null) return;
+      event.preventDefault();
+      const point = canvasPoint(this.canvas, event);
+      this.points[this.dragging] = point;
+      this.draw();
+    }
+
+    pointerUp(event) {
+      if (this.tool === "move") {
+        this.pointerMove(event);
+        this.dragging = null;
+        return;
+      }
+      this.handlePoint(event);
+    }
+
+    handlePoint(event) {
+      event.preventDefault();
+      const point = canvasPoint(this.canvas, event);
+      this.save();
+      if (this.tool === "point") {
+        this.findOrCreate(point);
+      } else {
+        this.pending.push(this.findOrCreate(point));
+        if (this.pending.length === 2) {
+          const [first, second] = this.pending;
+          if (first !== second && this.tool === "segment") {
+            this.segments.push({ first, second });
+          } else if (first !== second && this.tool === "circle") {
+            this.circles.push({ center: first, edge: second });
+          } else if (first !== second && this.tool === "midpoint") {
+            const a = this.points[first];
+            const b = this.points[second];
+            this.points.push({
+              x: (a.x + b.x) / 2,
+              y: (a.y + b.y) / 2,
+              derived: true,
+              parents: [first, second],
+            });
+            this.segments.push({ first, second, guide: true });
+          }
+          this.pending = [];
+        }
+      }
+      this.draw();
+      $tool("#geometry-hint").textContent = this.pending.length
+        ? "再选择一个点完成构造。"
+        : "可继续创建或切换构造工具。";
+    }
+
+    draw() {
+      const context = this.context;
+      const width = this.canvas.width;
+      const height = this.canvas.height;
+      this.points.forEach((point) => {
+        if (!point.derived || !point.parents) return;
+        const first = this.points[point.parents[0]];
+        const second = this.points[point.parents[1]];
+        point.x = (first.x + second.x) / 2;
+        point.y = (first.y + second.y) / 2;
+      });
+      context.fillStyle = "#fbfbf7";
+      context.fillRect(0, 0, width, height);
+      context.strokeStyle = "#e7e8e2";
+      context.lineWidth = 1;
+      for (let x = 0; x <= width; x += 50) {
+        context.beginPath();
+        context.moveTo(x, 0);
+        context.lineTo(x, height);
+        context.stroke();
+      }
+      for (let y = 0; y <= height; y += 50) {
+        context.beginPath();
+        context.moveTo(0, y);
+        context.lineTo(width, y);
+        context.stroke();
+      }
+      this.segments.forEach((segment) => {
+        const first = this.points[segment.first];
+        const second = this.points[segment.second];
+        context.strokeStyle = segment.guide ? "#9ca3af" : "#196548";
+        context.setLineDash(segment.guide ? [8, 6] : []);
+        context.lineWidth = 3;
+        context.beginPath();
+        context.moveTo(first.x, first.y);
+        context.lineTo(second.x, second.y);
+        context.stroke();
+        context.setLineDash([]);
+        if ($tool("#geometry-labels").checked) {
+          context.fillStyle = "#47534c";
+          context.font = "18px sans-serif";
+          context.fillText(
+            Math.hypot(first.x - second.x, first.y - second.y).toFixed(1),
+            (first.x + second.x) / 2 + 8,
+            (first.y + second.y) / 2 - 8,
+          );
+        }
+      });
+      this.circles.forEach((circle) => {
+        const center = this.points[circle.center];
+        const edge = this.points[circle.edge];
+        const radius = Math.hypot(center.x - edge.x, center.y - edge.y);
+        context.strokeStyle = "#5d73e8";
+        context.lineWidth = 3;
+        context.beginPath();
+        context.arc(center.x, center.y, radius, 0, Math.PI * 2);
+        context.stroke();
+      });
+      this.points.forEach((point, index) => {
+        context.fillStyle = point.derived ? "#d86f45" : "#17211b";
+        context.beginPath();
+        context.arc(point.x, point.y, 7, 0, Math.PI * 2);
+        context.fill();
+        if ($tool("#geometry-labels").checked) {
+          context.fillStyle = "#17211b";
+          context.font = "18px sans-serif";
+          context.fillText(
+            `${String.fromCharCode(65 + (index % 26))} (${Math.round(point.x)}, ${Math.round(point.y)})`,
+            point.x + 10,
+            point.y - 10,
+          );
+        }
+      });
+    }
+
+    undo() {
+      const state = this.history.pop();
+      if (!state) return;
+      const parsed = JSON.parse(state);
+      this.points = parsed.points;
+      this.segments = parsed.segments;
+      this.circles = parsed.circles;
+      this.pending = [];
+      this.draw();
+    }
+
+    clear() {
+      this.save();
+      this.points = [];
+      this.segments = [];
+      this.circles = [];
+      this.pending = [];
+      this.draw();
+    }
+  }
+
+  let whiteboard;
+  let geometry;
+
+  function initDrawingTools() {
+    whiteboard = new Whiteboard($tool("#whiteboard-canvas"));
+    geometry = new GeometryBoard($tool("#geometry-canvas"));
+    $$tool("[data-whiteboard-tool]").forEach((button) => {
+      button.addEventListener("click", () => {
+        whiteboard.tool = button.dataset.whiteboardTool;
+        $$tool("[data-whiteboard-tool]").forEach((item) =>
+          item.classList.toggle("active", item === button)
+        );
+      });
+    });
+    $tool("#whiteboard-undo").addEventListener("click", () => whiteboard.undo());
+    $tool("#whiteboard-clear").addEventListener("click", () => whiteboard.clear());
+    $tool("#whiteboard-grid").addEventListener("click", () => whiteboard.addGrid());
+    $tool("#whiteboard-image").addEventListener("change", (event) => {
+      whiteboard.addImage(event.target.files[0]);
+      event.target.value = "";
+    });
+    $tool("#whiteboard-export").addEventListener("click", () =>
+      downloadCanvas(whiteboard.canvas, "hulumath-whiteboard")
+    );
+    $$tool("[data-geometry-tool]").forEach((button) => {
+      button.addEventListener("click", () => {
+        geometry.tool = button.dataset.geometryTool;
+        geometry.pending = [];
+        $$tool("[data-geometry-tool]").forEach((item) =>
+          item.classList.toggle("active", item === button)
+        );
+      });
+    });
+    $tool("#geometry-labels").addEventListener("change", () => geometry.draw());
+    $tool("#geometry-undo").addEventListener("click", () => geometry.undo());
+    $tool("#geometry-clear").addEventListener("click", () => geometry.clear());
+    $tool("#geometry-export").addEventListener("click", () =>
+      downloadCanvas(geometry.canvas, "hulumath-geometry")
+    );
+  }
+
+  function init() {
+    $tool("#calc-operation").addEventListener("change", updateCalculatorFields);
+    $tool("#calc-run").addEventListener("click", runCalculator);
+    $tool("#calc-input").addEventListener("keydown", (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") runCalculator();
+    });
+    $$tool("[data-calc-example]").forEach((button) => {
+      button.addEventListener("click", () => {
+        $tool("#calc-operation").value = button.dataset.calcOperation;
+        $tool("#calc-input").value = button.dataset.calcExample;
+        updateCalculatorFields();
+        runCalculator();
+      });
+    });
+    ["#graph-run", "#graph-range", "#graph-parameter", "#graph-derivative", "#graph-integral"]
+      .forEach((selector) => $tool(selector).addEventListener("input", drawGraph));
+    $tool("#graph-expression").addEventListener("keydown", (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") drawGraph();
+    });
+    initDrawingTools();
+    updateCalculatorFields();
+    drawGraph();
+  }
+
+  function activate(tool) {
+    if (tool === "graph") window.setTimeout(drawGraph, 30);
+    if (tool === "geometry") window.setTimeout(() => geometry.draw(), 30);
+  }
+
+  window.HuluToolbox = { init, activate, runCalculator, drawGraph };
+})();

backend/templates/index.html

@@ -89,25 +89,97 @@
         <div class="track-switch" id="track-switch">
           <button class="active" data-track="standard">标准</button><button data-track="beginner">入门</button><button data-track="advanced">进阶</button>
         </div>
+        <section class="challenge-panel">
+          <div>
+            <span class="kicker">FRIEND CHALLENGE</span>
+            <h2>联机码约战</h2>
+            <p>创建 6 位联机码发给朋友，或输入朋友的联机码加入同一场对局。</p>
+          </div>
+          <div class="challenge-actions">
+            <button id="challenge-create" class="primary-button">创建当前赛道约战</button>
+            <form id="challenge-join-form">
+              <input id="challenge-code-input" maxlength="6" autocomplete="off" placeholder="输入 6 位联机码" aria-label="联机码">
+              <button class="dark-button" type="submit">加入约战</button>
+            </form>
+          </div>
+        </section>
         <div id="contest-list" class="content-grid loading">正在读取比赛…</div>
+        <section class="math-games-section">
+          <div class="section-heading">
+            <div><span class="kicker">MATH PLAYGROUND</span><h2>数学玩法</h2></div>
+            <p>短局推理，成绩由服务端校验并记录。</p>
+          </div>
+          <div id="math-game-list" class="game-card-grid"></div>
+        </section>
       </section>
 
       <section class="view" id="view-toolbox">
         <div class="page-title"><span class="kicker">MATHEMATICAL WORKBENCH</span><h1>工具箱</h1><p>计算、查询、绘图与表达，把想法直接变成可以继续工作的对象。</p></div>
         <div class="tool-grid" id="tool-grid">
           <button class="tool-card" data-tool="mental"><span>⚡</span><b>口算竞技</b><small>限时挑战你的心算速度</small></button>
-          <button class="tool-card active" data-tool="calculator"><span>123</span><b>科学计算器</b><small>四则、幂运算与三角函数</small></button>
+          <button class="tool-card active" data-tool="calculator"><span>123</span><b>数学计算工作台</b><small>代数、微积分、矩阵与统计</small></button>
           <button class="tool-card" data-tool="symbols"><span>Σ</span><b>数学符号查询</b><small>含义、读法与 LaTeX 写法</small></button>
-          <button class="tool-card" data-tool="graph"><span>⌁</span><b>函数图形绘制</b><small>输入 f(x)，实时观察曲线</small></button>
+          <button class="tool-card" data-tool="graph"><span>⌁</span><b>函数图形绘制</b><small>多函数、参数、导数与分析</small></button>
+          <button class="tool-card" data-tool="whiteboard"><span>✎</span><b>数学白板</b><small>书写、图形、撤销与导出</small></button>
+          <button class="tool-card" data-tool="geometry"><span>△</span><b>几何画板</b><small>点线圆、中点与动态测量</small></button>
           <button class="tool-card" data-tool="latex"><span>TeX</span><b>LaTeX Lab</b><small>编辑、预览、课程与公式库</small></button>
         </div>
 
         <div class="tool-workspace active" id="tool-calculator">
-          <div class="workspace-heading"><div><span class="kicker">CALCULATOR</span><h2>科学计算器</h2></div><p>支持 + − × ÷、括号、幂、sin、cos、tan、sqrt、log 与常数 π。</p></div>
-          <div class="calculator-shell">
-            <div class="calculator-display"><small id="calc-history">准备计算</small><output id="calc-output">0</output></div>
-            <input id="calc-input" class="formula-input" autocomplete="off" value="sqrt(144) + 2^5" aria-label="计算表达式">
-            <div class="calculator-actions"><button data-calc-example="sin(pi/6)">sin(π/6)</button><button data-calc-example="log(100)">log(100)</button><button data-calc-example="(18+7)*4">(18+7)×4</button><button id="calc-run" class="primary-button">计算</button></div>
+          <div class="workspace-heading"><div><span class="kicker">COMPUTATION STUDIO</span><h2>数学计算工作台</h2></div><p>精确值、方程、微积分、矩阵、统计与进制转换由受限数学内核计算。</p></div>
+          <div class="calculator-shell advanced-calculator">
+            <div class="calculator-controls">
+              <label>计算类型
+                <select id="calc-operation">
+                  <option value="calculate">精确计算</option>
+                  <option value="simplify">表达式化简</option>
+                  <option value="expand">代数展开</option>
+                  <option value="factor">因式分解</option>
+                  <option value="solve">解方程</option>
+                  <option value="derivative">求导</option>
+                  <option value="integral">积分</option>
+                  <option value="limit">极限</option>
+                  <option value="matrix_det">矩阵行列式</option>
+                  <option value="matrix_inverse">逆矩阵</option>
+                  <option value="matrix_rref">矩阵行最简形</option>
+                  <option value="matrix_transpose">矩阵转置</option>
+                  <option value="statistics">描述统计</option>
+                  <option value="base">进制转换</option>
+                  <option value="unit">单位换算</option>
+                </select>
+              </label>
+              <label>变量
+                <select id="calc-variable"><option>x</option><option>y</option><option>z</option><option>a</option><option>b</option><option>t</option><option>n</option></select>
+              </label>
+              <label class="calc-field" data-calc-field="order">阶数<input id="calc-order" type="number" min="1" max="5" value="1"></label>
+              <label class="calc-field" data-calc-field="bounds">下限<input id="calc-lower" placeholder="可留空"></label>
+              <label class="calc-field" data-calc-field="bounds">上限<input id="calc-upper" placeholder="可留空"></label>
+              <label class="calc-field" data-calc-field="point">趋近值<input id="calc-point" value="0"></label>
+              <label class="calc-field" data-calc-field="base">原进制<input id="calc-from-base" type="number" min="2" max="36" value="10"></label>
+              <label class="calc-field" data-calc-field="base">目标进制<input id="calc-to-base" type="number" min="2" max="36" value="2"></label>
+              <label class="calc-field" data-calc-field="unit">原单位<select id="calc-from-unit"><option>mm</option><option>cm</option><option selected>m</option><option>km</option><option>in</option><option>ft</option><option>g</option><option>kg</option><option>lb</option><option>s</option><option>min</option><option>h</option><option>deg</option><option>rad</option></select></label>
+              <label class="calc-field" data-calc-field="unit">目标单位<select id="calc-to-unit"><option>mm</option><option selected>cm</option><option>m</option><option>km</option><option>in</option><option>ft</option><option>g</option><option>kg</option><option>lb</option><option>s</option><option>min</option><option>h</option><option>deg</option><option>rad</option></select></label>
+            </div>
+            <label class="calculator-expression-label">表达式或数据
+              <textarea id="calc-input" class="formula-input" autocomplete="off" aria-label="计算表达式">sqrt(2) + 1/3</textarea>
+            </label>
+            <div class="calculator-actions calc-examples">
+              <button data-calc-operation="solve" data-calc-example="x^2 - 5*x + 6 = 0">解方程</button>
+              <button data-calc-operation="derivative" data-calc-example="sin(x) + x^3">求导</button>
+              <button data-calc-operation="integral" data-calc-example="x^2">积分</button>
+              <button data-calc-operation="matrix_inverse" data-calc-example="1,2;3,4">逆矩阵</button>
+              <button data-calc-operation="statistics" data-calc-example="12,15,18,21,24">统计</button>
+              <button data-calc-operation="unit" data-calc-example="1.75">单位换算</button>
+              <button id="calc-run" class="primary-button">开始计算</button>
+            </div>
+            <div class="calculator-result" aria-live="polite">
+              <div class="calculator-display"><small id="calc-history">准备计算</small><output id="calc-output">0</output></div>
+              <div class="calc-result-grid">
+                <div><span>近似值</span><code id="calc-decimal">0</code></div>
+                <div><span>LaTeX</span><code id="calc-latex">0</code></div>
+              </div>
+              <ol id="calc-steps" class="calc-steps"></ol>
+            </div>
           </div>
         </div>
 
@@ -117,13 +189,59 @@
         </div>
 
         <div class="tool-workspace" id="tool-graph">
-          <div class="workspace-heading"><div><span class="kicker">FUNCTION PLOTTER</span><h2>函数图形绘制</h2></div><p>变量使用 x，支持与计算器相同的函数。</p></div>
+          <div class="workspace-heading"><div><span class="kicker">FUNCTION PLOTTER</span><h2>函数图形绘制</h2></div><p>每行一个函数；支持参数 a、数值导数、积分区域和曲线分析。</p></div>
           <div class="graph-shell">
-            <div class="graph-controls"><label>f(x)<input id="graph-expression" class="formula-input" value="sin(x) + x/3"></label><label>显示范围<input id="graph-range" type="range" min="5" max="30" value="10"><span id="graph-range-label">−10 到 10</span></label><button id="graph-run" class="primary-button">绘制函数</button><p id="graph-error"></p></div>
+            <div class="graph-controls">
+              <label>函数列表<textarea id="graph-expression" class="formula-input">sin(x) + a*x/3&#10;0.08*x^2 - 2</textarea></label>
+              <label>X 范围<input id="graph-range" type="range" min="5" max="30" value="10"><span id="graph-range-label">−10 到 10</span></label>
+              <label>参数 a<input id="graph-parameter" type="range" min="-5" max="5" step="0.1" value="1"><span id="graph-parameter-label">a = 1</span></label>
+              <label class="check-row"><input id="graph-derivative" type="checkbox"> 绘制第一条函数的导数</label>
+              <label class="check-row"><input id="graph-integral" type="checkbox"> 填充第一条函数与 x 轴区域</label>
+              <button id="graph-run" class="primary-button">绘制函数</button>
+              <p id="graph-error"></p>
+              <div id="graph-analysis" class="graph-analysis"></div>
+            </div>
             <canvas id="graph-canvas" width="900" height="480" aria-label="函数曲线图"></canvas>
           </div>
         </div>
 
+        <div class="tool-workspace" id="tool-whiteboard">
+          <div class="workspace-heading"><div><span class="kicker">MATH WHITEBOARD</span><h2>数学白板</h2></div><p>支持鼠标、触控笔和手机触摸，作品仅在当前设备编辑，可导出 PNG。</p></div>
+          <div class="drawing-toolbar" id="whiteboard-toolbar">
+            <button class="active" data-whiteboard-tool="pen">画笔</button>
+            <button data-whiteboard-tool="line">直线</button>
+            <button data-whiteboard-tool="rect">矩形</button>
+            <button data-whiteboard-tool="text">文字 / 公式</button>
+            <button data-whiteboard-tool="eraser">橡皮</button>
+            <input id="whiteboard-text" class="toolbar-text-input" placeholder="输入文字或公式">
+            <label>颜色<input id="whiteboard-color" type="color" value="#17211b"></label>
+            <label>粗细<input id="whiteboard-size" type="range" min="2" max="24" value="4"></label>
+            <button id="whiteboard-grid">添加坐标纸</button>
+            <label class="file-tool">导入图片<input id="whiteboard-image" type="file" accept="image/*"></label>
+            <button id="whiteboard-undo">撤销</button>
+            <button id="whiteboard-clear">清空</button>
+            <button id="whiteboard-export" class="primary-button">导出 PNG</button>
+          </div>
+          <div class="canvas-stage"><canvas id="whiteboard-canvas" width="1200" height="700" aria-label="数学白板"></canvas></div>
+        </div>
+
+        <div class="tool-workspace" id="tool-geometry">
+          <div class="workspace-heading"><div><span class="kicker">GEOMETRY BOARD</span><h2>几何画板</h2></div><p>依次点击构造点、线段和圆；支持中点、长度与坐标测量。</p></div>
+          <div class="drawing-toolbar" id="geometry-toolbar">
+            <button class="active" data-geometry-tool="point">点</button>
+            <button data-geometry-tool="segment">线段</button>
+            <button data-geometry-tool="circle">圆</button>
+            <button data-geometry-tool="midpoint">中点</button>
+            <button data-geometry-tool="move">拖动</button>
+            <label class="check-row"><input id="geometry-labels" type="checkbox" checked> 坐标与测量</label>
+            <button id="geometry-undo">撤销</button>
+            <button id="geometry-clear">清空</button>
+            <button id="geometry-export" class="primary-button">导出 PNG</button>
+          </div>
+          <div class="canvas-stage geometry-stage"><canvas id="geometry-canvas" width="1200" height="700" aria-label="几何画板"></canvas></div>
+          <p id="geometry-hint" class="canvas-hint">点击画布创建第一个点。</p>
+        </div>
+
         <div class="tool-workspace" id="tool-latex">
           <div class="workspace-heading"><div><span class="kicker">LATEX LAB</span><h2>数学表达实验室</h2></div><p>源码、实时预览与版本保存。</p></div>
           <div class="editor-shell">
@@ -199,6 +317,9 @@
 
   <div class="toast" id="toast" role="status"></div>
   <div class="csrf-token">{% csrf_token %}</div>
+  <script src="{% static 'js/toolbox.js' %}" defer></script>
+  <script src="{% static 'js/games.js' %}" defer></script>
+  <script src="{% static 'js/realtime.js' %}" defer></script>
   <script src="{% static 'js/app.js' %}" defer></script>
 </body>
 </html>

backend/toolbox/__init__.py

@@ -0,0 +1 @@
+

backend/toolbox/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class ToolboxConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "toolbox"
+    verbose_name = "数学工具箱"

backend/toolbox/engine.py

@@ -0,0 +1,333 @@
+import ast
+import math
+from statistics import mean, median, pstdev, pvariance
+
+import sympy as sp
+from rest_framework.exceptions import ValidationError
+
+MAX_EXPRESSION_LENGTH = 500
+MAX_AST_NODES = 120
+MAX_MATRIX_CELLS = 36
+SYMBOLS = {name: sp.Symbol(name, real=True) for name in ("x", "y", "z", "a", "b", "t", "n")}
+CONSTANTS = {"pi": sp.pi, "e": sp.E, "E": sp.E, "i": sp.I, "I": sp.I}
+FUNCTIONS = {
+    "sin": sp.sin,
+    "cos": sp.cos,
+    "tan": sp.tan,
+    "asin": sp.asin,
+    "acos": sp.acos,
+    "atan": sp.atan,
+    "sinh": sp.sinh,
+    "cosh": sp.cosh,
+    "tanh": sp.tanh,
+    "sqrt": sp.sqrt,
+    "exp": sp.exp,
+    "ln": sp.log,
+    "log": sp.log,
+    "abs": sp.Abs,
+    "factorial": sp.factorial,
+    "binomial": sp.binomial,
+    "gcd": sp.gcd,
+    "lcm": sp.lcm,
+    "floor": sp.floor,
+    "ceil": sp.ceiling,
+}
+FUNCTION_ARITY = {
+    "factorial": (1, 1),
+    "binomial": (2, 2),
+    "gcd": (2, 2),
+    "lcm": (2, 2),
+}
+UNIT_FACTORS = {
+    "mm": ("length", 0.001),
+    "cm": ("length", 0.01),
+    "m": ("length", 1.0),
+    "km": ("length", 1000.0),
+    "in": ("length", 0.0254),
+    "ft": ("length", 0.3048),
+    "g": ("mass", 0.001),
+    "kg": ("mass", 1.0),
+    "lb": ("mass", 0.45359237),
+    "s": ("time", 1.0),
+    "min": ("time", 60.0),
+    "h": ("time", 3600.0),
+    "rad": ("angle", 1.0),
+    "deg": ("angle", math.pi / 180),
+}
+
+
+class SafeExpressionParser:
+    def __init__(self, source):
+        source = str(source or "").strip()
+        if not source:
+            raise ValidationError({"expression": "请输入数学表达式"})
+        if len(source) > MAX_EXPRESSION_LENGTH:
+            raise ValidationError({"expression": "表达式不能超过 500 个字符"})
+        source = (
+            source.replace("π", "pi")
+            .replace("×", "*")
+            .replace("÷", "/")
+            .replace("−", "-")
+            .replace("^", "**")
+        )
+        try:
+            self.tree = ast.parse(source, mode="eval")
+        except SyntaxError as exc:
+            raise ValidationError({"expression": "表达式语法无效"}) from exc
+        if sum(1 for _ in ast.walk(self.tree)) > MAX_AST_NODES:
+            raise ValidationError({"expression": "表达式过于复杂"})
+
+    def parse(self):
+        return self._convert(self.tree.body)
+
+    def _convert(self, node):
+        if isinstance(node, ast.Constant):
+            if isinstance(node.value, bool) or not isinstance(node.value, (int, float)):
+                raise ValidationError({"expression": "只允许数值常量"})
+            if isinstance(node.value, int) and len(str(abs(node.value))) > 50:
+                raise ValidationError({"expression": "整数位数过多"})
+            return sp.Integer(node.value) if isinstance(node.value, int) else sp.Float(node.value)
+        if isinstance(node, ast.Name):
+            if node.id in SYMBOLS:
+                return SYMBOLS[node.id]
+            if node.id in CONSTANTS:
+                return CONSTANTS[node.id]
+            raise ValidationError({"expression": f"不支持变量或常量 {node.id}"})
+        if isinstance(node, ast.UnaryOp) and isinstance(node.op, (ast.UAdd, ast.USub)):
+            value = self._convert(node.operand)
+            return value if isinstance(node.op, ast.UAdd) else -value
+        if isinstance(node, ast.BinOp):
+            left = self._convert(node.left)
+            right = self._convert(node.right)
+            if isinstance(node.op, ast.Add):
+                return left + right
+            if isinstance(node.op, ast.Sub):
+                return left - right
+            if isinstance(node.op, ast.Mult):
+                return left * right
+            if isinstance(node.op, ast.Div):
+                return left / right
+            if isinstance(node.op, ast.Mod):
+                return sp.Mod(left, right)
+            if isinstance(node.op, ast.Pow):
+                if right.is_number and abs(float(right)) > 100:
+                    raise ValidationError({"expression": "幂指数绝对值不能超过 100"})
+                return left**right
+        if isinstance(node, ast.Call) and isinstance(node.func, ast.Name):
+            function = FUNCTIONS.get(node.func.id)
+            if function is None:
+                raise ValidationError({"expression": f"不支持函数 {node.func.id}"})
+            minimum, maximum = FUNCTION_ARITY.get(node.func.id, (1, 2))
+            if node.keywords or not minimum <= len(node.args) <= maximum:
+                raise ValidationError({"expression": f"{node.func.id} 的参数数量无效"})
+            try:
+                return function(*(self._convert(item) for item in node.args))
+            except (TypeError, ValueError) as exc:
+                raise ValidationError({"expression": f"{node.func.id} 的参数无效"}) from exc
+        raise ValidationError({"expression": "表达式包含不允许的语法"})
+
+
+def parse_expression(source):
+    return SafeExpressionParser(source).parse()
+
+
+def parse_equation(source):
+    source = str(source or "")
+    if source.count("=") > 1:
+        raise ValidationError({"expression": "方程只能包含一个等号"})
+    if "=" not in source:
+        return parse_expression(source)
+    left, right = source.split("=", 1)
+    return sp.Eq(parse_expression(left), parse_expression(right))
+
+
+def serialize_math(value):
+    if isinstance(value, dict):
+        return {
+            str(serialize_math(key)["exact"]): serialize_math(item)
+            for key, item in value.items()
+        }
+    if isinstance(value, (list, tuple)):
+        return [serialize_math(item) for item in value]
+    if isinstance(value, sp.MatrixBase):
+        return {
+            "exact": str(value.tolist()),
+            "decimal": str(value.evalf(12).tolist()),
+            "latex": sp.latex(value),
+        }
+    exact = str(value)
+    try:
+        decimal = str(sp.N(value, 12))
+    except Exception:
+        decimal = exact
+    return {"exact": exact, "decimal": decimal, "latex": sp.latex(value)}
+
+
+def parse_matrix(source):
+    rows = [row.strip() for row in str(source or "").split(";") if row.strip()]
+    if not rows:
+        raise ValidationError({"expression": "矩阵格式示例：1,2;3,4"})
+    parsed = [[parse_expression(cell.strip()) for cell in row.split(",")] for row in rows]
+    width = len(parsed[0])
+    if width == 0 or any(len(row) != width for row in parsed):
+        raise ValidationError({"expression": "矩阵每行列数必须一致"})
+    if len(parsed) * width > MAX_MATRIX_CELLS:
+        raise ValidationError({"expression": "矩阵最多支持 36 个元素"})
+    return sp.Matrix(parsed)
+
+
+def parse_number_list(source):
+    try:
+        values = [float(item.strip()) for item in str(source or "").split(",") if item.strip()]
+    except ValueError as exc:
+        raise ValidationError({"expression": "统计数据必须是逗号分隔的数字"}) from exc
+    if not 1 <= len(values) <= 500:
+        raise ValidationError({"expression": "统计数据数量必须在 1 到 500 之间"})
+    if not all(math.isfinite(item) for item in values):
+        raise ValidationError({"expression": "统计数据必须是有限数值"})
+    return values
+
+
+def calculate(payload):
+    operation = str(payload.get("operation", "calculate"))
+    source = payload.get("expression", "")
+    variable_name = str(payload.get("variable", "x"))
+    variable = SYMBOLS.get(variable_name)
+    if variable is None:
+        raise ValidationError({"variable": "变量仅支持 x、y、z、a、b、t、n"})
+
+    if operation == "statistics":
+        values = parse_number_list(source)
+        result = {
+            "count": len(values),
+            "mean": mean(values),
+            "median": median(values),
+            "variance": pvariance(values),
+            "standard_deviation": pstdev(values),
+            "minimum": min(values),
+            "maximum": max(values),
+        }
+        return {
+            "operation": operation,
+            "result": result,
+            "steps": ["读取数据", "计算集中趋势", "计算离散程度"],
+        }
+
+    if operation == "base":
+        try:
+            from_base = int(payload.get("from_base", 10))
+            to_base = int(payload.get("to_base", 2))
+            if not 2 <= from_base <= 36 or not 2 <= to_base <= 36:
+                raise ValueError
+            number = int(str(source).strip(), from_base)
+        except ValueError as exc:
+            raise ValidationError({"expression": "进制必须为 2 到 36，且输入应合法"}) from exc
+        digits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+        sign = "-" if number < 0 else ""
+        remaining = abs(number)
+        converted = "0"
+        if remaining:
+            pieces = []
+            while remaining:
+                remaining, index = divmod(remaining, to_base)
+                pieces.append(digits[index])
+            converted = "".join(reversed(pieces))
+        return {
+            "operation": operation,
+            "result": {"exact": f"{sign}{converted}", "decimal": str(number), "latex": sign + converted},
+            "steps": [f"按 {from_base} 进制读取", f"转换为 {to_base} 进制"],
+        }
+
+    if operation == "unit":
+        try:
+            value = float(str(source).strip())
+            from_unit = str(payload.get("from_unit", "m"))
+            to_unit = str(payload.get("to_unit", "cm"))
+            source_unit = UNIT_FACTORS[from_unit]
+            target_unit = UNIT_FACTORS[to_unit]
+            if source_unit[0] != target_unit[0] or not math.isfinite(value):
+                raise ValueError
+        except (KeyError, ValueError) as exc:
+            raise ValidationError({"expression": "单位不兼容或数值无效"}) from exc
+        converted = value * source_unit[1] / target_unit[1]
+        return {
+            "operation": operation,
+            "result": {
+                "exact": f"{converted:.12g} {to_unit}",
+                "decimal": f"{converted:.12g}",
+                "latex": f"{converted:.12g}\\,{to_unit}",
+            },
+            "steps": [f"将 {from_unit} 换算为标准单位", f"转换为 {to_unit}"],
+        }
+
+    if operation.startswith("matrix_"):
+        matrix = parse_matrix(source)
+        if operation == "matrix_det":
+            if not matrix.is_square:
+                raise ValidationError({"expression": "行列式要求方阵"})
+            result = matrix.det()
+            steps = ["读取矩阵", "按行列式规则计算"]
+        elif operation == "matrix_inverse":
+            if not matrix.is_square or matrix.det() == 0:
+                raise ValidationError({"expression": "矩阵不可逆"})
+            result = matrix.inv()
+            steps = ["读取矩阵", "验证行列式非零", "计算逆矩阵"]
+        elif operation == "matrix_rref":
+            result = matrix.rref()[0]
+            steps = ["读取矩阵", "执行初等行变换", "得到行最简形"]
+        elif operation == "matrix_transpose":
+            result = matrix.T
+            steps = ["读取矩阵", "交换行列"]
+        else:
+            raise ValidationError({"operation": "不支持的矩阵操作"})
+        return {"operation": operation, "result": serialize_math(result), "steps": steps}
+
+    expression = parse_equation(source) if operation == "solve" else parse_expression(source)
+    steps = ["解析受限数学表达式"]
+    if operation == "calculate":
+        result = sp.simplify(expression)
+        steps.append("化简并保留精确值")
+    elif operation == "simplify":
+        result = sp.trigsimp(sp.cancel(expression))
+        steps.append("约分并进行代数/三角化简")
+    elif operation == "expand":
+        result = sp.expand(expression)
+        steps.append("展开乘积与幂")
+    elif operation == "factor":
+        result = sp.factor(expression)
+        steps.append("提取因式并分解")
+    elif operation == "solve":
+        result = sp.solve(expression, variable)
+        if len(result) > 50:
+            raise ValidationError({"expression": "解的数量过多"})
+        steps.extend([f"以 {variable_name} 为未知量", "求解方程"])
+    elif operation == "derivative":
+        order = int(payload.get("order", 1))
+        if not 1 <= order <= 5:
+            raise ValidationError({"order": "导数阶数必须在 1 到 5 之间"})
+        result = sp.diff(expression, variable, order)
+        steps.append(f"对 {variable_name} 求 {order} 阶导数")
+    elif operation == "integral":
+        lower = str(payload.get("lower", "")).strip()
+        upper = str(payload.get("upper", "")).strip()
+        if lower or upper:
+            if not lower or not upper:
+                raise ValidationError({"bounds": "定积分必须同时填写上下限"})
+            result = sp.integrate(
+                expression,
+                (variable, parse_expression(lower), parse_expression(upper)),
+            )
+            steps.append(f"对 {variable_name} 计算定积分")
+        else:
+            result = sp.integrate(expression, variable)
+            steps.append(f"对 {variable_name} 计算不定积分")
+    elif operation == "limit":
+        point = parse_expression(payload.get("point", "0"))
+        direction = str(payload.get("direction", "+-"))
+        if direction not in {"+", "-", "+-"}:
+            raise ValidationError({"direction": "极限方向必须为 +、- 或 +-"})
+        result = sp.limit(expression, variable, point, dir=direction)
+        steps.append(f"令 {variable_name} 趋近 {point}")
+    else:
+        raise ValidationError({"operation": "不支持的计算类型"})
+    return {"operation": operation, "result": serialize_math(result), "steps": steps}

backend/toolbox/test_engine.py

@@ -0,0 +1,63 @@
+import pytest
+from rest_framework.exceptions import ValidationError
+
+from toolbox.engine import calculate, parse_expression
+
+
+def test_calculate_精确计算与微积分():
+    exact = calculate({"operation": "calculate", "expression": "sqrt(2) + 1/3"})
+    derivative = calculate(
+        {"operation": "derivative", "expression": "sin(x) + x^3", "variable": "x"}
+    )
+    integral = calculate(
+        {
+            "operation": "integral",
+            "expression": "x^2",
+            "variable": "x",
+            "lower": "0",
+            "upper": "3",
+        }
+    )
+
+    assert exact["result"]["exact"] == "1/3 + sqrt(2)"
+    assert derivative["result"]["exact"] == "3*x**2 + cos(x)"
+    assert integral["result"]["exact"] == "9"
+
+
+def test_calculate_方程矩阵统计与进制():
+    solved = calculate({"operation": "solve", "expression": "x^2 - 5*x + 6 = 0"})
+    determinant = calculate({"operation": "matrix_det", "expression": "1,2;3,4"})
+    statistics = calculate({"operation": "statistics", "expression": "1,2,3,4"})
+    converted = calculate(
+        {"operation": "base", "expression": "FF", "from_base": 16, "to_base": 2}
+    )
+    units = calculate(
+        {
+            "operation": "unit",
+            "expression": "1.75",
+            "from_unit": "m",
+            "to_unit": "cm",
+        }
+    )
+    combinations = calculate({"operation": "calculate", "expression": "binomial(10, 3)"})
+
+    assert [item["exact"] for item in solved["result"]] == ["2", "3"]
+    assert determinant["result"]["exact"] == "-2"
+    assert statistics["result"]["mean"] == 2.5
+    assert converted["result"]["exact"] == "11111111"
+    assert units["result"]["exact"] == "175 cm"
+    assert combinations["result"]["exact"] == "120"
+
+
+@pytest.mark.parametrize(
+    "source",
+    [
+        "__import__('os').system('id')",
+        "open('/etc/passwd')",
+        "x.__class__",
+        "[x for x in range(10)]",
+    ],
+)
+def test_parse_expression_拒绝非数学语法(source):
+    with pytest.raises(ValidationError):
+        parse_expression(source)

backend/toolbox/test_views.py

@@ -0,0 +1,25 @@
+import pytest
+
+
+@pytest.mark.django_db
+def test_calculator_api_公开访问并返回精确值(client):
+    response = client.post(
+        "/api/v1/toolbox/calculate/",
+        {"operation": "factor", "expression": "x^2 - 1"},
+        content_type="application/json",
+    )
+
+    assert response.status_code == 200
+    assert response.json()["result"]["exact"] == "(x - 1)*(x + 1)"
+
+
+@pytest.mark.django_db
+def test_calculator_api_危险表达式返回四百(client):
+    response = client.post(
+        "/api/v1/toolbox/calculate/",
+        {"operation": "calculate", "expression": "__import__('os').system('id')"},
+        content_type="application/json",
+    )
+
+    assert response.status_code == 400
+    assert "error" in response.json()

backend/toolbox/urls.py

@@ -0,0 +1,7 @@
+from django.urls import path
+
+from .views import CalculatorView
+
+urlpatterns = [
+    path("calculate/", CalculatorView.as_view(), name="toolbox-calculate"),
+]

backend/toolbox/views.py

@@ -0,0 +1,22 @@
+from rest_framework import permissions
+from rest_framework.exceptions import ValidationError
+from rest_framework.response import Response
+from rest_framework.throttling import ScopedRateThrottle
+from rest_framework.views import APIView
+
+from .engine import calculate
+
+
+class CalculatorView(APIView):
+    permission_classes = [permissions.AllowAny]
+    throttle_classes = [ScopedRateThrottle]
+    throttle_scope = "calculator"
+
+    def post(self, request):
+        try:
+            payload = calculate(request.data)
+        except ValidationError:
+            raise
+        except (ArithmeticError, NotImplementedError, TypeError, ValueError) as exc:
+            raise ValidationError({"expression": "该计算暂时无法完成，请缩小表达式范围"}) from exc
+        return Response(payload)

docs/LOCAL_REALTIME_TEST.md

@@ -0,0 +1,132 @@
+# 本地实时 1v1 与联机码约战测试
+
+本指南用于在一台电脑上使用两个浏览器会话验证完整联机流程。
+
+## 1. 准备数据
+
+```bash
+make install
+make migrate
+make seed
+```
+
+种子数据会创建三个赛道的实时 1v1 比赛。本地邀请码为：
+
+```text
+HULU2026
+```
+
+## 2. 使用 ASGI 启动
+
+实时比赛依赖 WebSocket。不要使用普通 WSGI 服务测试联机。
+
+```bash
+make run-asgi
+```
+
+访问：
+
+```text
+http://127.0.0.1:8000/
+```
+
+本地没有配置 `REDIS_URL` 时会使用进程内 Channel Layer，适合单进程开发测试。生产环境必须使用 Redis。
+
+### 一键端到端验证
+
+保持 `make run-asgi` 运行，另开终端执行：
+
+```bash
+.venv/bin/python scripts/test_realtime_local.py
+```
+
+脚本会临时创建两个本地账号，通过真实 HTTP Session 和两个真实 WebSocket 完成：
+
+```text
+创建联机码
+→ 第二位玩家加入
+→ matched 状态推送
+→ 答题进度同步
+→ 第一位提交且不泄露答案
+→ 第二位提交
+→ completed 推送
+→ 胜负、Rating 和解析检查
+```
+
+结束后脚本自动清理临时用户和比赛记录。
+
+## 3. 准备两个独立登录会话
+
+使用下列任一组合：
+
+- Chrome 普通窗口 + 无痕窗口
+- Chrome + Safari
+- 两个不同浏览器 Profile
+
+两个窗口分别使用邀请码 `HULU2026` 注册不同账号。不要在同一浏览器 Profile 的两个普通标签页登录不同账号，因为它们会共享 Session Cookie。
+
+## 4. 联机码约战
+
+玩家 A：
+
+1. 打开“比赛”。
+2. 选择双方约定的赛道。
+3. 点击“创建当前赛道约战”。
+4. 复制 6 位联机码。
+
+玩家 B：
+
+1. 打开“比赛”。
+2. 输入联机码。
+3. 点击“加入约战”。
+
+预期结果：
+
+- 玩家 A 无需再次点击，自动进入答题。
+- 双方显示相同题目和同一个倒计时。
+- 任一方填写答案时，另一方看到答题数量变化。
+- 第一位提交者只看到“答案已锁定”，看不到正确答案。
+- 双方提交或倒计时结束后，同时展示胜负、双方分数、Rating 变化和题目解析。
+
+## 5. 随机匹配
+
+双方选择同一赛道并点击“开始匹配”。
+
+预期结果：
+
+- 第一位玩家进入等待状态。
+- 第二位玩家加入后，第一位玩家自动进入答题。
+- 私人联机码房间不会被随机匹配玩家加入。
+
+## 6. 断线与超时
+
+验证以下场景：
+
+1. 答题时短暂关闭网络，再恢复。
+2. WebSocket 断开后页面仍每 2 秒轮询比赛状态。
+3. 关闭其中一个窗口，另一方等待倒计时结束。
+4. 服务端到时后将未提交 Attempt 标记为过期并完成结算。
+5. 等待中的联机码 10 分钟后失效。
+
+## 7. 排查
+
+浏览器开发者工具应看到：
+
+```text
+WS /ws/v1/contest/matches/<match_id>/
+GET /api/v1/contests/matches/<match_id>/
+```
+
+检查 Redis：
+
+```bash
+redis-cli ping
+```
+
+检查 ASGI：
+
+```bash
+curl http://127.0.0.1:8000/health/
+```
+
+生产 Nginx 必须为 `/ws/` 设置 `Upgrade` 和 `Connection` 请求头。详见 `docs/DEPLOYMENT.md`。

requirements-dev.txt

@@ -3,3 +3,4 @@ pytest==8.3.5
 pytest-django==4.11.1
 pytest-cov==6.2.1
 ruff==0.11.13
+daphne==4.1.2

requirements.txt

@@ -8,3 +8,4 @@ mysqlclient==2.2.7
 whitenoise==6.7.0
 gunicorn==23.0.0
 uvicorn[standard]==0.30.6
+sympy==1.13.3

scripts/test_realtime_local.py

@@ -0,0 +1,241 @@
+#!/usr/bin/env python3
+import argparse
+import asyncio
+import http.cookiejar
+import json
+import os
+import sys
+import time
+import urllib.error
+import urllib.request
+from pathlib import Path
+from urllib.parse import urlparse
+
+from django.db.models import Q
+
+PROJECT_ROOT = Path(__file__).resolve().parent.parent
+sys.path.insert(0, str(PROJECT_ROOT / "backend"))
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
+
+import django  # noqa: E402
+
+django.setup()
+
+from django.conf import settings  # noqa: E402
+from websockets.asyncio.client import connect  # noqa: E402
+
+from accounts.models import User  # noqa: E402
+from contest.models import (  # noqa: E402
+    Contest,
+    ContestAttempt,
+    RatingHistory,
+    RealtimeMatch,
+)
+
+
+class ApiClient:
+    def __init__(self, base_url):
+        self.base_url = base_url.rstrip("/")
+        self.cookies = http.cookiejar.CookieJar()
+        self.opener = urllib.request.build_opener(
+            urllib.request.HTTPCookieProcessor(self.cookies)
+        )
+
+    def request(self, method, path, payload=None, extra_headers=None):
+        body = json.dumps(payload).encode() if payload is not None else None
+        headers = {"Accept": "application/json"}
+        if body is not None:
+            headers["Content-Type"] = "application/json"
+        csrf_token = self.cookie("csrftoken")
+        if csrf_token:
+            headers["X-CSRFToken"] = csrf_token
+        headers.update(extra_headers or {})
+        request = urllib.request.Request(
+            f"{self.base_url}{path}",
+            data=body,
+            headers=headers,
+            method=method,
+        )
+        try:
+            with self.opener.open(request, timeout=10) as response:
+                content = response.read()
+                if not content:
+                    return None
+                if "application/json" in response.headers.get("Content-Type", ""):
+                    return json.loads(content)
+                return content.decode()
+        except urllib.error.HTTPError as exc:
+            content = exc.read().decode()
+            raise RuntimeError(f"{method} {path} -> HTTP {exc.code}: {content}") from exc
+
+    def get(self, path):
+        return self.request("GET", path)
+
+    def post(self, path, payload, extra_headers=None):
+        return self.request("POST", path, payload, extra_headers)
+
+    def cookie(self, name):
+        return next((item.value for item in self.cookies if item.name == name), "")
+
+    @property
+    def cookie_header(self):
+        return "; ".join(f"{item.name}={item.value}" for item in self.cookies)
+
+
+async def receive_until(websocket, event_type, reason=None):
+    for _ in range(10):
+        payload = json.loads(await asyncio.wait_for(websocket.recv(), timeout=5))
+        if payload.get("type") == event_type and (
+            reason is None or payload.get("reason") == reason
+        ):
+            return payload
+    raise RuntimeError(f"未收到 WebSocket 事件: type={event_type}, reason={reason}")
+
+
+def websocket_url(base_url, path):
+    parsed = urlparse(base_url)
+    scheme = "wss" if parsed.scheme == "https" else "ws"
+    return f"{scheme}://{parsed.netloc}{path}"
+
+
+async def run_flow(base_url, first_client, second_client, contest):
+    created = first_client.post(
+        f"/api/v1/contests/{contest.slug}/challenges/",
+        {},
+    )
+    code = created["challenge_code"]
+    print(f"[1/7] 玩家 A 创建联机码: {code}")
+
+    async with connect(
+        websocket_url(base_url, created["websocket_path"]),
+        additional_headers={"Cookie": first_client.cookie_header},
+        open_timeout=10,
+    ) as first_socket:
+        await receive_until(first_socket, "connected")
+        joined = second_client.post(
+            "/api/v1/contests/challenges/join/",
+            {"challenge_code": code},
+        )
+        await receive_until(first_socket, "state", "matched")
+        print("[2/7] 玩家 B 加入，玩家 A 收到 matched 事件")
+
+        first_state = first_client.get(
+            f"/api/v1/contests/matches/{created['match_id']}/"
+        )
+        if first_state["status"] != "active":
+            raise RuntimeError("匹配后状态不是 active")
+
+        async with connect(
+            websocket_url(base_url, joined["websocket_path"]),
+            additional_headers={"Cookie": second_client.cookie_header},
+            open_timeout=10,
+        ) as second_socket:
+            await receive_until(second_socket, "connected")
+            await first_socket.send(
+                json.dumps({"type": "progress", "answered_count": 1})
+            )
+            progress = await receive_until(second_socket, "progress")
+            if progress["answered_count"] != 1:
+                raise RuntimeError("答题进度同步失败")
+            print("[3/7] 两个 WebSocket 已连接，答题进度同步成功")
+
+            first_attempt = first_state["attempt"]
+            second_attempt = joined["attempt"]
+            first_answers = [
+                {"order": item["order"], "answer": "0"}
+                for item in first_attempt["questions"]
+            ]
+            second_answers = [
+                {"order": item["order"], "answer": "0"}
+                for item in second_attempt["questions"]
+            ]
+            first_result = first_client.post(
+                f"/api/v1/contests/attempts/{first_attempt['attempt_id']}/submit/",
+                {"answers": first_answers},
+                {"Idempotency-Key": f"local-first-{created['match_id']}"},
+            )
+            if first_result["status"] != "active":
+                raise RuntimeError("首位玩家提交后比赛不应立即完成")
+            if "correct_answer" in first_result["attempt"]["questions"][0]:
+                raise RuntimeError("首位玩家提前看到了正确答案")
+            await receive_until(second_socket, "state", "submitted")
+            print("[4/7] 玩家 A 提交后答案锁定，未提前泄露正确答案")
+
+            second_result = second_client.post(
+                f"/api/v1/contests/attempts/{second_attempt['attempt_id']}/submit/",
+                {"answers": second_answers},
+                {"Idempotency-Key": f"local-second-{created['match_id']}"},
+            )
+            if second_result["status"] != "completed":
+                raise RuntimeError("双方提交后比赛没有完成")
+            await receive_until(first_socket, "state", "completed")
+            print("[5/7] 玩家 B 提交后双方收到 completed 事件")
+
+            final_state = first_client.get(
+                f"/api/v1/contests/matches/{created['match_id']}/"
+            )
+            if "correct_answer" not in final_state["attempt"]["questions"][0]:
+                raise RuntimeError("完成后没有公开题目解析")
+            if final_state["result"] is None:
+                raise RuntimeError("完成后没有胜负与 Rating 结果")
+            print("[6/7] 最终比分、Rating 和题目解析均可读取")
+    print("[7/7] 本地联机码约战端到端测试通过")
+
+
+def cleanup(users):
+    user_ids = [user.id for user in users]
+    matches = RealtimeMatch.objects.filter(
+        Q(player_one_id__in=user_ids) | Q(player_two_id__in=user_ids)
+    )
+    match_ids = list(matches.values_list("id", flat=True))
+    ContestAttempt.objects.filter(
+        Q(user_id__in=user_ids) | Q(match_id__in=match_ids)
+    ).delete()
+    RatingHistory.objects.filter(match_id__in=match_ids).delete()
+    matches.delete()
+    User.objects.filter(id__in=user_ids).delete()
+
+
+def main():
+    parser = argparse.ArgumentParser(description="本地实时联机码约战端到端测试")
+    parser.add_argument("--base-url", default="http://127.0.0.1:8000")
+    args = parser.parse_args()
+    hostname = urlparse(args.base_url).hostname
+    if not settings.DEBUG or hostname not in {"127.0.0.1", "localhost"}:
+        raise RuntimeError("该脚本只允许在 DEBUG=true 的本机地址运行")
+    stamp = str(int(time.time() * 1000))
+    password = "LocalRealtime2026!"
+    users = [
+        User.objects.create_user(
+            username=f"local_ws_a_{stamp}",
+            password=password,
+            nickname="本地联机 A",
+        ),
+        User.objects.create_user(
+            username=f"local_ws_b_{stamp}",
+            password=password,
+            nickname="本地联机 B",
+        ),
+    ]
+    try:
+        contest = Contest.objects.filter(
+            kind=Contest.Kind.REALTIME,
+            status=Contest.Status.PUBLISHED,
+            track="standard",
+        ).first()
+        if contest is None:
+            raise RuntimeError("缺少标准赛道实时比赛，请先执行 make seed")
+        clients = [ApiClient(args.base_url), ApiClient(args.base_url)]
+        for client, user in zip(clients, users):
+            client.get("/")
+            client.post(
+                "/api/v1/accounts/login/",
+                {"username": user.username, "password": password},
+            )
+        asyncio.run(run_flow(args.base_url, clients[0], clients[1], contest))
+    finally:
+        cleanup(users)
+
+
+if __name__ == "__main__":
+    main()