通过动画学习日语

这是一个基于Next.js的日语学习网站，通过翻译动画字幕来学习日语。

功能特点

• 🎬 ASS字幕文件解析
• 📝 逐句翻译练习
• 💾 翻译结果持久化存储（使用Vercel KV）
• 📊 学习进度跟踪
• 🎯 剧集和动画管理

技术栈

• 前端: Next.js 15 + TypeScript + Tailwind CSS
• 数据库: Vercel KV (Redis)
• 部署: Vercel

快速开始

1. 安装依赖

pnpm install

2. 本地开发（推荐）

无需任何配置，直接启动即可：

pnpm dev

在开发环境下，应用会自动使用内存存储，无需配置数据库。数据会在服务器重启后丢失，适合开发和测试。

3. 生产环境配置（可选）

如果要部署到生产环境，需要配置Vercel KV：

复制 .env.example 到 .env.local:

cp .env.example .env.local

在Vercel Dashboard中创建KV数据库，然后更新 .env.local 中的配置：

KV_URL=your_kv_url_here
KV_REST_API_URL=your_kv_rest_api_url_here
KV_REST_API_TOKEN=your_kv_rest_api_token_here
KV_REST_API_READ_ONLY_TOKEN=your_kv_rest_api_read_only_token_here

4. 添加字幕文件

将ASS字幕文件放在 app/res/ 目录下，按照以下结构组织：

app/res/
├── [CASO&I.G][K-ON!!]/
│   ├── [I.G&CASO][K-ON!!][01][BDRIP][1920x1080][x264_FLAC_3][B84B9A54].JP.ass
│   ├── [I.G&CASO][K-ON!!][02][BDRIP][1920x1080][x264_FLAC_3][FAD12695].JP.ass
│   └── ...
├── [测试][动画]/
│   └── [测试][动画][01][测试].JP.ass  # 示例测试文件
└── [其他动画]/
    └── ...

5. 启动开发服务器

pnpm dev

访问 http://localhost:3000 开始使用。

开发特性

内存存储

• 在开发环境下，数据存储在内存中，无需配置外部数据库
• 服务器重启后数据会丢失，适合开发和测试
• 页面右下角有开发工具显示存储状态

开发工具

• 实时显示内存中的数据统计
• 一键清空所有测试数据
• 只在开发环境显示

使用方法

1. 浏览动画列表

• 首页会自动扫描 app/res/ 目录下的字幕文件
• 显示可用的动画和剧集列表

2. 选择剧集学习

• 点击动画卡片或剧集链接进入学习页面
• 页面会显示该剧集的所有字幕行

3. 翻译字幕

• 点击任意字幕行下方的翻译区域开始输入翻译
• 使用 Cmd/Ctrl + Enter 快速保存翻译
• 使用 Escape 取消编辑

4. 查看进度

• 页面顶部显示当前剧集的翻译进度
• 可以使用过滤器查看已翻译/未翻译的字幕

字幕文件要求

• 支持ASS格式字幕文件
• 文件名需要包含剧集编号（如 [01], [02] 等）
• 日语字幕文件需要以 .JP.ass 或 .jp.ass 结尾

API 端点

• GET /api/anime - 获取所有动画列表
• GET /api/episodes/[episodeId] - 获取指定剧集的字幕和翻译
• POST /api/translations - 保存翻译
• DELETE /api/translations - 删除翻译

部署到Vercel

1. 推送代码到GitHub
2. 在Vercel中导入项目
3. 在Vercel Dashboard中创建KV数据库
4. 配置环境变量
5. 部署完成

开发

项目结构

├── app/
│   ├── api/          # API路由
│   ├── episode/      # 剧集页面
│   └── res/          # 字幕文件存储
├── components/       # React组件
├── lib/             # 工具函数
│   ├── ass-parser.ts    # ASS字幕解析器
│   ├── subtitle-scanner.ts # 字幕文件扫描
│   └── kv-service.ts    # KV数据库服务
└── types/           # TypeScript类型定义

自定义功能

你可以通过以下方式扩展功能：

• 添加更多字幕格式支持
• 实现用户认证
• 添加学习统计和分析
• 支持音频播放同步
• 添加单词本功能

许可证

MIT License

贡献

欢迎提交Issue和Pull Request！