xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

dashboard监控系统页面优化

Browse Source
This commit is contained in:
qikongjian 2025-09-18 16:51:50 +08:00
parent e64e9d6a2e
commit c01bf54779
1 changed files with 60 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/dashboard/network-timeline.tsx
View File

@ -136,6 +136,31 @@ export function NetworkTimeline({
return () => clearInterval(interval);
}, [lastUpdate]);
// 复制任务ID
const copyTaskId = async (taskId: string) => {
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(taskId);
setCopiedTaskId(taskId);
setTimeout(() => setCopiedTaskId(null), 1500);
} else {
const textArea = document.createElement('textarea');
textArea.value = taskId;
textArea.style.position = 'fixed';
textArea.style.left = '-9999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
setCopiedTaskId(taskId);
setTimeout(() => setCopiedTaskId(null), 1500);
}
} catch (e) {
// noop
}
};
// 计算任务统计信息
const taskStats = useMemo(() => {
if (!tasks || tasks.length === 0) {
@ -1203,7 +1228,7 @@ export function NetworkTimeline({
<div className="flex items-center px-4 py-1.5 bg-gray-800/50 text-xs font-medium text-gray-400 border-b border-gray-800 flex-shrink-0">
<div className="w-8">状态</div>
<div className="w-6"></div> {/* 展开/折叠按钮列 */}
<div className="w-56">任务名称</div>
<div className="w-64">任务名称</div>
<div className="w-24 text-center">状态</div>
<div className="w-16 text-center">类型</div>
<div className="w-20 text-center">进度</div>
@ -1251,7 +1276,13 @@ export function NetworkTimeline({
<div className="w-6 flex justify-center">
{task.level === 0 && task.subTasks && task.subTasks.length > 0 && (
<motion.div
className="p-0.5 text-gray-400 transition-colors duration-150"
className="p-0.5 text-gray-400 transition-colors duration-150 cursor-pointer hover:text-white"
onClick={(e) => {
e.stopPropagation();
toggleTaskExpansion(task.id);
}}
title={expandedTasks.has(task.id) ? '收起子任务' : '展开子任务'}
data-alt="expand-toggle"
whileHover={{ scale: 1.1 }}
>
<motion.div
@ -1272,7 +1303,7 @@ export function NetworkTimeline({
{/* 任务名称 */}
<div
className={cn(
"w-56 flex items-center gap-2 cursor-pointer hover:bg-gray-800/50 rounded px-2 py-1 transition-all duration-200",
"w-64 flex items-center gap-2 cursor-pointer hover:bg-gray-800/50 rounded px-2 py-1 transition-all duration-200",
task.level === 1 && "pl-4",
selectedTask === task.id && "bg-blue-600/20"
)}
@ -1639,7 +1670,32 @@ export function NetworkTimeline({
);
})()}
<div className="space-y-2 text-sm">
<div><span className="text-gray-400">任务ID:</span> <span className="text-white font-mono text-sm">{task.name}</span></div>
<div className="flex items-center gap-2">
<span className="text-gray-400">任务ID:</span>
<span className="text-white font-mono text-sm" title={task.id}>{task.id}</span>
<button
onClick={() => copyTaskId(task.id)}
className={cn(
"inline-flex items-center gap-1 px-2 py-1 rounded text-[10px] transition-colors",
copiedTaskId === task.id
? "bg-green-600/20 text-green-400"
: "bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 hover:text-white"
)}
title="复制任务ID"
>
{copiedTaskId === task.id ? (
<>
<Check className="w-3 h-3" />
<span>已复制</span>
</>
) : (
<>
<Copy className="w-3 h-3" />
<span>复制</span>
</>
)}
</button>
</div>
<div><span className="text-gray-400">层级:</span> <span className="text-white">{task.level === 0 ? '主任务' : '子任务'}</span></div>
{/* 子任务完成状况 */}