From bfda50e14a0002258adb130f518ff2dc2bf058f1 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Mon, 6 Jul 2026 20:57:10 +0800
Subject: [PATCH] feat: add collapsible welcome and sticky tabs

Wrap the home welcome component in a collapsible container with smooth transitions. Implement scroll-based collapse and expand logic for the banner in the chat main list. Add sticky tab header styling and updated page layout for the discovery page.
---
 src/pages/ChatMain/ChatMainList/index.vue     | 32 ++++++++++++++++++-
 .../ChatMain/ChatMainList/styles/index.scss   | 19 +++++++++++
 src/pages/Discovery/index.vue                 | 20 ++++++++++--
 3 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/src/pages/ChatMain/ChatMainList/index.vue b/src/pages/ChatMain/ChatMainList/index.vue
index d474832..db5f256 100644
--- a/src/pages/ChatMain/ChatMainList/index.vue
+++ b/src/pages/ChatMain/ChatMainList/index.vue
@@ -27,9 +27,12 @@
     </view>
 
     <scroll-view v-show="tabIndex === 0" class="main-scroll-area flex flex-col flex-full overflow-hidden" scroll-y
+      @scroll="handleDiscoveryScroll"
       @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
       @touchmove="handleScrollAreaTouchMove">
-      <HomeWelcome class="flex-shrink-0" :mainPageDataModel="mainPageDataModel" />
+      <view class="home-welcome-collapse" :class="{ 'is-collapsed': isHomeWelcomeCollapsed }">
+        <HomeWelcome class="flex-shrink-0" :mainPageDataModel="mainPageDataModel" />
+      </view>
 
       <Discovery />
     </scroll-view>
@@ -227,6 +230,12 @@ const isKeyboardShow = ref(false);
 
 ///（控制滚动位置）
 const scrollTop = ref(99999);
+const discoveryScrollTop = ref(0);
+const lastDiscoveryScrollTop = ref(0);
+const isHomeWelcomeCollapsed = ref(false);
+const DISCOVERY_WELCOME_COLLAPSE_TOP = 12;
+const DISCOVERY_WELCOME_EXPAND_TOP = 4;
+const DISCOVERY_SCROLL_DELTA = 2;
 
 /// 会话列表
 const chatMsgList = ref([]);
@@ -381,6 +390,27 @@ const handleScrollAreaTouchMove = () => {
 };
 
 // 处理用户滚动事件
+const handleDiscoveryScroll = (e) => {
+  if (Date.now() - lastScrollTouchAt < 1000) {
+    hideKeyboardByScroll();
+  }
+
+  const currentScrollTop = Number(e.detail?.scrollTop || 0);
+  const scrollDelta = currentScrollTop - lastDiscoveryScrollTop.value;
+  discoveryScrollTop.value = currentScrollTop;
+
+  if (currentScrollTop <= DISCOVERY_WELCOME_EXPAND_TOP) {
+    isHomeWelcomeCollapsed.value = false;
+  } else if (
+    currentScrollTop > DISCOVERY_WELCOME_COLLAPSE_TOP ||
+    scrollDelta > DISCOVERY_SCROLL_DELTA
+  ) {
+    isHomeWelcomeCollapsed.value = true;
+  }
+
+  lastDiscoveryScrollTop.value = currentScrollTop;
+};
+
 const welcomeHeight = ref(0);
 let lastScrollTop = 0;
 const handleScroll = (e) => {
diff --git a/src/pages/ChatMain/ChatMainList/styles/index.scss b/src/pages/ChatMain/ChatMainList/styles/index.scss
index 77d4e02..38334d0 100644
--- a/src/pages/ChatMain/ChatMainList/styles/index.scss
+++ b/src/pages/ChatMain/ChatMainList/styles/index.scss
@@ -5,6 +5,25 @@
   overscroll-behavior-y: contain;
 }
 
+.home-welcome-collapse {
+  width: 100%;
+  height: 92px;
+  flex-shrink: 0;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateY(0);
+  transition:
+    height 240ms ease,
+    opacity 240ms ease,
+    transform 240ms ease;
+}
+
+.home-welcome-collapse.is-collapsed {
+  height: 0;
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 .home-hero {
   height: 136px;
   overflow: hidden;
diff --git a/src/pages/Discovery/index.vue b/src/pages/Discovery/index.vue
index 0b7efb3..861ce79 100644
--- a/src/pages/Discovery/index.vue
+++ b/src/pages/Discovery/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <view class="flex flex-col h-full overflow-hidden min-height-0">
-    <view class="flex-shrink-0">
+  <view class="discovery-content">
+    <view class="discovery-tabs-sticky">
       <FindTabs v-if="discoveryTabs.length > 0" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
     </view>
 
@@ -206,4 +206,18 @@ onMounted(() => {
 
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.discovery-content {
+  width: 100%;
+  min-height: 100%;
+  background: $theme-color-50;
+}
+
+.discovery-tabs-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 12;
+  width: 100%;
+  background: $theme-color-50;
+}
+</style>