feat:添加随机生成和清空功能

miniprogram/assets/fonts/iconfont.json

@@ -6,32 +6,46 @@
   "description": "",
   "glyphs": [
     {
-      "icon_id": "5374234",
+      "icon_id": "29525216",
-      "name": "guide-5",
+      "name": "moon",
-      "font_class": "guide-5",
+      "font_class": "moon",
-      "unicode": "e670",
+      "unicode": "e92b",
-      "unicode_decimal": 58992
+      "unicode_decimal": 59691
     },
     {
-      "icon_id": "24036363",
+      "icon_id": "35089838",
-      "name": "guide-4",
+      "name": "evernote",
-      "font_class": "guide-4",
+      "font_class": "evernote",
-      "unicode": "e693",
+      "unicode": "e6ea",
-      "unicode_decimal": 59027
+      "unicode_decimal": 59114
     },
     {
-      "icon_id": "37120878",
+      "icon_id": "12578929",
-      "name": "guide-3",
+      "name": "refresh2",
-      "font_class": "guide-3",
+      "font_class": "refresh2",
-      "unicode": "e622",
+      "unicode": "e6e3",
-      "unicode_decimal": 58914
+      "unicode_decimal": 59107
     },
     {
-      "icon_id": "39563133",
+      "icon_id": "18441414",
-      "name": "guide-2",
+      "name": "sun",
-      "font_class": "guide-2",
+      "font_class": "sun",
-      "unicode": "e6c4",
+      "unicode": "e712",
-      "unicode_decimal": 59076
+      "unicode_decimal": 59154
+    },
+    {
+      "icon_id": "21937756",
+      "name": "refresh",
+      "font_class": "refresh",
+      "unicode": "e6c2",
+      "unicode_decimal": 59074
+    },
+    {
+      "icon_id": "27107465",
+      "name": "clear",
+      "font_class": "clear",
+      "unicode": "e63b",
+      "unicode_decimal": 58939
     },
     {
       "icon_id": "41982380",

miniprogram/components/word-input/word-input.ts

@@ -5,7 +5,16 @@ Component({
     /**
      * 组件的属性列表
      */
-    properties: {},
+    properties: {
+        width: {
+            type: String,
+            value: '', // 按钮宽度
+        },
+        placeholder: {
+            type: String,
+            value: '请输入文字',
+        },
+    },
     /**
      * 组件的初始数据
      */

miniprogram/components/word-input/word-input.wxml

@@ -1,4 +1,6 @@
-<view class="word-input-container">
+<view
+    class="word-input-container"
+    style="{{width ? 'width:' + width + ';' : ''}}">
     <van-icon
         class-prefix="toy-icon"
         name="translate"
@@ -7,6 +9,6 @@
     <input
         class="word-input"
         type="text"
-        placeholder="请输入小朋友喜欢的文字"
+        placeholder="{{placeholder}}"
         bindconfirm="onConfirm" />
 </view>

miniprogram/pages/index/index.less

@@ -7,10 +7,15 @@ page {
     padding: 0 24rpx;
     box-sizing: border-box;
 
-    .wrapper {
+    .empty {
+        height: 190rpx;
+    }
+}
+
+.setting-wrapper {
     background-color: #ffffff;
     border-radius: 20rpx;
-        padding: 30rpx;
+    padding: 24rpx;
     box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
     margin: 30rpx 0;
     display: flex;
@@ -27,15 +32,9 @@ page {
     &.hidden {
         visibility: hidden;
     }
-    }
-
-    // #previewWrapper {
-    //     margin-bottom: 200rpx;
-    // }
 
     .word-card-box {
         margin-top: 30rpx;
-    }
 
         .word-card-list {
             display: flex;
@@ -43,12 +42,29 @@ page {
             justify-content: space-between;
             margin-bottom: 24rpx;
         }
+    }
 
-    .empty {
+    .word-input-box {
-        height: 190rpx;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .operation-box {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
     }
 }
 
+
+.operation-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+
 .canvas-wrapper {
     margin-top: 20rpx;
     width: 100%;
@@ -74,98 +90,3 @@ page {
     padding-top: 24rpx;
     box-sizing: border-box;
 }
-
-
-
-/* .btn-green {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 86rpx;
-    width: 680rpx;
-    border-radius: 18rpx;
-    background: rgba(147, 211, 51, 1);
-    box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 1);
-    font-size: 32rpx;
-    font-weight: bold;
-    color: #fff;
-    margin-top: 24rpx;
-
-    .btn-text {
-        margin-left: 24rpx;
-    }
-
-    &.disabled {
-        background: rgba(147, 211, 51, 0.5);
-        box-shadow: 0px 10rpx 4rpx rgba(121, 185, 21, 0.5);
-    }
-}
- */
-
-/* .color-picker-popup {
-    border-radius: 20rpx;
-
-    .color-picker-container {
-        width: 642rpx;
-        // height: 876rpx;
-        background-color: #fff;
-        border-radius: 20rpx;
-        box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
-        display: flex;
-        flex-direction: column;
-        padding: 36rpx 36rpx;
-        box-sizing: border-box;
-        align-items: center;
-
-        .color-picker-title {
-            font-size: 32rpx;
-            color: #141414;
-            font-weight: bold;
-            margin-bottom: 30rpx;
-        }
-
-        .color-options-title {
-            width: 100%;
-            height: 1rpx;
-            position: relative;
-            padding: 20rpx 0;
-
-            .color-options-title-text {
-                position: absolute;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                top: 50%;
-                font-size: 28rpx;
-                color: #666;
-                padding: 0 20rpx;
-                background-color: #fff;
-            }
-
-            .color-options-title-line {
-                margin: 0 14rpx;
-                height: 1rpx;
-                background-color: #999;
-            }
-        }
-
-        .color-options {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-            padding: 20rpx 0;
-
-            .color-option {
-                width: 60rpx;
-                height: 60rpx;
-                border-radius: 6rpx;
-                margin: 14rpx;
-                display: inline-block;
-                cursor: pointer;
-                border: 1rpx solid #ccc;
-                box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
-            }
-        }
-    }
-} */

miniprogram/pages/index/index.ts

@@ -1,4 +1,5 @@
 import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
+import { WORDS } from '../../constants/words';
 import TextDrawService from '../../service/textDrawService';
 
 Page({
@@ -82,13 +83,15 @@ Page({
         updatedCardList?: Array<{ color: string; word: string }>,
         callback: () => void = () => { },
     ) {
-        if (updatedCardList && updatedCardList.length >= 0) {
+        if (updatedCardList) {
-            this.setData({ cardList: updatedCardList }, callback);
+            this.setData({ cardList: updatedCardList }, () => {
+                this.textDrawService?.draw(updatedCardList!);
+                callback();
+            });
         } else {
             updatedCardList = this.data.cardList;
-        }
-
             this.textDrawService?.draw(updatedCardList);
+        }
     },
 
     tapCard(e: WechatMiniprogram.TouchEvent) {
@@ -247,4 +250,42 @@ Page({
             query: '/pages/index/index',
         };
     },
+
+    clearCardList() {
+        this.drawCanvas([]);
+    },
+
+    // 随机生成
+    refreshCardList() {
+        // 获取前4个分类的所有文字
+        const allWords = WORDS.slice(0, 4).reduce((acc, category) => {
+            return acc.concat(category.words);
+        }, [] as string[]);
+
+        // 随机获取6个不重复的文字
+        const selectedWords: string[] = [];
+        while (selectedWords.length < 6) {
+            const randomWord = allWords[Math.floor(Math.random() * allWords.length)];
+            if (!selectedWords.includes(randomWord)) {
+                selectedWords.push(randomWord);
+            }
+        }
+
+        // 随机获取6个不重复的颜色
+        const colors = [...WATER_COLORS.basic12];
+        const selectedColors: string[] = [];
+        while (selectedColors.length < 6) {
+            const randomIndex = Math.floor(Math.random() * colors.length);
+            const color = colors.splice(randomIndex, 1)[0];
+            selectedColors.push(color.hex);
+        }
+
+        // 组合文字和颜色
+        const cardList = selectedWords.map((word, index) => ({
+            color: selectedColors[index],
+            word
+        }));
+        console.log('cardList:', cardList);
+        this.drawCanvas(cardList);
+    }
 });

miniprogram/pages/index/index.wxml

@@ -1,7 +1,16 @@
 <view class="page-container">
-    <view class="wrapper">
+    <view class="setting-wrapper">
         <text class="wrapper-title">自定义涂鸦卡</text>
-        <word-input bind:onConfirm="onConfirmInput" />
+        <view class="word-input-box">
+            <word-input bind:onConfirm="onConfirmInput" width="420rpx" />
+            <toy-button
+                type="green"
+                bind:click="openSelectWordPopup"
+                width="220rpx">
+                选择文字
+            </toy-button>
+        </view>
+
         <view class="word-card-box">
             <block
                 wx:for="{{cardList}}"
@@ -24,6 +33,25 @@
                 </view>
             </block>
         </view>
+        <view class="operation-box">
+            <toy-button
+                type="primary"
+                bind:click="refreshCardList"
+                width="420rpx"
+                icon="refresh"
+                icon-class-prefix="toy-icon">
+                随机生成
+            </toy-button>
+            <toy-button
+                disabled="{{cardList.length <= 0}}"
+                type="green"
+                bind:click="clearCardList"
+                width="220rpx"
+                icon="clear"
+                icon-class-prefix="toy-icon">
+                清空
+            </toy-button>
+        </view>
     </view>
     <view
         id="previewWrapper"

miniprogram/ui/button/button.less

@@ -20,6 +20,7 @@ wx-button:not([size=mini]) {
     font-size: @button-default-font-size;
     color: @button-default-color;
     padding: 0 44rpx;
+    font-weight: normal;
     // width: auto !important;
     // transition: all 0.04s;
 
@@ -90,7 +91,7 @@ wx-button:not([size=mini]) {
 
     .loading-class,
     &__icon {
-        margin-right: 24rpx;
+        margin-right: 18rpx;
     }
 
 }