style: multiple selection tag

src/components/seal-form/hooks/use-select-render.tsx

@@ -1,20 +1,33 @@
 import AutoTooltip from '@/components/auto-tooltip';
+import React, { useMemo } from 'react';
 
 interface SelectRenderProps {
   maxTagWidth?: number;
+  radius?: number | string;
+  style?: React.CSSProperties;
+  filled?: boolean;
 }
 
 export default function useSelectRender(config?: SelectRenderProps) {
-  const { maxTagWidth = 100 } = config || {};
+  const { maxTagWidth = 100, radius, filled, style } = config || {};
   const TagRender = (props: any) => {
     const { label } = props;
+    const labelText = useMemo(() => {
+      if (!props.isMaxTag) {
+        return label;
+      }
+      return label.slice(0, -3);
+    }, [label, props.isMaxTag]);
     return (
       <AutoTooltip
         maxWidth={maxTagWidth}
         closable={props.closable}
         onClose={props.onClose}
+        radius={radius}
+        filled={filled}
+        style={style}
       >
-        {label}
+        {labelText}
       </AutoTooltip>
     );
   };

src/components/seal-form/seal-cascader.tsx

@@ -11,7 +11,7 @@ import SelectWrapper from './wrapper/select';
 
 const tag = (props: any) => {
   if (props.isMaxTag) {
-    return props.label;
+    return props.label?.slice(0, -3);
   }
   const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
   return `${parent} / ${props?.label}`;
@@ -24,6 +24,7 @@ const renderTag = (props: any) => {
       closable={props.closable}
       onClose={props.onClose}
       maxWidth={240}
+      filled
     >
       {tag(props)}
     </AutoTooltip>