feat: ArticleBookshelf 改为竖版封面风格，一行3本横向滑动

- 书脊样式改为竖版封面（200x280rpx），封面图或五维渐变+书名
- 每屏固定3本，多余横向滑动，指示器按3本一组并随滚动高亮
- 骨架屏同步改为3个封面占位

cfc-frontend/components/ArticleBookshelf.vue

@@ -23,7 +23,7 @@
     <!-- 骨架屏 -->
     <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 v-for="n in 3" :key="n" class="bs-skeleton-book"></view>
       </view>
     </view>
 
@@ -32,13 +32,14 @@
       <!-- 书架装饰线 -->
       <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-book-spacer"></view>
@@ -50,32 +51,33 @@
           class="bs-book-wrap"
           @click="openSpread(idx)"
         >
-          <!-- 书脊主体 -->
+          <!-- 竖版封面主体 -->
           <view
-            class="bs-book-spine"
+            class="bs-book-cover"
             :style="{
-              background: getBookColor(article, idx),
-              height: getBookHeight(idx) + 'rpx'
+              background: getBookColor(article, idx)
             }"
           >
-            <!-- 书脊顶部装饰条 -->
-            <view class="bs-book-top-stripe"></view>
-
-            <!-- 书页纹理（顶部） -->
-            <view class="bs-book-pages-top"></view>
-
-            <!-- 竖排标题 -->
-            <view class="bs-book-title-wrap">
+            <!-- 封面图 -->
+            <image
+              v-if="article.coverImage"
+              class="bs-cover-img"
+              :src="article.coverImage"
+              mode="aspectFill"
+            />
+
+            <!-- 无封面图时：渐变底 + 书名 -->
+            <view v-else class="bs-cover-text">
               <text
-                class="bs-book-title"
+                class="bs-cover-title"
                 :style="{ color: getTextColor(article, idx) }"
               >{{ article.title }}</text>
             </view>
 
-            <!-- 书脊底部标签 -->
-            <view class="bs-book-bottom">
+            <!-- 底部分类标签 -->
+            <view class="bs-cover-bottom">
               <text
-                class="bs-book-category"
+                class="bs-cover-category"
                 :style="{
                   background: getTextColor(article, idx),
                   color: getBookColor(article, idx)
@@ -83,21 +85,12 @@
               >{{ getCategoryLabel(article) }}</text>
             </view>
 
-            <!-- 书页纹理（底部） -->
-            <view class="bs-book-pages-bottom"></view>
-
-            <!-- 右侧书页切边 -->
-            <view class="bs-book-edge"></view>
+            <!-- 右侧书页切边（3D效果） -->
+            <view class="bs-cover-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 class="bs-book-shadow"></view>
         </view>
 
         <!-- 右内边距结尾 -->
@@ -112,9 +105,9 @@
       </view>
 
       <!-- 翻页指示器 -->
-      <view class="bs-page-dots" v-if="displayArticles.length > 4">
+      <view class="bs-page-dots" v-if="displayArticles.length > 3">
         <view
-          v-for="n in Math.min(5, Math.ceil(displayArticles.length / 4))"
+          v-for="n in dotCount"
           :key="n"
           class="bs-dot"
           :class="{ 'bs-dot-active': isActiveDot(n) }"
@@ -270,10 +263,15 @@ export default {
     return {
       spreadActive: false,
       spreadIndex: 0,
-      scrollLeft: 0
+      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 [
@@ -330,10 +328,13 @@ export default {
       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]
+    // 滚动时计算当前指示器位置（每 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)
     },
     openSpread: function(idx) {
       this.spreadIndex = Math.floor(idx / 2)
@@ -357,8 +358,7 @@ export default {
       }
     },
     isActiveDot: function(dotIndex) {
-      var currentDot = Math.floor(this.spreadIndex / 1) + 1
-      return dotIndex === Math.min(currentDot, Math.ceil(this.displayArticles.length / 4))
+      return dotIndex === this.activeDot
     }
   }
 }
