feat:2.4.510以内数字的分与合

miniprogram/app.json

@@ -16,7 +16,8 @@
                 "addition/addition",
                 "missingNumber/missingNumber",
                 "compare/compare",
-                "countingSelect/countingSelect"
+                "countingSelect/countingSelect",
+                "numberDecompose/numberDecompose"
             ],
             "independent": false
         }

miniprogram/constants/mathFunctions.ts

@@ -66,6 +66,13 @@ export const MATH_FUNCTION_TYPES: MathFunctionType[] = [
         desc: '在数字序列中找出并填写缺失的数字',
         icon: '❓',
     },
+    {
+        id: 'number-decompose',
+        page: 'numberDecompose',
+        title: '10以内数的分与合',
+        desc: '学习数的分解与组合',
+        icon: '🔢',
+    },
     // 第四阶段：简单运算（从易到难）
     {
         id: 'addition-5',

miniprogram/mathPages/numberDecompose/numberDecompose.json

@@ -0,0 +1,12 @@
+{
+    "navigationBarTitleText": "10以内数的分与合",
+    "navigationBarBackgroundColor": "#FFD719",
+    "homeButton": true,
+    "backgroundColor": "#F6F6F6",
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
+        "math-bottom-buttons": "../components/math-bottom-buttons/math-bottom-buttons",
+        "math-type-selector": "../components/math-type-selector/math-type-selector"
+    }
+}

miniprogram/mathPages/numberDecompose/numberDecompose.less

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

miniprogram/mathPages/numberDecompose/numberDecompose.ts

