feat:V2.5.3 修改下载分享弹窗问题、新增连连看

miniprogram/focusPages/matchConnect/matchConnect.ts

@@ -0,0 +1,97 @@
+import MatchConnectDraw from '../shared/service/matchConnectDraw';
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import { MatchConnectData } from '../shared/service/matchConnectDraw';
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as MatchConnectDraw | null,
+    matchData: null as MatchConnectData | null,
+
+    data: {
+        pageTitle: '连连看',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'match-connect';
+        this.setData({
+            functionId,
+        });
+        this.initPageInfo(functionId, '连连看');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new MatchConnectDraw(canvas, ctx, options);
+            },
+            drawServiceOptions: {
+                title: this.data.pageTitle,
+                subTitle: '快来根据物品连一连吧!',
+                functionId: this.data.functionId,
+            },
+            onCanvasReady: () => {
+                // 初始随机生成
+                this.onRandom();
+            },
+        });
+    },
+
+    /**
+     * 绘制Canvas内容
+     */
+    async drawCanvas() {
+        if (!this.ctx || !this.drawService || !this.matchData) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw(this.matchData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        // 从33张图片中随机选择5张不重复的图片
+        const allImageIndices = Array.from({ length: 33 }, (_, i) => i + 1);
+        const shuffled = [...allImageIndices].sort(() => Math.random() - 0.5);
+        const selectedImages = shuffled.slice(0, 5);
+
+        // 创建参考序列（顺序）
+        const referenceSequence = [...selectedImages];
+
+        // 创建6个框，每个框包含5张图片的索引（位置由绘制服务随机生成）
+        const boxes: Array<{
+            imageIndices: number[];
+        }> = [];
+
+        for (let boxIndex = 0; boxIndex < 6; boxIndex++) {
+            // 每个框使用相同的5张图片
+            boxes.push({
+                imageIndices: [...selectedImages],
+            });
+        }
+
+        this.matchData = {
+            referenceSequence,
+            boxes,
+        };
+
+        this.drawCanvas();
+    },
+});