【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% 的重复工作，让开发更多关注业务，提高效率，同时又不失灵活性！

门户功能概述

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

• 主门户(系统唯一)：只有管理员可以设计，其他用户只能查看，不可修改
• 个人门户模版(系统唯一)：只有拥有菜单权限的角色可编辑设计，其他人员可将自己的个人工作台重置为个人门户模板设计
• 个人门户(用户唯一)：每个用户创建时都会自动生成一个“个人门户”，用户可以自行设计个性化门户
• 默认首页设置：每个用户可以设置自己的默认首页，选择展示主门户或个人门户

一、效果展示

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

二、新增门户

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

三、门户设计

新建保存后，即可打开门户设计页面，可设计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. 文本

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

功能说明：

• 文本组件展示门户中默认展示的内容
• 可设置字体大小、颜色等样式属性
• 适用于展示公告、提示信息等静态内容

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

八、自定义门户组件

参考文档：点击查看