no message

components/Header.vue

@@ -0,0 +1,164 @@
+<template>
+	<div id="header-container">
+		<IntegratedLayout>
+			<div class="navigation-container">
+				<div class="logo">
+					<img src="/logo/white-logo.png" />
+					<span>AIProdLaunch</span>
+				</div>
+				<div class="flex">
+					<div class="navigation-item pointer" v-for="item in navRoutes" :key="item.path"
+						@click="handleParentClick(item)" @mouseenter="showSubmenu(item)" @mouseleave="hideSubmenu">
+						<span
+							:class="{ 'selected-navigation': $route.matched.some(record => record.path === item.path) }">{{
+								item.meta.navigationName }}
+								<i class="el-icon-arrow-down" v-if="item.meta.children"></i>
+						</span>
+						<div v-if="activeMenu === item.path && item.meta.children" class="submenu">
+							<div v-for="sub in item.children" :key="sub.path" @click.stop="goto(sub.path)"
+								class="submenu-item pointer">
+								<img :src="`/logo/${sub.meta.icon}.png`" />
+								{{ sub.name }}
+							</div>
+						</div>
+					</div>
+				</div>
+
+			</div>
+		</IntegratedLayout>
+
+	</div>
+</template>
+
+<script>
+import {
+	routes
+} from '../router';
+
+export default {
+	name: "Header",
+
+	computed: {
+		/**
+		 * 得到routes的meta里非hidden的路由
+		 */
+		navRoutes() {
+			const r = routes.filter(e => {
+				if (e.meta) {
+					return !e.meta.hidden
+				}
+				return false
+			})
+			return r
+		},
+
+		/**
+		 * 得到当前的路由path
+		 */
+		currentRoutePath() {
+			return this.$route.path
+		}
+	},
+	data() {
+		return {
+			activeMenu: null
+		}
+	},
+	methods: {
+		handleParentClick(item) {
+			// 只有没有子菜单时才跳转
+			if (!item.children || item.children.length === 0) {
+				this.goto(item.path);
+			}
+		},
+		/**
+		 * 编程式导航
+		 * @param {String} path 导航的路径
+		 */
+		goto(path) {
+			console.log(path)
+			this.$router.push(path)
+		},
+		showSubmenu(item) {
+			if (item.children) {
+				this.activeMenu = item.path;
+			}
+		},
+		hideSubmenu() {
+			this.activeMenu = null;
+		},
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+#header-container {
+	width: 100%;
+	height: $navigationBarHeight;
+	background: $header-backgroungd;
+
+
+	.navigation-container {
+		height: $navigationBarHeight;
+		display: flex;
+		font-weight: 500;
+		align-items: center;
+		justify-content: space-between;
+
+		.logo {
+			@include flex-center;
+			color: $white;
+
+			span {
+				font-size: $normal-font-size;
+			}
+		}
+
+		.navigation-item {
+			margin-left: 20px;
+			padding: 10px;
+			position: relative;
+
+			span {
+				color: $grey;
+
+				&:hover {
+					color: $white;
+				}
+
+				&.selected-navigation {
+					color: $white;
+				}
+			}
+
+			.submenu {
+				z-index: 10;
+				position: absolute;
+				top: 100%;
+				left: 50%;
+				padding: 20px 10px;
+				transform: translateX(-50%);
+				background: $white;
+				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+				border-radius: 6px;
+
+				&-item {
+					white-space: nowrap; // 防止文字换行
+					padding: 10px;
+					color: #000000;
+					@include display-flex;
+
+					img {
+						margin-right: 10px;
+					}
+
+					&:hover {
+						background: #F5F6F9;
+						color: $main-color;
+					}
+				}
+			}
+		}
+	}
+}
+</style>