时间线视图进度条显示进度百分比

components/dashboard/network-timeline.tsx

@@ -945,14 +945,99 @@ ${task.status === 'IN_PROGRESS' ? `进度: ${task.progress}%` : ''}`}
                         title="等待开始"
                       />
                     )}
+
+                    {/* 智能百分比文字显示 - 只在主任务且有足够空间时显示 */}
+                    {(() => {
+                      const barWidth = (task.executionTime / maxTime) * 100;
+                      const showPercentage = task.level === 0 && barWidth > 6; // 主任务且宽度足够
+
+                      if (!showPercentage) return null;
+
+                      const getPercentageText = () => {
+                        switch (task.status) {
+                          case 'IN_PROGRESS':
+                            return `${task.progress}%`;
+                          case 'COMPLETED':
+                            return '100%';
+                          case 'FAILED':
+                            return `${task.progress}%`;
+                          case 'PENDING':
+                            return '0%';
+                          default:
+                            return '';
+                        }
+                      };
+
+                      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 (
+                        <div
+                          className={cn(
+                            "absolute top-0 flex items-center pointer-events-none h-full",
+                            shouldCenterInProgress || shouldCenterInBar ? "justify-center inset-0" : "justify-end right-1"
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              "font-semibold transition-all duration-300 select-none",
+                              // 智能颜色选择
+                              task.status === 'COMPLETED' ? "text-white" :
+                              task.status === 'IN_PROGRESS' && shouldCenterInProgress ? "text-white" :
+                              task.status === 'IN_PROGRESS' && !shouldCenterInProgress ? "text-cyan-200" :
+                              task.status === 'FAILED' && shouldCenterInBar ? "text-white" :
+                              task.status === 'FAILED' && !shouldCenterInBar ? "text-rose-200" :
+                              "text-amber-200"
+                            )}
+                            style={{
+                              textShadow: '0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.5)',
+                              fontSize: barWidth > 12 ? '11px' : '10px',
+                              fontWeight: '600'
+                            }}
+                          >
+                            {percentageText}
+                          </span>
+                        </div>
+                      );
+                    })()}
                   </div>
 
-                  {/* 子任务进度指示器 */}
+                  {/* 子任务进度指示器和百分比 */}
                   {task.level === 1 && task.status === 'IN_PROGRESS' && (
-                    <div
+                    <>
-                      className="absolute top-0 left-0 h-full bg-white/30 rounded-sm"
+                      <div
-                      style={{ width: `${task.progress}%` }}
+                        className="absolute top-0 left-0 h-full bg-white/30 rounded-sm"
-                    />
+                        style={{ width: `${task.progress}%` }}
+                      />
+                      {/* 子任务百分比 - 只在有足够空间时显示 */}
+                      {(() => {
+                        const barWidth = (task.executionTime / maxTime) * 100;
+                        if (barWidth < 4) return null; // 子任务条太窄不显示
+
+                        return (
+                          <div className="absolute inset-0 flex items-center justify-end pr-1 pointer-events-none">
+                            <span
+                              className="text-white font-medium"
+                              style={{
+                                textShadow: '0 1px 2px rgba(0,0,0,0.8)',
+                                fontSize: '9px'
+                              }}
+                            >
+                              {task.progress}%
+                            </span>
+                          </div>
+                        );
+                      })()}
+                    </>
                   )}
                 </div>
               </div>