feat: 修改字母描红逻辑，添加字母手写字体

2026-04-15 17:29:59 +08:00
parent ec5bc44741
commit 4299c4e082
62 changed files with 4135 additions and 894 deletions
@@ -0,0 +1,99 @@
+<view class="page-container">
+    <view class="wrapper">
+        <text class="wrapper-title">自定义练字贴</text>
+        <view class="word-input-box">
+            <word-input value="{{inputValue}}" bind:onConfirm="onConfirmInput" style="width: 100%;"/>
+        </view>
+
+        <view class="action-buttons-box">
+            <toy-button
+                type="green"
+                bind:click="openSelectWordPopup"
+                height="80rpx"
+                width="410rpx"
+                icon="success"
+                icon-class-prefix="toy-icon">
+                选择文字
+            </toy-button>
+            <toy-button
+                disabled="{{words.length <= 0}}"
+                type="white"
+                bind:click="clearWords"
+                width="220rpx"
+                height="80rpx"
+                icon="clear"
+                icon-class-prefix="toy-icon">
+                清空
+            </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}}"
+                    key="{{index}}"
+                    bind:onDelete="deleteWordCard"
+                    bind:onColorTap="onColorTap" />
+            </view>
+            <empty-state
+                wx:if="{{!words.length}}"
+                title="还没有添加文字"
+                desc='请在上方输入文字或点击"选择文字"按钮，开始创建你的练字田字格吧！'
+                hint="提示：最多可以同时添加 11 个文字" />
+        </view>
+    </view>
+
+    <view id="previewWrapper" class="wrapper">
+        <text class="wrapper-title">预览练字田字格</text>
+        <view id="canvasWrapper" class="canvas-wrapper">
+            <canvas
+                type="2d"
+                id="canvasContent"
+                class="canvas-content"
+                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+        </view>
+        <ad-custom unit-id="adunit-6f972b9b9bca0b9f"></ad-custom>
+    </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"
+            icon="download"
+            icon-class-prefix="toy-icon">
+            下载打印
+        </toy-button>
+    </view>
+    <word-picker
+        show="{{showSelectWordPopup}}"
+        selectedWords="{{selectedWords}}"
+        max="11"
+        bind:onClose="closeSelectWordPopup"
+        bind:onChange="onChangeWord" />
+    <share-guide-popup
+        show="{{showShareDialog}}"
+        bind:onClose="onCloseShareDialog"
+        bind:onShareSuccess="onShareSuccess" />
+    <add-to-miniprogram-tip />
+
+    <view class="empty"></view>
+</view>