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/VideoView.vue
+++ b/frontend/src/views/VideoView.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import VideoPanel from '@/components/VideoPanel.vue'
+import { useMonitoringData } from '@/composables/useMonitoringData'
+
+const { video, errorMessage, headerStatus } = useMonitoringData()
+</script>
+
+<template>
+  <div class="page-shell">
+    <header class="page-header">
+      <div>
+        <p class="eyebrow">Video</p>
+        <h1>视频流页面</h1>
+      </div>
+      <p class="description">这个页面专门用于看逐帧 JPEG 画面。前端会按固定频率请求单张 JPEG，后端每次返回一帧。</p>
+    </header>
+
+    <section class="banner" :class="{ error: !!errorMessage }">
+      {{ headerStatus }}
+    </section>
+
+    <VideoPanel :video="video" />
+  </div>
+</template>
+
+<style scoped>
+.page-shell {
+  display: grid;
+  gap: 22px;
+}
+
+.page-header {
+  display: grid;
+  gap: 10px;
+}
+
+.eyebrow {
+  margin: 0;
+  color: #8da2fb;
+  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>