feat: 添加底部进度条，支持拖动调整播放进度

Author: CC11001100

src/components/App.tsx

@@ -5,6 +5,7 @@ import CodePanel from './CodePanel';
 import GraphView from './GraphView';
 import DataStructuresPanel from './DataStructuresPanel';
 import ControlPanel from './ControlPanel';
+import ProgressBar from './ProgressBar';
 import { usePlayback } from '../hooks/usePlayback';
 import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
 import { generateSteps } from '../algorithm/stepGenerator';
@@ -62,6 +63,7 @@ function App() {
     toggle,
     goToPrevious,
     goToNext,
+    goToStep,
   } = usePlayback({
     totalSteps: steps.length,
     playbackSpeed: 1000,
@@ -147,6 +149,12 @@ function App() {
         onPrevious={goToPrevious}
         onNext={goToNext}
       />
+
+      <ProgressBar
+        currentStep={currentStepIndex}
+        totalSteps={steps.length}
+        onSeek={goToStep}
+      />
     </div>
   );
 }

src/components/ProgressBar.css

@@ -0,0 +1,54 @@
+.progress-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 24px;
+  background: #1e1e1e;
+  cursor: pointer;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+
+.progress-track {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  background: #444;
+  border-radius: 4px;
+  overflow: visible;
+}
+
+.progress-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: #4caf50;
+  border-radius: 4px 0 0 4px;
+  transition: width 0.1s ease-out;
+}
+
+.progress-thumb {
+  position: absolute;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  background: #4caf50;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  transition: left 0.1s ease-out;
+}
+
+.progress-bar:hover .progress-thumb {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.progress-bar:active .progress-thumb {
+  transform: translate(-50%, -50%) scale(1.1);
+}

src/components/ProgressBar.tsx

@@ -0,0 +1,84 @@
+import { useCallback, useRef, useState } from 'react';
+import './ProgressBar.css';
+
+interface ProgressBarProps {
+  currentStep: number;
+  totalSteps: number;
+  onSeek: (step: number) => void;
+}
+
+export default function ProgressBar({
+  currentStep,
+  totalSteps,
+  onSeek,
+}: ProgressBarProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const progress = totalSteps > 1 ? (currentStep / (totalSteps - 1)) * 100 : 0;
+
+  const calculateStep = useCallback(
+    (clientX: number) => {
+      if (!trackRef.current) return currentStep;
+      const rect = trackRef.current.getBoundingClientRect();
+      const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      return Math.round(percent * (totalSteps - 1));
+    },
+    [totalSteps, currentStep]
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      onSeek(calculateStep(e.clientX));
+    },
+    [calculateStep, onSeek]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (isDragging) {
+        onSeek(calculateStep(e.clientX));
+      }
+    },
+    [isDragging, calculateStep, onSeek]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  // Add global mouse listeners when dragging
+  useState(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  });
+
+  return (
+    <div
+      className="progress-bar"
+      ref={trackRef}
+      onMouseDown={handleMouseDown}
+      onMouseMove={(e) => isDragging && onSeek(calculateStep(e.clientX))}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <div className="progress-track">
+        <div
+          className="progress-fill"
+          style={{ width: `${progress}%` }}
+        />
+        <div
+          className="progress-thumb"
+          style={{ left: `${progress}%` }}
+        />
+      </div>
+    </div>
+  );
+}