备份代码

This commit is contained in:
yiqiuyang
2026-07-30 17:12:26 +08:00
parent 661ee7d7a3
commit 4aa7949e48
14 changed files with 206 additions and 26 deletions

View File

@ -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'},
],
},
],

View File

@ -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()
})

76
src/router/mobile.js Normal file
View File

@ -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

View File

@ -0,0 +1,6 @@
<script setup>
import PcIndex from './index.vue'
</script>
<template>
<PcIndex />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcIndex from './index.vue'
</script>
<template>
<PcIndex />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcIndex from './index.vue'
</script>
<template>
<PcIndex />
</template>

View File

@ -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 = () => {
<div v-if="nav.hasChildren || nav.children?.length > 0" class="nav-group">
<div
class="nav-item nav-item--parent"
:class="{'nav-item--expanded': expandedSubMenus.includes(nav.url)}"
:class="{'nav-item--expanded': expandedSubMenus.includes(nav.id)}"
@click="handleNavClick(nav)"
>
<span class="nav-label">{{ nav.label }}</span>
<el-icon class="nav-arrow" :size="12">
<ArrowDown v-if="expandedSubMenus.includes(nav.url)" />
<ArrowDown v-if="expandedSubMenus.includes(nav.id)" />
<ArrowRight v-else />
</el-icon>
</div>
<div v-show="expandedSubMenus.includes(nav.url)" class="nav-sub">
<div v-show="expandedSubMenus.includes(nav.id)" class="nav-sub">
<div
v-for="child in nav.children"
:key="child.id"
class="nav-item nav-item--child"
:class="{'nav-item--active': activeIndex === child.url}"
:class="{'nav-item--active': activeIndex === getTargetUrl(child)}"
@click="handleNavClick(child)"
>
{{ child.label }}
@ -108,7 +113,7 @@ const toMIIF = () => {
<div
v-else
class="nav-item"
:class="{'nav-item--active': activeIndex === nav.url}"
:class="{'nav-item--active': activeIndex === getTargetUrl(nav)}"
@click="handleNavClick(nav)"
>
<span class="nav-label">{{ nav.label }}</span>

View File

@ -0,0 +1,6 @@
<script setup>
import PcIndex from './index.vue'
</script>
<template>
<PcIndex />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcIndex from './index.vue'
</script>
<template>
<PcIndex />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcPage from './detail.vue'
</script>
<template>
<PcPage />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcPage from './detail.vue'
</script>
<template>
<PcPage />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcPage from './hardwareSystem.vue'
</script>
<template>
<PcPage />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcPage from './softwareSystem.vue'
</script>
<template>
<PcPage />
</template>

View File

@ -0,0 +1,6 @@
<script setup>
import PcIndex from './index.vue'
</script>
<template>
<PcIndex />
</template>