feat: 实现二叉树居中显示、NULL节点绘制和代码注释

1. 二叉树居中显示：
   - 修改 calculateTreeLayout 函数，使树在画布中央水平和垂直居中
   - 在 TreeVisualization 组件内部进行布局计算

2. 空节点（NULL节点）显示：
   - 修改 D3TreeNode 类型，添加 isNull 属性
   - 修改 convertToD3Tree 函数，为非叶子节点的空子节点创建 NULL 节点
   - 用虚线边框和虚线连接线绘制 NULL 节点

3. 代码注释：
   - 为所有组件添加详细的中文注释
   - 包括组件功能说明、属性接口说明、函数说明等

Author: CC11001100

src/App.tsx

@@ -1,3 +1,17 @@
+/**
+ * 应用主组件
+ * 
+ * LeetCode 543. 二叉树的直径 - 算法可视化
+ * 
+ * 这是一个交互式的算法可视化工具，帮助用户理解二叉树直径算法的执行过程。
+ * 
+ * 主要功能：
+ * - 输入二叉树数据（支持手动输入、预设样例、随机生成）
+ * - 可视化展示二叉树结构
+ * - 逐步演示算法执行过程
+ * - 同步显示代码执行位置和变量状态
+ */
+
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { Header } from './components/Header/Header';
 import { InputPanel } from './components/InputPanel/InputPanel';
@@ -6,28 +20,44 @@ import { CodePanel } from './components/CodePanel/CodePanel';
 import { ControlPanel } from './components/ControlPanel/ControlPanel';
 import { WeChatFloat } from './components/WeChatFloat/WeChatFloat';
 
-import { buildTreeFromArray, convertToD3Tree, calculateTreeLayout } from './utils/treeUtils';
+import { buildTreeFromArray, convertToD3Tree } from './utils/treeUtils';
 import { generateAlgorithmSteps } from './algorithm/diameterAlgorithm';
 import './App.css';
 
+// ========== 配置常量 ==========
+/** 默认的树数据，对应 LeetCode 示例1 */
 const DEFAULT_DATA: (number | null)[] = [1, 2, 3, 4, 5];
+/** 自动播放时每步之间的间隔时间（毫秒） */
 const PLAY_INTERVAL = 1500;
 
