【插件分享】 让 NocoBase v2 的表单多一条「区块导航栏」

效果

  • 页面标签行下方多一条区块导航栏:自动读取页面里所有「分割线」,按从上到下的顺序生成导航块,序号自动编号

  • 点任意导航块,页面滚动到对应的分割线;当前所在区块自动高亮(主色文字 + 淡底序号 + 底部指示条),滚到哪、高亮跟到哪

  • 左侧固定一个 「☰ 导航」标识,一眼能看出这是一行导航,它不跟着导航块左右滚

  • 导航块放不下时右缘渐隐提示,轨道可以横向滚动;导航栏本身不换行、不撑高页面

  • 对话框 / 抽屉里的表单也能用:内容超过一屏时,对话框内容区自动收敛为一屏高、内部滚动,导航栏始终钉在顶部点得到(不会"越往下拉、导航栏越跑出屏幕")

  • 不需要的页面可以单独关掉:右上角「⋯ → 编辑页面」弹窗里多了一个「启用导航栏」开关,默认开启,关掉只影响当前页面

  • 颜色全部走 NocoBase 的主题变量,主题编辑器 / 暗色模式自动跟随,不用额外配置

  • 纯前端插件:不改 schema、不改表单结构、不写数据库,禁用即恢复


兼容性 & 安装

  • 仅适配 v2 页面,legacy 页面不支持(v1 的模型和表单结构差异太大,不打算适配)

  • 兼容 NocoBase 2.3.0-beta.5 及以上externalVersion.js2.3.x 声明,后台依赖检查可正常通过)

  • 与其他前端插件可共存(本机同时启用几个自研插件,实测无冲突)

  • License:Apache-2.0

  • 安装:插件管理页上传 tgz,或者把包放进 storage/plugins/ 后启用;装完硬刷新一下浏览器(Ctrl / Cmd + Shift + R),再打开任意 v2 表单页即可看到

  • 只需要关掉某一个页面:右上角「⋯ → 编辑页面 → 启用导航栏」关闭,设置只作用于该页面

已知限制

  • 导航块平铺展示,暂时没有二级缩进 —— 分组下面再套分组不会嵌套显示

  • 导航块的名字直接取分割线本身的文字,暂不支持自定义名称

  • 页面里没有分割线时不会显示导航栏(没有可导航的对象)

  • 「启用导航栏」是按页面存的配置,不区分角色和用户

  • 导航栏是纯前端视觉层的,不改变表单项的显示/隐藏逻辑;如果同时用了折叠类插件,折叠后隐藏的区块仍会在导航栏里保留一个入口

my-project-plugin-form-navbar-1.2.0.tgz.zip (10.1 KB)

:wave:感谢大佬分享

欢迎提交 PR 到 GitHub - nocobase/awesome-nocobase: A curated list of awesome NocoBase plugins and resources. · GitHub

1 Like

创意很好 :+1: