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,146 @@
+<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="{{cardList.length > 0}}">
+                <word-card
+                    wx:key="index"
+                    wx:for="{{cardList}}"
+                    wx:for-item="item"
+                    wx:for-index="index"
+                    key="{{index}}"
+                    word="{{item.word}}"
+                    color="{{item.color}}"
+                    bind:onDelete="deleteWordCard"
+                    bind:onColorTap="onColorTap" />
+            </view>
+            <empty-state
+                wx:if="{{!cardList.length}}"
+                title="还没有添加文字"
+                desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
+                hint="提示：最多可以同时添加 6 个文字" />
+        </view>
+        <view class="operation-box">
+            <toy-button
+                type="primary"
+                bind:click="refreshCardList"
+                width="410rpx"
+                icon="refresh"
+                icon-class-prefix="toy-icon">
+                随机生成
+            </toy-button>
+            <toy-button
+                disabled="{{cardList.length <= 0}}"
+                type="white"
+                bind:click="clearCardList"
+                width="200rpx"
+                icon="clear"
+                icon-class-prefix="toy-icon">
+                清空
+            </toy-button>
+        </view>
+
+        <!-- 趣味模板选择区域 -->
+        <view class="template-section">
+            <view class="template-title">选择涂色模板</view>
+            <view class="template-list">
+                <view
+                    class="template-item {{selectedTemplate === 'grid' ? 'active' : ''}}"
+                    data-template="grid"
+                    bind:tap="onSelectTemplate">
+                    <view class="template-checkbox">
+                        <view
+                            class="checkbox-icon"
+                            wx:if="{{selectedTemplate === 'grid'}}"
+                            >✓</view
+                        >
+                    </view>
+                    <view class="template-name">网格模板</view>
+                </view>
+                <view
+                    class="template-item {{selectedTemplate === 'find' ? 'active' : ''}}"
+                    data-template="find"
+                    bind:tap="onSelectTemplate">
+                    <view class="template-checkbox">
+                        <view
+                            class="checkbox-icon"
+                            wx:if="{{selectedTemplate === 'find'}}"
+                            >✓</view
+                        >
+                    </view>
+                    <view class="template-name">找字模板</view>
+                </view>
+            </view>
+            <ad-custom unit-id="adunit-4efb537f971b3f7d"></ad-custom>
+        </view>
+    </view>
+    <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
+        <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>
+    </view>
+    <van-cell
+        wx:if="{{env !== 'release'}}"
+        is-link
+        title="debug页面"
+        link-type="navigateTo"
+        url="/pages/debug/debug" />
+    <view class="empty"></view>
+    <color-picker
+        show="{{showColorPopup}}"
+        currentColor="{{currentColor}}"
+        bind:onClose="onCloseColorPopup"
+        bind:onChange="onChangeColor" />
+    <word-picker
+        show="{{showSelectWordPopup}}"
+        cardList="{{cardList}}"
+        bind:onClose="closeSelectWordPopup"
+        bind:onChange="onChangeWord" />
+</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="{{cardList.length <= 0}}"
+        icon="download"
+        icon-class-prefix="toy-icon">
+        下载打印
+    </toy-button>
+</view>
+<introduction-popup
+    wx:if="{{showIntroductionPopup}}"
+    bind:onClose="onCloseIntroductionPopup" />
+<share-guide-popup
+    show="{{showShareDialog}}"
+    bind:onClose="onCloseShareDialog"
+    bind:onShareSuccess="onShareSuccess" />
+<add-to-miniprogram-tip />