liaof
2026-07-29 603754e25781af152beeb2d6dcc77def7091ae74
Merge branch 'feature_v2.4.0_ui_fuqj' into 'feature_v2.4.0_ui'

修改路线地图气泡、地图气泡展示不全的等问题 (符启基)

See merge request robotaxi1/xp-robotaxi-miniprogram!193
8个文件已修改
242 ■■■■■ 已修改文件
src/pages/robotaxi/home/constants.ts 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/begin-route/hooks/use-map-markers.ts 9 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/begin-route/hooks/use-view-delegates.tsx 132 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/begin-route/index.less 87 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/begin-route/index.tsx 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/select-map-site/hooks/use-select-map-site-state.ts 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/share-trip/hooks/use-map-markers.ts 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/robotaxi/pages/share-trip/index.tsx 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/pages/robotaxi/home/constants.ts
@@ -22,7 +22,7 @@
export const FLOAT_ACTIVITY_DEFAULT_IMAGE = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/coverImage.png';
/** 等待态雷达资源。 */
export const WAITING_RADAR_SRC = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/waiting-radar.webp';
export const WAITING_RADAR_SRC = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/waiting-radar-20260728.webp';
/** 地图内容高度。 */
export const HOME_MAP_HEIGHT = '85vh';
src/robotaxi/pages/begin-route/hooks/use-map-markers.ts
@@ -13,11 +13,12 @@
// 站点名称 label(图标下方)统一配置
const SITE_NAME_LABEL_BASE = {
  color: "#141E27",
  fontSize: 11,
  fontSize: 12,
  anchorX: 0,
  anchorY: 9, // 图标下方 9px
  textAlign: "center" as const,
  bgColor: "#00000000",
  fontWeight: 'bold',
  borderWidth: 0,
  borderRadius: 0,
  padding: 0
@@ -25,11 +26,12 @@
// 到达上车点/待支付/完成态:站点名称在图标下方 8px,11px #141E27 居中
const SITE_NAME_LABEL_BELOW_LG = {
  color: "#141E27",
  fontSize: 11,
  fontSize: 12,
  anchorX: 0,
  anchorY: 8,
  textAlign: "center" as const,
  bgColor: "#00000000",
  fontWeight: 'bold',
  borderWidth: 0,
  borderRadius: 0,
  padding: 0
@@ -211,7 +213,8 @@
      !shouldUseChangePickupIcon;
    // 修改目的地预览:起点(上车点)统一用三角图标 up-triangle + 名称显示在图标下方
    const isPickupModifyPreview = deps.isModifyDestinationReviewVisible;
    const isPickupTriangle = isPickupApproaching || isPickupArrived || isPickupSettled || isPickupModifyPreview;
    // 接驾态路线切换卡片展示中:地图状态被切换为 PublishRoute 展示态,但上车点名称仍需按三角图标态展示
    const isPickupTriangle = isPickupApproaching || isPickupArrived || isPickupSettled || isPickupModifyPreview || deps.showTrip1StyleEndpoint;
    // 名称在图标下方:接驾态 11px,到达/待支付/完成态 22px
    const pickupNameLabelConfig = isPickupApproaching
      ? SITE_NAME_LABEL_BASE
src/robotaxi/pages/begin-route/hooks/use-view-delegates.tsx
@@ -228,30 +228,48 @@
        {hasBeforeUserEndSite && (
          <View className="car-time car-before-order-tip">即将完成上一单</View>
        )}
        <View
          className="car-time"
          style={{ alignItems: "baseline", paddingBottom: 0 }}
        >
          <View className="car-time-num">
            {routeDistance?.value ?? 0}
        {hasBeforeUserEndSite ? (
          <View className="car-before-order-tip-text">
            <View>全程</View>
            <View className="car-before-order-tip-value">
              {routeDistance?.value ?? 0}
            </View>
            <View className="car-before-order-tip-unit">
              {routeDistance?.unit === "m" ? "米" : "公里"}
            </View>
            <View className="car-before-order-tip-value">
              {durationDisplay.value}
            </View>
            <View className="car-before-order-tip-unit">
              {durationDisplay.unit}
            </View>
          </View>
          <View style={{ flexShrink: 0 }}>
            {isPickup
              ? routeDistance?.unit === "m" ? "M" : "KM"
              : routeDistance?.unit === "m" ? "米" : "公里"}
        ) : (
          <View
            className="car-time"
            style={{ alignItems: "baseline", paddingBottom: 0 }}
          >
            <View className="car-time-num">
              {routeDistance?.value ?? 0}
            </View>
            <View style={{ flexShrink: 0 }}>
              {isPickup
                ? routeDistance?.unit === "m" ? "M" : "KM"
                : routeDistance?.unit === "m" ? "米" : "公里"}
            </View>
            {!isPickup && (
              <>
                <View
                  style={{ marginLeft: "2px" }}
                  className="car-time-num"
                >
                  {durationDisplay.value}
                </View>
                <View style={{ flexShrink: 0 }}>{durationDisplay.unit}</View>
              </>
            )}
          </View>
          {!isPickup && (
            <>
              <View
                style={{ marginLeft: "2px" }}
                className="car-time-num"
              >
                {durationDisplay.value}
              </View>
              <View style={{ flexShrink: 0 }}>{durationDisplay.unit}</View>
            </>
          )}
        </View>
        )}
      </View>
    );
  },
