liubinfighter_csv-lite/docs/DEBUG_CONTEXT_MENU.md

右键菜单高亮功能调试指南

🎯 新增功能

现在当您右键点击行号或列号时，会自动高亮对应的行或列，并显示调试信息。

🔍 调试信息说明

1. 在浏览器开发者工具中查看控制台输出

当设置菜单时，会看到：

[DEBUG] Header context menu setup completed
[DEBUG] TableEl: <table class="csv-table">...</table>
[DEBUG] 行号元素数量: N
[DEBUG] 列号元素数量: N

当右键点击行号时，会看到：

[DEBUG] 右键事件触发 - 目标: <td class="csv-row-number">1</td> 类名: csv-row-number
[DEBUG] 右键点击行号: 1 目标元素: <td>... TR元素: <tr>...
[DEBUG] 已高亮行: 1
[HighlightManager] selectRow called with index: 1
[HighlightManager] clearSelection called
[HighlightManager] highlightRow called with index: 1
[HighlightManager] 找到的tbody行数: N
[HighlightManager] 高亮目标行: <tr>...

当右键点击列号时，会看到：

[DEBUG] 右键事件触发 - 目标: <th class="csv-col-number">A</th> 类名: csv-col-number
[DEBUG] 右键点击列号: 0 目标元素: <th>... 所有列号元素: NodeList(N)
[DEBUG] 已高亮列: 0
[HighlightManager] selectColumn called with index: 0
[HighlightManager] clearSelection called
[HighlightManager] highlightColumn called with index: 0
[HighlightManager] 找到的列单元格数: N
[HighlightManager] 列单元格: NodeList(N)

当菜单关闭时，会看到：

[HighlightManager] clearSelection called
[HighlightManager] clearHighlight called
[HighlightManager] 清除高亮元素数: N
[DEBUG] Header context menu closed

🧪 测试步骤

步骤1：测试基本右键功能

1. 在CSV文件视图中，右键点击任意行号（左边的数字）
2. 观察：
   • 该行是否高亮显示（背景色变化）
   • 是否弹出上下文菜单
   • 控制台是否输出相关调试信息

步骤2：测试列右键功能

1. 右键点击任意列号（顶部的字母）
2. 观察：
   • 该列是否高亮显示
   • 是否弹出上下文菜单
   • 控制台是否输出相关调试信息

步骤3：测试菜单操作

1. 右键点击行号，选择菜单中的任意操作（如"在上方插入行"）
2. 观察：
   • 菜单是否立即消失
   • 操作是否正确执行
   • 高亮是否正确清除
   • 新DOM是否正确绑定事件

步骤4：测试菜单关闭

1. 右键点击行号/列号打开菜单

2. 点击菜单外的其他地方

3. 观察菜单是否关闭，高亮是否清除

4. 重新打开菜单，按ESC键

5. 观察菜单是否关闭，高亮是否清除

🐛 常见问题诊断

问题1：右键没有反应

检查控制台是否有输出：

• 如果没有任何输出 → DOM事件绑定失败
• 如果有"右键事件触发"但没有后续 → 元素类名不匹配

问题2：菜单操作后不消失

检查控制台输出：

• 应该看到"Header context menu closed"
• 如果没有 → 菜单关闭逻辑有问题

问题3：高亮不显示

检查控制台输出：

• 如果看到"找到的tbody行数: 0" → DOM结构问题
• 如果看到"找到的列单元格数: 0" → CSS选择器问题

问题4：操作后右键失效

检查控制台输出：

• 应该先看到"Header context menu cleanup completed"
• 然后看到"Header context menu setup completed"
• 如果没有重新setup → 事件重绑定失败

🔧 调试技巧

1. 查看DOM结构：在开发者工具中检查表格的HTML结构
2. 监控事件绑定：查看控制台中的setup/cleanup日志
3. 检查CSS类名：确认元素是否有正确的css-row-number/csv-col-number类
4. 验证高亮效果：检查元素是否添加了csv-row-selected/csv-col-selected类

📝 调试清单

• 能看到setup完成的日志
• 右键行号有反应并输出正确日志
• 右键列号有反应并输出正确日志
• 行高亮显示正常
• 列高亮显示正常
• 菜单项点击后菜单消失
• 操作执行后右键仍然有效
• ESC键能关闭菜单
• 点击外部能关闭菜单
• 菜单关闭时高亮清除

按照这个清单逐项测试，可以帮助我们快速定位问题所在！