fix: 简化站点缩放聚焦逻辑/新增后备箱模块loading

liaof

2026-06-13 cceacb033507d0c8af8b1b32cbf1b151ea9844dc

fix: 简化站点缩放聚焦逻辑/新增后备箱模块loading

 src/robotaxi/components/demo/index.tsx

@@ -3,6 +3,7 @@
import './index.less'
// TODO(仅用于测试): 上线前删除以下空调测试相关引入及 DEMO_ORDER_ID
import TemperatureControl from '../../pages/begin-route/components/calling-car-modules/temperature-control';
import DoorTrunkControl from '../../pages/begin-route/components/calling-car-modules/door-trunk-control';
import { TripStatus } from '../../constants/trip-status';

const DEMO_ORDER_ID = '2063814874050772993';
@@ -27,7 +28,7 @@
  constructor (props) {
    super(props)
    this.state = {
      tripStatus: TripStatus.VehicleApproaching,
      tripStatus: TripStatus.ArrivedDestination,
    }
  }

@@ -52,6 +53,14 @@
            orderId={DEMO_ORDER_ID}
          />
        </View>
        <Text>后备箱卡片 Demo</Text>
        {/* TODO(仅用于测试): 上线前删除 DoorTrunkControl 测试渲染 */}
        <View className='calling-car'>
          <DoorTrunkControl
            tripStatus={this.state.tripStatus as TripStatus}
            orderId={DEMO_ORDER_ID}
          />
        </View>
      </View>
    )
  }

 src/robotaxi/hooks/use-station-scale-focus.ts

@@ -1,4 +1,4 @@
import { useMemo, useState, useRef, useCallback } from 'react';
import { useMemo, useState, useCallback } from 'react';
import { GEOFENCE_STATION_FILL_COLOR, GEOFENCE_STATION_STROKE_COLOR } from '../constants/geofence';

type Deps = {
@@ -14,8 +14,8 @@
 * 场站站点地图围栏展示聚焦控制 Hook。
 * 
 * 职责：
 * 1. 当地图放大操作使得缩放达到 17~18 级（即 >= 16.9）时，去掉运营区围栏蒙层，仅展示场站围栏。
 * 2. 缩放比例小于 17 时，恢复展示所有围栏。
 * 1. 当地图放大操作使得缩放达到 16 级及以上时，去掉运营区围栏蒙层，仅展示场站围栏。
 * 2. 缩放比例小于 16 时，恢复展示所有围栏。
 */
export default function useStationScaleFocus({ currentSite, originalPolygons, originalFencePolylines }: Deps) {
  const isStationSite = useMemo(() => {
@@ -24,26 +24,13 @@
  }, [currentSite]);

  const [shouldFocusFence, setShouldFocusFence] = useState(false);
  const lastScaleRef = useRef<number | undefined>(undefined);

  const handleScaleChange = useCallback((scale: number) => {
    if (lastScaleRef.current !== undefined) {
      if (Math.abs(scale - lastScaleRef.current) > 0.001) {
        // 如果是有效放大操作（规避细微浮点误差），并且达到了 17 级及以上
        if (scale - lastScaleRef.current > 0.001 && scale >= 16.9) {
          setShouldFocusFence(true);
        }
        // 如果缩放比例掉到了 17 以下，恢复围栏
        if (scale < 16.9) {
          setShouldFocusFence(false);
        }
      }
    if (scale >= 16) {
      setShouldFocusFence(true);
    } else {
      // 初始化第一次赋予初始值
      lastScaleRef.current = scale;
      return;
      setShouldFocusFence(false);
    }
    lastScaleRef.current = scale;
  }, []);

  // 根据缩放级别过滤围栏数据
@@ -51,7 +38,7 @@
    if (!shouldFocusFence) {
      return originalPolygons;
    }
    // 放大到 17+ 级时，仅保留场站的围栏
    // 放大到 16+ 级时，仅保留场站的围栏
    return originalPolygons.filter(polygon => polygon.fillColor === GEOFENCE_STATION_FILL_COLOR);
  }, [shouldFocusFence, originalPolygons]);

@@ -59,7 +46,7 @@
    if (!shouldFocusFence) {
      return originalFencePolylines;
    }
    // 放大到 17+ 级时，仅保留场站的虚线边框
    // 放大到 16+ 级时，仅保留场站的虚线边框
    return originalFencePolylines.filter(polyline => polyline.color === GEOFENCE_STATION_STROKE_COLOR);
  }, [shouldFocusFence, originalFencePolylines]);


 src/robotaxi/pages/begin-route/components/calling-car-modules/door-trunk-control.tsx

@@ -234,16 +234,16 @@
    const renderControlIcon = (controlType: 'door' | 'trunk', defaultIconSrc: string, className: string) => {
        const isLoading = loadingControlType === controlType;
        return (
            <View style={{ position: 'relative' }}>
            <>
                <Image className={className} style={isLoading ? { visibility: 'hidden' } : undefined} src={defaultIconSrc} />
                {isLoading && (
                    <Image
                        className={`${className} car-card-temp-switch-img-spinning`}
                        style={{ position: 'absolute', top: 0, left: 0 }}
                        style={{ position: 'absolute' }}
                        src={SWITCH_LOADING_ICON_URL}
                    />
                )}
            </View>
            </>
        );
    };


 src/robotaxi/pages/begin-route/components/css-folder/calling-car.less

@@ -294,6 +294,7 @@
        }

        &:last-child {
          position: relative;
          border-radius: 16px;
          background: #ffffff;
          box-sizing: border-box;
@@ -303,6 +304,11 @@
        &-img {
          width: 64px;
          height: 64px;

          &-spinning {
            animation: ac-switch-spin 1s linear infinite;
            transform-origin: center center;
          }
        }
      }
    }
@@ -531,6 +537,11 @@
        &-img {
          width: 64px;
          height: 64px;

          &-spinning {
            animation: ac-switch-spin 1s linear infinite;
            transform-origin: center center;
          }
        }
      }
    }

 src/robotaxi/pages/begin-route/hooks/use-page-actions.ts

@@ -131,8 +131,15 @@
    }
    if (deps.tripStatus === TripStatus.PublishRoute) {
      const markerId = e.detail.markerId;
      deps.onPublishRouteSelectSite?.(markerId === 1 ? 'start' : 'end');
      toSelectSite(markerId === 1 ? 'start' : 'end');
      const pageType = markerId === 1 ? 'start' : 'end';
      deps.onPublishRouteSelectSite?.(pageType);
      if (pageType === 'start') {
        Taro.navigateTo({
          url: `/robotaxi/pages/select-map-site/index?pageType=${pageType}&skipSource=1`
        });
      } else {
        toSelectSite(pageType);
      }
    }
  };


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

@@ -347,9 +347,15 @@
      routeDurationSeconds: routeDuration,
      routeDistanceMeters: orderRouteMetrics?.distanceMeters
    });
    Taro.navigateTo({
      url: `/robotaxi/pages/select-map-site/index?pageType=${pageType}&skipSource=1`,
    });
    if (pageType === 'start') {
      Taro.navigateTo({
        url: `/robotaxi/pages/select-map-site/index?pageType=${pageType}&skipSource=1`,
      });
    } else {
      Taro.navigateTo({
        url: `/robotaxi/pages/site-search/index?pageType=${pageType}&longitude=${startSite.longitude}&latitude=${startSite.latitude}&electronicAreaId=${startSite.electronicAreaId}`,
      });
    }
  };
  /**
   * 预估态点击立即呼叫时上报埋点。