@zhang_jifan/fanui 2.1.0

package/src/components/_nav.scss

@@ -0,0 +1,480 @@
+// =============================================================================
+// fanUI · 导航 Navigation
+// -----------------------------------------------------------------------------
+// .fanui-navbar        顶部导航栏（含 brand / menu / actions / toggle）
+// .fanui-nav           导航菜单（水平 / 垂直）
+// .fanui-nav__item     菜单项（.is-active 选中态）
+// .fanui-sidebar       侧边栏
+// .fanui-breadcrumb    面包屑
+// .fanui-menu          多级菜单（可嵌套）
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 顶部导航栏 Navbar
+// -----------------------------------------------------------------------------
+
+.fanui-navbar {
+  --fanui-navbar-height: 56px;
+  --fanui-navbar-bg: #{fn.fanui-var("color-surface")};
+  --fanui-navbar-border: #{fn.fanui-var("color-border")};
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-4");
+  min-height: var(--fanui-navbar-height);
+  padding: 0 fn.fanui-var("container-px", 16px);
+  background-color: var(--fanui-navbar-bg);
+  border-bottom: 1px solid var(--fanui-navbar-border);
+  box-sizing: border-box;
+  z-index: fn.fanui-var("z-sticky", v.$fanui-zindex-sticky);
+
+  &--sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  &--fixed {
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  &--glass {
+    @include mx.fanui-glass(fn.fanui-alpha(#ffffff, 0.78), 14px);
+    border-bottom-color: fn.fanui-alpha(#0f172a, 0.06);
+
+    :root[data-fanui-theme="dark"] & {
+      @include mx.fanui-glass(fn.fanui-alpha(#0f172a, 0.72), 14px);
+      border-bottom-color: fn.fanui-alpha(#ffffff, 0.08);
+    }
+  }
+
+  &--dark {
+    --fanui-navbar-bg: #{fn.fanui-palette(v.$fanui-palette, "neutral", 900)};
+    --fanui-navbar-border: rgba(255, 255, 255, 0.08);
+    color: #f1f5f9;
+  }
+
+  &--borderless { border-bottom-color: transparent; }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-4");
+    width: 100%;
+    max-width: var(--fanui-navbar-max-width, none);
+    margin: 0 auto;
+  }
+
+  &__brand {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    flex: 0 0 auto;
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: 700;
+    color: fn.fanui-var("color-text-strong");
+    text-decoration: none;
+    white-space: nowrap;
+    letter-spacing: -0.01em;
+
+    &:hover { text-decoration: none; }
+
+    img, svg { height: 24px; width: auto; }
+  }
+
+  &__menu {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-1");
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+  }
+
+  &__toggle {
+    display: none;
+    flex: 0 0 auto;
+
+    @include mx.fanui-media-down("md") { display: inline-flex; }
+  }
+
+  &__divider {
+    width: 1px;
+    height: 20px;
+    background-color: fn.fanui-var("color-border");
+    flex: 0 0 auto;
+  }
+
+  // 响应式：窄屏菜单折叠
+  @include mx.fanui-media-down("md") {
+    &__menu {
+      display: none;
+
+      &.is-open {
+        display: flex;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        flex-direction: column;
+        align-items: stretch;
+        padding: fn.fanui-var("space-2");
+        background-color: fn.fanui-var("color-surface");
+        border-bottom: 1px solid fn.fanui-var("color-border");
+        box-shadow: fn.fanui-var("shadow-lg");
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 导航菜单 Nav
+// -----------------------------------------------------------------------------
+
+.fanui-nav {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-1");
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  &--pill {
+    padding: 3px;
+    background-color: fn.fanui-var("color-surface-sunken");
+    border-radius: fn.fanui-var("radius-md");
+  }
+
+  &--underline { gap: fn.fanui-var("space-5"); }
+}
+
+.fanui-nav__item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  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;
+  border-radius: fn.fanui-var("radius-base");
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  @include mx.fanui-transition((color, background-color, border-color), v.$fanui-duration-fast);
+
+  &:hover {
+    color: fn.fanui-var("color-text-strong");
+    background-color: fn.fanui-var("color-hover");
+    text-decoration: none;
+  }
+
+  &:focus-visible { @include mx.fanui-focus-ring(); }
+
+  &.is-active,
+  &[aria-current="page"] {
+    color: fn.fanui-var("primary");
+    background-color: fn.fanui-var("primary-soft");
+    font-weight: 600;
+  }
+
+  &.is-disabled,
+  &[aria-disabled="true"] {
+    color: fn.fanui-var("color-disabled-text");
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &__icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-size: 1.1em;
+    line-height: 1;
+  }
+
+  &__badge { margin-inline-start: auto; }
+
+  // 下划线风格
+  .fanui-nav--underline & {
+    padding: 10px 0;
+    background: none;
+    border-radius: 0;
+
+    &:hover { background: none; }
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+      height: 2px;
+      background-color: transparent;
+      border-radius: 2px;
+      @include mx.fanui-transition(background-color, v.$fanui-duration-fast);
+    }
+
+    &.is-active::after,
+    &[aria-current="page"]::after {
+      background-color: fn.fanui-var("primary");
+    }
+  }
+
+  .fanui-nav--vertical & {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .fanui-nav--pill & {
+    &.is-active {
+      color: fn.fanui-var("color-text-strong");
+      background-color: fn.fanui-var("color-surface");
+      box-shadow: fn.fanui-var("shadow-xs");
+    }
+  }
+
+  &--sm { padding: 5px 9px; font-size: fn.fanui-var("font-size-sm"); }
+  &--lg { padding: 11px 16px; font-size: fn.fanui-var("font-size-md"); }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 侧边栏 Sidebar
+// -----------------------------------------------------------------------------
+
+.fanui-sidebar {
+  --fanui-sidebar-width: 240px;
+
+  display: flex;
+  flex-direction: column;
+  width: var(--fanui-sidebar-width);
+  flex: 0 0 auto;
+  padding: fn.fanui-var("space-4") fn.fanui-var("space-3");
+  gap: fn.fanui-var("space-1");
+  background-color: fn.fanui-var("color-surface");
+  border-inline-end: 1px solid fn.fanui-var("color-border");
+  box-sizing: border-box;
+  overflow-y: auto;
+  @include mx.fanui-scrollbar(8px);
+
+  &--end {
+    border-inline-end: 0;
+    border-inline-start: 1px solid fn.fanui-var("color-border");
+  }
+
+  &--sunken { background-color: fn.fanui-var("color-surface-sunken"); }
+  &--bordered-none { border: 0; }
+
+  &__section {
+    margin-top: fn.fanui-var("space-4");
+
+    &:first-child { margin-top: 0; }
+  }
+
+  &__title {
+    padding: fn.fanui-var("space-2") fn.fanui-var("space-3");
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 8px 12px;
+    font-size: fn.fanui-var("font-size-base");
+    color: fn.fanui-var("color-text-muted");
+    text-decoration: none;
+    border-radius: fn.fanui-var("radius-base");
+    cursor: pointer;
+    box-sizing: border-box;
+    @include mx.fanui-transition((color, background-color), v.$fanui-duration-fast);
+
+    &:hover {
+      color: fn.fanui-var("color-text-strong");
+      background-color: fn.fanui-var("color-hover");
+      text-decoration: none;
+    }
+
+    &.is-active {
+      color: fn.fanui-var("primary");
+      background-color: fn.fanui-var("primary-soft");
+      font-weight: 600;
+    }
+
+    &__icon { flex: 0 0 auto; display: inline-flex; width: 18px; justify-content: center; }
+    &__text { flex: 1 1 auto; min-width: 0; @include mx.fanui-truncate(1); }
+    &__badge { flex: 0 0 auto; }
+    &__arrow {
+      flex: 0 0 auto;
+      font-size: 12px;
+      opacity: 0.6;
+      @include mx.fanui-transition(transform, v.$fanui-duration-fast);
+    }
+  }
+
+  // 可折叠
+  &__item[aria-expanded="true"] .fanui-sidebar__item__arrow { transform: rotate(90deg); }
+
+  &__sub {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-inline-start: fn.fanui-var("space-6");
+    margin-top: 2px;
+  }
+
+  &--collapsed { --fanui-sidebar-width: 64px; }
+
+  &--collapsed .fanui-sidebar__item {
+    justify-content: center;
+    padding: 10px 0;
+  }
+
+  &--collapsed .fanui-sidebar__item__text,
+  &--collapsed .fanui-sidebar__title,
+  &--collapsed .fanui-sidebar__item__badge,
+  &--collapsed .fanui-sidebar__item__arrow { display: none; }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 面包屑 Breadcrumb
+// -----------------------------------------------------------------------------
+
+.fanui-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: fn.fanui-var("space-2");
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: fn.fanui-var("font-size-sm");
+  color: fn.fanui-var("color-text-muted");
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+
+    a {
+      color: fn.fanui-var("color-text-muted");
+      text-decoration: none;
+
+      &:hover { color: fn.fanui-var("primary"); text-decoration: none; }
+    }
+  }
+
+  &__item + &__item::before,
+  &__separator {
+    content: "/";
+    color: fn.fanui-var("color-text-subtle");
+    user-select: none;
+  }
+
+  &__item.is-active,
+  &__item[aria-current="page"] {
+    color: fn.fanui-var("color-text-strong");
+    font-weight: 500;
+  }
+
+  &--arrow &__separator { content: "›"; }
+  &--chevron &__item + &__item::before { content: "›"; }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 多级菜单 Menu
+// -----------------------------------------------------------------------------
+
+.fanui-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 160px;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 7px 12px;
+    font-size: fn.fanui-var("font-size-base");
+    color: fn.fanui-var("color-text");
+    text-decoration: none;
+    border-radius: fn.fanui-var("radius-base");
+    cursor: pointer;
+    @include mx.fanui-transition((background-color, color), v.$fanui-duration-fast);
+
+    &:hover {
+      background-color: fn.fanui-var("color-hover");
+      text-decoration: none;
+      color: fn.fanui-var("color-text-strong");
+    }
+
+    &.is-active {
+      color: fn.fanui-var("primary");
+      background-color: fn.fanui-var("primary-soft");
+    }
+
+    &.is-disabled {
+      color: fn.fanui-var("color-disabled-text");
+      pointer-events: none;
+    }
+  }
+
+  &__label { flex: 1 1 auto; min-width: 0; @include mx.fanui-truncate(1); }
+
+  &__shortcut {
+    flex: 0 0 auto;
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+    font-family: fn.fanui-var("font-mono");
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 5px 2px;
+    background-color: fn.fanui-var("color-border-subtle");
+  }
+
+  &__group-title {
+    padding: 8px 12px 4px;
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: 600;
+    color: fn.fanui-var("color-text-subtle");
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+    align-items: center;
+  }
+}