🎌 Kana Card - 五十音图识别训练

一个现代化的日语五十音图识别训练应用，基于 React + TypeScript + Zustand + Ant Design 构建。

✨ 功能特点

🎯 核心功能

• 多种练习模式：平假名、片假名、混合模式
• 多种题目类型：假名→罗马音、假名→读音、罗马音→假名
• 智能随机抽取：确保练习的全面性和随机性
• 实时答题验证：支持多种正确答案格式
• 自动进入下一题：可配置的自动播放模式

📊 统计分析

• 实时计分：当前会话统计和总体表现
• 详细分析：薄弱环节识别和按行统计
• 历史记录：错误答案记录和时间追踪
• 可视化图表：进度条和准确率显示
• 成就系统：练习里程碑提醒

🎨 用户体验

• 响应式设计：完美支持桌面端和移动端
• 现代化UI：基于Ant Design的精美界面
• 流畅动画：答题反馈和交互动效
• 数据持久化：学习进度本地保存
• 个性化设置：多种练习选项配置

🚀 快速开始

环境要求

• Node.js 16.0 或更高版本
• npm 或 yarn 包管理器

安装和运行

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

4. 预览构建结果

npm run preview

🏗️ 项目结构

src/
├── components/          # React组件
│   ├── KanaCard.tsx        # 假名卡片组件
│   ├── ScoreBoard.tsx      # 计分面板
│   ├── ModeSelector.tsx    # 模式选择器
│   └── StatisticsPanel.tsx # 统计面板
├── data/
│   └── kanaData.ts      # 五十音图数据
├── store/
│   └── useKanaStore.ts  # Zustand状态管理
├── types/
│   └── kana.ts          # TypeScript类型定义
├── App.tsx              # 主应用组件
├── App.css              # 全局样式
└── main.tsx             # 应用入口

🎮 使用说明

练习模式设置

1. 平假名模式：专注练习平假名字符
2. 片假名模式：专注练习片假名字符
3. 混合模式：随机练习平假名和片假名

题目类型选择

1. 假名→罗马音：看假名输入对应罗马音
2. 假名→读音：看假名输入中文读音
3. 罗马音→假名：看罗马音输入对应假名

个性化设置

• 🔊 音效开关：启用/禁用答题音效
• 💡 提示功能：显示/隐藏答题提示
• ⏭️ 自动下一题：答题后自动进入下一题
• 🔄 重置统计：清空所有学习记录

📈 学习建议

初学者

1. 从平假名模式开始
2. 选择"假名→罗马音"题目类型
3. 开启提示功能和自动下一题

进阶学习

1. 使用混合模式练习
2. 尝试"罗马音→假名"题目类型
3. 关注薄弱环节统计，针对性练习

高级用户

1. 挑战"假名→读音"模式
2. 追求高准确率和练习连击
3. 定期重置统计，检验学习成果

🛠️ 技术栈

• 前端框架: React 18 + TypeScript
• 状态管理: Zustand (轻量级状态管理)
• UI组件库: Ant Design 5 (antd)
• 构建工具: Vite (快速构建和热重载)
• 数据持久化: LocalStorage (本地存储)

📝 开发特性

• ✅ TypeScript 严格模式
• ✅ ESLint 代码规范
• ✅ 响应式设计
• ✅ 组件化架构
• ✅ 状态管理
• ✅ 数据持久化

🤝 贡献指南

欢迎提交Issue和Pull Request来帮助改进这个项目！

开发贡献

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

• 五十音图数据整理
• Ant Design UI组件库
• React和TypeScript社区
• Zustand状态管理库

---

祝您学习愉快！がんばって！ 🎌