feat(站点搜索): 为历史记录和推荐站点列表添加平滑展开/收起动画

hejianhao

2026-03-06 80e8bd71936aa57bd1ab3d7dd8cc24d3001ece32

feat(站点搜索): 为历史记录和推荐站点列表添加平滑展开/收起动画

- 使用动态计算内容高度实现列表平滑过渡效果
- 修复选择终点站点时未选择起点的验证逻辑
- 优化工具提示显示条件，避免在不吸附时显示限停信息

 src/pages/robotaxi/home/index.tsx

@@ -799,6 +799,13 @@
      })
    }
    if (type == 'end') {
      if (!currentSite?.id) {
        Taro.showToast({
          title: '请先选择起点站点',
          icon: 'none'
        });
        return;
      }
      Taro.setStorageSync('startSite', currentSite);
    }
    Taro.navigateTo({
@@ -949,7 +956,7 @@
              showToolTip && (currentSite.name || !isOperatingArea) && (
                <View className="toolTip">
                  {
                    (!isOperatingArea || isAdsorbed) && (
                    ((!isOperatingArea || isAdsorbed) && isAdsorbed && currentSite.id) && (
                      <View className="toolTip-bg">
                        <Text className="toolTip-bg-text">{!isOperatingArea ? '不在运营区' : `限停${currentSite.time}分钟`}</Text>
                      </View>

 src/robotaxi/pages/site-search/index.less

@@ -154,6 +154,11 @@

  }

  .list-content {
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .history-card {
    border-radius: 16px;
    background: #FFFFFF;
@@ -253,4 +258,4 @@
    width: 480px;
    height: 400px;
  }
}
}

 src/robotaxi/pages/site-search/index.tsx

@@ -22,6 +22,10 @@
  const [pageType, setPageType] = useState('') //出发地 start 目的地 end
  const [showAllHistory, setShowAllHistory] = useState(false) // 是否展示全部历史记录
  const [showAllRecommend, setShowAllRecommend] = useState(false) // 是否展示全部推荐站点
  const [historyContentHeight, setHistoryContentHeight] = useState(0)
  const [historyCollapsedHeight, setHistoryCollapsedHeight] = useState(0)
  const [recommendContentHeight, setRecommendContentHeight] = useState(0)
  const [recommendCollapsedHeight, setRecommendCollapsedHeight] = useState(0)

  const MAX_SHOW_COUNT = 5 // 默认最多显示5条

@@ -222,6 +226,58 @@


  const recommendList = siteList.length > 0 ? siteList : nearbySiteList;
  const historyMaxHeight = showAllHistory ? historyContentHeight : historyCollapsedHeight;
  const recommendMaxHeight = showAllRecommend ? recommendContentHeight : recommendCollapsedHeight;

  useEffect(() => {
    if (historySite.length === 0) {
      setHistoryContentHeight(0);
      setHistoryCollapsedHeight(0);
      return;
    }
    setTimeout(() => {
      const query = Taro.createSelectorQuery();
      query.select('#history-card-content').boundingClientRect();
      query.selectAll('#history-card-content .history-item').boundingClientRect();
      query.exec((res) => {
        const container = res?.[0];
        const items = res?.[1] || [];
        if (!container || items.length === 0) return;
        const top = container.top;
        const last = items[items.length - 1];
        const fullHeight = Math.max(0, last.bottom - top);
        const collapsedIndex = Math.min(MAX_SHOW_COUNT, items.length) - 1;
        const collapsed = Math.max(0, items[collapsedIndex].bottom - top);
        setHistoryContentHeight(fullHeight);
        setHistoryCollapsedHeight(collapsed);
      });
    }, 0);
  }, [historySite.length]);

  useEffect(() => {
    if (recommendList.length === 0) {
      setRecommendContentHeight(0);
      setRecommendCollapsedHeight(0);
      return;
    }
    setTimeout(() => {
      const query = Taro.createSelectorQuery();
      query.select('#recommend-card-content').boundingClientRect();
      query.selectAll('#recommend-card-content .history-item').boundingClientRect();
      query.exec((res) => {
        const container = res?.[0];
        const items = res?.[1] || [];
        if (!container || items.length === 0) return;
        const top = container.top;
        const last = items[items.length - 1];
        const fullHeight = Math.max(0, last.bottom - top);
        const collapsedIndex = Math.min(MAX_SHOW_COUNT, items.length) - 1;
        const collapsed = Math.max(0, items[collapsedIndex].bottom - top);
        setRecommendContentHeight(fullHeight);
        setRecommendCollapsedHeight(collapsed);
      });
    }, 0);
  }, [recommendList.length]);

  return (
    <View className='search-page'>
@@ -249,7 +305,11 @@
        historySite.length > 0 &&
        <View className='history-card'>
          <View className='card-header'>历史记录</View>
          <View className='card-content'>
          <View
            className='card-content list-content'
            id='history-card-content'
            style={historyMaxHeight ? { maxHeight: `${historyMaxHeight}px` } : undefined}
          >
            {
              historySite.map((item, index) => {
                return <View onClick={() => onChangeSelectSite(item)} className='history-item' key={item.id || index}>
@@ -278,7 +338,11 @@
        recommendList.length > 0 &&
        <View className='recommend-card'>
          <View className='card-header'>{siteList.length > 0 ? '推荐站点' : '附近站点'}</View>
          <View className='card-content'>
          <View
            className='card-content list-content'
            id='recommend-card-content'
            style={recommendMaxHeight ? { maxHeight: `${recommendMaxHeight}px` } : undefined}
          >
            {
              recommendList.map((item, index) => {
                return <View onClick={() => onChangeSelectSite(item)} className='history-item' key={item.id || index}>