# 仓河 · AI 情绪日记与生活助手原型

## 原始提示词

见 [完整原始输入](prompt.md)。本轮为模型 minimax-m3-1-flash-preview、档位 max 在测试分支执行任务正文 v1。任务正文要求文件名为 `canghe_app_prototype.html`；本仓库按「单文件入口统一 index.html」的归档规范登记为 `index.html`，内容与设计未作改动。

## 运行方式

入口为本目录 `index.html`。Tailwind CSS、Font Awesome 与 Unsplash 均走 CDN，**需要联网**；无构建步骤。

## 实现要点

- 6 张 375×812 基准稿：首页（情绪打分 + AI 洞察 + 一年前今天）、记录（语音转写 + 情绪识别 + AI 追问）、AI 助手对话（含可勾选的三件小事建议）、情绪趋势（曲线 + 构成 + 影响因素）、生活片段（高光卡片 + 月度回顾 + 时间轴）、个人中心（坚持度、隐私设置、徽章）。
- 产品主线是「记录 → 识别 → 回应 → 回看」：记录页把 AI 识别到的情绪与置信度直接摊开，对话页展示 AI 如何基于近 30 天日记给出可执行建议，趋势页再把结论量化。
- 趋势页用内联 SVG 画实际曲线与预测曲线（含渐变面积），构成条与归因条用纯 div 完成，避免额外图表依赖。
- 隐私被放进个人中心的一级项（本地加密、AI 训练数据默认不参与、一键导出），与「AI 情绪记录」这类敏感场景直接相关。

## 验证记录

- 6 张 mockup 全部正常渲染，Tailwind、Font Awesome、Unsplash 均加载成功，控制台无报错。
- 375pt 基准稿宽度一致，内部滚动区域被限制在稿内。
- 390px 移动视口无水平溢出。

## 复盘

**做得好的**：任务正文强调「这些界面需要能直接拿去开发」，因此本轮刻意把 AI 的输出也设计进了界面——置信度标签、追问气泡、可勾选建议、可量化归因，这些是产品文档里最难画清楚的部分，也是这轮最有信息量的部分。

**不足**：
1. 记录页的转写与识别结果是写死的文案，没有体现 AI 识别失败、置信度过低需要用户纠正的分支。
2. 对话页只展示了一轮多轮对话，缺少长对话的滚动定位与历史管理表现。
3. 趋势页的预测曲线是静态贝塞尔曲线，与「实际」曲线没有数据上的关系，属于视觉装饰而非真实分析表达。
4. 首屏出现了未定义的 `text-sub-ish` 类名（Tailwind 里不存在），虽不影响显示但说明命名没有对齐配置。
5. 全部图标使用 Font Awesome，与仓库内其他主题混用 Unicode 图标的做法不一致。

## 十轮评审改进记录

本轮由模型 MiniMax M3.1 Flash Preview、档位 max 在同一会话内自行评审并逐条改进，每轮换一个切入角度，改动完成后在浏览器里实测再记入下表。历史输入与历史产物未被覆盖。

