# @firecms/collection\_editor 中文文档 规范地址：https://npmcn.com/package/%40firecms/collection_editor/ 版本：3\.5\.2 npm 元数据更新时间：2026-11-10T18:03:02.278Z 中文译文更新时间：2026-11-14T19:36:17.037Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40firecms/collection_editor 原文对照：https://npmcn.com/package/%40firecms/collection_editor/?lang=original 项目主页：https://github.com/firecmsco/firecms#readme 源码仓库：https://github.com/firecmsco/firecms ## 关键信息（来自 npm 元数据） - 包体积（解压后）：4.1 MB，212 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：9 个 - peer 依赖：react \>=18\.3\.1 \|\| \>=19\.0\.0，react-dom \>=18\.3\.1 \|\| \>=19\.0\.0，react-router ^6\.28\.0，react-router-dom ^6\.28\.0 - 首次发布：2023-10-23T18:53:54.980Z - 最新版本发布：2026-11-10T18:03:01.926Z - 近 30 天下载量：5649（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：466（近 12 个月 79 个） ## 中文简介 此插件可直接从 FireCMS 接口创建和管理 Firestore 收藏 。 它增加了一个视觉收藏编辑器,允许您创建,编辑并删除收藏而无需写入代码. ## 安装 ```sh npm install @firecms/collection_editor ``` 也可以使用：`pnpm add @firecms/collection_editor`、`yarn add @firecms/collection_editor`、`bun add @firecms/collection_editor` ## README # FireCMS 收藏编辑器插件 此插件可直接从 FireCMS 接口创建和管理 Firestore 收藏 。 它增加了一个视觉 收藏编辑器,允许您创建、编辑和删除收藏而无需写入代码. ## 安装 ```bash npm install @firecms/collection_editor # or yarn add @firecms/collection_editor ``` 为火基地集成,还安装: ```bash npm install @firecms/collection_editor_firebase # or yarn add @firecms/collection_editor_firebase ``` ## 特征 - 通过视觉界面创建和编辑收藏 - 定义属性、验证和显示选项 - 与团体和分集组织收藏 - 将用户界面定义的收藏与代码定义的收藏合并 - Firestore 中的持久收藏配置 - 收藏编辑操作的控制权限 ## 基本用途 ```tsx import React from "react"; import { FireCMS } from "@firecms/core"; import { useCollectionEditorPlugin } from "@firecms/collection_editor"; import { useFirestoreCollectionsConfigController } from "@firecms/collection_editor_firebase"; export default function App() { // Controller to save collection configs in Firestore const collectionConfigController = useFirestoreCollectionsConfigController({ firebaseApp }); // Initialize the collection editor plugin const collectionEditorPlugin = useCollectionEditorPlugin({ collectionConfigController }); const navigationController = useBuildNavigationController({ // Your other config options plugins: [collectionEditorPlugin] }); return ; } ``` ## 高级配置 您可以用这些选项自定义收藏编辑器行为 : ```tsx const collectionEditorPlugin = useCollectionEditorPlugin({ collectionConfigController, // Required: controller that handles persistence // Define permissions for collection operations configPermissions: ({ user }) => ({ createCollections: user.roles?.includes("admin") ?? false, editCollections: user.roles?.includes("admin") ?? false, deleteCollections: user.roles?.includes("admin") ?? false }), // Prevent these group names from being used reservedGroups: ["admin", "system"], // Optional custom view to add to the editor extraView: { View: MyCustomView, icon: }, // Function to infer collection structure from existing data collectionInference: async ({ path }) => { // Return inferred schema based on data at path }, // Function to get sample data for a collection getData: async (path, parentPaths) => { // Return sample data for the specified path }, // Track collection editor events onAnalyticsEvent: (event, params) => { console.log("Collection editor event:", event, params); }, // Include introduction widget when no collections exist includeIntroView: true }); ``` ## 与定码收藏集合并 您可以将代码定义的集合和UI中创建的集合合并: ```tsx import { mergeCollections } from "@firecms/collection_editor"; const collectionsBuilder = useCallback(() => { // Collections defined in code const codeCollections = [productsCollection, ordersCollection]; // Merge with collections from the editor UI return mergeCollections(codeCollections, collectionConfigController.collections ?? []); }, [collectionConfigController.collections]); const navigationController = useBuildNavigationController({ collections: collectionsBuilder, // Other options }); ``` ## Firestore 配置控制器 坚持在Firestore收集: ```tsx const collectionConfigController = useFirestoreCollectionsConfigController({ firebaseApp, // Optional: specify where to save configs (default: "__FIRECMS/config/collections") configPath: "custom/config/path", // Optional: define permissions for collections permissions: ({ user }) => ({ // Your permissions logic }), // Optional: custom property configurations propertyConfigs: [ // Custom property types ] }); ``` ## 补充说明 - 通过编辑器创建的收藏存储于 Firestore并动态加载 - 用于创建和管理收藏的插件自动添加 UI 元素 - 对于一个完整的解决方案,考虑与数据导入/导出等其他插件并用 ## 相关插件 FireCMS 提供了几个互补插件: - 数据导入: 从 CSV 或 JSON 导入数据到 Firestore 收藏 - 数据导出: 导出收集数据到 CSV 或 JSON 格式 - 数据增强: 为您的收藏使用 AI 生成内容 - 实体历史: 跟踪您的收藏实体的更改 ## 常见问题 ### @firecms/collection\_editor 是什么？ 此插件可直接从 FireCMS 接口创建和管理 Firestore 收藏 。 它增加了一个视觉收藏编辑器,允许您创建,编辑并删除收藏而无需写入代码\. ### 如何安装 @firecms/collection\_editor？ 在项目目录运行 npm install @firecms/collection\_editor，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.3\.1 \|\| \>=19\.0\.0）、react-dom（\>=18\.3\.1 \|\| \>=19\.0\.0）、react-router（^6\.28\.0）、react-router-dom（^6\.28\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @firecms/collection\_editor 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @firecms/collection\_editor 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @firecms/collection\_editor 可以商用吗？ @firecms/collection\_editor 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @firecms/collection\_editor 的下载量有多少？ 根据 npm 官方下载统计，@firecms/collection\_editor 在 2026/10/15 – 2026/11/13 这 30 天内被下载 5,649 次，日均约 188 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @firecms/collection\_editor 还在维护吗？ 最新版本 3\.5\.2 发布于 2026/11/11（4 天前）；至今共发布 466 个版本，其中过去 12 个月发布了 79 个；首次发布于 2023/10/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。