feat: 完善算法可视化与交互体验

补齐组件、样式与配置资源，完善输入和展示流程，便于后续维护与使用。

Author: CC11001100

.gitignore

@@ -1 +1,6 @@
 node_modules
+dist
+.pm2
+.codex-service-port
+tsconfig.tsbuildinfo
+.DS_Store

README.md

@@ -0,0 +1,6 @@
+# 2. 两数相加 - 可视化题解动画
+
+这是 LeetCode 第 2 题《两数相加》的分步骤可视化演示项目（TypeScript + React + D3）。
+
+GitHub Pages 在线地址：
+https://fuck-algorithm.github.io/leetcode-2-add-two-numbers/

src/App.css

@@ -1,69 +1,87 @@
 .app {
+  width: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  background-color: #0f0f1a;
-  color: #ffffff;
   overflow: hidden;
+  background: radial-gradient(circle at 18% 8%, #173253 0%, #091524 55%, #06101d 100%);
+  color: #e5f0ff;
 }
 
-.main-content {
-  display: flex;
+.app-main {
   flex: 1;
-  gap: 16px;
-  padding: 16px;
+  min-height: 0;
+  display: flex;
+  gap: 12px;
+  padding: 10px;
   overflow: hidden;
 }
 
-.left-panel {
-  flex: 0 0 45%;
-  min-width: 400px;
-  max-width: 600px;
+.canvas-column {
+  flex: 1.75;
+  min-width: 0;
   display: flex;
   flex-direction: column;
+  gap: 8px;
 }
 
-.right-panel {
+.side-column {
   flex: 1;
+  min-width: 410px;
+  max-width: 46%;
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  min-width: 500px;
+  gap: 8px;
+  min-height: 0;
 }
 
-.visualization-container {
+.side-column .code-panel {
   flex: 1;
-  min-height: 280px;
+  min-height: 0;
 }
 
 .step-description {
-  padding: 12px 16px;
-  background-color: #1a1a2e;
-  border-radius: 8px;
-  border-left: 3px solid #ffa116;
+  border: 1px solid #294363;
+  border-radius: 10px;
+  background: #102236;
+  padding: 8px 10px;
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+  font-size: 13px;
+}
+
+.step-description-title {
+  color: #f3b54c;
+  font-weight: 700;
+  flex-shrink: 0;
 }
 
-.description-text {
-  font-size: 14px;
-  color: #e0e0e0;
-  line-height: 1.5;
+.share-toast {
+  position: fixed;
+  right: 18px;
+  top: 90px;
+  z-index: 1400;
+  border: 1px solid #4b6a90;
+  background: #173050;
+  color: #d7eaff;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 12px;
 }
 
-/* 响应式调整 */
-@media (max-width: 1280px) {
-  .main-content {
+@media (max-width: 1180px) {
+  .app-main {
     flex-direction: column;
   }
 
-  .left-panel {
-    flex: 0 0 auto;
+  .side-column {
     max-width: none;
-    min-width: auto;
-    max-height: 40vh;
+    min-width: 0;
+    flex: 0 0 44%;
   }
 
-  .right-panel {
+  .canvas-column {
     flex: 1;
-    min-width: auto;
   }
 }

src/App.test.tsx

@@ -1,81 +1,28 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
-import App from './App'
-
-// Mock ResizeObserver
-beforeEach(() => {
-  ;(globalThis as typeof globalThis & { ResizeObserver: typeof ResizeObserver }).ResizeObserver =
-    class ResizeObserver {
-      observe() {}
-      unobserve() {}
-      disconnect() {}
-    }
-})
-
-describe('App Component', () => {
-  /**
-   * **Feature: leetcode-add-two-numbers-visualizer, Property 8: Responsive Layout Constraint**
-   * For viewport sizes >= 1280x720, verify no scrolling required
-   * **Validates: Requirements 8.2**
-   */
-  describe('Property 8: Responsive Layout Constraint', () => {
-    it('should render all main components', () => {
-      render(<App />)
-
-      // 验证所有主要组件都已渲染
-      expect(screen.getByText('2. 两数相加')).toBeInTheDocument()
-      expect(screen.getByTestId('code-panel')).toBeInTheDocument()
-      expect(screen.getByTestId('visualization-panel')).toBeInTheDocument()
-      expect(screen.getByTestId('control-panel')).toBeInTheDocument()
-      expect(screen.getByTestId('floating-ball')).toBeInTheDocument()
-    })
-
-    it('should have app container with overflow hidden', () => {
-      render(<App />)
-
-      const app = document.querySelector('.app')
-      expect(app).toBeInTheDocument()
-      // CSS class .app has overflow: hidden to prevent scrolling
-    })
-
-    it('should render header with correct links', () => {
-      render(<App />)
 
-      const leetcodeLink = screen.getByTestId('leetcode-link')
-      expect(leetcodeLink).toHaveAttribute('href', 'https://leetcode.cn/problems/add-two-numbers/')
+vi.mock('./hooks/useStoredPreference', () => ({
+  useStoredPreference: () => ({
+    value: 'java',
+    setValue: vi.fn(),
+    ready: true,
+  }),
+}))
+
+vi.mock('./hooks/useGithubStars', () => ({
+  useGithubStars: () => ({
+    stars: 0,
+    loading: false,
+  }),
+}))
 
-      const githubLink = screen.getByTestId('github-link')
-      expect(githubLink).toHaveAttribute(
-        'href',
-        'https://github.com/fuck-algorithm/leetcode-2-add-two-numbers'
-      )
-    })
-
-    it('should display step counter', () => {
-      render(<App />)
-
-      // 初始状态应该显示步骤 1
-      expect(screen.getByText(/步骤 1/)).toBeInTheDocument()
-    })
-  })
-
-  describe('Integration', () => {
-    it('should display control buttons with shortcuts', () => {
-      render(<App />)
-
-      expect(screen.getByTestId('prev-button')).toHaveTextContent('上一步')
-      expect(screen.getByTestId('prev-button')).toHaveTextContent('(←)')
-      expect(screen.getByTestId('next-button')).toHaveTextContent('下一步')
-      expect(screen.getByTestId('next-button')).toHaveTextContent('(→)')
-      expect(screen.getByTestId('play-pause-button')).toHaveTextContent('播放')
-      expect(screen.getByTestId('play-pause-button')).toHaveTextContent('(Space)')
-    })
-
-    it('should have prev button disabled at first step', () => {
-      render(<App />)
+import App from './App'
 
-      const prevButton = screen.getByTestId('prev-button')
-      expect(prevButton).toBeDisabled()
-    })
+describe('App', () => {
+  it('renders problem title and control panel', () => {
+    render(<App />)
+    expect(screen.getByText('2. 两数相加')).toBeInTheDocument()
+    expect(screen.getByTestId('control-panel')).toBeInTheDocument()
+    expect(screen.getByTestId('visualization-panel')).toBeInTheDocument()
   })
 })