商品浏览页构建上传1.1.0版本

review1.md

@@ -1,7 +1,7 @@
-# 智绘微刻小程序 — 交付总结 v10
+# 智绘微刻小程序 — 交付总结 v11
 
 > 本文档供**完全无上下文的新会话**阅读，记录各轮重构的完整交付成果。  
-> **日期**：2026-08-01（第十次修改，Batch 10）  
+> **日期**：2026-08-02（第十一批修改，Batch 11）  
 > **项目目录**：`F:\weixin_wordc\`  
 > **技术栈**：Taro 3.6.31 + React 18 + TypeScript + SCSS
 
@@ -354,7 +354,71 @@ pages/
 
 ---
 
-## 一、历史修改回顾（Batch 1~9）
+## 一、历史修改回顾（Batch 1~10）
+
+### Batch 10（Completed）
+夜间模式字体 + 地址弹窗统一 + 空状态主题适配。
+
+### Batch 11（2026-08-02）— 商品浏览页（Shop Page）沉浸式体验构建 ✅
+
+**背景**：参考 `ecommerce-demo.html` 的交互式商品页设计（FLIP 转场 + 滚动驱动多阶段视差 + 主题色联动），为小程序新增独立「商品」tab，承担"看图种草→沉浸式详情→跳转购买链路"的推 discover 职能。
+
+| 序号 | 任务 | 状态 |
+|------|------|------|
+| 1 | **新增「商品」tab 入口**：底部导航从 4 tab 扩展为 5 tab（首页/商品/设计清单/订单/我的），新增 `/icon/商品.png` | ✅ 完成 |
+| 2 | **构建 `pages/shop/index.tsx`**：单页双容器结构（列表层 + 固定 overlay 详情层），点击卡片不走页面跳转，在当前页内完成沉浸式过渡 | ✅ 完成 |
+| 3 | **滚动驱动视差动画**：Hero 图上下边缘裁剪 → 整图上滑退出 → `transition-band` 吸顶显现 → 内容区延迟上浮淡入，全部绑定 `ScrollView` 进度 | ✅ 完成 |
+| 4 | **产品主题色动态联动**：每个产品新增 `tone: [r,g,b]`，详情页背景、渐变遮罩、CTA 栏、吸顶条实时跟随产品色调变化（5 产品 5 色调） | ✅ 完成 |
+| 5 | **商品文案全面升级**：为 5 个产品补充 `subtitle`/`story`/`scene`/`tags`/`specs`/`originalPrice`，实现电商级长文案展示 | ✅ 完成 |
+| 6 | **底部 CTA 衔接现有购买链路**："立即定制"按钮 `navigateTo` 到原有 `/pages/product/index?id=xxx`，不破坏已有业务流 | ✅ 完成 |
+
+**技术抉择与小程序适配**：
+
+| Demo 原版能力 | 小程序适配方案 | 原因 |
+|---|---|---|
+| FLIP 空间膨胀动画（卡片图直接膨胀到全屏）| B：卡片淡出 → Hero 淡入放大 | 小程序无实时 `getBoundingClientRect` FLIP 支持，且 `position: fixed` 在 ScrollView 内不稳定 |
+| `window.scroll` 驱动全局视差 | `<ScrollView scrollY>` 内 `onScroll` 驱动 | 小程序页面级滚动不支持精细事件捕获，ScrollView 组件化更可控 |
+| CSS `mask-image` 渐变透明 | 伪元素 `linear-gradient` 遮罩 | `mask-image` 在部分微信基础库/安卓机型支持不完整 |
+| 统一深色沉浸式 | C：列表页走现有 Light/Dark 主题，详情 overlay 使用产品独立深色调 | 保持 tabBar / 状态栏在列表页与现有主题一致，详情页进入"画报模式" |
+
+**文件变更**：
+| 文件 | 核心改动 |
+|---|---|
+| `src/pages/shop/index.tsx` | 新建：列表网格 + ScrollView 详情 overlay；`useMemo` 滚动进度映射多阶段动画；底部 CTA 跳转现有商品页 |
+| `src/pages/shop/index.scss` | 新建：2 列网格、Hero 固定层/裁剪/滑出、`transition-band` sticky、主题驱动色调、底部 CTA 毛玻璃栏 |
+| `src/app.config.ts` | 新增 `pages/shop/index` 路由；tabBar `list` 改为 5 项（首页/商品/设计清单/订单/我的） |
+| `src/custom-tab-bar/index.tsx` | 新增第 5 个 tab「商品」，`icon: '/icon/商品.png'` |
+| `src/utils/productConfig.ts` | 5 个产品全面升级：新增 `subtitle` / `tone` / `story` / `scene` / `tags` / `specs` / `originalPrice`；文案电商化 |
+| `src/types/index.ts` | `ProductCategory` 接口扩展 8 个新字段：`subtitle?` / `tone?` / `story?` / `scene?` / `tags?` / `specs?` / `originalPrice?` |
+| `src/icon/商品.png` | 新增：底部导航「商品」tab 图标 |
+
+**踩坑记录（新增）**：
+| 坑 | 现象 | 解法 |
+|---|---|---|
+| **小程序 inset 语法不支持** | SCSS 写 `inset: 0` 被直接透传，部分基础库不识别 | 显式写 `top: 0; left: 0; right: 0; bottom: 0` |
+| **ScrollView 滚动事件不触发** | 默认 `scrollEventThrottle` 过大导致手感迟钝 | 显式声明 `scrollEventThrottle={16}` |
+| **tabBar 被详情 overlay 遮挡** | `z-index: 200` 不够，`custom-tab-bar` 为 `z-index: 1000` | 详情 overlay 提升至 `z-index: 1200` |
+| **纯色背景 fallback** | `inset` fallback 背景色叠加导致过渡不自然 | overlay 使用 `linear-gradient` 伪元素实现边缘软化，兼容性更好 |
+
+**编译结果**：`webpack 5.91.0 compiled successfully in ~22s`，0 报错。新增 icon 约 7KB，总包体积仍 < 2MB。
+
+**最终累计完成统计**：
+| 批次 | 日期 | 完成项数 |
+|------|------|---------|
+| Batch 1 | 早期 | 12 项 |
+| Batch 2 | 早期 | 12 项 |
+| Batch 3 | 早期 | 6 项 |
+| Batch 4 | 2026-07-27 | 3 项 |
+| Batch 5 | 2026-07-28 19:47 | 6 项 |
+| Batch 6 | 2026-07-28 22:03 | 5 项 |
+| Batch 7 | 2026-07-29 17:10 | 3 项 |
+| Batch 8 | 2026-07-29 晚间 | 4 项 |
+| Batch 9 | 2026-07-29 晚间 | 4 项 |
+| Batch 10 | 2026-08-01 | 3 项 |
+| **Batch 11** | **2026-08-02** | **6 项** |
+| **总计** | — | **64 项核心目标 ✅** |
+
+---
 
 ### Batch 1（已完成）
 全局主题切换、字体系统、tabBar重组、商品详情页、设计清单、效果确认页、后端技术栈文档。
@@ -383,4 +447,10 @@ Taro React 事件兼容修复：全量 `onClick` → `onTap`、Fragment 消除
 ### Batch 9（Completed）
 emoji → icon 图片彻底收尾：productConfig 增加 `iconImg`、store 写入层修复、运行时旧数据映射兼容、商品详情页弹窗去 emoji。
 
+### Batch 10（Completed）
+夜间模式字体 + 地址弹窗统一 + 空状态主题适配。
+
+### Batch 11（Completed）
+商品浏览页（Shop Page）沉浸式体验：新增「商品」tab（5 tab 架构）、单页双容器浏览页、滚动驱动视差动画、产品主题色联动、电商级长文案升级。
+
 ---