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;
+  }
+}

src/global.less

@@ -797,8 +797,18 @@ body {
   background-color: var(--ant-select-option-selected-bg) !important;
 }
 
+.ant-cascader-dropdown .ant-cascader-menu {
+  flex-grow: unset;
+}
+
 .cascader-popup-wrapper {
-  // width: 100%;
+  width: 100%;
+  border: 1px solid var(--ant-color-border);
+  inset: 54px auto auto 0 !important;
+  border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
+  border-top: none;
+  max-height: 240px;
+  min-height: 100px;
 
   &.gpu-selector {
     .ant-cascader-menu:last-child {

src/locales/en-US/common.ts

@@ -226,5 +226,6 @@ export default {
   'common.button.delrecreate': 'Delete (Recreate)',
   'common.options.all': 'All',
   'common.options.none': 'None',
-  'common.options.auto': 'Auto'
+  'common.options.auto': 'Auto',
+  'common.search.empty': 'No matching results found.'
 };

src/locales/zh-CN/common.ts

@@ -219,5 +219,6 @@ export default {
   'common.button.delrecreate': '删除（重建）',
   'common.options.all': '全部',
   'common.options.none': '无',
-  'common.options.auto': '自动'
+  'common.options.auto': '自动',
+  'common.search.empty': '未找到匹配结果'
 };

src/pages/llmodels/components/advance-config.tsx

@@ -11,6 +11,7 @@ import { useIntl } from '@umijs/max';
 import {
   Checkbox,
   Collapse,
+  Empty,
   Form,
   FormInstance,
   Tooltip,
@@ -145,6 +146,23 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   };
 
   const gpuOptionRender = (data: any) => {
+    if (data.value === '__EMPTY__') {
+      return (
+        <Empty
+          image={false}
+          style={{
+            height: 100,
+            alignSelf: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+          description={intl.formatMessage({
+            id: 'common.search.empty'
+          })}
+        ></Empty>
+      );
+    }
     let width: any = {
       maxWidth: 140,
       minWidth: 140
@@ -275,6 +293,8 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             >
               <SealCascader
                 required
+                showSearch
+                expandTrigger="hover"
                 onChange={handleGPUSelectorChange}
                 multiple={backend !== backendOptionsMap.voxBox}
                 popupClassName="cascader-popup-wrapper gpu-selector"