132 lines
3.0 KiB
Vue
132 lines
3.0 KiB
Vue
<template>
|
||
<div class="header-container navbar">
|
||
<div class="text">青岛机场无人驾驶协同云平台</div>
|
||
<div class="tabs-container">
|
||
<div
|
||
v-for="tab in tabs"
|
||
:key="tab.id"
|
||
:class="['tab-item', { active: isActive(tab.path) }]"
|
||
@click="handleTabClick(tab.path)"
|
||
>
|
||
{{ tab.name }}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<img src="../../assets/images/close.png" alt="close" class="close-icon" />
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import useAppStore from '@/store/modules/app';
|
||
import usePermissionStore from '@/store/modules/permission';
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const appStore = useAppStore();
|
||
const permissionStore = usePermissionStore();
|
||
|
||
// 定义Tab选项
|
||
const tabs = [
|
||
{ id: "platform", name: "平台概览", path: "/platform" },
|
||
{ id: "car", name: "车辆管理", path: "/car" },
|
||
{ id: "system", name: "系统管理", path: "/system" },
|
||
];
|
||
|
||
// 判断路由是否激活
|
||
function isActive(path) {
|
||
return route.path.startsWith(path);
|
||
}
|
||
|
||
// 处理Tab点击，使用路由导航
|
||
function handleTabClick(path) {
|
||
if (path === '/platform') {
|
||
// 平台概览页面，隐藏左侧菜单
|
||
appStore.toggleSideBarHide(true);
|
||
permissionStore.setCurrentTab('platform');
|
||
router.push(path);
|
||
} else if (path === '/car') {
|
||
// 车辆管理页面，显示左侧菜单
|
||
appStore.toggleSideBarHide(false);
|
||
|
||
// 设置当前Tab为car，过滤显示车辆相关菜单
|
||
permissionStore.setCurrentTab('car');
|
||
|
||
// 直接跳转到车辆监控页面
|
||
router.push('/car/monitor');
|
||
} else if (path === '/system') {
|
||
// 系统管理页面，显示左侧菜单
|
||
appStore.toggleSideBarHide(false);
|
||
|
||
// 设置当前Tab为system，过滤显示系统相关菜单
|
||
permissionStore.setCurrentTab('system');
|
||
|
||
// 角色管理页面应该是 /system/role
|
||
router.push('/system/role');
|
||
} else {
|
||
router.push(path);
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.header-container {
|
||
width: 100%;
|
||
padding: 0 30px;
|
||
height: 65px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #4C4F5F;
|
||
background: url("../../assets/images/title.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.text {
|
||
font-weight: bold;
|
||
font-size: 26px;
|
||
flex: 1;
|
||
}
|
||
|
||
.tabs-container {
|
||
display: flex;
|
||
width: 65%;
|
||
height: 100%;
|
||
align-items: center;
|
||
// flex: 2;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.tab-item {
|
||
padding: 0 20px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
margin: 0 10px;
|
||
transition: all 0.3s;
|
||
border-radius: 4px;
|
||
|
||
// &:hover {
|
||
// background-color: rgba(255, 255, 255, 0.1);
|
||
// }
|
||
|
||
&.active {
|
||
// background-color: rgba(255, 255, 255, 0.2);
|
||
background: url("../../assets/images/tabs.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.close-icon {
|
||
width: 32px;
|
||
height: 32px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|