55 lines
2.5 KiB
TypeScript
55 lines
2.5 KiB
TypeScript
import { useUserStore } from '@/stores';
|
||
import { FaDownload } from "react-icons/fa6";
|
||
import useVersionData from '@/hooks/useVersionData';
|
||
|
||
|
||
const HeaderInfo = () => {
|
||
const { user } = useUserStore();
|
||
const version = useVersionData();
|
||
|
||
return (
|
||
<div className="flex justify-between items-center xs:px-6 container mx-auto">
|
||
<div className='flex items-center'>
|
||
{/* 头像 */}
|
||
<img
|
||
src={user?.avatar || 'https://q1.qlogo.cn/g?b=qq&nk=3311118881&s=640'} alt="avatar"
|
||
className="w-16 xs:w-24 h-16 xs:h-24 rounded-full mr-4 transition-transform duration-300 transform hover:scale-125 avatar-animation"
|
||
/>
|
||
|
||
{/* 信息 */}
|
||
<div className="info">
|
||
<div className="font-medium text-gradient">
|
||
<div className='text-2xl'>Hello <span className='pr-4'>{user?.name || '未命名'}!</span></div>
|
||
<div className='text-base xsm:text-lg xs:mt-2.5'>欢迎使用 ThriveX 现代化博客管理系统</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 项目版本号 */}
|
||
<div className='hidden md:flex md:flex-col space-y-1 xl:mr-30'>
|
||
{
|
||
version.tag_name === import.meta.env.VITE_VERSION
|
||
? <p>🎉 当前版本为：<b className='inline-block px-2 text-white bg-green-600 rounded-md'>{version.tag_name} 最新版</b></p>
|
||
: (
|
||
<>
|
||
<div className='flex space-x-4'>
|
||
<p>当前版本：<b className='inline-block px-2 text-white bg-blue-400 rounded-md'>{import.meta.env.VITE_VERSION}</b></p>
|
||
<p>最新版本：<b className='inline-block px-2 text-white bg-red-500 rounded-md'>{version.tag_name}</b></p>
|
||
</div>
|
||
|
||
<p>更新说明：{version.name}</p>
|
||
|
||
<div className='group flex items-center'>
|
||
<FaDownload className='group-hover:text-primary transition-colors' />
|
||
<a href={version.tarball_url} className='group-hover:text-primary pl-2 transition-colors'>点击下载最新版</a>
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default HeaderInfo;
|