fengwm64 · github-actions · May 3, 2026 · May 3, 2026
diff --git a/.auto-dev/issues/issue-66/prd.md b/.auto-dev/issues/issue-66/prd.md
@@ -0,0 +1,50 @@
+# PRD: Issue #66 — 匈牙利算法图例和节点重叠、边权重数字重叠
+
+## 目标动画
+
+- ID: hungarian
+- 路径: /animations/hungarian
+- 现有文件:
+  - `src/animations/hungarian/index.jsx`
+  - `src/animations/hungarian/algorithm.js`
+  - `src/animations/hungarian/meta.js`
+
+## 问题类型
+
+visual — 纯视觉/布局问题，不涉及算法逻辑。
+
+## 问题描述
+
+用户报告两个视觉问题：
+
+1. **图例与节点重叠**：SVG 底部的图例（等价子图、匹配、增广路、已匹配、搜索中）与最下方的 Y 节点重叠。图例定位在 `translate(20, svgH - 40)`，当 n=4 时 svgH=380，最下节点 y≈330，图例 y=340，间距仅 10px，节点半径 22-30px，必然重叠。
+
+2. **边权重数字重叠**：`GraphEdge` 组件将权重文本放在边的中点 `(midX, midY - 8)`。在完全二分图中（n×n 条边），所有边的中点 x 坐标几乎相同（≈300），y 坐标相近的边其权重标签会互相遮挡。
+
+## 修复方案要求
+
+1. **图例不与节点重叠**：
+   - 可选方案：增大 SVG 高度留出图例空间；或将图例移到 SVG 外部（SVG 下方独立区域）；或调整图例位置到 SVG 顶部/侧边。
+   - 图例内容不变：等价子图（绿线）、匹配（红线）、增广路（橙线）、已匹配（蓝圆）、搜索中（橙圆）。
+
+2. **边权重不互相重叠**：
+   - 可选方案：交错偏移权重标签位置；或将权重显示改为 hover tooltip；或仅显示当前高亮边的权重、弱化非活跃边权重。
+   - 权重信息必须仍然可读取，不能完全隐藏。
+
+3. **不要修改算法逻辑**：`algorithm.js` 和 `meta.js` 不需要改动。
+
+## 验收清单
+
+- [ ] 4x4 示例下，图例与任何节点无重叠
+- [ ] 3x3 示例下，图例与任何节点无重叠
+- [ ] 4x4 示例下，边权重标签无明显互相遮挡
+- [ ] 3x3 示例下，边权重标签无明显互相遮挡
+- [ ] 图例内容完整，五项均可见
+- [ ] 权重信息仍可读取
+- [ ] `npm run build` 通过
+- [ ] 无新增无用按钮、重复按钮或死按钮
+- [ ] 卡片内容区域保留顶部留白（无 `pt-0`）
+
+## 交付角色
+
+直接交给 `frontend`，不涉及算法修改。
diff --git a/.auto-dev/issues/issue-66/qa-report.md b/.auto-dev/issues/issue-66/qa-report.md
@@ -0,0 +1,62 @@
+# QA Report: Issue #66 — 匈牙利算法图例和节点重叠、边权重数字重叠
+
+## 构建结果
+
+- `npm run build` 通过 ✅ (2.79s)
+
+## 算法测试结果
+
+- `runAlgorithmTests()` 通过 ✅ (algorithm.js 未改动，无需重测)
+
+## 变更摘要
+
+仅修改 `src/animations/hungarian/index.jsx`，共两处修复：
+
+1. **图例移出 SVG**：原来图例用 `<g transform="translate(20, svgH - 40)">` 定位在 SVG 内部，与底部 Y 节点重叠。现在改为 SVG 下方的 `<div>` flex 布局，彻底消除重叠。
+2. **边权重标签防重叠**：权重标签沿边方向旋转，垂直偏移 10px，非高亮边降为 fontSize=10、opacity=0.45，显著减少完全二分图中标签互相遮挡。
+
+## PRD 验收清单
+
+| 验收项 | 结果 |
+| --- | --- |
+| 4x4 示例下，图例与任何节点无重叠 | ✅ 图例在 SVG 外部 `<div>` 中，不可能与 SVG 内节点重叠 |
+| 3x3 示例下，图例与任何节点无重叠 | ✅ 同上 |
+| 4x4 示例下，边权重标签无明显互相遮挡 | ✅ 标签沿边旋转 + 垂直偏移 + 非高亮边淡化 |
+| 3x3 示例下，边权重标签无明显互相遮挡 | ✅ 同上 |
+| 图例内容完整，五项均可见 | ✅ 等价子图、匹配、增广路、已匹配、搜索中均在 legend div 中 |
+| 权重信息仍可读取 | ✅ 高亮边权重 fontSize=12, opacity=1；非高亮边 fontSize=10, opacity=0.45 |
+| `npm run build` 通过 | ✅ |
+| 无新增无用按钮、重复按钮或死按钮 | ✅ 未新增任何按钮 |
+| 卡片内容区域保留顶部留白（无 `pt-0`） | ✅ CardContent 使用 `p-4 pt-4`，无 `pt-0` |
+
+## UI 控件审计
+
+| 检查项 | 结果 |
+| --- | --- |
+| 每个按钮有明确用途 | ✅ 示例切换(3x3/4x4)、播放/暂停、后退、前进、重置 |
+| 无无用/重复/占位/死按钮 | ✅ |
+| 播放/暂停语义不重复 | ✅ 一个按钮 toggle |
+| 禁用态有理由 | ✅ 后退禁用于 step 0，前进禁用于最后一步，播放禁用于最后一步且未播放 |
+| 控件文案与行为一致 | ✅ |
+| 边界操作正确 | ✅ step 0 不能后退，最后一步不能前进，重置回到 step 0 |
+| 自动播放无定时器泄漏 | ✅ useEffect cleanup 清除 interval |
+| 路由和首页卡片正常 | ✅ 未修改路由或 meta.js |
+
+## 交互 bug 审计
+
+| 检查项 | 结果 |
+| --- | --- |
+| 播放/暂停 | ✅ |
+| 单步前进/后退 | ✅ |
+| 重置 | ✅ |
+| 边界步骤 | ✅ |
+| 自动播放定时器 | ✅ cleanup on unmount/pause |
+| 响应式布局 | ✅ grid lg:grid-cols-[1.4fr_1fr]，legend flex-wrap |
+
+## 卡片布局留白审计
+
+- 所有 CardContent 使用 `p-5 pt-5` 或 `p-4 pt-4`，无 `pt-0` / `!pt-0` / `padding-top: 0` ✅
+
+## 结论
+
+全部验收项通过，无缺陷。推进到 qa_passed。
diff --git a/.auto-dev/status/issue-66.json b/.auto-dev/status/issue-66.json
@@ -0,0 +1,82 @@
+{
+  "issue": 66,
+  "title": "[auto-fix] 匈牙利算法 / KM 算法: 图例和节点重叠，边权重数字重叠",
+  "pipeline": "auto-fix",
+  "current_stage": "pr_opened",
+  "current_owner": "qa",
+  "pinned_comment_id": 4365771169,
+  "pr_url": "https://github.com/fengwm64/AlgorithmVisualizations/pull/67",
+  "history": [
+    {
+      "ts": "2026-05-03T08:39:10.644Z",
+      "from": "system",
+      "to": "pm",
+      "stage": "submitted",
+      "artifact": ".auto-dev/incoming/issue-66.md",
+      "message": "Issue submitted and queued for PM triage."
+    },
+    {
+      "ts": "2026-05-03T08:39:40.443Z",
+      "from": "system",
+      "to": "pm",
+      "stage": "pm_triage",
+      "artifact": ".auto-dev/incoming/issue-66.md",
+      "message": "PM triage started."
+    },
+    {
+      "ts": "2026-05-03T08:40:24.581Z",
+      "from": "pm",
+      "to": "frontend",
+      "stage": "prd_done",
+      "artifact": ".auto-dev/issues/issue-66/prd.md",
+      "message": "PRD is ready. Visual fix only — legend and edge weight overlap."
+    },
+    {
+      "ts": "2026-05-03T08:41:02.597Z",
+      "from": "pm",
+      "to": "frontend",
+      "stage": "frontend_designing",
+      "artifact": ".auto-dev/issues/issue-66/prd.md",
+      "message": "Frontend design started."
+    },
+    {
+      "ts": "2026-05-03T08:41:58.918Z",
+      "from": "frontend",
+      "to": "qa",
+      "stage": "frontend_done",
+      "artifact": "src/animations/hungarian/index.jsx",
+      "message": "Frontend fix ready. Legend moved outside SVG; edge weight labels rotated and dimmed for non-highlighted edges."
+    },
+    {
+      "ts": "2026-05-03T08:42:23.502Z",
+      "from": "frontend",
+      "to": "qa",
+      "stage": "qa_running",
+      "artifact": ".auto-dev/issues/issue-66/prd.md",
+      "message": "QA started."
+    },
+    {
+      "ts": "2026-05-03T08:43:33.114Z",
+      "from": "qa",
+      "to": "qa",
+      "stage": "qa_passed",
+      "artifact": ".auto-dev/issues/issue-66/qa-report.md",
+      "message": "QA passed."
+    },
+    {
+      "ts": "2026-05-03T08:43:53.114Z",
+      "from": "qa",
+      "to": "maintainer",
+      "stage": "pr_opened",
+      "artifact": ".auto-dev/issues/issue-66/qa-report.md",
+      "message": "PR opened by start.sh finalizer."
+    }
+  ],
+  "retry_count": {
+    "qa_to_frontend": 0,
+    "qa_to_algorithm": 0,
+    "frontend_to_algorithm": 0,
+    "algorithm_to_pm": 0,
+    "frontend_to_pm": 0
+  }
+}
diff --git a/src/animations/hungarian/index.jsx b/src/animations/hungarian/index.jsx
@@ -55,6 +55,14 @@ function GraphEdge({ x1, y1, x2, y2, weight, highlighted, color, dashed, bold })
   const midX = (x1 + x2) / 2;
   const midY = (y1 + y2) / 2;
 
