Twilioapp-admin/README.md
mars f20988b90c feat: 完成所有页面的演示模式实现
- 更新 DashboardLayout 组件,统一使用演示模式布局
- 实现仪表盘页面的完整演示数据和功能
- 完成用户管理页面的演示模式,包含搜索、过滤、分页等功能
- 实现通话记录页面的演示数据和录音播放功能
- 完成翻译员管理页面的演示模式
- 实现订单管理页面的完整功能
- 完成发票管理页面的演示数据
- 更新文档管理页面
- 添加 utils.ts 工具函数库
- 完善 API 路由和数据库结构
- 修复各种 TypeScript 类型错误
- 统一界面风格和用户体验
2025-06-30 19:42:43 +08:00

334 lines
9.0 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 口译服务管理后台
一个基于 Next.js 和 TypeScript 构建的现代化口译服务管理后台系统,集成 Supabase 数据库和完整的身份验证功能。
## 功能特性
### 🏢 企业服务管理
- **企业合同管理**:管理企业合同信息和服务费率配置
- **企业员工管理**:管理企业员工信息和通话记录
- **企业账单管理**:企业结算记录和账单管理
- **个性化费率配置**:为不同企业设置专属服务费率
### 📋 订单管理
- **多种服务类型**
- AI语音翻译
- AI视频翻译
- 手语翻译
- 人工口译
- 文档翻译
- **订单状态跟踪**:待处理、处理中、已完成、已取消、失败
- **优先级管理**:紧急、高、普通、低
- **详细信息展示**:包括译员信息、时间安排、费用等
- **实时数据同步**:基于 Supabase 实时订阅
### 📄 文档管理
- **文档上传管理**:支持多种文档格式
- **翻译进度跟踪**:实时显示翻译状态和进度
- **文档下载功能**:支持原文档和翻译结果下载
### 🧾 发票管理
- **发票生成**:支持个人和企业发票
- **发票下载**PDF格式发票下载
- **发票打印**:直接打印功能
- **发票状态管理**:草稿、已开具、已付款、已取消
### 👥 用户管理
- **多角色用户系统**:个人用户、企业用户、管理员
- **用户认证**:基于 Supabase Auth 的安全认证
- **权限控制**:行级安全策略保护数据
- **用户状态跟踪**:活跃状态、登录记录
### 🎯 译员管理
- **译员信息管理**:译员资料、专业领域
- **译员状态监控**:在线、离线、忙碌状态
- **语言能力管理**:支持的语言对
- **评价系统**:译员评分和反馈
### 📞 通话管理
- **实时通话监控**:当前活跃通话
- **通话记录管理**:历史通话记录
- **通话质量统计**:通话时长、费用统计
- **质量评估**:通话质量评分
### ⚙️ 系统设置
- **服务费率配置**:为每种服务设置独立费率
- **系统参数配置**:通话设置、通知设置
- **安全设置**:双因素认证、会话超时
- **API配置**:第三方服务集成
## 技术栈
### 前端技术
- **前端框架**Next.js 14
- **类型系统**TypeScript
- **样式框架**Tailwind CSS
- **图标库**Heroicons
- **状态管理**React Hooks
### 后端技术
- **数据库**Supabase (PostgreSQL)
- **身份验证**Supabase Auth
- **API**Next.js API Routes
- **实时功能**Supabase Realtime
### 第三方集成
- **支付处理**Stripe
- **通信服务**Twilio
- **AI服务**OpenAI
- **部署平台**Vercel
## 安装和运行
### 环境要求
- Node.js 18.0 或更高版本
- npm 或 yarn
- Supabase 项目(用于数据库和认证)
### 1. 安装依赖
```bash
npm install
# 或
yarn install
```
### 2. 环境配置
复制 `.env.example``.env.local` 并配置必要的环境变量:
```bash
cp .env.example .env.local
```
配置 Supabase 和其他服务:
```env
# Supabase 配置
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
# 其他服务配置
STRIPE_SECRET_KEY=sk_test_...
TWILIO_ACCOUNT_SID=AC...
OPENAI_API_KEY=sk-...
```
### 3. 数据库设置
在 Supabase Dashboard 中执行数据库脚本:
1. 登录 [Supabase Dashboard](https://supabase.com/dashboard)
2. 进入 SQL Editor
3. 复制 `database/schema.sql` 内容并执行
4. 创建管理员账户(可选)
### 4. 开发模式运行
```bash
npm run dev
# 或
yarn dev
```
访问 [http://localhost:3000](http://localhost:3000) 查看应用。
### 5. 构建生产版本
```bash
npm run build
# 或
yarn build
```
### 6. 启动生产服务器
```bash
npm start
# 或
yarn start
```
## 项目结构
```
├── components/ # 可复用组件
├── lib/ # 工具库和配置
│ ├── demo-data.ts # 演示数据
│ ├── supabase.ts # Supabase 配置和操作
│ └── utils.ts # 工具函数
├── pages/ # 页面组件
│ ├── api/ # API 路由
│ │ ├── auth/ # 认证 API
│ │ ├── orders/ # 订单 API
│ │ ├── users/ # 用户 API
│ │ └── ... # 其他 API
│ ├── auth/ # 认证页面
│ └── dashboard/ # 管理后台页面
├── database/ # 数据库相关文件
│ ├── schema.sql # 数据库结构
│ └── README.md # 数据库说明
├── types/ # TypeScript 类型定义
│ ├── database.ts # 数据库类型
│ └── auth.ts # 认证类型
├── public/ # 静态资源
├── styles/ # 样式文件
└── utils/ # 工具函数
```
## API 接口
### 认证接口
- `POST /api/auth/register` - 用户注册
- `POST /api/auth/login` - 用户登录
- `POST /api/auth/logout` - 用户登出
- `GET /api/auth/me` - 获取当前用户信息
### 订单接口
- `GET /api/orders` - 获取订单列表
- `POST /api/orders` - 创建新订单
- `PUT /api/orders/:id` - 更新订单
- `DELETE /api/orders/:id` - 删除订单
### 用户接口
- `GET /api/users` - 获取用户列表
- `POST /api/users` - 创建用户
- `PUT /api/users/:id` - 更新用户信息
- `DELETE /api/users/:id` - 删除用户
## 数据库架构
### 核心表结构
- **users** - 用户表(支持个人/企业/管理员)
- **enterprises** - 企业表
- **orders** - 订单表
- **invoices** - 发票表
- **interpreters** - 译员表
- **calls** - 通话记录表
- **documents** - 文档翻译表
### 安全策略
- 启用行级安全 (RLS)
- 基于用户角色的权限控制
- 数据访问审计日志
详细说明请参考 [database/README.md](./database/README.md)
## 核心功能说明
### 身份验证系统
- **多角色支持**:个人用户、企业用户、管理员
- **安全认证**:基于 JWT 令牌的会话管理
- **权限控制**:细粒度的权限管理
- **会话管理**:自动刷新和过期处理
### 费率优先级机制
系统采用三级费率优先级:
1. **企业合同费率**:优先级最高,适用于企业员工
2. **系统通用费率**:适用于个人用户和无合同企业
3. **默认费率**:系统兜底费率
### 实时功能
- **订单状态更新**:实时同步订单状态变化
- **通话监控**:实时监控活跃通话
- **消息通知**:即时消息推送
### 演示模式
项目支持演示模式,无需配置数据库即可体验完整功能:
- 自动检测 Supabase 配置
- 使用内置演示数据
- 支持所有功能的模拟操作
### 响应式设计
- 完全响应式界面设计
- 支持移动端和桌面端
- 优化的用户体验
## 部署
### Vercel 部署(推荐)
1. 将项目推送到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量
4. 部署完成
详细部署指南请参考 [DEPLOYMENT.md](./DEPLOYMENT.md)
### 其他平台部署
项目支持部署到任何支持 Next.js 的平台,如:
- Netlify
- Railway
- Heroku
- 自托管服务器
## 环境变量
### 必需配置
```bash
# Supabase 配置
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
# 应用配置
NEXTAUTH_SECRET=your-nextauth-secret
JWT_SECRET=your-jwt-secret
```
### 可选配置
```bash
# Stripe 支付
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
# Twilio 通信
TWILIO_ACCOUNT_SID=AC...
TWILIO_API_KEY_SID=SK...
TWILIO_API_KEY_SECRET=...
# OpenAI 服务
OPENAI_API_KEY=sk-...
```
## 贡献指南
1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request
### 开发规范
- 使用 TypeScript 进行类型安全开发
- 遵循 ESLint 和 Prettier 代码规范
- 编写单元测试
- 更新相关文档
## 许可证
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
## 文档和支持
### 相关文档
- [部署指南](./DEPLOYMENT.md)
- [数据库说明](./database/README.md)
- [API 参考](./docs/api-reference.md)
### 联系方式
- 项目地址:[http://git.wanzhongtech.com/mars/Twilioapp-admin](http://git.wanzhongtech.com/mars/Twilioapp-admin)
- 问题反馈:请在 GitLab Issues 中提交
## 更新日志
### v1.1.0 (2024-01-30)
- ✅ 集成 Supabase 数据库和身份验证
- ✅ 实现完整的 API 接口
- ✅ 添加用户认证和权限控制
- ✅ 优化数据库结构和安全策略
- ✅ 完善部署文档和指南
### v1.0.0 (2024-01-30)
- ✅ 完成企业服务管理功能
- ✅ 完成订单管理功能
- ✅ 完成发票管理功能
- ✅ 完成文档管理功能
- ✅ 完成用户和译员管理功能
- ✅ 完成系统设置功能
- ✅ 完成演示模式
- ✅ 完成响应式设计