应用实例 API

createPtah()

createPtah(options) 会创建一个 Vue 插件，用于向 ResourceRepository 注册资源。

参数

• options: Object | Object[]
• 每项支持：
  • id: string（必填）
  • renderer: { install?: (runtime) => void, template: Component }
  • modules: Array（模块树）
  • sceneConfig: Object（必须包含 versions）
  • parameterComponents: Record<string, Component>
  • modulesLock?: Record<string, string>
  • featureFlags?: Record<string, boolean>

示例

import { createApp } from 'vue';
import { createPtah, WebRenderer } from '@ptahjs/ui-vue';
import App from './App.vue';

const app = createApp(App);

app.use(
    createPtah({
        id: 've1',
        renderer: WebRenderer,
        modules: moduleTree,
        parameterComponents: editors,
    })
);

app.mount('#app');

---

ResourceRepository

底层资源注册类。

• 构造函数：new ResourceRepository({ id, modulesLock?, featureFlags? })
• 方法：
  • rendererConfig(data)
  • sceneConfig(config)
  • parameterComponents(data)
  • modules(data)
  • mount()

---

Runtime 实例

useRuntimeApp() 和 useDesignerApp() 都返回 Runtime 实例。

常用字段

• id
• isDesigner
• renderMode（WEB / SCENE / FLOW）
• lifecycleChain
• hotkeys
• designer（仅设计器模式）

Runtime 方法

Schema 与资源

方法	说明
schema(data)	将页面 Schema 加载到运行时
getRawSchema()	读取传给 schema() 的原始数据
getModulesSchema(type?)	读取全部模块 Schema，或按类型读取单个模块 Schema
getSchemaResource(id?)	读取 Schema 资源表
getModuleDefaultVersion(type)	获取某个模块的默认版本
resolveModuleRuntime(type, version?)	解析某个模块版本对应的运行时实现

runtime.schema(pageJson);

const raw = runtime.getRawSchema();
const buttonSchema = runtime.getModulesSchema('UiButton');
const buttonRuntime = runtime.resolveModuleRuntime('UiButton');

场景和模块查询

方法	说明
getSceneIds()	获取页面内所有场景 id
getSceneById(id)	获取单个场景
getModuleById(id)	获取单个模块
getRootModuleIdsByScene(sceneId)	获取某个场景下的根模块 id 列表
getModuleChildrenIds(parentId)	获取某个场景或模块下的子模块 id 列表
getSubSchemaById(subId)	获取嵌套子 Schema 数据

const sceneIds = runtime.getSceneIds();
const currentScene = runtime.getSceneById(sceneIds[0]);
const rootIds = runtime.getRootModuleIdsByScene(currentScene.id);
const firstModule = runtime.getModuleById(rootIds[0]);

事件查询

方法	说明
getEventById(eventId)	获取单个事件 Schema
getOwnerEvents(ownerId)	获取场景或模块挂载的事件列表
getOwnerEventIds(ownerId)	仅获取事件 id 列表

当前选中状态

方法	说明
setCurrentSceneId(id)	设置当前场景 id
getCurrentSceneId()	获取当前场景 id
setCurrentModuleId(id)	设置当前模块 id
getCurrentModuleId()	获取当前模块 id

继承自 Kernel 的通用方法

这些方法定义在 Kernel 上，但在 Runtime 实例上同样可以直接调用。

方法	说明
subscribe(listener, options?)	订阅图状态变化
batch(fn)	将多次写操作合并为一次通知
getGraph()	读取当前 IRGraph
setStateKey(key, value)	设置根状态字段
replaceMapSection(section, newMap)	整体替换某个 Map 区段
applyOperation(op)	执行单个底层操作
applyOperations(ops)	批量执行多个底层操作

const unsubscribe = runtime.subscribe(({ version, changes }) => {
    console.log(version, changes);
});

runtime.batch(() => {
    runtime.setCurrentSceneId('scene-1');
    runtime.setCurrentModuleId('module-1');
});

unsubscribe();

销毁

方法	说明
dispose()	销毁运行时，并发出 dispose 事件

---

Designer 实例

设计器模式下，runtime.designer 提供：

历史和运行时访问

方法	说明
getRuntime()	获取绑定的 Runtime 实例
getHistory()	获取历史记录管理器
undo()	撤销上一步命令
redo()	重做上一步被撤销的命令
getPageSchema()	导出当前页面 Schema
mount()	将拖拽系统绑定到根节点
dispose()	销毁设计器拖拽和 DOM 事件绑定

场景方法

方法	说明
addScene(scene)	创建场景并返回其 id
selectScene(sceneId)	设置当前场景
updateScene(payload)	更新场景数据
moveScene(payload)	调整场景顺序
deleteScene(payload)	删除场景
cloneScene(payload)	克隆场景

模块方法

方法	说明
addModule(module)	创建模块并返回其 id
selectModule(moduleId)	设置当前模块
updateModule(payload)	更新模块数据
moveModule(payload)	将模块移动到其他父级或位置
deleteModule(payload)	删除模块子树
cloneModule(payload)	克隆模块
copyModule(moduleId)	将模块复制到内部剪贴板
pasteModule(options?)	将剪贴板内容粘贴到目标父级
cutModule(moduleId)	先复制再删除模块

自定义插槽方法

方法	说明
addCustomSlot(payload, index?)	创建自定义插槽模块并返回其 id
deleteCustomSlot(payload)	删除自定义插槽模块

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

const moduleId = designer.addModule({
    type: 'UiButton',
    parentId: sceneId,
    props: { label: '提交' },
});

designer.copyModule(moduleId);
designer.pasteModule({ targetParentId: sceneId });

const exported = designer.getPageSchema();