# Jointo（jointo）开发计划文档

> **项目名称**：Jointo（jointo）  
> **项目域名**：https://www.jointo.ai  
> **文档版本**：v3.0  
> **创建日期**：2025-01-08  
> **更新日期**：2025-01-18  
> **当前状态**：阶段三进行中（前端交互逻辑 85% 完成）

## 📊 项目进度概览

| 模块     | 阶段             | 完成度 | 状态        |
| -------- | ---------------- | ------ | ----------- |
| **前端** | 阶段一：基础架构 | 100%   | ✅ 已完成   |
| **前端** | 阶段二：静态展示 | 90%    | ✅ 基本完成 |
| **前端** | 阶段三：交互逻辑 | 85%    | 🚧 进行中   |
| **前端** | 阶段四：AI 集成  | 30%    | ⏳ 部分完成 |
| **前端** | 阶段五：引导优化 | 20%    | ⏳ 部分完成 |
| **前端** | 阶段六：测试部署 | 0%     | ❌ 未开始   |
| **前端** | 阶段七：联调上线 | 0%     | ❌ 未开始   |
| **后端** | 基础架构         | 100%   | ✅ 已完成   |
| **后端** | 用户认证         | 100%   | ✅ 已完成   |
| **后端** | 文件夹管理       | 100%   | ✅ 已完成   |
| **后端** | 项目管理 API     | 0%     | ❌ 未开始   |
| **后端** | 分镜管理 API     | 0%     | ❌ 未开始   |
| **后端** | AI 服务集成      | 0%     | ❌ 未开始   |

---

## 目录

