feat: AI 修改图形打印页

miniprogram/demoPages/shapePrint/index.json

@@ -1,7 +1,12 @@
 {
-    "navigationBarTitleText": "图形绘制 示例",
+    "navigationBarTitleText": "形状涂色练习生成器",
-    "navigationBarBackgroundColor": "#d2e7d8",
+    "navigationBarBackgroundColor": "#667eea",
     "homeButton": true,
-    "backgroundColor": "#e8eddb",
+    "backgroundColor": "#f5f5f5",
-    "enablePullDownRefresh": false
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "van-popup": "@vant/weapp/popup/index",
+        "van-icon": "@vant/weapp/icon/index",
+        "color-picker": "/components/color-picker/color-picker"
+    }
 }

miniprogram/demoPages/shapePrint/index.less

@@ -48,24 +48,171 @@
     padding-bottom: 15rpx;
 }
 
-.clear-btn {
+/* 选择形状按钮 */
-    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+.select-shapes-btn {
-    color: white;
+    width: 100%;
-    border: none;
+    height: 90rpx;
-    padding: 15rpx 25rpx;
+    font-size: 32rpx;
     border-radius: 20rpx;
-    font-size: 24rpx;
+    background: linear-gradient(45deg, #667eea, #764ba2);
-    box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.4);
+    border: none;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.4);
+
+    .btn-text {
+        margin-left: 10rpx;
+        font-weight: 500;
+    }
 }
 
-/* 形状选择器 */
+/* 形状卡片容器 */
-.shape-selector {
+.shape-cards-container {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200rpx, 1fr));
+    grid-template-columns: 1fr 1fr;
     gap: 20rpx;
 }
 
