feat(admin): 访客详情三栏样式——2fr/1fr/1fr、统计卡2×2、断点1400/1000替换旧规则

Co-Authored-By: Claude Code <noreply@anthropic.com>

admin/src/views/tracker/visitor/detail.vue

@@ -1042,19 +1042,18 @@
     background: $vd-border;
   }
 
-  // 4 统计卡
+  // 4 统计卡（中栏 2×2 窄卡；与来源证据卡的间距由 .vd-side 的 gap 提供）
   .vd-stats {
     display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 16px;
-    margin-bottom: 16px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
   }
 
   .vd-stat-card {
     display: flex;
     align-items: center;
-    padding: 18px 20px;
-    gap: 14px;
+    padding: 14px 16px;
+    gap: 12px;
   }
 
   .vd-stat-icon {
@@ -1082,7 +1081,7 @@
 
     .vd-stat-value {
       overflow: hidden;
-      font-size: 26px;
+      font-size: 24px;
       font-weight: 700;
       color: $vd-text;
       text-overflow: ellipsis;
@@ -1090,10 +1089,10 @@
     }
   }
 
-  // 主体双栏：时间线 ~72% + 右列 340px
+  // 主体三栏：三 Tab 卡 2fr + 统计卡/来源证据 1fr + 访问环境 1fr
   .vd-main {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) 340px;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
     align-items: start;
     gap: 20px;
     margin-bottom: 16px;
@@ -1130,11 +1129,14 @@
     }
   }
 
-  .vd-card-tools {
+  // 时间线工具行（时间范围 + 正倒序）：随三 Tab 化迁入 timeline pane，右对齐
+  .vd-tl-tools {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 10px;
+    justify-content: flex-end;
+    padding: 0 0 4px;
+    gap: 8px 12px;
 
     .vd-tool-label {
       font-size: 12px;
@@ -1170,9 +1172,13 @@
     }
   }
 
-  // 时间线卡
-  .vd-timeline-card {
-    padding-bottom: 12px;
+  // 左栏三 Tab 卡：ElTabs nav 即卡头（贴卡顶），header margin 统一提供各 pane 的 12px 上距
+  .vd-tabs-card {
+    padding: 0 20px 16px;
+
+    :deep(.el-tabs__header) {
+      margin-bottom: 12px;
+    }
   }
 
   // 时间线滚动容器：长轨迹卡内滚动（日期组头随内容滚动，不做 sticky）
@@ -1407,11 +1413,6 @@
     }
   }
 
-  // 底部：会话与原始数据
-  .vd-bottom-card {
-    padding: 4px 20px 16px;
-  }
-
   .session-id-code {
     padding: 2px 8px;
     font-size: 12px;
@@ -1461,18 +1462,24 @@
     border-radius: 6px;
   }
 
-  // 响应式：中屏右列下沉，小屏统计卡两列
-  @media (max-width: 1200px) {
+  // 响应式：两栏（访问环境整行下沉）→ 单栏
+  @media (max-width: 1400px) {
+    .vd-main {
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    }
+
+    .vd-main > :last-child {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @media (max-width: 1000px) {
     .vd-main {
       grid-template-columns: minmax(0, 1fr);
     }
   }
 
   @media (max-width: 900px) {
-    .vd-stats {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
     .vd-hstat-divider {
       display: none;
     }