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