131 lines
3.4 KiB
Markdown
131 lines
3.4 KiB
Markdown
|
# 通知系统调试指南
|
|||
|
|
|
|||
|
|
## 已修复的问题
|
|||
|
|
|
|||
|
|
### 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样式
|
|||
|
|
确认以下样式已应用：
|
|||
|
|
```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. 手动测试
|
|||
|
|
在浏览器控制台执行：
|
|||
|
|
```javascript
|
|||
|
|
// 检查铃铛元素
|
|||
|
|
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层级，确保在所有页面都能正常显示
|