feat: 对比渲染

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']

src/assets/file/Trans-Convert.xml

@@ -2,17 +2,18 @@
 <!--Arbortext, Inc., 1988-2013, v.4002-->
 <!DOCTYPE JOBCARD PUBLIC "-//CEA-TEXT//DTD JOBCARD-VER1//EN" "JOBCARD.dtd" [
         <!ENTITY nbsp "&#160;">
-        <!ENTITY rsquo "&#8217;">
+<!ENTITY rsquo "&#8217;">
         ]>
 <JOBCARD>
     <EOTK-HEADER></EOTK-HEADER>
     <CEP>
         <EFFECT EFFRG="001999"></EFFECT>
         <TITLEC>发动机QEC拆卸（V2500-A5系列）</TITLEC>
-        <TITLE>Remove the Engine's QEC(V2500-A series)</TITLE>
+        <TITLE>Remove the Engine's QEC(V2500-A5 series)  测试修改</TITLE>
         <TOPIC CK-LEVEL="C">
             <TITLEC>飞机/发动机基本信息</TITLEC>
             <TITLE>AIRCRAFT/ENGINE INFORMATION</TITLE>
+            <TITLE>测试新增</TITLE>
             <STEP CK-LEVEL="C">
                 <EFFECT EFFRG="001999"></EFFECT>
                 <RECORD-LINE>

src/configs/render-elem.ts

@@ -7,7 +7,7 @@ const renderElem = (type: string, style = { display: 'block' }) => {
         const dataKey = (elem as any).dataKey
         Object.assign(style, {
             // @ts-ignore
-            paddingLeft: Number(elem.dataIndent) * 5 + 'px'
+            textIndent: Number(elem.dataIndent) * 5 + 'px'
         })
         return h(type, { style, attrs: { 'data-key': dataKey } }, children)
     }

src/views/editor/constants/index.ts

+import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
 import { ArrowLeft24Filled, ArrowRight24Filled, Book20Filled, TableInsertColumn24Filled } from '@vicons/fluent'
 import { IDomEditor } from '@wangeditor/editor'
 
+export interface compareResult {
+    dataForNew: NewTreeModification
+    dataForOld: OldTreeModification
+    domOld: Document
+    domNew: Document
+    treeOld: TreeRenderResult[]
+    treeNew: TreeRenderResult[]
+    xmlContentOld: string
+    xmlContentNew: string
+}
 export const showLoading = ref(false)
 //编辑器相关配置
 export const editorRef = shallowRef<IDomEditor>()

src/views/editor/functions/compare.ts

+import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
 import { compareLeftRef, compareRightRef } from '../constants/compare'
 
 export const handleScrollTopLeft = (event: Event) => {
@@ -8,3 +9,80 @@ export const handleScrollTopRight = (event: Event) => {
     const scrollTop = (event.target as HTMLInputElement).scrollTop
     compareLeftRef.value?.handleScrollTop(scrollTop)
 }
+export const handleLeftDifferent = (dataForOld: OldTreeModification, treeNew: TreeRenderResult[]) => {
+    nextTick(() => {
+        const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
+        const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
+        //新增
+        //修改
+        dataForOld.Changed.map((item: any) => {
+            const node = containerLeft!.querySelector(`[data-key="${item.key}"]`)
+            if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
+                node.classList.add('bg-warningColorSuppl')
+            }
+        })
+    })
+}
+export const handleRightDifferent = (dataForNew: NewTreeModification, treeOld: TreeRenderResult[]) => {
+    nextTick(() => {
+        const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
+        const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
+        //新增
+        dataForNew.Added.map((item: any) => {
+            const node = containerRight!.querySelector(`[data-key="${item.key}"]`)
+            if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
+                //处理右边
+                node.classList.add('bg-errorColorSuppl')
+                //处理左边
+                const parentPath = item.chained.slice(0, item.chained.length - 1)
+                const index = item.chained[item.chained.length - 1]
+                const parentData = findNodeByChained(treeOld, parentPath)
+                const parentNode = containerLeft!.querySelector(`[data-key="${parentData?.key}"]`)
+                // 创建一个新节点
+                const newDiv = document.createElement('div')
+                newDiv.style.height = `${node.offsetHeight}px`
+                newDiv.classList.add('bg-dividerColor')
+                parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
+                console.log(parentNode)
+                console.log(node)
+            }
+        })
+        //修改
+        dataForNew.Changed.map((item: any) => {
+            const node = containerRight!.querySelector(`[data-key="${item.key}"]`)
+            if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
+                node.classList.add('bg-warningColorSuppl')
+            }
+        })
+    })
+}
+
+export const findNodeByChained = (data: TreeRenderResult[], targetChained: number[]): TreeRenderResult | null => {
+    const dfs = (currentNode: TreeRenderResult): TreeRenderResult | null => {
+        if (Array.isArray(currentNode.chained) && currentNode.chained.length === targetChained.length) {
+            const isMatch = currentNode.chained.every((value, index) => value === targetChained[index])
+            if (isMatch) {
+                return currentNode // 找到目标节点
+            }
+        }
+        if (currentNode.children && currentNode.children.length > 0) {
+            for (const child of currentNode.children) {
+                const result = dfs(child)
+                if (result !== null) {
+                    return result
+                }
+            }
+        }
+        return null // 当前节点及其子节点中没有找到目标节点
+    }
+    if (!Array.isArray(data) || data.length === 0) {
+        return null // 数据无效
+    }
+    for (const node of data) {
+        const result = dfs(node)
+        if (result !== null) {
+            return result
+        }
+    }
+    return null // 没有找到目标节点
+}

src/views/editor/functions/index.ts

@@ -7,6 +7,7 @@ import { compareLeftData, compareRightData, showCompare } from '../constants/com
 import TextA from '@/assets/file/CES-QEC-V250-A.xml?raw'
 import TextB from '@/assets/file/Trans-Convert.xml?raw'
 import { nodeSet } from '@/configs/node.config'
+import { handleLeftDifferent, handleRightDifferent } from './compare'
 
 export const handleCreated = (editor: IDomEditor) => {
     editorRef.value = editor
@@ -101,6 +102,10 @@ export const compareXml = () => {
     const xmlProcessing = useXMLProcessing()
     const res = xmlProcessing.dualCompareFromString(TextA, TextB, nodeSet)
     console.log(res)
+    //渲染数据
     compareLeftData.value = res.xmlContentOld
     compareRightData.value = res.xmlContentNew
+    //比较数据
+    handleLeftDifferent(res.dataForOld, res.treeNew)
+    handleRightDifferent(res.dataForNew, res.treeOld)
 }