feat(dashboard): add background customization system
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
This commit is contained in:
26
dashboard/src/hooks/use-background.ts
Normal file
26
dashboard/src/hooks/use-background.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
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
|
||||
}
|
||||
Reference in New Issue
Block a user