feat: FieldEditor UI 优化

alibaba · Dec 8, 2019 · 071058e · 071058e
1 parent 3521cf4
commit 071058e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/react-schema-editor/src/components/FieldEditor.css b/packages/react-schema-editor/src/components/FieldEditor.css
@@ -1,13 +1,16 @@
-.field-group{
-
-}
-.field-group-title{
+.field-editor .field-group-title{
   margin-top: 15px;
   font-size: 16px;
 }
-.field-group-content{
+.field-editor .field-group-content{
   display: flex;
+  align-items: flex-start;
+}
+.field-editor .field-group-content .field-group-form-item{
+  width: 20%;
+  margin-right: 0;
+  padding-right: 10px;
 }
-.field-group-form-item{
-  flex: 1;
+.field-editor .field-group-form-item.auto-complete .ant-form-item-control{
+  margin-top: -1px;
 }
diff --git a/packages/react-schema-editor/src/components/FieldEditor.tsx b/packages/react-schema-editor/src/components/FieldEditor.tsx
@@ -7,7 +7,7 @@ import {
   Input,
   InputNumber,
   Select,
-  AutoComplete
+  AutoComplete,
 } from 'antd'
 import {
   getFieldTypeData,
@@ -245,7 +245,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
             <FormItem
               label={index === 0 ? '属性名' : null}
               {...formItemLayout}
-              className="field-group-form-item"
+              className="field-group-form-item auto-complete"
             >
               <AutoComplete
                 placeholder="请选择属性"
@@ -306,6 +306,7 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
                 className="field-group-form-item"
               >
                 <InputNumber
+                  style={{width: '100%'}}
                   value={value}
                   onChange={value => {
                     handleXComponentPropsValueChange(value, property)
@@ -447,7 +448,7 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
           <FormItem
             label="组件"
             {...formItemLayout}
-            className="field-group-form-item"
+            className="field-group-form-item auto-complete"
           >
             <AutoComplete
               dataSource={_.map(xComponentData.options, ({ value }) => value)}