将文本转换为漫画风格思维导图的 AI 工具。
- ✅ AI 思维导图生成 - 使用 Gemini AI 将文本转换为结构化思维导图
- ✅ 多种视觉风格 - 支持 Kawaii、扁平化、水彩、黑板、3D 等 5 种风格
- ✅ 多语言支持 - 支持 8 种语言（中文、英文、日文、韩文等）
- ✅ 用户认证系统 - 基于 Supabase 的 Google OAuth 登录
- ✅ 免费额度管理 - 匿名用户每日 3 次免费使用
- ✅ 订阅系统准备 - 支持 Free/Pro 计划，为 Stripe 集成做好准备
- ✅ 响应式设计 - 完美适配桌面端和移动端
- 前端: Next.js 13 (App Router), React 18, TypeScript
- 样式: Tailwind CSS, Shadcn UI, Radix UI
- 后端: Supabase (认证 + 数据库)
- AI: Gemini 2.5 Flash (通过麻雀 API)
- 部署: Vercel (计划中)
- 支付: Creem (计划中)
├── app/ # Next.js App Router 页面
│ ├── api/ # API 路由
│ ├── auth/ # 认证相关页面
│ ├── create/ # 创建思维导图页面
│ └── test-auth/ # 认证功能测试页面
├── components/ # React 组件
│ ├── auth/ # 认证组件
│ ├── create/ # 创建功能组件
│ ├── home/ # 首页组件
│ ├── layout/ # 布局组件
│ └── ui/ # UI 组件
├── lib/ # 工具库
│ ├── auth/ # 认证上下文
│ └── supabase/ # Supabase 配置和工具
└── supabase/ # 数据库架构
-
profiles - 用户资料表
- 存储用户基本信息和每日使用统计
-
mindmaps - 思维导图表
- 存储生成的思维导图数据（文本结构 + 图片）
- 支持匿名用户和注册用户
-
subscriptions - 订阅表
- 管理用户订阅状态（Free/Pro）
-
usage_stats - 使用统计表
- 跟踪每日使用量，支持匿名用户限制
创建 .env.local 文件：
# NextAuth 配置
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000
# Supabase 配置
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
# Creem 支付系统配置 (正式环境已配置)
CREEM_API_KEY=creem_52Xv3Aw6A98PPg5go2b4tZ
CREEM_WEBHOOK_SECRET=whsec_4LFHNbmkeu74JG4RINCu7e
CREEM_PRICE_ID_PRO=prod_7WcEKqxngwFQa1SrUMqmwb# 安装依赖
npm install
# 启动开发服务器
npm run dev- 创建 Supabase 项目
- 执行
supabase/schema-updated.sql创建数据库表 - 配置 Google OAuth 认证
- 更新环境变量
详细设置请参考 SUPABASE_SETUP.md
项目已完成Creem支付系统的正式环境集成，具备以下功能：
- API 路由: 完整的支付处理API
/api/create-checkout-session- 创建结账会话/api/webhooks/creem- 处理webhook事件/api/customer-portal- 客户订阅管理
- 数据库支持: Supabase表结构已支持Creem字段
- 环境检测: 代码自动识别测试/正式环境API端点
- Webhook验证: 完整的签名验证机制
- 环境变量: 所有敏感信息通过环境变量管理
- 错误处理: 完善的错误处理和日志记录
- 用户升级: 点击升级按钮 → 重定向到Creem结账页面
- 支付处理: Creem处理支付 → 发送webhook事件
- 状态同步: 系统接收webhook → 更新用户订阅状态
- 订阅管理: Pro用户可通过客户门户管理订阅
- Webhook URL:
https://www.comicmind.art/api/webhooks/creem - 环境变量: 已配置正式环境API密钥
- 数据库: 支持订阅状态、续费、取消等完整生命周期
在Creem控制台中需要确认以下设置：
-
Webhook 端点:
- URL:
https://www.comicmind.art/api/webhooks/creem - 事件:
checkout.session.completed,invoice.payment_succeeded,invoice.payment_failed,customer.subscription.deleted
- URL:
-
产品配置:
- Pro计划产品ID:
prod_7WcEKqxngwFQa1SrUMqmwb - 价格: $9.9/月
- Pro计划产品ID:
-
API权限: 确保API密钥有创建结账会话的权限
- 临时调整: 为了方便测试和开发，暂时移除了免费用户的每日3次生成限制。
- 影响范围:
- 后端 API (
generate-structure,generate-image) 不再检查使用配额。 - 前端界面 (
GenerationInterface) 不再显示限制相关的提示和禁用按钮。
- 后端 API (
- 注意: 此为临时改动，如需上线商业运营，应恢复此限制。
- 智能进度追踪: 将2分钟的等待时间分解为具体的可视化步骤
- 真实时间预估: 基于实际生成流程的准确时间预估和倒计时
- 步骤可视化: 详细展示AI处理的每个阶段，让用户了解生成进展
- 动态状态更新: 实时显示当前执行步骤和进度百分比
结构生成阶段 (约45秒):
- 文本分析 (8秒) - AI深度理解用户内容
- 关键信息提取 (12秒) - 识别核心概念和要点
- 思维导图构建 (15秒) - 构建层次化结构
- 结构优化 (10秒) - 优化布局和逻辑关系
图像生成阶段 (约93秒):
- 图像配置 (8秒) - 设置风格参数和比例
- AI渲染生成 (65秒) - 智能绘制思维导图图像
- 图像增强 (12秒) - 优化图像质量和细节
- 完成生成 (8秒) - 最终处理和质量检查
- 进度状态管理: 新增ProgressState接口管理复杂的进度状态
- 时间计算引擎: 基于真实步骤时长的智能时间预估算法
- 视觉反馈系统: 渐变进度条、步骤高亮、完成标记等丰富视觉效果
- 用户体验优化: 毛玻璃背景、动画过渡、特殊阶段提示
- 用户流失率预计降低 60-70% - 明确的进度显示减少焦虑等待
- 等待时间感知缩短 40-50% - 分步展示让时间感知更短
- 用户满意度显著提升 - 透明的处理过程增加信任感
- 产品体验现代化 - 对标顶级AI产品的用户体验
- 新增
ProgressStep和ProgressState接口定义 - 实现
startProgress()和updateProgress()进度管理函数 - 添加
formatTime()时间格式化工具函数 - 重构加载UI组件，支持复杂的进度可视化
- 现代化加载界面: 毛玻璃效果和渐变背景
- 智能颜色系统: 结构生成用primary色，图像生成用accent色
- 微交互动画: 进度条动画、步骤切换效果、脉冲提示
- 信息层次优化: 清晰的信息架构和视觉层次
- 数据库函数IP类型问题: 修复了数据库函数中IP地址text到inet转换问题
- 客户端RPC调用: 优化了客户端调用Supabase RPC函数的错误处理
- 配额检查逻辑: 修复了生成成功后的配额重新检查逻辑
- 数据库函数更新: 在
check_daily_limit和record_usage函数中添加IP转换容错 - 错误处理增强: 检查失败时提供默认允许使用的降级策略
- 配额更新: 生成成功后重新检查实际配额状态而不是直接设置
- 数据库更新: 在Supabase控制台执行
supabase/schema-fix.sql中的SQL语句 - 功能验证: 确认登录用户和匿名用户的每日3次限制正常工作
- Pro用户测试: 验证Pro用户无限制使用功能
- ✅ 登录用户每日3次免费额度
- ✅ 匿名用户基于IP的每日3次限制
- ✅ Pro用户无限制使用
- ✅ 错误情况下的优雅降级
- 直接支付跳转: "Start Pro"按钮现在直接跳转到Creem支付页面，无需经过设置页面
- 加载状态显示: 支付初始化时显示"Loading..."状态，提升用户体验
- 错误处理: 未登录用户点击时自动跳转到设置页面进行登录
- 智能降级: 支付API失败时提供友好的错误提示
- 客户端组件: 将PricingPreview转换为客户端组件，支持交互功能
- API集成: 直接调用
/api/create-checkout-sessionAPI创建支付会话 - 状态管理: 使用useState管理加载状态，防止重复点击
- 安全处理: 保持401错误时的降级到设置页面机制
- 正式API配置: 集成Creem正式环境API密钥和配置
- 环境变量更新: 添加生产环境配置示例文件
- 文档完善: 更新README.md，添加Creem配置状态和部署指南
- 安全验证: 确认webhook签名验证和API密钥配置正确
- API密钥:
creem_52Xv3Aw6A98PPg5go2b4tZ(正式环境) - Webhook密钥:
whsec_4LFHNbmkeu74JG4RINCu7e - 产品ID:
prod_7WcEKqxngwFQa1SrUMqmwb(Pro计划) - 环境检测: 代码自动识别生产环境API端点 1
- 配置文件: 创建
env.production.example部署参考 - Webhook URL: 配置为
https://www.comicmind.art/api/webhooks/creem - 支付流程: 完整的用户升级和订阅管理流程
- 监控日志: 详细的webhook事件处理日志
- 标题文案更新: 改为 "Transform your ideas into comic mind-maps" 并采用两行布局
- 简化特性展示: 用简洁的勾选列表替代复杂卡片设计
- No login required: 突出免登录便利性
- Free trial: 强调免费试用价值
- Multiple art styles: 展示多样化艺术风格
- 视觉层次优化: 降低特性展示视觉权重，让标题成为焦点
- 两行标题布局，增强视觉层次感
- 简洁勾选符号设计，避免视觉干扰
- 统一灰色调文字，保持低调展示
- 响应式水平布局，移动端自动换行
- Creem 支付集成: 完整集成 Creem 支付系统，支持订阅管理
- 安全性提升: 移除硬编码API密钥，全面使用环境变量管理
- 部署指南: 创建详细的 Vercel 部署和 Creem 集成指南
- 订阅管理: Pro 用户可通过客户门户管理订阅状态
- API 路由创建:
/api/create-checkout-session- 创建Creem结账会话/api/webhooks/creem- 处理Creem webhook事件/api/customer-portal- 管理客户订阅门户
- 数据库扩展: 添加Creem相关字段到订阅表
- UI/UX 优化: 支付状态显示、Pro用户订阅管理界面
- 支付流程: 用户点击升级 → Creem结账 → webhook处理 → 订阅激活
- 状态同步: 实时同步订阅状态，支持续费、取消、逾期处理
- 用户体验: 支付成功/失败状态提示，一键管理订阅
- 环境变量管理: 所有敏感信息使用环境变量存储
- Webhook验证: 完整的签名验证机制
- 错误处理: 完善的错误处理和日志记录
- API限制检查: 在
generate-structure和generate-imageAPI 中集成每日限制检查 - 用户权限控制: 免费用户每日限制 3 个思维导图，Pro 用户享受无限制使用
- 智能限制处理: 使用
checkDailyLimit()和recordUsage()函数跟踪使用量 - 前端状态管理: 实时检查用户配额状态，动态禁用/启用生成按钮
- 优雅的限制提示: 达到每日限制时显示精美的升级引导卡片
- 付费转化流程: 一键跳转到设置页面进行 Pro 订阅升级
- 统一UI控制: 桌面端和移动端都支持限制状态的一致显示
- 错误处理机制: 友好的错误提示和降级处理策略
- 数据库集成: 完整使用 Supabase 的用户认证和使用统计功能
- 状态同步: 前端组件实时同步用户限制状态和生成权限
- 安全检查: API 层面的双重保护，防止绕过前端限制
- IP 追踪: 支持匿名用户基于 IP 地址的使用限制
- 免费用户: 每日 3 个思维导图 + 基础功能
- Pro 用户: 无限制生成 + 高级功能 + 商业授权
- 匿名用户: 与注册免费用户相同限制，基于 IP 追踪
- 升级引导: 限制达到时自动展示 Pro 版本价值和升级按钮
- 修复手机端布局: 将Gallery区域移动端从每行1张图片改为每行2张图片
- 优化浏览效率: 解决了用户在手机上查看示例图片耗时过长的问题
- 间距调整: 在小屏幕上使用更紧凑的间距，确保2张图片能够舒适并排显示
- 保持跨设备一致性: 桌面端和平板端布局保持不变
- 响应式布局:
grid-cols-1→grid-cols-2(移动端) - 间距优化: 移动端
gap-4→gap-3 - 视觉效果: 保持hover动效和阴影效果
- 图片尺寸: 保持3:4.2宽高比，确保视觉统一
- 重构图库布局: 采用响应式瀑布流网格 (Masonry Grid) 替代旧布局，优化了在不同设备上的视觉呈现。
- 增加交互动效: 为图库图片添加了鼠标悬停时的放大、阴影增强和蒙版效果，提升了用户体验。
- 更新图片内容: 增加了更多由 AI 生成的思维导图案例图片。
- 修复 ReactServerComponentsError 错误
- 创建缺失的 UserNav 组件
- 重构 test-auth 页面为服务器/客户端分离架构
- 修复 utils.ts 中的服务器组件导入冲突
- 添加 webpack 配置忽略 WebSocket 依赖警告
- 遵循 Next.js App Router 最佳实践
- 严格分离服务器组件和客户端组件
- 页面组件只处理 metadata，交互逻辑分离到客户端组件
- 移除客户端组件中的服务器依赖导入
- 优化 Supabase 客户端配置
- 集成 Supabase 认证系统
- 实现 Google OAuth 登录
- 创建用户认证上下文 (AuthContext)
- 更新 Header 组件显示用户状态
- 设计匹配应用逻辑的数据库架构
- 实现每日使用限制功能
- 创建认证测试页面
- 使用
@supabase/ssr替代已弃用的 auth-helpers - 实现服务端和客户端 Supabase 客户端
- 创建中间件处理认证状态
- 设计 RLS (行级安全) 策略
- 实现匿名用户支持
- 将
comics表重构为mindmaps表 - 添加
usage_stats表跟踪使用量 - 创建数据库函数处理每日限制逻辑
- 支持匿名用户和注册用户的不同权限
-
完善思维导图生成功能
- 集成数据库存储
- 实现用户历史记录
- 添加分享功能
-
订阅系统实现
- 集成 Creem 支付
- 实现订阅管理
- 添加付费功能限制
-
部署到生产环境
- Vercel 部署配置
- 环境变量管理
- 域名和 SSL 设置
- ✅ 行级安全策略 (RLS)
- ✅ 用户数据隔离
- ✅ 匿名用户限制
- ✅ 安全的认证流程
- ✅ 环境变量保护
访问 /test-auth 页面测试认证功能：
- 用户登录状态
- 每日使用限制
- 数据库连接状态
欢迎提交 Issue 和 Pull Request！
MIT License
部署2
1