Compare commits
18 Commits
v0.4.0-kat
...
main
| Author | SHA1 | Date |
|---|---|---|
 maye
|
6be5c25dfc | |
katelya
|
d9d50891f2 | |
|
katelya
|
cd12ebea76 | |
Katelya
|
36c9a6be20 | |
|
Katelya
|
8c698ceb7d | |
|
katelya
|
419c686879 | |
|
katelya
|
ec8111243a | |
|
Katelya
|
41ea51baae | |
|
katelya
|
d639bbe415 | |
|
katelya
|
dc336af4da | |
|
katelya
|
3ba6e798f6 | |
|
katelya
|
8da7d1153f | |
|
katelya
|
63c5e94f25 | |
|
katelya
|
ab4e58dc4c | |
|
Katelya
|
ea057e7c53 | |
|
katelya
|
4d4f2ab665 | |
|
katelya
|
97f2bdae97 | |
|
katelya
|
1e0c079957 |
|
|
@ -0,0 +1,53 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
.pnpm-store/
|
||||
|
||||
# Build outputs
|
||||
.next/
|
||||
out/
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Cache directories
|
||||
.cache/
|
||||
.parcel-cache/
|
||||
|
||||
# Environment files
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# Log files
|
||||
*.log
|
||||
logs/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# PWA Service Worker files (auto-generated)
|
||||
public/sw.js
|
||||
public/workbox-*.js
|
||||
|
||||
# Generated files
|
||||
src/lib/runtime.ts
|
||||
manifest.json
|
||||
|
||||
# Test coverage
|
||||
coverage/
|
||||
|
||||
# Storybook build outputs
|
||||
storybook-static/
|
||||
634
README.md
634
README.md
|
|
@ -1,215 +1,400 @@
|
|||
# KatelyaTV
|
||||
|
||||
<div align="center">
|
||||
<img src="public/logo.png" alt="KatelyaTV Logo" width="120">
|
||||
</div>
|
||||
|
||||
> 🎬 **KatelyaTV** 是一个开箱即用的、跨平台的影视聚合播放器。它基于 **Next.js 14** + **Tailwind CSS** + **TypeScript** 构建，支持多资源搜索、在线播放、收藏同步、播放记录、本地/云端存储，让你可以随时随地畅享海量免费影视内容。
|
||||
>
|
||||
> 本项目是在原始项目「MoonTV」基础上的二创与继承版本，由 Katelya 持续开发与维护。在致敬原作的前提下，继续修复问题、优化体验并扩展功能。
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 📋 重要声明
|
||||
|
||||
> ⚠️ **视频源说明**
|
||||
>
|
||||
> 应用户建议，为避免潜在的版权争议，本项目已移除内置的视频源配置。如需使用完整功能，请：
|
||||
> - 📥 [下载官方提供的视频源配置文件](https://www.mediafire.com/file/xl3yo7la2ci378w/config.json/file)
|
||||
> - 🔍 自行寻找符合当地法律法规的合规视频源
|
||||
> - 🛠️ 根据需要自定义配置文件
|
||||
>
|
||||
> 项目本身仅提供技术框架，内容源由用户自主选择和配置。请确保您的使用行为符合相关法律法规。
|
||||
|
||||
---
|
||||
|
||||
## 📸 Screenshot
|
||||
|
||||
<div align="center">
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="public/screenshot1.png" alt="KatelyaTV 截图1" width="400"></td>
|
||||
<td><img src="public/screenshot2.png" alt="KatelyaTV 截图2" width="400"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="public/screenshot3.png" alt="KatelyaTV 截图3" width="400"></td>
|
||||
<td><img src="public/screenshot4.png" alt="KatelyaTV 截图4" width="400"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## ✨ 功能特性
|
||||
|
||||
- 🔍 **多源聚合搜索**：内置20+个免费资源站点，一次搜索立刻返回全源结果，支持电影、电视剧、综艺等多种类型。
|
||||
- 📄 **丰富详情页**：支持剧集列表、演员、年份、简介等完整信息展示，集成豆瓣评分和热门推荐。
|
||||
- ▶️ **流畅在线播放**：集成 HLS.js & ArtPlayer，支持多种视频格式，自动跳过广告切片。
|
||||
- 📺 **观看历史记录**：智能记录播放进度，支持断点续播，多设备同步观看状态。
|
||||
- ❤️ **收藏 + 继续观看**：支持 Redis/D1/Upstash 存储，多端同步进度，个性化推荐。
|
||||
- 📱 **PWA 支持**：离线缓存、安装到桌面/主屏，移动端原生体验，支持推送通知。
|
||||
- 🌗 **响应式布局**：桌面侧边栏 + 移动底部导航，自适应各种屏幕尺寸，支持深色模式。
|
||||
- 👥 **多用户系统**：支持用户注册、登录、权限管理，数据隔离和同步。
|
||||
- 🚀 **极简部署**：一条 Docker 命令即可将完整服务跑起来，或免费部署到 Vercel 和 Cloudflare。
|
||||
- 🎨 **现代化UI**：基于 Tailwind CSS 构建，支持主题切换，流畅的动画效果。
|
||||
|
||||
<details>
|
||||
<summary>点击查看项目截图</summary>
|
||||
<img src="public/screenshot1.png" alt="项目截图" style="max-width:600px">
|
||||
<img src="public/screenshot2.png" alt="项目截图" style="max-width:600px">
|
||||
<img src="public/screenshot3.png" alt="项目截图" style="max-width:600px">
|
||||
</details>
|
||||
|
||||
## 🗺 目录
|
||||
|
||||
- [技术栈](#技术栈)
|
||||
- [核心功能](#核心功能)
|
||||
- [项目来源与声明](#项目来源与声明)
|
||||
- [部署](#部署)
|
||||
- [Docker 部署详解](#Docker-部署详解)
|
||||
- [Docker Compose 最佳实践](#Docker-Compose-最佳实践)
|
||||
- [环境变量](#环境变量)
|
||||
- [配置说明](#配置说明)
|
||||
- [管理员配置](#管理员配置)
|
||||
- [AndroidTV 使用](#AndroidTV-使用)
|
||||
- [Roadmap](#roadmap)
|
||||
- [安全与隐私提醒](#安全与隐私提醒)
|
||||
- [License](#license)
|
||||
- [致谢](#致谢)
|
||||
|
||||
## 🛠 技术栈
|
||||
<img src="public/logo.png" alt="KatelyaTV Logo" width="128" />
|
||||
<h1>KatelyaTV</h1>
|
||||
<p><strong>跨平台 · 聚合搜索 · 即开即用 · 自托管影视聚合播放器</strong></p>
|
||||
<p>基于 <code>Next.js 14</code> · <code>TypeScript</code> · <code>Tailwind CSS</code> · 多源聚合 / 播放记录 / 收藏同步 / PWA</p>
|
||||
<p>MoonTV 二创延续版 · 持续维护与增强</p>
|
||||
<p>
|
||||
<a href="#部署">🚀 部署</a> ·
|
||||
<a href="#功能特性">✨ 功能</a> ·
|
||||
<a href="#docker">🐳 Docker</a> ·
|
||||
<a href="#环境变量">⚙️ 配置</a>
|
||||
</p>
|
||||
|
||||
| 分类 | 主要依赖 |
|
||||
| --------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| 前端框架 | [Next.js 14](https://nextjs.org/) · App Router |
|
||||
| UI & 样式 | [Tailwind CSS 3](https://tailwindcss.com/) · [Framer Motion](https://www.framer.com/motion/) |
|
||||
| 语言 | TypeScript 4 |
|
||||
| 语言 | TypeScript 5 |
|
||||
| 播放器 | [ArtPlayer](https://github.com/zhw2590582/ArtPlayer) · [HLS.js](https://github.com/video-dev/hls.js/) |
|
||||
| 状态管理 | React Hooks · Context API |
|
||||
| 代码质量 | ESLint · Prettier · Jest · Husky |
|
||||
| 部署 | Docker · Vercel · CloudFlare pages |
|
||||
|
||||
## 🎯 核心功能
|
||||
## <20> 项目来源与声明
|
||||
|
||||
### 观看历史记录
|
||||
本项目自「MoonTV」演进而来，为其二创/继承版本，持续维护与改进功能与体验。保留并致谢原作者与社区贡献者；如有授权或版权问题请联系以处理。目标：在原作基础上提供更易部署、更友好、更稳定的体验。
|
||||
|
||||
- **智能进度记录**：自动记录每个视频的播放进度、观看时长、当前集数
|
||||
- **断点续播**：支持从上次观看位置继续播放，无需手动寻找
|
||||
- **多设备同步**：通过 Redis/D1/Upstash 存储，实现跨设备观看记录同步
|
||||
- **历史管理**：支持查看、删除单条记录或清空全部历史
|
||||
- **进度条显示**：在视频卡片上显示观看进度百分比
|
||||
## 🚀 部署教程
|
||||
|
||||
### 多源聚合搜索
|
||||
> **💡 推荐方案**：新手优先选择 **Docker 单容器**（最简单），需要多用户再升级到 **Docker + Redis**
|
||||
|
||||
- **20+ 资源站点**：集成电影天堂、黑木耳、如意资源等热门站点
|
||||
- **统一搜索接口**：一次搜索返回多个源的结果，提高资源获取成功率
|
||||
- **智能去重**：自动识别重复内容，优化搜索结果展示
|
||||
- **分类筛选**：支持按电影、电视剧、综艺等类型筛选
|
||||
<div align="center">
|
||||
|
||||
### 收藏与同步
|
||||
### 📋 部署方式对比
|
||||
|
||||
- **个性化收藏**：支持收藏喜欢的影视作品，创建个人片单
|
||||
- **多端同步**：收藏数据云端存储，多设备访问保持一致
|
||||
- **观看状态**：收藏夹中显示观看进度和当前集数
|
||||
- **批量管理**：支持批量删除和清空收藏
|
||||
| 方式 | 难度 | 成本 | 多用户 | 推荐场景 |
|
||||
|------|------|------|--------|----------|
|
||||
| 🐳 **Docker 单容器** | ⭐ | 需服务器 | ❌ | 个人使用，最简单 |
|
||||
| 🐳 **Docker + Redis** | ⭐⭐ | 需服务器 | ✅ | 家庭/团队，功能完整 |
|
||||
| ☁️ **Vercel** | ⭐ | 免费 | ❌ | 临时体验，无服务器 |
|
||||
| 🌐 **Cloudflare** | ⭐⭐⭐ | 免费 | ✅ | 技术爱好者 |
|
||||
|
||||
### PWA 特性
|
||||
</div>
|
||||
|
||||
- **离线缓存**：支持离线访问已缓存的内容
|
||||
- **桌面安装**：可安装到桌面，提供原生应用体验
|
||||
- **推送通知**：支持新内容推送和更新提醒
|
||||
- **响应式设计**：完美适配各种屏幕尺寸
|
||||
---
|
||||
|
||||
## 📢 项目来源与声明
|
||||
## 🎯 方案一：Docker 单容器（推荐新手）
|
||||
|
||||
- 本项目自「MoonTV」演进而来，为其二创/继承版本，持续维护与改进功能与体验。
|
||||
- 代码中保留并致谢原有作者与社区贡献者；如有授权或版权问题，请与我们联系以尽快处理。
|
||||
- KatelyaTV 致力于在原作优秀基础上，提供更易部署、更友好、更稳定的使用体验。
|
||||
> **适合场景**：个人使用，有服务器/NAS/电脑，想要最简单的部署方式
|
||||
|
||||
## 🚀 部署
|
||||
### 🔧 前置要求
|
||||
- 一台能联网的设备（服务器/NAS/Windows/Mac/Linux 都行）
|
||||
- 已安装 Docker（[Docker 官网下载](https://www.docker.com/get-started/)）
|
||||
|
||||
本项目**支持 Vercel、Docker 和 Cloudflare** 部署。
|
||||
### 📝 详细步骤
|
||||
|
||||
### 存储支持矩阵
|
||||
#### 第一步：拉取镜像
|
||||
```bash
|
||||
# 下载最新版本镜像（支持 ARM 和 x86 架构）
|
||||
docker pull ghcr.io/katelya77/katelyatv:latest
|
||||
```
|
||||
|
||||
| | Docker | Vercel | Cloudflare |
|
||||
| :-----------: | :----: | :----: | :--------: |
|
||||
| localstorage | ✅ | ✅ | ✅ |
|
||||
| 原生 redis | ✅ | | |
|
||||
| Cloudflare D1 | | | ✅ |
|
||||
| Upstash Redis | ☑️ | ✅ | ☑️ |
|
||||
#### 第二步：启动容器
|
||||
```bash
|
||||
# 一键启动（请把 your_password 改成你的密码）
|
||||
docker run -d \
|
||||
--name katelyatv \
|
||||
-p 3000:3000 \
|
||||
--env PASSWORD=your_password \
|
||||
--restart unless-stopped \
|
||||
ghcr.io/katelya77/katelyatv:latest
|
||||
```
|
||||
|
||||
✅：经测试支持
|
||||
☑️：理论上支持，未测试
|
||||
> **Windows 用户注意**：在 PowerShell 中运行上述命令
|
||||
|
||||
除 localstorage 方式外，其他方式都支持多账户、记录同步和管理页面
|
||||
#### 第三步：访问应用
|
||||
1. 打开浏览器，访问：`http://你的服务器IP:3000`
|
||||
2. 如果是本机安装，访问：`http://localhost:3000`
|
||||
3. 输入你在第二步设置的密码即可进入
|
||||
|
||||
### Vercel 部署
|
||||
#### 第四步：自定义资源站（可选）
|
||||
如果你有自己的资源站配置，可以挂载 `config.json` 文件：
|
||||
|
||||
#### 普通部署（localstorage）
|
||||
```bash
|
||||
# 先停止并删除旧容器
|
||||
docker stop katelyatv && docker rm katelyatv
|
||||
|
||||
1. **Fork** 本仓库到你的 GitHub 账户。
|
||||
2. 登陆 [Vercel](https://vercel.com/)，点击 **Add New → Project**，选择 Fork 后的仓库。
|
||||
3. 设置 PASSWORD 环境变量。
|
||||
4. 保持默认设置完成首次部署。
|
||||
5. 如需自定义 `config.json`，请直接修改 Fork 后仓库中该文件。
|
||||
6. 每次 Push 到 `main` 分支将自动触发重新构建。
|
||||
# 重新运行并挂载配置文件
|
||||
docker run -d \
|
||||
--name katelyatv \
|
||||
-p 3000:3000 \
|
||||
--env PASSWORD=your_password \
|
||||
-v /path/to/your/config.json:/app/config.json:ro \
|
||||
--restart unless-stopped \
|
||||
ghcr.io/katelya77/katelyatv:latest
|
||||
```
|
||||
|
||||
部署完成后即可通过分配的域名访问，也可以绑定自定义域名。
|
||||
> **路径说明**：把 `/path/to/your/config.json` 替换成你的配置文件完整路径
|
||||
> **Windows 示例**：`-v C:/Users/你的用户名/Desktop/config.json:/app/config.json:ro`
|
||||
|
||||
#### Upstash Redis 支持
|
||||
### 🛠️ 常用管理命令
|
||||
```bash
|
||||
# 查看运行状态
|
||||
docker ps
|
||||
|
||||
0. 完成普通部署并成功访问。
|
||||
1. 在 [upstash](https://upstash.com/) 注册账号并新建一个 Redis 实例，名称任意。
|
||||
2. 复制新数据库的 **HTTPS ENDPOINT 和 TOKEN**
|
||||
3. 返回你的 Vercel 项目，新增环境变量 **UPSTASH_URL 和 UPSTASH_TOKEN**，值为第二步复制的 endpoint 和 token
|
||||
4. 设置环境变量 NEXT_PUBLIC_STORAGE_TYPE，值为 **upstash**；设置 USERNAME 和 PASSWORD 作为站长账号
|
||||
5. 重试部署
|
||||
# 查看日志
|
||||
docker logs katelyatv
|
||||
|
||||
### Cloudflare 部署
|
||||
# 重启应用
|
||||
docker restart katelyatv
|
||||
|
||||
**Cloudflare Pages 的环境变量尽量设置为密钥而非文本**
|
||||
# 停止应用
|
||||
docker stop katelyatv
|
||||
|
||||
#### 普通部署（localstorage）
|
||||
# 删除容器
|
||||
docker rm katelyatv
|
||||
```
|
||||
|
||||
1. **Fork** 本仓库到你的 GitHub 账户。
|
||||
2. 登陆 [Cloudflare](https://cloudflare.com)，点击 **计算（Workers）-> Workers 和 Pages**，点击创建
|
||||
3. 选择 Pages，导入现有的 Git 存储库，选择 Fork 后的仓库
|
||||
4. 构建命令填写 **pnpm install --frozen-lockfile && pnpm run pages:build**，预设框架为无，构建输出目录为 `.vercel/output/static`
|
||||
5. 保持默认设置完成首次部署。进入设置，将兼容性标志设置为 `nodejs_compat`
|
||||
6. 首次部署完成后进入设置，新增 PASSWORD 密钥（变量和机密下），而后重试部署。
|
||||
7. 如需自定义 `config.json`，请直接修改 Fork 后仓库中该文件。
|
||||
8. 每次 Push 到 `main` 分支将自动触发重新构建。
|
||||
---
|
||||
|
||||
#### D1 支持
|
||||
## 🎯 方案二：Docker + Redis（推荐进阶）
|
||||
|
||||
0. 完成普通部署并成功访问
|
||||
1. 点击 **存储和数据库 -> D1 SQL 数据库**，创建一个新的数据库，名称随意
|
||||
2. 进入刚创建的数据库，点击左上角的 Explore Data，将[D1 初始化](D1初始化.md) 中的内容粘贴到 Query 窗口后点击 **Run All**，等待运行完成
|
||||
3. 返回你的 pages 项目，进入 **设置 -> 绑定**，添加绑定 D1 数据库，选择你刚创建的数据库，变量名称填 **DB**
|
||||
4. 设置环境变量 NEXT_PUBLIC_STORAGE_TYPE，值为 **d1**；设置 USERNAME 和 PASSWORD 作为站长账号
|
||||
5. 重试部署
|
||||
> **适合场景**：多人使用，需要账号系统、观看记录同步、收藏功能
|
||||
|
||||
## 🐳 Docker 部署详解
|
||||
### 🔧 前置要求
|
||||
- 已完成方案一，确认单容器版本能正常运行
|
||||
- 了解基本的 Docker Compose 概念
|
||||
|
||||
Docker 是推荐的部署方式，提供完整的环境隔离和便捷的管理体验。我们的镜像支持多架构（`linux/amd64`、`linux/arm64`），确保在各种硬件平台上都能稳定运行。
|
||||
### 📝 详细步骤
|
||||
|
||||
#### 第一步：创建配置文件
|
||||
在你的服务器上创建一个文件夹，比如 `/opt/katelyatv`：
|
||||
|
||||
```bash
|
||||
# 创建目录
|
||||
mkdir -p /opt/katelyatv
|
||||
cd /opt/katelyatv
|
||||
|
||||
# 创建 docker-compose.yml 文件
|
||||
cat > docker-compose.yml << 'EOF'
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
# KatelyaTV 主应用
|
||||
katelyatv:
|
||||
image: ghcr.io/katelya77/katelyatv:latest
|
||||
container_name: katelyatv
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
# 管理员账号（请修改）
|
||||
- USERNAME=admin
|
||||
- PASSWORD=your_strong_password
|
||||
# 启用 Redis 存储
|
||||
- NEXT_PUBLIC_STORAGE_TYPE=redis
|
||||
- REDIS_URL=redis://katelyatv-redis:6379
|
||||
# 允许用户注册（可选）
|
||||
- NEXT_PUBLIC_ENABLE_REGISTER=true
|
||||
depends_on:
|
||||
katelyatv-redis:
|
||||
condition: service_healthy
|
||||
restart: unless-stopped
|
||||
# 可选：挂载自定义配置
|
||||
# volumes:
|
||||
# - ./config.json:/app/config.json:ro
|
||||
|
||||
# Redis 数据库
|
||||
katelyatv-redis:
|
||||
image: redis:7-alpine
|
||||
container_name: katelyatv-redis
|
||||
command: redis-server --appendonly yes --maxmemory 256mb --maxmemory-policy allkeys-lru
|
||||
volumes:
|
||||
- katelyatv-redis-data:/data
|
||||
healthcheck:
|
||||
test: ["CMD", "redis-cli", "ping"]
|
||||
interval: 10s
|
||||
timeout: 3s
|
||||
retries: 3
|
||||
restart: unless-stopped
|
||||
|
||||
volumes:
|
||||
katelyatv-redis-data:
|
||||
EOF
|
||||
```
|
||||
|
||||
#### 第二步：修改配置
|
||||
编辑 `docker-compose.yml` 文件，**必须修改**以下内容：
|
||||
- `PASSWORD=your_strong_password` 改成你的强密码
|
||||
- `USERNAME=admin` 可以改成你喜欢的管理员用户名
|
||||
|
||||
#### 第三步：启动服务
|
||||
```bash
|
||||
# 启动所有服务
|
||||
docker compose up -d
|
||||
|
||||
# 查看启动状态
|
||||
docker compose ps
|
||||
```
|
||||
|
||||
#### 第四步：验证部署
|
||||
1. 访问 `http://你的服务器IP:3000`
|
||||
2. 使用你设置的用户名和密码登录
|
||||
3. 登录后访问 `http://你的服务器IP:3000/admin` 进入管理后台
|
||||
4. 在管理后台可以配置资源站、管理用户等
|
||||
|
||||
### 🛠️ 管理命令
|
||||
```bash
|
||||
# 查看所有服务状态
|
||||
docker compose ps
|
||||
|
||||
# 查看日志
|
||||
docker compose logs -f
|
||||
|
||||
# 重启所有服务
|
||||
docker compose restart
|
||||
|
||||
# 停止所有服务
|
||||
docker compose down
|
||||
|
||||
# 更新到最新版本
|
||||
docker compose pull
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
### 💾 备份数据
|
||||
```bash
|
||||
# 备份 Redis 数据
|
||||
docker run --rm -v katelyatv-redis-data:/data -v $(pwd):/backup alpine tar czf /backup/redis-backup-$(date +%Y%m%d).tar.gz /data
|
||||
|
||||
# 恢复数据（如果需要）
|
||||
docker run --rm -v katelyatv-redis-data:/data -v $(pwd):/backup alpine tar xzf /backup/redis-backup-20241201.tar.gz -C /
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 方案三：Vercel 部署（免服务器）
|
||||
|
||||
> **适合场景**：没有服务器，想要快速体验，个人使用
|
||||
|
||||
### 🔧 前置要求
|
||||
- GitHub 账号
|
||||
- Vercel 账号（可用 GitHub 登录）
|
||||
|
||||
### 📝 详细步骤
|
||||
|
||||
#### 第一步：Fork 仓库
|
||||
1. 打开 [KatelyaTV GitHub 页面](https://github.com/katelya77/KatelyaTV)
|
||||
2. 点击右上角 **Fork** 按钮
|
||||
3. 等待 Fork 完成
|
||||
|
||||
#### 第二步：部署到 Vercel
|
||||
1. 访问 [Vercel](https://vercel.com/)，用 GitHub 账号登录
|
||||
2. 点击 **Add New... → Project**
|
||||
3. 找到你刚才 Fork 的 `KatelyaTV` 仓库，点击 **Import**
|
||||
4. 在 **Environment Variables** 部分添加：
|
||||
- Key: `PASSWORD`
|
||||
- Value: `你的访问密码`（这是进入网站的密码）
|
||||
5. 点击 **Deploy** 开始部署
|
||||
|
||||
#### 第三步：等待部署完成
|
||||
- 通常需要 2-3 分钟
|
||||
- 部署成功后会显示域名，比如 `https://your-project.vercel.app`
|
||||
|
||||
#### 第四步：访问和使用
|
||||
1. 点击 Vercel 提供的域名链接
|
||||
2. 输入你在第二步设置的密码
|
||||
3. 开始使用！
|
||||
|
||||
### 🔧 自定义资源站
|
||||
如果你想添加自己的资源站：
|
||||
1. 在你 Fork 的仓库中找到 `config.json` 文件
|
||||
2. 点击编辑按钮（铅笔图标）
|
||||
3. 修改配置内容
|
||||
4. 点击 **Commit changes**
|
||||
5. Vercel 会自动重新部署
|
||||
|
||||
### ⚠️ 注意事项
|
||||
- Vercel 版本不支持用户注册和账号系统
|
||||
- 观看记录保存在浏览器本地，换设备会丢失
|
||||
- 如果需要多用户功能，请考虑 Docker + Redis 方案
|
||||
|
||||
---
|
||||
|
||||
## 🎯 方案四：Cloudflare Pages（进阶用户）
|
||||
|
||||
> **适合场景**：技术爱好者，想要全球 CDN 加速，免费但配置复杂
|
||||
|
||||
### 🔧 前置要求
|
||||
- GitHub 账号
|
||||
- Cloudflare 账号
|
||||
- 对前端构建有基本了解
|
||||
|
||||
### 📝 详细步骤
|
||||
|
||||
#### 第一步：Fork 仓库并连接
|
||||
1. Fork [KatelyaTV 仓库](https://github.com/katelya77/KatelyaTV)
|
||||
2. 登录 [Cloudflare](https://cloudflare.com)
|
||||
3. 进入 **Workers 和 Pages** → 点击 **创建应用程序**
|
||||
4. 选择 **Pages** → **连接到 Git**
|
||||
5. 选择你 Fork 的仓库
|
||||
|
||||
#### 第二步：配置构建设置
|
||||
在构建设置页面填写：
|
||||
- **构建命令**: `npm install && npm run pages:build`
|
||||
- **构建输出目录**: `.vercel/output/static`
|
||||
- **Root directory**: `./`（默认）
|
||||
|
||||
#### 第三步：设置兼容性
|
||||
1. 点击 **保存并部署**
|
||||
2. 等待首次构建完成（可能会失败，没关系）
|
||||
3. 进入项目 **设置** → **兼容性标志**
|
||||
4. 添加标志: `nodejs_compat`
|
||||
|
||||
#### 第四步：添加环境变量
|
||||
在 **设置** → **环境变量** 中添加：
|
||||
- `PASSWORD`: 你的访问密码
|
||||
|
||||
#### 第五步：重新部署
|
||||
1. 进入 **部署** 页面
|
||||
2. 点击最新部署旁的 **...** → **重试部署**
|
||||
3. 等待部署成功
|
||||
|
||||
### 🗄️ 启用 D1 数据库（可选，支持多用户）
|
||||
|
||||
如果你想要用户系统和数据同步：
|
||||
|
||||
#### 第一步：创建 D1 数据库
|
||||
1. 在 Cloudflare Dashboard 进入 **存储和数据库** → **D1 SQL 数据库**
|
||||
2. 点击 **创建数据库**，名称随意（比如 `katelyatv-db`）
|
||||
|
||||
#### 第二步：初始化数据库
|
||||
1. 进入刚创建的数据库
|
||||
2. 点击 **Explore Data**
|
||||
3. 打开项目中的 [D1初始化.md](https://github.com/katelya77/KatelyaTV/blob/main/D1%E5%88%9D%E5%A7%8B%E5%8C%96.md) 文件，复制所有 SQL 语句
|
||||
4. 粘贴到查询窗口，点击 **Run All**
|
||||
|
||||
#### 第三步：绑定数据库
|
||||
1. 回到 Pages 项目设置
|
||||
2. 进入 **绑定** → **添加绑定**
|
||||
3. 选择 **D1 数据库**
|
||||
4. 变量名: `DB`
|
||||
5. 选择你刚创建的数据库
|
||||
|
||||
#### 第四步：添加环境变量
|
||||
在环境变量中追加：
|
||||
- `NEXT_PUBLIC_STORAGE_TYPE`: `d1`
|
||||
- `USERNAME`: 管理员用户名
|
||||
- `PASSWORD`: 管理员密码
|
||||
|
||||
#### 第五步：重新部署
|
||||
重新部署后，你就可以：
|
||||
- 使用管理员账号登录
|
||||
- 访问 `/admin` 管理后台
|
||||
- 支持用户注册和数据同步
|
||||
|
||||
---
|
||||
|
||||
## 🆙 升级和维护
|
||||
|
||||
### Docker 升级
|
||||
```bash
|
||||
# 单容器版本
|
||||
docker stop katelyatv
|
||||
docker rm katelyatv
|
||||
docker pull ghcr.io/katelya77/katelyatv:latest
|
||||
# 然后重新运行启动命令
|
||||
|
||||
# Compose 版本
|
||||
docker compose pull
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
### Vercel 升级
|
||||
- 自动升级：当原仓库更新时，你的 Fork 仓库会收到更新提示
|
||||
- 手动升级：在你的 Fork 仓库点击 **Sync fork** 按钮
|
||||
|
||||
### Cloudflare 升级
|
||||
- 同 Vercel，通过 Git 同步自动触发重新构建
|
||||
|
||||
### 🚨 常见问题排查
|
||||
|
||||
| 问题 | 现象 | 解决方法 |
|
||||
|------|------|----------|
|
||||
| 无法访问 | 浏览器显示无法连接 | 检查端口 3000 是否开放，防火墙设置 |
|
||||
| 403 Forbidden | 显示访问被拒绝 | 检查 PASSWORD 环境变量是否设置正确 |
|
||||
| Docker 启动失败 | 容器无法启动 | 查看日志 `docker logs katelyatv` |
|
||||
| Redis 连接失败 | 无法登录或保存数据 | 检查 Redis 容器是否正常运行 |
|
||||
| 构建失败 | Vercel/Cloudflare 部署失败 | 查看构建日志，检查环境变量设置 |
|
||||
|
||||
需要帮助？可以在 [GitHub Issues](https://github.com/katelya77/KatelyaTV/issues) 提问。
|
||||
## 🐳 Docker
|
||||
|
||||
推荐方式。镜像多架构 (`linux/amd64`,`linux/arm64`)，基于 Alpine，体积小启动快。
|
||||
|
||||
### 🚀 快速开始
|
||||
|
||||
#### 1. 基础部署（最简单）
|
||||
#### 1. 基础部署（LocalStorage，最快验证）
|
||||
|
||||
```bash
|
||||
# 拉取最新镜像（支持 amd64/arm64 多架构）
|
||||
|
|
@ -226,7 +411,9 @@ docker run -d \
|
|||
|
||||
访问 `http://服务器IP:3000` 即可使用。（需要在服务器控制台开放 3000 端口）
|
||||
|
||||
#### 2. 带自定义配置的部署
|
||||
> Windows 本地构建如遇 Node Standalone `EPERM symlink`：优先使用 **Docker 镜像** 或在 **WSL2** 环境构建；无需修改源码。
|
||||
|
||||
#### 2. 自定义配置（挂载 config.json）
|
||||
|
||||
```bash
|
||||
# 创建配置文件目录
|
||||
|
|
@ -242,7 +429,7 @@ docker run -d \
|
|||
ghcr.io/katelya77/katelyatv:latest
|
||||
```
|
||||
|
||||
#### 3. 查看运行状态
|
||||
#### 3. 常用运维命令
|
||||
|
||||
```bash
|
||||
# 查看容器状态
|
||||
|
|
@ -255,7 +442,7 @@ docker logs katelyatv
|
|||
docker logs -f katelyatv
|
||||
```
|
||||
|
||||
#### 4. 升级到最新版本
|
||||
#### 4. 升级镜像
|
||||
|
||||
```bash
|
||||
# 停止并删除旧容器
|
||||
|
|
@ -299,11 +486,10 @@ docker stats katelyatv
|
|||
docker run --rm -v katelyatv_data:/data -v $(pwd):/backup alpine tar czf /backup/katelyatv-backup.tar.gz /data
|
||||
```
|
||||
|
||||
## 🐳 Docker Compose 最佳实践
|
||||
|
||||
## 🐙 Docker Compose 最佳实践
|
||||
Docker Compose 是管理多容器应用的最佳方式，特别适合需要数据库支持的部署场景。
|
||||
|
||||
### 📝 LocalStorage 版本（基础）
|
||||
## 📁 配置说明
|
||||
### 📝 LocalStorage（基础单机）
|
||||
|
||||
适合个人使用，数据存储在浏览器本地：
|
||||
|
||||
|
|
@ -345,7 +531,7 @@ docker compose ps
|
|||
docker compose logs -f katelyatv
|
||||
```
|
||||
|
||||
### 🔐 Redis 版本（推荐）
|
||||
### 🔐 Redis 版本（推荐：多用户 + 同步）
|
||||
|
||||
支持多用户、跨设备数据同步、完整的用户权限管理：
|
||||
|
||||
|
|
@ -434,20 +620,42 @@ mkdir katelyatv && cd katelyatv
|
|||
# 2. 创建 docker-compose.yml 文件（复制上面的内容）
|
||||
nano docker-compose.yml
|
||||
|
||||
# 3. 启动所有服务
|
||||
# 3. 检查配置文件语法
|
||||
docker compose config
|
||||
|
||||
# 4. 启动所有服务
|
||||
docker compose up -d
|
||||
|
||||
# 4. 查看服务状态
|
||||
# 5. 查看服务状态
|
||||
docker compose ps
|
||||
|
||||
# 5. 查看启动日志
|
||||
# 6. 查看启动日志
|
||||
docker compose logs -f
|
||||
|
||||
# 6. 首次访问 http://your-server:3000
|
||||
# 7. 等待服务完全启动（通常需要 30-60 秒）
|
||||
# 检查健康状态
|
||||
docker compose ps --format "table {{.Name}}\t{{.Status}}\t{{.Ports}}"
|
||||
|
||||
# 8. 首次访问 http://your-server:3000
|
||||
# 使用管理员账号 admin / admin_super_secure_password 登录
|
||||
# 然后访问 /admin 进行管理员配置
|
||||
```
|
||||
|
||||
**🔍 部署验证步骤：**
|
||||
|
||||
```bash
|
||||
# 验证 Redis 连接
|
||||
docker compose exec katelyatv-redis redis-cli ping
|
||||
# 应该返回 "PONG"
|
||||
|
||||
# 验证 KatelyaTV 服务
|
||||
curl -I http://localhost:3000
|
||||
# 应该返回 HTTP 200 状态码
|
||||
|
||||
# 查看服务启动顺序
|
||||
docker compose logs --timestamps | grep "Ready in"
|
||||
```
|
||||
|
||||
### 🔄 管理与维护
|
||||
|
||||
```bash
|
||||
|
|
@ -482,6 +690,51 @@ docker compose down -v --remove-orphans
|
|||
4. **资源监控**：定期检查容器资源使用情况，必要时调整配置
|
||||
5. **日志管理**：配置日志轮转，避免日志文件过大
|
||||
|
||||
### 🛠️ 常见部署问题排查
|
||||
|
||||
**问题 1：容器启动失败**
|
||||
```bash
|
||||
# 检查容器状态
|
||||
docker compose ps
|
||||
|
||||
# 查看详细错误日志
|
||||
docker compose logs katelyatv
|
||||
|
||||
# 常见原因：端口被占用、环境变量配置错误、镜像拉取失败
|
||||
```
|
||||
|
||||
**问题 2：Redis 连接失败**
|
||||
```bash
|
||||
# 检查 Redis 容器状态
|
||||
docker compose exec katelyatv-redis redis-cli ping
|
||||
|
||||
# 检查网络连通性
|
||||
docker compose exec katelyatv ping katelyatv-redis
|
||||
|
||||
# 验证环境变量
|
||||
docker compose exec katelyatv env | grep REDIS
|
||||
```
|
||||
|
||||
**问题 3：Upstash Redis 连接问题**
|
||||
```bash
|
||||
# 验证 Upstash 配置
|
||||
curl -H "Authorization: Bearer YOUR_TOKEN" YOUR_UPSTASH_URL/ping
|
||||
|
||||
# 检查环境变量格式
|
||||
echo $UPSTASH_URL # 应该是 https://xxx.upstash.io
|
||||
echo $UPSTASH_TOKEN # 应该是长字符串令牌
|
||||
```
|
||||
|
||||
**问题 4：Cloudflare D1 初始化失败**
|
||||
- 确保在 D1 控制台中正确执行了所有 SQL 语句
|
||||
- 检查数据库绑定名称是否为 `DB`
|
||||
- 验证环境变量 `NEXT_PUBLIC_STORAGE_TYPE=d1`
|
||||
|
||||
**问题 5：Vercel 部署问题**
|
||||
- 检查环境变量是否正确设置
|
||||
- 确保 `config.json` 文件格式正确
|
||||
- 查看 Vercel 部署日志中的错误信息
|
||||
|
||||
## 🔄 自动同步最近更改
|
||||
|
||||
建议在 fork 的仓库中启用本仓库自带的 GitHub Actions 自动同步功能（见 `.github/workflows/sync.yml`）。
|
||||
|
|
@ -490,6 +743,8 @@ docker compose down -v --remove-orphans
|
|||
|
||||
## ⚙️ 环境变量
|
||||
|
||||
### 📋 变量说明表
|
||||
|
||||
| 变量 | 说明 | 可选值 | 默认值 |
|
||||
| --------------------------- | ----------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
|
||||
| USERNAME | redis 部署时的管理员账号 | 任意字符串 | （空） |
|
||||
|
|
@ -505,7 +760,22 @@ docker compose down -v --remove-orphans
|
|||
| NEXT_PUBLIC_IMAGE_PROXY | 默认的浏览器端图片代理 | url prefix | (空) |
|
||||
| NEXT_PUBLIC_DOUBAN_PROXY | 默认的浏览器端豆瓣数据代理 | url prefix | (空) |
|
||||
|
||||
## 📋 配置说明
|
||||
### 🔧 配置验证
|
||||
|
||||
**部署后可通过以下方式验证环境变量是否生效：**
|
||||
|
||||
1. **访问服务状态页**：`http://your-domain/api/server-config`
|
||||
2. **检查管理员面板**：使用管理员账号登录后访问 `/admin`
|
||||
3. **查看容器日志**：
|
||||
```bash
|
||||
# Docker 单容器
|
||||
docker logs katelyatv
|
||||
|
||||
# Docker Compose
|
||||
docker compose logs katelyatv
|
||||
```
|
||||
|
||||
## <20> 配置说明
|
||||
|
||||
所有可自定义项集中在根目录的 `config.json` 中：
|
||||
|
||||
|
|
@ -590,7 +860,7 @@ KatelyaTV 支持标准的苹果 CMS V10 API 格式。
|
|||
|
||||
[MIT](LICENSE) © 2025 KatelyaTV & Contributors
|
||||
|
||||
## <EFBFBD> Star History
|
||||
## ⭐ Star History
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
|
|
|||
99
config.json
99
config.json
|
|
@ -1,28 +1,89 @@
|
|||
{
|
||||
"cache_time": 7200,
|
||||
"api_site": {
|
||||
"example_test": {
|
||||
"api": "https://example.com/api.php/provide/vod",
|
||||
"name": "测试视频源",
|
||||
"detail": "https://example.com"
|
||||
"dyttzy": {
|
||||
"api": "http://caiji.dyttzyapi.com/api.php/provide/vod",
|
||||
"name": "电影天堂资源",
|
||||
"detail": "http://caiji.dyttzyapi.com"
|
||||
},
|
||||
"demo_site1": {
|
||||
"api": "https://your-api-domain.com/api.php/provide/vod",
|
||||
"name": "示例视频源1",
|
||||
"detail": "https://your-domain.com"
|
||||
"heimuer": {
|
||||
"api": "https://json.heimuer.xyz/api.php/provide/vod",
|
||||
"name": "黑木耳",
|
||||
"detail": "https://heimuer.tv"
|
||||
},
|
||||
"demo_site2": {
|
||||
"api": "https://api.your-site.com/provide/vod",
|
||||
"name": "示例视频源2"
|
||||
"ruyi": {
|
||||
"api": "https://cj.rycjapi.com/api.php/provide/vod",
|
||||
"name": "如意资源"
|
||||
},
|
||||
"demo_site3": {
|
||||
"api": "https://video-api.example.org/api.php/provide/vod",
|
||||
"name": "示例视频源3",
|
||||
"detail": "https://video.example.org"
|
||||
"bfzy": {
|
||||
"api": "https://bfzyapi.com/api.php/provide/vod",
|
||||
"name": "暴风资源"
|
||||
},
|
||||
"demo_site4": {
|
||||
"api": "https://media.sample-domain.net/api.php/provide/vod",
|
||||
"name": "示例视频源4"
|
||||
"tyyszy": {
|
||||
"api": "https://tyyszy.com/api.php/provide/vod",
|
||||
"name": "天涯资源"
|
||||
},
|
||||
"ffzy": {
|
||||
"api": "http://ffzy5.tv/api.php/provide/vod",
|
||||
"name": "非凡影视",
|
||||
"detail": "http://ffzy5.tv"
|
||||
},
|
||||
"zy360": {
|
||||
"api": "https://360zy.com/api.php/provide/vod",
|
||||
"name": "360资源"
|
||||
},
|
||||
"maotaizy": {
|
||||
"api": "https://caiji.maotaizy.cc/api.php/provide/vod",
|
||||
"name": "茅台资源"
|
||||
},
|
||||
"wolong": {
|
||||
"api": "https://wolongzyw.com/api.php/provide/vod",
|
||||
"name": "卧龙资源"
|
||||
},
|
||||
"jisu": {
|
||||
"api": "https://jszyapi.com/api.php/provide/vod",
|
||||
"name": "极速资源",
|
||||
"detail": "https://jszyapi.com"
|
||||
},
|
||||
"dbzy": {
|
||||
"api": "https://dbzy.tv/api.php/provide/vod",
|
||||
"name": "豆瓣资源"
|
||||
},
|
||||
"mozhua": {
|
||||
"api": "https://mozhuazy.com/api.php/provide/vod",
|
||||
"name": "魔爪资源"
|
||||
},
|
||||
"mdzy": {
|
||||
"api": "https://www.mdzyapi.com/api.php/provide/vod",
|
||||
"name": "魔都资源"
|
||||
},
|
||||
"zuid": {
|
||||
"api": "https://api.zuidapi.com/api.php/provide/vod",
|
||||
"name": "最大资源"
|
||||
},
|
||||
"yinghua": {
|
||||
"api": "https://m3u8.apiyhzy.com/api.php/provide/vod",
|
||||
"name": "樱花资源"
|
||||
},
|
||||
"wujin": {
|
||||
"api": "https://api.wujinapi.me/api.php/provide/vod",
|
||||
"name": "无尽资源"
|
||||
},
|
||||
"wwzy": {
|
||||
"api": "https://wwzy.tv/api.php/provide/vod",
|
||||
"name": "旺旺短剧"
|
||||
},
|
||||
"ikun": {
|
||||
"api": "https://ikunzyapi.com/api.php/provide/vod",
|
||||
"name": "iKun资源"
|
||||
},
|
||||
"lzi": {
|
||||
"api": "https://cj.lziapi.com/api.php/provide/vod",
|
||||
"name": "量子资源站"
|
||||
},
|
||||
"xiaomaomi": {
|
||||
"api": "https://zy.xmm.hk/api.php/provide/vod",
|
||||
"name": "小猫咪资源"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,7 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-var-requires, no-console, unused-imports/no-unused-vars */
|
||||
|
||||
/**
|
||||
* MoonTV 版本管理脚本
|
||||
* 用于自动化版本号更新、CHANGELOG 生成和发布管理
|
||||
|
|
@ -13,7 +15,7 @@ const { execSync } = require('child_process');
|
|||
const PACKAGE_JSON = path.join(__dirname, '../package.json');
|
||||
const VERSION_TXT = path.join(__dirname, '../VERSION.txt');
|
||||
const CHANGELOG_MD = path.join(__dirname, '../CHANGELOG.md');
|
||||
const README_MD = path.join(__dirname, '../README.md');
|
||||
const _README_MD = path.join(__dirname, '../README.md');
|
||||
|
||||
// 版本类型
|
||||
const VERSION_TYPES = {
|
||||
|
|
|
|||
|
|
@ -71,8 +71,10 @@ const TopNavbar = ({ activePath = '/' }: { activePath?: string }) => {
|
|||
},
|
||||
];
|
||||
|
||||
// 桌面端：顶部固定导航（fixed）
|
||||
// 移动端：不显示此组件，改由底部导航 + 轻量顶部条（非固定）
|
||||
return (
|
||||
<nav className='w-full bg-white/40 backdrop-blur-xl border-b border-purple-200/50 shadow-lg dark:bg-gray-900/70 dark:border-purple-700/50 sticky top-0 z-50'>
|
||||
<nav className='w-full bg-white/40 backdrop-blur-xl border-b border-purple-200/50 shadow-lg dark:bg-gray-900/70 dark:border-purple-700/50 fixed top-0 left-0 right-0 z-40 hidden md:block'>
|
||||
<div className='w-full px-8 lg:px-12 xl:px-16'>
|
||||
<div className='flex items-center justify-between h-16'>
|
||||
{/* Logo区域 - 调整为更靠左 */}
|
||||
|
|
@ -164,64 +166,59 @@ const TopNavbar = ({ activePath = '/' }: { activePath?: string }) => {
|
|||
const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
||||
return (
|
||||
<div className='w-full min-h-screen'>
|
||||
{/* 移动端头部 */}
|
||||
{/* 移动端头部 (fixed) */}
|
||||
<MobileHeader showBackButton={['/play'].includes(activePath)} />
|
||||
|
||||
{/* 桌面端顶部导航栏 */}
|
||||
<div className='hidden md:block'>
|
||||
<TopNavbar activePath={activePath} />
|
||||
</div>
|
||||
{/* 桌面端顶部导航栏 (fixed) */}
|
||||
<TopNavbar activePath={activePath} />
|
||||
|
||||
{/* 主要布局容器 */}
|
||||
<div className='w-full min-h-screen md:min-h-auto'>
|
||||
{/* 主内容区域 */}
|
||||
<div className='relative min-w-0 flex-1 transition-all duration-300'>
|
||||
{/* 桌面端左上角返回按钮 */}
|
||||
{['/play'].includes(activePath) && (
|
||||
<div className='absolute top-3 left-1 z-20 hidden md:flex'>
|
||||
<BackButton />
|
||||
</div>
|
||||
)}
|
||||
{/* 主内容区域 - 预留桌面端顶部导航高度 64px */}
|
||||
<div className='relative min-w-0 transition-all duration-300 md:pt-16'>
|
||||
{/* 桌面端左上角返回按钮 */}
|
||||
{['/play'].includes(activePath) && (
|
||||
<div className='absolute top-3 left-1 z-20 hidden md:flex'>
|
||||
<BackButton />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 主内容容器 - 为播放页面使用特殊布局（83.33%宽度），其他页面使用默认布局（66.67%宽度） */}
|
||||
<main className='flex-1 md:min-h-0 mb-14 md:mb-0 md:p-6 lg:p-8'>
|
||||
{/* 使用flex布局实现宽度控制 */}
|
||||
<div className='flex w-full min-h-screen md:min-h-[calc(100vh-10rem)]'>
|
||||
{/* 左侧留白区域 - 播放页面占8.33%，其他页面占16.67% */}
|
||||
{/* 主内容容器 - 为播放页面使用特殊布局（83.33%宽度），其他页面使用默认布局（66.67%宽度） */}
|
||||
<main className='mb-14 md:mb-0 md:p-6 lg:p-8'>
|
||||
{/* 使用flex布局实现宽度控制 */}
|
||||
<div className='flex w-full min-h-[calc(100vh-4rem)]'>
|
||||
{/* 左侧留白区域 - 播放页面占8.33%，其他页面占16.67% */}
|
||||
<div
|
||||
className='hidden md:block flex-shrink-0'
|
||||
style={{
|
||||
width: ['/play'].includes(activePath) ? '8.33%' : '16.67%'
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* 主内容区 - 播放页面占83.33%，其他页面占66.67% */}
|
||||
<div
|
||||
className='flex-1 md:flex-none rounded-container w-full'
|
||||
style={{
|
||||
width: ['/play'].includes(activePath) ? '83.33%' : '66.67%'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='hidden md:block flex-shrink-0'
|
||||
style={{
|
||||
width: ['/play'].includes(activePath) ? '8.33%' : '16.67%'
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* 主内容区 - 播放页面占83.33%，其他页面占66.67% */}
|
||||
<div
|
||||
className='flex-1 md:flex-none rounded-container w-full'
|
||||
style={{
|
||||
width: ['/play'].includes(activePath) ? '83.33%' : '66.67%'
|
||||
className='p-4 md:p-8 lg:p-10'
|
||||
style={{
|
||||
paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='p-4 md:p-8 lg:p-10'
|
||||
style={{
|
||||
paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
{/* 右侧留白区域 - 播放页面占8.33%，其他页面占16.67% */}
|
||||
<div
|
||||
className='hidden md:block flex-shrink-0'
|
||||
style={{
|
||||
width: ['/play'].includes(activePath) ? '8.33%' : '16.67%'
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* 右侧留白区域 - 播放页面占8.33%，其他页面占16.67% */}
|
||||
<div
|
||||
className='hidden md:block flex-shrink-0'
|
||||
style={{
|
||||
width: ['/play'].includes(activePath) ? '8.33%' : '16.67%'
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* 移动端底部导航 */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue