# 生活里的小主意 · 青禾致知

八个可以实际操作的独立网页小工具，用于少儿 Vibe Coding 课程创意示范与宣传录屏。

**所有创作者画像、情境和初始数据均为虚构，不是实际学员案例。** 不含真实儿童肖像、学校、家庭地址或学习效果承诺。

ECS 发布采用八个独立子域名、独立站点目录和独立版本，展示入口位于 `https://child.tools.lk117181.cloud/`。域名清单、单站更新命令及回退方式见 [DEPLOYMENT.md](DEPLOYMENT.md)。以下相对路径说明针对本地开发模式。

## 启动

在本目录运行（需要 Node.js 18 或更高版本）：

```powershell
node server.cjs
```

打开 <http://127.0.0.1:4173>。等效命令为 `npm start`。日常运行不需要安装任何 npm 包，没有构建步骤、登录、密钥、外部接口或数据库。

也可在项目目录运行 `python -m http.server 4173 --bind 127.0.0.1`。建议通过 HTTP 访问，而不是双击 HTML，以确保 IndexedDB 和浏览器本地存储行为一致。

如端口被占用，PowerShell 中运行 `$env:PORT=4180` 后再执行 `node server.cjs`。测试指定地址可设置 `$env:TEST_URL='http://127.0.0.1:4180'`。

项目是纯静态 HTML/CSS/JavaScript，可部署到任意静态托管服务的根目录或子目录。保留相对目录结构即可，不要上传 `node_modules/`。展示入口的真实截图位于 `output/playwright/*-desktop.png`，请一并部署。

## 作品入口

| 作品 | 路径 | 主要操作 |
| --- | --- | --- |
| 今晚吃啥呀 | `dinner/index.html` | 抽一荤一素、排除菜品、添加家常菜、收藏搭配并查食材 |
| 妈，东西在这儿！ | `finder/index.html` | 关键词查找、点房间筛选、选物品定位、修改位置 |
| 爸爸别落东西 | `departure/index.html` | 三个场景、勾选清单、新增修改、完成盖章、下次检查 |
| 妈妈的小店价签铺 | `labels/index.html` | 三种价签、即时预览、编辑复制、添加打印页、浏览器打印 |
| 到站啦，休息一下 | `train/index.html` | 设置工作时长、暂停继续、10 秒演示、到站提示 |
| 周末家务抽签机 | `chores/index.html` | 编辑成员任务、均衡抽签、手动分工、标记完成 |
| 爸爸的阳台小管家 | `plants/index.html` | 选盆、昵称、浇水记录、自设间隔、修改与撤销记录 |
| 我们家的回忆小报 | `newspaper/index.html` | 纸面编辑、本地照片、上下调序、打印或保存 PDF |

每个目录有自己的 `index.html`、`style.css` 和 `app.js`，没有共用页面外壳和统一组件皮肤。`server.cjs` 仅用来提供本地静态文件。

## 数据保存与隐私

所有数据都留在当前浏览器的当前站点，没有上传逻辑。不同浏览器、域名、端口或设备之间不共享数据；清理站点数据会删除记录。建议重要内容先打印保存。浏览器隐私模式或存储空间不足可能阻止持久化，页面会提示。

| 工具 | localStorage 键 | 保存内容 |
| --- | --- | --- |
| 菜单 | `qh-dinner-v1` | 菜谱、排除项、当前菜单、收藏快照 |
| 寻物 | `qh-finder-v1` | 物品、房间、具体位置、选中物品 |
| 检查单 | `qh-departure-v1` | 三场景自定义清单、勾选、当前场景 |
| 价签 | `qh-labels-v1` | 编辑草稿、所有待打印价签 |
| 火车 | `qh-train-v1` | 时长、结束时间戳、暂停剩余时间、演示及声音设置 |
| 家务 | `qh-chores-v1` | 家庭成员、任务、分配与完成状态 |
| 植物 | `qh-plants-v1` | 昵称、间隔、浇水日期历史 |
| 小报 | `qh-newspaper-v1` | 文字、顺序、日期、照片引用 ID |

小报照片保存在独立 IndexedDB 数据库 `qh-newspaper-v1` 的 `photos` 对象仓库，使用 Blob；不会存入 localStorage。支持 JPG、PNG、WebP、GIF、AVIF，单张不超过 12 MB，最长边压缩至 1800 像素并转为 JPEG，GIF 保留静帧。无需给网站相机、通讯录或定位权限。

首次打开加载示例；刷新不会覆盖修改。每个作品都有“恢复示例”，只有确认后才覆盖该作品的数据。小报恢复时也清除该作品的本地照片。删除成员不会删除其家务，任务会回到待分配。

## 打印

- 价签：80 × 45 mm，A4 纵向，10 mm 页边距，两列，每页最多 10 张。使用“实际大小 / 100%”，关闭浏览器打印页眉页脚；彩色效果建议勾选背景图形。打印页面只包含价签。
- 小报：点击“打印 / 保存 PDF”，只输出报纸正文，隐藏编辑按钮。普通篇幅保留报纸分栏；长文章打印时自动改为连续单栏，避免大片空白和正文丢失。长内容可跨多页。
- 已生成并检查 Chromium PDF 输出，尚未用实体打印机测量纸张。最终物理尺寸也受打印机驱动的缩放、边距与纸张设置影响。

## 演示与截图

- `design-briefs.md`：8 份独立设计说明与结构差异。
- `demo-scripts.md`：每个作品 20—30 秒的真实操作录屏路径。
- `output/playwright/*-desktop.png`：8 张 1440 × 1000 桌面截图。
- `output/playwright/*-mobile.png`：8 张以 390 × 844 视口截取的完整手机页面。
- `output/playwright/comparison.png`：用真实截图组成的作品对比图；`comparison.html` 为可重新截图的拼版源。
- `output/playwright/gallery-*.png`：展示入口截图。
- `output/concepts/directions.png`：内部 Image Gen 方向概念图，**不是页面截图，不作为成果宣传图**。
- `qa-report.md`、`output/playwright/results.json`、`edges.json`：验收记录。

## 运行测试

先保持本地服务器运行，在另一个终端中：

```powershell
npm ci
npx playwright install chromium
npm test
npm run test:edges
```

Playwright 是仅用于开发验证的依赖，网页运行时不加载它。

`npm test` 在隔离浏览器上下文中真实点击八个工具的核心功能、确认存储恢复、保存桌面/手机截图与打印 PDF，并更新对比图。它不会修改你日常浏览器中的内容。`npm run test:edges` 检查 320 / 768 / 1280 px 宽度、取消恢复时保留数据、16 张价签分页与小报长文打印。浏览器 PDF 证据使用测试内容，不是虚构真实家庭故事。

## 已知范围

- 已实测 Chromium 桌面及模拟手机视口；未实测实体 iOS/Android 设备、Safari、Firefox 和实体打印机。
- 无云同步、多设备备份或多标签实时协同。同一工具建议在一个标签中编辑。
- 火车计时基于绝对结束时间，页面刷新可恢复；声音默认关闭，开启后才尝试低音量提示。关闭页面、设备休眠或浏览器限制后台运行时不保证提醒；修改系统时钟也会影响剩余时间。
- 抽菜基于家庭菜谱规则，均衡家务按数量，植物计划按用户设定间隔。它们不提供营养评估、任务难度评估、植物识别、诊断或健康效果承诺。
- 小报打印/保存 PDF 满足导出需求，未提供独立 PNG 导出。没有自动读取照片拍摄时间，日期由用户填写。
- 植物下一次计划在页面内显示，不发送系统通知。