From c21ac9e9351713e677653b114b84b37c03589ca6 Mon Sep 17 00:00:00 2001 From: R524809 Date: Sat, 9 May 2026 09:56:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B6=82=E8=89=B2=E8=AF=86=E5=AD=97?= =?UTF-8?q?=E5=AE=8C=E5=96=84=E3=80=81=E6=89=BE=E5=AD=97=E6=B6=82=E8=89=B2?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- miniprogram/app.json | 1 - .../shared/draw}/drawServiceFactory.ts | 0 .../shared/draw}/findWordDrawService.ts | 2 +- .../shared/draw}/findWordTemplate.ts | 0 .../shared/draw}/textDrawService.ts | 2 +- .../wordColoring/wordColoring.config.ts | 8 +- .../wordColoring/wordColoring.json | 4 +- .../chinesePages/wordColoring/wordColoring.ts | 130 +++-- .../color-picker/color-picker.json | 0 .../color-picker/color-picker.less | 0 .../color-picker/color-picker.ts | 0 .../color-picker/color-picker.wxml | 0 .../word-picker/word-picker.json | 0 .../word-picker/word-picker.less | 0 .../word-picker/word-picker.ts | 19 +- .../word-picker/word-picker.wxml | 0 .../word-picker/word-picker.wxs | 0 miniprogram/constants/words.ts | 219 -------- miniprogram/core/data/categories.ts | 2 +- miniprogram/core/data/words.ts | 245 +++++++-- miniprogram/focusPages/shape/shape.json | 2 +- .../supportPages/copyBook/copyBook.json | 2 +- miniprogram/supportPages/copyBook/copyBook.ts | 6 +- miniprogram/supportPages/index/index.json | 23 - miniprogram/supportPages/index/index.less | 177 ------- miniprogram/supportPages/index/index.ts | 475 ------------------ miniprogram/supportPages/index/index.wxml | 146 ------ 27 files changed, 328 insertions(+), 1135 deletions(-) rename miniprogram/{service => chinesePages/shared/draw}/drawServiceFactory.ts (100%) rename miniprogram/{service => chinesePages/shared/draw}/findWordDrawService.ts (99%) rename miniprogram/{service => chinesePages/shared/draw}/findWordTemplate.ts (100%) rename miniprogram/{service => chinesePages/shared/draw}/textDrawService.ts (99%) rename miniprogram/{components => components3.0}/color-picker/color-picker.json (100%) rename miniprogram/{components => components3.0}/color-picker/color-picker.less (100%) rename miniprogram/{components => components3.0}/color-picker/color-picker.ts (100%) rename miniprogram/{components => components3.0}/color-picker/color-picker.wxml (100%) rename miniprogram/{components => components3.0}/word-picker/word-picker.json (100%) rename miniprogram/{components => components3.0}/word-picker/word-picker.less (100%) rename miniprogram/{components => components3.0}/word-picker/word-picker.ts (84%) rename miniprogram/{components => components3.0}/word-picker/word-picker.wxml (100%) rename miniprogram/{components => components3.0}/word-picker/word-picker.wxs (100%) delete mode 100644 miniprogram/constants/words.ts delete mode 100644 miniprogram/supportPages/index/index.json delete mode 100644 miniprogram/supportPages/index/index.less delete mode 100644 miniprogram/supportPages/index/index.ts delete mode 100644 miniprogram/supportPages/index/index.wxml diff --git a/miniprogram/app.json b/miniprogram/app.json index 96b81db..f05f8e6 100644 --- a/miniprogram/app.json +++ b/miniprogram/app.json @@ -17,7 +17,6 @@ "categoryManage/categoryManage", "categoryContentManage/categoryContentManage", "homeContentManage/homeContentManage", - "index/index", "mathIndex/mathIndex", "focusIndex/focusIndex", "copyBook/copyBook" diff --git a/miniprogram/service/drawServiceFactory.ts b/miniprogram/chinesePages/shared/draw/drawServiceFactory.ts similarity index 100% rename from miniprogram/service/drawServiceFactory.ts rename to miniprogram/chinesePages/shared/draw/drawServiceFactory.ts diff --git a/miniprogram/service/findWordDrawService.ts b/miniprogram/chinesePages/shared/draw/findWordDrawService.ts similarity index 99% rename from miniprogram/service/findWordDrawService.ts rename to miniprogram/chinesePages/shared/draw/findWordDrawService.ts index b042320..58db6b0 100644 --- a/miniprogram/service/findWordDrawService.ts +++ b/miniprogram/chinesePages/shared/draw/findWordDrawService.ts @@ -10,7 +10,7 @@ * - TextDrawService：文字涂色服务 * - FindWordDrawService：找字涂色服务 */ -import { BaseDrawService } from '../core/draw/baseDraw'; +import { BaseDrawService } from '../../../core/draw/baseDraw'; import { POSITION_TEMPLATES } from './findWordTemplate'; // ==================== Debug 开关 ==================== diff --git a/miniprogram/service/findWordTemplate.ts b/miniprogram/chinesePages/shared/draw/findWordTemplate.ts similarity index 100% rename from miniprogram/service/findWordTemplate.ts rename to miniprogram/chinesePages/shared/draw/findWordTemplate.ts diff --git a/miniprogram/service/textDrawService.ts b/miniprogram/chinesePages/shared/draw/textDrawService.ts similarity index 99% rename from miniprogram/service/textDrawService.ts rename to miniprogram/chinesePages/shared/draw/textDrawService.ts index 55de6a3..7141b7f 100644 --- a/miniprogram/service/textDrawService.ts +++ b/miniprogram/chinesePages/shared/draw/textDrawService.ts @@ -3,7 +3,7 @@ * 根据文字列表绘制到Canvas */ -import { BaseDrawService } from '../core/draw/baseDraw'; +import { BaseDrawService } from '../../../core/draw/baseDraw'; /** * 计算示例区域圆的中心点 * @param canvasWidth 画布宽度（逻辑像素） diff --git a/miniprogram/chinesePages/wordColoring/wordColoring.config.ts b/miniprogram/chinesePages/wordColoring/wordColoring.config.ts index 6224d76..7f91438 100644 --- a/miniprogram/chinesePages/wordColoring/wordColoring.config.ts +++ b/miniprogram/chinesePages/wordColoring/wordColoring.config.ts @@ -1,6 +1,6 @@ import type { DebugPublishMeta } from '../../utils/debugPublish'; import { inferGradeFromAge } from '../../utils/debugPublish'; -import type { TemplateType } from '../../service/drawServiceFactory'; +import type { TemplateType } from '../shared/draw/drawServiceFactory'; /** 本地 worksheet 元数据（与云库 `worksheets` 文档 `_id` 对齐） */ interface WordColoringWorksheetDefinition { @@ -35,9 +35,9 @@ export const WORD_COLORING_WORKSHEET_DEFINITIONS = [ icon: 'search', title: '找字涂色', subtitle: '在字海中找到目标字并涂色', - ageMin: 4, - ageMax: 7, - difficulty: 2, + ageMin: 3, + ageMax: 6, + difficulty: 1, tags: ['识字', '涂色', '找字'], sortOrder: 31, }, diff --git a/miniprogram/chinesePages/wordColoring/wordColoring.json b/miniprogram/chinesePages/wordColoring/wordColoring.json index 1c62c78..1ad86ca 100644 --- a/miniprogram/chinesePages/wordColoring/wordColoring.json +++ b/miniprogram/chinesePages/wordColoring/wordColoring.json @@ -12,7 +12,7 @@ "debug-publish-tools": "../../components3.0/debug-publish-tools/debug-publish-tools", "share-guide-popup": "../../components/share-guide-popup/share-guide-popup", "toy-icon": "../../toy/icon/icon", - "color-picker": "../../components/color-picker/color-picker", - "word-picker": "../../components/word-picker/word-picker" + "color-picker": "../../components3.0/color-picker/color-picker", + "word-picker": "../../components3.0/word-picker/word-picker" } } diff --git a/miniprogram/chinesePages/wordColoring/wordColoring.ts b/miniprogram/chinesePages/wordColoring/wordColoring.ts index db2a14f..02672d7 100644 --- a/miniprogram/chinesePages/wordColoring/wordColoring.ts +++ b/miniprogram/chinesePages/wordColoring/wordColoring.ts @@ -1,6 +1,9 @@ import { WATER_COLORS } from '../../constants/colors'; -import { WORDS } from '../../constants/words'; -import { DrawServiceFactory, type IDrawService } from '../../service/drawServiceFactory'; +import { WORDS } from '../../core/data/words'; +import { + DrawServiceFactory, + type IDrawService, +} from '../shared/draw/drawServiceFactory'; import { createPage, type CanvasDataState } from '../../base/pageMixin'; import { defaultShareConfig } from '../../config/config'; import { @@ -12,14 +15,26 @@ import { WORD_COLORING_WORKSHEET_DEFINITIONS, } from './wordColoring.config'; import type { DebugPublishMeta } from '../../utils/debugPublish'; -import { addFavorite, removeFavorite, batchCheckFavorited } from '../../utils/favorites'; +import { + addFavorite, + removeFavorite, + batchCheckFavorited, +} from '../../utils/favorites'; type CardItem = { color: string; word: string }; const COLOR_MAP: Record = { - 红: '#FF0000', 蓝: '#0000FF', 绿: '#00FF00', 黄: '#FFFF00', - 黑: '#000000', 白: '#FFFFFF', 紫: '#800080', 橙: '#FF7F00', - 粉: '#FF69B4', 棕: '#A52A2A', 灰: '#808080', + 红: '#FF0000', + 蓝: '#0000FF', + 绿: '#00FF00', + 黄: '#FFFF00', + 黑: '#000000', + 白: '#FFFFFF', + 紫: '#800080', + 橙: '#FF7F00', + 粉: '#FF69B4', + 棕: '#A52A2A', + 灰: '#808080', }; const MAX_WORDS = 3; @@ -109,7 +124,13 @@ createPage( canvas: Canvas, ctx: RenderingContext, options?: Record, - ) => DrawServiceFactory.create(templateType, canvas, ctx, options), + ) => + DrawServiceFactory.create( + templateType, + canvas, + ctx, + options, + ), drawServiceOptions: { title: this.data.pageTitle, }, @@ -121,7 +142,7 @@ createPage( }); }, -// PLACEHOLDER_TS_PART3 + // PLACEHOLDER_TS_PART3 /** 执行 Canvas 绘制 */ async drawCanvas() { @@ -183,23 +204,33 @@ createPage( const w = allWords[idx]; if (!selected.includes(w)) selected.push(w); } - const colors = [...WATER_COLORS.basic12].sort(() => Math.random() - 0.5); + const colors = [...WATER_COLORS.basic12].sort( + () => Math.random() - 0.5, + ); const cardList = selected.map((word, i) => ({ word, color: COLOR_MAP[word] || colors[i % colors.length].hex, })); const inputValue = selected.join(''); - this.setData({ cardList, selectedWords: selected, inputValue }, () => { - this.drawCanvas(); - }); + this.setData( + { cardList, selectedWords: selected, inputValue }, + () => { + this.drawCanvas(); + }, + ); }, /** 清空文字卡片 */ clearCardList() { - this.setData({ cardList: [], selectedWords: [], inputValue: '', hasContent: false }); + this.setData({ + cardList: [], + selectedWords: [], + inputValue: '', + hasContent: false, + }); }, -// PLACEHOLDER_TS_PART4 + // PLACEHOLDER_TS_PART4 /** 输入框内容变化：同步 cardList */ onInputChange(e: WechatMiniprogram.Input) { @@ -215,7 +246,12 @@ createPage( /** 清空输入框及卡片 */ onClearInput() { - this.setData({ inputValue: '', cardList: [], selectedWords: [], hasContent: false }); + this.setData({ + inputValue: '', + cardList: [], + selectedWords: [], + hasContent: false, + }); if (this.drawService) { this.drawCanvas(); } @@ -223,9 +259,15 @@ createPage( /** 将输入文本同步为 cardList */ syncCardsFromInput(value: string) { - const chars = [...new Set(value.split('').filter((c: string) => c.trim()))].slice(0, 6); - const oldCardMap = new Map(this.data.cardList.map((c: CardItem) => [c.word, c.color])); - const allColors = WATER_COLORS.basic12.map((c: { hex: string }) => c.hex); + const chars = [ + ...new Set(value.split('').filter((c: string) => c.trim())), + ].slice(0, 6); + const oldCardMap = new Map( + this.data.cardList.map((c: CardItem) => [c.word, c.color]), + ); + const allColors = WATER_COLORS.basic12.map( + (c: { hex: string }) => c.hex, + ); const usedColors = new Set(); const cardList = chars.map((char) => { @@ -241,7 +283,9 @@ createPage( } const available = allColors.filter((c) => !usedColors.has(c)); const shuffled = [...available].sort(() => Math.random() - 0.5); - const color = shuffled[0] || allColors[Math.floor(Math.random() * allColors.length)]; + const color = + shuffled[0] || + allColors[Math.floor(Math.random() * allColors.length)]; usedColors.add(color); return { word: char, color }; }); @@ -256,17 +300,28 @@ createPage( onColorDotTap(e: WechatMiniprogram.TouchEvent) { const key = Number(e.currentTarget.dataset.key); const color = e.currentTarget.dataset.color as string; - this.setData({ showColorPopup: true, currentKey: key, currentColor: color }); + this.setData({ + showColorPopup: true, + currentKey: key, + currentColor: color, + }); }, /** 分类标签点击：打开弹窗定位到对应分类 */ onCategoryTap(e: WechatMiniprogram.TouchEvent) { const categoryId = Number(e.currentTarget.dataset.categoryId); - this.setData({ showSelectWordPopup: true, pickerCurrentTab: categoryId }); + this.setData({ + showSelectWordPopup: true, + pickerCurrentTab: categoryId, + }); }, onCloseColorPopup() { - this.setData({ showColorPopup: false, currentKey: 0, currentColor: '' }); + this.setData({ + showColorPopup: false, + currentKey: 0, + currentColor: '', + }); }, onChangeColor(e: WechatMiniprogram.CustomEvent) { @@ -290,8 +345,12 @@ createPage( onChangeWord(e: WechatMiniprogram.CustomEvent) { const selectedWords = e.detail.selectedWords as string[]; - const oldCardMap = new Map(this.data.cardList.map((c: CardItem) => [c.word, c.color])); - const allColors = WATER_COLORS.basic12.map((c: { hex: string }) => c.hex); + const oldCardMap = new Map( + this.data.cardList.map((c: CardItem) => [c.word, c.color]), + ); + const allColors = WATER_COLORS.basic12.map( + (c: { hex: string }) => c.hex, + ); const usedColors = new Set(); const cardList = selectedWords.map((word) => { @@ -307,15 +366,25 @@ createPage( } const available = allColors.filter((c) => !usedColors.has(c)); const shuffled = [...available].sort(() => Math.random() - 0.5); - const color = shuffled[0] || allColors[Math.floor(Math.random() * allColors.length)]; + const color = + shuffled[0] || + allColors[Math.floor(Math.random() * allColors.length)]; usedColors.add(color); return { word, color }; }); const inputValue = selectedWords.join(''); - this.setData({ showSelectWordPopup: false, cardList, selectedWords, inputValue }, () => { - this.drawCanvas(); - }); + this.setData( + { + showSelectWordPopup: false, + cardList, + selectedWords, + inputValue, + }, + () => { + this.drawCanvas(); + }, + ); }, /** 收藏 */ @@ -328,7 +397,10 @@ createPage( if (next) addFavorite(id); else removeFavorite(id); } - wx.showToast({ title: next ? '收藏成功' : '已取消收藏', icon: 'none' }); + wx.showToast({ + title: next ? '收藏成功' : '已取消收藏', + icon: 'none', + }); }, async loadFavoritedMap() { diff --git a/miniprogram/components/color-picker/color-picker.json b/miniprogram/components3.0/color-picker/color-picker.json similarity index 100% rename from miniprogram/components/color-picker/color-picker.json rename to miniprogram/components3.0/color-picker/color-picker.json diff --git a/miniprogram/components/color-picker/color-picker.less b/miniprogram/components3.0/color-picker/color-picker.less similarity index 100% rename from miniprogram/components/color-picker/color-picker.less rename to miniprogram/components3.0/color-picker/color-picker.less diff --git a/miniprogram/components/color-picker/color-picker.ts b/miniprogram/components3.0/color-picker/color-picker.ts similarity index 100% rename from miniprogram/components/color-picker/color-picker.ts rename to miniprogram/components3.0/color-picker/color-picker.ts diff --git a/miniprogram/components/color-picker/color-picker.wxml b/miniprogram/components3.0/color-picker/color-picker.wxml similarity index 100% rename from miniprogram/components/color-picker/color-picker.wxml rename to miniprogram/components3.0/color-picker/color-picker.wxml diff --git a/miniprogram/components/word-picker/word-picker.json b/miniprogram/components3.0/word-picker/word-picker.json similarity index 100% rename from miniprogram/components/word-picker/word-picker.json rename to miniprogram/components3.0/word-picker/word-picker.json diff --git a/miniprogram/components/word-picker/word-picker.less b/miniprogram/components3.0/word-picker/word-picker.less similarity index 100% rename from miniprogram/components/word-picker/word-picker.less rename to miniprogram/components3.0/word-picker/word-picker.less diff --git a/miniprogram/components/word-picker/word-picker.ts b/miniprogram/components3.0/word-picker/word-picker.ts similarity index 84% rename from miniprogram/components/word-picker/word-picker.ts rename to miniprogram/components3.0/word-picker/word-picker.ts index 348994f..be47c26 100644 --- a/miniprogram/components/word-picker/word-picker.ts +++ b/miniprogram/components3.0/word-picker/word-picker.ts @@ -1,4 +1,4 @@ -import { WORDS } from '../../constants/words'; +import { WORDS } from '../../core/data/words'; Component({ options: {}, @@ -20,12 +20,12 @@ Component({ }, selectedWords: { type: Array, - value: [] + value: [], }, max: { type: Number, - value: 6 - } + value: 6, + }, }, /** * 组件的初始数据 @@ -64,11 +64,14 @@ Component({ }, onChange() { - this.triggerEvent('onChange', { selectedWords: this.data.selectedWords }); + this.triggerEvent('onChange', { + selectedWords: this.data.selectedWords, + }); }, onTabChange(e: WechatMiniprogram.CustomEvent) { - const index = typeof e.detail === 'object' ? e.detail.index : e.detail; + const index = + typeof e.detail === 'object' ? e.detail.index : e.detail; this.setData({ currentTab: index }); }, @@ -79,7 +82,9 @@ Component({ // 如果是已选中的文字,直接取消选中 if (newSelectedWords.includes(word)) { - newSelectedWords = newSelectedWords.filter((item) => item !== word); + newSelectedWords = newSelectedWords.filter( + (item) => item !== word, + ); } else { // 如果是未选中的文字,先判断是否已选满6个 if (newSelectedWords.length >= max) { diff --git a/miniprogram/components/word-picker/word-picker.wxml b/miniprogram/components3.0/word-picker/word-picker.wxml similarity index 100% rename from miniprogram/components/word-picker/word-picker.wxml rename to miniprogram/components3.0/word-picker/word-picker.wxml diff --git a/miniprogram/components/word-picker/word-picker.wxs b/miniprogram/components3.0/word-picker/word-picker.wxs similarity index 100% rename from miniprogram/components/word-picker/word-picker.wxs rename to miniprogram/components3.0/word-picker/word-picker.wxs diff --git a/miniprogram/constants/words.ts b/miniprogram/constants/words.ts deleted file mode 100644 index 8141327..0000000 --- a/miniprogram/constants/words.ts +++ /dev/null @@ -1,219 +0,0 @@ -// 为避免保存时的自动格式化将数组元素强制换行，保持紧凑展示 -// prettier-ignore -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: [ - '零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', - '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', - '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', - '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', - '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', - '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', - '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', - '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', - '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', - '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', - '91', '92', '93', '94', '95', '96', '97', '98', '99', '100' - ], - }, - { - categoryId: 5, - icon: '🔤', - categoryName: '字母', - words: [ - 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', - 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', - 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', - 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' - ], - }, - - { - 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: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和', '问', '品', '吐', '吸'], - }, - { - categoryId: 14, - icon: '🧍', - categoryName: '单人旁', - words: ['你', '他', '们', '作', '休', '住', '伙', '伴', '体', '位', '信', '化'], - }, - { - categoryId: 15, - icon: '❤️', - categoryName: '竖心旁', - words: ['心', '情', '快', '怕', '惊', '忙', '怀', '爱', '想', '念'], - }, - - // 新增适龄分类 - { - categoryId: 16, - icon: '🧭', - categoryName: '方位方向', - words: [ - '上', '下', '左', '右', '前', '后', '里', '外', '东', '南', '西', '北', '中', '近', '远' - ], - }, - { - categoryId: 17, - icon: '🧑‍🦰', - categoryName: '身体部位', - words: [ - '头', '脸', '目', '眼', '眉', '鼻', '口', '牙', '舌', '耳', '手', '指', '掌', '臂', - '足', '腿', '心' - ], - }, - { - categoryId: 18, - icon: '🐾', - categoryName: '常见动物', - words: [ - '狗', '猫', '马', '牛', '羊', '鸡', '鸭', '鹅', '鱼', '兔', '猪', '熊', '虎', '鹿', '猴', - '狼', '狮', '虎', '豹', '象', - ], - }, - { - categoryId: 19, - icon: '🌼', - categoryName: '常见植物', - words: ['花', '草', '树', '叶', '果', '根', '竹', '松', '柳', '桃', '梅', '荷', '菊'], - }, - { - categoryId: 20, - icon: '🍎', - categoryName: '食物饮品', - words: [ - '米', '饭', '面', '菜', '果', '肉', '蛋', '奶', '糖', '盐', '油', '水', '茶', '汤', - '粥', '饼' - ], - }, - { - categoryId: 21, - icon: '🚗', - categoryName: '交通出行', - words: ['车', '船', '飞', '机', '站', '路', '桥', '铁', '轨', '轮'], - }, - { - categoryId: 22, - icon: '📚', - categoryName: '校园与文具', - words: ['书', '本', '笔', '尺', '刀', '纸', '包', '课', '桌', '椅', '图', '画', '作', '业'], - }, - { - categoryId: 23, - icon: '⏰', - categoryName: '时间与季节', - words: [ - '日', '月', '年', '时', '分', '秒', '早', '晚', '今', '明', '昨', '春', '夏', '秋', '冬' - ], - }, - { - categoryId: 24, - icon: '🟠', - categoryName: '形状与图形', - words: ['点', '线', '面', '圆', '方', '角', '弧', '长', '宽', '高'], - }, - { - categoryId: 25, - icon: '📏', - categoryName: '量词常用', - words: ['个', '只', '匹', '条', '朵', '棵', '片', '张', '本', '杯', '块', '双'], - }, -]; diff --git a/miniprogram/core/data/categories.ts b/miniprogram/core/data/categories.ts index 678261b..7a010b8 100644 --- a/miniprogram/core/data/categories.ts +++ b/miniprogram/core/data/categories.ts @@ -28,7 +28,7 @@ export const CATEGORY_LIST: CategoryType[] = [ }, { id: 'chinese', - name: '趣味识字', + name: '识字练字', icon: '✏️', path: '/pages/category/category?id=chinese', }, diff --git a/miniprogram/core/data/words.ts b/miniprogram/core/data/words.ts index f59f76c..8141327 100644 --- a/miniprogram/core/data/words.ts +++ b/miniprogram/core/data/words.ts @@ -1,62 +1,219 @@ -/** - * 识字 Tab 词库分类（现有功能清单 §四）：供生成识字卡、与 future worksheet-service 对齐 - */ - -export interface WordCategory { - id: string; - name: string; - /** 示例与常用字，可渐进扩充 */ - words: string[]; -} - +// 为避免保存时的自动格式化将数组元素强制换行，保持紧凑展示 // prettier-ignore -export const WORD_BANKS: WordCategory[] = [ +export const WORDS = [ { - id: 'basic-stroke', - name: '基础独体字', - words: ['人', '口', '手', '上', '下', '日', '月', '水', '火', '山', '大', '小', '木', '门', '心', '子', '女', '马', '牛', '羊'], + categoryId: 0, + icon: '🌟', + categoryName: '基础独体字', + words: [ + '人', '口', '手', '上', '下', '日', '月', '水', '火', '山', '大', '小', '天', '土', '木', + '中', '个', '工', '王', '车', '儿', '女', '子', '门', '马', '牛', '羊', '米', '衣', '白', + '田', '石', '雨', '电', '云', '花', '草', '叶', '果', '鸟', '虫', '鱼', '头', '目', '耳', + '足', '心', '力', '立', '正', + // 扩充（常见基础字） + '刀', '又', '三', '四', '五', '六', '七', '八', '九', '十', '口', '门', '心', '耳', '目', + '牙', '鼻', '口', '眉', '田', '米', '木', '竹', '石', '土', '火', '水', '金' + ], }, { - id: 'daily-highfreq', - name: '生活高频字', - words: ['爸', '妈', '书', '包', '吃', '喝', '走', '跑', '睡', '醒', '玩', '学', '校', '衣', '裤', '鞋', '床', '灯', '车', '门'], + categoryId: 1, + icon: '🏠', + categoryName: '生活高频字', + words: [ + '爸', '妈', '爷', '奶', '哥', '弟', '姐', '妹', '书', '包', '尺', '刀', '本', '笔', '桌', + '灯', '家', '房', '床', '吃', '喝', '坐', '走', '跑', '看', '听', '说', '笑', '哭', '爱', + '好', '有', '来', '去', '开', '关', '里', '外', '多', '少', '红', '黄', '蓝', '绿', '白', + '黑', '是', '不', '我', '你', + // 扩充（贴近生活） + '他', '她', '它', '们', '在', '和', '把', '给', '用', '做', '玩', '买', '卖', '学', '读', + '写', '问', '答', '听', '看', '吃', '喝', '睡', '起', '穿', '洗', '擦', '开', '关', '拿', + '放' + ], }, { - id: 'nature-action', - name: '自然与动作', - words: ['风', '雪', '星', '光', '春', '夏', '秋', '冬', '雨', '云', '花', '草', '树', '叶', '看', '听', '说', '想', '开', '关'], + categoryId: 2, + icon: '🌿', + categoryName: '自然与动作', + words: [ + '风', '雪', '星', '光', '林', '河', '海', '沙', '树', '苗', '春', '夏', '秋', '冬', '东', + '南', '西', '北', '飞', '跳', '游', '唱', '画', '洗', '买', '卖', '问', '学', '读', '写', + '早', '晚', '明', '亮', '高', '长', '圆', '方', '快', '乐', '热', '冷', '轻', '重', '新', + '旧', '和', '同', '会', '要', + // 扩充（自然与常见动作） + '雨', '雷', '电', '云', '雾', '露', '霜', '星', '月', '阳', '阴', '晴', '风', '雪', '冰', + '草', '花', '叶', '果', '根', '看', '听', '说', '读', '写', '跑', '跳', '走', '爬', '抓', + '推', '拉', '抱', '笑', '哭' + ], }, { - id: 'measure', - name: '常用量词', - words: ['个', '只', '条', '本', '张', '块', '头', '匹', '位', '双', '串', '瓶', '盒', '杯', '碗', '把', '朵', '颗', '辆', '件'], + categoryId: 3, + icon: '🎨', + categoryName: '颜色', + words: ['红', '蓝', '绿', '黄', '黑', '白', '紫', '橙', '粉', '棕', '灰'], }, { - id: 'color', - name: '颜色', - words: ['红', '黄', '蓝', '绿', '白', '黑', '紫', '粉', '灰', '橙', '金', '银', '青', '棕', '米', '肉', '雪', '墨', '桃', '奶'], + categoryId: 4, + icon: '🔢', + categoryName: '数字', + words: [ + '零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', + '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', + '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', + '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', + '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', + '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', + '51', '52', '53', '54', '55', '56', '57', '58', '59', '60', + '61', '62', '63', '64', '65', '66', '67', '68', '69', '70', + '71', '72', '73', '74', '75', '76', '77', '78', '79', '80', + '81', '82', '83', '84', '85', '86', '87', '88', '89', '90', + '91', '92', '93', '94', '95', '96', '97', '98', '99', '100' + ], }, { - id: 'animal', - name: '动物', - words: ['猫', '狗', '鸟', '鱼', '兔', '鸡', '鸭', '猪', '猴', '象', '虎', '熊', '狮', '鹿', '鼠', '蛇', '龟', '虾', '贝', '虫'], + categoryId: 5, + icon: '🔤', + categoryName: '字母', + words: [ + 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', + 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', + 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', + 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' + ], + }, + + { + categoryId: 6, + icon: '☀️', + categoryName: '日字旁', + words: ['日', '明', '早', '时', '晴', '春', '星', '晨', '晚', '晒', '照'], }, { - id: 'food', - name: '食物', - words: ['米', '饭', '面', '汤', '菜', '肉', '蛋', '奶', '果', '瓜', '糖', '饼', '饺', '粥', '茶', '豆', '茄', '笋', '枣', '梨'], + categoryId: 7, + icon: '💧', + categoryName: '三点水', + words: ['水', '江', '河', '流', '沙', '洗', '海', '汗', '汽', '澡', '泡', '湖', '泉'], }, { - id: 'body-health', - name: '身体与健康', - 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: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和', '问', '品', '吐', '吸'], + }, + { + categoryId: 14, + icon: '🧍', + categoryName: '单人旁', + words: ['你', '他', '们', '作', '休', '住', '伙', '伴', '体', '位', '信', '化'], + }, + { + categoryId: 15, + icon: '❤️', + categoryName: '竖心旁', + words: ['心', '情', '快', '怕', '惊', '忙', '怀', '爱', '想', '念'], + }, + + // 新增适龄分类 + { + categoryId: 16, + icon: '🧭', + categoryName: '方位方向', + words: [ + '上', '下', '左', '右', '前', '后', '里', '外', '东', '南', '西', '北', '中', '近', '远' + ], + }, + { + categoryId: 17, + icon: '🧑‍🦰', + categoryName: '身体部位', + words: [ + '头', '脸', '目', '眼', '眉', '鼻', '口', '牙', '舌', '耳', '手', '指', '掌', '臂', + '足', '腿', '心' + ], + }, + { + categoryId: 18, + icon: '🐾', + categoryName: '常见动物', + words: [ + '狗', '猫', '马', '牛', '羊', '鸡', '鸭', '鹅', '鱼', '兔', '猪', '熊', '虎', '鹿', '猴', + '狼', '狮', '虎', '豹', '象', + ], + }, + { + categoryId: 19, + icon: '🌼', + categoryName: '常见植物', + words: ['花', '草', '树', '叶', '果', '根', '竹', '松', '柳', '桃', '梅', '荷', '菊'], + }, + { + categoryId: 20, + icon: '🍎', + categoryName: '食物饮品', + words: [ + '米', '饭', '面', '菜', '果', '肉', '蛋', '奶', '糖', '盐', '油', '水', '茶', '汤', + '粥', '饼' + ], + }, + { + categoryId: 21, + icon: '🚗', + categoryName: '交通出行', + words: ['车', '船', '飞', '机', '站', '路', '桥', '铁', '轨', '轮'], + }, + { + categoryId: 22, + icon: '📚', + categoryName: '校园与文具', + words: ['书', '本', '笔', '尺', '刀', '纸', '包', '课', '桌', '椅', '图', '画', '作', '业'], + }, + { + categoryId: 23, + icon: '⏰', + categoryName: '时间与季节', + words: [ + '日', '月', '年', '时', '分', '秒', '早', '晚', '今', '明', '昨', '春', '夏', '秋', '冬' + ], + }, + { + categoryId: 24, + icon: '🟠', + categoryName: '形状与图形', + words: ['点', '线', '面', '圆', '方', '角', '弧', '长', '宽', '高'], + }, + { + categoryId: 25, + icon: '📏', + categoryName: '量词常用', + words: ['个', '只', '匹', '条', '朵', '棵', '片', '张', '本', '杯', '块', '双'], }, ]; - -export function getWordCategoryById(id: string): WordCategory | undefined { - return WORD_BANKS.find((c) => c.id === id); -} - -export function getAllWordCategories(): WordCategory[] { - return WORD_BANKS; -} diff --git a/miniprogram/focusPages/shape/shape.json b/miniprogram/focusPages/shape/shape.json index a67ca35..d78211e 100644 --- a/miniprogram/focusPages/shape/shape.json +++ b/miniprogram/focusPages/shape/shape.json @@ -12,7 +12,7 @@ "toy-button": "../../toy/button-v2/button", "shape-card": "../../components/shape-card/shape-card", "shape-picker": "../../components/shape-picker/shape-picker", - "color-picker": "../../components/color-picker/color-picker", + "color-picker": "../../components3.0/color-picker/color-picker", "share-guide-popup": "../../components/share-guide-popup/share-guide-popup", "draw-ad": "../../components/draw-ad/draw-ad" } diff --git a/miniprogram/supportPages/copyBook/copyBook.json b/miniprogram/supportPages/copyBook/copyBook.json index 969a90b..75408e8 100644 --- a/miniprogram/supportPages/copyBook/copyBook.json +++ b/miniprogram/supportPages/copyBook/copyBook.json @@ -10,7 +10,7 @@ "van-dialog": "@vant/weapp/dialog/index", "word-input": "/components/word-input/word-input", "word-card": "/components/word-card/word-card", - "word-picker": "/components/word-picker/word-picker", + "word-picker": "/components3.0/word-picker/word-picker", "empty-state": "/components/empty-state/empty-state", "share-guide-popup": "/components/share-guide-popup/share-guide-popup", "add-to-miniprogram-tip": "/components/add-to-miniprogram-tip/add-to-miniprogram-tip" diff --git a/miniprogram/supportPages/copyBook/copyBook.ts b/miniprogram/supportPages/copyBook/copyBook.ts index 074a814..0257017 100644 --- a/miniprogram/supportPages/copyBook/copyBook.ts +++ b/miniprogram/supportPages/copyBook/copyBook.ts @@ -2,7 +2,7 @@ import WordDrawService from '../../service/wordDrawService'; import { downloadPrint } from '../../utils/downloadPrint'; import { PAPER_SIZE } from '../../constants/colors'; import { getWordsSvgData } from '../../utils/getWordsSvgJson'; -import { WORDS } from '../../constants/words'; +import { WORDS } from '../../core/data/words'; import { CharacterItem } from '../../types/characterType'; import tracker from '../../utils/tracker'; import { defaultShareConfig } from '../../config/config'; @@ -98,7 +98,7 @@ Page({ onConfirmInput(e: any) { const value: string = (e && e.detail && e.detail.value) || ''; const text = (value || '').trim(); - + // 如果文本框为空，清空输入汉字 if (!text) { const { selectedWords } = this.data as any; @@ -204,7 +204,7 @@ Page({ deleteWordCard(e: any) { const { key } = e.detail; const { inputWords, selectedWords } = this.data as any; - + // 判断删除的是输入汉字还是选择的汉字 if (key < inputWords.length) { // 删除的是输入汉字 diff --git a/miniprogram/supportPages/index/index.json b/miniprogram/supportPages/index/index.json deleted file mode 100644 index fccb68e..0000000 --- a/miniprogram/supportPages/index/index.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "navigationBarTitleText": "识字", - "navigationBarTextStyle": "black", - "navigationBarBackgroundColor": "#FFD719", - "homeButton": true, - "backgroundColor": "#F6F6F6", - "enablePullDownRefresh": false, - "usingComponents": { - "van-cell": "@vant/weapp/cell/index", - "van-icon": "@vant/weapp/icon/index", - "van-popup": "@vant/weapp/popup/index", - "van-dialog": "@vant/weapp/dialog/index", - "word-input": "../../components/word-input/word-input", - "word-card": "../../components/word-card/word-card", - "color-picker": "../../components/color-picker/color-picker", - "introduction-popup": "../../components/introduction-popup/introduction-popup", - "share-guide-popup": "../../components/share-guide-popup/share-guide-popup", - "add-to-miniprogram-tip": "../../components/add-to-miniprogram-tip/add-to-miniprogram-tip", - "toy-button": "../../toy/button-v2/button", - "word-picker": "../../components/word-picker/word-picker", - "empty-state": "../../components/empty-state/empty-state" - } -} diff --git a/miniprogram/supportPages/index/index.less b/miniprogram/supportPages/index/index.less deleted file mode 100644 index b8cc042..0000000 --- a/miniprogram/supportPages/index/index.less +++ /dev/null @@ -1,177 +0,0 @@ -page { - background-color: #f6f6f6; -} - -.page-container { - background-color: #f6f6f6; - padding: 0 24rpx; - box-sizing: border-box; - - .empty { - height: 190rpx; - } -} - -.wrapper { - background-color: #ffffff; - border-radius: 20rpx; - padding: 36rpx 24rpx; - box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15); - margin: 30rpx 0; - display: flex; - flex-direction: column; - - .wrapper-title { - font-size: 32rpx; - color: #141414; - margin-bottom: 36rpx; // 增大标题与内容间距 - font-weight: bold; - text-align: center; - } - - &.hidden { - visibility: hidden; - } - - .word-card-box { - padding: 34rpx 0; - - .word-cards-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 38rpx; // 间距从24rpx提升到32rpx - } - } - - .word-input-box { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - .operation-box { - display: flex; - flex-direction: row; - justify-content: space-between; - } - - // 模板选择区域 - .template-section { - margin-top: 40rpx; - - .template-title { - font-size: 28rpx; - font-weight: 600; - color: #141414; - margin-bottom: 24rpx; - text-align: center; - } - - .template-list { - display: flex; - flex-direction: column; - gap: 20rpx; - } - - .template-item { - background: #FFFFFF; - border: 2rpx solid #E8E8E8; - border-radius: 16rpx; - padding: 24rpx; - cursor: pointer; - transition: all 0.2s ease-in-out; - display: flex; - align-items: center; - width: 100%; - box-sizing: border-box; - - &:active { - transform: scale(0.98); - } - - &.active { - border-color: #93D333; - box-shadow: 0 0 0 4rpx rgba(147, 211, 51, 0.2); - } - - .template-checkbox { - width: 40rpx; - height: 40rpx; - border: 2rpx solid #E8E8E8; - border-radius: 8rpx; - display: flex; - align-items: center; - justify-content: center; - margin-right: 24rpx; - flex-shrink: 0; - transition: all 0.2s ease-in-out; - - .checkbox-icon { - color: #FFFFFF; - font-size: 24rpx; - font-weight: bold; - } - } - - &.active .template-checkbox { - background: #93D333; - border-color: #93D333; - } - - .template-name { - font-size: 28rpx; - color: #141414; - font-weight: 500; - flex: 1; - } - - &.active .template-name { - color: #93D333; - font-weight: 600; - } - } - } -} - - -// .canvas-wrapper { -// width: 100%; -// background-color: #fff; -// box-sizing: border-box; -// } -.canvas-wrapper { - display: flex; - justify-content: center; - align-items: center; - min-height: 400rpx; - background: #f8f9fa; - border-radius: 12rpx; - border: 2rpx dashed #dee2e6; -} - -.canvas-content { - max-width: 100%; - border-radius: 8rpx; - box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); - overflow: hidden; -} - -// #canvasContent { -// border: 1px solid #666; -// } - -.bottom-btn-box { - position: fixed; - left: 0; - bottom: 0; - width: 100%; - height: 120rpx; - display: flex; - justify-content: space-between; - align-items: center; - background-color: #fff; - box-shadow: 0px -3.9rpx 5.2rpx rgba(0, 0, 0, 0.15); - padding: 0 24rpx; - box-sizing: border-box; - border-radius: 16rpx 16rpx 0 0; -} \ No newline at end of file diff --git a/miniprogram/supportPages/index/index.ts b/miniprogram/supportPages/index/index.ts deleted file mode 100644 index 00d2cfd..0000000 --- a/miniprogram/supportPages/index/index.ts +++ /dev/null @@ -1,475 +0,0 @@ -import { WATER_COLORS, PAPER_SIZE } from '../../constants/colors'; -import { WORDS } from '../../constants/words'; -import { - DrawServiceFactory, - IDrawService, - TemplateType, -} from '../../service/drawServiceFactory'; -import { downloadPrint } from '../../utils/downloadPrint'; -import tracker from '../../utils/tracker'; -import { defaultShareConfig } from '../../config/config'; - -Page({ - canvas: null as Canvas | null, - ctx: null as RenderingContext | null, - boxHeight: 0, - boxWidth: 0, - drawService: null as IDrawService | null, - - data: { - cardList: [] as CardList, - selectedWords: [] as string[], - showColorPopup: false, - currentKey: 0, - currentColor: '', - showIntroductionPopup: false, - showSelectWordPopup: false, // 选择文字弹窗 - selectedTemplate: 'grid', // 选中的模板类型 grid 或 find 模式 - env: 'release', - isPCDevtool: false, - showShareDialog: false, // 显示分享引导弹窗 - }, - - onLoad(options: { template?: string }) { - const { template } = options; - this.setData({ - selectedTemplate: template || 'grid', - }); - - const hasShowIntroduction = - wx.getStorageSync('hasShowIntroduction') || false; - - // 判断是否在PC端开发工具上运行 - const systemInfo = wx.getDeviceInfo(); - if (systemInfo.platform === 'devtools') { - this.setData({ - isPCDevtool: true, - }); - } - - if (!hasShowIntroduction) { - this.setData( - { - cardList: [ - { color: '#FF0000', word: '涂' }, - { color: '#00FF00', word: '鸦' }, - { color: '#FF7F00', word: '丫' }, - { color: '#00FFFF', word: '欢' }, - { color: '#FFFF00', word: '迎' }, - { color: '#8A2BE2', word: '您' }, - ], - selectedWords: ['涂', '鸦', '丫', '欢', '迎', '您'], - // showIntroductionPopup: true, - env: getApp().globalData.env || 'release', - }, - () => { - this.drawCanvas(); - }, - ); - } else { - this.setData({ - env: getApp().globalData.env || 'release', - }); - } - }, - - onReady() { - // 当cardList为空时，canvas相关元素不会被渲染，所以不需要在这里初始化 - // 尺寸计算将在initCanvas方法中进行 - }, - - initCanvas() { - // 先获取canvasWrapper的尺寸来计算canvas尺寸 - const query = wx.createSelectorQuery(); - query - .select('#canvasWrapper') - .boundingClientRect((rect) => { - if (rect) { - const { width, height } = PAPER_SIZE['A4']; - const boxWidth = rect.width; - const boxHeight = boxWidth / (width / height); - - // 然后初始化canvas - wx.createSelectorQuery() - .select('#canvasContent') - .fields({ - node: true, - size: true, - }) - .exec((res) => { - if (res[0] && res[0].node) { - const canvas = res[0].node; - const ctx = canvas.getContext('2d'); - if (ctx) { - this.canvas = canvas; - this.ctx = ctx; - // 根据当前选中的模板类型创建对应的绘制服务 - const templateType = this.data - .selectedTemplate as TemplateType; - this.drawService = - DrawServiceFactory.create( - templateType, - canvas, - ctx, - ); - this.setData({ boxWidth, boxHeight }); - - // 初始化完成后，如果有cardList内容则立即绘制 - const currentCardList = this.data.cardList; - if (currentCardList.length > 0) { - this.drawService - .draw(currentCardList) - .catch((err: any) => { - console.error('绘制失败:', err); - }); - } - } - } - }); - } - }) - .exec(); - }, - - /** - * 创建或更新绘制服务 - * 根据当前选中的模板类型创建对应的服务实例 - */ - createDrawService() { - if (this.canvas && this.ctx) { - const templateType = this.data.selectedTemplate as TemplateType; - this.drawService = DrawServiceFactory.create( - templateType, - this.canvas, - this.ctx, - ); - } - }, - - /** 变更cardList 并更新canvas */ - drawCanvas( - updatedCardList?: Array<{ color: string; word: string }>, - callback: () => void = () => {}, - ) { - if (updatedCardList) { - this.setData( - { - cardList: updatedCardList, - selectedWords: updatedCardList.map((item) => item.word), - }, - () => { - // 如果cardList有内容且canvas未初始化，先初始化canvas - if (!this.canvas) { - this.initCanvas(); - } else { - // 如果canvas已初始化，确保绘制服务是最新的 - this.createDrawService(); - } - // 如果canvas已初始化且有内容，则绘制 - if (this.drawService && updatedCardList!.length > 0) { - this.drawService.draw(updatedCardList!).catch((err: any) => { - console.error('绘制失败:', err); - }); - } - callback(); - }, - ); - } else { - const currentCardList = this.data.cardList; - // 如果cardList有内容且canvas未初始化，先初始化canvas - if (!this.canvas) { - this.initCanvas(); - } else { - // 如果canvas已初始化，确保绘制服务是最新的 - this.createDrawService(); - } - // 如果canvas已初始化且有内容，则绘制 - if (this.drawService && currentCardList.length > 0) { - this.drawService.draw(currentCardList).catch((err: any) => { - console.error('绘制失败:', err); - }); - } - } - }, - - tapCard(e: WechatMiniprogram.TouchEvent) { - const { url } = e.currentTarget.dataset; - wx.navigateTo({ url }); - }, - - onConfirmInput(e: WechatMiniprogram.Input) { - const { cardList } = this.data; - const { value } = e.detail; - const characters = value.split(''); - // 计算剩余空间 - 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 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) => { - // 获取字对应的颜色 - 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: color, - }; - }); - - // 合并新旧卡片 - const updatedCardList = [...cardList, ...newCards]; - this.drawCanvas(updatedCardList); - }, - - deleteWordCard(e: WechatMiniprogram.CustomEvent) { - const { key, word } = e.detail; - const { cardList } = this.data; - const updatedCardList = cardList.filter((_, index) => index !== key); - this.drawCanvas(updatedCardList, () => { - wx.showToast({ - title: `已删除 "${word}"`, - icon: 'none', - duration: 2000, - }); - }); - }, - - /** 下载打印 */ - async exportToPrint() { - if (!this.canvas || this.data.cardList.length <= 0) { - return; - } - - await downloadPrint(this.canvas, { - errorToast: '请先生成涂色卡', - trackerName: '涂色识字', - trackerMode: this.data.selectedTemplate, - }); - }, - - /** 分享成功回调（由组件触发） */ - onShareSuccess() { - this.setData({ showShareDialog: false }); - }, - - onColorTap(e: WechatMiniprogram.CustomEvent) { - const { key, color } = e.detail; - this.setData({ - showColorPopup: true, - currentKey: key, - currentColor: color, - }); - }, - - onCloseColorPopup() { - this.setData({ - showColorPopup: false, - currentKey: 0, - currentColor: '', - }); - }, - - onChangeColor(e: WechatMiniprogram.CustomEvent) { - const { color } = e.detail; - const { currentKey, cardList } = this.data; - cardList[currentKey].color = color; - this.setData( - { - showColorPopup: false, - cardList, - }, - () => { - this.drawCanvas(); - }, - ); - }, - - onCloseIntroductionPopup() { - this.setData({ showIntroductionPopup: false }); - wx.setStorageSync('hasShowIntroduction', true); - }, - - onShareAppMessage() { - // 上报分享埋点 - tracker.reportShare('涂色识字'); - - return { - ...defaultShareConfig, - path: `/pages/index/index?template=${this.data.selectedTemplate}`, - }; - }, - onShareTimeline() { - // 上报分享埋点 - tracker.reportShare('涂色识字'); - - return { - ...defaultShareConfig, - query: `/pages/index/index?template=${this.data.selectedTemplate}`, - }; - }, - - clearCardList() { - // 清空cardList时，重置canvas相关引用，因为DOM元素会被移除 - this.canvas = null; - this.ctx = null; - this.drawService = null; - this.drawCanvas([]); - }, - - // 随机生成 - refreshCardList() { - // 获取前4个分类的所有文字 - const allWords = WORDS.slice(0, 2).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, - })); - this.drawCanvas(cardList); - }, - openSelectWordPopup() { - this.setData({ - showSelectWordPopup: true, - }); - }, - - closeSelectWordPopup() { - this.setData({ - showSelectWordPopup: false, - }); - }, - - // 获取颜色字对应的16进制颜色值 - getColorByWord(word: string): string | null { - const colorMap: Record = { - 红: '#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) => { - const colorHex = this.getColorByWord(word); - return { - color: colorHex || colors[index].hex, - word, - }; - }); - - this.setData({ showSelectWordPopup: false }); - this.drawCanvas(cardList); - }, - - onDebugEntryTap() { - wx.navigateTo({ - url: '/supportPages/debug/debug', - }); - }, - - // 模板选择事件 - onSelectTemplate(e: WechatMiniprogram.TouchEvent) { - const { template } = e.currentTarget.dataset; - this.setData( - { - selectedTemplate: template, - }, - () => { - // 模板切换后，重新创建绘制服务并重新绘制 - if (this.canvas && this.ctx) { - this.createDrawService(); - // 如果有文字卡片，重新绘制canvas - if (this.data.cardList.length > 0) { - this.drawCanvas(); - } - } - }, - ); - }, -}); diff --git a/miniprogram/supportPages/index/index.wxml b/miniprogram/supportPages/index/index.wxml deleted file mode 100644 index d9f7c8e..0000000 --- a/miniprogram/supportPages/index/index.wxml +++ /dev/null @@ -1,146 +0,0 @@ - - - 自定义涂鸦卡 - - - - 选择文字 - - - - - - - - - - - - 随机生成 - - - 清空 - - - - - - 选择涂色模板 - - - - ✓ - - 网格模板 - - - - ✓ - - 找字模板 - - - - - - - 预览打印效果 - - - - - - - - - - - - 分享 - - - 下载打印 - - - - -