first commit

frontend/src/views/DashboardView.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import GpsMapPanel from '@/components/GpsMapPanel.vue'
+import NetworkPanel from '@/components/NetworkPanel.vue'
+import VideoPanel from '@/components/VideoPanel.vue'
+import { useMonitoringData } from '@/composables/useMonitoringData'
+
+const { gps, network, video, errorMessage, headerStatus } = useMonitoringData()
+</script>
+
+<template>
+  <div class="page-shell">
+    <header class="hero">
+      <div>
+        <p class="eyebrow">Overview</p>
+        <h1>机器人竞赛指挥台</h1>
+      </div>
+      <p class="hero-text">
+        当前版本已经接通三块核心能力：JPEG 视频流、GPS 地图定位、网络状态展示。后面接真实
+        C 数据源时，前端页面不需要大改。
+      </p>
+    </header>
+
+    <section class="banner" :class="{ error: !!errorMessage }">
+      {{ headerStatus }}
+    </section>
+
+    <main class="layout">
+      <VideoPanel :video="video" />
+      <GpsMapPanel :gps="gps" />
+      <NetworkPanel :network="network" />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.page-shell {
+  display: grid;
+  gap: 22px;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
+  gap: 20px;
+  align-items: end;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: #8da2fb;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(34px, 5vw, 64px);
+  line-height: 1.04;
+}
+
+.hero-text {
+  margin: 0;
+  color: #c8d2e8;
+  font-size: 16px;
+  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);
+  color: #d5dbee;
+}
+
+.banner.error {
+  color: #ffd0d0;
+  border-color: rgba(255, 107, 107, 0.28);
+}
+
+.layout {
+  display: grid;
+  gap: 20px;
+}
+
+@media (max-width: 960px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+}
+</style>