feat: 添加主应用组件和静态资源

Author: CC11001100

src/App.css

@@ -0,0 +1,46 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-lg);
+  min-height: 0;
+  overflow: hidden;
+}
+
+.left-panel {
+  width: 400px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* 响应式布局 */
+@media (max-width: 1200px) {
+  .main-content {
+    flex-direction: column;
+  }
+  
+  .left-panel {
+    width: 100%;
+    height: 300px;
+  }
+  
+  .right-panel {
+    flex: 1;
+  }
+}

src/App.tsx

@@ -0,0 +1,105 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  Header,
+  DataInput,
+  CodePanel,
+  Canvas,
+  ControlPanel,
+  AlgorithmIdeaModal,
+  WeChatFloat,
+} from './components';
+import { useAlgorithmPlayer } from './hooks';
+import type { AlgorithmType } from './types';
+import { DATA_EXAMPLES } from './utils/validation';
+import './styles/global.css';
+import './App.css';
+
+function App() {
+  const [data, setData] = useState<number[]>(DATA_EXAMPLES[0].data);
+  const [algorithmType, setAlgorithmType] = useState<AlgorithmType>('dp');
+  const [showAlgorithmIdea, setShowAlgorithmIdea] = useState(false);
+
+  const {
+    steps,
+    currentStep,
+    currentStepData,
+    isPlaying,
+    speed,
+    play,
+    pause,
+    nextStep,
+    prevStep,
+    reset,
+    seek,
+    setSpeed,
+    generateSteps,
+  } = useAlgorithmPlayer();
+
+  // 初始化生成步骤
+  useEffect(() => {
+    generateSteps(data, algorithmType);
+  }, [data, algorithmType, generateSteps]);
+
+  // 处理数据变化
+  const handleDataChange = useCallback((newData: number[]) => {
+    setData(newData);
+  }, []);
+
+  // 处理算法类型变化
+  const handleAlgorithmTypeChange = useCallback((type: AlgorithmType) => {
+    setAlgorithmType(type);
+  }, []);
+
+  return (
+    <div className="app">
+      <Header onShowAlgorithmIdea={() => setShowAlgorithmIdea(true)} />
+      
+      <DataInput
+        onDataChange={handleDataChange}
+        currentData={data}
+        algorithmType={algorithmType}
+        onAlgorithmTypeChange={handleAlgorithmTypeChange}
+      />
+      
+      <main className="main-content">
+        <div className="left-panel">
+          <CodePanel 
+            currentStep={currentStepData} 
+            algorithmType={algorithmType}
+          />
+        </div>
+        
+        <div className="right-panel">
+          <Canvas 
+            currentStep={currentStepData}
+            algorithmType={algorithmType}
+            data={data}
+          />
+        </div>
+      </main>
+      
+      <ControlPanel
+        currentStep={currentStep}
+        totalSteps={steps.length}
+        isPlaying={isPlaying}
+        onPlay={play}
+        onPause={pause}
+        onPrevStep={prevStep}
+        onNextStep={nextStep}
+        onReset={reset}
+        onSeek={seek}
+        speed={speed}
+        onSpeedChange={setSpeed}
+      />
+      
+      <AlgorithmIdeaModal
+        isOpen={showAlgorithmIdea}
+        onClose={() => setShowAlgorithmIdea(false)}
+      />
+      
+      <WeChatFloat />
+    </div>
+  );
+}
+
+export default App;

src/assets/images/wechat-group.png

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)