feat:2.5.0初始化专注启蒙项目

miniprogram/focusPages/gridDrawing/gridDrawing.ts

@@ -7,6 +7,7 @@ import { ALL_5X5_SHAPES } from '../shared/shapes/gridShapes5x5';
 import { ALL_7X7_SHAPES } from '../shared/shapes/gridShapes7x7';
 import { ShapeTemplate, GridCell } from '../shared/types/gridTypes';
 import { GridConfig } from '../shared/types/gridTypes';
+import { FOCUS_FUNCTION_TYPES } from '../../constants/focusFunctions';
 
 createFocusPage({
     canvas: null as Canvas | null,
@@ -17,12 +18,13 @@ createFocusPage({
     gridData: null as GridDrawingData | null,
 
     data: {
-        pageTitle: '格子仿画',
+        pageTitle: '格子仿画 5×5',
         functionId: '',
         hasContent: false,
         showShareDialog: false,
         currentMode: '3x3', // '3x3', '5x5', '7x7'
         currentModeName: '3×3',
+        subTitle: '', // 副标题，从配置中获取
         typeActions: [
             { name: '3×3', value: '3x3' },
             { name: '5×5', value: '5x5' },
@@ -30,10 +32,30 @@ createFocusPage({
         ],
     },
 
-    onLoad(options: { id?: string }) {
+    onLoad(options: { id?: string; mode?: string }) {
         const functionId = options.id || 'grid-drawing';
+        const mode = options.mode || '3x3'; // 从参数中读取 mode，默认为 '3x3'
+
+        // 根据 mode 设置对应的模式名称
+        const modeNameMap: Record<string, string> = {
+            '3x3': '3×3',
+            '5x5': '5×5',
+            '7x7': '7×7',
+        };
+        const currentModeName = modeNameMap[mode] || '3×3';
+
+        // 根据 mode 查找配置，获取 desc 作为 subTitle
+        const configItem = FOCUS_FUNCTION_TYPES.find(
+            (item) => item.mode === mode && item.id?.startsWith('grid-drawing'),
+        );
+        const subTitle = configItem?.desc || '在网格中填充颜色，形成各种形状';
+
         this.setData({
+            pageTitle: `格子仿画 ${mode}`,
             functionId,
+            currentMode: mode,
+            currentModeName,
+            subTitle,
         });
         this.initPageInfo(functionId, '格子仿画');
     },
@@ -48,7 +70,9 @@ createFocusPage({
                 return new GridDraw(canvas, ctx, options);
             },
             drawServiceOptions: {
-                subTitle: '在网格中填充颜色，形成各种形状',
+                title: this.data.pageTitle,
+                subTitle:
+                    this.data.subTitle || '在网格中填充颜色，形成各种形状',
                 functionId: this.data.functionId,
             },
             onCanvasReady: () => {
@@ -67,11 +91,6 @@ createFocusPage({
         }
 
         try {
-            // 更新 Header 的 Title
-            if (this.drawService) {
-                this.drawService.options.title = this.data.currentModeName;
-            }
-
             await this.drawService.draw(this.gridData);
             this.setData({ hasContent: true });
         } catch (error) {
@@ -129,7 +148,7 @@ createFocusPage({
         for (let i = 0; i < count; i++) {
             const shapeIndex = i % availableShapes.length;
             const shape = availableShapes[shapeIndex];
-            const cells = generateCompletePattern(shape);
+            const cells = generateCompletePattern(shape, config);
 
             // 生成图案签名
             const patternSignature = cells
@@ -152,7 +171,10 @@ createFocusPage({
                     let found = false;
                     for (let j = 0; j < availableShapes.length; j++) {
                         const nextShape = availableShapes[j];
-                        const nextCells = generateCompletePattern(nextShape);
+                        const nextCells = generateCompletePattern(
+                            nextShape,
+                            config,
+                        );
                         const nextSignature = nextCells
                             .map((c) => `${c.x},${c.y},${c.color}`)
                             .sort()
@@ -205,12 +227,12 @@ createFocusPage({
             allShapes = ALL_3X3_SHAPES;
             config = { rows: 3, cols: 3 };
             groupsPerRow = 2; // 每行2组
-            totalRows = 3; // 总共3行
+            totalRows = 4; // 总共3行
         } else if (mode === '5x5') {
             allShapes = ALL_5X5_SHAPES;
             config = { rows: 5, cols: 5 };
             groupsPerRow = 2;
-            totalRows = 2; // 5x5可以展示2行
+            totalRows = 4; // 5x5可以展示2行
         } else {
             // 7x7
             allShapes = ALL_7X7_SHAPES;
@@ -240,10 +262,30 @@ createFocusPage({
     /** 选择类型 */
     onSelectType(event: any) {
         const { name, value } = event.detail;
+
+        // 根据 mode 查找配置，获取 desc 作为 subTitle
+        const configItem = FOCUS_FUNCTION_TYPES.find(
+            (item) =>
+                item.mode === value && item.id?.startsWith('grid-drawing'),
+        );
+
+        const pageTitle = `格子仿画 ${value}`;
+        const subTitle = configItem?.desc || '在网格中填充颜色，形成各种形状';
+
+        // 更新 pageTitle、currentMode、currentModeName 和 subTitle
         this.setData({
+            pageTitle,
             currentMode: value,
             currentModeName: name,
+            subTitle,
         });
+
+        // 更新绘制服务的 title 和 subTitle
+        if (this.drawService) {
+            this.drawService.options.title = pageTitle;
+            this.drawService.options.subTitle = subTitle;
+        }
+
         // 重新生成数据
         this.onRandom();
     },