281 lines
10 KiB
TypeScript
281 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { SparklesIcon } from "./icons";
|
|
|
|
// 预定义的颜色主题
|
|
const COLOR_THEMES = {
|
|
purple: {
|
|
ping: "bg-purple-500/20",
|
|
pulse: "bg-purple-500/10",
|
|
ring: "ring-purple-500/30",
|
|
text: "text-purple-500",
|
|
dot: "bg-purple-500",
|
|
gradientFrom: "from-purple-400",
|
|
gradientVia: "via-pink-400",
|
|
gradientTo: "to-blue-400",
|
|
overlay1From: "from-purple-500/40",
|
|
overlay1To: "to-pink-500/40",
|
|
overlay2From: "from-blue-500/30",
|
|
overlay2To: "to-purple-500/30",
|
|
},
|
|
blue: {
|
|
ping: "bg-blue-500/20",
|
|
pulse: "bg-blue-500/10",
|
|
ring: "ring-blue-500/30",
|
|
text: "text-blue-500",
|
|
dot: "bg-blue-500",
|
|
gradientFrom: "from-blue-400",
|
|
gradientVia: "via-cyan-400",
|
|
gradientTo: "to-teal-400",
|
|
overlay1From: "from-blue-500/40",
|
|
overlay1To: "to-cyan-500/40",
|
|
overlay2From: "from-teal-500/30",
|
|
overlay2To: "to-blue-500/30",
|
|
},
|
|
green: {
|
|
ping: "bg-green-500/20",
|
|
pulse: "bg-green-500/10",
|
|
ring: "ring-green-500/30",
|
|
text: "text-green-500",
|
|
dot: "bg-green-500",
|
|
gradientFrom: "from-green-400",
|
|
gradientVia: "via-emerald-400",
|
|
gradientTo: "to-teal-400",
|
|
overlay1From: "from-green-500/40",
|
|
overlay1To: "to-emerald-500/40",
|
|
overlay2From: "from-teal-500/30",
|
|
overlay2To: "to-green-500/30",
|
|
},
|
|
orange: {
|
|
ping: "bg-orange-500/20",
|
|
pulse: "bg-orange-500/10",
|
|
ring: "ring-orange-500/30",
|
|
text: "text-orange-500",
|
|
dot: "bg-orange-500",
|
|
gradientFrom: "from-orange-400",
|
|
gradientVia: "via-amber-400",
|
|
gradientTo: "to-yellow-400",
|
|
overlay1From: "from-orange-500/40",
|
|
overlay1To: "to-amber-500/40",
|
|
overlay2From: "from-yellow-500/30",
|
|
overlay2To: "to-orange-500/30",
|
|
},
|
|
red: {
|
|
ping: "bg-red-500/20",
|
|
pulse: "bg-red-500/10",
|
|
ring: "ring-red-500/30",
|
|
text: "text-red-500",
|
|
dot: "bg-red-500",
|
|
gradientFrom: "from-red-400",
|
|
gradientVia: "via-rose-400",
|
|
gradientTo: "to-pink-400",
|
|
overlay1From: "from-red-500/40",
|
|
overlay1To: "to-rose-500/40",
|
|
overlay2From: "from-pink-500/30",
|
|
overlay2To: "to-red-500/30",
|
|
},
|
|
} as const;
|
|
|
|
type ColorTheme = keyof typeof COLOR_THEMES;
|
|
|
|
interface ImageGenerationLoadingProps {
|
|
imageCount?: number; // 生成图片数量，默认 1
|
|
maxImages?: number; // 最大图片数限制，默认 6
|
|
colorTheme?: ColorTheme; // 颜色主题，默认 purple
|
|
modelName?: string; // 模型名称，用于显示
|
|
providerType?: string; // 提供商类型，用于自动选择颜色
|
|
phase?: "idle" | "queued" | "processing" | "finalizing" | "failed";
|
|
elapsedSeconds?: number;
|
|
}
|
|
|
|
/**
|
|
* 通用图片生成加载占位符组件
|
|
* 支持配置颜色主题和图片数量
|
|
*/
|
|
export const ImageGenerationLoading = memo(({
|
|
imageCount = 1,
|
|
maxImages = 6,
|
|
colorTheme,
|
|
modelName,
|
|
providerType,
|
|
phase = "processing",
|
|
elapsedSeconds = 0,
|
|
}: ImageGenerationLoadingProps) => {
|
|
// 根据 providerType 自动选择颜色主题
|
|
const getAutoColorTheme = (): ColorTheme => {
|
|
if (colorTheme) return colorTheme;
|
|
switch (providerType) {
|
|
case "gemini":
|
|
return "purple";
|
|
case "alibaba-image":
|
|
return "orange";
|
|
case "ruxa-image":
|
|
return "green";
|
|
case "volcano-vision":
|
|
return "blue";
|
|
default:
|
|
return "purple";
|
|
}
|
|
};
|
|
|
|
const theme = COLOR_THEMES[getAutoColorTheme()];
|
|
|
|
// 确保数量在有效范围内
|
|
const count = Math.min(Math.max(imageCount, 1), maxImages);
|
|
|
|
// 获取显示名称
|
|
const displayName = modelName || (providerType === "alibaba-image" ? "千问图片编辑" :
|
|
providerType === "ruxa-image" ? "RUXA 图片编辑" :
|
|
providerType === "volcano-vision" ? "即梦4.5" : "AI");
|
|
|
|
const phaseTitle =
|
|
phase === "queued"
|
|
? "正在排队准备生成"
|
|
: phase === "finalizing"
|
|
? "图片生成完成，正在加载结果"
|
|
: "正在生成图片";
|
|
const phaseHint =
|
|
phase === "queued"
|
|
? `${displayName} 正在排队，请稍候...`
|
|
: phase === "finalizing"
|
|
? `${displayName} 正在同步结果到聊天记录...`
|
|
: `${displayName} 正在创作 ${count} 张图片，请稍候...`;
|
|
const elapsedLabel = elapsedSeconds > 0 ? `已等待 ${elapsedSeconds} 秒` : null;
|
|
|
|
return (
|
|
<div
|
|
className="group/message fade-in w-full animate-in duration-300"
|
|
data-role="assistant"
|
|
data-testid="message-assistant-image-loading"
|
|
>
|
|
<div className="flex items-start justify-start gap-3">
|
|
{/* 头像 */}
|
|
<div className="relative -mt-1 flex size-8 shrink-0 items-center justify-center">
|
|
<div className={`absolute inset-0 rounded-full ${theme.ping} animate-ping`} />
|
|
<div className={`absolute inset-0 rounded-full ${theme.pulse} animate-pulse`} />
|
|
<div className={`relative flex size-8 items-center justify-center rounded-full bg-background ring-2 ${theme.ring}`}>
|
|
<div className={`animate-spin ${theme.text}`}>
|
|
<SparklesIcon size={14} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
{/* 文本提示 */}
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="text-base font-medium text-foreground">
|
|
{phaseTitle}
|
|
</span>
|
|
<span className="flex gap-1">
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${theme.dot} animate-bounce`}
|
|
style={{ animationDelay: "0ms" }}
|
|
/>
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${theme.dot} animate-bounce`}
|
|
style={{ animationDelay: "150ms" }}
|
|
/>
|
|
<span
|
|
className={`h-2 w-2 rounded-full ${theme.dot} animate-bounce`}
|
|
style={{ animationDelay: "300ms" }}
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
{/* 图片占位符 - 横向排列，每个 170x200px */}
|
|
<div className="flex gap-3 flex-wrap">
|
|
{Array.from({ length: count }, (_, index) => index).map((index) => (
|
|
<div
|
|
key={index}
|
|
className="relative overflow-hidden rounded-xl"
|
|
style={{ width: "170px", height: "200px" }}
|
|
>
|
|
{/* 底层渐变背景 */}
|
|
<div className={`absolute inset-0 bg-gradient-to-br ${theme.gradientFrom} ${theme.gradientVia} ${theme.gradientTo} opacity-60`} />
|
|
|
|
{/* 动态模糊叠加层 1 */}
|
|
<div
|
|
className={`absolute inset-0 bg-gradient-to-tr ${theme.overlay1From} via-transparent ${theme.overlay1To} animate-pulse`}
|
|
style={{ animationDuration: "2s", animationDelay: `${index * 0.3}s` }}
|
|
/>
|
|
|
|
{/* 动态模糊叠加层 2 */}
|
|
<div
|
|
className={`absolute inset-0 bg-gradient-to-bl ${theme.overlay2From} via-transparent ${theme.overlay2To} animate-pulse`}
|
|
style={{ animationDuration: "2.5s", animationDelay: `${0.5 + index * 0.3}s` }}
|
|
/>
|
|
|
|
{/* 噪点纹理效果 */}
|
|
<div
|
|
className="absolute inset-0 opacity-30"
|
|
style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
|
|
}}
|
|
/>
|
|
|
|
{/* 模糊叠加 */}
|
|
<div className="absolute inset-0 backdrop-blur-sm" />
|
|
|
|
{/* 中心图标 */}
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
|
<div className="relative">
|
|
{/* 外圈光晕 */}
|
|
<div className="absolute -inset-4 rounded-full bg-white/20 animate-ping" style={{ animationDuration: "1.5s", animationDelay: `${index * 0.2}s` }} />
|
|
{/* 图片图标 */}
|
|
<svg
|
|
className="h-10 w-10 text-white/80 animate-pulse"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
style={{ animationDuration: "1.5s", animationDelay: `${index * 0.2}s` }}
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={1.5}
|
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 流光效果 */}
|
|
<div
|
|
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full animate-shimmer"
|
|
style={{
|
|
animation: "shimmer 2s infinite",
|
|
animationDelay: `${index * 0.4}s`,
|
|
}}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 提示文字 */}
|
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
|
|
<span>{phaseHint}</span>
|
|
{elapsedLabel ? <span className="text-foreground/80">{elapsedLabel}</span> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 流光动画样式 */}
|
|
<style jsx>{`
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
ImageGenerationLoading.displayName = "ImageGenerationLoading";
|
|
|
|
export default ImageGenerationLoading;
|