feat:2.5.6 广告组件优化

miniprogram/focusPages/codeConnect/codeConnect.ts

@@ -0,0 +1,150 @@
+import CodeConnectDraw from '../shared/service/codeConnectDraw';
+import { createFocusPage } from '../shared/common/focusPageMixin';
+import { CodeConnectData } from '../shared/service/codeConnectDraw';
+import { WATER_COLORS } from '../../constants/colors';
+
+createFocusPage({
+    canvas: null as Canvas | null,
+    ctx: null as RenderingContext | null,
+    boxHeight: 0,
+    boxWidth: 0,
+    drawService: null as CodeConnectDraw | null,
+    codeData: null as CodeConnectData | null,
+
+    data: {
+        pageTitle: '译码连线',
+        functionId: '',
+        hasContent: false,
+        showShareDialog: false,
+    },
+
+    onLoad(options: { id?: string }) {
+        const functionId = options.id || 'code-connect';
+        this.setData({
+            functionId,
+        });
+        this.initPageInfo(functionId, '译码连线');
+    },
+
+    onReady() {
+        this.initCanvas({
+            createDrawService: (
+                canvas: Canvas,
+                ctx: RenderingContext,
+                options?: Record<string, any>,
+            ) => {
+                return new CodeConnectDraw(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.codeData) {
+            return;
+        }
+
+        try {
+            await this.drawService.draw(this.codeData);
+            this.setData({ hasContent: true });
+        } catch (error) {
+            console.error('绘制失败:', error);
+            this.setData({ hasContent: false });
+        }
+    },
+
+    /**
+     * 随机生成
+     */
+    onRandom() {
+        // 随机选择起始数字：1、2或3
+        const startNumberOptions = [1, 2, 3];
+        const startNumber =
+            startNumberOptions[
+                Math.floor(Math.random() * startNumberOptions.length)
+            ];
+
+        // 生成8个连续的数字（1-8、2-9或3-10）
+        const numbers: number[] = [];
+        for (let i = 0; i < 8; i++) {
+            numbers.push(startNumber + i);
+        }
+
+        // 从WATER_COLORS.extended24中随机选择8种不重复的颜色
+        const colorIndices = Array.from(
+            { length: WATER_COLORS.extended24.length },
+            (_, i) => i,
+        );
+        const shuffledIndices = [...colorIndices].sort(
+            () => Math.random() - 0.5,
+        );
+        const selectedIndices = shuffledIndices.slice(0, 8);
+
+        // 创建颜色映射
+        const colorMap = numbers.map((number, index) => ({
+            number,
+            color: WATER_COLORS.extended24[selectedIndices[index]].hex,
+        }));
+
+        // 生成4个组的题目
+        const groups: Array<{
+            sequence: number[];
+            dots: Array<{
+                number: number;
+                color: string;
+                angle: number;
+            }>;
+        }> = [];
+
+        for (let i = 0; i < 4; i++) {
+            // 从当前数字范围中随机选择6个数字（不重复）
+            const shuffledNumbers = [...numbers].sort(
+                () => Math.random() - 0.5,
+            );
+            const sequence = shuffledNumbers.slice(0, 5);
+
+            // 生成8个圆点的位置（圆形分布）
+            const dots: Array<{
+                number: number;
+                color: string;
+                angle: number;
+            }> = [];
+
+            // 8个圆点均匀分布在圆周上
+            for (let j = 0; j < 8; j++) {
+                const angle = (j / 8) * Math.PI * 2 - Math.PI / 2; // 从顶部开始，逆时针
+                const number = numbers[j];
+                const colorInfo = colorMap.find((m) => m.number === number);
+                dots.push({
+                    number,
+                    color: colorInfo?.color || '#000',
+                    angle,
+                });
+            }
+
+            groups.push({
+                sequence,
+                dots,
+            });
+        }
+
+        this.codeData = {
+            colorMap,
+            startNumber,
+            groups,
+        };
+
+        this.drawCanvas();
+    },
+});