# NCE

**Repository Path**: merlewang/nce

## Basic Information

- **Project Name**: NCE
- **Description**: 学习新概念英语
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-01-13
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NCE Flow

**新概念英语在线点读应用 - React 版本**

一个简洁、高效的新概念英语学习应用，支持句子级点读、连续播放、多语言视图等功能。

## ✨ 核心功能

- **句子级点读**：点击任意句子开始播放，自动高亮跟随
- **多语言视图**：EN / EN+CN / CN 三种显示模式，灵活切换
- **播放控制**：倍速调节（0.75x - 2.5x）、播放模式切换
- **阅读模式**：
  - 连读：自动播放下一句
  - 点读：只播放点击的句子
  - 听读：遮盖句子纯听力训练
- **自动跟随**：播放时自动滚动定位到当前句子
- **播完后选项**：单句循环、整篇循环、自动续集、结束播放
- **学习管理**：课程收藏、学习记录、进度追踪
- **暖色调主题**：护眼的暖色调设计，保护视力

## 🚀 快速开始

### 环境要求

- Node.js >= 18
- pnpm >= 8（推荐）或 npm

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

项目会在 `http://localhost:3000` 启动，自动打开浏览器。

### 构建生产版本

```bash
pnpm build
```

构建产物会在 `dist` 目录中。

### 预览生产构建

```bash
pnpm preview
```

## 🎨 技术栈

- **React 18** - UI 框架
- **Vite 5** - 构建工具
- **Ant Design 5** - UI 组件库
- **React Router 6** - 路由管理
- **SCSS** - CSS 预处理器
- **Tailwind CSS 4** - 工具类 CSS（用于主题变量）

## 📖 使用说明

### 路由结构

- `/` - 首页（课程列表）
  - `/#NCE1` - 显示第一册课程
  - `/#NCE2` - 显示第二册课程
  - `/#NCE3` - 显示第三册课程
  - `/#NCE4` - 显示第四册课程
- `/lesson#NCE1/lesson-filename` - 课程页面（通过 hash 传递课程信息）

### 快捷键

- **空格键** - 播放/暂停
- **方向键左/右** - 上一句/下一句
- **↑/↓** - 音量控制

### 数据文件

课程数据文件 `data.json` 需要放在 `public/static/` 目录中。

数据格式示例：

```json
{
  "1": [
    {
      "title": "Excuse Me",
      "filename": "001&002－Excuse Me"
    }
  ]
}
```

### 音频文件

音频文件（MP3）和字幕文件（LRC）需要放在对应的目录中：

- `NCE1/` - 第一册音频和字幕
- `NCE2/` - 第二册音频和字幕
- `NCE3/` - 第三册音频和字幕
- `NCE4/` - 第四册音频和字幕

文件命名格式：`{filename}.mp3` 和 `{filename}.lrc`

## 🔧 开发说明

### 状态管理

项目使用 React Hooks 进行状态管理：

- `useState` - 组件状态
- `useEffect` - 副作用处理
- `useAudioPlayer` - 音频播放器自定义 Hook
- `localStorage` - 持久化存储（收藏、进度、设置等）

### 样式方案

- 使用 **SCSS** 编写组件样式
- 使用 **CSS 变量** 实现主题切换
- 结合 **Ant Design** 的组件样式
- 仅支持 PC 端，无响应式设计

### 主题配置

主题变量定义在 `src/styles/index.css` 中，包含：

- 暖色调配色方案（warm-50 到 warm-900）
- 棕色系配色方案（brown-50 到 brown-900）
- 阴影、边框、圆角等设计变量

## 🐳 Docker 部署

项目包含 Docker 配置文件，可以使用 Docker 进行部署。

### 构建镜像

```bash
docker build -t nce-flow .
```

### 运行容器

```bash
docker run -d -p 8080:80 --name nce-flow nce-flow
```

### Docker Compose

```bash
docker-compose up -d
```

详细说明请查看 [DOCKER.md](DOCKER.md)

## 📝 注意事项

1. **音频文件路径**：音频文件路径为 `/{book}/{filename}.mp3`，需要确保文件正确放置在对应目录
2. **数据文件**：`public/static/data.json` 必须存在且格式正确
3. **浏览器兼容性**：建议使用现代浏览器（Chrome、Firefox、Edge、Safari 最新版本）
4. **iOS Safari**：iOS Safari 有音频自动播放限制，需要用户交互触发播放

## 🐛 已知问题

- 暂无已知问题

## 📄 License

MIT License

---

**免责声明**：本项目的内容仅限个人学习、研究或欣赏之用，完全没有丝毫商业用途。音频与文本内容的版权归原著作权人所有。

Made with ❤️