WorkingIndicator 工作指示器

基础用法

WorkingIndicator

三种像素图案

drive 与 dots 共用同一条人字形波前，周期 650ms；orbit 是一颗彗星绕格子外圈跑，中心格永远不亮。

计时与重挂载

不传 startedAt 时，计时从挂载那一刻起算。流式宿主每收到一个增量都可能重建这一行，那样计时会被清零——传一个时间戳就能让它跨重挂载继续走。

读数始终是 Date.now() - startedAt 而不是自增计数器：标签页切到后台会被节流，自增计数器每次少加，时间越走越慢。

API

Props

Slots

交互契约

• 组件没有 emits：它只呈现状态，不产生事件。
• 根节点是 role="status"。读数带 aria-hidden="true"——它每 100ms 变一次，留在实时区域里会把辅助技术淹没；播报内容只有标签。
• ariaLabel 缺省时不写 aria-label。把可见文案再抄一遍会被读两次。
• 9 个格子的动画延迟写在 SCSS 的 :nth-child() 里而不是内联样式上。内联样式优先级更高，会盖掉减弱动效的关闭规则。
• orbit 的中心格是 opacity: .07 且完全不参与动画，其余格子静止态是 .15。
• 减弱动效下格子停在 .15 的暗态（animation: none），计时器照常走——它报告的是真实进度，不是装饰。
• 同目录导出 useElapsed 与 formatElapsed，宿主想自己排版读数时可以直接用。

最佳实践

• 用它表示「某件事正在跑，已经跑了多久」。对方正在输入用 TxTypingIndicator，无语义的等待用 TxSpinner。
• 文案写清楚在做什么（「正在索引仓库」），不要只写「Working」——读数已经回答了「多久」，标签要回答「什么」。
• 任务超过几秒才值得显示读数；瞬时操作把 showElapsed 关掉，省下定时器也省下视觉噪音。
• 流式场景一律传 startedAt，否则组件重建时计时会跳回 0。
• 组件宽度是 fit-content，容器由宿主决定。

Source

• Component source: packages/tuffex/packages/components/src/working-indicator/src/TxWorkingIndicator.vue。
• Composable: packages/tuffex/packages/components/src/working-indicator/src/use-elapsed.ts 导出 useElapsed 与 formatElapsed。
• Types: packages/tuffex/packages/components/src/working-indicator/src/types.ts。
• 实测覆盖: packages/tuffex/packages/components/src/working-indicator/__tests__/working-indicator.test.ts（17 项）验证格式化边界、startedAt 重定基、showElapsed 停表、卸载清理定时器、变体类名与 aria 归属。
• 移植自 Beautiful UI（https://www.beautifului.dev），© 2026 Shane Levine，MIT。