StatusHint 状态提示

安装

pnpm add @talex-touch/tuffex

import { TxStatusHint } from '@talex-touch/tuffex/status-hint'
import '@talex-touch/tuffex/status-hint/style.css'
// 组件内部渲染 TxTextTransformer（它又渲染 TxTextMorph）和 TxIcon，它们的样式表需单独引入
import '@talex-touch/tuffex/text-transformer/style.css'
import '@talex-touch/tuffex/text-morph/style.css'
import '@talex-touch/tuffex/icon/style.css'
import '@talex-touch/tuffex/base.css' // 设计令牌与重置样式，全应用引入一次

用法

基础

新消息从旧文字逐字变换；同一消息再次出现时，新的 pulseKey 让强调重放。

示例加载中...

色调与尺寸

tone 只作用于色带和图标；md 独占一行，sm 放在工具栏或顶栏里。

示例加载中...

摆放

贴着栏的边缘铺开时，用权重高于单个类的类（scoped 类即可）定位，并设置两个 CSS 变量。

示例加载中...

最佳实践

消息变化期间保持挂载：不要按消息设 :key；v-if 只表示「没有消息」，并包在 <Transition name="tx-status-hint"> 里。
把每条消息的 id 传给 pulseKey，否则同一文字连续出现时，第二次操作看起来没有生效。
只放两到四个词的一行文案；它不换行，很长的细节（如 provider 的错误信息）放到能换行的地方。
提示与消息同时挂载，或宿主已有播报区时，传 live=false 并从常驻的 role="status" 区域播报；不要在组件上加 role 或 aria-live，透传属性会落在根元素 div 上。
一个界面只放一处；需要排队、堆叠或定时消失时，用 Toast 提示。

API 参考

属性

属性	类型	默认值	说明
`text`	`string \| number`	-	必填，一行短文案；`animated` 时新值从旧值逐字形变。
`tone`	`'success' \| 'warning' \| 'danger' \| 'info' \| 'muted'`	`'success'`	色带与图标的颜色，复用 `StatusTone`；`info` 用主色色相。
`size`	`'sm' \| 'md'`	`'md'`	`md`：13px 文字、16px 图标；`sm`：12px 文字、14px 图标。
`pulseKey`	`string \| number`	-	挂载后一变就重放强调；传每条消息的 id。
`animated`	`boolean`	`true`	`false` 时直接显示终态、文字为纯文本；接宿主自己的动效开关。
`live`	`boolean`	`true`	`true` 时文字是 polite 播报区；`false` 时组件内没有任何播报区。

插槽

插槽	说明
`icon`	替换色调图标，沿用同一个 `aria-hidden` 方框与动画；`muted` 只能这样加图标。

CSS 变量

变量	默认值	说明
`--tx-status-hint-radius`	`8px`	提示与色带的圆角；贴边摆放时设为 `0`。
`--tx-status-hint-pad-x`	`10px`；`sm` 为 `8px`	左右内边距，也是末端淡出区的宽度。
`--tx-status-hint-accent`	色调颜色	色带与图标的颜色，由色调决定；`muted` 取 `--tx-text-color-secondary`。
`--tx-status-hint-wash-strength`	`0.26`；暗色主题下 `0.2`	色带左缘的不透明度；38% 处为它的 0.45 倍，右端为零。

组件从不设置 --tx-status-hint-radius，写在提示或任意祖先上都会生效；--tx-status-hint-pad-x 用权重高于单个类的规则覆盖。
--tx-status-hint-accent 与 --tx-status-hint-wash-strength 用内联 style 或权重高于两个类的选择器覆盖。
--tx-status-hint-pad-y、--tx-status-hint-icon-size、--tx-status-hint-spring、--tx-status-hint-spring-duration 由组件设置，宿主不要改。

概述

文字在所有色调下都是 --tx-text-color-primary、字重 600；muted 是中性灰，没有默认图标。
不换行、不加省略号：最宽等于容器，更长的值在末端内边距里淡出并被裁掉。
挂载时色带从左缘涌现，图标与文字沿弹簧落定，文字第一帧即可读；text 或 pulseKey 变化时重放强调，同一次更新只重放一次。
text 变化时文字逐字形变（380ms），行内提示的宽度随之伸缩；离场时文字先淡出、色带随后，只动不透明度。
animated=false 与 prefers-reduced-motion: reduce 都直接显示终态；只开减弱动效时，形变引擎仍挂载，但新值直接写入。
色带、颗粒与末端淡出按物理方向从左往右绘制，从右到左的页面不会镜像。

技术实现

色带是色调颜色加遮罩：渐变与 140px 平铺的 feTurbulence 噪点经 mask-composite: intersect 求交，不支持时不画色带；重放靠 is-pulse-a / is-pulse-b 两套相同的关键帧交替。
弹簧取自 liquid/src/spring.ts 的 resolveTransition('bouncy')，挂载后才写入；服务端渲染回退到 620ms cubic-bezier(0.34, 1.56, 0.64, 1)，水合结果一致。
源码：packages/tuffex/packages/components/src/status-hint/；StatusTone 来自 status-badge。

查看源码

packages/tuffex/packages/components/src/status-hint/index.ts

使用场景

在操作发生的地方说明结果：「已复制」「已固定」「固定失败」。
CoreBox 的操作反馈：显示在底栏，底栏不在屏时显示在顶栏。