feat: 优化页面样式

miniprogram/pages/shape/index.less

@@ -14,7 +14,7 @@ page {
     .wrapper {
         background-color: #fff;
         border-radius: 20rpx;
-        padding: 24rpx;
+        padding: 0 24rpx;
         box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
         margin: 30rpx 0;
         display: flex;
@@ -23,24 +23,65 @@ page {
         .wrapper-title {
             font-size: 32rpx;
             color: #141414;
-            margin-bottom: 24rpx;
+            margin: 36rpx 0;
             font-weight: bold;
             text-align: center;
         }
     }
 
     .btn-area {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 38rpx;
     }
 
     .shape-list {
+        margin: 38rpx 0;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 38rpx;
+    }
+
+    .shape-list-empty {
         display: flex;
-        flex-wrap: wrap;
-        column-gap: 50rpx;
-        row-gap: 24rpx;
-        justify-content: flex-start;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 60rpx 40rpx;
+        text-align: center;
+
+        .empty-icon {
+            width: 120rpx;
+            height: 120rpx;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 32rpx;
+            box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
+
+            .toy-icon {
+                font-size: 48rpx;
+                color: #3b82f6;
+            }
+        }
+
+        .empty-title {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #374151;
+            margin-bottom: 16rpx;
+            line-height: 1.4;
+        }
+
+        .empty-desc {
+            font-size: 26rpx;
+            color: #6b7280;
+            line-height: 1.6;
+            margin-bottom: 32rpx;
+            max-width: 400rpx;
+        }
     }
 }
 

miniprogram/pages/shape/index.wxml

@@ -5,20 +5,19 @@
             <toy-button
                 type="green"
                 bind:click="handleSelectShape"
-                width="290rpx">
+                width="100%">
                 选择图形
             </toy-button>
             <toy-button
                 type="primary"
                 bind:click="refreshShapeCard"
-                width="290rpx"
+                width="100%"
                 icon="refresh"
                 icon-class-prefix="toy-icon">
                 随机生成
             </toy-button>
         </view>
-        <van-divider />
-        <view class="shape-list">
+        <view class="shape-list" wx:if="{{shapeList.length > 0}}">
             <shape-card
                 wx:for="{{ shapeList }}"
                 wx:for-item="item"
@@ -31,6 +30,15 @@
                 bind:onDelete="onDelete"
                 bind:onColorTap="onColorTap" />
         </view>
+        <view class="shape-list-empty" wx:if="{{!shapeList.length}}">
+            <view class="empty-icon">
+                <text class="toy-icon toy-icon-guide"></text>
+            </view>
+            <view class="empty-title">还没有选择图形</view>
+            <view class="empty-desc"
+                >请点击上方“选择图形”或使用“随机生成”开始创建</view
+            >
+        </view>
     </view>
     <shape-picker
         selectedShapeList="{{shapeList}}"