219 lines
4.7 KiB
Markdown
219 lines
4.7 KiB
Markdown
# 录音应用
|
||
|
||
一个基于 Next.js 的现代化录音应用，支持高质量音频录制、用户认证和录音管理。
|
||
|
||
## 功能特性
|
||
|
||
### 🎤 录音功能
|
||
|
||
- 高质量音频录制（WebM 格式）
|
||
- 实时音频波形可视化
|
||
- 录音进度条显示
|
||
- 暂停/继续录音功能
|
||
- 录音状态指示器
|
||
|
||
### 👤 用户管理
|
||
|
||
- 邮箱/密码登录
|
||
- Google OAuth 登录
|
||
- 用户个人资料管理
|
||
- 应用设置管理
|
||
- 安全退出登录
|
||
|
||
### 📱 用户界面
|
||
|
||
- 响应式设计，支持桌面和移动设备
|
||
- 现代化 UI 设计（参考 Apple 和 More Air）
|
||
- 自定义音频播放器
|
||
- 加载动画和状态指示器
|
||
|
||
### 🗄️ 数据管理
|
||
|
||
- SQLite 本地数据库
|
||
- Prisma ORM
|
||
- 录音文件本地存储
|
||
- 录音列表管理（查看、播放、删除）
|
||
|
||
## 技术栈
|
||
|
||
- **前端框架**: Next.js 14 (App Router)
|
||
- **UI 框架**: Tailwind CSS
|
||
- **认证**: NextAuth.js
|
||
- **数据库**: SQLite
|
||
- **ORM**: Prisma
|
||
- **音频处理**: MediaRecorder API, Web Audio API
|
||
- **语言**: TypeScript
|
||
|
||
## 快速开始
|
||
|
||
### 1. 克隆项目
|
||
|
||
```bash
|
||
git clone <repository-url>
|
||
cd record-app
|
||
```
|
||
|
||
### 2. 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 3. 环境配置
|
||
|
||
创建 `.env.local` 文件：
|
||
|
||
```env
|
||
# 数据库
|
||
DATABASE_URL="file:./dev.db"
|
||
|
||
# NextAuth
|
||
NEXTAUTH_URL="http://localhost:3000"
|
||
NEXTAUTH_SECRET="your-secret-key"
|
||
|
||
# Google OAuth (可选)
|
||
GOOGLE_CLIENT_ID="your-google-client-id"
|
||
GOOGLE_CLIENT_SECRET="your-google-client-secret"
|
||
```
|
||
|
||
### 4. 数据库设置
|
||
|
||
```bash
|
||
# 生成 Prisma 客户端
|
||
npx prisma generate
|
||
|
||
# 运行数据库迁移
|
||
npx prisma db push
|
||
```
|
||
|
||
### 5. 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
访问 [http://localhost:3000](http://localhost:3000) 查看应用。
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
record-app/
|
||
├── app/ # Next.js App Router
|
||
│ ├── api/ # API 路由
|
||
│ │ ├── auth/ # 认证相关 API
|
||
│ │ ├── recordings/ # 录音管理 API
|
||
│ │ └── user/ # 用户管理 API
|
||
│ ├── dashboard/ # 主面板页面
|
||
│ ├── login/ # 登录页面
|
||
│ ├── register/ # 注册页面
|
||
│ ├── profile/ # 个人资料页面
|
||
│ ├── settings/ # 设置页面
|
||
│ └── layout.tsx # 根布局
|
||
├── components/ # React 组件
|
||
│ ├── AudioRecorder.tsx # 录音组件
|
||
│ ├── AudioPlayer.tsx # 音频播放器
|
||
│ ├── RecordingList.tsx # 录音列表
|
||
│ ├── UserMenu.tsx # 用户菜单
|
||
│ ├── Header.tsx # 页面头部
|
||
│ └── LoadingSpinner.tsx # 加载动画
|
||
├── lib/ # 工具库
|
||
│ └── auth.ts # NextAuth 配置
|
||
├── prisma/ # 数据库配置
|
||
│ └── schema.prisma # 数据库模式
|
||
├── public/ # 静态资源
|
||
│ └── recordings/ # 录音文件存储
|
||
└── types/ # TypeScript 类型定义
|
||
```
|
||
|
||
## 主要功能说明
|
||
|
||
### 录音功能
|
||
|
||
- 使用 MediaRecorder API 进行高质量录音
|
||
- 实时音频分析，显示波形可视化
|
||
- 支持暂停/继续录音
|
||
- 录音完成后自动保存到数据库
|
||
|
||
### 用户认证
|
||
|
||
- 支持邮箱/密码登录
|
||
- Google OAuth 集成
|
||
- 安全的会话管理
|
||
- 用户资料管理
|
||
|
||
### 录音管理
|
||
|
||
- 录音列表显示
|
||
- 自定义音频播放器
|
||
- 录音下载功能
|
||
- 录音删除功能
|
||
|
||
### 用户管理
|
||
|
||
- 个人资料编辑
|
||
- 应用设置管理
|
||
- 主题模式选择
|
||
- 账户数据导出
|
||
|
||
## API 端点
|
||
|
||
### 认证
|
||
|
||
- `POST /api/auth/register` - 用户注册
|
||
- `POST /api/auth/login` - 用户登录
|
||
|
||
### 录音管理
|
||
|
||
- `GET /api/recordings` - 获取录音列表
|
||
- `POST /api/recordings/upload` - 上传录音
|
||
- `DELETE /api/recordings/[id]` - 删除录音
|
||
|
||
### 用户管理
|
||
|
||
- `GET /api/user/profile` - 获取用户资料
|
||
- `PUT /api/user/profile` - 更新用户资料
|
||
- `GET /api/user/settings` - 获取用户设置
|
||
- `PUT /api/user/settings` - 更新用户设置
|
||
|
||
## 开发指南
|
||
|
||
### 添加新功能
|
||
|
||
1. 在 `components/` 目录创建新组件
|
||
2. 在 `app/api/` 目录添加相应的 API 路由
|
||
3. 更新类型定义文件
|
||
4. 测试功能并更新文档
|
||
|
||
### 数据库修改
|
||
|
||
1. 修改 `prisma/schema.prisma`
|
||
2. 运行 `npx prisma db push` 更新数据库
|
||
3. 运行 `npx prisma generate` 更新客户端
|
||
|
||
### 样式修改
|
||
|
||
- 使用 Tailwind CSS 类名
|
||
- 遵循响应式设计原则
|
||
- 保持与现有设计风格一致
|
||
|
||
## 部署
|
||
|
||
### Vercel 部署
|
||
|
||
1. 连接 GitHub 仓库到 Vercel
|
||
2. 配置环境变量
|
||
3. 部署应用
|
||
|
||
### 本地部署
|
||
|
||
1. 构建应用：`npm run build`
|
||
2. 启动生产服务器：`npm start`
|
||
|
||
## 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request！
|
||
|
||
## 许可证
|
||
|
||
MIT License
|