diff --git a/apps/jingrow/frontend/src/shared/utils/dynamicRoutes.ts b/apps/jingrow/frontend/src/shared/utils/dynamicRoutes.ts index 4e2e3d5..5dccde7 100644 --- a/apps/jingrow/frontend/src/shared/utils/dynamicRoutes.ts +++ b/apps/jingrow/frontend/src/shared/utils/dynamicRoutes.ts @@ -76,23 +76,52 @@ export function registerToolRoute( } // 确定组件路径和路由路径 - // 默认路径:tools/{tool_id}/{tool_id}.vue(每个工具独立文件夹,入口文件与工具ID一致) - const defaultComponentPath = toolWithRoutes.componentPath || `../../views/tools/${toolWithRoutes.id}/${toolWithRoutes.id}.vue` - const finalComponentPath = componentPath || defaultComponentPath - const routePath = toolWithRoutes.routePath || `tools/${toolWithRoutes.id}` + // componentPath 格式:tools/{tool_name}/{tool_name}.vue(相对于 src/views) + // 需要转换为相对于当前文件的路径:../../views/tools/{tool_name}/{tool_name}.vue + let finalComponentPath: string + if (componentPath) { + // 如果 componentPath 已经是相对于 src/views 的路径(如 tools/test_tool/test_tool.vue) + // 需要转换为相对于当前文件的路径 + finalComponentPath = `../../views/${componentPath}` + } else if (toolWithRoutes.componentPath) { + // 如果 tool 对象中有 componentPath + finalComponentPath = `../../views/${toolWithRoutes.componentPath}` + } else { + // 默认路径:使用 toolName 或 id + const toolDirName = toolWithRoutes.toolName || toolWithRoutes.id + finalComponentPath = `../../views/tools/${toolDirName}/${toolDirName}.vue` + } + const routePath = toolWithRoutes.routePath || `tools/${toolWithRoutes.toolName || toolWithRoutes.id}` // 创建路由配置,添加组件加载错误处理 + console.log(`Registering tool route:`, { + routeName: toolWithRoutes.routeName, + routePath, + componentPath: finalComponentPath, + toolName: toolWithRoutes.toolName, + id: toolWithRoutes.id + }) + const route: RouteRecordRaw = { path: routePath, name: toolWithRoutes.routeName, - component: () => import(finalComponentPath).catch((error) => { - console.error(`Failed to load tool component: ${finalComponentPath}`, error) - // 返回一个简单的错误组件 - return { - name: 'ToolComponentError', - template: '

Component Not Found

Failed to load component

' - } - }), + component: () => { + console.log(`Loading tool component from: ${finalComponentPath}`) + return import(finalComponentPath).catch((error) => { + console.error(`Failed to load tool component: ${finalComponentPath}`, error) + // 返回一个简单的错误组件,显示详细错误信息 + return { + name: 'ToolComponentError', + template: ` +
+

Component Not Found

+

Failed to load component: ${finalComponentPath}

+

Error: ${error.message || error}

+
+ ` + } + }) + }, meta: { requiresAuth: true, toolId: toolWithRoutes.id,