【Jeecg OA 实战】门户设计全新上线，支持 PC 与移动端自适应，提升协同办公效率

你是否遇到过这样的困扰：需要在多个系统间频繁切换处理任务？工作入口分散导致效率低下？JeecgBoot 门户配置功能通过统一的工作入口，整合待办、审批、邮件、会议等核心业务，提供三种门户类型和丰富的组件库，支持 PC/桌面端和移动端的个性化设计，让您在一个页面完成所有工作，真正实现一站式办公。

JeecgBoot 介绍

JeecgBoot 是一款集成 AI 应用的，基于 BPM 流程的低代码平台，旨在帮助开发者快速实现低代码开发和构建、部署个性化的 AI 应用。 前后端分离架构 Ant Design&Vue3，SpringBoot，SpringCloud，Mybatis，Shiro，强大的代码生成器让前后端代码一键生成，无需写任何代码！ 成套 AI 大模型功能: AI 模型、AI 应用、知识库、AI 流程编排、AI 对话等； 引领 AI 低代码开发模式， 帮助 Java 项目解决 80% 的重复工作，让开发更多关注业务，提高效率，同时又不失灵活性！

下载地址：

• Github 地址： https://github.com/jeecgboot/JeecgBoot

• Gitee 地址： https://gitee.com/jeecg/JeecgBoot

门户功能概述

系统默认提供主门户、个人门户、个人门户模版三种门户类型；还可添加新增的门户配置到菜单中。

• 主门户(系统唯一)：只有管理员可以设计，其他用户只能查看，不可修改

• 个人门户模版(系统唯一)：只有拥有菜单权限的角色可编辑设计，其他人员可将自己的个人工作台重置为个人门户模板设计

• 个人门户(用户唯一)：每个用户创建时都会自动生成一个“个人门户”，用户可以自行设计个性化门户

• 默认首页设置：每个用户可以设置自己的默认首页，选择展示主门户或个人门户

一、效果展示

门户提供了统一的工作入口，整合了各类业务功能，提升工作效率。

二、新增门户

在门户设计页面，点击“新增”，输入用户名称及门户类型，即可新建一个新的门户

三、门户设计

新建保存后，即可打开门户设计页面，可设计 PC 及移动端门户

1. 设计界面介绍

进入设计界面后，可以看到以下功能区域：

界面功能说明：

1. 切换设计端：可以切换网页端和移动端的设计模式，分别设计不同端的门户样式

2. 全局样式设置：设置全局样式，支持重置、预览和保存操作

3. 功能组件选择：从右侧选择功能组件，点击"添加"即可添加到门户中

4. 设计区域：中间大部分区域为设计区域，用于拖拽和调整组件布局

2. 添加组件

操作步骤：

1. 鼠标滑动到右侧"选择卡片"区域

2. 展开需要添加的组件

3. 点击"添加"按钮即可添加新的组件到门户中

组件布局调整：

• 拖拽组件可以调整组件在门户中的位置

• 拖拽组件右下角可以调整组件的大小

[info]提示：组件添加后，网页端和移动端均可显示；组件删除时，只会删除当前模式下的组件。

3. 组件配置

选中需要配置的组件后，右侧面板可以设置组件的样式和内容配置。不同组件的配置项和数据来源可能略有差异。

配置项说明： 卡片配置：

• 配置组件标题是否显示

• 设置卡片样式、卡片标题样式

• 设置字体颜色、大小等样式属性

组件配置：

• 配置组件展示的具体内容，有无 tab 展示

• 点击“去设置”添加新闻

• 点击更多可跳转至文章列表页面

• 多 tab 样式效果

四、移动端设计

移动端和网页端的内容设计是一致的，但移动端提供了独立的样式设置和组件顺序调整功能。

设计特点：

• 内容同步：网页端设计后，移动端也会自动同步设计内容

• 独立样式：移动端可自行调整组件显示顺序和样式设置

• 样式隔离：移动端样式设置后，不会影响网页端的显示

• 功能限制：移动端不支持拖拽调整组件的大小

移动端效果

移动端支持切换主门户和个人门户展示，用户可以根据需要选择查看不同的门户。

提示：移动端设计时，建议优先考虑移动设备的屏幕尺寸和操作习惯，确保良好的用户体验。

五、将门户设置为菜单

• 点击图标，弹出弹框

• 可复制菜单 sql 在数据库中执行 sql，添加菜单，将菜单授权即可

