diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/UiTreePanel.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/UiTreePanel.tsx index ae521ce83..14fde9869 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/UiTreePanel.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/UiTreePanel.tsx @@ -206,7 +206,6 @@ export function UiTreePanel({ }: UiTreePanelProps) { const treeApiRef = useRef | undefined>(undefined); const treeContainerRef = useRef(null); - const treeSizerRef = useRef(null); const [treeHeight, setTreeHeight] = useState(0); const [treeWidth, setTreeWidth] = useState(0); const [contextMenu, setContextMenu] = useState<{ @@ -246,21 +245,29 @@ export function UiTreePanel({ return rows; }, [root]); + const treeContentWidth = useMemo( + () => + treeRows.reduce((width, { node, depth }) => { + const labelWidth = Math.max( + 56, + (node.metadata.name || '未命名节点').length * 8, + ); + return Math.max(width, 16 + depth * 16 + 24 + labelWidth + 42 + 52); + }, 0), + [treeRows], + ); + useEffect(() => { - const sizer = treeSizerRef.current; const container = treeContainerRef.current; - if (!sizer || !container) return; + if (!container) return; const updateWidth = () => { - setTreeWidth( - Math.max(Math.ceil(sizer.scrollWidth), container.clientWidth), - ); + setTreeWidth(Math.max(treeContentWidth, container.clientWidth)); }; updateWidth(); const resizeObserver = new ResizeObserver(updateWidth); - resizeObserver.observe(sizer); resizeObserver.observe(container); return () => resizeObserver.disconnect(); - }, [treeRows]); + }, [treeContentWidth]); const handleMove: MoveHandler = ({ dragIds, @@ -334,35 +341,6 @@ export function UiTreePanel({ ref={treeContainerRef} className="relative min-h-0 flex-1 overflow-x-auto overflow-y-hidden" > - {root && treeHeight > 0 ? ( ref={treeApiRef} diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx index a85ecf46d..df640566d 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/preview/PreviewWorkspace.tsx @@ -512,7 +512,10 @@ export function PreviewWorkspace({ onScaleFromCenter={scaleViewportFromCenter} > {(actions) => ( -
+