feat: add version check

src/components/UserMenu.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
+import { checkForUpdates, CURRENT_VERSION } from '@/lib/version';
 
 interface AuthInfo {
   username?: string;
@@ -37,6 +38,9 @@ export const UserMenu: React.FC = () => {
   const [passwordLoading, setPasswordLoading] = useState(false);
   const [passwordError, setPasswordError] = useState('');
 
+  // 版本检查相关状态
+  const [hasUpdate, setHasUpdate] = useState(false);
+
   // 确保组件已挂载
   useEffect(() => {
     setMounted(true);
@@ -104,6 +108,20 @@ export const UserMenu: React.FC = () => {
     }
   }, []);
 
+  // 版本检查
+  useEffect(() => {
+    const checkUpdate = async () => {
+      try {
+        const updateAvailable = await checkForUpdates();
+        setHasUpdate(updateAvailable);
+      } catch (error) {
+        console.warn('版本检查失败:', error);
+      }
+    };
+
+    checkUpdate();
+  }, []);
+
   const handleMenuClick = () => {
     setIsOpen(!isOpen);
   };
@@ -375,6 +393,24 @@ export const UserMenu: React.FC = () => {
             <LogOut className='w-4 h-4' />
             <span className='font-medium'>登出</span>
           </button>
+
+          {/* 分割线 */}
+          <div className='my-1 border-t border-gray-200 dark:border-gray-700'></div>
+
+          {/* 版本信息 */}
+          <button
+            onClick={() =>
+              window.open('https://github.com/senshinya/MoonTV', '_blank')
+            }
+            className='w-full px-3 py-2 text-center flex items-center justify-center text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors text-xs'
+          >
+            <div className='flex items-center gap-1'>
+              <span className='font-mono'>v{CURRENT_VERSION}</span>
+              {hasUpdate && (
+                <div className='w-2 h-2 bg-yellow-500 rounded-full -translate-y-1'></div>
+              )}
+            </div>
+          </button>
         </div>
       </div>
     </>
@@ -672,13 +708,18 @@ export const UserMenu: React.FC = () => {
 
   return (
     <>
-      <button
-        onClick={handleMenuClick}
-        className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
-        aria-label='User Menu'
-      >
-        <User className='w-full h-full' />
-      </button>
+      <div className='relative'>
+        <button
+          onClick={handleMenuClick}
+          className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
+          aria-label='User Menu'
+        >
+          <User className='w-full h-full' />
+        </button>
+        {hasUpdate && (
+          <div className='absolute top-[2px] right-[2px] w-2 h-2 bg-yellow-500 rounded-full'></div>
+        )}
+      </div>
 
       {/* 使用 Portal 将菜单面板渲染到 document.body */}
       {isOpen && mounted && createPortal(menuPanel, document.body)}