feat:修改 button 和 word-card 样式

miniprogram/pages/buttonTest/buttonTest.json

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,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

@@ -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;