初始化代码

src/views/layout/pc/header/nav.vue

@@ -0,0 +1,91 @@
+<script setup>
+import {ref, onMounted, watch, onUnmounted} from 'vue'
+import {useNavStore} from '@/store/nav'
+import {storeToRefs} from 'pinia'
+
+// Store 相关
+const navStore = useNavStore()
+const {navIndex} = storeToRefs(navStore)
+
+// 响应式数据
+const navList = ref([])
+const activeIndex = ref(null)
+
+// 处理导航选择
+const handleSelect = (key) => {
+  navStore.changeNavIndex(key)
+}
+
+// 监听 store 中的 navIndex 变化
+const stopWatch = watch(
+  navIndex,
+  (newValue) => {
+    activeIndex.value = newValue
+  },
+  {
+    immediate: true,
+  }
+)
+
+// 生命周期
+onMounted(() => {
+  navList.value = window.nav.header || []
+})
+
+onUnmounted(() => {
+  stopWatch()
+})
+</script>
+
+<template>
+  <div class="page">
+    <el-menu
+      :default-active="activeIndex"
+      class="el-menu-demo"
+      mode="horizontal"
+      @select="handleSelect"
+      active-text-color="#FFFFFF"
+      text-color="#999999"
+      background-color="$bg_color"
+      router
+    >
+      <el-menu-item
+        v-for="item in navList"
+        :key="item.id"
+        :index="item.url"
+        :class="{'is-active': activeIndex === item.url}"
+      >
+        {{ item.label }}
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 菜单容器样式 */
+.el-menu--horizontal {
+  --el-menu-horizontal-height: 101px;
+}
+
+/* 菜单项基础样式 */
+.el-menu-item {
+  font-family: 'PingFang SC';
+  padding: 0 25px;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0.06em;
+  border-bottom: none !important;
+  transition: border-bottom 0.3s ease;
+
+  /* 激活状态样式 */
+  &.is-active {
+    border-bottom: 6px solid #ffffff !important;
+  }
+
+  /* 悬停效果 */
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1) !important;
+  }
+}
+</style>