fix(style): form field item

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

@@ -14,6 +14,9 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
     description,
     isInFormItems = true,
     onSelect,
+    extra,
+    style,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -64,11 +67,13 @@ const SealAutoComplete: React.FC<AutoCompleteProps & SealFormItemProps> = (
   return (
     <Wrapper
       status={status}
+      extra={extra}
       label={label || (placeholder as string)}
       isFocus={isFocus}
       required={required}
       description={description}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <AutoComplete

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

@@ -1,21 +1,16 @@
-:local(.wrapper) {
-  @wrapheight: 54px;
-  @inputheight: 32px;
+:local(.wrapper-box) {
   @borderRadius: 8px;
-  @input-inner-padding: 12px;
-  @bgColor: transparent;
 
   position: relative;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  justify-content: flex-start;
+  align-items: center;
+  padding-inline: 12px;
   height: 54px;
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
   border-color: var(--ant-color-border);
   border-radius: @borderRadius;
-  padding-inline: 12px;
-  padding-block: 20px 0;
   background-color: var(--color-white-1);
 
   &.filled {
@@ -33,13 +28,6 @@
     box-shadow: none;
   }
 
-  .extra {
-    position: absolute;
-    right: 12px;
-    top: 8px;
-    z-index: 10;
-  }
-
   &.seal-input-wrapper-disabled {
     background-color: var(--ant-color-bg-container-disabled);
     cursor: not-allowed;
@@ -86,13 +74,48 @@
     background-color: var(--ant-input-active-bg);
   }
 
+  .add-after {
+    position: relative;
+    color: var(--ant-color-text-quaternary);
+    font-size: 14px;
+    padding-right: calc(var(--ant-padding-sm) - 1px);
+  }
+}
+
+:local(.wrapper) {
+  @wrapheight: 54px;
+  @inputheight: 32px;
+  @borderRadius: 8px;
+  @input-inner-padding: 12px;
+  @bgColor: transparent;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+  padding-block: 20px 0;
+
+  .extra {
+    position: absolute;
+    right: 12px;
+    top: 8px;
+    z-index: 10;
+  }
+
+  .inner-wrapper {
+    width: 100%;
+  }
+
   .label {
     position: absolute;
-    left: 24px;
+    left: 12px;
     color: rgba(0, 0, 0, 45%);
     font-size: var(--font-size-base);
     line-height: 1;
     pointer-events: all;
+    display: flex;
+    width: max-content;
     z-index: 5;
 
     &.isfoucs-has-value {
@@ -116,6 +139,10 @@
     height: @inputheight !important;
   }
 
+  :global(.ant-input-number-input-wrap) {
+    flex: 1;
+  }
+
   :global(.ant-select-selector) {
     border: none !important;
     padding-block: 5px;
@@ -133,6 +160,7 @@
 
   :global(.ant-select-auto-complete) :global(.ant-select-selector) {
     padding-inline: 0 !important;
+    flex: 1;
   }
 
   :global(.ant-select-arrow) {
@@ -152,7 +180,8 @@
   // ==================== input ====================
   :global(.ant-input),
   :global(.ant-input-password) {
-    width: 100%;
+    // width: 100%;
+    flex: 1;
     display: flex;
     align-items: center;
     border: none;
@@ -164,7 +193,8 @@
   }
 
   :global(.ant-input.seal-textarea) {
-    width: 100%;
+    // width: 100%;
+    flex: 1;
   }
 
   :global(.ant-input-number) {
@@ -197,6 +227,7 @@
   }
 
   :global(input.ant-input-number-input) {
+    flex: 1;
     height: @inputheight !important;
     padding-block: 5px;
     padding-inline: @input-inner-padding;

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

@@ -12,6 +12,7 @@ interface WrapperProps {
   className?: string;
   disabled?: boolean;
   extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
   variant?: string;
   onClick?: () => void;
 }
@@ -27,35 +28,40 @@ const Wrapper: React.FC<WrapperProps> = ({
   required,
   extra,
   variant,
+  addAfter,
   onClick
 }) => {
   return (
     <div
       className={classNames(
-        wrapperStyle.wrapper,
+        wrapperStyle['wrapper-box'],
         wrapperStyle[`validate-status-${status}`],
+        addAfter ? wrapperStyle['seal-input-wrapper-addafter'] : '',
         disabled ? wrapperStyle['seal-input-wrapper-disabled'] : '',
         className ? wrapperStyle[className] : ''
       )}
-      onClick={onClick}
     >
-      <label
-        onClick={onClick}
-        className={classNames(
-          wrapperStyle['label'],
-          isFocus
-            ? wrapperStyle['isfoucs-has-value']
-            : wrapperStyle['blur-no-value']
-        )}
-      >
-        <LabelInfo
-          label={label}
-          required={required}
-          description={description}
-        ></LabelInfo>
-      </label>
-      {extra && <div className={wrapperStyle.extra}>{extra}</div>}
-      {children}
+      <div className={classNames(wrapperStyle.wrapper)} onClick={onClick}>
+        <label
+          onClick={onClick}
+          className={classNames(
+            wrapperStyle['label'],
+            isFocus
+              ? wrapperStyle['isfoucs-has-value']
+              : wrapperStyle['blur-no-value']
+          )}
+        >
+          <LabelInfo
+            label={label}
+            required={required}
+            description={description}
+          ></LabelInfo>
+        </label>
+        {extra && <div className={wrapperStyle.extra}>{extra}</div>}
+        <div className={wrapperStyle['inner-wrapper']}>{children}</div>
+      </div>
+
+      {addAfter && <div className={wrapperStyle['add-after']}>{addAfter}</div>}
     </div>
   );
 };

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

@@ -16,6 +16,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     description,
     isInFormItems = true,
     variant,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -71,6 +72,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
       required={required}
       description={description}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <Input

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

@@ -18,6 +18,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
     description,
     variant,
     extra,
+    addAfter,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
@@ -85,6 +86,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
       className="seal-textarea-wrapper"
       extra={extra}
       disabled={props.disabled}
+      addAfter={addAfter}
       onClick={handleClickWrapper}
     >
       <Input.TextArea

src/components/seal-form/types.ts

@@ -6,4 +6,5 @@ export interface SealFormItemProps {
   isInFormItems?: boolean;
   description?: React.ReactNode;
   extra?: React.ReactNode;
+  addAfter?: React.ReactNode;
 }