{"id":15013027,"url":"https://github.com/nick121212/fx-schema-form","last_synced_at":"2025-04-12T03:31:01.740Z","repository":{"id":57243501,"uuid":"103476960","full_name":"nick121212/fx-schema-form","owner":"nick121212","description":"react schema form ","archived":false,"fork":false,"pushed_at":"2019-03-06T09:37:58.000Z","size":25411,"stargazers_count":49,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T23:15:19.628Z","etag":null,"topics":["form-generator","jsonschema","react","schema-form","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nick121212.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-14T02:43:11.000Z","updated_at":"2023-12-07T06:29:46.000Z","dependencies_parsed_at":"2022-09-15T10:00:29.682Z","dependency_job_id":null,"html_url":"https://github.com/nick121212/fx-schema-form","commit_stats":null,"previous_names":[],"tags_count":171,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick121212%2Ffx-schema-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick121212%2Ffx-schema-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick121212%2Ffx-schema-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nick121212%2Ffx-schema-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nick121212","download_url":"https://codeload.github.com/nick121212/fx-schema-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248068340,"owners_count":21042479,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form-generator","jsonschema","react","schema-form","typescript"],"created_at":"2024-09-24T19:43:37.444Z","updated_at":"2025-04-12T03:30:57.810Z","avatar_url":"https://github.com/nick121212.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-schema-form [![Build Status](https://travis-ci.org/nick121212/fx-schema-form.svg?branch=master)](https://travis-ci.org/nick121212/fx-schema-form)\n\n爬虫前端核心组件。用于生成静态或者动态表单；\n\n## [outlook界面](https://nick121212.github.io/react-fabric-outlook/build/index.html#/)\n\n## [DEMO](https://nick121212.github.io/fx-schema-form/packages/fx-schema-form-extension/dist/index.html)\n\n## [所见即所得](https://nick121212.github.io/fx-schema-form-react-demo/dist/index.html#/panel/create)\n\n## 一个一直有想法但并没有花时间去实现的功能\n\n![效果图](./images/effect.png)\n\n\u003e举个栗子：\n\n有一份数据结构：\n\n```json\n{\n    \"style\":{\n        \"width\": 100,\n        \"height\": 100,\n    },\n    \"className\": \"ba bb-dashed\"\n}\n```\n\n如果用表单来生成数据，只需要3个文本框搞定；\n如果数据应用到div上，会呈现出一个带虚线框高度和宽度都是100的div；或者说这个数据应用到任何不是内敛元素的元素上都会给元素添加边框和高宽；\n那我是不是可以左边表单，右边div，这样可以查看实时的渲染效果，假设数据是实时变化的话。\n\n那么问题来了：当我渲染的不是div，而是一个复杂的组件，可能有几十个属性，而且随着组件版本的升级，属性也要做相应的变更，有些属性需要使用动态数据（接口回来的数据不能直接用，要经过简单处理）咋玩？咋玩？咋玩？\n\n我的想法：\n\n- 希望表单是动态的，可以让我通过简单的配置来生成，最好有一个动态表单引擎。可以支持复杂的数据结构，数据的联动，包括ajax的数据拉取，条件控制，验证等等功能。\n- 希望数据的更改是实时的更新的，因为很多的组件依赖于同一份数据。只要一边发生变化，其他的组件也能发生改变，所见即所得；\n\n基于这样的一些问题，开始组件的选型：\n\n- 好吧，公司使用react。（虽然我是angular阵营）\n- redux来实现数据的实时更新。（可以做编辑器了）\n- immutable来做不可变数据。（插件系统，数据的层层传递，可不能让中间某个家伙破坏数据）\n- ajv来做数据验证。（官网说是性能最强的jsonschema验证组件）\n- github上有成千上万的hoc组件。（用hoc来做插件系统）\n\n于是就有了：\n\n![架构图](./images/constructor.png)\n\n## SchemaForm的难点\n\n- 数据结构的复杂程度。\n- 解决JsonSchema和UiSchema之间的关联。因为JsonSchema是可以互相嵌套的。以及各种关键字。比如anyOf,oneOf,allOf等。\n- 各种组件之间高内聚低耦合。\n- 灵活性和性能。\n- 动态数据，比如echart中的[data]字段，如果需要从接口获取; 如果通过配置，data的数据格式会出现二义性（data是数组类型，而配置的可能是字符串）；如果data数据需要多个接口的数据简单合并呢？\n\n![echart的部分界面](./images/timeline.png)\n\n再来看看下面的数据结构（相信你会疯掉）：\n\n逻辑复杂，条件判断繁琐，验证困难；但这就是SchemaForm的使用场景。\n\n```json\n{\n    \"type\": \"object\",\n    \"required\": [\n        \"name\",\n        \"type\",\n        \"dsOption\"\n    ],\n    \"properties\": {\n        \"name\": {\n            \"type\": \"string\",\n            \"minLength\": 2\n        },\n        \"type\": {\n            \"type\": \"string\"\n        },\n        \"dsOption\": {\n            \"type\": \"object\",\n            \"required\": [\n                \"sourceType\"\n            ],\n            \"default\": {},\n            \"properties\": {\n                \"menuId\": {\n                    \"type\": \"number\"\n                },\n                \"parentMenuId\": {\n                    \"type\": \"number\"\n                },\n                \"params\": {\n                    \"type\": \"array\",\n                    \"default\": [],\n                    \"items\": {\n                        \"type\": \"object\",\n                        \"required\": [\n                            \"name\",\n                            \"type\",\n                            \"data\"\n                        ],\n                        \"properties\": {\n                            \"name\": {\n                                \"type\": \"string\"\n                            },\n                            \"type\": {\n                                \"type\": \"string\",\n                                \"enum\": [\n                                    \"period\",\n                                    \"dimension\",\n                                    \"fixed\"\n                                ]\n                            },\n                            \"data\": {\n                                \"oneOf\": [{\n                                    \"default\": {},\n                                    \"type\": \"object\",\n                                    \"title\": \"固定参数-fixed\",\n                                    \"required\": [\n                                        \"value\"\n                                    ],\n                                    \"properties\": {\n                                        \"value\": {\n                                            \"type\": \"string\"\n                                        }\n                                    }\n                                }, {\n                                    \"type\": \"object\",\n                                    \"default\": {},\n                                    \"title\": \"维度参数-dimension\",\n                                    \"required\": [\n                                        \"dataFieldName\",\n                                        \"correspondField\"\n                                    ],\n                                    \"properties\": {\n                                        \"dataFieldName\": {\n                                            \"type\": \"string\"\n                                        },\n                                        \"correspondField\": {\n                                            \"type\": \"string\"\n                                        }\n                                    }\n                                },{\n                                    \"type\": \"object\",\n                                    \"default\": {},\n                                    \"title\": \"周期性参数-period\",\n                                    \"required\": [\n                                        \"correspondValue\"\n                                    ],\n                                    \"properties\": {\n                                        \"correspondValue\": {\n                                            \"default\": {},\n                                            \"type\": \"object\",\n                                            \"required\": [\n                                                \"dataType\",\n                                                \"initialValue\",\n                                                \"periodGap\"\n                                            ],\n                                            \"properties\": {\n                                                \"dataType\": {\n                                                    \"type\": \"string\"\n                                                },\n                                                \"initialValue\": {\n                                                    \"type\": \"string\"\n                                                },\n                                                \"periodGap\": {\n                                                    \"type\": \"object\",\n                                                    \"required\": [\n                                                        \"value\",\n                                                        \"unit\"\n                                                    ],\n                                                    \"properties\": {\n                                                        \"value\": {\n                                                            \"type\": \"number\"\n                                                        },\n                                                        \"unit\": {\n                                                            \"type\": \"string\"\n                                                        }\n                                                    }\n                                                }\n                                            }\n                                        }\n                                    }\n                                }]\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n```\n\n## 核心思想\n\n同样的数据可以有不同的展现形式；一个number类型，可以使用input、select、radio等来渲染，如果是时间戳还可以使用日期选择器。\n\n## [fx-schema-form-core](./packages/fx-schema-form-core/readme.md)\n\n用于处理JsonSchema和UiSchema的关系。\n\n## [fx-schema-form-react](./packages/fx-schema-form-react/readme.md)\n\n用于生成表单的组件。\n\n## [fx-schema-form-extension](./packages/fx-schema-form-extension/readme.md)\n\nfx-schema-form-react的扩展。\n\n## License\n\n[MIT](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnick121212%2Ffx-schema-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnick121212%2Ffx-schema-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnick121212%2Ffx-schema-form/lists"}