前端架构VTJ.PRO 前端是一个使用 TypeScript 构建的现代 Vue 3 应用程序采用模块化架构设计旨在支持低代码开发和行政管理。它是平台低代码引擎的主要界面提供了用于应用程序创建的工作台和用于系统治理的管理面板。应用入口与生命周期应用程序入口点位于frontend/src/main.ts它在挂载 Vue 实例之前协调核心服务的初始化。启动序列包括设置 API 客户端、集成vtj/renderer提供程序以及配置路由系统。初始化序列服务创建createService工具初始化基于 Axios 的 API 客户端。提供程序设置调用vtj/renderer中的createProvider来管理低代码运行时上下文。认证集成初始化Access系统通过AUTH_CODE处理静默登录和权限验证。挂载所有异步提供程序就绪后Vue 应用被挂载到 DOM。应用引导图路由与布局前端分为两个主要功能域每个域通过特定的路由配置和布局组件进行管理。域目的关键布局工作台低代码应用管理、模板和项目工作区WorkbenchLayout管理面板系统管理用户、角色、LLM 模型和日志AdminLayout路由由vue-router处理并实现了路由守卫以确保用户在访问受保护的视图之前已通过身份验证。有关这些域中特定视图的详细信息请参阅工作台与管理面板视图。多平台运行时架构VTJ.PRO 通过位于frontend/src/platform的统一运行时抽象层支持多种目标环境Web、H5 和 UniApp。该层利用vtj/renderer来解释 DSL领域特定语言并动态渲染组件。平台集成图有关平台如何处理不同设备目标和本地服务的详细信息请参阅多平台运行时Web、H5、UniApp。API 客户端与共享工具前端通过结构化的 API 层与 NestJS 后端进行交互。API 客户端使用 Axios 构建createService函数处理请求/响应拦截器包括自动令牌注入和对 401 未授权响应的错误处理。Hooks共享逻辑封装在 Vue 组合式 API Hooks 中例如用于权限检查的useAccess用于全局状态的useApp。访问控制Access模块与后端 RBAC基于角色的访问控制系统集成根据用户权限控制 UI 可见性和路由访问。子页面工作台与管理面板视图— UI 部分、导航和特定管理视图的详细分解。多平台运行时Web、H5、UniApp— 平台抽象和vtj/renderer集成的技术深入探讨。参考资料官方文档https://vtj.pro/在线平台https://app.vtj.pro/开源仓库https://gitee.com/newgateway/vtj