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

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

一、历史修改回顾

Batch 1（已完成）

见 review1.md 历史版本。核心完成：全局主题切换、字体系统、tabBar重组、商品详情页、设计清单、效果确认页、后端技术栈文档。

二、本轮修改任务 — 全部完成 ✅

序号	任务	状态
1	全局主题系统升级为 Context 模式（点击即所有页面同步）+ 纯色背景去掉条纹	✅ 完成
2	设计清单页面实时刷新（`onShow` 钩子保证切页即刷新）	✅ 完成
3	微信登录系统（`wx.login` + `chooseAvatar` + `nickname` input）	✅ 完成
4	修复商品图片路径（相对路径改为根路径 `/img/xxx` + copy 配置）	✅ 完成
5	删除 DIY 页品种选择卡片，直接进入工作台	✅ 完成
6	词云生成不再跳转 DIY，仅保存图片	✅ 完成
7	DIY 贴纸系统（上传多张图/删除/拖动/缩放/碰撞检测）	✅ 完成
8	订单详情页（淘宝风格：物流时间轴+地址+订单信息+设计预览）	✅ 完成
9	Profile 页 5 状态 2+3 布局（待设计/待付款/待发货/待收货/已完成）	✅ 完成
10	登录拦截（需登录才能访问设计清单、订单等敏感页面）	✅ 完成
11	订单列表页接收 profile 跳转的参数自动筛选	✅ 完成
12	所有 11 个页面接入 ThemeContext	✅ 完成

三、文件变更清单

新建文件

文件	作用
`src/context/ThemeContext.tsx`	全局主题 Context + Provider + useThemeContext hook
`src/components/LoginModal/index.tsx` + `.scss`	登录弹窗组件（含头像选择和昵称输入）
`src/pages/orderDetail/index.tsx` + `index.scss` + `index.json` + `index.config.ts`	订单详情页（淘宝风格）

修改的现有文件

文件	核心改动
`src/app.tsx`	根组件包裹 `<ThemeProvider>`
`src/app.scss`	移除 `background-image` 条纹，改为纯色背景
`src/app.config.ts`	新增 `pages/orderDetail/index` 路由
`src/hooks/useTheme.ts`	改为基于 `useContext(ThemeContext)` 实现
`src/components/ThemeToggle/index.tsx`	接入 Context，触发 `theme:storageChanged` 全局事件
`src/custom-tab-bar/index.tsx`	移除 fixed 白色背景，支持跟随主题变量
`src/utils/productConfig.ts`	图片路径改为 `/img/xxx` 绝对根路径
`src/types/index.ts`	添加 `StickerItem` 接口，更新 `DesignItem` 的 `designData` 字段
`config/index.js`	`copy` 规则增加 `{ from: 'src/img', to: 'img' }`
`src/pages/index/index.tsx`	接入 `useThemeContext()`
`src/pages/product/index.tsx`	接入 `useThemeContext()`
`src/pages/diy/index.tsx`	重写：删除步骤1选品，改为贴纸系统（上传/删除/拖动/缩放/碰撞检测）
`src/pages/diy/index.scss`	重写：支持贴纸列表、碰撞红色标注、控制栏
`src/pages/checkout/index.tsx`	支持展示贴纸列表的预览
`src/pages/designList/index.tsx`	`onShow` 自动刷新，接入 Context
`src/pages/orders/index.tsx`	读取 `orders:filter` 参数自动切换 Tab
`src/pages/profile/index.tsx`	重写：5 状态 2+3 布局 + 登录弹窗 + 登录拦截 + Context
`src/pages/profile/index.scss`	重写：支持 2+3 网格、登录弹窗样式
`src/pages/service/index.tsx`	接入 `useThemeContext()`
`src/pages/wordcloud/index.tsx`	移除「前往个性化定制」按钮，仅保存图片
`src/utils/store.ts`	新增 `setUserInfo`/`getUserInfo` 暴露接口（mock openid）

四、编译验证结果

npx taro build --type weapp

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

五、关键踩坑记录

坑	现象	解法
全局主题不同步	切换后已打开页面不刷新	引入 `React.createContext`，`ThemeToggle` 切换时写入 Storage + `eventCenter.trigger('theme:storageChanged')`，各页面 `onShow` 时重新读取
设计清单切页不刷新	加入清单后切换页面看不到新条目	用 `Taro.getCurrentInstance().page.onShow` 代替 `eventCenter`，保证每次页面展现必触发
图片显示纯空白	微信小程序编译后资源路径错乱	`productConfig.ts` 的图片路径改为 `/img/xxx` 绝对路径，并在 `config/index.js` copy 到 `dist/img`
DIY 贴纸碰撞检测	两张贴纸贴在一起时无法阻止进入下一步	矩形边界框（AABB）碰撞检测，只要两个贴纸矩形相交即标红 `isOverlapping=true`，预览/完成时若存在 `hasOverlap=true` 则禁用提交
Profile 5 状态空间不够	单行 5 个状态拥挤	采用 2+3 两排布局：第一排 2 个（待设计/待付款），第二排 3 个（待发货/待收货/已完成），用虚线分隔+细线水平分隔
微信登录获取真实头像	`wx.getUserInfo` 已不再返回真实头像和昵称	使用微信标准 `open-type="chooseAvatar"` + `input type="nickname"` 组件，让用户手动选择和填写
订单页自动筛选	Profile 点击状态跳转后订单列表未自动切换 Tab	跳转前 `Taro.setStorageSync('orders:filter', 'pending')`，订单页 `onShow` 时读取并应用

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

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

七、下一步建议（可选）

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

文档更新时间：2026-07-27
本轮重构 12 项核心目标全部完成，编译通过。

7.0 KiB Raw Blame History Unescape Escape

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

一、历史修改回顾

Batch 1（已完成）

二、本轮修改任务 — 全部完成 ✅

三、文件变更清单

新建文件

修改的现有文件

四、编译验证结果

五、关键踩坑记录

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

七、下一步建议（可选）

7.0 KiB

Raw Blame History