feat: 时间分布和详细时间点滑块横屏下左右分布
This commit is contained in:
parent
597d8e5d67
commit
5fa9d39c2f
@ -800,260 +800,264 @@ export default function HostDetail() {
|
||||
|
||||
{/* 截图时间线选项卡 */}
|
||||
{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 dark:text-white">时间分布</h2>
|
||||
<button
|
||||
onClick={fetchTimeDistribution}
|
||||
className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
<RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${loadingDistribution ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<div className="lg:flex lg:gap-6 items-start">
|
||||
<div className="lg:w-1/3 lg:flex-shrink-0 space-y-8">
|
||||
{/* 小时分布滑块（时间分布） */}
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-medium text-gray-900 dark:text-white">时间分布</h2>
|
||||
<button
|
||||
onClick={fetchTimeDistribution}
|
||||
className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
>
|
||||
<RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${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 dark:text-gray-400 mt-4">加载时间分布中...</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<RecordDatePicker
|
||||
value={selectedDate}
|
||||
dailyCounts={dailyCounts}
|
||||
onChange={setSelectedDate}
|
||||
/>
|
||||
{/* 详细时间点滑块 */}
|
||||
{showDetailTimeline && (
|
||||
<div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-lg font-medium text-gray-900 dark:text-white">时间点详情</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={generateVideo}
|
||||
disabled={generatingVideo}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white text-sm rounded focus:outline-none transition-colors"
|
||||
title="生成视频"
|
||||
>
|
||||
{generatingVideo ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Video className="h-4 w-4" />
|
||||
)}
|
||||
{generatingVideo ? '生成中...' : '生成视频'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
const selectedSec = Math.floor(hourlySliderValue / 3600000) * 3600;
|
||||
fetchHourlyRecords(selectedSec, selectedSec + 3600);
|
||||
}}
|
||||
className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
title="刷新"
|
||||
>
|
||||
<RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${loadingRecords ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{hourlySegments.length > 0 ? (
|
||||
<div className="mt-4">
|
||||
<TimelineSlider
|
||||
minTime={hourlyMinTime}
|
||||
maxTime={hourlyMaxTime}
|
||||
value={hourlySliderValue}
|
||||
mode="segments"
|
||||
segments={hourlySegments}
|
||||
onChange={onHourlySliderChange}
|
||||
/>
|
||||
{records.length > 0 ? (
|
||||
<TimelineSlider
|
||||
minTime={timeRange.min}
|
||||
maxTime={timeRange.max}
|
||||
value={detailedSliderValue}
|
||||
mode="ticks"
|
||||
markers={detailedMarkers}
|
||||
onChange={onDetailedSliderChange}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-500 dark:text-gray-400">加载记录中...</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-gray-500 dark:text-gray-400 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 dark:text-white">时间点详情</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={generateVideo}
|
||||
disabled={generatingVideo}
|
||||
className="flex items-center gap-2 px-3 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white text-sm rounded focus:outline-none transition-colors"
|
||||
title="生成视频"
|
||||
>
|
||||
{generatingVideo ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Video className="h-4 w-4" />
|
||||
)}
|
||||
{generatingVideo ? '生成中...' : '生成视频'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
const selectedSec = Math.floor(hourlySliderValue / 3600000) * 3600;
|
||||
fetchHourlyRecords(selectedSec, selectedSec + 3600);
|
||||
}}
|
||||
className="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
title="刷新"
|
||||
>
|
||||
<RefreshCcw className={`h-5 w-5 text-gray-600 dark:text-gray-400 ${loadingRecords ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{records.length > 0 ? (
|
||||
<TimelineSlider
|
||||
minTime={timeRange.min}
|
||||
maxTime={timeRange.max}
|
||||
value={detailedSliderValue}
|
||||
mode="ticks"
|
||||
markers={detailedMarkers}
|
||||
onChange={onDetailedSliderChange}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-gray-500 dark:text-gray-400">加载记录中...</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 图片预览区域及控制按钮 */}
|
||||
{selectedRecord && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
|
||||
{
|
||||
!(navigator as any).connection?.saveData &&
|
||||
records.map(record => record.screenshots).flat()
|
||||
.filter((_, index) => Math.abs(index - currentFrameIndex) <= 20)
|
||||
.map(screenshot => <link rel="preload" key={screenshot.fileId} href={`/screenshots/${screenshot.fileId}`} as="image" />)
|
||||
}
|
||||
{/* 图片预览区域 */}
|
||||
{selectedRecord.screenshots.map((screenshot, sIndex) => (
|
||||
<div key={sIndex} className="relative mb-6">
|
||||
<div
|
||||
className="relative w-full"
|
||||
style={{ aspectRatio: imageAspectRatio }}
|
||||
>
|
||||
<img
|
||||
src={`/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)}
|
||||
onError={() => onImageError(screenshot.fileId)}
|
||||
/>
|
||||
{loadingImageIds.has(screenshot.fileId) && (
|
||||
<div className="absolute top-2 right-2 bg-black/40 rounded-full p-2">
|
||||
<Loader2 className="h-5 w-5 text-white animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 图片说明 */}
|
||||
<div className="absolute bottom-4 left-4 bg-black/40 dark:bg-gray-900/40 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="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 mb-6 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
|
||||
{/* 速度控制 */}
|
||||
<div className="flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg px-4 py-2.5 shadow-sm border border-gray-200 dark:border-gray-600">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 min-w-max">播放速度</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={autoPlaySpeed}
|
||||
onChange={(e) => setAutoPlaySpeed(Number(e.target.value))}
|
||||
className="w-20 text-sm px-3 py-1.5 border border-gray-300 dark:border-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors"
|
||||
min="0"
|
||||
max="2000"
|
||||
step="50"
|
||||
<div className="lg:flex-1 min-w-0 mt-8 lg:mt-0">
|
||||
{selectedRecord && (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
|
||||
{
|
||||
!(navigator as any).connection?.saveData &&
|
||||
records.map(record => record.screenshots).flat()
|
||||
.filter((_, index) => Math.abs(index - currentFrameIndex) <= 20)
|
||||
.map(screenshot => <link rel="preload" key={screenshot.fileId} href={`/screenshots/${screenshot.fileId}`} as="image" />)
|
||||
}
|
||||
{/* 图片预览区域 */}
|
||||
{selectedRecord.screenshots.map((screenshot, sIndex) => (
|
||||
<div key={sIndex} className="relative mb-6">
|
||||
<div
|
||||
className="relative w-full"
|
||||
style={{ aspectRatio: imageAspectRatio }}
|
||||
>
|
||||
<img
|
||||
src={`/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)}
|
||||
onError={() => onImageError(screenshot.fileId)}
|
||||
/>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 min-w-max">毫秒</span>
|
||||
{loadingImageIds.has(screenshot.fileId) && (
|
||||
<div className="absolute top-2 right-2 bg-black/40 rounded-full p-2">
|
||||
<Loader2 className="h-5 w-5 text-white animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 图片说明 */}
|
||||
<div className="absolute bottom-4 left-4 bg-black/40 dark:bg-gray-900/40 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="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-4 mb-6 backdrop-blur-sm border border-gray-200/50 dark:border-gray-600/50">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
|
||||
{/* 速度控制 */}
|
||||
<div className="flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg px-4 py-2.5 shadow-sm border border-gray-200 dark:border-gray-600">
|
||||
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 min-w-max">播放速度</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={autoPlaySpeed}
|
||||
onChange={(e) => setAutoPlaySpeed(Number(e.target.value))}
|
||||
className="w-20 text-sm px-3 py-1.5 border border-gray-300 dark:border-gray-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors"
|
||||
min="0"
|
||||
max="2000"
|
||||
step="50"
|
||||
/>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400 min-w-max">毫秒</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 播放控制按钮 */}
|
||||
<button
|
||||
onClick={toggleAutoPlay}
|
||||
className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm ${autoPlay
|
||||
? 'bg-red-500 hover:bg-red-600 text-white shadow-red-500/25'
|
||||
: 'bg-blue-500 hover:bg-blue-600 text-white shadow-blue-500/25'
|
||||
} hover:shadow-lg hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 ${autoPlay ? 'focus:ring-red-500' : 'focus:ring-blue-500'
|
||||
}`}
|
||||
>
|
||||
{!autoPlay ? (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
|
||||
</svg>
|
||||
播放
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
暂停
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* 星标按钮 */}
|
||||
<button
|
||||
onClick={() => toggleRecordStar(selectedRecord.id)}
|
||||
disabled={updatingStars.has(selectedRecord.id)}
|
||||
className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm border ${selectedRecord.isStarred
|
||||
? 'bg-yellow-50 hover:bg-yellow-100 dark:bg-yellow-900/20 dark:hover:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 shadow-yellow-500/20'
|
||||
: 'bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-600 hover:text-yellow-600 dark:hover:text-yellow-400'
|
||||
} ${updatingStars.has(selectedRecord.id)
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500'
|
||||
}`}
|
||||
title={selectedRecord.isStarred ? '取消星标' : '添加星标'}
|
||||
>
|
||||
{updatingStars.has(selectedRecord.id) ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
处理中
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Star className={`h-4 w-4 ${selectedRecord.isStarred ? 'fill-current' : ''}`} />
|
||||
{selectedRecord.isStarred ? '已收藏' : '收藏'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 快捷键提示 */}
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
|
||||
<div className="flex flex-wrap justify-center gap-4 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">空格</kbd>
|
||||
播放/暂停
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">←/→</kbd>
|
||||
上一帧/下一帧
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">S</kbd>
|
||||
切换星标
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 播放控制按钮 */}
|
||||
<button
|
||||
onClick={toggleAutoPlay}
|
||||
className={`flex items-center gap-2 px-6 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm ${autoPlay
|
||||
? 'bg-red-500 hover:bg-red-600 text-white shadow-red-500/25'
|
||||
: 'bg-blue-500 hover:bg-blue-600 text-white shadow-blue-500/25'
|
||||
} hover:shadow-lg hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 ${autoPlay ? 'focus:ring-red-500' : 'focus:ring-blue-500'
|
||||
}`}
|
||||
>
|
||||
{!autoPlay ? (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
|
||||
</svg>
|
||||
播放
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
</svg>
|
||||
暂停
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* 星标按钮 */}
|
||||
<button
|
||||
onClick={() => toggleRecordStar(selectedRecord.id)}
|
||||
disabled={updatingStars.has(selectedRecord.id)}
|
||||
className={`flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200 shadow-sm border ${selectedRecord.isStarred
|
||||
? 'bg-yellow-50 hover:bg-yellow-100 dark:bg-yellow-900/20 dark:hover:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 shadow-yellow-500/20'
|
||||
: 'bg-white hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-600 hover:text-yellow-600 dark:hover:text-yellow-400'
|
||||
} ${updatingStars.has(selectedRecord.id)
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'hover:scale-105 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500'
|
||||
}`}
|
||||
title={selectedRecord.isStarred ? '取消星标' : '添加星标'}
|
||||
>
|
||||
{updatingStars.has(selectedRecord.id) ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
处理中
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Star className={`h-4 w-4 ${selectedRecord.isStarred ? 'fill-current' : ''}`} />
|
||||
{selectedRecord.isStarred ? '已收藏' : '收藏'}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 快捷键提示 */}
|
||||
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
|
||||
<div className="flex flex-wrap justify-center gap-4 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">空格</kbd>
|
||||
播放/暂停
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">←/→</kbd>
|
||||
上一帧/下一帧
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<kbd className="px-1.5 py-0.5 bg-gray-200 dark:bg-gray-600 rounded text-xs">S</kbd>
|
||||
切换星标
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 窗口信息 */}
|
||||
<div className="w-full">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3">活动窗口</h3>
|
||||
<div className="bg-gray-50 dark:bg-gray-700 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 dark:bg-gray-800 rounded-md shadow-sm">
|
||||
<div className="space-y-2">
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
{window.title}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 break-all">
|
||||
{window.path}
|
||||
</div>
|
||||
<div className="text-sm flex items-center text-gray-600 dark:text-gray-400">
|
||||
内存占用: {formatMemory(window.memory)}
|
||||
{/* 窗口信息 */}
|
||||
<div className="w-full">
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3">活动窗口</h3>
|
||||
<div className="bg-gray-50 dark:bg-gray-700 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 dark:bg-gray-800 rounded-md shadow-sm">
|
||||
<div className="space-y-2">
|
||||
<div className="font-medium text-gray-900 dark:text-white">
|
||||
{window.title}
|
||||
</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 break-all">
|
||||
{window.path}
|
||||
</div>
|
||||
<div className="text-sm flex items-center text-gray-600 dark:text-gray-400">
|
||||
内存占用: {formatMemory(window.memory)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user