feat(platform): add vehicle data management console

2026-07-03 20:55:54 +08:00
parent 0d8916df47
commit 859bc3e9ee
45 changed files with 6837 additions and 0 deletions
--- a/vehicle-data-platform/apps/web/src/styles/global.css
+++ b/vehicle-data-platform/apps/web/src/styles/global.css
@@ -0,0 +1,145 @@
+@import './tokens.css';
+@import '@douyinfe/semi-theme-default/scss/index.scss';
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 1280px;
+  background: var(--vp-bg);
+  color: var(--vp-text);
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.vp-app {
+  min-height: 100vh;
+  background: var(--vp-bg);
+}
+
+.vp-shell {
+  display: grid;
+  grid-template-columns: var(--vp-shell-sidebar) minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.vp-sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  background: var(--vp-surface);
+  border-right: 1px solid var(--vp-border);
+  padding: 16px 12px;
+}
+
+.vp-brand {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 8px 16px;
+  font-weight: 700;
+  color: var(--vp-text);
+}
+
+.vp-brand-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: linear-gradient(135deg, var(--vp-primary), var(--vp-cyan));
+}
+
+.vp-main {
+  min-width: 0;
+}
+
+.vp-topbar {
+  height: var(--vp-shell-header);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid var(--vp-border);
+  backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.vp-page {
+  padding: var(--vp-page-gutter);
+}
+
+.vp-section {
+  background: var(--vp-surface);
+  border: 1px solid var(--vp-border);
+  border-radius: var(--vp-radius);
+  box-shadow: var(--vp-shadow-sm);
+}
+
+.vp-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.vp-grid.two {
+  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
+}
+
+.vp-kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.vp-kpi-value {
+  font-size: 28px;
+  font-weight: 700;
+  line-height: 34px;
+  color: var(--vp-text);
+}
+
+.vp-kpi-label {
+  margin-top: 4px;
+  color: var(--vp-text-muted);
+  font-size: 13px;
+}
+
+.vp-map {
+  position: relative;
+  height: 360px;
+  overflow: hidden;
+  background:
+    linear-gradient(90deg, rgba(22, 100, 255, 0.08) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(22, 100, 255, 0.08) 1px, transparent 1px),
+    #f8fbff;
+  background-size: 36px 36px;
+}
+
+.vp-map-dot {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--vp-primary);
+  box-shadow: 0 0 0 5px rgba(22, 100, 255, 0.16);
+}
+
+.vp-json {
+  margin: 0;
+  padding: 16px;
+  border-radius: 8px;
+  background: #101828;
+  color: #e4e7ec;
+  overflow: auto;
+  max-height: 360px;
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.semi-navigation-item-text {
+  font-size: 14px;
+}
--- a/vehicle-data-platform/apps/web/src/styles/tokens.css
+++ b/vehicle-data-platform/apps/web/src/styles/tokens.css
@@ -0,0 +1,20 @@
+:root {
+  --vp-bg: #f5f7fb;
+  --vp-surface: #ffffff;
+  --vp-surface-muted: #f9fafc;
+  --vp-border: #e6e9f0;
+  --vp-text: #172033;
+  --vp-text-muted: #667085;
+  --vp-text-subtle: #98a2b3;
+  --vp-primary: #1664ff;
+  --vp-primary-hover: #0f4fd6;
+  --vp-cyan: #00a4b8;
+  --vp-success: #12b76a;
+  --vp-warning: #f79009;
+  --vp-danger: #f04438;
+  --vp-radius: 8px;
+  --vp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
+  --vp-shell-sidebar: 232px;
+  --vp-shell-header: 56px;
+  --vp-page-gutter: 24px;
+}