108 lines
3.9 KiB
Vue
108 lines
3.9 KiB
Vue
<template>
|
|
<el-container class="layout">
|
|
<el-header class="layout-header">
|
|
<div class="main-title">博客API管理后台</div>
|
|
<div class="nav-btns-right">
|
|
<el-dropdown @command="dropdownMenuCommand">
|
|
<el-button type="text">
|
|
<i class="el-icon-user-solid"></i>
|
|
{{ realname }}
|
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="home">返回首页</el-dropdown-item>
|
|
<el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
|
|
<el-dropdown-item command="logout" divided>退出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</el-header>
|
|
<el-container>
|
|
<el-aside width="200px">
|
|
<el-menu :default-active="activeMenuItem" :default-openeds="openMenuNames" style="height: 100%;">
|
|
<el-sub-menu v-for="menu in menus" :key="menu.name" :index="menu.name">
|
|
<template #title>
|
|
<i :class="menu.icon"></i>
|
|
<span>{{menu.title}}</span>
|
|
</template>
|
|
<el-menu-item v-for="(subItem,subIndex) in menu.child" :key="subIndex" :index="subItem.path" @click="openMenu(subItem.path)">
|
|
{{subItem.title}}
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-main class="layout-main">
|
|
<div class="layout-breadcrumb">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item v-for="(item,index) in $store.state.breadcrumb" :key="index">{{item}}</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
</div>
|
|
<div class="layout-content">
|
|
<router-view class="main-view"></router-view>
|
|
</div>
|
|
<div class="layout-copy">2016-{{currentYear}} © colorfulsweet</div>
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from 'vue-class-component'
|
|
import { ElContainer, ElHeader, ElMain, ElAside, ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElMenu, ElSubMenu, ElMenuItem, ElBreadcrumb, ElBreadcrumbItem } from 'element-plus'
|
|
import menus from '../config/menu'
|
|
|
|
@Options({
|
|
name: 'Home',
|
|
components: { ElContainer, ElHeader, ElMain, ElAside, ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElMenu, ElSubMenu, ElMenuItem, ElBreadcrumb, ElBreadcrumbItem }
|
|
})
|
|
export default class Home extends Vue{
|
|
currentYear = new Date().getFullYear()
|
|
// 菜单项
|
|
menus = menus
|
|
activeMenuItem: string | null = null
|
|
openMenuNames: string[] = []
|
|
get realname(): null | string { // 当前用户的显示名称
|
|
return this.$store.state.loginInfo.userInfo
|
|
? this.$store.state.loginInfo.userInfo.realname : null
|
|
}
|
|
async created(): Promise<void> {
|
|
this.activeMenuItem = this.$route.path
|
|
if(this.activeMenuItem) {
|
|
let result = /^\/(.*)\//.exec(this.activeMenuItem)
|
|
if(result) {
|
|
this.openMenuNames.push(result[1])
|
|
}
|
|
}
|
|
if(!this.$store.state.loginInfo.token) {
|
|
this.$router.push('/login')
|
|
return
|
|
}
|
|
const data = await this.$http.post<{token: string}, any>('/api/v1/common/verifyToken', {token: this.$store.state.loginInfo.token})
|
|
if(data.status) {
|
|
// 如果是已过期的token 服务端会签发新的token
|
|
this.$store.commit('login', {token: data.newToken || this.$store.state.loginInfo.token, userInfo: data.userInfo})
|
|
} else {
|
|
this.$router.push('/login')
|
|
}
|
|
}
|
|
dropdownMenuCommand(command: string): void {
|
|
switch(command) {
|
|
case 'home': // 返回首页
|
|
this.$router.push('/')
|
|
break
|
|
case 'changePassword': // 修改密码
|
|
// TODO
|
|
break
|
|
case 'logout': //注销
|
|
this.$store.commit('logout')
|
|
this.$router.push('/login')
|
|
break
|
|
}
|
|
}
|
|
openMenu(path: string): void {
|
|
this.$router.push(path)
|
|
}
|
|
}
|
|
</script> |