@wibetter/json-schema-editor 6.0.5 → 7.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -4
- package/lib/index.css +3 -3
- package/lib/index.js +3101 -1
- package/lib/index.js.LICENSE.txt +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,13 +8,13 @@ React/Mobx/Ant Design
|
|
|
8
8
|
### 特点
|
|
9
9
|
1. 支持14种基础类型组件（input、boolean、 date、date-time、 time、 url、
|
|
10
10
|
textarea、number、color、radio、 checkboxes、select、cascader、input-image）
|
|
11
|
-
2. 支持
|
|
12
|
-
codearea、htmlarea、text-editor([使用说明](https://github.com/wibetter/json-editor/blob/master/docs/TextEditor.md))、quantity、box-style、padding-margin）
|
|
11
|
+
2. 支持9个特殊类型组件（object、array、json、codearea、htmlarea、text-editor([使用说明](https://github.com/wibetter/json-editor/blob/master/docs/TextEditor.md))、quantity、box-style、padding-margin）
|
|
13
12
|
3. 支持拖拽排序
|
|
14
13
|
4. 支持删除、复制、高级配置等功能
|
|
15
|
-
5.
|
|
14
|
+
5. 支持无限嵌套
|
|
16
15
|
6. 支持通过表达式进行配置联动
|
|
17
16
|
7. 支持源码模式切换（开启源码模式后可以开启编辑模式）
|
|
17
|
+
8. 支持添加自定义 Schema
|
|
18
18
|
|
|
19
19
|
### 特别说明
|
|
20
20
|
JSONSchema仅用于生成结构化的json数据，需要配合JSONEditor（[git地址](https://github.com/wibetter/json-editor)）渲染其内容。
|
|
@@ -69,6 +69,75 @@ class IndexDemo extends React.PureComponent {
|
|
|
69
69
|
| name | type | default | desc |
|
|
70
70
|
| ------------ | -------- | ------- | ------------------------------- |
|
|
71
71
|
| `data` | object | {} | 必填项，json schema（带结构的json数据） |
|
|
72
|
-
| `typeList` | object | {} | 非必填，用于设置func、style、data的子项可选类型 |
|
|
73
72
|
| `onChange` | function | () => {} | schemaData内容变动时会触发onChange |
|
|
74
73
|
|
|
74
|
+
## 自定义 Schema
|
|
75
|
+
|
|
76
|
+
从 v7.0.0 起，支持通过 `SchemaDescriptor` 描述文件注册自定义 Schema 类型。注册后，自定义类型会出现在类型选择下拉列表中，并在编辑区以自定义渲染器或通用渲染器呈现。
|
|
77
|
+
|
|
78
|
+
### SchemaDescriptor 字段说明
|
|
79
|
+
|
|
80
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
81
|
+
| ----------------- | ----------------------------- | ---- | ---------------------------------------------------- |
|
|
82
|
+
| `type` | string | ✅ | 类型唯一标识，与 JSONSchema 中的 `type` 字段对应 |
|
|
83
|
+
| `label` | string | ✅ | 在类型选择下拉中展示的名称 |
|
|
84
|
+
| `isContainer` | boolean | ✅ | 是否为容器类型（支持添加子元素） |
|
|
85
|
+
| `defaultSchema` | object | ✅ | 新建该类型时的初始 schema 数据 |
|
|
86
|
+
| `propsSchema` | PropsSchema | ✅ | 高级配置面板的 schema，由 `buildPropsSchema` 构建 |
|
|
87
|
+
| `renderer` | (props: any) => ReactNode | ❌ | 自定义渲染函数，不提供则降级使用通用渲染器 |
|
|
88
|
+
| `isFixed` | boolean | ❌ | 元素是否固定（不可复制/拖拽/删除） |
|
|
89
|
+
| `keyIsFixed` | boolean | ❌ | key 字段是否不可编辑 |
|
|
90
|
+
| `typeIsFixed` | boolean | ❌ | type 字段是否不可编辑 |
|
|
91
|
+
| `readOnly` | boolean | ❌ | 是否只读（不可编辑） |
|
|
92
|
+
| `hideOperaBtn` | boolean | ❌ | 是否隐藏操作按钮（增删复制拖拽） |
|
|
93
|
+
|
|
94
|
+
### 注册自定义 Schema 示例
|
|
95
|
+
|
|
96
|
+
以下示例展示如何注册一个 `colorPicker`（颜色选择器）类型的自定义 Schema：
|
|
97
|
+
|
|
98
|
+
**第一步：创建描述文件 `colorPickerPlugin.ts`**
|
|
99
|
+
|
|
100
|
+
```ts
|
|
101
|
+
import JSONSchemaEditor, { registerSchema, buildPropsSchema } from '@wibetter/json-schema-editor';
|
|
102
|
+
|
|
103
|
+
// 定义 ColorPicker 类型描述文件
|
|
104
|
+
const colorPickerDescriptor = {
|
|
105
|
+
type: 'color-picker',
|
|
106
|
+
label: '颜色选择器',
|
|
107
|
+
isContainer: false,
|
|
108
|
+
|
|
109
|
+
// 新建该类型时的初始 schema
|
|
110
|
+
defaultSchema: {
|
|
111
|
+
type: 'color-picker',
|
|
112
|
+
title: '颜色选择器'
|
|
113
|
+
},
|
|
114
|
+
|
|
115
|
+
// 高级配置面板的 schema（由 buildPropsSchema 构建，会自动合并通用配置项）
|
|
116
|
+
propsSchema: buildPropsSchema(),
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
// 注册成 json-schema-editor 可用配置项
|
|
120
|
+
registerSchema(colorPickerDescriptor);
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
**第二步：在入口文件中引入插件（确保注册在 `JSONSchemaEditor` 渲染前执行）**
|
|
124
|
+
|
|
125
|
+
```js
|
|
126
|
+
import './sliderPlugin'; // 引入即触发注册
|
|
127
|
+
import JSONSchemaEditor from '@wibetter/json-schema-editor';
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### 访问 schemaRegistry
|
|
131
|
+
|
|
132
|
+
可通过 `schemaRegistry` 查询已注册的所有 Schema 类型：
|
|
133
|
+
|
|
134
|
+
```ts
|
|
135
|
+
import JSONSchemaEditor, { schemaRegistry } from '@wibetter/json-schema-editor';
|
|
136
|
+
|
|
137
|
+
// 获取某个类型的描述文件
|
|
138
|
+
const colorPickerDescriptor = schemaRegistry.get('color-picker');
|
|
139
|
+
|
|
140
|
+
// 获取所有已注册类型
|
|
141
|
+
const allTypes = Array.from(schemaRegistry.keys());
|
|
142
|
+
```
|
|
143
|
+
|
package/lib/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @wibetter/json-schema-editor
|
|
2
|
+
* @wibetter/json-schema-editor v7.0.1
|
|
3
3
|
* author: wibetter
|
|
4
4
|
* build tool: AKFun
|
|
5
|
-
* build time:
|
|
5
|
+
* build time: Fri Feb 27 2026 11:56:28 GMT+0800 (中国标准时间)
|
|
6
6
|
* build tool info: https://github.com/wibetter/akfun
|
|
7
|
-
*/.json-view-box{position:relative}.json-view-box .json-view-ace{width:100%}.json-view-box .readOnly-btn{color:#ad6800;position:absolute;right:8px;top:0;z-index:100}.advance-config-model{padding:8px 10px;position:relative;text-align:center}.advance-config-model .mobile-screen-element-warp,.advance-config-model .small-screen-element-warp{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;line-height:38px;margin-bottom:12px;min-width:280px;position:relative}.advance-config-model .mobile-screen-element-warp .element-title,.advance-config-model .small-screen-element-warp .element-title{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;margin-right:12px;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all}.advance-config-model .mobile-screen-element-warp .content-item,.advance-config-model .small-screen-element-warp .content-item{position:relative;text-align:left}.advance-config-model .mobile-screen-element-warp .content-item>.mobile-screen-element-warp,.advance-config-model .mobile-screen-element-warp .content-item>.small-screen-element-warp,.advance-config-model .small-screen-element-warp .content-item>.mobile-screen-element-warp,.advance-config-model .small-screen-element-warp .content-item>.small-screen-element-warp{min-width:230px}.advance-config-model .mobile-screen-element-warp .content-item .color-item-form,.advance-config-model .small-screen-element-warp .content-item .color-item-form{width:60px}.advance-config-model .mobile-screen-element-warp .content-item .add-rule-condition-btn,.advance-config-model .small-screen-element-warp .content-item .add-rule-condition-btn{margin:3px 0}.advance-config-model .wide-screen-element-warp{-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-box-align:start;-moz-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:flex-start;justify-content:flex-start;line-height:30px;margin-bottom:6px;min-width:350px;position:relative}.advance-config-model .wide-screen-element-warp .element-title{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-flex:0 1 100px;-ms-flex:0 1 100px;flex:0 1 100px;margin-right:12px;max-width:100px;overflow:hidden;padding-left:12px;text-align:right;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all}.advance-config-model .wide-screen-element-warp .content-item{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;text-align:left}.advance-config-model .wide-screen-element-warp .content-item .color-item-form{width:60px}.advance-config-model .wide-screen-element-warp .content-item .add-rule-condition-btn{margin:3px 0}.advance-config-model .code-area-item{max-width:600px;min-width:230px}.advance-config-model .hidden-rule-box{border-top:1px solid #ccc;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:10px auto 0;padding:8px 15px;width:450px}.advance-config-model .hidden-rule-box .rule-title{-webkit-box-pack:justify;-moz-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;justify-content:space-between;line-height:30px}.advance-config-model .hidden-rule-box .rule-condition-box{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;background-color:#f8f8f8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;line-height:30px;min-height:30px;padding:8px 10px;position:relative}.advance-config-model .hidden-rule-box .rule-condition-box .condition-title{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 70px;-ms-flex:0 0 70px;flex:0 0 70px;text-align:center}.advance-config-model .hidden-rule-box .rule-condition-box .condition-equal{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 40px;-ms-flex:0 0 40px;flex:0 0 40px;text-align:center}.advance-config-model .hidden-rule-box .rule-condition-box .condition-prop,.advance-config-model .hidden-rule-box .rule-condition-box .condition-value{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 100px;-ms-flex:1 1 100px;flex:1 1 100px;text-align:left}.advance-config-model .hidden-rule-box .rule-condition-box .ant-select-single{max-width:145px}.advance-config-model .warning-box{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-moz-box-orient:horizontal;-moz-box-direction:normal;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-ms-flex-align:center;background-color:#feeceb;color:red;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:12px;-webkit-justify-content:flex-start;justify-content:flex-start;padding:8px 0;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:cubic-bezier(0,1,.5,1);transition-timing-function:cubic-bezier(0,1,.5,1);width:100%}.advance-config-model .warning-box,.advance-config-model .warning-box .warning-img{-webkit-box-align:center;-moz-box-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.advance-config-model .warning-box .warning-img{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-ms-flex-align:center;-webkit-flex:0 1 60px;-ms-flex:0 1 60px;flex:0 1 60px;-webkit-justify-content:center;justify-content:center}.advance-config-model .warning-box .warning-text{-webkit-box-flex:1;-moz-box-flex:1;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-flex:1 1 160px;-ms-flex:1 1 160px;flex:1 1 160px;-webkit-justify-content:flex-start;justify-content:flex-start;line-height:20px}.advance-config-model .form-item-box,.advance-config-model .warning-box .warning-text{-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.advance-config-model .form-item-box{-webkit-box-pack:stretch;-moz-box-pack:stretch;-ms-flex-pack:stretch;-webkit-justify-content:stretch;justify-content:stretch;min-height:30px}.advance-config-model .rc-switch{width:60px}.advance-config-model .rc-switch-checked:after{left:38px}.advance-config-model .rc-switch-checked{background-color:#1677ff;border:1px solid #1677ff}.advance-config-model .rc-switch-inner-unchecked{left:24px}.advance-config-model .rc-switch-inner-checked,.advance-config-model .rc-switch-inner-unchecked{text-align:center;width:30px}.advance-config-model .rc-switch-checked .rc-switch-inner-unchecked{left:62px}.base-schema-box{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;min-height:35px;position:relative}.base-schema-box .warn-text{color:#ad4e00;width:100%}.base-schema-box .key-input-item{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;padding-right:8px}.base-schema-box .type-select-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 120px;-ms-flex:0 1 120px;flex:0 1 120px;padding-right:8px}.base-schema-box .title-input-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 200px;-ms-flex:0 1 200px;flex:0 1 200px}.base-schema-box .operate-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:0 1 110px;-ms-flex:0 1 110px;flex:0 1 110px;-webkit-justify-content:flex-start;justify-content:flex-start;padding-left:10px}.base-schema-box .operate-item .operate-btn{-webkit-box-flex:0;-moz-box-flex:0;color:#2395f1;cursor:pointer!important;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:8px;width:15px}.base-schema-box .operate-item .delete-operate{color:#ff561b}.base-schema-box .operate-item .drag-btn{color:#8a8a8a}.base-schema-box .operate-item .drag-btn:hover{color:#2395f1}.typeSelect-schema-box{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;min-height:35px;position:relative}.typeSelect-schema-box .key-input-item{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;padding-right:8px}.typeSelect-schema-box .key-input-item .ant-select{display:block}.typeSelect-schema-box .type-select-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 120px;-ms-flex:0 1 120px;flex:0 1 120px;padding-right:8px}.typeSelect-schema-box .title-input-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 200px;-ms-flex:0 1 200px;flex:0 1 200px}.typeSelect-schema-box .operate-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:0 1 110px;-ms-flex:0 1 110px;flex:0 1 110px;-webkit-justify-content:flex-start;justify-content:flex-start;padding-left:10px}.typeSelect-schema-box .operate-item .operate-btn{-webkit-box-flex:0;-moz-box-flex:0;color:#2395f1;cursor:pointer!important;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:8px;width:15px}.typeSelect-schema-box .operate-item .delete-operate{color:#ff561b}.typeSelect-schema-box .operate-item .drag-btn{background-image:url(//storage.jd.local/cdnnpm/jdw-web/img/drag-default.svg);background-size:contain;color:#8a8a8a;display:inline-block;height:18px;width:18px}.option-schema-box{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;min-height:35px;position:relative}.option-schema-box .key-input-item{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;padding-right:8px}.option-schema-box .type-select-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 120px;-ms-flex:0 1 120px;flex:0 1 120px;padding-right:8px}.option-schema-box .title-input-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 200px;-ms-flex:0 1 200px;flex:0 1 200px}.option-schema-box .operate-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:0 1 110px;-ms-flex:0 1 110px;flex:0 1 110px;-webkit-justify-content:flex-start;justify-content:flex-start;padding-left:10px}.option-schema-box .operate-item .operate-btn{-webkit-box-flex:0;-moz-box-flex:0;color:#2395f1;cursor:pointer!important;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:8px;width:15px}.option-schema-box .operate-item .delete-operate{color:#ff561b}.json-schema-container{padding:8px 10px;position:relative}.json-schema-container .schema-item-form{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;min-height:35px;position:relative}.json-schema-empty{height:50px;line-height:50px;position:relative}.ant-tree-list-holder-inner{-webkit-box-align:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch}.ant-tree-switcher{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.ant-tree-node-content-wrapper{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.ant-modal-close-x,.ant-tree .ant-tree-switcher{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center}
|
|
7
|
+
*/.base-schema-box{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;min-height:35px;position:relative}.base-schema-box .warn-text{color:#ad4e00;width:100%}.base-schema-box .key-input-item{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;padding-right:8px}.base-schema-box .type-select-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 120px;-ms-flex:0 1 120px;flex:0 1 120px;padding-right:8px}.base-schema-box .title-input-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 200px;-ms-flex:0 1 200px;flex:0 1 200px}.base-schema-box .operate-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:0 1 110px;-ms-flex:0 1 110px;flex:0 1 110px;-webkit-justify-content:flex-start;justify-content:flex-start;padding-left:10px}.base-schema-box .operate-item .operate-btn{-webkit-box-flex:0;-moz-box-flex:0;color:#2395f1;cursor:pointer!important;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:8px;width:15px}.base-schema-box .operate-item .delete-operate{color:#ff561b}.base-schema-box .operate-item .drag-btn{color:#8a8a8a}.base-schema-box .operate-item .drag-btn:hover{color:#2395f1}.json-view-box{position:relative}.json-view-box .json-view-ace{width:100%}.json-view-box .readOnly-btn{color:#ad6800;position:absolute;right:8px;top:0;z-index:100}.json-schema-container{padding:8px 10px;position:relative}.json-schema-container .schema-item-form{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;min-height:35px;position:relative}.json-schema-empty{height:50px;line-height:50px;position:relative}.ant-tree-list-holder-inner{-webkit-box-align:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch}.ant-tree-switcher{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.ant-tree-node-content-wrapper{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.ant-modal-close-x,.ant-tree .ant-tree-switcher,.option-schema-box{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center}.option-schema-box{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;min-height:35px;position:relative}.option-schema-box .key-input-item{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;padding-right:8px}.option-schema-box .type-select-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 120px;-ms-flex:0 1 120px;flex:0 1 120px;padding-right:8px}.option-schema-box .title-input-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 200px;-ms-flex:0 1 200px;flex:0 1 200px}.option-schema-box .operate-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:0 1 110px;-ms-flex:0 1 110px;flex:0 1 110px;-webkit-justify-content:flex-start;justify-content:flex-start;padding-left:10px}.option-schema-box .operate-item .operate-btn{-webkit-box-flex:0;-moz-box-flex:0;color:#2395f1;cursor:pointer!important;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:8px;width:15px}.option-schema-box .operate-item .delete-operate{color:#ff561b}.typeSelect-schema-box{-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:center;justify-content:center;min-height:35px;position:relative}.typeSelect-schema-box .key-input-item{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1 1 200px;-ms-flex:1 1 200px;flex:1 1 200px;padding-right:8px}.typeSelect-schema-box .key-input-item .ant-select{display:block}.typeSelect-schema-box .type-select-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 120px;-ms-flex:0 1 120px;flex:0 1 120px;padding-right:8px}.typeSelect-schema-box .title-input-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-flex:0 1 200px;-ms-flex:0 1 200px;flex:0 1 200px}.typeSelect-schema-box .operate-item{-webkit-box-flex:0;-moz-box-flex:0;-webkit-box-pack:start;-moz-box-pack:start;-ms-flex-pack:start;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:0 1 110px;-ms-flex:0 1 110px;flex:0 1 110px;-webkit-justify-content:flex-start;justify-content:flex-start;padding-left:10px}.typeSelect-schema-box .operate-item .operate-btn{-webkit-box-flex:0;-moz-box-flex:0;color:#2395f1;cursor:pointer!important;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:8px;width:15px}.typeSelect-schema-box .operate-item .delete-operate{color:#ff561b}.typeSelect-schema-box .operate-item .drag-btn{background-image:url(//storage.jd.local/cdnnpm/jdw-web/img/drag-default.svg);background-size:contain;color:#8a8a8a;display:inline-block;height:18px;width:18px}
|