feat:输入优化、文字分类

miniprogram/pages/index/index.ts

@@ -1,4 +1,4 @@
-import { WATER_COLORS, PAPER_SIZE } from '../../constants/index';
+import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors';
 import TextDrawService from '../../service/textDrawService';
 
 Page({
@@ -20,19 +20,19 @@ Page({
         const hasShowIntroduction =
             wx.getStorageSync('hasShowIntroduction') || false;
 
-        // if (!hasShowIntroduction) {
-        this.setData({
-            cardList: [
-                { color: '#FF0000', word: '涂' },
-                { color: '#00FF00', word: '欢' },
-                { color: '#FF7F00', word: '鸦' },
-                { color: '#00FFFF', word: '迎' },
-                { color: '#FFFF00', word: '丫' },
-                { color: '#8A2BE2', word: '你' },
-            ],
-            showIntroductionPopup: true,
-        });
-        // }
+        if (!hasShowIntroduction) {
+            this.setData({
+                cardList: [
+                    { color: '#FF0000', word: '涂' },
+                    { color: '#00FF00', word: '欢' },
+                    { color: '#FF7F00', word: '鸦' },
+                    { color: '#00FFFF', word: '迎' },
+                    { color: '#FFFF00', word: '丫' },
+                    { color: '#8A2BE2', word: '你' },
+                ],
+                showIntroductionPopup: true,
+            });
+        }
     },
 
     onReady() {
@@ -82,7 +82,7 @@ Page({
         updatedCardList?: Array<{ color: string; word: string }>,
         callback: () => void = () => {},
     ) {
-        if (updatedCardList && updatedCardList.length > 0) {
+        if (updatedCardList && updatedCardList.length >= 0) {
             this.setData({ cardList: updatedCardList }, callback);
         } else {
             updatedCardList = this.data.cardList;
@@ -97,15 +97,63 @@ Page({
     },
 
     onConfirmInput(e: WechatMiniprogram.Input) {
+        const { cardList } = this.data;
         const { value } = e.detail;
         const characters = value.split('');
-        const shuffledColors = [...WATER_COLORS.extended24].sort(
+        // 计算剩余空间
+        const remainingSlots = 6 - cardList.length;
+        if (remainingSlots <= 0) {
+            wx.showToast({
+                title: '最多只能添加6个字哦！',
+                icon: 'none',
+                duration: 2000,
+            });
+            return;
+        }
+
+        // 准备颜色数组
+        const allColors = WATER_COLORS.basic12.map((color) => color.hex);
+        const usedColors = cardList.map((item) => item.color);
+        const usedWords = cardList.map((item) => item.word);
+
+        const availableColors = allColors.filter(
+            (color) => !usedColors.includes(color),
+        );
+        const shuffledColors = [...availableColors].sort(
             () => Math.random() - 0.5,
         );
-        const updatedCardList = characters.map((char, index) => ({
-            color: shuffledColors[index % shuffledColors.length].hex,
-            word: char,
-        }));
+
+        const newCharacters: string[] = [];
+        let isBeyond = false;
+        for (const char of characters) {
+            // 检查字符是否是新字符且未被使用
+            if (newCharacters.length >= remainingSlots) {
+                isBeyond = true;
+                break;
+            }
+            if (!usedWords.includes(char) && !newCharacters.includes(char)) {
+                newCharacters.push(char);
+            }
+        }
+        if (isBeyond) {
+            wx.showToast({
+                title: '最多只能添加6个字，多余的字为被添加哦！',
+                icon: 'none',
+                duration: 2000,
+            });
+        }
+
+        // 为新字符创建卡片
+        const newCards = newCharacters.map((char, index) => {
+            const colorIndex = index % shuffledColors.length;
+            return {
+                word: char,
+                color: shuffledColors[colorIndex],
+            };
+        });
+
+        // 合并新旧卡片
+        const updatedCardList = [...cardList, ...newCards];
         this.drawCanvas(updatedCardList);
     },
 
@@ -113,7 +161,6 @@ Page({
         const { key, word } = e.detail;
         const { cardList } = this.data;
         const updatedCardList = cardList.filter((_, index) => index !== key);
-
         this.drawCanvas(updatedCardList, () => {
             wx.showToast({
                 title: `已删除 "${word}"`,
@@ -172,10 +219,15 @@ Page({
         const { color } = e.detail;
         const { currentKey, cardList } = this.data;
         cardList[currentKey].color = color;
-        this.setData({
-            showColorPopup: false,
-            cardList,
-        });
+        this.setData(
+            {
+                showColorPopup: false,
+                cardList,
+            },
+            () => {
+                this.drawCanvas();
+            },
+        );
     },
 
     onCloseIntroductionPopup() {