doodle-mini/miniprogram/pages/wordDemo/index.ts

Page({
    data: {
        inputWord: '', // 输入框中的汉字
        wordList: [] as string[], // 选中的汉字列表
        availableWords: [] as string[], // 从grade3.json中提取的前30个汉字
        // 田字格配置
        rows: 10,
        cols: 12,
        rowsArray: [] as number[],
        colsArray: [] as number[],
        rowHeaderWords: [] as string[],
    },

    onLoad() {
        this.loadGrade3Words();
        this.initGrid();
    },

    // 加载grade3.json中的前30个汉字
    loadGrade3Words() {
        const fs = wx.getFileSystemManager();
        try {
            const fileContent = fs.readFileSync('demo/grade3.json', 'utf8') as string;
            const grade3Data = JSON.parse(fileContent);
            const words = Object.keys(grade3Data).slice(0, 30);
            this.setData({
                availableWords: words
            });
        } catch (error) {
            console.error('加载grade3.json失败:', error);
            // 如果文件读取失败，使用一些示例汉字
            const fallbackWords = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '人', '口', '手', '足', '目', '耳', '鼻', '舌', '心', '肝', '脾', '肺', '肾', '胃', '肠', '胆', '膀', '胱', '皮', '毛'];
            this.setData({
                availableWords: fallbackWords
            });
        }
    },

    // 输入框输入事件
    onInputChange(e: WechatMiniprogram.Input) {
        this.setData({
            inputWord: e.detail.value
        });
    },

    // 生成按钮点击事件
    onGenerateClick() {
        const { inputWord, wordList } = this.data;
        if (inputWord && inputWord.trim()) {
            const inputText = inputWord.trim();

            // 校验输入是否为汉字
            if (!this.isChineseText(inputText)) {
                wx.showToast({
                    title: '请输入汉字',
                    icon: 'none'
                });
                return;
            }

            // 将输入文本分割为单个汉字
            const singleChars = this.splitToSingleChars(inputText);

            // 过滤掉已存在的汉字
            const newChars = singleChars.filter(char => !wordList.includes(char));

            if (newChars.length === 0) {
                wx.showToast({
                    title: '所有汉字都已存在',
                    icon: 'none'
                });
                return;
            }

            // 添加到列表中
            const newWordList = [...wordList, ...newChars];
            this.setData({
                wordList: newWordList,
                inputWord: '' // 清空输入框
            }, () => {
                this.updateRowHeaderWords();
            });

            wx.showToast({
                title: `已添加${newChars.length}个汉字`,
                icon: 'success'
            });
        } else {
            wx.showToast({
                title: '请输入汉字',
                icon: 'none'
            });
        }
    },

    // 校验文本是否为汉字
    isChineseText(text: string): boolean {
        // 汉字Unicode范围：\u4e00-\u9fff
        const chineseRegex = /^[\u4e00-\u9fff]+$/;
        return chineseRegex.test(text);
    },

    // 将文本分割为单个汉字
    splitToSingleChars(text: string): string[] {
        // 使用正则表达式匹配每个汉字
        const chineseRegex = /[\u4e00-\u9fff]/g;
        const matches = text.match(chineseRegex);
        return matches || [];
    },

    // 选择汉字点击事件
    onWordSelect(e: WechatMiniprogram.TouchEvent) {
        const { word } = e.currentTarget.dataset;
        const { wordList } = this.data;

        if (!wordList.includes(word)) {
            const newWordList = [...wordList, word];
            this.setData({
                wordList: newWordList
            });
            wx.showToast({
                title: '已选择',
                icon: 'success'
            });
        } else {
            wx.showToast({
                title: '已选择过',
                icon: 'none'
            });
        }
    },

    // 从列表中移除汉字
    onRemoveWord(e: WechatMiniprogram.TouchEvent) {
        const { index } = e.currentTarget.dataset;
        const { wordList } = this.data;
        const newWordList = wordList.filter((_, i) => i !== index);
        this.setData({
            wordList: newWordList
        }, () => {
            this.updateRowHeaderWords();
        });
        wx.showToast({
            title: '已移除',
            icon: 'success'
        });
    },

    // 清空所有选中的汉字
    onClearAll() {
        this.setData({
            wordList: []
        }, () => {
            this.updateRowHeaderWords();
        });
        wx.showToast({
            title: '已清空',
            icon: 'success'
        });
    },

    // 初始化田字格行列数组
    initGrid() {
        const { rows, cols } = this.data as any;
        const rowsArray = Array.from({ length: rows }, (_, i) => i);
        const colsArray = Array.from({ length: cols }, (_, i) => i);
        this.setData({ rowsArray, colsArray });
    },

    // 根据选中的汉字生成每行首字数组
    updateRowHeaderWords() {
        const { rows, wordList } = this.data as any;
        const rowHeaderWords: string[] = [];
        for (let i = 0; i < rows; i++) {
            rowHeaderWords.push(wordList[i] || '');
        }
        this.setData({ rowHeaderWords });
    },
});