11213

LTEMvcApp/Views/Home/Logs.cshtml

@@ -37,8 +37,10 @@
         border-bottom: 1px solid #f0f0f0;
         cursor: pointer;
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-start; /* 改为左对齐 */
-        white-space: nowrap;
+        align-items: flex-start; /* 顶部对齐，支持多行内容 */
+        min-height: 24px; /* 最小高度 */
+        transition: background-color 0.2s;
     }
 
     .log-item:hover {
@@ -52,21 +54,64 @@
     .log-item > span, .log-list-header > span {
         text-overflow: ellipsis;
         overflow: hidden;
-        padding-right: 15px;
+        padding-right: 8px;
-    }
+        white-space: nowrap; /* 保持单行显示 */
-    
+        word-break: keep-all; /* 防止单词被截断 */
-    /* 列宽定义：固定与弹性结合 */
+    }
-    .log-timestamp { flex: 0 0 170px; } /* 固定宽度 */
+    
-    .log-layer     { flex: 0 0 100px; } /* 固定宽度 */
+    /* 列宽定义：自适应宽度 */
-    .log-direction { flex: 0 0 120px; } /* 固定宽度 */
+    .log-timestamp { 
-    .log-ueid      { flex: 0 0 80px;  } /* 固定宽度 */
+        flex: 0 0 auto; 
-    .log-rnti      { flex: 0 0 80px;  } /* 固定宽度 */
+        min-width: 150px; 
-    .log-cell      { flex: 0 0 80px;  } /* 固定宽度 */
+        max-width: 200px; 
-    .log-channel   { flex: 0 0 100px; } /* 固定宽度 */
+    }
-    .log-info      { flex: 0 0 80px;  } /* 固定宽度 */
+    .log-layer     { 
+        flex: 0 0 auto; 
+        min-width: 80px; 
+        max-width: 120px; 
+    }
+    .log-direction { 
+        flex: 0 0 auto; 
+        min-width: 60px; 
+        max-width: 100px; 
+    }
+    .log-ueid      { 
+        flex: 0 0 auto; 
+        min-width: 60px; 
+        max-width: 100px; 
+    }
+    .log-rnti      { 
+        flex: 0 0 auto; 
+        min-width: 60px; 
+        max-width: 100px; 
+    }
+    .log-cell      { 
+        flex: 0 0 auto; 
+        min-width: 60px; 
+        max-width: 100px; 
+    }
+    .log-channel   { 
+        flex: 0 0 auto; 
+        min-width: 80px; 
+        max-width: 120px; 
+    }
+    .log-info      { 
+        flex: 0 0 auto; 
+        min-width: 60px; 
+        max-width: 100px; 
+    }
     .log-message   { 
-        flex: 1 1 0; /* 弹性增长和收缩，占据剩余空间 */
+        flex: 1 1 auto; /* 弹性增长和收缩，占据剩余空间 */
-        min-width: 150px; /* 保证最小宽度 */
+        min-width: 200px; /* 保证最小宽度 */
+        max-width: none; /* 不限制最大宽度 */
+        white-space: normal; /* 允许换行 */
+        word-break: break-word; /* 长单词可以换行 */
+        line-height: 1.4; /* 增加行高 */
+        max-height: 3.2em; /* 最多显示2行 */
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2; /* 限制显示行数 */
+        -webkit-box-orient: vertical;
     }
 
     /* 日志列表标题栏 */