@youwen/ai-design-system

/** * 响应式断点系统 * 基于现代设备使用模式和企业应用场景 */ export declare const breakpoints: { readonly mobile: { readonly min: 0; readonly max: 767; readonly name: "mobile"; }; readonly tablet: { readonly min: 768; readonly max: 1023; readonly name: "tablet"; }; readonly desktop: { readonly min: 1024; readonly max: 1439; readonly name: "desktop"; }; readonly desktopLarge: { readonly min: 1440; readonly max: number; readonly name: "desktop-large"; }; }; export declare const tailwindBreakpoints: { readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly '2xl': "1536px"; }; export declare const componentResponsiveRules: { readonly container: { readonly mobile: { readonly width: "100%"; readonly maxWidth: "350px"; readonly height: "auto"; readonly minHeight: "180px"; readonly padding: "12px"; readonly layout: "single-column"; }; readonly tablet: { readonly width: "100%"; readonly maxWidth: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "dual-slot"; }; readonly desktop: { readonly width: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "full-layout"; }; readonly desktopLarge: { readonly width: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "full-layout"; }; }; readonly slot: { readonly mobile: { readonly width: "100%"; readonly height: "auto"; readonly minHeight: "60px"; readonly margin: "0 0 8px 0"; readonly display: "block"; }; readonly tablet: { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; }; readonly desktop: { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; }; readonly desktopLarge: { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; }; }; readonly typography: { readonly mobile: { readonly big: { readonly fontSize: "32px"; readonly lineHeight: "24px"; }; readonly medium: { readonly fontSize: "20px"; readonly lineHeight: "14px"; }; readonly small: { readonly fontSize: "14px"; readonly lineHeight: "10px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; readonly tablet: { readonly big: { readonly fontSize: "36px"; readonly lineHeight: "26px"; }; readonly medium: { readonly fontSize: "22px"; readonly lineHeight: "16px"; }; readonly small: { readonly fontSize: "15px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; readonly desktop: { readonly big: { readonly fontSize: "40px"; readonly lineHeight: "28px"; }; readonly medium: { readonly fontSize: "24px"; readonly lineHeight: "17px"; }; readonly small: { readonly fontSize: "16px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; readonly desktopLarge: { readonly big: { readonly fontSize: "40px"; readonly lineHeight: "28px"; }; readonly medium: { readonly fontSize: "24px"; readonly lineHeight: "17px"; }; readonly small: { readonly fontSize: "16px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; }; readonly spacing: { readonly mobile: { readonly containerPadding: "12px"; readonly textGap: "4px"; readonly elementMargin: "1px"; }; readonly tablet: { readonly containerPadding: "15px"; readonly textGap: "5px"; readonly elementMargin: "2px"; }; readonly desktop: { readonly containerPadding: "15px"; readonly textGap: "6px"; readonly elementMargin: "2px"; }; readonly desktopLarge: { readonly containerPadding: "15px"; readonly textGap: "6px"; readonly elementMargin: "2px"; }; }; }; export declare const layoutConstraints: { readonly mobile: { readonly allowedLayouts: readonly ["leftTop", "rightTop", "leftBottom", "rightBottom"]; readonly forceVerticalStack: true; readonly maxSlotsPerRow: 1; }; readonly tablet: { readonly allowedLayouts: readonly ["leftTop", "rightTop", "leftBottom", "rightBottom", "leftTop,rightTop", "leftBottom,rightBottom", "leftTop,leftBottom", "rightTop,rightBottom"]; readonly maxSlotsPerRow: 2; }; readonly desktop: { readonly allowedLayouts: "all"; readonly maxSlotsPerRow: 2; }; readonly desktopLarge: { readonly allowedLayouts: "all"; readonly maxSlotsPerRow: 2; }; }; export declare function generateMediaQueries(): { mobile: string; tablet: string; desktop: string; desktopLarge: string; mobileOnly: string; tabletUp: string; desktopUp: string; }; export declare class ResponsiveManager { private currentBreakpoint; getCurrentBreakpoint(): keyof typeof breakpoints; getResponsiveConfig<T extends keyof typeof componentResponsiveRules>(component: T): { readonly width: "100%"; readonly maxWidth: "350px"; readonly height: "auto"; readonly minHeight: "180px"; readonly padding: "12px"; readonly layout: "single-column"; } | { readonly width: "100%"; readonly maxWidth: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "dual-slot"; } | { readonly width: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "full-layout"; } | { readonly width: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "full-layout"; } | { readonly width: "100%"; readonly height: "auto"; readonly minHeight: "60px"; readonly margin: "0 0 8px 0"; readonly display: "block"; } | { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; } | { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; } | { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; } | { readonly big: { readonly fontSize: "32px"; readonly lineHeight: "24px"; }; readonly medium: { readonly fontSize: "20px"; readonly lineHeight: "14px"; }; readonly small: { readonly fontSize: "14px"; readonly lineHeight: "10px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; } | { readonly big: { readonly fontSize: "36px"; readonly lineHeight: "26px"; }; readonly medium: { readonly fontSize: "22px"; readonly lineHeight: "16px"; }; readonly small: { readonly fontSize: "15px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; } | { readonly big: { readonly fontSize: "40px"; readonly lineHeight: "28px"; }; readonly medium: { readonly fontSize: "24px"; readonly lineHeight: "17px"; }; readonly small: { readonly fontSize: "16px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; } | { readonly big: { readonly fontSize: "40px"; readonly lineHeight: "28px"; }; readonly medium: { readonly fontSize: "24px"; readonly lineHeight: "17px"; }; readonly small: { readonly fontSize: "16px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; } | { readonly containerPadding: "12px"; readonly textGap: "4px"; readonly elementMargin: "1px"; } | { readonly containerPadding: "15px"; readonly textGap: "5px"; readonly elementMargin: "2px"; } | { readonly containerPadding: "15px"; readonly textGap: "6px"; readonly elementMargin: "2px"; } | { readonly containerPadding: "15px"; readonly textGap: "6px"; readonly elementMargin: "2px"; }; isAllowedLayout(layout: string): boolean; getOptimalLayout(preferredLayout: string): string; } export declare function generateTailwindConfig(): { screens: { readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly '2xl': "1536px"; }; spacing: { 'container-padding-mobile': "12px"; 'container-padding-desktop': "15px"; 'text-gap-mobile': "4px"; 'text-gap-desktop': "6px"; }; fontSize: { 'widget-big-mobile': ("24px" | "32px")[]; 'widget-big-desktop': ("40px" | "28px")[]; }; }; export type BreakpointName = keyof typeof breakpoints; export type ComponentName = keyof typeof componentResponsiveRules; export type LayoutConstraint = typeof layoutConstraints[BreakpointName]; export declare const responsiveSystem: { breakpoints: { readonly mobile: { readonly min: 0; readonly max: 767; readonly name: "mobile"; }; readonly tablet: { readonly min: 768; readonly max: 1023; readonly name: "tablet"; }; readonly desktop: { readonly min: 1024; readonly max: 1439; readonly name: "desktop"; }; readonly desktopLarge: { readonly min: 1440; readonly max: number; readonly name: "desktop-large"; }; }; tailwindBreakpoints: { readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly '2xl': "1536px"; }; componentResponsiveRules: { readonly container: { readonly mobile: { readonly width: "100%"; readonly maxWidth: "350px"; readonly height: "auto"; readonly minHeight: "180px"; readonly padding: "12px"; readonly layout: "single-column"; }; readonly tablet: { readonly width: "100%"; readonly maxWidth: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "dual-slot"; }; readonly desktop: { readonly width: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "full-layout"; }; readonly desktopLarge: { readonly width: "430px"; readonly height: "225px"; readonly padding: "15px"; readonly layout: "full-layout"; }; }; readonly slot: { readonly mobile: { readonly width: "100%"; readonly height: "auto"; readonly minHeight: "60px"; readonly margin: "0 0 8px 0"; readonly display: "block"; }; readonly tablet: { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; }; readonly desktop: { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; }; readonly desktopLarge: { readonly width: "195px"; readonly height: "97px"; readonly margin: "0"; readonly display: "flex"; }; }; readonly typography: { readonly mobile: { readonly big: { readonly fontSize: "32px"; readonly lineHeight: "24px"; }; readonly medium: { readonly fontSize: "20px"; readonly lineHeight: "14px"; }; readonly small: { readonly fontSize: "14px"; readonly lineHeight: "10px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; readonly tablet: { readonly big: { readonly fontSize: "36px"; readonly lineHeight: "26px"; }; readonly medium: { readonly fontSize: "22px"; readonly lineHeight: "16px"; }; readonly small: { readonly fontSize: "15px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; readonly desktop: { readonly big: { readonly fontSize: "40px"; readonly lineHeight: "28px"; }; readonly medium: { readonly fontSize: "24px"; readonly lineHeight: "17px"; }; readonly small: { readonly fontSize: "16px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; readonly desktopLarge: { readonly big: { readonly fontSize: "40px"; readonly lineHeight: "28px"; }; readonly medium: { readonly fontSize: "24px"; readonly lineHeight: "17px"; }; readonly small: { readonly fontSize: "16px"; readonly lineHeight: "11px"; }; readonly mini: { readonly fontSize: "10px"; readonly lineHeight: "7px"; }; }; }; readonly spacing: { readonly mobile: { readonly containerPadding: "12px"; readonly textGap: "4px"; readonly elementMargin: "1px"; }; readonly tablet: { readonly containerPadding: "15px"; readonly textGap: "5px"; readonly elementMargin: "2px"; }; readonly desktop: { readonly containerPadding: "15px"; readonly textGap: "6px"; readonly elementMargin: "2px"; }; readonly desktopLarge: { readonly containerPadding: "15px"; readonly textGap: "6px"; readonly elementMargin: "2px"; }; }; }; layoutConstraints: { readonly mobile: { readonly allowedLayouts: readonly ["leftTop", "rightTop", "leftBottom", "rightBottom"]; readonly forceVerticalStack: true; readonly maxSlotsPerRow: 1; }; readonly tablet: { readonly allowedLayouts: readonly ["leftTop", "rightTop", "leftBottom", "rightBottom", "leftTop,rightTop", "leftBottom,rightBottom", "leftTop,leftBottom", "rightTop,rightBottom"]; readonly maxSlotsPerRow: 2; }; readonly desktop: { readonly allowedLayouts: "all"; readonly maxSlotsPerRow: 2; }; readonly desktopLarge: { readonly allowedLayouts: "all"; readonly maxSlotsPerRow: 2; }; }; generateMediaQueries: typeof generateMediaQueries; generateTailwindConfig: typeof generateTailwindConfig; ResponsiveManager: typeof ResponsiveManager; };