寒假的时候,我重新打磨了一个老项目——一个在线排座分组工具。这个工具其实几个月前我就做过一版,当时觉得"能用就行",扔在服务器上就没再管。但用着用着问题就冒出来了:界面丑得像上个世纪的网页,排和列的概念也反直觉,每次都得先解释半天"这个按钮是干嘛的"。能用的工具和好用的工具,中间确实差着十万八千里。所以这个寒假我决定重写它。

首先是视觉重构。旧版就是一堆方格子,没有空间感。新版明确标注了讲台位置,排数从讲台开始往上数,符合真实教室的视角,1到7列、1到6排的刻度也清晰可辨,选中状态有明确的视觉反馈。设计原则很简单:老师打开页面,3秒内就能理解这是什么、怎么用。

然后是响应式适配。旧版在手机上完全崩坏,新版用CSS Grid和Flexbox重新布局,手机竖屏也能正常操作,平板、电脑自适应,触控和鼠标都友好。现在老师可以在课间用手机快速调座位,不用非得回办公室开电脑。

交互上也做了不少优化。排错了不用一个个取消,可以一键重置;选了几个座位实时显示,避免数错人数;重要的操作需要确认,手滑不会前功尽弃。

技术层面也还了债。旧代码全局变量满天飞,DOM操作直接硬编码,几乎没有任何状态管理。这次重写虽然还是纯前端,但把状态和视图分离。此前上线的这个工具我做了云端存储功能(账号系统),但是发现有20多位用户注册,但未有任何数据通过云端保存,所以这次的优化我砍掉了账号系统,目前此项目只有纯前端实现,后续可能会增加保存到云端后返回代码,通过代码可以从云端下载上传的数据,但也有可能就这样了,就作为纯静态项目算了。

打磨过程中有几个关键决策。我考虑过加入自动排座算法,按成绩、性别、性格自动优化,但调研后发现每个老师的规则都不一样,真实场景有太多“人情世故”,某学生必须坐前排、某两人绝对不能同桌。工具应该辅助决策,而不是替代决策,手动灵活调整比僵硬的“智能”更实用(虽然但是,我还是提供了虚假的“智能排座”哈哈哈哈 派大星_StarPatrick-11)。

我也想过做成登录系统、保存历史、云端同步(其实这些旧版本是有的,但最终还是被我优化掉了),但这会增加使用门槛,提高维护成本,而核心场景其实是“排一次,截图发群里或直接打印出来”,不需要持久化。技术选型要为场景服务,不是越复杂越好。

关于7列乘6排的默认值,这是调研了我自己班级之后定的派大星_StarPatrick-0。普通教室最大约8乘6等于48人,大班额控制在56人以内,7乘6等于42人覆盖95%的场景。留一点余量,但不做无限扩展,约束本身就是设计。

现在工具进入了可持续维护的状态。可能的小改进包括支持从剪贴板粘贴学生名单、生成分享链接、深色模式,但核心定位不变:简单、快速、零门槛。


开源地址:puresky/Seat · Cloud Native Build

排座分组工具地址:Seat

工具截图: