bowong
/
expo-popcore-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
expo-popcore-app/api_integration_development...

7.0 KiB
Raw Blame History

API 接口对接开发计划

创建日期: 2026-01-23 基于: api_integration_report.md 分析结果 最后更新: 2026-01-23 (任务完成汇总)

一、开发总览

开发范围

任务 优先级 预估复杂度 状态
1. 生成记录 - 删除作品功能 高 中 已完成 ✅
2. 会员页面 - 支付功能 高 高 待开发（需要支付宝 SDK 配置）
3. 作品搜索 - 真实接口对接 中 中 已完成 ✅
4. 修改密码 - 用户密码修改 中 低 已完成 ✅

开发原则

  1. TDD 驱动：每个功能先写测试，后写实现
  2. 分步实施：按优先级逐步完成，每步完成后进行测试验证
  3. 可回滚：每个功能独立开发，便于单独回滚
  4. 类型安全：充分利用 TypeScript 和 SDK 的类型定义

二、任务 1：生成记录 - 删除作品功能 ✅ 已完成

1.1 任务概述

属性 值
文件 app/generationRecord.tsx
SDK 接口 TemplateGenerationController.delete
优先级 高
复杂度 中
状态 已完成 ✅

1.2 完成情况

创建的文件

  • hooks/use-template-generation-actions.ts - 删除作品 Hook
  • tests/hooks/use-template-generation-actions.test.ts - 单元测试

修改的文件

  • app/generationRecord.tsx - 集成删除功能
  • hooks/index.ts - 导出新的 hooks
  • locales/zh-CN.json - 添加中文翻译
  • locales/en-US.json - 添加英文翻译

功能特性

  • ✅ 单个删除功能
  • ✅ 批量删除功能（可选）
  • ✅ 删除确认对话框
  • ✅ 删除成功后刷新列表
  • ✅ 删除失败显示错误提示
  • ✅ 删除中加载状态

1.3 验收标准

  • 单个删除功能正常工作
  • 删除成功后列表自动刷新
  • 删除失败显示错误提示
  • 删除操作有确认对话框
  • 单元测试已编写

三、任务 2：会员页面 - 支付功能（待开发）

2.1 任务概述

属性 值
文件 app/membership.tsx
SDK 接口 AlipayController.appPay, preRecharge
优先级 高
复杂度 高
状态 待开发（需要支付宝 SDK 配置）

2.2 前置依赖

  1. 安装支付宝 React Native SDK
  2. 配置支付宝应用信息
  3. 后端支付回调已配置

2.3 实现步骤

步骤 1：创建支付 Hook

文件: hooks/use-alipay.ts

步骤 2：创建会员套餐 Hook

文件: hooks/use-membership.ts

步骤 3：编写单元测试

文件: tests/hooks/use-alipay.test.ts

步骤 4：更新会员页面

文件: app/membership.tsx

2.4 验收标准

  • 支付宝 SDK 正确集成
  • 能成功调起支付宝支付
  • 支付成功后会员状态更新
  • 支付失败有错误提示
  • 支付回调正确处理
  • 单元测试覆盖核心逻辑

四、任务 3：作品搜索 - 真实接口对接 ✅ 已完成

3.1 任务概述

属性 值
文件 app/searchWorks.tsx, app/searchWorksResults.tsx
SDK 接口 TemplateGenerationController.list
优先级 中
复杂度 中
状态 已完成 ✅

3.2 完成情况

创建的文件

  • hooks/use-works-search.ts - 作品搜索 Hook
  • tests/hooks/use-works-search.test.ts - 单元测试

修改的文件

  • app/searchWorksResults.tsx - 替换为真实接口
  • hooks/index.ts - 导出新的 hook
  • locales/zh-CN.json - 添加中文翻译
  • locales/en-US.json - 添加英文翻译
  • jest.setup.js - 添加必要的 mock

功能特性

  • ✅ 使用真实接口替换模拟数据
  • ✅ 支持关键词搜索
  • ✅ 支持分类筛选
  • ✅ 支持分页加载
  • ✅ 加载状态显示
  • ✅ 错误状态显示
  • ✅ 空结果状态显示

3.3 验收标准

  • 搜索功能使用真实接口
  • 支持关键词搜索
  • 支持分类筛选
  • 分页加载正常
  • 无结果时显示空状态
  • 单元测试已编写

五、任务 4：修改密码 - 用户密码修改 ✅ 已完成

4.1 任务概述

属性 值
文件 app/changePassword.tsx
SDK 接口 Better Auth changePassword
优先级 中
复杂度 低
状态 已完成 ✅

4.2 完成情况

创建的文件

  • hooks/use-change-password.ts - 密码修改 Hook
  • tests/hooks/use-change-password.test.ts - 单元测试

修改的文件

  • app/changePassword.tsx - 集成密码修改功能
  • lib/auth.ts - 导出 changePassword 方法
  • hooks/index.ts - 导出新的 hook
  • locales/zh-CN.json - 添加中文翻译
  • locales/en-US.json - 添加英文翻译

功能特性

  • ✅ 使用 Better Auth 的 changePassword API
  • ✅ 客户端表单验证（旧密码非空、新密码长度、确认密码匹配等）
  • ✅ 加载状态显示
  • ✅ 成功后提示用户（1.5秒后自动返回）
  • ✅ 错误处理完善

4.3 验收标准

  • 密码修改功能正常
  • 表单验证正确
  • 修改成功后提示用户
  • 错误处理完善
  • 单元测试已编写

六、任务完成汇总

已完成任务（3/4）

任务 文件数 测试覆盖 状态
任务1: 删除作品功能 6 已编写测试 ✅ 完成
任务3: 作品搜索 6 已编写测试 ✅ 完成
任务4: 修改密码 7 已编写测试 ✅ 完成

总计: 19 个文件创建/修改

待完成任务（1/4）

任务 阻塞原因 建议
任务2: 支付功能 需要支付宝 SDK 配置 需要先完成支付宝 SDK 集成配置

七、测试策略

单元测试

每个 Hook 都需要单元测试：

# 运行所有测试
npm test

# 运行特定测试文件
npm test use-template-generation-actions
npm test use-works-search
npm test use-change-password

# 查看覆盖率
npm test -- --coverage

手动测试

功能 测试点
删除作品 单个删除、删除后刷新、删除失败处理
作品搜索 关键词搜索、空结果、加载状态
修改密码 密码验证、成功修改、错误处理

八、后续建议

立即可做

  1. 运行测试验证

    npm test
npm run test:coverage

  2. 运行 ESLint 检查

    npm run lint

  3. 手动测试功能

    • 在真机或模拟器上测试所有新功能

待完成

  1. 支付功能（任务2）
    • 需要先配置支付宝 React Native SDK
    • 获取支付宝应用配置信息
    • 配置沙箱环境进行测试

九、完成标准

  • 3 个页面完成接口对接（任务1、3、4）
  • 所有单元测试已编写
  • 代码遵循 TDD 规范
  • 中英文翻译完整
  • 代码通过 TypeScript 类型检查
  • 任务2 需要等待支付宝 SDK 配置

开发计划创建于 2026-01-23 最后更新于 2026-01-23 - 任务1、3、4 已完成