@@ -0,0 +1,211 @@
+import NumberDecomposeDraw from '../service/numberDecomposeDraw';
+import {
+    getMathPageCommonMethods,
+    CanvasDataState,
+} from '../common/mathPageMixin';
+
+// 获取公共方法
+const commonMethods = getMathPageCommonMethods({
+    pagePath: 'numberDecompose/numberDecompose',
+});
+
+type DecomposeMode = 'with-image' | 'decompose' | 'compose';
+
+Page({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as NumberDecomposeDraw | null,
+    decomposeData: null as {
+        problems: Array<{
+            whole: number | null; // 总数（null表示组合模式需要填写）
+            part1: number | null; // 第一个部分（null表示需要填写）
+            part2: number | null; // 第二个部分（null表示需要填写）
+            imageIndex?: number; // 图片索引（有图片模式需要）
+            imageType?: 'fruits' | 'twelve-animals'; // 图片类型
+        }>;
+        mode: DecomposeMode;
+    } | null,
+
+    data: {
+        pageTitle: '10以内数的分与合',
+        subTitle: '学习数的分解与组合',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+        showTypeSelector: true,
+        currentType: 'with-image',
+        currentTypeName: '有图片模式',
+        typeActions: [
+            { name: '有图片模式', value: 'with-image' },
+            { name: '分模式', value: 'decompose' },
+            { name: '组合模式', value: 'compose' },
+        ],
+    } as CanvasDataState & {
+        showTypeSelector: boolean;
+        currentType: DecomposeMode;
+        currentTypeName: string;
+        typeActions: Array<{ name: string; value: DecomposeMode }>;
+    },
+
+    onLoad(options: { id?: string; mode?: DecomposeMode }) {
+        const functionId = options.id || 'number-decompose';
+        const mode = options.mode || 'with-image';
+        const currentTypeName =
+            mode === 'with-image'
+                ? '有图片模式'
+                : mode === 'decompose'
+                  ? '分模式'
+                  : '组合模式';
+        this.setData({
+            currentType: mode,
+            currentTypeName,
+        });
+        this.initPageInfo(functionId, '10以内数的分与合');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (canvas, ctx, options) => {
+                return new NumberDecomposeDraw(canvas, ctx, options);
+            },
+            drawServiceOptions: {
+                subTitle: this.data.subTitle,
+            },
+            onCanvasReady: () => {
+                // Canvas 初始化完成后，生成初始数据
+                this.onRandom();
+            },
+        });
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService || !this.decomposeData) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw(this.decomposeData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        this.generateDecomposeData();
+        this.drawCanvas();
+    },
+
+    /**
+     * 生成分解数据
+     */
+    generateDecomposeData() {
+        const mode = this.data.currentType;
+        const problems: Array<{
+            whole: number;
+            part1: number | null;
+            part2: number | null;
+            imageIndex?: number;
+            imageType?: 'fruits' | 'twelve-animals';
+        }> = [];
+
+        if (mode === 'with-image') {
+            // 有图片模式：6个题目，一行两列，总共三行
+            const problemCount = 6;
+            for (let i = 0; i < problemCount; i++) {
+                // 生成总数（2-10）
+                const whole = Math.floor(Math.random() * 9) + 2;
+                // 随机选择一个部分（1 到 whole-1）
+                const part1 = Math.floor(Math.random() * (whole - 1)) + 1;
+                const part2 = whole - part1;
+
+                // 随机决定显示 part1 还是 part2（另一个为 null）
+                const showPart1 = Math.random() < 0.5;
+                const problem = {
+                    whole,
+                    part1: showPart1 ? part1 : null,
+                    part2: showPart1 ? null : part2,
+                };
+
+                // 随机选择图片类型和索引
+                const imageType: 'fruits' | 'twelve-animals' =
+                    Math.random() < 0.5 ? 'fruits' : 'twelve-animals';
+                const maxImageIndex = imageType === 'fruits' ? 22 : 12;
+                const imageIndex =
+                    Math.floor(Math.random() * maxImageIndex) + 1;
+
+                problems.push({
+                    ...problem,
+                    imageIndex,
+                    imageType,
+                });
+            }
+        } else if (mode === 'decompose') {
+            // 分模式：12个题目，一行3个，总共4行
+            const problemCount = 15;
+            for (let i = 0; i < problemCount; i++) {
+                // 生成总数（2-10）
+                const whole = Math.floor(Math.random() * 9) + 2;
+                // 随机选择一个部分（1 到 whole-1）
+                const part1 = Math.floor(Math.random() * (whole - 1)) + 1;
+                const part2 = whole - part1;
+
+                // 随机决定显示 part1 还是 part2（另一个为 null）
+                const showPart1 = Math.random() < 0.5;
+                problems.push({
+                    whole,
+                    part1: showPart1 ? part1 : null,
+                    part2: showPart1 ? null : part2,
+                });
+            }
+        } else if (mode === 'compose') {
+            // 组合模式：12个题目，一行3个，总共4行
+            const problemCount = 15;
+            for (let i = 0; i < problemCount; i++) {
+                // 生成总数（2-10）
+                const whole = Math.floor(Math.random() * 9) + 2;
+                // 随机选择一个部分（1 到 whole-1）
+                const part1 = Math.floor(Math.random() * (whole - 1)) + 1;
+                const part2 = whole - part1;
+
+                // 组合模式：两个部分都显示，根节点为 null
+                problems.push({
+                    whole: null, // 根节点需要填写
+                    part1,
+                    part2,
+                });
+            }
+        }
+
+        this.decomposeData = { problems, mode };
+    },
+
+    // ========== 使用公共方法 ==========
+    initCanvas: commonMethods.initCanvas,
+    exportToPrint: commonMethods.exportToPrint,
+    onShareAppMessage: commonMethods.onShareAppMessage,
+    onShareTimeline: commonMethods.onShareTimeline,
+    onCloseShareDialog: commonMethods.onCloseShareDialog,
+    onShareSuccess: commonMethods.onShareSuccess,
+    initPageInfo: commonMethods.initPageInfo,
+
+    /** 选择类型 */
+    onSelectType(event: any) {
+        const { name, value } = event.detail;
+        this.setData({
+            currentType: value,
+            currentTypeName: name,
+        });
+        // 重新生成数据
+        this.onRandom();
+    },
+});

miniprogram/mathPages/numberDecompose/numberDecompose.wxml

@@ -0,0 +1,31 @@
+<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>
+
+        <!-- 类型选择器和随机生成按钮 -->
+        <math-type-selector
+            wx:if="{{showTypeSelector}}"
+            current-type-name="{{currentTypeName}}"
+            type-actions="{{typeActions}}"
+            bind:select="onSelectType"
+            bind:random="onRandom" />
+    </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/mathPages/service/numberDecomposeContentDraw.ts

