feat:2.4.5 修改首页

miniprogram/mathPages/service/numberDecomposeContentDraw.ts

@@ -85,7 +85,7 @@ export async function drawNumberDecomposeContent({
 }
 
 /**
- * 有图片模式：一行两列，总共三行（6个题目）
+ * 有图片模式：一行三列，总共三行（9个题目）
  */
 async function drawWithImageMode(
     canvas: WechatMiniprogram.Canvas,
@@ -103,21 +103,21 @@ async function drawWithImageMode(
     const leftMargin = 30;
     const rightMargin = 30;
     const topMargin = 20;
-    const boxSpacing = 40;
-    const rowSpacing = 40;
+    const boxSpacing = 20;
+    const rowSpacing = 32;
 
     // 计算每个框的尺寸
     const availableWidth = canvasWidth - leftMargin - rightMargin;
-    const boxWidth = (availableWidth - boxSpacing) / 2; // 2列，1个间距
-    const imageAreaHeight = 116; // 图片区域高度
+    const boxWidth = (availableWidth - boxSpacing * 2) / 3; // 3列，2个间距
+    const imageAreaHeight = 120; // 图片区域高度
     const treeAreaHeight = 80; // 二叉树区域高度
 
     let currentY = startY + topMargin;
 
-    // 绘制2列3行
+    // 绘制3列3行
     for (let row = 0; row < 3; row++) {
-        for (let col = 0; col < 2; col++) {
-            const problemIndex = row * 2 + col;
+        for (let col = 0; col < 3; col++) {
+            const problemIndex = row * 3 + col;
             if (problemIndex >= problems.length) {
                 continue;
             }
@@ -437,9 +437,10 @@ async function drawImagesInBox(
 
     const config = imageConfig[imageType] || imageConfig['twelve-animals'];
 
-    const padding = 8;
-    const availableWidth = boxWidth - padding * 2;
-    const availableHeight = boxHeight - padding * 2;
+    const horizontalPadding = 5;
+    const verticalPadding = 10;
+    const availableWidth = boxWidth - horizontalPadding * 2;
+    const availableHeight = boxHeight - verticalPadding * 2;
 
     // 根据数量确定每行的图片数和图片大小
     let imagesPerRow: number;
@@ -479,11 +480,17 @@ async function drawImagesInBox(
         const col = i % imagesPerRow;
 
         const imageX =
-            boxX + padding + imageSpacing + col * (imageSize + imageSpacing);
+            boxX +
+            horizontalPadding +
+            imageSpacing +
+            col * (imageSize + imageSpacing);
         const imageY =
             boxY +
-            padding +
+            verticalPadding +
+            // 这两段代码是用于计算每一张图片在Y轴方向上的实际位置（imageY 变量）
+            // 第一行：如果有多于一行，行间用 rowSpacing，否则单行时图片整体垂直居中排列。
             (rows > 1 ? rowSpacing : (availableHeight - imageSize) / 2) +
+            // 第二行：加上具体第 row 行的纵向偏移（每张图片的高度加上行间距，再乘以行号）。
             row * (imageSize + (rows > 1 ? rowSpacing : 0));
 
         if (boxImage) {