109 lines
4.1 KiB
Vue
109 lines
4.1 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 link type="primary">
|
||
<UserFilled style="width: 18px" />
|
||
{{ realname }}
|
||
<ArrowDown style="width: 18px"/>
|
||
</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>
|
||
<component :is="menu.icon" style="width: 18px; margin-right: 5px;"></component>
|
||
<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 上次更新：{{ version }}</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{
|
||
public version?: string = process.env.VERSION
|
||
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> |