feat&fix: add task recording endpoint, enhance video player support, and improve mobile responsiveness

monitor/static/index.css

@@ -33,7 +33,7 @@ h2 { color: #0056b3; margin-top: 32px; font-size: 1.6em; }
 }
 .stat-card {
     flex: 1;
-    min-width: 220px;
+    min-width: 150px;
     background: linear-gradient(135deg, #ffffff, #f8faff);
     padding: 20px;
     margin: 0 10px 20px;
@@ -300,16 +300,57 @@ h2 { color: #0056b3; margin-top: 32px; font-size: 1.6em; }
 @media (max-width: 600px) {
     .fab { right: 18px; width: 52px; height: 52px; font-size: 1.3em; }
     .fab-refresh { bottom: 18px; }
-    h1 { font-size: 2em; }
+    h1 { font-size: 1.8em; }
+    .system-status { font-size: 0.4em; display: block; margin: 10px auto; width: fit-content; }
     .task-status { padding: 4px 10px; font-size: 0.85em; }
-    .dashboard-stats { flex-direction: column; }
-    .stat-card { margin: 0 0 15px; min-width: 100%; }
+    
+    /* Row layout for stat cards on mobile */
+    .dashboard-stats { 
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    .stat-card { 
+        flex: 0 0 22%; 
+        margin: 0 1% 15px; 
+        min-width: auto;
+        padding: 10px 5px;
+    }
+    .stat-card i {
+        font-size: 1.2em;
+        margin-bottom: 5px;
+    }
+    .stat-card span {
+        font-size: 1em;
+        margin-bottom: 2px;
+    }
+    .stat-label {
+        font-size: 0.7em;
+    }
+    
+    .task-type-header { flex-direction: column; align-items: flex-start; }
+    .task-type-stats { margin-top: 10px; }
+    .task-card { padding: 15px; }
+    .task-header { flex-direction: column; align-items: flex-start; }
+    .task-status { margin-top: 8px; }
 }
 
 @media (max-width: 700px) { 
-    .main-container { padding: 20px; margin: 20px; border-radius: 10px; }
+    .main-container { padding: 20px; margin: 15px; border-radius: 10px; }
     .task-card { padding: 16px; } 
     h1:after { width: 60px; }
+    .task-type-name { font-size: 1.1em; }
+    .task-stat { font-size: 0.8em; padding: 3px 8px; }
+}
+
+/* Extra small devices */
+@media (max-width: 400px) {
+    .stat-card { 
+        flex: 0 0 46%; 
+        margin: 0 2% 10px;
+    }
+    h1 { font-size: 1.5em; }
+    .main-container { padding: 15px; margin: 10px; }
 }
 
 .stat-card.selected {

monitor/static/task_detail.css

@@ -1,4 +1,21 @@
-body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, #f4f6fa 0%, #e9f0f9 100%); }
+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;
+}
+.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; }
@@ -277,6 +294,82 @@ pre {
         left: auto;
         right: 10px;
     }
+    
+    .container {
+        margin: 20px;
+        padding: 20px;
+        max-width: calc(100% - 40px);
+    }
+    
+    h1 {
+        font-size: 1.8em;
+    }
+    
+    .task-info dl {
+        grid-template-columns: 1fr;
+        grid-gap: 8px;
+    }
+    
+    .task-info dt {
+        border-bottom: 1px solid #eee;
+        padding-bottom: 5px;
+    }
+    
+    .task-info dt:after {
+        display: none;
+    }
+    
+    pre {
+        font-size: 0.85em;
+        overflow-x: auto;
+        padding: 10px;
+    }
+    
+    .step-card {
+        padding: 15px;
+    }
+    
+    .step-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .step-time {
+        margin-top: 5px;
+    }
+    
+    .fab {
+        width: 50px;
+        height: 50px;
+        right: 20px;
+        bottom: 20px;
+        font-size: 1.3em;
+    }
+    
+    .back-link {
+        padding: 8px 16px;
+        font-size: 0.95em;
+    }
+}
+
+/* Extra small devices */
+@media (max-width: 400px) {
+    .container {
+        margin: 10px;
+        padding: 15px;
+    }
+    
+    h1 {
+        font-size: 1.5em;
+    }
+    
+    h2 {
+        font-size: 1.3em;
+    }
+    
+    .step-card {
+        padding: 12px;
+    }
 }
 
 /* 进度条样式 */
@@ -305,3 +398,37 @@ pre {
     margin-top: 4px;
     font-weight: normal;
 }
+
+/* Video player styles */
+.video-player {
+    margin: 15px 0;
+    background: #f8f9fa;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.video-player video {
+    display: block;
+    max-width: 100%;
+    border-radius: 6px;
+    background: #000;
+}
+
+.video-status {
+    padding: 10px;
+    text-align: center;
+    color: #666;
+    font-style: italic;
+    background: rgba(0,0,0,0.03);
+    border-top: 1px solid rgba(0,0,0,0.05);
+}
+
+.video-error {
+    color: #dc3545;
+}
+
+.video-success {
+    color: #28a745;
+}