feat: 优化

miniprogram/pages/index/index.ts

@@ -49,9 +49,7 @@ Page({
 
                     this.boxHeight = boxHeight;
                     this.boxWidth = boxWidth;
-                    setTimeout(() => {
-                        this.initCanvas(boxWidth, boxHeight);
-                    }, 500);
+                    this.initCanvas(boxWidth, boxHeight);
                 }
             })
             .exec();
@@ -132,7 +130,6 @@ Page({
         const newCharacters: string[] = [];
         let isBeyond = false;
         for (const char of characters) {
-            // 检查字符是否是新字符且未被使用
             if (newCharacters.length >= remainingSlots) {
                 isBeyond = true;
                 break;
@@ -150,11 +147,25 @@ Page({
         }
 
         // 为新字符创建卡片
-        const newCards = newCharacters.map((char, index) => {
-            const colorIndex = index % shuffledColors.length;
+        const newCards = newCharacters.map((char) => {
+            // 获取字对应的颜色
+            const colorHex = this.getColorByWord(char);
+            let color: string;
+
+            if (colorHex && !usedColors.includes(colorHex)) {
+                // 如果有对应颜色且未被使用,使用对应颜色
+                color = colorHex;
+            } else {
+                // 否则随机选择一个可用颜色
+                const randomIndex = Math.floor(Math.random() * shuffledColors.length);
+                color = shuffledColors[randomIndex];
+                // 从可用颜色中移除已使用的颜色
+                shuffledColors.splice(randomIndex, 1);
+            }
+
             return {
                 word: char,
-                color: shuffledColors[colorIndex],
+                color: color
             };
         });
 
@@ -301,14 +312,36 @@ Page({
         });
     },
 
+    // 获取颜色字对应的16进制颜色值
+    getColorByWord(word: string): string | null {
+        const colorMap: Record<string, string> = {
+            '红': '#FF0000',
+            '蓝': '#0000FF',
+            '绿': '#00FF00',
+            '黄': '#FFFF00',
+            '黑': '#000000',
+            '白': '#FFFFFF',
+            '紫': '#800080',
+            '橙': '#FF7F00',
+            '粉': '#FF69B4',
+            '棕': '#A52A2A',
+            '灰': '#808080'
+        };
+        return colorMap[word] || null;
+    },
+
     onChangeWord(e: WechatMiniprogram.CustomEvent) {
         const selectedWords = e.detail.selectedWords as string[];
-
         const colors = [...WATER_COLORS.basic12];
-        const cardList = selectedWords.map((word, index) => ({
-            color: colors[index].hex,
-            word,
-        }));
+
+        const cardList = selectedWords.map((word, index) => {
+            const colorHex = this.getColorByWord(word);
+            return {
+                color: colorHex || colors[index].hex,
+                word
+            };
+        });
+
         this.setData({ showSelectWordPopup: false });
         this.drawCanvas(cardList);
     },