diff --git a/public/config/nav.js b/public/config/nav.js index 481d7d4..8ac14e2 100644 --- a/public/config/nav.js +++ b/public/config/nav.js @@ -1,31 +1,34 @@ window.nav = { header: [ - {id: 1, label: '首页', url: '/', hasChildren: false}, + {id: 1, label: '首页', url: '/', mobileUrl: '/m/homepage', hasChildren: false}, { id: 2, label: '解决方案', url: '/product', + mobileUrl: '/m/product', hasChildren: true, children: [ { id: 2.1, label: '空域感知矩阵', url: '/product/hardwareSystem', + mobileUrl: '/m/product/hardwareSystem', hasChildren: false, }, { id: 2.2, label: '低空智控中枢', url: '/product/softwareSystem', + mobileUrl: '/m/product/softwareSystem', hasChildren: false, }, ], }, - // {id: 3, label: '服务与支撑', url: '/services', hasChildren: false}, - {id: 4, label: '新闻中心', url: '/news', hasChildren: false}, - {id: 5, label: '关于我们', url: '/about', hasChildren: false}, - {id: 6, label: '联系我们', url: '/link', hasChildren: false}, - {id: 7, label: '资源下载', url: '/download', hasChildren: false}, + // {id: 3, label: '服务与支撑', url: '/services', mobileUrl: '/m/services', hasChildren: false}, + {id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false}, + {id: 5, label: '关于我们', url: '/about', mobileUrl: '/m/about', hasChildren: false}, + {id: 6, label: '联系我们', url: '/link', mobileUrl: '/m/link', hasChildren: false}, + {id: 7, label: '资源下载', url: '/download', mobileUrl: '/m/download', hasChildren: false}, {id: 8, label: '演示系统', url: window.config.featureUrl, hasChildren: false, open: true}, ], @@ -36,14 +39,15 @@ window.nav = { url: '', hasChildren: true, children: [ - {id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem'}, - {id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem'}, + {id: 1.1, label: '空域感知矩阵', url: '/product/hardwareSystem', mobileUrl: '/m/product/hardwareSystem'}, + {id: 1.2, label: '低空智控中枢', url: '/product/softwareSystem', mobileUrl: '/m/product/softwareSystem'}, ], }, // { // id: 2, // label: '服务与支撑', // url: '/services', + // mobileUrl: '/m/services', // hasChildren: false, // }, { @@ -52,21 +56,21 @@ window.nav = { url: '/download', hasChildren: true, children: [ - {id: 3.1, label: '资源下载', url: '/download'}, + {id: 3.1, label: '资源下载', url: '/download', mobileUrl: '/m/download'}, {id: 3.2, label: 'Android', url: '', downloadType: 'android'}, {id: 3.3, label: 'iOS', url: '', downloadType: 'ios'}, {id: 3.4, label: '客户端', url: '', downloadType: 'pc'}, ], }, - // {id: 4, label: '新闻中心', url: '/news', hasChildren: false}, + // {id: 4, label: '新闻中心', url: '/news', mobileUrl: '/m/news', hasChildren: false}, { id: 5, label: '关于燃谷', url: '', hasChildren: true, children: [ - {id: 5.1, label: '公司简介', url: '/about'}, - {id: 5.2, label: '联系我们', url: '/link'}, + {id: 5.1, label: '公司简介', url: '/about', mobileUrl: '/m/about'}, + {id: 5.2, label: '联系我们', url: '/link', mobileUrl: '/m/link'}, ], }, ], diff --git a/src/router/index.js b/src/router/index.js index 15f59c3..8fd9018 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,8 +1,9 @@ import {createWebHashHistory, createRouter} from 'vue-router' +import mobileRoutes from './mobile.js' import HomeView from '@/views/homepage/index.vue' -const routes = [ +const pcRoutes = [ // ============================================ 首页 ============================================ {path: '/', component: HomeView}, @@ -100,6 +101,8 @@ const routes = [ }, ] +const routes = [...pcRoutes, ...mobileRoutes] + const router = createRouter({ history: createWebHashHistory(), routes, @@ -108,6 +111,25 @@ const router = createRouter({ // 移动端/PC端断点 const MOBILE_BREAKPOINT = 1000 +// PC → 移动端路由映射 +const pcToMobileMap = { + '/': '/m/homepage', + '/product/hardwareSystem': '/m/product/hardwareSystem', + '/product/softwareSystem': '/m/product/softwareSystem', + '/product/detail': '/m/product/detail', + '/services': '/m/services', + '/news': '/m/news', + '/news/detail': '/m/news/detail', + '/about': '/m/about', + '/link': '/m/link', + '/download': '/m/download', +} + +// 移动端 → PC 路由映射(反向) +const mobileToPcMap = Object.fromEntries( + Object.entries(pcToMobileMap).map(([k, v]) => [v, k]) +) + // 判断是否为移动端 function checkIsMobile() { return window.innerWidth < MOBILE_BREAKPOINT @@ -116,8 +138,21 @@ function checkIsMobile() { router.beforeEach(async (to, from, next) => { const {useNavStore} = await import('@/store/nav.js') const navStore = useNavStore() + const isMobile = checkIsMobile() + // 更新移动端状态 - navStore.setIsMobile(checkIsMobile()) + navStore.setIsMobile(isMobile) + + // 移动端访问 PC 路由 → 重定向到移动端路由 + if (isMobile && pcToMobileMap[to.path]) { + return next({path: pcToMobileMap[to.path], query: to.query, hash: to.hash, replace: true}) + } + + // PC端访问移动端路由 → 重定向到 PC 路由 + if (!isMobile && mobileToPcMap[to.path]) { + return next({path: mobileToPcMap[to.path], query: to.query, hash: to.hash, replace: true}) + } + next() }) diff --git a/src/router/mobile.js b/src/router/mobile.js new file mode 100644 index 0000000..e83376d --- /dev/null +++ b/src/router/mobile.js @@ -0,0 +1,76 @@ +const mobileRoutes = [ + // ============================================ 首页 ============================================ + { + path: '/m/homepage', + name: 'MobileHomepage', + component: () => import('@/views/homepage/mobile.vue'), + }, + + // ============================================ 产品中心 ============================================ + { + path: '/m/product/hardwareSystem', + name: 'MobileHardwareSystem', + component: () => import('@/views/product/mobileHardwareSystem.vue'), + meta: {title: '低空监管体系'}, + }, + { + path: '/m/product/softwareSystem', + name: 'MobileSoftwareSystem', + component: () => import('@/views/product/mobileSoftwareSystem.vue'), + meta: {title: '低空远程识别设备'}, + }, + { + path: '/m/product/detail', + name: 'MobileProductDetail', + component: () => import('@/views/product/mobileDetail.vue'), + meta: {title: '产品详情'}, + }, + + // ============================================ 服务与支撑 ============================================ + { + path: '/m/services', + name: 'MobileServices', + component: () => import('@/views/services/mobile.vue'), + meta: {title: '服务与支撑'}, + }, + + // ============================================ 新闻中心 ============================================ + { + path: '/m/news', + name: 'MobileNews', + component: () => import('@/views/news/mobile.vue'), + meta: {title: '新闻中心'}, + }, + { + path: '/m/news/detail', + name: 'MobileNewsDetail', + component: () => import('@/views/news/mobileDetail.vue'), + meta: {title: '新闻详情'}, + }, + + // ============================================ 关于我们 ============================================ + { + path: '/m/about', + name: 'MobileAbout', + component: () => import('@/views/about/mobile.vue'), + meta: {title: '关于我们'}, + }, + + // ============================================ 联系我们 ============================================ + { + path: '/m/link', + name: 'MobileLink', + component: () => import('@/views/link/mobile.vue'), + meta: {title: '联系我们'}, + }, + + // ============================================ 下载中心 ============================================ + { + path: '/m/download', + name: 'MobileDownload', + component: () => import('@/views/download/mobile.vue'), + meta: {title: '下载中心'}, + }, +] + +export default mobileRoutes diff --git a/src/views/about/mobile.vue b/src/views/about/mobile.vue new file mode 100644 index 0000000..4138a0a --- /dev/null +++ b/src/views/about/mobile.vue @@ -0,0 +1,6 @@ + + diff --git a/src/views/download/mobile.vue b/src/views/download/mobile.vue new file mode 100644 index 0000000..4138a0a --- /dev/null +++ b/src/views/download/mobile.vue @@ -0,0 +1,6 @@ + + diff --git a/src/views/homepage/mobile.vue b/src/views/homepage/mobile.vue new file mode 100644 index 0000000..4138a0a --- /dev/null +++ b/src/views/homepage/mobile.vue @@ -0,0 +1,6 @@ + + diff --git a/src/views/layout/mobile/index.vue b/src/views/layout/mobile/index.vue index 42bbd7a..cafbabe 100644 --- a/src/views/layout/mobile/index.vue +++ b/src/views/layout/mobile/index.vue @@ -22,18 +22,22 @@ const closeSidebar = () => { sidebarVisible.value = false } -const toggleSubMenu = (url) => { - const idx = expandedSubMenus.value.indexOf(url) +const toggleSubMenu = (navId) => { + const idx = expandedSubMenus.value.indexOf(navId) if (idx > -1) { expandedSubMenus.value.splice(idx, 1) } else { - expandedSubMenus.value.push(url) + expandedSubMenus.value.push(navId) } } +const getTargetUrl = (nav) => { + return nav.mobileUrl || nav.url +} + const handleNavClick = (nav) => { if (nav.hasChildren || nav.children?.length > 0) { - toggleSubMenu(nav.url) + toggleSubMenu(nav.id) return } if (nav.open) { @@ -41,9 +45,10 @@ const handleNavClick = (nav) => { sidebarVisible.value = false return } - navStore.changeNavIndex(nav.url) - activeIndex.value = nav.url - router.push(nav.url) + const targetUrl = getTargetUrl(nav) + navStore.changeNavIndex(targetUrl) + activeIndex.value = targetUrl + router.push(targetUrl) sidebarVisible.value = false } @@ -83,21 +88,21 @@ const toMIIF = () => {