+/**
+ * App 主组件
+ * 
+ * 状态管理：
+ * - treeData: 当前的树数据（LeetCode 数组格式）
+ * - currentStepIndex: 当前显示的算法步骤索引
+ * - isPlaying: 是否正在自动播放
+ */
 function App() {
+  // 树数据状态
   const [treeData, setTreeData] = useState<(number | null)[]>(DEFAULT_DATA);
+  // 当前步骤索引
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  // 是否正在自动播放
   const [isPlaying, setIsPlaying] = useState(false);
 
-  // 构建树和生成步骤
+  /**
+   * 构建树和生成算法步骤
+   * 
+   * 使用 useMemo 缓存计算结果，只在 treeData 变化时重新计算
+   * 注意：布局计算在 TreeVisualization 组件内部进行，以确保使用正确的容器尺寸
+   */
   const { d3Tree, steps } = useMemo(() => {
+    // 从数组构建二叉树
     const tree = buildTreeFromArray(treeData);
+    // 转换为 D3 可视化格式（包含空节点）
     const d3Tree = convertToD3Tree(tree);
-    
-    // 计算布局
-    if (d3Tree) {
-      calculateTreeLayout(d3Tree, 500, 300);
-    }
-    
+    // 生成算法执行步骤
     const steps = generateAlgorithmSteps(d3Tree);
     return { d3Tree, steps };
   }, [treeData]);

src/components/AlgorithmModal/AlgorithmModal.tsx

@@ -1,17 +1,37 @@
+/**
+ * 算法思路弹窗组件
+ * 
+ * 以图文并茂的方式详细解释二叉树直径算法的核心思路，
+ * 帮助用户理解算法的原理和实现。
+ */
+
 import { useEffect, useCallback } from 'react';
 import './AlgorithmModal.css';
 
+/**
+ * AlgorithmModal 组件的属性接口
+ */
 interface AlgorithmModalProps {
+  /** 弹窗是否打开 */
   isOpen: boolean;
+  /** 关闭弹窗的回调函数 */
   onClose: () => void;
 }
 
 /**
- * 算法思路弹窗组件
- * 详细解释二叉树直径算法的核心思路
+ * AlgorithmModal 组件
+ * 
+ * 功能：
+ * - 显示算法的详细思路讲解
+ * - 包含问题定义、核心思路、递归过程、示例分析、复杂度分析等内容
+ * - 支持 ESC 键关闭
+ * - 点击遮罩层关闭
+ * - 打开时禁止背景滚动
  */
 export function AlgorithmModal({ isOpen, onClose }: AlgorithmModalProps) {
-  // ESC键关闭弹窗
+  /**
+   * 键盘事件处理：ESC 键关闭弹窗
+   */
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       onClose();

src/components/CodePanel/CodePanel.tsx

@@ -1,17 +1,43 @@
+/**
+ * 代码面板组件
+ * 
+ * 显示算法的 Java 代码，并根据当前执行步骤：
+ * - 高亮当前执行的代码行
+ * - 在相关行旁边显示变量的当前值
+ */
+
 import { useMemo } from 'react';
 import { AlgorithmStep, VariableState } from '../../types';
 import { parseCodeLines } from '../../algorithm/diameterAlgorithm';
 import './CodePanel.css';
 
+/**
+ * CodePanel 组件的属性接口
+ */
 interface CodePanelProps {
+  /** 当前算法执行步骤，包含高亮行号和变量状态 */
   currentStep: AlgorithmStep | null;
 }
 
+/**
+ * CodePanel 组件
+ * 
+ * 功能：
+ * - 显示带行号的 Java 代码
+ * - 根据当前步骤高亮对应的代码行
+ * - 在代码行旁边显示当前变量的值
+ * - 提供语法高亮（关键字、类名、方法名、数字等）
+ */
 export function CodePanel({ currentStep }: CodePanelProps) {
+  // 解析代码为行数组，只需要执行一次
   const codeLines = useMemo(() => parseCodeLines(), []);
+  // 当前高亮的行号
   const currentLine = currentStep?.codeLineNumber || 0;
 
-  // 创建变量映射：行号 -> 变量列表
+  /**
+   * 创建变量映射：行号 -> 变量列表
+   * 用于在对应的代码行旁边显示变量值
+   */
   const variablesByLine = useMemo(() => {
     const variables = currentStep?.variables || [];
     const map = new Map<number, VariableState[]>();
@@ -60,36 +86,54 @@ export function CodePanel({ currentStep }: CodePanelProps) {
   );
 }
 
-// 简单的语法高亮
+/**
+ * 简单的 Java 语法高亮函数
+ * 
+ * 将代码中的关键字、类名、方法名、数字和注释用不同的 CSS 类包裹，
+ * 以便在 CSS 中设置不同的颜色。
+ * 
+ * @param code - 原始代码字符串
+ * @returns 带有 HTML 标签的高亮代码
+ */
 function highlightSyntax(code: string): string {
-  // 关键字
+  // Java 关键字列表
   const keywords = ['class', 'private', 'public', 'int', 'if', 'return', 'null', 'new'];
+  
+  // 首先转义 HTML 特殊字符，防止 XSS
   let result = escapeHtml(code);
 
-  // 高亮关键字
+  // 高亮关键字（紫色）
   for (const kw of keywords) {
     const regex = new RegExp(`\\b${kw}\\b`, 'g');
     result = result.replace(regex, `<span class="keyword">${kw}</span>`);
   }
 
-  // 高亮类名
+  // 高亮类名（青色）
   result = result.replace(/\b(TreeNode|Solution|Math)\b/g, '<span class="class-name">$1</span>');
 
-  // 高亮方法名
+  // 高亮方法名（黄色）
   result = result.replace(/\b(diameterOfBinaryTree|depth|max)\b/g, '<span class="method-name">$1</span>');
 
-  // 高亮数字
+  // 高亮数字（橙色）
   result = result.replace(/\b(\d+)\b/g, '<span class="number">$1</span>');
 
-  // 高亮注释
+  // 高亮注释（灰色）
   result = result.replace(/(\/\/.*)$/gm, '<span class="comment">$1</span>');
 
   return result;
 }
 
+/**
+ * HTML 特殊字符转义函数
+ * 
+ * 将 HTML 特殊字符转换为实体，防止 XSS 攻击
+ * 
+ * @param text - 原始文本
+ * @returns 转义后的安全文本
+ */
 function escapeHtml(text: string): string {
   return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
+    .replace(/&/g, '&amp;')   // & 必须最先替换
+    .replace(/</g, '&lt;')    // 小于号
+    .replace(/>/g, '&gt;');   // 大于号
 }

src/components/ControlPanel/ControlPanel.tsx

@@ -1,17 +1,48 @@
+/**
+ * 控制面板组件
+ * 
+ * 提供算法演示的播放控制功能，包括：
+ * - 播放/暂停
+ * - 上一步/下一步
+ * - 进度条拖拽
+ * - 重置
+ * - 键盘快捷键支持
+ */
+
 import { useEffect, useCallback } from 'react';
 import './ControlPanel.css';
 
+/**
+ * ControlPanel 组件的属性接口
+ */
 interface ControlPanelProps {
+  /** 当前步骤索引（从0开始） */
   currentStep: number;
+  /** 总步骤数 */
   totalSteps: number;
+  /** 是否正在自动播放 */
   isPlaying: boolean;
+  /** 上一步回调 */
   onPrevious: () => void;
+  /** 下一步回调 */
   onNext: () => void;
+  /** 播放/暂停切换回调 */
   onPlayPause: () => void;
+  /** 跳转到指定步骤回调 */
   onSeek: (step: number) => void;
+  /** 重置回调 */
   onReset: () => void;
 }
 
+/**
+ * ControlPanel 组件
+ * 
+ * 功能：
+ * - 显示播放控制按钮（重置、上一步、播放/暂停、下一步）
+ * - 显示当前步骤和总步骤数
+ * - 提供可点击/拖拽的进度条
+ * - 支持键盘快捷键：左箭头（上一步）、右箭头（下一步）、空格（播放/暂停）
+ */
 export function ControlPanel({
   currentStep,
   totalSteps,
@@ -22,6 +53,7 @@ export function ControlPanel({
   onSeek,
   onReset,
 }: ControlPanelProps) {
+  // 计算进度百分比，用于进度条显示
   const progress = totalSteps > 1 ? (currentStep / (totalSteps - 1)) * 100 : 0;
 
   // 键盘快捷键

src/components/Header/Header.tsx

@@ -1,11 +1,28 @@
+/**
+ * 页面头部组件
+ * 
+ * 显示题目标题、LeetCode链接、GitHub源码链接和算法思路按钮
+ */
+
 import { useState } from 'react';
 import { AlgorithmModal } from '../AlgorithmModal/AlgorithmModal';
 import './Header.css';
 
+// LeetCode 题目链接
 const LEETCODE_URL = 'https://leetcode.cn/problems/diameter-of-binary-tree/';
+// GitHub 源码仓库链接
 const GITHUB_URL = 'https://github.com/fuck-algorithm/leetcode-543-diameter-of-binary-tree';
 
+/**
+ * Header 组件
+ * 
+ * 功能：
+ * - 显示题目编号和标题，点击跳转到 LeetCode 原题
+ * - 提供"算法思路"按钮，点击弹出算法讲解弹窗
+ * - 提供 GitHub 源码链接
+ */
 export function Header() {
+  // 控制算法思路弹窗的显示状态
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (

src/components/InputPanel/InputPanel.tsx

@@ -1,22 +1,51 @@
+/**
+ * 输入面板组件
+ * 
+ * 提供二叉树数据的输入功能，包括：
+ * - 手动输入数组格式的树数据
+ * - 预设的样例数据快速选择
+ * - 随机生成树数据
+ */
+
 import { useState } from 'react';
 import { parseArrayInput, validateTreeArray, generateRandomTree } from '../../utils/treeUtils';
 import './InputPanel.css';
 
+/**
+ * InputPanel 组件的属性接口
+ */
 interface InputPanelProps {
+  /** 数据变化时的回调函数 */
   onDataChange: (data: (number | null)[]) => void;
+  /** 当前的树数据 */
   currentData: (number | null)[];
 }
 
+/**
+ * 预设的样例数据
+ * 包含多种典型的二叉树结构，方便用户快速测试
+ */
 const SAMPLE_DATA: { label: string; data: (number | null)[] }[] = [
-  { label: '示例1', data: [1, 2, 3, 4, 5] },
-  { label: '示例2', data: [1, 2] },
-  { label: '完全二叉树', data: [1, 2, 3, 4, 5, 6, 7] },
-  { label: '左斜树', data: [1, 2, null, 3, null, 4] },
-  { label: '右斜树', data: [1, null, 2, null, 3, null, 4] },
+  { label: '示例1', data: [1, 2, 3, 4, 5] },           // LeetCode 示例1
+  { label: '示例2', data: [1, 2] },                    // LeetCode 示例2
+  { label: '完全二叉树', data: [1, 2, 3, 4, 5, 6, 7] }, // 完全二叉树
+  { label: '左斜树', data: [1, 2, null, 3, null, 4] },  // 只有左子节点的斜树
+  { label: '右斜树', data: [1, null, 2, null, 3, null, 4] }, // 只有右子节点的斜树
 ];
 
+/**
+ * InputPanel 组件
+ * 
+ * 功能：
+ * - 提供输入框让用户输入 LeetCode 格式的数组
+ * - 提供"应用"按钮验证并应用输入
+ * - 提供"随机生成"按钮生成随机树
+ * - 提供预设样例按钮快速切换不同的树结构
+ */
 export function InputPanel({ onDataChange, currentData }: InputPanelProps) {
+  // 输入框的值
   const [inputValue, setInputValue] = useState(JSON.stringify(currentData));
+  // 错误信息，用于显示输入验证失败的提示
   const [error, setError] = useState<string | null>(null);
 
   const handleInputChange = (value: string) => {