Replace control monitor cards with status table layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-02 12:01:49 +08:00
parent bc3041dcf2
commit 46a861d311
2 changed files with 271 additions and 124 deletions
@@ -206,6 +206,127 @@ input {
  font-weight: 600;
 }

+.monitor-table-wrap {
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+}
+
+.monitor-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.88rem;
+}
+
+.monitor-table th,
+.monitor-table td {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.monitor-table th {
+  color: var(--muted);
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.03);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.monitor-table tbody tr {
+  cursor: pointer;
+}
+
+.monitor-table tbody tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.monitor-table tbody tr.is-running {
+  box-shadow: inset 3px 0 0 rgba(60, 179, 113, 0.85);
+}
+
+.monitor-table tbody tr.is-stopped {
+  box-shadow: inset 3px 0 0 rgba(227, 93, 93, 0.75);
+}
+
+.monitor-table .col-check {
+  width: 36px;
+  text-align: center;
+}
+
+.monitor-table .col-actions {
+  white-space: normal;
+}
+
+.machine-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.machine-name {
+  font-weight: 650;
+}
+
+.dot,
+.run-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex: 0 0 auto;
+  background: var(--muted);
+}
+
+.dot.ok,
+.run-dot.ok {
+  background: var(--ok, #3cb371);
+  box-shadow: 0 0 0 2px rgba(60, 179, 113, 0.2);
+}
+
+.dot.bad,
+.run-dot.bad {
+  background: var(--bad, #e35d5d);
+  box-shadow: 0 0 0 2px rgba(227, 93, 93, 0.2);
+}
+
+.dot.warn {
+  background: #e6a23c;
+  box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.25);
+}
+
+.dot.muted {
+  background: #5a6570;
+}
+
+.row-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.btn-sm {
+  padding: 4px 8px;
+  font-size: 0.78rem;
+  min-height: 28px;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));