# 通用组件清单

## 1. 说明

以下组件建议在实现时先抽象出来，避免每个页面重复拼装。  
页面规格文档会引用这些通用组件。

## 2. 全局组件

| 编码 | 组件名称 | 用途 | 必备状态 |
| --- | --- | --- | --- |
| `G01` | 顶部导航栏 | 二级页面返回、标题展示 | 默认态 |
| `G02` | 底部 TabBar | Tab 页面切换 | 选中 / 未选中 |
| `G03` | 页面空态卡片 | 列表为空时提示 | 图标 / 文案 / CTA |
| `G04` | 页面错误卡片 | 网络错误、加载失败时提示 | 错误文案 / 重试 |
| `G05` | 状态标签 Tag | 订单状态、活动状态、会员状态 | 多色标签 |

## 3. 门店与场景组件

| 编码 | 组件名称 | 用途 | 使用页面 |
| --- | --- | --- | --- |
| `G10` | 门店切换条 | 显示当前门店，点击切换 | 首页、点餐页 |
| `G11` | 场景切换条 | 外卖 / 自提 / 堂食切换 | 首页、点餐页 |
| `G12` | 门店信息卡 | 地址、营业、距离、电话 | 首页、结算页、堂食确认页 |
| `G13` | 服务规则条 | 起送价、配送费、自提规则等 | 首页、点餐页、结算页 |

## 4. 商品与购物车组件

| 编码 | 组件名称 | 用途 | 使用页面 |
| --- | --- | --- | --- |
| `G20` | 分类侧边栏 / 顶部分类条 | 分类浏览商品 | 点餐页 |
| `G21` | 商品卡片 | 展示图片、价格、标签、加购按钮 | 点餐页、活动页 |
| `G22` | 数量步进器 | 商品数量增减 | 点餐页、商品详情、购物车 |
| `G23` | 规格选项组 | 规格做法单选/多选 | 商品详情抽屉 |
| `G24` | 加料选项组 | 附加项选择 | 商品详情抽屉 |
| `G25` | 底部购物车栏 | 已选数量、金额、去结算按钮 | 点餐页 |
| `G26` | 购物车商品行 | 展示已选商品和规格组合 | 购物车抽屉 |

## 5. 结算与订单组件

| 编码 | 组件名称 | 用途 | 使用页面 |
| --- | --- | --- | --- |
| `G30` | 地址卡片 | 展示收货地址或取餐信息 | 结算页 |
| `G31` | 费用明细卡 | 展示金额构成 | 结算页、订单详情页 |
| `G32` | 优惠资产单元格 | 展示优惠券 / 积分 / 余额入口 | 结算页 |
| `G33` | 订单摘要卡 | 展示门店、商品、金额、状态 | 订单页 |
| `G34` | 订单时间轴 | 展示履约节点 | 订单详情页、退款详情页 |
| `G35` | 固定底部操作栏 | 继续支付、催单、退款、评价等 CTA | 结算页、订单详情页 |

## 6. 资产与服务组件

| 编码 | 组件名称 | 用途 | 使用页面 |
| --- | --- | --- | --- |
| `G40` | 用户头部卡 | 头像、昵称、会员等级 | 我的页、会员中心 |
| `G41` | 资产总览卡 | 券、积分、余额、次卡摘要 | 我的页 |
| `G42` | 资产列表项 | 进入券、积分、储值、次卡详情 | 我的页 |
| `G43` | 活动券卡片 | 满减券、折扣券、免配送费券 | 领券中心 |
| `G44` | 充值方案卡 | 展示充值金额、赠送金额、到账金额 | 储值充值页 |
| `G45` | 次卡卡片 | 展示次卡名称、剩余次数、有效期 | 次卡页 |
| `G46` | 消息列表项 | 展示消息标题、摘要、时间、未读状态 | 消息中心 |

## 7. 通用实现要求

- 所有卡片组件需要支持禁用态或不可点击态
- 列表项需要支持右侧箭头、辅助文案、角标等变化
- 底部固定操作栏需要考虑安全区
- 金额展示组件统一格式化
- 状态标签颜色语义在整个应用中保持一致