feat: 添加输入面板，支持自定义课程数量和先修关系

Author: CC11001100

src/components/App.tsx

@@ -1,5 +1,6 @@
-import { useMemo } from 'react';
+import { useMemo, useState, useCallback } from 'react';
 import Header from './Header';
+import InputPanel from './InputPanel';
 import CodePanel from './CodePanel';
 import GraphView from './GraphView';
 import DataStructuresPanel from './DataStructuresPanel';
@@ -11,36 +12,43 @@ import { GraphNode, GraphEdge } from '../algorithm/types';
 import './App.css';
 
 // Default example input
-const DEFAULT_INPUT = {
-  numCourses: 4,
-  prerequisites: [
-    [1, 0],
-    [2, 0],
-    [3, 1],
-    [3, 2],
-  ],
-};
+const DEFAULT_NUM_COURSES = 4;
+const DEFAULT_PREREQUISITES: number[][] = [
+  [1, 0],
+  [2, 0],
+  [3, 1],
+  [3, 2],
+];
 
 function App() {
+  const [numCourses, setNumCourses] = useState(DEFAULT_NUM_COURSES);
+  const [prerequisites, setPrerequisites] = useState(DEFAULT_PREREQUISITES);
+
   // Generate algorithm steps
   const steps = useMemo(
-    () => generateSteps(DEFAULT_INPUT),
-    []
+    () => generateSteps({ numCourses, prerequisites }),
+    [numCourses, prerequisites]
   );
 
   // Build graph data
   const graphData = useMemo(() => {
     const nodes: GraphNode[] = [];
-    for (let i = 0; i < DEFAULT_INPUT.numCourses; i++) {
+    for (let i = 0; i < numCourses; i++) {
       nodes.push({ id: i });
     }
 
-    const edges: GraphEdge[] = DEFAULT_INPUT.prerequisites.map(([from, to]) => ({
+    const edges: GraphEdge[] = prerequisites.map(([from, to]) => ({
       source: from,
       target: to,
     }));
 
     return { nodes, edges };
+  }, [numCourses, prerequisites]);
+
+  // Handle input change
+  const handleInputSubmit = useCallback((newNumCourses: number, newPrerequisites: number[][]) => {
+    setNumCourses(newNumCourses);
+    setPrerequisites(newPrerequisites);
   }, []);
 
   // Playback state
@@ -78,6 +86,12 @@ function App() {
         githubUrl="https://github.com/fuck-algorithm/leetcode-207-course-schedule"
       />
 
+      <InputPanel
+        onSubmit={handleInputSubmit}
+        defaultNumCourses={DEFAULT_NUM_COURSES}
+        defaultPrerequisites={DEFAULT_PREREQUISITES}
+      />
+
       <main className="main-content">
         <section className="code-section">
           <div className="section-title">算法代码</div>
@@ -101,7 +115,7 @@ function App() {
               queue={currentStep.queue}
               stepDescription={currentStep.description}
               learnCount={currentStep.learnCount}
-              numCourses={DEFAULT_INPUT.numCourses}
+              numCourses={numCourses}
             />
           </div>
         </section>
@@ -113,7 +127,7 @@ function App() {
               inDegree={currentStep.inDegree}
               queue={currentStep.queue}
               learnCount={currentStep.learnCount}
-              numCourses={DEFAULT_INPUT.numCourses}
+              numCourses={numCourses}
               highlightedIndex={null}
               isComplete={isComplete}
             />

src/components/InputPanel.css

@@ -0,0 +1,68 @@
+.input-panel {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 20px;
+  background: #1e1e1e;
+  border-bottom: 1px solid #333;
+  flex-wrap: wrap;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.input-group label {
+  color: #9cdcfe;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.input-group input {
+  padding: 6px 10px;
+  border: 1px solid #444;
+  border-radius: 4px;
+  background: #2d2d2d;
+  color: #d4d4d4;
+  font-size: 14px;
+  font-family: 'Consolas', 'Monaco', monospace;
+}
+
+.input-group input[type="number"] {
+  width: 60px;
+}
+
+.input-group input[type="text"] {
+  width: 280px;
+}
+
+.input-group input:focus {
+  outline: none;
+  border-color: #007acc;
+}
+
+.input-error {
+  color: #f48771;
+  font-size: 13px;
+}
+
+.run-button {
+  padding: 6px 16px;
+  background: #0e639c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.2s;
+}
+
+.run-button:hover {
+  background: #1177bb;
+}
+
+.run-button:active {
+  background: #0d5a8c;
+}

src/components/InputPanel.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import './InputPanel.css';
+
+interface InputPanelProps {
+  onSubmit: (numCourses: number, prerequisites: number[][]) => void;
+  defaultNumCourses: number;
+  defaultPrerequisites: number[][];
+}
+
+export default function InputPanel({
+  onSubmit,
+  defaultNumCourses,
+  defaultPrerequisites,
+}: InputPanelProps) {
+  const [numCourses, setNumCourses] = useState(defaultNumCourses.toString());
+  const [prerequisites, setPrerequisites] = useState(
+    JSON.stringify(defaultPrerequisites)
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = () => {
+    try {
+      const num = parseInt(numCourses, 10);
+      if (isNaN(num) || num < 1 || num > 20) {
+        setError('课程数量必须是 1-20 之间的整数');
+        return;
+      }
+
+      const prereqs = JSON.parse(prerequisites);
+      if (!Array.isArray(prereqs)) {
+        setError('先修课程必须是数组格式');
+        return;
+      }
+
+      for (const pair of prereqs) {
+        if (!Array.isArray(pair) || pair.length !== 2) {
+          setError('每个先修关系必须是 [a, b] 格式');
+          return;
+        }
+        if (pair[0] < 0 || pair[0] >= num || pair[1] < 0 || pair[1] >= num) {
+          setError(`课程编号必须在 0 到 ${num - 1} 之间`);
+          return;
+        }
+      }
+
+      setError(null);
+      onSubmit(num, prereqs);
+    } catch {
+      setError('先修课程格式错误，请使用 JSON 数组格式');
+    }
+  };
+
+  return (
+    <div className="input-panel">
+      <div className="input-group">
+        <label>课程数量 (numCourses):</label>
+        <input
+          type="number"
+          value={numCourses}
+          onChange={(e) => setNumCourses(e.target.value)}
+          min="1"
+          max="20"
+        />
+      </div>
+      <div className="input-group">
+        <label>先修课程 (prerequisites):</label>
+        <input
+          type="text"
+          value={prerequisites}
+          onChange={(e) => setPrerequisites(e.target.value)}
+          placeholder="[[1,0],[2,1]]"
+        />
+      </div>
+      {error && <div className="input-error">{error}</div>}
+      <button className="run-button" onClick={handleSubmit}>
+        运行
+      </button>
+    </div>
+  );
+}