Files
writer-work-flow/apps/web/components/ThinkingIndicator.tsx
Yaojia Wang c51623836f fix+feat(ux): 已存草稿显示已保存(Q6) + AI 推理动画指示器(A)
- Q6 bug: useAutosave 加 initialSavedText,进页种入已存草稿时初始即「已保存」,修「加载已存草稿却显示尚未保存」的误导。
- A: 新 ThinkingIndicator(三点波动,motion-safe 尊重 reduced-motion)接入审稿进行中/验收中/回炉中三处静态文案,长等待看得见在工作。
2026-06-21 18:05:55 +02:00

33 lines
1.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

interface ThinkingIndicatorProps {
// 状态文案(如「审稿进行中」「验收中」「回炉中」「生成中」)。
label: string;
className?: string;
}
// AI 推理中动画提示:三点波动(朱砂/继承色),让长等待「看得见在工作」。
// motion-safe尊重 prefers-reduced-motion减动偏好下三点静止为「…」仍可读a11y §10
// role=status + aria-live屏读播报状态变化。
export function ThinkingIndicator({
label,
className = "",
}: ThinkingIndicatorProps) {
return (
<span
className={`inline-flex items-center gap-1.5 ${className}`}
role="status"
aria-live="polite"
>
<span className="inline-flex gap-0.5" aria-hidden="true">
{[0, 1, 2].map((i) => (
<span
key={i}
className="h-1.5 w-1.5 rounded-full bg-current opacity-70 motion-safe:animate-pulse"
style={{ animationDelay: `${i * 200}ms` }}
/>
))}
</span>
<span>{label}</span>
</span>
);
}