صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
user5
/
forge_admin
1
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
درخت: c4ba0ed8aa
شاخه‌ها تگ‌ها
forge_admin
/
forge-admin-ui
/
src
/
plugins
/
responsive-font-unified.js

responsive-font-unified.js 7.8 KB
تاريخچه خام

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 
  1. /**
    2. 

  2.  * 统一的UnoCSS响应式字体插件
    3. 

  3.  * 集成了静态规则和动态规则，提供完整的响应式字体解决方案
    4. 

  4.  */
    5. 

  5. 

  6. import { definePreset } from 'unocss'
    7. 

  7. 

  8. export const responsiveFontUnifiedPreset = definePreset(() => {
    9. 

  9.   // 静态规则 - 预定义常用字体大小，提高性能
    10. 

  10.   const staticFontSizeRules = [
    11. 

  11.     // 生成常用的px字体大小规则
    12. 

  12.     ['text-10px', { 'font-size': 'calc(10px * var(--font-scale, 1)) !important' }],
    13. 

  13.     ['text-11px', { 'font-size': 'calc(11px * var(--font-scale, 1)) !important' }],
    14. 

  14.     ['text-12px', { 'font-size': 'calc(12px * var(--font-scale, 1)) !important' }],
    15. 

  15.     ['text-13px', { 'font-size': 'calc(13px * var(--font-scale, 1)) !important' }],
    16. 

  16.     ['text-14px', { 'font-size': 'calc(14px * var(--font-scale, 1)) !important' }],
    17. 

  17.     ['text-15px', { 'font-size': 'calc(15px * var(--font-scale, 1)) !important' }],
    18. 

  18.     ['text-16px', { 'font-size': 'calc(16px * var(--font-scale, 1)) !important' }],
    19. 

  19.     ['text-17px', { 'font-size': 'calc(17px * var(--font-scale, 1)) !important' }],
    20. 

  20.     ['text-18px', { 'font-size': 'calc(18px * var(--font-scale, 1)) !important' }],
    21. 

  21.     ['text-19px', { 'font-size': 'calc(19px * var(--font-scale, 1)) !important' }],
    22. 

  22.     ['text-20px', { 'font-size': 'calc(20px * var(--font-scale, 1)) !important' }],
    23. 

  23.     ['text-21px', { 'font-size': 'calc(21px * var(--font-scale, 1)) !important' }],
    24. 

  24.     ['text-22px', { 'font-size': 'calc(22px * var(--font-scale, 1)) !important' }],
    25. 

  25.     ['text-23px', { 'font-size': 'calc(23px * var(--font-scale, 1)) !important' }],
    26. 

  26.     ['text-24px', { 'font-size': 'calc(24px * var(--font-scale, 1)) !important' }],
    27. 

  27.     ['text-25px', { 'font-size': 'calc(25px * var(--font-scale, 1)) !important' }],
    28. 

  28.     ['text-26px', { 'font-size': 'calc(26px * var(--font-scale, 1)) !important' }],
    29. 

  29.     ['text-27px', { 'font-size': 'calc(27px * var(--font-scale, 1)) !important' }],
    30. 

  30.     ['text-28px', { 'font-size': 'calc(28px * var(--font-scale, 1)) !important' }],
    31. 

  31.     ['text-29px', { 'font-size': 'calc(29px * var(--font-scale, 1)) !important' }],
    32. 

  32.     ['text-30px', { 'font-size': 'calc(30px * var(--font-scale, 1)) !important' }],
    33. 

  33.     ['text-31px', { 'font-size': 'calc(31px * var(--font-scale, 1)) !important' }],
    34. 

  34.     ['text-32px', { 'font-size': 'calc(32px * var(--font-scale, 1)) !important' }],
    35. 

  35.     ['text-33px', { 'font-size': 'calc(33px * var(--font-scale, 1)) !important' }],
    36. 

  36.     ['text-34px', { 'font-size': 'calc(34px * var(--font-scale, 1)) !important' }],
    37. 

  37.     ['text-35px', { 'font-size': 'calc(35px * var(--font-scale, 1)) !important' }],
    38. 

  38.     ['text-36px', { 'font-size': 'calc(36px * var(--font-scale, 1)) !important' }],
    39. 

  39.     ['text-10', { 'font-size': 'calc(10px * var(--font-scale, 1)) !important' }],
    40. 

  40.     ['text-11', { 'font-size': 'calc(11px * var(--font-scale, 1)) !important' }],
    41. 

  41.     ['text-12', { 'font-size': 'calc(12px * var(--font-scale, 1)) !important' }],
    42. 

  42.     ['text-13', { 'font-size': 'calc(13px * var(--font-scale, 1)) !important' }],
    43. 

  43.     ['text-14', { 'font-size': 'calc(14px * var(--font-scale, 1)) !important' }],
    44. 

  44.     ['text-15', { 'font-size': 'calc(15px * var(--font-scale, 1)) !important' }],
    45. 

  45.     ['text-16', { 'font-size': 'calc(16px * var(--font-scale, 1)) !important' }],
    46. 

  46.     ['text-17', { 'font-size': 'calc(17px * var(--font-scale, 1)) !important' }],
    47. 

  47.     ['text-18', { 'font-size': 'calc(18px * var(--font-scale, 1)) !important' }],
    48. 

  48.     ['text-19', { 'font-size': 'calc(19px * var(--font-scale, 1)) !important' }],
    49. 

  49.     ['text-20', { 'font-size': 'calc(20px * var(--font-scale, 1)) !important' }],
    50. 

  50.     ['text-21', { 'font-size': 'calc(21px * var(--font-scale, 1)) !important' }],
    51. 

  51.     ['text-22', { 'font-size': 'calc(22px * var(--font-scale, 1)) !important' }],
    52. 

  52.     ['text-23', { 'font-size': 'calc(23px * var(--font-scale, 1)) !important' }],
    53. 

  53.     ['text-24', { 'font-size': 'calc(24px * var(--font-scale, 1)) !important' }],
    54. 

  54.     ['text-25', { 'font-size': 'calc(25px * var(--font-scale, 1)) !important' }],
    55. 

  55.     ['text-26', { 'font-size': 'calc(26px * var(--font-scale, 1)) !important' }],
    56. 

  56.     ['text-27', { 'font-size': 'calc(27px * var(--font-scale, 1)) !important' }],
    57. 

  57.     ['text-28', { 'font-size': 'calc(28px * var(--font-scale, 1)) !important' }],
    58. 

  58.     ['text-29', { 'font-size': 'calc(29px * var(--font-scale, 1)) !important' }],
    59. 

  59.     ['text-30', { 'font-size': 'calc(30px * var(--font-scale, 1)) !important' }],
    60. 

  60.     ['text-31', { 'font-size': 'calc(31px * var(--font-scale, 1)) !important' }],
    61. 

  61.     ['text-32', { 'font-size': 'calc(32px * var(--font-scale, 1)) !important' }],
    62. 

  62.     ['text-33', { 'font-size': 'calc(33px * var(--font-scale, 1)) !important' }],
    63. 

  63.     ['text-34', { 'font-size': 'calc(34px * var(--font-scale, 1)) !important' }],
    64. 

  64.     ['text-35', { 'font-size': 'calc(35px * var(--font-scale, 1)) !important' }],
    65. 

  65.     ['text-36', { 'font-size': 'calc(36px * var(--font-scale, 1)) !important' }],
    66. 

  66. 

  67.     // 预定义尺寸
    68. 

  68.     ['text-xs', { 'font-size': 'calc(12px * var(--font-scale, 1)) !important' }],
    69. 

  69.     ['text-sm', { 'font-size': 'calc(14px * var(--font-scale, 1)) !important' }],
    70. 

  70.     ['text-base', { 'font-size': 'calc(16px * var(--font-scale, 1)) !important' }],
    71. 

  71.     ['text-lg', { 'font-size': 'calc(18px * var(--font-scale, 1)) !important' }],
    72. 

  72.     ['text-xl', { 'font-size': 'calc(20px * var(--font-scale, 1)) !important' }],
    73. 

  73.   ]
    74. 

  74. 

  75.   // 静态行高规则
    76. 

  76.   const staticLineHeightRules = [
    77. 

  77.     ['leading-12', { 'line-height': 'calc(12px * var(--font-scale, 1)) !important' }],
    78. 

  78.     ['leading-14', { 'line-height': 'calc(14px * var(--font-scale, 1)) !important' }],
    79. 

  79.     ['leading-16', { 'line-height': 'calc(16px * var(--font-scale, 1)) !important' }],
    80. 

  80.     ['leading-18', { 'line-height': 'calc(18px * var(--font-scale, 1)) !important' }],
    81. 

  81.     ['leading-20', { 'line-height': 'calc(20px * var(--font-scale, 1)) !important' }],
    82. 

  82.     ['leading-22', { 'line-height': 'calc(22px * var(--font-scale, 1)) !important' }],
    83. 

  83.     ['leading-24', { 'line-height': 'calc(24px * var(--font-scale, 1)) !important' }],
    84. 

  84.     ['leading-26', { 'line-height': 'calc(26px * var(--font-scale, 1)) !important' }],
    85. 

  85.     ['leading-28', { 'line-height': 'calc(28px * var(--font-scale, 1)) !important' }],
    86. 

  86.     ['leading-30', { 'line-height': 'calc(30px * var(--font-scale, 1)) !important' }],
    87. 

  87.     ['leading-32', { 'line-height': 'calc(32px * var(--font-scale, 1)) !important' }],
    88. 

  88.   ]
    89. 

  89. 

  90.   // 动态规则 - 处理任意数值，提供更大的灵活性
    91. 

  91.   const dynamicRules = [
    92. 

  92.     // 处理text-xs, text-sm等预定义尺寸
    93. 

  93.     [/^text-(xs|sm|base|lg|xl)$/, ([_, size]) => {
    94. 

  94.       const sizes = {
    95. 

  95.         xs: '12px',
    96. 

  96.         sm: '14px',
    97. 

  97.         base: '16px',
    98. 

  98.         lg: '18px',
    99. 

  99.         xl: '20px',
    100. 

  100.       }
    101. 

  101. 

  102.       if (sizes[size]) {
    103. 

  103.         return {
    104. 

  104.           'font-size': `calc(${sizes[size]} * var(--font-scale, 1)) !important`,
    105. 

  105.         }
    106. 

  106.       }
    107. 

  107.     }],
    108. 

  108. 

  109.     // 处理line-height
    110. 

  110.     [/^leading-(\d+)$/, ([_, size]) => {
    111. 

  111.       const value = Number.parseInt(size)
    112. 

  112.       if (value > 0) {
    113. 

  113.         return {
    114. 

  114.           'line-height': `calc(${value}px * var(--font-scale, 1)) !important`,
    115. 

  115.         }
    116. 

  116.       }
    117. 

  117.     }],
    118. 

  118.   ]
    119. 

  119. 

  120.   // 合并所有规则 - 静态规则优先，动态规则作为补充
    121. 

  121.   const allRules = [...staticFontSizeRules, ...staticLineHeightRules, ...dynamicRules]
    122. 

  122. 

  123.   return {
    124. 

  124.     name: 'responsive-font-unified-preset',
    125. 

  125.     rules: allRules,
    126. 

  126. 

  127.     // 快捷方式
    128. 

  128.     shortcuts: [
    129. 

  129.       // 响应式标题
    130. 

  130.       ['responsive-h1', 'text-32px font-bold'],
    131. 

  131.       ['responsive-h2', 'text-24px font-bold'],
    132. 

  132.       ['responsive-h3', 'text-18px font-semibold'],
    133. 

  133.       ['responsive-h4', 'text-16px font-semibold'],
    134. 

  134.       ['responsive-h5', 'text-14px font-medium'],
    135. 

  135.       ['responsive-h6', 'text-12px font-medium'],
    136. 

  136. 

  137.       // 响应式正文
    138. 

  138.       ['responsive-text', 'text-14px'],
    139. 

  139.       ['responsive-text-sm', 'text-12px'],
    140. 

  140.       ['responsive-text-lg', 'text-16px'],
    141. 

  141. 

  142.       // 响应式辅助文本
    143. 

  143.       ['responsive-caption', 'text-12px text-gray-500'],
    144. 

  144.     ],
    145. 

  145.   }
    146. 

  146. })
    147. 

  147. 

  148. export default responsiveFontUnifiedPreset
    149.