作品介绍
「课后 30 秒」，一个跑在教室大屏上的即时反馈小工具。老师临下课前打开它，下课铃一响，大屏自动弹出一页匿名调查——不需要手机、不需要扫码，学生利用课间走到教学电子屏前，直接点选「听懂了 / 有点懵 / 没听懂」，顺手勾一下哪个知识点最困惑。反馈实时滚上大屏，调查结束自动生成一份课堂总结，再送上一段写给老师的教师节彩蛋动画。
整个界面是一套「深夜自习室」视觉：深蓝格点纸底、荧光黄划重点、手写批注，连三个状态表情都是一套手绘的马克笔涂鸦脸——投在教室大屏上，最后一排也看得清那个发着光晕的听懂率。
整个系统不注册、不联网也能用，数据存在本机，打开就是一节课。
为什么要做这个
每个老师都经历过这种时刻：一节课讲完，问一句「听懂了吗」，台下安安静静。有人是真懂了，有人是不好意思说，还有人是连问题都说不清。等到批作业、月考才发现问题，已经迟了。
我想做的，就是把「听懂了吗」变成了一个 30 秒就能完成的动作，顺手再给老师省下课后整理反馈的功夫。正好赶上教师节，与其只说一句「老师辛苦了」，不如做一个真的能帮上忙的小工具——这就是「课后 30 秒」的由来。
能做什么？
教师大屏：课堂看板
大屏是整节课的驾驶舱。中间一个理解度圆环，旁边三条状态条分别显示「听懂了 / 有点懵 / 没听懂」的人数和百分比，底部有全班已反馈进度；右边是实时反馈墙——每一条提交都会即时滚进来，高频困惑关键词同步聚合。数据走 SSE 实时推送，不是前端装出来的数据。
配套了几个演示友好功能：模拟学生反馈逐条插入合理样例，自动演示模式按节奏连续模拟，方便录制演示视频；模拟数据带「模拟」标签，和真实提交严格区分。
下课铃响：全屏调查自动弹出
老师点一下「下课 · 弹出课间调查」，大屏瞬间切换成一页全屏匿名调查：三张带手绘表情的大卡片，字大到教室最后一排都看得清。学生利用课间走到屏幕前——点一下自己的状态，可选勾一个最困惑的知识点、补一句困惑，提交即可。
不需要二维码，不需要手机，不需要登录。教室里的教学电子屏，本身就是最好的答题入口。
一块屏收完一个班
提交后出现一个带向日葵的谢谢页，两秒多自动重置回空白调查页——下一位同学直接接着点。完全匿名、不记录任何身份信息，一块屏几分钟就能收完全班。老师随时可以「收起看板」回到看板页，看着圆环、反馈墙和高频困惑实时变化（按 Esc 也行），再一键「重新弹出课间调查」继续收。
结束调查：自动总结 + 教师节彩蛋
结束调查后，本地总结引擎自动生成报告：理解度分布、高频困惑关键词、最困惑的知识点（结合知识点标签聚合）、下节课复习建议。总结不依赖任何外部服务，开箱即用；同时预留了 OpenAI 兼容的 AI Provider 接口，接上 Key 优先用大模型总结，失败自动回退本地规则，核心流程不会断。
结束调查的那一刻，会播一段约 10 秒的教师节结束动画：夜幕落下，手写一笔一划写下「老师，辛苦了。」，接着是三行小诗，最后满屏反馈卡片汇聚成「谢谢老师」。可以跳过，也可以随时重播。
成果展示
体验方式
本地运行：
npm install
npm run dev # 开发模式：前端 5173 + API 3001
# 或者生产模式（单端口，更适合投屏演示）
npm run build
npm start # 打开 http://localhost:3001
投屏演示：把电脑接到教室大屏（或直接在触控一体机上打开 http://localhost:3001），建好课进大屏，点「下课 · 弹出课间调查」就是学生答题页。一个人演示时，用「模拟学生反馈」和「自动演示」就能完整跑通从收集到总结的全流程。
3 分钟演示脚本（可照着走）
- 首页 →「老师，开始一节课」→ 直接用预置的演示数据创建（二次函数与图像 / 高一（3）班 / 35 人）
- 在大屏看板点几次「模拟学生反馈」，让理解度圆环、反馈墙、高频困惑先动起来
- 点「下课 · 弹出课间调查」——全屏匿名调查自动出现
- 当一回学生：点「有点懵」→ 勾「二次函数顶点」→ 补一句「顶点公式讲得有点快」→ 提交，谢谢页约 2.5 秒自动重置
- 点「收起看板」（或按
Esc），看实时数据的变化，再点「重新弹出课间调查」继续收集 - 点「结束调查 · 生成总结」→ 确认 → 看完教师节结束动画，进入课堂总结页
创作分享
这个项目可以说是「边试边长」出来的，从需求到现在的样子，全是和 TraeCode 一句一句聊出来的。
收集方式就推翻过三次。第一版是学生手机扫码，但马上想到：不是每个学生都带手机，很多老师也反感课堂用手机，于是加了一套大屏键盘代录。聊到第三版的时候突然想通了一件事——教室里那块电子白板，本身不就是最好的答题入口吗？手机、二维码、键盘全是中间层。现在的版本是：下课后大屏自动弹出调查，学生走过来点一下就走，提交自动重置，一块屏收完一个班。做完全流程试了一遍，那种「整个班排队点大屏」的画面感，比任何收集方式都自然。
UI 也是推翻重来过的。第一版是黑板、牛皮纸加胶带的混搭，脏脏的棕色配手写体全堆在一起，怎么看都像没认真打扮的 demo。第二版换成「墨绿黑板 + 粉笔白」干净了很多，但还是不够特别。最终定稿成一个「深夜自习室」的视觉体系：深蓝格点纸底、荧光黄划重点、荧光绿和霓虹粉做状态色，标题用站酷庆科黄油体，批注和分数用龙藏手写体，连状态表情都是一套手绘的马克笔涂鸦脸。投影到教室大屏上，最后一排也能看清那个带光晕的听懂率。
踩坑也不少，印象最深的是 SSE 连接和演示数据打架：一开始模拟反馈和真实反馈混在一个流里，提交完发现大屏上"多出"几个人，一度以为是并发 bug，后来给数据加了来源标记（学生 / 教师 / 模拟），三者在统计里明确区分，问题才消失。修这个的时候才意识到，课堂场景里"真实和演示边界清晰"有多重要——老师拿着它上课，绝不能看到假数据混进来。
整段过程只想说一句：vibe coding 的乐趣，就是看着一个想法从一句话慢慢长成一个能用的东西，而这东西真的能被拿去帮老师省下三分钟。
TraeCode 创作过程截图：
