ShipAny Joyflix AI Template

模板介绍：https://shipany.ai/zh/templates/joyflix-ai-video-generator

Preview

https://joyflix.ai/ [官方部署]

https://joyflix-vercel.16781678.xyz/ [自部署到Vercel]

https://joyflix.16781678.xyz/ [自部署到Cloudflare]

分支

main: two main branch(部署在Vercel上的分支)
cloudflare: two cf branch (部署在Cloudflare上的分支)
one/main: 原作者的joyflix模板

快速上手

项目快速上手图文教程

备注

joyflix-ai-template我买完这个模板后，进入仓库发现有2个问题（看下图，作者的仓库）：

1、没有及时和官方模板同步（最后更新4个月前），而且他只有1个分支，仔细分析后发现居然是基于Shipany One开发的AI生成视频模板（巨坑！而且官方也没有提及）
我给他提了issue，但是没有回复，更新的希望不大。
2、没有详细的上手文档，Readme.md只有寥寥草草的几段文字。

这样的话，我需要做的事：

1、基于Shipany Two为基础模板创建新项目，然后迁移joyflix-ai-template模板中的业务到新项目。【截止2026-01-27 已迁移升级完毕】
2、书写详细的上手文档，让大家都能拿到代码后尽快上手。

截图对比

基于ShipanyTwo模板	原作者基于Shipany One模板

JoyFlix AI 项目速览

1. 项目概览

本项目（JoyFlix AI）已完成从 ShipAny One 到 ShipAny Two 的架构升级，核心优势包括：

极致性能：基于 Next.js 16，本地开发秒开，内存占用更低。
灵活认证：使用 Better-Auth 替换 NextAuth，支持更多社交登录与更安全的会话管理。
可视化运维：90% 的业务配置（公告、支付、积分、AI 密钥）均可在 /admin 后台直接操作，无需频繁重启服务。
RBAC 权限：内置角色访问控制，可精确管理管理员与普通用户的权限边界。

2. 关键环境配置：.env 还是 /admin？

在 ShipAny Two 中，配置分为“硬配置”（环境变量）和“动态配置”（后台设置）：

配置项	推荐位置	说明
数据库	`.env.local`	`DATABASE_URL` 必须在环境变量中定义
基础 URL	`.env.local`	`BETTER_AUTH_URL` 应用的基础访问地址
认证密钥	`.env / /admin`	`BETTER_AUTH_SECRET` 可在后台 Setting-Auth 配置
AI 引擎密钥	`/admin`	Replicate API Token 在 Setting-AI 配置
R2 存储密钥	`/admin`	Access Key/Secret 在 Setting-Storage 配置
支付密钥	`/admin`	Stripe PK/SK 在 Setting-Payment 配置

提示：系统优先读取数据库中的配置。如果你在后台修改了设置，它会覆盖 .env 中的同名项。

3. 快速入门：我在哪修改页面内容？

ShipAny Two 实现了高度的国际化配置化。修改文案和简单的模块开关，你甚至不需要查看 .tsx 代码。

3.1 首页 (Landing Page) 修改指南

首页所有的文案、区块顺序、甚至是视频演示都在 JSON 中：

主要配置路径：src/config/locale/messages/zh/pages/index.json
如何操作：
1. 修改 Hero 区域：找到 sections.hero，修改 title（大标题）和 description。
2. 控制模块显示：在 show_sections 数组中移除或添加字符串（如 "testimonials", "stats"），控制对应区块的开关。
3. 更新 Showcase 视频：在 sections.showcase.items 中更新视频 URL 和对应的 Prompt。
全局 Logo/Footer：在 src/config/locale/messages/zh/landing.json 修改 header.brand 和 footer.brand。

3.2 业务页面修改指南 (代码层)

如果你想修改页面布局或增加复杂逻辑：

视频生成主页：src/app/[locale]/(app)/app/video-generator/page.tsx
参数表单组件：video-generation-form.tsx (控制右侧所有滑块和下拉框)
视频预览与画廊：video-preview/ 目录和 video-gallery.tsx

4. 后台配置：玩转管理系统 (/admin)

登录管理员账号进入 /admin，以下是必须完成的“保姆级”操作步骤：

4.1 AI 视频引擎 (Replicate)

点击 设置 (Settings) -> AI。
Replicate API Token：填入 Replicate Token。
关键操作：开启 Replicate 自定义存储。这样 AI 生成的视频会自动存入你的 R2 桶，而不会在 Replicate 服务器过期后失效。

4.2 存储配置 (Cloudflare R2)

点击 设置 (Settings) -> 存储 (Storage)。
填写 Access Key、Secret Key 和 R2 桶名。
本地域名：务必填写指向该桶的自定义加速域名（需带 https://），这是前台正常播放视频的关键。

4.3 支付网关 (Stripe)

点击 设置 (Settings) -> 支付 (Payment)。
开启 Stripe 启用 按钮。
填入 Publishable Key 和 Secret Key。
Signing Secret：去 Stripe 后台配置 Webhook（指向 你的域名/api/payment/stripe/callback），将获取的 Webhook 密钥填入。

4.4 注册送积分 (初始奖励)

点击 设置 (Settings) -> 常规 (General) -> 定位到 积分 (Credit)。
开启 启用初始积分。
设置金额（如 10）和有效期（如 30 天）。
保存后，新注册用户即可获得免费试用额度。

5. 进阶：如何自定义 AI 模型与规则？

所有的视频生成规则（参数、积分、模型标识）都在一个配置文件中：

核心文件：src/config/model-config.ts
如何新增模型：模仿现有的 ModelConfig 结构。只需在 schema 中定义你需要的参数（如 fps, resolution），前台会自动渲染出对应的滑块或输入框。
自定义积分算法：在 calculateCredits 函数中编写你的逻辑（如果看不懂，让AI给你修改或者分析下代码）。

6. 业务管理与数据监控

仪表盘 (Dashboard)：访问 /admin/dashboard 实时监控用户活跃度、订单收入及 AI 任务统计饼图。
反馈管理：访问 /admin/feedbacks。本项目已完成反馈系统迁移，用户在 App 中提交的任何不爽或建议都会直接出现在这里，支持删除和导出。
订单系统：访问 /admin/payments 查看所有成功支付的记录。

7. 关键目录结构

src/
├── app/
│   └── [locale]/
│       ├── (admin)/        # 管理后台 (Dashboard, Users, Settings)
│       ├── (app)/          # 业务核心 (Video Generator：视频生成主页面, My Credits：我的积分, My Orders：我的订单)
│       └── (landing)/      # 营销页面 (Hero, Pricing, Showcase)
├── config/
│   ├── db/                 # 数据库驱动与 Schema
│   ├── locale/             # 【最重点】所有的页面文案与动态配置 (JSON)
│   └── model-config.ts     # AI 模型及其参数规则定义
├── shared/
│   ├── services/           # 业务逻辑 (video.ts 视频处理核心 Service, 处理视频生成与上传)
│   ├── models/             # 数据库模型 (AI_Task, Credit, User)
│   └── components/         # 复用 UI 组件
└── core/                   # 框架底层 (RBAC, Theme, Auth)

8. 常见问题 (FAQ)

Q: 首页视频无法播放或加载很慢？
- A: 请检查后台 Setting-Storage 里的“本地域名”。确保它是你 R2 的自定义加速域名，而不是 Cloudflare 分配的原始长 URL。
Q: 如何更换数据库？
- A: 在 .env.development 里的 DATABASE_URL 切换。更多数据库连接方式请参考 ShipAny Two的官方文档。

仓库必读，请仔细阅读