检测器弹窗：表格横向滚动 + 关闭手动缩放，调整SmartDialog弹窗的边距

  - DetectorTable 整张表设 min-width 460px，根节点改 overflow-x:auto；弹窗宽度不够时表头表体一起横向滚动，4
  列每列保留可读宽度，不再被 ellipsis 截断
  - header-left/row-left min-width 180px，header-right/row-right 调到 clamp(280px, 55%, 360px)，匹配 4 列内容自然宽度
  - IntersectionMapVideos.openDetectorDialog 加 resizable:false，关掉右下角缩放手柄；弹窗尺寸由 .detail-panel-right rect
   自动联动，避免手动缩放破坏父面板对齐

src/components/ui/DetectorTable.vue

@@ -76,24 +76,36 @@ export default {
 .detector-monitor-table {
   width: 100%;
   height: 100%;
-  padding: 12px 14px;
+  padding: clamp(2px, 0.5cqw, 4px);
   background: rgba(5, 22, 45, 0.9);
   color: #fff;
   font-family: inherit;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  /* 容器不够宽时，由根节点接管横向滚动；纵向滚动仍由 .table-body 内部处理 */
+  overflow-x: auto;
+  overflow-y: hidden;
+  container-type: inline-size;
+}
+
+.detector-monitor-table::-webkit-scrollbar { height: 6px; }
+.detector-monitor-table::-webkit-scrollbar-thumb {
+  background: rgba(30, 77, 142, 0.6);
+  border-radius: 3px;
 }
+.detector-monitor-table::-webkit-scrollbar-track { background: transparent; }
 
 /* ---------------- 表头 ---------------- */
 .table-header {
   display: flex;
-  height: 34px;
+  height: clamp(26px, 7cqw, 34px);
   background: linear-gradient(180deg, rgba(58, 127, 209, 0.28) 0%, rgba(58, 127, 209, 0.12) 100%);
   border: 1px solid rgba(127, 182, 255, 0.4);
   border-radius: 3px;
   flex-shrink: 0;
+  /* 与 .table-row 同一最小宽度，保证横向滚动时表头与表体对齐 */
+  min-width: 460px;
 }
 
 .header-left {
@@ -101,12 +113,13 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 16px;
+  padding: 0 clamp(6px, 2cqw, 16px);
   border-right: 1px solid rgba(127, 182, 255, 0.35);
+  min-width: 180px;
 }
 
 .tick-item {
-  font-size: 13px;
+  font-size: clamp(10px, 2.4cqw, 13px);
   font-weight: 600;
   color: rgba(127, 182, 255, 0.9);
   font-family: 'Consolas', 'Courier New', monospace;
@@ -115,7 +128,7 @@ export default {
 
 .header-right {
   display: flex;
-  width: 260px;
+  width: clamp(280px, 55%, 360px);
   flex-shrink: 0;
 }
 
@@ -124,16 +137,26 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 13px;
+  font-size: clamp(10px, 2.4cqw, 13px);
   font-weight: 600;
   color: rgba(127, 182, 255, 0.95);
   border-right: 1px solid rgba(127, 182, 255, 0.25);
+  min-width: 0;
+  padding: 0 clamp(2px, 0.5cqw, 4px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .th-cell:last-child {
   border-right: none;
 }
 
+/* "名称" 列（第 2 列）需要承载最长文本，给它两倍宽度 */
+.header-right .th-cell:nth-child(2) {
+  flex: 2;
+}
+
 /* ---------------- 表体 ---------------- */
 .table-body {
   flex: 1;
@@ -141,6 +164,9 @@ export default {
   flex-direction: column;
   margin-top: 4px;
   overflow-y: auto;
+  overflow-x: visible; /* 横向溢出由 .detector-monitor-table 接管 */
+  /* 与 .table-header 同一最小宽度，让 row 与 header 一起被外层水平滚动 */
+  min-width: 460px;
 }
 
 .table-body::-webkit-scrollbar {
@@ -156,10 +182,11 @@ export default {
   background: transparent;
 }
 
+/* flex:1 0 28px → 容器够大则平分多余高度填满（不留白），不够时锁 28px 触发滚动 */
 .table-row {
   display: flex;
-  height: 44px;
-  flex-shrink: 0;
+  flex: 1 0 28px;
+  min-height: 28px;
   border-bottom: 1px dashed rgba(30, 77, 142, 0.45);
   transition: background 0.15s;
 }
@@ -175,12 +202,13 @@ export default {
 .row-left {
   flex: 1;
   border-right: 1px solid rgba(30, 77, 142, 0.3);
+  min-width: 180px;
   /* 时序图区域占位（180s ~ 30s 时间窗），后续可挂折线/柱图 */
 }
 
 .row-right {
   display: flex;
-  width: 260px;
+  width: clamp(280px, 55%, 360px);
   flex-shrink: 0;
 }
 
@@ -189,8 +217,13 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: clamp(11px, 2.4cqw, 14px);
   border-right: 1px solid rgba(30, 77, 142, 0.3);
+  min-width: 0;
+  padding: 0 clamp(2px, 0.5cqw, 4px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .td-cell:last-child {
@@ -203,7 +236,9 @@ export default {
   font-weight: 600;
 }
 
+/* 名称列内容最长（如"北进口 第3车道"），给它两倍宽度 */
 .name-cell {
+  flex: 2;
   color: rgba(255, 255, 255, 0.95);
   font-weight: 500;
 }

src/components/ui/IntersectionMapVideos.vue

@@ -547,6 +547,9 @@ export default {
         title: '检测器运行数据监视',
         component: 'DetectorTable',
         noPadding: false,
+        // 关闭右下角缩放手柄：弹窗尺寸由 .detail-panel-right rect 自动决定，
+        // 用户手动缩放反而会破坏与父面板的尺寸联动。
+        resizable: false,
         data: { intersectionId: this.getIntersectionId() },
       };
 

src/components/ui/SmartDialog.vue

@@ -306,7 +306,7 @@ export default {
   flex-direction: column;
   overflow: hidden;
   user-select: none;
-  padding: 5px;
+  padding: clamp(2px, 0.6cqw, 6px);
   container-type: inline-size;
 }
 .smart-dialog.no-padding {
@@ -319,7 +319,7 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0px 10px 0px 10px;
+  padding: 0 clamp(6px, 1.2cqw, 12px);
 }
 
 .dialog-header.not-title {
@@ -348,7 +348,7 @@ export default {
 .close-btn {
   cursor: pointer;
   color: #ffffff;
-  font-size: 16px;
+  font-size: clamp(11px, 1.8cqw, 16px);
   line-height: 1;
   font-weight: 300;
   opacity: 0.8;
@@ -363,13 +363,13 @@ export default {
 .dialog-divider {
   height: 1px;
   background-color: rgba(255, 255, 255, 0.3);
-  margin: 0 5px;
+  margin: 0 clamp(2px, 0.6cqw, 6px);
 }
 
 .dialog-body {
   flex: 1;
   min-height: 0;
-  padding: 20px;
+  padding: clamp(6px, 2.2cqw, 20px);
   overflow: hidden;
   display: flex;
   flex-direction: column;