+/* 形状卡片 */
+.shape-card {
+    position: relative;
+    padding: 20rpx;
+    background: linear-gradient(145deg, #ffffff, #f0f0f0);
+    border-radius: 20rpx;
+    border: 2rpx solid #e0e0e0;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    &:active {
+        transform: scale(0.98);
+        background: linear-gradient(145deg, #f8f9fa, #e9ecef);
+    }
+
+    .delete-btn {
+        position: absolute;
+        top: 10rpx;
+        right: 10rpx;
+        width: 40rpx;
+        height: 40rpx;
+        background: rgba(255, 255, 255, 0.9);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+        z-index: 10;
+    }
+
+    .shape-preview-container {
+        position: relative;
+        width: 80rpx;
+        height: 80rpx;
+        margin-bottom: 15rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .shape-preview-canvas {
+        position: absolute;
+        width: 80rpx;
+        height: 80rpx;
+        opacity: 0;
+        /* 隐藏，只用于未来可能的Canvas预览 */
+    }
+
+    .shape-name {
+        font-size: 26rpx;
+        color: #333;
+        font-weight: 500;
+        margin-bottom: 10rpx;
+        text-align: center;
+    }
+
+    .color-info {
+        display: flex;
+        align-items: center;
+        gap: 8rpx;
+
+        .color-dot {
+            width: 20rpx;
+            height: 20rpx;
+            border-radius: 50%;
+            border: 2rpx solid #ddd;
+        }
+
+        .color-text {
+            font-size: 22rpx;
+            color: #666;
+        }
+    }
+}
+
+/* 形状选择弹窗样式 */
+.shape-selector-popup {
+    .van-popup {
+        max-height: 80vh;
+    }
+}
+
+.shape-selector-container {
+    padding: 30rpx;
+    max-height: 80vh;
+    overflow-y: auto;
+
+    .popup-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 30rpx;
+        padding-bottom: 20rpx;
+        border-bottom: 2rpx solid #f0f0f0;
+
+        .popup-title {
+            font-size: 32rpx;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .selected-count {
+            font-size: 24rpx;
+            color: #667eea;
+            background: rgba(102, 126, 234, 0.1);
+            padding: 8rpx 15rpx;
+            border-radius: 15rpx;
+        }
+    }
+
+    .shape-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20rpx;
+        margin-bottom: 30rpx;
+    }
+
+    .popup-actions {
+        padding-top: 20rpx;
+        border-top: 2rpx solid #f0f0f0;
+
+        .confirm-btn {
+            width: 100%;
+            height: 80rpx;
+            font-size: 30rpx;
+            border-radius: 20rpx;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+        }
+    }
+}
+
+/* 弹窗中的形状选项 */
 .shape-option {
+    position: relative;
     height: 140rpx;
     border: 3rpx solid #e0e0e0;
     border-radius: 20rpx;
@@ -78,7 +225,7 @@
     cursor: pointer;
     box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
 
-    &.active {
+    &.selected {
         border-color: #667eea;
         background: linear-gradient(145deg, #e3f2fd, #bbdefb);
         transform: translateY(-5rpx);
@@ -89,6 +236,30 @@
             font-weight: bold;
         }
     }
+
+    &.disabled {
+        opacity: 0.5;
+        background: #f5f5f5;
+        border-color: #ddd;
+
+        .shape-name {
+            color: #999;
+        }
+    }
+
+    .selected-mark {
+        position: absolute;
+        top: 8rpx;
+        right: 8rpx;
+        width: 24rpx;
+        height: 24rpx;
+        background: #667eea;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+    }
 }
 
 .shape-preview-box {
@@ -107,19 +278,22 @@
 
     &.shape-icon-circle {
         border-radius: 50%;
-        background: transparent;
+        background: var(--fill-color, transparent);
+        border-color: var(--border-color, #666);
     }
 
     &.shape-icon-square {
         border-radius: 5rpx;
-        background: transparent;
+        background: var(--fill-color, transparent);
+        border-color: var(--border-color, #666);
     }
 
     &.shape-icon-rectangle {
         width: 60rpx;
         height: 40rpx;
         border-radius: 5rpx;
-        background: transparent;
+        background: var(--fill-color, transparent);
+        border-color: var(--border-color, #666);
     }
 
     &.shape-icon-triangle {
@@ -128,7 +302,7 @@
         border: none;
         border-left: 25rpx solid transparent;
         border-right: 25rpx solid transparent;
-        border-bottom: 45rpx solid #666;
+        border-bottom: 45rpx solid var(--fill-color, red);
         background: transparent;
     }
 
@@ -136,7 +310,8 @@
         border-radius: 50%;
         width: 60rpx;
         height: 40rpx;
-        background: transparent;
+        background: var(--fill-color, transparent);
+        border-color: var(--border-color, #666);
     }
 
     &.shape-icon-diamond {
@@ -146,72 +321,142 @@
         border-left: 25rpx solid transparent;
         border-right: 25rpx solid transparent;
         border-top: 25rpx solid transparent;
-        border-bottom: 25rpx solid #666;
+        border-bottom: 25rpx solid var(--fill-color, #666);
         background: transparent;
         transform: rotate(45deg);
     }
 
+    /* 修正星形 */
     &.shape-icon-star {
         position: relative;
-        width: 0;
+        width: 80rpx;
-        height: 0;
+        height: 80rpx;
         border: none;
-        border-left: 25rpx solid transparent;
-        border-right: 25rpx solid transparent;
-        border-bottom: 18rpx solid #666;
         background: transparent;
-        transform: rotate(35deg);
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
+        --star-fill-color: var(--fill-color, red);
+        --star-border-color: var(--border-color, #333);
+        --star-border-width: 2rpx;
+
+        /* 边框层 */
         &::before {
             content: '';
             position: absolute;
-            left: -25rpx;
+            left: 50%;
-            top: -12rpx;
+            top: 50%;
-            width: 0;
+            width: 66rpx;
-            height: 0;
+            height: 66rpx;
-            border-left: 25rpx solid transparent;
+            transform: translate(-50%, -50%);
-            border-right: 25rpx solid transparent;
+            background: transparent;
-            border-bottom: 18rpx solid #666;
+            border: var(--star-border-width, 2rpx) solid var(--star-border-color, #333);
-            transform: rotate(-70deg);
+            clip-path: polygon(50% 0%,
+                    61% 35%,
+                    98% 35%,
+                    68% 57%,
+                    79% 91%,
+                    50% 70%,
+                    21% 91%,
+                    32% 57%,
+                    2% 35%,
+                    39% 35%);
+            z-index: 1;
+            box-sizing: border-box;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            width: 60rpx;
+            height: 60rpx;
+            transform: translate(-50%, -50%);
+            background: var(--star-fill-color, red);
+            clip-path: polygon(50% 0%,
+                    61% 35%,
+                    98% 35%,
+                    68% 57%,
+                    79% 91%,
+                    50% 70%,
+                    21% 91%,
+                    32% 57%,
+                    2% 35%,
+                    39% 35%);
+            z-index: 2;
+            pointer-events: none;
         }
     }
 
+    /* 爱心形状 */
     &.shape-icon-heart {
         position: relative;
-        width: 40rpx;
+        width: 44rpx;
-        height: 35rpx;
+        height: 40rpx;
-        border: none;
+        display: flex;
-        background: #666;
+        align-items: center;
-        transform: rotate(-45deg);
+        justify-content: center;
+        background: transparent;
 
-        &::before,
+        /* 主体部分（三角形） */
         &::after {
             content: '';
             position: absolute;
-            width: 20rpx;
+            left: 50%;
-            height: 30rpx;
+            bottom: 0;
-            background: #666;
+            transform: translateX(-50%) rotate(-45deg);
-            border-radius: 20rpx 20rpx 0 0;
+            width: 32rpx;
-            transform: rotate(-45deg);
+            height: 32rpx;
-            transform-origin: 0 100%;
+            background: var(--fill-color, #f00);
+            border-left: 2rpx solid var(--border-color, #333);
+            border-bottom: 2rpx solid var(--border-color, #333);
+            border-bottom-left-radius: 20rpx;
+            border-bottom-right-radius: 20rpx;
+            z-index: 1;
+            clip-path: polygon(0 0, 100% 0, 50% 100%);
         }
 
+        /* 左半圆 */
         &::before {
-            left: 20rpx;
+            content: '';
+            position: absolute;
+            left: 4rpx;
+            top: 0;
+            width: 24rpx;
+            height: 24rpx;
+            background: var(--fill-color, #f00);
+            border: 2rpx solid var(--border-color, #333);
+            border-bottom: none;
+            border-right: none;
+            border-radius: 50% 50% 0 0;
+            z-index: 2;
         }
 
-        &::after {
+        /* 右半圆 */
-            top: -15rpx;
+        .heart-right {
-            transform: rotate(45deg);
+            position: absolute;
-            transform-origin: 100% 100%;
+            right: 4rpx;
+            top: 0;
+            width: 24rpx;
+            height: 24rpx;
+            background: var(--fill-color, #f00);
+            border: 2rpx solid var(--border-color, #333);
+            border-bottom: none;
+            border-left: none;
+            border-radius: 50% 50% 0 0;
+            z-index: 2;
+            content: '';
+            display: block;
         }
     }
 
     &.shape-icon-hexagon {
         width: 40rpx;
         height: 22rpx;
-        background: #666;
+        background: var(--fill-color, #666);
-        border: none;
+        border: 2rpx solid var(--border-color, #333);
         position: relative;
 
         &::before,
@@ -226,63 +471,90 @@
 
         &::before {
             bottom: 100%;
-            border-bottom: 11rpx solid #666;
+            border-bottom: 11rpx solid var(--fill-color, #666);
         }
 
         &::after {
             top: 100%;
-            border-top: 11rpx solid #666;
+            border-top: 11rpx solid var(--fill-color, #666);
         }
     }
 
+    /* 修正五边形 */
     &.shape-icon-pentagon {
         position: relative;
-        width: 0;
+        width: 40rpx;
-        height: 0;
+        height: 38rpx;
-        border: none;
-        border-left: 25rpx solid transparent;
-        border-right: 25rpx solid transparent;
-        border-bottom: 30rpx solid #666;
         background: transparent;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         &::before {
             content: '';
             position: absolute;
-            left: -18rpx;
+            left: 0;
-            top: 30rpx;
+            top: 0;
-            width: 36rpx;
+            width: 40rpx;
-            height: 15rpx;
+            height: 38rpx;
-            background: #666;
+            background: var(--fill-color, #666);
+            border: 2rpx solid var(--border-color, #333);
+            clip-path: polygon(50% 0%,
+                    100% 38%,
+                    81% 100%,
+                    19% 100%,
+                    0% 38%);
+            box-sizing: border-box;
         }
     }
 
+    /* 修正半圆 */
     &.shape-icon-semicircle {
         width: 50rpx;
         height: 25rpx;
-        border: 2rpx solid #666;
-        border-bottom: none;
-        border-radius: 50rpx 50rpx 0 0;
-        background: transparent;
-    }
-
-    &.shape-icon-trapezoid {
-        width: 0;
-        height: 0;
         border: none;
-        border-left: 15rpx solid transparent;
-        border-right: 15rpx solid transparent;
-        border-bottom: 40rpx solid #666;
         background: transparent;
         position: relative;
+        overflow: hidden;
 
         &::before {
             content: '';
             position: absolute;
-            left: -25rpx;
+            left: 0;
-            top: 40rpx;
+            top: 0;
             width: 50rpx;
-            height: 2rpx;
+            height: 50rpx;
-            background: #666;
+            background: var(--fill-color, #666);
+            border: 2rpx solid var(--border-color, #333);
+            border-radius: 50%;
+            box-sizing: border-box;
+        }
+    }
+
+    /* 修正梯形 */
+    &.shape-icon-trapezoid {
+        width: 50rpx;
+        height: 30rpx;
+        border: none;
+        background: transparent;
+        position: relative;
+        overflow: visible;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 50rpx;
+            height: 30rpx;
+            background: var(--fill-color, #666);
+            border: 2rpx solid var(--border-color, #333);
+            clip-path: polygon(15% 100%,
+                    85% 100%,
+                    100% 0%,
+                    0% 0%);
+            box-sizing: border-box;
         }
     }
 }

miniprogram/demoPages/shapePrint/index.wxml

@@ -5,88 +5,65 @@
         <text class="subtitle">为小朋友制作涂色练习页</text>
     </view>
 
-    <!-- 形状选择区域 -->
+    <!-- 选择形状按钮 -->
     <view class="section">
-        <view class="section-title">选择形状</view>
+        <button
-        <view class="shape-selector">
+            class="select-shapes-btn"
-            <view
+            bindtap="openShapeSelector"
-                wx:for="{{availableShapes}}"
+            type="primary">
-                wx:key="id"
+            <van-icon name="add-o" color="white" size="20" />
-                class="shape-option {{currentShapeType === item.id ? 'active' : ''}}"
+            <text class="btn-text">选择形状 ({{selectedShapes.length}}/6)</text>
-                data-shape-id="{{item.id}}"
-                bindtap="selectShape">
-                <!-- 使用简单的CSS形状预览 -->
-                <view class="shape-preview-box">
-                    <view class="shape-icon shape-icon-{{item.id}}"></view>
-                </view>
-                <text class="shape-name">{{item.name}}</text>
-            </view>
-        </view>
-    </view>
-
-    <!-- 颜色选择区域 -->
-    <view class="section">
-        <view class="section-title">选择颜色</view>
-        <view class="color-selector">
-            <view
-                wx:for="{{availableColors}}"
-                wx:key="value"
-                class="color-option {{currentColor === item.value ? 'active' : ''}}"
-                style="background-color: {{item.value}}"
-                data-color="{{item.value}}"
-                bindtap="selectColor">
-                <view class="color-name">{{item.name}}</view>
-            </view>
-        </view>
-    </view>
-
-    <!-- 添加按钮 -->
-    <view class="section">
-        <button class="add-btn" bindtap="addShape" type="primary">
-            <text class="add-icon">+</text>
-            添加 {{currentShapeType === 'circle' ? '圆形' : currentShapeType ===
-            'square' ? '正方形' : currentShapeType === 'rectangle' ? '长方形' :
-            currentShapeType === 'triangle' ? '三角形' : currentShapeType ===
-            'oval' ? '椭圆形' : currentShapeType === 'diamond' ? '菱形' :
-            currentShapeType === 'star' ? '星形' : currentShapeType === 'heart'
-            ? '心形' : currentShapeType === 'hexagon' ? '六边形' :
-            currentShapeType === 'pentagon' ? '五边形' : currentShapeType ===
-            'semicircle' ? '半圆形' : currentShapeType === 'trapezoid' ? '梯形'
-            : '形状'}}
         </button>
     </view>
 
-    <!-- 已选择的形状列表 -->
+    <!-- 已选择的形状卡片 -->
     <view class="section" wx:if="{{selectedShapes.length > 0}}">
-        <view class="section-title">
+        <view class="section-title"
-            已选择的形状 ({{selectedShapes.length}})
+            >已选择的形状 ({{selectedShapes.length}})</view
-            <button class="clear-btn" bindtap="clearShapes" size="mini">
+        >
-                清空
+        <view class="shape-cards-container">
-            </button>
-        </view>
-        <view class="selected-shapes">
             <view
                 wx:for="{{selectedShapes}}"
                 wx:key="id"
-                class="selected-shape"
+                class="shape-card"
-                data-index="{{index}}"
+                bindtap="openColorPicker"
-                bindlongpress="removeShape">
+                data-index="{{index}}">
+                <!-- 删除按钮 -->
                 <view
-                    class="shape-preview"
+                    class="delete-btn"
-                    style="background-color: {{item.color}}"></view>
+                    catchtap="deleteShape"
-                <view class="shape-details">
+                    data-index="{{index}}">
-                    <text class="shape-info">{{item.name}}</text>
+                    <van-icon name="close" color="#ff4757" size="16" />
-                    <text class="color-info">{{item.color}}</text>
+                </view>
+                <!-- 形状预览 -->
+                <view class="shape-preview-container">
+                    <canvas
+                        type="2d"
+                        id="preview-canvas-{{index}}"
+                        class="shape-preview-canvas"
+                        style="background-color: {{item.fillColor}};">
+                    </canvas>
+                    <view
+                        class="shape-icon shape-icon-{{item.id}}"
+                        style="--fill-color: {{item.fillColor}}; --border-color: #333333;">
+                    </view>
+                </view>
+                <!-- 形状名称 -->
+                <text class="shape-name">{{item.name}}</text>
+                <!-- 颜色信息 -->
+                <view class="color-info">
+                    <view
+                        class="color-dot"
+                        style="background-color: {{item.fillColor}};"></view>
+                    <text class="color-text">{{item.colorName}}</text>
                 </view>
-                <text class="remove-hint">长按删除</text>
             </view>
         </view>
     </view>
 
     <!-- 设置区域 -->
-    <view class="section">
+    <view class="section" wx:if="{{selectedShapes.length > 0}}">
         <view class="section-title">打印设置</view>
-
         <view class="setting-item">
             <text class="setting-label">背景颜色:</text>
             <radio-group bindchange="setBackground" class="bg-radio-group">
@@ -102,17 +79,10 @@
                 </label>
             </radio-group>
         </view>
-
-        <view class="feature-intro">
-            <text class="intro-title">功能说明:</text>
-            <text class="intro-text">• 上半部分：带颜色的形状示例</text>
-            <text class="intro-text">• 下半部分：无颜色的练习区域</text>
-            <text class="intro-text">• 图片大小：A4 纸张，适合打印</text>
-        </view>
     </view>
 
-    <!-- 操作按钮 -->
+    <!-- 生成按钮 -->
-    <view class="section">
+    <view class="section" wx:if="{{selectedShapes.length > 0}}">
         <button
             class="generate-btn"
             bindtap="generateImage"
@@ -131,9 +101,6 @@
         </button>
     </view>
 
-    <!-- Canvas 画布 (隐藏) -->
-    <canvas type="2d" id="mainCanvas" class="hidden-canvas"> </canvas>
-
     <!-- 预览生成的图片 -->
     <view class="section" wx:if="{{generatedImage}}">
         <view class="section-title">生成的练习页</view>
@@ -144,4 +111,62 @@
             bindtap="previewImage" />
         <text class="preview-hint">点击图片可放大预览 • A4尺寸 • 适合打印</text>
     </view>
+
+    <!-- 形状选择弹窗 -->
+    <van-popup
+        show="{{showShapeSelector}}"
+        bind:close="closeShapeSelector"
+        custom-class="shape-selector-popup"
+        position="bottom"
+        round>
+        <view class="shape-selector-container">
+            <view class="popup-header">
+                <text class="popup-title">选择形状 (最多6个)</text>
+                <view class="selected-count"
+                    >已选: {{selectedShapes.length}}/6</view
+                >
+            </view>
+
+            <view class="shape-grid">
+                <view
+                    wx:for="{{availableShapes}}"
+                    wx:key="id"
+                    class="shape-option {{tempSelectedShapeIds.indexOf(item.id) !== -1 ? 'selected' : ''}} {{selectedShapes.length >= 6 && tempSelectedShapeIds.indexOf(item.id) === -1 ? 'disabled' : ''}}"
+                    bindtap="toggleShape"
+                    data-shape-id="{{item.id}}">
+                    <!-- 选中标识 -->
+                    <view
+                        class="selected-mark"
+                        wx:if="{{tempSelectedShapeIds.indexOf(item.id) !== -1}}">
+                        <van-icon name="success" color="white" size="12" />
+                    </view>
+                    <!-- 形状预览 -->
+                    <view class="shape-preview-box">
+                        <view class="shape-icon shape-icon-{{item.id}}"></view>
+                    </view>
+                    <text class="shape-name">{{item.name}}</text>
+                </view>
+            </view>
+
+            <view class="popup-actions">
+                <button
+                    class="confirm-btn"
+                    bindtap="confirmShapeSelection"
+                    type="primary">
+                    确认选择
+                </button>
+            </view>
+        </view>
+    </van-popup>
+
+    <!-- 颜色选择器 -->
+    <color-picker
+        show="{{showColorPicker}}"
+        currentColor="{{currentEditingColor}}"
+        bind:onClose="closeColorPicker"
+        bind:onChange="onColorChange">
+    </color-picker>
+
+    <!-- Canvas 画布 (隐藏) -->
+    <canvas type="2d" id="mainCanvas" class="hidden-canvas"></canvas>
 </view>