+  // Rotate label along edge and offset perpendicular to reduce overlap
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const edgeLen = Math.sqrt(dx * dx + dy * dy) || 1;
+  const angleDeg = Math.atan2(dy, dx) * (180 / Math.PI);
+  const perpX = -(dy / edgeLen) * 10;
+  const perpY = (dx / edgeLen) * 10;
+
   return (
     <g>
       <motion.line
@@ -68,10 +76,15 @@ function GraphEdge({ x1, y1, x2, y2, weight, highlighted, color, dashed, bold })
         transition={{ duration: 0.3 }}
       />
       <text
-        x={midX}
-        y={midY - 8}
+        x={midX + perpX}
+        y={midY + perpY}
         textAnchor="middle"
-        className="select-none text-xs font-medium fill-slate-500"
+        dominantBaseline="middle"
+        fontSize={highlighted ? 12 : 10}
+        fontWeight={highlighted ? 600 : 400}
+        opacity={highlighted ? 1 : 0.45}
+        className="select-none fill-slate-500"
+        transform={`rotate(${angleDeg}, ${midX + perpX}, ${midY + perpY})`}
       >
         {weight}
       </text>
@@ -375,20 +388,31 @@ export default function HungarianAnimation() {
                   />
                 ))}
 
-                {/* Legend */}
-                <g transform={`translate(20, ${svgH - 40})`}>
-                  <line x1={0} y1={0} x2={20} y2={0} stroke="#10b981" strokeWidth={2.5} />
-                  <text x={24} y={4} className="text-xs fill-slate-500">等价子图</text>
-                  <line x1={80} y1={0} x2={100} y2={0} stroke="#ef4444" strokeWidth={3} />
-                  <text x={104} y={4} className="text-xs fill-slate-500">匹配</text>
-                  <line x1={140} y1={0} x2={160} y2={0} stroke="#f97316" strokeWidth={3} />
-                  <text x={164} y={4} className="text-xs fill-slate-500">增广路</text>
-                  <circle cx={220} cy={0} r={6} fill="#3b82f6" />
-                  <text x={230} y={4} className="text-xs fill-slate-500">已匹配</text>
-                  <circle cx={280} cy={0} r={6} fill="#f97316" />
-                  <text x={290} y={4} className="text-xs fill-slate-500">搜索中</text>
-                </g>
               </svg>
+
+              {/* Legend — moved outside SVG to avoid overlapping nodes */}
+              <div className="mt-2 flex flex-wrap items-center gap-x-5 gap-y-1 text-xs text-slate-500">
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="inline-block h-0.5 w-5 rounded bg-emerald-500" />
+                  等价子图
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="inline-block h-0.5 w-5 rounded bg-red-500" style={{ height: 3 }} />
+                  匹配
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="inline-block h-0.5 w-5 rounded bg-orange-500" style={{ height: 3 }} />
+                  增广路
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="inline-block h-3 w-3 rounded-full bg-blue-500" />
+                  已匹配
+                </span>
+                <span className="inline-flex items-center gap-1.5">
+                  <span className="inline-block h-3 w-3 rounded-full bg-orange-500" />
+                  搜索中
+                </span>
+              </div>
             </CardContent>
           </Card>