one-design-next 0.0.67 → 0.0.68

package/dist/chat-item/index.js

@@ -1,10 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react';
-import HoverFill from "../hover-fill";
-import Icon from "../icon";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import Dialog from "../dialog";
 import Dropdown from "../dropdown";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
 import { formatRelativeTime } from "./relative-time";
 import "./style";
 var STATUS_ARIA_LABEL = {
@@ -15,9 +15,15 @@ var STATUS_ARIA_LABEL = {
 };
 var ELLIPSIS = '…';
 
+/** 可用宽度变化小于该值时跳过重算（与二分容差同量级） */
+var FIT_WIDTH_EPS = 0.5;
+
 /**
  * 有 trailing（客服 icon / status / 时间）时，用 DOM 实测把标题裁到可用宽度。
  * 解决 CSS text-overflow 按字符边界截断后，省略号右侧留白把 trailing 顶开的问题。
+ *
+ * 性能：只监听整行（btn）宽度；RO 回调经 rAF 合并（每行每帧最多 fit 一次）；
+ * 缓存 maxWidth / trailingWidth / 裁切结果，宽度几乎不变或结果不变则跳过更新。
  */
 function useFittedTitle(title, enabled, labelRef, titleRef, /** 右对齐区（状态 / 时间），量宽预留 */
 trailingRef, /** 紧跟标题的类型 icon，量宽预留 */
@@ -27,7 +33,7 @@ typeIconRef) {
     fitted = _useState2[0],
     setFitted = _useState2[1];
   useLayoutEffect(function () {
-    var _document$fonts;
+    var _document$fonts, _label$closest;
     if (!enabled) {
       setFitted(title);
       return;
@@ -36,6 +42,10 @@ typeIconRef) {
     var titleEl = titleRef.current;
     if (!label || !titleEl) return;
     var cancelled = false;
+    var rafId = 0;
+    var lastMaxWidth = Number.NaN;
+    var lastTrailingWidth = Number.NaN;
+    var lastFitted = '';
     var probe = document.createElement('span');
     probe.setAttribute('aria-hidden', 'true');
     probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;left:-9999px;top:0;';
@@ -67,39 +77,53 @@ typeIconRef) {
       // 标题两侧可能各有一段 gap：title↔type、type/title↔trailing
       var gapCount = (typeWidth > 0 ? 1 : 0) + (trailingWidth > 0 ? 1 : 0);
       var maxWidth = Math.max(0, label.getBoundingClientRect().width - trailingWidth - typeWidth - gap * gapCount);
-      if (measure(title) <= maxWidth + 0.5) {
-        setFitted(title);
+      if (Number.isFinite(lastMaxWidth) && Math.abs(maxWidth - lastMaxWidth) < FIT_WIDTH_EPS && Math.abs(trailingWidth - lastTrailingWidth) < FIT_WIDTH_EPS) {
         return;
       }
-      var lo = 0;
-      var hi = title.length;
-      var best = ELLIPSIS;
-      while (lo <= hi) {
-        var mid = lo + hi >> 1;
-        var candidate = "".concat(title.slice(0, mid)).concat(ELLIPSIS);
-        if (measure(candidate) <= maxWidth + 0.5) {
-          best = candidate;
-          lo = mid + 1;
-        } else {
-          hi = mid - 1;
+      lastMaxWidth = maxWidth;
+      lastTrailingWidth = trailingWidth;
+      var next = title;
+      if (measure(title) > maxWidth + FIT_WIDTH_EPS) {
+        var lo = 0;
+        var hi = title.length;
+        next = ELLIPSIS;
+        while (lo <= hi) {
+          var mid = lo + hi >> 1;
+          var candidate = "".concat(title.slice(0, mid)).concat(ELLIPSIS);
+          if (measure(candidate) <= maxWidth + FIT_WIDTH_EPS) {
+            next = candidate;
+            lo = mid + 1;
+          } else {
+            hi = mid - 1;
+          }
         }
       }
-      setFitted(best);
+      if (next === lastFitted) return;
+      lastFitted = next;
+      setFitted(next);
+    };
+    var scheduleFit = function scheduleFit() {
+      if (cancelled || rafId) return;
+      rafId = window.requestAnimationFrame(function () {
+        rafId = 0;
+        fit();
+      });
     };
+
+    // 首屏同步裁切，避免首帧闪全标题；后续宽度变化走 rAF 合并
     fit();
     void ((_document$fonts = document.fonts) === null || _document$fonts === void 0 ? void 0 : _document$fonts.ready.then(function () {
-      if (!cancelled) fit();
+      if (cancelled) return;
+      // 字体就绪后字形宽度可能变，需绕过 maxWidth 缓存强制重测
+      lastMaxWidth = Number.NaN;
+      scheduleFit();
     }));
-    var ro = new ResizeObserver(fit);
-    ro.observe(label);
-    var trailing = trailingRef.current;
-    if (trailing) ro.observe(trailing);
-    var typeIcon = typeIconRef.current;
-    if (typeIcon) ro.observe(typeIcon);
-    var btn = label.closest('[data-odn-chat-item-btn]');
-    if (btn) ro.observe(btn);
+    var row = (_label$closest = label.closest('[data-odn-chat-item-btn]')) !== null && _label$closest !== void 0 ? _label$closest : label;
+    var ro = new ResizeObserver(scheduleFit);
+    ro.observe(row);
     return function () {
       cancelled = true;
+      if (rafId) window.cancelAnimationFrame(rafId);
       ro.disconnect();
       probe.remove();
     };
@@ -219,7 +243,7 @@ export function ChatItem(_ref2) {
   var showStatus = Boolean(status && (!active || status === 'generating' || status === 'waiting'));
   var showTypeIcon = type === 'human';
   var timeLabel = useMemo(function () {
-    return time == null ? '' : formatRelativeTime(time, now);
+    return time === null || time === undefined ? '' : formatRelativeTime(time, now);
   }, [time, now]);
   var showTime = Boolean(timeLabel);
   var showTrailing = showStatus || showTime;
@@ -240,7 +264,7 @@ export function ChatItem(_ref2) {
 
   // 相对时间每分钟刷新一次（有 time 时）
   useEffect(function () {
-    if (time == null) return;
+    if (time === null || time === undefined) return;
     var id = window.setInterval(function () {
       return setNow(Date.now());
     }, 60000);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "description": "One Design Next from TAD@tencent.com",
   "license": "MIT",
   "type": "module",