feat: depoly model advanced

src/components/auto-tooltip/index.tsx

@@ -0,0 +1,79 @@
+import { Tag, Tooltip } from 'antd';
+import debounce from 'lodash/debounce';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+
+interface AutoTooltipProps extends React.ComponentProps<typeof Tag> {
+  children: React.ReactNode;
+  maxWidth?: number | string;
+  color?: string;
+  style?: React.CSSProperties;
+  ghost?: boolean;
+}
+
+const AutoTooltip: React.FC<AutoTooltipProps> = ({
+  children,
+  maxWidth = '100%',
+  ghost = false,
+  ...tagProps
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  const checkOverflow = useCallback(() => {
+    if (contentRef.current) {
+      const { scrollWidth, clientWidth } = contentRef.current;
+      setIsOverflowing(scrollWidth > clientWidth);
+    }
+  }, []);
+
+  const debouncedCheckOverflow = useMemo(
+    () => debounce(checkOverflow, 200),
+    [checkOverflow]
+  );
+
+  useEffect(() => {
+    checkOverflow();
+    window.addEventListener('resize', debouncedCheckOverflow);
+    return () => {
+      window.removeEventListener('resize', debouncedCheckOverflow);
+      debouncedCheckOverflow.cancel();
+    };
+  }, [checkOverflow, debouncedCheckOverflow]);
+
+  useEffect(() => {
+    checkOverflow();
+  }, [children, checkOverflow]);
+
+  const tagStyle = useMemo(
+    () => ({
+      maxWidth,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap' as const,
+      ...tagProps.style
+    }),
+    [maxWidth, tagProps.style]
+  );
+
+  return (
+    <Tooltip title={isOverflowing ? children : ''}>
+      {ghost ? (
+        <div ref={contentRef} style={tagStyle}>
+          {children}
+        </div>
+      ) : (
+        <Tag {...tagProps} ref={contentRef} style={tagStyle}>
+          {children}
+        </Tag>
+      )}
+    </Tooltip>
+  );
+};
+
+export default React.memo(AutoTooltip);