web iframe结构实现

urbanLifelineWeb/packages/shared/src/utils/route/route-generator.ts

@@ -184,15 +184,22 @@ function generateRouteFromMenu(
                 route.component = component
             } else {
                 // 组件加载失败，使用 404
-                route.component = config.notFoundComponent || (() => Promise.resolve({ default: { template: '<div>404</div>' } }))
+                route.component = config.notFoundComponent || (() => import('vue').then(({ h }) => ({
+                    default: {
+                        render() { return h('div', '404') }
+                    }
+                })))
             }
         } else {
             // 使用路由占位组件
-            route.component = () => Promise.resolve({ 
+            route.component = () => import('vue').then(({ h, resolveComponent }) => ({ 
                 default: { 
-                    template: '<router-view />' 
+                    render() { 
+                        const RouterView = resolveComponent('RouterView')
+                        return h(RouterView) 
+                    } 
                 } 
-            })
+            }))
         }
     }
     
@@ -677,17 +684,29 @@ function generateSimpleRoute(
     let component: any
     
     if (isIframe) {
-        // iframe 类型：使用占位组件
-        component = iframePlaceholder || (() => Promise.resolve({ 
-            default: { 
-                template: '<div class="iframe-placeholder"></div>' 
-            } 
-        }))
+        // iframe 类型：使用占位组件（用于显示iframe内容）
+        // 路由路径使用 url 字段（应该设置为不冲突的路径，如 /app/workcase）
+        component = iframePlaceholder || (() => import('vue').then(({ h }) => ({ 
+            default: {
+                render() { return h('div', { class: 'iframe-placeholder' }, 'Loading...') }
+            }
+        })))
     } else if (view.component) {
         // route 类型：加载实际组件
         component = config.viewLoader(view.component)
         if (!component) {
-            if (verbose) console.warn('[路由生成] 组件加载失败:', view.component)
+            if (verbose) console.warn('[路由生成] 组件加载失败:', view.component, '使用占位组件')
+            // 使用占位组件，避免路由无效
+            const errorMsg = `组件加载失败: ${view.component}`
+            component = () => import('vue').then(({ h }) => ({ 
+                default: {
+                    render() { 
+                        return h('div', { 
+                            style: { padding: '20px', color: 'red' } 
+                        }, errorMsg) 
+                    }
+                }
+            }))
         }
     }
     
@@ -753,11 +772,14 @@ function generateSimpleRoute(
         route.component = component
     } else if (!component && hasChildren) {
         // 没有组件，只有子视图（路由容器）
-        route.component = () => Promise.resolve({ 
+        route.component = () => import('vue').then(({ h, resolveComponent }) => ({ 
             default: { 
-                template: '<router-view />' 
+                render() { 
+                    const RouterView = resolveComponent('RouterView')
+                    return h(RouterView) 
+                } 
             } 
-        })
+        }))
         route.children = []
         
         // 添加子路由
@@ -785,5 +807,51 @@ function generateSimpleRoute(
         return null
     }
     
+    // 处理layout：如果视图指定了layout，且不是作为Root的子路由，且有有效组件，需要包裹layout
+    const viewLayout = (view as any).layout
+    if (viewLayout && !asRootChild && route.component && config.layoutMap[viewLayout]) {
+        if (verbose) {
+            console.log('[路由生成] 为视图添加布局:', view.name, '布局:', viewLayout, '路径:', routePath)
+        }
+        
+        // 创建layout路由，将原路由的组件作为其子路由
+        const layoutRoute: RouteRecordRaw = {
+            path: routePath,
+            name: view.viewId,
+            component: config.layoutMap[viewLayout],
+            meta: {
+                ...route.meta,
+                layout: viewLayout  // 标记使用的布局
+            },
+            children: [
+                {
+                    path: '',
+                    name: `${view.viewId}_content`,
+                    component: route.component,
+                    meta: route.meta
+                }
+            ]
+        }
+        
+        // 如果原路由有其他children（子视图），也添加到layout路由的children中
+        if (route.children && route.children.length > 0) {
+            // 跳过第一个空路径的子路由（如果存在）
+            const otherChildren = route.children.filter((child: any) => child.path !== '')
+            if (otherChildren.length > 0) {
+                layoutRoute.children!.push(...otherChildren)
+            }
+        }
+        
+        if (verbose) {
+            console.log('[路由生成] Layout路由生成完成:', {
+                path: layoutRoute.path,
+                name: layoutRoute.name,
+                childrenCount: layoutRoute.children?.length
+            })
+        }
+        
+        return layoutRoute
+    }
+    
     return route
 }