feat:重构按钮和icon组件

2026-04-07 17:23:05 +08:00
parent 672d457a35
commit 653737c481
95 changed files with 3261 additions and 1342 deletions
@@ -0,0 +1,141 @@
+# 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 类型支持
+- 优化点击动效
+- 改进扁平化模式
+- 统一设计规范