one-design-next 0.0.91 → 0.0.96

package/README.md

@@ -2,7 +2,7 @@
 
 # One Design Next
 
-基于 **TAD One Design & Wxad AD UI** 设计语言的 React 组件库
+基于 **TAD One Design & WXAD AD UI** 设计语言的 React 组件库
 
 通用业务控件 / 平台布局 / GenUI 对话组件 / AI Skill 工程化流水线
 
@@ -52,16 +52,16 @@ import { Button, Table, Dialog, Composer } from 'one-design-next';
 
 完整导出清单以 [`components/index.ts`](components/index.ts) 为准，分类说明与 Props 索引见 [component-list.md](.cursor/skills/p2-one-design/references/component-list.md)。
 
-| 分类 | 组件 |
-|:-----|:-----|
-| **通用** | `Button` `Icon` `Link` `Avatar` `Image` `HoverFill` `ConfigProvider` |
-| **布局** | `Card` `Collapse` `ScrollArea` `RuyiLayout` `MpLayout` `HuxuanLayout` |
-| **导航** | `Tabs` `Dropdown` `Pagination` `Cascader` `TreeSelect` |
-| **数据录入** | `Form` `Input` `InputNumber` `InputOtp` `Select` `AutoComplete` `Checkbox` `Radio` `Switch` `Slider` `ColorPicker` `DatePicker` `DateRangePicker` `TimePicker` `Calendar` |
-| **数据展示** | `Table` `Chart` `VirtualList` `NumberFlow` `EllipsisText` `TextSwap` `Empty` |
-| **反馈** | `Dialog` `Drawer` `Message` `Alert` `Tooltip` `Popover` `Loading` |
-| **GenUI** | `Composer` `StreamText` `ChatItem` `AgentStep` `AgentThink` `Artifact` `Invocation` `Mention` `CodeBlock` `PreviewPanel` `ActionBar` `Attachments` `MessageImage` `Sources` `Provenance` `Suggestions` `SkillSlot` `UserBubble` `Welcome` `ErrorBlock` `Fab` |
-| **底层** | `ModalBase` 系列 `PopBase` 系列 `Collapsible` 日期 / 时间工具函数 |
+| 分类         | 组件                                                                                                                                                                                                                                                         |
+| :----------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **通用**     | `Button` `Icon` `Link` `Avatar` `Image` `HoverFill` `ConfigProvider`                                                                                                                                                                                         |
+| **布局**     | `Card` `Collapse` `ScrollArea` `RuyiLayout` `MpLayout` `HuxuanLayout`                                                                                                                                                                                        |
+| **导航**     | `Tabs` `Dropdown` `Pagination` `Cascader` `TreeSelect`                                                                                                                                                                                                       |
+| **数据录入** | `Form` `Input` `InputNumber` `InputOtp` `Select` `AutoComplete` `Checkbox` `Radio` `Switch` `Slider` `ColorPicker` `DatePicker` `DateRangePicker` `TimePicker` `Calendar`                                                                                    |
+| **数据展示** | `Table` `Chart` `VirtualList` `NumberFlow` `EllipsisText` `TextSwap` `Empty`                                                                                                                                                                                 |
+| **反馈**     | `Dialog` `Drawer` `Message` `Alert` `Tooltip` `Popover` `Loading`                                                                                                                                                                                            |
+| **GenUI**    | `Composer` `StreamText` `ChatItem` `AgentStep` `AgentThink` `Artifact` `Invocation` `Mention` `CodeBlock` `PreviewPanel` `ActionBar` `Attachments` `MessageImage` `Sources` `Provenance` `Suggestions` `SkillSlot` `UserBubble` `Welcome` `ErrorBlock` `Fab` |
+| **底层**     | `ModalBase` 系列 `PopBase` 系列 `Collapsible` 日期 / 时间工具函数                                                                                                                                                                                            |
 
 > GenUI 共享类型（`ToolCall`、`ChatMessage`、`Conversation` 等）通过 `_genui-types` 统一导出。
 
@@ -69,10 +69,10 @@ import { Button, Table, Dialog, Composer } from 'one-design-next';
 
 One Design Next 提供两种主题定制方式：
 
-| 方式 | 适用场景 | 说明 |
-|:-----|:---------|:-----|
-| **CSS Variables** | 全局主题、脱离 React 树的场景（如 `Message`） | `base.css` 提供基础 token，组件级变量可覆盖 |
-| **ConfigProvider** | 需要 React 上下文的定制（图标解析、按钮行为等） | 通过 Provider 注入配置 |
+| 方式               | 适用场景                                        | 说明                                        |
+| :----------------- | :---------------------------------------------- | :------------------------------------------ |
+| **CSS Variables**  | 全局主题、脱离 React 树的场景（如 `Message`）   | `base.css` 提供基础 token，组件级变量可覆盖 |
+| **ConfigProvider** | 需要 React 上下文的定制（图标解析、按钮行为等） | 通过 Provider 注入配置                      |
 
 ## 本地开发
 
@@ -94,24 +94,24 @@ pnpm run docs:build
 
 ### 常用脚本
 
