Total.js Flow插件开发实战以Bookmarks插件为例拆解插件架构与权限设计【免费下载链接】flowVisual Programming Interface项目地址: https://gitcode.com/gh_mirrors/flow29/flowTotal.js Flow 是一款基于 FlowStream 的可视化自动化与 IoT 应用平台其插件机制轻量而严谨。本文以内置的 Bookmarks书签插件为例手把手拆解 Flow 插件的目录架构、API 设计与三层权限模型帮助新手快速掌握 Total.js Flow 插件开发的核心套路。 快速上手如何本地运行 Total.js Flow在动手看源码之前先让项目跑起来默认端口8000克隆代码仓库git clone https://gitcode.com/gh_mirrors/flow29/flow安装依赖并启动cd flow npm install npm run start启动后访问http://localhost:8000即可看到 Flow 的可视化设计器界面。项目入口为 index.js核心配置位于 config 文件整体目录职责在 AGENTS.md 中有完整说明。 Bookmarks 插件目录结构一眼看懂插件布局Flow 的插件遵循极简的目录约定整个 Bookmarks 插件只有 4 个源文件文件路径职责plugins/bookmarks/index.js插件入口元信息 全部 API 定义plugins/bookmarks/public/toolbar.html顶部工具栏注入的书签按钮plugins/bookmarks/public/index.html插件主页列表、搜索、分组展示plugins/bookmarks/public/forms/form.html新建/编辑书签的表单弹窗 规律一个index.js声明插件是什么public/下放插件长什么样。打包时由 bundle.sh 自动将其编译为--bundles--/bookmarks.bundle部署产物生成文件勿手改。 插件元信息6 行代码声明一个插件打开plugins/bookmarks/index.js前 6 行就是 Flow 插件的全部户口信息exports.icon ti ti-bookmark; exports.name (Bookmarks); exports.position 6; exports.permissions [{ id: bookmarks, name: Components }]; exports.visible user user.sa || user.permissions.includes(bookmarks); exports.import toolbar.html;逐行拆解icon / name导航栏图标与显示名称()前缀表示支持多语言position插件在侧边导航中的排序位置permissions声明插件专属权限点后续会被自动注册进权限系统visible前端可见性判断——超管user.sa或拥有bookmarks权限的用户才看得到入口import声明插件加载时注入的工具栏页面toolbar.html。框架启动时通过ON(ready)事件初始化数据容器PREF.bookmarks []为后续 API 提供内存存储。⚙️ NEWACTION API 设计Bookmarks 的增删改查Flow 用NEWACTION()宏定义 APIBookmarks 插件共暴露 4 个接口构成一个完整的 CRUD接口名功能特点Bookmarks获取书签列表只读返回PREF.bookmarksBookmarks\|create新建书签自动生成id与dtcreatedBookmarks\|update修改书签按id定位后用COPY()合并Bookmarks\|remove删除书签不存在时返回404以新建为例注意三个设计要点NEWACTION(Bookmarks|create, { route: API ?, input: *name:String, note:String, *url:String, icon:Icon, color:Color, group:String, permissions: bookmarks, user: true, action: function($, model) { model.id UID(); model.dtcreated NOW; PREF.bookmarks.push(model); $.success(); } });声明式输入校验input字段中*号代表必填*name、*url类型如String、Icon、Color由框架自动校验无需手写校验逻辑权限挂载permissions: bookmarks让每个 API 天然受权限保护持久化闭环修改类接口最后调用PREF.save()落盘保证数据不丢。前端页面public/index.html通过exports.tapi(Bookmarks|create, model, ...)调用这些 API列表页还实现了按group分组、搜索过滤searchinputsearch组件等交互。 权限设计拆解从 AUTH() 到插件可见性这是 Bookmarks 插件最值得学习的地方——Flow 的权限是三层防御第一层全局认证谁能登录definitions/auth.js 中的AUTH()钩子拦截所有请求优先支持 OpenPlatform 令牌认证否则校验加密 Cookie 会话DECRYPTREQ解密并比对PREF.user内置IP 黑名单熔断同一 IP 连续 15 次认证失败即封禁且每 15 个服务周期自动清零。第二层权限点注册有什么权限仍在definitions/auth.js中启动时遍历所有插件把插件声明的permissions统一推入平台权限表for (let key in Total.plugins) { let item Total.plugins[key]; if (item.permissions) OpenPlatform.permissions.push.apply(OpenPlatform.permissions, item.permissions); }也就是说Bookmarks 插件只需声明一次{ id: bookmarks, name: Components }平台管理端就会出现这个可分配的权限点——插件与权限系统零耦合集成。第三层API 与 UI 双重校验能不能用API 层每个NEWACTION都带permissions: bookmarks无权限的调用直接被框架拒绝UI 层exports.visible决定导航入口是否显示避免看得到却点不了的糟糕体验。这种前端隐藏入口 后端强制鉴权的双保险是生产级插件权限设计的基本盘。 打包与部署一键编译插件 Bundle开发完成后运行 bundle.sh 即可生成部署包node bundle.sh它会遍历plugins/目录为每个插件生成独立的--bundles--/插件名.bundle含index.js与public/资源同时打包出应用主包--bundles--/app.bundle。Docker 部署时Dockerfile 直接复制这些 bundle 文件实现源码目录 → 部署产物的干净分离。✅ 小结Flow 插件开发的 5 个核心要点入口即声明plugins/插件名/index.js前几行完成元信息与权限声明API 用 NEWACTIONinput声明式校验 permissions权限挂载 PREF.save()持久化UI 放 public/工具栏、主页、表单分离通过tapi调用后端 API权限三层防御全局AUTH()认证 → 插件权限点自动注册 → API 与 UI 双重校验产物勿手改--bundles--/下的 bundle 是bundle.sh的生成物只改源码。照这个模板你只需要复制 Bookmarks 的目录骨架替换index.js中的元信息与NEWACTION定义再编写对应的public/页面就能开发出自己的第一个 Total.js Flow 插件。【免费下载链接】flowVisual Programming Interface项目地址: https://gitcode.com/gh_mirrors/flow29/flow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考