feat: 图形页开发

miniprogram/assets/shapes/circle2.svg

@@ -0,0 +1,6 @@
+<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="M30.5 52C42.3741 52 52 42.3741 52 30.5C52 18.6259 42.3741 9 30.5 9C18.6259 9 9 18.6259 9 30.5C9 42.3741 18.6259 52 30.5 52ZM30.5 10C41.8218 10 51 19.1782 51 30.5C51 41.8218 41.8218 51 30.5 51C19.1782 51 10 41.8218 10 30.5C10 19.1782 19.1782 10 30.5 10Z" fill-rule="evenodd"  fill="#000000" >
+</path>
+<circle cx="30.5" cy="30.5" r="20.5"   fill="#FC0000" >
+</circle>
+</svg>

miniprogram/components/shape-card/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/shape-card.json

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

miniprogram/components/shape-card/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/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/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/constants/shapes.ts

@@ -0,0 +1,58 @@
+const SHAPES = [
+    {
+        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"/>',
+        drawFunction: 'drawCircle',
+    },
+    {
+        id: 'square',
+        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"/>',
+        drawFunction: 'drawCircle',
+    },
+    {
+        id: 'square',
+        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"/>',
+        drawFunction: 'drawCircle',
+    },
+    {
+        id: 'square',
+        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',
+    },
+];
+
+export { SHAPES };

miniprogram/pages/shape/index.json

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

miniprogram/pages/shape/index.less

@@ -12,7 +12,7 @@ page {
     }
 
     .wrapper {
-        background-color: #ffffff;
+        background-color: #fff;
         border-radius: 20rpx;
         padding: 24rpx;
         box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
@@ -34,4 +34,16 @@ page {
         flex-direction: row;
         justify-content: space-between;
     }
+
+    .shape-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 24rpx; // 卡片间距，可调整
+
+        shape-card {
+            width: calc(50% - 12rpx); // 两个一行，减去一半的gap
+            box-sizing: border-box;
+            margin-bottom: 24rpx;
+        }
+    }
 }

miniprogram/pages/shape/index.ts

@@ -1,11 +1,11 @@
+import { SHAPES } from '../../constants/shapes';
+
 Page({
     data: {
-        shapeList: [],
+        shapeList: SHAPES,
     },
 
     onLoad() {
-        this.setData({
+
-            shapeList: [],
-        });
     },
 });

miniprogram/pages/shape/index.wxml

@@ -18,5 +18,18 @@
             </toy-button>
         </view>
         <van-divider />
+        <view class="shape-list">
+            <shape-card
+                wx:for="{{ shapeList }}"
+                wx:for-item="item"
+                wx:for-index="index"
+                wx:key="{{index}}"
+                key="{{index}}"
+                img="{{ item.img }}"
+                name="{{ item.name }}"
+                color="{{ item.color }}"
+                bind:onDelete="onDelete"
+                bind:onColorTap="onColorTap" />
+        </view>
     </view>
 </view>

project.private.config.json

@@ -24,12 +24,19 @@
         "miniprogram": {
             "list": [
                 {
-                    "name": "测试图形绘制",
+                    "name": "pages/shape/index",
-                    "pathName": "demoPages/shapePrint/index",
+                    "pathName": "pages/shape/index",
                     "query": "",
                     "scene": null,
                     "launchMode": "default"
                 },
+                {
+                    "name": "测试图形绘制",
+                    "pathName": "demoPages/shapePrint/index",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
                 {
                     "name": "debug页",
                     "pathName": "pages/debug/debug",