fix+feat(ux): 已存草稿显示已保存(Q6) + AI 推理动画指示器(A)
- Q6 bug: useAutosave 加 initialSavedText,进页种入已存草稿时初始即「已保存」,修「加载已存草稿却显示尚未保存」的误导。 - A: 新 ThinkingIndicator(三点波动,motion-safe 尊重 reduced-motion)接入审稿进行中/验收中/回炉中三处静态文案,长等待看得见在工作。
This commit is contained in:
32
apps/web/components/ThinkingIndicator.tsx
Normal file
32
apps/web/components/ThinkingIndicator.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user