docs: split prototype specs and add execution guides
This commit is contained in:
86
docs/02-信息架构与路由.md
Normal file
86
docs/02-信息架构与路由.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# 信息架构与路由
|
||||
|
||||
## 1. 顶层信息架构
|
||||
|
||||
小程序采用 `4 个 Tab + 若干二级页面 + 若干弹层 / 抽屉组件` 的结构。
|
||||
|
||||
### 1.1 Tab 页面
|
||||
|
||||
| 编码 | 页面名称 | 路由建议 | 页面层级 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `T01` | 首页 | `pages/tab/home/index` | Tab | 选店、活动导流、推荐 |
|
||||
| `T02` | 点餐 | `pages/tab/menu/index` | Tab | 商品浏览、加购、结算入口 |
|
||||
| `T03` | 订单 | `pages/tab/orders/index` | Tab | 订单列表、履约、售后 |
|
||||
| `T04` | 我的 | `pages/tab/me/index` | Tab | 资产、消息、服务、复购 |
|
||||
|
||||
### 1.2 二级页面
|
||||
|
||||
| 编码 | 页面名称 | 路由建议 | 页面层级 | 入口来源 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `P01` | 门店选择页 | `pages/store/select/index` | 二级页 | 首页、点餐页 |
|
||||
| `P02` | 地址管理页 | `pages/address/list/index` | 二级页 | 我的、结算页 |
|
||||
| `P03` | 结算确认页 | `pages/checkout/index` | 二级页 | 点餐页 |
|
||||
| `P04` | 支付成功页 | `pages/payment/success/index` | 二级页 | 结算确认页 |
|
||||
| `P05` | 订单详情页 | `pages/order/detail/index` | 二级页 | 订单页、支付成功页 |
|
||||
| `P06` | 退款申请页 | `pages/order/refund/apply/index` | 二级页 | 订单详情页 |
|
||||
| `P07` | 退款详情页 | `pages/order/refund/detail/index` | 二级页 | 订单页、订单详情页 |
|
||||
| `P08` | 评价页 | `pages/review/create/index` | 二级页 | 订单详情页 |
|
||||
| `P09` | 领券中心页 | `pages/coupon/center/index` | 二级页 | 首页、我的 |
|
||||
| `P10` | 秒杀活动页 | `pages/activity/seckill/index` | 二级页 | 首页、点餐页 |
|
||||
| `P11` | 限时折扣活动页 | `pages/activity/flash-sale/index` | 二级页 | 首页、点餐页 |
|
||||
| `P12` | 会员中心页 | `pages/member/center/index` | 二级页 | 我的 |
|
||||
| `P13` | 积分商城页 | `pages/points/mall/index` | 二级页 | 我的 |
|
||||
| `P14` | 储值充值页 | `pages/prepaid/index` | 二级页 | 我的 |
|
||||
| `P15` | 次卡页 | `pages/pass-card/index` | 二级页 | 我的 |
|
||||
| `P16` | 消息中心页 | `pages/message/center/index` | 二级页 | 我的 |
|
||||
| `P17` | 帮助中心页 | `pages/help/center/index` | 二级页 | 我的 |
|
||||
| `P18` | 堂食扫码确认页 | `pages/dine-in/confirm/index` | 二级页 | 扫码入口、首页 |
|
||||
|
||||
### 1.3 弹层 / 抽屉 / 组件级页面
|
||||
|
||||
| 编码 | 名称 | 建议形态 | 所属页面 | 说明 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `C01` | 商品详情抽屉 | 底部抽屉 / 右滑抽屉 | 点餐页 | 规格、加料、数量选择 |
|
||||
| `C02` | 购物车抽屉 | 底部抽屉 | 点餐页 | 已选商品清单 |
|
||||
| `C03` | 登录授权弹层 | 中央弹窗 / 底部弹层 | 全局 | 订单与资产前拦截 |
|
||||
| `C04` | 优惠选择弹层 | 底部抽屉 | 结算页 | 券、积分、余额选择 |
|
||||
| `C05` | 支付方式弹层 | 底部抽屉 | 结算页 | 微信支付 / 余额支付 |
|
||||
| `C06` | 地址选择抽屉 | 底部抽屉 | 结算页 | 快捷切换地址 |
|
||||
|
||||
## 2. 页面层级关系
|
||||
|
||||
### 2.1 主链路关系
|
||||
|
||||
`首页 / 点餐 / 我的` → `门店选择`
|
||||
`点餐` → `商品详情抽屉` → `购物车抽屉` → `结算确认页` → `支付成功页` → `订单详情页`
|
||||
`订单页` → `订单详情页` → `退款申请页 / 评价页`
|
||||
`我的` → `会员中心 / 积分商城 / 储值充值 / 次卡 / 消息中心 / 帮助中心`
|
||||
|
||||
### 2.2 堂食链路关系
|
||||
|
||||
`扫码` → `堂食扫码确认页` → `点餐页(堂食场景)` → `商品详情抽屉` → `购物车抽屉` → `结算确认页` → `订单详情页`
|
||||
|
||||
## 3. Tab 与二级页切换规则
|
||||
|
||||
- Tab 页面之间通过底部导航切换
|
||||
- 二级页面统一采用顶部导航栏返回
|
||||
- `商品详情抽屉` 和 `购物车抽屉` 不单独占用路由栈
|
||||
- `结算确认页`、`订单详情页`、`会员中心页` 等重要业务页使用完整页面承载
|
||||
|
||||
## 4. 页面显示规则
|
||||
|
||||
### 4.1 Tab 页面
|
||||
- 保持底部 TabBar 可见
|
||||
- 顶部导航不显示返回按钮
|
||||
- 页面滚动位置可按产品需要保留
|
||||
|
||||
### 4.2 二级页面
|
||||
- 显示顶部导航和返回按钮
|
||||
- 进入后覆盖当前 Tab 内容
|
||||
- 返回时回到来源页面
|
||||
|
||||
### 4.3 抽屉与弹层
|
||||
- 不应中断当前页面上下文
|
||||
- 应支持手势关闭 / 点击遮罩关闭(支付与关键确认除外)
|
||||
- 关闭后保留当前页面已选状态
|
||||
|
||||
Reference in New Issue
Block a user