feat:公用template

miniprogram/focusPages/codeConnect/codeConnect.wxml

@@ -1,38 +1,6 @@
-<view class="page-container">
+<!-- 模版不能跨包引用 -->
-    <view class="wrapper">
+<import src="../shared/templates/canvas-page-template.wxml" />
-        <text class="wrapper-title">预览打印效果</text>
 
-        <!-- 预览打印效果 -->
+<template
-        <view id="canvasWrapper" class="canvas-wrapper">
+    is="canvasPageTemplate"
-            <canvas
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-
-        <!-- 随机生成按钮 -->
-        <view class="random-button-area">
-            <toy-button
-                class="random-button"
-                type="primary"
-                bind:click="onRandom"
-                width="100%"
-                height="80rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-        </view>
-        <draw-ad type="focusDraw"></draw-ad>
-    </view>
-    <view class="empty"></view>
-</view>
-<math-bottom-buttons
-    disabled="{{!hasContent}}"
-    bind:share="onShareAppMessage"
-    bind:export="exportToPrint" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />

miniprogram/focusPages/colorPattern/colorPattern.wxml

@@ -1,38 +1,6 @@
-<view class="page-container">
+<!-- 模版不能跨包引用 -->
-    <view class="wrapper">
+<import src="../shared/templates/canvas-page-template.wxml" />
-        <text class="wrapper-title">预览打印效果</text>
 
-        <!-- 预览打印效果 -->
+<template
-        <view id="canvasWrapper" class="canvas-wrapper">
+    is="canvasPageTemplate"
-            <canvas
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-
-        <!-- 随机生成按钮 -->
-        <view class="random-button-area">
-            <toy-button
-                class="random-button"
-                type="primary"
-                bind:click="onRandom"
-                width="100%"
-                height="80rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-        </view>
-        <draw-ad type="focusDraw"></draw-ad>
-    </view>
-    <view class="empty"></view>
-</view>
-<math-bottom-buttons
-    disabled="{{!hasContent}}"
-    bind:share="onShareAppMessage"
-    bind:export="exportToPrint" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />

miniprogram/focusPages/gridDrawing/gridDrawing.wxml

@@ -1,32 +1,15 @@
-<view class="page-container">
+<!-- 模版不能跨包引用 -->
-    <view class="wrapper">
+<import src="../shared/templates/canvas-page-template.wxml" />
-        <text class="wrapper-title">预览打印效果</text>
 
-        <!-- 预览打印效果 -->
+<template
-        <view id="canvasWrapper" class="canvas-wrapper">
+    is="canvasPageTemplate"
-            <canvas
+    data="{{
-                type="2d"
+    boxWidth: boxWidth, 
-                id="canvasContent"
+    boxHeight: boxHeight, 
-                class="canvas-content"
+    hasTypeSelector: true, 
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+    currentModeName: currentModeName, 
-        </view>
+    typeActions: typeActions, 
-
+    adType: 'focusDraw', 
-        <!-- 类型选择器和随机生成按钮 -->
+    disabled: !hasContent, 
-        <math-type-selector
+    showShareDialog: showShareDialog
-            current-type-name="{{currentModeName}}"
+}}" />
-            type-actions="{{typeActions}}"
-            bind:select="onSelectType"
-            bind:random="onRandom" />
-        <draw-ad type="focusDraw"></draw-ad>
-    </view>
-
-    <view class="empty"></view>
-</view>
-<math-bottom-buttons
-    disabled="{{!hasContent}}"
-    bind:share="onShareAppMessage"
-    bind:export="exportToPrint" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />

miniprogram/focusPages/gridReasoning/gridReasoning.wxml

@@ -1,31 +1,15 @@
-<view class="page-container">
+<!-- 模版不能跨包引用 -->
-    <view class="wrapper">
+<import src="../shared/templates/canvas-page-template.wxml" />
-        <text class="wrapper-title">预览打印效果</text>
 
-        <!-- 预览打印效果 -->
+<template
-        <view id="canvasWrapper" class="canvas-wrapper">
+    is="canvasPageTemplate"
-            <canvas
+    data="{{
-                type="2d"
+        boxWidth: boxWidth, 
-                id="canvasContent"
+        boxHeight: boxHeight, 
-                class="canvas-content"
+        hasTypeSelector: true, 
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+        currentModeName: currentOperatorTypeName, 
-        </view>
+        typeActions: operatorTypeActions, 
-
+        adType: 'focusDraw', 
-        <!-- 类型选择器和随机生成按钮 -->
+        disabled: !hasContent, 
-        <math-type-selector
+        showShareDialog: showShareDialog
-            current-type-name="{{currentOperatorTypeName}}"
+    }}" />
-            type-actions="{{operatorTypeActions}}"
-            bind:select="onSelectType"
-            bind:random="onRandom" />
-        <draw-ad type="focusDraw"></draw-ad>
-    </view>
-    <view class="empty"></view>
-</view>
-<math-bottom-buttons
-    disabled="{{!hasContent}}"
-    bind:share="onShareAppMessage"
-    bind:export="exportToPrint" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />

miniprogram/focusPages/lineRecognition/lineRecognition.wxml

@@ -1,38 +1,6 @@
-<view class="page-container">
+<!-- 模版不能跨包引用 -->
-    <view class="wrapper">
+<import src="../shared/templates/canvas-page-template.wxml" />
-        <text class="wrapper-title">预览打印效果</text>
 
