Simon
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>
|