@@ -451,13 +451,14 @@ export default {
 .bs-skeleton-shelf {
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
-  gap: 12rpx;
+  align-items: flex-start;
+  gap: 24rpx;
   padding-top: 16rpx;
 }
 .bs-skeleton-book {
-  width: 56rpx;
-  border-radius: 4rpx 4rpx 0 0;
+  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;
@@ -495,110 +496,92 @@ export default {
   padding: 20rpx 0 0;
   display: flex;
   flex-direction: row;
-  align-items: flex-end;
+  align-items: flex-start;
 }
 .bs-book-spacer {
   width: 28rpx;
   flex-shrink: 0;
 }
 
-/* ---- Single Book ---- */
+/* ---- Single Book (竖版封面) ---- */
 .bs-book-wrap {
   display: flex;
-  flex-direction: row;
-  align-items: flex-end;
+  flex-direction: column;
+  align-items: center;
   flex-shrink: 0;
-  margin-right: 10rpx;
+  margin-right: 24rpx;
   position: relative;
 }
-.bs-book-spine {
-  width: 72rpx;
-  border-radius: 6rpx 6rpx 2rpx 2rpx;
+.bs-book-cover {
+  width: 200rpx;
+  height: 280rpx;
+  border-radius: 8rpx 8rpx 4rpx 4rpx;
   position: relative;
   display: flex;
-  flex-direction: column;
   align-items: center;
+  justify-content: center;
   overflow: hidden;
   box-shadow:
-    4rpx 0 8rpx rgba(0,0,0,0.15),
+    4rpx 0 10rpx rgba(0,0,0,0.18),
     -2rpx 0 4rpx rgba(0,0,0,0.08),
-    0 4rpx 12rpx rgba(0,0,0,0.1);
+    0 6rpx 14rpx rgba(0,0,0,0.12);
   transition: transform 0.18s, box-shadow 0.18s;
 }
-.bs-book-wrap:active .bs-book-spine {
-  transform: translateY(-6rpx) rotate(-2deg);
+.bs-book-wrap:active .bs-book-cover {
+  transform: translateY(-6rpx) scale(1.02);
   box-shadow:
-    6rpx 0 12rpx rgba(0,0,0,0.2),
+    6rpx 0 14rpx rgba(0,0,0,0.25),
     -3rpx 0 6rpx rgba(0,0,0,0.1),
-    0 8rpx 20rpx rgba(0,0,0,0.15);
+    0 10rpx 22rpx rgba(0,0,0,0.18);
 }
 
-/* 书脊顶部金色装饰条 */
-.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 {
+/* 封面图 */
+.bs-cover-img {
   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;
+  height: 100%;
 }
 
-/* 书脊标题（竖排） */
-.bs-book-title-wrap {
-  flex: 1;
+/* 无封面图时：渐变底 + 书名 */
+.bs-cover-text {
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 8rpx 6rpx;
-  overflow: hidden;
+  padding: 20rpx 16rpx;
+  box-sizing: border-box;
 }
-.bs-book-title {
-  font-size: 22rpx;
+.bs-cover-title {
+  font-size: 24rpx;
   font-weight: 700;
-  writing-mode: vertical-rl;
-  text-orientation: mixed;
-  letter-spacing: 3rpx;
-  line-height: 1.4;
-  max-height: 160rpx;
+  line-height: 1.5;
+  letter-spacing: 1rpx;
+  text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: horizontal;
-  white-space: nowrap;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 
-/* 书脊底部分类 */
-.bs-book-bottom {
-  width: 100%;
-  padding: 6rpx 4rpx 10rpx;
+/* 底部分类标签 */
+.bs-cover-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: flex;
   justify-content: center;
-  flex-shrink: 0;
+  padding: 10rpx 0 12rpx;
+  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 100%);
 }
-.bs-book-category {
+.bs-cover-category {
   font-size: 16rpx;
   font-weight: 600;
-  padding: 2rpx 4rpx;
-  border-radius: 3rpx;
-  writing-mode: horizontal-tb;
-  letter-spacing: 0;
-  max-width: 64rpx;
+  padding: 3rpx 8rpx;
+  border-radius: 4rpx;
+  max-width: 160rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -606,25 +589,11 @@ export default {
   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 {
+.bs-cover-edge {
   position: absolute;
-  top: 8rpx;
-  bottom: 8rpx;
+  top: 10rpx;
+  bottom: 10rpx;
   right: 0;
   width: 6rpx;
   background: linear-gradient(180deg,
@@ -632,16 +601,16 @@ export default {
     rgba(0,0,0,0.1) 50%,
     rgba(0,0,0,0.2) 100%
   );
-  border-radius: 0 3rpx 3rpx 0;
+  border-radius: 0 4rpx 4rpx 0;
 }
 
-/* 书脊投影 */
+/* 封面底部投影（书架效果） */
 .bs-book-shadow {
-  width: 8rpx;
-  height: 16rpx;
-  margin-left: -2rpx;
-  margin-bottom: 2rpx;
-  border-radius: 0 0 4rpx 4rpx;
+  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;
 }