feat: 完成绘制汉字基础功能

miniprogram/pages/copyBook/copyBook.wxml

@@ -0,0 +1,82 @@
+<view class="page-container">
+    <view class="wrapper">
+        <text class="wrapper-title">自定义练字</text>
+        <view class="word-input-box">
+            <word-input bind:onConfirm="onConfirmInput" width="410rpx" />
+            <toy-button
+                type="green"
+                bind:click="openSelectWordPopup"
+                width="200rpx">
+                选择文字
+            </toy-button>
+        </view>
+
+        <view class="word-card-box">
+            <view class="word-cards-grid" wx:if="{{words.length > 0}}">
+                <word-card
+                    disabledColor="{{true}}"
+                    wx:key="index"
+                    wx:for="{{words}}"
+                    wx:for-item="word"
+                    wx:for-index="index"
+                    word="{{word}}"
+                    bind:onDelete="deleteWordCard"
+                    bind:onColorTap="onColorTap" />
+            </view>
+            <view class="word-list-empty" wx:if="{{!words.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>
+        </view>
+    </view>
+
+    <view id="previewWrapper" class="wrapper">
+        <text class="wrapper-title">预览练字田字格</text>
+        <view id="canvasWrapper" class="canvas-wrapper">
+            <canvas
+                wx:if="{{words}}"
+                type="2d"
+                id="canvasContent"
+                class="canvas-content"
+                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+            <view wx:else class="empty-tip">请选择或输入汉字后生成田字格</view>
+        </view>
+    </view>
+
+    <view class="bottom-btn-box">
+        <toy-button
+            openType="share"
+            type="green"
+            flat="{{true}}"
+            bind:click="onShareAppMessage"
+            width="220rpx"
+            height="80rpx"
+            icon="wechat"
+            icon-class-prefix="toy-icon">
+            分享
+        </toy-button>
+        <toy-button
+            type="primary"
+            flat="{{true}}"
+            bind:click="exportToPrint"
+            width="420rpx"
+            height="80rpx"
+            disabled="{{words.length <= 0}}"
+            icon="download"
+            icon-class-prefix="toy-icon">
+            下载打印
+        </toy-button>
+    </view>
+    <word-picker
+        show="{{showSelectWordPopup}}"
+        selectedWords="{{words}}"
+        bind:onClose="closeSelectWordPopup"
+        bind:onChange="onChangeWord" />
+
+    <view class="empty"></view>
+</view>