# hanzi_learning

**Repository Path**: sanhenlei/hanzi_learning

## Basic Information

- **Project Name**: hanzi_learning
- **Description**: 汉字学习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-20
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 快乐学汉字 🎨

3-10岁儿童的汉字学习应用,采用 Vue3 + Vite + TypeScript 技术栈开发。

## ✨ 核心功能

### 📚 分年龄学习
- **3-4岁**: 简单基础汉字(20个)
- **5-6岁**: 进阶汉字(20个)
- **7-10岁**: 复杂汉字(20个)

### 🎯 三种学习模式

#### 1. 卡片学习模式
- 展示汉字、拼音、笔画数
- 支持听汉字发音
- 组词学习,每个汉字有3个常用组词
- 支持顺序学习、随机跳转

#### 2. 拼音选择模式
- 根据汉字选择正确的拼音
- 四选一题目
- 答对自动播放发音
- 答错显示正确答案和组词
- 实时统计正确率和连续答题数

#### 3. 听音识字模式
- 听汉字发音选择正确的汉字
- 四选一题目
- 支持重复听音
- 答对答错都有音效反馈

### 🔊 音频功能

#### 离线音频(优先)
- 位置: `/public/audio/chars/{汉字}.mp3`
- 支持单个汉字发音
- 支持组词发音: `/public/audio/words/{词组}.mp3`

#### 在线TTS(备选)
- 使用 BigModel 文本转语音API
- 支持配置 API Key
- 高质量中文语音合成

### 🎵 音效反馈
- ✅ 正确音效: 上升的愉快音调
- ❌ 错误音效: 下降的低沉音调
- 使用 Web Audio API 生成,无需外部文件

### 📊 学习统计
- 正确/错误题目数
- 准确率百分比
- 连续答题数(连击)

## 🚀 快速开始

### 安装依赖
```bash
npm install
```

### 开发模式
```bash
npm run dev
```

### 构建生产版本
```bash
npm run build
```

### 预览生产版本
```bash
npm run preview
```

## 📁 项目结构

```
hanzi-learning/
├── public/                 # 静态资源
│   └── audio/              # 音频文件(可选)
│       ├── chars/          # 汉字发音
│       └── words/          # 组词发音
├── src/
│   ├── assets/
│   │   └── css/
│   │       └── main.css    # 全局样式
│   ├── components/         # Vue 组件
│   │   ├── LearningCards.vue    # 卡片学习
│   │   ├── PinyinQuiz.vue       # 拼音测验
│   │   └── ListeningQuiz.vue     # 听音识字
│   ├── data/
│   │   └── hanziData.ts   # 汉字数据
│   ├── services/
│   │   └── audioService.ts # 音频服务
│   ├── stores/
│   │   └── useGameStore.ts# 游戏状态管理
│   ├── App.vue            # 主应用组件
│   └── main.ts            # 入口文件
├── index.html
├── package.json
├── tailwind.config.js
└── tsconfig.json
```

## 🎨 技术栈

- **前端框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **语言**: TypeScript
- **状态管理**: Pinia
- **样式**: Tailwind CSS
- **工具库**: @vueuse/core

## 🔧 配置说明

### BigModel TTS 配置

在 `src/services/audioService.ts` 中配置:

```typescript
export const audioService = new AudioService({
  useOffline: true,          // 优先使用离线音频
  bigModelApiKey: 'your-api-key',  // BigModel API Key
  bigModelModel: 'tts-1',          // TTS 模型
});
```

### 离线音频准备

如果希望使用离线音频,请准备以下文件:

```
public/
└── audio/
    ├── chars/
    │   ├── 人.mp3
    │   ├── 大.mp3
    │   └── ...
    └── words/
        ├── 大人.mp3
        ├── 人们.mp3
        └── ...
```

音频命名规则:
- 汉字发音: `{汉字}.mp3`
- 组词发音: `{词组}.mp3`

## 📝 数据格式

汉字数据结构:

```typescript
interface HanziWord {
  char: string;           // 汉字
  pinyin: string;        // 拼音(带声调)
  words: string[];       // 组词数组
  level: '3-4' | '5-6' | '7-10';  // 年龄等级
  strokes?: number;      // 笔画数
}
```

## 🎯 扩展建议

### 添加更多汉字
在 `src/data/hanziData.ts` 中添加:

```typescript
export const hanzi3to4: HanziWord[] = [
  // 添加更多 3-4 岁汉字
  { char: '新汉字', pinyin: 'xīn hàn zì', words: ['词1', '词2'], level: '3-4' },
  // ...
];
```

### 添加新学习模式
1. 在 `src/components/` 创建新组件
2. 在 `src/App.vue` 中添加模式选项
3. 更新 `useGameStore` 如果需要新的状态

### 添加离线音频
1. 录制或下载汉字和组词的音频
2. 放入 `public/audio/` 对应目录
3. 文件名与汉字/组词一致

## 📱 响应式设计

应用完全响应式,支持:
- 手机端(竖屏)
- 平板
- 桌面电脑

## 🎓 教育理念

- **趣味性**: 游戏化学习,音效反馈,连击奖励
- **适应性**: 分年龄设计,难度递进
- **交互性**: 多种学习模式,适合不同学习风格
- **便捷性**: 无需安装,网页直接使用

## 📄 License

MIT

## 🤝 贡献

欢迎提交 Issue 和 Pull Request!

## 📞 联系

如有问题或建议,请通过 Issue 联系。

---

**祝孩子们学习愉快!** 🎉