Skip to content

V
vue3_onlineEditor
Commit 98bdf0a0 by qlintonger xeno
Options

feat: 使用diff_match_patch来对比

parent ff88dfbb
Showing with 634 additions and 6 deletions
src/assets/file/Trans-Convert.xml
......@@ -26,6 +26,19 @@
</NOTE>
<SIGNOFF/>
</STEP>
<STEP CK-LEVEL="C">
<EFFECT EFFRG="001999"></EFFECT>
<RECORD-LINE>
<PARAC>发动机序号</PARAC>
<PARA>Engine SN</PARA>
<RECORD></RECORD>
</RECORD-LINE>
<NOTE>
<PARAC>开始工作前请记录。</PARAC>
<PARA>Please record before starting work.</PARA>
</NOTE>
<SIGNOFF/>
</STEP>
</TOPIC>
<TOPIC CK-LEVEL="C">
<TITLEC>工作准备</TITLEC>
......
src/lib/XMLProcessor/src/core/Processing.ts
......@@ -2,8 +2,13 @@
import { NewTreeModification, OldTreeModification, TreeRenderResult, TreeRenderResultFlatted } from '@/lib/XMLProcessor/src/typing'
import { md5 } from 'js-md5'
import { getUUID } from '../utils/uuid.ts'
import { dualCompare } from '@/lib/XMLProcessor/src/core/dualCompare.ts'
import {cloneDeep} from 'lodash'
import {diff_match_patch} from '@/views/Compare/lib/DiffMatchPatch.js'
function dualCompareFromHashString(stringA: string, stringB: string) {
const af = new diff_match_patch();
const diff_result = af.diff_main(stringA, stringB)
console.log('after-diff', af.diff_main(stringA, stringB), {stringA, stringB})
}
// 定义 Processing 类，用于处理 XML 数据
export class Processing {
......@@ -102,9 +107,12 @@ export class Processing {
const resultAFlatted = this.flattenTree(resultA)
const resultBFlatted = this.flattenTree(resultB)
const results = dualCompare(resultAFlatted, resultBFlatted).filter((a) => a.type !== 'same')
const resultATree = resultAFlatted.map(item => `${item.hash}`).join('\r\n');
const resultBTree = resultBFlatted.map(item => `${item.hash}`).join('\r\n');
dualCompareFromHashString(resultATree, resultBTree)
console.log('after-compare', results)
const results: any[] = []
// 分组构建树
const allDeletedTree = results.filter((item) => item.type === 'deleted').map(a=>a.item);
......
src/main.ts
......@@ -4,6 +4,8 @@ import router from './router'
import { setupPinia } from './store'
import './assets/css/index.less'
import {XMLProcessing} from '@/lib/XMLProcessor/src'
import "@/views/Compare/lib/codemirror.merge.css"
import "@/views/Compare/lib/codemirror.min.css"
const app = createApp(App)
app.use(router)
......
src/views/Compare/index.vue
......@@ -9,7 +9,7 @@ import TextB from '@/assets/file/CES-QEC-V250-A.xml?raw'
import { CodeMirror, vkbeautify } from './lib/CodeMirror.js';
onMounted(function () {
console.log('the code mirror', CodeMirror)
console.log('the code mirror', CodeMirror.MergeView)
const mv = CodeMirror.MergeView(view.value, {
value: TextA,
origLeft: null,
......
src/views/Compare/lib/codemirror.merge.css 0 → 100644
.CodeMirror-merge {
position: relative;
border: 1px solid #ddd;
white-space: pre;
}
.CodeMirror-merge, .CodeMirror-merge .CodeMirror {
height: 600px;
}
.CodeMirror-merge-2pane .CodeMirror-merge-pane { width: 47%; }
.CodeMirror-merge-2pane .CodeMirror-merge-gap { width: 6%; }
.CodeMirror-merge-3pane .CodeMirror-merge-pane { width: 31%; }
.CodeMirror-merge-3pane .CodeMirror-merge-gap { width: 3.5%; }
.CodeMirror-merge-pane {
display: inline-block;
white-space: normal;
vertical-align: top;
}
.CodeMirror-merge-pane-rightmost {
position: absolute;
right: 0px;
z-index: 1;
}
.CodeMirror-merge-gap {
z-index: 2;
display: inline-block;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
position: relative;
background: #f8f8f8;
}
.CodeMirror-merge-scrolllock-wrap {
position: absolute;
bottom: 0; left: 50%;
}
.CodeMirror-merge-scrolllock {
position: relative;
left: -50%;
cursor: pointer;
color: #555;
line-height: 1;
}
.CodeMirror-merge-scrolllock:after {
content: "\21db\00a0\00a0\21da";
}
.CodeMirror-merge-scrolllock.CodeMirror-merge-scrolllock-enabled:after {
content: "\21db\21da";
}
.CodeMirror-merge-copybuttons-left, .CodeMirror-merge-copybuttons-right {
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
line-height: 1;
}
.CodeMirror-merge-copy {
position: absolute;
cursor: pointer;
color: #579480;
z-index: 3;
}
.CodeMirror-merge-copy-reverse {
position: absolute;
cursor: pointer;
color: #FF8983;
}
.CodeMirror-merge-copybuttons-left .CodeMirror-merge-copy { left: 2px; }
.CodeMirror-merge-copybuttons-right .CodeMirror-merge-copy { right: 2px; }
.CodeMirror-merge-r-inserted, .CodeMirror-merge-l-inserted {
background-color: #FF8983;
}
.CodeMirror-merge-r-deleted, .CodeMirror-merge-l-deleted {
Background-color: #6BDFB8;
}
.CodeMirror-merge-r-chunk { background: #FFC4C1; }
/*.CodeMirror-merge-r-chunk-start { border-top: 1px solid #ee8; }
.CodeMirror-merge-r-chunk-end { border-bottom: 1px solid #ee8; }*/
.CodeMirror-merge-r-connect { fill: #ffffe0; stroke: #ee8; stroke-width: 1px; }
.CodeMirror-merge-l-chunk { background: #eef; }
.CodeMirror-merge-l-chunk-start { border-top: 1px solid #88e; }
.CodeMirror-merge-l-chunk-end { border-bottom: 1px solid #88e; }
.CodeMirror-merge-l-connect { fill: #eef; stroke: #88e; stroke-width: 1px; }
.CodeMirror-merge-l-chunk.CodeMirror-merge-r-chunk { background: #dfd; }
.CodeMirror-merge-l-chunk-start.CodeMirror-merge-r-chunk-start { border-top: 1px solid #4e4; }
.CodeMirror-merge-l-chunk-end.CodeMirror-merge-r-chunk-end { border-bottom: 1px solid #4e4; }
.CodeMirror-merge-collapsed-widget:before {
content: "(...)";
}
.CodeMirror-merge-collapsed-widget {
cursor: pointer;
color: #88b;
background: #eef;
border: 1px solid #ddf;
font-size: 90%;
padding: 0 3px;
border-radius: 4px;
}
.CodeMirror-merge-collapsed-line .CodeMirror-gutter-elt { display: none; }
.CodeMirror-gutters {
border:none;
}
.CodeMirror-gutter {
color: rgb(153, 153, 153);
background: #fff;
}
.CodeMirror-merge-gap {
background: #fff;
border-right:none;
}
.CodeMirror-linenumber {
text-align: center;
}
.CodeMirror-merge-pane-rightmost .CodeMirror-merge-r-chunk { background: #B5EFDB; }
\ No newline at end of file
src/views/Compare/lib/codemirror.min.css 0 → 100644
.CodeMirror {
font-family: monospace;
height: 300px;
color: #000;
direction: ltr
}
.CodeMirror-lines {
padding: 4px 0
}
.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
padding: 0 4px
}
.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler {
background-color: #fff
}
.CodeMirror-gutters {
border-right: 1px solid #ddd;
background-color: #f7f7f7;
white-space: nowrap
}
.CodeMirror-linenumber {
padding: 0 3px 0 5px;
min-width: 20px;
text-align: right;
color: #999;
white-space: nowrap
}
.CodeMirror-guttermarker {
color: #000
}
.CodeMirror-guttermarker-subtle {
color: #999
}
.CodeMirror-cursor {
border-left: 1px solid #000;
border-right: none;
width: 0
}
.CodeMirror div.CodeMirror-secondarycursor {
border-left: 1px solid silver
}
.cm-fat-cursor .CodeMirror-cursor {
width: auto;
border: 0!important;
background: #7e7
}
.cm-fat-cursor div.CodeMirror-cursors {
z-index: 1
}
.cm-fat-cursor .CodeMirror-line::selection,.cm-fat-cursor .CodeMirror-line>span::selection,.cm-fat-cursor .CodeMirror-line>span>span::selection {
background: 0 0
}
.cm-fat-cursor .CodeMirror-line::-moz-selection,.cm-fat-cursor .CodeMirror-line>span::-moz-selection,.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
background: 0 0
}
.cm-fat-cursor {
caret-color: transparent
}
@-moz-keyframes blink {
50% {
background-color: transparent
}
}
@-webkit-keyframes blink {
50% {
background-color: transparent
}
}
@keyframes blink {
50% {
background-color: transparent
}
}
.cm-tab {
display: inline-block;
text-decoration: inherit
}
.CodeMirror-rulers {
position: absolute;
left: 0;
right: 0;
top: -50px;
bottom: 0;
overflow: hidden
}
.CodeMirror-ruler {
border-left: 1px solid #ccc;
top: 0;
bottom: 0;
position: absolute
}
.cm-s-default .cm-header {
color: #00f
}
.cm-s-default .cm-quote {
color: #090
}
.cm-negative {
color: #d44
}
.cm-positive {
color: #292
}
.cm-header,.cm-strong {
font-weight: 700
}
.cm-em {
font-style: italic
}
.cm-link {
text-decoration: underline
}
.cm-strikethrough {
text-decoration: line-through
}
.cm-s-default .cm-keyword {
color: #708
}
.cm-s-default .cm-atom {
color: #219
}
.cm-s-default .cm-number {
color: #164
}
.cm-s-default .cm-def {
color: #00f
}
.cm-s-default .cm-variable-2 {
color: #05a
}
.cm-s-default .cm-type,.cm-s-default .cm-variable-3 {
color: #085
}
.cm-s-default .cm-comment {
color: #a50
}
.cm-s-default .cm-string {
color: #a11
}
.cm-s-default .cm-string-2 {
color: #f50
}
.cm-s-default .cm-meta {
color: #555
}
.cm-s-default .cm-qualifier {
color: #555
}
.cm-s-default .cm-builtin {
color: #30a
}
.cm-s-default .cm-bracket {
color: #997
}
.cm-s-default .cm-tag {
color: #170
}
.cm-s-default .cm-attribute {
color: #00c
}
.cm-s-default .cm-hr {
color: #999
}
.cm-s-default .cm-link {
color: #00c
}
.cm-s-default .cm-error {
color: red
}
.cm-invalidchar {
color: red
}
.CodeMirror-composing {
border-bottom: 2px solid
}
div.CodeMirror span.CodeMirror-matchingbracket {
color: #0b0
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
color: #a22
}
.CodeMirror-matchingtag {
background: rgba(255,150,0,.3)
}
.CodeMirror-activeline-background {
background: #e8f2ff
}
.CodeMirror {
position: relative;
overflow: hidden;
background: #fff
}
.CodeMirror-scroll {
overflow: scroll!important;
margin-bottom: -50px;
margin-right: -50px;
padding-bottom: 50px;
height: 100%;
outline: 0;
position: relative;
z-index: 0
}
.CodeMirror-sizer {
position: relative;
border-right: 50px solid transparent
}
.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar {
position: absolute;
z-index: 6;
display: none;
outline: 0
}
.CodeMirror-vscrollbar {
right: 0;
top: 0;
overflow-x: hidden;
overflow-y: scroll
}
.CodeMirror-hscrollbar {
bottom: 0;
left: 0;
overflow-y: hidden;
overflow-x: scroll
}
.CodeMirror-scrollbar-filler {
right: 0;
bottom: 0
}
.CodeMirror-gutter-filler {
left: 0;
bottom: 0
}
.CodeMirror-gutters {
position: absolute;
left: 0;
top: 0;
min-height: 100%;
z-index: 3
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: -50px
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: 0 0!important;
border: none!important
}
.CodeMirror-gutter-background {
position: absolute;
top: 0;
bottom: 0;
z-index: 4
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4
}
.CodeMirror-gutter-wrapper ::selection {
background-color: transparent
}
.CodeMirror-gutter-wrapper ::-moz-selection {
background-color: transparent
}
.CodeMirror-lines {
cursor: text;
min-height: 1px
}
.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border-width: 0;
background: 0 0;
font-family: inherit;
font-size: inherit;
margin: 0;
white-space: pre;
word-wrap: normal;
line-height: inherit;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
-webkit-tap-highlight-color: transparent;
-webkit-font-variant-ligatures: contextual;
font-variant-ligatures: contextual
}
.CodeMirror-wrap pre.CodeMirror-line,.CodeMirror-wrap pre.CodeMirror-line-like {
word-wrap: break-word;
white-space: pre-wrap;
word-break: normal
}
.CodeMirror-linebackground {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 0
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
padding: .1px
}
.CodeMirror-rtl pre {
direction: rtl
}
.CodeMirror-code {
outline: 0
}
.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer {
-moz-box-sizing: content-box;
box-sizing: content-box
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
visibility: hidden
}
.CodeMirror-cursor {
position: absolute;
pointer-events: none
}
.CodeMirror-measure pre {
position: static
}
div.CodeMirror-cursors {
visibility: hidden;
position: relative;
z-index: 3
}
div.CodeMirror-dragcursors {
visibility: visible
}
.CodeMirror-focused div.CodeMirror-cursors {
visibility: visible
}
.CodeMirror-selected {
background: #d9d9d9
}
.CodeMirror-focused .CodeMirror-selected {
background: #d7d4f0
}
.CodeMirror-crosshair {
cursor: crosshair
}
.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection {
background: #d7d4f0
}
.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection {
background: #d7d4f0
}
.cm-searching {
background-color: #ffa;
background-color: rgba(255,255,0,.4)
}
.cm-force-border {
padding-right: .1px
}
@media print {
.CodeMirror div.CodeMirror-cursors {
visibility: hidden
}
}
.cm-tab-wrap-hack:after {
content: ''
}
span.CodeMirror-selectedtext {
background: 0 0
}
src/views/editor/index.vue
......@@ -6,7 +6,7 @@
<Toolbar :editor="editorRef" editorId="wangeEditor-1" class="border-b border-solid border-borderColor" />
</div>
<n-space class="bg-baseColor">
<n-button @click="uploadXml" class="h-full">上传XML</n-button>
<n-button @click="uploadXml" class="h-full" type="error">上传XML</n-button>
<n-button @click="compareXml" class="h-full">XML对比</n-button>
</n-space>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment