feat(ui): 强化 AI 工作中动效——构思占位/流式进度条/波动三点/转圈

- 动效基元:ai-dot 波动(三点竖跳)、ai-stream 不确定进度条、ai-breathe 呼吸微光(均带 reduced-motion 回退)
- ThinkingIndicator 升级为明显波动;新增 Spinner / StreamingBar / GenerationSkeleton 原子件;Button 加 loading 态
- 写作台:首 token 前正文区『AI 正在构思本章…』占位(补最大缺口,不再空白像卡死)+ 流式顶部进度条
- 整章重写流式进度条;续写/润色忙碌骨架 + 触发键转圈;生成器/角色/世界观改用 Button loading
This commit is contained in:
Yaojia Wang
2026-07-12 19:32:18 +02:00
parent 9bc0e1f2e6
commit 1afeb2cdb5
16 changed files with 227 additions and 28 deletions

View File

@@ -0,0 +1,13 @@
import { GenerationSkeleton } from "@/components/ui/GenerationSkeleton";
// 正文区「AI 正在构思本章」占位(补首 token 前的最大缺口——长首字延迟不再像卡死)。
// 覆盖编辑区absolute inset-0 + bg-bg 遮住空/陈旧正文),三点波动 + 呼吸微光占位行示意即将落笔;
// 首个 token 到达stream 有正文)即由 Editor 卸载换成正文。role=status/aria-live 由内部
// ThinkingIndicator 提供,读屏可知在生成。放在 Editor 的 relative 容器内。
export function ThinkingPlaceholder() {
return (
<div className="absolute inset-0 z-10 rounded bg-bg pt-1">
<GenerationSkeleton label="AI 正在构思本章…" size="lg" lines={5} />
</div>
);
}