doodle-mini/miniprogram/pages/buttonTest/buttonTest.wxml

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