73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
<script setup>
|
|
import { useAuthStore } from '@/stores/auth';
|
|
import Button from 'primevue/button';
|
|
import Menubar from 'primevue/menubar';
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const router = useRouter();
|
|
const authStore = useAuthStore();
|
|
const navItems = ref([
|
|
{
|
|
label: '仪表盘',
|
|
icon: 'pi pi-home',
|
|
command: () => router.push('/')
|
|
},
|
|
{
|
|
label: '媒体',
|
|
icon: 'pi pi-image',
|
|
command: () => router.push('/medias')
|
|
},
|
|
{
|
|
label: '文章',
|
|
icon: 'pi pi-file',
|
|
command: () => router.push('/posts')
|
|
},
|
|
{
|
|
label: '用户',
|
|
icon: 'pi pi-users',
|
|
command: () => router.push('/users')
|
|
},
|
|
{
|
|
label: '订单',
|
|
icon: 'pi pi-shopping-cart',
|
|
command: () => router.push('/orders')
|
|
},
|
|
{
|
|
label: '设置',
|
|
icon: 'pi pi-cog',
|
|
command: () => router.push('/settings')
|
|
}
|
|
]);
|
|
|
|
const handleLogout = () => {
|
|
authStore.logout();
|
|
router.push('/login');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="!authStore.isAuthenticated">
|
|
<router-view />
|
|
</div>
|
|
|
|
<div v-else class="flex flex-col min-h-screen">
|
|
<header class="sticky top-0 z-50 shadow-md">
|
|
<Menubar :model="navItems" class="!rounded-none">
|
|
<template #start>
|
|
<div class="flex items-center pr-4">
|
|
<h2 class="m-0 text-2xl text-primary font-semibold">Panel</h2>
|
|
</div>
|
|
</template>
|
|
<template #end>
|
|
<Button label="Logout" icon="pi pi-power-off" severity="secondary" text @click="handleLogout" />
|
|
</template>
|
|
</Menubar>
|
|
</header>
|
|
|
|
<main class="flex-1 p-6 bg-surface-ground">
|
|
<router-view />
|
|
</main>
|
|
</div>
|
|
</template>
|