feat: 推荐阅读点击封面直接进入文章详情页

移除杂志展开页（spread overlay）逻辑，点击书籍封面直接 emit articleClick
各调用页面已绑定 @articleClick=goArticleDetail/goDetail，直达详情
组件从 895 行精简至 519 行

cfc-frontend/components/ArticleBookshelf.vue

@@ -50,7 +50,7 @@
             v-for="(article, idx) in displayArticles"
             :key="idx"
             class="bs-book-wrap"
-            @click="openSpread(idx)"
+            @click="$emit('articleClick', article)"
           >
             <!-- 竖版封面主体 -->
             <view
@@ -116,122 +116,6 @@
         ></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>
 
@@ -263,8 +147,6 @@ export default {
   },
   data: function() {
     return {
-      spreadActive: false,
-      spreadIndex: 0,
       scrollLeft: 0,
       activeDot: 1
     }
@@ -285,16 +167,6 @@ export default {
         ]
       }
       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: {
@@ -338,27 +210,6 @@ export default {
       var groupIndex = Math.floor(scrollLeft / groupWidth)
       this.activeDot = Math.min(groupIndex + 1, this.dotCount)
     },
-    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) {
       return dotIndex === this.activeDot
     }
@@ -666,230 +517,4 @@ export default {
   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>