web: unify Agent management and add a draggable link board
Replace Probe pages with directed Agent links, shared deployment controls and unified display data. Add node dragging, canvas pan and zoom, saved layouts, and per-direction link controls.
This commit is contained in:
justme committed
1 parent
016dbc2bbf
commit
15f0023614
32 files changed
+937
-1093
No files matched your search
@@ -303,3 +303,293 @@
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Agent 节点画板：节点使用世界坐标，缩放和平移只作用于画板内容。 */
|
||||
.link-board-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 284px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.link-board {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--app-outline-soft);
|
||||
border-radius: 20px;
|
||||
background: var(--app-bg);
|
||||
}
|
||||
|
||||
.link-board-tools {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--app-outline-soft);
|
||||
background: var(--app-card);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.link-board-scale {
|
||||
min-width: 42px;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--app-ink-muted);
|
||||
}
|
||||
|
||||
.link-board-viewport {
|
||||
position: relative;
|
||||
height: clamp(440px, calc(100dvh - 230px), 1000px);
|
||||
overflow: hidden;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
background-image: radial-gradient(var(--app-outline) 1px, transparent 1px);
|
||||
background-size: 22px 22px;
|
||||
}
|
||||
|
||||
.link-board-viewport.dragging,
|
||||
.link-board-viewport.dragging .link-board-node {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.link-board-world {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.link-board-edges {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.link-board-edge {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
pointer-events: visiblePainted;
|
||||
color: var(--app-ink-faint);
|
||||
}
|
||||
|
||||
.link-board-edge.connected,
|
||||
.link-board-legend .connected {
|
||||
color: var(--app-ok);
|
||||
}
|
||||
|
||||
.link-board-edge.pending,
|
||||
.link-board-legend .pending {
|
||||
color: var(--app-warn);
|
||||
}
|
||||
|
||||
.link-board-edge.selected,
|
||||
.link-board-edge:focus-visible {
|
||||
color: var(--app-accent);
|
||||
}
|
||||
|
||||
.link-board-edge-line {
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.link-board-edge.disabled .link-board-edge-line {
|
||||
stroke-dasharray: 6 6;
|
||||
}
|
||||
|
||||
.link-board-edge.selected .link-board-edge-line,
|
||||
.link-board-edge:hover .link-board-edge-line,
|
||||
.link-board-edge:focus-visible .link-board-edge-line {
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.link-board-edge-hit {
|
||||
stroke: transparent;
|
||||
stroke-width: 22;
|
||||
fill: none;
|
||||
pointer-events: stroke;
|
||||
}
|
||||
|
||||
.link-board-arrow.connected {
|
||||
fill: var(--app-ok);
|
||||
}
|
||||
|
||||
.link-board-arrow.pending {
|
||||
fill: var(--app-warn);
|
||||
}
|
||||
|
||||
.link-board-arrow.disabled {
|
||||
fill: var(--app-ink-faint);
|
||||
}
|
||||
|
||||
.link-board-arrow.selected {
|
||||
fill: var(--app-accent);
|
||||
}
|
||||
|
||||
.link-board-edge-label rect {
|
||||
fill: var(--app-card);
|
||||
stroke: var(--app-outline-soft);
|
||||
}
|
||||
|
||||
.link-board-edge.selected .link-board-edge-label rect,
|
||||
.link-board-edge:focus-visible .link-board-edge-label rect {
|
||||
fill: var(--app-accent-container);
|
||||
stroke: var(--app-accent);
|
||||
}
|
||||
|
||||
.link-board-edge-label text {
|
||||
fill: currentColor;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.link-board-node {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 216px;
|
||||
height: 108px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--app-outline);
|
||||
border-radius: 18px;
|
||||
background: var(--app-card);
|
||||
box-shadow: 0 5px 18px color-mix(in srgb, var(--app-shadow) 7%, transparent);
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.link-board-node:focus-visible {
|
||||
outline: 2px solid var(--app-accent);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.link-board-node.offline {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.link-board-node-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.link-board-node-head > svg {
|
||||
flex-shrink: 0;
|
||||
color: var(--app-accent);
|
||||
}
|
||||
|
||||
.link-board-node-head strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-board-detail {
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-board-node-counts {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: var(--app-ink-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.link-board-node-counts b {
|
||||
color: var(--app-ink);
|
||||
}
|
||||
|
||||
.link-board-inspector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 18px;
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
background: var(--app-card-inset);
|
||||
}
|
||||
|
||||
.link-board-inspector .input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.link-board-route {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.link-board-storage {
|
||||
margin-top: auto;
|
||||
padding-top: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.link-board-legend {
|
||||
position: absolute;
|
||||
bottom: 14px;
|
||||
left: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
padding: 8px 12px;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--app-card);
|
||||
pointer-events: none;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.link-board-legend span::before {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
margin-right: 6px;
|
||||
border-top: 2px solid currentColor;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.link-board-legend .disabled::before {
|
||||
border-top-style: dashed;
|
||||
}
|
||||
|
||||
.link-board-empty {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.link-board-layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.link-board-viewport {
|
||||
height: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
.link-board-header {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.link-board-header .switch {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-board-tools > .row {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
Reference in new issue
Block a user