feat: 开发练字页

miniprogram/pages/copyBook/index.ts

@@ -0,0 +1,91 @@
+Page({
+    data: {
+        // 选中字卡列表，复用 index 页的结构 [{ word, color }]
+        cardList: [] as { word: string; color: string }[],
+        showSelectWordPopup: false,
+
+        // 田字格配置
+        rows: 10,
+        cols: 12,
+        rowsArray: [] as number[],
+        colsArray: [] as number[],
+        rowHeaderWords: [] as string[],
+    },
+
+    onLoad() {
+        this.initGrid();
+    },
+
+    // 输入组件回调
+    onConfirmInput(e: any) {
+        const value: string = (e && e.detail && e.detail.value) || '';
+        const text = (value || '').trim();
+        if (!text) return;
+
+        if (!this.isChineseText(text)) {
+            wx.showToast({ title: '请输入汉字', icon: 'none' });
+            return;
+        }
+
+        const chars = this.splitToSingleChars(text);
+        const { cardList } = this.data as any;
+        const exists = new Set(cardList.map((c: any) => c.word));
+        const newList = [...cardList];
+        chars.forEach((ch) => {
+            if (!exists.has(ch)) {
+                newList.push({ word: ch, color: '#141414' });
+            }
+        });
+        this.setData({ cardList: newList }, () => this.updateRowHeaderWords());
+    },
+
+    // 选择面板
+    openSelectWordPopup() {
+        this.setData({ showSelectWordPopup: true });
+    },
+    closeSelectWordPopup() {
+        this.setData({ showSelectWordPopup: false });
+    },
+    onChangeWord(e: any) {
+        const { cardList } = e.detail || {};
+        this.setData({ cardList }, () => this.updateRowHeaderWords());
+    },
+
+    // 删除与颜色
+    deleteWordCard(e: any) {
+        const index = e.detail && e.detail.index;
+        const { cardList } = this.data as any;
+        const next = cardList.filter((_: any, i: number) => i !== index);
+        this.setData({ cardList: next }, () => this.updateRowHeaderWords());
+    },
+    onColorTap() { },
+
+    // 校验 & 分割
+    isChineseText(text: string): boolean {
+        const chineseRegex = /^[\u4e00-\u9fff]+$/;
+        return chineseRegex.test(text);
+    },
+    splitToSingleChars(text: string): string[] {
+        const chineseRegex = /[\u4e00-\u9fff]/g;
+        const matches = text.match(chineseRegex);
+        return matches || [];
+    },
+
+    // 田字格
+    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, cardList } = this.data as any;
+        const rowHeaderWords: string[] = [];
+        for (let i = 0; i < rows; i++) {
+            rowHeaderWords.push((cardList[i] && cardList[i].word) || '');
+        }
+        this.setData({ rowHeaderWords });
+    },
+});
+
+