joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:修改 button 和 word-card 样式

Browse Source
This commit is contained in:
R524809
2025-09-28 17:31:10 +08:00
parent 6acc5d676c
commit b892b5625a
17 changed files with 610 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/app.json
+2 -1
View File
@@ -3,7 +3,8 @@
"pages/index/index",
"pages/shape/index",
"pages/debug/debug",
"pages/wordDemo/index"
"pages/wordDemo/index",
"pages/buttonTest/buttonTest"
],
"window": {},
"style": "v2",
miniprogram/components/word-card/word-card.less
+48 -35
View File
@@ -1,57 +1,70 @@
.word-card {
position: relative;
width: 100%;
height: 200rpx;
background: #FFFFFF;
border-radius: 24rpx;
border: 2rpx solid #E8E8E8;
display: flex;
flex-direction: row;
// width: 324rpx;
height: 100rpx;
border-radius: 16rpx;
background-color: #eefcfc;
align-items: center;
box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35);
justify-content: center;
transition: all 0.2s ease-in-out;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
&:active {
transform: scale(0.95);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}
.color-box {
width: 60rpx;
height: 60rpx;
position: absolute;
top: 24rpx;
left: 24rpx;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-color: #ff0000;
margin-left: 24rpx;
border: 1rpx solid #141414;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border-radius: 50%;
border: 1px solid #141414;
transform: scale(0.5);
transform-origin: 0 0;
box-sizing: border-box;
}
border: 4rpx solid #FFFFFF;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.word-box {
margin: 0 16rpx 0 36rpx;
display: flex;
justify-content: center;
align-items: center;
width: 82rpx;
height: 52rpx;
border: 1rpx solid #000;
background-color: #fff;
width: 100%;
height: 100%;
.word-content {
font-size: 28rpx;
font-size: 72rpx;
font-weight: 600;
color: #141414;
text-align: center;
}
}
.delete-icon {
padding: 20rpx;
color: rgba(255, 0, 0, 0.7);
position: absolute;
top: -12rpx;
right: -12rpx;
width: 40rpx;
height: 40rpx;
background: #FF4757;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 32rpx;
font-weight: bold;
box-shadow: 0 2rpx 6rpx rgba(255, 71, 87, 0.3);
transition: all 0.2s ease-in-out;
&:active {
transform: scale(0.9);
}
.delete-icon-inner {
color: #FFFFFF !important;
}
}
}
miniprogram/components/word-card/word-card.wxml
+2 -2
View File
@@ -3,7 +3,7 @@
class="color-box"
style="background-color: {{color}};"
bindtap="onColorTap"></view>
<view class="word-box border-1px">
<view class="word-box">
<text class="word-content">{{word}}</text>
</view>
<view class="delete-icon" bindtap="onDelete">
@@ -11,6 +11,6 @@
class-prefix="toy-icon"
name="dustbin-o"
custom-class="delete-icon-inner"
size="48rpx" />
size="32rpx" />
</view>
</view>
miniprogram/pages/buttonTest/buttonTest.json
+10
View File
@@ -0,0 +1,10 @@
{
"navigationBarTitleText": "按钮组件测试",
"navigationBarBackgroundColor": "#FFD719",
"backgroundColor": "#F6F6F6",
"usingComponents": {
"toy-button": "../../ui/button/button",
"van-icon": "@vant/weapp/icon/index",
"word-card": "../../components/word-card/word-card"
}
}
miniprogram/pages/buttonTest/buttonTest.less
+34
View File
@@ -0,0 +1,34 @@
page {
background-color: #F6F6F6;
}
.button-test-container {
padding: 40rpx;
}
.test-section {
margin-bottom: 60rpx;
}
.section-title {
display: block;
font-size: 32rpx;
font-weight: 600;
color: #141414;
margin-bottom: 24rpx;
}
.button-group {
display: flex;
flex-direction: column;
gap: 24rpx;
align-items: flex-start;
}
.word-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32rpx;
width: 100%;
max-width: 600rpx;
}
miniprogram/pages/buttonTest/buttonTest.ts
+28
View File
@@ -0,0 +1,28 @@
Page({
data: {},
onButtonClick(e: WechatMiniprogram.TouchEvent) {
console.log('按钮点击:', e);
wx.showToast({
title: '按钮被点击了',
icon: 'success',
duration: 1000
});
},
onWordColorTap(e: any) {
console.log('点击了颜色:', e);
wx.showToast({
title: '点击了颜色',
icon: 'none',
});
},
onWordDelete(e: any) {
console.log('删除文字:', e);
wx.showToast({
title: '删除文字',
icon: 'none',
});
}
});
miniprogram/pages/buttonTest/buttonTest.wxml
+160
View File
@@ -0,0 +1,160 @@
<view class="button-test-container">
<view class="test-section">
<text class="section-title">主要按钮 (Primary)</text>
<view class="button-group">
<toy-button type="primary" bind:click="onButtonClick"
>主要按钮</toy-button
>
<toy-button type="primary" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="primary" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">次要按钮 (Secondary)</text>
<view class="button-group">
<toy-button type="secondary" bind:click="onButtonClick"
>次要按钮</toy-button
>
<toy-button type="secondary" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="secondary" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">绿色按钮 (Green)</text>
<view class="button-group">
<toy-button type="green" bind:click="onButtonClick"
>绿色按钮</toy-button
>
<toy-button type="green" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="green" loading bind:click="onButtonClick"
>加载中</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">白色按钮 (White)</text>
<view class="button-group">
<toy-button type="white" bind:click="onButtonClick"
>白色按钮</toy-button
>
<toy-button type="white" disabled bind:click="onButtonClick"
>禁用状态</toy-button
>
<toy-button type="white" plain bind:click="onButtonClick"
>透明模式</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">扁平化按钮 (Flat)</text>
<view class="button-group">
<toy-button type="primary" flat bind:click="onButtonClick"
>扁平主要</toy-button
>
<toy-button type="secondary" flat bind:click="onButtonClick"
>扁平次要</toy-button
>
<toy-button type="white" flat bind:click="onButtonClick"
>扁平白色</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">带图标按钮</text>
<view class="button-group">
<toy-button type="primary" icon="add" bind:click="onButtonClick"
>添加</toy-button
>
<toy-button
type="secondary"
icon="delete"
bind:click="onButtonClick"
>删除</toy-button
>
<toy-button type="white" icon="edit" bind:click="onButtonClick"
>编辑</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">不同尺寸</text>
<view class="button-group">
<toy-button
type="primary"
width="200rpx"
bind:click="onButtonClick">
小按钮
</toy-button>
<toy-button
type="secondary"
width="300rpx"
bind:click="onButtonClick"
>中按钮</toy-button
>
<toy-button type="white" width="400rpx" bind:click="onButtonClick">
大按钮
</toy-button>
</view>
</view>
</view>
<view class="test-section">
<text class="section-title">点击动效测试</text>
<view class="button-group">
<toy-button type="primary" bind:click="onButtonClick"
>点击我测试动效</toy-button
>
<toy-button type="secondary" bind:click="onButtonClick"
>抖动效果</toy-button
>
<toy-button type="white" bind:click="onButtonClick"
>缩放动画</toy-button
>
</view>
</view>
<view class="test-section">
<text class="section-title">Word Card 测试</text>
<view class="word-cards-grid">
<word-card
word="王"
color="#FFD719"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="手"
color="#93D333"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="哭"
color="#FF6B9D"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
<word-card
word="少"
color="#4ECDC4"
bind:colorTap="onWordColorTap"
bind:delete="onWordDelete">
</word-card>
</view>
</view>
miniprogram/pages/index/index.less
+5 -10
View File
@@ -16,7 +16,7 @@ page {
background-color: #ffffff;
border-radius: 20rpx;
padding: 24rpx;
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
margin: 30rpx 0;
display: flex;
flex-direction: column;
@@ -42,15 +42,10 @@ page {
color: #999;
}
.word-card-list {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 24rpx;
&:last-child {
margin-bottom: 0;
}
.word-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24rpx;
}
}
miniprogram/pages/index/index.wxml
+12 -25
View File
@@ -12,33 +12,20 @@
</view>
<view class="word-card-box">
<block wx:if="{{cardList.length > 0}}">
<block
<view class="word-cards-grid" wx:if="{{cardList.length > 0}}">
<word-card
wx:key="index"
wx:for="{{cardList}}"
wx:for-item="item"
wx:for-index="index">
<view class="word-card-list" wx:if="{{index % 2 === 0}}">
<word-card
key="{{index}}"
word="{{item.word}}"
color="{{item.color}}"
bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" />
<word-card
wx:if="{{cardList[index + 1]}}"
key="{{index + 1}}"
word="{{cardList[index + 1].word}}"
color="{{cardList[index + 1].color}}"
bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" />
</view>
</block>
</block>
<block wx:if="{{!cardList.length}}">
<view class="word-list-empty">
请选择或输入文字，生成涂鸦卡
</view>
</block>
wx:for-index="index"
word="{{item.word}}"
color="{{item.color}}"
bind:onDelete="deleteWordCard"
bind:onColorTap="onColorTap" />
</view>
<view class="word-list-empty" wx:if="{{!cardList.length}}">
请选择或输入文字，生成涂鸦卡
</view>
</view>
<view class="operation-box">
<toy-button
miniprogram/pages/shape/index.less
+1 -1
View File
@@ -15,7 +15,7 @@ page {
background-color: #fff;
border-radius: 20rpx;
padding: 24rpx;
box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
margin: 30rpx 0;
display: flex;
flex-direction: column;
miniprogram/ui/button/README.md
+141
View File
@@ -0,0 +1,141 @@
# Toy Button 组件
基于涂鸦丫设计规范的按钮组件，与 doodle-ui 中的按钮样式保持一致。
## 功能特性
- ✅ 多种按钮类型：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**: 黄色背景 (#FFD719)，深色文字 (#141414)
- **secondary**: 绿色背景 (#93D333)，白色文字
- **green**: 绿色背景 (#93D333)，白色文字（与secondary相同）
- **white**: 白色背景，深色文字，带边框
### 点击动效
- 所有按钮都支持 `scale(0.95)` 的点击缩放效果
- 扁平化模式下有背景色变化效果
- 动效持续时间为 150ms
### 禁用状态
- 背景色变为浅灰色 (#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 类型支持
- 优化点击动效
- 改进扁平化模式
- 统一设计规范
miniprogram/ui/button/button.less
+98 -54
View File
@@ -1,6 +1,6 @@
@button-default-height: 86rpx;
@button-border-radius: 18rpx;
@button-default-font-size: 32rpx;
@button-default-height: 80rpx;
@button-border-radius: 16rpx;
@button-default-font-size: 30rpx;
@button-default-color: #fff;
wx-button:not([size=mini]) {
@@ -18,91 +18,109 @@ wx-button:not([size=mini]) {
border-radius: @button-border-radius;
font-size: @button-default-font-size;
color: @button-default-color;
padding: 0 44rpx;
font-weight: normal;
// width: auto !important;
// transition: all 0.04s;
padding: 0 48rpx;
font-weight: 600;
text-align: center;
cursor: pointer;
transition: all 0.15s ease-in-out;
border: none;
min-width: 240rpx;
&--primary {
background: rgba(255, 215, 25, 1);
box-shadow: 0px 10rpx 2rpx #DBB917;
background: #FFD719;
box-shadow: 0 4rpx 12rpx rgba(255, 215, 25, 0.3);
color: #141414;
&.disabled {
background: rgba(255, 215, 25, 0.5);
box-shadow: 0px 10rpx 2rpx rgba(219, 185, 23, 0.5);
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: translateY(10rpx);
box-shadow: 0 0 0 rgba(219, 185, 23, 0.5);
/* 阴影效果 */
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(255, 215, 25, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--green {
background: #93d333;
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 1);
background: #93D333;
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
color: #FFFFFF;
&.disabled {
background: rgba(147, 211, 51, 0.5);
box-shadow: 0px 10rpx 2rpx rgba(121, 185, 21, 0.5);
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: translateY(10rpx);
box-shadow: 0 0 0 rgba(121, 185, 21, 0.5);
/* 阴影效果 */
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--secondary {
background: #93D333;
box-shadow: 0 4rpx 12rpx rgba(147, 211, 51, 0.3);
color: #FFFFFF;
&.disabled {
background: #F5F5F5;
color: #CCCCCC;
box-shadow: none;
}
&.active {
transform: scale(0.92);
box-shadow: 0 2rpx 6rpx rgba(147, 211, 51, 0.2);
animation: buttonPress 0.15s ease-in-out;
}
}
&--white {
color: rgba(34, 36, 37, 0.9);
background: #fff;
box-shadow: 0 8rpx 0rpx rgba(223, 220, 220, 1);
border: 2rpx solid rgba(223, 220, 220, 1);
background: #FFFFFF;
border: 1rpx solid #E8E8E8;
color: #141414;
&.disabled {
color: rgba(34, 36, 37, 0.5);
background: rgba(255, 255, 255, 0.7);
box-shadow: 0px 8rpx 0rpx rgba(223, 220, 220, 0.9);
background: #F5F5F5;
color: #CCCCCC;
border-color: #E8E8E8;
}
&.plain {
color: #fff;
background: rgba(255, 255, 255, 0.2);
border: 2rpx solid rgba(255, 255, 255, 1);
box-shadow: 0px 8rpx 0rpx rgba(255, 255, 255, 0.88);
// &.disabled {
// background: rgba(255, 255, 255, 0.2);
// border: 1px solid rgba(255, 255, 255, 0.6);
// box-shadow: 0px 3px 0px rgba(255, 255, 255, 0.6);
// }
color: #FFFFFF;
background: transparent;
border: 1rpx solid #FFFFFF;
}
&.active {
transform: translateY(8rpx);
box-shadow: 0 0 0 rgba(223, 220, 220, 1);
/* 阴影效果 */
transform: scale(0.92);
background: #F8F8F8;
animation: buttonPress 0.15s ease-in-out;
}
}
&--flat {
box-shadow: none !important;
border: none;
transition: background 0.1s;
border: none !important;
transition: all 0.15s ease-in-out;
// 覆盖所有颜色变体
&.toy-button--primary,
&.toy-button--green,
&.toy-button--secondary,
&.toy-button--white {
box-shadow: none !important;
border: none !important;
&.active {
transform: none !important;
box-shadow: none !important;
transform: scale(0.92) !important;
animation: buttonPress 0.15s ease-in-out !important;
}
}
@@ -113,29 +131,55 @@ wx-button:not([size=mini]) {
box-shadow: none !important;
}
// 重置active变换
&.active {
transform: none !important;
}
// 彩色按钮active背景变化
&.toy-button--primary.active {
background: rgba(255, 215, 25, 0.7);
background: rgba(255, 215, 25, 0.8);
}
&.toy-button--green.active {
background: rgba(147, 211, 51, 0.7);
background: rgba(147, 211, 51, 0.8);
}
&.toy-button--secondary.active {
background: rgba(147, 211, 51, 0.8);
}
&.toy-button--white.active {
background: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.8);
}
}
.loading-class,
&__icon {
margin-right: 18rpx;
margin-right: 12rpx;
}
// 添加按钮点击动画类
&.button-press {
animation: buttonPress 0.15s ease-in-out;
}
}
// 按钮点击动画
@keyframes buttonPress {
0% {
transform: scale(1);
}
25% {
transform: scale(0.92);
}
50% {
transform: scale(0.98);
}
75% {
transform: scale(0.92);
}
100% {
transform: scale(1);
}
}
miniprogram/ui/button/button.ts
+1 -1
View File
@@ -8,7 +8,7 @@ Component({
properties: {
type: {
type: String,
value: 'default', // primary, green, white
value: 'default', // primary, green, secondary, white
},
openType: {
type: String,