chore: catalog card style

src/components/icon-font/index.tsx

@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_trmdczqx9z.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_nlj2pbwi.js'
 });
 
 export default IconFont;

src/components/tags-wrapper/index.tsx

@@ -6,7 +6,8 @@ import './index.less';
 const TagsWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const wrapperRef = useRef<HTMLDivElement>(null);
   const observer = useRef<IntersectionObserver | null>(null);
-  const [hiddenIndex, setHiddenIndex] = useState<number>(0);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
+  const [hiddenIndex, setHiddenIndex] = useState<number>(4);
   const uid = useRef(0);
 
   const updateUid = () => {
@@ -17,55 +18,72 @@ const TagsWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const dropItems = useMemo(() => {
     return React.Children.toArray(children)
       .slice(hiddenIndex)
-      .map((child, index) => ({
+      .map((child) => ({
         label: child,
         key: updateUid()
       }));
   }, [children, hiddenIndex]);
 
+  const updateHiddenIndex = () => {
+    if (!wrapperRef.current || !observer.current) return;
+
+    const childrenList = Array.from(wrapperRef.current.children);
+    let newHiddenIndex = 0;
+
+    childrenList.forEach((child, index) => {
+      const rect = child.getBoundingClientRect();
+      // visible in wrapperRef
+      const issivible =
+        rect.top < wrapperRef.current!.clientHeight &&
+        rect.bottom > 0 &&
+        rect.left < wrapperRef.current!.clientWidth &&
+        rect.right > 0;
+
+      if (!issivible) {
+        newHiddenIndex = Math.max(newHiddenIndex, index + 1);
+      }
+    });
+
+    setHiddenIndex(newHiddenIndex);
+  };
+
   useEffect(() => {
     if (!wrapperRef.current) return;
 
-    observer.current = new IntersectionObserver(
-      (entries) => {
-        let newHiddenIndex = 0;
-        entries.forEach((entry, index) => {
-          if (entry.intersectionRatio < 1) {
-            newHiddenIndex = Math.min(newHiddenIndex, index);
-          }
-          console.log(
-            'isIntersecting=======',
-            entry.intersectionRatio,
-            newHiddenIndex
-          );
-        });
-        setHiddenIndex(() => newHiddenIndex);
-      },
-      {
-        root: wrapperRef.current,
-        threshold: 0
-      }
-    );
+    // observer.current = new IntersectionObserver(
+    //   (entries) => {
+    //     const lastEntry = entries[entries.length - 1];
+    //     if (lastEntry && lastEntry.intersectionRatio < 1) {
+    //       setHiddenIndex((prev) =>
+    //         Math.max(prev, React.Children.count(children))
+    //       );
+    //     }
+    //   },
+    //   { root: wrapperRef.current, threshold: 1 }
+    // );
 
-    const childrenList = wrapperRef.current.children;
-    Array.from(childrenList).forEach((child) => {
-      observer.current?.observe(child);
+    // const childrenList = wrapperRef.current.children;
+    // if (childrenList.length > 0) {
+    //   observer.current.observe(childrenList[childrenList.length - 1]);
+    // }
+
+    resizeObserver.current = new ResizeObserver(() => {
+      // updateHiddenIndex();
     });
+    resizeObserver.current.observe(wrapperRef.current);
 
     return () => {
       observer.current?.disconnect();
+      resizeObserver.current?.disconnect();
     };
   }, [children]);
 
   return (
     <div className="tags-wrapper" ref={wrapperRef}>
-      <span>{hiddenIndex}</span>
-      {React.Children.toArray(children).slice(
-        0,
-        React.Children.toArray(children).length - hiddenIndex
-      )}
-      {hiddenIndex > 0 && (
+      {React.Children.toArray(children).slice(0, hiddenIndex)}
+      {React.Children.toArray(children).length > 4 && (
         <Dropdown
+          trigger={['hover']}
           menu={{
             items: dropItems
           }}