feat: display provider models

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

@@ -3,6 +3,7 @@ import { isNotEmptyValue } from '@/utils/index';
 import { useIntl } from '@umijs/max';
 import type { CascaderAutoProps } from 'antd';
 import { Cascader, Empty, Form } from 'antd';
+import classNames from 'classnames';
 import _, { cloneDeep } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import AutoTooltip from '../auto-tooltip';
@@ -10,28 +11,6 @@ import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import SelectWrapper from './wrapper/select';
 
-const tag = (props: any) => {
-  if (props.isMaxTag) {
-    return props.label?.slice(0, -3);
-  }
-  const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
-  return `${parent} / ${props?.label}`;
-};
-
-const renderTag = (props: any) => {
-  return (
-    <AutoTooltip
-      closable={props.closable}
-      onClose={props.onClose}
-      maxWidth={240}
-      style={{ marginRight: 4 }}
-      filled
-    >
-      {tag(props)}
-    </AutoTooltip>
-  );
-};
-
 const OptionNodes = (props: {
   data: any;
   notFoundContent?: React.ReactNode;
@@ -100,7 +79,9 @@ const SealCascader: React.FC<
     alwaysFocus = false,
     optionNode,
     notFoundContent,
+    size = 'middle',
     tagRender,
+    displayRender,
     ...rest
   } = props;
   const intl = useIntl();
@@ -172,10 +153,34 @@ const SealCascader: React.FC<
     props.onOpenChange?.(open);
   };
 
+  const tag = (props: any) => {
+    if (props.isMaxTag) {
+      return props.label?.slice(0, -3);
+    }
+    const parent = _.split(props.value, '__RC_CASCADER_SPLIT__')?.[0];
+    return displayRender ? props.label : `${parent} / ${props?.label}`;
+  };
+
+  const renderTag = (props: any) => {
+    return (
+      <AutoTooltip
+        closable={props.closable}
+        onClose={props.onClose}
+        maxWidth={240}
+        style={{ marginRight: 4 }}
+        filled
+      >
+        {tag(props)}
+      </AutoTooltip>
+    );
+  };
+
   return (
     <SelectWrapper>
       <Wrapper
-        className="seal-select-wrapper"
+        className={classNames('seal-select-wrapper', {
+          'seal-cascader-wrapper-small': size === 'small'
+        })}
         classList={visible ? 'dropdown-visible' : ''}
         status={status}
         label={label}
@@ -188,6 +193,7 @@ const SealCascader: React.FC<
         <Cascader
           {...rest}
           placeholder={placeholder}
+          className={size === 'small' ? 'seal-cascader-small' : ''}
           suffixIcon={<IconFont type="icon-down"></IconFont>}
           optionRender={(data) => (
             <OptionNodes
@@ -196,7 +202,8 @@ const SealCascader: React.FC<
               optionNode={optionNode}
             ></OptionNodes>
           )}
-          tagRender={tagRender ?? renderTag}
+          tagRender={tagRender || renderTag}
+          displayRender={displayRender}
           ref={inputRef}
           options={children ? null : _options}
           onFocus={handleOnFocus}

src/components/seal-form/simple-select.tsx

@@ -179,8 +179,8 @@ const SimpleSelect: React.FC<SelectProps & { ref?: any; showTags?: boolean }> =
           closable={props.closable}
           onClose={props.onClose}
           style={{
-            height: 24,
-            backgroundColor: 'var(--ant-color-fill-tertiary)',
+            height: 22,
+            backgroundColor: 'var(--ant-color-fill-secondary)',
             fontSize: 'var(--ant-font-size)'
           }}
           className="flex-center"

src/components/seal-form/wrapper/select.ts

@@ -146,6 +146,9 @@ const SelectWrapper = styled.div`
           margin-inline-start: 0 !important;
         }
       }
+      &.seal-cascader-small {
+        height: 40px;
+      }
 
       .ant-select-input {
         height: ${INPUTHEIGHT}px !important;
@@ -190,6 +193,21 @@ const SelectWrapper = styled.div`
         }
       }
     }
+    &.seal-cascader-wrapper-small {
+      height: 40px;
+      .cascader-popup-wrapper {
+        top: 39px !important;
+      }
+      .ant-select-input {
+        height: 36px !important;
+      }
+      .ant-select {
+        padding-inline: 12px !important;
+      }
+      .__wrapper__.no-label .ant-select.ant-cascader .ant-select-placeholder {
+        top: 50% !important;
+      }
+    }
   }
 `;