feat: 优化

miniprogram/config/config.ts

@@ -1,4 +1,6 @@
 type Channel = 'wechat' | 'noLogo' | 'rednoteLogo' | 'miniHeader';
-const channel: Channel = 'miniHeader';
+const channel: Channel = 'wechat';
 
 export const CHANNEL = channel;
+
+export const APP_NAME = '涂鸦丫';

miniprogram/pages/index/index.less

@@ -81,9 +81,9 @@ page {
     box-sizing: border-box;
 }
 
-#canvasContent {
+// #canvasContent {
-    border: 1px solid #666;
+//     border: 1px solid #666;
-}
+// }
 
 .btn-area {
     position: fixed;

miniprogram/pages/index/index.ts

@@ -49,9 +49,7 @@ Page({
 
                     this.boxHeight = boxHeight;
                     this.boxWidth = boxWidth;
-                    setTimeout(() => {
+                    this.initCanvas(boxWidth, boxHeight);
-                        this.initCanvas(boxWidth, boxHeight);
-                    }, 500);
                 }
             })
             .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 newCards = newCharacters.map((char) => {
-            const colorIndex = index % shuffledColors.length;
+            // 获取字对应的颜色
+            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,
+        const cardList = selectedWords.map((word, index) => {
-            word,
+            const colorHex = this.getColorByWord(word);
-        }));
+            return {
+                color: colorHex || colors[index].hex,
+                word
+            };
+        });
+
         this.setData({ showSelectWordPopup: false });
         this.drawCanvas(cardList);
     },

miniprogram/service/textDrawService.ts

@@ -87,6 +87,7 @@ class TextDrawService {
         this.characters = list.map((item) => item.word || '日');
         this.clear();
         this.setPaper();
+        // @ts-ignore
         if (CHANNEL !== 'miniHeader') {
             this.drawHeader();
         } else {
@@ -232,6 +233,7 @@ class TextDrawService {
             );
         });
 
+        // @ts-ignore
         this.currentY = CHANNEL === 'miniHeader' ? 522 : 612; // 计算分割线的Y坐标，距离示例图20px
         this.drawLine(this.currentY);
     }
@@ -241,6 +243,7 @@ class TextDrawService {
         if (characters.length <= 0) return;
 
         const len = characters.length;
+        // @ts-ignore
         const rows = CHANNEL === 'miniHeader' ? 9 : 8;
         const radius = 80;
         const fontSize = 72;