feat: 完成图形涂色绘制

miniprogram/pages/shape/index.ts

@@ -14,7 +14,7 @@ Page({
     data: {
         shapeList: [] as ShapeCard[],
         showSelectShapePopup: false,
-        currentShapeId: '',
+        selectedShapeIndex: -1,
         showColorPopup: false,
         currentIndex: 0,
         currentColor: '',
@@ -94,75 +94,89 @@ Page({
     },
 
     openSelectShapePopup(e: any) {
-        const { key } = e.detail;
+        const { index } = e.detail;
         this.setData({
             showSelectShapePopup: true,
-            currentShapeId: key
+            selectedShapeIndex: index
         });
     },
 
     closeSelectShapePopup() {
         this.setData({
             showSelectShapePopup: false,
-            currentShapeId: ''
+            selectedShapeIndex: -1
         });
     },
 
     onChangeShape(e: any) {
-        const { shapes } = e.detail;
+        const { shapes, singleMode, selectedShapeIndex } = e.detail;
         const prevShapeList: ShapeCard[] = this.data.shapeList || [];
-        // 1. 保留已选图形的 fillColor，不变
-        // 2. 新增的图形分配未被占用的颜色，且不重复
 
-        // 获取所有可用颜色
-        const colorList = WATER_COLORS.basic12.map(item => item.hex);
+        let newShapeList: ShapeCard[] = [];
 
-        // 记录已被使用的颜色（只考虑当前 shapeList 中的 fillColor）
-        const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);
+        if (singleMode) {
+            // 单选模式，只替换 selectedShapeIndex 对应的 shape，其他 shape 保持不变和原有颜色
+            newShapeList = prevShapeList.map((item, idx) => {
+                if (idx === selectedShapeIndex) {
+                    // 替换为新选中的 shape，保留原有 fillColor
+                    return {
+                        ...shapes[0],
+                        fillColor: item.fillColor
+                    };
+                } else {
+                    // 其他 shape 不变
+                    return item;
+                }
+            });
+        } else {
+            // 多选模式，原有逻辑
+            // 获取所有可用颜色
+            const colorList = WATER_COLORS.basic12.map(item => item.hex);
 
-        // 新的 shapeList
-        const newShapeList: ShapeCard[] = [];
+            // 记录已被使用的颜色（只考虑当前 shapeList 中的 fillColor）
+            const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);
 
-        // 记录已分配的颜色，避免重复
-        const assignedColors = [...usedColors];
+            // 记录已分配的颜色，避免重复
+            const assignedColors = [...usedColors];
 
-        // 先将 shapes 转为 Map，方便查找
-        const prevShapeMap = new Map(prevShapeList.map(item => [item.id, item]));
+            // 先将 shapes 转为 Map，方便查找
+            const prevShapeMap = new Map(prevShapeList.map(item => [item.id, item]));
 
-        // 随机打乱剩余可用颜色
-        function shuffle(arr: string[]) {
-            for (let i = arr.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [arr[i], arr[j]] = [arr[j], arr[i]];
+            // 随机打乱剩余可用颜色
+            function shuffle(arr: string[]) {
+                for (let i = arr.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [arr[i], arr[j]] = [arr[j], arr[i]];
+                }
+                return arr;
             }
-            return arr;
+
+            // 计算未被占用的颜色
+            let availableColors = colorList.filter(color => !assignedColors.includes(color));
+            availableColors = shuffle(availableColors);
+
+            shapes.forEach((item: ShapeCard) => {
+                if (prevShapeMap.has(item.id)) {
+                    // 已存在，保留原有 fillColor
+                    newShapeList.push({
+                        ...item,
+                        fillColor: prevShapeMap.get(item.id)!.fillColor
+                    });
+                } else {
+                    // 新增，分配未被占用的颜色
+                    const color = availableColors.shift() || colorList[0];
+                    assignedColors.push(color);
+                    newShapeList.push({
+                        ...item,
+                        fillColor: color
+                    });
+                }
+            });
         }
 
-        // 计算未被占用的颜色
-        let availableColors = colorList.filter(color => !assignedColors.includes(color));
-        availableColors = shuffle(availableColors);
-
-        shapes.forEach((item: ShapeCard) => {
-            if (prevShapeMap.has(item.id)) {
-                // 已存在，保留原有 fillColor
-                newShapeList.push({
-                    ...item,
-                    fillColor: prevShapeMap.get(item.id)!.fillColor
-                });
-            } else {
-                // 新增，分配未被占用的颜色
-                const color = availableColors.shift() || colorList[0];
-                assignedColors.push(color);
-                newShapeList.push({
-                    ...item,
-                    fillColor: color
-                });
-            }
-        });
-
         this.setData({
             showSelectShapePopup: false,
-            currentShapeId: '',
+            selectedShapeIndex: -1,
             shapeList: newShapeList
         }, () => {
             // 绘制canvas
@@ -216,7 +230,6 @@ Page({
     },
     onColorTap(e: any) {
         const { index, fillColor } = e.detail;
-        console.log('shape Page onColorTap', index, fillColor);
         this.setData({
             showColorPopup: true,
             currentColor: fillColor,