fix: react hook

src/components/timeline/TrackTimeline.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SegmentContextMenu } from './SegmentContextMenu'
 import { SegmentTooltip } from './SegmentTooltip'
 import { CategorySelector } from './CategorySelector'
-import { useCategoryActions } from '../../stores/useCategoryStore'
+import { useCategoryActions, useActiveCategoriesOnly } from '../../stores/useCategoryStore'
 
 export interface TrackSegment {
   id: string
@@ -58,14 +58,63 @@ export const TrackTimeline: React.FC<TrackTimelineProps> = ({
 
   // 使用 Zustand store 管理分类数据
   const { loadCategories } = useCategoryActions()
+  const activeCategories = useActiveCategoriesOnly()
 
   // 组件挂载时加载分类（如果还没有加载）
   React.useEffect(() => {
     loadCategories() // store 内部会处理缓存和重复加载
   }, [])
 
-  const getSegmentColor = (type: string) => {
-    switch (type) {
+  // 根据片段名称查找对应的分类颜色
+  const getCategoryByName = (segmentName: string) => {
+    return activeCategories.find(category => category.title === segmentName)
+  }
+
+
+
+  // 获取片段的内联样式
+  const getSegmentStyle = (segment: TrackSegment, isHover: boolean = false) => {
+    const category = getCategoryByName(segment.name)
+
+    if (category && category.color) {
+      // 使用分类颜色
+      const baseColor = category.color
+      const hoverColor = adjustColorBrightness(baseColor, -20) // 悬停时稍微变暗
+
+      return {
+        backgroundColor: isHover ? hoverColor : baseColor,
+        transition: 'background-color 0.2s ease'
+      }
+    }
+
+    // 如果没有找到分类，使用默认的类型颜色
+    return {}
+  }
+
+  // 调整颜色亮度的辅助函数
+  const adjustColorBrightness = (hex: string, percent: number) => {
+    // 移除 # 符号
+    const num = parseInt(hex.replace('#', ''), 16)
+    const amt = Math.round(2.55 * percent)
+    const R = (num >> 16) + amt
+    const G = (num >> 8 & 0x00FF) + amt
+    const B = (num & 0x0000FF) + amt
+
+    return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+      (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+      (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1)
+  }
+
+  const getSegmentColor = (segment: TrackSegment) => {
+    const category = getCategoryByName(segment.name)
+
+    if (category && category.color) {
+      // 如果找到对应分类，返回空字符串，因为我们会使用内联样式
+      return ''
+    }
+
+    // 如果没有找到分类，使用默认的类型颜色
+    switch (segment.type) {
       case 'video': return 'bg-blue-500 hover:bg-blue-600'
       case 'audio': return 'bg-green-500 hover:bg-green-600'
       case 'image': return 'bg-yellow-500 hover:bg-yellow-600'
@@ -75,8 +124,17 @@ export const TrackTimeline: React.FC<TrackTimelineProps> = ({
     }
   }
 
-  const getSegmentTextColor = (type: string) => {
-    switch (type) {
+  const getSegmentTextColor = (segment: TrackSegment) => {
+    const category = getCategoryByName(segment.name)
+
+    if (category && category.color) {
+      // 如果使用分类颜色，根据背景颜色亮度决定文本颜色
+      const brightness = getColorBrightness(category.color)
+      return brightness > 128 ? 'text-gray-900' : 'text-white'
+    }
+
+    // 如果没有找到分类，使用默认的类型颜色
+    switch (segment.type) {
       case 'video': return 'text-blue-100'
       case 'audio': return 'text-green-100'
       case 'image': return 'text-yellow-100'
@@ -86,6 +144,15 @@ export const TrackTimeline: React.FC<TrackTimelineProps> = ({
     }
   }
 
+  // 计算颜色亮度的辅助函数
+  const getColorBrightness = (hex: string) => {
+    const num = parseInt(hex.replace('#', ''), 16)
+    const r = (num >> 16) & 255
+    const g = (num >> 8) & 255
+    const b = num & 255
+    return (r * 299 + g * 587 + b * 114) / 1000
+  }
+
   const getTrackTypeColor = (type: string) => {
     switch (type) {
       case 'video': return 'bg-blue-100 text-blue-800 border-blue-200'
@@ -213,13 +280,14 @@ 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)} ${getSegmentTextColor(segment)}
                          flex items-center px-3 text-sm font-medium cursor-pointer transition-all duration-200
                          shadow-sm hover:shadow-md transform`}
               style={{
                 left: `${startPercent}%`,
                 width: `${Math.max(widthPercent, 8)}%`, // Minimum width for visibility
-                minWidth: '80px'
+                minWidth: '80px',
+                ...getSegmentStyle(segment)
               }}
               onClick={() => onSegmentClick?.(segment)}
               onDoubleClick={(e) => handleSegmentDoubleClick(e, segment)}