feat: 添加用户自定义数据输入功能

- 在标题下方添加数据输入组件
- 支持用户自定义输入L1和L2链表数据
- 内置4个预设数据样例（示例1-4）
- 支持随机生成合法链表数据
- 输入数据合法性校验（0-9数字，长度限制）
- 添加完整的单元测试

Author: CC11001100

src/App.tsx

@@ -1,4 +1,5 @@
 import { Header } from './components/Header'
+import { DataInput } from './components/DataInput'
 import { CodePanel } from './components/CodePanel'
 import { VisualizationPanel } from './components/VisualizationPanel'
 import { ControlPanel } from './components/ControlPanel'
@@ -14,12 +15,15 @@ function App() {
     currentStepData,
     isPlaying,
     totalSteps,
+    l1Input,
+    l2Input,
     goToPrevious,
     goToNext,
     togglePlayPause,
     pause,
     reset,
     goToStep,
+    updateInputs,
   } = useAlgorithmState()
 
   // 自动播放
@@ -51,6 +55,7 @@ function App() {
   return (
     <div className="app">
       <Header />
+      <DataInput l1={l1Input} l2={l2Input} onDataChange={updateInputs} />
       <main className="main-content">
         <div className="left-panel">
           <CodePanel currentLine={codeLine} variables={variables} />

src/components/DataInput.css

@@ -0,0 +1,125 @@
+.data-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 24px;
+  background-color: #1a1a2e;
+  border-bottom: 1px solid #2d2d44;
+}
+
+.data-input-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  position: relative;
+}
+
+.input-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: #9ca3af;
+  min-width: 24px;
+}
+
+.data-input-field {
+  width: 120px;
+  padding: 4px 8px;
+  font-size: 13px;
+  background-color: #2d2d44;
+  border: 1px solid #3d3d5c;
+  border-radius: 4px;
+  color: #ffffff;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.data-input-field:focus {
+  border-color: #ffa116;
+}
+
+.data-input-field.error {
+  border-color: #ef4444;
+}
+
+.data-input-field::placeholder {
+  color: #6b7280;
+}
+
+.error-tip {
+  position: absolute;
+  top: 100%;
+  left: 30px;
+  font-size: 11px;
+  color: #ef4444;
+  white-space: nowrap;
+  margin-top: 2px;
+}
+
+.apply-btn {
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #ffa116;
+  color: #1a1a2e;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.apply-btn:hover {
+  background-color: #ffb84d;
+}
+
+.random-btn {
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #3d3d5c;
+  color: #ffffff;
+  border: 1px solid #4d4d6c;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.random-btn:hover {
+  background-color: #4d4d6c;
+  border-color: #5d5d7c;
+}
+
+.preset-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.preset-label {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.preset-btn {
+  padding: 2px 10px;
+  font-size: 11px;
+  background-color: transparent;
+  color: #9ca3af;
+  border: 1px solid #3d3d5c;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.preset-btn:hover {
+  background-color: #2d2d44;
+  color: #ffa116;
+  border-color: #ffa116;
+}

src/components/DataInput.test.tsx

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { DataInput } from './DataInput'
+
+describe('DataInput', () => {
+  const defaultProps = {
+    l1: [2, 4, 3],
+    l2: [5, 6, 4],
+    onDataChange: vi.fn(),
+  }
+
+  it('应该渲染输入框和按钮', () => {
+    render(<DataInput {...defaultProps} />)
+    
+    expect(screen.getByTestId('l1-input')).toBeInTheDocument()
+    expect(screen.getByTestId('l2-input')).toBeInTheDocument()
+    expect(screen.getByTestId('apply-btn')).toBeInTheDocument()
+    expect(screen.getByTestId('random-btn')).toBeInTheDocument()
+  })
+
+  it('应该显示初始值', () => {
+    render(<DataInput {...defaultProps} />)
+    
+    expect(screen.getByTestId('l1-input')).toHaveValue('2, 4, 3')
+    expect(screen.getByTestId('l2-input')).toHaveValue('5, 6, 4')
+  })
+
+  it('应该渲染预设样例按钮', () => {
+    render(<DataInput {...defaultProps} />)
+    
+    expect(screen.getByTestId('preset-0')).toBeInTheDocument()
+    expect(screen.getByTestId('preset-1')).toBeInTheDocument()
+    expect(screen.getByTestId('preset-2')).toBeInTheDocument()
+    expect(screen.getByTestId('preset-3')).toBeInTheDocument()
+  })
+
+  it('点击预设样例应该更新输入并调用回调', () => {
+    const onDataChange = vi.fn()
+    render(<DataInput {...defaultProps} onDataChange={onDataChange} />)
+    
+    fireEvent.click(screen.getByTestId('preset-1'))
+    
+    expect(screen.getByTestId('l1-input')).toHaveValue('0')
+    expect(screen.getByTestId('l2-input')).toHaveValue('0')
+    expect(onDataChange).toHaveBeenCalledWith([0], [0])
+  })
+
+  it('点击随机按钮应该生成新数据', () => {
+    const onDataChange = vi.fn()
+    render(<DataInput {...defaultProps} onDataChange={onDataChange} />)
+    
+    fireEvent.click(screen.getByTestId('random-btn'))
+    
+    expect(onDataChange).toHaveBeenCalled()
+  })
+
+  it('输入无效数据应该显示错误', () => {
+    render(<DataInput {...defaultProps} />)
+    
+    const l1Input = screen.getByTestId('l1-input')
+    fireEvent.change(l1Input, { target: { value: 'abc' } })
+    fireEvent.click(screen.getByTestId('apply-btn'))
+    
+    expect(screen.getByText(/"abc" 不是有效数字/)).toBeInTheDocument()
+  })
+
+  it('输入超出范围的数字应该显示错误', () => {
+    render(<DataInput {...defaultProps} />)
+    
+    const l1Input = screen.getByTestId('l1-input')
+    fireEvent.change(l1Input, { target: { value: '10' } })
+    fireEvent.click(screen.getByTestId('apply-btn'))
+    
+    expect(screen.getByText(/节点值必须是0-9/)).toBeInTheDocument()
+  })
+
+  it('输入有效数据应该调用回调', () => {
+    const onDataChange = vi.fn()
+    render(<DataInput {...defaultProps} onDataChange={onDataChange} />)
+    
+    const l1Input = screen.getByTestId('l1-input')
+    const l2Input = screen.getByTestId('l2-input')
+    
+    fireEvent.change(l1Input, { target: { value: '1, 2, 3' } })
+    fireEvent.change(l2Input, { target: { value: '4, 5, 6' } })
+    fireEvent.click(screen.getByTestId('apply-btn'))
+    
+    expect(onDataChange).toHaveBeenCalledWith([1, 2, 3], [4, 5, 6])
+  })
+})