refactor&fix: remove unused no-transition styles and simplify refresh logic

monitor/static/index.css

@@ -285,17 +285,6 @@ h2 { color: #0056b3; margin-top: 32px; font-size: 1.6em; }
     to { opacity: 1; transform: translateY(0); }
 }
 
-.task-card {
-    animation: fadeIn 0.5s ease-out forwards;
-}
-
-/* 确保每个卡片的动画有延迟，创造瀑布效果 */
-.task-card:nth-child(1) { animation-delay: 0.1s; }
-.task-card:nth-child(2) { animation-delay: 0.2s; }
-.task-card:nth-child(3) { animation-delay: 0.3s; }
-.task-card:nth-child(4) { animation-delay: 0.4s; }
-.task-card:nth-child(5) { animation-delay: 0.5s; }
-.task-card:nth-child(n+6) { animation-delay: 0.6s; }
 
 @media (max-width: 600px) {
     .fab { right: 18px; width: 52px; height: 52px; font-size: 1.3em; }

monitor/static/index.js

@@ -10,33 +10,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
 let allTaskData = null;
 let currentFilter = 'all';
-let isRefreshing = false; // Flag to indicate page refresh state
-let lastRefreshTime = 0; // Track last refresh time to prevent too frequent refreshes
-const REFRESH_COOLDOWN = 3000; // 3 seconds cooldown between refreshes
 
 function refreshPage() {
-    // Check if enough time has passed since last refresh
-    const now = Date.now();
-    if (isRefreshing || now - lastRefreshTime < REFRESH_COOLDOWN) {
-        console.log('Refresh cooldown in progress...');
-        return;
-    }
-    
-    lastRefreshTime = now;
-    
-    // Add refresh animation to button
-    const refreshBtn = document.querySelector('.fab-refresh i');
-    if (refreshBtn) {
-        refreshBtn.classList.add('fa-spin');
-        // Remove spin after 1 second
-        setTimeout(() => {
-            refreshBtn.classList.remove('fa-spin');
-        }, 1000);
-    }
-    
-    // Add no-transition to body during refresh
-    document.body.classList.add('no-transition');
-    
     // Save expanded state before refresh
     const expandedTaskTypes = [];
     document.querySelectorAll('.task-type').forEach(section => {
@@ -49,64 +24,18 @@ function refreshPage() {
     // Store in sessionStorage
     sessionStorage.setItem('expandedTaskTypes', JSON.stringify(expandedTaskTypes));
     
-    // Set refreshing flag to true before fetching data
-    isRefreshing = true;
     fetchTasks();
 }
 
 function fetchTasks() {
-    const currentTime = Date.now();
-    // Check if the last refresh was within the cooldown period
-    if (currentTime - lastRefreshTime < REFRESH_COOLDOWN) {
-        // If within cooldown, just reset the refreshing flag and return
-        isRefreshing = false;
-        return;
-    }
-    
-    // Show loading spinner or add refreshing class
-    const container = document.getElementById('task-container');
-    if (isRefreshing) {
-        // Don't show loading spinner on refresh to avoid flickering
-        container.classList.add('refreshing');
-    } else {
-        container.innerHTML = `
-            <div class="loading-spinner">
-                <div class="spinner"></div>
-                <div>Loading task data...</div>
-            </div>
-        `;
-    }
-    
     fetch('/api/tasks')
         .then(response => response.json())
         .then(data => {
             allTaskData = data;
             renderTasks(data);
             updateStatistics(data);
-            // Reset refreshing flag and classes after rendering
-            container.classList.remove('refreshing');
-            setTimeout(() => {
-                isRefreshing = false;
-                document.body.classList.remove('no-transition');
-                document.querySelectorAll('.no-transition').forEach(el => {
-                    el.classList.remove('no-transition');
-                });
-            }, 50);
-            // Update the last refresh time
-            lastRefreshTime = currentTime;
         })
-        .catch(error => {
-            console.error('Error fetching tasks:', error);
-            container.innerHTML = `
-                <div class="error-message">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    <div>Error loading task data. Please try again.</div>
-                </div>
-            `;
-            isRefreshing = false;
-            container.classList.remove('refreshing');
-            document.body.classList.remove('no-transition');
-        });
+        .catch(error => console.error('Error fetching tasks:', error));
 }
 
 function setTaskFilter(filter) {
@@ -210,11 +139,6 @@ function renderTasks(data) {
         const typeSection = document.createElement('div');
         typeSection.className = 'task-type';
         
-        // Add no-transition class if page is refreshing
-        if (isRefreshing) {
-            typeSection.classList.add('no-transition');
-        }
-        
         // Create header with task type name and statistics
         const typeHeader = document.createElement('div');
         typeHeader.className = 'task-type-header';
@@ -360,8 +284,6 @@ function renderTasks(data) {
         typeHeader.addEventListener('click', (event) => {
             // Prevent toggling when clicking task cards
             if (!event.target.closest('.task-card')) {
-                // Remove no-transition class if it exists before toggling
-                typeSection.classList.remove('no-transition');
                 typeSection.classList.toggle('collapsed');
                 
                 // Set appropriate aria attributes for accessibility
@@ -389,17 +311,7 @@ function renderTasks(data) {
         
         container.appendChild(typeSection);
     });
-    
-    // Remove no-transition class after rendering all elements
-    if (isRefreshing) {
-        setTimeout(() => {
-            document.querySelectorAll('.no-transition').forEach(el => {
-                el.classList.remove('no-transition');
-            });
-        }, 100);
-    }
 }
-
 // add auto-refresh with time interval 10 seconds
 setInterval(() => {
     if (!isRefreshing) {

monitor/static/no-transition.css

@@ -1,59 +0,0 @@
-/* No transition class to disable animations */
-.no-transition,
-.no-transition * {
-    -webkit-transition: none !important;
-    -moz-transition: none !important;
-    -ms-transition: none !important;
-    -o-transition: none !important;
-    transition: none !important;
-    animation: none !important;
-}
-
-/* Immediate display changes for elements with no-transition */
-.task-type.no-transition.collapsed .tasks-container {
-    display: none;
-    max-height: 0 !important;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    overflow: hidden;
-}
-
-.task-type.no-transition:not(.collapsed) .tasks-container {
-    display: block;
-    max-height: none !important;
-    opacity: 1;
-    overflow: visible;
-}
-
-/* Styles for refreshing state */
-.refreshing .tasks-container {
-    pointer-events: none; /* Prevent interactions during refresh */
-}
-
-.refreshing .task-card {
-    opacity: 0.7; /* Dim the cards during refresh */
-}
-
-/* Override progress bar animation during page refresh */
-.no-transition .progress-fill,
-.refreshing .progress-fill {
-    transition: none !important;
-}
-
-/* Error message styling */
-.error-message {
-    text-align: center;
-    padding: 30px;
-    color: #e74c3c;
-    font-size: 1.1em;
-    background: #fef2f2;
-    border-radius: 8px;
-    margin: 20px 0;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-.error-message i {
-    font-size: 2em;
-    margin-bottom: 15px;
-}

monitor/static/task_detail.css

@@ -1,21 +1,11 @@
-body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; background: linepre { 
-    background: linear-gradient(135deg, #f3f6fa, #edf1f7); 
-    padding: 16px; 
-    border-radius: 8px; 
-    overflow-x: auto; 
-    font-size: 1em;
-    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
-    border-left: 3px solid rgba(0,123,255,0.3);
-    white-space: pre-wrap;
-    word-break: break-word;
-}
+body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #f4f6fa 0%, #e9f0f9 100%); }
 .step-image { 
     max-width: 100%; 
     border: none; 
     border-radius: 8px; 
     box-shadow: 0 5px 15px rgba(0,0,0,0.08);
     transition: all 0.3s;
-}g, #f4f6fa 0%, #e9f0f9 100%); }
+}
 .container { max-width: 950px; margin: 40px auto; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); padding: 36px 44px; }
 h1 { font-size: 2.4em; margin-bottom: 14px; color: #1a237e; position: relative; }
 h1:after { content: ''; display: block; width: 70px; height: 4px; background: linear-gradient(90deg, #007bff, #00c6ff); margin: 12px 0 0; border-radius: 2px; }