feat: 实现 ControlPanel 播放控制面板组件

- 添加上一步/下一步按钮（带快捷键标注 ←/→）
- 添加播放/暂停按钮（带快捷键标注 空格）
- 添加重置按钮（带快捷键标注 R）
- 实现自定义播放速度控制器（0.5x-2x）
- 实现可拖动进度条（绿色已播放/灰色未播放）
- 添加步骤计数器显示
- 播放速度持久化到 IndexedDB
- 添加播放控制状态一致性属性测试

Author: CC11001100

.kiro/specs/min-stack-visualizer/tasks.md

@@ -104,7 +104,7 @@
     - 数据验证和错误提示
     - _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.8, 4.9_
 
-- [-] 10. UI 组件开发 - CodePanel
+- [x] 10. UI 组件开发 - CodePanel
   - [x] 10.1 实现 CodePanel 组件
     - 创建 components/CodePanel/CodePanel.tsx 和样式文件
     - 四种语言代码展示
@@ -139,23 +139,23 @@
     - 状态变更说明
     - _Requirements: 6.10, 6.11, 6.12, 6.13_
 
-- [ ] 12. UI 组件开发 - ControlPanel
-  - [ ] 12.1 实现 ControlPanel 组件
+- [x] 12. UI 组件开发 - ControlPanel
+  - [x] 12.1 实现 ControlPanel 组件
     - 创建 components/ControlPanel/ControlPanel.tsx 和样式文件
     - 上一步按钮（← 快捷键）
     - 下一步按钮（→ 快捷键）
     - 播放/暂停按钮（空格快捷键）
     - 重置按钮（R 快捷键）
     - _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6, 7.7, 7.8, 7.9_
-  - [ ] 12.2 实现播放速度控制
+  - [x] 12.2 实现播放速度控制
     - 自定义速度控制器（非原生组件）
     - 默认 1x 速度
     - _Requirements: 7.10_
-  - [ ] 12.3 实现进度条
+  - [x] 12.3 实现进度条
     - 进度条显示（绿色已播放，灰色未播放）
     - 支持拖动跳转
     - _Requirements: 7.13, 7.14, 7.15_
-  - [ ] 12.4 编写属性测试：播放控制状态一致性
+  - [x] 12.4 编写属性测试：播放控制状态一致性
     - **Property 7: 播放控制状态一致性**
     - **Validates: Requirements 7.3, 7.5, 7.9, 7.15**
 

src/App.css

@@ -100,34 +100,3 @@ html, body, #root {
   display: flex;
   flex-direction: column;
 }
-
-.control-panel {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  padding: 12px;
-  background: #161b22;
-  border-radius: 8px;
-  border: 1px solid #30363d;
-}
-
-.control-panel button {
-  padding: 8px 16px;
-  background: #21262d;
-  border: 1px solid #30363d;
-  border-radius: 6px;
-  color: #c9d1d9;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s ease;
-}
-
-.control-panel button:hover:not(:disabled) {
-  background: #30363d;
-  border-color: #8b949e;
-}
-
-.control-panel button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

src/App.tsx

@@ -4,9 +4,15 @@ import { AlgorithmModal } from './components/AlgorithmModal';
 import { InputPanel } from './components/InputPanel';
 import { CodePanel } from './components/CodePanel/CodePanel';
 import { Canvas } from './components/Canvas';
+import { ControlPanel } from './components/ControlPanel';
 import type { Operation, Language, AlgorithmStep } from './types';
 import { generateSteps } from './services/stepGenerator';
-import { getLanguagePreference, saveLanguagePreference } from './services/storageService';
+import { 
+  getLanguagePreference, 
+  saveLanguagePreference,
+  getPlaybackSpeed,
+  savePlaybackSpeed 
+} from './services/storageService';
 import './App.css';
 
 function App() {
@@ -17,12 +23,16 @@ function App() {
   const [language, setLanguage] = useState<Language>('python');
   const [isPlaying, setIsPlaying] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1);
 
-  // 加载用户语言偏好
+  // 加载用户偏好
   useEffect(() => {
     getLanguagePreference().then((lang) => {
       if (lang) setLanguage(lang);
     });
+    getPlaybackSpeed().then((speed) => {
+      if (speed) setPlaybackSpeed(speed);
+    });
   }, []);
 
   // 处理语言切换
@@ -79,10 +89,22 @@ function App() {
     setIsPlaying(false);
   }, []);
 
+  // 处理播放速度变化
+  const handleSpeedChange = useCallback((speed: number) => {
+    setPlaybackSpeed(speed);
+    savePlaybackSpeed(speed);
+  }, []);
+
+  // 处理进度条跳转
+  const handleSeek = useCallback((step: number) => {
+    setCurrentStep(Math.max(0, Math.min(steps.length - 1, step)));
+  }, [steps.length]);
+
   // 自动播放
   useEffect(() => {
     if (!isPlaying || steps.length === 0) return;
 
+    const interval = 1000 / playbackSpeed;
     const timer = setInterval(() => {
       setCurrentStep((prev) => {
         if (prev >= steps.length - 1) {
@@ -91,10 +113,10 @@ function App() {
         }
         return prev + 1;
       });
-    }, 1000);
+    }, interval);
 
     return () => clearInterval(timer);
-  }, [isPlaying, steps.length]);
+  }, [isPlaying, steps.length, playbackSpeed]);
 
   // 键盘快捷键
   useEffect(() => {
@@ -151,22 +173,20 @@ function App() {
           </div>
         </div>
 
-        {/* 简单的播放控制 */}
+        {/* 播放控制面板 */}
         {steps.length > 0 && (
-          <div className="control-panel">
-            <button onClick={handlePrevStep} disabled={currentStep === 0}>
-              ← 上一步
-            </button>
-            <button onClick={handlePlayPause}>
-              {isPlaying ? '暂停' : '播放'} (空格)
-            </button>
-            <button onClick={handleNextStep} disabled={currentStep >= steps.length - 1}>
-              下一步 →
-            </button>
-            <button onClick={handleReset}>
-              重置 (R)
-            </button>
-          </div>
+          <ControlPanel
+            currentStep={currentStep}
+            totalSteps={steps.length}
+            isPlaying={isPlaying}
+            playbackSpeed={playbackSpeed}
+            onPrevStep={handlePrevStep}
+            onNextStep={handleNextStep}
+            onPlayPause={handlePlayPause}
+            onReset={handleReset}
+            onSpeedChange={handleSpeedChange}
+            onSeek={handleSeek}
+          />
         )}
       </main>
     </div>