feat: 添加自定义速率选择器组件，替换原生select

Author: CC11001100

src/components/SpeedSelector.module.css

@@ -0,0 +1,96 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 12px;
+  padding-left: 12px;
+  border-left: 1px solid #3d3d5c;
+}
+
+.label {
+  color: #888;
+  font-size: 0.875rem;
+}
+
+.selector {
+  position: relative;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #2d2d44;
+  color: #fff;
+  border: 1px solid #3d3d5c;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  min-width: 80px;
+  justify-content: space-between;
+}
+
+.trigger:hover {
+  background: #3d3d5c;
+  border-color: #4caf50;
+}
+
+.value {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.arrow {
+  font-size: 0.625rem;
+  color: #888;
+  transition: transform 0.2s;
+}
+
+.arrowUp {
+  transform: rotate(180deg);
+}
+
+.dropdown {
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  margin-bottom: 4px;
+  background: #2d2d44;
+  border: 1px solid #3d3d5c;
+  border-radius: 6px;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  z-index: 100;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 12px;
+  background: transparent;
+  color: #ccc;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-size: 0.875rem;
+  text-align: left;
+}
+
+.option:hover {
+  background: #3d3d5c;
+  color: #fff;
+}
+
+.option.selected {
+  background: rgba(76, 175, 80, 0.2);
+  color: #4caf50;
+}
+
+.checkmark {
+  color: #4caf50;
+  font-size: 0.75rem;
+}

src/components/SpeedSelector.tsx

@@ -0,0 +1,65 @@
+import { useState, useRef, useEffect } from 'react'
+import type { PlaybackRate } from '../types'
+import { PLAYBACK_RATES } from '../hooks/useAlgorithmPlayer'
+import styles from './SpeedSelector.module.css'
+
+interface SpeedSelectorProps {
+  value: PlaybackRate
+  onChange: (rate: PlaybackRate) => void
+}
+
+export function SpeedSelector({ value, onChange }: SpeedSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  // 点击外部关闭下拉菜单
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const handleSelect = (rate: PlaybackRate) => {
+    onChange(rate)
+    setIsOpen(false)
+  }
+
+  return (
+    <div className={styles.container} ref={containerRef}>
+      <span className={styles.label}>速率:</span>
+      <div className={styles.selector}>
+        <button
+          className={styles.trigger}
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+          aria-haspopup="listbox"
+        >
+          <span className={styles.value}>{value}x</span>
+          <span className={`${styles.arrow} ${isOpen ? styles.arrowUp : ''}`}>▼</span>
+        </button>
+
+        {isOpen && (
+          <div className={styles.dropdown} role="listbox">
+            {PLAYBACK_RATES.map((rate) => (
+              <button
+                key={rate}
+                className={`${styles.option} ${rate === value ? styles.selected : ''}`}
+                onClick={() => handleSelect(rate)}
+                role="option"
+                aria-selected={rate === value}
+              >
+                {rate}x
+                {rate === value && <span className={styles.checkmark}>✓</span>}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}