feat(robotaxi): 为地图浮层添加透明度与拖拽动画支持

hejianhao

2026-04-24 e1bd0d183767252b9435b9f43067b7ad0163a01e

feat(robotaxi): 为地图浮层添加透明度与拖拽动画支持

- 在 MapOverlayTips 组件新增 opacity 和 isDragging 属性，用于控制透明度和过渡动画
- 移除 overlayAnchorInitedRef 引用，简化浮层锚点初始化逻辑
- 调整锚点计算方式，固定底部偏移为 32px，提升视觉一致性
- 将透明度与拖拽状态传递给浮层，实现上划淡出效果

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

@@ -21,6 +21,10 @@
  onViewOperatingArea: () => void;
  /** 初始化锚点底部偏移 */
  anchorBottom?: number;
  /** 透明度，用于配合上划消失 */
  opacity?: number;
  /** 拖拽状态，用于控制过渡动画 */
  isDragging?: boolean;
};

/**
@@ -28,7 +32,12 @@
 */
export default function MapOverlayTips(props: Props) {
  const anchorStyle = typeof props.anchorBottom === 'number'
    ? { top: 'auto', bottom: `${props.anchorBottom}px` }
    ? { 
        top: 'auto', 
        bottom: `${props.anchorBottom}px`,
        opacity: props.opacity !== undefined ? props.opacity : 1,
        transition: props.isDragging ? 'none' : 'opacity 0.2s ease-out'
      }
    : undefined;
  return (
    <View className="content-box-top" style={anchorStyle}>

 src/pages/robotaxi/home/index.tsx

@@ -102,7 +102,6 @@
  const [orderData, setOrderData] = useState<any>({}); // 订单数据
  const [isLogin, setIsLogin] = useState(false); // 是否登录
  const [overlayAnchorBottom, setOverlayAnchorBottom] = useState<number | null>(null); // 浮层初始化锚点（距底部）
  const overlayAnchorInitedRef = useRef(false); // 浮层锚点是否已初始化
  const {
    boxHeight,
    originOpacity,
@@ -367,25 +366,21 @@

  // 初始化浮层锚点：固定在 content-box 顶部上方 32px
  const initOverlayAnchor = () => {
    if (overlayAnchorInitedRef.current) return;
    // content-box 高度受 banner 数量影响：多 banner 复用 boxHeight，单 banner 走渲染后实测高度
    if (bannerList.length > 1) {
      const bottom = Math.max(0, Number(boxHeight) + 115);
      const bottom = Math.max(0, 280 + 32);
      if (bottom <= 0) return;
      setOverlayAnchorBottom(bottom);
      overlayAnchorInitedRef.current = true;
      return;
    }
    const query = Taro.createSelectorQuery();
    query.select('.content-box').boundingClientRect();
    query.exec((res) => {
      if (overlayAnchorInitedRef.current) return;
      const rect = res?.[0];
      const height = Number(rect?.height);
      if (!Number.isFinite(height) || height <= 0) return;
      const bottom = Math.max(0, height + 115);
      const bottom = Math.max(0, height + 32);
      setOverlayAnchorBottom(bottom);
      overlayAnchorInitedRef.current = true;
    });
  };

@@ -396,7 +391,7 @@
      });
    }, 80);
    return () => clearTimeout(timer);
  }, [bannerList.length, tripStatus, boxHeight]);
  }, [bannerList.length, tripStatus]);

  // 处理点击地图 marker
  const handleMarkerTap = (e: any) => {
@@ -467,6 +462,8 @@
          maintainBounce={maintainBounce}
          hotfixEndText={hotfixEndText}
          anchorBottom={overlayAnchorBottom ?? undefined}
          opacity={originOpacity}
          isDragging={isDragging.current}
          onShowPrivacy={() => setShowPrivacy(true)}
          onOpenSetting={handleOpenSetting}
          onViewOperatingArea={handleViewOperatingArea}