@@ -451,7 +469,7 @@
              ) &&
              !(
                item.id === 2 &&
                deps.tripStatus === TripStatus.PublishRoute &&
                (deps.tripStatus === TripStatus.PublishRoute || deps.isPickupRouteChangeVisible) &&
                !!deps.routeDistance &&
                deps.routeDuration !== null
              ) &&
@@ -540,6 +558,13 @@
                    />
                    <CoverView className="callout-parking-tip-text">
                      限停{deps.startSite.time}分钟
                      {!deps.isAndroid && (
                          <CoverView
                            style={{ color: "transparent", width: "4px" }}
                          >
                            占
                          </CoverView>
                        )}
                    </CoverView>
                  </CoverView>
                )}
@@ -576,7 +601,10 @@
                </>
              )}
            {item.id === 2 &&
              (deps.tripStatus === TripStatus.PublishRoute || deps.isModifyDestinationReviewVisible) &&
              (deps.tripStatus === TripStatus.PublishRoute
                || deps.isModifyDestinationReviewVisible
                || deps.isPickupRouteChangeVisible
              ) &&
              !!deps.routeDistance &&
              deps.routeDuration !== null &&
              !item.hideNameCallout && (
@@ -601,16 +629,16 @@
                      <CoverView className="endpoint-summary-label">
                        全程
                      </CoverView>
                      <CoverView className="endpoint-summary-value">
                        <CoverView className="endpoint-summary-golden-value">
                          {deps.routeDistance.value}
                        </CoverView>
                       <CoverView className="endpoint-summary-golden-value">
                        {deps.routeDistance.value}
                       </CoverView>
                      <CoverView className="endpoint-summary-value-unit">
                        {deps.routeDistance.unit === "m" ? "米" : "公里"}
                      </CoverView>
                      <CoverView className="endpoint-summary-value">
                        <CoverView className="endpoint-summary-golden-value">
                          {vehicleMetricDurationDisplay.value}
                        </CoverView>
                      <CoverView className="endpoint-summary-golden-value">
                        {vehicleMetricDurationDisplay.value}
                       </CoverView>
                      <CoverView className="endpoint-summary-value-unit">
                        {vehicleMetricDurationDisplay.unit}
                      </CoverView>
                    </CoverView>
@@ -705,19 +733,40 @@
                    }`.trim()}
                  style={{ minWidth: "40px", justifyContent: "center", zIndex: 2 }}
                >
                  {deps.hasBeforeUserEndSite && (
                  {!deps.hasBeforeUserEndSite && (
                    <CoverView className="car-time car-before-order-tip">
                      即将完成上一单
                    </CoverView>
                  )}
                  <CoverView className="car-time">
                    <CoverView className="car-time-num">
                      {deps.routeDistance?.value ?? 0}
                  {!deps.hasBeforeUserEndSite ? (
                    <CoverView className="car-before-order-tip-text">
                      <CoverView>
                        全程
                      </CoverView>
                      <CoverView className="car-before-order-tip-value">
                        {deps.routeDistance?.value ?? 0}
                      </CoverView>
                      <CoverView className="car-before-order-tip-unit">
                        {deps.routeDistance?.unit === "m" ? "M" : "KM"}
                      </CoverView>
                      <CoverView className="car-before-order-tip-value">
                        {vehicleMetricDurationDisplay.value}
                      </CoverView>
                      <CoverView className="car-before-order-tip-unit">
                        {vehicleMetricDurationDisplay.unit}
                      </CoverView>
                    </CoverView>
                    <CoverView>
                      {deps.routeDistance?.unit === "m" ? "M" : "KM"}
                  ) : (
                    <CoverView className="car-time">
                      <CoverView className="car-time-num">
                        {deps.routeDistance?.value ?? 0}
                      </CoverView>
                      <CoverView>
                        {deps.routeDistance?.unit === "m" ? "M" : "KM"}
                      </CoverView>
                    </CoverView>
                  </CoverView>
                  )
                  }
                </CoverView>
              )}
            {item.id === 2 &&
@@ -736,6 +785,7 @@
      deps.hasBeforeUserEndSite,
      deps.isAndroid,
      deps.isModifyDestinationReviewVisible,
      deps.isPickupRouteChangeVisible,
      deps.routeDistance,
      deps.routeDuration,
      deps.showTrip1StyleEndpoint,
@@ -752,7 +802,9 @@
   * 渲染单个 marker 气泡。
   */
  const renderMarkerCallout = useCallback((item: any, index: number) => {
    const calloutKey = `callout-${item.id}-${item.name || ''}`;
    // iOS 上 CoverView 内多个文本节点(里程/时长数字)原地更新会偶发数字错乱,
    // 故将会变化的里程/时长/限停时长纳入 key,数值变化时强制整体重新挂载而非原地 patch。
    const calloutKey = `callout-${item.id}-${item.name || ''}-${deps.routeDistance?.value ?? ''}-${deps.routeDistance?.unit ?? ''}-${deps.routeDuration ?? ''}-${deps.startSite?.time ?? ''}`;
    // 待支付/完成态的上/下车点浮窗为富内容(end-site 图片),需走 cover-view,不能被 Android 常规隐藏规则误伤
    const isSettledSiteMarker =
      (item.id === 1 || item.id === 2) &&
src/robotaxi/pages/begin-route/index.less
@@ -249,6 +249,10 @@
    background: #141E27;
    border-radius: 24px;
    padding: 20px 20px 20px 16px;
    // 外层浮窗需同步限宽,否则 white-space: nowrap 会让 flex 子项按内容撑开,
      // 导致内部 .endpoint-summary-main 的 max-width: 400px 不生效
    max-width: 400px;
    box-sizing: border-box;
}
// 起点浮窗存在限停气泡时,黑窗上移与限停气泡衔接(对齐 map-pointer 的 toolTip-txt margin-top:-32px)
@@ -263,12 +267,15 @@
    justify-content: center;
    min-width: 198px;
    max-width: 400px;
    // 作为父级 flex(row) 容器的子项,默认 min-width: auto 会按内容撑开忽略 max-width,
      // 需显式覆盖为 0 才能真正收缩到限定宽度内
      flex-shrink: 1;
}
.endpoint-summary-name {
    display: flex;
    align-items: center;
    max-width: 375px;
    max-width: 100%;
    font-size: 24px;
    font-weight: 500;
    color: #FFFFFF;
@@ -282,21 +289,36 @@
    margin-top: 8px;
    font-size: 20px;
    line-height: normal;
    white-space: nowrap;
    white-space: normal;
      // word-break: break-all;
    // white-space: nowrap;
}
.endpoint-summary-label {
    color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  line-height: normal;
  flex-shrink: 0;
  margin-right: 2px;
  color: rgba(255, 255, 255, 0.5);
}
.endpoint-summary-value {
.endpoint-summary-value-unit {
  display: flex;
  align-items: center;
  font-weight: 500;
  .endpoint-summary-golden-value {
    margin: 0 4px;
    color: rgba(255, 209, 129, 1);
  }
  line-height: normal;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 2px;
}
.endpoint-summary-golden-value {
  display: flex;
  align-items: center;
  font-weight: 500;
  line-height: normal;
  font-size: 20px;
  margin:0 2px;
  color: rgba(255, 209, 129, 1);
}
.endpoint-summary-icon {
@@ -317,7 +339,7 @@
    justify-content: center;
    padding: 3px 20px 32px 20px;
    height: 80px;
    min-width: 186px;
    min-width: 200px;
    max-width: 400px;
    box-sizing: border-box;
    text-align: center;
@@ -337,14 +359,16 @@
    z-index: 1;
    width: 24px;
    height: 24px;
    margin-top: 12px;
    margin-right: 4px;
    margin-top: 14px;
    padding-right: 4px;
    flex-shrink: 0;
    display: block;
}
.callout-parking-tip-text {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
    font-size: 22px;
    font-weight: 500;
@@ -352,7 +376,9 @@
    color: #FFFFFF;
    line-height: 48px;
    white-space: nowrap;
    padding-right: 20px;
    min-width: 120px;
    padding-right: 24px;
    box-sizing: border-box;
}
.txt-center {
@@ -361,6 +387,7 @@
.car-time {
    font-size: 20px;
    font-family: @font-xpsans-bold;
    letter-spacing: normal;
    display: flex;
    align-items: flex-end;
@@ -371,6 +398,7 @@
.car-callout-with-before {
    flex-direction: column;
    align-items: flex-start;
    border-radius: 24px;
}
.car-callout-double-line {
@@ -383,20 +411,43 @@
}
.car-callout-double-line .car-time {
    line-height: 28px;
    line-height: 32px;
}
.car-before-order-tip {
    margin-bottom: 4px;
    line-height: 28px;
  font-size: 24px;
  margin-bottom: 4px;
  line-height: normal;
}
.car-before-order-tip-text {
  display: flex;
  align-items: center;
  font-size: 20px;
  line-height: normal;
  text-align: center;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  .car-before-order-tip-value {
    margin: 0 2px;
    font-weight: 500;
  }
  .car-before-order-tip-unit {
    font-size: 20px;
    line-height: normal;
    text-align: center;
    letter-spacing: 0.04em;
    color: #FFFFFF;
  }
}
.car-time-num {
    font-size: 28px;
    line-height: 28rpx;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: normal;
    color: #6D7FD9;
    color: #FFFFFF;
    margin-right: 2px;
}
src/robotaxi/pages/begin-route/index.tsx
@@ -296,7 +296,7 @@
  const [finishCountdownEnabled, setFinishCountdownEnabled] = useState(false); // 完成倒计时是否启用
  const customCalloutIconUrl = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/maker-tooltip-right.png'; // 自定义气泡图标URL
  const waitingCalloutBgUrl = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/tooltip-bg-20260715.png'; // 等待气泡背景图URL
  const waitingRadarUrl = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/waiting-radar.webp'; // 等待雷达动画图URL
  const waitingRadarUrl = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/waiting-radar-20260728.webp'; // 等待雷达动画图URL
  const [isRouteSelectExpanded, setIsRouteSelectExpanded] = useState(false); // 路线选择展开状态
  const [isPickupRouteChangeVisible, setIsPickupRouteChangeVisible] = useState(false); // 接驾态路线切换卡片展示状态
  const [isConfirmingPickupRouteChange, setIsConfirmingPickupRouteChange] = useState(false); // 接驾态确认切换路线提交中
src/robotaxi/pages/select-map-site/hooks/use-select-map-site-state.ts
@@ -42,7 +42,7 @@
  const tooltipBgUrl = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/tooltip-bg-20260715.png'; // 提示背景图资源
  const [tooltipBgSrc, setTooltipBgSrc] = useState(tooltipBgUrl); // 提示背景图路径
  const [isAndroid, setIsAndroid] = useState(false); // 是否安卓机型
  const waitingRadarSrc = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/waiting-radar.webp'; // 加载雷达图
  const waitingRadarSrc = 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/waiting-radar-20260728.webp'; // 加载雷达图
  const [nearbyLoading, setNearbyLoading] = useState(false); // 附近站点加载态
  const pendingNearbyRequestCountRef = useRef(0); // 待完成附近站点请求数
src/robotaxi/pages/share-trip/hooks/use-map-markers.ts
@@ -11,11 +11,12 @@
// 站点名称 label(图标下方)统一配置,对齐 begin-route SITE_NAME_LABEL_BASE
const SITE_NAME_LABEL_BASE = {
    color: '#141E27',
    fontSize: 11,
    fontSize: 12,
    anchorX: 0,
    anchorY: 9, // 图标下方 9px
    textAlign: 'center' as const,
    bgColor: '#00000000',
    fontWeight: 'bold',
    borderWidth: 0,
    borderRadius: 0,
    padding: 0
@@ -23,11 +24,12 @@
// 到达终点态:站点名称在图标下方 8px
const SITE_NAME_LABEL_BELOW_LG = {
    color: '#141E27',
    fontSize: 11,
    fontSize: 12,
    anchorX: 0,
    anchorY: 8,
    textAlign: 'center' as const,
    bgColor: '#00000000',
    fontWeight: 'bold',
    borderWidth: 0,
    borderRadius: 0,
    padding: 0
src/robotaxi/pages/share-trip/index.tsx
@@ -108,7 +108,7 @@
    tripStatus,
    assetUrls: {
      customCalloutIconUrl: 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/maker-tooltip-right.png',
      waitingRadarUrl: 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/waiting-radar.webp',
      waitingRadarUrl: 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/waiting-radar-20260728.webp',
    }
  });