轻约 · 门店预约系统（用户端 H5 + 商家后台）产品系统Vibe Coding

美业门店的预约长期靠微信和电话，前台要反复确认时间、手写记档，顾客到店后经常撞在同一时段，造成排队和流失；老板也很难一眼看出当天到底排了几个人、能收多少钱。

本项目把「选日期 → 选服务 → 选时段 → 留联系方式」做成一条 4 步流程，用「每个时段限 2 位」的容量模型从源头避免撞单，并给商家一个后台集中查看当日预约、标记完成或取消。

面向的是理发店、美容院、摄影工作室这类 1–3 家店的小微门店：不需要装 App，手机浏览器打开即用，商家用电脑网页管理。

【用户端 · 手机 H5】
1. 日期选择：展示未来 7 天，自动标注「今天 / 明天 / 周几」；
2. 服务选择：4 个服务项目，显示价格、耗时与「人气 / 推荐」标签，选中态高亮；
3. 时段选择：10 个时段按容量计算余位，已约满或已过时间的时段自动置灰、不可点击；
4. 提交预约：校验称呼（至少 2 字）与 11 位手机号，提交后立即出现在「我的预约」；
5. 我的预约：显示「待服务 / 已完成 / 已取消」状态，可一键取消，取消后该时段自动释放给别人。

【商家后台 · 电脑网页】
1. 日期切换：可查看今天至未来 30 天的预约；
2. 统计卡：当日预约数、待服务、已完成、预计营收四个指标；
3. 预约明细表：按时间排序，支持「全部 / 待服务 / 已完成 / 已取消」筛选；
4. 行内操作：标记完成、取消，操作后用户端看到的状态实时同步。

我负责需求定义、页面结构、交互规则和最终验收，代码在 AI（DeepSeek + Agent 工具）辅助下完成，属于平台定义的 Vibe Coding 项目。

技术栈：原生 HTML5 + CSS3 + JavaScript，无框架、无构建、无第三方依赖；数据用 localStorage 持久化，不需要后端即可完整走通流程。

实现上分三层：
① 数据层 js/store.js —— 把所有业务规则收敛在一处：容量控制「未过时间 且 已约人数 < 2」、取消后释放时段、统计只计非取消记录；
② 用户端 js/user.js —— 四步流程渲染、时段可用性计算、手机号正则 /^1[3-9]\d{9}$/ 校验、提交与列表联动；
③ 后台 js/admin.js —— 日期与状态筛选、统计卡聚合、行内状态流转。

踩过的坑：
1. 移动端窄屏下日期与时段会横向撑破布局，改为固定宽度 + overflow 滚动容器，并用 390px 视口逐项校准；
2. 「取消后名额释放」如果只在页面层处理，很容易出现同一时段被重复占用，所以把容量判断统一放进数据层用小函数计算；
3. 截图还原：无头浏览器默认视口受系统 DPI 影响对不上，最后用 Chrome DevTools Protocol 设定精确视口再截图。

验证：写了 tools/selftest.cjs，用内存对象模拟 localStorage，覆盖「创建预约 / 满员拦截 / 取消释放 / 完成计入营收」等 7 项断言，全部通过；页面用本地 Node 静态服务器预览，用户端与后台共用同一份数据，两边状态实时一致。