feat: 调整代码框宽度为1.3倍(494px)，隐藏画布缩放按钮

Author: CC11001100

src/components/CodeViewer.css

@@ -5,8 +5,8 @@
   background-color: #1e1e1e;
   border-radius: 8px;
   overflow: hidden;
-  width: 380px;
-  min-width: 320px;
+  width: 494px;
+  min-width: 416px;
 }
 
 .code-viewer-header {

src/components/TreeCanvas.tsx

@@ -88,7 +88,6 @@ const TreeCanvas: React.FC<TreeCanvasProps> = ({
   const prevPositionsRef = useRef<Map<number, { x: number; y: number }>>(new Map());
   const [dimensions, setDimensions] = useState({ width: propWidth, height: propHeight });
   const zoomRef = useRef<d3.ZoomBehavior<SVGSVGElement, unknown> | null>(null);
-  const [zoomScale, setZoomScale] = useState(1);
 
   // 监听容器大小变化
   useEffect(() => {
@@ -118,7 +117,7 @@ const TreeCanvas: React.FC<TreeCanvasProps> = ({
   const width = dimensions.width;
   const height = dimensions.height;
 
-  // 初始化 zoom 行为
+  // 初始化 zoom 行为（支持鼠标滚轮缩放和拖动平移）
   useEffect(() => {
     if (!svgRef.current) return;
 
@@ -131,7 +130,6 @@ const TreeCanvas: React.FC<TreeCanvasProps> = ({
         const mainGroup = svg.select('.main-group');
         if (!mainGroup.empty()) {
           mainGroup.attr('transform', event.transform);
-          setZoomScale(event.transform.k);
         }
       });
 
@@ -154,27 +152,6 @@ const TreeCanvas: React.FC<TreeCanvasProps> = ({
     setTreeState(tree.clone());
     prevPositionsRef.current.clear();
   }, [tree]);
-  
-  // 重置缩放当树改变时
-  const resetZoom = () => {
-    if (!svgRef.current || !zoomRef.current) return;
-    const svg = d3.select(svgRef.current);
-    svg.transition().duration(300).call(zoomRef.current.transform, d3.zoomIdentity);
-  };
-  
-  // 放大
-  const zoomIn = () => {
-    if (!svgRef.current || !zoomRef.current) return;
-    const svg = d3.select(svgRef.current);
-    svg.transition().duration(200).call(zoomRef.current.scaleBy, 1.3);
-  };
-  
-  // 缩小
-  const zoomOut = () => {
-    if (!svgRef.current || !zoomRef.current) return;
-    const svg = d3.select(svgRef.current);
-    svg.transition().duration(200).call(zoomRef.current.scaleBy, 0.7);
-  };
 
   // 应用步骤到树上
   useEffect(() => {
@@ -213,13 +190,6 @@ const TreeCanvas: React.FC<TreeCanvasProps> = ({
     const nodePositions: NodePosition[] = [];
     const linkData: LinkData[] = [];
 
-    // 计算树的深度
-    const getTreeDepth = (node: TreeNode | null): number => {
-      if (!node) return 0;
-      return 1 + Math.max(getTreeDepth(node.left), getTreeDepth(node.right));
-    };
-    
-    const treeDepth = getTreeDepth(treeState);
     // 使用画布宽度减去边距作为有效宽度
     const leftPadding = 80; // 左边距，用于标注显示
     const rightPadding = 60; // 右边距
@@ -607,24 +577,7 @@ const TreeCanvas: React.FC<TreeCanvasProps> = ({
   return (
     <div className="tree-canvas-container" ref={containerRef}>
       <svg ref={svgRef} width={width} height={height} />
-      <div className="zoom-controls">
-        <button className="zoom-btn" onClick={zoomIn} title="放大">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-          </svg>
-        </button>
-        <span className="zoom-level">{Math.round(zoomScale * 100)}%</span>
-        <button className="zoom-btn" onClick={zoomOut} title="缩小">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-            <path d="M19 13H5v-2h14v2z"/>
-          </svg>
-        </button>
-        <button className="zoom-btn" onClick={resetZoom} title="重置缩放">
-          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
-            <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>
-          </svg>
-        </button>
-      </div>
+{/* 缩放控制按钮已隐藏，用户可使用鼠标滚轮缩放、拖动平移 */}
       <div className="zoom-hint">
         <span>🖱️ 拖动平移 | 滚轮缩放</span>
       </div>