feat: 完成图形涂色绘制

miniprogram/components/shape-picker/shape-picker.ts

@@ -10,9 +10,9 @@ Component({
             type: Boolean,
             value: false,
         },
-        singleMode: {
-            type: Boolean,
-            value: false,
+        selectedShapeIndex: {
+            type: Number,
+            value: -1,
         },
     },
     /**
@@ -20,6 +20,7 @@ Component({
      */
     data: {
         shapes: [] as (ShapeCard & { svgDataUrl: string })[],
+        singleMode: false,
         totalSelected: 0,
     },
     lifetimes: {
@@ -36,8 +37,26 @@ Component({
             this.setData({
                 shapes: shapesWithDataUrl
             });
+        }
+    },
+    observers: {
+        selectedShapeIndex(newVal: number) {
+            this.setData({
+                singleMode: newVal !== -1
+            });
         },
     },
+    // pageLifetimes: {
+    //     show: function () {
+    //         console.log('show singleMode', this.data.singleMode);
+    //     },
+    //     hide: function () {
+    //         console.log('hide singleMode', this.data.singleMode);
+    //     },
+    //     resize: function (size) {
+    //         console.log('resize', size);
+    //     }
+    // },
     /**
      * 组件的方法列表
      */
@@ -89,9 +108,14 @@ Component({
         },
 
         onChange() {
-            const { shapes } = this.data;
+            const { shapes, selectedShapeIndex, singleMode } = this.data;
             const selectedShapes = shapes.filter(item => item.checked);
-            this.triggerEvent('onChange', { shapes: selectedShapes, singleMode: this.data.singleMode });
+
+            this.triggerEvent('onChange', {
+                shapes: selectedShapes,
+                singleMode,
+                selectedShapeIndex
+            });
         },
     },
 });

miniprogram/components/shape-picker/shape-picker.wxml

@@ -3,9 +3,10 @@
     bind:close="onClose"
     custom-class="shape-picker-popup">
     <view class="shape-picker-container">
-        <text class="shape-picker-title"
-            >选择形状{{ singleMode ? '' : '（多选）' }}</text
-        >
+        <text class="shape-picker-title">
+            选择形状{{selectedShapeIndex}} {{ singleMode ? '（单选）' :
+            '（多选）' }}
+        </text>
         <view class="shape-options-wrapper">
             <view class="shape-options">
                 <view