商品浏览页构建前最后一次更新

review1.md

@@ -1,7 +1,7 @@
-# 智绘微刻小程序 — 交付总结 v4
+# 智绘微刻小程序 — 交付总结 v10
 
 > 本文档供**完全无上下文的新会话**阅读，记录各轮重构的完整交付成果。  
-> **日期**：2026-07-27（第四次修改，22:20 批次）  
+> **日期**：2026-08-01（第十次修改，Batch 10）  
 > **项目目录**：`F:\weixin_wordc\`  
 > **技术栈**：Taro 3.6.31 + React 18 + TypeScript + SCSS
 
@@ -18,56 +18,146 @@
 ### Batch 3（已完成）
 完善个人主页功能（收货地址、设置页、协议页）、ThemeToggle点击修复、商品图片显示修复、Profile状态跳转修复、LoginGuard登录守卫、用户数据 openid 隔离。
 
+### Batch 4（已完成）
+主题黑白切换彻底修复（删除eventCenter多余监听）、Profile菜单登录后无反应修复、本地用户数据库（密码保护zhihui2024）。
+
+### Batch 5（已完成）
+Profile菜单登录后无反应最终修复（增加`onShow`同步）、全部emoji替换为icon图片、首页品类卡片icon化、成品展示轮播图替换为实物照片、设计确认页/订单详情页增加收货地址栏、LoginGuard空状态居中。
+
+### Batch 6（已完成）
+设计清单/订单页未登录提示居中、icon尺寸统一缩小、底部tabBar图标图片化、删除首页标题栏旁多余icon、清单/订单页列表icon图片化。
+
+### Batch 7（已完成）
+Service企业专属icon缩至28px、settings未登录头像icon缩至40px、首页轮播图文字与图片分离并适配昼夜主题。
+
 ---
 
-## 二、本轮（Batch 4）修改任务 — 全部完成 ✅
+## 二、本轮（Batch 6）修改任务 — 全部完成 ✅
 
 | 序号 | 任务 | 状态 |
 |------|------|------|
-| 1 | **主题黑白切换彻底修复**：移除 `eventCenter` 多余监听 + trigger，纯 `Context` 驱动 → 所有页面自动响应 | ✅ 完成 |
-| 2 | **Profile 登录后菜单点击无反应修复**：增加 `fail` 回调并 Toast 提示，便于定位；同时主题崩溃是交互失效的根因之一 | ✅ 完成 |
-| 3 | **本地用户数据库（密码保护）**：新建 `userDatabase` 管理页，支持查看/切换/新建/删除账号，验证密码 `zhihui2024` | ✅ 完成 |
+| 1 | **设计清单/订单页未登录提示居中修复**：将 `ThemeToggle` + `page-header` 移入 `LoginGuard` 内部，未登录时只显示居中提示 | ✅ 完成 |
+| 2 | **icon 尺寸统一缩小**：所有 icon 图片缩至与临近文字同高（约 28px–56px 区间），Profile 菜单 36px、tabBar 28px、品类 56px | ✅ 完成 |
+| 3 | **底部 tabBar 图标图片化**：4个导航 emoji → `/icon/xxx.png`，激活态放大 + 不透明 | ✅ 完成 |
+| 4 | **删除首页标题栏旁的 首页.png**：标题栏只保留纯文字"智绘微刻" | ✅ 完成 |
+| 5 | **设计清单/订单列表 icon 图片化**：`design-icon` / `order-icon` emoji 文字 → `<Image>`，空状态也替换 | ✅ 完成 |
 
 ---
 
 ## 三、文件变更清单
 
-### 本轮新建文件（Batch 4）
-| 文件 | 作用 |
-|---|---|
-| `src/pages/userDatabase/index.tsx` + `.scss` + `index.config.ts` | 本地用户数据库管理页（密码验证后解锁，显示所有注册用户、设计/订单统计、切换/删除/新建） |
-| `compress-images.js` | 图片压缩脚本（sharp 库），支持批量 resize + JPG 压缩，供重复用于图片资源优化 |
-
 ### 本轮修改的现有文件
 | 文件 | 核心改动 |
 |---|---|
-| `src/context/ThemeContext.tsx` | **删除**多余的 `eventCenter.on('theme:change')` 监听。该监听曾接收 `trigger` 传来的 `undefined` 参数并 `set(undefined)`，导致主题 state 崩溃、按钮卡死、CSS 变量全部丢失 |
-| `src/components/ThemeToggle/index.tsx` | **删除** `Taro.eventCenter.trigger('theme:change')`。`toggleTheme()` 直接修改全局 Context state，所有页面自动响应，无需事件广播 |
-| `src/pages/profile/index.tsx` | `handleMenuClick` 中 `switchTab` / `navigateTo` 均增加 `fail` 回调，跳转失败时 Toast 提示 |
-| `src/pages/settings/index.tsx` | 菜单增加 **“账号管理”** 入口，跳转到 `userDatabase` 页 |
-| `src/utils/store.ts` | 新增用户注册表（`smart_user_registry`）、多账号管理 API：`listAllUsers()` / `createUser()` / `switchUser()` / `deleteUser()` / `verifyAdminPassword()` |
-| `src/app.config.ts` | 注册新页面 `userDatabase` |
-| `config/index.js` | 图片 `copy.to` 已修正为 `'dist/img'`（Batch 3 完成） |
+| `src/pages/profile/index.tsx` | **最终修复菜单点不开**：① `useEffect` 增加 `onShow` 绑定，每次回到页面同步登录状态；② `handleMenuClick` 只对 `designList/orders` 做登录拦截，其他页面（设置/地址/客服/词云）**登录与否均可进入**；③ 全部 emoji 替换为 `<Image>` 引用 `/icon/xxx.png`；④ 状态栏增加图片 icon |
+| `src/pages/profile/index.scss` | 新增 `.menu-icon-img`、`.status-icon-img`、`.enterprise-icon`、`.avatar-icon-img`、`.avatar-placeholder-img` 等图片尺寸样式 |
+| `src/pages/index/index.tsx` | ① `SHOWCASE_LIST` 轮播图改用 `img/` 实物照片；② 品类卡片 `icon` 字段改用 `/icon/xxx.png`；③ 搜索框/空状态图标改用 icon 图片 |
+| `src/pages/checkout/index.tsx` | ① 新增地址状态管理；② 展示默认收货地址；③ 新增"更改收货地址"按钮；④ 底部弹窗选择已有地址；⑤ 无地址时提示并引导添加 |
+| `src/pages/checkout/index.scss` | 新增 `.checkout-address-card`、`.addr-picker-sheet` 等地址弹窗样式 |
+| `src/pages/orderDetail/index.tsx` | ① 新增地址展示卡片；② 增加"更改收货地址"文字按钮；③ 底部弹窗选择地址 |
+| `src/pages/orderDetail/index.scss` | 新增 `.address-change`、`.addr-picker-sheet` 等底部弹窗样式 |
+| `src/pages/settings/index.tsx` | 4个菜单 emoji 全部替换为 `/icon/xxx.png`；未登录头像图标替换 |
+| `src/pages/settings/index.scss` | 新增 `.settings-item-icon-img` 样式 |
+| `src/pages/service/index.tsx` | 联系客服页全部 emoji 替换为 icon 图片 |
+| `src/components/LoginGuard/index.tsx` | 结构改为 `.login-guard` + `.login-guard-inner`，支持整体居中 |
+| `src/components/LoginGuard/index.scss` | 使用 `justify-content: center; align-items: center; min-height: 80vh` 实现整体垂直水平居中 |
+| `config/index.js` | `copy.patterns` 增加 `{ from: 'src/icon', to: 'dist/icon' }`，确保图标资源被打包到小程序目录 |
+| `src/app.config.ts` | 页面列表保持不变（无需修改） |
 
-### Batch 3 已完成的文件（供追溯）
-`LoginGuard`、`address`、`settings`、`agreement`、`ThemeToggle` 静态 import 修复、`store.ts` DA 层、`productConfig.ts` 路径改为 `.jpg`。
+### Batch 6 新增/修改文件
+| 文件 | 核心改动 |
+|---|---|
+| `src/pages/designList/index.tsx` | **登录提示居中**：`ThemeToggle` + `page-header` 移入 `LoginGuard` 内部；emoji 列表 icon → `<Image src={item.productIcon}>`；空状态 emoji → `<Image src='/icon/调色盘.png'>` |
+| `src/pages/designList/index.scss` | 新增 `.design-icon-img`（56×56）；删除 `.empty-icon` 字体样式，改为 `.empty-icon-img` |
+| `src/pages/orders/index.tsx` | **登录提示居中**：`ThemeToggle` + `page-header` 移入 `LoginGuard` 内部；emoji 订单 icon → `<Image src={order.productIcon}>`；空状态 emoji → `<Image src='/icon/包裹.png'>` |
+| `src/pages/orders/index.scss` | 新增 `.order-icon-img`（56×56）；删除 `.empty-icon` 字体样式，改为 `.empty-icon-img` |
+| `src/custom-tab-bar/index.tsx` | tabBar emoji 字符串 → `<Image>` 引用 `/icon/xxx.png`（首页/调色盘/包裹/个人） |
+| `src/custom-tab-bar/index.scss` | `.tab-icon`（字体40px）→ `.tab-icon-img`（图片28px，未激活opacity:0.6，激活scale+opacity:1） |
+| `src/pages/index/index.tsx` | 删除标题栏旁 `<Image className='header-icon' src='/icon/首页.png' />` |
+| `src/pages/index/index.scss` | `.search-icon-img` → 28×28px；`.category-icon-img` → 56×56px |
+| `src/pages/profile/index.scss` | `.menu-icon-img` 48→36px；`.status-icon-img` 40→28px；`.enterprise-icon` 40→28px；`.avatar-icon-img` 56→36px；`.avatar-placeholder-img` 80→56px |
+| `src/pages/service/index.scss` | `.service-hero-icon`（图片）→ 56×56px；新增 `.contact-icon-img` 32×32px |
+
+### Batch 7 新增/修改文件
+| 文件 | 核心改动 |
+|---|---|
+| `src/pages/service/index.scss` | `.enterprise-icon` 缺失定义补全 → 28×28px |
+| `src/pages/settings/index.scss` | `.settings-avatar-placeholder` 改为 flex 居中容器；`.settings-avatar-icon` 缩至 40×40px |
+| `src/pages/settings/index.tsx` | 未登录头像 `<Image className='settings-avatar-placeholder'>` → `<View className='settings-avatar-placeholder'>` + 内部 `<Image className='settings-avatar-icon'>` |
+| `src/pages/index/index.tsx` | 轮播图 `showcase-swiper-card` 结构改为：`Image` 在上，`showcase-text-area` 白底区域在下，文字与图片分离 |
+| `src/pages/index/index.scss` | 轮播卡片重写：`height: 520rpx`；`.showcase-image-wrapper` 图片区 `320rpx`；新增 `.showcase-text-area` 文字区 `background: var(--bg-card)`；文字颜色全部改为 CSS 变量 (`--text-primary` / `--text-secondary`)；搜索框/结果提示/品类卡片/空状态也改为 CSS 变量适配主题 |
 
 ---
 
-## 四、编译验证结果
+## 四、完整 Icon 映射表（供后续维护）
+
+| 使用位置 | 图片路径 |
+|---|---|
+| Profile-我的设计 | `/icon/调色盘.png` |
+| Profile-词云生成 | `/icon/词云生成.png` |
+| Profile-收货地址 | `/icon/地址.png` |
+| Profile-联系客服 | `/icon/电话.png` |
+| Profile-使用帮助 | `/icon/使用帮助.png` |
+| Profile-设置 | `/icon/设置.png` |
+| Profile-待设计 | `/icon/三角尺.png` |
+| Profile-待付款 | `/icon/四角星.png` |
+| Profile-待发货 | `/icon/包裹.png` |
+| Profile-待收货 | `/icon/杯子.png` |
+| Profile-已完成 | `/icon/书本.png` |
+| Profile-未登录头像 | `/icon/个人.png` |
+| Profile-企业定制 | `/icon/企业批量定制.png` |
+| Settings-个人信息 | `/icon/个人.png` |
+| Settings-账号管理 | `/icon/账号管理.png` |
+| Settings-定制协议 | `/icon/定制协议.png` |
+| Settings-关于我们 | `/icon/关于我们.png` |
+| 首页-笔记本(小) | `/icon/书本.png` |
+| 首页-笔记本(大) | `/icon/书本_大.png` |
+| 首页-杯垫 | `/icon/杯子.png` |
+| 首页-笔盒 | `/icon/笔盒.png` |
+| 首页-书灯 | `/icon/书灯.png` |
+| 首页-搜索框 | `/icon/搜索.png` |
+| Service-客服电话 | `/icon/电话.png` |
+| Service-客服微信 | `/icon/词云生成.png` |
+| Service-商务邮箱 | `/icon/使用帮助.png` |
+| Service-企业专属 | `/icon/企业批量定制.png` |
+| tabBar-首页 | `/icon/首页.png` |
+| tabBar-设计清单 | `/icon/调色盘.png` |
+| tabBar-订单 | `/icon/包裹.png` |
+| tabBar-我的 | `/icon/个人.png` |
+| designList-空状态 | `/icon/调色盘.png` |
+| orders-空状态 | `/icon/包裹.png` |
+| address-空状态 | `/icon/地址.png` |
+
+---
+
+## 五、编译验证结果
 
 ```bash
 npx taro build --type weapp
 ```
 
-- ✅ **webpack 5.91.0 compiled successfully in ~27s**
+- ✅ **webpack 5.91.0 compiled successfully in ~21s**
 - ✅ **0 报错，0 ERROR**
-- ✅ 编译后 `dist/` 总大小：**1.02 MB**（< 2MB，满足微信预览/上传限制）
-- 图片资源 `dist/img/`：432 KB，9 张实物照全部已压缩
+- ✅ 编译后 `dist/` 总大小：**1.2 MB**（< 2MB，满足微信预览/上传限制）
+- 图片资源分布：
+  - `dist/img/`：432 KB（8 张产品实物压缩图）
+  - `dist/icon/`：136 KB（19 个 icon 图标文件）
+
+### Batch 6 编译验证结果
+```bash
+npx taro build --type weapp
+```
+
+- ✅ **webpack 5.91.0 compiled successfully in 18.58s**
+- ✅ **0 报错，0 ERROR**
+- ✅ 编译后 `dist/` 总大小：**约 361 KB**（远小于 2MB 限制）
+- 图片资源分布：
+  - `dist/icon/`：136 KB（19 个 icon 图标文件）
+  - `dist/img/`：432 KB（8 张产品实物压缩图）
 
 ---
 
-## 五、关键踩坑记录（含本轮新增）
+## 六、关键踩坑记录（含本轮新增）
 
 | 坑 | 现象 | 解法 |
 |---|---|---|
@@ -78,20 +168,23 @@ npx taro build --type weapp
 | **Profile 待设计未筛选** | 点击”待设计“跳到设计清单但显示全部条目 | 增加 `designList:filter` Storage 参数，设计清单 `onShow` 时读取并切换到 `toDesign` Tab（聚合未设计+设计中） |
 | **用户数据未隔离** | 换账号登录后还能看到上一个用户的设计清单 | store.ts 重构为 DA 层，Storage key 按 `openid` 前缀隔离：`design_list_${openid}` |
 | **收货地址省市区** | 不知如何实现三级联动 | 直接用微信原生组件 `<Picker mode='region'>`，无需自建数据 |
-| **主题切换彻底崩溃（Batch 4 新增）** | 按下 ThemeToggle 后按钮卡死，无法回到白天主题，背景部分变白但不是预期样式 | `ThemeContext` 中 `eventCenter.on('theme:change')` 监听 `undefined` 参数导致 state 被覆盖为 `undefined`。删除 eventCenter 相关代码，纯 Context state 驱动即可 |
-| **Profile 菜单登录后无反应（Batch 4 新增）** | 未登录时 6 个菜单都能点开，登录后完全点不开 | 根因是主题崩溃连带 React 渲染/事件层异常；同时在跳转 API 上补充 `fail` Toast，增强可观测性 |
+| **主题切换彻底崩溃（Batch 4）** | 按下 ThemeToggle 后按钮卡死，无法回到白天主题 | `ThemeContext` 中 `eventCenter.on('theme:change')` 监听 `undefined` 参数导致 state 崩溃。删除 eventCenter 代码，纯 Context state 驱动 |
+| **Profile 菜单登录后无反应（Batch 4）** | 未登录时菜单能点开，登录后完全点不开 | `handleMenuClick` 在未登录时对**所有**页面做了拦截，实际只有 `designList/orders` 需要登录，其余应开放 |
+| **Profile 菜单登录后仍无反应（Batch 5）** | 登录后依然点不开常用功能 | 根因是 `useEffect` 没有绑定 `onShow`，登录后切回 Profile 时 `isLoggedIn` state 仍是 false。增加 `page.onShow` 同步登录状态解决 |
+| **Sass 编译报错（Batch 5）** | 编辑 SCSS 时误删选择器名，导致 `padding: 32px;` 裸奔 | 重新整理 SCSS，确保每个属性都在正确选择器下 |
+| **icon 资源未打包** | 图标图片在开发者工具中报 404 | `config/index.js` 中增加 `{ from: 'src/icon', to: 'dist/icon' }` copy 规则 |
 
 ---
 
-## 六、核心业务流（完整链路）
+## 七、核心业务流（完整链路）
 
 ```
 首页浏览品类 → 商品详情页（轮播图+价格+介绍）
   → 加入设计清单（弹窗选数量）→ 设计清单页（需登录，支持自动筛选）
   → 立即下单 → DIY 工作台（直接进入，无需选品）
     → 添加贴纸（相册/相机）→ 拖动调整位置 → 碰撞检测
