简介

什么是 PtahJs

PtahJs 是一个无头的低代码引擎，专注于 Schema 驱动渲染、可视化编辑器和可扩展运行时能力。

它解决什么问题

• 用 JSON Schema 描述页面、场景和模块结构
• 在 Vue 3 中按同一份 Schema 做预览或正式渲染
• 在设计器模式下完成拖拽、选中、编辑、复制粘贴和导出
• 通过生命周期链扩展编译和渲染过程

核心能力

• 基于 Vue 3 的运行时渲染
• 内置设计器模式和拖拽能力
• 模块化 Schema 系统
• 可插拔生命周期管道
• 支持 WebRenderer、SceneRenderer、FlowRenderer

基本工作流

1. 通过 createPtah() 注册模块、渲染器、场景配置和参数面板组件。
2. 在页面中使用 useRuntimeApp() 或 useDesignerApp() 创建实例。
3. 通过 runtime.schema(data) 加载页面 Schema，或通过 designer.getPageSchema() 导出。

典型场景

• 低代码页面搭建平台
• 可视化大屏或仪表盘编辑器
• 场景式内容搭建器
• 流程图或画布式编辑器

可视化结构

Header

module area

workspace

configuration area

<template>
    <main class="text-white">
        <header class="bg-purple-300 py-1 px-2 mb-1">Header</header>
        <div class="flex">
            <aside class="bg-purple-300 py-1 px-2 mr-1 w-[120px] flex items-center justify-center">
                module area
            </aside>
            <div class="bg-rose-300 py-1 px-2 flex-1 h-[300px] flex items-center justify-center">
                workspace
            </div>
            <div class="bg-purple-300 py-1 px-2 ml-1 w-[120px] flex items-center justify-center">
                configuration area
            </div>
        </div>
    </main>
</template>

<script>
export default {
    name: 'LowcodeLayout',
    setup() {
        return {};
    }
};
</script>