feat: enhance background layer handling and uploader functionality

- 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.
This commit is contained in:
DrSmoothl
2026-03-16 22:19:05 +08:00
parent a5a6d2cb26
commit 0811213db0
16 changed files with 359 additions and 170 deletions

View File

@@ -5,13 +5,19 @@ 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): BackgroundConfig {
export function useBackground(layerId: BackgroundLayerId): ResolvedBackgroundState {
const { themeConfig } = useTheme()
const bgMap = themeConfig.backgroundConfig ?? {}
@@ -19,8 +25,16 @@ export function useBackground(layerId: BackgroundLayerId): BackgroundConfig {
// 处理继承逻辑:非 page 层级且 inherit 为 true返回 page 配置
if (layerId !== 'page' && config.inherit) {
return bgMap.page ?? defaultBackgroundConfig
return {
config: bgMap.page ?? defaultBackgroundConfig,
inheritEnabled: true,
inheritedFrom: 'page',
}
}
return config
return {
config,
inheritEnabled: !!config.inherit,
inheritedFrom: null,
}
}