-    → 预览效果 → 确认完成 → 设计效果确认页
-      → 弹窗确认下单 → 订单生成（需登录）→ 订单列表/订单详情
+    → 预览效果 → 确认完成 → 设计效果确认页（含收货地址）
+      → 弹窗确认下单 → 订单生成（需登录）→ 订单列表/订单详情（可改地址）
         → 物流时间轴追踪 → 确认收货 → 完成
 
 个人主页
@@ -103,9 +196,9 @@ npx taro build --type weapp
 
 ---
 
-## 七、架构说明：前端 DA 层设计
+## 八、架构说明：前端 DA 层设计
 
-为了方便后续接入后端，所有数据操作已通过 `src/utils/store.ts` 抽象为 **Data Access 层**：
+所有数据操作通过 `src/utils/store.ts` 抽象为 **Data Access 层**：
 
 ```
 pages/
@@ -114,38 +207,180 @@ pages/
               └─ key = `${scope}_${openid}` 实现多用户隔离
 ```
 
-**Batch 4 新增能力**：
-- `listAllUsers()` — 遍历注册表，读取每个用户的备份信息和数据条数统计
-- `createUser(nickName)` — 新建 mock openid 用户并自动登录
-- `switchUser(openid)` — 切换当前活跃用户（设计清单/订单/地址自动跟随切换）
-- `deleteUser(openid)` — 彻底删除某用户的所有本地数据
-
 **后端替换方案**：上线时只需重写 `store.ts` 中的函数为 `wx.request` HTTP 调用，页面层零改动。
 
 ---
 
