Ma/LunaTV
1
0
Fork 0
mirror of https://github.com/MoonTechLab/LunaTV.git synced 2026-02-21 00:44:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: version indicator

Browse Source
This commit is contained in:
shinya
2025-07-28 01:20:11 +08:00
parent 3487ec826d
commit 05dc573ac6
4 changed files with 66 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
VERSION.txt
View File

@@ -1 +1 @@
20250728004933
20250728012011

41
src/app/login/page.tsx
View File

@@ -2,24 +2,25 @@
'use client';
import { AlertCircle, CheckCircle } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Suspense, useEffect, useState } from 'react';
import { checkForUpdates, CURRENT_VERSION } from '@/lib/version';
import { checkForUpdates, CURRENT_VERSION, UpdateStatus } from '@/lib/version';
import { useSite } from '@/components/SiteProvider';
import { ThemeToggle } from '@/components/ThemeToggle';
// 版本显示组件
function VersionDisplay() {
const [hasUpdate, setHasUpdate] = useState(false);
const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
const [isChecking, setIsChecking] = useState(true);
useEffect(() => {
const checkUpdate = async () => {
try {
const updateAvailable = await checkForUpdates();
setHasUpdate(updateAvailable);
const status = await checkForUpdates();
setUpdateStatus(status);
} catch (_) {
// do nothing
} finally {
@@ -38,16 +39,28 @@ function VersionDisplay() {
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>
{!isChecking && updateStatus !== UpdateStatus.FETCH_FAILED && (
<div
className={`flex items-center gap-1.5 ${
updateStatus === UpdateStatus.HAS_UPDATE
? 'text-yellow-600 dark:text-yellow-400'
: updateStatus === UpdateStatus.NO_UPDATE
? 'text-green-600 dark:text-green-400'
: ''
}`}
>
{updateStatus === UpdateStatus.HAS_UPDATE && (
<>
<AlertCircle className='w-3.5 h-3.5' />
<span className='font-semibold text-xs'>有新版本</span>
</>
)}
{updateStatus === UpdateStatus.NO_UPDATE && (
<>
<CheckCircle className='w-3.5 h-3.5' />
<span className='font-semibold text-xs'>已是最新</span>
</>
)}
</div>
)}
</button>

29
src/components/UserMenu.tsx
View File

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
import { checkForUpdates, CURRENT_VERSION } from '@/lib/version';
import { checkForUpdates, CURRENT_VERSION, UpdateStatus } from '@/lib/version';
interface AuthInfo {
username?: string;
@@ -39,7 +39,8 @@ export const UserMenu: React.FC = () => {
const [passwordError, setPasswordError] = useState('');
// 版本检查相关状态
const [hasUpdate, setHasUpdate] = useState(false);
const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
const [isChecking, setIsChecking] = useState(true);
// 确保组件已挂载
useEffect(() => {
@@ -112,10 +113,12 @@ export const UserMenu: React.FC = () => {
useEffect(() => {
const checkUpdate = async () => {
try {
const updateAvailable = await checkForUpdates();
setHasUpdate(updateAvailable);
const status = await checkForUpdates();
setUpdateStatus(status);
} catch (error) {
console.warn('版本检查失败:', error);
} finally {
setIsChecking(false);
}
};
@@ -406,9 +409,19 @@ export const UserMenu: React.FC = () => {
>
<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>
)}
{!isChecking &&
updateStatus &&
updateStatus !== UpdateStatus.FETCH_FAILED && (
<div
className={`w-2 h-2 rounded-full -translate-y-2 ${
updateStatus === UpdateStatus.HAS_UPDATE
? 'bg-yellow-500'
: updateStatus === UpdateStatus.NO_UPDATE
? 'bg-green-400'
: ''
}`}
></div>
)}
</div>
</button>
</div>
@@ -716,7 +729,7 @@ export const UserMenu: React.FC = () => {
>
<User className='w-full h-full' />
</button>
{hasUpdate && (
{updateStatus === UpdateStatus.HAS_UPDATE && (
<div className='absolute top-[2px] right-[2px] w-2 h-2 bg-yellow-500 rounded-full'></div>
)}
</div>

27
src/lib/version.ts
View File

@@ -2,7 +2,14 @@
'use client';
const CURRENT_VERSION = '20250728004933';
const CURRENT_VERSION = '20250728012011';
// 版本检查结果枚举
export enum UpdateStatus {
HAS_UPDATE = 'has_update', // 有新版本
NO_UPDATE = 'no_update', // 无新版本
FETCH_FAILED = 'fetch_failed', // 获取失败
}
// 远程版本检查URL配置
const VERSION_CHECK_URLS = [
@@ -12,9 +19,9 @@ const VERSION_CHECK_URLS = [
/**
* 检查是否有新版本可用
* @returns Promise<boolean> - true表示有新版本，false表示当前版本是最新的
* @returns Promise<UpdateStatus> - 返回版本检查状态
*/
export async function checkForUpdates(): Promise<boolean> {
export async function checkForUpdates(): Promise<UpdateStatus> {
try {
// 尝试从主要URL获取版本信息
const primaryVersion = await fetchVersionFromUrl(VERSION_CHECK_URLS[0]);
@@ -28,11 +35,11 @@ export async function checkForUpdates(): Promise<boolean> {
return compareVersions(backupVersion);
}
// 如果两个URL都失败，返回false（假设当前版本是最新的）
return false;
// 如果两个URL都失败，返回获取失败状态
return UpdateStatus.FETCH_FAILED;
} catch (error) {
console.error('版本检查失败:', error);
return false;
return UpdateStatus.FETCH_FAILED;
}
}
@@ -71,18 +78,18 @@ async function fetchVersionFromUrl(url: string): Promise<string | null> {
/**
* 比较版本号
* @param remoteVersion - 远程版本号
* @returns boolean - true表示远程版本更新
* @returns UpdateStatus - 返回版本比较结果
*/
function compareVersions(remoteVersion: string): boolean {
function compareVersions(remoteVersion: string): UpdateStatus {
try {
// 将版本号转换为数字进行比较
const current = parseInt(CURRENT_VERSION, 10);
const remote = parseInt(remoteVersion, 10);
return remote !== current;
return remote > current ? UpdateStatus.HAS_UPDATE : UpdateStatus.NO_UPDATE;
} catch (error) {
console.error('版本比较失败:', error);
return false;
return UpdateStatus.FETCH_FAILED;
}
}