# text-diff-viewer

**Repository Path**: honlnk/text-diff-viewer

## Basic Information

- **Project Name**: text-diff-viewer
- **Description**: 纯文本差异对比工具
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-25
- **Last Updated**: 2025-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex

## README

# 文本差异对比工具 (Text Diff Viewer)

<div align="center">

![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)
![Vue](https://img.shields.io/badge/Vue-3.4+-green.svg)
![TypeScript](https://img.shields.io/badge/TypeScript-5.3+-blue.svg)
![License](https://img.shields.io/badge/license-MIT-green.svg)

一个基于Web的纯文本差异对比工具，专注于精细化文本差异分析，使用diff-match-patch算法实现字符级别的精确差异检测。

[功能特点](#-功能特点) • [快速开始](#-快速开始) • [使用指南](#-使用指南) • [技术架构](#-技术架构) • [开发指南](#-开发指南)

</div>

## ✨ 功能特点

### 🔍 字符级精确差异检测
- 基于diff-match-patch算法，实现字符级别的精确差异分析
- 支持Unicode字符处理，包括中文、Emoji等特殊字符
- 智能识别文本差异类型：新增、删除、修改

### 🎨 可视化差异展示
- **三色编码系统**：
  - 🔴 红色背景：删除内容
  - 🟢 绿色背景：新增内容
  - 🔵 蓝色背景：修改内容
- **多视图模式**：
  - 对比视图：增删改对比显示
  - 原始视图：显示原始文本对比

### 📁 多种输入方式
- **文件上传**：支持 `.txt`、`.md`、`.csv` 格式
- **直接输入**：大文本框支持，适合长文本内容
- **混合输入**：文件 + 文本组合输入方式
- **文件验证**：格式检查、大小限制（10MB）

### 📊 差异统计分析
- 实时计算相似度百分比
- 统计新增、删除、修改操作数量
- 显示编辑距离和差异数量

### 🌙 现代化界面
- 响应式设计，支持桌面端和移动端
- 深色/浅色主题切换
- 基于Element Plus的现代化UI组件
- 使用UnoCSS实现原子化样式

### ⚡ 高性能处理
- 异步处理大文件，避免界面阻塞
- 智能超时控制机制
- 内存优化处理，支持大文本分析

## 🚀 快速开始

### 环境要求
- Node.js >= 18.0.0
- pnpm >= 8.0.0（推荐）

### 安装依赖
```bash
# 克隆项目
git clone https://github.com/your-username/text-diff-viewer.git
cd text-diff-viewer

# 安装依赖
pnpm install
```

### 开发模式
```bash
# 启动开发服务器
pnpm dev
```

应用将在 `http://localhost:3000` 启动。

### 构建部署
```bash
# 构建生产版本
pnpm build

# 预览构建结果
pnpm preview
```

## 📖 使用指南

### 基本使用流程

1. **输入文本内容**
   - 点击"上传文件"按钮选择本地文件
   - 或直接在文本框中输入/粘贴内容
   - 支持左右两侧分别输入不同文本

2. **开始对比**
   - 点击"开始对比"按钮
   - 系统将自动分析文本差异

3. **查看结果**
   - 在结果页面查看差异可视化结果
   - 使用工具栏切换不同视图模式
   - 查看详细的统计信息

4. **导出结果**
   - 点击"导出HTML"按钮保存对比结果
   - 导出文件包含完整的样式和差异信息

### 支持的文件格式
- **文本文件**：`.txt`
- **Markdown文件**：`.md`
- **CSV文件**：`.csv`
- **文件大小限制**：最大 10MB

### 快捷操作
- `Ctrl/Cmd + V`：粘贴文本内容
- `Ctrl/Cmd + Enter`：快速开始对比
- `F11`：全屏模式

## 🏗️ 技术架构

### 核心技术栈
- **前端框架**：Vue 3.4+ (Composition API)
- **开发语言**：TypeScript 5.3+
- **构建工具**：Vite 5.0+
- **UI框架**：Element Plus 2.4+
- **CSS框架**：UnoCSS 0.58+
- **状态管理**：Pinia 2.1+
- **路由管理**：Vue Router 4.2+

### 算法引擎
- **diff-match-patch 1.0.5**：Google开源的差异算法库
- **字符级精度**：支持字符、单词、行级别的差异分析
- **性能优化**：时间复杂度 O(N*M)，空间复杂度 O(N+M)

### 项目结构
```
src/
├── components/          # 可复用组件
│   └── DiffViewer.vue  # 差异可视化组件
├── views/              # 页面组件
│   ├── InputView.vue   # 数据输入页面
│   └── ResultView.vue  # 结果展示页面
├── utils/              # 工具函数
│   ├── textProcessor.ts     # 文本预处理
│   └── diffAlgorithm.ts     # 差异算法封装
├── stores/             # 状态管理
│   └── diff.ts         # 差异数据状态
├── types/              # 类型定义
│   └── diff.ts         # 差异相关类型
├── router/             # 路由配置
│   └── index.ts        # 路由定义
├── App.vue             # 根组件
└── main.ts             # 应用入口
```

### 核心模块

#### 文本处理器 (textProcessor.ts)
```typescript
// 换行符标准化
function normalizeText(text: string): string

// 文本预处理
function preprocessText(text: string): string

// 文件验证
function validateFile(file: File): boolean
```

#### 差异算法 (diffAlgorithm.ts)
```typescript
// 计算文本差异
function calculateDiff(text1: string, text2: string): Promise<DiffResult>

// 相似度计算
function calculateSimilarity(diffs: DiffRecord[]): number

// 统计分析
function generateStats(diffs: DiffRecord[]): DiffStats
```

#### 差异可视化 (DiffViewer.vue)
- 三色编码渲染
- 响应式布局
- 交互式界面

## 🛠️ 开发指南

### 代码规范
- 使用ESLint + Prettier进行代码格式化
- 遵循Vue 3 Composition API最佳实践
- TypeScript严格模式，类型安全优先
- 提交信息遵循Conventional Commits规范

### 开发命令
```bash
# 代码格式化
pnpm format

# 代码检查
pnpm lint

# 类型检查
pnpm build

# 开发服务器
pnpm dev
```

### 组件开发规范
- 使用 `<script setup lang="ts">` 语法
- 组件props和emits必须有完整类型定义
- 使用UnoCSS原子化样式类
- 保持组件单一职责原则

### 性能优化
- 大文件异步处理，避免主线程阻塞
- 虚拟滚动处理长文本显示
- 防抖处理用户输入
- 组件懒加载减少初始包大小

## 🔧 配置说明

### Vite配置 (vite.config.ts)
```typescript
export default defineConfig({
  plugins: [
    vue(),
    UnoCSS(),
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: true
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
})
```

### UnoCSS配置 (uno.config.ts)
- 预设：@unocss/preset-uno, @unocss/preset-attributify
- 快捷方式：自定义常用样式组合
- 主题：支持深色/浅色模式

### TypeScript配置
- 严格模式：`strict: true`
- 路径映射：`@/*` 映射到 `src/*`
- 目标版本：ES2020+

## 📈 版本历史

### v1.0.0 (2024-11-24)
- ✨ 实现字符级文本差异对比功能
- ✨ 支持多种文件格式上传
- ✨ 可视化差异展示（三色编码）
- ✨ 响应式设计和移动端适配
- ✨ HTML导出功能
- ✨ 完整的错误处理机制

## 🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支：`git checkout -b feature/amazing-feature`
3. 提交更改：`git commit -m 'Add some amazing feature'`
4. 推送到分支：`git push origin feature/amazing-feature`
5. 提交Pull Request

### 贡献类型
- 🐛 Bug修复
- ✨ 新功能开发
- 📝 文档改进
- 🎨 UI/UX优化
- ⚡ 性能优化
- 🔧 配置改进

## 📄 开源协议

本项目基于 [MIT License](LICENSE) 开源协议。

## 🙏 致谢

- [Vue.js](https://vuejs.org/) - 渐进式JavaScript框架
- [Element Plus](https://element-plus.org/) - Vue 3 UI组件库
- [diff-match-patch](https://github.com/google/diff-match-patch) - 高效的差异算法库
- [UnoCSS](https://unocss.dev/) - 原子化CSS引擎
- [Vite](https://vitejs.dev/) - 现代化前端构建工具

## 📞 联系方式

- 项目主页：https://github.com/honlnk/text-diff-viewer
- 问题反馈：https://github.com/honlnk/text-diff-viewer/issues
- 邮箱：[jhshonlnk@gmail.com](jhshonlnk@gmail.com)

---

<div align="center">

**如果这个项目对你有帮助，请给它一个 ⭐️**

Made with ❤️ by [Honlnk](https://github.com/honlnk)

</div>