用途:在 React 18+ 界面中展示不确定性的 AI 活动反馈,将真实产品生命周期映射到组件内置状态。
主要能力:提供 working、searching、solving、listening、composing、shaping 六种状态;仅支持 20 与 64 像素两种调校尺寸,二者点数和速度不同,不是缩放关系;主题可选 auto、dark、light,auto 先查祖先 data-theme 属性或 dark/light 类,否则跟随 prefers-color-scheme;speed 倍率默认 1,建议 0.75–1.25;paused 冻结当前帧。画布为透明单色圆点,不提供自定义颜色、任意尺寸或确定性进度。
安装与用法:npm install thinking-orbs;从包根导入 ThinkingOrb 及 OrbSize、OrbState、OrbTheme、ThinkingOrbProps 类型。基本用法为传入 state、size、theme、aria-label。产品阶段建议与视觉状态分开映射,结束后(完成、错误、取消、空闲)应卸载组件并展示真实终态。默认 role="img" 并有每状态标签;若相邻可见文本已播报同一状态,可将画布设为 aria-hidden="true",由 role="status" 容器承载唯一播报,避免重复。Next.js App Router 需放在 "use client" 客户端边界内;包对 SSR 安全,仅在客户端解析主题后绘制。
运行时行为:使用 Canvas 2D 圆弧,无 WebGL 或 SVG 滤镜;设备像素比上限 2;每个可见实例一个 requestAnimationFrame 循环,共用 performance.now() 时钟保持相位一致;离屏和标签页隐藏时暂停;prefers-reduced-motion 下渲染确定性静态帧。
高级接口:包同时导出 MODE_DRAWS 与 resolvePreset 供 React 之外的自定义画布使用,仅提供帧绘制器,需自行处理 DPR、清屏、调度、暂停、主题、减弱动效、可见性、清理与无障碍。
限制与常见问题:尺寸只能 20 或 64;dark 表示深色背景上的浅色圆点,需按实际表面核对对比度;状态必须与真实活动一致;不要用 speed={0} 模拟暂停;API 不支持品牌配色。