feat(frontend): 推荐阅读改为书册风格 ArticleBookshelf 组件

cfc-frontend/pages/home-pages/parent-index.vue

@@ -306,53 +306,14 @@
         <text class="error-state-text">推荐加载失败</text>
       </view>
 
-      <!-- ===== 推荐阅读 ===== -->
-      <view class="article-section animate-fade-in animate-stagger-12">
-        <view class="article-header">
-          <text class="section-title">📖 推荐阅读</text>
-          <text class="article-more" @click="goArticles">更多 ›</text>
-        </view>
-        <view class="article-list">
-          <!-- 加载中 -->
-          <view v-if="articlesLoading" class="loading-state" style="padding: 40rpx 0;">
-            <text class="loading-text">加载中...</text>
-          </view>
-          <!-- 无数据时显示占位卡片 -->
-          <template v-else-if="indexArticles.length === 0">
-            <view class="article-card" v-for="i in 3" :key="i">
-              <view class="article-category" :style="{ background: gradientColors[(i-1) % gradientColors.length] }">
-                <text class="article-category-text">推荐文章</text>
-              </view>
-              <text class="article-title">暂无推荐文章</text>
-              <text class="article-summary">精彩内容即将上线，敬请期待</text>
-              <view class="article-meta">
-                <view class="meta-item">
-                  <text class="meta-icon">📖</text>
-                  <text class="meta-text">0</text>
-                </view>
-                <text class="article-date">--</text>
-              </view>
-            </view>
-          </template>
-          <!-- 有数据时显示文章卡片 -->
-          <template v-else>
-            <view class="article-card" v-for="article in indexArticles" :key="article.id" @click="goArticleDetail(article.id)">
-              <view class="article-category" :style="{ background: article.categoryColor }">
-                <text class="article-category-text">{{ article.category }}</text>
-              </view>
-              <text class="article-title">{{ article.title }}</text>
-              <text class="article-summary">{{ article.summary }}</text>
-              <view class="article-meta">
-                <view class="meta-item">
-                  <text class="meta-icon">📖</text>
-                  <text class="meta-text">{{ article.views }}</text>
-                </view>
-                <text class="article-date">{{ article.date }}</text>
-              </view>
-            </view>
-          </template>
-        </view>
-      </view>
+      <!-- ===== 推荐阅读（书册风格） ===== -->
+      <ArticleBookshelf
+        :articles="indexArticles"
+        :loading="articlesLoading"
+        :isLoggedIn="isLoggedIn"
+        @articleClick="goArticleDetail"
+        @moreArticles="goArticles"
+      />
 
       <!-- ===== h) 待审核任务 ===== -->
       <view class="review-section animate-fade-in animate-stagger-11" v-if="pendingReviewTasks.length > 0">
@@ -457,7 +418,7 @@ import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
 import feedbackEngine from '../../utils/feedback-engine.js'
 
 export default {
-  components: { PageBanner, RecommendedFeed, PlayfulCard, PlayfulButton, BaseBadge, BaseEmpty, BaseLoading, FamilyRelationGraph, WuxingSandbox, ContactCard, ContactImport, FamilyMemberStrip, MicroActionCard, FeedbackToast, MilestoneCelebration, DailySummary, HealthAlertBanner, FamilyHealthRanking, FamilyChallengeCard, CircleRanking },
+  components: { PageBanner, RecommendedFeed, PlayfulCard, PlayfulButton, BaseBadge, BaseEmpty, BaseLoading, FamilyRelationGraph, WuxingSandbox, ContactCard, ContactImport, FamilyMemberStrip, MicroActionCard, FeedbackToast, MilestoneCelebration, DailySummary, HealthAlertBanner, FamilyHealthRanking, FamilyChallengeCard, CircleRanking, ArticleBookshelf },
   data() {
     return {
       nickname: '',
@@ -500,6 +461,7 @@ export default {
       // 推荐阅读
       indexArticles: [],
       articlesLoading: false,
+      isLoggedIn: false,
       gradientColors: [
         'linear-gradient(135deg, #10B981, #34D399)',
         'linear-gradient(135deg, #5B9BD5, #8FC5E8)',
@@ -594,6 +556,7 @@ export default {
       uni.reLaunch({ url: '/pages/login/login' })
       return
     }
+    this.isLoggedIn = true
     this.loadData()
   },
   onShow() {
@@ -608,6 +571,7 @@ export default {
       return
     }
     if (uni.getStorageSync('token')) {
+      this.isLoggedIn = true
       this.loadData()
     }
   },
@@ -1032,7 +996,8 @@ export default {
     goArticles: function() {
       uni.navigateTo({ url: '/pages/mind-detail/articles' })
     },
-    goArticleDetail: function(id) {
+    goArticleDetail: function(articleOrId) {
+      var id = typeof articleOrId === 'object' ? articleOrId.id : articleOrId
       uni.navigateTo({ url: '/pages/mind-detail/article-detail?id=' + id })
     }
   }