feat:练字贴功能基本完成

miniprogram/components/empty-state/empty-state.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

miniprogram/components/empty-state/empty-state.less

@@ -0,0 +1,67 @@
+.word-list-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 50rpx 40rpx;
+    text-align: center;
+
+    .empty-icon {
+        width: 120rpx;
+        height: 120rpx;
+        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 32rpx;
+        box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
+
+        .empty-logo {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+    }
+
+    .empty-title {
+        font-size: 32rpx;
+        font-weight: 600;
+        color: #374151;
+        margin-bottom: 16rpx;
+        line-height: 1.4;
+    }
+
+    .empty-desc {
+        font-size: 26rpx;
+        color: #6b7280;
+        line-height: 1.6;
+        margin-bottom: 32rpx;
+        max-width: 480rpx;
+    }
+}
+
+.empty-hint {
+    display: flex;
+    align-items: center;
+    background: #f8fafc;
+    border: 1rpx solid #e2e8f0;
+    border-radius: 12rpx;
+    padding: 20rpx 24rpx;
+    max-width: 500rpx;
+
+    .hint-icon {
+        font-size: 24rpx;
+        margin-right: 12rpx;
+        margin-top: -2rpx;
+        flex-shrink: 0;
+    }
+
+    .hint-text {
+        font-size: 22rpx;
+        color: #64748b;
+        line-height: 1.5;
+        text-align: left;
+    }
+}

miniprogram/components/empty-state/empty-state.ts

@@ -0,0 +1,10 @@
+Component({
+    properties: {
+        title: { type: String, value: '' },
+        desc: { type: String, value: '' },
+        hint: { type: String, value: '' },
+    },
+    data: {},
+    methods: {},
+});
+

miniprogram/components/empty-state/empty-state.wxml

@@ -0,0 +1,14 @@
+<view class="word-list-empty">
+    <view class="empty-icon">
+        <image
+            class="empty-logo"
+            src="../../assets/imgs/doodle-logo.png"
+            mode="aspectFill"></image>
+    </view>
+    <view class="empty-title">{{title}}</view>
+    <view class="empty-desc">{{desc}}</view>
+    <view class="empty-hint" wx:if="{{hint}}">
+        <text class="hint-icon">💡</text>
+        <text class="hint-text">{{hint}}</text>
+    </view>
+</view>

miniprogram/components/word-card/word-card.ts

@@ -31,7 +31,9 @@ Component({
         color: '',
     },
     lifetimes: {
-        attached() { },
+        // attached() {
+        //     console.log('this.data:', this.data);
+        // },
     },
     /**
      * 组件的方法列表

miniprogram/components/word-picker/word-picker.ts

@@ -10,6 +10,10 @@ Component({
             type: Boolean,
             value: false,
         },
+        cardList: {
+            type: Array,
+            value: [],
+        },
         currentTab: {
             type: Number,
             value: 0,
@@ -31,14 +35,20 @@ Component({
     },
     lifetimes: {
         ready() {
+            // 初始化同步一次 selectedWords，避免首次传入时未触发 observers 的情况
+            const list = (this.data as any).cardList || [];
+            if (Array.isArray(list) && list.length > 0) {
+                const selectedWords = list.map((item: any) => item.word);
+                this.setData({ selectedWords });
+            }
         },
     },
-    /* observers: {
+    observers: {
         cardList(newVal: CardList) {
             const selectedWords = newVal.map((item) => item.word);
             this.setData({ selectedWords });
         },
-    }, */
+    },
     /**
      * 组件的方法列表
      */

miniprogram/components/word-picker/word-picker.wxml

@@ -30,7 +30,7 @@
                 wx:for="{{wordList}}"
                 wx:for-index="categoryIndex"
                 wx:key="categoryIndex"
-                title="{{wordList[categoryIndex].categoryName}}">
+                title="{{wordList[categoryIndex].icon}} {{wordList[categoryIndex].categoryName}}">
                 <view class="word-list-wrapper">
                     <view class="word-list">
                         <view

miniprogram/config/config.ts

@@ -1,6 +1,6 @@
 export default {
     printHeader: {
-        header: 'LogoImage',
+        header: 'wechat',
         appName: '涂鸦丫'
     }
 }

miniprogram/constants/words.ts

