chore: images create

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

@@ -13,6 +13,10 @@
   border-radius: @borderRadius;
   background-color: var(--color-white-1);
 
+  &.seal-input-number {
+    padding-right: 0;
+  }
+
   &.borderless {
     border: none;
     box-shadow: none;
@@ -97,6 +101,12 @@
   padding-block: 20px 0;
   max-width: 100%;
 
+  &:hover {
+    :global(.ant-input-number-handler-wrap) {
+      width: 34px !important;
+    }
+  }
+
   &.no-wrapper-style {
     padding-block: 0;
   }
@@ -201,6 +211,7 @@
     height: @inputheight !important;
   }
   // ==================== input ====================
+
   :global(.ant-input),
   :global(.ant-input-password) {
     // width: 100%;
@@ -221,6 +232,7 @@
   }
 
   :global(.ant-input-number) {
+    position: static;
     display: flex;
     align-items: center;
     border: none;
@@ -228,6 +240,15 @@
     padding: 0;
     height: @inputheight !important;
     background-color: @bgColor;
+
+    &:hover .ant-input-number-handler-wrap,
+    &-focused .ant-input-number-handler-wrap {
+      width: 34px !important;
+    }
+
+    &:hover {
+      cursor: text;
+    }
   }
 
   :global(.ant-input-outlined) {
@@ -293,13 +314,7 @@
   }
 
   :global(.ant-input-number-handler-wrap) {
-    top: -20px;
+    top: 0;
     height: @wrapheight - 2px;
   }
-
-  // :global(.ant-input-prefix) {
-  //   position: absolute;
-  //   top: 1px;
-  //   left: -4px;
-  // }
 }

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

@@ -68,6 +68,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
       description={description}
       disabled={props.disabled}
       onClick={handleClickWrapper}
+      className="seal-input-number"
     >
       <InputNumber
         {...rest}

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

@@ -10,11 +10,12 @@ interface SystemMessageProps {
   value: string;
   placeholder?: string;
   label?: React.ReactNode;
+  height?: number;
   onChange: (e: any) => void;
 }
 
 const RowTextarea: React.FC<SystemMessageProps> = (props) => {
-  const { value, onChange, style, label, placeholder } = props;
+  const { value, onChange, style, label, placeholder, height = 46 } = props;
   const intl = useIntl();
   const rowTextAreaRef = React.useRef<any>(null);
   const [autoSize, setAutoSize] = useState<{
@@ -64,7 +65,7 @@ const RowTextarea: React.FC<SystemMessageProps> = (props) => {
           style={{ display: autoSize.focus ? 'block' : 'none' }}
           className="textarea-wrapper"
         >
-          <span className="textarea-label">{label}</span>
+          {label && <span className="textarea-label">{label}</span>}
           <Input.TextArea
             className="custome-scrollbar"
             ref={rowTextAreaRef}
@@ -87,8 +88,8 @@ const RowTextarea: React.FC<SystemMessageProps> = (props) => {
       }
       {!autoSize.focus && (
         <div className="content-wrap" onClick={handleFocus}>
-          <div className="content">
-            <span className="title">{label}</span>
+          <div className="content" style={{ height: height }}>
+            {label && <span className="title">{label}</span>}
             {value || (
               <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
                 {placeholder}

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

@@ -1,7 +1,9 @@
 import { isNotEmptyValue } from '@/utils/index';
+import { useIntl } from '@umijs/max';
 import type { SelectProps } from 'antd';
 import { Form, Select } from 'antd';
-import { useEffect, useRef, useState } from 'react';
+import { cloneDeep } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
@@ -12,9 +14,11 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
     children,
     required,
     description,
+    options,
     isInFormItems = true,
     ...rest
   } = props;
+  const intl = useIntl();
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
   let status = '';
@@ -23,6 +27,19 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
     status = statusData?.status || '';
   }
 
+  const _options = useMemo(() => {
+    if (!options?.length) {
+      return [];
+    }
+    const list = cloneDeep(options);
+    return list.map((item: any) => {
+      if (item.locale) {
+        item.label = intl.formatMessage({ id: item.label as string });
+      }
+      return item;
+    });
+  }, [options, intl]);
+
   useEffect(() => {
     if (isNotEmptyValue(props.value)) {
       setIsFocus(true);
@@ -70,6 +87,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
       <Select
         {...rest}
         ref={inputRef}
+        options={_options}
         onFocus={handleOnFocus}
         onBlur={handleOnBlur}
         onChange={handleChange}

src/components/seal-form/styles/row-textarea.less

@@ -2,7 +2,7 @@
   position: relative;
 
   &.focus {
-    padding-top: 9px;
+    // padding-top: 9px;
   }
 
   .content-wrap {
@@ -15,7 +15,7 @@
 
     &:hover {
       .clear-btn {
-        display: block;
+        display: flex;
       }
     }
   }
@@ -29,7 +29,8 @@
     display: none;
     position: absolute;
     right: 6px;
-    top: 6px;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
   .textarea-label {
@@ -41,8 +42,8 @@
   .content {
     flex: 1;
     width: 100px;
-    height: 40px;
-    line-height: 24px;
+    height: 46px;
+    line-height: 30px;
     padding: 8px 14px;
     padding-right: 4px;
     text-overflow: ellipsis;