@zhang_jifan/fanui 2.1.0

package/src/components/_overlay.scss

@@ -0,0 +1,517 @@
+// =============================================================================
+// fanUI · 浮层浮出组件：模态框 / 抽屉 / 下拉菜单 / 提示气泡
+// -----------------------------------------------------------------------------
+// .fanui-modal          模态框（backdrop + dialog + content）
+// .fanui-drawer         抽屉 / 侧滑面板
+// .fanui-dropdown       下拉菜单
+// .fanui-tooltip        提示气泡
+// .fanui-popover        浮层卡片
+// 状态统一使用 .is-open / .is-active；显示/隐藏由业务 JS 控制。
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 模态框 Modal
+// -----------------------------------------------------------------------------
+
+.fanui-modal {
+  position: fixed;
+  inset: 0;
+  z-index: fn.fanui-var("z-modal", v.$fanui-zindex-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: fn.fanui-var("space-4");
+  opacity: 0;
+  visibility: hidden;
+  @include mx.fanui-transition((opacity, visibility), v.$fanui-duration-base);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  &.is-open,
+  &.is-active {
+    opacity: 1;
+    visibility: visible;
+
+    > .fanui-modal__dialog { transform: translateY(0) scale(1); }
+  }
+
+  // 遮罩
+  &__backdrop {
+    @include mx.fanui-backdrop();
+    z-index: 0;
+  }
+
+  &__dialog {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: var(--fanui-modal-width, #{map.get(v.$fanui-modal-widths, "base")});
+    max-height: calc(100vh - #{fn.fanui-var("space-8")});
+    margin: auto;
+    background-color: fn.fanui-var("color-surface");
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-xl");
+    box-shadow: fn.fanui-var("shadow-2xl");
+    box-sizing: border-box;
+    transform: translateY(12px) scale(0.98);
+    @include mx.fanui-transition(transform, v.$fanui-duration-slow, v.$fanui-ease-spring);
+    overflow: hidden;
+  }
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-4");
+    padding: fn.fanui-var("space-5") fn.fanui-var("space-5") fn.fanui-var("space-4");
+    flex: 0 0 auto;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-lg");
+    font-weight: 600;
+    line-height: 1.4;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin: 4px 0 0;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin: -4px -6px 0 0;
+    padding: 0;
+    font-size: 16px;
+    line-height: 1;
+    color: fn.fanui-var("color-text-subtle");
+    background: none;
+    border: 0;
+    border-radius: fn.fanui-var("radius-base");
+    cursor: pointer;
+    @include mx.fanui-transition((color, background-color), v.$fanui-duration-fast);
+
+    &:hover { color: fn.fanui-var("color-text"); background-color: fn.fanui-var("color-hover"); }
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    padding: 0 fn.fanui-var("space-5") fn.fanui-var("space-5");
+    overflow-y: auto;
+    min-height: 0;
+    font-size: fn.fanui-var("font-size-base");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text");
+    @include mx.fanui-scrollbar(8px);
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: fn.fanui-var("space-3");
+    padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+    background-color: fn.fanui-var("color-surface-sunken");
+    border-top: 1px solid fn.fanui-var("color-border");
+    flex: 0 0 auto;
+
+    &--start { justify-content: flex-start; }
+    &--between { justify-content: space-between; }
+  }
+
+  // 带分区的 header（有下边框）
+  &__header--bordered {
+    padding-bottom: fn.fanui-var("space-4");
+    border-bottom: 1px solid fn.fanui-var("color-border");
+  }
+
+  // ---- 尺寸 ----
+  &--sm    > .fanui-modal__dialog { --fanui-modal-width: #{map.get(v.$fanui-modal-widths, "sm")}; }
+  &--md    > .fanui-modal__dialog { --fanui-modal-width: #{map.get(v.$fanui-modal-widths, "base")}; }
+  &--lg    > .fanui-modal__dialog { --fanui-modal-width: #{map.get(v.$fanui-modal-widths, "lg")}; }
+  &--xl    > .fanui-modal__dialog { --fanui-modal-width: #{map.get(v.$fanui-modal-widths, "xl")}; }
+  &--full  > .fanui-modal__dialog {
+    --fanui-modal-width: #{map.get(v.$fanui-modal-widths, "full")};
+    max-height: 100vh;
+    height: 100%;
+    border-radius: 0;
+    border: 0;
+  }
+
+  // ---- 位置 ----
+  &--top    { align-items: flex-start; padding-top: fn.fanui-var("space-16"); }
+  &--bottom { align-items: flex-end; }
+
+  // ---- 无边框对话框 ----
+  &--plain > .fanui-modal__dialog {
+    border: 0;
+    box-shadow: fn.fanui-var("shadow-2xl");
+  }
+
+  &--scrollable > .fanui-modal__dialog { overflow: hidden; }
+}
+
+// 打开模态时锁定滚动
+.fanui-modal-open {
+  overflow: hidden;
+}
+
+// -----------------------------------------------------------------------------
+// 2. 抽屉 Drawer / Offcanvas
+// -----------------------------------------------------------------------------
+
+.fanui-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: fn.fanui-var("z-offcanvas", v.$fanui-zindex-offcanvas);
+  visibility: hidden;
+  @include mx.fanui-transition(visibility, v.$fanui-duration-base);
+
+  &.is-open,
+  &.is-active { visibility: visible; }
+
+  &__backdrop {
+    @include mx.fanui-backdrop();
+    opacity: 0;
+    @include mx.fanui-transition(opacity, v.$fanui-duration-base);
+  }
+
+  &.is-open > .fanui-drawer__backdrop { opacity: 1; }
+
+  &__panel {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    width: var(--fanui-drawer-width, 360px);
+    max-width: 92vw;
+    background-color: fn.fanui-var("color-surface");
+    box-shadow: fn.fanui-var("shadow-2xl");
+    box-sizing: border-box;
+    @include mx.fanui-transition(transform, v.$fanui-duration-slow, v.$fanui-ease-out);
+    z-index: 1;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+    border-bottom: 1px solid fn.fanui-var("color-border");
+    flex: 0 0 auto;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    padding: fn.fanui-var("space-5");
+    overflow-y: auto;
+    min-height: 0;
+    @include mx.fanui-scrollbar(8px);
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: fn.fanui-var("space-3");
+    padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+    border-top: 1px solid fn.fanui-var("color-border");
+    flex: 0 0 auto;
+  }
+
+  // 方向
+  &--start &__panel {
+    left: 0;
+    right: auto;
+    transform: translateX(-100%);
+  }
+
+  &--end &__panel {
+    right: 0;
+    left: auto;
+    transform: translateX(100%);
+  }
+
+  &--top &__panel {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: auto;
+    width: 100%;
+    max-width: none;
+    height: var(--fanui-drawer-height, 320px);
+    transform: translateY(-100%);
+    border-radius: 0 0 fn.fanui-var("radius-xl") fn.fanui-var("radius-xl");
+  }
+
+  &--bottom &__panel {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: auto;
+    width: 100%;
+    max-width: none;
+    height: var(--fanui-drawer-height, auto);
+    max-height: 88vh;
+    transform: translateY(100%);
+    border-radius: fn.fanui-var("radius-xl") fn.fanui-var("radius-xl") 0 0;
+  }
+
+  &.is-open > .fanui-drawer__panel { transform: translate(0, 0); }
+
+  // 尺寸
+  &--sm > .fanui-drawer__panel  { --fanui-drawer-width: 280px; }
+  &--lg > .fanui-drawer__panel  { --fanui-drawer-width: 480px; }
+  &--xl > .fanui-drawer__panel  { --fanui-drawer-width: 640px; }
+  &--full > .fanui-drawer__panel { --fanui-drawer-width: 100%; max-width: none; }
+
+  // 底部抽屉的抓手
+  &__grabber {
+    width: 36px;
+    height: 4px;
+    margin: fn.fanui-var("space-2") auto 0;
+    border-radius: 9999px;
+    background-color: fn.fanui-var("color-border-strong");
+    flex: 0 0 auto;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 下拉菜单 Dropdown
+// -----------------------------------------------------------------------------
+
+.fanui-dropdown {
+  position: relative;
+  display: inline-flex;
+
+  &__menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    z-index: fn.fanui-var("z-dropdown", v.$fanui-zindex-dropdown);
+    min-width: var(--fanui-dropdown-width, 180px);
+    max-width: 320px;
+    padding: 6px;
+    background-color: fn.fanui-var("color-surface");
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-md");
+    box-shadow: fn.fanui-var("shadow-lg");
+    box-sizing: border-box;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px) scale(0.98);
+    transform-origin: top left;
+    @include mx.fanui-transition((opacity, visibility, transform), v.$fanui-duration-fast, v.$fanui-ease-out);
+
+    &.is-open,
+    &.is-active {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0) scale(1);
+    }
+
+    // 对齐
+    &--end   { left: auto; right: 0; transform-origin: top right; }
+    &--start { left: 0; right: auto; }
+
+    // 向上弹出
+    &--up {
+      top: auto;
+      bottom: calc(100% + 6px);
+      transform-origin: bottom left;
+      transform: translateY(4px) scale(0.98);
+
+      // 上 + 右对齐
+      &.fanui-dropdown__menu--end { transform-origin: bottom right; }
+    }
+
+    // 无内边距（放置自定义内容）
+    &--flush { padding: 0; }
+  }
+
+  // 打开状态时给触发器加点样式
+  &.is-open > .fanui-dropdown__trigger,
+  &__trigger[aria-expanded="true"] { color: fn.fanui-var("color-text-strong"); }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 提示气泡 Tooltip
+// -----------------------------------------------------------------------------
+
+.fanui-tooltip {
+  position: relative;
+  display: inline-flex;
+
+  &__bubble {
+    position: absolute;
+    z-index: fn.fanui-var("z-tooltip", v.$fanui-zindex-tooltip);
+    max-width: 260px;
+    padding: 6px 10px;
+    font-size: fn.fanui-var("font-size-xs");
+    line-height: 1.5;
+    white-space: normal;
+    text-align: center;
+    color: fn.fanui-var("color-surface");
+    background-color: fn.fanui-var("color-text-strong");
+    border-radius: fn.fanui-var("radius-base");
+    box-shadow: fn.fanui-var("shadow-md");
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    @include mx.fanui-transition((opacity, visibility, transform), v.$fanui-duration-fast);
+
+    // 箭头
+    &::after {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      background-color: inherit;
+      transform: rotate(45deg);
+    }
+
+    // 默认：上方
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+
+    &::after { top: 100%; left: 50%; margin: -3px 0 0 -3px; }
+  }
+
+  &:hover > .fanui-tooltip__bubble,
+  &:focus-within > .fanui-tooltip__bubble,
+  > .fanui-tooltip__bubble.is-open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  // 各方位展开后的最终位置
+  &:hover > .fanui-tooltip__bubble { transform: translateX(-50%) translateY(0); }
+
+  &--bottom:hover > .fanui-tooltip__bubble,
+  &--bottom:focus-within > .fanui-tooltip__bubble { transform: translateX(-50%) translateY(0); }
+
+  &--right:hover > .fanui-tooltip__bubble,
+  &--right:focus-within > .fanui-tooltip__bubble,
+  &--left:hover > .fanui-tooltip__bubble,
+  &--left:focus-within > .fanui-tooltip__bubble { transform: translateY(-50%) translateX(0); }
+
+  // 方位
+  &--bottom > .fanui-tooltip__bubble {
+    bottom: auto;
+    top: calc(100% + 8px);
+    transform: translateX(-50%) translateY(-4px);
+
+    &::after { top: auto; bottom: 100%; margin: 0 0 -3px -3px; }
+  }
+
+  &--right > .fanui-tooltip__bubble {
+    bottom: auto;
+    top: 50%;
+    left: calc(100% + 8px);
+    transform: translateY(-50%) translateX(-4px);
+
+    &::after { top: 50%; left: 0; margin: -3px 0 0 -3px; }
+  }
+
+  &--left > .fanui-tooltip__bubble {
+    bottom: auto;
+    top: 50%;
+    left: auto;
+    right: calc(100% + 8px);
+    transform: translateY(-50%) translateX(4px);
+
+    &::after { top: 50%; left: 100%; margin: -3px 0 0 -3px; }
+  }
+
+  &--light > .fanui-tooltip__bubble {
+    color: fn.fanui-var("color-text");
+    background-color: fn.fanui-var("color-surface");
+    border: 1px solid fn.fanui-var("color-border-strong");
+  }
+
+  &--primary > .fanui-tooltip__bubble { background-color: fn.fanui-var("primary"); color: fn.fanui-var("primary-fg"); }
+  &--danger  > .fanui-tooltip__bubble { background-color: fn.fanui-var("danger");  color: fn.fanui-var("danger-fg"); }
+  &--success > .fanui-tooltip__bubble { background-color: fn.fanui-var("success"); color: fn.fanui-var("success-fg"); }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 浮层卡片 Popover
+// -----------------------------------------------------------------------------
+
+.fanui-popover {
+  position: relative;
+  display: inline-flex;
+
+  &__panel {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    z-index: fn.fanui-var("z-popover", v.$fanui-zindex-popover);
+    width: var(--fanui-popover-width, 280px);
+    background-color: fn.fanui-var("color-surface");
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-md");
+    box-shadow: fn.fanui-var("shadow-xl");
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    @include mx.fanui-transition((opacity, visibility, transform), v.$fanui-duration-fast, v.$fanui-ease-out);
+
+    &.is-open,
+    &.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
+
+    &--end { left: auto; right: 0; }
+    &--center { left: 50%; transform: translateX(-50%) translateY(-4px); }
+    &--center.is-open { transform: translateX(-50%) translateY(0); }
+    &--wide { --fanui-popover-width: 420px; }
+  }
+
+  &__header {
+    padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+    border-bottom: 1px solid fn.fanui-var("color-border-subtle");
+  }
+
+  &__body {
+    padding: fn.fanui-var("space-4");
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: 1.6;
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__footer {
+    padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+    border-top: 1px solid fn.fanui-var("color-border-subtle");
+    display: flex;
+    justify-content: flex-end;
+    gap: fn.fanui-var("space-2");
+  }
+}