多语种翻译应用

github：\ ![Visitors](https://github.com/kjwenger/multi-lingua-nextjs) ](https://github.com/kjwenger/multi-lingua-nextjs/stargazers) ](https://github.com/kjwenger/multi-lingua-nextjs/network) ](https://github.com/kjwenger) ](https://github.com/kjwenger/multi-lingua-nextjs/issues) ![Code Size](https://github.com/kjwenger/multi-lingua-nextjs) ![Top Language](https://github.com/kjwenger/multi-lingua-nextjs)

CI/CD发布（&C）：\ ![CI](https://github.com/kjwenger/multi-lingua-nextjs/actions/workflows/ci.yml) ](https://github.com/kjwenger/multi-lingua-nextjs/actions/workflows/docker.yml) ](https://github.com/kjwenger/multi-lingua-nextjs/releases) ![License: MIT](https://opensource.org/licenses/MIT) ![Last Commit](https://github.com/kjwenger/multi-lingua-nextjs/commits/main)

技术栈：\ ](https://nodejs.org/) ![Next.js](https://nextjs.org/) ![React](https://reactjs.org/) ![TypeScript](https://www.typescriptlang.org/) ![JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) ![HTML5](https://developer.mozilla.org/en-US/docs/Web/HTML) ![Tailwind CSS](https://tailwindcss.com/) ![SQLite](https://www.sqlite.org/) ![Alpine Linux](https://alpinelinux.org/)

能力：\ ](https://github.com/kjwenger/multi-lingua-nextjs/actions/workflows/docker.yml) ![PWA](https://web.dev/progressive-web-apps/) ![MCP Server](https://modelcontextprotocol.io/)

一个现代的Next.js应用程序，使用LibrePranslate提供实时翻译服务。该应用程序具有基于表格的界面，用户可以在其中输入英文文本，并接收法语、意大利语和西班牙语的翻译，以及多个翻译建议。

特性

核心功能

实时翻译：使用LibreTranslate API进行自动翻译
多语言支持：翻译成法语、意大利语和西班牙语
翻译建议：每种语言最多5个翻译选项
可编辑结果：所有翻译字段都是可编辑的
持久存储：用于存储翻译的SQLite数据库
可排序表：按英文列对翻译进行排序
现代用户界面：采用Tailwind CSS的简洁、响应式设计

用户管理和身份验证

基于电子邮件的身份验证：使用一次性代码的无密码登录
基于角色的访问控制：管理员和用户角色
用户注册：通过电子邮件验证创建自助服务帐户
会话管理：使用“记住我”选项可配置会话超时
管理仪表盘：管理员用户管理界面
活动日志：跟踪用户操作和系统事件
安全会话：基于JWT的令牌，仅使用HTTP Cookie

先决条件

已安装Node.js 18+
LibreTranslate在5000端口本地运行

- 您可以使用Docker运行LibreTranslate： docker run -ti --rm -p 5000:5000 libretranslate/libretranslate

安装

选项1:Docker（推荐）

快速开始使用已发布的图像

使用预构建的Docker镜像运行多语言的最快方法：

# Download release configuration
curl -O https://raw.githubusercontent.com/kjwenger/NaturalStupidity/main/MultiLingua/Copilot.AI/docker-compose.release.yml

# Create and pre-populate LibreTranslate models volume
docker volume create lt-local
docker run -d --name temp-libretranslate -p 5000:5000 -v lt-local:/home/libretranslate/.local libretranslate/libretranslate:latest
# Wait for language models to download (check: docker logs -f temp-libretranslate)
docker stop temp-libretranslate && docker rm temp-libretranslate

# Start services
docker-compose -f docker-compose.release.yml up -d

# The app will be available at http://localhost:3456
# LibreTranslate admin will be available at http://localhost:5432

地方发展设置

对于开发或如果您想在本地构建：

# Clone the repository and navigate to the project
cd multi-lingua

# Create external volumes for persistence
docker volume create lt-local
docker volume create ml-data

# Start services (includes rebuild)
docker-compose up -d --build

# The app will be available at http://localhost:3456
# LibreTranslate will be available at http://localhost:5432

# 🔥 IMPORTANT: Watch logs for verification codes (dev mode)
docker-compose logs -f multi-lingua

# When you register, look for codes in the logs:
# 📧 [DEV MODE] Email not sent, logging to console:
# 123456  <-- Your verification code

Docker用户须知：

验证码出现在Docker日志中（默认启用开发模式）
使用 docker-compose logs -f multi-lingua 在注册/登录时查看代码
看 DOCKER-ENV.md 用于生产电子邮件配置

使用Docker Compose启动这两个服务（本地构建）

docker组成-up-d


To stop the services:

docker-compose down


要在更改后重建应用程序，请执行以下操作：

docker-compose up --build


### 方案2：地方发展

1. 导航到项目目录：

cd multi-lingua


1. 安装依赖项：

npm install


1. 启动LibreTranslate（翻译功能所需）：

# Basic LibreTranslate without persistence docker run -ti --rm -p 5000:5000 libretranslate/libretranslate

# LibreTranslate with persistent dictionaries and models docker run -ti --rm -p 5000:5000 \ -v lt-local:/home/libretranslate/.local \ -v lt-db:/app/db \ libretranslate/libretranslate


1. 启动开发服务器：

npm run dev


1. 打开浏览器并访问 `http://localhost:3456`

1. **首次设置**：首次访问时，系统会提示您创建管理员帐户

   - 点击“注册”或导航至 `/register`
   - 输入您的电子邮件和全名
   - 检查您的电子邮件（或开发模式下的控制台）以获取验证码
   - 完成注册-您将作为第一个管理员用户登录

## 用法

### 为所有用户

1. **登录**：导航到 `/login` 并输入您的电子邮件以接收登录码
1. **翻译**：在主界面中查看和管理翻译

### 对于管理员用户

1. **添加新翻译**：单击“添加新翻译”按钮创建新行
1. **输入英文文本**：在第一列中键入任何英语单词或短语
1. **自动翻译**：该应用程序将自动翻译成法语、意大利语和西班牙语
1. **查看建议**：点击任何建议将其用作翻译
1. **编辑翻译**：手动编辑任何翻译字段
1. **排序**：单击英文列标题按字母顺序排序
1. **删除**：使用删除按钮删除不需要的翻译
1. **用户管理**：访问 `/admin/users` 管理用户、角色和权限
1. **设置**：配置翻译提供程序和系统设置
1. **活动日志**：查看用户活动和系统事件

### 用户角色

- **管理用户**:

  - 完全访问所有功能
  - 可以管理翻译
  - 可以访问设置、API文档和用户管理
  - 可以创建、编辑和删除用户
  - 可以配置系统设置

- **常规用户**:

  - 仅查看翻译
  - 有限工具栏（仅限“帮助”按钮）
  - 无法修改系统配置

## API终点

### 身份验证API

- `POST /api/auth/register` -使用验证码申请注册
- `POST /api/auth/verify-registration` -验证代码并创建帐户
- `POST /api/auth/login` -请求登录码
- `POST /api/auth/verify-login` -验证代码并创建会话
- `POST /api/auth/logout` -使当前会话无效
- `GET /api/auth/me` -获取当前用户信息
- `POST /api/auth/refresh` -刷新会话令牌

### 翻译API

- `GET /api/translations` -获取所有翻译
- `POST /api/translations` -添加新翻译
- `PUT /api/translations` -更新现有翻译
- `DELETE /api/translations?id={id}` -删除翻译
- `POST /api/translate` -将文本翻译成所有语言

### 管理API（仅限管理员）

- `GET /api/admin/users` -列出所有具有分页和筛选器的用户
- `POST /api/admin/users` -创建新用户
- `PUT /api/admin/users/:id` -更新用户信息
- `DELETE /api/admin/users/:id` -删除用户（软删除）
- `GET /api/admin/activity-log` -查看用户活动日志
- `GET /api/admin/config` -获取系统配置
- `PUT /api/admin/config` -更新系统配置
- `GET /api/admin/init` -检查初始化状态
- `POST /api/admin/init` -初始化第一个管理员帐户

## 数据库模式

该应用程序使用具有以下模式的SQLite：

### 翻译表

CREATE TABLE translations ( id INTEGER PRIMARY KEY AUTOINCREMENT, english TEXT NOT NULL, german TEXT, french TEXT, italian TEXT, spanish TEXT, english_proposals TEXT, german_proposals TEXT, french_proposals TEXT, italian_proposals TEXT, spanish_proposals TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP );


### 用户管理表

-- Users CREATE TABLE users ( id INTEGER PRIMARY KEY AUTOINCREMENT, email TEXT UNIQUE NOT NULL, full_name TEXT NOT NULL, role TEXT NOT NULL DEFAULT 'user' CHECK(role IN ('admin', 'user')), preferred_language TEXT DEFAULT 'en', is_active BOOLEAN DEFAULT 1, email_verified BOOLEAN DEFAULT 0, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP, last_login DATETIME, created_by INTEGER );

-- Sessions CREATE TABLE sessions ( id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER NOT NULL, token TEXT UNIQUE NOT NULL, device_info TEXT, ip_address TEXT, expires_at DATETIME NOT NULL, last_activity DATETIME DEFAULT CURRENT_TIMESTAMP, created_at DATETIME DEFAULT CURRENT_TIMESTAMP );

-- Authentication Codes CREATE TABLE auth_codes ( id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER, email TEXT NOT NULL, code TEXT NOT NULL, code_type TEXT NOT NULL CHECK(code_type IN ('registration', 'login')), attempts INTEGER DEFAULT 0, max_attempts INTEGER DEFAULT 3, expires_at DATETIME NOT NULL, used BOOLEAN DEFAULT 0, created_at DATETIME DEFAULT CURRENT_TIMESTAMP );

-- System Configuration CREATE TABLE system_config ( id INTEGER PRIMARY KEY AUTOINCREMENT, config_key TEXT UNIQUE NOT NULL, config_value TEXT NOT NULL, description TEXT, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_by INTEGER );

-- Activity Logs CREATE TABLE user_activity_log ( id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER NOT NULL, action TEXT NOT NULL, details TEXT, ip_address TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP );


## 使用的技术

- **Next.js 15**：带有App Router的React框架
- **TypeScript**：类型安全的JavaScript
- **Tailwind CSS**：实用程序优先的CSS框架
- **SQLite3**：轻量级数据库
- **JWT**：用于身份验证的JSON Web令牌
- **诺德尔**：发送电子邮件以获取验证码
- **自由翻译**：开源翻译API

### 为什么选择Next.js？

Next.js之所以被选为该项目的框架，是因为它具有混合渲染功能（SSR、SSG、ISR）、内置的API路由（无需单独的后端服务器）、用于零成本服务器端数据获取的React服务器组件，以及它在基于文件的路由和自动优化方面的强大开发经验。

有关Next.js的核心功能、生态系统以及与替代品和竞争对手的比较的详细分解，请参阅 [NEXTJS.md](./NEXTJS.md).

## 配置

该应用程序已配置为连接到LibreTranslate。您可以使用环境变量自定义连接：

### 环境变量

#### 核心配置

- `DEV_MODE`：设置为 `true` 用于开发（将代码记录到控制台，而不是发送电子邮件）
- `NODE_ENV`：设置为 `production` 用于生产建设
- `PORT`：Next.js应用程序的端口（默认值：3456）

#### 认证

- `JWT_SECRET`：用于签名JWT令牌的密钥（必需，使用长随机字符串）
- `JWT_EXPIRY`：令牌过期时间（默认：24小时）
- `APP_URL`：电子邮件链接的应用程序URL（默认值：http://localhost:3456)

#### 电子邮件（SMTP）

- `SMTP_HOST`：SMTP服务器主机名
- `SMTP_PORT`：SMTP服务器端口（默认值：587）
- `SMTP_SECURE`：使用TLS（真/假）
- `SMTP_USER`：SMTP用户名
- `SMTP_PASSWORD`：SMTP密码

#### 翻译

- `LIBRETRANSLATE_URL`：自定义LibreTranslate服务器URL（默认：根据环境自动检测）

### LibreTranslate连接

该应用程序会根据环境自动检测LibreTranslate URL：

1. **Docker Compose**：用途 `http://libretranslate:5000` （服务名称）
1. **独立Docker**：用途 `http://host.docker.internal:5000` （连接到主机）
1. **本地开发**：用途 `http://localhost:5000`
1. **自定义**：设置 `LIBRETRANSLATE_URL` 环境变量

要手动更改LibreTranslate URL，请执行以下操作：

For Docker

docker run -p 3456:3456 -e LIBRETRANSLATE_URL=http://your-server:5000 multi-lingua

For local development

export LIBRETRANSLATE_URL=http://your-server:5000 npm run dev


## 发展

Start development server

npm run dev

Build for production

npm run build

Start production server

npm start

Run linting

npm run lint


## 码头工人

### 构建Docker镜像

Build the Docker image

docker build -t multi-lingua .

Run with LibreTranslate on host machine (localhost:5000)

docker run -p 3456:3456 multi-lingua

Run with custom LibreTranslate URL

docker run -p 3456:3456 -e LIBRETRANSLATE_URL=http://your-libretranslate-server:5000 multi-lingua

Run with LibreTranslate also in Docker (basic)

docker run -d --name libretranslate -p 5000:5000 libretranslate/libretranslate docker run -p 3456:3456 --link libretranslate:libretranslate -e LIBRETRANSLATE_URL=http://libretranslate:5000 multi-lingua

Run with LibreTranslate in Docker (with persistent storage)

docker run -d --name libretranslate -p 5000:5000 \ -v lt-local:/home/libretranslate/.local \ -v lt-db:/app/db \ libretranslate/libretranslate docker run -p 3456:3456 --link libretranslate:libretranslate -e LIBRETRANSLATE_URL=http://libretranslate:5000 multi-lingua


### 使用Docker Compose（推荐）

#### 选项1：已发布图像（无需构建）

Download the release docker-compose file

curl -O https://raw.githubusercontent.com/kjwenger/NaturalStupidity/main/MultiLingua/Copilot.AI/docker-compose.release.yml

Create and pre-populate LibreTranslate volume (recommended)

docker volume create lt-local docker run -d --name temp-libretranslate -p 5000:5000 -v lt-local:/home/libretranslate/.local libretranslate/libretranslate:latest

Wait for models to download, then: docker stop temp-libretranslate && docker rm temp-libretranslate

Start services using published images

docker-compose -f docker-compose.release.yml up -d


#### 方案2：地方发展建设

Start both Multi-Lingua and LibreTranslate with local build

docker-compose up -d

View logs

docker-compose logs -f

Stop services (preserves volumes)

docker-compose down

Rebuild and restart

docker-compose up --build -d

Clean up everything including volumes

docker-compose down -v


### 持久性和卷配置

Docker Compose设置包括以下持久存储：

- **LibreTranslate模型和词典**：使用外部 `lt-local` 卷（必须存在）
- **多语种数据库**：存储在 `./data` 主机上的目录

**重要**：Docker Compose配置需要一个现有的 `lt-local` 使用预下载的LibreTranslate语言模型。如果你没有这个卷，要么：

1. **首先创建并填充卷**:

# Run LibreTranslate standalone to download models docker run -d --name temp-libretranslate -p 5000:5000 \ -v lt-local:/home/libretranslate/.local \ libretranslate/libretranslate

# Wait for models to download, then stop docker stop temp-libretranslate && docker rm temp-libretranslate


1. **或修改docker-compose.yml** 创建新卷，而不是使用外部卷。

### 端口配置

- **多语言应用程序**: http://localhost:3456
- **API自由四译本** （外部访问）：http://localhost:5432
- **内部网络**：多语种通过以下方式连接到LibreTranslate `http://libretranslate:5000`

## 故障排除

1. **LibreTranslate 400错误**：通常表示缺少语言模型

   - 确保 `lt-local` 卷存在并包含下载的模型
   - 检查LibreTranslate日志： `docker-compose logs libretranslate`

1. **数量问题**：如果出现“找不到外部卷”错误

   - 首先独立运行LibreTranslate以创建 `lt-local` 体积
   - 或改变 `external: true` 到 `driver: local` 在docker-compose.yml中

1. **网络连接**:

   - 多语言应用程序日志应显示：“使用LibreTranslate URL：http://libretranslate:5000"
   - 测试： `curl -X POST http://localhost:3456/api/translate -H "Content-Type: application/json" -d '{"text": "hello"}'`

1. **数据库问题**：SQLite数据库文件将在中自动创建 `./data/`

1. **翻译错误**：检查浏览器控制台中的API错误消息

## 许可证

这个项目是开源的，可以在MIT许可证下使用。

Multi Lingua Nextjs

快速接入

详细介绍