From c5ecc48598e6457e89cdacd593f79e5d560391ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=BE=B7=E5=AE=87?= Date: Wed, 19 Aug 2026 16:25:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=20UI=20=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=99=A8=E4=BE=A7=E6=A0=8F=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将步骤概览移动到检查器上方并贴合右栏边缘 将左侧输入区拆为可折叠且独立滚动的伸缩面板 使 UI Tree 随面板高度稳定伸缩，避免展开尺寸反馈循环 补充可折叠侧栏 flex 布局回归测试 --- .../ui-editor/components/BindingOverview.tsx | 2 +- .../components/CollapsibleSidebarPanel.tsx | 54 +++++++ .../ui-editor/components/ImportOverview.tsx | 5 +- .../ui-editor/components/InputSidebar.tsx | 139 +++++++----------- .../components/Inspector/InspectorSidebar.tsx | 2 +- .../components/RecognitionOverview.tsx | 2 +- .../view/ui-editor/components/UiTreePanel.tsx | 34 +++-- .../src/view/ui-editor/index.tsx | 31 +++- .../tests/collapsibleSidebarPanel.test.tsx | 37 +++++ 9 files changed, 204 insertions(+), 102 deletions(-) create mode 100644 apps/ai-game-creator-shell/src/view/ui-editor/components/CollapsibleSidebarPanel.tsx create mode 100644 apps/ai-game-creator-shell/tests/collapsibleSidebarPanel.test.tsx diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/BindingOverview.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/BindingOverview.tsx index 24754facf..ee8d89bac 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/BindingOverview.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/BindingOverview.tsx @@ -37,7 +37,7 @@ export function BindingOverview({ return (
diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/CollapsibleSidebarPanel.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/CollapsibleSidebarPanel.tsx new file mode 100644 index 000000000..c188dd235 --- /dev/null +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/CollapsibleSidebarPanel.tsx @@ -0,0 +1,54 @@ +import { ChevronDown } from 'lucide-react'; +import { type ReactNode, useState } from 'react'; + +export function CollapsibleSidebarPanel({ + label, + title, + action, + children, + defaultOpen = true, + grow = 1, +}: { + label: string; + title: string; + action?: ReactNode; + children: ReactNode; + defaultOpen?: boolean; + grow?: number; +}) { + const [open, setOpen] = useState(defaultOpen); + + return ( +
+
+ + {action ?
{action}
: null} +
+ {open ? ( +
+ {children} +
+ ) : null} +
+ ); +} diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx index 562adfcb9..cd76e9fec 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/ImportOverview.tsx @@ -5,7 +5,8 @@ import type { UITree } from '../../../features/ui-editor/types/UITree'; function countUiComponents(nodes: UiNode[]): number { return nodes.reduce( - (total, node) => total + node.components.length + countUiComponents(node.children), + (total, node) => + total + node.components.length + countUiComponents(node.children), 0, ); } @@ -26,7 +27,7 @@ export function ImportOverview({ return (
diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx index fe363f319..83e8ff1ae 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/InputSidebar.tsx @@ -6,9 +6,7 @@ import type { Node as UiNode } from '../../../features/ui-editor/types/Node'; import type { NodeId } from '../../../features/ui-editor/types/NodeId'; import type { UIDesignImageId } from '../../../features/ui-editor/types/UIDesignImageId'; import type { UiEditorInputProjection } from '../useUiEditorPage'; -import { BindingOverview } from './BindingOverview'; -import { ImportOverview } from './ImportOverview'; -import { RecognitionOverview } from './RecognitionOverview'; +import { CollapsibleSidebarPanel } from './CollapsibleSidebarPanel'; import { UiTreePanel } from './UiTreePanel'; const SUPER_ROOT_ID = '__ui-editor-super-root__'; @@ -16,7 +14,6 @@ const SUPER_ROOT_ID = '__ui-editor-super-root__'; export function InputSidebar({ input }: { input: UiEditorInputProjection }) { const { projectPath, - activeStep, imageOrder, activeImageId, previewUrls, @@ -76,15 +73,39 @@ export function InputSidebar({ input }: { input: UiEditorInputProjection }) { }, [uiTrees]); return ( - ); } diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx index c6fb65ee5..8418ec7ef 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/components/Inspector/InspectorSidebar.tsx @@ -177,7 +177,7 @@ export function InspectorSidebar({
); } diff --git a/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx b/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx index 9a4a4751b..43add8bbc 100644 --- a/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx +++ b/apps/ai-game-creator-shell/src/view/ui-editor/index.tsx @@ -7,10 +7,13 @@ import { mockUiDesignStateStore, type UiDesignStateStore, } from '../../features/ui-editor/uiDesignStateStore'; +import { BindingOverview } from './components/BindingOverview'; import { EditorDialogs } from './components/EditorDialogs'; +import { ImportOverview } from './components/ImportOverview'; import { InputSidebar } from './components/InputSidebar'; import { InspectorSidebar } from './components/Inspector/InspectorSidebar'; import { PreviewWorkspace } from './components/preview/PreviewWorkspace'; +import { RecognitionOverview } from './components/RecognitionOverview'; import { ToolNavigation } from './components/ToolNavigation'; import { WorkflowActionCard } from './components/WorkflowActionCard'; import { UI_EDITOR_STEPS } from './model'; @@ -125,7 +128,33 @@ export default function UiEditorPage({ - +
+ {session.input.activeStep === 'structure-recognition' ? ( + { + session.input.focusNode(treeId, nodeId); + session.input.highlightStatusField('layout_status'); + }} + /> + ) : session.input.activeStep === 'visual-binding' ? ( + { + session.input.focusNode(treeId, nodeId); + session.input.highlightStatusField('components_status'); + }} + /> + ) : ( + + )} + +
{ + it('uses a zero flex basis when panels expand', () => { + render( +
+ +
tree content
+ + +
input content
+ +
, + ); + + const treePanel = screen + .getByRole('heading', { name: 'UI Tree' }) + .closest('section'); + const inputPanel = screen + .getByRole('heading', { name: '界面图' }) + .closest('section'); + + expect(treePanel?.style.flex).toBe('2 1 0px'); + expect(inputPanel?.style.flex).toBe('1 1 0px'); + + fireEvent.click(screen.getByRole('button', { name: /UI Tree/ })); + expect(treePanel?.style.flex).toBe('0 0 auto'); + + fireEvent.click(screen.getByRole('button', { name: /UI Tree/ })); + expect(treePanel?.style.flex).toBe('2 1 0px'); + }); +});