@@ -1,59 +1,18 @@
+// 为避免保存时的自动格式化将数组元素强制换行，保持紧凑展示
+// prettier-ignore
 export const WORDS = [
     {
         categoryId: 0,
         icon: '🌟',
         categoryName: '基础独体字',
         words: [
-            '人',
+            '人', '口', '手', '上', '下', '日', '月', '水', '火', '山', '大', '小', '天', '土', '木',
-            '口',
+            '中', '个', '工', '王', '车', '儿', '女', '子', '门', '马', '牛', '羊', '米', '衣', '白',
-            '手',
+            '田', '石', '雨', '电', '云', '花', '草', '叶', '果', '鸟', '虫', '鱼', '头', '目', '耳',
-            '上',
+            '足', '心', '力', '立', '正',
-            '下',
+            // 扩充（常见基础字）
-            '日',
+            '刀', '又', '三', '四', '五', '六', '七', '八', '九', '十', '口', '门', '心', '耳', '目',
-            '月',
+            '牙', '鼻', '口', '眉', '田', '米', '木', '竹', '石', '土', '火', '水', '金'
-            '水',
-            '火',
-            '山',
-            '大',
-            '小',
-            '天',
-            '土',
-            '木',
-            '中',
-            '个',
-            '工',
-            '王',
-            '车',
-            '儿',
-            '女',
-            '子',
-            '门',
-            '马',
-            '牛',
-            '羊',
-            '米',
-            '衣',
-            '白',
-            '田',
-            '石',
-            '雨',
-            '电',
-            '云',
-            '花',
-            '草',
-            '叶',
-            '果',
-            '鸟',
-            '虫',
-            '鱼',
-            '头',
-            '目',
-            '耳',
-            '足',
-            '心',
-            '力',
-            '立',
-            '正',
         ],
     },
     {
@@ -61,113 +20,29 @@ export const WORDS = [
         icon: '🏠',
         categoryName: '生活高频字',
         words: [
-            '爸',
+            '爸', '妈', '爷', '奶', '哥', '弟', '姐', '妹', '书', '包', '尺', '刀', '本', '笔', '桌',
-            '妈',
+            '灯', '家', '房', '床', '吃', '喝', '坐', '走', '跑', '看', '听', '说', '笑', '哭', '爱',
-            '爷',
+            '好', '有', '来', '去', '开', '关', '里', '外', '多', '少', '红', '黄', '蓝', '绿', '白',
-            '奶',
+            '黑', '是', '不', '我', '你',
-            '哥',
+            // 扩充（贴近生活）
-            '弟',
+            '他', '她', '它', '们', '在', '和', '把', '给', '用', '做', '玩', '买', '卖', '学', '读',
-            '姐',
+            '写', '问', '答', '听', '看', '吃', '喝', '睡', '起', '穿', '洗', '擦', '开', '关', '拿',
-            '妹',
+            '放'
-            '书',
-            '包',
-            '尺',
-            '刀',
-            '本',
-            '笔',
-            '桌',
-            '灯',
-            '家',
-            '房',
-            '床',
-            '吃',
-            '喝',
-            '坐',
-            '走',
-            '跑',
-            '看',
-            '听',
-            '说',
-            '笑',
-            '哭',
-            '爱',
-            '好',
-            '有',
-            '来',
-            '去',
-            '开',
-            '关',
-            '里',
-            '外',
-            '多',
-            '少',
-            '红',
-            '黄',
-            '蓝',
-            '绿',
-            '白',
-            '黑',
-            '是',
-            '不',
-            '我',
-            '你',
         ],
     },
     {
         categoryId: 2,
-        icon: '',
+        icon: '🌿',
         categoryName: '自然与动作',
         words: [
-            '风',
+            '风', '雪', '星', '光', '林', '河', '海', '沙', '树', '苗', '春', '夏', '秋', '冬', '东',
-            '雪',
+            '南', '西', '北', '飞', '跳', '游', '唱', '画', '洗', '买', '卖', '问', '学', '读', '写',
-            '星',
+            '早', '晚', '明', '亮', '高', '长', '圆', '方', '快', '乐', '热', '冷', '轻', '重', '新',
-            '光',
+            '旧', '和', '同', '会', '要',
-            '林',
+            // 扩充（自然与常见动作）
-            '河',
+            '雨', '雷', '电', '云', '雾', '露', '霜', '星', '月', '阳', '阴', '晴', '风', '雪', '冰',
-            '海',
+            '草', '花', '叶', '果', '根', '看', '听', '说', '读', '写', '跑', '跳', '走', '爬', '抓',
-            '沙',
+            '推', '拉', '抱', '笑', '哭'
-            '树',
-            '苗',
-            '春',
-            '夏',
-            '秋',
-            '冬',
-            '东',
-            '南',
-            '西',
-            '北',
-            '飞',
-            '跳',
-            '游',
-            '唱',
-            '画',
-            '洗',
-            '买',
-            '卖',
-            '问',
-            '学',
-            '读',
-            '写',
-            '早',
-            '晚',
-            '明',
-            '亮',
-            '高',
-            '长',
-            '圆',
-            '方',
-            '快',
-            '乐',
-            '热',
-            '冷',
-            '轻',
-            '重',
-            '新',
-            '旧',
-            '和',
-            '同',
-            '会',
-            '要',
         ],
     },
     {
@@ -178,188 +53,167 @@ export const WORDS = [
     },
     {
         categoryId: 4,
-        icon: '',
+        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'
-            '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: '🎨',
+        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'],
+        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: ['日', '明', '早', '时', '晴', '春', '星', '晨'],
+        words: ['日', '明', '早', '时', '晴', '春', '星', '晨', '晚', '晒', '照'],
     },
     {
         categoryId: 7,
         icon: '💧',
         categoryName: '三点水',
-        words: ['水', '江', '河', '流', '沙', '洗', '海', '汗'],
+        words: ['水', '江', '河', '流', '沙', '洗', '海', '汗', '汽', '澡', '泡', '湖', '泉'],
     },
     {
         categoryId: 8,
         icon: '🐦',
         categoryName: '鸟字边',
-        words: ['鸟', '鸡', '鸭', '鹅', '鸣', '鸽', '鸦'],
+        words: ['鸟', '鸡', '鸭', '鹅', '鸣', '鸽', '鸦', '鹊', '鹤'],
     },
     {
         categoryId: 9,
         icon: '🐾',
         categoryName: '反犬旁',
-        words: ['狗', '猫', '猴', '狮', '狼', '猪'],
+        words: ['狗', '猫', '猴', '狮', '狼', '猪', '狠', '独', '犯'],
     },
     {
         categoryId: 10,
         icon: '🪱',
         categoryName: '虫字旁',
-        words: ['虫', '蚁', '蝶', '蜻', '蛙', '蛇', '蜘', '蜂'],
+        words: ['虫', '蚁', '蝶', '蜻', '蛙', '蛇', '蜘', '蜂', '蚊', '蛾'],
     },
     {
         categoryId: 11,
         icon: '🌧️',
         categoryName: '雨字头',
-        words: ['雨', '雪', '雷', '露', '雾', '雹', '霜'],
+        words: ['雨', '雪', '雷', '露', '雾', '雹', '霜', '雯', '霖'],
     },
     {
         categoryId: 12,
         icon: '🌲',
         categoryName: '木字旁',
-        words: ['木', '林', '树', '桃', '森', '松', '桥', '枝'],
+        words: ['木', '林', '树', '桃', '森', '松', '桥', '枝', '板', '柜', '杯', '校'],
     },
     {
         categoryId: 13,
         icon: '👄',
         categoryName: '口字旁',
-        words: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和'],
+        words: ['口', '吃', '叫', '唱', '听', '吹', '叶', '和', '问', '品', '吐', '吸'],
     },
     {
         categoryId: 14,
         icon: '🧍',
         categoryName: '单人旁',
-        words: ['你', '他', '们', '作', '休', '住', '伙', '伴'],
+        words: ['你', '他', '们', '作', '休', '住', '伙', '伴', '体', '位', '信', '化'],
     },
     {
         categoryId: 15,
         icon: '❤️',
         categoryName: '竖心旁',
-        words: ['心', '情', '快', '怕', '惊', '忙', '怀'],
+        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: ['个', '只', '匹', '条', '朵', '棵', '片', '张', '本', '杯', '块', '双'],
     },
 ];

miniprogram/pages/copyBook/copyBook.json

@@ -9,6 +9,7 @@
         "van-icon": "@vant/weapp/icon/index",
         "word-input": "/components/word-input/word-input",
         "word-card": "/components/word-card/word-card",
-        "word-picker": "/components/word-picker/word-picker"
+        "word-picker": "/components/word-picker/word-picker",
+        "empty-state": "/components/empty-state/empty-state"
     }
 }

