@zhang_jifan/fanui 2.1.0

package/src/components/_alert.scss

@@ -0,0 +1,322 @@
+// =============================================================================
+// fanUI · 警告框 Alert / 提示 Message
+// -----------------------------------------------------------------------------
+// .fanui-alert                        基础警告框（默认 info 风格）
+// .fanui-alert--<semantic>            语义色：primary/accent/success/warning/danger/info
+// .fanui-alert--solid                 实心底色
+// .fanui-alert--outline               描边风格
+// .fanui-alert__icon / __title / __desc / __close / __actions
+// .fanui-alert--dismissible           可关闭
+// .fanui-alert--banner                顶部横幅
+// .fanui-alert.is-hidden              隐藏
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+.fanui-alert {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+  font-size: fn.fanui-var("font-size-base");
+  line-height: 1.6;
+  color: fn.fanui-var("color-text");
+  background-color: fn.fanui-var("color-surface-sunken");
+  border: 1px solid fn.fanui-var("color-border");
+  border-inline-start: 3px solid fn.fanui-var("color-text-subtle");
+  border-radius: fn.fanui-var("radius-md");
+  box-sizing: border-box;
+  @include mx.fanui-transition((opacity, transform), v.$fanui-duration-base);
+
+  &.is-hidden,
+  &[hidden] {
+    display: none;
+  }
+
+  &__icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    margin-top: 1px;
+    font-size: 16px;
+    line-height: 1;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__title {
+    margin: 0 0 2px;
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 600;
+    line-height: 1.5;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-base");
+    color: fn.fanui-var("color-text-muted");
+    word-break: break-word;
+  }
+
+  &__actions {
+    margin-top: fn.fanui-var("space-3");
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+  }
+
+  &__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin: -2px -4px 0 0;
+    padding: 0;
+    font-size: 14px;
+    line-height: 1;
+    color: inherit;
+    opacity: 0.6;
+    background: none;
+    border: 0;
+    border-radius: fn.fanui-var("radius-sm");
+    cursor: pointer;
+    @include mx.fanui-transition((opacity, background-color), v.$fanui-duration-fast);
+
+    &:hover {
+      opacity: 1;
+      background-color: fn.fanui-alpha(#0f172a, 0.08);
+    }
+
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+  }
+
+  // 内嵌列表
+  ul, ol {
+    margin: fn.fanui-var("space-2") 0 0;
+    padding-inline-start: 1.25em;
+    color: fn.fanui-var("color-text-muted");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 1. 语义变体（柔和 / solid / outline）
+// -----------------------------------------------------------------------------
+
+@each $name, $color in v.$fanui-theme-colors {
+  // 柔和（默认）
+  .fanui-alert--#{$name} {
+    background-color: #{fn.fanui-var("#{$name}-soft", fn.fanui-alpha($color, 0.10))};
+    border-color: #{fn.fanui-var("#{$name}-border", fn.fanui-alpha($color, 0.28))};
+    border-left-color: #{fn.fanui-var("#{$name}", $color)};
+
+    .fanui-alert__icon { color: #{fn.fanui-var("#{$name}", $color)}; }
+    .fanui-alert__title { color: #{fn.fanui-shade($color, 26%)}; }
+    .fanui-alert__desc { color: #{fn.fanui-shade($color, 12%)}; }
+
+    [data-fanui-theme="dark"] & {
+      background-color: #{fn.fanui-alpha($color, 0.16)};
+      border-color: #{fn.fanui-alpha($color, 0.34)};
+
+      // C1：暗色下不能再从「浅色基准色」推导文字（tint 只会得到一档中间色，
+      // 落在半透明语义底上约 3.9 ~ 4.5:1，正文级不达标）。
+      // 改为读取暗色令牌：-ink 是暗色下最亮的一档，--#{$name} 是 400 阶。
+      .fanui-alert__title { color: #{fn.fanui-var("#{$name}-ink", fn.fanui-tint($color, 32%))}; }
+      .fanui-alert__desc { color: #{fn.fanui-var("#{$name}", fn.fanui-tint($color, 12%))}; }
+    }
+  }
+
+  // 实心
+  .fanui-alert--solid.fanui-alert--#{$name} {
+    background-color: #{fn.fanui-var("#{$name}", $color)};
+    border-color: #{fn.fanui-var("#{$name}", $color)};
+    border-left-color: #{fn.fanui-shade($color, 25%)};
+    // C1：前景色必须跟随运行时令牌。暗色下 --#{$name} 是 400 阶（浅色底），
+    // 若沿用构建期按浅色基准算出的「白字」，对比度只剩 2.7:1。
+    color: #{fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color))};
+
+    .fanui-alert__title,
+    .fanui-alert__desc,
+    .fanui-alert__icon { color: inherit; }
+    .fanui-alert__desc { opacity: 0.88; }
+  }
+
+  // 描边
+  .fanui-alert--outline.fanui-alert--#{$name} {
+    background-color: transparent;
+    border-color: #{fn.fanui-alpha($color, 0.45)};
+    border-left-color: #{fn.fanui-var("#{$name}", $color)};
+
+    .fanui-alert__icon { color: #{fn.fanui-var("#{$name}", $color)}; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 尺寸与布局
+// -----------------------------------------------------------------------------
+
+.fanui-alert--sm {
+  padding: fn.fanui-var("space-2") fn.fanui-var("space-3");
+  font-size: fn.fanui-var("font-size-sm");
+
+  .fanui-alert__icon { width: 16px; height: 16px; font-size: 14px; }
+}
+
+.fanui-alert--lg {
+  padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+
+  .fanui-alert__title { font-size: fn.fanui-var("font-size-md"); }
+}
+
+.fanui-alert--center {
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+
+  .fanui-alert__icon { margin-top: 0; }
+}
+
+.fanui-alert--flat {
+  border-radius: 0;
+  border-inline-start-width: 0;
+  border-top-width: 0;
+  border-inline-end-width: 0;
+}
+
+.fanui-alert--bordered-all {
+  border-inline-start-width: 1px;
+}
+
+// -----------------------------------------------------------------------------
+// 3. 横幅 / 内联提示
+// -----------------------------------------------------------------------------
+
+.fanui-alert--banner {
+  border-radius: 0;
+  border-width: 0 0 1px 0;
+  border-inline-start-width: 0;
+  padding: fn.fanui-var("space-3") fn.fanui-var("container-px", 16px);
+  justify-content: center;
+
+  .fanui-alert__content {
+    flex: 0 1 auto;
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    flex-wrap: wrap;
+  }
+}
+
+// 行内提示（表单旁）
+.fanui-alert--inline {
+  display: inline-flex;
+  padding: 4px 10px;
+  font-size: fn.fanui-var("font-size-sm");
+  border-radius: fn.fanui-var("radius-full");
+  border-inline-start-width: 1px;
+}
+
+// -----------------------------------------------------------------------------
+// 4. Toast / 轻提示（可独立使用）
+// -----------------------------------------------------------------------------
+
+.fanui-toast-region {
+  position: fixed;
+  top: fn.fanui-var("space-5");
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: fn.fanui-var("z-toast", v.$fanui-zindex-toast);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  pointer-events: none;
+  max-width: min(92vw, 480px);
+
+  &--top-right {
+    left: auto;
+    right: fn.fanui-var("space-5");
+    transform: none;
+    align-items: flex-end;
+  }
+
+  &--top-left {
+    left: fn.fanui-var("space-5");
+    transform: none;
+    align-items: flex-start;
+  }
+
+  &--bottom {
+    top: auto;
+    bottom: fn.fanui-var("space-5");
+  }
+
+  &--bottom-right {
+    top: auto;
+    bottom: fn.fanui-var("space-5");
+    left: auto;
+    right: fn.fanui-var("space-5");
+    transform: none;
+    align-items: flex-end;
+  }
+}
+
+.fanui-toast {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+  min-width: 220px;
+  // 提示默认「不拦截指针事件」。
+  // 原因：提示区常固定在右上/右下，与页面控件（如主题切换按钮）几何重叠；
+  // 一旦捕获指针，底下控件在提示存续期间完全点不到（实测复现：page.click 30s 超时）。
+  // 只有确实包含可交互内容（操作按钮 / 链接）的提示才用 --interactive 恢复命中。
+  pointer-events: none;
+  font-size: fn.fanui-var("font-size-base");
+  color: fn.fanui-var("color-text");
+  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");
+  animation: fanui-toast-in v.$fanui-duration-base v.$fanui-ease-out both;
+
+  &--interactive { pointer-events: auto; }
+
+  &__icon { flex: 0 0 auto; display: flex; font-size: 16px; }
+  &__content { flex: 1 1 auto; min-width: 0; }
+  &__title { font-weight: 600; color: fn.fanui-var("color-text-strong"); }
+  &__desc { font-size: fn.fanui-var("font-size-sm"); color: fn.fanui-var("color-text-muted"); }
+  &__actions { display: flex; gap: fn.fanui-var("space-2"); margin-inline-start: fn.fanui-var("space-2"); flex: 0 0 auto; }
+
+  &.is-leaving {
+    animation: fanui-fade-out v.$fanui-duration-base v.$fanui-ease-in both;
+  }
+
+  @each $name, $color in v.$fanui-theme-colors {
+    &--#{$name} {
+      border-inline-start: 3px solid #{fn.fanui-var("#{$name}", $color)};
+      .fanui-toast__icon { color: #{fn.fanui-var("#{$name}", $color)}; }
+    }
+  }
+
+  &--solid {
+    background-color: fn.fanui-var("color-text-strong");
+    color: fn.fanui-var("color-surface");
+    border-color: transparent;
+
+    .fanui-toast__title { color: inherit; }
+    .fanui-toast__desc { color: rgba(255, 255, 255, 0.72); }
+  }
+}

package/src/components/_badge.scss

@@ -0,0 +1,279 @@
+// =============================================================================
+// fanUI · 徽标 Badge / 标签 Tag / 圆点 Dot
+// -----------------------------------------------------------------------------
+// .fanui-badge           徽标（实心）
+// .fanui-badge--soft     柔和背景
+// .fanui-badge--outline  描边
+// .fanui-badge--dot      状态点
+// .fanui-badge--pill     胶囊
+// .fanui-badge--xs|sm|md|lg
+// .fanui-tag             可关闭标签
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 基础徽标
+// -----------------------------------------------------------------------------
+
+.fanui-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 20px;
+  padding: 0 8px;
+  font-size: fn.fanui-var("font-size-xs");
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: fn.fanui-var("color-text-inverse");
+  background-color: fn.fanui-var("color-text-muted");
+  border: 1px solid transparent;
+  border-radius: fn.fanui-var("radius-sm");
+  box-sizing: border-box;
+
+  // 计数徽标（更大圆角）
+  &--pill { border-radius: 9999px; padding: 0 8px; }
+  &--square { border-radius: fn.fanui-var("radius-sm"); }
+  &--circle {
+    width: 20px;
+    padding: 0;
+    border-radius: 50%;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // 尺寸
+  &--xs { height: 16px; padding: 0 6px; font-size: 10px; }
+  &--sm { height: 18px; padding: 0 7px; font-size: 11px; }
+  &--md { height: 22px; padding: 0 9px; font-size: fn.fanui-var("font-size-xs"); }
+  &--lg { height: 26px; padding: 0 11px; font-size: fn.fanui-var("font-size-sm"); }
+
+  // 后缀/前缀元素
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: currentColor;
+    flex: 0 0 auto;
+  }
+
+  // 数值
+  &__count { font-variant-numeric: tabular-nums; }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 语义色变体
+// -----------------------------------------------------------------------------
+
+@each $name, $color in v.$fanui-theme-colors {
+  // 实心
+  .fanui-badge--#{$name} {
+    @include mx.fanui-badge-variant(fn.fanui-var("#{$name}", $color), fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color)));
+  }
+
+  // 柔和
+  .fanui-badge--soft.fanui-badge--#{$name} {
+    background-color: fn.fanui-var("#{$name}-soft");
+    color: fn.fanui-var("#{$name}");
+    border-color: fn.fanui-var("#{$name}-border");
+
+    [data-fanui-theme="dark"] & {
+      // C1：暗色下改读 -ink（该模式下最亮的一档）。
+      // 早期用 tint(浅色基准色, 30%) 会得到中间色（如 primary 的 #569eb1），
+      // 在本就带语义色调的半透明底上只有 4.24:1；叠在选中行上更低到 3.0:1。
+      color: fn.fanui-var("#{$name}-ink", fn.fanui-tint($color, 30%));
+    }
+  }
+
+  // 描边
+  .fanui-badge--outline.fanui-badge--#{$name} {
+    background-color: transparent;
+    color: fn.fanui-var("#{$name}");
+    border-color: fn.fanui-var("#{$name}");
+  }
+
+  // 全部圆点
+  .fanui-badge--dot.fanui-badge--#{$name} {
+    background-color: fn.fanui-var("#{$name}");
+  }
+}
+
+// 中性
+.fanui-badge--neutral,
+.fanui-badge--gray {
+  @include mx.fanui-badge-variant(fn.fanui-var("color-text-muted"), fn.fanui-var("color-text-inverse"));
+}
+.fanui-badge--soft.fanui-badge--neutral,
+.fanui-badge--soft.fanui-badge--gray {
+  background-color: fn.fanui-var("color-surface-sunken");
+  color: fn.fanui-var("color-text-muted");
+  border-color: fn.fanui-var("color-border");
+}
+
+// -----------------------------------------------------------------------------
+// 3. 状态点
+// -----------------------------------------------------------------------------
+
+.fanui-badge--dot {
+  width: 8px;
+  height: 8px;
+  min-width: 8px;
+  padding: 0;
+  border-radius: 50%;
+  background-color: fn.fanui-var("color-text-muted");
+  border: 0;
+
+  &.fanui-badge--lg { width: 10px; height: 10px; min-width: 10px; }
+  &.fanui-badge--sm { width: 6px; height: 6px; min-width: 6px; }
+
+  // 呼吸效果
+  &--pulse {
+    position: relative;
+
+    &::after {
+      content: "";
+      @include mx.fanui-absolute-fill();
+      border-radius: 50%;
+      background-color: inherit;
+      animation: fanui-pulse 1.8s v.$fanui-ease-in-out infinite;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 角标（叠加在头像/图标上）
+// -----------------------------------------------------------------------------
+
+.fanui-badge-sup {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: 1;
+  transform-origin: 100% 0;
+
+  &--dot {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    border-radius: 50%;
+    transform: translate(35%, -35%);
+  }
+
+  &--bordered {
+    border: 2px solid fn.fanui-var("color-surface");
+  }
+}
+
+.fanui-badge-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+// -----------------------------------------------------------------------------
+// 5. 标签 Tag（可关闭）
+// -----------------------------------------------------------------------------
+
+.fanui-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 8px;
+  font-size: fn.fanui-var("font-size-sm");
+  line-height: 1;
+  color: fn.fanui-var("color-text");
+  background-color: fn.fanui-var("color-surface-sunken");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-base");
+  box-sizing: border-box;
+  white-space: nowrap;
+  @include mx.fanui-transition((background-color, border-color, color), v.$fanui-duration-fast);
+
+  &--pill { border-radius: 9999px; }
+  &--solid {
+    background-color: fn.fanui-var("color-text");
+    color: fn.fanui-var("color-surface");
+    border-color: transparent;
+  }
+  &--outline { background-color: transparent; }
+
+  &__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin-inline-end: -2px;
+    padding: 0;
+    font-size: 12px;
+    line-height: 1;
+    color: fn.fanui-var("color-text-subtle");
+    background: none;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    @include mx.fanui-transition((background-color, color), v.$fanui-duration-fast);
+
+    &:hover {
+      color: fn.fanui-var("color-text-strong");
+      background-color: fn.fanui-alpha(#0f172a, 0.12);
+    }
+  }
+
+  &--interactive {
+    cursor: pointer;
+
+    &:hover { border-color: fn.fanui-var("color-border-strong"); background-color: fn.fanui-var("color-hover"); }
+  }
+
+  &--selected {
+    background-color: fn.fanui-var("primary-soft");
+    border-color: fn.fanui-var("primary");
+    color: fn.fanui-var("primary");
+  }
+}
+
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-tag--#{$name} {
+    background-color: fn.fanui-var("#{$name}-soft");
+    border-color: fn.fanui-var("#{$name}-border");
+    color: fn.fanui-var("#{$name}");
+  }
+}
+
+.fanui-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: fn.fanui-var("space-2");
+}
+
+// -----------------------------------------------------------------------------
+// 6. 状态徽标组合（点 + 文案）
+// -----------------------------------------------------------------------------
+
+.fanui-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: fn.fanui-var("font-size-sm");
+  color: fn.fanui-var("color-text-muted");
+
+  &__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: fn.fanui-var("color-text-muted");
+    flex: 0 0 auto;
+  }
+
+  &--online  { color: fn.fanui-var("success"); .fanui-status__dot { background-color: fn.fanui-var("success"); } }
+  &--offline { color: fn.fanui-var("color-text-subtle"); .fanui-status__dot { background-color: fn.fanui-var("color-text-subtle"); } }
+  &--busy    { color: fn.fanui-var("danger");  .fanui-status__dot { background-color: fn.fanui-var("danger"); } }
+  &--away    { color: fn.fanui-var("warning"); .fanui-status__dot { background-color: fn.fanui-var("warning"); } }
+}