# PinYin

**Repository Path**: bookmark311/pin-yin

## Basic Information

- **Project Name**: PinYin
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-30
- **Last Updated**: 2026-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 拼音小乐园 🐼

一个专为小朋友设计的汉语拼音学习站点，支持电脑、平板、手机响应式适配。

**预览地址：<http://bookmarksoft.cn:26>**
![输入图片说明](images/image.png)
## 功能一览

### 🏠 首页

熊猫老师带你逛乐园，查看拼音分类统计，一键进入各个学习模块。

### 🔤 学拼音

- 覆盖全部 **63 个拼音**：声母 23 个、韵母 24 个、整体认读音节 16 个
- 每个拼音配有：标准发音、形象描述口诀（如"右下半圆 b b b"）、四声练习、例词
- 支持搜索（可输拼音字母、词语、汉字）和分类浏览

### 🎵 跟读连读

- 整表连读练习，**三档语速**可调（慢速 / 正常 / 快速）
- 支持暂停、继续、停止
- 🎧 跟读模式：每读完一个停一停，留时间给小朋友大声跟读，读到的字母会亮起来

### ✏️ 考一考

两种题型随机出题、即时反馈，答对夸奖、答错鼓励再想一想：

- **听音选拼音**：播放发音，选出对应的拼音
- **看词选声母**：看示例词语，选出词语的声母

历史最佳成绩自动记录在本地。

### ❓ 操作指南

面向小朋友和家长的操作说明：5 步上手流程、每个按钮的作用说明表、常见问题解答。

## 🎙️ 双发音引擎

顶部可随时切换两种发音（选择会被记住）：

| 引擎 | 说明 |
| --- | --- |
| 🧑‍🏫 系统朗读 | 浏览器自带的中文语音合成（Web Speech API），离线可用 |
| 🎧 标准录音 | 参考站点 [hanyupinyin.net](https://www.hanyupinyin.net/diandu.html) 的真人预录标准发音，需联网，加载失败自动回退系统朗读 |

## 技术特点

- **拼音数据符合国家标准** GB/T 16159-2012《汉语拼音正词法基本规则》（声调标注位置、轻声不标调、ü 遇 j/q/x/y 去点等）
- 中文语音合成使用**呼读音汉字映射**（b→播、p→坡…），避免读成英文字母名
- 纯 **Vue 3 + TypeScript + Vite**，运行时仅依赖 `vue`，构建产物约 **48 KB (gzip)**
- 响应式布局：`≥768px` 顶部导航，`<768px` 手机底部大按钮导航
- 所有控件带悬停 / 触屏提示，个人偏好（发音引擎、最佳成绩）存于 `localStorage`

## 本地开发

```bash
pnpm install      # 安装依赖
pnpm dev          # 启动开发服务器
pnpm build        # 类型检查 + 生产构建
pnpm preview      # 预览生产构建
```

## 目录结构

```
src/
├── App.vue                 # 布局、导航、发音引擎切换
├── style.css               # 全局样式与响应式断点
├── data/pinyin.ts          # 63 个拼音数据 + MP3 文件名派生
├── composables/useSpeech.ts # 语音引擎（TTS / MP3 双引擎）
├── components/
│   ├── PinyinCard.vue      # 拼音卡片
│   └── PinyinDetail.vue    # 拼音详情弹窗
└── views/
    ├── HomeView.vue        # 首页
    ├── LearnView.vue       # 学拼音
    ├── ReadView.vue        # 跟读连读
    ├── QuizView.vue        # 考一考
    └── GuideView.vue       # 操作指南
```