设计器操作

Designer 实例位于 runtime.designer 上，由 useDesignerApp() 创建。

import { useDesignerApp } from '@ptahjs/ui-vue';

const runtime = useDesignerApp({ id: 've1' });
const designer = runtime.designer;

所有会修改数据的操作都会进入历史记录，因此支持撤销和重做。

撤销 / 重做

designer.undo();
designer.redo();

场景操作

const sceneId = designer.addScene({
    label: '首页',
    props: { title: 'Home' },
});

designer.selectScene(sceneId);
designer.updateScene({ id: sceneId, patch: { props: { title: 'Dashboard' } } });
designer.moveScene({ id: sceneId, toIndex: 0 });
designer.cloneScene({ id: sceneId });
designer.deleteScene({ id: sceneId });

模块操作

const moduleId = designer.addModule({
    type: 'UiButton',
    parentId: sceneId,
    index: 0,
    props: { label: 'Click me' },
});

designer.selectModule(moduleId);
designer.updateModule({ id: moduleId, patch: { props: { label: 'Submit' } } });
designer.moveModule({ id: moduleId, toParentId: sceneId, toIndex: 1 });
designer.cloneModule({ id: moduleId });
designer.deleteModule({ id: moduleId });

剪贴板操作

designer.copyModule(moduleId);
designer.pasteModule({ targetParentId: sceneId, index: 2 });
designer.cutModule(moduleId);

自定义插槽操作

const slotId = designer.addCustomSlot({ parentId: moduleId, key: 'extra' }, 0);
designer.deleteCustomSlot({ id: slotId });

导出页面 Schema

const schema = designer.getPageSchema();

访问 Runtime 和历史记录

const runtimeRef = designer.getRuntime();
const history = designer.getHistory();

生命周期说明

• useDesignerApp() 会在组件挂载后自动准备设计器实例。
• <DesignerRoot> 负责提供根节点容器，供拖拽系统绑定。
• 手动在 Vue 外部管理设计器时，才需要显式调用 designer.mount() 和 designer.dispose()。