103 lines
4.4 KiB
Vue
103 lines
4.4 KiB
Vue
<template>
|
|
<el-container class="app-shell">
|
|
<el-aside :width="collapsed ? '64px' : '208px'" class="app-sidebar">
|
|
<div class="brand" :class="{ collapsed }">
|
|
<span class="brand-mark">S</span>
|
|
<span v-if="!collapsed" class="brand-name">Sense</span>
|
|
</div>
|
|
<el-menu
|
|
:default-active="$route.path"
|
|
router
|
|
background-color="#001529"
|
|
text-color="rgba(255,255,255,.72)"
|
|
active-text-color="#fff"
|
|
:collapse="collapsed"
|
|
:collapse-transition="false"
|
|
>
|
|
<el-menu-item v-for="item in navigation" :key="item.path" :index="item.path">
|
|
<el-icon><component :is="item.icon || 'Menu'" /></el-icon>
|
|
<template #title>{{ item.title }}</template>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-aside>
|
|
|
|
<el-container>
|
|
<el-header class="app-header">
|
|
<el-button text class="collapse-button" :aria-label="collapsed ? '展开菜单' : '收起菜单'" @click="collapsed = !collapsed">
|
|
<el-icon size="20"><Expand v-if="collapsed" /><Fold v-else /></el-icon>
|
|
</el-button>
|
|
<div class="header-title">视频感知管理</div>
|
|
<div class="header-actions">
|
|
<el-tag type="success" effect="plain">服务正常</el-tag>
|
|
<el-dropdown>
|
|
<el-button text>
|
|
<el-icon><User /></el-icon>
|
|
<span class="user-name">当前用户</span>
|
|
<el-icon><ArrowDown /></el-icon>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item disabled>个人信息</el-dropdown-item>
|
|
<el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</el-header>
|
|
|
|
<div class="tab-bar">
|
|
<el-tag closable :disable-transitions="true" type="primary" effect="plain">{{ $route.meta.title || '工作台' }}</el-tag>
|
|
</div>
|
|
<el-main class="app-main"><router-view /></el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { useStore } from 'vuex'
|
|
|
|
const router = useRouter()
|
|
const store = useStore()
|
|
const collapsed = ref(false)
|
|
const navigation = computed(() => {
|
|
const root = router.getRoutes().find((route) => route.path === '/')
|
|
const permissions = store.getters['sense-identity/permissions'] || []
|
|
return (root?.children || [])
|
|
.filter((route) => route.meta?.title && !route.meta?.hidden)
|
|
.filter((route) => !route.meta?.permission || permissions.includes(route.meta.permission))
|
|
.map((route) => ({
|
|
path: route.path ? `/${route.path}`.replace('//', '/') : '/',
|
|
title: route.meta.title,
|
|
icon: route.meta.icon,
|
|
order: route.meta.order || 0
|
|
}))
|
|
.sort((left, right) => left.order - right.order)
|
|
})
|
|
|
|
async function logout() {
|
|
if (store.hasModule('sense-identity')) await store.dispatch('sense-identity/logout')
|
|
else window.sessionStorage.removeItem('sense_session')
|
|
if (router.hasRoute('sense-login')) await router.push({ name: 'sense-login' })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-shell { min-height: 100vh; }
|
|
.app-sidebar { background: var(--sense-sidebar); transition: width .18s ease; }
|
|
.brand { display: flex; height: 56px; align-items: center; gap: 10px; padding: 0 18px; color: #fff; }
|
|
.brand.collapsed { justify-content: center; padding: 0; }
|
|
.brand-mark { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 6px; background: var(--sense-primary); font-weight: 700; }
|
|
.brand-name { font-size: 18px; font-weight: 600; letter-spacing: .4px; }
|
|
.app-sidebar :deep(.el-menu) { border-right: 0; }
|
|
.app-sidebar :deep(.el-menu-item.is-active) { background: var(--sense-primary); }
|
|
.app-header { display: flex; height: 56px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--sense-border); background: #fff; }
|
|
.collapse-button { margin-right: 8px; }
|
|
.header-title { font-size: 16px; font-weight: 500; }
|
|
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
|
|
.user-name { margin: 0 6px; }
|
|
.tab-bar { display: flex; height: 40px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--sense-border); background: #fff; }
|
|
.app-main { padding: 0; background: var(--sense-bg); }
|
|
</style>
|