增加更明显的更新提示

src/components/UpdateNotification.tsx

@@ -0,0 +1,45 @@
+'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);
+
+  useEffect(() => {
+    // 检查认证信息
+    const authInfo = getAuthInfoFromBrowserCookie();
+    setIsOwner(authInfo?.role === 'owner');
+  }, []);
+
+  // 检查中、不是站长或没有更新时不渲染任何内容
+  if (isChecking || !isOwner || 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)}
+      />
+    </>
+  );
+};