fix: 修复比较标签底部文字被节点遮挡的问题

CC11001100 · CC11001100 · commit 8a3cd164840e · 2025-12-19T20:51:18.000+08:00
diff --git a/src/algorithm/diameterAlgorithm.ts b/src/algorithm/diameterAlgorithm.ts
@@ -185,6 +185,55 @@ export function generateAlgorithmSteps(root: D3TreeNode | null): AlgorithmStep[]
       return 0;
     }
 
+    // ========== 处理 isNull 的 D3TreeNode（可视化用的空节点） ==========
+    if (node.isNull) {
+      const currentPath = [...path, node.id];
+      
+      // 进入空节点
+      steps.push(createStep(
+        stepIndex++,
+        `📥 递归进入 NULL 节点`,
+        node.id, currentPath, [], [...diameterPath], globalDiameter,
+        [
+          { name: 'diameter', value: String(globalDiameter), line: 2 },
+          { name: 'node', value: 'null', line: 9 },
+        ],
+        9,
+        'recursion-enter',
+        { toNodeId: node.id, value: 'null' }
+      ));
+
+      // 检查 node == null，返回 0
+      steps.push(createStep(
+        stepIndex++,
+        `🔍 检查 node == null 为 true，返回深度 0`,
+        node.id, currentPath, [], [...diameterPath], globalDiameter,
+        [
+          { name: 'diameter', value: String(globalDiameter), line: 2 },
+          { name: 'return', value: '0', line: 11 },
+        ],
+        10,
+        'return-value',
+        { fromNodeId: node.id, toNodeId: parentId || undefined, value: 0 }
+      ));
+
+      // 退出空节点
+      steps.push(createStep(
+        stepIndex++,
+        `📤 递归退出 NULL 节点，返回深度 0`,
+        node.id, currentPath, [], [...diameterPath], globalDiameter,
+        [
+          { name: 'diameter', value: String(globalDiameter), line: 2 },
+          { name: 'return', value: '0', line: 11 },
+        ],
+        11,
+        'recursion-exit',
+        { fromNodeId: node.id, toNodeId: parentId || undefined, value: 0 }
+      ));
+
+      return 0;
+    }
+
     const currentPath = [...path, node.id];
 
     // ========== 递归进入 ==========
@@ -199,11 +248,12 @@ export function generateAlgorithmSteps(root: D3TreeNode | null): AlgorithmStep[]
       ],
       9,
       'recursion-enter',
-      { toNodeId: node.id, value: node.val }
+      { toNodeId: node.id, value: node.val ?? 'null' }
     ));
 
     // ========== 处理左子树 ==========
     // 递归调用depth(node.left)，进入左子树
+    const leftChildLabel = node.left ? (node.left.isNull ? 'null' : `node=${node.left.val}`) : 'null';
     steps.push(createStep(
       stepIndex++,
       `⬇️ 递归调用depth(node.left)，进入左子树`,
@@ -216,7 +266,7 @@ export function generateAlgorithmSteps(root: D3TreeNode | null): AlgorithmStep[]
       ],
       13,
       'param-pass',
-      { fromNodeId: node.id, toNodeId: node.left?.id, value: node.left ? `node=${node.left.val}` : 'null' }
+      { fromNodeId: node.id, toNodeId: node.left?.id, value: leftChildLabel }
     ));
 
     // 递归计算左子树深度
@@ -241,6 +291,7 @@ export function generateAlgorithmSteps(root: D3TreeNode | null): AlgorithmStep[]
 
     // ========== 处理右子树 ==========
     // 递归调用depth(node.right)，进入右子树
+    const rightChildLabel = node.right ? (node.right.isNull ? 'null' : `node=${node.right.val}`) : 'null';
     steps.push(createStep(
       stepIndex++,
       `⬇️ 递归调用depth(node.right)，进入右子树`,
@@ -254,7 +305,7 @@ export function generateAlgorithmSteps(root: D3TreeNode | null): AlgorithmStep[]
       ],
       14,
       'param-pass',
-      { fromNodeId: node.id, toNodeId: node.right?.id, value: node.right ? `node=${node.right.val}` : 'null' }
+      { fromNodeId: node.id, toNodeId: node.right?.id, value: rightChildLabel }
     ));
 
     // 递归计算右子树深度
