核心内容摘要
重构英雄联盟竞技体验：League Akari智能决策辅助平台
template div classm-nav-wrap div classm-nav div classm-logo/div !-- 移动端汉堡菜单按钮 -- div v-ifisMobile classm-hamburger clickdrawerVisible true span/span span/span span/span /div !-- 桌面端横向菜单 -- el-menu v-if!isMobile :default-activeactiveIndex classm-nav-menu modehorizontal background-color#001A33 text-color#fff active-text-color#3489EB selecthandleSelect template v-formenu in menuConfig :keymenu.index !-- 特殊按钮样式联系我们 -- div v-ifmenu.isSpecialButton classm-special-button-wrapper div classm-contact-button :class{ is-active: activeIndex menu.index } clickhandleSelect(menu.index, [menu.index]) /div /div !-- 一级菜单无子菜单 -- el-menu-item v-else-if!menu.children :indexmenu.index /el-menu-item !-- 一级菜单有子菜单 -- el-sub-menu v-else :indexmenu.index click.nativehandleSelectMenu(menu.index) template #title/template !-- 二级菜单 -- template v-forchild in menu.children :keychild.index !-- 二级菜单项无子菜单 -- el-menu-item v-if!child.children :indexchild.index /el-menu-item !-- 二级菜单有子菜单 -- el-sub-menu v-else :indexchild.index template #title/template el-menu-item v-forgrandChild in child.children :keygrandChild.index :indexgrandChild.index /el-menu-item /el-sub-menu /template /el-sub-menu /template /el-menu /div !-- 移动端侧边抽屉菜单 -- el-drawer v-modeldrawerVisible directionltr :size280 classm-mobile-drawer el-menu :default-activeactiveIndex classm-mobile-menu modevertical background-color#001A33 text-color#fff active-text-color#3489EB :routertrue selecthandleMobileSelect template v-formenu in menuConfig :keymenu.index !-- 一级菜单无子菜单 -- el-menu-item v-if!menu.children :indexmenu.index /el-menu-item !-- 一级菜单有子菜单 -- el-sub-menu v-else :indexmenu.index click.nativehandleSelectMenu(menu.index) template #title/template !-- 二级菜单 -- template v-forchild in menu.children :keychild.index !-- 二级菜单项无子菜单 -- el-menu-item v-if!child.children :indexchild.index /el-menu-item !-- 二级菜单有子菜单 -- el-sub-menu v-else :indexchild.index template #title/template el-menu-item v-forgrandChild in child.children :keygrandChild.index :indexgrandChild.index /el-menu-item /el-sub-menu /template /el-sub-menu /template /el-menu /el-drawer /div /template script langts setup import { ref, onMounted, watch } from vue import { useRouter, useRoute } from vue-router import { menuConfig, setDocumentTitle } from ./menu-config import { useResponsive } from ./use-responsive const router useRouter() const route useRoute() const activeIndex ref(/) const drawerVisible ref(false) // 响应式检测 const { isMobile } useResponsive() // 桌面端菜单选择 const handleSelect (key: string, keyPath: string[]) { console.log(Selected:, key, keyPath) // 更新激活状态 activeIndex.value key // 设置页面标题 setDocumentTitle(key) // 路由跳转仅当 index 是有效路径时 if (key.startsWith(/)) { router.push({ path: key }) } } // 移动端菜单选择 const handleMobileSelect (key: string, keyPath: string[]) { handleSelect(key, keyPath) // 关闭抽屉 drawerVisible.value false } const handleSelectMenu (path: any) { console.log(path, path) // 更新激活状态 activeIndex.value path // 设置页面标题 setDocumentTitle(path) // 路由跳转 router.push({ path }) } // 监听路由变化同步更新激活状态 watch( () route.path, (newPath) { activeIndex.value newPath setDocumentTitle(newPath) } ) onMounted(() { // 初始化当前路由 const currentPath router.currentRoute.value.path activeIndex.value currentPath // 设置初始页面标题 setDocumentTitle(currentPath) }) /script style langcss scoped src./index.css/style// 菜单配置 export interface MenuItem { index: string label: string title?: string // 用于设置 document.title children?: MenuItem[] isSpecialButton?: boolean // 是否为特殊按钮样式 } export const menuConfig: MenuItem[] [ { index: /, label: 首页, }, { index: /productCenter/index, label: 产品中心, children: [ { index: /productCenter/index, label: 快速入口, }, { index: /productCenter/aiAppOpPlat, label: AI应用运营平台, }, ], }, { index: /successStories/index, label: 成功故事, title: 成功故事, children: [ { index: /successStories/index, label: 快速入口, }, { index: /successStories/edu, label: 教育, }, ], }, { index: /partner, label: 合作伙伴, title: 合作伙伴, }, { index: 4, label: 关于我们, title: 关于我们, children: [ { index: /about, label: 公司介绍, title: 公司介绍, }, ], }, { index: 6, label: 资讯中心, title: 资讯中心, children: [ { index: /news, label: 最新资讯, title: 最新资讯, }, ], }, { index: /contact, label: 联系我们, title: 联系我们, isSpecialButton: true, }, ] // 网站名称后缀 export const SITE_NAME 通圆数智 // 根据 index 查找菜单标题 export function findMenuTitle( menuIndex: string, menus: MenuItem[] menuConfig, ): string | null { for (const menu of menus) { if (menu.index menuIndex) { return menu.title || menu.label } if (menu.children) { const title findMenuTitle(menuIndex, menu.children) if (title) return title } } return null } // 设置页面标题 export function setDocumentTitle(menuIndex: string) { const title findMenuTitle(menuIndex) if (title) { document.title ${title} - ${SITE_NAME} } }