fix: 优化自定义颜色划分，留更多空间

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/CatItem/index.tsx

@@ -0,0 +1,42 @@
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
+import { InputNumber } from 'antd';
+import classnames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { isNumber } from 'lodash-es';
+
+type ItemProps = {
+  size: 'small' | 'middle' | 'large';
+  value: [number];
+  min: number;
+  max: number;
+  onChange: (val: [number]) => void;
+};
+
+const CatItem = ({ size = 'middle', value, min, max, onChange }: ItemProps) => {
+  const prefixCls = usePrefixCls('formily-rester--scale-selector__custom-content__custom-item__item-cat');
+  const [itemVal, setItemVal] = useState(value);
+
+  const onInputChange = (e: number) => {
+    onChange([e]);
+    setItemVal([e]);
+  };
+
+  useEffect(() => {
+    setItemVal(value);
+  }, [value]);
+
+  return (
+    <div className={classnames(`${prefixCls}`)}>
+      <InputNumber
+        size={size}
+        min={min}
+        max={max}
+        value={itemVal?.[0]}
+        style={{ width: '100%' }}
+        onChange={(e) => isNumber(e) && onInputChange(e)}
+      />
+    </div>
+  );
+};
+
+export default CatItem;

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx

@@ -1,120 +1,38 @@
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
-import { InputNumber } from 'antd';
 import classnames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import NumberItem from '../../../../ScaleSelector/CustomMappingColors/CustomItem/Item/NumberItem';
+import CatItem from './CatItem';
 import useStyle from './style';
 
 type ItemProps = {
   type: 'cat' | 'custom';
+  size: 'small' | 'middle' | 'large';
   value: (string | number)[];
   min: number;
   max: number;
   position: string | null;
-  onChange: (val: number[]) => void;
+  onChange: (val: [number] | [number, number]) => void;
 };
 
-const Item = ({ type, value, min, max, position, onChange }: ItemProps) => {
+const Item = ({ size = 'middle', type, value, min, max, position, onChange }: ItemProps) => {
   const prefixCls = usePrefixCls('formily-rester--scale-selector__custom-content__custom-item__item');
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const [itemVal, setItemVal] = useState<(string | number)[]>(value);
-
-  const onInputChange = (e: number) => {
-    onChange([e]);
-    setItemVal([e]);
-  };
-
-  const onFirstInputChange = (e: number) => {
-    const val = (itemVal?.length === 2 ? [e, itemVal[1]] : [e, Infinity]) as number[];
-    onChange(val);
-    setItemVal(val);
-  };
-
-  const onLastInputChange = (e: number) => {
-    if (position === 'first') {
-      const val = [-Infinity, e];
-      onChange(val);
-      setItemVal(val);
-    } else if (position === 'last') {
-      const val = [e, Infinity];
-      onChange(val);
-      setItemVal(val);
-    } else {
-      const val = (itemVal?.length > 0 ? [itemVal[0], e] : [-Infinity, e]) as number[];
-      onChange(val);
-      setItemVal(val);
-    }
-  };
-
-  useEffect(() => {
-    setItemVal(value);
-  }, [value]);
 
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId)}>
-      {type === 'cat' && (
-        <InputNumber
-          size="small"
+      {type === 'cat' && <CatItem size={size} min={min} max={max} value={value as [number]} onChange={onChange} />}
+
+      {type === 'custom' && (
+        <NumberItem
+          size={size}
+          value={value as [number, number]}
           min={min}
           max={max}
-          value={itemVal?.[0]}
-          style={{ width: '100%' }}
-          onChange={(e) => onInputChange(e as number)}
+          position={position}
+          onChange={onChange}
         />
       )}
-
-      {type === 'custom' && (
-        <div className={classnames(`${prefixCls}__input-group`, hashId)}>
-          {position === 'first' && (
-            <>
-              <span style={{ margin: '0 8px' }}>{`<`}</span>
-              <InputNumber
-                size="small"
-                min={min}
-                max={max}
-                value={itemVal?.[1]}
-                className={`${prefixCls}__input-group__input`}
-                onChange={(e) => onLastInputChange(e as number)}
-              />
-            </>
-          )}
-
-          {position === 'last' && (
-            <>
-              <span style={{ margin: '0 8px' }}>{`>`}</span>
-              <InputNumber
-                size="small"
-                min={min}
-                max={max}
-                value={itemVal?.[0]}
-                className={`${prefixCls}__input-group__input`}
-                onChange={(e) => onLastInputChange(e as number)}
-              />
-            </>
-          )}
-
-          {!position && (
-            <>
-              <InputNumber
-                size="small"
-                min={min}
-                max={max}
-                value={itemVal?.[0]}
-                className={`${prefixCls}__input-group__input`}
-                onChange={(e) => onFirstInputChange(e as number)}
-              />
-              <span style={{ margin: '0 8px' }}>-</span>
-              <InputNumber
-                size="small"
-                min={min}
-                max={max}
-                value={itemVal?.[1]}
-                className={`${prefixCls}__input-group__input`}
-                onChange={(e) => onLastInputChange(e as number)}
-              />
-            </>
-          )}
-        </div>
-      )}
     </div>,
   );
 };

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/style.ts

