# @bigbinary/neeto-rules-frontend 中文文档 规范地址：https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/ 版本：2\.9\.0 npm 元数据更新时间：2026-11-03T19:16:21.465Z 中文译文更新时间：2026-11-08T02:02:12.588Z 软件包许可：UNLICENSED 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40bigbinary/neeto-rules-frontend 原文对照：https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/?lang=original 项目主页：https://github.com/bigbinary/neeto-rules-nano ## 关键信息（来自 npm 元数据） - 包体积（解压后）：7.9 MB，183 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=22\.13 - 运行依赖：3 个 - peer 依赖：qs 6\.16\.2，url 0\.11\.4，yup 0\.32\.11，antd 5\.22\.1，util ^0\.12\.5，axios 1\.20\.0，dayjs 1\.11\.10，ramda 0\.29\.0，react 18\.3\.1，buffer ^6\.0\.3，formik 2\.4\.6，i18next 22\.5\.1，zustand 4\.4\.2，dompurify 3\.4\.17，js-logger 1\.6\.1，react-dom 18\.3\.1，classnames 2\.5\.1，stream-http 3\.2\.0，tailwindcss 3\.4\.14，lucide-react 0\.577\.0，react-helmet ^6\.1\.0，react-select 5\.6\.0，os-browserify 0\.3\.0，react-i18next 12\.3\.1，vm-browserify 1\.1\.2，@babel/runtime 7\.29\.7，react-toastify 8\.0\.2，tty-browserify 0\.0\.1，path-browserify ^1\.0\.1，https-browserify 1\.0\.0，mixpanel-browser ^2\.45\.0，react-router-dom 5\.3\.3，@hello-pangea/dnd 16\.3\.0，crypto-browserify 3\.12\.1，source-map-loader 4\.0\.1，stream-browserify ^3\.0\.0，@bigbinary/neetoui 8\.8\.3，@honeybadger-io/js 6\.10\.1，@monaco-editor/react ^4\.7\.0，@bigbinary/neeto-cist 1\.0\.17，@honeybadger-io/react 6\.1\.25，@tanstack/react-query 5\.59\.20，@bigbinary/neeto-atoms 1\.1\.2，@bigbinary/neeto-icons 1\.20\.89，@bigbinary/neeto-hotkeys 1\.0\.9，@bigbinary/neeto-molecules 5\.10\.1，@tailwindcss/container-queries ^0\.1\.1，@tanstack/react-query-devtools 5\.59\.20，@bigbinary/neeto-editor-frontend 2\.4\.0，@bigbinary/neeto-commons-frontend 4\.14\.8，@bigbinary/neeto-filters-frontend 4\.7\.0 - 首次发布：2023-01-17T11:33:17.392Z - 最新版本发布：2026-11-03T19:16:21.132Z - 近 30 天下载量：17800（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：259（近 12 个月 110 个） ## 中文简介 一个回波作为新纳米结构,配置,数据等的真理来源. ## 安装 ```sh npm install @bigbinary/neeto-rules-frontend ``` 也可以使用：`pnpm add @bigbinary/neeto-rules-frontend`、`yarn add @bigbinary/neeto-rules-frontend`、`bun add @bigbinary/neeto-rules-frontend` ## README # 需要规则 - 不 这个 `neeto-rules-nano` 便利内部自动化规则的管理 需要申请。 纳米出口 `@bigbinary/neeto-rules-frontend` 国家预防机制 软件包和 `neeto-rules-engine` 铁路发动机. > **改造后判刑建造者(`NeetoRulesBuilder`) (中文(简体) ).** 一种新的自然语言, 周一.com式规则编辑器现在和船一起 `NeetoRulesForm`。 。 融合指南——道具,申报 `schema` 合同, 窗帘如何 有效载荷保障和地标迁移步骤——生命 内 [**`docs/README_REVAMP.md`**](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/README_REVAMP.md)。从那里开始 在新产品中采用构建器. ## 目录 1. [用主机应用程序开发](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-development-with-host-application) - [发动机](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-engine) - [安装](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-installation) - [前端软件包](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-frontend-package) - [安装](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-installation-1) - [发展指示](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-instructions-for-development) - [构成部分](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-components) - [涅盘规则](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-1-neetorules) - [内托规则格式](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-2-neetorulesform) - [Neeto 规则格式的外地组件](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-3-field-components-for-neetorulesform) - [输入字段](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-31-inputfield) - [文本区域](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-32-textareafield) - [选择字段](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-33-selectfield) - [多选择字段](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-34-multiselectfield) - [无线电外地](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-35-radiofield) - [事件条件](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-36-eventconditions) - [条件](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-37-conditions) - [行动](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-38-actions) - [自定义动作组件](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-39-custom-action-component) - [规则审查](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-4-rulepreview) - [常数](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-constants) - [(原始内容存档于2018-09-21) (中文(简体) ). AUTOMATIC RULESQUERY KEY](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-1-automation-rules-query-key) 2. [出版指令](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/#readme-instructions-for-publishing) ## 用主机应用程序开发 ### 发动机 引擎用于管理neto应用程序中的自动化规则功能. #### 安装 1. 将此行添加到您的应用程序的 Gemfile 中 : ```ruby source "NEETO_GEM_SERVER_URL" do # ..existing gems gem "neeto-rules-engine" end ``` 2. 然后执行: ```ruby bundle install ``` 3. 将此行添加到您的应用程序 `config/routes.rb` 文件 : ```ruby mount NeetoRulesEngine::Engine, at: "/neeto_rules" ``` 4. 运行以下命令以复制从引擎到主机的迁移 应用程序 : ```ruby bundle exec rails neeto_rules_engine:install:migrations ``` 5. 添加迁移到数据库 : ```ruby bundle exec rails db:migrate ``` ### 前端软件包 #### 安装 安装最新的 `neetoRules nano` 使用下列命令的软件包: ```shell yarn add @bigbinary/neeto-rules-frontend ``` ### 发展指示 检查 [前端软件包开发指南](https://neeto-engineering.neetokb.com/p/a-d34cb4b0) 用于开发前端软件包的分步指令. ### 构成部分 #### 1\. 联合国. `NeetoRules` 这个 `NeetoRules` 组件用于为自动化规则添加仪表板. ![rules-dashboard](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/images/rules-dashboard.png) #### 道具 1. `breadcrumbs`: Breadcrumbs 为仪表板头. 1. `text`: 面包屑项目文本 2. `link`: 链接到面包屑项目 2. `allowReordering`: 指定用户能否重排自动化规则. (宝莲. 3. `helpPopoverProps`: 为组件添加帮助 popover 。 参考 [帮助Popover 组件 doc](https://neeto-molecules.neeto.com/?path=/docs/helppopover--docs)。 。 。 . 注: `href` 从 `helpLinkProps` 将用来显示链接,当 显示 `NoData` 组件. 4. `rulesTableProps`: 仪表板上桌子的道具: 1. `additionalColumns`: 在表格中添加额外的一栏。 参考 [表格组件 doc](https://neeto-ui.neeto.com/?path=/docs/components-table--docs)。 。 。 . ```jsx const additionalColumns = [ { title: "Operated on", dataIndex: "recentlyModifiedTickets", width: 160, description: "Number of tickets the rule has acted upon in the last 7 days", render: recentlyModifiedTickets => (
{recentlyModifiedTickets}
), }, ]; ``` 2. `moreDropdownItems`: 将降入项数组 表中的更倒放组件 。 参考 [表格 doc 中的更下垂](https://neeto-ui.neeto.com/?path=/docs/components-table--docs)。 。 。 . ```jsx const moreDropdownItems = [ { key: "view-matching-tickets", label: "View matching rules", // onClick callback receives the selected rule onClick: rule => { setSelectedRule(rule); setShowMatchingTickets(true); }, }, ]; ``` 3. `onPreview`: 点击预览时调用回调函数 . ```jsx const onPreview = id => { setRuleId(id); }; ``` 4. `payloadKey`:在有效载荷对象中用于指定目标的密钥. 如果没有提供用途 `rule` 默认. 5. `automationRulesPath`:自动化规则仪表板的路径. 本构成部分考虑采用其他路线: | 路线 | 说明 | | --- | --- | | `{automationRulesPath}/edit` | 规则编辑窗体组件的路径 . | | `{automationRulesPath}/new` | 规则的路径创建窗体组件 . | 6. `automationRulesEndpoint`:自动化规则的终点. 组件将使用以下终点: | 终点 | 行动 | 说明 | | --- | --- | --- | | 获取 `{automationRulesEndpoint}` | `index` | 获取自动化规则列表 。 (同样将被用于平分/过滤) | | 邮政 `{automationRulesEndpoint}/{id}/clone` | `clone` | 以创建自动化规则的克隆. | | 帕齐 `{automationRulesEndpoint}/{id}` | `update` | 以更新自动化规则的现状. | | 迪莱特 `{automationRulesEndpoint}/{id}` | `destroy` | 删除自动化规则. | | 帕齐 `{automationRulesEndpoint}/reorder` | `reorder` | 重订自动化规则. | 7. `updateRule`: 定义规则操作更新方法的对象. - `onSuccess`: 处理更新规则成功回调的对象 . - `callback`: 函数需要成功。 (备选) 8. `deleteRule`: 定义规则操作方法的对象. - `onSuccess`: 处理删除规则成功回调的对象. - `callback`: 函数需要成功。 (备选) 9. `cloneRule`: 定义克隆规则操作方法的对象. - `allowed`: 指定是否允许克隆规则, 默认 `true`。 。 。 . (宝莲 - `onSuccess`: 处理克隆规则成功回调的对象 . - `callback`: 函数需要成功。 (备选) 10. `reoderRules`: 函数需要调用以重排成功 . - `onSuccess`: 处理重排规则成功回调对象 . - `callback`: 函数需要成功。 (备选) 11. `headerProps`:头部组件的道具. 参考 [页眉组件 doc](https://neeto-molecules.neeto.com/?path=/docs/layouts-header--docs)。 。 。 . #### 2\. 联合国. `NeetoRulesForm` ![](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/images/rules-form.png) 这个 `NeetoRulesForm` 组件用于创建和编辑自动化规则. `NeetoRulesForm` 接受在 `initialProps` (单位:千美元)[参考文献](https://github.com/bigbinary/neeto-desk-web/blob/c7ea475e0963cb4fa0831856c9545e1f697ca472/app/javascript/src/components/Automations/Form/constants.js#L43): 1. 文本 2. 长文本 3. 降级 4. 多选择 5. 电台 6. 事件 7. 条件 8. 动作 > **说明:** 这个 `NeetoRulesForm` 组件默认包含三个字段 名称如下: `name`(必须), `description` 财务报告和审定财务报表 `status`。 。 。 . #### 道具 - `data`:表格的初始道具. - `children`:形式字段. - `className`:提供外部班级形成. - `handleSubmit`:处理表单提交函数. - `handleClose`:处理窗体关闭的函数. - `showStatusSwitch`: 指定应显示状态开关还是 没有 没错 `true` 默认. - `statusHelpText`: 要覆盖状态开关旁边显示的帮助文本 . 接受 `{ active, inactive }`。默认自动化规则帮助文本. #### 使用量 ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { InputField, TextareaField, SelectField, Events, Card, Conditions, Actions, } = NeetoRulesForm; {({ formattedValues, values, ...formikBag }) => ( <> )} ; ``` #### 参考资料 1. [网络需要](https://github.com/bigbinary/neeto-cal-web/blob/7ef6806ecc47e01d5cdb0252878e4dc442d12dd0/app/javascript/src/components/commons/MeetingsBuilder/Configure/AutomationRules/Form/index.jsx#L11) 2. [需要桌面网络](https://github.com/bigbinary/neeto-desk-web/blob/edc9bad9305d55c18a67de3931cbe2633fe3710f/app/javascript/src/components/Automations/Form/index.jsx#L188) 3. [需要规划网络](https://github.com/bigbinary/neeto-planner-web/blob/73bb48e1721bb8ae3c71dbabe7b3b99c443a3f6e/app/javascript/src/components/Settings/Automations/Automation/Form/index.jsx#L39) #### 3\. 外地构成部分 `NeetoRulesForm` Neeto RulesForm提供字段组件来创建自动化规则表. #### 参考资料 1. [网络需要](https://github.com/bigbinary/neeto-cal-web/blob/7ef6806ecc47e01d5cdb0252878e4dc442d12dd0/app/javascript/src/components/commons/MeetingsBuilder/Configure/AutomationRules/Form/index.jsx#L8) 2. [需要桌面网络](https://github.com/bigbinary/neeto-desk-web/blob/edc9bad9305d55c18a67de3931cbe2633fe3710f/app/javascript/src/components/Macros/Form/FormContent.jsx#L8) 3. [需要规划网络](https://github.com/bigbinary/neeto-planner-web/blob/73bb48e1721bb8ae3c71dbabe7b3b99c443a3f6e/app/javascript/src/components/Settings/Automations/Automation/Form/FormContent.jsx#L24) #### 3.1 国家 `InputField` ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { InputField } = NeetoRulesForm; const initialProps = { ...otherProps, firstName: { label: "First Name", type: "text", value: "", // Default value. componentProps: { placeholder: "Enter name", }, }, }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 数据道克 `NeetoRulesForm`。 。 。 . 3. `label`:为地标. #### 3.2 国家 `TextareaField` ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { TextareaField } = NeetoRulesForm; const initialProps = { ...otherProps, description: { label: "Description", type: "long-text", value: "", // Default value. }, }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 作为 `data` 道具输入 `NeetoRulesForm`。 。 。 . 3. `label`:为地标. #### 3.3 国家 `SelectField` ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { SelectField } = NeetoRulesForm; const initialProps = { ...otherProps, user: { label: "Project", type: "dropdown", options: [{ label: "Oliver", value: "oliver" }], value: "oliver", // Default selected option will be Oliver }, }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 数据道克 `NeetoRulesForm`。 。 。 . 3. `label`:为地标. 4. `options`: 下拉的选项。 选项应包括: 对象为 `label` 财务报告和审定财务报表 `value` 键. `[{label, value}]`。 。 。 . 5. `onChange`: 回调函数,在下拉值时调用 变化. `(value, setValue) => void` `setValue` 设置新值. #### 3.4 国家 `MultiSelectField` ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { MultiSelectField } = NeetoRulesForm; const initialProps = { ...otherProps, users: { label: "Projects", type: "multi-select", options: [ { label: "Oliver", value: "oliver" }, { label: "John", value: "john" }, ], value: ["oliver"], // Default selected option will be Oliver }, }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 数据道克 `NeetoRulesForm`。 。 。 . 3. `label`:为地标. 4. `options`: 下拉的选项。 选项应包括: 对象为 `label` 财务报告和审定财务报表 `value` 键. `[{label, value}]`。 。 。 . 5. `onChange`: 回调函数,在下拉值时调用 变化. `(value, setValue) => void` `setValue` 设置新值. #### 3.5 (中文(简体) ) `RadioField` ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { RadioField } = NeetoRulesForm; const initialProps = { ...otherProps, performer: { label: "Performer", type: "radio", value: "any", // Default selected value will be "any" options: [ { label: "Admin", value: "admin" }, { label: "Any", value: "any" }, ], }, }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 数据道克 `NeetoRulesForm`。 。 。 . 3. `label`:为地标. 4. `options`: 无线电按钮的选项。 选项应包括: 对象为 `label` 财务报告和审定财务报表 `value` 键. `[{label, value}]`。 。 。 . #### 3.6 国家 `EventConditions` ![event-conditions](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/images/event-conditions.png) ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { EventConditions } = NeetoRulesForm; const EVENT_OPTIONS = [ { label: "Ticket is created", value: "created" }, { label: "Ticket is updated", value: "updated" }, ...otherOptions, ]; const PERFORMER_OPTIONS = [ { label: "Any", value: "any" }, { label: "Member", value: "agent" }, ...otherOptions, ]; const CONDITION_OPTIONS = [ { value: "status", label: "Status", type: "multi-select", allowMatching: ["any_of", "none_of"], dropdownOptions: [ { label: "Open", value: "open" }, { label: "Closed", value: "closed" }, { label: "On hold", value: "on_hold" }, ], }, { value: "name", label: "Name", allowMatching: ["is", "is_not"], type: "text", }, ...otherOptions, ]; const DEFAULT_CONDITION_VALUE = [ { id: "1", field: "status", verb: "any_of", metadata: { values: ["open", "closed"] }, joinType: "and_operator", }, { id: "2", field: "name", verb: "is", metadata: { value: "Test" }, joinType: "and_operator", }, ...otherConditionValues, ]; const initialProps = { ...otherProps, events: { label: "Events", type: "events", value: [{ name: EVENT_OPTIONS[0].value }], eventOptions: EVENT_OPTIONS, defaultData: { name: "time_based", performer: "system" }, }, performer: { label: "Performer", type: "dropdown", value: "any", options: PERFORMER_OPTIONS, }, conditions: { label: "Conditions", type: "condition", conditionOptions: CONDITION_OPTIONS, value: DEFAULT_CONDITION_VALUE, }, execution_delay: { value: { value: 2, unit: "minutes" }, defaultValue: { value: 2, unit: "minutes" }, type: "execution-delay", }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 数据道克 (原始内容存档于2018-10-12). Neeto Rulesform. 3. `label`:为地标. 4. `performerName`: 表演者场名. 这个 `performerName` 应该是 和《规约》中的规定相同 `initialProps`。 。 。 . 5. `conditionsName`: 条件字段的名称。 这个 `conditionsName` 应 和《公约》中的内容相同 `initialProps`。 。 。 . 6. `onSelectEvent`数字 : `(name, selectedOption) => void`。这种方法将触发 当我们选择一个事件选项时。 名字是指在形式上的事件 上下文. 7. `enableAddingDelay`: 添加添加执行延迟的选项。 (宝莲. 参考: [NeetoForm PR # 11704 (英语)](https://github.com/bigbinary/neeto-form-web/pull/11704/files) 参见 [事件条件部分](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/event-conditions.md) 为了更多 资料. #### 3.7 国家 `Conditions` ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { Card, Conditions } = NeetoRulesForm; const initialProps = { ...otherProps, conditions: { label: "Conditions", type: "condition", conditionOptions: [ { value: "status", label: "Status", type: "dropdown", // Types : text, number, email, decimal, url, dropdown, multi-select, multi-select-create, date, time. allowMatching: ["is", "is_not", "any_of", "none_of"], dropdownOptions: [ { label: "Open", value: "open" }, { label: "Closed", value: "closed" }, ], additionalData: { any_of: "multi-select", none_of: "multi-select", }, }, { value: "name", label: "Name", type: "text", allowMatching: ["is", "is_not"], }, { value: "tags", label: "Tags", type: "multi-select-create", allowMatching: ["contains_any_of", "contains_none_of"], }, ], value: [ { id: "1", field: "status", verb: "is", metadata: { value: "open" }, joinType: "and_operator", }, { id: "2", field: "name", verb: "is", metadata: { value: "Test" }, joinType: "and_operator", }, { id: "3", field: "tags", verb: "contains_any_of", metadata: { values: ["Test", "Open"] }, joinType: "and_operator", }, ], }, }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 数据道克 `NeetoRulesForm`。 。 。 . 3. `label`:为地标. 4. `onSelectCondition`数字 : `(name, selectedOption) => void`。这种方法将 当我们选择条件选项时触发。 名称是引用条件 在形式背景. 5. `selectedConditionOptions`数字 : `(selectedCondition)=> [{label, value}]`改为: 如果选中条件的类型, 提供选定条件的选项 实值 `dropdown`, (中文(简体) ), `multi-select`,或 `multi-select-create`。 。 。 . 6. `isCallback`: 指定是否有预览回调功能 条件。 (宝莲. 7. `previewCallback`数字 : `(conditions) => void`。这种方法将触发当我们 单击预览按钮。 条件是: 语境. #### 3.8 国家 `Actions` ![actions](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/images/action.png) ```jsx import { NeetoRulesForm } from "@bigbinary/neeto-rules-frontend"; const { Actions } = NeetoRulesForm; const initialProps = { ...otherProps, actions: { label: "Actions", type: "actions", actionOptions: [ { value: "add_tags", label: "Add Tags", type: "multiSelect", // Types : emailToIds, emailTo, email, dropdown, list, multiSelect, note, date, text, textarea, decimal, number, regex, longText, sms, smsToNumbers, smsTo, sendToApi hideSeparator: true, placeholder: "Select tags", dropdownOptions: [ { label: "Open", value: "open" }, { label: "Close", value: "close" }, { label: "Hold", value: "hold" }, ], }, { value: "email_to_agent", label: "Email To Agent", type: "emailTo", separator: ["with the name", "with the content"], hideSubject: true, }, { value: "email_to", label: "Email To", type: "emailToIds", separator: "as", hideSubject: true, // Hide subject field if this prop is true maxLimit: 5, // Adds validation to limit up to specified number of email addresses }, { value: "send_sms", label: "Send sms", type: "longText", }, ], value: [ { id: "1", name: "email_to", // Specify the value of the selected action. metadata: { emails: ["a@a.com"], subject: "test", body: "test" }, }, { id: "2", name: "add_tags", metadata: { values: ["close"] }, }, ], }, }; ; ``` #### 道具 1. `name`:字段名称. 名字应该和在 `initialProps`。 。 。 . 2. `data`: 不变 `initialProps` 数据道克 `NeetoRulesForm`。 。 。 . 3. `label`:为地标. 4. `onSelectAction`数字 : `(name, selectedOption) => void`。这种方法将触发 当我们选择一个动作选项。 名称是指在 语境. 5. `selectedActionOptions`数字 : `(selectedAction)=> [{label, value}]`。提供 如果选定的行动类型是 `dropdown` 或者说 `multi-select`。 。 。 . 6. `separator`: 在动作子项目之间显示分隔符。 如果有的话 一个子项,提供一个字符串值。 如果有多个子项, 提供一组分隔符. 7. `isSaveAsTemplateEnabled`:允许用户保存当前内容 消息作为新模板. 参见 [行动部分](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/actions.md) 更多信息. #### 3.9 自定义行动部分 需要从主机通过自定义动作组件 应用。 下面是自定义任务组件的例子,它正在 由 neto-crm 在动作选项中发送. ```jsx { label: "Add task", value: "add_task", placeholder: "Task", component: TaskComponent, validation: TASK_VALIDATION, }, ``` #### 3.10 自定义信件模板 needo RulesFrontend 允许通过预定义的电子邮件、短消息和 API 模板 主机应用程序. 这样可以使用使用创建的模板 需要 - 消息 - Templates - nano。 下面是自定义消息模板的示例 它正在由 neto-form 在行动选项中发送. ```jsx { "label": "Email to responder", "value": "email_to_responder", "type": "emailTo", "templates": [ { "id": "caca1cc9-f9db-480a-a64f-6ea0c72d4b05", "name": "Send emails to rejected candidates", "subject": "Application Status - Screening Round Unsuccessful", "body": "

Dear {{full-name}},

Thank you for your interest. Unfortunately, we regret to inform you that you did not pass the screener round.

Best regards,

Spinkart

" } ] } ``` #### 3.11 将当前消息的内容保存为新模板 要将当前信件的内容保存为新模板, 设置 `isSaveAsTemplateEnabled` 真实的。 信件内容将随即提供 中的数值 `handleSubmit` 调用, 允许主机 用于创建新模板的应用程序. #### 3.12 在动作面板上显示弹出帮助 您可以配置帮助 popovers 在 Email, SMS, 输入字段旁边出现 , 和 API 动作。 为此,应提供 `helpPopoverProps` 输入 行动选项. ```jsx { label: t("form.settings.automationRules.actions.sendToApi"), value: ACTION_OPTIONS.sendToApi, type: "sendToApi", helpPopoverProps: { customHeaders: { title: "Title for custom headers popover", description: "Description for custom headers popover.", helpLinkProps: { href: CUSTOM_HEADERS_HELP_DOC_URL }, }, body: { title: "Title for API payload popover", description: "Description for API payload popover.", helpLinkProps: { href: API_PAYLOAD_HELP_DOC_URL }, }, }, } ``` 以下是支持的动作和可以显示帮助弹出符的字段: 1. 电子邮件动作 : - `template`: 在模板下拉边显示帮助弹出 - `recipientField`: 在收件人选择旁显示帮助弹出 下放( 用电子邮件列出记录) 2. 短消息动作 : - `template`: 在模板下拉边显示帮助弹出 - `recipientField`: 在收件人选择旁显示帮助弹出 下放( 列出有电话号码的记录) 3. API 动作 : - `template`: 在模板下拉边显示帮助弹出 - `customHeaders`: 显示自定义页眉标签旁边的帮助弹出 - `body`: 在身体标签旁边显示帮助弹出 #### 4.四. `RulePreview` 这个 `RulePreview` 组件用于预览自动化规则. ![rule-preview](https://npmcn.com/package/%40bigbinary/neeto-rules-frontend/docs/images/rule-preview.png) #### 道具 1. `ruleDetails`: 要预览的规则细节 . 2. `isLoading`: 指定预览是否在加载 。 (宝莲. 3. `isOpen`: 指定预览是否打开。 (宝莲. 4. `onClose`: 预览关闭时调用功能 . `() => void`。 。 。 . ### 常数 #### 1\. 联合国. `AUTOMATION_RULES_QUERY_KEY` 这个 `AUTOMATION_RULES_QUERY_KEY` 是用作 用于查询获取的密钥. 参考文献 : 1. [需要桌面网络](https://github.com/bigbinary/neeto-desk-web/blob/main/app/javascript/src/components/Automations/index.jsx) #### 5 (韩语). `CannedResponsesPane` ![Screenshot 2024-09-24 at 5 30 39 PM](https://github.com/user-attachments/assets/f223a948-c607-496f-ba7a-f0160a46fd4d) 这个 `CannedResponsesPane` 组件用于预览罐装答复和 应用它们. #### 道具 - `actionNameOptions`:任何罐装反应都可以采取的一系列行动 来 阵列中的每个对象可以有 `label`, (中文(简体) ), `value`, (中文(简体) ), `type`, (中文(简体) ), `placeholder`, (中文(简体) ), `dropdownOptions`, (中文(简体) ), `defaultData` 财务报告和审定财务报表 `variables`其中, `dropdownOptions`, (中文(简体) ), `defaultData` 财务报告和审定财务报表 `variables` 是可选的. - `areDropdownListsLoading`: 指定下拉列表是否在加载 . - `dropdownList`: 它是在倒放中使用的数值对象. 这个 可以拥有钥匙 `tags`, (中文(简体) ), `teams`, (中文(简体) ), `members`, (中文(简体) ), `fields`,以及 `status`,与 的值. - `isCannedResponsePaneOpen`:布尔以指定罐装响应面板是否 打开. - `isLoadingPreview`:布尔以指定预览是否在加载 . - `macros`: 用户可以提供的一系列可能的宏/扫描响应 选择从. - `onApply`: 调用函数来应用罐头响应. - `onCancel`:在罐装响应面板关闭时调用回调功能. - `previewCannedResponses`: 用于调用API的方法 获取罐头响应的预览 . - `previewParams`:包含预览API调用参数的对象. - `variables`: 一系列变量,可用于罐装反应. 这是可选道具. #### 使用量 ```jsx import { useState } from "react"; import { CannedResponsesPane } from "@bigbinary/neeto-rules-frontend"; import { usePreviewCannedResponses } from "./hooks"; const Component = ({ visitorId }) => { const [isCannedResponsePaneOpen, setIsCannedResponsePaneOpen] = useState(false); const { mutate: previewCannedResponses, isLoading } = usePreviewCannedResponses(); const dropdownList = { status: [ { label: "Open", value: "open" }, { label: "Closed", value: "closed" }, ], tags: [ { label: "Tag 1", value: "tag1" }, { label: "Tag 2", value: "tag2" }, ], teams: [ { label: "Team 1", value: "team1" }, { label: "Team 2", value: "team2" }, ], }; const ACTION_NAME_OPTIONS = [ { label: "Add reply", value: "add_reply", type: "note", placeholder: "Reply", }, { label: "Assign member", value: "assign_agent", type: "dropdown", placeholder: "Select member", dropdownOptions: [], defaultData: { actionable_type: "User" }, }, { label: "Assign team", value: "assign_group", type: "dropdown", placeholder: "Select team", dropdownOptions: [], defaultData: { actionable_type: "NeetoTeamMembersEngine::Group" }, }, ]; const handleApply = ({ cannedResponse, setCannedResponse, onSettled, updatedValues, }) => { // logic to apply canned response }; return ( setIsCannedResponsePaneOpen(false)} /> ); }; ``` ## 出版指令 咨询 [构建和释放软件包](https://neeto-engineering.neetokb.com/articles/building-and-releasing-packages) 关于如何出版的详细指南. ## 常见问题 ### @bigbinary/neeto-rules-frontend 是什么？ 一个回波作为新纳米结构,配置,数据等的真理来源\. ### 如何安装 @bigbinary/neeto-rules-frontend？ 在项目目录运行 npm install @bigbinary/neeto-rules-frontend，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：qs（6\.16\.2）、url（0\.11\.4）、yup（0\.32\.11）、antd（5\.22\.1）、util（^0\.12\.5）、axios（1\.20\.0）、dayjs（1\.11\.10）、ramda（0\.29\.0）、react（18\.3\.1）、buffer（^6\.0\.3）、formik（2\.4\.6）、i18next（22\.5\.1）、zustand（4\.4\.2）、dompurify（3\.4\.17）、js-logger（1\.6\.1）、react-dom（18\.3\.1）、classnames（2\.5\.1）、stream-http（3\.2\.0）、tailwindcss（3\.4\.14）、lucide-react（0\.577\.0）、react-helmet（^6\.1\.0）、react-select（5\.6\.0）、os-browserify（0\.3\.0）、react-i18next（12\.3\.1）、vm-browserify（1\.1\.2）、@babel/runtime（7\.29\.7）、react-toastify（8\.0\.2）、tty-browserify（0\.0\.1）、path-browserify（^1\.0\.1）、https-browserify（1\.0\.0）、mixpanel-browser（^2\.45\.0）、react-router-dom（5\.3\.3）、@hello-pangea/dnd（16\.3\.0）、crypto-browserify（3\.12\.1）、source-map-loader（4\.0\.1）、stream-browserify（^3\.0\.0）、@bigbinary/neetoui（8\.8\.3）、@honeybadger-io/js（6\.10\.1）、@monaco-editor/react（^4\.7\.0）、@bigbinary/neeto-cist（1\.0\.17）、@honeybadger-io/react（6\.1\.25）、@tanstack/react-query（5\.59\.20）、@bigbinary/neeto-atoms（1\.1\.2）、@bigbinary/neeto-icons（1\.20\.89）、@bigbinary/neeto-hotkeys（1\.0\.9）、@bigbinary/neeto-molecules（5\.10\.1）、@tailwindcss/container-queries（^0\.1\.1）、@tanstack/react-query-devtools（5\.59\.20）、@bigbinary/neeto-editor-frontend（2\.4\.0）、@bigbinary/neeto-commons-frontend（4\.14\.8）、@bigbinary/neeto-filters-frontend（4\.7\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @bigbinary/neeto-rules-frontend 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @bigbinary/neeto-rules-frontend 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @bigbinary/neeto-rules-frontend 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=22\.13。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @bigbinary/neeto-rules-frontend 可以商用吗？ @bigbinary/neeto-rules-frontend 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。 ### @bigbinary/neeto-rules-frontend 的下载量有多少？ 根据 npm 官方下载统计，@bigbinary/neeto-rules-frontend 在 2026/10/08 – 2026/11/06 这 30 天内被下载 17,800 次，日均约 593 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @bigbinary/neeto-rules-frontend 还在维护吗？ 最新版本 2\.9\.0 发布于 2026/11/04（4 天前）；至今共发布 259 个版本，其中过去 12 个月发布了 110 个；首次发布于 2023/01/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。