桌面端布局

在 NocoBase 中,桌面端布局是默认的应用界面。它适合在电脑中完成数据管理、表单录入、业务配置和日常操作,也能在移动端设备中使用。

桌面端布局默认通过 /admin 访问。如果应用配置了独立的访问前缀,实际地址会自动带上对应前缀。

20260715224020

20260715224603

搭建页面

第一步:进入桌面端布局

访问 /admin,进入桌面端布局。通常来说,应用登录成功后也会直接进入这里。

20260715225049

第二步:打开界面配置

点击页面右上角的「界面配置」,进入界面搭建状态。进入后,菜单、页面、区块、字段和操作附近会显示对应的配置入口。

20260715225155_rec_

第三步:创建菜单和页面

你可以在导航区域添加分组、页面或链接,也可以为页面启用标签页。创建页面后,进入页面并添加需要的区块。

页面内容的搭建方式和其他界面一致:先添加区块,再根据业务需要配置字段操作

20260715225316_rec_

第四步:配置页面内容

在页面中添加表格、表单、详情、筛选等区块,然后调整字段、操作和区块之间的排列。所有修改都会直接反映在当前页面中。

20260715225424_rec_

管理路由和菜单

在导航区域添加页面或链接后,相应内容也会出现在路由管理器中;在路由管理器中调整路由,也会同步更新菜单。

桌面端支持以下常用路由:

  • 分组(Group) — 将多个页面和链接组织到同一个导航分组中。
  • 页面(Page) — 打开一个可以继续搭建区块的页面。
  • 链接(Link) — 打开站内地址或外部地址。
  • 标签页 — 在一个页面中组织多个内容标签。

你可以在路由管理器中新增、编辑、删除、显示或隐藏路由。需要集中整理菜单结构时,使用路由管理器会更方便。

20260715225711_rec_

窄屏响应式

桌面端布局可以直接在手机或较窄的浏览器窗口中使用。进入窄屏显示状态后,仍然使用原来的桌面端路由和页面,不会自动切换到移动端布局。

布局变化

导航菜单会进入折叠状态,顶部操作会收进更紧凑的入口。页面的边距和区块间距也会缩小,内容区域会根据移动浏览器的可视高度调整。

窄屏中不提供界面配置。需要修改菜单或页面时,需要回到电脑浏览器中完成搭建。

20260715224603

页面内容的适配

页面中的常用组件也会针对窄屏调整交互方式,使其更易于在手机中使用。比如多列区块会调整为单列,表格可以横向查看超出屏幕的列,分页和操作入口会更加紧凑;选择、日期时间、筛选和子页面等交互也会使用更适合手机的方式。

桌面端响应式和移动端布局

如果只是偶尔通过手机访问,使用桌面端布局的窄屏响应式即可。如果需要独立的底部导航、移动页面和操作流程,可以另外搭建移动端布局

使用建议

  • 主要在电脑中完成的业务,默认使用桌面端布局。
  • 先在宽屏中完成页面搭建,再缩小窗口检查窄屏效果。
  • 页面包含较多表格列或横向操作时,尽量保留必要内容,减少小屏幕中的操作负担。
  • 如果电脑端和移动端的使用流程差异较大,分别搭建两套页面会更清晰。

相关链接

  • UI 布局概述 — 了解桌面端布局和移动端布局的适用场景
  • 移动端布局 — 搭建独立的移动端导航和页面
  • 区块 — 在页面中添加和配置区块
  • 字段 — 配置表格、表单和详情字段
  • 操作 — 配置页面和区块中的操作按钮
  • 路由管理器 — 集中管理桌面端菜单和路由
  • 权限配置 — 控制角色可以访问的桌面端路由