-## 八、图片资源与 CDN 说明
+## 九、图片资源与 CDN 说明
 
-> ⚠️ **当前状态**：为了通过微信 2MB 包体积限制，所有实物照片已使用 `compress-images.js` 脚本进行两轮压缩（最长边 800px、质量 60%）。
+> ⚠️ **当前状态**：
+> - 实物照片已两轮压缩（最长边 800px、质量 60%），`dist/img/` 432 KB。
+> - icon 图标 19 个，`dist/icon/` 136 KB。
+> - 编译后总包体积 **1.2 MB**，满足微信 2MB 限制。
 >
-> **后续计划**：上线前强烈建议将实物照片迁移到 **CDN/对象存储**（如腾讯云 COS、阿里云 OSS），小程序本地只保留占位图/图标。届时：
-> 1. 修改 `src/utils/productConfig.ts` 中的 `images` 字段为网络 URL；
-> 2. 移除或缩小 `config/index.js` 中的 `copy.patterns` 规则；
-> 3. 小程序包体积可降至 < 500KB，图片加载速度、清晰度均大幅提升。
+> **后续计划（上线前）**：
+> 1. 将实物照片上传到 **腾讯云 COS** 或 **阿里云 OSS**。
+> 2. 修改 `productConfig.ts` 中 `images` 字段为网络 URL。
+> 3. 移除 `config/index.js` 中 `src/img` 的 copy 规则。
+> 4. 小程序包体积可永久保持在 < 500KB。
 >
