text-compare-vue3/README.md

A powerful text comparison plugin for Vue.js with character-level diff support

# Text Compare Vue3

一个强大的文本对比 Vue.js 插件，支持字符级别的差异对比。

## 特性

- 🎯 精确的字符级别差异对比
- 🎨 自定义样式主题
- 📊 相似度计算
- 🔄 实时对比更新
- ⚡ 高性能算法实现
- 🛡️ 使用 TypeScript 开发
- 📦 支持按需引入
- 🌐 支持 Vue 3

## 安装

```bash
npm install text-compare-vue3
# 或
yarn add text-compare-vue3
```

## 使用

### 全局注册

```typescript
import { createApp } from 'vue'
import TextCompareVue3 from 'text-compare-vue3'
import App from './App.vue'

const app = createApp(App)
app.use(TextCompareVue3)
```

### 局部注册

```vue
<template>
  <TextDiff
    :old-text="oldText"
    :new-text="newText"
    :mode="mode"
    :is-different="isDifferent"
    :options="options"
    :show-similarity="true"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { TextDiff } from 'text-compare-vue3'

export default defineComponent({
  components: {
    TextDiff
  },
  setup() {
    const oldText = ref('这是原始文本')
    const newText = ref('这是新的文本')
    const mode = ref('diff')  // 'diff' | 'full'
    const isDifferent = ref(true)
    
    const options = {
      customColors: {
        commonColor: '#1E90FF',    // 相同文本的颜色
        removedColor: '#FF6347',   // 删除文本的颜色
        addedColor: '#32CD32'      // 新增文本的颜色
      }
    }

    return {
      oldText,
      newText,
      mode,
      isDifferent,
      options
    }
  }
})
</script>
```

### 使用 Composable

```typescript
import { useTextComparison } from 'text-compare-vue3'

const text1 = '这是原始文本'
const text2 = '这是新的文本'

const options = {
  customColors: {
    commonColor: '#1E90FF',    // 相同文本的颜色
    removedColor: '#FF6347',   // 删除文本的颜色
    addedColor: '#32CD32'      // 新增文本的颜色
  }
}

const { diffResult, similarity, styles } = useTextComparison(text1, text2, options)

console.log(similarity) // 相似度百分比
console.log(diffResult) // 差异对比结果
console.log(styles)     // 样式对象
```

## API

### TextDiff 组件属性

| 属性 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| oldText | string | '' | 是 | 原始文本 |
| newText | string | '' | 是 | 新文本 |
| mode | 'diff' \| 'full' | 'diff' | 否 | 对比模式：diff-差异对比，full-完全对比 |
| isDifferent | boolean | false | 否 | 是否标记为不同（影响样式） |
| options | TextComparisonOptions | {} | 否 | 对比配置选项 |
| showSimilarity | boolean | true | 否 | 是否显示相似度 |

### TextComparisonOptions 配置选项

| 选项 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| customColors | CustomColors | - | 自定义颜色配置 |

### CustomColors 颜色配置

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| commonColor | string | 'inherit' | 相同文本的颜色 |
| removedColor | string | '#f56c6c' | 删除文本的颜色 |
| addedColor | string | '#28a745' | 新增文本的颜色 |

### DiffResult 返回结果

```typescript
interface DiffResult {
  oldParts: DiffPart[]  // 原文的差异部分
  newParts: DiffPart[]  // 新文的差异部分
}

interface DiffPart {
  value: string      // 文本内容
  added?: boolean    // 是否为新增
  removed?: boolean  // 是否为删除
}
```

## 示例

### 基础用法

```vue
<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
  />
</template>
```

### 自定义颜色

```vue
<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
    :options="{
      customColors: {
        commonColor: '#1E90FF',
        removedColor: '#FF6347',
        addedColor: '#32CD32'
      }
    }"
  />
</template>
```

### 显示相似度

```vue
<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
    :show-similarity="true"
  />
</template>
```

### 完全对比模式

```vue
<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
    mode="full"
    :is-different="true"
  />
</template>
```

### 空值处理

当任意一个文本为空时，会自动标记为红色：

```vue
<template>
  <TextDiff
    old-text="原始文本"
    :new-text="''"
  />
</template>
```

## 开发

```bash
# 安装依赖
npm install

# 运行测试
npm test

# 构建
npm run build

# 代码格式化
npm run format

# 代码检查
npm run lint
```

## 许可证

[MIT](LICENSE)