sqxp-wx-client-vs-miniprogram-diff.md 11 KB
客户小程序：miniprogram → sqxp-wx 差异分析（功能与样式）
分析日期：2026-04-19
判定标准：以 miniprogram 为唯一权威；不得在 sqxp-wx 中保留或新增源端不存在的业务能力或界面结构（仅允许为适配工程差异做等价技术替换，如请求封装、无 Vant 时的组件替换，但交互与视觉须对齐源端）。
1. 分析范围
| 类别 | miniprogram 路径 |
sqxp-wx 路径 |
|---|---|---|
| 客户端页面 | src/pages/client/**/*.vue |
pages/client/**/*.vue |
| 客户端公共组件 | src/components/client/** |
components/client/** |
| 拨号行内组件 | src/components/phone-dial-inline.vue |
components/phone-dial-inline.vue |
| 评价 API 封装 | src/api/reviewApi.ts |
无对应文件（逻辑散落在页面内） |
| 工具函数 | src/utils/*（与客户页相关的） |
utils/* |
| 静态数据 | src/static/data/china-region-cascader.json |
缺失 |
2. 路由与页面「文件是否存在」
客户端 17 个 .vue 页面在两侧均存在，pages.json 中客户端子包/页面注册基本齐全。
结论：路由与页面文件壳已对齐；不等于功能与样式已对齐。
3. 页面级差异总览（行数为粗粒度参考）
行数差异大通常表示：接口组合、分页、筛选、布局层级、样式块、边界处理等与源不一致。最终以对照源逐屏验收为准。
外链：其它文档若需按页直链，请使用下文 §3.1 中的diff-client-*HTML 锚点（与 §3 表中结论一致）。
| 页面路径 | miniprogram 行数 | sqxp-wx 行数 | 差异（wx−源） | 功能与样式结论（概要） |
|---|---|---|---|---|
pages/client/home/home.vue |
957 | 174 | −783 | 重大差异：源为「一级分类多页轮播 + 左侧栏分页 + 商品分页/筛选 + TOKEN/分类/价格清单」等完整询价首页；目标为「关键词 + 简单列表 + 加购 + 商品浮层」。布局、接口组合、交互与样式均未等效。 |
pages/client/cart/cart.vue |
890 | 301 | −589 | 重大差异：源含地址卡片展示选中地址、分页购物车行、与浮层关闭后刷新/勾选同步等；目标大量删减，样式与区块结构与源不一致。 |
pages/client/order/create/create.vue |
742 | 290 | −452 | 重大差异：源使用 van-button 等 Vant 布局与样式体系，区块划分、间距、表单与商品行交互与目标不同；功能上需逐项对照提交参数、删除/排除行、支付方式等。 |
pages/client/order/order.vue |
577 | 234 | −343 | 重大差异：订单列表标签、卡片、状态映射、跳转与空态等通常较源简化。 |
pages/client/product/detail.vue |
872 | 503 | −369 | 较大差异：源含评价 API、统计、Tab/富文本等组合；目标需对照是否缺字段、缺区块、缺样式。 |
pages/client/product/view.vue |
588 | 289 | −299 | 较大差异：商品详情展示与加购/底部栏与源不一致风险高。 |
pages/client/review/list.vue |
554 | 216 | −338 | 较大差异：源通过 reviewApi 与类型定义组织请求；目标行数显著少，筛选/分页/点赞/预览等需逐条对照。 |
pages/client/review/create.vue |
555 | 193 | −362 | 较大差异：评价表单字段、媒体上传、匿名、标签等与源需逐项对照。 |
pages/client/address/select.vue |
487 | 115 | −372 | 重大差异：地址选择列表 UI、默认选中、管理入口等与源不一致风险高。 |
pages/client/address/edit.vue |
464 | ≈460 | ≈0 | 已按源对齐主链路：china-region-cascader.json + multiSelector + SCSS；仍建议与源文件做 diff 扫尾（校验分支、边界市辖区）。 |
pages/client/address/address.vue |
438 | 178 | −260 | 较大差异：列表分页、行内电话组件、操作区布局等通常较源简化。 |
pages/client/order/pay/pay.vue |
349 | 187 | −162 | 中等差异：支付流程核心可能有，展示与异常分支、样式与源需对照。 |
pages/client/invoice/invoice.vue |
290 | 149 | −141 | 较大差异：开票列表、可申请订单弹窗等逻辑与 UI 需对照。 |
pages/client/order/detail/detail.vue |
737 | 705 | −32 | 接近：近期已按源对齐布局、配送员、电话拨号、商品浮层、底部 Tab 等；仍需做一次像素级/样式块级与行为细节对照（含 scroll-view 与底部安全区）。 |
pages/client/profile/profile.vue |
312 | 105 | −207 | 重大差异：源含 头像 URL 解析、仪表盘统计接口、联系客服（拉号+拨号）、菜单项组合与 SCSS 分层样式；目标为简化卡片 + 固定菜单。 |
pages/client/refund/refund.vue |
128 | 79 | −49 | 中等差异：列表字段与空态、样式需对照。 |
pages/client/settlement/settlement.vue |
137 | 73 | −64 | 中等差异：统计区与列表样式、分页需对照。 |
3.1 按页面跳转锚点（与上表同一结论，供其它文档外链）
以下 <a id> 为稳定锚点；说明文字与 上表 中对应行一致（若某页已大幅对齐，仍保留锚点便于文档回链）。
pages/client/address/edit.vue — 主链路已对齐源：本地 china-region-cascader.json + multiSelector + 与源一致的表单/开关/提交样式；建议与源再做一次 diff 扫尾。
pages/client/refund/refund.vue — 中等差异：列表字段与空态、样式需对照。
pages/client/review/list.vue — 较大差异：源通过 reviewApi 与类型定义组织请求；目标行数显著少，筛选/分页/点赞/预览等需逐条对照。（另见本文 §4.1 表格中「评价 API」行。）
pages/client/review/create.vue — 较大差异：评价表单字段、媒体上传、匿名、标签等与源需逐项对照。
pages/client/invoice/invoice.vue — 较大差异：开票列表、可申请订单弹窗等逻辑与 UI 需对照。
pages/client/settlement/settlement.vue — 中等差异：统计区与列表样式、分页需对照。
pages/client/product/view.vue — 较大差异：商品详情展示与加购/底部栏与源不一致风险高。
pages/client/product/detail.vue — 较大差异：源含评价 API、统计、Tab/富文本等组合；目标需对照是否缺字段、缺区块、缺样式。
4. 共享模块与依赖差异
4.1 源有、sqxp-wx 无或不等价
| 模块 | miniprogram | sqxp-wx | 影响 |
|---|---|---|---|
| 评价 API | src/api/reviewApi.ts |
api/reviewApi.js 已补充；评价相关页逐步改为引用 |
product/detail 等若仍混用旧写法需扫尾。 |
| 头像 URL | utils/avatar.ts |
utils/avatar.js 已补充；profile 尚未接入 |
profile 仍待接 resolveUserAvatarUrl。 |
| 客服电话 | utils/service-contact.ts |
utils/service-contact.js 已补充；profile 尚未接入 |
profile 仍待接「联系客服」。 |
| 仪表盘统计 | API_URL.CLIENT_DASHBOARD（config/api.ts） |
API_URL.CLIENT_DASHBOARD 已导出；profile 尚未调用 |
顶部三数仍为占位直至 profile 对齐。 |
| 省市区数据 | static/data/china-region-cascader.json |
static/data/ 已复制 |
address/edit 已使用；其它页若需同数据再引用。 |
4.2 组件实现差异（允许技术替换，但须对齐行为与视觉）
| 组件 | 说明 |
|---|---|
phone-dial-inline |
源用 Vant VanIcon；目标用字符 ☎ 等。属工程差异替换时，须以源布局/字号/点击区域为基准做视觉对齐。 |
product-detail-overlay |
已从源迁入并改为 parseResponseJson；仍建议与源文件做 diff 定期对齐（防止后续单侧改动分叉）。 |
4.3 技术栈与样式语言
| 项 | miniprogram | sqxp-wx |
|---|---|---|
| 脚本 | TypeScript + parseResponseJson / res.data 混用（以各页为准） |
JavaScript + 多页统一 parseResponseJson |
| UI 库 | 部分页使用 Vant（如 van-button） |
多为 原生 button / view，样式与源不一致属系统性差异 |
| 样式 | 大量 lang="scss" 嵌套 |
不少页为 单行 scoped CSS，可维护性与视觉层级与源不同 |
5. 「仅 sqxp-wx 存在」且与源不一致的点（收敛方向：删或改回与源一致）
以下按「不要添加功能」原则，属目标端相对源多出来或偏离、需在完全对齐时处理的事项：
profile菜单- 源端
menuItems：我的订单、收货地址、结算记录、退款记录（另单独有 联系客服 行）。 - 目标端
menuItems含 「我的发票」 等源profile菜单中未出现的入口。 - 发票页在源
pages.json已注册，且在仓库miniprogram/src内 未检索到 任何navigateTo/switchTab指向该页（profile亦无入口）。完全对齐源 profile UI 时，应移除目标端 profile 中源所无的菜单项；发票页.vue本身仍须与源页 功能与样式对齐（页面可达性以源「已注册页面」为准，不在 profile 硬加入口）。
- 源端
历史文档
docs/sqxp-wx-迁移进度记录.md中部分描述（如订单详情评价入口）可能与当前「以源为准」的代码不一致，以代码与本文档为准。
6. 样式对齐的通用检查项（适用于所有客户页）
以 miniprogram 对应 .vue 的 <style lang="scss" scoped>（及非 scoped 的 page 样式）为基准：
- 页面根布局（
100%/flex/scroll-view/ 固定底栏 / 安全区）是否与源一致 - 卡片圆角、间距、字体阶梯、主色
#07c160使用是否与源一致 - 列表行高、分割线、空态、加载更多提示是否与源一致
- 是否存在源有而目标省略的 区块标题、辅助说明、二次确认
7. 结论（是否迁移完毕）
| 维度 | 结论 |
|---|---|
| 页面文件是否齐 | 是（17 页均在） |
| 功能是否与源等效 | 否（首页、购物车、确认订单、订单列表、地址、评价、商品详情、个人中心等均为高风险未等效区） |
| 样式是否与源等效 | 否（Vant vs 原生、SCSS 嵌套 vs 精简 CSS、布局删减） |
整体结论：当前状态为 「核心链路可跑 + 多页大幅简化」，不满足「客户小程序功能与样式已全部从 miniprogram 迁移到 sqxp-wx 且无遗漏」的目标。
8. 建议的验收方式（后续执行迁移时使用）
- 按页面建立 用例清单（接口、分页、筛选、跳转、异常 Toast）。
- 每页 双开真机或同分辨率模拟器 对照源与目标录屏比对。
- 每页合并前做 diff：以源文件为左侧，目标为右侧，直至模板结构、样式块、脚本分支对齐。
（本文仅作差异登记，具体执行顺序见 docs/sqxp-wx-client-migration-remaining-plan.md。）