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

miniprogram/focusPages/shared/service/gridDraw.ts

@@ -84,29 +84,54 @@ class GridDraw extends BaseDrawService {
         canvasWidth: number;
         startY: number;
     }): Promise<void> {
-        const { ctx, gridData, canvasWidth, startY } = params;
+        const { ctx, gridData, canvasWidth } = params;
+        let { startY } = params;
         const { config, groups, groupsPerRow, totalRows } = gridData;
         const { rows, cols } = config;
 
+        startY = startY + 30;
+
         // 计算网格尺寸
         const margin = 40; // 左右边距
-        const groupSpacing = 20; // 组之间的间距
-        const rowSpacing = 30; // 行之间的间距
-        const dividerWidth = 2; // 分割线宽度
+        const gridSpacing = 20; // 填充网格和空网格之间的间距
+        const groupSpacing = 40; // 两组之间的间距（一行中两组格子仿画中间）
+        const rowSpacing = 50; // 行之间的间距
+        const dividerWidth = 1; // 分割线宽度
 
         // 计算每组网格的尺寸
         const availableWidth = canvasWidth - margin * 2;
-        const totalGroupsPerRow = groupsPerRow * 2; // 每组包含填充和空两个网格
-        const groupWidth =
+        const totalGridsPerRow = groupsPerRow * 2; // 每组包含填充和空两个网格
+        const gridWidth =
             (availableWidth -
-                (groupsPerRow - 1) * dividerWidth -
-                (totalGroupsPerRow - 1) * groupSpacing) /
-            totalGroupsPerRow;
-        const cellSize = Math.floor(groupWidth / cols);
-        const gridWidth = cellSize * cols;
+                (groupsPerRow - 1) * groupSpacing -
+                (totalGridsPerRow - 1) * gridSpacing) /
+            totalGridsPerRow;
+        const cellSize = Math.floor(gridWidth / cols);
+        const actualGridWidth = cellSize * cols;
         const gridHeight = cellSize * rows;
 
-        let currentY = startY + 30; // 顶部间距
+        const firstRowStartY = startY + 30; // 顶部间距
+        const lastRowEndY =
+            firstRowStartY +
+            totalRows * gridHeight +
+            (totalRows - 1) * rowSpacing;
+
+        // 计算第一行的起始X位置（居中）
+        const rowTotalWidth =
+            totalGridsPerRow * actualGridWidth +
+            (totalGridsPerRow - 1) * gridSpacing +
+            (groupsPerRow - 1) * groupSpacing;
+        const rowStartX = margin + (availableWidth - rowTotalWidth) / 2;
+
+        // 计算中间垂直分割线的X位置（两组之间的位置）
+        const middleDividerX =
+            groupsPerRow > 1
+                ? rowStartX +
+                  actualGridWidth +
+                  gridSpacing +
+                  actualGridWidth +
+                  groupSpacing / 2
+                : null;
 
         // 遍历每一行
         for (let rowIndex = 0; rowIndex < totalRows; rowIndex++) {
@@ -116,13 +141,8 @@ class GridDraw extends BaseDrawService {
                 rowStartIndex + groupsPerRow,
             );
 
-            // 计算当前行的起始X位置（居中）
-            const rowTotalWidth =
-                totalGroupsPerRow * gridWidth +
-                (totalGroupsPerRow - 1) * groupSpacing +
-                (groupsPerRow - 1) * dividerWidth;
-            const rowStartX = margin + (availableWidth - rowTotalWidth) / 2;
-
+            const currentY =
+                firstRowStartY + rowIndex * (gridHeight + rowSpacing);
             let currentX = rowStartX;
 
             // 遍历当前行的每一组
@@ -138,7 +158,7 @@ class GridDraw extends BaseDrawService {
                     ctx,
                     gridStartX: currentX,
                     gridStartY: currentY,
-                    gridWidth,
+                    gridWidth: actualGridWidth,
                     gridHeight,
                     cellSize,
                     rows,
@@ -147,14 +167,14 @@ class GridDraw extends BaseDrawService {
                     config,
                 });
 
-                currentX += gridWidth + groupSpacing;
+                currentX += actualGridWidth + gridSpacing;
 
                 // 绘制空的网格（右侧）
                 this.drawSingleGrid({
                     ctx,
                     gridStartX: currentX,
                     gridStartY: currentY,
-                    gridWidth,
+                    gridWidth: actualGridWidth,
                     gridHeight,
                     cellSize,
                     rows,
@@ -163,32 +183,39 @@ class GridDraw extends BaseDrawService {
                     config,
                 });
 
-                currentX += gridWidth;
+                currentX += actualGridWidth;
 
-                // 如果不是最后一组，绘制垂直分割线
+                // 如果不是最后一组，添加组间距
                 if (groupIndex < rowGroups.length - 1) {
-                    ctx.strokeStyle = '#000000';
-                    ctx.lineWidth = dividerWidth;
-                    ctx.beginPath();
-                    ctx.moveTo(currentX, currentY);
-                    ctx.lineTo(currentX, currentY + gridHeight);
-                    ctx.stroke();
-                    currentX += dividerWidth;
+                    currentX += groupSpacing;
                 }
             }
 
-            currentY += gridHeight + rowSpacing;
-
             // 如果不是最后一行，绘制水平分割线
             if (rowIndex < totalRows - 1) {
-                ctx.strokeStyle = '#000000';
+                const lineY = currentY + gridHeight + rowSpacing / 2;
+                ctx.strokeStyle = '#999';
                 ctx.lineWidth = dividerWidth;
+                ctx.setLineDash([4, 4]); // 虚线
                 ctx.beginPath();
-                ctx.moveTo(margin, currentY - rowSpacing / 2);
-                ctx.lineTo(canvasWidth - margin, currentY - rowSpacing / 2);
+                ctx.moveTo(margin, lineY);
+                ctx.lineTo(canvasWidth - margin, lineY);
                 ctx.stroke();
+                ctx.setLineDash([]); // 重置为实线
             }
         }
+
+        // 绘制中间垂直分割线（贯穿所有行）
+        if (middleDividerX !== null && groupsPerRow > 1) {
+            ctx.strokeStyle = '#999';
+            ctx.lineWidth = dividerWidth;
+            ctx.setLineDash([4, 4]); // 虚线
+            ctx.beginPath();
+            ctx.moveTo(middleDividerX, firstRowStartY);
+            ctx.lineTo(middleDividerX, lastRowEndY);
+            ctx.stroke();
+            ctx.setLineDash([]); // 重置为实线
+        }
     }
 
     /**
@@ -220,7 +247,7 @@ class GridDraw extends BaseDrawService {
         } = params;
 
         // 绘制网格线
-        ctx.strokeStyle = config.gridLineColor || '#000000';
+        ctx.strokeStyle = config.gridLineColor || '#999';
         ctx.lineWidth = config.gridLineWidth || 1;
         ctx.setLineDash([]); // 实线