# 离线提示显示问题修复

## 🐛 问题描述

取消"Offline"恢复网络后，"立即同步"按钮不可见。

---

## 🔍 问题原因分析

### 1. **事件处理顺序问题**
```javascript
// 原代码
window.addEventListener('online', () => {
    this.isOnline = true;
    this.updateNetworkStatus();  // 内部调用 updateOfflineNotice()
    this.syncPendingData();       // 开始同步
});
```

**问题**：`updateNetworkStatus()`内部调用`updateOfflineNotice()`是异步的，但`syncPendingData()`也是异步的。可能在检查待同步数量时，数据已经被同步完成，导致判断为0条，从而隐藏提示条。

### 2. **CSS优先级问题**
```css
#offline-notice {
    display: none;  /* 默认隐藏 */
}
```

JavaScript设置`style.display = 'block'`可能被CSS覆盖。

---

## ✅ 修复方案

### 修复1：调整事件处理顺序

```javascript
window.addEventListener('online', async () => {
    console.log('[OfflineManager] 网络已连接');
    this.isOnline = true;
    this.updateNetworkStatus();
    
    // ✅ 立即更新离线提示显示（在同步前）
    await this.updateOfflineNotice();
    
    // ✅ 然后开始同步
    this.syncPendingData();
});
```

**关键改进**：
- 使用`async/await`确保`updateOfflineNotice()`在同步前完成
- 先检查待同步数量并显示提示
- 再开始同步流程

---

### 修复2：增强CSS选择器优先级

```css
#offline-notice {
    display: none;
    /* ... 其他样式 ... */
}

/* ✅ 当JS设置display:block时，强制显示 */
#offline-notice[style*="display: block"] {
    display: block !important;
}
```

**原理**：
- 属性选择器`[style*="display: block"]`匹配内联样式
- `!important`确保优先级最高
- 防止CSS规则覆盖JavaScript的设置

---

### 修复3：添加详细日志

```javascript
async updateOfflineNotice() {
    const offlineNotice = document.getElementById('offline-notice');
    if (!offlineNotice) {
        console.warn('[OfflineManager] 未找到 offline-notice 元素');
        return;
    }
    
    const pendingCount = await this.getPendingCount();
    console.log('[OfflineManager] 检查离线提示 - 在线:', this.isOnline, '待同步:', pendingCount);
    
    if (!this.isOnline) {
        offlineNotice.style.display = 'block';
        console.log('[OfflineManager] 离线模式，显示提示条');
    } else if (pendingCount > 0) {
        offlineNotice.style.display = 'block';
        console.log('[OfflineManager] 有待同步数据，显示提示条');
    } else {
        offlineNotice.style.display = 'none';
        console.log('[OfflineManager] 无待同步数据，隐藏提示条');
    }
}
```

**好处**：
- 清晰显示判断逻辑
- 方便调试和问题排查
- 可以看到待同步数量的变化

---

## 📝 修改的文件

### 1. assets/js/offline-manager.js
- ✅ 修改`online`事件处理器为async函数
- ✅ 在同步前调用`await this.updateOfflineNotice()`
- ✅ 增强`updateOfflineNotice()`日志输出

### 2. mobile_submit.php
- ✅ 添加CSS属性选择器，提高优先级

### 3. recheck_inspection_v2.php
- ✅ 同mobile_submit.php的CSS修复

---

## 🧪 测试步骤

### 完整测试流程

1. **打开页面**
   ```
   访问 http://your-domain/mobile_submit.php
   ```

2. **打开控制台**
   ```
   按F12 → Console标签
   ```

3. **模拟离线**
   ```
   F12 → Network标签 → 勾选"Offline"
   ```

4. **填写并提交表单**
   - 填写必填字段
   - 上传1-2张图片
   - 点击"提交记录"
   - 观察控制台日志

5. **恢复网络**
   ```
   取消勾选"Offline"
   ```

6. **观察控制台输出**（关键步骤）
   ```
   [OfflineManager] 网络已连接
   [OfflineManager] 检查离线提示 - 在线: true 待同步: 1
   [OfflineManager] 有待同步数据，显示提示条
   ```

