路口详情-相位图: 双图模式从底部整宽行搬回左栏 + 与十字路等宽 + 删 content-row 列转行

    - CrossingDetailPanel.vue 模板: 合并单/双图为同一个 .signal-timing-wrap (置于 .detail-panel-left 内),
      用 :class="{ 'is-dual': isDual }" + 内部 v-if 决定 1 个 chart 还是 2 行 timing-row (本周期 + 上周期);
      删原作为整宽底部行的双图块 + .content-row 包装层 + 根节点 :class is-dual
    - CSS: 删 .crossing-detail-panel.is-dual (列转行) / .content-row (display:contents↔flex 切换);
      .signal-timing-wrap.is-dual 高度 clamp(100,170*s,170) → clamp(180,300*s,300) 以容下双行 chart,
      去掉只在底部整宽行才需要的 padding:0 顶/底覆盖
    - 净结果: 41+ / 75- , 还原 ff0b158 之前"相位图与十字路同列等宽"的设计, 同时保留双相位图功能

src/components/ui/CrossingDetailPanel.vue

@@ -1,26 +1,48 @@
 <template>
-    <div class="crossing-detail-panel" :class="{ 'is-dual': isDual }">
-        <!-- content-row：单图模式 display:contents 透明（保持原 row 布局），双图模式显形为 row 容器 -->
-        <div class="content-row">
-            <div class="detail-panel-left">
-                <div class="intersection-video-wrap">
-                    <IntersectionMapVideos :mapData="intersectionData" />
+    <div class="crossing-detail-panel">
+        <div class="detail-panel-left">
+            <div class="intersection-video-wrap">
+                <IntersectionMapVideos :mapData="intersectionData" />
+            </div>
+            <!-- 相位图: 始终在左栏内, 与十字路图等宽; isDual 时切到双行(本周期/上周期), 否则单图 -->
+            <div class="signal-timing-wrap" :class="{ 'is-dual': isDual }">
+                <div class="header">
+                    <div class="title-area">
+                        <span class="main-title">方案状态</span>
+                        <span class="sub-info">(周期: {{ cycleLength }} 相位差: {{ phaseDiff }} 协调时间: {{ coordTime }})</span>
+                    </div>
                 </div>
-                <!-- 单图模式：相位图保持在左侧栏内 -->
-                <div v-if="!isDual" class="signal-timing-wrap">
-                    <div class="header">
-                        <div class="title-area">
-                            <span class="main-title">方案状态</span>
-                            <span class="sub-info">(周期: {{ cycleLength }} 相位差: {{ phaseDiff }} 协调时间: {{ coordTime }})</span>
+                <template v-if="isDual">
+                    <div class="timing-row timing-row-live">
+                        <div class="row-label">
+                            本周期 实时<span v-if="thisCycle"> · {{ thisCycle.schemeName }}</span>
+                        </div>
+                        <div class="row-chart">
+                            <SignalTimingChart :cycleLength="thisCycle.cycleLength" :currentTime="currentSec"
+                                :phaseData="thisCycle.phaseData" :showScanLine="dataReady" :showScanLineLabel="dataReady"
+                                :clipToActive="true" :compactScanLine="true" :autoScan="dataReady"
+                                @scan-tick="onScanTick" />
                         </div>
                     </div>
-                    <SignalTimingChart :cycleLength="cycleLength" :currentTime="currentSec"
-                        :phaseData="mockPhaseData" :showScanLine="dataReady" :autoScan="dataReady"
-                        @scan-tick="onScanTick" />
-                </div>
+                    <div class="timing-row timing-row-last">
+                        <div class="row-label">
+                            上周期 方案
+                            <span v-if="lastCycle"> · 实际 {{ lastCycle.actualDuration }}s / 计划 {{ lastCycle.cycleLength }}s</span>
+                        </div>
+                        <div class="row-chart">
+                            <SignalTimingChart v-if="lastCycle" :cycleLength="lastCycle.cycleLength" :currentTime="0"
+                                :phaseData="lastCycle.phaseData" :showScanLine="false" :showScanLineLabel="false" />
+                            <div v-else class="empty-placeholder">暂无上周期数据</div>
+                        </div>
+                    </div>
+                </template>
+                <SignalTimingChart v-else :cycleLength="cycleLength" :currentTime="currentSec"
+                    :phaseData="mockPhaseData" :showScanLine="dataReady" :autoScan="dataReady"
+                    @scan-tick="onScanTick" />
             </div>
