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

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

@@ -0,0 +1,37 @@
+import { InputNumber } from 'antd';
+import { isNumber } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+
+type ItemProps = {
+  size: 'small' | 'middle' | 'large';
+  value: [number];
+  min: number;
+  max: number;
+  onChange: (val: [number]) => void;
+};
+
+const InputCat = ({ size = 'middle', value, min, max, onChange }: ItemProps) => {
+  const [itemVal, setItemVal] = useState(value);
+
+  const onInputChange = (e: number) => {
+    onChange([e]);
+    setItemVal([e]);
+  };
+
+  useEffect(() => {
+    setItemVal(value);
+  }, [value]);
+
+  return (
+    <InputNumber
+      size={size}
+      min={min}
+      max={max}
+      value={itemVal?.[0]}
+      style={{ width: '100%' }}
+      onChange={(e) => isNumber(e) && onInputChange(e)}
+    />
+  );
+};
+
+export default InputCat;

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

@@ -4,7 +4,8 @@ import { ColorPicker } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import classnames from 'classnames';
 import React from 'react';
-import Item from './Item';
+import InputNumber from '../../../ScaleSelector/CustomMappingColors/CustomInput/InputNumber';
+import InputCat from './InputCat';
 import useStyle from './style';
 
 type RangeItemProps = {
@@ -28,7 +29,7 @@ const RangeItem = ({
   onDelete,
   onChange,
 }: RangeItemProps) => {
-  const prefixCls = usePrefixCls('formily-rester--scale-selector__custom-content__custom-item');
+  const prefixCls = usePrefixCls('formily-rester--scale-selector__custom-input');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const colorChange = (color: Color) => {
@@ -54,14 +55,20 @@ const RangeItem = ({
         </div>
 
         <div className={`${prefixCls}__infor__content`}>
-          <Item
-            type={customType}
-            value={defaultValue}
-            onChange={onValueChange}
-            min={min}
-            max={max}
-            position={position}
-          />
+          {customType === 'cat' && (
+            <InputCat size="small" min={min} max={max} value={defaultValue as [number]} onChange={onValueChange} />
+          )}
+
+          {customType === 'custom' && (
+            <InputNumber
+              size="small"
+              value={defaultValue as [number, number]}
+              min={min}
+              max={max}
+              position={position}
+              onChange={onValueChange}
+            />
+          )}
         </div>
 
         <div className={`${prefixCls}__infor__delete-icon`} onClick={onDelete}>

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

@@ -1,13 +1,13 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
-export default genStyleHook('rester-scale-selector__custom-content__custom-item', (token) => {
-  const { componentCls, antCls, colorInfoTextHover, controlItemBgHover } = token;
+export default genStyleHook('rester-scale-selector__custom-input', (token) => {
+  const { componentCls, antCls, colorInfoTextHover } = token;
 
   return {
     [componentCls]: {
       display: 'flex',
       alignItems: 'center',
-      padding: '3px 2px',
+      padding: '5px 0',
       borderRadius: '4px',
 
       [`${componentCls}__infor`]: {
@@ -18,14 +18,15 @@ export default genStyleHook('rester-scale-selector__custom-content__custom-item'
         cursor: 'pointer',
 
         '&__color': {
-          width: '32px',
+          width: '18px',
           height: '18px',
         },
 
         '&__content': {
           flex: 1,
           width: '100%',
           overflow: 'hidden',
+          margin: '0 3px',
         },
 
         '&__delete-icon': {
@@ -42,13 +43,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/index.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import React, { useEffect, useState } from 'react';
 import type { CustomMappingColorItem, CustomMappingData } from '../type';
-import CustomItem from './CustomItem';
+import CustomInput from './CustomInput';
 import useStyle from './style';
 
 type CustomMappingColorProps = {
@@ -165,7 +165,7 @@ const CustomMappingColor = (props: CustomMappingColorProps) => {
         const position = index === 0 ? 'first' : index === customRanges.length - 1 ? 'last' : null;
 
         return (
-          <CustomItem
+          <CustomInput
             customType={type}
             key={`drag_card${index}`}
             color={customItem.color}

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.md

@@ -9,7 +9,7 @@ nav:
   path: /components
 ---
 
-# 删格图层颜色划分组件
+# 栅格图层颜色划分组件
 
 ## 介绍
 

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`]: {