开发控件

在本节中，我们将开发一个简单的模块列表控件。为了演示，我们将使用 JSX 来创建这个控件。这个控件也可以被理解为一个组件。

新建模块

首先，新建一个 modulesWidget 目录，并在其中创建 index.jsx 文件。

modulesWidget
  └─index.jsx

index.jsx

下面是一个简单的模块列表控件的实现示例：

import { ref } from 'vue';
import { usePtahInstance } from '@ptahjs/creative-vue';

export const ModulesWidget = {
    name: 'ModulesWidget',
    setup() {
        const ptahInstance = usePtahInstance();
        // 通过 ptahInstance.$moduleResource.getData() 获取 moduleResource 的所有数据
        const items = ref(ptahInstance.$moduleResource.getData());

        // 渲染单个项的内容或图片
        const renderItemsContent = (data) => {
            return <a>{data.title}</a>;
        };

        // 渲染子项
        const renderItems = (data) => {
            return data.items.map((item) => {
                if (item.items && item.items.length > 0) {
                    return (
                        <div class="module-content" key={item.id}>
                            <strong>{item.title}</strong>
                            <ul>{item.items.map((subItem) => renderItemsContent(subItem))}</ul>
                        </div>
                    );
                } else {
                    return <ul key={item.id}>{renderItemsContent(item)}</ul>;
                }
            });
        };

        // 渲染组数据
        const renderGroup = () => {
            return (
                items.value
                    // 筛选出需要显示的数据
                    .filter((item) => item.visible)
                    .map((item) => (
                        <section class="source-module" key={item.id}>
                            <header>{item.title}</header>
                            {renderItems(item)}
                        </section>
                    ))
            );
        };

        return () => <aside class="module-resource-widget">{renderGroup()}</aside>;
    }
};

说明

• usePtahInstance: 通过 usePtahInstance Hook 获取应用实例，进而访问模块数据。
• ptahInstance.$moduleResource.getData(): 从 moduleResource 中获取所有模块的数据。
• renderItemsContent: 渲染单个模块项的内容。
• renderItems: 递归渲染模块及其子项。
• renderGroup: 过滤并渲染符合条件的模块组数据。

这个控件展示了如何利用底层 API 进行数据渲染和处理，为开发者提供了一个基本的模块列表视图。根据实际需求，你可以进一步扩展和自定义这个控件的功能。