zhangyan/cmr-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add realtime gateway and simulator bridge

Browse Source
This commit is contained in:
zhangyan
2026-03-27 21:06:17 +08:00
parent 0703fd47a2
commit 2c0fd4c549
36 changed files with 6852 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

508
realtime-gateway/internal/gateway/adminui/style.css Normal file
View File

@@ -0,0 +1,508 @@
:root {
--bg: #d9dfd3;
--panel: rgba(247, 249, 243, 0.94);
--card: rgba(255, 255, 255, 0.94);
--line: rgba(28, 43, 34, 0.12);
--text: #15261f;
--muted: #5e6f66;
--accent: #0f7a68;
--accent-2: #d57a1f;
--ok: #13754c;
--warn: #9a5a11;
--shadow: 0 18px 40px rgba(28, 43, 34, 0.12);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
background:
radial-gradient(circle at top left, rgba(213, 122, 31, 0.22), transparent 28%),
radial-gradient(circle at bottom right, rgba(15, 122, 104, 0.22), transparent 24%),
var(--bg);
color: var(--text);
font-family: "Bahnschrift", "Segoe UI Variable Text", "PingFang SC", sans-serif;
}
.shell {
display: grid;
grid-template-columns: 320px 1fr;
min-height: 100vh;
}
.sidebar {
padding: 24px;
background: rgba(22, 35, 29, 0.92);
color: #eef4ed;
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.brand__eyebrow {
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(238, 244, 237, 0.68);
}
.brand h1 {
margin: 10px 0 12px;
font-size: 34px;
line-height: 1;
}
.badge {
display: inline-flex;
min-height: 30px;
align-items: center;
padding: 0 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(238, 244, 237, 0.82);
font-size: 13px;
font-weight: 700;
}
.badge.is-ok {
background: rgba(19, 117, 76, 0.24);
color: #9ef4c7;
}
.sidebar__section {
margin-top: 26px;
}
.sidebar__label {
margin-bottom: 12px;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(238, 244, 237, 0.58);
}
.meta-list,
.endpoint-list {
display: grid;
gap: 10px;
}
.meta-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.meta-row span {
color: rgba(238, 244, 237, 0.66);
}
.endpoint-list code {
display: block;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
color: #dbe8e1;
font-family: "Cascadia Code", "Consolas", monospace;
}
.action-btn,
.filter-select {
min-height: 42px;
border: 0;
border-radius: 14px;
font: inherit;
}
.action-btn {
width: 100%;
font-weight: 800;
color: #113128;
background: linear-gradient(135deg, #f0d96b, #d57a1f);
cursor: pointer;
}
.action-btn--inline {
width: auto;
padding: 0 16px;
}
.action-btn--muted {
color: #eef4ed;
background: linear-gradient(135deg, #466055, #2f473d);
}
.toggle {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
color: rgba(238, 244, 237, 0.82);
}
.main {
padding: 28px;
}
.hero {
padding: 24px 26px;
border-radius: 24px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(233, 239, 232, 0.9));
box-shadow: var(--shadow);
}
.hero__tag {
display: inline-block;
margin-bottom: 10px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(15, 122, 104, 0.12);
color: var(--accent);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 800;
}
.hero h2 {
margin: 0;
font-size: 32px;
}
.hero__text {
margin: 10px 0 0;
color: var(--muted);
font-size: 15px;
}
.grid {
display: grid;
gap: 18px;
margin-top: 20px;
}
.stats-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.detail-grid {
grid-template-columns: 1.15fr 1fr;
}
.traffic-card {
grid-column: 1 / -1;
}
.live-card {
grid-column: 1 / -1;
}
.channel-form {
display: grid;
grid-template-columns: 1.3fr 1fr 0.8fr 0.9fr;
gap: 12px;
margin-bottom: 14px;
}
.card {
padding: 20px;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--card);
box-shadow: var(--shadow);
}
.metric-card__value {
margin-top: 10px;
font-size: 42px;
line-height: 1;
font-weight: 900;
letter-spacing: -0.04em;
}
.card__label {
color: var(--muted);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.card__header {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
margin-bottom: 16px;
}
.card__title {
font-size: 20px;
font-weight: 900;
}
.card__hint {
margin-top: 6px;
color: var(--muted);
font-size: 13px;
}
.filter-select {
min-width: 220px;
padding: 0 14px;
border: 1px solid var(--line);
background: #f6f8f2;
}
.live-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: flex-end;
}
.live-meta {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 14px;
}
.live-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 14px;
}
.live-stat {
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(244, 247, 240, 0.88);
}
.live-stat__label {
display: block;
margin-bottom: 8px;
color: var(--muted);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.live-stat strong {
display: block;
font-size: 22px;
line-height: 1.1;
}
.live-panel-grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 14px;
}
.traffic-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.live-track-panel {
display: flex;
flex-direction: column;
gap: 12px;
}
.live-track {
min-height: 320px;
border: 1px solid var(--line);
border-radius: 16px;
background:
radial-gradient(circle at top left, rgba(15, 122, 104, 0.15), transparent 30%),
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 242, 234, 0.96));
overflow: hidden;
}
.live-track svg {
display: block;
width: 100%;
height: 320px;
}
.live-track__empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
color: var(--muted);
font-size: 13px;
}
.live-track-legend {
display: grid;
gap: 8px;
}
.live-track-legend__item {
display: flex;
gap: 10px;
align-items: center;
padding: 8px 10px;
border-radius: 12px;
background: rgba(244, 247, 240, 0.88);
border: 1px solid var(--line);
font-size: 12px;
}
.live-track-legend__swatch {
width: 10px;
height: 10px;
border-radius: 999px;
flex: 0 0 auto;
}
.live-feed {
min-height: 320px;
max-height: 420px;
overflow: auto;
padding: 14px;
border: 1px solid var(--line);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(19, 29, 24, 0.98), rgba(14, 24, 20, 0.98));
color: #dceee7;
font-family: "Cascadia Code", "Consolas", monospace;
font-size: 12px;
line-height: 1.6;
}
.live-feed__empty {
color: rgba(220, 238, 231, 0.68);
}
.live-line {
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
}
.live-line + .live-line {
margin-top: 10px;
}
.live-line__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 8px;
color: #8dd9c7;
}
.live-line__summary {
margin-bottom: 8px;
color: #f1d88e;
font-weight: 700;
}
.live-line__payload {
color: rgba(241, 246, 244, 0.8);
white-space: pre-wrap;
word-break: break-word;
}
.table-wrap {
overflow: auto;
border-radius: 16px;
border: 1px solid var(--line);
background: rgba(244, 247, 240, 0.8);
}
.result-box {
min-height: 88px;
margin: 10px 0 16px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid var(--line);
background: #f4f7ef;
color: var(--text);
font-family: "Cascadia Code", "Consolas", monospace;
font-size: 12px;
line-height: 1.6;
white-space: pre-wrap;
word-break: break-word;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
th {
position: sticky;
top: 0;
background: #edf2ea;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
td code,
.json-chip {
font-family: "Cascadia Code", "Consolas", monospace;
font-size: 12px;
}
.json-chip {
display: inline-block;
max-width: 100%;
padding: 8px 10px;
border-radius: 12px;
background: #f2f5ef;
white-space: pre-wrap;
word-break: break-word;
}
.empty {
padding: 18px;
color: var(--muted);
}
@media (max-width: 1180px) {
.shell {
grid-template-columns: 1fr;
}
.stats-grid,
.detail-grid {
grid-template-columns: 1fr;
}
.channel-form {
grid-template-columns: 1fr;
}
.live-stats,
.traffic-grid,
.live-panel-grid {
grid-template-columns: 1fr;
}
.live-controls {
justify-content: stretch;
}
}