一、我做了什么
一个按中国式饭局座次规矩自动排座的纯前端工具：填好宾客名单，引擎按“门位、主陪、主宾、尊序、老幼照顾”等规矩一键落座，每一座还会告诉你为什么这么排，最后导出一张“座次金榜”图片，直接发家庭群。
核心功能：
· 宾客案头卷：主方客方、辈分身份、年龄段、忌口备注，主陪副陪一枚朱砂小印指定
· 一键按规矩排座：6至12座任意桌型全自动落位，人数变化自动扩桌
· 每座都有“为什么”：点席位卡弹出排座缘由和照顾提示（宜近门侧、宜邻家长）
· 座次规矩小课堂：右栏展示本次命中的规矩并高亮，边排边学
· 拖拽点选互换：主人最后拍板，两座互换、随时撤销
· 导出座次金榜：纯本地绘制图片，家庭群里各自认座
· 草稿自动保存：名单座次存本机，关页不丢
二、灵感来自什么真实场景
每年中秋国庆家宴，开饭前总有五分钟的全民难题：主位是谁的？主陪副陪怎么定？舅舅和姑父谁坐上座？奶奶腿脚不便，要坐离门近的……
其实中国式饭局的座次是有规矩的：一号位居十二点门位、主陪正对门、主宾坐主陪右侧、顺时针按尊序递增。这些规矩口口相传，年轻人基本不会。
本作未认领具体评论，灵感来自自家团圆饭的真实场景，正好对应本次活动“团圆聚会：家庭聚餐安排”的方向。
三、它解决了什么假期问题
不会排——年轻人不懂规矩，引擎按规矩自动落座，还在“规矩小课堂”里讲明白；
不敢排——排错了怕长辈说，每一座都给出缘由，有据可依；
不好改——现场临时来人缺席，名录即时改、拖拽换座、撤销兜底；
说不清——群里通知谁坐哪费劲，一张金榜图发群，各自认座。
四、作品截图与体验方式
图1:首页排座
图片2:按照图1排列出座位的位置
图片3：可导出png、一键重新排序、撤销上一步的调座位的功能
体验方式：下载帖子附件“团圆桌-家宴座次大师.zip”，解压后双击 index.html 即可运行——无需安装、无需联网、数据不出本机。
特别说明：本帖附可完整运行的 Demo（HTML+JS，零依赖），含运行截图与可下载附件，符合活动有效作品标准。
团圆桌.zip (47.7 KB)
五、使用 TraeCode 创作的过程（关键步骤）
第一步，把规矩变成规格。先把中国式饭局座次规矩整理成枚举与约束（门位、主副陪、尊序、照顾规则）写进需求，再让 TraeCode 实现，而不是让它自由发挥，规则引擎一次成型。
第二步，引擎纯函数化。要求排座引擎无副作用、界面层只做渲染，6至12座几何建模自洽，后续改交互零风险。
第三步，让 AI 当项目经理。用智能体通读全部代码做对齐评审，输出问题清单——它揪出了“输入时丢焦点、打断中文输入法”这种演示必翻车的 bug。
第四步，浏览器自动化验收。修复后用浏览器智能体实测验收：焦点保留、键盘流程闭环、断点无溢出，拿到证据再收工。
第五步，主动祛“AI 味”。AI 默认爱堆彩色浅底和渐变，我在“宣纸白描”约束下调色：彩色只做描边与字，大面积一律纸色墨线，更像老印刷品。
附：技术架构
团圆桌
├ index.html（页面结构与样式，CSP 安全加固）
└ js
├ rules.js（常量、工具、本地存储消毒白名单）
├ seats-engine.js（座次规则引擎，纯函数）
└ app.js（应用主控：渲染、交互、拖拽、导出）
零依赖、零构建、零外网请求；全量转义防注入；席位键盘可达、弹层焦点圈闭、跟随系统减弱动效、移动端三断点自适应。