SmoUI
小程序权益SmoUI 自研
组件总览

小程序权益券通行证

用于宠粉现场个人中心的单张权益券。承载商家、权益名称、预约状态和出示/预约动作；可放入滚轮、堆叠或普通列表容器，但组件自身不负责筛选和滚动逻辑。

查看预览Registry 资产
定位

基础组件直接使用 shadcn/ui；SmoUI 维护中文业务规则、模板和验收流程。

源码路径
registry-src/smo-miniprogram-benefit-pass

快速开始

页面里直接调用 SmoUI 业务组件。组件内部可以复用 shadcn/ui 底座，但对外暴露的是 Smo 场景语义。

安装到项目
npx shadcn@latest add https://smoui.xiaomolian.com/r/smo-miniprogram-benefit-pass.json
# 再从 /visual-assets 复制 smofanBenefitPass.* PNG：rail/cup/appointmentBadgeRibbon 到 src/assets/profile，calendar/ticket/tooth 到 src/assets/icons
页面直接调用
import { ProfileBenefitPass } from "@/components/ProfileBenefitPass"

export default function ExamplePage() {
  return (
    <ProfileBenefitPass
  merchantName="小魔咖啡"
  title="拿铁半价券"
  statusLabel="到店可用"
  tone="green"
  kind="coffee"
  action="show_code"
  actionLabel="出示"
  onAction={showCouponCode}
/>
  )
}

Preview / Code

预览使用 Smo 业务语境命名，避免只停留在抽象控件展示。

5 个变体
皓齿口腔

儿童涂氟体验券

需预约
预约
已约 · 今天 18:30
轻氧护理

肩颈放松券

到店前可改时间i
查看预约
小魔咖啡

拿铁半价券

到店可用
出示

变体

免预约出示

生成页面时按业务语义选择，不按视觉喜好随机切换。

需预约

生成页面时按业务语义选择，不按视觉喜好随机切换。

已约顶部冠标

生成页面时按业务语义选择，不按视觉喜好随机切换。

弱化预览态

生成页面时按业务语义选择，不按视觉喜好随机切换。

咖啡 / 口腔 / 护理 / 通用类型

生成页面时按业务语义选择，不按视觉喜好随机切换。

业务组合

复用底座原语

底层继续使用 shadcn/ui 和 Base UI，不把基础按钮、弹窗、卡片重新发明一遍。

映射 Smo 场景

根据 SmoArch、SmoLink、smolink-online、SmoFan、SmoMark 的边界决定组件出现的位置和状态。

沉淀业务模板

成熟组合进入页面模板和 registry，让下一次从一句话生成 UI 时可以复用。

SMO 使用规则

这是单张权益券组件，不内置筛选 tab、滚轮选择器、核销弹层或业务请求；这些由页面组合层负责。
active 态表达当前可操作券，preview / muted 态只用于上下文预览，不应承载主操作转化。
出示、预约、查看预约必须通过 action 和 actionLabel 明确传入；组件只触发 onAction，不判断业务可用性。
已约券通过 appointmentLabel / showAppointmentCrown 表达顶部履约冠标，券身只保留弱提示和查看预约动作，不重复展示已约状态胶囊。
左侧权益色块、右侧动作区和主内容三段结构保持稳定；当前券左侧 rail 使用 SmoUI 已沉淀 PNG 资产，不在页面里重画。
组件 registry 分发 TSX/CSS；PNG 资产从 /visual-assets 的 smofanBenefitPass.* 资产包复制到目标项目。
文字层级遵循 SmoFan 小程序规范：券标题默认 600，不使用 900；状态和标签用 600 或以下。

API 参考

属性类型默认值说明
merchantNameReactNode-商家或权益来源名称，显示为轻量胶囊标签。
titleReactNode-权益券主标题，建议一行内表达核心价值。
statusLabelReactNode-状态文案，例如 到店可用、需预约、已预约 今天18:30。
tone"green" | "amber" | "coral" | "muted""green"控制状态点、描边和动作色；预约类常用 amber，弱化态用 muted。
variant"active" | "preview""active"active 是当前可操作券；preview 用于滚轮上下文或非当前券。
slot"before" | "current" | "after""current"供滚轮/堆叠容器标记位置，组件会挂对应类名方便业务侧微调。
kind"coffee" | "care" | "dental" | "ticket""ticket"默认图形类型；业务有真实图标时优先传 icon。
iconReactNode内置类型图形左侧白色图标容器中的自定义内容。
action"show_code" | "book" | "view_booking" | "view_detail""show_code"右侧动作语义，影响默认按钮文案和动作区图形。
actionLabelReactNode随 action 自动推导覆盖右侧按钮文案。
onAction() => void-点击右侧动作按钮回调。
onSelect() => void-点击整张券回调，常用于滚轮里切换当前券。