feat(页面): 优化地图显示和搜索结果高亮

hejianhao

2026-03-09 bf47c7d653cb75a88acf7e3a31b4c0b18ce6f64b

feat(页面): 优化地图显示和搜索结果高亮

调整地图包含点的 padding 值以改善显示效果，并在站点搜索结果中为匹配关键词添加高亮显示

 src/robotaxi/pages/begin-route/index.tsx

@@ -77,7 +77,7 @@
  const tripStatusRef = useRef(tripStatus); // 行程状态引用
  const lastTripStatusRef = useRef(tripStatus);
  const routeRequestKeyRef = useRef<string>(''); // 路线请求键
  const allowIncludePointsRef = useRef(true);
  const allowIncludePointsRef = useRef(true); // 是否允许包含地图点
  const orderRouteInitializedRef = useRef(false);
  // 在发布行程状态也允许展示路线
  const shouldShowRoute = [1, 4, 6, 8, 9].includes(tripStatus);
@@ -585,7 +585,7 @@
            latitude: e.latitude,
            longitude: e.longitude,
          }],
          padding: [50, 50, 800, 50]
          padding: [50, 50, 500, 50]
        });
      }
      setElapsedSeconds(0);
@@ -731,7 +731,7 @@
        if ([8, 9].includes(tripStatus) && routePoints.length > 0) {
          mapCtx.includePoints({
            points: routePoints,
            padding: [50, 50, 500, 50]
            padding: [50, 50, 300, 50]
          });
        } else {
          const allPoints = tripStatus === 1
@@ -749,7 +749,7 @@
    } else {
      setPolyline([]);
    }
  }, [tripStatus, shouldShowRoute, routePoints, walkingPoints, startSite?.name, startSite?.latitude, startSite?.longitude, endSite.name, endSite?.latitude, endSite?.longitude, vehicleLocation, vehicleDirection]);
  }, [tripStatus, shouldShowRoute, routePoints, walkingPoints, startSite?.name, startSite?.latitude, startSite?.longitude, endSite.name, endSite?.latitude, endSite?.longitude, vehicleLocation, vehicleDirection, routeDistance?.value, routeDistance?.unit, routeDuration]);

  const bindSocketListeners = () => {
    if (!orderStatusBound.current && orderStatusHandlerRef.current) {

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

@@ -285,8 +285,35 @@
    setTipType('');
  }

  const escapeRegExp = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const renderHighlightedName = (name: string) => {
    const kw = (searchValue || '').trim();
    if (!kw) {
      return <View className='history-name'>{name}</View>;
    }
    try {
      const re = new RegExp(`(${escapeRegExp(kw)})`, 'gi');
      const parts = name.split(re);
      return (
        <View className='history-name'>
          {parts.map((part, idx) => {
            const isMatch = re.test(part);
            // 重置lastIndex以避免多段匹配影响
            re.lastIndex = 0;
            return (
              <Text key={idx} style={isMatch ? { color: '#5A960A' } : undefined}>
                {part}
              </Text>
            );
          })}
        </View>
      );
    } catch {
      return <View className='history-name'>{name}</View>;
    }
  }

  const recommendList = siteList.length > 0 ? siteList : nearbySiteList;
  const recommendList = searchValue ? siteList : nearbySiteList;
  const visibleHistory = showAllHistory ? historySite.slice(0, MAX_EXPANDED_COUNT) : historySite.slice(0, MAX_SHOW_COUNT);
  const visibleRecommend = showAllRecommend ? recommendList : recommendList.slice(0, MAX_SHOW_COUNT);

@@ -346,14 +373,14 @@
      {
        recommendList.length > 0 &&
        <View className='recommend-card'>
          <View className='card-header'>{siteList.length > 0 ? '推荐站点' : '附近站点'}</View>
          <View className='card-header'>{searchValue ? '推荐站点' : '附近站点'}</View>
          <View className='card-content list-content' id='recommend-card-content'>
            {
              visibleRecommend.map((item, index) => {
                return <View onClick={() => onChangeSelectSite(item)} className='history-item' key={item.id || index}>
                  <Image className='history-icon' src={address}></Image>
                  <View className='history-info'>
                    <View className='history-name'>{item.name || '_'}</View>
                    {renderHighlightedName(item.name || '_')}
                    <View className='history-address-box'>
                      <View className='history-address'>{item.address || '-'}</View>
                      <View className='history-distance'>{item.distance}km</View>
@@ -382,7 +409,7 @@
                return <View onClick={() => onChangeSelectSite(item, false)} className='history-item' key={item.id || index}>
                  <Image className='history-icon' src={address}></Image>
                  <View className='history-info'>
                    <View className='history-name'>{item.name || '_'}</View>
                    {renderHighlightedName(item.name || '_')}
                    <View className='history-address-box'>
                      <View className='history-address'>{item.address || '-'}</View>
                      {/* <View className='history-distance'>{item.distance}</View> */}