import React from 'react' interface TrackSegment { id: string type: 'video' | 'audio' | 'image' | 'text' | 'effect' name: string start_time: number end_time: number duration: number resource_path?: string properties?: any effects?: any[] } interface SegmentTooltipProps { segment: TrackSegment | null position: { x: number; y: number } isVisible: boolean } export const SegmentTooltip: React.FC = ({ segment, position, isVisible }) => { const formatTime = (seconds: number): string => { const minutes = Math.floor(seconds / 60) const secs = (seconds % 60).toFixed(2) return `${minutes}:${secs.padStart(5, '0')}` } const getTypeLabel = (type: string) => { switch (type) { case 'video': return '视频' case 'audio': return '音频' case 'image': return '图片' case 'text': return '文本' case 'effect': return '特效' default: return '未知' } } const getTypeColor = (type: string) => { switch (type) { case 'video': return 'bg-blue-100 text-blue-800' case 'audio': return 'bg-green-100 text-green-800' case 'image': return 'bg-yellow-100 text-yellow-800' case 'text': return 'bg-purple-100 text-purple-800' case 'effect': return 'bg-gray-100 text-gray-800' default: return 'bg-gray-100 text-gray-800' } } if (!isVisible || !segment) return null return (
{/* Segment Name */}
{getTypeLabel(segment.type)}

{segment.name}

{/* Time Information */}
开始时间:
{formatTime(segment.start_time)}
结束时间:
{formatTime(segment.end_time)}
持续时长:
{formatTime(segment.duration)}
{/* Resource Path */} {segment.resource_path && (
资源文件:
{segment.resource_path.split('/').pop() || segment.resource_path}
)} {/* Effects */} {segment.effects && segment.effects.length > 0 && (
特效:
{segment.effects.length} 个特效
)} {/* Properties */} {segment.properties && Object.keys(segment.properties).length > 0 && (
属性:
{Object.keys(segment.properties).length} 个属性
)}
{/* Tooltip Arrow */}
) }