one-design-next 0.0.71 → 0.0.72

package/dist/chat-item/index.js

@@ -17,17 +17,23 @@ var ELLIPSIS = '…';
 
 /** 可用宽度变化小于该值时跳过重算（与二分容差同量级） */
 var FIT_WIDTH_EPS = 0.5;
+/**
+ * 可用宽度低于该阈值时视为测量不可靠（布局未完成 / 被瞬时压扁）。
+ * 此时保留上一帧可读结果或原文，避免把标题裁成单独的「…」。
+ */
+var FIT_MIN_RELIABLE_WIDTH = 24;
 
 /**
  * 有 trailing（客服 icon / status / 时间）时，用 DOM 实测把标题裁到可用宽度。
  * 解决 CSS text-overflow 按字符边界截断后，省略号右侧留白把 trailing 顶开的问题。
  *
- * 性能：只监听整行（btn）宽度；RO 回调经 rAF 合并（每行每帧最多 fit 一次）；
- * 缓存 maxWidth / trailingWidth / 裁切结果，宽度几乎不变或结果不变则跳过更新。
+ * 性能：RO 监听行 / label / trailing（active 时时间让位不改变行宽，必须听内部）；
+ * 回调经 rAF 合并；缓存 maxWidth / trailingWidth / 裁切结果。
  */
 function useFittedTitle(title, enabled, labelRef, titleRef, /** 右对齐区（状态 / 时间），量宽预留 */
 trailingRef, /** 紧跟标题的类型 icon，量宽预留 */
-typeIconRef) {
+typeIconRef, /** active 时时间让位 / 字重变化，需强制重测 */
+layoutKey) {
   var _useState = useState(title),
     _useState2 = _slicedToArray(_useState, 2),
     fitted = _useState2[0],
@@ -41,11 +47,14 @@ typeIconRef) {
     var label = labelRef.current;
     var titleEl = titleRef.current;
     if (!label || !titleEl) return;
+
+    // 标题变更时先回到原文，避免沿用上一会话裁成的「…」
+    setFitted(title);
     var cancelled = false;
     var rafId = 0;
     var lastMaxWidth = Number.NaN;
     var lastTrailingWidth = Number.NaN;
-    var lastFitted = '';
+    var lastFitted = title;
     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;';
@@ -80,13 +89,24 @@ typeIconRef) {
       if (Number.isFinite(lastMaxWidth) && Math.abs(maxWidth - lastMaxWidth) < FIT_WIDTH_EPS && Math.abs(trailingWidth - lastTrailingWidth) < FIT_WIDTH_EPS) {
         return;
       }
+
+      // 布局未就绪时不要写成单独的「…」，否则行宽不变时 RO 不触发会永久卡住
+      if (maxWidth < FIT_MIN_RELIABLE_WIDTH) {
+        lastMaxWidth = Number.NaN;
+        lastTrailingWidth = Number.NaN;
+        if (lastFitted !== title) {
+          lastFitted = title;
+          setFitted(title);
+        }
+        return;
+      }
       lastMaxWidth = maxWidth;
       lastTrailingWidth = trailingWidth;
       var next = title;
       if (measure(title) > maxWidth + FIT_WIDTH_EPS) {
         var lo = 0;
         var hi = title.length;
-        next = ELLIPSIS;
+        next = title;
         while (lo <= hi) {
           var mid = lo + hi >> 1;
           var candidate = "".concat(title.slice(0, mid)).concat(ELLIPSIS);
@@ -97,6 +117,11 @@ typeIconRef) {
             hi = mid - 1;
           }
         }
+        // 极端窄宽仍放不下「字+…」时交给 CSS ellipsis，保留原文
+        if (next === ELLIPSIS || next === title && measure(title) > maxWidth + FIT_WIDTH_EPS) {
+          var withEllipsis = "".concat(title.slice(0, 1)).concat(ELLIPSIS);
+          next = measure(withEllipsis) <= maxWidth + FIT_WIDTH_EPS ? withEllipsis : title;
+        }
       }
       if (next === lastFitted) return;
       lastFitted = next;
@@ -121,13 +146,18 @@ typeIconRef) {
     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);
+    ro.observe(label);
+    var trailing = trailingRef.current;
+    if (trailing) ro.observe(trailing);
+    var typeIcon = typeIconRef.current;
+    if (typeIcon) ro.observe(typeIcon);
     return function () {
       cancelled = true;
       if (rafId) window.cancelAnimationFrame(rafId);
       ro.disconnect();
       probe.remove();
     };
