feat:形状

miniprogram/components/shape-card-v1/shape-card copy.less

@@ -1,57 +0,0 @@
-.shape-card {
-    position: relative;
-    width: 300rpx;
-    height: 300rpx;
-    border-radius: 16rpx;
-    // background: #f5f5f5;
-    background: #ffffff;
-    border: 1rpx solid rgba(242, 242, 242, 1);
-    box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
-
-    .shape-card-img-wrapper {
-        padding: 16rpx;
-        width: 100%;
-        height: 200rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-
-        .shape-card-img {
-            width: 180rpx;
-            height: 180rpx;
-        }
-    }
-
-    .shape-card-footer {
-        margin-inline: 32rpx;
-        padding-block: 16rpx;
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        border-top: 1rpx solid #CCCCCC;
-
-        .shape-card-footer-color {
-            width: 60rpx;
-            height: 60rpx;
-            border-radius: 50%;
-            border: 2rpx solid #141414;
-            margin-right: 34rpx;
-        }
-
-        .shape-card-footer-name {
-            font-size: 28rpx;
-            color: #141414;
-        }
-    }
-
-    .delete-icon {
-        position: absolute;
-        top: -18rpx;
-        right: -18rpx;
-
-        .delete-icon-inner {
-            color: rgba(255, 0, 0, 0.7);
-        }
-    }
-}

miniprogram/components/shape-card-v1/shape-card.json

@@ -1,7 +0,0 @@
-{
-    "component": true,
-    "styleIsolation": "apply-shared",
-    "usingComponents": {
-        "van-icon": "@vant/weapp/icon/index"
-    }
-}

miniprogram/components/shape-card-v1/shape-card.less

@@ -1,58 +0,0 @@
-.shape-card {
-    position: relative;
-    width: 240rpx;
-    height: 240rpx;
-    border-radius: 16rpx;
-    // background: #f5f5f5;
-    background: #ffffff;
-    border: 1rpx solid rgba(242, 242, 242, 1);
-    box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
-
-    .shape-card-img-wrapper {
-        padding: 16rpx;
-        width: 100%;
-        height: 120rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-
-        .shape-card-img {
-            width: 120rpx;
-            height: 120rpx;
-            color: skyblue;
-        }
-    }
-
-    .shape-card-footer {
-        margin-inline: 32rpx;
-        padding-block: 16rpx;
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        border-top: 1rpx solid #CCCCCC;
-
-        .shape-card-footer-color {
-            width: 60rpx;
-            height: 60rpx;
-            border-radius: 50%;
-            border: 2rpx solid #141414;
-            margin-right: 34rpx;
-        }
-
-        .shape-card-footer-name {
-            font-size: 28rpx;
-            color: #141414;
-        }
-    }
-
-    .delete-icon {
-        position: absolute;
-        top: -18rpx;
-        right: -18rpx;
-
-        .delete-icon-inner {
-            color: rgba(255, 0, 0, 0.7);
-        }
-    }
-}

miniprogram/components/shape-card-v1/shape-card.ts

@@ -1,36 +0,0 @@
-Component({
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-        key: {
-            type: Number,
-            value: 0,
-        },
-        img: {
-            type: String,
-            value: '',
-        },
-        name: {
-            type: String,
-            value: '',
-        },
-        color: {
-            type: String,
-            value: '',
-        },
-    },
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-        onDelete() {
-            const { key } = this.data;
-            this.triggerEvent('onDelete', { key });
-        },
-        onColorTap() {
-            const { key, color } = this.data;
-            this.triggerEvent('onColorTap', { key, color });
-        },
-    },
-});

miniprogram/components/shape-card-v1/shape-card.wxml

@@ -1,19 +0,0 @@
-<view class="shape-card">
-    <view class="shape-card-img-wrapper">
-        <image src="{{ img }}" class="shape-card-img" />
-    </view>
-    <view class="shape-card-footer">
-        <view
-            class="shape-card-footer-color"
-            style="background-color: {{ color }}"
-            bind:tap="onColorTap"></view>
-        <view class="shape-card-footer-name">{{ name }}</view>
-    </view>
-    <view class="delete-icon" bindtap="onDelete">
-        <van-icon
-            class-prefix="toy-icon"
-            name="error-o"
-            custom-class="delete-icon-inner"
-            size="48rpx" />
-    </view>
-</view>

miniprogram/components/shape-card/shape-card copy.less

