@zhang_jifan/fanui 2.1.0

package/src/components/_data.scss

@@ -0,0 +1,618 @@
+// =============================================================================
+// fanUI · 数据展示组件：头像 / 列表 / 分页 / 步骤条 / 时间线 / 描述列表
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 头像 Avatar
+// -----------------------------------------------------------------------------
+
+.fanui-avatar {
+  --fanui-avatar-size: 40px;
+  --fanui-avatar-radius: 50%;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--fanui-avatar-size);
+  height: var(--fanui-avatar-size);
+  font-size: calc(var(--fanui-avatar-size) * 0.4);
+  font-weight: 600;
+  line-height: 1;
+  color: fn.fanui-var("color-text-inverse");
+  background-color: fn.fanui-var("primary");
+  border-radius: var(--fanui-avatar-radius);
+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+
+  > img,
+  > video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  &__icon { display: inline-flex; font-size: 1.1em; }
+  &__text { font-size: 0.85em; letter-spacing: 0.02em; }
+
+  // 尺寸
+  &--xs { --fanui-avatar-size: 24px; font-size: 11px; }
+  &--sm { --fanui-avatar-size: 32px; font-size: 13px; }
+  &--md { --fanui-avatar-size: 40px; }
+  &--lg { --fanui-avatar-size: 48px; }
+  &--xl { --fanui-avatar-size: 64px; font-size: 22px; }
+  &--2xl { --fanui-avatar-size: 80px; font-size: 28px; }
+
+  &--square { --fanui-avatar-radius: #{fn.fanui-var("radius-base")}; }
+  &--rounded { --fanui-avatar-radius: #{fn.fanui-var("radius-lg")}; }
+
+  &--bordered {
+    border: 2px solid fn.fanui-var("color-surface");
+    box-shadow: fn.fanui-var("shadow-sm");
+  }
+
+  // 语义色
+  @each $name, $color in v.$fanui-theme-colors {
+    &--#{$name} {
+      background-color: #{fn.fanui-var("#{$name}", $color)};
+      color: #{fn.fanui-var("#{$name}-fg", fn.fanui-contrast($color))};
+    }
+  }
+
+  &--neutral { background-color: fn.fanui-var("color-surface-sunken"); color: fn.fanui-var("color-text-muted"); }
+
+  // 状态点
+  &__status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 28%;
+    height: 28%;
+    min-width: 8px;
+    min-height: 8px;
+    border-radius: 50%;
+    border: 2px solid fn.fanui-var("color-surface");
+    background-color: fn.fanui-var("color-text-subtle");
+    box-sizing: content-box;
+
+    &--online  { background-color: fn.fanui-var("success"); }
+    &--busy    { background-color: fn.fanui-var("danger"); }
+    &--away    { background-color: fn.fanui-var("warning"); }
+    &--offline { background-color: fn.fanui-var("color-text-subtle"); }
+  }
+}
+
+// 头像组
+.fanui-avatar-group {
+  display: inline-flex;
+  align-items: center;
+
+  > .fanui-avatar {
+    margin-inline-start: -10px;
+    border: 2px solid fn.fanui-var("color-surface");
+    @include mx.fanui-transition((transform, z-index), v.$fanui-duration-fast);
+
+    &:first-child { margin-inline-start: 0; }
+    &:hover { transform: translateY(-2px); z-index: 2; }
+  }
+
+  &--sm > .fanui-avatar { margin-inline-start: -8px; }
+  &--lg > .fanui-avatar { margin-inline-start: -12px; }
+
+  &__more {
+    background-color: fn.fanui-var("color-surface-sunken") !important;
+    color: fn.fanui-var("color-text-muted") !important;
+    font-size: 12px;
+  }
+}
+
+// 头像 + 文本
+.fanui-avatar-media {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  min-width: 0;
+
+  &__body { min-width: 0; }
+  &__title {
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 500;
+    color: fn.fanui-var("color-text-strong");
+    @include mx.fanui-truncate(1);
+  }
+  &__desc {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+    @include mx.fanui-truncate(1);
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 列表 List / List Group
+// -----------------------------------------------------------------------------
+
+.fanui-list-group {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  background-color: fn.fanui-var("color-surface");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-lg");
+  overflow: hidden;
+
+  &--flush { border: 0; border-radius: 0; background: transparent; }
+  &--separated { gap: fn.fanui-var("space-2"); border: 0; background: transparent; overflow: visible; }
+}
+
+.fanui-list-item {
+  display: flex;
+  align-items: center;
+  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");
+  color: fn.fanui-var("color-text");
+  background-color: transparent;
+  border-bottom: 1px solid fn.fanui-var("color-border");
+  text-decoration: none;
+  box-sizing: border-box;
+  @include mx.fanui-transition(background-color, v.$fanui-duration-fast);
+
+  &:last-child { border-bottom: 0; }
+
+  &--interactive {
+    cursor: pointer;
+
+    &:hover { background-color: fn.fanui-var("color-hover"); text-decoration: none; }
+    &:active { background-color: fn.fanui-var("color-active"); }
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+  }
+
+  &.is-active,
+  &--active {
+    background-color: fn.fanui-var("primary-soft");
+    color: fn.fanui-var("primary");
+    // 修正笔误：原为 "primary-bordery"（不存在的令牌名，只会永远走 fallback）
+    border-color: fn.fanui-var("primary-border", fn.fanui-var("primary"));
+    // C1：选中行底色是 primary-soft，嵌套的次级文字（__meta / __desc）若沿用
+    // 全局 subtle，在暗色下只剩 4.08:1。这里局部提升一档：
+    // 优先用主题色的 ink 档（与底色同色系），无主题色时退回 muted。
+    --fanui-color-text-subtle: var(--fanui-primary-ink, var(--fanui-color-text-muted));
+  }
+
+  &.is-disabled { opacity: 0.55; pointer-events: none; }
+
+  .fanui-list-group--separated & {
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-md");
+    background-color: fn.fanui-var("color-surface");
+  }
+
+  &__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    width: 20px;
+    justify-content: center;
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__body { flex: 1 1 auto; min-width: 0; }
+
+  &__title {
+    font-weight: 500;
+    color: fn.fanui-var("color-text-strong");
+    @include mx.fanui-truncate(1);
+  }
+
+  &__desc {
+    margin-top: 2px;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+    @include mx.fanui-truncate(2);
+  }
+
+  &__meta {
+    flex: 0 0 auto;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-subtle");
+    white-space: nowrap;
+  }
+
+  &__action { flex: 0 0 auto; margin-inline-start: auto; }
+
+  &--sm { padding: 6px 12px; font-size: fn.fanui-var("font-size-sm"); }
+  &--lg { padding: fn.fanui-var("space-4") fn.fanui-var("space-5"); }
+}
+
+.fanui-list-header {
+  padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+  font-size: fn.fanui-var("font-size-xs");
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: fn.fanui-var("color-text-subtle");
+  background-color: fn.fanui-var("color-surface-sunken");
+  border-bottom: 1px solid fn.fanui-var("color-border");
+}
+
+// 描述列表 Descriptions
+.fanui-descriptions {
+  display: grid;
+  gap: fn.fanui-var("space-3") fn.fanui-var("space-6");
+  font-size: fn.fanui-var("font-size-base");
+
+  &__item { min-width: 0; }
+
+  &__label {
+    margin-bottom: 2px;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__value {
+    color: fn.fanui-var("color-text-strong");
+    word-break: break-word;
+  }
+
+  &--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  &--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  &--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+  @include mx.fanui-media-down("md") {
+    &--3, &--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+
+  @include mx.fanui-media-down("sm") {
+    &--2, &--3, &--4 { grid-template-columns: minmax(0, 1fr); }
+  }
+
+  // 行内（一行一条）
+  &--inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: fn.fanui-var("space-5");
+    grid-template-columns: none;
+
+    .fanui-descriptions__item { display: flex; gap: 8px; }
+    .fanui-descriptions__label { margin-bottom: 0; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 分页 Pagination
+// -----------------------------------------------------------------------------
+
+.fanui-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: fn.fanui-var("space-1");
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 8px;
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 500;
+    color: fn.fanui-var("color-text");
+    text-decoration: none;
+    background-color: transparent;
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-base");
+    cursor: pointer;
+    box-sizing: border-box;
+    user-select: none;
+    font-variant-numeric: tabular-nums;
+    @include mx.fanui-transition((color, background-color, border-color), v.$fanui-duration-fast);
+
+    &:hover:not(.is-disabled):not([aria-disabled="true"]):not(.is-active) {
+      color: fn.fanui-var("primary");
+      border-color: fn.fanui-var("primary");
+      background-color: fn.fanui-var("primary-soft");
+      text-decoration: none;
+    }
+
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+
+    &.is-active,
+    &[aria-current="page"] {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      border-color: fn.fanui-var("primary");
+    }
+
+    &.is-disabled,
+    &[aria-disabled="true"] {
+      color: fn.fanui-var("color-disabled-text");
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &--ellipsis {
+      border-color: transparent;
+      background: transparent;
+      color: fn.fanui-var("color-text-subtle");
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &--icon { padding: 0; }
+  }
+
+  &__info {
+    margin-inline-start: fn.fanui-var("space-3");
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  // 变体
+  &--borderless .fanui-pagination__item { border-color: transparent; }
+
+  &--pill .fanui-pagination__item { border-radius: 9999px; }
+
+  &--sm .fanui-pagination__item { min-width: 26px; height: 26px; font-size: fn.fanui-var("font-size-sm"); }
+  &--lg .fanui-pagination__item { min-width: 38px; height: 38px; font-size: fn.fanui-var("font-size-md"); }
+
+  &--center { justify-content: center; }
+  &--end { justify-content: flex-end; }
+
+  // 紧凑「上一页/页码/下一页」布局
+  &--simple {
+    gap: fn.fanui-var("space-2");
+
+    .fanui-pagination__item { border-color: transparent; }
+  }
+}
+
+// 每页条数选择器
+.fanui-pagination-page-size {
+  display: inline-flex;
+  align-items: center;
+  gap: fn.fanui-var("space-2");
+  font-size: fn.fanui-var("font-size-sm");
+  color: fn.fanui-var("color-text-muted");
+
+  .fanui-select { width: auto; min-width: 72px; }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 步骤条 Steps
+// -----------------------------------------------------------------------------
+
+.fanui-steps {
+  --fanui-step-dot: 28px;
+
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &__item {
+    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: fn.fanui-var("space-2");
+
+    // 连接线
+    &:not(:last-child)::after {
+      content: "";
+      position: absolute;
+      top: calc(var(--fanui-step-dot) / 2);
+      left: calc(50% + var(--fanui-step-dot) / 2 + 6px);
+      right: calc(-50% + var(--fanui-step-dot) / 2 + 6px);
+      height: 2px;
+      background-color: fn.fanui-var("color-border");
+      @include mx.fanui-transition(background-color, v.$fanui-duration-base);
+    }
+
+    &.is-done:not(:last-child)::after { background-color: fn.fanui-var("primary"); }
+  }
+
+  &__dot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: var(--fanui-step-dot);
+    height: var(--fanui-step-dot);
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: 600;
+    line-height: 1;
+    color: fn.fanui-var("color-text-muted");
+    background-color: fn.fanui-var("color-surface");
+    border: 2px solid fn.fanui-var("color-border-strong");
+    border-radius: 50%;
+    box-sizing: border-box;
+    z-index: 1;
+    @include mx.fanui-transition((color, background-color, border-color), v.$fanui-duration-base);
+  }
+
+  &__title {
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 500;
+    color: fn.fanui-var("color-text-muted");
+    @include mx.fanui-transition(color, v.$fanui-duration-base);
+  }
+
+  &__desc {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-subtle");
+    line-height: 1.5;
+  }
+
+  // ---- 状态 ----
+  &__item.is-active {
+    .fanui-steps__dot {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      border-color: fn.fanui-var("primary");
+      box-shadow: 0 0 0 4px fn.fanui-var("primary-soft");
+    }
+    .fanui-steps__title { color: fn.fanui-var("color-text-strong"); font-weight: 600; }
+  }
+
+  &__item.is-done {
+    .fanui-steps__dot {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      border-color: fn.fanui-var("primary");
+    }
+    .fanui-steps__title { color: fn.fanui-var("color-text"); }
+  }
+
+  &__item.is-error {
+    .fanui-steps__dot { color: fn.fanui-var("danger-fg"); background-color: fn.fanui-var("danger"); border-color: fn.fanui-var("danger"); }
+    .fanui-steps__title { color: fn.fanui-var("danger"); }
+  }
+
+  // ---- 变体 ----
+  &--simple .fanui-steps__item {
+    &:not(:last-child)::after {
+      left: calc(var(--fanui-step-dot) / 2 + 8px);
+      right: calc(-50% + var(--fanui-step-dot) / 2 + 12px);
+    }
+  }
+
+  &--navigation {
+    gap: fn.fanui-var("space-3");
+    align-items: stretch;
+
+    .fanui-steps__item {
+      flex-direction: row;
+      align-items: flex-start;
+      text-align: start;
+      gap: fn.fanui-var("space-3");
+      padding: fn.fanui-var("space-3");
+      border: 1px solid fn.fanui-var("color-border");
+      border-radius: fn.fanui-var("radius-md");
+      cursor: pointer;
+
+      &::after { display: none; }
+      &:hover { border-color: fn.fanui-var("primary"); }
+      &.is-active { border-color: fn.fanui-var("primary"); background-color: fn.fanui-var("primary-soft"); }
+    }
+
+    .fanui-steps__dot { margin-top: 1px; }
+  }
+
+  // 纵向
+  &--vertical {
+    flex-direction: column;
+    gap: 0;
+
+    .fanui-steps__item {
+      flex-direction: row;
+      align-items: flex-start;
+      text-align: start;
+      gap: fn.fanui-var("space-3");
+      padding-bottom: fn.fanui-var("space-5");
+      flex: 0 0 auto;
+
+      &:not(:last-child)::after {
+        top: calc(var(--fanui-step-dot) + 4px);
+        left: calc(var(--fanui-step-dot) / 2 - 1px);
+        right: auto;
+        bottom: 4px;
+        width: 2px;
+        height: auto;
+      }
+
+      &:last-child { padding-bottom: 0; }
+    }
+
+    .fanui-steps__body { text-align: start; }
+  }
+
+  &__body { min-width: 0; }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 时间线 Timeline
+// -----------------------------------------------------------------------------
+
+.fanui-timeline {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &__item {
+    position: relative;
+    display: flex;
+    gap: fn.fanui-var("space-4");
+    padding-bottom: fn.fanui-var("space-5");
+
+    &:last-child { padding-bottom: 0; }
+
+    // 连接线
+    &:not(:last-child)::before {
+      content: "";
+      position: absolute;
+      top: 18px;
+      bottom: 0;
+      left: 6px;
+      width: 2px;
+      background-color: fn.fanui-var("color-border");
+    }
+  }
+
+  &__dot {
+    position: relative;
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    margin-top: 4px;
+    background-color: fn.fanui-var("color-surface");
+    border: 2px solid fn.fanui-var("color-border-strong");
+    border-radius: 50%;
+    box-sizing: border-box;
+    z-index: 1;
+
+    &--primary { background-color: fn.fanui-var("primary"); border-color: fn.fanui-var("primary"); }
+    &--success { background-color: fn.fanui-var("success"); border-color: fn.fanui-var("success"); }
+    &--warning { background-color: fn.fanui-var("warning"); border-color: fn.fanui-var("warning"); }
+    &--danger  { background-color: fn.fanui-var("danger");  border-color: fn.fanui-var("danger"); }
+  }
+
+  &__body { flex: 1 1 auto; min-width: 0; }
+
+  &__time {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-subtle");
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__title {
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin-top: 4px;
+    font-size: fn.fanui-var("font-size-base");
+    line-height: 1.6;
+    color: fn.fanui-var("color-text-muted");
+  }
+}