文件对比工具应用

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

适配的第三方库地址：

• file_selector: https://pub.dev/packages/file_selector
• cross_file: https://pub.dev/packages/cross_file
• animations: https://pub.dev/packages/animations
• shared_preferences: https://pub.dev/packages/shared_preferences

一、项目概述

运行效果图

1.1 应用简介

文件对比工具是一款专业的文件内容对比应用，致力于帮助用户快速发现文件之间的差异。应用支持文件内容对比、差异高亮显示、对比历史记录、结果导出等功能，让文件对比变得简单高效。

应用以专业的靛蓝色为主色调，象征精准与专业。涵盖对比页面、历史记录、设置中心三大模块。用户可以进行文本对比、查看差异统计、管理对比历史，是开发者和文档编辑者的得力助手。

1.2 核心功能

1.3 差异类型定义

1.4 对比模式定义

1.5 技术栈

1.6 项目结构

lib/
└── main_file_compare.dart
    ├── FileCompareApp              # 应用入口
    ├── DiffType                    # 差异类型枚举
    ├── CompareMode                 # 对比模式枚举
    ├── DiffLine                    # 差异行模型
    ├── CompareResult               # 对比结果模型
    ├── CompareHistory              # 对比历史模型
    ├── FileCompareController       # 文件对比控制器
    ├── CompareHomePage             # 主页面（底部导航）
    ├── _buildComparePage           # 对比页
    ├── _buildHistoryPage           # 历史页
    ├── _buildSettingsPage          # 设置页
    └── _buildDiffLine              # 差异行组件

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 对比算法流程

三、核心模块设计

3.1 数据模型设计

3.1.1 差异类型枚举 (DiffType)

enum DiffType {
  added(label: '新增', color: Color(0xFF4CAF50), icon: Icons.add),
  removed(label: '删除', color: Color(0xFFF44336), icon: Icons.remove),
  modified(label: '修改', color: Color(0xFFFF9800), icon: Icons.edit),
  unchanged(label: '未变', color: Color(0xFF9E9E9E), icon: Icons.remove);

  final String label;
  final Color color;
  final IconData icon;
  const DiffType({required this.label, required this.color, required this.icon});
}

3.1.2 差异行模型 (DiffLine)

class DiffLine {
  final int leftLineNumber;
  final int? rightLineNumber;
  final String leftContent;
  final String? rightContent;
  final DiffType type;
  final int changeIndex;

  const DiffLine({
    required this.leftLineNumber,
    this.rightLineNumber,
    required this.leftContent,
    this.rightContent,
    required this.type,
    required this.changeIndex,
  });
}

3.1.3 对比结果模型 (CompareResult)

class CompareResult {
  final String leftFileName;
  final String rightFileName;
  final DateTime compareTime;
  final List<DiffLine> diffLines;
  final int addedCount;
  final int removedCount;
  final int modifiedCount;
  final int unchangedCount;

  int get totalChanges => addedCount + removedCount + modifiedCount;
  double get similarityPercent {
    if (totalLines == 0) return 100;
    return (unchangedCount / totalLines) * 100;
  }
}

3.1.4 差异类型分布

3.2 LCS算法设计

3.2.1 算法原理

最长公共子序列（LCS）算法是文件对比的核心：

3.2.2 算法实现

List<String> _computeLCS(List<String> left, List<String> right) {
  final m = left.length;
  final n = right.length;
  
  // 构建DP表
  final dp = List.generate(m + 1, (_) => List.filled(n + 1, 0));
  
  for (int i = 1; i <= m; i++) {
    for (int j = 1; j <= n; j++) {
      if (left[i - 1] == right[j - 1]) {
        dp[i][j] = dp[i - 1][j - 1] + 1;
      } else {
        dp[i][j] = max(dp[i - 1][j], dp[i][j - 1]);
      }
    }
  }
  
  // 回溯获取LCS
  final lcs = <String>[];
  int i = m, j = n;
  while (i > 0 && j > 0) {
    if (left[i - 1] == right[j - 1]) {
      lcs.insert(0, left[i - 1]);
      i--;
      j--;
    } else if (dp[i - 1][j] > dp[i][j - 1]) {
      i--;
    } else {
      j--;
    }
  }
  
  return lcs;
}

3.3 页面结构设计

3.3.1 对比页结构

3.3.2 差异行组件结构

3.4 导出功能设计

四、UI设计规范

4.1 配色方案

应用以专业的靛蓝色为主色调，象征精准与专业：

4.2 差异类型配色

4.3 字体规范

4.4 组件规范

4.4.1 差异行

┌─────────────────────────────────────┐
│  12  12  │ - │ import 'package:flutter/material.dart'; │
├─────────────────────────────────────┤
│  13      │ - │   title: 'Flutter Demo',               │
├─────────────────────────────────────┤
│      13  │ + │   title: 'Flutter App',                │
└─────────────────────────────────────┘

4.4.2 统计摘要

┌─────────────────────────────────────┐
│   ➕          ➖          📝         │
│   12         8           5          │
│  新增       删除        修改        │
│                                     │
│            85.5%                    │
│           相似度                    │
└─────────────────────────────────────┘

4.4.3 历史项

┌─────────────────────────────────────┐
│  ⚖️  main.dart ⇄ main_new.dart      │
│      25处变更  相似度 75.0%   2天前 │
└─────────────────────────────────────┘

五、核心功能实现

5.1 文件对比控制器实现

class FileCompareController extends ChangeNotifier {
  String _leftContent = '';
  String _rightContent = '';
  List<DiffLine> _diffLines = [];

