# 小蓝书 · 瀑布流社区（任务正文 v2）

## 原始提示词

见 [完整原始输入](prompt.md)。本轮为模型 minimax-m3-1-flash-preview、档位 max 执行任务正文 v2。v2 与 v1 是不同任务：v2 去掉了 images 目录、编译拷贝与 Readme 要求，改为「使用 mock 数据，包含不同高度的图片」。

## 运行方式

本目录是完整源码。开发模式 `npm ci && npm run dev`；生产构建 `npm run build`，产物提交在 `previews/bluebook/minimax-m3-1-flash-preview-max-r05/`。

## 实现要点

- 与 v1 同栈（React 18 + TypeScript + Tailwind + Zustand + react-lazyload + Vite），组件拆分与状态管理保持一致，便于对照两个任务正文的差异。
- 关键差异在数据层：不再有 `images/` 目录，改为在 `src/mock/data.ts` 里**运行时生成 SVG data URL** 作为 mock 图片，颜色按索引取自固定主题表，山形与圆点只是占位装饰。
- 「不同高度」被显式建模为 `ratio`：0.72 / 1.0 / 1.33 / 0.8 / 1.5 等高宽比混合，瀑布流据此预留占位高度，避免加载时的布局跳动。
- 其余需求（首屏 20 条、滚动加载、loading 动画、两行截断、hover 上浮、按压反馈、下拉刷新、失败默认图、点赞弹跳、页面渐入、2/3/4 列响应式）按正文逐条实现。

## 验证记录

- `npm ci` 后 `npm run build` 通过，产物不依赖任何外部图片请求。
- 390×844 视口下为两列瀑布流，卡片高度明显不同（高图 / 方图 / 宽图交错），错落效果成立。
- 1280 宽度下为四列。
- 控制台无报错，无 404 图片请求。

## 复盘

**做得好的**：同一模型在同一主题的两个任务正文版本下，代码结构保持可对照，而数据层按 v2 的要求真实改成「运行时 mock 不同高度图片」——这正是版本化任务正文存在的意义：同一个模型在两套约束下的差异是可被观察的，而不是复制一份改改文案。

**不足**：
1. 运行时把 SVG data URL 写进每条数据（120 条各一段字符串），每次刷新首屏都会重复编码；更好的做法是缓存编码结果或用 OffscreenCanvas 统一生成。
2. `ratioFor` 使用 `(i * 3) % ratios.length`，虽然能覆盖全部比例，但序列有明显的规律性，长列表滚动时会看出重复节奏。
3. 与 v1 共用同一套组件，等于把 v2 实现建立在 v1 的产物上；若两个任务正文出现互相矛盾的要求，当前结构缺少隔离手段。
4. `LazyImage` 的懒加载在这份 mock 数据上没有真实收益（data URL 无网络请求），组件仍然全量挂载，属于为 v1 保留的结构。
5. 依然没有把「搜索」做成全量搜索，数据只覆盖已加载页，v2 正文虽未要求，但功能表观上不完整。

## 十轮评审改进记录

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

- **第 1 轮**：构建期修复：缺少 prop-types 依赖导致打包产物缺模块、无法加载。
- **第 2 轮**：构建期修复：基址改为 base: './'，使产物路径为相对路径。
- **第 3 轮**：频道真的过滤内容——原先切频道只是弹一句提示，列表纹丝不动。现在过滤规则以纯函数写在数据层：推荐=全部、关注=作者序号能被 4 整除、附近=作者序号除以 4 余 1，互不重叠且第一屏即可命中。过滤顺序固定为「先频道、再搜索」。空态文案直接说明当前频道规则。实测第一页 20 条里：推荐 20、关注 6、附近 11。
- **第 4 轮**：列表读数真实可见——频道栏右侧新增真实数字：当前页、已加载/总数、频道命中数、搜索命中数，全部由实际数据算出。
- **第 5 轮**：分页与刷新的幂等性——两个真实缺陷：(1) 刷新用 Date.now() 给 id 加后缀，同一毫秒内连续刷新会撞 id，React 复用同一个 key 导致列表不更新；改为把页号与时间戳组合成批次号。(2) hasMore 原来无条件写 true，全部加载完后仍显示「继续下滑加载更多」；改为按已加载数与总数比较，并显示实际条数。
- **第 6 轮**：键盘与无障碍——频道栏改为 tablist/tab/tabpanel 语义并支持左右方向键；底部主导航加 nav 语义与 aria-current；toast 加 role=status 与 aria-live；新增跳过导航链接；补上 .sr-only 的完整实现（原来是空规则，focus:not-sr-only 因此不生效）。
- **第 7 轮**：状态持久化——频道、搜索词与点赞状态写入 localStorage，读写都包在 try/catch 里。实测刷新后点赞仍保留。
- **第 8 轮**：失败态可恢复——加载失败原来被静默吞掉，界面永远停在「加载中…」。store 增加 error 状态与 retry，底部显示失败原因与重试按钮。
- **第 9 轮**：滚动加载的观察根与去抖——IntersectionObserver 显式指定 root 为滚动容器 main[data-scroll-root]，并加 180ms 去抖，避免连续触发。
- **第 10 轮**：构建产物与源码同步核验——重新执行 tsc -b && vite build，两个任务正文版本（v1 用本地 images 目录、v2 用运行时生成的不同高度 SVG）都能干净构建，产物与源码同步提交。

