diff --git a/miniprogram/components/color-picker/color-picker.ts b/miniprogram/components/color-picker/color-picker.ts index 5507698..fb9cc71 100644 --- a/miniprogram/components/color-picker/color-picker.ts +++ b/miniprogram/components/color-picker/color-picker.ts @@ -1,4 +1,4 @@ -import { WATER_COLORS } from '../../constants/index'; +import { WATER_COLORS } from '../../constants/colors'; Component({ options: {}, diff --git a/miniprogram/components/word-input/word-input.wxml b/miniprogram/components/word-input/word-input.wxml index f46f43e..595f02e 100644 --- a/miniprogram/components/word-input/word-input.wxml +++ b/miniprogram/components/word-input/word-input.wxml @@ -8,6 +8,5 @@ class="word-input" type="text" placeholder="请输入小朋友喜欢的文字" - bindconfirm="onConfirm" - maxlength="6" /> + bindconfirm="onConfirm" /> diff --git a/miniprogram/constants/index.ts b/miniprogram/constants/colors.ts similarity index 100% rename from miniprogram/constants/index.ts rename to miniprogram/constants/colors.ts diff --git a/miniprogram/constants/words.ts b/miniprogram/constants/words.ts new file mode 100644 index 0000000..f94d420 --- /dev/null +++ b/miniprogram/constants/words.ts @@ -0,0 +1,261 @@ +export const WORDS = [ + { + categoryId: 0, + icon: '🌟', + categoryName: '基础独体字', + words: [ + '人', + '口', + '手', + '上', + '下', + '日', + '月', + '水', + '火', + '山', + '大', + '小', + '天', + '土', + '木', + '中', + '个', + '工', + '王', + '车', + '儿', + '女', + '子', + '门', + '马', + '牛', + '羊', + '米', + '衣', + '白', + '田', + '石', + '雨', + '电', + '云', + '花', + '草', + '叶', + '果', + '鸟', + '虫', + '鱼', + '头', + '目', + '耳', + '足', + '心', + '力', + '立', + '正', + ], + }, + { + categoryId: 1, + icon: '🏠', + categoryName: '生活高频字', + words: [ + '爸', + '妈', + '爷', + '奶', + '哥', + '弟', + '姐', + '妹', + '书', + '包', + '尺', + '刀', + '本', + '笔', + '桌', + '灯', + '家', + '房', + '床', + '吃', + '喝', + '坐', + '走', + '跑', + '看', + '听', + '说', + '笑', + '哭', + '爱', + '好', + '有', + '来', + '去', + '开', + '关', + '里', + '外', + '多', + '少', + '红', + '黄', + '蓝', + '绿', + '白', + '黑', + '是', + '不', + '我', + '你', + ], + }, + { + categoryId: 2, + icon: '', + categoryName: '自然与动作', + words: [ + '风', + '雪', + '星', + '光', + '林', + '河', + '海', + '沙', + '树', + '苗', + '春', + '夏', + '秋', + '冬', + '东', + '南', + '西', + '北', + '飞', + '跳', + '游', + '唱', + '画', + '洗', + '买', + '卖', + '问', + '学', + '读', + '写', + '早', + '晚', + '明', + '亮', + '高', + '长', + '圆', + '方', + '快', + '乐', + '热', + '冷', + '轻', + '重', + '新', + '旧', + '和', + '同', + '会', + '要', + ], + }, + { + categoryId: 3, + icon: '', + categoryName: '数字与颜色', + words: [ + '一', + '二', + '三', + '四', + '五', + '六', + '七', + '八', + '九', + '十', + '红', + '蓝', + '绿', + '黄', + '黑', + '白', + '紫', + '橙', + '粉', + '棕', + '灰', + ], + }, + { + categoryId: 4, + icon: '☀️', + categoryName: '日字旁', + words: ['日', '明', '早', '时', '晴', '春', '星', '晨'], + }, + { + categoryId: 5, + icon: '💧', + categoryName: '三点水', + words: ['水', '江', '河', '流', '沙', '洗', '海', '汗'], + }, + { + categoryId: 6, + icon: '🐦', + categoryName: '鸟字边', + words: ['鸟', '鸡', '鸭', '鹅', '鸣', '鸽', '鸦'], + }, + { + categoryId: 7, + icon: '🐾', + categoryName: '反犬旁', + words: ['狗', '猫', '猴', '狮', '狼', '猪'], + }, + { + categoryId: 8, + icon: '🪱', + categoryName: '虫字旁', + words: ['虫', '蚁', '蝶', '蜻', '蛙', '蛇', '蜘', '蜂'], + }, + { + categoryId: 9, + icon: '🌧️', + categoryName: '雨字头', + words: ['雨', '雪', '雷', '露', '雾', '雹', '霜'], + }, + { + categoryId: 10, + icon: '🌲', + categoryName: '木字旁', + words: ['木', '林', '树', '桃', '森', '松', '桥', '枝'], + }, + { + categoryId: 11, + icon: '👄', + categoryName: '口字旁', + words: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和'], + }, + { + categoryId: 12, + icon: '🧍', + categoryName: '单人旁', + words: ['你', '他', '们', '作', '休', '住', '伙', '伴'], + }, + { + categoryId: 13, + icon: '❤️', + categoryName: '竖心旁', + words: ['心', '情', '快', '怕', '惊', '忙', '怀'], + }, +]; diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts index a6c355b..0758bbd 100644 --- a/miniprogram/pages/index/index.ts +++ b/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() { diff --git a/miniprogram/service/textDrawService.ts b/miniprogram/service/textDrawService.ts index 4777758..6ea51e7 100644 --- a/miniprogram/service/textDrawService.ts +++ b/miniprogram/service/textDrawService.ts @@ -1,5 +1,5 @@ // import { PAPER_SIZE } from './constant'; -import { PAPER_SIZE } from '../constants/index'; +import { PAPER_SIZE } from '../constants/colors'; import { getMiniCodeImage } from '../utils/index'; function calculateCircleCenters(