<ModuleConfigureWidget>

INFO

<ModuleConfigureWidget> 组件必须在 <Provider> 组件内使用。

<ModuleConfigureWidget> 组件用于展示和配置模块的参数。它支持精简版和定制版使用方式，提供灵活的插槽系统，允许开发者根据需求自定义模块配置界面的展示内容。

组件结构

<ModuleConfigureWidget> 组件包含以下主要部分：

1. header（可选）：模块的标题部分，通常显示模块的名称或标签。
2. groupHeader（可选）：模块分组的标题，用于将模块分成不同的组。
3. before（可选）：自定义模块参数前的内容展示区域，可以用于显示额外的信息或描述。
4. after（可选）：自定义模块参数后的内容展示区域，用于添加额外的按钮或信息。
5. empty（可选）：当没有模块参数时，显示的空状态文本。

使用示例

精简版

在精简版中，<ModuleConfigureWidget> 组件会自动展示模块参数，适用于不需要自定义内容的场景：

<template>
    <ModuleConfigureWidget />
</template>

定制版

在定制版中，您可以通过插槽（slot）自定义模块配置项的展示方式。以下是一个通过插槽自定义的示例：

<template>
    <ModuleConfigureWidget>
        <!-- 自定义 Header 部分，显示模块的标签 -->
        <template #header="item">{{ item.label }}</template>

        <!-- 自定义 Group Header 部分 -->
        <template #groupHeader="item">{{ item.label }}</template>

        <!-- 自定义 Before 部分，显示模块前的信息 -->
        <template #before="item"><span>1</span></template>

        <!-- 自定义 After 部分，显示模块后的内容 -->
        <template #after="item"><span>2</span></template>

        <!-- 当没有数据时显示的空状态 -->
        <template #empty>没有数据</template>
    </ModuleConfigureWidget>
</template>

插槽说明

• header 插槽：可以自定义每个模块的标题显示，item 是模块的数据对象，通常包含模块的标签或名称。
• groupHeader 插槽：自定义模块组的标题，用于将不同的模块分组显示。
• before 插槽：自定义模块参数前的内容展示，通常可以用于添加额外的描述信息。
• after 插槽：自定义模块参数后的内容展示，可以用于添加按钮、链接或其他交互元素。
• empty 插槽：当没有模块数据时显示的空状态信息，例如“没有数据”或“暂无配置”。

配置和自定义

<ModuleConfigureWidget> 提供了极高的灵活性，您可以根据需求通过插槽定制每个模块的展示内容。除了基本的插槽自定义外，还可以结合其他组件进行复杂的交互和动态更新。

注意事项

• 请确保 <ModuleConfigureWidget> 组件始终在 <Provider> 组件的上下文中使用，因为它依赖于 Provider 提供的全局状态或功能。
• 使用插槽时，可以选择只实现需要定制的部分，未定义的部分将使用组件的默认展示方式。

配合其他组件使用

<ModuleConfigureWidget> 组件可以与其他配置相关的组件结合使用，如动态表单、拖拽排序等，构建复杂的模块配置界面。