feat:代码优化

miniprogram/constants/colors.ts

@@ -85,6 +85,40 @@ export const WATER_COLORS = {
     ],
 };
 
+/**
+ * 数字颜色映射（柔和12色）
+ * 用于数学页面的数字显示和涂色
+ */
+export const NUMBER_COLORS: Record<number, string> = {
+    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,

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"
     }
 }

miniprogram/mathPages/addition/addition.less

@@ -1,101 +1 @@
-page {
+@import '../common/mathPage.less';
-    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;
-}

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();

miniprogram/mathPages/addition/addition.wxml

@@ -11,58 +11,19 @@
                 style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
         </view>
 
-        <!-- 随机生成按钮 -->
+        <!-- 类型选择器和随机生成按钮 -->
-        <view class="random-button-area">
+        <math-type-selector
-            <view class="type-selector" bind:tap="onShowTypeSelector">
+            current-type-name="{{currentTypeName}}"
-                <text class="type-selector-text">{{currentTypeName}}</text>
+            type-actions="{{typeActions}}"
-                <text class="type-selector-arrow">▼</text>
-            </view>
-            <toy-button
-                class="random-button"
-                type="primary"
-                bind:click="onRandom"
-                width="100%"
-                height="80rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-        </view>
-        <van-action-sheet
-            show="{{showTypeSelector}}"
-            actions="{{typeActions}}"
             bind:select="onSelectType"
-            bind:cancel="onCloseTypeSelector"
+            bind:random="onRandom" />
-            bind:close="onCloseTypeSelector"
-            cancel-text="取消"
-            custom-class="custom-action-sheet" />
     </view>
     <view class="empty"></view>
 </view>
-<view class="bottom-btn-box">
+<math-bottom-buttons
-    <toy-button
+    disabled="{{!hasContent}}"
-        openType="share"
+    bind:share="onShareAppMessage"
-        type="green"
+    bind:export="exportToPrint" />
-        flat="{{true}}"
-        bind:click="onShareAppMessage"
-        width="220rpx"
-        height="80rpx"
-        icon="wechat"
-        icon-class-prefix="toy-icon">
-        分享
-    </toy-button>
-    <toy-button
-        type="primary"
-        flat="{{true}}"
-        bind:click="exportToPrint"
-        width="420rpx"
-        height="80rpx"
-        disabled="{{!hasContent}}"
-        icon="download"
-        icon-class-prefix="toy-icon">
-        下载打印
-    </toy-button>
-</view>
 <share-guide-popup
     show="{{showShareDialog}}"
     bind:onClose="onCloseShareDialog"

miniprogram/mathPages/common/mathPage.less

@@ -0,0 +1,104 @@
+/**
+ * 数学页面公共样式
+ */
+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;
+}

miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "toy-button": "../../../ui/button/button"
+    }
+}

miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.less

@@ -0,0 +1,16 @@
+.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;
+}

miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.ts

@@ -0,0 +1,18 @@
+Component({
+    properties: {
+        disabled: {
+            type: Boolean,
+            value: false,
+        },
+    },
+
+    methods: {
+        onShare() {
+            this.triggerEvent('share');
+        },
+
+        onExport() {
+            this.triggerEvent('export');
+        },
+    },
+});

miniprogram/mathPages/components/math-bottom-buttons/math-bottom-buttons.wxml

@@ -0,0 +1,24 @@
+<view class="bottom-btn-box">
+    <toy-button
+        openType="share"
+        type="green"
+        flat="{{true}}"
+        bind:click="onShare"
+        width="220rpx"
+        height="80rpx"
+        icon="wechat"
+        icon-class-prefix="toy-icon">
+        分享
+    </toy-button>
+    <toy-button
+        type="primary"
+        flat="{{true}}"
+        bind:click="onExport"
+        width="420rpx"
+        height="80rpx"
+        disabled="{{disabled}}"
+        icon="download"
+        icon-class-prefix="toy-icon">
+        下载打印
+    </toy-button>
+</view>

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"
+    }
+}

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;
+    }
+}

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');
+        },
+    },
+});

miniprogram/mathPages/components/math-type-selector/math-type-selector.wxml

@@ -0,0 +1,23 @@
+<view class="random-button-area">
+    <view class="type-selector" bind:tap="onShowSelector">
+        <text class="type-selector-text">{{currentTypeName}}</text>
+        <text class="type-selector-arrow">▼</text>
+    </view>
+    <toy-button
+        class="random-button"
+        type="primary"
+        bind:click="onRandom"
+        width="100%"
+        height="80rpx"
+        icon="refresh"
+        icon-class-prefix="toy-icon">
+        随机生成
+    </toy-button>
+</view>
+<van-action-sheet
+    show="{{showSelector}}"
+    actions="{{typeActions}}"
+    bind:select="onSelect"
+    bind:cancel="onClose"
+    bind:close="onClose"
+    cancel-text="取消" />

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"
     }
 }

miniprogram/mathPages/countMatch/countMatch.less

@@ -1,106 +1 @@
-page {
+@import '../common/mathPage.less';
-    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;
-}

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();

miniprogram/mathPages/countMatch/countMatch.wxml

@@ -11,58 +11,20 @@
                 style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
         </view>
 
