bollo — AI 动画创作工作台

想象力，即刻呈现。一站式 AI 短剧/动画生产平台：从剧本、资产、分镜到成片发布的全流程工作台，内置完整的积分制商业化体系（充值 / 会员 / 团队席位）。

技术栈：Next.js 16 (App Router) · React 19 · TypeScript (strict) · Tailwind CSS v4 · shadcn/ui · Vitest · Playwright

产品全景

bollo 的完整产品路径按「商业化路径 → 产品功能 → 技术架构」展开。业务先通过低门槛体验和内容入口获取用户，再用积分、会员和团队协作承接付费，最后由创作工作台完成交付与留存。

商业化路径

内容/活动触达
  → 首页体验与公开课激活
  → 剧本、资产、分镜、成片创作
  → 积分充值 / 个人会员订阅
  → 团队版席位与共享积分池
  → 邀请奖励、作品发布与持续复购

阶段	用户目标	产品承接	商业化机制
触达	了解平台能做什么	首页活动、剧本广场、技能市场、公开课	活动 Banner 与内容入口
激活	快速完成第一次创作	剧本模式、自由模式、AI 重绘	免费体验额度、首充专享
转化	获得稳定产能	定价页、积分充值、个人会员	按量付费 + 周期订阅
扩张	多人协作并持续交付	团队版、席位步进器、共享积分池	团队订阅 + 加席
留存	分享成果并再次使用	发布中心、邀请活动、消息中心、资产库	邀请积分、活动运营、权益续订

详细定价与订单流程见商业化体系，各模块能力见产品功能，工程实现见技术架构。

产品功能

平台功能按用户价值分为三层：创作生产链路（把故事变成成片）、内容与资产生态（素材与分发）、账户与增长运营入口（商业化与留存）。

创作生产链路

模块	路由	说明
创作空间	`/project` `/create`	项目列表与创建入口，localStorage 持久化
项目创建	`/new`	单 Modal 表单，三种创建模式（见下）
项目工作台	`/comic/[id]`	按创建模式动态组合：剧本模式 5 Tab（概览/剧本/资产/分镜/成片）、自由模式 4 Tab、AI 重绘 4 步 Stepper
剧本编辑器	工作台内	剧本编辑 + 一键提取资产（角色/场景/道具）模拟
资产管理	工作台内	资产 CRUD、批量生成、图片资产库
分镜工作台	工作台内	分镜编排、批量生视频任务模拟
成片组装	工作台内	片段拼接、字幕配置、导出模拟
AI 重绘向导	工作台内	四步流程：原片 → 设定 → 分镜 → 视频
数字人	`/agent`	数字人卡片（悬停自动播放视频）、AI 试戏 / AI 试装对话

三种项目创建模式：

剧本模式 — 上传剧本文件（.txt 自动读取内容存入 scriptContent），进入 5 Tab 工作台
自由模式 — 指定集数（≥1）直接开工，进入 4 Tab 工作台
AI 重绘 — 上传原片视频，提交按钮变为「创建重制项目」，进入 4 步 Stepper 工作台

内容与资产生态

模块	路由	说明
剧本广场	`/plaza`	剧本搜索/筛选/详情（`/plaza/script/[id]`）
技能市场	`/skill`	技能浏览与筛选
资产库	`/library` `/asset`	公共资产库浏览（艺人/音色/角色/场景/道具）
发布中心	`/publish`	多平台绑定与发布模拟

账户与增长运营入口

模块	位置	说明
个人菜单	左下角头像	积分余额 + 签到、邀请好友赚积分、消息中心、团队版、AI 水印、个人中心
消息中心	个人菜单	公告/消息双栏 + 一键已读
邀请活动	个人菜单	邀请好友赚积分（复制链接/二维码）
团队版	个人菜单	团队功能介绍 + 创建团队弹框
AIGC 公开课	右下角悬浮入口	课程任务弹框（热门/我的课程、去学习）
团队管理	`/team`	效能看板 / 团队 / 成员 / 流水四 Tab，团队版订阅引导入口
会员与充值	`/pricing`	单页连续布局：积分充值 6 档 + 会员订阅（个人/团队 × 包月/包年）

商业化体系

所有定价数据集中在 src/app/pricing/data.ts，页面逻辑在 src/app/pricing/page.tsx，收银台组件为 src/components/checkout-dialog.tsx。

商业化路径

商业化不是独立的支付页面，而是嵌入创作链路的连续闭环：

