更新版本到2.0

static/css/style.css

@@ -569,6 +569,71 @@ header p {
     -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
 }
 
+/* 列宽调节样式 */
+.resizable-table {
+    width: 100%;
+    table-layout: auto;
+    border-collapse: collapse;
+    overflow: hidden;
+}
+
+.resizable-table th {
+    position: relative;
+    padding: 0.75rem 1rem;
+    background-color: #f8f9fa;
+    font-weight: 600;
+    color: #2c3e50;
+    border-bottom: 1px solid #e9ecef;
+    cursor: pointer;
+    user-select: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 50px;
+}
+
+.resizable-table th::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 10px;
+    height: 100%;
+    cursor: col-resize;
+    background: transparent;
+    z-index: 10;
+    margin-right: -10px;
+}
+
+.resizable-table th:hover::after {
+    background: rgba(59, 130, 246, 0.3);
+}
+
+.resizable-table th.dragging {
+    cursor: col-resize;
+}
+
+.resizable-table th.dragging::after {
+    background: rgba(59, 130, 246, 0.6);
+}
+
+.resizable-table td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid #e9ecef;
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 50px;
+}
+
+/* 确保表格容器正确显示 */
+.overflow-x-auto {
+    overflow-x: auto;
+    position: relative;
+}
+
 /* 最常屏蔽和最常解析域名表格的特殊样式 */
 #top-blocked-table, #top-resolved-table {
     font-size: 0.85rem;
@@ -881,7 +946,7 @@ tr:hover {
 /* 通知组件 */
 .notification {
     position: fixed;
-    bottom: 20px;
+    top: 20px;
     right: 20px;
     background-color: #3498db;
     color: white;
@@ -889,12 +954,7 @@ tr:hover {
     border-radius: 4px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     z-index: 1000;
-    transform: translateX(100%);
-    transition: transform 0.3s ease;
-}
-
-.notification.show {
-    transform: translateX(0);
+    max-width: 90%;
 }
 
 .notification.success {
@@ -1076,8 +1136,9 @@ tr:hover {
 /* 跟踪器浮窗样式 */
 .tracker-tooltip {
     position: absolute;
-    top: -10px;
+    top: 50%;
     left: 100%;
+    transform: translateY(-50%);
     margin-left: 10px;
     background-color: white;
     border: 1px solid #e2e8f0;
@@ -1085,9 +1146,15 @@ tr:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     padding: 12px;
     min-width: 250px;
-    z-index: 50;
+    max-width: 350px;
+    z-index: 9999;
     font-size: 14px;
     color: #333;
+    display: none;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+    visibility: hidden;
+    word-wrap: break-word;
     /* 添加箭头 */
 }
 
@@ -1154,4 +1221,75 @@ tr:hover {
 
 .tracker-tooltip a:hover {
     text-decoration: underline;
+}
+
+/* 滚动条样式优化 */
+/* 基础滚动条样式 */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+/* 滚动条轨道 */
+::-webkit-scrollbar-track {
+    background: rgba(241, 245, 249, 0.5);
+    border-radius: 4px;
+}
+
+/* 滚动条滑块 */
+::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.6);
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+/* 滚动条滑块悬停效果 */
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(100, 116, 139, 0.8);
+}
+
+/* 滚动条角落 */
+::-webkit-scrollbar-corner {
+    background: rgba(241, 245, 249, 0.5);
+    border-radius: 4px;
+}
+
+/* 为不同滚动容器添加特定样式 */
+.sidebar::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.4);
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+    background: rgba(148, 163, 184, 0.7);
+}
+
+/* 优化表格和卡片中的滚动条 */
+.table-wrapper::-webkit-scrollbar,
+.chart-card::-webkit-scrollbar,
+.stat-card::-webkit-scrollbar,
+#top-blocked-table::-webkit-scrollbar,
+#top-resolved-table::-webkit-scrollbar,
+#top-clients-table::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb,
+.chart-card::-webkit-scrollbar-thumb,
+.stat-card::-webkit-scrollbar-thumb,
+#top-blocked-table::-webkit-scrollbar-thumb,
+#top-resolved-table::-webkit-scrollbar-thumb,
+#top-clients-table::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.5);
+}
+
+/* Firefox滚动条样式 */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(148, 163, 184, 0.6) rgba(241, 245, 249, 0.5);
+}
+
+/* 优化滚动行为 */
+* {
+    scroll-behavior: smooth;
 }