基于 UniApp + Vue 3 + TypeScript 构建的跨平台移动应用,支持微信小程序和 H5,面向学生、教师和裁判提供赛事参与和管理功能。
功能特性
学生端
**赛程查询** - 查看赛事日程和比赛安排
**在线报名** - 浏览项目并提交报名申请
**成绩查询** - 查看个人成绩和排名
**排行榜** - 查看班级和全校排名
### 教师端
**班级管理** - 管理班级学生信息
**签到管理** - 现场签到和统计
**数据统计** - 查看班级参与情况和成绩
### 裁判端
**任务列表** - 查看分配的裁判任务
**成绩录入** - 径赛/田赛成绩录入
-**检录管理** - 运动员检录确认
技术栈
| 技术 | 版本 | 用途 |
|------|------|------|
| [UniApp](https://uniapp.dcloud.net.cn/) | 3.0+ | 跨平台框架 |
| [Vue 3](https://vuejs.org/) | 3.4+ | 前端框架 |
| [TypeScript](https://www.typescriptlang.org/) | 5.8+ | 类型系统 |
| [Vite](https://vitejs.dev/) | 5.2+ | 构建工具 |
| [UnoCSS](https://unocss.dev/) | 66.0 | 原子化 CSS |
| [Pinia](https://pinia.vuejs.org/) | 2.0+ | 状态管理 |
| [Alova](https://alova.js.org/) | 3.3+ | 请求管理 |
| [Sard UniApp](https://sard.sutras.me/) | latest | UI 组件库 |
| [Day.js](https://day.js.org/) | 1.11+ | 日期处理 |
难点:管理后台、小程序、后端 API 三端数据结构不一致,导致联调成本高、类型错误频发。
解决方案:
- Monorepo 架构 + packages/shared 共享类型包
- Orval 自动生成 API 客户端
- TypeScript 严格模式覆盖全项目
// packages/shared/src/types.ts - 8种角色统一定义
// apps/web_v3/services/orval/generated/ - 自动生成 API 客户端
---
2. 租户隔离与权限控制(8种角色)
难点:多租户数据隔离、8种角色的复杂权限矩阵、越权访问风险。
解决方案:
- 中间件链:tenant + auth + roleCheck
- 基于 X-Org-Id header 的租户上下文隔离
- Prisma 层面自动注入租户过滤
// apps/api_v2/src/middleware/tenant.ts
// apps/web_v3/stores/auth.ts - 前端权限控制