@@ -6,19 +6,7 @@ export default genStyleHook('rester-scale-selector__custom-content__custom-item_
   return {
     [componentCls]: {
       flex: 1,
-      margin: '0 5px',
-
-      '&__input-group': {
-        width: '100%',
-        textAlign: 'right',
-        display: 'flex',
-        flex: 1,
-        justifyContent: 'space-between',
-
-        '&__input': {
-          maxWidth: 60,
-        },
-      },
+      margin: '0 3px',
     },
   };
 });

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/index.tsx

@@ -55,6 +55,7 @@ const RangeItem = ({
 
         <div className={`${prefixCls}__infor__content`}>
           <Item
+            size="middle"
             type={customType}
             value={defaultValue}
             onChange={onValueChange}

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/style.ts

@@ -7,7 +7,7 @@ export default genStyleHook('rester-scale-selector__custom-content__custom-item'
     [componentCls]: {
       display: 'flex',
       alignItems: 'center',
-      padding: '3px 2px',
+      padding: '5px 0',
       borderRadius: '4px',
 
       [`${componentCls}__infor`]: {
@@ -18,7 +18,7 @@ export default genStyleHook('rester-scale-selector__custom-content__custom-item'
         cursor: 'pointer',
 
         '&__color': {
-          width: '32px',
+          width: '18px',
           height: '18px',
         },
 
@@ -42,13 +42,6 @@ export default genStyleHook('rester-scale-selector__custom-content__custom-item'
       zIndex: 1,
     },
 
-    [`${componentCls}:hover`]: {
-      background: controlItemBgHover,
-      [`${componentCls}__drag-icon`]: {
-        opacity: 1,
-      },
-    },
-
     '.ant-popover': {
       zIndex: '4 !important',
       '.ant-color-picker-presets .ant-collapse-item .ant-collapse-header': {

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/style.ts

@@ -5,27 +5,10 @@ export default genStyleHook('rester-color-range-selector__custom-range', (token)
 
   return {
     [componentCls]: {
-      [`${componentCls}__selection-item`]: {
-        display: 'flex',
-        alignItems: 'center',
-        height: '10px',
-        margin: '5px 0',
-        overflow: 'hidden',
-        borderRadius: '4px',
-
-        [`${componentCls}__selection-item-color:nth-child(1)`]: {
-          borderTopLeftRadius: '4px',
-          borderBottomLeftRadius: '4px',
-        },
-        [`${componentCls}__selection-item-color:last-child`]: {
-          borderTopRightRadius: '4px',
-          borderBottomRightRadius: '4px',
-        },
-      },
-
       [`${componentCls}__add-range-item`]: {
         cursor: 'pointer',
         color: colorTextSecondary,
+        padding: '5px',
       },
 
       [`${componentCls}__btn`]: {

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/index.tsx

@@ -1,6 +1,6 @@
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { connect } from '@formily/react';
-import { Select } from 'antd';
+import { Divider, Select } from 'antd';
 import cls from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { DEHAULT_OPTIONS } from './constants';
@@ -89,13 +89,16 @@ const Internal = (props: ScaleSelectorProp) => {
             })}
 
             {selectedType !== 'quantize' && customMappingData && (
-              <CustomMappingColor
-                className={`${prefixCls}-customcontent`}
-                type={selectedType}
-                domain={domain}
-                value={customMappingData}
-                onChange={(ranges: CustomMappingData) => onValueChange(ranges)}
-              />
+              <>
+                <Divider style={{ margin: '10px 0' }} />
+                <CustomMappingColor
+                  className={`${prefixCls}-customcontent`}
+                  type={selectedType}
+                  domain={domain}
+                  value={customMappingData}
+                  onChange={(ranges: CustomMappingData) => onValueChange(ranges)}
+                />
+              </>
             )}
           </div>
         );

packages/li-p2/src/LayerAttribute/components/ResterScaleSelector/style.ts

@@ -5,18 +5,11 @@ export default genStyleHook('rester-scale-selector', (token) => {
 
   return {
     [`${componentCls}-dropdown`]: {
-      padding: '4px',
-
       [`${componentCls}-custom`]: {
-        padding: '5px 12px',
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
       },
-
-      [`${componentCls}-customcontent`]: {
-        padding: '5px 12px',
-      },
     },
 
     [`${componentCls}-select-option`]: {