feat: 准备各个形状的 svg 图

miniprogram/assets/shapes/半圆.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60" fill="none">
+<path d="M52 38C52 25.8497 42.1503 16 30 16C17.8497 16 8 25.8497 8 38L52 38Z" stroke="rgba(20, 20, 20, 1)" stroke-width="1"   >
+</path>
+</svg>

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

@@ -0,0 +1,57 @@
+.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

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

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

@@ -0,0 +1,58 @@
+.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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,19 @@
+<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.less

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

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

@@ -7,11 +7,7 @@ Component({
             type: Number,
             value: 0,
         },
-        img: {
+        svg: {
-            type: String,
-            value: '',
-        },
-        name: {
             type: String,
             value: '',
         },
@@ -20,10 +16,50 @@ Component({
             value: '',
         },
     },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        svgDataUri: '',
+    },
+    /**
+     * 组件生命周期
+     */
+    lifetimes: {
+        attached() {
+            this.generateSvgDataUri();
+        },
+    },
+    /**
+     * 监听属性变化
+     */
+    observers: {
+        'svg, color': function () {
+            this.generateSvgDataUri();
+        }
+    },
     /**
      * 组件的方法列表
      */
     methods: {
+        /**
+         * 生成完整的 SVG Data URI
+         */
+        generateSvgDataUri() {
+            const { svg, color } = this.data;
+            if (!svg) return;
+
+            // 创建完整的 SVG 字符串，替换填充颜色
+            const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`);
+            const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${coloredSvg}</svg>`;
+
+            // 转换为 Data URI
+            const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
+
+            this.setData({
+                svgDataUri: svgDataUri
+            });
+        },
         onDelete() {
             const { key } = this.data;
             this.triggerEvent('onDelete', { key });

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

@@ -1,19 +1,14 @@
 <view class="shape-card">
-    <view class="shape-card-img-wrapper">
+    <image src="{{ svgDataUri }}" class="shape-card-img" mode="aspectFit" />
-        <image src="{{ img }}" class="shape-card-img" />
+    <view class="divider" />
-    </view>
-    <view class="shape-card-footer">
     <view
-            class="shape-card-footer-color"
+        class="shape-color"
         style="background-color: {{ color }}"
-            bind:tap="onColorTap"></view>
+        bind:tap="onColorTap" />
-        <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"
+        custom-class="delete-icon"
-            size="48rpx" />
+        size="48rpx"
-    </view>
+        bind:tap="onDelete" />
 </view>

miniprogram/constants/shapes.ts

@@ -1,57 +1,153 @@
+/**
+ * 钝角三角形
+ * <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
+  <polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>
+</svg>
+ * 
+ */
+
 const SHAPES = [
+    // 三角形
+    {
+        id: 'obtuse-triangle',
+        name: '钝角三角形',
+        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"/>',
+        drawFunction: 'drawTriangle',
+    },
+    {
+        id: 'right-triangle',
+        name: '直角三角形',
+        type: 'triangle',
+        svg: '<polygon points="15,15 15,85 85,85" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        drawFunction: 'drawTriangle',
+    },
+    {
+        id: 'acute-triangle',
+        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"/>',
+        drawFunction: 'drawTriangle',
+    },
+    // 四边形
+    {
+        id: 'square',
+        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"/>',
+        drawFunction: 'drawSquare',
+    },
+    {
+        id: 'rectangle',
+        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"/>',
+        drawFunction: 'drawRectangle',
+    },
+    {
+        id: 'rectangle',
+        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"/>',
+        drawFunction: 'drawParallelogram',
+    },
+    {
+        id: 'parallelogram',
+        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"/>',
+        drawFunction: 'drawParallelogram',
+    },
+    {
+        id: 'trapezoid',
+        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"/>',
+        drawFunction: 'drawTrapezoid',
+    },
+    // 五边形   
+    {
+        id: 'pentagon',
+        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"/>',
+        drawFunction: 'drawHexagon',
+    },
+
+    // 六边形
+    {
+        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"/>',
+        drawFunction: 'drawHexagon',
+    },
+    // 五角星
+    {
+        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"/>',
+        drawFunction: 'drawPentagram',
+    },
+    // 心形
+    {
+        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"/>',
+        drawFunction: 'drawHeart',
+    },
+    // 圆形
     {
         id: 'circle',
         name: '圆形',
-        img: '/assets/shapes/circle.webp',
-        color: '#FF0000',
         type: 'circle',
-        svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
+        svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
         drawFunction: 'drawCircle',
     },
+    // 椭圆
     {
-        id: 'square',
+        id: 'ellipse',
-        name: '正方形',
+        name: '椭圆',
-        img: '/assets/shapes/square.webp',
-        color: '#0000FF',
-        type: 'rect',
-        svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
-        drawFunction: 'drawSquare',
-    },
-    {
-        id: 'circle2',
-        name: '圆形',
-        img: '/assets/shapes/circle2.svg',
-        color: '#FF0000',
         type: 'circle',
-        svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
+        svg: '<ellipse cx="50" cy="50" rx="40" ry="25" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        drawFunction: 'drawCircle',
+        drawFunction: 'drawEllipse',
     },
+    // 半圆
     {
-        id: 'square',
+        id: 'semicircle',
-        name: '正方形',
+        name: '半圆',
-        img: '/assets/shapes/square.webp',
-        color: '#0000FF',
-        type: 'rect',
-        svg: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
-        drawFunction: 'drawSquare',
-    },
-    {
-        id: 'circle',
-        name: '圆形',
-        img: '/assets/shapes/circle.webp',
-        color: '#FF0000',
         type: 'circle',
-        svg: '<circle cx="50" cy="50" r="40" stroke="#333" stroke-width="2" fill="none"/>',
+        // svg: '<path d="M20,70 A20,20 0 0,1 80,70 L70,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        drawFunction: 'drawCircle',
+        svg: '<path d="M15,65 A20,20 0 0,1 85,65 L85,65 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        drawFunction: 'drawSemicircle',
     },
+    // 扇形
     {
-        id: 'square',
+        id: 'sector',
-        name: '正方形',
+        name: '扇形',
-        img: '/assets/shapes/square.webp',
+        type: 'circle',
-        color: '#0000FF',
+        // svg: '<path d="M50,70 L80,35 A40,40 0 0,0 20,35 L50,70 Z" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
-        type: 'rect',
+        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: '<rect x="10" y="10" width="80" height="80" stroke="#333" stroke-width="2" fill="none"/>',
+        drawFunction: 'drawSector',
-        drawFunction: 'drawSquare',
+    },
+    // 圆环
+    {
+        id: 'ring',
+        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"/>',
+        drawFunction: 'drawRing',
     },
 ];
 

miniprogram/pages/shape/index.less

@@ -38,12 +38,8 @@ page {
     .shape-list {
         display: flex;
         flex-wrap: wrap;
-        gap: 24rpx; // 卡片间距，可调整
+        column-gap: 50rpx;
-
+        row-gap: 24rpx;
-        shape-card {
+        justify-content: flex-start;
-            width: calc(50% - 12rpx); // 两个一行，减去一半的gap
-            box-sizing: border-box;
-            margin-bottom: 24rpx;
-        }
     }
 }

miniprogram/pages/shape/index.wxml

@@ -25,8 +25,7 @@
                 wx:for-index="index"
                 wx:key="{{index}}"
                 key="{{index}}"
-                img="{{ item.img }}"
+                svg="{{ item.svg }}"
-                name="{{ item.name }}"
                 color="{{ item.color }}"
                 bind:onDelete="onDelete"
                 bind:onColorTap="onColorTap" />