@ibiz-template/web-plugin-resources

新一代前端 web端 插件案例库，用于指导 AI 书写 ibiz 前端插件。

本仓库收录了 ibiz 平台前端 web 端各类扩展插件的实现案例。每个插件都是一个独立可发布的 npm 包，遵循统一的 Provider + Controller 架构。AI 可参照本仓库已有案例，按本文档的索引定位最接近的参考实现。

目录

• 项目简介
• 目录结构总览
• 核心架构：Provider + Controller 模式
• 插件索引
• 单插件 README.md 规范

项目简介

• 定位：ibiz 前端 web 插件案例库，每个案例都是可直接参考的工程化脚手架
• 技术栈：Vue3 + TypeScript + Vite + @ibiz-template/* 系列运行时包
• 仓库组成：根目录仅作项目描述，所有插件位于 resources/{分类}/{插件名}/
• 运行时版本：当前对齐 @ibiz-template/*@^0.7.40，@ibiz/model-core@^0.1.81

目录结构总览

根目录下只有 resources/（插件案例）与 package.json（仅作项目描述，无构建脚本、无依赖）。

每个插件遵循统一目录结构（以 resources/chart_render/3d-bar-chart/ 为基准）：

{plugin-name}/
├── .eslintrc.cjs              # ESLint 配置
├── CHANGELOG.md               # 更新日志
├── README.md                  # 单插件文档（含截图与平台配置 JSON）
├── package.json               # 包配置
├── public/assets/images/      # 配置图
│   └── config.png
├── src/
│   ├── index.ts               # 入口：导出 install，调用 registerXxxProvider
│   ├── {name}.provider.ts     # 适配器：声明 component，可选 createController
│   ├── {name}.controller.ts   # 控制器：继承基类，重写生命周期（可选）
│   ├── {name}.tsx             # Vue3 组件（自定义部件类必需）
│   ├── {name}.service.ts      # 服务层（可选）
│   └── {name}.util.ts         # 工具函数（可选）
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

核心架构：Provider + Controller 模式

ibiz 前端插件由三件套组成：入口 index.ts + Provider + Controller。

1. 入口 index.ts

导出带 install(app) 的默认对象，在 install 内调用框架的 registerXxxProvider(key, factory) 把 Provider 注册到 ibiz 运行时。

• 注册 key：格式为 {CATEGORY}_{PLUGIN_TAG}，必须与 ibiz 平台模型中插件配置的 plugintag 字段完全一致（大小写敏感）。多数案例为全大写下划线（如 CHART_RENDER_THREE_BAR），但也有混合大小写的特例（如 EDITOR_CUSTOMSTYLE_CronEditor），以平台配置为准。
• 两种写法：
  • 纯 Provider 模式：复用框架内置组件时，install() 内只调 registerControlProvider。参考 resources/chart_render/3d-bar-chart/src/index.ts
  • 带组件安装模式：自定义 Vue 组件时，用 withInstall 包装组件，install 内同时 app.component() 注册组件并 registerXxxProvider。参考 resources/custom/odoo-search-bar/src/index.ts

2. Provider {name}.provider.ts

实现框架对应接口，核心职责：

• 声明 component 字段：指向已注册的 Vue 组件名。复用框架组件时填 'IBizChartControl'、'IBizGridControl' 等内置名；自定义组件时填自己 app.component(name, comp) 注册的名字。
• 可选实现 createController：返回自定义 Controller 实例。简单插件可省略，由框架创建默认 Controller。

3. Controller {name}.controller.ts（可选）

继承框架对应基类，重写生命周期方法实现业务逻辑：

• onCreated()：模型加载后、视图渲染前。常用于读取 this.controlParams（部件参数）、初始化 service、监听模型事件
• onMounted()：视图挂载后。常用于发起数据加载、绑定 DOM 事件
• onDestroyed()：销毁前。清理定时器、解绑事件
• 通过 this.state 驱动视图更新（响应式）

注册函数与 Provider 接口一一对应（如 registerControlProvider → IControlProvider，registerPanelItemProvider → IPanelItemProvider），下文索引表不再单列 Provider 接口列。

插件索引

resources/ 下共 19 个分类目录，每个分类对应 ibiz 平台的一种扩展点。AI 拿到需求时，先按「分类」定位扩展点，再按「功能描述」和「关键技术」找最接近的案例参考。

| 分类 | 案例 | 功能描述 | 注册函数 | Controller 基类 | 关键技术 | |---|---|---|---|---|---| | chart_render | 3D柱状图 | ECharts 扩展实现 3D 柱状图 | registerControlProvider | ChartController | echarts 自定义渲染 | | custom | odoo搜索栏 | 下拉框搜索栏，支持过滤/分组/收藏 | registerControlProvider | ControlController | 过滤、分组、收藏 | | dataview_render | odoo泳道看板 | 看板增强，呈现人员与活动关系 | registerControlProvider | KanbanController | 数据分组、泳道展示 | | editform_render | 编辑表单数据对比 | 编辑表单实现数据版本差异对比 | registerControlProvider | EditFormController | 数据对比、版本差异 | | grid_render | LuckySheet表格 | 表格集成 LuckySheet 在线编辑 | registerControlProvider | — | LuckySheet、数据编辑 | | grid_colrender | 表格编辑列 | 树表格列 popover 展示编辑列与行为 | registerGridColumnProvider | GridColumnController | popover、表格编辑 | | list_render | 锚点列表 | 列表实现左右结构分组导航 | registerControlProvider | ListController | 分组导航、TSX 组件 | | searchbar_render | 卡片搜索栏 | 自定义搜索栏内容绘制 | registerControlProvider | SearchBarController | 自定义渲染、TSX 组件 | | searchform_render | 合并参数搜索表单 | 重写搜索方法合并公共与视图参数 | registerControlProvider | SearchFormController | 参数合并、表单校验 | | toolbar_render | 动态类型工具栏 | 工具栏动态绘制界面行为组 | registerControlProvider | ToolbarController | 动态渲染、行为组 | | tree_render | 分组树 | 树部件实现节点增删改自定义 | registerControlProvider | TreeController | 树节点操作、拖拽 | | view_custom | 共享校验页面 | 视图实现分享链接权限校验 | registerViewProvider | ViewController | 分享校验、密码验证 | | form_usercontrol | 看板快捷操作 | 面板项按钮 popover 展示行为组 | registerPanelItemProvider | PanelItemController | popover、行为组 | | toolbar_item | 显示模式工具栏项 | 切换表格显示模式，本地存储状态 | registerPanelItemProvider | PanelItemController | 模式切换、本地存储 | | editor_customstyle | cron表达式编辑器 | 多行输入框提供 Cron 表达式编辑 | registerEditorProvider | EditorController | Cron 解析、编辑器 | | demethod | 评审内容排序 | 实体行为数据集按 identifier 排序 | registerDEMethodProvider | — | 数据排序 | | deuiaction | 文件下载 | 界面行为点击按钮下载指定文件 | registerUIActionProvider | — | 文件下载 | | global_plugin | 乔伊自定义插件集 | 聚合高级搜索、附件查看等多类型扩展 | 多种（按子模块） | 多种 | 高级搜索、文件预览 | | theme_plugin | 乔伊自定义样式 | 自定义界面主题，全量样式配置 | ibiz.util.layoutPanel.register | — | CSS 变量、主题定制 |

特别说明：

• global_plugin 不是单一分类的控件扩展，而是在一个包内聚合多个子插件（grid/editor/panel 等），按子模块类型分别注册。开发时参考 qiaoyi_custom_plugins 的入口组织方式。
• theme_plugin 通过 ibiz.util.layoutPanel.register 注入布局面板样式，不走标准 Provider 注册流程。开发时参考 qiaoyi_custom_styles。

单插件 README.md 规范

每个插件自己的 README 应包含：标题 + 所属分类说明 + 原理/功能 + 输入参数表格 + 附录（平台模型导入 JSON，含 plugintype / rtobjectrepo / codename / plugintag / rtobjectname / pssyspfpluginname）。