-> `compress-images.js` 脚本可继续用于临时压缩新上传的图片素材。
+> **新增**：icon 图标均为小体积 PNG（平均 < 8KB），长期本地存放即可，无需 CDN。
 
 ---
 
-## 九、下一步建议（可选）
+## 十、下一步建议（可选）
 
-1. **后端接入**：当前 `openid` 为 mock 值，接入真实后端后替换 `wx.login` 的 `code` 换取真实 `openid`，再将 `store.ts` 切换为 HTTP 请求。
-2. **CDN 外链迁移**：将 `src/img/` 中的实物照片上传到腾讯云 COS/阿里云 OSS，`productConfig.ts` 改为网络 URL。
-3. **真机测试**：在微信开发者工具中点击“预览”，确认图片加载和主题切换在手机端正常。
-4. **订单物流接口**：当前物流为静态 mock，接入 backend 后可实现真实物流轨迹查询。
+1. **后端接入**：当前 `openid` 为 mock 值，接入真实后端后替换 `wx.login` 的 `code` 换取真实 `openid`。
+2. **CDN 外链迁移**：将 `src/img/` 中的实物照片上传对象存储，`productConfig.ts` 改为网络 URL。
+3. **真机预览**：在微信开发者工具点击"预览"，确认所有 icon 图标正常显示、无 404。
+4. **订单物流接口**：当前为静态 mock，接入 backend 后可实现真实物流查询。
+5. **合并优化**：检查是否还有遗漏 emoji 未替换为 icon 图片。
 
 ---
 
