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
+53
View File
@@ -0,0 +1,53 @@
/* src/assets/mobile.css */
/* Vant 4 主题变量覆盖 —— 映射到项目 design.css 的 --gg-* 设计系统 */
:root {
/* 主色(Vant primary → gg-primary 绿色) */
--van-primary-color: var(--gg-primary); /* #059669 */
--van-success-color: var(--gg-success); /* #10b981 */
--van-danger-color: var(--gg-danger); /* #ef4444 */
--van-warning-color: var(--gg-warning); /* #f59e0b */
/* 文字色 */
--van-text-color: var(--gg-text); /* #1e293b */
--van-text-color-2: var(--gg-text-secondary); /* #475569 */
--van-text-color-3: var(--gg-text-muted); /* #94a3b8 */
/* 背景 */
--van-background: var(--gg-bg); /* #f0fdf4 */
--van-background-2: var(--gg-bg-card); /* #ffffff */
/* 边框 */
--van-border-color: var(--gg-border); /* #e2e8f0 */
/* 圆角 */
--van-radius-sm: var(--gg-radius-sm);
--van-radius-md: var(--gg-radius-md);
--van-radius-lg: var(--gg-radius-lg);
/* Tabbar(底部导航) */
--van-tabbar-background: var(--gg-bg-card);
--van-tabbar-item-active-color: var(--gg-primary);
--van-tabbar-item-text-color: var(--gg-text-muted);
--van-tabbar-height: 56px;
/* NavBar(顶部栏) */
--van-nav-bar-background: var(--gg-bg-card);
--van-nav-bar-title-font-size: 17px;
--van-nav-bar-height: 52px;
--van-nav-bar-icon-color: var(--gg-text);
/* 按钮主色渐变 */
--van-button-primary-background: var(--gg-primary);
--van-button-primary-border-color: var(--gg-primary);
}
/* 手机端全局:安全区域适配(刘海屏底部 Tab 不被遮挡) */
.mobile-app {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 禁止移动端点击高亮 */
.mobile-app * {
-webkit-tap-highlight-color: transparent;
}