更新地图
This commit is contained in:
+369
-69
@@ -1,7 +1,7 @@
|
||||
:root {
|
||||
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
color: #172033;
|
||||
background: #f3f6fb;
|
||||
background: #edf2f7;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -13,36 +13,44 @@ body {
|
||||
}
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 18px;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button:not(:disabled) {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: wait;
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: min(1200px, calc(100vw - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 14px 18px;
|
||||
border: 1px solid #dbe4ef;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 6px;
|
||||
margin: 0 0 5px;
|
||||
color: #64748b;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
@@ -51,113 +59,405 @@ button:disabled {
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
h2,
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 34px;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.status,
|
||||
.error,
|
||||
.card {
|
||||
border: 1px solid #e2e8f0;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.topbar button {
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 9px 16px;
|
||||
background: #2563eb;
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.topbar button:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.status-pill,
|
||||
.counter,
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 999px;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #92400e;
|
||||
background: #fffbeb;
|
||||
}
|
||||
|
||||
.status.ok {
|
||||
.status-pill.ok {
|
||||
color: #166534;
|
||||
background: #f0fdf4;
|
||||
background: #dcfce7;
|
||||
}
|
||||
|
||||
.counter,
|
||||
.badge {
|
||||
color: #334155;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 14px 18px;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 14px;
|
||||
color: #b91c1c;
|
||||
background: #fef2f2;
|
||||
}
|
||||
|
||||
.grid {
|
||||
.workspace {
|
||||
min-height: 560px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 18px;
|
||||
.panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dbe4ef;
|
||||
border-radius: 16px;
|
||||
background: #fff;
|
||||
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.card.wide {
|
||||
grid-column: 1 / -1;
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
table {
|
||||
.chat-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
max-height: 560px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.chat-panel .panel-header {
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding: 13px 16px;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chat-item:hover,
|
||||
.chat-item.selected {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.chat-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.chat-meta small,
|
||||
.chat-host,
|
||||
.muted {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.chat-text {
|
||||
color: #0f172a;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.map-panel {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.map-header {
|
||||
position: absolute;
|
||||
z-index: 500;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.map-container {
|
||||
height: 100%;
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
.map-empty {
|
||||
position: absolute;
|
||||
z-index: 450;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 10px 14px;
|
||||
border-radius: 999px;
|
||||
color: #475569;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.node-marker {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px !important;
|
||||
width: auto !important;
|
||||
height: 22px !important;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
color: white;
|
||||
background: transparent;
|
||||
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.node-marker span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 4px;
|
||||
border: 1px solid white;
|
||||
border-radius: inherit;
|
||||
background: var(--node-color, #2563eb);
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.node-marker.selected {
|
||||
box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45);
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.node-marker.selected span {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.node-detail-panel {
|
||||
min-height: 180px;
|
||||
}
|
||||
|
||||
.node-list-panel {
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
.node-table-wrap {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.node-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
.node-table th,
|
||||
.node-table td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
padding: 10px 8px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
.node-table th {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.node-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.node-row:hover,
|
||||
.node-row.selected {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 10px;
|
||||
padding: 8px 12px;
|
||||
background: #fff;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.pagination button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.node-detail-popup .leaflet-popup-content {
|
||||
width: 300px !important;
|
||||
max-width: 300px !important;
|
||||
}
|
||||
|
||||
.node-popup {
|
||||
width: 100%;
|
||||
line-height: 1.35;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.node-popup strong {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #0f172a;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.node-popup dl {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.node-popup dl div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.node-popup dt {
|
||||
color: #64748b;
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.node-popup dd {
|
||||
margin: 0;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
color: #64748b;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
dd {
|
||||
margin: 3px 0 0;
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.list li {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
.detail-side ul {
|
||||
margin: 10px 0 0;
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.list small {
|
||||
.detail-side li {
|
||||
margin-bottom: 6px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 22px 16px;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.header,
|
||||
.status {
|
||||
.leaflet-container {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.app-shell {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.topbar-actions {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.grid {
|
||||
.workspace,
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
min-height: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user