# 录音应用

一个基于 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