diff --git a/monitor/static/index.css b/monitor/static/index.css index 3405705..d26e6ac 100644 --- a/monitor/static/index.css +++ b/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; } diff --git a/monitor/static/index.js b/monitor/static/index.js index 6928db1..933b754 100644 --- a/monitor/static/index.js +++ b/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 = ` -
-
-
Loading task data...
-
- `; - } - 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 = ` -
- -
Error loading task data. Please try again.
-
- `; - 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) { diff --git a/monitor/static/no-transition.css b/monitor/static/no-transition.css deleted file mode 100644 index fc839c1..0000000 --- a/monitor/static/no-transition.css +++ /dev/null @@ -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; -} diff --git a/monitor/static/task_detail.css b/monitor/static/task_detail.css index fc1faf8..5340e74 100644 --- a/monitor/static/task_detail.css +++ b/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; }