feat: 完成引导页

miniprogram/pages/index/index.less

@@ -52,11 +52,15 @@ page {
 .canvas-wrapper {
     margin-top: 20rpx;
     width: 100%;
-    border: 1rpx solid #141414;
+    // border: 1rpx solid #141414;
     background-color: #fff;
     box-sizing: border-box;
 }
 
+#canvasContent {
+    border: 1px solid #666;
+}
+
 .btn-area {
     position: fixed;
     left: 0;

miniprogram/pages/index/index.ts

@@ -20,19 +20,19 @@ Page({
         const hasShowIntroduction =
             wx.getStorageSync('hasShowIntroduction') || false;
 
-        if (!hasShowIntroduction) {
-            this.setData({
-                cardList: [
-                    { color: '#FF0000', word: '涂' },
-                    { color: '#00FF00', word: '欢' },
-                    { color: '#FF7F00', word: '鸦' },
-                    { color: '#00FFFF', word: '迎' },
-                    { color: '#FFFF00', word: '丫' },
-                    { color: '#8A2BE2', word: '你' },
-                ],
-                showIntroductionPopup: true,
-            });
-        }
+        // if (!hasShowIntroduction) {
+        this.setData({
+            cardList: [
+                { color: '#FF0000', word: '涂' },
+                { color: '#00FF00', word: '欢' },
+                { color: '#FF7F00', word: '鸦' },
+                { color: '#00FFFF', word: '迎' },
+                { color: '#FFFF00', word: '丫' },
+                { color: '#8A2BE2', word: '你' },
+            ],
+            showIntroductionPopup: true,
+        });
+        // }
     },
 
     onReady() {
@@ -71,6 +71,7 @@ Page({
                         this.textDrawService = new TextDrawService(canvas, ctx);
                         // textDrawService.draw();
                         this.setData({ boxWidth, boxHeight });
+                        this.drawCanvas();
                     }
                 }
             });
@@ -78,10 +79,15 @@ Page({
 
     /** 变更cardList 并更新canvas */
     drawCanvas(
-        updatedCardList: Array<{ color: string; word: string }>,
+        updatedCardList?: Array<{ color: string; word: string }>,
         callback: () => void = () => {},
     ) {
-        this.setData({ cardList: updatedCardList }, callback);
+        if (updatedCardList && updatedCardList.length > 0) {
+            this.setData({ cardList: updatedCardList }, callback);
+        } else {
+            updatedCardList = this.data.cardList;
+        }
+
         this.textDrawService?.draw(updatedCardList);
     },
 

miniprogram/pages/index/index.wxml

@@ -63,4 +63,6 @@
         下载打印
     </toy-button> -->
 </view>
-<introduction-popup wx:if="{{showIntroductionPopup}}" />
+<introduction-popup
+    wx:if="{{showIntroductionPopup}}"
+    bind:onClose="onCloseIntroductionPopup" />