# 聚合影视

**Repository Path**: mo3408/juying

## Basic Information

- **Project Name**: 聚合影视
- **Description**: 聚合影视一个轻量级、免费的在线视频搜索与观看平台，提供来自多个视频源的内容搜索与播放服务。无需注册，即开即用，支持多种设备访问。项目采用纯前端技术构建，可轻松部署在各类静态网站托管服务上。
- **Primary Language**: Unknown
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-23
- **Last Updated**: 2026-03-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 聚合影视 - 多源视频搜索平台

一个功能完善的聚合影视网站，支持多源视频搜索、自定义播放器、本地存储等功能。基于 Next.js 16 构建，使用 shadcn/ui 组件库。


## 功能特性

### 核心功能
- **多源聚合搜索** - 同时搜索多个视频源，一键获取全网资源
- **智能线路切换** - 自动检测所有可用播放线路，按响应速度排序
- **自定义播放器** - 基于 hls.js 的 HLS 流媒体播放器，支持多种快捷键
- **首页推荐** - 自动获取最新热门影视推荐
- **观看历史** - 本地存储观看记录，快速继续观看
- **成人内容过滤** - 可选过滤成人资源

### 视频源管理
- **预设源支持** - 内置猫眼、如意、量子、非凡、红牛等热门资源
- **自定义源** - 支持添加自定义视频源 API
- **接口检测** - 一键检测所有源的可用性和响应速度
- **推荐源设置** - 选择首页展示的推荐源
- **标记** - 标记资源，配合过滤使用

### 配置导入导出
- **导出配置** - 将视频源配置导出为 JSON 文件，方便备份和分享
- **导入配置** - 从 JSON 文件快速导入配置，支持多设备同步

### 播放器功能
- **HLS 支持** - 完美支持 m3u8 流媒体播放
- **倍速播放** - 0.5x ~ 2x 倍速调节
- **进度控制** - 快进/快退、进度条拖动
- **音量控制** - 音量调节、静音切换
- **全屏播放** - 支持全屏模式
- **快捷键** - 空格播放、方向键控制、M静音、F全屏

## 本地运行

### 环境要求

| 软件 | 版本要求 | 说明 |
|------|----------|------|
| Node.js | ≥ 18.x | 推荐 18.x 或 20.x |
| pnpm | ≥ 9.0.0 | 必须使用 pnpm，不支持 npm/yarn |
| Git | 最新版 | 用于克隆项目 |

### 第一步：克隆项目

```bash
# 克隆项目到本地
git clone https://gitee.com/mo3408/juying.git

# 进入项目目录
cd juying
```

### 第二步：安装 pnpm（如未安装）

```bash
# 全局安装 pnpm
npm install -g pnpm

# 验证安装
pnpm -v
```

### 第三步：安装依赖

```bash
# 安装项目依赖
pnpm install
```

安装过程可能需要 1-3 分钟，取决于网络速度。

### 第四步：开发模式运行

```bash
# 方式一：使用 coze 命令（推荐）
coze dev

# 方式二：使用 pnpm
pnpm run dev
```

启动成功后会显示访问地址：

```
==========================================
   聚合影视 - 服务器启动中
==========================================
环境: development
监听端口: 5000
==========================================
✅ 服务器已启动！

🌐 访问地址:
   本地访问: http://localhost:5000
   网络访问: http://192.168.x.x:5000

📝 环境: development
==========================================
```

支持的访问方式：
- **本机访问**：http://localhost:5000
- **局域网访问**：http://你的本机IP:5000（同一局域网内其他设备可访问）

开发模式支持热更新，修改代码后页面会自动刷新。

### 第五步：生产模式运行

```bash
# 1. 构建项目
pnpm run build

# 2. 启动生产服务
pnpm run start
```

### 第六步：使用 PM2 运行（可选）

```bash
# 安装 PM2
npm install -g pm2

# 构建项目
pnpm run build

# 启动服务
pm2 start ecosystem.config.cjs

# 查看状态
pm2 status

# 查看日志
pm2 logs 名称
```

### 本地运行常见问题

#### 1. 端口被占用

```bash
# 查看 5000 端口占用
# Windows
netstat -ano | findstr :5000

# macOS/Linux
lsof -i:5000

# 杀死占用进程（替换 PID）
kill -9 <PID>
```

#### 2. 依赖安装失败

```bash
# 清除缓存重新安装
rm -rf node_modules pnpm-lock.yaml
pnpm install
```

#### 3. 构建失败

