fix: 优化任务列表布局

webgui/web/assets/styles/components.css

@@ -865,46 +865,148 @@
   margin-bottom: var(--space-md);
 }
 
-/* ---------- Job cell with action + src→dst ---------- */
-.job-cell {
+/* ---------- Jobs ---------- */
+.job-list {
+  display: grid;
+  gap: var(--space-sm);
+}
+
+.job-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--color-hairline-soft);
+}
+
+.job-item:last-child {
+  border-bottom: none;
+}
+
+.job-main {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--space-md);
+  min-width: 0;
+}
+
+.job-head {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  min-width: 200px;
+  align-items: flex-start;
+  gap: var(--space-xs);
 }
 
-.job-cell .job-action {
+.job-id {
+  display: grid;
+  gap: 2px;
+  min-width: 58px;
+  color: var(--color-muted);
+  font: var(--typo-code);
+}
+
+.job-id small {
+  color: var(--color-muted-soft);
+  font: var(--typo-caption);
+}
+
+.job-route {
+  display: grid;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+.job-route-line {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-xs);
+}
+
+.job-route-line span {
+  color: var(--color-muted);
   font: var(--typo-caption-uppercase);
   letter-spacing: var(--typo-caption-uppercase-tracking);
-  color: var(--color-muted);
+  text-transform: uppercase;
 }
 
-.job-cell .job-paths {
-  font: var(--typo-body-sm);
+.job-route-line code {
   color: var(--color-body);
-  word-break: break-all;
+  font: var(--typo-code);
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
-.job-cell .job-paths .arrow {
-  color: var(--color-muted-soft);
-  margin: 0 var(--space-xxs);
+.job-schedule {
+  grid-column: 2;
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+  color: var(--color-muted);
+  font: var(--typo-caption);
+}
+
+.job-side {
+  display: grid;
+  align-content: start;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
+.job-progress-wrap {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.job-metric-label,
+.job-metric span {
+  color: var(--color-muted);
+  font: var(--typo-caption);
+}
+
+.job-progress {
+  display: grid;
+  gap: 4px;
+}
+
+.job-progress-text {
+  color: var(--color-muted);
+  font: var(--typo-code);
+}
+
+.job-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-xs);
+}
+
+.job-metric {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.job-metric strong {
+  color: var(--color-body);
+  font: var(--typo-code);
+  font-weight: 400;
+  overflow-wrap: anywhere;
 }
 
 .job-actions {
-  display: inline-flex;
+  display: flex;
   justify-content: flex-end;
   gap: var(--space-xs);
   flex-wrap: wrap;
 }
 
-.job-detail-row {
-  background-color: var(--color-surface-soft);
-}
-
 .job-detail {
+  grid-column: 1 / -1;
   display: grid;
   gap: var(--space-sm);
-  padding: var(--space-sm) 0;
+  padding: var(--space-md);
+  background-color: var(--color-surface-soft);
+  border-radius: var(--radius-sm);
 }
 
 .job-detail dl {
@@ -964,6 +1066,15 @@
   .form-grid {
     grid-template-columns: 1fr;
   }
+  .job-item {
+    grid-template-columns: 1fr;
+  }
+  .job-side {
+    grid-template-columns: 1fr;
+  }
+  .job-actions {
+    justify-content: flex-start;
+  }
 }
 
 @media (max-width: 768px) {
@@ -982,4 +1093,20 @@
   .top-nav nav {
     display: none;
   }
+  .job-item {
+    padding: var(--space-md);
+  }
+  .job-main {
+    grid-template-columns: 1fr;
+  }
+  .job-schedule {
+    grid-column: 1;
+  }
+  .job-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .job-detail dl,
+  .job-detail dl div {
+    grid-template-columns: 1fr;
+  }
 }