重构client，拆分组件

2025-10-22 20:14:11 +08:00
parent 5868407216
commit fe9bc8fd6c
23 changed files with 1601 additions and 1137 deletions
@@ -0,0 +1,40 @@
+interface SegmentedProgressBarProps {
+  totalSegments: number;
+  currentIndex: number;
+  segmentProgress: number;
+  onSeek: (ratio: number) => void;
+}
+
+export function SegmentedProgressBar({
+  totalSegments,
+  currentIndex,
+  segmentProgress,
+  onSeek,
+}: SegmentedProgressBarProps) {
+  return (
+    <div
+      className="relative h-1.5 cursor-pointer"
+      onClick={(e) => {
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+        onSeek((e.clientX - rect.left) / rect.width);
+      }}
+    >
+      <div className="flex gap-1.5 h-full">
+        {Array.from({ length: totalSegments }).map((_, i) => {
+          let fill = 0;
+          if (i < currentIndex) fill = 1;
+          else if (i === currentIndex) fill = segmentProgress;
+          return (
+            <div
+              key={i}
+              aria-label={`第 ${i + 1} 段`}
+              className="relative flex-1 h-full rounded-full bg-white/25 overflow-hidden"
+            >
+              <div className="h-full origin-left bg-white" style={{ transform: `scaleX(${fill})` }} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}