@zhang_jifan/fanui 2.1.0

package/src/components/_blog.scss

@@ -0,0 +1,693 @@
+// =============================================================================
+// fanUI · 博客 / 内容场景组件 (Blog & Content)
+// -----------------------------------------------------------------------------
+//   .fanui-post-card    文章卡片（列表 / 网格 / 横向三种形态）
+//   .fanui-article      正文容器（配合 .fanui-prose 使用）
+//   .fanui-author       作者卡
+//   .fanui-toc          目录（支持 scrollspy 高亮）
+//   .fanui-share        分享条（横向 / 悬浮侧栏）
+//   .fanui-comment      评论区
+//   .fanui-newsletter   订阅框
+//   .fanui-related      相关阅读
+//   .fanui-tag-cloud    标签云
+//   .fanui-read-meta    阅读元信息（作者 · 日期 · 时长）
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 阅读元信息
+// -----------------------------------------------------------------------------
+
+.fanui-read-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: fn.fanui-var("space-2");
+  font-size: fn.fanui-var("font-size-sm");
+  color: fn.fanui-var("color-text-subtle");
+
+  &__dot {
+    width: 3px;
+    height: 3px;
+    border-radius: fn.fanui-var("radius-full");
+    background-color: currentColor;
+    opacity: 0.6;
+  }
+
+  &__author {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    color: fn.fanui-var("color-text-muted");
+    font-weight: fn.fanui-var("font-weight-medium");
+  }
+
+  &__badge {
+    padding: 1px 8px;
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("primary-ink");
+    background-color: fn.fanui-var("primary-soft-2");
+    border-radius: fn.fanui-var("radius-full");
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 2. 文章卡片
+// -----------------------------------------------------------------------------
+
+.fanui-post-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-3");
+  overflow: hidden;
+  border: 1px solid fn.fanui-var("color-border");
+  border-radius: fn.fanui-var("radius-xl");
+  background-color: fn.fanui-var("color-surface");
+  text-decoration: none;
+  color: inherit;
+  @include mx.fanui-transition((transform, box-shadow, border-color), v.$fanui-duration-base);
+
+  &:hover {
+    transform: translateY(-3px);
+    border-color: fn.fanui-var("primary-border");
+    box-shadow: fn.fanui-var("shadow-lg");
+
+    .fanui-post-card__cover img { transform: scale(1.04); }
+    .fanui-post-card__title { color: fn.fanui-var("primary"); }
+  }
+
+  &__cover {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    overflow: hidden;
+    background-image: var(--fanui-brand-grad-soft);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      @include mx.fanui-transition(transform, v.$fanui-duration-slower);
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      box-shadow: inset 0 -1px 0 fn.fanui-alpha(#020617, 0.06);
+    }
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-2");
+    padding: fn.fanui-var("space-5");
+  }
+
+  &__eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    letter-spacing: fn.fanui-var("tracking-wide");
+    text-transform: uppercase;
+    color: fn.fanui-var("primary");
+  }
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-lg");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    line-height: fn.fanui-var("line-height-snug");
+    color: fn.fanui-var("color-text-strong");
+    @include mx.fanui-transition(color, v.$fanui-duration-fast);
+    @include mx.fanui-truncate(2);
+  }
+
+  &__excerpt {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+    @include mx.fanui-truncate(3);
+  }
+
+  &__foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-3");
+    margin-top: auto;
+    padding-top: fn.fanui-var("space-3");
+    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");
+  }
+
+  // 横向版（用于"最新文章"列表）
+  &--horizontal {
+    flex-direction: row;
+    align-items: stretch;
+
+    .fanui-post-card__cover {
+      flex: 0 0 38%;
+      aspect-ratio: auto;
+      min-height: 132px;
+    }
+
+    .fanui-post-card__body { justify-content: center; }
+
+    @include mx.fanui-media-down("sm") {
+      flex-direction: column;
+
+      .fanui-post-card__cover { aspect-ratio: 16 / 9; flex: none; }
+    }
+  }
+
+  // 纯文字版（紧凑列表）
+  &--plain {
+    border: 0;
+    border-radius: 0;
+    border-bottom: 1px solid fn.fanui-var("color-border-subtle");
+    background: transparent;
+
+    &:hover { transform: none; box-shadow: none; }
+
+    .fanui-post-card__body { padding: fn.fanui-var("space-4") 0; }
+  }
+
+  // 玻璃版（叠在图片/渐变之上）
+  &--overlay {
+    position: relative;
+    border: 0;
+    justify-content: flex-end;
+    min-height: 260px;
+    background: linear-gradient(180deg, transparent 30%, fn.fanui-alpha(#020617, 0.72) 100%);
+
+    .fanui-post-card__cover {
+      position: absolute;
+      inset: 0;
+      aspect-ratio: auto;
+
+      &::after {
+        background: linear-gradient(180deg, transparent 24%, fn.fanui-alpha(#020617, 0.78) 100%);
+      }
+    }
+
+    .fanui-post-card__body {
+      position: relative;
+      z-index: 1;
+      color: #ffffff;
+    }
+
+    .fanui-post-card__title,
+    .fanui-post-card__excerpt,
+    .fanui-post-card__eyebrow { color: #ffffff; }
+
+    .fanui-post-card__excerpt { opacity: 0.85; }
+    .fanui-post-card__foot { border-top-color: fn.fanui-alpha(#ffffff, 0.24); color: fn.fanui-alpha(#ffffff, 0.8); }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 正文容器
+// -----------------------------------------------------------------------------
+
+.fanui-article {
+  max-width: var(--fanui-article-width, 720px);
+  margin-inline: auto;
+
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-4");
+    padding-block: fn.fanui-var("space-8") fn.fanui-var("space-6");
+    text-align: center;
+    align-items: center;
+  }
+
+  &__eyebrow {
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    letter-spacing: fn.fanui-var("tracking-wider");
+    text-transform: uppercase;
+    color: fn.fanui-var("primary");
+  }
+
+  &__title {
+    margin: 0;
+    font-size: clamp(1.75rem, 4vw, 2.75rem);
+    font-weight: fn.fanui-var("font-weight-extrabold");
+    line-height: 1.15;
+    letter-spacing: fn.fanui-var("tracking-tight");
+    color: fn.fanui-var("color-text-strong");
+    text-wrap: balance;
+  }
+
+  &__lead {
+    margin: 0;
+    max-width: 620px;
+    font-size: fn.fanui-var("font-size-lg");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+    text-wrap: pretty;
+  }
+
+  &__cover {
+    margin-block: fn.fanui-var("space-6");
+    border-radius: fn.fanui-var("radius-2xl");
+    overflow: hidden;
+
+    img { display: block; width: 100%; height: auto; }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-6");
+    margin-top: fn.fanui-var("space-10");
+    padding-top: fn.fanui-var("space-8");
+    border-top: 1px solid fn.fanui-var("color-border");
+  }
+
+  // 正文内的提示块（呼应 .fanui-prose）
+  &__callout {
+    display: flex;
+    gap: fn.fanui-var("space-3");
+    margin-block: fn.fanui-var("space-6");
+    padding: fn.fanui-var("space-4") fn.fanui-var("space-5");
+    border-inline-start: 3px solid fn.fanui-var("primary");
+    border-radius: fn.fanui-var("radius-md");
+    background-color: fn.fanui-var("primary-soft");
+    color: fn.fanui-var("primary-ink");
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+  }
+
+  // 阅读区右侧留白给悬浮目录
+  &--with-toc {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 240px;
+    gap: fn.fanui-var("space-12");
+    max-width: 1080px;
+
+    @include mx.fanui-media-down("lg") {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 目录（TOC）
+// -----------------------------------------------------------------------------
+
+.fanui-toc {
+  position: sticky;
+  top: calc(#{fn.fanui-var("space-10")} + 60px);
+  align-self: start;
+  max-height: calc(100vh - 140px);
+  overflow-y: auto;
+  padding-inline-start: fn.fanui-var("space-4");
+  border-inline-start: 1px solid fn.fanui-var("color-border");
+  font-size: fn.fanui-var("font-size-sm");
+  @include mx.fanui-scrollbar(6px);
+
+  @include mx.fanui-media-down("lg") {
+    position: static;
+    max-height: none;
+    margin-bottom: fn.fanui-var("space-6");
+  }
+
+  &__title {
+    margin-bottom: fn.fanui-var("space-3");
+    font-size: fn.fanui-var("font-size-xs");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    letter-spacing: fn.fanui-var("tracking-wider");
+    text-transform: uppercase;
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__link {
+    display: block;
+    padding: 5px 10px;
+    border-radius: fn.fanui-var("radius-sm");
+    color: fn.fanui-var("color-text-muted");
+    text-decoration: none;
+    line-height: fn.fanui-var("line-height-snug");
+    border-inline-start: 2px solid transparent;
+    @include mx.fanui-transition((color, background-color, border-color), v.$fanui-duration-fast);
+
+    &:hover { color: fn.fanui-var("color-text"); background-color: fn.fanui-var("color-hover"); }
+
+    &.is-active {
+      color: fn.fanui-var("primary");
+      border-inline-start-color: fn.fanui-var("primary");
+      background-color: fn.fanui-var("primary-soft");
+      font-weight: fn.fanui-var("font-weight-medium");
+    }
+  }
+
+  // 二级目录缩进
+  &__list &__list { margin-inline-start: fn.fanui-var("space-3"); }
+
+  &__progress {
+    margin-top: fn.fanui-var("space-4");
+    padding-top: fn.fanui-var("space-3");
+    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");
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 作者卡
+// -----------------------------------------------------------------------------
+
+.fanui-author {
+  display: flex;
+  gap: fn.fanui-var("space-4");
+  padding: fn.fanui-var("space-5");
+  border-radius: fn.fanui-var("radius-xl");
+  @include mx.fanui-liquid-glass();
+
+  &__avatar {
+    flex: 0 0 auto;
+    width: 56px;
+    height: 56px;
+    border-radius: fn.fanui-var("radius-full");
+    overflow: hidden;
+    background-image: var(--fanui-brand-grad);
+    display: grid;
+    place-items: center;
+    color: #fff;
+    font-weight: fn.fanui-var("font-weight-semibold");
+
+    img { width: 100%; height: 100%; object-fit: cover; }
+  }
+
+  &__body { display: flex; flex-direction: column; gap: fn.fanui-var("space-1"); min-width: 0; }
+
+  &__name {
+    font-size: fn.fanui-var("font-size-md");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__role {
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &__bio {
+    margin: fn.fanui-var("space-1") 0 0;
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__links {
+    display: flex;
+    gap: fn.fanui-var("space-2");
+    margin-top: fn.fanui-var("space-2");
+
+    a {
+      font-size: fn.fanui-var("font-size-xs");
+      color: fn.fanui-var("primary");
+      text-decoration: none;
+
+      &:hover { text-decoration: underline; }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 分享条
+// -----------------------------------------------------------------------------
+
+.fanui-share {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-2");
+
+  &__label {
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+    margin-inline-end: fn.fanui-var("space-1");
+  }
+
+  &__btn {
+    display: grid;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-full");
+    background-color: fn.fanui-var("color-surface");
+    color: fn.fanui-var("color-text-muted");
+    cursor: pointer;
+    text-decoration: none;
+    @include mx.fanui-transition((color, border-color, transform, background-color), v.$fanui-duration-fast);
+
+    &:hover {
+      color: fn.fanui-var("primary-fg");
+      background-color: fn.fanui-var("primary");
+      border-color: fn.fanui-var("primary");
+      transform: translateY(-2px);
+    }
+  }
+
+  // 悬浮竖排（桌面端文章左侧）
+  &--sticky {
+    position: sticky;
+    top: calc(#{fn.fanui-var("space-10")} + 60px);
+    flex-direction: column;
+    align-self: start;
+
+    .fanui-share__label { writing-mode: vertical-rl; margin: 0 0 fn.fanui-var("space-1"); }
+
+    @include mx.fanui-media-down("lg") {
+      position: static;
+      flex-direction: row;
+
+      .fanui-share__label { writing-mode: horizontal-tb; margin: 0 fn.fanui-var("space-1") 0 0; }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 7. 评论区
+// -----------------------------------------------------------------------------
+
+.fanui-comment {
+  display: flex;
+  gap: fn.fanui-var("space-3");
+
+  &__avatar {
+    flex: 0 0 auto;
+    width: 36px;
+    height: 36px;
+    border-radius: fn.fanui-var("radius-full");
+    overflow: hidden;
+    display: grid;
+    place-items: center;
+    background-color: fn.fanui-var("primary-soft-2");
+    color: fn.fanui-var("primary-ink");
+    font-size: fn.fanui-var("font-size-sm");
+    font-weight: fn.fanui-var("font-weight-semibold");
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-1");
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-sm");
+  }
+
+  &__name { font-weight: fn.fanui-var("font-weight-semibold"); color: fn.fanui-var("color-text-strong"); }
+  &__time { font-size: fn.fanui-var("font-size-xs"); color: fn.fanui-var("color-text-subtle"); }
+
+  &__text {
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text");
+  }
+
+  &__actions {
+    display: flex;
+    gap: fn.fanui-var("space-3");
+    margin-top: fn.fanui-var("space-1");
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+
+    button {
+      border: 0;
+      background: transparent;
+      padding: 0;
+      font: inherit;
+      color: inherit;
+      cursor: pointer;
+
+      &:hover { color: fn.fanui-var("primary"); }
+    }
+  }
+
+  &__replies {
+    display: flex;
+    flex-direction: column;
+    gap: fn.fanui-var("space-4");
+    margin-top: fn.fanui-var("space-4");
+    padding-inline-start: fn.fanui-var("space-5");
+    border-inline-start: 2px solid fn.fanui-var("color-border-subtle");
+  }
+
+  &--pinned {
+    padding: fn.fanui-var("space-4");
+    border-radius: fn.fanui-var("radius-lg");
+    background-color: fn.fanui-var("primary-soft");
+  }
+}
+
+.fanui-comment-list {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-6");
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// -----------------------------------------------------------------------------
+// 8. 订阅框
+// -----------------------------------------------------------------------------
+
+.fanui-newsletter {
+  display: flex;
+  flex-direction: column;
+  gap: fn.fanui-var("space-3");
+  padding: fn.fanui-var("space-6");
+  border-radius: fn.fanui-var("radius-2xl");
+  @include mx.fanui-liquid-glass();
+
+  &__title {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-lg");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+
+  &__desc {
+    margin: 0;
+    font-size: fn.fanui-var("font-size-sm");
+    line-height: fn.fanui-var("line-height-relaxed");
+    color: fn.fanui-var("color-text-muted");
+  }
+
+  &__form {
+    display: flex;
+    gap: fn.fanui-var("space-2");
+
+    @include mx.fanui-media-down("sm") { flex-direction: column; }
+  }
+
+  &__input {
+    @include mx.fanui-form-control();
+    flex: 1 1 auto;
+  }
+
+  &__note {
+    font-size: fn.fanui-var("font-size-xs");
+    color: fn.fanui-var("color-text-subtle");
+  }
+
+  &--inline {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: fn.fanui-var("space-6");
+    flex-wrap: wrap;
+
+    .fanui-newsletter__form { flex: 1 1 320px; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 9. 相关阅读 / 标签云
+// -----------------------------------------------------------------------------
+
+.fanui-related {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: fn.fanui-var("space-5");
+
+  &__title {
+    grid-column: 1 / -1;
+    margin: 0 0 fn.fanui-var("space-2");
+    font-size: fn.fanui-var("font-size-lg");
+    font-weight: fn.fanui-var("font-weight-semibold");
+    color: fn.fanui-var("color-text-strong");
+  }
+}
+
+.fanui-tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: fn.fanui-var("space-2");
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: fn.fanui-var("space-1");
+    padding: 4px 12px;
+    font-size: fn.fanui-var("font-size-sm");
+    color: fn.fanui-var("color-text-muted");
+    background-color: fn.fanui-var("color-surface");
+    border: 1px solid fn.fanui-var("color-border");
+    border-radius: fn.fanui-var("radius-full");
+    text-decoration: none;
+    @include mx.fanui-transition((color, border-color, background-color, transform), v.$fanui-duration-fast);
+
+    &:hover {
+      color: fn.fanui-var("primary-ink");
+      background-color: fn.fanui-var("primary-soft");
+      border-color: fn.fanui-var("primary-border");
+      transform: translateY(-1px);
+    }
+
+    &--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.7;
+    font-variant-numeric: tabular-nums;
+  }
+}