Quiz App 4.1.0 的整体架构
Quiz App 4.1.0 的定位是一套离线可用的刷题 PWA。用户第一次加载后，题库、练习记录和会话数据都可以保存在浏览器本地；联网时再把题库和进度同步到云端。这个目标决定了它不是传统“前端只负责展示”的应用，而是一个以浏览器为主要运行环境的小型学习系统。
技术栈最终落在 React 19、TypeScript 6、Vite 8、Ant Design 6、Dexie、Supabase 和 Cloudflare Pages Functions。前端负责大部分交互和离线能力；IndexedDB 负责本地持久化；Supabase 提供账号、题库审核和多端进度；Cloudflare Pages Functions 负责部署环境里的接口转发和 AI 格式整理入口。
分层方式
项目可以按五层理解：PWA Shell、React UI、Hooks、Utils 和 Data Layer。PWA Shell 处理 Service Worker、缓存策略和更新提示；UI 层包括首页、题库详情、练习页、导入弹窗和管理后台；Hooks 层承接刷题会话和响应式查询；Utils 层负责解析、判题、统计和自动挖空；Data Layer 则用 Dexie 管理 IndexedDB 表。
PWA Shell
React UI: Home / BankDetail / Practice / AdminDashboard
Hooks: useQuizSession / useLiveQuery
Utils: parsers / quiz engine / cloze / stats
Data: Dexie banks / questions / sessions / answers / userProgress为什么不是全后端
刷题应用有一个很强的本地使用场景：导入题库后，用户可能在地铁、教室、手机桌面 PWA 里反复刷题。把核心能力放在浏览器里，可以让离线体验更自然，也减少服务器压力。云端只接管真正需要共享的部分：账号、审核后的题库、跨设备进度和管理后台。
关键选型
- React 19：组件生态成熟，适合复杂交互。
- TypeScript 6：题型、题库和练习记录都需要明确类型。
- Dexie：比直接操作 IndexedDB 更可读，并支持响应式查询。
- Supabase：用 PostgreSQL、Auth 和 RLS 快速补齐云端能力。
- Cloudflare Pages Functions：让静态部署也能拥有少量后端能力。
这套架构的重点不是“堆技术”，而是让离线、本地数据、云端同步和管理能力各自待在合适的位置。