breakpoints.ts 877 B

123456789101112131415161718192021222324252627282930313233
  1. /**
  2. * 响应式设计断点常量
  3. * 用于统一管理响应式断点,确保所有页面使用一致的断点
  4. */
  5. export const BREAKPOINTS = {
  6. /** 小屏幕(大手机):640px */
  7. sm: '640px',
  8. /** 中等屏幕(平板):768px */
  9. md: '768px',
  10. /** 大屏幕(小桌面):1024px */
  11. lg: '1024px',
  12. /** 超大屏幕(大桌面):1280px */
  13. xl: '1280px',
  14. /** 超超大屏幕(超大桌面):1536px */
  15. '2xl': '1536px',
  16. } as const;
  17. /**
  18. * 布局尺寸常量
  19. * 用于统一管理布局尺寸,确保所有页面使用一致的尺寸
  20. */
  21. export const LAYOUT = {
  22. /** 导航栏宽度:64px (4rem) */
  23. navigationWidth: '4rem',
  24. /** 侧边栏宽度:320px (20rem) */
  25. sidebarWidth: '20rem',
  26. /** 右侧面板宽度:320px (20rem) */
  27. rightPanelWidth: '20rem',
  28. /** 顶部栏高度:64px (4rem) */
  29. headerHeight: '4rem',
  30. } as const;