feat:更新iconfont

miniprogram/pages/index/index.ts

@@ -34,37 +34,6 @@ Page({
             .exec();
     },
 
-    // renderCanvas() {
-    //     // wx.nextTick(() => {
-    //     // this.setCanvasBoxSize();
-    //     // });
-    //     console.log('this.boxWidth:', this.boxWidth);
-    //     console.log('this.boxHeight:', this.boxHeight);
-    //     if (this.boxWidth && this.boxHeight) {
-    //         this.initCanvas(this.boxWidth, this.boxHeight);
-    //     }
-    // },
-
-    // setCanvasBoxSize() {
-    //     const { windowWidth } = wx.getWindowInfo();
-    //     console.log('windowWidth---:', windowWidth);
-    //     const query = wx.createSelectorQuery();
-    //     query
-    //         .select('#canvasWrapper')
-    //         .boundingClientRect((rect) => {
-    //             if (rect) {
-    //                 const boxWidth = rect.width;
-    //                 const boxHeight = boxWidth / (width / height);
-
-    //                 console.log('boxWidth----:', boxWidth);
-    //                 console.log('boxHeight----:', boxHeight);
-
-    //                 this.initCanvas(boxHeight, boxWidth);
-    //             }
-    //         })
-    //         .exec();
-    // },
-
     initCanvas(boxWidth: number, boxHeight: number) {
         wx.createSelectorQuery()
             .select('#canvasContent')
@@ -79,8 +48,7 @@ Page({
                     if (ctx) {
                         this.canvas = canvas;
                         this.ctx = ctx;
-                        const rect = res[0];
-                        console.log('rect-----:', rect);
+                        // const rect = res[0];
                         this.textDrawService = new TextDrawService(canvas, ctx);
                         // textDrawService.draw();
                         this.setData({ boxWidth, boxHeight });
@@ -89,6 +57,16 @@ Page({
             });
     },
 
+    /** 变更cardList 并更新canvas */
+    drawCanvas(
+        updatedCardList: Array<{ color: string; word: string }>,
+        callback: () => void = () => {},
+    ) {
+        console.log('drawCanvas called updatedCardList:', updatedCardList);
+        this.setData({ cardList: updatedCardList }, callback);
+        this.textDrawService?.draw(updatedCardList);
+    },
+
     tapCard(e: WechatMiniprogram.TouchEvent) {
         const { url } = e.currentTarget.dataset;
         console.log('navigateTo url:', url);
@@ -107,9 +85,10 @@ Page({
             word: char,
         }));
         console.log('updatedCardList', updatedCardList);
-        this.setData({ cardList: updatedCardList });
-        // this.renderCanvas();
-        this.textDrawService?.draw(updatedCardList);
+        this.drawCanvas(updatedCardList);
+        // this.setData({ cardList: updatedCardList });
+        // // this.renderCanvas();
+        // this.textDrawService?.draw(updatedCardList);
     },
 
     deleteWordCard(e: WechatMiniprogram.CustomEvent) {
@@ -117,14 +96,14 @@ Page({
         console.log('deleteWordCard key:', key, 'word:', word);
         const { cardList } = this.data;
         const updatedCardList = cardList.filter((_, index) => index !== key);
-        this.setData({ cardList: updatedCardList });
-        wx.showToast({
-            title: `已删除 "${word}"`,
-            icon: 'none',
-            duration: 2000,
+
+        this.drawCanvas(updatedCardList, () => {
+            wx.showToast({
+                title: `已删除 "${word}"`,
+                icon: 'none',
+                duration: 2000,
+            });
         });
-        // this.renderCanvas();
-        this.textDrawService?.draw(updatedCardList);
     },
 
     /** 下载打印 */

miniprogram/pages/index/index.wxml

@@ -42,55 +42,15 @@
         show="{{showColorPopup}}"
         currentColor="{{currentColor}}"
         bind:onClose="onCloseColorPopup" />
-    <!-- <van-popup
-        show="{{ showColorPopup }}"
-        bind:close="onClose"
-        custom-class="color-picker-popup">
-        <view class="color-picker-container">
-            <text class="color-picker-title">选择颜色</text>
-            <view class="color-options-title">
-                <text class="color-options-title-text">基础12色</text>
-                <view class="color-options-title-line"></view>
-            </view>
-            <view class="color-options">
-                <block wx:for="{{WATER_COLORS.basic12}}" wx:key="index">
-                    <view
-                        class="color-option"
-                        style="background-color: {{item.hex}};"
-                        bindtap="onSelectColor"
-                        data-color="{{item.hex}}"></view>
-                </block>
-            </view>
-            <view class="color-options-title">
-                <text class="color-options-title-text">扩展24色</text>
-                <view class="color-options-title-line"></view>
-            </view>
-            <view class="color-options">
-                <block wx:for="{{WATER_COLORS.extended24}}" wx:key="index">
-                    <view
-                        class="color-option"
-                        style="background-color: {{item.hex}};"
-                        bindtap="onSelectColor"
-                        data-color="{{item.hex}}"></view>
-                </block>
-            </view>
-        </view>
-    </van-popup> -->
 </view>
 <view class="btn-area">
-    <!-- <view
-        class="btn btn-green {{cardList.length > 0 ? '' : 'disabled'}}"
-        bindtap="exportToPrint">
-        <van-icon class-prefix="j-icon" name="download" size="44rpx" />
-        <text class="btn-text">下载打印</text>
-    </view> -->
     <toy-button
         type="green"
         bind:click="exportToPrint"
         width="680rpx"
         disabled="{{cardList.length <= 0}}"
         icon="download"
-        icon-class-prefix="j-icon">
+        icon-class-prefix="toy-icon">
         下载打印
     </toy-button>
 </view>