feat(frontend): 首页新增 Bug 案例整屏入口模块（网站历程下方）

- 第 4 屏展示最新一篇 BUG_CASE 文章的封面 + 摘要（复用精选卡布局，
  右栏用正文色放宽摘要行距，以文字描述补足单篇留白）
- 无数据时占位提示，提供查看全部入口跳 /bugs
- 样式与既有 home-screen 全屏滚动吸附一致

Co-Authored-By: Claude Code <noreply@anthropic.com>

Author: yyyCode

vue/src/assets/blog.css

@@ -638,6 +638,89 @@ html.homepage-scroll-snap {
   }
 }
 
+/* ===== 第 4 屏：Bug 案例入口（整屏，展示最新一篇 Bug 复盘） ===== */
+.home-screen-bugs {
+  background: var(--bg);
+  display: flex;
+  align-items: center;
+  padding: 48px 24px;
+}
+
+.home-bugs {
+  width: 100%;
+  max-width: 980px;
+  margin: 0 auto;
+}
+
+.home-bugs-head {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.home-bugs-title {
+  margin: 0;
+  font-size: clamp(24px, 3.5vw, 34px);
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: var(--text);
+}
+
+.home-bugs-sub {
+  margin: 10px 0 0;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--muted);
+}
+
+/* 最新 Bug 卡片：复用精选卡布局，左图右文，右栏承载更多描述文字 */
+.home-bugs-card {
+  cursor: pointer;
+}
+
+.home-bugs-card .home-featured-grid {
+  grid-template-columns: 5fr 6fr;
+}
+
+@media (max-width: 900px) {
+  .home-bugs-card .home-featured-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.home-bugs-card .home-featured-cover {
+  aspect-ratio: 16 / 10;
+}
+
+.home-bugs-card .home-featured-title {
+  font-size: 24px;
+}
+
+/* 摘要作为主要描述文字，用正文色并放宽行距，弥补单篇内容的留白 */
+.home-bugs-card .home-featured-excerpt {
+  font-size: 16px;
+  line-height: 1.85;
+  color: var(--text);
+}
+
+.home-bugs-more {
+  display: inline-flex;
+  margin-top: 24px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.home-bugs-more:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 680px) {
+  .home-screen-bugs {
+    padding: 40px 20px;
+  }
+}
+
 
 .home-featured {
   padding: 18px;

vue/src/views/HomeView.vue

@@ -90,14 +90,55 @@
         </div>
       </div>
     </section>
+
+    <!-- 第 4 屏：Bug 案例入口 -->
+    <section class="home-screen home-screen-bugs">
+      <div class="home-bugs">
+        <div class="home-bugs-head">
+          <h2 class="home-bugs-title">Bug 案例</h2>
+          <p class="home-bugs-sub">开发路上踩过的坑 —— 问题现象、根因定位、解法与复盘</p>
+        </div>
+
+        <div v-if="latestBug" class="card home-bugs-card" @click="go(latestBug.id)">
+          <div class="home-featured">
+            <div class="home-featured-grid">
+              <div class="home-featured-cover">
+                <img
+                  v-if="latestBug.coverMediaKey"
+                  :src="coverUrl(latestBug.coverMediaKey)"
+                  alt="cover"
+                />
+              </div>
+              <div class="home-featured-body">
+                <div class="home-featured-badge">最新 Bug 复盘</div>
+                <div class="home-featured-title">{{ latestBug.title }}</div>
+                <div class="home-featured-excerpt home-bugs-excerpt">{{ latestBug.summary || '' }}</div>
+                <div class="home-featured-meta">
+                  <span>{{ formatDate(latestBug.publishedAt) }}</span>
+                  <span>·</span>
+                  <span>{{ latestBug.authorNickname || '作者' }}</span>
+                </div>
+                <div class="home-featured-link">阅读完整复盘 →</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-else class="card">
+          <div class="card-body" style="padding: 22px; color: var(--muted)">暂无 Bug 案例，敬请期待</div>
+        </div>
+
+        <router-link class="home-bugs-more" to="/bugs">查看全部 Bug 案例 →</router-link>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup>
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { fetchArticles, fetchArticleDetail, coverUrl } from '../api/article'
+import { fetchArticles, fetchArticleDetail, fetchArticlesByType, coverUrl } from '../api/article'
 
 const router = useRouter()
 const siteConfig = inject('siteConfig')
@@ -142,6 +183,19 @@ const loading = ref(true)
 const featuredArticle = ref({})
 const latestArticles = ref([])
 
+// ---- 第 4 屏：Bug 案例（只取最新一篇） ----
+const latestBug = ref(null)
+
+async function loadLatestBug() {
+  try {
+    const resp = await fetchArticlesByType('BUG_CASE', { page: 0, size: 1 })
+    const items = resp?.items || []
+    latestBug.value = items[0] || null
+  } catch {
+    latestBug.value = null
+  }
+}
+
 onMounted(async () => {
   enableHomepageSnap()
   loading.value = true
@@ -160,6 +214,7 @@ onMounted(async () => {
   } finally {
     loading.value = false
   }
+  loadLatestBug()
 })
 
 onUnmounted(() => {