156 lines
3.9 KiB
TypeScript
156 lines
3.9 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface NarrationProps {
|
|
/** 旁白文本 */
|
|
text: string;
|
|
/** 是否可见 */
|
|
visible: boolean;
|
|
/** 关闭回调 */
|
|
onClose: () => void;
|
|
/** 语音播报的音频文件路径（可选） */
|
|
audioSrc?: string;
|
|
/** 自定义样式类名 */
|
|
className?: string;
|
|
/** 是否启用逐字动画，默认 true */
|
|
enableAnimation?: boolean;
|
|
/** 文字动画速度（毫秒/字），默认 100ms */
|
|
animationSpeed?: number;
|
|
}
|
|
|
|
/**
|
|
* Narration - 旁白组件
|
|
*
|
|
* 功能：
|
|
* - 文字逐字显示动画
|
|
* - 可选语音播报
|
|
* - 关闭按钮
|
|
*/
|
|
const Narration = ({
|
|
text,
|
|
visible,
|
|
onClose,
|
|
audioSrc,
|
|
className,
|
|
enableAnimation = true,
|
|
animationSpeed = 100,
|
|
}: NarrationProps) => {
|
|
const [displayedText, setDisplayedText] = useState("");
|
|
const [isAnimating, setIsAnimating] = useState(true);
|
|
const [audio, setAudio] = useState<HTMLAudioElement | null>(null);
|
|
const [isSkipped, setIsSkipped] = useState(false);
|
|
|
|
// 文字动画效果
|
|
useEffect(() => {
|
|
if (!visible) {
|
|
setDisplayedText("");
|
|
setIsAnimating(true);
|
|
setIsSkipped(false);
|
|
return;
|
|
}
|
|
|
|
// 如果已经跳过，不再执行动画
|
|
if (isSkipped) {
|
|
return;
|
|
}
|
|
|
|
// 如果不启用动画，直接显示全部文本
|
|
if (!enableAnimation) {
|
|
setDisplayedText(text);
|
|
setIsAnimating(false);
|
|
return;
|
|
}
|
|
|
|
let currentIndex = 0;
|
|
setDisplayedText("");
|
|
setIsAnimating(true);
|
|
|
|
const timer = setInterval(() => {
|
|
if (currentIndex < text.length) {
|
|
setDisplayedText(text.slice(0, currentIndex + 1));
|
|
currentIndex++;
|
|
} else {
|
|
setIsAnimating(false);
|
|
clearInterval(timer);
|
|
}
|
|
}, animationSpeed);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [text, visible, enableAnimation, animationSpeed, isSkipped]);
|
|
|
|
// 跳过动画
|
|
const handleSkip = () => {
|
|
setDisplayedText(text);
|
|
setIsAnimating(false);
|
|
setIsSkipped(true);
|
|
};
|
|
|
|
// 语音播报
|
|
useEffect(() => {
|
|
if (!visible || !audioSrc) return;
|
|
|
|
const audioElement = new Audio(audioSrc);
|
|
audioElement.play().catch((error) => {
|
|
console.warn("Audio playback failed:", error);
|
|
});
|
|
setAudio(audioElement);
|
|
|
|
return () => {
|
|
audioElement.pause();
|
|
audioElement.currentTime = 0;
|
|
};
|
|
}, [visible, audioSrc]);
|
|
|
|
// 停止音频
|
|
const handleClose = () => {
|
|
if (audio) {
|
|
audio.pause();
|
|
audio.currentTime = 0;
|
|
}
|
|
onClose();
|
|
};
|
|
|
|
if (!visible) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50">
|
|
<div
|
|
className={cn(
|
|
"w-[1600px] bg-black/90 rounded-[32px] px-20 py-16",
|
|
"shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]",
|
|
"relative",
|
|
className
|
|
)}
|
|
>
|
|
{/* 跳过按钮 - 只在动画进行中显示 */}
|
|
{isAnimating && enableAnimation && (
|
|
<button
|
|
onClick={handleSkip}
|
|
className="absolute top-8 right-8 px-6 py-2 rounded-full bg-black/60 text-white text-xl backdrop-blur-sm border border-white/30 hover:bg-black/75 transition-colors"
|
|
>
|
|
跳过
|
|
</button>
|
|
)}
|
|
|
|
<div className="text-white text-3xl leading-relaxed space-y-8">
|
|
<p className="whitespace-pre-wrap">{displayedText}</p>
|
|
</div>
|
|
|
|
{/* 关闭按钮 - 只在动画完成后显示 */}
|
|
{!isAnimating && (
|
|
<div className="flex justify-center mt-14">
|
|
<button
|
|
onClick={handleClose}
|
|
className="px-12 py-2 bg-gradient-to-br from-[#d4c5a9] to-[#b8a88a] text-[#4e402e] text-3xl font-bold rounded-full border-3 border-[#8B7355] shadow-lg hover:scale-105 transition-transform"
|
|
>
|
|
已知晓
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Narration;
|