106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
|
<!-- src/components/Header.vue -->
|
||
|
|
<template>
|
||
|
|
<a-layout-header class="header">
|
||
|
|
<div class="header-content">
|
||
|
|
<div class="logo">
|
||
|
|
<h2>东方低碳</h2>
|
||
|
|
</div>
|
||
|
|
<div class="nav-menu">
|
||
|
|
<a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" @click="handleMenuClick">
|
||
|
|
<a-menu-item v-for="item in menuItems" :key="item.key">
|
||
|
|
{{ item.title }}
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="user-info">
|
||
|
|
<a-dropdown>
|
||
|
|
<a class="ant-dropdown-link" @click.prevent>
|
||
|
|
<UserOutlined />
|
||
|
|
用户中心
|
||
|
|
</a>
|
||
|
|
<template #overlay>
|
||
|
|
<a-menu>
|
||
|
|
<a-menu-item>
|
||
|
|
<router-link to="/profile">个人中心</router-link>
|
||
|
|
</a-menu-item>
|
||
|
|
<a-menu-item @click="handleLogout">
|
||
|
|
退出登录
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</template>
|
||
|
|
</a-dropdown>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
</a-layout-header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import { useRouter, useRoute } from 'vue-router'
|
||
|
|
import { UserOutlined } from '@ant-design/icons-vue'
|
||
|
|
import { useUserStore } from '@/stores/user'
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
const route = useRoute()
|
||
|
|
const userStore = useUserStore()
|
||
|
|
|
||
|
|
const selectedKeys = ref<string[]>([])
|
||
|
|
const menuItems = ref([
|
||
|
|
{ key: 'index', title: '首页', path: '/' },
|
||
|
|
{ key: 'news', title: '新闻消息', path: '/news' },
|
||
|
|
{ key: 'about', title: '关于我们', path: '/about' },
|
||
|
|
{ key: 'profile', title: '个人中心', path: '/profile' }
|
||
|
|
])
|
||
|
|
|
||
|
|
const handleMenuClick = ({ key }: { key: string }) => {
|
||
|
|
const menuItem = menuItems.value.find(item => item.key === key)
|
||
|
|
if (menuItem) {
|
||
|
|
router.push(menuItem.path)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleLogout = () => {
|
||
|
|
userStore.logout()
|
||
|
|
router.push('/login')
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// 根据当前路由设置选中菜单项
|
||
|
|
const currentMenu = menuItems.value.find(item => item.path === route.path)
|
||
|
|
if (currentMenu) {
|
||
|
|
selectedKeys.value = [currentMenu.key]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.header {
|
||
|
|
background: #fff;
|
||
|
|
padding: 0;
|
||
|
|
box-shadow: 0 2px 8px #f0f1f2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header-content {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo h2 {
|
||
|
|
margin: 0;
|
||
|
|
color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-menu {
|
||
|
|
flex: 1;
|
||
|
|
margin: 0 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-info {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|