组件库
@jiaoshanshi/ui 包含两部分：
- 换肤：Vant 4（H5）与 Element Plus（后台）按设计令牌换成胶膳师品牌样式，原有组件照常使用；
- 品牌专属组件：14 个
Jss开头的组件，承载胶膳师特有的图形与业务规则（东阿阿胶背书、价格占位、拱门、涟漪等）。
所有组件默认满足适老化规范：正文 16px 起、点击区域 44px 起、状态配图标与文字。
基础组件
按钮 JssButton
四种样式、两种尺寸、禁用与加载
| 属性 | 说明 | 默认 |
|---|---|---|
variant | primary 枣红主按钮 / secondary 金色次按钮 / outline 描边 / text 文字 | primary |
size | md 高 44 / lg 高 52 | md |
block | 撑满整行 | false |
disabled loading | 禁用 / 加载中 | false |
一个页面只放一个主按钮。金色次按钮的字是深酱棕，不能改成白字（对比度不够）。
价格 JssPrice
价格与「门店定价」占位
不编价格
value 不传时显示「门店定价」占位。样板页、设计稿、演示数据里一律不写真实价格，价格由门店定价后由接口返回。
标签 JssTag
四种色调
状态提示 JssNotice
状态色全部由四色派生，必须同时显示图标和文字，组件已内置。
错误、注意、成功、提示
品牌专属组件
东阿阿胶背书条 JssEndorseBar
放在价格、下单、预约按钮附近——顾客做决定的位置。
并列条与紧凑版
| 属性 | 说明 |
|---|---|
seal | 东阿阿胶印章图片地址。印章由总部按授权提供，组件库不内置；不传时显示虚线占位 |
logo | 胶膳师标志图片地址（并列条时使用） |
variant | inline 并列条 / compact 只有印章和一行字 |
context | 使用场景。传 storefront（门头）、facade、lightbox、signboard 时组件拒绝渲染并在控制台报错 |
拱门标题框 JssArchTitle
米白底与枣红实底
金汤涟漪分隔 JssRipple
分隔线
菜品卡 JssDishCard
横排与竖排
到店券 JssCoupon
可用、已使用、已过期
券面金额 amount 由总部活动配置返回，样板与设计稿不填数字。
节气卡片 JssSolarCard
节气推荐
节气卡片的话术只写食养与节令，不写医疗功效。
考察预约表单 JssVisitForm
招商 H5 核心表单
| 属性 / 事件 | 说明 |
|---|---|
storeTypes | 意向店型选项，默认体验店 / 社区店 / 店中店 / 还没想好 |
loading | 提交中 |
submitted | 接口成功后置为 true，显示成功提示 |
@submit | 校验通过后回传 { name, phone, city, storeType, visitDate, note } |
特许经营资质满足前，表单与按钮只用「考察」「意向登记」的说法。
空状态 JssEmpty
空状态（插画 AI 整图生成）
品牌图标 JssBrandIcon
四个品牌图标（矢量，跟随文字颜色）
功能图标（返回、搜索、购物车等）直接使用 Vant / Element Plus 自带图标，统一颜色即可；品牌图标只用于品牌表达位置（分类入口、标题点缀、空状态），不替代功能图标。
Vant 与 Element Plus 换肤
Vant 4 组件（H5）
Element Plus 组件（后台）