feat: 打印预览组件化

miniprogram/englishPages/letterTracing/letterTracing.json

@@ -10,6 +10,7 @@
         "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
         "draw-ad": "../../components/draw-ad/draw-ad",
         "preview-footer-actions": "../../components3.0/preview-footer-actions/preview-footer-actions",
-        "toy-icon": "../../toy/icon/icon"
+        "toy-icon": "../../toy/icon/icon",
+        "preview-card": "../../components3.0/preview-card/preview-card"
     }
 }

miniprogram/englishPages/letterTracing/letterTracing.less

@@ -19,53 +19,6 @@ page {
     gap: 64rpx;
 }
 
-/* ===== 预览卡 (rounded-xl shadow-sm p-8 border) ===== */
-.lt-preview-wrap {
-    position: relative;
-}
-
-.lt-preview-card {
-    background: @bg-white;
-    border-radius: @radius-xl;
-    box-shadow: @shadow;
-    padding: 40rpx;
-    border: @border;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-}
-
-.lt-preview-kicker {
-    display: block;
-    text-align: center;
-    /* text-xs = 12px → 24rpx */
-    font-size: @fs-section-head-title;
-    font-weight: bold;
-    color: @text-secondary;
-    // 设置字母间距，使文本字符之间有更宽的间隔，提升可读性和美观性
-    letter-spacing: 0.12em;
-    text-transform: uppercase;
-    margin-bottom: 30rpx;
-}
-
-.lt-canvas-wrap {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 400rpx;
-    background: @bg-gray;
-    border-radius: @radius-sm;
-    border: 2rpx dashed rgba(50, 46, 37, 0.12);
-    overflow: hidden;
-}
-
-.lt-canvas {
-    max-width: 100%;
-    border-radius: @radius-sm;
-    box-shadow: @shadow;
-}
-
 /* ===== 独立 Section 区块（参考 UI 稿 space-y-4） ===== */
 .lt-section {
     display: flex;

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);

miniprogram/englishPages/letterTracing/letterTracing.wxml

@@ -2,18 +2,13 @@
 
 <view class="lt-page">
     <view class="lt-main">
-        <view class="lt-preview-wrap">
-            <view class="lt-preview-card">
-                <text class="lt-preview-kicker">打印预览</text>
-                <view id="canvasWrapper" class="lt-canvas-wrap">
-                    <canvas
-                        type="2d"
-                        id="canvasContent"
-                        class="lt-canvas"
-                        style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-                </view>
-            </view>
-        </view>
+        <preview-card
+            id="previewCard"
+            showRefresh="{{false}}"
+            showFavorite="{{true}}"
+            favorited="{{isPreviewFavorite}}"
+            bind:canvas-ready="onCanvasReady"
+            bind:favorite="onPreviewFavorite" />
 
         <!-- 练习类型（2列卡片网格） -->
         <view class="lt-section">