主题皮肤

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

system string - 系统皮肤（保留）
custom string - 自定义皮肤