VTJ.PRO 在线应用开发平台的工作台与后台管理视图

踩着两条虫
0 阅读4分钟

工作台与后台管理视图

VTJ.PRO 前端主要分为两个功能区：工作台，作为开发者和创作者的专属工作空间；以及后台管理面板，提供系统级的治理和资源管理。这两部分均使用 Vue 3 构建，并集成在统一的路由系统中。

导航与路由结构

应用使用在源码中定义的层级路由结构。Workbench 和 Admin 视图被视为独立的布局，并包含嵌套的子路由。

路由配置

路由在 frontend/src/router/index.ts 中初始化。工作台是认证用户的默认着陆区，而后台路由则受基于角色的访问控制（RBAC）保护。

工作台路由：

  • /workbench/apps：管理低代码应用。
  • /workbench/templates：管理可复用的项目模板。
  • /workbench/collaborators：团队及协作设置。
  • /workbench/orders：交易与订阅历史。
  • /workbench/settings：个人用户资料和偏好设置。

后台路由：

  • /admin/analysis：系统使用情况仪表盘。
  • /admin/users：用户管理（增删改查）。
  • /admin/roles：基于角色的访问控制（RBAC）角色定义。
  • /admin/permissions：精细化权限映射。
  • /admin/llms：AI 服务商配置（如 OpenAI 等）。
  • /admin/dictionaries：系统级常量与字典。

系统导航映射

下图展示了从界面导航到底层 Vue 组件和 API 服务的映射关系。

UI 到代码实体的映射

flowchart TD
    subgraph UI Space Navigation
        NavW[Workbench Layout]
        NavA[Admin Layout]
    end

    subgraph Code Entity Space Vue Components
        W_View[Workbench.vue]
        A_View[Admin.vue]
        AppList[apps.vue]
        UserList[users.vue]
        LLMConfig[llms.vue]
    end

    subgraph Data Layer API Clients
        AppService[AppService.ts]
        UserService[UserService.ts]
        LLMService[LLMService.ts]
    end

    NavW --> W_View
    NavA --> A_View
    W_View --> AppList
    A_View --> UserList
    A_View --> LLMConfig
    AppList --> AppService
    UserList --> UserService
    LLMConfig --> LLMService

工作台实现

工作台是低代码开发生命周期的核心枢纽。它使用 Workbench 布局组件，该组件提供了侧边栏导航和子视图的内容区域。

主要工作台模块

模块组件路径用途
我的应用views/workbench/apps.vue对低代码项目进行增删改查操作，并可链接到 IDE/编辑器。
我的模板views/workbench/templates.vue管理可用于初始化新应用的自定义模板。
协作者views/workbench/collaborators.vue管理其他用户对项目的访问权限。
设置views/workbench/settings.vue用户特定的配置和安全设置。

数据流：应用管理

当用户查看其应用列表时，apps.vue 组件会与 AppService 交互，从后端的 LowcodeAppModule 获取数据。

  1. 初始化：组件调用服务中的 getList 方法。
  2. 状态管理：数据是响应式的，并绑定到 UI 的网格/列表视图。
  3. 操作：创建新应用会触发一个模态框，该模态框会向后端发送 POST 请求，并携带所选模板的 ID。

后台管理面板实现

后台管理面板为平台的核心基础设施提供了管理界面。通常只有拥有 ADMIN 角色的用户才能访问。

管理子模块

用户与访问控制（基于角色的访问控制）

通过 users.vue、roles.vue 和 permissions.vue 进行管理。这些视图与后端的 core 模块（UserModule、RoleModule）交互，以管理系统的安全策略。

  • 用户：查看登录历史、重置密码、分配角色。
  • 权限：将特定的 API 端点或 UI 功能映射到权限键。
AI 与大型语言模型配置

llms.vue 视图对于 VTJ.PRO 的 AI 驱动功能至关重要。它允许管理员：

  • 配置大型语言模型服务商（如 OpenAI、DeepSeek）的 API 密钥和基础 URL。
  • 定义模型用途（代码生成模型 vs. 多模态模型）。
  • 为平台的 AI 代理启用/禁用特定模型。
系统字典与报表
  • 字典：管理平台各处下拉列表中使用的静态数据。
  • 分析：可视化系统指标、活跃用户和资源消耗情况。

后台数据编排

flowchart TD
    subgraph Admin Frontend
        AdminUI[Admin Layout]
        LLMUI[llms.vue]
        RoleUI[roles.vue]
    end

    subgraph Backend Core Services
        LLMService[LLMModelService]
        RBACService[RoleService]
    end

    subgraph Database Entities
        LLMTable[llm_model]
        RoleTable[role]
    end

    AdminUI --> LLMUI
    AdminUI --> RoleUI
    LLMUI -- Fetch/Update --> LLMService
    RoleUI -- Assign --> RBACService
    LLMService --> LLMTable
    RBACService --> RoleTable

共享 UI 组件与布局

两个视图都利用 @vtj/ui 库中的通用组件（如果已集成）或本地的共享组件，以保持视觉风格一致。

  • 布局容器：Workbench 和 Admin 都使用了相似的侧边栏加顶栏结构，但导航菜单不同。
  • 基础 CRUD 模式：两大部分中的多数视图都遵循一个标准模式：
    1. 顶部的搜索/筛选栏。
    2. 中央的数据表格（网格）。
    3. 底部的分页控件。
    4. 用于创建/更新操作的对话框/模态框。

导航逻辑

导航菜单通常根据路由配置或用户权限动态生成。侧边栏组件会遍历当前激活的顶级路由（/workbench 或 /admin）的子路由来渲染菜单项。

参考资料

avatar
文章
阅读
粉丝