118 lines
4.4 KiB
TypeScript
118 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { ArrowLeft, Star } from 'lucide-react';
|
|
import ScreenshotsTab from './components/ScreenshotsTab';
|
|
import StarredTab from './components/StarredTab';
|
|
import CredentialsTab from './components/CredentialsTab';
|
|
import { ScreenRecord } from './types';
|
|
import { formatDate } from './utils';
|
|
|
|
export default function HostDetail() {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const hostname = params.hostname as string;
|
|
|
|
// 状态管理
|
|
const [activeTab, setActiveTab] = useState('screenshots');
|
|
const [selectedDate, setSelectedDate] = useState<string | null>(null);
|
|
const [jumpRequest, setJumpRequest] = useState<{ timestamp: number; recordId?: string } | null>(null);
|
|
const [lastUpdate, setLastUpdate] = useState<string | null>(null);
|
|
|
|
const handleViewRecord = (record: ScreenRecord) => {
|
|
const date = new Date(record.timestamp);
|
|
const dateStr = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
|
|
|
|
setSelectedDate(dateStr);
|
|
setJumpRequest({
|
|
timestamp: date.getTime(),
|
|
recordId: record.id
|
|
});
|
|
setActiveTab('screenshots');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 overflow-x-hidden">
|
|
<div className="max-w-8xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
{/* 头部导航 */}
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<button
|
|
onClick={() => router.back()}
|
|
className="inline-flex items-center text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
|
|
>
|
|
<ArrowLeft className="h-5 w-5 mr-2" />
|
|
返回
|
|
</button>
|
|
<h1 className="text-3xl font-semibold text-gray-900 dark:text-white mt-2">
|
|
{decodeURI(hostname)}
|
|
</h1>
|
|
</div>
|
|
{lastUpdate && (
|
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
|
最后更新: {formatDate(lastUpdate)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 选项卡导航 */}
|
|
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
|
<nav className="-mb-px flex space-x-8">
|
|
<button
|
|
onClick={() => setActiveTab('screenshots')}
|
|
className={`py-2 px-1 border-b-2 font-medium text-sm ${activeTab === 'screenshots'
|
|
? 'border-blue-600 text-blue-600'
|
|
: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
|
|
}`}
|
|
>
|
|
截图时间线
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('starred')}
|
|
className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'starred'
|
|
? 'border-blue-600 text-blue-600'
|
|
: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
|
|
}`}
|
|
>
|
|
<Star className="h-4 w-4 mr-1" />
|
|
星标记录
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('credentials')}
|
|
className={`py-2 px-1 border-b-2 font-medium text-sm ${activeTab === 'credentials'
|
|
? 'border-blue-600 text-blue-600'
|
|
: 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-300 dark:hover:border-gray-600'
|
|
}`}
|
|
>
|
|
凭据信息
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* 选项卡内容 */}
|
|
{activeTab === 'screenshots' && (
|
|
<ScreenshotsTab
|
|
hostname={hostname}
|
|
selectedDate={selectedDate}
|
|
onDateChange={setSelectedDate}
|
|
jumpRequest={jumpRequest}
|
|
onLastUpdateChange={setLastUpdate}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'starred' && (
|
|
<StarredTab
|
|
hostname={hostname}
|
|
onViewRecord={handleViewRecord}
|
|
/>
|
|
)}
|
|
|
|
{activeTab === 'credentials' && (
|
|
<CredentialsTab hostname={hostname} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|