@zhang_jifan/fanui 2.1.0

package/src/utilities/_display.scss

@@ -0,0 +1,145 @@
+// =============================================================================
+// fanUI · 显示 / 定位 / 溢出 / 层级 工具类
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 可见性
+// -----------------------------------------------------------------------------
+
+.fanui-visible     { visibility: visible; }
+.fanui-invisible   { visibility: hidden; }
+.fanui-collapse    { visibility: collapse; }
+
+.fanui-hidden      { display: none !important; }
+.fanui-opacity-0   { opacity: 0; }
+.fanui-opacity-25  { opacity: 0.25; }
+.fanui-opacity-50  { opacity: 0.5; }
+.fanui-opacity-75  { opacity: 0.75; }
+.fanui-opacity-100 { opacity: 1; }
+
+// -----------------------------------------------------------------------------
+// 2. 定位
+// -----------------------------------------------------------------------------
+
+.fanui-static   { position: static; }
+.fanui-relative { position: relative; }
+.fanui-absolute { position: absolute; }
+.fanui-fixed    { position: fixed; }
+.fanui-sticky   { position: sticky; }
+
+// inset
+@each $key, $value in (0: 0, 1: 4px, 2: 8px, 3: 12px, 4: 16px, 6: 24px, 8: 32px) {
+  .fanui-top-#{$key}    { top: $value; }
+  .fanui-right-#{$key}  { right: $value; }
+  .fanui-bottom-#{$key} { bottom: $value; }
+  .fanui-left-#{$key}   { left: $value; }
+}
+.fanui-inset-0     { inset: 0; }
+.fanui-top-auto    { top: auto; }
+.fanui-right-auto  { right: auto; }
+.fanui-bottom-auto { bottom: auto; }
+.fanui-left-auto   { left: auto; }
+
+.fanui-absolute-center {
+  @include mx.fanui-abs-center(both);
+}
+.fanui-absolute-fill {
+  @include mx.fanui-absolute-fill();
+}
+.fanui-fixed-fill {
+  @include mx.fanui-fixed-fill();
+}
+
+// 层级
+@each $name, $value in v.$fanui-zindexes {
+  .fanui-z-#{$name} { z-index: $value; }
+}
+@for $i from 0 through 5 {
+  .fanui-z-#{$i * 10} { z-index: $i * 10; }
+}
+.fanui-z-auto { z-index: auto; }
+
+// -----------------------------------------------------------------------------
+// 3. 溢出 / 滚动
+// -----------------------------------------------------------------------------
+
+.fanui-overflow-auto    { overflow: auto; }
+.fanui-overflow-hidden  { overflow: hidden; }
+.fanui-overflow-visible { overflow: visible; }
+.fanui-overflow-scroll  { overflow: scroll; }
+.fanui-overflow-x-auto  { overflow-x: auto; }
+.fanui-overflow-y-auto  { overflow-y: auto; }
+.fanui-overflow-x-hidden { overflow-x: hidden; }
+.fanui-overflow-y-hidden { overflow-y: hidden; }
+
+.fanui-scroll-smooth  { scroll-behavior: smooth; }
+.fanui-scroll-x       { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.fanui-scroll-y       { overflow-y: auto; -webkit-overflow-scrolling: touch; }
+
+// -----------------------------------------------------------------------------
+// 4. 浮动 / 清除
+// -----------------------------------------------------------------------------
+
+.fanui-float-start { float: left; }
+.fanui-float-end   { float: right; }
+.fanui-float-none  { float: none; }
+.fanui-clearfix    { @include mx.fanui-clearfix(); }
+.fanui-clear-both  { clear: both; }
+
+// -----------------------------------------------------------------------------
+// 5. 容器查询 / 响应式隐藏
+// -----------------------------------------------------------------------------
+
+.fanui-block-sm, .fanui-block-md, .fanui-block-lg, .fanui-block-xl { display: none; }
+
+@each $bp, $min in v.$fanui-breakpoints {
+  @if $bp != "xs" {
+    @include mx.fanui-media($bp, min) {
+      .fanui-hide-#{$bp}-up   { display: none !important; }
+      .fanui-block-#{$bp}     { display: block; }
+    }
+
+    // 向下隐藏（小于该断点）
+    @include mx.fanui-media($bp, max) {
+      .fanui-hide-#{$bp}-down { display: none !important; }
+    }
+  }
+}
+
+.fanui-print-only { display: none; }
+
+@media print {
+  .fanui-no-print { display: none !important; }
+  .fanui-print-only { display: block !important; }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 交互与光标
+// -----------------------------------------------------------------------------
+
+.fanui-pointer        { cursor: pointer; }
+.fanui-cursor-default { cursor: default; }
+.fanui-cursor-text    { cursor: text; }
+.fanui-cursor-move    { cursor: move; }
+.fanui-cursor-grab    { cursor: grab; }
+.fanui-cursor-help    { cursor: help; }
+.fanui-not-allowed    { cursor: not-allowed; }
+
+.fanui-select-none { user-select: none; -webkit-user-select: none; }
+.fanui-select-all  { user-select: all; }
+.fanui-select-text { user-select: text; }
+
+.fanui-no-pointer-events { pointer-events: none; }
+.fanui-pointer-events    { pointer-events: auto; }
+
+.fanui-resize-none { resize: none; }
+.fanui-resize-y    { resize: vertical; }
+.fanui-resize-both { resize: both; }
+
+.fanui-touch-none  { touch-action: none; }
+.fanui-touch-pan-y { touch-action: pan-y; }

package/src/utilities/_effects.scss

@@ -0,0 +1,210 @@
+// =============================================================================
+// fanUI · 视觉效果工具类 (Effects)
+// -----------------------------------------------------------------------------
+// 阴影 / 透明 / 滤镜 / 背景 / 变换 / 毛玻璃
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 阴影
+// -----------------------------------------------------------------------------
+
+@each $name, $value in v.$fanui-shadows {
+  .fanui-shadow-#{$name} { box-shadow: fn.fanui-var("shadow-#{$name}", $value); }
+}
+
+.fanui-shadow-primary { box-shadow: 0 6px 16px -6px fn.fanui-var("primary-glow"); }
+.fanui-shadow-accent  { box-shadow: 0 6px 16px -6px fn.fanui-var("accent-glow"); }
+.fanui-shadow-focus   { box-shadow: 0 0 0 3px fn.fanui-var("primary-ring"); }
+.fanui-shadow-glow    { box-shadow: 0 0 24px -4px fn.fanui-var("primary-glow"); }
+.fanui-shadow-glow-accent { box-shadow: 0 0 28px -6px fn.fanui-var("accent-glow"); }
+// 玻璃厚度阴影工具类：公式内联，元素级 --fanui-glass-intensity 同样生效
+.fanui-shadow-glass   { @include mx.fanui-glass-depth(); }
+
+.fanui-text-shadow-sm { text-shadow: 0 1px 2px rgba(15, 23, 42, 0.2); }
+.fanui-text-shadow-glass { text-shadow: var(--fanui-glass-text-shadow); }
+
+// -----------------------------------------------------------------------------
+// 2. 背景
+// -----------------------------------------------------------------------------
+// 说明：液态玻璃（.fanui-glass 系列）已迁移到 components/_glass.scss，
+// 那里提供可调强度、厚度预设、镜面高光与开关降级。
+
+.fanui-bg-transparent  { background-color: transparent !important; }
+.fanui-bg-surface      { background-color: fn.fanui-var("color-surface"); }
+.fanui-bg-sunken       { background-color: fn.fanui-var("color-surface-sunken"); }
+.fanui-bg-body         { background-color: fn.fanui-var("color-bg"); }
+.fanui-bg-none         { background-image: none; }
+
+.fanui-bg-gradient-primary {
+  @include mx.fanui-gradient(fn.fanui-var("primary"), fn.fanui-var("accent"), to bottom right);
+  color: fn.fanui-var("color-text-inverse");
+}
+
+.fanui-bg-gradient-sunset {
+  background-image: linear-gradient(135deg, #f59e0b 0%, #ef4444 55%, #8b5cf6 100%);
+}
+
+.fanui-bg-grid {
+  background-image:
+    linear-gradient(fn.fanui-alpha(#64748b, 0.12) 1px, transparent 1px),
+    linear-gradient(90deg, fn.fanui-alpha(#64748b, 0.12) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+
+// 语义背景色（柔和版）
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-bg-#{$name}          { background-color: fn.fanui-var("#{$name}"); color: fn.fanui-var("#{$name}-fg"); }
+  .fanui-bg-#{$name}-soft     { background-color: fn.fanui-var("#{$name}-soft"); }
+}
+
+// -----------------------------------------------------------------------------
+// 2.5 调色板工具类（全色阶）：.fanui-bg-primary-500 / .fanui-text-danger-600 …
+// -----------------------------------------------------------------------------
+
+@each $name, $tones in v.$fanui-palette {
+  @each $tone, $value in $tones {
+    .fanui-bg-#{$name}-#{$tone}      { background-color: fn.fanui-var("#{$name}-#{$tone}", $value); }
+    .fanui-text-#{$name}-#{$tone}    { color: fn.fanui-var("#{$name}-#{$tone}", $value); }
+    .fanui-border-#{$name}-#{$tone}  { border-color: fn.fanui-var("#{$name}-#{$tone}", $value); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 滤镜 / 变换
+// -----------------------------------------------------------------------------
+
+.fanui-blur-sm { filter: blur(4px); }
+.fanui-blur    { filter: blur(8px); }
+.fanui-blur-lg { filter: blur(16px); }
+.fanui-grayscale { filter: grayscale(100%); }
+.fanui-sepia     { filter: sepia(100%); }
+.fanui-invert    { filter: invert(100%); }
+
+.fanui-backdrop-blur-sm { backdrop-filter: blur(4px); }
+.fanui-backdrop-blur    { backdrop-filter: blur(8px); }
+.fanui-backdrop-blur-lg { backdrop-filter: blur(16px); }
+
+.fanui-scale-0  { transform: scale(0); }
+.fanui-scale-90 { transform: scale(0.9); }
+.fanui-scale-95 { transform: scale(0.95); }
+.fanui-scale-100 { transform: scale(1); }
+.fanui-scale-105 { transform: scale(1.05); }
+.fanui-scale-110 { transform: scale(1.1); }
+
+.fanui-rotate-45  { transform: rotate(45deg); }
+.fanui-rotate-90  { transform: rotate(90deg); }
+.fanui-rotate-180 { transform: rotate(180deg); }
+
+.fanui-translate-y-0 { transform: translateY(0); }
+.fanui-translate-y-up { transform: translateY(-2px); }
+
+.fanui-transform-none { transform: none; }
+.fanui-transform-origin-center { transform-origin: center; }
+
+// hover 抬升
+.fanui-hover-lift {
+  @include mx.fanui-transition((transform, box-shadow), v.$fanui-duration-base);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: fn.fanui-var("shadow-lg");
+  }
+}
+
+.fanui-hover-scale {
+  @include mx.fanui-transition(transform, v.$fanui-duration-fast);
+
+  &:hover { transform: scale(1.03); }
+}
+
+.fanui-hover-shadow {
+  @include mx.fanui-transition(box-shadow, v.$fanui-duration-base);
+
+  &:hover { box-shadow: fn.fanui-var("shadow-md"); }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 遮罩层（backdrop）
+// -----------------------------------------------------------------------------
+
+.fanui-backdrop {
+  @include mx.fanui-backdrop();
+  opacity: 0;
+  visibility: hidden;
+  @include mx.fanui-transition((opacity, visibility), v.$fanui-duration-base);
+
+  &.is-open,
+  &.is-active {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 焦点 / 无障碍
+// -----------------------------------------------------------------------------
+
+.fanui-focus-ring {
+  &:focus-visible { @include mx.fanui-focus-ring(); }
+}
+
+.fanui-focus-within {
+  &:focus-within { @include mx.fanui-focus-ring(); }
+}
+
+.fanui-outline-none { outline: none; }
+
+// -----------------------------------------------------------------------------
+// 6. 杂项
+// -----------------------------------------------------------------------------
+
+.fanui-object-cover   { object-fit: cover; }
+.fanui-object-contain { object-fit: contain; }
+.fanui-object-center  { object-position: center; }
+
+.fanui-isolate    { isolation: isolate; }
+.fanui-mix-blend-multiply { mix-blend-mode: multiply; }
+
+.fanui-ring-primary { box-shadow: 0 0 0 3px fn.fanui-var("primary-ring"); }
+
+// -----------------------------------------------------------------------------
+// 7. 入场动画（配合 FanUI.scroll.reveal / IntersectionObserver）
+// -----------------------------------------------------------------------------
+// JS 在 <html> 上写入 data-fanui-reveal-ready，并为进入视口的元素加 .is-visible。
+// 若 JS 未运行，data-fanui-reveal-ready 不存在，元素直接可见 —— 天然的渐进增强。
+
+[data-fanui-reveal-ready] [data-fanui-reveal] {
+  opacity: 0;
+  transform: translateY(18px);
+  transition:
+    opacity v.$fanui-duration-slower v.$fanui-ease-out,
+    transform v.$fanui-duration-slower v.$fanui-ease-out;
+  transition-delay: var(--fanui-reveal-delay, 0ms);
+  will-change: opacity, transform;
+
+  &.is-visible {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+// 变体：从不同方向淡入
+[data-fanui-reveal-ready] [data-fanui-reveal="left"]  { transform: translateX(-24px); }
+[data-fanui-reveal-ready] [data-fanui-reveal="right"] { transform: translateX(24px); }
+[data-fanui-reveal-ready] [data-fanui-reveal="scale"] { transform: scale(0.94); }
+[data-fanui-reveal-ready] [data-fanui-reveal="fade"]  { transform: none; }
+
+[data-fanui-reveal-ready] [data-fanui-reveal].is-visible { transform: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-fanui-reveal-ready] [data-fanui-reveal] {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

package/src/utilities/_sizing.scss

@@ -0,0 +1,123 @@
+// =============================================================================
+// fanUI · 尺寸工具类 (Sizing)
+// =============================================================================
+
+@use "sass:math";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 百分比宽度
+// -----------------------------------------------------------------------------
+
+$fanui-percentages: (
+  0: 0%, 5: 5%, 10: 10%, 15: 15%, 20: 20%, 25: 25%, 30: 30%, 33: 33.3333%,
+  35: 35%, 40: 40%, 45: 45%, 50: 50%, 55: 55%, 60: 60%, 65: 65%,
+  66: 66.6667%, 70: 70%, 75: 75%, 80: 80%, 85: 85%, 90: 90%, 95: 95%, 100: 100%
+) !default;
+
+@each $name, $value in $fanui-percentages {
+  .fanui-w-#{$name} { width: $value; }
+}
+
+.fanui-w-auto   { width: auto; }
+.fanui-w-full   { width: 100%; }
+.fanui-w-screen { width: 100vw; }
+.fanui-w-min    { width: min-content; }
+.fanui-w-max    { width: max-content; }
+.fanui-w-fit    { width: fit-content; }
+.fanui-h-auto   { height: auto; }
+.fanui-h-full   { height: 100%; }
+.fanui-h-screen { height: 100vh; }
+.fanui-h-dvh    { height: 100dvh; }
+.fanui-h-svh    { height: 100svh; }
+
+.fanui-min-w-0    { min-width: 0; }
+.fanui-min-w-full { min-width: 100%; }
+.fanui-max-w-full { max-width: 100%; }
+.fanui-max-w-none { max-width: none; }
+.fanui-min-h-0    { min-height: 0; }
+.fanui-min-h-full { min-height: 100%; }
+.fanui-max-h-full { max-height: 100%; }
+
+// -----------------------------------------------------------------------------
+// 2. 间距标尺尺寸（4px 基准）
+// -----------------------------------------------------------------------------
+
+@each $key, $value in v.$fanui-spacers-utilities {
+  .fanui-w-#{$key} { width: $value; }
+  .fanui-h-#{$key} { height: $value; }
+  .fanui-size-#{$key} { width: $value; height: $value; }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 语义化尺寸
+// -----------------------------------------------------------------------------
+
+.fanui-w-xs  { width: 320px; }
+.fanui-w-sm  { width: 480px; }
+.fanui-w-md  { width: 640px; }
+.fanui-w-lg  { width: 800px; }
+.fanui-w-xl  { width: 1024px; }
+.fanui-w-2xl { width: 1280px; }
+
+.fanui-max-w-xs  { max-width: 320px; }
+.fanui-max-w-sm  { max-width: 480px; }
+.fanui-max-w-md  { max-width: 640px; }
+.fanui-max-w-lg  { max-width: 800px; }
+.fanui-max-w-xl  { max-width: 1024px; }
+.fanui-max-w-2xl { max-width: 1280px; }
+.fanui-max-w-prose { max-width: 72ch; }
+
+// -----------------------------------------------------------------------------
+// 4. 宽高比
+// -----------------------------------------------------------------------------
+
+.fanui-ratio-square  { aspect-ratio: 1 / 1; }
+.fanui-ratio-video   { aspect-ratio: 16 / 9; }
+.fanui-ratio-4-3     { aspect-ratio: 4 / 3; }
+.fanui-ratio-3-2     { aspect-ratio: 3 / 2; }
+.fanui-ratio-21-9    { aspect-ratio: 21 / 9; }
+
+// 媒体比例容器（兼容不支持 aspect-ratio 的场景）
+.fanui-ratio {
+  position: relative;
+  width: 100%;
+
+  &::before {
+    content: "";
+    display: block;
+    padding-top: calc(100% * var(--fanui-ratio-h, 9) / var(--fanui-ratio-w, 16));
+  }
+
+  > * {
+    @include mx.fanui-absolute-fill();
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  &--square { --fanui-ratio-w: 1; --fanui-ratio-h: 1; }
+  &--4-3    { --fanui-ratio-w: 4; --fanui-ratio-h: 3; }
+  &--16-9   { --fanui-ratio-w: 16; --fanui-ratio-h: 9; }
+  &--21-9   { --fanui-ratio-w: 21; --fanui-ratio-h: 9; }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 响应式宽度
+// -----------------------------------------------------------------------------
+
+@each $bp, $min in v.$fanui-breakpoints {
+  @if $bp != "xs" {
+    @include mx.fanui-media($bp, min) {
+      .fanui-w-#{$bp}-full { width: 100%; }
+      .fanui-w-#{$bp}-auto { width: auto; }
+      @each $name, $value in $fanui-percentages {
+        @if $name % 25 == 0 {
+          .fanui-w-#{$bp}-#{$name} { width: $value; }
+        }
+      }
+    }
+  }
+}

package/src/utilities/_spacing.scss

@@ -0,0 +1,118 @@
+// =============================================================================
+// fanUI · 间距工具类 (Spacing)
+// -----------------------------------------------------------------------------
+// 命名：.fanui-{m|p}{t|r|b|l|x|y|""}-<key>[-<bp>]
+//   m = margin,  p = padding
+//   方向：t=上 r=右 b=下 l=左 x=左右 y=上下（缺省=四向）
+//   key 取自 4px 基准间距标尺：0 1 2 3 4 5 6 8 10 12 16 20 24 与 auto
+// 示例：.fanui-mt-4  .fanui-px-6  .fanui-m-md-8  .fanui-mx-auto
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// 方向 -> 属性映射
+// ★ 行内轴一律用 **逻辑属性**（inline-start / inline-end），而不是 left / right。
+//   这样 .fanui-ml-4 在 LTR 下等价于 margin-inline-start:4，在 [dir="rtl"] 下自动变成右侧，
+//   无需任何镜像覆盖层 —— 这也是本项目 RTL 覆盖率从个位数提升到全量的关键。
+//   显式要「物理左/右」时请用 .fanui-text-left / .fanui-text-right。
+$fanui-space-sides: (
+  "":  (margin,),
+  "t": (margin-top,),
+  "r": (margin-inline-end,),
+  "b": (margin-bottom,),
+  "l": (margin-inline-start,),
+  "x": (margin-inline,),
+  "y": (margin-top, margin-bottom),
+) !default;
+
+$fanui-pad-sides: (
+  "":  (padding,),
+  "t": (padding-top,),
+  "r": (padding-inline-end,),
+  "b": (padding-bottom,),
+  "l": (padding-inline-start,),
+  "x": (padding-inline,),
+  "y": (padding-top, padding-bottom),
+) !default;
+
+// -----------------------------------------------------------------------------
+// 1. 无断点：margin / padding
+// -----------------------------------------------------------------------------
+
+@each $key, $value in v.$fanui-spacers-utilities {
+  @each $side, $props in $fanui-space-sides {
+    .fanui-m#{$side}-#{$key} {
+      @each $prop in $props { #{$prop}: $value; }
+    }
+  }
+
+  @each $side, $props in $fanui-pad-sides {
+    .fanui-p#{$side}-#{$key} {
+      @each $prop in $props { #{$prop}: $value; }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. auto 间距（居中对齐等）
+// -----------------------------------------------------------------------------
+
+.fanui-mx-auto  { margin-inline-start: auto; margin-inline-end: auto; }
+.fanui-my-auto  { margin-top: auto; margin-bottom: auto; }
+.fanui-mt-auto  { margin-top: auto; }
+.fanui-mb-auto  { margin-bottom: auto; }
+.fanui-ml-auto  { margin-inline-start: auto; }
+.fanui-mr-auto  { margin-inline-end: auto; }
+.fanui-m-auto   { margin: auto; }
+
+// -----------------------------------------------------------------------------
+// 3. 响应式间距：.fanui-m<side>-<bp>-<key>
+// -----------------------------------------------------------------------------
+
+@each $bp, $min in v.$fanui-breakpoints {
+  @if $bp != "xs" {
+    @include mx.fanui-media($bp, min) {
+      @each $key, $value in v.$fanui-spacers-utilities {
+        @each $side, $props in $fanui-space-sides {
+          .fanui-m#{$side}-#{$bp}-#{$key} {
+            @each $prop in $props { #{$prop}: $value; }
+          }
+        }
+
+        @each $side, $props in $fanui-pad-sides {
+          .fanui-p#{$side}-#{$bp}-#{$key} {
+            @each $prop in $props { #{$prop}: $value; }
+          }
+        }
+      }
+
+      .fanui-mx-#{$bp}-auto { margin-inline: auto; }
+      .fanui-mt-#{$bp}-auto { margin-top: auto; }
+      .fanui-mb-#{$bp}-auto { margin-bottom: auto; }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 语义化间距快捷类
+// -----------------------------------------------------------------------------
+
+.fanui-p-section { padding: fn.fanui-var("space-8"); }
+.fanui-p-card    { padding: fn.fanui-var("space-5"); }
+.fanui-gap-card  { gap: fn.fanui-var("space-4"); }
+
+// 相邻元素自动间距（替代手写 margin）
+.fanui-stack-space > * + * { margin-top: fn.fanui-var("space-4"); }
+.fanui-stack-space-sm > * + * { margin-top: fn.fanui-var("space-2"); }
+.fanui-stack-space-lg > * + * { margin-top: fn.fanui-var("space-6"); }
+
+.fanui-inline-space > * + * { margin-inline-start: fn.fanui-var("space-3"); }
+
+// 首尾元素去边距
+.fanui-trim > :first-child { margin-top: 0; }
+.fanui-trim > :last-child  { margin-bottom: 0; }
+.fanui-trim-v > :first-child { margin-top: 0; }
+.fanui-trim-v > :last-child  { margin-bottom: 0; }