-| 命令 | 说明 |
-|:-----|:-----|
-| `pnpm run dev` | 启动本地开发文档站 |
-| `pnpm run build` | 构建组件库（father + 样式） |
-| `pnpm run docs:build` | 静态构建文档站（含 LLM 知识生成） |
-| `pnpm run docs:preview` | 本地预览文档产物 |
-| `pnpm run build:skills` | 构建多产品 Skill 发布包 |
-| `pnpm run create-component` | 创建新组件脚手架 |
-| `pnpm run create-skill` | 创建新 AI Skill |
-| `pnpm run test` | 运行 Vitest（watch 模式） |
-| `pnpm run test:ci` | 运行 Vitest（CI 模式） |
-| `pnpm run test:changed` | 仅测试改动相关用例 |
-| `pnpm run typecheck` | TypeScript 类型检查 |
-| `pnpm run benchmark` | 运行性能基准测试 |
-| `pnpm run benchmark:compare` | 对比性能基准 |
-| `pnpm run benchmark:auto` | 仅运行自动基准任务 |
-| `pnpm run lint` | ESLint + Stylelint 代码检查 |
-| `pnpm run release` | 版本发布 |
+| 命令                         | 说明                              |
+| :--------------------------- | :-------------------------------- |
+| `pnpm run dev`               | 启动本地开发文档站                |
+| `pnpm run build`             | 构建组件库（father + 样式）       |
+| `pnpm run docs:build`        | 静态构建文档站（含 LLM 知识生成） |
+| `pnpm run docs:preview`      | 本地预览文档产物                  |
+| `pnpm run build:skills`      | 构建多产品 Skill 发布包           |
+| `pnpm run create-component`  | 创建新组件脚手架                  |
+| `pnpm run create-skill`      | 创建新 AI Skill                   |
+| `pnpm run test`              | 运行 Vitest（watch 模式）         |
+| `pnpm run test:ci`           | 运行 Vitest（CI 模式）            |
+| `pnpm run test:changed`      | 仅测试改动相关用例                |
+| `pnpm run typecheck`         | TypeScript 类型检查               |
+| `pnpm run benchmark`         | 运行性能基准测试                  |
+| `pnpm run benchmark:compare` | 对比性能基准                      |
+| `pnpm run benchmark:auto`    | 仅运行自动基准任务                |
+| `pnpm run lint`              | ESLint + Stylelint 代码检查       |
+| `pnpm run release`           | 版本发布                          |
 
 ## 仓库结构
 
@@ -161,14 +161,14 @@ one-design-next/
 
 ### 阶段说明
 
-| 阶段 | Skill | 职责 |
-|:-----|:------|:-----|
-| **P1** 设计 | `p1-design-analyst` · `p1-design-spec` | 需求结构化分析、组件级设计说明 |
-| **P2** 知识 | `p2-one-design` · `p2-block-catalog` · `p2-business-knowledge` · `p2-page-catalog` | 组件库知识、区块目录、业务页面知识 |
-| **P3** 执行 | `p3-page-implement` | 用 ODN 组件 + 区块拼装页面代码 |
-| **P4** 质量 | `p4-audit` · `p4-polish` | 代码质量审查、发布前精修 |
+| 阶段         | Skill                                                                                                                        | 职责                                                        |
+| :----------- | :--------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------- |
+| **P1** 设计  | `p1-design-analyst` · `p1-design-spec`                                                                                       | 需求结构化分析、组件级设计说明                              |
+| **P2** 知识  | `p2-one-design` · `p2-block-catalog` · `p2-business-knowledge` · `p2-page-catalog`                                           | 组件库知识、区块目录、业务页面知识                          |
+| **P3** 执行  | `p3-page-implement`                                                                                                          | 用 ODN 组件 + 区块拼装页面代码                              |
+| **P4** 质量  | `p4-audit` · `p4-polish`                                                                                                     | 代码质量审查、发布前精修                                    |
 | **内部维护** | `p4-figma-to-block` · `p5-figma-to-page` · `p4-component-update-process` · `p5-dmp-web-restore` · `p5-fe-free-trade-restore` | 设计稿转区块/整页、组件更新、线上页面还原（仅维护者本地用） |
-| **辅助** | `ten-questions` · `philosophy-talks` | 方法论讨论与设计哲学 |
+| **辅助**     | `ten-questions` · `philosophy-talks`                                                                                         | 方法论讨论与设计哲学                                        |
 
 ### 多产品 Skill 发布
 

package/dist/_util/layoutBatch.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 读阶段：只允许读取布局（getBoundingClientRect / getComputedStyle 等）。
+ * 返回写阶段回调，或返回 undefined 表示无需写入。
+ */
+type LayoutRead = () => (() => void) | void;
+/**
+ * 把「读布局 - 改 DOM」拆成两阶段，同一帧内的所有调用先全部读、再全部写。
+ *
+ * 长列表里每个实例各自「读 - 写 - 读 - 写」时，每次写都会让布局失效，
+ * 下一个读又触发一次完整排版（layout thrashing）。500 项时这是一帧
+ * 500 次排版与一次排版的差别。
+ */
+export declare function scheduleLayoutBatch(read: LayoutRead): void;
+export {};

package/dist/_util/layoutBatch.js

@@ -0,0 +1,47 @@
+/**
+ * 读阶段：只允许读取布局（getBoundingClientRect / getComputedStyle 等）。
+ * 返回写阶段回调，或返回 undefined 表示无需写入。
+ */
+
+var pending = [];
+var rafId = 0;
+function flush() {
+  rafId = 0;
+  var batch = pending;
+  pending = [];
+
+  // 阶段一：集中读。期间无任何写入，浏览器只需排版一次。
+  var writes = [];
+  for (var i = 0; i < batch.length; i++) {
+    try {
+      var write = batch[i]();
+      if (write) writes.push(write);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('[odn] layout batch read error:', error);
+    }
+  }
+
+  // 阶段二：集中写。布局失效只发生在全部读取之后。
+  for (var _i = 0; _i < writes.length; _i++) {
+    try {
+      writes[_i]();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('[odn] layout batch write error:', error);
+    }
+  }
+}
+
+/**
+ * 把「读布局 - 改 DOM」拆成两阶段，同一帧内的所有调用先全部读、再全部写。
+ *
+ * 长列表里每个实例各自「读 - 写 - 读 - 写」时，每次写都会让布局失效，
+ * 下一个读又触发一次完整排版（layout thrashing）。500 项时这是一帧
+ * 500 次排版与一次排版的差别。
+ */
+export function scheduleLayoutBatch(read) {
+  pending.push(read);
+  if (rafId) return;
+  rafId = requestAnimationFrame(flush);
+}

