refactor: 拍平目录到仓库根 + 修复首页跳转等微前端样板工程问题

目录结构:
- frontend/ 拍平到仓库根,移除冗余 frontend/.gitignore
- README 去掉 cd frontend 与脚手架裁剪说明

代码优化:
- main-app 路由增加 beforeEach 守卫,首次访问 / 按设备自动分发到 /web 或 /mobile,
  解决 HomeView 闪一下再跳转的问题
- HomeView 移除 onMounted 中的 router.replace
- device store 监听 mf-device-change 事件,与 utils/device.js 手动覆盖同步
- 删除 device store 未使用的 displayMode getter
- main.js 调整 CSS 引入顺序(base 先于 main)
- 将 getSafeAreaVh 从 main-app 移到 mobile-app/utils/safeArea.js(移动端专属)
- web-app/mobile-app vite.config.js 移除未使用的 useDevMode 常量

README.md

@@ -2,8 +2,6 @@
 
 Vue 3 + Vite + qiankun 微前端 + Vant 4 移动端子应用。
 
-本仓库基于 `D:/Code/micro-frontend-scaffold/` 脚手架裁剪,只包含 frontend/ 目录。
-
 ## 子应用
 
 | 子应用 | 技术 | 启动端口 | activeRule |
@@ -15,7 +13,6 @@ Vue 3 + Vite + qiankun 微前端 + Vant 4 移动端子应用。
 ## 启动
 
 ```bash
-cd frontend
 npm install
 
 # 方式一:全部一起启动(主应用 8000 + PC 7100 + 移动端 7200)
@@ -32,7 +29,6 @@ npm run dev:mobile
 ## 构建
 
 ```bash
-cd frontend
 npm run build
 ```
 

frontend/.gitignore

@@ -1,5 +0,0 @@
-node_modules
-dist
-*.local
-.DS_Store
-npm-debug.log*

frontend/main-app/src/main.js → main-app/src/main.js

@@ -3,8 +3,8 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 import { registerApp, startApp } from './micro'
-import './assets/main.css'
 import './assets/base.css'
+import './assets/main.css'
 
 const app = createApp(App)
 

frontend/main-app/src/router/index.js → main-app/src/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { getDeviceMode } from '@/utils/device'
 
 const router = createRouter({
   history: createWebHistory('/'),
@@ -24,4 +25,13 @@ const router = createRouter({
   ],
 })
 
+// 首次访问根路径时，根据设备自动分发到对应子应用，避免 HomeView 闪一下再跳转
+router.beforeEach((to, _from, next) => {
+  if (to.path === '/' && !to.redirectedFrom) {
+    const target = getDeviceMode() === 'mobile' ? '/mobile' : '/web'
+    return next(target)
+  }
+  next()
+})
+
 export default router

frontend/main-app/src/store/device.js → main-app/src/store/device.js

@@ -11,9 +11,6 @@ export const useDeviceStore = defineStore('device', {
     mode: getDeviceMode(),
     isMobile: getDeviceMode() === 'mobile',
   }),
-  getters: {
-    displayMode: (state) => state.mode,
-  },
   actions: {
     switchTo(mode) {
       setDeviceMode(mode)
@@ -22,3 +19,15 @@ export const useDeviceStore = defineStore('device', {
     },
   },
 })
+
+// 监听 utils/device.js 派发的全局事件，确保 store 与工具层手动覆盖值始终一致
+if (typeof window !== 'undefined') {
+  window.addEventListener('mf-device-change', (e) => {
+    const store = useDeviceStore()
+    const mode = e.detail
+    if (mode === 'pc' || mode === 'mobile') {
+      store.mode = mode
+      store.isMobile = mode === 'mobile'
+    }
+  })
+}

frontend/main-app/src/utils/device.js → main-app/src/utils/device.js

@@ -25,8 +25,3 @@ export function setDeviceMode(mode) {
   // 通知各子应用端切换
   window.dispatchEvent(new CustomEvent('mf-device-change', { detail: mode }))
 }
-
-/** 计算移动端安全的视口高度（兼容 iOS 底部导航遮挡） */
-export function getSafeAreaVh() {
-  return `calc(100vh - env(safe-area-inset-bottom))`
-}

frontend/main-app/src/views/HomeView.vue → main-app/src/views/HomeView.vue

@@ -22,10 +22,8 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useDeviceStore } from '@/store/device'
-import { getDeviceMode } from '@/utils/device'
 
 const router = useRouter()
 const deviceStore = useDeviceStore()
@@ -33,10 +31,4 @@ const deviceStore = useDeviceStore()
 function go(path) {
   router.push(path)
 }
-
-onMounted(() => {
-  // 首次进入按设备自动分发：移动端 -> /mobile，PC -> /web
-  const target = getDeviceMode() === 'mobile' ? '/mobile' : '/web'
-  router.replace(target)
-})
 </script>

mobile-app/src/utils/safeArea.js

@@ -0,0 +1,4 @@
+/** 计算移动端安全的视口高度（兼容 iOS 底部导航遮挡） */
+export function getSafeAreaVh() {
+  return `calc(100vh - env(safe-area-inset-bottom))`
+}

frontend/mobile-app/vite.config.js → mobile-app/vite.config.js

@@ -4,7 +4,6 @@ import vue from '@vitejs/plugin-vue'
 import qiankun from 'vite-plugin-qiankun'
 
 const SUB_APP_NAME = 'mobile-app'
-const useDevMode = true
 
 // 移动端子应用
 export default defineConfig(({ mode }) => {

frontend/web-app/vite.config.js → web-app/vite.config.js

@@ -4,7 +4,6 @@ import vue from '@vitejs/plugin-vue'
 import qiankun from 'vite-plugin-qiankun'
 
 const SUB_APP_NAME = 'web-app'
-const useDevMode = true
 
 // qiankun 子应用：借助 vite-plugin-qiankun 暴露微前端生命周期
 export default defineConfig(({ mode }) => {