web: manage links in a master-detail explorer instead of the board
This commit is contained in:
justme committed
1 parent
70fc033789
commit
f62eefd365
5 files changed
+456
-645
No files matched your search
+234
-287
@@ -304,291 +304,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* 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-edge.good,
|
||||
.link-board-legend .good {
|
||||
color: var(--app-ok);
|
||||
}
|
||||
|
||||
.link-board-edge.fair,
|
||||
.link-board-legend .fair {
|
||||
color: var(--app-warn);
|
||||
}
|
||||
|
||||
.link-board-edge.poor,
|
||||
.link-board-legend .poor {
|
||||
color: var(--app-bad);
|
||||
}
|
||||
|
||||
.link-board-edge.pending,
|
||||
.link-board-legend .pending {
|
||||
color: var(--app-warn);
|
||||
}
|
||||
|
||||
.link-board-edge.dim {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.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.pending .link-board-edge-line {
|
||||
stroke-dasharray: 2 6;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.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-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-legend .pending::before {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -597,7 +312,239 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-board-tools > .row {
|
||||
flex-wrap: wrap;
|
||||
/* 线路管理：左边 Agent 列表（健康摘要，有问题的在前），右边是选中 Agent 的全部线路 */
|
||||
.link-dot {
|
||||
display: inline-block;
|
||||
flex: none;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--app-ink-faint);
|
||||
}
|
||||
|
||||
.link-dot.good {
|
||||
background: var(--app-ok);
|
||||
}
|
||||
|
||||
.link-dot.fair {
|
||||
background: var(--app-warn);
|
||||
}
|
||||
|
||||
.link-dot.poor {
|
||||
background: var(--app-bad);
|
||||
}
|
||||
|
||||
.link-explorer {
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.link-explorer-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
border-radius: var(--r-control);
|
||||
background: var(--app-card);
|
||||
}
|
||||
|
||||
.link-explorer-filter {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.link-explorer-list ul {
|
||||
display: grid;
|
||||
max-height: 560px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.link-explorer-agent {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 8px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--app-ink);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.link-explorer-agent:hover {
|
||||
background: var(--app-card-inset);
|
||||
}
|
||||
|
||||
.link-explorer-agent.selected {
|
||||
background: var(--app-accent-container);
|
||||
color: var(--app-accent);
|
||||
}
|
||||
|
||||
.link-explorer-agent.offline .name {
|
||||
color: var(--app-ink-faint);
|
||||
}
|
||||
|
||||
.link-explorer-agent .name {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.link-explorer-agent small {
|
||||
color: var(--app-ink-faint);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.link-explorer-agent .count {
|
||||
color: var(--app-ink-faint);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.link-explorer-agent .badge {
|
||||
min-width: 18px;
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--r-pill);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.link-explorer-agent .badge.poor {
|
||||
background: color-mix(in srgb, var(--app-bad) 30%, transparent);
|
||||
color: var(--app-bad);
|
||||
}
|
||||
|
||||
.link-explorer-agent .badge.fair {
|
||||
background: color-mix(in srgb, var(--app-warn) 26%, transparent);
|
||||
color: var(--app-warn);
|
||||
}
|
||||
|
||||
.link-explorer-list .empty {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.link-explorer-hint {
|
||||
margin-left: 6px;
|
||||
color: var(--app-ink-faint);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.link-explorer-detail {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.link-explorer-head {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.link-explorer-head .input {
|
||||
width: auto;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.link-explorer-peer {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--app-ink);
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.link-explorer-peer:hover {
|
||||
color: var(--app-accent);
|
||||
}
|
||||
|
||||
.link-explorer-lines td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.link-explorer-lines tr.poor {
|
||||
background: color-mix(in srgb, var(--app-bad) 8%, transparent);
|
||||
}
|
||||
|
||||
.link-explorer-lines tr.fair,
|
||||
.link-explorer-lines tr.pending {
|
||||
background: color-mix(in srgb, var(--app-warn) 7%, transparent);
|
||||
}
|
||||
|
||||
.link-explorer-lines tr.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.warn-text {
|
||||
color: var(--app-warn);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.link-explorer {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Agent 详情：顶部概览条、线路表、折叠的 IPv6 诊断 */
|
||||
.agent-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--r-control);
|
||||
background: var(--app-card);
|
||||
}
|
||||
|
||||
.agent-summary > div {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.agent-summary span {
|
||||
color: var(--app-ink-faint);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.agent-summary b {
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.agent-lines td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.agent-ipv6 {
|
||||
margin-top: 12px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--app-outline-soft);
|
||||
}
|
||||
|
||||
.agent-ipv6 > summary {
|
||||
color: var(--app-ink-muted);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.agent-ipv6 > .kv {
|
||||
margin-top: 8px;
|
||||
}
|
||||
Reference in new issue
Block a user