shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): harden route transitions and monitor memory

Browse Source
This commit is contained in:
lingniu
2026-07-15 23:54:21 +08:00
parent 3fabcf181a
commit c29ccdf2da
17 changed files with 332 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
vehicle-data-platform/apps/web/src/v2/styles/v2.css
View File

@@ -224,11 +224,29 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-refresh-cadence b { color: var(--v2-blue); font-weight: 700; }
.v2-page-state, .v2-inline-state { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--v2-muted); font-size: 12px; }
.v2-page-state { min-height: calc(100vh - 64px); }
.v2-page-state { min-height: 100%; flex-direction: column; gap: 18px; padding: clamp(18px, 3vw, 36px); }
.v2-page-state > header { display: flex; align-items: center; gap: 10px; }
.v2-page-state > header strong, .v2-page-state > header small { display: block; }
.v2-page-state > header strong { color: var(--v2-text); font-size: 13px; }
.v2-page-state > header small { margin-top: 3px; color: var(--v2-muted); font-size: 9px; }
.v2-page-skeleton { display: grid; width: min(920px, 100%); grid-template-columns: repeat(3,1fr); gap: 10px; }
.v2-page-skeleton i { min-height: 72px; border: 1px solid #edf1f6; border-radius: 10px; background: linear-gradient(100deg,#f4f7fb 25%,#edf3fa 38%,#f4f7fb 55%); background-size: 300% 100%; animation: v2-skeleton 1.4s ease infinite; }
.v2-page-skeleton i:last-child { min-height: 260px; grid-column: 1 / -1; }
.v2-route-error { display: grid; min-height: 100%; place-items: center; padding: 28px; background: #f6f8fb; }
.v2-route-error > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: #fff1f2; color: #dc2626; font-size: 24px; }
.v2-route-error > div { width: min(560px,100%); text-align: center; }
.v2-route-error small { color: #b45309; font-size: 10px; font-weight: 700; }
.v2-route-error h2 { margin: 8px 0; color: var(--v2-text); font-size: 21px; }
.v2-route-error p { margin: 0 auto; color: var(--v2-muted); font-size: 12px; line-height: 1.7; }
.v2-route-error code { display: block; margin-top: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9b1c1c; font-size: 9px; }
.v2-route-error footer { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.v2-route-error button, .v2-route-error a { display: inline-flex; height: 36px; align-items: center; gap: 6px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; padding: 0 14px; color: #526176; text-decoration: none; cursor: pointer; font-size: 11px; font-weight: 700; }
.v2-route-error button { border-color: var(--v2-blue); background: var(--v2-blue); color: #fff; }
.v2-inline-state { min-height: 76px; border: 1px dashed var(--v2-border); border-radius: 8px; padding: 12px; }
.v2-inline-state.is-error { justify-content: flex-start; min-height: 42px; border-style: solid; border-color: #fecaca; background: #fff5f5; color: #b42318; }
.v2-inline-state button { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 11px; }
.v2-spinner { width: 14px; height: 14px; border: 2px solid #cfe0fb; border-top-color: var(--v2-blue); border-radius: 50%; animation: v2-spin .8s linear infinite; }
@keyframes v2-skeleton { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.v2-module-stage { margin: 18px; border: 1px solid var(--v2-border); border-radius: var(--v2-radius); background: #fff; padding: 28px; box-shadow: var(--v2-shadow); }
.v2-module-stage h2 { margin: 0; font-size: 20px; }
.v2-module-stage p { margin: 10px 0 0; color: var(--v2-muted); font-size: 13px; }