Seating Planner | 座位编排工具

一个面向教学场景的座位编排工具:拖拽排座、随机分配、环境标签、行列分组间隙,并支持把编排结果导出为图片。界面风格清爽、严肃、实用,无渐变与深色赛博风。

• 双布局模式:顶栏可切换「侧边栏」(左列表 / 中教室 / 右设置)与「底部栏」(上教室 / 下分栏),底部栏支持水平拖拽条调高度、垂直拖拽条调左右面板宽度比。
• 学生名单:
  • 「编辑名单」弹窗,一行一个、按行序排列;支持 .txt/.csv 文件载入;可一键「生成 1~N 序号」占位。
  • 重名自动以 -1、-2 区分。
  • 内置约 48 人中文示例名单。
• 学生列表面板:选项卡直接带计数(全部 / 未排 / 已排),姓名搜索,卡片网格;支持拖拽排座、双击卡片移回列表。
• 教室网格:
  • ×ばつ3 布局,四角与上下左右共 8 个环境标签槽(讲台、黑板、门、窗、空调、教师桌、电视、书柜、自定义),讲台高亮,左右标签竖排。
  • 座位按行/列动态生成;支持列间隙与行间隙(大组分组)。
  • 空座浅灰边框,已排座青底白字、姓名水平垂直居中,座位右上角显示座位号,禁用座显示斜纹。
• 座位交互:
  • 单击座位弹出两级浮层:一级姓氏网格(按拼音排序)→ 二级该姓学生列表,点击即排座/交换;浮层内部点击不误关。
  • 右键座位切换禁用状态。
  • 拖拽:从学生列表拖到座位、或在已占座位间互拖,自动排座或交换。
• 设置面板:行数(1–20)/列数(1–20)/座位大小(50–140) 步进器(改行列自动清理越界排座与禁用);列/行间隙按钮组;间隙宽度滑块(10–80);快捷操作(禁用四周 / 启用所有 / 清除所有间隙)。底部栏下设置面板宽度上限 325px。
• 顶栏操作:布局切换、编辑名单、随机分配、清空座位、导出 JSON、导出图片(PNG,纯前端 SVG+canvas 实现,保留中文姓名)。

app/
 layout.tsx # 根布局(metadata、全局样式)
 page.tsx # 入口,渲染 <SeatingApp />
 globals.css # Tailwind + 设计令牌 + 禁用座斜纹 + 打印规则
components/
 SeatingApp.tsx # 总编排:DndContext、布局切换、拖拽逻辑、浮层/弹窗挂载、缩放归一化
 Topbar.tsx # 顶栏
 StudentList.tsx # 学生列表(统计+搜索+选项卡+卡片)
 SeatGrid.tsx # 教室网格 + 环境标签槽 + 座位
 SeatPopover.tsx # 座位两级浮层
 SettingsPanel.tsx # 设置面板
 ImportModal.tsx # 编辑名单弹窗
 LabelModal.tsx # 环境标签选择弹窗
 Toast.tsx # 轻提示
 icons.tsx # 内联 SVG 图标
store/
 useSeatingStore.ts # Zustand 全局状态与所有动作
lib/
 constants.ts # 类型、标签定义、示例名单、拼音姓氏排序
 exportImage.ts # 座位图导出 PNG

本 README 文档由 AI 辅助生成。如有问题,请提交 Issue 或与我联系!