先体验：通过首页活动、公开课、剧本广场和首充，让用户低成本完成第一次生成。
再转化：根据使用强度在定价页选择积分充值或个人会员；收银台统一承接订单确认、支付和成功反馈。
做扩张：当个人产能不足时切换团队版，以席位、共享积分池和商业授权承接小团队协作。
促留存：通过邀请活动、发布中心、资产复用和活动权益，形成分享、回流和续订。

关键原则：积分负责灵活消费，会员负责稳定产能，团队版负责协作规模化；三者共用统一的订单确认和权益展示。

计费模型总览

积分是平台统一算力货币：1 元 = 10 积分。所有模型消耗统一扣积分（视频按秒、图片按张），生成失败不扣费。

三种获取方式与扣除顺序：

获取：充值（按量付费） / 会员订阅（每月发放） / 每日签到（赠送）
扣除顺序：赠送积分 → 会员积分 → 充值积分（优先消耗有效期短的，保障用户利益）

定价页为单页连续布局（模型活动 Banner → 积分充值 → 会员订阅 → FAQ），充值区与会员区通过锚点 #recharge / #membership 滚动定位，兼容旧版 ?tab=credits|membership 深链：

积分充值 — 按量付费心智，用多少买多少
会员订阅 — 订阅心智，月度积分 + 效率权益 + 商业授权

积分充值

6 档锚定定价（RECHARGE_TIERS），加赠比例随档位递增：

档位	价格	到账积分	加赠	备注
首充专享	¥10	150	+50%	终身一次，账号级权益
基础档	¥50	500	—
入门档	¥100	1,100	+10%
进阶档	¥300	3,450	+15%
推荐档	¥600	7,200	+20%	标记「推荐」
大额档	¥950	10,500	送 1,000 等值

活动期间充值加赠最高 70%（见定价页顶部模型特价 Banner）。

会员订阅

5 档套餐 × 2 种周期（连续包月原价 / 连续包年 67 折），个人与团队身份页内切换：

权益	体验版	标准版	进阶版	高级版	专业版
包月价	¥69/月	¥249/月	¥599/月	¥999/月	¥2,299/月
包年折合月价	¥46	¥167	¥401	¥669	¥1,540
月度积分	724	2,739	6,589	10,989	26,668
约生成图片/视频	724 张 / 144 秒	2,739 张 / 558 秒	6,589 张 / 1,317 秒	10,989 张 / 2,197 秒	26,668 张 / 5,333 秒
并发任务数	8	12	20	30	60
加速通道	基础级	标准级	标准级	旗舰级	旗舰级
云存储	60GB	100GB	300GB	600GB	900GB
商用授权	个体户	个体户	企业	企业	企业
去水印	✅	✅	✅	✅	✅

设计要点：

权益矩阵按五大类分组渲染（限时权益 / 积分权益 / 资源与存储 / 创作效能 / 使用权限），详见会员体系设计说明
年付折扣徽标数据驱动（yearlyDiscountLabel() 取最低档折扣率，当前「低至67折」，不硬编码文案）
周期仅保留包月/包年（连续包季已下线）

团队版与席位加购

会员区内切换「个人 / 团队」身份，团队版 = 同档个人版权益的席位化打包：

计价公式（定价策略：第 4 席起每席 = 个人版当前周期月价 × 1/2）：

团队月价 = 个人周期月价 × 2 + (席位数 − 3) × round(个人周期月价 × 0.5)
积分池/月 = 个人月积分 × (2 + 0.5 × (席位数 − 3))
席位范围：3 ~ 10 席

示例（专业版 · 年付 · 5 席）：

月价 = 239 × 2 + 2 × round(239 × 0.5) = 478 + 240 = ¥718/月 → 年付 ¥8,616
积分池 = 3,920 × (2 + 0.5 × 2) = 11,760 积分/月

功能实现：

席位步进器（TEAM_BASE_SEATS=3 下限 / TEAM_MAX_SEATS=10 上限，越界禁用）
价格、积分池、图片/视频额度随席位数实时联动
团队版含 3 席位起售，积分池全员共享、按席位线性扩容
/team 页常驻引导卡片，CTA 直达 /pricing#membership

首充权益与二次转化

