@zhang_jifan/fanui 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/ACCESSIBILITY.md +61 -0
  2. package/CHANGELOG.md +112 -0
  3. package/COMMERCIAL-LICENSE.md +71 -0
  4. package/DESIGN-SYSTEM.md +294 -0
  5. package/LICENSE +661 -0
  6. package/README.md +348 -0
  7. package/USAGE.md +1926 -0
  8. package/_index.scss +20 -0
  9. package/dist/fanui.cjs +15 -0
  10. package/dist/fanui.css +28209 -0
  11. package/dist/fanui.d.ts +353 -0
  12. package/dist/fanui.esm.js +71 -0
  13. package/dist/fanui.js +4782 -0
  14. package/dist/fanui.min.css +1 -0
  15. package/dist/fanui.mjs +71 -0
  16. package/dist/modules/fanui-advanced.css +830 -0
  17. package/dist/modules/fanui-advanced.min.css +129 -0
  18. package/dist/modules/fanui-alert.css +575 -0
  19. package/dist/modules/fanui-alert.min.css +122 -0
  20. package/dist/modules/fanui-badge.css +426 -0
  21. package/dist/modules/fanui-badge.min.css +77 -0
  22. package/dist/modules/fanui-base.css +1394 -0
  23. package/dist/modules/fanui-base.min.css +236 -0
  24. package/dist/modules/fanui-blog.css +762 -0
  25. package/dist/modules/fanui-blog.min.css +108 -0
  26. package/dist/modules/fanui-button.css +526 -0
  27. package/dist/modules/fanui-button.min.css +56 -0
  28. package/dist/modules/fanui-card.css +291 -0
  29. package/dist/modules/fanui-card.min.css +52 -0
  30. package/dist/modules/fanui-choice.css +539 -0
  31. package/dist/modules/fanui-choice.min.css +83 -0
  32. package/dist/modules/fanui-dashboard.css +1057 -0
  33. package/dist/modules/fanui-dashboard.min.css +160 -0
  34. package/dist/modules/fanui-data.css +687 -0
  35. package/dist/modules/fanui-data.min.css +125 -0
  36. package/dist/modules/fanui-feedback.css +432 -0
  37. package/dist/modules/fanui-feedback.min.css +79 -0
  38. package/dist/modules/fanui-form.css +779 -0
  39. package/dist/modules/fanui-form.min.css +123 -0
  40. package/dist/modules/fanui-glass.css +497 -0
  41. package/dist/modules/fanui-glass.min.css +46 -0
  42. package/dist/modules/fanui-input-plus.css +799 -0
  43. package/dist/modules/fanui-input-plus.min.css +124 -0
  44. package/dist/modules/fanui-interactive.css +960 -0
  45. package/dist/modules/fanui-interactive.min.css +138 -0
  46. package/dist/modules/fanui-layout.css +4399 -0
  47. package/dist/modules/fanui-layout.min.css +1172 -0
  48. package/dist/modules/fanui-marketing.css +1125 -0
  49. package/dist/modules/fanui-marketing.min.css +144 -0
  50. package/dist/modules/fanui-nav.css +458 -0
  51. package/dist/modules/fanui-nav.min.css +76 -0
  52. package/dist/modules/fanui-overlay.css +547 -0
  53. package/dist/modules/fanui-overlay.min.css +91 -0
  54. package/dist/modules/fanui-table.css +290 -0
  55. package/dist/modules/fanui-table.min.css +62 -0
  56. package/dist/modules/fanui-tabs.css +333 -0
  57. package/dist/modules/fanui-tabs.min.css +58 -0
  58. package/dist/modules/fanui-themes.css +2728 -0
  59. package/dist/modules/fanui-themes.min.css +40 -0
  60. package/dist/modules/fanui-tokens.css +587 -0
  61. package/dist/modules/fanui-tokens.min.css +3 -0
  62. package/dist/modules/fanui-utilities.css +6557 -0
  63. package/dist/modules/fanui-utilities.min.css +1762 -0
  64. package/dist/modules/sizes.json +103 -0
  65. package/docs/MIGRATION-v2.md +179 -0
  66. package/examples/01-script-tag.html +149 -0
  67. package/examples/02-react/README.md +39 -0
  68. package/examples/02-react/index.html +12 -0
  69. package/examples/02-react/package.json +20 -0
  70. package/examples/02-react/src/App.jsx +108 -0
  71. package/examples/02-react/src/main.jsx +13 -0
  72. package/examples/02-react/src/useFanUI.js +87 -0
  73. package/examples/02-react/vite.config.js +6 -0
  74. package/examples/03-vue3/README.md +67 -0
  75. package/examples/03-vue3/index.html +12 -0
  76. package/examples/03-vue3/package.json +19 -0
  77. package/examples/03-vue3/src/App.vue +93 -0
  78. package/examples/03-vue3/src/main.js +8 -0
  79. package/examples/03-vue3/src/useFanUI.js +85 -0
  80. package/examples/03-vue3/vite.config.js +6 -0
  81. package/examples/04-vue2-cdn.html +93 -0
  82. package/examples/README.md +34 -0
  83. package/package.json +127 -0
  84. package/src/_functions.scss +319 -0
  85. package/src/_mixins.scss +1202 -0
  86. package/src/_tokens.scss +180 -0
  87. package/src/_variables.scss +491 -0
  88. package/src/base/_animations.scss +210 -0
  89. package/src/base/_reset.scss +359 -0
  90. package/src/base/_rtl.scss +133 -0
  91. package/src/base/_typography.scss +353 -0
  92. package/src/components/_advanced.scss +763 -0
  93. package/src/components/_alert.scss +322 -0
  94. package/src/components/_badge.scss +279 -0
  95. package/src/components/_blog.scss +693 -0
  96. package/src/components/_button.scss +351 -0
  97. package/src/components/_capabilities.scss +463 -0
  98. package/src/components/_card.scss +281 -0
  99. package/src/components/_choice.scss +444 -0
  100. package/src/components/_dashboard.scss +950 -0
  101. package/src/components/_data.scss +618 -0
  102. package/src/components/_feedback.scss +403 -0
  103. package/src/components/_form.scss +408 -0
  104. package/src/components/_glass.scss +374 -0
  105. package/src/components/_input-plus.scss +730 -0
  106. package/src/components/_interactive.scss +885 -0
  107. package/src/components/_marketing.scss +982 -0
  108. package/src/components/_nav.scss +480 -0
  109. package/src/components/_overlay.scss +517 -0
  110. package/src/components/_table.scss +276 -0
  111. package/src/components/_tabs.scss +338 -0
  112. package/src/fanui.d.ts +353 -0
  113. package/src/fanui.js +4782 -0
  114. package/src/fanui.scss +79 -0
  115. package/src/glass/_switches.scss +36 -0
  116. package/src/glass/_tokens.scss +259 -0
  117. package/src/layout/_container.scss +111 -0
  118. package/src/layout/_flex.scss +164 -0
  119. package/src/layout/_grid.scss +180 -0
  120. package/src/themes/_accents.scss +201 -0
  121. package/src/themes/_palettes.scss +180 -0
  122. package/src/utilities/_borders.scss +104 -0
  123. package/src/utilities/_display.scss +145 -0
  124. package/src/utilities/_effects.scss +210 -0
  125. package/src/utilities/_sizing.scss +123 -0
  126. package/src/utilities/_spacing.scss +118 -0
  127. package/src/utilities/_texture.scss +323 -0
