智绘微刻小程序 — 交付总结 v3

本文档供完全无上下文的新会话阅读，记录各轮重构的完整交付成果。
日期：2026-07-27（第三次修改，16:15 批次）
项目目录：F:\weixin_wordc\
技术栈：Taro 3.6.31 + React 18 + TypeScript + SCSS

一、历史修改回顾

Batch 1（已完成）

全局主题切换、字体系统、tabBar重组、商品详情页、设计清单、效果确认页、后端技术栈文档。

Batch 2（已完成，见下方二～七）

全局Context主题同步、登录系统、贴纸DIY、订单详情、Profile 5状态、自动筛选、图片路径修复。

二、本轮（Batch 3）修改任务 — 全部完成 ✅

序号	任务	状态
1	完善个人主页功能：我的设计→设计清单；收货地址（京东风格+增删改复+默认地址+省市区选择器）；设置页（修改信息/退出登录/协议占位）	✅ 完成
2	修复个人首页 ThemeToggle 点击无反应、主题不切换	✅ 完成
3	修复商品列表/详情页图片纯空白	✅ 完成
4	修复 Profile 状态条目点击无跳转 / 待设计未自动筛选	✅ 完成
5	未登录时空状态+登录按钮：设计清单/订单页包裹 `LoginGuard`	✅ 完成
6	用户数据按 `openid` 隔离：store.ts 重构为 DA 层，支持多账号本地切换	✅ 完成

三、文件变更清单

本轮新建文件（Batch 3）

文件	作用
`src/components/LoginGuard/index.tsx` + `.scss`	登录守卫组件：未登录时显示空状态+去登录按钮
`src/pages/address/index.tsx` + `.scss` + `index.config.ts`	收货地址页（京东风格卡片、省市区Picker、增删改复、默认地址）
`src/pages/settings/index.tsx` + `.scss` + `index.config.ts`	设置页（修改头像昵称、退出登录、定制协议入口、关于我们）
`src/pages/agreement/index.tsx` + `.scss` + `index.config.ts`	定制协议页（权责/隐私/售后/流程占位文本）

本轮修改的现有文件

文件	核心改动
`config/index.js`	`copy.to` 从 `'img'` 修正为 `'dist/img'`，确保图片正确输出到小程序根目录
`src/components/ThemeToggle/index.tsx`	移除 `require('@tarojs/taro').default` 动态加载，改为顶层 `import Taro`，修复点击无反应；事件名统一为 `theme:change`
`src/utils/store.ts`	重构为 DA 层：所有 design/order/address 的 Storage key 增加 `openid` 前缀隔离，后端替换时只需改此文件
`src/types/index.ts`	新增 `AddressItem` 接口（name/phone/region/detail/isDefault）
`src/app.config.ts`	注册新页面 `address`、`settings`、`agreement`
`src/pages/profile/index.tsx`	补全 6 个菜单入口路径（收货地址→address、使用帮助→agreement、设置→settings）
`src/pages/designList/index.tsx`	新增 `toDesign` Tab（聚合"未设计+设计中"）；支持读取 `designList:filter` 参数自动筛选；外层包裹 `LoginGuard`
`src/pages/orders/index.tsx`	外层包裹 `LoginGuard`

Batch 2 已完成的文件（供追溯，不再重复）

ThemeContext.tsx、LoginModal、orderDetail、全局主题同步、贴纸系统、profile 2+3 布局等。

四、编译验证结果

npx taro build --type weapp

✅ webpack 5.91.0 compiled with 2 warnings in ~20s
✅ 0 报错，0 ERROR
⚠️ 2 个 Warning（均为正常提示）：
1. AssetsOverSizeLimitWarning — 实物照片体积较大（2~12MB PNG），不影响运行，上线前可压缩优化。
2. NoAsyncChunksWarning — Webpack 懒加载建议，不涉及错误。

五、关键踩坑记录（含本轮新增）

坑	现象	解法
全局主题不同步	切换后已打开页面不刷新	`React.createContext` + `eventCenter`，各页面 `onShow` 时重新读取 Storage
设计清单切页不刷新	加入清单后切换页面看不到新条目	用 `Taro.getCurrentInstance().page.onShow` 重写，保证每次页面展现必触发
图片显示纯空白	微信小程序编译后资源路径错乱	`productConfig.ts` 的图片路径改为 `/img/xxx` 绝对路径；`config/index.js` copy 规则写为 `to: 'dist/img'`
ThemeToggle 点击无反应	在个人页点击主题按钮没有任何效果	`require('@tarojs/taro').default` 在某些构建下不返回真实 Taro 对象，改为顶层 `import Taro from '@tarojs/taro'`
Profile 待设计未筛选	点击”待设计“跳到设计清单但显示全部条目	增加 `designList:filter` Storage 参数，设计清单 `onShow` 时读取并切换到 `toDesign` Tab（聚合未设计+设计中）
用户数据未隔离	换账号登录后还能看到上一个用户的设计清单	store.ts 重构为 DA 层，Storage key 按 `openid` 前缀隔离：`design_list_${openid}`
收货地址省市区	不知如何实现三级联动	直接用微信原生组件 `<Picker mode='region'>`，无需自建数据

六、核心业务流（完整链路）

首页浏览品类 → 商品详情页（轮播图+价格+介绍）
  → 加入设计清单（弹窗选数量）→ 设计清单页（需登录，支持自动筛选）
  → 立即下单 → DIY 工作台（直接进入，无需选品）
    → 添加贴纸（相册/相机）→ 拖动调整位置 → 碰撞检测
    → 预览效果 → 确认完成 → 设计效果确认页
      → 弹窗确认下单 → 订单生成（需登录）→ 订单列表/订单详情
        → 物流时间轴追踪 → 确认收货 → 完成

个人主页
  → 待设计 / 待付款 / 待发货 / 待收货 / 已完成 → 自动跳转对应页面并筛选
  → 收货地址 → 增删改复 + 省市区选择 + 默认地址
  → 设置 → 修改信息 / 退出登录 / 定制协议

七、架构说明：前端 DA 层设计

为了方便后续接入后端，所有数据操作已通过 src/utils/store.ts 抽象为 Data Access 层：

pages/
  └─ 调用 store.getDesignList() / addDesign() / designToOrder() 等业务接口
        └─ store.ts 内封装 Taro.getStorageSync / setStorageSync
              └─ key = `${scope}_${openid}` 实现多用户隔离

后端替换方案：上线时只需重写 store.ts 中的以下函数为 wx.request HTTP 调用，页面层零改动：

getDesignList() / setDesignList()
getOrderList() / setOrderList()
getAddressList() / addAddress() / updateAddress() / deleteAddress()
getUserInfo() / setUserInfo() / clearUserInfo()

八、下一步建议（可选）

后端接入：当前 openid 为 mock 值，接入真实后端后替换 wx.login 的 code 换取真实 openid，再将 store.ts 切换为 HTTP 请求。
图片压缩：上线前将 src/img 下的实物照片压缩到 500KB 以内，避免微信包体积超限。
真机测试：在微信开发者工具中预览，确认 /img/xxx 绝对路径图片是否正常加载。
订单物流接口：当前物流为静态 mock，接入 backend 后可实现真实物流轨迹查询。

文档更新时间：2026-07-27
Batch 3（16:15 批次）6 项优化目标全部完成，编译通过。
累计完成：Batch 1 + Batch 2（12 项）+ Batch 3（6 项）= 18 项核心目标全部 ✅

7.4 KiB Raw Blame History Unescape Escape