feat:优化页面按钮等样式

miniprogram/app.json

@@ -42,12 +42,6 @@
                 "iconPath": "assets/tabBar/icon-shape.png",
                 "selectedIconPath": "assets/tabBar/icon-shape-active.png",
                 "text": "图形"
-            },
-            {
-                "pagePath": "pages/copyBook/index",
-                "iconPath": "assets/tabBar/icon-word.png",
-                "selectedIconPath": "assets/tabBar/icon-word-active.png",
-                "text": "练字"
             }
         ]
     }

miniprogram/pages/index/index.json

@@ -1,5 +1,5 @@
 {
-    "navigationBarTitleText": "涂鸦丫",
+    "navigationBarTitleText": "涂鸦丫-识字",
     "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
     "backgroundColor": "#F6F6F6",

miniprogram/pages/index/index.ts

@@ -54,6 +54,12 @@ Page({
     },
 
     onReady() {
+        // 当cardList为空时，canvas相关元素不会被渲染，所以不需要在这里初始化
+        // 尺寸计算将在initCanvas方法中进行
+    },
+
+    initCanvas() {
+        // 先获取canvasWrapper的尺寸来计算canvas尺寸
         const query = wx.createSelectorQuery();
         query
             .select('#canvasWrapper')
@@ -65,13 +71,8 @@ Page({
 
                     this.boxHeight = boxHeight;
                     this.boxWidth = boxWidth;
-                    this.initCanvas(boxWidth, boxHeight);
-                }
-            })
-            .exec();
-    },
 
-    initCanvas(boxWidth: number, boxHeight: number) {
+                    // 然后初始化canvas
                     wx.createSelectorQuery()
                         .select('#canvasContent')
                         .fields({
@@ -85,14 +86,20 @@ Page({
                                 if (ctx) {
                                     this.canvas = canvas;
                                     this.ctx = ctx;
-                        // const rect = res[0];
                                     this.textDrawService = new TextDrawService(canvas, ctx);
-                        // textDrawService.draw();
                                     this.setData({ boxWidth, boxHeight });
-                        this.drawCanvas();
+
+                                    // 初始化完成后，如果有cardList内容则立即绘制
+                                    const currentCardList = this.data.cardList;
+                                    if (currentCardList.length > 0) {
+                                        this.textDrawService.draw(currentCardList);
+                                    }
                                 }
                             }
                         });
+                }
+            })
+            .exec();
     },
 
     /** 变更cardList 并更新canvas */
@@ -102,12 +109,26 @@ Page({
     ) {
         if (updatedCardList) {
             this.setData({ cardList: updatedCardList }, () => {
-                this.textDrawService?.draw(updatedCardList!);
+                // 如果cardList有内容且canvas未初始化，先初始化canvas
+                if (!this.canvas) {
+                    this.initCanvas();
+                }
+                // 如果canvas已初始化且有内容，则绘制
+                if (this.textDrawService && updatedCardList!.length > 0) {
+                    this.textDrawService.draw(updatedCardList!);
+                }
                 callback();
             });
         } else {
-            updatedCardList = this.data.cardList;
-            this.textDrawService?.draw(updatedCardList);
+            const currentCardList = this.data.cardList;
+            // 如果cardList有内容且canvas未初始化，先初始化canvas
+            if (!this.canvas) {
+                this.initCanvas();
+            }
+            // 如果canvas已初始化且有内容，则绘制
+            if (this.textDrawService && currentCardList.length > 0) {
+                this.textDrawService.draw(currentCardList);
+            }
         }
     },
 
@@ -212,7 +233,7 @@ Page({
     },
 
     onColorTap(e: WechatMiniprogram.CustomEvent) {
-        const { key, word, color } = e.detail;
+        const { key, color } = e.detail;
         this.setData({
             showColorPopup: true,
             currentKey: key,
@@ -262,6 +283,10 @@ Page({
     },
 
     clearCardList() {
+        // 清空cardList时，重置canvas相关引用，因为DOM元素会被移除
+        this.canvas = null;
+        this.ctx = null;
+        this.textDrawService = null;
         this.drawCanvas([]);
     },
 

miniprogram/pages/index/index.wxml

@@ -18,6 +18,7 @@
                     wx:for="{{cardList}}"
                     wx:for-item="item"
                     wx:for-index="index"
+                    key="{{index}}"
                     word="{{item.word}}"
                     color="{{item.color}}"
                     bind:onDelete="deleteWordCard"
@@ -59,12 +60,9 @@
             </toy-button>
         </view>
     </view>
-    <view id="previewWrapper" class="wrapper">
+    <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
         <text class="wrapper-title">预览打印效果</text>
-        <view
-            wx:if="{{!isPCDevtool}}"
-            id="canvasWrapper"
-            class="canvas-wrapper">
+        <view id="canvasWrapper" class="canvas-wrapper">
             <canvas
                 type="2d"
                 id="canvasContent"

miniprogram/pages/shape/index.json

@@ -1,5 +1,5 @@
 {
-    "navigationBarTitleText": "涂鸦丫-图形",
+    "navigationBarTitleText": "涂鸦丫-认识图形",
     "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
     "backgroundColor": "#F6F6F6",