From f7fbb3ef9bdf453a2c5e981e55a7b4231dab7487 Mon Sep 17 00:00:00 2001 From: qikongjian Date: Fri, 5 Sep 2025 21:04:24 +0800 Subject: [PATCH] =?UTF-8?q?dashboar=E6=95=B0=E6=8D=AE=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/dashboard/network-timeline.tsx | 263 +++++----------------- components/pages/work-flow.tsx | 2 +- 2 files changed, 57 insertions(+), 208 deletions(-) diff --git a/components/dashboard/network-timeline.tsx b/components/dashboard/network-timeline.tsx index 52da35d..3e47858 100644 --- a/components/dashboard/network-timeline.tsx +++ b/components/dashboard/network-timeline.tsx @@ -1166,17 +1166,18 @@ export function NetworkTimeline({ {/* 主内容区域 */}
- {/* 左侧任务列表 */} -
+ {/* 任务列表 - 全宽显示，包含时间线 */} +
{/* 列表头部 */}
状态
{/* 展开/折叠按钮列 */} -
任务名称
+
任务名称
状态
类型
进度
-
时间信息
+
时间信息
+
时间线
{/* 任务列表 */} @@ -1239,7 +1240,7 @@ export function NetworkTimeline({ {/* 任务名称 */}
{/* 时间信息 */} -
+
{formatTime(task.executionTime)} - {/* 显示开始时间 */} - {(() => { - const taskTimes = getTaskTimes(task); - return taskTimes.startTime ? ( - - {new Date(taskTimes.startTime).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} - - ) : null; - })()} - {/* 显示结束时间 */} - {(() => { - const taskTimes = getTaskTimes(task); - return taskTimes.endTime ? ( - - {new Date(taskTimes.endTime).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} - - ) : null; - })()} + {/* 开始和结束时间一行显示 */} +
+ {(() => { + const taskTimes = getTaskTimes(task); + return taskTimes.startTime ? ( + + {new Date(taskTimes.startTime).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + + ) : null; + })()} + {(() => { + const taskTimes = getTaskTimes(task); + return taskTimes.startTime && taskTimes.endTime ? ( + - + ) : null; + })()} + {(() => { + const taskTimes = getTaskTimes(task); + return taskTimes.endTime ? ( + + {new Date(taskTimes.endTime).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })} + + ) : null; + })()} +
{/* 剩余时间估算 */} {task.level === 0 && (() => { const originalTask = tasks.find((t: any) => t.task_id === task.id); @@ -1419,146 +1427,32 @@ export function NetworkTimeline({ })()}
-
- )) - )} -
-
- {/* 右侧时间线 */} -
-
-
- 时间线视图 (总耗时: {formatTime(projectDurationMs)}) -
-
-
- - {/* 时间刻度 */} -
-
- {Array.from({ length: 6 }, (_, i) => { - const timeValue = (maxTime / 5) * i; - return ( - - {formatTime(timeValue)} - - ); - })} -
-
- {/* 时间刻度线 */} -
- {Array.from({ length: 6 }, (_, i) => ( -
- ))} -
-
- - {/* 瀑布图 */} -
- {filteredTaskExecutions.length === 0 ? ( -
-
- -

没有任务数据

-
-
- ) : ( - filteredTaskExecutions.map((task) => ( -
- {/* 任务条 */} + {/* 时间线进度条 */} +
+
+ {/* 时间线背景 */} +
+ + {/* 任务进度条 */}
= 400 ? "bg-rose-500" : "bg-amber-500", - // 选中时明显高亮：提高不透明度、描边、阴影与z-index - selectedTask === task.id - ? "opacity-100 ring-2 ring-cyan-300/90 shadow-[0_0_10px_rgba(34,211,238,0.6)] z-10" - : "opacity-80 hover:opacity-95", - task.level === 1 && "opacity-70" + selectedTask === task.id && "ring-2 ring-cyan-300/90 shadow-[0_0_8px_rgba(34,211,238,0.6)]" )} style={{ left: `${(task.startTime / maxTime) * 100}%`, width: `${Math.max((task.executionTime / maxTime) * 100, 0.5)}%` }} - onClick={() => setSelectedTask(task.id)} - title={(() => { - const taskTimes = getTaskTimes(task); - return `${task.displayName} -执行时间: ${formatTime(task.executionTime)} -状态: ${getTaskStatusText(task.status)} -${task.status === 'IN_PROGRESS' ? `进度: ${task.progress}%` : ''} -开始时间: ${formatDateTime(taskTimes.startTime)} -结束时间: ${formatDateTime(taskTimes.endTime)}`; - })()} - > - {/* 基于状态的单色进度条 */} -
- {/* 背景条 */} -
- - {/* 进度条 - 根据任务状态和进度显示 */} - {task.status === 'IN_PROGRESS' && ( -
- )} - - {/* 完成状态显示满进度 */} - {task.status === 'COMPLETED' && ( -
- )} - - {/* 失败状态显示部分进度 */} - {task.status === 'FAILED' && ( -
- )} - - {/* 等待状态显示微弱指示 */} - {task.status === 'PENDING' && ( -
- )} - - {/* 智能百分比文字显示 - 只在主任务且有足够空间时显示 */} + title={`${task.displayName} - ${formatTime(task.executionTime)}`} + > + {/* 进度百分比显示 */} {(() => { const barWidth = (task.executionTime / maxTime) * 100; - const showPercentage = task.level === 0 && barWidth > 6; // 主任务且宽度足够 + const showPercentage = barWidth > 8; // 只在有足够空间时显示 if (!showPercentage) return null; @@ -1580,37 +1474,13 @@ ${task.status === 'IN_PROGRESS' ? `进度: ${task.progress}%` : ''} const percentageText = getPercentageText(); if (!percentageText) return null; - // 根据进度条宽度和进度值决定文字位置 - const progressWidth = task.status === 'IN_PROGRESS' ? task.progress : - task.status === 'COMPLETED' ? 100 : - task.status === 'FAILED' ? Math.max(task.progress, 15) : 8; - - const shouldCenterInProgress = task.status === 'IN_PROGRESS' && progressWidth > 30; - const shouldCenterInBar = (task.status === 'COMPLETED') || - (task.status === 'FAILED' && progressWidth > 25); - return ( -
+
12 ? '11px' : '10px', - fontWeight: '600' + textShadow: '0 1px 2px rgba(0,0,0,0.8)', + fontSize: '10px' }} > {percentageText} @@ -1620,41 +1490,20 @@ ${task.status === 'IN_PROGRESS' ? `进度: ${task.progress}%` : ''} })()}
- {/* 子任务进度指示器和百分比 */} - {task.level === 1 && task.status === 'IN_PROGRESS' && ( - <> -
- {/* 子任务百分比 - 只在有足够空间时显示 */} - {(() => { - const barWidth = (task.executionTime / maxTime) * 100; - if (barWidth < 4) return null; // 子任务条太窄不显示 - - return ( -
- - {task.progress}% - + {/* 时间刻度标记 */} +
+ {Array.from({ length: 5 }, (_, i) => ( +
+ ))}
- ); - })()} - - )} +
)) )}
-
+
{/* 详细信息面板 */} diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx index edd8e2f..9291aa3 100644 --- a/components/pages/work-flow.tsx +++ b/components/pages/work-flow.tsx @@ -164,7 +164,7 @@ const WorkFlow = React.memo(function WorkFlow() { // iframe智能剪辑回调函数 const handleIframeAIEditingComplete = useCallback((result: any) => { - console.log('🎉 iframe AI剪辑完成，结果:', result); + console.log('🎉 iframe AI剪辑完成，结果:', result);任务 // 保存剪辑结果 setAiEditingResult(result);