@@ -1,57 +0,0 @@
-.shape-card {
-    position: relative;
-    width: 300rpx;
-    height: 300rpx;
-    border-radius: 16rpx;
-    // background: #f5f5f5;
-    background: #ffffff;
-    border: 1rpx solid rgba(242, 242, 242, 1);
-    box-shadow: 0rpx 16rpx 24rpx rgba(184, 210, 188, 0.2);
-
-    .shape-card-img-wrapper {
-        padding: 16rpx;
-        width: 100%;
-        height: 200rpx;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        box-sizing: border-box;
-
-        .shape-card-img {
-            width: 180rpx;
-            height: 180rpx;
-        }
-    }
-
-    .shape-card-footer {
-        margin-inline: 32rpx;
-        padding-block: 16rpx;
-        display: flex;
-        justify-content: start;
-        align-items: center;
-        border-top: 1rpx solid #CCCCCC;
-
-        .shape-card-footer-color {
-            width: 60rpx;
-            height: 60rpx;
-            border-radius: 50%;
-            border: 2rpx solid #141414;
-            margin-right: 34rpx;
-        }
-
-        .shape-card-footer-name {
-            font-size: 28rpx;
-            color: #141414;
-        }
-    }
-
-    .delete-icon {
-        position: absolute;
-        top: -18rpx;
-        right: -18rpx;
-
-        .delete-icon-inner {
-            color: rgba(255, 0, 0, 0.7);
-        }
-    }
-}

miniprogram/components/shape-card/shape-card.less

