feat:添加埋点，createPage 重构

miniprogram/mathPages/countMatch/countMatch.ts

@@ -1,279 +1,200 @@
-import { PAPER_SIZE } from '../../constants/colors';
-import { checkAndSaveImage } from '../../utils/saveImage';
-import { shouldShowShareGuide } from '../../utils/shareGuide';
 import CountMatchDraw from '../service/countMatchDraw';
 import NumberColorDraw from '../service/numberColorDraw';
-import {
-    MATH_FUNCTION_TYPES,
-    MathFunctionType,
-} from '../../constants/mathFunctions';
+import { applyMathPageMixin, CanvasDataState } from '../common/mathPageMixin';
 
-Page({
-    canvas: null as Canvas | null,
-    ctx: null as RenderingContext | null,
-    boxHeight: 0,
-    boxWidth: 0,
-    drawService: null as CountMatchDraw | NumberColorDraw | null,
-    matchData: null as {
-        leftNumbers: number[];
-        rightNumbers: number[];
-    } | null,
-    colorData: null as {
-        numbers: number[];
-    } | null,
+Page(
+    applyMathPageMixin(
+        {
+            canvas: null as Canvas | null,
+            ctx: null as RenderingContext | null,
+            boxHeight: 0,
+            boxWidth: 0,
+            drawService: null as CountMatchDraw | NumberColorDraw | null,
+            matchData: null as {
+                leftNumbers: number[];
+                rightNumbers: number[];
+            } | null,
+            colorData: null as {
+                numbers: number[];
+            } | null,
 
-    data: {
-        pageTitle: '数一数，连一连',
-        functionId: '',
-        hasContent: false,
-        showShareDialog: false,
-        showTypeSelector: true, // 控制是否显示类型选择器
-        currentType: 'twelve-animals', // 'twelve-animals' 或 'fruits' 或 'circle' 或 'caterpillar'
-        currentTypeName: '十二生肖',
-        typeActions: [
-            { name: '十二生肖', value: 'twelve-animals' },
-            { name: '水果', value: 'fruits' },
-        ],
-    },
-
-    onLoad(options: { id?: string }) {
-        const functionId = options.id || 'counting-matching';
-        this.setData({ functionId });
-
-        const functionItem = MATH_FUNCTION_TYPES.find(
-            (item: MathFunctionType) => item.id === functionId,
-        );
-
-        const pageTitle = functionItem?.title || '数一数，连一连';
-        this.setData({ pageTitle });
-        wx.setNavigationBarTitle({ title: pageTitle });
-
-        // 根据 functionId 设置不同的类型选择器
-        if (functionId === 'number-coloring') {
-            this.setData({
-                currentType: 'caterpillar',
-                currentTypeName: '毛毛虫',
+            data: {
+                pageTitle: '数一数，连一连',
+                functionId: '',
+                hasContent: false,
+                showShareDialog: false,
+                showTypeSelector: true, // 控制是否显示类型选择器
+                currentType: 'twelve-animals', // 'twelve-animals' 或 'fruits' 或 'circle' 或 'caterpillar'
+                currentTypeName: '十二生肖',
                 typeActions: [
-                    { name: '毛毛虫', value: 'caterpillar' },
-                    { name: '圆圈', value: 'circle' },
+                    { name: '十二生肖', value: 'twelve-animals' },
+                    { name: '水果', value: 'fruits' },
                 ],
-            });
-        }
-    },
+            } as CanvasDataState & {
+                showTypeSelector: boolean;
+                currentType: string;
+                currentTypeName: string;
+                typeActions: Array<{ name: string; value: string }>;
+            },
 
-    onReady() {
-        this.initCanvas();
-    },
+            onLoad(options: { id?: string }) {
+                const functionId = options.id || 'counting-matching';
+                this.setData({ functionId });
 
-    /**
-     * 初始化Canvas
-     */
-    initCanvas() {
-        const query = wx.createSelectorQuery();
-        query
-            .select('#canvasWrapper')
-            .boundingClientRect((rect) => {
-                if (rect) {
-                    const { width, height } = PAPER_SIZE['A4'];
-                    const boxWidth = rect.width;
-                    const boxHeight = boxWidth / (width / height);
+                const functionItem =
+                    require('../../constants/mathFunctions').MATH_FUNCTION_TYPES.find(
+                        (item: any) => item.id === functionId,
+                    );
 
-                    this.boxHeight = boxHeight;
-                    this.boxWidth = boxWidth;
+                const pageTitle = functionItem?.title || '数一数，连一连';
+                this.setData({ pageTitle });
+                this.initPageInfo(functionId, pageTitle);
 
-                    this.setData({ boxWidth, boxHeight });
-
-                    const canvas = wx
-                        .createSelectorQuery()
-                        .select('#canvasContent');
-                    canvas.fields({ node: true, size: true }).exec((res) => {
-                        if (res[0]) {
-                            const canvasNode = res[0].node;
-                            const ctx = canvasNode.getContext('2d');
-                            const dpr = wx.getSystemInfoSync().pixelRatio;
-
-                            canvasNode.width = boxWidth * dpr;
-                            canvasNode.height = boxHeight * dpr;
-                            ctx.scale(dpr, dpr);
-
-                            this.canvas = canvasNode;
-                            this.ctx = ctx;
-
-                            // 根据 functionId 创建不同的绘制服务
-                            if (this.data.functionId === 'number-coloring') {
-                                this.drawService = new NumberColorDraw(
-                                    canvasNode,
-                                    ctx,
-                                    {
-                                        title: this.data.pageTitle,
-                                        subTitle: '按数字给相应的圆圈涂上颜色',
-                                    },
-                                );
-                            } else {
-                                this.drawService = new CountMatchDraw(
-                                    canvasNode,
-                                    ctx,
-                                    {
-                                        title: this.data.pageTitle,
-                                        subTitle:
-                                            '通过连线配对数字和对应的数量图形',
-                                    },
-                                );
-                            }
-
-                            // 初始随机生成
-                            this.onRandom();
-                        }
+                // 根据 functionId 设置不同的类型选择器
+                if (functionId === 'number-coloring') {
+                    this.setData({
+                        currentType: 'caterpillar',
+                        currentTypeName: '毛毛虫',
+                        typeActions: [
+                            { name: '毛毛虫', value: 'caterpillar' },
+                            { name: '圆圈', value: 'circle' },
+                        ],
                     });
                 }
-            })
-            .exec();
-    },
+            },
 
-    /**
-     * 绘制Canvas内容
-     */
-    async drawCanvas() {
-        if (!this.ctx || !this.drawService) {
-            return;
-        }
+            onReady() {
+                this.initCanvas({
+                    createDrawService: (
+                        canvas: Canvas,
+                        ctx: RenderingContext,
+                        options?: Record<string, any>,
+                    ) => {
+                        // 根据 functionId 创建不同的绘制服务
+                        if (this.data.functionId === 'number-coloring') {
+                            return new NumberColorDraw(canvas, ctx, options);
+                        } else {
+                            return new CountMatchDraw(canvas, ctx, options);
+                        }
+                    },
+                    drawServiceOptions: {
+                        subTitle:
+                            this.data.functionId === 'number-coloring'
+                                ? '按数字给相应的圆圈涂上颜色'
+                                : '通过连线配对数字和对应的数量图形',
+                    },
+                    onCanvasReady: () => {
+                        // 初始随机生成
+                        this.onRandom();
+                    },
+                });
+            },
 
-        try {
-            if (this.data.functionId === 'number-coloring') {
-                if (!this.colorData) {
+            /**
+             * 绘制Canvas内容
+             */
+            async drawCanvas() {
+                if (!this.ctx || !this.drawService) {
                     return;
                 }
-                await (this.drawService as NumberColorDraw).draw(
-                    this.colorData,
-                    this.data.currentType,
-                );
-            } else {
-                if (!this.matchData) {
-                    return;
+
+                try {
+                    if (this.data.functionId === 'number-coloring') {
+                        if (!this.colorData) {
+                            return;
+                        }
+                        await (this.drawService as NumberColorDraw).draw(
+                            this.colorData,
+                            this.data.currentType,
+                        );
+                    } else {
+                        if (!this.matchData) {
+                            return;
+                        }
+                        await (this.drawService as CountMatchDraw).draw(
+                            this.matchData,
+                            this.data.currentType,
+                        );
+                    }
+                    this.setData({ hasContent: true });
+                } catch (error) {
+                    console.error('绘制失败:', error);
+                    this.setData({ hasContent: false });
                 }
-                await (this.drawService as CountMatchDraw).draw(
-                    this.matchData,
-                    this.data.currentType,
-                );
-            }
-            this.setData({ hasContent: true });
-        } catch (error) {
-            console.error('绘制失败:', error);
-            this.setData({ hasContent: false });
-        }
-    },
+            },
 
-    /**
-     * 随机生成
-     */
-    onRandom() {
-        if (this.data.functionId === 'number-coloring') {
-            // 按数字涂颜色模式：生成6个随机数字（1-10）
-            const availableNumbers = Array.from(
-                { length: 10 },
-                (_, i) => i + 1,
-            );
-            const numbers: number[] = [];
+            /**
+             * 随机生成
+             */
+            onRandom() {
+                if (this.data.functionId === 'number-coloring') {
+                    // 按数字涂颜色模式：生成6个随机数字（1-10）
+                    const availableNumbers = Array.from(
+                        { length: 10 },
+                        (_, i) => i + 1,
+                    );
+                    const numbers: number[] = [];
 
-            for (let i = 0; i < 6; i++) {
-                const randomIndex = Math.floor(
-                    Math.random() * availableNumbers.length,
-                );
-                const number = availableNumbers.splice(randomIndex, 1)[0];
-                numbers.push(number);
-            }
+                    for (let i = 0; i < 6; i++) {
+                        const randomIndex = Math.floor(
+                            Math.random() * availableNumbers.length,
+                        );
+                        const number = availableNumbers.splice(
+                            randomIndex,
+                            1,
+                        )[0];
+                        numbers.push(number);
+                    }
 
-            this.colorData = { numbers };
-        } else {
-            // 数一数连一连模式：生成5个不同的数字（1-10）
-            const availableNumbers = Array.from(
-                { length: 10 },
-                (_, i) => i + 1,
-            );
-            const leftNumbers: number[] = [];
+                    this.colorData = { numbers };
+                } else {
+                    // 数一数连一连模式：生成5个不同的数字（1-10）
+                    const availableNumbers = Array.from(
+                        { length: 10 },
+                        (_, i) => i + 1,
+                    );
+                    const leftNumbers: number[] = [];
 
-            for (let i = 0; i < 5; i++) {
-                const randomIndex = Math.floor(
-                    Math.random() * availableNumbers.length,
-                );
-                const number = availableNumbers.splice(randomIndex, 1)[0];
-                leftNumbers.push(number);
-            }
+                    for (let i = 0; i < 5; i++) {
+                        const randomIndex = Math.floor(
+                            Math.random() * availableNumbers.length,
+                        );
+                        const number = availableNumbers.splice(
+                            randomIndex,
+                            1,
+                        )[0];
+                        leftNumbers.push(number);
+                    }
 
-            // 复制数字数组并打乱顺序，作为右侧显示的数字
-            const rightNumbers = [...leftNumbers];
-            for (let i = rightNumbers.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [rightNumbers[i], rightNumbers[j]] = [
-                    rightNumbers[j],
-                    rightNumbers[i],
-                ];
-            }
+                    // 复制数字数组并打乱顺序，作为右侧显示的数字
+                    const rightNumbers = [...leftNumbers];
+                    for (let i = rightNumbers.length - 1; i > 0; i--) {
+                        const j = Math.floor(Math.random() * (i + 1));
+                        [rightNumbers[i], rightNumbers[j]] = [
+                            rightNumbers[j],
+                            rightNumbers[i],
+                        ];
+                    }
 
-            this.matchData = { leftNumbers, rightNumbers };
-        }
+                    this.matchData = { leftNumbers, rightNumbers };
+                }
 
-        this.drawCanvas();
-    },
+                this.drawCanvas();
+            },
 
-    /**
-     * 导出打印
-     */
-    exportToPrint() {
-        if (!this.canvas || !this.data.hasContent) {
-            return;
-        }
-
-        if (shouldShowShareGuide()) {
-            this.setData({ showShareDialog: true });
-            return;
-        }
-
-        checkAndSaveImage(this.canvas);
-    },
-
-    /**
-     * 分享小程序
-     */
-    onShareAppMessage() {
-        return {
-            title: '涂鸦丫-数学学习涂鸦卡',
-            path: `/mathPages/countMatch/countMatch?id=${this.data.functionId}`,
-            imageUrl:
-                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
-        };
-    },
-
-    onShareTimeline() {
-        return {
-            title: '涂鸦丫-数学学习涂鸦卡',
-            query: `id=${this.data.functionId}`,
-            imageUrl:
-                'https://cdn.joeyone.cn/doodle/share-img/index-share-v2.png',
-        };
-    },
-
-    /** 关闭分享引导弹窗 */
-    onCloseShareDialog() {
-        this.setData({ showShareDialog: false });
-    },
-
-    /** 分享成功回调 */
-    onShareSuccess() {
-        this.setData({ showShareDialog: false });
-        if (this.canvas) {
-            checkAndSaveImage(this.canvas);
-        }
-    },
-
-    /** 选择类型 */
-    onSelectType(event: any) {
-        const { name, value } = event.detail;
-        this.setData({
-            currentType: value,
-            currentTypeName: name,
-        });
-        // 重新生成数据
-        this.onRandom();
-    },
-});
+            /** 选择类型 */
+            onSelectType(event: any) {
+                const { name, value } = event.detail;
+                this.setData({
+                    currentType: value,
+                    currentTypeName: name,
+                });
+                // 重新生成数据
+                this.onRandom();
+            },
+        },
+        {
+            pagePath: 'countMatch/countMatch',
+        },
+    ),
+);