-  }, [title, enabled, labelRef, titleRef, trailingRef, typeIconRef]);
+  }, [title, enabled, layoutKey, labelRef, titleRef, trailingRef, typeIconRef]);
   return enabled ? fitted : title;
 }
 function ChatItemStatus(_ref) {
@@ -248,7 +278,8 @@ export function ChatItem(_ref2) {
   var showTime = Boolean(timeLabel);
   var showTrailing = showStatus || showTime;
   var fitTitle = showTypeIcon || showTrailing;
-  var displayTitle = useFittedTitle(title, fitTitle, labelRef, titleRef, trailingRef, typeIconRef);
+  var displayTitle = useFittedTitle(title, fitTitle, labelRef, titleRef, trailingRef, typeIconRef, // active / 菜单开合都会改时间让位与字重，行宽可能不变
+  "".concat(active ? 1 : 0, ":").concat(menuOpen ? 1 : 0));
   useEffect(function () {
     if (!renaming) setDraft(title);
   }, [title, renaming]);
@@ -300,6 +331,7 @@ export function ChatItem(_ref2) {
   }] : []));
   return /*#__PURE__*/React.createElement(HoverFill, {
     "data-odn-chat-item": true,
+    "data-odn-chat-item-id": id,
     "data-odn-chat-item-pinned": pinned || undefined,
     bgClassName: "odn-chat-item-btn-bg",
     disabled: active || renaming

package/dist/dialog/style/index.css

@@ -4,7 +4,7 @@ html {
   --odn-dialog-footer-padding: 24px;
   --odn-dialog-footer-gap: 12px;
   --odn-dialog-footer-justify: flex-end;
-  --odn-dialog-overlay-background: rgba(0, 0, 0, 0.45);
+  --odn-dialog-overlay-background: rgba(0, 0, 0, 0.2);
   --odn-dialog-border-radius: 10px;
   --odn-dialog-close-top: 16px;
   --odn-dialog-close-right: 16px;

package/dist/drawer/style/index.css

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 html {
   --odn-drawer-overlay-background: rgba(0, 0, 0, 0.45);
+  --odn-drawer-shadow: var(--odn-shadow-2);
   --odn-drawer-header-padding-inline: 20px;
   --odn-drawer-header-height: 64px;
   --odn-drawer-header-border: 1px solid var(--odn-color-black-4);
@@ -79,6 +80,7 @@ html {
   display: flex;
   flex-direction: column;
   background-color: #fff;
+  box-shadow: var(--odn-drawer-shadow);
   pointer-events: initial;
   overflow: auto;
 }

package/dist/dropdown/index.js

@@ -886,10 +886,13 @@ var Dropdown = function Dropdown(props) {
     }))));
   }
 
-  // click 模式的默认渲染
+  // click 模式：与 hover 一致使用 modal={false}。
+  // 默认 modal 会铺内部 backdrop，挂在 Drawer/Dialog 内时菜单项看起来可点但点不中
+  //（ChatItem 修改名称 / 置顶 / 删除即踩中此问题）。
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     open: disabled ? false : finalOpen,
-    onOpenChange: handleOpenChange
+    onOpenChange: handleOpenChange,
+    modal: false
   }, /*#__PURE__*/React.createElement(DropdownMenuTrigger, {
     asChild: true,
     disabled: disabled

package/dist/icon/svg-data.d.ts

@@ -4250,6 +4250,10 @@ export declare const svgData: {
         readonly viewBox: "0 0 24 24";
         readonly content: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7V5a2 2 0 0 1 2-2h2\"></path><path d=\"M17 3h2a2 2 0 0 1 2 2v2\"></path><path d=\"M21 17v2a2 2 0 0 1-2 2h-2\"></path><path d=\"M7 21H5a2 2 0 0 1-2-2v-2\"></path></g>";
     };
+    readonly 'menu-line': {
+        readonly viewBox: "0 0 24 24";
+        readonly content: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 5h16\"></path><path d=\"M4 12h16\"></path><path d=\"M4 19h16\"></path></g>";
+    };
     readonly 'search-line': {
         readonly viewBox: "0 0 24 24";
         readonly content: "<g fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path></g>";