57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
|
|
import { UpdateStatus } from '@/lib/version_check';
|
|
|
|
import { useVersionCheck } from './VersionCheckProvider';
|
|
import { VersionPanel } from './VersionPanel';
|
|
|
|
export const UpdateNotification: React.FC = () => {
|
|
const { updateStatus, isChecking } = useVersionCheck();
|
|
const [isOwner, setIsOwner] = useState(false);
|
|
const [isVersionPanelOpen, setIsVersionPanelOpen] = useState(false);
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// 检查认证信息
|
|
const authInfo = getAuthInfoFromBrowserCookie();
|
|
setIsOwner(authInfo?.role === 'owner');
|
|
|
|
// 检查是否是移动设备
|
|
const checkMobile = () => {
|
|
setIsMobile(window.innerWidth < 768);
|
|
};
|
|
|
|
checkMobile();
|
|
window.addEventListener('resize', checkMobile);
|
|
|
|
return () => window.removeEventListener('resize', checkMobile);
|
|
}, []);
|
|
|
|
// 检查中、不是站长、是移动设备或没有更新时不渲染任何内容
|
|
if (isChecking || !isOwner || isMobile || updateStatus !== UpdateStatus.HAS_UPDATE) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => setIsVersionPanelOpen(true)}
|
|
className='flex items-center px-3 py-1.5 bg-yellow-100 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-full hover:bg-yellow-200 dark:hover:bg-yellow-900/50 transition-colors cursor-pointer'
|
|
>
|
|
<span className='text-xs font-medium text-yellow-800 dark:text-yellow-300'>
|
|
有更新
|
|
</span>
|
|
</button>
|
|
|
|
{/* 版本面板 */}
|
|
<VersionPanel
|
|
isOpen={isVersionPanelOpen}
|
|
onClose={() => setIsVersionPanelOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|