@ant-design/pro-layout

const DefaultFooter: React.FC<FooterProps>;

const DefaultHeader: React.FC<
    {
        collapsed?: boolean;
        onCollapse?: (collapsed: boolean) => void;
        isMobile?: boolean;
        logo?: React.ReactNode;
        menuRender?: WithFalse<
            (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
        >;
        rightContentRender?: WithFalse<(props: HeaderViewProps) => React.ReactNode>;
        className?: string;
        prefixCls?: string;
        appList?: AppListProps;
        itemClick?: (
            item: AppItemProps,
            popoverRef?: React.RefObject<HTMLSpanElement>
        ) => void;
        menuData?: MenuDataItem[];
        onMenuHeaderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
        style?: React.CSSProperties;
        menuHeaderRender?: WithFalse<
            (
                logo: React.ReactNode,
                title: React.ReactNode,
                props?: SiderMenuProps
            ) => React.ReactNode
        >;
        headerContentRender?: WithFalse<
            (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
        >;
        collapsedButtonRender?: WithFalse<
            (collapsed?: boolean, defaultDom?: React.ReactNode) => React.ReactNode
        >;
        splitMenus?: boolean;
        actionsRender?: WithFalse<(props: HeaderViewProps) => any>;
        avatarProps?: any;
        children?: React.ReactNode;
    } & Partial<PureSettings> & {
            isMobile?: boolean;
            logo?: React.ReactNode;
            headerRender?: WithFalse<
                (
                    props: HeaderViewProps,
                    defaultDom: React.ReactNode
                ) => React.ReactNode
            >;
            headerTitleRender?: WithFalse<
                (
                    logo: React.ReactNode,
                    title: React.ReactNode,
                    props: HeaderViewProps
                ) => React.ReactNode
            >;
            headerContentRender?: WithFalse<
                (
                    props: HeaderViewProps,
                    defaultDom: React.ReactNode
                ) => React.ReactNode
            >;
            siderWidth?: number;
            hasSiderMenu?: boolean;
        } & PrivateSiderMenuProps
>;

const FooterToolbar: React.FC<FooterToolbarProps>;

const GridContent: React.FC<GridContentProps>;

const PageContainer: React.FC<PageContainerProps>;

const PageHeader: React.FC<PageHeaderProps>;

const PageLoading: React.FC<any>;

const ProBreadcrumb: React.FC<BreadcrumbProps>;

const ProHelpContentPanel: React.FC<ProHelpContentPanelProps>;

const ProHelpDrawer: React.FC<ProHelpDrawerProps>;

const ProHelpModal: React.FC<ProHelpModalProps>;

const ProHelpPanel: React.FC<ProHelpPanelProps>;

const ProHelpPopover: React.FC<ProHelpPopoverProps>;

const ProHelpProvide: React.Context<{
    dataSource: ProHelpDataSource<any>[];
    valueTypeMap: Map<
        string,
        (item: ProHelpDataSourceChildren<any>, index: number) => React.ReactNode
    >;
    onLoadContext?: (
        key: React.Key,
        context: ProHelpDataSource<any>['children'][number]
    ) => Promise<ProHelpDataSourceChildren<any>[]>;
}>;

const ProHelpSelect: React.FC<
    Omit<
        SelectProps,
        'onSearch' | 'optionFilterProp' | 'options' | 'filterOption'
    > & { iconClassName?: string }
>;

const ProLayout: React.FC<ProLayoutProps>;

const RenderContentPanel: React.FC<{
    dataSourceChildren: ProHelpDataSourceChildren<any>[];
    onInit?: (ref: HTMLDivElement) => void;
}>;

const RouteContext: React.Context<RouteContextType>;

const SelectKeyProvide: React.Context<{
    selectedKey: string | undefined;
    setSelectedKey: (key: string | undefined) => void;
}>;

const SettingDrawer: React.FC<SettingDrawerProps>;

const TopNavHeader: React.FC<TopNavHeaderProps>;

const WaterMark: React.FC<WaterMarkProps>;

getMenuData: (
    routes: Readonly<Route[]>,
    menu?: { locale?: boolean },
    formatMessage?: (message: MessageDescriptor) => string,
    menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[]
) => {
    breadcrumb: Record<string, MenuDataItem>;
    breadcrumbMap: Map<string, MenuDataItem>;
    menuData: MenuDataItem[];
};

getPageTitle: (props: GetPageTitleProps, ignoreTitle?: boolean) => string;

ProHelp: <ValueTypeMap = { text: any }>({
    dataSource,
    valueTypeMap,
    onLoadContext,
    ...props
}: ProHelpProps<ValueTypeMap>) => any;

ProPageHeader: (
    props: PageContainerProps & { prefixedClassName: string }
) => import('react/jsx-runtime').JSX.Element | null;

type AppItemProps = {
    title: React.ReactNode;
    desc?: React.ReactNode;
    icon?: React.ReactNode | (() => React.ReactNode);
    url?: string;
    target?: string;
    children?: Omit<AppItemProps, 'children'>[];
};

type AppListProps = AppItemProps[];

type FooterProps = {
    links?: WithFalse<
        {
            key?: string;
            title: React.ReactNode;
            href: string;
            blankTarget?: boolean;
        }[]
    >;
    copyright?: WithFalse<string>;
    style?: CSSProperties;
    className?: string;
    prefixCls?: string;
};

type HeaderViewProps = GlobalHeaderProps & {
    isMobile?: boolean;
    logo?: React.ReactNode;
    headerRender?: WithFalse<
        (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
    >;
    headerTitleRender?: WithFalse<
        (
            logo: React.ReactNode,
            title: React.ReactNode,
            props: HeaderViewProps
        ) => React.ReactNode
    >;
    headerContentRender?: WithFalse<
        (props: HeaderViewProps, defaultDom: React.ReactNode) => React.ReactNode
    >;
    siderWidth?: number;
    hasSiderMenu?: boolean;
};

type MenuDataItem = {
    /** @name 子菜单 */
    children?: MenuDataItem[];
    routes?: undefined;
    /** @name 在菜单中隐藏子节点 */
    hideChildrenInMenu?: boolean;
    /** @name 在菜单中隐藏自己和子节点 */
    hideInMenu?: boolean;
    /** @name 菜单的icon */
    icon?: React.ReactNode;
    /** @name 自定义菜单的国际化 key */
    locale?: string | false;
    /** @name 菜单的名字 */
    name?: string;
    /** @name 用于标定选中的值，默认是 path */
    key?: string;
    /** @name disable 菜单选项 */
    disabled?: boolean;
    /** @name disable menu 的 tooltip 菜单选项 */
    disabledTooltip?: boolean;
    /** @name 路径,可以设定为网页链接 */
    path?: string;
    /**
     * 当此节点被选中的时候也会选中 parentKeys 的节点
     *
     * @name 自定义父节点
     */
    parentKeys?: string[];
    /** @name 隐藏自己，并且将子节点提升到与自己平级 */
    flatMenu?: boolean;
    /** @name 指定外链打开形式，同a标签 */
    target?: string;
    /**
     * menuItem 的 tooltip 显示的路径
     */
    tooltip?: string;
    [key: string]: any;
};

type PageContainerProps = {
    title?: React.ReactNode | false;
    content?: React.ReactNode;
    extraContent?: React.ReactNode;
    prefixCls?: string;
    footer?: ReactNode[];
    /**
     * @name token 自定义的 token
     */
    token?: pageContainerToken;
    /**
     * 与 antd 完全相同
     *
     * @name PageHeader 的配置
     */
    header?: Partial<PageHeaderProps> & {
        children?: React.ReactNode;
    };
    /** @name pageHeaderRender 自定义 pageHeader */
    pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
    /**
     * 与 antd 完全相同
     *
     * @name affixProps 固钉的配置
     */
    affixProps?: Omit<AffixProps, 'children'>;
    /**
     * 只加载内容区域
     *
     * @name loading 是否加载
     */
    loading?: boolean | SpinProps | React.ReactNode;
    /**
     * 自定义 breadcrumb,
     * @name breadcrumbRender 返回false不展示
     */
    breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false;
    /** @name WaterMarkProps 水印的配置 */
    waterMarkProps?: WaterMarkProps;
    /** @name BreadcrumbProps 配置面包屑 */
    breadcrumb?: BreadcrumbProps;
    children?: React.ReactNode;
    stylish?: GenerateStyle<PageContainerToken>;
    footerStylish?: GenerateStyle<PageContainerToken>;
    footerToolBarProps?: FooterToolbarProps;
} & PageHeaderTabConfig &
    Omit<PageHeaderProps, 'title' | 'footer' | 'breadcrumbRender' | 'breadcrumb'>;

type ProHelpContentPanelProps = {
    /**
     * 控制当前选中的帮助文档
     */
    selectedKey: React.Key;
    className?: string;
    parentItem?: ProHelpDataSource<any>;
    onScroll?: (key?: string) => void;
};

type ProHelpDataSource<ValueType = 'text'> = {
    /**
     * key 数据源项的唯一标识
     */
    key: string;
    /**
     * title 数据源项的标题。
     */
    title: string;
    /**
     * 在一页内加载所有的 children 内容
     */
    infiniteScrollFull?: boolean;
    /**
     * children 包含子项的数组，每个子项包含一个唯一标识，标题以及子子项数组。
     */
    children: {
        key: string;
        title: string;
        /**
         * 是否远程加载children
         */
        asyncLoad?: boolean;
        children?: ProHelpDataSourceChildren<ValueType>[];
    }[];
};

type ProHelpDataSourceChildren<
    ValueTypeMap = {
        text: string;
    }
> = {
    /**
     * 包含数据源子项内容的对象。
     * @template ValueType 数据源项值的类型，默认为 'text'。
     */
    valueType: ValueTypeMap extends Map<infer ValueType, any>
        ? ValueType
        : keyof ValueTypeMap | ProHelpDataSourceChildrenType;
    /**
     * 数据源子项值的类型。
     * @typedef {(ValueTypeMap | ProHelpDataSourceChildrenType)} ProHelpDataSourceChildrenType
     */
    children: ProHelpDataSourceContentProps<
        ValueTypeMap,
        keyof ValueTypeMap | ProHelpDataSourceChildrenType
    >;
};

type ProHelpDrawerProps = {
    /**
     * Ant Design Drawer 组件的 Props，可以传递一些选项，如位置、大小、关闭方式等等。
     */
    drawerProps: DrawerProps;
} & Omit<ProHelpPanelProps, 'onClose'>;

type ProHelpModalProps = {
    /**
     * Ant Design Modal 组件的 props，可以传递一些选项，如位置、大小、关闭方式等等。
     */
    modalProps?: ModalProps;
} & Omit<ProHelpPanelProps, 'onClose'>;

type ProHelpPanelProps = {
    /**
     * 帮助面板的标题
     */
    title?: string;
    /**
     * 帮助面板首次打开时的默认选中文档的键名
     */
    defaultSelectedKey?: string;
    /**
     * 当前选中的帮助文档的键名。如果提供了这个 prop，那么该组件将是一个受控组件，其状态将由父组件管理。如果未提供，那么该组件将是一个非受控组件，其状态将在组件内部管理。
     */
    selectedKey?: string;
    /**
     * 当选中的文档键名发生变化时调用的回调函数。新的键名将作为参数传递给该函数。
     */
    onSelectedKeyChange?: (key: string | undefined) => void;
    /**
     *控制左侧面板是否能够打开
     */
    showLeftPanel?: boolean;
    /**
     * 当左侧面板打开状态发生变化时调用的回调函数。新的打开状态将作为参数传递给该函数。
     */
    onShowLeftPanelChange?: (show: boolean) => void;
    /**
     * 是否显示边框
     */
    bordered?: boolean;
    /**
     * 当帮助面板关闭时调用的回调函数。
     */
    onClose?: () => void;
    /**
     * 帮助面板的高度，可以是数字或字符串类型。
     */
    height?: number | string;
    /**
     * 帮助面板的页脚
     */
    footer?: React.ReactNode;
    /**
     * 在一页内加载所有的 children 内容
     */
    infiniteScrollFull?: boolean;
    /**
     * 自定义渲染 extra 部分的内容
     *
     * @param {React.ReactNode} collapsePannelAction - 折叠收起的左侧按钮
     * @param {React.ReactNode} helpSelectAction - 默认的帮助筛选按钮
     * @param {React.ReactNode} closeAction - 关闭操作按钮
     * @returns {React.ReactNode} - 返回自定义渲染的 extra 操作按钮
     *
     */
    extraRender?: (
        collapsePannelAction: React.ReactNode,
        helpSelectAction: React.ReactNode,
        closeAction: React.ReactNode
    ) => React.ReactNode;
};

type ProHelpPopoverProps = Omit<PopoverProps, 'content'> & {
    /**
     * 悬浮提示文字的 CSS 类名
     */
    textClassName?: string;
    /**
     * Popover 内容的 content 的 CSS 类名
     */
    popoverContextClassName?: string;
    /**
     * 悬浮提示文字的 CSS 样式对象
     */
    textStyle?: React.CSSProperties;
    /**
     * 当前选中的帮助文档的 key 值
     */
    selectedKey: string;
    /**
     * 可选的悬浮提示 Popover 组件的 Props，用于自定义悬浮提示的样式和行为。
     * 该属性可以传递 Ant Design Popover 组件的 props，如位置、大小、触发方式等等
     * @see 注意，content 属性已经被从 PopoverProps 中删除，因为这个属性由 ProHelpPopover 内部控制。
     */
    popoverProps?: PopoverProps;
};

type ProHelpProps<ValueType> = {
    /**
     * 帮助文档的数据源，包含一组帮助文档数据，每个数据包含标题和内容等信息。
     */
    dataSource: ProHelpDataSource<ValueType>[];
    /**
     * 帮助组件的子组件，用于渲染自定义的帮助内容。
     * 是一个键值对结构的集合，其中：
     * 键（key）为字符串类型；
     * 值（value）为一个函数类型，该函数接受两个参数：一个名为 item 的 ProHelpDataSourceChildren 类型的对象，表示一个 ProHelp 数据源子项的子项；
     * 一个名为 index 的数字类型参数，表示该子项在父级子项数组中的索引。
     * 该函数返回一个 ReactNode 类型的元素，用于表示该 ProHelp 数据源子项子项应该渲染的 UI 元素。
     * 这个 Map 的作用是将 ProHelp 数据源子项子项的 valueType 属性与对应的渲染函数进行映射，从而实现在渲染 ProHelp 数据源时动态地选择渲染方法。
     * 在实际使用时，我们可以通过判断子项的 valueType 属性，从 valueTypeMap 中取出对应的渲染函数，再将该子项和渲染函数作为参数传入 renderDataSourceItem 函数中即可。
     */
    valueTypeMap?: Map<
        string,
        (
            item: ProHelpDataSourceChildren<ValueType>,
            index: number
        ) => React.ReactNode
    >;
    /**
     * 帮助组件的子组件，用于渲染自定义的帮助内容。
     */
    children?: React.ReactNode;
    /**
     * 加载数据源的函数,如果把数据源设置为 async load就可以使用这个功能。
     */
    onLoadContext?: (
        key: React.Key,
        context: ProHelpDataSource<ValueType>['children'][number]
    ) => Promise<ProHelpDataSourceChildren<ValueType>[]>;
};

type ProLayoutProps = GlobalTypes & {
    stylish?: {
        header?: GenerateStyle<SiderMenuToken>;
        sider?: GenerateStyle<SiderMenuToken>;
    };
    /** Layout 的品牌配置，表现为一张背景图片 */
    bgLayoutImgList?: {
        src?: string;
        width?: string;
        height?: string;
        left?: number;
        top?: number;
        bottom?: number;
        right?: number;
    }[];
    /**
     * @name 简约模式，设置了之后不渲染的任何 layout 的东西，但是会有 context，可以获取到当前菜单。
     *
     * @example pure={true}
     */
    pure?: boolean;
    /**
     * @name logo 的配置，可以配置url，React 组件 和 false
     *
     * @example 设置 logo 为网络地址  logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
     * @example 设置 logo 为组件  logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
     * @example 设置 logo 为 false 不显示 logo  logo={false}
     * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
     * */
    logo?:
        | React.ReactNode
        | JSX.Element
        | WithFalse<() => React.ReactNode | JSX.Element>;
    /**
     * @name 页面切换的时候触发
     *
     * @example 获取切换的页面地址 onPageChange={(location) => { console.log("切换到："+location.pathname) }}
     *
     * */
    onPageChange?: (location?: RouterTypes['location']) => void;
    /**
     * @name layout 的 loading 效果，设置完成之后只展示一个 loading
     *
     * @example loading={true}
     */
    loading?: boolean;
    /**
     * @name layout
     *
     * @description "zh-CN" | "zh-TW" | "en-US" | "it-IT" | "ko-KR"
     * @example 中文 layout="zh-CN"
     * @example 英文 layout="en-US"
     */
    locale?: LocaleType;
    /**
     * @name 是否收起 layout 是严格受控的，可以 设置为 true，一直收起
     *
     * @example collapsed={true}
     */
    collapsed?: boolean;
    /**
     * @name 收起和展开的时候触发事件
     *
     * @example onCollapse=(collapsed)=>{ setCollapsed(collapsed) };
     */
    onCollapse?: (collapsed: boolean) => void;
    /**
     * @name 页脚的配置
     *
     * @example 不展示dom footerRender={false}
     * @example 使用 layout 的  DefaultFooter   footerRender={() => (<DefaultFooter copyright="这是一条测试文案"/>}
     */
    footerRender?: WithFalse<
        (
            props: ProLayoutProps & {
                hasSiderMenu?: boolean;
            },
            defaultDom: React.ReactNode
        ) => React.ReactNode
    >;
    /**
     * @name 设置 PageHeader 的面包屑，只能处理数据
     *
     * @example 手动设置 breadcrumbRender={(routers = []) => [ { path: '/', breadcrumbName: '主页'} ]
     * @example 增加一项 breadcrumbRender={(routers = []) => { return [{ path: '/', breadcrumbName: '主页'} ,...routers ]}
     * @example 删除首页 breadcrumbRender={(routers = []) => { return routers.filter(item => item.path !== '/')}
     * @example 不显示面包屑 breadcrumbRender={false}
     */
    breadcrumbRender?: WithFalse<
        (routers: BreadcrumbProps['items']) => BreadcrumbProps['items']
    >;
    /**
     * @name 设置页面的标题
     * @example 根据页面的路由设置标题 pageTitleRender={(props) => { return props.location.pathname }}
     * @example 不显示标题 pageTitleRender={false}
     * @example 根据默认的标题设置 pageTitleRender={(props,defaultPageTitle) => { return defaultPageTitle + '这是一个测试标题' }}
     * @example 根据 info 来自己组合标题 pageTitleRender={(props,defaultPageTitle,info) => { return info.title + "-" + info.pageName }
     */
    pageTitleRender?: WithFalse<
        (
            props: GetPageTitleProps,
            defaultPageTitle?: string,
            info?: {
                title: string;
                id: string;
                pageName: string;
            }
        ) => string
    >;
    /**
     * @name 处理 menuData 的数据，可以动态的控制数据
     * @see 尽量不要用异步数据来处理，否则可能造成更新不及时，如果异步数据推荐使用 menu.request 和 params。
     *
     * @example 删除一些菜单 menuDataRender=((menuData) => { return menuData.filter(item => item.name !== 'test') })
     * @example 增加一些菜单 menuDataRender={(menuData) => { return menuData.concat({ path: '/test', name: '测试', icon: 'smile' }) }}
     * @example 修改菜单 menuDataRender={(menuData) => { return menuData.map(item => { if (item.name === 'test') { item.name = '测试' } return item }) }}
     * @example 打平数据 menuDataRender={(menuData) => { return menuData.reduce((pre, item) => { return pre.concat(item.children || []) }, []) }}
     */
    menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
    /**
     * @name 处理每个面包屑的配置，需要直接返回 dom
     * @description (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode
     *
     * @example 设置 disabled： itemRender={(route, params, routes, paths) => { return <Button disabled>{route.breadcrumbName}</Button> }}
     * @example 拼接 path： itemRender={(route, params, routes, paths) => { return <a href={paths.join('/')}>{route.breadcrumbName}</a> }}
     */
    itemRender?: BreadcrumbProps['itemRender'];
    formatMessage?: (message: MessageDescriptor) => string;
    /** @name 是否禁用移动端模式
     *
     * @see 有的管理系统不需要移动端模式，此属性设置为true即可
     * @example disableMobile={true}
     *  */
    disableMobile?: boolean;
    /**
     * content 的样式
     *
     * @example 背景颜色为红色 contentStyle={{ backgroundColor: 'red '}}
     */
    contentStyle?: CSSProperties;
    className?: string;
    /** PageHeader 的 BreadcrumbProps 配置，会透传下去 */
    breadcrumbProps?: Omit<BreadcrumbProps, 'itemRender'> & LayoutBreadcrumbProps;
    /** @name 水印的相关配置 */
    waterMarkProps?: WaterMarkProps;
    /**
     * @name 操作菜单重新刷新
     *
     * @example  重新获取菜单 actionRef.current.reload();
     * */
    actionRef?: React.MutableRefObject<
        | {
              reload: () => void;
          }
        | undefined
    >;
    /**
     * @name 错误处理组件
     *
     * @example ErrorBoundary={MyErrorBoundary}
     */
    ErrorBoundary?: React.ComponentClass<any, any> | boolean;
    /**
     * @name  侧边菜单的类型, menu.type 的快捷方式
     * @type "sub" | "group"
     * @example group
     */
    siderMenuType?: 'sub' | 'group';
    isChildrenLayout?: boolean;
};

type ProSettings = PureSettings & RenderSetting;

type RouteContextType = {
    breadcrumb?: BreadcrumbListReturn;
    menuData?: MenuDataItem[];
    isMobile?: boolean;
    prefixCls?: string;
    collapsed?: boolean;
    hasSiderMenu?: boolean;
    hasHeader?: boolean;
    siderWidth?: number;
    isChildrenLayout?: boolean;
    hasFooterToolbar?: boolean;
    hasFooter?: boolean;
    hasPageContainer?: number;
    setHasFooterToolbar?: React.Dispatch<React.SetStateAction<boolean>>;
    setHasPageContainer?: React.Dispatch<React.SetStateAction<number>>;
    pageTitleInfo?: {
        title: string;
        id: string;
        pageName: string;
    };
    matchMenus?: MenuDataItem[];
    matchMenuKeys?: string[];
    currentMenu?: PureSettings & MenuDataItem;
    /** PageHeader 的 BreadcrumbProps 配置，会透传下去 */
    breadcrumbProps?: BreadcrumbProps;
    waterMarkProps?: WaterMarkProps;
} & Partial<PureSettings>;

type SettingDrawerProps = {
    defaultSettings?: MergerSettingsType<ProSettings>;
    settings?: MergerSettingsType<ProSettings>;
    collapse?: boolean;
    onCollapseChange?: (collapse: boolean) => void;
    getContainer?: any;
    hideHintAlert?: boolean;
    hideCopyButton?: boolean;
    /** 使用实验性质的黑色主题 */
    enableDarkTheme?: boolean;
    prefixCls?: string;
    colorList?:
        | false
        | {
              key: string;
              color: string;
              title?: string;
          }[];
    onSettingChange?: (settings: MergerSettingsType<ProSettings>) => void;
    pathname?: string;
    disableUrlParams?: boolean;
    themeOnly?: boolean;
};

type SettingDrawerState = {
    collapse?: boolean;
    language?: string;
} & MergerSettingsType<ProSettings>;

type ProSettings = PureSettings & RenderSetting;

type TopNavHeaderProps = SiderMenuProps & GlobalHeaderProps & PrivateSiderMenuProps;

type WaterMarkProps = {
    /** 类名 */
    className?: string;
    /** 样式 */
    style?: React.CSSProperties;
    /** 水印样式 */
    markStyle?: React.CSSProperties;
    /** 水印类名 */
    markClassName?: string;
    /** 水印之间的水平间距 */
    gapX?: number;
    /** 水印之间的垂直间距 */
    gapY?: number;
    /** 追加的水印元素的z-index */
    zIndex?: number;
    /** 水印的宽度 */
    width?: number;
    /** 水印的高度 */
    height?: number;
    /** 水印在canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置, 即 offsetTop = gapY / 2 */
    offsetTop?: number;
    /** 水印在canvas 画布上绘制的水平偏移量, 正常情况下，水印绘制在中间位置, 即 offsetTop = gapX / 2 */
    offsetLeft?: number;
    /** 水印绘制时，旋转的角度，单位 ° */
    rotate?: number;
    /** ClassName 前缀 */
    prefixCls?: string;
    /** 高清印图片源, 为了高清屏幕显示，建议使用 2倍或3倍图，优先使用图片渲染水印。 */
    image?: string;
    /** 水印文字内容 */
    content?: string | string[];
    /** 文字颜色 */
    fontColor?: string;
    /** 文字样式 */
    fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
    /** 文字族 */
    fontFamily?: string;
    /** 文字粗细 */
    fontWeight?: 'normal' | 'light' | 'weight' | number;
    /** 文字大小 */
    fontSize?: number | string;
    children?: React.ReactNode;
};