style: add worker ux

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

@@ -1,8 +1,10 @@
 import { AutoComplete, Form, Spin } from 'antd';
 import type { AutoCompleteProps } from 'antd/lib';
+import classNames from 'classnames';
 import React, { useEffect, useRef, useState } from 'react';
 import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
+import AutoCompleteLabel from './wrapper/auto-complete-label';
 import SelectWrapper from './wrapper/select';
 
 const SealAutoComplete: React.FC<
@@ -24,6 +26,7 @@ const SealAutoComplete: React.FC<
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);
+  const [_isFocus_, _setIsFocus_] = useState(false);
   const inputRef = useRef<any>(null);
   let status = '';
   if (isInFormItems) {
@@ -41,6 +44,7 @@ const SealAutoComplete: React.FC<
     if (!props.disabled && !isFocus) {
       inputRef.current?.focus?.();
       setIsFocus(true);
+      _setIsFocus_(true);
     }
   };
 
@@ -49,17 +53,20 @@ const SealAutoComplete: React.FC<
     if (trim) {
       value = value?.trim?.();
     }
+    _setIsFocus_(false);
     props.onChange?.(value, option);
   };
 
   const handleOnFocus = (e: any) => {
     setIsFocus(true);
+    _setIsFocus_(true);
     props.onFocus?.(e);
   };
 
   const handleOnBlur = (e: any) => {
     if (!props.value) {
       setIsFocus(false);
+      _setIsFocus_(false);
     }
     e.target.value = e.target.value?.trim?.();
     props.onBlur?.(e);
@@ -79,6 +86,39 @@ const SealAutoComplete: React.FC<
     return addAfter;
   };
 
+  const renderAutoCompleteLabel = () => {
+    console.log(
+      'renderAutoCompleteLabel===',
+      props.value,
+      props.showSearch,
+      _isFocus_,
+      isFocus
+    );
+    if (!props.showSearch || _isFocus_) {
+      return null;
+    }
+    let selectItem: {
+      label: React.ReactNode;
+      value: string | number;
+    } = props.options?.find((item: any) => item.value === props.value) as {
+      label: React.ReactNode;
+      value: string | number;
+    };
+
+    if (!selectItem) {
+      selectItem = { label: props.value, value: props.value };
+    }
+    return (
+      <AutoCompleteLabel
+        className={classNames({
+          disabled: props.disabled
+        })}
+      >
+        {props.labelRender ? props.labelRender(selectItem) : selectItem.label}
+      </AutoCompleteLabel>
+    );
+  };
+
   return (
     <SelectWrapper style={style}>
       <Wrapper

src/components/seal-form/wrapper/auto-complete-label.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { BGCOLOR, INPUT_INNER_PADDING } from '../config';
+
+const AutoCompleteLabel = styled.span`
+  position: absolute;
+  left: ${INPUT_INNER_PADDING}px;
+  height: 20px;
+  line-height: 20px;
+  top: 26px;
+  pointer-events: none;
+  transition: all 0.2s;
+  background-color: var(--ant-color-bg-container);
+  z-index: 10;
+  &.disabled {
+    background-color: #f5f5f5;
+  }
+  &.isfoucs-has-value {
+    // display: none;
+    z-index: -1;
+    // top: 9px;
+    // font-size: 12px;
+    // color: var(--ant-color-text);
+    // background-color: ${BGCOLOR};
+    // padding: 0 4px;
+  }
+`;
+
+export default AutoCompleteLabel;

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

@@ -103,7 +103,7 @@ const SelectWrapper = styled.div`
       }
       &.ant-select-auto-complete {
         .ant-select-selection-search {
-          inset-inline-start: ${INPUT_INNER_PADDING}px;
+          padding-inline-start: ${INPUT_INNER_PADDING}px;
         }
       }
       &.ant-select-multiple.ant-cascader .ant-select-selection-search {