前言
教育信息化解决方案通常面临两个矛盾：功能丰富 vs 使用简单，付费盈利 vs 教师预算。拾趣课堂是一个面向中小学及幼教教师的课堂工具平台，试图在这两个矛盾中找到平衡点。
本文从教育 SaaS 工具平台的技术选型和课堂工具产品设计角度，拆解这个平台的 6 款工具。
技术栈概览
| 层级 | 技术选型 |
|---|---|
| 后端框架 | Laravel 12（PHP 8.2+） |
| 前后端桥接 | Inertia.js 2.x |
| 前端框架 | Vue 3.5+ / TypeScript 5.x |
| 构建工具 | Vite 6 |
| 样式方案 | Tailwind CSS 3.x |
| 组件库 | shadcn-vue（radix-vue 底层） |
| 数据库 | MySQL 8（ULID 主键） |
| 缓存/队列 | Redis 7 |
| 后台管理 | Filament 5.4 |
关键架构决策：前后端通过 Inertia 通信，不走 REST API。所有业务表使用 ULID 主键（防枚举），带模块前缀（seat_、pick_、pet_ 等）。免费工具不加 auth 中间件，登录后功能才加。部署目标是 3M 弱网环境下页面数据 < 50KB。
工具一：课堂倒计时——纯前端实现怎么做到沉浸式？
定位：零门槛入口工具，纯前端实现，无后端数据。
技术方案：
- SVG 圆形进度环（
CircularProgress组件），三段弧线 + 渐变色 + 辉光效果 - 色调四段联动：青蓝（运行）→ 琥珀（最后 30 秒警示）→ 粉红脉冲（最后 10 秒紧急）→ 翠绿（结束）
- 等宽数字字体，尺寸随屏幕自适应
- 全屏 API 封装（
F键触发），桌面双栏 / 移动端单栏响应式布局 - 键盘事件监听：Enter 开始/暂停，Space 重置
useAlertSound组合式函数管理到时提示音（可开关）- 内置 JSON-LD 结构化数据 + FAQ 长文（SEO 用途）
- 6 个快捷预设（1/5/10/15/20/45 分钟） + 自定义最大 999 分钟
Inertia.js 全栈实践的角度：这个工具不走 Inertia 数据流，是纯静态页面 + 前端状态管理的典型模式。
工具二：随机点名——前端动画密集型工具的实现
定位：课堂互动工具，前端动画密集。
技术方案：
- 老虎机式 11 卡片槽位滚动（CSS transform + requestAnimationFrame）
- 中心卡片放大聚焦 + 周围模糊淡出
- 10 级拨盘调速控制
- 停止机制：3 秒减速过渡 → 锁定候选人 → 倒数 3-2-1 → 揭晓
- 庆祝动画：粒子喷发（6 种星形符号 × 6 色）+ 双层彩纸雨
- 音效系统：滚动音 + 揭晓音 + 庆祝音
- 双数据源架构：粘贴名单（
localStorage临时存储，免登录） + API 关联班级花名册 - 防重复标记 + 手动重置
- 随机头像分配（6 色 × 表情风格）+ 100 张趣味配图
- 数据模型：
pick_records表记录点名历史
Vue3 教育应用开发中的实践：用 requestAnimationFrame 驱动动画而非 CSS animation，可以精确控制 10 级速度和减速曲线。
工具三：智能排座——前端拖拽 + 后端持久化
定位：班级管理工具，前端重交互 + 后端数据持久化。
技术方案：
- 自动排座算法：按身高排座 / 随机排座两种模式
- 约束条件叠加：近视学生优先靠前、男女交替排列
- HTML5 Drag & Drop API：拖动学生卡片到目标座位即可交换
- 座位锁定状态管理（锁定座位不参与重排）
- 可调网格：行列 1~12
- 快照系统：同一班级保存多个方案，自由切换
- 1 秒防抖自动保存到后端
- Excel 导入导出（xlsx 库解析）
- 数据模型：
seat_plans+seat_assignments表 - 学生资料字段：性别、身高（精确值或矮/中/高分组）、近视标记
- 视觉：大画布式布局（左侧座位面板 + 右侧操作侧边栏），讲台在顶部
工具四：班级灵兽积分——最复杂的模块怎么设计数据模型？
定位：游戏化积分激励系统，系统复杂度最高。
数据模型（模块前缀 pet_）：
pet_classrooms：积分教室配置pet_students：积分学生pet_beasts：灵兽实体（级别/元素/经验值/状态）pet_point_records：积分流水（加分/减分/规则关联）pet_rules：自定义评分规则（分类/分值/描述）pet_shop_items：商城道具pet_codex_entries：图鉴条目pet_groups：小组分组
核心养成机制：
- 六级成长：Lv1 未化灵 → Lv2 幼灵兽 → Lv3 觉醒灵兽 → Lv4 高阶灵兽 → Lv5 传说灵兽 → Lv6 至尊灵兽
- 高级族系：毕业条件满足后解锁神兽路线（幼神兽 → 至尊神兽）
- 七元素属性：火/冰/光/影/电/晶/草（觉醒时选择，影响外观和图鉴分类）
- 事件驱动：积分变更 → 检查进化条件 → 触发召唤/觉醒/进化/毕业
- 毕业流程：Lv6 后教师确认毕业 → 图鉴封存 → 释放槽位
积分管理设计决策：
- 草稿机制：先选规则攒草稿，再批量提交（减少误操作）
- 正负分排序：负分先结算，确保扣分优先生效
- 撤回：误操作可及时撤回
- 个人/小组双模式
扩展系统：
- 商城：「鸡腿」兑换权益和道具，库存管理、周上限
- 命名权：兑换后给灵兽起名（最多 12 字）
- 情绪系统：连续减分或长期无加分 → 灵兽难过 → 加分恢复
- 图鉴：Lv3 起记入，按族系+属性+阶段解锁
- 排行榜：全班排名，TOP 1/2/3 金银铜徽章
- 分享：只读链接给学生和家长
- 学期管理：学期切换，数据归档
- 建班模板：学期个人版 / 学期小组版 / 短期冲刺版
前端核心组件：PetStudentCard / PetScoreDialog / PetSummonDialog / PetAwakenDialog / PetEvolutionOverlay / PetGraduateCeremonyOverlay
工具五：教师 MBTI 人格测试——纯前端传播型产品
定位：社交传播工具，纯前端实现，无后端数据。
技术方案：
- 五维模型：圣母心/结界力/强迫值/脸皮厚度/整活指数
- 双版本：教师版（班主任/非班主任 + 彩蛋「体育老师」）/ 幼教版（主班/配班 + 彩蛋「全园万能胶」）
- 25 道场景题 + 最多 2 道隐藏灵魂拷问题（特殊条件触发）
- 18 种人格画像映射（含 2 种隐藏人格）
- 选项随机化：每次答题选项顺序随机
- 进度持久化：
localStorage存进度，刷新不丢 - 结果展示：匹配度百分比 + 命中维度数 + SVG 五维雷达图
- 海报生成：Canvas API（
drawTeacherMbtiPoster）+ PNG 下载 - 分享：URL hash 编码结果（
buildTeacherMbtiHash/parseTeacherMbtiHash） - 事件追踪：
trackTeacherMbtiEvent页面访问统计
工具六：教师资源库——Filament 后台驱动的内容模块
定位：内容聚合，Filament 后台管理 + Inertia 前端渲染。
数据模型：res_articles / res_categories 表。分类导航 + 文章卡片 + 分类主题色。
架构总结：教育 SaaS 的松耦合工具集模式
拾趣课堂的架构遵循一个原则：工具层各管各的表，平台层只存最少数据。每个工具有独立的数据模型和业务逻辑，通过 classroom_id 关联到平台层的班级和学生。
这种架构的优势：新工具可以独立开发，不影响已有工具。劣势：跨工具数据聚合需要额外处理。
对于教师数字化工具技术栈的选择来说，Inertia.js 2.x 作为全栈桥接层解决了传统 SPA 和多页应用之间的矛盾：不需要写 REST API，但前端依然是 Vue 3 的完整 SPA 体验。配合 ULID 主键和模块前缀表命名，实现了多工具并行开发的工程规范。
