5.1 KiB

Raw Blame History

轨道片段名称编辑 - 分类选择功能

功能概述

将轨道片段的名称编辑功能从文本输入框改为下拉选择，用户可以从素材分类中选择，选择后将分类名称赋值给片段名称。

功能特点

1. 下拉选择替代文本输入

原功能：双击片段显示文本输入框，手动输入名称
新功能：双击片段显示下拉选择框，从预设分类中选择

2. 分类数据集成

自动加载用户的素材分类数据
支持云端和本地分类
只显示激活状态的分类

3. 选择选项

选择分类：从分类列表中选择，将分类名称赋值给片段
保持原名称：选择此项保持片段原有名称不变
取消编辑：点击空白处或失去焦点取消编辑

技术实现

1. 组件修改

文件: src/components/timeline/TrackTimeline.tsx

新增状态管理

const [categories, setCategories] = React.useState<ResourceCategoryV2[]>([])
const [loadingCategories, setLoadingCategories] = React.useState(false)

分类数据加载

const loadCategories = React.useCallback(async () => {
  if (loadingCategories) return
  
  try {
    setLoadingCategories(true)
    const result = await ResourceCategoryServiceV2.getAllCategories({
      include_cloud: true
    })
    setCategories(result)
  } catch (error) {
    console.error('Failed to load categories:', error)
  } finally {
    setLoadingCategories(false)
  }
}, [loadingCategories])

分类选择处理

const handleCategorySelect = (segmentId: string, categoryTitle: string) => {
  if (onSegmentNameChange && categoryTitle) {
    onSegmentNameChange(segmentId, categoryTitle)
  }
  setEditingSegmentId(null)
}

2. UI 组件替换

原文本输入框

<input
  type="text"
  value={editingName}
  onChange={(e) => setEditingName(e.target.value)}
  onBlur={() => handleNameSubmit(segment.id)}
  onKeyDown={(e) => handleKeyDown(e, segment.id)}
  className="w-full bg-transparent text-inherit border-none outline-none"
  autoFocus
  onClick={(e) => e.stopPropagation()}
/>

新下拉选择框

<select
  value=""
  onChange={(e) => {
    if (e.target.value) {
      handleCategorySelect(segment.id, e.target.value)
    }
  }}
  onBlur={() => setEditingSegmentId(null)}
  className="w-full bg-white text-gray-900 border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
  autoFocus
  size={Math.min(categories.length + 2, 8)}
>
  <option value="">选择分类...</option>
  <option value={segment.name} className="text-gray-600">
    保持原名称: {segment.name}
  </option>
  {categories
    .filter(category => category.is_active)
    .map((category) => (
      <option key={category.id} value={category.title}>
        {category.title}
      </option>
    ))}
</select>

3. 数据流程

组件初始化：自动加载分类数据
编辑触发：双击或右键编辑片段
分类加载：确保分类数据已加载
显示选择：展示下拉选择框
选择处理：用户选择分类，更新片段名称
状态重置：关闭编辑状态

用户体验改进

1. 操作简化

减少输入：无需手动输入，直接选择
标准化：确保名称的一致性和规范性
快速选择：预设选项，提高效率

2. 视觉反馈

加载状态：显示"加载分类中..."提示
选项分组：保持原名称选项与分类选项分开
样式优化：下拉框样式适配片段容器

3. 交互优化

自动聚焦：下拉框自动获得焦点
点击外部取消：失去焦点自动取消编辑
键盘支持：支持键盘导航选择

兼容性考虑

1. 向后兼容

保持原有的 onSegmentNameChange 回调接口
支持现有的片段数据结构
不影响其他组件的使用

2. 错误处理

分类加载失败时的降级处理
网络异常时的用户提示
空分类列表的处理

3. 性能优化

分类数据缓存，避免重复加载
异步加载，不阻塞界面渲染
限制下拉框高度，避免界面溢出

使用示例

基本使用

<TrackTimeline
  track={track}
  totalDuration={totalDuration}
  currentTime={currentTime}
  onSegmentNameChange={(segmentId, newName) => {
    // 处理片段名称更改
    console.log(`片段 ${segmentId} 名称更改为: ${newName}`)
  }}
/>

完整示例

参见 test_track_timeline_category_select.tsx 文件中的完整测试示例。

后续优化建议

1. 功能增强

支持创建新分类
分类颜色显示
分类搜索过滤
最近使用分类

2. 用户体验

键盘快捷键支持
批量重命名功能
拖拽排序支持
撤销/重做功能

3. 数据管理

分类使用统计
智能推荐分类
分类同步机制
离线模式支持

总结

通过将片段名称编辑从文本输入改为分类选择，提高了用户操作的便利性和名称的标准化程度。这个改进不仅简化了用户操作，还为后续的素材管理和分类功能奠定了基础。

5.1 KiB Raw Blame History