cfc/cfc-frontend/components/ArticleBookshelf.vue

<template>
  <view class="bs-section">
    <!-- 书册头部 -->
    <view class="bs-header">
      <view class="bs-header-left">
        <text class="bs-book-icon">&#x1F4DA;</text>
        <view class="bs-header-text">
          <text class="bs-title">推荐阅读</text>
          <text class="bs-subtitle">Knowledge · 知识</text>
        </view>
      </view>
      <view class="bs-header-right" @click="$emit('moreArticles')">
        <text class="bs-more-text">书库</text>
        <text class="bs-more-arrow">&#x203A;</text>
      </view>
    </view>

    <!-- 无数据 -->
    <view v-if="(!articles || articles.length === 0) && !loading" class="bs-empty">
      <text class="bs-empty-text">书册整理中，敬请期待...</text>
    </view>

    <!-- 骨架屏 -->
    <view v-else-if="loading && (!articles || articles.length === 0)" class="bs-shelf-skeleton">
      <view class="bs-skeleton-shelf">
        <view v-for="n in 3" :key="n" class="bs-skeleton-book"></view>
      </view>
    </view>

    <!-- 书册展示区 -->
    <view v-else class="bs-bookcase">
      <!-- 书架装饰线 -->
      <view class="bs-shelf-top-border"></view>

      <!-- 书籍横向滚动（每屏3本） -->
      <scroll-view
        scroll-x
        class="bs-books-scroll"
        :scroll-left="scrollLeft"
        scroll-with-animation
        :show-scrollbar="false"
        @scroll="onScroll"
      >
        <view class="bs-books-inner">
          <!-- 左内边距起始 -->
          <view class="bs-book-spacer"></view>

          <!-- 书籍列表 -->
          <view
            v-for="(article, idx) in displayArticles"
            :key="idx"
            class="bs-book-wrap"
            @click="$emit('articleClick', article)"
          >
            <!-- 竖版封面主体 -->
            <view
              class="bs-book-cover"
              :style="{
                background: getBookColor(article, idx)
              }"
            >
              <!-- 封面图 -->
              <image
                v-if="article.coverImage"
                class="bs-cover-img"
                :src="article.coverImage"
                mode="aspectFill"
              />

              <!-- 无封面图时：渐变底 + 书名 -->
              <view v-else class="bs-cover-text">
                <text
                  class="bs-cover-title"
                  :style="{ color: getTextColor(article, idx) }"
                >{{ article.title }}</text>
              </view>

              <!-- 底部分类标签 -->
              <view class="bs-cover-bottom">
                <text
                  class="bs-cover-category"
                  :style="{
                    background: getTextColor(article, idx),
                    color: getBookColor(article, idx)
                  }"
                >{{ getCategoryLabel(article) }}</text>
              </view>

              <!-- 右侧书页切边（3D效果） -->
              <view class="bs-cover-edge"></view>
            </view>

            <!-- 封面底部阴影（书架效果） -->
            <view class="bs-book-shadow"></view>
          </view>

          <!-- 右内边距结尾 -->
          <view class="bs-book-spacer"></view>
        </view>
      </scroll-view>

      <!-- 书架底板装饰 -->
      <view class="bs-shelf-bottom">
        <view class="bs-shelf-plank"></view>
        <view class="bs-shelf-bracket bs-shelf-bracket-left"></view>
        <view class="bs-shelf-bracket bs-shelf-bracket-right"></view>
      </view>

      <!-- 翻页指示器 -->
      <view class="bs-page-dots" v-if="displayArticles.length > 3">
        <view
          v-for="n in dotCount"
          :key="n"
          class="bs-dot"
          :class="{ 'bs-dot-active': isActiveDot(n) }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
// 五维配色体系（书脊颜色）
var DIMENSION_COLORS = {
  body:    { bg: 'linear-gradient(180deg, #FF8C42 0%, #E8762A 100%)', text: '#FFF5EE' },
  mind:    { bg: 'linear-gradient(180deg, #FF6B9D 0%, #E84A7F 100%)', text: '#FFF0F5' },
  wisdom:  { bg: 'linear-gradient(180deg, #6366F1 0%, #4F46E5 100%)', text: '#EEF2FF' },
  action:  { bg: 'linear-gradient(180deg, #10B981 0%, #059669 100%)', text: '#ECFDF5' },
  wealth:  { bg: 'linear-gradient(180deg, #F59E0B 0%, #D97706 100%)', text: '#FFFBEB' }
}