六、切换首页

用户可以根据需要切换默认首页，选择展示主门户或个人门户。

操作步骤：

1. 登录系统后，点击右上角头像

2. 选择"切换首页"

3. 选择要设置为默认首页的门户类型

切换后，再次登录时默认首页将展示为切换后的首页。

提示：切换首页设置会保存到用户配置中，下次登录时会自动应用。

七、门户组件说明

系统提供了丰富的门户组件，包括轮播图、新闻动态、系统公告、我的计划、近期邮件、流程提醒、流程中心、知识库、会议、快捷应用入口、文本等，满足不同业务场景的需求。

1. 轮播图

轮播图组件可以在门户中展示图片轮播效果，支持添加外部链接和内部路由。

1.1 轮播图效果

1.2 轮播图配置

外部链接：

• 支持添加 http 或 https 协议的外部链接

• 例如：https://jimureport.com/
  

内部路由：

• 支持添加系统内部的路由菜单

• 例如：/system/notice
  

2. 新闻动态

新闻动态组件用于展示系统内的新闻和文章信息。

数据来源：新闻动态数据来源于"OA 模块" -> "CMS 官网" -> "文章栏目"和"文章管理"

配置说明：

• 选中新闻动态组件，点击"去设置"可选择新闻的数据源

• 无 tab 模式：将所有选中的数据源添加至门户中统一展示

• 有 tab 模式：根据选择的数据源展示为多个 tab 标签页

下图中展示的"新闻动态"、"规章制度"等即为"文章栏目"，选中后对应栏目下的文章即可在门户中展示。

3. 系统公告

系统公告组件用于展示系统通知和公告信息。

功能说明：系统公告展示通知公告和系统消息，可设置具体展示类型或全部展示

4. 我的计划

我的计划组件用于展示和管理个人工作计划。

数据来源：我的计划数据来源于"OA 模块" -> "我的计划"，可在门户中直接创建计划

配置选项：

• 可设置无 tab 和多 tab 模式

• 可设置时间范围筛选

5. 近期邮件

近期邮件组件用于快速查看和管理邮件信息。

数据来源：近期邮件数据来源于"OA 模块" -> "我的邮件"

功能说明：

• 展示最新收到的前 10 条邮件信息

• 点击可查看邮件详细内容

• 支持转发或回复邮件操作

6. 流程提醒

流程提醒组件用于展示流程相关的提醒消息。

功能说明：流程提醒展示流程提醒消息，默认展示前 10 条

7. 流程中心

流程中心组件整合了流程相关的所有功能入口。

默认展示内容：

• 待办：需要处理的流程任务

• 历史流程：已处理的流程记录

• 我的抄送：抄送给我的流程信息

• 我的申请：我发起的流程申请

配置说明：可设置哪些数据在门户中展示

8. 知识库

知识库组件用于展示和管理知识文档。

数据来源：知识库数据来源于"OA 模块" -> "知识库"，默认展示"我的文件"中上传的文件

8.1 知识库管理

在"OA 模块" -> "知识库"中可以管理知识库文件和分类。

8.2 门户知识库组件设置

在门户中配置知识库组件时，可以：

• 设置多个知识库内容展示

• 支持多 tab 模式展示不同知识库

9. 会议

会议组件用于展示和管理会议信息。

数据来源：会议数据来源于"OA 模块" -> "会议管理"，可在门户中直接预约会议

10. 快捷应用入口

快捷应用入口组件用于快速访问常用功能和审批流程。

功能说明：

• 可将 online 表单或表单设计器中与流程关联的审批单，放在门户中，点击后可快速发起流程审批

• 也可将路由菜单添加至应用入口中，实现快速跳转

配置方式：

1. 添加应用：点击"去设置"可添加应用支持添加审批流程和路由菜单

1. 批量添加审批流程：批量添加只可添加审批流程支持 online 表单和表单设计器对接流程的表单

1. 路由菜单添加：可将自定义开发的功能添加至门户中实现快速跳转到自定义功能页面

11. 文本

文本组件用于在门户中展示自定义文本内容。

功能说明：

• 文本组件展示门户中默认展示的内容

• 可设置字体大小、颜色等样式属性

• 适用于展示公告、提示信息等静态内容

提示：合理配置门户组件，可以打造个性化的办公门户，提升工作效率和用户体验。

八、自定义门户组件

参考文档：点击查看