```bash
# 清除构建缓存
rm -rf .next dist

# 重新构建
pnpm run build
```

#### 4. 热更新不生效

- 检查是否使用`pnpm run dev` 启动
- 清除浏览器缓存
- 重启开发服务器

### 开发工具推荐

- **IDE**：VS Code
- **浏览器**：Chrome / Edge（支持 React DevTools）
- **VS Code 插件**：
  - ESLint
  - Prettier
  - Tailwind CSS IntelliSense
  - TypeScript Vue Plugin (Volar)

### 项目脚本说明

| 命令 | 说明 |
|------|------|
| `pnpm run dev` | 启动开发服务器（热更新） |
| `pnpm run build` | 构建生产版本 |
| `pnpm run start` | 启动生产服务器 |
| `pnpm run lint` | 运行代码检查 |
| `pnpm run ts-check` | TypeScript 类型检查 |

## PM2 部署

### 安装 PM2

```bash
# 全局安装 PM2
pnpm add -g pm2

# 或者使用 npm
npm install -g pm2
```

### 使用 PM2 部署

```bash
# 1. 构建项目
pnpm run build

# 2. 启动服务
pm2 start ecosystem.config.cjs

# 3. 查看状态
pm2 status

# 4. 查看日志
pm2 logs video-aggregator

# 5. 停止服务
pm2 stop video-aggregator

# 6. 重启服务
pm2 restart video-aggregator

# 7. 删除服务
pm2 delete video-aggregator
```

### PM2 常用命令

```bash
# 查看所有进程
pm2 list

# 查看进程详情
pm2 show video-aggregator

# 查看实时日志
pm2 logs video-aggregator

# 查看监控面板
pm2 monit

# 清空日志
pm2 flush

# 保存当前进程列表
pm2 save

# 生成开机自启脚本
pm2 startup

# 恢复保存的进程
pm2 resurrect
```

### PM2 配置说明

`ecosystem.config.cjs` 配置项：

| 配置项 | 值 | 说明 |
|--------|-----|------|
| name | video-aggregator | 应用名称 |
| script | dist/server.js | 启动脚本 |
| PORT | 5000 | 服务端口 |
| instances | 1 | 进程实例数 |
| max_memory_restart | 500M | 内存超过 500M 自动重启 |
| cron_restart | 0 4 * * * | 每天凌晨 4 点自动重启 |
| error_file | logs/pm2-error.log | 错误日志路径 |
| out_file | logs/pm2-out.log | 输出日志路径 |

### 开机自启动

```bash
# 1. 生成启动脚本（按提示执行输出的命令）
pm2 startup

# 2. 保存当前进程列表
pm2 save

# 3. 验证自启动配置
pm2 saved
```

### 生产环境部署完整流程

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

# 2. 构建项目
pnpm run build

# 3. 启动 PM2 服务
pm2 start ecosystem.config.cjs --env production

# 4. 保存进程列表
pm2 save

# 5. 设置开机自启
pm2 startup

# 6. 验证服务状态
pm2 status
curl http://localhost:5000
```

## 宝塔面板部署

### 前置要求

- 服务器已安装宝塔面板（推荐 7.x 以上版本）
- 服务器内存 ≥ 1GB
- 服务器硬盘 ≥ 10GB

### 第一步：安装 Node.js 环境

1. 登录宝塔面板
2. 点击左侧菜单 **软件商店**
3. 搜索 **Node版本管理器**
4. 点击 **安装**
5. 安装完成后点击 **设置**
6. 在版本管理中选择 **Node.js 18.x** 或 **20.x** 版本安装
7. 安装完成后，在命令行验证：
   ```bash
   node -v
   npm -v
   ```

### 第二步：安装 PM2

在宝塔终端中执行：

```bash
# 全局安装 PM2
npm install -g pm2

# 验证安装
pm2 -v
```

### 第三步：安装 pnpm

```bash
# 全局安装 pnpm
npm install -g pnpm

# 验证安装
pnpm -v
```

### 第五步：安装依赖和构建

**方式一：使用一键部署脚本（推荐）**

```bash
# 进入项目目录
cd /www/wwwroot/项目

# 给脚本执行权限
chmod +x deploy-baota.sh

# 执行部署脚本
bash deploy-baota.sh
```

部署脚本会自动完成：安装依赖、构建项目、启动服务。

**方式二：手动执行**

```bash
# 进入项目目录
cd /www/wwwroot/项目

# 安装依赖
pnpm install

