0811213db0
- Introduced automatic overlay opacity and gradient based on layer ID in BackgroundLayer component. - Added disabled state to BackgroundUploader, preventing actions when disabled. - Updated component CSS editor to handle disabled state, preventing changes when disabled. - Modified Header and Layout components to manage background inheritance from the page layer. - Improved Sidebar and Card components to respect background inheritance and layering. - Refactored theme management to include default accent color and normalization functions. - Enhanced AppearanceTab to manage accent color changes with debouncing and validation. - Added UI feedback for inherited background layers in AppearanceTab.
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
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'
|
||
|
||
type ResolvedBackgroundState = {
|
||
config: BackgroundConfig
|
||
inheritEnabled: boolean
|
||
inheritedFrom: BackgroundLayerId | null
|
||
}
|
||
|
||
/**
|
||
* 获取指定层级的背景配置
|
||
* 处理继承逻辑：如果 inherit 为 true，返回页面级别配置
|
||
* @param layerId - 背景层级标识
|
||
* @returns 对应层级的背景配置
|
||
*/
|
||
export function useBackground(layerId: BackgroundLayerId): ResolvedBackgroundState {
|
||
const { themeConfig } = useTheme()
|
||
const bgMap = themeConfig.backgroundConfig ?? {}
|
||
|
||
const config = bgMap[layerId] ?? defaultBackgroundConfig
|
||
|
||
// 处理继承逻辑：非 page 层级且 inherit 为 true，返回 page 配置
|
||
if (layerId !== 'page' && config.inherit) {
|
||
return {
|
||
config: bgMap.page ?? defaultBackgroundConfig,
|
||
inheritEnabled: true,
|
||
inheritedFrom: 'page',
|
||
}
|
||
}
|
||
|
||
return {
|
||
config,
|
||
inheritEnabled: !!config.inherit,
|
||
inheritedFrom: null,
|
||
}
|
||
}
|