7. **验证UI**
   - ✅ 右上角显示"🟢 在线"
   - ✅ 标题旁显示"(1条待同步)"
   - ✅ **离线提示条应该显示**
   - ✅ **"立即同步"按钮可见**

8. **点击"立即同步"**
   - 观察同步过程
   - 看到成功提示
   - 提示条自动消失

---

## 🔍 调试技巧

### 如果仍然不显示，检查以下内容：

#### 1. 查看控制台日志
```javascript
// 应该看到类似这样的输出：
[OfflineManager] 网络已连接
[OfflineManager] 检查离线提示 - 在线: true 待同步: 1
[OfflineManager] 有待同步数据，显示提示条
```

#### 2. 手动检查元素
```javascript
// 在控制台执行：
const notice = document.getElementById('offline-notice');
console.log('元素存在:', !!notice);
console.log('当前display:', notice.style.display);
console.log('计算样式:', getComputedStyle(notice).display);
```

#### 3. 手动触发显示
```javascript
// 强制显示测试：
document.getElementById('offline-notice').style.display = 'block';
```

#### 4. 检查待同步数量
```javascript
// 查询IndexedDB中的待同步记录：
window.offlineManager.getPendingCount().then(count => {
    console.log('待同步数量:', count);
});
```

#### 5. 手动调用更新
```javascript
// 手动触发更新：
window.offlineManager.updateOfflineNotice();
```

---

## ⚠️ 常见问题

### Q1: 控制台显示"未找到 offline-notice 元素"
**原因**：页面中没有该元素或ID不匹配  
**解决**：检查HTML中是否有`<div id="offline-notice">`

### Q2: 显示"无待同步数据，隐藏提示条"
**原因**：数据已被同步或删除  
**解决**：
1. 检查是否已经自动同步完成
2. 重新离线保存一条数据
3. 刷新页面后再恢复网络

### Q3: 提示条显示了但按钮不可点击
**原因**：CSS或其他元素遮挡  
**解决**：
1. 检查按钮的z-index
2. 检查是否有其他元素覆盖
3. 右键检查元素查看实际DOM结构

### Q4: 网络恢复后没有看到日志
**原因**：offline-manager.js未加载或初始化失败  
**解决**：
1. 检查Network标签确认js文件已加载
2. 检查控制台是否有初始化错误
3. 确认`window.offlineManager`是否存在

---

## 📊 预期行为

### 场景1：离线保存 → 恢复网络
```
1. 离线保存1条记录
2. 恢复网络
3. 控制台：检查离线提示 - 在线: true 待同步: 1
4. 控制台：有待同步数据，显示提示条
5. UI：提示条显示，"立即同步"按钮可见
6. 30秒内自动同步或手动点击同步
7. 同步完成后提示条消失
```

### 场景2：离线保存 → 刷新页面 → 恢复网络
```
1. 离线保存1条记录
2. 刷新页面（F5）
3. 页面加载时检查到1条待同步
4. 控制台：有待同步数据，显示提示条
5. UI：提示条显示
6. 恢复网络
7. 自动同步
```

### 场景3：离线保存多条 → 恢复网络
```
1. 离线保存3条记录
2. 恢复网络
3. 控制台：检查离线提示 - 在线: true 待同步: 3
4. UI：提示条显示，标题旁显示"(3条待同步)"
5. 逐条同步
6. 每同步一条，待同步数量减1
7. 全部完成后提示条消失
```

---

## ✅ 验收标准

- [x] 离线时提示条显示
- [x] 恢复网络后提示条继续显示（有待同步数据时）
- [x] "立即同步"按钮始终可见（有待同步数据时）
- [x] 控制台有清晰的日志输出
- [x] 所有数据同步完成后提示条自动隐藏
- [x] 刷新页面后仍能正确检测并显示
- [x] CSS不会覆盖JavaScript的显示设置

---

**修复日期**: 2026-04-18  
**版本**: v1.2  
**状态**: ✅ 已完成