如山：宝宝打卡数据管理后台

打开 如山 →

家里有了小朋友之后，喝奶、睡觉、换尿布、体温、体重这些琐碎的数据，靠脑子记很容易漏，记在聊天记录里又不方便查。于是写了这个叫 如山 的小后台：打开网页就能记，手机上顺手，家人之间还能共享同一份数据。

它能做什么

• 数据概览：宝宝数量、今日打卡、有效 / 已作废记录、共享成员，一眼看完，还能直接跳到「新增记录」。
• 宝宝档案：昵称、头像、主题色、性别、出生日期和出生身高体重，自动算月龄，并生成一个可以分享给家人的邀请码。
• 打卡记录：喝奶、哭闹、换尿布、睡觉、体温、洗澡、营养、体重、互动、疫苗、异常、其他共 12 种类型。选不同类型时只出现对应字段，比如奶量、时长、体温、下次接种日期，避免填一堆无关的框。
• 筛选与订正：按宝宝、类型、状态、日期区间和关键词筛选，客户端分页；记错了可以改，也可以「作废」后随时恢复，不会直接抹掉历史。
• 成员共享：把家人拉进同一个宝宝，各自用邮箱登录，看到的都是同一份记录。

权限与安全

页面不使用高权限密钥，所有请求都受数据库的行级安全策略（RLS）约束：

• 只能看到自己是创建者或成员的宝宝；
• 只能读写自己有权限的宝宝记录；
• 登录、会话续期、退出都在浏览器里完成，刷新页面不用重新登录；
• 所有用户数据在插入页面前都会转义，事件统一用 data-* 委托，避免注入。

换句话说，即使有人拿到了页面，也读不到不属于他的数据。

技术实现

• 原生 HTML / CSS / JavaScript，无框架、无打包、无构建步骤；
• 数据存在云端 Postgres，读表时分页循环拉取，突破单次返回行数限制；
• 筛选、搜索、分页都在客户端完成，减少往返请求；
• 增删改后重新拉取数据，保证界面与云端一致；
• 纯静态文件，跟着博客一起部署。

设计细节

移动端优先，三档断点：手机单列 + 底部导航，平板双列卡片，电脑固定侧边栏 + 顶栏。浅色 / 深色主题跟随系统，也可以手动切换并记住选择；弹窗支持 Esc 和点击遮罩关闭，表单都有可见 label，图标按钮都带 aria-label。

目前的限制

• 没有做 CSV 导入导出、统计图表、批量操作和操作审计；
• 没有多设备实时推送，换设备时需要手动刷新；
• 首次登录的邮箱验证、权限策略需要按实际项目配置。

如果只是想找个地方把宝宝的日常记下来，直接打开就好：

打开 如山 →