Appearance
按钮 AppButton
基于安井 S2B 色彩体系（--action-color: #41A702、--color-primary-1: #ECF7E6）与 5 档移动端高度规范构建的基础操作按钮，支持 4 种视觉变体（实底、柔和浅底、中性灰、线框描边）与胶囊圆角。
按钮变体（variant）
提供 solid（实底主操作）、soft（primary-1 柔和浅底）、gray（中性灰底）与 outline（线框描边）四种核心样式。
vue
<AppButton variant="solid">立即结算</AppButton>
<AppButton variant="soft">加入常购</AppButton>
<AppButton variant="gray">取消订单</AppButton>
<AppButton variant="outline">到货提醒</AppButton>尺寸梯度与胶囊圆角（size / shape="pill"）
内置 mini (23px)、small (30px)、medium (36px)、large (42px)、huge (46px) 五档标准高度，设置 shape="pill" 可切换为全圆角胶囊按钮。
vue
<AppButton shape="pill" size="mini" variant="outline">到货提醒</AppButton>
<AppButton shape="pill" size="small" variant="soft">修改价格</AppButton>
<AppButton shape="pill" size="medium">立即下单</AppButton>
<AppButton shape="pill" size="large">确认提交</AppButton>
<AppButton shape="pill" size="huge">去结算</AppButton>状态色与禁用态（type / disabled）
支持 primary（品牌绿）、danger（警示红）与 warning（提醒橙）三套色阶，以及对应的禁用态。
vue
<AppButton type="danger" variant="solid">删除商品</AppButton>
<AppButton type="danger" variant="soft">清空购物车</AppButton>
<AppButton type="warning" variant="solid">库存预警</AppButton>
<AppButton type="warning" variant="outline">限购提示</AppButton>
<AppButton disabled>禁用主按钮</AppButton>
<AppButton disabled variant="soft">禁用浅底按钮</AppButton>API 参数说明
| 参数名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
size | 按钮尺寸：mini / small / medium / large / huge | string | 'medium' |
type | 语义色彩：primary（品牌绿）/ danger（红）/ warning（橙） | string | 'primary' |
variant | 视觉变体：solid（实底）/ soft（浅底）/ gray（灰底）/ outline（描边） | string | 'solid' |
shape | 按钮形状：default（标准圆角）/ pill（全圆角胶囊） | string | 'default' |
block | 是否撑满父容器宽度（常用于底部通栏结算按钮） | boolean | false |
disabled | 是否禁用 | boolean | false |
icon | 左侧图标图片路径（也可通过 #icon 插槽传入 SVG 组件） | string | '' |
iconOnly | 是否仅展示图标、隐藏文本区域 | boolean | false |