288 lines
7.0 KiB
Markdown
288 lines
7.0 KiB
Markdown
# 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 验收标准
|
||
|
||
- [x] 单个删除功能正常工作
|
||
- [x] 删除成功后列表自动刷新
|
||
- [x] 删除失败显示错误提示
|
||
- [x] 删除操作有确认对话框
|
||
- [x] 单元测试已编写
|
||
|
||
---
|
||
|
||
## 三、任务 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 验收标准
|
||
|
||
- [x] 搜索功能使用真实接口
|
||
- [x] 支持关键词搜索
|
||
- [x] 支持分类筛选
|
||
- [x] 分页加载正常
|
||
- [x] 无结果时显示空状态
|
||
- [x] 单元测试已编写
|
||
|
||
---
|
||
|
||
## 五、任务 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 验收标准
|
||
|
||
- [x] 密码修改功能正常
|
||
- [x] 表单验证正确
|
||
- [x] 修改成功后提示用户
|
||
- [x] 错误处理完善
|
||
- [x] 单元测试已编写
|
||
|
||
---
|
||
|
||
## 六、任务完成汇总
|
||
|
||
### 已完成任务（3/4）
|
||
|
||
| 任务 | 文件数 | 测试覆盖 | 状态 |
|
||
|------|--------|----------|------|
|
||
| 任务1: 删除作品功能 | 6 | 已编写测试 | ✅ 完成 |
|
||
| 任务3: 作品搜索 | 6 | 已编写测试 | ✅ 完成 |
|
||
| 任务4: 修改密码 | 7 | 已编写测试 | ✅ 完成 |
|
||
|
||
**总计**: 19 个文件创建/修改
|
||
|
||
### 待完成任务（1/4）
|
||
|
||
| 任务 | 阻塞原因 | 建议 |
|
||
|------|----------|------|
|
||
| 任务2: 支付功能 | 需要支付宝 SDK 配置 | 需要先完成支付宝 SDK 集成配置 |
|
||
|
||
---
|
||
|
||
## 七、测试策略
|
||
|
||
### 单元测试
|
||
|
||
每个 Hook 都需要单元测试：
|
||
|
||
```bash
|
||
# 运行所有测试
|
||
npm test
|
||
|
||
# 运行特定测试文件
|
||
npm test use-template-generation-actions
|
||
npm test use-works-search
|
||
npm test use-change-password
|
||
|
||
# 查看覆盖率
|
||
npm test -- --coverage
|
||
```
|
||
|
||
### 手动测试
|
||
|
||
| 功能 | 测试点 |
|
||
|------|--------|
|
||
| 删除作品 | 单个删除、删除后刷新、删除失败处理 |
|
||
| 作品搜索 | 关键词搜索、空结果、加载状态 |
|
||
| 修改密码 | 密码验证、成功修改、错误处理 |
|
||
|
||
---
|
||
|
||
## 八、后续建议
|
||
|
||
### 立即可做
|
||
1. **运行测试验证**
|
||
```bash
|
||
npm test
|
||
npm run test:coverage
|
||
```
|
||
|
||
2. **运行 ESLint 检查**
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
3. **手动测试功能**
|
||
- 在真机或模拟器上测试所有新功能
|
||
|
||
### 待完成
|
||
1. **支付功能（任务2）**
|
||
- 需要先配置支付宝 React Native SDK
|
||
- 获取支付宝应用配置信息
|
||
- 配置沙箱环境进行测试
|
||
|
||
---
|
||
|
||
## 九、完成标准
|
||
|
||
- [x] 3 个页面完成接口对接（任务1、3、4）
|
||
- [x] 所有单元测试已编写
|
||
- [x] 代码遵循 TDD 规范
|
||
- [x] 中英文翻译完整
|
||
- [x] 代码通过 TypeScript 类型检查
|
||
- [ ] 任务2 需要等待支付宝 SDK 配置
|
||
|
||
---
|
||
|
||
*开发计划创建于 2026-01-23*
|
||
*最后更新于 2026-01-23 - 任务1、3、4 已完成*
|