@@ -0,0 +1,497 @@
+import { getImage } from '../../utils/index';
+import { getRandomNumberColor } from '../../constants/colors';
+
+interface DrawNumberDecomposeContentParams {
+    canvas: WechatMiniprogram.Canvas;
+    ctx: RenderingContext;
+    decomposeData: {
+        problems: Array<{
+            whole: number | null;
+            part1: number | null;
+            part2: number | null;
+            imageIndex?: number;
+            imageType?: 'fruits' | 'twelve-animals';
+        }>;
+        mode: 'with-image' | 'decompose' | 'compose';
+    };
+    canvasWidth: number;
+    startY: number;
+}
+
+/**
+ * 绘制圆角矩形（虚线边框）
+ */
+function drawRoundedRect(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+    isDashed: boolean = false,
+) {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+
+    if (isDashed) {
+        ctx.setLineDash([6 / 3, 6 / 3]); // 约2px的虚线
+    } else {
+        ctx.setLineDash([]);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]); // 重置为实线
+}
+
+/**
+ * 绘制数的分与合内容区域
+ */
+export async function drawNumberDecomposeContent({
+    canvas,
+    ctx,
+    decomposeData,
+    canvasWidth,
+    startY,
+}: DrawNumberDecomposeContentParams): Promise<void> {
+    const { problems, mode } = decomposeData;
+
+    if (mode === 'with-image') {
+        await drawWithImageMode(canvas, ctx, problems, canvasWidth, startY);
+    } else if (mode === 'decompose') {
+        await drawDecomposeOrComposeMode(
+            ctx,
+            problems,
+            canvasWidth,
+            startY,
+            false,
+        );
+    } else if (mode === 'compose') {
+        await drawDecomposeOrComposeMode(
+            ctx,
+            problems,
+            canvasWidth,
+            startY,
+            true,
+        );
+    }
+}
+
+/**
+ * 有图片模式：一行两列，总共三行（6个题目）
+ */
+async function drawWithImageMode(
+    canvas: WechatMiniprogram.Canvas,
+    ctx: RenderingContext,
+    problems: Array<{
+        whole: number | null;
+        part1: number | null;
+        part2: number | null;
+        imageIndex?: number;
+        imageType?: 'fruits' | 'twelve-animals';
+    }>,
+    canvasWidth: number,
+    startY: number,
+) {
+    const leftMargin = 30;
+    const rightMargin = 30;
+    const topMargin = 20;
+    const boxSpacing = 40;
+    const rowSpacing = 40;
+
+    // 计算每个框的尺寸
+    const availableWidth = canvasWidth - leftMargin - rightMargin;
+    const boxWidth = (availableWidth - boxSpacing) / 2; // 2列，1个间距
+    const imageAreaHeight = 116; // 图片区域高度
+    const treeAreaHeight = 80; // 二叉树区域高度
+
+    let currentY = startY + topMargin;
+
+    // 绘制2列3行
+    for (let row = 0; row < 3; row++) {
+        for (let col = 0; col < 2; col++) {
+            const problemIndex = row * 2 + col;
+            if (problemIndex >= problems.length) {
+                continue;
+            }
+
+            const problem = problems[problemIndex];
+            const boxX = leftMargin + col * (boxWidth + boxSpacing);
+            const boxY =
+                currentY +
+                row * (imageAreaHeight + treeAreaHeight + rowSpacing);
+
+            // 绘制一个完整的题目框
+            await drawWithImageProblem(
+                ctx,
+                canvas,
+                problem,
+                boxX,
+                boxY,
+                boxWidth,
+                imageAreaHeight,
+                treeAreaHeight,
+            );
+        }
+    }
+}
+
+/**
+ * 分模式/组合模式：一行3个，总共5行（15个题目）
+ * @param isInverted true 为组合模式（倒置二叉树），false 为分模式（正常二叉树）
+ */
+async function drawDecomposeOrComposeMode(
+    ctx: RenderingContext,
+    problems: Array<{
+        whole: number | null;
+        part1: number | null;
+        part2: number | null;
+    }>,
+    canvasWidth: number,
+    startY: number,
+    isInverted: boolean,
+) {
+    const leftMargin = 30;
+    const rightMargin = 30;
+    const topMargin = 20;
+    const boxSpacing = 15;
+    const rowSpacing = 140;
+
+    // 计算每个框的尺寸
+    const availableWidth = canvasWidth - leftMargin - rightMargin;
+    const boxWidth = (availableWidth - boxSpacing * 2) / 3; // 3列，2个间距
+    const boxHeight = 80; // 二叉树区域高度
+
+    let currentY = startY + topMargin;
+
+    // 绘制3列5行
+    for (let row = 0; row < 5; row++) {
+        for (let col = 0; col < 3; col++) {
+            const problemIndex = row * 3 + col;
+            if (problemIndex >= problems.length) {
+                continue;
+            }
+
+            const problem = problems[problemIndex];
+            const boxX = leftMargin + col * (boxWidth + boxSpacing);
+            const boxY = currentY + row * rowSpacing;
+
+            // 绘制二叉树
+            drawTree(ctx, problem, boxX, boxY, boxWidth, boxHeight, isInverted);
+        }
+    }
+}
+
+/**
+ * 绘制有图片模式的单个题目
+ */
+async function drawWithImageProblem(
+    ctx: RenderingContext,
+    canvas: WechatMiniprogram.Canvas,
+    problem: {
+        whole: number | null;
+        part1: number | null;
+        part2: number | null;
+        imageIndex?: number;
+        imageType?: 'fruits' | 'twelve-animals';
+    },
+    boxX: number,
+    boxY: number,
+    boxWidth: number,
+    imageAreaHeight: number,
+    treeAreaHeight: number,
+) {
+    const borderRadius = 12;
+
+    // 绘制实线框（只绘制图片区域的框）
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 1;
+    drawRoundedRect(
+        ctx,
+        boxX,
+        boxY,
+        boxWidth,
+        imageAreaHeight,
+        borderRadius,
+        false,
+    );
+
+    // 图片区域（增加底部间距，避免与二叉树根节点重叠）
+    const imageBottomPadding = 20; // 图片区域底部额外间距
+    const effectiveImageHeight = imageAreaHeight - imageBottomPadding;
+
+    if (problem.imageIndex && problem.imageType && problem.whole) {
+        await drawImagesInBox(
+            ctx,
+            canvas,
+            problem.whole,
+            problem.imageIndex,
+            problem.imageType,
+            boxX,
+            boxY,
+            boxWidth,
+            effectiveImageHeight,
+        );
+    }
+
+    // 二叉树区域（增加与图片区域的间距）
+    const treeTopSpacing = -5; // 二叉树区域顶部间距
+    const treeY = boxY + imageAreaHeight + treeTopSpacing;
+    drawTree(
+        ctx,
+        problem,
+        boxX,
+        treeY,
+        boxWidth,
+        treeAreaHeight,
+        false, // 不是倒置
+    );
+}
+
+/**
+ * 绘制二叉树结构
+ * @param isInverted 是否倒置（组合模式为true）
+ */
+function drawTree(
+    ctx: RenderingContext,
+    problem: {
+        whole: number | null;
+        part1: number | null;
+        part2: number | null;
+    },
+    boxX: number,
+    boxY: number,
+    boxWidth: number,
+    boxHeight: number,
+    isInverted: boolean,
+) {
+    const nodeRadius = 18;
+    const nodeSpacing = 40; // 节点之间的水平间距
+    const verticalSpacing = 70; // 根节点和子节点的垂直间距
+
+    if (isInverted) {
+        // 组合模式：倒置二叉树
+        // 顶部：两个子节点（part1, part2）
+        // 底部：根节点（whole，需要填写）
+
+        const centerX = boxX + boxWidth / 2;
+        const topY = boxY + boxHeight / 2 - verticalSpacing / 2;
+        const bottomY = boxY + boxHeight / 2 + verticalSpacing / 2;
+
+        // 绘制两个子节点（顶部）
+        const leftNodeX = centerX - nodeSpacing / 2 - nodeRadius;
+        const rightNodeX = centerX + nodeSpacing / 2 + nodeRadius;
+
+        // 左子节点
+        drawNode(ctx, leftNodeX, topY, nodeRadius, problem.part1);
+        // 右子节点
+        drawNode(ctx, rightNodeX, topY, nodeRadius, problem.part2);
+
+        // 绘制根节点（底部）
+        drawNode(ctx, centerX, bottomY, nodeRadius, problem.whole);
+
+        // 绘制连接线（从子节点到根节点）
+        ctx.strokeStyle = '#333';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(leftNodeX, topY + nodeRadius);
+        ctx.lineTo(centerX, bottomY - nodeRadius);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(rightNodeX, topY + nodeRadius);
+        ctx.lineTo(centerX, bottomY - nodeRadius);
+        ctx.stroke();
+    } else {
+        // 分解模式：正常二叉树
+        // 顶部：根节点（whole）
+        // 底部：两个子节点（part1, part2，其中一个需要填写）
+
+        const centerX = boxX + boxWidth / 2;
+        const topY = boxY + boxHeight / 2 - verticalSpacing / 2;
+        const bottomY = boxY + boxHeight / 2 + verticalSpacing / 2;
+
+        // 绘制根节点（顶部）
+        drawNode(ctx, centerX, topY, nodeRadius, problem.whole);
+
+        // 绘制两个子节点（底部）
+        const leftNodeX = centerX - nodeSpacing / 2 - nodeRadius;
+        const rightNodeX = centerX + nodeSpacing / 2 + nodeRadius;
+
+        // 左子节点
+        drawNode(ctx, leftNodeX, bottomY, nodeRadius, problem.part1);
+        // 右子节点
+        drawNode(ctx, rightNodeX, bottomY, nodeRadius, problem.part2);
+
+        // 绘制连接线（从根节点到子节点）
+        ctx.strokeStyle = '#333';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(centerX, topY + nodeRadius);
+        ctx.lineTo(leftNodeX, bottomY - nodeRadius);
+        ctx.stroke();
+
+        ctx.beginPath();
+        ctx.moveTo(centerX, topY + nodeRadius);
+        ctx.lineTo(rightNodeX, bottomY - nodeRadius);
+        ctx.stroke();
+    }
+}
+
+/**
+ * 绘制节点（圆圈和数字）
+ */
+function drawNode(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    radius: number,
+    value: number | null,
+) {
+    // 绘制圆角正方形
+    const size = radius * 2; // 正方形边长
+    const cornerRadius = 8; // 圆角半径
+    const halfSize = size / 2;
+
+    ctx.fillStyle = '#fff';
+    ctx.strokeStyle = '#333';
+    ctx.lineWidth = 2;
+
+    // 绘制圆角矩形
+    ctx.beginPath();
+    ctx.moveTo(x - halfSize + cornerRadius, y - halfSize);
+    ctx.lineTo(x + halfSize - cornerRadius, y - halfSize);
+    ctx.quadraticCurveTo(
+        x + halfSize,
+        y - halfSize,
+        x + halfSize,
+        y - halfSize + cornerRadius,
+    );
+    ctx.lineTo(x + halfSize, y + halfSize - cornerRadius);
+    ctx.quadraticCurveTo(
+        x + halfSize,
+        y + halfSize,
+        x + halfSize - cornerRadius,
+        y + halfSize,
+    );
+    ctx.lineTo(x - halfSize + cornerRadius, y + halfSize);
+    ctx.quadraticCurveTo(
+        x - halfSize,
+        y + halfSize,
+        x - halfSize,
+        y + halfSize - cornerRadius,
+    );
+    ctx.lineTo(x - halfSize, y - halfSize + cornerRadius);
+    ctx.quadraticCurveTo(
+        x - halfSize,
+        y - halfSize,
+        x - halfSize + cornerRadius,
+        y - halfSize,
+    );
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+
+    // 如果有值，绘制数字
+    if (value !== null) {
+        ctx.fillStyle = getRandomNumberColor();
+        ctx.font = `bold ${24}px "Microsoft Yahei"`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(String(value), x, y);
+    }
+}
+
+/**
+ * 在框内绘制多张图片
+ */
+async function drawImagesInBox(
+    ctx: RenderingContext,
+    canvas: WechatMiniprogram.Canvas,
+    count: number,
+    imageIndex: number,
+    imageType: 'fruits' | 'twelve-animals',
+    boxX: number,
+    boxY: number,
+    boxWidth: number,
+    boxHeight: number,
+) {
+    // 图片配置
+    const imageConfig = {
+        'twelve-animals': {
+            folder: 'twelve-animals',
+            maxIndex: 12,
+        },
+        fruits: {
+            folder: 'fruits',
+            maxIndex: 22,
+        },
+    };
+
+    const config = imageConfig[imageType] || imageConfig['twelve-animals'];
+
+    const padding = 8;
+    const availableWidth = boxWidth - padding * 2;
+    const availableHeight = boxHeight - padding * 2;
+
+    // 根据数量确定每行的图片数和图片大小
+    let imagesPerRow: number;
+    let imageSize: number;
+
+    if (count <= 4) {
+        imagesPerRow = count <= 2 ? count : 2;
+        imageSize =
+            Math.min(availableWidth / imagesPerRow, availableHeight / 2) - 4;
+    } else if (count <= 6) {
+        imagesPerRow = 3;
+        imageSize = Math.min(availableWidth / 3, availableHeight / 2) - 4;
+    } else {
+        imagesPerRow = 3;
+        imageSize = Math.min(availableWidth / 3, availableHeight / 3) - 4;
+    }
+
+    const rows = Math.ceil(count / imagesPerRow);
+    const imageSpacing =
+        (availableWidth - imageSize * imagesPerRow) / (imagesPerRow + 1);
+    const rowSpacing =
+        rows > 1 ? (availableHeight - imageSize * rows) / (rows + 1) : 0;
+
+    // 加载图片
+    let boxImage: any = null;
+    try {
+        const imagePath = `/mathPages/assets/${config.folder}/${imageIndex}.png`;
+        boxImage = await getImage(canvas, imagePath);
+    } catch (error) {
+        console.error(`加载${config.folder}/${imageIndex}图片失败:`, error);
+        return;
+    }
+
+    // 绘制图片
+    for (let i = 0; i < count; i++) {
+        const row = Math.floor(i / imagesPerRow);
+        const col = i % imagesPerRow;
+
+        const imageX =
+            boxX + padding + imageSpacing + col * (imageSize + imageSpacing);
+        const imageY =
+            boxY +
+            padding +
+            (rows > 1 ? rowSpacing : (availableHeight - imageSize) / 2) +
+            row * (imageSize + (rows > 1 ? rowSpacing : 0));
+
+        if (boxImage) {
+            // 计算图片高度（等比例缩放）
+            // @ts-ignore - 微信小程序图片对象有 width 和 height 属性
+            const scaledHeight = (boxImage.height / boxImage.width) * imageSize;
+
+            ctx.drawImage(boxImage, imageX, imageY, imageSize, scaledHeight);
+        }
+    }
+}

