# Toy Button 组件

基于涂鸦丫设计规范的按钮组件，当前视觉参考 `stitch-ui/letterTracing/code.html` 中底部“分享 / 保存到相册”按钮，内部不依赖 Vant。

## 功能特性

- ✅ 多种按钮类型：primary、secondary、green、white
- ✅ 丰富的状态：正常、禁用、加载中
- ✅ 扁平化模式支持
- ✅ 图标支持
- ✅ 自定义尺寸
- ✅ 参考设计稿的缩放点击动效
- ✅ 与 doodle-ui 样式完全一致

## 使用方法

### 基础用法

```xml
<!-- 主要按钮 -->
<toy-button type="primary" bind:click="onClick">主要按钮</toy-button>

<!-- 次要按钮 -->
<toy-button type="secondary" bind:click="onClick">次要按钮</toy-button>

<!-- 绿色按钮 -->
<toy-button type="green" bind:click="onClick">绿色按钮</toy-button>

<!-- 白色按钮 -->
<toy-button type="white" bind:click="onClick">白色按钮</toy-button>
```

### 按钮状态

```xml
<!-- 禁用状态 -->
<toy-button type="primary" disabled>禁用按钮</toy-button>

<!-- 加载状态 -->
<toy-button type="primary" loading>加载中</toy-button>

<!-- 扁平化模式 -->
<toy-button type="primary" flat>扁平按钮</toy-button>
```

### 带图标按钮

```xml
<!-- 带图标 -->
<toy-button type="primary" icon="add">添加</toy-button>

<!-- 自定义图标颜色 -->
<toy-button type="white" icon="edit" icon-color="#FFD719">编辑</toy-button>
```

### 自定义尺寸

```xml
<!-- 自定义宽度 -->
<toy-button type="primary" width="300rpx">自定义宽度</toy-button>

<!-- 自定义高度 -->
<toy-button type="primary" height="100rpx">自定义高度</toy-button>
```

## 属性说明

| 属性            | 类型    | 默认值     | 说明                                       |
| --------------- | ------- | ---------- | ------------------------------------------ |
| type            | String  | 'default'  | 按钮类型：primary、secondary、green、white |
| disabled        | Boolean | false      | 是否禁用                                   |
| loading         | Boolean | false      | 是否显示加载状态                           |
| flat            | Boolean | false      | 是否扁平化模式                             |
| plain           | Boolean | false      | 是否朴素模式（仅white类型有效）            |
| width           | String  | ''         | 按钮宽度                                   |
| height          | String  | ''         | 按钮高度                                   |
| icon            | String  | ''         | 图标名称                                   |
| iconColor       | String  | '#ffffff'  | 图标颜色                                   |
| iconSize        | String  | '44rpx'    | 图标大小                                   |
| iconClassPrefix | String  | 'toy-icon' | 图标类名前缀                               |

## 事件说明

| 事件名 | 说明           | 回调参数 |
| ------ | -------------- | -------- |
| click  | 点击按钮时触发 | event    |

## 样式说明

### 按钮类型

- **primary**: 黄色背景 (#FFD700)，深色文字 (#6c5a00)
- **secondary**: 绿色背景 (#9CD343)，白色文字
- **green**: 绿色背景 (#9CD343)，白色文字（与secondary相同）
- **white**: 米白背景，深色文字，浅边框

### 点击动效

- 所有按钮都支持 `scale(0.95)` 的点击缩放效果
- `flat` 模式下更接近底部操作栏按钮视觉
- 动效持续时间约为 180ms

### 禁用状态

- 背景色变为浅灰色 (#F5F5F5)
- 文字颜色变为浅灰色 (#CCCCCC)
- 移除阴影效果

## 设计规范

本组件完全遵循 doodle-ui 的设计规范：

- 圆角：24rpx (对应 doodle-ui 的 12px)
- 字体大小：48rpx (对应 doodle-ui 的 24px)
- 字体粗细：600
- 内边距：0 48rpx
- 最小宽度：240rpx
- 过渡动画：0.15s ease-in-out
- 点击动效：抖动缩放动画

## 测试页面

可以通过访问 `pages/buttonTest/buttonTest` 页面查看所有按钮类型的效果。

## 更新日志

### v2.1.0

- 修复圆角大小，与 doodle-ui 保持一致 (24rpx)
- 修复字体大小，与 doodle-ui 保持一致 (48rpx)
- 修复点击抖动效果，移除 wxs 中的 setTimeout
- 优化按钮动画，使用纯 CSS 实现抖动效果
- 改进所有按钮类型的点击反馈

### v2.0.0

- 完全重构样式，与 doodle-ui 保持一致
- 添加 secondary 类型支持
- 优化点击动效
- 改进扁平化模式
- 统一设计规范