91 lines
3.0 KiB
Vue
91 lines
3.0 KiB
Vue
|
<!--
|
|||
|
|
=============================================================================
|
|||
|
|
企微IT智能服务台 — 管理后台主布局
|
|||
|
|
=============================================================================
|
|||
|
|
说明：管理后台主布局组件
|
|||
|
|
左侧：深色侧边栏（Sidebar 组件）
|
|||
|
|
右侧：顶部栏（面包屑 + 用户信息）+ 内容区（router-view）
|
|||
|
|
-->
|
|||
|
|
<template>
|
|||
|
|
<div class="admin-layout">
|
|||
|
|
<!-- 左侧侧边栏 -->
|
|||
|
|
<Sidebar />
|
|||
|
|
|
|||
|
|
<!-- 右侧主内容区 -->
|
|||
|
|
<div class="main-content">
|
|||
|
|
<!-- 顶部栏 -->
|
|||
|
|
<div class="top-bar">
|
|||
|
|
<div class="top-bar-left">
|
|||
|
|
<Breadcrumb />
|
|||
|
|
</div>
|
|||
|
|
<div class="top-bar-right">
|
|||
|
|
<!-- 全局搜索 -->
|
|||
|
|
<SearchBox />
|
|||
|
|
|
|||
|
|
<!-- 通知图标 -->
|
|||
|
|
<el-icon :size="18" style="color: var(--text-secondary); cursor: pointer">
|
|||
|
|
<Bell />
|
|||
|
|
</el-icon>
|
|||
|
|
|
|||
|
|
<!-- 管理员头像 -->
|
|||
|
|
<el-dropdown trigger="click" @command="handleUserCommand">
|
|||
|
|
<div class="user-avatar" style="cursor: pointer">
|
|||
|
|
{{ adminStore.adminName.charAt(0) || '管' }}
|
|||
|
|
</div>
|
|||
|
|
<template #dropdown>
|
|||
|
|
<el-dropdown-menu>
|
|||
|
|
<el-dropdown-item command="profile">
|
|||
|
|
<el-icon><User /></el-icon>
|
|||
|
|
{{ adminStore.adminName || '管理员' }}
|
|||
|
|
</el-dropdown-item>
|
|||
|
|
<el-dropdown-item command="logout" divided>
|
|||
|
|
<el-icon><SwitchButton /></el-icon>
|
|||
|
|
退出登录
|
|||
|
|
</el-dropdown-item>
|
|||
|
|
</el-dropdown-menu>
|
|||
|
|
</template>
|
|||
|
|
</el-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容区 -->
|
|||
|
|
<div class="content-scroll">
|
|||
|
|
<router-view />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 组件导入
|
|||
|
|
// ==========================================================================
|
|||
|
|
import Sidebar from '@/components/Sidebar.vue'
|
|||
|
|
import Breadcrumb from '@/components/Breadcrumb.vue'
|
|||
|
|
import SearchBox from '@/components/SearchBox.vue'
|
|||
|
|
import { useAdminStore } from '@/stores/admin'
|
|||
|
|
import { ElMessageBox } from 'element-plus'
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// Store
|
|||
|
|
// ==========================================================================
|
|||
|
|
const adminStore = useAdminStore()
|
|||
|
|
|
|||
|
|
// ==========================================================================
|
|||
|
|
// 用户下拉菜单命令处理
|
|||
|
|
// ==========================================================================
|
|||
|
|
function handleUserCommand(command: string): void {
|
|||
|
|
if (command === 'logout') {
|
|||
|
|
ElMessageBox.confirm('确定要退出管理后台吗？', '退出确认', {
|
|||
|
|
confirmButtonText: '确定',
|
|||
|
|
cancelButtonText: '取消',
|
|||
|
|
type: 'warning',
|
|||
|
|
}).then(() => {
|
|||
|
|
adminStore.logout()
|
|||
|
|
}).catch(() => {
|
|||
|
|
// 取消退出
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|