// 回退渐变（用于无维度分类的文章）
var FALLBACK_GRADIENTS = [
  { bg: 'linear-gradient(180deg, #8B5CF6 0%, #7C3AED 100%)', text: '#F5F3FF' },
  { bg: 'linear-gradient(180deg, #06B6D4 0%, #0891B2 100%)', text: '#ECFEFF' },
  { bg: 'linear-gradient(180deg, #EC4899 0%, #DB2777 100%)', text: '#FDF2F8' },
  { bg: 'linear-gradient(180deg, #14B8A6 0%, #0D9488 100%)', text: '#F0FDFA' },
  { bg: 'linear-gradient(180deg, #F97316 0%, #EA580C 100%)', text: '#FFF7ED' }
]

export default {
  name: 'ArticleBookshelf',
  props: {
    articles: { type: Array, default: function() { return [] } },
    loading: { type: Boolean, default: false },
    isLoggedIn: { type: Boolean, default: false }
  },
  data: function() {
    return {
      scrollLeft: 0,
      activeDot: 1
    }
  },
  computed: {
    // 每屏 3 本，指示器数量 = ceil(n/3)
    dotCount: function() {
      return Math.max(1, Math.ceil(this.displayArticles.length / 3))
    },
    displayArticles: function() {
      if (!this.articles || this.articles.length === 0) {
        return [
          { title: '培养孩子自驱力的关键', category: '家庭成长', summary: '如何帮助孩子建立内在动机' },
          { title: '五维能量与家庭健康管理', category: '健康科普', summary: '科学理解健康的五个维度' },
          { title: '亲子沟通的心理学智慧', category: '心理养育', summary: '有效的倾听与表达技巧' },
          { title: '规划师推荐的书单', category: '成长规划', summary: '培养未来领导力的阅读路径' },
          { title: '儿童营养均衡完全指南', category: '营养健康', summary: '0-12岁各阶段营养需求' }
        ]
      }
      return this.articles.slice(0, 12)
    }
  },
  methods: {
    getBookColor: function(article, idx) {
      if (article && article.relatedDimensions) {
        var dims = article.relatedDimensions.split(',')
        var firstDim = (dims[0] || '').trim().toLowerCase()
        if (DIMENSION_COLORS[firstDim]) {
          return DIMENSION_COLORS[firstDim].bg
        }
      }
      if (article && article.dimensionCode && DIMENSION_COLORS[article.dimensionCode]) {
        return DIMENSION_COLORS[article.dimensionCode].bg
      }
      return FALLBACK_GRADIENTS[idx % FALLBACK_GRADIENTS.length].bg
    },
    getTextColor: function(article, idx) {
      if (article && article.relatedDimensions) {
        var dims = article.relatedDimensions.split(',')
        var firstDim = (dims[0] || '').trim().toLowerCase()
        if (DIMENSION_COLORS[firstDim]) {
          return DIMENSION_COLORS[firstDim].text
        }
      }
      if (article && article.dimensionCode && DIMENSION_COLORS[article.dimensionCode]) {
        return DIMENSION_COLORS[article.dimensionCode].text
      }
      return FALLBACK_GRADIENTS[idx % FALLBACK_GRADIENTS.length].text
    },
    getCategoryLabel: function(article) {
      if (!article) return '推荐'
      if (article.categoryName) return article.categoryName
      if (article.category) return article.category
      return '推荐'
    },
    // 滚动时计算当前指示器位置（每 3 本一组）
    onScroll: function(e) {
      var scrollLeft = e.detail.scrollLeft || 0
      // 每本封面宽 200rpx + 间距 24rpx ≈ 224rpx/本；scrollLeft 为 px，需转 px 后按 3 本一组
      var groupWidth = uni.upx2px(224) * 3
      var groupIndex = Math.floor(scrollLeft / groupWidth)
      this.activeDot = Math.min(groupIndex + 1, this.dotCount)
    },
    isActiveDot: function(dotIndex) {
      return dotIndex === this.activeDot
    }
  }
}
</script>

<style scoped>
/* ======================================
   ArticleBookshelf — 书册风格推荐阅读组件
   浠艾福 (Care Family) 设计系统
   ====================================== */

/* ---- Section Container ---- */
.bs-section {
  margin: 24rpx 0;
  padding: 0 0 16rpx;
}

/* ---- Header ---- */
.bs-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx 20rpx;
}
.bs-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bs-book-icon {
  font-size: 48rpx;
  margin-right: 14rpx;
  line-height: 1;
}
.bs-header-text {
  display: flex;
  flex-direction: column;
}
.bs-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 2rpx;
  line-height: 1.2;
}
.bs-subtitle {
  font-size: 20rpx;
  color: #9CA3AF;
  font-family: 'Georgia', serif;
  font-style: italic;
  margin-top: 2rpx;
}
.bs-header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8rpx 16rpx;
  background: rgba(91, 155, 213, 0.08);
  border-radius: 20rpx;
}
.bs-more-text {
  font-size: 22rpx;
  color: #5B9BD5;
  font-weight: 500;
}
.bs-more-arrow {
  font-size: 28rpx;
  color: #5B9BD5;
  margin-left: 4rpx;
}

