From 2c135d5ebe13a8c1d7da0065317dfde2150e7024 Mon Sep 17 00:00:00 2001
From: wuzhuorong <973204353@qq.com>
Date: Fri, 12 Jun 2026 14:10:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E4=BF=AE=E5=A4=8D=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=88=87=E6=8D=A2=E5=AF=BC=E8=87=B4=E6=A3=80=E6=B5=8B?=
 =?UTF-8?q?=E8=BF=87=E7=A8=8B=E4=B8=AD=E6=96=AD=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/layouts/MainLayout.vue | 299 ++++++++++++++++++++++++++++
 1 file changed, 299 insertions(+)
 create mode 100644 apps/web/src/layouts/MainLayout.vue

diff --git a/apps/web/src/layouts/MainLayout.vue b/apps/web/src/layouts/MainLayout.vue
new file mode 100644
index 0000000..57e68fc
--- /dev/null
+++ b/apps/web/src/layouts/MainLayout.vue
@@ -0,0 +1,299 @@
+<template>
+  <el-container class="layout-root">
+    <!-- 侧边栏 -->
+    <el-aside class="layout-aside" :width="collapsed ? '64px' : '220px'">
+      <div class="logo-area" @click="$router.push('/')">
+        <div class="logo-icon">
+          <el-icon :size="22"><VideoCameraFilled /></el-icon>
+        </div>
+        <span v-if="!collapsed" class="logo-text">视频检测</span>
+      </div>
+
+      <el-menu
+        :default-active="activeRoute"
+        :collapse="collapsed"
+        :collapse-transition="false"
+        background-color="#0F172A"
+        text-color="#94A3B8"
+        active-text-color="#22C55E"
+        router
+      >
+        <el-menu-item
+          v-for="item in menuItems"
+          :key="item.path"
+          :index="item.path"
+        >
+          <el-icon><component :is="item.icon" /></el-icon>
+          <template #title>{{ item.title }}</template>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+
+    <el-container>
+      <!-- 顶部 -->
+      <el-header class="layout-header">
+        <div class="header-left">
+          <el-button
+            text
+            class="collapse-btn"
+            @click="collapsed = !collapsed"
+            :aria-label="collapsed ? '展开侧边栏' : '收起侧边栏'"
+          >
+            <el-icon :size="20">
+              <Fold v-if="!collapsed" />
+              <Expand v-else />
+            </el-icon>
+          </el-button>
+          <h1 class="title">{{ currentTitle }}</h1>
+        </div>
+
+        <div class="header-right">
+          <!-- 实时连接状态 -->
+          <div class="connection-badge" :class="alertStore.statusClass">
+            <span class="dot"></span>
+            <span class="label">{{ alertStore.statusLabel }}</span>
+          </div>
+
+          <!-- 预警铃铛 -->
+          <el-badge
+            :value="alertStore.unreadCount"
+            :hidden="alertStore.unreadCount === 0"
+            :max="99"
+            class="bell-badge"
+          >
+            <el-button
+              text
+              class="bell-btn"
+              @click="$router.push('/alerts')"
+              aria-label="查看预警列表"
+            >
+              <el-icon :size="20"><Bell /></el-icon>
+            </el-button>
+          </el-badge>
+
+          <el-tag type="success" effect="dark" round size="small">运行中</el-tag>
+        </div>
+      </el-header>
+
+      <!-- 路由出口 -->
+      <el-main class="layout-main">
+        <router-view v-slot="{ Component, route: viewRoute }">
+          <keep-alive>
+            <component :is="Component" v-if="viewRoute.meta.keepAlive" :key="viewRoute.name" />
+          </keep-alive>
+          <component :is="Component" v-if="!viewRoute.meta.keepAlive" :key="viewRoute.name" />
+        </router-view>
+      </el-main>
+    </el-container>
+
+    <!-- 全局预警弹窗 -->
+    <AlertNotification />
+  </el-container>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  VideoCameraFilled,
+  WarningFilled,
+  Bell,
+  Fold,
+  Expand
+} from '@element-plus/icons-vue'
+import { useAlertStore } from '@/stores/alertStore'
+import { connectAlertSocket, disconnectAlertSocket } from '@/services/mqtt.client'
+import AlertNotification from '@/components/AlertNotification.vue'
+
+const collapsed = ref(false)
+const route = useRoute()
+const alertStore = useAlertStore()
+
+const menuItems = [
+  { path: '/', title: '模型检测', icon: VideoCameraFilled },
+  { path: '/alerts', title: '预警列表', icon: WarningFilled }
+]
+
+const activeRoute = computed(() => route.path)
+const currentTitle = computed(() => {
+  const item = menuItems.find((m) => m.path === route.path)
+  return item ? item.title : '视频模型检测平台'
+})
+
+onMounted(() => {
+  connectAlertSocket()
+})
+
+onUnmounted(() => {
+  disconnectAlertSocket()
+})
+</script>
+
+<style scoped>
+.layout-root {
+  height: 100vh;
+  background: #020617;
+}
+
+.layout-aside {
+  background: #0F172A;
+  border-right: 1px solid rgba(255, 255, 255, 0.06);
+  transition: width 200ms ease;
+  overflow: hidden;
+}
+
+.logo-area {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 16px;
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.logo-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
+  color: #0F172A;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.logo-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: #F8FAFC;
+  letter-spacing: -0.3px;
+}
+
+:deep(.el-menu) {
+  border-right: none;
+}
+
+:deep(.el-menu-item) {
+  height: 48px;
+  margin: 4px 8px;
+  border-radius: 8px;
+  transition: background 150ms ease, color 150ms ease;
+}
+
+:deep(.el-menu-item:hover) {
+  background: rgba(34, 197, 94, 0.08) !important;
+  color: #F8FAFC !important;
+}
+
+:deep(.el-menu-item.is-active) {
+  background: rgba(34, 197, 94, 0.15) !important;
+}
+
+.layout-header {
+  background: #0F172A;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 60px;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.collapse-btn {
+  color: #94A3B8;
+  cursor: pointer;
+}
+
+.collapse-btn:hover {
+  color: #22C55E;
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #F8FAFC;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.connection-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.connection-badge .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #64748B;
+}
+
+.connection-badge.connected .dot {
+  background: #22C55E;
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+}
+
+.connection-badge.connected .label {
+  color: #22C55E;
+}
+
+.connection-badge.connecting .dot {
+  background: #F59E0B;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+.connection-badge.connecting .label {
+  color: #F59E0B;
+}
+
+.connection-badge.disconnected .dot {
+  background: #EF4444;
+}
+
+.connection-badge.disconnected .label {
+  color: #EF4444;
+}
+
+.bell-badge {
+  cursor: pointer;
+}
+
+.bell-btn {
+  color: #94A3B8;
+  cursor: pointer;
+}
+
+.bell-btn:hover {
+  color: #22C55E;
+}
+
+.layout-main {
+  background: #020617;
+  padding: 0;
+  overflow: auto;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+</style>
\ No newline at end of file