feat: 图形页开发

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>