126 lines
4.2 KiB
Vue
126 lines
4.2 KiB
Vue
<template>
|
||
<el-container class="layout">
|
||
<el-header class="layout-header">
|
||
<div class="main-title">博客管理后台</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="defaultActiveMenuKey" :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-tabs">
|
||
<el-tabs type="card" class="nav-tabs" v-model="store.state.activeTab" @tab-change="openMenu" @tab-remove="removeTab">
|
||
<el-tab-pane label="首页" name="/"></el-tab-pane>
|
||
<el-tab-pane v-for="tab in store.state.tabs" :key="tab.name" :label="tab.title" :name="tab.path" closable></el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<div class="layout-content">
|
||
<router-view class="main-view" v-slot="{ Component }">
|
||
<keep-alive :include="keepViews">
|
||
<component :is="Component" />
|
||
</keep-alive>
|
||
</router-view>
|
||
</div>
|
||
<div class="layout-copy">2016-{{currentYear}} © colorfulsweet 上次更新：{{ version }}</div>
|
||
</el-main>
|
||
</el-container>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
import { useStore } from 'vuex'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import menus from '../config/menu'
|
||
import http from '@/utils/http'
|
||
|
||
const store = useStore()
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
const version = process.env.VERSION
|
||
const currentYear = new Date().getFullYear()
|
||
const defaultActiveMenuKey = ref<string | null>(null)
|
||
const openMenuNames = ref<string[]>([])
|
||
|
||
const realname = computed((): null | string => {
|
||
return store.state.loginInfo.userInfo
|
||
? store.state.loginInfo.userInfo.realname : null
|
||
})
|
||
const keepViews = computed((): string[] => {
|
||
return store.state.tabs
|
||
.filter((item: any) => item.name)
|
||
.map((item: any) => item.name)
|
||
})
|
||
|
||
// created
|
||
defaultActiveMenuKey.value = route.path
|
||
if (defaultActiveMenuKey.value) {
|
||
let result = /^\/(.*)\//.exec(defaultActiveMenuKey.value)
|
||
if (result) {
|
||
openMenuNames.value.push(result[1])
|
||
}
|
||
}
|
||
if (!store.state.loginInfo.token) {
|
||
router.push('/login')
|
||
} else {
|
||
http.post<{token: string}, any>('/api/v2/common/verifyToken', {token: store.state.loginInfo.token}).then(data => {
|
||
if (data.status) {
|
||
store.commit('login', {token: data.newToken || store.state.loginInfo.token, userInfo: data.userInfo})
|
||
} else {
|
||
router.push('/login')
|
||
}
|
||
})
|
||
}
|
||
|
||
function dropdownMenuCommand(command: string): void {
|
||
switch (command) {
|
||
case 'home':
|
||
router.push('/')
|
||
break
|
||
case 'changePassword':
|
||
// TODO
|
||
break
|
||
case 'logout':
|
||
store.commit('logout')
|
||
router.push('/login')
|
||
break
|
||
}
|
||
}
|
||
function openMenu(path: string): void {
|
||
router.push(path)
|
||
}
|
||
function removeTab(path: string): void {
|
||
store.commit('removeTab', path)
|
||
if (store.state.activeTab === path) {
|
||
const { tabs } = store.state
|
||
openMenu(tabs[tabs.length - 1]?.path || '/')
|
||
}
|
||
}
|
||
</script> |