# 构建项目
pnpm run build
```

构建过程可能需要 2-5 分钟，请耐心等待。

### 第六步：验证构建结果

```bash
# 检查构建文件是否存在
ls -la dist/server.js
ls -la .next/

# 如果文件不存在，说明构建失败，请检查错误信息
```

### 第七步：使用 PM2 启动服务

```bash
# 启动服务（生产环境）
pm2 start ecosystem.config.cjs --env production

# 查看服务状态
pm2 status

# 查看启动日志（确认服务正常启动）
pm2 logs video-aggregator --lines 20

# 保存进程列表
pm2 save

# 设置开机自启
pm2 startup
```

执行 `pm2 startup` 后，会输出一条命令，复制并执行该命令以完成开机自启配置。

**验证服务是否正常：**

```bash
# 检查端口监听
netstat -tlnp | grep 5000

# 本地测试访问
curl http://127.0.0.1:5000
```

### 第八步：配置反向代理（Nginx）

1. 点击左侧菜单 **网站**
2. 点击 **添加站点**
3. 填写域名（如：`video.example.com`）
4. 点击 **提交** 创建站点
5. 点击站点名称进入设置
6. 点击 **反向代理** 选项卡
7. 点击 **添加反向代理**
8. 填写配置：
   - **代理名称**：video-aggregator
   - **目标URL**：`http://127.0.0.1:5000`
   - **发送域名**：`$host`
9. 点击 **提交** 保存

### 第八步：配置 SSL 证书（可选但推荐）

1. 在站点设置中点击 **SSL** 选项卡
2. 选择 **Let's Encrypt**
3. 点击 **申请** 免费证书
4. 申请成功后开启 **强制HTTPS**

### 第九步：验证部署

1. 访问你的域名 `https://video.example.com`
2. 检查首页是否正常显示
3. 测试搜索功能
4. 测试视频播放

### 宝塔常用操作

#### 查看 PM2 状态

```bash
# 查看进程列表
pm2 status

# 查看日志
pm2 logs video-aggregator

# 查看详细信息
pm2 show video-aggregator
```

#### 重启服务

```bash
# 重启服务
pm2 restart video-aggregator

# 重载服务（无停机）
pm2 reload video-aggregator
```

#### 更新代码

```bash
# 进入项目目录
cd /www/wwwroot/video-aggregator

# 拉取最新代码
git pull

# 安装新依赖
pnpm install

# 重新构建
pnpm run build

# 重启服务
pm2 restart video-aggregator
```

#### 查看日志

```bash
# 实时日志
pm2 logs video-aggregator

# 查看最近 100 行日志
pm2 logs video-aggregator --lines 100

# 清空日志
pm2 flush
```

### 宝塔防火墙配置

如果服务无法访问，请检查防火墙：

1. 点击左侧菜单 **安全**
2. 确认 **5000** 端口已放行（用于本地测试）
3. 确认 **80** 和 **443** 端口已放行（用于外部访问）

### 常见问题排查

#### 0. ⚠️ 502 Bad Gateway 错误（重要）

**502 错误通常表示后端服务未正常运行或端口连接失败。**

**步骤1：检查服务是否运行**

```bash
# 查看 PM2 进程状态
pm2 status

# 如果状态不是 online，查看错误日志
pm2 logs video-aggregator --err --lines 50
```

**步骤2：检查端口是否监听**

```bash
# 检查 5000 端口是否在监听
netstat -tlnp | grep 5000

# 或者使用 ss 命令
ss -tlnp | grep 5000

# 应该看到类似输出：
# tcp  LISTEN 0  511  0.0.0.0:5000  0.0.0.0:*  users:(("node",pid=xxx,fd=18))
```

**步骤3：检查服务能否本地访问**

```bash
# 在服务器上测试本地访问
curl http://127.0.0.1:5000

# 如果返回 HTML 内容，说明服务正常
# 如果无响应或报错，说明服务有问题
```

**步骤4：检查构建文件是否存在**

```bash
# 检查关键文件
ls -la dist/server.js
ls -la .next/

# 如果不存在，重新构建
pnpm run build
```

**步骤5：重启服务**

```bash
# 停止服务
pm2 stop video-aggregator
pm2 delete video-aggregator

# 重新启动
pm2 start ecosystem.config.cjs --env production

# 查看启动日志
pm2 logs video-aggregator --lines 20
```

**步骤6：检查 Nginx 配置**

```bash
# 测试 Nginx 配置语法
nginx -t

# 重载 Nginx
nginx -s reload

# 查看 Nginx 错误日志
tail -f /www/wwwlogs/nginx_error.log
```

