实现日志功能

static/css/animation.css

@@ -0,0 +1,62 @@
+        @layer utilities {
+            .content-auto {
+                content-visibility: auto;
+            }
+            .card-shadow {
+                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            }
+            .sidebar-item-active {
+                background-color: rgba(22, 93, 255, 0.1);
+                color: #165DFF;
+                border-right: 4px solid #165DFF;
+            }
+        }
+
+      /* 服务器状态组件光晕效果 */
+      .glow-effect {
+        animation: pulse 2s ease-in-out;
+      }
+      
+      @keyframes pulse {
+        0% {
+            box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.4);
+        }
+        70% {
+            box-shadow: 0 0 0 10px rgba(41, 128, 185, 0);
+        }
+        100% {
+            box-shadow: 0 0 0 0 rgba(41, 128, 185, 0);
+        }
+      }
+      
+      /* 服务器状态组件样式优化 */
+      .server-status-widget {
+        min-width: 170px;
+        transition: all 0.3s ease;
+      }
+      
+      .server-status-widget:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+      
+
+      /* 加载状态样式 */
+      .status-loading {
+        animation: status-pulse 1.5s ease-in-out infinite;
+      }
+      
+      /* 状态脉冲动画 */
+      @keyframes status-pulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+      
+      /* 保存按钮状态样式 */
+      #save-blacklist-status {
+        transition: all 0.3s ease-in-out;
+      }

static/css/style.css

@@ -132,26 +132,7 @@ header p {
 
 /* 响应式布局 - 移动设备 */
 @media (max-width: 768px) {
-    .sidebar {
-        position: fixed;
-        left: -var(--sidebar-width);
-        top: var(--header-height);
-        z-index: 99;
-        height: calc(100vh - var(--header-height));
-    }
-    
-    .sidebar.open {
-        left: 0;
-        width: var(--sidebar-width);
-    }
-    
-    .sidebar.open .nav-item span {
-        display: block;
-    }
-    
-    .sidebar.open .nav-item i {
-        margin-right: 1rem;
-    }
+    /* 这些样式已经通过Tailwind CSS类在HTML中实现，这里移除避免冲突 */
 }
 
 .nav-menu {
@@ -1062,18 +1043,6 @@ tr:hover {
         font-size: 0.9rem;
     }
 }
-
-/* 加载动画 */
-.loading {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid #f3f3f3;
-    border-top: 3px solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }