远程办公文档管理系统：多终端访问 + 异地协同编辑实现方法（附工具对比）

/* 响应式容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 媒体查询适配不同设备 */
@media (max-width: 768px) {
  .document-view {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .toolbar-button {
    padding: 8px 12px;
    font-size: 14px;
  }
}

// 文件同步服务示例
public class FileSyncService
{
    private readonly ICloudStorageProvider _storageProvider;
    
    public FileSyncService(ICloudStorageProvider storageProvider)
    {
        _storageProvider = storageProvider;
    }
    
    // 同步文件到云端
    public async Task SyncFileToCloudAsync(string localPath, string cloudPath)
    {
        try
        {
            using var fileStream = File.OpenRead(localPath);
            return await _storageProvider.UploadFileAsync(cloudPath, fileStream);
        }
        catch (Exception ex)
        {
            // 记录日志并处理异常
            Logger.LogError(ex, "文件同步失败");
            return false;
        }
    }
    
    // 从云端下载文件
    public async Task DownloadFileFromCloudAsync(string cloudPath, string localPath)
    {
        try
        {
            var fileContent = await _storageProvider.DownloadFileAsync(cloudPath);
            await File.WriteAllBytesAsync(localPath, fileContent);
            return true;
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "文件下载失败");
            return false;
        }
    }
}

// 协同编辑客户端示例
class CollaborativeEditor {
  constructor(documentId) {
    this.documentId = documentId;
    this.socket = new WebSocket(`wss://api.example.com/docs/${documentId}/ws`);
    this.setupWebSocketHandlers();
  }
  
  // 设置WebSocket处理器
  setupWebSocketHandlers() {
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.handleRemoteOperation(data);
    };
    
    this.socket.onopen = () => {
      console.log('协同编辑连接已建立');
    };
  }
  
  // 处理本地编辑操作
  handleLocalEdit(operation) {
    // 应用本地更改
    this.applyOperation(operation);
    
    // 发送到服务器
    this.socket.send(JSON.stringify({
      type: 'edit',
      operation: operation,
      timestamp: Date.now()
    }));
  }
  
  // 处理远程操作
  handleRemoteOperation(operation) {
    // 解决冲突并应用更改
    if (this.isOperationValid(operation)) {
      this.applyOperation(operation);
    }
  }
  
  // 应用编辑操作
  applyOperation(operation) {
    // 实现具体的文档更改逻辑
    // ...
  }
}

// 简单的操作转换示例
class OperationTransformer {
  // 转换操作以解决冲突
  transform(operation1, operation2) {
    // 根据操作类型和位置进行调整
    if (operation1.type === 'insert' && operation2.type === 'insert') {
      return this.transformInsertInsert(operation1, operation2);
    } else if (operation1.type === 'delete' && operation2.type === 'insert') {
      return this.transformDeleteInsert(operation1, operation2);
    }
    // 其他操作组合...
    
    return operation1;
  }
  
  // 处理两个插入操作的冲突
  transformInsertInsert(op1, op2) {
    if (op1.position < op2.position) {
      return op1;
    } else if (op1.position > op2.position) {
      return {
        ...op1,
        position: op1.position + op2.content.length
      };
    } else {
      // 相同位置的处理策略
      return {
        ...op1,
        position: op1.position + 1
      };
    }
  }
}