# @eeacms/volto-object-widget 中文文档 规范地址：https://npmcn.com/package/%40eeacms/volto-object-widget/ 版本：9\.1\.1 npm 元数据更新时间：2026-04-28T10:07:12.222Z 中文译文更新时间：2026-11-13T07:55:52.093Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40eeacms/volto-object-widget 原文对照：https://npmcn.com/package/%40eeacms/volto-object-widget/?lang=original 项目主页：https://github.com/eea/volto-object-widget 源码仓库：https://github.com/eea/volto-object-widget ## 关键信息（来自 npm 元数据） - 包体积（解压后）：247 kB，55 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：1 个 - 首次发布：2020-11-09T19:48:34.519Z - 最新版本发布：2026-04-28T10:07:12.049Z - 近 30 天下载量：3333（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：34（近 12 个月 4 个） ## 中文简介 伏尔托对象部件: 伏尔托加载 ## 安装 ```sh npm install @eeacms/volto-object-widget ``` 也可以使用：`pnpm add @eeacms/volto-object-widget`、`yarn add @eeacms/volto-object-widget`、`bun add @eeacms/volto-object-widget` ## README # 伏地物体部件 [![Releases](https://img.shields.io/github/v/release/eea/volto-object-widget)](https://github.com/eea/volto-object-widget/releases) [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-object-widget%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-object-widget/job/master/display/redirect) [![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget) [![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget) [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget) [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget) [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-object-widget%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-object-widget/job/develop/display/redirect) [![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&branch=develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget&branch=develop) [![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&branch=develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget&branch=develop) [![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&branch=develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget&branch=develop) [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-object-widget&branch=develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-object-widget&branch=develop) [沃尔多](https://github.com/plone/volto) 加:各种以Volto为主的部件. ## 特征 此 Volto 附加件提供了多个“ 抽象” 部件, 以允许复杂 由基于图案的表格编辑的信息。 它的中心是 概念 : “ 我们可以通过使用 schema 来创建编辑 JSON 对象的表单 ” , 因此 它现在提供编辑“ JSON 对象列表” 的部件, “映射” JSON对象"和单曲"JSON对象,但我选择了它的"计划. ### 平面对象 ![Flat List object](https://raw.githubusercontent.com/eea/volto-object-widget/master/img/flat-list-widget.png) 此部件允许您通过创建、编辑和编辑来编辑对象列表 删除可用提供对象编辑的示例 `schema` 参数. 列表可用拖放排序 。 您也可以提供一个图案扩展器, 带有签名的函数 `(schema, data) => schema`,将调整,按 它的图谋。 要使用此部件, 在图中设置 `widget` 字段改为 `object_list_inline`。 。 。 . 数据对块的外观: ``` "a55c5053-ba81-4f73-ab29-7cdea74df20f": { "@type": "dataTable", "columns": [ { "@id": "f899ca76-68be-4ded-aa0b-669c04c27309", "column": " PERC_HA_07\n(in %)", "renderer": "progress", "title": "21" }, { "@id": "94315c5a-e031-4b7e-acb2-93887878a252", "column": " PERC_HA_07\n(in %)", "title": "12" } ], } ``` 这个 `columns` 字段,在此情况下,是该字段生成的数据 `FlatListObject`。 。 。 . 这个领域的计划可能看起来像(`ColumnSchema()` 只是生成 另一种适合 `column` 我们的定义 具体使用情况: ``` columns: { title: 'Columns', description: 'Leave empty to show all columns', schema: ColumnSchema(), widget: 'object_list_inline', }, ``` ### 绘图部件 ![Mapping widget](https://raw.githubusercontent.com/eea/volto-object-widget/master/img/mapping-widget.png) 此部件允许编辑对象的属性 。 例如,在 继块数据之后 `row_colors` 值由实例生成 `MappingWidget`。 。 。 . ``` "4430a32a-a266-497b-88e7-72fead5ab718": { "@type": "dottedTableChart", "column_data": "habitat_group", "row_colors": { "Bad": "#ed1834", "F - Heathland, scrub and tundra": "#88c24f", "Good": "#3c8000", "Poor": "#f2a70e", "Unknown": "#8d8d8d" }, "row_data": "assessment", "size_data": "quantity" }, ``` 你需要提供 `options`,该列表为对象列表 `{id, title}` 编辑 `field_props`,这些参数是: 将用来编辑数值。 就我们来说,这个计划的定义 用于编辑上述值的是(注意,选项是空的,我们正在充斥) 在编辑组件中,在将图案传递到窗体之前: ``` row_colors: { title: 'Colors', widget: 'option_mapping', field_props: { widget: 'simple_color', available_colors: settings.available_colors, }, options: [], } ``` 要使用此部件, 在图中设置 `widget` 字段改为 `option_mapping`。 。 。 . ### 按类型分列的对象 ![Object by type](https://raw.githubusercontent.com/eea/volto-object-widget/master/img/object-by-type-widget.png) 通过此部件, 您可以选择将使用的值类型, 从 : 预定义的策略列表。 使用这种部件的策略可以 看起来像: ``` const LinkEditSchema = { title: 'Link', fieldsets: [ { id: 'default', title: 'Default', fields: ['link'], }, ], properties: { link: { title: 'Link', widget: 'object_by_type', schemas: [ { id: 'internal', icon: internalSVG, schema: InternalLinkSchema, }, { id: 'external', icon: externalSVG, schema: ExternalLinkSchema, }, { id: 'email', icon: emailSVG, schema: EmailLinkSchema, }, ], }, }, required: [], }; ``` 要使用此部件, 在图中设置 `widget` 字段改为 `object_by_type`。 。 。 . ## 开始 ### 试用多克来装伏托对象 ``` git clone https://github.com/eea/volto-object-widget.git cd volto-object-widget make make start ``` 转到 http://localhost:3:00 `make start` 现在默认为 Volto 18. 要运行同样的设置 对沃尔多17,使用: ``` VOLTO_VERSION=17 make VOLTO_VERSION=17 make start ``` ### 在您的 Volto 工程中添加 volto- 对象widget 1. 确保你有 [Plone 后端](https://plone.org/download) 在http://localhost:8080/Plone上运行 ```Bash docker compose up backend ``` 2. 启动 Volto 前端 - 如果你已经有伏尔托项目,只需更新 `package.json`数字 : ```JSON "dependencies": { "@eeacms/volto-object-widget": "*" } ``` 财务报告和审定财务报表 `volto.config.js`数字 : ```JavaScript const addons = ['@eeacms/volto-object-widget']; ``` - 如果没有,请按照Plone官方文件对Volto 18+的建议,用 Cookieplone 创建一个: ``` uvx cookieplone project cd project-title ``` 1. 安装或更新依赖关系,然后启动项目 : ``` make install ``` 对于 Cookieplone 项目, 在单独的终端中启动后端和前端 : ``` make backend-start make frontend-start ``` 对于一个遗留下来的Volto 17项目,安装软件包 `yarn` 并像往常一样重新启动前端. 2. 转到 http://localhost:3:00 3. 剪辑愉快! ## 释放 见 [发 言](https://github.com/eea/volto-object-widget/blob/master/RELEASE.md)。 。 。 . ## 如何捐款 见 [发达国家d](https://github.com/eea/volto-object-widget/blob/master/DEVELOP.md)。 。 。 . ## 版权和许可证 原始守则的初始所有人是欧洲环境署. 所有权利保留. 见 [利比里亚](https://github.com/eea/volto-object-widget/blob/master/LICENSE.md) 详细情况. ## 供资 [欧洲环境署(欧盟)](http://eea.europa.eu/) ## 常见问题 ### @eeacms/volto-object-widget 是什么？ 伏尔托对象部件: 伏尔托加载 ### 如何安装 @eeacms/volto-object-widget？ 在项目目录运行 npm install @eeacms/volto-object-widget，或使用 pnpm add / yarn add / bun add。 ### @eeacms/volto-object-widget 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/eeacms\_\_volto-object-widget 是否存在。 ### @eeacms/volto-object-widget 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @eeacms/volto-object-widget 可以商用吗？ @eeacms/volto-object-widget 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @eeacms/volto-object-widget 的下载量有多少？ 根据 npm 官方下载统计，@eeacms/volto-object-widget 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,333 次，日均约 111 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @eeacms/volto-object-widget 还在维护吗？ 最新版本 9\.1\.1 发布于 2026/04/28（6 个月前）；至今共发布 34 个版本，其中过去 12 个月发布了 4 个；首次发布于 2020/11/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。