@zhang_jifan/fanui 2.1.0

package/src/components/_dashboard.scss

@@ -0,0 +1,950 @@
+// =============================================================================
+// fanUI · 中后台 / 数据场景组件 (Dashboard)
+// -----------------------------------------------------------------------------
+//   .fanui-kpi        指标卡（数值 + 环比 + 迷你趋势 + 目标进度）
+//   .fanui-bars       CSS 柱状图（无需图表库，随主题色联动）
+//   .fanui-donut      环形图（conic-gradient 实现）
+//   .fanui-legend     图例
+//   .fanui-usage      配额 / 用量进度（含阈值变色）
+//   .fanui-kanban     看板（列 + 卡 + 拖拽态）
+//   .fanui-activity   动态流
+//   .fanui-notify     通知中心
+//   .fanui-filter-bar 筛选栏（搜索 + 筛选胶囊 + 视图切换）
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 指标卡
+// -----------------------------------------------------------------------------
+
+.fanui-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-5");
+  border-radius: fn.fanui-var("radius-xl");
+  @include mx.fanui-liquid-glass();
+  @include mx.fanui-transition(transform, v.$fanui-duration-base);
+
+  &:hover { transform: translateY(-2px); }
+
+  &__head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+  }
+
+  &__label {
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__icon {
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    flex: 0 0 auto;
+    border-radius: fn.fanui-var("radius-md");
+    color: fn.fanui-var("primary");
+    background-color: fn.fanui-var("primary-soft");
+    font-size: fn.fanui-var("font-size-md");
+  }
+
+  &__value {
+    display: flex;
+    align-items: baseline;
+    gap: fn.fanui-var("space-2");
+    font-size: clamp(1.5rem, 2.4vw, 2rem);
+    font-weight: fn.fanui-var("font-weight-bold");
+    line-height: 1.15;
+    letter-spacing: fn.fanui-var("tracking-tight");
+    font-variant-numeric: tabular-nums;
+    color: fn.fanui-var("color-text-strong");
+
+    small {
+      font-size: fn.fanui-var("font-size-sm");
+      font-weight: fn.fanui-var("font-weight-normal");
+      color: fn.fanui-var("color-text-subtle");
+    }
+  }
+
+  &__delta {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 1px 7px;
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    border-radius: fn.fanui-var("radius-full");
+    font-variant-numeric: tabular-nums;
+
+    // 中国市场惯例：涨为红、跌为绿
+    &--up {
+      color: fn.fanui-var("danger-ink");
+      background-color: fn.fanui-var("danger-soft");
+    }
+
+    &--down {
+      color: fn.fanui-var("success-ink");
+      background-color: fn.fanui-var("success-soft");
+    }
+
+    &--flat {
+      color: fn.fanui-var("color-text-muted");
+      background-color: fn.fanui-var("color-surface-sunken");
+    }
+  }
+
+  &__foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  // 迷你趋势（用 CSS 柱渲染，免图表库）
+  &__spark {
+    display: flex;
+    align-items: flex-end;
+    gap: 2px;
+    height: 28px;
+    margin-top: fn.fanui-var("space-1");
+  }
+
+  &__spark-bar {
+    flex: 1 1 0;
+    min-width: 2px;
+    height: var(--fanui-spark-h, 40%);
+    border-radius: 2px;
+    background-image: linear-gradient(to top, var(--fanui-primary), var(--fanui-primary-vivid));
+    opacity: 0.85;
+    @include mx.fanui-transition((height, opacity), v.$fanui-duration-slow, v.$fanui-ease-spring);
+
+    &:last-child { opacity: 1; }
+  }
+
+  &:hover &__spark-bar { opacity: 1; }
+
+  &--accent &__spark-bar { background-image: linear-gradient(to top, var(--fanui-accent), var(--fanui-accent-vivid)); }
+  &--accent &__icon { color: fn.fanui-var("accent"); background-color: fn.fanui-var("accent-soft"); }
+  &--success &__spark-bar { background-image: linear-gradient(to top, var(--fanui-success), var(--fanui-success-vivid)); }
+  &--success &__icon { color: fn.fanui-var("success"); background-color: fn.fanui-var("success-soft"); }
+  &--warning &__spark-bar { background-image: linear-gradient(to top, var(--fanui-warning), var(--fanui-warning-vivid)); }
+  &--warning &__icon { color: fn.fanui-var("warning"); background-color: fn.fanui-var("warning-soft"); }
+  &--danger &__spark-bar { background-image: linear-gradient(to top, var(--fanui-danger), var(--fanui-danger-vivid)); }
+  &--danger &__icon { color: fn.fanui-var("danger"); background-color: fn.fanui-var("danger-soft"); }
+
+  // 紧凑版（用于密集看板）
+  &--compact {
+    padding: fn.fanui-var("space-4");
+    gap: fn.fanui-var("space-2");
+
+    .fanui-kpi__value { font-size: fn.fanui-var("font-size-xl"); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 柱状图
+// -----------------------------------------------------------------------------
+
+.fanui-bars {
+  --fanui-bars-height: 180px;
+
+  display: flex;
+  align-items: flex-end;
+  gap: var(--fanui-bars-gap, 6px);
+  height: var(--fanui-bars-height);
+  padding-top: fn.fanui-var("space-4");
+
+  &__group {
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    height: 100%;
+  }
+
+  &__stack {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 2px;
+    width: 100%;
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  &__bar {
+    position: relative;
+    width: 100%;
+    max-width: var(--fanui-bars-width, 28px);
+    height: var(--fanui-bar-h, 50%);
+    border-radius: fn.fanui-var("radius-sm") fn.fanui-var("radius-sm") 2px 2px;
+    background-image: linear-gradient(to top, var(--fanui-bar-c1, var(--fanui-primary)), var(--fanui-bar-c2, var(--fanui-primary-vivid)));
+    transform-origin: bottom center;
+    animation: fanui-bar-grow 520ms v.$fanui-ease-out both;
+    @include mx.fanui-transition((opacity, filter), v.$fanui-duration-fast);
+
+    &:hover { filter: brightness(1.08); }
+  }
+
+  &__group:hover &__bar { opacity: 0.72; }
+  &__group:hover &__bar:hover,
+  &__bar:hover { opacity: 1; }
+
+  &__label {
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+    white-space: nowrap;
+    @include mx.fanui-truncate(1);
+    max-width: 100%;
+  }
+
+  // 数据点提示
+  &__tip {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%) translateY(4px);
+    padding: 3px 8px;
+    font-size: fn.fanui-var("font-size-xs");
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    color: fn.fanui-var("color-text-inverse");
+    background-color: fn.fanui-var("color-text-strong");
+    border-radius: fn.fanui-var("radius-sm");
+    opacity: 0;
+    pointer-events: none;
+    @include mx.fanui-transition((opacity, transform), v.$fanui-duration-fast);
+  }
+
+  &__bar:hover &__tip { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+  // 网格线
+  &__grid {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: fn.fanui-var("space-4") 0 0;
+      pointer-events: none;
+      background-image: repeating-linear-gradient(
+        to top,
+        fn.fanui-var("color-border-subtle") 0 1px,
+        transparent 1px 25%
+      );
+      opacity: 0.7;
+    }
+  }
+
+  &--horizontal {
+    flex-direction: column;
+    align-items: stretch;
+    height: auto;
+
+    .fanui-bars__group { flex-direction: row; align-items: center; height: auto; gap: fn.fanui-var("space-3"); }
+    .fanui-bars__stack { align-items: center; height: 22px; }
+    .fanui-bars__bar { height: 12px !important; max-width: none; width: var(--fanui-bar-h, 50%); border-radius: fn.fanui-var("radius-full"); }
+    .fanui-bars__label { min-width: 84px; text-align: start; }
+  }
+}
+
+@keyframes fanui-bar-grow {
+  from { transform: scaleY(0); opacity: 0; }
+  to   { transform: scaleY(1); opacity: 1; }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 环形图
+// -----------------------------------------------------------------------------
+
+.fanui-donut {
+  --fanui-donut-value: 68%;
+  --fanui-donut-size: 148px;
+  --fanui-donut-thickness: 14px;
+  --fanui-donut-c1: var(--fanui-primary);
+  --fanui-donut-c2: var(--fanui-primary-vivid);
+
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: var(--fanui-donut-size);
+  height: var(--fanui-donut-size);
+  border-radius: fn.fanui-var("radius-full");
+  background-image: conic-gradient(
+    from -90deg,
+    var(--fanui-donut-c1) 0%,
+    var(--fanui-donut-c2) var(--fanui-donut-value),
+    fn.fanui-var("color-border") var(--fanui-donut-value),
+    fn.fanui-var("color-border") 100%
+  );
+
+  // 中心挖空
+  &::before {
+    content: "";
+    position: absolute;
+    inset: var(--fanui-donut-thickness);
+    border-radius: fn.fanui-var("radius-full");
+    background-color: fn.fanui-var("color-surface");
+  }
+
+  &__center {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    text-align: center;
+  }
+
+  &__value {
+    font-size: fn.fanui-var("font-size-2xl");
+    font-weight: fn.fanui-var("font-weight-bold");
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: fn.fanui-var("tracking-tight");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__label {
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &--sm { --fanui-donut-size: 96px; --fanui-donut-thickness: 10px; }
+  &--lg { --fanui-donut-size: 200px; --fanui-donut-thickness: 18px; }
+  &--accent { --fanui-donut-c1: var(--fanui-accent); --fanui-donut-c2: var(--fanui-accent-vivid); }
+  &--success { --fanui-donut-c1: var(--fanui-success); --fanui-donut-c2: var(--fanui-success-vivid); }
+  &--warning { --fanui-donut-c1: var(--fanui-warning); --fanui-donut-c2: var(--fanui-warning-vivid); }
+  &--danger { --fanui-donut-c1: var(--fanui-danger); --fanui-donut-c2: var(--fanui-danger-vivid); }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 图例
+// -----------------------------------------------------------------------------
+
+.fanui-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: fn.fanui-var("space-3") fn.fanui-var("space-4");
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: fn.fanui-var("font-size-xs");
+  color: fn.fanui-var("color-text-muted");
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+  }
+
+  &__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 3px;
+    background-color: var(--fanui-legend-color, var(--fanui-primary));
+    flex: 0 0 auto;
+  }
+
+  &__value {
+    font-variant-numeric: tabular-nums;
+    color: fn.fanui-var("color-text-strong");
+    font-weight: fn.fanui-var("font-weight-medium");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 用量 / 配额
+// -----------------------------------------------------------------------------
+
+.fanui-usage {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-2");
+
+  &__head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__value {
+    font-variant-numeric: tabular-nums;
+    color: fn.fanui-var("color-text-strong");
+    font-weight: fn.fanui-var("font-weight-semibold");
+  }
+
+  &__track {
+    height: 8px;
+    border-radius: fn.fanui-var("radius-full");
+    background-color: fn.fanui-var("color-surface-sunken");
+    overflow: hidden;
+  }
+
+  &__bar {
+    height: 100%;
+    width: var(--fanui-usage-value, 60%);
+    border-radius: inherit;
+    background-image: linear-gradient(to right, var(--fanui-primary), var(--fanui-primary-vivid));
+    @include mx.fanui-transition((width, background-color), v.$fanui-duration-slow, v.$fanui-ease-out);
+  }
+
+  // 阈值变色：越界即预警
+  &--warning &__bar { background-image: linear-gradient(to right, var(--fanui-warning), var(--fanui-warning-vivid)); }
+  &--danger &__bar { background-image: linear-gradient(to right, var(--fanui-danger), var(--fanui-danger-vivid)); }
+
+  &--striped &__bar {
+    background-image: linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.18) 25%, transparent 25%,
+        transparent 50%, rgba(255, 255, 255, 0.18) 50%,
+        rgba(255, 255, 255, 0.18) 75%, transparent 75%, transparent
+      ),
+      linear-gradient(to right, var(--fanui-primary), var(--fanui-primary-vivid));
+    background-size: 1rem 1rem, 100% 100%;
+    animation: fanui-stripes 1s linear infinite;
+  }
+}
+
+@keyframes fanui-stripes {
+  from { background-position: 0 0, 0 0; }
+  to   { background-position: 1rem 0, 0 0; }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 看板
+// -----------------------------------------------------------------------------
+
+.fanui-kanban {
+  display: flex;
+  gap: fn.fanui-var("space-4");
+  align-items: flex-start;
+  overflow-x: auto;
+  padding-bottom: fn.fanui-var("space-3");
+  @include mx.fanui-scrollbar(8px);
+
+  &__column {
+    flex: 0 0 288px;
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-3");
+    padding: fn.fanui-var("space-3");
+    border-radius: fn.fanui-var("radius-xl");
+    background-color: fn.fanui-var("color-surface-sunken");
+    @include mx.fanui-transition(background-color, v.$fanui-duration-fast);
+
+    &.is-dragover {
+      background-color: fn.fanui-var("primary-soft");
+      box-shadow: inset 0 0 0 2px fn.fanui-var("primary-border");
+    }
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-2");
+    padding-inline: fn.fanui-var("space-1");
+  }
+
+  &__title {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+
+    &::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: fn.fanui-var("radius-full");
+      background-color: var(--fanui-column-color, var(--fanui-primary));
+    }
+  }
+
+  &__count {
+    min-width: 20px;
+    padding: 0 6px;
+    font-size: fn.fanui-var("font-size-xs");
+    line-height: 18px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    color: fn.fanui-var("color-text-muted");
+    background-color: fn.fanui-var("color-surface");
+    border-radius: fn.fanui-var("radius-full");
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    min-height: 24px;
+  }
+
+  &__card {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+    padding: fn.fanui-var("space-3");
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-lg");
+    background-color: fn.fanui-var("color-surface");
+    cursor: grab;
+    @include mx.fanui-transition((transform, box-shadow, opacity, border-color), v.$fanui-duration-fast);
+
+    &:hover {
+      transform: translateY(-1px);
+      border-color: fn.fanui-var("primary-border");
+      box-shadow: fn.fanui-var("shadow-md");
+    }
+
+    &:active { cursor: grabbing; }
+
+    &.is-dragging {
+      opacity: 0.5;
+      transform: rotate(1.5deg) scale(0.98);
+      border-style: dashed;
+    }
+
+    &.is-drop-target {
+      border-color: fn.fanui-var("primary");
+      box-shadow: 0 0 0 3px fn.fanui-var("primary-ring");
+    }
+  }
+
+  &__card-title {
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-medium");
+    line-height: fn.fanui-var("line-height-snug");
+    color: fn.fanui-var("color-text");
+  }
+
+  &__card-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__labels {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  &__label {
+    padding: 1px 7px;
+    font-size: 11px;
+    border-radius: fn.fanui-var("radius-full");
+    background-color: var(--fanui-label-bg, var(--fanui-primary-soft));
+    color: var(--fanui-label-fg, var(--fanui-primary-ink));
+  }
+
+  &__add {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    padding: fn.fanui-var("space-2") fn.fanui-var("space-3");
+    border: 1px dashed fn.fanui-var("color-border-strong");
+    border-radius: fn.fanui-var("radius-lg");
+    background: transparent;
+    font: inherit;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+    cursor: pointer;
+    @include mx.fanui-transition((border-color, color, background-color), v.$fanui-duration-fast);
+
+    &:hover {
+      border-color: fn.fanui-var("primary");
+      color: fn.fanui-var("primary");
+      background-color: fn.fanui-var("primary-soft");
+    }
+  }
+
+  &__avatars {
+    display: flex;
+
+    > * {
+      width: 22px;
+      height: 22px;
+      border-radius: fn.fanui-var("radius-full");
+      border: 2px solid fn.fanui-var("color-surface");
+      margin-inline-start: -6px;
+      display: grid;
+      place-items: center;
+      font-size: 10px;
+      background-color: fn.fanui-var("primary-soft-2");
+      color: fn.fanui-var("primary-ink");
+
+      &:first-child { margin-inline-start: 0; }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 7. 动态流
+// -----------------------------------------------------------------------------
+
+.fanui-activity {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-4");
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  &__item {
+    position: relative;
+    display: flex;
+    gap: fn.fanui-var("space-3");
+    padding-inline-start: fn.fanui-var("space-1");
+
+    // 连接线
+    &:not(:last-child)::before {
+      content: "";
+      position: absolute;
+      inset-block: 26px calc(#{fn.fanui-var("space-4")} * -1);
+      inset-inline-start: 13px;
+      width: 1px;
+      background-color: fn.fanui-var("color-border");
+    }
+  }
+
+  &__icon {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    flex: 0 0 auto;
+    border-radius: fn.fanui-var("radius-full");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("primary-fg");
+    background-color: fn.fanui-var("primary");
+    box-shadow: 0 0 0 3px fn.fanui-var("color-surface");
+  }
+
+  &__body { flex: 1 1 auto; min-width: 0; }
+
+  &__text {
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-snug");
+    color: fn.fanui-var("color-text");
+
+    strong { font-weight: fn.fanui-var("font-weight-semibold"); color: fn.fanui-var("color-text-strong"); }
+    a { color: fn.fanui-var("primary"); text-decoration: none; &:hover { text-decoration: underline; } }
+  }
+
+  &__time {
+    display: block;
+    margin-top: 2px;
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__quote {
+    margin-top: fn.fanui-var("space-2");
+    padding: fn.fanui-var("space-2") fn.fanui-var("space-3");
+    border-inline-start: 2px 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-xs");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &--compact {
+    gap: fn.fanui-var("space-3");
+
+    .fanui-activity__icon { width: 22px; height: 22px; }
+    .fanui-activity__item:not(:last-child)::before { inset-inline-start: 11px; inset-block-start: 22px; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 8. 通知中心
+// -----------------------------------------------------------------------------
+
+.fanui-notify {
+  position: relative;
+
+  &__trigger {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 36px;
+    height: 36px;
+    border: 1px solid transparent;
+    border-radius: fn.fanui-var("radius-md");
+    background: 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"); }
+  }
+
+  &__dot {
+    position: absolute;
+    inset-block-start: 6px;
+    inset-inline-end: 6px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    display: grid;
+    place-items: center;
+    font-size: 10px;
+    font-weight: fn.fanui-var("font-weight-semibold");
+    line-height: 1;
+    color: fn.fanui-var("danger-fg");
+    background-color: fn.fanui-var("danger");
+    border-radius: fn.fanui-var("radius-full");
+    box-shadow: 0 0 0 2px fn.fanui-var("color-bg");
+
+    // 有未读时轻微脉冲提示
+    &.is-pulse::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-color: inherit;
+      animation: fanui-notify-pulse 1.8s v.$fanui-ease-out infinite;
+    }
+  }
+
+  &__panel {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: calc(100% + 8px);
+    z-index: fn.fanui-var("z-dropdown");
+    width: 360px;
+    max-width: calc(100vw - 32px);
+    max-height: 440px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border: 1px solid fn.fanui-var("glass-border", #{fn.fanui-var("color-border")});
+    border-radius: fn.fanui-var("radius-xl");
+    background-color: fn.fanui-var("color-overlay");
+    box-shadow: fn.fanui-var("shadow-2xl");
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-6px) scale(0.98);
+    transform-origin: top right;
+    @include mx.fanui-transition((opacity, transform, visibility), v.$fanui-duration-base, v.$fanui-ease-spring);
+
+    &.is-open { opacity: 1; visibility: visible; transform: none; }
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    padding: fn.fanui-var("space-3") fn.fanui-var("space-4");
+    border-bottom: 1px solid fn.fanui-var("color-border-subtle");
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__list {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    margin: 0;
+    padding: fn.fanui-var("space-1");
+    list-style: none;
+    @include mx.fanui-scrollbar(6px);
+  }
+
+  &__item {
+    display: flex;
+    gap: fn.fanui-var("space-3");
+    padding: fn.fanui-var("space-3");
+    border-radius: fn.fanui-var("radius-md");
+    cursor: pointer;
+    @include mx.fanui-transition(background-color, v.$fanui-duration-fast);
+
+    &:hover { background-color: fn.fanui-var("color-hover"); }
+
+    &.is-unread {
+      background-color: fn.fanui-var("primary-soft");
+
+      .fanui-notify__item-title::after {
+        content: "";
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        margin-inline-start: 6px;
+        border-radius: fn.fanui-var("radius-full");
+        background-color: fn.fanui-var("primary");
+        vertical-align: middle;
+      }
+    }
+  }
+
+  &__item-icon {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    flex: 0 0 auto;
+    border-radius: fn.fanui-var("radius-md");
+    background-color: fn.fanui-var("color-surface");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__item-title {
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-medium");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__item-desc {
+    margin-top: 2px;
+    font-size: fn.fanui-var("font-size-xs");
+    line-height: fn.fanui-var("line-height-snug");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__item-time {
+    margin-top: 4px;
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__foot {
+    padding: fn.fanui-var("space-2") fn.fanui-var("space-4");
+    border-top: 1px solid fn.fanui-var("color-border-subtle");
+    text-align: center;
+    font-size: fn.fanui-var("font-size-sm");
+
+    a { color: fn.fanui-var("primary"); text-decoration: none; }
+  }
+}
+
+@keyframes fanui-notify-pulse {
+  0%   { opacity: 0.6; transform: scale(1); }
+  70%  { opacity: 0; transform: scale(2.2); }
+  100% { opacity: 0; transform: scale(2.2); }
+}
+
+// -----------------------------------------------------------------------------
+// 9. 筛选栏
+// -----------------------------------------------------------------------------
+
+.fanui-filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-3");
+  border-radius: fn.fanui-var("radius-xl");
+  @include mx.fanui-liquid-glass();
+  --fanui-glass-radius: #{fn.fanui-var("radius-xl")};
+
+  &__search {
+    position: relative;
+    flex: 1 1 240px;
+    min-width: 200px;
+
+    input { @include mx.fanui-form-control(); padding-inline-start: 34px; }
+
+    svg,
+    .fanui-icon {
+      position: absolute;
+      inset-inline-start: 10px;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+      color: fn.fanui-var("color-text-subtle");
+      pointer-events: none;
+    }
+  }
+
+  &__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: fn.fanui-var("space-2");
+  }
+
+  &__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-1");
+    padding: 4px 12px;
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-full");
+    background-color: fn.fanui-var("color-surface");
+    font: inherit;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+    cursor: pointer;
+    @include mx.fanui-transition((color, background-color, border-color, transform), v.$fanui-duration-fast);
+
+    &:hover { border-color: fn.fanui-var("primary-border"); color: fn.fanui-var("primary-ink"); }
+    &:active { transform: scale(0.97); }
+
+    &.is-active {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      border-color: fn.fanui-var("primary");
+    }
+
+    &-count {
+      font-size: fn.fanui-var("font-size-xs");
+      opacity: 0.75;
+      font-variant-numeric: tabular-nums;
+    }
+  }
+
+  &__spacer { flex: 1 1 auto; }
+
+  &__views {
+    display: inline-flex;
+    padding: 2px;
+    border-radius: fn.fanui-var("radius-md");
+    background-color: fn.fanui-var("glass-divider");
+
+    button {
+      display: grid;
+      place-items: center;
+      width: 30px;
+      height: 26px;
+      border: 0;
+      border-radius: fn.fanui-var("radius-sm");
+      background: transparent;
+      color: fn.fanui-var("color-text-muted");
+      cursor: pointer;
+      @include mx.fanui-transition((background-color, color), v.$fanui-duration-fast);
+
+      &.is-active {
+        background-color: fn.fanui-var("color-surface");
+        color: fn.fanui-var("primary");
+        box-shadow: fn.fanui-var("shadow-xs");
+      }
+    }
+  }
+}