ServiceMessage
服务通知卡片 · 复刻微信「服务通知」会话内消息卡(模板/订阅消息) · 头部(头像+来源+⋯)/正文(标题+键值字段或自定义 children)/底部(引导文字+小程序入口) · 数据驱动 fields + onMore/onAction 交互 + footer/action 可定制 · 区别 Notification(命令式四角 toast) · 复用 Avatar/_icons·全吃 token 明暗自适配
瑞luckincoffee 瑞幸咖啡
商品领取提醒
取餐号361
商品数量1
商品详情橙C冰茶
09:17
瑞luckincoffee 瑞幸咖啡
新品上新通知
商品名称海盐焦糖拿铁🌊 夏日限定回归
推荐理由澳洲海盐 x 馥郁焦糖，可盐可甜~
活动内容🐱 Hello Kitty 联名款
全状态
瑞luckincoffee 瑞幸咖啡
商品领取提醒
取餐号361
商品数量1
商品详情橙C冰茶
09:17
瑞luckincoffee 瑞幸咖啡
新品上新通知
商品名称海盐焦糖拿铁🌊 夏日限定回归
推荐理由澳洲海盐 x 馥郁焦糖，可盐可甜~
活动内容🐱 Hello Kitty 联名款
顺顺丰速运
您的包裹已签收
您的快件已由 本人 签收，感谢使用顺丰速运。期待再次为您服务。
运单号 SF1234567890123 · 今天 14:32
OA企业 OA · 审批助手
报销单已通过
单据编号BX-2026-000812
报销金额¥ 1,280.00
审批人李经理
审批结果已通过
系统通知
您有 1 条新的系统消息待查看
Playground
瑞luckincoffee 瑞幸咖啡
商品领取提醒
取餐号361
商品数量1
商品详情橙C冰茶
<ServiceMessage
avatar={{ src: logo, fallback: "瑞" }}
source="luckincoffee 瑞幸咖啡"
onMore={() => openMore()}
title="商品领取提醒"
fields={[
{ label: "取餐号", value: "361" },
{ label: "商品数量", value: "1" },
{ label: "商品详情", value: "橙C冰茶" },
]}
footer="进入小程序查看"
action={{ icon: <MiniProgramIcon />, label: "小程序" }}
onAction={() => openMiniProgram()}
/>