import { FlowLightVariant } from '../../flow-light/src/types'; import { GlassSurfaceProps } from '../../glass-surface'; /** * 材质:pure / flat 实色(flat 是 pure 的别名)、plain 无背景、mask 半透明遮罩、 * blur 背景模糊、acrylic 亚克力(三倍模糊 + 着色 + 噪点)、mica 云母(按视口取色的不透明底)、 * glass 玻璃、refraction 琉光折射 */ export type BaseSurfaceMode = 'pure' | 'mask' | 'blur' | 'glass' | 'refraction' | 'acrylic' | 'mica' | 'flat' | 'plain'; export type BaseSurfacePreset = 'default' | 'card'; export type BaseSurfaceRefractionRenderer = 'svg' | 'css'; export type BaseSurfaceRefractionProfile = 'soft' | 'filmic' | 'cinematic'; export type BaseSurfaceRefractionTone = 'mist' | 'balanced' | 'vivid'; export interface BaseSurfaceProps { /** 背景模式 */ mode?: BaseSurfaceMode; /** 自定义圆角,不传则 inherit 父元素 */ radius?: string | number; /** 纯色/遮罩的背景色,默认使用 CSS 变量 */ color?: string; /** mask 模式的透明度 (0-1),acrylic 着色层取它的 0.8 倍;fake 模式下也是 blur / acrylic / glass / refraction 材质底下那层底色的不透明度 */ opacity?: number; /** 运动降级到 mask 时的透明度覆盖(0-1) */ fallbackMaskOpacity?: number; /** blur(即 filter 层)模式下的模糊强度 (px);acrylic 取它的三倍 */ blur?: number; /** filter 层饱和度(用于 blur/refraction 模式) */ filterSaturation?: number; /** filter 层对比度(用于 blur/refraction 模式) */ filterContrast?: number; /** filter 层亮度(用于 blur/refraction 模式) */ filterBrightness?: number; /** glass/refraction 模式下的饱和度 */ saturation?: number; /** glass/refraction 模式下的亮度(推荐 0-100;<=3 会按倍率自动转为百分比) */ brightness?: number; /** glass 模式下的背景透明度 */ backgroundOpacity?: number; /** glass 模式下的边框宽度系数 */ borderWidth?: number; /** refraction 模式下的位移强度 */ displace?: number; /** refraction 模式下的扭曲缩放 */ distortionScale?: number; /** refraction 强度(0-100),用于统一控制色散/扭曲/高光层力度 */ refractionStrength?: number; /** refraction 质感预设(soft/filmic/cinematic) */ refractionProfile?: BaseSurfaceRefractionProfile; /** refraction 色调预设(mist/balanced/vivid) */ refractionTone?: BaseSurfaceRefractionTone; /** refraction 偏移角度(度),用于控制色散主方向 */ refractionAngle?: number; /** refraction 高光锚点 X(0-1),用于光源跟随 */ refractionLightX?: number; /** refraction 高光锚点 Y(0-1),用于光源跟随 */ refractionLightY?: number; /** refraction 高光 halo 透明度(0-1),不传时使用内置 filmic 模型计算 */ refractionHaloOpacity?: number; /** refraction 模式下的 R 通道偏移 */ redOffset?: number; /** refraction 模式下的 G 通道偏移 */ greenOffset?: number; /** refraction 模式下的 B 通道偏移 */ blueOffset?: number; /** refraction 模式下的 X 通道选择 */ xChannel?: 'R' | 'G' | 'B'; /** refraction 模式下的 Y 通道选择 */ yChannel?: 'R' | 'G' | 'B'; /** refraction 模式下的混合模式 */ mixBlendMode?: GlassSurfaceProps['mixBlendMode']; /** 是否正在运动(手动控制降级) */ moving?: boolean; /** 运动降级的目标模式,默认 'mask' */ fallbackMode?: 'pure' | 'mask' | 'flat'; /** 运动结束后恢复到目标模式的延迟 (ms),默认 150 */ settleDelay?: number; /** * 是否按环境自动降级,默认 false:自身 transform / transition、指针高速移动、窗口移动或缩放时 * 走运动降级;省电或掉帧时把材质换成更轻的一档 */ autoDetect?: boolean; /** 过渡时长 (ms),默认 299 */ transitionDuration?: number; /** 是否使用 fake-background 伪元素模式渲染 */ fake?: boolean; /** fake 模式下的 z-index,默认 0 */ fakeIndex?: number; /** 视觉预设,default 保持通用,card 用于卡片风格 */ preset?: BaseSurfacePreset; /** * 表面铺在窗口自身的系统材质上(透明 Electron 窗口的 vibrancy、Mica)。页面里的 * backdrop-filter 采不到它,只会把表面自己的底色再采一遍,所以此时没有任何层跑 * backdrop-filter:模糊交给系统,表面只铺底色、光与描边;`moving`、`autoDetect` 也随之失效 */ systemBackdrop?: boolean; /** * refraction 模式渲染器,默认 'css':只用模糊、着色、光晕与描边,不跑 SVG 位移滤镜。 * 'svg' 在其下加一层 SVG 位移(玻璃)层,背景有内容时才看得出折射,强度见 `refractionGlassOpacity` */ refractionRenderer?: BaseSurfaceRefractionRenderer; /** `refractionRenderer="svg"` 时 SVG 位移层的不透明度(0-1),默认 0.3;1 为完整强度 */ refractionGlassOpacity?: number; /** 非 mask 模式下的可选 mask 层透明度(用于 1+3、2+3、1+2+3) */ overlayOpacity?: number; /** * 流光层(TxFlowLight):在遮罩之上、描边之下叠一层固定的品牌色光,任何 mode 都可开; * 不传或 `false` 即关闭 */ flowLight?: FlowLightVariant | false; /** 流光强度,乘到流光的主题透明度上,默认 1 */ flowLightIntensity?: number; /** 标签名,默认 'div' */ tag?: string; }