**步骤7：使用一键部署脚本**

如果上述步骤都无法解决，使用提供的部署脚本重新部署：

```bash
# 给脚本执行权限
chmod +x deploy-baota.sh

# 执行部署
bash deploy-baota.sh
```

**常见原因及解决方案：**

| 原因 | 解决方案 |
|------|----------|
| 服务未启动 | `pm2 start ecosystem.config.cjs` |
| 端口被占用 | `lsof -i:5000` 找到并杀死占用进程 |
| 构建文件缺失 | `pnpm run build` 重新构建 |
| 环境变量错误 | 检查 `ecosystem.config.cjs` 中的 env 配置 |
| SELinux 阻止 | `setenforce 0` 临时关闭或配置规则 |
| 防火墙阻止 | 宝塔面板 > 安全 > 放行端口 |

#### 1. 端口被占用

```bash
# 查看 5000 端口占用
lsof -i:5000

# 杀死占用进程
kill -9 <PID>
```

#### 2. 内存不足

```bash
# 查看内存使用
free -h

# 创建交换空间（如果内存小于 1GB）
dd if=/dev/zero of=/swapfile bs=1M count=2048
chmod 600 /swapfile
mkswap /swapfile
swapon /swapfile
echo '/swapfile swap swap defaults 0 0' >> /etc/fstab
```

#### 3. 构建失败

```bash
# 清除缓存重新构建
rm -rf node_modules .next dist
pnpm install
pnpm run build
```

#### 4. PM2 进程异常退出

```bash
# 查看错误日志
pm2 logs video-aggregator --err

# 检查内存限制
pm2 show video-aggregator
```

#### 5. Nginx 反向代理不生效

检查 Nginx 配置文件：

```nginx
# /www/server/panel/vhost/nginx/video.example.com.conf
location / {
    proxy_pass http://127.0.0.1:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}
```

### 宝塔面板性能优化

#### 1. Node.js 内存限制

编辑 `ecosystem.config.cjs`，调整内存限制：

```javascript
max_memory_restart: '1G',  // 根据服务器内存调整
```

#### 2. PM2 集群模式（多核 CPU）

```javascript
// ecosystem.config.cjs
instances: 'max',  // 自动根据 CPU 核心数启动
exec_mode: 'cluster',
```

#### 3. 开启 Gzip 压缩

在 Nginx 配置中添加：

```nginx
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
gzip_min_length 1000;
```

### 部署检查清单

#### 环境检查
- [ ] Node.js 环境已安装（18.x 或 20.x）
- [ ] PM2 已全局安装
- [ ] pnpm 已全局安装

#### 构建检查
- [ ] 项目代码已上传
- [ ] 依赖已安装（pnpm install）
- [ ] 项目已构建（pnpm run build）
- [ ] dist/server.js 文件存在
- [ ] .next 目录存在

#### 服务检查
- [ ] PM2 服务已启动（pm2 status 显示 online）
- [ ] 5000 端口正在监听（netstat -tlnp | grep 5000）
- [ ] 本地可访问（curl http://127.0.0.1:5000 返回正常）
- [ ] PM2 开机自启已设置

#### Nginx 检查
- [ ] 站点已创建
- [ ] 反向代理已配置（目标 http://127.0.0.1:5000）
- [ ] Nginx 配置语法正确（nginx -t）
- [ ] Nginx 已重载（nginx -s reload）

#### 安全检查
- [ ] SSL 证书已配置（可选）
- [ ] 防火墙端口已放行（80、443）
- [ ] 网站可正常访问

## 项目结构

```
.
├── ecosystem.config.cjs          # PM2 配置文件
├── logs/                         # 日志目录
│   ├── pm2-error.log            # PM2 错误日志
│   └── pm2-out.log              # PM2 输出日志
├── src/
│   ├── app/                      # Next.js App Router 目录
│   │   ├── layout.tsx           # 根布局组件
│   │   ├── page.tsx             # 首页（推荐、搜索、历史）
│   │   ├── play/page.tsx        # 播放页面
│   │   ├── globals.css          # 全局样式
│   │   └── api/                 # API 路由
│   │       ├── proxy/route.ts   # 代理 API（解决 CORS）
│   │       └── video/route.ts   # 视频流代理
│   ├── components/              # React 组件目录
│   │   ├── ui/                  # shadcn/ui 基础组件
│   │   ├── VideoPlayer.tsx      # 视频播放器组件
│   │   ├── VideoGrid.tsx        # 视频网格组件
│   │   ├── SearchBar.tsx        # 搜索栏组件
│   │   └── SettingsDialog.tsx   # 设置对话框组件
│   ├── lib/                     # 工具函数库
│   │   ├── utils.ts             # 通用工具函数
│   │   ├── videoApi.ts          # 视频 API 封装
│   │   └── storage.ts           # 本地存储封装
│   ├── types/                   # TypeScript 类型定义
│   │   └── index.ts             # 类型定义文件
│   └── hooks/                   # 自定义 React Hooks
└── dist/                        # 构建输出目录
    └── server.js                # 生产服务器入口
```

