feat:练字贴功能基本完成

miniprogram/pages/index/index.json

@@ -13,6 +13,7 @@
         "color-picker": "../../components/color-picker/color-picker",
         "introduction-popup": "../../components/introduction-popup/introduction-popup",
         "toy-button": "../../ui/button/button",
-        "word-picker": "../../components/word-picker/word-picker"
+        "word-picker": "../../components/word-picker/word-picker",
+        "empty-state": "../../components/empty-state/empty-state"
     }
 }

miniprogram/pages/index/index.less

@@ -34,73 +34,7 @@ page {
     }
 
     .word-card-box {
-        padding: 38rpx 0;
-
-        .word-list-empty {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            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;
-            }
-
-            .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;
-                }
-            }
-        }
+        padding: 34rpx 0;
 
         .word-cards-grid {
             display: grid;
@@ -122,7 +56,7 @@ page {
     }
 
     // 模板选择区域
-    .template-section {
+    /* .template-section {
         margin-top: 40rpx;
 
         .template-title {
@@ -292,14 +226,7 @@ page {
                 }
             }
         }
-    }
-}
-
-
-.operation-box {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+    } */
 }
 
 

miniprogram/pages/index/index.ts

@@ -48,6 +48,8 @@ Page({
                 selectedWords: ['涂', '鸦', '丫', '欢', '迎', '您'],
                 showIntroductionPopup: true,
                 env: getApp().globalData.env || 'release',
+            }, () => {
+                this.drawCanvas();
             });
         } else {
             this.setData({

miniprogram/pages/index/index.wxml

@@ -24,21 +24,11 @@
                     bind:onDelete="deleteWordCard"
                     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>
+            <empty-state
+                wx:if="{{!cardList.length}}"
+                title="还没有添加文字"
+                desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
+                hint="提示：最多可以同时添加 6 个文字" />
         </view>
         <view class="operation-box">
             <toy-button
@@ -61,7 +51,7 @@
         </view>
 
         <!-- 趣味模板选择区域 -->
-        <view class="template-section">
+        <!-- <view class="template-section">
             <view class="template-title">选择涂色模板</view>
             <view class="template-grid">
                 <view
@@ -153,7 +143,7 @@
                     <view class="template-name">直线排列</view>
                 </view>
             </view>
-        </view>
+        </view> -->
     </view>
     <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
         <text class="wrapper-title">预览打印效果</text>
@@ -179,7 +169,7 @@
         bind:onChange="onChangeColor" />
     <word-picker
         show="{{showSelectWordPopup}}"
-        selectedWords="{{cardList}}"
+        cardList="{{cardList}}"
         bind:onClose="closeSelectWordPopup"
         bind:onChange="onChangeWord" />
 </view>