ERP/NOTIFICATION_DEBUG.md

通知系统调试指南

已修复的问题

1. 铃铛无法点击问题

原因：

• 仪表盘页面有复杂的Canvas元素和图表，可能遮挡铃铛按钮
• z-index层级设置不够高
• 事件可能被其他元素捕获

解决方案：

• 提高铃铛按钮的z-index到999
• 提高通知面板的z-index到1000
• 给content-header添加z-index:10
• 给#actions容器添加z-index:999
• 徽章设置pointer-events:none，避免阻挡点击
• 铃铛按钮设置pointer-events:auto，确保可点击

2. 点击铃铛没有弹出面板

原因：

• 通知系统可能被多次初始化，导致事件监听器混乱
• 事件监听器可能被重复绑定

解决方案：

• 添加isInitialized标志，防止重复初始化
• 使用cloneNode()方法移除旧的事件监听器
• 添加详细的console.log调试信息
• 在togglePanel中添加元素存在性检查

3. 时间显示问题

原因：

• 后端使用UTC时间，前端显示时差8小时

解决方案：

• 后端notify_superadmin()使用北京时间（UTC+8）
• 前端正确解析ISO格式的时间字符串

调试方法

1. 检查铃铛是否显示

打开浏览器控制台，查看是否有以下日志：

[Notifications] 铃铛已显示
[Notifications] 初始化完成

2. 检查点击事件

点击铃铛时，应该看到：

[Notifications] 铃铛被点击
[Notifications] 面板状态: 打开

3. 检查元素层级

在浏览器开发者工具中：

1. 检查#notification-bell的z-index是否为999
2. 检查#notification-panel的z-index是否为1000
3. 检查.content-header的z-index是否为10
4. 检查#actions的z-index是否为999

4. 检查CSS样式

确认以下样式已应用：

.notification-bell {
  z-index: 999;
  pointer-events: auto;
}

.notification-badge {
  z-index: 1000;
  pointer-events: none;
}

.notification-panel {
  z-index: 1000;
}

.content-header {
  z-index: 10;
}

#actions {
  z-index: 999;
}

5. 手动测试

在浏览器控制台执行：

// 检查铃铛元素
const bell = document.getElementById('notification-bell');
console.log('铃铛元素:', bell);
console.log('铃铛样式:', window.getComputedStyle(bell));

// 检查面板元素
const panel = document.getElementById('notification-panel');
console.log('面板元素:', panel);
console.log('面板显示:', panel.style.display);

// 手动触发点击
bell.click();

常见问题

Q: 铃铛显示了但点击没反应

A: 检查浏览器控制台是否有错误信息，确认事件监听器已绑定

Q: 面板打开了但看不到

A: 检查z-index是否被其他元素覆盖，或者面板位置是否在屏幕外

Q: 时间显示还是不对

A: 确认服务器时区设置，检查后端是否使用了北京时间

Q: 在某些页面可以点击，某些页面不行

A: 检查该页面是否有特殊的z-index或overflow设置

性能优化

1. 防止重复初始化：使用isInitialized标志
2. 移除旧事件监听器：使用cloneNode()方法
3. 定时器管理：在cleanup时清理定时器
4. 避免内存泄漏：在页面切换时调用cleanup

代码改进点

1. 添加了详细的日志输出，方便调试
2. 添加了元素存在性检查，避免空指针错误
3. 使用e.preventDefault()和e.stopPropagation()防止事件冒泡
4. 提高了z-index层级，确保在所有页面都能正常显示