大大大

LTEMvcApp/Views/Home/Logs.cshtml

@@ -522,6 +522,48 @@
     .column-option.disabled:hover {
         background-color: transparent;
     }
+
+    /* 自适应列宽优化 */
+    .log-item > span, .log-list-header > span {
+        box-sizing: border-box;
+        position: relative;
+    }
+
+    /* 为不同列设置不同的文本对齐方式 */
+    .log-timestamp, .log-layer, .log-direction, .log-ueid, .log-rnti, .log-cell, .log-channel, .log-info {
+        text-align: center; /* 居中对齐 */
+    }
+
+    .log-message {
+        text-align: left; /* 左对齐 */
+        padding-left: 4px; /* 增加左边距 */
+    }
+
+    /* 确保列之间有适当的间距 */
+    .log-item > span:not(:last-child), .log-list-header > span:not(:last-child) {
+        margin-right: 4px;
+    }
+
+    /* 响应式调整：在小屏幕上进一步优化 */
+    @media (max-width: 1200px) {
+        .log-timestamp { min-width: 120px; max-width: 160px; }
+        .log-layer { min-width: 60px; max-width: 100px; }
+        .log-direction { min-width: 50px; max-width: 80px; }
+        .log-ueid, .log-rnti, .log-cell { min-width: 50px; max-width: 80px; }
+        .log-channel { min-width: 60px; max-width: 100px; }
+        .log-info { min-width: 50px; max-width: 80px; }
+        .log-message { min-width: 150px; }
+    }
+
+    @media (max-width: 768px) {
+        .log-timestamp { min-width: 100px; max-width: 140px; }
+        .log-layer { min-width: 50px; max-width: 80px; }
+        .log-direction { min-width: 40px; max-width: 60px; }
+        .log-ueid, .log-rnti, .log-cell { min-width: 40px; max-width: 60px; }
+        .log-channel { min-width: 50px; max-width: 80px; }
+        .log-info { min-width: 40px; max-width: 60px; }
+        .log-message { min-width: 120px; }
+    }
 </style>
 
 <div class="container">
@@ -914,6 +956,13 @@
                     }
                 }
             });
+
+            // 强制重新计算布局
+            setTimeout(() => {
+                if (clusterize && clusterize.refresh) {
+                    clusterize.refresh();
+                }
+            }, 100);
         }
 
         // 保存列设置到本地存储