feat: 开发练字页

miniprogram/pages/wordDemo/index.ts

@@ -3,10 +3,17 @@ Page({
         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个汉字
@@ -70,6 +77,8 @@ Page({
             this.setData({
                 wordList: newWordList,
                 inputWord: '' // 清空输入框
+            }, () => {
+                this.updateRowHeaderWords();
             });
 
             wx.showToast({
@@ -128,6 +137,8 @@ Page({
         const newWordList = wordList.filter((_, i) => i !== index);
         this.setData({
             wordList: newWordList
+        }, () => {
+            this.updateRowHeaderWords();
         });
         wx.showToast({
             title: '已移除',
@@ -139,10 +150,30 @@ Page({
     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 });
+    },
 });