bw-mini-app/TODO.md

小程序重构开发计划

项目概述

将现有的图生图/图生视频小程序重构为模板卡片式首页 + 历史记录页面的架构。

开发阶段规划

阶段一：项目架构重构 (优先级：高)

1.1 导航结构调整

• 修改 app.config.ts 添加tabBar配置
  • 首页 (pages/home/index)
  • 历史记录 (pages/history/index)
• 移除原有的 result 页面跳转逻辑
• 更新页面路由配置

1.2 页面文件结构创建

src/pages/
├── home/                    # 新首页 (模板卡片)
│   ├── index.tsx
│   ├── index.config.ts
│   └── index.css
├── history/                 # 历史记录页面
│   ├── index.tsx
│   ├── index.config.ts
│   └── index.css
├── generate/                # 生成处理页面 (原index页面重构)
│   ├── index.tsx
│   ├── index.config.ts
│   └── index.css
└── result/                  # 结果页面 (保留并优化)
    ├── index.tsx
    ├── index.config.ts
    └── index.css

阶段二：数据存储和状态管理 (优先级：高)

2.1 本地存储设计

• 设计历史记录数据结构

interface HistoryRecord {
  id: string
  type: 'image-to-image' | 'image-to-video'
  templateName: string
  inputImage: string
  outputResult: string | string[]
  status: 'generating' | 'completed' | 'failed'
  createTime: string
  updateTime: string
}

2.2 状态管理

• 创建 src/store/ 目录
• 实现 Redux 状态管理（已从 Zustand 迁移到 Redux Toolkit）
  • src/reducers/history.ts - 历史记录管理
  • src/reducers/template.ts - 模板配置管理
  • src/actions/ - Action creators
  • src/selectors/ - 选择器
  • src/hooks/redux.ts - 类型化 hooks
• 添加数据持久化功能（通过 Taro Storage API）

阶段三：模板卡片首页开发 (优先级：高)

3.1 模板配置和数据

• 设计8个模板的配置数据

interface Template {
  id: string
  name: string
  description: string
  type: 'image-to-image' | 'image-to-video'
  thumbnail: string
  category: string
}

• 添加模板缩略图资源
• 创建模板配置文件 src/config/templates.ts

3.2 首页组件开发

• 创建模板卡片组件 src/components/TemplateCard/
  • 支持2列网格布局
  • 卡片hover效果
  • 模板名称和描述显示
• 实现首页布局 src/pages/home/index.tsx
  • 2列4行网格布局
  • 模板卡片点击跳转到生成页面
• 添加首页样式 src/pages/home/index.css

阶段四：生成页面重构 (优先级：中)

4.1 原index页面重构

• 将 src/pages/index/ 重命名为 src/pages/generate/
• 修改生成页面接收模板参数

// 从路由参数获取模板信息
interface GeneratePageParams {
  templateId: string
  templateName: string
  templateType: 'image-to-image' | 'image-to-video'
}

4.2 生成流程优化

• 添加模板信息显示
• 优化上传和生成流程
• 添加生成进度到历史记录
• 生成完成后更新历史记录状态

阶段五：历史记录页面开发 (优先级：中)

5.1 历史记录页面布局

• 创建历史记录列表组件 src/components/HistoryList/
• 实现记录卡片组件 src/components/HistoryCard/
  • 显示模板名称、生成时间
  • 生成状态指示器
  • 结果预览图

5.2 历史记录功能

• 实现历史记录分页加载
• 添加筛选功能 (按类型、状态)
• 添加删除记录功能
• 点击记录查看详细结果

阶段六：组件优化和重构 (优先级：中)

6.1 现有组件适配

• 优化 UploadButton 组件
  • 适配不同模板类型
  • 添加模板上下文信息
• 优化 LoadingOverlay 组件
  • 显示当前模板信息
  • 显示生成进度百分比
• 优化 ErrorOverlay 组件
  • 提供重试和返回首页选项

6.2 新增通用组件

• 创建 NavigationBar 组件 (如需要自定义导航)
• 创建 StatusBadge 组件 (状态指示器)
• 创建 ImagePreview 组件 (图片预览)

阶段七：用户体验优化 (优先级：低)

7.1 交互优化

• 添加页面间过渡动画
• 添加加载骨架屏
• 优化触摸反馈
• 添加操作确认对话框

7.2 性能优化

• 实现图片懒加载
• 添加历史记录虚拟滚动
• 优化打包体积
• 添加缓存策略

阶段八：测试和文档 (优先级：低)

8.1 单元测试 (遵循TDD原则)

• 为历史记录Store添加测试
• 为模板配置添加测试
• 为通用工具函数添加测试
• 为核心业务逻辑添加测试

8.2 集成测试

• 测试页面跳转流程
• 测试数据持久化
• 测试错误处理

技术实现细节

路由配置更新

// app.config.ts
export default defineAppConfig({
  pages: [
    'pages/home/index',      // 新首页
    'pages/generate/index',  // 生成页面
    'pages/result/index',    // 结果页面
    'pages/history/index'    // 历史记录页面
  ],
  tabBar: {
    list: [
      {
        pagePath: 'pages/home/index',
        text: '首页',
        iconPath: 'assets/icons/home.png',
        selectedIconPath: 'assets/icons/home-active.png'
      },
      {
        pagePath: 'pages/history/index', 
        text: '历史记录',
        iconPath: 'assets/icons/history.png',
        selectedIconPath: 'assets/icons/history-active.png'
      }
    ]
  },
  // ...其他配置
})

数据流设计

首页模板选择 → 生成页面(携带模板信息) → 生成过程记录到历史 → 完成后更新历史状态 → 历史页面展示

开发优先级说明

高优先级 (第1-3周)

• 导航结构和基础页面创建
• 数据存储结构设计
• 模板卡片首页实现

中优先级 (第4-6周)

• 生成页面重构
• 历史记录页面开发
• 组件优化

低优先级 (第7-8周)

• 用户体验优化
• 性能优化
• 测试覆盖

里程碑检查点

1. Week 2: 基础页面结构和导航完成
2. Week 4: 模板首页和基础功能完成
3. Week 6: 历史记录功能完整实现
4. Week 8: 完整功能测试和优化完成

注意事项

1. 遵循TDD开发模式 - 先写测试，后写实现
2. 保持代码简洁 - 每个文件不超过500行
3. 类型安全 - 严格使用TypeScript类型定义
4. 平台兼容 - 确保微信小程序、H5、APP多端兼容
5. 用户体验 - 保持流畅的交互体验
6. 错误处理 - 完善的错误边界和用户反馈

依赖和资源需求

• 图标资源: tabBar图标、模板缩略图
• 样式主题: 统一的设计风格和颜色规范
• API适配: 确保现有SDK接口兼容新的页面流程
• 存储方案: 本地存储和可能的云端同步需求