1afeb2cdb5
- 动效基元：ai-dot 波动(三点竖跳)、ai-stream 不确定进度条、ai-breathe 呼吸微光（均带 reduced-motion 回退） - ThinkingIndicator 升级为明显波动；新增 Spinner / StreamingBar / GenerationSkeleton 原子件；Button 加 loading 态 - 写作台：首 token 前正文区『AI 正在构思本章…』占位（补最大缺口，不再空白像卡死）+ 流式顶部进度条 - 整章重写流式进度条；续写/润色忙碌骨架 + 触发键转圈；生成器/角色/世界观改用 Button loading
33 lines
1016 B
TypeScript
33 lines
1016 B
TypeScript
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-1" aria-hidden="true">
|
||
{[0, 1, 2].map((i) => (
|
||
<span
|
||
key={i}
|
||
className="ai-dot h-2 w-2 rounded-full bg-current"
|
||
style={{ animationDelay: `${i * 150}ms` }}
|
||
/>
|
||
))}
|
||
</span>
|
||
<span>{label}</span>
|
||
</span>
|
||
);
|
||
}
|