feat(frontend): add ArticleBookshelf book-style recommendation component

- New ArticleBookshelf.vue: horizontal scrollable books with spine titles,
  dimension-based color gradients, magazine spread overlay on tap
- Integrated into article-center/index.vue via getFeaturedArticles API
- Follows uni.scss design tokens, Vue 2 compatible (no optional chaining,
  flexbox layout)
- goExplore() navigation stub to /pages/article-center/article-explore

cfc-frontend/components/ArticleBookshelf.vue

@@ -0,0 +1,921 @@
+<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 5" :key="n" class="bs-skeleton-book" :style="{ height: (160 + n * 20) + 'rpx', opacity: 1 - n * 0.1 }"></view>
+      </view>
+    </view>
+
+    <!-- 书册展示区 -->
+    <view v-else class="bs-bookcase">
+      <!-- 书架装饰线 -->
+      <view class="bs-shelf-top-border"></view>
+
+      <!-- 书籍横向滚动 -->
+      <scroll-view
+        scroll-x
+        class="bs-books-scroll"
+        :scroll-left="scrollLeft"
+        scroll-with-animation
+        :show-scrollbar="false"
+      >
+        <!-- 左内边距起始 -->
+        <view class="bs-book-spacer"></view>
+
+        <!-- 书籍列表 -->
+        <view
+          v-for="(article, idx) in displayArticles"
+          :key="idx"
+          class="bs-book-wrap"
+          @click="openSpread(idx)"
+        >
+          <!-- 书脊主体 -->
+          <view
+            class="bs-book-spine"
+            :style="{
+              background: getBookColor(article, idx),
+              height: getBookHeight(idx) + 'rpx'
+            }"
+          >
+            <!-- 书脊顶部装饰条 -->
+            <view class="bs-book-top-stripe"></view>
+
+            <!-- 书页纹理（顶部） -->
+            <view class="bs-book-pages-top"></view>
+
+            <!-- 竖排标题 -->
+            <view class="bs-book-title-wrap">
+              <text
+                class="bs-book-title"
+                :style="{ color: getTextColor(article, idx) }"
+              >{{ article.title }}</text>
+            </view>
+
+            <!-- 书脊底部标签 -->
+            <view class="bs-book-bottom">
+              <text
+                class="bs-book-category"
+                :style="{
+                  background: getTextColor(article, idx),
+                  color: getBookColor(article, idx)
+                }"
+              >{{ getCategoryLabel(article) }}</text>
+            </view>
+
+            <!-- 书页纹理（底部） -->
+            <view class="bs-book-pages-bottom"></view>
+
+            <!-- 右侧书页切边 -->
+            <view class="bs-book-edge"></view>
+          </view>
+
+          <!-- 书脊底部阴影（书架效果） -->
+          <view
+            class="bs-book-shadow"
+            :style="{
+              background: 'linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0) 100%)',
+              width: (getBookHeight(idx) * 0.15) + 'rpx'
+            }"
+          ></view>
+        </view>
+
+        <!-- 右内边距结尾 -->
+        <view class="bs-book-spacer"></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 > 4">
+        <view
+          v-for="n in Math.min(5, Math.ceil(displayArticles.length / 4))"
+          :key="n"
+          class="bs-dot"
+          :class="{ 'bs-dot-active': isActiveDot(n) }"
+        ></view>
+      </view>
+    </view>
+
+    <!-- 杂志展开页（点击书籍后显示） -->
+    <view
+      class="bs-spread-overlay"
+      v-if="spreadActive"
+      @click="closeSpread"
+    >
+      <view class="bs-spread" @click.stop="">
+
+        <!-- 关闭按钮 -->
+        <view class="bs-spread-close" @click="closeSpread">
+          <text class="bs-spread-close-text">&#x2715;</text>
+        </view>
+
+        <!-- 杂志页眉 -->
+        <view class="bs-spread-header">
+          <view class="bs-spread-header-line"></view>
+          <text class="bs-spread-header-title">&#x1F4DA; 阅读精选</text>
+          <view class="bs-spread-header-line"></view>
+        </view>
+
+        <!-- 双页展开 -->
+        <view class="bs-spread-pages">
+          <!-- 左页 -->
+          <view
+            class="bs-spread-page bs-spread-page-left"
+            v-if="spreadArticles[0]"
+            @click="$emit('articleClick', spreadArticles[0])"
+          >
+            <view class="bs-spread-page-cover" v-if="spreadArticles[0].coverImage">
+              <image
+                class="bs-spread-cover-img"
+                :src="spreadArticles[0].coverImage"
+                mode="aspectFill"
+              />
+              <view
+                class="bs-spread-cover-overlay"
+                :style="{ background: getBookColor(spreadArticles[0], 0) }"
+              ></view>
+            </view>
+            <view class="bs-spread-page-body">
+              <text class="bs-spread-page-category" :style="{ color: getBookColor(spreadArticles[0], 0) }">
+                {{ getCategoryLabel(spreadArticles[0]) }}
+              </text>
+              <text class="bs-spread-page-title">{{ spreadArticles[0].title }}</text>
+              <text class="bs-spread-page-summary" v-if="spreadArticles[0].summary">
+                {{ spreadArticles[0].summary }}
+              </text>
+              <view class="bs-spread-page-footer">
+                <text class="bs-spread-page-author" v-if="spreadArticles[0].author">
+                  {{ spreadArticles[0].author }}
+                </text>
+                <text class="bs-spread-page-date" v-if="spreadArticles[0].date">
+                  {{ spreadArticles[0].date }}
+                </text>
+              </view>
+            </view>
+          </view>
+
+          <!-- 书脊分隔 -->
+          <view class="bs-spread-spine"></view>
+
+          <!-- 右页 -->
+          <view
+            class="bs-spread-page bs-spread-page-right"
+            v-if="spreadArticles[1]"
+            @click="$emit('articleClick', spreadArticles[1])"
+          >
+            <view class="bs-spread-page-cover" v-if="spreadArticles[1].coverImage">
+              <image
+                class="bs-spread-cover-img"
+                :src="spreadArticles[1].coverImage"
+                mode="aspectFill"
+              />
+              <view
+                class="bs-spread-cover-overlay"
+                :style="{ background: getBookColor(spreadArticles[1], 1) }"
+              ></view>
+            </view>
+            <view class="bs-spread-page-body">
+              <text class="bs-spread-page-category" :style="{ color: getBookColor(spreadArticles[1], 1) }">
+                {{ getCategoryLabel(spreadArticles[1]) }}
+              </text>
+              <text class="bs-spread-page-title">{{ spreadArticles[1].title }}</text>
+              <text class="bs-spread-page-summary" v-if="spreadArticles[1].summary">
+                {{ spreadArticles[1].summary }}
+              </text>
+              <view class="bs-spread-page-footer">
+                <text class="bs-spread-page-author" v-if="spreadArticles[1].author">
+                  {{ spreadArticles[1].author }}
+                </text>
+                <text class="bs-spread-page-date" v-if="spreadArticles[1].date">
+                  {{ spreadArticles[1].date }}
+                </text>
+              </view>
+            </view>
+          </view>
+
+          <!-- 无右页时占位 -->
+          <view class="bs-spread-page bs-spread-page-right bs-spread-page-empty" v-else>
+            <view class="bs-spread-empty-inner">
+              <text class="bs-spread-empty-icon">&#x1F4D6;</text>
+              <text class="bs-spread-empty-text">更多好文</text>
+              <text class="bs-spread-empty-text2">即将上架</text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 翻页提示 -->
+        <view class="bs-spread-hint">
+          <text class="bs-spread-hint-text">点击封面阅读全文</text>
+          <text class="bs-spread-hint-text" @click="prevSpreadPair">&#x25C0; 上一页</text>
+          <text class="bs-spread-hint-text" @click="nextSpreadPair">下一页 &#x25B6;</text>
+        </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 {
+      spreadActive: false,
+      spreadIndex: 0,
+      scrollLeft: 0
+    }
+  },
+  computed: {
+    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)
+    },
+    spreadArticles: function() {
+      var base = this.spreadIndex * 2
+      return [
+        this.displayArticles[base],
+        this.displayArticles[base + 1]
+      ].filter(function(a) { return a })
+    },
+    maxSpreadIndex: function() {
+      return Math.floor((this.displayArticles.length - 1) / 2)
+    }
+  },
+  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 '推荐'
+    },
+    getBookHeight: function(idx) {
+      // 书高度错落有致，营造书架感
+      var heights = [220, 200, 240, 210, 230, 195, 225, 205, 235, 215, 228, 198]
+      return heights[idx % heights.length]
+    },
+    openSpread: function(idx) {
+      this.spreadIndex = Math.floor(idx / 2)
+      this.spreadActive = true
+    },
+    closeSpread: function() {
+      this.spreadActive = false
+    },
+    prevSpreadPair: function() {
+      if (this.spreadIndex > 0) {
+        this.spreadIndex--
+      } else {
+        this.spreadIndex = this.maxSpreadIndex
+      }
+    },
+    nextSpreadPair: function() {
+      if (this.spreadIndex < this.maxSpreadIndex) {
+        this.spreadIndex++
+      } else {
+        this.spreadIndex = 0
+      }
+    },
+    isActiveDot: function(dotIndex) {
+      var currentDot = Math.floor(this.spreadIndex / 1) + 1
+      return dotIndex === Math.min(currentDot, Math.ceil(this.displayArticles.length / 4))
+    }
+  }
+}
+</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-end;
+  gap: 12rpx;
+  padding-top: 16rpx;
+}
+.bs-skeleton-book {
+  width: 56rpx;
+  border-radius: 4rpx 4rpx 0 0;
+  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;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+.bs-book-spacer {
+  width: 28rpx;
+  flex-shrink: 0;
+}
+
+/* ---- Single Book ---- */
+.bs-book-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  flex-shrink: 0;
+  margin-right: 10rpx;
+  position: relative;
+}
+.bs-book-spine {
+  width: 72rpx;
+  border-radius: 6rpx 6rpx 2rpx 2rpx;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  box-shadow:
+    4rpx 0 8rpx rgba(0,0,0,0.15),
+    -2rpx 0 4rpx rgba(0,0,0,0.08),
+    0 4rpx 12rpx rgba(0,0,0,0.1);
+  transition: transform 0.18s, box-shadow 0.18s;
+}
+.bs-book-wrap:active .bs-book-spine {
+  transform: translateY(-6rpx) rotate(-2deg);
+  box-shadow:
+    6rpx 0 12rpx rgba(0,0,0,0.2),
+    -3rpx 0 6rpx rgba(0,0,0,0.1),
+    0 8rpx 20rpx rgba(0,0,0,0.15);
+}
+
+/* 书脊顶部金色装饰条 */
+.bs-book-top-stripe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 8rpx;
+  background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
+}
+
+/* 书页纹理（上） */
+.bs-book-pages-top {
+  width: 100%;
+  height: 12rpx;
+  margin-top: 6rpx;
+  background: repeating-linear-gradient(
+    180deg,
+    rgba(255,255,255,0.15) 0px,
+    rgba(255,255,255,0.15) 2rpx,
+    transparent 2rpx,
+    transparent 6rpx
+  );
+  flex-shrink: 0;
+}
+
+/* 书脊标题（竖排） */
+.bs-book-title-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8rpx 6rpx;
+  overflow: hidden;
+}
+.bs-book-title {
+  font-size: 22rpx;
+  font-weight: 700;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  letter-spacing: 3rpx;
+  line-height: 1.4;
+  max-height: 160rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: horizontal;
+  white-space: nowrap;
+}
+
+/* 书脊底部分类 */
+.bs-book-bottom {
+  width: 100%;
+  padding: 6rpx 4rpx 10rpx;
+  display: flex;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.bs-book-category {
+  font-size: 16rpx;
+  font-weight: 600;
+  padding: 2rpx 4rpx;
+  border-radius: 3rpx;
+  writing-mode: horizontal-tb;
+  letter-spacing: 0;
+  max-width: 64rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  text-align: center;
+}
+
+/* 书页纹理（下） */
+.bs-book-pages-bottom {
+  width: 100%;
+  height: 10rpx;
+  background: repeating-linear-gradient(
+    180deg,
+    rgba(255,255,255,0.12) 0px,
+    rgba(255,255,255,0.12) 1rpx,
+    transparent 1rpx,
+    transparent 4rpx
+  );
+  flex-shrink: 0;
+}
+
+/* 右侧书页切边（3D效果） */
+.bs-book-edge {
+  position: absolute;
+  top: 8rpx;
+  bottom: 8rpx;
+  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 3rpx 3rpx 0;
+}
+
+/* 书脊投影 */
+.bs-book-shadow {
+  width: 8rpx;
+  height: 16rpx;
+  margin-left: -2rpx;
+  margin-bottom: 2rpx;
+  border-radius: 0 0 4rpx 4rpx;
+  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;
+}
+
+/* ========================================
+   Magazine Spread Overlay
+   ======================================== */
+.bs-spread-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.6);
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fade-in 0.22s ease-out;
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.bs-spread {
+  width: 90vw;
+  height: 85vh;
+  background: #FDFAF6;
+  border-radius: 24rpx;
+  position: relative;
+  box-shadow: 0 20rpx 60rpx rgba(0,0,0,0.3);
+  overflow: hidden;
+  animation: slide-up 0.25s ease-out;
+}
+@keyframes slide-up {
+  from { transform: translateY(40rpx); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* 关闭按钮 */
+.bs-spread-close {
+  position: absolute;
+  top: 20rpx;
+  right: 24rpx;
+  width: 56rpx;
+  height: 56rpx;
+  background: rgba(0,0,0,0.15);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  transition: background 0.15s;
+}
+.bs-spread-close:active {
+  background: rgba(0,0,0,0.3);
+}
+.bs-spread-close-text {
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: bold;
+}
+
+/* 杂志页眉 */
+.bs-spread-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 32rpx 48rpx 20rpx;
+  gap: 16rpx;
+}
+.bs-spread-header-line {
+  flex: 1;
+  height: 2rpx;
+  background: #C4A882;
+}
+.bs-spread-header-title {
+  font-size: 26rpx;
+  color: #8B7355;
+  font-family: 'Georgia', serif;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* 双页布局 */
+.bs-spread-pages {
+  display: flex;
+  flex-direction: row;
+  height: calc(100% - 140rpx);
+  padding: 0 32rpx 24rpx;
+  gap: 0;
+}
+.bs-spread-spine {
+  width: 12rpx;
+  background: linear-gradient(180deg, #C4A882 0%, #A0896A 50%, #8B7355 100%);
+  flex-shrink: 0;
+  box-shadow: 2rpx 0 8rpx rgba(0,0,0,0.2);
+  border-radius: 2rpx;
+}
+
+.bs-spread-page {
+  flex: 1;
+  background: #FFFFFF;
+  border-radius: 12rpx;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
+  transition: transform 0.15s;
+}
+.bs-spread-page-left {
+  border-radius: 12rpx 0 0 12rpx;
+}
+.bs-spread-page-right {
+  border-radius: 0 12rpx 12rpx 0;
+}
+.bs-spread-page-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bs-spread-empty-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.bs-spread-empty-icon {
+  font-size: 64rpx;
+  margin-bottom: 16rpx;
+  opacity: 0.3;
+}
+.bs-spread-empty-text {
+  font-size: 28rpx;
+  color: #C4A882;
+  font-family: 'Georgia', serif;
+}
+.bs-spread-empty-text2 {
+  font-size: 22rpx;
+  color: #D1D5DB;
+  margin-top: 8rpx;
+}
+
+.bs-spread-page-cover {
+  width: 100%;
+  height: 220rpx;
+  position: relative;
+  overflow: hidden;
+}
+.bs-spread-cover-img {
+  width: 100%;
+  height: 100%;
+}
+.bs-spread-cover-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60rpx;
+  opacity: 0.5;
+}
+
+.bs-spread-page-body {
+  flex: 1;
+  padding: 24rpx 28rpx;
+  display: flex;
+  flex-direction: column;
+}
+.bs-spread-page-category {
+  font-size: 20rpx;
+  font-weight: 700;
+  margin-bottom: 10rpx;
+  letter-spacing: 1rpx;
+}
+.bs-spread-page-title {
+  font-size: 30rpx;
+  font-weight: 700;
+  color: #1a1a2e;
+  line-height: 1.45;
+  margin-bottom: 12rpx;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.bs-spread-page-summary {
+  font-size: 22rpx;
+  color: #6B7280;
+  line-height: 1.6;
+  flex: 1;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+}
+.bs-spread-page-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16rpx;
+  padding-top: 12rpx;
+  border-top: 1rpx solid #F3F4F6;
+}
+.bs-spread-page-author {
+  font-size: 20rpx;
+  color: #9CA3AF;
+}
+.bs-spread-page-date {
+  font-size: 20rpx;
+  color: #9CA3AF;
+}
+
+/* 翻页提示 */
+.bs-spread-hint {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 48rpx 24rpx;
+}
+.bs-spread-hint-text {
+  font-size: 22rpx;
+  color: #9CA3AF;
+}
+</style>

cfc-frontend/pages/article-center/index.vue

@@ -40,6 +40,16 @@
       </scroll-view>
     </view>
 
+    <!-- 书册式推荐阅读 -->
+    <ArticleBookshelf
+      v-if="recommendedArticles.length > 0 || !recommendLoading"
+      :articles="recommendedArticles"
+      :loading="recommendLoading"
+      :isLoggedIn="isLoggedIn"
+      @articleClick="goDetail"
+      @moreArticles="goExplore"
+    />
+
     <!-- 文章列表区域 -->
     <scroll-view scroll-y class="ac-scroll" @scrolltolower="onLoadMore">
       <!-- 骨架屏 -->
@@ -120,7 +130,7 @@
 </template>
 
 <script>
-import { getArticleList } from '@/utils/api.js'
+import { getArticleList, getFeaturedArticles } from '@/utils/api.js'
 export default {
   data() {
     return {
@@ -142,9 +152,14 @@ export default {
       noMore: false,
       searchKeyword: '',
       searchFocused: false,
-      isLoggedIn: false
+      isLoggedIn: false,
+      recommendedArticles: [],
+      recommendLoading: false
     }
   },
+  components: {
+    ArticleBookshelf: () => require('@/components/ArticleBookshelf.vue')
+  },
   onLoad(options) {
     // 支持从外部传入 dimension 参数，默认选中对应 tab
     if (options && options.dimension) {
@@ -152,6 +167,7 @@ export default {
     }
     this.isLoggedIn = !!uni.getStorageSync('token')
     this.loadArticles()
+    this.loadRecommendedArticles()
   },
   onShow() {
     this.isLoggedIn = !!uni.getStorageSync('token')
@@ -204,6 +220,20 @@ export default {
       this.noMore = false
       this.loadArticles()
     },
+    async loadRecommendedArticles() {
+      var self = this
+      self.recommendLoading = true
+      try {
+        var res = await getFeaturedArticles({ size: 8 })
+        if (res && res.code === 0 && res.data) {
+          self.recommendedArticles = res.data.list || res.data || []
+        }
+      } catch (e) {
+        // silent fail
+      } finally {
+        self.recommendLoading = false
+      }
+    },
     onLoadMore() {
       if (this.noMore || this.loading || this.loadingMore) return
       this.page++
@@ -220,6 +250,9 @@ export default {
         uni.navigateTo({ url: '/pages/login/login?redirect=' + encodeURIComponent('/pages/article-center/index') })
       }
     },
+    goExplore() {
+      uni.showToast({ title: '书库即将上线', icon: 'none' })
+    },
     formatDate(dateStr) {
       if (!dateStr) return ''
       return dateStr.slice(0, 10)