feat: 增加动效调试面板

lucl

2026-08-10 2bb52bfbc6208ac4de9f31f3120e03a27455985b

feat: 增加动效调试面板

 src/robotaxi/pages/begin-route/components/debug-transition-panel.tsx

New file
@@ -0,0 +1,166 @@
import { View, Text } from '@tarojs/components';
import { TripStatus } from '../../../constants/trip-status';
import { ensureSimulationOrderId } from '../dev/order-flow-simulator';

type Props = {
  /** 当前页面订单 ID（为空时自动生成）。 */
  orderId: string;
  /** 设置页面订单 ID。 */
  setOrderId: (orderId: string) => void;
  /** 设置行程状态。 */
  setTripStatus: (status: TripStatus) => void;
  /** 绑定 socket 业务监听。 */
  bindSocketListeners: () => void;
};

/**
 * 转场动效调试面板（仅 dev 构建可见）。
 *
 * ## 用途
 * 提供「呼叫中(3)→派单成功(4)」和「送驾中(6)→行程结束(8)」两个关键转场的独立调试入口，
 * 固定在地图上方，始终可见，方便反复验证转场动效。
 *
 * ## 使用方法
 * 1. 点击「呼叫中(3)」/「派单成功(4)」/「送驾中(6)」/「行程结束(8)」直接跳到指定态。
 * 2. 点击「重放转场」自动执行序列：先设前一态 → 400ms 后设后一态，稳定触发转场动效。
 * 3. 打开页面前需先清缓存，避免被 redirectTo 首页。
 */  
export default function DebugTransitionPanel(props: Props) {
  if (process.env.NODE_ENV === 'production') {
    return null;
  }

  /** 生成或复用订单 ID。 */
  const resolveOrderId = (): string => {
    const existing = String(props.orderId || '').trim();
    if (existing) {
      return existing;
    }
    return `SIM-${Date.now()}`;
  };

  const prepOrder = () => {
    props.bindSocketListeners();
    const orderId = resolveOrderId();
    ensureSimulationOrderId(orderId);
    props.setOrderId(orderId);
  };

  /** 呼叫中(3) */
  const handleSetCallingCar = () => {
    prepOrder();
    props.setTripStatus(TripStatus.CallingCar);
  };

  /** 派单成功(4) */
  const handleSetVehicleApproaching = () => {
    prepOrder();
    props.setTripStatus(TripStatus.VehicleApproaching);
  };

  /** 重放 呼叫中→派单成功：3 → 400ms → 4 */
  const handleReplayCallingToDispatch = () => {
    prepOrder();
    props.setTripStatus(TripStatus.CallingCar);
    setTimeout(() => {
      props.setTripStatus(TripStatus.VehicleApproaching);
    }, 400);
  };

  /** 送驾中(6) */
  const handleSetInService = () => {
    prepOrder();
    props.setTripStatus(TripStatus.InService);
  };

  /** 行程结束(8) */
  const handleSetTripFinished = () => {
    prepOrder();
    props.setTripStatus(TripStatus.TripFinished);
  };

  /** 重放 送驾中→行程结束：6 → 400ms → 8 */
  const handleReplayInServiceToFinished = () => {
    prepOrder();
    props.setTripStatus(TripStatus.InService);
    setTimeout(() => {
      props.setTripStatus(TripStatus.TripFinished);
    }, 400);
  };

  const btn = (bg: string) =>
    ({
      flex: 1,
      textAlign: 'center' as const,
      padding: '7px 0',
      margin: '0 3px',
      background: bg,
      color: '#fff',
      fontSize: '12px',
      borderRadius: '6px',
    } as const);

  return (
    <View
      catchMove
      style={{
        position: 'fixed',
        left: '8px',
        right: '8px',
        top: '8px',
        zIndex: 9998,
        padding: '8px 10px',
        background: 'rgba(20,20,20,0.88)',
        color: '#fff',
        borderRadius: '10px',
        boxShadow: '0 2px 12px rgba(0,0,0,0.35)',
      }}
    >
      {/* 呼叫派单转场 */}
      <View
        style={{
          fontSize: '11px',
          lineHeight: '1.5',
          marginBottom: '4px',
          opacity: 0.85,
        }}
      >
        <Text style={{ fontWeight: 'bold' }}>呼叫派单转场（呼叫中 → 派单成功）</Text>
      </View>
      <View style={{ display: 'flex', marginBottom: '6px' }}>
        <View onClick={handleSetCallingCar} style={btn('#4b9fd6')}>
          呼叫中(3)
        </View>
        <View onClick={handleSetVehicleApproaching} style={btn('#36b37e')}>
          派单成功(4)
        </View>
        <View onClick={handleReplayCallingToDispatch} style={btn('#ff7a45')}>
          重放转场
        </View>
      </View>

      {/* 送驾到达转场 */}
      <View
        style={{
          fontSize: '11px',
          lineHeight: '1.5',
          marginBottom: '4px',
          opacity: 0.85,
        }}
      >
        <Text style={{ fontWeight: 'bold' }}>送驾到达转场（送驾中 → 行程结束）</Text>
      </View>
      <View style={{ display: 'flex' }}>
        <View onClick={handleSetInService} style={btn('#4b9fd6')}>
          送驾中(6)
        </View>
        <View onClick={handleSetTripFinished} style={btn('#36b37e')}>
          行程结束(8)
        </View>
        <View onClick={handleReplayInServiceToFinished} style={btn('#ff7a45')}>
          重放转场
        </View>
      </View>
    </View>
  );
}

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

@@ -11,6 +11,8 @@
import CouponSelectPopup from '../../components/coupon-select-popup';
// 调试面板：模拟完整行程流转（仅 dev 构建可见）
// import DebugOrderSimulatorPanel from './components/debug-order-simulator-panel';
// 转场动效调试面板：呼叫中→派单成功、送驾中→行程结束（仅 dev 构建可见）
import DebugTransitionPanel from './components/debug-transition-panel';
// 到达结束态全屏礼花动效
import TripFinishedFireworks from './components/trip-finished-fireworks';
// 弹窗状态管理
@@ -2693,6 +2695,13 @@
        onConfirm={handleConfirmCreditPayPopup}
      />
      <TripFinishedFireworks tripStatus={tripStatus} />
      {/* 转场动效调试面板 — 固定在地图上方，始终可见 */}
      <DebugTransitionPanel
        orderId={orderId}
        setOrderId={setOrderId}
        setTripStatus={setTripStatus}
        bindSocketListeners={bindSocketListeners}
      />
      {/* 模拟器入口已关闭，如需本地调试可取消下方注释
      <DebugOrderSimulatorPanel
        orderId={orderId}