Merge branch 'feature_v2.4.0_ui_fuqj' into 'feature_v2.4.0_ui'

卢春龙

2026-07-24 93a4b7be9d9bf49b8a3e8a892635cd0b599e9586

Merge branch 'feature_v2.4.0_ui_fuqj' into 'feature_v2.4.0_ui'

修改部分UI问题 (符启基)

See merge request robotaxi1/xp-robotaxi-miniprogram!169

 src/pages/robotaxi/home/components/order-status-card/index.tsx

@@ -41,8 +41,8 @@
        <View className="order-status-left">
          {
            orderData.vehiclePictures
              ? <Image className="order-status-left-icon" src={safeParse(orderData.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/vehicle-default.png'} />
              : <Image className="order-status-left-icon" src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/vehicle-default.png' />
              ? <Image className="order-status-left-icon" src={safeParse(orderData.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png'} />
              : <Image className="order-status-left-icon" src='https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png' />
          }
          <View className="order-status-left-detail">
            <View>{orderData.plateNumber}</View>

 src/pages/robotaxi/home/index.less

@@ -126,17 +126,14 @@
    .is-maintain {
      margin-top: 20px;
      border-radius: 16px;
      background: rgba(255, 249, 226, 0.9);
      background: #F0AC59;
      box-sizing: border-box;
      border: 2px solid #ffffff;
      backdrop-filter: blur(40px);
      box-shadow: 0px 4px 16px 0px rgba(84, 92, 143, 0.1);
      font-size: 24px;
      font-weight: normal;
      line-height: 64px;
      text-align: center;
      letter-spacing: normal;
      color: #f58900;
      color: #ffffff;
      padding: 0 24px;
      width: fit-content;

@@ -160,7 +157,7 @@
      display: flex;
      align-items: center;
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.4);
      background: #6E7378;
      backdrop-filter: blur(40px);
      padding: 9px 24px;

@@ -178,7 +175,7 @@
        font-weight: normal;
        line-height: 46px;
        letter-spacing: normal;
        color: #afea60;
        color: #FFD389;
      }
    }
  }
@@ -287,7 +284,7 @@
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      padding: 3px 40px 32px 20px;
      padding: 3px 20px 32px 20px;
      height: 80px;
      box-sizing: border-box;
      min-width: 186px;
@@ -312,6 +309,7 @@
        letter-spacing: normal;
        color: #ffffff;
        line-height: 48px;
        padding-right: 20px;
      }
    }

