AI Button
- 组件说明：药丸形 AI 入口按钮，通过 AI 渐变描边 + 渐变 sparkle 图标强调 AI 操作。
- 尺寸基线：Medium=44px、Small=36px。
- 实现约定：design 层独立组件
AiButton；渐变描边用padding-box / border-box双层背景（内联 style）。sparkle 图标与其它图标一样通过图标契约（askAikey）由使用方注入，design 不内置任何图标 SVG。 - Figma 规范
基础用法
结果
Loading...
实时编辑器
<AiButton>Ask AI</AiButton>
尺寸
两种尺寸：Medium（44px）、Small（36px）。
结果
Loading...
实时编辑器
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}> <AiButton size="medium">Ask AI</AiButton> <AiButton size="small">Ask AI</AiButton> </div>
描边（Show Stroke）
通过 showStroke 控制 AI 渐变描边。关闭时按钮保持纯白底 + 交互投影。
结果
Loading...
实时编辑器
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}> <AiButton showStroke>有描边</AiButton> <AiButton showStroke={false}>无描边</AiButton> </div>
尺寸规范
| 维度 | Medium | Small |
|---|---|---|
| 高度 | 44px | 36px |
| 水平内边距 | --Spacing_24 | --Spacing_12 |
| 垂直内边距 | --Spacing_12 | --Spacing_8 |
| 字号 | Body（14 / 20） | Footnote（13 / 18） |
| 图标 | 20×20 | 20×20 |
| 圆角 | full（药丸） | full（药丸） |
| 渐变描边 | 2px #8F53ED → #00D0FF → #21EF6A | 同上 |
交互投影：Default 0 4 12 rgba(22,215,181,0.1)（AI 辉光）/ Hover 0 0 24 --Effects-Shadow-Emphasized / Clicked 0 0 32 --Effects-Shadow-Default。
Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children | ReactNode | - | 按钮文案 |
| size | 'medium' | 'small' | 'medium' | 尺寸变体 |
| showStroke | boolean | true | 是否展示 AI 渐变描边 |
| disabled | boolean | false | 禁用状态 |
| onClick | (e) => void | - | 点击回调 |
| className | string | - | 额外类名 |