JD Mall 复刻 · 移动端单页 App
把一张 2256×2560 的手机 UI 设计稿（12 个界面）重建为一个可用的单页 App：
不只还原视觉，还实现了页面功能、数据流与页面间跳转，并按同一套设计语言补齐了
设计稿未画但应用必需的页面。
打开方式：手机浏览器访问 http://<内网IP>:8000，或双击 index.html。
原始设计稿（2256×2560，全比例未裁剪）：
一、应用结构
页面（16 个）
| 分组 | 页面 | 说明 |
|---|---|---|
| Tab 页 | 首页 / 分类页* / 发现页* / 购物车 / 个人中心 | 底部 5 个 tab 互跳 |
| 交易 | 商品详情页 → 购物车 → 结算页 → 支付页* → 支付成功* | 完整下单链路 |
| 订单 | 订单列表页 → 订单详情页 → 物流跟踪页 / 售后·退款页 | 状态筛选、确认收货、售后 |
| 我的 | 地址管理页 → 地址编辑页* / 优惠券·会员权益页 | 地址增删改、默认地址、优惠券选用 |
* 为设计稿未画、按同风格补齐的页面。
针对移动端的处理
- 去掉假状态栏：参考稿顶部的
9:41 + 信号/WiFi/电池是设计稿的示意状态栏，
真机上系统自带，已从所有页面移除；顶部用env(safe-area-inset-top)适配刘海屏。 - 修正底部行纵向压缩：参考稿底部 4 页（售后/退款、个人中心、地址管理、优惠券）
的宽高比只有 1.44–1.54，而前两行是 1.59–1.98 —— 它们是被整图分辨率纵向压扁的。
现已按前两行的比例（1.91）拉伸参考图到 375×716 逻辑高度，并把这 4 页的排版重新
舒展（字号、行距、卡片内边距），不再是挤在一起的样子。 - 页面按 375 逻辑宽度等比铺满，短页面贴顶显示，底部用页面自身底色填充。
数据流（真的会变）
商品详情 选颜色/尺码 → 加入购物车 → 购物车角标 +1
购物车 勾选/全选/加减数量 → 合计实时计算 → 去结算（只带勾选商品）
结算页 选地址/优惠券/支付方式 → 提交订单 → 购物车清空 → 订单列表 +1 条
订单详情 确认收货 → 状态流转 → 订单列表状态同步
售后 提交申请 → 订单状态变「售后」
地址管理 新增/编辑/删除/设默认 → 结算页地址同步
优惠券 立即使用 → 结算页抵扣金额变化
数据存在 localStorage（key jd-mall-replica-v1），刷新不丢；控制台执行
Store.reset() 可恢复初始数据。
二、代码结构
两个入口
| 文件 | 行数 | 用途 |
|---|---|---|
index.html |
45 | 薄壳：只声明 meta / 3 个样式表 / 21 个脚本，代码全在 src/ 下 |
standalone.html |
3445 | 单文件便携版（内联全部 CSS+JS），发给别人或离线打开用 |
两者由 tools/build_app.py 从同一份模块清单生成，--check 可校验是否同步；
tools/entry_check.mjs 会验证两个入口渲染结果逐像素一致。
源码
src/
tokens.css 设计 token：色板 / 字号 / 圆角 / 间距 / 固定高度
base.css 重置 + 应用外壳 + 安全区 + 转场
components.css 组件库：导航栏 / TabBar / 操作栏 / 卡片 / 列表行 /
按钮 / chip / 步进器 / 时间轴 / 徽标 / 空状态
icons.js SVG 图标库（28 个图标，统一 1.6 描边 + currentColor）
data/seed.js 种子数据（用户/店铺/商品/订单/地址/优惠券），接后端时整包删除
store.js 数据层：持久化 + 订阅 + 购物车/订单/地址/优惠券业务方法
ui.js DOM 构造 + 公共构件（navbar / tabbar / actionBar / card / cell / icon）
router.js hash 路由 + 屏幕渲染 + 视口自适应 + 弹层 + 手势
screens/*.js 16 个页面，一页一文件（最大 181 行）
工具
tools/
serve.py 开发服务器（禁用缓存，避免手机拿到旧文件）
build_app.py 生成 index.html（薄壳）+ standalone.html（单文件）
entry_check.mjs 两个入口渲染一致性检查
flow_app.mjs 端到端：业务链路 + 16 页导航图 + 底栏贴底
shot_sheet.py 带 iPhone 外框的 16 页截图 + 拼版图
verify_app.py 逐页像素回归（与参考稿对比）
shoot.mjs 精确截图（setViewport，绕开 Chrome CLI 的窗口尺寸陷阱）
split_pages.py 从整图拆出 12 张单页图
measure.py / page_report.py / gen_page.py / verify_all.py / …
早期「绝对定位像素级复刻」管线，保留作量测参考
三、关键设计决策
1. 去掉假状态栏
设计稿顶部的 9:41 + 信号/WiFi/电池 是示意状态栏，真机系统自带 —— 16 个页面全部移除，
改用 env(safe-area-inset-top) 适配刘海屏。
2. 底部行纵向压缩修正
参考稿底部 4 页（售后/退款、个人中心、地址管理、优惠券）宽高比只有 1.44–1.54，
而前两行是 1.59–1.98 —— 它们是被整图分辨率纵向压扁的。现已按前两行比例（1.91）
拉伸参考图（assets/pages-stretched/），并重排这 4 页的字号/行距/内边距。
3. 底栏永远贴屏幕底
早期版本把页面高度写死成设计稿的逻辑高度（536–742），在 844 高的手机上底栏会悬空
72–286px。现在页面高度 = 视口高 ÷ 缩放比：头部固定、内容区滚动、底栏/TabBar 自然贴底。
三种视口（360×640 / 390×844 / 430×932）实测全部 0px 间隙。
4. 图标矢量化
早期 106 张图标是从截图裁的位图，在 2x 屏上被放大 1.64 倍 → 发虚；同一个箭头有 18 种
尺寸的位图。现在统一为 28 个内联 SVG（src/icons.js）。保留裁图的只有商品照片、
品牌 logo、3D 分类图标、618 横幅、地图、头像。素材库从 153 张精简到 36 张。
5. 统一组件与 token
底部操作栏统一 --h-actionbar，字号/圆角/间距全部走 token；卡片与列表行抽成
UI.card / UI.cell 复用。
四、验证
功能链路（node tools/flow_app.mjs，390×844 真实触摸）：
首页 → 搜索页 → 商品详情页 → 选规格弹层 → 加入购物车（角标 3→4）
→ 购物车 → 结算页 → 提交订单（订单 3→4，购物车清空）→ 支付 → 支付成功
视觉回归（python3 tools/verify_app.py，渲染到卡片尺度与参考图逐像素对比）：
| 页面 | 差异均值 | SSIM | 页面 | 差异均值 | SSIM |
|---|---|---|---|---|---|
| 首页 | 14.3 | 0.78 | 订单详情页 | 36.5 | 0.67 |
| 搜索页 | 15.5 | 0.69 | 物流跟踪页 | 12.0 | 0.70 |
| 商品详情页 | 14.1 | 0.70 | 售后/退款页 | 12.8 | 0.76 |
| 购物车 | 26.1 | 0.68 | 个人中心页 | 26.6 | 0.71 |
| 结算页 | 15.4 | 0.68 | 地址管理页 | 27.0 | 0.74 |
| 订单列表页 | 15.1 | 0.67 | 优惠券/会员页 | 28.9 | 0.57 |
说明：组件化布局与参考稿的绝对像素存在 1–3px 的累计偏移（行高、内边距取整），
因此逐像素差异比早期的绝对定位版本高；视觉上版式、配色、层级一致。
五、已知限制
- 商品照片来自参考图裁切，分辨率上限即参考图（放大超过 1.6× 会变虚）；图标已全部矢量化。
- 本机无苹方字体，本地比对的文字差异偏大；交付页用系统字体栈，Mac 上直接命中苹方。
- 评价、设置、直播、店铺主页等二级页面用 toast 占位，未展开实现。
六、目录
index.html 薄壳入口（45 行）
standalone.html 单文件便携版（构建产物）
src/ 应用源码：token / 组件 / 图标 / 数据 / 路由 / 16 个页面
tools/ 构建、截图、回归、验收脚本
data/pages/*.spec.json 早期量测数据（每页元素坐标/字号/颜色）
assets/crops/ 36 张裁图：商品照片 / 品牌 logo / 3D 分类图标 / 横幅 / 地图
assets/pages/ 12 张单页参考图（拆图结果）
assets/pages-stretched/ 底部 4 页按前两行比例拉伸后的参考图
assets/fonts/ 子集化字体（813 字形 / 230KB）
analysis/shots/ 带设备外框的页面截图（构建产物，已 gitignore）
docs/PAGE_GUIDE.md 早期单页复刻作业指南
