feat: 完成文字涂色卡功能

miniprogram/pages/index/index.wxml

@@ -12,24 +12,31 @@
         </view>
 
         <view class="word-card-box">
-            <block
-                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" />
+            <block wx:if="{{cardList.length > 0}}">
+                <block
+                    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>
         </view>
@@ -53,16 +60,14 @@
             </toy-button>
         </view>
     </view>
-    <view
-        id="previewWrapper"
-        class="wrapper {{cardList.length > 0 ? '' : 'hidden'}}">
+    <view id="previewWrapper" class="wrapper">
         <text class="wrapper-title">预览打印效果</text>
         <view id="canvasWrapper" class="canvas-wrapper">
-            <!-- <canvas
+            <canvas
                 type="2d"
                 id="canvasContent"
                 class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" /> -->
+                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
         </view>
     </view>
     <view class="empty"></view>