@zhang_jifan/fanui 2.1.0

package/src/components/_feedback.scss

@@ -0,0 +1,403 @@
+// =============================================================================
+// fanUI · 反馈类组件：进度条 / 加载 / 骨架屏 / 空状态
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 进度条 Progress
+// -----------------------------------------------------------------------------
+
+.fanui-progress {
+  --fanui-progress-h: 8px;
+  --fanui-progress-radius: var(--fanui-radius-full);
+  --fanui-progress-track: #{fn.fanui-var("color-surface-sunken")};
+  --fanui-progress-bar: #{fn.fanui-var("primary")};
+
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: var(--fanui-progress-h);
+  overflow: hidden;
+  background-color: var(--fanui-progress-track);
+  border-radius: var(--fanui-progress-radius);
+  box-sizing: border-box;
+
+  &__bar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 0;
+    height: 100%;
+    background-color: var(--fanui-progress-bar);
+    border-radius: inherit;
+    @include mx.fanui-transition(width, v.$fanui-duration-slow, v.$fanui-ease-out);
+  }
+
+  &__label {
+    padding: 0 6px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 1;
+    color: fn.fanui-var("color-text-inverse");
+    white-space: nowrap;
+  }
+
+  // 尺寸
+  &--xs { --fanui-progress-h: 3px; }
+  &--sm { --fanui-progress-h: 5px; }
+  &--lg { --fanui-progress-h: 12px; }
+  &--xl { --fanui-progress-h: 18px; }
+
+  // 条纹 / 动画
+  &--striped .fanui-progress__bar {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.2) 25%, transparent 25%,
+      transparent 50%, rgba(255, 255, 255, 0.2) 50%,
+      rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent
+    );
+    background-size: 1rem 1rem;
+  }
+
+  &--animated .fanui-progress__bar {
+    animation: fanui-progress-stripes 1s linear infinite;
+  }
+
+  // 不确定进度
+  &--indeterminate .fanui-progress__bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 35%;
+    animation: fanui-progress-indeterminate 1.6s v.$fanui-ease-in-out infinite;
+  }
+
+  // 语义色
+  @each $name, $color in v.$fanui-theme-colors {
+    &--#{$name} { --fanui-progress-bar: #{fn.fanui-var("#{$name}", $color)}; }
+  }
+
+  &--neutral { --fanui-progress-bar: #{fn.fanui-var("color-text-muted")}; }
+}
+
+// 带文字的进度行
+.fanui-progress-line {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+
+  .fanui-progress { flex: 1 1 auto; }
+
+  &__text {
+    flex: 0 0 auto;
+    min-width: 40px;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+// 环形进度（基于 conic-gradient）
+.fanui-progress-ring {
+  --fanui-ring-size: 56px;
+  --fanui-ring-width: 6px;
+  --fanui-ring-value: 0;
+  --fanui-ring-color: #{fn.fanui-var("primary")};
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fanui-ring-size);
+  height: var(--fanui-ring-size);
+  border-radius: 50%;
+  background: conic-gradient(
+    var(--fanui-ring-color) calc(var(--fanui-ring-value) * 1%),
+    fn.fanui-var("color-surface-sunken") 0
+  );
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: var(--fanui-ring-width);
+    border-radius: 50%;
+    background-color: fn.fanui-var("color-surface");
+  }
+
+  &__text {
+    position: relative;
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+    font-variant-numeric: tabular-nums;
+  }
+
+  &--sm { --fanui-ring-size: 40px; --fanui-ring-width: 4px; }
+  &--lg { --fanui-ring-size: 80px; --fanui-ring-width: 8px; }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 加载指示器 Spinner / Loading
+// -----------------------------------------------------------------------------
+
+.fanui-spinner {
+  --fanui-spinner-size: 20px;
+  --fanui-spinner-width: 2px;
+  --fanui-spinner-color: currentColor;
+
+  display: inline-block;
+  width: var(--fanui-spinner-size);
+  height: var(--fanui-spinner-size);
+  border: var(--fanui-spinner-width) solid fn.fanui-alpha(#64748b, 0.25);
+  border-top-color: var(--fanui-spinner-color);
+  border-radius: 50%;
+  animation: fanui-spin 720ms linear infinite;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+
+  @each $name, $color in v.$fanui-theme-colors {
+    &--#{$name} { --fanui-spinner-color: #{fn.fanui-var("#{$name}", $color)}; }
+  }
+
+  &--xs { --fanui-spinner-size: 12px; --fanui-spinner-width: 2px; }
+  &--sm { --fanui-spinner-size: 16px; --fanui-spinner-width: 2px; }
+  &--lg { --fanui-spinner-size: 28px; --fanui-spinner-width: 3px; }
+  &--xl { --fanui-spinner-size: 40px; --fanui-spinner-width: 4px; }
+
+  // 点状加载
+  &--dots {
+    width: auto;
+    height: auto;
+    border: 0;
+    animation: none;
+    display: inline-flex;
+    gap: 5px;
+
+    &::before,
+    &::after,
+    > i {
+      content: "";
+      display: block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background-color: var(--fanui-spinner-color);
+      animation: fanui-bounce 1.2s v.$fanui-ease-in-out infinite;
+    }
+
+    &::after { animation-delay: 0.15s; }
+    > i { animation-delay: 0.3s; }
+  }
+
+  // 三段脉冲
+  &--pulse {
+    border: 0;
+    animation: fanui-pulse 1.4s v.$fanui-ease-in-out infinite;
+    background-color: var(--fanui-spinner-color);
+    border-radius: 50%;
+  }
+}
+
+// 加载遮罩（局部区域）
+.fanui-loading {
+  position: relative;
+
+  &__mask {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: fn.fanui-var("space-3");
+    color: fn.fanui-var("color-text-muted");
+    font-size: fn.fanui-var("font-size-sm");
+    background-color: fn.fanui-alpha(#ffffff, 0.72);
+    backdrop-filter: blur(1px);
+    border-radius: inherit;
+
+    :root[data-fanui-theme="dark"] & { background-color: fn.fanui-alpha(#020617, 0.62); }
+  }
+
+  &.is-loading { pointer-events: none; }
+}
+
+// 骨架屏
+.fanui-skeleton {
+  --fanui-skeleton-bg: #{fn.fanui-var("color-surface-sunken")};
+  --fanui-skeleton-shine: #{fn.fanui-alpha(#ffffff, 0.55)};
+
+  display: block;
+  width: 100%;
+  height: 1em;
+  border-radius: fn.fanui-var("radius-base");
+  background-color: var(--fanui-skeleton-bg);
+  background-image: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--fanui-skeleton-shine) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: fanui-skeleton-shimmer 1.6s ease-in-out infinite;
+
+  :root[data-fanui-theme="dark"] & { --fanui-skeleton-shine: #{fn.fanui-alpha(#ffffff, 0.08)}; }
+
+  &--text   { height: 1em; border-radius: fn.fanui-var("radius-sm"); }
+  &--title  { height: 1.4em; width: 40%; border-radius: fn.fanui-var("radius-sm"); }
+  &--circle { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
+  &--rect   { height: 120px; border-radius: fn.fanui-var("radius-md"); }
+  &--button { height: 32px; width: 88px; border-radius: fn.fanui-var("radius-base"); }
+
+  &--w-25 { width: 25%; }
+  &--w-50 { width: 50%; }
+  &--w-75 { width: 75%; }
+  &--w-100 { width: 100%; }
+
+  &--no-anim { animation: none; background-image: none; }
+}
+
+.fanui-skeleton-group {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-2");
+}
+
+.fanui-skeleton-media {
+  display: flex;
+  gap: fn.fanui-var("space-3");
+  align-items: flex-start;
+}
+
+// -----------------------------------------------------------------------------
+// 3. 空状态 Empty
+// -----------------------------------------------------------------------------
+
+.fanui-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-12") fn.fanui-var("space-5");
+  text-align: center;
+  color: fn.fanui-var("color-text-muted");
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin-bottom: fn.fanui-var("space-1");
+    font-size: 28px;
+    color: fn.fanui-var("color-text-subtle");
+    background-color: fn.fanui-var("color-surface-sunken");
+    border-radius: 50%;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin: 0;
+    max-width: 380px;
+    font-size: fn.fanui-var("font-size-base");
+    line-height: 1.6;
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-3");
+    margin-top: fn.fanui-var("space-2");
+  }
+
+  &--sm { padding: fn.fanui-var("space-6") fn.fanui-var("space-4"); }
+  &--inline { flex-direction: row; justify-content: flex-start; text-align: start; padding: fn.fanui-var("space-4"); }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 结果页 Result
+// -----------------------------------------------------------------------------
+
+.fanui-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-12") fn.fanui-var("space-5");
+  text-align: center;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    font-size: 26px;
+    border-radius: 50%;
+    color: fn.fanui-var("color-surface");
+    background-color: fn.fanui-var("color-text-muted");
+  }
+
+  &__title {
+    font-size: fn.fanui-var("font-size-xl");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    max-width: 440px;
+    font-size: fn.fanui-var("font-size-base");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  @each $name, $color in v.$fanui-theme-colors {
+    &--#{$name} .fanui-result__icon { background-color: #{fn.fanui-var("#{$name}", $color)}; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 分隔加载线（顶部进度条）
+// -----------------------------------------------------------------------------
+
+.fanui-top-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: fn.fanui-var("z-toast", v.$fanui-zindex-toast);
+  background-color: transparent;
+  overflow: hidden;
+  opacity: 0;
+  @include mx.fanui-transition(opacity, v.$fanui-duration-fast);
+
+  &.is-active {
+    opacity: 1;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 40%;
+      background-color: fn.fanui-var("primary");
+      border-radius: 9999px;
+      animation: fanui-progress-indeterminate 1.4s v.$fanui-ease-in-out infinite;
+    }
+  }
+}