fix(web): 修复页面切换导致检测过程中断的问题
This commit is contained in:
299
apps/web/src/layouts/MainLayout.vue
Normal file
299
apps/web/src/layouts/MainLayout.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user