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; }