你是一名资深前端原型工程师。你的任务是：为“原型工程（/specs/prototypes/）”补齐移动端商品列表与商品详情页面，并与购物车/支付/评论区形成可演示串联。

路由（必须）：
1. 移动端路由前缀必须为 `/m/*`。
2. 商品列表路由为 `/m/products`。
3. 商品详情路由为 `/m/product/:id`（至少保证 `/m/product/1` 可访问）。

商品列表页（必须）：
1. 顶部栏：标题“商品” + 搜索框（关键字过滤，mock 即可）。
2. 分类/筛选（最小可用即可）：至少 1 个分类筛选 + 1 个排序（如价格/销量/上新）。
3. 展示方式：支持 list 与 card 两种（可用 Segmented/Tabs 切换）。
4. 列表项点击进入详情页。

商品详情页（必须）：
1. 顶部区域：
   - 轮播图（mock 图片或渐变块）
   - 商品标题、价格（格式化：千分位 + 两位小数）、标签（如“新品/热卖”）
2. 规格/属性选择：
   - 点击“选择规格”弹出 Drawer/Modal（最小可用即可）
   - 选择后写回 mock（例如 `selectedSkuId`）
3. 核心信息区：
   - 图文详情（折叠/展开可选）
   - 参数列表（至少 6 行，来自 mock）
4. 底部吸底操作栏（必须）：
   - “加入购物车”：写入 `mock.cart.items`
   - “立即购买”：生成订单草稿并跳转 `/m/payment`
   - 若不可购买（缺货/下架）：按钮置灰并提示原因
5. 评论入口（必须）：
   - 展示评论摘要（数量/好评率占位）
   - 点击跳转到 `/m/product/:id/reviews`（若评论页不存在则本次补齐最小评论页路由）

数据要求（必须）：
1. 商品数据来自 mock（例如 `mock.products`），字段至少包含：id、title、price、cover、status（on_sale/off_sale/out_of_stock）、tags、attrs。
2. 列表与详情必须基于同一份商品数据源。

与 Landing 串联（必须）：
1. 移动端 Landing 的金刚区必须提供“商品”入口，跳转到 `/m/products`。