+        </div>
 
-            <div class="detail-panel-right">
+        <div class="detail-panel-right">
             <form class="detail-right-form" @submit.prevent>
                 <div class="form-group">
                     <!-- 新版控制方式按钮组：手动开关 / 紧急模式 / 配时动作 -->
@@ -116,39 +138,6 @@
                 </div>
             </form>
         </div>
-        </div><!-- /.content-row -->
-
-        <!-- 双图模式：相位图作为整宽底部行（跨左右两栏） -->
-        <div v-if="isDual" class="signal-timing-wrap is-dual">
-            <div class="header">
-                <div class="title-area">
-                    <span class="main-title">方案状态</span>
-                    <span class="sub-info">(周期: {{ cycleLength }} 相位差: {{ phaseDiff }} 协调时间: {{ coordTime }})</span>
-                </div>
-            </div>
-            <div class="timing-row timing-row-live">
-                <div class="row-label">
-                    本周期 实时<span v-if="thisCycle"> · {{ thisCycle.schemeName }}</span>
-                </div>
-                <div class="row-chart">
-                    <SignalTimingChart :cycleLength="thisCycle.cycleLength" :currentTime="currentSec"
-                        :phaseData="thisCycle.phaseData" :showScanLine="dataReady" :showScanLineLabel="dataReady"
-                        :clipToActive="true" :compactScanLine="true" :autoScan="dataReady"
-                        @scan-tick="onScanTick" />
-                </div>
-            </div>
-            <div class="timing-row timing-row-last">
-                <div class="row-label">
-                    上周期 方案
-                    <span v-if="lastCycle"> · 实际 {{ lastCycle.actualDuration }}s / 计划 {{ lastCycle.cycleLength }}s</span>
-                </div>
-                <div class="row-chart">
-                    <SignalTimingChart v-if="lastCycle" :cycleLength="lastCycle.cycleLength" :currentTime="0"
-                        :phaseData="lastCycle.phaseData" :showScanLine="false" :showScanLineLabel="false" />
-                    <div v-else class="empty-placeholder">暂无上周期数据</div>
-                </div>
-            </div>
-        </div>
 
         <!-- 步进锁定时间弹窗 -->
         <transition name="fade">
@@ -785,28 +774,6 @@ export default {
     overflow: hidden;
 }
 
-/* 双图模式：根节点变 column，content-row 变 row 容器，相位图作为整宽底部行 */
-.crossing-detail-panel.is-dual {
-    flex-direction: column;
-    gap: clamp(4px, calc(var(--s) * 8px), 8px);
-}
-
-/* 单图模式：content-row 透明，子节点直接挂到根的 row 布局上（保持原行为） */
-.content-row {
-    display: contents;
-}
-
-/* 双图模式：content-row 显形为 row，承载视频+表单 */
-.crossing-detail-panel.is-dual .content-row {
-    display: flex;
-    flex-direction: row;
-    gap: clamp(4px, calc(var(--s) * 12px), 12px);
-    flex: 1 1 0;
-    min-width: 0;
-    min-height: 0;
-    width: 100%;
-}
-
 /* ===== 左侧：还原原始固定 55% 占比 ===== */
 .detail-panel-left {
     display: flex;
@@ -848,10 +815,9 @@ export default {
     padding: clamp(3px, calc(var(--s) * 10px), 10px);
 }
 
-/* 双相位图模式：整宽底部行 */
+/* 双相位图模式: 留在左栏内, 与十字路图等宽; 高度约 2× 单图以容下两行 chart + 行标签 */
 .signal-timing-wrap.is-dual {
-    height: clamp(100px, calc(var(--s) * 170px), 170px);
-    padding: 0 clamp(3px, calc(var(--s) * 10px), 10px);
+    height: clamp(180px, calc(var(--s) * 300px), 300px);
 }
 /* 双图模式下 header 紧贴下方相位图，避免无意义空白 */
 .signal-timing-wrap.is-dual .header {