86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
// @ts-nocheck
|
||
// #ifndef UNI-APP-X
|
||
import { computed, ComputedRef, Ref } from '@/uni_modules/lime-shared/vue';
|
||
// #endif
|
||
export type MaskConfig = {
|
||
maskStartColor : string;
|
||
maskEndColor : string;
|
||
};
|
||
|
||
export type PlatformMaskStyles = {
|
||
common : string;
|
||
top : string;
|
||
bottom : string;
|
||
};
|
||
export type UsePickerMaskReturn = {
|
||
maskConfig : ComputedRef<MaskConfig>;
|
||
platformMaskStyles : ComputedRef<PlatformMaskStyles>;
|
||
}
|
||
|
||
/**
|
||
* 生成 Picker 组件顶部与底部的渐变遮罩样式（完全响应式）
|
||
*
|
||
* @param backgroundColorRef - 背景色 ref 或 computed（可为 null）
|
||
* @param isDarkModeRef - 是否暗色模式（响应式）
|
||
* @param maskColorsRef - 自定义遮罩颜色 [start, end]（响应式）
|
||
* @param isInitializedRef - 是否已初始化（响应式）
|
||
*/
|
||
export const usePickerMask = (
|
||
backgroundColorRef : ComputedRef<string | null>,
|
||
isDarkModeRef :ComputedRef<boolean>,
|
||
maskColorsRef :ComputedRef<string[] | null>,
|
||
isInitializedRef : Ref<boolean>
|
||
) : UsePickerMaskReturn => {
|
||
const maskConfig = computed<MaskConfig>(() => {
|
||
const bgColor = backgroundColorRef.value;
|
||
const isDark = isDarkModeRef.value;
|
||
const maskColors = maskColorsRef?.value;
|
||
|
||
// 优先使用用户提供的 maskColors
|
||
if (maskColors != null && maskColors.length >= 1) {
|
||
const maskStartColor = maskColors![0]
|
||
const maskEndColor = maskColors!.length > 1 ? maskColors[1] : 'rgba(0,0,0,0)'
|
||
return {
|
||
maskStartColor,
|
||
maskEndColor
|
||
} as MaskConfig
|
||
}
|
||
|
||
const bg = bgColor ?? (isDark ? '#242424' : '#ffffff');
|
||
const endColor = isDark
|
||
? 'rgba(36, 36, 36, 0)'
|
||
: 'rgba(255, 255, 255, 0)';
|
||
|
||
return {
|
||
maskStartColor: bg,
|
||
maskEndColor: endColor
|
||
} as MaskConfig
|
||
});
|
||
|
||
const platformMaskStyles = computed<PlatformMaskStyles>(() => {
|
||
const { maskStartColor, maskEndColor } = maskConfig.value;
|
||
|
||
const clean = (str : string) => str.replace(/\s+/g, ' ').trim();
|
||
|
||
return {
|
||
common: backgroundColorRef.value == null && !isDarkModeRef.value
|
||
? clean(`background-image:
|
||
linear-gradient(180deg, ${maskStartColor}, ${maskEndColor}),
|
||
linear-gradient(0deg, ${maskStartColor}, ${maskEndColor})`)
|
||
: '',
|
||
// #ifndef APP-IOS
|
||
top: `background-image: linear-gradient(to bottom, ${maskStartColor}, ${maskEndColor})`,
|
||
bottom: `background-image: linear-gradient(to top, ${maskStartColor}, ${maskEndColor})`,
|
||
// #endif
|
||
// #ifdef APP-IOS
|
||
top: isInitializedRef.value ? 'background-color: rgba(0,0,0,0)' : '',
|
||
bottom: isInitializedRef.value ? 'background-color: rgba(0,0,0,0)' : ''
|
||
// #endif
|
||
} as PlatformMaskStyles
|
||
});
|
||
|
||
return {
|
||
maskConfig,
|
||
platformMaskStyles
|
||
} as UsePickerMaskReturn
|
||
}; |