You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

226 lines
5.4 KiB

<template>
<Simplebar>
<div id="container">
<div class="leftSidebar" :style="{ width: state.menuWidth }">
<a-flex justify="center" align="center" style="height: 48px;">
<component :is=iconComponents.TitleOutLined :class="collapsed ? 'small' : 'large'" />
<span v-if="!collapsed">{{ state.name }}</span>
</a-flex>
<a-menu v-model:selectedKeys="state.selectedKeys" mode="inline" theme="light"
:inline-collapsed="state.collapsed" :items="items" style="border-inline-end: none;" @click="menuItemclick">
</a-menu>
</div>
<div class="contentArea">
<div>
<a-flex>
<a-space>
<a-button @click="toggleCollapsed">
<MenuUnfoldOutlined v-if="state.collapsed" />
<MenuFoldOutlined v-else />
</a-button>
<a-button type="text" @click="jumpdashboard">首页</a-button>
</a-space>
</a-flex>
<a-flex align="center" gap="middle">
<span>{{ username }}</span>
<div>
<a-button type="primary" @click="showModal" danger>
<LogoutOutlined />
</a-button>
<a-modal v-model:open="open" title="提示" @ok="handleOk" @cancel="handleCancel" ok-text="确认"
cancel-text="取消">
<p>确定要注销吗</p>
</a-modal>
</div>
</a-flex>
</div>
<RouterView />
</div>
</div>
</Simplebar>
</template>
<script setup lang='ts'>
import { computed, ref, onMounted, h, reactive, watch } from 'vue';
import iconComponents from "@/assets/index"
import { RouterView, useRouter, useRoute } from 'vue-router'
import { MenuFoldOutlined, MenuUnfoldOutlined, LogoutOutlined, DashboardOutlined } from '@ant-design/icons-vue';
import { get } from "@/tools/request"
import { message } from 'ant-design-vue';
import { useAuthStore } from '@/stores/index'
const router = useRouter()
const state = reactive({
collapsed: false,
selectedKeys: ['1'],
name: '博客后台系统',
menuWidth: '10%'
});
const items = reactive([
{
key: 'dashboard',
icon: () => h(DashboardOutlined),
label: "仪表盘",
title: '仪表盘',
},
{
key: 'blogmanage',
icon: () => h(iconComponents.BlogOutLined),
label: '博客管理',
title: '博客管理',
children: [
{
key: 'blogmanage',
label: '博客管理',
title: '博客管理',
},
{
key: 'blogtype',
label: '博客分类',
title: '博客分类',
},
{
key: 'bloglabel',
icon: () => h(iconComponents.TypeOutLined),
label: '博客标签',
title: '博客标签',
}
],
},
{
key: 'diarymanage',
icon: () => h(iconComponents.DiaryOutLined),
label: '日记管理',
title: '日记管理',
children: [
{
key: 'diarymanage',
label: '日记管理',
title: '日记管理',
},
{
key: 'diarytype',
label: '日记分类',
title: '日记分类',
}
],
},
{
key: 'classticmanage',
icon: () => h(iconComponents.DiaryOutLined),
label: '语录管理',
title: '语录管理',
},
{
key: 'commonlinkmanage',
icon: () => h(iconComponents.DiaryOutLined),
label: '链接管理',
title: '链接管理',
},
{
key: 'commentmanage',
icon: () => h(iconComponents.CommentOutLined),
label: '评论管理',
title: '评论管理',
},
{
key: 'imagemanage',
icon: () => h(iconComponents.PhotoOutLined),
label: '相册管理',
title: '相册管理',
},
{
key: 'filemanage',
icon: () => h(iconComponents.FileOutLined),
label: '文件管理',
title: '文件管理',
},
{
key: 'systemmanage',
icon: () => h(iconComponents.SystemOutLined),
label: '系统设置',
title: '系统设置',
},
]);
const menuItemclick = ({ key }: { key: any }) => {
router.push(key)
}
const collapsed = computed(() => state.collapsed);
const authStore = useAuthStore()
const username = ref("")
const toggleCollapsed = () => {
state.collapsed = !state.collapsed;
state.menuWidth = state.collapsed ? 'auto' : '10%'
};
const jumpdashboard = function () {
state.selectedKeys = ['1']
router.push('/admin/dashboard')
}
onMounted(async () => {
const userinfo = await get(
'/users/me',
{
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
}
)
username.value = userinfo.data.username
});
const open = ref<boolean>(false);
const showModal = () => {
open.value = true;
};
const handleOk = (e: MouseEvent) => {
console.log(e);
authStore.removeToken()
message.loading("注销成功")
setTimeout(() => {
router.push('/login')
}, 2000);
open.value = false;
};
const handleCancel = (e: MouseEvent) => {
message.warn('取消注销');
}
</script>
<style scoped>
#container {
display: flex;
}
.leftSidebar {
border-right: 1px solid rgba(5, 5, 5, 0.06);
font-size: 20px;
}
.leftSidebar>* {
margin: 12px 0;
}
.leftSidebar>:first-child {
font-size: 20px;
}
.contentArea {
flex: 1;
}
.contentArea>:first-child {
margin: 24px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.small {
font-size: 30px;
margin: 0 5px 0 5px;
}
.large {
font-size: 50px;
margin: 0 10px 0 10px;
}
</style>