feat: 食品添加剂课程业务开发（接待/主场景/取证/记录/信函学习页面）

src/pages/Record/components/DialogueBubble.tsx

@@ -0,0 +1,101 @@
+import { useLayoutEffect, useRef } from "react";
+import { cn, getStaticImage } from "@/utils";
+import { EASE_OUT, gsap, useReducedMotion } from "@/utils/motion";
+import type { DialogueBubbleProps } from "./DialogueBubble.types";
+
+const SPEAKERS = {
+	detective: {
+		tag: "record/称号标签-添侦探",
+		bubble: "record/添侦探.svg",
+		align: "left",
+		tagClassName: "left-10 h-18",
+		textClassName: "pl-12 pr-16",
+	},
+	assistant: {
+		tag: "record/称号标签-侦探助手",
+		bubble: "record/侦探助手.svg",
+		align: "right",
+		tagClassName: "right-14 h-20",
+		textClassName: "pl-10 pr-16",
+	},
+} as const;
+
+export function DialogueBubble({ line }: DialogueBubbleProps) {
+	const rootRef = useRef<HTMLDivElement>(null);
+	const reduced = useReducedMotion();
+	const speaker = SPEAKERS[line.speaker];
+	const fromRight = speaker.align === "right";
+
+	// 新消息从发言角色方向滑入，并带轻微回弹
+	useLayoutEffect(() => {
+		const node = rootRef.current;
+		if (!node) return;
+
+		if (reduced) {
+			gsap.set(node, { opacity: 1, x: 0, y: 0, scale: 1 });
+			return;
+		}
+
+		const tween = gsap.fromTo(
+			node,
+			{
+				opacity: 0,
+				x: fromRight ? 55 : -55,
+				y: 18,
+				scale: 0.92,
+			},
+			{
+				opacity: 1,
+				x: 0,
+				y: 0,
+				scale: 1,
+				duration: 0.55,
+				ease: EASE_OUT,
+			},
+		);
+
+		return () => {
+			tween.kill();
+		};
+	}, [fromRight, reduced]);
+
+	return (
+		<div
+			ref={rootRef}
+			className={cn(
+				"flex w-full flex-col",
+				fromRight ? "items-end" : "items-start",
+			)}
+		>
+			<div className="relative min-h-35 w-fit max-w-full shrink-0 ">
+				<img
+					src={getStaticImage(speaker.bubble)}
+					alt=""
+					aria-hidden="true"
+					draggable={false}
+					className="pointer-events-none absolute inset-0 h-full w-full max-w-none select-none"
+				/>
+
+				<img
+					src={getStaticImage(speaker.tag)}
+					alt=""
+					aria-hidden="true"
+					draggable={false}
+					className={cn(
+						"absolute -top-10 z-10 max-w-none select-none",
+						speaker.tagClassName,
+					)}
+				/>
+
+				<p
+					className={cn(
+						"relative flex h-full items-center whitespace-nowrap text-[28px] leading-normal text-[#5b4632]",
+						speaker.textClassName,
+					)}
+				>
+					{line.text}
+				</p>
+			</div>
+		</div>
+	);
+}