feat: 移动端/桌面端自动适配
- utils/index.ts: 新增 isMobile() 检测 user-agent - router: beforeEach 守卫中根据设备自动跳转 - 手机访问 / 桌面路由 → 自动跳 /m - 桌面访问 /m 移动路由 → 自动跳 / Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import { useAuthStore } from '@/stores/auth'
|
import { useAuthStore } from '@/stores/auth'
|
||||||
|
import { isMobile } from '@/utils'
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory(),
|
||||||
@@ -73,6 +74,19 @@ router.beforeEach((to, _from, next) => {
|
|||||||
next('/login')
|
next('/login')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Auto-redirect to mobile layout for mobile devices accessing desktop routes
|
||||||
|
const onMobile = isMobile()
|
||||||
|
if (onMobile && to.path === '/' && !to.path.startsWith('/m')) {
|
||||||
|
next('/m')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// Desktop user accidentally on mobile route → redirect to desktop
|
||||||
|
if (!onMobile && to.path.startsWith('/m')) {
|
||||||
|
next('/')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
next()
|
next()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -3,3 +3,9 @@ export function todayStr(): string {
|
|||||||
const d = new Date()
|
const d = new Date()
|
||||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Detect if current device is mobile based on user-agent. */
|
||||||
|
export function isMobile(): boolean {
|
||||||
|
const ua = navigator.userAgent || ''
|
||||||
|
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(ua)
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user