feat: 首页交互的

src/pages/ChatMain/ChatMainList/index.vue

@@ -21,7 +21,9 @@
     </view>
 
     <view v-show="tabIndex === 0" class="discovery-shell flex-full" @touchstart.capture="handleDiscoveryPanelTouchStart"
-      @touchstart="handleDiscoveryPanelTouchStart" @touchmove="handleDiscoveryPanelTouchMove">
+      @touchstart="handleDiscoveryPanelTouchStart" @touchmove.capture="handleDiscoveryPanelTouchMove"
+      @touchmove="handleDiscoveryPanelTouchMove"
+      @touchend="handleDiscoveryPanelTouchEnd" @touchcancel="handleDiscoveryPanelTouchEnd">
       <view class="home-welcome-panel">
         <HomeWelcome class="flex-shrink-0" :mainPageDataModel="mainPageDataModel" />
       </view>
@@ -196,6 +198,10 @@ import {
   recentConversation,
 } from "@/request/api/ConversationApi";
 import WebSocketManager from "@/utils/WebSocketManager";
+import {
+  canExpandDiscoveryPanelFromScroll,
+  getDiscoveryPanelCollapseState,
+} from "@/utils/discoveryPanelScroll";
 import { IdUtils } from "@/utils";
 import {
   appendLongTextChunk,
@@ -228,8 +234,14 @@ const scrollTop = ref(99999);
 const discoveryInnerScrollTop = ref(0);
 const discoveryPanelTouchStartY = ref(0);
 const isDiscoveryPanelCollapsed = ref(false);
+let lastDiscoveryInnerScrollTop = 0;
+let isDiscoveryPanelTouching = false;
+let discoveryPanelTouchDirection = "";
+let lastDiscoveryDownGestureAt = 0;
 const DISCOVERY_PANEL_EXPAND_TOP = 4;
 const DISCOVERY_PANEL_TOUCH_DELTA = 16;
+const DISCOVERY_PANEL_DIRECTION_DELTA = 2;
+const DISCOVERY_PANEL_GESTURE_RETAIN_MS = 800;
 
 /// 会话列表
 const chatMsgList = ref([]);
@@ -389,6 +401,10 @@ const handleScrollAreaTouchMove = () => {
 const resetDiscoveryScrollState = () => {
   discoveryInnerScrollTop.value = 0;
   discoveryPanelTouchStartY.value = 0;
+  lastDiscoveryInnerScrollTop = 0;
+  isDiscoveryPanelTouching = false;
+  discoveryPanelTouchDirection = "";
+  lastDiscoveryDownGestureAt = 0;
   isDiscoveryPanelCollapsed.value = false;
 };
 
@@ -400,6 +416,8 @@ const getTouchPointY = (e) => {
 
 const handleDiscoveryPanelTouchStart = (e) => {
   handleScrollAreaTouchStart();
+  isDiscoveryPanelTouching = true;
+  discoveryPanelTouchDirection = "";
   discoveryPanelTouchStartY.value = getTouchPointY(e);
 };
 
@@ -410,6 +428,14 @@ const handleDiscoveryPanelTouchMove = (e) => {
   if (!currentY || !discoveryPanelTouchStartY.value) return;
 
   const touchDelta = currentY - discoveryPanelTouchStartY.value;
+  if (touchDelta < -DISCOVERY_PANEL_DIRECTION_DELTA) {
+    discoveryPanelTouchDirection = "up";
+    lastDiscoveryDownGestureAt = 0;
+  } else if (touchDelta > DISCOVERY_PANEL_DIRECTION_DELTA) {
+    discoveryPanelTouchDirection = "down";
+    lastDiscoveryDownGestureAt = Date.now();
+  }
+
   if (touchDelta < -DISCOVERY_PANEL_TOUCH_DELTA) {
     isDiscoveryPanelCollapsed.value = true;
   } else if (
@@ -420,11 +446,27 @@ const handleDiscoveryPanelTouchMove = (e) => {
   }
 };
 
+const handleDiscoveryPanelTouchEnd = () => {
+  isDiscoveryPanelTouching = false;
+  discoveryPanelTouchDirection = "";
+};
+
 const handleDiscoveryContentScroll = ({ scrollTop }) => {
-  discoveryInnerScrollTop.value = Number(scrollTop || 0);
-  if (discoveryInnerScrollTop.value > DISCOVERY_PANEL_TOUCH_DELTA) {
-    isDiscoveryPanelCollapsed.value = true;
-  }
+  const currentScrollTop = Number(scrollTop || 0);
+  isDiscoveryPanelCollapsed.value = getDiscoveryPanelCollapseState({
+    currentScrollTop,
+    lastScrollTop: lastDiscoveryInnerScrollTop,
+    isCollapsed: isDiscoveryPanelCollapsed.value,
+    threshold: DISCOVERY_PANEL_TOUCH_DELTA,
+    allowExpand: canExpandDiscoveryPanelFromScroll({
+      isTouching: isDiscoveryPanelTouching,
+      touchDirection: discoveryPanelTouchDirection,
+      lastDownGestureAt: lastDiscoveryDownGestureAt,
+      gestureRetainMs: DISCOVERY_PANEL_GESTURE_RETAIN_MS,
+    }),
+  });
+  discoveryInnerScrollTop.value = currentScrollTop;
+  lastDiscoveryInnerScrollTop = currentScrollTop;
 };
 
 const welcomeHeight = ref(0);

src/utils/discoveryPanelScroll.js

@@ -0,0 +1,42 @@
+export const getDiscoveryPanelCollapseState = ({
+  currentScrollTop = 0,
+  lastScrollTop = 0,
+  isCollapsed = false,
+  threshold = 16,
+  directionThreshold = 2,
+  allowExpand = true,
+}) => {
+  const current = Math.max(Number(currentScrollTop) || 0, 0);
+  const last = Math.max(Number(lastScrollTop) || 0, 0);
+  const delta = current - last;
+
+  if (delta > directionThreshold && current > threshold) {
+    return true;
+  }
+
+  if (allowExpand && delta < -directionThreshold) {
+    return false;
+  }
+
+  return isCollapsed;
+};
+
+export const canExpandDiscoveryPanelFromScroll = ({
+  isTouching = false,
+  touchDirection = "",
+  lastDownGestureAt = 0,
+  now = Date.now(),
+  gestureRetainMs = 800,
+}) => {
+  if (isTouching) {
+    return touchDirection === "down";
+  }
+
+  const lastDownAt = Math.max(Number(lastDownGestureAt) || 0, 0);
+  if (!lastDownAt) {
+    return false;
+  }
+
+  const currentTime = Math.max(Number(now) || 0, 0);
+  return currentTime - lastDownAt <= gestureRetainMs;
+};