# 离线功能修复说明

## 🐛 问题描述

1. **离线提示消失**：网络恢复后，"立即同步"按钮消失
2. **同步失败**：离线保存的记录未能成功提交到服务器
3. **按钮状态异常**：提交按钮一直显示"提交中"

---

## ✅ 已修复的问题

### 1. 离线提示条显示逻辑优化

**问题原因**：
- 原代码在网络恢复时直接隐藏离线提示条
- 导致有待同步数据时也看不到"立即同步"按钮

**修复方案**：
```javascript
// 新增 updateOfflineNotice() 方法
async updateOfflineNotice() {
    const offlineNotice = document.getElementById('offline-notice');
    if (!offlineNotice) return;
    
    const pendingCount = await this.getPendingCount();
    
    if (!this.isOnline) {
        // 离线时始终显示
        offlineNotice.style.display = 'block';
    } else if (pendingCount > 0) {
        // 在线但有未同步数据时也显示
        offlineNotice.style.display = 'block';
    } else {
        // 在线且无数据时隐藏
        offlineNotice.style.display = 'none';
    }
}
```

**效果**：
- ✅ 离线时显示提示条
- ✅ 网络恢复但有待同步数据时继续显示
- ✅ 所有数据同步完成后才隐藏

---

### 2. 图片数据存储优化

**问题原因**：
- IndexedDB无法直接存储File对象
- 离线保存时File对象丢失，导致同步失败

**修复方案**：
```javascript
// 离线保存时将File转换为Base64
if (value instanceof File) {
    const base64 = await fileToBase64(value);
    data.images.push(base64);
}

// 同步时将Base64转回Blob
else if (typeof item === 'string' && item.startsWith('data:image')) {
    const blob = this.base64ToBlob(item);
    const fileName = `offline_${Date.now()}_${i}.jpg`;
    formData.append(fieldName, blob, fileName);
}
```

**辅助函数**：
```javascript
// File转Base64
function fileToBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

// Base64转Blob
base64ToBlob(base64Data) {
    const arr = base64Data.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
```

---

### 3. 同步逻辑增强

**改进点**：
1. **支持多种图片字段**：`images[]`、`recheck_images[]`等
2. **智能数据类型处理**：自动识别File、Base64、普通字段
3. **详细日志输出**：便于调试和问题排查
4. **错误信息捕获**：记录服务器返回的错误详情

```javascript
// 优化后的submitRecord方法
async submitRecord(record) {
    console.log('[OfflineManager] 开始同步记录:', record.id, '类型:', record.type);
    
    const formData = new FormData();
    
    for (const [key, value] of Object.entries(record.formData)) {
        if (Array.isArray(value)) {
            const fieldName = key.endsWith('[]') ? key : key + '[]';
            for (let i = 0; i < value.length; i++) {
                const item = value[i];
                
                if (item instanceof File) {
                    formData.append(fieldName, item);
                } 
                else if (typeof item === 'string' && item.startsWith('data:image')) {
                    const blob = this.base64ToBlob(item);
                    const fileName = `offline_${Date.now()}_${i}.jpg`;
                    formData.append(fieldName, blob, fileName);
                }
                else {
                    formData.append(fieldName, item);
                }
            }
        } else {
            formData.append(key, value);
        }
    }
    
    console.log('[OfflineManager] 发送请求到:', record.url);
    const response = await fetch(record.url, { method: 'POST', body: formData });
    console.log('[OfflineManager] 服务器响应状态:', response.status);
    
    // ... 处理响应
}
```

---

### 4. 按钮状态管理优化

**改进**：
- 保存前显示"正在保存..."
- 保存成功后恢复原始按钮文字
- 保存失败也恢复按钮状态

```javascript
// 显示加载提示
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn ? submitBtn.textContent : '提交记录';
if (submitBtn) {
    submitBtn.disabled = true;
    submitBtn.textContent = '正在保存...';
}

try {
    // ... 保存逻辑
    
    // 恢复按钮状态
    if (submitBtn) {
        submitBtn.disabled = false;
        submitBtn.textContent = originalText;
        submitBtn.style.opacity = '1';
        submitBtn.style.cursor = 'pointer';
    }
} catch (error) {
    // 失败也要恢复
    if (submitBtn) {
        submitBtn.disabled = false;
        submitBtn.textContent = originalText;
        submitBtn.style.opacity = '1';
        submitBtn.style.cursor = 'pointer';
    }
}
```

---

### 5. 初始化时检查待同步数据

**新增**：
```javascript
async init() {
    await this.openDatabase();
    this.setupEventListeners();
    this.startSyncMonitor();
    this.updateNetworkStatus();
    
    // 初始化时检查是否有待同步数据
    await this.updateOfflineNotice();
    await this.updatePendingCount();
    
    console.log('[OfflineManager] 初始化完成');
}
```

**效果**：页面加载时如果有未同步数据，立即显示提示

---

## 📝 修改的文件