miniprogram/pages/copyBook/copyBook.less

@@ -32,48 +32,6 @@ page {
     .word-card-box {
         padding: 34rpx 0;
 
-        .word-list-empty {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 60rpx 40rpx;
-            text-align: center;
-
-            .empty-icon {
-                width: 120rpx;
-                height: 120rpx;
-                background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin-bottom: 32rpx;
-                box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
-
-                .toy-icon {
-                    font-size: 48rpx;
-                    color: #3b82f6;
-                }
-            }
-
-            .empty-title {
-                font-size: 32rpx;
-                font-weight: 600;
-                color: #374151;
-                margin-bottom: 16rpx;
-                line-height: 1.4;
-            }
-
-            .empty-desc {
-                font-size: 26rpx;
-                color: #6b7280;
-                line-height: 1.6;
-                margin-bottom: 32rpx;
-                max-width: 400rpx;
-            }
-        }
-
         .word-cards-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
@@ -86,6 +44,12 @@ page {
         flex-direction: row;
         justify-content: space-between;
     }
+
+    .operation-box {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
 }
 
 .tianzige {

miniprogram/pages/copyBook/copyBook.ts

@@ -2,6 +2,7 @@ import WordDrawService from '../../service/wordDrawService';
 import { checkAndSaveImage } from '../../utils/saveImage';
 import { PAPER_SIZE } from '../../constants/colors';
 import { getWordsSvgData } from '../../utils/getWordsSvgJson';
+import { WORDS } from '../../constants/words';
 import { CharacterItem } from '../../types/characterType';
 
 Page({
@@ -9,6 +10,8 @@ Page({
     ctx: null as RenderingContext | null,
     wordDrawService: null as WordDrawService | null,
     svgWords: {} as Record<string, string[]>,
+    maxRow: 0 as number,
+    maxCol: 0 as number,
 
     data: {
         // 选中的汉字列表
@@ -21,18 +24,17 @@ Page({
         boxHeight: 0,
     },
 
-    onLoad() {
+    async onLoad() {
-        this.loadSvgWords();
+        await this.loadSvgWords();
-        const hasShowIntroduction =
+        const hasShowPracticeDemo =
-            wx.getStorageSync('hasShowIntroduction') || false;
+            wx.getStorageSync('hasShowPracticeDemo') || false;
-        if (!hasShowIntroduction) {
+        if (!hasShowPracticeDemo) {
             this.setData({
                 words: ['好', '好', '学', '习', '天', '天', '向', '上']
+            }, () => {
+                wx.setStorageSync('hasShowPracticeDemo', true);
             })
         }
-    },
-
-    async onReady() {
         await this.setCanvasBoxSize();
         await this.initCanvas()
     },
@@ -40,12 +42,9 @@ Page({
     async loadSvgWords() {
         try {
             wx.showToast({ title: '加载字体中...', icon: 'loading' });
-            console.log("loadSvgWords");
             // 使用带缓存的SVG汉字数据获取函数
             const svgWordsData = await getWordsSvgData();
 
-            console.log("svgWordsData", svgWordsData);
-
             this.svgWords = svgWordsData;
             wx.hideToast();
 
@@ -147,6 +146,30 @@ Page({
         this.setData({ words: next }, () => this.renderPracticeContent().catch(console.error));
     },
 
+    // 清空
+    clearWords() {
+        this.setData({ words: [] }, () => this.renderPracticeContent().catch(console.error));
+    },
+
+    // 随机生成（取基础分类，过滤为可用SVG字，最多11个）
+    refreshWords() {
+        // 选取较简单的几个分类（如 0:基础独体字，1:生活高频字，2:自然与动作）
+        const candidate = WORDS.slice(0, 3).reduce((acc: string[], c: any) => acc.concat(c.words), [] as string[]);
+        // 去重
+        const unique = Array.from(new Set(candidate));
+        // 打乱
+        const shuffled = unique.sort(() => Math.random() - 0.5);
+        // 先取前 11 个
+        const picked = shuffled.slice(0, 10);
+        // 过滤为支持的SVG字
+        const supported = this.getSupportedWords(picked);
+        if (supported.length === 0) {
+            wx.showToast({ title: '随机到的字暂不支持，重试一下', icon: 'none' });
+            return;
+        }
+        this.setData({ words: supported }, () => this.renderPracticeContent().catch(console.error));
+    },
+
     // 校验 & 分割
     isChineseText(text: string): boolean {
         const chineseRegex = /^[\u4e00-\u9fff]+$/;
@@ -189,16 +212,16 @@ Page({
                         if (ctx) {
                             this.canvas = canvas;
                             this.ctx = ctx;
-                            this.wordDrawService = new WordDrawService(canvas, ctx, {
+                            this.wordDrawService = new WordDrawService(canvas, ctx);
-                                appName: '涂鸦丫小程序',
-                                appHint: '练字|识字|涂色｜打印',
-                                title: '田字格  练 字  贴',
-                                subTitle: '按笔画临摹练习'
-                            });
 
                             // 初始化时只绘制页眉和布局
                             await this.wordDrawService.drawLayout();
 
+                            // 绘制完成后计算并缓存最大行列数（与实际绘制一致）
+                            const { maxRow, maxCol } = this.wordDrawService.getMaxGridLayout();
+                            this.maxRow = maxRow;
+                            this.maxCol = maxCol;
+
                             // 如果有汉字数据，绘制练字内容
                             const { words } = this.data as any;
                             if (words && words.length > 0) {
@@ -220,7 +243,6 @@ Page({
         }
 
         const { words } = this.data as any;
-        console.log("renderPracticeContent words", words);
 
         if (!words || words.length === 0) {
             this.wordDrawService.drawContentEmpty();
@@ -235,8 +257,19 @@ Page({
             return;
         }
 
-        // 处理布局和生成练字数据
+        // 使用初始化阶段缓存的最大行列数；若未初始化则计算一次并缓存
-        const characterData = this.processCharacterLayout(supportedWords);
+        let maxRow = this.maxRow;
+        let maxCol = this.maxCol;
+        if (!maxRow || !maxCol) {
+            const layout = this.wordDrawService!.getMaxGridLayout();
+            this.maxRow = layout.maxRow;
+            this.maxCol = layout.maxCol;
+            maxRow = layout.maxRow;
+            maxCol = layout.maxCol;
+        }
+
+        // 处理布局和生成练字数据（基于实际最大行列数）
+        const characterData = this.processCharacterLayout(supportedWords, maxRow, maxCol);
         this.wordDrawService.drawPracticeContent(characterData);
     },
 
@@ -247,8 +280,7 @@ Page({
     },
 
     /** 处理汉字布局，生成练字数据 */
-    processCharacterLayout(words: string[]): CharacterItem[] {
+    processCharacterLayout(words: string[], maxRow: number, maxCol: number): CharacterItem[] {
-        const maxRow = 11, maxCol = 9;
         let rowIndex = 0;
         const characterData: CharacterItem[] = [];
         const boundaryWords: string[] = [];
@@ -257,10 +289,12 @@ Page({
         words.forEach((word: string) => {
             const strokes = this.svgWords[word];
             const strokeCount = strokes.length;
-            const totalCells = 1 + strokeCount + 2; // 预览格 + 练习格 + 空白格
+            const totalCells = 1 + strokeCount + 0; // 预览格 + 练习格 + 空白格
             const totalRows = Math.ceil(totalCells / maxCol);
 
-            rowIndex += totalRows;
+            // 这里的意思是：把这一个汉字所占的行数（totalRows）累加到 rowIndex 上。
+            // 这样 rowIndex 就记录了当前已经排布了多少行，用于判断是否超出了最大允许行数（maxRow）。
+            rowIndex = rowIndex + totalRows;
 
             if (rowIndex <= maxRow) {
                 characterData.push({ character: word, strokes });
@@ -268,22 +302,20 @@ Page({
                 boundaryWords.push(word);
             }
         });
-
+        // // 提示超出页面的汉字
-        // 提示超出页面的汉字
+        // if (showToast && boundaryWords.length > 0) {
-        if (boundaryWords.length > 0) {
+        //     wx.showToast({
-            wx.showToast({
+        //         title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
-                title: `练字贴已超过一页，部分汉字未包含在本次生成结果中`,
+        //         icon: 'none'
-                icon: 'none'
+        //     });
-            });
+        // }
-        }
 
         return characterData;
     },
 
     // 下载打印练字贴
     exportToPrint() {
-        const { words } = this.data as any;
+        if (!this.canvas) {
-        if (!this.canvas || words.length <= 0) {
             wx.showToast({ title: '请先生成练字贴', icon: 'none' });
             return;
         }

miniprogram/pages/copyBook/copyBook.wxml

@@ -1,6 +1,6 @@
 <view class="page-container">
     <view class="wrapper">
-        <text class="wrapper-title">自定义练字</text>
+        <text class="wrapper-title">自定义练字贴</text>
         <view class="word-input-box">
             <word-input bind:onConfirm="onConfirmInput" width="410rpx" />
             <toy-button
@@ -24,15 +24,30 @@
                     bind:onDelete="deleteWordCard"
                     bind:onColorTap="onColorTap" />
             </view>
-            <view class="word-list-empty" wx:if="{{!words.length}}">
+            <empty-state
-                <view class="empty-icon">
+                wx:if="{{!words.length}}"
-                    <text class="toy-icon toy-icon-translate"></text>
+                title="还没有添加文字"
-                </view>
+                desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的练字田字格吧！"
-                <view class="empty-title">还没有添加文字</view>
+                hint="提示：最多可以同时添加 11 个文字" />
-                <view class="empty-desc"
-                    >请在上方输入文字或点击"选择文字"按钮<br />开始创建你的练字田字格吧！</view
-                >
         </view>
+        <view class="operation-box">
+            <toy-button
+                type="primary"
+                bind:click="refreshWords"
+                width="410rpx"
+                icon="refresh"
+                icon-class-prefix="toy-icon">
+                随机生成
+            </toy-button>
+            <toy-button
+                disabled="{{words.length <= 0}}"
+                type="white"
+                bind:click="clearWords"
+                width="200rpx"
+                icon="clear"
+                icon-class-prefix="toy-icon">
+                清空
+            </toy-button>
         </view>
     </view>
 
@@ -65,7 +80,6 @@
             bind:click="exportToPrint"
             width="420rpx"
             height="80rpx"
-            disabled="{{words.length <= 0}}"
             icon="download"
             icon-class-prefix="toy-icon">
             下载打印

miniprogram/pages/index/index.json

@@ -13,6 +13,7 @@
         "color-picker": "../../components/color-picker/color-picker",
         "introduction-popup": "../../components/introduction-popup/introduction-popup",
         "toy-button": "../../ui/button/button",
-        "word-picker": "../../components/word-picker/word-picker"
+        "word-picker": "../../components/word-picker/word-picker",
+        "empty-state": "../../components/empty-state/empty-state"
     }
 }

miniprogram/pages/index/index.less

@@ -34,73 +34,7 @@ page {
     }
 
     .word-card-box {
-        padding: 38rpx 0;
+        padding: 34rpx 0;
-
-        .word-list-empty {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 60rpx 40rpx;
-            text-align: center;
-
-            .empty-icon {
-                width: 120rpx;
-                height: 120rpx;
-                background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin-bottom: 32rpx;
-                box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.15);
-
-                .toy-icon {
-                    font-size: 48rpx;
-                    color: #3b82f6;
-                }
-            }
-
-            .empty-title {
-                font-size: 32rpx;
-                font-weight: 600;
-                color: #374151;
-                margin-bottom: 16rpx;
-                line-height: 1.4;
-            }
-
-            .empty-desc {
-                font-size: 26rpx;
-                color: #6b7280;
-                line-height: 1.6;
-                margin-bottom: 32rpx;
-                max-width: 400rpx;
-            }
-
-            .empty-hint {
-                display: flex;
-                align-items: center;
-                background: #f8fafc;
-                border: 1rpx solid #e2e8f0;
-                border-radius: 12rpx;
-                padding: 20rpx 24rpx;
-                max-width: 500rpx;
-
-                .hint-icon {
-                    font-size: 24rpx;
-                    margin-right: 12rpx;
-                    margin-top: -2rpx;
-                    flex-shrink: 0;
-                }
-
-                .hint-text {
-                    font-size: 22rpx;
-                    color: #64748b;
-                    line-height: 1.5;
-                    text-align: left;
-                }
-            }
-        }
 
         .word-cards-grid {
             display: grid;
@@ -122,7 +56,7 @@ page {
     }
 
     // 模板选择区域
-    .template-section {
+    /* .template-section {
         margin-top: 40rpx;
 
         .template-title {
@@ -292,14 +226,7 @@ page {
                 }
             }
         }
-    }
+    } */
-}
-
-
-.operation-box {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
 }
 
 

miniprogram/pages/index/index.ts

@@ -48,6 +48,8 @@ Page({
                 selectedWords: ['涂', '鸦', '丫', '欢', '迎', '您'],
                 showIntroductionPopup: true,
                 env: getApp().globalData.env || 'release',
+            }, () => {
+                this.drawCanvas();
             });
         } else {
             this.setData({

miniprogram/pages/index/index.wxml

@@ -24,21 +24,11 @@
                     bind:onDelete="deleteWordCard"
                     bind:onColorTap="onColorTap" />
             </view>
-            <view class="word-list-empty" wx:if="{{!cardList.length}}">
+            <empty-state
-                <view class="empty-icon">
+                wx:if="{{!cardList.length}}"
-                    <text class="toy-icon toy-icon-translate"></text>
+                title="还没有添加文字"
-                </view>
+                desc="请在上方输入文字或点击“选择文字”按钮，开始创建你的涂鸦卡吧！"
-                <view class="empty-title">还没有添加文字</view>
+                hint="提示：最多可以同时添加 6 个文字" />
-                <view class="empty-desc"
-                    >请在上方输入文字或点击"选择文字"按钮<br />开始创建你的涂鸦卡吧！</view
-                >
-                <view class="empty-hint">
-                    <text class="hint-icon">💡</text>
-                    <text class="hint-text"
-                        >提示：最多可以同时添加六个文字</text
-                    >
-                </view>
-            </view>
         </view>
         <view class="operation-box">
             <toy-button
@@ -61,7 +51,7 @@
         </view>
 
         <!-- 趣味模板选择区域 -->
-        <view class="template-section">
+        <!-- <view class="template-section">
             <view class="template-title">选择涂色模板</view>
             <view class="template-grid">
                 <view
@@ -153,7 +143,7 @@
                     <view class="template-name">直线排列</view>
                 </view>
             </view>
-        </view>
+        </view> -->
     </view>
     <view id="previewWrapper" class="wrapper" wx:if="{{cardList.length > 0}}">
         <text class="wrapper-title">预览打印效果</text>
@@ -179,7 +169,7 @@
         bind:onChange="onChangeColor" />
     <word-picker
         show="{{showSelectWordPopup}}"
-        selectedWords="{{cardList}}"
+        cardList="{{cardList}}"
         bind:onClose="closeSelectWordPopup"
         bind:onChange="onChangeWord" />
 </view>

miniprogram/service/wordDrawService.ts

@@ -260,6 +260,7 @@ class WordDrawService {
         } else {
             await this.drawMiniHeader();
         }
+        this.drawContentEmpty();
     }
 
     async drawContentEmpty() {
@@ -345,10 +346,10 @@ class WordDrawService {
         ctx.fillText(subTitle, 1015, 186);
 
         // 计算页眉的实际高度，包括分割线
-        const headerHeight = Math.max(logoY + logoHeight, titleY + 64 + 48 + 48) + 20; // 64px字体 + 48px间距 + 48px字体 + 20px边距
+        const headerHeight = Math.max(titleY + 64 + 48 + 48) + 0; // 64px字体 + 48px间距 + 48px字体 + 20px边距
         // this.currentY = headerHeight;
         this.currentY += headerHeight;
-        this.drawLine(this.currentY);
+        this.drawDivider(this.currentY);
     }
 
     drawMiniHeader() {
@@ -364,7 +365,7 @@ class WordDrawService {
         // 计算迷你页眉的实际高度
         const miniHeaderHeight = titleY + 64 + 20; // 64px字体 + 20px边距
         this.currentY = miniHeaderHeight;
-        this.drawLine(this.currentY);
+        this.drawDivider(this.currentY);
     }
 
     /**
@@ -392,23 +393,14 @@ class WordDrawService {
         const contentHeight = canvas.height - contentTop - bottomMargin;
 
         const cellSize = 140;
-        const minGap = 24;   // 最小格子列间距，用于保证横向不拥挤，后续可动态调整为实际间距
+        // 统一通过 getMaxGridLayout 获取最大行列数
-        const rowGap = 36;   // 最小格子行间距，用于保证纵向不拥挤，后续可动态调整为实际间距
+        const { maxRow, maxCol } = this.getMaxGridLayout();
-
-        // 计算每行可容纳的田字格数量
-        const columnNumber = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
-
-        // 计算每列可容纳的田字格数量
-        const rowNumber = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
-
-        // 计算总需要的田字格数量
-        const totalCellsNeeded = rowNumber * columnNumber;
 
         // 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
-        const actualRowGap = rowNumber > 1 ? (contentHeight - rowNumber * cellSize) / (rowNumber - 1) : 0;
+        const actualRowGap = maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
-        const actualColGap = columnNumber > 1 ? (contentWidth - columnNumber * cellSize) / (columnNumber - 1) : 0;
+        const actualColGap = maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
 
-        console.log(`布局信息: 总格数=${totalCellsNeeded}, 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
+        // console.log(`布局信息: 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
 
         // 第一阶段：绘制所有空田字格
         this.drawEmptyGrids({
@@ -418,8 +410,8 @@ class WordDrawService {
             cellSize,
             colGap: actualColGap,
             rowGap: actualRowGap,
-            rowNumber,
+            maxRow,
-            columnNumber
+            maxCol
         });
 
         if (characterData && characterData.length > 0) {
@@ -432,26 +424,36 @@ class WordDrawService {
                 cellSize,
                 colGap: actualColGap,
                 rowGap: actualRowGap,
-                columnNumber
+                maxCol,
+                maxRow
             });
         };
     }
 
     /**
-     * 计算总需要的田字格数量
+     * 获取当前页面可绘制田字格的最大行数与列数（与绘制使用同一套计算规则）
      */
-    // calculateTotalCellsNeeded(characters: string[], wordsMap: Record<string, string[]>): number {
+    getMaxGridLayout(): { maxRow: number; maxCol: number } {
-    //     let totalCells = 0;
+        const { canvas } = this;
-    //     characters.forEach((char) => {
+
-    //         const strokes = wordsMap[char] || [];
+        // 布局参数需与 drawContent 保持一致
-    //         const strokeCount = strokes.length;
+        const topGap = 50;
-    //         const preview = 1; // 预览格
+        const leftMargin = 120;
-    //         const practice = Math.min(strokeCount, 8); // 最多8个练习格
+        const rightMargin = 120;
-    //         const blanks = 2; // 空白格
+        const bottomMargin = 120;
-    //         totalCells += preview + practice + blanks;
+        const contentTop = this.currentY + topGap;
-    //     });
+        const contentWidth = canvas.width - leftMargin - rightMargin;
-    //     return totalCells;
+        const contentHeight = canvas.height - contentTop - bottomMargin;
-    // }
+
+        const cellSize = 140;
+        const minGap = 24;
+        const rowGap = 36;
+
+        const maxCol = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
+        const maxRow = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
+
+        return { maxRow, maxCol };
+    }
 
     /**
      * 绘制空田字格网格
@@ -463,8 +465,8 @@ class WordDrawService {
         cellSize,
         colGap,
         rowGap,
-        rowNumber,
+        maxRow,
-        columnNumber
+        maxCol
     }: {
         ctx: RenderingContext;
         startX: number;
@@ -472,12 +474,11 @@ class WordDrawService {
         cellSize: number;
         colGap: number;
         rowGap: number;
-        rowNumber: number;  // 行数
+        maxRow: number;  // 行数
-        columnNumber: number;  // 列数
+        maxCol: number;  // 列数
     }) {
-        console.log('drawEmptyGrids startY----:', startY)
+        for (let row = 0; row < maxRow; row++) {
-        for (let row = 0; row < rowNumber; row++) {
+            for (let col = 0; col < maxCol; col++) {
-            for (let col = 0; col < columnNumber; col++) {
                 const x = startX + col * (cellSize + colGap) + cellSize / 2;
                 const y = startY + row * (cellSize + rowGap) + cellSize / 2;
                 drawTianZiGrid({ ctx, x, y, size: cellSize });
@@ -496,7 +497,8 @@ class WordDrawService {
         cellSize,
         colGap,
         rowGap,
-        columnNumber
+        maxCol,
+        maxRow
     }: {
         ctx: RenderingContext;
         characterData: CharacterItem[];
@@ -505,21 +507,31 @@ class WordDrawService {
         cellSize: number;
         colGap: number;
         rowGap: number;
-        columnNumber: number;
+        maxCol: number;
+        maxRow: number;
     }) {
-        const reservedCells = 2;
+        let rowIndex = 0;
-        let rowIndex = 0, columnIndex = 0;
 
-        // console.log('开始绘制练字内容，汉字数量:', characters.length);
+        for (let i = 0; i < characterData.length; i++) {
-
+            const item = characterData[i];
-        characterData.forEach((item, index) => {
-            const character = item.character;
             const strokes = item.strokes;
             const strokeCount = strokes.length;
 
-            console.log(`绘制第 ${index + 1} 个汉字 "${character}"，笔画数: ${strokeCount}`);
+            const totalCells = 1 + strokeCount; // 预览 + 练习
+            const totalRows = Math.ceil(totalCells / maxCol);
 
-            // 1. 预览格：显示完整汉字（黑色）
+            if (rowIndex + totalRows > maxRow) {
+                break; // 放不下，停止绘制
+            }
+
+            for (let cellIdx = 0; cellIdx < totalCells; cellIdx++) {
+                const localRowOffset = Math.floor(cellIdx / maxCol);
+                const localColIndex = cellIdx % maxCol;
+                const globalRow = rowIndex + localRowOffset;
+                if (globalRow >= maxRow) {
+                    break;
+                }
+                if (cellIdx === 0) {
                     this.drawPreviewCell({
                         ctx,
                         strokes,
@@ -528,13 +540,10 @@ class WordDrawService {
                         cellSize,
                         colGap,
                         rowGap,
-                rowIndex,
+                        rowIndex: globalRow,
                     });
-            columnIndex++;
+                } else {
-
+                    const strokeIndex = cellIdx - 1;
-            // 2. 练习格：逐笔画显示（红色）
-            for (let strokeIndex = 0; strokeIndex < strokeCount; strokeIndex++) {
-                // 先绘制当前笔画
                     this.drawPracticeCell({
                         ctx,
                         strokes,
@@ -544,30 +553,14 @@ class WordDrawService {
                         cellSize,
                         colGap,
                         rowGap,
-                    rowIndex,
+                        rowIndex: globalRow,
-                    columnIndex
+                        columnIndex: localColIndex,
                     });
-                columnIndex++;
-                if (columnIndex >= columnNumber) {
-                    columnIndex = 0;
-                    rowIndex++;
                 }
-                // console.log(`笔画 ${strokeIndex + 1} 绘制完成，当前 columnIndex: ${columnIndex}`);
-            }
-            if (columnIndex + reservedCells > columnNumber) {
-                columnIndex = 0;
-                rowIndex++;
             }
 
-            // 4. 强制下一个汉字换行到新行的第一个田字格
+            rowIndex = rowIndex + totalRows;
-            if (index < characterData.length - 1) { // 不是最后一个汉字
-                rowIndex = rowIndex + 1;
-                columnIndex = 0;
-                // console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 rowIndex: ${rowIndex}, columnIndex: ${columnIndex} 开始`);
         }
-        });
-
-        // console.log('所有汉字绘制完成');
     }
 
     /**
@@ -651,13 +644,13 @@ class WordDrawService {
             offsetY: y,
             size: cellSize,
             uptoInclusive: strokeIndex,
-            fillStyle: 'rgb(220, 20, 20)',    // 深红色填充
+            fillStyle: '#ccc',
-            strokeStyle: 'rgb(220, 20, 20)',  // 深红色描边
+            strokeStyle: '#ccc',
             lineWidth: 3,                     // 中等粗细
         });
     }
 
-    drawLine(linY: number) {
+    drawDivider(linY: number) {
         const { canvas, ctx } = this;
         ctx.strokeStyle = '#000';
         ctx.lineWidth = 2;

miniprogram/utils/getWordsSvgJson.ts

@@ -6,8 +6,9 @@ import { getJson } from './http';
 const CACHE_CONFIG = {
     key: 'svgWordsData', // 缓存键名
     expireDays: 7, // 缓存过期天数
-    // url: 'https://cdn.joeyone.cn/words-svg-all.json' // 远程数据地址
+    // url: 'https://cdn.joeyone.cn/doodle/words-svg-all.json' // 远程数据地址
-    url: 'https://cdn.joeyone.cn/words-svg-3000.json' // 远程数据地址
+    // url: 'https://cdn.joeyone.cn/doodle/words-svg-3000.json' // 远程数据地址
+    url: 'https://cdn.joeyone.cn/doodle/char_svg_3500.json' // 远程数据地址
 };
 
 /**