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

工作台与后台管理视图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/llmsAI 服务商配置如 OpenAI 等。/admin/dictionaries系统级常量与字典。系统导航映射下图展示了从界面导航到底层 Vue 组件和 API 服务的映射关系。UI 到代码实体的映射工作台实现工作台是低代码开发生命周期的核心枢纽。它使用Workbench布局组件该组件提供了侧边栏导航和子视图的内容区域。主要工作台模块模块组件路径用途我的应用views/workbench/apps.vue对低代码项目进行增删改查操作并可链接到 IDE/编辑器。我的模板views/workbench/templates.vue管理可用于初始化新应用的自定义模板。协作者views/workbench/collaborators.vue管理其他用户对项目的访问权限。设置views/workbench/settings.vue用户特定的配置和安全设置。数据流应用管理当用户查看其应用列表时apps.vue组件会与AppService交互从后端的LowcodeAppModule获取数据。初始化组件调用服务中的getList方法。状态管理数据是响应式的并绑定到 UI 的网格/列表视图。操作创建新应用会触发一个模态框该模态框会向后端发送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 代理启用/禁用特定模型。系统字典与报表字典管理平台各处下拉列表中使用的静态数据。分析可视化系统指标、活跃用户和资源消耗情况。后台数据编排共享 UI 组件与布局两个视图都利用vtj/ui库中的通用组件如果已集成或本地的共享组件以保持视觉风格一致。布局容器Workbench和Admin都使用了相似的侧边栏加顶栏结构但导航菜单不同。基础 CRUD 模式两大部分中的多数视图都遵循一个标准模式顶部的搜索/筛选栏。中央的数据表格网格。底部的分页控件。用于创建/更新操作的对话框/模态框。导航逻辑导航菜单通常根据路由配置或用户权限动态生成。侧边栏组件会遍历当前激活的顶级路由/workbench或/admin的子路由来渲染菜单项。参考资料官网文档https://vtj.pro/在线平台https://app.vtj.pro/开源仓库https://gitee.com/newgateway/vtj