# 启动指南

## 快速启动

### 1. 安装依赖
```bash
npm install
```

### 2. 数据库初始化
```bash
# 生成 Prisma 客户端
npx prisma generate

# 推送数据库 schema
DATABASE_URL="file:./dev.db" npx prisma db push

# 填充示例数据
DATABASE_URL="file:./dev.db" npx prisma db seed
```

### 3. 构建应用
```bash
npm run build
```

### 4. 启动应用
```bash
# 启动 Next.js 应用和 Socket.IO 服务器
node server.js
```

### 5. 访问应用
- 主页: http://localhost:3000
- 管理面板: http://localhost:3000/admin

## 开发模式

### 启动开发服务器
```bash
npm run dev
```

### 单独启动 Socket.IO 服务器（如果需要）
```bash
node server.js
```

## 可用脚本

- `npm run dev` - 启动开发服务器
- `npm run build` - 构建生产版本
- `npm run start` - 启动生产服务器
- `npm run lint` - 运行 ESLint
- `npm run type-check` - 运行 TypeScript 类型检查

## 数据库管理

### 查看数据库
```bash
npx prisma studio
```

### 重置数据库
```bash
DATABASE_URL="file:./dev.db" npx prisma db push --force-reset
DATABASE_URL="file:./dev.db" npx prisma db seed
```

## 环境变量

确保 `.env.local` 文件包含以下配置：

```env
# Database
DATABASE_URL="file:./dev.db"

# Next.js
NEXTAUTH_SECRET="my-live-photos-secret-key-123"
NEXTAUTH_URL="http://localhost:3000"

# File Upload
MAX_FILE_SIZE=10485760
ALLOWED_FILE_TYPES="image/jpeg,image/png,image/gif,video/mp4,video/webm"

# Socket.io
SOCKET_PORT=3001
```

## 功能特性

### 核心功能
- ✅ 实时文件上传（图片/视频）
- ✅ WebSocket 实时推送更新
- ✅ 响应式现代UI设计
- ✅ 管理员面板（文件管理）
- ✅ SQLite 数据存储
- ✅ 文件隐藏/显示控制
- ✅ 文件删除功能

### 技术特性
- ✅ 文件拖拽上传
- ✅ 上传进度显示
- ✅ 图片预览和视频播放
- ✅ 暗色/亮色主题切换
- ✅ 实时在线用户计数
- ✅ 文件搜索和筛选
- ✅ 响应式网格布局

## 故障排除

### 常见问题

1. **数据库连接错误**
   ```bash
   # 确保 DATABASE_URL 环境变量设置正确
   export DATABASE_URL="file:./dev.db"
   ```

2. **Socket.IO 连接失败**
   ```bash
   # 确保 Socket.IO 服务器正在运行
   node server.js
   ```

3. **文件上传失败**
   - 检查文件大小（最大 10MB）
   - 检查文件类型（支持 JPG, PNG, GIF, MP4, WebM）
   - 确保 uploads 目录存在且有写权限

4. **构建失败**
   ```bash
   # 清理并重新安装依赖
   rm -rf node_modules package-lock.json
   npm install
   npm run build
   ```

### 日志查看

- Next.js 日志：控制台输出
- Socket.IO 日志：控制台输出
- 数据库日志：Prisma Studio

## 生产部署

### 环境准备
1. 设置生产环境变量
2. 配置数据库（使用 PostgreSQL 或 MySQL）
3. 设置文件存储（使用 S3 或其他对象存储）

### 构建和启动
```bash
npm run build
npm start
```

### 使用 PM2 管理进程
```bash
# 安装 PM2
npm install -g pm2

# 启动应用
pm2 start server.js --name "my-live-photos"

# 查看状态
pm2 status

# 查看日志
pm2 logs my-live-photos
```

## API 文档

### 文件上传
```
POST /api/upload
Content-Type: multipart/form-data
```

### 获取文件列表
```
GET /api/files?type=image&page=1&limit=20
```

### 更新文件
```
PUT /api/files/[id]
Content-Type: application/json
```

### 删除文件
```
DELETE /api/files/[id]
```

## WebSocket 事件

### 客户端发送
- `file:upload` - 文件上传
- `file:delete` - 文件删除
- `file:toggle:visibility` - 切换文件可见性

### 服务器推送
- `file:uploaded` - 新文件上传
- `file:deleted` - 文件删除
- `file:visibility:changed` - 文件可见性变更
- `user:count` - 在线用户数