### 1. assets/js/offline-manager.js
- ✅ 新增 `updateOfflineNotice()` 方法
- ✅ 优化 `updateNetworkStatus()` 调用逻辑
- ✅ 重写 `submitRecord()` 方法，支持Base64转换
- ✅ 新增 `base64ToBlob()` 辅助方法
- ✅ 在 `init()` 中检查待同步数据
- ✅ 在 `syncPendingData()` 中更新提示显示

### 2. mobile_submit.php
- ✅ 添加File转Base64逻辑
- ✅ 优化按钮状态管理
- ✅ 新增 `fileToBase64()` 辅助函数

### 3. recheck_inspection_v2.php
- ✅ 同mobile_submit.php的修复
- ✅ 支持两种图片字段（recheck_images、inspection_images）

---

## 🧪 测试步骤

### 测试1：离线保存和网络恢复同步

1. **打开页面**：访问 `mobile_submit.php`
2. **模拟离线**：
   - F12 → Network标签 → 勾选"Offline"
3. **填写表单**：
   - 填写必填字段
   - 上传1-2张图片
4. **提交表单**：
   - 点击"提交记录"
   - 观察按钮变为"正在保存..."
   - 看到提示："数据已保存到本地，将在网络恢复后自动同步"
5. **恢复网络**：
   - 取消勾选"Offline"
   - 观察右上角状态变为"🟢 在线"
   - **离线提示条应该仍然显示**（有待同步数据）
   - "立即同步"按钮可见
6. **等待自动同步**：
   - 最多等待30秒
   - 或点击"立即同步"按钮
7. **验证结果**：
   - 看到提示："成功同步 X 条记录"
   - 离线提示条消失
   - 待同步计数清零
   - 检查数据库确认数据已保存

### 测试2：页面刷新后同步

1. **离线保存数据**（同上）
2. **刷新页面**：按F5
3. **恢复网络**
4. **观察**：
   - 页面加载时应显示"(X条待同步)"
   - 离线提示条应显示
   - 30秒内自动同步

### 测试3：手动同步

1. **离线保存多条数据**
2. **恢复网络**
3. **点击"立即同步"按钮**
4. **观察**：
   - 所有数据依次同步
   - 每条都有日志输出
   - 最终显示成功数量

---

## 🔍 调试技巧

### 查看控制台日志

打开浏览器控制台（F12），可以看到详细的同步过程：

```
[OfflineManager] 初始化完成
[OfflineManager] 数据已保存到离线队列: xxx-xxx-xxx
[SW] Service Worker 注册成功
[OfflineManager] 网络已连接
[OfflineManager] 开始同步 1 条记录
[OfflineManager] 开始同步记录: xxx-xxx-xxx 类型: inspection
[OfflineManager] Base64转Blob成功
[OfflineManager] 发送请求到: /mobile_submit.php
[OfflineManager] 服务器响应状态: 200
[OfflineManager] 记录同步成功: xxx-xxx-xxx
```

### 查看IndexedDB数据

1. F12 → Application标签
2. 左侧选择 IndexedDB → SafetySystemOfflineDB
3. 查看 pendingSubmissions 存储
4. 可以看到所有待同步记录的详细信息

### 查看网络请求

1. F12 → Network标签
2. 筛选XHR请求
3. 可以看到同步时的POST请求
4. 检查请求Payload和响应

---

## ⚠️ 注意事项

### 1. 图片大小限制
- Base64编码会增加约33%体积
- 建议单张图片不超过2MB
- 大量图片可能导致存储空间不足

### 2. 浏览器兼容性
- Chrome/Edge：完美支持
- Safari iOS 11.3+：支持
- 老旧浏览器：可能不支持FileReader或IndexedDB

### 3. 同步超时
- 如果服务器响应慢，可能需要更长时间
- 目前无超时限制，会一直等待
- 后续可添加超时机制

### 4. 并发同步
- 目前是逐条同步，避免服务器压力
- 如需批量同步，可修改为Promise.all

---

## 📊 性能优化建议

### 短期优化
1. **图片压缩**：离线保存前先压缩图片
2. **增量同步**：只同步变化的字段
3. **进度显示**：显示同步进度百分比

### 长期优化
1. **Web Workers**：将Base64转换放到后台线程
2. **批量上传**：支持多文件同时上传
3. **断点续传**：大文件分段上传

---

## ✅ 验收标准

- [x] 离线保存时按钮显示"正在保存..."
- [x] 保存成功后按钮恢复正常
- [x] 网络恢复后离线提示条仍显示（有待同步数据时）
- [x] "立即同步"按钮始终可见（有待同步数据时）
- [x] 图片能正确转换为Base64并存储
- [x] 同步时Base64能正确转回Blob
- [x] 服务器能正确接收并保存图片
- [x] 控制台有详细的日志输出
- [x] 页面刷新后仍能检测到待同步数据
- [x] 自动同步和手动同步都能正常工作

---

**修复日期**: 2026-04-18  
**版本**: v1.1  
**状态**: ✅ 已完成并测试通过