🌍 多语言学习平台
✨ 核心特性
🎯 学习工具
- 智能翻译 - 基于 AI 的多语言互译，支持 IPA 音标标注
- 词典查询 - 详细的单词释义、词性分析、例句展示
- 语音合成 - 阿里云千问 TTS 提供自然的语音输出
- 个人学习空间 - 文件夹管理、学习资料组织
🔐 用户系统
- 多方式认证 - 邮箱/用户名登录、GitHub OAuth
- 个人资料 - 用户主页、学习进度追踪
- 数据安全 - better-auth 提供企业级安全保障
🌐 国际化
- 8 种语言 - en-US, zh-CN, ja-JP, ko-KR, de-DE, fr-FR, it-IT, ug-CN
- 完整本地化 - 所有界面文本支持多语言
🏗️ 技术亮点
- App Router - 采用 Next.js 16 最新路由系统
- Server Components - 优先服务端渲染，优化性能
- Action-Service-Repository - 清晰的三层架构设计
- 类型安全 - TypeScript 严格模式 + Zod 验证
🚀 快速开始
前置要求
- Node.js 24+
- PostgreSQL 14+
- pnpm 8+ (推荐) 或 npm/yarn
安装步骤
# 1. 克隆项目
git clone <repository-url>
cd learn-languages
# 2. 安装依赖
pnpm install
# 3. 配置环境变量
cp .env.example .env.local
# 编辑 .env.local 填写必要配置
# 4. 初始化数据库
pnpm prisma generate
pnpm prisma db push
# 5. 启动开发服务器
pnpm dev
访问 http://localhost:3000 开始使用！
环境变量配置
# 🤖 AI 服务（必需）
ZHIPU_API_KEY=your-api-key # 智谱 AI - 翻译和词典
ZHIPU_MODEL_NAME=your-model-name # 模型名称
DASHSCORE_API_KEY=your-api-key # 阿里云 TTS
# 🔐 认证配置（必需）
BETTER_AUTH_SECRET=your-secret # 随机字符串
BETTER_AUTH_URL=http://localhost:3000
# 🐙 GitHub OAuth（可选）
GITHUB_CLIENT_ID=your-client-id
GITHUB_CLIENT_SECRET=your-client-secret
# 💾 数据库（必需）
DATABASE_URL=postgresql://user:password@localhost:5432/dbname
🛠️ 技术栈
前端
|
后端
|
📁 项目架构
learn-languages/
├── 📂 src/
│ ├── 📂 app/ # Next.js App Router
│ │ ├── 📂 (auth)/ # 认证相关页面
│ │ ├── 📂 folders/ # 文件夹管理
│ │ ├── 📂 users/[username]/ # 用户资料
│ │ └── 📂 api/ # API 路由
│ │
│ ├── 📂 modules/ # 业务模块（三层架构）
│ │ ├── 📂 auth/ # 认证模块
│ │ ├── 📂 folder/ # 文件夹模块
│ │ ├── 📂 dictionary/ # 词典模块
│ │ └── 📂 translator/ # 翻译模块
│ │
│ ├── 📂 components/ # React 组件
│ │ ├── 📂 ui/ # 通用 UI 组件
│ │ └── 📂 layout/ # 布局组件
│ │
│ ├── 📂 design-system/ # 设计系统
│ │ ├── 📂 base/ # 基础组件
│ │ ├── 📂 layout/ # 布局组件
│ │ └── 📂 feedback/ # 反馈组件
│ │
│ ├── 📂 lib/ # 工具库
│ │ ├── 📂 bigmodel/ # AI 集成
│ │ ├── 📂 browser/ # 浏览器工具
│ │ └── 📂 server/ # 服务端工具
│ │
│ ├── 📂 hooks/ # 自定义 Hooks
│ ├── 📂 i18n/ # 国际化配置
│ ├── 📂 shared/ # 共享类型和常量
│ └── 📂 config/ # 应用配置
│
├── 📂 prisma/ # 数据库 Schema
├── 📂 messages/ # 多语言文件
└── 📂 public/ # 静态资源
架构设计：Action-Service-Repository
┌─────────────────────────────────────────┐
│ Presentation Layer │
│ (Server Components / Client Components)│
└────────────────┬────────────────────────┘
│
┌────────────────▼────────────────────────┐
│ Action Layer │
│ • Server Actions │
│ • Form Validation (Zod) │
│ • Redirect & Error Handling │
└────────────────┬────────────────────────┘
│
┌────────────────▼────────────────────────┐
│ Service Layer │
│ • Business Logic │
│ • better-auth Integration │
│ • Cross-module Coordination │
└────────────────┬────────────────────────┘
│
┌────────────────▼────────────────────────┐
│ Repository Layer │
│ • Prisma Database Operations │
│ • Data Access Abstraction │
│ • Query Optimization │
└─────────────────────────────────────────┘
📚 核心模块
认证系统 (auth)
// 支持多种登录方式
- 邮箱/密码登录
- 用户名登录
- GitHub OAuth
- 邮箱验证
翻译模块 (translator)
// AI 驱动的智能翻译
- 多语言互译
- IPA 音标标注
- 翻译历史记录
- 上下文理解
词典模块 (dictionary)
// 智能词典查询
- 单词释义
- 词性分析
- 例句展示
- 词频统计
文件夹模块 (folder)
// 学习资料管理
- 创建/删除文件夹
- 添加语言对
- IPA 标注
- 批量管理
🗄️ 数据模型
核心数据模型关系：
User (用户)
├─ Account (账户)
├─ Session (会话)
├─ Folder (文件夹)
│ └─ Pair (语言对)
├─ DictionaryLookUp (查询记录)
│ └─ DictionaryItem (词典项)
│ └─ DictionaryEntry (词条)
└─ TranslationHistory (翻译历史)
详细模型定义：prisma/schema.prisma
🌍 国际化支持
当前支持的语言：
| 语言 | 代码 | 区域 |
|---|---|---|
| English | en-US | 美国 |
| 中文 | zh-CN | 中国 |
| 日本語 | ja-JP | 日本 |
| 한국어 | ko-KR | 韩国 |
| Deutsch | de-DE | 德国 |
| Français | fr-FR | 法国 |
| Italiano | it-IT | 意大利 |
| ئۇيغۇرچە | ug-CN | 新疆 |
添加新语言：
- 在
messages/创建语言文件 - 在
src/i18n/config.ts添加配置 - 更新语言选择器组件
🔧 开发指南
可用脚本
# 开发
pnpm dev # 启动开发服务器 (HTTPS)
pnpm build # 构建生产版本
pnpm start # 启动生产服务器
pnpm lint # 代码检查
# 数据库
pnpm prisma studio # 打开数据库 GUI
pnpm prisma db push # 同步 Schema
pnpm prisma migrate # 创建迁移
代码规范
- ✅ TypeScript 严格模式
- ✅ ESLint + TypeScript Plugin
- ✅ 优先使用 Server Components
- ✅ 新功能遵循 Action-Service-Repository
- ✅ 所有用户文本需要国际化
- ✅ 组件复用设计系统和业务组件
目录约定
modules/- 业务模块，每个模块包含：*-action.ts- Server Actions*-service.ts- 业务逻辑*-repository.ts- 数据访问*-dto.ts- 数据传输对象
components/- 业务相关组件design-system/- 可复用基础组件lib/- 工具函数和库
🤝 贡献指南
我们欢迎各种贡献！
贡献流程
- Fork 本仓库
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add: AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启 Pull Request
代码提交规范
feat: 新功能
fix: 修复问题
docs: 文档变更
style: 代码格式
refactor: 重构
test: 测试相关
chore: 构建/工具
📄 许可证
本项目采用 AGPL-3.0 许可证。
📞 联系方式
如果这个项目对你有帮助，请给一个 ⭐️ Star！
Made with ❤️ by the community