feat: add version check

src/app/login/page.tsx

@@ -5,9 +5,55 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useState } from 'react';
 
+import { checkForUpdates, CURRENT_VERSION } from '@/lib/version';
+
 import { useSite } from '@/components/SiteProvider';
 import { ThemeToggle } from '@/components/ThemeToggle';
 
+// 版本显示组件
+function VersionDisplay() {
+  const [hasUpdate, setHasUpdate] = useState(false);
+  const [isChecking, setIsChecking] = useState(true);
+
+  useEffect(() => {
+    const checkUpdate = async () => {
+      try {
+        const updateAvailable = await checkForUpdates();
+        setHasUpdate(updateAvailable);
+      } catch (_) {
+        // do nothing
+      } finally {
+        setIsChecking(false);
+      }
+    };
+
+    checkUpdate();
+  }, []);
+
+  return (
+    <button
+      onClick={() =>
+        window.open('https://github.com/senshinya/MoonTV', '_blank')
+      }
+      className='absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 transition-colors cursor-pointer'
+    >
+      <span className='font-mono'>v{CURRENT_VERSION}</span>
+      {!isChecking && hasUpdate && (
+        <div className='flex items-center gap-1.5 text-green-600 dark:text-green-400'>
+          <svg className='w-3.5 h-3.5' fill='currentColor' viewBox='0 0 20 20'>
+            <path
+              fillRule='evenodd'
+              d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
+              clipRule='evenodd'
+            />
+          </svg>
+          <span className='font-semibold text-xs'>有新版本</span>
+        </div>
+      )}
+    </button>
+  );
+}
+
 function LoginPageClient() {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -170,6 +216,9 @@ function LoginPageClient() {
           )}
         </form>
       </div>
+
+      {/* 版本信息显示 */}
+      <VersionDisplay />
     </div>
   );
 }

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)}

src/lib/version.ts

@@ -0,0 +1,90 @@
+/* eslint-disable no-console */
+
+'use client';
+
+const CURRENT_VERSION = '20250728004845';
+
+// 远程版本检查URL配置
+const VERSION_CHECK_URLS = [
+  'https://ghfast.top/raw.githubusercontent.com/senshinya/MoonTV/main/VERSION.txt',
+  'https://raw.githubusercontent.com/senshinya/MoonTV/main/VERSION.txt',
+];
+
+/**
+ * 检查是否有新版本可用
+ * @returns Promise<boolean> - true表示有新版本，false表示当前版本是最新的
+ */
+export async function checkForUpdates(): Promise<boolean> {
+  try {
+    // 尝试从主要URL获取版本信息
+    const primaryVersion = await fetchVersionFromUrl(VERSION_CHECK_URLS[0]);
+    if (primaryVersion) {
+      return compareVersions(primaryVersion);
+    }
+
+    // 如果主要URL失败，尝试备用URL
+    const backupVersion = await fetchVersionFromUrl(VERSION_CHECK_URLS[1]);
+    if (backupVersion) {
+      return compareVersions(backupVersion);
+    }
+
+    // 如果两个URL都失败，返回false（假设当前版本是最新的）
+    return false;
+  } catch (error) {
+    console.error('版本检查失败:', error);
+    return false;
+  }
+}
+
+/**
+ * 从指定URL获取版本信息
+ * @param url - 版本信息URL
+ * @returns Promise<string | null> - 版本字符串或null
+ */
+async function fetchVersionFromUrl(url: string): Promise<string | null> {
+  try {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时
+
+    const response = await fetch(url, {
+      method: 'GET',
+      signal: controller.signal,
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    });
+
+    clearTimeout(timeoutId);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const version = await response.text();
+    return version.trim();
+  } catch (error) {
+    console.warn(`从 ${url} 获取版本信息失败:`, error);
+    return null;
+  }
+}
+
+/**
+ * 比较版本号
+ * @param remoteVersion - 远程版本号
+ * @returns boolean - true表示远程版本更新
+ */
+function compareVersions(remoteVersion: string): boolean {
+  try {
+    // 将版本号转换为数字进行比较
+    const current = parseInt(CURRENT_VERSION, 10);
+    const remote = parseInt(remoteVersion, 10);
+
+    return remote !== current;
+  } catch (error) {
+    console.error('版本比较失败:', error);
+    return false;
+  }
+}
+
+// 导出当前版本号供其他地方使用
+export { CURRENT_VERSION };