# 宝宝日记 App 一个用于记录宝宝日常喂养、生长数据的静态 Web 应用,可直接部署到 Cloudflare Pages,支持添加到手机主屏幕。 ## 功能特性 - **记录功能**: 奶量、辅食、便便、维生素 D - **历史查询**: 按日期查看记录、日统计(总奶量 / 辅食顿数 / 维 D) - **生长监测**: 体重 / 身长 / 头围 / BMI 曲线,基于 WS/T 423-2022 男童标准 - **AI 智能评估**: 自动分析最新生长数据(可关闭) - **图片上传**: 便便照片记录 - **数据导出**: 近 30 天饮食数据一键复制,方便发给 AI 做饮食建议 - **维 D 提醒**: 昨天漏打卡时首页温馨提示 - **深浅色主题**: 跟随系统或手动切换 - **PWA**: 可「添加到主屏幕」,离线打开壳层页面 ## 项目结构 ``` baby/ ├── index.html # 主页面 ├── manifest.webmanifest # PWA 清单 ├── sw.js # 壳层 Service Worker(仅缓存静态资源) ├── icons/ │ ├── icon.svg # 应用图标 │ └── apple-touch-icon.svg # iOS 主屏幕图标 ├── src/ │ ├── js/ │ │ ├── config.js # 环境配置(远程 + 本地兜底) │ │ ├── utils.js # 工具函数 / 生长标准数据 │ │ ├── db.js # Supabase 数据访问层 │ │ ├── charts.js # ECharts 图表管理 │ │ ├── toast.js # Toast 通知 │ │ └── app.js # Alpine.js 主应用 │ └── styles/ │ └── main.css # 主题样式(Warm Minimal + 暗色) ├── .env.example # 环境变量模板 └── README.md ``` ## 本地开发 1. 用本地静态服务器打开项目根目录(推荐,避免 `file://` 限制剪贴板等 API): ```bash # Python python -m http.server 8080 # 或 Node npx serve . ``` 2. 浏览器访问 `http://localhost:8080` > Service Worker 需要 HTTP(S) 源;`file://` 下不会注册。 ## 添加到主屏幕 - **iOS Safari**: 分享 → 添加到主屏幕 - **Android Chrome**: 菜单 → 安装应用 / 添加到主屏幕 - 独立窗口打开时使用 `standalone` 显示模式,主题色随浅/深色模式切换 ## Cloudflare Pages 部署 ### 方式一: 直接上传 1. 登录 [Cloudflare Dashboard](https://dash.cloudflare.com/) 2. **Workers & Pages** → **Create** → **Pages** → **Upload assets** 3. 上传项目文件夹(或 zip) 4. 部署完成即可访问 ### 方式二: Git 连接 1. 推送到 GitHub / GitLab 2. Cloudflare Pages 连接仓库 3. 构建设置: - Build command: 留空 - Build output directory: `/` - Root directory: `/` ## 配置说明 应用启动时会先请求远程配置,失败则使用 `src/js/config.js` 中的本地默认值。 可覆盖的配置项: | 键 | 说明 | |----|------| | `SUPABASE_URL` | Supabase 项目 URL | | `SUPABASE_KEY` | Supabase anon key | | `IMGBED_API` | 图片上传 API | | `GROW_API_URL` | 生长数据 JSON API | | `AI_API_URL` | AI 评估 API(设为 `''` 可禁用) | | `BIRTH_DATE` | 宝宝生日,格式 `YYYY/MM/DD` | 修改默认值: 编辑 `src/js/config.js` 中的 `window.env`。 ### Supabase 数据表 ```sql CREATE TABLE baby_records ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), recorded_at TIMESTAMPTZ NOT NULL, type TEXT NOT NULL, -- 'milk' | 'food' | 'poo' | 'meds' sub_type TEXT, amount INTEGER, is_new_food BOOLEAN DEFAULT FALSE, tags TEXT, notes TEXT, image_url TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); CREATE INDEX idx_recorded_at ON baby_records(recorded_at); CREATE INDEX idx_type ON baby_records(type); CREATE INDEX idx_type_recorded ON baby_records(type, recorded_at); ``` 建议开启 RLS,并按你的使用场景配置策略(家庭私用可暂时允许 anon 读写)。 ### 生长数据 API `GROW_API_URL` 需返回: ```json { "data": [ { "checkDate": "2025-04-09", "weight": 5.2, "height": 58.5, "headCircumference": 39.2 } ] } ``` ### AI 评估 API `POST` JSON body: `{ "query": "..." }`,响应为纯文本评估结果。 将 `AI_API_URL` 设为空字符串可完全关闭该功能。 ## 外部依赖 | 库 / 服务 | 用途 | 来源 | |-----------|------|------| | Tailwind CSS | 工具类样式 | CDN | | Alpine.js | 响应式交互 | CDN | | ECharts | 生长曲线 | CDN(首次打开生长/报告时加载) | | Supabase | 后端数据库 | supabase.com | | 图床 API | 图片存储 | 自建 / Cloudflare | ## 时区说明 应用统一按 **Asia/Shanghai (UTC+8)** 处理日期与时间显示;写入数据库时转为标准 UTC ISO 字符串。 ## 许可 MIT