chore: model list ux

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

@@ -0,0 +1,86 @@
+import { AutoComplete, Form } from 'antd';
+import type { AutoCompleteProps } from 'antd/lib';
+import { useEffect, useRef, useState } from 'react';
+import Wrapper from './components/wrapper';
+import { SealFormItemProps } from './types';
+
+const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
+  props
+) => {
+  const {
+    label,
+    placeholder,
+    required,
+    description,
+    isInFormItems = true,
+    ...rest
+  } = props;
+  const [isFocus, setIsFocus] = useState(false);
+  const inputRef = useRef<any>(null);
+  let status = '';
+  if (isInFormItems) {
+    const statusData = Form?.Item?.useStatus?.();
+    status = statusData?.status || '';
+  }
+
+  useEffect(() => {
+    if (props.value) {
+      setIsFocus(true);
+    }
+  }, [props.value]);
+
+  const handleClickWrapper = () => {
+    if (!props.disabled && !isFocus) {
+      inputRef.current?.focus?.();
+      setIsFocus(true);
+    }
+  };
+
+  const handleChange = (value: string, option: any) => {
+    props.onChange?.(value, option);
+  };
+
+  const handleOnFocus = (e: any) => {
+    setIsFocus(true);
+    props.onFocus?.(e);
+  };
+
+  const handleOnBlur = (e: any) => {
+    if (!props.value) {
+      setIsFocus(false);
+      props.onBlur?.(e);
+    }
+  };
+
+  const handleSearch = (text: string) => {
+    props.onSearch?.(text);
+  };
+
+  const handleOnSelect = (value: any, option: any) => {
+    props.onSelect?.(value, option);
+  };
+
+  return (
+    <Wrapper
+      status={status}
+      label={label || (placeholder as string)}
+      isFocus={isFocus}
+      required={required}
+      description={description}
+      disabled={props.disabled}
+      onClick={handleClickWrapper}
+    >
+      <AutoComplete
+        {...rest}
+        ref={inputRef}
+        onSelect={handleOnSelect}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        onSearch={handleSearch}
+        onChange={handleChange}
+      ></AutoComplete>
+    </Wrapper>
+  );
+};
+
+export default SealAutoComplete;

src/components/seal-form/components/label-info.tsx

@@ -5,7 +5,7 @@ import './label-info.less';
 
 interface NoteInfoProps {
   required?: boolean;
-  label: string;
+  label: React.ReactNode;
   description?: React.ReactNode;
 }
 const NoteInfo: React.FC<NoteInfoProps> = (props) => {

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

@@ -4,7 +4,7 @@ import LabelInfo from './label-info';
 import wrapperStyle from './wrapper.less';
 interface WrapperProps {
   children: React.ReactNode;
-  label: string;
+  label: React.ReactNode;
   isFocus: boolean;
   status?: string;
   required?: boolean;

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

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
+import React from 'react';
 import LabelInfo from './components/label-info';
 import wrapperStyle from './components/wrapper.less';
 interface WrapperProps {
   children: React.ReactNode;
-  label: string;
+  label: React.ReactNode;
   status?: string;
   className?: string;
   disabled?: boolean;

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

@@ -64,10 +64,6 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
 
   const handleOnBlur = useCallback(
     (e: any) => {
-      console.log(
-        'inputRef.current==========',
-        inputRef.current?.resizableTextArea?.textArea?.value
-      );
       if (!inputRef.current?.resizableTextArea?.textArea?.value) {
         setIsFocus(false);
         onBlur?.(e);