  void compare() {
    final leftLines = _leftContent.split('\n');
    final rightLines = _rightContent.split('\n');
    
    _diffLines = _computeDiff(leftLines, rightLines);
    _addToHistory();
    notifyListeners();
  }

  List<DiffLine> _computeDiff(List<String> left, List<String> right) {
    final result = <DiffLine>[];
    final lcs = _computeLCS(left, right);
    // ... 差异计算逻辑
    return result;
  }
}

5.2 LCS算法实现

List<String> _computeLCS(List<String> left, List<String> right) {
  final m = left.length;
  final n = right.length;
  
  final dp = List.generate(m + 1, (_) => List.filled(n + 1, 0));
  
  for (int i = 1; i <= m; i++) {
    for (int j = 1; j <= n; j++) {
      if (left[i - 1] == right[j - 1]) {
        dp[i][j] = dp[i - 1][j - 1] + 1;
      } else {
        dp[i][j] = max(dp[i - 1][j], dp[i][j - 1]);
      }
    }
  }
  
  // 回溯获取LCS
  final lcs = <String>[];
  int i = m, j = n;
  while (i > 0 && j > 0) {
    if (left[i - 1] == right[j - 1]) {
      lcs.insert(0, left[i - 1]);
      i--;
      j--;
    } else if (dp[i - 1][j] > dp[i][j - 1]) {
      i--;
    } else {
      j--;
    }
  }
  
  return lcs;
}

5.3 导出功能实现

String exportAsText() {
  final buffer = StringBuffer();
  buffer.writeln('文件对比结果');
  buffer.writeln('左文件: $_leftFileName');
  buffer.writeln('右文件: $_rightFileName');
  
  for (var line in _diffLines) {
    final prefix = switch (line.type) {
      DiffType.added => '+ ',
      DiffType.removed => '- ',
      DiffType.modified => '~ ',
      DiffType.unchanged => '  ',
    };
    buffer.writeln('$prefix${line.leftContent}');
  }
  
  return buffer.toString();
}

String exportAsHtml() {
  final buffer = StringBuffer();
  buffer.writeln('<!DOCTYPE html>');
  buffer.writeln('<html><head><meta charset="UTF-8">');
  buffer.writeln('<style>');
  buffer.writeln('.added { background-color: #e8f5e9; }');
  buffer.writeln('.removed { background-color: #ffebee; }');
  buffer.writeln('.modified { background-color: #fff3e0; }');
  buffer.writeln('</style></head><body>');
  // ... HTML内容生成
  return buffer.toString();
}

5.4 搜索过滤实现

void setSearchQuery(String query) {
  _searchQuery = query;
  notifyListeners();
}

// 在构建列表时过滤
if (_controller.searchQuery.isNotEmpty) {
  final content = line.type == DiffType.added 
    ? line.rightContent ?? '' 
    : line.leftContent;
  if (!content.toLowerCase().contains(_controller.searchQuery.toLowerCase())) {
    return null;
  }
}

六、交互设计

6.1 对比流程

6.2 导出流程

6.3 搜索过滤流程

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 文件选择

文件功能：

• 本地文件选择
• 拖拽文件上传
• URL文件加载
• 剪贴板粘贴

7.2.2 高级对比

对比功能：

• 三方文件对比
• 文件夹对比
• 图片对比
• 二进制文件对比

7.2.3 协作功能

协作功能：

• 分享对比链接
• 在线协作标注
• 评论功能
• 版本历史

八、注意事项

8.1 开发注意事项

1. 性能优化：大文件对比时注意性能优化

2. 内存管理：避免加载过大文件导致内存溢出

3. 编码处理：正确处理不同编码的文件

4. 差异算法：优化LCS算法提高效率

5. 用户体验：提供清晰的差异展示

8.2 常见问题

8.3 使用技巧

📄 文件对比工具使用技巧 📄

对比技巧

• 选择合适的对比模式
• 使用搜索快速定位
• 开启仅显示变更模式
• 利用行号精确定位

导出技巧

• HTML格式保留样式
• 文本格式便于分享
• 复制到剪贴板快速粘贴
• 保存对比结果备查

效率提升

• 使用交换功能快速切换
• 定期清理历史记录
• 设置常用显示选项
• 熟悉快捷键操作

九、鸿蒙适配说明

9.1 权限配置

在 ohos/entry/src/main/module.json5 中添加权限：

{
  "module": {
    "requestPermissions": [
      {"name": "ohos.permission.INTERNET"},
      {"name": "ohos.permission.READ_MEDIA"},
      {"name": "ohos.permission.WRITE_MEDIA"}
    ]
  }
}

9.2 第三方库适配状态

9.3 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_file_compare.dart --web-port 8150

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 -t lib/main_file_compare.dart

# 代码分析
flutter analyze lib/main_file_compare.dart

十、总结

文件对比工具应用为用户提供了一套专业的文件内容对比解决方案。应用支持文件内容对比、差异高亮显示、对比历史记录、结果导出等功能，让文件对比变得简单高效。

核心功能涵盖文件对比、差异高亮、对比统计、历史记录、结果导出、搜索过滤、行号显示、交换文件八大模块。用户可以进行文本对比、查看差异统计、管理对比历史，是开发者和文档编辑者的得力助手。

应用采用 Material Design 3 设计规范，以专业的靛蓝色为主色调，象征精准与专业。通过本应用，希望能够帮助用户快速发现文件差异，提高工作效率，让文件对比变得轻松愉快。

文件对比工具——精准对比，高效工作