File size: 3,242 Bytes
59bd45e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import React from 'react';
import { ArrowLeft, MessageCircle } from 'lucide-react';
interface PageHeaderProps {
title?: string;
subtitle?: string;
onBack: () => void;
onChat: () => void;
showCharacter?: boolean;
characterImageUrl?: string;
}
export const PageHeader: React.FC<PageHeaderProps> = ({
title,
subtitle,
onBack,
onChat,
showCharacter = true,
characterImageUrl
}) => {
return (
<div className="w-full px-6 pt-8 pb-4 flex items-center justify-between relative z-10">
{/* 返回按钮 */}
<button
onClick={onBack}
className="
p-2.5 rounded-full
bg-white/40 backdrop-blur-sm
border border-white/50
text-slate-600 hover:text-slate-800
hover:bg-white/60 hover:scale-105
transition-all duration-300
shadow-sm hover:shadow-md
"
>
<ArrowLeft size={20} strokeWidth={2} />
</button>
{/* 中间标题区域 */}
<div className="flex-1 flex flex-col items-center justify-center mx-4">
{showCharacter && (
<div className="mb-2 relative">
{characterImageUrl ? (
<img
src={characterImageUrl}
alt="AI Companion"
className="w-12 h-12 rounded-full object-cover border-2 border-white/50 shadow-md"
/>
) : (
<div className="
w-12 h-12 rounded-full
bg-gradient-to-br from-purple-200 to-pink-200
border-2 border-white/50 shadow-md
flex items-center justify-center
">
<span className="text-lg">🐱</span>
</div>
)}
{/* 在线状态指示器 */}
<div className="
absolute -bottom-0.5 -right-0.5
w-3 h-3 rounded-full
bg-green-400 border-2 border-white
animate-pulse
" />
</div>
)}
{title && (
<h2 className="text-lg font-medium text-slate-700 tracking-wide">
{title}
</h2>
)}
{subtitle && (
<p className="text-xs text-slate-400 mt-0.5 tracking-wider">
{subtitle}
</p>
)}
</div>
{/* 对话按钮 */}
<button
onClick={onChat}
className="
relative p-2.5 rounded-full
bg-gradient-to-br from-purple-400 to-pink-400
text-white
hover:from-purple-500 hover:to-pink-500
hover:scale-105
transition-all duration-300
shadow-md hover:shadow-lg
animate-pulse-slow
"
>
<MessageCircle size={20} strokeWidth={2} />
{/* 提示气泡 */}
<div className="
absolute -top-1 -right-1
w-2 h-2 rounded-full
bg-red-400 border border-white
" />
</button>
<style>{`
@keyframes pulse-slow {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
.animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite;
}
`}</style>
</div>
);
};
|