style(evaluate-popup): 优化评分弹窗布局与取消弹窗边框样式

ai-coding

2026-07-26 cc65df81d0e0daff679260aaabffc48cbfbc82b6

style(evaluate-popup): 优化评分弹窗布局与取消弹窗边框样式

Co-Authored-By: 何宏文 <hehw@xiaopeng.com>

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

@@ -124,7 +124,7 @@

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

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

@@ -22,7 +22,7 @@
        right: 0;
        background: #F1F5FA;
        border-radius: 60px 60px 0 0;
        padding: 42px 0 88px 0;
        padding: 64px 0 88px 0;

        .evaluate-rating-switcher,
        .content-box {
@@ -40,13 +40,12 @@
        }

        &-close {
            display: flex;
            justify-content: flex-end;
            padding-right: 34px;

            position: absolute;
            top: 34px;
            right: 34px;
            image {
                width: 36px;
                height: 36px;
                width: 40px;
                height: 40px;
            }
        }

@@ -68,7 +67,7 @@
        }

        .evaluate-rating-switcher {
            margin-top: 18px;
           
            padding: 0 49px;
            display: flex;
            flex-direction: column;
@@ -194,14 +193,14 @@
                    padding: 24px;
                    padding-bottom: 16px;
                    font-size: 28px;
                    color: rgba(0, 0, 0, 0.9);
                    color: rgba(20, 30, 39, 0.4);
                    height: 196px;
                }

                .placeholder-class {
                    font-size: 28px;
                    line-height: 44px;
                    color: rgba(0, 0, 0, 0.25);
                    color: rgba(20, 30, 39, 0.4);
                }

                .evaluate-problem-desc-count {
@@ -211,7 +210,7 @@
                    font-size: 20px;
                    line-height: 20px;
                    letter-spacing: normal;
                    color: rgba(0, 0, 0, 0.25);
                    color: rgba(20, 30, 39, 0.4);
                }
            }

@@ -223,17 +222,17 @@

                &-item {
                    position: relative;
                    width: 208px;
                    height: 208px;
                    border-radius: 16px;
                    // overflow: hidden;
                    width: 196px;
                    height: 196px;
                    border-radius: 32px;
                    overflow: hidden;
                    background: rgba(0, 0, 0, 0.03);
                }

                &-img {
                    flex-shrink: 0;
                    width: 208px;
                    height: 208px;
                    width: 196px;
                    height: 196px;
                    object-fit: cover;
                }

