const BREAKPOINT_CONFIG = {
|
xs: { threshold: 12, fallback: 24 },
|
// 手机：小于 12 时使用满宽
|
sm: { threshold: 12, fallback: 12 },
|
// 平板：小于 12 时使用半宽
|
md: { threshold: 8, fallback: 8 },
|
// 中等屏幕：小于 8 时使用三分之一宽
|
lg: null,
|
// 大屏幕：直接使用设置的 span
|
xl: null
|
// 超大屏幕：直接使用设置的 span
|
}
|
function calculateResponsiveSpan(itemSpan, defaultSpan, breakpoint) {
|
const finalSpan = itemSpan ?? defaultSpan
|
const config = BREAKPOINT_CONFIG[breakpoint]
|
if (!config) {
|
return finalSpan
|
}
|
return finalSpan >= config.threshold ? finalSpan : config.fallback
|
}
|
function createResponsiveSpanCalculator(defaultSpan) {
|
return (itemSpan, breakpoint) => {
|
return calculateResponsiveSpan(itemSpan, defaultSpan, breakpoint)
|
}
|
}
|
export { calculateResponsiveSpan, createResponsiveSpanCalculator }
|
