fix: os image dropdown list

src/components/icon-font/icons.ts

@@ -43,6 +43,7 @@ const icons = {
   TencentCloud: React.createElement(IconFont, { type: 'icon-tencentcloud' }),
   Nvidia: React.createElement(IconFont, { type: 'icon-nvidia' }),
   Ascend: React.createElement(IconFont, { type: 'icon-ascend' }),
+  Catalog1: React.createElement(IconFont, { type: 'icon-catalog1' }),
   AMD: React.createElement(IconFont, { type: 'icon-amd' }),
   KubernetesFilled: React.createElement(IconFont, { type: 'icon-k8s-filled' })
 };

src/components/seal-form/auto-complete.tsx

@@ -1,10 +1,8 @@
 import { AutoComplete, Form, Spin } from 'antd';
 import type { AutoCompleteProps } from 'antd/lib';
-import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
-import AutoCompleteLabel from './wrapper/auto-complete-label';
 import SelectWrapper from './wrapper/select';
 
 const SealAutoComplete: React.FC<
@@ -26,7 +24,6 @@ const SealAutoComplete: React.FC<
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
-  const [_isFocus_, _setIsFocus_] = useState(false);
   const inputRef = useRef<any>(null);
   let status = '';
   if (isInFormItems) {
@@ -44,7 +41,6 @@ const SealAutoComplete: React.FC<
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.();
       setIsFocus(true);
-      _setIsFocus_(true);
     }
   };
 
@@ -53,20 +49,17 @@ const SealAutoComplete: React.FC<
     if (trim) {
       value = value?.trim?.();
     }
-    _setIsFocus_(false);
     props.onChange?.(value, option);
   };
 
   const handleOnFocus = (e: any) => {
     setIsFocus(true);
-    _setIsFocus_(true);
     props.onFocus?.(e);
   };
 
   const handleOnBlur = (e: any) => {
     if (!props.value) {
       setIsFocus(false);
-      _setIsFocus_(false);
     }
     e.target.value = e.target.value?.trim?.();
     props.onBlur?.(e);
@@ -86,39 +79,6 @@ const SealAutoComplete: React.FC<
     return addAfter;
   };
 
-  const renderAutoCompleteLabel = () => {
-    console.log(
-      'renderAutoCompleteLabel===',
-      props.value,
-      props.showSearch,
-      _isFocus_,
-      isFocus
-    );
-    if (!props.showSearch || _isFocus_) {
-      return null;
-    }
-    let selectItem: {
-      label: React.ReactNode;
-      value: string | number;
-    } = props.options?.find((item: any) => item.value === props.value) as {
-      label: React.ReactNode;
-      value: string | number;
-    };
-
-    if (!selectItem) {
-      selectItem = { label: props.value, value: props.value };
-    }
-    return (
-      <AutoCompleteLabel
-        className={classNames({
-          disabled: props.disabled
-        })}
-      >
-        {props.labelRender ? props.labelRender(selectItem) : selectItem.label}
-      </AutoCompleteLabel>
-    );
-  };
-
   return (
     <SelectWrapper style={style}>
       <Wrapper

src/pages/cluster-management/cluster-create.tsx

@@ -329,6 +329,7 @@ const ClusterCreate = () => {
       {currentStep === startStep && (
         <ProviderCatalog
           dataList={providerList}
+          height={80}
           onSelect={handleSelectProvider}
           clickable={true}
           current={extraData.provider}

src/pages/cluster-management/components/pool-form.tsx

@@ -425,7 +425,6 @@ const PoolForm: React.FC<AddModalProps> = forwardRef((props, ref) => {
               showSearch
               allowClear
               onChange={handleOsImageChange}
-              filterOption={filterImageOption}
               optionRender={(option) =>
                 RenderOption({
                   ...option,

src/pages/cluster-management/components/provider-catalog.tsx

@@ -36,6 +36,7 @@ interface ProviderCatalogProps {
   cols?: number;
   current?: ProviderType | string;
   clickable?: boolean;
+  height: string | number;
   dataList: {
     label: string;
     key: string;
@@ -52,6 +53,7 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
   cols = 3,
   dataList,
   clickable,
+  height,
   current
 }) => {
   const intl = useIntl();
@@ -77,7 +79,7 @@ const ProviderCatalog: React.FC<ProviderCatalogProps> = ({
           <Wrapper $cols={cols}>
             {items?.map((action) => (
               <Card
-                height="80px"
+                height={height}
                 key={action.key}
                 onClick={() => onSelect?.(action.key as string, action)}
                 active={current === action.key}

src/pages/cluster-management/components/support-gpus.tsx

@@ -112,6 +112,7 @@ const SupportedHardware: React.FC<SupportedHardwareProps> = ({
   return (
     <ProviderCatalog
       onSelect={onSelect}
+      height={60}
       current={current}
       dataList={supportedHardPlatforms}
       clickable={clickable}

src/pages/cluster-management/config/index.ts

@@ -160,7 +160,7 @@ export const clusterActionList = [
     label: 'resources.button.create',
     provider: ProviderValueMap.Docker,
     locale: true,
-    icon: icons.Docker
+    icon: icons.DockerOutlined
   },
   {
     key: 'register_cluster',
@@ -174,7 +174,7 @@ export const clusterActionList = [
     label: 'clusters.button.addNodePool',
     provider: ProviderValueMap.DigitalOcean,
     locale: true,
-    icon: icons.Catalog
+    icon: icons.Catalog1
   },
   {
     key: 'delete',