@@ -590,7 +588,8 @@
        .to-site-address {
          display: flex;
          align-items: center;

          justify-content: space-between;
          flex: 1;
          .to-site-text {
            flex-shrink: 0;
            font-size: 40px;
@@ -602,8 +601,8 @@
          }

          .to-site-fast {
            border-radius: 12px;
            background: #ffffff;
            background: rgba(204, 208, 215, 0.25);
            border-radius: 60px;
            padding: 8px 21px;
            display: flex;
            align-items: center;

 src/robotaxi/pages/begin-route/components/calling-car.tsx

@@ -199,7 +199,7 @@
            [TripStatus.VehicleApproaching, TripStatus.VehicleArrivedPickup, TripStatus.InService].includes(tripStatus) && vehicleInfo?.vehiclePictures &&
            <Image
              className='calling-car-vehicle-pic'
              src={safeParse(vehicleInfo?.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/vehicle-default.png'}
              src={safeParse(vehicleInfo?.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png'}
            />
          }
          <View className='calling-car-content-box'>

 src/robotaxi/pages/begin-route/components/css-folder/cancel-popup.less

@@ -139,7 +139,7 @@
                flex: 1;
                text-align: center;
                border-radius: 1000px;
                border: 1px solid #141E27;
                border: 2px solid #141E27;
                font-size: 32px;
                line-height: 104px;
                text-align: center;

 src/robotaxi/pages/begin-route/components/css-folder/modify-destination-review.less

@@ -1,3 +1,6 @@
@import '../../../../style/ui-variables.less';


.modify-destination-review-container {
  position: relative;
  width: 100vw;
@@ -6,7 +9,7 @@
.modify-destination-review {
  position: relative;
  width: 100%;
  border-radius: 40px 40px 0 0;
  border-radius: 60px 60px 0 0;
  background: transparent;
  z-index: 10;
  overflow: hidden;
@@ -25,26 +28,24 @@

  &-content-wrapper {
    position: relative;
    padding-bottom: 180px;
    background: #f2f3f7 url('https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/site-top-bg-20260507.png') no-repeat top center;
    background-size: 100% auto;
    border-top: 2px solid #ffffff;
    border-radius: 40px 40px 0 0;
    padding-bottom: 204px;
    background: @gary-theme;
    border-radius: 60px 60px 0 0;
  }

  &-content {
    position: relative;
    padding: 40px 32px 40px;
    padding: 48px;
    z-index: 10;
  }

  &-title {
    position: relative;
    z-index: 1;
    font-size: 28px;
    font-size: 36px;
    font-weight: 500;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.9);
    line-height: 48px;
    color: @black-text-main;
  }

  .modify-destination-review-tip {
@@ -54,21 +55,21 @@
    font-size: 24px;
    line-height: 36px;
    letter-spacing: normal;
    color: rgba(0, 0, 0, 0.4);
    color: @black-text-04;
    margin-bottom: 32px;
  }

  &-sites,
  &-sites-card {
  // 站点样式参考 cancel-popup 的 cancel-site-box：灰底盒子 + 左侧起终点圆点虚线列
  .modify-destination-review-select-site {
    position: relative;
    z-index: 1;
    padding: 24px;
    border-radius: 24px;
    background: #ffffff;
    display: flex;
    gap: 16px;
    padding: 40px 32px 36px 24px;
    border-radius: 40px;
    background: rgba(204, 208, 215, 0.25);
    box-sizing: border-box;
    border: 2px solid #ffffff;
    backdrop-filter: blur(20px);
    box-shadow: 0 40px 60px 0 rgba(87, 99, 147, 0.1);
    height: fit-content;
  }

  &-trip-card {
@@ -81,48 +82,56 @@
    box-shadow: 0 20px 40px 0 rgba(87, 99, 147, 0.08);
  }

  &-site-item {
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 0 24px;
    border-radius: 20px;

    &+& {
      margin-top: 12px;
    }
  .modify-destination-review-select-site-start {
    color: @black-text-04;
  }

  &-site-item-active {
    background: #F5F6FA;
  }

  &-site-dot {
    width: 12px;
    height: 12px;
    margin-right: 20px;
    border-radius: 50%;
  .modify-destination-review-select-site-icon {
    padding: 16px 0;
    flex-shrink: 0;

    &-old {
      background: #768aff;
    }

    &-new {
      background: #9cc14e;
    }
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .start-txt {
    color: rgba(0, 0, 0, 0.4);
  .modify-destination-review-select-site-icon-start {
    width: 16px;
    height: 16px;
    background: #DFB369;
    border-radius: 50%;
  }

  &-site-text {
  .modify-destination-review-select-site-icon-end {
    width: 16px;
    height: 16px;
    background: @black-text-main;
    border-radius: 50%;
  }

  .modify-destination-review-select-site-icon image {
    flex: 1;
    font-size: 30px;
    line-height: 42px;
    color: rgba(0, 0, 0, 0.9);
    width: 2px;
    margin: 7px 0;
    height: fit-content;
  }

  .modify-destination-review-select-site-content {
    flex: 1;
    min-width: 0;
    font-size: 32px;
    line-height: 48px;
    letter-spacing: normal;
    color: @black-text-main;
  }

  .modify-destination-review-select-site-start,
  .modify-destination-review-select-site-end {
    word-break: break-all;
  }

  .modify-destination-review-select-site-divider {
    margin: 34px 32px 40px 0px;
    border-top: 1px solid rgba(204, 208, 215, 0.25);
  }

  &-footer {
@@ -131,10 +140,10 @@
    right: 0;
    bottom: 0;
    z-index: 11;
    height: 180px;
    height: 204px;
    box-sizing: border-box;
    padding: 24px 38px 0 32px;
    background: #fefeff;
    padding: 28px 48px 72px 48px;
    background: @gary-theme;
    display: flex;
    align-items: center;
    justify-content: space-between;
@@ -145,12 +154,21 @@
    min-width: 0;
  }

  &-fare-main {
  // 预估价样式参考 release-route 的 money-box（route-content-top-money）
 .modify-destination-review-fare-main {
    display: flex;
    align-items: first baseline;
    font-size: 20px;
    line-height: normal;
    letter-spacing: normal;
    color: rgba(20, 30, 39, 0.4);
  }

  &-fare-forecast {
    margin-top: 28px;
    display: flex;
    align-items: center;
    font-size: 24px;
    line-height: 36px;
    color: rgba(0, 0, 0, 0.9);
    gap: 4px;
  }

  &-fare-original {
@@ -166,10 +184,9 @@
    }
  }

  &-tip-icon {
    width: 22px;
    height: 22px;
    margin-right: 4px;
  .modify-destination-review-tip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

@@ -179,11 +196,20 @@
    color: #f58900;
  }

  &-fare-num {
    margin: 0 6px;
    font-size: 56px;
    line-height: 56px;
    color: rgba(0, 0, 0, 0.9);
  .modify-destination-review-fare-num {
    margin: 0 4px;
    font-size: 60px;
    line-height: normal;
    letter-spacing: normal;
    font-family: "XPSANS-Bold";
    color: #141E27;
  }

  &-fare-unit {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
  }

  &-fare-discount {
@@ -206,14 +232,14 @@
  &-confirm {
    flex-shrink: 0;
    width: 296px;
    height: 94px;
    border-radius: 20px;
    background: linear-gradient(102deg, #8475ff 0%, #7dd6ff 102%);
    height: 104px;
    border-radius: 2000px;
    background: @black-text-main;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 40px;
    font-size: 32px;
    line-height: 44px;
    color: #ffffff;
  }

@@ -226,7 +252,8 @@
    position: relative;
    flex-shrink: 0;
    width: 296px;
    height: 94px;
    height: 104px;
    border-radius: 2000px;
  }

  &-confirm-mask {
@@ -235,7 +262,7 @@
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border-radius: 2000px;
    background: rgba(255, 255, 255, 0.45);
    z-index: 2;
  }

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

@@ -383,24 +383,28 @@

                .route-content-top-money {
                    display: flex;
                    align-items: center;
                    align-items: first baseline;
                    font-size: 20px;
                    line-height: normal;
                    letter-spacing: normal;
                    color: @black-text-04;
                    .tip-icon-box {
                      display: flex;
                      justify-content: center;
                      flex-direction: column;
                      gap: 8px;
                      justify-content: first baseline;
                    }
                    .forecast-text {
                      margin-top: 28px;
                      display: flex;
                      align-items: center;
                      gap: 4px;
                    }
                    .tip-icon {
                        width: 20px;
                        height: 20px;
                        flex-shrink: 0;
                      width: 20px;
                      height: 20px;
                      flex-shrink: 0;
                    }
                    .unit-text {
                      display: flex;
                      align-items: center;
                    }

                    .money-num {

 src/robotaxi/pages/begin-route/components/modify-destination-review.tsx

@@ -361,21 +361,21 @@
              </View>
            ) : null}
            <View className="modify-destination-review-select-site">
              <View className="modify-destination-review-sites-card">
                <View className="modify-destination-review-site-item">
                  <View className="modify-destination-review-site-dot modify-destination-review-site-dot-old" />
                  <View className="modify-destination-review-site-text start-txt">
                    {startSite?.name || "-"}
                  </View>
              <View className="modify-destination-review-select-site-icon">
                <View className="modify-destination-review-select-site-icon-start"></View>
                <Image src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/dotted-line.png" />
                <View className="modify-destination-review-select-site-icon-end"></View>
              </View>
              <View className="modify-destination-review-select-site-content">
                <View className="modify-destination-review-select-site-start">
                  {startSite?.name || "-"}
                </View>
                <View className="modify-destination-review-select-site-divider"></View>
                <View
                  className="modify-destination-review-site-item modify-destination-review-site-item-active"
                  className="modify-destination-review-select-site-end"
                  onClick={() => onEditDestination?.()}
                >
                  <View className="modify-destination-review-site-dot modify-destination-review-site-dot-new" />
                  <View className="modify-destination-review-site-text">
                    {nextEndSite?.name || "-"}
                  </View>
                  {nextEndSite?.name || "-"}
                </View>
              </View>
            </View>
@@ -391,15 +391,17 @@
                      className="modify-destination-review-fare-main"
                      onClick={toPriceDescription}
                    >
                      <Image
                        className="modify-destination-review-tip-icon"
                        src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/tip-default-icon.png"
                      />
                      预估
                      <View className="modify-destination-review-fare-forecast">
                        <Image
                          className="modify-destination-review-tip-icon"
                          src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/tip-default-icon.png"
                        />
                        <Text>预估</Text>
                      </View>
                      <Text className="modify-destination-review-fare-num">
                        {fareEstimate?.finalFareStr || "-"}
                      </Text>
                      元
                      <View className="modify-destination-review-fare-unit">元</View>
                    </View>
                    <View
                      className={`modify-destination-review-fare-original${

 src/robotaxi/pages/begin-route/components/release-route.tsx

@@ -41,7 +41,7 @@
        if (!Number.isFinite(discountAmount) || discountAmount <= 0) {
            return '0元';
        }
        return `${parseFloat(discountAmount.toFixed(2))}元`;
        return `-${parseFloat(discountAmount.toFixed(2))}元`;
    };

    useEffect(() => {
@@ -268,11 +268,11 @@
                            ) : (
                                <View className="route-content-top-money" onClick={() => toPriceDescription()} >
                                    <View className="forecast-text">
                                      <Image className="tip-icon" src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/tip-default-icon.png" />
                                      <Text>预估</Text>
                                    </View>
                                    <Text className="money-num">{fareEstimate.finalFareStr || '-'}</Text>
                                    <View className="tip-icon-box">
                                      <Image className="tip-icon" src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/tip-default-icon.png" />
                                    <View className="unit-text">
                                      元
                                    </View>
                                </View>

 src/robotaxi/pages/begin-route/hooks/use-view-delegates.tsx

@@ -628,11 +628,15 @@
                        全程
                      </CoverView>
                      <CoverView className="endpoint-summary-value">
                        {deps.routeDistance.value}
                        <CoverView className="endpoint-summary-golden-value">
                          {deps.routeDistance.value}
                        </CoverView>
                        {deps.routeDistance.unit === "m" ? "米" : "公里"}
                      </CoverView>
                      <CoverView className="endpoint-summary-value">
                        {vehicleMetricDurationDisplay.value}
                        <CoverView className="endpoint-summary-golden-value">
                          {vehicleMetricDurationDisplay.value}
                        </CoverView>
                        {vehicleMetricDurationDisplay.unit}
                      </CoverView>
                    </CoverView>

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

@@ -289,8 +289,13 @@
}

.endpoint-summary-value {
  display: flex;
  align-items: center;
  font-weight: 500;
  .endpoint-summary-golden-value {
    margin: 0 4px;
    color: rgba(255, 209, 129, 1);
    font-weight: 500;
  }
}

.endpoint-summary-icon {
@@ -309,7 +314,7 @@
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 3px 40px 32px 20px;
    padding: 3px 20px 32px 20px;
    height: 80px;
    min-width: 186px;
    max-width: 400px;
@@ -346,6 +351,7 @@
    color: #FFFFFF;
    line-height: 48px;
    white-space: nowrap;
    padding-right: 20px;
}

.route-summary-callout {

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

@@ -10,7 +10,7 @@
import CreditPayPopup from './components/credit-pay-popup';
import CouponSelectPopup from '../../components/coupon-select-popup';
// 调试面板：模拟完整行程流转（仅 dev 构建可见）
import DebugOrderSimulatorPanel from './components/debug-order-simulator-panel';
// import DebugOrderSimulatorPanel from './components/debug-order-simulator-panel';
// 弹窗状态管理
import usePopupManager from './hooks/use-popup-manager';
// WebSocket 事件编排
@@ -2368,7 +2368,7 @@
        onClose={handleCloseCreditPayPopup}
        onConfirm={handleConfirmCreditPayPopup}
      />
      <DebugOrderSimulatorPanel
      {/* <DebugOrderSimulatorPanel
        orderId={orderId}
        setOrderId={setOrderId}
        setTripStatus={setTripStatus}
@@ -2379,7 +2379,7 @@
        setShowCancelPopup={setShowCancelPopup}
        setShowModifyDestinationFailPopup={setShowModifyDestinationFailPopup}
        setModifyDestinationFailMessage={setModifyDestinationFailMessage}
      />
      /> */}
    </>
  )
}

 src/robotaxi/pages/order/detail/index.tsx

@@ -302,7 +302,7 @@
                  <Text className='code'>{orderData.vehicleCode}</Text> */}
                </View>
              </View>
              <Image src={safeParse(orderData.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/vehicle-default.png'} className='car-img' />
              <Image src={safeParse(orderData.vehiclePictures, {})?.url || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png'} className='car-img' />
            </View>
          }
          {

 src/robotaxi/pages/select-map-site/components/select-map-site-view.tsx

@@ -152,7 +152,7 @@
                <View className="content-box-coantainer">
                  <View className="content-box-item">
                    <View className='content-box-item-title'>
                      <View className="content-title">{shouldShowStationSelection ? deps.selectedStation?.name : (deps.pageType === 'start' ? '确认上车站点' : '确认目的地')}</View>
                      <View className="content-title">{shouldShowStationSelection ? deps.selectedStation?.name : (deps.pageType === 'start' ? '确认上车点' : '确认目的地')}</View>
                      {deps.pageType === 'start' && deps.walkingDuration !== null && deps.walkingDistance !== null && (
                        <View className="limit-tip">
                          从当前位置出发步行{formatTripDurationFromSeconds(deps.walkingDuration)}（{formatTripDistance(deps.walkingDistance)}）上车

 src/robotaxi/pages/select-map-site/index.less

@@ -132,7 +132,7 @@
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            padding: 3px 40px 32px 20px;
            padding: 3px 20px 32px 20px;
            height: 80px;
            box-sizing: border-box;
            min-width: 186px;
@@ -165,6 +165,7 @@
                letter-spacing: normal;
                color: #FFFFFF;
                line-height: 48px;
                padding-right: 20px;
            }
        }


 src/robotaxi/pages/share-trip/components/share-trip-view.tsx

@@ -111,7 +111,7 @@
                  className='calling-car-vehicle-pic'
                  src={
                    safeParse(tripData?.vehiclePictures, {})?.url
                    || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/vehicle-default.png'
                    || 'https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/default-vehicle-img-20260724-v2.png'
                  }
                />
              )}

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

@@ -54,7 +54,7 @@
      font-size: 32px;
      font-weight: normal;
      line-height: normal;
      color: @black-text-04;
      color: @black-text-main;
      text-align: left;
      padding: 0;
      margin: 0;