## 默认视频源

| 源名称 | API 地址 | 说明 |
|--------|----------|------|
| 猫眼资源 | api.maoyanapi.top | 默认推荐源 |
| 如意资源 | jyzyapi.com | 金鹰播放源 |
| 量子资源 | cj.lziapi.com | 热门资源 |
| 非凡资源 | cj.ffzyapi.com | 热门资源 |
| 红牛资源 | hongniuzy2.com | 热门资源 |

## 使用说明

### 搜索视频
1. 在首页搜索框输入关键词
2. 系统自动搜索所有启用的视频源
3. 显示搜索进度和每个源的结果数量
4. 点击视频卡片进入播放页面

### 播放视频
1. 进入播放页面后自动加载视频
2. 自动搜索所有可用播放线路
3. 线路按响应速度排序，优先选择最快的源
4. 点击线路可切换播放源
5. 在剧集列表选择集数

### 管理视频源
1. 点击右上角设置按钮
2. 启用/禁用视频源
3. 设置首页推荐源
4. 标记成人资源
5. 添加自定义源
6. 检测源可用性

### 导入导出配置
1. 在设置对话框中点击"导出配置"
2. JSON 文件自动下载，包含所有视频源设置
3. 点击"导入配置"选择 JSON 文件
4. 配置自动应用

## 快捷键说明

| 快捷键 | 功能 |
|--------|------|
| 空格 / K | 播放/暂停 |
| ← / J | 后退 10 秒 |
| → / L | 前进 10 秒 |
| ↑ | 音量增加 |
| ↓ | 音量减少 |
| M | 静音/取消静音 |
| F | 全屏/退出全屏 |
| ESC | 退出全屏 |

## 技术栈

- **框架**: Next.js 16.1.1 (App Router)
- **UI 组件**: shadcn/ui (基于 Radix UI)
- **样式**: Tailwind CSS v4
- **视频播放**: hls.js
- **图标**: Lucide React
- **字体**: Geist Sans & Geist Mono
- **包管理器**: pnpm 9+
- **TypeScript**: 5.x

## API 接口格式

项目支持标准的视频源 API 格式：

### 搜索接口
```
GET {api_url}?ac=detail&wd={keyword}
```

### 获取推荐
```
GET {api_url}?ac=detail&pg=1
```

### 返回格式
```json
{
  "code": 1,
  "msg": "数据列表",
  "list": [
    {
      "vod_id": "1",
      "vod_name": "视频名称",
      "vod_pic": "封面图片",
      "vod_content": "简介",
      "vod_play_url": "剧集信息"
    }
  ]
}
```

## 开发规范

### 组件开发
优先使用 shadcn/ui 基础组件，位于 `src/components/ui/` 目录。

### 依赖管理
必须使用 pnpm 管理依赖：

```bash
# 安装依赖
pnpm install

# 添加新依赖
pnpm add package-name
```

### 样式开发
使用 Tailwind CSS v4，主题变量定义在 `src/app/globals.css`。

## 常见问题

### Q: 视频无法播放？
A: 可能是视频源不可用，尝试切换其他线路或刷新线路列表。

### Q: 搜索结果为空？
A: 检查视频源是否启用，部分源可能暂时不可用。

### Q: 如何添加自定义源？
A: 点击设置 -> 添加源 -> 输入名称和 API 地址 -> 保存。

### Q: 如何备份配置？
A: 点击设置 -> 导出配置 -> 保存 JSON 文件。

## 参考文档

- [Next.js 官方文档](https://nextjs.org/docs)
- [shadcn/ui 组件文档](https://ui.shadcn.com)
- [Tailwind CSS 文档](https://tailwindcss.com/docs)
- [hls.js 文档](https://github.com/video-dev/hls.js)

## 许可证

MIT License

---

使用 ❤️ 构建 | 聚合影视 - 多源视频搜索平台