项目架构

┌─────────────────────────────────────────────────────────┐
│                      FlowPick                           │
│                                                         │
│  ┌──────────────────┐    ┌──────────────────────────┐   │
│  │   浏览器扩展      │    │     在线工具网站          │   │
│  │                  │    │                          │   │
│  │ · 网络请求监控    │    │ · M3U8 下载器            │   │
│  │ · 媒体自动检测    │    │ · DASH 下载器            │   │
│  │ · 弹出窗口 UI    │    │ · 文档系统               │   │
│  │ · 跨域请求能力    │    │ · 首页展示               │   │
│  └────────┬─────────┘    └────────────┬─────────────┘   │
│           │                           │                 │
│           └───────────┬───────────────┘                 │
│                       │                                 │
│           ┌───────────▼───────────────┐                 │
│           │      核心下载引擎          │                 │
│           │                           │                 │
│           │ · useStreamMerge.ts       │                 │
│           │ · useFFmpeg.ts            │                 │
│           │ · 分片下载与并发控制       │                 │
│           │ · AES-128 解密            │                 │
│           │ · 流式文件写入             │                 │
│           │ · 格式转换                 │                 │
│           └───────────────────────────┘                 │
└─────────────────────────────────────────────────────────┘

export interface StreamMergeOptions {
  segments: ArrayBuffer[] | AsyncGenerator<ArrayBuffer>
  totalSegments: number
  filename: string
  outputFormat?: 'mp4' | 'ts'
  onProgress?: (progress: StreamMergeProgress) => void
  signal?: AbortSignal
}

export interface StreamMergeProgress {
  phase: 'downloading' | 'merging'
  percent: number
  downloadedBytes: number
  totalBytes: number
  speed: string
  eta: string
}

export const useFFmpeg = () => {
  return {
    ffmpeg: Ref<FFmpegType | null>
    loaded: Ref<boolean>
    loading: Ref<boolean>
    error: Ref<string | null>
    load: () => Promise<void>
    mergeToMP4: (options: MergeOptions) => Promise<ArrayBuffer>
    mergeAudioVideo: (options: MergeAudioVideoOptions) => Promise<ArrayBuffer>
    mergeFmp4: (options: MergeFmp4Options) => Promise<ArrayBuffer>
  }
}

用户输入 URL
    ↓
fetch M3U8 内容
    ↓
m3u8-parser 解析
    ↓
┌─ Master Playlist? ──→ 展示画质列表 → 用户选择
│
└─ Media Playlist? ──→ 提取分片列表
    ↓
检查 #EXT-X-KEY（加密信息）
    ↓
下载密钥文件（如有）
    ↓
并发下载分片 + 解密
    ↓
合并/转封装
    ↓
写入磁盘

用户输入 URL
    ↓
fetch MPD 内容
    ↓
mpd-parser 解析
    ↓
检查 ContentProtection（DRM）
    ↓
提取 AdaptationSet（视频/音频）
    ↓
展示流列表 → 用户选择
    ↓
下载初始化段（如有）
    ↓
并发下载媒体段 + 解密
    ↓
FMP4 重组 / 音视频合并
    ↓
写入磁盘

content/zh-Hans/
├── 1.docs/                    # 文档主体
│   ├── 1.getting-started/     # 快速开始
│   ├── 2.features/            # 功能特性
│   ├── 3.advanced/            # 高级指南
│   ├── 5.troubleshooting/     # 故障排除
│   └── 6.developer/           # 开发者文档
├── 4.changelog/               # 更新日志
└── 6.legal/                   # 法律条款

┌─────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐
│ 获取清单 │ → │ 解析清单  │ → │ 下载分片  │ → │ 合并写入  │
└─────────┘    └──────────┘    └──────────┘    └──────────┘
     │              │               │               │
     ▼              ▼               ▼               ▼
  fetch()      m3u8-parser    Worker Pool     useStreamMerge
                mpd-parser    AES-128 解密    useFFmpeg
                              fetch() 并发    FSA/SS/Blob

开始写入
    │
    ▼
File System Access API 可用？
    │
    ├── 是 → 使用 FSA 流式写入（最优）
    │         · 16MB 缓冲区
    │         · 支持任意大小
    │
    └── 否 → StreamSaver 可用？
                │
                ├── 是 → 使用 StreamSaver 流式写入
                │         · Service Worker 代理
                │         · 支持大文件
                │
                └── 否 → 预估文件大小
                            │
                            ├── < 1.5GB → Blob 模式
                            │              · 全部加载到内存
                            │              · 触发浏览器下载
                            │
                            └── > 1.5GB → 拒绝下载
                                           · 提示切换浏览器

m3u8-downloader.vue ──────┐
                          ├──→ useStreamMerge.ts ──→ Web Crypto API
dash-downloader.vue ──────┤         │                    fetch API
                          │         ├──→ useFFmpeg.ts ──→ @ffmpeg/ffmpeg
扩展弹出窗口 ─────────────┘         │                    @ffmpeg/util
                                    ├──→ File System Access API
                                    ├──→ StreamSaver.js
                                    └──→ Blob API

文档系统 ──→ @nuxt/content ──→ Markdown 文件
           └──→ @nuxt/ui ──→ Tailwind CSS

flowpick-extension/
├── manifest.json           # Manifest V3 配置
├── background/
│   └── service-worker.js   # Service Worker（网络监控）
├── popup/
│   ├── popup.html          # 弹出窗口
│   ├── popup.js            # 弹出窗口逻辑
│   └── popup.css           # 弹出窗口样式
├── content/
│   └── content.js          # 内容脚本（页面注入）
└── assets/
    └── icons/              # 扩展图标

Content Script ←→ Background Service Worker ←→ Popup UI
      │                      │                      │
  页面 DOM 访问         网络请求监控            用户交互界面
  媒体元素检测          M3U8/MPD 过滤           下载触发与管理