package/src/components/_glass.scss ADDED
@@ -0,0 +1,374 @@
1
+ // =============================================================================
2
+ // fanUI · 液态玻璃组件层 (Liquid Glass)
3
+ // -----------------------------------------------------------------------------
4
+ // 提供：
5
+ // .fanui-glass 基础液态玻璃面（完整材质：底色 + 高光层 + 折射 + 描边 + 厚度阴影 + 边缘流光）
6
+ // .fanui-glass--thin|regular|thick|ultra|lens 厚度预设
7
+ // .fanui-glass--flow 液体流动动效（品牌色流体在玻璃内游移）
8
+ // .fanui-glass--static 关闭指针高光（纯静态玻璃）
9
+ // .fanui-glass--reactive 悬浮自动增厚
10
+ // .fanui-glass--card|bar|panel|square|sharp 形态变体
11
+ // .fanui-glass-lens 局部透镜（放大镜式）
12
+ //
13
+ // 调用方控制入口（三层）
14
+ // 1. --fanui-glass-intensity: 0 ~ 2 强度总旋钮（元素级覆盖同样有效）
15
+ // 2. <html data-fanui-glass="off"> 全局开关（JS: FanUI.theme.setGlass(false)）
16
+ // 3. .fanui-glass--thin 等预设类 单组件厚度
17
+ //
18
+ // 实现要点：所有强度公式在消费端内联展开（mx.fanui-glass-*），
19
+ // 因此「元素上改 intensity / 套预设 / 局部覆盖令牌」都能实时重算。
20
+ //
21
+ // 组件接入：导航栏 / 侧边栏 / 模态框 / 抽屉 / 下拉菜单 / 气泡 / Toast / 表格头 / 按钮
22
+ // 均通过同一套玻璃令牌取材质，全局开关一关即刻整体降级。
23
+ // =============================================================================
24
+
25
+ @use "sass:map";
26
+ @use "sass:list";
27
+ @use "../functions" as fn;
28
+ @use "../variables" as v;
29
+ @use "../mixins" as mx;
30
+ @use "../glass/tokens" as gt;
31
+
32
+ // -----------------------------------------------------------------------------
33
+ // 1. 基础材质
34
+ // -----------------------------------------------------------------------------
35
+
36
+ .fanui-glass {
37
+ @include mx.fanui-glass-material();
38
+ color: var(--fanui-color-text);
39
+ @include mx.fanui-glass-legibility();
40
+ }
41
+
42
+ // -----------------------------------------------------------------------------
43
+ // 1.5 暗色模式 × 玻璃：文字对比度适配
44
+ // -----------------------------------------------------------------------------
45
+ // 玻璃底是半透明深色，次级文字（muted / subtle）沿用全局令牌时对比度不足。
46
+ // 在所有「玻璃材质元素」上局部提亮文字梯度与描边，让玻璃上的每一层文字都可读。
47
+ // 仅作用于玻璃元素内部，不影响页面其余部分。
48
+ @mixin fanui-glass-dark-text() {
49
+ --fanui-color-text: #f1f5f9;
50
+ --fanui-color-text-strong: #ffffff;
51
+ --fanui-color-text-muted: #cbd5e1;
52
+ --fanui-color-text-subtle: #94a3b8;
53
+ --fanui-color-border-subtle: rgba(255, 255, 255, 0.08);
54
+ --fanui-color-hover: rgba(255, 255, 255, 0.08);
55
+ --fanui-color-active: rgba(255, 255, 255, 0.12);
56
+ }
57
+
58
+ @mixin fanui-glass-dark-text-selectors() {
59
+ .fanui-glass,
60
+ .fanui-card--glass,
61
+ .fanui-panel--glass,
62
+ .fanui-navbar--glass,
63
+ .fanui-sidebar--glass,
64
+ .fanui-menu--glass,
65
+ .fanui-dropdown--glass .fanui-dropdown__menu,
66
+ .fanui-popover--glass .fanui-popover__panel,
67
+ .fanui-modal--glass .fanui-modal__dialog,
68
+ .fanui-drawer--glass .fanui-drawer__panel,
69
+ .fanui-toast--glass,
70
+ .fanui-toast-region .fanui-toast,
71
+ .fanui-alert--glass,
72
+ .fanui-btn--glass,
73
+ .fanui-table--glass {
74
+ @include fanui-glass-dark-text();
75
+ }
76
+ }
77
+
78
+ [data-fanui-theme="dark"] {
79
+ @include fanui-glass-dark-text-selectors();
80
+ }
81
+
82
+ @media (prefers-color-scheme: dark) {
83
+ [data-fanui-theme="auto"] {
84
+ @include fanui-glass-dark-text-selectors();
85
+ }
86
+ }
87
+
88
+ // -----------------------------------------------------------------------------
89
+ // 2. 厚度预设
90
+ // -----------------------------------------------------------------------------
91
+ // 预设只覆盖「与模式无关」的参数：强度、基础模糊、边缘宽度、镜面强度。
92
+ // 底色（tint-base / tint-k）刻意不写死：它必须跟随当前深浅模式，
93
+ // 由 intensity 统一驱动（alpha = tint-base + tint-k × intensity），
94
+ // 这样同一预设在任何模式下都保持同一「厚度语义」。
95
+
96
+ @each $name, $config in gt.$fanui-glass-presets {
97
+ .fanui-glass--#{$name} {
98
+ --fanui-glass-intensity: #{map.get($config, "intensity")};
99
+ --fanui-glass-blur-base: #{map.get($config, "blur")};
100
+ --fanui-glass-edge-width: #{map.get($config, "edge")};
101
+ --fanui-glass-specular-alpha: #{map.get($config, "specular")};
102
+ }
103
+ }
104
+
105
+ // -----------------------------------------------------------------------------
106
+ // 3. 形态变体
107
+ // -----------------------------------------------------------------------------
108
+
109
+ .fanui-glass--card {
110
+ padding: var(--fanui-glass-padding, #{fn.fanui-var("space-6")});
111
+ border-radius: var(--fanui-glass-radius, #{fn.fanui-var("radius-xl")});
112
+ }
113
+
114
+ .fanui-glass--bar {
115
+ display: flex;
116
+ align-items: center;
117
+ gap: fn.fanui-var("space-3");
118
+ padding: fn.fanui-var("space-2") fn.fanui-var("space-3");
119
+ border-radius: var(--fanui-glass-radius, #{fn.fanui-var("radius-full")});
120
+ }
121
+
122
+ .fanui-glass--panel {
123
+ padding: fn.fanui-var("space-5");
124
+ border-radius: var(--fanui-glass-radius, #{fn.fanui-var("radius-2xl")});
125
+ }
126
+
127
+ .fanui-glass--square {
128
+ border-radius: 0;
129
+ }
130
+
131
+ .fanui-glass--sharp {
132
+ --fanui-glass-radius: 0;
133
+ }
134
+
135
+ // 悬浮时玻璃变"厚"：强度自动上扬（结合 transition 产生液体被按压的感觉）
136
+ .fanui-glass--reactive {
137
+ @include mx.fanui-transition((box-shadow, transform, background-color), v.$fanui-duration-base);
138
+
139
+ &:hover {
140
+ --fanui-glass-intensity: var(--fanui-glass-hover-intensity, 1.25);
141
+ transform: translateY(-1px);
142
+ }
143
+
144
+ &:active {
145
+ transform: translateY(0) scale(0.995);
146
+ }
147
+ }
148
+
149
+ // -----------------------------------------------------------------------------
150
+ // 4. 液体流动（品牌色光斑在玻璃内部缓慢游移）
151
+ // -----------------------------------------------------------------------------
152
+ // 光斑作为额外 background-image 图层叠加，动画 background-position，
153
+ // 永远位于内容之下，绝不干扰文字可读性，也不需要额外 DOM。
154
+
155
+ @if v.$fanui-glass-enable-flow {
156
+ .fanui-glass--flow {
157
+ @include mx.fanui-glass-layer(true);
158
+ background-size: 170% 170%, 170% 170%, 100% 100%, 100% 100%;
159
+ background-repeat: no-repeat;
160
+ animation: fanui-glass-flow 22s ease-in-out infinite alternate;
161
+ }
162
+
163
+ @keyframes fanui-glass-flow {
164
+ 0% {
165
+ background-position: 0% 0%, 100% 100%, center, center;
166
+ }
167
+ 100% {
168
+ background-position: 100% 55%, 0% 15%, center, center;
169
+ }
170
+ }
171
+
172
+ @media (prefers-reduced-motion: reduce) {
173
+ .fanui-glass--flow {
174
+ animation: none;
175
+ }
176
+ }
177
+ }
178
+
179
+ // -----------------------------------------------------------------------------
180
+ // 5. 指针高光（"液态"的关键：光随手指走）
181
+ // -----------------------------------------------------------------------------
182
+ // 由 JS 在 pointermove 时写入 --fanui-glass-mx / --fanui-glass-my。
183
+ // 未启用 JS 时保持 CSS 默认位置，视觉同样成立。
184
+
185
+ .fanui-glass--static {
186
+ --fanui-glass-specular-alpha: 0;
187
+ --fanui-glass-edge-angle: 150deg;
188
+ }
189
+
190
+ [data-fanui-glass-track] {
191
+ --fanui-glass-mx: 30%;
192
+ --fanui-glass-my: 0%;
193
+ }
194
+
195
+ [data-fanui-glass-track]:hover {
196
+ --fanui-glass-specular-alpha: 1;
197
+ }
198
+
199
+ // -----------------------------------------------------------------------------
200
+ // 6. 透镜变体（局部放大式玻璃，用于 Dock / 徽标 / 悬浮按钮）
201
+ // -----------------------------------------------------------------------------
202
+
203
+ .fanui-glass-lens {
204
+ --fanui-glass-tint-base: 0.14;
205
+ --fanui-glass-tint-k: 0.34;
206
+ --fanui-glass-blur-base: 30px;
207
+ border-radius: inherit;
208
+ box-shadow:
209
+ 0 10px 26px -10px rgba(2, 6, 23, 0.4),
210
+ inset 0 1px 0 rgba(255, 255, 255, 0.5),
211
+ inset 0 -12px 20px -14px rgba(255, 255, 255, 0.35);
212
+ }
213
+
214
+ // 透镜的白色内高光按模式适配：暗色下收敛，避免"发光贴纸"感
215
+ [data-fanui-theme="dark"] .fanui-glass-lens {
216
+ box-shadow:
217
+ 0 10px 26px -10px rgba(0, 0, 0, 0.6),
218
+ inset 0 1px 0 rgba(255, 255, 255, 0.18),
219
+ inset 0 -12px 20px -14px rgba(255, 255, 255, 0.1);
220
+ }
221
+
222
+ @media (prefers-color-scheme: dark) {
223
+ [data-fanui-theme="auto"] .fanui-glass-lens {
224
+ box-shadow:
225
+ 0 10px 26px -10px rgba(0, 0, 0, 0.6),
226
+ inset 0 1px 0 rgba(255, 255, 255, 0.18),
227
+ inset 0 -12px 20px -14px rgba(255, 255, 255, 0.1);
228
+ }
229
+ }
230
+
231
+ // -----------------------------------------------------------------------------
232
+ // 7. 组件接入：让既有组件复用同一套玻璃令牌
233
+ // -----------------------------------------------------------------------------
234
+ // 这些修饰类只重写「材质层」，不改动组件原有布局，因此可安全叠加使用。
235
+
236
+ .fanui-card--glass,
237
+ .fanui-panel--glass {
238
+ @include mx.fanui-glass-material($edge: false);
239
+ }
240
+
241
+ .fanui-table--glass {
242
+ --fanui-table-striped-bg: rgba(
243
+ var(--fanui-glass-divider-rgb),
244
+ calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity))
245
+ );
246
+ --fanui-table-border-color: rgba(
247
+ var(--fanui-glass-divider-rgb),
248
+ calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity))
249
+ );
250
+
251
+ > thead > tr > th {
252
+ @include mx.fanui-glass-surface($shadow: false);
253
+ }
254
+ }
255
+
256
+ // 导航栏玻璃：滚动后自动加深（.is-scrolled 由 JS 或滚动侦听添加）
257
+ .fanui-navbar--glass {
258
+ @include mx.fanui-glass-tint();
259
+ @include mx.fanui-glass-sheen();
260
+ @include mx.fanui-glass-refraction();
261
+ border-bottom-color: rgba(
262
+ var(--fanui-glass-border-rgb),
263
+ calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity))
264
+ );
265
+ box-shadow: none;
266
+ @include mx.fanui-transition((background-color, box-shadow, border-color), v.$fanui-duration-base);
267
+
268
+ &.is-scrolled {
269
+ @include mx.fanui-glass-depth();
270
+ }
271
+ }
272
+
273
+ .fanui-sidebar--glass,
274
+ .fanui-menu--glass {
275
+ @include mx.fanui-glass-surface();
276
+ }
277
+
278
+ // 承载正文的玻璃浮层：统一加「可读性地板」（近实色 overlay 渐变），
279
+ // 保证 desc / subtle 文字在任何页面背景上 ≥ AA；工具条 / 按钮 / 导航不加（保持通透）。
280
+ .fanui-modal--glass .fanui-modal__dialog,
281
+ .fanui-drawer--glass .fanui-drawer__panel {
282
+ @include mx.fanui-glass-surface();
283
+ @include mx.fanui-glass-readable-floor(0.6);
284
+ }
285
+
286
+ .fanui-dropdown--glass .fanui-dropdown__menu,
287
+ .fanui-popover--glass .fanui-popover__panel {
288
+ @include mx.fanui-glass-surface();
289
+ @include mx.fanui-glass-readable-floor(0.55);
290
+ }
291
+
292
+ .fanui-tooltip--glass .fanui-tooltip__bubble {
293
+ @include mx.fanui-glass-surface();
294
+ }
295
+
296
+ .fanui-toast--glass,
297
+ .fanui-toast-region .fanui-toast {
298
+ @include mx.fanui-glass-surface();
299
+ }
300
+
301
+ .fanui-alert--glass {
302
+ @include mx.fanui-glass-surface($shadow: false);
303
+ }
304
+
305
+ .fanui-btn--glass {
306
+ @include mx.fanui-glass-surface($shadow: false);
307
+ --fanui-btn-fg: var(--fanui-color-text);
308
+ --fanui-btn-hover-fg: var(--fanui-color-text-strong);
309
+ --fanui-btn-active-fg: var(--fanui-color-text-strong);
310
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--fanui-glass-inner-hi) * min(1, var(--fanui-glass-intensity))));
311
+
312
+ &:hover {
313
+ box-shadow:
314
+ inset 0 1px 0 rgba(255, 255, 255, calc((var(--fanui-glass-inner-hi) + 0.2) * min(1, var(--fanui-glass-intensity)))),
315
+ 0 6px 18px -8px rgba(var(--fanui-glass-shadow-rgb), calc(0.28 * var(--fanui-glass-intensity)));
316
+ }
317
+ }
318
+
319
+ // 玻璃面板上的分隔与输入类控件：改用玻璃化的底色，避免"贴纸感"
320
+ .fanui-glass .fanui-form-control,
321
+ .fanui-glass .fanui-select,
322
+ .fanui-glass .fanui-textarea {
323
+ background-color: rgba(
324
+ var(--fanui-glass-divider-rgb),
325
+ calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity))
326
+ );
327
+ border-color: rgba(
328
+ var(--fanui-glass-border-rgb),
329
+ calc(var(--fanui-glass-border-a) + var(--fanui-glass-border-k) * var(--fanui-glass-intensity))
330
+ );
331
+ backdrop-filter: none;
332
+ }
333
+
334
+ .fanui-glass .fanui-table > thead > tr > th {
335
+ background-color: transparent;
336
+ }
337
+
338
+ .fanui-glass .fanui-table > tbody > tr > td {
339
+ border-color: rgba(
340
+ var(--fanui-glass-divider-rgb),
341
+ calc(var(--fanui-glass-divider-a) * var(--fanui-glass-intensity))
342
+ );
343
+ }
344
+
345
+ // -----------------------------------------------------------------------------
346
+ // 8. 降级：全局关闭时清除所有折射与高光
347
+ // -----------------------------------------------------------------------------
348
+ // 令牌层已把强度类参数归零（→ 实体表面）；这里再兜一次 backdrop-filter，
349
+ // 防止调用方在元素上硬编码了 backdrop-filter（例如把预设类直接写在元素上，
350
+ // 会以元素级权重覆盖根上的 blur-base:0）。
351
+ //
352
+ // 用「子串属性选择器」一次覆盖全部玻璃元素（.fanui-glass*、.fanui-xxx--glass），
353
+ // 比逐个列举更稳，新增玻璃组件也不会漏。
354
+
355
+ :root[data-fanui-glass="off"] [class*="fanui-glass"],
356
+ :root[data-fanui-glass="off"] [class*="--glass"],
357
+ [data-fanui-glass="off"] [class*="fanui-glass"],
358
+ [data-fanui-glass="off"] [class*="--glass"],
359
+ [data-fanui-glass="off"][class*="fanui-glass"],
360
+ [data-fanui-glass="off"][class*="--glass"] {
361
+ backdrop-filter: none;
362
+ -webkit-backdrop-filter: none;
363
+
364
+ &::after {
365
+ display: none;
366
+ }
367
+ }
368
+
369
+ // 减少动效偏好
370
+ @media (prefers-reduced-motion: reduce) {
371
+ .fanui-glass--reactive:hover {
372
+ transform: none;
373
+ }
374
+ }