package/dist/_util/sharedResizeObserver.d.ts

@@ -0,0 +1,11 @@
+type SharedResizeCallback = (entry: ResizeObserverEntry) => void;
+/**
+ * 共享 ResizeObserver：模块级单例观察者 + WeakMap 注册表。
+ * 大量组件实例共用同一个观察者，避免每个实例各 new 一个，
+ * 也避免浏览器每帧遍历成倍增长的观察目标。
+ *
+ * 返回取消观察的清理函数，应在 effect cleanup 中调用。
+ * 非浏览器环境 / 无 ResizeObserver 时安全降级为空操作。
+ */
+export declare function observeResize(target: Element, callback: SharedResizeCallback): () => void;
+export {};

package/dist/_util/sharedResizeObserver.js

@@ -0,0 +1,65 @@
+import canUseDom from "./canUseDom";
+var sharedRO = null;
+/**
+ * 同一元素可能被多方观察（如行容器既被标题拟合监听、又被背景同步监听）。
+ * 值用 Set 而非单个回调，避免后注册者覆盖先注册者、
+ * 以及任一方取消观察时把另一方也一并停掉。
+ */
+var registry = new WeakMap();
+function ensureSharedRO() {
+  if (sharedRO) return;
+  sharedRO = new ResizeObserver(function (entries) {
+    var _loop = function _loop() {
+      var entry = entries[i];
+      var callbacks = registry.get(entry.target);
+      if (!callbacks) return 1; // continue
+      callbacks.forEach(function (cb) {
+        // 单个回调异常不应中断同批其他实例的派发（共享观察者的隔离保证）
+        try {
+          cb(entry);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('[odn] shared ResizeObserver callback error:', error);
+        }
+      });
+    };
+    for (var i = 0; i < entries.length; i++) {
+      if (_loop()) continue;
+    }
+  });
+}
+
+/**
+ * 共享 ResizeObserver：模块级单例观察者 + WeakMap 注册表。
+ * 大量组件实例共用同一个观察者，避免每个实例各 new 一个，
+ * 也避免浏览器每帧遍历成倍增长的观察目标。
+ *
+ * 返回取消观察的清理函数，应在 effect cleanup 中调用。
+ * 非浏览器环境 / 无 ResizeObserver 时安全降级为空操作。
+ */
+export function observeResize(target, callback) {
+  if (!canUseDom() || typeof ResizeObserver === 'undefined') {
+    return function () {};
+  }
+  ensureSharedRO();
+  var callbacks = registry.get(target);
+  if (!callbacks) {
+    callbacks = new Set();
+    registry.set(target, callbacks);
+    sharedRO.observe(target);
+  }
+  callbacks.add(callback);
+  var stopped = false;
+  return function () {
+    if (stopped) return;
+    stopped = true;
+    var current = registry.get(target);
+    if (!current) return;
+    current.delete(callback);
+    // 最后一个观察方撤销时才真正停止观察
+    if (current.size === 0) {
+      registry.delete(target);
+      sharedRO.unobserve(target);
+    }
+  };
+}

package/dist/_util/textFit.d.ts

@@ -0,0 +1,48 @@
+export interface FitMetrics {
+    /** 按字形簇切分的文本段 */
+    segments: string[];
+    /**
+     * prefixWidths[i] = segments[0..i] 拼接后再加省略号的宽度，严格单调递增。
+     * 完整文本宽度不放进来（省略号可能比末位字形宽，混入会破坏单调性）。
+     */
+    prefixWidths: number[];
+    /** 完整文本宽度，不含省略号 */
+    fullWidth: number;
+}
+export interface FontSpec {
+    /** canvas font 简写，取自 resolveFont */
+    font: string;
+    /** CSS letter-spacing 的像素值；canvas measureText 不计字间距，需手工补偿 */
+    letterSpacing: number;
+}
+/**
+ * 按字形簇切分。emoji、肤色修饰符、ZWJ 序列、带组合符的字母都算一个整体，
+ * 截断落在其中任一位置都会产生乱码，所以不能按 UTF-16 码元切。
+ * 无 Intl.Segmenter 时退化到码点切分，至少保证代理对不裂。
+ */
+export declare function splitGraphemes(text: string): string[];
+/**
+ * getComputedStyle().font 在部分浏览器下返回空串（如 font-family 走 CSS 变量），
+ * 此时把空串赋给 canvas 会静默 fallback 到 10px sans-serif，测量整体失真。
+ */
+export declare function resolveFont(cs: CSSStyleDeclaration): string;
+/**
+ * 预计算所有截断位置的宽度。用 canvas measureText，不触发 DOM 排版，
+ * 因此单次挂载即可算完，后续宽度变化只需在结果上二分。
+ */
+export declare function measureFit(text: string, ellipsis: string, spec: FontSpec): FitMetrics;
+export interface FitResult {
+    text: string;
+    /**
+     * 结果是否确实在 available 内。为 false 表示窄到连「一个字形 + 省略号」
+     * 都放不下，只能原样返回；调用方此时必须让 CSS text-overflow 接管截断，
+     * 否则文本会溢出容器。
+     */
+    accurate: boolean;
+}
+/**
+ * 按可用宽度选出应显示的文本。
+ * 极窄时返回原文而非单独的省略号：宽度本身可能是布局未就绪的假值，
+ * 裁成「…」后若行宽不再变化就永远恢复不了，交给 CSS text-overflow 兜底更稳。
+ */
+export declare function fitToWidth(metrics: FitMetrics, available: number, text: string, ellipsis: string): FitResult;

