<ScenesWidget>

INFO

<ScenesWidget> 组件必须在 <DesignerRoot> 组件内使用。

<ScenesWidget> 显示当前设计器会话的场景树。它从运行时状态读取场景数据，并将每个场景渲染为可点击、可拖拽的列表项。点击场景会调用 designer.selectScene(id)。

该组件支持层级场景（父/子），并通过缩进进行展示。

插槽

插槽	作用域	说明
#header	—	渲染在场景列表上方的内容
#content	scene（Scene 对象）	自定义每个场景项的显示方式，接收场景对象作为参数
#footer	—	渲染在场景列表下方的内容

使用示例

基础版本

<template>
    <ScenesWidget />
</template>

自定义场景显示

<template>
    <ScenesWidget>
        <template #header>
            <button @click="addScene">+ 添加场景</button>
        </template>

        <template #content="scene">
            <span>{{ scene.props?.title || scene.id }}</span>
        </template>

        <template #footer>
            <!-- 底部内容 -->
        </template>
    </ScenesWidget>
</template>

说明

• 场景项会自动添加 DnD 属性。拖拽场景项会触发 designer.dnd 上的 "drop" 事件。
• 当前活跃场景会添加 is-active CSS 类。
• 子场景按深度层级每级缩进 16px。