主题皮肤

antd-layout 除了支持基本的明暗度、单色主题效果以外，还可以高度自定义外观主题，例如：给整个布局增加动态背景和模糊层次的皮肤效果，还能让整体变妆为 shadcn-ui 风格。

自定义皮肤主题

可以基于 antd-layout 提供的 ThemeSkin 约束参数，配置更细致的关键属性配合图片背景素材，组织成皮肤组件，然后像 菜单 和 国际化 数据一样装入组件内部，再设置 layoutConfig 中的 skinName 即可启用皮肤主题了。

定制皮肤

src/components/skins/blueSkyDark.ts 
import type { ThemeSkin } from "@adminui-dev/layout"

const bgContent = <div style={{...}}><img style={{width:"100%"}} src="/images/skins/blue-sky/bg.webp" alt="bg.webp" /></div>

const blueSkyDark:ThemeSkin = {
    "name":"blueSkyDark",    
    "skinType":"custom",
    "backgroundColor":"#090a0b",
    "layoutConfig":{
        "theme":"dark",
        "primaryColor":"#4dbae9",        
        "noneHeader":false,
        "hideBorder":false,
        "asideBlur":true,
        "headerBlur":true,
        "largeBrand":true,
        "containerBlur":true,
        "menuItemSelectColor":"primary",
    },        
    "logo":"/images/skins/blue-sky/app-logo-light.webp",
    "icon":"/images/skins/blue-sky/skin-icon-dark.webp",
    "backgroundContent":<bgContent />
}
export { blueSkyDark }
复制成功

可以使用 defineThemeSkin 方法配置更方便

const blueSkyDark = defineThemeSkin({...})

使用皮肤

src/layouts/index.tsx 
import { blueSkyDark } from "@components/skins/blueSkyDark"
import { AntdLayout } from "@adminui-dev/antd-layout"
...
export default function(){   
    // layout config
    const layoutConfig:LayoutConfig = {
        disabledLocale:true,
        largeBrand:true,    
        skinName:"blueSkyDark", // 使用皮肤
        ...
    }
    return(
        <AntdLayout layoutConfig={layoutConfig} menuData={...} themeSkins={[blueSkyDark]}>        
    )
}
复制成功

themeSkins 接收的是数组，因为可能有多个皮肤。

切换皮肤

使用 setLayoutConfig 方法进行切换

src/pages/welcome.tsx 
import { Container, setSkinConfig, useConfigAction, useConfigState } from '@adminui-dev/antd-layout';
...
const { setLayoutConfig } = useConfigAction()
const { layoutConfig } = useConfigState()
...
const config = setSkinConfig(layoutConfig,skin)          
setLayoutConfig({
    ...config,
    skinName:"customeSkinName"
})
...
复制成功

皮肤属性

ThemeSkin

| 参数名 | 类型 |默认值| 说明 | |-------|-------|-------|-------| |name|string|-|唯一名称| |label|string|-|显示名称| |skinType|SkinType|-|皮肤类型| |layoutConfig|LayoutConfig|-|布局类型| |backgroundColor|string|-|背景颜色| |layoutBorderColor|string|-|边框颜色| |logo|string / ReactNode|-|品牌Logo| |icon|string|-|皮肤缩略图| |headerStyle|string|-|布局头部样式| |asideStyle|string|-|布局侧滑样式|

SkinType