@zhang_jifan/fanui 2.1.0

package/src/components/_advanced.scss

@@ -0,0 +1,763 @@
+// =============================================================================
+// fanUI · 进阶数据录入与展示组件 (Advanced Components)
+// -----------------------------------------------------------------------------
+// 覆盖缺口清单 A1–A9 + C4：
+//   .fanui-loading-bar    顶部全局加载条（A3）
+//   .fanui-datepanel      日期选择面板（A1，JS: FanUI.datePicker）
+//   .fanui-timepanel      时间选择面板（A2，JS: FanUI.timePicker）
+//   .fanui-colorpanel     颜色选择面板（A4，JS: FanUI.colorPicker）
+//   .fanui-cascader       级联选择器（A5，JS: FanUI.cascader）
+//   .fanui-tree           树形控件（A6，JS: FanUI.tree）
+//   .fanui-transfer       穿梭框（A7，JS: FanUI.transfer）
+//   .fanui-cluster        簇状布局（A8，纯 CSS）
+//   .fanui-logo-cloud     客户 Logo 墙（A9，纯 CSS）
+//   .fanui-skip-link      跳转主内容链接（C4，纯 CSS）
+// 数据源约定：cascader / tree / transfer 均接受相邻
+// <script type="application/json"> 或 FanUI.xxx(el, { items }) 传入的 JSON。
+// =============================================================================
+
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 顶部加载条 loading-bar
+// -----------------------------------------------------------------------------
+
+.fanui-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: fn.fanui-var("z-toast", v.$fanui-zindex-toast);
+  height: 3px;
+  pointer-events: none;
+  opacity: 0;
+  background-color: transparent;
+  @include mx.fanui-transition((opacity), v.$fanui-duration-fast);
+
+  &__inner {
+    height: 100%;
+    width: var(--fanui-loading-progress, 0%);
+    border-radius: 0 9999px 9999px 0;
+    background-image: linear-gradient(
+      90deg,
+      fn.fanui-var("primary"),
+      fn.fanui-var("accent-vivid")
+    );
+    box-shadow: 0 0 8px fn.fanui-var("primary-ring");
+    @include mx.fanui-transition((width), 240ms, v.$fanui-ease-out);
+  }
+
+  &.is-loading { opacity: 1; }
+
+  // 不确定态（未调用 set() 前的缓动爬升由 JS 驱动；这里提供纯 CSS 备选）
+  &--indeterminate &__inner {
+    width: 40% !important;
+    animation: fanui-loading-slide 1.1s var(--fanui-ease-in-out, ease-in-out) infinite;
+  }
+}
+
+@keyframes fanui-loading-slide {
+  0% { margin-inline-start: -40%; }
+  100% { margin-inline-start: 100%; }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 浮层面板公共骨架（日期 / 时间 / 颜色共用）
+// -----------------------------------------------------------------------------
+
+%fanui-picker-panel-base {
+  position: absolute;
+  z-index: fn.fanui-var("z-popover", v.$fanui-zindex-popover);
+  min-width: 260px;
+  padding: fn.fanui-var("space-3");
+  background-color: fn.fanui-var("color-overlay");
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-lg");
+  box-shadow: fn.fanui-var("shadow-xl");
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px) scale(0.98);
+  transform-origin: top left;
+  @include mx.fanui-transition((opacity, visibility, transform), v.$fanui-duration-fast, v.$fanui-ease-out);
+
+  &.is-open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.fanui-datepanel,
+.fanui-timepanel,
+.fanui-colorpanel {
+  @extend %fanui-picker-panel-base;
+}
+
+// -----------------------------------------------------------------------------
+// 3. 日期选择 datepicker
+// -----------------------------------------------------------------------------
+
+.fanui-datepanel {
+  width: 292px;
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-2");
+    margin-bottom: fn.fanui-var("space-2");
+  }
+
+  &__title {
+    flex: 1 1 auto;
+    text-align: center;
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__nav {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    flex: 0 0 auto;
+    border: 0;
+    border-radius: fn.fanui-var("radius-sm");
+    background-color: transparent;
+    color: fn.fanui-var("color-text-muted");
+    cursor: pointer;
+    @include mx.fanui-transition((background-color, color), v.$fanui-duration-fast);
+
+    &:hover {
+      background-color: fn.fanui-var("color-hover");
+      color: fn.fanui-var("color-text-strong");
+    }
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+    &:disabled { opacity: 0.35; pointer-events: none; }
+  }
+
+  &__week,
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+  }
+
+  &__week > span {
+    padding: 4px 0;
+    text-align: center;
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__day {
+    display: grid;
+    place-items: center;
+    aspect-ratio: 1;
+    border: 0;
+    border-radius: fn.fanui-var("radius-sm");
+    background-color: transparent;
+    font-size: fn.fanui-var("font-size-sm");
+    font-variant-numeric: tabular-nums;
+    color: fn.fanui-var("color-text");
+    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(); }
+
+    &.is-other { color: fn.fanui-var("color-text-subtle"); opacity: 0.55; }
+    &.is-today {
+      color: fn.fanui-var("primary");
+      font-weight: fn.fanui-var("font-weight-bold");
+      box-shadow: inset 0 0 0 1px fn.fanui-var("primary-border");
+    }
+    &.is-selected {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      font-weight: fn.fanui-var("font-weight-semibold");
+    }
+    &.is-in-range {
+      color: fn.fanui-var("primary-ink");
+      background-color: fn.fanui-var("primary-soft");
+      border-radius: 0;
+    }
+    &:disabled {
+      color: fn.fanui-var("color-text-subtle");
+      opacity: 0.35;
+      text-decoration: line-through;
+      pointer-events: none;
+    }
+  }
+
+  &__quick {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: fn.fanui-var("space-2");
+    padding-top: fn.fanui-var("space-2");
+    border-top: 1px solid fn.fanui-var("color-border-subtle");
+
+    button {
+      padding: 3px 10px;
+      border: 1px solid fn.fanui-var("color-border");
+      border-radius: fn.fanui-var("radius-full");
+      background-color: transparent;
+      font-size: fn.fanui-var("font-size-xs");
+      color: fn.fanui-var("color-text-muted");
+      cursor: pointer;
+      @include mx.fanui-transition((background-color, color, border-color), v.$fanui-duration-fast);
+
+      &:hover {
+        color: fn.fanui-var("primary");
+        border-color: fn.fanui-var("primary-border");
+        background-color: fn.fanui-var("primary-soft");
+      }
+    }
+  }
+
+  &__foot {
+    display: flex;
+    justify-content: space-between;
+    margin-top: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 时间选择 timepicker
+// -----------------------------------------------------------------------------
+
+.fanui-timepanel {
+  width: 160px;
+  max-height: 280px;
+  overflow-y: auto;
+  @include mx.fanui-scrollbar(6px);
+
+  &__opt {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 7px 12px;
+    border: 0;
+    border-radius: fn.fanui-var("radius-sm");
+    background-color: transparent;
+    font-size: fn.fanui-var("font-size-sm");
+    font-variant-numeric: tabular-nums;
+    color: fn.fanui-var("color-text");
+    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(); }
+
+    &.is-selected {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      font-weight: fn.fanui-var("font-weight-semibold");
+
+      &::after { content: "✓"; font-size: 12px; }
+    }
+  }
+
+  &__empty {
+    padding: fn.fanui-var("space-4");
+    text-align: center;
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 颜色选择 colorpicker
+// -----------------------------------------------------------------------------
+
+.fanui-colorpanel {
+  width: 264px;
+
+  &__preview {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-3");
+    margin-bottom: fn.fanui-var("space-3");
+  }
+
+  &__swatch {
+    width: 44px;
+    height: 44px;
+    flex: 0 0 auto;
+    border-radius: fn.fanui-var("radius-md");
+    border: 1px solid fn.fanui-var("color-border");
+    box-shadow: inset 0 0 0 2px fn.fanui-var("color-surface");
+  }
+
+  &__value {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 7px 10px;
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-md");
+    background-color: fn.fanui-var("color-surface-sunken");
+    font-family: fn.fanui-var("font-mono");
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text");
+    text-transform: uppercase;
+  }
+
+  &__slider {
+    width: 100%;
+    margin: 0 0 fn.fanui-var("space-2");
+    accent-color: fn.fanui-var("primary");
+    cursor: pointer;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    margin-bottom: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+
+    label { flex: 0 0 32px; }
+  }
+
+  &__palette {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    gap: 6px;
+    margin-top: fn.fanui-var("space-3");
+    padding-top: fn.fanui-var("space-3");
+    border-top: 1px solid fn.fanui-var("color-border-subtle");
+
+    button {
+      aspect-ratio: 1;
+      border: 0;
+      border-radius: fn.fanui-var("radius-sm");
+      cursor: pointer;
+      @include mx.fanui-transition((transform, box-shadow), v.$fanui-duration-fast);
+
+      &:hover { transform: scale(1.12); box-shadow: fn.fanui-var("shadow-md"); }
+      &.is-selected { box-shadow: 0 0 0 2px fn.fanui-var("color-surface"), 0 0 0 4px fn.fanui-var("primary"); }
+      &:focus-visible { @include mx.fanui-focus-ring(); }
+    }
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-2");
+    margin-top: fn.fanui-var("space-3");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 级联选择 cascader
+// -----------------------------------------------------------------------------
+
+.fanui-cascader {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+
+  &__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-2");
+    width: 100%;
+    padding: 8px 12px;
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-md");
+    background-color: fn.fanui-var("color-surface");
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text");
+    cursor: pointer;
+    text-align: start;
+    @include mx.fanui-transition((border-color, box-shadow), v.$fanui-duration-fast);
+
+    &:hover { border-color: fn.fanui-var("primary-border"); }
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+
+    &.is-active { border-color: fn.fanui-var("primary"); }
+
+    .fanui-cascader__placeholder { color: fn.fanui-var("color-text-subtle"); }
+    .fanui-cascader__caret { color: fn.fanui-var("color-text-subtle"); font-size: 10px; }
+  }
+
+  &__panel {
+    @extend %fanui-picker-panel-base;
+    display: none;
+    width: max-content;
+    max-width: min(560px, 92vw);
+
+    &.is-open { display: flex; }
+
+    // 搜索模式：单列
+    &.is-searching { display: block; }
+  }
+
+  &__search {
+    width: 100%;
+    padding: 7px 10px;
+    margin-bottom: fn.fanui-var("space-2");
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-sm");
+    background-color: fn.fanui-var("color-surface-sunken");
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text");
+  }
+
+  &__cols {
+    display: flex;
+    max-height: 280px;
+  }
+
+  &__col {
+    flex: 0 0 auto;
+    width: 180px;
+    max-height: 280px;
+    overflow-y: auto;
+    padding: 4px;
+    border-inline-end: 1px solid fn.fanui-var("color-border-subtle");
+    @include mx.fanui-scrollbar(6px);
+
+    &:last-child { border-inline-end: 0; }
+  }
+
+  &__opt {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    width: 100%;
+    padding: 7px 10px;
+    border: 0;
+    border-radius: fn.fanui-var("radius-sm");
+    background-color: transparent;
+    font-size: fn.fanui-var("font-size-sm");
+    text-align: start;
+    color: fn.fanui-var("color-text");
+    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(); }
+
+    &.is-active {
+      color: fn.fanui-var("primary-ink");
+      background-color: fn.fanui-var("primary-soft");
+      font-weight: fn.fanui-var("font-weight-semibold");
+    }
+
+    .fanui-cascader__arrow { font-size: 10px; color: fn.fanui-var("color-text-subtle"); }
+  }
+
+  &__breadcrumb {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+    margin-top: fn.fanui-var("space-2");
+    padding-top: fn.fanui-var("space-2");
+    border-top: 1px solid fn.fanui-var("color-border-subtle");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+
+    b { color: fn.fanui-var("color-text-strong"); font-weight: fn.fanui-var("font-weight-semibold"); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 7. 树形控件 tree
+// -----------------------------------------------------------------------------
+
+.fanui-tree {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: fn.fanui-var("font-size-sm");
+  color: fn.fanui-var("color-text");
+
+  ul {
+    margin: 0;
+    padding: 0 0 0 20px;
+    list-style: none;
+  }
+
+  li { position: relative; }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 8px;
+    border-radius: fn.fanui-var("radius-sm");
+    cursor: pointer;
+    user-select: none;
+    @include mx.fanui-transition((background-color), v.$fanui-duration-fast);
+
+    &:hover { background-color: fn.fanui-var("color-hover"); }
+    &.is-selected {
+      color: fn.fanui-var("primary-ink");
+      background-color: fn.fanui-var("primary-soft");
+    }
+  }
+
+  &__caret {
+    display: grid;
+    place-items: center;
+    width: 18px;
+    height: 18px;
+    flex: 0 0 auto;
+    border: 0;
+    border-radius: fn.fanui-var("radius-sm");
+    background-color: transparent;
+    color: fn.fanui-var("color-text-subtle");
+    font-size: 9px;
+    cursor: pointer;
+    transition: transform 0.15s var(--fanui-ease-out, ease-out);
+    visibility: hidden; // 叶子节点隐藏但占位对齐
+
+    &.is-expandable { visibility: visible; }
+    &.is-open { transform: rotate(90deg); }
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+  }
+
+  &__check {
+    flex: 0 0 auto;
+    width: 15px;
+    height: 15px;
+    accent-color: fn.fanui-var("primary");
+    cursor: pointer;
+  }
+
+  &__icon { flex: 0 0 auto; color: fn.fanui-var("primary"); font-size: 13px; }
+  &__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  &__badge {
+    flex: 0 0 auto;
+    padding: 1px 7px;
+    font-size: 10px;
+    color: fn.fanui-var("color-text-subtle");
+    background-color: fn.fanui-var("color-surface-sunken");
+    border-radius: fn.fanui-var("radius-full");
+  }
+
+  li.is-collapsed > ul { display: none; }
+
+  // 半选态（indeterminate 由 JS 设置属性）
+  &__check:indeterminate { opacity: 1; }
+}
+
+// -----------------------------------------------------------------------------
+// 8. 穿梭框 transfer
+// -----------------------------------------------------------------------------
+
+.fanui-transfer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: fn.fanui-var("space-3");
+  align-items: center;
+  width: 100%;
+
+  @include mx.fanui-media-down("md") {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+
+  &__panel {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 220px;
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-lg");
+    background-color: fn.fanui-var("color-surface");
+    overflow: hidden;
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-2");
+    padding: fn.fanui-var("space-2") fn.fanui-var("space-3");
+    border-bottom: 1px solid fn.fanui-var("color-border-subtle");
+    background-color: fn.fanui-var("color-surface-sunken");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__title { font-weight: fn.fanui-var("font-weight-semibold"); color: fn.fanui-var("color-text-strong"); }
+
+  &__search {
+    width: 100%;
+    padding: 7px 10px;
+    border: 0;
+    border-bottom: 1px solid fn.fanui-var("color-border-subtle");
+    background-color: fn.fanui-var("color-surface");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text");
+  }
+
+  &__list {
+    max-height: 260px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 4px;
+    list-style: none;
+    @include mx.fanui-scrollbar(6px);
+  }
+
+  &__opt {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px;
+    border-radius: fn.fanui-var("radius-sm");
+    cursor: pointer;
+    @include mx.fanui-transition((background-color), v.$fanui-duration-fast);
+
+    &:hover { background-color: fn.fanui-var("color-hover"); }
+    &.is-selected { background-color: fn.fanui-var("primary-soft"); }
+    // C1：禁用态不要用整体 opacity 压暗 —— 那会把文字一起变淡到 1.5:1 左右。
+    // 改为「底色 + 文字令牌」显式表达禁用语义，文字仍保持 AA 可读。
+    &.is-disabled {
+      pointer-events: none;
+      background-color: fn.fanui-var("color-disabled-bg");
+      color: fn.fanui-var("color-disabled-text");
+
+      .fanui-transfer__opt-label,
+      .fanui-transfer__opt-tag { color: fn.fanui-var("color-disabled-text"); }
+    }
+  }
+
+  &__opt-check { accent-color: fn.fanui-var("primary"); flex: 0 0 auto; }
+  &__opt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  &__opt-tag { flex: 0 0 auto; font-size: 10px; color: fn.fanui-var("color-text-subtle"); }
+
+  &__empty {
+    padding: fn.fanui-var("space-5") fn.fanui-var("space-3");
+    text-align: center;
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+
+    @include mx.fanui-media-down("md") { flex-direction: row; }
+  }
+
+  &__btn {
+    display: grid;
+    place-items: center;
+    width: 36px;
+    height: 36px;
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-md");
+    background-color: fn.fanui-var("color-surface");
+    color: fn.fanui-var("color-text-muted");
+    font-size: 14px;
+    cursor: pointer;
+    @include mx.fanui-transition((background-color, color, border-color), v.$fanui-duration-fast);
+
+    &:hover:not(:disabled) {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      border-color: fn.fanui-var("primary");
+    }
+    &:disabled { opacity: 0.4; pointer-events: none; }
+    &:focus-visible { @include mx.fanui-focus-ring(); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 9. 簇状布局 cluster（A8）
+// -----------------------------------------------------------------------------
+
+.fanui-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--fanui-cluster-gap, #{fn.fanui-var("space-3")});
+  // 负外边距抵消首尾 gap，保证与容器边缘对齐
+  margin-inline: calc(var(--fanui-cluster-gap, #{fn.fanui-var("space-3")}) * -0.5);
+
+  > * { margin-inline: calc(var(--fanui-cluster-gap, #{fn.fanui-var("space-3")}) * 0.5); }
+
+  &--center { justify-content: center; }
+  &--between { justify-content: space-between; }
+  &--end { justify-content: flex-end; }
+  &--tight { --fanui-cluster-gap: #{fn.fanui-var("space-2")}; }
+  &--loose { --fanui-cluster-gap: #{fn.fanui-var("space-5")}; }
+}
+
+// -----------------------------------------------------------------------------
+// 10. 客户 Logo 墙 logo-cloud（A9）
+// -----------------------------------------------------------------------------
+
+.fanui-logo-cloud {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--fanui-logo-min, 150px), 1fr));
+  gap: fn.fanui-var("space-4");
+  align-items: stretch;
+
+  &__item {
+    display: grid;
+    place-items: center;
+    min-height: 72px;
+    padding: fn.fanui-var("space-4");
+    border: 1px solid fn.fanui-var("color-border-subtle");
+    border-radius: fn.fanui-var("radius-lg");
+    background-color: fn.fanui-var("color-surface");
+    font-weight: fn.fanui-var("font-weight-bold");
+    letter-spacing: fn.fanui-var("tracking-wide");
+    // C1：文字用令牌（AA 达标），「淡化」只作用在图片上 —— 避免整体 opacity
+    // 把品牌名文字一起压到 3:1 以下。
+    color: fn.fanui-var("color-text-subtle");
+    @include mx.fanui-transition((filter, opacity, transform, box-shadow), v.$fanui-duration-base);
+
+    img {
+      max-height: 32px;
+      max-width: 100%;
+      object-fit: contain;
+      opacity: 0.62;
+      filter: grayscale(1);
+      @include mx.fanui-transition((filter, opacity), v.$fanui-duration-base);
+    }
+
+    &:hover {
+      color: fn.fanui-var("primary");
+      transform: translateY(-2px);
+      box-shadow: fn.fanui-var("shadow-md");
+
+      img { opacity: 1; filter: none; }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 11. 跳转主内容 skip-link（C4 无障碍）
+// -----------------------------------------------------------------------------
+// 统一实现在 base/_reset.scss（避免双实现互相覆盖）；
+// 此处仅保留说明：键盘 Tab 首个可达元素，聚焦后悬浮于左上角，点击跳转 #main。
+
+// -----------------------------------------------------------------------------
+// 12. 降级：减少动效
+// -----------------------------------------------------------------------------
+
+@include mx.fanui-motion-safe() {
+  .fanui-loading-bar--indeterminate .fanui-loading-bar__inner {
+    animation: none;
+    width: 100% !important;
+  }
+}