fix: legend

knowhub/frontend/src/pages/Dashboard.tsx

@@ -99,6 +99,7 @@ function CoverageFlowBoard({ data }: { data: any }) {
   ];
   // --- 补充辅助流最终汇合后的状态文本配置 ---
   const TARGET_STATUS_MAP: Record<string, string> = {
+    node: '完成',
     req: '图文已完成',
     proc: '抽样测试',
     cap: '抽样测试',
@@ -234,10 +235,10 @@ function CoverageFlowBoard({ data }: { data: any }) {
                 d={pathD}
                 fill="none"
                 stroke={`url(#coverage-gradient-${edge.index})`}
-                strokeWidth={isConnectedToSelectedNode ? 3 : 2.5}
+                strokeWidth={6}
                 className={cn(
                   "transition-all duration-500",
-                  isConnectedToSelectedNode ? "opacity-100" : selectedDetailNode ? "opacity-0" : "opacity-100"
+                  isConnectedToSelectedNode ? "opacity-[0.4]" : selectedDetailNode ? "opacity-0" : "opacity-[0.18]"
                 )}
               />
             );
@@ -253,10 +254,10 @@ function CoverageFlowBoard({ data }: { data: any }) {
                 d={pathD}
                 fill="none"
                 stroke={`url(#cross-gradient-${edge.index})`}
-                strokeWidth={hoveredCrossEdge === edge.index ? 3 : 2.5}
+                strokeWidth={6}
                 className={cn(
                   "transition-all duration-300 pointer-events-auto cursor-pointer",
-                  hoveredCrossEdge === edge.index ? "opacity-100" : "opacity-75"
+                  hoveredCrossEdge === edge.index ? "opacity-[0.5]" : "opacity-[0.18]"
                 )}
                 onMouseEnter={() => setHoveredCrossEdge(edge.index)}
                 onMouseLeave={() => setHoveredCrossEdge(null)}
@@ -403,9 +404,18 @@ function CoverageFlowBoard({ data }: { data: any }) {
         })}
 
         {/* ================= 图例 ================= */}
-        <div className="absolute left-6 bottom-4 flex gap-4 text-[11px] text-slate-500/80 font-bold z-50">
-          <div className="flex items-center gap-1.5"><div className="w-5 h-0 border-t-2 border-slate-400"></div>数据来源</div>
-          <div className="flex items-center gap-1.5"><div className="w-5 h-0 border-t-2 border-dashed border-slate-400"></div>数据关联</div>
+        <div className="absolute right-8 top-6 flex gap-6 text-[11px] text-slate-500/80 font-bold z-50 pointer-events-none">
+          <div className="flex gap-3">
+            <div className="flex items-center gap-1.5"><div className="w-4 h-0 border-t-2 border-slate-400"></div>来源</div>
+            <div className="flex items-center gap-1.5"><div className="w-4 h-0 border-t-2 border-dashed border-slate-400"></div>关联</div>
+          </div>
+          <div className="flex gap-3">
+            <div className="flex items-center gap-1.5"><div className="w-3 h-2.5 bg-white border border-slate-300 rounded-sm"></div>已完成</div>
+            <div className="flex items-center gap-1.5"><div className="w-3 h-2.5 bg-white border border-dashed border-slate-400 rounded-sm"></div>测试中</div>
+          </div>
+          <div className="flex gap-3">
+            <div className="flex items-center gap-1"><div className="w-3.5 h-3.5 bg-slate-50 border text-[8px] font-black flex items-center justify-center rounded-full leading-none">#</div><div className="w-3 h-0 border-t-[4px] border-slate-400/30 -mx-0.5"></div><div className="w-3.5 h-3.5 bg-slate-50 border text-[8px] font-black flex items-center justify-center rounded-full leading-none">#</div> <span className="ml-1">数据关联情况</span></div>
+          </div>
         </div>
 
         {/* ================= 4. 底部覆盖数字与百分比徽章 ================= */}