first commit

2026-03-31 20:41:08 +08:00
commit 771829d99d
44 changed files with 7663 additions and 0 deletions
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import GpsMapPanel from '@/components/GpsMapPanel.vue'
+import { useMonitoringData } from '@/composables/useMonitoringData'
+
+const { gps, errorMessage, headerStatus } = useMonitoringData({
+  refreshIntervalMs: 500,
+})
+</script>
+
+<template>
+  <div class="page-shell">
+    <header class="page-header">
+      <div>
+        <p class="eyebrow">Map</p>
+        <h1>地图定位页面</h1>
+      </div>
+      <p class="description">
+        这里整合了 `GeoStream` 的 GPS 展示逻辑。只要原来的 GPS 模块继续写
+        `gps_latest.json`，这个页面就能直接显示实时定位。
+      </p>
+    </header>
+
+    <section class="banner" :class="{ error: !!errorMessage }">
+      {{ headerStatus }}
+    </section>
+
+    <GpsMapPanel :gps="gps" />
+  </div>
+</template>
+
+<style scoped>
+.page-shell {
+  display: grid;
+  gap: 22px;
+}
+
+.page-header {
+  display: grid;
+  gap: 10px;
+}
+
+.eyebrow {
+  margin: 0;
+  color: #f5a524;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(28px, 4vw, 48px);
+}
+
+.description,
+.banner {
+  margin: 0;
+  color: #d5dbee;
+  line-height: 1.75;
+}
+
+.banner {
+  padding: 14px 16px;
+  border-radius: 18px;
+  background: rgba(11, 19, 35, 0.84);
+  border: 1px solid rgba(133, 147, 169, 0.2);
+}
+
+.banner.error {
+  color: #ffd0d0;
+  border-color: rgba(255, 107, 107, 0.28);
+}
+</style>