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

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