https://github.com/chemistwang/kana-card
五十音图认读卡片，小白入门必选
https://github.com/chemistwang/kana-card
japanese-study
Last synced: 10 months ago
JSON representation
五十音图认读卡片，小白入门必选
- Host: GitHub
- URL: https://github.com/chemistwang/kana-card
- Owner: chemistwang
- Created: 2025-09-06T08:36:35.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-06T09:19:45.000Z (10 months ago)
- Last Synced: 2025-09-06T11:29:21.943Z (10 months ago)
- Topics: japanese-study
- Language: TypeScript
- Homepage: https://kana-card.vercel.app
- Size: 57.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎌 Kana Card - 五十音图识别训练
一个现代化的日语五十音图识别训练应用，基于 React + TypeScript + Zustand + Ant Design 构建。
## ✨ 功能特点
### 🎯 核心功能
- **多种练习模式**：平假名、片假名、混合模式
- **多种题目类型**：假名→罗马音、假名→读音、罗马音→假名
- **智能随机抽取**：确保练习的全面性和随机性
- **实时答题验证**：支持多种正确答案格式
- **自动进入下一题**：可配置的自动播放模式
### 📊 统计分析
- **实时计分**：当前会话统计和总体表现
- **详细分析**：薄弱环节识别和按行统计
- **历史记录**：错误答案记录和时间追踪
- **可视化图表**：进度条和准确率显示
- **成就系统**：练习里程碑提醒
### 🎨 用户体验
- **响应式设计**：完美支持桌面端和移动端
- **现代化UI**：基于Ant Design的精美界面
- **流畅动画**：答题反馈和交互动效
- **数据持久化**：学习进度本地保存
- **个性化设置**：多种练习选项配置
## 🚀 快速开始
### 环境要求
- Node.js 16.0 或更高版本
- npm 或 yarn 包管理器
### 安装和运行
1. **安装依赖**
```bash
npm install
```
2. **启动开发服务器**
```bash
npm run dev
```
3. **构建生产版本**
```bash
npm run build
```
4. **预览构建结果**
```bash
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](LICENSE) 文件了解详情。
## 🙏 致谢
- 五十音图数据整理
- Ant Design UI组件库
- React和TypeScript社区
- Zustand状态管理库
---
**祝您学习愉快！がんばって！ 🎌**