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

## 功能概述

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

## 功能特点

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

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

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

## 技术实现

### 1. 组件修改
**文件**: `src/components/timeline/TrackTimeline.tsx`

#### 新增状态管理
```typescript
const [categories, setCategories] = React.useState<ResourceCategoryV2[]>([])
const [loadingCategories, setLoadingCategories] = React.useState(false)
```

#### 分类数据加载
```typescript
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])
```

#### 分类选择处理
```typescript
const handleCategorySelect = (segmentId: string, categoryTitle: string) => {
  if (onSegmentNameChange && categoryTitle) {
    onSegmentNameChange(segmentId, categoryTitle)
  }
  setEditingSegmentId(null)
}
```

### 2. UI 组件替换

#### 原文本输入框
```typescript
<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()}
/>
```

#### 新下拉选择框
```typescript
<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. **分类加载**：确保分类数据已加载
4. **显示选择**：展示下拉选择框
5. **选择处理**：用户选择分类，更新片段名称
6. **状态重置**：关闭编辑状态

## 用户体验改进

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

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

### 3. 交互优化
- **自动聚焦**：下拉框自动获得焦点
- **点击外部取消**：失去焦点自动取消编辑
- **键盘支持**：支持键盘导航选择

## 兼容性考虑

### 1. 向后兼容
- 保持原有的 `onSegmentNameChange` 回调接口
- 支持现有的片段数据结构
- 不影响其他组件的使用

### 2. 错误处理
- 分类加载失败时的降级处理
- 网络异常时的用户提示
- 空分类列表的处理

### 3. 性能优化
- 分类数据缓存，避免重复加载
- 异步加载，不阻塞界面渲染
- 限制下拉框高度，避免界面溢出

## 使用示例

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

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

## 后续优化建议

### 1. 功能增强
- 支持创建新分类
- 分类颜色显示
- 分类搜索过滤
- 最近使用分类

### 2. 用户体验
- 键盘快捷键支持
- 批量重命名功能
- 拖拽排序支持
- 撤销/重做功能

### 3. 数据管理
- 分类使用统计
- 智能推荐分类
- 分类同步机制
- 离线模式支持

## 总结

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