rich-core 0.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 +215 -0
- package/dist/rich-core.css +2 -0
- package/dist/rich-core.umd.min.js +9 -0
- package/package.json +72 -0
- package/styles/cssvar.scss +17 -0
- package/styles/form-design.scss +133 -0
- package/styles/index.scss +6 -0
- package/styles/richform.scss +950 -0
- package/styles/split-layout.scss +167 -0
- package/styles/variable.scss +12 -0
- package/types/component.d.ts +30 -0
- package/types/form-design.d.ts +41 -0
- package/types/index.d.ts +17 -0
- package/types/richform.d.ts +184 -0
- package/types/split-layout.d.ts +10 -0
package/README.md
ADDED
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
# richform-plus
|
|
2
|
+
|
|
3
|
+
## 主要功能
|
|
4
|
+
* richform表单组件
|
|
5
|
+
* 数据驱动
|
|
6
|
+
* 校验规则采用标准的JsonSchema,[JsonSchema文档](https://github.com/jingyuLin1999/richform/blob/main/JSON-Schema.md)
|
|
7
|
+
* 可拓展性，widgets下可自定义一些子组件
|
|
8
|
+
* 表单设计器
|
|
9
|
+
* 基于richform表单的拓展，可动态设计表单
|
|
10
|
+
* 表单设计所见即所得
|
|
11
|
+
* 可设置字段属性和校验规则
|
|
12
|
+
* 签核流程
|
|
13
|
+
* 基于RichForm和表单设计器的拓展
|
|
14
|
+
* 流程配置。动态添加节点，设计各节点的签核顺序，串并联签核
|
|
15
|
+
* 节点个性化。每个节点表单用RichForm显示，数据来源于表单设计器的设计结果
|
|
16
|
+
* 节点属性。签核人设置、签核类型（会签，串签）、出口配置
|
|
17
|
+
* 已签核状态显示
|
|
18
|
+
* 错误处理
|
|
19
|
+
|
|
20
|
+
## 支持vue3.x
|
|
21
|
+
vue2.x 请见[richform](https://github.com/jingyuLin1999/richform)
|
|
22
|
+
|
|
23
|
+
## 预览
|
|
24
|
+
|
|
25
|
+
### 在线预览
|
|
26
|
+
|
|
27
|
+
[表单设计器](http://156.232.10.2/richform/#/)
|
|
28
|
+
|
|
29
|
+
[富表单完整功能](http://156.232.10.2/richform/#/richform)
|
|
30
|
+
|
|
31
|
+
### 本地预览（node版本 16.13.0）
|
|
32
|
+
```
|
|
33
|
+
npm install
|
|
34
|
+
|
|
35
|
+
npm run serve
|
|
36
|
+
```
|
|
37
|
+
[表单设计器](http://localhost:8080/#/ )
|
|
38
|
+
http://localhost:8080/#/
|
|
39
|
+
|
|
40
|
+
[富表单完整功能](http://localhost:8080/#/form-design )
|
|
41
|
+
http://localhost:8080/#/form-design
|
|
42
|
+
|
|
43
|
+
## 用法
|
|
44
|
+
```
|
|
45
|
+
npm i richform@next -S
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<div class="demo-wrapper">
|
|
50
|
+
<div class="form-design">
|
|
51
|
+
<form-design />
|
|
52
|
+
</div>
|
|
53
|
+
<div class="rich-form">
|
|
54
|
+
<rich-form :form="form" :schema="schema" :values="values"/>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
```js
|
|
60
|
+
import { RichForm, FormDesign } from "richform";
|
|
61
|
+
import 'richform/lib/style.css';
|
|
62
|
+
export default {
|
|
63
|
+
components: { RichForm,FormDesign},
|
|
64
|
+
data() {
|
|
65
|
+
return {
|
|
66
|
+
schema: {}, // 验证规则
|
|
67
|
+
values: {}, // 表单的值
|
|
68
|
+
form: {
|
|
69
|
+
border: true, // 显示边框
|
|
70
|
+
grid: false, // 表单内部栅栏
|
|
71
|
+
labelSuffix: ":", // 字段标题后缀内容，默认' : '
|
|
72
|
+
labelWidth: "110px", // 标签宽度,默认50px
|
|
73
|
+
validator: "input", // submit
|
|
74
|
+
labelAlign: "right", // 标签对齐, 默认右对齐, 可选左对齐left
|
|
75
|
+
labelInline: true, // 字段标题显示位置, 默认true左侧left,false显示在top上方
|
|
76
|
+
actions: [
|
|
77
|
+
//声明显示在下方和动作按钮
|
|
78
|
+
{
|
|
79
|
+
name: "reset", // 按键的唯一标识符
|
|
80
|
+
type: "primary", // 按键类型,默认为primary，具体可见element button
|
|
81
|
+
title: "重置", // 按键的文字
|
|
82
|
+
icon: "el-icon-star-off", // 按键图标 具体可见element icon
|
|
83
|
+
right: true, // 如果=true，则显示在右侧
|
|
84
|
+
visible: true, // 按键是否可见,同时满足readonly===false和设置为true才会显示,默认为true
|
|
85
|
+
tips: "提示信息", // 鼠标悬浮在按键的提示信息
|
|
86
|
+
top: true, // 是否在上面, false则在下面
|
|
87
|
+
size: "default" // default / small / mini, 若未指明，则等同于form.size
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: "submit", // 按键的唯一标识符
|
|
91
|
+
type: "info", // 按键类型,默认为primary，具体可见element button
|
|
92
|
+
title: "提交", // 按键的文字
|
|
93
|
+
icon: "", // 按键图标 具体可见element icon
|
|
94
|
+
right: true, // 如果=true，则显示在右侧
|
|
95
|
+
visible: true, // 按键是否可见,同时满足readonly===false和设置为true才会显示,默认为true
|
|
96
|
+
tips: "提示信息", // 鼠标悬浮在按键的提示信息
|
|
97
|
+
top: true, // 是否在上面, false则在下面
|
|
98
|
+
size: "default" // default / small / mini, 若未指明，则等同于form.size
|
|
99
|
+
}
|
|
100
|
+
],
|
|
101
|
+
layout: [
|
|
102
|
+
{
|
|
103
|
+
title: "名称对方",
|
|
104
|
+
widget: "input",
|
|
105
|
+
name: "input", // values的箭值，必须有
|
|
106
|
+
type: "text",
|
|
107
|
+
},
|
|
108
|
+
// 更多子组件请见widgets介绍，或者看完整功能
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## 特殊功能
|
|
117
|
+
1、字段选项依赖
|
|
118
|
+
```js
|
|
119
|
+
{
|
|
120
|
+
title: "下拉选框B",
|
|
121
|
+
widget: "select",
|
|
122
|
+
name: "selectB",
|
|
123
|
+
description: "我的选项依赖于【下拉选框A】",
|
|
124
|
+
dict: {
|
|
125
|
+
"selectA==选项1": [
|
|
126
|
+
{
|
|
127
|
+
value: "选项1",
|
|
128
|
+
label: "根据[下拉选框A]的值变化A",
|
|
129
|
+
},
|
|
130
|
+
{
|
|
131
|
+
value: "选项2",
|
|
132
|
+
label: "根据[下拉选框A]的值变化B",
|
|
133
|
+
},
|
|
134
|
+
],
|
|
135
|
+
"selectA == 选项2": "http://localhost:8080/#/form-design",
|
|
136
|
+
"input == 123456": [
|
|
137
|
+
{
|
|
138
|
+
value: "input等于123456",
|
|
139
|
+
label: "input等于123456",
|
|
140
|
+
},
|
|
141
|
+
],
|
|
142
|
+
},
|
|
143
|
+
options: [
|
|
144
|
+
{
|
|
145
|
+
value: "选项1",
|
|
146
|
+
label: "黄金糕",
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
value: "选项2",
|
|
150
|
+
label: "双皮奶",
|
|
151
|
+
},
|
|
152
|
+
],
|
|
153
|
+
}
|
|
154
|
+
```
|
|
155
|
+
补充说明
|
|
156
|
+
当两个select的选项互相依赖时，箭值为条件，值可以有三种形式，若是url则获取数据，若是数组则直接赋值给options
|
|
157
|
+
```js
|
|
158
|
+
dict: "http://localhost:8080/#/form-design", // 获取到的值会直接覆盖options
|
|
159
|
+
dict: {
|
|
160
|
+
[<字段名name> == 'A']: "https://shandawang.com/dict/province", // 字典，
|
|
161
|
+
[<字段名name> == 'B']: [{},{}], // options
|
|
162
|
+
[<字段名name> == 'any']: "https://shandawang.com/dict/province", // 若等于any且值是url，<字段名name>的值只要变化，就会带上<字段名name>值到后端过滤获取字典
|
|
163
|
+
[<字段名name> == 'any']: {filterKey: "id"}, // 若等于any且值是对象，filterKey字段和options都必须有。<字段名name>的值只要变化，就会带上<字段名name>值到options中过滤。有一种特殊应用，当被依赖的字段值变化了，根据被依赖选项({label,value,other})的某个字段的值到当前options过滤，此时可配beRelyFilterKey如 {filterKey: "id",beRelyFilterKey: "other"}
|
|
164
|
+
}
|
|
165
|
+
```
|
|
166
|
+
2、字段隐藏依赖
|
|
167
|
+
```js
|
|
168
|
+
{
|
|
169
|
+
title: "名称对方",
|
|
170
|
+
widget: "input",
|
|
171
|
+
name: "input",
|
|
172
|
+
type: "textarea",
|
|
173
|
+
hideRely: "radioA==单选框B",
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
补充说明
|
|
177
|
+
```js
|
|
178
|
+
hideRely：<字段名称nameA> == 'C', // 可以是单值
|
|
179
|
+
hideRely：[ // 也可以是多值，只要满足一个条件，就隐藏,且后面条件不会再校验
|
|
180
|
+
<字段名称nameA> == 'C',
|
|
181
|
+
<字段名称nameB> == 'D',
|
|
182
|
+
]
|
|
183
|
+
```
|
|
184
|
+
3、更多widgets配置详情
|
|
185
|
+
请见src/pages/richform.vue
|
|
186
|
+
|
|
187
|
+
## 深度编辑
|
|
188
|
+
values可能是深度嵌套如下
|
|
189
|
+
```js
|
|
190
|
+
{
|
|
191
|
+
title: {
|
|
192
|
+
text: "ECharts 入门示例",
|
|
193
|
+
subtext: "Living Expenses in Shenzhen",
|
|
194
|
+
},
|
|
195
|
+
legend: {
|
|
196
|
+
orient: "horizontal", // vertical/horizontal
|
|
197
|
+
left: 0,
|
|
198
|
+
// top: 0,
|
|
199
|
+
bottom: 0,
|
|
200
|
+
},
|
|
201
|
+
}
|
|
202
|
+
```
|
|
203
|
+
要编辑这种valuse可开启deepValues: true
|
|
204
|
+
```html
|
|
205
|
+
<rich-form :form="form" :schema="schema" :values="values" deepValues/>
|
|
206
|
+
```
|
|
207
|
+
此时在定义form的name字段和shema结构，需要与values的结构对应
|
|
208
|
+
```js
|
|
209
|
+
layout: [{
|
|
210
|
+
title: "标题",
|
|
211
|
+
widget: "input",
|
|
212
|
+
name: "title.text",
|
|
213
|
+
}]
|
|
214
|
+
```
|
|
215
|
+
[例子](http://117.73.12.76/demo/richform/#/deep-values )
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.ps{-ms-overflow-style:none;overflow:hidden!important;overflow-anchor:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{bottom:0;height:15px}.ps__rail-x,.ps__rail-y{display:none;opacity:0;position:absolute;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear}.ps__rail-y{right:0;width:15px}.ps--active-x>.ps__rail-x,.ps--active-y>.ps__rail-y{background-color:transparent;display:block}.ps--focus>.ps__rail-x,.ps--focus>.ps__rail-y,.ps--scrolling-x>.ps__rail-x,.ps--scrolling-y>.ps__rail-y,.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6}.ps .ps__rail-x.ps--clicking,.ps .ps__rail-x:focus,.ps .ps__rail-x:hover,.ps .ps__rail-y.ps--clicking,.ps .ps__rail-y:focus,.ps .ps__rail-y:hover{background-color:#eee;opacity:.9}.ps__thumb-x{bottom:2px;height:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out}.ps__thumb-x,.ps__thumb-y{background-color:#aaa;border-radius:6px;position:absolute}.ps__thumb-y{right:2px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px}.ps__rail-x.ps--clicking .ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x,.ps__rail-x:hover>.ps__thumb-x{background-color:#999;height:11px}.ps__rail-y.ps--clicking .ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y,.ps__rail-y:hover>.ps__thumb-y{background-color:#999;width:11px}@supports(-ms-overflow-style:none){.ps{overflow:auto!important}}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.ps{overflow:auto!important}}.ps{position:relative}
|
|
2
|
+
:root{--form-background-color: #ffffff;--form-font-size: 13px;--form-active-design-border-color: #4F9FFE;--form-border-color: #ddd;--form-primary-color: #409eff;--form-font-color: #303133;--form-field-title-color: #303133;--form-field-value-color: #303133;--form-field-question-bgcolor: #13ce66;--form-field-error-font-color: #e83030;--el-collapse-header-bg-color: #ffffff;--el-collapse-content-bg-color: #ffffff}.richform{font-size:var(--form-font-size);position:relative}.richform .active-design{border:3px solid var(--form-active-design-border-color) !important}.richform .scrollbar{min-height:20px;box-sizing:border-box}.richform .richform-border{padding:10px;box-sizing:border-box;border:1px solid var(--form-border-color)}.richform.clear-richform{min-height:0px !important}.richform.clear-richform:deep(.actions){margin:0 !important;padding:0}.richform.clear-richform .field-wrapper>.field{min-height:0px !important}.richform.clear-richform .inline-no-grid{margin:0}.richform.clear-richform:deep(.field){margin:0;padding:0}.richform .ps{width:100%}.richform .no-ready{width:100%;height:100%;color:var(--form-primary-color);font-size:15px;display:flex;justify-content:center;align-items:center}.richform.active-form-design{border:1px solid var(--form-active-design-border-color)}.richform .design-draggable,.richform .design-delete,.richform .design-copy{display:inline-block;position:absolute;width:22px;height:26px;line-height:26px;color:#fff;background:#409eff;text-align:center;cursor:pointer;z-index:99999}.richform .design-draggable{left:0;top:0;z-index:99;cursor:move}.richform .design-copy{right:27px;bottom:0;z-index:99}.richform .design-delete{right:0px;bottom:0;z-index:99}.richform .design-field-name{right:1px;top:1px;z-index:99;font-size:10px;display:inline-block;position:absolute;box-sizing:border-box;padding:1px;color:#aaa}.richform .design-draggable-ghost{border-top:5px solid #f56c6c}.richform .base-component-item{width:100%;display:inline-block;text-indent:-9999px}.richform .design-sortable-drag{background:#f4dec9}.richform .layout{padding-right:0}.richform .layout .active-design{border:3px solid var(--form-active-design-border-color)}.richform .layout .field-border-top:first-child{border-top:1px solid var(--form-border-color)}.richform .field-wrapper{position:relative;color:var(--form-font-color);box-sizing:border-box}.richform .field-wrapper .field-clear-empty{padding:0 !important}.richform .field-wrapper .required-field::before{content:"*";color:#f56c6c;margin-right:.2em;font-family:Verdana,Arial,Tahoma;font-weight:400}.richform .field-wrapper>.label-inline{display:flex}.richform .field-wrapper>.label-no-inline{display:flex;flex-direction:column;justify-content:center}.richform .field-wrapper>.field-border{border:1px solid var(--form-border-color);border-top:0}.richform .field-wrapper>.field{align-items:center;position:relative;min-height:48px;box-sizing:border-box}.richform .field-wrapper>.field>.title-wrapper{display:flex;align-items:center;word-break:break-all}.richform .field-wrapper>.field>.title-wrapper>.label-title{margin-left:5px;display:flex;align-items:center;overflow:hidden;color:var(--form-field-title-color)}.richform .field-wrapper>.field>.title-wrapper>.field-question{color:var(--form-field-question-bgcolor);cursor:pointer;margin:0 2px}.richform .field-wrapper>.field>.field-value{color:var(--form-field-value-color)}.richform .field-wrapper>.field .label-right{justify-content:flex-end;padding-right:4px;box-sizing:border-box}.richform .field-wrapper>.field .label-center{justify-content:center;padding-right:4px;box-sizing:border-box}.richform .field-wrapper>.field>.label-vert{justify-content:flex-start;padding:3px 0}.richform .field-wrapper>.field>.field-mask{width:100%;position:relative}.richform .field-wrapper>.field>.field-mask::before{content:"";width:100%;height:100%;position:absolute;z-index:99;left:0;top:0}.richform .field-wrapper>.field>.label-right-border{width:1px;background:var(--form-border-color)}.richform .field-wrapper>.field>.field-value{display:flex;align-items:center;box-sizing:border-box;padding:0 3px;width:100%;position:relative}.richform .field-wrapper>.field>.field-value>.error-message-top{position:absolute;top:-36px;height:34px;line-height:34px;text-align:center;z-index:9999;padding:0 4px;background-color:#f56c6c;color:#fff;border-radius:5px}.richform .field-wrapper>.field>.field-value>.error-message{font-size:12px;height:13px;line-height:13px;color:var(--form-field-error-font-color);position:absolute;left:0;bottom:-13px;z-index:98}.richform .field-wrapper>.field>.field-value-vert{padding-top:1px;padding-left:4px;display:flex;align-items:flex-start;margin-bottom:4px}.richform .field-wrapper>.field>.field-value-vert>.error-message{bottom:-13px}.richform .field-wrapper>.field .el-form-item{margin:0}.richform .grid-layout{position:relative}.richform .grid-layout.grid-layout-border{box-sizing:border-box;border:1px solid var(--form-border-color);border-top:0;border-right:0}.richform .grid-layout .grid-title{color:var(--form-font-color)}.richform .grid-layout .grid-title-border{border-right:1px solid var(--form-border-color)}.richform .grid-layout .drag-wrapper{top:0;left:0;position:absolute;width:100%;height:100%;cursor:pointer;box-sizing:border-box}.richform .grid-layout .grid-title{padding:3px}.richform .grid-layout .gird-content{display:flex;position:relative;box-sizing:border-box}.richform .grid-layout .gird-content .grid-flex{display:flex;width:100%;height:100%}.richform .grid-layout .gird-content .grid-column{width:100%;min-height:62px;padding:6px 0 6px 6px;box-sizing:border-box;display:flex;flex-direction:column}.richform .grid-layout .gird-content .grid-column-nowrap{overflow:hidden}.richform .grid-layout .gird-content .grid-column-padding{padding:6px}.richform .grid-layout .gird-content .grid-column-top{border-top:1px solid var(--form-border-color)}.richform .grid-layout .gird-content .grid-column-border:not(:last-child){border-right:1px solid var(--form-border-color)}.richform .grid-layout .gird-content .grid-column-border:last-child{border-right:1px solid var(--form-border-color)}.richform .tab-wrapper{position:relative;box-sizing:border-box;border:1px solid var(--form-border-color);border-top:0}.richform .tab-wrapper>.design-no-tabs{width:100%;height:40px;position:absolute;z-index:2}.richform .tab-wrapper .tab-container{min-height:15px;padding:0 3px 2px 3px}.richform .tab-wrapper-no-border{border:0 !important}.richform .collapse-wrapper{overflow:hidden;box-sizing:border-box;position:relative}.richform .collapse-wrapper .collapse-title{color:var(--form-primary-color);font-size:15px;margin-left:3px}.richform .collapse-wrapper .collapse-container{box-sizing:border-box;padding:0 5px}.richform .collapse-wrapper>.design-no-collapse{width:100%;height:50px;position:absolute;left:100px}.richform .collapse-wrapper-border{border:1px solid var(--form-border-color);border-top:0;border-bottom:0;cursor:pointer}.richform .collapse-wrapper-border .el-collapse{border-top:0 !important}.richform .actions{margin:2px 0}.richform .actions .right{display:flex;justify-content:flex-end}.button-widget{width:100%;height:100%}.el-cascader__tags .el-tag{min-width:55px !important}.cascader-widget{width:100%}.date-picker-widget{width:100%}.date-picker-widget .el-input{width:100% !important}.checkbox-widget{display:flex;width:100%}.checkbox-widget .widget-checkAll{margin-right:20px}.date-picker-widget{width:100%}.date-picker-widget .el-input{width:100% !important}.draggable-list-widget{display:flex;flex-direction:column;justify-content:flex-start;margin:0;padding:0}.draggable-list-widget .draggable-list-icon,.draggable-list-widget .delete-list-icon{width:30px;height:30px;line-height:30px;font-size:25px;cursor:pointer}.draggable-list-widget .delete-list-icon{color:#fbc5c5}.draggable-list-widget .delete-list-icon:hover{color:#f56c6c}.draggable-list-widget .draggable-list-icon{color:#c8cbcc;cursor:move}.draggable-list-widget .draggable-list-item{display:flex;align-items:center;margin:5px 0}.draggable-list-widget .draggable-list-item .list-handel-move{color:#556567}.draggable-list-widget .draggable-list-item .input-draggable{min-width:60px}.draggable-list-widget .draggable-list-item .column-wrapper{margin-right:3px}.draggable-list-widget .toolbar{display:flex;align-items:center}.draggable-list-widget .toolbar .draggable-list-add{font-size:14px;color:#1890ff;cursor:pointer;margin-right:15px}.draggable-list-widget .toolbar .arrow-icon{display:flex;align-items:center;font-size:15px;cursor:pointer;color:#1890ff}.draggable-list-widget .toolbar .arrow-icon:hover{color:#f56c6c}.draggable-list-widget .toolbar .arrow-icon:first-of-type{margin-right:15px}.option-container{width:100%;height:100%;display:flex;margin-top:3px}.option-container>.option-item{min-width:200px;height:280px;margin-right:3px;border:1px solid #ddd}.option-container>.option-item>.title{height:25px;line-height:25px;border-bottom:1px solid #ddd;padding:0 3px;box-sizing:border-box}.option-container>.option-item>.option-list{height:255px;overflow-y:auto}.option-container>.option-item>.option-list>.option{height:20px;line-height:20px;padding:0 3px;box-sizing:border-box}.option-container>.option-item>.option-list>.option:hover{background:#bbb;color:#fff}.option-container>.option-item>.option-list>.disabled-option{position:relative}.option-container>.option-item>.option-list>.disabled-option::after{content:"";background:"#f00";z-index:1000;position:absolute;left:0;top:0;width:100%;height:100%;cursor:not-allowed}.sure-exp{float:right;margin-top:3px}.icon-container{display:flex;flex-wrap:wrap;max-height:400px;overflow:auto;border-left:1px solid #eee;border-top:1px solid #eee}.icon-container .icon-cell{width:50px;height:50px;line-height:50px;text-align:center;font-size:21px;border:1px solid #eee;border-left:0;border-top:0}.icon-container .active-icon{color:#4f9ffe}.icon-container .icon-cell:last-child{border-right:1px solid #eee}.icon-container .icon-cell:hover{color:#4f9ffe}.sure-icon{float:right;margin-top:4px}.inputnumber-widget{width:100%}.ipinput-widget{width:100%;display:flex;height:36px;align-items:center;justify-content:center;border-radius:4px;line-height:normal;border:1px solid var(--form-border-color);box-sizing:border-box}.ipinput-widget .ip-segment{display:inline-block;width:50px;height:26px;line-height:normal}.ipinput-widget .ip-segment input{width:36px;height:26px;line-height:normal;border:none;outline:none;text-align:center;text-indent:0px;margin:0px;padding:0px;background-color:rgba(0,0,0,0);color:var(--form-font-color)}.ipinput-widget .ip-segment i{display:inline-block;font-size:18px}.layout .field.error input{border:1px solid red;background:rgba(255,0,0,.2)}.select-widget-wrapper{width:100%;height:100%}.select-widget-wrapper>.select-widget{height:100%;width:100%}.widget-slider{width:100%;padding:0 8px}.widget-slider>.select-widget{width:100%}.slot-widget{width:100%;height:100%}.popover-body{height:500px}.table-widget{box-sizing:border-box;padding:1px 0;width:100%}.table-widget .attr{margin-right:3px}.table-widget .fixed-popover{z-index:99}.table-widget .sure-table-popover{float:right;margin-bottom:3px}.text-widget{width:100%}.text-widget .text-text{width:100%;display:flex;color:var(--form-field-value-color)}.timepicker-widget{width:100%}.timepicker-widget .el-date-editor--timerange{width:calc(100% - 20px) !important}.timepicker-widget>.el-time{width:100%}.perfect-tree-tool-tip{border-radius:0;padding:2px 4px}.field-row{display:flex;margin-bottom:3px;align-items:center;margin-top:5px}.field-row .field-label{width:60px;text-align:right;margin-right:4px}.perfect-tree-wrapper{width:100%;margin:0 2px}.perfect-tree-wrapper .show-add-template{display:flex;flex-wrap:wrap;width:100%}.perfect-tree-wrapper .show-add-template .add-template{margin-bottom:2px;width:97px;margin-right:2px}.perfect-tree-wrapper .show-add-template .add-template:last-child{margin-right:0}.perfect-tree-wrapper .perfect-tree-title{height:35px;line-height:35px;border-bottom:1px solid #d6d6d6;font-size:15px}.perfect-tree-wrapper .perfect-tree-node{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:15px}.perfect-tree-wrapper .perfect-tree-node .tools{display:flex;position:absolute;right:0;z-index:3;background-color:#f5f7fa}.perfect-tree-wrapper .perfect-tree-node .tools .tool-item{margin-left:7px;display:none}.perfect-tree-wrapper .perfect-tree-node .node-icon{margin-right:1px}.perfect-tree-wrapper .perfect-tree-node .title{padding:3px 0}.perfect-tree-wrapper .perfect-tree-node .active-node{color:#4f9ffe}.perfect-tree-wrapper .perfect-tree-node:hover .tool-item{display:block}.tree-select-icon .svg{height:1.2em;line-height:1.2em;margin-bottom:-2px}.tree-select-widget{width:100%}.tree-select-widget .el-select{width:100%}.upload-widget{width:100%;overflow:hidden}.upload-widget .upload-type{display:flex;align-items:center;height:25px;margin-bottom:3px;margin-top:5px}.upload-widget .upload-type .type-label{font-size:12px}.jscodding-widget{width:100%;height:100%}.jscodding-widget .code-container{width:100%;height:100%;max-height:150px;resize:vertical;overflow:auto}.jscodding-widget .code-container .cm-editor{height:100%}.jscodding-widget .code-container .cm-gutter,.jscodding-widget .code-container .cm-contnet{min-height:45px}.jscodding-widget .sure-btn{margin-top:1px}.split-layout{width:100%;height:100%;display:flex;position:relative;overflow:hidden}.split-layout.hori{flex-direction:row}.split-layout.vert{flex-direction:column}.split-layout .center{flex:1}.split-layout .panel{height:100%}.split-layout .splitbar{background:#f1f1f1;display:flex;justify-content:center;align-items:center}.split-layout .splitbar.hori{height:100%;width:8px;cursor:e-resize}.split-layout .splitbar.hori>.vbg-ear{height:10%;width:100%;cursor:pointer;background:#e9e9e9;position:relative}.split-layout .splitbar.hori>.vbg-ear:hover{color:#fff}.split-layout .splitbar.hori>.triangle-dire-left::before{content:"";width:100%;height:10px;position:absolute;right:1px;top:50%;height:0;width:0;border-right:5px solid currentColor;border-top:5px solid rgba(0,0,0,0);border-bottom:5px solid rgba(0,0,0,0)}.split-layout .splitbar.hori>.triangle-dire-right::before{content:"";width:100%;height:10px;position:absolute;right:1px;top:50%;height:0;width:0;border-left:5px solid currentColor;border-top:5px solid rgba(0,0,0,0);border-bottom:5px solid rgba(0,0,0,0)}.split-layout .splitbar.vert{width:100%;height:8px;cursor:s-resize}.split-layout .splitbar.vert>.vbg-ear{width:10%;height:8px;cursor:pointer;background:#e9e9e9;position:relative}.split-layout .splitbar.vert>.vbg-ear:hover{color:#fff}.split-layout .splitbar.vert>.triangle-dire-up::before{content:"";width:10px;height:100%;position:absolute;right:50%;bottom:1px;height:0;width:0;border-bottom:5px solid currentColor;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0)}.split-layout .splitbar.vert>.triangle-dire-down::before{content:"";width:10px;height:100%;position:absolute;right:50%;bottom:1px;height:0;width:0;border-top:5px solid currentColor;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0)}.popover-title-container{width:100%;display:flex;justify-content:space-between;margin-bottom:1px}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.form-design{height:100%;display:flex;flex-direction:column}.form-design .design-sortable-drag{background:red}.form-design a{text-decoration:none}.form-design .tab-attribute .el-tabs__item{width:140px;text-align:center}.form-design>.design-header{height:53px;padding:0 10px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:#fff;box-shadow:0 1px #ccc;margin-bottom:1px;box-sizing:border-box;background:linear-gradient(90deg, #1179f4 45%, #079dc8, #01b3ac)}.form-design>.design-header .header-left{display:flex;font-size:14px;align-items:center}.form-design>.design-header .header-left .title{margin:0;padding:0;font-size:19px;height:53px;line-height:55px}.form-design>.design-header .header-left .header-github-image{width:35px;height:35px;margin-right:12px}.form-design>.design-header .header-right{display:flex;font-size:14px;align-items:center}.form-design>.design-header .header-right>.tool{cursor:pointer;margin-left:10px}.form-design .widget-title{height:25px;line-height:25px;font-size:14px;margin-left:3px}.form-design>.design-content{height:calc(100% - 30px);position:relative;display:flex}.form-design>.design-content .left-view-panel{height:100%;width:200px;transition:width .3s;overflow:hidden}.form-design>.design-content .base-widgets{padding-right:2px}.form-design>.design-content .base-widgets .base-components{display:flex;flex-wrap:wrap;justify-content:space-between}.form-design>.design-content .base-widgets .base-components>.base-component-item{height:30px;line-height:30px;width:49.5%;text-align:center;font-size:12px;background:#eff0f3;margin:3px 0;cursor:move;box-sizing:border-box}.form-design>.design-content .base-widgets .base-components>.base-component-item:hover{border:1px dashed #01b3ac}.form-design>.design-content .design-canvas{height:calc(100% - 22px)}
|