From 95ef36a564b976779107212c3f2b63a374e88de3 Mon Sep 17 00:00:00 2001
From: R524809 <R524809@hyundai-hmatc.com>
Date: Mon, 22 Dec 2025 17:32:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=85=AC=E7=94=A8template?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../focusPages/codeConnect/codeConnect.wxml   | 42 ++--------
 .../focusPages/colorPattern/colorPattern.wxml | 42 ++--------
 .../focusPages/gridDrawing/gridDrawing.wxml   | 45 ++++-------
 .../gridReasoning/gridReasoning.wxml          | 44 ++++-------
 .../lineRecognition/lineRecognition.wxml      | 42 ++--------
 .../focusPages/matchConnect/matchConnect.wxml | 42 ++--------
 .../positionColoring/positionColoring.wxml    | 42 ++--------
 .../templates/canvas-page-template.wxml       | 78 +++++++++++++++++++
 8 files changed, 131 insertions(+), 246 deletions(-)
 create mode 100644 miniprogram/focusPages/shared/templates/canvas-page-template.wxml

diff --git a/miniprogram/focusPages/codeConnect/codeConnect.wxml b/miniprogram/focusPages/codeConnect/codeConnect.wxml
index b475771..3b70e13 100644
--- a/miniprogram/focusPages/codeConnect/codeConnect.wxml
+++ b/miniprogram/focusPages/codeConnect/codeConnect.wxml
@@ -1,38 +1,6 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
 
-        <!-- 预览打印效果 -->
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                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" />
+<template
+    is="canvasPageTemplate"
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
diff --git a/miniprogram/focusPages/colorPattern/colorPattern.wxml b/miniprogram/focusPages/colorPattern/colorPattern.wxml
index b475771..3b70e13 100644
--- a/miniprogram/focusPages/colorPattern/colorPattern.wxml
+++ b/miniprogram/focusPages/colorPattern/colorPattern.wxml
@@ -1,38 +1,6 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
 
-        <!-- 预览打印效果 -->
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                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" />
+<template
+    is="canvasPageTemplate"
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
diff --git a/miniprogram/focusPages/gridDrawing/gridDrawing.wxml b/miniprogram/focusPages/gridDrawing/gridDrawing.wxml
index 17d4f8a..aa6a456 100644
--- a/miniprogram/focusPages/gridDrawing/gridDrawing.wxml
+++ b/miniprogram/focusPages/gridDrawing/gridDrawing.wxml
@@ -1,32 +1,15 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
 
-        <!-- 预览打印效果 -->
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-
-        <!-- 类型选择器和随机生成按钮 -->
-        <math-type-selector
-            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" />
+<template
+    is="canvasPageTemplate"
+    data="{{
+    boxWidth: boxWidth, 
+    boxHeight: boxHeight, 
+    hasTypeSelector: true, 
+    currentModeName: currentModeName, 
+    typeActions: typeActions, 
+    adType: 'focusDraw', 
+    disabled: !hasContent, 
+    showShareDialog: showShareDialog
+}}" />
diff --git a/miniprogram/focusPages/gridReasoning/gridReasoning.wxml b/miniprogram/focusPages/gridReasoning/gridReasoning.wxml
index 092df36..da2d7d5 100644
--- a/miniprogram/focusPages/gridReasoning/gridReasoning.wxml
+++ b/miniprogram/focusPages/gridReasoning/gridReasoning.wxml
@@ -1,31 +1,15 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
 
-        <!-- 预览打印效果 -->
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-
-        <!-- 类型选择器和随机生成按钮 -->
-        <math-type-selector
-            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" />
+<template
+    is="canvasPageTemplate"
+    data="{{
+        boxWidth: boxWidth, 
+        boxHeight: boxHeight, 
+        hasTypeSelector: true, 
+        currentModeName: currentOperatorTypeName, 
+        typeActions: operatorTypeActions, 
+        adType: 'focusDraw', 
+        disabled: !hasContent, 
+        showShareDialog: showShareDialog
+    }}" />
diff --git a/miniprogram/focusPages/lineRecognition/lineRecognition.wxml b/miniprogram/focusPages/lineRecognition/lineRecognition.wxml
index b475771..3b70e13 100644
--- a/miniprogram/focusPages/lineRecognition/lineRecognition.wxml
+++ b/miniprogram/focusPages/lineRecognition/lineRecognition.wxml
@@ -1,38 +1,6 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
 
-        <!-- 预览打印效果 -->
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                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" />
+<template
+    is="canvasPageTemplate"
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
diff --git a/miniprogram/focusPages/matchConnect/matchConnect.wxml b/miniprogram/focusPages/matchConnect/matchConnect.wxml
index b475771..3b70e13 100644
--- a/miniprogram/focusPages/matchConnect/matchConnect.wxml
+++ b/miniprogram/focusPages/matchConnect/matchConnect.wxml
@@ -1,38 +1,6 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
 
-        <!-- 预览打印效果 -->
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                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" />
+<template
+    is="canvasPageTemplate"
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
diff --git a/miniprogram/focusPages/positionColoring/positionColoring.wxml b/miniprogram/focusPages/positionColoring/positionColoring.wxml
index b475771..3b70e13 100644
--- a/miniprogram/focusPages/positionColoring/positionColoring.wxml
+++ b/miniprogram/focusPages/positionColoring/positionColoring.wxml
@@ -1,38 +1,6 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+<!-- 模版不能跨包引用 -->
+<import src="../shared/templates/canvas-page-template.wxml" />
 
-        <!-- 预览打印效果 -->
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                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" />
+<template
+    is="canvasPageTemplate"
+    data="{{boxWidth: boxWidth, boxHeight: boxHeight, hasTypeSelector: false, adType: 'focusDraw', disabled: !hasContent, showShareDialog: showShareDialog}}" />
diff --git a/miniprogram/focusPages/shared/templates/canvas-page-template.wxml b/miniprogram/focusPages/shared/templates/canvas-page-template.wxml
new file mode 100644
index 0000000..7d0d932
--- /dev/null
+++ b/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>