refactor: ControlPanel使用自定义SpeedSelector替换原生select

Author: CC11001100

src/components/ControlPanel.module.css

@@ -65,41 +65,6 @@
   text-align: center;
 }
 
-.rateSelector {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: 12px;
-  padding-left: 12px;
-  border-left: 1px solid #3d3d5c;
-}
-
-.rateLabel {
-  color: #888;
-  font-size: 0.875rem;
-}
-
-.rateSelect {
-  padding: 6px 10px;
-  background: #2d2d44;
-  color: #ccc;
-  border: 1px solid #3d3d5c;
-  border-radius: 4px;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.rateSelect:hover {
-  background: #3d3d5c;
-  color: #fff;
-}
-
-.rateSelect:focus {
-  outline: none;
-  border-color: #4caf50;
-}
-
 .progressContainer {
   cursor: pointer;
   padding: 8px 0;

src/components/ControlPanel.tsx

@@ -1,5 +1,5 @@
-import { PLAYBACK_RATES } from '../hooks/useAlgorithmPlayer'
-import type { ControlPanelProps, PlaybackRate } from '../types'
+import type { ControlPanelProps } from '../types'
+import { SpeedSelector } from './SpeedSelector'
 import styles from './ControlPanel.module.css'
 
 export function ControlPanel({
@@ -25,11 +25,6 @@ export function ControlPanel({
     onSeek(step)
   }
 
-  const handleRateChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const rate = parseFloat(e.target.value) as PlaybackRate
-    onPlaybackRateChange(rate)
-  }
-
   return (
     <div className={styles.container}>
       <div className={styles.controls}>
@@ -84,20 +79,7 @@ export function ControlPanel({
           {currentStep + 1} / {totalSteps}
         </span>
 
-        <div className={styles.rateSelector}>
-          <label className={styles.rateLabel}>速率:</label>
-          <select
-            className={styles.rateSelect}
-            value={playbackRate}
-            onChange={handleRateChange}
-          >
-            {PLAYBACK_RATES.map((rate) => (
-              <option key={rate} value={rate}>
-                {rate}x
-              </option>
-            ))}
-          </select>
-        </div>
+        <SpeedSelector value={playbackRate} onChange={onPlaybackRateChange} />
       </div>
 
       <div className={styles.progressContainer} onClick={handleProgressClick}>