feat: 涂色识字完善、找字涂色完成

2026-05-09 09:56:16 +08:00
parent b85afde7c0
commit c21ac9e935
27 changed files with 328 additions and 1135 deletions
@@ -17,7 +17,6 @@
                "categoryManage/categoryManage",
                "categoryContentManage/categoryContentManage",
                "homeContentManage/homeContentManage",
-                "index/index",
                "mathIndex/mathIndex",
                "focusIndex/focusIndex",
                "copyBook/copyBook"
@@ -10,7 +10,7 @@
 * - TextDrawService：文字涂色服务
 * - FindWordDrawService：找字涂色服务
 */
-import { BaseDrawService } from '../core/draw/baseDraw';
+import { BaseDrawService } from '../../../core/draw/baseDraw';
 import { POSITION_TEMPLATES } from './findWordTemplate';

 // ==================== Debug 开关 ====================
@@ -3,7 +3,7 @@
 * 根据文字列表绘制到Canvas
 */

-import { BaseDrawService } from '../core/draw/baseDraw';
+import { BaseDrawService } from '../../../core/draw/baseDraw';
 /**
 * 计算示例区域圆的中心点
 * @param canvasWidth 画布宽度（逻辑像素）
@@ -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,
    },
@@ -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"
    }
 }
@@ -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<string, string> = {
-    红: '#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<string, any>,
-                ) => 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<string, string>(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<string, string>(
+                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<string>();

            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<string, string>(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<string, string>(
+                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<string>();

            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() {
@@ -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) {
@@ -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: ['个', '只', '匹', '条', '朵', '棵', '片', '张', '本', '杯', '块', '双'],
-    },
-];
@@ -28,7 +28,7 @@ export const CATEGORY_LIST: CategoryType[] = [
    },
    {
        id: 'chinese',
-        name: '趣味识字',
+        name: '识字练字',
        icon: '✏️',
        path: '/pages/category/category?id=chinese',
    },
@@ -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;
-}
@@ -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"
    }
@@ -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"
@@ -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) {
            // 删除的是输入汉字
@@ -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"
-    }
-}
@@ -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;
-}
@@ -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<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) => {
-            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();
-                    }
-                }
-            },
-        );
-    },
-});
@@ -1,146 +0,0 @@
-<view class="page-container">
-    <view class="wrapper">
-        <text class="wrapper-title">自定义涂鸦卡</text>
-        <view class="word-input-box">
-            <word-input bind:onConfirm="onConfirmInput" width="410rpx" />
-            <toy-button
-                type="green"
-                bind:click="openSelectWordPopup"
-                width="200rpx">
-                选择文字
-            </toy-button>
-        </view>
-
-        <view class="word-card-box">
-            <view class="word-cards-grid" wx:if="{{cardList.length > 0}}">
-                <word-card
-                    wx:key="index"
-                    wx:for="{{cardList}}"
-                    wx:for-item="item"
-                    wx:for-index="index"
-                    key="{{index}}"
-                    word="{{item.word}}"
-                    color="{{item.color}}"
-                    bind:onDelete="deleteWordCard"
-                    bind:onColorTap="onColorTap" />
-            </view>
-            <empty-state
-                wx:if="{{!cardList.length}}"
-                title="还没有添加文字"
-                desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
-                hint="提示：最多可以同时添加 6 个文字" />
-        </view>
-        <view class="operation-box">
-            <toy-button
-                type="primary"
-                bind:click="refreshCardList"
-                width="410rpx"
-                icon="refresh"
-                icon-class-prefix="toy-icon">
-                随机生成
-            </toy-button>
-            <toy-button
-                disabled="{{cardList.length <= 0}}"
-                type="white"
-                bind:click="clearCardList"
-                width="200rpx"
-                icon="clear"
-                icon-class-prefix="toy-icon">
-                清空
-            </toy-button>
-        </view>
-
-        <!-- 趣味模板选择区域 -->
-        <view class="template-section">
-            <view class="template-title">选择涂色模板</view>
-            <view class="template-list">
-                <view
-                    class="template-item {{selectedTemplate === 'grid' ? 'active' : ''}}"
-                    data-template="grid"
-                    bind:tap="onSelectTemplate">
-                    <view class="template-checkbox">
-                        <view
-                            class="checkbox-icon"
-                            wx:if="{{selectedTemplate === 'grid'}}"
-                            >✓</view
-                        >
-                    </view>
-                    <view class="template-name">网格模板</view>
-                </view>
-                <view
-                    class="template-item {{selectedTemplate === 'find' ? 'active' : ''}}"
-                    data-template="find"
-                    bind:tap="onSelectTemplate">
-                    <view class="template-checkbox">
-                        <view
-                            class="checkbox-icon"
-                            wx:if="{{selectedTemplate === 'find'}}"
-                            >✓</view
-                        >
-                    </view>
-                    <view class="template-name">找字模板</view>
-                </view>
-            </view>
-            <ad-custom unit-id="adunit-4efb537f971b3f7d"></ad-custom>
-        </view>
-    </view>
-    <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
-        <text class="wrapper-title">预览打印效果</text>
-        <view id="canvasWrapper" class="canvas-wrapper">
-            <canvas
-                type="2d"
-                id="canvasContent"
-                class="canvas-content"
-                style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
-        </view>
-    </view>
-    <van-cell
-        wx:if="{{env !== 'release'}}"
-        is-link
-        title="debug页面"
-        link-type="navigateTo"
-        url="/supportPages/debug/debug" />
-    <view class="empty"></view>
-    <color-picker
-        show="{{showColorPopup}}"
-        currentColor="{{currentColor}}"
-        bind:onClose="onCloseColorPopup"
-        bind:onChange="onChangeColor" />
-    <word-picker
-        show="{{showSelectWordPopup}}"
-        cardList="{{cardList}}"
-        bind:onClose="closeSelectWordPopup"
-        bind:onChange="onChangeWord" />
-</view>
-<view class="bottom-btn-box">
-    <toy-button
-        openType="share"
-        type="green"
-        flat="{{true}}"
-        bind:click="onShareAppMessage"
-        width="220rpx"
-        height="80rpx"
-        icon="wechat"
-        icon-class-prefix="toy-icon">
-        分享
-    </toy-button>
-    <toy-button
-        type="primary"
-        flat="{{true}}"
-        bind:click="exportToPrint"
-        width="420rpx"
-        height="80rpx"
-        disabled="{{cardList.length <= 0}}"
-        icon="download"
-        icon-class-prefix="toy-icon">
-        下载打印
-    </toy-button>
-</view>
-<introduction-popup
-    wx:if="{{showIntroductionPopup}}"
-    bind:onClose="onCloseIntroductionPopup" />
-<share-guide-popup
-    show="{{showShareDialog}}"
-    bind:onClose="onCloseShareDialog"
-    bind:onShareSuccess="onShareSuccess" />
-<add-to-miniprogram-tip />