fix: 空间调整

antvis · Nov 9, 2023 · 9cede09 · 9cede09
1 parent 34accab
commit 9cede09
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/ColorPaletteGroup/style.ts b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/ColorPaletteGroup/style.ts
@@ -10,16 +10,20 @@ export default genStyleHook('formily-color-range-selector__color-palette-group',
         alignItems: 'center',
         justifyContent: 'space-between',
         height: '20px',
-        padding: 4,
+        padding: '10px 4px',
         cursor: 'pointer',
+        margin: '5px 0',
+
         span: {
           height: '10px',
           border: 0,
         },
+
         'span:first-child': {
           borderTopLeftRadius: '4px',
           borderBottomLeftRadius: '4px',
         },
+
         'span:last-child': {
           borderTopRightRadius: '4px',
           borderBottomRightRadius: '4px',

diff --git a/.../li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/index.tsx b/.../li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/index.tsx
@@ -65,24 +65,27 @@ const RangeItem = ({ index, id, color: defaultValue, onDelete, onChange, onChang
         <HolderOutlined />
       </div>
       <div className={`${prefixCls}__infor`}>
-        <div
-          onMouseDown={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-        >
-          <ColorPicker
-            value={defaultValue ? defaultValue : Preset_Colors[0]}
-            onChange={colorChange}
-            presets={[{ label: '推荐', colors: Preset_Colors }]}
+        <div className={`${prefixCls}__infor__color-content`}>
+          <div
+            onMouseDown={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
           >
-            <div className={`${prefixCls}__infor__color`} style={{ background: defaultValue }} />
-          </ColorPicker>
-        </div>
+            <ColorPicker
+              value={defaultValue ? defaultValue : Preset_Colors[0]}
+              onChange={colorChange}
+              presets={[{ label: '推荐', colors: Preset_Colors }]}
+            >
+              <div className={`${prefixCls}__infor__color`} style={{ background: defaultValue }} />
+            </ColorPicker>
+          </div>
 
-        <div className={`${prefixCls}__infor__input`}>
-          <Input bordered={false} value={defaultValue} size="small" onChange={(e) => onChange(e.target.value)} />
+          <div className={`${prefixCls}__infor__input`}>
+            <Input bordered={false} value={defaultValue} size="small" onChange={(e) => onChange(e.target.value)} />
+          </div>
         </div>
+
         <div className={`${prefixCls}__infor__delete-icon`} onClick={onDelete}>
           <DeleteOutlined />
         </div>

diff --git a/...s/li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/style.ts b/...s/li-p2/src/components/Formily/ColorRangeSelector/Internal/CustomRange/RangeItem/style.ts
@@ -7,10 +7,11 @@ export default genStyleHook('color-range-selector__custom-range__range-item', (t
     [componentCls]: {
       display: 'flex',
       alignItems: 'center',
-      padding: '3px 0',
+      margin: '5px 0',
+      marginLeft: '-14px',
+      height: '32px',
 
       [`${componentCls}__drag-icon`]: {
-        margin: '3px',
         cursor: 'move',
         opacity: 0,
       },
@@ -20,11 +21,23 @@ export default genStyleHook('color-range-selector__custom-range__range-item', (t
         alignItems: 'center',
         justifyContent: 'space-between',
         width: '100%',
-        height: '24px',
         cursor: 'pointer',
 
+        '&__color-content': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          height: '32px',
+          paddingLeft: '3px',
+
+          '&:hover': {
+            borderRadius: 4,
+            background: controlItemBgHover,
+          },
+        },
+
         '&__color': {
-          width: '32px',
+          width: '18px',
           height: '18px',
         },
 
@@ -44,7 +57,7 @@ export default genStyleHook('color-range-selector__custom-range__range-item', (t
         },
 
         '&__delete-icon': {
-          marginRight: '3px',
+          fontSize: '12px',
         },
 
         '&__delete-icon:hover': {
@@ -58,8 +71,6 @@ export default genStyleHook('color-range-selector__custom-range__range-item', (t
     },
 
     [`${componentCls}:hover`]: {
-      borderRadius: 4,
-      background: controlItemBgHover,
       [`${componentCls}__drag-icon`]: {
         opacity: 1,
       },