一次性账号级权益：¥10 得 150 积分（+50%），支付成功后写入 localStorage（key: first_charge_done），卡片按钮置灰显示「已使用」，永不复购
SSR 安全：首充状态通过 useSyncExternalStore + 自定义事件订阅读取，服务端恒返回 false，杜绝 hydration error
二次转化闭环：首充支付成功页展示「升级年费会员」CTA，一键跳转会员订阅 Tab

收银台与支付流程

三步标准流程（CheckoutDialog 组件，订单结构 CheckoutOrder）：

① 订单确认：商品标题 + 权益清单（积分/席位/折扣明细）+ 应付金额 + 支付方式
② 支付处理：1.2s 模拟网关（预留真实支付网关接入点，替换 pay() 即可）
③ 支付成功：结果提示 + 二次转化 CTA（仅首充场景）

支持微信支付 / 支付宝 / 余额支付三种方式（前端模拟）
团队订单自动展示「N 席位 · 含加席 ×M · 积分池」明细
ESC / 遮罩关闭，支付处理中防误触

活动运营组件

组件	位置	策略
活动 Banner	`/home` 顶部 sticky	关闭后写 Cookie 持久 1 年，不再打扰
活动弹窗	`/home` 首屏	双页轮播，每日一次频控（localStorage 按日去重）

两者均通过 next/dynamic ssr:false 加载，避免 SSR 访问 Cookie/localStorage。

技术架构

分层结构

层级	主要职责	当前实现
路由与页面层	页面路由、服务端渲染边界、深链定位	Next.js App Router，`src/app/**/page.tsx`
业务组件层	弹框、卡片、导航、工作台步骤和支付状态	React 19 Client Components，`src/components/`
业务状态层	项目、剧本、资产、分镜、成片和重绘状态	`src/hooks/` + `src/lib/project-store.ts`
数据与策略层	定价、会员周期、席位、积分和 FAQ	`src/app/pricing/data.ts` 与领域类型
视觉基础层	深色主题、品牌色、间距、圆角和交互状态	Tailwind CSS v4、`DESIGN.md`、`globals.css`
质量保障层	类型检查、单元测试、端到端测试和构建	TypeScript strict、Vitest、Playwright、Next build

关键技术决策

页面级组合：路由页面负责组装业务模块，复杂工作台按创建模式组合 Tab/Stepper，避免单页组件承担全部流程。
数据驱动商业化：价格、周期、赠送积分和团队席位规则集中配置，页面只负责计算和展示，减少文案与价格分叉。
SSR 安全边界：首充标记、活动频控等浏览器状态通过 useSyncExternalStore、Cookie 或客户端动态加载处理，避免 hydration 不一致。
可替换支付接入：CheckoutDialog 当前使用模拟支付网关，订单结构与成功回调已预留真实支付服务接入点。
本地优先原型：项目数据和账户状态暂以 localStorage 模拟持久化；接入生产后可将同一业务边界替换为 API、数据库和鉴权服务。

生产化演进建议

当前前端原型
  → 接入鉴权与用户服务
  → 接入订单/支付/发票服务
  → 接入积分账本与权益中心
  → 接入对象存储、队列和生成服务
  → 接入埋点、风控、监控与运营后台

生产化时应优先保证订单幂等、积分账本可追溯、团队席位权限和发票状态的服务端一致性；前端展示层继续复用当前的权益模型与组件边界。

会员体系设计文档

完整的会员体系设计说明见 docs/research/membership-system-design.md，包含：

权限项五大类分类：限时活动 / 专属权益 / 独家模块 / 生成效率 / 制作产能
积分模型与权益测算逻辑：货币锚定、充值加赠阶梯、会员换算率折扣、年付 67 折、团队席位边际递减公式
用户收益清单：价格 / 积分 / 产能 / 效率 / 商业 / 协作 / 安全七类收益的量化示例

行业横评与定价心理学调研见 docs/research/membership-pricing-overview.md。

商业化配置修改指引

1. 调整充值档位 — 编辑 src/app/pricing/data.ts 的 RECHARGE_TIERS 数组：

{ id: "t600", price: 600, credits: 7200, bonusLabel: "+20%", recommended: true }
// id 唯一即可；bonusLabel/note/recommended 均为可选展示字段

2. 调整会员档位/价格 — 编辑 MEMBER_PLANS 数组（monthlyOriginal 月付原价、yearlyMonthly 年付折合月价、monthlyCredits 月积分；年付折扣徽标由 yearlyDiscountLabel() 自动重算，无需手改文案）。

3. 调整团队席位规则 — 修改以下导出：

