fix(robotaxi/home): 优化浮层显示与拖拽交互逻辑

hejianhao

2026-05-13 8784bb37bcedc7a740771fffa319ca93b6285616

fix(robotaxi/home): 优化浮层显示与拖拽交互逻辑

为两处浮层组件添加visibility和pointerEvents样式，确保透明度为0时完全隐藏并阻止指针事件
优化拖拽手势的高度更新逻辑，避免拖拽过程中高度被意外重置
调整浮层淡出策略，将淡出距离调整为100px实现更积极的淡出效果
简化浮层锚点计算函数，优化调用逻辑并移除不必要的定时器与nextTick调用

 src/pages/robotaxi/home/components/map-overlay-tips/index.tsx

@@ -36,6 +36,8 @@
        top: 'auto', 
        bottom: `${props.anchorBottom}px`,
        opacity: props.opacity !== undefined ? props.opacity : 1,
        visibility: props.opacity !== undefined && props.opacity <= 0 ? 'hidden' : 'visible' as any,
        pointerEvents: props.opacity !== undefined && props.opacity <= 0 ? 'none' : 'auto' as any,
        transition: props.isDragging ? 'none' : 'opacity 0.2s ease-out'
      }
    : undefined;

 src/pages/robotaxi/home/hooks/use-drag-gesture.ts

@@ -44,9 +44,17 @@
        if (rect) {
          const contentHeight = rect.height;
          const baseHeight = 280;
          const oldFullHeight = fullHeight.current;
          fullHeight.current = Math.max(contentHeight, baseHeight);
          minHeight.current = baseHeight;
          setBoxHeight(baseHeight);

          // 仅在初始化或当前高度为旧的最大高度时更新高度，避免拖拽过程中被意外重置
          setBoxHeight(prev => {
            if (prev === 280 || prev === oldFullHeight || oldFullHeight === 0) {
              return baseHeight;
            }
            return prev;
          });
        } else {
          minHeight.current = 280;
          fullHeight.current = 280;
@@ -118,7 +126,10 @@
  useEffect(() => {
    const range = fullHeight.current - minHeight.current;
    if (range > 0 && typeof boxHeight === 'number') {
      const factor = (boxHeight - minHeight.current) / range;
      // 更加积极的淡出策略：向上滑动 100px 即可完全淡出
      const fadeDistance = 100;
      const moveDistance = boxHeight - minHeight.current;
      const factor = moveDistance / fadeDistance;
      const next = 1 - Math.min(1, Math.max(0, factor));
      setOriginOpacity(next);
    }

 src/pages/robotaxi/home/index.tsx

@@ -531,7 +531,7 @@
      });
    }
    setTimeout(() => {
      initOverlayAnchor();
      initOverlayAnchor(boxHeight);
    }, 80);
  });

@@ -627,27 +627,16 @@
  };

  // 初始化浮层锚点：固定在 content-box 顶部上方 32px，统一按实际渲染高度量测
  const initOverlayAnchor = () => {
    const query = Taro.createSelectorQuery();
    query.select('.content-box').boundingClientRect();
    query.exec((res) => {
      const rect = res?.[0];
      const height = Number(rect?.height);
      const measuredHeight = Number.isFinite(height) && height > 0 ? height : Number(boxHeight || 0);
      if (!Number.isFinite(measuredHeight) || measuredHeight <= 0) return;
      const bottom = Math.max(0, measuredHeight + 32);
      setOverlayAnchorBottom(bottom);
    });
  const initOverlayAnchor = (customHeight?: number) => {
    const measuredHeight = typeof customHeight === 'number' ? customHeight : Number(boxHeight || 0);
    if (!Number.isFinite(measuredHeight) || measuredHeight <= 0) return;
    const bottom = Math.max(0, measuredHeight + 32);
    setOverlayAnchorBottom(bottom);
  };

  // 订单状态卡片显隐与底部容器高度变化时，都需要重新计算地图浮层锚点。
  useEffect(() => {
    const timer = setTimeout(() => {
      Taro.nextTick(() => {
        initOverlayAnchor();
      });
    }, 80);
    return () => clearTimeout(timer);
    initOverlayAnchor(boxHeight);
  }, [bannerList.length, tripStatus, shouldShowOrderStatusCard, boxHeight]);

  // 处理点击地图 marker
@@ -716,6 +705,8 @@
          className="origin-box"
          style={{
            opacity: originOpacity,
            visibility: originOpacity <= 0 ? 'hidden' : 'visible',
            pointerEvents: originOpacity <= 0 ? 'none' : 'auto',
            transition: isDragging.current ? 'none' : 'opacity 0.2s ease-out',
            top: typeof overlayAnchorBottom === 'number' ? 'auto' : undefined,
            bottom: typeof overlayAnchorBottom === 'number' ? `${overlayAnchorBottom}px` : undefined,