feat: 官网代码全量更新 (2026-04-18)

pages/stories/index.vue

@@ -2,7 +2,7 @@
   <div class="page-stories">
     <LayoutPageHero
       :title="seo.h1"
-      subtitle="来自小红书的真实旅行分享"
+      :subtitle="heroes?.stories || '来自小红书的真实旅行分享'"
       :breadcrumbs="[{ text: '客户故事' }]"
       background-image="/images/summer-camp/birch-group.jpg"
     />
@@ -26,16 +26,16 @@
             :key="story.id"
             v-bind="getCardProps(story)"
             class="story-card reveal"
+            :class="{ 'story-card--no-image': !story.coverImage }"
           >
-            <div class="story-card__visual">
+            <!-- 有封面图：显示图片区 -->
+            <div v-if="story.coverImage" class="story-card__visual">
               <img
-                v-if="story.coverImage"
                 :src="story.coverImage"
                 :alt="story.title"
                 class="story-card__img"
                 loading="lazy"
               />
-              <div v-else class="story-card__img-placeholder" />
               <!-- 小红书外链角标 -->
               <span v-if="story.sourceUrl" class="story-card__badge">
                 <svg class="story-card__badge-icon" viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
@@ -43,14 +43,20 @@
                 </svg>
                 小红书
               </span>
-              <!-- 原创故事标记 -->
               <span v-else-if="story.content" class="story-card__badge story-card__badge--original">
                 原创故事
               </span>
-              <!-- 家庭类型 -->
-              <span class="story-card__family">{{ story.familyType }}</span>
+              <span v-if="story.familyType" class="story-card__family">{{ story.familyType }}</span>
             </div>
             <div class="story-card__body">
+              <!-- 无封面图时：家庭类型 + 来源标签在正文上方 -->
+              <div v-if="!story.coverImage" class="story-card__meta-top">
+                <span v-if="story.familyType" class="story-card__family story-card__family--inline">
+                  {{ story.familyType }}
+                </span>
+                <span v-if="story.sourceUrl" class="story-card__badge story-card__badge--inline">小红书</span>
+                <span v-else-if="story.content" class="story-card__badge story-card__badge--inline story-card__badge--original">原创故事</span>
+              </div>
               <h2 class="story-card__title">{{ story.title }}</h2>
               <p class="story-card__desc">{{ story.subtitle || story.summary }}</p>
               <div class="story-card__meta">
@@ -89,6 +95,7 @@ import { resolveComponent } from 'vue'
 import { useOrganizationSchema, useBreadcrumbSchema, useStoriesListSchema } from '~/composables/useJsonLd'
 
 const { data: storiesData } = await usePublicApi('stories')
+const { data: heroes } = await usePublicApi('heroes')
 const { data: brand } = await usePublicApi('brand')
 const { data: contact } = await usePublicApi('contact')
 
@@ -103,8 +110,12 @@ useBreadcrumbSchema([
 
 const stories = computed(() => storiesData.value?.stories || [])
 
+// 过滤掉占位数据：卡片可见字段（title/subtitle/summary）包含 ⚠️ 视为未替换
 const readyStories = computed(() =>
-  stories.value.filter(s => s.summary && !s.summary.includes('⚠️'))
+  stories.value.filter(s => {
+    const visible = [s.title, s.subtitle, s.summary].filter(Boolean).join(' ')
+    return !visible.includes('⚠️')
+  })
 )
 
 // 占位内容未替换时，阻止搜索引擎索引空页面
@@ -186,10 +197,37 @@ function getCardProps(story) {
     // 不固定高度，让图片保持原始比例实现瀑布流效果
   }
 
-  &__img-placeholder {
-    width: 100%;
-    height: 200px;
-    background: @color-primary-bg;
+  // 无封面图时的卡片样式：加厚正文 padding，左侧加强调色带
+  &--no-image {
+    border-left: 4px solid @color-primary;
+    background: linear-gradient(180deg, @color-primary-bg 0%, @color-bg-white 140px);
+
+    .story-card__body {
+      padding: @space-lg @space-md @space-md;
+    }
+
+    .story-card__title {
+      font-size: @font-size-lg;
+      -webkit-line-clamp: 3;
+    }
+  }
+
+  &__meta-top {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-bottom: @space-sm;
+  }
+
+  &__family--inline {
+    position: static;
+    background: rgba(0, 0, 0, 0.08);
+    color: @color-text-secondary;
+    backdrop-filter: none;
+  }
+
+  &__badge--inline {
+    position: static;
   }
 
   // 角标（小红书/原创）