export const TEAM_BASE_SEATS = 3;   // 基础席位数
export const TEAM_MAX_SEATS = 10;   // 席位上限
export function extraSeatPrice(plan, cycle) { ... }  // 加席单价（当前：个人价 × 0.5）
export function teamCredits(plan, seats) { ... }     // 积分池（当前：× (2 + 0.5 × 加席数)）

4. 接入真实支付 — 替换 src/components/checkout-dialog.tsx 中的 pay() 模拟逻辑；订单结构已含席位/积分池字段，onSuccess 回调已区分首充标记。

快速开始

# 环境要求：Node.js ≥ 24
npm install
npm run dev        # http://localhost:3000

常用命令：

npm run dev        # 开发服务器
npm run build      # 生产构建
npm run lint       # ESLint 检查
npm run typecheck  # TypeScript 类型检查（strict）
npx vitest run     # Vitest 单元测试（69 用例）
npx playwright test # Playwright 端到端测试
npm run check      # lint + typecheck + build 全量门禁

项目结构

src/
  app/                    # Next.js App Router 路由
    pricing/              # 定价页（积分充值 + 会员订阅）
      data.ts             # ★ 商业化定价唯一数据源
      page.tsx            # 定价页 UI 与交互逻辑
    team/                 # 团队管理页（效能/团队/成员/流水）
    comic/[id]/           # 项目工作台（动态路由，按创建模式组合 Tab）
    plaza/                # 剧本广场
    home/                 # 首页（活动 Banner + 弹窗）
    partner/               # 超创合伙人合作计划
    ...
  components/
    checkout-dialog.tsx   # 收银台（三步支付流程）
    invite-campaign-dialog.tsx # 邀请活动、二维码与奖励规则
    partner-contact-dialog.tsx # 合伙人联系二维码弹框
    campaign-banner.tsx   # 活动 Banner（Cookie 1 年持久）
    campaign-popup.tsx    # 活动弹窗（每日频控）
    layout/               # 应用外壳与导航
    icons.tsx             # 统一图标出口
    ui/                   # shadcn/ui 基础组件
  hooks/                  # 业务 Hook（useScriptEditor / useAssetManager /
                          #   useStoryboard / useFilmAssembly / useRemakeStudio 等，均含测试）
  lib/
    mock-projects.ts      # 项目共享数据与类型
    project-store.ts      # 项目存取（localStorage）
  types/                  # TypeScript 接口定义
docs/
  research/components/    # 商业化 spec / QA 报告 / 商业测算报告

质量保障

TypeScript strict，tsc --noEmit 零错误
69 个单元测试覆盖全部核心业务 Hook（项目创建/剧本编辑/资产管理/分镜/成片组装/商业化定价）
ESLint 使用语义色 token 与 set-state-in-effect 等规则防护
设计规范以 DESIGN.md 为 single source of truth（YAML front matter → globals.css token 同步）

License

MIT

Name		Name	Last commit message	Last commit date
.github		.github
docs		docs
e2e		e2e
prisma		prisma
public		public
screenshots		screenshots
scripts		scripts
src		src
.env.example		.env.example
.gitignore		.gitignore
AGENTS.md		AGENTS.md
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
DESIGN.md		DESIGN.md
README.md		README.md
agent-browser.json		agent-browser.json
docker-compose.yml		docker-compose.yml
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts
vitest.setup.ts		vitest.setup.ts

Navigation Menu

Repository navigation

About

Repository files navigation

bollo — AI 动画创作工作台

目录

产品全景

商业化路径

产品功能

创作生产链路

内容与资产生态

账户与增长运营入口

商业化体系

商业化路径

计费模型总览

积分充值

会员订阅

团队版与席位加购

首充权益与二次转化

收银台与支付流程

活动运营组件

技术架构

分层结构

关键技术决策

生产化演进建议

会员体系设计文档

商业化配置修改指引

快速开始

项目结构

质量保障

License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

bollo — AI 动画创作工作台

目录

产品全景

商业化路径

产品功能

创作生产链路

内容与资产生态

账户与增长运营入口

商业化体系

商业化路径

计费模型总览

积分充值

会员订阅

团队版与席位加购

首充权益与二次转化

收银台与支付流程

活动运营组件

技术架构

分层结构

关键技术决策

生产化演进建议

会员体系设计文档

商业化配置修改指引

快速开始

项目结构

质量保障

License

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages