跳到主要内容
版本：Next

跳转组件

1.菜单组件​

菜单组件是用于构建页面导航的核心元素，通过点击菜单项可实现页面或局部内容的切换。它支持多种布局与高度自定义的视觉样式，以满足不同的交互与设计需求。

1.1交互类型​

提供以下三种菜单，可根据布局需要：

  • 水平菜单：沿水平方向排列，常见于页面顶部或底部导航栏。

  • 垂直菜单：沿垂直方向排列，常见于页面侧边栏或左侧导航。

  • 内嵌菜单：一种平铺展示的垂直菜单，通常直接嵌入在侧边栏的内容区域中。

    image-20251115105347058

1.2功能配置​

在此区域，可以定义菜单的结构与跳转逻辑。

image-20251115110646102

菜单结构管理

  • 添加菜单：点击列表右上角的【添加】按钮，可新增一个主菜单。
  • 添加子菜单：点击任意菜单项右侧的 + 操作图标，可为该菜单创建子级菜单。
  • 调整顺序：选中菜单项后，点击列表右上角的【上移】或【下移】按钮，可调整其展示顺序。

跳转目标配置 为每个菜单项指定点击后的跳转行为：

  • 目标：选择点击后内容切换发生的容器。
    • 当前窗口：进行整个页面的跳转切换。
    • 画面容器：在页面内指定的局部区域进行内容切换。使用前，请确保已在页面中放置了对应的【画面容器】组件。
  • 目标画面：指定点击该菜单项后需要载入并显示的具体页面。
  • 快速同步：点击操作图标，可将当前菜单项的【目标】设置快速同步至所有其他菜单项，实现批量配置。

1.3样式配置​

自定义菜单的视觉外观。

  • 菜单外观：自定义菜单整体的背景、边距等样式。
  • 菜单项/子菜单项：分别设置主菜单与子菜单在默认状态下的文字与背景样式。
  • 选中项：设置当前被选中的菜单项的特殊样式，以高亮显示用户所在位置。
  • 悬浮项/子悬浮项：分别设置鼠标悬停在主菜单或子菜单上时触发的样式变化。

除了使用纯色，还可以使用图片背景实现更多高级样式。

image-20230715105819419

官方提供【菜单】套件资源及设计素材图片及套件资源，帮助快速实现系统导航框架设计，可点击【组件箱-应用资源】选择使用。

image-20230715113351783

1.4权限说明​

菜单项默认进行权限校验，系统会检查当前登录用户是否拥有菜单【目标画面】的访问权限。

  • 无权限菜单项默认自动隐藏
  • 可勾选“显示无权限的菜单项”，无权限的菜单项将正常显示，用户点击时会收到“暂无权限”的提示。

注意：如果需要控制菜单【目标画面】的访问权限，请前往【权限管理】模块设置。

2.跳转按钮​

用于关联页面，实现页面点击跳转的效果

image-20230103144148022

配置说明：
a）功能：可自定义菜单项，关联跳转的目标画面
b）权限控制：页面跳转的权限控制（请参考运行模块-权限管理)）。

3.弹窗按钮​

用于关联页面，设置弹出窗口的大小和位置，实现页面点击弹出的效果

image-20230103144710221

配置说明：
1）点击功能-弹窗画面-编辑按钮，关联弹出的页面
2）可自定义弹窗标题、窗口大小
	若未勾选尺寸固定尺寸，窗口大小自适应为目标画面的画布大小；
	若勾选固定尺寸，自定义的宽高生效，目标画面内容超出窗口大小时将出现滚动条；
3）系统限制最多同时存在3个弹出窗口

4.登录控件​

用于关联页面，实现登录页登录成功后跳转至主页面的效果

image-20230103152859774

说明：
1）点击功能-跳转画面-编辑按钮，关联登录成功后跳转切换的目标画面
2）可根据搭建系统的风格，设置输入框、按钮的外观和文本样式
3）登录用户定义，请参考“用户管理”运行模块

5.用户信息​

用于查看当前登录用户信息及登出、设置密码等用户操作。

image-20230625161131200

配置说明：
a）退出登录类型：
- 回到工程首页
- 停留当前页面
- 跳转至目标页面

注意事项​

1）在何页面窗口触发跳转，则对应窗口跳转切换至目标画面
如当前运行主页面为页面A，并弹出页面B，
若在页面A触发跳转，则在运行主窗口跳转切换至目标页面，
若在页面B触发跳转，则弹窗窗口跳转切换至目标页面；
2）若需实现点击按钮后，带对应筛选参数进行页面跳转/弹出，并自动筛选出对应信息的效果，请使用页面进阶-事件动作进行配置，如示例xxx示；