# 小程序重构开发计划

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

## 开发阶段规划

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

#### 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 本地存储设计
- [ ] 设计历史记录数据结构
```typescript
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 状态管理
- [x] 创建 `src/store/` 目录
- [x] 实现 Redux 状态管理（已从 Zustand 迁移到 Redux Toolkit）
  - [x] `src/reducers/history.ts` - 历史记录管理
  - [x] `src/reducers/template.ts` - 模板配置管理
  - [x] `src/actions/` - Action creators
  - [x] `src/selectors/` - 选择器
  - [x] `src/hooks/redux.ts` - 类型化 hooks
- [x] 添加数据持久化功能（通过 Taro Storage API）

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

#### 3.1 模板配置和数据
- [ ] 设计8个模板的配置数据
```typescript
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/`
- [ ] 修改生成页面接收模板参数
```typescript
// 从路由参数获取模板信息
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 集成测试
- [ ] 测试页面跳转流程
- [ ] 测试数据持久化
- [ ] 测试错误处理

## 技术实现细节

### 路由配置更新
```typescript
// 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接口兼容新的页面流程
- **存储方案**: 本地存储和可能的云端同步需求