feat: 优化页面样式

miniprogram/components/shape-card/shape-card.less

@@ -1,43 +1,69 @@
 .shape-card {
     position: relative;
-    width: 186rpx;
+    width: 100%;
-    // height: 260rpx;
+    height: 184rpx;
-    border-radius: 16rpx;
+    background: #FFFFFF;
-    background: #ffffff;
+    border-radius: 24rpx;
-    border: 1rpx solid #e8e8e8;
+    border: 2rpx solid #E8E8E8;
-    box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.3);
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 16rpx 0;
+    transition: all 0.2s ease-in-out;
-    box-sizing: border-box;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
 
-    .shape-card-img {
+    &:active {
-        width: 140rpx;
+        transform: scale(0.95);
-        height: 140rpx;
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
-        display: block;
     }
 
-    .divider {
+    .color-box {
-        width: 150rpx;
+        position: absolute;
-        height: 1rpx;
+        top: 24rpx;
-        background-color: #ddd;
+        left: 24rpx;
-        margin-block: 16rpx;
+        width: 42rpx;
-    }
+        height: 42rpx;
-
-    .shape-color {
-        width: 60rpx;
-        height: 60rpx;
         border-radius: 50%;
-        border: 1rpx solid #141414;
+        border: 4rpx solid #FFFFFF;
-        background-color: skyblue;
+        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+    }
+
+    .shape-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+
+        .shape-card-img {
+            width: 140rpx;
+            height: 140rpx;
+            display: block;
+        }
     }
 
     .delete-icon {
         position: absolute;
-        top: -16rpx;
+        top: -12rpx;
-        right: -16rpx;
+        right: -12rpx;
-        color: #ff0000;
+        width: 46rpx;
+        height: 46rpx;
+        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/shape-card/shape-card.wxml

@@ -1,18 +1,20 @@
 <view class="shape-card">
-    <image
-        src="{{ svgDataUri }}"
-        class="shape-card-img"
-        mode="aspectFit"
-        bind:tap="onShapeTap" />
-    <view class="divider" />
     <view
-        class="shape-color"
+        class="color-box"
-        style="background-color: {{ fillColor }}"
+        style="background-color: {{ fillColor }};"
-        bind:tap="onColorTap" />
+        bind:tap="onColorTap"></view>
-    <van-icon
+    <view class="shape-box">
-        class-prefix="toy-icon"
+        <image
-        name="error-o"
+            src="{{ svgDataUri }}"
-        custom-class="delete-icon"
+            class="shape-card-img"
-        size="48rpx"
+            mode="aspectFit"
-        bind:tap="onDelete" />
+            bind:tap="onShapeTap" />
+    </view>
+    <view class="delete-icon" bind:tap="onDelete">
+        <van-icon
+            class-prefix="toy-icon"
+            name="dustbin-o"
+            custom-class="delete-icon-inner"
+            size="32rpx" />
+    </view>
 </view>

miniprogram/components/word-card/word-card.less

@@ -1,7 +1,7 @@
 .word-card {
     position: relative;
     width: 100%;
-    height: 200rpx;
+    height: 172rpx; // 高度略缩小
     background: #FFFFFF;
     border-radius: 24rpx;
     border: 2rpx solid #E8E8E8;
@@ -20,8 +20,8 @@
         position: absolute;
         top: 24rpx;
         left: 24rpx;
-        width: 40rpx;
+        width: 42rpx;
-        height: 40rpx;
+        height: 42rpx;
         border-radius: 50%;
         border: 4rpx solid #FFFFFF;
         box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
@@ -35,7 +35,7 @@
         height: 100%;
 
         .word-content {
-            font-size: 72rpx;
+            font-size: 64rpx; // 字号略缩小
             font-weight: 600;
             color: #141414;
             text-align: center;
@@ -46,8 +46,8 @@
         position: absolute;
         top: -12rpx;
         right: -12rpx;
-        width: 40rpx;
+        width: 46rpx;
-        height: 40rpx;
+        height: 46rpx;
         background: #FF4757;
         border-radius: 50%;
         display: flex;

miniprogram/components/word-input/word-input.less

@@ -5,10 +5,12 @@
     border-radius: 20rpx;
     background-color: #f8f8f8;
     align-items: center;
+    border: 1rpx solid #e0e0e0;
+    // box-shadow: 0 0rpx 4rpx rgba(0, 0, 0, 0.5);
 
     .word-input-icon {
         // border: 1px solid red;
-        padding: 22rpx;
+        padding: 0 22rpx;
     }
 
     .word-input {
@@ -21,20 +23,6 @@
     }
 
     .btn-word-add {
-        box-sizing: border-box;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        height: 72rpx;
-        padding: 0 24rpx;
-        background: rgba(255, 215, 25, 1);
-        border-radius: 20rpx;
-        font-size: 28rpx;
-        color: #fff;
         margin-right: 10rpx;
-
-        &.active {
-            background-color: rgba(255, 215, 25, 0.8);
-        }
     }
 }

miniprogram/components/word-input/word-input.wxml

@@ -14,11 +14,12 @@
         placeholder="{{placeholder}}"
         bindinput="onInput"
         bindconfirm="onConfirm" />
-    <view
+    <toy-button
         class="btn-word-add"
-        bind:tap="onConfirm"
+        type="primary"
-        bind:touchstart="{{wxs.touchStart}}"
+        width="auto"
-        bind:touchend="{{wxs.touchEnd}}">
+        height="72rpx"
+        bind:click="onConfirm">
         添加
-    </view>
+    </toy-button>
 </view>

miniprogram/pages/index/index.less

@@ -15,7 +15,7 @@ page {
 .wrapper {
     background-color: #ffffff;
     border-radius: 20rpx;
-    padding: 24rpx;
+    padding: 36rpx 24rpx;
     box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
     margin: 30rpx 0;
     display: flex;
@@ -24,7 +24,7 @@ page {
     .wrapper-title {
         font-size: 32rpx;
         color: #141414;
-        margin-bottom: 24rpx;
+        margin-bottom: 36rpx; // 增大标题与内容间距
         font-weight: bold;
         text-align: center;
     }
@@ -34,18 +34,78 @@ page {
     }
 
     .word-card-box {
-        padding: 34rpx 0;
+        padding: 38rpx 0;
 
         .word-list-empty {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 60rpx 40rpx;
             text-align: center;
-            font-size: 28rpx;
+
-            color: #999;
+            .empty-icon {
+                width: 120rpx;
+                height: 120rpx;
+                background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-bottom: 32rpx;
+                box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
+
+                .toy-icon {
+                    font-size: 48rpx;
+                    color: #3b82f6;
+                }
+            }
+
+            .empty-title {
+                font-size: 32rpx;
+                font-weight: 600;
+                color: #374151;
+                margin-bottom: 16rpx;
+                line-height: 1.4;
+            }
+
+            .empty-desc {
+                font-size: 26rpx;
+                color: #6b7280;
+                line-height: 1.6;
+                margin-bottom: 32rpx;
+                max-width: 400rpx;
+            }
+
+            .empty-hint {
+                display: flex;
+                align-items: center;
+                background: #f8fafc;
+                border: 1rpx solid #e2e8f0;
+                border-radius: 12rpx;
+                padding: 20rpx 24rpx;
+                max-width: 500rpx;
+
+                .hint-icon {
+                    font-size: 24rpx;
+                    margin-right: 12rpx;
+                    margin-top: -2rpx;
+                    flex-shrink: 0;
+                }
+
+                .hint-text {
+                    font-size: 22rpx;
+                    color: #64748b;
+                    line-height: 1.5;
+                    text-align: left;
+                }
+            }
         }
 
         .word-cards-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
-            gap: 24rpx;
+            gap: 38rpx; // 间距从24rpx提升到32rpx
         }
     }
 

miniprogram/pages/index/index.wxml

@@ -2,11 +2,11 @@
     <view class="wrapper">
         <text class="wrapper-title">自定义涂鸦卡</text>
         <view class="word-input-box">
-            <word-input bind:onConfirm="onConfirmInput" width="420rpx" />
+            <word-input bind:onConfirm="onConfirmInput" width="410rpx" />
             <toy-button
                 type="green"
                 bind:click="openSelectWordPopup"
-                width="220rpx">
+                width="200rpx">
                 选择文字
             </toy-button>
         </view>
@@ -24,14 +24,26 @@
                     bind:onColorTap="onColorTap" />
             </view>
             <view class="word-list-empty" wx:if="{{!cardList.length}}">
-                请选择或输入文字，生成涂鸦卡
+                <view class="empty-icon">
+                    <text class="toy-icon toy-icon-translate"></text>
+                </view>
+                <view class="empty-title">还没有添加文字</view>
+                <view class="empty-desc"
+                    >请在上方输入文字或点击"选择文字"按钮<br />开始创建你的涂鸦卡吧！</view
+                >
+                <view class="empty-hint">
+                    <text class="hint-icon">💡</text>
+                    <text class="hint-text"
+                        >提示：最多可以同时添加六个文字</text
+                    >
+                </view>
             </view>
         </view>
         <view class="operation-box">
             <toy-button
                 type="primary"
                 bind:click="refreshCardList"
-                width="420rpx"
+                width="410rpx"
                 icon="refresh"
                 icon-class-prefix="toy-icon">
                 随机生成
@@ -40,7 +52,7 @@
                 disabled="{{cardList.length <= 0}}"
                 type="white"
                 bind:click="clearCardList"
-                width="220rpx"
+                width="200rpx"
                 icon="clear"
                 icon-class-prefix="toy-icon">
                 清空

miniprogram/pages/shape/index.less

@@ -14,7 +14,7 @@ page {
     .wrapper {
         background-color: #fff;
         border-radius: 20rpx;
-        padding: 24rpx;
+        padding: 0 24rpx;
         box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
         margin: 30rpx 0;
         display: flex;
@@ -23,24 +23,65 @@ page {
         .wrapper-title {
             font-size: 32rpx;
             color: #141414;
-            margin-bottom: 24rpx;
+            margin: 36rpx 0;
             font-weight: bold;
             text-align: center;
         }
     }
 
     .btn-area {
-        display: flex;
+        display: grid;
-        flex-direction: row;
+        grid-template-columns: repeat(2, 1fr);
-        justify-content: space-between;
+        gap: 38rpx;
     }
 
     .shape-list {
+        margin: 38rpx 0;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 38rpx;
+    }
+
+    .shape-list-empty {
         display: flex;
-        flex-wrap: wrap;
+        flex-direction: column;
-        column-gap: 50rpx;
+        align-items: center;
-        row-gap: 24rpx;
+        justify-content: center;
-        justify-content: flex-start;
+        padding: 60rpx 40rpx;
+        text-align: center;
+
+        .empty-icon {
+            width: 120rpx;
+            height: 120rpx;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 32rpx;
+            box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
+
+            .toy-icon {
+                font-size: 48rpx;
+                color: #3b82f6;
+            }
+        }
+
+        .empty-title {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 16rpx;
+            line-height: 1.4;
+        }
+
+        .empty-desc {
+            font-size: 26rpx;
+            color: #6b7280;
+            line-height: 1.6;
+            margin-bottom: 32rpx;
+            max-width: 400rpx;
+        }
     }
 }
 

miniprogram/pages/shape/index.wxml

@@ -5,20 +5,19 @@
             <toy-button
                 type="green"
                 bind:click="handleSelectShape"
-                width="290rpx">
+                width="100%">
                 选择图形
             </toy-button>
             <toy-button
                 type="primary"
                 bind:click="refreshShapeCard"
-                width="290rpx"
+                width="100%"
                 icon="refresh"
                 icon-class-prefix="toy-icon">
                 随机生成
             </toy-button>
         </view>
-        <van-divider />
+        <view class="shape-list" wx:if="{{shapeList.length > 0}}">
-        <view class="shape-list">
             <shape-card
                 wx:for="{{ shapeList }}"
                 wx:for-item="item"
@@ -31,6 +30,15 @@
                 bind:onDelete="onDelete"
                 bind:onColorTap="onColorTap" />
         </view>
+        <view class="shape-list-empty" wx:if="{{!shapeList.length}}">
+            <view class="empty-icon">
+                <text class="toy-icon toy-icon-guide"></text>
+            </view>
+            <view class="empty-title">还没有选择图形</view>
+            <view class="empty-desc"
+                >请点击上方“选择图形”或使用“随机生成”开始创建</view
+            >
+        </view>
     </view>
     <shape-picker
         selectedShapeList="{{shapeList}}"

miniprogram/ui/button/button.less

@@ -1,6 +1,6 @@
-@button-default-height: 80rpx;
+@button-default-height: 92rpx;
 @button-border-radius: 16rpx;
-@button-default-font-size: 30rpx;
+@button-default-font-size: 32rpx;
 @button-default-color: #fff;
 
 wx-button:not([size=mini]) {
@@ -15,17 +15,16 @@ wx-button:not([size=mini]) {
     align-items: center;
     justify-content: center;
     height: @button-default-height;
+    line-height: @button-default-height;
     border-radius: @button-border-radius;
     font-size: @button-default-font-size;
     color: @button-default-color;
-    padding: 0 48rpx;
+    padding: 0 24rpx;
     font-weight: 600;
     text-align: center;
     cursor: pointer;
     transition: all 0.15s ease-in-out;
     border: none;
-    min-width: 240rpx;
-
 
     &--primary {
         background: #FFD719;

miniprogram/ui/button/button.wxs

@@ -22,6 +22,9 @@ module.exports = {
     },
 
     getIconColor: function (iconColor, type, plain, disabled) {
+        if (type === 'primary') {
+            return disabled ? '#CCCCCC' : '#141414';
+        }
         if (type === 'white' && !plain) {
             return disabled ? 'rgba(34, 36, 37, 0.5)' : 'rgba(34, 36, 37, 0.9)';
         }