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

README.md

@@ -21,7 +21,7 @@ smart-engraving-miniapp/
 │   ├── app.tsx          # 应用入口（全局 ThemeProvider 挂载）
 │   ├── app.scss         # 全局样式（CSS 变量 + 主题工具类）
 │   ├── app.config.ts    # 应用配置（页面路由、tabBar、window）
-│   ├── custom-tab-bar/  # 自定义底部导航（4 tab：首页/设计清单/订单/我的）
+│   ├── custom-tab-bar/  # 自定义底部导航（5 tab：首页/商品/设计清单/订单/我的）
 │   ├── types/
 │   │   └── index.ts     # TypeScript 类型定义（ProductCategory、DesignItem、OrderItem 等）
 │   ├── utils/
@@ -35,6 +35,7 @@ smart-engraving-miniapp/
 │   │   └── LoginModal/        # 登录弹窗（历史组件）
 │   └── pages/
 │       ├── index/        # 首页（品类入口、成品轮播、搜索）
+│       ├── shop/         # 商品浏览页（2列网格 + 沉浸式详情 overlay）
 │       ├── product/      # 商品详情页（轮播图 + 加入设计清单弹窗）
 │       ├── diy/          # DIY 工作台（贴纸拖拽、缩放、碰撞检测）
 │       ├── checkout/     # 设计效果确认页（收货地址 + 下单）
@@ -48,7 +49,7 @@ smart-engraving-miniapp/
 │       ├── settings/     # 设置（个人信息、账号管理、退出登录）
 │       ├── agreement/    # 使用协议
 │       └── userDatabase/ # 账号管理（密码保护：zhihui2024）
-├── src/icon/            # 19 个 icon PNG（28~56px，打包到 dist/icon）
+├── src/icon/            # 20 个 icon PNG（28~56px，打包到 dist/icon）
 ├── src/img/             # 8 张产品实物压缩图（打包到 dist/img）
 ├── package.json
 ├── tsconfig.json
@@ -60,6 +61,7 @@ smart-engraving-miniapp/
 | 页面 | 路径 | 功能 |
 |---|---|---|
 | 首页 | `/pages/index/index` | 品类入口、成品轮播、搜索框、热门品类网格 |
+| 商品浏览 | `/pages/shop/index` | 2列商品网格 → 点击卡片进入沉浸式详情 overlay（滚动视差 + 主题色联动）→ 底部 CTA 跳转购买页 |
 | 商品详情 | `/pages/product/index` | 轮播图、单价/工期/尺寸、加入设计清单弹窗 |
 | DIY 工作台 | `/pages/diy/index` | 选品类→上传图片/相机→拖拽缩放→碰撞检测→预览下单 |
 | 设计效果确认 | `/pages/checkout/index` | 展示设计效果、选择/修改收货地址、确认下单 |
@@ -140,7 +142,7 @@ pages/
 
 ### Icon 系统（emoji 已完全移除）
 
-- 19 个 icon 存放在 `src/icon/`，构建时通过 `config/index.js` copy 到 `dist/icon/`
+- 19 个 icon 存放在 `src/icon/`，构建时通过 `config/index.js` copy 到 `dist/icon/`。新增「商品」tab 图标后共 20 个 icon
 - 产品 icon 映射：`src/utils/productConfig.ts` 中每个产品有 `iconImg` 字段
 - 旧数据兼容：列表渲染时检测 `productIcon` 是否以 `/icon/` 开头，否则通过 `PRODUCT_ICON_MAP` 查映射表
 
@@ -191,7 +193,7 @@ npm run dev:h5
   2. **format**：PNG → JPG
   3. **quality**：JPG 质量 60%
 - 执行一次即可：`node compress-images.js`
-- 当前编译后 `dist/` 总大小约 **1.02 MB**，满足微信限制。
+- 当前编译后 `dist/` 总大小约 **1.03 MB**（新增 1 个 icon 约 7KB），满足微信限制。
 
 ### ⚠️ 注意：压缩 ≠ 长期方案
 
@@ -216,6 +218,19 @@ npm run dev:h5
 
 ---
 
+## 最近更新记录（2026-08-02）
+
+### Batch 11 — 商品浏览页（Shop Page）沉浸式体验构建
+
+| 序号 | 修改内容 |
+|------|----------|
+| 1 | **新增「商品」tab**：底部导航 4 tab → 5 tab（首页/商品/设计清单/订单/我的），`app.config.ts` + `custom-tab-bar` 同步扩展，新增 `/icon/商品.png` |
+| 2 | **构建 `pages/shop/index.tsx`**：单页双容器结构——列表 2 列网格 + 固定 overlay 沉浸式详情；点击卡片当前页内过渡，不走页面跳转 |
+| 3 | **滚动驱动视差动画**：Hero 图上下边缘裁剪 → 整图上滑退出 → `transition-band` 吸顶显现 → 内容区延迟上浮淡入；`ScrollView` + `scrollEventThrottle={16}` |
+| 4 | **产品主题色联动**：每个产品新增 `tone: [r,g,b]`（5 产品 5 色调），详情页背景、渐变遮罩、CTA 栏、吸顶条实时跟随变换 |
+| 5 | **商品文案升级**：5 个产品全部补充 `subtitle`/`story`/`scene`/`tags`/`specs`/`originalPrice`，电商级长文案展示 |
+| 6 | **CTA 衔接现有链路**：底部悬浮毛玻璃栏「立即定制」跳转到原有 `/pages/product/index?id=xxx`，购买流程零改动 |
+
 ## 最近更新记录（2026-08-01）
 
 ### Batch 10 — 夜间模式适配 + 地址弹窗统一 + 空状态主题化