feat: 打印预览组件化

miniprogram/mathPages/mathDraw/mathDraw.wxml

@@ -3,42 +3,20 @@
 <view class="md-page">
     <view class="md-main">
         <!-- 打印预览卡 -->
-        <view class="md-preview-wrap">
-            <view class="md-preview-card">
-                <text class="md-preview-kicker">打印预览</text>
-                <view id="canvasWrapper" class="md-canvas-wrap">
-                    <canvas
-                        type="2d"
-                        id="canvasContent"
-                        class="md-canvas"
-                        style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-                </view>
-            </view>
-        </view>
-
-        <!-- 练习类型选择（2列卡片网格） -->
-        <view class="md-section">
-            <text class="md-section-title">练习类型</text>
-            <view class="md-type-grid">
-                <view
-                    wx:for="{{typeList}}"
-                    wx:key="id"
-                    class="md-type-card {{selectedTypeId === item.id ? 'md-type-card--active' : ''}}"
-                    data-id="{{item.id}}"
-                    hover-class="md-type-card--pressed"
-                    hover-start-time="0"
-                    hover-stay-time="70"
-                    bindtap="onSelectType">
-                    <text class="md-type-card__icon">{{item.icon}}</text>
-                    <text class="md-type-card__label">{{item.title}}</text>
-                </view>
-            </view>
-        </view>
+        <preview-card
+            id="previewCard"
+            showRefresh="{{true}}"
+            showFavorite="{{true}}"
+            favorited="{{isPreviewFavorite}}"
+            bind:canvas-ready="onCanvasReady"
+            bind:refresh="onPreviewRefresh"
+            bind:favorite="onPreviewFavorite" />
 
         <!-- 子选项（当前类型有模式切换时显示） -->
         <view wx:if="{{showActions}}" class="md-section">
             <text class="md-section-title">{{actionsTitle}}</text>
-            <view class="md-chip-row {{currentActions.length > 3 ? 'md-chip-row--wrap' : ''}}">
+            <view
+                class="md-chip-row {{currentActions.length > 3 ? 'md-chip-row--wrap' : ''}}">
                 <view
                     wx:for="{{currentActions}}"
                     wx:key="value"
@@ -71,7 +49,26 @@
             </view>
         </view>
 
-        <!-- 随机生成按钮 -->
+        <!-- 练习类型选择（2列卡片网格） -->
+        <view class="md-section">
+            <text class="md-section-title">练习类型</text>
+            <view class="md-type-grid">
+                <view
+                    wx:for="{{typeList}}"
+                    wx:key="id"
+                    class="md-type-card {{selectedTypeId === item.id ? 'md-type-card--active' : ''}}"
+                    data-id="{{item.id}}"
+                    hover-class="md-type-card--pressed"
+                    hover-start-time="0"
+                    hover-stay-time="70"
+                    bindtap="onSelectType">
+                    <text class="md-type-card__icon">{{item.icon}}</text>
+                    <text class="md-type-card__label">{{item.title}}</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 随机生成按钮
         <view
             class="md-shuffle-btn"
             hover-class="md-shuffle-btn--hover"
@@ -84,7 +81,7 @@
                 color="#605b50"
                 custom-class="md-shuffle-btn__icon" />
             <text class="md-shuffle-btn__text">随机生成</text>
-        </view>
+        </view> -->
 
         <!-- 广告位 -->
         <draw-ad type="mathDraw"></draw-ad>