-        <!-- 预览打印效果 -->
+<template
-        <view id="canvasWrapper" class="canvas-wrapper">
+    is="canvasPageTemplate"
-            <canvas
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-
-        <!-- 随机生成按钮 -->
-        <view class="random-button-area">
-            <toy-button
-                class="random-button"
-                type="primary"
-                bind:click="onRandom"
-                width="100%"
-                height="80rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-        </view>
-        <draw-ad type="focusDraw"></draw-ad>
-    </view>
-    <view class="empty"></view>
-</view>
-<math-bottom-buttons
-    disabled="{{!hasContent}}"
-    bind:share="onShareAppMessage"
-    bind:export="exportToPrint" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />

miniprogram/focusPages/matchConnect/matchConnect.wxml

@@ -1,38 +1,6 @@
-<view class="page-container">
+<!-- 模版不能跨包引用 -->
-    <view class="wrapper">
+<import src="../shared/templates/canvas-page-template.wxml" />
-        <text class="wrapper-title">预览打印效果</text>
 
-        <!-- 预览打印效果 -->
+<template
-        <view id="canvasWrapper" class="canvas-wrapper">
+    is="canvasPageTemplate"
-            <canvas
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-
-        <!-- 随机生成按钮 -->
-        <view class="random-button-area">
-            <toy-button
-                class="random-button"
-                type="primary"
-                bind:click="onRandom"
-                width="100%"
-                height="80rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-        </view>
-        <draw-ad type="focusDraw"></draw-ad>
-    </view>
-    <view class="empty"></view>
-</view>
-<math-bottom-buttons
-    disabled="{{!hasContent}}"
-    bind:share="onShareAppMessage"
-    bind:export="exportToPrint" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />

miniprogram/focusPages/positionColoring/positionColoring.wxml

@@ -1,38 +1,6 @@
-<view class="page-container">
+<!-- 模版不能跨包引用 -->
-    <view class="wrapper">
+<import src="../shared/templates/canvas-page-template.wxml" />
-        <text class="wrapper-title">预览打印效果</text>
 
-        <!-- 预览打印效果 -->
+<template
-        <view id="canvasWrapper" class="canvas-wrapper">
+    is="canvasPageTemplate"
-            <canvas
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-
-        <!-- 随机生成按钮 -->
-        <view class="random-button-area">
-            <toy-button
-                class="random-button"
-                type="primary"
-                bind:click="onRandom"
-                width="100%"
-                height="80rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-        </view>
-        <draw-ad type="focusDraw"></draw-ad>
-    </view>
-    <view class="empty"></view>
-</view>
-<math-bottom-buttons
-    disabled="{{!hasContent}}"
-    bind:share="onShareAppMessage"
-    bind:export="exportToPrint" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />

miniprogram/focusPages/shared/templates/canvas-page-template.wxml

@@ -0,0 +1,78 @@
+<!--
+  Canvas 页面模板
+  用于统一管理 Canvas 绘制页面的通用结构
+  
+  使用方式：
+  <import src="../../templates/canvas-page-template.wxml" />
+  <template
+      is="canvasPageTemplate"
+      data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
+  
+  参数说明：
+  - boxWidth: Canvas 宽度
+  - boxHeight: Canvas 高度
+  - hasTypeSelector: 是否显示类型选择器（布尔值）
+  - showTypeSelector: 条件显示类型选择器（可选，用于 countMatch、missingNumber 等页面）
+  - currentModeName: 当前模式名称（类型选择器使用）
+  - typeActions: 类型选项数组（类型选择器使用）
+  - adType: 广告位类型（'focusDraw' 或 'mathDraw'）
+  - disabled: 底部按钮是否禁用
+  - showShareDialog: 是否显示分享弹窗
+-->
+<template name="canvasPageTemplate">
+    <view class="page-container">
+        <view class="wrapper">
+            <text class="wrapper-title">预览打印效果</text>
+
+            <!-- 预览打印效果 -->
+            <view id="canvasWrapper" class="canvas-wrapper">
+                <canvas
+                    type="2d"
+                    id="canvasContent"
+                    class="canvas-content"
+                    style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+            </view>
+
+            <!-- 类型选择器和随机生成按钮 -->
+            <!-- 支持两种方式：hasTypeSelector（布尔值）或 showTypeSelector（条件显示） -->
+            <math-type-selector
+                wx:if="{{hasTypeSelector || showTypeSelector}}"
+                current-type-name="{{currentModeName}}"
+                type-actions="{{typeActions}}"
+                bind:select="onSelectType"
+                bind:random="onRandom" />
+
+            <!-- 随机生成按钮（当没有类型选择器时显示） -->
+            <view
+                class="random-button-area"
+                wx:if="{{!hasTypeSelector && !showTypeSelector}}">
+                <toy-button
+                    class="random-button"
+                    type="primary"
+                    bind:click="onRandom"
+                    width="100%"
+                    height="80rpx"
+                    icon="refresh"
+                    icon-class-prefix="toy-icon">
+                    随机生成
+                </toy-button>
+            </view>
+
+            <!-- 广告位 -->
+            <draw-ad type="{{adType}}"></draw-ad>
+        </view>
+        <view class="empty"></view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <math-bottom-buttons
+        disabled="{{disabled}}"
+        bind:share="onShareAppMessage"
+        bind:export="exportToPrint" />
+
+    <!-- 分享引导弹窗 -->
+    <share-guide-popup
+        show="{{showShareDialog}}"
+        bind:onClose="onCloseShareDialog"
+        bind:onShareSuccess="onShareSuccess" />
+</template>