Files
spa-view/src/layouts/AdminLayout.vue
2025-04-24 16:59:40 +08:00

65 lines
1.5 KiB
Vue

<script setup>
import { ProLayout } from '@ant-design-vue/pro-layout'
import { useRouter } from 'vue-router'
import { computed } from 'vue'
const router = useRouter()
const selectedKeys = computed(() => [router.currentRoute.value.name])
const menuData = [
{
path: '/admin/dashboard',
name: 'Dashboard',
meta: { icon: 'PieChartOutlined', title: '数据看板' }
},
{
path: '/admin/projects',
name: 'ProjectManage',
meta: { icon: 'AppstoreOutlined', title: '项目管理' }
}
]
</script>
<template>
<ProLayout
:menu-data="menuData"
:selected-keys="selectedKeys"
layout="mix"
:content-width="1200"
:header-height="64"
fix-siderbar
:primary-color="'#1890ff'"
>
<template #logo>
<div class="flex items-center text-lg font-bold">
<img src="@/assets/logo-admin.png" class="h-8 mr-2" />
项目管理系统
</div>
</template>
<template #rightContent>
<a-dropdown :trigger="['click']">
<a-space class="cursor-pointer px-4">
<a-avatar :size="32" src="https://via.placeholder.com/32" />
<span class="hidden md:inline">管理员</span>
</a-space>
<template #overlay>
<a-menu>
<a-menu-item key="logout">退出登录</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
<router-view />
</ProLayout>
</template>
<style lang="scss" scoped>
:deep(.ant-pro-sider-menu) {
@apply shadow-lg;
}
:deep(.ant-pro-page-container) {
@apply bg-gray-50;
}
</style>