• 简体中文

      • 插件开发速查表

      写插件的时候经常会想"这个东西到底该写在哪个文件、调哪个 API"。这张速查表帮你快速定位。

      插件目录结构

      通过 yarn pm create @my-project/plugin-name 创建插件，会自动生成以下目录结构。不要手动创建目录，避免遗漏注册步骤导致插件不生效。详见 编写第一个插件。

      plugin-name/
├── src/
│   ├── client-v2/              # 客户端代码（v2）
│   │   ├── plugin.tsx          # 客户端插件入口
│   │   ├── locale.ts           # useT / tExpr 翻译 hook
│   │   ├── models/             # FlowModel（区块、字段、操作）
│   │   └── pages/              # 页面组件
│   ├── client/                 # 客户端代码（v1，兼容）
│   │   ├── plugin.tsx
│   │   ├── locale.ts
│   │   ├── models/
│   │   └── pages/
│   ├── server/                 # 服务端代码
│   │   ├── plugin.ts           # 服务端插件入口
│   │   └── collections/        # 数据表定义
│   └── locale/                 # 多语言翻译文件
│       ├── zh-CN.json
│       └── en-US.json
├── client-v2.js                # 根目录入口（构建产物指向）
├── client-v2.d.ts
├── client.js
├── client.d.ts
├── server.js
├── server.d.ts
└── package.json

      客户端：我想做什么 → 怎么写

      我想做什么写在哪个文件调什么 API文档
      注册一个页面路由plugin.tsx 的 load()this.router.add()Router
      注册一个插件设置页plugin.tsx 的 load()pluginSettingsManager.addMenuItem() + addPageTabItem()Router
      注册一个自定义区块plugin.tsx 的 load()this.flowEngine.registerModelLoaders()FlowEngine → 区块扩展
      注册一个自定义字段plugin.tsx 的 load()this.flowEngine.registerModelLoaders()FlowEngine → 字段扩展
      注册一个自定义操作plugin.tsx 的 load()this.flowEngine.registerModelLoaders()FlowEngine → 操作扩展
      让内部表出现在区块的数据表选择中plugin.tsx 的 load()mainDS.addCollection()Collections 数据表
      翻译插件的文案locale/zh-CN.json + locale/en-US.json—i18n 国际化

      服务端：我想做什么 → 怎么写

      我想做什么写在哪个文件调什么 API文档
      定义一张数据表server/collections/xxx.tsdefineCollection()Collections 数据表
      扩展已有数据表server/collections/xxx.tsextendCollection()Collections 数据表
      注册自定义接口server/plugin.ts 的 load()this.app.resourceManager.define()ResourceManager
      配置接口权限server/plugin.ts 的 load()this.app.acl.allow()ACL 权限控制
      插件安装时写入初始数据server/plugin.ts 的 install()this.db.getRepository().create()Plugin 插件

      FlowModel 速查

      我想做什么继承什么基类关键 API
      做一个纯展示区块BlockModelrenderComponent() + define()
      做一个绑定数据表的区块（自定义渲染）CollectionBlockModelcreateResource() + renderComponent()
      做一个完整表格区块（在内置表格基础上定制）TableBlockModelfilterCollection() + customModelClasses
      做一个字段展示组件ClickableFieldModelrenderComponent(value) + bindModelToInterface()
      做一个操作按钮ActionModelstatic scene + registerFlow({ on: 'click' })

      翻译方法速查

      场景用什么从哪里导入
      Plugin load() 里this.t('key')Plugin 基类自带
      React 组件里const t = useT(); t('key')locale.ts
      FlowModel 静态定义（define()、registerFlow()）tExpr('key')locale.ts

      常见 API 调用速查

      我想做什么在 Plugin 里在组件里
      发 API 请求this.context.api.request()ctx.api.request()
      获取翻译this.t()useT()
      获取日志this.context.loggerctx.logger
      注册路由this.router.add()—
      页面导航—ctx.router.navigate()
      打开弹窗—ctx.viewer.dialog()

      相关链接