FluxKontext.space 是一个基于Next.js 15的现代化AI图像生成平台，集成了Cloudflare Turnstile安全验证、Stripe支付系统、Supabase数据库和多语言支持。
- 前端框架: Next.js 15 + React 18 + TypeScript
- UI组件: Shadcn/ui + Radix UI + Tailwind CSS
- 数据库: Supabase (PostgreSQL)
- 支付系统: Stripe
- 安全验证: Cloudflare Turnstile
- AI服务: Fal.ai (Flux模型)
- 部署平台: Vercel
- 总代码文件: 153个文件
- 主要语言: TypeScript (95%), JavaScript (5%)
- 代码行数: 约50,000+行
- 支持语言: 12种语言 (中文、英文、日文、韩文等)
fluxkontext.space/
├── 📄 package.json # 项目依赖和脚本配置
├── 📄 next.config.js # Next.js配置 (99行)
├── 📄 middleware.ts # 中间件路由保护 (149行)
├── 📄 tsconfig.json # TypeScript配置
├── 📄 tailwind.config.ts # Tailwind CSS配置 (102行)
├── 📄 vercel.json # Vercel部署配置 (107行)
├── 📄 env.example # 环境变量模板 (99行)
├── 📄 .cursorrules # Cursor编辑器规则 (184行)
├── 📄 biome.json # 代码格式化配置
├── 📄 eslint.config.mjs # ESLint配置
└── 📄 components.json # Shadcn组件配置
主要页面和布局
src/app/
├── 📄 layout.tsx # 全局布局组件 (90行)
├── 📄 page.tsx # 首页 (32行)
├── 📄 not-found.tsx # 404页面 (37行)
├── 📄 globals.css # 全局样式 (363行)
├── 📄 ClientBody.tsx # 客户端body组件 (32行)
└── 📄 sitemap.ts # SEO站点地图 (91行)
功能页面目录
├── 📁 auth/ # 用户认证
│ ├── signin/ # 登录页面
│ └── signup/ # 注册页面
├── 📁 dashboard/ # 用户仪表板
├── 📁 generate/ # 图像生成页面
├── 📁 pricing/ # 定价页面
├── 📁 admin/ # 管理员页面
├── 📁 features/ # 功能介绍页面
├── 📁 resources/ # 资源页面
├── 📁 privacy/ # 隐私政策
├── 📁 terms/ # 服务条款
└── 📁 refund/ # 退款政策
多语言支持目录
├── 📁 zh/ # 中文版本
├── 📁 en/ (默认) # 英文版本
├── 📁 ja/ # 日文版本
├── 📁 ko/ # 韩文版本
├── 📁 de/ # 德文版本
├── 📁 fr/ # 法文版本
├── 📁 es/ # 西班牙文版本
├── 📁 it/ # 意大利文版本
├── 📁 nl/ # 荷兰文版本
├── 📁 pl/ # 波兰文版本
├── 📁 pt/ # 葡萄牙文版本
├── 📁 ru/ # 俄文版本
├── 📁 tr/ # 土耳其文版本
├── 📁 ar/ # 阿拉伯文版本
├── 📁 hi/ # 印地文版本
└── 📁 bn/ # 孟加拉文版本
src/app/api/
├── 📁 auth/ # 认证相关API
├── 📁 generate/ # 图像生成API
├── 📁 payment/ # 支付相关API
├── 📁 user/ # 用户管理API
├── 📁 admin/ # 管理员API
├── 📁 verify-turnstile/ # Turnstile验证API
│ └── route.ts # 安全验证路由 (203行)
└── 📁 webhook/ # Webhook处理
核心业务组件
src/components/
├── 📄 FluxKontextGenerator.tsx # 🎯 主图像生成组件 (2987行) ⭐
├── 📄 StandardTurnstile.tsx # 🛡️ 安全验证组件 (515行) ⭐
├── 📄 Navigation.tsx # 导航栏组件 (339行)
├── 📄 PricingContent.tsx # 定价页面内容 (403行)
├── 📄 SignUpContent.tsx # 注册页面内容 (354行)
├── 📄 SignInContent.tsx # 登录页面内容 (310行)
└── 📄 CreditDisplay.tsx # 积分显示组件 (255行)
功能性组件
├── 📄 StructuredData.tsx # SEO结构化数据 (388行)
├── 📄 ApiDocumentation.tsx # API文档组件 (577行)
├── 📄 ResourcesContent.tsx # 资源页面内容 (382行)
├── 📄 SmartImagePreview.tsx # 智能图片预览 (215行)
├── 📄 UpgradePrompt.tsx # 升级提示组件 (220行)
├── 📄 GoogleOneTap.tsx # Google一键登录 (186行)
├── 📄 TwitterShowcase.tsx # Twitter展示组件 (177行)
└── 📄 Analytics.tsx # 分析统计组件 (126行)
UI基础组件
├── 📄 HomeContent.tsx # 首页内容 (115行)
├── 📄 HomeContentSimple.tsx # 简化首页内容 (140行)
├── 📄 Footer.tsx # 页脚组件 (137行)
├── 📄 Logo.tsx # Logo组件 (112行)
├── 📄 LanguageSwitcher.tsx # 语言切换器 (127行)
├── 📄 KeyFeatures.tsx # 关键功能展示 (89行)
├── 📄 HowToSteps.tsx # 使用步骤说明 (107行)
└── 📄 FAQ.tsx # 常见问题 (85行)
UI组件库 (src/components/ui/)
├── 📁 ui/ # Shadcn UI组件
│ ├── button.tsx # 按钮组件
│ ├── input.tsx # 输入框组件
│ ├── textarea.tsx # 文本域组件
│ ├── card.tsx # 卡片组件
│ ├── dialog.tsx # 对话框组件
│ ├── progress.tsx # 进度条组件
│ └── [其他UI组件...]
提供者组件 (src/components/providers/)
├── 📁 providers/ # React Context提供者
└── 📁 animations/ # 动画组件
核心业务逻辑
src/lib/
├── 📄 flux-kontext.ts # 🎯 AI图像生成核心逻辑 (848行) ⭐
├── 📄 payment-security.ts # 🔐 支付安全处理 (540行) ⭐
├── 📄 auth.ts # 🔑 认证逻辑 (346行) ⭐
├── 📄 database.ts # 🗄️ 数据库操作 (794行) ⭐
├── 📄 payment.ts # 💳 支付处理 (550行) ⭐
├── 📄 user-tiers.ts # 👤 用户等级管理 (249行)
├── 📄 auth-supabase.ts # Supabase认证 (90行)
├── 📄 stripe-client.ts # Stripe客户端 (52行)
└── 📄 utils.ts # 通用工具函数 (7行)
服务模块 (src/lib/services/)
├── 📁 services/ # 外部服务集成
├── 📁 content-safety/ # 内容安全检查
├── 📁 i18n/ # 国际化配置
├── 📁 content/ # 内容管理
├── 📁 seo/ # SEO优化
├── 📁 payment/ # 支付相关
├── 📁 supabase/ # Supabase配置
├── 📁 config/ # 配置文件
├── 📁 tasks/ # 任务处理
├── 📁 utils/ # 工具函数
└── 📁 types/ # 类型定义
src/hooks/
├── 📄 useAuth.ts # 认证状态管理
├── 📄 useCredits.ts # 积分管理
├── 📄 useImageGeneration.ts # 图像生成状态
└── [其他自定义hooks...]
src/types/
├── 📄 auth.ts # 认证相关类型
├── 📄 payment.ts # 支付相关类型
├── 📄 database.ts # 数据库类型
├── 📄 api.ts # API响应类型
└── [其他类型定义...]
public/
├── 📁 images/ # 图片资源
├── 📁 icons/ # 图标文件
├── 📄 favicon.ico # 网站图标
├── 📄 robots.txt # 搜索引擎爬虫规则
└── 📄 manifest.json # PWA配置
scripts/
├── 📄 quick-setup.js # 快速设置脚本
├── 📄 check-config.js # 配置检查脚本
├── 📄 check-supabase.js # Supabase连接检查
├── 📄 performance-check.js # 性能检查脚本
├── 📄 check-seo.js # SEO检查脚本
└── 📄 test-api.js # API测试脚本
// 🎯 主要功能
- Cloudflare Turnstile集成
- 自动重试机制
- 主题适配 (light/dark/auto)
- 响应式尺寸支持
- 异步脚本加载
- 详细的错误处理和日志记录
// 🔧 核心方法
- loadTurnstileScript(): 动态加载验证脚本
- renderTurnstile(): 渲染验证组件
- handleRetry(): 重试机制
- verifyToken(): Token验证// 🎯 主要功能
- 服务器端Token验证
- Cloudflare API集成
- 错误处理和日志记录
- 安全响应处理
// 🔧 验证流程
1. 接收客户端Token
2. 调用Cloudflare验证API
3. 验证响应处理
4. 返回验证结果// 🎯 主要功能
- 支付安全验证
- 用户权限检查
- 积分系统安全
- 防刷机制
// 🔧 安全措施
- Token验证集成
- 用户等级检查
- 支付状态验证
- 异常行为检测-
FluxKontextGenerator.tsx (2987行)
- 🎯 作用: 主图像生成组件，整个应用的核心功能
- 🔧 功能: AI图像生成、用户交互、状态管理
- ❌ 删除影响: 应用核心功能完全失效
-
StandardTurnstile.tsx (515行)
- 🎯 作用: 安全验证组件，防止滥用和攻击
- 🔧 功能: Cloudflare Turnstile集成、安全验证
- ❌ 删除影响: 安全防护失效，可能遭受攻击
-
flux-kontext.ts (848行)
- 🎯 作用: AI图像生成核心逻辑
- 🔧 功能: Fal.ai API集成、图像处理
- ❌ 删除影响: 图像生成功能完全失效
-
payment-security.ts (540行)
- 🎯 作用: 支付安全处理
- 🔧 功能: 支付验证、安全检查
- ❌ 删除影响: 支付系统安全风险
-
database.ts (794行)
- 🎯 作用: 数据库操作核心
- 🔧 功能: Supabase集成、数据CRUD
- ❌ 删除影响: 数据存储功能失效
-
Navigation.tsx (339行)
- 🎯 作用: 网站导航栏
- 🔧 功能: 页面导航、用户菜单
⚠️ 删除影响: 用户体验下降
-
PricingContent.tsx (403行)
- 🎯 作用: 定价页面内容
- 🔧 功能: 价格展示、套餐选择
⚠️ 删除影响: 无法展示定价信息
-
StructuredData.tsx (388行)
- 🎯 作用: SEO结构化数据
- 🔧 功能: 搜索引擎优化
⚠️ 删除影响: SEO效果下降
-
TwitterShowcase.tsx (177行)
- 🎯 作用: Twitter展示组件
- 🔧 功能: 社交媒体展示
- ✅ 删除影响: 轻微，主要功能不受影响
-
FAQ.tsx (85行)
- 🎯 作用: 常见问题页面
- 🔧 功能: 用户帮助信息
- ✅ 删除影响: 轻微，可用其他方式提供帮助
-
HowToSteps.tsx (107行)
- 🎯 作用: 使用步骤说明
- 🔧 功能: 用户指导
- ✅ 删除影响: 轻微，可简化用户引导
-
HomeContentSimple.tsx (140行)
- 🎯 问题: 与HomeContent.tsx功能重复
- 🔧 建议: 合并到HomeContent.tsx或删除
- ✅ 删除收益: 减少代码冗余
-
GoogleOneTapTrigger.tsx (61行)
- 🎯 问题: 功能可能已集成到GoogleOneTap.tsx
- 🔧 建议: 检查是否还在使用，未使用则删除
- ✅ 删除收益: 减少维护成本
-
代码分割
- 将FluxKontextGenerator.tsx (2987行) 拆分为更小的组件
- 使用React.lazy()进行懒加载
- 减少首屏加载时间
-
组件优化
- 合并功能相似的组件
- 删除未使用的组件
- 优化重复渲染
-
删除冗余文件
建议删除: - HomeContentSimple.tsx (如果未使用) - GoogleOneTapTrigger.tsx (如果已集成) - 未使用的多语言目录 -
合并相似功能
建议合并: - SignInContent.tsx + SignUpContent.tsx - HomeContent.tsx + HomeContentSimple.tsx
-
模块化改进
- 将大型文件拆分为功能模块
- 提取公共逻辑到hooks
- 优化import/export结构
-
类型安全
- 完善TypeScript类型定义
- 减少any类型使用
- 增强类型检查
FluxKontext.space是一个功能完整的AI图像生成平台，具有：
- 完整的用户认证和支付系统
- 强大的安全验证机制
- 多语言支持
- 现代化的技术栈
- 详细的SEO优化
- 部分组件过于庞大，需要拆分
- 存在一些冗余文件
- 可以进一步优化性能
项目的核心价值在于FluxKontextGenerator.tsx和相关的AI图像生成功能，配合完整的用户管理和支付系统，形成了一个商业化的AI服务平台。
如需技术支持或有任何问题，请查看：
- 📄 PAYMENT_SECURITY_GUIDE.md - 支付安全指南
- 📄 env.example - 环境变量配置示例
- 📁 scripts/ - 各种检查和设置脚本