<template>
|
<el-container class="layout">
|
<el-aside width="248px" class="side-wrap">
|
<div class="brand-block">
|
<div class="brand-icon"></div>
|
<div class="brand-name">运维运营管理平台</div>
|
</div>
|
<el-menu
|
:default-active="active"
|
:default-openeds="defaultOpeneds"
|
router
|
class="side-menu"
|
background-color="#2f63d4"
|
text-color="#dce8ff"
|
active-text-color="#2f63d4"
|
>
|
<el-menu-item v-if="auth.hasPermission('dashboard:page')" index="/dashboard" class="home-item">
|
<el-icon><House /></el-icon>
|
<span>首页</span>
|
</el-menu-item>
|
|
<el-sub-menu
|
v-if="
|
auth.hasAnyPermission([
|
'config:approval-settings:page',
|
'config:booking-settings:page',
|
'config:visit-reasons:page',
|
'config:content-settings:page',
|
])
|
"
|
index="system"
|
>
|
<template #title>
|
<el-icon><Setting /></el-icon>
|
<span>系统</span>
|
</template>
|
<el-menu-item v-if="auth.hasPermission('config:approval-settings:page')" index="/system/approval-settings">审核配置</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('config:booking-settings:page')" index="/system/booking-settings">预约管理</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('config:visit-reasons:page')" index="/system/visit-reasons">来访事由配置</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('config:content-settings:page')" index="/system/content-settings">内容设置</el-menu-item>
|
</el-sub-menu>
|
|
<el-sub-menu
|
v-if="auth.hasAnyPermission(['sys:depts:page', 'sys:staff:page', 'sys:staff-groups:page'])"
|
index="staff"
|
>
|
<template #title>
|
<el-icon><User /></el-icon>
|
<span>员工管理</span>
|
</template>
|
<el-menu-item v-if="auth.hasPermission('sys:depts:page')" index="/staff/depts">部门</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('sys:staff:page')" index="/staff/employees">员工管理</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('sys:staff-groups:page')" index="/staff/groups">人员分组</el-menu-item>
|
</el-sub-menu>
|
|
<el-sub-menu
|
v-if="auth.hasAnyPermission(['sys:pass-areas:page', 'sys:local-units:page'])"
|
index="region"
|
>
|
<template #title>
|
<el-icon><Grid /></el-icon>
|
<span>区域</span>
|
</template>
|
<el-menu-item v-if="auth.hasPermission('sys:pass-areas:page')" index="/region/pass-areas">通行区域管理</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('sys:local-units:page')" index="/region/local-units">属地单位管理</el-menu-item>
|
</el-sub-menu>
|
|
<el-menu-item v-if="auth.hasPermission('sys:visitor-users:page')" index="/visitor-info" class="group-link">
|
<el-icon><UserFilled /></el-icon>
|
<span>访客信息</span>
|
</el-menu-item>
|
|
<el-sub-menu
|
v-if="auth.hasAnyPermission(['appointments:page', 'approvals:page', 'exports:page'])"
|
index="logs"
|
>
|
<template #title>
|
<el-icon><Document /></el-icon>
|
<span>记录与日志</span>
|
</template>
|
<el-menu-item v-if="auth.hasPermission('appointments:page')" index="/appointments">预约记录</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('approvals:page')" index="/approvals">待办日志</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('exports:page')" index="/exports">导出任务</el-menu-item>
|
</el-sub-menu>
|
|
<el-sub-menu
|
v-if="auth.hasAnyPermission(['sys:users:page', 'sys:roles:page'])"
|
index="account"
|
>
|
<template #title>
|
<el-icon><Wallet /></el-icon>
|
<span>账号管理</span>
|
</template>
|
<el-menu-item v-if="auth.hasPermission('sys:users:page')" index="/users">平台管理员</el-menu-item>
|
<el-menu-item v-if="auth.hasPermission('sys:roles:page')" index="/roles">角色</el-menu-item>
|
</el-sub-menu>
|
</el-menu>
|
</el-aside>
|
<el-container class="main-shell">
|
<div class="top-wrap">
|
<el-header class="header">
|
<div class="header-left">
|
<div class="header-title">
|
<span class="header-dot"></span>
|
<span>运维运营管理平台</span>
|
</div>
|
</div>
|
<div class="header-right">
|
<el-button class="menu-trigger" text>
|
<el-icon><Operation /></el-icon>
|
</el-button>
|
<div class="user-box">
|
<el-avatar v-if="auth.avatarUrl" :size="28" :src="auth.avatarUrl" class="hdr-av" />
|
<el-avatar v-else :size="28" class="hdr-av">{{ nameInitial }}</el-avatar>
|
<span class="user-name">{{ auth.displayName }}</span>
|
</div>
|
<el-button type="primary" link @click="logout">退出</el-button>
|
</div>
|
</el-header>
|
|
<div class="tabs-bar">
|
<div
|
v-for="tab in tabs"
|
:key="tab.path"
|
class="route-tab"
|
:class="{ active: tab.path === active }"
|
@click="goTab(tab.path)"
|
>
|
<el-icon class="tab-home" v-if="tab.path === '/dashboard'"><House /></el-icon>
|
<span>{{ tab.title }}</span>
|
<button
|
v-if="tab.closable"
|
type="button"
|
class="tab-close"
|
@click.stop="closeTab(tab.path)"
|
>
|
x
|
</button>
|
</div>
|
</div>
|
</div>
|
|
<el-main class="main-area">
|
<router-view />
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, ref, watch } from "vue";
|
import { useRoute, useRouter } from "vue-router";
|
import { Document, Grid, House, Operation, Setting, User, UserFilled, Wallet } from "@element-plus/icons-vue";
|
import { useAuthStore } from "../stores/auth";
|
import http from "../api/http";
|
|
type LayoutTab = {
|
path: string;
|
title: string;
|
closable: boolean;
|
};
|
|
const route = useRoute();
|
const router = useRouter();
|
const auth = useAuthStore();
|
const active = computed(() => route.path);
|
const defaultOpeneds: string[] = [];
|
const tabs = ref<LayoutTab[]>([{ path: "/dashboard", title: "首页", closable: false }]);
|
const routeTitleMap: Record<string, string> = {
|
"/dashboard": "首页",
|
"/appointments": "预约记录",
|
"/approvals": "待办日志",
|
"/system/approval-settings": "审核配置",
|
"/system/booking-settings": "预约配置",
|
"/system/visit-reasons": "来访事由配置",
|
"/system/content-settings": "内容设置",
|
"/staff/depts": "部门管理",
|
"/staff/employees": "员工管理",
|
"/staff/groups": "人员分组",
|
"/visitor-info": "访客信息",
|
"/users": "平台管理员",
|
"/roles": "角色",
|
"/region/pass-areas": "通行区域管理",
|
"/region/local-units": "属地单位管理",
|
};
|
const nameInitial = computed(() => {
|
const n = auth.displayName;
|
return n && n.length ? n.slice(0, 1) : "?";
|
});
|
|
function resolveRouteTitle() {
|
if (typeof route.meta.title === "string" && route.meta.title) {
|
return route.meta.title;
|
}
|
if (routeTitleMap[route.path]) {
|
return routeTitleMap[route.path];
|
}
|
return "页面";
|
}
|
|
function ensureTab() {
|
const path = route.path;
|
const title = resolveRouteTitle();
|
const idx = tabs.value.findIndex((item) => item.path === path);
|
if (idx >= 0) {
|
tabs.value[idx] = { ...tabs.value[idx], title };
|
return;
|
}
|
tabs.value.push({
|
path,
|
title,
|
closable: path !== "/dashboard",
|
});
|
}
|
|
function goTab(path: string) {
|
if (path !== route.path) {
|
router.push(path);
|
}
|
}
|
|
function closeTab(path: string) {
|
const idx = tabs.value.findIndex((item) => item.path === path);
|
if (idx < 0) {
|
return;
|
}
|
const isCurrent = route.path === path;
|
tabs.value.splice(idx, 1);
|
if (!isCurrent) {
|
return;
|
}
|
const fallback = tabs.value[idx] || tabs.value[idx - 1] || tabs.value[0];
|
router.push(fallback?.path || "/dashboard");
|
}
|
|
watch(
|
() => route.path,
|
() => {
|
ensureTab();
|
},
|
{ immediate: true }
|
);
|
|
async function logout() {
|
try {
|
await http.post("/auth/logout");
|
} catch {
|
/* ignore */
|
}
|
auth.clear();
|
router.push("/login");
|
}
|
</script>
|
|
<style scoped>
|
.layout {
|
height: 100%;
|
}
|
|
.main-shell {
|
display: flex;
|
flex-direction: column;
|
min-width: 0;
|
}
|
|
.side-wrap {
|
background: linear-gradient(180deg, #2f63d4 0%, #2d5fce 100%);
|
color: #fff;
|
padding: 0 10px 12px;
|
box-sizing: border-box;
|
}
|
|
.brand-block {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
height: 44px;
|
margin: 0 -10px 10px;
|
padding: 0 16px;
|
background: rgba(18, 55, 138, 0.28);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
}
|
|
.brand-icon {
|
width: 18px;
|
height: 18px;
|
border-radius: 50%;
|
background: rgba(255, 255, 255, 0.4);
|
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
|
}
|
|
.brand-name {
|
font-size: 16px;
|
font-weight: 600;
|
}
|
|
.side-menu {
|
border-right: 0;
|
background: transparent;
|
}
|
|
.side-menu :deep(.el-menu) {
|
border-right: 0;
|
background: transparent;
|
}
|
|
.side-menu :deep(.el-sub-menu__title),
|
.side-menu :deep(.el-menu-item) {
|
height: 42px;
|
line-height: 42px;
|
border-radius: 8px;
|
margin: 4px 8px;
|
}
|
|
.side-menu :deep(.el-sub-menu__title:hover),
|
.side-menu :deep(.el-menu-item:hover) {
|
background: rgba(255, 255, 255, 0.08) !important;
|
}
|
|
.side-menu :deep(.el-menu-item.is-active) {
|
background: #ffffff !important;
|
color: #2f63d4 !important;
|
}
|
|
.side-menu :deep(.el-sub-menu .el-menu-item) {
|
min-width: 0;
|
padding-left: 48px !important;
|
font-size: 13px;
|
}
|
|
.side-menu :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
|
color: #ffffff !important;
|
}
|
|
.home-item {
|
margin-bottom: 8px !important;
|
font-weight: 600;
|
}
|
|
.group-link {
|
color: #dce8ff !important;
|
}
|
|
.top-wrap {
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
background: #eef3ff;
|
border-bottom: 1px solid #dbe5fb;
|
}
|
|
.hdr-av {
|
flex-shrink: 0;
|
}
|
|
.header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 44px;
|
width: 100%;
|
padding: 0 12px 0 14px;
|
background: #ffffff;
|
border-bottom: 1px solid #e7edf8;
|
box-sizing: border-box;
|
}
|
|
.header-left,
|
.header-right,
|
.user-box,
|
.header-title {
|
display: flex;
|
align-items: center;
|
}
|
|
.header-title {
|
gap: 10px;
|
color: #3d5d9e;
|
font-size: 14px;
|
font-weight: 600;
|
}
|
|
.header-dot {
|
width: 18px;
|
height: 18px;
|
border-radius: 50%;
|
background: linear-gradient(135deg, #7ca9ff, #4f7dff);
|
}
|
|
.header-right {
|
gap: 10px;
|
}
|
|
.menu-trigger {
|
color: #5e6f95;
|
}
|
|
.user-box {
|
gap: 8px;
|
}
|
|
.user-name {
|
color: #47587c;
|
font-size: 13px;
|
}
|
|
.tabs-bar {
|
display: flex;
|
align-items: center;
|
gap: 6px;
|
width: 100%;
|
min-height: 36px;
|
padding: 0 10px;
|
background: #edf3ff;
|
box-sizing: border-box;
|
overflow-x: auto;
|
overflow-y: hidden;
|
}
|
|
.route-tab {
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
flex: 0 0 auto;
|
height: 28px;
|
padding: 0 12px;
|
border-radius: 6px 6px 0 0;
|
color: #7b8cae;
|
font-size: 13px;
|
cursor: pointer;
|
user-select: none;
|
border: 1px solid transparent;
|
border-bottom: 0;
|
}
|
|
.route-tab.active {
|
background: #ffffff;
|
color: #4f74d8;
|
border-color: #d8e3fb;
|
}
|
|
.tab-home {
|
font-size: 12px;
|
}
|
|
.tab-close {
|
border: 0;
|
padding: 0;
|
background: transparent;
|
color: inherit;
|
font-size: 12px;
|
cursor: pointer;
|
}
|
|
.main-area {
|
background: linear-gradient(180deg, #f3f7ff 0%, #eef3fd 100%);
|
padding: 14px;
|
}
|
|
.side-menu :deep(.el-icon) {
|
margin-right: 8px;
|
}
|
</style>
|
