Add status column with blinking dots, widen shell, risk/open format.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-08-02 12:07:42 +08:00
parent 46a861d311
commit ec3156021a
2 changed files with 80 additions and 28 deletions
+62 -19
View File
@@ -25,9 +25,11 @@ body {
}
.shell {
max-width: 1200px;
width: 100%;
max-width: min(1920px, 100%);
margin: 0 auto;
padding: 16px 20px 40px;
padding: 16px 24px 40px;
box-sizing: border-box;
}
.header {
@@ -211,17 +213,20 @@ input {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--panel);
width: 100%;
}
.monitor-table {
width: 100%;
min-width: 1100px;
border-collapse: collapse;
font-size: 0.88rem;
font-size: 0.9rem;
table-layout: auto;
}
.monitor-table th,
.monitor-table td {
padding: 10px 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
text-align: left;
white-space: nowrap;
@@ -254,53 +259,91 @@ input {
}
.monitor-table .col-check {
width: 36px;
width: 40px;
text-align: center;
}
.monitor-table .col-status {
width: 88px;
}
.monitor-table .col-actions {
white-space: normal;
}
.machine-cell {
.status-dots {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 0;
gap: 8px;
}
.machine-name {
font-weight: 650;
font-size: 0.95rem;
}
.dot,
.run-dot {
width: 8px;
height: 8px;
.dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
background: var(--muted);
}
.dot.ok,
.run-dot.ok {
.dot.ok {
background: var(--ok, #3cb371);
box-shadow: 0 0 0 2px rgba(60, 179, 113, 0.2);
box-shadow: 0 0 0 2px rgba(60, 179, 113, 0.25);
}
.dot.bad,
.run-dot.bad {
.dot.bad {
background: var(--bad, #e35d5d);
box-shadow: 0 0 0 2px rgba(227, 93, 93, 0.2);
box-shadow: 0 0 0 2px rgba(227, 93, 93, 0.25);
}
.dot.warn {
background: #e6a23c;
box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.25);
box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.3);
}
.dot.muted {
background: #5a6570;
box-shadow: 0 0 0 2px rgba(90, 101, 112, 0.25);
}
.dot.pulse {
animation: status-blink 1.4s ease-in-out infinite;
}
.dot.pulse.d1 {
animation-delay: 0s;
}
.dot.pulse.d2 {
animation-delay: 0.25s;
}
.dot.pulse.d3 {
animation-delay: 0.5s;
}
@keyframes status-blink {
0%,
100% {
opacity: 1;
transform: scale(1);
filter: brightness(1.15);
}
50% {
opacity: 0.35;
transform: scale(0.85);
filter: brightness(0.85);
}
}
@media (prefers-reduced-motion: reduce) {
.dot.pulse {
animation: none;
}
}
.row-actions {