feat: 新增主布局(顶部菜单+多标签页)
halo
parent
cd663a1951
commit
76db7bb8d7
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<a-layout class="main-layout">
|
||||
<a-layout-header class="main-header">
|
||||
<div class="logo">凡荣e链</div>
|
||||
<a-menu
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
:selected-keys="selectedKeys"
|
||||
class="main-menu"
|
||||
>
|
||||
<template v-for="node in menuTree" :key="node.id">
|
||||
<a-sub-menu v-if="node.children && node.children.length" :key="node.id">
|
||||
<template #title>{{ node.name }}</template>
|
||||
<a-menu-item v-for="child in node.children" :key="child.path" @click="onMenuClick(child)">
|
||||
{{ child.name }}
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="node.path" @click="onMenuClick(node)">
|
||||
{{ node.name }}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-menu>
|
||||
<div class="user-area">
|
||||
<a-dropdown>
|
||||
<span class="user-trigger">
|
||||
<UserOutlined />
|
||||
{{ authStore.userInfo?.realName || authStore.userInfo?.username || '用户' }}
|
||||
</span>
|
||||
<template #overlay>
|
||||
<a-menu @click="onUserMenuClick">
|
||||
<a-menu-item key="logout">退出登录</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
|
||||
<div class="tabs-bar">
|
||||
<a-tabs
|
||||
v-model:activeKey="tabsStore.activeKey"
|
||||
type="editable-card"
|
||||
hide-add
|
||||
size="small"
|
||||
@tabClick="onTabClick"
|
||||
@edit="onTabEdit"
|
||||
>
|
||||
<a-tab-pane v-for="tab in tabsStore.tabs" :key="tab.key" :tab="tab.title" :closable="tabsStore.tabs.length > 1" />
|
||||
</a-tabs>
|
||||
</div>
|
||||
|
||||
<a-layout-content class="main-content">
|
||||
<router-view />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { UserOutlined } from '@ant-design/icons-vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useTabsStore } from '@/stores/tabs'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const tabsStore = useTabsStore()
|
||||
|
||||
const menuTree = computed(() => authStore.menuTree)
|
||||
const selectedKeys = computed(() => [route.path])
|
||||
|
||||
function onMenuClick(node) {
|
||||
if (node.path) router.push(node.path)
|
||||
}
|
||||
|
||||
function onUserMenuClick({ key }) {
|
||||
if (key === 'logout') {
|
||||
authStore.logout().finally(() => {
|
||||
tabsStore.reset()
|
||||
router.push('/login')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function onTabClick(key) {
|
||||
const tab = tabsStore.tabs.find((t) => t.key === key)
|
||||
if (tab) router.push(tab.path)
|
||||
}
|
||||
|
||||
function onTabEdit(targetKey, action) {
|
||||
if (action === 'remove') {
|
||||
tabsStore.closeTab(targetKey, router, route.path)
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
() => {
|
||||
if (route.meta?.title) tabsStore.openTab(route)
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-layout {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.main-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.logo {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-right: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.main-menu {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.user-area {
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-trigger {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.tabs-bar {
|
||||
background: #fff;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
.main-content {
|
||||
margin: 16px;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
min-height: calc(100vh - 160px);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useTabsStore = defineStore('tabs', {
|
||||
state: () => ({
|
||||
tabs: [],
|
||||
activeKey: ''
|
||||
}),
|
||||
actions: {
|
||||
openTab(route) {
|
||||
const key = route.path
|
||||
if (!this.tabs.some((t) => t.key === key)) {
|
||||
this.tabs.push({
|
||||
key,
|
||||
title: route.meta?.title || key,
|
||||
path: route.fullPath
|
||||
})
|
||||
}
|
||||
this.activeKey = key
|
||||
},
|
||||
closeTab(key, router, currentPath) {
|
||||
const index = this.tabs.findIndex((t) => t.key === key)
|
||||
if (index === -1) return
|
||||
this.tabs.splice(index, 1)
|
||||
if (key === currentPath) {
|
||||
const next = this.tabs[index] || this.tabs[index - 1]
|
||||
if (next) {
|
||||
this.activeKey = next.key
|
||||
router.push(next.path)
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.tabs = []
|
||||
this.activeKey = ''
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue