From c8788669c715aa7627cee632fbd2bd45b6edbce7 Mon Sep 17 00:00:00 2001 From: R524809 Date: Thu, 4 Dec 2025 17:26:04 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/constants/colors.ts | 34 ++++++ miniprogram/mathPages/addition/addition.json | 4 +- miniprogram/mathPages/addition/addition.less | 102 +---------------- miniprogram/mathPages/addition/addition.ts | 12 -- miniprogram/mathPages/addition/addition.wxml | 57 ++-------- miniprogram/mathPages/common/mathPage.less | 104 +++++++++++++++++ .../math-bottom-buttons.json | 6 + .../math-bottom-buttons.less | 16 +++ .../math-bottom-buttons.ts | 18 +++ .../math-bottom-buttons.wxml | 24 ++++ .../math-type-selector.json | 7 ++ .../math-type-selector.less | 33 ++++++ .../math-type-selector/math-type-selector.ts | 36 ++++++ .../math-type-selector.wxml | 23 ++++ .../mathPages/countMatch/countMatch.json | 4 +- .../mathPages/countMatch/countMatch.less | 107 +----------------- .../mathPages/countMatch/countMatch.ts | 14 +-- .../mathPages/countMatch/countMatch.wxml | 58 ++-------- .../mathPages/numberFind/numberFind.json | 3 +- .../mathPages/numberFind/numberFind.less | 51 +-------- .../mathPages/numberFind/numberFind.wxml | 28 +---- .../service/countMatchContentDraw.ts | 5 +- .../service/numberColorContentDraw.ts | 21 +--- 23 files changed, 339 insertions(+), 428 deletions(-) create mode 100644 miniprogram/mathPages/common/mathPage.less create mode 100644 miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.json create mode 100644 miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.less create mode 100644 miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.ts create mode 100644 miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.wxml create mode 100644 miniprogram/mathPages/components/math-type-selector/math-type-selector.json create mode 100644 miniprogram/mathPages/components/math-type-selector/math-type-selector.less create mode 100644 miniprogram/mathPages/components/math-type-selector/math-type-selector.ts create mode 100644 miniprogram/mathPages/components/math-type-selector/math-type-selector.wxml diff --git a/miniprogram/constants/colors.ts b/miniprogram/constants/colors.ts index cd0689c..c31e12e 100644 --- a/miniprogram/constants/colors.ts +++ b/miniprogram/constants/colors.ts @@ -85,6 +85,40 @@ export const WATER_COLORS = { ], }; +/** + * 数字颜色映射（柔和12色） + * 用于数学页面的数字显示和涂色 + */ +export const NUMBER_COLORS: Record = { + 1: '#ED6D50', // 柔和红色 + 2: '#F9A857', // 柔和橙色 + 3: '#FFE176', // 柔和黄色 + 4: '#B2D94B', // 柔和黄绿色 + 5: '#53D1B6', // 柔和绿色 + 6: '#6CD2EA', // 柔和青色 + 7: '#79A7ED', // 柔和蓝色 + 8: '#9C98DE', // 柔和紫色 + 9: '#F2A4C0', // 柔和粉色 + 10: '#FC9B6C', // 柔和橙红色 + 11: '#BC8F71', // 柔和棕色 + 12: '#666666', // 柔和黑灰 +}; + +/** + * 获取所有数字颜色数组 + */ +export function getNumberColors(): string[] { + return Object.values(NUMBER_COLORS); +} + +/** + * 随机获取一个数字颜色 + */ +export function getRandomNumberColor(): string { + const colors = getNumberColors(); + return colors[Math.floor(Math.random() * colors.length)]; +} + export const PAPER_SIZE = { A4: { // width: 2480, diff --git a/miniprogram/mathPages/addition/addition.json b/miniprogram/mathPages/addition/addition.json index a78fa9d..ca15e45 100644 --- a/miniprogram/mathPages/addition/addition.json +++ b/miniprogram/mathPages/addition/addition.json @@ -5,8 +5,8 @@ "backgroundColor": "#F6F6F6", "enablePullDownRefresh": false, "usingComponents": { - "toy-button": "../../ui/button/button", "share-guide-popup": "../../components/share-guide-popup/share-guide-popup", - "van-action-sheet": "../../miniprogram_npm/@vant/weapp/action-sheet/index" + "math-type-selector": "../components/math-type-selector/math-type-selector", + "math-bottom-buttons": "../components/math-bottom-buttons/math-bottom-buttons" } } diff --git a/miniprogram/mathPages/addition/addition.less b/miniprogram/mathPages/addition/addition.less index b628a25..12602d2 100644 --- a/miniprogram/mathPages/addition/addition.less +++ b/miniprogram/mathPages/addition/addition.less @@ -1,101 +1 @@ -page { - background-color: #f6f6f6; -} - -.page-container { - background-color: #f6f6f6; - padding: 0 24rpx; - box-sizing: border-box; - padding-bottom: 160rpx; // 为底部按钮预留空间 - - .empty { - height: 50rpx; - } -} - -.wrapper { - background-color: #ffffff; - border-radius: 20rpx; - padding: 36rpx 24rpx; - box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15); - margin: 30rpx 0; - display: flex; - flex-direction: column; - - .wrapper-title { - font-size: 32rpx; - color: #141414; - margin-bottom: 36rpx; - font-weight: bold; - text-align: center; - } - - .canvas-wrapper { - display: flex; - justify-content: center; - align-items: center; - min-height: 400rpx; - background: #f8f9fa; - border-radius: 12rpx; - border: 2rpx dashed #dee2e6; - } - - .canvas-content { - max-width: 100%; - border-radius: 8rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); - overflow: hidden; - } - - .random-button-area { - margin-top: 40rpx; - display: flex; - align-items: center; - gap: 20rpx; - - .type-selector { - flex: 1; // 占据剩余空间 - height: 80rpx; - background-color: #fff; - border: 2rpx solid #e5e5e5; - border-radius: 16rpx; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 24rpx; - box-sizing: border-box; - - .type-selector-text { - font-size: 28rpx; - color: #333; - } - - .type-selector-arrow { - font-size: 20rpx; - color: #999; - } - } - - .random-button { - flex: 2; - } - } -} - -/* 底部按钮区域 */ -.bottom-btn-box { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - height: 180rpx; - display: flex; - justify-content: space-between; - background-color: #fff; - box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15); - padding: 24rpx; - padding-bottom: env(safe-area-inset-bottom); - box-sizing: border-box; - border-radius: 16rpx 16rpx 0 0; - z-index: 2; -} \ No newline at end of file +@import '../common/mathPage.less'; \ No newline at end of file diff --git a/miniprogram/mathPages/addition/addition.ts b/miniprogram/mathPages/addition/addition.ts index 3aa4a58..049d95c 100644 --- a/miniprogram/mathPages/addition/addition.ts +++ b/miniprogram/mathPages/addition/addition.ts @@ -27,7 +27,6 @@ Page({ functionId: '', hasContent: false, showShareDialog: false, - showTypeSelector: false, currentType: 'addition-5', // 'addition-5', 'addition-10', 'subtraction-10', 'addition-subtraction-10' currentTypeName: '5以内加法', typeActions: [ @@ -274,23 +273,12 @@ Page({ } }, - /** 显示类型选择器 */ - onShowTypeSelector() { - this.setData({ showTypeSelector: true }); - }, - - /** 关闭类型选择器 */ - onCloseTypeSelector() { - this.setData({ showTypeSelector: false }); - }, - /** 选择类型 */ onSelectType(event: any) { const { name, value } = event.detail; this.setData({ currentType: value, currentTypeName: name, - showTypeSelector: false, }); // 重新生成数据 this.onRandom(); diff --git a/miniprogram/mathPages/addition/addition.wxml b/miniprogram/mathPages/addition/addition.wxml index 604a209..3dcfa5d 100644 --- a/miniprogram/mathPages/addition/addition.wxml +++ b/miniprogram/mathPages/addition/addition.wxml @@ -11,58 +11,19 @@ style="width:{{boxWidth}}px;height:{{boxHeight}}px" /> - - - - {{currentTypeName}} - ▼ - - - 随机生成 - - - + + bind:random="onRandom" /> - - - 分享 - - - 下载打印 - - + + + 分享 + + + 下载打印 + + diff --git a/miniprogram/mathPages/components/math-type-selector/math-type-selector.json b/miniprogram/mathPages/components/math-type-selector/math-type-selector.json new file mode 100644 index 0000000..31c75f2 --- /dev/null +++ b/miniprogram/mathPages/components/math-type-selector/math-type-selector.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "toy-button": "../../../ui/button/button", + "van-action-sheet": "../../../miniprogram_npm/@vant/weapp/action-sheet/index" + } +} diff --git a/miniprogram/mathPages/components/math-type-selector/math-type-selector.less b/miniprogram/mathPages/components/math-type-selector/math-type-selector.less new file mode 100644 index 0000000..add46dc --- /dev/null +++ b/miniprogram/mathPages/components/math-type-selector/math-type-selector.less @@ -0,0 +1,33 @@ +.random-button-area { + margin-top: 40rpx; + display: flex; + align-items: center; + gap: 20rpx; + + .type-selector { + flex: 1; // 占据剩余空间 + height: 80rpx; + background-color: #fff; + border: 2rpx solid #e5e5e5; + border-radius: 16rpx; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 24rpx; + box-sizing: border-box; + + .type-selector-text { + font-size: 28rpx; + color: #333; + } + + .type-selector-arrow { + font-size: 20rpx; + color: #999; + } + } + + .random-button { + flex: 2; + } +} \ No newline at end of file diff --git a/miniprogram/mathPages/components/math-type-selector/math-type-selector.ts b/miniprogram/mathPages/components/math-type-selector/math-type-selector.ts new file mode 100644 index 0000000..f57d484 --- /dev/null +++ b/miniprogram/mathPages/components/math-type-selector/math-type-selector.ts @@ -0,0 +1,36 @@ +Component({ + properties: { + currentTypeName: { + type: String, + value: '', + }, + typeActions: { + type: Array, + value: [], + }, + }, + + data: { + showSelector: false, + }, + + methods: { + onShowSelector() { + this.setData({ showSelector: true }); + }, + + onClose() { + this.setData({ showSelector: false }); + }, + + onSelect(event: any) { + const { name, value } = event.detail; + this.setData({ showSelector: false }); + this.triggerEvent('select', { name, value }); + }, + + onRandom() { + this.triggerEvent('random'); + }, + }, +}); diff --git a/miniprogram/mathPages/components/math-type-selector/math-type-selector.wxml b/miniprogram/mathPages/components/math-type-selector/math-type-selector.wxml new file mode 100644 index 0000000..a557f75 --- /dev/null +++ b/miniprogram/mathPages/components/math-type-selector/math-type-selector.wxml @@ -0,0 +1,23 @@ + + + {{currentTypeName}} + ▼ + + + 随机生成 + + + diff --git a/miniprogram/mathPages/countMatch/countMatch.json b/miniprogram/mathPages/countMatch/countMatch.json index d0f0279..b1bead2 100644 --- a/miniprogram/mathPages/countMatch/countMatch.json +++ b/miniprogram/mathPages/countMatch/countMatch.json @@ -5,8 +5,8 @@ "backgroundColor": "#F6F6F6", "enablePullDownRefresh": false, "usingComponents": { - "toy-button": "../../ui/button/button", "share-guide-popup": "../../components/share-guide-popup/share-guide-popup", - "van-action-sheet": "../../miniprogram_npm/@vant/weapp/action-sheet/index" + "math-type-selector": "../components/math-type-selector/math-type-selector", + "math-bottom-buttons": "../components/math-bottom-buttons/math-bottom-buttons" } } diff --git a/miniprogram/mathPages/countMatch/countMatch.less b/miniprogram/mathPages/countMatch/countMatch.less index c0ad96f..12602d2 100644 --- a/miniprogram/mathPages/countMatch/countMatch.less +++ b/miniprogram/mathPages/countMatch/countMatch.less @@ -1,106 +1 @@ -page { - background-color: #f6f6f6; -} - -.page-container { - background-color: #f6f6f6; - padding: 0 24rpx; - box-sizing: border-box; - padding-bottom: 160rpx; // 为底部按钮预留空间 - - .empty { - height: 50rpx; - } -} - -.wrapper { - background-color: #ffffff; - border-radius: 20rpx; - padding: 36rpx 24rpx; - box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15); - margin: 30rpx 0; - display: flex; - flex-direction: column; - - .wrapper-title { - font-size: 32rpx; - color: #141414; - margin-bottom: 36rpx; - font-weight: bold; - text-align: center; - } - - .canvas-wrapper { - display: flex; - justify-content: center; - align-items: center; - min-height: 400rpx; - background: #f8f9fa; - border-radius: 12rpx; - border: 2rpx dashed #dee2e6; - } - - .canvas-content { - max-width: 100%; - border-radius: 8rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); - overflow: hidden; - } - - .random-button-area { - margin-top: 40rpx; - display: flex; - align-items: center; - gap: 20rpx; - - .type-selector { - flex: 1; // 占据剩余空间 - height: 80rpx; - background-color: #fff; - border: 2rpx solid #e5e5e5; - border-radius: 16rpx; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 24rpx; - box-sizing: border-box; - - .type-selector-text { - font-size: 28rpx; - color: #333; - } - - .type-selector-arrow { - font-size: 20rpx; - color: #999; - } - } - - .random-button { - flex: 2; - } - } -} - -// /* ActionSheet 自定义样式 */ -// .custom-action-sheet { -// border-radius: 16rpx 16rpx 0 0 !important; -// } - -/* 底部按钮区域 */ -.bottom-btn-box { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - height: 180rpx; - display: flex; - justify-content: space-between; - background-color: #fff; - box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15); - padding: 24rpx; - padding-bottom: env(safe-area-inset-bottom); - box-sizing: border-box; - border-radius: 16rpx 16rpx 0 0; - z-index: 2; -} \ No newline at end of file +@import '../common/mathPage.less'; \ No newline at end of file diff --git a/miniprogram/mathPages/countMatch/countMatch.ts b/miniprogram/mathPages/countMatch/countMatch.ts index 02744f0..74c4ad0 100644 --- a/miniprogram/mathPages/countMatch/countMatch.ts +++ b/miniprogram/mathPages/countMatch/countMatch.ts @@ -27,7 +27,7 @@ Page({ functionId: '', hasContent: false, showShareDialog: false, - showTypeSelector: false, + showTypeSelector: true, // 控制是否显示类型选择器 currentType: 'twelve-animals', // 'twelve-animals' 或 'fruits' 或 'circle' 或 'caterpillar' currentTypeName: '十二生肖', typeActions: [ @@ -266,24 +266,12 @@ Page({ } }, - /** 显示类型选择器 */ - onShowTypeSelector() { - this.setData({ showTypeSelector: true }); - }, - - /** 关闭类型选择器 */ - onCloseTypeSelector() { - console.log('onCloseTypeSelector'); - this.setData({ showTypeSelector: false }); - }, - /** 选择类型 */ onSelectType(event: any) { const { name, value } = event.detail; this.setData({ currentType: value, currentTypeName: name, - showTypeSelector: false, }); // 重新生成数据 this.onRandom(); diff --git a/miniprogram/mathPages/countMatch/countMatch.wxml b/miniprogram/mathPages/countMatch/countMatch.wxml index 604a209..15a8a9c 100644 --- a/miniprogram/mathPages/countMatch/countMatch.wxml +++ b/miniprogram/mathPages/countMatch/countMatch.wxml @@ -11,58 +11,20 @@ style="width:{{boxWidth}}px;height:{{boxHeight}}px" /> - - - - {{currentTypeName}} - ▼ - - - 随机生成 - - - + + bind:random="onRandom" /> - - - 分享 - - - 下载打印 - - + - - - 分享 - - - 下载打印 - - + = { - 1: '#ED6D50', // 柔和红色 - 2: '#F9A857', // 柔和橙色 - 3: '#FFE176', // 柔和黄色 - 4: '#B2D94B', // 柔和黄绿色 - 5: '#53D1B6', // 柔和绿色 - 6: '#6CD2EA', // 柔和青色 - 7: '#79A7ED', // 柔和蓝色 - 8: '#9C98DE', // 柔和紫色 - 9: '#F2A4C0', // 柔和粉色 - 10: '#FC9B6C', // 柔和橙红色 - 11: '#BC8F71', // 柔和棕色 - 12: '#666666', // 柔和黑灰 -}; +import { getNumberColors } from '../../constants/colors'; interface DrawNumberColorContentParams { canvas: WechatMiniprogram.Canvas; @@ -366,7 +349,7 @@ export async function drawNumberColorContent({ const startYPos = startY + 20; // 获取所有可用颜色值 - const availableColors = Object.values(NUMBER_COLORS); + const availableColors = getNumberColors(); // 为每一行随机分配颜色，确保不重复 const shuffledColors = [...availableColors];