feat: AI 修改图形打印页
This commit is contained in:
@@ -5,88 +5,65 @@
|
||||
<text class="subtitle">为小朋友制作涂色练习页</text>
|
||||
</view>
|
||||
|
||||
<!-- 形状选择区域 -->
|
||||
<!-- 选择形状按钮 -->
|
||||
<view class="section">
|
||||
<view class="section-title">选择形状</view>
|
||||
<view class="shape-selector">
|
||||
<view
|
||||
wx:for="{{availableShapes}}"
|
||||
wx:key="id"
|
||||
class="shape-option {{currentShapeType === item.id ? 'active' : ''}}"
|
||||
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
|
||||
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}})
|
||||
<button class="clear-btn" bindtap="clearShapes" size="mini">
|
||||
清空
|
||||
</button>
|
||||
</view>
|
||||
<view class="selected-shapes">
|
||||
<view class="section-title"
|
||||
>已选择的形状 ({{selectedShapes.length}})</view
|
||||
>
|
||||
<view class="shape-cards-container">
|
||||
<view
|
||||
wx:for="{{selectedShapes}}"
|
||||
wx:key="id"
|
||||
class="selected-shape"
|
||||
data-index="{{index}}"
|
||||
bindlongpress="removeShape">
|
||||
class="shape-card"
|
||||
bindtap="openColorPicker"
|
||||
data-index="{{index}}">
|
||||
<!-- 删除按钮 -->
|
||||
<view
|
||||
class="shape-preview"
|
||||
style="background-color: {{item.color}}"></view>
|
||||
<view class="shape-details">
|
||||
<text class="shape-info">{{item.name}}</text>
|
||||
<text class="color-info">{{item.color}}</text>
|
||||
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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user