@vtj/designer/types/framework/types.d.ts

VTJ 是一款基于 Vue3 + Typescript 的低代码页面可视化设计器。内置低代码引擎、渲染器和代码生成器，面向前端开发者，开箱即用。 无缝嵌入本地开发工程，不改变前端开发流程和编码习惯。

import { VNode, DefineComponent } from 'vue';
import { BlockPropDataType } from '@vtj/core';
export type VueComponent = Record<string, any> | VNode | DefineComponent<any, any, any, any>;
/**
 * 器件分组
 */
export declare enum WidgetGroup {
    Block = "block",
    Node = "node"
}
/**
 * 区域类型
 */
export declare enum RegionType {
    Brand = "Brand",
    Toolbar = "Toolbar",
    Actions = "Actions",
    Apps = "Apps",
    Workspace = "Workspace",
    Settings = "Settings",
    Status = "Status",
    Preview = "Preview"
}
/**
 * 基础器件
 */
export interface Widget {
    /**
     * 器件名称
     */
    name: string;
    /**
     * 放置区域
     */
    region: keyof typeof RegionType;
    /**
     * Vue组件
     */
    component: VueComponent;
    /**
     * 组件默认参数
     */
    props?: Record<string, any>;
    /**
     * 不可见，停用
     */
    invisible?: boolean;
    /**
     * 分组名称
     */
    group?: string;
    /**
     * 排序
     */
    order?: number;
}
/**
 * App类型器件
 */
export interface AppWidget extends Widget {
    /**
     * 标识app
     */
    type: 'app';
    /**
     *  应用图标
     */
    icon: VueComponent;
    /**
     * 应用名称
     */
    label?: string;
    /**
     * 应用打开方式
     */
    openType?: 'panel' | 'link' | 'dialog';
    /**
     * 链接url，openType 为 link 时有效
     */
    url?: string;
}
/**
 * 选项卡类型器件
 */
export interface TabWidget extends Widget {
    /**
     * 标识tab
     */
    type: 'tab';
    /**
     * tab名称
     */
    label: string;
    /**
     * tab图标
     */
    icon?: VueComponent;
    /**
     * 能关闭的
     */
    closable?: boolean;
    /**
     * 操作按钮
     */
    actions?: any[];
}
/**
 * 设置器配置
 */
export interface Setter {
    /**
     * 设置器名称
     */
    name: string;
    /**
     * 设置器组件
     */
    component: VueComponent;
    /**
     * 设置器数据类型
     */
    type: BlockPropDataType;
    /**
     * 设计器参数
     */
    props?: Record<string, any>;
}