doodle-mini/miniprogram/demoPages/shapePrint/index.wxml

<view class="container">
    <!-- 标题 -->
    <view class="header">
        <text class="title">形状涂色练习生成器</text>
        <text class="subtitle">为小朋友制作涂色练习页</text>
    </view>

    <!-- 选择形状按钮 -->
    <view class="section">
        <button
            class="select-shapes-btn"
            bindtap="openShapeSelector"
            type="primary">
            <van-icon name="add-o" color="white" size="20" />
            <text class="btn-text">选择形状 ({{selectedShapes.length}}/6)</text>
        </button>
    </view>

    <!-- 已选择的形状卡片 -->
    <view class="section" wx:if="{{selectedShapes.length > 0}}">
        <view class="section-title"
            >已选择的形状 ({{selectedShapes.length}})</view
        >
        <view class="shape-cards-container">
            <view
                wx:for="{{selectedShapes}}"
                wx:key="id"
                class="shape-card"
                bindtap="openColorPicker"
                data-index="{{index}}">
                <!-- 删除按钮 -->
                <view
                    class="delete-btn"
                    catchtap="deleteShape"
                    data-index="{{index}}">
                    <van-icon name="close" color="#ff4757" size="16" />
                </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>
            </view>
        </view>
    </view>

    <!-- 设置区域 -->
    <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">
                <label
                    wx:for="{{backgrounds}}"
                    wx:key="value"
                    class="bg-option">
                    <radio
                        value="{{item.value}}"
                        checked="{{bgColor === item.value}}"
                        color="#1976d2" />
                    <text>{{item.name}}</text>
                </label>
            </radio-group>
        </view>
    </view>

    <!-- 生成按钮 -->
    <view class="section" wx:if="{{selectedShapes.length > 0}}">
        <button
            class="generate-btn"
            bindtap="generateImage"
            type="primary"
            loading="{{isGenerating}}"
            disabled="{{selectedShapes.length === 0}}">
            {{isGenerating ? '生成中...' : '生成练习页'}}
        </button>

        <button
            wx:if="{{generatedImage}}"
            class="save-btn"
            bindtap="saveToAlbum"
            type="warn">
            保存到相册
        </button>
    </view>

    <!-- 预览生成的图片 -->
    <view class="section" wx:if="{{generatedImage}}">
        <view class="section-title">生成的练习页</view>
        <image
            src="{{generatedImage}}"
            class="preview-image"
            mode="aspectFit"
            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>