FluxKontext.space 是一个基于Next.js 15的现代化AI图像生成平台，集成了Cloudflare Turnstile安全验证、Stripe支付系统、Supabase数据库和多语言支持。
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/)src/app/)主要页面和布局
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/)src/app/api/
├── 📁 auth/ # 认证相关API
├── 📁 generate/ # 图像生成API
├── 📁 payment/ # 支付相关API
├── 📁 user/ # 用户管理API
├── 📁 admin/ # 管理员API
├── 📁 verify-turnstile/ # Turnstile验证API
│ └── route.ts # 安全验证路由 (203行)
└── 📁 webhook/ # Webhook处理
src/components/)核心业务组件
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/)核心业务逻辑
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/)src/hooks/
├── 📄 useAuth.ts # 认证状态管理
├── 📄 useCredits.ts # 积分管理
├── 📄 useImageGeneration.ts # 图像生成状态
└── [其他自定义hooks...]
src/types/)src/types/
├── 📄 auth.ts # 认证相关类型
├── 📄 payment.ts # 支付相关类型
├── 📄 database.ts # 数据库类型
├── 📄 api.ts # API响应类型
└── [其他类型定义...]
public/)public/
├── 📁 images/ # 图片资源
├── 📁 icons/ # 图标文件
├── 📄 favicon.ico # 网站图标
├── 📄 robots.txt # 搜索引擎爬虫规则
└── 📄 manifest.json # PWA配置
scripts/)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验证集成
- 用户等级检查
- 支付状态验证
- 异常行为检测
❌ 删除影响: 应用核心功能完全失效
StandardTurnstile.tsx (515行)
❌ 删除影响: 安全防护失效，可能遭受攻击
flux-kontext.ts (848行)
❌ 删除影响: 图像生成功能完全失效
payment-security.ts (540行)
❌ 删除影响: 支付系统安全风险
database.ts (794行)
⚠️ 删除影响: 用户体验下降
PricingContent.tsx (403行)
⚠️ 删除影响: 无法展示定价信息
StructuredData.tsx (388行)
✅ 删除影响: 轻微，主要功能不受影响
FAQ.tsx (85行)
✅ 删除影响: 轻微，可用其他方式提供帮助
HowToSteps.tsx (107行)
✅ 删除收益: 减少代码冗余
GoogleOneTapTrigger.tsx (61行)
减少首屏加载时间
组件优化
未使用的多语言目录 ```
合并相似功能 ``` 建议合并:
优化import/export结构
类型安全
FluxKontext.space是一个功能完整的AI图像生成平台，具有：
项目的核心价值在于FluxKontextGenerator.tsx和相关的AI图像生成功能，配合完整的用户管理和支付系统，形成了一个商业化的AI服务平台。
如需技术支持或有任何问题，请查看： - 📄 PAYMENT_SECURITY_GUIDE.md - 支付安全指南 - 📄 env.example - 环境变量配置示例 - 📁 scripts/ - 各种检查和设置脚本
$ claude mcp add flux-kontext-template \
-- python -m otcore.mcp_server <graph>