fix: page error when edit error

src/components/auto-tooltip/index.tsx

@@ -37,6 +37,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
 }) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [isOverflowing, setIsOverflowing] = useState(false);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
 
   const checkOverflow = useCallback(() => {
     if (contentRef.current) {
@@ -48,17 +49,20 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   useEffect(() => {
     const element = contentRef.current;
     if (!element) return;
-
-    const resizeObserver = new ResizeObserver(() => {
+    resizeObserver.current?.disconnect();
+    resizeObserver.current = new ResizeObserver(() => {
       checkOverflow();
     });
 
-    resizeObserver.observe(element);
+    resizeObserver.current?.observe(element);
 
     // Initial check
     checkOverflow();
 
-    return () => resizeObserver.disconnect();
+    return () => {
+      resizeObserver.current?.disconnect();
+      resizeObserver.current = null;
+    };
   }, [checkOverflow]);
 
   useEffect(() => {

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

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding-inline: 8px 12px;
+  // padding-inline: 2px 2px;
   height: 54px;
   border-width: var(--ant-line-width);
   border-style: var(--ant-line-type);
@@ -82,7 +82,7 @@
     position: relative;
     color: var(--ant-color-text-quaternary);
     font-size: 14px;
-    // padding-right: calc(var(--ant-padding-sm) - 1px);
+    padding-right: calc(var(--ant-padding-sm) - 1px);
   }
 }
 
@@ -90,7 +90,7 @@
   @wrapheight: 54px;
   @inputheight: 32px;
   @borderRadius: 8px;
-  @input-inner-padding: 6px;
+  @input-inner-padding: 14px;
   @bgColor: transparent;
 
   position: relative;
@@ -124,7 +124,7 @@
 
   .label {
     position: absolute;
-    left: 6px;
+    left: @input-inner-padding;
     color: rgba(0, 0, 0, 45%);
     font-size: var(--font-size-base);
     line-height: 1;
@@ -172,7 +172,14 @@
   }
 
   :global(.ant-select-selection-search) {
-    inset-inline-start: 8px !important;
+    inset-inline-start: @input-inner-padding;
+  }
+
+  :global(.ant-select-multiple.ant-select-lg) {
+    :global(.ant-select-selection-search) {
+      margin-inline-start: 0 !important;
+      left: 0 !important;
+    }
   }
 
   :global(.ant-select-selection-item) {
@@ -211,6 +218,7 @@
   :global(.ant-select-selection-search-input) {
     height: @inputheight !important;
   }
+
   // ==================== input ====================
 
   :global(.ant-input),

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

@@ -4,6 +4,7 @@ import type { CascaderAutoProps } from 'antd';
 import { Cascader, Form } from 'antd';
 import { cloneDeep } from 'lodash';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
 import Wrapper from './components/wrapper';
 import { SealFormItemProps } from './types';
 
@@ -24,6 +25,7 @@ const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
   const intl = useIntl();
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
+  const boxRef = useRef<any>(null);
   let status = '';
 
   // the status can be controlled by Form.Item
@@ -81,26 +83,30 @@ const SealCascader: React.FC<CascaderAutoProps & SealFormItemProps> = (
     props.onBlur?.(e);
   };
 
+  const Boxer = styled.div``;
+
   return (
-    <Wrapper
-      status={status}
-      label={label}
-      isFocus={isFocus}
-      required={required}
-      description={description}
-      disabled={props.disabled}
-      onClick={handleClickWrapper}
-    >
-      <Cascader
-        {...rest}
-        ref={inputRef}
-        options={children ? null : _options}
-        onFocus={handleOnFocus}
-        onBlur={handleOnBlur}
-        onChange={handleChange}
-        notFoundContent={null}
-      ></Cascader>
-    </Wrapper>
+    <>
+      <Wrapper
+        status={status}
+        label={label}
+        isFocus={isFocus}
+        required={required}
+        description={description}
+        disabled={props.disabled}
+        onClick={handleClickWrapper}
+      >
+        <Cascader
+          {...rest}
+          ref={inputRef}
+          options={children ? null : _options}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onChange={handleChange}
+          notFoundContent={null}
+        ></Cascader>
+      </Wrapper>
+    </>
   );
 };
 

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

@@ -19,6 +19,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     addAfter,
     checkStatus,
     trim = true,
+    loading,
     ...rest
   } = props;
   const [isFocus, setIsFocus] = useState(false);

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

@@ -22,6 +22,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
   const intl = useIntl();
   const [isFocus, setIsFocus] = useState(false);
   const inputRef = useRef<any>(null);
+  const boxRef = useRef<any>(null);
   let status = '';
 
   // the status can be controlled by Form.Item

src/components/tags-wrapper/index.tsx

@@ -31,9 +31,9 @@ const TagsWrapper: React.FC<TagsWrapperProps> = (props) => {
     if (!sizeList.length && childNodes?.length) {
       sizeList = _.map(childNodes, (node: HTMLDivElement, index: number) => {
         if (index === childNodes.length - 1) {
-          return node.offsetWidth;
+          return node?.offsetWidth;
         }
-        return node.offsetWidth + gap;
+        return node?.offsetWidth + gap;
       });
       nodeSizeList.current = sizeList;
     }