fix: compact embedded agent preset cards
This commit is contained in:
parent
98fe210b64
commit
87a6e6561d
@ -14,6 +14,7 @@ interface AgentPresetCardDarkProps {
|
|||||||
onEdit?: (preset: AgentPreset) => void;
|
onEdit?: (preset: AgentPreset) => void;
|
||||||
onDelete?: (preset: AgentPreset) => void;
|
onDelete?: (preset: AgentPreset) => void;
|
||||||
index?: number;
|
index?: number;
|
||||||
|
compact?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function AgentPresetCardDark({
|
export function AgentPresetCardDark({
|
||||||
@ -24,6 +25,7 @@ export function AgentPresetCardDark({
|
|||||||
onEdit,
|
onEdit,
|
||||||
onDelete,
|
onDelete,
|
||||||
index = 0,
|
index = 0,
|
||||||
|
compact = false,
|
||||||
}: AgentPresetCardDarkProps) {
|
}: AgentPresetCardDarkProps) {
|
||||||
const previewUrl =
|
const previewUrl =
|
||||||
preset.avatarUrl ||
|
preset.avatarUrl ||
|
||||||
@ -81,6 +83,55 @@ export function AgentPresetCardDark({
|
|||||||
? "场景图"
|
? "场景图"
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
|
if (compact) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 16 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.35,
|
||||||
|
delay: index * 0.03,
|
||||||
|
ease: [0.25, 0.46, 0.45, 0.94],
|
||||||
|
}}
|
||||||
|
whileHover={{ y: -3, scale: 1.01 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
className={cn(
|
||||||
|
"group relative cursor-pointer overflow-hidden rounded-2xl border p-2.5 transition-all duration-300",
|
||||||
|
selected
|
||||||
|
? "border-emerald-400/40 bg-emerald-500/[0.08] shadow-[0_0_24px_rgba(16,185,129,0.14)]"
|
||||||
|
: "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]"
|
||||||
|
)}
|
||||||
|
onClick={() => onSelect(preset.id)}
|
||||||
|
>
|
||||||
|
<div className="relative mx-auto h-[70px] w-[70px] overflow-hidden rounded-2xl border border-white/10 bg-black/30">
|
||||||
|
{previewUrl ? (
|
||||||
|
<img
|
||||||
|
src={previewUrl}
|
||||||
|
alt={preset.name}
|
||||||
|
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className={cn("flex h-full w-full items-center justify-center bg-gradient-to-br", typeInfo.gradient)}>
|
||||||
|
<TypeIcon className="h-7 w-7 text-white" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/35 to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-2 space-y-1 text-center">
|
||||||
|
<div className="line-clamp-2 min-h-[2.5rem] text-[12px] font-medium leading-5 text-white">
|
||||||
|
{preset.name}
|
||||||
|
</div>
|
||||||
|
<div className="text-[10px] text-white/45">{imageModeLabel || typeInfo.label}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selected ? (
|
||||||
|
<div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-emerald-300/40" />
|
||||||
|
) : null}
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 30 }}
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
|||||||
@ -200,9 +200,9 @@ export function AgentPresetPanelDarkV2({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 卡片网格 */}
|
{/* 卡片网格 */}
|
||||||
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 2xl:grid-cols-3">
|
<div className="grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-2.5">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="flex items-center justify-center py-8 md:col-span-2 2xl:col-span-3">
|
<div className="col-span-full flex items-center justify-center py-8">
|
||||||
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
|
<Loader2 className="h-6 w-6 animate-spin text-violet-500" />
|
||||||
</div>
|
</div>
|
||||||
) : filteredPresets.length > 0 ? (
|
) : filteredPresets.length > 0 ? (
|
||||||
@ -217,11 +217,12 @@ export function AgentPresetPanelDarkV2({
|
|||||||
onEdit={setEditingPreset}
|
onEdit={setEditingPreset}
|
||||||
onDelete={handleDeletePreset}
|
onDelete={handleDeletePreset}
|
||||||
index={index}
|
index={index}
|
||||||
|
compact
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
) : (
|
) : (
|
||||||
<div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-8 text-center md:col-span-2 2xl:col-span-3">
|
<div className="col-span-full rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-8 text-center">
|
||||||
<div className="text-sm text-white/40">暂无{embeddedEntityLabel}</div>
|
<div className="text-sm text-white/40">暂无{embeddedEntityLabel}</div>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user