以上每条改动也登记在本目录 `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：`bluebook--minimax-m3-1-flash-preview-max-r05`
- 模型：MiniMax M3.1 Flash Preview；推理档位：max
- 执行模式：按原任务执行；备注：自我审查十轮
- 类型：app；预览：build；网络：offline
- [完整原始输入快照](prompt.md) · [主题与其他版本](../../../../topic.html?id=bluebook)
- 输入记录：完整原始输入，等同于主题任务正文 v2（未增删），保存于本目录 prompt.md。
- 工具：Claude Code。Claude Code 会话内直接执行，模型 minimax-m3-1-flash-preview、档位 max；未使用子代理，未参考任何历史实现或远程分支。
- 运行方式：在本目录 npm ci 后 npm run dev；Pages 使用根目录 previews 中已提交的构建产物。
- 费用记录：MiniMax 批次合计 108 %（Max 订阅套餐五小时额度）（12 个案例；批次 minimax-m3-1-flash-preview-max-2026-10-14；未记录单案例费用）
- [小蓝书首页](../../../../previews/bluebook/minimax-m3-1-flash-preview-max-r05/index.html)

### 部署适配记录

- 第 1 轮：构建期修复：缺少 prop-types 依赖导致打包产物缺模块、无法加载。
- 第 2 轮：构建期修复：基址改为 base: './'，使产物路径为相对路径。
- 第 3 轮：频道真的过滤内容——原先切频道只是弹一句提示，列表纹丝不动。现在过滤规则以纯函数写在数据层：推荐=全部、关注=作者序号能被 4 整除、附近=作者序号除以 4 余 1，互不重叠且第一屏即可命中。过滤顺序固定为「先频道、再搜索」。空态文案直接说明当前频道规则。实测第一页 20 条里：推荐 20、关注 6、附近 11。
- 第 4 轮：列表读数真实可见——频道栏右侧新增真实数字：当前页、已加载/总数、频道命中数、搜索命中数，全部由实际数据算出。
- 第 5 轮：分页与刷新的幂等性——两个真实缺陷：(1) 刷新用 Date.now() 给 id 加后缀，同一毫秒内连续刷新会撞 id，React 复用同一个 key 导致列表不更新；改为把页号与时间戳组合成批次号。(2) hasMore 原来无条件写 true，全部加载完后仍显示「继续下滑加载更多」；改为按已加载数与总数比较，并显示实际条数。
- 第 6 轮：键盘与无障碍——频道栏改为 tablist/tab/tabpanel 语义并支持左右方向键；底部主导航加 nav 语义与 aria-current；toast 加 role=status 与 aria-live；新增跳过导航链接；补上 .sr-only 的完整实现（原来是空规则，focus:not-sr-only 因此不生效）。
- 第 7 轮：状态持久化——频道、搜索词与点赞状态写入 localStorage，读写都包在 try/catch 里。实测刷新后点赞仍保留。
- 第 8 轮：失败态可恢复——加载失败原来被静默吞掉，界面永远停在「加载中…」。store 增加 error 状态与 retry，底部显示失败原因与重试按钮。
- 第 9 轮：滚动加载的观察根与去抖——IntersectionObserver 显式指定 root 为滚动容器 main[data-scroll-root]，并加 180ms 去抖，避免连续触发。
- 第 10 轮：构建产物与源码同步核验——重新执行 tsc -b && vite build，两个任务正文版本（v1 用本地 images 目录、v2 用运行时生成的不同高度 SVG）都能干净构建，产物与源码同步提交。
- 同轮更新归档：测试分支后续更新的完整产物、执行记录和文档已并入本条实验记录，不另建新轮次。来源：F:/dev/ai-coding-demo-test（model-test-base）/demos/bluebook/runs/minimax-m3-1-flash-preview-max-r02。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。
<!-- archive:end -->