\n \n \n \n {schema ? (\n {\n window.alert(JSON.stringify(data))\n }}\n />\n ) : (\n \n
\n );\n};\n\nexport default TypeSchema;\n"
},
{
"path": ".dumi/theme/layouts/GlobalLayout/index.tsx",
"content": "import React from 'react';\nimport { ConfigProvider } from 'antd';\nimport { useOutlet } from 'dumi';\n\nconst GlobalLayout: React.FC = () => {\n const outlet = useOutlet();\n return (\n \n {\n instance\n .options({\n speed: 40,\n })\n .type('{}')\n .move(-1, { instant: true })\n .type(br(2), { instant: true })\n .move(-1, { instant: true })\n .type(space(2), { instant: true })\n .type(`${blue('name')}: {},`)\n .move(-2, { instant: true })\n .type(`${br(2)}${space(2)}`, { instant: true })\n .move(-3, { instant: true })\n .type(space(4), { instant: true })\n .type(`${blue('title')}: ${black(`'Name'`)},`)\n .type(`${br(1)}${space(4)}`, { instant: true })\n .type(`${blue('type')}: ${black(`'string'`)},`)\n .type(`${br(1)}${space(4)}`, { instant: true })\n .exec(() => {\n setSchema({\n type: 'object',\n properties: {\n name: {\n title: 'Name',\n type: 'string',\n },\n },\n });\n })\n .type(`${blue('placeholder')}: ${black(`'Please input your name.'`)},`)\n .exec(() => {\n setSchema({\n type: 'object',\n properties: {\n name: {\n title: 'Name',\n type: 'string',\n placeholder: 'Please input your name.'\n },\n },\n });\n })\n .move(5)\n .type(`${br(1)}${space(2)}`, { instant: true })\n .type(`${blue('fruit')}: {}`)\n .move(-1, { instant: true })\n .type(`${br(2)}${space(2)}`, { instant: true })\n .move(-3, { instant: true })\n .type(space(4), { instant: true })\n .type(`${blue('title')}: ${black(`'Favorite Fruit'`)},`)\n .type(`${br(1)}${space(4)}`, { instant: true })\n .type(`${blue('type')}: ${black(`'number'`)},`)\n .exec(() => {\n setSchema({\n type: 'object',\n properties: {\n name: {\n title: 'Name',\n type: 'string',\n placeholder: 'Please input your name.'\n },\n fruit: {\n title: 'Favorite Fruit',\n type: 'string',\n },\n },\n });\n })\n .type(`${br(1)}${space(4)}`, { instant: true })\n .type(`${blue('enum')}: ${black(`[${violet('1')}, ${violet('2')}, ${violet('3')}]`)},`)\n .type(`${br(1)}${space(4)}`, { instant: true })\n .type(`${blue('enumNames')}: ${black(`['apple', 'cherry', 'pear'],`)}`)\n .exec(() => {\n setSchema({\n type: 'object',\n properties: {\n name: {\n title: 'Name',\n type: 'string',\n placeholder: 'Please input your name.'\n },\n fruit: {\n title: 'Favorite Fruit',\n type: 'number',\n enum: [1, 2, 3],\n enumNames: ['apple', 'cherry', 'pear'],\n },\n },\n });\n })\n .type(`${br(1)}${space(4)}`, { instant: true })\n .type(`${blue('required')}: ${violet('true')},`)\n .exec(() => {\n setSchema({\n type: 'object',\n properties: {\n name: {\n title: 'Name',\n type: 'string',\n placeholder: 'Please input your name.'\n },\n fruit: {\n title: 'Favorite Fruit',\n type: 'number',\n enum: [1, 2, 3],\n enumNames: ['apple', 'cherry', 'pear'],\n required: true,\n },\n },\n });\n })\n .type(`${br(1)}${space(4)}`, { instant: true })\n .type(`${blue('default')}: ${black(`2,`)}`)\n .exec(() => {\n setSchema({\n type: 'object',\n properties: {\n name: {\n title: 'Name',\n type: 'string',\n placeholder: 'Please input your name.'\n },\n fruit: {\n title: 'Favorite Fruit',\n type: 'number',\n enum: [1, 2, 3],\n enumNames: ['apple', 'cherry', 'pear'],\n required: true,\n default: 2,\n },\n },\n });\n })\n .move(-167, { instant: true })\n .type(`${br(1)}${space(4)}`, { instant: true })\n .type(`${blue('extra')}: ${red(`'Easiest way to build a form!'`)}`)\n .exec(() => {\n setSchema({\n type: 'object',\n properties: {\n name: {\n title: 'Name',\n type: 'string',\n placeholder: 'Please input your name.',\n extra: 'Easiest way to build a form!'\n },\n fruit: {\n title: 'Favorite Fruit',\n type: 'number',\n enum: [1, 2, 3],\n enumNames: ['apple', 'cherry', 'pear'],\n required: true,\n default: 2,\n },\n },\n });\n })\n return instance;\n }}>\n \n
\n Transform schema to form...
\n )}\n \n \n 更多\n
\n ),\n children: [\n {\n label: SchemaBuilder,\n key: 'schema-builder',\n icon: \n
\n \n ![\"logo\"](\"https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png\")
\n
\nXRender\n
\n\n\n \n ![\"npm\"](\"https://img.shields.io/npm/v/form-render.svg?maxAge=3600&style=flat-square\")
\n \n ![\"GitHub](\"https://img.shields.io/github/last-commit/alibaba/form-render.svg?style=flat-square\")
\n \n ![\"GitHub](\"https://img.shields.io/github/repo-size/alibaba/form-render\")
![\"GitHub](\"https://img.shields.io/github/issues-closed/alibaba/form-render.svg?style=flat-square\")
\n \n ![\"NPM](\"https://img.shields.io/npm/dm/form-render.svg?style=flat-square\")
\n \n ![\"NPM](\"https://img.shields.io/npm/dt/form-render.svg?style=flat-square\")
\n \n ![\"PRs](\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\"){kind=icon}
\n
\n \n
\n
\n\n更多可见[使用场景](https://github.com/alibaba/form-render/issues/94)，也很欢迎提交～\n\n## 支持\n\n- 如果你觉得 XRender 还不错，可以通过 [Star](https://github.com/alibaba/form-render/stargazers) 来表示你的喜欢\n- 在公司或个人项目中使用 XRender，并帮忙推广给伙伴使用\n\n## 贡献\n\n想贡献代码、解 BUG 或者提高文档可读性？非常欢迎一起参与进来，在提交 PR 前阅读一下 [Contributing Guide](https://github.com/alibaba/form-render/blob/master/CONTRIBUTING.md)。\n\n\n\n感谢给 XRender 贡献代码的你们：\n\n \n 谁在使用?\n
| \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n
| \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n
| \n | \n \n | \n \n | \n \n | \n \n | \n \n | \n
| \n | \n \n | \n
\n\nhttps://user-images.githubusercontent.com/8736212/123383626-ff187a80-d5c5-11eb-803f-296762fe72d0.mp4\n\n## 协议\n\n- 遵循 MIT 协议\n- 请自由地享受和参与开源\n\n## 互助答疑群\n
![](\"https://img.alicdn.com/imgextra/i3/O1CN01HksNgs1DZNuQsORIp_!!6000000000230-0-tps-1242-1602.jpg\")
\n\n\n## Star 趋势\n\n[](https://star-history.com/#alibaba/x-render&Date)\n"
},
{
"path": "app.ts",
"content": "window.publicPath = '/';\n\nif (location.origin.includes('gitee')) {\n location.href = 'https://xrender.fun/';\n}\n\nif (location.origin.includes('alibaba')) {\n window.publicPath = '/x-render/';\n}\n"
},
{
"path": "docs/data-render/data/basic.ts",
"content": "export default {\n \"creator\": \"清风徐来\",\n \"relevanceCode\": \"421421\",\n \"desc\": \"浙江省杭州市工专路\",\n \"create-time\": \"2019-10-10\",\n \"effective-date\": \"2019-10-10 ～ 2020-10-31\",\n \"safety\": {\n \"name\": \"Test demo 001\",\n \"app\": \"中后台详情页面\",\n \"mode\": \"代码包\",\n \"yum\": \"592342323904823489\",\n \"fore\": \"23\"\n },\n \"operLog\": [{\n \"type\": \"创建测试\",\n \"creator\": \"清风徐来\",\n \"time\": \"2019-10-30 12:23:45\",\n \"result\": \"1\",\n \"desc\": \"这是备注\"\n }, {\n \"type\": \"创建测试\",\n \"creator\": \"清风徐来\",\n \"time\": \"2019-10-30 12:23:45\",\n \"result\": \"1\",\n \"desc\": \"这是备注\"\n }, {\n \"type\": \"创建测试\",\n \"creator\": \"清风徐来\",\n \"time\": \"2019-10-30 12:23:45\",\n \"result\": \"1\",\n \"desc\": \"这是备注\"\n }, {\n \"type\": \"创建测试\",\n \"creator\": \"清风徐来\",\n \"time\": \"2019-10-30 12:23:45\",\n \"result\": \"1\",\n \"desc\": \"这是备注\"\n }, {\n \"type\": \"创建测试\",\n \"creator\": \"清风徐来\",\n \"time\": \"2019-10-30 12:23:45\",\n \"result\": \"1\",\n \"desc\": \"这是备注\"\n }, {\n \"type\": \"创建测试\",\n \"creator\": \"清风徐来\",\n \"time\": \"2019-10-30 12:23:45\",\n \"result\": \"1\",\n \"desc\": \"这是备注\"\n }]\n}"
},
{
"path": "docs/data-render/index.md",
"content": "---\norder: 0\ntitle: 开始使用\nmobile: false\n---\n\n\n \n DataView\n
\n\n DataView\n\n \n ![\"npm\"](\"https://img.shields.io/npm/v/@xrenders/data-render.svg?maxAge=3600&style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dm/@xrenders/data-render.svg?style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dt/@xrenders/data-render.svg?style=flat-square\")
\n \n \n \n \n
\n
\n );\n}\n```\n\n## 下拉选项异步加载\n下拉选项的数据有时候来源于服务端下发，这时我们需要异步修改 Schema。\n\n- 单个加载：通过 `form.setSchemaByPath` 方法进行加载\n\n```jsx\nimport React, { useEffect } from 'react';\nimport FormRender, { useForm } from 'form-render';\nconst schema = {\n type: 'object',\n properties: {\n select: {\n title: '下拉框',\n type: 'string',\n widget: 'select',\n }\n }\n};\nexport default () => {\n const form = useForm();\n\n const onMount = () => {\n // 根据服务端下发内容，重置下拉选项\n form.setSchemaByPath('select', {\n props: {\n options: [\n {label: '东', value: 'east'},\n {label: '西', value: 'west'},\n {label: '南', value: 'south'},\n {label: '北', value: 'north'}\n ]\n }\n });\n };\n \n return (\n \n
\n );\n};\n\nexport default Demo;\n```\n\n## 表单服务端校验\n通过 `beforeFinish` 从外部回填 error 信息到表单，注意 `beforeFinish` 需返回要回填的 error\n\n```jsx\nimport React from 'react';\nimport { Button, message } from 'antd';\nimport FormRender, { useForm } from 'form-render';\nimport schema from './schema/simple';\nimport { fakeApi } from './utils';\n\nexport default () => {\n const form = useForm();\n\n const onFinish = (data) => {\n message.info(JSON.stringify(data));\n };\n\n // 服务端校验在这里做\n const beforeFinish = ({ data, schema }) => {\n return fakeApi('xxx/validation').then(_ => {\n if (data.select1) {\n return [{ name: 'select', errors: [] }];\n }\n return [{ name: 'select', errors: ['外部校验错误, 请进行选择'] }];\n });\n };\n\n return (\n \n
\n );\n}\n```\n\n## 表单数据字段转换\n服务端数据与展示经常会不符，通过配置 `bind` 字段进行转换（List嵌套下暂时不支持）\n\n- 例如：日期范围组件接收的是一个数组，而服务端的数据是 startDate，endDate 两个字段。\n\n```jsx\nimport React from 'react';\nimport { Button, message, Space } from 'antd';\nimport FormRender, { useForm } from 'form-render';\nimport { fakeApi } from './utils';\n\nconst schema = {\n type: 'object',\n properties: {\n dateRange: {\n bind: ['startDate', 'endDate'],\n title: '日期范围',\n type: 'range',\n format: 'date',\n },\n },\n};\n\nexport default () => {\n const form = useForm();\n\n const onFinish = (data) => {\n message.info(JSON.stringify(data));\n };\n\n const getRemoteData = () => {\n fakeApi('xxx/getForm').then(_ => {\n form.setValues({ startDate: '2023-01-01', endDate: '2023-12-31' });\n });\n };\n\n return (\n \n \n \n \n \n
\n );\n}\n```\n"
},
{
"path": "docs/form-render/advanced-bind.md",
"content": "---\norder: 3\ntoc: content\nmobile: false\ntitle: 数据转换\ngroup: \n title: 高级用法\n order: 1\n---\n\n# bind\n\n类型：string | string[] | false\n\n有时候我们会遇到这样的问题：提交的数据，数据结构不符合服务端的要求，需要进行转换。这时候 bind 这个魔法字段就派上用场了。\n\n\n注意点：`魔法虽好，切记滥用`\n- `setValues`、`getValues`、`onFinish` 这三个 API，也就是`输入`、`输出` 数据的格式是转换之后的，其他情况下数据格式都是表单原始数据格式\n- 最好不要跨层级转换，转换前后数据最好还是保持在同一层级，\n\n`点击提交按钮，浏览器控制台会打印出提交的数据`\n## 简单\n`{ date: ['2023-04-01', '2023-04-23'] }` => `{ startDate: '2023-04-01', endDate: '2023-04-23' }`\n```jsx\nimport React from 'react';\nimport { Button, Alert} from 'antd';\nimport FormRender, { useForm } from 'form-render';\n\nconst delay = ms => new Promise(res => setTimeout(res, ms));\n\nconst schema = {\n type: 'object',\n properties: {\n date: {\n bind: ['startDate', 'endDate'],\n title: '日期',\n type: 'range',\n format: 'date',\n description: 'bind 转换',\n },\n date1: {\n title: '日期',\n type: 'range',\n format: 'date',\n description: '未进行转换',\n }\n }\n};\n\nconst Demo = () => {\n const form = useForm();\n\n const onFinish = (formData) => {\n console.log(formData, 'formData');\n };\n\n return (\n \n \n \n row \n column \n Inline \n \n \n
\n );\n}\n```\n\n## column\n一行可以展示多少个表单项，默认值: 1\n\n```jsx\nimport React, { useState } from 'react';\nimport { Button, Space, Form, Radio } from 'antd';\nimport FormRender, { useForm } from 'form-render';\nimport schema from './schema/basic';\n\nexport default () => {\n const form = useForm();\n const [column, setColumn] = useState(3);\n\n const handRadioChange = (ev) => {\n const value = ev.target.value;\n schema.column = value;\n\n form.setSchema(schema, true);\n setColumn(value);\n };\n\n return (\n <>\n \n labelWidth：\n
\n \n maxWidth：\n
\n My Widget
\n )\n}\n\nexport default MyWidget;\n```\n"
},
{
"path": "docs/form-render/api-props.md",
"content": "---\norder: 0\nmobile: false\ngroup: \n title: API\n order: 4\n---\n\n# 表单属性\n\n## Props\n\n| 参数
| 说明 | 类型 | 默认值
|\n| ---------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------ |\n| schema | **必填**，描述表单的 schema，详见 [协议配置项](/form-render/api-schema) | SchemaBase | - |\n| form | **必填**，`useForm` 创建的表单实例，与 Form 一对一绑定，详见[Forminstance](#forminstance) | `FormInstance` | - |\n| onFinish | 提交后的回调，执行 `form.submit()` 后触发 | `(data) => void` | - |\n| beforeFinish | 在 onFinish 前触发，一般用于外部校验逻辑的回填 | `({ data, errors, schema, ...rest }) => Error[] \\| Promise参数
| 描述 | 类型 |\n| ----------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |\n| submit | 触发提交流程，一般在提交按钮上使用 | `() => void` |\n| resetFields | 清空表单（也会清空一些内置状态，例如校验） | `(fieldPath?: Path[]) => void` |\n| setErrorFields | 外部手动修改 errorFields 校验信息，用于外部校验回填 | `(error: Error[]) => void` |\n| setValues | 外部手动修改 formData，用于已填写的表单的数据回填 | `(formData: any) => void` |\n| setValueByPath | 外部修改指定单个 field 的数据(原名 onItemChange) | `(path: Path, value: any) => void` |\n| setSchemaByPath | 指定路径修改 schema | `(path: Path, schema: any) => void` |\n| setSchema | 指定多个路径修改 schema，cover 传true将直接替换 schema | `({ path: value }, cover?: boolean) => void` |\n| getValues | 获取表单内部维护的数据, 如果参数为空则返回当前所有数据 | `(nameList?: Path[], filterFunc?: (meta: { touched: boolean, validating: boolean }, notFilterUndefined?:boolean,notFilterHideData?:boolean) => boolean) => any` |\n| getHiddenValues | 获取隐藏的表单数据 | `() => any` |\n| getSchema | 获取表单的 schema | `()=> object` |\n| removeErrorField | 外部手动删除某一个 path 下所有的校验信息 | `(path: Path) => void` | |\n| isFieldTouched | 检查某个表单是否被用户操作过 | `(name: Path) => boolean` |\n| isFieldsTouched | 检查一组字段 fields 是否被用户操作过, allTouched 为 true 是检查是否所有字段都被操作过 | `(nameList?: Path[], allTouched?: boolean) => boolean` |\n| isFieldValidating | 检查对应字段 field 是否正在校验 | `(name: Path) => boolean` |\n| scrollToPath | 滚动到 path 对应的位置 | `(name: Path , options?:` ScrollOptions`) => boolean` | |\n| getFieldError | 获取对应字段 field 的错误信息 | `(name: Path) => string[]` |\n| getFieldsError | 获取一组字段 fields 对应的错误信息, 返回数组形式; 入参为空则获取所有字段对应的错误信息 | `(nameList: Path[]) => Error[]` |\n| validateFields | 触发表单校验 | `(nameList?: Path[]) => Promise参数
| 描述 | 类型 |\n| ----------------- | ----------------------------------------------------------------------------------- | ----------------------------- |\n| mustacheDisabled | 是否禁用表达式 | `boolean` |\n| listOperate | 列表表单配置 | `ListOperate` |\n\n### ListOperate\n| 参数
| 描述 | 类型 |\n| ----------------- | ----------------------------------------------------------------------------------- | ----------------------------- |\n| btnType | 列表表单操作按钮样式 | `'icon'\\|'text'` |\n| hideMove | 是否隐藏移动按钮 | `boolean` |\n"
},
{
"path": "docs/form-render/api-schema.md",
"content": "---\norder: 1\ntoc: content\nmobile: false\ngroup: \n title: API\n order: 4\n---\n\n# 协议配置项\n\n`schema` 用于描述表单的基本信息、结构和校验。`schema` 在结构上遵循 JSON Schema 国际规范。\n表单元素类型总共有三种：`item`，`object`，`list`。\n\n## 一、表单配置项\n\nschema 最顶层的一些配置，主要为表单全局的样式。\n\n```js\n{\n type: 'object', \n displayType: 'column', \n colmn: 1, \n properties: {}\n}\n```\n### type\n- 描述：固定配置为 `type: 'object'`\n\n### displayType\n- 描述：表单项 label 布局方式\n- 类型：`'row' | 'column' | 'inline'`\n\n\n### column\n- 描述：表单布局，一行应该有几列\n- 类型：`number`\n- 默认：`3`\n\n### labelWidth\n- 描述：表单项标签的宽度\n- 类型：`number`\n\n### properties\n- 描述：表单元素的集合\n\n## 二、基础控件配置项\n`item`：即最基本的输入框，选择框等。\n\n如下这样一段 block 在 form-render schema 中就叫做一个 `item`，其中 `url` 就是这个 `item` 在表单中对应的字段。\n\n```js\nurl: {\n title: 'url输入框',\n type: 'string',\n widget: 'input'\n}\n```\n\n### type\n- 描述：表单字段的类型\n- 类型：`'string' | 'number' | 'boolean' | 'array' | 'range' | 'html' | 'void'`\n\n### title \n- 描述：表单字段的标签\n- 类型：`string`\n\n### widget\n- 描述：指定渲染的控件，可以是 form-render 的 [内置组件](/form-render/display-row)，也可以是 [自定义组件](/form-render/advanced-widget)\n- 类型：`string`\n\n### placeholder\n- 描述：输入内容提示\n- 类型：`string | [string, string]`\n\n### description\n- 描述：副标题描述\n- 类型：`string`\n\n### tooltip\n- 描述：气泡提示，支持 `html` 格式，可传入一个对象支持更多配置。详见 Antd Tooltip Props。\n- 类型：`string | TooltipProps`\n\n```js\ntooltip: {\n title: 'xxxxxx',\n color: 'red',\n}\n```\n### descWidget\n- 描述：自定义副标题提示组件\n- 类型：`string`\n\n### extra\n- 描述：更多的说明信息，支持 `html` 格式，会紧贴在元素下面一行展示\n- 类型：`string`\n\n### required\n- 描述：是否必填\n- 类型：`boolean`\n- 默认：`false`\n\n### min\n- 描述：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度\n- 类型：`number`\n\n### max\n- 描述：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度\n- 类型：`number`\n\n### format\n- 描述：在已设置的 `type` 下，如何处理这个 `type`\n- 类型：`'image' | 'textarea' | 'color' | 'email' | 'url' | 'dateTime' | 'date' | 'time' | 'upload'`\n\n:::warning\n在 1.x 中，form-render 会根据 `type` 和 `format` 自动选择适合的 `widget`。在 2.x 中，我们更推荐显式的指定 `widget`，而不是自动选择。\n:::\n\n### rules\n- 描述：校验规则，参考 Antd Form RuleConfig\n- 类型：`Rule[]`\n```js\nrules: [\n { pattern: '^[\\u4E00-\\u9FA5]+$', message: '请输入中文！' }\n]\n```\n\n### hidden\n- 描述：是否隐藏\n- 类型：`boolean`\n- 默认：`false`\n\n### disabled\n- 描述：是否禁用\n- 类型：`boolean`\n- 默认：`false`\n\n### readOnly\n- 描述：是否禁用\n- 类型：`boolean`\n- 默认：`false`\n\n### readOnlyWidget\n- 描述：指定只读渲染组件\n- 类型：`string`\n\n### dependencies\n- 描述：当依赖的元素更新时，会触发本元素的重新渲染，用于复杂的表单联动，[详见](/form-render/advanced-linkage#dependencies-依赖字段)。\n- 类型：`string[]`\n\n### className\n- 描述：自定义控件 class 名称\n- 类型：`string`\n\n### reserveLabel\n- 描述：当 title 未设置时，通过配置 reserveLabel: true，可以保留 labelWidth 占位，使得输入控件和其他控件上下对齐\n- 类型：`boolean`\n\n### props\n配置额外属性，如果使用的是 antd 组件 对应的就是 antd 组件的其他属性。例如：\n\n\n### action\n- 描述：输入控件支持配置自定义功能槽，显示在输入控件右边，通过 action 值和 widgets 字段间映射，渲染自定义自定义功能槽。\n- 类型\n```js\naction: 'toolWidget' | { widget: 'toolWidget' } // toolWidget 通过 widgets 透传\n```\n\n## 三、嵌套控件配置项\n一个包含其他元素的 block，可用于表单项的分类\n\n```js\ndetail: { // detail 是字段名\n title: '基础信息',\n type: 'object',\n colmn: 1,\n widget: 'collapse',\n props: {},\n properties: {}\n}\n```\n### type\n- 描述：固定配置为 `type: 'object'`\n\n### title\n- 描述：标题\n- 类型：`string`\n\n### widget\n- 描述：希望使用的嵌套组件\n- 类型：`'collapse' | 'card' | 'lineTitle' | 'subInline'`\n- 默认：`'card'`\n\n### properties\n- 描述：表单元素集合\n\n### column\n- 描述：表单布局，一行应该有几列\n- 类型：`number`\n- 默认：`3`\n\n### description\n- 描述：副标题描述\n- 类型：`string`\n\n### tooltip\n- 描述：气泡提示，支持 `html` 格式，可传入一个对象支持更多配置。详见 Antd Tooltip Props。\n- 类型：`string | TooltipProps`\n\n```js\ntooltip: {\n title: 'xxx
xxx',\n color: 'red',\n}\n```\n\n### props\n- 描述：额外属性，透传到对应的嵌套组件中\n\n## 四、列表控件配置项\n可动态增减的表单项\n\n```js\nlist: { // list 是字段名\n title: '人员列表',\n type: 'array',\n widget: 'card', \n min: 1,\n max: 5,\n items: {\n title: '基础信息',\n type: 'object',\n properties: {}\n },\n}\n```\n### type\n- 描述：固定配置为 `type: 'array'`\n\n### title\n- 描述：标题\n- 类型：`string`\n\n### widget\n- 描述：希望使用的列表组件\n- 类型：`'cardList' | 'simpleList' | 'tableList' | 'drawerList' | 'virtualList'`\n- 默认：`'cardList'`\n\n### max\n- 描述：列表的最大长度\n- 类型：`number`\n\n### min\n- 描述：列表的最小长度\n- 类型：`number`\n\n### props\n配置列表控件，可配置如下属性\n\n#### props.addBtnProps\n- 描述：添加按钮属性，参考 Antd Button Props\n- 类型：`ButtonProps`\n\n#### props.delConfirmProps\n- 描述：删除确认弹窗属性，参考 Antd PopConfirm Props\n- 类型：`PopConfirmProps`\n\n#### props.drawerProps\n- 描述：`drawerList` 中抽屉的属性，参考 Antd Drawer Props\n- 类型：`DrawerProps`\n\n#### props.actionColumnProps\n- 描述：`tableList | drawerList | virtualList` 中操作列的属性，参考 Antd Table ColumnType。 其中 `title` 使用 `colHeaderText` 代替。\n- 类型：`ColumnType`\n\n#### props.hideAdd\n- 描述：是否隐藏添加按钮\n- 类型：`boolean`\n\n#### props.hideCopy\n- 描述：是否隐藏复制按钮\n- 类型：`boolean`\n\n#### props.hideMove\n- 描述：是否隐藏移动按钮\n- 类型：`boolean`\n\n#### props.hideDelete\n- 描述：是否隐藏删除按钮\n- 类型：`boolean`\n\n#### props.hideColumnNestedObject \n- 描述：是否隐藏`drawerList`表格内部嵌套复杂元素的情况\n- 类型：`false` | `hide` | `collapse`\n- 默认：`false`\n\n#### props.onAdd\n- 描述：点击添加按钮回调函数\n- 类型：`(operation, { schema, data }) => void`\n\n#### props.onRemove\n- 描述：点击删除按钮回调函数\n- 类型：`(operation, { schema, data, index }) => void`\n\n#### props.onMove\n- 描述：点击移动按钮回调函数\n- 类型：`(operation, { schema, from, to }) => void`\n\n#### props.onCopy\n- 描述：点击复制按钮回调函数\n- 类型：`(operation, { schema, data, copyIndex }) => void`\n\n### items\n动态项配置，可以是一个嵌套控件\n\n```js\n{\n title: '基础信息', // 标题\n type: 'object', // 固定配置\n properties: {} // 表单元素\n // widget: 'collapse', 支持配置嵌套控件\n},\n```\n\n" }, { "path": "docs/form-render/changelog.md", "content": "---\norder: 2\ntoc: content\nmobile: false\ngroup: \n title: 其他\n order: 5\n---\n\n\n" }, { "path": "docs/form-render/demo/FormRender.jsx", "content": "import FormRender, { useForm } from 'form-render';\nimport React from 'react';\n\nconst Demo = ({ schema, ...otherProps }) => {\n const form = useForm();\n \n return
\n
\n );\n};\n\nexport default Demo;\n"
},
{
"path": "docs/form-render/demo/defaultChange.tsx",
"content": "import React from 'react';\nimport { Button } from 'antd';\nimport FormRender, { useForm } from 'form-render';\n\nconst delay = ms => new Promise(res => setTimeout(res, ms));\n\nconst schema = {\n type: 'object',\n column: 3,\n properties: {\n input1: {\n bind: 'a.b.c',\n title: 'Field A',\n type: 'string',\n required: true,\n //default: '1111',\n defaultValue: '1111sss'\n },\n input2: {\n title: 'Field B',\n type: 'string',\n required: true,\n default: '{{formData.input1}}'\n },\n obj: {\n type: 'object',\n title: '卡片主题',\n widget: 'card',\n description: '这是一个对象类型',\n column: 3,\n properties: {\n input1: {\n title: 'Field A',\n type: 'string',\n },\n input2: {\n title: 'Field B',\n type: 'string',\n default: '{{formData.obj.input1}}'\n }\n }\n },\n list: {\n title: '对象数组',\n description: '对象数组嵌套功能',\n type: 'array',\n widget: 'cardList',\n default: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],\n items: {\n type: 'object',\n title: '卡片主题',\n description: '这是一个对象类型',\n column: 3,\n widget: 'lineTitle',\n properties: {\n input1: {\n title: 'Field A',\n type: 'string',\n },\n input2: {\n title: 'Field B',\n type: 'string',\n default: '{{rootValue.input1}}'\n },\n obj: {\n type: 'object',\n title: '卡片主题',\n widget: 'card',\n description: '这是一个对象类型',\n column: 3,\n properties: {\n input1: {\n title: 'Field A',\n type: 'string',\n },\n input2: {\n title: 'Field B',\n type: 'string',\n default: '{{formData.obj.input1}}'\n },\n list: {\n title: '对象数组',\n description: '对象数组嵌套功能',\n type: 'array',\n widget: 'cardList',\n items: {\n type: 'object',\n title: '卡片主题',\n description: '这是一个对象类型',\n column: 3,\n widget: 'lineTitle',\n properties: {\n input1: {\n title: 'Field A',\n type: 'string',\n },\n input2: {\n title: 'Field B',\n type: 'string',\n default: '{{rootValue.input1}}'\n }\n }\n }\n }\n }\n },\n // list: {\n // title: '对象数组',\n // description: '对象数组嵌套功能',\n // type: 'array',\n // widget: 'cardList',\n // items: {\n // type: 'object',\n // title: '卡片主题',\n // description: '这是一个对象类型',\n // column: 3,\n // widget: 'lineTitle',\n // properties: {\n // input1: {\n // title: 'Field A',\n // type: 'string',\n // },\n // input2: {\n // title: 'Field B',\n // type: 'string',\n // default: '{{rootValue.input1}}'\n // }\n // }\n // }\n // }\n }\n }\n }\n }\n};\n\nconst Demo = () => {\n const form = useForm();\n\n const beforeFinish: any = ({ data, errors, schema }) => {\n if (data.objectName && data.objectName.input1 === '123') return;\n return delay(1000).then(() => {\n return {\n name: 'objectName.select1',\n error: ['外部校验错误'],\n };\n });\n };\n\n const onFinish = (formData: any) => {\n console.log(formData, 'formData');\n };\n\n return (\n \n {\n return children;\n }\n }}\n />\n \n
\n );\n};\n\nexport default Demo;\n"
},
{
"path": "docs/form-render/demo/dymic.tsx",
"content": "import React, { useState } from 'react';\nimport { Button, Modal } from 'antd';\nimport FormRender, { useForm } from 'form-render';\n\nconst delay = ms => new Promise(res => setTimeout(res, ms));\n\nexport enum Language {\n CN = 'cn',\n EN = 'en',\n CA = 'ca',\n}\n\nexport const LanguageText = {\n [Language.CN]: '中文简体',\n [Language.EN]: '英文',\n [Language.CA]: '中文繁体',\n};\n\nexport const LanguageEmailContent = {\n [Language.CN]: 'emailContent',\n [Language.EN]: 'emailContentEn',\n [Language.CA]: 'emailContentCa',\n}\n\nconst items = Object.entries(LanguageText).map(([key, value]) => {\n return {\n label: value,\n key,\n }\n})\n\nconst schema = {\n type: 'object',\n displayType: 'row',\n properties: {\n templateName: {\n title: '模版名称',\n type: 'string',\n displayType: 'row',\n required: true,\n props: {},\n },\n // language: {\n // default: Language.CN,\n // widget: 'tabs',\n // type: 'string',\n // props: {\n // type: 'card',\n // items: items\n // },\n // },\n emailSubject: {\n title: '邮件标题',\n type: 'string',\n displayType: 'row',\n required: true,\n props: {},\n hidden: `{{formData.language !== 'cn'}}`\n },\n list: {\n title: '活动模版',\n type: 'array',\n widget: 'simpleList',\n items: {\n type: 'object',\n properties: {\n input1: {\n title: '输入框 A',\n type: 'string',\n },\n input2: {\n title: '输入框 B',\n type: 'string',\n },\n input3: {\n title: '输入框 C',\n type: 'string',\n },\n },\n },\n },\n },\n};\n\nconst Demo = () => {\n const form = useForm();\n const [visible, setVisible] = useState();\n\n const onFinish = (formData: any) => {\n console.log(formData, 'formData');\n };\n\n return (\n \n {\n return 'sdfadf'\n }\n }}\n onFinish={onFinish} // 如果beforeFinish返回一个promise，onFinish会等promise resolve之后执行\n debug={true}\n />\n \n \n
\n );\n};\n\nexport default Demo;\n"
},
{
"path": "docs/form-render/demo/form-slim/basic.tsx",
"content": "/**\n * transform: true\n * defaultShowCode: true\n */\nimport React from 'react';\nimport { FormSlimRender, useForm, Input, Select } from 'form-render';\n\nconst schema = {\n type: 'object',\n displayType: 'row',\n properties: {\n input1: {\n title: '输入框',\n type: 'string',\n props: {},\n },\n select1: {\n title: '单选',\n type: 'string',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n }\n }\n};\n\nexport default () => {\n const form = useForm();\n\n return \n \n
\n \n );\n}\n"
},
{
"path": "docs/form-render/demo/validateFields.tsx",
"content": "import React from 'react';\nimport FormRender, { useForm } from 'form-render';\nimport { Button } from 'antd';\n\nconst schema = {\n type: 'object',\n properties: {\n input1: {\n title: '简单输入框',\n type: 'string',\n required: true,\n },\n select1: {\n title: '单选',\n type: 'string',\n required: true,\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n }\n }\n};\n\nexport default () => {\n const form = useForm();\n\n const onValidateFields = () => {\n form.validateFields(['input1'])\n .then(values => {\n console.log(values, 'values');\n })\n .catch(errors => {\n console.log(errors, 'errors');\n });\n }\n\n return (\n <>\n \n \n
\n \n );\n}\n"
},
{
"path": "docs/form-render/demo/widget/basic.tsx",
"content": "import React from 'react';\nimport { Input, Button, Space } from 'antd';\nimport Form, { useForm } from 'form-render';\nimport type { WidgetProps } from 'form-render';\n\nconst schema = {\n type: 'object',\n properties: {\n phone: {\n title: '自定义 Input',\n type: 'string',\n widget: 'CaptchaInput',\n foo: 'xxx',\n props: {\n foo: 'xxxx',\n }\n },\n },\n};\n\nconst CaptchaInput: React.FC{age}
\n {schema.description}
\n )\n}\n\nconst Demo = () => {\n const form = useForm();\n return (\n {schema.title}
\n )\n}\n\nconst Demo = () => {\n const form = useForm();\n return (\n {age}
\n \n setReadOnly(checked)}\n checkedChildren=\"只读\"\n unCheckedChildren=\"编辑\"\n />\n
\n );\n};\n\nexport default Demo;\n"
},
{
"path": "docs/form-render/disaply-search.md",
"content": "---\norder: 1\ntoc: content\nmobile: false\ngroup: \n title: 最佳示例\n order: 2\n---\n\n# 查询表单\n\n## 基础\n\n```jsx\nimport React from 'react';\nimport { useForm, SearchForm } from 'form-render';\n\nconst schema = {\n type: 'object',\n displayType: 'row',\n properties: {\n inputA: {\n title: 'Field A',\n type: 'string',\n props: {},\n },\n inputB: {\n title: 'Field B',\n type: 'string',\n props: {},\n },\n input3: {\n title: 'Field C',\n type: 'string',\n props: {},\n },\n selectA: {\n title: 'Field D',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' },\n ]\n }\n }\n }\n};\n\nexport default () => {\n const form = useForm();\n\n const onSearch = (values) => {\n console.log(values, 'searchData');\n };\n\n return (\n \n \n FormRender\n
\n\n FormRender\n\n \n \n \n \n \n \n \n \n \n \n \n \n
\n ![](\"https://gw.alipayobjects.com/mdn/rms_e18934/afts/img/A*4QYNTbKU6xAAAAAAAAAAAABkARQnAQ?raw=true\")
\n
"
},
{
"path": "docs/form-render/migrate.md",
"content": "---\norder: 0\ntoc: content\nmobile: false\nhide: true\ngroup: \n title: 其他\n order: 5\n---\n\n# V2 升级方案\n本文档将帮助你从 1.x 升级到 2.x 版本，2.x 将不再对 0.x 版本进行兼容\n\n## 特性\n\n全新的 form-render 2.0 主要具备以下特性：\n\n- 🚀 **更好的表单性能**：通过对 form-render 重构，底层接入 Antd Form 来实现表单的数据收集、校验等逻辑，提升表单的整体性能。有效的解决了表单数据改变表单全局刷新的问题。\n- 🎨 **全新的UI样式**：通过对中后台表单业务梳理，定制了一套全新的 UI 样式和交互规范，提升表单整体美观度 。[最佳展示](/form-render/display-row)\n- 🚥 **国际化**：国际化多语言支持，内置中英文语言包，英文版 locale: 'en-US'\n- 💎 **Antd V5**：兼容 antd V5 版本，无需配置\n\n## 依赖升级\n```diff\n\"dependencies\": {\n- \"form-render\": \"^1.0.0\",\n+ \"form-render\": \"^2.0.0\",\n}\n```\n\n## 不兼容处理\n\n### form.formData 弃用\nform.formData 弃用，改用 form.getValues() 方式获取\n\n```diff\n- form.formData\n+ form.getValues()\n```\n\n## Schema 相关\n\n### theme 弃用\n嵌套组件 theme 字段 弃用，统一改成 widget 声明。\n默认是 widget: 'collapse' 折叠卡片，其他类型参考 [表单布局](/form-render/advanced-layout) 示例\n\n### description 不再自动调整样式\n在 1.x 中 description 在 displayType 为 `row` 的情况下，会自动转换为 tooltip。在 2.x 中不再自动转换，需要手动调整\n\n```diff\n{\n displayType: 'row',\n- description: 'xxx',\n+ tooltip: 'xxx'\n}\n```\n\n### bind 会在 `form.setValues`、`form.getValues` 以及 `onFinish` 生效\n\n在 2.x 中 bind 会始终生效，你应该始终使用 bind 之后的 formData。\n\n### required 不支持统一设置\n\n你需要在每个 item 中指定 `required`\n\n```diff\n{\n- required: [\n- 'input',\n- ],\n properties: {\n input: {\n title: '输入框',\n type: 'string',\n+ required: true,\n }\n }\n}\n\n```\n\n### validator 直接返回布尔或对象\n\n2.x 中 validator 可以直接返回布尔，或者对象用于动态设置 message 内容\n\n```diff\n{\n validator: (_, value) => {\n- return Promise.reject('xxx')\n+ return {\n+ status: false,\n+ message: 'xxx',\n+ }\n\n- return Promise.resolve()\n+ return true\n },\n}\n\n```\n\n## Form 相关\n\n### useForm 入参移除\n```js\n{\n formData,\n onChange,\n onValidate,\n showValidate,\n /** 数据分析接口，表单展示完成渲染时触发 */\n logOnMount: _logOnMount,\n /** 数据分析接口，表单提交成功时触发，获得本次表单填写的总时长 */\n logOnSubmit: _logOnSubmit,\n} \n```\nlogOnMount、logOnSubmit 通过 props 传递，其他几个废弃\n\n注意 logOnMount、logOnSubmit 不再兼容从上获取 window.FR_LOGGER\n\n\n\n### onFinish 提交函数\n只有校验通过 onFinish 才会被触发，不在返回错误信息参数，为了兼容1.0版本，错误信息默认返回 []\n\n\n```diff\n- const onFinish = (data, errors) => {\n\n}\n\n+ const onFinish = (data) => {\n\n}\n\n```\n### validateFields\nerrorInfo 的出参名称发生变更\n\n```diff\nvalidateFields()\n .then(values => {\n /*\n values:{\n input1: 'input1 输入的值'\n }\n */\n })\n .catch(errorInfo => {\n /*\n errorInfo:\n {\n- data: {\n- input1: 'input1 输入的值',\n- },\n\n+ values: {\n+ input1: 'input1 输入的值',\n+ },\n\n\n- errors: [\n- { name: 'input1', error: ['input1 的error信息'] },\n- ]\n+ errorFields: [\n+ { name: ['password'], errors: ['Please input your Password!'] },\n+ ],\n\n }\n */\n });\n \n```\n\n### globalProps 变更\n通过`globalProps`注入的数据在任何组件（以及自定义组件）中可以被取到和使用。\n变更：自定义组件 通过 props.addons.globalProps 然后进行解构，不在自动进行属性合并注入到自定义组件中（防止其他组件被污染）\n\n\n### mapping 弃用\nmapping 配置弃用，映射关系通过 widgets 组件实例进行覆盖（如果和内部名字一样会覆盖内部组件）\n```json\ninput,\ncheckbox, // 勾选框\ncheckboxes, // checkbox多选\ncolor,\ndate,\ntime,\ndateRange,\ntimeRange,\nimageInput,\nurl,\nselect,\nmultiSelect, // 下拉多选\nnumber,\nradio, // Radio.Group)\nslider, // 带滚条的number\nswitch,\ntextarea,\nupload,\nhtml,\nrate,\ntreeSelect,\nerrorSchemaWidget // 错误显示\n```\n\n### Watch 不再监听 set 事件\n\n在 2.x 中，`watch` 不再监听由于 `setValues` 和 `setValueByPath` 导致的数据变化。你应该在执行 set 事件的同时执原本的监听事件。\n"
},
{
"path": "docs/form-render/schema/baseControl.ts",
"content": "export default {\n type: 'object',\n displayType: 'row',\n properties: {\n void1: {\n title: '常用组件',\n type: 'void',\n widget: 'voidTitle'\n },\n input1: {\n title: '输入框',\n type: 'string',\n widget: 'input'\n },\n number1: {\n title: '数字输入框',\n type: 'number',\n widget: 'inputNumber'\n },\n select1: {\n title: '下拉单选',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n multiSelect1: {\n title: '多选',\n type: 'array',\n widget: 'multiSelect',\n description: '下拉多选',\n props: {\n options: [\n { label: '杭州', value: 'a' },\n { label: '武汉', value: 'b' },\n { label: '湖州', value: 'c' },\n { label: '贵阳', value: 'd' }\n ]\n }\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n checkboxes1: {\n title: '点击多选',\n type: 'array',\n widget: 'checkboxes',\n props: {\n options: [\n { label: '杭州', value: 'a' },\n { label: '武汉', value: 'b' },\n { label: '湖州', value: 'c' },\n { label: '贵阳', value: 'd' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n void2: {\n title: '其他组件',\n type: 'void',\n widget: 'voidTitle'\n },\n html1: {\n title: 'HTML',\n type: 'string',\n widget: 'html'\n },\n switch1: {\n title: '开关',\n type: 'boolean',\n widget: 'switch'\n },\n checkbox1: {\n title: '是否选择',\n type: 'boolean',\n widget: 'checkbox'\n },\n slider1: {\n title: '带滑动条',\n type: 'number',\n widget: 'slider'\n },\n image1: {\n title: '图片展示',\n type: 'string',\n widget: 'imageInput'\n },\n color1: {\n title: '颜色选择',\n type: 'string',\n widget: 'color'\n },\n url1: {\n title: '链接',\n type: 'string',\n widget: 'urlInput'\n }\n }\n};"
},
{
"path": "docs/form-render/schema/basic.ts",
"content": "export default {\n type: 'object',\n column: 3,\n displayType: 'row',\n properties: {\n input1: {\n title: 'Field A',\n type: 'string'\n },\n input2: {\n title: 'Field B',\n type: 'string'\n },\n input3: {\n title: 'Field C',\n type: 'string'\n },\n input4: {\n title: 'Field D',\n type: 'string'\n }\n }\n};"
},
{
"path": "docs/form-render/schema/cellSpan.ts",
"content": "export default {\n type: 'object',\n column: 3,\n displayType: 'row',\n properties: {\n input1: {\n title: 'Field A',\n type: 'string'\n },\n input2: {\n title: 'Field B',\n type: 'string'\n },\n input3: {\n title: 'Field C',\n type: 'string'\n },\n input4: {\n title: 'Field D',\n type: 'string',\n cellSpan: 2\n },\n input5: {\n title: 'Field E',\n type: 'string'\n }\n }\n};"
},
{
"path": "docs/form-render/schema/schema.ts",
"content": "export const basic = {\n type: 'object',\n column: 3,\n displayType: 'row',\n properties: {\n input1: {\n title: 'Input A',\n type: 'string'\n },\n input2: {\n title: 'Input B',\n type: 'string'\n },\n input3: {\n title: 'Input C',\n type: 'string'\n },\n input4: {\n title: 'Input D',\n type: 'string'\n }\n }\n};\n\nexport const expression = {\n type: 'object',\n displayType: 'column',\n properties: {\n input: {\n title: '{{formData.config.title || \"输入框\"}}',\n type: 'string',\n placeholder: '{{formData.config.placeholder}}',\n props: {\n size: '{{formData.config.size}}',\n },\n hidden: '{{formData.config.hidden === true}}',\n readOnly: '{{formData.config.readOnly === true}}',\n disabled: '{{formData.config.disabled === true}}',\n },\n rate: {\n title: 'rate',\n type: 'number',\n widget: 'rate',\n },\n config: {\n title: '配置',\n type: 'object',\n properties: {\n title: {\n title: 'title',\n type: 'string',\n },\n placeholder: {\n title: 'placeholder',\n type: 'string',\n },\n size: {\n title: 'input大小',\n type: 'string',\n enum: ['large', 'middle', 'small'],\n enumNames: ['大', '中', '小'],\n widget: 'radio',\n },\n hidden: {\n title: '是否隐藏',\n type: 'boolean',\n },\n readOnly: {\n title: '是否只读',\n type: 'boolean',\n },\n disabled: {\n title: '是否置灰',\n type: 'boolean',\n },\n },\n },\n },\n required: [],\n};\n\nexport const titleTrick = {\n displayType: 'row',\n type: 'object',\n properties: {\n inputName1: {\n title: '简单输入框',\n type: 'string',\n width: '50%',\n },\n desc: {\n type: 'html',\n bind: false,\n default: \"补充说明 hello\",\n width: '50%',\n },\n },\n};\n\n\n"
},
{
"path": "docs/form-render/schema/simple.ts",
"content": "export default {\n type: 'object',\n properties: {\n input: {\n title: '输入框',\n type: 'string',\n widget: 'input'\n },\n select: {\n title: '下拉框',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n }\n }\n};\n"
},
{
"path": "docs/form-render/schema/span.ts",
"content": "export default {\n type: 'object',\n displayType: 'row',\n properties: {\n input1: {\n title: 'Field A',\n type: 'string',\n span: 8\n },\n input2: {\n title: 'Field B',\n type: 'string',\n span: 8\n },\n input3: {\n title: 'Field C',\n type: 'string',\n span: 8\n },\n input11: {\n title: 'Field A',\n type: 'string',\n span: 8\n },\n input12: {\n title: 'Field B',\n type: 'string',\n span: 8\n },\n input4: {\n title: 'Field D',\n type: 'string',\n },\n input5: {\n title: 'Field E',\n type: 'string'\n }\n }\n};"
},
{
"path": "docs/form-render/test/bigJson.tsx",
"content": "import React, { useEffect } from 'react';\nimport FormRender, { useForm } from 'form-render';\nimport { Button, Input } from 'antd';\nimport { get } from 'lodash';\n\nconst schema = {\n type: 'object',\n displayType: 'row',\n properties: {\n list: {\n title: '对象数组',\n description: '对象数组嵌套功能',\n type: 'array',\n widget: 'cardList',\n items: {\n type: 'object',\n title: '卡片主题',\n description: '这是一个对象类型',\n column: 3,\n widget: 'card',\n properties: {\n input1: {\n title: '输入框 A',\n type: 'string',\n }\n }\n }\n }\n // obj: {\n // type: 'object',\n // title: '卡片主题',\n // description: '这是一个对象类型',\n // widget: 'collapse',\n // column: 3,\n // properties: {\n // list: {\n // title: '对象数组',\n // description: '对象数组嵌套功能',\n // type: 'array',\n // widget: 'cardList',\n // items: {\n // type: 'object',\n // title: '卡片主题',\n // description: '这是一个对象类型',\n // column: 3,\n // widget: 'card',\n // properties: {\n // input1: {\n // title: '输入框 A',\n // type: 'string',\n // }\n // }\n // }\n // }\n // }\n // }\n }\n};\n\nconst getTest = (schema: any) => {\n\n for (let i=0; i< 500; i++) {\n schema.properties.list.items.properties[i] = {\n title: '输入框 A',\n type: 'string',\n };\n // schema.properties[i] = {\n // title: '输入框 A',\n // type: 'string',\n // }\n }\n return schema;\n}\n\n\nexport default () => {\n const form = useForm();\n\n const _schema = getTest(schema);\n return (\n <>\n \n参数
| 说明 | 类型 | 默认值
|\n| ----------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |\n| schema | **必填**，描述表单的 schema，详见 [schema 规范](/docs/form-render/api-schema.md) | SchemaBase | - |\n| beforeFinish | 在 onFinish 前触发，一般用于外部校验逻辑的回填 | `({ data, errors, schema, ...rest }) => Error[] \\| Promise参数
| 描述 | 类型 |\n| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| submit | 触发提交流程，一般在提交按钮上使用 | `() => void` |\n| resetFields | 清空表单（也会清空一些内置状态，例如校验） | `({formData?: any, submitData?: any, errorFields?: Error[], touchedKeys?: string[], allTouched?: boolean}) => void` |\n| setErrorFields | 外部手动修改 errorFields 校验信息，用于外部校验回填 | `(error: Error[]) => void` |\n| setValues | 外部手动修改 formData，用于已填写的表单的数据回填 | `(formData: any) => void` |\n| setValueByPath | 外部修改指定单个 field 的数据(原名 onItemChange) | `(path: Path, value: any) => void` |\n| setSchemaByPath | 指定路径修改 schema | `(path: Path, value: any) => void` |\n| setSchema | 指定多个路径修改 schema | `({ path: value }) => void` |\n| getValues | 获取表单内部维护的数据, 如果参数为空则返回当前所有数据 | `(nameList?: Path[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any` |\n| getHiddenValues | 获取隐藏的表单数据 | `() => any` |\n| removeErrorField | 外部手动删除某一个 path 下所有的校验信息 | `(path: Path) => void` | |\n| isFieldTouched | 检查某个表单是否被用户操作过 | `(name: Path) => boolean` |\n| isFieldsTouched | 检查一组字段 fields 是否被用户操作过, allTouched 为 true 是检查是否所有字段都被操作过 | `(nameList?: Path[], allTouched?: boolean) => boolean` |\n| isFieldValidating | 检查对应字段 field 是否正在校验 | `(name: Path) => boolean` |\n| getFieldError | 获取对应字段 field 的错误信息 | `(name: Path) => string[]` |\n| getFieldsError | 获取一组字段 fields 对应的错误信息, 返回数组形式; 入参为空则获取所有字段对应的错误信息, 返回错误信息 | `(nameList: Path[]) => Error[]` |\n| setFields | 设置一组字段状态 | `(nameList: Field[]) => void` |\n| validateFields | 触发表单验证 | `(nameList?: Path[]) => Promise` |\n"
},
{
"path": "docs/form-render-mobile/demo/allWidget.tsx",
"content": "import React from 'react';\nimport { Button, Dialog } from 'antd-mobile';\nimport FormRender, { useForm } from 'form-render-mobile';\n\nconst schema = {\n type: 'object',\n properties: {\n cascader: {\n title: '级联',\n type: 'array',\n widget: 'cascader',\n props: {\n options: [\n { \n label: '浙江', \n value: 1, \n children: [\n { label: '杭州', value: 2 }\n ]\n },\n ]\n }\n },\n picker: {\n title: '选择',\n type: 'string',\n widget: 'picker',\n props: {\n options: [\n { label: '火车', value: 1 },\n { label: '飞机', value: 2 },\n { label: '火箭', value: 3 }\n ]\n }\n },\n date: {\n title: '日期',\n type: 'string',\n widget: 'datePicker',\n props: {\n precision: 'month'\n }\n },\n input: {\n title: '输入框',\n type: 'string',\n widget: 'input',\n required: true,\n placeholder: '请输入'\n },\n textarea: {\n title: '长文本',\n type: 'string',\n widget: 'textArea',\n placeholder: '请输入'\n },\n slider: {\n title: '滑动条',\n type: 'string',\n widget: 'slider',\n props: {\n range: true,\n }\n },\n switch: {\n title: '开关',\n type: 'bool',\n widget: 'switch',\n props: {\n uncheckedText: '关',\n checkedText: '开'\n }\n },\n stepper: {\n title: '步进器',\n type: 'number',\n widget: 'stepper'\n },\n rate: {\n title: '评分',\n type: 'string',\n widget: 'rate'\n },\n selector: {\n title: '选择组',\n type: 'string',\n widget: 'selector',\n props: {\n multiple: true,\n options: [\n { label: 'A', value: 'a' },\n { label: 'B', value: 'b' },\n { label: 'C', value: 'c' },\n { label: 'D', value: 'd' },\n { label: 'E', value: 'e' },\n { label: 'F', value: 'f' }\n ]\n }\n },\n radio: {\n title: '单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n }\n }\n};\n\n\nexport default () => {\n const form = useForm();\n\n const onFinish = (formData: any) => {\n Dialog.alert({\n content: {JSON.stringify(formData, null, 2)},\n })\n };\n\n return (\n {JSON.stringify(formData, null, 2)},\n })\n };\n\n return (\n {JSON.stringify(formData, null, 2)},\n })\n };\n\n return (\n \n \n 提交\n \n }\n />\n
\n );\n}\n"
},
{
"path": "docs/form-render-mobile/demo/collaspa.tsx",
"content": "import React from 'react';\nimport FormRender, { useForm } from 'form-render-mobile';\n\nconst schema = {\n type: 'object',\n displayType: 'row',\n properties: {\n obj: {\n type: 'object',\n title: '卡片主题',\n description: '这是一个对象类型',\n widget: 'collapse',\n items: [\n {\n title: '基础信息',\n properties: {\n input1: {\n title: '输入框 A',\n type: 'string',\n widget: 'input',\n },\n input2: {\n title: '输入框 B',\n type: 'string',\n widget: 'input',\n },\n input3: {\n title: '输入框 C',\n type: 'string',\n widget: 'input',\n },\n input4: {\n title: '输入框 D',\n type: 'string',\n widget: 'input',\n }\n }\n },\n {\n title: '其他信息',\n properties: {\n input1: {\n title: '输入框 A',\n type: 'string',\n widget: 'input',\n },\n input2: {\n title: '输入框 B',\n type: 'string',\n widget: 'input',\n },\n input3: {\n title: '输入框 C',\n type: 'string',\n widget: 'input',\n },\n input4: {\n title: '输入框 D',\n type: 'string',\n widget: 'input',\n }\n }\n }\n ]\n },\n },\n};\n\nexport default () => {\n const form = useForm();\n\n return {JSON.stringify(formData, null, 2)},\n })\n };\n\n return (\n \n \n 提交\n \n }\n />\n
\n );\n}\n"
},
{
"path": "docs/form-render-mobile/demo/index.tsx",
"content": "import React from 'react';\nimport { Button, Dialog } from 'antd-mobile';\nimport FormRender, { useForm } from 'form-render-mobile';\n\nconst schema = {\n type: 'object',\n properties: {\n input: {\n title: '输入框',\n type: 'string',\n widget: 'input',\n required: true,\n },\n slider: {\n title: '滑动条',\n type: 'string',\n widget: 'slider'\n },\n switch: {\n title: '开关',\n type: 'bool',\n widget: 'switch'\n },\n stepper: {\n title: '步进器',\n type: 'number',\n widget: 'stepper'\n },\n selector: {\n title: '选择组',\n type: 'string',\n widget: 'selector',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n radio: {\n title: '单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n date: {\n title: '日期',\n type: 'string',\n widget: 'datePicker',\n props: {\n precision: 'month'\n }\n },\n city: {\n title: '城市',\n type: 'array',\n widget: 'cascader',\n props: {\n options: [\n { label: '浙江', value: 1, children: [\n { label: '杭州', value: 2}\n ] },\n ]\n }\n }\n }\n};\n\nexport default () => {\n const form = useForm();\n \n const onFinish = (formData: any) => {\n Dialog.alert({\n content: {JSON.stringify(formData, null, 2)},\n })\n };\n\n return (\n {JSON.stringify(formData, null, 2)},\n })\n };\n\n return (\n \n \n
\n\n FormRender Mobile
\n\n \n ![\"npm\"](\"https://img.shields.io/npm/v/form-render-mobile.svg?maxAge=3600&style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dm/form-render-mobile.svg?style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dt/form-render-mobile.svg?style=flat-square\")
\n \n \n \n \n
{JSON.stringify(formData, null, 2)},\n })\n };\n\n return (\n \n v1 文档请访问 https://xrender.fun\n actions:\n - text: 立即使用\n link: /form-render\n - text: GitHub\n link: https://github.com/alibaba/x-render\nfeatures:\n - emoji: 🚀\n title: FormRender\n description: 像写一个 input 一样写表单\n - emoji: 🎨\n title: TableRender\n description: 协议生成 & 高度灵活的搜索列表\n - emoji: 💎\n title: FormGenerator\n description: 中后台表单可视化搭建生成利器\n - emoji: 🚁\n title: XFlow\n description: 画布流程编排解决方案\nfooter: false\n---\n\n\n\n## 贡献者们\n\n\n
\n actions:\n - text: 立即使用\n link: /form-render\n - text: GitHub\n link: https://github.com/alibaba/x-render\nfeatures:\n - emoji: 🚀\n title: FormRender\n description: 像写一个 input 一样写表单\n - emoji: 🎨\n title: TableRender\n description: 协议生成 & 高度灵活的搜索列表\n - emoji: 💎\n title: FormGenerator\n description: 中后台表单可视化搭建生成利器\n - emoji: 🚁\n title: XFlow\n description: 画布流程编排解决方案\nfooter: false\n---\n\n\n\n## 贡献者们\n\n\n
\n \n {\n const schema = require(`./json/simplest.json`);\n setValue(JSON.stringify(schema.schema, null, '\\t'))\n }}\n />\n \n },\n {\n label: 'FormData',\n key: 'data',\n children: \n {\n setFormData(values);\n }}\n />\n \n
\n \n
\n );\n};\n\nexport default Playground;"
},
{
"path": "docs/playground/json/basic.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"AllString\": {\n \"title\": \"string类\",\n \"type\": \"object\",\n \"properties\": {\n \"input\": {\n \"title\": \"简单输入框\",\n \"type\": \"string\",\n \"placeholder\": \"昵称\"\n },\n \"textarea\": {\n \"title\": \"文本编辑框\",\n \"type\": \"string\",\n \"format\": \"textarea\"\n },\n \"color\": {\n \"title\": \"颜色选择\",\n \"type\": \"string\",\n \"format\": \"color\"\n },\n \"image\": {\n \"title\": \"图片展示\",\n \"type\": \"string\",\n \"format\": \"image\",\n \"default\": \"http://placekitten.com/200/300\"\n },\n \"uploader\": {\n \"title\": \"上传文件\",\n \"type\": \"string\",\n \"format\": \"upload\",\n \"props\": {\n \"action\": \"https://www.mocky.io/v2/5cc8019d300000980a055e76\"\n }\n },\n \"treeSelect\": {\n \"title\": \"树形选择\",\n \"type\": \"string\",\n \"widget\": \"treeSelect\",\n \"props\": {\n \"treeDefaultExpandAll\": true,\n \"treeData\": [\n {\n \"title\": \"Node1\",\n \"value\": \"0-0\",\n \"key\": \"0-0\",\n \"children\": [\n {\n \"title\": \"Child Node1\",\n \"value\": \"0-0-1\",\n \"key\": \"0-0-1\"\n },\n {\n \"title\": \"Child Node2\",\n \"value\": \"0-0-2\",\n \"key\": \"0-0-2\"\n }\n ]\n },\n {\n \"title\": \"Node2\",\n \"value\": \"0-1\",\n \"key\": \"0-1\"\n }\n ]\n }\n }\n }\n },\n \"allDate\": {\n \"title\": \"时间类\",\n \"type\": \"object\",\n \"properties\": {\n \"date\": {\n \"title\": \"日期选择\",\n \"type\": \"string\",\n \"format\": \"date\"\n },\n \"dateTime\": {\n \"title\": \"日期时间选择\",\n \"type\": \"string\",\n \"format\": \"dateTime\"\n },\n \"time\": {\n \"title\": \"时间选择\",\n \"type\": \"string\",\n \"format\": \"time\"\n },\n \"dateRange\": {\n \"title\": \"日期范围\",\n \"type\": \"range\",\n \"format\": \"dateTime\",\n \"placeholder\": [\"开始时间\", \"结束时间\"]\n },\n \"timeRange\": {\n \"title\": \"时间范围\",\n \"type\": \"range\",\n \"format\": \"time\"\n },\n \"year\": {\n \"title\": \"年份选择\",\n \"type\": \"string\",\n \"format\": \"year\"\n },\n \"month\": {\n \"title\": \"月份选择\",\n \"type\": \"string\",\n \"format\": \"month\"\n },\n \"week\": {\n \"title\": \"周选择\",\n \"type\": \"string\",\n \"format\": \"week\"\n },\n \"quarter\": {\n \"title\": \"季度选择\",\n \"type\": \"string\",\n \"format\": \"quarter\"\n }\n }\n },\n \"allNumber\": {\n \"title\": \"number类\",\n \"type\": \"object\",\n \"properties\": {\n \"number1\": {\n \"title\": \"数字输入框\",\n \"description\": \"1 - 1000\",\n \"type\": \"number\",\n \"min\": 1,\n \"max\": 1000\n },\n \"number2\": {\n \"title\": \"带滑动条\",\n \"type\": \"number\",\n \"widget\": \"slider\"\n },\n \"rate\": {\n \"title\": \"评价\",\n \"type\": \"number\",\n \"widget\": \"rate\"\n }\n }\n },\n \"allBoolean\": {\n \"title\": \"boolean类\",\n \"type\": \"object\",\n \"properties\": {\n \"radio\": {\n \"title\": \"是否通过\",\n \"type\": \"boolean\"\n },\n \"switch\": {\n \"title\": \"开关控制\",\n \"type\": \"boolean\",\n \"widget\": \"switch\"\n }\n }\n },\n \"allEnum\": {\n \"title\": \"选择类\",\n \"type\": \"object\",\n \"properties\": {\n \"select\": {\n \"title\": \"单选\",\n \"type\": \"string\",\n \"enum\": [\"a\", \"b\", \"c\"],\n \"enumNames\": [\"早\", \"中\", \"晚\"],\n \"default\": \"a\",\n \"widget\": \"select\"\n },\n \"radio\": {\n \"title\": \"单选\",\n \"type\": \"string\",\n \"enum\": [\"a\", \"b\", \"c\"],\n \"enumNames\": [\"早\", \"中\", \"晚\"],\n \"widget\": \"radio\"\n },\n \"multiSelect\": {\n \"title\": \"多选\",\n \"tooltip\": \"下拉多选\",\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n },\n \"enum\": [\"A\", \"B\", \"C\", \"D\"],\n \"enumNames\": [\"杭州\", \"武汉\", \"湖州\", \"贵阳\"],\n \"widget\": \"multiSelect\"\n },\n \"boxes\": {\n \"title\": \"多选\",\n \"tooltip\": \"checkbox\",\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n },\n \"enum\": [\"A\", \"B\", \"C\", \"D\"],\n \"enumNames\": [\"杭州\", \"武汉\", \"湖州\", \"贵阳\"],\n \"widget\": \"checkboxes\"\n }\n }\n },\n \"listName2\": {\n \"title\": \"对象数组\",\n \"description\": \"对象数组嵌套功能\",\n \"type\": \"array\",\n \"min\": 1,\n \"max\": 3,\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"input1\": {\n \"title\": \"简单输入框\",\n \"type\": \"string\"\n },\n \"select1\": {\n \"title\": \"单选\",\n \"type\": \"string\",\n \"enum\": [\"a\", \"b\", \"c\"],\n \"enumNames\": [\"早\", \"中\", \"晚\"]\n }\n }\n }\n }\n }\n }\n}\n"
},
{
"path": "docs/playground/json/demo.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"inputDemo\": {\n \"title\": \"长度\",\n \"type\": \"string\",\n \"default\": \"750\",\n \"rules\": [{ \"pattern\": \"^[A-Za-z0-9]+$\", \"message\": \"请输入正确格式\" }],\n \"className\": \"input-with-px\",\n \"props\": {\n \"addonAfter\": \"px\"\n }\n },\n \"numberDemo\": {\n \"title\": \"数字\",\n \"description\": \"数字输入框\",\n \"type\": \"number\",\n \"min\": 10,\n \"max\": 100,\n \"step\": 10\n },\n \"textareaDemo\": {\n \"title\": \"输入框\",\n \"type\": \"string\",\n \"widget\": \"textarea\",\n \"default\": \"FormRender\\nHello World!\",\n \"required\": true\n },\n\n \"imgDemo\": {\n \"title\": \"图片\",\n \"type\": \"string\",\n \"format\": \"image\",\n \"default\": \"https://img.alicdn.com/tfs/TB1P8p2uQyWBuNjy0FpXXassXXa-750-1334.png\"\n },\n \"uploadDemo\": {\n \"title\": \"文件上传\",\n \"type\": \"string\",\n \"default\": \"https://img.alicdn.com/tfs/TB1P8p2uQyWBuNjy0FpXXassXXa-750-1334.png\",\n \"widget\": \"upload\",\n \"props\": {\n \"action\": \"https://www.mocky.io/v2/5cc8019d300000980a055e76\"\n }\n },\n \"disabledDemo\": {\n \"title\": \"不可用\",\n \"type\": \"string\",\n \"default\": \"我是一个被 disabled 的值\",\n \"disabled\": true\n },\n \"enumDemo\": {\n \"title\": \"枚举\",\n \"type\": \"string\",\n \"enum\": [\"A\", \"B\"],\n \"enumNames\": [\n \"养成\",\n \"试试\"\n ],\n \"width\": \"50%\"\n },\n \"dateDemo\": {\n \"title\": \"时间\",\n \"format\": \"dateTime\",\n \"type\": \"string\",\n \"widget\": \"date\",\n \"width\": \"50%\",\n \"default\": \"2018-11-22\",\n \"required\": true\n },\n \"objDemo\": {\n \"title\": \"单个对象\",\n \"description\": \"这是一个对象类型\",\n \"type\": \"object\",\n \"properties\": {\n \"isLike\": {\n \"title\": \"是否显示颜色选择\",\n \"type\": \"boolean\",\n \"default\": true\n },\n \"background\": {\n \"title\": \"颜色选择\",\n \"description\": \"特殊面板\",\n \"format\": \"color\",\n \"type\": \"string\",\n \"hidden\": \"{{rootValue.isLike === false}}\",\n \"default\": \"#ffff00\"\n },\n \"wayToTravel\": {\n \"title\": \"旅行方式\",\n \"type\": \"string\",\n \"enum\": [\"self\", \"group\"],\n \"enumNames\": [\"自驾\", \"跟团\"],\n \"widget\": \"radio\"\n },\n \"canDrive\": {\n \"title\": \"是否拥有驾照\",\n \"type\": \"boolean\",\n \"default\": false,\n \"hidden\": \"{{rootValue.wayToTravel !== 'self'}}\"\n }\n },\n \"required\": [\"background\"]\n },\n \"multiSelectDemo\": {\n \"title\": \"多选组件\",\n \"tooltip\": \"多选功能\",\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n },\n \"enum\": [\"A\", \"B\", \"C\", \"D\"],\n \"enumNames\": [\"杭州\", \"武汉\", \"湖州\", \"贵阳\"],\n \"widget\": \"multiSelect\",\n \"required\": true\n },\n \"custom\": {\n \"properties\": {\n \"payType\": {\n \"title\": \"支付方式\",\n \"type\": \"array\",\n \"items\": { \"type\": \"string\" },\n \"enum\": [\"1\", \"5\", \"6\"],\n \"enumNames\": [\"预付\", \"面付\", \"信用住\"]\n }\n },\n \"type\": \"object\",\n \"required\": [\"payType\"],\n \"title\": \"酒店行业限制\",\n \"name\": \"custom\"\n },\n \"arrDemo\": {\n \"title\": \"对象数组\",\n \"description\": \"对象数组嵌套功能\",\n \"type\": \"array\",\n \"min\": 1,\n \"max\": 3,\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"num\": {\n \"title\": \"数字参数\",\n \"description\": \"number类型\",\n \"type\": \"number\"\n },\n \"name\": {\n \"title\": \"字符名称\",\n \"description\": \"string类型\",\n \"type\": \"string\",\n \"rules\": [{ \"pattern\": \"^[A-Za-z0-9]+$\" }],\n \"disabled\": \"{{rootValue.num === 3}}\"\n }\n }\n },\n \"props\": {\n \"foldable\": true,\n \"hideDelete\": \"{{rootValue.arrDemo.length === 1}}\",\n \"buttons\": [\n {\n \"text\": \"复制\",\n \"icon\": \"CopyOutlined\",\n \"callback\": \"copyLast\"\n }\n ]\n }\n }\n }\n }\n}\n"
},
{
"path": "docs/playground/json/dynamic-function.js",
"content": "module.exports = {\n schema: {\n type: 'object',\n properties: {\n input: {\n title: '动态函数检验',\n tooltip: '动态函数检验，存储的是纯函数',\n type: 'string',\n labelWidth: 120,\n rules: [\n {\n validator: (rule, value) => value === 'muji',\n message: '输入的值不等于muji,请重新输入！',\n },\n ],\n },\n },\n },\n};\n"
},
{
"path": "docs/playground/json/format.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"inputName\": {\n \"title\": \"url输入框\",\n \"type\": \"string\",\n \"format\": \"url\"\n },\n \"imageName\": {\n \"title\": \"图片展示\",\n \"type\": \"string\",\n \"format\": \"image\"\n },\n \"inputName2\": {\n \"title\": \"email输入框\",\n \"type\": \"string\",\n \"format\": \"email\"\n },\n \"string\": {\n \"title\": \"正则校验字符串\",\n \"tooltip\": \"a-z\",\n \"type\": \"string\",\n \"rules\": [\n {\n \"pattern\": \"^[a-z]+$\"\n }\n ]\n }\n }\n }\n}\n"
},
{
"path": "docs/playground/json/function.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"case1\": {\n \"title\": \"整体隐藏\",\n \"type\": \"object\",\n \"properties\": {\n \"showMore\": {\n \"title\": \"显示更多\",\n \"type\": \"boolean\"\n },\n \"x1\": {\n \"title\": \"输入框1\",\n \"type\": \"string\",\n \"hidden\": \"{{!formData.case1.showMore}}\"\n },\n \"x2\": {\n \"title\": \"输入框2\",\n \"type\": \"string\",\n \"hidden\": \"{{!formData.case1.showMore}}\"\n }\n }\n },\n \"case2\": {\n \"title\": \"选项联动\",\n \"type\": \"object\",\n \"properties\": {\n \"bi\": {\n \"title\": \"汇款币种\",\n \"type\": \"string\",\n \"enum\": [\n \"rmb\",\n \"dollar\"\n ],\n \"enumNames\": [\n \"人民币\",\n \"美元\"\n ]\n },\n \"inputName\": {\n \"title\": \"金额\",\n \"tooltip\": \"{{formData.case2.bi === 'dollar' ? '一次汇款不超过150美元':'一次汇款不超过1000元'}}\",\n \"type\": \"string\",\n \"props\": {\n \"addonBefore\": \"{{formData.case2.bi === 'dollar'? '$':'￥'}}\",\n \"addonAfter\": \"{{formData.case2.bi === 'dollar'? '美元':'元'}}\"\n }\n }\n }\n },\n \"case3\": {\n \"title\": \"列表/显示不同组件\",\n \"type\": \"object\",\n \"properties\": {\n \"ruleList\": {\n \"title\": \"球员筛选\",\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"attr\": {\n \"title\": \"标准\",\n \"type\": \"string\",\n \"widget\": \"select\",\n \"enum\": [\n \"goal\",\n \"league\"\n ],\n \"enumNames\": [\n \"入球数\",\n \"所在联盟\"\n ],\n \"width\": \"40%\"\n },\n \"relation\": {\n \"title\": \"关系\",\n \"type\": \"string\",\n \"enum\": [\n \">\",\n \"<\",\n \"=\"\n ],\n \"widget\": \"select\",\n \"hidden\": \"{{rootValue.attr === 'league'}}\",\n \"width\": \"20%\"\n },\n \"goal\": {\n \"title\": \"入球数\",\n \"type\": \"string\",\n \"rules\": [\n {\n \"pattern\": \"^[0-9]+$\",\n \"message\": \"输入正确得分\"\n }\n ],\n \"hidden\": \"{{rootValue.attr === 'league'}}\",\n \"width\": \"40%\"\n },\n \"league\": {\n \"title\": \"名称\",\n \"type\": \"string\",\n \"enum\": [\n \"a\",\n \"b\",\n \"c\"\n ],\n \"enumNames\": [\n \"西甲\",\n \"英超\",\n \"中超\"\n ],\n \"widget\": \"select\",\n \"hidden\": \"{{rootValue.attr !== 'league'}}\",\n \"width\": \"40%\"\n }\n }\n }\n }\n }\n }\n }\n }\n}"
},
{
"path": "docs/playground/json/input.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"string\": {\n \"title\": \"字符串\",\n \"description\": \"带清空x按钮\",\n \"type\": \"string\",\n \"default\": \"hello world\",\n \"props\": {\n \"allowClear\": true\n },\n \"width\": \"50%\"\n },\n \"string2\": {\n \"title\": \"复杂校验\",\n \"description\": \"pattern和message的用法\",\n \"type\": \"string\",\n \"rules\": [\n { \"pattern\": \"^[A-Za-z0-9]+$\", \"message\": \"请输入数字或英文字母\" }\n ],\n \"placeholder\": \"请输入数字或英文\",\n \"width\": \"50%\"\n },\n \"string3\": {\n \"title\": \"长度控制\",\n \"description\": \"长度在5-15个字之间\",\n \"type\": \"string\",\n \"minLength\": 5,\n \"maxLength\": 15,\n \"width\": \"50%\"\n },\n \"string4\": {\n \"title\": \"前置/后置标签\",\n \"type\": \"string\",\n \"props\": {\n \"addonBefore\": \"长度\",\n \"addonAfter\": \"px\"\n },\n \"width\": \"50%\"\n },\n \"string5\": {\n \"title\": \"前后缀\",\n \"type\": \"string\",\n \"rules\": [\n {\n \"pattern\": \"^[0-9]+$\",\n \"message\": \"请输入数字\"\n }\n ],\n \"props\": {\n \"prefix\": \"￥\",\n \"suffix\": \"RMB\"\n },\n \"width\": \"50%\"\n },\n \"string6\": {\n \"title\": \"置灰的输入框\",\n \"type\": \"string\",\n \"disabled\": true,\n \"default\": \"hello world\",\n \"width\": \"50%\"\n },\n \"string7\": {\n \"title\": \"文本框\",\n \"description\": \"固定高度\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"props\": {\n \"row\": 4\n }\n },\n \"string8\": {\n \"title\": \"文本框\",\n \"description\": \"自动高度\",\n \"type\": \"string\",\n \"format\": \"textarea\",\n \"placeholder\": \"根据内容缩放\",\n \"props\": {\n \"autoSize\": {\n \"minRows\": 3,\n \"maxRows\": 5\n }\n }\n }\n },\n \"required\": [\"string4\", \"string5\"]\n },\n \"formData\": {}\n}\n"
},
{
"path": "docs/playground/json/new-feature.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"html\": {\n \"title\": \"html元素的使用\",\n \"type\": \"object\",\n \"properties\": {\n \"html1\": {\n \"title\": \"纯字符串\",\n \"type\": \"html\",\n \"default\": \"hello world\"\n },\n \"input\": {\n \"title\": \"放在尾部\",\n \"type\": \"string\",\n \"width\": \"70%\"\n },\n \"html3\": {\n \"title\": \"html\",\n \"type\": \"html\",\n \"default\": \"注意事项\",\n \"width\": \"30%\"\n }\n }\n },\n \"customItemButtons\": {\n \"title\": \"数组item自定义button\",\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"a\": {\n \"title\": \"简单输入框\",\n \"type\": \"string\"\n },\n \"b\": {\n \"title\": \"是否判断\",\n \"type\": \"boolean\"\n },\n \"c\": {\n \"title\": \"开关\",\n \"type\": \"boolean\",\n \"widget\": \"switch\"\n }\n }\n },\n \"default\": [{ \"a\": \"happy\", \"b\": false, \"c\": false }, {}],\n \"props\": {\n \"foldable\": true,\n \"itemButtons\": [\n {\n \"html\": \"复制\",\n \"callback\": \"copyMe\"\n }\n ]\n }\n },\n \"labelDemo\": {\n \"title\": \"标签长度自定义\",\n \"description\": \"在object上定义labelWidth会影响所有子元素\",\n \"type\": \"object\",\n \"labelWidth\": 200,\n \"properties\": {\n \"inputName\": {\n \"title\": \"简单输入框\",\n \"type\": \"string\"\n },\n \"dateName\": {\n \"title\": \"时间选择\",\n \"type\": \"string\",\n \"format\": \"date\"\n },\n \"colorName\": {\n \"title\": \"颜色选择\",\n \"type\": \"string\",\n \"format\": \"color\",\n \"labelWidth\": 80\n }\n }\n },\n \"objectName\": {\n \"title\": \"对象\",\n \"description\": \"这是一个对象类型\",\n \"type\": \"object\",\n \"properties\": {\n \"inputDemo\": {\n \"title\": \"前后缀\",\n \"type\": \"string\",\n \"rules\": [\n { \"pattern\": \"^[A-Za-z0-9]+$\", \"message\": \"请输入数字或英文字母\" }\n ],\n \"width\": \"50%\",\n \"props\": {\n \"addonBefore\": \"画布长度\",\n \"addonAfter\": \"px\"\n }\n },\n \"numberDemo\": {\n \"title\": \"数字\",\n \"description\": \"数字输入框\",\n \"type\": \"number\",\n \"min\": 10,\n \"max\": 100,\n \"step\": 10,\n \"width\": \"50%\",\n \"widget\": \"slider\"\n },\n \"dateRange\": {\n \"title\": \"日期范围\",\n \"type\": \"range\",\n \"format\": \"dateTime\",\n \"placeholder\": [\"开始\", \"结束\"]\n }\n }\n },\n \"customizedWidgets\": {\n \"title\": \"自定义组件\",\n \"type\": \"object\",\n \"properties\": {\n \"asyncSelect\": {\n \"title\": \"异步加载的下拉框\",\n \"type\": \"string\",\n \"labelWidth\": 130,\n \"widget\": \"asyncSelect\",\n \"placeholder\": \"搜索淘宝商品\"\n }\n }\n },\n \"complexArray\": {\n \"title\": \"复杂结构数组\",\n \"description\": \"数组item中含有数组等\",\n \"type\": \"array\",\n \"props\": {\n \"foldable\": true,\n \"hideIndex\": true\n },\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"age\": {\n \"title\": \"填写年龄\",\n \"type\": \"number\",\n \"hidden\": \"{{rootValue.movieType === 'a' || rootValue.movieType === 'c'}}\"\n },\n \"movieType\": {\n \"title\": \"短片类型\",\n \"type\": \"string\",\n \"enum\": [\"a\", \"b\", \"c\"],\n \"enumNames\": [\"教育\", \"恐怖\", \"故事\"]\n },\n \"movieList\": {\n \"title\": \"电影列表\",\n \"type\": \"array\",\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"movieName\": {\n \"title\": \"电影名\",\n \"type\": \"string\"\n }\n }\n }\n },\n \"when\": {\n \"title\": \"何时观看\",\n \"description\": \"多选\",\n \"type\": \"array\",\n \"items\": {\n \"type\": \"string\"\n },\n \"enum\": [\"A\", \"B\", \"C\", \"D\"],\n \"enumNames\": [\"早上\", \"中午\", \"下午\", \"晚上\"]\n }\n },\n \"required\": [\"age\"]\n }\n }\n }\n },\n \"formData\": {\n \"html\": {\n \"html2\": \"hello from formData!\"\n },\n \"complexArray\": [\n {\n \"age\": \"\",\n \"movieType\": \"b\",\n \"movieList\": []\n }\n ]\n }\n}\n"
},
{
"path": "docs/playground/json/select.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"select\": {\n \"title\": \"带搜索的单选框\",\n \"type\": \"string\",\n \"enum\": [\"a\", \"b\", \"c\"],\n \"enumNames\": [\"jack\", \"steve\", \"david\"],\n \"widget\": \"select\",\n \"props\": {\n \"filterOption\": true,\n \"showSearch\": true,\n \"optionFilterProp\": \"label\"\n }\n },\n \"multiSelect\": {\n \"title\": \"标签模式\",\n \"description\": \"除了可选的标签，还可输入自定义的标签\",\n \"type\": \"array\",\n \"enum\": [\"旅行达人\", \"工作狂\", \"老司机\", \"小资\"],\n \"widget\": \"select\",\n \"props\": {\n \"mode\": \"tags\"\n }\n }\n }\n }\n}\n"
},
{
"path": "docs/playground/json/simplest.json",
"content": "{\n \"schema\": {\n \"type\": \"object\",\n \"properties\": {\n \"input\": {\n \"title\": \"简单输入框\",\n \"type\": \"string\",\n \"min\": 6,\n \"rules\": [\n {\n \"pattern\": \"^[A-Za-z0-9]+$\",\n \"message\": \"只允许填写英文字母和数字\"\n }\n ]\n },\n \"select\": {\n \"title\": \"单选\",\n \"type\": \"string\",\n \"tooltip\": \"单项选择\",\n \"enum\": [\n \"a\",\n \"b\",\n \"c\"\n ],\n \"enumNames\": [\n \"早\",\n \"中\",\n \"晚\"\n ]\n },\n \"date\": {\n \"title\": \"日期\",\n \"type\": \"string\",\n \"widget\": \"dateRange\"\n },\n \"listName2\": {\n \"title\": \"对象数组\",\n \"description\": \"对象数组嵌套功能\",\n \"type\": \"array\",\n \"min\": 1,\n \"max\": 3,\n \"items\": {\n \"type\": \"object\",\n \"properties\": {\n \"input1\": {\n \"title\": \"简单输入框\",\n \"type\": \"string\"\n },\n \"select1\": {\n \"title\": \"单选\",\n \"type\": \"string\",\n \"enum\": [\n \"a\",\n \"b\",\n \"c\"\n ],\n \"enumNames\": [\n \"早\",\n \"中\",\n \"晚\"\n ]\n }\n }\n }\n }\n }\n }\n}"
},
{
"path": "docs/playground/serialize.js",
"content": "/*\nCopyright (c) 2014, Yahoo! Inc. All rights reserved.\nCopyrights licensed under the New BSD License.\nSee the accompanying LICENSE file for terms.\n*/\n\n// fork自https://github.com/yahoo/serialize-javascript.git，新增 ignoreUndefined 参数的支持\n\nimport { customAlphabet } from 'nanoid';\nconst nanoid = customAlphabet('1234567890abcdef');\n\n// Generate an internal UID to make the regexp pattern harder to guess.\nvar UID = nanoid(32);\nvar PLACE_HOLDER_REGEXP = new RegExp(\n '(\\\\\\\\)?\"@__(F|R|D|M|S|A|U|I|B|L)-' + UID + '-(\\\\d+)__@\"',\n 'g'\n);\n\nvar IS_NATIVE_CODE_REGEXP = /\\{\\s*\\[native code\\]\\s*\\}/g;\nvar IS_PURE_FUNCTION = /function.*?\\(/;\nvar IS_ARROW_FUNCTION = /.*?=>.*?/;\nvar UNSAFE_CHARS_REGEXP = /[<>\\/\\u2028\\u2029]/g;\n\nvar RESERVED_SYMBOLS = ['*', 'async'];\n\n// Mapping of unsafe HTML and invalid JavaScript line terminator chars to their\n// Unicode char counterparts which are safe to use in JavaScript strings.\nvar ESCAPED_CHARS = {\n '<': '\\\\u003C',\n '>': '\\\\u003E',\n '/': '\\\\u002F',\n '\\u2028': '\\\\u2028',\n '\\u2029': '\\\\u2029',\n};\n\nfunction escapeUnsafeChars(unsafeChar) {\n return ESCAPED_CHARS[unsafeChar];\n}\n\nfunction deleteFunctions(obj) {\n var functionKeys = [];\n for (var key in obj) {\n if (typeof obj[key] === 'function') {\n functionKeys.push(key);\n }\n }\n for (var i = 0; i < functionKeys.length; i++) {\n delete obj[functionKeys[i]];\n }\n}\n\nfunction deleteUndefined(obj) {\n var undefinedKeys = [];\n for (var key in obj) {\n if (typeof obj[key] === 'undefined') {\n undefinedKeys.push(key);\n }\n }\n for (var i = 0; i < undefinedKeys.length; i++) {\n delete obj[undefinedKeys[i]];\n }\n}\n\n\nfunction serializeUtil(obj, options) {\n options || (options = {});\n\n // Backwards-compatibility for `space` as the second argument.\n if (typeof options === 'number' || typeof options === 'string') {\n options = { space: options };\n }\n\n var functions = [];\n var regexps = [];\n var dates = [];\n var maps = [];\n var sets = [];\n var arrays = [];\n var undefs = [];\n var infinities = [];\n var bigInts = [];\n var urls = [];\n\n // Returns placeholders for functions and regexps (identified by index)\n // which are later replaced by their string representation.\n function replacer(key, value) {\n // For nested function\n if (options.ignoreFunction) {\n deleteFunctions(value);\n }\n\n if (options.ignoreUndefined) {\n deleteUndefined(value);\n }\n\n if (!value && value !== undefined) {\n return value;\n }\n\n // If the value is an object w/ a toJSON method, toJSON is called before\n // the replacer runs, so we use this[key] to get the non-toJSONed value.\n var origValue = this[key];\n var type = typeof origValue;\n\n if (type === 'object') {\n if (origValue instanceof RegExp) {\n return '@__R-' + UID + '-' + (regexps.push(origValue) - 1) + '__@';\n }\n\n if (origValue instanceof Date) {\n return '@__D-' + UID + '-' + (dates.push(origValue) - 1) + '__@';\n }\n\n if (origValue instanceof Map) {\n return '@__M-' + UID + '-' + (maps.push(origValue) - 1) + '__@';\n }\n\n if (origValue instanceof Set) {\n return '@__S-' + UID + '-' + (sets.push(origValue) - 1) + '__@';\n }\n\n if (origValue instanceof Array) {\n var isSparse =\n origValue.filter(function () {\n return true;\n }).length !== origValue.length;\n if (isSparse) {\n return '@__A-' + UID + '-' + (arrays.push(origValue) - 1) + '__@';\n }\n }\n\n if (origValue instanceof URL) {\n return '@__L-' + UID + '-' + (urls.push(origValue) - 1) + '__@';\n }\n }\n\n if (type === 'function') {\n return '@__F-' + UID + '-' + (functions.push(origValue) - 1) + '__@';\n }\n\n if (type === 'undefined') {\n return '@__U-' + UID + '-' + (undefs.push(origValue) - 1) + '__@';\n }\n\n if (type === 'number' && !isNaN(origValue) && !isFinite(origValue)) {\n return '@__I-' + UID + '-' + (infinities.push(origValue) - 1) + '__@';\n }\n\n if (type === 'bigint') {\n return '@__B-' + UID + '-' + (bigInts.push(origValue) - 1) + '__@';\n }\n\n return value;\n }\n\n function serializeFunc(fn) {\n var serializedFn = fn.toString();\n if (IS_NATIVE_CODE_REGEXP.test(serializedFn)) {\n throw new TypeError('Serializing native function: ' + fn.name);\n }\n\n // pure functions, example: {key: function() {}}\n if (IS_PURE_FUNCTION.test(serializedFn)) {\n return serializedFn;\n }\n\n // arrow functions, example: arg1 => arg1+5\n if (IS_ARROW_FUNCTION.test(serializedFn)) {\n return serializedFn;\n }\n\n var argsStartsAt = serializedFn.indexOf('(');\n var def = serializedFn\n .substr(0, argsStartsAt)\n .trim()\n .split(' ')\n .filter(function (val) {\n return val.length > 0;\n });\n\n var nonReservedSymbols = def.filter(function (val) {\n return RESERVED_SYMBOLS.indexOf(val) === -1;\n });\n\n // enhanced literal objects, example: {key() {}}\n if (nonReservedSymbols.length > 0) {\n return (\n (def.indexOf('async') > -1 ? 'async ' : '') +\n 'function' +\n (def.join('').indexOf('*') > -1 ? '*' : '') +\n serializedFn.substr(argsStartsAt)\n );\n }\n\n // arrow functions\n return serializedFn;\n }\n\n // Check if the parameter is function\n if (options.ignoreFunction && typeof obj === 'function') {\n obj = undefined;\n }\n // Protects against `JSON.stringify()` returning `undefined`, by serializing\n // to the literal string: \"undefined\".\n if (obj === undefined) {\n return String(obj);\n }\n\n var str;\n\n // Creates a JSON string representation of the value.\n // NOTE: Node 0.12 goes into slow mode with extra JSON.stringify() args.\n if (options.isJSON && !options.space) {\n str = JSON.stringify(obj);\n } else {\n str = JSON.stringify(obj, options.isJSON ? null : replacer, options.space);\n }\n\n // Protects against `JSON.stringify()` returning `undefined`, by serializing\n // to the literal string: \"undefined\".\n if (typeof str !== 'string') {\n return String(str);\n }\n\n // Replace unsafe HTML and invalid JavaScript line terminator chars with\n // their safe Unicode char counterpart. This _must_ happen before the\n // regexps and functions are serialized and added back to the string.\n if (options.unsafe !== true) {\n str = str.replace(UNSAFE_CHARS_REGEXP, escapeUnsafeChars);\n }\n\n if (\n functions.length === 0 &&\n regexps.length === 0 &&\n dates.length === 0 &&\n maps.length === 0 &&\n sets.length === 0 &&\n arrays.length === 0 &&\n undefs.length === 0 &&\n infinities.length === 0 &&\n bigInts.length === 0 &&\n urls.length === 0\n ) {\n return str;\n }\n\n // Replaces all occurrences of function, regexp, date, map and set placeholders in the\n // JSON string with their string representations. If the original value can\n // not be found, then `undefined` is used.\n return str.replace(\n PLACE_HOLDER_REGEXP,\n function (match, backSlash, type, valueIndex) {\n // The placeholder may not be preceded by a backslash. This is to prevent\n // replacing things like `\"a\\\"@__R-\n \n SchemaBuilder\n
\n\n SchemaBuilder\n\n \n ![\"npm\"](\"https://img.shields.io/npm/v/@xrenders/schema-builder.svg?maxAge=3600&style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dm/@xrenders/schema-builder.svg?style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dt/@xrenders/schema-builder.svg?style=flat-square\")
\n \n \n \n \n
\n
\n );\n};\n\nexport default Demo;\n```"
},
{
"path": "docs/schema-builder-online/index.md",
"content": "---\nsidebar: false\n---\n\n```jsx\n/**\n * transform: true\n * compact: true\n * inline: true\n */\nimport React from 'react';\nimport SchemaBuilder from '@xrenders/schema-builder';\n\nimport ReactDOM from 'react-dom';\n\n// 将 React 和 ReactDOM 绑定到全局作用域中\nwindow.React = React;\nwindow.ReactDOM = ReactDOM;\n\nconst Demo = () => {\n return (\n \n
\n );\n};\n\nexport default Demo;\n```"
},
{
"path": "docs/table-render/.test/test.md",
"content": "\n"
},
{
"path": "docs/table-render/api.md",
"content": "---\norder: 0\nmobile: false\ngroup: \n title: 其他\n order: 5\n---\n# API\n\n## TableRender\n\n对 Antd Table 的 [props](https://ant-design.antgroup.com/components/table-cn/#Table) 完全兼容，但 `dataSource`, `loading` 这两个参数是内部状态，不允许配置\n\n| 属性 | 描述 | 类型 | 默认值 |\n| --------------------- | ---------------------------------------------------------------------- | -------------------------------- | ------ |\n| search | 搜索表单，不传就是无查询列表 | [Search](#search) | - | - |\n| request | **必填**，初始化&点击查询时执行的函数 | [Request](#request-1) | - | - |\n| title | 表格标题 | `string \\| ReactNode` | - | - |\n| toolbarRender | 表格主体右上方的控件，例如“添加”按钮 | `() => ReactNode` | false |\n| toolbarAction | 显示在表格主体右上方的 Icon 列表，内置了刷新、调整密度、全屏显示等功能 | `boolean \\| ToolbarActionConfig` | false |\n| pageChangeWithRequest | 切换分页时是否需要请求接口 | `boolean` | true |\n| columns | 列定义 | [ProColumnsType](#columns) | - |\n\n### ToolbarActionConfig\n\n工具栏的具体配置\n\n| 属性 | 描述 | 类型 | 默认值 | 版本 |\n| ------- | ---------- | ----------------------------------------------------------------------------- | --------- | ---- |\n| enabled | 启用的功能 | ` Array<'refresh' \\| 'columnsSetting' \\| 'fullScreen' \\| 'density'>` | `['refresh', 'columnsSetting', 'fullScreen', 'density']` | |\n\n## Search\n\n我们将搜索相关的能力放到 `\n
\n )}\n />\n )\n};\n\nexport default Demo;\n"
},
{
"path": "docs/table-render/demo/toolbar/basic.tsx",
"content": "/**\n * background: 'rgb(245,245,245)'\n */\nimport React, { useRef } from 'react';\nimport TableRender, { ProColumnsType } from 'table-render';\nimport { schema } from '../../static/search';\nimport { searchApi } from '../../static/request';\n\nconst Demo = () => {\n const tableRef: any = useRef();\n\n const columns: ProColumnsType\n \n TableRender\n
\n\n\n TableRender\n\n \n ![\"npm\"](\"https://img.shields.io/npm/v/table-render.svg?maxAge=3600&style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dm/table-render.svg?style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dt/table-render.svg?style=flat-square\")
\n \n \n \n \n
\n-
\n-
\n- );\n- }\n- export default withTable(Demo);\n\n\n+ import TableRender form 'table-render';\n+ const Demo = () => {\n+ return (\n+ \n-
\n-
\n\n\n+ ![](\"https://img.alicdn.com/tfs/TB1ZoBaPNjaK1RjSZFAXXbdLFXa-1472-622.png\")
\n\n## 效果\n\n| React 输入 | \n标准Json schema 输出 | \n带 Ui 配置的 schema 输出 | \n
\n ![](\"https://img.alicdn.com/tfs/TB1jVQFtuuSBuNjy1XcXXcYjFXa-1004-1310.png\") \n | \n \n ![](\"https://gw.alicdn.com/tfs/TB14I0Rzx1YBuNjy1zcXXbNcXXa-862-1538.png\") \n | \n \n ![](\"https://gw.alicdn.com/tfs/TB1r9QFwXmWBuNjSspdXXbugXXa-898-1460.png\") \n | \n
![\"icon\"](\"https://img.alicdn.com/imgextra/i1/O1CN01I90n9s1l5KiSj3UOb_!!6000000004767-0-tps-216-104.jpg\")
\n - 右键 `.json` 文件，选择 `可视化编辑表单配置` 或 `open with formRender schema editor`（英文编辑器）\n\n2. 在表单设计器里完成编辑点击 “保存”。全流程如下\n\n ![\"overview\"](\"https://img.alicdn.com/tfs/TB1b53cmGNj0u4jSZFyXXXgMVXa-2740-1748.gif\")
\n\n## 更多能力\n\n### 代码片段\n\n![](\"https://img.alicdn.com/tfs/TB12vYkq1T2gK0jSZFvXXXnFXXa-1862-976.jpg\")
\n\n如图，在 .json 文件中输入关键词 `fr` 即可查阅所有的快捷 snippets。其中 `fr-init` 会生成如下的骨架：\n\n```json\n{\n \"type\": \"object\",\n \"properties\": {},\n \"required\": []\n}\n```\n\n然后在骨架中使用元素 snippets 撰写所有的表单项吧，例如需要一个列表则使用 `fr-list` ，如果需要下拉单选框则使用 `fr-select`，等等。\n\nsnippets 基本分为三类：\n\n- 生成一个表单元素的 schema（例如输入框，多选框，列表，对象）\n- 生成部分常用选项的 schema（例如 props, width, format 等）\n- 生成骨架和 demo。fr-init 生成骨架，fr-demo 生成一个包含所有可用组件以及一个联动显隐的样例\n\n注意不需要输入完整的 `fr-number-complex` 来唤起一个 snippet 哦，只需要输入 `number` 或者甚至 `fnc` 就能智能联想了。\n\n### 生成 Interface\n\n- 选中 js/ts 文件内的 schema 代码，右键选择 `解析所选对象为接口`\n ![\"code2interface\"](\"https://img.alicdn.com/tfs/TB1sv2xlCR26e4jSZFEXXbwuXXa-1440-900.gif\")
\n\n- 右键任意 `.json` 文件，选择 `解析表单配置为接口`\n ![\"json2interface\"](\"https://img.alicdn.com/tfs/TB1nI.NWrY1gK0jSZTEXXXDQVXa-2736-1744.png\")
\n\n### 生成 Schema\n\n- 将 React PropTypes 解析为 schema\n\n右键任意 `.jsx` 文件，选择 `解析组件为表单配置`，具体配置方式可查看 [proptypes-to-json-schema](./proptypes) 文档\n\n- 将表单数据转换为 schema\n\n右键任意 `.json` 文件，选择 `转换数据为表单配置`\n\n### 预览模式\n\n可实时展示 `json` 文件改动效果\n\n ![\"preview\"](\"https://img.alicdn.com/imgextra/i3/O1CN01BbcGi71vDFhN4cwcA_!!6000000006138-2-tps-2295-1224.png\")
\n\n## 配置\n\n> Settings -> Extensions -> FormRender generator\n\n- 启用主题\n\n是否适配 vscode 主题，关闭后显示默认样式\n\n## 插件开发\n\n- 克隆项目\n\n```sh\ngit clone https://github.com/alibaba/form-render.git\ncd form-render/tools/vscode-plugin-fr-schema\n```\n\n- 安装依赖\n\n```sh\nnpm install\n```\n\n- 调试插件\n\n使用 VSCode 打开项目，执行 `npm run dev:web`，然后按下 F5 开始调试\n"
},
{
"path": "docs/xflow/FlowProvider.md",
"content": "---\norder: 4\ntitle: 'FlowProvider'\nmobile: false\ngroup: \n title: 高级用法\n order: 2\n---\n\n# FlowProvider\n\n`\n
\n );\n}\n```\n\n## Widget 方式\n通过配置节点的 `settingWidget` 属性，实现节点数据配置项的自定义渲染。Widget 方式提供了更大的灵活性，可以实现复杂的交互和样式需求。\n\n### 使用方法\n\n1. 创建自定义配置组件，组件参数见[自定义组件接收到的props](#自定义组件接收到的props)\n```js\nconst customWidget = ({ value, onChange,...rest }) => {\n return (\n \n
\n );\n}\n"
},
{
"path": "docs/xflow/demo/basic/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/best/basic/TextEllipsis/index.less",
"content": ".text-ellipsis {\n display: inline-block;\n max-width: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.paragraph-ellipsis {\n display: block;\n width: 100%;\n word-break: break-all;\n}\n"
},
{
"path": "docs/xflow/demo/best/basic/TextEllipsis/index.tsx",
"content": "import { Tooltip, TooltipProps } from 'antd';\nimport React, { FC, memo, useEffect, useState } from 'react';\nimport './index.less';\n\ninterface ITextEllipsisProps {\n text: string;\n style?: object;\n className?: string;\n toolTipProps?: TooltipProps;\n type?: 'text' | 'paragraph';\n rows?: number;\n}\nconst TextEllipsis: FC\n
\n );\n};\n\nexport default Header;\n"
},
{
"path": "docs/xflow/demo/best/basic/index.less",
"content": ".settingSchemaStyle {\n .ant-col {\n width: 100% !important;\n\n .ant-form-item-label label {\n font-weight: 500;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n }\n\n .child-title {\n .ant-form-item-label label {\n font-size: 12px;\n }\n }\n\n .fr-list-simple {\n display: block;\n }\n\n .parallel-wrap {\n .fr-list-simple .fr-inline-field {\n min-width: 200px;\n }\n }\n\n .switch-list {\n .fr-list-simple .fr-inline-field {\n width: 140px;\n min-width: 140px;\n }\n }\n\n .ant-form-item-label>label {\n color: #096dd9;\n }\n}\n\n\n.switch-custom-node {\n width: 100%;\n min-height: 20px;\n padding: 0.25rem;\n text-align: justify;\n word-wrap: break-word;\n background-color: #f2f4f7;\n border-radius: 0.375rem;\n\n .condition-label {\n display: flex;\n }\n}\n\n\n.process-header-card {\n position: absolute;\n top: 14px;\n left: 10px;\n z-index: 1;\n padding: 6px;\n font-size: 12px;\n}\n\n\n.tools {\n position: absolute;\n top: 14px;\n right: 10px;\n z-index: 1;\n\n .tools-btn {\n height: 29px;\n font-size: 12px;\n border-radius: 6px;\n }\n}\n"
},
{
"path": "docs/xflow/demo/best/basic/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport { settings } from './setting';\nimport { nodes,edges } from './const';\nimport React from 'react';\nimport './index.less';\nimport showSwitchNode from './showSwitchNode';\nimport Header from './header';\nimport { Tools } from './tools';\n\nexport default () => {\n return (\n \n
\n \n {/*
\n );\n};\n"
},
{
"path": "docs/xflow/demo/best/basic/setting.tsx",
"content": "export const settingSchema = {\n properties: {\n type: 'array',\n widget: 'simpleList',\n props: {\n hideCopy: true,\n hideMove: true,\n },\n className: 'parallel-wrap',\n items: {\n type: 'object',\n properties: {\n name: {\n title: '名称',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n value: {\n title: 'value',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n },\n },\n },\n};\n\nexport const activitySchema = {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '知识检索',\n type: 'serviceTask',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#fa541c',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n {\n title: '问题分类器',\n type: 'receiveTask',\n description: '定义问题的分类条件',\n icon: {\n type: 'icon-prompt',\n bgColor: '#875BF7',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n {\n title: '代码执行',\n type: 'userTask', // exclusiveGateway\n description: '执行一段代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: 'pink',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n {\n title: 'HTTP请求',\n type: 'callActivity',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#2E90FA',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n ],\n};\n\nexport const settings = [\n {\n title: '事件',\n type: '_group',\n items: [\n {\n title: '开始',\n type: 'startEvent',\n description: '流程开始的节点，一个流程只允许有一个开始节点',\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n disabledShortcutDelete: true,\n targetHandleHidden: true,\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n string: {\n title: '字符串',\n description: '带清空x按钮',\n type: 'string',\n default: 'hello world',\n props: {\n allowClear: true,\n },\n },\n string2: {\n title: '复杂校验',\n description: 'pattern和message的用法',\n type: 'string',\n rules: [\n {\n pattern: '^[A-Za-z0-9]+$',\n message: '请输入数字或英文字母',\n },\n ],\n placeholder: '请输入数字或英文',\n },\n string3: {\n title: '长度控制',\n description: '长度在5-15个字之间',\n type: 'string',\n minLength: 5,\n maxLength: 15,\n },\n string4: {\n title: '前置/后置标签',\n type: 'string',\n props: {\n addonBefore: '长度',\n addonAfter: 'px',\n },\n },\n string5: {\n title: '前后缀',\n type: 'string',\n rules: [\n {\n pattern: '^[0-9]+$',\n message: '请输入数字',\n },\n ],\n props: {\n prefix: '￥',\n suffix: 'RMB',\n },\n },\n string6: {\n title: '置灰的输入框',\n type: 'string',\n disabled: true,\n default: 'hello world',\n },\n string7: {\n title: '文本框',\n description: '固定高度',\n type: 'string',\n format: 'textarea',\n props: {\n row: 4,\n },\n },\n },\n required: ['string4', 'string5'],\n },\n },\n {\n title: '结束',\n type: 'endEvent',\n description: '表示流程结束节点，可以有多个结束节点',\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n disabledShortcutDelete: true,\n sourceHandleHidden: true,\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n nodeDesc: {\n title: '结束描述',\n type: 'string',\n format: 'textarea',\n placeholder: '根据内容缩放',\n props: {\n autoSize: {\n minRows: 3,\n maxRows: 5,\n },\n },\n readOnlyWidget: 'ReadOnlyPanel',\n },\n },\n },\n },\n ],\n },\n {\n title: '逻辑',\n type: '_group',\n items: [\n {\n title: '条件分支',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#6172F3',\n },\n nodePanel: {\n width: 550,\n },\n hideDesc: true,\n switchExtra: {\n hideElse: true,\n titleKey: 'name',\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n list: {\n // title: '高级属性',\n type: 'array',\n widget: 'simpleList',\n props: {\n hideCopy: true,\n hideMove: true,\n },\n className: 'switch-list',\n items: {\n type: 'object',\n properties: {\n name: {\n title: '条件名称', // 条件描述\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n type: {\n title: '条件类型',\n type: 'string',\n widget: 'select',\n props: {\n allowClear: true,\n },\n enum: ['类型一'],\n enumNames: ['类型一'],\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n value: {\n title: '条件语句',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n },\n },\n },\n },\n },\n nodeWidget: 'showSwitchNode',\n },\n {\n title: '并行事件',\n type: 'Parallel',\n description: '支持多个分支同时执行',\n icon: {\n type: 'icon-parallel',\n bgColor: '#06aed4',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n parallelExtra: {\n titleKey: 'name',\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n properties: {\n title: 'Properties',\n type: 'array',\n widget: 'simpleList',\n props: {\n hideCopy: true,\n hideMove: true,\n },\n className: 'parallel-wrap',\n items: {\n type: 'object',\n properties: {\n name: {\n title: '属性名称',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n value: {\n title: 'value',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n },\n },\n },\n list: {\n title: '并行事件',\n type: 'array',\n widget: 'simpleList',\n props: {\n hideCopy: true,\n hideMove: true,\n },\n className: 'parallel-wrap',\n items: {\n type: 'object',\n properties: {\n name: {\n title: '事件名称',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n value: {\n title: '事件描述',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n },\n },\n },\n },\n },\n },\n ],\n },\n { ...activitySchema },\n];\n"
},
{
"path": "docs/xflow/demo/best/basic/showSwitchNode.tsx",
"content": "import { Space } from 'antd';\nimport React from 'react';\nimport './index.less';\nimport TextEllipsis from './TextEllipsis';\n\nconst showSwitchNode = ({ data, index }) => {\n const { type, value } = data;\n if (!type && !value) {\n return ;\n }\n\n return (\n \n
\n )}\n {value && (\n 条件类型：
\n \n
\n )}\n 条件语句：
\n \n
\n );\n};\n\nexport default Header;\n"
},
{
"path": "docs/xflow/demo/best/demo2/index.less",
"content": ".settingSchemaStyle {\n .ant-col {\n width: 100% !important;\n\n .ant-form-item-label label {\n font-weight: 500;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n }\n\n .child-title {\n .ant-form-item-label label {\n font-size: 12px;\n }\n }\n\n .fr-list-simple {\n display: block;\n }\n\n .parallel-wrap {\n .fr-list-simple .fr-inline-field {\n min-width: 200px;\n }\n }\n\n .switch-list {\n .fr-list-simple .fr-inline-field {\n width: 140px;\n min-width: 140px;\n }\n }\n\n .ant-form-item-label>label {\n color: #096dd9;\n }\n}\n\n\n.switch-custom-node {\n width: 100%;\n min-height: 20px;\n padding: 0.25rem;\n text-align: justify;\n word-wrap: break-word;\n background-color: #f2f4f7;\n border-radius: 0.375rem;\n\n .condition-label {\n display: flex;\n }\n}\n\n\n.process-header-card {\n position: absolute;\n top: 14px;\n left: 10px;\n z-index: 1;\n padding: 6px;\n font-size: 12px;\n}\n\n\n.tools {\n position: absolute;\n top: 14px;\n right: 10px;\n z-index: 1;\n\n .tools-btn {\n height: 29px;\n font-size: 12px;\n border-radius: 6px;\n }\n}\n\n.ant-card-head {\n background: #fff;\n border-bottom: 1px solid #f0f0f0;\n padding: 0 24px;\n height: 56px;\n line-height: 56px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.ant-card-body {\n padding: 0;\n height: calc(100% - 56px);\n}\n"
},
{
"path": "docs/xflow/demo/best/demo2/index.tsx",
"content": "import React, { useState } from 'react';\nimport XFlow from '@xrenders/xflow';\nimport { Button, Space, message } from 'antd';\nimport { PlayCircleOutlined, SaveOutlined } from '@ant-design/icons';\nimport { settings } from './setting';\nimport './index.less';\nimport CustomSvg from './CustomSvg';\n\nexport default () => {\n const [loading, setLoading] = useState(false);\n const [logList, setLogList] = useState\n
\n \n \n \n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/best/demo2/setting.tsx",
"content": "export const settingSchema = {\n properties: {\n type: 'array',\n widget: 'simpleList',\n props: {\n hideCopy: true,\n hideMove: true,\n },\n className: 'parallel-wrap',\n items: {\n type: 'object',\n properties: {\n name: {\n title: '名称',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n value: {\n title: 'value',\n type: 'string',\n props: {\n allowClear: true,\n },\n className: 'child-title',\n readOnlyWidget: 'ReadOnlyPanel',\n },\n },\n },\n },\n};\n\nexport const activitySchema = {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '知识检索',\n type: 'LLM',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#fa541c',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n {\n title: '问题分类器',\n type: 'Prompt',\n description: '定义问题的分类条件',\n icon: {\n type: 'icon-prompt',\n bgColor: '#875BF7',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n {\n title: '代码执行',\n type: 'userTask', // exclusiveGateway\n description: '执行一段代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: 'pink',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n {\n title: 'HTTP请求',\n type: 'callActivity',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#2E90FA',\n },\n hideDesc: true,\n nodePanel: {\n width: 510,\n },\n settingSchema: {\n type: 'object',\n className: 'settingSchemaStyle',\n properties: {\n ...settingSchema,\n },\n },\n },\n ],\n};\n\nexport const settings = [\n {\n title: '开始',\n type: 'Start',\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n },\n {\n title: '条件判断',\n type: 'Switch',\n description:'条件判断',\n showTestingBtn: true,\n icon: {\n type: 'icon-switch',\n bgColor: '#FF8800',\n },\n settingSchema: {\n type: 'object',\n properties: {\n name: {\n title: '节点名称',\n type: 'string',\n required: true,\n },\n template: {\n title: '提示词模板',\n type: 'string',\n widget: 'textarea',\n },\n },\n },\n },\n {\n title: 'LLM',\n type: 'LLM',\n showTestingBtn: true,\n description:'LLM',\n icon: {\n // type: 'icon-model',\n bgColor: '#1890FF',\n },\n iconSvg:'CustomSvg',\n settingSchema: {\n type: 'object',\n properties: {\n name: {\n title: '节点名称',\n type: 'string',\n required: true,\n },\n model: {\n title: '模型选择',\n type: 'string',\n enum: ['gpt-3.5-turbo', 'gpt-4'],\n enumNames: ['GPT-3.5', 'GPT-4'],\n widget: 'select',\n },\n temperature: {\n title: '温度',\n type: 'number',\n min: 0,\n max: 1,\n widget: 'slider',\n },\n },\n },\n },\n {\n title: '人工任务',\n type: 'userTask',\n showTestingBtn: true,\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: 'object',\n properties: {\n name: {\n title: '节点名称',\n type: 'string',\n required: true,\n },\n assignee: {\n title: '处理人',\n type: 'string',\n },\n description: {\n title: '任务描述',\n type: 'string',\n widget: 'textarea',\n },\n },\n },\n },\n {\n title: '合并节点',\n type: 'Merge',\n showTestingBtn: true,\n icon: {\n type: 'icon-gongju',\n bgColor: '#9E6BE6',\n },\n settingSchema: {\n type: 'object',\n properties: {\n name: {\n title: '节点名称',\n type: 'string',\n required: true,\n },\n strategy: {\n title: '合并策略',\n type: 'string',\n enum: ['compare', 'concat', 'custom'],\n enumNames: ['对比合并', '拼接合并', '自定义合并'],\n widget: 'select',\n },\n },\n },\n },\n {\n title: '格式化',\n type: 'Format',\n showTestingBtn: true,\n icon: {\n type: 'icon-code',\n bgColor: '#F759AB',\n },\n settingSchema: {\n type: 'object',\n properties: {\n name: {\n title: '节点名称',\n type: 'string',\n required: true,\n },\n format: {\n title: '格式类型',\n type: 'string',\n enum: ['markdown', 'html', 'text'],\n enumNames: ['Markdown', 'HTML', '纯文本'],\n widget: 'select',\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n icon: {\n type: 'icon-end',\n bgColor: '#FF4D4F',\n },\n },\n];\n"
},
{
"path": "docs/xflow/demo/best/demo2/showSwitchNode.tsx",
"content": "import { Space } from 'antd';\nimport React from 'react';\nimport './index.less';\nimport TextEllipsis from './TextEllipsis';\n\nconst showSwitchNode = ({ data, index }) => {\n const { type, value } = data;\n if (!type && !value) {\n return ;\n }\n\n return (\n \n
\n \n
\n )}\n {value && (\n 条件类型：
\n \n
\n )}\n 条件语句：
\n \n
\n );\n});\n"
},
{
"path": "docs/xflow/demo/custom-flow/advancedLinkageCase/index.tsx",
"content": "import React, { useState } from 'react';\nimport XFlow from '@xrenders/xflow';\nimport { AdvancedSettingWidget } from './customWidget';\nimport setting from './setting';\nimport { Button, Switch } from 'antd';\n\nexport default () => {\n const [readOnly, setReadonly] = useState(false);\n\n const nodes = [\n {\n id: 'start',\n type: 'Start',\n data: {\n title: '开始',\n },\n position: {\n x: 200,\n y: 200,\n }\n },\n {\n id: '1',\n type: 'LLM',\n data: {\n name: '高级节点',\n formType: 'simple',\n simpleInput: '',\n complexConfig: {\n field1: '',\n field2: '',\n },\n conditions: []\n },\n position: {\n x: 500,\n y: 200,\n }\n },\n {\n id: '2',\n type: 'End',\n data: {},\n position: {\n x: 800,\n y: 200,\n }\n }\n ];\n\n const edges = [\n { source: 'start', target: '1', id: 'e0' },\n { source: '1', target: '2', id: 'e1' }\n ];\n\n return (\n \n \n \n \n
\n )}\n \n {\n console.log(\"关闭节点\",nodeID)\n }\n }\n }}\n />\n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/custom-flow/advancedLinkageCase/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingWidget: \"customWidget\",\n settingWidgetProps: {\n params: \"test\"\n }\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: '自定义组件节点',\n type: 'LLM',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingWidget: 'AdvancedSettingWidget',\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/custom-flow/customWidget.tsx",
"content": "import { Input } from 'antd';\n\nconst customWidget = ({ value, onChange,...rest }) => {\n console.log(\"参数\", { value, onChange, ...rest })\n return (\n \n 查看只读状态
\n {value?? '-'}
;\n};\n\nexport default ReadOnlyPanel;\n"
},
{
"path": "docs/xflow/demo/custom-flow/fullCase/components/TagWidget.tsx",
"content": "import React from 'react';\nimport { Tag, Popover, Typography, Space } from 'antd';\nimport '../index.less';\n\nconst { Text } = Typography;\n\ninterface TagItem {\n name: string;\n code: string;\n description: string;\n}\n\ninterface TagWidgetProps {\n tags?: TagItem[];\n style?: React.CSSProperties;\n className?: string;\n}\n\nconst getTagData = (data: any, values: any) => {\n const tagData =\n (values || [])\n ?.map((val) => data?.tagData?.find((item) => item.code === val))\n .filter(Boolean) || [];\n return tagData;\n};\n\nconst TagWidget: React.FC\n \n 指标名称:\n {' '}\n {tag.name}\n
\n \n \n 指标代码:\n {' '}\n {tag.code}\n
\n \n \n 指标描述:\n {' '}\n {tag.description}\n
\n \n {Boolean(data?.firstScene || data?.secondScene) && (\n \n {(nodeData || []).map((tag: any, index: number) => (\n \n document.getElementById('xflow-container') as HTMLElement\n }\n overlayClassName=\"tag-popover\"\n >\n \n {tag.name}\n \n \n ))}\n \n
\n );\n};\n\nexport default TagWidget;\n"
},
{
"path": "docs/xflow/demo/custom-flow/fullCase/components/customWidget.tsx",
"content": "import FormRender, { useForm } from 'form-render';\nimport React, { forwardRef, useEffect, useImperativeHandle } from 'react';\nimport { firstTagSchema } from '../setting';\nimport '../index.less';\nimport { getColorByIndex } from '..';\nimport ReadOnlyPanel from './ReadOnlyPanel';\n\nexport interface AdvancedSettingWidgetProps {\n value: any;\n onChange: (value: any) => void;\n readOnly?: boolean;\n}\n\nexport interface AdvancedSettingWidgetRef {\n validateForm: () => Promise\n \n 分类：\n \n \n {nodeType === 'firstScene' ? data?.firstScene : data?.secondScene}\n \n
\n )}\n \n {\n const res = await new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: [\n {\n measureName: 'perform_jys_1d_all',\n displayName: '用户活跃度指标',\n description:\n '用户活跃度指标反映了平台用户的参与程度和互动频率。该指标通过分析用户登录次数、浏览时长、功能使用频率等维度综合计算得出。活跃度分为高、中、低三个等级，分别对应不同的用户行为特征和参与度水平。',\n },\n {\n displayName: '用户转化率',\n measureName: 'perform_amt_1d',\n description: '用户转化率指标衡量了从浏览到实际完成交易的用户比例。该指标通过分析用户行为路径，计算各环节的转化漏斗，识别用户流失的关键节点。转化率受多种因素影响，包括产品展示、价格策略、用户体验等。',\n },\n {\n displayName: '平均停留时长',\n measureName: 'perform_adr_1d',\n description: '用户平均在平台上的停留时长，反映用户粘性和内容吸引力'\n }\n ]\n });\n }, 100);\n });\n const enumData = (res?.data || []).map(\n (item: any, index: number) => ({\n name: item.displayName,\n code: item.measureName,\n description: item.description,\n color: getColorByIndex(index),\n }),\n );\n form.setValueByPath('tagData', enumData);\n form.setSchemaByPath('firstMeasure', {\n enum: (res?.data || [])?.map((v) => v.measureName) || [],\n enumNames:\n (res?.data || [])?.map((item) => `${item.displayName}(${item.measureName})`) || [],\n });\n }}\n // size=\"small\"\n removeHiddenData={false}\n widgets={{ ReadOnlyPanel }}\n configProvider={{\n getPopupContainer: triggerNode => triggerNode.parentElement\n }}\n />\n
\n );\n});\n\nexport default CustomWidget;\n"
},
{
"path": "docs/xflow/demo/custom-flow/fullCase/components/secondTagWidget.tsx",
"content": "import FormRender, { useForm } from 'form-render';\nimport React, {\n forwardRef,\n useEffect,\n useImperativeHandle,\n} from 'react';\nimport { secondTagSchema } from '../setting';\nimport '../index.less';\nimport { getColorByIndex } from '..';\nimport ReadOnlyPanel from './ReadOnlyPanel';\n\nexport interface AdvancedSettingWidgetProps {\n value: any;\n onChange: (value: any) => void;\n readOnly?: boolean;\n}\n\nexport interface AdvancedSettingWidgetRef {\n validateForm: () => Promise\n {\n const res = await new Promise((resolve) => {\n setTimeout(() => {\n resolve({\n data: [\n {\n displayName: '用户转化率',\n measureName: 'perform_amt_1d',\n description: '用户转化率指标衡量了从浏览到实际完成交易的用户比例。该指标通过分析用户行为路径，计算各环节的转化漏斗，识别用户流失的关键节点。转化率受多种因素影响，包括产品展示、价格策略、用户体验等。'\n },\n {\n displayName: '平均停留时长',\n measureName: 'perform_adr_1d',\n description: '用户平均在平台上的停留时长，反映用户粘性和内容吸引力'\n },\n {\n displayName: '多端访问量',\n measureName: 'xz_ipvuv_daycnt_4client',\n description: '多端访问量统计了用户在不同设备（PC、移动端、平板等）上的访问情况，用于分析用户使用习惯和平台适配性'\n },\n {\n displayName: '用户留存率',\n measureName: 'perform_jys_1d',\n description: '用户留存率反映了用户持续使用平台的比率。该指标通过跟踪用户首次使用后的持续活跃情况，计算不同时间窗口（次日、7日、30日等）的留存率，评估产品的用户粘性和长期价值。'\n }\n ]\n });\n }, 100);\n });\n const enumData = (res?.data || []).map(\n (item: any, index: number) => ({\n name: item.displayName,\n code: item.measureName,\n description: item.description,\n color: getColorByIndex(index),\n }),\n );\n console.log('11hmy', res, enumData)\n form.setValueByPath('tagData', enumData);\n form.setSchemaByPath('secondMeasures', {\n enum:\n (res?.data || []).map((v: MeasureData) => v.measureName) || [],\n enumNames:\n (res?.data || []).map(\n (item: MeasureData) =>\n `${item.displayName}(${item.measureName})`,\n ) || [],\n });\n }}\n // size=\"small\"\n widgets={{ ReadOnlyPanel }}\n configProvider={{ // 全屏时挂载到父节点\n getPopupContainer: triggerNode => triggerNode.parentElement\n }}\n />\n
\n );\n});\n\nexport default secondTagWidget;\n"
},
{
"path": "docs/xflow/demo/custom-flow/fullCase/const.ts",
"content": "export const initNodes = [\n {\n id: 'n5lj2vtbm_1744364868686',\n type: 'primaryMetrics',\n data: {\n firstScene: '交易结果3',\n firstMeasure: 'perform_jys_1d_all',\n displayName: '用户活跃度指标',\n description:\n '用户活跃度指标反映了平台用户的参与程度和互动频率。该指标通过分析用户登录次数、浏览时长、功能使用频率等维度综合计算得出。活跃度分为高、中、低三个等级，分别对应不同的用户行为特征和参与度水平。',\n },\n position: {\n x: 0,\n y: 0,\n },\n },\n {\n id: 'w83nw5uz0_1744364868686',\n type: 'secondaryMetrics',\n data: {\n secondScene: '项目视角2',\n secondMeasures: [\n 'perform_amt_1d',\n 'perform_adr_1d',\n 'xz_ipvuv_daycnt_4client',\n 'perform_jys_1d',\n ],\n tagWidgetData: [\n {\n name: '用户转化率',\n code: 'perform_amt_1d',\n description:\n '用户转化率指标衡量了从浏览到实际完成交易的用户比例。该指标通过分析用户行为路径，计算各环节的转化漏斗，识别用户流失的关键节点。转化率受多种因素影响，包括产品展示、价格策略、用户体验等。',\n color: 'blue',\n },\n {\n name: '平均停留时长',\n code: 'perform_adr_1d',\n description: '用户平均在平台上的停留时长，反映用户粘性和内容吸引力',\n color: 'green',\n },\n {\n name: '多端访问量',\n code: 'xz_ipvuv_daycnt_4client',\n description:\n '多端访问量统计了用户在不同设备（PC、移动端、平板等）上的访问情况，用于分析用户使用习惯和平台适配性',\n color: 'red',\n },\n {\n name: '用户留存率',\n code: 'perform_jys_1d',\n description:\n '用户留存率反映了用户持续使用平台的比率。该指标通过跟踪用户首次使用后的持续活跃情况，计算不同时间窗口（次日、7日、30日等）的留存率，评估产品的用户粘性和长期价值。',\n color: 'orange',\n },\n ],\n },\n position: {\n x: 0,\n y: 0,\n },\n },\n {\n id: 'vl9hmneno_1744364868686',\n type: 'secondaryMetrics',\n data: {\n secondScene: '视角3',\n secondMeasures: ['perform_adr_1d', 'perform_jys_1d'],\n tagWidgetData: [\n {\n name: '平均停留时长',\n code: 'perform_adr_1d',\n description: '用户平均在平台上的停留时长，反映用户粘性和内容吸引力',\n color: 'blue',\n },\n {\n name: '用户留存率',\n code: 'perform_jys_1d',\n description:\n '用户留存率反映了用户持续使用平台的比率。该指标通过跟踪用户首次使用后的持续活跃情况，计算不同时间窗口（次日、7日、30日等）的留存率，评估产品的用户粘性和长期价值。',\n color: 'green',\n },\n ],\n },\n position: {\n x: 0,\n y: 0,\n },\n },\n {\n id: 'r6ctw58w1_1744364868686',\n type: 'secondaryMetrics',\n data: {\n secondScene: '342424',\n secondMeasures: ['perform_amt_1d'],\n tagWidgetData: [\n {\n name: '用户转化率',\n code: 'perform_amt_1d',\n description:\n '用户转化率指标衡量了从浏览到实际完成交易的用户比例。该指标通过分析用户行为路径，计算各环节的转化漏斗，识别用户流失的关键节点。转化率受多种因素影响，包括产品展示、价格策略、用户体验等。',\n color: 'blue',\n },\n ],\n },\n position: {\n x: 0,\n y: 0,\n },\n },\n];\n\nexport const initEdges = [\n {\n source: 'n5lj2vtbm_1744364868686',\n target: 'w83nw5uz0_1744364868686',\n id: 'b1ye449b1',\n },\n {\n source: 'n5lj2vtbm_1744364868686',\n target: 'vl9hmneno_1744364868686',\n id: '51u53vc90',\n },\n {\n source: 'n5lj2vtbm_1744364868686',\n target: 'r6ctw58w1_1744364868686',\n id: '5um40pak9',\n },\n];\n"
},
{
"path": "docs/xflow/demo/custom-flow/fullCase/index.less",
"content": ".indicator-flow-container {\n position: relative;\n}\n\n.indicator-flow-back-btn-container {\n position: absolute;\n top: 10px;\n right: 10px;\n z-index: 1000;\n\n .tools-btn {\n height: 29px;\n font-size: 12px;\n border-radius: 6px;\n }\n}\n\n.indicator-flow-header {\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 1000;\n}\n\n.indicator-flow-header-title {\n font-weight: bold;\n color: #1890ff;\n}\n\n.hidden-form-item {\n display: none !important;\n}\n\n.tag-popover {\n max-width: 300px !important;\n\n .ant-popover-inner {\n border-radius: 8px;\n }\n\n .ant-popover-inner-content {\n padding: 6px;\n }\n}\n\n.custom-node-panel .ant-drawer-content-wrapper {\n top: 54px !important;\n bottom: 14px !important;\n right: 12px !important;\n}\n\n.settingSchemaStyle {\n .ant-col {\n width: 100% !important;\n\n .ant-form-item-label label {\n font-weight: 500;\n }\n\n .ant-form-item-explain-error {\n font-size: 12px;\n }\n }\n\n .ant-form-item-label > label {\n color: #5050e6;\n }\n\n .tag-select-style {\n .ant-form-item-control .ant-form-item-control-input-content > div {\n width: 100%;\n min-height: 20px;\n padding: 10px;\n font-size: 12px;\n text-align: justify;\n word-wrap: break-word;\n background-color: #f2f4f7;\n border-radius: 8px;\n }\n .ant-form-item-control .ant-form-item-control-input-content .ant-select {\n padding: 0;\n background-color: none;\n }\n }\n}\n\n.smart-read-only-panel {\n width: 100%;\n min-height: 20px;\n padding: 10px;\n font-size: 12px;\n text-align: justify;\n word-wrap: break-word;\n background-color: #f2f4f7;\n border-radius: 8px;\n}\n"
},
{
"path": "docs/xflow/demo/custom-flow/fullCase/index.tsx",
"content": "import XFlow, {\n FlowProvider,\n useEdges,\n useFlow,\n useNodes,\n} from '@xrenders/xflow';\nimport { Button, Card, Space, Spin } from 'antd';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport firstTagWidget from './components/customWidget';\nimport secondTagWidget from './components/secondTagWidget';\nimport TagWidget from './components/TagWidget';\nimport { initEdges, initNodes } from './const';\nimport './index.less';\nimport { settings } from './setting';\nexport const tagColors = [\n 'blue',\n 'green',\n 'red',\n 'orange',\n 'purple',\n 'cyan',\n 'magenta',\n 'gold',\n 'lime',\n 'volcano',\n];\n\nexport const getColorByIndex = (index: number) => {\n return tagColors[index % tagColors.length];\n};\n\nconst XFlowContent = () => {\n const [loading, setLoading] = useState(false);\n const nodes = useNodes();\n const edges = useEdges();\n const [initData, setInitData] = useState\n
\n \n
\n 指标关系图谱
\n \n \n {\n setLoading(true);\n setNodes(initData?.nodes || []);\n setEdges(initData?.edges || []);\n runAutoLayout();\n setLoading(false);\n }}\n className=\"tools-btn\"\n >\n 重置\n \n\n \n \n
\n \n
\n );\n}\n"
},
{
"path": "docs/xflow/demo/custom-flow/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingWidget: \"customWidget\",\n settingWidgetProps: {\n params: \"test\"\n }\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/flow-provider/edges.ts",
"content": "export const edges = [{ source: '1', target: '2', id: '234123' }];\n"
},
{
"path": "docs/xflow/demo/flow-provider/index.tsx",
"content": "import * as React from \"react\";\n\nimport XFlow, { FlowProvider, useNodes } from '@xrenders/xflow';\nimport { edges as initialEdges } from './edges';\nimport { nodes as initialNodes } from './nodes';\nimport settings from './setting';\n\nconst App = () => {\n return (\n \n
\n \n
\n );\n};\n\nexport default Demo;\n"
},
{
"path": "docs/xflow/demo/layout/LR/setting.tsx",
"content": "export const settings=[\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n ],\n },\n];\n\n\nexport const nodes = [\n {\n type: 'Start',\n id: '1',\n position: { x: -35, y: 268 },\n },\n {\n type: 'Switch',\n id: 'b6zsd6w5ah2b209t',\n position: { x: 277.5, y: 268 },\n data: {\n list: [\n {\n _id: 'iawoyh5niyi6zjob',\n },\n ],\n },\n },\n {\n type: 'Code',\n id: '3',\n position: { x: 675, y: 123.75 },\n },\n {\n type: 'tool',\n id: '4',\n position: { x: 686.25, y: 495 },\n },\n {\n type: 'End',\n id: '5',\n position: { x: 1176.2499999999998, y: 281.25 },\n },\n];\nexport const edges = [\n {\n source: '3',\n target: '5',\n id: 'e3-5',\n },\n {\n source: '4',\n target: '5',\n id: 'e4-5',\n },\n {\n id: 'px7fsmha99pju315',\n source: '1',\n target: 'b6zsd6w5ah2b209t',\n },\n {\n type: 'buttonedge',\n source: 'b6zsd6w5ah2b209t',\n sourceHandle: 'iawoyh5niyi6zjob',\n target: '3',\n id: 'xy-edge__b6zsd6w5ah2b209tiawoyh5niyi6zjob-3',\n },\n {\n type: 'buttonedge',\n source: 'b6zsd6w5ah2b209t',\n sourceHandle: 'id_else',\n target: '4',\n id: 'xy-edge__b6zsd6w5ah2b209tid_else-4',\n },\n];\n"
},
{
"path": "docs/xflow/demo/layout/TB/index.tsx",
"content": "import React from 'react';\nimport XFlow from '@xrenders/xflow';\n\nconst settings = [\n {\n title: '流程控制',\n type: '_group',\n items: [\n {\n title: '开始',\n type: 'Start',\n description: '流程开始节点',\n targetHandleHidden: true,\n hidden:true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n name: {\n title: '流程名称',\n type: 'string',\n widget: 'input',\n required: true,\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n description: '流程结束节点',\n hidden: true,\n sourceHandleHidden:true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: 'object',\n properties: {\n output: {\n title: '输出结果',\n type: 'string',\n widget: 'textarea',\n },\n },\n },\n },\n ],\n },\n {\n title: 'AI 能力',\n type: '_group',\n items: [\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: 'object',\n properties: {\n model: {\n title: '模型选择',\n type: 'string',\n enum: ['gpt-3.5', 'gpt-4', 'claude-2', 'claude-3'],\n default: 'gpt-3.5',\n },\n temperature: {\n title: '温度',\n type: 'number',\n default: 0.7,\n minimum: 0,\n maximum: 1,\n },\n },\n },\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '提示词模板',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n prompt: {\n title: '提示词',\n type: 'string',\n widget: 'textarea',\n default: '请帮我完成以下任务：',\n },\n },\n },\n },\n ],\n },\n {\n title: '数据处理',\n type: '_group',\n items: [\n {\n title: '知识库',\n type: 'knowledge',\n description: '知识库检索',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: 'object',\n properties: {\n knowledgeBase: {\n title: '知识库选择',\n type: 'string',\n enum: ['产品文档', '技术文档', '用户手册', 'API文档'],\n default: '产品文档',\n },\n searchLimit: {\n title: '检索限制',\n type: 'number',\n default: 5,\n minimum: 1,\n maximum: 10,\n },\n },\n },\n },\n {\n title: '数据转换',\n type: 'transform',\n description: '数据格式转换',\n icon: {\n type: 'icon-prompt',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: 'object',\n properties: {\n inputType: {\n title: '输入类型',\n type: 'string',\n enum: ['json', 'text', 'csv', 'xml'],\n default: 'json',\n },\n outputType: {\n title: '输出类型',\n type: 'string',\n enum: ['json', 'text', 'csv', 'xml'],\n default: 'json',\n },\n },\n },\n },\n ],\n },\n];\n\nconst initialValues = {\n nodes: [\n {\n id: 'start',\n type: 'Start',\n data: {\n name: '数据分析流程',\n description: '基于LLM的数据分析系统',\n variables: [\n {\n name: 'dataSource',\n type: 'string',\n defaultValue: 'csv',\n },\n {\n name: 'analysisType',\n type: 'string',\n defaultValue: 'trend',\n },\n ],\n },\n position: {\n x: 400,\n y: 50,\n },\n },\n {\n id: 'transform1',\n type: 'transform',\n data: {\n inputType: 'csv',\n outputType: 'json',\n mapping: [\n {\n source: 'date',\n target: 'timestamp',\n transform: 'new Date(${date}).getTime()',\n },\n {\n source: 'value',\n target: 'amount',\n transform: 'parseFloat(${value})',\n },\n ],\n },\n position: {\n x: 200,\n y: 200,\n },\n },\n {\n id: 'transform2',\n type: 'transform',\n data: {\n inputType: 'json',\n outputType: 'text',\n mapping: [\n {\n source: 'summary',\n target: 'description',\n transform: '${summary}',\n },\n ],\n },\n position: {\n x: 600,\n y: 200,\n },\n },\n {\n id: 'llm1',\n type: 'LLM',\n data: {\n model: 'gpt-3.5',\n temperature: 0.7,\n maxTokens: 2000,\n systemPrompt: '你是一个专业的数据分析师，请分析数据趋势。',\n stopSequences: ['\\n\\n', '。'],\n },\n position: {\n x: 200,\n y: 350,\n },\n },\n {\n id: 'knowledge1',\n type: 'knowledge',\n data: {\n knowledgeBase: '技术文档',\n searchLimit: 5,\n similarity: 0.7,\n filters: [\n {\n field: 'type',\n operator: 'equals',\n value: 'analysis',\n },\n ],\n },\n position: {\n x: 200,\n y: 450,\n },\n },\n {\n id: 'prompt1',\n type: 'Prompt',\n data: {\n prompt: '请分析数据趋势：',\n variables: [\n {\n name: 'dataType',\n value: '${analysisType}',\n },\n ],\n examples: [\n {\n input: '销售数据',\n output: '销售额呈现上升趋势，环比增长15%',\n },\n ],\n },\n position: {\n x: 600,\n y: 450,\n },\n },\n {\n id: 'llm2',\n type: 'LLM',\n data: {\n model: 'gpt-3.5',\n temperature: 0.7,\n maxTokens: 2000,\n systemPrompt: '你是一个专业的数据分析师，请生成分析报告。',\n },\n position: {\n x: 400,\n y: 700,\n },\n },\n {\n id: 'end',\n type: 'End',\n data: {\n output: '分析完成',\n status: 'success',\n message: '数据分析报告已生成',\n },\n position: {\n x: 400,\n y: 800,\n },\n },\n ],\n edges: [\n {\n id: 'start-transform1',\n source: 'start',\n target: 'transform1',\n },\n {\n id: 'start-transform2',\n source: 'start',\n target: 'transform2',\n },\n {\n id: 'transform1-llm1',\n source: 'transform1',\n target: 'llm1',\n },\n {\n id: 'transform2-prompt1',\n source: 'transform2',\n target: 'prompt1',\n },\n {\n id: 'llm1-knowledge1',\n source: 'llm1',\n target: 'knowledge1',\n },\n {\n id: 'knowledge1-llm2',\n source: 'knowledge1',\n target: 'llm2',\n },\n {\n id: 'prompt1-llm2',\n source: 'prompt1',\n target: 'llm2',\n },\n {\n id: 'llm2-end',\n source: 'llm2',\n target: 'end',\n },\n ],\n};\n\nconst Demo = () => {\n return (\n \n
\n );\n};\n\nexport default Demo;\n"
},
{
"path": "docs/xflow/demo/layout/TB/setting.tsx",
"content": "export const settings = [\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' },\n ],\n },\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea',\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker',\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange',\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker',\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange',\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n },\n },\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n ],\n },\n];\n\nexport const nodes = [\n {\n type: 'Start',\n id: '1',\n position: {\n x: 346.25,\n y: -75.54414939880371,\n },\n },\n {\n type: 'Switch',\n id: 'b6zsd6w5ah2b209t',\n position: {\n x: 346.25,\n y: 41.75,\n },\n data: {\n list: [\n {\n _id: 'iawoyh5niyi6zjob',\n },\n ],\n },\n },\n {\n type: 'Code',\n id: '3',\n position: {\n x: 53,\n y: 207.5,\n },\n },\n {\n type: 'tool',\n id: '4',\n position: {\n x: 676,\n y: 220,\n },\n },\n {\n type: 'End',\n id: '5',\n position: {\n x: 388.7499999999998,\n y: 497.5,\n },\n },\n];\nexport const edges = [\n {\n source: '3',\n target: '5',\n id: 'e3-5',\n },\n {\n source: '4',\n target: '5',\n id: 'e4-5',\n },\n {\n id: 'px7fsmha99pju315',\n source: '1',\n target: 'b6zsd6w5ah2b209t',\n },\n {\n type: 'buttonedge',\n source: 'b6zsd6w5ah2b209t',\n sourceHandle: 'iawoyh5niyi6zjob',\n target: '3',\n id: 'xy-edge__b6zsd6w5ah2b209tiawoyh5niyi6zjob-3',\n },\n {\n type: 'buttonedge',\n source: 'b6zsd6w5ah2b209t',\n sourceHandle: 'id_else',\n target: '4',\n id: 'xy-edge__b6zsd6w5ah2b209tid_else-4',\n },\n];\n"
},
{
"path": "docs/xflow/demo/log/buildIn-log/CustomGroupTittle.tsx",
"content": "import React from 'react';\nimport { Tag } from 'antd';\n\nconst CustomGroupTitle = ({ logData }) => {\n return (\n \n
\n );\n};\n\nexport default CustomGroupTitle;\n"
},
{
"path": "docs/xflow/demo/log/buildIn-log/DetailLogWidget.tsx",
"content": "import React from 'react';\nimport { Card, Typography, Space, Tag } from 'antd';\n\nconst { Text } = Typography;\n\ninterface DetailLogWidgetProps {\n data: any;\n logList: any[];\n currentStatus: string;\n logPanel: any;\n}\n\nconst DetailLogWidget: React.FC\n \n {logData?.groupTitle}\n \n 自定义分组标题 \n
\n \n \n 当前节点状态: \n \n {currentStatus}\n \n
\n\n \n 节点ID: \n {data.nodeId} \n
\n\n {data.statusPanel?.extra && (\n \n 额外信息: \n {data.statusPanel.extra} \n
\n )}\n \n 自定义按钮 : null,\n onChange: (activeKey)=>{\n setActiveKey(activeKey);\n },\n },\n detailLogWidget: 'DetailLogWidget',//自定义详情tab组件\n }}\n globalConfig={{\n nodeView: {\n status: [\n {\n value: 'custom-error',\n color: 'red',\n name: '失败状态',\n },\n {\n value: 'custom-succsess',\n color: 'green',\n name: '成功状态',\n },\n ],\n },\n }}\n />\n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/log/buildIn-log/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n // hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n // hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Parallel',\n type: 'Parallel',\n description: '并行节点',\n icon: {\n type: 'icon-parallel',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/log/buildIn-log/utils.tsx",
"content": "export const delay = ms => new Promise(res => setTimeout(res, ms));\n\nexport const fakeApi = (url, data) => {\n console.group('request:', url);\n console.log('params:', data);\n console.groupEnd();\n return delay(500).then(res => ({\n success: true,\n message: 'Data fetched successfully',\n data: {\n id: data.id || 'default-id',\n name: 'Sample Node',\n logs: [\n { timestamp: '2023-10-01T10:00:00Z', message: 'Log entry 1' },\n { timestamp: '2023-10-01T11:00:00Z', message: 'Log entry 2' },\n ],\n },\n }));\n};\n"
},
{
"path": "docs/xflow/demo/log/custom-log/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport { useState } from 'react';\nimport settings from './setting';\nimport { fakeApi } from './utils';\n\nconst CustomLogPanel = ({ logList, node }) => {\n console.log('自定义组件', logList, node);\n return 自定义组件:{node?.id}
;\n};\n\nexport default () => {\n const [logList, setLogList] = useState\n {\n setLoading(true);\n const logList = await fakeApi('xx', {});\n setLogList([logList]);\n setLoading(false);\n }}\n />\n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/log/custom-log/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n // hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n // hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Parallel',\n type: 'Parallel',\n description: '并行节点',\n icon: {\n type: 'icon-parallel',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/log/custom-log/utils.tsx",
"content": "export const delay = ms => new Promise(res => setTimeout(res, ms));\n\nexport const fakeApi = (url, data) => {\n console.group('request:', url);\n console.log('params:', data);\n console.groupEnd();\n return delay(500).then(res => ({\n success: true,\n message: 'Data fetched successfully',\n data: {\n id: data.id || 'default-id',\n name: 'Sample Node',\n logs: [\n { timestamp: '2023-10-01T10:00:00Z', message: 'Log entry 1' },\n { timestamp: '2023-10-01T11:00:00Z', message: 'Log entry 2' },\n ],\n },\n }));\n};\n"
},
{
"path": "docs/xflow/demo/log/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport React,{ useState } from 'react';\nimport settings from './setting';\n\nexport default () => {\n const [logList, setLogList] = useState\n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/log/runNode/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport { message } from 'antd';\nimport { useState } from 'react';\n\nexport default () => {\n const [loading, setLoading] = useState\n {\n setLoading(true);\n // 模拟调试过程\n setTimeout(() => {\n message.success('节点调试完成');\n setLoading(false);\n }, 1000);\n console.log('单点调试', node, nodes);\n }}\n />\n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/log/runNode/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n // hidden: true,\n targetHandleHidden: true,\n showTestingBtn: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n // hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Parallel',\n type: 'Parallel',\n showTestingBtn: true,\n description: '并行节点',\n icon: {\n type: 'icon-parallel',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n showTestingBtn:true,\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/log/runNode/utils.tsx",
"content": "export const delay = ms => new Promise(res => setTimeout(res, ms));\n\nexport const fakeApi = (url, data) => {\n console.group('request:', url);\n console.log('params:', data);\n console.groupEnd();\n return delay(500).then(res => ({\n success: true,\n message: 'Data fetched successfully',\n data: {\n id: data.id || 'default-id',\n name: 'Sample Node',\n logs: [\n { timestamp: '2023-10-01T10:00:00Z', message: 'Log entry 1' },\n { timestamp: '2023-10-01T11:00:00Z', message: 'Log entry 2' },\n ],\n },\n }));\n};\n"
},
{
"path": "docs/xflow/demo/log/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n // hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n // hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Parallel',\n type: 'Parallel',\n description: '并行节点',\n icon: {\n type: 'icon-parallel',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/log/utils.tsx",
"content": "export const delay = ms => new Promise(res => setTimeout(res, ms));\n\nexport const fakeApi = (url, data) => {\n console.group('request:', url);\n console.log('params:', data);\n console.groupEnd();\n return delay(500).then(res => ({\n success: true,\n message: 'Data fetched successfully',\n data: {\n id: data.id || 'default-id',\n name: 'Sample Node',\n logs: [\n { timestamp: '2023-10-01T10:00:00Z', message: 'Log entry 1' },\n { timestamp: '2023-10-01T11:00:00Z', message: 'Log entry 2' },\n ],\n },\n }));\n};\n"
},
{
"path": "docs/xflow/demo/nodeSetting/data.tsx",
"content": "export const settings = [\n {\n title: '开始', // 节点名称\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n // 图标描述\n type: 'icon-start', // icon-font\n bgColor: '#17B26A', // 图标背景颜色\n },\n nodePanel: {\n width: 600,\n hideDesc: false,\n },\n settingSchema: {\n // 自定义节点配置\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' },\n ],\n },\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea',\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker',\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange',\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker',\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange',\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n },\n },\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-switch',\n bgColor: '#06AED4',\n },\n onTesting: (node, nodes) => {\n console.log(\"单点调试\",node,nodes)\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: '_group', // 节点分组\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n ],\n },\n];\n\nexport const nodes = [\n {\n type: 'Start',\n id: '1',\n position: { x: -35, y: 268 },\n },\n {\n type: 'Switch',\n id: 'b6zsd6w5ah2b209t',\n position: { x: 277.5, y: 268 },\n data: {\n list: [\n {\n _id: 'iawoyh5niyi6zjob',\n },\n ],\n },\n },\n {\n type: 'Code',\n id: '3',\n position: { x: 675, y: 123.75 },\n },\n {\n type: 'tool',\n id: '4',\n position: { x: 686.25, y: 495 },\n },\n {\n type: 'End',\n id: '5',\n position: { x: 1176.2499999999998, y: 281.25 },\n },\n];\nexport const edges = [\n {\n source: '3',\n target: '5',\n id: 'e3-5',\n },\n {\n source: '4',\n target: '5',\n id: 'e4-5',\n },\n {\n id: 'px7fsmha99pju315',\n source: '1',\n target: 'b6zsd6w5ah2b209t',\n },\n {\n type: 'buttonedge',\n source: 'b6zsd6w5ah2b209t',\n sourceHandle: 'iawoyh5niyi6zjob',\n target: '3',\n id: 'xy-edge__b6zsd6w5ah2b209tiawoyh5niyi6zjob-3',\n },\n {\n type: 'buttonedge',\n source: 'b6zsd6w5ah2b209t',\n sourceHandle: 'id_else',\n target: '4',\n id: 'xy-edge__b6zsd6w5ah2b209tid_else-4',\n },\n];\n"
},
{
"path": "docs/xflow/demo/nodeSetting/fullDemo/CustomImg.tsx",
"content": "import React from 'react';\n\nconst CustomImg = ({ setting }) => {\n console.log('props', setting);\n return (\n \n {\n console.log('整理画布完成，节点数量:', nodes.length);\n console.log('整理后的节点数据:', nodes);\n message.success(`画布已整理完成，共 ${nodes.length} 个节点`);\n }\n }\n }}\n />\n
\n );\n};\n\nexport default Demo;\n"
},
{
"path": "docs/xflow/demo/nodeSetting/fullDemo/settings.ts",
"content": "export const settings= [\n {\n title: '流程控制',\n type: '_group',\n items: [\n {\n title: '开始',\n type: 'Start',\n description: '自定义SVG形式的图标',\n icon: {\n bgColor: '#17B26A', // icon背景颜色\n },\n iconSvg: 'CustomSvg', // 传入字符串形式的 SVG\n settingSchema: {\n type: 'object',\n properties: {\n name: {\n title: '流程名称',\n type: 'string',\n widget: 'input',\n required: true,\n },\n description: {\n title: '流程描述',\n type: 'string',\n widget: 'textarea',\n },\n variables: {\n title: '流程变量',\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: {\n title: '变量名',\n type: 'string',\n required: true,\n },\n type: {\n title: '变量类型',\n type: 'string',\n enum: ['string', 'number', 'boolean'],\n default: 'string',\n },\n defaultValue: {\n title: '默认值',\n type: 'string',\n },\n },\n },\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n description: '自定义图片形式的图标',\n icon: {\n bgColor: '#DACFF3',\n },\n iconSvg: 'CustomImg', // 图标图片组件\n imgSrc: 'https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png', // 图片地址\n settingSchema: {\n type: 'object',\n properties: {\n output: {\n title: '输出结果',\n type: 'string',\n widget: 'textarea',\n },\n },\n },\n },\n ],\n },\n {\n title: 'AI 能力',\n type: '_group',\n items: [\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n bgColor:'#FFACF8',\n },\n iconSvg: 'CustomImg', // 图标图片组件\n imgSrc: 'https://img.alicdn.com/imgextra/i2/O1CN01Lu3elm1XLSPBGqvPi_!!6000000002907-2-tps-200-200.png', // 图片\n settingSchema: {\n type: 'object',\n properties: {\n model: {\n title: '模型选择',\n type: 'string',\n enum: ['gpt-3.5', 'gpt-4', 'claude-2', 'claude-3'],\n default: 'gpt-3.5',\n },\n temperature: {\n title: '温度',\n type: 'number',\n default: 0.7,\n minimum: 0,\n maximum: 1,\n description: '控制输出的随机性，值越高输出越随机',\n },\n maxTokens: {\n title: '最大Token数',\n type: 'number',\n default: 2000,\n minimum: 1,\n maximum: 4000,\n },\n systemPrompt: {\n title: '系统提示词',\n type: 'string',\n widget: 'textarea',\n description: '设置AI助手的角色和行为',\n },\n stopSequences: {\n title: '停止序列',\n type: 'array',\n items: {\n type: 'string',\n },\n description: '设置停止生成的关键词',\n },\n },\n },\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n prompt: {\n title: '提示词',\n type: 'string',\n widget: 'textarea',\n default: '请帮我完成以下任务：',\n },\n variables: {\n title: '变量替换',\n type: 'array',\n items: {\n type: 'object',\n properties: {\n name: {\n title: '变量名',\n type: 'string',\n required: true,\n },\n value: {\n title: '变量值',\n type: 'string',\n },\n },\n },\n },\n examples: {\n title: '示例',\n type: 'array',\n items: {\n type: 'object',\n properties: {\n input: {\n title: '输入',\n type: 'string',\n widget: 'textarea',\n },\n output: {\n title: '输出',\n type: 'string',\n widget: 'textarea',\n },\n },\n },\n },\n },\n },\n },\n ],\n },\n {\n title: '数据处理',\n type: '_group',\n items: [\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: 'object',\n properties: {\n knowledgeBase: {\n title: '知识库选择',\n type: 'string',\n enum: ['产品文档', '技术文档', '用户手册', 'API文档'],\n default: '产品文档',\n },\n searchLimit: {\n title: '检索限制',\n type: 'number',\n default: 5,\n minimum: 1,\n maximum: 10,\n },\n similarity: {\n title: '相似度阈值',\n type: 'number',\n default: 0.7,\n minimum: 0,\n maximum: 1,\n description: '设置检索结果的相似度阈值',\n },\n filters: {\n title: '过滤条件',\n type: 'array',\n items: {\n type: 'object',\n properties: {\n field: {\n title: '字段',\n type: 'string',\n required: true,\n },\n operator: {\n title: '操作符',\n type: 'string',\n enum: ['equals', 'contains', 'greaterThan', 'lessThan'],\n default: 'equals',\n },\n value: {\n title: '值',\n type: 'string',\n },\n },\n },\n },\n },\n },\n },\n {\n title: '数据转换',\n type: 'transform',\n description: '对数据进行格式转换和处理',\n icon: {\n type: 'icon-function-add-line1',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: 'object',\n properties: {\n inputType: {\n title: '输入类型',\n type: 'string',\n enum: ['json', 'text', 'csv', 'xml'],\n default: 'json',\n },\n outputType: {\n title: '输出类型',\n type: 'string',\n enum: ['json', 'text', 'csv', 'xml'],\n default: 'json',\n },\n mapping: {\n title: '字段映射',\n type: 'array',\n items: {\n type: 'object',\n properties: {\n source: {\n title: '源字段',\n type: 'string',\n required: true,\n },\n target: {\n title: '目标字段',\n type: 'string',\n required: true,\n },\n transform: {\n title: '转换规则',\n type: 'string',\n widget: 'textarea',\n },\n },\n },\n },\n },\n },\n },\n ],\n },\n];"
},
{
"path": "docs/xflow/demo/nodeSetting/index.tsx",
"content": "import XFlow, { FlowProvider, useFlow } from '@xrenders/xflow';\nimport { Button } from 'antd';\n// import settings from './setting';\nimport React from 'react';\nimport { settings, nodes, edges } from \"./data\";\n\nexport const Flow = () => {\n const { getNodes, getEdges, getViewport, toObject } = useFlow();\n\n return (\n <>\n \n \n \n \n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/nodeSetting/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/nodeWidget/index.less",
"content": ".node-llm-style {\n .custom-node-container{\n background-color: rgba(97, 113, 243,0.3);\n }\n}\n"
},
{
"path": "docs/xflow/demo/nodeWidget/index.tsx",
"content": "import React from 'react';\nimport XFlow from '@xrenders/xflow';\nimport { Space, Tag, Typography, Card } from 'antd';\nimport settings from './setting';\nimport './index.less';\n\n// LLM 节点\nconst LLMNodeWidget = ({ data }) => {\n const { model, temperature, maxTokens, systemPrompt } = data;\n return (\n \n 模型 \n
\n \n {model} \n
\n \n 参数 \n
\n \n \n 温度: {temperature} \n 最大Token: {maxTokens} \n \n
\n \n 系统提示词 \n
\n \n {systemPrompt} \n
\n \n 请求 \n
\n \n {method} \n {url} \n
\n \n 请求头 \n
\n \n {JSON.stringify(headers)} \n
\n \n 请求体 \n
\n \n {JSON.stringify(body)} \n
\n \n 分类 \n
\n \n \n {(categories || [])?.map(cat => (\n \n {cat}\n \n ))}\n \n
\n \n 规则 \n
\n \n {rules} \n
\n \n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/nodeWidget/setting.ts",
"content": "const settings = [\n {\n type: 'Start',\n title: '开始节点',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n type: 'string',\n title: '输入',\n },\n },\n },\n },\n {\n type: 'LLM',\n title: 'LLM 处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n nodeWidget: 'LLMNodeWidget',\n className: 'node-llm-style',\n settingSchema: {\n type: 'object',\n properties: {\n model: {\n type: 'string',\n title: '模型',\n widget: 'select',\n enum: ['GPT-4', 'GPT-3.5', 'Claude'],\n default: 'GPT-4',\n },\n temperature: {\n type: 'number',\n title: '温度',\n widget: 'slider',\n minimum: 0,\n maximum: 1,\n default: 0.7,\n },\n maxTokens: {\n type: 'number',\n title: '最大Token',\n default: 200,\n },\n systemPrompt: {\n type: 'string',\n title: '系统提示词',\n default: '你是一个专业的AI助手，请帮助用户解决问题。',\n },\n },\n },\n },\n {\n type: 'HTTP',\n title: 'HTTP请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n nodeWidget: 'HTTPNodeWidget',\n settingSchema: {\n type: 'object',\n properties: {\n method: {\n type: 'string',\n title: '请求方法',\n widget: 'select',\n enum: ['GET', 'POST', 'PUT', 'DELETE'],\n default: 'POST',\n },\n url: {\n type: 'string',\n title: '请求地址',\n default: 'https://api.example.com/process',\n },\n headers: {\n type: 'string',\n title: '请求头',\n default: JSON.stringify({ 'Content-Type': 'application/json' }),\n },\n body: {\n type: 'string',\n title: '请求体',\n default: JSON.stringify({ key: 'value' }),\n },\n },\n },\n },\n {\n type: 'Classifier',\n title: '问题分类',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n nodeWidget: 'ClassifierNodeWidget',\n settingSchema: {\n type: 'object',\n properties: {\n categories: {\n type: 'array',\n title: '分类',\n widget: 'select',\n enum: ['技术问题', '业务问题', '其他'],\n default: ['技术问题', '业务问题', '其他'],\n },\n rules: {\n type: 'string',\n title: '规则',\n default: '根据问题描述的关键词进行分类',\n },\n defaultCategory: {\n type: 'string',\n title: '默认分类',\n widget: 'select',\n enum: ['技术问题', '业务问题', '其他'],\n default: '其他',\n },\n },\n },\n },\n {\n type: 'End',\n title: '结束节点',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n type: 'string',\n title: '输入',\n widget: 'input',\n },\n },\n },\n },\n];\n\nexport default settings;\n"
},
{
"path": "docs/xflow/demo/parallelNode/custome/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport settings from './setting';\nimport React from 'react'\n\nconst CustomParallel = ({data,index}) => {\n // data：为data.list循环数据中当前条件的item\n // index：为data.list循环数据中当前条件的index\n return {data?.value}-{index}
;\n}\n\nexport default () => {\n const nodes = [\n {\n id: 'mcelcsg6pinydoy7',\n type: 'Parallel',\n data: {\n list: [\n {\n _id: 'id_30ds0x3evus7ogo2',\n value: '事件1',\n title: \"事件1\"\n },\n {\n _id: 'id_m1l276eelcgn7s1p',\n value: '事件2',\n title: \"事件1\"\n },\n ],\n },\n position: {\n x: -40,\n y: 281.25,\n },\n },\n {\n id: '4m9tee00n819nyyy',\n type: 'tool',\n position: {\n x: 400,\n y: 227.5,\n },\n },\n {\n id: 'j0kufl0o4fca4ee9',\n type: 'knowledge',\n\n position: {\n x: 312.5,\n y: 438.75,\n },\n\n },\n {\n id: 'w4be9edh4bhdlokm',\n type: 'Start',\n position: {\n x: -379.21875,\n y: 348.75,\n },\n },\n {\n id: '3qloq2p1x3wcwbzg',\n type: 'End',\n position: {\n x: 675,\n y: 360,\n },\n },\n ];\n\n const edges = [\n {\n id: 'ky0eedrd6t2hqq81',\n source: 'mcelcsg6pinydoy7',\n target: '4m9tee00n819nyyy',\n sourceHandle: 'id_30ds0x3evus7ogo2',\n },\n {\n id: '7tm5a339lj94ugtn',\n source: 'mcelcsg6pinydoy7',\n target: 'j0kufl0o4fca4ee9',\n sourceHandle: 'id_m1l276eelcgn7s1p',\n },\n {\n type: 'buttonedge',\n source: 'w4be9edh4bhdlokm',\n target: 'mcelcsg6pinydoy7',\n id: 'xy-edge__w4be9edh4bhdlokm-mcelcsg6pinydoy7',\n },\n {\n type: 'buttonedge',\n source: '4m9tee00n819nyyy',\n target: '3qloq2p1x3wcwbzg',\n id: 'xy-edge__4m9tee00n819nyyy-3qloq2p1x3wcwbzg',\n },\n {\n type: 'buttonedge',\n source: 'j0kufl0o4fca4ee9',\n target: '3qloq2p1x3wcwbzg',\n id: 'xy-edge__j0kufl0o4fca4ee9-3qloq2p1x3wcwbzg',\n },\n ];\n return (\n\n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/parallelNode/custome/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n // hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n // hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Parallel',\n type: 'Parallel',\n description: '并行节点',\n icon: {\n type: 'icon-parallel',\n bgColor: '#06AED4',\n },\n nodeWidget:\"CustomParallel\"\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/parallelNode/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport settings from './setting';\nimport React from 'react'\n\nexport default () => {\n const nodes = [\n {\n id: 'mcelcsg6pinydoy7',\n type: 'Parallel',\n data: {\n list: [\n {\n _id: 'id_30ds0x3evus7ogo2',\n value: '事件1',\n title:\"标题1\"\n },\n {\n _id: 'id_m1l276eelcgn7s1p',\n value: '事件2',\n title: \"标题2\"\n },\n ],\n },\n position: {\n x: -40,\n y: 281.25,\n },\n },\n {\n id: '4m9tee00n819nyyy',\n type: 'tool',\n position: {\n x: 400,\n y: 227.5,\n },\n },\n {\n id: 'j0kufl0o4fca4ee9',\n type: 'knowledge',\n\n position: {\n x: 312.5,\n y: 438.75,\n },\n\n },\n {\n id: 'w4be9edh4bhdlokm',\n type: 'Start',\n position: {\n x: -379.21875,\n y: 348.75,\n },\n },\n {\n id: '3qloq2p1x3wcwbzg',\n type: 'End',\n position: {\n x: 675,\n y: 360,\n },\n },\n ];\n\n const edges = [\n {\n id: 'ky0eedrd6t2hqq81',\n source: 'mcelcsg6pinydoy7',\n target: '4m9tee00n819nyyy',\n sourceHandle: 'id_30ds0x3evus7ogo2',\n },\n {\n id: '7tm5a339lj94ugtn',\n source: 'mcelcsg6pinydoy7',\n target: 'j0kufl0o4fca4ee9',\n sourceHandle: 'id_m1l276eelcgn7s1p',\n },\n {\n type: 'buttonedge',\n source: 'w4be9edh4bhdlokm',\n target: 'mcelcsg6pinydoy7',\n id: 'xy-edge__w4be9edh4bhdlokm-mcelcsg6pinydoy7',\n },\n {\n type: 'buttonedge',\n source: '4m9tee00n819nyyy',\n target: '3qloq2p1x3wcwbzg',\n id: 'xy-edge__4m9tee00n819nyyy-3qloq2p1x3wcwbzg',\n },\n {\n type: 'buttonedge',\n source: 'j0kufl0o4fca4ee9',\n target: '3qloq2p1x3wcwbzg',\n id: 'xy-edge__j0kufl0o4fca4ee9-3qloq2p1x3wcwbzg',\n },\n ];\n return (\n \n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/parallelNode/setting.tsx",
"content": "export default [\n {\n title: '开始',\n type: 'Start',\n // hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n // hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Parallel',\n type: 'Parallel',\n description: '并行节点',\n icon: {\n type: 'icon-parallel',\n bgColor: '#06AED4',\n },\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'HSF',\n type: 'hsf',\n description: '允许通过 HSF 协议发送服务器请求',\n icon: {\n type: 'icon-hsf',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'Http',\n type: 'http',\n description: '允许通过 HTTP 协议发送服务器请求',\n icon: {\n type: 'icon-http',\n bgColor: '#875BF7',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: '_group',\n items: [\n {\n title: '代码执行',\n type: 'Code',\n description: '执行一段 Groovy 或 Python 或 NodeJS 代码实现自定义逻辑',\n icon: {\n type: 'icon-code',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: '工具',\n type: 'tool',\n description: '允许使用工具能力',\n icon: {\n type: 'icon-gongju',\n bgColor: '#2E90FA',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n ],\n },\n];\n"
},
{
"path": "docs/xflow/demo/quickStart/index.tsx",
"content": "import React from 'react';\nimport XFlow from '@xrenders/xflow';\n\nexport default () => {\n const nodeSettings = [\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n disabledShortcutDelete: true,\n disabledShortcutCopy: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n disabledShortcutDelete: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n }\n }\n },\n {\n title: 'LLM',\n type: 'LLM',\n description: '调用大语言模型回答问题或者对自然语言进行处理',\n icon: {\n type: 'icon-model',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: 'object',\n properties: {\n model: {\n title: '模型',\n type: 'string',\n enum: ['gpt-3.5', 'gpt-4'],\n default: 'gpt-3.5'\n },\n temperature: {\n title: '温度',\n type: 'number',\n default: 0.7,\n minimum: 0,\n maximum: 1\n }\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n },\n ];\n\n\n const initialValues = {\n nodes: [\n {\n id: 'start',\n type: 'Start',\n data: {\n input: '开始节点'\n },\n position: {\n x: 100,\n y: 100\n }\n },\n {\n id: 'llm',\n type: 'LLM',\n data: {\n model: 'gpt-3.5',\n temperature: 0.7\n },\n position: {\n x: 500,\n y: 100\n }\n },\n {\n id: 'prompt',\n type: 'Prompt',\n data: {},\n position: {\n x: 900,\n y: 100\n }\n },\n {\n id: 'end',\n type: 'End',\n data: {\n input: '结束节点'\n },\n position: {\n x: 1200,\n y: 100\n }\n }\n ],\n edges: [\n {\n id: 'start-llm',\n source: 'start',\n target: 'llm'\n },\n {\n id: 'llm-prompt',\n source: 'llm',\n target: 'prompt'\n },\n {\n id: 'prompt-end',\n source: 'prompt',\n target: 'end'\n }\n ]\n };\n\n\n return (\n \n
\n );\n}\n"
},
{
"path": "docs/xflow/demo/switchNode/customSwitchNode/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport settings from './setting';\nimport React from 'react';\n\nconst customWidget = ({ data, index }) => {\n return {data?.value}-{index}
;\n};\n\nexport default () => {\n const nodes = [\n {\n type: 'Switch',\n id: '2',\n position: { x: 171.25, y: 218.75 },\n data: { list:[{value:\"条件1\"}]}\n },\n ];\n\n const edges = [];\n\n return (\n\n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/switchNode/customSwitchNode/setting.tsx",
"content": "export default [\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n nodeWidget: \"customWidget\" // 自定义节点面板渲染\n },\n {\n title: '开始',\n type: 'Start',\n hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '提示词',\n type: 'string',\n widget: 'textArea',\n },\n }\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '知识库',\n type: 'string',\n widget: 'textArea',\n },\n }\n },\n },\n];\n"
},
{
"path": "docs/xflow/demo/switchNode/index.tsx",
"content": "import XFlow from '@xrenders/xflow';\nimport settings from './setting';\n\nexport default () => {\n const nodes = [\n {\n id: 'hwqfyj734kgwljvt',\n type: 'Start',\n position: {\n x: -159.0597703862493,\n y: 323.4293111587479,\n },\n },\n {\n id: 'kshd2hp4vqm8ww19',\n type: 'Switch',\n position: {\n x: 180.79626287562883,\n y: 209.9170981759363,\n },\n data: {\n list: [\n {\n _id: 'id_1nmzbhnbtv1se6sd', // 对应的 sourceHandle: 'id_1nmzbhnbtv1se6sd'的边\n value: '条件1',\n name: \"这里是条件一\",\n title:\"默认title\"\n },\n {\n value: '条件2',\n _id: 'id_enxhwfca1ebn55td', // 对应sourceHandle: 'id_enxhwfca1ebn55td'的边\n name:\"这里是条件一\"\n },\n {\n value: '条件3',\n _id: 'id_z1f7b93zwbx1xycu', // 对应sourceHandle: 'id_z1f7b93zwbx1xycu'的边\n name:'这里是条件一'\n },\n ],\n desc: '',\n },\n },\n {\n id: 'ql61j2tdli4xage0',\n type: 'Prompt',\n position: {\n x: 578.75,\n y: 176.25,\n },\n },\n {\n id: 'fab1j735q8iow6u3',\n type: 'knowledge',\n position: {\n x: 577.5,\n y: 318.75,\n },\n },\n {\n id: '9mc5i628mfrxdow0',\n type: 'Prompt',\n position: {\n x: 603.75,\n y: 422.5,\n },\n },\n {\n id: 'xgkajbbgs8cls8r1',\n type: 'knowledge',\n position: {\n x: 932.5,\n y: 556.25,\n },\n },\n {\n id: 'anmv2kcadqxj4k63',\n type: 'Prompt',\n position: {\n x: 540,\n y: 555,\n },\n },\n {\n id: '1obmsf5g1xfsypdj',\n type: 'End',\n position: {\n x: 1359.5373712437117,\n y: 359.3804592275014,\n },\n },\n ];\n\n const edges = [\n {\n id: '0lnn4hks9wnz0lnq',\n source: 'hwqfyj734kgwljvt',\n target: 'kshd2hp4vqm8ww19',\n },\n {\n id: '5s6af77jbcqvzfod',\n source: 'kshd2hp4vqm8ww19', // switch节点的边\n target: 'ql61j2tdli4xage0',\n sourceHandle: 'id_1nmzbhnbtv1se6sd', // 对应 _id为'id_1nmzbhnbtv1se6sd'的条件\n },\n {\n id: '6tw709qgc3mtazrv',\n source: 'kshd2hp4vqm8ww19', // switch节点的边\n target: 'fab1j735q8iow6u3',\n sourceHandle: 'id_enxhwfca1ebn55td', // 对应 _id为'id_enxhwfca1ebn55td'的条件\n },\n {\n id: 'vzlvdo69ljcqegc8',\n source: 'kshd2hp4vqm8ww19', // switch节点的边\n target: '9mc5i628mfrxdow0',\n sourceHandle: 'id_z1f7b93zwbx1xycu', // 对应 _id为'id_z1f7b93zwbx1xycu'的条件\n },\n {\n id: 'j8p8fnr5au9k25pb',\n source: 'kshd2hp4vqm8ww19', // switch节点的边\n target: 'anmv2kcadqxj4k63',\n sourceHandle: 'id_else', // id_else 对应默认路径ELSE\n },\n {\n id: '0qfpkc9vcjdb31qp',\n source: 'anmv2kcadqxj4k63',\n target: 'xgkajbbgs8cls8r1',\n },\n {\n id: '5h05o312rfbj4559',\n source: 'ql61j2tdli4xage0',\n target: '1obmsf5g1xfsypdj',\n },\n {\n source: 'fab1j735q8iow6u3',\n target: '1obmsf5g1xfsypdj',\n id: 'xy-edge__fab1j735q8iow6u3-1obmsf5g1xfsypdj',\n },\n {\n source: '9mc5i628mfrxdow0',\n target: '1obmsf5g1xfsypdj',\n id: 'xy-edge__9mc5i628mfrxdow0-1obmsf5g1xfsypdj',\n },\n {\n source: 'xgkajbbgs8cls8r1',\n target: '1obmsf5g1xfsypdj',\n id: 'xy-edge__xgkajbbgs8cls8r1-1obmsf5g1xfsypdj',\n },\n ];\n return (\n \n
\n );\n};\n"
},
{
"path": "docs/xflow/demo/switchNode/setting.tsx",
"content": "export default [\n {\n title: 'Switch',\n type: 'Switch',\n description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',\n icon: {\n type: 'icon-fenzhi',\n bgColor: '#06AED4',\n },\n switchExtra: { // 条件节点额外属性配置\n // hideElse: true,\n valueKey: 'value',\n titleKey: 'name'\n }\n },\n {\n title: '开始',\n type: 'Start',\n // hidden: true,\n targetHandleHidden: true,\n icon: {\n type: 'icon-start',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: 'object',\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n radio1: {\n title: '点击单选',\n type: 'string',\n widget: 'radio',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n },\n textarea1: {\n title: '长文本',\n type: 'string',\n widget: 'textArea'\n },\n date1: {\n title: '日期选择',\n type: 'string',\n widget: 'datePicker'\n },\n dateRange1: {\n title: '日期范围',\n type: 'range',\n widget: 'dateRange'\n },\n time1: {\n title: '时间选择',\n type: 'string',\n widget: 'timePicker'\n },\n timeRange1: {\n title: '时间范围',\n type: 'range',\n widget: 'timeRange'\n },\n },\n },\n },\n {\n title: '结束',\n type: 'End',\n // hidden: true,\n sourceHandleHidden: true,\n icon: {\n type: 'icon-end',\n bgColor: '#F79009',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '变量一',\n type: 'string',\n widget: 'input',\n },\n select: {\n title: '变量二',\n type: 'string',\n widget: 'select',\n props: {\n options: [\n { label: 'a', value: 'a' },\n { label: 'b', value: 'b' },\n { label: 'c', value: 'c' },\n ],\n },\n },\n }\n }\n },\n {\n title: 'Prompt',\n type: 'Prompt',\n description: '通过精心设计提示词，提升大语言模型回答效果',\n icon: {\n type: 'icon-prompt',\n bgColor: '#17B26A',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '提示词',\n type: 'string',\n widget: 'textArea',\n },\n }\n },\n },\n {\n title: '知识库',\n type: 'knowledge',\n description: '允许你从知识库中查询与用户问题相关的文本内容',\n icon: {\n type: 'icon-knowledge',\n bgColor: '#6172F3',\n },\n settingSchema: {\n type: \"object\",\n properties: {\n input: {\n title: '知识库',\n type: 'string',\n widget: 'textArea',\n },\n }\n },\n },\n];\n"
},
{
"path": "docs/xflow/index.md",
"content": "---\norder: 0\ntitle: 介绍\nmobile: false\ngroup: \n title: 使用教程\n order: 0\n---\n\n\n \n XFlow\n
\n\n XFlow\n\n \n ![\"npm\"](\"https://img.shields.io/npm/v/@xrenders/xflow.svg?maxAge=3600&style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dm/@xrenders/xflow.svg?style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dt/@xrenders/xflow.svg?style=flat-square\")
\n \n \n \n \n
\n
\n\n\n\n\n## 功能设计\n\n
\n \n ![\"预览图1\"](\"https://img.alicdn.com/imgextra/i3/O1CN011ykg541qvcNWNDpni_!!6000000005558-0-tps-2094-1172.jpg\")
\n
\n \n 基础流程图
\n \n \n
\n \n ![\"预览图2\"](\"https://img.alicdn.com/imgextra/i1/O1CN015jBSE71Lbh3o3zk78_!!6000000001318-0-tps-2100-1170.jpg\")
\n
\n \n 自定义节点
\n \n \n
\n\n ![\"预览图3\"](\"https://img.alicdn.com/imgextra/i2/O1CN01Y47YvN1s8GwCKZBtS_!!6000000005721-0-tps-2122-1198.jpg\")
\n
\n \n 最佳实践
\n \n \n
\n\n\n\n\n"
},
{
"path": "docs/xflow/layout.md",
"content": "---\norder: 6\ntitle: '画布布局'\nmobile: false\ngroup: \n title: 基础用法\n order: 1\n---\n# 布局\n\nXFlow 提供了两种内置的布局方式：左右布局（LR）和上下布局（TB）。通过设置 `layout` 属性，可以自动调整节点的位置，使流程图更加美观。\n\n## 布局类型\n\n### 左右布局（LR）\n\n左右布局将节点按照从左到右的顺序排列，适合展示线性流程或分支较少的流程。\n\n```js\nimport React from 'react';\nimport XFlow from '@xrenders/xflow';\n\nconst Demo = () => {\n return (\n \n
\n\n 节点菜单
\n \n
\n \n 通过 JSON 配置的方式渲染画布节点菜单，支持节点组展示。每个节点包含标题、类型、描述和图标等信息，方便用户快速识别和使用不同类型的节点。\n
\n \n ![\"节点菜单\"](\"https://img.alicdn.com/imgextra/i3/O1CN01rfAF9e28eMXX0fybx_!!6000000007957-0-tps-1896-1182.jpg\")
\n
\n \n \n
\n\n 节点展示
\n \n
\n \n
\n 默认情况下节点只会展示节点名称、描述信息。
\n 节点需要额外展示内容，可以通过配置 nodeWidget 组件来实现。
\n \n
\n \n ![\"节点展示2\"](\"https://img.alicdn.com/imgextra/i3/O1CN01f6WFZg1D9HZ2ZjP1j_!!6000000000173-0-tps-1448-766.jpg\")
\n
\n \n \n ![\"节点展示1\"](\"https://img.alicdn.com/imgextra/i2/O1CN01utg9VL1SBJYfXc6Na_!!6000000002208-0-tps-1892-1198.jpg\")
\n
\n \n \n
\n\n 节点配置
\n \n
\n \n 提供 FormRender Schema 协议配置和自定义配置组件两种方式，支持节点数据的灵活配置。通过可视化界面，用户可以轻松设置节点参数和属性。\n
\n \n
\n \n ![\"节点展示1\"](\"https://img.alicdn.com/imgextra/i1/O1CN01ycuxbe1BsVROZAleA_!!6000000000001-0-tps-3102-1184.jpg\")
\n
\n \n \n ![\"节点展示2\"](\"https://img.alicdn.com/imgextra/i4/O1CN01dn5UGS1sXSikBsLnb_!!6000000005776-0-tps-606-672.jpg\")
\n
\n \n \n ![\"节点展示1\"](\"https://img.alicdn.com/imgextra/i4/O1CN01Ia04jk1MznWGmzw4S_!!6000000001506-0-tps-604-340.jpg\")
\n
\n \n \n
\n\n 内置节点
\n \n
\n \n 内置条件节点和并行节点，支持多个连接点。条件节点用于流程分支控制，并行节点用于并发任务处理，无需额外开发即可使用。\n 内置注释节点，方便添加节点注释。\n
\n \n ![\"内置节点\"](\"https://img.alicdn.com/imgextra/i3/O1CN01WKpbb01wbMYckbyOr_!!6000000006326-0-tps-3158-1234.jpg\")
\n
\n \n \n
\n\n 节点功能
\n \n
\n \n 支持节点的复制、删除、粘贴功能\n
\n \n ![\"内置节点\"](\"https://img.alicdn.com/imgextra/i4/O1CN01UsgKOf1GoS0r7L6PA_!!6000000000669-0-tps-916-596.jpg\")
\n
\n \n \n
\n\n 节点状态和节点日志
\n \n
\n \n 支持展示节点的状态，自定义节点状态，以及显示节点的运行日志\n
\n \n ![\"内置节点\"](\"https://img.alicdn.com/imgextra/i1/O1CN01m3yNGv1rpx5x3GKAQ_!!6000000005681-0-tps-2112-1192.jpg\")
\n
\n \n \n
\n画布操作
\n \n
\n \n 支持画布缩放、撤销/重置、节点添加、鼠标模式切换、节点整理、全屏展示、画布快捷键等功能。提供丰富的画布操作工具，提升用户体验。\n
\n \n ![\"画布操作\"](\"https://img.alicdn.com/imgextra/i3/O1CN01Pcb1wd1RKe0hVF7nG_!!6000000002093-0-tps-3172-1234.jpg\")
\n
\n \n \n
\n );\n};\n```\n\n左右布局的特点:\n1. 节点按照从左到右的顺序排列\n2. 适合展示线性流程\n3. 分支节点会垂直排列\n4. 连线更加清晰直观\n\n### 上下布局（TB）\n\n上下布局将节点按照从上到下的顺序排列，适合展示层级关系或分支较多的流程。\n\n```js\nimport React from 'react';\nimport XFlow from '@xrenders/xflow';\n\nconst Demo = () => {\n return (\n \n
\n );\n};\n```\n\n上下布局的特点：\n1. 节点按照从上到下的顺序排列\n2. 适合展示层级关系\n3. 分支节点会水平排列\n4. 可以更好地利用垂直空间\n\n## 布局示例\n\n### LR（左右布局）\n\n自定义组件:{node?.id}
;\n};\n\n```\n\n{data?.value}-{index}
;\n};\n\n```\n{data?.value}-{index}
;\n}\n```\n\n ![\"节点菜单分组展示\"](\"https://img.alicdn.com/imgextra/i1/O1CN017qDeW21vUf9BGe0JI_!!6000000006176-2-tps-734-656.png\")
\n
\n\n### 2. 节点配置\n\n每个节点可以配置以下属性：\n\n```typescript\ninterface NodeConfig {\n title: string; // 节点名称\n type: string; // 节点类型\n description?: string; // 节点描述\n icon?: { // 节点图标配置\n type: string; // 图标类型\n bgColor: string; // 图标背景色\n };\n hideDesc?: boolean; // 是否隐藏节点描述\n nodePanel?: { // 自定义节点的面板配置\n width?: number; // 面板宽度\n };\n settingSchema?: { // 节点的业务配置信息\n type: string;\n className?: string;\n properties: Record\n\n ![\"iconfont图标配置\"](\"https://img.alicdn.com/imgextra/i3/O1CN013d3z1F1emfFXWFSiy_!!6000000003914-0-tps-2154-986.jpg\")
\n
\n\n2. 在 iconFontUrl 属性中引入图标库的 Symbol 链接：\n\n```js\n\n\n \n XFlow\n
\n\n XFlow\n\n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n\n ChartRender\n
\n \n ![\"npm\"](\"https://img.shields.io/npm/v/chart-render.svg?maxAge=3600&style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dm/chart-render.svg?style=flat-square\")
\n \n \n ![\"NPM](\"https://img.shields.io/npm/dt/chart-render.svg?style=flat-square\")
\n \n \n \n \n
\n
\n );\n};\n```\n\n## API\n\n### 通用参数\n\n所有的图表组件都有以下 4 个入参（**`data` 和 `meta` 是必传的参数**，请务必注意）：\n\n| 参数 | 说明 | 类型 | 是否必填 |\n| --------- | ------------------ | --------------------- | -------- |\n| style | 最外层容器的样式 | `React.CSSProperties` | 否 |\n| className | 最外层容器的类名 | `string` | 否 |\n| data | 数据配置项 `注1` | `IDataItem[]` | 是 |\n| meta | 元数据配置项 `注2` | `IMetaItem[]` | 是 |\n\n##### 注 1：通用参数 - data 数据配置项\n\n是普通的对象数组，形如：\n\n```js\n[\n { date: '20200101', pv: 100, uv: 50 },\n { date: '20200102', pv: 120, uv: 60 },\n { date: '20200103', pv: 140, uv: 70 },\n { date: '20200104', pv: 160, uv: 80 },\n];\n```\n\n##### 注 2：通用参数 - meta 元数据配置项\n\n用来描述 data 的各个字段的东西，形如：\n\n```js\n/**\n * id: 对应单条数据项的 key 名\n * name: 对应单条数据项的 key 的描述\n * isDim: 是否是维度，`true`-维度，`false`-指标\n * isRate: 是否是百分数，仅限指标使用，启用后，数值 `0.5` 会以 `50%` 来输出渲染\n */\n[\n { id: 'date', name: '日期', isDim: true, isRate: false },\n { id: 'pv', name: '访问量', isDim: false, isRate: false },\n { id: 'uv', name: '访客数', isDim: false, isRate: false },\n];\n```\n\n### Line 折线图的额外参数\n\n| 参数 | 说明 | 类型 | 默认值 | 是否必填 |\n| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------- | -------- |\n| withArea | 是否以面积图展示\n setComponent('Line')}\n >\n 折线图\n \n setComponent('Column')}\n >\n 柱状图\n \n setComponent('PivotTable')}\n >\n 交叉表\n \n
\n\n - 注意面积图默认堆叠展示，如不需要可以传入 `isStack={false}` 覆盖
- 开启面积图后方可使用 `areaStyle` `startOnZero` `isPercent` 属性 | `boolean` | `false` | 否 |\n\n如果你需要修改点、线等样式，可以参考参数表：[折线图参数表](https://charts.ant.design/zh-CN/demos/line?type=api) [面积图参数表](https://charts.ant.design/zh-CN/demos/area?type=api)，除了 `yField`、`xField`、`seriesField` 三个字段不做透传，其他字段均做透传处理。\n\n### Column 柱状图的额外参数\n\n| 参数 | 说明 | 类型 | 默认值 | 是否必填 |\n| -------- | ---------------- | --------- | ------- | -------- |\n| inverted | 是否以条形图展示 | `boolean` | `false` | 否 |\n\n如果你需要修改颜色、柱等样式，可以参考参数表：[柱状图参数表](https://charts.ant.design/zh-CN/demos/column?type=api)，除了 `yField`、`xField`、`seriesField` 三个字段不做透传，其他字段均做透传处理。\n\n### PivotTable 交叉表的额外参数\n\n| 参数 | 说明 | 类型 | 默认值 | 是否必填 |\n| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- | ------------------ | -------- |\n| showSubtotal | 是否展示总计小计 | `boolean` | `true` | 否 |\n| subtotalText | 总计小计的文案 | `[string, string]` | `['总计', '小计']` | 否 |\n| indicatorSide | 指标的展示位置 | `'left' \\| 'top'` | `'top'` | 否 |\n| size | 表格尺寸 | `'small' \\| 'middle' \\| 'large'` | `'middle'` | 否 |\n| leftDimensionLength | 左侧维度放多少个，超出的维度会放到表格顶部 | `number` | - | 否 |\n| leftExpandable | 左侧维度允许展开/收起 | `boolean` | `false` | 否 |\n| topExpandable | 顶部维度允许展开/收起 | `boolean` | `false` | 否 |\n| cellRender | 单元格自定义渲染函数，可见[交叉表案例 - 高级案例 - 自定义单元格渲染](https://xrender.fun/chart-render/demo/pivot-table#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8D%95%E5%85%83%E6%A0%BC%E6%B8%B2%E6%9F%93) | `(value: any, dimRecord: IDataItem, indId: string ) => React.ReactNode` | - | 否 |\n" }, { "path": "packages/chart-render/package.json", "content": "{\n \"name\": \"chart-render\",\n \"version\": \"1.0.0-alpha.3\",\n \"keywords\": [\n \"Chart\",\n \"ChartRender\",\n \"Render\",\n \"XRender\",\n \"React\",\n \"Json Schema\",\n \"Ant Design\"\n ],\n \"homepage\": \"https://xrender.fun/chart-render\",\n \"bugs\": {\n \"url\": \"https://github.com/alibaba/x-render/issues\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git@github.com:alibaba/x-render.git\"\n },\n \"license\": \"MIT\",\n \"main\": \"dist/index.js\",\n \"module\": \"dist/index.esm.js\",\n \"typings\": \"dist/index.d.ts\",\n \"scripts\": {\n \"beta\": \"npm publish --tag beta\",\n \"build\": \"father-build\",\n \"prepare\": \"npm run build\",\n \"prettier\": \"prettier --write \\\"**/*.{js,jsx,tsx,ts,less,md,json}\\\"\",\n \"postpublish\": \"git push --tags\",\n \"test\": \"umi-test\",\n \"test:coverage\": \"umi-test --coverage\"\n },\n \"lint-staged\": {\n \"*.{js,jsx,less,md,json}\": [\n \"prettier --write\"\n ],\n \"*.ts?(x)\": [\n \"prettier --parser=typescript --write\"\n ]\n },\n \"dependencies\": {\n \"less\": \"^3.0.0\",\n \"@ant-design/icons\": \"^4.2.2\",\n \"@ant-design/plots\": \"^1.0.9\",\n \"ahooks\": \"^3.4.1\",\n \"classnames\": \"^2.3.1\",\n \"formRenderV1\": \"npm:form-render@^1.4.13\",\n \"zustand\": \"^4.0.0-rc.1\"\n },\n \"devDependencies\": {},\n \"peerDependencies\": {\n \"antd\": \"4.x\",\n \"react\": \">=16.8.0\"\n },\n \"gitHooks\": {\n \"pre-commit\": \"lint-staged\"\n }\n}\n" }, { "path": "packages/chart-render/src/components/ChartContainer/index.less", "content": ".cr-chart-container {\n position: relative;\n}\n" }, { "path": "packages/chart-render/src/components/ChartContainer/index.tsx", "content": "import classNames from 'classnames';\nimport React, { CSSProperties, FC, memo } from 'react';\nimport './index.less';\n\nconst ChartContainer: FC<{\n children: React.ReactNode;\n className?: string;\n style?: CSSProperties;\n}> = ({ children, className, style }) => (\n
\n {children}\n
\n);\n\nexport default memo(ChartContainer);\n"
},
{
"path": "packages/chart-render/src/components/ChartProvider/index.tsx",
"content": "import { ConfigProvider } from 'antd';\nimport zh_CN from 'antd/lib/locale/zh_CN';\nimport React, { FC, ReactNode } from 'react';\nimport { createStore, Provider } from '../../utils/store';\n\nconst ChartProvider: FC<{ children?: ReactNode }> = ({ children }) => (\n \n \n DataView\n
\n\n DataView\n\n \n \n \n \n \n \n \n \n \n \n \n \n
\n {expandRender\n ? expandContent\n : addons.renderer({ schema: childSchema, data, addons })}\n
\n )}\n \n );\n};\n\nexport default FButtonFold;\n"
},
{
"path": "packages/data-render/src/widgets/FCard/index.less",
"content": ".dr-card {\n margin-top: 16px;\n border-color: #f4f4f4;\n}\n"
},
{
"path": "packages/data-render/src/widgets/FCard/index.tsx",
"content": "import React from 'react';\nimport { Card } from 'antd';\nimport { combineClass, isReactNodeSchema } from '../utils/common';\nimport './index.less';\n\nexport default (props: any) => {\n const { data, childSchema, className, style, title, extra, addons, ...otherProps } = props;\n\n let cardTitle = ;\n let cardExtra = extra;\n\n if (isReactNodeSchema(title)) {\n cardTitle = addons.renderer({ schema: title, data, addons });\n }\n\n if (isReactNodeSchema(extra)) {\n cardExtra = addons.renderer({ schema: extra, data, addons });\n }\n \n return (\n {subLabel}
}\n \n );\n};\n\nconst getDescriptionItems = (items = [], { addons, data, itemShowLevel }) => {\n return items.map((_item: any) => {\n const { defaultValue = '', dataKey, metaData, showLevel, hidden } = _item || {};\n const { getDataFromKey, getSourceData, getMethod, getConfig } = addons;\n const config = getConfig();\n\n let item = _item;\n if (metaData && config?.descriptions?.asyncItemProps) {\n const asyncProps = config.descriptions.asyncItemProps(_item, { parentData: data, metaData: metaData })\n item = {\n ..._item,\n ...asyncProps\n };\n }\n \n let _itemData = getDataFromKey(dataKey, data, defaultValue);\n if (metaData && !dataKey) {\n _itemData = item.data;\n }\n\n const level = showLevel ?? itemShowLevel ?? config?.showLevel;\n // 如果描述项没有数据（包含 0），则描述项不显示\n if (level === 1 && (!_itemData || _itemData === '0')) {\n return null;\n }\n\n // 如果描述项没有数据（不包含 0），则示描述项不显\n if (level === 2 && !_itemData && _itemData !== 0) {\n return null;\n }\n\n if (hidden && typeof hidden === 'boolean') {\n return null;\n }\n\n const sourceData = getSourceData();\n // 如果是函数\n if (typeof hidden === 'function' && hidden(data, sourceData)) {\n return null;\n }\n \n if (hidden?.includes?.('method:')) {\n const func = getMethod(hidden);\n if (func && func(data, sourceData)) {\n return null;\n }\n }\n\n return { ...item, _itemData };\n }).filter(item => item);\n};\n\n/**\n * 描述列表\n */\nconst FDescriptions = (props: any) => {\n const {\n data,\n className,\n itemStyle,\n labelStyle,\n contentStyle,\n itemShowLevel,\n title,\n extra,\n addons,\n items: _items,\n ...restProps\n } = props;\n\n const items = getDescriptionItems(_items, { data, addons, itemShowLevel });\n let _column = props.column || 3;\n \n return (\n \n \n {label}\n {colon && '：'}\n \n \n
\n );\n};\n\nexport default FLabel;\n"
},
{
"path": "packages/data-render/src/widgets/FPanel/index.less",
"content": ""
},
{
"path": "packages/data-render/src/widgets/FPanel/index.tsx",
"content": "import React from 'react';\nimport { combineClass } from '../utils/common';\nimport FTitle from '../FTitle';\n\nimport './index.less';\n\nconst FPanel = (props: any) => {\n const {\n className,\n style,\n data,\n addons,\n\n title,\n titleStyle,\n titleShowIcon,\n childSchema,\n render,\n } = props;\n \n return (\n \n {title &&
\n );\n};\n\nexport default FPanel;\n"
},
{
"path": "packages/data-render/src/widgets/FProgress/index.less",
"content": ".dr-progress {\n width: 100%;\n padding: 10px 0 0 5px;\n overflow-y: auto;\n white-space: nowrap;\n\n .step-item {\n position: relative;\n display: inline-block;\n width: 260px;\n margin: 0 14px;\n padding-top: 11px;\n padding-right: 20px;\n white-space: normal;\n vertical-align: top;\n }\n\n .step-item-active {\n border-top: 1px solid rgba(0, 0, 0, 0.15);\n }\n\n .step-title {\n color: rgba(20, 20, 20, 0.85);\n font-size: 14px;\n line-height: 22px;\n }\n\n .step-time {\n color: #8a8a8a;\n font-size: 12px;\n line-height: 22px;\n }\n\n .step-dot {\n position: absolute;\n top: -5px;\n left: -18px;\n width: 10px;\n height: 10px;\n background-color: #fff;\n border: 2px solid #ccc;\n border-radius: 10px;\n }\n\n .step-item-active .step-dot {\n border: 2px solid #3f7ffb;\n }\n}\n"
},
{
"path": "packages/data-render/src/widgets/FProgress/index.tsx",
"content": "import React from 'react';\nimport { combineClass } from '../utils/common';\nimport FTitle from '../FTitle';\nimport './index.less';\n\nconst FTimeline = (props: any) => {\n const { data, title, className } = props;\n\n return (\n <>\n \n {data.map((item: any, index: number) => (\n \n
\n ))}\n \n \n );\n};\n\nexport default FTimeline;\n"
},
{
"path": "packages/data-render/src/widgets/FProgressBar/index.tsx",
"content": "import React from 'react';\nimport { Progress } from 'antd';\nimport type { ProgressProps } from 'antd';\nimport { combineClass, isType } from '../utils/common';\n\ninterface FProgressBarProps extends Omit{item.time}
\n {item.content}
\n \n \n {label && {label}：}\n
\n );\n};\n\nexport default FSpace;\n"
},
{
"path": "packages/data-render/src/widgets/FStatistic/index.tsx",
"content": "import React from 'react';\nimport { Statistic } from 'antd';\nimport type { StatisticProps } from 'antd';\nimport { combineClass, isReactNodeSchema, isType } from '../utils/common';\n\ninterface FStatisticProps extends Omit{result}
;\n };\n }\n\n // 直接字符串声明的需要转译一下\n if (typeof children === 'string') {\n otherItem.render = (data: any) => renderFRender(data, [{ widget: children }]);\n } else if (children) {\n otherItem.render = (data: any) => renderFRender(data, children);\n }\n\n // 表格 td 走 通用模版\n if (template && !render && !notRender) {\n otherItem.render = (data: any) => renderFRender(data, template);\n }\n\n // 配置外置 render 方法进行渲染\n if (render && typeof render === 'string') {\n const renderFunc = addons.getMethod(render);\n otherItem.render = (data: any, record: any, index: any) =>\n renderFunc(data, item, record, index);\n }\n\n column[key] = { ...otherItem };\n }\n\n return column;\n};\n\nexport default detalColumn;\n"
},
{
"path": "packages/data-render/src/widgets/FTable/index.tsx",
"content": "import React from 'react';\nimport SimpleTable from '../components/BaseTable';\nimport RequestTable from '../components/RequestTable';\nimport detalColumn from './detalColumn';\nimport FTitle from '../FTitle';\n\n/**\n *\n * 自定义-Table\n */\nconst FTable = (props: any) => {\n const {\n title,\n data,\n column,\n template,\n request,\n addons,\n titleStyle,\n repeatIndex,\n rowSelection,\n style,\n ...otherProps\n } = props;\n\n const renderFRender = (value: any, schema: any) => {\n return addons.renderer({ schema, data: value, addons });\n };\n\n const columnMap = detalColumn(column, { addons, template, renderFRender, repeatIndex });\n\n // if (rowSelection) {\n // otherProps.rowSelection = addons('getAppHelperParams', rowSelection);\n // }\n\n return (\n <>\n {title && \n {list.map(renderTag(tagProps, addons))}\n
\n );\n};\n\nexport default FTags;\n"
},
{
"path": "packages/data-render/src/widgets/FText/index.less",
"content": ".dv-text {\n display: inline-flex;\n align-items: center;\n min-width: 20px;\n min-height: 18px;\n margin-right: 10px;\n font-size: 14px;\n\n .left-icon {\n margin-right: 4px;\n }\n\n .right-icon {\n margin-left: 4px;\n }\n}\n"
},
{
"path": "packages/data-render/src/widgets/FText/index.tsx",
"content": "import React, { isValidElement, CSSProperties } from 'react';\n\nimport { transformData, combineClass, transDataKeyToData } from '../utils/common';\nimport createIconFont from '../utils/createIconFont';\nimport { renderText } from '../components/TextView';\nimport InnerHtml from '../components/InnerHtml';\nimport './index.less';\n\ninterface IProps {\n className: string;\n style: CSSProperties;\n dataKey: string; // 数据 key\n data: any; // 数据\n defaultValue: any; // 默认值\n leftText: string; // 左文案\n rightText: string; // 右文案\n leftTextStyle: CSSProperties; // 左文案样式\n rightTextStyle: CSSProperties; // 右文案样式\n childSchema: any; // 子协议\n render: string; // 自定义渲染函数名\n showKey: string | ((a: any, b: any) => boolean); // 根据 showKey 获取显示结果，ture 显示、false 不显示\n showLevel: number; // 控制显示等级\n format: any; // 数据格式化配置\n iconSetting: any; // 图标配置\n useType: string; // 使用方式，区别是否被其他组件调用，如果是，需要自行格式化数据\n addons: any; // data-render 插件总控\n [key: string]: any;\n}\n\n/**\n *\n * 文本组件\n */\nconst FText = (props: IProps) => {\n const {\n className,\n style,\n data,\n leftText,\n rightText,\n leftTextStyle,\n rightTextStyle,\n useType,\n childSchema,\n render,\n format,\n iconSetting,\n addons,\n } = props;\n\n const parentData = addons.getParentData();\n\n let value = data;\n\n // 布尔值特殊处理一下\n if (typeof value === 'boolean') {\n value = value + '';\n }\n\n // 被其他组件调用\n if (useType === 'internal') {\n // 数据进行格式化\n if (['html'].includes(format?.type)) {\n value = \n {iconSetting?.direct === 'left' && {iconContent}}\n {content}\n {iconSetting?.direct !== 'left' && {iconContent}}\n
\n );\n};\n\nexport default FText;\n"
},
{
"path": "packages/data-render/src/widgets/FTextEllipsis/index.tsx",
"content": "import React from 'react';\nimport { combineClass } from '../utils/common';\nimport TextEllipsis from '../components/TextEllipsis';\n\n/**\n *\n * 文本组件\n */\nconst FTextEllipsis = (props: any) => {\n const {\n className,\n style,\n data,\n addons,\n\n contentStyle,\n height = 24,\n leftSlot = [],\n rightSlot = [],\n\n } = props;\n\n const parentData = addons.getParentData();\n\n return (\n \n
\n );\n};\n\nexport default FTextEllipsis;\n"
},
{
"path": "packages/data-render/src/widgets/FTimeline/index.tsx",
"content": "import React from 'react';\nimport { Timeline } from 'antd';\nimport { combineClass } from '../utils/common';\nimport FTitle from '../FTitle';\n\nconst FTimeline = (props: any) => {\n const { data = [], title, className, style, lineItem = {}, addons, ...otherProps } = props;\n const {\n timeKey = 'time',\n contenKey = 'content',\n colorKey = 'color',\n ...otherLineItem\n } = lineItem;\n\n return (\n <>\n \n {showType === 1 && }\n \n {data}\n \n
\n );\n};\n\nexport default FTitle;\n"
},
{
"path": "packages/data-render/src/widgets/FTooltip/index.less",
"content": ".dr-tooltip {\n margin-top: 8px;\n}\n"
},
{
"path": "packages/data-render/src/widgets/FTooltip/index.tsx",
"content": "import React from 'react';\nimport { Tooltip } from 'antd';\nimport { combineClass } from '../utils/common';\nimport './index.less';\n\nconst FTooltip = (props: any) => {\n const { data, childSchema, className, style, title, tooltip, addons, ...otherProps } = props;\n const tooltipTitle = ;\n\n return (\n \n {addons.renderer({ schema: childSchema, data, addons, ...otherProps })}\n
\n \n );\n};\n\nexport default FTooltip;\n"
},
{
"path": "packages/data-render/src/widgets/components/BaseCollapse/index.less",
"content": ".dr-collapse {\n margin-top: 16px;\n background-color: #fff;\n border: 1px solid #f0f0f0;\n\n .collapse-title {\n height: 24px;\n margin-right: 16px;\n font-weight: bold;\n font-size: 16px;\n line-height: 24px;\n }\n\n .header-item-label {\n height: 14px;\n margin-left: 30px;\n color: black;\n font-weight: bold;\n font-size: 14px;\n line-height: 14px;\n span {\n color: #141414;\n }\n }\n\n .expand-icon-box {\n position: absolute;\n top: 20px;\n right: 12px;\n display: flex;\n align-items: center;\n color: #999;\n margin-right: 12px;\n }\n\n .expand-icon-desc {\n margin-left: 4px;\n }\n\n > .ant-collapse-item .ant-collapse-header {\n display: flex;\n align-items: center !important;\n padding: 16px 24px !important;\n background-color: #fff;\n border-radius: 8px !important;\n\n > .ant-collapse-expand-icon {\n padding-inline-end: 0 !important;\n }\n }\n\n .ant-collapse-header-text {\n display: flex;\n align-items: center;\n }\n\n .tag-no-data {\n color: rgba(0, 0, 0, 0.65);\n }\n\n .ant-collapse-content-box {\n padding: 0 16px 16px 16px !important;\n\n .ant-skeleton-title,\n .ant-skeleton-paragraph > li {\n animation: none !important;\n }\n }\n}\n"
},
{
"path": "packages/data-render/src/widgets/components/BaseCollapse/index.tsx",
"content": "import React, { useState, FC } from 'react';\nimport { Collapse } from 'antd';\nimport { combineClass } from '../../utils/common';\nimport { DownOutlined } from '@ant-design/icons';\nimport './index.less';\n\nconst { Panel } = Collapse;\ninterface IProps {\n className?: any;\n style?: object;\n children: any;\n title?: string;\n header?: any;\n defaultExpand?: boolean;\n}\n\n/**\n * 折叠面板\n */\nconst BaseCollapse: FC{title}
}\n {header && header}\n \n );\n\n const renderExpandIcon = ({ isActive }: any): JSX.Element => {\n return (\n \n
\n );\n };\n\n return (\n \n {label && {renderString(label)}}\n {data &&\n (copy ? (\n
\n );\n};\n\nexport default Encryption;\n"
},
{
"path": "packages/data-render/src/widgets/components/IconLabel/index.less",
"content": ".custom-icon-label-view {\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n .content {\n margin: 0 2px;\n }\n}\n"
},
{
"path": "packages/data-render/src/widgets/components/IconLabel/index.tsx",
"content": "import React from 'react';\nimport classnames from 'classnames';\nimport createIconFont from '../../utils/createIconFont';\n\nimport './index.less';\n\nconst IconLabel = (props: any) => {\n const {\n data,\n onClick,\n type,\n className,\n style,\n contentStyle,\n iconStyle,\n direct = 'right',\n fontSize,\n color,\n iconFontUrl,\n } = props;\n\n const Icon = createIconFont(iconFontUrl);\n\n const IconView = \n {tabs.map((tab: ITabItem, index: number) => (\n \n {tab.title}\n
\n ))}\n \n {tabs.map((tab: ITabItem, index: number) => (\n \n {children[index]}\n
\n ))}\n \n );\n};\n\nexport default SuckTabs;\n"
},
{
"path": "packages/data-render/src/widgets/components/TextEllipsis/index.less",
"content": ".text-ellipsis-hidden {\n visibility: hidden;\n}\n.text-ellipsis-box {\n overflow: hidden;\n\n .text-ellipsis-all {\n padding: 0 16px;\n color: rgba(63, 127, 251, 1);\n font-size: 14px;\n cursor: pointer;\n }\n}\n"
},
{
"path": "packages/data-render/src/widgets/components/TextEllipsis/index.tsx",
"content": "import React, { FC, useMemo, useRef, useEffect } from 'react';\nimport classnames from 'classnames';\nimport { useSet } from '../../utils/hooks';\n\nimport './index.less';\ninterface IProps {\n data: string;\n height: number;\n leftSlot?: JSX.Element | string;\n rightSlot?: JSX.Element | string;\n contentStyle?: any;\n}\n\nconst initState = {\n hidden: true, // 先隐藏截取执行完成之后展示出来\n diff: 0,\n isEllipsis: true,\n isFirst: true, // 第一次\n};\n\nconst TextEllipsis: FC\n \n {isEllipsis ? (\n <>\n {leftSlot && {leftSlot}}\n {`${cutText}...`}\n setState({ isEllipsis: false })}>\n 展开\n \n {rightSlot && {rightSlot}}\n \n ) : (\n <>\n {leftSlot && {leftSlot}}\n {data}\n {data !== cutText && (\n setState({ isEllipsis: true })}>\n 收起\n \n )}\n {rightSlot && {rightSlot}}\n \n )}\n
\n \n );\n }, [cutText, hidden, isEllipsis]);\n};\n\nexport default TextEllipsis;\n"
},
{
"path": "packages/data-render/src/widgets/components/TextView/index.tsx",
"content": "import React from 'react';\nimport { message, Tooltip, Typography } from 'antd';\n\nexport const renderEllipsis = (dom: any, text: any, item: { ellipsis: any }) => {\n if (!item.ellipsis) {\n return dom;\n }\n return 
\n"
},
{
"path": "packages/form-render/LICENSE",
"content": "MIT License\n\nCopyright (c) 2019-present XRender Team\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "packages/form-render/README.md",
"content": "\n \n
\n\n FormRender
\n\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nexport default connectForm(Demo);\n```\n\n**对于函数组件，FormRender 提供了 `useForm` hooks, 书写更为灵活**\n\n```jsx\nimport React from 'react';\nimport { Button } from 'antd';\nimport FormRender, { useForm } from 'form-render';\n\nconst schema = {\n type: 'object',\n properties: {\n input1: {\n title: '简单输入框',\n type: 'string',\n required: true,\n },\n select1: {\n title: '单选',\n type: 'string',\n props: {\n options: [\n { label: '早', value: 'a' },\n { label: '中', value: 'b' },\n { label: '晚', value: 'c' }\n ]\n }\n }\n }\n};\n\nconst Demo = () => {\n const form = useForm();\n return (\n \n
\n );\n};\n\nexport default Demo;\n```"
},
{
"path": "packages/form-render/__tests__/core-utils.spec.ts",
"content": "import { describe, it, expect } from 'vitest';\nimport { flattenSchema } from '../src/form-render-core/src/utils';\n\ndescribe('Test FormRender Utils', () => {\n it('Test flattenSchema', () => {\n const schema = {\n type: 'object',\n properties: {\n input1: {\n title: '简单输入框',\n type: 'string',\n order: 2,\n required: true,\n },\n select1: {\n title: '单选',\n type: 'string',\n order: 1,\n enum: ['a', 'b', 'c'],\n enumNames: ['早', '中', '晚'],\n },\n },\n };\n\n const _schema = flattenSchema(schema);\n expect(Object.keys(_schema)).toEqual(['select1', 'input1', '#']);\n });\n});\n"
},
{
"path": "packages/form-render/__tests__/demo.tsx",
"content": "import * as React from 'react';\nimport { useState } from 'react';\nimport FormRender, { useForm } from '../src/index';\nimport { normalSchema } from './schema';\n\nconst SimpleForm = () => {\n const form = useForm();\n const [state, setState] = useState({\n input1: 'fr',\n select1: 'd',\n });\n const onFinish = (formData, errors) => {\n setState(formData);\n };\n\n const watch = {\n // # 为全局\n '#': val => {\n console.log('表单的实时数据为：', val);\n },\n input1: {\n handler: val => {\n console.log(val);\n },\n immediate: true,\n },\n onSearch: val => {},\n };\n\n const onMount = () => {\n form.setValueByPath('link', 'www.baidu.com');\n };\n\n const onClick = () => {\n form.setValueByPath('link', 'www.baidu.com');\n };\n\n return (\n \n
\n );\n};\n\nexport default SimpleForm;\n"
},
{
"path": "packages/form-render/__tests__/form-demo.tsx",
"content": "import * as React from 'react';\nimport { useState } from 'react';\nimport FormRender, { useForm } from '../src/index';\n\nconst schema = {\n type: 'object',\n properties: {\n input1: {\n type: 'object',\n properties: {\n test: {\n title: '简单输入框',\n type: 'string',\n },\n },\n },\n select1: {\n title: '单选',\n type: 'string',\n enum: ['a', 'b', 'c'],\n enumNames: ['早', '中', '晚'],\n },\n },\n};\n\nconst SimpleForm = () => {\n const form = useForm();\n const [state, setState] = useState();\n const setRes = data => {\n let res;\n if (typeof data === 'object') {\n res = JSON.stringify(data);\n }\n res = (res || data) + '';\n setState(res);\n };\n\n const handleIsFieldTouched = () => {\n const res = form.isFieldTouched('input1.test');\n setRes(res);\n };\n\n const handleIsFieldsTouched = () => {\n const res = form.isFieldsTouched(['input1.test', 'select1'], true);\n setRes(res);\n };\n\n const handleIsFieldValidating = () => {\n const res = form.isFieldValidating('select1');\n setRes(res);\n };\n\n const handleSetFields = () => {\n form.setFields([\n {\n name: 'input1.test',\n touched: true,\n error: ['set input1.test error'],\n value: 'input1.test value',\n },\n {\n name: 'select1',\n validating: true,\n value: 'select1 value',\n },\n ]);\n };\n\n const handleGetFieldError = () => {\n const res = form.getFieldError('input1.test');\n setRes(res);\n };\n\n const handleValidateFields = () => {\n form.validateFields().then(data => {\n // data:\n // {\n // input1: {\n // test: 'input1.test value',\n // },\n // select1: 'select1 value,\n // }\n setRes(data);\n });\n };\n\n const handleGetValues = () => {\n const res = form.getValues(['input1.test', 'select1'], ({ touched }) => {\n return touched;\n });\n setRes(res);\n };\n\n return (\n \n
\n \n \n {state?.input1}
\n {state?.select1}
\n \n
\n \n \n \n \n {state}
\n \n );\n};\n\nexport default SimpleForm;\n"
},
{
"path": "packages/form-render/__tests__/form-fields.spec.tsx",
"content": "import { describe, test, afterAll, expect } from 'vitest';\nimport * as React from 'react';\nimport '@testing-library/jest-dom';\nimport { render, act, cleanup } from '@testing-library/react';\nimport Demo from './form-demo';\n\nfunction sleep(ms): Promise\n {Array.isArray(searchBtnArr) &&\n searchBtnArr.map((ui, idx) => {\n return (\n
\n );\n }\n\n const submitShow = (mode === 'simple' && (typeof retainBtn === 'boolean' || retainBtn?.includes('submit')) || mode !== 'simple');\n const resetShow = (mode === 'simple' && (typeof retainBtn === 'boolean' || retainBtn?.includes('reset')) || mode !== 'simple');\n\n return (\n \n {ui}\n
\n );\n })}\n \n {children}\n
\n );\n\n if (!inlineChild) {\n const gutter = { row: 16, column: 24 }[displayType];\n childElement = (\n \n
\n )}\n \n )}\n \n {removeBtn && (\n \n
\n );\n}\n\nexport default ErrorSchema;"
},
{
"path": "packages/form-render/src/widgets/boxCollapse/index.less",
"content": "@ant-prefix: ant;\n\n.fr-obj-collapse {\n border-radius: 4px;\n border: 1px solid #f1f1f1;\n margin-bottom: 24px;\n\n .collapse-title {\n height: 24px;\n color: #000000e0;\n font-weight: 600;\n font-size: 16px;\n line-height: 24px;\n }\n\n .fr-header-desc {\n word-break: break-all;\n color: rgba(0, 0, 0, .45);\n margin-left: 6px;\n font-weight: normal;\n }\n\n .header-item-label {\n height: 14px;\n margin-left: 30px;\n color: black;\n font-weight: 600;\n font-size: 14px;\n line-height: 14px;\n span {\n color: #141414;\n }\n }\n\n .expand-icon-desc {\n margin-left: 4px;\n }\n\n .@{ant-prefix}-collapse-header {\n display: flex;\n align-items: center !important;\n padding: 16px !important;\n background-color: #fff;\n border-radius: 4px !important;\n }\n\n .@{ant-prefix}-collapse-header-text {\n display: flex;\n align-items: center;\n }\n\n .tag-no-data {\n color: rgba(0, 0, 0, 0.65);\n }\n\n .@{ant-prefix}-collapse-content-box {\n padding: 12px 24px !important;\n\n .@{ant-prefix}-skeleton-title,\n .@{ant-prefix}-skeleton-paragraph > li {\n animation: none !important;\n }\n }\n}\n\n// .fr-obj-collapse:hover {\n// box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);\n// }\n"
},
{
"path": "packages/form-render/src/widgets/boxCollapse/index.tsx",
"content": "import React, { useState, FC } from 'react';\nimport { Collapse } from 'antd';\nimport { DownOutlined } from '@ant-design/icons';\nimport './index.less';\nimport BoxPanel from '../components/PanelView';\n\nconst { Panel } = Collapse;\ninterface IProps {\n className?: any;\n style?: object;\n children: any;\n title?: string;\n description?: any;\n collapsed?: boolean;\n displayType?: any;\n bordered?: boolean;\n ghost?: boolean;\n}\n\n/**\n * 折叠面板\n */\nconst BoxCollapse: FC{t('schema_not_match')}
\n {JSON.stringify(schema)}
\n {title}
}\n {description && {description}}\n \n );\n\n const renderExpandIcon = ({ isActive }: any): JSX.Element => {\n return (\n \n
\n );\n };\n\n return (\n \n
\n );\n}\n\nexport default FLineTitle\n"
},
{
"path": "packages/form-render/src/widgets/boxSubInline/index.less",
"content": "@ant-prefix: ant;\n\n.fr-obj-subinline-label-hidden > .@{ant-prefix}-form-item-row > .@{ant-prefix}-form-item-label {\n visibility: hidden;\n}\n\n.fr-obj-subinline-background > .@{ant-prefix}-form-item-row > .@{ant-prefix}-form-item-control {\n background-color: #f6f6f6;\n padding: 24px 24px 0 24px;\n border-radius: 4px;\n}\n\n.fr-obj-subinline {\n .@{ant-prefix}-form-item-row {\n flex-wrap: nowrap;\n }\n}\n"
},
{
"path": "packages/form-render/src/widgets/boxSubInline/index.tsx",
"content": "import React from 'react';\nimport { Form } from 'antd';\nimport classnames from 'classnames';\nimport './index.less';\nimport _ from 'lodash';\n\nconst BoxSubInline = (props: any) => {\n const { children, title, hasBackground = true, description, tooltip, fieldCol, labelCol, labelWidth, displayType, ...rest } = props;\n\n let _tooltip: any = null;\n let _labelCol: any = { span: 3 };\n let _fieldCol = { flex: 1 }\n\n if (description) {\n _tooltip = { title: description };\n }\n if (tooltip) {\n _tooltip = tooltip;\n }\n\n if (labelWidth) {\n _labelCol = { flex : labelWidth + 'px' };\n }\n\n if (labelCol) {\n _labelCol = labelCol;\n }\n\n if (fieldCol) {\n _fieldCol = fieldCol;\n }\n\n return (\n \n {title}\n {description && {description}}\n
\n \n {children}\n
\n \n {title}\n {description && ( {description} )}\n
\n );\n}\n\nexport default HeaderTitle\n"
},
{
"path": "packages/form-render/src/widgets/components/PanelView/index.less",
"content": ".fr-panel-bordered {\n border-radius: 4px;\n border: 1px solid #f4f4f4;\n padding: 52px 24px 0px 24px;\n margin-bottom: 24px;\n}"
},
{
"path": "packages/form-render/src/widgets/components/PanelView/index.tsx",
"content": "import React from 'react';\nimport classnames from 'classnames'\nimport './index.less';\n\nconst PanelView = ({ children, bordered } : any) => {\n return {children}
;\n}\n\nexport default PanelView;\n"
},
{
"path": "packages/form-render/src/widgets/components/TimePicker/index.tsx",
"content": "import * as React from 'react';\nimport DatePicker from '../DatePicker';\n\nconst TimePicker: any = React.forwardRef((props: any, ref: any) => {\n return \n {(disabled || readOnly)? (\n \n ): (\n
\n );\n}\n\nexport default Color;\n\n\n"
},
{
"path": "packages/form-render/src/widgets/fields/date/index.tsx",
"content": "\nimport React, { useMemo } from 'react';\nimport dayjs from 'dayjs';\nimport quarterOfYear from 'dayjs/plugin/quarterOfYear';\nimport { getFormat, transformDateValue } from '../../utils';\nimport DatePicker from '../../components/DatePicker';\nimport withFieldWrap from '../../utils/withFieldWrap';\n\n\ndayjs.extend(quarterOfYear);\n\nconst DateCmpt = ({ onChange, format, value, style, ...rest }) => {\n const dateFormat = getFormat(format);\n \n const valueObj = useMemo(() => {\n return transformDateValue(value, format, dateFormat);\n }, [value]);\n\n const handleChange = (dateValue: any, dateString: string) => {\n let newValue = dateString;\n if (format === 'week' || format === 'quarter') {\n newValue = dayjs(dateValue).format(dateFormat);\n }\n onChange(newValue);\n };\n\n const dateParams: any = {\n value: valueObj,\n style: { width: '100%', ...style },\n onChange: handleChange,\n };\n\n // TODO: format 是在 options 里自定义的情况，是否要判断一下要不要 showTime\n if (format === 'dateTime') {\n dateParams.showTime = true;\n }\n\n if (['week', 'month', 'quarter', 'year'].indexOf(format) > -1) {\n dateParams.picker = format;\n }\n\n if (dateFormat === format) {\n dateParams.format = format;\n }\n\n return \n v + '%' }}\n value={numberValue || 100}\n disabled={p.disabled || p.readonly}\n />\n {hideNumber ? null : renderNumber}\n
\n );\n};\n\nexport default PercentSlider;\n\n "
},
{
"path": "packages/form-render/src/widgets/fields/radio/index.tsx",
"content": "import React from 'react';\nimport { Radio, Space } from 'antd';\nimport withFieldWrap from '../../utils/withFieldWrap';\n\ninterface Option {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\ninterface Props {\n direction: 'row' | 'column',\n options: Option[]\n [key: string]: any\n}\n\nconst RadioComp = (props: Props) => {\n const { direction = 'row', options = [], ...rest } = props\n\n if (direction === 'column') {\n return \n
\n );\n}\n\nexport default withFieldWrap(SliderWithNumber, ['addons', 'dependValues']);\n\n"
},
{
"path": "packages/form-render/src/widgets/fields/switch/index.tsx",
"content": "import { Switch } from 'antd';\nimport withFieldWrap from '../../utils/withFieldWrap';\n\nexport default withFieldWrap(Switch);"
},
{
"path": "packages/form-render/src/widgets/fields/textArea/index.tsx",
"content": "import React from 'react';\nimport { Input } from 'antd';\nimport withFieldWrap from '../../utils/withFieldWrap';\n\nconst TextArea = (props: any) => {\n let finalProps = {\n autoSize: {\n minRows: 3,\n },\n ...props,\n };\n if (finalProps.rows) delete finalProps.autoSize;\n\n return \n \n \n \n {value && (\n \n {t('uploaded_address')}\n \n )}\n
\n );\n}\n\nexport default FrUpload;\n"
},
{
"path": "packages/form-render/src/widgets/fields/urlInput/index.tsx",
"content": "import React, { useContext } from 'react';\nimport { Input, ConfigProvider } from 'antd';\nimport { isUrl, translation } from '../../utils';\nimport withFieldWrap from '../../utils/withFieldWrap';\ninterface UrlNodeProps {\n value: string;\n addonText?: string;\n}\n\nconst UrlNode: React.FC{addonText}
;\n};\n\ninterface UrlInputProps {\n value?: string;\n prefix?: string;\n suffix?: string;\n addonText?: string;\n onChange?: (value: string) => void;\n}\n\nconst UrlInput: React.FC\n {fields.map(({ key, name }) => {\n const length = fields.length;\n const newSchema = cloneDeep(schema);\n if (newSchema.items.title && typeof newSchema.items.title === 'string') {\n newSchema.items.title += ` ${name + 1}`;\n }\n return (\n
\n \n );\n}\n\nexport default CardList;"
},
{
"path": "packages/form-render/src/widgets/listDrawer/drawerForm.tsx",
"content": "import React, { useContext } from 'react';\nimport { Button, Drawer, Space, ConfigProvider } from 'antd';\nimport { translation } from '../utils';\n\nconst DrawerForm = (props: any) => {\n const { children, onConfirm, onClose, ...ret } = props;\n\n const configCtx = useContext(ConfigProvider.ConfigContext);\n const t = translation(configCtx);\n\n let extraProps: any = { ...ret, open: true };\n if ((window as any).antdVersion === 'v4') {\n extraProps = { ...ret, visible: true };\n }\n\n return (\n \n moveItem(name, name - 1)}\n icon={ moveItem(name, name + 1)}\n icon={ removeItem(name)}\n {...delConfirmProps}\n >\n handleCopy(name)}\n icon={
\n );\n })}\n {(!schema.max || fields.length < schema.max) && !hideAdd && (\n \n {renderCore({ schema: newSchema, parentPath: [name], rootPath: [...rootPath, name] })}\n
\n \n addItem()}\n icon={
\n )}\n \n \n {renderCore({ schema: schema.items, parentPath: [drawerIndex], rootPath: [...rootPath, drawerIndex] })}\n \n )}\n
\n );\n}\n\nexport default TableList;\n"
},
{
"path": "packages/form-render/src/widgets/listSimple/index.less",
"content": ".fr-list-simple {\n display: inline-block;\n\n .fr-inline-field {\n min-width: 220px;\n margin-bottom: 24px !important;\n }\n\n .fr-list-item {\n display: flex;\n align-items: flex-start;\n position: relative;\n }\n\n .fr-list-item-operate {\n height: 32px;\n gap: 0 !important;\n }\n}\n\n.fr-list-simple-background {\n padding: 24px 24px 0 24px;\n background-color: #f6f6f6;\n border-radius: 4px;\n\n .add-btn {\n margin-bottom: 24px;\n }\n}\n\n.fr-list-simple-column .fr-list-item {\n align-items: center;\n}"
},
{
"path": "packages/form-render/src/widgets/listSimple/index.tsx",
"content": "import React from 'react';\nimport { Button, Space, Popconfirm, Divider } from 'antd';\nimport { PlusOutlined, CloseOutlined, ArrowUpOutlined, ArrowDownOutlined, CopyOutlined } from '@ant-design/icons';\nimport classnames from 'classnames';\nimport FButton from '../components/FButton';\n\nimport './index.less';\n\nconst getHasBackground = (fields: any[], hasBackground: boolean) => {\n let result = hasBackground;\n if (fields.length === 0) {\n result = false;\n }\n return result;\n}\n\nconst SimpleList = (props: any) => {\n const {\n form,\n schema: _schema,\n fields,\n rootPath,\n renderCore,\n hasBackground,\n operateBtnType,\n addBtnProps,\n delConfirmProps,\n copyBtnProps,\n deleteBtnProps,\n moveUpBtnProps,\n moveDownBtnProps,\n\n hideDelete,\n hideCopy,\n hideMove,\n hideAdd,\n\n addItem,\n copyItem,\n moveItem,\n removeItem,\n temporary\n } = props;\n\n const schema = {..._schema, items: { ..._schema.items }};\n\n if (!schema.items.displayType) {\n schema.items.displayType = 'inline';\n schema.items.inlineMode = true;\n }\n\n const handleCopy = (name: number) => {\n const value = form.getFieldValue(rootPath.concat(name));\n copyItem(value, name);\n };\n\n const isColumm = temporary.displayType === 'column';\n \n return (\n \n {fields.map(({ key, name }) => {\n const length = fields.length;\n return (\n
\n );\n}\n\nexport default SimpleList;\n"
},
{
"path": "packages/form-render/src/widgets/listTab/index.less",
"content": ""
},
{
"path": "packages/form-render/src/widgets/listTab/index.tsx",
"content": "import React, { useState, useContext, useMemo, useEffect } from 'react';\nimport { Popconfirm, Tabs, ConfigProvider } from 'antd';\nimport { CloseOutlined } from '@ant-design/icons';\nimport type { FormListFieldData } from 'antd';\nimport { translation } from '../utils';\nimport './index.less';\n\ninterface ListTabProps {\n fields: FormListFieldData[];\n schema: any;\n delConfirmProps: any;\n renderCore: any;\n rootPath: any;\n [key: string]: any;\n};\n\nconst TabPaneContent = (props: any) => {\n const { renderCore, name, schema, rootPath } = props;\n\n return useMemo(() => (\n \n {renderCore({ schema, parentPath: [name], rootPath: [...rootPath, name] })}\n moveItem(name, name - 1)}\n icon={ moveItem(name, name + 1)}\n icon={ removeItem(name)}\n {...delConfirmProps}\n >\n }\n children='删除'\n btnType={operateBtnType}\n {...deleteBtnProps}\n />\n \n )}\n {!hideCopy && (\n handleCopy(name)}\n icon={
\n );\n })}\n {(!schema.max || fields.length < schema.max) && !hideAdd && (\n \n {renderCore({ schema, parentPath: [name], rootPath: [...rootPath, name] })}\n
\n ), [JSON.stringify(props)]);\n};\n\nconst TabList: React.FC\n {renderCore({ parentPath: [field.name], rootPath: [...rootPath, field.name], schema: fieldSchema })}\n
\n )\n }\n\n return (\n \n {showTable && (\n
\n );\n}\n\nexport default TableList;\n"
},
{
"path": "packages/form-render/src/widgets/listTable/tableCell.tsx",
"content": "import React, { useState, useRef } from 'react';\nimport { Popover } from 'antd';\n\nconst TableCell = (props: any) => {\n const { renderCore, schema, dataIndex, ...otherProps } = props;\n const [errorMsg, setErrorMsg] = useState(null);\n const [visible, setVisible] = useState\n {renderCore({ parentPath: [field.name], rootPath: [...rootPath, field.name], schema: fieldSchema })}\n
\n )\n }\n\n return (\n