跳到主要内容

门户导航设计

在企业级应用中,通常不同应用角色的用户因权限或负责业务范围不同,看到的系统功能入口有所区分。JitAi使用门户实现这种区分,不同应用角色的用户能看到的门户列表不同,每个门户中的导航菜单也不同。

门户选择页面

用户登录系统后即可在门户选择页面看到自己可以访问的门户列表,选择一个门户后即可进入该门户并访问门户中的功能。

应用内置3个门户

JitAi会为每个新创建的应用创建三个内置的门户:开发区门户、管理区门户、默认门户。

开发区门户列表

以开发区门户为例,用户在任意门户中的左上角都可以进行门户切换操作。

开发区门户

开发区门户是给应用开发者使用的,开发者进入开发区门户后即可使用JitAi开发工具进行应用开发工作,例如给不同应用角色配置可访问的门户列表、搭建系统功能、配置应用信息等。

除了开发区门户之外,其它所有门户的导航菜单都是由应用开发者在开发区门户中进行配置的。

管理区门户

拥有应用管理员角色的用户可以进入管理区门户对应用进行管理,比如管理组织架构、组织架构角色及其成员。开发者也可以对管理区门户进行修改。

每个应用在创建时会自动创建一个管理员账号,初始用户名:admin123,初始密码:admin123,建议开发者登录后在个人基本信息中修改。

组织架构角色与应用角色

组织架构角色与用户在企业组织架构中的岗位相对应,而JitAi应用中的的应用角色则代表用户在应用系统中的权限。组织架构角色与应用角色类似但并无严格对照关系,一个普通员工也可以被赋予应用管理员的角色,管理一个应用系统。

默认门户

开发区门户和管理区门户都是应用系统中必须的基础门户,前者用于应用开发,后者用于应用管理。

默认门户是给普通用户使用的,他们既非管理者也非开发者,只是使用开发好的应用功能在自己权限范围内开展日常工作。

3种门户类型

新建门户

新建门户时,开发者需要选择门户类型。JitAi提供了三种门户类型:标准门户、SSR门户、空白门户。

标准门户

标准门户是最为常用的门户类型,内置了左侧导航、顶部导航、用户信息展示等完整门户组件,同时支持PC端和移动端的响应式适配。

空白门户

空白门户是最小化的门户实现,提供基础的页面容器和路由框架,不包含内置的导航体系,完全由开发者自定义界面结构,适用于高度定制化的应用界面和特殊展示需求。

SSR门户

SSR(Server-Side Rendering,服务端渲染)门户用于提升首屏加载性能和SEO优化,目前支持Markdown文件渲染。

创建门户并配置菜单

开发者在元素树中找到门户节点,点击右侧+按钮,选择标准门户打开新建标准门户弹窗表单。

新建标准门户弹窗表单

开发者输入门户名称后点击确定,即可新建一个标准门户,并进入可视化门户编辑器。

标准门户编辑器

新建/删除/隐藏菜单

新建菜单

开发者按需在门户中新建若干菜单,每个菜单在创建时支持指定名称、图标、图标配色。菜单创建时可以绑定已有的PC以及移动端页面,也可以在创建菜单的同时自动新建页面。

如需删除菜单,可以点击菜单项右侧的删除按钮。

在菜单项右侧还有隐藏按钮,当菜单被隐藏时,用户在访问门户时则看不到被隐藏的菜单入口。

拖拽菜单排序

开发者可以拖拽任意菜单项到目标位置,从而调整菜单项的顺序。

对菜单进行分组

当菜单项较多时,开发者可以创建分组,并将菜单项分类移动到分组中,从而使门户导航结构更加清晰。当然,也可以提前创建好分组,直接在分组下新建菜单。

PC端和移动端菜单页面

创建菜单时如果选择新建页面,平台会自动创建PC端和移动端两种页面,开发者在各自的可视化页面设计器中进行页面开发。

创建菜单时如果选择绑定已有页面,开发者可以指定要绑定的PC端以及移动端页面。

新建菜单并绑定已有页面

展开菜单项右侧的更多按钮,开发者可以进行PC端和移动端页面的快速同步,也可以对将页面从菜单中移除。

门户菜单项-更多

若菜单未开启移动端页面,可以点击开启移动端页面按钮进行开启。

使用页面变量赋值控制页面逻辑

同一个页面可能会被不同的门户菜单使用,从不同门户菜单访问时,页面需要展示不同的内容/执行不同的逻辑,此时可以利用页面变量赋值实现。

门户菜单页面变量赋值

开发者可以展开菜单项右侧的更多按钮,点击页面变量赋值按钮,在弹窗中为页面变量赋值。

页面变量赋值的前提

页面开发者在页面中声明了页面变量,页面没有声明变量时则无法进行页面变量赋值。

重写菜单页面

门户也可以从被继承应用中继承,但并不是门户中所有菜单的页面都符合当前应用需求,开发者可以重写门户中的菜单页面。

重写菜单

点击菜单项右侧的重写按钮,打开重写菜单的弹窗,开发者可以给页面重命名、可以选择新建页面或直接绑定已有页面。

门户布局设计

门户布局设计

设置左侧/顶部导航

开发者可以修改导航栏的显示位置,支持左侧导航、顶部导航。

门户左侧导航

以上是设置为左侧导航后的效果,所有导航菜单显示在系统界面的左侧。

门户顶部导航

以上是设置为顶部导航后的效果,所有导航菜单显示在系统界面的顶部。

多标签页

开发者可以启用或禁用多标签页浏览模式。

门户导航多标签页

开启多标签页时,每一个被访问的菜单页面都会出现在标签页列表中,用户可以点击标签页切换页面。

禁用多标签页

禁用多标签页时,页面不会显示标签页列表,用户只能在导航菜单中切换页面。

当用户开启了“标签聚焦时是否刷新页面”选项时,当用户点击标签页时,页面会自动刷新,反之则不会刷新。

是否显示在门户切换列表中

当开发者开启了”不在门户切换菜单中显示“选项时,用户在门户左上角的门户切换菜单中看不到该门户。

设置在门户列表中的顺序

当应用包含多个门户时,开发者可以通过设置顺序来调整门户在门户切换菜单中的显示顺序。

启用或关闭常用功能入口

门户中的管理功能

发起申请/待办/消息中心入口

当开发者开启了”发起申请/待办/消息中心入口“选项时,用户在访问门户时可以看到发起申请、待办、消息中心入口,否则看不到。

通讯录/个人中心入口

当开发者开启了”通讯录/个人中心入口“选项时,用户在访问门户时可以看到通讯录、个人中心入口,否则看不到。

在门户中集成AI助理

JitAi支持在门户中直接集成AI助理,用户在访问门户时可以与AI助理进行交互。

门户集成AI助理

开发者在门户配置界面中点击AI助理页签,在配置界面中打开开关并选择一个AI助理,即可在门户中集成AI助理。

AI助理在门户中的效果

当用户访问开启了AI助理的门户时,可以在导航菜单中的顶部看到”AI助理“入口,点击即可打开AI助理对话框并与其对话。

关于AI助理的详细开发和使用,请阅读AI助理相关文档。