Integrate SBAS workflows and redesign task center

frontend/src/App.css

@@ -1795,31 +1795,62 @@ input[type="checkbox"] {
     100% { transform: rotate(360deg); }
 }
 
-/* 全局任务锁定遮罩样式 */
+/* Global task center */
 .global-task-overlay {
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(15, 23, 42, 0.75);
-    backdrop-filter: blur(6px);
-    z-index: 9999;
-    display: flex;
-    justify-content: center;
+    right: 18px;
+    bottom: 18px;
+    z-index: 1200;
+    color: #0f172a;
+    pointer-events: none;
+}
+
+.task-center-button {
+    pointer-events: auto;
+    display: inline-flex;
     align-items: center;
-    color: white;
+    gap: 8px;
+    min-height: 38px;
+    padding: 8px 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 8px;
+    background: #ffffff;
+    color: #0f172a;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.task-center-button strong {
+    color: #2563eb;
+    font-family: var(--font-mono);
+}
+
+.task-center-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background: #2563eb;
+    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
+    animation: pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 0.55; }
+    50% { opacity: 1; }
 }
 
 .overlay-content {
-    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
-    padding: 40px;
-    border-radius: 12px;
-    width: 500px;
-    max-width: 90%;
-    text-align: center;
-    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.45);
-    border: 1px solid rgba(148, 163, 184, 0.2);
+    pointer-events: auto;
+    background: #ffffff;
+    padding: 14px;
+    border-radius: 8px;
+    width: min(440px, calc(100vw - 36px));
+    max-height: min(70vh, 620px);
+    overflow: auto;
+    text-align: left;
+    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.24);
+    border: 1px solid #cbd5e1;
 }
 
 .loading-spinner-large {
@@ -1832,25 +1863,52 @@ input[type="checkbox"] {
     margin: 0 auto 20px;
 }
 
-.overlay-content h3 {
-    margin: 0 0 25px 0;
-    font-size: 1.5rem;
-    letter-spacing: 1px;
+.task-center-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    align-items: flex-start;
+    margin-bottom: 12px;
+}
+
+.task-center-header h3 {
+    margin: 0;
+    font-size: 15px;
+    color: #0f172a;
+}
+
+.task-center-header p {
+    margin: 4px 0 0;
+    font-size: 12px;
+    line-height: 1.5;
+    color: #64748b;
+}
+
+.task-center-close {
+    width: 28px;
+    height: 28px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    background: #f8fafc;
+    color: #334155;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
 }
 
 .active-tasks-container {
     display: flex;
     flex-direction: column;
-    gap: 20px;
-    margin-bottom: 30px;
+    gap: 10px;
+    margin-bottom: 12px;
     text-align: left;
 }
 
 .task-progress-item {
-    background: rgba(148, 163, 184, 0.12);
-    padding: 15px;
+    background: #f8fafc;
+    padding: 10px;
     border-radius: 8px;
-    border: 1px solid rgba(148, 163, 184, 0.18);
+    border: 1px solid #e2e8f0;
 }
 
 .task-info-row {
@@ -1862,7 +1920,7 @@ input[type="checkbox"] {
 
 .task-label {
     font-weight: 600;
-    color: #94a3b8;
+    color: #334155;
 }
 
 .task-percent {
@@ -1872,8 +1930,8 @@ input[type="checkbox"] {
 }
 
 .task-progress-bar {
-    height: 8px;
-    background-color: rgba(148, 163, 184, 0.35);
+    height: 7px;
+    background-color: #e2e8f0;
     border-radius: 4px;
     overflow: hidden;
     margin-bottom: 8px;
@@ -1889,7 +1947,7 @@ input[type="checkbox"] {
 .task-status-msg {
     margin: 0;
     font-size: 12px;
-    color: #e2e8f0;
+    color: #64748b;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1897,7 +1955,7 @@ input[type="checkbox"] {
 
 .overlay-footer-hint {
     font-size: 12px;
-    color: #94a3b8;
+    color: #64748b;
     margin: 0;
     line-height: 1.5;
 }