diff --git a/src/components/AlgorithmModal/AlgorithmModal.tsx b/src/components/AlgorithmModal/AlgorithmModal.tsx
@@ -131,24 +131,47 @@ export function AlgorithmModal({ isOpen, onClose }: AlgorithmModalProps) {
           <section className="algo-section">
             <h3>💻 代码实现</h3>
             <div className="code-box">
-              <pre>{`class Solution {
+              <pre>{`/**
+ * 二叉树直径计算
+ * 
+ * 思路：通过深度优先搜索(DFS)遍历每个节点，
+ * 计算经过每个节点的最长路径，取最大值
+ */
+class Solution {
+    // 全局变量：记录遍历过程中发现的最大直径
     private int diameter = 0;
     
+    /**
+     * 主方法：计算二叉树的直径
+     * @param root 二叉树的根节点
+     * @return 二叉树的直径（最长路径的边数）
+     */
     public int diameterOfBinaryTree(TreeNode root) {
-        depth(root);
+        depth(root);  // 通过计算深度的过程，顺便更新直径
         return diameter;
     }
     
+    /**
+     * 辅助方法：计算以 node 为根的子树深度
+     * 同时在遍历过程中更新全局最大直径
+     * 
+     * @param node 当前节点
+     * @return 以该节点为根的子树深度
+     */
     private int depth(TreeNode node) {
+        // 递归终止条件：空节点深度为0
         if (node == null) return 0;
         
+        // 递归计算左子树深度
         int leftDepth = depth(node.left);
+        // 递归计算右子树深度
         int rightDepth = depth(node.right);
         
-        // 更新直径：经过当前节点的最长路径
+        // 关键步骤：更新直径
+        // 经过当前节点的路径长度 = 左子树深度 + 右子树深度
         diameter = Math.max(diameter, leftDepth + rightDepth);
         
-        // 返回当前子树的深度
+        // 返回当前子树的深度 = 较深子树的深度 + 1
         return Math.max(leftDepth, rightDepth) + 1;
     }
 }`}</pre>
diff --git a/src/components/TreeVisualization/TreeVisualization.tsx b/src/components/TreeVisualization/TreeVisualization.tsx
@@ -38,26 +38,27 @@ const ZOOM_STEP = 0.2;
 /**
  * 根据动画类型获取对应的颜色
  * 
- * 不同的动画类型使用不同的颜色，便于用户区分：
- * - 递归进入：青色
- * - 递归退出：红色
- * - 返回值传递：紫色
- * - 比较操作：黄色
- * - 更新直径：绿色
- * - 参数传递：蓝色
+ * 简化的颜色方案，相关操作使用相同颜色：
+ * - 递归进入/退出：青色（表示递归调用栈的变化）
+ * - 参数传递/返回值传递：紫色（表示数据在节点间流动）
+ * - 比较/更新直径：黄色（表示计算和更新操作）
  * 
  * @param type - 动画类型
  * @returns 对应的颜色值
  */
 function getAnimationColor(type: AnimationType): string {
   switch (type) {
-    case 'recursion-enter': return '#4ecdc4';  // 青色 - 递归进入
-    case 'recursion-exit': return '#ff6b6b';   // 红色 - 递归退出
-    case 'return-value': return '#a78bfa';     // 紫色 - 返回值传递
-    case 'compare': return '#fbbf24';          // 黄色 - 比较操作
-    case 'update-diameter': return '#22c55e';  // 绿色 - 更新直径
-    case 'param-pass': return '#60a5fa';       // 蓝色 - 参数传递
-    default: return '#ffa116';                 // 橙色 - 默认
+    case 'recursion-enter':   // 递归进入
+    case 'recursion-exit':    // 递归退出
+      return '#4ecdc4';       // 青色 - 递归调用栈变化
+    case 'param-pass':        // 参数传递
+    case 'return-value':      // 返回值传递
+      return '#a78bfa';       // 紫色 - 数据流动
+    case 'compare':           // 比较操作
+    case 'update-diameter':   // 更新直径
+      return '#fbbf24';       // 黄色 - 计算和更新
+    default: 
+      return '#ffa116';       // 橙色 - 默认
   }
 }
 
@@ -222,6 +223,7 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
       .attr('stroke-dasharray', '4,4'); // 虚线样式
 
     // 绘制连接到实际节点的边（实线）
+    // 边的颜色保持不变，不随动画类型改变
     g.selectAll('.edge-real')
       .data(edges.filter(e => !e[2])) // 只选择连接到实际节点的边
       .enter()
@@ -231,16 +233,8 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
       .attr('y1', d => d[0].y)
       .attr('x2', d => d[1].x)
       .attr('y2', d => d[1].y)
-      .attr('stroke', d => {
-        const edgeKey = `${d[0].id}-${d[1].id}`;
-        if (highlightedEdges.has(edgeKey)) return getAnimationColor(animationType);
-        return 'rgba(255, 255, 255, 0.3)';
-      })
-      .attr('stroke-width', d => {
-        const edgeKey = `${d[0].id}-${d[1].id}`;
-        if (highlightedEdges.has(edgeKey)) return 3;
-        return 2;
-      });
+      .attr('stroke', 'rgba(255, 255, 255, 0.3)')
+      .attr('stroke-width', 2);
 
     // ========== 绘制空节点（NULL节点） ==========
     const nullNodeGroups = g.selectAll('.node-null')
@@ -341,9 +335,10 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
         const toNode = nodesMap.get(animationData.toNodeId);
         
         if (fromNode && toNode) {
-          const isUpward = animationType === 'return-value';
-          const startNode = isUpward ? fromNode : toNode;
-          const endNode = isUpward ? toNode : fromNode;
+          // 参数传递：从父节点(from)到子节点(to)，箭头向下
+          // 返回值：从子节点(from)到父节点(to)，箭头向上
+          const startNode = fromNode;
+          const endNode = toNode;
           
           // 计算路径偏移，避免与边重叠
           const dx = endNode.x - startNode.x;
@@ -359,7 +354,7 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
             .attr('stroke-width', 2)
             .attr('fill', 'none')
             .attr('stroke-dasharray', '5,5')
-            .attr('marker-end', `url(#arrow-${isUpward ? 2 : 3})`);
+            .attr('marker-end', `url(#arrow-2)`);
 
           // 路径动画
           const totalLength = path.node()?.getTotalLength() || 0;
@@ -399,8 +394,9 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
             .text(valueText);
 
           // 在目标节点上方添加状态标签
-          const targetNode = isUpward ? toNode : fromNode;
-          const stateText = isUpward ? '返回值' : '参数传递';
+          const isParamPass = animationType === 'param-pass';
+          const targetNode = endNode;
+          const stateText = isParamPass ? '参数传递' : '返回值';
           const stateLabelWidth = 60;
           
           g.append('rect')
@@ -433,9 +429,9 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
           g.append('rect')
             .attr('class', 'compare-label-bg')
             .attr('x', currentNode.x - 55)
-            .attr('y', currentNode.y - 75)
+            .attr('y', currentNode.y - 85)
             .attr('width', 110)
-            .attr('height', 45)
+            .attr('height', 55)
             .attr('rx', 6)
             .attr('fill', animColor)
             .attr('opacity', 0.95);
@@ -444,7 +440,7 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
           g.append('text')
             .attr('class', 'compare-title')
             .attr('x', currentNode.x)
-            .attr('y', currentNode.y - 58)
+            .attr('y', currentNode.y - 66)
             .attr('text-anchor', 'middle')
             .attr('fill', '#1a1a2e')
             .attr('font-size', '10px')
@@ -455,7 +451,7 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
           g.append('text')
             .attr('class', 'compare-content')
             .attr('x', currentNode.x)
-            .attr('y', currentNode.y - 42)
+            .attr('y', currentNode.y - 48)
             .attr('text-anchor', 'middle')
             .attr('fill', '#1a1a2e')
             .attr('font-size', '13px')
@@ -466,7 +462,7 @@ export function TreeVisualization({ root, currentStep }: TreeVisualizationProps)
           g.append('text')
             .attr('class', 'compare-result')
             .attr('x', currentNode.x)
-            .attr('y', currentNode.y - 28)
+            .attr('y', currentNode.y - 32)
             .attr('text-anchor', 'middle')
             .attr('fill', '#1a1a2e')
             .attr('font-size', '10px')
diff --git a/src/utils/treeUtils.ts b/src/utils/treeUtils.ts
@@ -125,32 +125,21 @@ export function convertToD3Tree(
 
   // 递归转换子节点
   // 左子节点ID后缀为'-L'，右子节点ID后缀为'-R'
-  const hasLeftChild = node.left !== null;
-  const hasRightChild = node.right !== null;
-  const isLeaf = !hasLeftChild && !hasRightChild;
-
-  // 如果是叶子节点，不创建空子节点
-  if (isLeaf) {
-    d3Node.left = null;
-    d3Node.right = null;
-  } else {
-    // 非叶子节点，递归处理子节点
-    // 如果某一侧没有子节点，会创建一个空节点来显示 NULL
-    d3Node.left = convertToD3Tree(
-      node.left, 
-      `${id}-L`, 
-      depth + 1, 
-      d3Node, 
-      includeNullNodes
-    );
-    d3Node.right = convertToD3Tree(
-      node.right, 
-      `${id}-R`, 
-      depth + 1, 
-      d3Node, 
-      includeNullNodes
-    );
-  }
+  // 所有节点（包括叶子节点）都显示其空孩子，这样递归到 null 返回 0 的过程才完整
+  d3Node.left = convertToD3Tree(
+    node.left, 
+    `${id}-L`, 
+    depth + 1, 
+    d3Node, 
+    includeNullNodes
+  );
+  d3Node.right = convertToD3Tree(
+    node.right, 
+    `${id}-R`, 
+    depth + 1, 
+    d3Node, 
+    includeNullNodes
+  );
 
   return d3Node;
 }
@@ -179,10 +168,10 @@ export function calculateTreeLayout(
   if (!root) return;
 
   const maxDepth = getMaxDepth(root);
-  // 节点之间的最小水平间距
-  const nodeSpacing = 60;
-  // 层级之间的垂直间距，根据树的深度自适应
-  const levelHeight = Math.min(80, (height - 150) / (maxDepth + 1));
+  // 节点之间的最小水平间距（增大间距让树更舒展）
+  const nodeSpacing = 100;
+  // 层级之间的垂直间距，根据树的深度自适应（增大垂直间距）
+  const levelHeight = Math.min(120, (height - 100) / (maxDepth + 1));
 
   // 用于追踪下一个可用的x坐标
   let nextX = 0;
