style: gpuselector dropdown style

src/components/seal-form/components/wrapper.less

@@ -17,6 +17,47 @@
     border: none;
     box-shadow: none;
 
+    &.dropdown-visible {
+      :local(.wrapper) {
+        :global(.ant-select-selector) {
+          border-bottom: none !important;
+          border-radius: @borderRadius @borderRadius 0 0;
+          transition: all 0.2s ease;
+
+          &::before {
+            content: '';
+            position: absolute;
+            height: 1px;
+            margin-inline: 1px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: var(--ant-color-split);
+          }
+        }
+
+        :global(.ant-select-dropdown) {
+          box-shadow: none;
+          border-width: var(--ant-line-width);
+          border-style: var(--ant-line-type);
+          border-color: var(--ant-input-active-border-color);
+          border-top: none;
+        }
+
+        &:hover {
+          :global(.ant-select-dropdown) {
+            border-color: var(--ant-input-active-border-color);
+          }
+        }
+
+        &:focus-within {
+          border-color: var(--ant-input-active-border-color) !important;
+          outline: 0;
+          background-color: var(--ant-input-active-bg);
+        }
+      }
+    }
+
     &:focus-within {
       border: none;
       box-shadow: none;
@@ -64,6 +105,12 @@
           border-color: var(--ant-color-error) !important;
         }
       }
+
+      &.dropdown-visible {
+        :global(.ant-select-dropdown) {
+          border-color: var(--ant-color-error) !important;
+        }
+      }
     }
   }
 
@@ -208,6 +255,15 @@
     display: flex;
     align-items: center;
     height: 54px;
+
+    :global(.ant-select-selection-search) {
+      top: 20px !important;
+      inset-inline-start: @input-inner-padding;
+    }
+  }
+
+  :global(.ant-select.ant-cascader .ant-select-selection-search) {
+    top: 0 !important;
   }
 
   :global(.ant-input-number-input-wrap) {
@@ -217,10 +273,10 @@
   :global(.ant-select-selector) {
     flex: 1;
     padding-inline: @input-inner-padding !important;
-    border-width: var(--ant-line-width) !important;
-    border-style: var(--ant-line-type) !important;
-    border-color: var(--ant-color-border) !important;
-    border-radius: @borderRadius !important;
+    border-width: var(--ant-line-width);
+    border-style: var(--ant-line-type);
+    border-color: var(--ant-color-border);
+    border-radius: @borderRadius;
     height: 54px !important;
     padding-block: 20px 0 !important;
     box-shadow: none !important;
@@ -237,11 +293,6 @@
     }
   }
 
-  :global(.ant-select-selection-search) {
-    top: 20px !important;
-    inset-inline-start: @input-inner-padding;
-  }
-
   :global(.ant-select-multiple.ant-select-lg) {
     :global(.ant-select-selection-search) {
       margin-inline-start: 0 !important;

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

@@ -16,6 +16,7 @@ interface WrapperProps {
   addAfter?: React.ReactNode;
   variant?: string;
   hasPrefix?: boolean;
+  classList?: string;
   onClick?: () => void;
 }
 
@@ -33,18 +34,20 @@ const Wrapper: React.FC<WrapperProps> = ({
   addAfter,
   hasPrefix,
   noWrapperStyle,
+  classList,
   onClick
 }) => {
   return (
     <div
       className={classNames(
-        className,
+        classList,
         wrapperStyle['wrapper-box'],
         'field-wrapper',
         wrapperStyle[`validate-status-${status}`],
         addAfter ? wrapperStyle['seal-input-wrapper-addafter'] : '',
         disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
         className ? wrapperStyle[className] : '',
+        classList ? wrapperStyle[classList] : '',
         variant ? wrapperStyle[variant] : ''
       )}
     >

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

@@ -4,7 +4,6 @@ import type { CascaderAutoProps } from 'antd';
 import { Cascader, Form } from 'antd';
 import { cloneDeep } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
 import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
@@ -25,7 +24,7 @@ const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
   const intl = useIntl();
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
-  const boxRef = useRef<any>(null);
+  const [visible, setVisible] = useState(false);
   let status = '';
 
   // the status can be controlled by Form.Item
@@ -83,11 +82,14 @@ const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
     props.onBlur?.(e);
   };
 
-  const Boxer = styled.div``;
+  const handleDropdownVisibleChange = (open: boolean) => {
+    setVisible(open);
+  };
 
   return (
     <Wrapper
       className="seal-select-wrapper"
+      classList={visible ? 'dropdown-visible' : ''}
       status={status}
       label={label}
       isFocus={isFocus}
@@ -104,6 +106,7 @@ const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
         onBlur={handleOnBlur}
         onChange={handleChange}
         notFoundContent={null}
+        onDropdownVisibleChange={handleDropdownVisibleChange}
       ></Cascader>
     </Wrapper>
   );

src/components/seal-form/styles/cascader.less

@@ -0,0 +1,5 @@
+:local(.dropdown-visible) {
+  :local(.ant-select-selector) {
+    border-bottom: 0 !important;
+  }
+}