-        <!-- 随机生成按钮 -->
+        <!-- 类型选择器和随机生成按钮 -->
-        <view class="random-button-area">
+        <math-type-selector
-            <view class="type-selector" bind:tap="onShowTypeSelector">
+            wx:if="{{showTypeSelector}}"
-                <text class="type-selector-text">{{currentTypeName}}</text>
+            current-type-name="{{currentTypeName}}"
-                <text class="type-selector-arrow">▼</text>
+            type-actions="{{typeActions}}"
-            </view>
-            <toy-button
-                class="random-button"
-                type="primary"
-                bind:click="onRandom"
-                width="100%"
-                height="80rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-        </view>
-        <van-action-sheet
-            show="{{showTypeSelector}}"
-            actions="{{typeActions}}"
             bind:select="onSelectType"
-            bind:cancel="onCloseTypeSelector"
+            bind:random="onRandom" />
-            bind:close="onCloseTypeSelector"
-            cancel-text="取消"
-            custom-class="custom-action-sheet" />
     </view>
     <view class="empty"></view>
 </view>
-<view class="bottom-btn-box">
+<math-bottom-buttons
-    <toy-button
+    disabled="{{!hasContent}}"
-        openType="share"
+    bind:share="onShareAppMessage"
-        type="green"
+    bind:export="exportToPrint" />
-        flat="{{true}}"
-        bind:click="onShareAppMessage"
-        width="220rpx"
-        height="80rpx"
-        icon="wechat"
-        icon-class-prefix="toy-icon">
-        分享
-    </toy-button>
-    <toy-button
-        type="primary"
-        flat="{{true}}"
-        bind:click="exportToPrint"
-        width="420rpx"
-        height="80rpx"
-        disabled="{{!hasContent}}"
-        icon="download"
-        icon-class-prefix="toy-icon">
-        下载打印
-    </toy-button>
-</view>
 <share-guide-popup
     show="{{showShareDialog}}"
     bind:onClose="onCloseShareDialog"

miniprogram/mathPages/numberFind/numberFind.json

@@ -6,6 +6,7 @@
     "enablePullDownRefresh": false,
     "usingComponents": {
         "toy-button": "../../ui/button/button",
-        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup"
+        "share-guide-popup": "../../components/share-guide-popup/share-guide-popup",
+        "math-bottom-buttons": "../components/math-bottom-buttons/math-bottom-buttons"
     }
 }

miniprogram/mathPages/numberFind/numberFind.less

@@ -1,53 +1,4 @@
-page {
+@import '../common/mathPage.less';
-    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;
-    }
-
-}
 
 /* 数字选择区域 */
 .number-selection-area {

miniprogram/mathPages/numberFind/numberFind.wxml

@@ -71,30 +71,10 @@
     </view>
     <view class="empty"></view>
 </view>
-<view class="bottom-btn-box">
+<math-bottom-buttons
-    <toy-button
+    disabled="{{selectedNumber <= 0}}"
-        openType="share"
+    bind:share="onShareAppMessage"
-        type="green"
+    bind:export="exportToPrint" />
-        flat="{{true}}"
-        bind:click="onShareAppMessage"
-        width="220rpx"
-        height="80rpx"
-        icon="wechat"
-        icon-class-prefix="toy-icon">
-        分享
-    </toy-button>
-    <toy-button
-        type="primary"
-        flat="{{true}}"
-        bind:click="exportToPrint"
-        width="420rpx"
-        height="80rpx"
-        disabled="{{selectedNumber <= 0}}"
-        icon="download"
-        icon-class-prefix="toy-icon">
-        下载打印
-    </toy-button>
-</view>
 <share-guide-popup
     show="{{showShareDialog}}"
     bind:onClose="onCloseShareDialog"

miniprogram/mathPages/service/countMatchContentDraw.ts

@@ -1,4 +1,5 @@
 import { getImage } from '../../utils/index';
+import { getRandomNumberColor } from '../../constants/colors';
 
 interface DrawCountMatchContentParams {
     canvas: WechatMiniprogram.Canvas;
@@ -130,8 +131,8 @@ export async function drawCountMatchContent({
             true,
         );
 
-        // 绘制数字
+        // 绘制数字（使用随机颜色）
-        ctx.fillStyle = '#000';
+        ctx.fillStyle = getRandomNumberColor();
         ctx.font = `bold ${56}px "Microsoft Yahei"`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';

miniprogram/mathPages/service/numberColorContentDraw.ts

@@ -1,21 +1,4 @@
-/**
+import { getNumberColors } from '../../constants/colors';
- * 数字颜色映射（使用基础12色）
- * 由于只有10个数字，使用全部12种颜色中的11种（跳过黑色，因为黑色不适合作为数字颜色）
- */
-const NUMBER_COLORS: Record<number, string> = {
-    1: '#ED6D50', // 柔和红色
-    2: '#F9A857', // 柔和橙色
-    3: '#FFE176', // 柔和黄色
-    4: '#B2D94B', // 柔和黄绿色
-    5: '#53D1B6', // 柔和绿色
-    6: '#6CD2EA', // 柔和青色
-    7: '#79A7ED', // 柔和蓝色
-    8: '#9C98DE', // 柔和紫色
-    9: '#F2A4C0', // 柔和粉色
-    10: '#FC9B6C', // 柔和橙红色
-    11: '#BC8F71', // 柔和棕色
-    12: '#666666', // 柔和黑灰
-};
 
 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];