Skip to content

Feature: 视频节点

一句话目标

用户在视频节点中上传或生成视频,播放预览。

行为约束

约束 1:视频上传

前置条件: 视频节点已创建,无视频(空状态,显示居中占位图标) 行为: 用户点击上传区域或拖拽视频文件到节点 后置条件: 视频通过验证后(MP4/WebM,≤ 300MB)显示播放器

约束 2:上传验证

前置条件: 用户选择了文件 行为: 系统校验文件类型和大小 后置条件: 非法文件显示 toast 错误,不修改节点

约束 2a:下游节点禁止上传

前置条件: 视频节点有 incoming edge(作为其他节点的下游) 行为: 上传区域和工具栏上传按钮不渲染 后置条件: 用户无法通过任何 UI 入口上传视频,只能通过 AI 生成获得内容。删除上游连线后恢复上传能力

约束 3:视频播放

前置条件: 节点已有视频 行为: 用户可播放/暂停、拖拽进度条 seek、查看时间显示 后置条件: 播放状态实时反映在控制栏

约束 4:AI 视频生成

前置条件: 用户已输入 prompt 行为: 点击生成,调用 generateVideo API 后置条件: 生成结果替换当前视频,播放器重置

Acceptance Criteria

  • [x] AC-01:空状态显示居中占位图标(flex-1 居中,简化自原有虚线上传区域)
  • [x] AC-02:点击和拖拽均可上传视频
  • [x] AC-03:非法文件显示错误 toast
  • [x] AC-03a:下游节点(有 incoming edge)不渲染上传区域和工具栏上传按钮
  • [~] AC-03b:删除上游连线后上传功能恢复
  • [x] AC-04:播放/暂停/进度条/时间显示正常工作
  • [x] AC-05:生成成功后视频替换并重置播放状态
  • [x] AC-06:生成失败不丢失已上传的视频和 prompt
  • [x] AC-07:组件卸载时释放 Object URL、abort 请求
  • [~] AC-08:有视频时工具栏显示下载按钮,点击在新标签页打开视频(跨域限制,待后端代理/签名 URL 后改为直接下载)
  • [~] AC-09:宽高比/分辨率/时长选项根据选中模型的 abilities 动态渲染,无 abilities 的模型不显示参数行
  • [~] AC-10:resolution 的 rules 约束生效(如选择 1080p 时 duration 自动收窄为合法值)
  • [~] AC-11:切换模型时自动修正所有参数到新模型支持的合法值
  • [~] AC-12:生成时校验参考图片数量不超过模型的 reference_image 限制

BDD Scenarios

gherkin
Feature: 视频节点

  Scenario: 上传视频并播放
    Given 一个空视频节点
    When 用户上传一个 MP4 文件
    Then 视频预览显示在节点中
    When 用户点击播放按钮
    Then 视频开始播放
    And 进度条实时更新

  Scenario: 拒绝非法视频文件
    Given 一个空视频节点
    When 用户上传一个 350MB 的 MP4 文件
    Then 显示文件大小超限的错误提示
    And 节点保持空状态

  Scenario: 下游节点禁止上传
    Given 文本节点 A 连线到视频节点 B
    Then B 的上传区域不显示
    And B 的工具栏中没有上传按钮

  Scenario: 删除上游连线后恢复上传
    Given 文本节点 A 连线到视频节点 B
    When 用户删除 A → B 连线
    Then B 的上传区域重新显示
    And B 的工具栏中上传按钮恢复

  Scenario: 视频播放控制
    Given 视频节点已有视频
    When 用户点击播放按钮
    Then 视频开始播放
    And 进度条实时更新
    And 时间显示格式正确
    When 用户拖拽进度条到中间位置
    Then 视频跳转到对应时间点

  Scenario: 生成失败保持已上传视频和 prompt
    Given 视频节点已有一段上传的视频
    And 用户输入 prompt "转为慢动作"
    When 用户点击生成按钮
    And API 请求失败
    Then 节点状态变为 error
    And 上传的视频仍然显示
    And prompt 保持 "转为慢动作"

  Scenario: 生成成功后视频替换并重置
    Given 视频节点处于 idle 状态
    And 用户输入 prompt "生成日落延时"
    When 用户点击生成按钮
    And 生成成功返回新视频
    Then 原视频被替换为生成结果
    And 播放状态重置为暂停
    And 进度条归零

  Scenario: 组件卸载时释放资源
    Given 视频节点处于 generating 状态
    When 用户导航离开画布
    Then 进行中的请求被 abort
    And Object URL 被释放

TDD 单元测试要点

针对文件验证逻辑:

  • [ ] MP4/WebM 通过验证
  • [ ] 非法类型返回错误信息
  • [ ] 超过 300MB 返回错误信息

针对时间格式化:

  • [x] formatTime(65) 返回 "1:05"test/nuxt/videoNode.test.ts
  • [x] formatTime(0) 返回 "0:00"test/nuxt/videoNode.test.ts

Out of Scope

  • 截帧(暂停,跨域 CORS 方案未确定)
  • 视频裁剪/剪辑
  • 多段视频拼接
  • 视频延长(未规划)
  • 真正的文件下载(需后端代理或 COS 签名 URL,当前为新标签页打开)