MainLayout.vue
3.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
<a-layout style="min-height: 100vh">
<a-layout-sider v-model:collapsed="collapsed" collapsible>
<div class="logo">{{ collapsed ? '地利' : '地利外卖管理' }}</div>
<a-menu
v-model:selectedKeys="selectedKeys"
theme="dark"
mode="inline"
@click="onMenuClick"
>
<a-menu-item key="/city">
<template #icon><global-outlined /></template>
城市管理
</a-menu-item>
<a-menu-item key="/substation">
<template #icon><apartment-outlined /></template>
分站管理
</a-menu-item>
<a-sub-menu key="merchant">
<template #icon><shop-outlined /></template>
<template #title>商家管理</template>
<a-menu-item key="/merchant/enter">入驻申请</a-menu-item>
<a-menu-item key="/merchant/store">店铺管理</a-menu-item>
</a-sub-menu>
<a-menu-item key="/rider">
<template #icon><user-outlined /></template>
骑手管理
</a-menu-item>
<a-menu-item key="/rider/evaluate">
<template #icon><star-outlined /></template>
骑手评价
</a-menu-item>
<a-sub-menu key="orders">
<template #icon><unordered-list-outlined /></template>
<template #title>订单管理</template>
<a-menu-item key="/order">订单列表</a-menu-item>
<a-menu-item key="/refund">退款管理</a-menu-item>
<a-menu-item key="/delivery/order">配送订单</a-menu-item>
</a-sub-menu>
<a-menu-item key="/open">
<template #icon><api-outlined /></template>
开放平台
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background:#fff;padding:0 16px;display:flex;align-items:center;justify-content:flex-end">
<a-dropdown>
<a-button type="text">管理员 <down-outlined /></a-button>
<template #overlay>
<a-menu>
<a-menu-item @click="handleLogout">退出登录</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-layout-header>
<a-layout-content style="margin:16px">
<router-view />
</a-layout-content>
</a-layout>
</a-layout>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import {
GlobalOutlined, ApartmentOutlined, ShopOutlined,
UserOutlined, UnorderedListOutlined, ApiOutlined, DownOutlined, StarOutlined
} from '@ant-design/icons-vue'
const router = useRouter()
const route = useRoute()
const auth = useAuthStore()
const collapsed = ref(false)
const selectedKeys = ref([route.path])
watch(() => route.path, (p) => { selectedKeys.value = [p] })
function onMenuClick({ key }: { key: string }) {
router.push(key)
}
function handleLogout() {
auth.logout()
router.push('/login')
}
</script>
<style scoped>
.logo {
height: 64px;
color: #fff;
font-size: 16px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
white-space: nowrap;
}
</style>