feat:修改 button 和 word-card 样式

2025-09-28 17:31:10 +08:00
parent 6acc5d676c
commit b892b5625a
17 changed files with 610 additions and 218 deletions
@@ -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>