chore: npu ux for add worker

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

@@ -107,4 +107,7 @@ export default {
   Password: SealPassword,
   Number: SealInputNumber,
   Search: SealInputSearch
-} as Record<string, React.FC<InputProps & SealFormItemProps>>;
+} as Record<
+  string,
+  React.FC<InputProps & SealFormItemProps & { scaleSize?: boolean }>
+>;

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

@@ -1,11 +1,28 @@
 import { Form, Input } from 'antd';
 import type { TextAreaProps } from 'antd/es/input/TextArea';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import styled from 'styled-components';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import InputWrapper from './wrapper/input';
 
-const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
+const LabelWrapper = styled.div`
+  background-color: var(--color-white-1);
+`;
+
+interface InputTextareaProps extends TextAreaProps {
+  scaleSize?: boolean;
+}
+
+const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (
+  props
+) => {
   const {
     label,
     placeholder,
@@ -21,6 +38,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     extra,
     addAfter,
     trim,
+    scaleSize,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -37,6 +55,16 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     }
   }, [props.value]);
 
+  const autoSize = useMemo(() => {
+    const focusRows = props.autoSize || { minRows: 2, maxRows: 5 };
+
+    if (scaleSize) {
+      return isFocus ? focusRows : { minRows: 1, maxRows: 1 };
+    }
+
+    return focusRows;
+  }, [props.autoSize, isFocus, scaleSize]);
+
   const handleClickWrapper = useCallback(() => {
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.({
@@ -68,7 +96,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
         onBlur?.(e);
       }
     },
-    [onBlur]
+    [onBlur, scaleSize]
   );
 
   const handleInput = useCallback(
@@ -82,7 +110,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     <InputWrapper>
       <Wrapper
         status={status}
-        label={label}
+        label={<LabelWrapper>{label}</LabelWrapper>}
         isFocus={isFocus}
         required={required}
         description={description}
@@ -94,7 +122,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       >
         <Input.TextArea
           {...rest}
-          autoSize={rest.autoSize || { minRows: 2, maxRows: 5 }}
+          autoSize={autoSize}
           ref={inputRef}
           style={{ minHeight: '80px', ...style }}
           className="seal-textarea"

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

@@ -143,7 +143,7 @@ export const Label = styled.div.attrs<{
   }
 
   &.blur-no-value {
-    top: 21px;
+    top: 20px;
     transition: all 0.2s var(--seal-transition-func);
   }
 

src/components/seal-form/wrapper/input.ts

@@ -126,7 +126,6 @@ const InputWrapper = styled.div`
   }
   .seal-textarea-wrapper {
     height: auto;
-    padding-bottom: 10px;
     padding-right: 10px;
   }
 `;