在线影院

一个面向桌面与手机浏览器的响应式影视网站。项目使用 MacCMS API 获取影视列表、详情和播放地址，并以公开网页的热播信息作为首页排序参考。

功能

• 首页英雄区、豆瓣热门剧集/综艺/电影/高分电影、剧集、电影、动漫和综艺分区
• 分类筛选、关键词搜索与分页
• 影视详情首屏单线路加载、按需查找备用线路和选集
• HLS/m3u8 播放、原生 HLS 回退和播放错误提示
• 桌面六列、手机三列的响应式海报网格
• 深色影院风格主题与可持久化明暗切换
• 首页数据源切换，默认量子，并保持详情页多线路聚合
• “伦理”“电影解说”、演员和新闻资讯过滤
• Docker standalone 部署和健康检查

技术栈

• Next.js 16 App Router、React 19、TypeScript
• Tailwind CSS 4
• hls.js、Zod
• Vitest、Playwright
• pnpm 11、Node.js 24

本地运行

pnpm install
Copy-Item .env.example .env.local
pnpm dev

打开 http://localhost:3000。

检查命令

pnpm lint
pnpm test
pnpm build
pnpm test:e2e

Docker

docker build -t online-video .
docker run --rm -p 3000:3000 --name online-video online-video

健康检查地址：http://localhost:3000/api/health。

Redis 缓存

项目支持可选 Redis 服务端缓存，用于缓存首页热播、首页分类、热播点击解析结果和详情聚合结果。未配置 Redis 时会自动回退到原始接口请求。

配置说明见 docs/redis-cache.md。

数据流

1. 首页“在线影院热播”、热门综艺、热门电影和豆瓣高分在服务端读取豆瓣最近热门 JSON，首页各展示最多 12 项；“查看更多”进入可按频道和地区筛选的分页热播页。
2. 用户点击豆瓣热播卡片时，网站再按片名查询当前首页数据源。
3. 分类、搜索和普通首页分区使用当前首页数据源，默认量子。
4. 详情与播放页先加载卡片所属的当前线路；用户点击“加载更多线路”后，服务端才以最多 2 条并发检查其余允许的数据源。
5. 播放失败时，播放器按线路顺序逐条尝试备用源；每个影片标题与线路的匹配结果会独立缓存。
6. 浏览器直接播放资源地址，服务器不代理 m3u8 和视频分片。

内置数据源均在 src/lib/sources.ts 中以允许列表维护，前端不能提交任意接口地址。

首页数据源的保存方式、缓存隔离规则和分类映射见 docs/source-preference.md。

豆瓣热播频道的分类、请求方式和回退边界见 docs/douban-hot.md。

播放线路的按需查询、缓存及故障切换规则见 docs/playback-lines.md。

目录

src/app/          页面与 Route Handlers
src/components/   页面组件和播放器
src/lib/          数据源、解析、过滤和领域类型
tests/e2e/        响应式端到端测试
devLog/           AI 辅助开发记录

视觉 token、组件状态和设计约束见 DESIGN.md。

注意

• 外部海报使用动态域名，采用原生懒加载并设置 no-referrer。
• HLS 资源需要允许浏览器跨域读取；不支持 CORS 的线路会提示用户切换线路。
• 使用者应确保影视元数据及播放资源具有合法授权。