@composy/diff-viewer-vue

@composy/diff-viewer-vue

基于 @composy/diff-viewer-core 核心引擎的 Vue 3 组件封装。

安装

pnpm add @composy/diff-viewer-vue @composy/diff-viewer-core

快速开始

组件

<script setup lang="ts">
import { DiffViewer } from '@composy/diff-viewer-vue'

const oldCode = 'const a = 1;'
const newCode = 'const a = 2;'

const handleChange = ({ result }) => {
  console.info(`+${result.stats.added} -${result.stats.removed}`)
}
</script>

<template>
  <DiffViewer
    :old-text="oldCode"
    :new-text="newCode"
    mode="split"
    theme="light"
    @change="handleChange"
  />
</template>

Composable

import { useDiffViewer } from '@composy/diff-viewer-vue'
import { ref } from 'vue'

const container = ref<HTMLDivElement>(null)
const { result, stats, mode, setTexts, setMode, search, copyToClipboard } = useDiffViewer({
  container,
  oldText: '原始文本',
  newText: '修改后文本',
  options: { mode: 'split', theme: 'light' },
})

console.info(result.value, stats.value, mode.value)
setTexts('old', 'new')
setMode('unified')
search('new')
void copyToClipboard()

组件 Props

组件 Events

组件 Expose

Vue 插件

import { DiffViewerPlugin } from '@composy/diff-viewer-vue'
import { createApp } from 'vue'

const app = createApp(App)
app.use(DiffViewerPlugin, {
  componentName: 'DiffViewer',
  defaultMode: 'split',
  defaultTheme: 'light',
})

样式 token

组件使用 --ldesign-diff-viewer-* CSS 变量，颜色桥接到 LDesign --ld-* token。

使用前请确保已加载全局 LDesign color 和 size CSS variable 样式。

构建产物

开发命令

pnpm run build          # 构建
pnpm run type-check     # 类型检查
pnpm run lint:check     # ESLint 检查
pnpm run test:run       # 运行测试

增强 Props、事件与 Expose

DiffViewer 将 Core 的上下文和比较策略直接映射为 props：

vue <DiffViewer :old-text="oldText" :new-text="newText" mode="unified" :context-lines="2" collapsible searchable ignore-whitespace @search="(keyword, results) => console.log(keyword, results)" />

新增 props 包括 contextLines、searchable、collapsible、ignoreWhitespace、ignoreCase 和 normalizeUnicode。模板 ref 可调用 exportDiff()、nextSearchResult()、prevSearchResult() 与 clearSearch()；useDiffViewer 同样返回 searchResults、searchKeyword、搜索导航和 exportDiff。

search 事件在关键词清空或没有命中时也会发出空数组，Vue 页面可以直接用它关闭结果计数或高亮状态。