1fec4c3b9a
Add image/video background support across 5 layout layers (page, sidebar, header, card, dialog) with per-layer effect controls and custom CSS injection. - IndexedDB asset store for blob persistence (idb) - AssetStoreProvider for blob URL lifecycle management - BackgroundLayer component with CSS effects and prefers-reduced-motion support - useBackground hook with inherit logic - BackgroundUploader with local file and remote URL support - BackgroundEffectsControls and ComponentCSSEditor UI components - Background settings integrated into AppearanceTab in settings.tsx - Layout, Card, and Dialog integration via non-breaking wrapper components
27 lines
875 B
TypeScript
27 lines
875 B
TypeScript
import { useTheme } from '@/components/use-theme'
|
||
|
||
import type { BackgroundConfig } from '@/lib/theme/tokens'
|
||
import { defaultBackgroundConfig } from '@/lib/theme/tokens'
|
||
|
||
type BackgroundLayerId = 'page' | 'sidebar' | 'header' | 'card' | 'dialog'
|
||
|
||
/**
|
||
* 获取指定层级的背景配置
|
||
* 处理继承逻辑：如果 inherit 为 true，返回页面级别配置
|
||
* @param layerId - 背景层级标识
|
||
* @returns 对应层级的背景配置
|
||
*/
|
||
export function useBackground(layerId: BackgroundLayerId): BackgroundConfig {
|
||
const { themeConfig } = useTheme()
|
||
const bgMap = themeConfig.backgroundConfig ?? {}
|
||
|
||
const config = bgMap[layerId] ?? defaultBackgroundConfig
|
||
|
||
// 处理继承逻辑：非 page 层级且 inherit 为 true，返回 page 配置
|
||
if (layerId !== 'page' && config.inherit) {
|
||
return bgMap.page ?? defaultBackgroundConfig
|
||
}
|
||
|
||
return config
|
||
}
|