@@ -277,8 +276,8 @@

                &-delete {
                    position: absolute;
                    top: -10px;
                    right: -10px;
                    top: 4px;
                    right: 4px;
                    z-index: 2;

                    .delete-icon {
@@ -299,14 +298,14 @@

                &-upload {
                    flex-shrink: 0;
                    width: 208px;
                    height: 208px;
                    width: 196px;
                    height: 196px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    border-radius: 16px;
                    border-radius: 32px;
                    background: #E8ECF1;

                    &-img {
@@ -314,11 +313,13 @@
                        height: 48px;
                    }

                    &-count {
                        font-size: 24px;
                        line-height: 40px;
                    &-text {
                        font-family: PingFang SC;
                        font-size: 20px;
                        font-weight: normal;
                        line-height: 32px;
                        letter-spacing: normal;
                        color: rgba(0, 0, 0, 0.25);
                        color: rgba(20, 30, 39, 0.5);
                    }
                }
            }
@@ -330,16 +331,24 @@
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 32px 80px;
            gap: 16px;
            box-sizing: border-box;
            z-index: 2;
            font-size: 30px;
            letter-spacing: normal;
            color: #FFFFFF;
            text-align: center;
            border-radius: 1000px;
            background: #141E27;

            &-btn {
                width: 100%;
                height: 104px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 32px 80px;
                gap: 16px;
                box-sizing: border-box;
                z-index: 2;
                font-size: 30px;
                letter-spacing: normal;
                color: #FFFFFF;
                text-align: center;
                border-radius: 1000px;
                background: #D6D9DC;
            }
        }

        .ok-btn {

 src/robotaxi/pages/begin-route/components/evaluate-popup.tsx

@@ -45,6 +45,8 @@
    const isSubmittingRef = useRef(false); // 同步提交锁，防止快速重复点击导致的并发提交
    const ratingSwitchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null); // 评分切换过渡计时器
    const ratingOptionsRequestIdRef = useRef(0); // 拉取问题类型请求序号，避免异步串台
    const ratingTouchStartRef = useRef<{ x: number; y: number } | null>(null); // 弹窗区域滑动起点
    const ratingTouchMoveRef = useRef<{ x: number; y: number } | null>(null); // 弹窗区域滑动过程点
    const {
        images: pictures,
        uploading,
@@ -64,7 +66,7 @@
        1: {
            title: '“不满意，我要吐槽”',
            summary: '不满意，我要吐槽',
            placeholder: '请详描述您遇到的问题（可添加相关截图辅助说明）'
            placeholder: '请描述您的建议或问题'
        },
        2: {
            title: '“一般般，还需努力”',
@@ -79,7 +81,7 @@
    }[currentOrderRating] || {
        title: '“不满意，我要吐槽”',
        summary: '不满意，我要吐槽',
        placeholder: '请详描述您遇到的问题（可添加相关截图辅助说明）'
        placeholder: '请描述您的建议或问题'
    };
    const evaluateDimensionMap: Record<number, number> = {
        3: 1,
@@ -113,6 +115,65 @@
            setSelectedRating(rating);
            ratingSwitchTimerRef.current = null;
        }, 120);
    };

    const getTouchPoint = (touch: any) => ({
        x: Number(touch?.pageX ?? touch?.clientX ?? touch?.x ?? 0),
        y: Number(touch?.pageY ?? touch?.clientY ?? touch?.y ?? 0)
    });

    /**
     * 评分区域：记录滑动起点。
     */
    const handleRatingTouchStart = (e: any) => {
        const touch = e?.touches?.[0];
        if (!touch) {
            return;
        }
        const point = getTouchPoint(touch);
        ratingTouchStartRef.current = point;
        ratingTouchMoveRef.current = point;
    };

    /**
     * 弹窗区域：实时记录滑动坐标，兼容部分端 changedTouches 缺失。
     */
    const handleRatingTouchMove = (e: any) => {
        const touch = e?.touches?.[0];
        if (!touch) {
            return;
        }
        ratingTouchMoveRef.current = getTouchPoint(touch);
    };

    /**
     * 评分区域：左右滑动切换满意度。
     */
    const handleRatingTouchEnd = (e: any) => {
        const start = ratingTouchStartRef.current;
        ratingTouchStartRef.current = null;
        if (!start || isRatingSwitching) {
            return;
        }
        const touch = e?.changedTouches?.[0];
        const point = touch ? getTouchPoint(touch) : ratingTouchMoveRef.current;
        if (!point) {
            return;
        }
        const endX = point.x;
        const endY = point.y;
        const deltaX = endX - start.x;
        const deltaY = endY - start.y;
        const minSwipeDistance = 24;

        // 只响应明显的水平滑动，避免与纵向滚动或点击冲突。
        if (Math.abs(deltaX) < minSwipeDistance || Math.abs(deltaX) <= Math.abs(deltaY)) {
            return;
        }

        const direction = deltaX < 0 ? 1 : -1; // 左滑=下一档，右滑=上一档
        const nextRating = Math.min(3, Math.max(1, selectedRating + direction));
        handleSelectRating(nextRating);
    };

    const toggleFeedbackType = (typeId: unknown) => {
@@ -256,9 +317,15 @@
    return (
        <View className='evaluate-popup' catchMove onClick={(e) => e.stopPropagation()}>
            <View className='evaluate-mask' onClick={onClose}></View>
            <View className={`evaluate-content ${isRatingSwitching ? 'is-rating-switching' : ''}`} animation={animationData}>
            <View
                className={`evaluate-content ${isRatingSwitching ? 'is-rating-switching' : ''}`}
                animation={animationData}
                onTouchStart={handleRatingTouchStart}
                onTouchMove={handleRatingTouchMove}
                onTouchEnd={handleRatingTouchEnd}
            >
                <View className='evaluate-content-close'>
                    <Image onClick={onClose} src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/close-icon.png" />
                    <Image onClick={onClose} src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/close-fill-20260726.svg" />
                </View>
                <View className='evaluate-rating-switcher'>
                    <View className='evaluate-rating-switcher-title'>您对本次行程满意吗？</View>
@@ -281,7 +348,7 @@
                <View className='content-box'>
                    {!hideFeedbackType && (
                        <View className='evaluate-problem-type'>
                            <View className='evaluate-problem-type-title'>反馈的问题类型：</View>
                           
                            <View className='evaluate-problem-type-content'>
                                {typeOptions.map((item) => (
                                    <View key={item?.id} className={`evaluate-problem-type-content-item ${selectedTypeIds.includes(normalizeFeedbackTypeId(item?.id)) && 'active-tag'}`} onClick={() => toggleFeedbackType(item?.id)}>
@@ -335,8 +402,8 @@
                        {
                            pictures.length < 3 && (
                                <View className='evaluate-problem-pic-box-upload' onClick={chooseAndUpload}>
                                    <Image className='evaluate-problem-pic-box-upload-img' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/upload-icon.png" />
                                    <View className='evaluate-problem-pic-box-upload-count'>{pictures.length}/3</View>
                                    <Image className='evaluate-problem-pic-box-upload-img' src="https://s.xiaopeng.com/xp-fe/robot-taxi/imgs/v2/add-icon-20260726.svg" />
                                    <View className='evaluate-problem-pic-box-upload-text'>上传图片/视频</View>
                                </View>
                            )
                        }

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

@@ -45,8 +45,8 @@
    }

    .end-icon {
      background: @black-text-main;
    }
      background: @gold-light ;
    } 

    .search-input {
      flex: 1;