feat:2.4.4数一数比大小

miniprogram/mathPages/compare/compare.json

@@ -0,0 +1,12 @@
+{
+    "navigationBarTitleText": "数一数，比大小",
+    "navigationBarBackgroundColor": "#FFD719",
+    "homeButton": true,
+    "backgroundColor": "#F6F6F6",
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "toy-button": "../../ui/button/button",
+        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
+        "math-bottom-buttons": "../components/math-bottom-buttons/math-bottom-buttons"
+    }
+}

miniprogram/mathPages/compare/compare.less

@@ -0,0 +1 @@
+@import '../common/mathPage.less';

miniprogram/mathPages/compare/compare.ts

@@ -0,0 +1,132 @@
+import CompareDraw from '../service/compareDraw';
+import {
+    getMathPageCommonMethods,
+    CanvasDataState,
+} from '../common/mathPageMixin';
+
+// 获取公共方法
+const commonMethods = getMathPageCommonMethods({
+    pagePath: 'compare/compare',
+});
+
+Page({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as CompareDraw | null,
+    compareData: null as {
+        problems: Array<{
+            leftCount: number;
+            rightCount: number;
+            leftImageIndex: number;
+            rightImageIndex: number;
+            imageType: 'fruits' | 'twelve-animals';
+        }>;
+    } | null,
+
+    data: {
+        pageTitle: '数一数，比大小',
+        subTitle: '数一数，比较数量，在⭕️中填入＞、＜、＝',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    } as CanvasDataState,
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'compare';
+        this.initPageInfo(functionId, '数一数，比大小');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (canvas, ctx, options) => {
+                return new CompareDraw(canvas, ctx, options);
+            },
+            drawServiceOptions: {
+                subTitle: this.data.subTitle,
+            },
+            onCanvasReady: () => {
+                // Canvas 初始化完成后，生成初始数据
+                this.onRandom();
+            },
+        });
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService || !this.compareData) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw(this.compareData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        this.generateCompareData();
+        this.drawCanvas();
+    },
+
+    /**
+     * 生成比较数据
+     */
+    generateCompareData() {
+        const problems: Array<{
+            leftCount: number;
+            rightCount: number;
+            leftImageIndex: number;
+            rightImageIndex: number;
+            imageType: 'fruits' | 'twelve-animals';
+        }> = [];
+
+        // 生成6道题目
+        for (let i = 0; i < 12; i++) {
+            // 随机选择图片类型
+            const imageType: 'fruits' | 'twelve-animals' =
+                Math.random() < 0.5 ? 'fruits' : 'twelve-animals';
+
+            // 根据图片类型确定最大索引
+            const maxImageIndex = imageType === 'fruits' ? 22 : 12;
+
+            // 生成左右两边的数量（1-10）
+            const leftCount = Math.floor(Math.random() * 10) + 1;
+            const rightCount = Math.floor(Math.random() * 10) + 1;
+
+            // 随机选择图片索引
+            const leftImageIndex =
+                Math.floor(Math.random() * maxImageIndex) + 1;
+            const rightImageIndex =
+                Math.floor(Math.random() * maxImageIndex) + 1;
+
+            problems.push({
+                leftCount,
+                rightCount,
+                leftImageIndex,
+                rightImageIndex,
+                imageType,
+            });
+        }
+
+        this.compareData = { problems };
+    },
+
+    // ========== 使用公共方法 ==========
+    initCanvas: commonMethods.initCanvas,
+    exportToPrint: commonMethods.exportToPrint,
+    onShareAppMessage: commonMethods.onShareAppMessage,
+    onShareTimeline: commonMethods.onShareTimeline,
+    onCloseShareDialog: commonMethods.onCloseShareDialog,
+    onShareSuccess: commonMethods.onShareSuccess,
+    initPageInfo: commonMethods.initPageInfo,
+});

miniprogram/mathPages/compare/compare.wxml

@@ -0,0 +1,37 @@
+<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>
+
+        <!-- 随机生成按钮 -->
+        <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>
+    </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" />