@zhang_jifan/fanui 2.1.0

package/src/components/_card.scss

@@ -0,0 +1,281 @@
+// =============================================================================
+// fanUI · 卡片 Card / 面板 Panel
+// -----------------------------------------------------------------------------
+// .fanui-card                  基础卡片
+// .fanui-card__header / __body / __footer / __media / __title / __subtitle
+// .fanui-card--interactive     可点击卡片（hover 抬升）
+// .fanui-card--flat|outlined|elevated|bordered
+// .fanui-card--horizontal      图文左右布局
+// .fanui-card--<semantic>      语义描边（primary/success/...）
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+.fanui-card {
+  --fanui-card-padding: #{fn.fanui-var("space-5")};
+  --fanui-card-radius: #{fn.fanui-var("radius-lg")};
+  --fanui-card-bg: #{fn.fanui-var("color-surface")};
+  --fanui-card-border: #{fn.fanui-var("color-border")};
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: var(--fanui-card-bg);
+  border: 1px solid var(--fanui-card-border);
+  border-radius: var(--fanui-card-radius);
+  box-shadow: fn.fanui-var("shadow-sm");
+  box-sizing: border-box;
+  @include mx.fanui-transition((box-shadow, border-color, transform, background-color), v.$fanui-duration-base);
+
+  // ---- 结构元素 ----
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    padding: var(--fanui-card-padding);
+    border-bottom: 1px solid var(--fanui-card-border);
+    flex: 0 0 auto;
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: 600;
+    line-height: 1.4;
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__subtitle {
+    margin: 2px 0 0;
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: 400;
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__extra {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    padding: var(--fanui-card-padding);
+    min-width: 0;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: fn.fanui-var("space-3");
+    padding: var(--fanui-card-padding);
+    border-top: 1px solid var(--fanui-card-border);
+    flex: 0 0 auto;
+
+    &--start { justify-content: flex-start; }
+    &--between { justify-content: space-between; }
+  }
+
+  &__media {
+    position: relative;
+    flex: 0 0 auto;
+    overflow: hidden;
+    border-radius: var(--fanui-card-radius) var(--fanui-card-radius) 0 0;
+    background-color: fn.fanui-var("color-surface-sunken");
+
+    > img,
+    > video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+
+  // 无内边距的结构体
+  &__body--flush { padding: 0; }
+  &__body--tight { padding: fn.fanui-var("space-3"); }
+  &__body--loose { padding: fn.fanui-var("space-8"); }
+}
+
+// -----------------------------------------------------------------------------
+// 1. 外观变体
+// -----------------------------------------------------------------------------
+
+.fanui-card--flat,
+.fanui-card--bordered {
+  box-shadow: none;
+}
+
+.fanui-card--elevated {
+  border-color: transparent;
+  box-shadow: fn.fanui-var("shadow-md");
+}
+
+.fanui-card--glass {
+  @include mx.fanui-glass(fn.fanui-alpha(#ffffff, 0.66));
+  border-color: fn.fanui-alpha(#ffffff, 0.5);
+
+  :root[data-fanui-theme="dark"] & {
+    @include mx.fanui-glass(fn.fanui-alpha(#0f172a, 0.6));
+    border-color: fn.fanui-alpha(#ffffff, 0.1);
+  }
+}
+
+.fanui-card--sunken {
+  --fanui-card-bg: #{fn.fanui-var("color-surface-sunken")};
+  box-shadow: none;
+}
+
+.fanui-card--ghost {
+  --fanui-card-bg: transparent;
+  --fanui-card-border: transparent;
+  box-shadow: none;
+}
+
+// 顶部色条
+.fanui-card--accent-bar {
+  overflow: hidden;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: 3px;
+    background-color: var(--fanui-card-accent, #{fn.fanui-var("primary")});
+  }
+}
+
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-card--#{$name} {
+    --fanui-card-border: #{fn.fanui-alpha($color, 0.35)};
+    --fanui-card-accent: #{fn.fanui-var("#{$name}", $color)};
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 交互态
+// -----------------------------------------------------------------------------
+
+.fanui-card--interactive {
+  cursor: pointer;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: fn.fanui-var("shadow-lg");
+    border-color: fn.fanui-var("color-border-strong");
+  }
+
+  &:active { transform: translateY(0); }
+
+  &:focus-visible { @include mx.fanui-focus-ring(); }
+}
+
+.fanui-card--selected {
+  border-color: fn.fanui-var("primary");
+  box-shadow: 0 0 0 1px fn.fanui-var("primary"), fn.fanui-var("shadow-md");
+}
+
+.fanui-card--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+  filter: grayscale(0.3);
+}
+
+// -----------------------------------------------------------------------------
+// 3. 布局变体
+// -----------------------------------------------------------------------------
+
+.fanui-card--horizontal {
+  flex-direction: row;
+  align-items: stretch;
+
+  .fanui-card__media {
+    flex: 0 0 auto;
+    width: var(--fanui-card-media-width, 33.333%);
+    border-radius: var(--fanui-card-radius) 0 0 var(--fanui-card-radius);
+
+    > img, > video { height: 100%; }
+  }
+
+  @include mx.fanui-media-down("sm") {
+    flex-direction: column;
+
+    .fanui-card__media {
+      width: 100%;
+      border-radius: var(--fanui-card-radius) var(--fanui-card-radius) 0 0;
+    }
+  }
+}
+
+.fanui-card--fill { height: 100%; }
+.fanui-card--compact { --fanui-card-padding: #{fn.fanui-var("space-3")}; --fanui-card-radius: #{fn.fanui-var("radius-md")}; }
+.fanui-card--roomy   { --fanui-card-padding: #{fn.fanui-var("space-8")}; }
+
+// 卡片网格
+.fanui-card-grid {
+  @include mx.fanui-grid-auto(260px, fn.fanui-var("space-5"));
+}
+
+// 面板（无阴影、适合嵌套）
+.fanui-panel {
+  padding: fn.fanui-var("space-5");
+  background-color: fn.fanui-var("color-surface");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-md");
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: fn.fanui-var("space-4");
+    padding-bottom: fn.fanui-var("space-3");
+    border-bottom: 1px solid fn.fanui-var("color-border-subtle");
+  }
+
+  &__title {
+    font-size: fn.fanui-var("font-size-base");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-strong");
+  }
+}
+
+// 统计卡
+.fanui-stat {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-2");
+
+  &__label {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__value {
+    font-size: fn.fanui-var("font-size-3xl");
+    font-weight: 700;
+    line-height: 1.1;
+    color: fn.fanui-var("color-text-strong");
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__trend {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: 500;
+
+    &--up   { color: fn.fanui-var("danger"); }   // 中国市场约定：涨 = 红
+    &--down { color: fn.fanui-var("success"); }  // 跌 = 绿
+    &--flat { color: fn.fanui-var("color-text-muted"); }
+  }
+}

package/src/components/_choice.scss

@@ -0,0 +1,444 @@
+// =============================================================================
+// fanUI · 选择器 Select / 多选与开关 (Choice Controls)
+// -----------------------------------------------------------------------------
+// .fanui-select            原生 <select> 美化
+// .fanui-checkbox          复选框
+// .fanui-radio             单选框
+// .fanui-switch            开关
+// .fanui-choice-group      选项组（横/纵向）
+// 统一使用「原生 input + 自定义外观」，保证可访问性与表单提交能力。
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. Select
+// -----------------------------------------------------------------------------
+
+.fanui-select {
+  @include mx.fanui-form-control();
+
+  padding-inline-end: 32px;
+  cursor: pointer;
+
+  // 自绘箭头（内联 SVG，避免额外请求）
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 16px;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &[multiple],
+  &[size]:not([size="1"]) {
+    padding-inline-end: fn.fanui-var("control-px", 14px);
+    background-image: none;
+    height: auto;
+    min-height: 88px;
+  }
+
+  &::-ms-expand { display: none; }
+
+  &:disabled { cursor: not-allowed; }
+}
+
+// 多选列表
+.fanui-select-multiple {
+  @extend .fanui-select;
+  min-height: 96px;
+  padding: 6px;
+
+  option {
+    padding: 4px 8px;
+    border-radius: fn.fanui-var("radius-sm");
+
+    &:checked {
+      background-color: fn.fanui-var("primary");
+      color: fn.fanui-var("primary-fg");
+    }
+  }
+}
+
+// 带前缀图标的 select
+.fanui-select-wrap {
+  position: relative;
+  display: block;
+
+  &__prefix {
+    position: absolute;
+    top: 50%;
+    left: 12px;
+    transform: translateY(-50%);
+    color: fn.fanui-var("color-text-subtle");
+    pointer-events: none;
+  }
+
+  .fanui-select { padding-inline-start: 36px; }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 复选框 Checkbox
+// -----------------------------------------------------------------------------
+
+.fanui-checkbox,
+.fanui-radio {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  position: relative;
+  font-size: fn.fanui-var("font-size-base");
+  line-height: 1.5;
+  color: fn.fanui-var("color-text");
+  cursor: pointer;
+  user-select: none;
+
+  &__input {
+    @include mx.fanui-visually-hidden();
+
+    // 让键盘聚焦时可显示焦点环
+    &:focus-visible + .fanui-checkbox__box,
+    &:focus-visible + .fanui-radio__box {
+      @include mx.fanui-focus-ring();
+    }
+  }
+
+  &__label {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__desc {
+    display: block;
+    margin-top: 2px;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  // ---- 禁用 ----
+  &.is-disabled,
+  &__input:disabled ~ &__label {
+    color: fn.fanui-var("color-disabled-text");
+    cursor: not-allowed;
+  }
+
+  &__input:disabled + .fanui-checkbox__box,
+  &__input:disabled + .fanui-radio__box {
+    background-color: fn.fanui-var("color-disabled-bg");
+    border-color: fn.fanui-var("color-border");
+    cursor: not-allowed;
+
+    &::after { opacity: 0.45; }
+  }
+}
+
+.fanui-checkbox__box {
+  position: relative;
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin-top: 3px;
+  background-color: fn.fanui-var("color-surface");
+  border: 1px solid fn.fanui-var("color-border-strong");
+  border-radius: fn.fanui-var("radius-sm");
+  box-sizing: border-box;
+  @include mx.fanui-transition((background-color, border-color, box-shadow), v.$fanui-duration-fast);
+
+  // 勾
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 4px;
+    height: 8px;
+    margin: -5px 0 0 -2px;
+    border: solid fn.fanui-var("color-text-inverse");
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg) scale(0.6);
+    opacity: 0;
+    @include mx.fanui-transition((opacity, transform), v.$fanui-duration-fast, v.$fanui-ease-spring);
+  }
+}
+
+.fanui-checkbox:hover .fanui-checkbox__box {
+  border-color: fn.fanui-var("primary");
+}
+
+.fanui-checkbox__input:checked + .fanui-checkbox__box,
+.fanui-checkbox.is-checked .fanui-checkbox__box {
+  background-color: fn.fanui-var("primary");
+  border-color: fn.fanui-var("primary");
+
+  &::after {
+    opacity: 1;
+    transform: rotate(45deg) scale(1);
+  }
+}
+
+// 半选
+.fanui-checkbox__input:indeterminate + .fanui-checkbox__box {
+  background-color: fn.fanui-var("primary");
+  border-color: fn.fanui-var("primary");
+
+  &::after {
+    width: 8px;
+    height: 0;
+    margin: -1px 0 0 -4px;
+    border-width: 0 0 2px 0;
+    transform: none;
+    opacity: 1;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 单选框 Radio
+// -----------------------------------------------------------------------------
+
+.fanui-radio {
+  &__box {
+    position: relative;
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    margin-top: 3px;
+    background-color: fn.fanui-var("color-surface");
+    border: 1px solid fn.fanui-var("color-border-strong");
+    border-radius: 50%;
+    box-sizing: border-box;
+    @include mx.fanui-transition((background-color, border-color, box-shadow), v.$fanui-duration-fast);
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 6px;
+      height: 6px;
+      margin: -3px 0 0 -3px;
+      background-color: fn.fanui-var("color-text-inverse");
+      border-radius: 50%;
+      transform: scale(0);
+      opacity: 0;
+      @include mx.fanui-transition((opacity, transform), v.$fanui-duration-fast, v.$fanui-ease-spring);
+    }
+  }
+
+  &:hover .fanui-radio__box { border-color: fn.fanui-var("primary"); }
+
+  &__input:checked + .fanui-radio__box,
+  &.is-checked .fanui-radio__box {
+    background-color: fn.fanui-var("primary");
+    border-color: fn.fanui-var("primary");
+
+    &::after { opacity: 1; transform: scale(1); }
+  }
+}
+
+// 复选框 / 单选 尺寸
+.fanui-checkbox--sm,
+.fanui-radio--sm {
+  .fanui-checkbox__box,
+  .fanui-radio__box { width: 14px; height: 14px; }
+}
+.fanui-checkbox--lg,
+.fanui-radio--lg {
+  font-size: fn.fanui-var("font-size-md");
+
+  .fanui-checkbox__box,
+  .fanui-radio__box { width: 20px; height: 20px; border-radius: fn.fanui-var("radius-base"); }
+
+  .fanui-radio__box { border-radius: 50%; }
+  .fanui-radio__box::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
+  .fanui-checkbox__box::after { width: 5px; height: 10px; margin: -6px 0 0 -2.5px; }
+}
+
+// 卡片式选项
+.fanui-checkbox--card,
+.fanui-radio--card {
+  display: flex;
+  align-items: flex-start;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-md");
+  @include mx.fanui-transition((border-color, background-color, box-shadow), v.$fanui-duration-fast);
+
+  &:hover { border-color: fn.fanui-var("color-border-strong"); background-color: fn.fanui-var("color-hover"); }
+
+  &:has(.fanui-checkbox__input:checked),
+  &:has(.fanui-radio__input:checked),
+  &.is-checked {
+    border-color: fn.fanui-var("primary");
+    background-color: fn.fanui-var("primary-soft");
+  }
+}
+
+// 纯按钮式选项（分段控制器）
+.fanui-checkbox--button,
+.fanui-radio--button {
+  padding: 6px 14px;
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-base");
+  font-size: fn.fanui-var("font-size-sm");
+  @include mx.fanui-transition((border-color, background-color, color), v.$fanui-duration-fast);
+
+  .fanui-checkbox__box,
+  .fanui-radio__box { display: none; }
+
+  &:has(.fanui-checkbox__input:checked),
+  &:has(.fanui-radio__input:checked) {
+    border-color: fn.fanui-var("primary");
+    background-color: fn.fanui-var("primary");
+    color: fn.fanui-var("primary-fg");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 选项组
+// -----------------------------------------------------------------------------
+
+.fanui-choice-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: fn.fanui-var("space-4");
+
+  &--vertical {
+    flex-direction: column;
+    gap: fn.fanui-var("space-3");
+  }
+
+  &--tight { gap: fn.fanui-var("space-2"); }
+}
+
+// 分段控制器（互斥按钮组）
+.fanui-segmented {
+  display: inline-flex;
+  padding: 2px;
+  background-color: fn.fanui-var("color-surface-sunken");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-md");
+  gap: 2px;
+
+  &__item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 6px 14px;
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: 500;
+    color: fn.fanui-var("color-text-muted");
+    border-radius: fn.fanui-var("radius-base");
+    cursor: pointer;
+    white-space: nowrap;
+    @include mx.fanui-transition((background-color, color, box-shadow), v.$fanui-duration-fast);
+
+    input { @include mx.fanui-visually-hidden(); }
+
+    &:hover { color: fn.fanui-var("color-text"); }
+
+    &:has(input:checked),
+    &.is-active,
+    &[aria-selected="true"] {
+      color: fn.fanui-var("color-text-strong");
+      background-color: fn.fanui-var("color-surface");
+      box-shadow: fn.fanui-var("shadow-xs");
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 开关 Switch
+// -----------------------------------------------------------------------------
+
+.fanui-switch {
+  --fanui-switch-w: 40px;
+  --fanui-switch-h: 22px;
+  --fanui-switch-travel: calc(var(--fanui-switch-w) - var(--fanui-switch-h));
+
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+
+  &__input { @include mx.fanui-visually-hidden(); }
+
+  &__track {
+    position: relative;
+    flex: 0 0 auto;
+    width: var(--fanui-switch-w);
+    height: var(--fanui-switch-h);
+    background-color: fn.fanui-var("color-border-strong");
+    border: 1px solid transparent;
+    border-radius: 9999px;
+    box-sizing: border-box;
+    @include mx.fanui-transition((background-color, border-color), v.$fanui-duration-base);
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: calc(var(--fanui-switch-h) - 4px);
+    height: calc(var(--fanui-switch-h) - 4px);
+    background-color: #ffffff;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3);
+    @include mx.fanui-transition(transform, v.$fanui-duration-base, v.$fanui-ease-spring);
+  }
+
+  &__label { font-size: fn.fanui-var("font-size-base"); }
+
+  &__input:checked ~ .fanui-switch__track,
+  &.is-checked .fanui-switch__track {
+    background-color: fn.fanui-var("primary");
+    border-color: fn.fanui-var("primary");
+
+    .fanui-switch__thumb { transform: translateX(var(--fanui-switch-travel)); }
+  }
+
+  &__input:focus-visible ~ .fanui-switch__track {
+    @include mx.fanui-focus-ring();
+  }
+
+  &__input:disabled ~ .fanui-switch__track {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // 语义变体
+  @each $name, $color in v.$fanui-theme-colors {
+    &--#{$name} {
+      $c: fn.fanui-var("#{$name}", $color);
+      --fanui-switch-checked: #{$c};
+
+      .fanui-switch__input:checked ~ .fanui-switch__track,
+      &.is-checked .fanui-switch__track {
+        background-color: $c;
+        border-color: $c;
+      }
+    }
+  }
+
+  // 尺寸
+  &--sm { --fanui-switch-w: 32px; --fanui-switch-h: 18px; }
+  &--lg { --fanui-switch-w: 52px; --fanui-switch-h: 28px; }
+
+  // 加载态
+  &--loading {
+    .fanui-switch__thumb::after {
+      content: "";
+      position: absolute;
+      inset: 3px;
+      border: 2px solid fn.fanui-var("color-text-subtle");
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: fanui-spin 700ms linear infinite;
+    }
+  }
+}