feat: models list

src/components/page-tools/index.less

@@ -0,0 +1,6 @@
+.page-tools {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 70px;
+}

src/components/page-tools/index.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from 'react';
+import styles from './index.less';
+
+type PageToolsProps = {
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  marginBottom?: number;
+  marginTop?: number;
+};
+
+const PageTools: React.FC<PageToolsProps> = (props) => {
+  const { left, right, marginBottom, marginTop } = props;
+
+  const newStyle: Record<string, string> = useMemo(() => {
+    const style: Record<string, string> = {};
+    if (marginBottom) {
+      style.marginBottom = `${marginBottom}px`;
+    }
+    if (marginTop) {
+      style.marginTop = `${marginTop}px`;
+    }
+    return style;
+  }, [marginBottom, marginTop]);
+
+  return (
+    <div className={styles['page-tools']} style={newStyle}>
+      <div className="left">{left}</div>
+      <div className="right">{right}</div>
+    </div>
+  );
+};
+
+export default PageTools;

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

@@ -18,6 +18,10 @@
     cursor: not-allowed;
     &:hover {
       border-color: var(--ant-color-border);
+      :global(.ant-input-search-button) {
+        border-color: var(--ant-color-border) !important;
+        color: var(--ant-color-text-description) !important;
+      }
     }
   }
 
@@ -70,7 +74,7 @@
     align-items: center;
     border: none;
     box-shadow: none;
-    height: @inputheight;
+    height: @inputheight !important;
   }
   :global(.ant-select-selector) {
     border: none !important;
@@ -79,7 +83,7 @@
     box-shadow: none !important;
   }
   :global(.ant-select-selection-item) {
-    height: @inputheight;
+    height: @inputheight !important;
   }
   :global(
       .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
@@ -96,7 +100,7 @@
     box-shadow: none;
     padding-block: 5px;
     padding-inline: 12px;
-    height: @inputheight;
+    height: @inputheight !important;
   }
   :global(.ant-input-number) {
     display: flex;
@@ -104,7 +108,7 @@
     border: none;
     box-shadow: none;
     padding: 0;
-    height: @inputheight;
+    height: @inputheight !important;
   }
   :global(.ant-input-outlined) {
     &.seal-textarea {
@@ -115,7 +119,7 @@
     background-color: transparent;
   }
   :global(input.ant-input-number-input) {
-    height: @inputheight;
+    height: @inputheight !important;
     padding-block: 5px;
     padding-inline: 12px;
   }
@@ -148,6 +152,7 @@
     border-left: var(--ant-line-width) var(--ant-line-type)
       var(--ant-color-border);
   }
+
   :global(.ant-input-number-handler-wrap) {
     top: -20px;
     height: @wrapheight - 2px;

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

@@ -56,10 +56,11 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
       <InputNumber
         {...rest}
         ref={inputRef}
+        autoComplete="off"
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
         onInput={handleInput}
-        onChange={(e) => handleChange(e)}
+        onChange={handleChange}
       ></InputNumber>
     </Wrapper>
   );

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

@@ -65,10 +65,11 @@ const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
       <Input.Search
         {...rest}
         ref={inputRef}
+        autoComplete="off"
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
         onSearch={handleSearch}
-        onChange={(e) => handleChange(e)}
+        onChange={handleChange}
       ></Input.Search>
     </Wrapper>
   );

src/components/seal-form/password.tsx

@@ -50,9 +50,10 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
       <Input.Password
         {...rest}
         ref={inputRef}
+        autoComplete="off"
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
-        onChange={(e) => handleChange(e)}
+        onChange={handleChange}
       ></Input.Password>
     </Wrapper>
   );

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

@@ -1,7 +1,7 @@
 import type { InputProps } from 'antd';
 import { Form, Input } from 'antd';
 import type { TextAreaProps } from 'antd/es/input/TextArea';
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Wrapper from './components/wrapper';
 import SealInputNumber from './input-number';
 import SealInputSearch from './input-search';
@@ -9,7 +9,16 @@ import SealPassword from './password';
 import { SealFormItemProps } from './types';
 
 const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
-  const { label, placeholder, style, ...rest } = props;
+  const {
+    label,
+    placeholder,
+    onChange,
+    onFocus,
+    onBlur,
+    onInput,
+    style,
+    ...rest
+  } = props;
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
   const { status } = Form.Item.useStatus();
@@ -20,32 +29,44 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     }
   }, [props.value]);
 
-  const handleClickWrapper = () => {
+  const handleClickWrapper = useCallback(() => {
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.();
       setIsFocus(true);
     }
-  };
+  }, [props.disabled, isFocus]);
 
-  const handleChange = (e: any) => {
-    props.onChange?.(e);
-  };
+  const handleChange = useCallback(
+    (e: any) => {
+      onChange?.(e);
+    },
+    [onChange]
+  );
 
-  const handleOnFocus = (e: any) => {
-    setIsFocus(true);
-    props.onFocus?.(e);
-  };
+  const handleOnFocus = useCallback(
+    (e: any) => {
+      setIsFocus(true);
+      onFocus?.(e);
+    },
+    [onFocus]
+  );
 
-  const handleOnBlur = (e: any) => {
-    if (!inputRef.current?.input?.value) {
-      setIsFocus(false);
-      props.onBlur?.(e);
-    }
-  };
+  const handleOnBlur = useCallback(
+    (e: any) => {
+      if (!inputRef.current?.input?.value) {
+        setIsFocus(false);
+        onBlur?.(e);
+      }
+    },
+    [onBlur]
+  );
 
-  const handleInput = (e: any) => {
-    props.onInput?.(e);
-  };
+  const handleInput = useCallback(
+    (e: any) => {
+      onInput?.(e);
+    },
+    [onInput]
+  );
 
   return (
     <Wrapper
@@ -120,10 +141,11 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
       <Input
         {...rest}
         ref={inputRef}
+        autoComplete="off"
         onInput={handleInput}
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
-        onChange={(e) => handleChange(e)}
+        onChange={handleChange}
       ></Input>
     </Wrapper>
   );

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

@@ -60,7 +60,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
         onSearch={handleOnSearch}
-        onChange={(val, options) => handleChange(val, options)}
+        onChange={handleChange}
       >
         {children}
       </Select>