创建一个 PtahJs 应用

概览

一个 PtahJs 应用通常由三部分组成：

1. createPtah()：注册模块、渲染器、参数组件等资源
2. useRuntimeApp() 或 useDesignerApp()：创建运行时实例
3. 内置组件：如 <Preview>、<DesignerRoot>、<WorkspaceWidget>

---

注册资源

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

const vueApp = createApp(App);

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

vueApp.mount('#app');

---

预览模式

<template>
    <Preview :app="runtime" />
</template>

<script setup>
import { useRuntimeApp, Preview } from '@ptahjs/ui-vue';

const runtime = useRuntimeApp({ id: 've1' });

fetch('/api/page-schema')
    .then((r) => r.json())
    .then((data) => runtime.schema(data));
</script>

---

设计器模式

<template>
    <DesignerRoot :app="runtime">
        <aside>
            <ScenesWidget />
            <ModulesWidget />
        </aside>
        <main>
            <WorkspaceWidget />
        </main>
        <aside>
            <ParameterWidget type="module" />
            <EventsWidget type="module" />
        </aside>
    </DesignerRoot>
</template>

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

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

designer.addScene({ props: { title: '第一页' } });

---

多实例

可以通过不同的 id 在同一页面运行多个独立实例。

vueApp.use(createPtah([
    {
        id: 've1',
        renderer: WebRenderer,
        modules: moduleTree1,
        parameterComponents: editors1,
    },
    {
        id: 've2',
        renderer: WebRenderer,
        modules: moduleTree2,
        parameterComponents: editors2,
    },
]));

---

导出页面数据

const pageJson = runtime.designer.getPageSchema();