You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 

1.5 KiB

分镜列表简化实现

修复内容

1. 简化StoryboardItem组件

  • 移除功能
    • 缩略图显示
    • 时长显示
    • 展开/收起功能
    • 复制分镜功能
  • 保留功能
    • 拖拽排序
    • 选择状态
    • 编辑和删除操作

2. 修复类型错误

  • 修复分镜ID类型不匹配问题(number vs string)
  • 更新所有相关的类型转换
  • 移除不再使用的函数和状态

3. 添加插入新分镜功能

  • 在分镜卡片之间添加hover显示的插入按钮
  • 支持在任意位置插入新分镜
  • 自动生成分镜标题(分镜1、分镜2等)
  • 插入后自动选中新分镜

主要修改文件

StoryboardItem.tsx

  • 简化组件接口,移除不需要的props
  • 移除缩略图、时长、展开相关UI
  • 简化操作菜单,只保留编辑和删除
  • 修复拖拽ID类型问题

StoryboardDescPanel.tsx

  • 修复所有类型错误
  • 移除不再使用的状态和函数
  • 添加插入分镜功能
  • 实现hover显示插入按钮的交互

实现效果

  1. 简洁的分镜列表:只显示序号、标题、描述和操作菜单
  2. 流畅的拖拽排序:支持分镜间的拖拽重排
  3. 便捷的插入功能:hover分镜间隙显示插入按钮
  4. 直观的操作:点击插入按钮直接在指定位置创建新分镜

技术要点

  • 使用@dnd-kit实现拖拽排序
  • 通过hover状态控制插入按钮显示
  • 自动计算插入位置的orderIndex
  • 保持类型安全和代码简洁性