package/dist/_util/textFit.js

@@ -0,0 +1,123 @@
+import canUseDom from "./canUseDom";
+var sharedCanvas = null;
+function getCtx() {
+  if (!canUseDom()) return null;
+  if (!sharedCanvas) sharedCanvas = document.createElement('canvas');
+  return sharedCanvas.getContext('2d');
+}
+
+/**
+ * 本地 TS lib 目标尚未包含 Intl.Segmenter 的声明，这里按用到的最小面手写。
+ * 运行时通过 'Segmenter' in Intl 判定可用性，不可用时降级到码点切分。
+ */
+
+var segmenter = function () {
+  if (typeof Intl === 'undefined' || !('Segmenter' in Intl)) return null;
+  var Ctor = Intl.Segmenter;
+  return new Ctor(undefined, {
+    granularity: 'grapheme'
+  });
+}();
+
+/**
+ * 按字形簇切分。emoji、肤色修饰符、ZWJ 序列、带组合符的字母都算一个整体，
+ * 截断落在其中任一位置都会产生乱码，所以不能按 UTF-16 码元切。
+ * 无 Intl.Segmenter 时退化到码点切分，至少保证代理对不裂。
+ */
+export function splitGraphemes(text) {
+  if (!text) return [];
+  if (segmenter) {
+    return Array.from(segmenter.segment(text), function (s) {
+      return s.segment;
+    });
+  }
+  return Array.from(text);
+}
+
+/**
+ * getComputedStyle().font 在部分浏览器下返回空串（如 font-family 走 CSS 变量），
+ * 此时把空串赋给 canvas 会静默 fallback 到 10px sans-serif，测量整体失真。
+ */
+export function resolveFont(cs) {
+  if (cs.font) return cs.font;
+  return "".concat(cs.fontStyle, " ").concat(cs.fontWeight, " ").concat(cs.fontSize, " / ").concat(cs.lineHeight, " ").concat(cs.fontFamily);
+}
+
+/**
+ * 预计算所有截断位置的宽度。用 canvas measureText，不触发 DOM 排版，
+ * 因此单次挂载即可算完，后续宽度变化只需在结果上二分。
+ */
+export function measureFit(text, ellipsis, spec) {
+  var segments = splitGraphemes(text);
+  if (!segments.length) {
+    return {
+      segments: segments,
+      prefixWidths: [],
+      fullWidth: 0
+    };
+  }
+  var ctx = getCtx();
+  if (!ctx) {
+    // 拿不到 canvas 时给出「永远放不下」的度量，调用方据此保留原文
+    return {
+      segments: segments,
+      prefixWidths: [],
+      fullWidth: Number.POSITIVE_INFINITY
+    };
+  }
+  ctx.font = spec.font;
+  var letterSpacing = spec.letterSpacing;
+  var ellipsisWidth = ctx.measureText(ellipsis).width + letterSpacing * splitGraphemes(ellipsis).length;
+  var prefixWidths = [];
+  var prefix = '';
+  for (var i = 0; i < segments.length - 1; i++) {
+    prefix += segments[i];
+    prefixWidths.push(ctx.measureText(prefix).width + letterSpacing * (i + 1) + ellipsisWidth);
+  }
+  return {
+    segments: segments,
+    prefixWidths: prefixWidths,
+    fullWidth: ctx.measureText(text).width + letterSpacing * segments.length
+  };
+}
+
+/** 最后一个 <= available 的下标，-1 表示一个字形加省略号都放不下 */
+function bisect(widths, available) {
+  var lo = 0;
+  var hi = widths.length - 1;
+  var best = -1;
+  while (lo <= hi) {
+    var mid = lo + hi >> 1;
+    if (widths[mid] <= available) {
+      best = mid;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return best;
+}
+/**
+ * 按可用宽度选出应显示的文本。
+ * 极窄时返回原文而非单独的省略号：宽度本身可能是布局未就绪的假值，
+ * 裁成「…」后若行宽不再变化就永远恢复不了，交给 CSS text-overflow 兜底更稳。
+ */
+export function fitToWidth(metrics, available, text, ellipsis) {
+  if (!metrics.segments.length) return {
+    text: text,
+    accurate: true
+  };
+  if (metrics.fullWidth <= available) return {
+    text: text,
+    accurate: true
+  };
+  var best = bisect(metrics.prefixWidths, available);
+  if (best < 0) return {
+    text: text,
+    accurate: false
+  };
+  return {
+    text: metrics.segments.slice(0, best + 1).join('') + ellipsis,
+    accurate: true
+  };
+}

package/dist/chat-item/index.d.ts

@@ -38,9 +38,13 @@ export interface ChatItemProps {
     defaultDeleteOpen?: boolean;
     onDeleteOpenChange?: (open: boolean) => void;
 }
-export declare function ChatItem({ id, title, active, type, status, pinned, time, onClick, onRename, onPin, onDelete, actionMenuZIndex, renaming: renamingProp, defaultRenaming, onRenamingChange, menuOpen: menuOpenProp, defaultMenuOpen, onMenuOpenChange, deleteOpen: deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange, }: ChatItemProps): import("react").JSX.Element;
-export declare namespace ChatItem {
-    var displayName: string;
-}
+declare function ChatItemInner({ id, title, active, type, status, pinned, time, onClick, onRename, onPin, onDelete, actionMenuZIndex, renaming: renamingProp, defaultRenaming, onRenamingChange, menuOpen: menuOpenProp, defaultMenuOpen, onMenuOpenChange, deleteOpen: deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange, }: ChatItemProps): import("react").JSX.Element;
+/**
+ * 会话列表项。
+ *
+ * memo：列表里单项 hover / 选中会触发父级重渲染，未 memo 时其余项会一并
+ * 重跑 render 与相对时间计算。父级需传入稳定的回调引用才能生效。
+ */
+export declare const ChatItem: import("react").MemoExoticComponent<typeof ChatItemInner>;
 export default ChatItem;
 export { formatRelativeTime } from './relative-time';

package/dist/chat-item/index.js

@@ -1,6 +1,9 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { scheduleLayoutBatch } from "../_util/layoutBatch";
+import { observeResize } from "../_util/sharedResizeObserver";
+import { fitToWidth, measureFit, resolveFont } from "../_util/textFit";
 import Dialog from "../dialog";
 import Dropdown from "../dropdown";
 import HoverFill from "../hover-fill";
@@ -15,6 +18,12 @@ var STATUS_ARIA_LABEL = {
 };
 var ELLIPSIS = '…';
 
+/**
+ * 标记「JS 已把标题裁到可用宽度内」，由 useFittedTitle 在写入时同步，
+ * 不由 React 渲染：它表达的是某一帧的测量结果，而非「是否启用拟合」。
+ */
+var TITLE_FITTED_ATTR = 'data-odn-chat-item-title-fitted';
+
 /** 可用宽度变化小于该值时跳过重算（与二分容差同量级） */
 var FIT_WIDTH_EPS = 0.5;
 /**
@@ -24,65 +33,85 @@ var FIT_WIDTH_EPS = 0.5;
 var FIT_MIN_RELIABLE_WIDTH = 24;
 
 /**
- * 有 trailing（客服 icon / status / 时间）时，用 DOM 实测把标题裁到可用宽度。
+ * 有 trailing（客服 icon / status / 时间）时，把标题裁到可用宽度。
  * 解决 CSS text-overflow 按字符边界截断后，省略号右侧留白把 trailing 顶开的问题。
  *
- * 性能：RO 监听行 / label / trailing（active 时时间让位不改变行宽，必须听内部）；
- * 回调经 rAF 合并；缓存 maxWidth / trailingWidth / 裁切结果。
+ * 测量走 textFit 的 Canvas 预算：挂载时一次算完所有截断位置的宽度，
+ * 之后每次宽度变化只做二分，不再「填字 - 排版 - 量宽」地反复试探。
+ *
+ * 裁切结果直接写进 titleEl，不走 state：长列表拖宽时零 re-render。
+ * 标题本身由 React 渲染，title 变化时 React 会把完整标题写回 DOM，
+ * 随后本 effect 重跑重新裁切，顺序天然正确。
+ *
+ * 性能：RO 只监听整行；回调经 rAF 合并；缓存 maxWidth / trailingWidth / 裁切结果。
+ * trailing 宽度变化（时间文案 / 状态 / 让位）由调用方经 layoutKey 触发重测。
  */
 function useFittedTitle(title, enabled, labelRef, titleRef, /** 右对齐区（状态 / 时间），量宽预留 */
 trailingRef, /** 紧跟标题的类型 icon，量宽预留 */
-typeIconRef, /** active 时时间让位 / 字重变化，需强制重测 */
+typeIconRef, /** trailing 宽度 / 字重变化，需强制重测 */
 layoutKey) {
-  var _useState = useState(title),
-    _useState2 = _slicedToArray(_useState, 2),
-    fitted = _useState2[0],
-    setFitted = _useState2[1];
   useLayoutEffect(function () {
-    var _document$fonts, _label$closest;
+    var _measure, _document$fonts, _label$closest;
+    var titleEl = titleRef.current;
+    if (!titleEl) return;
+
+    // React 渲染的是完整标题；未启用拟合时保持原样，交给 CSS text-overflow
     if (!enabled) {
-      setFitted(title);
+      titleEl.textContent = title;
+      titleEl.removeAttribute(TITLE_FITTED_ATTR);
       return;
     }
     var label = labelRef.current;
-    var titleEl = titleRef.current;
-    if (!label || !titleEl) return;
+    if (!label) return;
 
-    // 标题变更时先回到原文，避免沿用上一会话裁成的「…」
-    setFitted(title);
+    // 先回到原文，避免沿用上一会话裁成的「…」，也保证按完整标题取字体
+    titleEl.textContent = title;
+    var titleCs = getComputedStyle(titleEl);
+    var metrics = measureFit(title, ELLIPSIS, {
+      font: resolveFont(titleCs),
+      letterSpacing: Number.parseFloat(titleCs.letterSpacing) || 0
+    });
     var cancelled = false;
-    var rafId = 0;
+    var scheduled = false;
     var lastMaxWidth = Number.NaN;
     var lastTrailingWidth = Number.NaN;
     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;';
-    var syncProbeFont = function syncProbeFont() {
-      var cs = getComputedStyle(titleEl);
-      probe.style.fontFamily = cs.fontFamily;
-      probe.style.fontSize = cs.fontSize;
-      probe.style.fontWeight = cs.fontWeight;
-      probe.style.fontStyle = cs.fontStyle;
-      probe.style.letterSpacing = cs.letterSpacing;
-      probe.style.fontFeatureSettings = cs.fontFeatureSettings;
-      probe.style.fontVariationSettings = cs.fontVariationSettings;
+    var lastFitAccurate = false;
+
+    /**
+     * accurate 表示「当前文本确实在可用宽度内」，此时才挂 fitted 标记让
+     * CSS 停止截断（否则省略号右侧会留出字符边界的空白，把 trailing 顶开）。
+     * 放弃裁切时必须摘掉标记，把截断交回 CSS，否则标题直接溢出行外。
+     */
+    var applyFit = function applyFit(text, accurate) {
+      titleEl.textContent = text;
+      if (accurate) titleEl.setAttribute(TITLE_FITTED_ATTR, '');else titleEl.removeAttribute(TITLE_FITTED_ATTR);
     };
-    var measure = function measure(text) {
-      probe.textContent = text;
-      return probe.getBoundingClientRect().width;
+
+    /**
+     * gap 与 trailing / typeIcon 的宽度在同一个 effect 周期内是常量：
+     * 所有会改变它们的条件（选中、菜单开合、时间文案、状态、类型 icon）
+     * 都在 layoutKey 里，变化时 effect 会整体重跑。
+     * 拖拽时因此只需读行内标题区的宽度，省掉每帧每项的 getComputedStyle。
+     */
+    var gap = Number.NaN;
+    var trailingWidth = 0;
+    var typeWidth = 0;
+    var readStatics = function readStatics() {
+      var _trailingRef$current$, _trailingRef$current, _typeIconRef$current$, _typeIconRef$current;
+      var cs = getComputedStyle(label);
+      gap = Number.parseFloat(cs.columnGap || cs.gap) || 0;
+      trailingWidth = (_trailingRef$current$ = (_trailingRef$current = trailingRef.current) === null || _trailingRef$current === void 0 ? void 0 : _trailingRef$current.getBoundingClientRect().width) !== null && _trailingRef$current$ !== void 0 ? _trailingRef$current$ : 0;
+      typeWidth = (_typeIconRef$current$ = (_typeIconRef$current = typeIconRef.current) === null || _typeIconRef$current === void 0 ? void 0 : _typeIconRef$current.getBoundingClientRect().width) !== null && _typeIconRef$current$ !== void 0 ? _typeIconRef$current$ : 0;
     };
-    var fit = function fit() {
-      var _trailing$getBounding, _typeIcon$getBounding;
+
+    /**
+     * 只读布局，返回写入回调交由批处理统一执行。
+     * 这里不能直接改 DOM：同帧内还有其他实例要读，写入会让它们的读重新排版。
+     */
+    var measure = function measure() {
       if (cancelled) return;
-      syncProbeFont();
-      if (!probe.isConnected) document.body.appendChild(probe);
-      var cs = getComputedStyle(label);
-      var gap = Number.parseFloat(cs.columnGap || cs.gap) || 0;
-      var trailing = trailingRef.current;
-      var typeIcon = typeIconRef.current;
-      var trailingWidth = (_trailing$getBounding = trailing === null || trailing === void 0 ? void 0 : trailing.getBoundingClientRect().width) !== null && _trailing$getBounding !== void 0 ? _trailing$getBounding : 0;
-      var typeWidth = (_typeIcon$getBounding = typeIcon === null || typeIcon === void 0 ? void 0 : typeIcon.getBoundingClientRect().width) !== null && _typeIcon$getBounding !== void 0 ? _typeIcon$getBounding : 0;
+      if (!Number.isFinite(gap)) readStatics();
       // 标题两侧可能各有一段 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);
@@ -94,71 +123,58 @@ layoutKey) {
       if (maxWidth < FIT_MIN_RELIABLE_WIDTH) {
         lastMaxWidth = Number.NaN;
         lastTrailingWidth = Number.NaN;
-        if (lastFitted !== title) {
-          lastFitted = title;
-          setFitted(title);
-        }
-        return;
+        // 此刻 trailing / typeIcon 多半也没量准，下次重读
+        gap = Number.NaN;
+        if (lastFitted === title && !lastFitAccurate) return;
+        lastFitted = title;
+        lastFitAccurate = false;
+        return function () {
+          return applyFit(title, false);
+        };
       }
       lastMaxWidth = maxWidth;
       lastTrailingWidth = trailingWidth;
-      var next = title;
-      if (measure(title) > maxWidth + FIT_WIDTH_EPS) {
-        var lo = 0;
-        var hi = title.length;
-        next = title;
-        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;
-          }
-        }
-        // 极端窄宽仍放不下「字+…」时交给 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;
+      var _fitToWidth = fitToWidth(metrics, maxWidth + FIT_WIDTH_EPS, title, ELLIPSIS),
+        next = _fitToWidth.text,
+        accurate = _fitToWidth.accurate;
+      if (next === lastFitted && accurate === lastFitAccurate) return;
       lastFitted = next;
-      setFitted(next);
+      lastFitAccurate = accurate;
+      return function () {
+        return applyFit(next, accurate);
+      };
     };
     var scheduleFit = function scheduleFit() {
-      if (cancelled || rafId) return;
-      rafId = window.requestAnimationFrame(function () {
-        rafId = 0;
-        fit();
+      if (cancelled || scheduled) return;
+      scheduled = true;
+      scheduleLayoutBatch(function () {
+        scheduled = false;
+        return measure();
       });
     };
 
-    // 首屏同步裁切，避免首帧闪全标题；后续宽度变化走 rAF 合并
-    fit();
+    // 首屏同步裁切，避免首帧闪全标题；后续宽度变化走批处理合并
+    (_measure = measure()) === null || _measure === void 0 || _measure();
     void ((_document$fonts = document.fonts) === null || _document$fonts === void 0 ? void 0 : _document$fonts.ready.then(function () {
       if (cancelled) return;
-      // 字体就绪后字形宽度可能变，需绕过 maxWidth 缓存强制重测
+      // 字体就绪后字形宽度可能变，需重新预算并绕过 maxWidth 缓存
+      var readyCs = getComputedStyle(titleEl);
+      metrics = measureFit(title, ELLIPSIS, {
+        font: resolveFont(readyCs),
+        letterSpacing: Number.parseFloat(readyCs.letterSpacing) || 0
+      });
       lastMaxWidth = Number.NaN;
+      gap = Number.NaN;
       scheduleFit();
     }));
     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);
+    var stopObserving = observeResize(row, scheduleFit);
     return function () {
+      // 批处理队列里可能仍排着本实例的读回调，靠 cancelled 短路即可
       cancelled = true;
-      if (rafId) window.cancelAnimationFrame(rafId);
-      ro.disconnect();
-      probe.remove();
+      stopObserving();
     };
   }, [title, enabled, layoutKey, labelRef, titleRef, trailingRef, typeIconRef]);
-  return enabled ? fitted : title;
 }
 function ChatItemStatus(_ref) {
   var status = _ref.status;
@@ -204,18 +220,28 @@ function ChatItemStatus(_ref) {
   }));
 }
 function useControllableState(controlled, defaultValue, onChange) {
-  var _useState3 = useState(defaultValue),
-    _useState4 = _slicedToArray(_useState3, 2),
-    internal = _useState4[0],
-    setInternal = _useState4[1];
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    internal = _useState2[0],
+    setInternal = _useState2[1];
   var value = controlled !== null && controlled !== void 0 ? controlled : internal;
-  var setValue = function setValue(next) {
-    onChange === null || onChange === void 0 || onChange(next);
-    if (controlled === undefined) setInternal(next);
+  // 每次渲染新建 setValue 会让下游 memo 组件（Dropdown / 菜单项）全部失效
+  var latest = useRef({
+    controlled: controlled,
+    onChange: onChange
+  });
+  latest.current = {
+    controlled: controlled,
+    onChange: onChange
   };
+  var setValue = useCallback(function (next) {
+    var _latest$current$onCha, _latest$current;
+    (_latest$current$onCha = (_latest$current = latest.current).onChange) === null || _latest$current$onCha === void 0 || _latest$current$onCha.call(_latest$current, next);
+    if (latest.current.controlled === undefined) setInternal(next);
+  }, []);
   return [value, setValue];
 }
-export function ChatItem(_ref2) {
+function ChatItemInner(_ref2) {
   var id = _ref2.id,
     title = _ref2.title,
     active = _ref2.active,
@@ -246,10 +272,10 @@ export function ChatItem(_ref2) {
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
     renaming = _useControllableState2[0],
     setRenaming = _useControllableState2[1];
-  var _useState5 = useState(title),
-    _useState6 = _slicedToArray(_useState5, 2),
-    draft = _useState6[0],
-    setDraft = _useState6[1];
+  var _useState3 = useState(title),
+    _useState4 = _slicedToArray(_useState3, 2),
+    draft = _useState4[0],
+    setDraft = _useState4[1];
   var _useControllableState3 = useControllableState(deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange),
     _useControllableState4 = _slicedToArray(_useControllableState3, 2),
     deleteOpen = _useControllableState4[0],
@@ -258,12 +284,12 @@ export function ChatItem(_ref2) {
     _useControllableState6 = _slicedToArray(_useControllableState5, 2),
     menuOpen = _useControllableState6[0],
     setMenuOpen = _useControllableState6[1];
-  var _useState7 = useState(function () {
+  var _useState5 = useState(function () {
       return Date.now();
     }),
-    _useState8 = _slicedToArray(_useState7, 2),
-    now = _useState8[0],
-    setNow = _useState8[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    now = _useState6[0],
+    setNow = _useState6[1];
   var inputRef = useRef(null);
   var labelRef = useRef(null);
   var titleRef = useRef(null);
@@ -278,8 +304,9 @@ 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, // active / 菜单开合都会改时间让位与字重，行宽可能不变
-  "".concat(active ? 1 : 0, ":").concat(menuOpen ? 1 : 0));
+  useFittedTitle(title, fitTitle, labelRef, titleRef, trailingRef, typeIconRef, // trailing / 字重的全部变化来源。这些都会改标题可用宽度而行宽不变，
+  // 提前声明即可，无需为此额外监听 label / trailing / typeIcon 的尺寸。
+  "".concat(active ? 1 : 0, ":").concat(menuOpen ? 1 : 0, ":").concat(timeLabel, ":").concat(status !== null && status !== void 0 ? status : '', ":").concat(showTypeIcon ? 1 : 0));
   useEffect(function () {
     if (!renaming) setDraft(title);
   }, [title, renaming]);
@@ -316,19 +343,21 @@ export function ChatItem(_ref2) {
     setDraft(title);
     setRenaming(false);
   };
-  var actionMenu = [].concat(_toConsumableArray(onRename ? [{
-    value: 'rename',
-    label: '修改名称',
-    icon: 'pencil-line'
-  }] : []), _toConsumableArray(onPin ? [{
-    value: 'pin',
-    label: pinned ? '取消置顶' : '置顶',
-    icon: 'arrow-up-to-line'
-  }] : []), _toConsumableArray(onDelete ? [{
-    value: 'delete',
-    label: '删除',
-    icon: 'trash-2'
-  }] : []));
+  var actionMenu = useMemo(function () {
+    return [].concat(_toConsumableArray(onRename ? [{
+      value: 'rename',
+      label: '修改名称',
+      icon: 'pencil-line'
+    }] : []), _toConsumableArray(onPin ? [{
+      value: 'pin',
+      label: pinned ? '取消置顶' : '置顶',
+      icon: 'arrow-up-to-line'
+    }] : []), _toConsumableArray(onDelete ? [{
+      value: 'delete',
+      label: '删除',
+      icon: 'trash-2'
+    }] : []));
+  }, [onRename, onPin, onDelete, pinned]);
   return /*#__PURE__*/React.createElement(HoverFill, {
     "data-odn-chat-item": true,
     "data-odn-chat-item-id": id,
@@ -374,9 +403,8 @@ export function ChatItem(_ref2) {
     ref: titleRef,
     "data-odn-chat-item-title": true,
     "data-odn-chat-item-title-bold": active ? '' : undefined,
-    "data-odn-chat-item-title-fitted": fitTitle ? '' : undefined,
     title: title
-  }, displayTitle), showTypeIcon ? /*#__PURE__*/React.createElement("span", {
+  }, title), showTypeIcon ? /*#__PURE__*/React.createElement("span", {
     ref: typeIconRef,
     "data-odn-chat-item-type-icon": true,
     "aria-label": "\u4EBA\u5DE5\u5BA2\u670D\u4F1A\u8BDD",
@@ -446,6 +474,14 @@ export function ChatItem(_ref2) {
     }
   })));
 }
+
+/**
+ * 会话列表项。
+ *
+ * memo：列表里单项 hover / 选中会触发父级重渲染，未 memo 时其余项会一并
+ * 重跑 render 与相对时间计算。父级需传入稳定的回调引用才能生效。
+ */
+export var ChatItem = /*#__PURE__*/memo(ChatItemInner);
 ChatItem.displayName = 'ChatItem';
 export default ChatItem;
 export { formatRelativeTime } from "./relative-time";

package/dist/hover-fill/index.js

@@ -6,6 +6,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["bgClassName", "bgStyle", "children", "onMouseEnter", "onMouseLeave", "onMouseDown", "hoverColor", "activeColor", "disabled", "hoverCursor"];
 import React, { forwardRef, useCallback, useContext, useEffect, useRef } from 'react';
+import { observeResize } from "../_util/sharedResizeObserver";
 import { ConfigContext } from "../config-provider";
 import "./style";
 var DEFAULT_HOVER_COLOR = 'rgba(33, 34, 38, 0.05)';
@@ -66,8 +67,6 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
       y = _root$getBoundingClie.y;
     if (window.odnHoverFillState && window.odnHoverFillState.bgVisible && window.odnHoverFillState.bgNode && window.odnHoverFillState.baseNode && window.odnHoverFillState.baseNode !== root && ((_window$odnHoverFillS3 = window.odnHoverFillState.baseNode) === null || _window$odnHoverFillS3 === void 0 ? void 0 : _window$odnHoverFillS3.parentNode) === root.parentNode && hoverFillConfig.sharable) {
       var _window$odnHoverFillS4 = window.odnHoverFillState,
-        bgX = _window$odnHoverFillS4.bgX,
-        bgY = _window$odnHoverFillS4.bgY,
         bgScale = _window$odnHoverFillS4.bgScale,
         baseNode = _window$odnHoverFillS4.baseNode;
       var _baseNode$getBounding = baseNode.getBoundingClientRect(),
@@ -205,6 +204,12 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
       }, 0);
     }, 100);
   };
+  var handleMouseUp = function handleMouseUp() {
+    window.removeEventListener('mouseup', handleMouseUp, false);
+    if (window.odnHoverFillState.bgNode) {
+      window.odnHoverFillState.bgNode.style.background = window.odnHoverFillState.bgVisible ? hoverColor : 'transparent';
+    }
+  };
   var handleMouseDown = function handleMouseDown(e) {
     e.persist();
     if (disabled) {
@@ -218,12 +223,6 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
     }
     window.addEventListener('mouseup', handleMouseUp, false);
   };
-  var handleMouseUp = function handleMouseUp() {
-    window.removeEventListener('mouseup', handleMouseUp, false);
-    if (window.odnHoverFillState.bgNode) {
-      window.odnHoverFillState.bgNode.style.background = window.odnHoverFillState.bgVisible ? hoverColor : 'transparent';
-    }
-  };
   useEffect(function () {
     if (!window.odnHoverFillState) {
       window.odnHoverFillState = {
@@ -245,16 +244,10 @@ var HoverFill = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
   }, []);
   useEffect(function () {
     var root = ref.current;
-    if (!root || typeof ResizeObserver === 'undefined') {
+    if (!root) {
       return;
     }
-    var observer = new ResizeObserver(function () {
-      syncBgSize();
-    });
-    observer.observe(root);
-    return function () {
-      observer.disconnect();
-    };
+    return observeResize(root, syncBgSize);
   }, [ref, syncBgSize]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,

package/package.json

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