/* ---- Empty State ---- */
.bs-empty {
  padding: 40rpx 0;
  display: flex;
  justify-content: center;
}
.bs-empty-text {
  font-size: 24rpx;
  color: #9CA3AF;
  font-family: 'Georgia', serif;
  font-style: italic;
}

/* ---- Skeleton ---- */
.bs-shelf-skeleton {
  padding: 0 28rpx;
}
.bs-skeleton-shelf {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24rpx;
  padding-top: 16rpx;
}
.bs-skeleton-book {
  width: 200rpx;
  height: 280rpx;
  border-radius: 8rpx;
  background: linear-gradient(180deg, #e8e8e8 0%, #f0f0f0 50%, #e8e8e8 100%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes skeleton-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Bookcase ---- */
.bs-bookcase {
  position: relative;
}

/* 书架顶部装饰线 */
.bs-shelf-top-border {
  height: 6rpx;
  margin: 0 28rpx;
  background: linear-gradient(90deg,
    transparent 0%,
    #8B7355 10%,
    #A0896A 30%,
    #C4A882 50%,
    #A0896A 70%,
    #8B7355 90%,
    transparent 100%
  );
  border-radius: 3rpx;
}

/* ---- Books Scroll ---- */
.bs-books-scroll {
  white-space: nowrap;
  padding: 20rpx 0 0;
  width: 100%;
}
.bs-books-inner {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
}
.bs-book-spacer {
  width: 28rpx;
  flex-shrink: 0;
}

/* ---- Single Book (竖版封面) ---- */
.bs-book-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-right: 24rpx;
  position: relative;
}
.bs-book-cover {
  width: 200rpx;
  height: 280rpx;
  border-radius: 8rpx 8rpx 4rpx 4rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow:
    4rpx 0 10rpx rgba(0,0,0,0.18),
    -2rpx 0 4rpx rgba(0,0,0,0.08),
    0 6rpx 14rpx rgba(0,0,0,0.12);
  transition: transform 0.18s, box-shadow 0.18s;
}
.bs-book-wrap:active .bs-book-cover {
  transform: translateY(-6rpx) scale(1.02);
  box-shadow:
    6rpx 0 14rpx rgba(0,0,0,0.25),
    -3rpx 0 6rpx rgba(0,0,0,0.1),
    0 10rpx 22rpx rgba(0,0,0,0.18);
}

/* 封面图 */
.bs-cover-img {
  width: 100%;
  height: 100%;
}

/* 无封面图时：渐变底 + 书名 */
.bs-cover-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 16rpx;
  box-sizing: border-box;
}
.bs-cover-title {
  font-size: 24rpx;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

/* 底部分类标签 */
.bs-cover-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 10rpx 0 12rpx;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 100%);
}
.bs-cover-category {
  font-size: 16rpx;
  font-weight: 600;
  padding: 3rpx 8rpx;
  border-radius: 4rpx;
  max-width: 160rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
}

/* 右侧书页切边（3D效果） */
.bs-cover-edge {
  position: absolute;
  top: 10rpx;
  bottom: 10rpx;
  right: 0;
  width: 6rpx;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.2) 100%
  );
  border-radius: 0 4rpx 4rpx 0;
}

/* 封面底部投影（书架效果） */
.bs-book-shadow {
  width: 160rpx;
  height: 14rpx;
  margin-top: 8rpx;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 70%);
  flex-shrink: 0;
}

/* ---- 书架底板 ---- */
.bs-shelf-bottom {
  position: relative;
  height: 24rpx;
  margin: 0 20rpx;
}
.bs-shelf-plank {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14rpx;
  background: linear-gradient(180deg, #C4A882 0%, #A0896A 100%);
  border-radius: 2rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
}
.bs-shelf-bracket {
  position: absolute;
  bottom: 6rpx;
  width: 16rpx;
  height: 20rpx;
  background: #8B7355;
  border-radius: 2rpx 2rpx 0 0;
}
.bs-shelf-bracket-left { left: 32rpx; }
.bs-shelf-bracket-right { right: 32rpx; }

/* ---- Page Dots ---- */
.bs-page-dots {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 16rpx;
  gap: 8rpx;
}
.bs-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #D1D5DB;
  transition: all 0.25s;
}
.bs-dot-active {
  background: #8B7355;
  width: 24rpx;
  border-radius: 5rpx;
}
</style>