feat(mobile): stage 1 - infrastructure (vant, useDevice, MobileLayout, router, mobile.css)

- add vant@^4.9.0 dependency
- migrate useDevice.ts (device detection + localStorage)
- migrate MobileLayout.vue (tabbar + navbar + store init)
- migrate mobile.css (vant theme -> --gg-* mapping)
- migrate Placeholder.vue for unimplemented mobile views
- index.html: viewport for mobile (no-zoom, safe-area)
- main.ts: register Vant + import mobile.css
- vite.config.ts: manualChunks code splitting (vue/element/vant/pocketbase/livekit)
- router/index.ts: device-based routing via isMobile() + view() helper,
  preserve uat's JoinGroup/JoinTeam routes, mobile views use Placeholder
  pending stages 2-11

build verified: vue-tsc + vite build pass
This commit is contained in:
锦麟 王
2026-06-18 10:54:12 +08:00
parent 0b999eebb0
commit 38c13ec50e
9 changed files with 406 additions and 16 deletions
+51
View File
@@ -0,0 +1,51 @@
// src/mobile/useDevice.ts
// 设备检测:判断当前是否移动端,结果存 localStorage 避免重复检测
const STORAGE_KEY = 'device_mode'
/** UA 关键字匹配移动设备 */
const MOBILE_UA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
/** 屏幕宽度阈值(含平板竖屏) */
const MOBILE_WIDTH = 768
/**
* 原始检测:综合 UA 和屏幕宽度判断
* - UA 命中移动设备关键字 → 手机
* - 屏宽 <= 768 → 手机
* - 否则 → 桌面
*/
function detectRaw(): 'mobile' | 'desktop' {
if (typeof navigator === 'undefined') return 'desktop'
if (MOBILE_UA.test(navigator.userAgent)) return 'mobile'
if (typeof window !== 'undefined' && window.innerWidth <= MOBILE_WIDTH) return 'mobile'
return 'desktop'
}
/** 当前设备模式(读取 localStorage,无则检测并存入) */
export function getDeviceMode(): 'mobile' | 'desktop' {
if (typeof localStorage === 'undefined') return detectRaw()
const stored = localStorage.getItem(STORAGE_KEY)
if (stored === 'mobile' || stored === 'desktop') return stored
const detected = detectRaw()
localStorage.setItem(STORAGE_KEY, detected)
return detected
}
/** 是否移动端(路由分流用,同步函数) */
export function isMobile(): boolean {
return getDeviceMode() === 'mobile'
}
/**
* 手动切换设备模式(设置页"切换到桌面版/手机版"用)
* 切换后需整页刷新以重新走路由解析
*/
export function setDeviceMode(mode: 'mobile' | 'desktop') {
localStorage.setItem(STORAGE_KEY, mode)
}
/** 重置为自动检测(登出时调用,避免下个用户沿用上个用户的偏好) */
export function resetDeviceMode() {
localStorage.removeItem(STORAGE_KEY)
}