Initial commit
This commit is contained in:
theshy
222
README.md
222
README.md
@ -1,36 +1,218 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# 录音应用
|
||||
|
||||
## Getting Started
|
||||
一个基于 Next.js 的现代化录音应用，支持高质量音频录制、用户认证和录音管理。
|
||||
|
||||
First, run the development server:
|
||||
## 功能特性
|
||||
|
||||
### 🎤 录音功能
|
||||
|
||||
- 高质量音频录制（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
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
访问 [http://localhost:3000](http://localhost:3000) 查看应用。
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
## 项目结构
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
```
|
||||
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 类型定义
|
||||
```
|
||||
|
||||
## Learn More
|
||||
## 主要功能说明
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
### 录音功能
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
- 使用 MediaRecorder API 进行高质量录音
|
||||
- 实时音频分析，显示波形可视化
|
||||
- 支持暂停/继续录音
|
||||
- 录音完成后自动保存到数据库
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
### 用户认证
|
||||
|
||||
## Deploy on Vercel
|
||||
- 支持邮箱/密码登录
|
||||
- Google OAuth 集成
|
||||
- 安全的会话管理
|
||||
- 用户资料管理
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
### 录音管理
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
- 录音列表显示
|
||||
- 自定义音频播放器
|
||||
- 录音下载功能
|
||||
- 录音删除功能
|
||||
|
||||
### 用户管理
|
||||
|
||||
- 个人资料编辑
|
||||
- 应用设置管理
|
||||
- 主题模式选择
|
||||
- 账户数据导出
|
||||
|
||||
## 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
|
||||
|
||||
Reference in New Issue
Block a user