<DesignerRoot>

<DesignerRoot> 是设计器布局的根提供者组件。它通过 PTAH_INSTANCE 将 Runtime 实例注入 Vue 组件树，使所有子组件（<ScenesWidget>、<WorkspaceWidget>、<ParameterWidget> 等）都能访问到它。

Props

Prop	类型	必填	说明
app	Runtime	是	由 useDesignerApp() 创建的 Runtime 实例

使用示例

<template>
    <DesignerRoot :app="runtime">
        <!-- 所有 PtahJs 设计器组件都可以在这里使用 -->
        <div class="designer-layout">
            <aside>
                <ScenesWidget />
                <ModulesWidget />
            </aside>
            <main>
                <WorkspaceWidget />
            </main>
            <aside>
                <ParameterWidget type="module" />
                <EventsWidget type="module" />
            </aside>
        </div>
    </DesignerRoot>
</template>

<script setup>
import {
    useDesignerApp,
    DesignerRoot,
    ScenesWidget,
    ModulesWidget,
    WorkspaceWidget,
    ParameterWidget,
    EventsWidget,
} from '@ptahjs/ui-vue';

const runtime = useDesignerApp({ id: 've1' });
</script>

说明

• <DesignerRoot> 渲染一个 <div class="designer-root"> 包裹元素，id 属性设置为 runtime 的 id。
• 它使用 Vue 的 provide() 将 runtime 实例注入，使所有后代组件都能通过 inject(PTAH_INSTANCE) 访问。
• 每个 runtime 实例只需要一个 <DesignerRoot>。