1afeb2cdb5
- 动效基元：ai-dot 波动(三点竖跳)、ai-stream 不确定进度条、ai-breathe 呼吸微光（均带 reduced-motion 回退） - ThinkingIndicator 升级为明显波动；新增 Spinner / StreamingBar / GenerationSkeleton 原子件；Button 加 loading 态 - 写作台：首 token 前正文区『AI 正在构思本章…』占位（补最大缺口，不再空白像卡死）+ 流式顶部进度条 - 整章重写流式进度条；续写/润色忙碌骨架 + 触发键转圈；生成器/角色/世界观改用 Button loading
50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { ThinkingIndicator } from "@/components/ThinkingIndicator";
|
||
import { cn } from "@/lib/ui/variants";
|
||
|
||
interface GenerationSkeletonProps {
|
||
// 状态文案（如「续写中」「AI 正在构思本章…」）。
|
||
label: string;
|
||
// 呼吸微光占位行数（默认 3）。
|
||
lines?: number;
|
||
// sm：面板内小占位；lg：正文区大占位（更粗行 + 稍大标签）。
|
||
size?: "sm" | "lg";
|
||
className?: string;
|
||
}
|
||
|
||
// 占位行宽度序列（错落感，示意即将落笔的段落）。
|
||
const LINE_WIDTHS = ["90%", "78%", "84%", "68%", "72%"];
|
||
|
||
// AI 同步/构思等待占位：三点波动标签 + `ai-breathe` 呼吸微光占位行，
|
||
// 比单三点更明显地传达「正在生成」。占位行 aria-hidden；role=status/aria-live 由
|
||
// ThinkingIndicator 提供，读屏可知在生成。ai-breathe 自带 reduced-motion 回退。
|
||
export function GenerationSkeleton({
|
||
label,
|
||
lines = 3,
|
||
size = "sm",
|
||
className,
|
||
}: GenerationSkeletonProps) {
|
||
return (
|
||
<div className={cn("space-y-2.5", className)}>
|
||
<ThinkingIndicator
|
||
label={label}
|
||
className={cn("text-cinnabar", size === "lg" ? "text-sm" : "text-xs")}
|
||
/>
|
||
<div className="space-y-2" aria-hidden="true">
|
||
{Array.from({ length: lines }).map((_, i) => (
|
||
<div
|
||
key={i}
|
||
className={cn(
|
||
"ai-breathe rounded bg-line/60",
|
||
size === "lg" ? "h-3.5" : "h-3",
|
||
)}
|
||
style={{
|
||
width: LINE_WIDTHS[i % LINE_WIDTHS.length],
|
||
animationDelay: `${i * 160}ms`,
|
||
}}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|