开发 Widget

本节演示如何开发一个简单的自定义模块列表组件，用于设计器侧边栏。

目录结构

modulesWidget/
  index.jsx

index.jsx

import { inject } from 'vue';
import { PTAH_INSTANCE, RESOURCE_TYPE } from '@ptahjs/ui-vue';

export const ModulesWidget = {
    name: 'ModulesWidget',
    setup() {
        const app = inject(PTAH_INSTANCE);
        const moduleTree = app.getResource(RESOURCE_TYPE.INITIAL_MODULE_TREE) || [];

        const addModule = (node) => {
            app.designer.addModule({
                type: node.type,
                parentId: app.$state.currentSceneId,
            });
        };

        const renderTree = (nodes = []) =>
            nodes.map((node) => (
                <section key={node.type || node.title}>
                    {node.type && node.visible !== false && (
                        <div class="module-item" onClick={() => addModule(node)}>
                            {node.title}
                        </div>
                    )}
                    {node.children?.length > 0 && (
                        <div class="module-children">{renderTree(node.children)}</div>
                    )}
                </section>
            ));

        return () => <aside class="modules-widget">{renderTree(moduleTree)}</aside>;
    },
};

关键点

• 通过 inject(PTAH_INSTANCE) 获取运行时
• 通过 RESOURCE_TYPE.INITIAL_MODULE_TREE 读取模块树
• 通过 app.designer.addModule() 插入模块

使用方式

<template>
    <DesignerRoot :app="runtime">
        <aside>
            <ModulesWidget />
        </aside>
        <main>
            <WorkspaceWidget />
        </main>
    </DesignerRoot>
</template>