├── .editorconfig ├── .gitignore ├── .prettierrc.js ├── README.md ├── akfun.config.js ├── commitlint.config.js ├── demo └── demo1 │ ├── css │ ├── base.css │ └── index.e4fddae3.css │ ├── img │ ├── link.svg │ └── loadding.gif │ ├── index.html │ └── scripts │ ├── app │ ├── bluebird.js │ ├── bluebird.js.LICENSE.txt │ ├── flexible.js │ ├── scrollToBottom.js │ └── visibility.js │ ├── chunk │ ├── index.1ae53cfa.js │ ├── index.1ae53cfa.js.LICENSE.txt │ ├── vendor.192ba676.js │ └── vendor.192ba676.js.LICENSE.txt │ └── lib │ ├── jquery.11.3.min.js │ └── jquery.11.3.min.js.LICENSE.txt ├── lib ├── index.css ├── index.js └── index.js.LICENSE.txt ├── package.json ├── public ├── css │ └── base.css ├── img │ ├── link.svg │ └── loadding.gif └── scripts │ ├── app │ ├── bluebird.js │ ├── flexible.js │ ├── scrollToBottom.js │ └── visibility.js │ └── lib │ └── jquery.11.3.min.js └── src ├── assets └── css │ ├── common.scss │ └── mixin.scss ├── components ├── AdvanceConfig │ ├── index.js │ └── index.scss ├── ArraySchema │ └── index.js ├── BaseFormSchema │ ├── index.js │ └── index.scss ├── ConditionPropsSchema │ ├── index.js │ └── index.scss ├── ConditionValueSchema │ └── index.js ├── DataSourceSchema │ └── index.js ├── DynamicDataSchema │ └── index.js ├── EnumItemSchema │ ├── index.js │ └── index.scss ├── EventSchema │ └── index.js ├── GeneralSchema │ └── index.js ├── JSONSchema │ ├── index.js │ └── index.scss ├── MappingRender.js ├── ObjectSchema │ └── index.js ├── QuantitySchema │ └── index.js ├── RadioSchema │ └── index.js ├── SelectSchema │ └── index.js └── TypeSelectFormSchema │ ├── index.js │ └── index.scss ├── data └── TypeList.js ├── demo1.js ├── demo2.js ├── index.html ├── index.scss ├── main.js ├── store ├── JSONSchemaStore.js ├── index-v1.js └── index.js └── utils ├── advanced.config.js └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | max_line_length = 80 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store/ 2 | node_modules/ 3 | npm-debug.log* 4 | yarn-debug.log* 5 | yarn-error.log* 6 | 7 | # Editor directories and files 8 | .hg 9 | .svn 10 | .CVS 11 | .idea 12 | .vscode 13 | .DS_Store 14 | *.suo 15 | *.ntvs* 16 | *.njsproj 17 | *.sln 18 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | /* 2 | prettier 配置文件 3 | 更多配置信息：https://prettier.io/docs/en/options.html 4 | */ 5 | module.exports = { 6 | semi: true, // Semicolons 分号，默认需要分号 7 | tabWidth: 2, // 空格，默认 2, 8 | useTabs: false, 9 | singleQuote: true, // 单引号还是双引号，默认为false 双引号 10 | trailingComma: "all", // 逗号 11 | jsxBracketSameLine: false, // 默认为false，Put the > of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements). 12 | }; 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # json-schema-editor 2 | 3 | > JSON数据可视化/JSONSchema，以表单的形式编辑 json schema，可用于在线设计组件的配置面板。 4 | 5 | ### 技术栈 6 | React/Mobx/Ant Design 7 | 8 | ### 特点 9 | 1. 支持12种基础类型组件（input、boolean、 date、date-time、 time、 url、 10 | textarea、number、color、radio、 select、single-select） 11 | 2. 支持11个特殊类型组件（object、array、json、datasource、dynamic-data、event、 12 | codearea、htmlarea、text-editor([使用说明](https://github.com/wibetter/json-editor/blob/master/docs/TextEditor.md))、quantity、box-style） 13 | 3. 拖拽排序 14 | 4. 复制功能 15 | 5. 复杂嵌套 16 | 6. 高级配置功能 17 | 7. 支持字段联动 18 | 19 | ### 在线Demo 20 | [点击访问在线Demo](https://wibetter.github.io/json-schema-editor/demo/demo1/index.html) 21 | 22 | 23 | ### JSONSchema效果图 24 | ![image](https://user-images.githubusercontent.com/11958920/104154681-78f5e680-5420-11eb-978f-6219acfa933d.png) 25 | 26 | ### 特别说明 27 | JSONSchema仅用于生成结构化的json数据，需要配合JSONEditor（[git地址](https://github.com/wibetter/json-editor)）渲染其内容。 28 | 29 | 30 | ## 安装 31 | 32 | ```bash 33 | npm install --save @wibetter/json-schema-editor 34 | ``` 35 | 36 | ## 使用示例 37 | 38 | ```js 39 | import * as React from 'react'; 40 | import JSONSchemaEditor from '@wibetter/json-schema-editor'; 41 | import '@wibetter/json-schema-editor/dist/index.css'; 42 | 43 | class IndexDemo extends React.PureComponent { 44 | constructor(props) { 45 | super(props); 46 | 47 | this.state = { 48 | jsonSchema: {}, 49 | }; 50 | } 51 | 52 | render() { 53 | const { jsonSchema } = this.state; 54 | return ( 55 | <> 56 |
57 |
58 | { 61 | this.setState({ 62 | jsonSchema: newJsonSchema, 63 | }); 64 | }} 65 | /> 66 |
67 |
68 | 69 | ); 70 | } 71 | } 72 | ``` 73 | 74 | ## JSONSchema 可配置参数说明 75 | 76 | | name | type | default | desc | 77 | | ------------ | -------- | ------- | ------------------------------- | 78 | | `data` | object | {} | 必填项，json schema（带结构的json数据） | 79 | | `typeList` | object | {} | 非必填，用于设置func、style、data的子项可选类型 | 80 | | `onChange` | function | () => {} | schemaData内容变动时会触发onChange | 81 | 82 | -------------------------------------------------------------------------------- /akfun.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const path = require('path'); 3 | // 统一路径解析 4 | function resolve(dir) { 5 | return path.resolve(__dirname, dir); 6 | } 7 | 8 | // 包括生产和开发的环境配置信息 9 | module.exports = { 10 | settings: { 11 | enableESLint: false, // 调试模式是否开启ESLint，默认开启ESLint检测代码格式 12 | enableESLintFix: false, // 是否自动修正代码格式，默认不自动修正 13 | enableStyleLint: false, // 是否开启StyleLint，默认开启ESLint检测代码格式 14 | enableStyleLintFix: false // 是否需要StyleLint自动修正代码格式 15 | }, 16 | webpack: { 17 | resolve: { 18 | // webpack的resolve配置 19 | extensions: ['.js', '.jsx', '.umd.js', '.vue', 'json'], // 用于配置webpack在尝试过程中用到的后缀列表 20 | alias: { 21 | '@': resolve('src'), 22 | $components: resolve('src/components'), 23 | $pages: resolve('src/pages'), 24 | $plugins: resolve('src/plugins'), 25 | $utils: resolve('src/utils'), 26 | $assets: resolve('src/assets'), 27 | $public: resolve('public'), 28 | $router: resolve('src/router'), 29 | $store: resolve('src/store'), 30 | $data: resolve('src/data'), 31 | $config: resolve('src/config'), 32 | $mixins: resolve('src/mixins'), 33 | }, 34 | }, 35 | // createDeclaration: true, // 打包时是否创建ts声明文件 36 | ignoreNodeModules: false, // 打包时是否忽略 node_modules 37 | allowList: [], // ignoreNodeModules为true时生效 38 | externals: [], 39 | projectDir: ['src'], 40 | template: resolve('./src/index.html'), // 默认html模板 41 | // sassResources中的sass文件会自动注入每一个sass文件中 42 | sassResources: [ 43 | resolve('./src/assets/css/common.scss'), 44 | resolve('./src/assets/css/mixin.scss'), 45 | ], 46 | plugins: [], // 用于配置自定义plugins 47 | }, 48 | dev: { 49 | entry: { 50 | index: './src/demo1.js', 51 | }, 52 | NODE_ENV: 'development', 53 | port: 80, 54 | autoOpenBrowser: true, 55 | assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） 56 | assetsSubDirectory: '', 57 | hostname: 'localhost', 58 | cssSourceMap: false, 59 | }, 60 | build: { 61 | entry: { 62 | index: './src/demo1.js', 63 | }, 64 | // 用于构建生产环境代码的相关配置信息 65 | NODE_ENV: 'production', 66 | assetsRoot: resolve('./demo/demo1'), // 打包后的文件绝对路径（物理路径） 67 | assetsPublicPath: '/json-schema-editor/demo/demo1/', // 设置静态资源的引用路径（根域名+路径） 68 | assetsSubDirectory: '', // 资源引用二级路径 69 | productionSourceMap: false, 70 | productionGzip: false, 71 | productionGzipExtensions: ['js', 'css', 'json'], 72 | bundleAnalyzerReport: false, 73 | }, 74 | build2: { 75 | entry: { 76 | index: './src/demo2.js', 77 | }, 78 | NODE_ENV: 'production', 79 | assetsRoot: resolve('./demo/demo2'), 80 | assetsPublicPath: '/json-schema-editor/demo/demo2/', 81 | assetsSubDirectory: '', 82 | productionSourceMap: false, 83 | productionGzip: false, 84 | productionGzipExtensions: ['js', 'css', 'json'], 85 | bundleAnalyzerReport: false, 86 | }, 87 | build2lib: { 88 | entry: { 89 | index: './src/main.js', 90 | }, 91 | output: { 92 | filename: '[name].js' 93 | }, 94 | NODE_ENV: 'production', // development / production 95 | libraryName: 'JSONSchemaEditor', // 构建第三方功能包时最后导出的引用变量名 96 | assetsRoot: resolve('./lib'), // 打包后的文件绝对路径（物理路径） 97 | assetsPublicPath: '/', // 设置静态资源的引用路径（根域名+路径） 98 | assetsSubDirectory: '', // 资源引用二级路径 99 | ignoreNodeModules: true, 100 | productionSourceMap: false, 101 | productionGzip: false, 102 | productionGzipExtensions: ['js', 'css', 'json'], 103 | bundleAnalyzerReport: false, 104 | } 105 | }; 106 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * https://www.npmjs.com/package/@commitlint/config-conventional\ 3 | * 4 | * Git提交规范-配置文件 5 | * Commit message 由Header、Body 和 Footer三个部分组成，其格式如下： 6 | * (): 7 | * 8 | * 9 | * 10 | *