添加歌词跳转进度功能

src/components/LyricsPiPWindow.tsx

@@ -29,6 +29,7 @@ interface LyricsPiPWindowProps {
   minimized: boolean;
   onOpacityChange: (opacity: number) => void;
   onMinimizedChange: (minimized: boolean) => void;
+  onLyricSeek?: (line: LyricLine, index: number) => void;
   onClose: () => void;
 }
 
@@ -40,6 +41,7 @@ interface PiPLyricsContentProps {
   minimized: boolean;
   onOpacityChange: (opacity: number) => void;
   onMinimizedChange: (minimized: boolean) => void;
+  onLyricSeek?: (line: LyricLine, index: number) => void;
   onClose: () => void;
 }
 
@@ -52,6 +54,7 @@ const PiPLyricsContent = ({
   minimized,
   onOpacityChange,
   onMinimizedChange,
+  onLyricSeek,
   onClose,
 }: PiPLyricsContentProps) => {
   const lyricsContainerRef = useRef<HTMLDivElement>(null);
@@ -213,9 +216,13 @@ const PiPLyricsContent = ({
         >
           {lyrics.length > 0 ? (
             lyrics.map((line, index) => (
-              <div
+              <button
                 key={index}
+                type="button"
+                onClick={() => onLyricSeek?.(line, index)}
                 style={{
+                  display: 'block',
+                  width: '100%',
                   padding: '8px 0',
                   textAlign: 'center',
                   fontSize: index === currentLyricIndex ? '16px' : '14px',
@@ -223,6 +230,11 @@ const PiPLyricsContent = ({
                   color: index === currentLyricIndex ? '#22c55e' : 'white',
                   transition: 'all 0.3s ease',
                   fontWeight: index === currentLyricIndex ? 'bold' : 'normal',
+                  background: 'transparent',
+                  border: 'none',
+                  outline: 'none',
+                  appearance: 'none',
+                  cursor: onLyricSeek ? 'pointer' : 'default',
                 }}
               >
                 <div>{line.text}</div>
@@ -238,7 +250,7 @@ const PiPLyricsContent = ({
                     {line.translation}
                   </div>
                 )}
-              </div>
+              </button>
             ))
           ) : (
             <div
@@ -294,6 +306,7 @@ export default function LyricsPiPWindow({
   minimized,
   onOpacityChange,
   onMinimizedChange,
+  onLyricSeek,
   onClose,
 }: LyricsPiPWindowProps) {
   const pipWindowRef = useRef<Window | null>(null);
@@ -327,6 +340,7 @@ export default function LyricsPiPWindow({
         onMinimizedChange={(newMinimized) => {
           window.postMessage({ type: 'PIP_MINIMIZED_CHANGE', minimized: newMinimized }, '*');
         }}
+        onLyricSeek={onLyricSeek}
         onClose={() => {
           window.postMessage({ type: 'PIP_CLOSE' }, '*');
         }}
@@ -350,13 +364,14 @@ export default function LyricsPiPWindow({
           onMinimizedChange={(newMinimized) => {
             window.postMessage({ type: 'PIP_MINIMIZED_CHANGE', minimized: newMinimized }, '*');
           }}
+          onLyricSeek={onLyricSeek}
           onClose={() => {
             window.postMessage({ type: 'PIP_CLOSE' }, '*');
           }}
         />
       );
     }
-  }, [currentSong, lyrics, currentLyricIndex, opacity, minimized]);
+  }, [currentSong, lyrics, currentLyricIndex, opacity, minimized, onLyricSeek]);
 
   // 打开 PiP 窗口
   useEffect(() => {