pb-sxp-ui 1.15.23 → 1.15.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -10193,30 +10193,53 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
10193
10193
  const _a = style || {}, { lineClamp } = _a, textStyle = __rest(_a, ["lineClamp"]);
10194
10194
  const textLineClamp = Number(lineClamp || 2);
10195
10195
  const multiRow = useRef(null);
10196
- const observerRef = useRef();
10196
+ useRef();
10197
10197
  const handleClick = () => {
10198
10198
  setIsShowMore(!isShowMore);
10199
10199
  };
10200
10200
  const checkOverflow = useCallback(() => {
10201
- if (!multiRow.current || !isPost)
10201
+ if (!multiRow.current || !isPost || !text)
10202
10202
  return;
10203
- const lineHeight = parseInt(getComputedStyle(multiRow.current).lineHeight) || 20;
10204
- const maxHeight = lineHeight * textLineClamp;
10205
- // 添加1px容错,解决部分机型计算误差
10206
- setIsShow(multiRow.current.scrollHeight > maxHeight + 1);
10203
+ // 强制同步布局(消除浏览器优化导致的误差)
10204
+ const triggerReflow = (el) => el.offsetHeight;
10205
+ // 分三步精确测量
10206
+ requestAnimationFrame(() => {
10207
+ // 第一步:获取干净状态
10208
+ const el = multiRow.current;
10209
+ triggerReflow(el);
10210
+ // 第二步:测量无约束状态的真实高度
10211
+ const originalStyle = el.style.cssText;
10212
+ el.style.webkitLineClamp = 'unset';
10213
+ el.style.display = 'block';
10214
+ triggerReflow(el);
10215
+ const realHeight = el.getBoundingClientRect().height;
10216
+ // 第三步:恢复约束状态
10217
+ el.style.cssText = originalStyle;
10218
+ triggerReflow(el);
10219
+ const clampHeight = el.getBoundingClientRect().height;
10220
+ // 精准比较(考虑亚像素渲染)
10221
+ const isActuallyClamped = realHeight > clampHeight + 1;
10222
+ // 防抖处理
10223
+ console.log('[精确测量]', { realHeight, clampHeight, isActuallyClamped });
10224
+ setIsShow(isActuallyClamped);
10225
+ });
10207
10226
  }, [isPost, text, textLineClamp]);
10227
+ // 增强版监听(同时监听字体加载)
10208
10228
  useEffect(() => {
10209
- if (!multiRow.current)
10229
+ const el = multiRow.current;
10230
+ if (!el)
10210
10231
  return;
10211
- // 使用ResizeObserver监听尺寸变化
10212
- observerRef.current = new ResizeObserver(checkOverflow);
10213
- observerRef.current.observe(multiRow.current);
10214
- // 初始检查
10215
- checkOverflow();
10216
- return () => {
10217
- var _a;
10218
- (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
10232
+ const fontCheck = () => {
10233
+ document.fonts.ready.then(checkOverflow);
10219
10234
  };
10235
+ const observer = new ResizeObserver((entries) => {
10236
+ entries.forEach((entry) => {
10237
+ if (entry.contentBoxSize) ;
10238
+ });
10239
+ });
10240
+ fontCheck();
10241
+ observer.observe(el);
10242
+ return () => observer.disconnect();
10220
10243
  }, [checkOverflow]);
10221
10244
  return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, textStyle), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
10222
10245
  React.createElement("div", { ref: multiRow, style: Object.assign(Object.assign({}, (!isShowMore &&
@@ -10227,7 +10250,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
10227
10250
  overflow: 'hidden',
10228
10251
  display: '-webkit-box',
10229
10252
  WebkitBoxOrient: 'vertical'
10230
- })), { wordBreak: 'break-word' }), dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), textStyle) } }),
10253
+ })), { 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) } }),
10231
10254
  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: {
10232
10255
  __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', textStyle)
10233
10256
  } }))));