移动端适配

schoolNewsWeb/src/utils/route-generator.ts

@@ -8,7 +8,7 @@ import type { RouteRecordRaw } from 'vue-router';
 import type { SysMenu } from '@/types';
 import { MenuType } from '@/types/enums';
 import { routes } from '@/router';
-import { getResponsiveLayout } from './routeAdapter';
+import { getResponsiveLayout, createResponsiveRoute, type RouteAdapter } from './routeAdapter';
 
 // 预注册所有视图组件，构建时由 Vite 解析并生成按需加载的 chunk
 const VIEW_MODULES = import.meta.glob('../views/**/*.vue');
@@ -280,7 +280,7 @@ function findFirstMenuWithUrl(menus: SysMenu[]): SysMenu | null {
 }
 
 /**
- * 根据组件名称获取组件
+ * 根据组件名称获取组件（支持响应式组件）
  * @param componentName 组件名称/路径
  * @returns 组件异步加载函数
  */
@@ -302,17 +302,23 @@ function getComponent(componentName: string) {
   }
 
   // 将别名 @/ 转为相对于当前文件的路径，必须与 import.meta.glob 中的模式一致
-  componentPath = componentPath.replace(/^@\//, '../'); // => '../views/user/home/HomeView'
+  const originalPath = componentPath.replace(/^@\//, '../'); // => '../views/user/home/HomeView'
 
   // 补全 .vue 后缀
-  if (!componentPath.endsWith('.vue')) {
-    componentPath += '.vue';
+  if (!originalPath.endsWith('.vue')) {
+    componentPath = originalPath + '.vue';
+  } else {
+    componentPath = originalPath;
   }
 
-  // 3. 从 VIEW_MODULES 中查找对应的 loader
-  const loader = VIEW_MODULES[componentPath];
+  // 3. 检查是否有移动端版本
+  const mobileComponentPath = componentPath.replace('.vue', '.mobile.vue');
+  
+  // 从 VIEW_MODULES 中查找对应的 loader
+  const originalLoader = VIEW_MODULES[componentPath];
+  const mobileLoader = VIEW_MODULES[mobileComponentPath];
 
-  if (!loader) {
+  if (!originalLoader) {
     console.error('[路由生成] 未找到组件模块', {
       原始组件名: componentName,
       期望路径: componentPath,
@@ -322,7 +328,17 @@ function getComponent(componentName: string) {
     return () => import('@/views/public/error/404.vue');
   }
 
-  return loader as () => Promise<any>;
+  // 4. 如果有移动端版本，创建响应式路由适配器
+  if (mobileLoader) {
+    const adapter: RouteAdapter = {
+      original: originalLoader as () => Promise<any>,
+      mobile: mobileLoader as () => Promise<any>
+    };
+    return createResponsiveRoute(adapter);
+  }
+
+  // 5. 没有移动端版本，直接返回原始组件
+  return originalLoader as () => Promise<any>;
 }
 
 /**