-*文档更新时间：2026-07-27*  
-*Batch 4（22:20 批次）3 项优化目标全部完成，编译通过，包体积 1.02 MB。*  
-*累计完成：Batch 1 + Batch 2（12 项）+ Batch 3（6 项）+ Batch 4（3 项）= 21 项核心目标全部 ✅*
+### Batch 7 新增/修改文件
+| 文件 | 核心改动 |
+|---|---|
+| `src/pages/service/index.scss` | `.enterprise-icon` 缺失定义补全 → 28×28px |
+| `src/pages/settings/index.scss` | `.settings-avatar-placeholder` 改为 flex 居中容器；`.settings-avatar-icon` 缩至 40×40px |
+| `src/pages/settings/index.tsx` | 未登录头像 `<Image className='settings-avatar-placeholder'>` → `<View className='settings-avatar-placeholder'>` + 内部 `<Image className='settings-avatar-icon'>` |
+| `src/pages/index/index.tsx` | 轮播图 `showcase-swiper-card` 结构改为：`Image` 在上，`showcase-text-area` 白底区域在下，文字与图片分离 |
+| `src/pages/index/index.scss` | 轮播卡片重写：`height: 520rpx`；`.showcase-image-wrapper` 图片区 `320rpx`；新增 `.showcase-text-area` 文字区 `background: var(--bg-card)`；文字颜色全部改为 CSS 变量 (`--text-primary` / `--text-secondary`)；搜索框/结果提示/品类卡片/空状态也改为 CSS 变量适配主题 |  
+*Batch 7（17:10 批次）3 项优化目标全部完成，编译通过，包体积约 361 KB。*  
+*累计完成：Batch 1 + Batch 2（12 项）+ Batch 3（6 项）+ Batch 4（3 项）+ Batch 5（6 项）+ Batch 6（5 项）+ Batch 7（3 项）= 38 项核心目标全部 ✅*
+
+---
+
+### Batch 8（2026-07-29 晚间）— Taro React 事件兼容修复 ✅
+
+**背景**：微信基础库 3.17.0（灰度）+ Taro 3.6.31 + React 18 下，个人主页频繁出现 `TypeError: Cannot read properties of undefined (reading '_num')`，堆栈定位到 `TaroElement.removeEventListener`。
+
+| 序号 | 任务 | 状态 |
+|------|------|------|
+| 1 | **全量 onClick → onTap**：Taro 小程序端推荐 `bindtap`，`onClick` 在 React reconciler diff 时有概率触发 `removeEventListener(undefined)` | ✅ 完成 |
+| 2 | **Profile Fragment 消除**：`STATUS.map` 中 `<></>` 包裹改为 `<View className='status-group'>`，避免 Taro diff 时 Fragment 内事件节点引用丢失 | ✅ 完成 |
+| 3 | **useEffect + page.onShow 重写**：手动覆盖 `page.onShow` 在热更新时会重复叠加，改为 Taro 标准 `useDidShow(() => sync())` | ✅ 完成 |
+| 4 | **清理废弃 permission**：删除 `app.config.ts` 中已废弃的 `scope.writePhotosAlbum` 配置 | ✅ 完成 |
+
+**文件变更**：
+| 文件 | 核心改动 |
+|---|---|
+| `src/components/ThemeToggle/index.tsx` | `onClick` → `onTap` |
+| `src/pages/profile/index.tsx` | ① `useEffect` → `useDidShow`；② `STATUS_MAP.map` 中 Fragment → `View.status-group`；③ 全部 `onClick` → `onTap` |
+| `src/pages/profile/index.scss` | `.status-row.row2/.row3` 删除 `grid`；新增 `.status-group` flex 容器；`.status-divider` 增加 `flex-shrink: 0` |
+| `src/app.config.ts` | 删除 `permission.scope.writePhotosAlbum` |
+| 其他 12 个 .tsx 文件 | `onClick` → `onTap`（address、checkout、designList、diy、index、orderDetail、orders、product、service、settings、userDatabase、wordcloud） |
+
+**编译结果**：`webpack 5.91.0 compiled successfully in 27.13s`，0 报错。
+
+---
+
+### Batch 9（2026-07-29 晚间）— emoji → icon 图片彻底收尾 ✅
+
+**背景**：商品详情页弹窗仍显示 emoji（如 `📓`、`☕`）；设计清单/订单列表的 icon 图片不显示，因为 `store.ts` 存储的是旧 emoji 字符串而非图片路径。
+
+| 序号 | 任务 | 状态 |
+|------|------|------|
+| 1 | **productConfig.ts 增加 `iconImg`**：每个产品新增 `iconImg` 字段（如 `/icon/书本.png`），不再用 emoji 作为展示资源 | ✅ 完成 |
+| 2 | ** store 层写入逻辑修复**：`addDesign()` 存储 `productIcon` 时从 `product.icon`（emoji）改为 `product.iconImg`；`designToOrder()` 兼容旧数据 | ✅ 完成 |
+| 3 | **运行时映射兼容旧数据**：`designList/index.tsx` / `orders/index.tsx` 渲染时检测 `productIcon` 是否以 `/icon/` 开头，否则通过 `productId` 查 `PRODUCT_ICON_MAP` | ✅ 完成 |
+| 4 | **商品详情页弹窗去 emoji**：Hero 无实物图时和弹窗中 `<Text>{product.icon}</Text>` → `<Image src={getProductIconImg(product)} />` | ✅ 完成 |
+
+**文件变更**：
+| 文件 | 核心改动 |
+|---|---|
+| `src/utils/productConfig.ts` | 5 个产品新增 `iconImg`；新增 `PRODUCT_ICON_MAP`；新增 `getProductIconImg()` 工具函数 |
+| `src/types/index.ts` | `ProductCategory` 接口增加 `iconImg?: string` |
+| `src/utils/store.ts` | `addDesign()` 存储 `product.iconImg`；`designToOrder()` 兼容旧数据（判断 `/icon/` 前缀） |
+| `src/pages/product/index.tsx` | Hero 无图时和弹窗中 emoji → `Image` + `getProductIconImg()` |
+| `src/pages/product/index.scss` | 新增 `.hero-icon-img`(100×100)、`.modal-icon-img`(48×48) |
+| `src/pages/designList/index.tsx` | 列表 `item.productIcon` 增加运行时映射兼容（旧数据查 `PRODUCT_ICON_MAP`） |
+| `src/pages/orders/index.tsx` | 同上，订单列表 icon 兼容旧数据 |
+
+**编译结果**：`webpack 5.91.0 compiled successfully in 23.03s`，0 报错。
+
+---
+
+### Batch 8 + 9 累计新增踩坑记录
+
+| 坑 | 现象 | 解法 |
+|---|---|---|
+| **Taro React onClick 事件崩溃** | 微信 3.17.0 灰度基础库下，点击 ThemeToggle 或菜单后控制台报 `_num undefined`，页面卡死 | 全量 `onClick` → `onTap`；Taro 小程序端 `bindtap` 比 `onclick` 稳定 |
+| **Fragment + map 导致事件引用丢失** | `STATUS_MAP.map(() => <><View onTap={...}/><View/></>)` 在 React diff 时 TaroElement 找不到对应事件对象 | map 内不再使用 `<>...</>`，改用 `<View className='status-group'>` 包裹所有子节点 |
+| **手动 page.onShow 热更新叠加** | `useEffect` 里 `page.onShow = function(){...}` 每次热重载都会多包一层，最终导致 onShow 无限递归或事件异常 | 改用 Taro React 标准 Hook `useDidShow(() => sync())` |
+| **旧数据 emoji 残留** | `store.ts` 之前存的是 `product.icon`（emoji），列表用 `<Image src={item.productIcon}>` 无法显示 | ① 写入层改为存 `iconImg`；② 渲染层增加运行时映射兜底 |
+
+---
+
+## 最终累计完成统计
+
+| 批次 | 日期 | 完成项数 |
+|------|------|---------|
+| 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 项** |
+| **总计** | — | **58 项核心目标 ✅** |
+
+---
+
+### Batch 10（2026-08-01）— 夜间模式字体 + 地址弹窗 + 空状态主题适配 ✅
+
+**背景**：微信开发者工具夜间模式下订单详情页多处文字仍显示深色导致看不清；地址选择弹窗两侧间距不统一；收货地址空状态 emoji 未做夜间适配。
+
+| 序号 | 任务 | 状态 |
+|------|------|------|
+| 1 | **订单详情页夜间模式文字颜色修复**：补充 `.status-text`、`.logistics-title/num`、`.meta-title/label/value`、`.timeline-status/time/desc` 等 CSS 变量配色 | ✅ 完成 |
+| 2 | **地址选择弹窗宽度统一**：提取 `.modal-overlay` + `.addr-picker-sheet` 为 `app.scss` 全局统一样式；移除 checkout/orderDetail SCSS 中各自覆写的 width/radius 定义 | ✅ 完成 |
+| 3 | **收货地址空状态主题适配**：📍 emoji → `<Image src='/icon/地址.png'>`；空状态文字使用 CSS 变量；同步修复 `orders/index.scss` 中硬编码颜色 `#5c3a3a` / `#b08d8d` | ✅ 完成 |
+
+**文件变更**：
+| 文件 | 核心改动 |
+|---|---|
+| `src/app.scss` | 新增全局 `.modal-overlay`（fixed 全屏遮罩）+ `.addr-picker-sheet`（底部圆角白底弹窗）统一样式 |
+| `src/pages/orderDetail/index.scss` | 新增 `.status-text`、`.logistics-title/num`、`.meta-title/row/label/value`、`.timeline-status/time/desc` 等 CSS 变量配色；移除旧 `.addr-picker-sheet` 覆写 |
+| `src/pages/checkout/index.scss` | 移除旧 `.addr-picker-sheet` 覆写，复用 `app.scss` 全局定义 |
+| `src/pages/address/index.tsx` | 空状态 📍 emoji → `<Image src='/icon/地址.png' mode='aspectFit' />` |
+| `src/pages/orders/index.scss` | `.empty-text` / `.empty-sub` 硬编码颜色改为 `var(--text-primary)` / `var(--text-secondary)` |
+| `src/pages/address/index.scss` | 新增 `.empty-state`/`.empty-icon-img`/`.empty-text`/`.empty-sub` 空状态样式（图标缩至 48px，文字使用 CSS 变量） |
+
+**编译结果**：`webpack 5.91.0 compiled successfully in 19.47s`，0 报错。
+
+---
+
+## 一、历史修改回顾（Batch 1~9）
+
+### Batch 1（已完成）
+全局主题切换、字体系统、tabBar重组、商品详情页、设计清单、效果确认页、后端技术栈文档。
+
+### Batch 2（已完成）
+全局Context主题同步、登录系统、贴纸DIY、订单详情、Profile 5状态、自动筛选、图片路径修复。
+
+### Batch 3（已完成）
+完善个人主页功能（收货地址、设置页、协议页）、ThemeToggle点击修复、商品图片显示修复、Profile状态跳转修复、LoginGuard登录守卫、用户数据 openid 隔离。
+
+### Batch 4（已完成）
+主题黑白切换彻底修复（删除eventCenter多余监听）、Profile菜单登录后无反应修复、本地用户数据库（密码保护zhihui2024）。
+
+### Batch 5（已完成）
+Profile菜单登录后无反应最终修复（增加`onShow`同步）、全部emoji替换为icon图片、首页品类卡片icon化、成品展示轮播图替换为实物照片、设计确认页/订单详情页增加收货地址栏、LoginGuard空状态居中。
+
+### Batch 6（已完成）
+设计清单/订单页未登录提示居中、icon尺寸统一缩小、底部tabBar图标图片化、删除首页标题栏旁多余icon、清单/订单页列表icon图片化。
+
+### Batch 7（已完成）
+Service企业专属icon缩至28px、settings未登录头像icon缩至40px、首页轮播图文字与图片分离并适配昼夜主题。
+
+### Batch 8（Completed）
+Taro React 事件兼容修复：全量 `onClick` → `onTap`、Fragment 消除、`useDidShow` 替换、废弃 permission 清理。
+
+### Batch 9（Completed）
+emoji → icon 图片彻底收尾：productConfig 增加 `iconImg`、store 写入层修复、运行时旧数据映射兼容、商品详情页弹窗去 emoji。
+
+---