- **第  4 轮**：补 prefers-reduced-motion 与 :focus-visible 样式。
- **第  3 轮**：修正首页未定义的 text-sub-ish 类名，改为显式颜色。
- **第 3 轮**：情绪曲线改为数据驱动——原先 SVG 里是三条手绘 path（实际 / 面积 / 预测），改一个数要同时改三处，而且峰值标记点写死在 (176,30)。现在由 30 天样例数组（固定种子生成，每次打开同一条曲线）算出坐标，面积图、折线、数据点与预测线全部由同一份数据生成；预测线改为对最近 7 天做最小二乘拟合再外推 4 天。实测：峰值 9.4 分、均值 6.70 分、34 个数据点，预测线落在实际曲线右侧 280~312px 内不超出 viewBox。图表右侧补了数据来源与峰均值的文字说明。
- **第 4 轮**：情绪构成与曲线同源——构成条形图原本写死 34%/26%/18%/14%/8%，与上方曲线没有任何关系，而且分桶索引与图例标签对不上（≥9 分和 <7.5 分都落进同一个槽）。现在由 30 天分数按区间统计得出，实测占比 30%/26.67%/20%/13.33%/10% 合计恰为 100%，并在下方列出各区间天数。
- **第 5 轮**：「此刻心情」真的可点——五档情绪从静态 div 改成 button + aria-pressed，点击后首页的今日情绪分（8.6/7.1/6.0/3.4/4.6）、标签与 AI 洞察文案一起换，并写入状态摘要。
- **第 6 轮**：记录页状态机——原本转写文本、计时 00:23、停止按钮全是写死的。现在是录音中 → 转写中 → 已识别三态：计时由真实经过时间驱动，转写文本按录制时长逐字显示，点「停止并保存」后进入转写态，约 1.8 秒后替换为完整文本并写入识别结果。「重新记录」可复位。
- **第 7 轮**：Tab 栏可切换并带 aria-current，选中项与未选中项的配色由脚本统一切换。
- **第 8 轮**：图标字体降级与不再阻塞解析——图标字体取不到时 <i class="fa-..."> 会塌成空元素把栅格撑歪，现在探测 ::before 内容，未加载到就给所有图标加占位底色并在状态里说明（实测离线环境 fa-fallback 生效）。同时给它加上 defer：这是一个纯粹装饰性的 CDN 资源，原来却是阻塞式脚本标签，一旦它变慢或被网络策略拦住，解析会停在它上面，后面所有内联脚本（包括本页的交互逻辑）一条都不执行——实测在这种状态下情绪曲线、状态摘要、导航全部失效。加 defer 后图标照常生效但不再挡住解析。
- **第 9 轮**：窄屏整体缩放（≤720px 用 0.78、≤520px 用 0.62），6 台 375pt 手机在 390px 视口不再横向溢出；同时给 Tailwind 配置脚本加了 window.tailwind 兜底，CDN 不可达时不再抛 ReferenceError。
- **第 10 轮**：屏幕状态摘要与 aria-live 播报——新增「屏幕状态」面板逐屏列出当前状态（静态稿 / 已选择「开心」8.6 分 / 已识别 疲惫 0.82 / 切到「趋势」），并新增 ←/→、Home/End 键盘导航与 #pN 定位。

以上每条改动也登记在本目录 `run.json` 的 `changes` 字段，可与本表逐条对照。

## 轮次归并与批次汇总

本次后续导入是同一轮测试的更新结果，现已合并到此前归档的实验记录，不另建第 4 轮。普通主题沿用第 3 轮记录；蓝皮书 v1/v2 沿用各自已有的记录 ID。

- 本批：11 个主题案例、12 条实验记录（蓝皮书含 v1/v2）。
- Max 五小时额度累计消耗：108%（此前 44% + 本次 64%）。
- 累计耗时：2h 8m 32s（57m 10s + 1h 11m 22s）。
- 累计 Token：156M。
- 执行备注：自我审查十轮。以上额度消耗、耗时和 Token 为批次口径，不拆分到单案例。

<!-- archive:start -->
## 当前归档信息（自动生成）

- 实验 ID：`life-diary--minimax-m3-1-flash-preview-max-r03`
- 模型：MiniMax M3.1 Flash Preview；推理档位：max
- 执行模式：按原任务执行；备注：自我审查十轮
- 类型：prototype；预览：static；网络：required
- [完整原始输入快照](prompt.md) · [主题与其他版本](../../../../topic.html?id=life-diary)
- 输入记录：完整原始输入，等同于主题任务正文 v1（未增删），保存于本目录 prompt.md。
- 工具：Claude Code。Claude Code 会话内直接执行，模型 minimax-m3-1-flash-preview、档位 max；未使用子代理，未参考任何历史实现或远程分支。
- 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
- 费用记录：MiniMax 批次合计 108 %（Max 订阅套餐五小时额度）（12 个案例；批次 minimax-m3-1-flash-preview-max-2026-10-14；未记录单案例费用）
- [全部原型页](../../../../demos/life-diary/runs/minimax-m3-1-flash-preview-max-r03/index.html)

