AI 情绪日记 App 原型
原始提示词
见 本次原始提示词。本目录的 prompt.md 与 demos/life-diary/prompts/v1/prompt.md 逐字节一致。
运行与复盘
运行方式
- 模型：MiniMax-M3.1-Flash-Preview，档位 max，会话内一次性生成，未委派子代理。
- 产物：单个
index.html，Tailwind CDN、Font Awesome 6.5.2 CDN 与 Unsplash 图片，需要联网。 - 入口：本目录
index.html。
与提示词的命名差异（重要）
提示词要求产物文件名为 canghe_app_prototype.html，但本仓库规定「单文件入口统一使用 index.html」。此处遵循仓库规则使用 index.html，并在此显式记录该差异，没有静默改写任务正文，prompt.md 保留的是提示词原文。
页面构成
同一个文件内并排放置 8 个页面，每个页面都在自己的设备框内，彼此独立、互不影响：
- 今日情绪打卡
- AI 情绪对话
- 日记编辑器
- 日记时间线
- 情绪趋势洞察
- 生活助手
- 提醒中心
- 个人中心
产品主线
整条线索是「记录 → 理解 → 干预」：打卡与编辑器负责记录，趋势洞察与 AI 对话负责理解，生活助手与提醒中心负责干预。视觉上用暖白底 + 珊瑚色主色。
两条无障碍 / 合规约定
- 情绪色始终搭配文字标签，不单独用颜色传达含义。
- AI 对话页与趋势洞察页都带明确的「AI 生成内容」说明与「不构成医学诊断」提示。
验证记录
| 项目 | 结果 |
|---|---|
| 390px 横向溢出 | 无溢出（scrollWidth == clientWidth == 390） |
| 1440px 横向溢出 | 无溢出 |
| 图片破图 | 0（9 张图全部加载） |
| 控制台错误 | 0 |
本条目为静态原型，页面之间的跳转未接线，AI 对话为示意内容。
过程中修掉的真实问题
390px 横向溢出：.phone 固定 375px，叠加外层容器 px-6 左右各 24px，合计 423px 超过 390px 视口，导致整页出现横向滚动。改为外层 px-3 sm:px-6，并给 mockup 条带容器加 overflow-x-auto，窄屏时在条带内部横向滚动而不撑宽页面。装饰性的模糊光斑仍会超出 .screen 的右边界，但 .screen 本身是 overflow: hidden，属于预期内的裁切。
当前归档信息（自动生成）
- 实验 ID：
life-diary--minimax-m3-1-flash-preview-max-r02 - 模型：MiniMax M3.1 Flash Preview；推理档位：max
- 类型：prototype；预览：static；网络：required
- 完整原始输入快照 · 主题与其他版本
- 输入记录：本目录 prompt.md 与 demos/life-diary/prompts/v1/prompt.md 逐字节一致，完整原文已保存。
- 工具：MiniMax Code 桌面版（MiniMax M3.1 Flash Preview）。单文件原型，Tailwind 与 Font Awesome 走 CDN，因此 network 为 required。本工作副本用 node scripts/serve.mjs --read-only（PORT=4180）预览，未复用其他工作副本的 4173 端口；验证用 Playwright（chromium）驱动真实 UI 读数。 复核：390px 与 1440px 下 scrollWidth 均等于 clientWidth，图片无破图，控制台 0 错误。 本轮使用 MiniMax Code 桌面版执行，未使用 Claude Code。
- 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
- 费用记录：MiniMax 批次合计 37 %（Max 订阅套餐五小时额度）（11 个案例；批次 minimax-m3-1-flash-preview-max-2026-10-13；未记录单案例费用）
- 全部页面
部署适配记录
- 提示词要求产物文件名为 canghe_app_prototype.html，与仓库「单文件入口统一 index.html」的规则冲突；此处遵循仓库规则使用 index.html，并在此显式记录该差异，未静默改写任务正文。
- 8 个页面写在同一个 HTML 内，以独立 mockup 边框横向排列，页面之间互不影响。
- 情绪色始终搭配文字标签，不单独用颜色传达含义；AI 对话页与洞察页都带「不构成医学诊断」提示。
- 390px 下 mockup 条带溢出：.phone 固定 375px，叠加外层容器 px-6 左右各 24px，必然超过视口宽度。改为外层 px-3 sm:px-6，并给条带容器加 overflow-x-auto，窄屏时在条带内部横向滚动而不撑宽整个页面。
- 迁移来源：F:\dev\ai-coding-demo-test（experiment/minimax-m3-1-flash-preview-max）/demos/life-diary/runs/minimax-m3-1-flash-preview-max-r01；当前 main 已存在该轮号，保留历史并迁入为 minimax-m3-1-flash-preview-max-r02。
- 迁移验证：使用本仓库本地 HTTP 入口补拍实际桌面截图 screenshot.png；Chromium 确认入口可加载且无页面异常，390px 视口横向溢出为 0。
- 迁移验证补充：本 static 入口可通过 file:// 直接打开，Chromium 页面异常为 0。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。