60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import { Heart } from 'lucide-react';
|
|
import { motion } from 'motion/react';
|
|
|
|
import type { StoryNpcAffinityEffect } from '../../types';
|
|
|
|
interface NpcAffinityEffectBadgeProps {
|
|
effect: StoryNpcAffinityEffect;
|
|
}
|
|
|
|
/**
|
|
* 聊天结算后的好感度浮出特效。
|
|
* 仅负责表现层，不承担任何数值计算。
|
|
*/
|
|
export function NpcAffinityEffectBadge({
|
|
effect,
|
|
}: NpcAffinityEffectBadgeProps) {
|
|
const isPositive = effect.delta > 0;
|
|
const deltaText = `${effect.delta > 0 ? '+' : ''}${effect.delta}`;
|
|
|
|
return (
|
|
<motion.div
|
|
key={effect.eventId}
|
|
initial={{ opacity: 0, y: 24, scale: 0.8 }}
|
|
animate={{ opacity: [0, 1, 1, 0], y: [24, -8, -26, -44], scale: [0.8, 1.08, 1, 0.92] }}
|
|
transition={{ duration: 1.45, ease: 'easeOut' }}
|
|
className="pointer-events-none absolute -top-14 left-1/2 z-[12] flex -translate-x-1/2 items-center gap-1 rounded-full border px-2.5 py-1 shadow-[0_10px_24px_rgba(0,0,0,0.35)] backdrop-blur-[2px]"
|
|
data-testid={`npc-affinity-effect-${effect.npcId}`}
|
|
aria-label={`好感度变化 ${deltaText}`}
|
|
>
|
|
{isPositive ? (
|
|
<>
|
|
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.3),transparent_60%)]" />
|
|
<div className="absolute -inset-1 rounded-full bg-rose-400/18 blur-md" />
|
|
<div className="relative flex items-center gap-1 text-rose-50">
|
|
<Heart className="h-3.5 w-3.5 fill-current" />
|
|
<span className="text-xs font-semibold tracking-[0.08em]">
|
|
{deltaText}
|
|
</span>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.18),transparent_60%)]" />
|
|
<div className="absolute -inset-1 rounded-full bg-slate-400/15 blur-md" />
|
|
<div className="relative text-xs font-semibold tracking-[0.08em] text-slate-100">
|
|
{deltaText}
|
|
</div>
|
|
</>
|
|
)}
|
|
<div
|
|
className={`absolute inset-0 rounded-full border ${
|
|
isPositive
|
|
? 'border-rose-200/45 bg-rose-500/18'
|
|
: 'border-slate-200/35 bg-slate-700/30'
|
|
}`}
|
|
/>
|
|
</motion.div>
|
|
);
|
|
}
|