一个专为汉字学习设计的互动式Web应用，通过笔画动画和手写练习，帮助用户轻松掌握汉字笔顺。
- 汉字学习 - 笔画动画演示 + 手写练习，支持多种速度播放
- 课本学习 - 按照人教版小学课本进度学习，覆盖1-6年级
- 词语学习 - 词语和成语逐字学习，包含释义和例句
- 诗词学习 - 唐诗宋词逐字识读 + 抄写练习
- 自定义字组 - 创建个人学习分组，灵活安排学习内容
- 智能复习 - 基于遗忘曲线的复习提醒机制
- 眼保健操 - 学习20分钟自动提醒休息眼睛
- 学习统计 - 今日学字、笔顺正确率、近7日练习统计
- 学习日历 - 记录每日学习活动
- 薄弱汉字 - 自动识别需要加强练习的汉字
- 马卡龙配色 - 温暖舒适的配色方案，护眼不伤眼
- 响应式布局 - 支持桌面端和移动端
- 无障碍设计 - 符合WCAG对比度标准（≥4.5:1）
- 平滑动画 - 微交互动画提升学习体验
- 前端框架: React 19 + TypeScript
- 构建工具: Vite 8
- 样式方案: Tailwind CSS 4
- 路由管理: React Router DOM 7
- 组件库: animal-island-ui + shadcn/ui
- 汉字书写: hanzi-writer
- 图标库: Lucide React
- 状态管理: Zustand
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
# 预览生产版本
npm run previewsrc/
├── components/ # UI组件
│ ├── ui/ # shadcn/ui组件
│ ├── ai-ui-adapter.tsx # animal-island-ui适配组件
│ └── hanzi-writer-player.tsx # 汉字书写播放器
├── data/ # 数据层
│ ├── char-resolver.ts # 汉字数据解析器
│ ├── common-characters.ts # 常用汉字数据
│ ├── pep-index.ts # 课本索引
│ ├── pep-poetry.ts # 诗词数据
│ ├── pep-textbook*.ts # 各年级课本数据
│ ├── pep-vocabulary.ts # 词语数据
│ ├── song-poetry.ts # 宋词数据
│ ├── tang-poetry.ts # 唐诗数据
│ └── vocabulary-data.ts # 自定义词语数据
├── flows/ # 业务流程
│ ├── flow1-character-learning/ # 汉字学习
│ ├── flow2-textbook-management/ # 课本管理
│ ├── flow3-vocabulary-learning/ # 词语学习
│ ├── flow4-poetry-learning/ # 诗词学习
│ ├── flow5-custom-groups/ # 自定义字组
│ └── shared/ # 共享类型和模拟数据
├── lib/ # 工具库
│ ├── hanzi-writer-loader.ts # 汉字书写数据加载器
│ ├── learning-store.tsx # 学习状态管理
│ ├── status-utils.ts # 状态工具函数
│ ├── tts.ts # 语音合成
│ ├── use-eye-care.ts # 护眼提醒Hook
│ └── utils.ts # 通用工具函数
├── App.tsx # 主应用组件
├── index.css # 全局样式
└── main.tsx # 入口文件
- 汉字笔顺数据: hanzi-writer-data
- 课本数据: 基于人教版小学语文课本整理
- 诗词数据: 唐诗宋词精选
- Chrome (推荐)
- Firefox
- Safari
- Edge
MIT License