VTJ.PRO 在线应用开发平台前端架构

前端架构

VTJ.PRO 前端是一个使用 TypeScript 构建的现代 Vue 3 应用程序，采用模块化架构设计，旨在支持低代码开发和行政管理。它是平台低代码引擎的主要界面，提供了用于应用程序创建的工作台和用于系统治理的管理面板。

应用入口与生命周期

应用程序入口点位于 frontend/src/main.ts，它在挂载 Vue 实例之前协调核心服务的初始化。启动序列包括设置 API 客户端、集成 @vtj/renderer 提供程序以及配置路由系统。

初始化序列：

1. 服务创建：createService 工具初始化基于 Axios 的 API 客户端。
2. 提供程序设置：调用 @vtj/renderer 中的 createProvider 来管理低代码运行时上下文。
3. 认证集成：初始化 Access 系统，通过 AUTH_CODE 处理静默登录和权限验证。
4. 挂载：所有异步提供程序就绪后，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(...)

路由与布局

前端分为两个主要功能域，每个域通过特定的路由配置和布局组件进行管理。

路由由 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/…