### 部署适配记录

- 第  4 轮：补 prefers-reduced-motion 与 :focus-visible 样式。
- 第  3 轮：修正首页未定义的 text-sub-ish 类名，改为显式颜色。
- 第 3 轮：情绪曲线改为数据驱动——原先 SVG 里是三条手绘 path（实际 / 面积 / 预测），改一个数要同时改三处，而且峰值标记点写死在 (176,30)。现在由 30 天样例数组（固定种子生成，每次打开同一条曲线）算出坐标，面积图、折线、数据点与预测线全部由同一份数据生成；预测线改为对最近 7 天做最小二乘拟合再外推 4 天。实测：峰值 9.4 分、均值 6.70 分、34 个数据点，预测线落在实际曲线右侧 280~312px 内不超出 viewBox。图表右侧补了数据来源与峰均值的文字说明。
- 第 4 轮：情绪构成与曲线同源——构成条形图原本写死 34%/26%/18%/14%/8%，与上方曲线没有任何关系，而且分桶索引与图例标签对不上（≥9 分和 <7.5 分都落进同一个槽）。现在由 30 天分数按区间统计得出，实测占比 30%/26.67%/20%/13.33%/10% 合计恰为 100%，并在下方列出各区间天数。
- 第 5 轮：「此刻心情」真的可点——五档情绪从静态 div 改成 button + aria-pressed，点击后首页的今日情绪分（8.6/7.1/6.0/3.4/4.6）、标签与 AI 洞察文案一起换，并写入状态摘要。
- 第 6 轮：记录页状态机——原本转写文本、计时 00:23、停止按钮全是写死的。现在是录音中 → 转写中 → 已识别三态：计时由真实经过时间驱动，转写文本按录制时长逐字显示，点「停止并保存」后进入转写态，约 1.8 秒后替换为完整文本并写入识别结果。「重新记录」可复位。
- 第 7 轮：Tab 栏可切换并带 aria-current，选中项与未选中项的配色由脚本统一切换。
- 第 8 轮：图标字体降级与不再阻塞解析——图标字体取不到时 <i class="fa-..."> 会塌成空元素把栅格撑歪，现在探测 ::before 内容，未加载到就给所有图标加占位底色并在状态里说明（实测离线环境 fa-fallback 生效）。同时给它加上 defer：这是一个纯粹装饰性的 CDN 资源，原来却是阻塞式脚本标签，一旦它变慢或被网络策略拦住，解析会停在它上面，后面所有内联脚本（包括本页的交互逻辑）一条都不执行——实测在这种状态下情绪曲线、状态摘要、导航全部失效。加 defer 后图标照常生效但不再挡住解析。
- 第 9 轮：窄屏整体缩放（≤720px 用 0.78、≤520px 用 0.62），6 台 375pt 手机在 390px 视口不再横向溢出；同时给 Tailwind 配置脚本加了 window.tailwind 兜底，CDN 不可达时不再抛 ReferenceError。
- 第 10 轮：屏幕状态摘要与 aria-live 播报——新增「屏幕状态」面板逐屏列出当前状态（静态稿 / 已选择「开心」8.6 分 / 已识别 疲惫 0.82 / 切到「趋势」），并新增 ←/→、Home/End 键盘导航与 #pN 定位。
- 同轮更新归档：测试分支后续更新的完整产物、执行记录和文档已并入本条实验记录，不另建新轮次。来源：F:/dev/ai-coding-demo-test（model-test-base）/demos/life-diary/runs/minimax-m3-1-flash-preview-max-r01。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。
<!-- archive:end -->