表单 API

form 命名空间提供了构建动态配置表单的功能，允许插件定义用户界面配置项。

命名空间

declare const form: forms;

核心接口

ComponentType

组件类型枚举。

• InputString: 文本输入框
• InputNumber: 数字输入框
• Toggle: 开关组件
• ContainerGroup: 容器分组
• RepeaterList: 可重复列表

DynamicFormDefinition

动态表单定义。

• title: 表单标题
• root: 根容器分组
• addChild(child): 添加子组件
• exportJson(): 导出JSON配置

CustomFormData

自定义表单数据。

• title: 标题
• id: 唯一标识
• svg: SVG图标

方法

createFormData

创建自定义表单数据。

function createFormData(title: string, id: string, svg: string | null): CustomFormData;

createForm

创建一个新的表单定义。

function createForm(title: string, formData: CustomFormData, description?: string, configure?: (api: forms, component: DynamicFormDefinition) => void): DynamicFormDefinition;

createStringInput

创建文本输入组件。

function createStringInput(id: string, title: string, description?: string, configure?: (api: forms, component: StringInput) => void): StringInput;

createNumberInput

创建数字输入组件。

function createNumberInput(id: string, title: string, description?: string, configure?: (api: forms, component: NumberInput) => void): NumberInput;

createToggle

创建开关组件。

function createToggle(id: string, title: string, description?: string, configure?: (api: forms, component: ToggleComponent) => void): ToggleComponent;

createContainerGroup

创建容器分组组件。

function createContainerGroup(id: string, title: string, description?: string, configure?: (api: forms, component: ContainerGroup) => void): ContainerGroup;

createRepeater

创建可重复列表组件。

function createRepeater(id: string, title: string, containerId: string, description?: string, configure?: (api: forms, component: RepeaterComponent) => void): RepeaterComponent;

createSelect

创建选择组件。

function createSelect(id: string, title: string, description?: string, configure?: (api: forms, component: SelectComponent) => void): SelectComponent;

示例

bus.on("enable", () => {
    const basic = form.createFormData("基础配置", "basic", null);
    form.createForm("基础配置", basic, "插件基础设置", (api, data) => {
        // 添加一个开关
        data.addChild(api.createToggle("enabled", "启用功能", "是否启用此功能", (api, toggle) => {
            toggle.defaultValue = true;
            toggle.trueLabel = "开启";
            toggle.falseLabel = "关闭";
        }));
        
        // 添加一个文本输入
        data.addChild(api.createStringInput("apiKey", "API Key", "请输入API密钥"));
    });
});