布局组件

最核心的组件 <AntdLayout />，放置在布局中，通常位于 src/layouts 下，而且可能有多个，它们之间的状态效果都是隔离的，包括存储在浏览器上的配置，使用布局组件后，所有页面都带上配置好的菜单和工具栏及品牌信息，使用布局组件前需要先配置好 路由 和 菜单 属性参数，参数一共分两块：属性 和 子元素标签。

使用示例

src/layouts/index.tsx

import { AntdLayout } from "@adminui-dev/antd-layout"
import type { LayoutConfig, MenuData } from "@adminui-dev/antd-layout"

/** menu data */
const menuData:MenuData = {
    name:"",
    path:"/",
    label:"Dashboard",
    children:[
        {name:"welcome",path:"welcome",label:"Welcome"},
        {name:"transaction",path:"transaction",label:"Transaction",children:[
            {name:"order",path:"order",label:"Order"},
            {name:"product",path:"product",label:"Product"},
        ]}
    ]
}
export default function(){  
    // layout config
    const layoutConfig:LayoutConfig = {
        disabledLocale:true,
        layoutType:"leftMenu",  
        primaryColor:"#4dbae9"        
    }
    return(
        <>
            <AntdLayout layoutConfig={layoutConfig} menuData={menuData} />
        </>
    )
}

复制成功

属性

属性主要配置一些初始化参数，绝大部分可以动态响应。

| 参数名 | 类型 |默认值| 说明 | |-------|-------|-------|-------| |layoutConfig|LayoutConfig|-|布局配置(包括主题模式、主题颜色、布局类型、菜单展示形态等)| |menuData|MenuData|-|菜单配置数据| |themeSkins|ThemeSkin[]|-|自定义皮肤资源| |localeMessages|Record<string, LocaleMessage>|false|i18n国际化数据| |locale|string|en-US|强制使用一个地本化(例如：en-US)| |theme|string|-|强制明亮度模式(例如：light)| |disabledStorageConfig|bool|false|禁用本地储存配置|

属性中的强制参数会覆盖 layoutConfig 参数，且 setLayoutConfig 修改不起作用。

子元素标签

子元素挂载了一些带UI组件，例如：用户信息、品牌信息、扩展工具栏组件等。

src/layouts/index.tsx

<AntdLayout layoutConfig={...} menuData={...}>
    <AntdLayout.BrandPopoverContent>
        <div className="brandContent">
            <dl>
                <dt>Title</dt>
                <dd>Username</dt>
                <dd>Email<dt>
            <dl>
        </div>
    </AntdLayout.BrandPopoverContent>
</AntdLayout>

复制成功

| 参数名 | 类型 |默认值| 说明 | |-------|-------|-------|-------| |BrandPopoverContent|ReactNode|-|左上角品牌popover内容| |AvatarPopoverContent|ReactNode|-|用户信息popover内容| |HeaderToolbarExtra|ReactNode[]|-|工具栏扩展内容| |AsideHeader|ReactNode[]|-|侧滑面版头部内容| |AsideFooter|ReactNode[]|-|侧滑面版页脚内容| |Footer|ReactNode[]|-|正文页脚内容| |SlotContent|ReactNode|-|不影响布局的插槽内容|