From c762f06cd71d2ee0a4cf2d62f3f741fa1eb3b347 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Mon, 21 Sep 2026 22:53:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=EF=BC=9A=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E6=A0=8F=E6=94=B6=E7=AA=84=20+=20=E6=A0=87=E9=A2=98=E6=A0=8F?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=94=B6=E7=BC=A9=E8=B4=B4=E9=A1=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- --col-right 306→264，右侧卡片更紧凑
- HomeView 加滚动监听，滚动后 .sticky-head 进入 is-compact：大标题平滑折叠，仅 tabs 贴顶
- ≤780px 时 sticky-head top:54px 避让吸顶 TopBar
---
 frontend/src/styles.css         |  2 +-
 frontend/src/views/HomeView.vue | 40 +++++++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 97d3cf0..3a98eb1 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -32,7 +32,7 @@
   /* 三栏骨架 */
   --col-left: 236px;
   --col-main: 640px;
-  --col-right: 306px;
+  --col-right: 264px;
   --gutter: 28px;
 }
 
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 9e7cb63..1eb300e 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import LeftNav from '../components/LeftNav.vue'
 import RightRail from '../components/RightRail.vue'
@@ -20,6 +20,17 @@ const tag = computed(() => route.query.tag || '')
 const page = computed(() => Number(route.query.page || 1))
 const size = computed(() => site.posts_per_page || 10)
 
+// 滚动时收缩顶部标题栏：隐藏大标题，只留 tabs 贴顶
+const scrolled = ref(false)
+function onScroll() {
+  scrolled.value = window.scrollY > 24
+}
+onMounted(() => {
+  onScroll()
+  window.addEventListener('scroll', onScroll, { passive: true })
+})
+onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))
+
 const tabs = [
   { label: '全部', value: '' },
   { label: '长文', value: 'long' },
@@ -71,7 +82,7 @@ applyDocTitle('')
       <LeftNav />
 
       <main class="main">
-        <header class="sticky-head">
+        <header class="sticky-head" :class="{ 'is-compact': scrolled }">
           <h1 class="page-title">{{ heading }}</h1>
           <nav class="tabs">
             <button
@@ -139,17 +150,38 @@ applyDocTitle('')
   backdrop-filter: blur(6px);
   border-bottom: 1px solid var(--line);
   padding: 8px 16px 0;
+  transition: padding 0.2s ease;
 }
 
 .page-title {
+  margin: 0;
   font-size: 17px;
   font-weight: 600;
+  overflow: hidden;
+  max-height: 26px;
+  opacity: 1;
+  transition:
+    max-height 0.2s ease,
+    opacity 0.2s ease;
 }
 
 .tabs {
   display: flex;
   gap: 2px;
   margin-top: 4px;
+  transition: margin-top 0.2s ease;
+}
+
+/* 滚动后：收起大标题，只留 tabs 紧贴顶部 */
+.sticky-head.is-compact {
+  padding-top: 6px;
+}
+.sticky-head.is-compact .page-title {
+  max-height: 0;
+  opacity: 0;
+}
+.sticky-head.is-compact .tabs {
+  margin-top: 0;
 }
 
 .tab {
@@ -207,5 +239,9 @@ applyDocTitle('')
     border-left: 0;
     border-right: 0;
   }
+  /* 移动端 TopBar 也吸顶（高 54px），标题栏贴其下方 */
+  .sticky-head {
+    top: 54px;
+  }
 }
 </style>