前端架构
VTJ.PRO 前端是一个使用 TypeScript 构建的现代 Vue 3 应用程序，采用模块化架构设计，旨在支持低代码开发和行政管理。它是平台低代码引擎的主要界面，提供了用于应用程序创建的工作台和用于系统治理的管理面板。
应用入口与生命周期
应用程序入口点位于 frontend/src/main.ts，它在挂载 Vue 实例之前协调核心服务的初始化。启动序列包括设置 API 客户端、集成 @vtj/renderer 提供程序以及配置路由系统。
初始化序列：
- 服务创建 ：
createService工具初始化基于 Axios 的 API 客户端。 - 提供程序设置 ：调用
@vtj/renderer中的createProvider来管理低代码运行时上下文。 - 认证集成 ：初始化
Access系统，通过AUTH_CODE处理静默登录和权限验证。 - 挂载：所有异步提供程序就绪后，Vue 应用被挂载到 DOM。
应用引导图
sequenceDiagram
participant index.html
participant main.ts
participant createService
participant createProvider
participant Access (Auth)
participant Vue Instance
index.html->>main.ts: 加载模块
main.ts->>createService: 初始化 API 客户端
main.ts->>createProvider: 初始化 @vtj/renderer
main.ts->>Access (Auth): 检查认证 / 静默登录
Access (Auth)-->>main.ts: 认证就绪
main.ts->>Vue Instance: app.use(router).mount(...)
路由与布局
前端分为两个主要功能域，每个域通过特定的路由配置和布局组件进行管理。
| 域 | 目的 | 关键布局 |
|---|---|---|
| 工作台 | 低代码应用管理、模板和项目工作区 | 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集成的技术深入探讨。
参考资料
- 官方文档：vtj.pro/
- 在线平台：app.vtj.pro/
- 开源仓库：gitee.com/newgateway/...