@@ -27,8 +27,8 @@
     }
 
     .shape-color {
-        width: 72rpx;
+        width: 60rpx;
-        height: 72rpx;
+        height: 60rpx;
         border-radius: 50%;
         border: 1rpx solid #141414;
         background-color: skyblue;

miniprogram/components/shape-card/shape-card.ts

@@ -11,7 +11,7 @@ Component({
             type: String,
             value: '',
         },
-        color: {
+        fillColor: {
             type: String,
             value: '',
         },
@@ -34,7 +34,7 @@ Component({
      * 监听属性变化
      */
     observers: {
-        'svg, color': function () {
+        'svg, fillColor': function () {
             this.generateSvgDataUri();
         }
     },
@@ -46,12 +46,24 @@ Component({
          * 生成完整的 SVG Data URI
          */
         generateSvgDataUri() {
-            const { svg, color } = this.data;
+            const { svg, fillColor } = this.data;
+            if (fillColor === 'transparent') return;
             if (!svg) return;
 
-            // 创建完整的 SVG 字符串，替换填充颜色
+            // 处理 fill 属性：无论原来有没有 fill，都要赋值为 fillColor
-            const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`);
+            let processedSvg = svg;
-            const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${coloredSvg}</svg>`;
+
+            // 1. 如果有 fill 属性，全部替换为 fillColor
+            if (/fill="[^"]*"/.test(processedSvg)) {
+                processedSvg = processedSvg.replace(/fill="[^"]*"/g, `fill="${fillColor || '#ff0000'}"`);
+            } else {
+                // 2. 没有 fill 属性，则在第一个标签内加上 fill
+                processedSvg = processedSvg.replace(
+                    /(<(?:circle|rect|polygon|ellipse|path|line)[^>]*?)(\/?>)/,
+                    `$1 fill="${fillColor || '#ff0000'}"$2`
+                );
+            }
+            const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${processedSvg}</svg>`;
 
             // 转换为 Data URI
             const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
@@ -65,8 +77,13 @@ Component({
             this.triggerEvent('onDelete', { key });
         },
         onColorTap() {
-            const { key, color } = this.data;
+            const { key, fillColor } = this.data;
-            this.triggerEvent('onColorTap', { key, color });
+            this.triggerEvent('onColorTap', { key, fillColor });
+        },
+
+        onShapeTap() {
+            const { key } = this.data;
+            this.triggerEvent('onShapeTap', { key });
         },
     },
 });

miniprogram/components/shape-card/shape-card.wxml

@@ -1,9 +1,13 @@
 <view class="shape-card">
-    <image src="{{ svgDataUri }}" class="shape-card-img" mode="aspectFit" />
+    <image
+        src="{{ svgDataUri }}"
+        class="shape-card-img"
+        mode="aspectFit"
+        bind:tap="onShapeTap" />
     <view class="divider" />
     <view
         class="shape-color"
-        style="background-color: {{ color }}"
+        style="background-color: {{ fillColor }}"
         bind:tap="onColorTap" />
     <van-icon
         class-prefix="toy-icon"

miniprogram/components/shape-picker/shape-picker.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "styleIsolation": "isolated",
+    "usingComponents": {
+        "van-popup": "@vant/weapp/popup/index",
+        "toy-button": "/ui/button/button"
+    }
+}

miniprogram/components/shape-picker/shape-picker.less

@@ -0,0 +1,101 @@
+.shape-picker-popup {
+    border-radius: 20rpx;
+
+    .shape-picker-container {
+        width: 642rpx;
+        background-color: #fff;
+        border-radius: 20rpx;
+        box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+        padding: 36rpx 36rpx;
+        box-sizing: border-box;
+        align-items: center;
+
+        .shape-picker-title {
+            font-size: 32rpx;
+            color: #141414;
+            font-weight: bold;
+            margin-bottom: 30rpx;
+            text-align: center;
+        }
+
+        .shape-options-wrapper {
+            padding: 28rpx 0;
+            width: 100%;
+            height: 500rpx;
+            overflow-y: auto;
+        }
+
+        .shape-options {
+            display: grid;
+            grid-template-columns: repeat(3, 186rpx);
+            gap: 12rpx;
+            width: 100%;
+            justify-content: center;
+
+            .shape-option {
+                width: 140rpx;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                transition: all 0.2s ease;
+                padding: 10rpx;
+                border-radius: 10rpx;
+                border: 1rpx solid transparent;
+
+                .shape-svg-container {
+                    width: 140rpx;
+                    height: 140rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 1rpx solid #141414;
+                    border-radius: 8rpx;
+                    background-color: #fafafa;
+                    margin-bottom: 8rpx;
+                    position: relative;
+
+                    .shape-svg {
+                        width: 140rpx;
+                        height: 140rpx;
+                        display: block;
+                    }
+                }
+
+                .shape-name {
+                    font-size: 24rpx;
+                    color: #141414;
+                    text-align: center;
+                    line-height: 1.2;
+                }
+
+                &.selected {
+                    // transform: scale(1.1);
+                    // border: 1px solid rgb(147, 211, 51);
+                    // background-color: rgba(64, 150, 255, 0.05);
+
+                    .shape-svg-container {
+                        border: 1px solid #93d333;
+                        // border: 1px solid #4096ff;
+                        // background-color: #fff;
+                        // box-shadow: 0 0 6rpx 2rpx rgba(147, 211, 51, 0.2);
+                    }
+
+                    .shape-name {
+                        color: rgb(147, 211, 51);
+                        // font-weight: bold;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.btn-area {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 10rpx 24rpx;
+}

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

@@ -0,0 +1,122 @@
+import { SHAPES, ShapeCard } from '../../constants/shapes';
+
+Component({
+    options: {},
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        show: {
+            type: Boolean,
+            value: false,
+        },
+        selectedShape: {
+            type: String,
+            value: '',
+        },
+        currentShapeKey: {
+            type: String,
+            value: '',
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        shapes: [] as (ShapeCard & { svgDataUrl: string })[],
+        selectedShapes: [] as string[], // 多选模式下选中的形状数组
+    },
+    lifetimes: {
+        attached() {
+            // 处理 SVG 数据，转换为 data URL
+            const shapesWithDataUrl = SHAPES.map(shape => {
+                const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${shape.svg}</svg>`;
+                const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
+                return {
+                    ...shape,
+                    svgDataUrl: svgDataUri
+                };
+            });
+            console.log('shapesWithDataUrl---:', shapesWithDataUrl);
+            this.setData({
+                shapes: shapesWithDataUrl
+            });
+        },
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        onClose() {
+            this.triggerEvent('onClose');
+        },
+
+        onSelectShape(e: WechatMiniprogram.TouchEvent) {
+            const { index } = e.currentTarget.dataset;
+            const { currentShapeKey, shapes } = this.data;
+
+            if (currentShapeKey) {
+
+                // 单选模式：currentShapeKey 不为空时，只能选中一个形状
+                this.setData({
+                    shapes: shapes.map((item, i) => ({
+                        ...item,
+                        checked: i === index
+                    }))
+                });
+            } else {
+                // 多选模式：currentShapeKey 为空时，支持多选，最多可选6个
+                let shapesCopy = this.data.shapes.map(item => ({ ...item }));
+                const targetIndex = index;
+
+                // 统计当前已选中的数量
+                const checkedCount = shapesCopy.filter(item => item.checked).length;
+
+                if (shapesCopy[targetIndex].checked) {
+                    // 如果已选中，则取消选中
+                    shapesCopy[targetIndex].checked = false;
+                } else {
+                    if (checkedCount >= 6) {
+                        wx.showToast({
+                            title: '最多可选择6个形状',
+                            icon: 'none',
+                            duration: 1500
+                        });
+                        return;
+                    }
+                    // 如果未选中，则添加到选中列表
+                    shapesCopy[targetIndex].checked = true;
+                }
+
+                this.setData({
+                    shapes: shapesCopy,
+                });
+            }
+        },
+
+        onChange() {
+            const { selectedShape, selectedShapes, currentShapeKey } = this.data;
+
+            if (currentShapeKey) {
+                // 单选模式：返回单个选中的形状
+                this.triggerEvent('onChange', { shape: selectedShape, currentShapeKey });
+            } else {
+                // 多选模式：返回选中的形状数组
+                this.triggerEvent('onChange', { shapes: selectedShapes });
+            }
+        },
+
+        // 获取选中状态的 CSS 类名
+        getShapeClass(shapeId: string): string {
+            const { currentShapeKey, selectedShapes } = this.data;
+
+            if (currentShapeKey) {
+                // 单选模式：检查是否等于当前选中的形状
+                return shapeId === currentShapeKey ? 'selected single-mode' : '';
+            } else {
+                // 多选模式：检查是否在选中列表中
+                return selectedShapes.includes(shapeId) ? 'selected multi-mode' : '';
+            }
+        },
+    },
+});

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

@@ -0,0 +1,46 @@
+<van-popup
+    show="{{ show }}"
+    bind:close="onClose"
+    custom-class="shape-picker-popup">
+    <view class="shape-picker-container">
+        <text class="shape-picker-title"
+            >选择形状{{ currentShapeKey ? '' : '（多选）' }}</text
+        >
+        <view class="shape-options-wrapper">
+            <view class="shape-options">
+                <view
+                    wx:for="{{shapes}}"
+                    wx:key="id"
+                    class="shape-option {{item.checked ? 'selected' : '' }}"
+                    bindtap="onSelectShape"
+                    data-index="{{index}}"
+                    data-shape="{{item.id}}">
+                    <view class="shape-svg-container">
+                        <image
+                            class="shape-svg"
+                            src="{{ item.svgDataUrl }}"
+                            mode="aspectFit" />
+                        <!-- 多选模式下显示选中标记 -->
+                        <view wx:if="{{ item.checked }}" class="selected-icon">
+                            <toy-icon
+                                name="ic_check"
+                                size="24"
+                                color="#93d333" />
+                        </view>
+                    </view>
+                    <text class="shape-name">{{item.name}}</text>
+                </view>
+            </view>
+        </view>
+        <view class="btn-area">
+            <toy-button
+                type="primary"
+                bind:click="onChange"
+                width="400rpx"
+                disabled="{{ currentShapeKey ? !selectedShape : selectedShapes.length === 0 }}">
+                确认选择{{ !currentShapeKey && selectedShapes.length > 0 ? '（'
+                + selectedShapes.length + '个）' : '' }}
+            </toy-button>
+        </view>
+    </view>
+</van-popup>

miniprogram/constants/shapes.ts

@@ -6,7 +6,18 @@
  * 
  */
 
-const SHAPES = [
+interface ShapeCard {
+    id: string;
+    name: string;
+    type: string;
+    svg: string;
+    svgDataUrl?: string;
+    fillColor: string;
+    drawFunction?: string;
+    checked?: boolean;
+}
+
+const SHAPES: ShapeCard[] = [
     // 三角形
     {
         id: 'obtuse-triangle',
@@ -14,13 +25,15 @@ const SHAPES = [
         type: 'triangle',
         // svg: '<polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
         svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawTriangle',
     },
     {
         id: 'right-triangle',
         name: '直角三角形',
         type: 'triangle',
-        svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawTriangle',
     },
     {
@@ -28,7 +41,8 @@ const SHAPES = [
         name: '等腰三角形',
         type: 'triangle',
         // svg: '<polygon points="15,15 85,15 50,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<polygon points="50,15 85,85 15,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="50,15 85,85 15,85" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawTriangle',
     },
     // 四边形
@@ -37,7 +51,8 @@ const SHAPES = [
         name: '正方形',
         type: 'rect',
         // svg: '<rect x="20" y="20" width="60" height="60" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<rect x="15" y="15" width="70" height="70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<rect x="15" y="15" width="70" height="70" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawSquare',
     },
     {
@@ -45,7 +60,8 @@ const SHAPES = [
         name: '长方形',
         type: 'rect',
         // svg: '<rect x="20" y="20" width="60" height="40" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<rect x="15" y="25" width="70" height="50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<rect x="15" y="25" width="70" height="50" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawRectangle',
     },
     {
@@ -53,7 +69,8 @@ const SHAPES = [
         name: '平行四边形',
         type: 'rect',
         // svg: '<polygon points="20,30 70,30 90,70 40,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<polygon points="15,30 70,30 85,70 30,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="15,30 70,30 85,70 30,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawParallelogram',
     },
     {
@@ -61,7 +78,8 @@ const SHAPES = [
         name: '菱形',
         type: 'rect',
         // svg: '<polygon points="50,20 70,50 50,80 30,50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<polygon points="50,15 70,50 50,85 30,50" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="50,15 70,50 50,85 30,50" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawParallelogram',
     },
     {
@@ -69,7 +87,8 @@ const SHAPES = [
         name: "梯形",
         type: 'rect',
         // svg: '<polygon points="40,30 70,30 90,70 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<polygon points="30,25 70,25 90,75 10,75" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="30,25 70,25 90,75 10,75" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawTrapezoid',
     },
     // 五边形   
@@ -78,7 +97,8 @@ const SHAPES = [
         name: '五边形',
         type: 'rect',
         // svg: '<polygon points="50,10,80,35,68,70,32,70,20,35" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<polygon points="50,20,80,45,68,80,32,80,20,45" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="50,20,80,45,68,80,32,80,20,45" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawHexagon',
     },
 
@@ -87,7 +107,8 @@ const SHAPES = [
         id: 'hexagon',
         name: '六边形',
         type: 'rect',
-        svg: '<polygon points="15.4,30 50,10 84.6,30 84.6,70 50,90 15.4,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="15.4,30 50,10 84.6,30 84.6,70 50,90 15.4,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawHexagon',
     },
     // 五角星
@@ -95,7 +116,8 @@ const SHAPES = [
         id: 'pentagram',
         name: '五角星',
         type: 'rect',
-        svg: '<polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="50,20 61,42 85,44 67,60 71,85 50,75 29,85 33,60 15,44 39,42" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawPentagram',
     },
     // 心形
@@ -103,7 +125,8 @@ const SHAPES = [
         id: 'heart',
         name: '心形',
         type: 'rect',
-        svg: '<path d="M50,35 C35,20 20,35 25,50 C30,65 50,80 50,80 C50,80 70,65 75,50 C80,35 65,20 50,35Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<path d="M50,35 C35,20 20,35 25,50 C30,65 50,80 50,80 C50,80 70,65 75,50 C80,35 65,20 50,35Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawHeart',
     },
     // 圆形
@@ -111,7 +134,8 @@ const SHAPES = [
         id: 'circle',
         name: '圆形',
         type: 'circle',
-        svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawCircle',
     },
     // 椭圆
@@ -119,7 +143,8 @@ const SHAPES = [
         id: 'ellipse',
         name: '椭圆',
         type: 'circle',
-        svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawEllipse',
     },
     // 半圆
@@ -128,7 +153,8 @@ const SHAPES = [
         name: '半圆',
         type: 'circle',
         // svg: '<path d="M20,70 A20,20 0 0,1 80,70 L70,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawSemicircle',
     },
     // 扇形
@@ -137,7 +163,8 @@ const SHAPES = [
         name: '扇形',
         type: 'circle',
         // svg: '<path d="M50,70 L80,35 A40,40 0 0,0 20,35 L50,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        svg: '<path d="M50,75 L80,35 A40,40 0 0,0 20,35 L50,75 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<path d="M50,75 L80,35 A40,40 0 0,0 20,35 L50,75 Z" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawSector',
     },
     // 圆环
@@ -146,9 +173,10 @@ const SHAPES = [
         name: '圆环',
         type: 'circle',
         // svg: '<path d="M75,50 A25,25 0 1,0 25,50 A25,25 0 1,0 75,50 ZM65,50 A15,15 0 1,0 35,50 A15,15 0 1,0 65,50 Z" fill="#ff0000" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
-        svg: '<path d="M85,50 A30,30 0 1,0 15,50 A30,30 0 1,0 85,50 ZM65,50A15,15 0 1,0 35,50A15,15 0 1,0 65,50 Z" fill="#ff0000" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
+        svg: '<path d="M85,50 A30,30 0 1,0 15,50 A30,30 0 1,0 85,50 ZM65,50A15,15 0 1,0 35,50A15,15 0 1,0 65,50 Z" fill="transparent" fill-rule="evenodd" stroke="#141414" stroke-width="1"/>',
+        fillColor: '#ff0000',
         drawFunction: 'drawRing',
     },
 ];
 
-export { SHAPES };
+export { SHAPES, ShapeCard };

miniprogram/pages/shape/index.json

@@ -9,6 +9,7 @@
         "van-icon": "@vant/weapp/icon/index",
         "van-popup": "@vant/weapp/popup/index",
         "toy-button": "../../ui/button/button",
-        "shape-card": "../../components/shape-card/shape-card"
+        "shape-card": "../../components/shape-card/shape-card",
+        "shape-picker": "../../components/shape-picker/shape-picker"
     }
 }

miniprogram/pages/shape/index.ts

@@ -1,11 +1,99 @@
-import { SHAPES } from '../../constants/shapes';
+import { SHAPES, ShapeCard } from '../../constants/shapes';
+import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
+
+
 
 Page({
     data: {
-        shapeList: SHAPES,
+        shapeList: [] as ShapeCard[],
+        showSelectShapePopup: false,
+        currentShapeKey: '',
     },
 
     onLoad() {
 
     },
+
+    openSelectShapePopup(e: any) {
+        const { key } = e.detail;
+        this.setData({
+            showSelectShapePopup: true,
+            currentShapeKey: key
+        });
+    },
+
+    closeSelectShapePopup() {
+        this.setData({
+            showSelectShapePopup: false,
+            currentShapeKey: ''
+        });
+    },
+
+    onChangeShape(e: any) {
+        const { shape, currentShapeKey, shapes } = e.detail;
+        console.log('shape', shape);
+        console.log('shapes', shapes);
+        if (currentShapeKey) {
+            this.setData({
+                showSelectShapePopup: false,
+                currentShapeKey: '',
+                shapeList: this.data.shapeList.map(item => {
+                    if (item.id === currentShapeKey) {
+                        return { ...item, fillColor: item.fillColor };
+                    }
+                    return item;
+                })
+            });
+        } else {
+            // 随机从 WATER_COLORS.basic12 中获取不重复的颜色
+            const colorList = WATER_COLORS.basic12.map(item => item.hex);
+            const colorsCopy = [...colorList];
+            for (let i = colorsCopy.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [colorsCopy[i], colorsCopy[j]] = [colorsCopy[j], colorsCopy[i]];
+            }
+            const selectedColors = colorsCopy.slice(0, shapes.length);
+
+            this.setData({
+                showSelectShapePopup: false,
+                currentShapeKey: '',
+                shapeList: shapes.map((item: ShapeCard, idx: number) => ({
+                    ...item,
+                    fillColor: selectedColors[idx] || item.fillColor
+                }))
+            });
+        }
+    },
+    /**
+     * 随机生成6个图形
+     */
+    refreshShapeCard() {
+        // 随机取6个图形
+        const shapesCopy = [...SHAPES];
+        for (let i = shapesCopy.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [shapesCopy[i], shapesCopy[j]] = [shapesCopy[j], shapesCopy[i]];
+        }
+        const selectedShapes = shapesCopy.slice(0, 6);
+
+        // 随机取6个颜色
+        const colorList = WATER_COLORS.basic12.map(item => item.hex);
+        const colorsCopy = [...colorList];
+        for (let i = colorsCopy.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [colorsCopy[i], colorsCopy[j]] = [colorsCopy[j], colorsCopy[i]];
+        }
+        const selectedColors = colorsCopy.slice(0, 6);
+
+        // 分配颜色到图形
+        const shapeList = selectedShapes.map((shape, idx) => ({
+            ...shape,
+            fillColor: selectedColors[idx]
+        }));
+
+        // 更新数据
+        this.setData({
+            shapeList
+        });
+    }
 });

miniprogram/pages/shape/index.wxml

@@ -26,9 +26,15 @@
                 wx:key="{{index}}"
                 key="{{index}}"
                 svg="{{ item.svg }}"
-                color="{{ item.color }}"
+                fillColor="{{ item.fillColor }}"
+                bind:onShapeTap="openSelectShapePopup"
                 bind:onDelete="onDelete"
                 bind:onColorTap="onColorTap" />
         </view>
     </view>
+    <shape-picker
+        show="{{showSelectShapePopup}}"
+        currentShapeKey="{{currentShapeKey}}"
+        bind:onClose="closeSelectShapePopup"
+        bind:onChange="onChangeShape" />
 </view>