@zhang_jifan/fanui 2.1.0

package/src/components/_table.scss

@@ -0,0 +1,276 @@
+// =============================================================================
+// fanUI · 表格 Table
+// -----------------------------------------------------------------------------
+// 结构：
+//   <div class="fanui-table-wrap">
+//     <table class="fanui-table fanui-table--striped fanui-table--hover">
+//       <thead><tr><th>…</th></tr></thead>
+//       <tbody><tr><td>…</td></tr></tbody>
+//     </table>
+//   </div>
+// 变体：--bordered --borderless --striped --hover --compact --roomy
+//       --fixed --sticky-head --sticky-col --align-top/--align-middle
+//       --primary/success/... (表头着色)
+// 工具：.fanui-table-scroll-x / .fanui-table-caption / .fanui-table__actions
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+.fanui-table-wrap {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-lg");
+  background-color: fn.fanui-var("color-surface");
+  @include mx.fanui-scrollbar(10px);
+
+  // 无边框包裹（表格自带边框时使用）
+  &--plain {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  &--flush { border-radius: 0; }
+}
+
+.fanui-table {
+  --fanui-table-bg: transparent;
+  --fanui-table-striped-bg: #{fn.fanui-var("color-surface-sunken")};
+  --fanui-table-hover-bg: #{fn.fanui-var("color-hover")};
+  --fanui-table-border-color: #{fn.fanui-var("color-border")};
+  --fanui-table-caption-color: #{fn.fanui-var("color-text-muted")};
+  --fanui-table-head-bg: #{fn.fanui-var("color-surface-sunken")};
+  --fanui-table-cell-py: #{v.$fanui-table-cell-padding-y};
+  --fanui-table-cell-px: #{v.$fanui-table-cell-padding-x};
+
+  width: 100%;
+  margin-bottom: 0;
+  color: fn.fanui-var("color-text");
+  font-size: fn.fanui-var("font-size-base");
+  line-height: 1.5;
+  vertical-align: top;
+  border-collapse: separate;
+  border-spacing: 0;
+  background-color: var(--fanui-table-bg);
+
+  // ---- 表头 ----
+  > thead {
+    background-color: var(--fanui-table-head-bg);
+
+    th {
+      font-weight: 600;
+      color: fn.fanui-var("color-text-strong");
+      white-space: nowrap;
+      text-align: start;
+      border-bottom: 1px solid var(--fanui-table-border-color);
+    }
+  }
+
+  // ---- 单元格 ----
+  th,
+  td {
+    padding: var(--fanui-table-cell-py) var(--fanui-table-cell-px);
+    border-bottom: 1px solid var(--fanui-table-border-color);
+    box-sizing: border-box;
+  }
+
+  > tbody {
+    tr:last-child > td { border-bottom: 0; }
+  }
+
+  // ---- 表标题 ----
+  caption {
+    padding: fn.fanui-var("space-3") var(--fanui-table-cell-px);
+    font-size: fn.fanui-var("font-size-sm");
+    color: var(--fanui-table-caption-color);
+    text-align: start;
+    caption-side: bottom;
+  }
+
+  // ---- 行内交互 ----
+  a { color: fn.fanui-var("primary"); }
+
+  // 单元格内的按钮/标签不换行错位
+  .fanui-btn { vertical-align: middle; }
+}
+
+// -----------------------------------------------------------------------------
+// 1. 变体
+// -----------------------------------------------------------------------------
+
+.fanui-table--bordered {
+  > thead th,
+  > tbody td,
+  > tfoot td {
+    border: 1px solid var(--fanui-table-border-color);
+  }
+
+  > thead th { border-bottom-width: 1px; }
+}
+
+.fanui-table--borderless {
+  --fanui-table-border-color: transparent;
+
+  > thead th { border-bottom-width: 0; }
+}
+
+.fanui-table--striped {
+  > tbody > tr:nth-of-type(odd) > td {
+    background-color: var(--fanui-table-striped-bg);
+  }
+}
+
+.fanui-table--hover {
+  > tbody > tr {
+    @include mx.fanui-transition(background-color, v.$fanui-duration-fast);
+
+    &:hover > td,
+    &:hover > th {
+      background-color: var(--fanui-table-hover-bg);
+    }
+  }
+}
+
+.fanui-table--compact {
+  --fanui-table-cell-py: 6px;
+  --fanui-table-cell-px: 10px;
+  font-size: fn.fanui-var("font-size-sm");
+}
+
+.fanui-table--roomy {
+  --fanui-table-cell-py: 16px;
+  --fanui-table-cell-px: 20px;
+  font-size: fn.fanui-var("font-size-md");
+}
+
+.fanui-table--fixed {
+  table-layout: fixed;
+  word-break: break-word;
+}
+
+.fanui-table--align-middle {
+  th, td { vertical-align: middle; }
+}
+
+.fanui-table--align-top {
+  th, td { vertical-align: top; }
+}
+
+.fanui-table--align-center {
+  th, td { text-align: center; }
+  th:first-child, td:first-child { text-align: start; }
+}
+
+.fanui-table--sticky-head {
+  > thead th {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background-color: var(--fanui-table-head-bg);
+    box-shadow: inset 0 -1px 0 var(--fanui-table-border-color);
+  }
+}
+
+.fanui-table--sticky-col {
+  > thead th:first-child,
+  > tbody td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 3;
+    background-color: fn.fanui-var("color-surface");
+    box-shadow: inset -1px 0 0 var(--fanui-table-border-color);
+  }
+
+  > thead th:first-child { z-index: 4; background-color: var(--fanui-table-head-bg); }
+}
+
+// 表头着色
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-table--#{$name} {
+    --fanui-table-head-bg: #{fn.fanui-alpha($color, 0.10)};
+
+    // C1：表头文字压在「同色系半透明底」上，直接用 --#{$name} 只有 4.27:1。
+    // 浅色模式统一压深一档；暗色模式改读该模式下最亮的 -ink 档。
+    > thead th { color: #{fn.fanui-shade($color, 22%)}; }
+
+    [data-fanui-theme="dark"] & {
+      > thead th { color: #{fn.fanui-var("#{$name}-ink", fn.fanui-tint($color, 32%))}; }
+    }
+  }
+}
+
+.fanui-table--selected-row,
+.fanui-table > tbody > tr.is-selected > td {
+  background-color: fn.fanui-var("primary-soft") !important;
+}
+
+// -----------------------------------------------------------------------------
+// 2. 行状态
+// -----------------------------------------------------------------------------
+
+.fanui-table > tbody > tr {
+  &.is-disabled { opacity: 0.55; }
+  &.is-danger  > td { background-color: fn.fanui-alpha(v.$fanui-danger, 0.07); }
+  &.is-success > td { background-color: fn.fanui-alpha(v.$fanui-success, 0.07); }
+  &.is-warning > td { background-color: fn.fanui-alpha(v.$fanui-warning, 0.09); }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 列内工具
+// -----------------------------------------------------------------------------
+
+.fanui-table__actions {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-2");
+  white-space: nowrap;
+}
+
+.fanui-table__num {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.fanui-table__checkbox {
+  width: 1%;
+  white-space: nowrap;
+  padding-inline-end: 0;
+}
+
+// 空状态
+.fanui-table__empty {
+  padding: fn.fanui-var("space-12") fn.fanui-var("space-4");
+  text-align: center;
+  color: fn.fanui-var("color-text-muted");
+  font-size: fn.fanui-var("font-size-base");
+
+  &-icon {
+    display: block;
+    margin: 0 auto fn.fanui-var("space-3");
+    font-size: 32px;
+    opacity: 0.5;
+  }
+}
+
+// 表格底部工具条（分页 / 统计）
+.fanui-table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: fn.fanui-var("space-4");
+  padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+  border-top: 1px solid fn.fanui-var("color-border");
+  background-color: fn.fanui-var("color-surface");
+  flex-wrap: wrap;
+
+  &__info {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+}

package/src/components/_tabs.scss

@@ -0,0 +1,338 @@
+// =============================================================================
+// fanUI · 选项卡 Tabs / 折叠面板 Accordion / 分段
+// -----------------------------------------------------------------------------
+// .fanui-tabs               选项卡容器（--line 默认 / --card / --pill / --segmented）
+// .fanui-tabs__list         标签条
+// .fanui-tabs__item         标签（.is-active 选中）
+// .fanui-tabs__panel        面板（.is-active 显示）
+// .fanui-tabs--vertical     纵向
+// .fanui-accordion          折叠面板
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. Tabs
+// -----------------------------------------------------------------------------
+
+.fanui-tabs {
+  display: flex;
+  flex-direction: column;
+
+  &__list {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-1");
+    position: relative;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  &__item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex: 0 0 auto;
+    padding: 10px 14px;
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 500;
+    line-height: 1.4;
+    color: fn.fanui-var("color-text-muted");
+    text-decoration: none;
+    background: none;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    box-sizing: border-box;
+    @include mx.fanui-transition((color, border-color, background-color), v.$fanui-duration-fast);
+
+    &:hover {
+      color: fn.fanui-var("color-text-strong");
+      text-decoration: none;
+    }
+
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+
+    &.is-active,
+    &[aria-selected="true"] {
+      color: fn.fanui-var("primary");
+      border-bottom-color: fn.fanui-var("primary");
+      font-weight: 600;
+    }
+
+    &.is-disabled,
+    &:disabled {
+      color: fn.fanui-var("color-disabled-text");
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    &__icon { display: inline-flex; font-size: 1.05em; }
+    &__close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px; height: 16px;
+      margin-inline-start: 2px; margin-inline-end: -4px;
+      border-radius: 50%;
+      color: inherit; opacity: 0.6;
+
+      &:hover { opacity: 1; background-color: fn.fanui-alpha(#0f172a, 0.1); }
+    }
+  }
+
+  &__panel {
+    display: none;
+    padding-top: fn.fanui-var("space-4");
+
+    &.is-active { display: block; animation: fanui-fade-in v.$fanui-duration-base v.$fanui-ease-out both; }
+  }
+
+  &__badge { margin-inline-start: 4px; }
+
+  // ---- 下边框风格（默认）：容器底部有一条基线 ----
+  &--line > .fanui-tabs__list {
+    border-bottom: 1px solid fn.fanui-var("color-border");
+  }
+
+  // ---- 卡片风格 ----
+  &--card {
+    > .fanui-tabs__list {
+      gap: 4px;
+      padding: 4px 4px 0;
+      border-bottom: 1px solid fn.fanui-var("color-border");
+    }
+
+    > .fanui-tabs__list > .fanui-tabs__item {
+      border: 1px solid transparent;
+      border-bottom: 0;
+      border-radius: fn.fanui-var("radius-base") fn.fanui-var("radius-base") 0 0;
+      margin-bottom: -1px;
+
+      &.is-active {
+        background-color: fn.fanui-var("color-surface");
+        border-color: fn.fanui-var("color-border");
+        border-bottom-color: fn.fanui-var("color-surface");
+      }
+    }
+  }
+
+  // ---- 胶囊风格 ----
+  &--pill {
+    > .fanui-tabs__list {
+      gap: 4px;
+      padding: 4px;
+      background-color: fn.fanui-var("color-surface-sunken");
+      border-radius: fn.fanui-var("radius-md");
+      border-bottom: 0;
+    }
+
+    > .fanui-tabs__list > .fanui-tabs__item {
+      border-bottom: 0;
+      border-radius: fn.fanui-var("radius-base");
+      padding: 7px 14px;
+
+      &.is-active {
+        color: fn.fanui-var("color-text-strong");
+        background-color: fn.fanui-var("color-surface");
+        box-shadow: fn.fanui-var("shadow-xs");
+      }
+    }
+  }
+
+  // ---- 分段控件风格 ----
+  &--segmented {
+    > .fanui-tabs__list {
+      gap: 0;
+      border-bottom: 0;
+    }
+
+    > .fanui-tabs__list > .fanui-tabs__item {
+      border: 1px solid fn.fanui-var("color-border");
+      border-bottom: 1px solid fn.fanui-var("color-border");
+      border-inline-end-width: 0;
+      border-radius: 0;
+      padding: 7px 16px;
+      margin-inline-start: -1px;
+
+      &:first-child { margin-inline-start: 0; border-radius: fn.fanui-var("radius-base") 0 0 fn.fanui-var("radius-base"); }
+      &:last-child { border-inline-end-width: 1px; border-radius: 0 fn.fanui-var("radius-base") fn.fanui-var("radius-base") 0; }
+
+      &.is-active {
+        color: fn.fanui-var("primary-fg");
+        background-color: fn.fanui-var("primary");
+        border-color: fn.fanui-var("primary");
+        z-index: 1;
+      }
+    }
+  }
+
+  // ---- 纵向 ----
+  &--vertical {
+    flex-direction: row;
+    align-items: stretch;
+    gap: fn.fanui-var("space-4");
+
+    > .fanui-tabs__list {
+      flex-direction: column;
+      align-items: stretch;
+      border-bottom: 0;
+      border-inline-end: 1px solid fn.fanui-var("color-border");
+      overflow: visible;
+      min-width: var(--fanui-tabs-aside-width, 160px);
+    }
+
+    > .fanui-tabs__list > .fanui-tabs__item {
+      justify-content: flex-start;
+      border-bottom: 0;
+      border-inline-end: 2px solid transparent;
+      border-radius: fn.fanui-var("radius-base") 0 0 fn.fanui-var("radius-base");
+      margin-inline-end: -1px;
+
+      &.is-active {
+        border-right-color: fn.fanui-var("primary");
+        background-color: fn.fanui-var("primary-soft");
+      }
+    }
+
+    > .fanui-tabs__panel {
+      flex: 1 1 auto;
+      min-width: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. Accordion / Collapse
+// -----------------------------------------------------------------------------
+
+.fanui-accordion {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-lg");
+  overflow: hidden;
+  background-color: fn.fanui-var("color-surface");
+
+  &--flush { border: 0; border-radius: 0; background: transparent; }
+  &--separated { gap: fn.fanui-var("space-2"); border: 0; background: transparent; }
+
+  &__item {
+    border-bottom: 1px solid fn.fanui-var("color-border");
+
+    &:last-child { border-bottom: 0; }
+
+    .fanui-accordion--separated & {
+      border: 1px solid fn.fanui-var("color-border");
+      border-radius: fn.fanui-var("radius-md");
+      overflow: hidden;
+      background-color: fn.fanui-var("color-surface");
+    }
+  }
+
+  &__header {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    width: 100%;
+    padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 600;
+    line-height: 1.5;
+    text-align: start;
+    color: fn.fanui-var("color-text-strong");
+    background: none;
+    border: 0;
+    cursor: pointer;
+    @include mx.fanui-transition((background-color, color), v.$fanui-duration-fast);
+
+    &:hover { background-color: fn.fanui-var("color-hover"); }
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+
+    &__icon,
+    .fanui-accordion__icon {
+      flex: 0 0 auto;
+      display: inline-flex;
+      font-size: 14px;
+      color: fn.fanui-var("color-text-subtle");
+      @include mx.fanui-transition(transform, v.$fanui-duration-base);
+    }
+
+    &[aria-expanded="true"] .fanui-accordion__icon,
+    &[aria-expanded="true"] .fanui-accordion__trigger__icon {
+      transform: rotate(180deg);
+    }
+
+    &--sm { padding: fn.fanui-var("space-3") fn.fanui-var("space-4"); font-size: fn.fanui-var("font-size-sm"); }
+    &--lg { padding: fn.fanui-var("space-5"); font-size: fn.fanui-var("font-size-md"); }
+  }
+
+  &__panel {
+    display: none;
+    padding: 0 fn.fanui-var("space-5") fn.fanui-var("space-4");
+    font-size: fn.fanui-var("font-size-base");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+
+    &.is-open,
+    &.is-active { display: block; animation: fanui-slide-in-down v.$fanui-duration-base v.$fanui-ease-out both; }
+  }
+}
+
+// 折叠面板（独立 Collapse，无样式外壳）
+.fanui-collapse {
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 500;
+    color: fn.fanui-var("color-text");
+    background: none;
+    border: 0;
+    cursor: pointer;
+    padding: 0;
+
+    &__icon { @include mx.fanui-transition(transform, v.$fanui-duration-base); }
+    &[aria-expanded="true"] .fanui-collapse__trigger__icon { transform: rotate(90deg); }
+  }
+
+  &__panel {
+    display: none;
+
+    &.is-open { display: block; animation: fanui-slide-in-down v.$fanui-duration-base v.$fanui-ease-out both; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 分段 / 步进（详见 _choice.scss 中的 .fanui-segmented）
+// -----------------------------------------------------------------------------
+
+.fanui-tab-scroll {
+  display: flex;
+  gap: fn.fanui-var("space-2");
+  overflow-x: auto;
+  @include mx.fanui-scrollbar(6px);
+  padding-bottom: 2px;
+}