miniprogram/mathPages/service/numberDecomposeDraw.ts

@@ -0,0 +1,67 @@
+import { BaseMathDrawService } from './baseMathDraw';
+import { drawNumberDecomposeContent } from './numberDecomposeContentDraw';
+
+/**
+ * 10以内数的分与合绘制服务
+ * 组合使用基础绘制服务和内容区域绘制服务
+ */
+class NumberDecomposeDraw extends BaseMathDrawService {
+    decomposeData: {
+        problems: Array<{
+            whole: number | null;
+            part1: number | null;
+            part2: number | null;
+            imageIndex?: number;
+            imageType?: 'fruits' | 'twelve-animals';
+        }>;
+        mode: 'with-image' | 'decompose' | 'compose';
+    } | null;
+
+    constructor(
+        canvas: Canvas,
+        ctx: RenderingContext,
+        options?: Record<string, any>,
+    ) {
+        super(canvas, ctx, options);
+        this.decomposeData = null;
+    }
+
+    async draw(decomposeData: {
+        problems: Array<{
+            whole: number | null;
+            part1: number | null;
+            part2: number | null;
+            imageIndex?: number;
+            imageType?: 'fruits' | 'twelve-animals';
+        }>;
+        mode: 'with-image' | 'decompose' | 'compose';
+    }) {
+        if (!decomposeData || !decomposeData.problems) {
+            return;
+        }
+
+        this.setPrintConfig();
+        this.decomposeData = decomposeData;
+        this.clear();
+        this.setPaper();
+
+        // 绘制Header
+        if (this.headerType !== 'minimal') {
+            await this.drawHeader();
+        } else {
+            this.drawMiniHeader();
+        }
+
+        // 绘制内容区域
+        this.drawDivider();
+        await drawNumberDecomposeContent({
+            canvas: this.canvas,
+            ctx: this.ctx,
+            decomposeData: this.decomposeData,
+            canvasWidth: this.canvasWidth,
+            startY: this.currentY,
+        });
+    }
+}
+
+export default NumberDecomposeDraw;

project.private.config.json

@@ -23,12 +23,19 @@
     "condition": {
         "miniprogram": {
             "list": [
+                {
+                    "name": "mathPages/numberDecompose/numberDecompose",
+                    "pathName": "mathPages/numberDecompose/numberDecompose",
+                    "query": "id=number-decompose&mode=with-image",
+                    "scene": null,
+                    "launchMode": "default"
+                },
                 {
                     "name": "mathPages/countingSelect/countingSelect",
                     "pathName": "mathPages/countingSelect/countingSelect",
                     "query": "id=counting-fill",
-                    "scene": null,
-                    "launchMode": "default"
+                    "launchMode": "default",
+                    "scene": null
                 },
                 {
                     "name": "mathPages/compare/compare",