dtScreen/src/components/ui/CrossingDetailPanel.vue

<template>
    <div class="crossing-detail-panel">
        <div class="detail-panel-left">
            <div class="intersection-video-wrap">
                <IntersectionMapVideos :mapData="intersectionData" :videoUrls="currentRoute.cornerVideos" />
            </div>
            <div class="signal-timing-wrap">
                <div class="header">
                    <div class="title-area">
                        <span class="main-title">方案状态</span>
                        <span class="sub-info">(周期: {{ cycleLength }} 相位差: {{ phaseDiff }} 协调时间: {{ coordTime }})</span>
                    </div>
                </div>

                <SignalTimingChart :cycleLength="cycleLength" :currentTime="currentSec" :phaseData="mockPhaseData"
                    :showScanLine="dataReady" :autoScan="dataReady" @scan-tick="onScanTick" />
            </div>
        </div>

        <div class="detail-panel-right">
            <form class="detail-right-form" @submit.prevent>
                <div class="form-group">
                    <div class="control-method">
                        <div class="control-label-wrap">
                            <span class="control-label">控制方式</span>
                            <div class="control-operation">
                                <div class="operation-btn" :class="{ 'is-active': isManualMode }"
                                    @click="toggleManualMode">
                                    {{ isManualMode ? '退出手动控制' : '手动控制' }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-interactive-area" :class="{ 'is-disabled': !isManualMode }">
                        <div class="control-method-content">
                            <SegmentedRadio v-model="currentMethod" :options="controlMethodOptions" size="auto" />
                        </div>

                        <div class="control-scheme" :class="{ 'is-disabled': isSchemeDisabled }">
                            <div class="control-label-wrap">
                                <span class="control-label">控制方案</span>
                                <DropdownSelect v-model="currentScheme" :options="schemeOptions" size="auto" />
                            </div>

                            <div class="current-stage">
                                <div class="current-stage-warp">
                                    <div class="current-stage-label">当前阶段：</div>
                                    <div v-for="(item, index) in currentStageList" :key="index" class="stage-item-wrapper">
                                        <div class="phase-box" :class="{ 'is-active': item.value === currentStage }"
                                            @click="currentStage = item.value">
                                            <img :src="item.img" alt="stage" class="phase-image" />
                                        </div>

                                        <div class="bottom-controls">
                                            <div class="input-unit-wrapper">
                                                <input type="number" v-model.number="item.time" class="stage-input"
                                                    :disabled="!canEditStage"
                                                    :title="canEditStage ? '修改阶段时间' : '当前控制方式不可修改'" />
                                                <span class="unit">s</span>
                                            </div>
                                            <span class="percent">{{ stagePercent(item.time) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 方案圆饼图 -->
                            <div class="donut-row" v-if="!showLockTime">
                                <div class="donut-item">
                                    <div class="donut-title">实时方案（执行方案3）</div>
                                    <PlanDonutChart :chartData="realtimeDonutData"
                                        :centerValue="String(realtimeRemaining)" centerLabel="剩余时长" :showTotal="true"
                                        :totalValue="cycleLength" :scale="panelScale" />
                                </div>
                                <div class="donut-item">
                                    <div class="donut-title">下周期方案</div>
                                    <PlanDonutChart :chartData="nextCycleDonutData" :centerValue="String(cycleLength)"
                                        centerLabel="总时长" :showTotal="false" :scale="panelScale" />
                                </div>
                            </div>

                            <transition name="fade">
                                <div class="lock-time" v-if="showLockTime">
                                    <div class="lock-time-label-wrap glow-header">
                                        <div class="lock-time-label">锁定时间</div>
                                        <div class="lock-time-close" @click="showLockTime = false">✕</div>
                                    </div>
                                    <div class="lock-time-options">
                                        <div class="lock-time-option">
                                            <label>
                                                <input type="radio" v-model="lockTimeType" value="continuous" /> 持续放行
                                            </label>
                                        </div>
                                        <div class="lock-time-option">
                                            <label>
                                                <input type="radio" v-model="lockTimeType" value="timer" /> 放行
                                                <DropdownSelect placeholder="锁定时间" v-model="currentLocktime"
                                                    :options="locktimeOptions" size="auto" @click.native.prevent />
                                                秒解锁
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </transition>
                        </div>
                    </div>

                    <div class="button-group" v-show="isManualMode">
                        <div>
                            <button type="button" class="btn btn-cancel" @click="onCancel()">取消</button>
                            <button type="button" class="btn btn-confirm" @click="onConfirm()">确认</button>
                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
</template>

<script>
import SignalTimingChart from '@/components/ui/SignalTimingChart.vue';
import IntersectionMapVideos from '@/components/ui/IntersectionMapVideos.vue';
import SegmentedRadio from '@/components/ui/SegmentedRadio.vue';
import DropdownSelect from '@/components/ui/DropdownSelect.vue';
import PlanDonutChart from '@/components/ui/PlanDonutChart.vue';

import { apiGetCrossingDetailData } from '@/api';

export default {
    name: 'CrossingPanel',
    components: {
        SignalTimingChart,
        IntersectionMapVideos,
        SegmentedRadio,
        DropdownSelect,
        PlanDonutChart
    },
    props: {
        preloadedData: { type: Object, default: null },
        iconMode: { type: String, default: 'simple' }  // 'default' | 'simple'
    },
    data() {
        return {
            // 核心状态控制
            isManualMode: false, // 是否处于手动控制模式
            showLockTime: false, // 是否显示锁定时间弹窗
            lockTimeType: 'continuous', // 锁定时间类型

            dataReady: false,
            followPhase: false,
            intersectionData: {},
            currentRoute: {},
            cycleLength: 140,
            currentSec: 0,
            phaseDiff: 0,
            coordTime: 0,
            mockPhaseData: [],
            panelScale: 1,

            // 控制方式数据
            controlMethodOptions: [],
            currentMethod: 'temp',
            currentScheme: 'early_peak',
            schemeOptions: [],
            // 实时方案圆饼图数据（从 phaseData 动态生成）
            realtimeDonutData: [],
            // 下周期方案圆饼图数据
            nextCycleDonutData: [],
            // 实时方案剩余时长
            realtimeRemaining: 0,
            // 各阶段基础数据（从 phaseData 解析）
            phaseStages: [],
            currentLocktime: 50,
            locktimeOptions: [],
            currentStage: '1',
            // 补充了 time 属性，用于双向绑定输入框的时间
            currentStageList: []
        }
    },
    computed: {
        // 黄闪、关灯、全红时禁用控制方案
        isSchemeDisabled() {
            return ['yellow_flash', 'lights_off', 'all_red'].includes(this.currentMethod);
        },
        // 定周期、中心控制、感应控制、临时方案可编辑当前阶段
        canEditStage() {
            return ['fixed', 'system', 'sensor', 'temp'].includes(this.currentMethod);
        }
    },
    watch: {
        // 监听控制方式切换
        currentMethod(newVal) {
            // 需求4：切换步进方案策略时，出现锁定时间弹窗
            if (newVal === 'step') {
                this.showLockTime = true;
            } else {
                this.showLockTime = false;
            }

            // 模拟需求1：根据不同模式，切换对应的控制方案数据 (Mock 逻辑)
            this.updateSchemeDataByMethod(newVal);
        }
    },
    mounted() {
        this.initScaleObserver();
        if (this.preloadedData) {
            this.applyData(this.preloadedData);
        } else {
            this.loadData();
        }
    },
    beforeDestroy() {
        if (this._ro) this._ro.disconnect();
    },
    methods: {
        stagePercent(time) {
            const total = this.currentStageList.reduce((s, item) => s + (item.time || 0), 0);
            if (!total) return '0%';
            return Math.round(time / total * 100) + '%';
        },
        onScanTick(activeTime) {
            if (!this.mockPhaseData || this.mockPhaseData.length === 0) return;
            // 只看第一轨道(trackIdx=0)的相位
            const phase = this.mockPhaseData.find(p => p[0] === 0 && activeTime >= p[1] && activeTime < p[2]);
            if (!phase) return;

            const type = phase[5];       // green/stripe/yellow/red
            const iconValue = phase[6];  // 如 "STRAIGHT_DOWN,STRAIGHT_UP"
            const direction = phase[7];  // ns/ew
            const phaseName = phase[3];  // P1/P2 等
            const endTime = phase[2];
            const remaining = Math.max(0, Math.round(endTime - activeTime));

            const nsGreen = (type === 'green' && direction === 'ns');
            const ewGreen = (type === 'green' && direction === 'ew');

            // 从图标值解析当前允许的行驶方向类型
            // STRAIGHT→S, TURN_*_LEFT→L, *_UTURN→U
            let activeArrowTypes = [];
            if ((nsGreen || ewGreen) && iconValue) {
                const icons = iconValue.split(',');
                icons.forEach(ic => {
                    if (ic.includes('UTURN')) activeArrowTypes.push('U');
                    if (ic.includes('TURN') && !ic.includes('UTURN')) activeArrowTypes.push('L');
                    if (ic.includes('STRAIGHT')) activeArrowTypes.push('S');
                });
                // 去重
                activeArrowTypes = [...new Set(activeArrowTypes)];
            }

            // 人行道全红判断：只有 P1/P3 绿灯期间人行道才有绿灯，其余时段全红
            const pedAllRed = !(type === 'green' && (phaseName === 'P1' || phaseName === 'P3'));

            this.$set(this.intersectionData, 'signals', {
                pedAllRed,
                ns: {
                    phaseName: nsGreen ? ({ P1: '南北直行', P2: '南北左转' }[phaseName] || '南北') : (this.intersectionData.signals?.ns?.phaseName || '南北'),
                    time: remaining,
                    isGreen: nsGreen,
                    activeArrowTypes: nsGreen ? activeArrowTypes : []
                },
                ew: {
                    phaseName: ewGreen ? ({ P3: '东西直行', P4: '东西左转' }[phaseName] || '东西') : (this.intersectionData.signals?.ew?.phaseName || '东西'),
                    time: remaining,
                    isGreen: ewGreen,
                    activeArrowTypes: ewGreen ? activeArrowTypes : []
                }
            });

            // 更新实时方案圆饼图的已走时长
            this.updateRealtimeDonut(activeTime);
        },
        // 从 phaseData 解析4个阶段的绿灯时长，构建圆饼图数据
        buildDonutFromPhaseData() {
            const phaseData = this.mockPhaseData || [];
            const stageColors = ['#3b82f6', '#a855f7', '#14b8a6', '#f59e0b'];
            const stageLabels = ['1-南北直行', '2-南北左转', '3-东西直行', '4-东西左转'];

            // 提取 track 0 的绿灯相位（每阶段的第一个 green）
            const greenPhases = phaseData.filter(p => p[0] === 0 && p[5] === 'green');
            const stages = greenPhases.slice(0, 4).map((p, i) => {
                const total = p[8] || Math.floor(this.cycleLength / 4);
                return {
                    label: stageLabels[i] || `阶段${i + 1}`,
                    value: total,           // 阶段总时长
                    start: p[1],            // 阶段开始时间（从绿灯起始）
                    end: p[1] + total,      // 阶段结束时间
                    color: stageColors[i]
                };
            });
            this.phaseStages = stages;

            // 实时方案：已走时长 + 4个阶段
            this.realtimeDonutData = [
                { label: '已走时长', value: 0, color: '#8892a0' },
                ...stages.map(s => ({ label: s.label, value: s.value, color: s.color }))
            ];
            this.realtimeRemaining = this.cycleLength;

            // 下周期方案：4个阶段，初始数据与实时方案相同
            this.nextCycleDonutData = stages.map(s => ({
                label: s.label,
                value: s.value,
                color: s.color
            }));
        },
        // 根据扫描线时间更新实时方案圆饼图
        updateRealtimeDonut(activeTime) {
            if (this.phaseStages.length === 0) return;
            const elapsed = Math.round(activeTime);
            const remaining = Math.max(0, this.cycleLength - elapsed);
            this.realtimeRemaining = remaining;

            // 计算各阶段的剩余时长
            const stageValues = this.phaseStages.map(s => {
                if (activeTime >= s.end) return 0;            // 阶段已完成
                if (activeTime < s.start) return s.value;     // 阶段未开始
                return Math.max(0, Math.round(s.end - activeTime)); // 阶段进行中
            });

            this.realtimeDonutData = [
                { label: '已走时长', value: elapsed, color: '#8892a0' },
                ...this.phaseStages.map((s, i) => ({
                    label: s.label,
                    value: stageValues[i],
                    color: s.color
                }))
            ];
        },
        initScaleObserver() {
            const ro = new ResizeObserver(entries => {
                const { width } = entries[0].contentRect;
                const s = Math.min(width / 1315, 1);
                this.$el.style.setProperty('--s', s);
                this.panelScale = s;
            });
            ro.observe(this.$el);
            this._ro = ro;
        },
        async loadData() {
            const nodeId = this.$attrs.id || this.id;
            const data = await apiGetCrossingDetailData(nodeId, { iconMode: this.iconMode });
            if (data) {
                this.applyData(data);
            }
        },
        applyData(data) {
            this.currentRoute = data.currentRoute || {};
            this.intersectionData = data.intersectionData || {};
            this.mockPhaseData = data.phaseData || [];
            this.cycleLength = data.cycleLength || 140;
            this.currentSec = data.currentTime || 0;
            this.phaseDiff = data.phaseDiff || 0;
            this.coordTime = data.coordTime || 0;
            this.currentStageList = data.stageList || [];
            this.buildDonutFromPhaseData();
            this.$nextTick(() => {
                this.dataReady = true;
            });
            this.schemeOptions = data.schemeOptions || [];
            if (data.currentScheme) this.currentScheme = data.currentScheme;
            if (data.controlMethodOptions) this.controlMethodOptions = data.controlMethodOptions;
            if (data.currentMethod) this.currentMethod = data.currentMethod;
            if (data.locktimeOptions) this.locktimeOptions = data.locktimeOptions;
        },
        // 切换手动控制模式
        toggleManualMode() {
            this.isManualMode = !this.isManualMode;
            if (!this.isManualMode) {
                // 如果退出手动模式，可选择重置表单状态
                this.showLockTime = false;
            }
        },

        // 模拟：根据控制方式改变下拉方案的数据
        updateSchemeDataByMethod(method) {
            if (method === 'system') {
                this.schemeOptions = [
                    { label: '系统优化方案A', value: 'sys_a' },
                    { label: '系统优化方案B', value: 'sys_b' }
                ];
                this.currentScheme = 'sys_a';
            } else {
                this.schemeOptions = [
                    { label: '早高峰', value: 'early_peak' },
                    { label: '晚高峰', value: 'evening_peak' },
                    { label: '平峰', value: 'normal' }
                ];
                this.currentScheme = 'early_peak';
            }
        },

        // 取消按钮
        onCancel() {
            this.isManualMode = false;
            this.showLockTime = false;
            // 可以在此添加回滚初始数据的逻辑
        },

        // 需求5：点击确认按钮提交 + 表单验证
        onConfirm() {
            // 验证1：临时方案必须检查时间是否有效
            if (this.currentMethod === 'temp') {
                const isInvalid = this.currentStageList.some(item => !item.time || item.time <= 0);
                if (isInvalid) {
                    alert('请输入有效的阶段时间 (必须大于0)！');
                    return;
                }
            }

            // 验证2：步进方案必须选择锁定类型
            if (this.currentMethod === 'step') {
                if (this.lockTimeType === 'timer' && !this.currentLocktime) {
                    alert('请选择解锁时间！');
                    return;
                }
            }

            // 构造提交参数
            const submitData = {
                method: this.currentMethod,
                scheme: this.currentScheme,
                stages: this.currentMethod === 'temp' ? this.currentStageList : null,
                lockConfig: this.currentMethod === 'step' ? {
                    type: this.lockTimeType,
                    time: this.lockTimeType === 'timer' ? this.currentLocktime : null
                } : null
            };

            console.log('提交的数据：', submitData);

            // 提交完成后可根据业务决定是否退出手动模式
            // this.isManualMode = false;
        }
    }
}
</script>

<style scoped>
.crossing-detail-panel {
    --s: 1;
    display: flex;
    flex-direction: row;
    gap: clamp(4px, calc(var(--s) * 12px), 12px);
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ===== 左侧：还原原始固定 55% 占比 ===== */
.detail-panel-left {
    display: flex;
    flex-direction: column;
    flex: 0 0 55%;
    min-height: 0;
    min-width: 0;
}

/* ===== 右侧：flex 列容器 + 滚动兜底 ===== */
.detail-panel-right {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.intersection-video-wrap {
    width: 100%;
    min-height: 0;
    flex: 2;
}

.signal-timing-wrap {
    flex: 0 0 auto;
    min-height: 0;
    height: clamp(110px, calc(var(--s) * 200px), 200px);
    width: 100%;
    min-width: 0;
    background-color: transparent;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: clamp(3px, calc(var(--s) * 10px), 10px);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(2px, calc(var(--s) * 6px), 15px);
    color: #e0e6f1;
    flex-shrink: 0;
}

.title-area {
    font-size: clamp(9px, calc(var(--s) * 16px), 16px);
}

.main-title {
    font-size: clamp(10px, calc(var(--s) * 18px), 18px);
    font-weight: bold;
    margin-right: clamp(4px, calc(var(--s) * 10px), 10px);
}

.sub-info {
    font-size: clamp(8px, calc(var(--s) * 12px), 12px);
    opacity: 0.8;
}

.checkbox-area {
    font-size: clamp(8px, calc(var(--s) * 12px), 12px);
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.7;
    user-select: none;
}

.checkbox-area:hover {
    opacity: 1;
}

.checkbox-mock {
    width: clamp(10px, calc(var(--s) * 14px), 14px);
    height: clamp(10px, calc(var(--s) * 14px), 14px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-right: clamp(3px, calc(var(--s) * 6px), 6px);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkbox-mock.is-checked {
    background-color: #4da8ff;
    border-color: #4da8ff;
}

.chart-container {
    width: 100%;
    min-width: 0;
    flex: 1;
    min-height: 50px;
    overflow: hidden;
}

.loading-overlay {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #758599;
    font-size: 14px;
}

/* ===== 右侧表单内层容器 ===== */
.detail-right-form {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.form-group {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/** 控制方法 */
.control-method {
    color: #ffffff;
    flex-shrink: 0;
}

.control-label-wrap {
    display: flex;
    align-items: center;
    margin-bottom: clamp(4px, calc(var(--s) * 10px), 20px);
    column-gap: clamp(4px, calc(var(--s) * 10px), 20px);
}

.control-label {
    font-size: clamp(12px, calc(var(--s) * 22px), 28px);
    color: #ffffff;
    white-space: nowrap;
}

.control-label-wrap span {
    display: inline-block;
}

.operation-btn {
    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
    cursor: pointer;
    user-select: none;
}

.operation-btn:hover {
    text-decoration: underline;
}

.operation-btn.is-active {
    text-decoration: underline;
}

.control-method .control-label-wrap {
    justify-content: space-between;
}

/* 控制方式按钮组：设置 font-size 供 SegmentedRadio size="auto" 继承 */
.control-method-content {
    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
}

.control-scheme {
    margin-top: clamp(4px, calc(var(--s) * 10px), 20px);
    /* 设置 font-size 供 DropdownSelect size="auto" 继承 */
    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
}

.control-scheme.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.lock-time {
    width: 80%;
    border-radius: 8px;
    box-shadow:
        inset 0px 0px 10px 0px rgba(88, 146, 255, 0.4),
        inset 20px 0px 30px -10px rgba(88, 146, 255, 0.15);
}

.lock-time-label-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(4px, calc(var(--s) * 8px), 10px);
    border-radius: 8px 8px 0 0;
    color: #ffffff;
}

.lock-time-label {
    font-size: clamp(10px, calc(var(--s) * 16px), 16px);
    color: #ffffff;
}

.lock-time-options {
    display: flex;
    flex-direction: column;
    row-gap: clamp(4px, calc(var(--s) * 10px), 10px);
    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
    padding: clamp(4px, calc(var(--s) * 10px), 10px);
    color: #ffffff;
}

.lock-time-option {
    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
}

.lock-time-close {
    cursor: pointer;
}

.glow-header {
    background: linear-gradient(180deg,
            rgba(65, 115, 205, 0.6) 0%,
            rgba(40, 70, 130, 0.1) 100%);
    backdrop-filter: blur(10px);
}

.current-stage {
    background-color: rgba(65, 115, 205, 0.2);
    border: 1px solid #3660a5;
    margin-bottom: clamp(4px, calc(var(--s) * 10px), 20px);
    display: flex;
    justify-content: center;
}

.current-stage-warp {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: clamp(4px, calc(var(--s) * 8px), 10px);
    padding: clamp(6px, calc(var(--s) * 12px), 32px);
    color: #ffffff;
}

.current-stage-label {
    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
    width: auto;
    white-space: nowrap;
}

.stage-input {
    width: clamp(32px, calc(var(--s) * 65px), 65px);
    border: 1px solid rgba(161, 190, 255, 0.7);
    background-color: transparent;
    padding: clamp(2px, calc(var(--s) * 5px), 5px);
    color: #ffffff;
    text-align: center;
}

.phase-box {
    position: relative;
    width: clamp(30px, calc(var(--s) * 90px), 90px);
    height: clamp(30px, calc(var(--s) * 90px), 90px);
    background: #E6F0FF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.phase-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.phase-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(30, 106, 255, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.phase-box.is-active::after {
    opacity: 1;
}

/** 按钮 */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: clamp(22px, calc(var(--s) * 36px), 36px);
    padding: 0 clamp(10px, calc(var(--s) * 32px), 32px);
    font-size: clamp(9px, calc(var(--s) * 14px), 14px);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}

.btn-cancel {
    background-color: transparent;
    color: #d1d5db;
    border: 1px solid rgba(130, 150, 190, 0.4);
}

.btn-cancel:hover {
    color: #ffffff;
    border-color: rgba(130, 150, 190, 0.8);
    background-color: rgba(255, 255, 255, 0.05);
}

.btn-cancel:active {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-confirm {
    background-color: #3b74ff;
    color: #ffffff;
    border: 1px solid #3b74ff;
}

.btn-confirm:hover {
    background-color: #5a8bff;
    border-color: #5a8bff;
    box-shadow: 0 2px 8px rgba(59, 116, 255, 0.3);
}

.btn-confirm:active {
    background-color: #265bed;
    border-color: #265bed;
    box-shadow: none;
}

.button-group {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(4px, calc(var(--s) * 10px), 20px);
    flex-shrink: 0;
}

.button-group>div {
    display: flex;
    gap: clamp(4px, calc(var(--s) * 8px), 12px);
}

/* 禁用状态 */
.form-interactive-area {
    transition: opacity 0.3s;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.form-interactive-area.is-disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* 当前阶段输入框微调 */
.stage-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(2px, calc(var(--s) * 4px), 6px);
    position: relative;
}

.bottom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, calc(var(--s) * 6px), 8px); /* 输入框和百分比的间距 */
}

/* 新增包裹层的相对定位 */
.input-unit-wrapper {
    position: relative;
    display: inline-block;
}

.stage-input {
    width: clamp(32px, calc(var(--s) * 65px), 65px);
    border: 1px solid rgba(161, 190, 255, 0.7);
    background-color: transparent;
    padding: clamp(2px, calc(var(--s) * 5px), 5px);
    /* 给右侧留出空间，防止数字过长被 s 挡住 */
    padding-right: clamp(10px, calc(var(--s) * 16px), 16px);
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
}

/* 修改 s 单位的定位方式为垂直居中 */
.input-unit-wrapper .unit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: clamp(3px, calc(var(--s) * 6px), 8px);
    color: #77A1FF;
    font-size: clamp(8px, calc(var(--s) * 12px), 12px);
    pointer-events: none;
}

/* 微调百分比的间距，让排版更紧凑 */
.stage-item-wrapper .percent {
    color: rgba(255, 255, 255, 0.5);
    font-size: clamp(8px, calc(var(--s) * 11px), 11px);
    white-space: nowrap;
}

.stage-input {
    width: clamp(32px, calc(var(--s) * 65px), 65px);
    border: 1px solid rgba(161, 190, 255, 0.7);
    background-color: transparent;
    padding: clamp(2px, calc(var(--s) * 5px), 5px);
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
}

.stage-input:disabled {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
    background-color: rgba(0, 0, 0, 0.2);
}

/* 弹窗过渡动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s, transform 0.3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}

/* lock-time 弹窗补充样式 */
.lock-time {
    margin-top: clamp(4px, calc(var(--s) * 10px), 15px);
    background-color: rgba(20, 30, 50, 0.9);
}

/* 单选框基础对齐 */
.lock-time-option label {
    display: flex;
    align-items: center;
    gap: clamp(3px, calc(var(--s) * 6px), 8px);
    cursor: pointer;
}

/* ===== 方案圆饼图左右布局 ===== */
.donut-row {
    display: flex;
    gap: clamp(4px, calc(var(--s) * 16px), 16px);
    width: 100%;
}

.donut-item {
    flex: 1;
    min-width: 0;
}

.donut-title {
    font-size: clamp(11px, calc(var(--s) * 13px), 14px);
    color: #a0aec0;
    margin-bottom: 4px;
}
</style>