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:
18
apps/web/components/ui/StreamingBar.tsx
Normal file
18
apps/web/components/ui/StreamingBar.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import { cn } from "@/lib/ui/variants";
|
||||
|
||||
interface StreamingBarProps {
|
||||
label?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
// AI 流式/处理中·不确定进度条:细朱砂条来回扫,明确传达"正在工作"。
|
||||
// 显隐由调用方控制(只在生成时挂载);reduced-motion 下为静态朱砂条(见 globals.css)。
|
||||
export function StreamingBar({ label = "AI 生成中", className }: StreamingBarProps) {
|
||||
return (
|
||||
<div
|
||||
role="progressbar"
|
||||
aria-label={label}
|
||||
className={cn("ai-stream-track h-0.5 w-full rounded-full", className)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user