1. [开发阶段概览](#1-开发阶段概览)
2. [第一阶段：基础架构搭建](#2-第一阶段基础架构搭建)
3. [第二阶段：静态数据展示](#3-第二阶段静态数据展示)
4. [第三阶段：交互逻辑实现](#4-第三阶段交互逻辑实现)
5. [第四阶段：AI 功能集成](#5-第四阶段ai-功能集成)
6. [第五阶段：引导与优化](#6-第五阶段引导与优化)
7. [第六阶段：测试与部署](#7-第六阶段测试与部署)
8. [第七阶段：联调与上线](#8-第七阶段联调与上线)
9. [后端开发任务清单](#9-后端开发任务清单)
10. [里程碑与交付物](#10-里程碑与交付物)
11. [风险评估与应对](#11-风险评估与应对)
12. [任务清单总表](#12-任务清单总表)

---

## 1. 开发阶段概览

### 1.1 阶段划分

```
┌───────────────────────────────────────────────────────────────────────────────────────────┐
│                                开发时间线（9-10 周）                                        │
├─────────┬─────────┬─────────┬─────────┬─────────┬─────────┬─────────┬─────────┬───────────┤
│  第1周  │  第2周  │  第3周  │  第4周  │  第5周  │  第6周  │  第7周  │  第8周  │ 第9-10周  │
├─────────┴─────────┼─────────┴─────────┼─────────┴─────────┼─────────┴─────────┼───────────┤
│   阶段一+二       │      阶段三       │    阶段四+五       │     阶段六        │  阶段七   │
│ 前端：架构+静态   │ 前端：交互逻辑    │  前端：AI+优化     │  单元测试+E2E     │ 联调上线  │
│ 后端：架构+DB     │ 后端：核心API     │  后端：AI任务      │  集成测试         │ Bug修复   │
└───────────────────┴───────────────────┴───────────────────┴───────────────────┴───────────┘
```

### 1.2 阶段目标

| 阶段       | 名称         | 预计工期 | 核心目标                               | 并行任务                   |
| ---------- | ------------ | -------- | -------------------------------------- | -------------------------- |
| **阶段一** | 基础架构搭建 | 1 周     | 前端项目初始化、技术栈配置、组件库集成 | 后端项目初始化、数据库设计 |
| **阶段二** | 静态数据展示 | 1 周     | 所有 UI 组件开发、Mock 数据展示        | 后端数据库迁移、基础模型   |
| **阶段三** | 交互逻辑实现 | 2 周     | 状态管理、用户交互、数据流             | 后端核心 API 开发          |
| **阶段四** | AI 功能集成  | 1 周     | AI 生成接口对接、生成流程              | 后端 AI 异步任务实现       |
| **阶段五** | 引导与优化   | 1 周     | 新手引导、性能优化、错误处理           | 后端性能优化、缓存         |
| **阶段六** | 测试与部署   | 2 周     | 单元测试、E2E 测试、Bug 修复           | 集成测试、部署准备         |
| **阶段七** | 联调与上线   | 1-2 周   | 前后端联调、Mock 切换、生产部署        | 监控配置、上线验收         |

### 1.3 技术依赖与开发流程

```
                    ┌─────────────────────────────────────────┐
                    │            开发依赖关系图                │
                    └─────────────────────────────────────────┘

前端开发线：
  React项目 → UI组件 → 状态管理 → API Hooks → AI功能 → 优化 → 测试
      ↓          ↓          ↓           ↓         ↓
   Mock API ← Mock API ← Mock API ←  Mock API   │
                                                 │
                               第5周末联调节点 ─────┼─────→ 真实 API
                                                 │
后端开发线：                                       │
  FastAPI → DB设计 → 核心API → 文件存储 → AI任务 ────┘
```

**关键节点**：

- **第 5 周末**：Mock API 切换至真实后端 API
- **第 7-8 周**：前后端集成测试
- **第 9-10 周**：生产环境部署和验收

### 1.4 任务依赖关系

```
┌─────────────────────────────────────────────────────────────────────────┐
│                          关键路径分析                                     │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│  [项目初始化] ──→ [布局组件] ──→ [分镜组件] ──→ [分镜交互] ──→ [AI功能]  │
│       │              │              │              │              │     │
│       ↓              ↓              ↓              ↓              ↓     │
│  [样式系统]    [预览组件]    [分镜看板组件]   [分镜看板交互]    [测试]     │
│       │              │              │              │              │     │
│       ↓              ↓              ↓              ↓              ↓     │
│  [组件库]      [播放控制]    [右侧面板]     [资源管理]      [部署]     │
│                                                                         │
│  可并行开发：布局组件/预览组件/分镜看板组件可同时开发（无数据依赖）        │
│  串行依赖：分镜交互 → AI功能（需要分镜数据作为AI生成输入）               │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘
```

---

## 2. 第一阶段：基础架构搭建

### 2.1 目标

- 完成项目初始化和技术栈配置
- 搭建开发环境和工具链
- 集成 UI 组件库和样式系统
- 定义项目目录结构和代码规范

### 2.2 任务清单

#### 2.2.1 项目初始化

| #     | 任务                                             | 优先级 | 预计工时 | 状态   |
| ----- | ------------------------------------------------ | ------ | -------- | ------ |
| 1.1.1 | 使用 Vite 创建 React + TypeScript 项目           | P0     | 0.5h     | 待开始 |
| 1.1.2 | 配置 ESLint + Prettier                           | P0     | 1h       | 待开始 |
| 1.1.3 | 配置 Husky + lint-staged                         | P1     | 0.5h     | 待开始 |
| 1.1.4 | 配置路径别名 (tsconfig.json + vite.config.ts)    | P0     | 0.5h     | 待开始 |
| 1.1.5 | 创建目录结构                                     | P0     | 0.5h     | 待开始 |
| 1.1.6 | 配置环境变量 (.env.development, .env.production) | P0     | 0.5h     | 待开始 |

#### 2.2.2 样式系统

| #     | 任务                                        | 优先级 | 预计工时 | 状态   |
| ----- | ------------------------------------------- | ------ | -------- | ------ |
| 1.2.1 | 安装配置 Tailwind CSS                       | P0     | 0.5h     | 待开始 |
| 1.2.2 | 配置 tailwind.config.js（颜色、字体、动画） | P0     | 1h       | 待开始 |
| 1.2.3 | 创建 globals.css（CSS 变量、全局样式）      | P0     | 1h       | 待开始 |
| 1.2.4 | 配置深色主题变量                            | P0     | 0.5h     | 待开始 |
| 1.2.5 | 配置亮色主题变量                            | P0     | 0.5h     | 待开始 |
| 1.2.6 | 实现主题切换逻辑（防闪烁）                  | P0     | 1h       | 待开始 |

#### 2.2.3 组件库集成

| #     | 任务                                             | 优先级 | 预计工时 | 状态   |
| ----- | ------------------------------------------------ | ------ | -------- | ------ |
| 1.3.1 | 初始化 shadcn/ui                                 | P0     | 0.5h     | 待开始 |
| 1.3.2 | 安装基础组件（Button, Input, Select, Dialog...） | P0     | 1h       | 待开始 |
| 1.3.3 | 安装 lucide-react 图标库                         | P0     | 0.5h     | 待开始 |
| 1.3.4 | 创建 lib/utils.ts（cn 函数）                     | P0     | 0.5h     | 待开始 |

#### 2.2.4 核心依赖安装

| #     | 任务                                   | 优先级 | 预计工时 | 状态   |
| ----- | -------------------------------------- | ------ | -------- | ------ |
| 1.4.1 | 安装 React Router                      | P0     | 0.5h     | 待开始 |
| 1.4.2 | 安装 Zustand                           | P0     | 0.5h     | 待开始 |
| 1.4.3 | 安装 TanStack Query                    | P0     | 0.5h     | 待开始 |
| 1.4.4 | 安装 Axios                             | P0     | 0.5h     | 待开始 |
| 1.4.5 | 安装 React Hook Form + Zod             | P1     | 0.5h     | 待开始 |
| 1.4.6 | 安装 date-fns                          | P2     | 0.5h     | 待开始 |
| 1.4.7 | 安装 @dnd-kit/core + @dnd-kit/sortable | P1     | 0.5h     | 待开始 |
| 1.4.8 | 安装 react-i18next + i18next           | P0     | 0.5h     | 待开始 |

#### 2.2.5 基础配置

| #     | 任务                                 | 优先级 | 预计工时 | 状态   |
| ----- | ------------------------------------ | ------ | -------- | ------ |
| 1.5.1 | 配置 TanStack Query Provider         | P0     | 0.5h     | 待开始 |
| 1.5.2 | 配置 Router                          | P0     | 1h       | 待开始 |
| 1.5.3 | 创建基础 Zustand Stores              | P0     | 1h       | 待开始 |
| 1.5.4 | 配置 API Client (Axios)              | P0     | 1h       | 待开始 |
| 1.5.5 | 创建类型定义文件                     | P0     | 2h       | 待开始 |
| 1.5.6 | 配置 i18n（语言文件结构、Provider）  | P0     | 2h       | 待开始 |
| 1.5.7 | 配置 ThemeProvider（主题切换）       | P0     | 1h       | 待开始 |
| 1.5.8 | 创建 settingsStore（语言、主题状态） | P0     | 1h       | 待开始 |

### 2.3 交付物

- [x] 可运行的项目骨架
- [x] 配置完整的开发环境
- [x] 基础组件库可用
- [x] 路由配置完成
- [x] 状态管理配置完成

### 2.4 验收标准

| 检查项     | 验收条件                                | 验证方法         |
| ---------- | --------------------------------------- | ---------------- |
| 开发服务器 | `npm run dev` 可正常启动，无报错        | 命令行执行       |
| 生产构建   | `npm run build` 可正常构建，无报错      | 命令行执行       |
| 代码检查   | `npm run lint` 0 个 error，warning < 10 | 命令行执行       |
| 路由跳转   | 所有配置路由可正常访问                  | 手动测试         |
| UI 组件    | shadcn/ui 组件可正常渲染                | 打开组件 Demo 页 |
| 主题切换   | 深色/亮色主题切换正常，无闪烁           | 手动测试         |
| 语言切换   | 中英文切换正常，文本更新                | 手动测试         |
| 热更新     | 修改代码后 HMR 生效                     | 修改代码观察     |

---

## 3. 第二阶段：静态数据展示

### 3.1 目标

- 完成所有 UI 组件开发
- 使用 Mock 数据展示界面
- 实现响应式布局

### 3.2 任务清单

#### 3.2.1 布局组件

| #     | 任务                                         | 优先级 | 预计工时 | 状态   |
| ----- | -------------------------------------------- | ------ | -------- | ------ |
| 2.1.1 | 开发 AppLayout 组件                          | P0     | 2h       | 待开始 |
| 2.1.2 | 开发 TopBar 组件                             | P0     | 3h       | 待开始 |
| 2.1.3 | 开发 LeftSidebar 组件                        | P0     | 2h       | 待开始 |
| 2.1.4 | 开发 RightSidebar 组件                       | P0     | 2h       | 待开始 |
| 2.1.5 | 开发 CenterArea 组件（分镜列表+预览+AI输入） | P0     | 2h       | 待开始 |
| 2.1.6 | 实现侧边栏折叠/展开动画                      | P1     | 1h       | 待开始 |

#### 3.2.2 分镜面板组件

| #     | 任务                                    | 优先级 | 预计工时 | 状态   |
| ----- | --------------------------------------- | ------ | -------- | ------ |
| 2.2.1 | 开发 StoryboardPanel 组件               | P0     | 3h       | 待开始 |
| 2.2.2 | 开发 StoryboardItem 组件                | P0     | 2h       | 待开始 |
| 2.2.3 | 开发 StoryboardThumbnail 组件（折叠态） | P1     | 1h       | 待开始 |
| 2.2.4 | 开发 StoryboardEditor 组件              | P1     | 2h       | 待开始 |
| 2.2.5 | 使用 Mock 数据渲染分镜列表              | P0     | 1h       | 待开始 |

#### 3.2.3 预览面板组件

| #     | 任务                       | 优先级 | 预计工时 | 状态   |
| ----- | -------------------------- | ------ | -------- | ------ |
| 2.3.1 | 开发 PreviewPanel 组件     | P0     | 2h       | 待开始 |
| 2.3.2 | 开发 VideoPlayer 组件      | P0     | 3h       | 待开始 |
| 2.3.3 | 开发 PlaybackControls 组件 | P0     | 2h       | 待开始 |
| 2.3.4 | 开发 VolumeControl 组件    | P1     | 1h       | 待开始 |
| 2.3.5 | 实现视频预览空状态         | P1     | 0.5h     | 待开始 |

#### 3.2.4 分镜看板组件（核心复杂组件）

| #     | 任务                    | 优先级 | 预计工时 | 状态   | 说明                       |
| ----- | ----------------------- | ------ | -------- | ------ | -------------------------- |
| 2.4.1 | 开发 TimelinePanel 组件 | P0     | **4h**   | 待开始 | 分镜看板容器，包含缩放、滚动 |
| 2.4.2 | 开发 TimelineTrack 组件 | P0     | **3h**   | 待开始 | 单轨道组件，含轨道控制     |
| 2.4.3 | 开发 TimelineItem 组件  | P0     | **3h**   | 待开始 | 时间块组件，支持拖拽       |
| 2.4.4 | 开发 TimeRuler 组件     | P1     | **3h**   | 待开始 | 时间刻度尺，支持缩放       |
| 2.4.5 | 开发 TrackLabel 组件    | P1     | 1h       | 待开始 | 轨道标签                   |
| 2.4.6 | 开发 Playhead 组件      | P0     | **2h**   | 待开始 | 播放头，可拖拽定位         |
| 2.4.7 | 实现分镜看板折叠/展开     | P1     | **2h**   | 待开始 | 面板动画                   |
| 2.4.8 | 使用 Mock 数据渲染轨道  | P0     | 2h       | 待开始 | 多轨道数据渲染             |

#### 3.2.5 AI 面板组件

| #     | 任务                        | 优先级 | 预计工时 | 状态   |
| ----- | --------------------------- | ------ | -------- | ------ |
| 2.5.1 | 开发 AIPromptPanel 组件     | P0     | 3h       | 待开始 |
| 2.5.2 | 开发 AIGenerateForm 组件    | P1     | 2h       | 待开始 |
| 2.5.3 | 开发 AIGeneratePreview 组件 | P1     | 2h       | 待开始 |
| 2.5.4 | 实现生成类型切换 UI         | P1     | 1h       | 待开始 |

#### 3.2.6 右侧功能面板

| #     | 任务                       | 优先级 | 预计工时 | 状态   |
| ----- | -------------------------- | ------ | -------- | ------ |
| 2.6.1 | 开发 RightPanelTabs 组件   | P0     | 1h       | 待开始 |
| 2.6.2 | 开发 ResourcePanel 组件    | P0     | 3h       | 待开始 |
| 2.6.3 | 开发 ResourceCard 组件     | P0     | 1h       | 待开始 |
| 2.6.4 | 开发 ResourceUploader 组件 | P1     | 2h       | 待开始 |
| 2.6.5 | 开发 VideoPanel 组件       | P1     | 2h       | 待开始 |
| 2.6.6 | 开发 SoundPanel 组件       | P1     | 2h       | 待开始 |
| 2.6.7 | 开发 SubtitlePanel 组件    | P1     | 2h       | 待开始 |
| 2.6.8 | 开发 VoicePanel 组件       | P1     | 2h       | 待开始 |
| 2.6.9 | 开发 SettingsPanel 组件    | P1     | 2h       | 待开始 |

#### 3.2.7 通用组件

| #     | 任务                                   | 优先级 | 预计工时 | 状态   |
| ----- | -------------------------------------- | ------ | -------- | ------ |
| 2.7.1 | 开发 LoadingSpinner 组件               | P0     | 0.5h     | 待开始 |
| 2.7.2 | 开发 EmptyState 组件                   | P0     | 1h       | 待开始 |
| 2.7.3 | 开发 ErrorBoundary 组件                | P0     | 1h       | 待开始 |
| 2.7.4 | 开发 Skeleton 组件                     | P1     | 1h       | 待开始 |
| 2.7.5 | 封装 Tooltip 组件                      | P1     | 0.5h     | 待开始 |
| 2.7.6 | 开发 ThemeToggle 组件（主题切换）      | P0     | 1h       | 待开始 |
| 2.7.7 | 开发 LanguageSelector 组件（语言切换） | P0     | 1h       | 待开始 |

#### 3.2.8 弹窗组件

| #     | 任务                         | 优先级 | 预计工时 | 状态   |
| ----- | ---------------------------- | ------ | -------- | ------ |
| 2.8.1 | 开发 CreateProjectModal 组件 | P0     | 2h       | 待开始 |
| 2.8.2 | 开发 ExportModal 组件        | P1     | 2h       | 待开始 |
| 2.8.3 | 开发 ConfirmDialog 组件      | P1     | 1h       | 待开始 |

#### 3.2.9 Mock 数据

| #     | 任务                 | 优先级 | 预计工时 | 状态   |
| ----- | -------------------- | ------ | -------- | ------ |
| 2.9.1 | 创建项目 Mock 数据   | P0     | 1h       | 待开始 |
| 2.9.2 | 创建分镜 Mock 数据   | P0     | 1h       | 待开始 |
| 2.9.3 | 创建资源 Mock 数据   | P0     | 1h       | 待开始 |
| 2.9.4 | 创建分镜看板 Mock 数据 | P0     | 1h       | 待开始 |
| 2.9.5 | 创建 Mock API 服务   | P0     | 2h       | 待开始 |

#### 3.2.10 国际化（i18n）

| #      | 任务                          | 优先级 | 预计工时 | 状态   | 说明                                   |
| ------ | ----------------------------- | ------ | -------- | ------ | -------------------------------------- |
| 2.10.1 | 创建简体中文语言文件（zh-CN） | P0     | **3h**   | 待开始 | 包含 common/editor/settings 等命名空间 |
| 2.10.2 | 创建英文语言文件（en-US）     | P0     | **3h**   | 待开始 | 需完整翻译，注意术语一致性             |
| 2.10.3 | 创建繁体中文语言文件（zh-TW） | P1     | **2h**   | 待开始 | 可基于 zh-CN 转换                      |
| 2.10.4 | 布局组件接入 i18n             | P0     | **2h**   | 待开始 | TopBar/Sidebar 等                      |
| 2.10.5 | 分镜组件接入 i18n             | P0     | **2h**   | 待开始 | StoryboardPanel 等                     |
| 2.10.6 | 分镜看板组件接入 i18n           | P0     | **2h**   | 待开始 | TimelinePanel/轨道标签等               |
| 2.10.7 | AI 面板组件接入 i18n          | P0     | **2h**   | 待开始 | AI 提示词、生成按钮等                  |
| 2.10.8 | 弹窗/通用组件接入 i18n        | P0     | **2h**   | 待开始 | Modal/Toast/Error 等                   |
| 2.10.9 | 验证所有文本多语言显示正确    | P0     | **3h**   | 待开始 | 切换语言检查 UI 显示                   |

### 3.3 交付物

- [x] 完整的 UI 界面
- [x] 所有组件开发完成
- [x] Mock 数据展示正常
- [x] 响应式布局适配

### 3.4 验收标准

| 检查项     | 验收条件                       | 验证方法       |
| ---------- | ------------------------------ | -------------- |
| 设计还原度 | UI 还原度 > 90%（对照 Figma）  | 截图对比       |
| 布局适配   | 1280px-1920px 分辨率正常显示   | 浏览器调试工具 |
| Mock 数据  | 项目/分镜/资源列表正确渲染     | 检查页面数据   |
| 侧边栏     | 左右侧边栏折叠/展开动画流畅    | 手动测试       |
| 分镜看板     | 轨道正确显示，刻度清晰         | 手动测试       |
| 组件交互   | hover/active/disabled 状态正确 | 手动测试       |
| UI Bug     | 0 个 P0 级 UI Bug，P1 < 5 个   | 走查记录       |
| 多语言     | 所有文本使用 t 函数，无硬编码  | 代码审查       |

---

## 4. 第三阶段：交互逻辑实现

### 4.1 目标

- 实现完整的用户交互逻辑
- 完成状态管理和数据流
- 实现拖拽排序功能
- 对接 Mock API

### 4.2 任务清单

#### 4.2.1 状态管理完善

| #     | 任务                            | 优先级 | 预计工时 | 状态   |
| ----- | ------------------------------- | ------ | -------- | ------ |
| 3.1.1 | 完善 appStore（用户、项目状态） | P0     | 2h       | 待开始 |
| 3.1.2 | 完善 editorStore（编辑器状态）  | P0     | 3h       | 待开始 |
| 3.1.3 | 完善 uiStore（UI 状态）         | P0     | 2h       | 待开始 |
| 3.1.4 | 添加状态持久化（localStorage）  | P1     | 1h       | 待开始 |
| 3.1.5 | 配置 Zustand devtools           | P2     | 0.5h     | 待开始 |

#### 4.2.2 API Hooks 开发

| #     | 任务                     | 优先级 | 预计工时 | 状态   |
| ----- | ------------------------ | ------ | -------- | ------ |
| 3.2.1 | 开发 useProjects Hook    | P0     | 2h       | 待开始 |
| 3.2.2 | 开发 useStoryboards Hook | P0     | 2h       | 待开始 |
| 3.2.3 | 开发 useResources Hook   | P0     | 2h       | 待开始 |
| 3.2.4 | 开发 useTimeline Hook    | P1     | 2h       | 待开始 |
| 3.2.5 | 开发 useAIGenerate Hook  | P1     | 2h       | 待开始 |
| 3.2.6 | 实现乐观更新             | P1     | 2h       | 待开始 |
| 3.2.7 | 实现缓存失效策略         | P1     | 1h       | 待开始 |

#### 4.2.3 分镜交互

| #     | 任务             | 优先级 | 预计工时 | 状态   |
| ----- | ---------------- | ------ | -------- | ------ |
| 3.3.1 | 实现分镜选择     | P0     | 1h       | 待开始 |
| 3.3.2 | 实现分镜创建     | P0     | 2h       | 待开始 |
| 3.3.3 | 实现分镜编辑     | P0     | 2h       | 待开始 |
| 3.3.4 | 实现分镜删除     | P0     | 1h       | 待开始 |
| 3.3.5 | 实现分镜拖拽排序 | P0     | 3h       | 待开始 |
| 3.3.6 | 实现分镜复制     | P1     | 1h       | 待开始 |
| 3.3.7 | 实现分镜右键菜单 | P2     | 2h       | 待开始 |

#### 4.2.4 预览区交互

| #     | 任务              | 优先级 | 预计工时 | 状态   |
| ----- | ----------------- | ------ | -------- | ------ |
| 3.4.1 | 实现视频播放/暂停 | P0     | 1h       | 待开始 |
| 3.4.2 | 实现播放进度控制  | P0     | 2h       | 待开始 |
| 3.4.3 | 实现音量控制      | P1     | 1h       | 待开始 |
| 3.4.4 | 实现播放速度控制  | P2     | 1h       | 待开始 |
| 3.4.5 | 实现全屏播放      | P2     | 1h       | 待开始 |
| 3.4.6 | 实现预览区缩放    | P2     | 2h       | 待开始 |

#### 4.2.5 分镜看板交互（高复杂度）

| #     | 任务                   | 优先级 | 预计工时 | 状态   | 说明                     |
| ----- | ---------------------- | ------ | -------- | ------ | ------------------------ |
| 3.5.1 | 实现分镜看板缩放         | P0     | **3h**   | 待开始 | 支持鼠标滚轮/按钮缩放    |
| 3.5.2 | 实现分镜看板滚动同步     | P0     | **3h**   | 待开始 | 轨道与时间尺同步滚动     |
| 3.5.3 | 实现播放头拖拽         | P0     | **3h**   | 待开始 | 精准定位，实时更新时间码 |
| 3.5.4 | 实现时间块选择         | P0     | **3h**   | 待开始 | 单选/多选，Shift连选     |
| 3.5.5 | 实现时间块拖拽移动     | P0     | **4h**   | 待开始 | 使用 dnd-kit，碰撞检测   |
| 3.5.6 | 实现时间块拖拽调整时长 | P0     | **4h**   | 待开始 | 两端拖拽，最小时长限制   |
| 3.5.7 | 实现多选操作           | P1     | **3h**   | 待开始 | 框选、批量移动/删除      |
| 3.5.8 | 实现分镜看板吸附         | P2     | **3h**   | 待开始 | 吸附到分镜边界/其他块    |
| 3.5.9 | 实现分镜看板播放同步     | P0     | **2h**   | 待开始 | 播放时自动滚动到当前位置 |

#### 4.2.6 资源管理交互

| #     | 任务                 | 优先级 | 预计工时 | 状态   |
| ----- | -------------------- | ------ | -------- | ------ |
| 3.6.1 | 实现资源上传         | P0     | 3h       | 待开始 |
| 3.6.2 | 实现资源搜索过滤     | P0     | 2h       | 待开始 |
| 3.6.3 | 实现资源删除         | P1     | 1h       | 待开始 |
| 3.6.4 | 实现资源拖拽到分镜看板 | P1     | 3h       | 待开始 |
| 3.6.5 | 实现资源预览         | P1     | 2h       | 待开始 |

#### 4.2.7 右侧面板交互

| #     | 任务             | 优先级 | 预计工时 | 状态   |
| ----- | ---------------- | ------ | -------- | ------ |
| 3.7.1 | 实现 Tab 切换    | P0     | 0.5h     | 待开始 |
| 3.7.2 | 实现视频素材管理 | P1     | 2h       | 待开始 |
| 3.7.3 | 实现音效素材管理 | P1     | 2h       | 待开始 |
| 3.7.4 | 实现字幕编辑     | P1     | 3h       | 待开始 |
| 3.7.5 | 实现配音管理     | P1     | 2h       | 待开始 |
| 3.7.6 | 实现项目设置保存 | P1     | 2h       | 待开始 |

#### 4.2.8 键盘快捷键

| #     | 任务                           | 优先级 | 预计工时 | 状态   |
| ----- | ------------------------------ | ------ | -------- | ------ |
| 3.8.1 | 实现播放/暂停快捷键（空格）    | P1     | 0.5h     | 待开始 |
| 3.8.2 | 实现撤销/重做快捷键（Cmd+Z/Y） | P1     | 2h       | 待开始 |
| 3.8.3 | 实现删除快捷键（Delete）       | P1     | 0.5h     | 待开始 |
| 3.8.4 | 实现全选快捷键（Cmd+A）        | P2     | 0.5h     | 待开始 |
| 3.8.5 | 实现复制粘贴快捷键             | P2     | 1h       | 待开始 |
| 3.8.6 | 开发 useKeyboardShortcuts Hook | P1     | 2h       | 待开始 |

### 4.3 交付物

- [x] 完整的交互逻辑
- [x] 状态管理运行正常
- [x] 拖拽功能正常
- [x] API 对接完成

### 4.4 验收标准

| 检查项     | 验收条件                             | 验证方法     |
| ---------- | ------------------------------------ | ------------ |
| 分镜 CRUD  | 创建/编辑/删除/复制分镜正常          | 功能测试     |
| 分镜排序   | 拖拽排序流畅，顺序正确保存           | 手动测试     |
| 播放控制   | 播放/暂停/上下帧切换正常             | 手动测试     |
| 分镜看板缩放 | 缩放响应 < 50ms，刻度正确            | 性能测试     |
| 时间块拖拽 | 拖拽移动流畅，位置正确更新           | 手动测试     |
| 状态同步   | 分镜选择后，预览/资源/分镜看板同步更新 | 手动测试     |
| 乐观更新   | API 调用时 UI 即时响应               | 网络模拟测试 |
| 拖拽帧率   | 拖拽操作 > 30fps                     | 性能测试     |

---

## 5. 第四阶段：AI 功能集成

### 5.1 目标

- 对接 AI 生成服务
- 实现 AI 图片/视频生成流程
- 处理异步任务状态

### 5.2 任务清单

#### 5.2.1 AI 生成 API 对接

| #     | 任务                  | 优先级 | 预计工时 | 状态   |
| ----- | --------------------- | ------ | -------- | ------ |
| 4.1.1 | 创建 AI API 服务模块  | P0     | 2h       | 待开始 |
| 4.1.2 | 实现图片生成 API 调用 | P0     | 2h       | 待开始 |
| 4.1.3 | 实现视频生成 API 调用 | P0     | 2h       | 待开始 |
| 4.1.4 | 实现音效生成 API 调用 | P1     | 2h       | 待开始 |
| 4.1.5 | 实现配音生成 API 调用 | P1     | 2h       | 待开始 |
| 4.1.6 | 创建 Mock AI 响应     | P0     | 2h       | 待开始 |

#### 5.2.2 AI 生成流程

| #     | 任务                   | 优先级 | 预计工时 | 状态   |
| ----- | ---------------------- | ------ | -------- | ------ |
| 4.2.1 | 实现提示词输入与验证   | P0     | 1h       | 待开始 |
| 4.2.2 | 实现生成参数选择       | P0     | 2h       | 待开始 |
| 4.2.3 | 实现生成请求发送       | P0     | 1h       | 待开始 |
| 4.2.4 | 实现生成进度展示       | P0     | 2h       | 待开始 |
| 4.2.5 | 实现生成结果预览       | P0     | 2h       | 待开始 |
| 4.2.6 | 实现生成结果应用到分镜 | P0     | 2h       | 待开始 |
| 4.2.7 | 实现重新生成功能       | P1     | 1h       | 待开始 |

#### 5.2.3 异步任务管理

| #     | 任务             | 优先级 | 预计工时 | 状态   |
| ----- | ---------------- | ------ | -------- | ------ |
| 4.3.1 | 实现任务队列管理 | P0     | 2h       | 待开始 |
| 4.3.2 | 实现任务状态轮询 | P0     | 2h       | 待开始 |
| 4.3.3 | 实现任务进度条   | P0     | 1h       | 待开始 |
| 4.3.4 | 实现任务取消     | P1     | 1h       | 待开始 |
| 4.3.5 | 实现任务失败重试 | P1     | 1h       | 待开始 |
| 4.3.6 | 实现任务历史记录 | P2     | 2h       | 待开始 |

#### 5.2.4 AI 功能 UI

| #     | 任务                    | 优先级 | 预计工时 | 状态   |
| ----- | ----------------------- | ------ | -------- | ------ |
| 4.4.1 | 优化 AIPromptPanel 交互 | P0     | 2h       | 待开始 |
| 4.4.2 | 添加生成中 Loading 状态 | P0     | 1h       | 待开始 |
| 4.4.3 | 添加生成失败提示        | P0     | 1h       | 待开始 |
| 4.4.4 | 添加生成历史侧边栏      | P2     | 3h       | 待开始 |
| 4.4.5 | 优化提示词输入体验      | P1     | 2h       | 待开始 |

### 5.3 交付物

- [x] AI 生成功能可用
- [x] 异步任务管理正常
- [x] 生成结果可应用

### 5.4 验收标准

| 检查项      | 验收条件                       | 验证方法     |
| ----------- | ------------------------------ | ------------ |
| AI 图片生成 | 提交 → 加载 → 结果展示流程完整 | 功能测试     |
| AI 视频生成 | 提交 → 轮询 → 结果展示流程完整 | 功能测试     |
| 进度展示    | 进度条实时更新，百分比准确     | 功能测试     |
| 结果应用    | 生成结果可应用到分镜/分镜看板    | 手动测试     |
| 任务取消    | 取消任务后状态正确更新         | 手动测试     |
| 错误处理    | 网络错误/超时有友好提示        | 模拟错误测试 |
| 重试机制    | 失败后可重新生成               | 手动测试     |
| 任务队列    | 多个任务可同时进行             | 并发测试     |

---

## 6. 第五阶段：引导与优化

### 6.1 目标

- 实现新用户引导流程
- 优化应用性能
- 完善错误处理
- 提升用户体验

### 6.2 任务清单

#### 6.2.1 新用户引导

| #     | 任务                        | 优先级 | 预计工时 | 状态   |
| ----- | --------------------------- | ------ | -------- | ------ |
| 5.1.1 | 开发 OnboardingOverlay 组件 | P1     | 3h       | 待开始 |
| 5.1.2 | 设计引导步骤内容            | P1     | 1h       | 待开始 |
| 5.1.3 | 实现引导高亮区域            | P1     | 2h       | 待开始 |
| 5.1.4 | 实现引导步骤切换            | P1     | 1h       | 待开始 |
| 5.1.5 | 实现跳过/完成逻辑           | P1     | 1h       | 待开始 |
| 5.1.6 | 添加引导完成状态持久化      | P1     | 0.5h     | 待开始 |

#### 6.2.2 Cookie 与隐私

| #     | 任务                    | 优先级 | 预计工时 | 状态   |
| ----- | ----------------------- | ------ | -------- | ------ |
| 5.2.1 | 开发 CookieConsent 组件 | P1     | 2h       | 待开始 |
| 5.2.2 | 实现 Cookie 偏好保存    | P1     | 1h       | 待开始 |

#### 6.2.3 性能优化

| #     | 任务                    | 优先级 | 预计工时 | 状态   |
| ----- | ----------------------- | ------ | -------- | ------ |
| 5.3.1 | 实现路由级代码分割      | P0     | 2h       | 待开始 |
| 5.3.2 | 实现组件懒加载          | P1     | 2h       | 待开始 |
| 5.3.3 | 实现分镜列表虚拟滚动    | P1     | 3h       | 待开始 |
| 5.3.4 | 实现分镜看板虚拟渲染      | P1     | 3h       | 待开始 |
| 5.3.5 | 优化图片懒加载          | P1     | 2h       | 待开始 |
| 5.3.6 | 添加组件 memo 优化      | P1     | 2h       | 待开始 |
| 5.3.7 | 优化 re-render 性能     | P1     | 2h       | 待开始 |
| 5.3.8 | 添加 Web Worker（可选） | P2     | 4h       | 待开始 |

#### 6.2.4 错误处理

| #     | 任务                  | 优先级 | 预计工时 | 状态   |
| ----- | --------------------- | ------ | -------- | ------ |
| 5.4.1 | 完善 ErrorBoundary    | P0     | 1h       | 待开始 |
| 5.4.2 | 实现全局错误捕获      | P0     | 1h       | 待开始 |
| 5.4.3 | 实现 API 错误统一处理 | P0     | 2h       | 待开始 |
| 5.4.4 | 添加错误日志上报      | P1     | 2h       | 待开始 |
| 5.4.5 | 实现友好错误提示      | P0     | 1h       | 待开始 |

#### 6.2.5 用户体验优化

| #     | 任务                  | 优先级 | 预计工时 | 状态   |
| ----- | --------------------- | ------ | -------- | ------ |
| 5.5.1 | 添加 Toast 通知组件   | P0     | 1h       | 待开始 |
| 5.5.2 | 添加确认对话框        | P0     | 1h       | 待开始 |
| 5.5.3 | 优化表单验证提示      | P1     | 1h       | 待开始 |
| 5.5.4 | 添加操作反馈动画      | P1     | 2h       | 待开始 |
| 5.5.5 | 优化 Loading 状态展示 | P1     | 1h       | 待开始 |
| 5.5.6 | 添加骨架屏            | P1     | 2h       | 待开始 |
| 5.5.7 | 优化空状态展示        | P1     | 1h       | 待开始 |

#### 6.2.6 可访问性

| #     | 任务             | 优先级 | 预计工时 | 状态   |
| ----- | ---------------- | ------ | -------- | ------ |
| 5.6.1 | 添加键盘导航支持 | P1     | 2h       | 待开始 |
| 5.6.2 | 添加 ARIA 标签   | P1     | 2h       | 待开始 |
| 5.6.3 | 添加焦点管理     | P1     | 2h       | 待开始 |
| 5.6.4 | 检查颜色对比度   | P2     | 1h       | 待开始 |

### 6.3 交付物

- [x] 新用户引导完成
- [x] 性能优化完成
- [x] 错误处理完善
- [x] 用户体验提升

### 6.4 验收标准

| 检查项      | 验收条件                      | 验证方法          |
| ----------- | ----------------------------- | ----------------- |
| 新手引导    | 4 步引导流程完整，可跳过/完成 | 功能测试          |
| 引导持久化  | 跳过后刷新不再显示            | localStorage 检查 |
| 首屏加载    | LCP < 2.5s，FCP < 1.8s        | Lighthouse 测试   |
| 交互响应    | INP < 200ms                   | Lighthouse 测试   |
| Bundle 大小 | JS < 500KB（gzipped）         | 构建分析          |
| 错误边界    | 组件错误不影响整体应用        | 模拟错误测试      |
| Toast 通知  | 操作成功/失败有正确提示       | 功能测试          |
| 滚动性能    | 长列表滚动 > 30fps            | 性能测试          |

---

## 7. 第六阶段：测试与部署

### 7.1 目标

- 完成单元测试和 E2E 测试
- 修复测试发现的 Bug
- 完成生产环境部署

### 7.2 任务清单

#### 7.2.1 单元测试

| #     | 任务             | 优先级 | 预计工时 | 状态   |
| ----- | ---------------- | ------ | -------- | ------ |
| 6.1.1 | 配置 Vitest      | P0     | 1h       | 待开始 |
| 6.1.2 | 编写工具函数测试 | P0     | 2h       | 待开始 |
| 6.1.3 | 编写 Hook 测试   | P0     | 3h       | 待开始 |
| 6.1.4 | 编写 Store 测试  | P1     | 2h       | 待开始 |
| 6.1.5 | 编写组件测试     | P1     | 4h       | 待开始 |
| 6.1.6 | 测试覆盖率 > 70% | P1     | 4h       | 待开始 |

#### 7.2.2 E2E 测试

| #     | 任务                 | 优先级 | 预计工时 | 状态   |
| ----- | -------------------- | ------ | -------- | ------ |
| 6.2.1 | 配置 Playwright      | P0     | 1h       | 待开始 |
| 6.2.2 | 编写分镜管理流程测试 | P0     | 2h       | 待开始 |
| 6.2.3 | 编写分镜看板操作测试   | P0     | 2h       | 待开始 |
| 6.2.4 | 编写 AI 生成流程测试 | P1     | 2h       | 待开始 |
| 6.2.5 | 编写导出流程测试     | P1     | 1h       | 待开始 |
| 6.2.6 | 编写响应式布局测试   | P2     | 2h       | 待开始 |

#### 7.2.3 Bug 修复

| #     | 任务               | 优先级 | 预计工时 | 状态   |
| ----- | ------------------ | ------ | -------- | ------ |
| 6.3.1 | 修复测试发现的 Bug | P0     | 8h       | 待开始 |
| 6.3.2 | 修复 UI 细节问题   | P1     | 4h       | 待开始 |
| 6.3.3 | 修复兼容性问题     | P1     | 4h       | 待开始 |
| 6.3.4 | 代码审查与重构     | P1     | 4h       | 待开始 |

#### 7.2.4 部署准备

| #     | 任务                | 优先级 | 预计工时 | 状态   |
| ----- | ------------------- | ------ | -------- | ------ |
| 6.4.1 | 配置生产环境变量    | P0     | 1h       | 待开始 |
| 6.4.2 | 优化构建配置        | P0     | 2h       | 待开始 |
| 6.4.3 | 配置 Dockerfile     | P1     | 2h       | 待开始 |
| 6.4.4 | 配置 Nginx          | P1     | 2h       | 待开始 |
| 6.4.5 | 配置 CI/CD Pipeline | P0     | 3h       | 待开始 |
| 6.4.6 | 配置域名和 SSL      | P0     | 1h       | 待开始 |

#### 7.2.5 上线

| #     | 任务           | 优先级 | 预计工时 | 状态   |
| ----- | -------------- | ------ | -------- | ------ |
| 6.5.1 | 部署到测试环境 | P0     | 2h       | 待开始 |
| 6.5.2 | 测试环境验收   | P0     | 4h       | 待开始 |
| 6.5.3 | 部署到生产环境 | P0     | 2h       | 待开始 |
| 6.5.4 | 生产环境验收   | P0     | 4h       | 待开始 |
| 6.5.5 | 监控配置       | P1     | 2h       | 待开始 |

### 7.3 交付物

- [x] 测试报告
- [x] 部署文档
- [x] 上线清单

### 7.4 验收标准

| 检查项   | 验收条件                              | 验证方法                |
| -------- | ------------------------------------- | ----------------------- |
| 单元测试 | 覆盖率 > 70%（语句覆盖）              | `npm run test:coverage` |
| E2E 测试 | 所有用例通过，0 失败                  | `npm run test:e2e`      |
| 关键流程 | 分镜管理、分镜看板、AI 生成流程测试通过 | E2E 报告                |
| 构建成功 | 生产构建 0 error，0 warning           | CI/CD 日志              |
| 部署成功 | 测试/生产环境可访问                   | 访问验证                |
| P0 Bug   | 0 个 P0 级 Bug                        | Bug 列表                |
| P1 Bug   | P1 级 Bug < 5 个（已有修复计划）      | Bug 列表                |
| 性能指标 | Lighthouse 性能分 > 80                | Lighthouse 测试         |

---

## 8. 第七阶段：联调与上线

### 8.1 目标

- 完成前后端 API 联调
- Mock 数据切换至真实 API
- 完成生产环境部署
- 上线验收和监控配置

### 8.2 任务清单

#### 8.2.1 前后端联调

| #     | 任务                             | 优先级 | 预计工时 | 状态   | 说明            |
| ----- | -------------------------------- | ------ | -------- | ------ | --------------- |
| 7.1.1 | API Client 切换配置（Mock→真实） | P0     | 2h       | 待开始 | 环境变量控制    |
| 7.1.2 | 认证流程联调                     | P0     | 2h       | 待开始 | 登录/Token/刷新 |
| 7.1.3 | 项目管理 API 联调                | P0     | 2h       | 待开始 | CRUD 完整测试   |
| 7.1.4 | 分镜管理 API 联调                | P0     | 2h       | 待开始 | 包含排序功能    |
| 7.1.5 | 资源管理 API 联调                | P0     | 2h       | 待开始 | 文件上传测试    |
| 7.1.6 | 分镜看板 API 联调                  | P0     | 2h       | 待开始 | 大数据量测试    |
| 7.1.7 | AI 功能 API 联调                 | P0     | 4h       | 待开始 | 异步任务、轮询  |
| 7.1.8 | 导出功能联调                     | P1     | 2h       | 待开始 | 异步导出流程    |

#### 8.2.2 设计评审与还原度检查

| #     | 任务                   | 优先级 | 预计工时 | 状态   | 说明             |
| ----- | ---------------------- | ------ | -------- | ------ | ---------------- |
| 7.2.1 | Figma 设计稿还原度评审 | P0     | 3h       | 待开始 | 对照检查 UI      |
| 7.2.2 | UI 细节修复            | P0     | 4h       | 待开始 | 根据评审结果修复 |
| 7.2.3 | 响应式布局检查         | P1     | 2h       | 待开始 | 不同分辨率测试   |
| 7.2.4 | 深色/亮色主题检查      | P1     | 2h       | 待开始 | 主题切换检查     |

#### 8.2.3 文档编写

| #     | 任务                    | 优先级 | 预计工时 | 状态   | 说明                 |
| ----- | ----------------------- | ------ | -------- | ------ | -------------------- |
| 7.3.1 | Storybook 配置          | P1     | 2h       | 待开始 | 组件文档环境         |
| 7.3.2 | 核心组件 Storybook 文档 | P1     | 4h       | 待开始 | Button/Input/Card 等 |
| 7.3.3 | 业务组件 Storybook 文档 | P2     | 4h       | 待开始 | StoryboardItem 等    |
| 7.3.4 | API 对接文档整理        | P1     | 2h       | 待开始 | 前端调用说明         |
| 7.3.5 | 部署操作手册            | P0     | 2h       | 待开始 | 部署步骤说明         |

#### 8.2.4 Bug 修复与优化

| #     | 任务                | 优先级 | 预计工时 | 状态   | 说明             |
| ----- | ------------------- | ------ | -------- | ------ | ---------------- |
| 7.4.1 | 联调发现的 Bug 修复 | P0     | 8h       | 待开始 | 预留时间         |
| 7.4.2 | 性能问题修复        | P1     | 4h       | 待开始 | 根据性能测试结果 |
| 7.4.3 | 兼容性问题修复      | P1     | 4h       | 待开始 | 浏览器兼容       |

#### 8.2.5 上线部署

| #     | 任务             | 优先级 | 预计工时 | 状态   | 说明               |
| ----- | ---------------- | ------ | -------- | ------ | ------------------ |
| 7.5.1 | 生产环境配置检查 | P0     | 2h       | 待开始 | 环境变量、密钥     |
| 7.5.2 | 部署到生产环境   | P0     | 2h       | 待开始 | CI/CD 执行         |
| 7.5.3 | 生产环境冒烟测试 | P0     | 2h       | 待开始 | 核心流程验证       |
| 7.5.4 | 监控告警配置     | P1     | 2h       | 待开始 | 错误日志、性能监控 |
| 7.5.5 | 上线验收         | P0     | 4h       | 待开始 | 完整功能验收       |

### 8.3 交付物

- [ ] 前后端联调完成
- [ ] 设计还原度通过评审
- [ ] 组件文档完成
- [ ] 生产环境部署成功
- [ ] 监控告警配置完成

### 8.4 验收标准

1. 所有 API 联调通过，无阻塞性 Bug
2. UI 设计还原度 > 95%
3. 核心功能冒烟测试通过
4. 监控告警配置生效
5. 用户可正常访问生产环境

---

## 9. 后端开发任务清单

> **说明**：后端开发与前端并行进行，以下任务需与前端开发节点同步。

### 8.1 阶段一并行：后端基础架构（第 1-2 周）

#### 8.1.1 项目初始化

| #      | 任务                                    | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | --------------------------------------- | ------ | -------- | ------ | ------ |
| B1.1.1 | 创建 FastAPI 项目结构                   | P0     | 1h       | 待开始 | -      |
| B1.1.2 | 配置环境变量管理（Pydantic Settings）   | P0     | 1h       | 待开始 | B1.1.1 |
| B1.1.3 | 配置 Docker 开发环境                    | P0     | 2h       | 待开始 | B1.1.1 |
| B1.1.4 | 配置 docker-compose（API + DB + Redis） | P0     | 2h       | 待开始 | B1.1.3 |
| B1.1.5 | 配置日志系统（Loguru）                  | P1     | 1h       | 待开始 | B1.1.1 |
| B1.1.6 | 配置 CORS 中间件                        | P0     | 0.5h     | 待开始 | B1.1.1 |

#### 8.1.2 数据库设计与配置

| #       | 任务                      | 优先级 | 预计工时 | 状态   | 依赖    |
| ------- | ------------------------- | ------ | -------- | ------ | ------- |
| B1.2.1  | PostgreSQL 数据库创建     | P0     | 0.5h     | 待开始 | B1.1.4  |
| B1.2.2  | SQLAlchemy 连接配置       | P0     | 1h       | 待开始 | B1.2.1  |
| B1.2.3  | Alembic 迁移工具配置      | P0     | 1h       | 待开始 | B1.2.2  |
| B1.2.4  | 创建用户表（users）       | P0     | 1h       | 待开始 | B1.2.3  |
| B1.2.5  | 创建项目表（projects）    | P0     | 1h       | 待开始 | B1.2.4  |
| B1.2.6  | 创建分镜表（storyboards） | P0     | 1h       | 待开始 | B1.2.5  |
| B1.2.7  | 创建资源表（resources）   | P0     | 1h       | 待开始 | B1.2.5  |
| B1.2.8  | 创建视频/音效/字幕/配音表 | P0     | 2h       | 待开始 | B1.2.5  |
| B1.2.9  | 创建分镜看板表（timelines） | P0     | 1h       | 待开始 | B1.2.5  |
| B1.2.10 | 创建 AI 任务表（ai_jobs） | P1     | 1h       | 待开始 | B1.2.5  |
| B1.2.11 | 创建数据库索引            | P1     | 1h       | 待开始 | B1.2.10 |

#### 8.1.3 认证授权

| #      | 任务                 | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | -------------------- | ------ | -------- | ------ | ------ |
| B1.3.1 | JWT Token 生成与验证 | P0     | 2h       | 待开始 | B1.2.4 |
| B1.3.2 | 密码加密（bcrypt）   | P0     | 1h       | 待开始 | B1.2.4 |
| B1.3.3 | 认证中间件实现       | P0     | 2h       | 待开始 | B1.3.1 |
| B1.3.4 | 用户注册/登录 API    | P0     | 2h       | 待开始 | B1.3.3 |
| B1.3.5 | Token 刷新机制       | P1     | 1h       | 待开始 | B1.3.1 |

#### 8.1.4 缓存与存储

| #      | 任务               | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | ------------------ | ------ | -------- | ------ | ------ |
| B1.4.1 | Redis 连接配置     | P1     | 1h       | 待开始 | B1.1.4 |
| B1.4.2 | 缓存服务封装       | P1     | 2h       | 待开始 | B1.4.1 |
| B1.4.3 | MinIO 对象存储配置 | P1     | 2h       | 待开始 | B1.1.4 |
| B1.4.4 | 文件上传服务封装   | P1     | 2h       | 待开始 | B1.4.3 |

### 8.2 阶段三并行：核心 API 开发（第 3-4 周）

#### 8.2.1 项目管理 API

| #      | 任务                           | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | ------------------------------ | ------ | -------- | ------ | ------ |
| B2.1.1 | 项目 Repository 层实现         | P0     | 2h       | 待开始 | B1.2.5 |
| B2.1.2 | 项目 Service 层实现            | P0     | 2h       | 待开始 | B2.1.1 |
| B2.1.3 | GET /projects 列表接口         | P0     | 1h       | 待开始 | B2.1.2 |
| B2.1.4 | POST /projects 创建接口        | P0     | 1h       | 待开始 | B2.1.2 |
| B2.1.5 | GET /projects/{id} 详情接口    | P0     | 1h       | 待开始 | B2.1.2 |
| B2.1.6 | PATCH /projects/{id} 更新接口  | P0     | 1h       | 待开始 | B2.1.2 |
| B2.1.7 | DELETE /projects/{id} 删除接口 | P0     | 1h       | 待开始 | B2.1.2 |

#### 8.2.2 分镜管理 API

| #      | 任务                                            | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | ----------------------------------------------- | ------ | -------- | ------ | ------ |
| B2.2.1 | 分镜 Repository 层实现                          | P0     | 2h       | 待开始 | B1.2.6 |
| B2.2.2 | 分镜 Service 层实现                             | P0     | 2h       | 待开始 | B2.2.1 |
| B2.2.3 | GET /projects/{id}/storyboards 列表接口         | P0     | 1h       | 待开始 | B2.2.2 |
| B2.2.4 | POST /projects/{id}/storyboards 创建接口        | P0     | 1h       | 待开始 | B2.2.2 |
| B2.2.5 | PATCH /storyboards/{id} 更新接口                | P0     | 1h       | 待开始 | B2.2.2 |
| B2.2.6 | DELETE /storyboards/{id} 删除接口               | P0     | 1h       | 待开始 | B2.2.2 |
| B2.2.7 | PUT /projects/{id}/storyboards/reorder 排序接口 | P0     | 2h       | 待开始 | B2.2.2 |

#### 8.2.3 资源管理 API

| #      | 任务                                          | 优先级 | 预计工时 | 状态   | 依赖           |
| ------ | --------------------------------------------- | ------ | -------- | ------ | -------------- |
| B2.3.1 | 资源 Repository 层实现                        | P0     | 2h       | 待开始 | B1.2.7         |
| B2.3.2 | 资源 Service 层实现                           | P0     | 2h       | 待开始 | B2.3.1         |
| B2.3.3 | POST /resources/upload 文件上传接口           | P0     | 3h       | 待开始 | B2.3.2, B1.4.4 |
| B2.3.4 | GET /resources 资源列表接口                   | P0     | 1h       | 待开始 | B2.3.2         |
| B2.3.5 | DELETE /resources/{id} 删除接口               | P1     | 1h       | 待开始 | B2.3.2         |
| B2.3.6 | POST /storyboards/{id}/resources 关联资源接口 | P0     | 2h       | 待开始 | B2.3.2         |

#### 8.2.4 视频/音效/字幕/配音 API

| #      | 任务          | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | ------------- | ------ | -------- | ------ | ------ |
| B2.4.1 | 视频 CRUD API | P0     | 3h       | 待开始 | B1.2.8 |
| B2.4.2 | 音效 CRUD API | P1     | 2h       | 待开始 | B1.2.8 |
| B2.4.3 | 字幕 CRUD API | P1     | 2h       | 待开始 | B1.2.8 |
| B2.4.4 | 配音 CRUD API | P1     | 2h       | 待开始 | B1.2.8 |

#### 8.2.5 分镜看板 API

| #      | 任务                                   | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | -------------------------------------- | ------ | -------- | ------ | ------ |
| B2.5.1 | 分镜看板 Repository 层实现               | P0     | 2h       | 待开始 | B1.2.9 |
| B2.5.2 | GET /projects/{id}/timeline 获取分镜看板 | P0     | 1h       | 待开始 | B2.5.1 |
| B2.5.3 | PUT /projects/{id}/timeline 保存分镜看板 | P0     | 2h       | 待开始 | B2.5.1 |

### 8.3 阶段四并行：AI 服务与异步任务（第 5-6 周）

#### 8.3.1 Celery 任务队列

| #      | 任务                                | 优先级 | 预计工时 | 状态   | 依赖    |
| ------ | ----------------------------------- | ------ | -------- | ------ | ------- |
| B3.1.1 | Celery 配置与 RabbitMQ/Redis Broker | P0     | 2h       | 待开始 | B1.4.1  |
| B3.1.2 | Celery Worker 配置                  | P0     | 1h       | 待开始 | B3.1.1  |
| B3.1.3 | 任务状态存储（ai_jobs 表）          | P0     | 2h       | 待开始 | B1.2.10 |
| B3.1.4 | 任务进度更新机制                    | P0     | 2h       | 待开始 | B3.1.3  |

#### 8.3.2 AI 生成任务

| #      | 任务                   | 优先级 | 预计工时 | 状态   | 依赖           |
| ------ | ---------------------- | ------ | -------- | ------ | -------------- |
| B3.2.1 | AI Provider 抽象层设计 | P0     | 2h       | 待开始 | -              |
| B3.2.2 | 图片生成任务实现       | P0     | 4h       | 待开始 | B3.1.1, B3.2.1 |
| B3.2.3 | 视频生成任务实现       | P0     | 4h       | 待开始 | B3.1.1, B3.2.1 |
| B3.2.4 | 音效生成任务实现       | P1     | 3h       | 待开始 | B3.1.1, B3.2.1 |
| B3.2.5 | 配音生成任务实现       | P1     | 3h       | 待开始 | B3.1.1, B3.2.1 |
| B3.2.6 | 字幕生成任务实现       | P1     | 3h       | 待开始 | B3.1.1, B3.2.1 |

#### 8.3.3 AI API 接口

| #      | 任务                                    | 优先级 | 预计工时 | 状态   | 依赖   |
| ------ | --------------------------------------- | ------ | -------- | ------ | ------ |
| B3.3.1 | POST /ai/generate/image 图片生成接口    | P0     | 2h       | 待开始 | B3.2.2 |
| B3.3.2 | POST /ai/generate/video 视频生成接口    | P0     | 2h       | 待开始 | B3.2.3 |
| B3.3.3 | POST /ai/generate/sound 音效生成接口    | P1     | 1h       | 待开始 | B3.2.4 |
| B3.3.4 | POST /ai/generate/voice 配音生成接口    | P1     | 1h       | 待开始 | B3.2.5 |
| B3.3.5 | POST /ai/generate/subtitle 字幕生成接口 | P1     | 1h       | 待开始 | B3.2.6 |
| B3.3.6 | GET /ai/jobs/{id} 任务状态查询接口      | P0     | 1h       | 待开始 | B3.1.3 |
| B3.3.7 | DELETE /ai/jobs/{id} 取消任务接口       | P1     | 1h       | 待开始 | B3.1.3 |

#### 8.3.4 导出功能

| #      | 任务                                | 优先级 | 预计工时 | 状态   | 依赖           |
| ------ | ----------------------------------- | ------ | -------- | ------ | -------------- |
| B3.4.1 | FFmpeg 视频合成服务                 | P1     | 4h       | 待开始 | -              |
| B3.4.2 | 视频导出异步任务                    | P1     | 3h       | 待开始 | B3.4.1, B3.1.1 |
| B3.4.3 | POST /projects/{id}/export 导出接口 | P1     | 2h       | 待开始 | B3.4.2         |
| B3.4.4 | GET /exports/{id} 导出状态查询      | P1     | 1h       | 待开始 | B3.4.2         |

### 8.4 后端交付物

- [ ] 完整的 RESTful API 服务
- [ ] 数据库迁移脚本
- [ ] Celery 异步任务服务
- [ ] Docker 部署配置
- [ ] API 文档（Swagger/OpenAPI）

### 8.5 后端验收标准

1. 所有 API 接口通过 Postman/Swagger 测试
2. 数据库迁移可正常执行
3. Celery Worker 可正常处理异步任务
4. API 响应时间 < 200ms（非 AI 生成接口）
5. 单元测试覆盖率 > 60%

---

## 10. 里程碑与交付物

### 10.1 里程碑

| 里程碑 | 目标日期 | 前端交付                    | 后端交付              | 验收标准                    |
| ------ | -------- | --------------------------- | --------------------- | --------------------------- |
| **M1** | Week 1   | 项目骨架、开发环境          | FastAPI 项目、DB 设计 | 项目可启动，数据库可连接    |
| **M2** | Week 2   | 所有 UI 组件、Mock 数据展示 | 数据库迁移、基础模型  | UI 完整呈现，Mock 数据正确  |
| **M3** | Week 4   | 完整交互逻辑、状态管理      | 核心 CRUD API         | API 接口通过 Postman 测试   |
| **M4** | Week 5   | AI 面板交互                 | AI 异步任务、队列     | AI 任务可提交并查询状态     |
| **M5** | Week 6   | 新手引导、性能优化          | 缓存、导出功能        | 首屏 < 3s，交互响应 < 100ms |
| **M6** | Week 8   | 单元测试、E2E 测试          | 集成测试              | 测试覆盖率达标，无 P0 Bug   |
| **M7** | Week 10  | 联调完成、生产上线          | 生产部署              | 用户可正常访问              |

### 10.2 关键节点

```
Week 1-2: 基础搭建          Week 3-4: 核心功能          Week 5-6: AI+优化
    │                           │                           │
    ▼                           ▼                           ▼
┌─────────┐               ┌───────────┐               ┌───────────┐
│   M1    │──────────────→│    M2     │──────────────→│   M3/M4   │
│ 项目骨架│               │ UI组件    │               │交互+AI    │
└─────────┘               └───────────┘               └───────────┘
                                                            │
Week 7-8: 测试             Week 9-10: 上线                  │
    │                           │                           │
    ▼                           ▼                           ▼
┌─────────┐               ┌───────────┐               ┌───────────┐
│  M5/M6  │──────────────→│    M7     │←──────────────│ 联调节点  │
│ 测试优化│               │ 生产上线  │               │ (Week 5末)│
└─────────┘               └───────────┘               └───────────┘
```

### 10.3 交付物清单

| 类型     | 名称                  | 说明                             | 负责方    |
| -------- | --------------------- | -------------------------------- | --------- |
| **代码** | 前端代码仓库          | React 应用源码                   | 前端      |
| **代码** | 后端代码仓库          | FastAPI 应用源码                 | 后端      |
| **文档** | 组件文档（Storybook） | 组件使用说明                     | 前端      |
| **文档** | API 文档（Swagger）   | 后端 API 文档                    | 后端      |
| **文档** | API 对接文档          | 前后端接口对接说明               | 前端+后端 |
| **文档** | 部署文档              | 部署步骤说明                     | DevOps    |
| **测试** | 前端测试报告          | 单元测试+E2E 覆盖率              | 前端      |
| **测试** | 后端测试报告          | 单元测试+集成测试覆盖率          | 后端      |
| **环境** | 测试环境              | 可访问的测试站点                 | DevOps    |
| **环境** | 生产环境              | 可访问的生产站点（jointo.ai） | DevOps    |

---

## 11. 风险评估与应对

### 11.1 风险列表

| 风险               | 概率 | 影响 | 应对措施                       | 责任人    |
| ------------------ | ---- | ---- | ------------------------------ | --------- |
| AI 服务不稳定      | 中   | 高   | 实现降级策略、Mock 替代        | 后端      |
| 后端 API 延迟交付  | 中   | 中   | 持续使用 Mock API 开发         | 前端      |
| 分镜看板组件复杂度高 | 高   | 中   | 提前技术调研、预留缓冲         | 前端      |
| 性能问题           | 中   | 中   | 提前进行性能测试、优化         | 前端+后端 |
| 浏览器兼容性       | 低   | 低   | 限定支持浏览器范围             | 前端      |
| 需求变更           | 中   | 中   | 保持组件灵活性、模块化         | 全员      |
| 联调问题           | 中   | 高   | 预留足够联调时间，接口文档先行 | 前端+后端 |

### 11.2 应对策略

#### AI 服务不稳定

1. 实现完整的 Mock AI 响应
2. 添加超时和重试机制
3. 用户友好的错误提示
4. 支持手动上传替代 AI 生成

#### 后端 API 延迟

1. 前端完全基于 Mock API 开发
2. Mock API 与真实 API 接口一致
3. 环境变量控制 Mock/真实 API 切换
4. 后端交付后快速切换验证

#### 分镜看板组件复杂度

1. 第一周进行 dnd-kit 技术调研与 Demo
2. 预留 30% 额外开发时间
3. 分阶段实现：先基础功能，后高级交互
4. 必要时简化 MVP 版本需求

#### 联调问题

1. 后端优先完成 API 文档（Swagger）
2. 接口定义在开发前达成一致
3. 使用 Postman/Insomnia 进行接口测试
4. 预留 1-2 周联调缓冲时间

---

## 12. 任务清单总表

### 12.1 按优先级统计

| 优先级   | 前端任务      | 后端任务     | 合计任务数    | 合计工时    |
| -------- | ------------- | ------------ | ------------- | ----------- |
| P0       | 约 70 项      | 约 45 项     | 约 115 项     | 约 180h     |
| P1       | 约 60 项      | 约 30 项     | 约 90 项      | 约 140h     |
| P2       | 约 15 项      | 约 5 项      | 约 20 项      | 约 30h      |
| **合计** | **约 145 项** | **约 80 项** | **约 225 项** | **约 350h** |

### 12.2 按阶段统计

| 阶段             | 前端任务   | 前端工时    | 后端任务  | 后端工时    | 合计        |
| ---------------- | ---------- | ----------- | --------- | ----------- | ----------- |
| 阶段一：基础架构 | 22 项      | 约 18h      | 17 项     | 约 20h      | 约 38h      |
| 阶段二：静态展示 | 42 项      | 约 65h      | -         | -           | 约 65h      |
| 阶段三：交互逻辑 | 38 项      | 约 75h      | 22 项     | 约 35h      | 约 110h     |
| 阶段四：AI 集成  | 18 项      | 约 30h      | 18 项     | 约 40h      | 约 70h      |
| 阶段五：引导优化 | 25 项      | 约 40h      | -         | -           | 约 40h      |
| 阶段六：测试部署 | 20 项      | 约 45h      | 10 项     | 约 20h      | 约 65h      |
| 阶段七：联调上线 | 20 项      | 约 50h      | 5 项      | 约 10h      | 约 60h      |
| **合计**         | **185 项** | **约 323h** | **72 项** | **约 125h** | **约 448h** |

> **说明**：按每天 8 小时计算，总计约 56 人天，双人团队约需 28 天（5.6 周），预留缓冲后为 9-10 周。

### 12.3 关键路径任务（Critical Path）

```
┌──────────────────────────────────────────────────────────────────────────────┐
│                              关键路径                                         │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  [1.1.1 项目初始化] → [2.1.1 AppLayout] → [2.2.1 StoryboardPanel]           │
│         ↓                                        ↓                           │
│  [2.4.1 TimelinePanel] ←───────────────── [3.3.1 分镜选择]                   │
│         ↓                                        ↓                           │
│  [3.5.1 分镜看板缩放] ──→ [3.5.5 时间块拖拽] ──→ [4.2.1 AI功能]               │
│         ↓                                        ↓                           │
│  [5.3.1 代码分割] ──→ [6.2.1 E2E测试] ──→ [7.1.7 AI联调] ──→ [7.5.5 上线]   │
│                                                                              │
│  预计关键路径耗时：约 6-7 周（不含缓冲）                                       │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘
```

### 12.4 快速索引

#### 核心功能任务（P0 - 必须完成）

**前端：**

- [ ] 1.1.1 - 项目初始化
- [ ] 2.1.1 - AppLayout 组件
- [ ] 2.2.1 - StoryboardPanel 组件
- [ ] 2.3.1 - PreviewPanel 组件
- [ ] 2.4.1 - TimelinePanel 组件
- [ ] 3.3.1 - 分镜选择
- [ ] 3.5.1 - 分镜看板缩放
- [ ] 4.2.1 - 提示词输入
- [ ] 5.3.1 - 代码分割
- [ ] 6.2.1 - E2E 测试配置
- [ ] 7.1.7 - AI 功能联调

**后端：**

- [ ] B1.1.1 - FastAPI 项目初始化
- [ ] B1.2.5 - 创建项目表
- [ ] B1.3.1 - JWT 认证
- [ ] B2.1.3 - 项目列表 API
- [ ] B2.2.3 - 分镜列表 API
- [ ] B3.2.2 - 图片生成任务
- [ ] B3.3.6 - 任务状态查询 API

---

## 附录

### A. 技术栈版本

```json
{
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "typescript": "^5.7.0",
  "vite": "^5.0.0",
  "tailwindcss": "^3.4.0",
  "lucide-react": "^0.400.0",
  "@radix-ui/react-*": "^1.0.0",
  "class-variance-authority": "^0.7.0",
  "clsx": "^2.0.0",
  "tailwind-merge": "^2.0.0",
  "zustand": "^4.5.0",
  "@tanstack/react-query": "^5.0.0",
  "react-router-dom": "^6.21.0",
  "@dnd-kit/core": "^6.1.0",
  "vitest": "^1.2.0",
  "@playwright/test": "^1.41.0"
}
```

### B. 命令参考

```bash
# 开发
npm run dev

# 构建
npm run build

# 测试
npm run test
npm run test:e2e

# 代码检查
npm run lint
npm run format

# 类型检查
npm run type-check
```

### C. 变更记录

- **v1.0** (2025-01-08)：初始版本，从 PRD 文档中拆分
- **v2.0** (2025-01-09)：完善版本
  - 新增后端开发任务清单（约 80 项任务）
  - 新增第七阶段：联调与上线
  - 扩展开发周期至 9-10 周
  - 调整分镜看板组件工时（+15h）
  - 调整国际化任务工时（+12h）
  - 细化各阶段验收标准（量化指标）
  - 新增任务依赖关系图和关键路径分析
  - 新增风险应对策略（分镜看板复杂度、联调问题）
  - 更新里程碑为前后端双线并行模式

---

**文档结束**

> 本文档定义Jointo产品的开发计划和任务清单，用于项目管理和进度跟踪。