133 lines
4.6 KiB
TypeScript
133 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { XCircle } from 'lucide-react';
|
|
import { format, differenceInMinutes } from 'date-fns';
|
|
|
|
interface Host {
|
|
hostname: string;
|
|
lastUpdate: string;
|
|
}
|
|
|
|
export default function Home() {
|
|
const router = useRouter();
|
|
const [hosts, setHosts] = useState<Host[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fetchHosts = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetch('/hosts');
|
|
if (!response.ok) throw new Error('获取主机列表失败');
|
|
const data = await response.json();
|
|
setHosts(data);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : '未知错误');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const formatDate = (date: string) => {
|
|
return format(new Date(date), 'yyyy-MM-dd HH:mm:ss');
|
|
};
|
|
|
|
const isRecent = (date: string) => {
|
|
const diffMinutes = differenceInMinutes(new Date(), new Date(date));
|
|
return diffMinutes <= 60; // 1小时内
|
|
};
|
|
|
|
const navigateToHost = (hostname: string) => {
|
|
router.push(`/hosts/${hostname}`);
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchHosts();
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
|
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<div className="px-4 py-6 sm:px-0">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h1 className="text-3xl font-semibold text-gray-900 dark:text-white">屏幕截图监控系统</h1>
|
|
<div className="space-x-4">
|
|
<button
|
|
onClick={() => router.push('/tasks')}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
|
|
>
|
|
定时任务管理
|
|
</button>
|
|
<button
|
|
onClick={() => router.push('/upload')}
|
|
className="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
|
|
>
|
|
上传新版本客户端
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 主机列表卡片网格 */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{hosts.map((host) => (
|
|
<div
|
|
key={host.hostname}
|
|
className="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden hover:shadow-md dark:hover:shadow-lg transition-shadow cursor-pointer"
|
|
onClick={() => navigateToHost(host.hostname)}
|
|
>
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="text-lg font-medium text-gray-900 dark:text-white">
|
|
{decodeURI(host.hostname)}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
最后更新: {formatDate(host.lastUpdate)}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div
|
|
className={`h-3 w-3 rounded-full ${
|
|
isRecent(host.lastUpdate) ? 'bg-green-500' : 'bg-gray-300 dark:bg-gray-600'
|
|
}`}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* 加载状态 */}
|
|
{loading && (
|
|
<div className="flex justify-center items-center mt-8">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900 dark:border-white"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 错误提示 */}
|
|
{error && (
|
|
<div className="mt-8 bg-red-50 dark:bg-red-900/50 p-4 rounded-md">
|
|
<div className="flex">
|
|
<div className="flex-shrink-0">
|
|
<XCircle className="h-5 w-5 text-red-400 dark:text-red-300" />
|
|
</div>
|
|
<div className="ml-3">
|
|
<h3 className="text-sm font-medium text-red-800 dark:text-red-200">
|
|
加载失败
|
|
</h3>
|
|
<div className="mt-2 text-sm text-red-700 dark:text-red-300">
|
|
<p>{error}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|