web iframe结构实现
This commit is contained in:
154
urbanLifelineWeb/packages/workcase/src/router/dynamicRoute.ts
Normal file
154
urbanLifelineWeb/packages/workcase/src/router/dynamicRoute.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
/**
|
||||
* 动态路由生成模块（Workcase 特定）
|
||||
*
|
||||
* 职责：
|
||||
* 1. 提供 Workcase 特定的布局和组件配置
|
||||
* 2. 调用 shared 中的通用路由生成方法
|
||||
* 3. 将生成的路由添加到 Workcase 的 router 实例
|
||||
*/
|
||||
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
import {
|
||||
generateSimpleRoutes,
|
||||
loadViewsFromStorage,
|
||||
type RouteGeneratorConfig,
|
||||
type GenerateSimpleRoutesOptions
|
||||
} from 'shared/utils/route'
|
||||
import type { TbSysViewDTO } from 'shared/types'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import router from './index'
|
||||
import { SidebarLayout, BlankLayout } from '@/layouts'
|
||||
|
||||
// Workcase 布局组件映射
|
||||
const workcaseLayoutMap: Record<string, () => Promise<any>> = {
|
||||
'SidebarLayout': () => Promise.resolve({ default: SidebarLayout }),
|
||||
'BlankLayout': () => Promise.resolve({ default: BlankLayout }),
|
||||
'NavigationLayout': () => Promise.resolve({ default: SidebarLayout }),
|
||||
'BasicLayout': () => Promise.resolve({ default: SidebarLayout })
|
||||
}
|
||||
|
||||
// 视图组件加载器
|
||||
const VIEW_MODULES = import.meta.glob<{ default: any }>('../views/**/*.vue')
|
||||
|
||||
/**
|
||||
* 视图组件加载函数
|
||||
* @param componentPath 组件路径（如 "public/AIChat/AIChatView.vue" 或 "workcase/List"）
|
||||
*/
|
||||
function viewLoader(componentPath: string): (() => Promise<any>) | null {
|
||||
// 将后台路径转换为 @/views 格式
|
||||
let path = componentPath
|
||||
|
||||
// 移除开头的斜杠（如果有）
|
||||
if (path.startsWith('/')) {
|
||||
path = path.substring(1)
|
||||
}
|
||||
|
||||
// 补全 .vue 后缀（如果没有）
|
||||
if (!path.endsWith('.vue')) {
|
||||
path += '.vue'
|
||||
}
|
||||
|
||||
// 转换为 ../views 格式（匹配 import.meta.glob 的 key）
|
||||
const fullPath = `../views/${path}`
|
||||
|
||||
console.log('[Workcase viewLoader] 尝试加载组件:', componentPath, '→', fullPath)
|
||||
|
||||
const loader = VIEW_MODULES[fullPath]
|
||||
|
||||
if (!loader) {
|
||||
console.warn('[Workcase viewLoader] 组件未找到:', fullPath)
|
||||
console.log('[Workcase viewLoader] 可用的组件:', Object.keys(VIEW_MODULES))
|
||||
return null
|
||||
}
|
||||
|
||||
return loader as () => Promise<any>
|
||||
}
|
||||
|
||||
// Workcase 路由生成器配置
|
||||
const routeConfig: RouteGeneratorConfig = {
|
||||
layoutMap: workcaseLayoutMap,
|
||||
viewLoader,
|
||||
notFoundComponent: () => Promise.resolve({
|
||||
default: {
|
||||
template: '<div style="padding: 20px; text-align: center;"><h2>404 - 页面未找到</h2></div>'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Workcase 路由生成选项
|
||||
const routeOptions: GenerateSimpleRoutesOptions = {
|
||||
asRootChildren: false, // 直接作为根级路由，不是某个布局的子路由
|
||||
iframePlaceholder: () => import('shared/components').then(m => ({ default: m.IframeView })),
|
||||
verbose: true // 启用详细日志
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加动态路由（Workcase 特定）
|
||||
* @param views 视图列表（用作菜单）
|
||||
*/
|
||||
export function addDynamicRoutes(views: TbSysViewDTO[]) {
|
||||
if (!views || views.length === 0) {
|
||||
console.warn('[Workcase] addDynamicRoutes: 视图列表为空')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('[Workcase] addDynamicRoutes: 开始添加动态路由，视图数量:', views.length)
|
||||
console.log('[Workcase] addDynamicRoutes: 路由配置:', routeConfig)
|
||||
console.log('[Workcase] addDynamicRoutes: 路由选项:', routeOptions)
|
||||
|
||||
try {
|
||||
// 使用 shared 中的通用方法生成路由
|
||||
const routes = generateSimpleRoutes(views, routeConfig, routeOptions)
|
||||
|
||||
// 直接将路由添加到根级别（不是作为Root的children）
|
||||
routes.forEach(route => {
|
||||
console.log('[Workcase] addDynamicRoutes: 添加路由', route.path, '使用布局:', route.component?.name || 'unknown')
|
||||
router.addRoute(route)
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 从 LocalStorage 获取菜单并生成路由（Workcase 特定）
|
||||
*
|
||||
* 使用 shared 中的通用 loadViewsFromStorage 方法
|
||||
* 筛选出 service='workcase' 的视图
|
||||
*/
|
||||
export function loadRoutesFromStorage(): boolean {
|
||||
try {
|
||||
console.log('[Workcase] loadRoutesFromStorage: 开始加载动态路由')
|
||||
|
||||
// 使用 shared 中的通用方法加载视图数据
|
||||
const allViews = loadViewsFromStorage('loginDomain', 'userViews')
|
||||
|
||||
console.log('[Workcase] loadRoutesFromStorage: 加载的所有视图数量:', allViews?.length || 0)
|
||||
|
||||
if (allViews) {
|
||||
// 过滤出 workcase 服务的视图
|
||||
const workcaseViews = allViews.filter((view: TbSysViewDTO) =>
|
||||
view.service === 'workcase'
|
||||
)
|
||||
|
||||
console.log('[Workcase] loadRoutesFromStorage: 过滤后的 workcase 视图:', workcaseViews)
|
||||
|
||||
if (workcaseViews.length === 0) {
|
||||
console.warn('[Workcase] loadRoutesFromStorage: 没有找到 workcase 服务的视图')
|
||||
return false
|
||||
}
|
||||
|
||||
// 使用 Workcase 的 addDynamicRoutes 添加路由
|
||||
addDynamicRoutes(workcaseViews)
|
||||
return true
|
||||
}
|
||||
|
||||
console.warn('[Workcase] loadRoutesFromStorage: 未能加载视图数据')
|
||||
return false
|
||||
} catch (error) {
|
||||
console.error('[Workcase] loadRoutesFromStorage: 加载路由失败', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
94
urbanLifelineWeb/packages/workcase/src/router/index.ts
Normal file
94
urbanLifelineWeb/packages/workcase/src/router/index.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
|
||||
// @ts-ignore
|
||||
import { TokenManager } from 'shared/api'
|
||||
// @ts-ignore
|
||||
import { APP_CONFIG } from 'shared/config'
|
||||
// @ts-ignore
|
||||
import { loadRoutesFromStorage } from './dynamicRoute'
|
||||
|
||||
// workcase应用的动态路由会根据layout字段自动添加，不需要预定义Root布局
|
||||
const routes: RouteRecordRaw[] = []
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory('/workcase'), // 与nginx保持一致，使用/workcase前缀
|
||||
routes
|
||||
})
|
||||
|
||||
// 标记动态路由是否已加载
|
||||
let dynamicRoutesLoaded = false
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
console.log('[Workcase Router] 路由守卫触发:', {
|
||||
to: to.path,
|
||||
from: from.path,
|
||||
meta: to.meta
|
||||
})
|
||||
|
||||
// 设置页面标题
|
||||
if (to.meta.title) {
|
||||
document.title = `${to.meta.title} - 工单管理系统`
|
||||
}
|
||||
|
||||
// 检查是否需要登录
|
||||
const requiresAuth = to.meta.requiresAuth !== false
|
||||
const hasToken = TokenManager.hasToken()
|
||||
|
||||
console.log('[Workcase Router] 认证检查:', {
|
||||
requiresAuth,
|
||||
hasToken,
|
||||
tokenValue: localStorage.getItem('token')
|
||||
})
|
||||
|
||||
// 其他页面：检查是否需要登录
|
||||
if (requiresAuth && !hasToken) {
|
||||
// 需要登录但未登录，重定向到 platform 的登录页
|
||||
// 重要：必须使用完整URL（包含origin），避免被workcase的路由拦截造成循环
|
||||
const currentUrl = window.location.href
|
||||
const origin = window.location.origin
|
||||
|
||||
// 构建platform登录页的完整URL
|
||||
const loginUrl = `${origin}/login?redirect=${encodeURIComponent(currentUrl)}`
|
||||
|
||||
console.log('[Workcase Router] 未登录，重定向到Platform登录页:', loginUrl)
|
||||
|
||||
// 使用完整URL跳转，跳出workcase的路由系统
|
||||
window.location.href = loginUrl
|
||||
return
|
||||
}
|
||||
|
||||
// 如果已登录且动态路由未加载，先加载动态路由
|
||||
if (hasToken && !dynamicRoutesLoaded) {
|
||||
console.log('[Workcase Router] 开始加载动态路由...')
|
||||
console.log('[Workcase Router] LocalStorage 内容:', {
|
||||
loginDomain: localStorage.getItem('loginDomain'),
|
||||
token: localStorage.getItem('token')
|
||||
})
|
||||
|
||||
dynamicRoutesLoaded = true
|
||||
const loaded = loadRoutesFromStorage?.()
|
||||
|
||||
console.log('[Workcase Router] 动态路由加载结果:', loaded)
|
||||
console.log('[Workcase Router] 当前路径:', to.path)
|
||||
console.log('[Workcase Router] 所有路由:', router.getRoutes().map(r => r.path))
|
||||
|
||||
if (loaded) {
|
||||
// 动态路由加载成功，重新导航以匹配新添加的路由
|
||||
console.log('[Workcase Router] 动态路由加载成功，重新导航到:', to.path)
|
||||
next({ ...to, replace: true })
|
||||
return
|
||||
} else {
|
||||
console.warn('[Workcase Router] 动态路由加载失败')
|
||||
}
|
||||
}
|
||||
|
||||
console.log('[Workcase Router] 继续正常导航')
|
||||
next()
|
||||
})
|
||||
|
||||
// 重置动态路由加载状态
|
||||
export function resetDynamicRoutes() {
|
||||
dynamicRoutesLoaded = false
|
||||
}
|
||||
|
||||
export default router
|
||||
Reference in New Issue
Block a user