fix

src/components/timeline/TrackTimeline.tsx

@@ -27,6 +27,7 @@ interface TrackTimelineProps {
   currentTime: number
   onSegmentClick?: (segment: TrackSegment) => void
   onSegmentHover?: (segment: TrackSegment | null) => void
+  onSegmentNameChange?: (segmentId: string, newName: string) => void
 }
 
 export const TrackTimeline: React.FC<TrackTimelineProps> = ({
@@ -34,8 +35,11 @@ export const TrackTimeline: React.FC<TrackTimelineProps> = ({
   totalDuration,
   currentTime,
   onSegmentClick,
-  onSegmentHover
+  onSegmentHover,
+  onSegmentNameChange
 }) => {
+  const [editingSegmentId, setEditingSegmentId] = React.useState<string | null>(null)
+  const [editingName, setEditingName] = React.useState('')
   const getSegmentColor = (type: string) => {
     switch (type) {
       case 'video': return 'bg-blue-500 hover:bg-blue-600'
@@ -73,6 +77,38 @@ export const TrackTimeline: React.FC<TrackTimelineProps> = ({
     return `${minutes}:${secs.padStart(5, '0')}`
   }
 
+  const handleSegmentDoubleClick = (segment: TrackSegment) => {
+    setEditingSegmentId(segment.id)
+    setEditingName(segment.name)
+  }
+
+  const handleSegmentRightClick = (e: React.MouseEvent, segment: TrackSegment) => {
+    e.preventDefault()
+    setEditingSegmentId(segment.id)
+    setEditingName(segment.name)
+  }
+
+  const handleNameSubmit = (segmentId: string) => {
+    if (onSegmentNameChange && editingName.trim()) {
+      onSegmentNameChange(segmentId, editingName.trim())
+    }
+    setEditingSegmentId(null)
+    setEditingName('')
+  }
+
+  const handleNameCancel = () => {
+    setEditingSegmentId(null)
+    setEditingName('')
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent, segmentId: string) => {
+    if (e.key === 'Enter') {
+      handleNameSubmit(segmentId)
+    } else if (e.key === 'Escape') {
+      handleNameCancel()
+    }
+  }
+
   return (
     <div className="border border-gray-200 rounded-lg overflow-hidden">
       {/* Track Header */}
@@ -113,8 +149,8 @@ export const TrackTimeline: React.FC<TrackTimelineProps> = ({
           return (
             <div
               key={segment.id}
-              className={`absolute top-2 bottom-2 rounded-md ${getSegmentColor(segment.type)} ${getSegmentTextColor(segment.type)} 
+              className={`absolute top-2 bottom-2 rounded-md ${getSegmentColor(segment.type)} ${getSegmentTextColor(segment.type)}
-                         flex items-center px-3 text-sm font-medium cursor-pointer transition-all duration-200 
+                         flex items-center px-3 text-sm font-medium cursor-pointer transition-all duration-200
                          shadow-sm hover:shadow-md transform hover:scale-105 z-10`}
               style={{
                 left: `${startPercent}%`,
@@ -122,16 +158,28 @@ export const TrackTimeline: React.FC<TrackTimelineProps> = ({
                 minWidth: '80px'
               }}
               onClick={() => onSegmentClick?.(segment)}
+              onDoubleClick={() => handleSegmentDoubleClick(segment)}
+              onContextMenu={(e) => handleSegmentRightClick(e, segment)}
               onMouseEnter={() => onSegmentHover?.(segment)}
               onMouseLeave={() => onSegmentHover?.(null)}
               title={`${segment.name}\n类型: ${segment.type}\n开始: ${formatTime(segment.start_time)}\n结束: ${formatTime(segment.end_time)}\n时长: ${formatTime(segment.duration)}${segment.resource_path ? `\n资源: ${segment.resource_path}` : ''}`}
             >
-              <div className="truncate flex-1">
+              {editingSegmentId === segment.id ? (
-                {segment.name}
+                <input
-              </div>
+                  type="text"
-              <div className="text-xs opacity-75 ml-2">
+                  value={editingName}
-                {formatTime(segment.duration)}
+                  onChange={(e) => setEditingName(e.target.value)}
-              </div>
+                  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()}
+                />
+              ) : (
+                <div className="truncate flex-1">
+                  {segment.name}
+                </div>
+              )}
             </div>
           )
         })}

src/pages/TemplateDetailPage.tsx

@@ -108,6 +108,26 @@ const TemplateDetailPage: React.FC = () => {
     }
   }
 
+  const handleSegmentNameChange = (segmentId: string, newName: string) => {
+    if (!templateDetail) return
+
+    // Update the segment name in the local state
+    const updatedDetail = {
+      ...templateDetail,
+      tracks: templateDetail.tracks.map(track => ({
+        ...track,
+        segments: track.segments.map(segment =>
+          segment.id === segmentId ? { ...segment, name: newName } : segment
+        )
+      }))
+    }
+
+    setTemplateDetail(updatedDetail)
+
+    // TODO: Save to backend
+    console.log(`Segment ${segmentId} renamed to: ${newName}`)
+  }
+
   if (loading) {
     return (
       <div className="min-h-screen bg-gray-50 flex items-center justify-center">
@@ -266,6 +286,7 @@ const TemplateDetailPage: React.FC = () => {
                   // Could show segment details in a tooltip
                   console.log('Hovering segment:', segment?.name)
                 }}
+                onSegmentNameChange={handleSegmentNameChange}
               />
             ))}
           </div>