feat: 打印预览组件化

miniprogram/englishPages/letterTracing/letterTracing.ts

@@ -92,6 +92,7 @@ type PageData = CanvasDataState & {
     selectedTripleGroupIdx: number;
     letterGrid: string[];
     modeOptions: ReadonlyArray<{ id: string; label: string; desc: string }>;
+    isPreviewFavorite: boolean;
 };
 
 createPage(
@@ -121,6 +122,7 @@ createPage(
             selectedTripleGroupIdx: 0,
             letterGrid: LETTERS_PAIRS,
             modeOptions: [...MODES],
+            isPreviewFavorite: false,
         } as unknown as PageData,
 
         /** 页面加载：从路由参数获取 worksheetId、letter、case、font 并应用，同时预加载字体 */
@@ -170,9 +172,9 @@ createPage(
             });
         },
 
-        /** 页面就绪：初始化 Canvas → 首次绘制（标题行前缀使用系统 emoji，无需 loadFontFace） */
-        onReady() {
-            this.initCanvas({
+        /** Canvas 组件就绪回调：创建 DrawService → 首次绘制 */
+        onCanvasReady(e: WechatMiniprogram.CustomEvent) {
+            this.initCanvasFromComponent(e.detail, {
                 createDrawService: (
                     canvas: Canvas,
                     ctx: RenderingContext,
@@ -274,6 +276,15 @@ createPage(
             this.drawCanvas();
         },
 
+        onPreviewFavorite() {
+            const next = !this.data.isPreviewFavorite;
+            this.setData({ isPreviewFavorite: next });
+            wx.showToast({
+                title: next ? '收藏成功' : '已取消收藏',
+                icon: 'none',
+            });
+        },
+
         /** 用户在三字母分组选择器中选择了一组 */
         onSelectTripleGroup(e: WechatMiniprogram.TouchEvent) {
             const idx = Number(e.currentTarget.dataset.idx);