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