feat: 开发练字页

miniprogram/pages/wordDemo/index.less

@@ -10,6 +10,84 @@ page {
     overflow-y: auto;
 }
 
+.preview-section {
+    margin-top: 24rpx;
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 24rpx;
+    box-shadow: 0 6rpx 8rpx rgba(0, 0, 0, 0.15);
+}
+
+.section-title {
+    display: block;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: bold;
+    margin-bottom: 24rpx;
+}
+
+.tianzige {
+    display: grid;
+    grid-auto-rows: min-content;
+    row-gap: 12rpx;
+}
+
+.tzg-row {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    column-gap: 12rpx;
+}
+
+.tzg-cell {
+    position: relative;
+    background: #fff;
+    border: 4rpx solid #333;
+    height: 120rpx;
+    border-radius: 6rpx;
+    overflow: hidden;
+}
+
+.tzg-word {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 72rpx;
+    color: #222;
+    font-family: 'Kaiti', 'KaiTi', 'STKaiti', 'FZKai-Z03S', serif;
+}
+
+.mid-line {
+    position: absolute;
+    background: repeating-linear-gradient(to right,
+            rgba(0, 0, 0, 0.25),
+            rgba(0, 0, 0, 0.25) 2rpx,
+            transparent 2rpx,
+            transparent 6rpx);
+}
+
+.mid-line.h {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 2rpx;
+    transform: translateY(-50%);
+}
+
+.mid-line.v {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 2rpx;
+    transform: translateX(-50%);
+}
+
+.empty-tip {
+    text-align: center;
+    color: #999;
+    font-size: 28rpx;
+}
+
 /* 输入区域样式 */
 .input-section {
     background-color: #fff;

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

miniprogram/pages/wordDemo/index.wxml

@@ -61,3 +61,28 @@
         </view>
     </view>
 </view>
+
+<!-- 预览：田字格 -->
+<view class="preview-section">
+    <text class="section-title">预览练字田字格</text>
+    <view wx:if="{{rowHeaderWords.length > 0}}" class="tianzige">
+        <view
+            class="tzg-row"
+            wx:for="{{rowsArray}}"
+            wx:for-index="rowIndex"
+            wx:key="rowIndex">
+            <view
+                class="tzg-cell"
+                wx:for="{{colsArray}}"
+                wx:for-index="colIndex"
+                wx:key="{{rowIndex}}-{{colIndex}}">
+                <text wx:if="{{colIndex === 0}}" class="tzg-word"
+                    >{{rowHeaderWords[rowIndex]}}</text
+                >
+                <view class="mid-line h"></view>
+                <view class="mid-line v"></view>
+            </view>
+        </view>
+    </view>
+    <view wx:else class="empty-tip">请选择或输入汉字后生成田字格</view>
+</view>