2025-10-09 18:46 北京
💡 **MVP开发计划与迭代：** 文章详细规划了为期8周的MVP开发周期，明确了版本目标、功能范围、每周任务分配、人员分工、代码管理、质量保证及风险应对方案，确保开发过程的高效和有条理。
🚀 **核心功能实现与调试：** 涵盖了用户注册登录、图片上传预览、AI多图融合（基于火山引擎SeeDream4）、结果展示下载等核心功能的开发与调试。通过与TRAE工具的交互，解决了HTTP 406错误、API Key配置缺失、跨域请求问题等技术挑战，并优化了用户界面。
📈 **数据库与后台集成：** 利用Supabase构建了后台数据库系统，实现了用户认证、文件存储等功能。在问题排查中，通过分析Supabase客户端配置，解决了访问权限问题，确保了数据的一致性和安全性。
💰 **订阅系统与支付集成：** 详细阐述了订阅系统的完善过程，包括数据库表（`subscription_plans`, `user_subscriptions`, `user_quotas`）的设计、Stripe沙盒环境的集成。解决了功能缺失、表不存在等问题，并提出了UI组件（如Progress）的设计和应用，以增强用户体验。
🛠️ **技术优化与创新：** 在开发过程中，TRAE工具不仅协助解决了问题，还提出了更优的设计方案，例如直接上传Base64数据以节省成本。同时，文章强调了代码规范、测试覆盖率、性能优化和风险管理的重要性，以构建健壮且可扩展的平台。
2025-10-09 18:46 北京
请先阅读文档，该文档详细介绍了DEMO项目的概况。基于此DEMO，您需要构建一个符合国际最佳实践的多图融合与自动审核的创意图像生成网站。具体要求如下：1. 技术架构：- 采用Supabase实现后台数据库系统- 设计完整的用户邮箱认证登录系统- 开发配套的后台管理系统2. 支付系统：- 集成Stripe沙盒环境- 展示可订阅的服务套餐- 实现沙盒环境订阅功能- 确保设计可无缝切换至正式支付环境3. 订阅方案：- 免费用户：每日5次图像融合生成机会- Pro订阅用户：每日10次图像融合生成机会4. UI设计标准：- 遵循交互设计最佳实践- 界面简洁美观- 达到国际一流水平- 确保良好的用户体验请确保所有功能模块的设计与实现均符合行业最高标准。
新的架构基于生产环境的最佳实践，重新设计并优化整个系统部署方案。方案需采用生产版本标准，包含以下核心要素：1. 系统架构设计- 采用高可用分布式架构- 实现服务无状态化- 设计完善的容灾机制2. 部署策略- 实施蓝绿部署或滚动更新- 配置自动化CI/CD流水线- 建立多环境隔离机制（开发/测试/预发/生产）3. 安全规范- 实施最小权限原则- 配置完善的监控告警系统- 实现数据加密传输与存储4. 性能优化- 进行容量规划与压力测试- 配置自动扩缩容策略- 优化资源利用率5. 运维保障- 建立完善的日志收集系统- 设计标准化运维流程- 制定详细的应急预案请确保方案符合行业标准的生产环境要求，并提供详细的实施步骤和技术选型建议。
开发目标：交付最小可行产品（MVP）。上下滑动查看完整内容制定一个基于5人团队每周标准工作40小时的软件生产版本实现计划，目标是交付一个最小可行产品(MVP)。计划需包含以下详细内容：1. 版本目标与功能范围- 明确定义MVP的核心功能需求和技术指标- 划定版本边界和优先级排序的功能清单- 确定交付标准和验收条件2. 每周任务分配与里程碑- 将开发周期划分为每周一个迭代周期- 为每个迭代设定可交付的阶段性成果- 制定详细的周任务分解表（含开发/测试/文档任务）3. 人员分工与职责划分- 明确5名成员的角色（如开发/测试/文档）- 分配具体模块的开发负责人- 制定交叉评审和协同工作机制4. 代码提交与版本控制流程- 建立Git分支管理策略（feature/bugfix/release分支）- 制定每日代码提交规范和代码审查流程- 设置版本tag标记规则5. 质量保证与测试安排- 制定单元测试覆盖率要求（建议≥80%）- 安排每周集成测试和冒烟测试时间点- 规划用户验收测试(UAT)方案6. 风险预估与应对方案- 识别技术/进度/人员方面的主要风险- 为每个风险制定缓解措施和应急方案- 建立风险监控和上报机制计划需确保：- 每人每周工作量控制在40小时以内- 开发/测试/文档任务均衡分配- 关键路径任务优先保障资源- 预留10-15%缓冲时间应对突发情况
实际开发过程与问题解决# AI多图融合创作平台 - MVP开发实施计划## 1. 版本目标与功能范围### 1.1 MVP核心功能需求**核心价值主张：** 为用户提供基于AI的多图融合创作服务，支持图片上传、智能融合和结果下载。**核心功能清单：**- 用户注册与登录系统- 图片上传与预览功能- AI多图融合处理（基于火山引擎SeeDream4）- 融合结果展示与下载- 基础用户配额管理- 简单的用户界面和交互体验### 1.2 技术指标要求| 指标类型 | 具体要求 ||---------|----------|| 响应时间 | 页面加载 < 3秒，图片上传 < 10秒 || 并发用户 | 支持100个并发用户 || 图片处理 | 支持JPG/PNG格式，单张 < 10MB || 可用性 | 99%可用性（开发环境） || 兼容性 | 支持Chrome、Safari、Firefox最新版本 |### 1.3 功能优先级排序**P0 - 必须实现（核心功能）：**1. 用户注册/登录2. 图片上传功能3. AI图片融合处理4. 结果展示和下载**P1 - 重要功能：**1. 用户配额管理2. 基础错误处理3. 响应式设计**P2 - 可选功能（MVP后考虑）：**1. 用户历史记录2. 高级参数配置3. 社交分享功能### 1.4 交付标准和验收条件**功能验收标准：**- 所有P0功能100%完成并通过测试- P1功能至少80%完成- 单元测试覆盖率 ≥ 80%- 集成测试通过率 ≥ 95%- 用户验收测试通过率 ≥ 90%**技术验收标准：**- 代码审查通过率100%- 无严重安全漏洞- 性能指标达到要求- 部署文档完整## 2. 每周任务分配与里程碑### 2.1 开发周期规划（8周迭代）#### 第1周：项目启动与基础架构**里程碑：** 完成项目初始化和基础架构搭建| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | 项目初始化，React+Vite环境搭建 | 8h | 前端负责人 || 开发 | Supabase数据库设计和初始化 | 12h | 后端负责人 || 开发 | 基础UI组件库搭建 | 16h | 前端开发者 || 测试 | 测试环境搭建，CI/CD流程配置 | 12h | 测试负责人 || 文档 | 技术文档框架，API文档模板 | 8h | 文档负责人 |**交付成果：**- 完整的开发环境- 基础项目结构- CI/CD流水线- 数据库表结构#### 第2周：用户认证系统**里程碑：** 完成用户注册、登录功能| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | Supabase Auth集成 | 16h | 后端负责人 || 开发 | 登录/注册页面开发 | 20h | 前端负责人 || 开发 | 用户状态管理 | 8h | 前端开发者 || 测试 | 认证功能测试用例编写和执行 | 12h | 测试负责人 || 文档 | 用户认证API文档 | 4h | 文档负责人 |**交付成果：**- 用户注册/登录功能- 用户会话管理- 认证相关测试用例#### 第3周：图片上传功能**里程碑：** 完成图片上传和预览功能| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | 图片上传组件开发 | 16h | 前端负责人 || 开发 | 文件存储服务集成（Supabase Storage） | 12h | 后端负责人 || 开发 | 图片预览和验证功能 | 12h | 前端开发者 || 测试 | 文件上传测试，边界条件测试 | 12h | 测试负责人 || 文档 | 文件上传API文档和用户指南 | 8h | 文档负责人 |**交付成果：**- 图片上传界面- 文件存储功能- 图片格式验证- 上传进度显示#### 第4周：AI融合核心功能**里程碑：** 完成AI图片融合处理功能| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | 火山引擎SeeDream4 API集成 | 20h | 后端负责人 || 开发 | 融合参数配置界面 | 16h | 前端负责人 || 开发 | 异步任务处理和状态管理 | 12h | 前端开发者 || 测试 | AI融合功能测试，异常处理测试 | 8h | 测试负责人 || 文档 | AI融合API文档 | 4h | 文档负责人 |**交付成果：**- AI图片融合功能- 处理状态显示- 错误处理机制#### 第5周：结果展示与下载**里程碑：** 完成融合结果展示和下载功能| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | 结果展示页面开发 | 16h | 前端负责人 || 开发 | 图片下载功能实现 | 8h | 前端开发者 || 开发 | 结果数据存储和管理 | 12h | 后端负责人 || 测试 | 结果展示和下载功能测试 | 12h | 测试负责人 || 文档 | 用户操作指南更新 | 12h | 文档负责人 |**交付成果：**- 融合结果展示界面- 图片下载功能- 结果历史记录#### 第6周：用户配额管理**里程碑：** 完成基础配额管理系统| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | 用户配额数据模型设计 | 8h | 后端负责人 || 开发 | 配额检查和扣减逻辑 | 16h | 后端负责人 || 开发 | 配额显示界面 | 12h | 前端负责人 || 开发 | 配额不足提示功能 | 8h | 前端开发者 || 测试 | 配额管理功能测试 | 12h | 测试负责人 || 文档 | 配额管理文档 | 4h | 文档负责人 |**交付成果：**- 用户配额管理系统- 配额使用统计- 配额不足处理#### 第7周：集成测试与优化**里程碑：** 完成系统集成测试和性能优化| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | 性能优化和代码重构 | 16h | 前端负责人 || 开发 | 错误处理和用户体验优化 | 12h | 前端开发者 || 开发 | 数据库性能优化 | 8h | 后端负责人 || 测试 | 端到端测试，性能测试 | 20h | 测试负责人 || 文档 | 部署文档和运维指南 | 4h | 文档负责人 |**交付成果：**- 完整的端到端测试- 性能优化报告- 部署就绪的系统#### 第8周：用户验收测试与发布准备**里程碑：** 完成UAT测试和生产发布准备| 任务类型 | 具体任务 | 工时估算 | 负责人 ||---------|---------|---------|--------|| 开发 | Bug修复和最终调优 | 16h | 全体开发人员 || 测试 | 用户验收测试执行 | 16h | 测试负责人 || 测试 | 生产环境部署测试 | 8h | 测试负责人 || 文档 | 用户手册和发布说明 | 16h | 文档负责人 || 其他 | 发布准备和上线支持 | 4h | 项目经理 |**交付成果：**- MVP产品发布版本- 完整的用户文档- 生产环境部署### 2.2 每周工作量分配**工作量控制原则：**- 每人每周40小时标准工作时间- 预留10%缓冲时间（4小时）- 实际安排36小时具体任务- 关键路径任务优先分配资源## 3. 人员分工与职责划分### 3.1 团队角色定义#### 角色1：前端负责人（Frontend Lead）**主要职责：**- 前端架构设计和技术选型- 核心页面和组件开发- 前端代码审查和质量把控- 与后端API接口对接**技能要求：**- React/TypeScript专家级- 3年以上前端开发经验- 熟悉现代前端工程化#### 角色2：后端负责人（Backend Lead）**主要职责：**- 后端架构设计和数据库设计- 核心API开发和第三方服务集成- 后端代码审查和性能优化- 生产环境部署和运维支持**技能要求：**- Node.js/Supabase专家级- 3年以上后端开发经验- 熟悉云服务和API集成#### 角色3：前端开发者（Frontend Developer）**主要职责：**- UI组件开发和页面实现- 用户交互逻辑实现- 前端单元测试编写- 协助前端负责人完成开发任务**技能要求：**- React/JavaScript熟练- 1-2年前端开发经验- 良好的UI/UX理解能力#### 角色4：测试负责人（QA Lead）**主要职责：**- 测试策略制定和测试计划执行- 自动化测试框架搭建- 集成测试和端到端测试- 质量把控和缺陷管理**技能要求：**- 2年以上测试经验- 熟悉自动化测试工具- 具备基础开发能力#### 角色5：文档负责人（Documentation Lead）**主要职责：**- 技术文档编写和维护- API文档和用户手册- 项目管理和进度跟踪- 跨团队沟通协调**技能要求：**- 优秀的文档编写能力- 项目管理经验- 技术背景和沟通能力### 3.2 模块开发负责人分配| 功能模块 | 主要负责人 | 协助人员 ||---------|-----------|----------|| 用户认证系统 | 后端负责人 | 前端负责人 || 图片上传功能 | 前端负责人 | 后端负责人 || AI融合处理 | 后端负责人 | 前端开发者 || 结果展示下载 | 前端负责人 | 前端开发者 || 配额管理系统 | 后端负责人 | 前端开发者 || 测试和质量保证 | 测试负责人 | 全体成员 |### 3.3 协同工作机制**每日站会（Daily Standup）：**- 时间：每天上午9:30，15分钟- 参与：全体团队成员- 内容：昨日完成、今日计划、遇到问题**代码审查机制：**- 所有代码必须经过至少1人审查- 核心功能代码需要2人审查- 审查重点：代码质量、安全性、性能**技术分享会：**- 时间：每周五下午，1小时- 内容：技术难点分享、最佳实践讨论- 轮流主讲，促进知识共享## 4. 代码提交与版本控制流程### 4.1 Git分支管理策略**分支结构：**```main (生产分支)├── develop (开发主分支)│ ├── feature/user-auth (功能分支)│ ├── feature/image-upload (功能分支)│ └── feature/ai-fusion (功能分支)├── release/v1.0.0 (发布分支)└── hotfix/critical-bug (热修复分支)```**分支规则：**- `main`: 生产环境代码，只接受来自release和hotfix的合并- `develop`: 开发主分支，集成所有功能分支- `feature/*`: 功能开发分支，从develop分出，完成后合并回develop- `release/*`: 发布准备分支，从develop分出，测试通过后合并到main- `hotfix/*`: 紧急修复分支，从main分出，修复后合并到main和develop### 4.2 代码提交规范**提交信息格式：**```<type>(<scope>): <subject><body><footer>```**类型定义：**- `feat`: 新功能- `fix`: Bug修复- `docs`: 文档更新- `style`: 代码格式调整- `refactor`: 代码重构- `test`: 测试相关- `chore`: 构建过程或辅助工具变动**提交示例：**```feat(auth): add user registration functionality- Implement user registration form- Add email validation- Integrate with Supabase AuthCloses #123```### 4.3 代码审查流程**Pull Request流程：**1. 创建功能分支并完成开发2. 提交PR到develop分支3. 自动化测试执行4. 指定审查人员进行代码审查5. 审查通过后合并到develop6. 删除功能分支**审查检查清单：**- [ ] 代码符合项目编码规范- [ ] 功能实现符合需求- [ ] 包含必要的单元测试- [ ] 没有明显的性能问题- [ ] 没有安全漏洞- [ ] 文档已更新### 4.4 版本标记规则**版本号格式：** `v<major>.<minor>.<patch>`**标记规则：**- 每个sprint结束创建release标记- 生产发布创建正式版本标记- 热修复创建patch版本标记**标记示例：**```bash# Sprint版本git tag -a v1.0.0-sprint1 -m "Sprint 1 release"# 正式版本git tag -a v1.0.0 -m "MVP release"# 修复版本git tag -a v1.0.1 -m "Critical bug fix"```## 5. 质量保证与测试安排### 5.1 测试策略**测试金字塔：**```E2E Tests (10%)──────────────Integration Tests (20%)────────────────────────Unit Tests (70%)```### 5.2 单元测试要求**覆盖率目标：** ≥80%**测试框架：**- 前端：Jest + React Testing Library- 后端：Jest + Supertest**测试重点：**- 核心业务逻辑函数- 工具函数和帮助方法- React组件的关键交互- API接口的输入输出**测试示例：**```typescript// 前端组件测试describe('ImageUpload Component', () => {test('should upload image successfully', async () => {// 测试逻辑});test('should show error for invalid file type', () => {// 测试逻辑});});// 后端API测试describe('Auth API', () => {test('POST /api/auth/login should return token', async () => {// 测试逻辑});});```### 5.3 集成测试安排**测试时间点：**- 每周三：模块集成测试- 每周五：端到端集成测试- Sprint结束：完整回归测试**测试内容：**- API接口集成测试- 前后端数据流测试- 第三方服务集成测试- 数据库操作测试### 5.4 端到端测试**测试工具：** Playwright**测试场景：**- 用户注册登录流程- 完整的图片融合流程- 错误处理和边界条件- 跨浏览器兼容性**测试执行：**- 每日自动执行冒烟测试- 每周执行完整E2E测试套件- 发布前执行全面回归测试### 5.5 用户验收测试(UAT)**测试阶段：** 第8周**测试参与者：**- 产品经理- 设计师- 内部用户代表**测试内容：**- 功能完整性验证- 用户体验评估- 性能表现测试- 兼容性确认**验收标准：**- 所有P0功能正常工作- 用户满意度 ≥ 4.0/5.0- 关键用户路径无阻塞问题## 6. 风险预估与应对方案### 6.1 技术风险#### 风险1：第三方API集成问题**风险描述：** 火山引擎SeeDream4 API集成可能遇到技术难题或服务不稳定**影响程度：** 高**发生概率：** 中等**缓解措施：**- 提前进行API调研和原型验证- 准备备用的AI服务方案- 与火山引擎技术支持建立联系**应急方案：**- 使用模拟数据完成前端开发- 考虑其他AI图像处理服务- 延后AI功能，优先完成基础功能#### 风险2：性能瓶颈**风险描述：** 图片处理和存储可能导致性能问题**影响程度：** 中等**发生概率：** 中等**缓解措施：**- 早期进行性能测试- 实施图片压缩和优化- 使用CDN加速图片访问**应急方案：**- 限制图片大小和数量- 实施队列处理机制- 升级服务器配置### 6.2 进度风险#### 风险3：开发进度延迟**风险描述：** 某些功能开发复杂度超出预期，导致进度延迟**影响程度：** 高**发生概率：** 中等**缓解措施：**- 每周进行进度评估和调整- 预留15%缓冲时间- 优先保证P0功能完成**应急方案：**- 调整功能范围，推迟P1功能- 增加工作时间或人员支持- 重新评估和调整里程碑#### 风险4：测试时间不足**风险描述：** 开发延期导致测试时间压缩，影响质量**影响程度：** 中等**发生概率：** 中等**缓解措施：**- 开发过程中同步进行测试- 自动化测试减少手工测试时间- 提前准备测试用例和数据**应急方案：**- 延长测试周期，推迟发布- 重点测试核心功能- 发布后持续修复问题### 6.3 人员风险#### 风险5：关键人员离职或请假**风险描述：** 核心开发人员离职或长期请假影响项目进度**影响程度：** 高**发生概率：** 低**缓解措施：**- 建立知识共享机制- 交叉培训和备份人员- 完善的文档和代码注释**应急方案：**- 快速招聘替代人员- 重新分配任务和职责- 寻求外部技术支持#### 风险6：团队协作问题**风险描述：** 团队成员之间沟通不畅或技术分歧**影响程度：** 中等**发生概率：** 低**缓解措施：**- 建立清晰的沟通机制- 定期团队建设活动- 技术决策透明化**应急方案：**- 项目经理介入协调- 技术专家仲裁决策- 必要时调整团队结构### 6.4 风险监控机制**风险监控指标：**- 每周进度完成率- 代码质量指标（测试覆盖率、代码审查通过率）- 团队士气和满意度- 技术债务积累情况**风险上报机制：**- 日常风险：团队内部讨论解决- 中等风险：项目经理协调处理- 高风险：上报管理层，制定应对策略**风险评估频率：**- 每日站会：快速风险识别- 每周回顾：风险状态更新- Sprint结束：全面风险评估## 7. 项目保障措施### 7.1 工作量控制**工作时间管理：**- 严格控制每人每周40小时工作时间- 避免长期加班影响团队效率- 合理安排任务优先级**任务分配原则：**- 根据个人能力和经验分配任务- 确保开发/测试/文档任务均衡- 关键路径任务优先分配资源### 7.2 质量保证**代码质量：**- 强制代码审查流程- 自动化代码质量检查- 定期技术债务清理**测试质量：**- 测试用例覆盖所有核心功能- 自动化测试减少人工错误- 持续集成确保代码质量### 7.3 沟通协调**定期会议：**- 每日站会：15分钟，同步进度和问题- 每周回顾：1小时，总结和计划- Sprint演示：2小时，展示成果**文档管理：**- 及时更新技术文档- 维护项目知识库- 记录重要决策和变更### 7.4 应急预案**进度延迟应对：**1. 重新评估任务优先级2. 调整功能范围3. 增加资源投入4. 延长项目周期**质量问题应对：**1. 立即停止相关开发2. 分析问题根本原因3. 制定修复计划4. 加强相关测试**人员问题应对：**1. 快速重新分配任务2. 寻找临时支援3. 调整项目计划4. 必要时延期交付## 8. 成功标准和验收### 8.1 项目成功标准**功能完成度：**- P0功能100%完成- P1功能80%以上完成- 所有功能通过验收测试**质量标准：**- 单元测试覆盖率 ≥ 80%- 集成测试通过率 ≥ 95%- 用户验收测试通过率 ≥ 90%- 无严重安全漏洞**性能标准：**- 页面加载时间 < 3秒- 图片上传时间 < 10秒- 支持100并发用户- 99%可用性### 8.2 最终交付物**软件产品：**- MVP版本的完整应用- 生产环境部署包- 数据库初始化脚本**文档资料：**- 用户操作手册- 技术文档和API文档- 部署和运维指南- 测试报告**项目资料：**- 项目总结报告- 经验教训文档- 后续迭代建议---**项目预计总工时：** 1600小时（5人 × 8周 × 40小时）**实际安排工时：** 1440小时（预留10%缓冲时间）**项目周期：** 8周**团队规模：** 5人**预期交付：** AI多图融合创作平台MVP版本
fetch.ts:15 GET https://zouvkpyjgbnwbxplvfck.supabase.co/rest/v1/users?select=*&id=eq.c6ad03a3-15be-400a-9ade-e9eshdebafd2 406 (Not Acceptable)修改代码后，登录正常。HTTP 406 错误主要由以下原因引起：- 认证头信息缺失 ：Supabase 客户端未正确传递认证令牌- 会话状态异常 ：用户会话过期或无效- RLS 策略配置错误 ：Row Level Security 策略过于严格- 权限配置问题 ：数据库角色权限设置不正确// 创建优化的 Supabase 客户端exportconst supabase = createClient<Database>(SUPABASE_CONFIG.url,SUPABASE_CONFIG.anonKey,{auth: {// 自动刷新令牌autoRefreshToken: true,// 持久化会话persistSession: true,// 检测 URL 中的会话detectSessionInUrl: true,// 确保会话存储在 localStorage 中storage: typeof window !== 'undefined' ? window.localStorage : undefined,// 设置会话刷新的阈值（在过期前60秒刷新）refreshThreshold: 60,// 会话刷新间隔refreshInterval: 30 * 60 * 1000, // 30分钟// 流程类型flowType: 'pkce'},realtime: {params: {eventsPerSecond: 10}},// 全局配置，确保所有请求都包含正确的头信息global: {headers: {'Content-Type': 'application/json','Accept': 'application/json','Prefer': 'return=representation',// 确保 API 密钥始终存在'apikey': SUPABASE_CONFIG.anonKey}},// 数据库配置db: {schema: 'public'}})...
这个错误的主要原因是 **API Key 配置问题**。通过配置有效的 SeeDream API Key，可以解决大部分网络请求失败的问题。同时，建议添加更完善的错误处理和配置验证机制，以提高系统的稳定性和可维护性。# 订阅系统完善计划文档## 1. 项目概述本文档旨在为AI多图融合创作平台的订阅系统提供完整的完善计划，包括数据库结构设计、UI组件开发、Stripe支付集成和订阅管理界面的实现。通过系统性的改进，为用户提供完整的订阅服务体验。## 2. 数据库结构设计### 2.1 subscription_plans 表设计**表名：** `subscription_plans`| 字段名 | 数据类型 | 约束 | 描述 ||--------|----------|------|------|| id | UUID | PRIMARY KEY, DEFAULT gen_random_uuid() | 计划唯一标识 || name | VARCHAR(100) | NOT NULL | 计划名称（如：基础版、专业版、企业版） || description | TEXT | | 计划详细描述 || price | DECIMAL(10,2) | NOT NULL | 价格（月费） || currency | VARCHAR(3) | DEFAULT 'USD' | 货币代码 || billing_period | VARCHAR(20) | DEFAULT 'monthly' | 计费周期（monthly/yearly） || daily_limit | INTEGER | NOT NULL | 每日图片生成限制 || monthly_limit | INTEGER | NOT NULL | 每月图片生成限制 || features | JSONB | | 功能特性列表 || stripe_price_id | VARCHAR(255) | | Stripe价格ID || is_active | BOOLEAN | DEFAULT true | 是否启用 || sort_order | INTEGER | DEFAULT 0 | 排序顺序 || created_at | TIMESTAMP WITH TIME ZONE | DEFAULT NOW() | 创建时间 || updated_at | TIMESTAMP WITH TIME ZONE | DEFAULT NOW() | 更新时间 |### 2.2 user_subscriptions 表设计**表名：** `user_subscriptions`| 字段名 | 数据类型 | 约束 | 描述 ||--------|----------|------|------|| id | UUID | PRIMARY KEY, DEFAULT gen_random_uuid() | 订阅记录唯一标识 || user_id | UUID | NOT NULL, REFERENCES users(id) | 用户ID || plan_id | UUID | NOT NULL, REFERENCES subscription_plans(id) | 订阅计划ID || stripe_subscription_id | VARCHAR(255) | UNIQUE | Stripe订阅ID || stripe_customer_id | VARCHAR(255) | | Stripe客户ID || status | VARCHAR(20) | NOT NULL | 订阅状态（active/canceled/past_due/unpaid） || current_period_start | TIMESTAMP WITH TIME ZONE | NOT NULL | 当前周期开始时间 || current_period_end | TIMESTAMP WITH TIME ZONE | NOT NULL | 当前周期结束时间 || cancel_at_period_end | BOOLEAN | DEFAULT false | 是否在周期结束时取消 || canceled_at | TIMESTAMP WITH TIME ZONE | | 取消时间 || trial_start | TIMESTAMP WITH TIME ZONE | | 试用开始时间 || trial_end | TIMESTAMP WITH TIME ZONE | | 试用结束时间 || created_at | TIMESTAMP WITH TIME ZONE | DEFAULT NOW() | 创建时间 || updated_at | TIMESTAMP WITH TIME ZONE | DEFAULT NOW() | 更新时间 |### 2.3 数据库关系设计```mermaiderDiagramusers ||--o{ user_subscriptions : hassubscription_plans ||--o{ user_subscriptions : definesusers ||--o{ user_quotas : hasusers {uuid id PKstring emailstring usernametimestamp created_at}subscription_plans {uuid id PKstring namedecimal priceinteger daily_limitinteger monthly_limitstring stripe_price_idboolean is_active}user_subscriptions {uuid id PKuuid user_id FKuuid plan_id FKstring stripe_subscription_idstring statustimestamp current_period_starttimestamp current_period_end}user_quotas {uuid id PKuuid user_id FKstring plan_typeinteger daily_limitinteger daily_usedinteger monthly_limitinteger monthly_used}```## 3. Progress UI组件设计### 3.1 Progress组件规范**组件路径：** `src/components/ui/progress.tsx`**功能特性：**- 支持百分比显示（0-100%）- 平滑动画过渡效果- 自定义颜色主题- 响应式设计- 可配置尺寸（small/medium/large）**Props接口：**```typescriptinterface ProgressProps {value: number; // 0-100的进度值max?: number; // 最大值，默认100size?: 'sm' | 'md' | 'lg'; // 尺寸variant?: 'default' | 'success' | 'warning' | 'danger'; // 颜色变体showLabel?: boolean; // 是否显示百分比标签animated?: boolean; // 是否启用动画className?: string; // 自定义样式类}```### 3.2 订阅进度条实现**使用场景：**1. **使用量进度条：** 显示当日/当月已使用次数占限制次数的百分比2. **订阅周期进度条：** 显示当前订阅周期的时间进度3. **功能解锁进度条：** 显示不同订阅等级的功能解锁状态**实现示例：**```typescript// 使用量进度条const usagePercentage = (dailyUsed / dailyLimit) * 100;<Progressvalue={usagePercentage}variant={usagePercentage > 80 ? 'warning' : 'default'}showLabel={true}size="md"/>// 订阅周期进度条const periodProgress = calculatePeriodProgress(currentPeriodStart, currentPeriodEnd);<Progressvalue={periodProgress}variant="success"showLabel={false}size="sm"/>```### 3.3 响应式设计规范**断点设计：**- **移动端（<768px）：** 进度条高度4px，标签字体12px- **平板端（768px-1024px）：** 进度条高度6px，标签字体14px- **桌面端（>1024px）：** 进度条高度8px，标签字体16px**布局适配：**- 移动端：垂直堆叠布局，进度条占满宽度- 桌面端：水平布局，进度条与标签并排显示## 4. Stripe集成技术方案### 4.1 Stripe配置和初始化**环境变量配置：**```env# Stripe配置STRIPE_PUBLISHABLE_KEY=pk_test_...STRIPE_SECRET_KEY=sk_test_...STRIPE_WEBHOOK_SECRET=whsec_...```**Stripe客户端初始化：**```typescript// src/services/stripe.tsimport Stripe from 'stripe';exportconst stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {apiVersion: '2023-10-16',});exportconst stripePromise = loadStripe(process.env.STRIPE_PUBLISHABLE_KEY!);```### 4.2 订阅创建流程**API端点设计：**```typescript// POST /api/subscriptions/createinterface CreateSubscriptionRequest {planId: string;paymentMethodId?: string;trialDays?: number;}interface CreateSubscriptionResponse {subscriptionId: string;clientSecret?: string;status: 'succeeded' | 'requires_payment_method' | 'requires_confirmation';}```**实现流程：**1. 创建或获取Stripe客户2. 创建订阅3. 处理支付确认4. 更新本地数据库5. 返回订阅状态### 4.3 Webhook处理**支持的事件类型：**- `customer.subscription.created` - 订阅创建- `customer.subscription.updated` - 订阅更新- `customer.subscription.deleted` - 订阅取消- `invoice.payment_succeeded` - 支付成功- `invoice.payment_failed` - 支付失败**Webhook处理器：**```typescript// POST /api/webhooks/stripeexport async function handleStripeWebhook(event: Stripe.Event){switch (event.type) {case'customer.subscription.updated':await updateSubscriptionStatus(event.data.object as Stripe.Subscription);break;case'invoice.payment_succeeded':await handlePaymentSuccess(event.data.object as Stripe.Invoice);break;// ... 其他事件处理}}```### 4.4 订阅状态同步**同步策略：**1. **实时同步：** 通过Webhook即时更新订阅状态2. **定时同步：** 每日检查订阅状态，处理异常情况3. **手动同步：** 提供管理员手动同步功能## 5. 订阅界面UI/UX设计### 5.1 订阅计划展示页面**页面路径：** `/subscription/plans`**核心模块：**| 模块名称 | 功能描述 ||----------|----------|| 计划卡片 | 展示订阅计划名称、价格、功能特性，支持月付/年付切换 || 功能对比表 | 详细对比不同计划的功能差异，突出推荐计划 || 当前状态显示 | 显示用户当前订阅状态和剩余时间 || 升级/降级按钮 | 提供计划变更操作入口 |### 5.2 订阅管理页面**页面路径：** `/subscription/manage`**核心模块：**| 模块名称 | 功能描述 ||----------|----------|| 订阅概览 | 显示当前计划、下次扣费时间、订阅状态 || 使用统计 | 展示当月使用量、剩余配额，包含进度条可视化 || 计费历史 | 显示历史账单和支付记录 || 计划变更 | 提供升级、降级、取消订阅功能 || 支付方式管理 | 管理绑定的支付方式 |### 5.3 支付流程界面**支付确认页面：**- 订阅计划确认- 支付方式选择- 优惠码输入- 总价计算显示- 服务条款确认**支付处理页面：**- 支付进度指示器- 3D Secure验证处理- 支付结果反馈- 错误处理和重试机制### 5.4 设计规范**色彩方案：**- 主色调：#3B82F6（蓝色）- 成功色：#10B981（绿色）- 警告色：#F59E0B（橙色）- 错误色：#EF4444（红色）**组件样式：**- 卡片：圆角8px，阴影elevation-2- 按钮：圆角6px，悬停效果- 进度条：圆角4px，平滑动画- 表单：简洁设计，清晰的错误提示## 6. 实施步骤和优先级### 6.1 第一阶段：数据库基础设施（优先级：高）**时间估算：** 2-3天**任务清单：**1. 创建 `subscription_plans` 表迁移文件2. 创建 `user_subscriptions` 表迁移文件3. 设置表关系和索引4. 配置RLS（行级安全）策略5. 插入初始订阅计划数据6. 编写数据库操作函数**验收标准：**- 所有表结构正确创建- RLS策略正常工作- 基础CRUD操作测试通过### 6.2 第二阶段：Progress UI组件开发（优先级：中）**时间估算：** 1-2天**任务清单：**1. 创建Progress组件基础结构2. 实现进度条动画效果3. 添加响应式设计支持4. 编写组件文档和示例5. 集成到订阅状态显示中**验收标准：**- 组件在不同设备上正常显示- 动画效果流畅- 支持所有定义的Props### 6.3 第三阶段：订阅管理界面（优先级：高）**时间估算：** 3-4天**任务清单：**1. 创建订阅计划展示页面2. 实现订阅管理页面3. 集成Progress组件显示使用统计4. 添加计划变更功能5. 实现响应式布局**验收标准：**- 页面布局美观，用户体验良好- 所有功能模块正常工作- 移动端适配完成### 6.4 第四阶段：Stripe集成（优先级：高）**时间估算：** 4-5天**任务清单：**1. 配置Stripe开发环境2. 实现订阅创建API3. 开发Webhook处理器4. 集成支付流程到前端5. 实现订阅状态同步6. 添加错误处理和重试机制**验收标准：**- 支付流程完整可用- Webhook正确处理所有事件- 订阅状态实时同步### 6.5 第五阶段：测试和优化（优先级：中）**时间估算：** 2-3天**任务清单：**1. 端到端测试2. 支付流程测试3. 性能优化4. 安全性检查5. 用户体验优化**验收标准：**- 所有功能测试通过- 性能指标达标- 安全漏洞修复完成## 7. 风险评估和应对策略### 7.1 技术风险**风险：** Stripe API集成复杂度**应对：** 提前进行API测试，准备备用支付方案**风险：** 数据库迁移可能影响现有功能**应对：** 在测试环境充分验证，准备回滚方案### 7.2 业务风险**风险：** 用户接受度不高**应对：** 提供免费试用期，收集用户反馈**风险：** 支付安全问题**应对：** 严格遵循PCI DSS标准，定期安全审计## 8. 成功指标**技术指标：**- 支付成功率 > 95%- 页面加载时间 < 2秒- API响应时间 < 500ms**业务指标：**- 订阅转化率 > 5%- 用户满意度 > 4.0/5.0- 月度活跃订阅用户增长 > 10%通过以上完善计划的系统性实施，将为AI多图融合创作平台构建一个完整、稳定、用户友好的订阅系统。
AI辅助创作，多种专业模板，深度分析，高质量内容生成。从观点提取到深度思考，FishAI为您提供全方位的创作支持。新版本引入自定义参数，让您的创作更加个性化和精准。
鱼阅，AI 时代的下一个智能信息助手，助你摆脱信息焦虑