pb-sxp-ui 1.15.24 → 1.15.26

package/dist/index.js

@@ -10192,57 +10192,36 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
     const [isShow, setIsShow] = useState(false);
     const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
     const textLineClamp = Number(lineClamp || 2);
-    const multiRow = useRef(null);
-    useRef();
+    const realRef = useRef(null);
+    const clampRef = useRef(null);
+    const observerRef = useRef();
     const handleClick = () => {
         setIsShowMore(!isShowMore);
     };
     const checkOverflow = useCallback(() => {
-        if (!multiRow.current || !isPost || !text)
+        if (!realRef.current || !clampRef.current || !isPost || !text || isShowMore)
             return;
-        // 强制同步布局（消除浏览器优化导致的误差）
-        const triggerReflow = (el) => el.offsetHeight;
-        // 分三步精确测量
         requestAnimationFrame(() => {
-            // 第一步：获取干净状态
-            const el = multiRow.current;
-            triggerReflow(el);
-            // 第二步：测量无约束状态的真实高度
-            const originalStyle = el.style.cssText;
-            el.style.webkitLineClamp = 'unset';
-            el.style.display = 'block';
-            triggerReflow(el);
-            const realHeight = el.getBoundingClientRect().height;
-            // 第三步：恢复约束状态
-            el.style.cssText = originalStyle;
-            triggerReflow(el);
-            const clampHeight = el.getBoundingClientRect().height;
-            // 精准比较（考虑亚像素渲染）
+            const realHeight = realRef.current.getBoundingClientRect().height;
+            const clampHeight = clampRef.current.getBoundingClientRect().height;
             const isActuallyClamped = realHeight > clampHeight + 1;
-            // 防抖处理
-            console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
             setIsShow(isActuallyClamped);
         });
-    }, [isPost, text, textLineClamp]);
+    }, [isPost, text, isShowMore]);
     // 增强版监听（同时监听字体加载）
     useEffect(() => {
-        const el = multiRow.current;
-        if (!el)
+        if (!realRef.current)
             return;
-        const fontCheck = () => {
-            document.fonts.ready.then(checkOverflow);
+        observerRef.current = new ResizeObserver(checkOverflow);
+        observerRef.current.observe(realRef.current);
+        checkOverflow();
+        return () => {
+            var _a;
+            (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
         };
-        const observer = new ResizeObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.contentBoxSize) ;
-            });
-        });
-        fontCheck();
-        observer.observe(el);
-        return () => observer.disconnect();
     }, [checkOverflow]);
-    return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
-        React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
+    return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)', overflow: 'hidden', position: 'relative' }), hidden: !text || text === '' },
+        React.createElement("div", { ref: clampRef, style: Object.assign(Object.assign({}, (!isShowMore &&
                 isPost && {
                 WebkitLineClamp: textLineClamp,
                 lineClamp: textLineClamp,
@@ -10251,6 +10230,19 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
                 display: '-webkit-box',
                 WebkitBoxOrient: 'vertical'
             })), { wordBreak: 'break-word', textRendering: 'geometricPrecision', fontKerning: 'none', textSizeAdjust: '100%', boxSizing: 'border-box', contain: 'content' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
+        React.createElement("div", { ref: realRef, style: {
+                wordBreak: 'break-word',
+                textRendering: 'geometricPrecision',
+                fontKerning: 'none',
+                textSizeAdjust: '100%',
+                boxSizing: 'border-box',
+                contain: 'content',
+                visibility: 'hidden',
+                position: 'absolute',
+                opacity: 0,
+                clipPath: 'inset(100%)',
+                transform: 'translateX(-9999px)'
+            }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
         text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
                 __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
             } }))));