CocosPlugin/esengine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

可拖动调整大小的面板

Browse Source
This commit is contained in:
YHH
2025-10-15 09:43:48 +08:00
parent d0fcc0e447
commit 82451e9fd3
7 changed files with 365 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
packages/editor-app/src/App.tsx
View File

@@ -6,6 +6,7 @@ import { StartupPage } from './components/StartupPage';
import { SceneHierarchy } from './components/SceneHierarchy';
import { EntityInspector } from './components/EntityInspector';
import { AssetBrowser } from './components/AssetBrowser';
import { ResizablePanel } from './components/ResizablePanel';
import { TauriAPI } from './api/tauri';
import { TransformComponent } from './example-components/TransformComponent';
import { SpriteComponent } from './example-components/SpriteComponent';
@@ -236,32 +237,60 @@ function App() {
</div>
<div className="editor-content">
<div className="sidebar-left">
{entityStore && messageHub ? (
<SceneHierarchy entityStore={entityStore} messageHub={messageHub} />
) : (
<div className="loading">Loading...</div>
)}
</div>
<div className="main-content">
<div className="viewport">
<h3>{t('viewport.title')}</h3>
<p>{t('viewport.placeholder')}</p>
</div>
<div className="bottom-panel">
<AssetBrowser projectPath={currentProjectPath} locale={locale} />
</div>
</div>
<div className="sidebar-right">
{entityStore && messageHub ? (
<EntityInspector entityStore={entityStore} messageHub={messageHub} />
) : (
<div className="loading">Loading...</div>
)}
</div>
<ResizablePanel
direction="horizontal"
defaultSize={250}
minSize={150}
maxSize={400}
leftOrTop={
<div className="sidebar-left">
{entityStore && messageHub ? (
<SceneHierarchy entityStore={entityStore} messageHub={messageHub} />
) : (
<div className="loading">Loading...</div>
)}
</div>
}
rightOrBottom={
<ResizablePanel
direction="horizontal"
side="right"
defaultSize={280}
minSize={200}
maxSize={500}
leftOrTop={
<ResizablePanel
direction="vertical"
defaultSize={200}
minSize={100}
maxSize={400}
leftOrTop={
<div className="main-content">
<div className="viewport">
<h3>{t('viewport.title')}</h3>
<p>{t('viewport.placeholder')}</p>
</div>
</div>
}
rightOrBottom={
<div className="bottom-panel">
<AssetBrowser projectPath={currentProjectPath} locale={locale} />
</div>
}
/>
}
rightOrBottom={
<div className="sidebar-right">
{entityStore && messageHub ? (
<EntityInspector entityStore={entityStore} messageHub={messageHub} />
) : (
<div className="loading">Loading...</div>
)}
</div>
}
/>
}
/>
</div>
<div className="editor-footer">