dashboard监控系统页面优化

components/dashboard/network-timeline.tsx

@@ -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>
 
                       {/* 子任务完成状况 */}